/* ============================================================
   DAVID JOLY — TOKENS
   Source de vérité unique : site (pages claires) + diagnostic (sombre).
   Valeurs alignées sur « Diagnostic en ligne.html » (navy, accent, IBM Plex).
   Importer en tête de la feuille de styles :  @import "tokens.css";
   (ou <link rel="stylesheet" href="tokens.css"> avant le CSS du site)
   Les polices IBM Plex se chargent à part :
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   ============================================================ */

:root{
  /* ───────── COULEURS ───────── */

  /* Fonds sombres — diagnostic, hero, footer */
  --navy-900:#0F1F3D;   /* fond dominant sombre (page diagnostic) */
  --navy-800:#16294D;   /* cartes / blocs sur fond sombre */
  --navy-700:#1B305A;   /* survol / surface relevée sur fond sombre (options) */
  --navy-950:#0B1830;   /* footer, champs de formulaire sombres */

  /* Fonds clairs — pages informatives */
  --paper:#FCFAFF;      /* fond de page (blanc lavande) */
  --white:#FFFFFF;      /* cartes / modules clairs */
  --sand:#F1EBE0;       /* section de respiration, encart chaud */

  /* Texte sur fond clair */
  --ink:#0F1F3D;        /* titres */
  --ink-body:#1A2436;   /* encre courante */
  --body:#3A3A36;       /* paragraphes longs */
  --muted:#5B5950;      /* texte secondaire (gris chaud) */
  --muted-2:#8A877D;    /* légendes, métadonnées */

  /* Texte sur fond sombre */
  --on-navy:#FFFFFF;
  --on-navy-strong:rgba(255,255,255,.86);  /* corps de texte sur navy */
  --on-navy-soft:#9DB8DE;                 /* atténué clair */
  --on-navy-muted:rgba(255,255,255,.62);
  --eyebrow-dark:#7FA3D6;                  /* eyebrow / label sur navy */

  /* Filets (hairlines) */
  --line:rgba(15,31,61,.14);              /* sur fond clair */
  --line-soft:rgba(15,31,61,.10);
  --line-dark:rgba(255,255,255,.12);      /* sur fond sombre */
  --line-soft-dark:rgba(255,255,255,.08); /* filet doux sur fond sombre (diagnostic) */

  /* Accent */
  --accent:#4D7CC7;        /* CTA, liens, numéros, progression, filets actifs */
  --accent-hover:#3F6CB5;  /* survol sur fond clair */
  --accent-hover-d:#5D8BD6;/* survol sur fond sombre */
  --on-accent:#FFFFFF;     /* texte sur bouton accent (blanc, meilleur contraste que navy) */

  /* Statuts — barres de score & tags */
  --green:#3E9C77;  --green-tint:rgba(62,156,119,.18);  --green-ink:#7FD3AE;
  --amber:#D6A23E;  --amber-tint:rgba(214,162,62,.18);  --amber-ink:#E3C178;
  --red:#C75B45;    --red-tint:rgba(199,91,69,.20);     --red-ink:#E69683;
  /* variantes texte foncé pour tags sur fond clair */
  --green-on-light:#19774E;
  --amber-on-light:#9A7222;
  --red-on-light:#B04A36;

  /* ───────── TYPOGRAPHIE ───────── */
  --font-serif:'IBM Plex Serif',Georgia,serif;       /* titres, w500 */
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* tailles — rem (base 16px) · commentaire = px · line-height · graisse */
  --fs-display:3.5rem;    /* 56px · lh 1.05 · w500 — hero        */
  --fs-h1:2.5rem;         /* 40px · lh 1.12 · w500               */
  --fs-h2:1.75rem;        /* 28px · lh 1.20 · w500               */
  --fs-h3:1.375rem;       /* 22px · lh 1.25 · w500               */
  --fs-body-l:1.1875rem;  /* 19px · lh 1.65 · w400 — chapô       */
  --fs-body:1.0625rem;    /* 17px · lh 1.60 · w400 — corps       */
  --fs-small:0.875rem;    /* 14px · lh 1.50 — légende            */
  --fs-label:0.8125rem;   /* 13px mono · ls .2em · UPPERCASE     */

  /* line-heights */
  --lh-display:1.05;
  --lh-tight:1.12;
  --lh-snug:1.25;
  --lh-body:1.6;
  --lh-lede:1.65;

  /* graisses */
  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;

  /* letter-spacing */
  --ls-display:-0.02em;   /* gros titres serif */
  --ls-title:-0.01em;     /* h2 / h3          */
  --ls-label:0.2em;       /* eyebrow mono     */

  /* ───────── ESPACEMENT (base 8) ───────── */
  --sp-1:4px;    --sp-2:8px;    --sp-3:12px;   --sp-4:16px;
  --sp-6:24px;   --sp-8:32px;   --sp-12:48px;  --sp-16:64px;
  --sp-24:96px;  --sp-32:128px;

  --content-max:1200px;        /* largeur de contenu max          */
  --gutter:32px;               /* gouttière de grille 12 colonnes */
  --section-pad-y:80px;        /* padding vertical de section (desktop) */
  --section-pad-x:56px;        /* padding horizontal de section (desktop) */

  /* ───────── RAYONS ───────── */
  --radius-sm:2px;             /* défaut : boutons, cartes, champs (angles nets) */
  --radius-pill:999px;         /* tags, barres */

  /* ───────── OMBRES ───────── */
  --shadow-card:0 1px 3px rgba(15,31,61,.06);    /* carte sur clair   */
  --shadow-card-d:0 1px 3px rgba(0,0,0,.18);     /* carte sur sombre  */
  --shadow-raise:0 4px 16px rgba(15,31,61,.10);  /* élévation / modale */

  /* ───────── BREAKPOINTS (référence — à reporter dans les @media) ───────── */
  /* mobile  : < 768px
     tablette: 768px – 1023px
     desktop : >= 1024px */
  --bp-mobile:767px;
  --bp-tablet:1023px;

  /* ───────── MOUVEMENT ───────── */
  --transition:.12s ease;        /* micro-interactions : hover, focus, options */
  --transition-slow:.4s ease;    /* transitions amples : barres de progression / score */

  /* ───────── PROFONDEUR (z-index) ───────── */
  --z-base:1;
  --z-nav:100;        /* navigation collante */
  --z-overlay:200;    /* voile / menu mobile plein écran */
  --z-modal:300;      /* modale / dialogue */

  /* ───────── ÉTAT DÉSACTIVÉ ───────── */
  --disabled-bg:rgba(15,31,61,.12);   /* fond de bouton/champ désactivé (sur clair) */
  --disabled-ink:rgba(15,31,61,.40);  /* texte désactivé (sur clair) */
  --disabled-opacity:.5;              /* alternative : opacité sur l'élément entier */

  /* ───────── DIVERS ───────── */
  --focus-ring:2px solid var(--accent);   /* :focus-visible { outline:var(--focus-ring); outline-offset:3px } */
  --tap-min:44px;                          /* cible tactile minimale */
}