/* ══════════════════════════════════════════════════════════════════════════════════════════════
   light.css — THÈME CLAIR, variante B (désignée par Ben sur planche A-B-C-D le 18/09).
   « fond froid · carte en dégradé argent · relief par ombre »

   ⚠ CETTE FEUILLE N'ÉCRASE RIEN PAR RÉÉCRITURE : elle AJOUTE, et uniquement sous
   `:root[data-theme="light"]`. Le thème sombre n'est pas touché d'une ligne — c'est la condition
   posée après l'incident du 19/09, où une substitution regex a détruit 403 déclarations dans les
   9 fichiers de style. Retirer le thème clair = supprimer ce fichier et son <link>. Rien d'autre.

   COMMENT ELLE TIENT EN SI PEU DE LIGNES. 190 sélecteurs du site portent de la matière écrite en
   dur (623 valeurs). Les recopier serait absurde et fragile. Deux étages suffisent :
     ÉTAGE 1 — retourner les TOKENS du canon. Tout ce qui passe par eux se recolore sans qu'on
               touche à une seule règle de composant.
     ÉTAGE 2 — reprendre à la main les SURFACES VISIBLES seulement (carte, boutons, champs,
               pastilles, sélecteur de langue, barres). Le reste de la matière est du blanc
               translucide à très faible opacité : sur fond clair il devient imperceptible, ce qui
               est le comportement voulu — les creux, eux, restent lisibles.

   SPÉCIFICITÉ : `:root[data-theme="light"] .card` vaut (0,2,1) et bat donc les `.card` locaux des
   pages (0,1,0), quel que soit l'ordre de chargement. Une règle ici couvre les 8 pages.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── ÉTAGE 1 — les tokens ───────────────────────── */
