/* ============================================================================
   ARCHIMÈDE — DESIGN TOKENS
   Source unique de vérité. Aucune valeur codée en dur dans les composants.

   Principe : le CONTRAT de tokens est identique pour les deux directions.
   Seules les valeurs changent, via [data-theme]. Un composant écrit une fois
   fonctionne dans les deux directions, et dans n'importe quel futur thème.

   Thèmes :  data-theme="instrument"  (fond sombre, instrument de mesure)
             data-theme="carte"       (fond clair, carte & cartographie)
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. POLICES — auto-hébergées, licence OFL, aucun appel tiers (RGPD & perf)
   Fichiers variables : une seule requête couvre toute la graisse.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrainsmono.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Besley';
  src: url('../fonts/besley.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Besley';
  src: url('../fonts/besley-italic.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. ÉCHELLE TYPOGRAPHIQUE, ESPACEMENTS, RAYONS, MOUVEMENT
   Communs aux deux directions : ce sont les invariants du système.
   ------------------------------------------------------------------------ */

:root {
  /* --- Familles (surchargées par thème) --- */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Police des citations mises en exergue. Besley est la seule famille du
     projet à posséder une VÉRITABLE italique (besley-italic.woff2) : le
     système refuse l'italique synthétisée, pas celle-ci. */
  --font-quote: 'Besley', Georgia, serif;

  /* --- Échelle typographique fluide (min 320px → max 1440px) --- */
  --fs-display: clamp(2.5rem, 1.45rem + 4.7vw, 4.75rem);
  --fs-h1:      clamp(2rem, 1.42rem + 2.6vw, 3.25rem);
  --fs-h2:      clamp(1.55rem, 1.28rem + 1.2vw, 2.15rem);
  --fs-h3:      clamp(1.15rem, 1.07rem + 0.36vw, 1.375rem);
  --fs-lead:    clamp(1.06rem, 1rem + 0.3vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.79rem;
  --fs-label:   0.72rem;

  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-label: 0.11em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Espacements (base 4px) --- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2rem;
  --sp-xl:  3rem;
  --sp-2xl: 4.5rem;
  --sp-3xl: 6.5rem;
  --sp-4xl: 9rem;

  /* --- Rayons : quasi droits = registre technique, pas marketing --- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* --- Mise en page --- */
  --w-page: 1200px;
  --w-prose: 68ch;
  --w-narrow: 46ch;
  --gutter: clamp(1.15rem, 0.6rem + 2.2vw, 2.5rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Mouvement : court, sobre, désactivable --- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Plans --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 900;
  --z-toast: 1000;

  /* --- Focus clavier : toujours visible, jamais supprimé --- */
  --focus-w: 2px;
  --focus-offset: 3px;
}

/* ---------------------------------------------------------------------------
   3. PALETTE — DIRECTION A « L'INSTRUMENT »
   Sombre, densité d'information élevée, chiffres mis en avant.
   Contraste vérifié AA (≥ 4.5:1 texte courant, ≥ 3:1 grand texte & UI).
   ------------------------------------------------------------------------ */

/* La direction retenue est la palette par défaut : une page n'a plus besoin de
   déclarer data-theme pour être correctement colorée. La seconde palette reste
   disponible pour le document de référence, qui les montre toutes les deux. */
:root,
[data-theme='instrument'] {
  color-scheme: dark;

  --c-bg:        #0f1113;
  --c-bg-alt:    #14171a;
  --c-surface:   #1a1e22;
  --c-surface-2: #22272d;
  --c-line:      #2b3137;
  --c-line-soft: #22272c;

  --c-ink:       #f1f2ee;   /* 16.2:1 sur --c-bg */
  --c-ink-muted: #a6ada3;   /*  8.3:1 sur --c-bg */
  --c-ink-dim:   #8a9088;   /*  4.60:1 sur le fond le plus clair du thème (--c-surface-2) */
  /* Bordures et traits uniquement. Jamais de texte : le ratio serait de 2,99:1.
     Le contrôle tools/audit-render.py échoue si ce token porte du texte. */
  --c-hairline:  #6a7168;

  /* ---------------------------------------------------------------------
     CHARTE DE LA PLATEFORME
     Ces valeurs ne sont plus choisies : elles sont extraites du bundle de
     l'application (jetons `brand`, `success`, `warning`, `error`). Le radar du
     site et celui de la plateforme partagent donc la même source.

     Deux nuances là où le fond sombre l'exige : la plateforme est un outil
     clair, et deux de ses couleurs d'état n'atteignent pas 4,5:1 sur un fond
     sombre. On garde alors la couleur EXACTE pour le graphique — où le seuil
     WCAG est de 3:1 pour un objet graphique — et une variante éclaircie pour
     le texte, dont le seuil est de 4,5:1.
     --------------------------------------------------------------------- */

  --c-brand:         #84946f;  /* variante TEXTE du jeton `brand` (#788765) */
  --c-brand-graphic: #788765;  /* jeton `brand` de la plateforme, EXACT — pour le radar */
  --c-brand-strong:  #93a37a;
  --c-brand-deep:    #46503c;
  --c-brand-ink:     #0f1113;  /* texte posé sur --c-brand */
  /* Remplissages pleins : boutons, barres de progression, curseurs. Ils ne
     dépendent PAS du fond de page — un bouton sauge à texte sombre tient 5,81:1
     sur un fond sombre comme sur un fond crème. Les séparer de --c-brand, qui
     sert d'accentuation de TEXTE et doit s'assombrir sur fond clair, permet aux
     boutons de rester identiques dans les deux thèmes. */
  --c-brand-fill:       #84946f;
  --c-brand-fill-hover: #93a37a;

  /* Couleurs d'état : l'exact de la plateforme pour le graphique (seuil 3:1),
     une variante éclaircie pour le texte (seuil 4,5:1). Le fond le plus clair
     du thème, --c-surface-2, est la référence des deux calculs. */
  --c-ok:            #3ba241;  /* variante texte de `success` #2E7D32 */
  --c-ok-graphic:    #308234;  /* `success` éclairci au seuil graphique */
  --c-watch:         #ed6c02;  /* jeton `warning`, exact — passe pour le texte comme le graphique */
  --c-watch-graphic: #ed6c02;
  --c-risk:          #e06a6a;  /* variante texte de `error` #D32F2F */
  --c-risk-graphic:  #d32f2f;  /* jeton `error`, exact — 3,02:1, graphique */

  /* Surfaces de la plateforme, réutilisées pour le panneau de la boussole */
  --plat-surface:        #ffffff;
  --plat-surface-brand:  #f6f6f4;
  --plat-text:           #474c40;
  --plat-text-muted:     #666666;
  --plat-border-subtle:  #e2e6d8;
  --plat-border-muted:   #edf0e6;
  --plat-surface-subtle: #fafbf7;

  --c-ok-bg:    rgba(46, 125, 50, 0.14);
  --c-watch-bg: rgba(237, 108, 2, 0.14);
  --c-risk-bg:  rgba(211, 47, 47, 0.14);
  /* 15 % : c'est l'opacité de fond du radar de la plateforme (`bgOpacity: .15`) */
  --c-brand-bg: rgba(120, 135, 101, 0.15);

  --focus-ring: #93a37a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.5);

  /* Grain et grille : l'atmosphère d'un instrument, pas d'un template */
  --grid-line: rgba(255, 255, 255, 0.032);
  --grid-size: 56px;
}

/* ---------------------------------------------------------------------------
   3 bis. PALETTE CLAIRE — MÊME DIRECTION, FOND CRÈME

   Le thème suit la préférence du système, sans JavaScript : aucune requête,
   aucun cookie, aucun script. C'est ce qui permet à la page confidentialité de
   continuer d'affirmer qu'aucune requête n'est adressée à un service extérieur.

   Le sélecteur exclut la direction B, qui a sa propre palette claire : ici, seule
   la COULEUR change, la typographie et l'atmosphère de l'instrument sont
   conservées.

   Tous les jetons de couleur sont déclarés, sans exception. Un jeton omis
   garderait silencieusement sa valeur sombre — c'est pourquoi tools/qa.py
   compare désormais les deux palettes jeton par jeton.

   Contrastes mesurés sur --c-bg-alt (#efe9db), le fond le plus sombre du thème,
   qui est la référence la plus exigeante.
   ------------------------------------------------------------------------ */

@media (prefers-color-scheme: light) {
  :root:not([data-theme='carte']) {
    color-scheme: light;

    --c-bg:        #f6f2e8;   /* crème franc — ni blanc, ni papier jauni */
    --c-bg-alt:    #efe9db;
    --c-surface:   #fbf9f3;
    --c-surface-2: #f1ece0;
    --c-line:      #ddd6c4;
    --c-line-soft: #e7e1d2;

    --c-ink:       #1b1e1a;   /* 13,91:1 sur --c-bg-alt */
    --c-ink-muted: #4f5349;   /*  6,51:1 */
    --c-ink-dim:   #5f6359;   /*  5,08:1 */
    --c-hairline:  #a39e90;   /* bordures uniquement, jamais de texte */

    --c-brand:            #566046;  /* accent TEXTE : 5,49:1 sur --c-bg-alt */
    --c-brand-fill:       #84946f;  /* boutons : valeur du thème sombre, INCHANGÉE */
    --c-brand-fill-hover: #93a37a;
    --c-brand-graphic:    #788765;  /* jeton `brand` exact de la plateforme — radar, 3,45:1 */
    --c-brand-strong:     #3f4832;  /* accent de texte appuyé */
    --c-brand-deep:       #2f3626;
    --c-brand-ink:        #0f1113;  /* texte posé sur --c-brand-fill */

    /* Couleurs d'état : variante texte assombrie, et l'exact de la plateforme
       pour le graphique. `warning` fait exception — l'orange exact #ED6C02 ne
       donne que 2,78:1 sur le crème, sous le seuil graphique de 3:1 : il faut
       donc l'assombrir, et c'est la seule couleur de la charte que le fond clair
       oblige à modifier. */
    --c-ok:            #3f6349;  /* 5,61:1 */
    --c-ok-graphic:    #2e7d32;  /* `success` exact — 4,30:1 */
    --c-watch:         #a84a00;  /* 5,15:1 — passe pour le texte comme le graphique */
    --c-watch-graphic: #c25a00;  /* 3,95:1 */
    --c-risk:          #96402b;  /* 5,66:1 */
    --c-risk-graphic:  #d32f2f;  /* `error` exact — 4,45:1 */

    /* Surfaces de la plateforme : identiques dans les deux thèmes. Ce sont les
       surfaces de l'application, pas celles du site ; elles ne suivent pas la
       préférence du lecteur. */
    --plat-surface:        #ffffff;
    --plat-surface-brand:  #f6f6f4;
    --plat-text:           #474c40;
    --plat-text-muted:     #666666;
    --plat-border-subtle:  #e2e6d8;
    --plat-border-muted:   #edf0e6;
    --plat-surface-subtle: #fafbf7;

    --c-ok-bg:    rgba(63, 99, 73, 0.10);
    --c-watch-bg: rgba(168, 74, 0, 0.10);
    --c-risk-bg:  rgba(150, 64, 43, 0.10);
    /* 15 % : opacité de fond du radar de la plateforme (`bgOpacity: .15`) */
    --c-brand-bg: rgba(120, 135, 101, 0.15);

    --focus-ring: #566046;

    --shadow-sm: 0 1px 2px rgba(27, 30, 26, 0.07);
    --shadow-md: 0 6px 20px rgba(27, 30, 26, 0.10);
    --shadow-lg: 0 22px 60px rgba(27, 30, 26, 0.13);

    --grid-line: rgba(27, 30, 26, 0.045);
  }
}

/* ---------------------------------------------------------------------------
   4. PALETTE — DIRECTION B « LA CARTE »
   Clair, éditorial, papier. Serif de labeur + sans neutre.
   ------------------------------------------------------------------------ */

[data-theme='carte'] {
  color-scheme: light;

  --c-bg:        #fbfaf6;
  --c-bg-alt:    #f3f1e9;
  --c-surface:   #ffffff;
  --c-surface-2: #f7f5ee;
  --c-line:      #e3ded1;
  --c-line-soft: #ece8dd;

  --c-ink:       #16181a;   /* 16.4:1 sur --c-bg */
  --c-ink-muted: #55594f;   /*  7.0:1 sur --c-bg */
  --c-ink-dim:   #6a6e66;   /*  4.60:1 sur le fond le plus sombre du thème (--c-bg-alt) */
  /* Bordures et traits uniquement. Jamais de texte : le ratio serait de 2,20:1. */
  --c-hairline:  #a8a49a;

  --c-brand:        #5f6655;  /* sauge exacte du logo */
  --c-brand-strong: #3b4237;
  --c-brand-deep:   #2a322c;
  --c-brand-ink:    #fbfaf6;
  --c-brand-fill:       #5f6655;
  --c-brand-fill-hover: #3b4237;

  --c-ok:    #4a6d54;
  --c-watch:     #89671b;   /* corrigé : 4,43:1 sur --c-bg-alt, insuffisant pour du texte */
  --c-risk:  #a0452f;

  --c-ok-bg:    rgba(74, 109, 84, 0.09);
  --c-watch-bg: rgba(140, 106, 28, 0.1);
  --c-risk-bg:  rgba(160, 69, 47, 0.09);
  --c-brand-bg: rgba(95, 102, 85, 0.08);

  --focus-ring: #3b4237;

  --shadow-sm: 0 1px 2px rgba(22, 24, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(22, 24, 26, 0.08);
  --shadow-lg: 0 24px 64px rgba(22, 24, 26, 0.1);

  --grid-line: rgba(22, 24, 26, 0.045);
  --grid-size: 64px;
}

/* ---------------------------------------------------------------------------
   5. ADAPTATIONS PAR THÈME
   ------------------------------------------------------------------------ */

[data-theme='carte'] {
  --font-display: 'Besley', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --ls-display: -0.015em;
  --ls-heading: -0.01em;
  --lh-tight: 1.1;
}

/* Lisibilité des chiffres : alignement tabulaire systématique sur les données */
.tnum,
[data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------------------------------------------------------------------------
   6. SOCLE — reset minimal, respecté par les deux directions
   ------------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}

/* Une image portant width ET height en attributs conserve sa hauteur d'origine
   quand la largeur se réduit sous `max-width: 100%` : elle est alors DÉFORMÉE,
   pas recadrée. Mesuré avant correction, sur un écran de 360 px : la capture de
   l'accueil s'affichait en 308 x 600 px là où son ratio demandait 308 x 154.
   Les règles plus précises — barre de navigation, logotypes — gardent la main,
   leur spécificité étant supérieure à celle d'un sélecteur d'élément. */
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { text-decoration-color: currentColor; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Focus clavier : visible partout, y compris sur les fonds colorés */
:focus-visible {
  outline: var(--focus-w) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-xs);
}

::selection {
  background: var(--c-brand);
  color: var(--c-brand-ink);
}

/* Accessibilité — lien d'évitement */
.skip-link {
  position: absolute;
  left: var(--sp-sm);
  top: -4rem;
  z-index: var(--z-toast);
  padding: var(--sp-2xs) var(--sp-sm);
  background: var(--c-brand);
  color: var(--c-brand-ink);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-sm); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Mouvement réduit : on garde l'information, on retire l'animation */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body { background: #fff; color: #000; }
  .site-nav, .site-footer, .btn { display: none; }
}