@zevra/ui 0.34.0 → 0.36.0

package/src/forms.css

@@ -1,20 +1,20 @@
-/* Zevra UI — formulaires : champ, recherche, zone de texte, sélection,
- * case/radio, interrupteur, puces de filtre, zone de dépôt — et, depuis le
+/* Zevra UI (formulaires : champ, recherche, zone de texte, sélection,
+ * case/radio, interrupteur, puces de filtre, zone de dépôt) et, depuis le
  * 25/08/2026 (hors relevé, voir DECISIONS.md) : le champ à affixe et le
  * curseur.
  *
  * DÉPEND de tokens.css (toutes les valeurs) et de base.css (reset
  * box-sizing, anneau :focus-visible). RIEN D'AUTRE : ce module ne lit ni
- * layout.css, ni components.css, ni motion.css. C'est volontaire — une app
+ * layout.css, ni components.css, ni motion.css. C'est volontaire : une app
  * purement applicative n'a aucune raison de charger la mise en page de la
  * vitrine.
  *
  * Ce qu'il NE porte PAS :
- *   · le menu déroulé par .zv-select — il appartient à navigation.css
+ *   · le menu déroulé par .zv-select (il appartient à navigation.css
  *     (.zv-menu) ; ce module pose l'ancre (.zv-select-anchor) et le
  *     déclencheur, rien de plus ;
- *   · le bouton d'envoi d'un formulaire — c'est .zv-btn (components.css) ;
- *   · l'alerte de bloc (role="alert") — module de retours.
+ *   · le bouton d'envoi d'un formulaire) c'est .zv-btn (components.css) ;
+ *   · l'alerte de bloc (role="alert")) module de retours.
  *
  * PROVENANCE. Relevé dans l'application Mémoire (production, mêmes tokens de
  * charte) sur six écrans : /connexion, /chat, /repertoire, /bibliotheque,
@@ -89,7 +89,7 @@
   color: var(--muted);
 }
 
-/* Le message d'erreur AU NIVEAU DU CHAMP existe — une seule fois dans toute
+/* Le message d'erreur AU NIVEAU DU CHAMP existe : une seule fois dans toute
  * l'application, hors des six écrans du relevé initial
  * (add-member-form.tsx:94). Ses valeurs propres (taille, graisse, écart)
  * n'ont PAS été relevées : celles ci-dessous sont dérivées du reste du
@@ -129,7 +129,7 @@
 
 /* Relevé (`focus:border-accent-line`) : c'est :focus et non :focus-visible,
  * la bordure réagit donc aussi à la souris. L'anneau clavier de base.css
- * s'y AJOUTE — on ne reprend PAS le `input { outline: none }` de la prod,
+ * s'y AJOUTE : on ne reprend PAS le `input { outline: none }` de la prod,
  * qui laissait l'application inutilisable au clavier. */
 .zv-input:focus {
   border-color: var(--accent-line);
@@ -143,7 +143,7 @@
 
 /* <select> NATIF, habillé comme le champ. C'est le motif de sélection
  * accessible de l'application, relevé deux fois (add-member-form.tsx:82,
- * billing-card.tsx:135) avec exactement les valeurs de .zv-input —
+ * billing-card.tsx:135) avec exactement les valeurs de .zv-input :
  * `border-line bg-white px-3 py-[9px] text-[13px] text-ink`. D'où un simple
  * modificateur : tout est déjà là.
  *
@@ -151,7 +151,7 @@
  * la liste native et son annonce viennent du navigateur. La remplacer
  * imposerait de redessiner tout cela, et le relevé ne le fait pas non plus.
  * À ne pas confondre avec .zv-select, qui est un déclencheur de menu maison
- * — voir plus bas. */
+ * - voir plus bas. */
 .zv-input--select {
   cursor: pointer;
 }
@@ -203,15 +203,15 @@
  * à l'intérieur du cadre, en plus de ce filet. On le garde tel quel plutôt
  * que de trancher l'un des deux :
  *   · supprimer l'anneau (outline:none) rendrait le champ nu invisible au
- *     clavier — c'est exactement la faute de la production ;
+ *     clavier, c'est exactement la faute de la production ;
  *   · supprimer ce filet priverait la souris de tout retour, alors que le
  *     relevé lui en donne un sur les champs bordés.
  * La redondance coûte moins cher que l'une ou l'autre perte. */
-/* ⚠️ REPRIS le 25/08/2026 — la DA jugeait la prise de focus « boff ». Elle
+/* ⚠️ REPRIS le 25/08/2026 : la DA jugeait la prise de focus « boff ». Elle
  * l'était : le cadre passait à --accent-line, un filet si pâle qu'à côté de
  * l'anneau du champ intérieur il ne se voyait pas. Trois corrections :
  *   · le filet passe à --accent PLEIN, pas à sa version diluée ;
- *   · un halo --accent-soft de 3px double le trait — c'est lui qui rend le
+ *   · un halo --accent-soft de 3px double le trait, c'est lui qui rend le
  *     retour visible du coin de l'œil, sans déplacer un pixel de la mise en
  *     page (box-shadow ne prend pas de place) ;
  *   · la loupe s'allume avec le cadre : elle cesse d'être une invite grise
@@ -220,7 +220,7 @@
  * L'anneau :focus-visible du champ INTÉRIEUR est neutralisé ici, et
  * seulement ici : le cadre le remplace, et il le remplace pour la souris
  * comme pour le clavier. C'est ce qui lève la double marque assumée jusque-là
- * — un seul objet à l'écran, un seul retour. Le champ nu reste parfaitement
+ * - un seul objet à l'écran, un seul retour. Le champ nu reste parfaitement
  * repérable au clavier, puisque c'est le cadre entier qui s'allume. */
 .zv-search:focus-within {
   border-color: var(--accent);
@@ -240,7 +240,7 @@
   width: 13px;
   height: 13px;
   /* Même gris que le placeholder : la loupe est une invite, pas une donnée.
-   * Elle s'allume avec le cadre — voir :focus-within plus bas. */
+   * Elle s'allume avec le cadre : voir :focus-within plus bas. */
   stroke: var(--label);
   transition: stroke 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
@@ -263,7 +263,7 @@
 /* ─── Champ à affixe ────────────────────────────────────────────────────
  * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). « 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
+ * .zv-search, le seul cadre-à-champ-nu du relevé : cadre --line, champ nu
  * dedans, allumage :focus-within identique. L'affixe est en mono --label,
  * comme les libellés de déclencheur : une unité est un libellé, pas une
  * donnée. */
@@ -286,7 +286,7 @@
 }
 
 /* Même prise de focus que le cadre de recherche : filet --accent plein,
- * halo --accent-soft — et l'anneau du champ intérieur est remplacé par le
+ * halo --accent-soft, et l'anneau du champ intérieur est remplacé par le
  * cadre, pour la souris comme pour le clavier. */
 .zv-affix:focus-within {
   border-color: var(--accent);
@@ -319,7 +319,7 @@
  * DÉCISION, PAS UN RELEVÉ : il n'existe AUCUN <textarea> dans l'application,
  * sur aucun des huit écrans ouverts. Le composeur du chat est un <input> où
  * Entrée envoie (chat-client.tsx:365). Le bloc ci-dessous est dérivé mot à
- * mot de .zv-input ; seules min-height et resize s'y ajoutent — sans elles
+ * mot de .zv-input ; seules min-height et resize s'y ajoutent : sans elles
  * le champ se rend sur une ligne et le composant n'existe pas. min-height
  * est la SEULE valeur de ce module sans aucune source, dans aucun écran.
  *
@@ -329,7 +329,7 @@
 .zv-textarea {
   width: 100%;
   min-width: 0;
-  min-height: 96px; /* sans source — voir ci-dessus */
+  min-height: 96px; /* sans source : voir ci-dessus */
   border: 1px solid var(--line);
   border-radius: 0;
   background: var(--white);
@@ -357,7 +357,7 @@
  * <select> : c'est un bouton qui ouvre .zv-menu (navigation.css). Pour un
  * vrai choix dans une liste, préférer .zv-input--select, qui est natif.
  *
- * ANCRAGE — arbitrage à consigner dans DECISIONS.md, les deux modules ne
+ * ANCRAGE : arbitrage à consigner dans DECISIONS.md, les deux modules ne
  * disent pas la même chose. Le relevé donne raison à celui-ci : c'est
  * l'ENVELOPPE qui porte position:relative (`relative inline-block
  * max-w-full`), pas le déclencheur. Ancrer le menu sur .zv-select
@@ -390,7 +390,7 @@
  * l'affichage de la liste » (DA, sur pièces).
  *
  * Le <select> natif (.zv-input--select) reste dans le paquet et garde son
- * usage — mais il ne peut PAS être habillé : la liste déroulée est peinte
+ * usage, mais il ne peut PAS être habillé : la liste déroulée est peinte
  * par le système, pas par la page. Sur un macOS en mode sombre, elle sort
  * en menu noir au milieu d'une interface claire. Aucun CSS ne corrige cela,
  * c'est une limite du contrôle.
@@ -398,7 +398,7 @@
  * D'où ce déclencheur, qui a l'apparence exacte d'un champ et ouvre le
  * .zv-menu du paquet. Ce qu'il COÛTE, et qu'il faut assumer en le
  * choisissant : le clavier, l'annonce et la liste native sont à réimplémenter
- * — c'est fait dans le composant React (SelectMenu), pas dans ce fichier.
+ * - c'est fait dans le composant React (SelectMenu), pas dans ce fichier.
  * Un gabarit qui pose ces classes à la main sans ce travail livre un select
  * inutilisable au clavier. Dans ce cas, prendre le natif. */
 .zv-input--trigger {
@@ -466,7 +466,7 @@
 /* ─── Case à cocher et bouton radio ─────────────────────────────────────
  * DÉRIVÉS INTÉGRALEMENT, ET ILS DOIVENT ÊTRE LUS COMME TELS : il n'existe
  * zéro <input type="checkbox"> et zéro <input type="radio"> dans toute
- * l'application — la sélection s'y fait toujours par .zv-seg ou .zv-switch.
+ * l'application, la sélection s'y fait toujours par .zv-seg ou .zv-switch.
  * Le bloc ci-dessous réemploie la grammaire déjà en production (carré au
  * filet --line sur --white, coché en aplat --accent, rond des pastilles)
  * sans introduire de valeur de charte nouvelle ; ses DIMENSIONS, elles
@@ -474,7 +474,7 @@
  * source. Le jour où un vrai écran en pose, c'est lui qui tranche.
  *
  * ⚠️ .zv-check est DÉJÀ PRIS par la pastille de validation
- * (components.css:482) — d'où .zv-check-box.
+ * (components.css:482) : d'où .zv-check-box.
  *
  * Contrôles natifs volontairement conservés (appearance:none seulement) : le
  * clavier, :focus-visible, [disabled] et l'annonce au lecteur d'écran
@@ -516,7 +516,7 @@
 
 /* Le point du radio est creusé dans l'aplat par un anneau blanc interne :
  * un pseudo-élément sur un <input> n'est pas fiable d'un moteur à l'autre.
- * Ce box-shadow est une géométrie, pas une ombre de charte — d'où l'absence
+ * Ce box-shadow est une géométrie, pas une ombre de charte : d'où l'absence
  * de token. */
 .zv-radio:checked {
   border-color: var(--accent);
@@ -530,11 +530,11 @@
  *
  * ⚠️ RABATTEMENT VISIBLE : la piste éteinte était un gris ferme (#C9CEDD),
  * rabattu sur --accent-line, qui est bleuté. L'état éteint prend donc une
- * teinte indigo très pâle. La distinction éteint/allumé tient quand même —
+ * teinte indigo très pâle. La distinction éteint/allumé tient quand même :
  * elle est portée par l'aplat plein et par le libellé accolé, pas par cette
  * nuance-là. */
 
-/* ⚠️ REDESSINÉ le 25/08/2026 — la DA a tranché « switch horrible » sur
+/* ⚠️ REDESSINÉ le 25/08/2026, la DA a tranché « switch horrible » sur
  * pièces, et elle avait raison sur trois points :
  *   · 28×16 avec un bouton rond de 12, c'est un jouet posé au milieu de
  *     contrôles carrés de 16px de haut ; la ligne de réglage n'avait aucune
@@ -557,7 +557,7 @@
   background: var(--white);
   /* La courbe est celle du paquet (motion.css, `--zv-easing`), recopiée en
    * clair : forms.css ne dépend pas de motion.css et n'a pas à en dépendre
-   * pour une transition de couleur. Ce n'est PAS `ease` — le défaut d'un
+   * pour une transition de couleur. Ce n'est PAS `ease` : le défaut d'un
    * framework tiers n'a rien à faire dans le système. */
   transition:
     background-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1),
@@ -579,7 +579,7 @@
 }
 
 /* Bouton CARRÉ : le rond ici n'est pas une forme porteuse de sens (ce que
- * sont la pastille d'état ou le radio), c'était un style — il tombe avec les
+ * sont la pastille d'état ou le radio), c'était un style, il tombe avec les
  * autres rayons. Éteint il est gris comme un contrôle inactif, allumé il
  * passe en blanc sur l'aplat indigo. */
 .zv-switch__knob {
@@ -607,7 +607,7 @@
   /* La source place la gouttière de 7px sur une enveloppe PARENTE, et
    * n'entoure que la piste de sa zone tactile (logs-client.tsx:267-273).
    * Elle est ramenée ici : cette classe enveloppe le contrôle ET son
-   * libellé, ce qui rend le texte cliquable — un <label> qui n'entoure que
+   * libellé, ce qui rend le texte cliquable, un <label> qui n'entoure que
    * l'interrupteur laisse une cible de 28px là où il en faut 40. Sans la
    * gouttière, le libellé vient coller à la piste. */
   align-items: center;
@@ -632,16 +632,16 @@
  * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Aucune source ; dérivé de
  * l'interrupteur redessiné : bouton CARRÉ de 14 px (la taille exacte du
  * bouton du switch), --accent, --accent-deep au survol. La piste fait 3 px
- * — la hauteur de .zv-progress — en --line, remplie en --accent jusqu'au
+ * - la hauteur de .zv-progress, en --line, remplie en --accent jusqu'au
  * curseur. PAS le spectre : la barre de progression est l'un des trois
  * emplois autorisés, le curseur n'en est pas un.
  *
  * Le remplissage est peint par le FOND de l'input (un dégradé à arrêt
- * franc), position portée par --zv-range-pos que la façade React calcule —
+ * franc), position portée par --zv-range-pos que la façade React calcule :
  * une géométrie, comme la largeur de Progress, pas une valeur de charte.
  * Sans elle, la piste s'affiche remplie à moitié : poser la variable, ou
  * assumer le repli. Le bouton, lui, passe par les pseudo-éléments de
- * chaque moteur — c'est le seul contrôle du paquet qui l'exige. */
+ * chaque moteur : c'est le seul contrôle du paquet qui l'exige. */
 
 .zv-range {
   --zv-range-pos: 50%;
@@ -706,25 +706,25 @@
  * 143-180, repertoire-client.tsx:79-94, logs-client.tsx:193-207).
  *
  * ⚠️ LA SOURCE DIVERGE, ET C'EST TRANCHÉ ICI :
- *   · gouttière du groupe — bibliothèque 5px, répertoire et logs 6px. On
+ *   · gouttière du groupe, bibliothèque 5px, répertoire et logs 6px. On
  *     retient 6px : deux écrans sur trois, et c'est la valeur de .zv-tabs
  *     (navigation.css), qui héberge les mêmes puces. Deux conteneurs des
  *     mêmes puces avec deux écarts différents, c'est un défaut, pas une
  *     nuance.
- *   · taille et densité — bibliothèque descend à 11px/4-9px au-dessus du
+ *   · taille et densité : bibliothèque descend à 11px/4-9px au-dessus du
  *     seuil, le répertoire reste à 11px/8-12px partout, en graisse 600. On
  *     retient la puce DENSE de la bibliothèque au-dessus du seuil, et la
  *     graisse 500 (la 600 est réservée à l'état sélectionné, sinon
  *     sélectionné et non sélectionné ne se distinguent plus que par la
  *     couleur).
- *   · corps — 11 et 12px se rabattent tous les deux sur --app-sm (12px) :
+ *   · corps, 11 et 12px se rabattent tous les deux sur --app-sm (12px) :
  *     l'écart d'un pixel entre les deux écrans disparaît, et la variante
  *     mobile de la bibliothèque avec lui. C'est le prix de l'échelle
  *     rationalisée, assumé.
  *
  * ⚠️ L'état sélectionné n'est porté par AUCUN aria-pressed en production :
  * il est invisible pour un lecteur d'écran. Le paquet impose <button
- * aria-pressed="true|false"> — et le style suit l'attribut autant que la
+ * aria-pressed="true|false"> : et le style suit l'attribut autant que la
  * classe, pour que le balisage correct ne coûte rien. */
 
 .zv-seg-group {
@@ -760,7 +760,7 @@
 
 /* La rangée de puces vit souvent dans un rail qui défile horizontalement
  * (.zv-tabs--rail, navigation.css). L'anneau de base.css y serait rogné aux
- * deux bords. On ne le REDÉFINIT pas — on déplace seulement son tracé à
+ * deux bords. On ne le REDÉFINIT pas : on déplace seulement son tracé à
  * l'intérieur de la puce, où rien ne le coupe. */
 .zv-seg:focus-visible {
   outline-offset: -2px;
@@ -778,7 +778,7 @@
 }
 
 /* Sélection PLEINE (répertoire, logs) : OPT-IN, à poser explicitement, et
- * BORNÉE — un seul groupe plein par page, jamais sur une page qui porte
+ * BORNÉE, un seul groupe plein par page, jamais sur une page qui porte
  * déjà un bouton plein. Une page de filtres à plusieurs groupes (la
  * bibliothèque en a deux) afficherait sinon autant d'aplats indigo que de
  * groupes, simultanément : c'est le seul mécanisme du paquet capable de
@@ -817,7 +817,7 @@
  * tabindex="0" (l'anneau de base.css suit alors tout seul).
  *
  * L'icône est un SVG du balisage (import-client.tsx:159-166) : viewBox
- * 0 0 30 30, fill="none", stroke="var(--accent)", stroke-width="1.5" —
+ * 0 0 30 30, fill="none", stroke="var(--accent)", stroke-width="1.5",
  * relevée en stroke-linecap="round", REPRISE au trait carré le 25/08/2026
  * comme tout ce qui trace (DECISIONS.md, « Le trait carré ») :
  *   <line x1="15" y1="4" x2="15" y2="18"/>
@@ -842,7 +842,7 @@
  *
  * ⚠️ RABATTEMENT VISIBLE : le fond de survol du relevé (#FDFDFF) tombe sur
  * --panel, à peine distinct du --white de repos. Le fond ne SIGNALE donc
- * plus rien — le retour visuel repose entièrement sur le filet qui passe à
+ * plus rien : le retour visuel repose entièrement sur le filet qui passe à
  * --accent. Ne pas le supprimer en croyant que le fond compense. */
 .zv-drop:hover,
 .zv-drop.is-dragging {
@@ -850,7 +850,7 @@
   background: var(--panel);
 }
 
-/* Stockage indisponible : la zone reste visible mais inerte — la masquer
+/* Stockage indisponible : la zone reste visible mais inerte, la masquer
  * ferait croire à une page cassée. */
 .zv-drop--disabled {
   cursor: not-allowed;
@@ -864,7 +864,7 @@
   background: var(--panel);
 }
 
-/* 15px : c'est une phrase, pas un libellé d'interface — d'où le palier de
+/* 15px : c'est une phrase, pas un libellé d'interface, d'où le palier de
  * corps de texte (--body) plutôt que l'échelle applicative, qui s'arrête à
  * 14px. */
 .zv-drop__title {
@@ -908,7 +908,7 @@
  * paquet a par ailleurs une vignette de format (.zv-filetype, data.css) et
  * les deux se liraient comme un seul bloc.
  *
- * Conséquence du retrait du flux : l'input n'est PAS focusable — d'où le
+ * Conséquence du retrait du flux : l'input n'est PAS focusable, d'où le
  * role/tabindex exigés sur .zv-drop ci-dessus. Remettre value='' après
  * chaque sélection, sinon redéposer le même fichier ne déclenche rien. */
 .zv-drop__input {
@@ -946,7 +946,7 @@
 }
 
 /* Champ en erreur : seul le filet change. Un fond rouge sur un champ à
- * remplir rendrait la saisie illisible — l'aplat --err-soft reste réservé au
+ * remplir rendrait la saisie illisible : l'aplat --err-soft reste réservé au
  * bandeau d'alerte. Le sélecteur suit l'attribut autant que la classe :
  * aria-invalid est ce qui rend l'erreur audible, il ne doit rien coûter. */
 .zv-field--err .zv-input,
@@ -987,7 +987,7 @@
   /* 44px, pas --tap (40px) : c'est la valeur des formulaires de connexion et
    * du pavé d'import, les deux seuls endroits où l'on saisit au doigt.
    * 16px : en dessous, Safari iOS zoome à la mise au point du champ et
-   * décale toute la page — ce n'est pas un choix typographique, aucun token
+   * décale toute la page, ce n'est pas un choix typographique, aucun token
    * n'a à porter cette valeur. */
   .zv-input,
   .zv-textarea {
@@ -1003,7 +1003,7 @@
 
   /* Le champ nu et celui d'un cadre à affixe. 16px et non --app-lg (14px) :
    * la règle des 16px ci-dessus vaut pour TOUT champ qu'on saisit au doigt,
-   * et ces deux-là — le composeur, le sous-domaine d'organisation — sont
+   * et ces deux-là (le composeur, le sous-domaine d'organisation) sont
    * parmi les plus saisis d'une application. Sous 16, Safari iOS zoome à la
    * mise au point et décale la page. */
   .zv-input--bare,
@@ -1087,7 +1087,7 @@
 
 /* ─── Champ mot de passe ────────────────────────────────────────────────
  * HORS RELEVÉ (27/08/2026, 0.18.0). Aucune des planches ne montre d'écran de
- * connexion, et le système n'avait donc rien pour ce champ — alors que tous
+ * connexion, et le système n'avait donc rien pour ce champ : alors que tous
  * les produits en ont un, et que la saisie masquée est le seul endroit de
  * l'interface où l'on tape sans voir ce qu'on écrit.
  *
@@ -1096,8 +1096,8 @@
  *
  * ⚠️ Le bouton est un vrai <button type="button"> : posé sur un <span>, il
  * n'est ni atteignable au clavier ni annoncé, et il envoie le formulaire dès
- * qu'on oublie le type. Son libellé change avec l'état — « Afficher » /
- * « Masquer » — parce qu'une icône seule ne dit pas ce qui va se passer. */
+ * qu'on oublie le type. Son libellé change avec l'état, « Afficher » /
+ * « Masquer », parce qu'une icône seule ne dit pas ce qui va se passer. */
 
 .zv-affix__btn {
   display: inline-flex;

package/src/icons.css

@@ -1,20 +1,20 @@
-/* Zevra UI — icônes
+/* Zevra UI : icônes
  * Dépend de tokens.css. Le jeu lui-même vit dans icons/ (index + sprite).
  *
  * Les icônes sont TRACÉES, jamais pleines : trait à l'épaisseur 2, sur une
- * grille de 24, à BOUTS FRANCS et JONCTIONS VIVES — le trait carré de la
+ * grille de 24, à BOUTS FRANCS et JONCTIONS VIVES, le trait carré de la
  * charte, arbitré le 25/08/2026 (DECISIONS.md, « Le trait carré ») : les
  * bouts arrondis étaient le dialecte des bibliothèques génériques, pas le
  * nôtre. Le réglage vit ici, les 55 tracés le suivent d'un coup. Elles
- * héritent de la couleur du texte — c'est ce qui leur permet de fonctionner
+ * héritent de la couleur du texte : c'est ce qui leur permet de fonctionner
  * sur papier comme sur la bande manifeste sans qu'on ait à les décliner.
  *
  * Deux façons de les poser :
  *
  *   <svg class="zv-icon"><use href="…/icons/sprite.svg#zv-recherche"/></svg>
  *
- * ou, là où les ressources distantes sont interdites — un canvas Claude
- * Design —, en collant le corps de l'icône depuis icons/index.json.
+ * ou, là où les ressources distantes sont interdites, un canvas Claude
+ * Design, en collant le corps de l'icône depuis icons/index.json.
  */
 
 .zv-icon {
@@ -22,7 +22,7 @@
   width: 16px;
   height: 16px;
   /* `flex: none` évite l'écrasement quand l'icône est posée à côté d'un
-   * libellé long dans un conteneur flex — le cas le plus fréquent, et la
+   * libellé long dans un conteneur flex : le cas le plus fréquent, et la
    * déformation la plus visible. */
   flex: none;
   vertical-align: middle;
@@ -32,7 +32,7 @@
   /* `square` garde l'emprise optique du rond (le bout dépasse d'une
    * demi-épaisseur, comme lui) : la silhouette change sans qu'un seul
    * tracé soit redessiné. Les angles très aigus retombent d'eux-mêmes en
-   * biseau (miter-limit par défaut) — rien à régler. */
+   * biseau (miter-limit par défaut) : rien à régler. */
   stroke-linecap: square;
   stroke-linejoin: miter;
 }
@@ -84,11 +84,11 @@
 /* Désactivé. C'était la SEULE classe interactive du module sans cet état :
  * .zv-btn, .zv-chrome-btn, .zv-menu__item, .zv-pager__arrow, .zv-range et
  * les champs en ont tous un. Sans lui, un bouton fermé se rendait comme un
- * bouton actif — curseur main compris — et s'allumait au survol comme s'il
+ * bouton actif, curseur main compris, et s'allumait au survol comme s'il
  * allait agir.
  * ⚠️ Le survol est neutralisé EXPLICITEMENT : `:hover` s'applique encore à
  * un bouton désactivé, et l'application ne peut pas le rattraper depuis une
- * couche d'utilitaires — ce module n'est pas layered. */
+ * couche d'utilitaires, ce module n'est pas layered. */
 .zv-icon-btn[disabled],
 .zv-icon-btn[aria-disabled='true'] {
   opacity: 0.5;
@@ -109,7 +109,7 @@
 
 /* ─── Tuile d'icône ─────────────────────────────────────────────────────
  * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). La pastille carrée qui
- * porte une icône devant un argument de la vitrine — liste de garanties,
+ * porte une icône devant un argument de la vitrine : liste de garanties,
  * grille d'atouts. Carrée par NATURE, pas par style : c'est une tuile.
  * Une par argument, jamais en décor isolé ; c'est le libellé voisin qui
  * nomme, la tuile est décorative par défaut. */

package/src/index.css

@@ -1,4 +1,4 @@
-/* Zevra UI — feuille complète.
+/* Zevra UI : feuille complète.
  * L'ordre compte : les tokens d'abord, le socle ensuite, puis ce qui
  * s'appuie dessus. Pour n'en charger qu'une partie, importer les modules
  * un à un dans ce même ordre.

package/src/layout.css

@@ -1,10 +1,10 @@
-/* Zevra UI — mise en page : conteneurs, grilles, sections, chrome
+/* Zevra UI, mise en page : conteneurs, grilles, sections, chrome
  * Dépend de tokens.css et base.css. Ne pose ni reset ni fond de page :
  * c'est le rôle de base.css.
  *
  * ⚠️ Les maquettes sont des rendus FIGÉS (1440px pour les planches, 390px
  * pour Mobile.html). Les reproduire en `width: 1440px` donnerait un
- * débordement horizontal garanti sur téléphone — ce que les règles du projet
+ * débordement horizontal garanti sur téléphone : ce que les règles du projet
  * interdisent explicitement. Les conteneurs sont donc fluides et plafonnés,
  * ce qui rend le rendu identique au-delà de 1440px et utilisable en dessous.
  */
@@ -23,7 +23,7 @@
 /* ─── Gouttières ────────────────────────────────────────────────────────
  * Trois retraits relevés, et un seul mécanisme pour les poser : ces
  * utilitaires. Les blocs ci-dessous ne portent QUE leur rythme vertical,
- * jamais leur retrait horizontal — sans quoi poser un utilitaire par-dessus
+ * jamais leur retrait horizontal : sans quoi poser un utilitaire par-dessus
  * un bloc écraserait son padding vertical (shorthand contre longhand). */
 
 .zv-gutter {
@@ -234,7 +234,7 @@
    * zone apparaît (`.zv-nav__actions` : lanceur, compte), space-between
    * centrait les liens et ouvrait un trou entre l'appel à l'action et le
    * compte. Deux apps composant la même barre se rendaient alors
-   * différemment selon qu'elles avaient ou non la zone de droite — c'est le
+   * différemment selon qu'elles avaient ou non la zone de droite : c'est le
    * défaut rapporté depuis Campus et Mémoire.
    *
    * La marge automatique absorbe l'espace libre AVANT que space-between ne
@@ -255,7 +255,7 @@
  * Le lanceur et le compte, à droite. Elle ne fait PAS partie de
  * `.zv-nav__links` et c'est tout l'intérêt : cette rangée-là disparaît sous
  * le point de rupture (et sous 1150px pour `.zv-nav--riche`), remplacée par
- * le burger. Le compte, lui, doit rester — sinon on ne peut plus se
+ * le burger. Le compte, lui, doit rester : sinon on ne peut plus se
  * connecter depuis un téléphone, et c'est la première chose qu'on y fait.
  *
  * Elle se pose APRÈS `.zv-nav__links` dans le balisage, et avant le burger. */
@@ -310,7 +310,7 @@
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
-  /* Bouts francs — le trait carré du jeu d'icônes (25/08/2026). Le burger
+  /* Bouts francs : le trait carré du jeu d'icônes (25/08/2026). Le burger
    * applicatif, relevé « extrémités franches », y était déjà. */
   stroke-linecap: square;
 }
@@ -354,7 +354,7 @@
 /* ─── Sélecteur de langue ───────────────────────────────────────────────
  * Des initiales au registre mono, pas un menu : trois langues se lisent
  * d'un coup d'œil, et un menu pour trois entrées coûte un clic pour rien.
- * Une page qui n'existe que dans une langue ne le pose pas — il vaut mieux
+ * Une page qui n'existe que dans une langue ne le pose pas : il vaut mieux
  * pas de sélecteur qu'un sélecteur qui mène à des 404. */
 
 .zv-langues {
@@ -411,14 +411,14 @@
  * s'y fonde au défilement.
  *
  * Deux usages, une seule classe. Il est LA BARRE quand il porte directement
- * ses pièces ; il l'ENVELOPPE quand il contient une .zv-nav — c'est la forme
+ * ses pièces ; il l'ENVELOPPE quand il contient une .zv-nav : c'est la forme
  * qu'impose une nav complète, dont les menus déroulants et le tiroir ont
  * besoin d'un conteneur à eux. Le `:has` bascule tout seul, plutôt que de
  * demander un modificateur qu'on oublierait.
  *
  * ⚠️ backdrop-filter fait de ce bloc le containing block de TOUT descendant
  * en position fixe. Le tiroir (fixe lui aussi) doit donc vivre EN DEHORS,
- * en frère — dedans, il serait rogné par la hauteur de la barre.
+ * en frère : dedans, il serait rogné par la hauteur de la barre.
  *
  * Le voile venait en rgba littéral, c'est-à-dire hors token : --paper
  * repeint, la barre serait restée sur l'ancienne couleur. */
@@ -436,7 +436,7 @@
   /* Le voile est PLEIN derrière la barre, et il se dégrade EN DESSOUS d'elle
    * (::after). Il était auparavant dégradé sur toute sa hauteur : à sa base
    * il ne restait donc presque rien, et un titre de 38 ou 56px qui passait
-   * dessous se retrouvait COUPÉ EN DEUX — moitié voilée, moitié nette, avec
+   * dessous se retrouvait COUPÉ EN DEUX, moitié voilée, moitié nette, avec
    * les entrées de nav posées sur ses lettres. Deux textes superposés, aucun
    * lisible. Signalé en recette sur mcp-factory.
    * Le dégradé n'est pas perdu : il vit sous la barre, là où il adoucit le
@@ -445,7 +445,7 @@
    * L'OPACITÉ, elle, est retombée de 92 à 72 %. À 92 la barre était un
    * bandeau blanc : ce qui passait dessous n'était plus qu'un fantôme, et
    * le flou ne servait à rien puisqu'il n'y avait rien à voir au travers.
-   * C'est du verre qu'on veut, pas un cache — le rendu de
+   * C'est du verre qu'on veut, pas un cache : le rendu de
    * landing.zevra.tech, qui fait toujours référence. À 72 avec un flou de
    * 14, le contenu transparaît franchement ET les entrées de nav restent
    * nettes. Comparé à l'écran sur un titre passant sous la barre, à 92, 72
@@ -455,20 +455,20 @@
    * les deux vont ensemble. C'est le flou qui fait le verre ; l'opacité ne
    * fait que doser ce qu'on en voit. */
   background: color-mix(in srgb, var(--paper) 72%, transparent);
-  /* ⚠️ LE PRÉFIXÉ D'ABORD. Lightning CSS — le compilateur de Tailwind v4,
-   * donc celui de toutes nos applications Next — SUPPRIME `backdrop-filter`
+  /* ⚠️ LE PRÉFIXÉ D'ABORD. Lightning CSS (le compilateur de Tailwind v4,
+   * donc celui de toutes nos applications Next) SUPPRIME `backdrop-filter`
    * non préfixé quand il 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'ordre est donc une
    * contrainte, pas un style.
    *
    * Le voile, lui, reste en `color-mix` : le compilateur le traite
-   * CORRECTEMENT — il émet un repli opaque puis la vraie valeur sous
+   * CORRECTEMENT, il émet un repli opaque puis la vraie valeur sous
    * `@supports`, ce qu'on lit dans les bundles livrés. Une note antérieure
    * affirmait qu'il le « réduisait » ; elle prenait le repli pour le
    * résultat. Ne pas « corriger » vers `rgb(from …)` : cette syntaxe sort du
    * compilateur NUE, sans repli, et un navigateur qui l'ignore n'a alors
-   * plus AUCUN fond sous une barre fixe — 3,5 % d'usage qui voyaient le
+   * plus AUCUN fond sous une barre fixe, 3,5 % d'usage qui voyaient le
    * voile correctement et ne verraient plus rien. */
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
@@ -477,7 +477,7 @@
 /* La frange de dégradé, posée SOUS la barre. `pointer-events: none` : elle
  * couvre le haut du contenu, elle ne doit rien intercepter. */
 /* Le prolongement du voile SOUS la barre : il éteint le verre au lieu de
- * le couper net. Son sommet doit valoir EXACTEMENT l'opacité de la barre —
+ * le couper net. Son sommet doit valoir EXACTEMENT l'opacité de la barre :
  * sinon la jointure fait une marche, d'autant plus visible que la barre est
  * translucide. Les deux valeurs bougent donc ensemble. */
 .zv-header::after {
@@ -656,13 +656,13 @@
  * script et un arbitrage de dessin), pas de points. Le clavier passe par le
  * focus du conteneur, que la façade rend focalisable.
  *
- * La barre de défilement tombe — le rail visible transformerait la vitrine
+ * La barre de défilement tombe : le rail visible transformerait la vitrine
  * en fenêtre d'application. C'est un MASQUAGE, pas l'habillage que
  * navigation.css refuse : aucune dimension inventée.
  *
  * ⚠️ Un carrousel reste un aveu d'espace : la règle de variété lui préfère
  * une grille tant que le contenu tient. La largeur des éléments vient du
- * consommateur — un carrousel qui la fixerait déciderait de la mise en page
+ * consommateur : un carrousel qui la fixerait déciderait de la mise en page
  * à la place de la grille. */
 
 .zv-carousel {
@@ -715,15 +715,15 @@
 /* ─── Bascule d'affichage ───────────────────────────────────────────────
  * HORS RELEVÉ : utilitaires mécaniques, pas des décisions de charte. Ils
  * existent parce que les maquettes desktop et mobile ne montrent PAS les
- * mêmes éléments de navigation — les liens de nav desktop deviennent un
- * menu burger — et que sans eux chaque app réinvente la même règle. */
+ * mêmes éléments de navigation, les liens de nav desktop deviennent un
+ * menu burger, et que sans eux chaque app réinvente la même règle. */
 
 /* Chaque utilitaire MASQUE dans la plage où l'élément n'a pas sa place, et ne
  * dit RIEN dans l'autre.
  *
  * La version précédente posait `display: none` par défaut puis
  * `display: revert` au-dessus du seuil. C'était faux : `revert` revient au
- * défaut du NAVIGATEUR — `inline` pour un span — et écrasait donc le
+ * défaut du NAVIGATEUR, `inline` pour un span, et écrasait donc le
  * `display: flex` que l'élément tenait de sa propre classe. Une rangée de
  * liens de navigation perdait sa gouttière et ses libellés se collaient.
  *
@@ -826,7 +826,7 @@
 
   /* Les liens de navigation desktop n'ont pas d'équivalent mobile au
    * relevé : Mobile.html les remplace par un menu burger. Ils ne sont pas
-   * masqués d'office — cela casserait les pages sans burger — mais
+   * masqués d'office, cela casserait les pages sans burger, mais
    * .zv-only-desktop est là pour le faire en une classe. */
 
   .zv-steps__rail,
@@ -893,11 +893,11 @@
  * 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 NAVIGUE (chaque entrée
  * est une ancre) et elle SUIT (le module rail.js marque la section en
- * cours) — les deux, sinon ce n'est qu'un décor qui occupe la marge.
+ * cours) : les deux, sinon ce n'est qu'un décor qui occupe la marge.
  *
  * ⚠️ Elle demande de la place à côté du texte. Sous le point de rupture
  * elle 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 — une page dont le
+ * Au-dessus, c'est la mesure de la page qui décide : une page dont le
  * contenu court d'un bord à l'autre jusqu'à 1100px gagnera à relever le
  * seuil chez elle.
  *
@@ -978,7 +978,7 @@
 }
 
 /* L'entrée courante, posée par rail.js. Le halo du point est le seul
- * signal dont une navigation discrète a besoin — pas de fond, pas de
+ * signal dont une navigation discrète a besoin : pas de fond, pas de
  * filet. */
 .zv-rail__item--on {
   color: var(--accent-deep);
@@ -992,8 +992,8 @@
 /* ─── Le seuil d'une nav riche ──────────────────────────────────────────
  *
  * La bascule vers le tiroir est à 767px, réglée sur la nav de référence :
- * quatre liens simples. Une nav qui porte l'architecture d'un site — cinq
- * familles à menu, un sélecteur de langue, un appel à l'action — déborde
+ * quatre liens simples. Une nav qui porte l'architecture d'un site (cinq
+ * familles à menu, un sélecteur de langue, un appel à l'action) déborde
  * bien avant. Mesuré : entre 768 et 1150px, le logo passe SOUS la première
  * entrée.
  *