/* ═══════════════════════════════════════════════════════════════════
   /shared/jetons.css — l'échelle commune des 13 pages d'agents
   ───────────────────────────────────────────────────────────────────
   POURQUOI CE FICHIER EXISTE
   Relevé du 18 septembre 2026, avant d'écrire une ligne : les treize
   pages portaient 311 rayons de bordure pour SEIZE valeurs distinctes
   (3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20 px) et 59
   ombres pour VINGT-QUATRE. Jusqu'à treize rayons différents sur une
   seule page.

   Personne ne les avait choisis : ils se sont accumulés carte après
   carte, chacun juste au moment où il a été écrit. C'est exactement la
   leçon des vingt-sept signatures d'export d'avant /shared/jeu-pied.js
   et des trente-huit invitations à signaler un bug d'avant
   /shared/jeu-bug.js — une valeur recopiée diverge au premier ajout, et
   personne ne s'en aperçoit.

   ⚠️ CE FICHIER NE POSE AUCUNE COULEUR D'ACCENT, ET C'EST VOULU.
   Les treize agents ont chacun la leur, et elle est leur identité : le
   vert de L'Appui, l'ambre du Coffre-fort, le violet du Menteur. Une
   uniformisation qui l'emporterait serait une perte, pas un gain. On
   range les FORMES, jamais les couleurs.

   Installation, une balise dans le <head> — AVANT le <style> de la page,
   qui garde ainsi la main sur tout ce qu'elle veut redéfinir :
       <link rel="stylesheet" href="/shared/jetons.css" />
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── LES RAYONS ────────────────────────────────────────────────────
     Cinq crans et la pilule, sur un rythme de 4 px exact. Les seize
     valeurs d'avant s'y rangent ainsi :

        3, 4, 5           →  --r-xs    ( 4px)  jauges, filets, puces
        6, 8, 9           →  --r-sm    ( 8px)  étiquettes, champs
        10, 11, 12, 13    →  --r-md    (12px)  boutons, bulles
        14, 15, 16        →  --r-lg    (16px)  cartes, panneaux
        18, 20            →  --r-xl    (20px)  grands blocs, fenêtres
        999               →  --r-pill

     ⚠️ LE CINQUIÈME CRAN N'EST PAS DU CONFORT, IL EST LE CRITÈRE. À
     quatre crans, un rayon de 3 px devenait 8 px : +5 px, soit une
     petite forme qui change de nature. À cinq, AUCUN ÉLÉMENT DU SITE
     NE BOUGE DE PLUS DE 2 PIXELS — et ça, ça se vérifie au navigateur
     au lieu de se plaider. C'est ce qui fait de cette migration un
     rangement contrôlable plutôt qu'une refonte qu'on espère juste.

     ⚠️ AUCUN CRAN NE CHANGE DE VALEUR : la migration est un pur
     rangement, à rendu identique, et c'est ce qui la rend vérifiable —
     on compare les rayons calculés au navigateur avant et après, et on
     exige ZÉRO écart. Une migration qui déplacerait en même temps
     qu'elle range ne se contrôle plus : on ne saurait pas distinguer un
     décalage voulu d'un décalage subi. Ce qui modernise vient après, et
     séparément (voir --r-xl plus bas).

     ⚠️ ET UN GRAND RAYON N'EST PAS TOUJOURS UN GRAND COIN. Trouvé au
     premier essai de migration : `padding: 9px 15px; border-radius:
     20px` fait une boîte de 38 px de haut — 20 px de rayon, c'est une
     PILULE, pas un coin arrondi. La ramener mécaniquement au cran du
     dessus l'aurait rendue visiblement moins ronde. Ces cas-là se
     reconnaissent en mesurant la hauteur rendue, jamais en lisant la
     feuille : ils sont passés à --r-pill, qui dit ce qu'ils sont.

     ⚠️ `border-radius: 50%` N'EST PAS UN RAYON DE CETTE ÉCHELLE et ne
     doit pas y être ramené. C'est un CERCLE — pastille de progression,
     puce, point de couleur —, et il reste rond quelle que soit la
     taille de sa boîte. Un `--r-lg` posé là ferait un carré aux coins
     mous dès que l'élément dépasse 44 px. Les 23 occurrences du site
     sont volontaires ; le contrôleur ne les compte pas. */

  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* Le cran de la modernisation, posé À LA MAIN et seulement sur les
     grands blocs — héros, panneaux, fenêtres. Un grand bloc un peu plus
     rond est ce qui distingue le plus nettement une mise en page de 2026
     d'une mise en page de 2020 ; appliqué à un bouton, le même geste le
     fait flotter. C'est pour ça qu'il ne sort PAS de la migration
     automatique : la taille de l'élément décide, et elle se mesure. */
  --r-2xl: 26px;


  /* ── LES OMBRES ────────────────────────────────────────────────────
     Trois crans, et ils disent une HAUTEUR, pas un flou :

        --sh-1   au repos      une carte posée sur la page
        --sh-2   en relief     un survol, un bloc qui flotte
        --sh-3   une fenêtre   une modale au-dessus d'un fond assombri

     ⚠️ CHAQUE OMBRE EST À DEUX COUCHES, et c'est le vrai levier de
     modernisation de ce fichier. Une ombre à un seul flou est ce qui
     fait qu'une carte a l'air « collée » : la vraie lumière produit un
     contact serré sous l'objet ET une diffusion large autour. Les 24
     ombres d'avant étaient toutes à une couche. Ça ne coûte rien —
     aucun octet de plus dans la page, le navigateur compose les deux
     dans la même passe.

     ⚠️ LA TEINTE EST UNE VARIABLE, PAS DU NOIR. Une ombre noire sur un
     fond crème vire au gris sale : l'œil attend une ombre teintée par
     ce qu'il y a autour. L'auteur l'avait déjà compris — on trouvait
     rgba(20,38,54,…) sur les pages bleues et rgba(54,34,24,…) sur les
     chaudes — mais écrit onze fois, à onze valeurs voisines. Une page
     redéfinit donc `--ombre-teinte` (en canaux nus « R,G,B », c'est ce
     qui permet de la faire varier en opacité) et ses trois crans
     suivent. */

  --ombre-teinte: 24, 28, 36;   /* neutre légèrement froid, par défaut */

  --sh-1:
    0 1px 2px  rgba(var(--ombre-teinte), .05),
    0 2px 8px  rgba(var(--ombre-teinte), .06);

  --sh-2:
    0 2px 4px  rgba(var(--ombre-teinte), .05),
    0 8px 24px rgba(var(--ombre-teinte), .09);

  --sh-3:
    0 6px 12px rgba(var(--ombre-teinte), .10),
    0 24px 64px rgba(var(--ombre-teinte), .24);


  /* ── LE RYTHME ─────────────────────────────────────────────────────
     Une base de 4 px. Disponible pour ce qu'on écrit à partir
     d'aujourd'hui ; les marges existantes n'ont PAS été migrées.

     ⚠️ C'est un choix, pas un oubli. Migrer les centaines de marges et
     de rembourrages des treize pages, c'était des centaines d'occasions
     de décaler une mise en page déjà réglée — pour un gain que
     personne ne verrait, là où les rayons et les ombres se voient au
     premier coup d'œil. On ne resserre pas ce qui n'est pas lâche. */

  --e-1:  4px;
  --e-2:  8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
}


