/* ============================================================================
 * Variables CSS — Coalition Nationale v0.8.0
 *
 * Direction esthétique :
 *  - Inter (variable font, 2018) pour TOUT : titres, corps, méta, UI
 *  - Palette charte v2.6 : bleu nuit / or / ivoire
 *  - Fond blanc dominant (pas ivoire généralisé — réservé aux sections alt)
 *  - Largeurs étendues jusqu'à 2200px sur ultra-wide
 *
 * Source unique de tous les design tokens. Modifier ici se répercute
 * automatiquement partout dans le thème.
 * ========================================================================== */


/* ============================================================================
 * SELF-HOSTED FONTS (§6.7 RGPD)
 * 
 * Inter est une variable font : un seul fichier .woff2 couvre tous les
 * poids 400-700. Total : ~50 Ko (vs ~250 Ko avec 4 poids static).
 * ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    /* v0.11.65 (C238) : 'optional' au lieu de 'swap'. Combiné au preload du
       woff2 (cf. inc/enqueue.php), la police est quasi toujours prête au
       premier paint (cache ou fetch prioritaire) → Inter d'emblée, sans flash.
       Sur un rare chargement à froid lent, 'optional' garde le repli pour
       toute la vue SANS swap brutal (pas de re-rendu visible), Inter étant
       servie dès la navigation suivante (en cache). Repasser à 'swap' si l'on
       préfère garantir Inter au prix d'un éventuel flash à froid. */
    font-display: optional;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: optional;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================================
 * DESIGN TOKENS
 * ========================================================================== */

