@zevra/ui 0.34.0 → 0.36.0

package/DECISIONS.md

@@ -1,7 +1,7 @@
 # Arbitrages de relevé
 
 Les cinq maquettes de la passation ne s'accordent pas toujours. Ce fichier
-liste chaque désaccord, la valeur retenue et pourquoi — pour qu'aucun écart ne
+liste chaque désaccord, la valeur retenue et pourquoi : pour qu'aucun écart ne
 soit tranché en silence, et que la DA puisse rejuger sur pièces.
 
 Sources : les dix planches de `reference/maquettes/` et
@@ -17,7 +17,7 @@ Les deux questions laissées ouvertes à la première livraison sont **closes**,
 et dans le sens qui avait été retenu. Les cinq planches ajoutées le
 confirment à l'unanimité.
 
-### 1. Le sens du dégradé de signature — clos
+### 1. Le sens du dégradé de signature : clos
 
 | Source | Valeur |
 |---|---|
@@ -30,7 +30,7 @@ Les cinq nouvelles planches posent toutes `linear-gradient(90deg, #8a3af8,
 token est donc la bonne ; les trois planches historiques sont en retard, pas
 en désaccord.
 
-### 2. Le rayon des cartes — clos
+### 2. Le rayon des cartes : clos
 
 Les cinq nouvelles planches codent `border-radius: 16px` sur `.panel`, soit
 `--r-card`. Le `14px` de DesignSystem et Logos et le `12px` du prototype
@@ -40,20 +40,20 @@ appartiennent à l'état antérieur.
 
 ## Tranché sans ambiguïté
 
-**Hauteur des boutons — 48px.** Main, Mobile et le prototype s'accordent ;
+**Hauteur des boutons : 48px.** Main, Mobile et le prototype s'accordent ;
 DesignSystem est seule à 46px.
 
-**Icône du lien fléché — 15×15.** Quatre occurrences dans Main contre une à
+**Icône du lien fléché : 15×15.** Quatre occurrences dans Main contre une à
 16px dans DesignSystem.
 
-**Pastille — 28px de haut, 10px de texte, 0.18em.** Main et le prototype
+**Pastille (28px de haut, 10px de texte, 0.18em.** Main et le prototype
 s'accordent ; DesignSystem est plus grande (30/11), Mobile plus petite
-(26/0.16em — repris dans la déclinaison mobile).
+(26/0.16em) repris dans la déclinaison mobile).
 
-**Puce de source — `--accent-deep`.** Main et le prototype ; DesignSystem pose
+**Puce de source : `--accent-deep`.** Main et le prototype ; DesignSystem pose
 `--accent`.
 
-**Entité pseudonymisée — 10px, `1px 6px`.** Main et DesignSystem ; le
+**Entité pseudonymisée : 10px, `1px 6px`.** Main et DesignSystem ; le
 prototype est plus grand (11px, `2px 7px`).
 
 **Les deux encarts ne sont pas le même composant.** `.zv-inset` (blanc,
@@ -77,17 +77,17 @@ Deux choix d'implémentation méritent d'être dits :
   view())`. Un navigateur sans support affiche la page complète, jamais un
   écran vide en attente d'une animation qui ne viendra pas ;
 - les deux boucles animent les propriétés `translate` et `scale`
-  indépendantes, jamais `transform` — le halo est centré par
+  indépendantes, jamais `transform` : le halo est centré par
   `translateX(-50%)`, qu'une animation sur `transform` écraserait. La
   maquette contournait le problème en recopiant le `translateX(-50%)` dans
   chaque image-clé ; la propriété indépendante compose proprement.
 
 **Six blocs de plus.** Citation, carte de tarif, FAQ, aperçu d'interface,
-bande de preuve sociale, pied de page réduit — relevés dans `Blocks.html`,
+bande de preuve sociale, pied de page réduit : relevés dans `Blocks.html`,
 qui liste les composants du site. Deux d'entre eux portent une règle
 éditoriale que le CSS ne peut pas faire respecter et qui est donc écrite en
 commentaire : **jamais de fausse citation**, et **jamais de lorem dans un
-aperçu d'interface** — c'est ce bloc qui porte la crédibilité de la page.
+aperçu d'interface**, c'est ce bloc qui porte la crédibilité de la page.
 
 **Un palier typographique et une accroche.** `.zv-note` (12,5px) et
 `.zv-tagline`, la phrase d'accroche posée sous le nom d'un glyphe, moins
@@ -105,7 +105,7 @@ n'a été inventé pour combler l'écart.
 ## Ajouts assumés, hors relevé
 
 **Le point de rupture à 768px.** Les cinq maquettes sont à largeur fixe, sans
-une seule media query — Mobile.html est un rendu figé à 390px. Le seuil vient
+une seule media query : Mobile.html est un rendu figé à 390px. Le seuil vient
 de la convention `md` du projet ; les valeurs mobiles, elles, sont toutes
 relevées dans Mobile.html. Un test vérifie qu'il reste unique.
 
@@ -135,20 +135,20 @@ production, qui emploie les mêmes tokens de charte. Trois arbitrages de fond
 ont été rendus :
 
 **Les neutres.** Mémoire emploie six niveaux de gris là où la charte en a
