/* =============================================================================
   Portail DGSF — jetons de design
   Source unique des couleurs, de la typographie, des espacements, des rayons,
   des ombres, du mouvement et des plans de superposition.
   Règle : aucune couleur codée en dur dans les autres feuilles (hors valeurs
   techniques : masques, SVG en data-URI) ; on passe par un jeton.
   Ordre de chargement (setup.typoscript › includeCSS) : tokens, base, layout,
   subpages, chatbot, components, data, modules, puis drs-portal et workflow.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------- Marque (charte MEFP) */
  --navy: #0B1D3A;          /* marque, titres, bouton principal — 16,79:1 sur blanc */
  --navy-deep: #061325;     /* pied de page, fonds profonds */
  --navy-light: #132D54;
  --navy-mid: #14264A;      /* survols et fonds de bandeau sur marine */
  --navy-soft: #1D3559;     /* héros de pages de données, fenêtre de document */
  --gold: #D6A74B;          /* OR officiel charte MEFP — filets, pictos, fond de bouton (texte marine 7,58:1). Jamais en texte sur fond clair (2,21:1) */
  --gold-ink: #846314;      /* seul or autorisé en texte sur fond clair — 5,56:1 */
  --gold-ink-strong: #6B500F; /* or en texte sur fond gris (étiquettes de carte) */
  --gold-light: #E6C57E;    /* or en texte sur fond marine */
  --gold-muted: #D4B94E;
  --emerald: #1B6B4A;
  --emerald-light: #238B5E;

  /* ---------------------------------------------------------------- Texte */
  --text-primary: #1A1A2E;  /* 17,06:1 sur blanc */
  --text-secondary: #5A5A72;/* 6,69:1 */
  --text-light: #676779;    /* 5,54:1 (ancien #8A8A9E = 3,38:1) */
  --on-dark: #FFFFFF;       /* texte et pictos sur fond marine */

  /* ---------------------------------------------------------------- Surfaces et lignes */
  --surface: #FFFFFF;
  --surface-alt: #F7F8FA;   /* sections et champs en fond légèrement gris */
  --surface-warm: #F0EDE8;  /* pastilles et fonds chauds */
  --border-subtle: #E8E5E0;
  --border-cool: #E2E8F0;
  --line-muted: #B8BCC6;    /* connecteurs, séparateurs appuyés */
  --border-input: #7D8799;  /* contour des champs — 3,62:1 sur blanc, 3,1:1 sur fond chaud (WCAG 1.4.11) */
  --focus-ring: var(--gold-ink);  /* anneau de focus ; les zones marine le passent à --gold (base.css) */
  --warm-white: var(--surface);   /* alias historique */
  --warm-gray: var(--surface);    /* alias historique */

  /* ---------------------------------------------------------------- États */
  --success: var(--emerald);        /* hausses, validations — 6,46:1 */
  --success-bright: #34D399;        /* hausses sur fond marine */
  --danger: #B42318;                /* baisses, erreurs — 6,57:1 */
  --danger-bright: #F87171;         /* baisses sur fond marine */
  --warning: #EA580C;
  --notice-ink: #8A5A00;            /* mention « provisoire » / « approché » — 5,3:1 sur --notice-bg */
  --notice-bg: #FDF1D8;

  /* ---------------------------------------------------------------- Données : catégories de l'annuaire */
  --cat-bank: #2563EB;       --cat-bank-light: #60A5FA;   --cat-bank-dark: #1E40AF;
  --cat-mfi: var(--emerald); --cat-mfi-light: var(--success-bright); --cat-mfi-dark: #14532D;
  --cat-insurance: var(--gold); --cat-insurance-light: #FBBF24; --cat-insurance-ink: #92400E;
  --cat-exchange: #DB2777;   --cat-exchange-light: #F472B6;
  --cat-atm: #334155;        --cat-atm-mid: #475569;      --cat-service: #94A3B8;

  /* ---------------------------------------------------------------- Données : types de textes réglementaires */
  --doc-loi: #4A5FBF;        --doc-loi-bg: #EEF0FF;
  --doc-decret: #2E7D32;     --doc-decret-bg: #E8F5E9;
  --doc-arrete: #8A5212;     --doc-arrete-bg: #FFF3E0;
  --doc-circulaire: #8E24AA; --doc-circulaire-bg: #F3E5F5;
  --doc-instruction: #00838F;--doc-instruction-bg: #E0F7FA;

  /* ---------------------------------------------------------------- Données : graphiques (palette unique, phase 3)
     Ordre fixe, jamais recyclé. Validée (validate_palette.js, toutes paires, fond blanc) :
     écart daltonisme 8,9 · vision normale 20,4. L'ocre est à 2,98:1 sur blanc : toujours
     doublé d'étiquettes visibles ou du tableau. Une série = --data-1 ; plusieurs = 1, 2, 3. */
  --data-1: #1F5FA8;   /* bleu institutionnel */
  --data-2: #C68A12;   /* ocre (or de la charte, assombri pour les marques) */
  --data-3: #1B8A5A;   /* émeraude */
  --data-grid: rgba(11,29,58,0.08);  /* filets de grille, pleins et discrets */

  /* ---------------------------------------------------------------- Décor (à rendre monochrome en phase 2) */
  --deco-blue: #6391FF;      --deco-coral: #E86C52;
  --slide-blue: #1B4D7F;     --slide-violet: #5B2A8C;     --slide-brick: #B4543B;
  --drs-teal: #1F7A8C;       --drs-teal-dark: #14525F;    --drs-teal-mid: #15596B;

  /* ---------------------------------------------------------------- Typographie */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --fs-caption: 0.8125rem;                                   /* 13 px — étiquettes en capitales */
  --fs-small: 0.875rem;                                      /* 14 px — métadonnées */
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);        /* 16 → 17 px */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);     /* 18 → 20 px — chapôs */
  --fs-h4: 1.25rem;                                          /* 20 px */
  --fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);         /* 22 → 24 px */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);           /* 28 → 40 px */
  --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);           /* 36 → 56 px */
  --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.6;

  /* ---------------------------------------------------------------- Espacements (base 4 px) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* ---------------------------------------------------------------- Rayons : 3 tailles + pilule
     Les cercles (50 %) et les formes asymétriques voulues (bulles, épingles) restent en dur. */
  --radius-sm: 4px;      /* étiquettes, badges, petites pastilles */
  --radius-md: 10px;     /* boutons carrés, champs, vignettes, icônes */
  --radius-lg: 16px;     /* cartes, panneaux, encadrés */
  --radius-pill: 999px;  /* boutons et étiquettes en pilule */

  /* ---------------------------------------------------------------- Ombres : 3 niveaux d'élévation (teinte marine)
     Les halos dorés, anneaux et ombres fortes sur fond sombre sont des effets ponctuels, hors échelle. */
  --shadow-sm: 0 1px 3px rgba(11,29,58,0.06);    /* au repos : cartes, champs */
  --shadow-md: 0 4px 20px rgba(11,29,58,0.08);   /* surélevé : survol, encadrés */
  --shadow-lg: 0 12px 40px rgba(11,29,58,0.12);  /* flottant : menus, panneaux, survol marqué */

  /* ---------------------------------------------------------------- Mouvement */
  --dur-fast: 120ms;  /* micro-interactions (survol, appui) */
  --dur-base: 200ms;  /* changements d'état */
  --dur-slow: 320ms;  /* ouvertures, apparitions */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Ce qu'un survol a le droit d'animer (remplace « transition: all », qui animait aussi l'anneau de focus) */
  --transition-ui: color, background-color, border-color, box-shadow, transform, opacity, filter;

  /* ---------------------------------------------------------------- Couches (z-index globaux)
     Les empilements internes à un composant (-1 à 10) et ceux de la carte Leaflet
     (légende 500, marqueur survolé 1000, à comparer aux volets Leaflet 400-1000) restent en dur. */
  --z-dropdown: 100;        /* sous-menus de navigation */
  --z-rail: 200;            /* rail flottant des pages de données */
  --z-header: 1000;         /* en-tête collant */
  --z-overlay: 1000;        /* recherche plein écran : même couche, placée après l'en-tête dans le DOM */
  --z-menu-backdrop: 1090;  /* voile du menu mobile */
  --z-menu: 1100;           /* menu mobile */
  --z-menu-toggle: 1110;    /* bouton burger au-dessus du menu ouvert */
  --z-modal: 9000;          /* visionneuse de documents */
  --z-chatbot: 9990;
  --z-skip: 9999;           /* lien d'évitement, toujours au-dessus */

  /* ---------------------------------------------------------------- Points de rupture (référence ; les @media ne lisent pas les variables)
     Seules valeurs autorisées dans les @media (max-width) :
     sm 640px (téléphones) · md 768px (tablette portrait) · lg 1024px (tablette paysage, menu burger) · xl 1280px (petits portables)
     Le site reste écrit du bureau vers le mobile ; la bascule « mobile d'abord » se fera composant par composant. */
}