:root {
    /* ===== Couleurs de marque ===== */
    --cn-bleu-nuit: #0F2845;
    --cn-or:        #B8962E;
    --cn-ivoire:    #F5F0E8;

    /* ===== Variations bleu nuit ===== */
    --cn-bleu-nuit-95: #1A3858;
    --cn-bleu-nuit-80: #3F5471;
    --cn-bleu-nuit-50: #87929E;
    --cn-bleu-nuit-20: #CFD3D8;
    --cn-bleu-nuit-10: #E7E9EC;

    /* ===== Variations or ===== */
    --cn-or-95: #C9A340;
    --cn-or-50: #DBC68F;
    --cn-or-10: #F7F1DC;

    /* ===== Variations ivoire (arrière-plans secondaires) ===== */
    --cn-ivoire-95: #FAF6EE;
    --cn-ivoire-90: #F2EBDD;

    /* ===== Couleurs fonctionnelles ===== */
    --cn-blanc:     #FFFFFF;
    --cn-noir:      #000000;
    --cn-erreur:    #B32D2E;
    --cn-succes:    #1E7E34;
    --cn-attention: #B8962E;

    /* ===== Couleurs des 6 piliers ===== */
    --cn-pilier-1-etat:     #0F2845;
    --cn-pilier-2-securite: #6B2D2D;
    --cn-pilier-3-nation:   #B8962E;
    --cn-pilier-4-societe:  #2D6B5E;
    --cn-pilier-5-economie: #4A4A2D;
    --cn-pilier-6-monde:    #2D4A6B;

    /* ===== Polices — Inter partout =====
     * --cn-font-body : police principale (titres ET corps)
     * --cn-font-sans : alias historique (utilisé dans le code legacy)
     * --cn-font-serif : alias historique également (mappé sur Inter pour
     *   éviter d'avoir à modifier tous les composants Twig). Quand la
     *   décision finale est confirmée, on pourra supprimer ces alias. */
    --cn-font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
    --cn-font-sans:    var(--cn-font-body);
    --cn-font-serif:   var(--cn-font-body);
    --cn-font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --cn-font-display: var(--cn-font-body);

    /* ===== Échelle typographique modulaire (ratio 1.25) ===== */
    --cn-text-xs:   0.75rem;    /* 12 */
    --cn-text-sm:   0.875rem;   /* 14 */
    --cn-text-base: 1rem;       /* 16 */
    --cn-text-lg:   1.125rem;   /* 18 */
    --cn-text-xl:   1.25rem;    /* 20 */
    --cn-text-2xl:  1.563rem;   /* 25 */
    --cn-text-3xl:  1.953rem;   /* 31 */
    --cn-text-4xl:  2.441rem;   /* 39 */
    --cn-text-5xl:  3.052rem;   /* 49 */
    --cn-text-6xl:  3.815rem;   /* 61 — pour H1 manchette grand écran */

    /* ===== Hauteurs de ligne ===== */
    --cn-leading-tight:   1.15;   /* H1 manchette */
    --cn-leading-snug:    1.3;    /* H2-H4 */
    --cn-leading-normal:  1.55;   /* corps UI */
    --cn-leading-relaxed: 1.7;    /* prose long */

    /* ===== Graisses ===== */
    --cn-weight-regular:  400;
    --cn-weight-medium:   500;
    --cn-weight-semibold: 600;
    --cn-weight-bold:     700;

    /* ===== Espacements (système 4px) ===== */
    --cn-space-1:  0.25rem;   /*  4 */
    --cn-space-2:  0.5rem;    /*  8 */
    --cn-space-3:  0.75rem;   /* 12 */
    --cn-space-4:  1rem;      /* 16 */
    --cn-space-5:  1.25rem;   /* 20 */
    --cn-space-6:  1.5rem;    /* 24 */
    --cn-space-8:  2rem;      /* 32 */
    --cn-space-10: 2.5rem;    /* 40 */
    --cn-space-12: 3rem;      /* 48 */
    --cn-space-16: 4rem;      /* 64 */
    --cn-space-20: 5rem;      /* 80 */
    --cn-space-24: 6rem;      /* 96 */
    --cn-space-32: 8rem;      /* 128 */

    /* ===== Bordures ===== */
    --cn-border-thin:   1px;
    --cn-border-medium: 2px;
    --cn-border-thick:  4px;

    /* ===== Arrondis ===== */
    --cn-radius-sm:   2px;
    --cn-radius-md:   4px;
    --cn-radius-lg:   8px;
    --cn-radius-full: 9999px;

    /* ===== Ombres ===== */
    --cn-shadow-sm: 0 1px  2px  0     rgba(15, 40, 69, 0.04);
    --cn-shadow-md: 0 4px  6px  -1px  rgba(15, 40, 69, 0.08);
    --cn-shadow-lg: 0 10px 15px -3px  rgba(15, 40, 69, 0.10);

    /* ===== LARGEURS DE CONTENU — étendues pour grand écran ===== */
    /* v0.9.1 : --cn-content-prose passé de 680px à 720px et la prose
       elle-même progresse jusqu'à 1100px sur ultra-wide (voir .cn-prose
       dans components.css). Permet d'exploiter mieux la largeur sur
       grands écrans tout en restant lisible. */
    --cn-content-prose: 720px;
    --cn-content-wide:  1280px;
    --cn-content-ultra: 1600px;
    --cn-content-edge:  var(--cn-space-4);

    /* ===== Transitions ===== */
    --cn-duration-fast:   120ms;
    --cn-duration-normal: 200ms;
    --cn-duration-slow:   300ms;
    --cn-easing:          cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tablet 640+ */
@media (min-width: 640px) {
    :root { --cn-content-edge: var(--cn-space-6); }
}

/* Desktop 1024+ */
@media (min-width: 1024px) {
    :root { --cn-content-edge: var(--cn-space-8); }
}

/* Wide 1440+ */
@media (min-width: 1440px) {
    :root {
        --cn-content-edge: var(--cn-space-10);
        --cn-content-wide: 1440px;
    }
}

/* Wide 1680+ */
@media (min-width: 1680px) {
    :root {
        --cn-content-edge: var(--cn-space-12);
        --cn-content-wide: 1600px;
        --cn-content-ultra: 1800px;
    }
}

/* Ultra-wide 1920+ */
@media (min-width: 1920px) {
    :root {
        --cn-content-edge: var(--cn-space-16);
        --cn-content-wide: 1800px;
        --cn-content-ultra: 2000px;
    }
}

/* Ultra-wide 2400+ */
@media (min-width: 2400px) {
    :root {
        --cn-content-edge: var(--cn-space-20);
        --cn-content-wide: 2000px;
        --cn-content-ultra: 2200px;
    }
}