/* ============================================================================
   TOKENS — Charte graphique officielle ECC Siège Suprême v1.0 (Juin 2026)
   SOURCE DE VÉRITÉ UNIQUE. Ne pas coder de couleurs en dur ailleurs :
   toujours référencer les variables sémantiques ci-dessous.

   Ce fichier importe le Design System OFFICIEL (dossier ./ecc-ds/, exporté
   depuis « ECC Siège Suprême — Design System ») puis expose une couche
   sémantique/compat propre au projet. Les jetons de marque (bleu nuit, jaune,
   palette emblème) sont RECALÉS sur les jetons officiels --ecc-* / --brand-*.

   Jetons officiels disponibles après import :
     --ecc-*        primitives (bleu-nuit, jaune, arc-en-ciel, gris)
     --brand-*      marque (primary/accent + hover/active)
     --surface-*    surfaces      --text-*  textes sémantiques
     --state-*      états          --font-display/-body  familles
     --fs-* / --lh-* échelle typo  --space-* espacements
     --radius-* --shadow-* --dur-* --ease-* --gradient-*  effets
   Réf. spec : aidd_docs/design/tokens-charte-ecc.md
   ========================================================================== */

@import "./ecc-ds/fonts.css";
@import "./ecc-ds/colors.css";
@import "./ecc-ds/typography.css";
@import "./ecc-ds/spacing.css";
@import "./ecc-ds/effects.css";