-trois, et deux d'entre eux — #6B7488 et #727C93 — **échouent au contraste AA**
+trois, et deux d'entre eux, #6B7488 et #727C93, **échouent au contraste AA**
 sur texte normal (4,34 et 3,87), alors qu'ils portent justement le texte mono
 de 10,5px : latences, horodatages, compteurs. Les adopter aurait gravé une
 régression d'accessibilité. Ils se rabattent sur `--muted` (5,55). Un seul
 niveau intermédiaire est ajouté, `--ink-2` (#4a5468, contraste 7,05).
 
 **L'échelle de texte.** Le relevé compte huit paliers répartis dans 5,5px,
-avec des demi-pixels et des écarts d'un pixel — de l'entropie d'utilitaires,
+avec des demi-pixels et des écarts d'un pixel : de l'entropie d'utilitaires,
 pas une échelle dessinée. Ils se regroupent en trois paliers de texte
 (`--app-lg`, `--app`, `--app-sm`) et trois de labels (`--mono-lg`, `--mono`,
 `--mono-sm`).
 
 **Les filets et surfaces.** Cinq « nouveaux » tokens étaient des doublons
-imperceptibles de tokens existants — écart RVB de 1,4 à 6,8, sous le seuil de
+imperceptibles de tokens existants : écart RVB de 1,4 à 6,8, sous le seuil de
 perception. `--line-inner` → `--hairline`, `--line-soft` → `--line`,
 `--row-hover` / `--paper-hover` / `--paper-warm` → `--panel`.
 
@@ -159,7 +159,7 @@ Au total, 32 tokens proposés se réduisent à 14.
 **La barre supérieure.** La production pose `top: 53px` pour une barre de
 52px, en supposant que son filet s'ajoute à la hauteur. Il ne s'y ajoute
 pas : `box-sizing: border-box` le peint à l'intérieur. Ce pixel n'empilait
-rien, il ouvrait une couture — et la feuille portant son propre filet haut,
+rien, il ouvrait une couture : et la feuille portant son propre filet haut,
 le trait apparaissait doublé. Corrigé : la feuille se cale à ras, sans filet
 propre.
 
@@ -173,7 +173,7 @@ n'importe quelle police.
 `--muted`. La nuance de température disparaît ; elle n'était reconductible
 nulle part ailleurs.
 
-### Enrobages — hors relevé, assumés
+### Enrobages : hors relevé, assumés
 
 Trois composants n'existent dans aucune source et sont pourtant livrés, car
 leur absence rend le système inutilisable :
@@ -186,7 +186,7 @@ d'atteindre sa navigation. Le tracé du burger est dérivé ; les mesures
 
 **La modale.** Mémoire n'en emploie aucune. Celle-ci est dérivée de la carte
 et du tiroir, sans une valeur nouvelle. Elle existe parce que la règle du
-projet en impose la forme — panneau plafonné à 92vh qui défile en son sein —
+projet en impose la forme, panneau plafonné à 92vh qui défile en son sein,
 et qu'à défaut chaque app en réinventerait une.
 
 **La notification flottante.** Mémoire signale tout en place, par une alerte
@@ -207,7 +207,7 @@ des puces de filtre ou un interrupteur. Ces trois contrôles sont livrés,
 dérivés strictement de `.zv-input`, et signalés comme tels dans le CSS.
 
 Aucun jeu d'onglets non plus : une rangée d'onglets se construit avec
-`.zv-seg-group` et `.zv-seg`. Un onglet **souligné** reste à faire — il
+`.zv-seg-group` et `.zv-seg`. Un onglet **souligné** reste à faire : il
 suppose d'arbitrer la couleur et l'épaisseur du trait actif.
 
 ## Les logos, ramenés à cinq
@@ -218,8 +218,8 @@ Mémoire et de la marque Zevra.
 
 Les déclinaisons ont été retirées parce qu'elles ne suivaient plus les
 marques. Le cas de Mémoire le montrait sans discussion : `memoire-glyph-navy`
-et ses quatre lockups portaient encore un logo abandonné — une forme de ruban
-plié — quand `ink`, `white` et `orig` portaient déjà le M actuel. Deux
+et ses quatre lockups portaient encore un logo abandonné, une forme de ruban
+plié, quand `ink`, `white` et `orig` portaient déjà le M actuel. Deux
 marques cohabitaient dans la même galerie, et rien ne disait laquelle était
 la bonne.
 
@@ -229,7 +229,7 @@ Ce que cela coûte, et qui reste à refaire :
   24 px ;
 - **les lockups** avec wordmark, pour les barres de navigation et les pieds
   de page ;
-- **l'inlinage vectoriel**. Un PNG s'inline en data-URI — l'admin la donne —
+- **l'inlinage vectoriel**. Un PNG s'inline en data-URI, l'admin la donne,
   mais c'est 150 ko de texte là où un SVG en faisait 4.
 
 Les fichiers retirés restent dans l'historique du dépôt : rien n'est perdu,
@@ -253,7 +253,7 @@ Ces éléments restent consultables dans `reference/`.
 dur. Même chose pour `#8fd3a8` / `#f0a5ad`, les états sur fond sombre.
 
 Trois rayons de surface pour un seul token : `--r-card` (16), la puce de
-source (4px) et le rayon 18px de la carte verre de DesignSystem — ce dernier
+source (4px) et le rayon 18px de la carte verre de DesignSystem, ce dernier
 ramené à `--r-card`, comme le fait Mobile.html.
 
 
@@ -274,7 +274,7 @@ spectre. À rejuger sur pièces si la DA en décide autrement.
 
 ### Colonnes 5 et 7 (0.5.0)
 
-Le commentaire de `layout.css` relevait « 3+9, 8+4, 6+6 » — mais le
+Le commentaire de `layout.css` relevait « 3+9, 8+4, 6+6 » : mais le
 prototype `experience.html` compose toutes ses scènes produit en `span 5`
 (glyphe) + `span 7` (discours), et c'est cette répartition qui équilibre
 l'air entre le visuel et le texte. `zv-col-5` et `zv-col-7` complètent donc
@@ -284,46 +284,46 @@ le relevé ; en 4+8, le texte nage et le glyphe s'exile au bord.
 
 ## L'angle vif (25/08/2026)
 
-« Très carré, ça fait pro et inspire confiance » — arbitrage DA rendu sur
+« Très carré, ça fait pro et inspire confiance » : arbitrage DA rendu sur
 pièces. Les quatre tokens de rayon (`--r-btn`, `--r-pill`, `--r-panel`,
 `--r-card`) sont ramenés à `0` et RESTENT nommés : rendre de la rondeur à
 l'une des quatre intentions doit rester une ligne à changer, pas une chasse
-dans douze fichiers. Seul survit le rond de FORME — pastille d'état, radio,
-halo, bouton d'interrupteur exclu (passé au carré), roue incluse — parce
+dans douze fichiers. Seul survit le rond de FORME (pastille d'état, radio,
+halo, bouton d'interrupteur exclu (passé au carré), roue incluse) parce
 qu'il porte du sens là où le rayon ne portait que du style.
 
-Cet arbitrage SUCCÈDE au « rayon des cartes — clos » ci-dessus : la
+Cet arbitrage SUCCÈDE au « rayon des cartes, clos » ci-dessus : la
 question tranchée là était la fidélité au relevé (16px contre 14 et 12),
 celle-ci est une décision de DA qui lui passe devant.
 
 ---
 
-## Compléments du 25/08/2026 (0.9.0) — les manques comblés, hors relevé
+## Compléments du 25/08/2026 (0.9.0) : les manques comblés, hors relevé
 
 La demande : compléter le système au niveau d'une bibliothèque de référence
 (états d'interaction, contrôles absents, formats), en restant dans la charte.
-Tout ce qui suit est **HORS RELEVÉ** — dessiné dans les tokens existants,
-chaque écart dit — et se rejuge sur pièces avec la DA. Un seul token entre
+Tout ce qui suit est **HORS RELEVÉ** (dessiné dans les tokens existants,
+chaque écart dit) et se rejuge sur pièces avec la DA. Un seul token entre
 (`--font-code`, voir « Bloc de code ») ; aucune couleur nouvelle.
 
 ### Les états de survol et d'appui des boutons
 
-Aucune maquette ne donne d'état `:hover` ni `:active` aux trois boutons —
+Aucune maquette ne donne d'état `:hover` ni `:active` aux trois boutons :
 elles sont figées. Un bouton sans réaction se lit comme un décor (l'argument
 qui a déjà tranché pour `.zv-chrome-btn`). Arbitrages :
 
 - **le survol assombrit, l'appui assombrit davantage et rassoit** : les
   teintes sont dérivées par `color-mix` (l'idiome que le voile emploie
-  déjà) des couleurs que le bouton porte déjà — le sommet de dégradé relevé
+  déjà) des couleurs que le bouton porte déjà, le sommet de dégradé relevé
   (`--zv-btn-haut`, #2b2bb4, sans token) et `--accent-deep`. Aucune teinte
   nouvelle n'entre ;
 - à l'appui, l'ombre TOMBE et le liseré s'éteint : le bouton se rassoit sur
-  la page au lieu de flotter — aucun déplacement, c'est la lumière qui dit
+  la page au lieu de flotter (aucun déplacement, c'est la lumière qui dit
   l'enfoncement ;
 - le fantôme prend le filet `--accent` et l'appui pose `--accent-soft` en
   fond ; l'encre s'éclaircit d'un cran (un aplat sombre ne peut pas
   s'assombrir visiblement) ;
-- une seule transition, la courbe maison, 160 ms — coupée par
+- une seule transition, la courbe maison, 160 ms) coupée par
   `prefers-reduced-motion` (base.css) ;
 - **aucun déplacement** : pas de translateY. Les entrées du système montent
   au défilement ; un bouton qui saute au survol raconterait autre chose.
@@ -333,7 +333,7 @@ qui a déjà tranché pour `.zv-chrome-btn`). Arbitrages :
 La modale destructive porte son filet `--err`, mais son action de
 confirmation restait un plein indigo : « Supprimer » s'y lisait comme
 n'importe quelle action. `zv-btn--danger` pose l'aplat `--err`, sans
-dégradé ni ombre indigo. **Il compte comme LE bouton plein de l'écran** — la
+dégradé ni ombre indigo. **Il compte comme LE bouton plein de l'écran** : la
 règle « un seul plein par page » ne distingue pas les couleurs, elle compte
 les aplats.
 
@@ -341,15 +341,15 @@ les aplats.
 
 Relevé de Mémoire, cette fois (le motif de balisage documenté dans
 feedback.css) : pendant l'action, le libellé change (« Connexion… ») et le
-bouton passe en `cursor-wait; opacity: .7` — valeurs reprises telles
-quelles. Le paquet le code sur `[aria-busy="true"]` — l'attribut qui rend
-l'attente audible ne coûte alors rien — et la façade React l'expose en prop
+bouton passe en `cursor-wait; opacity: .7` : valeurs reprises telles
+quelles. Le paquet le code sur `[aria-busy="true"]`, l'attribut qui rend
+l'attente audible ne coûte alors rien, et la façade React l'expose en prop
 `occupe`, qui pose `aria-disabled` et AVALE le clic plutôt que de poser
 `disabled` : un `disabled` sortirait le bouton du parcours clavier au
 moment précis où l'attente doit s'annoncer. Mémoire, elle, désactive ; cet
 écart-là est assumé.
 
-### L'onglet souligné — l'arbitrage attendu
+### L'onglet souligné : l'arbitrage attendu
 
 La question ouverte depuis le relevé Mémoire est tranchée ainsi :
 
@@ -358,7 +358,7 @@ La question ouverte depuis le relevé Mémoire est tranchée ainsi :
   couleur de l'action, comme l'entrée de nav courante. PAS le spectre : un
   quatrième emploi n'existe pas.
 - l'onglet inactif est `--ink-2` graisse 500, l'actif `--accent` graisse
-  600 — la grammaire exacte de `.zv-seg` ;
+  600, la grammaire exacte de `.zv-seg` ;
 - la rangée porte un filet bas `--line` d'un pixel que le trait actif
   recouvre : l'onglet se lit comme posé SUR une ligne, pas souligné en l'air.
 
@@ -367,39 +367,39 @@ module ne livre rien ici » réservait. La rangée de puces (`Tabs` en variante
 par défaut) reste le motif des filtres ; l'onglet souligné est celui des
 VUES d'un même objet (Aperçu / Sources).
 
-### Roue, squelette, infobulle — les trois manques assumés, livrés
+### Roue, squelette, infobulle : les trois manques assumés, livrés
 
 feedback.css les refusait faute de matière première, et posait les
 contraintes à respecter « le jour où la DA les tranche ». Ce jour : les
 contraintes sont reprises telles quelles, les valeurs restantes sont
 arbitrées ici.
 
-- **La roue** (`zv-spinner`) : anneau de 16 px — la taille de `.zv-icon` —
+- **La roue** (`zv-spinner`) : anneau de 16 px, la taille de `.zv-icon`,
   trait de 2 (l'épaisseur du jeu d'icônes), piste `--accent-line`, secteur
   `--accent`, rotation 0,8 s linéaire. La variante `--lg` fait 24 px, la
   grille du jeu d'icônes. Elle ne REMPLACE pas `.zv-loading` : la phrase
   qui dit le travail reste le motif par défaut, la roue est pour l'attente
   courte et locale (un bouton, une cellule). `prefers-reduced-motion` la
-  fige — l'anneau interrompu reste lisible immobile. Son libellé d'annonce
+  fige : l'anneau interrompu reste lisible immobile. Son libellé d'annonce
   est un texte masqué (`.zv-sr-only`, base.css), pas un `aria-label` sur un
   span vide, que tous les lecteurs n'annoncent pas.
-- **Le squelette** (`zv-skeleton`) : `--hairline`, comme exigé — pas de
+- **Le squelette** (`zv-skeleton`) : `--hairline`, comme exigé, pas de
   balayage spectral. Pulsation d'OPACITÉ (1 → 0,55, 1,8 s) : animer la
   couleur ferait un dégradé de gris que la charte n'a pas. La géométrie
   vient du consommateur (largeur/hauteur en style) ; seule la variante
   `--text` fixe une hauteur d'un cadratin de texte courant.
-- **L'infobulle** (`zv-tooltip`) : la combinaison imposée — panneau blanc,
-  filet `--line`, ombre `--shadow-menu`, texte `--app-sm`/`--ink-2` —
+- **L'infobulle** (`zv-tooltip`) : la combinaison imposée (panneau blanc,
+  filet `--line`, ombre `--shadow-menu`, texte `--app-sm`/`--ink-2`)
   posée AU-DESSUS de la cible, centrée, à 6 px (le pointeur vient d'en bas
   et la masquerait dessous ; `--bas` existe pour le rare cas inverse),
   plafonnée à 240 px et, sous le seuil, à l'écran. L'apparition attend
-  300 ms — sans quoi traverser une rangée d'icônes fait clignoter une bulle
-  par icône — la disparition est immédiate. Trois exigences de WCAG 1.4.13
+  300 ms, sans quoi traverser une rangée d'icônes fait clignoter une bulle
+  par icône, la disparition est immédiate. Trois exigences de WCAG 1.4.13
   sont tenues : elle reste tant que le pointeur ou le focus y sont, elle
   est survolable (le masquage par `visibility` évite les zones fantômes),
-  et Échap la ferme — la seule ligne de script du composant, posée sans
+  et Échap la ferme, la seule ligne de script du composant, posée sans
   état. L'annonce passe par `aria-describedby`, câblée en identifiants
-  EXPLICITES comme le couple `htmlFor`/`id` de `Field` — pas de `useId`,
+  EXPLICITES comme le couple `htmlFor`/`id` de `Field` : pas de `useId`,
   qui interdirait le rendu en composant serveur. Réservée à un COMPLÉMENT
   dispensable : une commande n'a pas le droit de cacher son nom dans une
   infobulle.
@@ -411,7 +411,7 @@ Aucune source. Dérivé de l'interrupteur redessiné : bouton CARRÉ de 14 px
 `--accent-deep` au survol ; piste de 3 px (la hauteur de `.zv-progress`),
 `--line`, remplie en `--accent` jusqu'au curseur. **Pas le spectre** : la
 barre de progression est un des trois emplois, le curseur n'en est pas un.
-Le remplissage se calcule dans la façade (pourcentage de position — une
+Le remplissage se calcule dans la façade (pourcentage de position : une
 géométrie, comme la largeur de `Progress`, pas une valeur de charte).
 
 ### L'affixe de champ (`zv-affix`)
@@ -419,14 +419,14 @@ géométrie, comme la largeur de `Progress`, pas une valeur de charte).
 « 30 », seul dans un champ, ne dit pas s'il s'agit de jours ou d'euros. La
 grammaire est celle de `.zv-search`, le seul cadre-à-champ-nu du relevé :
 cadre `--line`, champ nu dedans, allumage `:focus-within` identique.
-L'affixe est en mono `--label` — une unité est un libellé, pas une donnée.
+L'affixe est en mono `--label` : une unité est un libellé, pas une donnée.
 
 ### Le dépliant (`zv-fold`)
 
 La FAQ est le pliage de la vitrine ; l'applicatif n'en avait aucun (options
 avancées, détail d'une ligne de journal). Construit sur `<details>` natif :
 clavier et annonce viennent du navigateur, aucun JavaScript. Rangé dans
-data.css — c'est du contenu qui se déplie, pas de la navigation. Le chevron
+data.css : c'est du contenu qui se déplie, pas de la navigation. Le chevron
 tourne, seule rotation du module, coupée par `prefers-reduced-motion`.
 
 ### La touche (`zv-kbd`) et le bloc de code (`zv-codeblock`)
@@ -435,11 +435,11 @@ Une documentation d'interface cite des raccourcis et des commandes ; le
 paquet n'avait ni l'un ni l'autre.
 
 - La touche : `--panel`, filet `--line` avec un bas de 2 px qui fait le
-  relief de la touche — géométrie, pas ombre.
+  relief de la touche, géométrie, pas ombre.
 - **Le bloc de code introduit le seul token nouveau, `--font-code`**
   (`ui-monospace / SF Mono / Menlo`). La raison est déjà écrite deux fois
   dans le paquet : `--font-mono` (Space Grotesk) n'est PAS à chasse fixe, et
-  `tabular-nums` n'aligne que les chiffres — du code exige la chasse fixe
+  `tabular-nums` n'aligne que les chiffres, du code exige la chasse fixe
   entière. Détourner `--font-mono` aurait menti ; un hexadécimal de pile de
   polices en dur dans data.css aurait été la première valeur de charte hors
   tokens. Le token est reflété dans le miroir JS, comme les autres.
@@ -454,7 +454,7 @@ extérieur et Échap : au composant, comme pour le menu.
 
 ### Le carrousel (`zv-carousel`)
 
-La bande de logos de la landing défile déjà — sans composant, chaque page
+La bande de logos de la landing défile déjà : sans composant, chaque page
 réinvente le sien. Défilement natif `scroll-snap`, AUCUN JavaScript : pas de
 flèches (elles exigeraient un script et un arbitrage de dessin), pas de
 points. La barre de défilement est masquée, le clavier passe par le focus du
@@ -464,7 +464,7 @@ préfère une grille tant que le contenu tient.
 ### Le bandeau d'annonce (`zv-banner`)
 
 La bande au-dessus de la barre de navigation (annonce de version,
-information réglementaire). `--accent-soft` sur filet `--accent-line` — le
+information réglementaire). `--accent-soft` sur filet `--accent-line` : le
 ton information de l'alerte, en pleine largeur. Un seul par page, et
 JAMAIS pour du marketing permanent : un bandeau qui ne part pas devient un
 bourrelet de chrome.
@@ -475,13 +475,13 @@ Mémoire navigue au tiroir ; une application à trois ou quatre sections
 navigue plus vite par une barre basse. N'existe que SOUS le point de
 rupture (au-dessus, la colonne latérale est là), cibles `--tap`, icône +
 micro-label, état courant `--accent` sur `aria-current="page"`. Cinq
-entrées au maximum — au-delà, c'est le tiroir.
+entrées au maximum : au-delà, c'est le tiroir.
 
 ### Les formats sociaux (`zv-social`)
 
 Les visuels LinkedIn/OpenGraph se refaisaient à la main, hors charte. Trois
-gabarits FIGÉS en pixels — paysage 1200×630 (OpenGraph et lien LinkedIn),
-carré 1080×1080 (post), story 1080×1920 — qui ne répondent à aucun point de
+gabarits FIGÉS en pixels (paysage 1200×630 (OpenGraph et lien LinkedIn),
+carré 1080×1080 (post), story 1080×1920) qui ne répondent à aucun point de
 rupture : ce sont des planches d'export, pas des pages. Ils composent les
 pièces existantes (bande manifeste, kicker, halo) et portent un pied
 wordmark + adresse. La règle « jamais de faux contenu » s'y applique au
@@ -491,19 +491,19 @@ premier chef : un visuel social EST une publication.
 
 Le jeu passe de 34 à 55. Les règles du jeu ne bougent pas : trait 2, bouts
 et jonctions arrondis, grille 24, `currentColor`. Les ajouts comblent les
-trous les plus fréquents — `chevron-haut` manquait au chevron près, et le
-catalogue citait `telecharger` en exemple sans qu'elle existe — plus le
+trous les plus fréquents (`chevron-haut` manquait au chevron près, et le
+catalogue citait `telecharger` en exemple sans qu'elle existe) plus le
 vocabulaire du métier : balance, livre-ouvert, diplome. Aucune icône
 pleine, aucune couleur.
 
 ### La micro-entrée des blocs
 
 Demande DA du 25/08 au soir : les blocs des pages INTÉRIEURES doivent
-entrer en mouvement, « pas aussi poussé que sur la home — ça peut être
+entrer en mouvement, « pas aussi poussé que sur la home, ça peut être
 vite chiant à la longue ». Ce n'est PAS un dixième mouvement, c'est un
 DOSAGE du premier : `zv-anim-rise--doux` reprend `zv-rise` à douze pixels
 au lieu de trente-deux, sur une plage plus courte (5 → 30 % au lieu de
-10 → 45 %) — le bloc est posé avant que l'œil ait fini d'arriver, et une
+10 → 45 %), le bloc est posé avant que l'œil ait fini d'arriver, et une
 visite répétée ne le remarque plus. Mêmes règles que les neuf : la courbe
 unique, l'état au repos est l'état final, rien hors du bloc `@supports`,
 coupé par `prefers-reduced-motion`. La home garde l'entrée pleine ; c'est
@@ -511,7 +511,7 @@ elle la signature, le doux est le quotidien.
 
 - **Le code de vérification (OTP)** : aucun écran du groupe n'en pose. Le
   livrer supposerait d'inventer la gestion de focus inter-cases sans aucune
-  source — le jour où un écran d'authentification à code existe, c'est lui
+  source : le jour où un écran d'authentification à code existe, c'est lui
   qui tranche.
 - **Le sélecteur de date** : le natif (`.zv-input` sur `type="date"`) reste
   le motif ; un calendrier maison est un projet, pas un complément.
@@ -525,32 +525,32 @@ elle la signature, le doux est le quotidien.
 ### Le jeu d'icônes prend la signature de la charte
 
 L'angle vif du 25/08 s'était arrêté aux surfaces : le TRAIT des icônes
-restait « bouts et jonctions arrondis » — le dialecte de toutes les
+restait « bouts et jonctions arrondis », le dialecte de toutes les
 bibliothèques génériques. Un système qui vend le carré ne peut pas parler
 rond dans ses pictogrammes. Arbitrage :
 
 - **bouts FRANCS** (`square` : même emprise optique que le rond, la
   silhouette change sans redessiner un seul tracé) et **jonctions VIVES**
-  (`miter`) — le réglage vit dans icons.css, les 55 tracés le suivent d'un
+  (`miter`), le réglage vit dans icons.css, les 55 tracés le suivent d'un
   coup ;
 - **les points d'encre passent au carré** : trois-points, ponctuation
   d'info/aide/attention, taquets du registre. Dans une icône, le point est
-  une ponctuation, pas un état — le rond de FORME (pastille, radio) n'est
+  une ponctuation, pas un état (le rond de FORME (pastille, radio) n'est
   pas concerné ;
 - **les coins de rectangles tombent à zéro** (rx=0) : archiver, cadenas,
   calendrier, copier, courriel, imprimante, registre ;
-- ce qui ne change PAS : les courbes de DESSIN — l'épaule du dossier, la
+- ce qui ne change PAS : les courbes de DESSIN) l'épaule du dossier, la
   panse de la base de données, les cercles d'objet (horloge, globe,
   cocarde d'info). Le carré est un style de trait, pas une interdiction de
   courbe.
 
-Portée : tout ce qui trace dans le paquet suit — le chevron du dépliant,
+Portée : tout ce qui trace dans le paquet suit, le chevron du dépliant,
 l'icône de dépôt, la coche de la pastille et celle de la case, le burger de
 la vitrine. Le burger applicatif, relevé « extrémités franches », y était
 déjà : le relevé avait la bonne intuition avant l'arbitrage.
 
 **Correction embarquée** : `.zv-link-arrow svg` n'avait jamais déclaré son
-trait — ni `fill: none`, ni `stroke`. La flèche se rendait en TRIANGLE
+trait, ni `fill: none`, ni `stroke`. La flèche se rendait en TRIANGLE
 PLEIN noir (le fût, aire nulle, disparaissait), pas dans la couleur du
 lien. Le commentaire promettait le tracé depuis le premier jour ; le CSS le
 pose enfin, au trait carré.
@@ -558,13 +558,13 @@ pose enfin, au trait carré.
 ### Les boutons à icône
 
 `icone` / `iconeApres` sur Button et ButtonLink : l'icône vient du jeu, à
-16 px, héritant de la couleur du libellé — la fournir en prop évite les
+16 px, héritant de la couleur du libellé, la fournir en prop évite les
 tracés recopiés à la main (la faute qui avait produit trois flèches
-différentes). `carre` est le bouton d'action à icône SEULE — 48×48, 40×40
-en compact — pour l'envoi d'un composeur ou l'action unique d'une barre.
+différentes). `carre` est le bouton d'action à icône SEULE (48×48, 40×40
+en compact) pour l'envoi d'un composeur ou l'action unique d'une barre.
 Le libellé accessible y est OBLIGATOIRE et s'écrit pour l'ACTION. Ne pas
 confondre : `IconButton` est le chrome nu (40 px, sans cadre),
