/* Comic Neue : remplaçant moderne de Comic Sans, auto-hébergé (OFL) → rendu
   identique sur mobile/desktop et disponible offline (cf. PRECACHE sw.js).
   Évite le fallback `cursive` système (immonde) quand Comic Sans est absent. */
@font-face {
    font-family: 'Comic Neue';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/comic-neue-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Comic Neue';
    font-style: normal; font-weight: 700; font-display: swap;
    src: url('/assets/fonts/comic-neue-700.woff2') format('woff2');
}

:root {
    /* Polices (doctrine anti-slop : une famille UI menée avec conviction ; la
       police de marque est réservée aux VRAIS moments d'identité — logo, login).
       - --font-ui   : toutes les données, tous les titres de section, tous les libellés.
       - --font-brand: alias de --font-ui (les anciens usages « titre » basculent
         donc sur la famille UI sans avoir à éditer 35 sélecteurs).
       - --font-logo : Comic Neue, UNIQUEMENT le logo BlitzPAL/Oktoneo et l'écran
         de login (identité ludique, jamais sur une donnée). */
    --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-brand: var(--font-ui);
    --font-logo: 'Comic Neue', 'Comic Sans MS', system-ui, sans-serif;

    /* Charte Oktoneo — dérivée des 4 couleurs du logo (img/oktoneo.svg) :
       bleu #1C64F2, vert #00AA51, orange #F4511E, navy #1D3263.
       Règle : la teinte du logo sert d'accent/aplat ; pour le TEXTE et les petits
       éléments, on emploie une variante assombrie de la MÊME teinte qui passe
       WCAG AA (≥4.5:1) sur nos fonds clairs (bg/bg3/bg4). Contrastes mesurés en
       commentaire. --blue = accent primaire (CTA, liens, focus, nav active) ;
       --red reste réservé aux alertes/rupture (hors charte logo, sémantique danger). */
    --red:     #DC2626;   /* danger — blanc dessus 4.83 ✓ */
    --red-dim: #B91C1C;
    --red-glow:#DC262633;
    /* Teal = accent secondaire historique, réaligné sur le vert de marque Oktoneo. */
    --teal:       #007C3B;  /* vert logo assombri — /blanc 5.32 ✓ /bg3 4.74 ✓ */
    --teal-dim:   #00612E;
    --teal-glow:  #00AA5133;
    --blue:       #1C64F2;  /* BLEU LOGO — /blanc 5.05 ✓, blanc dessus 5.05 ✓ (CTA) */
    --blue-dim:   #0C4CCA;  /* dérivé bleu logo — /blanc 7.24 ✓ (hover, texte fort) */
    --blue-glow:  #1C64F233;
    --purple:     #6366F1;
    --bg:      #FFFFFF;
    --bg2:     #FFFFFF;
    --bg3:     #EAF3FB;
    --bg4:     #DCEBFA;
    --border:  #C9DDF0;
    --text:    #1D3263;   /* NAVY LOGO — /blanc 12.44 ✓ */
    --muted:   #4E6980;   /* gris-bleu neutre — /bg4 4.73 ✓ /blanc 5.74 ✓ */
    --green:   #007C3B;   /* vert logo assombri — /bg3 4.74 ✓, blanc dessus 5.32 ✓ */
    --orange:  #CB380A;   /* orange logo assombri — /bg3 4.55 ✓, blanc dessus 4.94 ✓ */
    /* Teintes VIVES du logo, réservées aux aplats/branding décoratifs (pas au texte). */
    --brand-blue:   #1C64F2;
    --brand-green:  #00AA51;
    --brand-orange: #F4511E;
    --brand-navy:   #1D3263;
    --white:   #FFFFFF;

    /* Typography */
    --font-xs:   0.65rem;
    --font-sm:   0.72rem;
    --font-base: 0.82rem;
    --font-md:   0.9rem;
    --font-lg:   1.15rem;
    --font-xl:   1.6rem;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Élévation — teinte bleu-nuit (pas noir pur) : surfaces flottantes sur
       fond clair. sm = hover/carte plate, md = dropdown/panneau, lg = modal/drawer. */
    --shadow-sm: 0 1px 3px rgba(16,37,58,0.08);
    --shadow-md: 0 4px 16px rgba(16,37,58,0.12);
    --shadow-lg: 0 12px 40px rgba(16,37,58,0.18);

    /* Spacing */
    --gap-sm: 8px;
    --gap-md: 14px;
    --gap-lg: 24px;
}