/* `theme.css` — TOUTES LES VALEURS DU GRAPHISME, ET RIEN D'AUTRE ⚠️⚠️ **NÉ LE 2026-09-18 — DEMANDE DE FRANCK :** *« toutes les valeurs liées au graphisme doivent être centralisées dans un fichier CSS »*. Les palettes ont été **déplacées** ici — pas copiées : 129 jetons venus de `simsimup.css`, 32 de `navigation.css`, et 48 jetons neufs pour le verre liquide, qui vivaient en dur dans un script. ⚠️ **CETTE FEUILLE NE PORTE AUCUNE RÈGLE** — pas un sélecteur, pas une propriété appliquée : rien que des jetons. C'est ce qui permet à la page de réglage d'écrire par-dessus sans rien casser, et de savoir exactement ce qu'elle règle. ⚠️ **ELLE SE CHARGE EN PREMIER**, avant `simsimup.css` et la feuille de l'écran. La page de réglage, elle, écrit **en dernier** : `/apparence.css`, servie depuis la base, gagne parce qu'elle arrive après — même poids, dernier écrit. ⚠️ **CE QUI N'EST PAS ICI, ET POURQUOI** : les `:root` posés dans un `@media` — impression, contraste renforcé, petit écran. Ils ne créent pas un jeton, ils le redéfinissent pour un contexte ; les sortir de leur `@media` les rendrait faux. */ /* ══ `hidden` CACHE, PARTOUT — 2026-09-17, arbitrage de Franck ══════════ L'attribut `hidden` ne tient que par une règle du NAVIGATEUR, `[hidden] { display: none }`, sans aucun poids. **Toute règle d'auteur qui pose un `display` passe devant**, et le site en pose sur toutes ses touches (`display: inline-flex`). Relevé le 2026-09-17 : « Rester sur l'entretien » restait affiché après le clic, « + Ajouter une ligne » de `/base` l'était toujours, le ↺ et le bloc « À copier » de `/verre` avaient chacun reçu leur rustine. ⚠️ **`!important` EST LA RÈGLE, PAS UNE FACILITÉ** : c'est la seule façon qu'un attribut HTML l'emporte sur toutes les feuilles, présentes et à venir. *Un élément à montrer se montre en retirant `hidden`, jamais en posant un `display` par-dessus.* */ [hidden] { display: none !important; } :root { /* ══ LES DEUX PILES ═══════════════════════════════════════════════ ⚠️ **NE JAMAIS ÉCRIRE `font-family` EN DUR DANS UN GABARIT.** Le nom du rôle survit à un changement de fonte ; le nom de la fonte, non. ⚠️ **LA SERIF A DISPARU LE 2026-08-28, ET AVEC ELLE UNE DISTINCTION.** Jusqu'ici `--parole` était une serif et disait *« ceci a été dit par quelqu'un »* ; `--mesure` était une sans et disait *« ceci le mesure »*. Le kit fourni emploie deux sans — Inter pour les titres, DM Sans pour le texte — et Franck a tranché : le kit à la lettre. **Ce qui se perd est réel** : la réplique d'un client et un intitulé de colonne ont désormais la même voix typographique. Ce qui distingue les deux ne peut plus être que la forme et la place. */ --titre: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif; --texte: "DM Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif; --chiffres: ui-monospace, "Cascadia Mono", Consolas, monospace; /* Les seize écrans écrivent encore les anciens noms. Les alias évitent de rouvrir dix-huit feuilles pour un renommage. */ --mesure: var(--titre); --parole: var(--texte); /* ══ LES CINQ COULEURS DU KIT, TELLES QUELLES ═════════════════════ Recopiées de la planche fournie, sans retouche. */ --sauge: #5E8B7E; /* la marque */ --bleu: #A7C7E7; /* l'accent froid */ --ardoise: #23485c; /* le texte, et les surfaces appuyées */ --blanc-casse: #F1F5F4; /* la matière claire */ --rose: #755a5e; /* le second accent */ /* ⚠️ **UNE SEULE CORRECTION, ET ELLE EST MESURÉE.** La sauge du kit est un cul-de-sac pour du texte : ni le blanc (3,84:1) ni l'ardoise (2,88:1) ne contrastent avec elle — elle est pile au milieu de l'échelle. **Le bouton primaire du kit n'est donc lisible dans aucun sens.** `--sauge-plein` est la même teinte assombrie du minimum nécessaire pour porter du blanc : **4,72:1**. *Le rose et le bleu, eux, passent tels quels avec du texte ardoise — 5,88:1 et 6,30:1. Ils ne sont pas touchés.* */ --sauge-plein: #4F7C6F; --sauge-vif: #57b892; /* le survol : on descend encore */ /* ══ LE FOND ══════════════════════════════════════════════════════ Une photographie fixe, et par-dessus un voile blanc EN DÉGRADÉ. Le voile n'est PAS une politesse : sans lui rien n'est lisible hors des plaques. ⚠️ **PLUS LOURD EN HAUT QU'EN BAS, ET C'EST MESURÉ.** Un titre de page se trouve à ~19 % de la hauteur, donc près du HAUT du dégradé : c'est là que l'encre est le plus exposée. D'où deux jetons, `--voile-haut` et `--voile-bas`, et non une valeur unique. ⚠️⚠️ **LE VOILE NE SE VOIT PLUS QUE HORS DES PLAQUES.** La plaque pose `--fond-flou`, une image **opaque** qui le recouvre : ce que l'œil reçoit sous du texte est la copie floutée plus le verre, jamais le voile. *Mesuré sur les pixels peints : le texte posé directement sur la plaque de l'accueil rend **7,86 à 10,33** du haut au bas de la page.* ⚠️⚠️ **CE QU'ON NE PEUT PAS FAIRE, ET LA MESURE L'A TRANCHÉ** : baisser le voile SANS monter le verre. À voile 55 %, le fond le plus dur tombe de 4,69 à **3,45** — sous le seuil dès le premier cran. Et éclaircir les images ne sauve rien : même à gamma 2,8, le meilleur fond plafonne à **4,24**. *Le blanc sous le texte n'est pas négociable ; son EMPLACEMENT l'est.* */ /* ══ PLUS DE VOILE SUR LE FOND — 2026-09-22, DEMANDE DE FRANCK ═════ *« supprimer le voile blanc sur le fond des pages du site (Couche 0) »*. ⚠️⚠️ **CE N'EST PAS UN RENIEMENT DE LA GARDE CI-DESSUS, C'EST SON AUTRE MOITIÉ.** Elle dit : *« le blanc sous le texte n'est pas négociable ; son EMPLACEMENT l'est. »* Franck vient de trancher l'emplacement : **le blanc passe entièrement sur la COUCHE 2**, celle qui est posée sur la plaque de verre, et le fond redevient nu. ⚠️ **CE QUE LA MESURE DIT DÉJÀ, ET QUI REND LE GESTE SÛR POUR LE TEXTE** : la plaque pose `--fond-flou`, une image **opaque** qui recouvrait le voile de toute façon. *Le texte sur la plaque de l'accueil rendait 7,86 à 10,33 — et ces chiffres ne bougent pas, ils ne venaient pas du voile.* ⚠️⚠️ **CE QUI CHANGE VRAIMENT : LE TEXTE POSÉ HORS PLAQUE.** Il n'y en a pas censément — c'est tout le système des couches — mais le jour où l'on en pose un, il sera sur la photographie nue. **Le remède n'est pas de remettre le voile, c'est de lui donner une plaque.** ⚠️ **LES DEUX JETONS RESTENT, À ZÉRO.** Les retirer casserait le dégradé de `.fond-voile` et la page `/apparence`, qui les règle. *Un jeton à zéro se remonte au curseur ; un jeton supprimé se réécrit.* */ --voile-haut: rgba(255, 255, 255, 0); /* ⚠⚠ **LE FOND D'UN CHAMP EN FOCUS A SON PROPRE JETON DEPUIS LE 2026-09-21 — TROUVÉ PAR LA REVUE D'INTENTION.** Il lisait `--voile-haut`, c'est-à-dire **le voile posé sur la photo de fond**. Le même jour, ce voile est monté de **0,39 à 0,88** pour rattraper la lisibilité sur un fond sombre — mesure sérieuse, mais qui ne portait que sur le fond. **Effet de bord : sur les dix-neuf écrans, cliquer dans un champ le faisait passer de légèrement voilé à quasi opaque.** Aucune perte de contraste — l'encre reste sombre — mais un changement que personne n'a demandé ni mesuré. *Un jeton qui sert deux choses finit par être réglé pour l'une et subi par l'autre.* La valeur reprise ici est celle que le focus avait AVANT ce lot. */ --champ-actif: rgba(255, 255, 255, .39); --voile-bas: rgba(255, 255, 255, 0); /* ⚠️ **L'ANGLE ET LE POINT DE BASCULE SORTENT DU DUR — 2026-09-16.** Ils vivaient dans la règle `.fond-voile` ; le panneau de réglage de l'accueil ne pouvait donc pas les atteindre. *Mêmes valeurs qu'avant, au degré près.* */ --voile-angle: 89deg; --voile-pivot: 7%; /* ══ LA LUMIÈRE DU HAUT DE PLAQUE ════════════════════════════════ ⚠️⚠️ **CES TROIS VALEURS ÉTAIENT ÉCRITES EN DUR, ET À DEUX ENDROITS — `body::before` ET LA LISTE DES PANNEAUX.** Deux copies du même dégradé, qu'aucun jeton ne reliait : en corriger une seule aurait fait diverger la grande plaque de ce qui est posé dessus. *C'est le dégradé qui fait le bombé — le flou ne fait que la transparence.* Sorties du dur le 2026-09-16, à valeur égale. */ --lumiere-haut: rgba(255, 255, 255, .34); --lumiere-bas: rgba(255, 255, 255, .19); --lumiere-pivot: 26%; /* ══ LE VERRE ═════════════════════════════════════════════════════ ⚠️ **CE QUI FAIT LIRE « VERRE » EST LE COUPLE FOND + ARÊTE**, pas le flou. Un `backdrop-filter` seul donne une vitre sale ; c'est le liseré blanc en haut qui fait la tranche, et l'ombre portée qui décolle la plaque du décor. ⚠️ **AUCUN TEXTE HORS D'UN PANNEAU DE VERRE — RÈGLE ABSOLUE.** Mesuré : l'ardoise posée directement sur le voile ne donne que **3,86:1** au pire instant de la boucle, contre **7,24:1** dès qu'il y a une plaque de verre dessous. Un titre « posé sur le fond » deviendrait illisible dix secondes sur vingt, et personne ne saurait pourquoi. */ /* ⚠️⚠️ **LE VERRE A CESSÉ D'ÊTRE DU BLANC LE 2026-08-28 — DEMANDE DE FRANCK : « du verre rendant flou le fond d'écran, PAS DE BLANC ».** Il valait `.55`, `.74` et `.38` de blanc pur : un calque laiteux, pas du verre. On voyait la vidéo *à travers un voile*, on ne la voyait pas *déformée*. **Ce qui fait le verre est le FLOU ; le blanc ne faisait que masquer.** ⚠️ **CE N'ÉTAIT PAS UN CAPRICE DE LA VERSION D'AVANT : C'EST LE BLANC QUI PORTAIT LE CONTRASTE** — 7,24:1 et 4,86:1, mesurés sur 24 images de la boucle. Le retirer sans compenser rendait le texte illisible. **Ce qui compense est le flou, monté de 16 à 30 px.** Un fond fortement flouté est UNIFORME : il n'a plus de pixel sombre isolé sous une lettre. Mesuré après changement, sur les pixels rendus de l'écran de paramétrage : le texte secondaire — le plus exposé — donne **5,12:1** contre un seuil de 4,5, et le bouton **5,29:1**. ⚠️ **RÉSERVE À TENIR : UNE SEULE IMAGE DE LA BOUCLE.** Le rendu hors serveur fige la vidéo sur sa première image ; les 4,86 d'avant étaient un PIRE INSTANT sur 24. **Les deux nombres ne se comparent donc pas**, et le vrai contrôle est de relire l'écran en recette pendant que la vidéo tourne. */ /* ⚠️⚠️ **CE SONT DES NIVEAUX DE PROFONDEUR, ET ILS S'ADDITIONNENT — 2026-08-29, DEMANDE DE FRANCK : « j'ai encore des zones dont le fond est blanc… que les fonds soient normalisés comme sur `/seances` ».** **Deux verres l'un sur l'autre ne font pas un verre plus net, ils font du blanc** : 26 % puis 36 % donnent **59 %**. C'est arithmétique et rien ne le signalait — chaque feuille posait un fond correct pour elle, et l'empilement se produisait à l'écran. ⚠️ **LE NIVEAU 0 EST LA SEULE PLAQUE, ET IL Y EN A UNE PAR PAGE.** Elle porte le flou. Tout ce qui est DEDANS n'a plus rien à flouter : le fond y est déjà dépoli. Un second `backdrop-filter` coûte une passe de rendu pour un effet que personne ne distingue. ⚠️ **LES VALEURS SONT CHOISIES POUR NE RIEN DÉPLACER, ET C'EST LE POINT.** Une carte de niveau 1 rendait 36 % de blanc quand la plaque n'en posait aucun ; elle rend **34,9 %** maintenant que la plaque en pose 26. *Les cartes gardent leur lisibilité ; ce qui change est le FOND DE PAGE, qui reçoit enfin le sien, et les cartes EMBOÎTÉES, qui perdent une couche.* */ /* ⚠️⚠️ **31 % — LA VALEUR RETENUE PAR FRANCK AU CURSEUR, LE 2026-09-06 AU SOIR.** *C'est son arbitrage (D10), et il prime.* ⚠️⚠️ **CE QUI RACHÈTE CES 31 %, C'EST `--verre-vif` À 70.** Le texte n'est presque jamais sur la plaque nue : il est dans une carte, qui pose son propre blanc. *Mesuré sur les pixels peints : 7,86 à 10,33 sur la plaque de l'accueil, 4,67 au pire dans une carte de connexion.* ⚠️ **LE RAIL, LUI, A DÛ ÊTRE DÉCOUPLÉ** — il n'est pas sur la plaque mais sur la photo, et 31 % l'y laissaient à 3,50. Voir `--rail-fond` dans `navigation.css`. */ --verre: rgba(255, 255, 255, 1); /* NIVEAU 0 — la plaque du corps */ /* ⚠️⚠️ **LA SECONDE MOITIÉ DE LA COURSE DU BLANC — 2026-09-16, CONSTAT DE FRANCK : « le blanc du verre est trop court dans sa course ».** Il avait raison, et la cause n'est pas le curseur : `--verre` est peint DANS `body::before`, que `--opacite-cadre` réduit ensuite à 31 %. *À 100 %, le blanc du verre ne pesait donc que 31 % de ce qu'on voit.* **Au-delà de 100, le curseur pose ce voile-ci**, peint par `body::after` — donc DEVANT la plaque et hors de son opacité : à 200, la plaque est blanche. **0,4 depuis le réglage de Franck au panneau `/verre`, 2026-09-16 au soir** (curseur à 140). */ --verre-plus: .4; /* ⚠️⚠️ **70 % — ET C'EST CE QUI PORTE LA LISIBILITÉ DEPUIS QUE LA PLAQUE EST À 31.** À plaque 31 % et carte 40 %, le texte de la page de connexion tombait à **2,70 contre 4,5 exigé**. Le blanc a été déplacé là où il ne se voit presque pas : une carte fait 34 rem sur un écran entier. *Mesuré fond par fond : les sept passent, le plus dur `galets-rivage` rend **4,67**.* */ --verre-vif: rgba(255, 255, 255, .52); /* NIVEAU 1 — une zone SUR elle */ --verre-creux: rgba(255, 255, 255, .30); /* un champ, une zone reçue */ --verre-bord: rgba(255, 255, 255, .42); --verre-arete: rgba(255, 255, 255, .18); /* la tranche du haut */ /* ══ LA COUCHE 1 — LES PLAQUES DE VERRE ══════════════════════════════ 2026-09-22, demande de Franck : *« applique aux plaques de verre (Couche 1) les mêmes paramètres de transparence, rebord, reflet, pour toutes les pages du site »*. ⚠️⚠️ **CE JEU EXISTE PARCE QUE LA VALEUR ÉTAIT ÉCRITE EN DUR À DEUX ENDROITS.** Mesuré ce jour-là : `rgba(255, 255, 255, .72)` vivait dans `--rail-fond` **et** dans la plaque de `/connexion`, sans que rien ne les relie. *Deux copies d'un même nombre divergent au premier réglage — c'est ce que le §5 de `CLAUDE.md` appelle un défaut, pas une variante.* Le rebord, l'arête et le flou se lisent directement (`--verre-bord`, `--verre-arete`, `--flou`) ; la couche 1 n'a en propre que son fond et son reflet. ⚠️ **CE QU'IL NE FAUT PAS CONFONDRE AVEC `--verre`** : celui-là est le NIVEAU 0, la plaque du corps de page, peinte dans `body::before` et réduite par `--opacite-cadre`. **Celui-ci est la COUCHE 1** — une plaque posée SUR le fond : le panneau de connexion, le rail. */ --plaque: rgba(255, 255, 255, .72); /* ⚠️ **LE REFLET EST UN DÉGRADÉ, DONC UN JETON À PART ENTIÈRE.** Il était écrit deux fois, au signe près : `linear-gradient(140deg, rgba(255,255,255,.30) 0%, var(--reflet-nul) 45%)` dans la plaque de `/connexion` **et** dans celle du rail, la seconde passant par `--rail-lumiere` pour dire le même `.30`. *Deux écritures d'un même reflet, c'est deux reflets dès qu'on en règle un.* ⚠️ **140° ET NON 180°** : la lumière vient du coin haut-gauche, comme sur les planches de la direction visuelle — un dégradé vertical ferait un bandeau, pas un reflet. */ --plaque-reflet: linear-gradient(140deg, rgba(255, 255, 255, .30) 0%, var(--reflet-nul) 45%); /* ⚠️ **LE FLOU EST DEVENU CE QUI FAIT LE VERRE — 2026-08-28.** Il accompagnait un calque blanc ; il le remplace. 30 px et non 16 : c'est l'uniformité du fond flouté qui tient désormais le contraste, là où c'était l'opacité du blanc. La saturation monte avec — un fond très flouté se désature, et la vidéo perdrait sa couleur. */ /* ⚠️⚠️ **60px DEPUIS LE 2026-09-06, ET LE CONTRASTE Y GAGNE — DEMANDE DE FRANCK : « effet très flou ».** On aurait pu craindre l'inverse ; la mesure dit le contraire, et le motif est mécanique : **plus le rayon est grand, plus le point le plus SOMBRE du fond remonte vers la moyenne locale.** Mesuré sur les sept fonds retenus, au pire point, voile 70 % et plaque comprise : blur(30px) → 5 fonds sur 8 passent les DEUX seuils blur(60px) → 7 fonds sur 8 *Le seul qui reste dessous — les montagnes brumeuses, `--encre-douce` à 4,44 contre 4,5 — a été écarté pour cette raison.* */ /* ⚠️ **90px LE 2026-09-06 — « augmenter de beaucoup le flou ».** ⚠️⚠️ **CE QU'IL FAUT SAVOIR : LE GAIN DE CONTRASTE EST SATURÉ.** Mesuré sur le fond le plus dur — 60px → 4,69 · 90px → 4,70 · 140px → 4,75. *Au-delà de 60, le flou ne fait plus qu'un effet ; il ne protège plus rien.* On le pousse donc pour ce qu'il montre, pas pour ce qu'il mesure — et 140 coûterait une passe de rendu plus large sans rien rendre de plus à l'œil. */ /* ⚠️⚠️ **`--flou` NE SERT PLUS À LA GRANDE PLAQUE DEPUIS LE 2026-09-06 — ARBITRAGE DE FRANCK : « la texture n'est pas du tout une texture de verre ».** Le verre se fait désormais par une **copie floutée du fond, calculée à la préparation**, plus un **grain fractal** : voir `--verre-grain` et `--fond-flou` ci-dessous. ⚠️ **CE QUI A DÉCIDÉ DU CHANGEMENT N'EST PAS LE GOÛT, C'EST UNE MESURE.** `backdrop-filter` floute, mais **il ne texture rien** : il rend du blanc translucide, jamais du verre. *Le micro-relief — ce qui fait qu'une vitre dépolie se reconnaît — n'existe pas dans le filtre.* ⚠️ **IL RESTE DÉFINI**, et employé par le rail et quelques barres collantes : là, il n'y a pas de fond photographique à recopier. */ --flou: blur(24px) saturate(1.55); /* ══ LE VERRE, DEUXIÈME MANIÈRE — 2026-09-06 ═══════════════════ ⚠️⚠️ **LE FLOU VIT DANS LE FICHIER, PLUS DANS LE MOTEUR.** Chaque fond a quatre copies floutées, `-f1` à `-f4`, de la plus douce à la plus nette ; la cinquième est l'image elle-même. **`--fond-flou` désigne celle qu'on affiche**, et c'est ce que le curseur de netteté règle. ⚠️ **`background-attachment: fixed` EST CE QUI ALIGNE LES DEUX IMAGES.** La copie floutée et le fond net se calent tous deux sur le viewport, donc **ils se superposent au pixel près**, quel que soit le format de la fenêtre ou la position de la plaque. *Sans `fixed`, chaque plaque recadrerait l'image sur elle-même et le décalage sauterait aux yeux.* ⚠️⚠️ **LE GRAIN EST CE QUI MANQUAIT, ET IL TIENT EN 300 OCTETS.** Un bruit fractal SVG en `data:` — aucune requête réseau, aucun fichier à déployer. *C'est lui qui donne le micro-relief du verre dépoli ; sans lui, une plaque n'est qu'un aplat blanc translucide, ce que Franck a nommé « pas du tout une texture de verre ».* ⚠️ **LE `data:` RESTE AUTORISÉ PAR LA POLITIQUE DE SÉCURITÉ** : `img-src 'self' data:` le prévoit explicitement. *Une bibliothèque de « glassmorphism » servie par un CDN serait, elle, bloquée.* */ /* ⚠️⚠️ **VALEUR RETENUE PAR FRANCK LE 2026-09-06, AU CURSEUR : cran 55 — flou `f3`, voile 31 %.** *C'est son arbitrage, et il prime (D10).* ⚠️⚠️ **ELLE NE TIENT LE CONTRASTE QUE PARCE QUE LA CARTE A ÉTÉ ÉPAISSIE EN MÊME TEMPS.** À plaque 31 % et carte 40 %, le texte tombait à **2,70 contre 4,5 exigé** — l'outil l'annonçait en rouge. Le blanc a donc été déplacé là où il ne se voit presque pas : **la carte passe à 70 %**, et les sept fonds repassent au-dessus du seuil. *Mesuré fond par fond : le plus dur, `galets-rivage`, rend 4,82.* ⚠️ **LA PLAQUE, ELLE, GARDE SES 31 %** — c'est-à-dire l'aspect demandé. Ce qui change est un rectangle de 34 rem sur un écran entier. */ /* ⚠️ **FOND CHANGÉ LE 2026-09-08, DEMANDE DE FRANCK** — `elg21-fog`, des pics karstiques dans une mer de nuages. Préparé comme les sept autres : 1920 de large, la copie floutée au rayon 12 (calibré sur la netteté des `-f3` servis : 1,09 pour une fourchette mesurée de 0,64 à 1,36). ⚠️ **IL EST PLUS SOMBRE QUE `galets-brume` — 0,302 de luminance moyenne contre 0,465 — ET LE CONTRASTE A ÉTÉ REMESURÉ** : sur les cartes, là où le texte vit, il rend **7,93 contre 8,02**, très au-dessus des 4,5 de WCAG 1.4.3. *La plaque nue descend à 3,86 au premier centile — comme l'ancien à 4,06 : c'est pour cela que le texte est sur les cartes et non sur la plaque.* */ /* ⚠️⚠️ **LA COPIE PRÉ-CALCULÉE EST REVENUE — SECOND RÉGLAGE DE FRANCK, LE 2026-09-16.** Le matin, `none` et un `backdrop-filter` sur `body::before`, qui floutait en direct ; l'après-midi, la copie de « Rochers mauves ». **Le filtre de la plaque est parti dans le même geste** : l'image est opaque, et il aurait payé une passe de rendu par page pour zéro pixel visible — ce que le 2026-09-06 avait déjà retiré une fois. ⚠️ **Le paysage NET vit ailleurs** : `` de `_navigation.html`. Les deux doivent nommer le même paysage, sinon le verre montre une autre photo que celle qu'il recouvre. ⚠️ **« PICS DANS LA BRUME » DEPUIS LE 2026-09-16 AU SOIR** — demande de Franck : *« mettre pic de brume comme fond pour toutes les pages »*. Il l'était déjà du 2026-09-08 au matin du 16 ; « Rochers mauves » n'a tenu que l'après-midi. */ /* ⚠️⚠️ **`none` DEPUIS LE RÉGLAGE DE FRANCK AU PANNEAU `/VERRE`, 2026-09-16 AU SOIR** : le flou se fait EN DIRECT (`backdrop-filter` de `body::before`), sur « Plage et jetée ». La copie pré-floutée ne sert plus que si le panneau décoche le flou direct. */ --fond-flou: none; /* ⚠️⚠️ **TROIS FRÉQUENCES, ET C'EST CE QUI FAIT LA DIFFÉRENCE ENTRE DU SABLE ET DU VERRE — 2026-09-06, demande de Franck : « ajouter des zones d'imperfections ».** Un bruit unique donne une texture uniforme, donc plate. Une vitre réelle porte trois échelles de défaut, et il faut les trois : ① **les ondulations** — `baseFrequency: .0016`, de larges plages douces : la variation d'épaisseur d'un verre coulé ; ② **les taches** — `.007`, plus contrastées : les défauts de surface, les traces d'essuyage ; ③ **le grain** — `.7` : le dépoli lui-même. ⚠️⚠️ **CE QUI REND LE BRUIT NEUTRE, C'EST L'ORDONNÉE — ET ELLE EST MESURÉE, PAS CALCULÉE.** Chaque étage a été rendu seul dans un canvas et son ordonnée corrigée jusqu'à ce que le gris moyen tombe sur **128**, le neutre de `soft-light`. *La formule `.5 − pente/2` ne vaut que pour `fractalNoise` ; `turbulence` rend une **valeur absolue**, de moyenne bien plus basse, et elle donnait **96 pour 128**.* D'où une ordonnée **négative** pour les ondulations (pente 1,7 → −0,3840) et **positive** pour les taches (pente 1,35 → +0,1026) : ce ne sont pas des réglages de goût, ce sont deux recalages vers le même gris. ⚠️ **UNE ORDONNÉE NE VEUT RIEN DIRE SANS SA PENTE**, et les deux ne se déduisent PAS l'une de l'autre par le calcul : l'écrêtage à 0 et à 1 après application de la pente déplace la moyenne, et c'est pourquoi elles ont été mesurées étage par étage plutôt que calculées.* ⚠️ **LE TROISIÈME ÉTAGE PORTE `slope 1.0` ET `intercept 0` — UNE IDENTITÉ, ET C'EST VOULU** : `fractalNoise` est **déjà** centré sur 128, il n'a rien à recaler. *Seul son `feFuncA` travaille, en forçant l'alpha à 1 — sans quoi l'alpha aléatoire corrèle transparence et couleur, et la couche assombrit au lieu de moduler.* ⚠️ **1600 × 1200 ET `cover`, DONC UNE SEULE TUILE.** `feTurbulence` n'est pas périodique : à 420 px répétés, **le quadrillage se voyait**. */ /* ⚠️ **LE MODE DE FUSION DU GRAIN EST UN JETON DEPUIS LE 2026-09-16.** Il était écrit dans `background-blend-mode`, donc hors d'atteinte d'un `var()`. *Même valeur : c'est `soft-light` qui sépare une imperfection d'une salissure — voir la note de `body::before`.* */ --verre-fusion: normal; /* ⚠️⚠️ **LE GRAIN EST ÉTEINT DEPUIS LE 2026-09-16 — RÉGLAGE DE FRANCK.** Le jeton que lit `body::before` vaut `none` ; la tuile reste déclarée juste en dessous, sous son propre nom. **La supprimer perdrait la recette** — trois bruits, leurs fréquences, leurs graines — qu'aucun script du dépôt ne refabrique. *Le panneau de `/verre` la reconstruit, lui, à partir de ses huit curseurs : c'est une autre voie, pas celle-ci.* */ --verre-grain: none; --verre-grain-tuile: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAwJyBoZWlnaHQ9JzEyMDAnPjxmaWx0ZXIgaWQ9J28nIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQic+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9Jy4wMDE2JyBudW1PY3RhdmVzPScyJyBzZWVkPSc3Jy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjxmZUNvbXBvbmVudFRyYW5zZmVyPjxmZUZ1bmNSIHR5cGU9J2xpbmVhcicgc2xvcGU9JzEuNycgaW50ZXJjZXB0PSctMC4zODQwJy8+PGZlRnVuY0cgdHlwZT0nbGluZWFyJyBzbG9wZT0nMS43JyBpbnRlcmNlcHQ9Jy0wLjM4NDAnLz48ZmVGdW5jQiB0eXBlPSdsaW5lYXInIHNsb3BlPScxLjcnIGludGVyY2VwdD0nLTAuMzg0MCcvPjxmZUZ1bmNBIHR5cGU9J2xpbmVhcicgc2xvcGU9JzAnIGludGVyY2VwdD0nMScvPjwvZmVDb21wb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48ZmlsdGVyIGlkPSd0JyBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9J3NSR0InPjxmZVR1cmJ1bGVuY2UgdHlwZT0ndHVyYnVsZW5jZScgYmFzZUZyZXF1ZW5jeT0nLjAwNycgbnVtT2N0YXZlcz0nMycgc2VlZD0nMTknLz48ZmVDb2xvck1hdHJpeCB0eXBlPSdzYXR1cmF0ZScgdmFsdWVzPScwJy8+PGZlQ29tcG9uZW50VHJhbnNmZXI+PGZlRnVuY1IgdHlwZT0nbGluZWFyJyBzbG9wZT0nMS4zNScgaW50ZXJjZXB0PScwLjEwMjYnLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScxLjM1JyBpbnRlcmNlcHQ9JzAuMTAyNicvPjxmZUZ1bmNCIHR5cGU9J2xpbmVhcicgc2xvcGU9JzEuMzUnIGludGVyY2VwdD0nMC4xMDI2Jy8+PGZlRnVuY0EgdHlwZT0nbGluZWFyJyBzbG9wZT0nMCcgaW50ZXJjZXB0PScxJy8+PC9mZUNvbXBvbmVudFRyYW5zZmVyPjwvZmlsdGVyPjxmaWx0ZXIgaWQ9J2cnIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQic+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9Jy43JyBudW1PY3RhdmVzPSczJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjxmZUNvbXBvbmVudFRyYW5zZmVyPjxmZUZ1bmNSIHR5cGU9J2xpbmVhcicgc2xvcGU9JzEuMCcgaW50ZXJjZXB0PScwLjAwMDAnLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScxLjAnIGludGVyY2VwdD0nMC4wMDAwJy8+PGZlRnVuY0IgdHlwZT0nbGluZWFyJyBzbG9wZT0nMS4wJyBpbnRlcmNlcHQ9JzAuMDAwMCcvPjxmZUZ1bmNBIHR5cGU9J2xpbmVhcicgc2xvcGU9JzAnIGludGVyY2VwdD0nMScvPjwvZmVDb21wb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTYwMCcgaGVpZ2h0PScxMjAwJyBmaWx0ZXI9J3VybCgjbyknIG9wYWNpdHk9JzAuNDUnLz48cmVjdCB3aWR0aD0nMTYwMCcgaGVpZ2h0PScxMjAwJyBmaWx0ZXI9J3VybCgjdCknIG9wYWNpdHk9JzAuMycvPjxyZWN0IHdpZHRoPScxNjAwJyBoZWlnaHQ9JzEyMDAnIGZpbHRlcj0ndXJsKCNnKScgb3BhY2l0eT0nMC4yNScvPjwvc3ZnPg=="); /* ══ LES ENCRES — DEUX NIVEAUX, ET PAS TROIS ══════════════════════ ⚠️ **LE TROISIÈME NIVEAU N'EXISTE PLUS, ET C'EST UNE CONSÉQUENCE MESURÉE DU VERRE.** Sur du papier plein, trois gris tenaient (10,1 / 6,8 / 5,0:1). Sur du verre, le fond remonte : le second niveau tombe déjà à 4,86:1, et un troisième passerait sous 4. **La hiérarchie se fait donc à la taille et à la graisse, plus à la pâleur.** C'est le prix de la transparence, et il se paie ici. */ --encre: #2F3E46; /* 7,24:1 sur le verre au pire instant */ --encre-douce: #47585F; /* 4,86:1 — LA LIMITE BASSE, rien en deçà */ /* Les seize écrans écrivent `--encre-pale`. Il ne peut plus être plus pâle que le second niveau : l'alias garde le nom sans le mensonge. */ --encre-pale: var(--encre-douce); /* ══ CE QUI RESTE DES DEUX CAMPS ══════════════════════════════════ ⚠️ **IL N'Y A PLUS DE CAMP SOMBRE — ARBITRAGE DU 2026-08-28.** La règle *« le papier est ce que le client voit, la nuit est ce qu'il ne voit pas »* n'est plus portée par le fond : le kit n'a qu'une ambiance claire, et Franck a tranché pour elle. **Ce que le fond disait doit maintenant être ÉCRIT.** Un panneau invisible du client porte un cadenas et une mention en toutes lettres — voir `.hors-vue` plus bas. *Une règle métier qui ne se lisait qu'à la couleur se lit désormais au mot : c'est moins immédiat, mais cela survit à un écran monochrome et à un daltonien, ce que la couleur seule ne faisait pas.* Les jetons de nuit restent définis et deviennent du verre teinté d'ardoise : les seize écrans non convertis suivent tout seuls. */ --nuit: rgba(47, 62, 70, .09); --nuit-clair: rgba(47, 62, 70, .16); --nuit-creux: rgba(47, 62, 70, .05); --lueur: var(--encre); --lueur-pale: var(--encre-douce); --lueur-vive: var(--encre); /* Un seul vocabulaire de surface (2026-10-12) : `--verre-vif` pour une zone posée sur la plaque, `--verre-creux` pour un champ. Les alias `--papier-*`, `--carte` et `--matiere` sont retirés — ils ne suivaient pas le curseur. */ --papier: transparent; /* le corps laisse voir la vidéo */ /* ══ LES STATUTS ══════════════════════════════════════════════════ Ils disent un ÉTAT, jamais une catégorie, et le libellé reste obligatoire. Retendus pour tenir sur le verre — un vert de statut trop clair s'y noierait, et il ne doit surtout pas se confondre avec la sauge de la marque. */ --bon: #24603B; --attention: #8A5A00; --alerte: #9E2B21; --bon-nuit: var(--bon); --attention-nuit: var(--attention); --alerte-nuit: var(--alerte); /* ══ LES ÉTAPES DU PROCESSUS — 3.5, 2026-09-04 ════════════════════ La frise du bandeau de séance, et elle seule. **Ce ne sont PAS des statuts au sens ci-dessus** : un statut dit « bon / attention / alerte », ceux-là disent une POSITION dans un parcours — d'où une famille séparée plutôt qu'un détournement de `--bon`. Teintes arrêtées par Franck le 2026-09-03. ⚠️ **ELLES ÉTAIENT HUIT, ELLES SONT SIX depuis le 2026-09-04** — les deux plus pâles ont été abandonnées, voir l'encadré sous la liste. ⚠️ **L'ENCRE SUIT LA CLARTÉ DU FOND, ET C'EST MESURÉ À CHAQUE RETOUCHE.** Le blanc demandé à l'origine sur les verts pâles donnait **1,27:1** et **1,70:1** — WCAG 1.4.3 en exige 4,5. La règle est donc : *blanc sur sombre, encre sur clair*. Relevé du 2026-09-04 sur la feuille posée : **de 4,83:1 à 9,60:1**, le pire étant le blanc sur `--etape-sautee`. ⚠️⚠️ **ET LE PIC DU BATTEMENT EST MESURÉ DEPUIS CE JOUR-LÀ, IL NE L'AVAIT JAMAIS ÉTÉ.** `filter: brightness(1.14) saturate(1.2)` s'applique à l'étape courante : **la teinte qu'on lit au sommet n'est pas celle qui est déclarée**. `#B5E6A2` y monte à `#CEFFB9` et `#8ED973` à `#9EFF7B` — **9,82:1 et 8,98:1**, donc au-dessus. *Le pic éclaircit, il ne fonce pas : le risque était théorique, il est désormais mesuré.* ⚠️ **LA COULEUR N'EST JAMAIS SEULE À PORTER L'ÉTAT.** Trois verts qui ne diffèrent que par la saturation sont indiscernables en niveaux de gris : chaque pastille porte sa lettre, l'étape courante porte son anneau, son nom et son palier en toutes lettres. */ --etape-franchie: #12501A; /* le critère de passage est tenu */ --etape-prochaine: #F1A983; /* celle qui vient juste après */ --etape-a-venir: #FBE2D5; /* le reste du parcours */ --etape-sautee: #BE5014; /* enjambée sans avoir été franchie */ --etape-entamee: #B5E6A2; /* l'étape courante : aucun élément */ --etape-bien-engagee: #8ED973; /* du critère, puis au moins un */ /* ⚠️⚠️ **DEUX TEINTES ONT ÉTÉ ABANDONNÉES LE 2026-09-04, ET IL FAUT SAVOIR LAQUELLE COMPTAIT.** Franck : *« couleur trop pastel, état pas clair »*. Mesuré avant d'y toucher : sur **771 lignes** peintes, **14 seulement étaient saturées** — 1,8 %. · `#DAF2D0`, l'ancien `entamee`, était le vert le plus pâle **et celui qu'on voyait presque toujours** : 34 relevés sur 36. · `#C1F0C8`, l'ancien `--etape-en-cours`, était le REPLI — l'étape courante dont l'avancement n'est pas mesuré. ⚠️ **Le retirer était le geste décisif** : il est plus pâle que le nouveau `entamee`, et le laisser aurait déplacé la rampe **en gardant la teinte la plus pâle en place**. Le repli prend donc `--etape-entamee` : « en cours, au minimum entamée » est vrai par construction. ⚠️ **`--etape-tenue` A DISPARU, LA VALEUR NON.** La migration 60 cesse de demander `tenue` au modèle — elle était inatteignable, la vue ne rendant l'avancement que pour l'étape COURANTE, laquelle a déjà changé quand le critère est tenu. Mais `db.py` continue de l'ACCEPTER, et la feuille la replie sur `--etape-bien-engagee` : *rien n'est perdu d'une mesure plus forte que celle qu'on garde, et la production, qui la demande encore, ne régresse pas.* ⚠️ **LES RATIOS SONT RECALCULÉS PLUS BAS**, sur les six teintes. */ /* alias employés par les écrans d'administration */ --vert: var(--bon); --rouge: var(--alerte); --vert-pale: rgba(36, 96, 59, .10); --rouge-pale: rgba(158, 43, 33, .10); /* ══ LA VOIX DU TUTEUR ════════════════════════════════════════════ ⚠️ **ELLE NE VEUT DIRE QU'UNE CHOSE : c'est le tuteur ou le superviseur qui parle** — ni le coach, ni le client. Le jour où elle décore autre chose, elle ne dit plus rien. C'est le rose du kit, assombri pour porter du texte : la teinte vient de la planche, la valeur vient de la mesure. */ --annotation: #8C4A57; /* 5,0:1 sur le verre */ /* ⚠️ **À .40 IL PEIGNAIT, À .22 IL TEINTE** — relevé à l'écran le 2026-08-28. Une colonne entière de rose franc reprenait le poids que le fond marine avait, et ramenait le défaut qu'on venait de retirer : un panneau qui se distingue par sa couleur SEULE. Ce qui doit se voir, c'est le cadenas et la mention. */ --annotation-fond: rgba(232, 174, 183, .22); --annotation-nuit: var(--annotation); /* ══ LES FILETS ET LE FOCUS ═══════════════════════════════════════ */ --filet: rgba(47, 62, 70, .13); --filet-fort: rgba(47, 62, 70, .26); --filet-nuit: rgba(47, 62, 70, .16); --bord: var(--filet); --bord-fort: var(--filet-fort); --trait: var(--filet); --trait-fort: var(--filet-fort); --focus: var(--sauge-plein); --focus-nuit: var(--sauge-plein); --marque: var(--sauge-plein); --marque-vif: var(--sauge-vif); --marque-pale: rgba(94, 139, 126, .16); --bleu-pale: rgba(167, 199, 231, .22); /* ══ LES OMBRES ═══════════════════════════════════════════════════ ⚠️ **LE RELIEF DE LA 3.1 EST ABANDONNÉ — ARBITRAGE DU 2026-08-28.** La doctrine disait *ce qui agit SORT, ce qui reçoit se CREUSE*, en deux ombres opposées, et cela se voyait sans lire. Le kit pose des ombres portées simples ; il devait être suivi. **Ce qui remplace le relief pour distinguer un bouton d'un champ** : le bouton est PLEIN et coloré, le champ est CREUX et translucide. La différence passe de l'ombre à la matière. */ /* ══ PLUS AUCUNE OMBRE PORTÉE — 2026-09-22, DEMANDE DE FRANCK ══════ *« supprimer toutes les ombres portées des pages du site »*. ⚠️⚠️ **« OMBRE PORTÉE » N'EST PAS « TOUTE `box-shadow` », ET LA DIFFÉRENCE SE MESURE.** Le dépôt en portait **83** ; seulement **20** étaient des ombres portées — un décalage ET un flou. Les 63 autres sont des **liserés `inset` de 1 px** qui dessinent le bord des cartes, des **soulignés d'onglet actif** (`inset 0 -2px 0`), des **creux de champ**, des **anneaux de focus** (`0 0 0 3px`, sans flou) et des **halos d'alerte** (`0 0 24px -8px`, sans décalage). ⚠️ **LES RETIRER AURAIT COÛTÉ CHER, ET DEUX FOIS PLUTÔT QU'UNE** : les cartes auraient perdu leur contour, et **le focus au clavier serait devenu invisible** — WCAG 2.4.7, qui n'est pas négociable. *Une première mesure en annonçait 53 : elle comptait `--creuse` et `--creuse-douce` comme des ombres alors que leur VALEUR est `inset`. Le mot `inset` n'est pas sur la ligne d'usage — il est dans le jeton.* **Seize des vingt passaient par ces jetons-ci**, d'où la coupe à la source plutôt qu'en vingt endroits. */ --pose: none; --pose-forte: none; /* Un champ ne s'enfonce plus : il se creuse par la transparence et un filet interne d'un pixel. */ --creuse: inset 0 0 0 1px rgba(47,62,70,.10); --creuse-douce: inset 0 0 0 1px rgba(47,62,70,.07); /* ══ LES RAYONS ═══════════════════════════════════════════════════ Le kit est très arrondi : ses champs et ses boutons portent le rayon que ce produit réservait à ses pastilles. */ /* ⚠️ **`--r-fin` EST NÉ LE 2026-08-29** : seize déclarations arrondissaient des jauges, des barres et des puces à 4, 6 ou 7 px, faute d'un cran sous `--r`. Un jeton qui manque est une valeur qu'on réinvente à chaque écran. */ --r-fin: 4px; /* jauges, barres, puces — plus petit qu'un bloc */ --r: 8px; /* champs, boutons, petits blocs */ --r-doux: 20px; /* une carte */ --r-panneau: 40px; /* un grand panneau de verre */ --r-plein: 999px; /* ══ LA TOUCHE — UN VERRE BOMBÉ DANS UN CADRE MÉTALLIQUE ═════════ ⚠️⚠️ **DEMANDE DE FRANCK, 2026-08-29, PLANCHE À L'APPUI** : *« il faut changer le design de ce bouton, et de tous les autres. Tous éléments cliquables doit avoir le style de l'image ».* **Ce que la planche montre, et qu'aucune de ces trois lignes n'est décorative** : un CADRE de métal qui prend la lumière en haut et en bas et s'assombrit au milieu — c'est lui qui donne l'épaisseur ; un CORPS presque blanc coupé par une arête horizontale vers la moitié — c'est le glacis, et il fait le bombé ; une PORTÉE douce dessous. ⚠️ **LE CADRE SE FAIT PAR `background-clip`, PAS PAR `border-color`.** Une bordure CSS ne prend qu'une couleur : un cadre en dégradé n'existe qu'en peignant deux fonds, l'un jusqu'au bord intérieur (`padding-box`), l'autre jusqu'au bord extérieur (`border-box`), la bordure elle-même étant transparente. *C'est la seule façon d'avoir du métal sur une pilule sans une image.* ⚠️ **LA CASSURE DU CORPS EST À 46 %, ET ELLE COMPTE.** Deux arrêts collés — 46 % clair, 46,5 % plus sombre — font une ARÊTE nette, pas un dégradé. C'est elle qu'on lit comme du verre bombé ; un dégradé continu se lit comme un aplat sale. */ /* ⚠️ **LE CHROME DESCEND VITE ET REMONTE VITE.** Un dégradé régulier du blanc au gris donne du plastique ; ce qui fait le métal est la BANDE SOMBRE étroite au milieu, prise entre deux lumières franches. *Première version trop douce — le cadre ne se lisait pas à l'écran, mesuré sur une capture de l'élément.* */ --chrome: linear-gradient(180deg, #ffffff 0%, #eef3f5 6%, #a8b3b9 16%, #5a656b 34%, #414b51 50%, #6b757b 62%, #b4bec3 78%, #f2f6f7 93%, #ffffff 100%); /* ⚠️ **LE GLACIS EST UNE CALOTTE, PAS UNE BANDE.** La planche montre une séparation COURBE entre la moitié claire et le corps : c'est elle qui fait le bombé. Une ligne droite se lit comme deux aplats empilés. L'ellipse est placée au-dessus du bouton et déborde de part et d'autre, ce qui lui donne sa courbure douce. */ --touche: radial-gradient(ellipse 132% 94% at 50% -20%, #ffffff 0%, #ffffff 52%, rgba(255,255,255,0) 53%), linear-gradient(180deg, #eef3f5 0%, #e2e9ec 58%, #f4f8f9 100%); --touche-vive: radial-gradient(ellipse 132% 94% at 50% -20%, #ffffff 0%, #ffffff 56%, rgba(255,255,255,0) 57%), linear-gradient(180deg, #f5f9fa 0%, #eaf1f4 58%, #ffffff 100%); --touche-creuse: radial-gradient(ellipse 132% 94% at 50% -20%, #e9eff1 0%, #e9eff1 48%, rgba(255,255,255,0) 49%), linear-gradient(180deg, #d8e0e4 0%, #e6edef 60%, #f6fafb 100%); /* Le relief de la touche, dans l'ordre où l'œil le lit : l'arête du haut, le creux du bas, le liseré de lumière sous le cadre, la portée. */ /* ⚠️ **LE PREMIER TRAIT EST UN LISERÉ EXTÉRIEUR, ET IL EST NÉCESSAIRE** : sur un fond clair, un cadre qui finit en blanc pur se dissout dans la page. Un demi-pixel d'encre à 30 % ferme le contour. */ /* ⚠️ **LA COUCHE PORTÉE EST PARTIE, LE RELIEF RESTE — 2026-09-22.** Chacun de ces trois jetons empilait cinq couches, dont **une seule** était une ombre portée : `0 5px 12px`, `0 9px 20px`, `0 1px 2px`. Ce qui reste — le demi-pixel de contour, le liseré blanc du haut, le creux interne — **n'est pas une ombre** : c'est ce qui fait qu'une touche se lit comme une touche. *Les retirer aurait dissous les boutons dans la page, ce que le commentaire du dessus dit déjà.* ⚠️ Le `0 1px 0 rgba(255,255,255,…)` reste aussi : sans flou, c'est un filet de lumière d'un pixel, pas une ombre. */ --touche-relief: 0 0 0 .5px rgba(47, 62, 70, .30), inset 0 1px 0 #ffffff, inset 0 -2px 3px rgba(47, 62, 70, .13), 0 1px 0 rgba(255, 255, 255, .85); --touche-relief-fort: 0 0 0 .5px rgba(47, 62, 70, .34), inset 0 1px 0 #ffffff, inset 0 -2px 3px rgba(47, 62, 70, .10), 0 1px 0 rgba(255, 255, 255, .9); --touche-relief-enfonce: 0 0 0 .5px rgba(47, 62, 70, .34), inset 0 2px 5px rgba(47, 62, 70, .26); /* pastilles, jetons, puces */ --r-petit: var(--r); /* ⚠️ **LA GOUTTIÈRE**, et sa largeur est CONSTANTE sur tous les écrans : c'est ce qui fait qu'on lit la marge d'un écran à l'autre sans réapprendre où regarder. */ --gouttiere: 3.4rem; /* ══ LES BLANCS DE REFLET ═════════════════════════════════════════ ⚠️ **TROUVÉS PAR `verif_gabarits` LE 2026-08-29, APRÈS LA CENTRALISATION** — et c'est ce qui prouve que le contrôle sert : ils avaient échappé aux quatre passes faites à la main. `#fff` dans trois feuilles, deux paliers de reflet dans deux chacun. ⚠️ **`--blanc` N'EST PAS UN FOND**, et le nom doit le dire : sur cette direction, un fond est du VERRE. Le blanc pur ne sert qu'à la lumière — une arête, le haut d'un dégradé, le pouce d'un interrupteur. */ --blanc: #fff; /* le blanc pur — un reflet, jamais un fond */ --reflet: rgba(255, 255, 255, .55); /* la lumière d'un dégradé de verre */ --reflet-nul: rgba(255, 255, 255, 0); /* sa fin — un dégradé s'éteint, il ne coupe pas */ /* ══ LES COULEURS QUI ÉTAIENT ÉCRITES DANS DEUX FEUILLES ══════════ ⚠️ **UNE COULEUR ÉCRITE DEUX FOIS EST UNE DÉCISION PRISE DEUX FOIS** — 2026-08-29. Elle tient tant que personne ne touche à l'un des deux endroits, et le jour où quelqu'un le fait, **rien ne signale que l'autre n'a pas suivi**. Les huit ci-dessous étaient dans ce cas, relevées en croisant les vingt feuilles. */ --fond-anomalie: #f3dedc; /* le fond d'une étiquette « anomalie » */ --fond-suggestion: #dde9e0; /* le fond d'une étiquette « suggestion » */ --fond-question: #f2e6cc; /* le fond d'une étiquette « question » */ --fond-satisfaction: #dcdff2; /* le fond d'une étiquette « satisfaction » */ --filet-pale: #e2e2e2; /* un filet de séparation, plus clair que --filet */ --mesure-bleu: #2b6ca8; /* le bleu des écrans de mesure — consommation */ --mesure-vert: #1e7a45; /* le vert des écrans de mesure — les montants sur consommation, la séance sur temps */ /* ══ L'ÉCHELLE TYPOGRAPHIQUE — SEPT CRANS, ET PAS UN DE PLUS ══════ ⚠️⚠️ **LES VINGT FEUILLES ÉCRIVAIENT 336 `font-size` POUR 51 VALEURS DISTINCTES — 2026-08-29, demande de Franck : « le graphisme n'est pas cohérent d'une page à l'autre ».** Il avait raison sur le constat, et la mesure a déplacé la cause : ce n'était pas la dispersion des fichiers, c'était que **chaque feuille inventait sa valeur**. `.78` et `.79`, `.81` et `.82` : **un sixième de pixel d'écart**, qu'aucune décision ne fonde et que personne ne distingue. ⚠️ **CHAQUE CRAN EST LE PIC DE FRÉQUENCE DE SON GROUPE**, pas une progression théorique : c'est ce qui fait que le moins d'endroits possible changent d'apparence. Une échelle géométrique aurait été plus élégante et aurait déplacé trois fois plus de texte. **Une feuille de page n'écrit plus jamais une taille.** Si aucun cran ne convient, c'est l'échelle qu'on discute — pas la feuille qu'on excepte. */ --taille-mention: .68rem; /* mentions, unités, exposants — le plus petit qui reste lisible */ --taille-etiquette: .74rem; /* étiquettes, intitulés de colonne, aides brèves */ --taille-aide: .8rem; /* les textes d'aide et les seconds rôles */ --taille-courant: .87rem; /* le texte courant d'interface : libellés, menus, touches */ --taille-lecture: .92rem; /* ce qui se lit en continu : paragraphes, statuts */ --taille-appui: .97rem; /* ce qui doit ressortir sans être un titre */ --taille-fort: 1.05rem; /* un sous-titre, une valeur mise en avant */ } /* ⚠️ **LE RAIL SORT DE LA NUIT — 2026-08-28.** Il était le premier objet du camp sombre, et le seul présent sur les seize écrans. Le kit n'ayant qu'une ambiance claire, il devient une PLAQUE DE VERRE comme les autres : même matière, même flou, même arête. ⚠️ **CE QU'IL PERD, ET IL FAUT LE DIRE** : le contraste franc entre la colonne de navigation et la page. Ce qui le remplace est le FILET à droite — supprimé en 3.1 au motif que *« deux camps qui se touchent n'ont pas besoin d'être séparés par un trait »*. Il n'y a plus deux camps : le trait redevient nécessaire. */ :root { /* ⚠️ **16,5 rem ET NON 14 — MESURÉ LE 2026-08-28, ET C'EST LE REPLI QUI L'IMPOSE.** À 14 rem, « Historique de vos séances » demande 179 px pour 145 disponibles : il se replie sur deux lignes. Tant que le rail était toujours ouvert, cela ne coûtait qu'une rangée plus haute. **Replié, c'est un défaut** : le libellé continue de se replier alors qu'il est invisible, la rangée fait 62 px au lieu de 40, et les icônes cessent d'être régulièrement espacées. ⚠️ *Il était écrit ici que « le rail déployé passe PAR-DESSUS le contenu au lieu de le pousser » : **c'est faux depuis l'arbitrage de Franck du 2026-08-28**, quatre cents lignes plus bas — le contenu est POUSSÉ. La phrase a survécu à la décision qu'elle décrivait.* */ --rail: 16.5rem; /* la colonne DÉPLOYÉE */ /* ⚠️ **4,15 rem N'EST PAS UN NOMBRE ROND, ET C'EST VOULU** : c'est exactement l'icône (1,05 rem) plus les deux retraits du lien (2 × 1,1 rem) plus la marge du lien (2 × 0,5 rem). Une valeur arrondie décentrerait les icônes de quelques pixels, ce qui se voit sur une colonne verticale de sept lignes. */ --rail-replie: 4.15rem; /* la colonne REPLIÉE, icônes seules */ /* ⚠️ **DEUX COURBES, ET ELLES NE SONT PAS SYMÉTRIQUES — demande de Franck le 2026-08-28 : *« lorsque le menu se déploie, cela doit être plus lent »*.** · **L'OUVERTURE prend 680 ms et attend 140 ms** — allongée depuis 420 ms, seconde demande de Franck le même jour : *« l'animation du menu doit être plus douce et plus longue »*. ⚠️ **ET LA COURBE COMPTE AUTANT QUE LA DURÉE.** Allonger seule une courbe à départ franc ne rend pas le geste plus doux : elle étire le freinage, et le mouvement paraît traîner au lieu de glisser. `cubic-bezier(.4, .04, .2, 1)` démarre LENTEMENT et finit lentement — la colonne s'ébranle au lieu de partir. Le délai de 140 ms ne bouge pas : c'est ce qui empêche le menu de s'ouvrir quand la souris ne fait que TRAVERSER la colonne pour aller ailleurs. **Plus l'ouverture est longue, plus ce délai est nécessaire** — un déploiement de 680 ms déclenché par mégarde met presque une seconde à se défaire. · **LA FERMETURE prend 380 ms et n'attend pas.** Elle s'allonge aussi — une fermeture sèche après une ouverture douce se remarque —, mais elle reste **deux fois plus rapide** : un menu qui tarde à se refermer donne l'impression de coller au doigt. *On peut être lent à offrir, jamais lent à rendre la place.* */ --rail-ouvre: .68s cubic-bezier(.4, .04, .2, 1) .14s; --rail-ferme: .38s cubic-bezier(.4, .04, .2, 1) 0s; /* ⚠️⚠️ **UN BLANC À LUI, ET PLUS AUCUN JETON EMPRUNTÉ — 2026-09-06.** *Ce chapeau a annoncé « `--verre` et non plus `--voile-haut` » pendant une heure, au-dessus d'une valeur qui n'était déjà ni l'un ni l'autre : rectifié par le vérificateur, en même temps que le reste du bloc.* Le rail empruntait le voile du FOND ; le jour où celui-ci est tombé de 70 à 30 % pour dégager la photo, **le rail est devenu translucide et ses onze libellés se sont posés sur les galets**. *Un couplage qui tenait tant que les deux valeurs se ressemblaient, et qui casse à la première divergence.* ⚠️ **LE RAIL EST UNE PLAQUE, PAS UN VOILE** : il porte du texte, donc il lui faut un blanc à lui. C'est la même distinction qui a permis de baisser le voile sans perdre la lisibilité. ⚠️⚠️ **ET IL NE PREND PLUS `var(--verre)` — CORRIGÉ LE 2026-09-06, TROUVÉ PAR LA REVUE D'INTENTION.** Il l'a pris tant que ce jeton valait **70 %** ; l'arbitrage au curseur l'a fait tomber à **31 %**, et le rail a suivi sans que personne ne le mesure. ⚠️⚠️ **LE RAIL N'EST PAS SUR LA GRANDE PLAQUE, IL EST SUR LA PHOTO.** C'est toute la différence, et c'est pourquoi le même chiffre ne peut pas servir aux deux : la plaque pose `--fond-flou`, une image **opaque** qui lui donne un fond maîtrisé ; le rail, lui, n'a que son propre blanc entre l'œil et les galets. *Mesuré sur les pixels peints de l'accueil : à 31 %, `--encre-douce` rend **5,80 en haut du rail et 3,50 en bas**, là où la photo s'assombrit — **sous le seuil sur plus de la moitié de sa hauteur**.* ⚠️⚠️ **70 % ET NON 55 — ET LA RAISON EST LA MARGE, PAS UN SCÉNARIO.** À 55 %, le bas du rail rend **4,54** : quatre centièmes au-dessus du seuil, c'est-à-dire rien. À 70 % il rend **5,40**. *Une valeur qui passe de justesse repasse en dessous au premier fond un peu plus sombre, et les sept fonds ne sont pas interchangeables.* ⚠️⚠️ **ET SI LE FLOU NE S'APPLIQUAIT PAS, 70 % TIENDRAIT ENCORE.** Le rail compte sur `backdrop-filter` pour adoucir la photo ; **rien ne garantit qu'il s'applique partout et toujours**. Mesuré sur l'image NETTE, voile de fond compris : 55 % tombe à **3,88**, 70 % tient **4,90 au pire**. *C'est une marge de robustesse, pas une prédiction.* ⚠⚠ **CE BLOC A INVOQUÉ UN MÉCANISME QUI N'EXISTE PAS — RETIRÉ LE 2026-09-06, PAR LE VÉRIFICATEUR.** Il était écrit ici qu'un lecteur ayant désactivé les effets de transparence « voit le rail sur l'image nette ». **Aucune feuille du dépôt n'implémente `prefers-reduced-transparency`** — `grep` rend zéro — **et aucun navigateur ne coupe `backdrop-filter` sur ce réglage système.** *La valeur était bonne et la raison était fausse : j'avais écrit une CAUSE là où je n'avais qu'une marge de sécurité. C'est le défaut même que ce dépôt combat, et il s'est produit dans le commentaire qui le corrige.* ⚠️ **UN SEUL CONSOMMATEUR DEPUIS LE 2026-09-10.** Ce jeton servait aussi de halo à la pastille du compteur de retours, quand le rail se repliait ; la pastille est partie, et le halo avec elle. */ /* ══ LE RAIL EST UNE PLAQUE DE VERRE — 2026-09-16 ═══════════════ ⚠️⚠️ **DEMANDE DE FRANCK** : *« applique le même type de paramètre au rail du menu qu'aux plaques de verre »*. Il n'en avait que deux — un blanc et un filet — quand une plaque en a six. **Les quatre qui manquaient sont ici**, et l'écran `/verre` les règle tous. ⚠️ **SON FLOU EST À LUI DEPUIS CE JOUR.** Il empruntait `--flou-fort`, celui des bandeaux : régler le flou du site déréglait le rail sans qu'on le demande. *Il part de la même valeur, il ne la suit plus.* */ /* ⚠️⚠️ **PLUS TRANSPARENT DEPUIS LE 2026-09-16 — DEMANDE DE FRANCK : « le menu doit être plus transparent ».** Le blanc passe de 12 à 4 %, le reflet de 50 à 14 %, et surtout **le flou de 107 à 18 px** : à 107 px le paysage n'était plus qu'une teinte, à 18 il se reconnaît derrière le menu. ⚠️ **CE QUI REND CETTE TRANSPARENCE POSSIBLE, C'EST LA TUILE.** Mesuré le même jour : à 12 % de blanc, les libellés posés À MÊME le rail tombaient à **3,86:1**, 78 % des pixels sous le seuil. Chaque entrée porte désormais sa propre zone de verre posée, `--rail-tuile` : le rail peut s'effacer, le libellé ne se lit plus sur la photo. */ /* ⚠⚠ **LES SIX VALEURS CI-DESSOUS SONT CELLES DE LA ZONE DE CONNEXION DEPUIS LE 2026-09-21 — DEMANDE DE FRANCK** : *« je veux que le fond du menu de toutes les pages soit la copie parfaite des paramètres de la zone de connexion »*. Elles sont reprises une à une de `body div.panneau` (`pages/connexion.css`) : 72 % de blanc, le flou commun, le bord et l'arête du verre, la lumière à 30 % du dégradé 140°. ⚠⚠ **CE QUI EST COPIÉ EST LE CSS DE LA PLAQUE, ET IL FAUT SAVOIR QUE CE N'EST PAS CE QUE L'ŒIL VOIT SUR `/connexion` — mesuré au navigateur le 2026-09-21.** Sur cette page-là, `html.verre-liquide` met le fond du panneau à `transparent` et lui retire son flou : le verre est peint par une **toile WebGL**, `verre-liquide.js`. Ces six valeurs sont donc le REPLI du panneau — ce qu'il montre quand la toile ne tourne pas. *La toile sait déjà peindre le rail (groupe `menu`), elle n'est simplement chargée par aucun gabarit à rail : c'est un arbitrage à part, et il coûte une toile WebGL sur chaque page.* ⚠️ **CE QUE CES VALEURS REMPLACENT, ET POURQUOI ON LE PERD SANS REGRET NULLE PART AILLEURS** : le menu tenait **8 % de blanc et un flou NUL** (`blur(0px)`) — réglage de Franck du 2026-09-16, qui voulait *« un menu plus transparent »* et voir le paysage à travers. À 72 %, on ne le voit plus. **Le contraste des libellés n'y perd rien, il y gagne** : c'est la tuile qui les portait sur un rail à 8 %, et 72 % de blanc est plus clair que tout ce que la tuile posait. *Voir l'ajustement des tuiles ci-dessous.* */ /* ⚠️ Le rail EST une plaque de couche 1 : il prend le jeu commun depuis le 2026-09-22. Sa valeur était la même, écrite deux fois. */ /* Le rail lit `--verre-bord`, `--verre-arete` et `--flou` comme le panneau d'entrée ; seuls lui restent son fond (`--rail-fond`) et sa lumière. */ --rail-fond: var(--plaque); --rail-lumiere: rgba(255, 255, 255, .30); /* ⚠️ **EN PILULE DEPUIS LE 2026-09-21 — DEMANDE DE FRANCK** : *« le menu doit être en demi-cercle aux extrémités »*. `--r-plein` vaut 999 px : sur une boîte deux fois plus haute que large, un rayon plus grand que la demi-largeur donne **exactement un demi-cercle** en haut et en bas, sans qu'aucun chiffre ne soit à recalculer si la largeur change. *Il valait 14 px, et seulement à droite — le menu était collé aux trois autres bords.* */ --rail-arrondi: var(--r-plein); /* ⚠️ **LE MENU NE TOUCHE PLUS LES BORDS — DEMANDE DE FRANCK, 2026-09-21** : *« environ 20 pixels »*. En haut, à gauche et en bas ; la page se décale d'autant (`html { padding-left }`, `navigation.css`). ⚠️ **EN `px` ET NON EN `rem`, à l'inverse des dimensions du menu.** C'est une marge par rapport à la FENÊTRE, pas une taille de contenu : elle n'a aucune raison de grandir avec la police choisie dans le navigateur. */ --rail-ecart: 20px; /* ⚠️ **LE PLAT DU BOUT : CE QUE L'ARRONDI INTERDIT AU CONTENU.** Une pilule de 108 px de large a des demi-cercles de 54 px de rayon : une tuile pleine largeur posée dans cette zone serait rognée par la courbe, en silence. Cette réserve est le padding haut et bas du menu — mesurée au navigateur, pas déduite : le logo est étroit et centré, il s'accommode de moins que le rayon plein. *Elle valait `.9rem` en haut et `.7rem` en bas, quand les bouts étaient carrés.* ⚠️ **1,6 rem EST LA PLUS PETITE VALEUR QUI PASSE, ET C'EST MESURÉ.** Un contrôle au navigateur a comparé les coins de chaque élément PEINT — les tuiles, les deux filets, le logo, les icônes du pied, la bande des ronds — à l'équation de la pilule, en fenêtre de 900 px et de 560 px. À **0,9 rem, la bande des ronds sort de la courbe** ; à 1,2 elle passe de justesse ; à 1,6 tout passe aux deux hauteurs. *Chaque dixième de rem en trop est pris sur la liste des entrées, et se paie en fenêtre courte.* */ --rail-bout: 1.6rem; /* ⚠️⚠️ **LA TUILE : 80 % DE BLANC, ET LE CHIFFRE N'EST PAS UN GOÛT.** Posée sur du NOIR — le pire paysage possible —, elle vaut encore #CCCCCC : libellé en `--encre` **6,89:1**, icône en `--encre-douce` **4,62:1** (une icône n'exige que 3:1). *Sous 80 %, l'icône passe sous 4,5 au pire cas.* */ /* ⚠️⚠️ **12 % DEPUIS LE SECOND RÉGLAGE DE FRANCK, LE 2026-09-16 — LE CALCUL CI-DESSUS DÉCRIT LE RÉGLAGE D'AVANT (80 %).** À 12 %, la tuile ne porte plus la lecture à elle seule : le nom se lit sur le paysage qu'elle laisse passer. Le contraste réel est mesuré sur les pixels et consigné au journal — il ne se déduit plus d'un pire cas. */ /* ⚠⚠ **LA TUILE CHANGE DE SENS QUAND LE MENU PASSE À 72 % — 2026-09-21.** Du blanc à 22 % posé sur un menu à 8 % se voyait ; posé sur un menu à 72 %, il ne se voit plus : **la tuile et son fond sont le même blanc**, et l'entrée active ne se distingue plus de ses voisines. *C'est le même raisonnement que la note d'au-dessus, pris à l'envers : la tuile existait pour porter la lecture là où le rail s'effaçait ; le rail ne s'efface plus, la tuile n'a plus qu'à DÉLIMITER.* Elle devient donc un creux — une ombre portée très légère du même encre que le texte — plutôt qu'un voile blanc : `--nuit-creux` est le jeton de la maison pour cela, et c'est celui qu'emploie déjà `--verre-creux` ailleurs. Découplée de la palette (2026-10-12) : ces deux jetons portent leur valeur, donc se règlent depuis `/apparence` sans bouger `--nuit-*`. */ --rail-tuile: rgba(47, 62, 70, .05); --rail-tuile-vive: rgba(47, 62, 70, .16); --rail-tuile-bord: rgba(47, 62, 70, .10); /* ══ LES DIMENSIONS DU MENU, EN JETONS — 2026-09-16 ══════════════════ ⚠️⚠️ **DEMANDE DE FRANCK : « fais une catégorie de curseurs pour tous les paramètres graphiques du menu ».** Ces valeurs étaient écrites en dur dans le bloc « le rail en tuiles », en bas de cette feuille : aucun curseur ne pouvait les atteindre. **Mêmes valeurs qu'avant, au centième de rem.** ⚠️ **EN `rem` ET NON EN `px`.** Une taille en pixels ignore la taille de police choisie dans le navigateur ; en `rem`, le menu grandit avec elle. Le panneau règle donc des centièmes de rem, pas des pixels. ⚠️ **DEUX JEUX POUR LE TÉLÉPHONE, ET SEULEMENT DEUX-LÀ.** La largeur, la hauteur des tuiles, l'icône et le logo ont leur valeur propre sous 48 rem ; l'écart et la marge latérale sont communs (ils différaient de 0,05 rem, moins d'un pixel). *Le seuil de 48 rem, lui, ne peut pas être un jeton : une media query ne lit pas de variable CSS.* */ /* ⚠️ **6,75 rem ET NOMS À 0,84 rem — réglage de Franck au panneau `/verre`, 2026-09-16 au soir.** Les noms « Admin » et « Setup / verre » tiennent sans coupure à cette largeur (mesuré, entrées en gras). *Le logo ne dépend pas de la largeur du menu.* */ --rail-ordinateur: 6.75rem; --rail-telephone: 3.4rem; --rail-tuile-flou: 33px; --rail-tuile-arrondi: 18px; --rail-tuile-hauteur: 4.25rem; --rail-tuile-hauteur-telephone: 2.55rem; --rail-tuile-ecart: .25rem; --rail-marge: .3rem; --rail-icone: 1.4rem; --rail-icone-telephone: 1.35rem; /* ⚠️ **0,84 rem — réglage de Franck au panneau `/verre`, 2026-09-16 au soir.** ⚠️ **Toujours mesurer une nouvelle taille EN GRAS** : l'entrée active passe en 700 — mesurée en graisse normale, « Administration » avait paru tenir et se coupait. */ --rail-nom-taille: .84rem; --rail-logo: 2.95rem; --rail-logo-telephone: 1.25rem; --rail-mot: 4.4rem; --rail-maree-epaisseur: 6px; --rail-maree-retrait: 17%; --rail-soulevement: 8px; --rail-texte: var(--encre-douce, var(--encre-douce)); --rail-actif: var(--encre, var(--ardoise)); } /* ══ LE VERRE LIQUIDE — UN SEUL JEU ══════════════════════════════════════ Une variable par paramètre de texture : pages, menu et entrée sont une même matière (47 valeurs sur 48 étaient identiques). Le script les lit sur `body` au démarrage et à chaque réglage ; la page d'entrée surcharge seulement `--vl-voile-zones` (0) par sa portée, dans `connexion.css`. La lisibilité est portée par `voile-centre` et `voile-zones` : le blanc est sur les zones posées, pas sur la plaque (interdit n° 9 de la direction visuelle). */ :root { --vl-refraction: 90; /* px : décalage du fond au ras du bord */ --vl-largeur-bord: 42; /* px : bande où le verre se bombe */ --vl-profil: 6; /* > 1 : la déformation se ramasse au bord */ --vl-aberration: 0.42; /* écart entre rouge, vert et bleu */ --vl-flou: 0; /* px : dépoli (0 = net) */ --vl-reflet: 0.5; /* liseré, reflet, brillance */ --vl-voile-centre: 0; /* blanc sous le contenu */ --vl-voile-bord: 0.02; /* blanc au ras du bord */ --vl-voile-global: 0; /* blanc sur toute la plaque */ --vl-voile-zones: 0.72; /* blanc des cartes et blocs posés */ --vl-courbure: 0.12; /* bombé (< 0 = creusé) */ --vl-grain: 0; /* micro-relief */ --vl-zoom: 1.12; /* grossissement à travers le verre */ --vl-survol: 0.23; /* polarisation sous la souris */ --vl-survol-rayon: 90; /* px : étendue du survol */ --vl-lissage: 0.14; /* poursuite du pointeur, par image */ }