/* `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 vidéo en boucle, et par-dessus un voile blanc en dégradé. Le
     voile n'est PAS une politesse : sans lui rien n'est lisible. */
  /* ⚠️ **.48 NE SUFFISAIT PAS, ET LA MESURE LE DIT.** Un titre de page
     se trouve à ~19 % de la hauteur, donc près du HAUT du dégradé. À
     .48, l'encre principale n'y donnait que **3,15:1** au pire instant
     de la boucle. À .62 elle donne 4,68 — c'est le filet de sécurité,
     pas le confort : le confort vient de la plaque de verre. */
  /* ⚠⚠ **PORTÉ DE .62 À .70 LE 2026-09-01, ET C'EST LA VIDÉO QUI
     L'A EXIGÉ — et la justification a changé le jour même, pas le
     chiffre.** Elle a d'abord été posée pour une vidéo bleu nuit ;
     celle en service est un CIEL, remisé le même jour. **Le ciel est
     plus contrasté qu'on ne croit** : remesuré sur lui, `.62` rend
     **4,85** et `.70` rend **5,37**. *La valeur tient pour les deux
     vidéos, mais elle a failli être gardée sur un motif périmé.*
     **Mesuré sur les pixels rendus,
     voile compris, en balayant la boucle** : à .62, `--encre-douce`
     tombait à **4,33:1** au pire instant — **sous le seuil AA de
     4,5**, et loin des **4,86** que cette charte se donne pour
     plancher. À .70, le pire remonte à **5,16:1**.

     ⚠️ **LE PIRE INSTANT N'EST PAS LE PREMIER** : une première mesure,
     prise sur une seule image, rendait 4,61 et paraissait tenir. *Une
     vidéo de fond se mesure sur sa BOUCLE, pas sur son affiche.*

     Ce que cela coûte : le haut de page est un peu plus voilé, donc la
     vidéo un peu moins présente. *C'est le prix d'un fond sombre sous
     une encre foncée, et il se paie en haut de page ou en lisibilité.* */
  /* ⚠️⚠️ **LE VOILE TOMBE DE 70 À 30 % LE 2026-09-06 — DEMANDE DE
     FRANCK : « diminuer de beaucoup le voile blanc ».** Le fond devient
     **2,3 fois plus visible** partout où aucune plaque ne le couvre : les
     marges de page, et toute la page de connexion autour de la carte.

     ⚠️⚠️ **ET LE TEXTE N'Y PERD RIEN, PARCE QUE LE BLANC A CHANGÉ DE
     PORTEUR, PAS DE QUANTITÉ.** Le voile et le verre sont deux blancs qui
     se cumulent, mais ils ne couvrent pas la même chose : **le voile
     couvre TOUT le fond, le verre seulement la plaque qui porte du
     texte.** En baissant l'un et montant l'autre, le blanc reçu SOUS le
     texte reste le même — et le fond se dégage partout ailleurs :

         avant   voile 70 % puis verre 32 %  →  blanc équivalent 80 %
         après   voile 30 % puis verre 70 %  →  blanc équivalent 79 %

     **Mesuré : 7 fonds sur 7 passent les deux seuils dans les deux cas.**

     ⚠️⚠️ **CE CALCUL EST PÉRIMÉ DEPUIS LE SOIR MÊME — NOTÉ LE
     2026-09-06, TROUVÉ PAR LA REVUE D'INTENTION.** Il décrit un état qui a
     duré quelques heures : `--verre` **ne vaut plus 70 % mais 31 %**, par
     arbitrage de Franck au curseur. Le blanc équivalent réel est donc
     **52 %**, pas 79.

     ⚠️⚠️ **ET SURTOUT, LE VOILE N'ENTRE PLUS DANS CE CALCUL DU TOUT.**
     La plaque pose désormais `--fond-flou`, une image **opaque** qui recouvre
     le voile : ce que l'œil reçoit sous le texte est la copie floutée plus
     31 % de blanc, et le voile ne se voit plus **que hors des plaques**.

     ⚠️ **CE QUI A ÉTÉ REMESURÉ SUR LES PIXELS PEINTS, ET QUI TIENT** :
     sur l'accueil, le texte posé **directement sur la plaque** — titres,
     tableaux, tout ce qui n'est pas dans une carte — rend **7,86 à 10,33**
     du haut au bas de la page. *Le raisonnement ci-dessus est faux ; le
     résultat, lui, est bon, et c'est `--fond-flou` qui le porte.* **Le
     chiffre qu'il faut retenir est celui de la mesure, pas celui du
     modèle.**

     ⚠️ **CE QU'ON NE POUVAIT 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 sauvait rien : même à gamma 2,8, le meilleur
     fond plafonnait à 4,24. *Le blanc sous le texte n'est pas
     négociable ; son EMPLACEMENT l'est.* */
  --voile-haut: rgba(255, 255, 255, .88);
  /* ⚠⚠ **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, .76);
  /* ⚠️ **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.*

     ⚠️⚠️ **CET ENCADRÉ A ANNONCÉ « 70 % » PENDANT QUELQUES HEURES,
     AU-DESSUS D'UNE VALEUR QUI VALAIT DÉJÀ 31 — RECTIFIÉ LE SOIR MÊME, PAR
     LA REVUE D'INTENTION.** Le 70 était vrai le matin ; le curseur l'a
     ramené à 31 l'après-midi, et le commentaire est resté. *Un commentaire
     qui défend la valeur d'avant est pire qu'aucun commentaire : il fait
     raisonner juste sur un chiffre faux.*

     ⚠️⚠️ **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`.

     ⚠️ *Passée par 26 % le 2026-08-29, 32 le matin, 70 à midi, 31 au soir.* */
  --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**.*

     ⚠️ **DEUX ENCADRÉS SE SUCCÉDAIENT ICI, L'UN DISANT 40 ET L'AUTRE 70,
     LE MÊME JOUR** — le premier a été retiré le 2026-09-06 au soir, sur
     constat de la revue d'intention. *Le 40 fut vrai le matin, quand la
     plaque valait 70 : les deux valeurs ont échangé leurs rôles dans la
     journée, et les deux commentaires sont restés côte à côte.* */
  --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        */
  /* ⚠️ **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, `<nom>-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** : `<img>` 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.

     ⚠️⚠️ **CES TROIS CHIFFRES ONT ÉTÉ ÉCRITS `.006`, `.028` ET `.85`
     PENDANT QUELQUES HEURES — RECTIFIÉS LE 2026-09-06 AU SOIR, PAR LA
     REVUE D'INTENTION.** C'étaient ceux de la tuile de 420 px ; **la tuile
     fait maintenant 1600 × 1200**, et les fréquences ont été divisées
     d'autant pour garder la même échelle de motif à l'écran.

     ⚠️⚠️ **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.

     ⚠️ **LES DEUX PENTES MANQUAIENT ICI — AJOUTÉES LE 2026-09-06, PAR LE
     VÉRIFICATEUR.** Le bloc n'annonçait qu'une pente sur trois, et une
     ordonnée ne veut rien dire sans elle. ⚠️ *Et les deux ordonnées 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**.
     *L'encadré disait « 420 px de côté, pas 180 » — c'était l'étape
     d'avant, et le même défaut d'un cran plus loin.* */
  /* ⚠️ **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==");
  --flou-fort:    blur(29px) saturate(1.64);

  /* ══ 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);

  /* Les anciens noms du papier, remis sur le verre. */
  --papier:       transparent;          /* le corps laisse voir la vidéo */
  --papier-vif:   var(--verre-vif);
  --papier-creux: var(--verre-creux);
  --carte:        var(--verre);
  --matiere:      var(--verre);
  --fond:         transparent;

  /* ══ 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** — le bloc qui les porte
     disait « aucune des huit teintes n'a bougé » ; il en reste six. */

  /* 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);
  --marque-ombre: rgba(94, 139, 126, .30);
  --accent-clair: rgba(167, 199, 231, .22);
  --accent:       var(--bleu);
  --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. */
  --pose:        0 1px 2px rgba(47,62,70,.194), 0 11px 17px rgba(47,62,70,.310);
  --pose-forte:  0 2px 4px rgba(47,62,70,.271), 0 22px 27px rgba(47,62,70,.504);
  --pose-nuit:       var(--pose);
  --pose-nuit-forte: var(--pose-forte);
  /* 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);
  --creuse-nuit:  var(--creuse);
  --saisie:       var(--creuse);
  --saisie-nuit:  var(--creuse);
  --clair-papier:  rgba(255,255,255,.85);
  --sombre-papier: rgba(47,62,70,.10);
  --clair-nuit:    rgba(255,255,255,.5);
  --sombre-nuit:   rgba(47,62,70,.12);
  --relief:      none;
  --relief-doux: none;

  /* ══ 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. */
  --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),
                   0 5px 12px rgba(47, 62, 70, .24);
  --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),
                        0 9px 20px rgba(47, 62, 70, .30);
  --touche-relief-enfonce: 0 0 0 .5px rgba(47, 62, 70, .34),
                           inset 0 2px 5px rgba(47, 62, 70, .26),
                           0 1px 2px rgba(47, 62, 70, .18);  /* pastilles, jetons, puces                       */
  --r-grand: var(--r-doux);
  --r-moyen: var(--r);
  --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 */
  --rose-appui:          #f0c2c9;                 /* le rose du kit, en survol d'action secondaire */

  /* ══ 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.* */
  --rail-fond:    rgba(255, 255, 255, .72);
  --rail-bord:    var(--verre-bord);
  --rail-arete:   var(--verre-arete);
  --rail-flou:    var(--flou);
  --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à `--papier-creux` ailleurs. */
  --rail-tuile:      var(--nuit-creux);
  --rail-tuile-vive: var(--nuit-clair);
  --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 — 2026-09-18 ═══════════════════════════════════════
   ⚠️⚠️ **CES QUARANTE-HUIT JETONS ÉTAIENT ÉCRITS EN DUR DANS
   `verre-liquide.js`**, et c'est tout le sens de l'action ② de Franck : un
   nombre qui décide de l'apparence vit dans LA feuille, jamais dans un
   script. Le script les lit au démarrage (`getComputedStyle`), et la page
   de réglage n'écrit qu'ici.

   ⚠️ **TROIS GROUPES, ET ILS NE SE MÉLANGENT PAS** : `pages` la plaque des
   écrans connectés, `menu` le rail, `connexion` la page d'entrée — qui est
   la même pour `/connexion` et `/bienvenue`.

   ⚠️ **CE QUI PORTE LA LISIBILITÉ** : `voile-centre` et `voile-zones`. Le
   blanc est sur les zones posées (0,72), pas sur la plaque — doctrine de la
   maison, interdit n° 9 de la direction visuelle. */