-`ChromeButton` la croix bordée (26 px) — le carré est une action, il en a
+`ChromeButton` la croix bordée (26 px), le carré est une action, il en a
 le poids et l'aplat.
 
 ### La tuile d'icône (`zv-icon-tile`)
@@ -572,13 +572,13 @@ le poids et l'aplat.
 La pastille carrée qui porte une icône devant un argument de la vitrine
 (liste de garanties, grille d'atouts) : 40 px, fond `--accent-soft`, filet
 `--accent-line`, icône `--accent`. HORS RELEVÉ, dessinée dans les tokens.
-Décorative par défaut — c'est le libellé voisin qui nomme. Une par
+Décorative par défaut : c'est le libellé voisin qui nomme. Une par
 argument, jamais en décor isolé.
 
 ### L'icône dans la colonne latérale
 
 Aucune prop nouvelle : `num` sur SideLink accepte déjà « rang mono ou
-glyphe » — le relevé Mémoire y posait le ⚙ du panneau admin, et la colonne
+glyphe », le relevé Mémoire y posait le ⚙ du panneau admin, et la colonne
 fixe de 16 px tient l'alignement. Ce qui manquait, c'était l'EXEMPLE : le
 catalogue montre désormais `num={<Icon nom="reglages" />}`. Rang OU icône,
 jamais les deux.
@@ -593,7 +593,7 @@ refus est argumenté et écrit : il tient, la fournée ne le rouvre pas.
 
 Constat d'usage sur le site vitrine : les entrées pilotées par
 `animation-timeline: view()` rejouaient À L'ENVERS dès que le lecteur
-remontait — les vidéos, les cartes d'articles, les grilles entières
+remontait, les vidéos, les cartes d'articles, les grilles entières
 disparaissaient sous ses yeux, y compris en pleine lecture d'un article. Et
 une grille haute, jamais « contenue » dans le viewport, n'atteignait jamais
 son état posé : la section paraissait vide.
@@ -601,7 +601,7 @@ son état posé : la section paraissait vide.
 Arbitrage : **une révélation par visite**. Les sept entrées deviennent des
 animations temporelles courtes, armées par `html.zv-motion` (posé par
 `motion.js`, importable en `@zevra/ui/motion.js`) et libérées par `.zv-in`
-à l'entrée au viewport — une fois, puis plus jamais. Sans JavaScript, rien
+à l'entrée au viewport : une fois, puis plus jamais. Sans JavaScript, rien
 n'est armé : la page s'affiche complète, même dégradation douce qu'avant.
 Les @keyframes remontent au niveau racine pour qu'un échafaudage de scènes
 (l'expérience épinglée d'une home) puisse les re-brancher sur ses timelines
@@ -609,12 +609,12 @@ nommées : il pose `data-zv-motion-skip` sur ses scènes et motion.js n'y
 touche pas.
 
 Ce qui RESTE scroll-piloté, et doit le rester : la barre de progression
-(`zv-anim-progress`) et le point d'étape (`zv-anim-dot-active`) — suivre la
+(`zv-anim-progress`) et le point d'étape (`zv-anim-dot-active`), suivre la
 position de lecture est leur raison d'être, avancer et reculer avec elle
 est leur contrat.
 
 Corrigé du même mouvement : dans `.zv-band`, l'emphase `strong` de
-zv-body/zv-lead posait l'encre (--ink) sur le navy — invisible. Elle hérite
+zv-body/zv-lead posait l'encre (--ink) sur le navy, invisible. Elle hérite
 désormais de la couleur ambiante, la graisse seule la distingue.
 
 ## La page a une largeur (27/08/2026, 0.12.4)
@@ -622,22 +622,22 @@ désormais de la couleur ambiante, la graisse seule la distingue.
 Le relevé de la passation vivait sur une trame de 1440 et les enveloppes
 n'étaient que du retrait : `zv-gutter` posait 72 px de padding et laissait
 le contenu suivre l'écran. Sur un moniteur large, le hero collait au bord
-gauche pendant que la nav — bornée localement par le site vitrine — restait
+gauche pendant que la nav, bornée localement par le site vitrine, restait
 centrée : deux largeurs de vérité sur la même page.
 
 Arbitrage : un token `--page-max` (1440px, la trame du relevé) et les trois
 enveloppes de gutter se centrent au-delà ; `zv-inset-x` garde ses 72 px de
 marge minimale ET se centre dès que l'écran offre plus (max()). En dessous
-de 1440, rien ne bouge — le rendu du relevé est inchangé au pixel. La
+de 1440, rien ne bouge : le rendu du relevé est inchangé au pixel. La
 rustine locale du site vitrine devient inutile.
 
 ## Le mouvement baisse d'un ton (27/08/2026, 0.12.5)
 
-Retour d'usage : au défilement, les entrées « poussaient » trop — l'effet
+Retour d'usage : au défilement, les entrées « poussaient » trop, l'effet
 de parallaxe prenait le pas sur la lecture. Les amplitudes sont divisées
 par deux, les intentions conservées : zv-rise 32 → 16 px, son dosage doux
 12 → 8 px, le glyphe 40 px/0,70 → 24 px/0,85, le pop 0,60 → 0,80. La
-convergence de la home et le filet ne bougent pas — l'une est la signature,
+convergence de la home et le filet ne bougent pas : l'une est la signature,
 l'autre ne translate rien. Les durées et la courbe restent celles de la
 passation : c'est la distance qui fatiguait, pas le tempo.
 
@@ -645,8 +645,8 @@ passation : c'est la distance qui fatiguait, pas le tempo.
 
 Deux produits à venir reçoivent leur glyphe : le P de Plume (l'éditeur
 juridique) et le S de Supernovia (la création de contenu sourcée). Même
-facture que les cinq autres — le ruban de la charte, rendu couleur, PNG
-détouré remonté à 512px sur le grand côté — et même convention de nommage
+facture que les cinq autres (le ruban de la charte, rendu couleur, PNG
+détouré remonté à 512px sur le grand côté) et même convention de nommage
 `<produit>-<forme>-<nuance>.png`.
 
 Le registre des produits du script d'index les connaît désormais : ajouter
@@ -660,7 +660,7 @@ monochrome, pas de lockup. Sur navy ou sous 24px, ils ne conviennent pas.
 
 Un lockup ne se réduit pas. Celui de Zevra mesure 555×200, sa capitale
 70px, et le site l'affichait à **14,7px de capitale** dans la barre de
-navigation, 10,5 sur téléphone, 9,8 dans le pied de page — une réduction
+navigation, 10,5 sur téléphone, 9,8 dans le pied de page : une réduction
 de près de cinq fois. Chaque fût tombait alors sur une fraction de pixel
 et recevait sa propre dose de lissage : le mot virait au gris, et le V,
 seul à n'avoir aucun fût vertical sur quoi s'aligner, semblait flotter.
@@ -683,7 +683,7 @@ le registre décrivait sans qu'aucun fichier ne les fournisse. La nuance
 
 Relevées au pixel sur le lockup d'origine : la marque vaut **2,86 fois**
 la capitale, l'écart entre les deux **0,64 fois**, et les deux pièces se
-**centrent l'une sur l'autre** — elles ne partagent pas de ligne de base.
+**centrent l'une sur l'autre**, elles ne partagent pas de ligne de base.
 Tout se pilote par `--zv-cap`, qui EST la hauteur de capitale : le viewBox
 du SVG a 100 unités de haut pour la capitale, si bien qu'une hauteur CSS
 posée dessus se lit directement.
@@ -701,16 +701,16 @@ Le fichier vectoriel d'origine n'a pas été retrouvé : le tracé est
 reconstruit depuis le bitmap, par ajustement de droites sur le contour
 (les lettres sont géométriques, leurs côtés sont des segments). Il est
 fidèle à **0,1 % en largeur** et mesurablement plus lisible que le bitmap
-partout où le site le pose — mais il porte les approximations du relevé.
+partout où le site le pose : mais il porte les approximations du relevé.
 
-**Réservé à l'écran, jusqu'à 120px de capitale.** Au-delà — grand format,
-impression — exiger le fichier d'origine, qui remplacera celui-ci sans
+**Réservé à l'écran, jusqu'à 120px de capitale.** Au-delà (grand format,
+impression) exiger le fichier d'origine, qui remplacera celui-ci sans
 changer une ligne de code.
 
 ### Au passage : le commentaire du token était faux
 
 `--font-display` annonçait « titres 200-400, wordmarks 600 ». Mesure faite,
-le mot du lockup a un rapport fût/capitale de 0,129, soit du **400** — et
+le mot du lockup a un rapport fût/capitale de 0,129, soit du **400**, et
 surtout il n'est PAS dessiné en Outfit : à capitale égale, son E est 20 %
 plus étroit, son V 24 %, son A 26 %. Seul le Z coïncide. La mention a été
 retirée plutôt que corrigée : le mot n'est pas de la typographie, c'est un
@@ -720,7 +720,7 @@ tracé.
 
 La nav du site Zevra portait, dans son propre dépôt, cent lignes de CSS et
 un script que le paquet ne connaissait pas : menus déroulants, sélecteur de
-langue, tiroir groupé, chrome givré. Tout cela n'a rien de propre à Zevra —
+langue, tiroir groupé, chrome givré. Tout cela n'a rien de propre à Zevra :
 c'est ce que demande n'importe quelle vitrine dès qu'elle a plus de quatre
 liens. Le paquet le reprend.
 
@@ -736,7 +736,7 @@ Son voile était écrit en `rgba(245, 246, 250, …)`, c'est-à-dire hors token
 `color-mix` sur le token.
 
 ⚠️ `backdrop-filter` fait du chrome le bloc conteneur de tout descendant en
-position fixe. Le tiroir doit donc vivre EN DEHORS, en frère — dedans, il
+position fixe. Le tiroir doit donc vivre EN DEHORS, en frère : dedans, il
 serait rogné à la hauteur de la barre. C'est écrit dans le CSS, à l'endroit
 où l'on se tromperait.
 
@@ -744,12 +744,12 @@ où l'on se tromperait.
 
 `:hover` et `:focus-within` : accessible au clavier, rien à hydrater, la
 barre reste rendue au serveur. Un pont invisible couvre l'interstice entre
-l'entrée et son panneau — sans lui le survol se rompt en descendant, et le
+l'entrée et son panneau : sans lui le survol se rompt en descendant, et le
 menu se referme sous le curseur.
 
 Piège consigné : le déclencheur porte `.zv-navlink` pour se rendre comme un
 lien simple. Un `font: inherit`, réflexe habituel pour dénuder un bouton,
-remet la fonte du conteneur (16px/400) là où `.zv-navlink` pose 14px/500 —
+remet la fonte du conteneur (16px/400) là où `.zv-navlink` pose 14px/500 :
 les entrées à menu deviennent alors plus grosses que les autres. C'est
 arrivé, et ça s'est vu.
 
@@ -757,21 +757,21 @@ arrivé, et ça s'est vu.
 
 Le seuil de bascule vers le tiroir est à 767px, réglé sur la nav de
 référence : quatre liens simples. Une nav qui porte cinq familles à menu,
-un sélecteur de langue et un appel à l'action déborde bien avant — mesuré :
+un sélecteur de langue et un appel à l'action déborde bien avant, mesuré :
 entre 768 et 1150px, le logo passe SOUS la première entrée.
 
 `.zv-nav--riche` déplace le seuil à 1150px, **pour la barre seulement**. Ce
 n'est pas un second gabarit : le reste de la page garde l'unique frontière
 de la charte. Le test d'intégrité l'accepte désormais, et un second test
-vérifie qu'aucun sélecteur étranger ne se glisse dans ces blocs — une
+vérifie qu'aucun sélecteur étranger ne se glisse dans ces blocs : une
 frontière arbitrée pour un composant ne doit pas devenir, par commodité, le
 gabarit de tout le monde.
 
 ### Le tiroir a son module
 
 `@zevra/ui/nav.js`, sur le modèle de `motion.js` : il pose et retire
-`data-open`, tient `aria-expanded`, ferme sur Échap. Le reste — voile,
-glissade, verrouillage du défilement — était déjà dans `overlays.css` et se
+`data-open`, tient `aria-expanded`, ferme sur Échap. Le reste (voile,
+glissade, verrouillage du défilement) était déjà dans `overlays.css` et se
 joue sur cet attribut seul.
 
 Il travaille par délégation sur le document plutôt qu'en câblant chaque
@@ -781,14 +781,14 @@ client.
 
 Déclaré dans `sideEffects`. C'est la panne de la 0.12.0 : `motion.js` était
 exporté et correct, mais `sideEffects: ["*.css"]` autorisait le bundler à
-l'élaguer — tout paraissait câblé et rien ne s'animait. Un test le garde
+l'élaguer, tout paraissait câblé et rien ne s'animait. Un test le garde
 maintenant pour tout module JS livré.
 
 ### Le piège de l'ordre, trouvé à la première intégration (0.15.1)
 
 Le bloc des menus déroulants était dans `layout.css`. Le panneau d'une
-entrée porte DEUX classes — `.zv-menu` du paquet et `.zv-navdd__menu` qui
-la surcharge — et elles ont la même spécificité : c'est l'ordre de
+entrée porte DEUX classes, `.zv-menu` du paquet et `.zv-navdd__menu` qui
+la surcharge, et elles ont la même spécificité : c'est l'ordre de
 chargement qui tranche. `index.css` importe `layout.css` AVANT
 `navigation.css`, donc `.zv-menu { display: flex }` gagnait et les trois
 menus de la barre restaient ouverts en permanence.
@@ -803,7 +803,7 @@ après elle.
 La table des matières d'une page longue, posée sur le côté : un libellé, un
 point, et le point courant qui s'allume. Elle vivait dans le site Zevra,
 sous le nom de son échafaudage de scènes. C'est le manque qui avait déjà
-été signalé pour les longues lectures — il est comblé.
+été signalé pour les longues lectures : il est comblé.
 
 Elle NAVIGUE et elle SUIT, et il faut les deux. Un rail qui suit sans
 naviguer est un décor qui occupe la marge ; un rail qui navigue sans suivre
@@ -812,7 +812,7 @@ oblige à se demander où l'on en est.
 ### Le suivi lit la position, il n'observe pas les intersections
 
 Premier réflexe : un IntersectionObserver réduit à la bande centrale du
-viewport. Il tombe sur les rails réels — leurs ancres sont souvent des
+viewport. Il tombe sur les rails réels : leurs ancres sont souvent des
 points MATÉRIELS de 1 px posés en tête de section, et un point de 1 px ne
 traverse une bande de 10 % que pendant quelques images. Un défilement
 rapide saute la bande entière, et l'entrée ne s'allume jamais.
@@ -820,7 +820,7 @@ rapide saute la bande entière, et l'entrée ne s'allume jamais.
 `rail.js` lit donc la position : l'entrée courante est la DERNIÈRE dont
 l'ancre a passé la ligne de lecture (45 % de la hauteur, un peu au-dessus
 du milieu, là où l'œil se pose). Déterministe, quelle que soit la vitesse.
-Une lecture par image au plus — le défilement émet bien plus souvent que
+Une lecture par image au plus : le défilement émet bien plus souvent que
 l'écran ne se rafraîchit, et chaque lecture coûte un reflow.
 
 ### Le balisage fait foi
@@ -828,7 +828,7 @@ l'écran ne se rafraîchit, et chaque lecture coûte un reflow.
 Le module ne prend aucune liste : il lit les `<a href="#…">` du rail et
 résout chaque cible. Rien à tenir à jour en double, donc rien à faire
 diverger. Une ancre qui ne résout pas laisse son entrée cliquable et sort
-du suivi, plutôt que de décaler toutes les suivantes — c'est le décalage
+du suivi, plutôt que de décaler toutes les suivantes : c'est le décalage
 silencieux qui coûte cher.
 
 Sans le module, le rail navigue toujours : ce sont des ancres HTML. La
@@ -836,7 +836,7 @@ dégradation est douce, la page n'est jamais cassée.
 
 ### Il demande de la place
 
-Sous le point de rupture il disparaît — un rail fixe sur un téléphone se
+Sous le point de rupture il disparaît : un rail fixe sur un téléphone se
 pose sur la lecture. Au-dessus, c'est la mesure de la page qui décide, et
 le paquet ne peut pas la connaître : une page dont le contenu court d'un
 bord à l'autre jusqu'à 1100px gagnera à relever le seuil chez elle. C'est
@@ -852,13 +852,13 @@ constat vient du ruban de la home, qui passait derrière et le délavait.
 ## Les favicons (26/08/2026)
 
 Chaque produit reçoit son jeu de favicons, composé depuis le glyphe couleur
-du registre — `logos/favicon/<produit>/`, publié avec le paquet comme le
+du registre : `logos/favicon/<produit>/`, publié avec le paquet comme le
 reste de `logos/`.
 
 **Dérogation assumée à la règle « mono sous 24 px ».** Cette règle existe
 pour l'encre posée SUR une page de charte, dont on maîtrise le fond. Un
 favicon vit ailleurs : sur un onglet au fond inconnu (clair ou sombre selon
-le navigateur), au milieu des favicons couleur de tous les autres sites —
+le navigateur), au milieu des favicons couleur de tous les autres sites,
 c'est la couleur qui y est l'identifiant, et une version encre y disparaît
 un onglet sur deux. Le glyphe couleur reste donc couleur, à toutes les
 tailles.
