/* Les jetons de couleur de Kickalys : un fichier, trois faces.
 *
 * ─── POURQUOI ICI, ET POURQUOI CES VALEURS ──────────────────────────────────
 *
 * L'audit du 30/09/2026 (UX-07) : trois vocabulaires de jetons pour trois
 * faces, des valeurs voisines mais différentes. La console appelait `--carte`
 * un `#0E1828` que la vitrine appelait `--carte` à `#101B2E` ; le blanc du
 * texte valait `#F4F7FC` d'un côté et `#F2F5FA` de l'autre ; `--hair` était un
 * filet à 7 % dans la console et la bordure à 3:1 de l'application. Une
 * évolution de marque se corrigeait à trois endroits, et deux mille replis
 * `var(--x,#hex)` recopiaient la palette dans l'application.
 *
 * La référence est la palette NUIT de l'application (`themes.nuit`, dans
 * `site/logique.js`), réglée pour le contraste par #205 et mesurée depuis par
 * axe. Ce fichier en est la copie, au caractère près, et
 * `outils/jetons.test.mjs` le vérifie : un jeton de plus ou de moins, une
 * valeur qui bouge d'un seul côté, et l'épreuve rougit.
 *
 * Il vit dans `admin/` pour la même raison que `reseau.js` et `tableur.js` : la
 * console est servie telle quelle depuis ce dossier. L'application l'emprunte
 * (`site/serveur.js` en développement, `construire.sh` pour la mise en ligne),
 * la vitrine aussi (`construire-vitrine.sh`, qui le pose dans ses deux pages
 * d'entrée plutôt que de leur coûter une requête).
 *
 * ─── CE QUE CE FICHIER NE FAIT PAS ─────────────────────────────────────────
 *
 * Le thème clair de l'application et l'accent propre à chaque club ne sont pas
 * ici : la logique les pose sur la racine du document à l'ouverture
 * (`applyTheme`), et un style posé sur l'élément l'emporte sur ce fichier. Ce
 * qu'il donne à l'application, c'est la nuit AVANT que la logique tourne : le
 * premier affichage, et la page entière si un script tombe. Les replis écrits
 * à côté de chaque jeton tenaient ce rôle ; ils sont partis.
 *
 * Les jetons propres à une seule face (les surfaces de la console, les polices
 * et la marge de la vitrine) restent dans la face, sous des noms qui ne
 * croisent aucun de ceux-ci.
 */
:root{
  --bg:#080F1C;
  --card1:rgba(255,255,255,.055);
  --card2:rgba(255,255,255,.015);
  --solid:#101B2E;
  --hair:rgba(255,255,255,.34);
  --ink:#F2F5FA;
  --mute:#93A3BC;
  --accent:#2C6BF2;
  --accentSoft:#8FB4FF;
  --bleu:#8FB4FF;
  --voile:#FFFFFF;
  --mute2:#7888A3;
  --lossText:#F5A9B2;
  --inkDoux:#B9C6DA;
  --or:#E9CE8C;
  --orFonce:#8A6A22;
  --wash:rgba(44,107,242,.16);
  --brass:#C8A253;
  --inkOnBrass:#101B2E;
  --win:#4BD6A2;
  --loss:#F5717F;
  --brassRvb:200,162,83;
  --ok:#6FD49B;
  --jaune:#E8C34A;
  --toastErr:#2A1620;
  --toastInfo:#141C2C;
  --toastInfoTexte:#E4D2AE;
  --waTexte:#43D97B;
  --surTerrain:#B9C6DA;
  --terrainRvb:255,255,255;
  --laitonPris:#F4E2B5;
  --laitonPrisHaut:#2B2616;
  --laitonPrisBas:#1A1710;
  --laitonClair:#E3C27A;
  --barreHaut:rgba(6,12,23,.94);
  --barreBas:rgba(6,12,23,.82);
  --carteHaut:#121E33;
  --carteBas:#0C1526;
  --caseCreuse:#0B1424;
  --verre:rgba(8,15,28,.88);
  --shadow:0 24px 48px -34px rgba(0,0,0,.95);
  --voile015:rgba(255,255,255,.015);
  --voile020:rgba(255,255,255,.02);
  --voile025:rgba(255,255,255,.025);
  --voile030:rgba(255,255,255,.03);
  --voile035:rgba(255,255,255,.035);
  --voile040:rgba(255,255,255,.04);
  --voile045:rgba(255,255,255,.045);
  --voile050:rgba(255,255,255,.05);
  --voile060:rgba(255,255,255,.06);
  --voile070:rgba(255,255,255,.07);
  --voile080:rgba(255,255,255,.08);
  --voile100:rgba(255,255,255,.1);
  --voile120:rgba(255,255,255,.12);
  --voile140:rgba(255,255,255,.14);
  --voile180:rgba(255,255,255,.18);
  --voile500:rgba(255,255,255,.5);
  --voile620:rgba(255,255,255,.62);
  --accentInk:#FFFFFF;
}

