@zevra/ui 0.34.0 → 0.36.0

package/src/motion.css

@@ -1,8 +1,8 @@
-/* Zevra UI — mouvement : les neuf animations autorisées
+/* Zevra UI, mouvement : les neuf animations autorisées
  * Dépend de tokens.css. Relevé dans `maquettes/Motion.html`, qui les nomme
  * et fixe leurs plages de défilement.
  *
- * NEUF, PAS UNE DE PLUS — plus un DOSAGE. La micro-entrée des blocs
+ * NEUF, PAS UNE DE PLUS : plus un DOSAGE. La micro-entrée des blocs
  * (.zv-anim-rise--doux, arbitrée le 25/08/2026, DECISIONS.md) n'est pas un
  * dixième mouvement : c'est zv-rise à douze pixels, pour les pages
  * intérieures où l'entrée pleine de la home lasserait à la longue.
@@ -18,24 +18,24 @@
  *
  * Les ENTRÉES se jouent UNE FOIS (arbitrage du 26/08/2026, DECISIONS.md) :
  * l'ancien pilotage par `animation-timeline: view()` rejouait chaque entrée
- * à l'envers dès qu'on remontait — le contenu disparaissait sous le lecteur,
+ * à l'envers dès qu'on remontait, le contenu disparaissait sous le lecteur,
  * et une grille haute n'était jamais « contenue », donc jamais posée. Le
  * paquet arme désormais les entrées par `html.zv-motion` (posé par
  * motion.js, importable en `@zevra/ui/motion.js`), et chaque élément se
  * révèle quand il entre au viewport, puis N'EN BOUGE PLUS. Sans JavaScript,
- * rien n'est armé : la page s'affiche complète — même dégradation douce
+ * rien n'est armé : la page s'affiche complète, même dégradation douce
  * qu'avant.
  *
  * Un échafaudage de scènes (l'expérience épinglée d'une home) peut vouloir
  * garder le pilotage au défilement : poser `data-zv-motion-skip` sur la
- * scène — motion.js n'y touche pas — et re-brancher les @keyframes du
+ * scène, motion.js n'y touche pas, et re-brancher les @keyframes du
  * paquet sur ses timelines nommées. Seuls la barre de progression
  * (zv-anim-progress) et le point d'étape (zv-anim-dot-active) restent
  * scroll-pilotés ici : suivre la lecture est leur raison d'être.
  *
  * Les deux boucles (drift, breathe) animent les propriétés `translate` et
- * `scale` INDÉPENDANTES, jamais `transform` : les éléments concernés — halo
- * centré par translateX(-50%), glyphe en scène — portent déjà un transform
+ * `scale` INDÉPENDANTES, jamais `transform` : les éléments concernés (halo
+ * centré par translateX(-50%), glyphe en scène) portent déjà un transform
  * de placement, qu'une animation sur `transform` écraserait.
  *
  * Décalage : poser `--zv-delay` en style inline. Le stagger d'un groupe est
@@ -96,7 +96,7 @@
 }
 
 /* Le même mouvement, DOSÉ pour les blocs des pages intérieures : huit
- * pixels au lieu de seize — le bloc est posé avant que l'œil ait fini
+ * pixels au lieu de seize, le bloc est posé avant que l'œil ait fini
  * d'arriver, et une visite répétée ne le remarque plus. */
 @keyframes zv-rise-doux {
   from {
@@ -113,7 +113,7 @@
 }
 
 /* La signature de la page d'accueil : les glyphes convergent vers le Z
- * depuis les quatre coins — la seule entrée latérale du système, latérale
+ * depuis les quatre coins, la seule entrée latérale du système, latérale
  * parce qu'elle converge, pas parce qu'elle glisse. */
 @keyframes zv-converge-tl {
   from {
@@ -151,7 +151,7 @@
 }
 
 /* Le filet de spectre se dessine : on anime bien la largeur, et non une
- * mise à l'échelle — le dégradé doit se révéler, pas s'étirer. */
+ * mise à l'échelle, le dégradé doit se révéler, pas s'étirer. */
 @keyframes zv-filet {
   from {
     width: 0;
@@ -161,7 +161,7 @@
 /* ─── Le contrat au repos : des définitions inertes ─────────────────────
  * Chaque classe d'entrée possède ici sa définition PROPRE, volontairement
  * inerte tant que rien n'est armé : sans motion.js, aucune animation n'est
- * attachée et ces propriétés n'ont pas d'effet — la page s'affiche
+ * attachée et ces propriétés n'ont pas d'effet, la page s'affiche
  * complète. C'est aussi le point d'ancrage du dosage : le décalage d'un
  * groupe se règle en posant --zv-delay par élément (120 ms). */
 
@@ -197,7 +197,7 @@
   animation-delay: var(--zv-delay);
 }
 
-/* Les six vagues : 70 ms d'écart — un délai en secondes retrouve son sens
+/* Les six vagues : 70 ms d'écart, un délai en secondes retrouve son sens
  * maintenant que l'entrée est temporelle. */
 .zv-anim-pop--2 { animation-delay: calc(var(--zv-delay) + 0.07s); }
 .zv-anim-pop--3 { animation-delay: calc(var(--zv-delay) + 0.14s); }
@@ -212,7 +212,7 @@
 /* ─── L'armement, puis la libération ────────────────────────────────────
  * `:where(html.zv-motion)` garde la spécificité d'une classe simple : les
  * définitions inertes ci-dessus (délais, noms, durées) restent lisibles à
- * travers l'armement, et `.zv-in` — plus bas dans le fichier — gagne à la
+ * travers l'armement, et `.zv-in`, plus bas dans le fichier, gagne à la
  * cascade sans surenchère. Armé, l'élément attend en PAUSE sur la première
  * image de son animation (fill both) ; libéré, elle se joue une fois et
  * s'arrête sur l'état final. Le défilement n'y reviendra jamais. */
@@ -257,7 +257,7 @@
     animation-name: zv-converge-br;
   }
 
-  /* 6 · Badges, jetons d'entités, éléments de preuve — en cascade. */
+  /* 6 · Badges, jetons d'entités, éléments de preuve : en cascade. */
   :where(html.zv-motion) .zv-anim-pop {
     animation: zv-pop 0.4s var(--zv-easing) both paused;
     animation-delay: var(--zv-delay);
@@ -310,7 +310,7 @@
   }
 
   /* 9 · La barre de progression, pilotée par le défilement global de la
-   *     page — la seule à lire `scroll(root)` plutôt que sa propre entrée. */
+   *     page : la seule à lire `scroll(root)` plutôt que sa propre entrée. */
   @keyframes zv-progress {
     from {
       transform: scaleX(0);
@@ -329,7 +329,7 @@
 
 /* ─── Accessibilité ─────────────────────────────────────────────────────
  * Les neuf classes se neutralisent d'un seul bloc. Une durée courte ne
- * suffit PAS pour une animation pilotée par le défilement — elle ignore la
+ * suffit PAS pour une animation pilotée par le défilement, elle ignore la
  * durée : il faut couper la timeline et l'animation elles-mêmes. La page
  * reste complète et lisible, dans son état final. */
 

package/src/motion.js

@@ -1,10 +1,10 @@
-/* Zevra UI — motion.js : la révélation unique des entrées.
+/* Zevra UI, motion.js : la révélation unique des entrées.
  *
  * Rôle exact, et rien d'autre :
- *   1. poser `zv-motion` sur <html> — c'est cette classe qui ARME les
+ *   1. poser `zv-motion` sur <html> : c'est cette classe qui ARME les
  *      entrées de motion.css (sans elle, la page s'affiche complète) ;
  *   2. poser `zv-in`, UNE fois, sur chaque élément d'entrée quand il
- *      touche le viewport — l'animation se joue, s'arrête sur l'état
+ *      touche le viewport, l'animation se joue, s'arrête sur l'état
  *      final, et on n'observe plus l'élément : remonter ne défait rien.
  *
  * Un échafaudage de scènes scroll-pilotées (l'expérience épinglée d'une
@@ -37,7 +37,7 @@
       /* Marge basse positive : l'entrée se déclenche un peu AVANT le
        * viewport, un saut d'ancre n'atterrit jamais sur un écran vide.
        * Marge haute généreuse : ce que le lecteur a dépassé en volant est
-       * déjà posé s'il remonte — remonter ne doit jamais rejouer quoi que
+       * déjà posé s'il remonte, remonter ne doit jamais rejouer quoi que
        * ce soit, ni le faire attendre. */
       { rootMargin: '80% 0px 12% 0px', threshold: 0.01 }
     );

package/src/nav.js

@@ -1,8 +1,8 @@
-/* Zevra UI — nav.js : l'ouverture et la fermeture du tiroir de navigation.
+/* Zevra UI, nav.js : l'ouverture et la fermeture du tiroir de navigation.
  *
  * Rôle exact, et rien d'autre : poser et retirer `data-open` sur le tiroir,
- * en tenir `aria-expanded` sur le bouton. Le reste — le voile, la glissade,
- * le verrouillage du défilement — est dans overlays.css et se joue sur cet
+ * en tenir `aria-expanded` sur le bouton. Le reste (le voile, la glissade,
+ * le verrouillage du défilement) est dans overlays.css et se joue sur cet
  * attribut seul.
  *
  * Le contrat, en quatre attributs :
@@ -13,7 +13,7 @@
  *                           les déclencheurs portent alors la même valeur.
  *
  * Échap ferme : le CSS ne sait pas le faire, et un panneau qu'on ne ferme
- * qu'en visant un voile est pénible au clavier — et impraticable sans souris.
+ * qu'en visant un voile est pénible au clavier, et impraticable sans souris.
  *
  * S'importe une fois par page : `import '@zevra/ui/nav.js'`. Idempotent, et
  * sans effet si aucun tiroir n'est présent. Le module observe le document :
@@ -44,7 +44,7 @@
   }
 
   // Délégation : un seul écouteur pour toute la page. Les liens du tiroir
-  // sont souvent rendus après coup — les câbler un par un obligerait à
+  // sont souvent rendus après coup : les câbler un par un obligerait à
   // relancer le module à chaque fois.
   document.addEventListener('click', (e) => {
     const cible = e.target instanceof Element ? e.target : null

package/src/navigation.css

@@ -1,24 +1,24 @@
-/* Zevra UI — navigation : le chrome de l'applicatif
+/* Zevra UI (navigation : le chrome de l'applicatif
  * Colonne latérale, barre supérieure, tiroir, feuille de source citée, menu
- * déroulant, fil d'Ariane, pagination, mécanique de défilement — et, depuis
+ * déroulant, fil d'Ariane, pagination, mécanique de défilement) et, depuis
  * le 25/08/2026 (hors relevé, voir DECISIONS.md) : l'onglet souligné, le
  * popover et la barre d'onglets mobile.
  *
  * DÉPEND DE :
- *   · tokens.css — neutres (--ink, --ink-2, --muted, --label, --line,
+ *   · tokens.css (neutres (--ink, --ink-2, --muted, --label, --line,
  *     --hairline, --panel, --white), --accent / --accent-soft, échelles
  *     --app-* et --mono-*, mesures --tap et --topbar-h, --shadow-menu ;
- *   · base.css — reset box-sizing, :focus-visible, style des liens sans
+ *   · base.css) reset box-sizing, :focus-visible, style des liens sans
  *     classe, et la coupure globale prefers-reduced-motion (ce module ne la
  *     repose donc pas) ;
- *   · layout.css — l'inventaire des couches d'empilement, dont l'échelle
+ *   · layout.css) l'inventaire des couches d'empilement, dont l'échelle
  *     ci-dessous est le prolongement ;
- *   · icons.css — .zv-icon (glyphes tracés) et .zv-icon-btn (bouton d'icône
+ *   · icons.css) .zv-icon (glyphes tracés) et .zv-icon-btn (bouton d'icône
  *     nu, cible --tap), réemployés ici plutôt que redéfinis.
  * Ne repose ni le reset, ni le body, ni :root.
  *
  * NE REDÉFINIT RIEN de ce que les autres modules possèdent déjà :
- * .zv-navlink et .zv-nav__* (nav de vitrine, layout.css) ne sont pas touchés —
+ * .zv-navlink et .zv-nav__* (nav de vitrine, layout.css) ne sont pas touchés,
  * l'entrée applicative s'appelle .zv-sidelink ; le déclencheur du menu est
  * .zv-select et l'onglet en PUCES réemploie .zv-seg, tous deux dans
  * forms.css. L'onglet souligné, lui, a sa classe ici depuis l'arbitrage du
@@ -27,7 +27,7 @@
  * Ce module est un RELEVÉ de l'application Mémoire, en production, pas une
  * proposition de DA : chaque valeur vient de src/components/app-shell.tsx,
  * src/components/citation.tsx ou des écrans (chat, répertoire, fiche). Ce qui
- * manque à la production — focus, états désactivés, clavier — est signalé par
+ * manque à la production (focus, états désactivés, clavier) est signalé par
  * un ⚠️ à l'endroit exact plutôt que comblé en silence, et ce qui n'a AUCUNE
  * source est étiqueté HORS RELEVÉ ou DÉRIVÉ, jamais présenté comme relevé.
  *
@@ -45,7 +45,7 @@
  * AU-DESSUS, sans jamais se mettre à égalité avec une couche de vitrine : un
  * voile de tiroir et un header fixe départagés par l'ordre du DOM, ce n'est
  * pas une échelle. Le relevé donnait voile 40, menu 40, feuille 50, tiroir 60 ;
- * seuls les RAPPORTS comptent, et ils sont conservés — l'origine est décalée
+ * seuls les RAPPORTS comptent, et ils sont conservés, l'origine est décalée
  * en bloc pour dégager l'inventaire de vitrine :
  *
  *     menu 60 · voile 60 · feuille de source 70 · tiroir 80
@@ -57,7 +57,7 @@
  *
  * ─── Gabarit attendu ───────────────────────────────────────────────────
  * Toutes ces pièces supposent une racine applicative en `height: 100dvh;
- * overflow: hidden; display: flex` — colonne sous le seuil, rangée au-dessus.
+ * overflow: hidden; display: flex` : colonne sous le seuil, rangée au-dessus.
  * Sans elle, aucune zone défilante ne tient sa hauteur et c'est la page
  * entière qui défile, ce qui ruine la colonne comme la feuille. Cette racine
  * relève de la mise en page, pas de ce module (cf. notes).
@@ -126,7 +126,7 @@
 }
 
 /* À partir du deuxième groupe, c'est le blanc au-dessus de l'intitulé qui
- * sépare — pas un filet. La colonne en porte déjà deux (tête et pied) ; un
+ * sépare : pas un filet. La colonne en porte déjà deux (tête et pied) ; un
  * troisième trait la transformerait en tableau. */
 .zv-sidegroup + .zv-sidegroup .zv-sidegroup__title {
   padding-top: 14px;
@@ -208,11 +208,11 @@
   /* --topbar-h nomme la HAUTEUR DE LA BARRE, et elle seule : 52px. Le filet
    * qui la termine est un pixel de plus, et c'est pour cela que la feuille de
    * source commence à 53 (cf. .zv-cite-panel dans le bloc mobile). Les deux
-   * valeurs de la production sont justes et se répondent — les unifier sur 52
+   * valeurs de la production sont justes et se répondent : les unifier sur 52
    * ferait remonter la feuille par-dessus le filet.
    * ⚠️ Nuance à connaître avant d'y toucher : base.css impose box-sizing:
    * border-box, donc ce `border-bottom` est peint À L'INTÉRIEUR des 52px. Le
-   * modèle « 52 + 1 » n'est littéral que si le filet sort de la boîte —
+   * modèle « 52 + 1 » n'est littéral que si le filet sort de la boîte,
    * une ligne suffirait (`box-shadow: 0 1px 0 var(--line)` au lieu du
    * `border-bottom`), mais c'est un écart au relevé : à arbitrer, pas à
    * décider ici. */
@@ -247,10 +247,10 @@
  * d'icons.css (cible --tap, sans cadre, couleur --muted) posé dans la barre.
  * Le balisage est donc `class="zv-icon-btn zv-topbar__burger"`, et seul le
  * décalage optique appartient à la barre : la marge négative aligne le GLYPHE
- * sur le bord de la barre alors que la boîte garde ses 40px de cible tactile —
+ * sur le bord de la barre alors que la boîte garde ses 40px de cible tactile,
  * sans elle, il faut choisir entre l'alignement optique et le doigt.
  * Le relevé ne donne AUCUN état au hamburger ; le survol d'icons.css peint
- * --panel, qui est exactement le fond de cette barre — donc invisible ici.
+ * --panel, qui est exactement le fond de cette barre : donc invisible ici.
  * Seule la couleur du glyphe s'assombrit d'un cran, ce qui vient du composant
  * partagé et non d'une décision de ce module. */
 .zv-topbar__burger {
@@ -260,7 +260,7 @@
 /* ─── Barre d'onglets mobile ────────────────────────────────────────────
  * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Mémoire navigue au tiroir ;
  * une application à trois ou quatre sections navigue plus vite par une
- * barre basse. CINQ entrées au maximum — au-delà, c'est le tiroir.
+ * barre basse. CINQ entrées au maximum : au-delà, c'est le tiroir.
  *
  * N'existe que SOUS le point de rupture : au-dessus, la colonne latérale
  * est là. Tout le dessin vit donc dans le bloc mobile de fin de fichier ;
@@ -280,7 +280,7 @@
  * géométries sous un seul nom, c'est la dernière qui charge qui gagne : la
  * croix bordée du chrome devient .zv-chrome-btn.
  * Un seul emploi : la croix de fermeture du tiroir et de la feuille de source.
- * Angles vifs — le rayon signale l'action, le chrome n'en est pas une. */
+ * Angles vifs : le rayon signale l'action, le chrome n'en est pas une. */
 
 .zv-chrome-btn {
   display: flex;
@@ -326,13 +326,13 @@
 }
 
 /* Glyphes relevés, à reproduire tels quels :
- *   · hamburger — SVG 18×12 (viewBox "0 0 18 12"),
+ *   · hamburger, SVG 18×12 (viewBox "0 0 18 12"),
  *     <path d="M0 1h18M0 6h18M0 11h18" stroke="currentColor" stroke-width="1.5"/> :
  *     trois traits pleine largeur, entraxe 5px, extrémités franches. Ce n'est
  *     PAS une icône 24×24 d'une bibliothèque, et une icône ronde tirée d'un
  *     jeu tiers casserait la géométrie de la barre. Il ne suit donc pas la
  *     grille de 24 de icons.css : il se pose en SVG nu, pas en .zv-icon.
- *   · fermeture — le caractère ✕ (U+2715) posé en texte, d'où le
+ *   · fermeture : le caractère ✕ (U+2715) posé en texte, d'où le
  *     `font-size` ci-dessus qui le dimensionne. */
 
 /* ─── Feuille de source citée ───────────────────────────────────────────
@@ -340,8 +340,8 @@
  * .zv-sheet-section (section de PLANCHE de documentation, avec son __title et
  * son __body) : côte à côte, .zv-sheet__title et .zv-sheet-section__title
  * donnent à lire un bloc et son modificateur là où il y a deux objets sans
- * rapport. Elle prend le nom de ce qui l'ouvre — un clic sur une citation :
- * .zv-cite-panel. Les .zv-cite / .zv-cite-row de data.css sont la CITATION dans le fil de texte ; .zv-cite-panel est la feuille qui l'accueille — deux objets distincts, sans collision, et le nom
+ * rapport. Elle prend le nom de ce qui l'ouvre, un clic sur une citation :
+ * .zv-cite-panel. Les .zv-cite / .zv-cite-row de data.css sont la CITATION dans le fil de texte ; .zv-cite-panel est la feuille qui l'accueille : deux objets distincts, sans collision, et le nom
  * ne se confond pas avec .zv-src (la PUCE de source, components.css).
  *
  * Colonne au-dessus du seuil, feuille quasi plein écran en dessous. Trois
@@ -454,13 +454,13 @@
  * opposition à une action) hérite du soulignement par défaut du navigateur,
  * là où la même entrée en <button> n'a rien : dans un même panneau,
  * « Mon compte » se soulignait et « Se déconnecter » non. Les deux doivent
- * se rendre à l'identique — c'est la BALISE qui change, pas l'apparence. */
+ * se rendre à l'identique : c'est la BALISE qui change, pas l'apparence. */
 a.zv-menu__item,
 a.zv-menu__item:hover {
   text-decoration: none;
 }
 
-/* ⚠️ Option SURVOLÉE AU CLAVIER — ajoutée le 25/08/2026 avec la sélection
+/* ⚠️ Option SURVOLÉE AU CLAVIER : ajoutée le 25/08/2026 avec la sélection
  * dessinée. Ce n'est ni :hover (la souris n'est pas dessus) ni :focus (le
  * focus reste sur le déclencheur, c'est aria-activedescendant qui porte
  * l'annonce). Sans cette classe, parcourir la liste aux flèches ne se voit
@@ -482,7 +482,7 @@ a.zv-menu__item:hover {
 
 /* ⚠️ Relevé tel quel : le survol ÉCRASE le fond de l'item courant
  * (accent-soft → hairline), seul le texte reste accent. Volontaire ou non,
- * c'est ce qui tourne en production — signalé plutôt que corrigé en silence. */
+ * c'est ce qui tourne en production : signalé plutôt que corrigé en silence. */
 .zv-menu__item--on:hover,
 .zv-menu__item[aria-selected="true"]:hover {
   background: var(--hairline);
@@ -510,13 +510,13 @@ a.zv-menu__item:hover {
  *
  * ⚠️ CE BLOC DOIT RESTER APRÈS `.zv-menu`, et donc dans CE fichier. Le
  * panneau d'une entrée porte les deux classes ; `.zv-navdd__menu` reprend à
- * `.zv-menu` son display, sa position et son ancrage, à spécificité égale —
+ * `.zv-menu` son display, sa position et son ancrage, à spécificité égale :
  * c'est l'ORDRE qui tranche. Posé dans layout.css, qu'index.css importe
  * AVANT navigation.css, il perdait : les trois menus d'une barre
  * s'affichaient en même temps, ouverts en permanence.
  *
- * Une nav de vitrine qui porte l'architecture d'un site — des familles,
- * pas quatre liens — a besoin de déplier. Ouverture au survol ET au focus
+ * Une nav de vitrine qui porte l'architecture d'un site (des familles,
+ * pas quatre liens) a besoin de déplier. Ouverture au survol ET au focus
  * (`:focus-within`) : en CSS seul, donc accessible au clavier sans une
  * ligne de JavaScript et sans état à tenir.
  *
@@ -528,7 +528,7 @@ a.zv-menu__item:hover {
 }
 
 /* Le bouton porte .zv-navlink : il doit se rendre EXACTEMENT comme un lien
- * simple de la barre. Piège à éviter — un `font: inherit`, réflexe habituel
+ * simple de la barre. Piège à éviter, 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 : les entrées à menu deviennent plus grosses
  * que les autres. On ne reprend donc du bouton que ce qui doit disparaître. */
@@ -597,7 +597,7 @@ a.zv-menu__item:hover {
 
 /* ─── Popover ───────────────────────────────────────────────────────────
  * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Le menu impose ses items ;
- * il n'existait aucune surface ancrée LIBRE — aide contextuelle,
+ * il n'existait aucune surface ancrée LIBRE : aide contextuelle,
  * mini-formulaire de filtre. Même ancre que le menu (.zv-select-anchor,
  * forms.css), même surface (filet --line, ombre --shadow-menu), padding de
  * panneau au lieu d'items. Fermeture par clic extérieur et Échap : au
@@ -679,7 +679,7 @@ a.zv-menu__item:hover {
 
 /* `font: inherit` plutôt qu'une police redite : les trois éléments cliquables
  * de la pagination sont des <button>, et sans lui le navigateur y impose sa
- * police système. Hériter reprend exactement la mono du rang — aucune valeur
+ * police système. Hériter reprend exactement la mono du rang : aucune valeur
  * nouvelle n'entre par cette porte. */
 .zv-pager__arrow,
 .zv-pager__rank,
@@ -704,7 +704,7 @@ a.zv-menu__item:hover {
 }
 
 /* Pied de tableau : le compte à gauche, un SEUL élément cliquable pour les
- * deux sens à droite — pas de numéros de page, pas de page courante. Le
+ * deux sens à droite, pas de numéros de page, pas de page courante. Le
  * `padding` en raccourci annule le `padding-bottom: 2px` du rang de panneau,
  * qui n'a pas de sens ici. */
 .zv-pager--foot {
@@ -718,17 +718,17 @@ a.zv-menu__item:hover {
 /* ⚠️ TROU ASSUMÉ, et il dépasse le style : il n'existe nulle part de page
  * courante, de numéros, ni de sens séparés. Une pagination digne de ce nom
  * (précédent et suivant distincts, désactivables, rang courant) est une
- * DÉCISION de conception, pas un relevé — cf. notes. */
+ * DÉCISION de conception, pas un relevé : cf. notes. */
 
 /* ─── Onglets ───────────────────────────────────────────────────────────
  * ⚠️ AUCUNE MATIÈRE PREMIÈRE : pas un seul jeu d'onglets dans les écrans
  * relevés. La rangée de PUCES se construit toujours avec .zv-seg-group et
- * .zv-seg (forms.css), qui portent déjà la grammaire d'un état actif —
+ * .zv-seg (forms.css), qui portent déjà la grammaire d'un état actif :
  * c'est le motif des FILTRES, qui restreignent une collection.
  *
  * L'onglet SOULIGNÉ, longtemps « à faire », est ARBITRÉ le 25/08/2026
- * (DECISIONS.md) : trait actif de 2 px — l'épaisseur des filets dessinés du
- * système (filet de spectre, rail d'étapes) — en --accent, la couleur de
+ * (DECISIONS.md) : trait actif de 2 px (l'épaisseur des filets dessinés du
+ * système (filet de spectre, rail d'étapes)) en --accent, la couleur de
  * l'action, comme l'entrée de nav courante. PAS le spectre : un quatrième
  * emploi n'existe pas. C'est le motif des VUES d'un même objet (Aperçu /
  * Sources) ; pour filtrer, prendre les puces. */
@@ -736,14 +736,14 @@ a.zv-menu__item:hover {
 .zv-tabs-line {
   display: flex;
   gap: 22px;
-  /* La rangée ne s'enroule pas — des onglets sur deux lignes ne se lisent
+  /* La rangée ne s'enroule pas, des onglets sur deux lignes ne se lisent
    * plus comme des onglets : elle déborde dans son propre cadre, jamais
    * dans la page. */
   overflow-x: auto;
   /* La ligne de la rangée est une ombre INTERNE, pas une bordure : les
    * onglets (étirés à la hauteur de la rangée) peignent leur trait
-   * par-dessus. Le montage classique — bordure de rangée + marge basse de
-   * -1px sur l'onglet — fait déborder l'onglet d'un pixel dans un conteneur
+   * par-dessus. Le montage classique, bordure de rangée + marge basse de
+   * -1px sur l'onglet, fait déborder l'onglet d'un pixel dans un conteneur
    * en overflow, et cet unique pixel suffit à faire naître un ascenseur
    * vertical. */
   box-shadow: inset 0 -1px 0 var(--line);
@@ -793,13 +793,13 @@ a.zv-menu__item:hover {
 }
 
 /* Au survol de l'onglet actif, le trait reste : la vue où l'on se trouve ne
- * s'éteint pas sous le pointeur — même règle que l'entrée de nav courante. */
+ * s'éteint pas sous le pointeur, même règle que l'entrée de nav courante. */
 .zv-tabs-line__tab--on:hover,
 .zv-tabs-line__tab[aria-selected='true']:hover {
   color: var(--accent);
 }
 
-/* Le compte de l'onglet — mêmes mesures que celui de la puce (.zv-seg__count,
+/* Le compte de l'onglet, mêmes mesures que celui de la puce (.zv-seg__count,
  * forms.css) mais SANS sa marge : ici c'est la gouttière de l'onglet qui
  * espace, et réemployer la classe de la puce doublait l'écart (6 + 7 px). */
 .zv-tabs-line__count {
@@ -811,7 +811,7 @@ a.zv-menu__item:hover {
 /* ─── Défilement ────────────────────────────────────────────────────────
  * La mécanique, elle, est relevée et livrée : `min-height: 0` ET
  * `min-width: 0`. Sans ces deux-là, un enfant flex refuse de rétrécir en
- * dessous de son contenu — la zone déborde, et c'est la page entière qui part
+ * dessous de son contenu : la zone déborde, et c'est la page entière qui part
  * en défilement horizontal. C'est la faute la plus fréquente de ce gabarit. */
 
 .zv-scroll-y {
@@ -822,13 +822,13 @@ a.zv-menu__item:hover {
 }
 
 /* ⚠️ HABILLAGE DES BARRES : trou franc, vérifié deux fois. `grep -rn scrollbar`
- * sur tout le source de Mémoire ne renvoie AUCUNE occurrence — les cinq zones
+ * sur tout le source de Mémoire ne renvoie AUCUNE occurrence : les cinq zones
  * défilantes utilisent la barre native du système. Il n'existe donc pas de
  * valeur relevée pour la largeur, le pouce ou le rail, et ce module n'en
  * applique aucune par défaut.
  * L'habillage ci-dessous est OPT-IN et n'emploie que des mots-clés plus un
  * token existant : aucune dimension inventée. ::-webkit-scrollbar est écarté
- * pour deux raisons — il exigerait une largeur en pixels sortie de nulle part,
+ * pour deux raisons : il exigerait une largeur en pixels sortie de nulle part,
  * et il remplace les barres flottantes de macOS/iOS par des barres permanentes
  * qui mangent la colonne. */
 .zv-scrollbar {
@@ -886,10 +886,10 @@ a.zv-menu__item:hover {
    * contre app-shell.tsx:268), en supposant que le filet s'ajoute à la
    * hauteur. Il ne s'y ajoute pas : box-sizing: border-box le peint À
    * L'INTÉRIEUR des 52px. Ce pixel n'empile donc rien, il ouvre une couture
-   * par laquelle le fond de page transparaît — et la feuille portant en
+   * par laquelle le fond de page transparaît : et la feuille portant en
    * plus son propre filet haut, le trait apparaissait doublé.
    *
-   * Corrigé ici : la feuille commence à 52, et n'a pas de filet propre —
+   * Corrigé ici : la feuille commence à 52, et n'a pas de filet propre,
    * celui de la barre les sépare déjà. C'est un écart ASSUMÉ au relevé, sur
    * un artefact et non sur une intention. */
   .zv-cite-panel {
@@ -926,9 +926,9 @@ a.zv-menu__item:hover {
     padding-bottom: 12px;
   }
 
-  /* ─── Barre d'onglets mobile — le dessin ──────────────────────────────
+  /* ─── Barre d'onglets mobile (le dessin ──────────────────────────────
    * z-index 50 : le SOMMET des couches de page (l'étage de .zv-layer-top,
-   * layout.css), et SOUS tous les recouvrements applicatifs (60 et plus) —
+   * layout.css), et SOUS tous les recouvrements applicatifs (60 et plus))
    * le voile doit voiler la barre, le tiroir passer devant. C'est du chrome
    * permanent, pas un enrobage : il ne monte pas dans leur échelle. */
   .zv-tabbar {
@@ -1033,7 +1033,7 @@ a.zv-menu__item:hover {
  *
  * ⚠️ CE BLOC AUSSI DOIT RESTER APRÈS `.zv-menu`, pour la même raison que
  * `.zv-navdd` : les deux panneaux portent `.zv-menu` et lui reprennent son
- * display et son ancrage à spécificité égale — c'est l'ORDRE qui tranche.
+ * display et son ancrage à spécificité égale, c'est l'ORDRE qui tranche.
  *
  * Les deux vivent À DROITE de la barre, côte à côte : le lanceur pour passer
  * d'un produit à l'autre, le compte pour savoir qui l'on est. C'est la
@@ -1042,10 +1042,10 @@ a.zv-menu__item:hover {
  *
  * ─── L'ÉTAT ────────────────────────────────────────────────────────────
  * Ouverts au survol ET au focus (`:focus-within`), en CSS seul : la barre
- * reste rendue au serveur, sans une ligne à hydrater — même mécanique que
+ * reste rendue au serveur, sans une ligne à hydrater, même mécanique que
  * `.zv-navdd`. Une app qui préfère l'ouverture au CLIC (la convention des
  * lanceurs) pose `.zv-lanceur--ouvert` / `.zv-compte--ouvert` : la prop
- * `ouvert` du composant les rend. C'est la règle du dépôt — un état se dit
+ * `ouvert` du composant les rend. C'est la règle du dépôt : un état se dit
  * en prop, il ne se peint pas depuis l'app.
  */
 
@@ -1056,7 +1056,7 @@ a.zv-menu__item:hover {
   flex: none;
 }
 
-/* Le déclencheur du lanceur : la cible tactile du paquet, sans cadre — le
+/* Le déclencheur du lanceur : la cible tactile du paquet, sans cadre, le
  * chrome n'est pas une action. */
 .zv-lanceur__btn {
   display: inline-flex;
@@ -1078,7 +1078,7 @@ a.zv-menu__item:hover {
 }
 
 /* Le déclencheur du compte : la pastille d'initiales, cliquable. Elle garde
- * son carré — le rond ici serait un usage de réseau social, et la pastille
+ * son carré : le rond ici serait un usage de réseau social, et la pastille
  * d'initiales du paquet est carrée depuis le premier jour (data.css). */
 .zv-compte__btn {
   display: inline-flex;
@@ -1120,7 +1120,7 @@ a.zv-menu__item:hover {
 
 /* ⚠️ Le `.zv-menu` intérieur est LUI-MÊME en position absolue (il est fait
  * pour s'ancrer seul sous un déclencheur). Imbriqué dans un panneau qui
- * porte déjà l'ancrage, il se positionnait une SECONDE fois — à partir du
+ * porte déjà l'ancrage, il se positionnait une SECONDE fois : à partir du
  * bord droit du panneau, donc vers la droite, et la grille sortait de
  * l'écran sur téléphone. Sur grand écran la place restante le masquait :
  * c'est le rendu à 390px qui l'a montré. Ici le panneau ancre, le menu ne
@@ -1199,7 +1199,7 @@ a.zv-menu__item:hover {
   padding: 6px 8px 10px;
 }
 
-/* ⚠️ CINQ tuiles — le compte du jour, depuis que le lanceur ne liste que les
+/* ⚠️ CINQ tuiles : le compte du jour, depuis que le lanceur ne liste que les
  * produits joignables. Dans quatre colonnes, elles donnent 4 + 1 : une
  * dernière rangée d'UNE tuile avec trois cases vides à sa droite, exactement
  * ce que le passage à quatre colonnes avait servi à supprimer pour sept.
@@ -1294,7 +1294,7 @@ a.zv-menu__item:hover {
 }
 
 /* L'accroche : ce que le produit FAIT, en deux mots. C'est elle qui rend la
- * liste lisible à quelqu'un qui ne connaît pas encore la suite — un nom de
+ * liste lisible à quelqu'un qui ne connaît pas encore la suite : un nom de
  * marque seul ne dit rien à un client qui découvre. */
 .zv-lanceur__accroche {
   font-size: var(--mono);
@@ -1303,7 +1303,7 @@ a.zv-menu__item:hover {
   /* PAS de `overflow-wrap: anywhere` ici, contrairement au nom : un nom de
    * marque qu'on coupe reste reconnaissable, une accroche coupée en plein
    * mot ne se lit plus. Si elle ne tient pas, c'est la colonne qui est trop
-   * étroite — et c'est la colonne qu'on corrige. */
+   * étroite : et c'est la colonne qu'on corrige. */
   text-wrap: balance;
 }
 
@@ -1314,7 +1314,7 @@ a.zv-menu__item:hover {
 
 /* ─── L'en-tête du panneau de compte ────────────────────────────────────
  * Qui l'on est, avant ce qu'on peut faire. Non connecté, il porte l'invite
- * de connexion : la zone de compte existe TOUJOURS, connecté ou non — une
+ * de connexion : la zone de compte existe TOUJOURS, connecté ou non, une
  * barre où l'on ne peut pas se connecter est une barre où l'on ne revient
  * pas. */
 
@@ -1345,7 +1345,7 @@ a.zv-menu__item:hover {
 }
 
 /* Le pied du panneau : la déconnexion, séparée de ce qui précède. Elle ne
- * prend PAS l'encre d'erreur — se déconnecter n'est pas un incident. */
+ * prend PAS l'encre d'erreur : se déconnecter n'est pas un incident. */
 .zv-compte__sortie {
   border-top: 1px solid var(--hairline);
   margin-top: 4px;
@@ -1359,9 +1359,40 @@ a.zv-menu__item:hover {
     display: none;
   }
 
-  /* Les deux panneaux sont plafonnés à l'écran, comme le menu et le
-   * popover : au bord droit d'un téléphone, un panneau de 300px pousserait
-   * la page en défilement horizontal. */
+  /* ⚠️ ANCRÉS À L'ÉCRAN, plus à leur déclencheur. Hors média ils sont en
+   * `right: 0`, donc calés sur le bord droit du BOUTON, or le lanceur n'est
+   * pas au bord de l'écran : le compte et le burger le suivent. Le panneau
+   * avait donc la bonne largeur et la mauvaise place. Mesuré à 375px sur
+   * mcp-factory : largeur 343, bord gauche à −65 ; deux tuiles sur cinq
+   * coupées, et la partie hors écran inatteignable.
+   *
+   * Et c'est SILENCIEUX : un débordement par la gauche n'engendre aucun
+   * défilement horizontal, le navigateur le rogne sans rien dire.
+   *
+   * COMMENT : le déclencheur cesse d'être le repère (`position: static`), et
+   * le panneau se résout alors contre `.zv-nav`, qui est déjà positionnée et
+   * qui fait la largeur de la barre. `top: 100%` tombe donc sous la barre, et
+   * `left`/`right` la bordent. Largeur pleine, marges de 16 : le motif que
+   * tout le monde connaît sur téléphone, et qui ne dépend plus de ce qui est
+   * posé à droite du déclencheur.
+   *
+   * ⚠️ Poser `left`/`right` SANS neutraliser le `relative` du déclencheur ne
+   * marche pas, je l'ai écrit ainsi d'abord : les offsets se résolvaient
+   * contre le bouton, large de 40px, et le panneau tombait à 8px de large.
+   * C'est scopé à `.zv-nav` : un lanceur posé ailleurs garde son ancrage. */
+  .zv-nav .zv-lanceur,
+  .zv-nav .zv-compte {
+    position: static;
+  }
+
+  .zv-nav .zv-lanceur__panneau,
+  .zv-nav .zv-compte__panneau {
+    left: 16px;
+    right: 16px;
+  }
+
+  /* Le plafond devient redondant pour ces deux-là : il ne coûte rien et
+   * protège un panneau qu'on poserait ailleurs. */
   .zv-lanceur__panneau .zv-menu,
   .zv-compte__panneau .zv-menu {
     max-width: calc(100vw - 32px);
@@ -1370,7 +1401,7 @@ a.zv-menu__item:hover {
   /* DEUX colonnes, et pas trois. Sur un iPhone SE (320px), trois colonnes
    * donnent 63px par tuile : « Anonymisation » s'y coupait en plein mot et
    * « Connecteur » perdait son r sur la ligne suivante. À deux, chaque tuile
-   * dispose d'une centaine de pixels — assez pour son accroche, qui est
+   * dispose d'une centaine de pixels : assez pour son accroche, qui est
    * précisément ce dont un client a besoin sur le petit écran où il connaît
    * le moins la suite. Sept produits font alors quatre rangées, et le
    * panneau défile. */