/* Hallmark · genre: modern-minimal · macrostructure: Bento Grid · theme: custom "bleu marque EHSF (azur + marine) + touches orange, blueprint"
 * paper: oklch(98.5% .006 240) · accent: oklch(50% .16 252) bleu · warn: oklch(70% .19 48) orange · display: Archivo · body: Geist · mono: Geist Mono
 * axes: light / geometric-sans / cool · nav: N5 · footer: Ft1 · enrichment: Tier-B SVG · studied: no
 * pre-emit critique: P5 H4 E4 S5 R4 V4 · contrast: pass (46–50) · slop: pass (51–55) · mobile: pass (36, 59, 61–69) */

/* ============================================================================
   EHSF Dépannage — Design System (tokens)
   Tout le système de design vit ici. La page ne référence que des var(--token).
   ============================================================================ */

:root {
  /* ---- Surfaces claires (paper) — tint bleu ciel froid -------------------- */
  --color-paper:    oklch(98.5% 0.006 240);  /* fond principal, blanc bleuté */
  --color-paper-2:  oklch(96.5% 0.010 235);  /* surface carte */
  --color-paper-3:  oklch(94.0% 0.014 232);  /* surface en creux / inset (ciel léger) */

  /* ---- Encre (texte sur clair) — marine, ≥4.5:1 en petit texte ----------- */
  --color-ink:      oklch(22% 0.030 260);    /* bleu marine quasi-noir */
  --color-ink-2:    oklch(40% 0.028 256);    /* texte secondaire (~6:1) */
  --color-muted:    oklch(45% 0.022 252);    /* labels / légendes (~4.8:1 même en petit) */

  /* ---- Filets sur clair --------------------------------------------------- */
  --color-rule:     oklch(89% 0.012 235);    /* hairline */
  --color-rule-2:   oklch(93% 0.008 235);    /* hairline plus faible */

  /* ---- Band bleu marine (coal) ------------------------------------------- */
  --color-coal:     oklch(24% 0.085 264);    /* marine profond ≈ #0E2C66 (fond sombre) */
  --color-coal-2:   oklch(29% 0.085 263);    /* carte élevée sur sombre */
  --color-coal-3:   oklch(36% 0.075 262);    /* bordure / 2e élévation */
  --color-chalk:    oklch(96% 0.010 235);    /* texte sur sombre */
  --color-chalk-2:  oklch(75% 0.035 245);    /* texte secondaire sur sombre */
  --color-rule-dark: oklch(40% 0.060 260);   /* hairline sur sombre */

  /* ---- Accent BLEU (azur / royal — couleur de marque) -------------------- */
  --color-accent:     oklch(50% 0.160 252);  /* bleu royal — remplissages CTA + décor (texte blanc OK ~4.7:1) */
  --color-accent-2:   oklch(44% 0.155 256);  /* bleu foncé : texte/icônes/liens sur fond clair (≥4.5:1) */
  --color-accent-ink: oklch(99% 0.010 240);  /* texte blanc sur bleu */
  --color-accent-soft: oklch(64% 0.140 242 / 0.14); /* tint azur léger (chips) */
  --color-focus:      oklch(60% 0.170 248);  /* anneau de focus azur (≥3:1 sur clair ET marine) */

  /* ---- Accent ORANGE (touches : live / urgence / hi-vis) ----------------- */
  --color-warn:      oklch(70% 0.190 48);    /* ≈ #FF6A00 — beacons, bandes hi-vis, étape finale */
  --color-warn-2:    oklch(58% 0.175 45);    /* orange foncé (texte/icône orange sur clair) */
  --color-warn-soft: oklch(70% 0.190 48 / 0.14);

  /* ---- WhatsApp (fonctionnel, verrouillé marque) ------------------------- */
  --color-whatsapp:    oklch(70% 0.170 153);  /* ≈ #25D366 — vert vif WhatsApp */
  --color-whatsapp-2:  oklch(64% 0.165 153);  /* hover */
  --color-whatsapp-ink: oklch(24% 0.040 153); /* texte SOMBRE sur vert vif (~6:1, accessible) */

  /* ---- Typographie -------------------------------------------------------- */
  --font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body:    "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  /* échelle de texte (fluide via clamp) */
  --text-xs:    0.75rem;     /* 12 */
  --text-sm:    0.8125rem;   /* 13 */
  --text-base:  0.9375rem;   /* 15 */
  --text-md:    1rem;        /* 16 */
  --text-lg:    1.125rem;    /* 18 */
  --text-xl:    1.375rem;    /* 22 */
  --text-2xl:   clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --text-3xl:   clamp(2rem, 1.5rem + 2.2vw, 2.875rem);
  --text-display-s: clamp(2rem, 1.4rem + 3.0vw, 3.5rem);
  --text-display:   clamp(2.25rem, 1.5rem + 4.4vw, 4.75rem);

  --leading-tight: 1.06;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.18em;

  /* ---- Espacements (échelle 4 pt) ---------------------------------------- */
  --space-3xs: 0.25rem;  /* 4  */
  --space-2xs: 0.5rem;   /* 8  */
  --space-xs:  0.75rem;  /* 12 */
  --space-sm:  1rem;     /* 16 */
  --space-md:  1.5rem;   /* 24 */
  --space-lg:  2rem;     /* 32 */
  --space-xl:  3rem;     /* 48 */
  --space-2xl: 4rem;     /* 64 */
  --space-3xl: 5rem;     /* 80 */
  --space-4xl: 7.5rem;   /* 120 */

  --measure: 62ch;       /* largeur de lecture confortable */

  /* ---- Rayons ------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---- Filet (épaisseur) -------------------------------------------------- */
  --rule-w: 1px;

  /* ---- Easings + durées --------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 140ms;
  --dur-mid:   240ms;
  --dur-long:  420ms;

  /* ---- Ombres (surfaces claires ; le sombre élève par la luminosité) ----- */
  --shadow-sm: 0 1px 2px oklch(22% 0.02 60 / 0.06), 0 2px 8px oklch(22% 0.02 60 / 0.05);
  --shadow-md: 0 4px 16px oklch(22% 0.02 60 / 0.08), 0 1px 3px oklch(22% 0.02 60 / 0.06);
  --shadow-lg: 0 16px 48px oklch(22% 0.02 60 / 0.14);

  /* ---- Échelle z-index (pas de 9999) ------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 1000;

  /* ---- Surfaces translucides (nav / overlays avec blur) ------------------ */
  --glass-paper:        oklch(98.5% 0.006 240 / 0.85);
  --glass-paper-strong: oklch(98.5% 0.006 240 / 0.92);
  --glass-paper-soft:   oklch(98.5% 0.006 240 / 0.70);

  /* ---- Motif hi-vis (touche orange sur marine) --------------------------- */
  --hazard: repeating-linear-gradient(
      135deg,
      var(--color-warn) 0 14px,
      var(--color-coal) 14px 28px);
  --grid-dot: radial-gradient(circle, currentColor 1px, transparent 1px);
}