/* Jetons de l'interface (cahier des charges v2.4, section 6).
   Couleurs de la charte IDM, couleurs d'état validées, et deux teintes dérivées :
   #F0F3F8, fond de page du thème clair (Gris bleuté clair #D5DEEC à 35 % sur blanc), et
   #2E3C62, survol des cards en thème sombre (Bleu ardoise #1C2B54 avec 8 % de blanc).
   La hiérarchie passe par les fonds, pas par les traits. Chaque paire texte / fond est
   vérifiée par « npm run check:contrast ».
   Le thème est posé sur <html data-theme="light|dark"> par /js/theme-boot.js. */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --c-page: #F0F3F8;            /* fond de page : #D5DEEC à 35 % sur blanc */
  --c-surface: #FFFFFF;         /* panneaux, champs, palette */
  --c-card: #FFFFFF;            /* cards blanches sur le fond de page */
  --c-card-hover: #D5DEEC;      /* survol d'une card */
  --c-hover: #D5DEEC;           /* survol d'un filtre, d'un bouton discret */
  --c-option-active: #D5DEEC;   /* option sélectionnée de la palette */
  --c-btn-secondary: #D5DEEC;   /* bouton secondaire, choix non sélectionné */
  --c-btn-secondary-text: #2944C8;
  --c-zone: #D5DEEC;
  --c-text: #342D42;
  --c-text-secondary: #342D42;  /* même couleur : aucune teinte plus claire n'atteint 4,5:1 */
  --c-action: #2944C8;          /* Bleu : boutons, liens, filtre actif */
  --c-on-action: #FFFFFF;
  --c-link: #2944C8;
  --c-star: #2944C8;            /* étoile de favori active */
  --c-border: #D5DEEC;          /* séparateurs (rares) */
  --c-border-strong: #8489B5;   /* contours des champs de formulaire */
  --c-focus: #2944C8;
  --c-header: #FFFFFF;
  --c-tag-bg: #D5DEEC;
  --c-tag-text: #342D42;
  --c-message-bg: #FFFFFF;
  --c-backdrop: #070E24;        /* fond derrière la palette (avec opacité) */
  --c-error: #B42318;
  --c-success: #067647;
  --c-warning: #B54708;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-page: #070E24;            /* Bleu nuit */
  --c-surface: #1C2B54;         /* Bleu ardoise */
  --c-card: #1C2B54;
  --c-card-hover: #2E3C62;      /* Bleu ardoise avec 8 % de blanc (teinte dérivée) */
  --c-hover: #1C2B54;
  --c-option-active: #070E24;   /* la palette est Bleu ardoise : l'option active passe en Bleu nuit */
  --c-btn-secondary: #2E3C62;   /* visible sur la page (Bleu nuit) comme sur un panneau (Bleu ardoise) */
  --c-btn-secondary-text: #FFFFFF;
  --c-zone: #1C2B54;
  --c-text: #FFFFFF;
  --c-text-secondary: #D5DEEC;
  --c-action: #29B6C8;          /* Cyan, texte Bleu nuit */
  --c-on-action: #070E24;
  --c-link: #29B6C8;
  --c-star: #29B6C8;
  --c-border: #8489B5;
  --c-border-strong: #8489B5;
  --c-focus: #29B6C8;
  --c-header: #070E24;
  --c-tag-bg: #070E24;
  --c-tag-text: #D5DEEC;
  --c-message-bg: #1C2B54;
  --c-backdrop: #070E24;
  --c-error: #F97066;
  --c-success: #47CD89;
  --c-warning: #FDB022;
}

:root {
  --font: 'Montserrat', system-ui, sans-serif;
  /* Arrondis autorisés : 12 px (cards), 10 px (icônes), 8 px (boutons, champs, menus),
     4 px (petits éléments), pastille complète (filtres, étiquettes) et rond (avatars). */
  --radius-card: 12px;
  --radius-icon: 10px;
  --radius-control: 8px;
  --radius-small: 4px;
  --radius-pill: 999px;
  --radius: var(--radius-control);
  --touch: 44px;
  --speed: 160ms;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --container: 1680px;
}