/* CHARGEMENT DES POLICES LOCALES */
@font-face {
    font-family: 'Inter';
    src: url('../typo/Inter/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../typo/Inter/Inter-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../typo/Inter/Inter-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../typo/Inter/Inter-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


/* Fond blanc et texte noir pour le menu déroulant mobile */
.eco-mode .nav-links {
    background-color: #000000 !important;
}

/* Texte des boutons à l'intérieur du menu */
.eco-mode .nav-links .btn-custom {
    color: #ffffff !important;
    background-color:#ff007a ;
    border: 1px solid #ffffff !important;
}

/* ==========================================
   BLOC RESPONSIVE (À METTRE À LA FIN DU CSS)
   ========================================== */

@media (max-width: 1024px) {
    /* 1. Reset Global : On empêche tout débordement horizontal */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    

    /* 2. Correction du Texte : On annule le décalage de 350px */
    .article-container {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important; /* CRUCIAL : supprime le vide à gauche */
        margin-right: 0 !important;
        left: 0 !important;
        padding: 20px !important; /* Marge interne pour respirer */
        position: relative !important;
        box-sizing: border-box !important;
    }

    .article-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.1rem !important; /* Taille adaptée au mobile */
        line-height: 1.6 !important;
        text-align: left !important; /* Plus lisible sur petit écran */
    }

    /* 3. Notes marginales (les définitions roses) */
    .margin-note {
        position: relative !important; /* Elles ne "flottent" plus à gauche */
        width: 100% !important;
        left: 0 !important;
        margin: 20px 0 !important;
        display: block !important;
        border-left: 3px solid #ff007a; /* Petit repère visuel rose */
        background: rgba(255, 0, 122, 0.05); /* Fond très léger */
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* 4. Images, GIFs et Canvas */
    .article-image, 
    .gif-container img, 
    canvas, 
    #aura {
    position: fixed;
    top: 0;
    left: 0;
    width: 600px; /* Ou ta taille actuelle */
    height: 600px;
    border-radius: 50%;
    pointer-events: none; /* TRÈS IMPORTANT : permet de cliquer sur les boutons à travers l'aura */
    z-index: 1; /* Doit être au-dessus du fond mais sous le texte */
    filter: blur(80px);
    opacity: 0.4;
    transition: background 0.5s ease;
    transform: translate(-50%, -50%);
}

    /* 5. Titres */
    h1 { font-size: 1.8rem !important; word-wrap: break-word; }
    h2 { font-size: 1.5rem !important; }


    /* 1. Conteneur principal : on bloque strictement la largeur */
    .footer-main {
        width: 100vw !important; /* On utilise la largeur de la vue */
        max-width: 100% !important;
        padding: 40px 20px !important;
        margin: 0 !important;
        box-sizing: border-box !important; /* Force le padding à rester à l'intérieur */
        overflow: hidden !important; 
        position: relative !important;
        left: 0 !important;
    }

    /* 2. Conteneur interne : on enlève toute largeur fixe résiduelle */
    .footer-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        box-sizing: border-box !important;
        
    }

    /* 3. Les colonnes : on les bride pour qu'elles ne dépassent jamais */
    .footer-col {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        /* On force le texte à se casser si un mot est trop long */
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* 4. Le texte : retour à la ligne obligatoire */
    .footer-credit, .footer-thanks p, .footer-thanks a {
        text-align: left !important;
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        white-space: normal !important; /* CRUCIAL : autorise le retour à la ligne */
        display: block !important;    /* Force le bloc pour respecter la largeur */
        width: 100% !important;
    }

    .footer-col:last-child {
        order: -1 !important; /* Le déplace tout en haut du footer */
        margin-bottom: 30px !important; /* Ajoute un peu d'espace avec la suite */
        display: flex;
        justify-content: center; /* Centre le bouton sur mobile */
    }

    /* 3. On remet les autres blocs dans l'ordre normal après lui */
    .footer-col:first-child { order: 1; }
    .footer-col:nth-child(2) { order: 2; }
}




body, html {
    margin: 0 !important; 
    padding: 0 !important;
    width: 100% !important;
    background-color: #ffffff;
    /* Pile de secours System Fonts pour la résilience hors-ligne */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #2a2a2a;
    scroll-behavior: smooth;
    transition: background-color 0.4s ease, color 0.4s ease;
    overflow-x: hidden
}

/* Empêche le mot de retour d'être caché sous votre barre de navigation fixée */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Ajustez selon la hauteur de votre menu */
}