:root {
  /* La plaque des pages — valeurs de Franck, second réglage du 2026-09-18 */
  --vl-pages-refraction: 90;        /* px : décalage du fond au ras du bord */
  --vl-pages-largeur-bord: 42;      /* px : bande où le verre se bombe */
  --vl-pages-profil: 6;           /* > 1 : la déformation se ramasse au bord */
  --vl-pages-aberration: 0.42;      /* écart entre rouge, vert et bleu */
  --vl-pages-flou: 0;               /* px : dépoli (0 = net) */
  --vl-pages-reflet: 0.5;          /* liseré, reflet, brillance */
  --vl-pages-voile-centre: 0;    /* blanc sous le contenu */
  --vl-pages-voile-bord: 0.02;         /* blanc au ras du bord */
  --vl-pages-voile-global: 0;       /* blanc sur toute la plaque */
  --vl-pages-voile-zones: 0.72;     /* blanc des cartes et blocs posés */
  --vl-pages-courbure: 0.12;        /* bombé (< 0 = creusé) */
  --vl-pages-grain: 0;              /* micro-relief */
  --vl-pages-zoom: 1.12;            /* grossissement à travers le verre */
  --vl-pages-survol: 0.23;          /* polarisation sous la souris */
  --vl-pages-survol-rayon: 90;     /* px : étendue du survol */
  --vl-pages-lissage: 0.14;         /* poursuite du pointeur, par image */

  /* Le rail du menu */
  --vl-menu-refraction: 90;
  --vl-menu-largeur-bord: 42;
  --vl-menu-profil: 6;
  --vl-menu-aberration: 0.42;
  --vl-menu-flou: 0;
  --vl-menu-reflet: 0.5;
  --vl-menu-voile-centre: 0;
  --vl-menu-voile-bord: 0.02;
  --vl-menu-voile-global: 0;
  --vl-menu-voile-zones: 0;
  --vl-menu-courbure: 0.12;
  --vl-menu-grain: 0;
  --vl-menu-zoom: 1.12;
  --vl-menu-survol: 0.23;
  --vl-menu-survol-rayon: 90;
  --vl-menu-lissage: 0.14;

  /* ⚠️⚠️ **LE VOILE DE LA PLAQUE D'ENTRÉE — 25 %, UNIFORME, ET C'EST MESURÉ.**
     Constat de Franck, 2026-09-18 : *« un voile blanc supplémentaire semble être
     posé sur la zone de connexion »*. **Il ne se trompait pas, et le défaut
     n'était pas la QUANTITÉ mais la FORME** : `connexion.css` posait un dégradé
     `140deg`, blanc à 30 % sur le premier tiers et nul ensuite. Un voile qui
     s'arrête en diagonale se voit comme une pièce rapportée ; un voile uniforme
     se lit comme la matière du verre.

     ⚠️ **ET LE RETIRER TOUT À FAIT N'ÉTAIT PAS POSSIBLE.** Relevé sur les pixels
     rendus, texte noir sur la plaque : **3,73:1 avec l'ancien dégradé, 3,42:1
     sans rien** — *les deux SOUS le seuil de 4,5:1, l'ancien état y compris*.
     À **25 % uniforme** : médiane **5,83:1**, cinquième le plus sombre
     **4,45:1**. C'est le minimum qui passe.

     ⚠️ **FIGÉ**, comme les seize réglages du verre de l'entrée : il change ici,
     dans le code, avec son journal — pas depuis un écran. */
  --voile-entree: rgba(255, 255, 255, .25);

  /* La page d'entrée — `/connexion` et `/bienvenue`, le même gabarit.

     ⚠️⚠️ **LES QUINZE VALEURS SONT CELLES DE FRANCK, RELEVÉES AU CURSEUR LE
     2026-09-19** : *« voici les valeurs que je veux que tu codes en dur dans la
     page pour que la transparence ne bouge plus »*. **C'est ICI qu'elles vivent,
     et nulle part ailleurs** — `verre-liquide.js` lit ces jetons AVANT ses
     propres défauts (`depuisLaFeuille`), et `/apparence.css` n'en porte aucun
     écart. *Deux tentatives de correction ont été faites dans le JavaScript le
     18 et le 19 : elles n'ont rien changé à l'écran, parce que cette ligne-ci
     gagnait.*

     ⚠️ **CE QUI A CHANGÉ CE JOUR-LÀ** : réfraction 28 → **90** (le maximum du
     curseur), bord 80 → **42**, profil 5,5 → **6**, dépoli 1,5 → **0**, reflet
     2 → **0,5**, voile au centre 0,19 → **0**, grossissement 1,21 → **1,12**,
     survol 0,11 → **0,23** sur **90 px** au lieu de 220. *Le verre déforme
     beaucoup, ne blanchit plus, et ne brouille plus rien.*

     ⚠️⚠️ **LE TEXTE DE CETTE PAGE EST À 3,42:1, SOUS LE SEUIL AA DE 4,5** —
     mesuré le 18. **Arbitrage de Franck, énoncé trois fois** : *« supprime les
     règles de lisibilité »*. Pour revenir en arrière, un seul chiffre :
     `--vl-connexion-voile-centre` à 0,19. */
  --vl-connexion-refraction: 90;
  --vl-connexion-largeur-bord: 42;
  --vl-connexion-profil: 6;
  --vl-connexion-aberration: 0.42;
  --vl-connexion-flou: 0;
  --vl-connexion-reflet: 0.5;
  --vl-connexion-voile-centre: 0;
  --vl-connexion-voile-bord: 0.02;
  /* ⚠️⚠️ **CE CURSEUR-LÀ NE FAIT RIEN, ET C'EST MESURÉ — 2026-09-18 au soir.**
     Posé à **0,12** puis à **0,55**, il rend **exactement les mêmes pixels** :
     médiane 3,42:1 dans les deux cas, relevé sur les captures. Le voile global
     n'est pas câblé dans la toile. **Il reste à 0** : une valeur qui ne change
     rien est pire qu'une valeur absente, elle fait croire que c'est réglé.
     *C'est le troisième réglage sans effet trouvé dans la même journée.* */
  --vl-connexion-voile-global: 0;
  --vl-connexion-voile-zones: 0;
  --vl-connexion-courbure: 0.12;
  --vl-connexion-grain: 0;
  --vl-connexion-zoom: 1.12;
  --vl-connexion-survol: 0.23;
  --vl-connexion-survol-rayon: 90;
  --vl-connexion-lissage: 0.14;
}
