/* ══════════════════════════════════════════════════════════════════════════════════════════════ 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 . 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. Calculé pour tenir 4,5 sur le point le plus sombre du dégradé retenu (#afb3b7), et 9,2 sur le plus clair. */ --ink-muted:#40464c; --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; --metal-muted:#454d59; --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); } :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); } :root[data-theme="light"] .btn.ghost:hover{ background-image:linear-gradient(180deg,rgba(18,22,30,.06),rgba(18,22,30,.10)); } :root[data-theme="light"] .btn.danger{ color:#ffffff; background-image:linear-gradient(180deg,#c8372c 0%,#a82a20 100%); border-color:#8c1d18; 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 button, :root[data-theme="light"] .lp-lang button, :root[data-theme="light"] .jz-lang-btn, :root[data-theme="light"] .lang-btn{ color:var(--ink-muted) } :root[data-theme="light"] .jz-lang button:hover{ color:var(--ink) } :root[data-theme="light"] .jz-lang button.on, :root[data-theme="light"] .lp-lang button.on{ color:var(--ink); background:#ffffff; box-shadow:0 1px 3px rgba(18,22,30,.18); } /* 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É n'est pas touché : il prend déjà `var(--accent)`, qui suit le groupe. */ :root[data-theme="light"] .msession .box{ border-color:rgba(18,22,30,.30); 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.on{ color:var(--ink) } /* 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). */