@@ -867,14 +867,14 @@ tailles.
 foi), puis centré sur un canevas carré :
 
 - `favicon.ico` (16, 32, 48 en PNG embarqués), `icon-192.png` et
-  `icon-512.png` : fond TRANSPARENT, glyphe à 86 % du canevas — la marge
+  `icon-512.png` : fond TRANSPARENT, glyphe à 86 % du canevas, la marge
   évite que les pointes touchent le bord de l'onglet ;
-- `apple-touch-icon.png` (180) : fond OPAQUE `--paper` et glyphe à 64 % —
+- `apple-touch-icon.png` (180) : fond OPAQUE `--paper` et glyphe à 64 %,
   Apple aplatit la transparence en noir et arrondit les coins lui-même,
   l'icône doit donc apporter son fond et laisser l'air que le masque
   mangera.
 
-Le script est `scripts/build-favicons.py` — Python et non Node comme les
+Le script est `scripts/build-favicons.py`, Python et non Node comme les
 autres : la composition raster exige un canal alpha que `sips` ne sait pas
 préserver au recadrage, et Pillow est le seul outil d'image du poste. Les
 fichiers produits sont COMMITTÉS, comme le sprite : un consommateur n'a
@@ -886,7 +886,7 @@ aucune étape de build à exécuter. Relancer après tout changement de glyphe.
 
 Jusqu'ici le système ne savait afficher aucune image. Pas une déclaration
 `aspect-ratio`, pas un `object-fit`, pas un sélecteur `img` dans les quatorze