:root {
    --scrollbar-bg: #ffffff; /* Fond de la barre en mode clair */
    --scrollbar-thumb: #cccccc; /* Couleur du curseur en mode clair */
}

body.dark-mode, body.eco-mode { 
    /* Couleurs Mode Sombre / Eco */
    --sb-bg: #0b0b0b; 
    --sb-thumb: #333333;
}

/* Pour Chrome, Edge et Safari */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--sb-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border-radius: 10px;
    border: 2px solid var(--sb-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: #ff0095; /* Rose de votre charte */
}

/* Pour Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-bg);
}


:root {
    --sb-bg: #ffffff; 
    --sb-thumb: #cccccc;
    /* Couleurs de sélection en mode clair */
    --select-bg: #ff0095; /* Fond rose */
    --select-color: #ffffff; /* Texte blanc */
}

body.dark-mode { 
    --sb-bg: #0b0b0b; 
    --sb-thumb: #333333;
    /* Couleurs de sélection en mode sombre */
    --select-bg: #ffffff; /* Fond blanc */
    --select-color: #000000; /* Texte noir */
}

/* S'applique à tout le texte de la page */
::selection {
    background-color: var(--select-bg);
    color: var(--select-color);
}

/* Pour Firefox */
::-moz-selection {
    background-color: var(--select-bg);
    color: var(--select-color);
}

:root {
    --aura-color: rgba(255, 0, 149, 0.2); /* Couleur initiale (rose) */
}

:root {
    --aura-color: hsla(0, 90%, 50%, 0.4);
}

#aura {
    position: fixed;
    width: 800px; /* Taille réduite pour plus de densité */
    height: 800px;
    /* On resserre le dégradé : la couleur s'arrête à 60% au lieu de 70% */
    background: radial-gradient(circle, var(--aura-color) 0%, rgba(255, 255, 255, 0) 60%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: none; 
}

/* En mode sombre, on peut même monter l'opacité pour un effet "néon" */
body.dark-mode #aura {
    background: radial-gradient(circle, var(--aura-color) 0%, rgba(11, 11, 11, 0) 65%);
}
/* NAVIGATION */
.nav-container-left { position: fixed; top: 30px; left: 30px; z-index: 1000; }
.nav-container-right { position: fixed; top: 30px; right: 30px; z-index: 1000; display: flex; gap: 12px; }

.btn-custom {
    font-family: 'Inter';
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 20px;
    background-color: #ffffff; border: 1.5px solid #000000;
    font-size: 14px; font-weight: 600; text-decoration: none; color: #2a2a2a;
    cursor: pointer; box-shadow: 3px 3px 0px rgba(0,0,0,0.1); border-radius: 4px;
    transition: all 0.2s ease;
    z-index: 2;
}
.btn-custom:hover { background-color: #ff0095; color: #ffffff !important;z-index: 2; }

/* Supprime le contour épais quand on revient sur le bouton via l'ancre */
#retour-annexe:focus,
#retour-annexe:active {
    border: 1.5px solid #000;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
    border-radius: 4px;
    background-color: #ffffff;
}

/* Si vous voulez garder un style cohérent même quand le bouton est ciblé */
.btn-custom:focus {
    border: 1.5px solid #000;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
    border-radius: 4px;
    background-color: #ffffff;
}

#retour-annexe:target {
    animation: highlight-return 2s ease;
}

@keyframes highlight-return {
    0% { background-color: rgba(255, 0, 149, 0.3); }
    100% { background-color: transparent; }
}

