:root {
    --background-color: #101419;
    --accent-color: #8A2BE2; /* couleur de pédale */
    --glow-color: rgba(138, 43, 226, 0.1);
    --accent-glow-strong: rgba(138, 43, 226, 0.7);
    --accent-glow-medium: rgba(138, 43, 226, 0.3);
    --mouse-x: 50vw;
    --mouse-y: 50vh;
}
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* pas toucher */
    z-index: -1; /* non plus tes vieux doigts pleins de gras là */
    background-color: var(--background-color);
    background-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--glow-color) 0%, transparent 300px); /* nouveau */
}
.section {
    /* ça on touche pas sinon ça casse vrm le site */
    background-color: transparent;
}
.article-page-section {
    font-family: var(--font-family-article);
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.article-banner {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 2rem;
}
.article-box {
    background-color: var(--box-background);
    border: 1px solid #333;
    padding: 2rem 2.5rem;
    color: var(--text-color);
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}
.article-title {
    font-family: 'Fira Code', 'Courier New', monospace; /* On garde la police hacker pour le titre */
    color: var(--accent-color) !important;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.5);
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
}
.article-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-color);
}
@media (hover: none) {
    body::before {
        background-image: none;
        background-color: var(--background-color);
    }
}