-modules — les seules images qu'il connaissait étaient ses propres logos et la
+modules : les seules images qu'il connaissait étaient ses propres logos et la
 planche d'export social, figée en pixels. Chaque produit a donc réécrit le
 même cadre : campus quatre fois (couverture de parcours, carte scindée, attente
 de vidéo, grille du fil), la vitrine autant.
@@ -906,8 +906,8 @@ ainsi qu'une bibliothèque finit avec dix-sept rapports dont trois servent.
 **L'image RECOUVRE par défaut** (`object-fit: cover`) : c'est le seul
 comportement qui garantisse un cadre plein quelle que soit la source, et une
 grille de cartes dont les couvertures ne s'alignent pas se voit
-immédiatement. `.zv-media--contient` existe pour le cas inverse — un logo, un
-schéma, une pièce qu'on ne peut pas rogner — et pose alors le papier derrière,
+immédiatement. `.zv-media--contient` existe pour le cas inverse (un logo, un
+schéma, une pièce qu'on ne peut pas rogner) et pose alors le papier derrière,
 puisqu'il restera du vide.
 
 **Le fond est posé, pas laissé transparent.** Une image qui tarde, échoue ou
@@ -932,7 +932,7 @@ Quatorze icônes entrent : `lecture`, `pause`, `rembobiner`, `avancer`,
 Le jeu en comptait cinquante-cinq et n'en portait aucune de lecture ni
 d'édition. Conséquence directe : tout produit qui pose un lecteur ou un
 éditeur recopie des tracés d'une autre bibliothèque, avec une graisse et des
-bouts de trait qui ne sont pas les nôtres — campus en avait une quarantaine.
+bouts de trait qui ne sont pas les nôtres, campus en avait une quarantaine.
 Les nouvelles suivent la signature du jeu : grille de 24, trait de 2, bouts
 francs. `lecture` et `pause` sont pleines plutôt que filaires, parce qu'à
 16 px un triangle en fil de fer se lit mal sur un fond d'image.
@@ -952,7 +952,7 @@ l'entoure et l'anneau de mise au point du groupe existaient déjà. Un second
 cadre aurait dérivé au premier réglage.
 
 **Le bouton est un vrai `<button type="button">`.** Posé sur un `<span>`, il
-n'est ni atteignable au clavier ni annoncé — et sans le `type`, il envoie le
+n'est ni atteignable au clavier ni annoncé : et sans le `type`, il envoie le
 formulaire. Son libellé change avec l'état (« Afficher » / « Masquer »)
 plutôt que de rester fixe : une icône seule ne dit pas ce qui va se passer.
 `aria-pressed` porte l'état pour les lecteurs d'écran.
@@ -964,13 +964,13 @@ côté navigateur pour un champ de saisie.
 **L'œil natif du navigateur est masqué** (`::-ms-reveal`) : sinon deux boutons
 voisins font la même chose, dont un seul suit la charte.
 
-Vient avec l'icône `oeil-barre`, le pendant qui manquait à `oeil` — sans elle,
+Vient avec l'icône `oeil-barre`, le pendant qui manquait à `oeil` : sans elle,
 la bascule n'a pas de second état à montrer.
 
 ## Ce que l'intégration de mcp-factory a révélé (27/08/2026, 0.19.0)
 
-Six défauts trouvés en migrant une application entière — trente pages, six
-zones — vers le paquet. Aucun n'était visible en planche : tous se voient à
+Six défauts trouvés en migrant une application entière (trente pages, six
+zones) vers le paquet. Aucun n'était visible en planche : tous se voient à
 l'usage, et plusieurs ne se voient qu'à un ÉTAT. Ils avaient tous été
 rattrapés dans le `globals.css` de l'app, et memoire en portait déjà trois
 des siens : un correctif recopié dans deux apps est un défaut du paquet qui
@@ -979,14 +979,14 @@ s'ignore.
 ### `.zv-em` penchait
 
 `Em` rend un vrai `<em>`, et `.zv-em` ne déclarait que la couleur et la
-graisse — c'est bien ce que demande la charte : « la deuxième moitié de
+graisse, c'est bien ce que demande la charte : « la deuxième moitié de
 phrase d'un titre bascule en indigo et prend un cran de graisse ». Mais le
 navigateur, lui, penche les `<em>` par défaut, et Outfit n'a **aucune
 italique** chargée : il en fabriquait donc une oblique de synthèse. Sur la
 page pilier de mcp-factory, la seconde moitié du `<h1>` partait en faux
 italique à 76 px, sur le premier écran.
 
-`.zv-inset em` remettait déjà `font-style: normal` — la règle existait donc
+`.zv-inset em` remettait déjà `font-style: normal` : la règle existait donc
 au paquet, mais seulement là où l'on avait rencontré le problème. Elle passe
 sur `.zv-em`, qui est l'endroit qui en a besoin par construction.
 
@@ -995,11 +995,11 @@ sur `.zv-em`, qui est l'endroit qui en a besoin par construction.
 C'était la **seule** classe interactive du paquet sans état désactivé.
 `.zv-btn`, `.zv-chrome-btn`, `.zv-menu__item`, `.zv-pager__arrow`,
 `.zv-range` et tous les champs en ont un, et plusieurs neutralisent
-explicitement le survol — leurs auteurs savaient donc que `:hover`
+explicitement le survol : leurs auteurs savaient donc que `:hover`
 s'applique encore à un bouton désactivé.
 
-Conséquence à l'usage : la corbeille de révocation d'une clé API unique — le
-cas de tout compte à sa première visite — se rendait exactement comme une
+Conséquence à l'usage : la corbeille de révocation d'une clé API unique, le
+cas de tout compte à sa première visite, se rendait exactement comme une
 corbeille active, curseur main compris, et s'allumait au survol comme si
 elle allait agir. Rien dans le rendu ne disait que l'action était fermée.
 
@@ -1016,13 +1016,13 @@ couleur. memoire le rattrapait déjà.
 
 **On dérive donc le sommet de `--accent`.** C'est un écart assumé au relevé :
 pour la charte par défaut, l'écart entre `#2b2bb4` et `#2a2aa8` est d'un
-point de bleu — invisible. La valeur relevée reste écrite en commentaire,
+point de bleu, invisible. La valeur relevée reste écrite en commentaire,
 pour que l'arbitrage se relise.
 
-### `.zv-header` perdait son flou — et le diagnostic d'origine était faux
+### `.zv-header` perdait son flou : et le diagnostic d'origine était faux
 
-**Le défaut réel : l'ordre des deux `backdrop-filter`.** Lightning CSS — le
-compilateur de Tailwind v4, donc celui de toutes nos applications Next —
+**Le défaut réel : l'ordre des deux `backdrop-filter`.** Lightning CSS (le
+compilateur de Tailwind v4, donc celui de toutes nos applications Next)
 SUPPRIME la déclaration non préfixée quand elle précède la forme `-webkit-`.
 Or Firefox ne connaît QUE la forme non préfixée. La barre y perdait son flou.
 Reproduit avec la chaîne exacte des apps, dans les deux ordres : l'inversion
@@ -1037,40 +1037,40 @@ repli, écrasé juste après par une règle de spécificité égale et postérie
 
 Ce paquet a d'abord repris cette prémisse et remplacé le voile par
 `rgb(from var(--paper) r g b / 0.92)`. **C'était une régression**, trouvée
-avant publication : cette syntaxe sort du compilateur NUE — ni `@supports`,
+avant publication : cette syntaxe sort du compilateur NUE, ni `@supports`,
 ni repli. Sur un navigateur sans couleurs relatives, la valeur devient
 invalide au calcul, le raccourci `background` retombe à sa valeur initiale,
 et une barre FIXE se retrouve sans aucun fond au-dessus du texte qui défile.
 Soit 3,5 % d'usage qui voyaient le voile correctement et ne verraient plus
-rien — Chrome ≤ 118, Firefox ≤ 127, Safari ≤ 16.3.
+rien : Chrome ≤ 118, Firefox ≤ 127, Safari ≤ 16.3.
 
 Le voile reste donc en `color-mix`, et le commentaire sur place dit
 maintenant pourquoi il ne faut PAS le « corriger ».
 
 **La leçon, plus large que ce correctif** : un correctif recopié dans deux
-apps est un signal fort — c'est ce qui a motivé cette fournée. Mais ce peut
+apps est un signal fort, c'est ce qui a motivé cette fournée. Mais ce peut
 aussi être une ERREUR recopiée dans deux apps. Le nombre d'occurrences dit
 qu'il faut regarder ; il ne dit pas que le diagnostic est juste. Ici, la
 seconde app avait copié le commentaire de la première sans revérifier.
 
 ### Le mobile zoomait encore, et deux cibles restaient sous le doigt
 