.note-number, .note-ref { color: #ff0095; font-weight: bold; text-decoration: none; display: inline-block;}
.note-ref sup {text-decoration: none; border-bottom: none !important;}

/* BOUTON ECO MODE */
.eco-btn { color: #2e7d32; border-color: #2e7d32; text-transform: lowercase; }

/* DARK MODE */
body.dark-mode { background-color: #0b0b0b; color: #f5f5f5; }
body.dark-mode .btn-custom { background-color: #1a1a1a; color: #f5f5f5; border-color: #f5f5f5; }
body.dark-mode .btn-custom:hover { background-color: #ff0095; color: #ffffff;border-color: #f5f5f5; }
body.dark-mode .footer-main { background-color: #111; border-top-color: #f5f5f5; }
body.dark-mode .side-note { border-right-color: #333; font-size: 13px; line-height: 1.5; color: #ff0099; padding-right: 20px; 
    margin-top: 10px; margin-bottom: 30px; text-align: left;}
body.dark-mode .note-number, body.dark-mode .note-ref { color: #ff0095; font-weight: bold; text-decoration: none; display: inline-block;}
body.dark-mode .hover-hint span { background-color: #000; color: #fff; border-color: #fff; }
body.dark-mode .popup-menu { background-color: #1a1a1a; border-color: #fff; }
body.dark-mode .popup-menu a { color: #fff; }
body.dark-mode .btn-remonter:hover { background-color: #ff0095; color: #ffffff; 
border-color: #ffffff !important;text-decoration: none !important;}
body.dark-mode .back-to-text {display: inline-block; margin-top: 10px; font-size: 10px; text-transform: uppercase; text-decoration: none; color: #ffffff87; font-weight: 600; transition: color 0.2s ease;}
body.dark-mode .back-to-text:hover { color: #ff0095; }


#toggle-symbol { margin-left: 12px; font-size: 18px; width: 12px; display: inline-block; text-align: center; }

/* HERO & CONTENT */
.hero-section { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 10; margin-bottom: 0;}
.main-title { font-family: "Inter"; font-size: 4rem; font-weight: 800; line-height: 1.5; margin-bottom: 20px; letter-spacing: -2px; text-align: left; }
.subtitle { font-size: 1.2rem; opacity: 0.8; }

.hover-hint { max-width: 1200px; margin: 0 auto 40px auto; font-size: 0.75rem; text-transform: uppercase; display: flex; align-items: center; padding: 0 40px; color: #666; }
.hover-hint span { border: 1px solid #000; padding: 2px 6px; border-radius: 3px; background: #fff; color: #000; font-weight: 800; }

.main-content { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto 100px auto; padding: 0 40px; }
.content-wrapper { display: flex; gap: 60px; align-items: flex-start; }
.notes-column { flex: 1; }
.text-column { flex: 2; }

.side-note { 
    font-size: 13px; line-height: 1.5; color: #ff0099; 
    border-right: 1px solid #ddd; padding-right: 20px; 
    margin-top: 10px; margin-bottom: 30px; text-align: left; 
}

.back-to-text {
    display: inline-block;
    margin-top: 10px;
    font-size: 10px;
    text-transform: uppercase;
    text-decoration: none;
    color: #66666687;
    font-weight: 600;
    transition: color 0.2s ease;
}

.back-to-text:hover {
    color: #ff0095; /* Rose de votre charte */
}

/* Optionnel : Ajout d'une petite animation de saut */
.back-to-text:hover {
    transform: translateX(-3px);
}

.text-section { margin-bottom: 150px; }
.section-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 30px; }
p { 
    font-size: 17px; line-height: 1.7; margin-bottom: 1.5rem; text-align: left; }

/* HOVER */
.hover-word { border-bottom: 2px solid #ff0095; cursor: help; position: relative; font-style: italic; }
.hover-image { display: none; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); width: 300px; border: 1.5px solid #000; box-shadow: 5px 5px 0px rgba(0,0,0,0.1); z-index: 100; pointer-events: none; }
.hover-word:hover .hover-image { display: block; }

/* FOOTER */
.footer-main { background-color: #f9f9f9; border-top: 1.5px solid #000; padding: 80px 0; position: relative; z-index: 10; transition: background-color 0.4s ease; }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 40px; }
.footer-col p { font-size: 14px; margin-bottom: 15px; }
.footer-thanks a { color: inherit; text-decoration: underline; font-weight: 600;}
.footer-action { text-align: right; }
.btn-remonter { text-decoration: none !important; color: inherit; font-weight: 800;border: 1.5px solid currentColor; padding: 10px 20px; border-radius: 4px;
transition: all 0.3s ease; /* Optionnel : pour une transition fluide */
}

/* Suppression de l'espace entre .btn-remonter et :hover */
.btn-remonter:hover { background-color: #ff0095; color: #ffffff; 
border-color: #000;text-decoration: none !important; /* Pour que la bordure change aussi de couleur */
}

/* POPUP */
/* --- CORRECTION ALIGNEMENT PC --- */
.sommaire-wrapper { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    position: relative; /* Ajoute ceci pour servir de base au menu */
}

#btn-sommaire-unique:hover {
    color: #ffffff !important; /* Le rose fétiche */
    border-color: #000000 !important;
    background-color: #ff0095; /* Ou la couleur que tu souhaites au survol */
}

body.eco-mode #btn-sommaire-unique:hover {
    color: #ffffff !important; /* Le rose fétiche */
    border-color: #ffffff !important;
    background-color: #ff0095; /* Ou la couleur que tu souhaites au survol */
}

/* On s'assure que le symbole + change aussi de couleur */
#btn-sommaire-unique:hover #toggle-symbol {
    color: #ffffff !important;
    background-color: #ff0095;
}

.popup-menu { 
    display: none; 
    background: white; 
    border: 1.5px solid #000; 
    padding: 20px; 
    margin-top: 10px; 
    width: 220px; 
    box-shadow: 5px 5px 0px rgba(0,0,0,0.1);
    
    /* MODIFICATIONS ICI */
    position: absolute; /* Sort le menu du flux pour ne pas pousser les voisins */
    top: 100%;          /* Se place juste en dessous du bouton */
    right: 0;           /* S'aligne à droite */
    z-index: 2000;      /* Passe devant tout le monde */
}


/* Page d'avertissement mobile */
#mobile-warning {
    display: none; /* Masqué par défaut */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #ffffff;
    z-index: 9999; /* Par-dessus tout */
    padding: 40px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* En mode sombre, l'avertissement s'adapte aussi */
body.dark-mode #mobile-warning {
    background-color: #0b0b0b;
    color: #ffffff;
}

.warning-content { max-width: 500px; }

.warning-content h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #ff0095;
}

.warning-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Ajoute ceci dans ton fichier CSS */
.popup-menu.open {
    display: block; /* Affiche le menu quand la classe 'open' est ajoutée */
}

/* Style du conteneur de la liste */
.popup-menu ul {
    list-style: none; /* Enlève les points/puces */
    padding: 0;
    margin: 0;
}

.popup-menu li {
    margin-bottom: 15px; /* Espace entre les liens */
}

/* Style des liens du sommaire */
.popup-menu a {
    text-decoration: none;
    color: #2a2a2a;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s ease;
    display: block;
}

/* Effet au survol des liens (Rose comme tes boutons) */
.popup-menu a:hover {
    color: #ff0095;
    padding-left: 5px; /* Petit décalage fluide au survol */
}

/* Adaptation du menu en Mode Sombre */
body.dark-mode .popup-menu {
    background-color: #1a1a1a;
    border-color: #f5f5f5;
}

body.dark-mode .popup-menu a {
    color: #f5f5f5;
}

body.dark-mode .popup-menu a:hover {
    color: #ff0095;
}


#mobile-warning {
    display: none; /* Masqué par défaut sur PC */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #ffffff;
    z-index: 10000;
    padding: 30px;
    box-sizing: border-box;
    display: flex; /* Utilisé avec media query */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Apparition seulement sur petits écrans (tablettes et mobiles) */
@media (min-width: 1025px) {
    #mobile-warning { display: none !important; }
}
@media (max-width: 1024px) {
    #mobile-warning { display: flex; }
}

.warning-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

.warning-content h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.warning-content p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
    max-width: 300px;
}

/* Animation fun pour l'icône */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; color: #ff0095; }
    100% { transform: scale(1); opacity: 1; }
}

/* Mode sombre de l'avertissement */
body.dark-mode #mobile-warning {
    background-color: #0b0b0b;
    color: #fff;
}
body.dark-mode .warning-content h1 { color: #fff; }

/* Classe pour mettre en rose les éléments importants */
.highlight-pink {
    color: #ff0095;
    /* On garde le gras pour le mot ordinateur */
    font-weight: 800; 
}

.highlight-rose {
    color: #ff0095;
    /* On garde le gras pour le mot ordinateur */
    font-weight: 400; 
}


/* Mise à jour de l'animation pour qu'elle reste rose */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* On s'assure que l'icône de base n'écrase pas la couleur */
.warning-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}


.interview-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.interview-entry {
    margin-bottom: 4rem;
    position: relative;
}

/* La Question : Style Gras et Moderne */
.question {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: #000;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    border-left: 4px solid #ff0095; /* Votre rose */
    padding-left: 20px;
}

/* La Réponse : Plus aérée */
.answer {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    padding-left: 24px;
}

/* Mode Sombre pour l'interview */
body.dark-mode .question { color: #fff; }
body.dark-mode .answer { color: #ccc; }

.ref-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out; /* Animation fluide */
    background: #f9f9f9;
}

.ref-card.active .ref-content {
    max-height: 1000px; /* Une valeur assez grande pour laisser place au contenu */
    padding: 20px 0;
}




/* ==========================================================================
   CONFIGURATION MUR DE RÉFÉRENCES (MASONRY)
   ========================================================================== */

.ref-masonry {
    display: flex;
    flex-wrap: wrap;
    gap: 0; /* Pour l'effet bloc contre bloc sans espace */
    width: 100%;
    max-width: 1400px; /* Un peu plus large pour l'effet monumental */
    margin: 0 auto 100px auto;
    border: 1px solid #000;
}

/* --- STRUCTURE DES BRIQUES --- */
.ref-item {
    flex: 1 1 350px; /* Taille de base 350px, mais peut s'étendre */
    height: 250px;   /* Hauteur fixe pour l'alignement des rangées */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 25px;
    border: 1px solid #000;
    background-color: #ffffff ;
    box-sizing: border-box;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 2;
}

/* --- LOGIQUE DE LARGEUR ALÉATOIRE (QUINCONCE) --- */
/* Utilisation de nombres premiers pour casser la régularité */
.ref-item:nth-child(3n) { flex-grow: 2; }
.ref-item:nth-child(4n) { flex-grow: 5; }
.ref-item:nth-child(2n) { flex-grow: 1.5; }
.ref-item:nth-child(5n) { flex-grow: 8; }

/* --- CONTENU INTERNE --- */
.ref-category-tag {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    border: 1.5px solid #000;
    padding: 3px 8px;
    letter-spacing: 1px;
}

.ref-item h3 {
    font-size: 1.3rem; /* Un peu plus gros pour l'impact */
    font-weight: 800;
    margin: 15px 0;
    line-height: 1.1;
    text-align: left;
    text-transform: none;
    background-color: transparent !important;
    border: none !important;
}

h1 {
    position: relative; /* Indispensable pour activer le z-index */
    z-index: 10;        /* Doit être supérieur au z-index de l'aura */
    background-color: transparent; /* Pour que l'aura soit visible autour des lettres */
}
.ref-item p {
    font-size: 0.70rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0px !important;
    line-height: 1.1;
    text-align: left;
    background-color: transparent !important;
    border: none !important;
}

/* --- CADRE AUTOUR DU BOUTON VOIR (MODE CLAIR) --- */

/* ==========================================================================
   INTERACTIONS & COULEURS (VIBE ACIDE / AURA)
   ========================================================================== */

.ref-item:hover {
    z-index: 10;
    cursor: pointer;
}

.ref-item .btn-voir {
    border: 1px solid #000000 !important; /* Cadre noir */
    color: #000000 !important;           /* Texte noir */
    padding: 5px 15px !important;        /* Espacement interne */
    text-decoration: none !important;
    font-size: 0.70rem;    /* Pas de souligné */
    font-variant: small-caps !important; /* Petites capitales */
    font-weight: 600 !important;
    display: inline-block !important;
    background-color: transparent !important;
}

.ref-item .btn-voir:hover {
    background-color: #000000 !important;
    color: #ffffff !important; 
}

/* --- HOVERS PAR CATÉGORIE --- */
/* Ouvrages -> Vert Acide */
.ref-item[data-type="ouvrages"]:hover { background-color: #00f2ff !important; }
.ref-item[data-type="ouvrages"]:hover h3{color: #000000;}
.ref-item[data-type="ouvrages"]:hover .btn-voir { color: #ffffff;text-decoration: none; /* Enlève le souligné */ }

/* Vidéo & Son -> Cyan Électrique */
.ref-item[data-type="videoson"]:hover { background-color:#ccff00 !important; }
.ref-item[data-type="videoson"]:hover h3{color: #000000;}
.ref-item[data-type="videoson"]:hover .btn-voir { color: #ffffff; text-decoration: none; /* Enlève le souligné */}

/* Articles -> Rose Aura */
.ref-item[data-type="articles"]:hover { background-color: #ff0095!important; }
.ref-item[data-type="articles"]:hover h3{color: #000000;}
.ref-item[data-type="articles"]:hover .btn-voir { color: #fff; text-decoration: none; /* Enlève le souligné */}

/* Œuvres -> Violet Radar */
.ref-item[data-type="oeuvres"]:hover { background-color: #9d00ff!important; text-decoration: none; /* Enlève le souligné */}
.ref-item[data-type="oeuvres"]:hover h3{color: #000000;} 
.ref-item[data-type="oeuvres"]:hover .btn-voir { color: #fff;text-decoration: none; /* Enlève le souligné */}

/* ==========================================================================
   ÉTATS ACTIFS DES BOUTONS DE FILTRE
   ========================================================================== */

.filter-btn.active[data-filter="all"] { background-color: #000 !important; color: #fff !important; }
.filter-btn.active[data-filter="ouvrages"] { background-color: #00f2ff !important; color: #000 !important; }
.filter-btn.active[data-filter="videoson"] { background-color: #ccff00 !important; color: #000 !important; }
.filter-btn.active[data-filter="articles"] { background-color: #ff0095 !important; color: #fff !important; }
.filter-btn.active[data-filter="oeuvres"] { background-color: #9d00ff !important; color: #fff !important; }

/* ==========================================================================
   MODE SOMBRE (ECO MODE)
   ========================================================================== */


body.dark-mode .ref-item {
    flex: 1 1 350px; /* Taille de base 350px, mais peut s'étendre */
    height: 250px;   /* Hauteur fixe pour l'alignement des rangées */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 25px;
    border: 1px solid #ffffff;
    background-color: #000000 !important;
    box-sizing: border-box;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 2;
}

body.eco-mode .ref-category-tag,
body.eco-mode .btn-voir {
    font-size: 0.70rem;
    font-weight: 600;
    padding: 5px 15px;
    border: 1px solid #ffffff !important; /* Cadre devient blanc */
    color: #ffffff !important;           /* Texte blanc */
    background-color: transparent !important;
    text-decoration: none !important;
}

body.eco-mode .btn-voir:hover {
    background-color: #ffffff !important;
    color: #000000 !important;           /* Inversion au survol */
}

body.dark-mode .ref-item:hover h3 {
    /* Garde le texte noir au hover si le fond devient clair (Vert/Cyan) */
    color: #fff;
}

body.dark-mode .ref-item[data-type="articles"]:hover h3,
body.dark-mode .ref-item[data-type="oeuvres"]:hover h3 {
    /* Garde le texte blanc pour les fonds foncés (Rose/Violet) */
    color: #fff;
}

/* --- HOVER DES BOUTONS DE FILTRE (COULEURS CATÉGORIES) --- */

/* Tout -> Reste en Noir */
.filter-btn[data-filter="all"]:hover {
    background-color: #111;
    color: #fff;
}

/* Ouvrages -> Vert Acide au survol */
.filter-btn[data-filter="ouvrages"]:hover {
    background-color: #00f2ff;
    color: #000;
}

/* Vidéo & Son -> Cyan Électrique au survol */
.filter-btn[data-filter="videoson"]:hover {
    background-color: #ccff00;
    color: #000;
}

/* Articles -> Rose Aura au survol */
.filter-btn[data-filter="articles"]:hover {
    background-color: #ff0095;
    color: #fff;
}

/* Œuvres -> Violet Radar au survol */
.filter-btn[data-filter="oeuvres"]:hover {
    background-color: #9d00ff;
    color: #fff;
}


/* ==========================================================================
   HOVER DES BOUTONS - MODE SOMBRE UNIQUEMENT
   ========================================================================== */

/* On force l'affichage des couleurs au survol quand on est en mode sombre */

body.eco-mode .filter-btn[data-filter="ouvrages"]:hover {
    background-color: #00f2ff !important;
    color: #fff !important;
    border-color: #ffffff !important;
}

body.eco-mode .filter-btn[data-filter="videoson"]:hover {
    background-color: #ccff00 !important;
    color: #fff !important;
    border-color: #ffffff !important;
}

body.eco-mode .filter-btn[data-filter="articles"]:hover {
    background-color: #ff0095 !important;
    color: #fff !important;
    border-color: #ffffff !important;
}

body.eco-mode .filter-btn[data-filter="oeuvres"]:hover {
    background-color: #9d00ff !important;
    color: #fff !important;
    border-color: #ffffff !important;
}

/* Optionnel : Couleur pour le bouton "Tout" en mode sombre */
body.eco-mode .filter-btn[data-filter="all"]:hover {
    background-color: #fff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

body.eco-mode .filter-btn.active[data-filter="all"] { background-color: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; }
/* Ce qui se passe quand le mode éco est activé */
body.eco-mode {
    background-color: #050505 !important; /* Noir profond */
    color: #ffffff !important;           /* Texte blanc */
}

/* Fond noir global en mode éco */
body.eco-mode {
    background-color: #000000 !important;
}

/* On ne change en blanc que ce qui est strictement nécessaire (le texte de base) */
body.eco-mode p, 
body.eco-mode h1, 
body.eco-mode h2, 
body.eco-mode h3,
body.eco-mode li {
    color: #ffffff; /* Ici pas de !important, pour laisser tes autres styles prioritaires */
}

/* Garde tes couleurs spécifiques ! */
/* Si tu as une classe .highlight-pink, on s'assure qu'elle reste rose */
body.eco-mode .highlight-pink {
    color: #ff007a !important; 
}

/* Gestion du footer en mode éco */
body.eco-mode .footer-main {
    background-color: #000000 !important; /* On force le fond en noir */
    border-top: 1px solid #333;           /* Optionnel : un petit trait gris pour séparer */
}

/* On s'assure que tout le texte dans le footer est blanc */
body.eco-mode .footer-main p,
body.eco-mode .footer-main a,
body.eco-mode .footer-main strong {
    color: #ffffff !important;
}

/* Si tes liens dans le footer ont une couleur spéciale (ex: rose) */
body.eco-mode .footer-main a {
    text-decoration: underline;
    /* color: #ff007a !important; <--- décommente si tu veux garder tes liens roses */
}

/* Style des boutons du header en mode éco */
body.eco-mode .btn-custom {
    background-color: #000000 !important; /* Fond noir */
    color: #ffffff !important;           /* Texte blanc */
    border: 1px solid #ffffff !important; /* Bordure blanche pour les voir */
}

/* Effet au survol pour garder de l'interactivité */
body.eco-mode .btn-custom:hover {
    background-color: #ff007a !important; /* Devient blanc au survol */
    color: #ffffff !important;  
    border: 1px solid #ffffff !important;         /* Texte devient noir au survol */
}

/* Si ton bouton sommaire a un symbole (+ ou -) */
body.eco-mode #toggle-symbol {
    color: #ffffff !important;
}
body.eco-mode .btn-custom:hover #toggle-symbol {
    color: #ffffff !important;
}


/* Si tu veux qu'il soit blanc par défaut en mode éco (sans survol) */
body.eco-mode #toggle-symbol {
    color: #ffffff;
}


/* --- MODE ÉCO : BLOCS RÉFÉRENCES --- */

/* On change le fond des blocs en noir et on met une bordure pour les voir */
body.eco-mode .ref-item {
    background-color: #000000 !important;
    border: 1px solid #ffffff !important;
}

/* On force le texte à l'intérieur en blanc */
body.eco-mode .ref-item h3, 
body.eco-mode .ref-item p, 
body.eco-mode .ref-item .ref-type {
    color: #ffffff !important;
}

/* Si tu as des étiquettes (tags) de type (ex: Livre, Vidéo) */
body.eco-mode .ref-type {
    background-color: #333333 !important; /* Gris foncé pour les étiquettes */
    color: #ffffff !important;
}

/* Gestion des liens dans les blocs de références */
body.eco-mode .ref-item a {
    color: #ffffff !important; /* Garde tes liens en rose par exemple */
    text-decoration: underline;
}

/* --- SOMMAIRE EN MODE ÉCO --- */

/* On change le fond du menu déroulant */
body.eco-mode .popup-menu {
    background-color: #000000 !important;
    border: 1px solid #ffffff !important; /* Une bordure blanche pour bien le délimiter */
}

/* On change la couleur des liens à l'intérieur du sommaire */
body.eco-mode .popup-menu nav ul li a {
    color: #ffffff !important;
}

/* Effet au survol des liens dans le sommaire */
body.eco-mode .popup-menu nav ul li a:hover {
    color: #ff007a !important; /* Tes liens deviennent roses au survol par exemple */
}

/* Si tu as un trait de séparation ou des puces */
body.eco-mode .popup-menu ul {
    border-color: #ffffff !important;
}





/*MODIF TEL*/

/* --- NOUVELLE STRUCTURE HEADER --- */
.main-header {
    position: fixed;
    top: 30px;
    left: 30px;
    right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2000;
}

.nav-links {
    display: flex;
    gap: 12px;
}

#burger-icon {
    display: none; /* Caché sur PC */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: #fff;
    padding: 10px;
    border: 1.5px solid #000;
    border-radius: 4px;
    width: 25px;           /* Largeur du bouton */
    height: 20px;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.1); 
    transition: all 0.3s ease;
}


#burger-icon span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #000000ca;
    transition: 0.3s;
}

#burger-icon.open {
    background-color: #ff007a !important; /* Ton rose fétiche */
    border-color: #000000 !important;     /* La bordure devient rose aussi */
}

#burger-icon.open span {
    background-color: #ffffff !important; /* Les barres deviennent blanches */
}

/* --- RESPONSIVE MOBILE (< 1024px) --- */
@media (max-width: 1024px) {
    #burger-icon { display: flex; }

    .nav-links {
        display: none; /* On cache les liens */
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        background: white;
        padding: 15px;
        border: 1.5px solid #000;
        box-shadow: 5px 5px 0px rgba(0,0,0,0.1);
        width: auto;
        max-width: 85vw;    /* Empêche la box de dépasser de l'écran (85% de la largeur max) */
        min-width: 220px;
        gap: 10px;
        overflow-x: hidden;
    }

    /* Quand on clique sur le burger, on ajoute cette classe via JS */
    .nav-links.active {
        display: flex;
    }

.nav-links .btn-custom, 
    .nav-links .sommaire-wrapper,
    .nav-links .sommaire-wrapper button {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important; /* AUTORISE LE TEXTE À REVENIR À LA LIGNE */
        text-align: left;
    }


    /* On force le bouton eco-mode à rester visible à gauche */
    .header-static {
        display: block;
    }
    
    .popup-menu {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0px 0 !important;
    }

    /* Force les liens du sommaire à ne pas dépasser */
    .popup-menu nav ul li a {
        white-space: normal !important; /* Crucial pour les titres longs */
        display: block;
        width: 100%;
        padding: 0px 0;
    }
}

/* Mode Eco pour le burger */
body.eco-mode #burger-icon { background: #000; border-color: #fff; }
body.eco-mode #burger-icon span { background-color: #fff; }