:root {
  /* ======================= COUCHE PRIMITIVE ======================= */
  /* Bleu nuit — ancré sur le jaune officiel #0E60A9 ; le reste de la gamme
     est dérivé (H=209°) pour les besoins d'interface (états, surfaces). */
  --blue-950:#061C32; --blue-900:#0A3D69; --blue-800:var(--ecc-bleu-nuit); --blue-700:#1872C4;
  --blue-600:#2B8ADE; --blue-500:#4DA6F0; --blue-400:#7EC1F5; --blue-200:#BDE1FB;
  --blue-100:#E0F0FD; --blue-50:#F0F7FE;
  /* Jaune — accent officiel (jamais texte sur blanc) */
  --yellow-400:#F5E535; --yellow-500:var(--ecc-jaune); --yellow-600:var(--ecc-jaune-600);
  --yellow-bg:#FEFAE5; --yellow-border:#F0D840;
  /* Neutres — légèrement bleutés (interface). Les gris purs officiels restent
     accessibles via --ecc-gris-*. */
  --neutral-0:#FFFFFF; --neutral-50:#F7F9FB; --neutral-100:#EEF2F7; --neutral-200:#DDE4EE;
  --neutral-300:#C2CDD9; --neutral-400:#9AAFC0; --neutral-500:#6D8599; --neutral-700:#3A4F61;
  --neutral-900:#1A2535;
  /* Palette emblème — RECALÉE sur l'officiel. DÉCORATIF / LOGO uniquement. */
  --emblem-red:var(--ecc-arc-rouge); --emblem-orange:var(--ecc-arc-orange);
  --emblem-yellow:var(--ecc-arc-jaune-or); --emblem-green:var(--ecc-arc-vert);
  --emblem-blue:var(--ecc-arc-bleu-ciel); --emblem-violet:var(--ecc-arc-violet);
  --emblem-navy:var(--ecc-arc-bleu-nuit);
  /* États fonctionnels — variantes accessibles (contraste AA sur blanc),
     volontairement plus sobres que les couleurs vives de l'emblème. */
  --green-700:#1A6B3A; --green-600:#2F8B52; --green-100:#E8F5ED; --green-border:#A8D8B9;
  --red-700:#A3241F; --red-600:#C0392B; --red-100:#FDECEA; --red-border:#F0A8A4;
  --orange-700:#8A4A00; --orange-100:#FEF3E2; --orange-border:#F0C070;

  /* ======================= COUCHE SÉMANTIQUE ======================= */
  /* Marque — recalée sur les jetons officiels --ecc-* / --brand-*. */
  --color-primary:var(--ecc-bleu-nuit); --color-primary-dark:#0A3D69; --color-primary-deeper:#061C32;
  --color-primary-hover:#1872C4; --color-primary-light:#E0F0FD; --color-primary-subtle:#F0F7FE;
  --color-accent:var(--ecc-jaune); --color-accent-hover:var(--ecc-jaune-600); --color-accent-bg:#FEFAE5;
  /* Surfaces */
  --surface:#FFFFFF; --surface-alt:#F7F9FB; --surface-raised:#FFFFFF;
  --surface-overlay:rgba(14,96,169,0.04);
  --surface-dark:#0A3D69; --surface-darker:#061C32; --surface-dark-scrim:rgba(10,61,105,0.88);
  /* Texte */
  --text:#1A2535; --text-secondary:#3A4F61; --text-muted:#6D8599; --text-placeholder:#9AAFC0;
  --text-on-primary:#FFFFFF; --text-on-dark-muted:#A8C4DE; --text-on-dark-subtle:#7AA3C4;
  --text-link:var(--ecc-bleu-nuit); --text-link-hover:#0A3D69;
  /* Bordures */
  --border:#DDE4EE; --border-medium:#C2CDD9; --border-strong:#9AAFC0; --border-primary:var(--ecc-bleu-nuit);
  /* Champs */
  --field-border:#E4EAF2; --field-border-hover:#CFD9E6; --field-bg:#EDF1F7;
  --field-bg-hover:#E5EBF3; --field-bg-readonly:#EEF2F7; --field-focus-ring:rgba(14,96,169,0.16);
  --field-radius:12px; --field-h:54px;
  /* Focus */
  --focus-ring:rgba(14,96,169,0.22); --focus-ring-offset:2px;
  /* États — bases accessibles ; les teintes vives officielles restent en --state-*. */
  --color-success:#1A6B3A; --color-success-bg:#E8F5ED; --color-success-border:#A8D8B9; --color-success-icon:#2F8B52;
  --color-error:#A3241F; --color-error-bg:#FDECEA; --color-error-border:#F0A8A4; --color-error-icon:#C0392B;
  --color-warning:#8A4A00; --color-warning-bg:#FEF3E2; --color-warning-border:#F0C070;
  --color-info:var(--ecc-bleu-nuit); --color-info-bg:#E0F0FD; --color-info-border:#7EC1F5;
  /* Composants */
  --step-connector:#DDE4EE; --step-n-size:34px; --step-n-radius:10px; --step-gap:32px;
  --card-radius:16px; --recap-radius:14px; --submit-h:58px; --submit-radius:12px;
  /* Typographie — familles (recalées sur les familles officielles du DS).
     --font-body est fourni par ./ecc-ds/typography.css (Montserrat) — non redéfini ici. */
  --font-heading:var(--font-display);
  --font-mono:'Courier New', Courier, monospace;
  /* Compat : anciens alias violets/serif encore référencés dans le CSS legacy.
     Ils pointent désormais vers les tokens charte pour une migration sûre. */
  --serif:var(--font-heading); --sans:var(--font-body);
  --violet:var(--color-primary); --violet-2:var(--color-primary-hover); --violet-3:var(--color-primary-dark);
  --violet-soft:var(--text-muted); --eyebrow:var(--text-muted);
  --lav:var(--surface-alt); --lav-2:var(--color-primary-subtle); --lav-bg:var(--surface-alt);
  --card-border:var(--border-medium); --line:var(--border); --ink:var(--text); --muted:var(--text-muted);
  /* Échelle typographique (projet — coexiste avec l'échelle officielle --fs-*) */
  --text-xs:11px; --text-sm:13px; --text-base:15px; --text-md:17px; --text-lg:20px;
  --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:44px; --text-5xl:52px;
  --leading-tight:1.12; --leading-snug:1.32; --leading-normal:1.6; --leading-relaxed:1.7;
  --tracking-tighter:-.01em; --tracking-tight:.01em; --tracking-normal:.02em;
  --tracking-wide:.08em; --tracking-wider:.14em; --tracking-widest:.28em;
  --weight-normal:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  /* Shadows — teinte bleu nuit */
  --shadow-card:0 1px 3px rgba(14,96,169,.06),0 8px 24px -8px rgba(14,96,169,.14);
  --shadow-card-hover:0 4px 16px -4px rgba(14,96,169,.18),0 24px 48px -20px rgba(14,96,169,.22);
  --shadow-card-elevated:0 1px 3px rgba(14,96,169,.05),0 32px 72px -24px rgba(14,96,169,.28);
  --shadow-btn:0 8px 20px -6px rgba(14,96,169,.50);
  --shadow-btn-hover:0 12px 26px -6px rgba(14,96,169,.62);
  --shadow-hero:0 44px 90px -26px rgba(6,28,50,.55);
}

/* ============================================================================
   BANDEAU "MODE TEST" — affiché uniquement quand APP_ENV=local
   Composant : resources/views/components/test-mode-banner.blade.php
   Rouge plein + texte blanc lisible (Montserrat), en tête de <body>.
   ============================================================================ */
.test-mode-banner {
  position: relative;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background-color: #C0141C;
  color: #FFFFFF;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
}

.test-mode-banner__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #FFFFFF;
}