/* ==========================================================================
   MASTER CSS - 7ÈME RÉPUBLIQUE (VERSION NETTOYÉE & CORRIGÉE)
   ========================================================================== */
/* CLASSE POUR CACHER DU TEXTE (VISIBLE UNIQUEMENT PAR GOOGLE) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* --- 1. CONFIGURATION GÉNÉRALE & FONTS --- */
@font-face { font-family: 'DIN'; src: url('../fonts/DIN Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'DIN'; src: url('../fonts/DIN Alternate.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'DIN'; src: url('../fonts/DIN Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* TITRES */
h1, .titres h1, summary { font-family: "Racing Sans One", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; }
h2, h3 { font-family: "Varela Round", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

body {
    font-family: 'DIN', sans-serif; font-size: 1.1rem; line-height: 1.6; color: #000;
    margin: 0; 
    padding-top: 190px !important; /* Espace PC par défaut */
    min-height: 100vh;
    display: flex; flex-direction: column; 
   
}

/* ==========================================================================
   HEADER & NAVIGATION (CORRIGÉ : EFFET RELIEF MARQUÉ)
   ========================================================================== */

header {
    position: fixed; top: 0; left: 0; width: 100%;
    background-color: rgba(255,255,255,0.95);
    border-bottom: none !important; 
    z-index: 50;
    /* On garde une ombre très légère sous le header lui-même pour le détacher du fond */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    transition: transform 0.4s ease;
    padding-top: 20px;
}
header.header-hidden { transform: translateY(-100%); box-shadow: none; }

/* Conteneur Flexible Unifié */
header .header-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    min-height: 100px;
    padding: 0 20px;
    text-align: center;
}

/* LE LOGO (IMAGE) - EFFET "FRAPPÉ" PRONONCÉ */
.logo {
    display: block !important;
    position: relative !important;
    margin: 0 15px 0 0 !important;
    flex-shrink: 0 !important;
    z-index: 10;
}

.logo img { 
    height: 72px !important; 
    width: auto !important; 
    display: block !important; 
    transition: all 0.5s ease; 
    
    /* C'EST ICI LE SECRET POUR L'IMAGE : DOUBLE FILTRE */
    /* 1. drop-shadow blanc net (1px) = Le rebord lumineux */
    /* 2. drop-shadow noir flou (4px) = L'ombre de profondeur */
    filter: drop-shadow(1px 1px 0px rgba(255,255,255,1)) drop-shadow(4px 4px 3px rgba(0,0,0,0.5)) !important;
}

/* Au survol, on peut réduire légèrement l'ombre pour simuler une pression */
.logo:hover img { 
    transform: translateY(1px); /* Il s'enfonce un peu */
    filter: drop-shadow(1px 1px 0px rgba(255,255,255,1)) drop-shadow(2px 2px 2px rgba(0,0,0,0.6)) !important;
}

/* LE TITRE (TEXTE) - MÊME EFFET PRONONCÉ */
.titres {
    position: relative !important;
    width: auto !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    z-index: 1;
}

.titres h1 { 
    font-size: 2.65rem !important; 
    margin: 0 !important; 
    
    /* Couleur foncée pour le contraste */
    color: #222 !important; 
    
    line-height: 1 !important; 
    display: flex !important; 
    align-items: center !important; 
    
    /* L'EFFET RELIEF QUE VOUS AVEZ VALIDÉ */
    text-shadow:
        /* Reflet blanc net en haut/gauche */
        1px 1px 2px rgba(255, 255, 255, 0.9),
        /* Ombre noire marquée en bas/droite */
        3px 3px 5px rgba(0, 0, 0, 0.5) !important;
}

.titres .eme { 
    font-size: 0.6em !important; 
    text-transform: uppercase; 
    position: relative; 
    top: -10px !important; 
    margin-right: 5px !important;
    /* On applique aussi l'ombre au "ème" pour la cohérence */
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8), 2px 2px 3px rgba(0,0,0,0.4) !important;
}

.titres p { 
    font-family: 'DIN', sans-serif; 
    font-weight: 300; 
    margin: 5px 0 0 0; 
    color: #666; 
    font-size: 1.2rem; 
    /* Pas d'ombre ou très légère sur le petit texte pour garder la lisibilité */
    text-shadow: none !important;
}

/* ONGLETS (SCROLL MENU) */
.scroll-menu { display: flex; overflow-x: auto; padding: 20px 20px 10px 20px; border-bottom: none !important; gap: 5px; align-items: flex-end; scroll-behavior: smooth; }
.scroll-menu::-webkit-scrollbar { height: 14px; background: transparent; }
.scroll-menu::-webkit-scrollbar-track { background: linear-gradient(to bottom, transparent 6px, #dddddd 6px, #dddddd 8px, transparent 8px); margin: 0 20px; }
.scroll-menu::-webkit-scrollbar-thumb { background-color: #333; border: 4px solid transparent; border-radius: 20px; background-clip: content-box; cursor: pointer; min-width: 30px; }

.tab-folder { padding: 12px 25px; text-decoration: none; font-family: 'DIN', sans-serif; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; background-color: #f8f8f8; color: #000000; border: 1px solid #ccc; border-bottom: none; border-radius: 8px 8px 0 0; white-space: nowrap; position: relative; top: 1px; transition: 0.2s; }
.tab-folder.active, .tab-folder:hover { background-color: #fff; color: #000; transform: translateY(-3px); border-top: 3px solid #bc3c00; z-index: 10; box-shadow: 0 -5px 15px rgba(0,0,0,0.1); }
.link-download { background-color: #fff !important; color: #bc3c00 !important; font-weight: 900; }

.phrase-separateur { display: flex; align-self: center; white-space: nowrap; color: #888; font-family: 'DIN', sans-serif; font-weight: 600; text-transform: uppercase; font-size: 0.7rem; opacity: 0.6; padding: 0 30px; border-left: 1px solid #ccc; margin: 0 10px; height: 20px; line-height: 20px; }
.tab-joker { background-color: #000 !important; color: #fff !important; border: 1px solid #000 !important; margin-left: 10px; opacity: 1 !important; }
/* ==========================================================================
   MENU BURGER : POSITION HAUT GAUCHE (CORRIGÉE & NETTOYÉE)
   ========================================================================== */

.menu-controller {
    /* 1. POSITIONNEMENT FIXE (TOUJOURS VISIBLE) */
    position: fixed !important; 
    z-index: 2000002 !important; /* Au-dessus de tout */
    
    /* 2. CALAGE EN HAUT À GAUCHE */
    top: 0 !important; 
    left: 0 !important; 
    
    /* 3. MARGE POUR DÉCOLLER DU BORD */
    margin-top: 15px !important;  
    margin-left: 15px !important;
    
    /* On annule toute force qui tirerait vers le bas */
    bottom: auto !important;
    right: auto !important;
    
    width: 50px;
    height: 50px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; 
    transition: transform 0.3s ease;
}

.menu-controller:hover {
    transform: scale(1.05);
}

/* CONTENEUR DU TEXTE */
.menu-box {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

/* LE TEXTE "MENU" */
.menu-inner-text {
    font-family: 'DIN', sans-serif;
    font-weight: 700; font-size: 0.75rem;
    letter-spacing: 2px; color: #000;
    opacity: 1 !important; transform: scale(1) !important;
}

/* LES TRAITS (SERRÉS) */
.menu-box::before, .menu-box::after {
    content: ''; position: absolute;
    width: 100%; height: 2px;
    background-color: #000; left: 0;
    transition: all 0.3s ease;
}
/* Position resserrée à 5px */
.menu-box::before { top: -5px; }
.menu-box::after { bottom: -5px; }

/* ==========================================================================
   ETAT OUVERT : LE BOUTON DISPARAÎT
   (Puisque le menu a son propre bouton "Fermer")
   ========================================================================== */

.menu-controller.open {
    /* 1. On le rend transparent */
    opacity: 0 !important;
    
    /* 2. On désactive le clic (pour ne pas cliquer sur un bouton fantôme) */
    pointer-events: none !important;
    
    /* 3. Petit effet de zoom arrière pour le style */
    transform: scale(0.8) !important; 
    
    /* Transition fluide */
    transition: all 0.3s ease !important;
}
/* ==========================================================================
   CONTENU & ACCORDÉONS (FINAL : STICKY, LABEL NOIR, DESIGN ÉPURÉ)
   ========================================================================== */

/* --- 1. MISE EN PAGE GÉNÉRALE DU MAIN --- */
main { 
    width: 100%; max-width: 100%; 
    padding: 0 20px; margin: 0 auto; 
    margin-top: 0 !important; padding-top: 0 !important; 
}

/* --- 2. ACCORDÉONS (DETAILS & SUMMARY) --- */
details { 
    display: block; 
    margin-bottom: 25px; 
    background: #fff; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    overflow: visible; /* Important pour le sticky */
}

/* LE TITRE COLLANT (SUMMARY) */
summary { 
    display: block !important; 
    width: 100% !important; 
    padding: 0 !important; margin: 0 !important; 
    list-style: none; cursor: pointer;
    
    /* --- EFFET STICKY (COLLANT) --- */
    position: -webkit-sticky;
    position: sticky;
    top: 0; 
    z-index: 100; /* Au-dessus du texte, sous le menu */
    
    /* STYLE PAR DÉFAUT (FERMÉ) */
    background-color: #ffffff; 
    border-bottom: 2px solid #000000; 
    
    transition: all 0.3s ease;
    box-shadow: 0 2px 0px rgba(255,255,255,0.8);
}

/* STYLE QUAND OUVERT (Bordure brique + fond) */
details[open] > summary {
    border-bottom: 4px solid #bc3c00; 
    background-color: #fdfbf7; 
    padding-bottom: 5px !important; /* Petit ajustement */
}

/* Cache la flèche par défaut des navigateurs */
summary::-webkit-details-marker { display: none; }


/* --- 3. CONTENU DU TITRE (LAYOUT) --- */
.summary-layout { 
    display: grid !important; 
    grid-template-columns: 1fr auto !important; /* Titre à gauche, Outils à droite */
    align-items: flex-start !important; 
    width: 100% !important; 
    padding: 15px 0 15px 10px !important; /* Padding interne du titre */
    min-height: 35px; box-sizing: border-box; 
}

/* STYLE DU TITRE H3 */
.titre-article h3 { 
    margin: 0 !important; 
    font-family: 'Varela Round', sans-serif !important; 
    font-weight: 700 !important; 
    font-size: 1rem !important; line-height: 1.5 !important; 
    text-transform: uppercase; text-align: left !important;
}

/* L'ÉTIQUETTE NOIRE "ARTICLE X :" */
.article-label {
    background-color: #000000;
    color: #ffffff;
    padding: 4px 8px;
    display: inline-block;
    margin-right: 10px;
    font-weight: 700;
    /* Petit ajustement vertical pour l'aligner avec le texte */
    vertical-align: middle; 
    font-size: 0.9rem;
}

.titre-article { grid-column: 1; padding-right: 15px; } /* Espace avant les boutons */


/* --- 4. BOUTONS OUTILS (A DROITE) --- */
.outils-verticaux { 
    grid-column: 2; 
    display: flex; flex-direction: column; gap: 8px !important; 
    align-items: flex-end; 
    margin-bottom: 0 !important; padding-bottom: 0 !important; 
    margin-right: 10px; /* Marge droite pour ne pas coller au bord */
}

.tool-btn { 
    border: 1px dotted #999 !important; border-radius: 3px; 
    background: #fff !important; /* Fond blanc pour cacher le trait du summary */
    padding: 3px 8px !important; margin: 0 !important; width: 100%; 
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; 
    transition: all 0.3s ease; 
}

.tool-btn .label { 
    font-family: "Varela Round", sans-serif; font-weight: 400; 
    font-size: 0.65rem; color: #2b2b2b; text-transform: uppercase; 
    letter-spacing: 1px; line-height: 1; margin-right: 5px;
}
.tool-btn .icon-red { width: 12px; height: 12px; fill: #bc3c00; }
.tool-btn:hover { border-color: #bc3c00 !important; background-color: rgba(188, 60, 0, 0.05) !important; }


/* --- 5. INDICATEUR "LIRE" (LA LANGUETTE) --- */
.read-indicator { 
    position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); 
    background-color: #fff; border: 1px solid #000; padding: 4px 15px; 
    font-family: 'DIN', sans-serif; font-weight: 700; font-size: 0.8rem; 
    letter-spacing: 1px; color: #000; 
    display: flex; align-items: center; gap: 8px; z-index: 10; 
    transition: all 0.3s ease; 
}
details[open] .read-indicator { display: none !important; }


/* --- 6. LE CONTENU (TEXTE) --- */
.content { padding: 30px; text-align: justify; border-top: 1px solid #eee; }
.content, .content p, .content ul, .content li { 
    font-family: "Varela Round", sans-serif !important; 
    font-size: 1.05rem; line-height: 1.7; color: #222; 
}

/* Lettrine (Première lettre) */
.content > p:first-of-type::first-letter { 
    font-family: 'Racing Sans One', cursive !important; float: left; 
    font-size: 3.5rem; line-height: 0.8; padding: 4px 10px 0 3px; 
    color: #bc3c00; text-transform: uppercase; 
}

/* Meta (Like / Vues) */
.article-meta { 
    display: flex; align-items: center; justify-content: flex-end; gap: 20px; 
    margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; 
    font-family: 'DIN', 'Share Tech Mono', sans-serif; 
}
.read-count .value { color: #000; font-weight: 700; margin-left: 5px; }
.like-button { 
    background: none; border: 1px solid #ccc; padding: 6px 12px; 
    cursor: pointer; display: flex; align-items: center; gap: 10px; 
    font-family: inherit; transition: all 0.3s ease; 
}
.like-button.liked { border-color: #bc3c00; background-color: rgba(188, 60, 0, 0.05); }
.like-button.liked .like-icon svg { fill: #bc3c00; stroke: #bc3c00; transform: scale(1.1); }


/* --- 7. MODULES ADDITIONNELS (INTRO / RUPTURE / FOCUS) --- */

/* Module Intro */
.module-introduction { padding: 0 20px !important; margin: 0 auto 20px auto !important; width: 100%; max-width: 900px; text-align: center !important; }
.module-introduction h2 { font-family: 'Varela Round', sans-serif !important; font-weight: 700; text-transform: uppercase; font-size: 1.3rem !important; line-height: 1.2 !important; color: #000; margin: 20px 0 10px 0 !important; }
.module-introduction p { font-family: 'DIN', sans-serif; font-size: 1rem !important; color: #666; line-height: 1.5 !important; margin: 0 !important; }
.trait-separation { width: 40px; height: 3px; background-color: #bc3c00; margin: 15px auto !important; }

/* Module Rupture */
.module-rupture { background-color: #000; color: #fff; padding: 20px 30px; margin: 40px 0; text-align: center; background-image: repeating-linear-gradient(45deg, #111 0, #111 1px, transparent 0, transparent 50%); background-size: 10px 10px; }
.module-rupture blockquote { font-family: 'DIN', sans-serif; font-weight: 700; font-size: 1.8rem; line-height: 1.4; margin: 0; text-transform: uppercase; letter-spacing: 2px; border-left: 5px solid #bc3c00; padding-left: 30px; display: inline-block; text-align: left; }

/* Module Focus */
.module-focus { border: 4px solid #000; padding: 30px; margin: 40px 0; text-align: center; background-color: #fff; position: relative; }
.label-focus { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background-color: #000; color: #fff; padding: 0 10px; font-family: 'DIN', sans-serif; font-size: 0.8rem; font-weight: 700; }
.chiffre-focus { font-family: 'Racing Sans One', cursive; font-size: 5rem; color: #bc3c00; line-height: 1; margin-bottom: 10px; }
.texte-focus { font-family: 'DIN', sans-serif; font-weight: 700; text-transform: uppercase; }
/* ==========================================================================
   FOOTER FINAL - CORRECTION "INVISIBLE" & POSITION
   ========================================================================== */
footer { 
    /* 1. POSITION : FIXE EN BAS (Disparaît au scroll via JS) */
    position: fixed !important; 
    bottom: 0 !important; 
    left: 0 !important; 
    width: 100% !important;
    
    /* 2. COULEURS : BLANC AVEC LIGNE NOIRE */
    background-color: #ffffff !important; 
    border-top: 5px solid #000000 !important; 
    
    color: #000000 !important; 
    padding: 15px 0 10px 0 !important; 
    text-align: center !important; 
    z-index: 900 !important; 
    transition: transform 0.3s ease-in-out !important;
    transform: translateY(0);
}

/* CLASSE POUR LE JS (CACHE LE FOOTER) */
footer.footer-hidden { transform: translateY(100%) !important; }

/* CONTENEUR FLEXIBLE */
.social-container { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    flex-wrap: wrap !important;     
    gap: 20px !important; 
    margin: 0 0 10px 0 !important; 
    padding: 0 !important; 
}

/* BOUTON "M'ÉCRIRE" */
.btn-contact-prestige {
    display: inline-block !important;
    padding: 8px 15px !important; 
    border: 3px solid #000000 !important;
    background-color: #ffffff !important; 
    color: #000000 !important;
    font-family: 'Racing Sans One', sans-serif !important;
    font-size: 1rem !important;
    text-transform: uppercase !important; 
    text-decoration: none !important;
    line-height: 1 !important;
}

/* ICÔNES */
.social-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    width: 40px !important;  
    height: 40px !important;
}

/* FORCER LA COULEUR NOIRE SUR LES SVG */
.social-svg {
    width: 24px !important;
    height: 24px !important;
    fill: #000000 !important; /* NOIR OBLIGATOIRE */
    stroke: none !important;
    transition: fill 0.3s ease !important;
}

/* SURVOL */
.social-item:hover .social-svg { fill: #bc3c00 !important; }
.btn-contact-prestige:hover { background-color: #000000 !important; color: #ffffff !important; }

/* COPYRIGHT */
.footer-copyright { 
    display: block !important;
    width: 100% !important;
    font-size: 0.65rem !important;
    color: #666666 !important; 
    font-family: 'DIN', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px !important;
}
/* ==========================================================================
   MENU VINTAGE "PAPIER INCLINÉ" (V5 - FINAL PANORAMIQUE)
   ========================================================================== */

.menu-backdrop {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5); z-index: 1999999;
    opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.menu-backdrop.open { opacity: 1; pointer-events: auto; }

.menu-overlay-vintage {
    position: fixed; top: 0; left: 0; height: 100vh;
    z-index: 2000000;
    
    width: 85%; max-width: 500px;
    
    background-color: var(--vintage-bg-color, #f4e4c9);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    
    transform: translateX(-100%) skewX(-5deg);
    transform-origin: top left;
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: 10px 0 30px rgba(0,0,0,0.3);
    border-right: 4px solid #222;
    overflow-y: auto; overflow-x: hidden;
}
.menu-overlay-vintage.open { transform: translateX(0) skewX(-5deg); }

.menu-content-unskewed {
    transform: skewX(5deg);
    min-height: 100%; position: relative;
    display: flex; flex-direction: column; 
    align-items: flex-end; /* Tout collé à droite */
    text-align: right;
    
    padding-top: 100px; 
    padding-bottom: 50px;
    padding-right: 15px; 
    padding-left: 0; /* On met 0 ici pour gérer le bord gauche manuellement */
}

/* BOUTON FERMER (DÉCALÉ À 60px pour ne pas être coupé) */
.btn-close-vintage {
    position: absolute; 
    top: 30px; 
    left: 70px; /* On le pousse bien vers la droite */
    
    font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1rem;
    cursor: pointer; color: #bc3c00; border: 2px solid #222;
    padding: 5px 12px; background: rgba(255,255,255,0.9);
    z-index: 10; transition: 0.3s;
}
.btn-close-vintage:hover { background: #222; color: #fff; }


/* --- L'EFFET ESCALIER (Diagonale) --- */

/* Bloc 1 (Haut) : Collé à la ligne */
.bloc-diagonal-1 {
    margin-right: 0px; 
    width: 100%; display: flex; flex-direction: column; align-items: flex-end;
    padding-left: 20px; /* Marge interne de sécurité */
}

/* Bloc 2 (Milieu) : Un peu décalé */
.bloc-diagonal-2 {
    margin-right: 25px; 
    width: 100%; display: flex; flex-direction: column; align-items: flex-end;
    padding-left: 20px;
}

/* Bloc 3 (Bas) : Le plus décalé */
.bloc-diagonal-3 {
    margin-right: 50px; 
    width: 100%; display: flex; flex-direction: column; align-items: flex-end;
    /* Pas de padding left ici car la photo doit toucher le bord */
}


/* --- PHOTO PANORAMIQUE & PROFIL --- */
.profil-vintage-container {
    display: flex; flex-direction: column; align-items: flex-end;
    width: 100%; 
    margin-top: 10px;
}

.profil-photo-pano {
    width: 120%; 
    height: 120px; 
    object-fit: cover;
    margin-left: -50px; 
    margin-right: -20px; 
    border-top: 2px solid #222;
    border-bottom: 2px solid #222;
    margin-bottom: 15px;
    filter: sepia(0.3) contrast(1.1);
}

/* C'EST ICI LE CHANGEMENT */
.profil-bio {
    /* Nouvelle Police */
    font-family: "Edu SA Hand", cursive;
    font-weight: 600; /* Un peu gras pour être lisible */
    font-size: 1.1rem; /* Un peu plus grand */
    line-height: 1.4;
    color: #222;
    
    /* Mise en page : On enlève la limite de largeur */
    max-width: 60%; /* Prend toute la largeur du bloc */
    width: 60%;     /* Force l'étalement */
    
    margin: 0 0 15px 0; 
    padding-right: 20px; 
    text-align: right; /* Aligné à droite */
}

.profil-email {
    font-family: 'DIN', monospace; font-weight: 700; color: #bc3c00;
    text-decoration: none; font-size: 0.9rem; border: 1px dashed #bc3c00;
    padding: 2px 8px; transition: 0.3s;
    margin-right: 20px;
}
.profil-email:hover { background: #bc3c00; color: #fff; }


/* --- STYLE GÉNÉRAL --- */
.vintage-section-title {
    display: block !important; width: 100% !important; text-align: right;
    font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.6rem;
    text-transform: uppercase; color: #222;
    margin: 20px 0 15px 0; position: relative; padding-bottom: 8px;
}
.vintage-section-title::before { content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 4px; background-color: #222; }
.vintage-section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #222; }

/* ==========================================================================
   STYLE FINAL : BANDES "ÉBÈNE & RELIEF" (EFFET 3D)
   ========================================================================== */

.nav-bands-container {
    display: flex; flex-direction: column; width: 100%;
    gap: 18px; margin-bottom: 30px;
}

.nav-band {
    display: flex; justify-content: flex-end; align-items: center;
    width: 100%;
    
    /* 1. LE MATÉRIAU (Noir profond avec léger dégradé pour le volume) */
    background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
    
    padding: 15px 20px;
    text-decoration: none; transition: all 0.2s ease;
    
    /* 2. L'EFFET 3D DU BLOC (Biseau lumineux en haut + Ombre portée) */
    border-top: 1px solid rgba(255,255,255,0.15); /* Tranche lumineuse du haut */
    border-left: 1px solid rgba(255,255,255,0.05); /* Tranche lumineuse gauche */
    border-bottom: 1px solid #000; /* Tranche sombre bas */
    
    box-shadow: 
        0 4px 6px rgba(0,0,0,0.3), /* Ombre portée douce sur le papier */
        inset 0 1px 0 rgba(255,255,255,0.1); /* Reflet interne */
        
    border-radius: 2px; /* Coins très légèrement adoucis pour le réalisme */
}

.nav-band:hover {
    transform: translateX(-5px); /* Se soulève vers la gauche */
    background: linear-gradient(145deg, #333, #222); /* S'éclaircit légèrement */
    
    /* L'ombre grandit quand on soulève */
    box-shadow: 
        5px 5px 15px rgba(0,0,0,0.5), 
        inset 0 1px 0 rgba(255,255,255,0.2);
        
    border-right: 4px solid #bc3c00; /* Le marqueur rouge */
}

/* LE TEXTE (COULEUR PAPIER + OMBRE PORTÉE) */
.band-text {
    font-family: 'Oswald', sans-serif; font-weight: 700;
    font-size: 1.1rem; letter-spacing: 2px; text-transform: uppercase;
    
    /* Couleur crème du papier */
    color: var(--vintage-bg-color, #f4e4c9); 
    
    margin-right: 15px;
    
    /* Le texte semble "posé" ou "imprimé" en relief sur le noir */
    text-shadow: 2px 2px 0px #000000; 
}

/* L'ICÔNE (RELIEF SUR L'IMAGE PNG) */
.band-icon {
    width: 36px; height: 36px;
    object-fit: contain;
    
    /* 3. L'EFFET RELIEF SUR L'ICÔNE ELLE-MÊME */
    /* - Drop-shadow blanc faible (-1px -1px) = Lumière sur le bord haut/gauche */
    /* - Drop-shadow noir fort (2px 2px) = Ombre portée sur le bloc noir */
    filter: 
        drop-shadow(-1px -1px 0px rgba(255,255,255,0.25)) 
        drop-shadow(2px 2px 2px rgba(0,0,0,0.8));
        
    transition: transform 0.3s;
}

/* Au survol, l'icône bouge un peu pour le dynamisme */
.nav-band:hover .band-icon {
    transform: scale(1.1) rotate(5deg);
    filter: 
        drop-shadow(-1px -1px 0px rgba(255,255,255,0.4)) 
        drop-shadow(4px 4px 4px rgba(0,0,0,0.9));
}

.archive-link-vintage {
    display: flex; justify-content: flex-end; align-items: baseline;
    text-decoration: none; padding: 10px 0; width: 100%;
    border-bottom: 1px dotted #999; transition: 0.3s;
}
.archive-link-vintage:hover { padding-right: 15px; border-bottom-color: #bc3c00; }
.archive-title { font-family: 'Varela Round', sans-serif; font-size: 1rem; color: #222; text-align: right; }
.archive-date { font-family: 'DIN', monospace; font-weight: 700; font-size: 0.8rem; color: #bc3c00; margin-left: 10px; }

@media screen and (max-width: 600px) {
    .menu-overlay-vintage { width: 85%; }
    .nav-circles-grid { grid-template-columns: repeat(2, 110px); gap: 10px; }
    .nav-medaillon { width: 110px; height: 110px; }
    .btn-close-vintage { left: 50px; } 
    .profil-photo-pano { margin-left: -30px; } /* Ajustement marge mobile */
}
/* =================================================================
   RÉGLAGES PC (> 1000px)
   ================================================================= */
@media (min-width: 1000px) {
    body .content { column-count: 2 !important; column-gap: 60px !important; column-rule: 1px solid #eee !important; text-align: justify !important; }
    body .content h3, body .content h4, body .content h2 { break-after: avoid; column-span: all; }
    body .content img { -webkit-column-span: all !important; column-span: all !important; width: 100% !important; height: auto !important; display: block !important; margin-bottom: 30px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    .tab-folder { padding: 10px 12px !important; font-size: 0.85rem !important; }
}

/* =================================================================
   RÉGLAGES MOBILE (< 768px) - FINAL & UNIFIÉ
   ================================================================= */
@media screen and (max-width: 768px) {

    /* 1. RESET BODY */
    body { 
        padding-top: 140px !important; display: block !important; height: auto !important;
        overflow-y: visible !important; background-attachment: scroll !important;
    }

    /* 2. HEADER */
    header { padding-top: 0 !important; display: flex !important; flex-direction: column !important; height: auto !important; }

    /* CONTENEUR FLEXIBLE (LOGO + TITRE) */
    header .header-content {
        height: 60px !important; padding-left: 50px !important; padding-right: 10px !important; margin: 0 !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
    }

    /* AJUSTEMENTS LOGO */
    .logo { margin-right: 10px !important; }
    .logo img { height: 35px !important; }

    /* AJUSTEMENTS TITRE */
    .titres h1 { font-size: 1.1rem !important; }
    .titres p { font-size: 0.65rem !important; margin-top: 2px !important; }
    .titres .eme { top: -6px !important; }

    /* BURGER FIXE GAUCHE */
    .menu-controller { position: absolute !important; top: 20px !important; left: 15px !important; z-index: 200 !important; }
    .menu-label { display: none !important; }

    /* MENU SCROLL ASPIRÉ VERS LE HAUT */
    .scroll-menu {
        padding-top: 10px !important; margin-top: -15px !important; padding-bottom: 10px !important;
        width: 100% !important; gap: 5px !important;
    }
    /* Remplacement de la ligne .tab-folder dans le bloc mobile */
    .tab-folder { 
        padding: 4px 8px !important;    /* Marges internes réduites */
        font-size: 0.65rem !important;  /* Texte plus petit */
        height: auto !important;        /* Hauteur ajustée au contenu */
        line-height: 1.2 !important;    /* Interligne compact */
        border-radius: 4px 4px 0 0 !important; /* Arrondis plus subtils */
    }
    .tab-folder.active { z-index: 100 !important; }

    /* --- C'EST ICI LA RÉPARATION DE LA PHRASE --- */
    /* On la réaffiche, mais en plus petit pour qu'elle tienne dans le scroll */
    .phrase-separateur { 
        display: inline-flex !important; 
        opacity: 1 !important; 
        border: none !important; /* On enlève le trait pour gagner de la place */
        padding: 0 10px !important;
        font-size: 0.65rem !important;
        margin: 0 !important;
    }
    .tab-joker { display: none !important; } /* On cache le joker sur mobile si manque de place */

    /* AJUSTEMENTS MENU FULLSCREEN MOBILE */
    .menu-grid { padding-top: 60px; }
    .col-sommaire { padding: 0 10px; margin-bottom: 10px; }
    .col-archives { padding: 10px 20px; }
    .item-archive { padding-left: 25px !important; margin-bottom: 20px !important; }
    .item-archive::after { left: 0; }

    /* FOOTER / RESTE */
    body .content { column-count: 1 !important; padding: 20px !important; }
    .social-label, .footer-cta { display: none !important; }
    .social-container { gap: 15px !important; margin: 0 !important; }
    footer { padding: 10px !important; }
}

/* ==========================================================================
   MODULE VINTAGE
   ========================================================================== */
:root {
    --vintage-bg-color: #f4e4c9; --vintage-text-color: #2c2c2c; --vintage-orange-color: #ff5722; --vintage-border-color: #3a3a3a; 
}
.module-vintage {
    background-color: var(--vintage-bg-color);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E"),
                      repeating-linear-gradient(to bottom, var(--vintage-border-color) 0, var(--vintage-border-color) 1px, transparent 1px, transparent 4px),
                      repeating-linear-gradient(to bottom, var(--vintage-border-color) 0, var(--vintage-border-color) 1px, transparent 1px, transparent 4px);
    background-size: auto, 8px 100%, 8px 100%; background-position: 0 0, 0 0, 100% 0; background-repeat: repeat, no-repeat, no-repeat;
    margin: 40px 0; padding: 10px; color: var(--vintage-text-color); text-align: center; position: relative;
}
.module-vintage::before, .module-vintage::after {
    content: ''; position: absolute; left: 8px; right: 8px; height: 8px;
    background-image: repeating-linear-gradient(to right, var(--vintage-border-color) 0, var(--vintage-border-color) 1px, transparent 1px, transparent 4px);
}
.module-vintage::before { top: 0; } .module-vintage::after { bottom: 0; }

.module-vintage-content {
    border: 1px solid var(--vintage-border-color); padding: 30px 20px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}
.vintage-serif { font-family: 'Merriweather', serif; font-size: 1.1rem; font-style: italic; }
.title-bold { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; margin: 10px 0; line-height: 1.2; }
.text-orange { color: var(--vintage-orange-color); }
.vintage-main-title h2 { font-size: 2.2rem; letter-spacing: 1px; }
.separator { display: block; margin: 15px 0; font-size: 1.2rem; position: relative; }
.separator::before, .separator::after { content: ''; position: absolute; top: 50%; width: 30px; height: 1px; background-color: var(--vintage-border-color); }
.separator::before { left: 50%; margin-left: -50px; } .separator::after { right: 50%; margin-right: -50px; }
.vintage-details { margin-top: 30px; } .vintage-details h3 { font-size: 1.8rem; }
.vintage-footer { margin-top: 40px; border-top: 2px solid var(--vintage-border-color); padding-top: 20px; }
.footer-text { font-size: 2rem; letter-spacing: 3px; }
.double-underline { display: inline-block; position: relative; padding-bottom: 10px; }
.double-underline::before { content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 4px; background-color: currentColor; }
.double-underline::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: currentColor; }
.double-underline--small { display: inline-block; position: relative; padding-bottom: 8px; }
.double-underline--small::before { content: ''; position: absolute; bottom: 3px; left: 0; width: 100%; height: 3px; background-color: currentColor; }
.double-underline--small::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: currentColor; }

@media screen and (max-width: 768px) {
    .vintage-main-title h2 { font-size: 1.6rem; } .vintage-details h3 { font-size: 1.4rem; }
    .footer-text { font-size: 1.5rem; } .module-vintage { margin: 30px 0; }
}
/* ==========================================================================
   GESTION DES BARRES DE DÉFILEMENT (PAGE + MENU)
   ========================================================================== */

/* 1. LA BARRE PRINCIPALE DE LA PAGE (VERTICALE - À DROITE) */
/* On cible 'html' et 'body' pour ne pas toucher aux autres éléments */
html::-webkit-scrollbar, body::-webkit-scrollbar {
    width: 12px; /* Largeur de la barre verticale */
}

html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
    background: #f0f0f0; 
}

html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
    background-color: #bc3c00; /* LE ROUGE BRIQUE */
    border-radius: 10px;
    border: 3px solid #f0f0f0; /* Espace blanc autour */
}

html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
    background-color: #9a3100;
}


/* 2. LA BARRE DU MENU ONGLETS (HORIZONTALE) - RESTAURATION DU STYLE */
/* On utilise !important pour être sûr que le rouge ne s'applique pas ici */
.scroll-menu::-webkit-scrollbar { 
    height: 14px !important; /* Hauteur de la barre horizontale */
    width: auto !important;
    background: transparent !important; 
}

.scroll-menu::-webkit-scrollbar-track { 
    background: linear-gradient(to bottom, transparent 6px, #dddddd 6px, #dddddd 8px, transparent 8px) !important; 
    margin: 0 20px !important; 
}

.scroll-menu::-webkit-scrollbar-thumb { 
    background-color: #333 !important; /* LE GRIS FONCÉ D'ORIGINE */
    border: 4px solid transparent !important; 
    border-radius: 20px !important; 
    background-clip: content-box !important; 
    cursor: pointer !important; 
    min-width: 30px !important; 
}

/* LE TAMPON PNG (POSITIONNEMENT & EFFET ENCRE) */
.no-tracker-badge {
    position: absolute !important; 
    right: 15px !important;        /* Collé à droite */
    top: 50% !important;           
    transform: translateY(-50%) rotate(-15deg) !important; /* Rotation tampon */
    
    width: 90px !important;        /* Taille de l'image (Ajustez selon votre PNG) */
    height: auto !important;
    
    pointer-events: none;          
    z-index: 50 !important;
}

/* L'IMAGE ELLE-MÊME (OMBRE & RÉALISME) */
.no-tracker-badge img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    
    /* 1. L'EFFET ENCRE (Incrustation dans le papier) */
    mix-blend-mode: multiply !important; 
    opacity: 0.9 !important; /* Légère transparence de l'encre */
    
    /* 2. LA GROSSE OMBRE TYPIQUE DU TAMPON */
    /* Une ombre grise, un peu floue, décalée vers le bas-droite */
    filter: drop-shadow(4px 4px 2px rgba(0,0,0,0.3)) !important;
}

/* MOBILE : On réduit la taille pour ne pas gêner */
@media screen and (max-width: 500px) {
    .no-tracker-badge {
        width: 60px !important; /* Plus petit sur mobile */
        right: 5px !important;
        transform: translateY(-50%) rotate(-10deg) !important;
    }
}


/* ==========================================================================
   CURSEURS HAUTE PRÉCISION (MODERNES & STABLES)
   ========================================================================== */

/* 1. LE FOND DE PAGE : L'ICÔNE "SOURIS D'ORDINATEUR" PHYSIQUE */
html, body {
    /* Design : Dessin d'une souris physique, Brique (#bc3c00), Contour Noir fin (0.5px) */
    /* Taille : 32px. Point de clic : en haut au centre (16 2) */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23bc3c00' stroke='%23000000' stroke-width='0.5' d='M12,2C8.13,2,5,5.13,5,9v6c0,3.87,3.13,7,7,7s7-3.13,7-7V9C19,5.13,15.87,2,12,2z M12,4c0.55,0,1,0.45,1,1v3 c0,0.55-0.45,1-1,1s-1-0.45-1-1V5C11,4.45,11.45,4,12,4z'/%3E%3C/svg%3E") 16 2, auto !important;
}

/* 2. LA MAIN (ZONES CLIQUABLES) : STABILISÉE */
/* J'ai ajouté le sélecteur universel '*' pour forcer la détection sur tous les enfants des liens */
a, a *, 
button, button *,
.clickable, .clickable *,
.social-item, .social-item *,
summary, summary *,
.like-button, .like-button *,
.btn-contact-prestige, 
.no-tracker-badge,
.no-tracker-badge img { 
    /* Main couleur chair/bleue - Taille 64px - Point de clic précis au bout du doigt (30 12) */
    cursor: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='64px' height='64px' viewBox='0 0 120 120'%3E%3Cg%3E%3Cpath fill='%233C5DFF' d='M55.5,19.4c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S59.9,19.4,55.5,19.4z M55.5,33.3c-3.3,0-6-2.7-6-6 c0-3.3,2.7-6,6-6c3.3,0,6,2.7,6,6C61.5,30.6,58.8,33.3,55.5,33.3z'/%3E%3Cpath fill='%233C5DFF' d='M55.5,14.3c-7.2,0-13.1,5.9-13.1,13.1s5.9,13.1,13.1,13.1s13.1-5.9,13.1-13.1S62.7,14.3,55.5,14.3z M55.5,38.4c-6.1,0-11.1-5-11.1-11.1s5-11.1,11.1-11.1c6.1,0,11.1,5,11.1,11.1S61.6,38.4,55.5,38.4z'/%3E%3C/g%3E%3Cpath fill='%233C5DFF' d='M90.8,90.1v15c0,0.4-0.3,0.6-0.6,0.6H48.7c-0.4,0-0.6-0.3-0.6-0.6v-15c0-1.7,1.4-3,3-3h36.7 C89.5,87.1,90.8,88.5,90.8,90.1z'/%3E%3Ccircle fill='%23FFFFFF' cx='85.2' cy='92.9' r='2.6'/%3E%3Cpath fill='%23F9E0B2' d='M55.9,24.1h-0.6c-2.4,0-4.4,1.6-4.6,3.6c0,0.1,0,20.3,0,20.4v5v10c0,0,0,0.1-0.1,0l-6.1-1.8 c-12.3-3.6-14.6,4.1-14.6,4.1c-0.8,1.9-0.9,4.1,0.6,4.7c1.1,0.5,3,1,4.5,1.4l7.5,2.3c3.8,1.1,7.5,3.1,8.2,7.2 c0.1,0.5,0.5,3.8,0.7,6H87c0.2-0.3,0.3-0.6,0.4-0.9c0.7-2.6,1.7-6.2,2-7.7c0.2-0.5,0.2-0.9,0.2-1.4v-7.9V53v-2.6 c0-2.1-1.7-4.1-4.1-4.3c-2.5-0.2-4.7,1.3-5,3.3c0,0.1-0.1,0.1-0.1,0v-1.4c0-2.3-2.1-4.1-4.7-4.1H75c-2.3,0-4.3,1.5-4.6,3.5 c0,0.1-0.1,0.1-0.1,0c-0.3-2-2.3-3.5-4.6-3.5h-0.7c-2.3,0-4.3,1.5-4.6,3.5c0,0.1-0.1,0.1-0.1,0c0,0,0-20,0-20 C60.2,25.6,58.2,24.1,55.9,24.1z'/%3E%3C/svg%3E") 30 12, pointer !important;
}


/* ==========================================================================
   TEXTURE PAPIER GLOBALE (PAR-DESSUS TOUT LE CONTENU)
   ========================================================================== */

body::after {
    content: "";
    position: fixed; /* Reste fixe même quand on scrolle */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Le fameux grain SVG (celui de votre ancien code qui marchait bien) */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjA1Jy8+PC9zdmc+");
    
    /* On laisse passer les clics au travers (TRES IMPORTANT) */
    pointer-events: none;
    
    /* On s'assure qu'il est au-dessus de tout le reste */
    z-index: 999999;
    
    /* Mode de fusion pour incruster le grain sans griser le blanc */
    /* 'multiply' assombrit un peu, 'mix-blend-mode: overlay' est plus subtil */
    opacity: 0.4; /* Ajustez l'intensité du grain ici (0.1 à 1.0) */
}
/* --- ANIMATION : HEADER & FOOTER SE CACHENT AU SCROLL --- */

/* 1. On prépare la transition fluide pour les deux */
header, footer {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. Le Bouton Menu reste TOUJOURS FIXE et VISIBLE */
.menu-controller {
    position: fixed !important; 
    z-index: 2000001 !important; 
    /* Pas de transform ici, il ne bouge pas */
}

/* 3. QUAND ON DESCEND (SCROLL DOWN) */

/* Le Header part vers le HAUT (-100%) */
body.scroll-down header {
    transform: translateY(-100%);
}

/* Le Footer part vers le BAS (+100%) */
body.scroll-down footer {
    transform: translateY(100%);
}