/* ==========================================================================
   MASTER CSS - 7ÈME RÉPUBLIQUE (VERSION RÉPARÉE INTEGRALE & COULEUR #bc3c00)
   ========================================================================== */

/* 1. POLICES & CONFIGURATION */
@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;
}
h1, h2, h3, summary {
    font-family: "Racing Sans One", sans-serif; 
    font-weight: 400; text-transform: uppercase; letter-spacing: 1px;
}

body {
    font-family: 'DIN', sans-serif; 
    font-size: 1.1rem; 
    line-height: 1.6; 
    color: #000;
    margin: 0; 
    
    /* C'EST ICI LE RÉGLAGE : On passe de 260px à 190px */
    padding-top: 190px !important; 
    
    min-height: 100vh;
    display: flex; flex-direction: column; 
    background-color: #ffffff; 
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjA1Jy8+PC9zdmc+");
    background-attachment: fixed; cursor: default;
}

/* ==========================================================================
   3. HEADER FIXE
   ========================================================================== */
header {
    position: fixed; top: 0; left: 0; width: 100%;
    background-color: rgba(255,255,255,0.95);
    
    /* ZÉRO BORDURE ICI */
    border-bottom: none !important; 
    
    padding-top: 20px; z-index: 50;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

    transition: transform 0.4s ease; /* On s'assure que l'animation est fluide */
}

header.header-hidden {
    transform: translateY(-100%); /* Il remonte de sa propre hauteur */
    box-shadow: none; /* On retire l'ombre pour qu'elle ne traîne pas */
}