-Le module `forms` pose la règle des 16 px lui-même — « en dessous, Safari
-iOS zoome à la mise au point du champ et décale toute la page » — mais
+Le module `forms` pose la règle des 16 px lui-même (« en dessous, Safari
+iOS zoome à la mise au point du champ et décale toute la page ») mais
 `.zv-input--bare` y échappait : son bloc mobile le redescend à `--app-lg`,
 soit 14 px. `.zv-search__input` n'était visé par aucune des deux règles.
 Ce sont précisément les deux champs les plus saisis d'une application.
 
 Trois cibles restaient par ailleurs sous `--tap` : les deux commandes de
-pagination et le fil d'Ariane — qui est un seul lien pour tout le fil.
+pagination et le fil d'Ariane, qui est un seul lien pour tout le fil.
 Et `.zv-rows__val` gardait son `min-width: 260px` sous le seuil, alors que
 le module libérait déjà la CLÉ : dans une carte de 215 px, la valeur
 débordait de 45 px.
 
 ### Cinq composants d'ancre refusaient `target` et `rel`
 
-`ButtonLink`, `LinkArrow` et tout le module `navigation` — `SideLink`
-compris — étaient déjà typés sur `AnchorHTMLAttributes`. Cinq autres ne
+`ButtonLink`, `LinkArrow` et tout le module `navigation`, `SideLink`
+compris, étaient déjà typés sur `AnchorHTMLAttributes`. Cinq autres ne
 l'étaient pas : `Link` (typography), et `NavLink`, `NavDrawerLink`, `Langue`
 et `RailItem` (layout). Ils portaient `HTMLAttributes<HTMLAnchorElement>`,
 qui ne connaît ni `target`, ni `rel`, ni `download`, ni `hreflang`.
@@ -1078,7 +1078,7 @@ qui ne connaît ni `target`, ni `rel`, ni `download`, ni `hreflang`.
 Ce n'est pas une nuance de typage : un lien sortant ne peut pas porter
 `rel="noopener"`, et un lien qui doit s'ouvrir à côté ne le peut pas non
 plus. mcp-factory a dû garder deux `className="zv-link"` écrits à la main
-pour cette seule raison — dont un dans un formulaire à moitié rempli, où
+pour cette seule raison : dont un dans un formulaire à moitié rempli, où
 suivre le lien sans `target="_blank"` aurait vidé la saisie.
 
 L'incohérence n'était pas un choix : `navigation` avait la bonne base depuis
@@ -1091,20 +1091,20 @@ appel existant ne casse.
 ### Les quatre variantes de bouton s'excluent, et le CSS le dit enfin
 
 Le défaut ci-dessus a une cause structurelle, et c'est elle qu'il fallait
-traiter — sans quoi la prochaine app le refait.
+traiter : sans quoi la prochaine app le refait.
 
 `zv-btn`, `zv-btn--ghost`, `zv-btn--ink` et `zv-btn--danger` sont quatre
 classes **autonomes et mutuellement exclusives**. Mais le socle commun les
-groupe dans un même sélecteur — ce qui leur donne exactement l'air d'une base
+groupe dans un même sélecteur : ce qui leur donne exactement l'air d'une base
 et de ses modificateurs. `Button` n'en rend jamais qu'une ; une app qui écrit
 ses classes à la main, elle, lit du BEM et compose les deux. C'est arrivé.
 
 Le résultat était vicieux : `.zv-btn:hover` (0,2,0) l'emportait sur
-`.zv-btn--ghost` (0,1,0). Un fond indigo apparaissait sous un texte encre —
+`.zv-btn--ghost` (0,1,0). Un fond indigo apparaissait sous un texte encre,
 illisible, et **seulement au survol** : invisible en relecture de code comme
 en capture d'écran. Aucun outil ne pouvait l'attraper. Ni le compilateur, qui
 ne lit pas les chaînes de classes ; ni les tests du paquet, qui vérifient ce
-que les composants émettent — or ils émettaient juste.
+que les composants émettent : or ils émettaient juste.
 
 Les règles qui peignent le plein portent donc désormais
 `:not(:where(.zv-btn--ghost, .zv-btn--ink, .zv-btn--danger))`. Le CSS dit
