/* 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 : --font-ui = données/texte (sans propre, lisible partout) ;
       --font-brand = logo + titres (Comic Neue, identité ludique BlitzPAL). */
    --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-brand: 'Comic Neue', 'Comic Sans MS', system-ui, sans-serif;

    /* Thème unique BlitzPAL — blanc / bleu ciel, tech. --blue = accent
       primaire (CTA, liens, focus) ; --red reste réservé aux alertes/rupture. */
    --red:     #DC2626;
    --red-dim: #B91C1C;
    --red-glow:#DC262633;
    --teal:       #0891B2;
    --teal-dim:   #066A83;
    --teal-glow:  #0891B233;
    --blue:       #0284C7;
    --blue-dim:   #0369A1;
    --blue-glow:  #0284C733;
    --purple:     #6366F1;
    --bg:      #FFFFFF;
    --bg2:     #FFFFFF;
    --bg3:     #EAF3FB;
    --bg4:     #DCEBFA;
    --border:  #C9DDF0;
    --text:    #10253A;
    --muted:   #5C7A94;
    --green:   #16A34A;
    --orange:  #EA580C;
    --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;
}