/**
 * manifeste-overrides.css (mocss) — v B9
 * ========================================
 * Fichier CSS externe PRIORITAIRE sur les styles internes de index.html
 * À charger APRÈS le <style> interne dans le HTML
 * 
 * Usage dans le HTML (juste avant </head>) :
 * <link rel="stylesheet" href="css/manifeste-overrides.css">
 * 
 * DÉPENDANCE : badge-manager.js qui ajoute .with-counter ou .no-counter sur <body>
 */


/* ============================================================
   1. VARIABLES DE SPACING — PANNEAU DE CONTRÔLE
   ============================================================
   
   SCHÉMA DU HEADER (desktop ≥768px, menu visible) :
   
   ┌──────────────────────────────────────────[⬇ Télécharger]──┐  ← top:0
   │ [Logo]  A  [Lire…]  B  [Signer…]  C  [Voir…]  D  | E  │  ← centrée V
   └──────────────────────────────────────────────────────────────┘
   
   RÈGLES :
   ┌─────────────────────────────────────────────────┐
   │  A min/max  =  D min/max    (symétrie externe)  │
   │  B min/max  =  C min/max    (symétrie interne)  │
   │  E = décalage droit (recentrage manuel)          │
   └─────────────────────────────────────────────────┘
   
   COMMENT CONFIGURER :
   ─────────────────────
   • Pour ACTIVER une contrainte  → écrire la valeur
   • Pour DÉSACTIVER (= libre)   → commenter la ligne
   
   Quand une valeur est absente/commentée, le fallback s'applique :
   • min absent → 0px       (espace peut se réduire librement)
   • max absent → 9999px    (espace peut croître librement)
   
   Le "preferred" (valeur médiane du clamp) utilise des unités vw
   pour un scaling fluide et continu entre les breakpoints.
   
   MÉCANISME INTERNE :
   ────────────────────
   • nav-links = flex:1 0%, remplit tout l'espace après le logo
   • justify-content: center → liens groupés au centre
   • gap = clamp(inner-min, preferred, inner-max) = B = C exactement
   • padding-left/right = base de A/D (plancher minimum)
   • Espace excédentaire → réparti 50/50 → A = D toujours garanti
   • A visuel = padding + excédent/2 (grandit sur grand écran)
   
   Le bouton "Télécharger" est en position: absolute + top:0,
   visuellement AU-DESSUS de la ligne du menu. Il n'interfère
   pas avec le layout horizontal des liens.
   
   EXEMPLES DE CONFIGURATION :
   ────────────────────────────
   Cas 1 — Tout contraint :
     --nav-outer-min: 30px;
     --nav-outer-max: 100px;
     --nav-inner-min: 20px;
     --nav-inner-max: 80px;
   
   Cas 2 — Seul l'extérieur est contraint (B/C libres) :
     --nav-outer-min: 30px;
     --nav-outer-max: 100px;
     (inner-min et inner-max commentés → B/C s'adaptent)
   
   Cas 3 — Tout libre (auto) :
     (tout commenté → spacing 100% fluide)
   ============================================================ */

:root {
    /* ─── Espace EXTÉRIEUR : A (logo↔1er lien) = D (dernier lien↔bord droit) ─── */
    /*--nav-outer-min: 20px;           /* Minimum garanti */
    /*--nav-outer-max: 120px;          /* Maximum autorisé */
    /*--nav-outer-preferred: 4vw;      /* Scaling fluide entre min et max */
    
    /* ─── Espace INTÉRIEUR : B (lien↔lien) = C (lien↔lien) ─── */
    --nav-inner-min: 10px;           /* Minimum absolu entre chaque lien */
    --nav-inner-max: 300px;     /* DÉSACTIVÉ → B/C grandissent avec le vw preferred */
    --nav-inner-preferred: 8vw;      /* Valeur fluide : B = C = exactement clamp(min,5vw,max) */
    
    /* ─── E : Décalage droit pour recentrer manuellement le menu ─── */
    /* Ajoute du padding-right supplémentaire → décale les liens vers la gauche */
    /* 0px = centrage symétrique naturel, 100px = décalé de 100px vers la gauche */
    --nav-offset-right: 110px;
}