@@ -1121,8 +1121,8 @@ d'autres.
 commentaire est sur place, au-dessus de la première.
 
 **Ce qui a été écarté** : rendre la combinaison visiblement fautive (un
-liseré d'alerte) — on ne met pas de piège de développement dans du CSS de
-production ; et renommer `zv-btn` en `zv-btn--plein` — c'est une rupture pour
+liseré d'alerte), on ne met pas de piège de développement dans du CSS de
+production ; et renommer `zv-btn` en `zv-btn--plein`, c'est une rupture pour
 les quatre consommateurs, dont la landing qui écrit toutes ses classes à la
 main, pour un gain de lisibilité seul.
 
@@ -1130,7 +1130,7 @@ main, pour un gain de lisibilité seul.
 
 Deux retours de recette sur mcp-factory, sur la même page.
 
-### La FAQ se replie enfin — et le CSS l'attendait
+### La FAQ se replie enfin : et le CSS l'attendait
 
 `FaqItem` rendait deux `<p>`, tout ouvert, avec ce commentaire : « la cacher
 derrière un clic n'ajoute rien à cinq questions ». L'argument tient à cinq
@@ -1141,7 +1141,7 @@ qu'on n'a pas demandées.
 Surtout, **le CSS prévoyait déjà l'accordéon** : `.zv-faq__q` portait
 `cursor: pointer` et un `svg` de chevron stylé en `--accent`. La façade React
 ne les a jamais servis. Le curseur promettait donc un clic qui ne faisait
-rien — l'affordance était un mensonge.
+rien : l'affordance était un mensonge.
 
 `FaqItem` rend maintenant un `<details>`, comme `Fold`. Donc **aucun
 JavaScript** : ouverture au clic, à Entrée et à Espace, annonce native de
@@ -1155,26 +1155,26 @@ peut ouvrir. Une app avait dû rendre ses réponses ouvertes pour cette raison
 précise, son accordéon maison démontant son contenu.
 
 L'API ne bouge pas : `<FaqItem question={…}>réponse</FaqItem>`. Une prop
-`ouvert` s'ajoute, pour la question qu'on veut dépliée d'entrée — **une par
+`ouvert` s'ajoute, pour la question qu'on veut dépliée d'entrée : **une par
 page au plus**, sinon le repli ne sert plus à rien.
 
 **Et le bloc reçoit son filet.** `.zv-faq` était un aplat blanc posé sur le
 papier, sans début ni fin, là où toutes les autres surfaces blanches de la
-vitrine — carte, encart, tarif, dépliant — en portent un. Il faisait tache.
+vitrine (carte, encart, tarif, dépliant) en portent un. Il faisait tache.
 C'est le même filet que `.zv-fold`.
 
 ### La barre coupait les titres en deux
 
 Le voile de `.zv-header` se dégradait sur TOUTE sa hauteur : à sa base il ne
 restait presque rien. Un titre de 38 ou 56 px qui passait dessous se
-retrouvait donc coupé en deux — moitié voilée, moitié nette — avec les
+retrouvait donc coupé en deux (moitié voilée, moitié nette) avec les
 entrées de navigation posées sur ses lettres. Deux textes superposés, aucun
 lisible.
 
 Le voile est désormais PLEIN derrière la barre, et le dégradé descend SOUS
 elle, dans un `::after` de 24 px. Le dégradé n'est pas perdu : il adoucit le
 passage là où il ne se dispute plus la place avec la navigation. La frange
-porte `pointer-events: none` — elle couvre le haut du contenu, elle ne doit
+porte `pointer-events: none` : elle couvre le haut du contenu, elle ne doit
 rien intercepter.
 
 Aucun changement de gabarit : le `::after` est en absolu sous une barre déjà
@@ -1185,13 +1185,13 @@ fixée, il ne prend pas de place dans le flux.
 ## Les e-mails (27/08/2026)
 
 Le paquet gagne des gabarits d'e-mail (`@zevra/ui/email`). Ils étaient
-jusqu'ici refaits par chaque produit, hors charte — fond crème, angles
+jusqu'ici refaits par chaque produit, hors charte, fond crème, angles
 ronds, surligné jaune, titres en serif : rien de tout cela n'est dans le
 système.
 
 ### La dérogation à la règle première, et pourquoi elle est imposée
 
-« Le CSS est la source de vérité, les composants n'en sont qu'une façade » —
+« Le CSS est la source de vérité, les composants n'en sont qu'une façade » :
 sauf ici. Ce n'est pas un choix, c'est le support :
 
 - il n'y a **aucune feuille de style** à charger dans un e-mail ;
@@ -1201,7 +1201,7 @@ sauf ici. Ce n'est pas un choix, c'est le support :
 - ni flexbox ni grid ne sont fiables : la mise en page est en **tables** ;
 - les **dégradés** ne se rendent pas dans Outlook.
 
-Les valeurs sont donc écrites en clair — mais tirées du **miroir JS des
+Les valeurs sont donc écrites en clair : mais tirées du **miroir JS des
 tokens**, que `tokens/index.js` destinait déjà explicitement à cet usage
 (« couleurs de thème d'un e-mail ») et que `tests/tokens.test.js` tient
 aligné sur le CSS. Aucune seconde source n'apparaît. Le détour par
@@ -1212,12 +1212,12 @@ aligné sur le CSS. Aucune seconde source n'apparaît. Le détour par
 | Dans le système | Dans l'e-mail | Pourquoi |
 |---|---|---|
 | Bouton plein en dégradé indigo | Aplat `--accent-deep` | Les dégradés ne se rendent pas dans Outlook |
-| Filet de spectre en `linear-gradient` | Trois aplats de 19 px | Idem — une bande vide sinon |
+| Filet de spectre en `linear-gradient` | Trois aplats de 19 px | Idem : une bande vide sinon |
 | `padding` sur le `<a>` du bouton | Table + `bgcolor` | Outlook ignore le padding d'un `<a>` |
 | Largeur `--page-max` | 600 px | Le volet de lecture d'Outlook |
 
 Ce qui NE change pas : l'angle vif, le papier, l'encre, les trois familles,
-un seul bouton plein par message, et le filet de spectre comme signature —
+un seul bouton plein par message, et le filet de spectre comme signature,
 premier de ses trois emplois autorisés.
 
 ### Le mode sombre est refusé
@@ -1225,7 +1225,7 @@ premier de ses trois emplois autorisés.
 `color-scheme: light`, explicitement. La charte est claire par nature :
 l'inversion automatique d'Apple Mail retourne les neutres **sans toucher aux
 aplats**, et l'indigo du bouton se retrouverait sur un fond devenu noir. Même
-règle que pour les surfaces sombres du système — elles se font avec la bande
+règle que pour les surfaces sombres du système : elles se font avec la bande
 manifeste, jamais en inversant les neutres.
 
 ### Deux règles qui ne sont pas décoratives
@@ -1235,7 +1235,7 @@ deux est bloquée par défaut ; un e-mail qui ne dit pas de qui il vient part à
 la corbeille. D'où `marque` obligatoire, et le logo en option.
 
 **Le preheader est un contenu, pas un détail.** Sans lui, le client affiche
-les premiers mots du HTML dans la liste des messages — c'est la seule ligne
+les premiers mots du HTML dans la liste des messages : c'est la seule ligne
 dont on dispose pour convaincre d'ouvrir.
 
 ### Un piège rencontré, et gardé
@@ -1245,7 +1245,7 @@ Les piles de polices du paquet contiennent des **guillemets doubles**
 mêmes guillemets : l'attribut se referme au premier guillemet interne et le
 nœud perd **tout** son style. L'e-mail entier repassait en Times, sans
 couleurs, avec un libellé de bouton blanc devenu illisible sur l'aplat
-indigo. Cela ne se voit pas à la relecture — cela s'est vu au rendu. Les
+indigo. Cela ne se voit pas à la relecture : cela s'est vu au rendu. Les
 piles sont converties en guillemets simples, et un test refuse désormais
 tout attribut `style` contenant un guillemet double.
 
@@ -1255,14 +1255,14 @@ tout attribut `style` contenant un guillemet double.
 
 La barre gagne, à DROITE, deux pièces que toute suite de produits finit par
 avoir : le **lanceur** pour passer d'un produit à l'autre, et la **zone de
-compte** pour savoir qui l'on est. HORS RELEVÉ — aucune planche n'en montre.
+compte** pour savoir qui l'on est. HORS RELEVÉ : aucune planche n'en montre.
 
 ### Quatre carrés, pas neuf points
 
 L'icône du lanceur est une grille de **quatre carrés pleins** (icône
 `applications`), là où la convention du web est neuf points ronds. Deux
-raisons : la charte est carrée depuis l'arbitrage du 25/08 — les points
-d'encre du jeu d'icônes sont d'ailleurs déjà des carrés —, et quatre carrés
+raisons : la charte est carrée depuis l'arbitrage du 25/08, les points
+d'encre du jeu d'icônes sont d'ailleurs déjà des carrés, et quatre carrés
 se lisent mieux que neuf points à 20 px. L'affordance reste immédiate : un
 pavé de formes régulières au bord droit d'une barre ne se confond avec rien.
 
@@ -1278,19 +1278,19 @@ composant.
 
 `.zv-nav__links` disparaît sous le point de rupture (et sous 1150px en
 `nav--riche`), remplacée par le burger. Un compte placé dedans s'évanouit
-sur téléphone — et se connecter est justement la première chose qu'on y
+sur téléphone : et se connecter est justement la première chose qu'on y
 fait. D'où `.zv-nav__actions`, une zone sœur qui survit au seuil.
 
 ### L'état : CSS d'abord, prop ensuite
 
-Ouverture au survol ET au focus, en CSS seul — la barre reste rendue au
+Ouverture au survol ET au focus, en CSS seul : la barre reste rendue au
 serveur, sans rien à hydrater, comme `.zv-navdd`. Une app qui préfère
 l'ouverture au CLIC (la convention des lanceurs) tient l'état et passe
 `ouvert` : un état se dit en PROP, il ne se peint pas depuis l'app.
 
 Le panneau n'est pas un `role="menu"` : ce rôle promet une navigation aux
 flèches que le CSS seul ne peut pas tenir. Ce sont des liens dans un
-panneau, atteignables à la tabulation — une promesse tenue vaut mieux qu'un
+panneau, atteignables à la tabulation : une promesse tenue vaut mieux qu'un
 rôle exact et menteur.
 
 ### Deux défauts trouvés au rendu, pas à la relecture
@@ -1298,7 +1298,7 @@ rôle exact et menteur.
 **Le double ancrage.** Le `.zv-menu` du paquet est lui-même en position
 absolue : imbriqué dans un panneau qui porte déjà l'ancrage, il se
 positionnait une seconde fois, à partir du bord droit, et la grille sortait
-de l'écran. Sur grand écran la place restante le masquait — c'est le rendu à
+de l'écran. Sur grand écran la place restante le masquait : c'est le rendu à
 390 px qui l'a montré. Le panneau ancre, le menu ne fournit plus que sa
 surface.
 
@@ -1311,40 +1311,40 @@ déconnecter » non. C'est la BALISE qui change, pas l'apparence.
 
 Le lanceur montrait l'initiale des produits faute de pouvoir charger leur
 glyphe : le catalogue est compilé par `tsc`, qui ne sait pas importer un
-PNG, et il est rendu hors du dépôt — planche, kit de canvas, page d'admin —
+PNG, et il est rendu hors du dépôt (planche, kit de canvas, page d'admin)
 où un chemin relatif ne résout pas. Deux « M » (Mémoire, MCP) se
 retrouvaient côte à côte.
 
 Même arbitrage que pour les icônes : **inliner**. Ce qui l'empêchait, c'est
-le poids — DECISIONS le notait déjà : « un PNG s'inline en data-URI, mais
+le poids, DECISIONS le notait déjà : « un PNG s'inline en data-URI, mais
 c'est 150 ko de texte là où un SVG en faisait 4 ». Les originaux sont du
 matériel de charte (512 px, 900 Ko à eux sept) ; une tuile les affiche à
-28 px. Réduits à 96 px — le double de la plus grande taille d'affichage,
-pour les écrans à densité — ils tombent à **60 Ko**, soit ~80 Ko en base64.
+28 px. Réduits à 96 px (le double de la plus grande taille d'affichage,
+pour les écrans à densité) ils tombent à **60 Ko**, soit ~80 Ko en base64.
 L'inlinage redevient tenable.
 
 Deux étapes, chacune sur un précédent du dépôt :
 
 - `scripts/build-glyphes.py` réduit et **committe** `logos/glyphes/*.png`,
-  comme `logos/favicon/` — la réduction demande Pillow, le build n'a pas à
+  comme `logos/favicon/` (la réduction demande Pillow, le build n'a pas à
   en dépendre ;
 - `scripts/build-glyph-data.mjs` les inline dans `react/glyph-data.ts`,
-  comme `react/icon-data.ts` — généré, ignoré par git, dans la chaîne Node.
+  comme `react/icon-data.ts`) généré, ignoré par git, dans la chaîne Node.
 
 ⚠️ **Entrée SÉPARÉE** (`@zevra/ui/glyphes`) : 80 Ko n'ont rien à faire dans
 le barrel React, que toute app importe. Seule celle qui affiche des logos
 la charge. `LanceurApp` garde donc `glyphe` en prop plutôt que de résoudre
-un identifiant lui-même — sinon `layout.tsx`, qui est dans le barrel,
+un identifiant lui-même : sinon `layout.tsx`, qui est dans le barrel,
 tirerait les 80 Ko derrière lui.
 
-⚠️ Réduction SEULE : aucune recoloration, aucune resaturation — la charte
+⚠️ Réduction SEULE : aucune recoloration, aucune resaturation, la charte
 l'interdit sur les glyphes couleur. Et ils ne descendent pas sous 24 px :
 la charte y demande une version monochrome, qui n'existe pas encore.
 
 ### Les logos dans les e-mails (27/08/2026)
 
 Un e-mail ne peut afficher un glyphe ni par chemin relatif, ni par data-URI
-— Gmail bloque les secondes. Il lui faut une **URL absolue et publique**.
+- Gmail bloque les secondes. Il lui faut une **URL absolue et publique**.
 
 Retenu : la planche les publie. `design.zevra.tech` est déployé depuis ce
 dépôt, à chaque version : c'est le seul endroit où l'image ne peut pas
@@ -1354,18 +1354,18 @@ les adresses. `email({ produit: 'memoire' })` suffit.
 
 ⚠️ Ce que cela suppose, et qu'il faut savoir : les e-mails déjà partis
 pointent vers cette adresse pour toujours. **Le chemin `/logos/glyphes/` ne
-se renomme pas** — un e-mail d'il y a deux ans doit continuer d'afficher son
+se renomme pas** : un e-mail d'il y a deux ans doit continuer d'afficher son
 logo. Si la planche devait changer d'hôte, l'ancien devrait redirigier.
 
 Et si l'adresse tombe, le repli est déjà en place : `alt` porte le nom de la
 marque, et `marque` reste obligatoire. Une image sur deux est bloquée de
-toute façon — c'est le texte qui identifie l'expéditeur, jamais l'image.
+toute façon : c'est le texte qui identifie l'expéditeur, jamais l'image.
 
 ## Le lanceur d'applications devient lisible (27/08/2026, 0.29.0)
 
 Le panneau du lanceur montrait sept glyphes et sept noms de marque. Pour
 qui travaille chez Zevra, c'est suffisant. Pour un client qui découvre la
-suite — et c'est lui qui ouvre ce panneau —, « Lexform » et « Plume » ne
+suite, et c'est lui qui ouvre ce panneau, « Lexform » et « Plume » ne
 disent **rien**. Une grille de marques n'est pas une liste d'applications :
 c'est un test de mémoire.
 
@@ -1385,19 +1385,19 @@ aplat : le filet passe à `--accent-line`, l'application courante le porte
 déjà. Sans lui, sept PNG flottaient sur du blanc.
 
 **Un en-tête, et des groupes.** Le titre « Applications » précédé du filet
-de spectre — deuxième emploi de la signature, celui qui fait qu'un panneau
+de spectre : deuxième emploi de la signature, celui qui fait qu'un panneau
 d'apps ressemble à Zevra et pas à n'importe quel lanceur. Le groupe
 (« Suite Zevra ») est facultatif : avec une seule famille il n'apporte rien.
 
 **Quatre colonnes, plus trois.** Sept produits en trois colonnes laissaient
 une dernière rangée d'une seule tuile ; en quatre, ils tiennent en 4 + 3.
-Sur téléphone, trois colonnes souples — quatre tuiles de 104px ne tiennent
+Sur téléphone, trois colonnes souples : quatre tuiles de 104px ne tiennent
 pas dans les 358px qui restent.
 
 ⚠️ **PAS DE CHAMP DE RECHERCHE**, et c'est délibéré. La maquette d'origine
 en portait un. Sept produits se lisent d'un coup d'œil : une recherche y
 ajouterait un contrôle à servir, un état à tenir, un focus à gérer et un
-clavier qui s'ouvre sur téléphone — pour trouver ce qui est déjà à l'écran.
+clavier qui s'ouvre sur téléphone, pour trouver ce qui est déjà à l'écran.
 Le jour où la suite dépasse la douzaine, c'est une autre conversation.
 
 Ce qui n'a **pas** été repris de la maquette : les angles arrondis des
@@ -1406,13 +1406,13 @@ d'applications n'est pas une exception.
 
 ## Le drapeau qui se prenait pour un composant (28/08/2026, 0.29.1)
 
-`rail.js` marquait « déjà armé » en posant `data-zv-rail` sur `<html>` —
+`rail.js` marquait « déjà armé » en posant `data-zv-rail` sur `<html>` :
 le nom même de l'attribut qui DÉSIGNE un rail. Son propre sélecteur,
 `[data-zv-rail]`, ramassait donc `<html>` : **la page entière devenait un
 rail**.
 
 Sur une page qui a un vrai rail, cela ne se voyait pas. Sur une page qui
-n'en a pas — la seule où ça compte — `a[href^="#"]` ramassait tous les
+n'en a pas, la seule où ça compte, `a[href^="#"]` ramassait tous les
 liens d'ancre, boutons compris, et le premier recevait
 `.zv-rail__item--on`. Or cette classe pose `color: var(--accent-deep)` :
 un appel à l'action indigo sur fond indigo, illisible.
@@ -1421,7 +1421,7 @@ Constaté sur `/bootcamp` : « Candidater pour octobre » était le premier
 lien d'ancre de la page.
 
 Le drapeau s'appelle désormais `data-zv-rail-arme`, et `rails()` écarte
-explicitement `<html>` et `<body>` — ceinture et bretelles, parce qu'un
+explicitement `<html>` et `<body>` : ceinture et bretelles, parce qu'un
 consommateur peut écrire ce qu'il veut sur la racine.
 
 Un test garde la classe entière de fautes : dans tout module livré, aucun
@@ -1447,13 +1447,13 @@ ne fait que doser ce qu'on en voit.
 
 Le prolongement sous la barre (`::after`) part désormais de 72 % lui
 aussi. Son sommet doit valoir exactement l'opacité de la barre, sinon la
-jointure fait une marche — d'autant plus visible que la barre est
+jointure fait une marche : d'autant plus visible que la barre est
 translucide.
 
 ### Ce qui n'est PAS revenu
 
 Le dégradé sur toute la hauteur de la barre. C'est lui qui coupait un
-grand titre en deux — moitié voilée, moitié nette, avec les entrées de
+grand titre en deux : moitié voilée, moitié nette, avec les entrées de
 nav posées sur ses lettres. Le voile reste PLAT derrière la barre : c'est
 l'uniformité qui règle ce défaut, pas l'opacité. On récupère donc le
 verre sans rouvrir la panne.
@@ -1471,7 +1471,7 @@ l'exemple de référence.
 
 **Elle vit dans `components.css`, et c'est un choix.** Le découpage du paquet
 oppose une couche vitrine (`layout`, `surfaces`, `motion`) à une couche
-applicative (`forms`, `feedback`, `navigation`, `data`) — or une page
+applicative (`forms`, `feedback`, `navigation`, `data`), or une page
 d'erreur est réclamée par les DEUX : la landing Astro comme l'app Next.
 `feedback.css` en aurait privé la landing, `layout.css` en aurait privé les
 apps, et la dupliquer est exclu. `components.css` ne dépend que de `tokens`
@@ -1480,13 +1480,13 @@ C'est le seul module que les deux couches chargent réellement.
 
 **Le composant ne porte AUCUN texte.** C'est la décision qui compte. Une
 plaisanterie câblée dans un design system part dans les sept apps, dans une
-seule langue, et n'en revient jamais — et elle vieillit vite. Le composant
+seule langue, et n'en revient jamais : et elle vieillit vite. Le composant
 n'expose que des emplacements ; la copie de référence vit dans l'exemple du
 catalogue, là où on la lit avant de la copier, et où la changer n'oblige
 personne.
 
 **Drôle par le VOCABULAIRE, pas par le ton.** La copie de référence
-plaisante en droit — « elle a peut-être exercé son droit à l'effacement »
+plaisante en droit : « elle a peut-être exercé son droit à l'effacement »
 (art. 17 RGPD), « vous n'avez pas qualité pour agir » pour un 403. Ça
 fonctionne parce que le lecteur est un juriste : c'est un mot juste employé
 de travers, pas une blague sur un ton qu'Encre & Papier n'a pas. Et
@@ -1494,7 +1494,7 @@ l'ordre est fixe : **le titre dit la panne en clair**, l'esprit vient
 ensuite et se dédit lui-même (« Plus sérieusement : … »). Une page d'erreur
 qui fait rire avant d'informer est une page d'erreur ratée.
 
-**La ligne de référence en bas** — `RÉF. 404 · GET /dossier/2019` — n'est pas
+**La ligne de référence en bas** : `RÉF. 404 · GET /dossier/2019` : n'est pas
 un ornement. Elle donne au visiteur de quoi signaler l'incident et au support
 de quoi le retrouver, et elle a la forme d'une cote de dossier, ce qui est la
 seule illustration dont cette maison ait besoin.
@@ -1512,8 +1512,8 @@ Mémoire, et **aucune prop ne permettait de le corriger**. Le même composant
 « Erreur 404 ». Son propre arbitrage, écrit dans le même commit, disait
 pourtant qu'elle « ne porte AUCUN texte ».
 
-C'est la faute déjà relevée pour `.zv-btn` et `.zv-meta` — une valeur qu'une
-app aura légitimement besoin d'ajuster ne se pose pas en dur — mais vue d'un
+C'est la faute déjà relevée pour `.zv-btn` et `.zv-meta`, une valeur qu'une
+app aura légitimement besoin d'ajuster ne se pose pas en dur, mais vue d'un
 angle qui la rend **pire**. Une couleur posée en dur, l'app peut au moins
 tenter un `className` et constater que rien ne bouge. Un `alt`, le CSS ne le
 peint pas : l'app n'a **aucun recours**. Et le défaut est invisible à
@@ -1524,19 +1524,19 @@ Deux règles en sortent.
 
 **Le glyphe d'une page d'erreur est DÉCORATIF par défaut** (`glypheAlt=""`).
 Sur une page qui annonce déjà « Erreur 404 » et « Page introuvable », la
-marque n'ajoute rien — l'annoncer place un nom de produit devant
+marque n'ajoute rien : l'annoncer place un nom de produit devant
 l'information que le lecteur est venu chercher. La prop existe pour l'app
 qui a une raison de la nommer.
 
 **Et un garde, parce qu'un correctif ponctuel ne protège que ce cas-là.**
 `tests/react.test.js` refuse désormais toute littérale dans un `alt` ou un
-`aria-label` de la couche React — le catalogue excepté, puisque sa copie EST
-l'exemple à recopier — et exige qu'un `<img>` porte un `alt`, fût-il vide :
+`aria-label` de la couche React (le catalogue excepté, puisque sa copie EST
+l'exemple à recopier) et exige qu'un `<img>` porte un `alt`, fût-il vide :
 sans attribut du tout, un lecteur d'écran annonce le nom du fichier, souvent
 un data-URI de 60 Ko. Le garde a été vérifié en réintroduisant la faute : il
 la signale à la ligne près.
 
-Il a aussi attrapé son propre défaut au premier jet — un quantificateur
+Il a aussi attrapé son propre défaut au premier jet : un quantificateur
 paresseux traversait `alt=""` et attrapait l'attribut suivant.
 
 ## Le lanceur ne liste que ce qui s'ouvre (28/08/2026, 0.34.0)
@@ -1548,20 +1548,110 @@ correction descend dans les sept apps, aucune n'a de liste à tenir.
 **Un produit sans adresse n'entre pas dans le lanceur.** Plume et Supernovia
 ont leur glyphe depuis le 26/08 et rien à ouvrir. Une tuile qui mène à rien
 est pire qu'une absence : elle promet un produit, le visiteur clique, et il
-tombe. Le lanceur se construit donc sur `APPS` — les produits qui ont une
-adresse — et non sur `PRODUITS`. La liste se DÉDUIT du registre : le jour où
+tombe. Le lanceur se construit donc sur `APPS`, les produits qui ont une
+adresse, et non sur `PRODUITS`. La liste se DÉDUIT du registre : le jour où
 Plume ouvre, une ligne l'y fait apparaître partout.
 
 **https, toujours.** `memoire.zevra.tech` avait été communiqué en `http` :
 cette adresse-là répond **404** (vérifié au curl), la version chiffrée répond
-200. Un test refuse désormais toute adresse non chiffrée — l'erreur ne se
+200. Un test refuse désormais toute adresse non chiffrée : l'erreur ne se
 serait pas vue en relecture, et elle aurait été le même lien mort dans les
 sept apps.
 
 **Et une conséquence de mise en page, qui n'était pas dans la demande.** À
-cinq tuiles, la grille à quatre colonnes redonnait 4 + 1 — la dernière rangée
+cinq tuiles, la grille à quatre colonnes redonnait 4 + 1 : la dernière rangée
 d'une seule tuile que le passage à quatre colonnes avait justement servi à
 supprimer pour sept. Une requête de quantité (`:has(> :nth-child(5):last-child)`)
 repasse à trois colonnes pour ce compte-là seulement, et **se désarme
 d'elle-même** : vérifié au navigateur, 3 colonnes à 5 tuiles, 4 dès qu'il y
 en a 6 ou 7. Personne n'aura à y penser quand la suite s'agrandira.
+
+## Les panneaux de la barre débordaient de l'écran par la gauche (28/08/2026, 0.35.0)
+
+Trouvé en mesurant mcp-factory dans une iframe de 375 px : la seule façon de
+juger un téléphone quand la fenêtre du navigateur ne redimensionne pas le
+viewport.
+
+`.zv-lanceur__panneau` et `.zv-compte__panneau` sont en `position: absolute;
+right: 0` : ils se calent sur le bord droit de LEUR DÉCLENCHEUR. Or le
+lanceur n'est pas au bord de l'écran : le compte et le burger le suivent,
+soit une soixantaine de pixels. Le plafond `max-width: calc(100vw - 32px)`,
+lui, a été écrit en pensant un panneau ancré au bord de l'écran : son
+commentaire dit « au bord droit d'un téléphone ».
+
+Les deux ensemble donnent un panneau à la bonne LARGEUR mais à la mauvaise
+PLACE. Mesuré à 375 px : largeur 343 (le plafond fait son travail), bord
+gauche à **−65**. Deux tuiles sur cinq étaient coupées, et la partie hors
+écran était inatteignable.
+
+⚠️ ET C'EST SILENCIEUX. Un débordement par la GAUCHE n'engendre aucun
+défilement horizontal : le navigateur le rogne, sans rien signaler. Le
+contrôle « la page ne déborde pas » que l'on fait spontanément répondait donc
+OUI pendant que deux produits étaient hors de portée.
+
+Sous le point de rupture, les panneaux s'ancrent désormais à l'ÉCRAN et non à
+leur déclencheur : `left: 16px; right: 16px`, largeur pleine. C'est le motif
+que tout le monde connaît sur téléphone, et il ne dépend plus de ce qui est
+posé à droite du déclencheur : un jour où la barre gagnera une entrée, rien
+ne sera à recalculer. Le plafond en `100vw` devient alors redondant : il
+reste, il ne coûte rien et il protège un panneau posé ailleurs.
+
+**Ce qui a été écarté** : réduire le plafond de la largeur du burger et du
+compte. Ça marche tant que personne ne touche à la barre, et ça casse au
+premier ajout : une constante qui encode la mise en page d'à côté.
+
+## Le tiret cadratin est banni (29/08/2026, 0.35.0)
+
+Règle impérative, inscrite dans AGENTS.md avec celles qui ne se négocient
+pas : le signe U+2014 ne paraît plus dans le dépôt. Ni le code, ni les
+commentaires, ni la documentation, ni la copie rendue.
+
+Pourquoi c'est une règle et pas un goût : le tiret cadratin est le signe
+qu'on pose quand on n'a pas tranché. Le français en a de plus précis, et il
+faut choisir lequel. **Deux-points** quand ce qui suit explique ce qui
+précède, **virgule** quand la phrase porte déjà un « : », **parenthèses**
+pour une incise qui contient elle-même des virgules, **trait d'union** pour
+une puce de liste. C'est la répartition qu'a suivie le passage : 600
+deux-points, 222 virgules, 132 parenthèses, 87 incises, 12 puces.
+
+Le **demi-cadratin** U+2013 reste autorisé dans son seul emploi légitime,
+l'intervalle (« 1 – 25 sur 128 », « 0,14–0,2em »). Autre signe, autre
+travail.
+
+### Ce que ce nettoyage a failli casser
+
+Un premier transformateur appliquait des expressions régulières de nettoyage
+sur le fichier ENTIER. Il a fusionné
+
+    .zv-sidelink--on,
+    .zv-sidelink[aria-current="page"] {
+
+en un seul sélecteur. Deux règles CSS devenues une, en silence, et aucun
+test du dépôt n'aurait pu le voir : les classes existaient toujours. La
+règle qui en sort vaut au-delà de ce cas : **un tiret cadratin ne vit que
+dans de la prose**, donc on n'ouvre jamais le reste du fichier. Le second
+transformateur ne touche qu'aux commentaires, aux chaînes et au markdown, et
+un script de preuve compare le squelette de chaque fichier (code sans
+commentaires ni contenu de chaînes) avant et après. Il est resté identique.
+
+Deux autres défauts, attrapés à la relecture du diff et non par un test :
+les espaces se règlent AU POINT D'INSERTION, jamais sur le fichier (« site ,
+c'est » et « page d'admin ) » venaient de là), et la ponctuation ne se
+double pas, parce que le français ferme souvent une incise par un tiret
+suivi d'une virgule (un « halo » suivi du tiret puis d'une virgule donnait « halo,, parce que »).
+
+### Le garde, et sa particularité
+
+`tests/paquet.test.js` refuse le signe dans tout fichier suivi par git, hors
+binaires. Sans lui la règle durerait un commit : elle comptait **1 079
+infractions** le jour où elle a été écrite, ce qui est sa propre
+démonstration.
+
+⚠️ Une règle qui bannit un caractère ne peut pas le porter. Le motif du test
+s'écrit donc en échappement `\u2014`, et AGENTS.md nomme le signe par son
+point de code : sinon le garde se dénonce lui-même à la première exécution.
+C'est exactement ce qu'il a fait au premier jet, et il avait raison.
+
+Il a aussi rendu un service immédiat : un `git checkout` d'essai avait
+annulé le nettoyage de `tokens.css`, encore non commité. Le garde a signalé
+la régression dans la minute.