/* 2. Le Bouton Menu s'efface aussi (pour ne pas gêner la lecture) */
.menu-controller {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-controller.header-hidden {
    opacity: 0;            /* Il devient transparent */
    pointer-events: none;  /* On ne peut plus cliquer dessus par erreur */
    transform: translateY(-20px); /* Petit effet de remontée */
}

.header-content {
    display: flex; justify-content: center; align-items: center;       
    width: 100%; position: relative; min-height: 80px; padding: 0 20px;
}

.titres { text-align: center; z-index: 1; }
.titres h1 { font-size: 2.5rem; margin: 0; color: #333; line-height: 1; text-shadow: 0 15px 25px rgba(0,0,0,0.4); transition: all 0.5s ease; }
.titres h1:hover { transform: translateY(-5px); text-shadow: 0 25px 35px rgba(0,0,0,0.3); }
.titres p { font-family: 'DIN', sans-serif; font-weight: 300; margin: 5px 0 0 0; color: #666; font-size: 1rem; }

.logo { position: absolute; right: 50px; top: 50%; transform: translateY(-50%); height: 98px; width: auto; display: block; z-index: 10; }
.logo img { height: 100%; width: auto; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.4)); display: block; transition: all 0.5s ease; }
.logo:hover img { transform: translateY(-5px); filter: drop-shadow(0 25px 35px rgba(0,0,0,0.3)); }

/* ==========================================================================
   4. MENU BURGER & SCROLL
   ========================================================================== */
.menu-controller {
    position: fixed; top: 30px; left: 30px; z-index: 100000;
    display: flex; align-items: center; gap: 15px;
    cursor: pointer; user-select: none; transition: opacity 0.3s;
}

.icon-wrapper { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; }
.navicon { position: relative; width: 30px; height: 3px; background-color: #000; transition: all 0.3s ease; }
.navicon::before, .navicon::after { content: ''; position: absolute; width: 30px; height: 3px; background-color: #000; transition: all 0.3s ease; }
.navicon::before { top: -8px; }
.navicon::after { top: 8px; }

.menu-controller.open .navicon { background-color: transparent; }
.menu-controller.open .navicon::before { top: 0; transform: rotate(45deg); background-color: #bc3c00; }
.menu-controller.open .navicon::after { top: 0; transform: rotate(-45deg); background-color: #bc3c00; }

.menu-label { font-family: 'DIN', monospace; font-weight: 700; font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; color: #000; transition: color 0.3s ease; }
.menu-controller.open .menu-label { color: #bc3c00; }

.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; }
/* 2. STYLE DE LA PHRASE (Désormais un vrai élément) */
.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;
    
    /* Espacement autour de la phrase */
    padding: 0 30px; 
    border-left: 1px solid #ccc; 
    margin: 0 10px;
    height: 20px; /* Pour centrer le trait vertical */
    line-height: 20px;
}

/* 3. STYLE DE L'ONGLET JOKER (Noir pour rappeler le menu de gauche) */
.tab-joker {
    background-color: #000 !important; /* Fond Noir */
    color: #fff !important;           /* Texte Blanc */
    border: 1px solid #000 !important;
    margin-left: 10px;                /* Un peu d'espace après la phrase */
    
    /* On force l'alignement */
    opacity: 1 !important; 
}

.tab-joker:hover {
    background-color: #bc3c00 !important; /* Rouge au survol */
    border-color: #bc3c00 !important;
    transform: translateY(-3px);
}
/* ==========================================================================
   5. CONTENEUR PRINCIPAL & INTRODUCTION
   ========================================================================== */
main { width: 100%; max-width: 100%; padding: 0 20px; margin: 0 auto; margin-top: 0 !important; padding-top: 0 !important; }



/* ==========================================================================
   6. ACCORDÉON (ARTICLES)
   ========================================================================== */
details { display: block; margin-bottom: 25px; background: #fff; border: 1px solid #ddd; border-radius: 4px; overflow: visible; }
summary { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; position: relative; border-bottom: 2px solid #000; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::after { content: none !important; }

/* LA BOITE GLOBALE DU TITRE */
.summary-layout {
    display: grid !important;
    grid-template-columns: 1fr auto !important; 
    align-items: center !important; 
    width: 100% !important;
    
    /* C'EST ICI : On passe de 10px à 4px pour réduire la hauteur */
    padding: 4px 0 4px 10px !important; 
    min-height: 35px; /* Force une barre fine */
    
    box-sizing: border-box;
}
/* =========================================
   STYLE DE LECTURE (VARELA ROUND)
   Uniquement pour le texte dans les accordéons
   ========================================= */
.content, 
.content p, 
.content ul, 
.content li {
    font-family: "Varela Round", sans-serif !important;
    font-size: 1.05rem; 
    line-height: 1.7; 
    color: #222; 
}

/* On garde la lettrine (la grosse lettre du début) en Racing Sans One */
.content > p:first-of-type::first-letter {
    font-family: 'Racing Sans One', cursive !important;
}
/* LA COLONNE DES BOUTONS */
.outils-verticaux {
    grid-column: 2;
    display: flex; 
    flex-direction: column; 
    
    /* ICI : ON GARDE L'ESPACE ENTRE LES ICONES */
    gap: 10px !important; 
    
    align-items: flex-end;
    
    /* ICI : ON COLLE LE TOUT AU BAS DE LA BOITE */
    margin-bottom: 0 !important; 
    padding-bottom: 0 !important;
}
.titre-article h3 {
    margin: 0 !important; /* Zéro marge partout */
    font-family: 'Racing Sans One', cursive;
    font-size: 1.2rem; 
    line-height: 1;
    
    /* SUPPRESSION DU MARGIN-TOP QUI FAISAIT DESCENDRE LE TITRE */
    margin-top: 0 !important; 
}
.titre-article { grid-column: 1; }


/* =========================================
   STYLE DES BOUTONS OUTILS (ENCADRÉS)
   ========================================= */
/* 2. ON RESSERRE LES BOUTONS EUX-MÊMES (Les Boites) */
.tool-btn {
    /* Le cadre à petits points (inchangé) */
    border: 1px dotted #999 !important; 
    border-radius: 3px; 
    
    background: none !important;
    
    /* C'EST ICI : On réduit la hauteur interne (padding) */
    /* 3px en haut/bas (au lieu de 6px), 8px sur les côtés */
    padding: 3px 8px !important; 
    
    /* On enlève la marge externe car c'est le "gap" du dessus qui gère l'espace */
    margin: 0 !important; 
    
    width: 100%; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

/* Ajustement fin du texte pour qu'il soit bien centré dans ce format plus petit */
.tool-btn .label {
    font-family: "Varela Round", sans-serif; 
    font-weight: 400; 
    font-size: 0.65rem; /* Un poil plus petit */
    color: #2b2b2b; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    line-height: 1;
}

/* Ajustement de l'icône */
.tool-btn .icon-red {
    width: 12px; /* Un poil plus petite */
    height: 12px; 
    fill: #bc3c00;
}

/* SURVOL */
.tool-btn:hover {
    border-color: #bc3c00 !important;
    background-color: rgba(188, 60, 0, 0.05) !important;
}
.tool-btn:hover .label { color: #bc3c00; }

.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; }
.read-indicator .arrow { font-size: 0.7rem; transition: transform 0.3s ease; }
summary:hover .read-indicator { background-color: #000; color: #fff; border-color: #000; }
details[open] .read-indicator { background-color: #bc3c00; border-color: #bc3c00; color: #fff; display: none !important; }
details[open] .read-indicator .arrow { transform: rotate(180deg); }

/* CONTENU ARTICLE */
.content { padding: 30px; text-align: justify; border-top: 1px solid #eee; }
.content > p:first-of-type::first-letter { float: left; font-size: 3.5rem; line-height: 0.8; padding: 4px 10px 0 3px; color: #bc3c00; font-family: 'Racing Sans One', cursive; text-transform: uppercase; }
.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 { color: #999; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; }
.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:hover { border-color: #000; background-color: #fafafa; }
.like-icon svg { fill: none; stroke: #000; stroke-width: 2px; display: block; }
.like-count { font-size: 1rem; font-weight: 700; color: #000; }
.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); }
.like-button.liked .like-count { color: #bc3c00; }
/* MODULE D'INTRODUCTION (CENTRÉ) */
.module-introduction {
    padding-left: 60px !important; 
    padding-right: 20px !important;

    /* C'EST ICI : On enlève la marge du haut pour qu'il remonte */
    margin-top: 0 !important; 
    margin-bottom: 20px !important;
    margin-left: auto;
    margin-right: auto;

    width: 100%; max-width: 900px;
    box-sizing: border-box; text-align: center !important;
}
.module-introduction h2 {
    font-family: 'DIN', sans-serif; font-weight: 700; text-transform: uppercase; 
    font-size: 1.5rem !important; line-height: 1.2 !important; color: #000; 
    margin-top: 20 !important; margin-bottom: 10px !important;
}

.module-introduction p {
    font-family: 'DIN', sans-serif; font-size: 1rem !important; 
    color: #666; line-height: 1.5 !important; white-space: normal !important;
    margin: 0 !important;
}

/* Le trait rouge se centre automatiquement avec margin: auto */
.trait-separation { 
    width: 40px; height: 3px; background-color: #bc3c00; 
    margin: 15px auto !important; 
}

/* MODULES DIVERS */
.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 { 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; }
/* =========================================
   1. VARELA ROUND SUR LES ZONES INTERMÉDIAIRES
   ========================================= */
.module-rupture blockquote,
.module-focus .texte-focus,
.module-focus .label-focus,
.module-focus .chiffre-focus { 
    /* On force la rondeur partout sauf le chiffre si vous voulez */
    font-family: "Varela Round", sans-serif !important; 
}
/* Si vous voulez garder le gros chiffre en "Racing", supprimez la ligne .chiffre-focus au dessus */

/* ==========================================================================
   7. FOOTER COMPACT & HORIZONTAL
   ========================================================================== */
footer {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 40;
    background-color: #1b1b1b; color: #ffffff !important; border-top: 2 px solid #070707; 
    padding: 10px 15px; text-align: center; font-family: 'DIN', sans-serif; 
    transition: transform 0.4s ease; 
    
}
footer a { color: #fff; text-decoration: none; font-weight: 700; }
footer.footer-hidden { transform: translateY(100%); }
.footer-cta { margin: 0 0 10px 0; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; color: #aaa; }
.footer-copyright { margin: 10px 0 0 0; font-size: 0.75rem; color: #ffffff; }

.social-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; margin: 5px auto; }
.social-item { display: flex; align-items: center; gap: 8px; text-decoration: none; transition: transform 0.2s ease; }
.social-item:hover { transform: scale(1.05); }
.social-label { font-family: 'DIN', sans-serif; font-size: 0.8rem; text-transform: uppercase; color: #bbb; letter-spacing: 0.5px; white-space: nowrap; transition: color 0.2s; }
.social-item:hover .social-label { color: #fff; }
.social-icon { display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.social-icon svg { width: 16px; height: 16px; fill: #fff; }

/* --- COULEURS PERMANENTES --- */

/* LinkedIn (Bleu) */
.btn-linkedin .social-icon { background-color: #0077b5; }

/* Instagram (Dégradé) */
.btn-insta .social-icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

/* BlueSky (Bleu ciel) */
.btn-bluesky .social-icon { background-color: #0560ff; }

/* Email (Rouge thème) */
.btn-email .social-icon { background-color: #bc3c00; }


/* --- CORRECTION TIKTOK & X --- */
/* Pour qu'ils "claquent" sur le noir, on les met en BLANC avec icône NOIRE */

.btn-tiktok .social-icon, 
.btn-x .social-icon { 
    background-color: #ffffff !important; /* Fond Blanc */
    border: none !important; 
}

/* Changement de couleur du SVG interne pour ces deux-là uniquement */
.btn-tiktok .social-icon svg, 
.btn-x .social-icon svg { 
    fill: #000000 !important; /* Icône Noire */
}

/* INFOBULLES : Juste pour le logo */
.logo::after, .menu-toggle::after {
    content: attr(title); 
    background-color: #fff9c4 !important; color: #000 !important; border: 1px solid #e6e0a8 !important;
    font-family: 'DIN', sans-serif; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; 
    white-space: nowrap; padding: 6px 12px; border-radius: 4px;
    position: absolute; z-index: 999999; pointer-events: none; opacity: 0; visibility: hidden;
    transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.logo::after { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; }
.logo:hover::after { opacity: 1; visibility: visible; }

/* MOBILE */
@media (max-width: 768px) {
    .social-label { display: none; }
    .social-container { gap: 10px; }
    .footer-cta, .footer-copyright { font-size: 0.65rem; }
}

/* ==========================================================================
   8. MENU FULLSCREEN (C'EST LA PARTIE QUI VOUS MANQUAIT !)
   ========================================================================== */
.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: #fafafa;
    z-index: 99999 !important; /* Devant tout sauf le bouton menu */
    
    /* CACHÉ PAR DÉFAUT */
    transform: translateY(-100%); 
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    
    display: flex; justify-content: center; align-items: center; 
    overflow-y: auto;
}



/* QUAND LE MENU EST OUVERT (VIA JS) */
/* --- 1. OUVERTURE DU MENU --- */
.menu-overlay.open {
    transform: translateY(0%);
}

/* --- 2. GRILLE PRINCIPALE --- */
.menu-grid { 
    display: grid; 
    grid-template-columns: 40% 60%; 
    height: 100vh; 
    width: 100%; 
    max-width: 1400px; 
    margin: 0 auto; 
    box-sizing: border-box; 
}

/* =========================================
   COLONNE GAUCHE (NOIRE & ALIGNÉE)
   ========================================= */


/* 2. On pousse le BLOC de liens vers le bas (La cale invisible) */
.col-sommaire .nav-principale {
   
   
    display: block;
    position: relative;
    
    /* Structure inchangée */
    background-color: #1a1a1a; 
    border: 1px solid #333;
    border-bottom: none; 
    border-radius: 15px 15px 0 0; 
    border-left: 6px solid #fff; 
    padding-top: 20px !important; /* Juste un petit espace standard */
    justify-content: flex-start !important;
    
    /* C'EST ICI : TAILLE DIVISÉE PAR 2 */
    font-family: 'DIN', sans-serif;
    font-weight: 700;
    font-size: 1.1rem; /* Police réduite (était 1.4rem) */
    padding: 10px 15px; /* Marges réduites (était 20px 25px) */
    margin-bottom: -5px; /* Chevauchement resserré (était -15px) */
     margin-top: 180px !important; /* La liste descend de 180px pour libérer la croix */

    color: #fff !important;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.5); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. LE CONTENEUR DES LIENS */
.col-sommaire .nav-principale {
    display: flex;
    flex-direction: column;
    padding-left: 10px; 
    margin-top: 20px;
    
    /* C'EST ICI : On démarre le compteur à 0 */
    counter-reset: index-dossier; 
}

/* 3. LES FICHES (DESIGN DOSSIER COINS RONDS) */
.col-sommaire .nav-principale a {
    display: block;
    position: relative;
    
    /* Forme Dossier */
    background-color: #1a1a1a; 
    border: 1px solid #333;
    border-bottom: none; 
    border-radius: 15px 15px 0 0; /* Coins ronds en haut uniquement */
    border-left: 6px solid #fff; 
    
    /* Typographie */
    font-family: 'DIN', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff !important;
    text-decoration: none;
    text-transform: uppercase;
    
    /* Empilement */
    padding: 20px 25px;
    margin-bottom: -15px; /* Chevauchement */
    box-shadow: 0 -4px 10px rgba(0,0,0,0.5); 
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* LE NUMÉRO "TAMPON" SUR LA FICHE */
.col-sommaire .nav-principale a::before {
    /* 1. CALCUL AUTOMATIQUE */
    counter-increment: index-dossier;                 /* +1 à chaque lien */
    content: "N°" counter(index-dossier, decimal-leading-zero); /* Affiche "N°01" */
    
    /* 2. POSITIONNEMENT (Haut Droite) */
    position: absolute;
    top: 12px;
    right: 20px;
    
    /* 3. DESIGN TECHNIQUE */
    font-family: 'Share Tech Mono', 'DIN', monospace; /* Police un peu "code" */
    font-size: 0.75rem;
    color: #444; /* Gris discret (presque fondu dans le fond foncé) */
    font-weight: 400;
    letter-spacing: 2px;
    
    transition: color 0.3s;
}

/* AU SURVOL : Le numéro s'allume aussi */
.col-sommaire .nav-principale a:hover::before {
    color: #bc3c00; /* Devient rouge */
}
/* SURVOL */
.col-sommaire .nav-principale a:hover {
    transform: translateY(-10px); 
    background-color: #222;
    border-left-color: #bc3c00;
    z-index: 10;
    box-shadow: 0 -10px 20px rgba(0,0,0,0.8);
}

/* EXCEPTION : Le dernier élément (fermé en bas) */
.col-sommaire .nav-principale a:last-child {
    border-bottom: 1px solid #333;
    margin-bottom: 40px;
    border-radius: 15px 15px 4px 4px;
}

/* EXCEPTION : Le lien rouge (Kit) */
.col-sommaire .nav-principale a.lien-rouge {
    border-left-color: #bc3c00;
    color: #bc3c00 !important;
}

/* Ajustement du texte de contact */
.bloc-contact p {
    color: #aaaaaa; /* Un blanc cassé pour le texte secondaire */
}
/* --- 4. COLONNE DROITE (ARCHIVES / TIMELINE) --- */
.col-archives { 
    padding: 100px 50px; 
    height: 100vh; 
    overflow-y: auto; 
    background-color: #fafafa; 
    
    /* AJOUT TIMELINE : Position relative pour tracer la ligne */
    position: relative; 
}

/* LA LIGNE VERTICALE CONTINUE */
.col-archives::before {
    content: '';
    position: absolute;
    top: 150px; /* Commence sous le titre/icone */
    bottom: 0;
    left: 49px; /* Alignement précis avec le padding */
    width: 1px;
    background-color: #ddd;
    z-index: 0;
}


/* --- 5. TITRES ET LIENS --- */
.titre-section { 
    font-family: 'DIN', sans-serif; 
    font-size: 0.85rem; 
    color: #999; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    border-bottom: 2px solid #000; 
    padding-bottom: 10px; 
    margin-bottom: 30px; 
}

.nav-principale a { 
    display: block; 
    font-family: 'DIN', sans-serif; 
    font-weight: 700; 
    font-size: 1.6rem; 
    color: #000; 
    text-decoration: none; 
    line-height: 1.8; 
    transition: color 0.2s; 
}
.nav-principale a:hover { color: #bc3c00; }
.lien-rouge { color: #bc3c00 !important; margin-top: 10px; }


/* --- 6. NOUVEAU STYLE DES ITEMS (AVEC POINTS) --- */
.item-archive { 
    margin-bottom: 50px; 
    
    /* CHANGEMENT : On remplace la bordure par le point */
    border-left: none; 
    margin-left: 20px; /* On décale le bloc pour laisser place au point */
    padding-left: 20px;
    position: relative; /* Pour placer le point */
}

/* LE POINT (Rond vide rouge) */
.item-archive::after {
    content: '';
    position: absolute;
    left: -25px; /* On le place sur la ligne grise */
    top: 6px;
    
    width: 9px;
    height: 9px;
    background-color: #fafafa; /* Même couleur que le fond */
    border: 2px solid #bc3c00;
    border-radius: 50%;
    z-index: 2;
    transition: background-color 0.3s;
}
/* POINT PLEIN AU SURVOL */
.item-archive:hover::after {
    background-color: #bc3c00;
}


/* TYPOGRAPHIE CONTENU */
.item-archive h4 { 
    margin: 0 0 10px 0; 
    font-size: 1.3rem; 
    font-family: 'DIN', sans-serif; 
}
.item-archive img { 
    width: 100%; 
    max-width: 400px; 
    height: auto; 
    display: block; 
    margin-bottom: 15px; 
    filter: grayscale(100%); 
    border: 1px solid #ddd; 
}
.item-archive .date {
    display: block; 
    font-family: 'DIN', monospace; 
    font-weight: 700; 
    font-size: 0.8rem; 
    color: #000; 
    margin-bottom: 5px;
}


/* --- 7. LES ICONES EN TÊTE --- */


.menu-icon-header {
    margin-bottom: 25px; /* Espace unifié avant le titre */
    color: #bc3c00;
    /* On s'assure que l'icône de gauche est bien rouge aussi, même sur fond noir */
}

@media (max-width: 900px) {
    .menu-grid { grid-template-columns: 1fr; display: block; }
    .col-sommaire { height: auto; padding: 100px 20px 40px 20px; border-right: none; border-bottom: 1px solid #ddd; }
    .col-archives { height: auto; padding: 40px 20px; overflow: visible; }
    .header-content { flex-direction: column; padding-top: 60px; }
    .logo { position: static; transform: none; margin: 10px auto; }
}
@media screen and (max-width: 768px) {
    /* Réduit la police des gros titres dans le menu */
    .elementor-location-popup h1,
    .elementor-location-popup h2,
    .elementor-location-popup .elementor-heading-title {
        font-size: 18px !important; 
    }
    
    /* Réduit les marges entre les blocs du menu */
    .elementor-location-popup .elementor-widget-container {
        padding: 10px !important;
        margin-bottom: 5px !important;
    }
}
/* ==============================================
   GLOBAL : NETTOYAGE & OPTIMISATION PC/MOBILE
============================================== */

/* 1. SUPPRESSION DES CROIX PARASITES (INCHANGÉ) */
.dialog-close-button, 
.elementor-popup-modal .dialog-close-button,
.mfp-close, 
button.close-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 2. RÉDUCTION DES MARGES SUR PC ET MOBILE */
/* Cible les sections et colonnes principales d'Elementor */
.elementor-section, 
.elementor-column, 
.elementor-widget-wrap,
.elementor-element {
    /* Réduit drastiquement les marges internes et externes */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
/* Cas spécifique pour votre popup qui semble avoir de grosses marges */
.elementor-location-popup .elementor-section-wrap {
    padding: 15px !important; /* Marges globales du popup réduites */
}


    

/* =========================================
   VERSION MOBILE (TÉLÉPHONE UNIQUEMENT)
   ========================================= */
@media screen and (max-width: 768px) {

    /* --- 1. HEADER & LOGO --- */
    header {
        padding: 5px 2% !important;
        min-height: 40px !important; /* Force la réduction hauteur */
    }
    .logo {
        height: 50px !important; /* Logo réduit par 2 (était ~60px) */
        width: auto !important;
    }
    header h1 {
        font-size: 0.9rem !important; /* Titre site tout petit */
        line-height: 1 !important;
        margin-left: 5px !important;
    }

    
    
    /* 3. RÉDUCTION DU MENU HAMBURGER ET DU TEXTE "MENU" */
    /* L'icône (les trois barres) */
    .elementor-menu-toggle .eicon-menu-bar {
        font-size: 20px !important; /* Taille d'icône standard */
    }
    /* Le mot "Menu" si présent */
    .elementor-menu-toggle .elementor-screen-only,
    .elementor-menu-toggle__label {
         font-size: 14px !important; /* Texte discret */
         text-transform: uppercase; /* Style plus net */
    }
    /* Réduit la taille globale du bouton déclencheur */
    .elementor-menu-toggle {
        margin: 5px !important; /* Moins d'espace autour du bouton */
    }

    /* 4. RÉDUCTION DES TITRES D'ONGLETS ET DU CONTENU */
    /* Titres des menus (ex: "Les articles de...", "Mes services") */
    .elementor-heading-title {
        font-size: 16px !important; /* Taille beaucoup plus petite */
        line-height: 1.1 !important;
        margin-bottom: 8px !important;
    }
    /* Liens du menu */
    .menu-item a {
        font-size: 14px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* 5. COMPACTION MAXIMALE DES BLOCS GRIS */
    /* Cible les conteneurs internes pour enlever le "gras" */
    .elementor-widget-wrap,
    .elementor-widget-container {
        padding: 8px !important; /* Marges internes minimales */
    }
    /* Réduit l'espace entre les widgets empilés */
    .elementor-widget:not(:last-child) {
        margin-bottom: 10px !important;
    }
}


    /* --- 2. BOUTON MENU (Compromis : Petit bouton, Icône lisible) --- */
    #menu-toggle {
        padding: 4px 8px !important; /* Marges divisées par 2 */
        gap: 6px !important;
    }
    #menu-toggle .label {
        font-size: 0.7rem !important; /* Mot "MENU" petit */
        text-transform: uppercase;
    }
    #menu-toggle .icon-menu {
        width: 22px !important; /* Icône : +30% par rapport au texte */
        height: 22px !important;
    }

    /* --- 3. CONTENU (Largeur max) --- */
    .content {
        padding-left: 3% !important;  /* Collé au bord (3%) */
        padding-right: 3% !important;
    }

    /* --- 4. ACCORDÉONS (Barres noires réduites) --- */
    summary {
        padding: 8px 10px !important; /* Hauteur divisée par 2 */
        min-height: auto !important;
        margin-bottom: 2px !important;
    }
    summary h3 {
        font-size: 0.95rem !important; /* Titre onglet réduit */
        margin: 0 !important;
    }
    /* La flèche à droite */
    summary::after {
        font-size: 1rem !important;
        right: 10px !important;
    }

    /* --- 5. MENU OVERLAY (L'intérieur du menu) --- */
    #menu-overlay {
        padding-top: 40px !important; /* Remonté vers le haut */
    }
    /* Suppression du titre "Sommaire Général" */
    #menu-overlay h2 {
        display: none !important;
    }
    
    .menu-content {
        width: 94% !important; /* Très large */
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Les liens (Onglets du menu) */
    .menu-item {
        padding: 6px 10px !important; /* Hauteur divisée par 2 */
        margin-bottom: 4px !important; /* Espace entre onglets réduit */
        font-size: 1rem !important;   /* Police réduite */
        border-radius: 4px !important; /* Coins moins ronds */
    }

    /* --- 6. SUPPRESSION TOTALE DU BUG "CROIX NOIRE" --- */
    /* C'est souvent une puce de liste par défaut qui traîne */
    #menu-overlay ul, 
    #menu-overlay ol,
    #menu-overlay li {
        list-style: none !important; /* Enlève les puces/points/carrés */
        list-style-type: none !important;
        background-image: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    /* Sécurité anti-pseudo-éléments (les croix fantômes) */
    #menu-overlay li::before,
    #menu-overlay li::after {
        content: none !important;
        display: none !important;
    }