/* ── LES PAGES SOMBRES ───────────────────────────────────────────────
   Une seule des treize l'est : /jeux/coffre-fort/ (#283042). Sur un
   fond sombre, une ombre ne se voit plus — il n'y a pas de blanc à
   assombrir. On monte donc l'opacité et on va chercher un noir franc,
   qui est ici la seule teinte qui creuse encore.

   ⚠️ Une page sombre porte `data-theme-sombre` sur son <html>, elle ne
   se reconnaît pas à son nom : le jour où une deuxième passe au sombre,
   il n'y a rien à ajouter ici. */

html[data-theme-sombre] {
  --ombre-teinte: 0, 0, 0;

  --sh-1:
    0 1px 2px  rgba(var(--ombre-teinte), .20),
    0 2px 8px  rgba(var(--ombre-teinte), .24);

  --sh-2:
    0 2px 4px  rgba(var(--ombre-teinte), .22),
    0 8px 24px rgba(var(--ombre-teinte), .32);

  --sh-3:
    0 6px 12px rgba(var(--ombre-teinte), .30),
    0 24px 64px rgba(var(--ombre-teinte), .50);
}


/* ── CE QUE CE FICHIER NE TOUCHE PAS ─────────────────────────────────
   Les ANNEAUX — `inset 0 0 0 1px var(--accent)`, `0 0 0 5px
   rgba(75,63,146,.16)` — passent par `box-shadow` mais ne sont pas des
   ombres : ils ne disent aucune hauteur, ils disent « ceci est
   sélectionné » ou « ceci a le curseur ». Et ils portent la couleur
   d'accent de leur page, que ce fichier s'interdit justement de
   connaître. Les ramener à `--sh-*` les effacerait ; les migrer vers un
   jeton teinté redemanderait la couleur ici. On les laisse à leur page,
   et le contrôleur ne les compte pas. */