/* ============================================================
   2. HEADER - Structure FLEXBOX
   ============================================================ */

.header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 100% !important;
}


/* ============================================================
   3. LOGO FÉDÉSAP
   ============================================================ */

.logo-area {
    position: relative !important;
    flex-shrink: 0 !important;
    margin-left: -25px !important;
    padding-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

.logo-area img {
    width: auto !important;
    display: block !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain !important;
}


/* ============================================================
   4. NAVIGATION — Spacing A / B / C / D / E
   ============================================================
   
   Le bouton "Télécharger" est en position:absolute + top:0,
   visuellement AU-DESSUS du menu → pas d'interférence.
   
   nav-links prend flex:1 et remplit tout l'espace après le logo.
   justify-content: center → les liens sont groupés au centre.
   
   • padding-left = base de A (clamp outer)
   • padding-right = base de D (clamp outer) + E (offset manuel)
   • gap = clamp(inner-min, preferred, inner-max) = B = C exact
   • L'espace excédentaire se répartit 50/50 → A ≈ D (+ E)
   
   E > 0 → le bloc de liens se décale vers la gauche
   
   ┌──────────────────────────────────────────────────────────┐
   │ [Logo]  A  [Lire]  B  [Signer]  C  [Voir]  D  │  E  │  │
   │       pad-L+exc    gap exact   gap exact    pad-R+E+exc  │
   └──────────────────────────────────────────────────────────┘
   ============================================================ */

.nav-links {
    position: relative !important;
    flex: 1 1 0% !important;
    width: auto !important;              /* Override le calc(60vw - ...) du HTML inline */
    min-width: 0 !important;             /* Sécurité flex : permet le shrink si besoin */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    
    /* ─── A : espace extérieur gauche ─── */
    padding-left: clamp(
        var(--nav-outer-min, 0px),
        var(--nav-outer-preferred, 4vw),
        var(--nav-outer-max, 9999px)
    ) !important;
    
    /* ─── D + E : espace extérieur droit + décalage manuel ─── */
    padding-right: calc(
        clamp(
            var(--nav-outer-min, 0px),
            var(--nav-outer-preferred, 4vw),
            var(--nav-outer-max, 9999px)
        )
        + var(--nav-offset-right, 0px)
    ) !important;
    
    /* ─── B = C : espace exact entre les liens (contrôlé par clamp) ─── */
    gap: clamp(
        var(--nav-inner-min, 0px),
        var(--nav-inner-preferred, 5vw),
        var(--nav-inner-max, 9999px)
    ) !important;
    
    /* Reset */
    margin-left: 0 !important;
    margin-right: 0 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

.nav-links a {
    font-size: 14px !important;
    white-space: nowrap;
    text-decoration: none;
}


/* ============================================================
   5. HAMBURGER
   ============================================================ */

.hamburger {
    position: relative !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    margin-right: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
}


/* ============================================================
   6. BREAKPOINTS - MOBILE < 768px
   ============================================================
   Menu masqué → variables A/B/C/D sans effet (hamburger)
   ============================================================ */

@media (max-width: 767px) {
    .header-content {
        justify-content: space-between !important;
    }
    
    .logo-area {
        margin-left: -15px !important;
        left: auto !important;
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
    }
    
    .logo-area img {
        min-height: 90px !important;
        width: auto !important;
        max-width: none !important;
    }
    
    .nav-links {
        display: none !important;
    }
    
    .hamburger {
        display: flex !important;
        flex-shrink: 0 !important;
    }
}


/* ============================================================
   6b. TABLET 768-899px - LOGO À GAUCHE
   ============================================================ */

@media (min-width: 768px) and (max-width: 899px) {
    .logo-area {
        left: auto !important;
        margin-left: -15px !important;
    }
}


/* ============================================================
   6c. PETIT DESKTOP 900-1099px - LOGO À GAUCHE
   ============================================================ */

@media (min-width: 900px) and (max-width: 1099px) {
    .logo-area {
        left: auto !important;
        margin-left: -15px !important;
    }
}


/* ============================================================
   7. TABLETTE & DESKTOP ≥ 768px
   ============================================================ */

@media (min-width: 768px) {
    .nav-links {
        display: flex !important;
    }
    
    .hamburger {
        display: none !important;
    }
    
    .mobile-menu {
        display: none !important;
    }
}


/* ============================================================
   8. AJUSTEMENTS PAR BREAKPOINT
   ============================================================
   Seule la taille de POLICE varie par breakpoint.
   Le spacing A/B/C/D scale automatiquement via les unités vw
   dans le clamp() de la section 4.
   ============================================================ */

/* Tablet / petit desktop 768-1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .nav-links a {
        font-size: 13px !important;
    }
}

/* Desktop 1025-1199px */
@media (min-width: 1025px) and (max-width: 1199px) {
    .nav-links a {
        font-size: 13px !important;
    }
}

/* Desktop large 1200-1399px */
@media (min-width: 1200px) and (max-width: 1399px) {
    .nav-links a {
        font-size: 14px !important;
    }
}

/* Grand écran ≥1400px */
@media (min-width: 1400px) {
    .nav-links a {
        font-size: 15px !important;
    }
}


/* ============================================================
   9. MODE AVEC BADGE (.with-counter)
   ============================================================ */

@media (min-width: 768px) and (max-width: 1099px) {
    body.with-counter .nav-links {
        display: none !important;
    }
    
    body.with-counter .hamburger {
        display: flex !important;
    }
}

@media (min-width: 1100px) {
    body.with-counter .nav-links {
        display: flex !important;
    }
    
    body.with-counter .hamburger {
        display: none !important;
    }
    
    body.with-counter .mobile-menu {
        display: none !important;
    }
}


/* ============================================================
   10-16. SECTIONS RÉSERVÉES
   ============================================================ */
/*
.signature-counter { }
.hero { }
.main-content { }
.engagements-grid { }
.signature-section { }
.signataires-section { }
.modal-overlay { }
.footer { }
*/


/* ============================================================
   17. BOUTON TÉLÉCHARGER LE MANIFESTE
   ============================================================ */

@media (max-width: 767px) {
    .btn-download-header {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 899px) {
    .btn-download-header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        right: 40px !important;
        font-size: 12px !important;
        padding: 5px 14px !important;
        z-index: 100 !important;
    }
    .btn-download-header .text-full {
        display: inline !important;
    }
    .btn-download-header .text-lite {
        display: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1099px) {
    .btn-download-header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        right: 40px !important;
        font-size: 12px !important;
        padding: 6px 16px !important;
        z-index: 100 !important;
    }
    .btn-download-header .text-full {
        display: inline !important;
    }
    .btn-download-header .text-lite {
        display: none !important;
    }
}

@media (min-width: 1100px) and (max-width: 1199px) {
    .btn-download-header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        right: 40px !important;
        font-size: 12px !important;
        padding: 7px 18px !important;
        z-index: 100 !important;
    }
    .btn-download-header .text-full {
        display: inline !important;
    }
    .btn-download-header .text-lite {
        display: none !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .btn-download-header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        right: 40px !important;
        font-size: 13px !important;
        padding: 7px 20px !important;
        z-index: 100 !important;
    }
    .btn-download-header .text-full {
        display: inline !important;
    }
    .btn-download-header .text-lite {
        display: none !important;
    }
}

@media (min-width: 1400px) {
    .btn-download-header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        right: 40px !important;
        font-size: 14px !important;
        padding: 8px 22px !important;
        z-index: 100 !important;
    }
    .btn-download-header .text-full {
        display: inline !important;
    }
    .btn-download-header .text-lite {
        display: none !important;
    }
}


/* ============================================================
   18. (SUPPRIMÉ)
   ============================================================
   L'ancien décalage margin-left par breakpoint (section 18 de B8)
   est remplacé par le système de variables A/B/C/D en section 4.
   ============================================================ */
