/* ============================================================================
   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;
}

/* Un mot plus large que sa colonne poussait la page entière en débordement
   horizontal : « d'approvisionnement » demande 317 px pour 268 px disponibles à
   320 px de large, dans un titre comme dans une liste. La règle s'applique à tout
   le document parce qu'aucune liste de mots concernés ne peut être tenue à jour ;
   elle ne coupe que lorsqu'un mot ne tient pas, jamais avant. */
body { overflow-wrap: break-word; }
@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:        #121212;
  --c-bg-alt:    #1a1a1a;
  --c-surface:   #1e1e1e;
  --c-surface-2: #242424;
  --c-line:      #303030;
  --c-line-soft: #262626;

  /* Le texte reprend le crème du fond clair, et non plus la teinte du logotype.
     Le sauge donnait au corps de texte une couleur de marque là où le lecteur
     attend une couleur de lecture ; le crème laisse la teinte au logotype et aux
     accents, ce qui les fait ressortir par contraste au lieu de se fondre.
     Mesuré : 17,19:1 sur --c-bg (contre 12,35 en sauge), 14,25:1 sur le fond le
     plus clair du thème. Les deux niveaux secondaires suivent le même virage,
     d'un gris chaud plutôt que vert, pour que la hiérarchie reste lisible. */
  --c-ink:       #f7f5f0;   /* 17.19:1 sur --c-bg */
  --c-ink-muted: #c9c4b8;   /* 10.77:1 sur --c-bg */
  --c-ink-dim:   #a5a096;   /*  5.96: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:  #5f6a55;

  /* ---------------------------------------------------------------------
     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:     #121212;  /* 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.

   Il exclut AUSSI les éléments marqués data-scheme="dark". Ce n'est pas un
   détail : les cartes de partage sont des IMAGES, produites par capture d'écran,
   et une image doit être identique quel que soit le réglage de la machine qui
   la fabrique. Sans cet attribut, Chromium — qui préfère le clair par défaut —
   rendait les cartes sur fond crème, avec le logotype clair dessus, donc
   invisible. Le contrôle automatique ne le voyait pas : il vérifiait les
   dimensions et la variété des teintes, pas le contraste du logo.

   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']):not([data-scheme='dark']) {
    color-scheme: light;

    --c-bg:        #f7f5f0;   /* crème franc — ni blanc, ni papier jauni */
    --c-bg-alt:    #ece6d9;
    --c-surface:   #fcfbf7;
    --c-surface-2: #f1eee6;
    --c-line:      #ddd6c7;
    --c-line-soft: #e8e3d7;

    --c-ink:       #3f4144;   /* 13,91:1 sur --c-bg-alt */
    --c-ink-muted: #45483f;   /*  6,51:1 */
    --c-ink-dim:   #53564c;   /*  5,08:1 */
    --c-hairline:  #a8a496;   /* bordures uniquement, jamais de texte */

    --c-brand:            #5d6a4d;  /* 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:     #4d5a3f;  /* accent de texte appuyé */
    --c-brand-deep:       #3a4530;
    --c-brand-ink:        #121212;  /* 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: #5d6a4d;

    --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);
  /* --c-brand est calibré pour du TEXTE sur le fond de page ; employé comme fond
     sous l'encre sombre, il ne donne que 3,24:1. Les boutons utilisent depuis le
     début --c-brand-fill pour cet usage (5,75:1), le lien d'évitement non. */
  background: var(--c-brand-fill);
  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; }
}