/* ================================================================
   STRATEON LAB — tokens.css · SOURCE UNIQUE DE VÉRITÉ
   ----------------------------------------------------------------
   Direction artistique « Laiton » v1.0 (22/08/2026).
   Référence normative : claude/DA-STRATEON-LAB.md

   Avant ce fichier, trois blocs :root vivaient en parallèle
   (base.css, index.html, membre.html) avec SEPT jetons portant le
   même nom et deux valeurs différentes — dont --ink, --mut, --mut2
   et l'accent de marque. Une correction de couleur devait être
   faite deux fois, dans deux fichiers de nature différente, sans
   qu'aucun mécanisme ne signale l'oubli.

   Règle : un nom, une valeur, un fichier. Toute couleur ajoutée ici
   DOIT avoir été mesurée sur le rendu (composition alpha comprise),
   jamais estimée à l'œil — deux valeurs sont déjà tombées sous le
   seuil AA par estimation (#66707F à 3,77 et #7F7A70 à 4,42).
   ================================================================ */

:root{
  /* ---- socle : gris chauds, jamais noir pur ------------------- */
  --g0:#12110E;   /* fond de page */
  --g1:#191713;   /* surface : cartes, panneaux */
  --g2:#201E19;   /* surface haute : survol, ligne active, FOND DE LECTURE */
  --g3:#2C2A24;   /* filet standard */
  --g4:#3A372E;   /* filet appuyé, graduation, bordure de champ */

  /* ---- encres (contrastes mesurés sur --g0) ------------------- */
  --ink:#EAE6DC;    /* 15,15:1 — titres, chiffres, interface */
  --read:#D9D4C8;   /* 12,77:1 — TEXTE SUIVI LONG uniquement */
  --mut:#9C958A;    /*  6,37:1 — secondaire, libellés */
  --mut2:#8B8579;   /*  5,15:1 — tertiaire, sources, mentions */

  /* ---- accent unique : le laiton ------------------------------ */
  --ac:#C9A227;                 /* 7,80:1 */
  --ac-d:#6E5A16;               /* bordure d'accent, état actif */
  --ac-w:rgba(201,162,39,.10);  /* voile d'accent, fond de zone active */
  --ac-on:#171203;              /* 7,72:1 — texte posé SUR le laiton */
  --ac-h:#D7B033;               /* survol du bouton plein */

  /* ---- sémantique, rare -------------------------------------- */
  --warn:#D98A4B;   /* 6,91:1 — seuil, avertissement, prix courant */
  --dang:#E2687A;   /* 5,84:1 — liquidation, erreur */
  --up:#C9A227;     /* hausse — GRAPHIQUE */
  --dn:#B5605A;     /* baisse — GRAPHIQUE UNIQUEMENT (4,30:1) */
  --dn-tx:#D07A6D;  /* baisse — TEXTE (6,01:1) */

  /* ---- typographie ------------------------------------------- */
  --disp:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- espacement, base 4 ------------------------------------ */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:18px; --s5:26px;
  --s6:34px; --s7:48px; --s8:64px; --s9:90px;

  /* ---- rayon : UN SEUL --------------------------------------- */
  --r:3px;      /* partout */
  --r-mini:2px; /* exception unique : pastilles du rail */

  /* ---- mouvement --------------------------------------------- */
  --e:cubic-bezier(.2,.7,.3,1);
  --e-cran:cubic-bezier(.32,1.5,.6,1);  /* le cran mécanique */
  --t-hover:170ms; --t-cran:170ms; --t-view:200ms; --t-draw:1400ms;
}

/* ================================================================
   CONTRAINTES DE SURFACE — issues des mesures, opposables
   ----------------------------------------------------------------
   Sur --g3 : interdits --mut2 (3,91) et --dang (4,44).
   Sur --g4 : interdits --mut2 (3,24), --mut (4,01), --warn (4,35),
              --dang (3,68), --dn-tx (3,79).
              Seuls --ink, --read et --ac sont autorisés en texte.
   --dn #B5605A est GRAPHIQUE (4,30) : toute variation négative
   écrite en toutes lettres emploie --dn-tx.
   ================================================================ */

/* ================================================================
   LA GRADUATION — le seul signe propriétaire (DA §4)
   Trois échelles, pas quatre. Les repeating-linear-gradient
   ci-dessous ne sont pas un effet : ils CONSTRUISENT la géométrie
   de la réglette. C'est la seule dérogation à l'interdit du dégradé.
   ================================================================ */

/* — Échelle 1 : le filet horizontal — */
.gr{position:relative;height:13px}
.gr::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--g3)}
.gr::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background-image:repeating-linear-gradient(90deg,var(--g4) 0 1px,transparent 1px 10px)}
.gr i{position:absolute;left:0;right:0;top:0;height:9px;
  background-image:repeating-linear-gradient(90deg,var(--g4) 0 1px,transparent 1px 50px)}

/* — Échelle 2 : la réglette latérale de carte — */
/* Le seul endroit où la graduation passe au laiton, et uniquement
   sous le doigt ou au clavier. Application directe de P2. */
.gedge{position:absolute;left:0;top:0;bottom:0;width:9px;pointer-events:none}
.gedge::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--g3)}
.gedge::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background-image:repeating-linear-gradient(180deg,var(--g4) 0 1px,transparent 1px 10px)}
.card:hover .gedge::after,
.card:focus-within .gedge::after,
.g:hover .gedge::after,
.g:focus-within .gedge::after{
  background-image:repeating-linear-gradient(180deg,var(--ac) 0 1px,transparent 1px 10px)}

/* — Échelle 3 : la barre de progression graduée — */
.prog{position:relative;height:4px;background:var(--g1);border-radius:var(--r);overflow:hidden}
.prog::after{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,var(--g4) 0 1px,transparent 1px 7px)}
.prog i{display:block;height:100%;background:var(--ac);border-radius:var(--r)}

/* ================================================================
   FOCUS — identique partout, non négociable (DA §8)
   Le double liseré garantit la visibilité quelle que soit la
   couleur de fond sous l'élément.
   ================================================================ */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 1px var(--g0),0 0 0 2px var(--ac);
  border-radius:var(--r);
}

/* ================================================================
   MOUVEMENT RÉDUIT — coupe tout (DA §9, R9.3)
   Le CSS ne suffit pas : les boucles JavaScript testent aussi
   la préférence avant de démarrer. Voir js/dial.js.
   ================================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ================================================================
   CHIFFRES — tabulaires par défaut (DA §7, R7.1)
   Sans cela, une valeur qui se met à jour fait sautiller la mise
   en page : c'est le signe visuel le plus sûr d'un outil amateur.
   ================================================================ */
.mono,.num,.tab{font-family:var(--mono);font-variant-numeric:tabular-nums}