/* ============================================================
   QUIZ CYBERCITOYEN — VILLE DE MONS — Design System v2.0
   Inspiré de mons.be : rouge CTA + header sombre + hero
   Brand: Navy #1B2B4B · Rouge Mons #EE3831 · Jost — seniors 65+
   ============================================================ */

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
  --color-navy: #1B2B4B;
  --color-navy-dark: #0d1b2e;
  --color-red: #EE3831;
  --color-red-hover: #c8302a;
  --color-red-light: rgba(238, 56, 49, 0.08);
  --color-red-mid: rgba(238, 56, 49, 0.15);
  /* Rouge accessible pour texte sur fond blanc (le rouge de marque #EE3831 = 4.0:1,
     sous le seuil AA 4.5:1). #C62828 = 5.6:1 sur blanc. Usage : noms, petits libellés. */
  --color-red-text: #C62828;
  --color-bg: #F0F2F7;
  --color-white: #FFFFFF;
  --color-text: #1A1A2E;
  --color-secondary: #5A6278;
  --color-success: #27AE60;
  --color-success-btn: #1a7a45;
  --color-warning: #E67E22;
  --color-border: #E2E5EE;
  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
  --radius-pill: 100px;
  /* Échelle typographique fermée (spec §6, base 18px) — plancher 16px sur tout contenu lisible.
     7 tailles couvrent tous les usages : libellés micro, corps, interface, titres, scores.
     Remplacent les ~40 font-size en dur progressivement (par composant, diff visuel voulu). */
  --fs-xs:   0.9rem;    /* ~16px  — plancher senior : plus aucun contenu lisible sous 16px */
  --fs-sm:   0.9rem;    /* ~16px  — texte secondaire, sous-titres de carte (plancher senior) */
  --fs-base: 1rem;      /* ~18px  — corps de texte, dialogues, options (plancher lisibilité senior) */
  --fs-md:   1.1rem;    /* ~20px  — consignes, instructions */
  --fs-lg:   1.3rem;    /* ~23px  — titres d'exercice, questions */
  --fs-xl:   1.6rem;    /* ~29px  — titres de section, résultats */
  --fs-2xl:  2.4rem;    /* ~43px  — score géant dans résultats */

  /* Hauteur réelle du header (71px mesurés). Utilisée dans calc(100dvh - var(--header-h))
     pour garantir le zéro-scroll desktop. Ajuster ici si le header change de taille. */
  --header-h: 71px;

  --shadow-sm: 0 1px 4px rgba(13, 27, 46, 0.08);
  --shadow: 0 4px 20px rgba(13, 27, 46, 0.10), 0 1px 4px rgba(13, 27, 46, 0.06);
  --shadow-lg: 0 12px 48px rgba(13, 27, 46, 0.16), 0 2px 8px rgba(13, 27, 46, 0.08);
  --shadow-red: 0 4px 20px rgba(238, 56, 49, 0.25);
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Tokens couleurs (phase a, alias des valeurs actuelles) */
  --c-surface-50: #f9fafb;
  --c-surface-75: #f8f9fb;
  --c-surface-100: #f7f8fa;
  --c-surface-150: #f5f6f8;
  --c-surface-200: #f3f4f6;
  --c-surface-250: #eef2f7;
  --c-surface-300: #e9edf3;
  --c-surface-325: #e9e9eb;
  --c-surface-350: #e5e7eb;
  --c-border-strong: #d1d5db;
  --c-grey-300: #c9ccd3;
  --c-grey-400: #9ca3af;
  --c-grey-420: #9aa3b2;
  --c-grey-440: #9aa0ab;
  --c-grey-500: #6b7280;
  --c-slate-600: #334155;
  --c-slate-800: #1f2937;
  --c-navy-700: #1d2740;
  --c-slate-900: #111827;
  --c-navy-900: #0b1220;
  --c-navy-950: #060a14;
  --c-ink: #111111;
  --c-black: #000000;
  --c-mac-red: #ff5f57;
  --c-mac-amber: #ffbd2e;
  --c-mac-green: #28c840;
  --c-ios-blue: #007aff;
  --c-link-blue: #1a56db;
  --c-chat-blue: #9fc0ff;
  --c-navy-mid: #2d4a8f;
  --c-danger: #dc2626;
  --c-danger-deep: #9b2226;
  --c-danger-bright: #ff6058;
  --c-red-soft: #ff6b6b;
  --c-red-pale: #ff9090;
  --c-red-pale-border: #fca5a5;
  --c-red-bg: #fff5f5;
  --c-amber-deep: #d35400;
  --c-amber-text: #c67c00;
  --c-amber-burnt: #c2410c;
  --c-amber-pale-border: #fed7aa;
  --c-amber-pale: #ffe082;
  --c-amber-bg-1: #fff8e1;
  --c-amber-bg-2: #fffde7;
  --c-amber-bg-3: #fff7ed;
  --c-green-deep: #1b5e20;

  /* Overlays immersifs Lot 5 -- couche entre scene-illus (z:0) et artefact (z:2)
     Cat A : gradient directionnel qui fait "flotter" l'artefact HTML devant la scène
     Cat B : gradient doux d'ambiance (défaut sur .ex-stage--scene)               */
  --overlay-a-email:    linear-gradient(to top, rgba(27,43,75,0.60) 0%, transparent 62%);
  --overlay-a-sms:      linear-gradient(to top, rgba(0,0,0,0.50) 0%, transparent 55%);
  --overlay-a-call:     radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
  --overlay-a-url:      linear-gradient(to bottom, rgba(240,244,248,0.45) 0%, rgba(240,244,248,0.15) 100%);
  --overlay-b:          linear-gradient(to top, rgba(0,0,0,0.38) 0%, transparent 60%);
  --overlay-b-decision: linear-gradient(to top, rgba(27,43,75,0.55) 0%, rgba(0,0,0,0.20) 100%);

  /* Hauteurs standardisées des images de scène */
  --dialogue-img-h: 200px;   /* cap image intro dialogue sur mobile/tablette */
  --scene-h-cap:    220px;   /* cap stage scene Cat B (decision/compare/sort/signals) sur mobile/tablette */
}