/* ═══ LE SOCLE HORS COULEUR (audit UI du 09/10/2026, 07-systeme.md) ════════════
 * Les tailles, rayons, durées, courbes et couches des trois faces, écrits une
 * fois ; `outils/socle.test.mjs` refuse dans la console et la vitrine ce qui
 * s'écrit hors d'eux. L'application les hérite sans s'en servir encore : rien
 * ici ne la change d'un pixel. Les règles de passage (la marche la plus
 * proche, le cas d'un mi-chemin, les exceptions) sont dans 07-systeme.md.
 * Les quatre ors par rôle sont ceux de la palette : `--brass` (le geste),
 * `--laitonClair` (dégradé, survol), `--or` (l'or qui s'écrit), `--orFonce` ;
 * le vert du succès est `--win`. Pas d'alias : calculé sur `:root`, il
 * resterait en craie sur la porte, qui est en nuit. Pour la même raison, les
 * jetons qui en lisent un autre (`--focus`) sont reposés sur `body` et
 * `.porte`, là où une face change de ton sous la racine.
 */
:root{
  /* Les polices ; `--f-chiffre` et `--f-marque` là où leur fichier est chargé. */
  --f-titre:'Barlow Condensed',ui-sans-serif,system-ui,sans-serif;
  --f-corps:Barlow,ui-sans-serif,system-ui,sans-serif;
  --f-chiffre:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-marque:Michroma,'Barlow Condensed',ui-sans-serif,system-ui,sans-serif;
  /* Les dix tailles : 12, 13, 14, 16, 18, 20, 24, 32 et 40 pixels, et l'affiche. */
  --t-1:.75rem;
  --t-2:.8125rem;
  --t-3:.875rem;
  --t-4:1rem;
  --t-5:1.125rem;
  --t-6:1.25rem;
  --t-7:1.5rem;
  --t-8:2rem;
  --t-9:2.5rem;
  --t-affiche:clamp(2rem,8.6vw,3.875rem);
  /* Les interlignages, et l'interlettrage unique des capitales. */
  --il-serre:1.05;
  --il-titre:1.2;
  --il-corps:1.5;
  --il-lecture:1.6;
  --capitales:.12em;
  /* L'espace, par quatre et par huit. */
  --e-1:4px;
  --e-2:8px;
  --e-3:12px;
  --e-4:16px;
  --e-5:24px;
  --e-6:32px;
  --e-7:48px;
  --e-8:64px;
  /* Les cinq rayons. */
  --r-1:8px;
  --r-2:12px;
  --r-3:16px;
  --r-4:24px;
  --r-pilule:999px;
  /* Les ombres : la craie de la console change ces deux-là. */
  --ombre-rvb:0,0,0;
  --ombre-force:1;
  /* Quatre durées (160 ms, le rythme de la maison) ; le ressort du brassard. */
  --d-1:120ms;
  --d-2:160ms;
  --d-3:240ms;
  --d-4:360ms;
  --c-arrivee:cubic-bezier(.2,.8,.2,1);
  --c-depart:cubic-bezier(.4,0,1,1);
  --c-ressort:cubic-bezier(.2,.9,.3,1.4);
  /* Les couches. */
  --z-colle:20;
  --z-barre:100;
  --z-porte:200;
  --z-feuille:300;
  --z-toast:400;
  --z-alerte:1000;
  /* Le focus : l'anneau laiton, à deux pixels du bord. */
  --focus-decale:2px;
}
:root,body,.porte{
  --focus:2px solid var(--brass);
  --halo-laiton:0 14px 28px -16px rgba(var(--brassRvb),.9);
  --ombre-1:0 1px 2px rgba(var(--ombre-rvb),calc(.4 * var(--ombre-force)));
  --ombre-2:var(--shadow);
  --ombre-3:0 32px 64px -24px rgba(var(--ombre-rvb),calc(.9 * var(--ombre-force)));
}

/* L'anneau et le mouvement réduit communs. Un `outline`, que le contraste
   élevé de Windows repeint ; l'application pose les deux mêmes règles. */
:focus-visible{outline:var(--focus);outline-offset:var(--focus-decale)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Le bouton laiton, une forme (P1-3) : pilule, dégradé, 52 px au pouce, 46 en
   `data-socle="dense"`, halo, enfoncement. Seulement sous `<html data-socle>`,
   que l'application ne porte pas encore ; `:where` lui garde la précision
   d'une classe. */
:where(:root[data-socle]) .bouton-laiton{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:52px;padding:0 var(--e-5);border:0;border-radius:var(--r-pilule);color:var(--inkOnBrass);background:linear-gradient(180deg,var(--laitonClair),var(--brass));box-shadow:var(--halo-laiton);font-family:var(--f-titre);font-size:var(--t-3);font-weight:700;letter-spacing:var(--capitales);text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;transition:filter var(--d-2) var(--c-arrivee),box-shadow var(--d-2) var(--c-arrivee),transform var(--d-1) var(--c-arrivee)}
:where(:root[data-socle]) .bouton-laiton:hover{filter:brightness(1.06);box-shadow:0 16px 30px -14px rgba(var(--brassRvb),.95)}
:where(:root[data-socle]) .bouton-laiton:active{transform:scale(.98)}
:where(:root[data-socle]) .bouton-laiton:disabled{opacity:.45;cursor:default;filter:none;box-shadow:none;transform:none}
:where(:root[data-socle="dense"]) .bouton-laiton{min-height:0;height:46px}