/* ==========================================================================
   EAS 96 Simulation — Variables du thème
   --------------------------------------------------------------------------
   Toute l'apparence du site découle de ce fichier. Palette issue du logo :
   bleu nuit, blanc, rouge (le rouge est réservé aux actions).
   ========================================================================== */

:root {
  /* ---- Couleurs du logo -------------------------------------------------- */
  --brand-blue: #000091;
  --brand-red: #e1000f;
  --brand-red-hover: #c1000d;

  /* ---- Bleu nuit (sections sombres) -------------------------------------- */
  --ink: #070b24;                     /* le plus sombre : haut de page, pied de page */
  --navy: #0d1540;                    /* sections sombres */
  --navy-soft: #172160;               /* blocs sur fond sombre */

  /* ---- Neutres (sections claires) ---------------------------------------- */
  --white: #ffffff;
  --paper: #f4f6fb;                   /* sections claires alternées */
  --line: #e2e6f0;
  --text: #111633;
  --text-muted: #5b627a;

  /* ---- Contexte clair (par défaut) --------------------------------------- */
  --bg: var(--white);
  --surface: var(--white);
  --surface-alt: var(--paper);
  --border: var(--line);
  --border-strong: #cdd3e2;
  --hover-bg: rgba(17, 22, 51, 0.04);
  --fg: var(--text);
  --fg-muted: var(--text-muted);
  --accent-fg: var(--brand-blue);     /* sur-titres, liens, mots mis en valeur */
  --tricolor-blue: var(--brand-blue);
  --tricolor-white: #d5dbea;
  --number-stroke: rgba(17, 22, 51, 0.08);
  --card-shadow: 0 1px 2px rgba(16, 24, 64, 0.05), 0 8px 24px rgba(16, 24, 64, 0.06);

  /* ---- Couleurs des services --------------------------------------------- */
  --service-pompiers: #e1000f;
  --service-samu: #d69100;
  --service-police: #2a49b8;
  --service-radio: #0f766e;

  /* ---- Voiles sur les photos --------------------------------------------- */
  /* Plus les valeurs sont basses, plus la photo est visible */
  --overlay-hero: linear-gradient(180deg, rgba(7, 11, 36, 0.6) 0%, rgba(7, 11, 36, 0.3) 35%, rgba(7, 11, 36, 0.5) 75%, var(--ink) 100%);
  --overlay-cta: linear-gradient(180deg, rgba(7, 11, 36, 0.84) 0%, rgba(13, 21, 64, 0.9) 100%);
  --hero-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 16px rgba(0, 0, 0, 0.35);

  /* ---- Typographie ------------------------------------------------------- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Barlow Semi Condensed", "Inter", system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-h3: 1.375rem;
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-h1: clamp(3rem, 1.6rem + 6vw, 6.5rem);
  --fs-number: clamp(4rem, 2.5rem + 5.5vw, 7.5rem);   /* grand numéro derrière les titres */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.05;
  --lh-snug: 1.3;
  --lh-base: 1.65;

  /* ---- Compte à rebours (panneau d'affichage) ---------------------------- */
  --flip-height: clamp(3.75rem, 2.6rem + 4vw, 6rem);
  --flip-top: #1c2766;
  --flip-bottom: #151e52;

  /* ---- Espacements ------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --section-padding: clamp(4.5rem, 3rem + 5vw, 7.5rem);

  /* ---- Mise en page ------------------------------------------------------ */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2rem);
  --announce-height: 40px;
  --header-height: 76px;
  --header-height-compact: 64px;

  /* ---- Formes & effets --------------------------------------------------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --shadow-lg: 0 24px 60px rgba(7, 11, 36, 0.22);
  --transition: 200ms ease;
}

/* ---- Contexte sombre : en-tête, haut de page, sections sombres, pied de page */
.theme-dark {
  --bg: var(--navy);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-alt: var(--navy-soft);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.3);
  --hover-bg: rgba(255, 255, 255, 0.08);
  --fg: #ffffff;
  --fg-muted: rgba(225, 230, 255, 0.72);
  --accent-fg: #ff5a64;
  --tricolor-blue: #4d5dff;
  --tricolor-white: #ffffff;
  --number-stroke: rgba(255, 255, 255, 0.08);
  --card-shadow: none;
}