:root[data-theme="light"]{
  --bg:#d3d8e0;              /* fond gris moyen : la carte doit MONTER, pas s'enfoncer (planche n°2, D) */
  --surface-2:#ffffff;       /* halo du dégradé de fond : plus clair que le fond, pas plus sombre */
  --ink:#0d1015;
  /* ⚠ L'ATTÉNUÉ EST LE TEXTE QUI SOUFFRE LE PREMIER sur une matière contrastée : il plafonne le balayage.
     ⚠ LE PIRE SOL N'EST PAS L'ARRÊT LE PLUS SOMBRE DU DÉGRADÉ. Trois couches s'empilent : le balayage
     (#afb3b7 au plus bas), puis la bande sombre du HACHURAGE (−10 %), puis la zone d'ombre du REFLET (−7 %).
     Le sol réel descend à rgb(149,153,158). Calculer sur le seul dégradé donnait 4,5 en théorie et **4,4
     mesuré sur la prod** — l'écart entre un calcul partiel et la réalité empilée. Recalculé sur les trois. */
  --ink-muted:#2c3238;
  --on-white:#0d1015;
  --on-light:#0d1015;
  --line:#b7bfcb;

  /* Teintes : les mêmes familles, assombries pour rester lisibles sur clair.
     ⚠ Les versions sombres (--red-text #ff6a5e, --success-text #4ade80) tombent à ~2 de contraste
     sur un fond clair : elles ne peuvent pas être reprises telles quelles. */
  --red-text:#a81f16;
  --blue-text:#1a56c4;
  --success-text:#176f33;
  --danger-text:#a81f16;
  --danger-deep:#8c1d18;
  --amber:#7a5300;
  --focus:#1a56c4;
  --shade:#161a20;

  /* La matière : l'argent de B remplace le platine sombre. */
  /* ⚠ LA BRILLANCE EST UNE AMPLITUDE (planche n°3, variante C désignée par Ben le 19/09). Le métal sombre
     balaie 57 % de sa propre valeur ; la première version claire n'en balayait que 9 %, d'où l'effet mat.
     ⚠ MAIS L'ÉQUIVALENCE AVEC LE SOMBRE N'EST PAS TENABLE EN CLAIR. À 59 %, le point le plus sombre du
     balayage tombait à #85898d : l'encre pleine y tenait encore (5,4) mais le texte ATTÉNUÉ s'effondrait à
     **2,3**. Ben l'a vu avant la mesure ; la mesure lui a donné raison au chiffre près. Un métal sombre peut
     balayer large parce que son texte est CLAIR et gagne en contraste dans les creux ; un métal clair porte
     un texte SOMBRE, qui perd dans les mêmes creux. La symétrie s'arrête là.
     Balayage retenu : **33 %** (Ben, 19/09) — encre 9,0 et atténué 4,5 au point le plus sombre.
     ⚠ Ne pas « adoucir » ces arrêts au-delà : l'écart entre eux EST l'éclat. Ne pas les creuser non plus :
     c'est la lisibilité de l'atténué qui plafonne, pas le goût. */
  --metal-grad:linear-gradient(135deg,#f7fbff 0%,#bdc1c5 30%,#f0f4f8 50%,#afb3b7 72%,#c9cdd1 100%);
  --code-grad:linear-gradient(180deg,#3a4049 0%,#272c33 55%,#1d2128 100%);
  --metal-light:#ffffff;
  --metal-hi:#ffffff;
  --emboss-ink:#0d1015;
  /* ⚠ MÊME PLANCHER QUE L'ATTÉNUÉ, ET POUR LA MÊME RAISON. `--metal-muted` habille des textes posés SUR le
     métal (`.ml`, le code gravé) : ils subissent donc le balayage. À #454d59, la pastille de niveau
     « Avancé-Compétitif » tombait à **4,0** sur la partie sombre du dégradé — trouvé sur la PROD, jamais
     sur une page statique, faute de données. Recalculé pour tenir 4,5 au point le plus sombre. */
  --metal-muted:#2c3238;
  --chip:#454d59;
  --chip-line:#aab1bb;
  /* ⚠ LE HACHURAGE S'INVERSE ET SE MIROITE. Sur fond sombre, la bande LARGE est la sombre (1px de clair,
     1,5px de sombre) ; sur fond clair c'est l'inverse qui est juste, la bande LARGE est la claire — Ben l'a
     demandé explicitement le 19/09. Même angle, même période de 2,5px, proportions retournées. */
  --hachure:repeating-linear-gradient(116deg,rgba(18,22,30,.10) 0 1px,rgba(255,255,255,.35) 1px 2.5px);
}

/* ───────────────────────── ÉTAGE 2 — les surfaces visibles ───────────────────────── */

/* Le fond de page. Sur sombre le halo vient d'en haut à droite ; on garde la même géométrie. */
:root[data-theme="light"] body{
  background:radial-gradient(120% 90% at 80% -10%, #ffffff 0%, var(--bg) 58%);
  color:var(--ink);
}

/* LA CARTE. Sur sombre, le relief vient d'un reflet blanc en haut ; sur clair, il vient de l'OMBRE
   portée, le reflet ne servant plus qu'à poser l'arête supérieure. C'est le renversement que la
   planche appelait « relief par ombre ». */
:root[data-theme="light"] .metal,
:root[data-theme="light"] .card.metal{
  /* ⚠ LA RAINURE S'INVERSE, ELLE NE SE COPIE PAS. Première version : je reproduisais les bandes du thème
     sombre telles quelles, en BLANC translucide. Sur un métal déjà clair, du blanc sur du blanc ne creuse
     rien : amplitude mesurée 13,9 contre 56,3 en sombre, soit une rainure quasi absente (constat de Ben,
     19/09). Sur fond clair, ce qui creuse est l'OMBRE. Mêmes angles, mêmes positions de bandes, couleur
     inversée. L'amplitude est vérifiée par échantillonnage de pixels, pas à l'œil. */
  background:
    /* Reflet spéculaire de la variante C : des éclats francs, alternés avec de fines zones d'ombre.
       C'est le couple éclat/ombre qui fait lire « métal poli », pas la seule clarté du fond. */
    linear-gradient(106deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 14%,rgba(13,16,21,.07) 30%,
                    rgba(255,255,255,.5) 48%,rgba(13,16,21,.07) 66%,rgba(255,255,255,0) 84%,
                    rgba(255,255,255,.6) 100%),
    /* ⚠ LE HACHURAGE — LA COUCHE QUE J'AVAIS PERDUE. La matière sombre en compte TROIS : le reflet large,
       ce `repeating-linear-gradient(116deg, …)` qui grave les rayures obliques, et le dégradé de base. Mon
       thème clair n'en reproduisait que deux : la surface sortait LISSE, et mes mesures portaient sur le
       reflet large en croyant mesurer la rayure (constat de Ben, capture zoomée, 19/09).
       ⚠ Même angle, même géométrie (1px / 2,5px). Les tons s'inversent : sur clair, c'est la ligne SOMBRE
       qui grave. Amplitude visée par mesure : celle du sombre rapportée à son fond (rapport de Weber). */
    var(--hachure),
    var(--metal-grad);
  box-shadow:inset 0 1px 0 #ffffff, 0 18px 36px -18px rgba(13,20,35,.5);
  border-color:var(--line);
}
:root[data-theme="light"] .card{
  background-color:#e7e9ee;
  border-color:var(--line);
  box-shadow:inset 0 1px 0 #ffffff, 0 18px 36px -18px rgba(13,20,35,.5);
}

/* LES BOUTONS. Le liseré s'inverse : clair sur fond sombre, sombre sur fond clair. */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .cta{
  color:var(--ink);
  border-color:rgba(18,22,30,.20);
  background-image:linear-gradient(180deg,rgba(18,22,30,.03),rgba(18,22,30,.06));
  box-shadow:none;
}
:root[data-theme="light"] .btn.primary,
:root[data-theme="light"] .btn.cta,
:root[data-theme="light"] .cta.primary{
  /* Le bouton porte la MÊME matière que la carte : c'est ainsi que la planche le montrait, et c'est ce qui
     fait tenir l'ensemble comme un seul métal plutôt que comme deux surfaces voisines. */
  color:var(--ink);
  background-image:var(--hachure),
    linear-gradient(106deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 14%,rgba(13,16,21,.07) 30%,
                    rgba(255,255,255,.5) 48%,rgba(13,16,21,.07) 66%,rgba(255,255,255,0) 84%,
                    rgba(255,255,255,.6) 100%),
    var(--metal-grad);
  border-color:#a9b3c2;
  box-shadow:inset 0 1px 0 #ffffff, 0 5px 12px rgba(13,20,35,.3);
}
@media (hover: hover){
:root[data-theme="light"] .btn.primary:hover{
  background-image:linear-gradient(180deg,#ffffff 0%,#f2f4f8 55%,#e6eaf0 100%);
  border-color:#aab3c0;
}
}
:root[data-theme="light"] .btn.ghost{
  background-image:linear-gradient(180deg,rgba(18,22,30,.03),rgba(18,22,30,.06));
  border-color:rgba(18,22,30,.20);
}
@media (hover: hover){
:root[data-theme="light"] .btn.ghost:hover{
  background-image:linear-gradient(180deg,rgba(18,22,30,.06),rgba(18,22,30,.10));
}
}
/* « Annuler ma place » suit l'accent du GROUPE, comme en sombre (manage.html) : un groupe bleu a un bouton bleu. */
:root[data-theme="light"] .btn.danger{
  color:#ffffff;
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,var(--shade)) 0%,color-mix(in srgb,var(--accent) 70%,var(--shade)) 100%);
  border-color:color-mix(in srgb,var(--accent) 70%,var(--shade));
  box-shadow:0 2px 6px rgba(18,22,30,.18);
}
:root[data-theme="light"] .btn:disabled{ opacity:.5 }

/* LES CHAMPS. Un champ creusé sur sombre devient un champ légèrement enfoncé sur clair. */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .field{
  color:var(--ink);
  /* ⚠ FOND OPAQUE, PAS TRANSLUCIDE. Depuis la matière C, le métal balaie de 133 à 250 : un champ translucide
     posé dessus n'a AUCUNE lisibilité stable — son texte d'invite serait lisible en haut de la carte et
     douteux dans la zone sombre du balayage. Mesuré : le sol devient « indécidable » pour l'oracle, ce qui
     est le signe qu'un humain non plus ne peut pas s'y fier. Un champ est une surface EN CREUX, distincte
     du métal qui l'entoure : on le pose donc en opaque. */
  background:#eef1f5;
  border-color:rgba(18,22,30,.22);
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder,
:root[data-theme="light"] .field::placeholder{ color:#525c69 }
/* ⚠ Le texte d INVITE n est PAS un noeud de texte : ni LEGIBILITY ni mon balayage de contraste ne le
   voient. Mesure dediee apres le passage a la matiere C : 3,9, sous le seuil. Assombri a 4,9. */

/* LE SÉLECTEUR DE LANGUE ET CELUI DE THÈME : même matière, pastille creusée. */
/* ⚠ LE CONTENEUR EST TRANSPARENT : il ne fait qu'aligner. Ce sont la pastille de langue ET le bouton de
   thème qui portent chacun leur propre matière creusée. Après le renommage `.jz-theme-wrap` → `.jz-controls`,
   le fond avait glissé sur la rangée entière ; et le bouton, lui, gardait le `rgba(0,0,0,.22)` du canon,
   soit un gris moyen sur lequel l'icône tombait à 2,95 de contraste (trouvé par LEGIBILITY CLAIR). */
:root[data-theme="light"] .jz-theme-btn{
  background:rgba(18,22,30,.06);
  box-shadow:inset 0 1px 2px rgba(18,22,30,.12);
  color:var(--ink);
}
:root[data-theme="light"] .jz-lang,
:root[data-theme="light"] .lp-lang{
  background:rgba(18,22,30,.06);
  box-shadow:inset 0 1px 2px rgba(18,22,30,.12);
}
:root[data-theme="light"] .jz-lang-sel{
  /* La règle des champs (plus haut) donne à tout `select` un fond opaque : ici le menu reste transparent. */
  background:transparent;
  border:0;
  color:var(--ink);
}

/* LES BARRES ET PANNEAUX posés sur le fond. */
:root[data-theme="light"] .bookbar,
:root[data-theme="light"] .toast,
:root[data-theme="light"] .surface,
:root[data-theme="light"] .msession,
:root[data-theme="light"] .badge,
:root[data-theme="light"] .dpick-pop,
:root[data-theme="light"] .tpick-pop,
:root[data-theme="light"] .cpick-pop,
:root[data-theme="light"] .pay-revolut,
:root[data-theme="light"] .pay-qr-det summary,
:root[data-theme="light"] .pay-manual summary,
:root[data-theme="light"] .hide-btn{
  background-color:#ffffff;
  /* ⚠ PAS `none` : j'avais effacé le hachurage de TOUTES ces surfaces en les repeignant, et elles sortaient
     lisses alors que leurs jumelles sombres sont gravées (constat de Ben, 19/09). Le motif vient du token. */
  background-image:var(--hachure);
  border-color:var(--line);
  color:var(--ink);
  box-shadow:0 6px 18px -12px rgba(18,22,30,.30);
}

/* LE BOUTON « RÉSERVER D'AUTRES SÉANCES » PORTE L'ACCENT DU GROUPE, dans les deux thèmes (rouge pour A,
   bleu pour B, via `.acc-{couleur}` posé sur #main). ⚠ Il était dans le lot des surfaces neutres ci-dessus,
   qui impose `color:var(--ink)` : l'accent était donc écrasé et le bouton sortait noir. Constat de Ben,
   19/09. La couleur ne doit JAMAIS être posée ici en dur — c'est le groupe qui la décide. */
:root[data-theme="light"] .more-btn{
  background-color:#ffffff;
  background-image:var(--hachure);
  border-color:var(--line);
  color:var(--accent-text);
  box-shadow:0 6px 18px -12px rgba(18,22,30,.30);
}

/* LE BOUTON DE VALIDATION DU PANIER (`.go`, « Je réserve ces séances ») — même matière que `.btn.primary`,
   mais il ne porte pas cette classe, donc la règle des boutons ne l'atteignait pas : son liseré blanc à .45
   restait blanc sur une surface devenue blanche. Trouvé par la règle 6 (TRAIT INVISIBLE), pas à l'œil. */
:root[data-theme="light"] .go{
  color:#14171c;
  background-image:linear-gradient(180deg,#fdfdfe 0%,#e9ecf1 55%,#dde1e8 100%);
  border:1px solid #bfc6d1;
  box-shadow:inset 0 1px 0 #ffffff, 0 3px 9px rgba(18,22,30,.18);
}
:root[data-theme="light"] .go:disabled{ opacity:.5 }

/* LA CASE À COCHER DU SÉLECTEUR MULTI. Son contour est `rgba(255,255,255,.28)` : visible sur une ligne
   sombre, INVISIBLE sur la ligne blanche du thème clair. Ben l'a vu avant l'outil : « le light mode coche
   une case qui n'était pas visible tant que rien n'est coché ». La règle 6 de render-check (TRAIT INVISIBLE)
   l'attrape désormais. L'état COCHÉ est redéclaré en fin de feuille, à la même spécificité. */
:root[data-theme="light"] .msession .box{
  border-color:rgba(18,22,30,.62);
  background:rgba(18,22,30,.04);
}

:root[data-theme="light"] a.myplaces{
  background:
    linear-gradient(106deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 16%,rgba(255,255,255,.28) 30%,
                    rgba(255,255,255,0) 46%,rgba(255,255,255,.30) 64%,rgba(255,255,255,0) 100%),
    var(--hachure),
    var(--metal-grad);
  border-color:var(--line);
  color:var(--accent-text);
}

/* LES PASTILLES DE STATUT gardent leur famille de teinte, assombrie pour rester lisible. */
:root[data-theme="light"] .pc-status.ok,
:root[data-theme="light"] .pill.ok{
  color:#176f33; background:rgba(23,111,51,.09); border-color:rgba(23,111,51,.25);
}
:root[data-theme="light"] .pc-status.wl,
:root[data-theme="light"] .pill.wl{
  color:#7a5300; background:rgba(154,110,0,.10); border-color:rgba(154,110,0,.28);
}

/* LA BARRE DE NAVIGATION DE LA CONSOLE. Elle n'existe QUE dans les vues authentifiées, donc aucun
   balayage de page statique ne la voit : c'est l'oracle de lisibilité, sur `organizer.html#argent`, qui l'a
   trouvée — texte passé au clair sur un fond resté sombre, contraste 2,65. Sur mobile elle est FIXE en bas
   de l'écran, d'où le fond opaque et l'ombre portée vers le haut. */
:root[data-theme="light"] .cnav{
  background:rgba(255,255,255,.97);
  border-top-color:var(--line);
  box-shadow:0 -6px 18px -12px rgba(18,22,30,.30);
}
:root[data-theme="light"] .cnav-btn{ color:var(--ink-muted) }
:root[data-theme="light"] .cnav-btn[aria-current="true"]{ color:var(--ink) }   /* l'onglet ouvert (aria-current, posé par showView) */
:root[data-theme="light"] .totop{ background:rgba(255,255,255,.97); box-shadow:0 6px 16px rgba(18,22,30,.20); }

/* Le code gravé : sur sombre il est clair sur métal sombre ; sur clair, l'inverse. */
:root[data-theme="light"] .pc-code{ color:var(--metal-muted) }

/* La barre du navigateur suit le thème (posée aussi par js/theme.js au basculement). */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   VARIANTE D — PLANCHE N°4, DÉSIGNÉE PAR BEN LE 25/09
   « le métal reste sur la carte, sa texture tombe au tiers »

   POURQUOI. Mesuré sur la prod le 25/09 : le thème clair opposait une séparation fond/carte de 18,6
   à une variation interne de surface de 21,5 — la décoration variait PLUS que la carte ne se
   détachait (rapport 1,20×). Le thème sombre, dont personne ne se plaint, mesure 51,1 contre 10,9,
   soit 0,20×. D atteint **50,3 contre 7,9, soit 0,16×**, mesuré sur les trois pages client.

   CE QUE D NE CHANGE PAS : aucune structure, aucun sélecteur nouveau, aucune surface déplacée. Trois
   valeurs de matière, le fond, et l'ombre de la carte. C'est exactement ce pour quoi l'étage 1 de
   cette feuille a été conçu.

   ⚠ S'APPLIQUE AUSSI À LA CONSOLE. Elle en a d'abord été exclue, parce qu'elle pose par-dessus la carte
   des voiles noirs (`.pl`, `.ledger`…) qui, sur une matière pâle, deviennent des dalles grises. Ces
   voiles sont repris plus bas, dans le bloc CONSOLE ; la borne `body:not(.console)` a été retirée.
   ⚠ ADDITIF : rien n'est réécrit au-dessus. Retirer D = supprimer ce bloc.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] body{
  /* Le fond descend d'un cran : c'est lui qui fait les 50,3 points de séparation. */
  /* ⚠ LE FOND DE E, SUR LA MATIÈRE DE D — planche n°5, variante C, désignée par Ben le 25/09.
     Fond PLAT et clair, plus de dégradé radial. Mesuré sur la planche : fond 231,3 contre une carte à
     236,9, soit une séparation de **5,6 points** seulement, et un rapport décoration/structure de 1,29×.
     ⚠ BEN A DÉSIGNÉ C EN CONNAISSANT CE CHIFFRE, qui lui a été donné avant son choix. Conséquence à
     garder en tête pour toute modification future : **la carte ne se détache plus par sa luminance, elle
     ne tient que par son LISERÉ et son OMBRE.** Toucher à l'un des deux la fait disparaître dans le fond.
     Le liseré (`--line` #b7bfcb) est vérifié par la règle 6 de render-check (« TRAIT INVISIBLE »).
     ── historique : la planche n°4 avait donné #bcc4d0 (mesuré 192,9 sur planche, 186,7 sur le site :
     une valeur déclarée ne donne pas le même rendu sur une page plus haute), puis #c1c9d4 à 191,5. */
  --bg:#e6eaf0;
  /* ⚠ Mêmes angles, mêmes positions d'arrêts, amplitude resserrée VERS LE CLAIR. Le point le plus
     sombre du métal remonte de #afb3b7 (179) à #d8dce1 (216), ce qui relève d'autant le plancher de
     contraste des textes posés dessus — la contrainte qui plafonnait le balayage le 19/09. */
  --metal-grad:linear-gradient(135deg,#fbfdff 0%,#dfe3e8 30%,#f4f7fa 50%,#d8dce1 72%,#e8ebef 100%);
  /* ⚠ La gravure tombe AU TIERS (.10 → .034 et .35 → .12). Même angle, même période de 2,5px, mêmes
     proportions miroitées : c'est l'AMPLITUDE qui change, jamais la géométrie. */
  --hachure:repeating-linear-gradient(116deg,rgba(18,22,30,.034) 0 1px,rgba(255,255,255,.12) 1px 2.5px);
  background:var(--bg);   /* plat : le halo radial disparaît avec la variante C */
}

/* La carte : le reflet s'adoucit dans la même proportion que la gravure, sinon il redevient à lui seul
   toute la variation qu'on vient de retirer. Ombre portée un cran plus courte. */
:root[data-theme="light"] .metal,
:root[data-theme="light"] .card.metal{
  background:
    linear-gradient(106deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 20%,rgba(13,16,21,.025) 40%,
                    rgba(255,255,255,.18) 55%,rgba(13,16,21,.025) 72%,rgba(255,255,255,0) 88%,
                    rgba(255,255,255,.22) 100%),
    var(--hachure),
    var(--metal-grad);
  box-shadow:inset 0 1px 0 #ffffff, 0 16px 32px -18px rgba(13,20,35,.42);
  border-color:var(--line);
}

/* ── DÉFAUT CORRIGÉ, INDÉPENDANT DE LA VARIANTE (25/09) ────────────────────────────────────────
   `group.html` peint ses deux états ACTIFS ainsi :

       background:linear-gradient(180deg, var(--metal-hi), #2b2e34);

   Le token s'éclaircit en thème clair (`--metal-hi` = #ffffff) mais **l'hex figé reste sombre** : le
   dégradé part du BLANC et arrive au PRESQUE NOIR, en plein thème clair, sous une encre sombre. Deux
   blocs noirs au milieu du clair, visibles sur n'importe quelle capture.
   ⚠ AUCUN GARDE NE POUVAIT LE VOIR : `design-lint` scanne bien les pages, mais sa règle 10 EXEMPTE
   tout hex situé dans un `gradient()` (« c'est de la matière »). L'exemption est juste pour le thème
   sombre, où ces nuances SONT la matière ; elle est précisément le trou par lequel une valeur sombre
   passe intacte dans le clair. Inscrit au backlog.
   Correctif : la fin du dégradé devient `var(--line)`. L'état reste plus profond que la carte, donc
   lisible comme « actif », et les textes y tiennent (atténué 6,99 · encre 10,28 — mesurés). */
:root[data-theme="light"] .mrow.here,
:root[data-theme="light"] .grp-switch .gp.on{
  /* ⚠ SUR LA PLANCHE, L'ÉTAT ACTIF PORTE LA MÊME MATIÈRE QUE LA CARTE, pas un dégradé vers le gris.
     Ma première correction remplaçait seulement l'hex noir figé par `--line` : le bloc cessait d'être
     noir mais restait une dalle grise, loin de la planche (constat de Ben sur capture, 25/09). */
  background:
    linear-gradient(106deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 20%,rgba(13,16,21,.025) 40%,
                    rgba(255,255,255,.18) 55%,rgba(13,16,21,.025) 72%,rgba(255,255,255,0) 88%,
                    rgba(255,255,255,.22) 100%),
    var(--hachure),
    var(--metal-grad);
  box-shadow:inset 0 1px 0 #ffffff, 0 3px 9px rgba(13,20,35,.18);
}
/* La pastille sélectionnée n'a pas de bordure dans la page : sans elle, la même matière que la piste
   ne se détacherait pas. L'accent de `.mrow.here`, lui, est déjà porté par sa bordure de page. */
:root[data-theme="light"] .grp-switch .gp.on{ border:1px solid var(--line); }

/* La pastille de niveau. Dans la page elle est creusée par un voile NOIR à 32 % (`rgba(0,0,0,.32)`),
   l'idiome du thème sombre : sur la matière claire de D, cela pose une dalle grise franche, très loin
   de la pastille pâle de la planche (constat de Ben sur capture, 25/09). Le voile tombe à 6 %. */
:root[data-theme="light"] .lvl-chip{
  background:rgba(18,22,30,.06);
  border-color:rgba(18,22,30,.10);
}

/* La ligne de séance NON sélectionnée. Dans la page, elle est creusée par `rgba(0,0,0,.18)` : sur la
   matière claire de D, elle devient plus LOURDE que la ligne active, qui porte désormais la matière
   pâle. La hiérarchie s'inversait — l'inactif attirait l'œil avant l'actif. Le voile tombe à 5 %. */
:root[data-theme="light"] .mrow{
  background:rgba(18,22,30,.05);
  border-color:rgba(18,22,30,.08);
}

/* ── CE QUE LE FOND DE E RÉVÈLE (planche n°5, variante C, 25/09) ───────────────────────────────
   Un fond plat et clair ne creuse plus rien : les bordures dessinées pour un sol FONCÉ — un blanc
   translucide, un vert du thème sombre — s'y confondent. render-check (règle 6) en a nommé deux, et
   seulement deux, sur l'ensemble des pages client. Elles reprennent des couleurs qui se voient sur
   du clair, en gardant leur SENS : neutre pour le bouton, vert pour la mention de gratuité. */
:root[data-theme="light"] .declare-btn{
  border-color:var(--line);
}
:root[data-theme="light"] .transp{
  border-color:rgba(23,111,51,.45);   /* la famille de --success-text, lisible sur un sol clair */
}

/* `.cnav-btn` (console) : bordure blanche translucide sur un sol quasi blanc. Défaut préexistant, resté
   caché derrière les deux précédents — render-check s'arrête au premier trait invisible qu'il rencontre,
   si bien que les défauts de cette famille se révèlent l'un après l'autre. Non borné : c'est un défaut,
   pas un choix de variante, et la console en profite. */
:root[data-theme="light"] .cnav-btn{
  border-color:var(--line);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   CONSOLE — LES VOILES DESSINÉS POUR UN FOND SOMBRE
   Sur une matière sombre, `rgba(0,0,0,.18)` creuse une sous-surface d'un cran. Sur la matière pâle du
   thème clair, le même voile pose une DALLE GRISE franche, plus lourde que la carte qui la porte. Le voile
   blanc fait l'inverse : sur du pâle il ne se voit plus, et la sous-surface disparaît. Même traitement que
   les pages client : les sous-surfaces se creusent d'un voile sombre léger, les états ACTIFS portent la
   matière (comme la pastille de groupe sélectionnée), et les VOILES DE MODALE (`.cdlg-ov`, `.sf-overlay`)
   ne sont PAS repris : ce sont des occultations, elles restent sombres dans les deux thèmes.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* sous-surfaces : un cran de profondeur, pas une dalle */
:root[data-theme="light"] .ledger,
:root[data-theme="light"] .pl,
:root[data-theme="light"] .sg-fold,
:root[data-theme="light"] .rec-sel,
:root[data-theme="light"] .gr-item,
:root[data-theme="light"] .gr-form,
:root[data-theme="light"] .rt-item,
:root[data-theme="light"] .jchip,
:root[data-theme="light"] .numsm,
:root[data-theme="light"] .txtsm,
:root[data-theme="light"] .dpick-field,
:root[data-theme="light"] .lg-tot .t{
  background:rgba(18,22,30,.05);
}
/* la bande d'en-tête d'un jour de séances : son ombre intérieure noire à 40 % devient un liseré */
:root[data-theme="light"] .sess-day{
  background:rgba(18,22,30,.06);
  box-shadow:inset 0 -1px 0 rgba(18,22,30,.10);
}
/* les états d'une pastille de suivi gardent leur ordre : à faire > normal > sans objet */
:root[data-theme="light"] .jchip.todo{ background:rgba(18,22,30,.08); }
:root[data-theme="light"] .jchip.na{ background:rgba(18,22,30,.03); }

/* petits contrôles (sélecteurs de date et d'heure, bascule) : même voile léger */
:root[data-theme="light"] .dpick-nav,
:root[data-theme="light"] .dpick-day,
:root[data-theme="light"] .dpick-clear,
:root[data-theme="light"] .tpick-cell,
:root[data-theme="light"] .hd-toggle{
  background:rgba(18,22,30,.06);
}

/* voiles BLANCS : invisibles sur du pâle, ils deviennent un voile sombre léger */
:root[data-theme="light"] .t-close,
:root[data-theme="light"] .toast .t-close,
:root[data-theme="light"] .lg-badge,
:root[data-theme="light"] .rec-tag.collect,
:root[data-theme="light"] .rec-act.waive{
  background:rgba(18,22,30,.06);
}

/* états ACTIFS : ils portent la matière, comme la pastille de groupe sélectionnée des pages client */
:root[data-theme="light"] .hd-toggle.on,
:root[data-theme="light"] .sess-item.sel{
  background:
    linear-gradient(106deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 20%,rgba(13,16,21,.025) 40%,
                    rgba(255,255,255,.18) 55%,rgba(13,16,21,.025) 72%,rgba(255,255,255,0) 88%,
                    rgba(255,255,255,.22) 100%),
    var(--hachure),
    var(--metal-grad);
  box-shadow:inset 0 1px 0 #ffffff, 0 1px 3px rgba(13,20,35,.14);
}

/* CONSOLE — trois voiles que l'inventaire par CLASSE ne pouvait pas voir : ils sont posés par un
   identifiant (`#sess-list`) ou par un sélecteur composé (`.basket-paid details`, `.selsm,.numsm`).
   Ce sont eux qui faisaient les deux dernières dalles : le conteneur de la liste des séances, et le
   panneau de virement panier, qui assombrissait aussi le bouton posé dessus. */
:root[data-theme="light"] #sess-list,
:root[data-theme="light"] .basket-paid details,
:root[data-theme="light"] .selsm{
  background:rgba(18,22,30,.05);
}

/* Case cochée du sélecteur multi : même spécificité que la case vide (plus haut), sinon celle-ci l'emporte. */
:root[data-theme="light"] .msession.on .box{
  background:var(--accent);
  border-color:var(--accent);
}

/* Séance sélectionnée : contour plein de l'accent ; la règle des panneaux (plus haut) l'écraserait par --line. */
:root[data-theme="light"] .msession.on{
  border:2px solid var(--accent);
}

/* Pastilles pleines : en clair, --amber et --success-text sont des encres foncées ; le fond prend une teinte vive
   à part, sous l'encre sombre de --on-amber / --on-success. */
:root[data-theme="light"]{
  --amber-fill:#f4c150;
  --success-fill:#4ade80;
}
:root[data-theme="light"] .pill.held,
:root[data-theme="light"] .due .duelab{
  background:var(--amber-fill);
}
/* Compteur « en attente » de Mes places : même orange que la pastille « réservée », même encre. */
:root[data-theme="light"] .pcount.wait{
  background:var(--amber-fill);
  color:var(--on-amber);
}
:root[data-theme="light"] .pill.offert,
:root[data-theme="light"] .pill.paid{
  background:var(--success-fill);
}

/* Bouton à contour d'accent (inviter, partager) : la surcharge claire de `.btn` le rendrait neutre. */
:root[data-theme="light"] .btn.outline{
  background-image:none;
  background-color:transparent;
  border:1.5px solid var(--accent);
  color:var(--accent-text);
  box-shadow:none;
}

/* Traits de STRUCTURE (étapes de la vitrine, tableaux et séparateurs des pages légales) : dessinés en blanc
   translucide, ils disparaissent sur clair. Ce ne sont pas de la matière décorative : même contraste qu'en sombre
   (mesuré : 1,26 et 1,63 en sombre ; 1,28 et 1,66 ici). */
:root[data-theme="light"] .vt-step::before{ background:rgba(18,22,30,.16); }
:root[data-theme="light"] .legal th,
:root[data-theme="light"] .legal td{ border-color:rgba(18,22,30,.20); }
:root[data-theme="light"] .legal .sep{ border-top-color:rgba(18,22,30,.16); }

/* « Je réserve » à l'accent du groupe : la règle claire des .cta (plus haut) le rendrait neutre. */
:root[data-theme="light"] .cta.cta-accent{
  color:var(--white);
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,var(--shade)) 0%,color-mix(in srgb,var(--accent) 70%,var(--shade)) 100%);
  border-color:color-mix(in srgb,var(--accent) 70%,var(--shade));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 10px rgba(0,0,0,.35);
}

/* Même découpage des hachures en blocs de 571 px que le canon (.metal, fin de joynuz.css) : les règles claires
   ci-dessus redéclarent tout le fond, ce qui remettrait la couche des hachures à la taille de la carte. */
:root[data-theme="light"] .metal,
:root[data-theme="light"] .card.metal{ background-size:auto, 100% 571px, auto; background-repeat:no-repeat, repeat, no-repeat; }

/* PLATINE CLAIRE sur fond clair : un liseré pour la détacher du fond, une ombre portée plus douce. */
:root[data-theme="light"] .platine{
  border:1px solid rgba(13,16,21,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.25), 0 14px 30px -20px rgba(13,16,21,.4);
}
:root[data-theme="light"] .platine-dot{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.3), 0 2px 6px rgba(13,16,21,.25);
}

/* PLATINE CLAIRE sur fond clair : un liseré pour la détacher du fond, une ombre portée plus douce. */
:root[data-theme="light"] .platine{
  border:1px solid rgba(13,16,21,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.25), 0 14px 30px -20px rgba(13,16,21,.4);
}
:root[data-theme="light"] .platine-dot{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.3), 0 2px 6px rgba(13,16,21,.25);
}

/* « TA PLACE » (/r/) sur platine claire : le code garde l'estampé de la carte claire (la règle `.pc-code`
   ci-dessus visait l'ancienne carte métal), et l'encadré de transparence reste une tuile neutre. */
:root[data-theme="light"] .pc-code.estampe-claire{ color:var(--estampe-claire) }
:root[data-theme="light"] .surface.transp{ border-color:var(--line) }

/* « MES PLACES » (/b/, maquette P3) : l'état d'une place s'écrit en TEXTE (« à payer », « payée »), plus en
   pastille pleine. La teinte de fond des pastilles pleines (plus haut) ne s'applique donc pas à cette liste. */
:root[data-theme="light"] .b-main #list .pill{ background:none; }

/* RÉSERVER (/g/, maquettes P1 et P2) : la barre du bas en verre clair, le voile de la feuille de confirmation. */
:root[data-theme="light"]{ --glass:rgba(255,255,255,.82); --veil:rgba(18,22,30,.42); }

/* CONSOLE « EN COURS » (maquette P5) : la vue n'est plus une carte ; ses tuiles portent chacune leur surface. */
:root[data-theme="light"] .card.cview{ background:none; border:0; box-shadow:none; }
:root[data-theme="light"] .cview .basket-paid details.surface{ background-color:#ffffff; background-image:var(--hachure); }
/* CONSOLE « ARGENT » (maquette P6) : les totaux et le registre sont des surfaces blanches gravées, pas des dalles grises. */
:root[data-theme="light"] .cview .rt-item.surface,
:root[data-theme="light"] .cview .ledger.surface{ background-color:#ffffff; background-image:var(--hachure); }
:root[data-theme="light"] .cview .rt-item.rt-hot{ background-color:rgba(244,193,80,.16); }
:root[data-theme="light"] .cview .pl{ background:none; }
/* CONSOLE « SÉANCES » (maquette P7) : jours en libellé, séances en tuiles blanches gravées, contour sur la séance choisie. */
:root[data-theme="light"] .cview .sess-day{ background:none; box-shadow:none; }
:root[data-theme="light"] .cview #sess-list{ background:none; }
:root[data-theme="light"] .cview .sess-item{ background-color:#ffffff; background-image:var(--hachure); border-color:var(--line); }
:root[data-theme="light"] .cview .sess-item.sel{ background:#ffffff; box-shadow:inset 0 0 0 2px var(--gc, var(--accent)); }
:root[data-theme="light"] .cview .ps-fold.surface{ background-color:#ffffff; background-image:var(--hachure); }
/* CONSOLE « GROUPES » (maquette P9) : le formulaire est une surface blanche ; ses enveloppes de champ ne sont plus des cadres. */
:root[data-theme="light"] .cview .gr-form.surface{ background-color:#ffffff; background-image:var(--hachure); }
:root[data-theme="light"] .cview .gr-form .field{ background:none; border-color:transparent; }
:root[data-theme="light"] .cview .gr-item{ background:none; }
/* CONSOLE « COMPTE » (maquette P10) : enveloppes de champ sans cadre. */
:root[data-theme="light"] .cmp-card .field{ background:none; border-color:transparent; }
/* CONSOLE « ÉDITER LA SÉANCE » (maquette P11) : enveloppes de champ sans cadre ; gestes du cycle de vie en liens. */
:root[data-theme="light"] .sf-card .field{ background:none; border-color:transparent; }
:root[data-theme="light"] .sf-lc-row .btn{ background:none; background-image:none; border-color:transparent; box-shadow:none; }
/* Panneaux dépliables gravés (registre d'Argent, panier payé d'En cours) : une fois ouverts, ils deviennent très hauts.
   Même découpage des hachures en blocs de 571 px que .metal, pour que Safari iOS les peigne sur toute la hauteur. */
:root[data-theme="light"] .cview .ledger.surface,
:root[data-theme="light"] .cview .basket-paid details.surface{ background-size:100% 571px; background-repeat:repeat; }

/* JOYFUL : en clair, --amber est une encre foncée ; la pastille 1 prend la teinte vive. Le chiffre reste foncé. */
:root[data-theme="light"]{ --pastille-1:var(--amber-fill); }
:root[data-theme="light"] .jz-step{ box-shadow:0 2px 6px rgba(0,0,0,.18); }
:root[data-theme="light"]{ --photo-fade:rgba(255,255,255,.94); }