@zevra/ui 0.17.0 → 0.21.0

package/src/components.css

@@ -41,10 +41,34 @@
     box-shadow 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
-.zv-btn {
-  /* Le sommet du dégradé, relevé dans Main.html et SANS token : écrit une
-   * seule fois ici, les états de survol le dérivent par color-mix. */
-  --zv-btn-haut: #2b2bb4;
+/* ─── Le plein ne s'applique QUE si aucune variante n'est posée ────────
+ *
+ * `zv-btn`, `zv-btn--ghost`, `zv-btn--ink` et `zv-btn--danger` sont quatre
+ * classes AUTONOMES et mutuellement exclusives : le socle commun ci-dessus
+ * les 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 —
+ * mais une app qui écrit ses classes à la main lit du BEM et compose les
+ * deux. C'est arrivé (mcp-factory, 0.19.0), et le résultat était vicieux :
+ * `.zv-btn:hover` (0,2,0) l'emportait sur `.zv-btn--ghost` (0,1,0), d'où un
+ * fond indigo sous un texte encre — illisible, et seulement AU SURVOL, donc
+ * invisible en relecture comme en capture.
+ *
+ * Le `:not(:where(…))` dit ce que le système voulait déjà dire : ces quatre
+ * classes s'excluent. `:where()` a une spécificité NULLE — la garde ne
+ * change donc aucun arbitrage existant, et une app qui surcharge `.zv-btn`
+ * continue de gagner exactement comme avant.
+ *
+ * ⚠️ À reporter sur toute règle future qui peint le bouton plein. */
+
+.zv-btn:not(:where(.zv-btn--ghost, .zv-btn--ink, .zv-btn--danger)) {
+  /* Le sommet du dégradé. RELEVÉ dans Main.html à #2b2bb4, mais DÉRIVÉ de
+   * --accent depuis la 0.19.0 : la déclaration étant portée par le bouton
+   * lui-même, une redéfinition de marque héritée d'un conteneur ne
+   * l'atteignait pas — un cabinet en marque blanche obtenait un dégradé
+   * allant de l'indigo Zevra à SA couleur. Pour la charte par défaut,
+   * l'écart avec la valeur relevée est d'un point de bleu, invisible.
+   * Les états de survol le dérivent ensuite par color-mix. */
+  --zv-btn-haut: var(--accent);
   background: linear-gradient(180deg, var(--zv-btn-haut) 0%, var(--accent-deep) 100%);
   color: var(--white);
   /* Le liseré interne fait tout le galbe du bouton : il est dans Main.html
@@ -88,7 +112,7 @@
  * chose.
  * Déclarés AVANT [disabled], qui doit l'emporter à spécificité égale. */
 
-.zv-btn:hover {
+.zv-btn:not(:where(.zv-btn--ghost, .zv-btn--ink, .zv-btn--danger)):hover {
   background: linear-gradient(
     180deg,
     color-mix(in oklab, var(--zv-btn-haut) 86%, var(--ink)) 0%,
@@ -96,7 +120,7 @@
   );
 }
 
-.zv-btn:active {
+.zv-btn:not(:where(.zv-btn--ghost, .zv-btn--ink, .zv-btn--danger)):active {
   background: linear-gradient(
     180deg,
     color-mix(in oklab, var(--zv-btn-haut) 72%, var(--ink)) 0%,
@@ -177,8 +201,8 @@
  * désactivé OU occupé (dont le clic est avalé par la façade) : sans ces
  * règles, les états ci-dessus repeignent le fond et le bouton a l'air
  * actif. Même précaution que les contrôles désactivés de forms.css. */
-.zv-btn[disabled]:is(:hover, :active),
-.zv-btn[aria-busy='true']:is(:hover, :active) {
+.zv-btn:not(:where(.zv-btn--ghost, .zv-btn--ink, .zv-btn--danger))[disabled]:is(:hover, :active),
+.zv-btn:not(:where(.zv-btn--ghost, .zv-btn--ink, .zv-btn--danger))[aria-busy='true']:is(:hover, :active) {
   background: linear-gradient(180deg, var(--zv-btn-haut) 0%, var(--accent-deep) 100%);
 }
 
@@ -612,8 +636,23 @@
 /* ─── FAQ ───────────────────────────────────────────────────────────────
  * Cinq questions par page au maximum. */
 
+/* Le filet, comme `.zv-fold` : sans lui, la FAQ est un aplat blanc posé sur
+ * le papier, sans début ni fin. Toutes les autres surfaces blanches de la
+ * vitrine — carte, encart, tarif — en portent un ; celle-ci faisait tache. */
 .zv-faq {
   background: var(--white);
+  border: 1px solid var(--line);
+}
+
+/* Chaque question est un `<details>` : le repli est natif, sans JavaScript.
+ * Le filet sépare les questions ENTRE elles ; la première n'en porte pas, il
+ * tomberait sur celui du bloc et ferait un trait double. */
+.zv-faq__item {
+  border-top: 1px solid var(--hairline);
+}
+
+.zv-faq__item:first-child {
+  border-top: 0;
 }
 
 .zv-faq__q {
@@ -622,22 +661,54 @@
   align-items: center;
   gap: 16px;
   padding: 18px 24px;
-  border-bottom: 1px solid var(--hairline);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
+  /* Le marqueur natif du `<summary>` tombe : le chevron du composant fait le
+   * même travail sans imposer le triangle du navigateur. Même traitement que
+   * `.zv-fold__titre`. */
+  list-style: none;
+}
+
+.zv-faq__q::-webkit-details-marker {
+  display: none;
+}
+
+/* Une FAQ de vitrine veut ses questions dans le PLAN DU DOCUMENT : c'est ce
+ * que lisent les moteurs, et ce que parcourt un lecteur d'écran qui saute de
+ * titre en titre. On accepte donc un `<h2>`/`<h3>`/`<h4>` comme question,
+ * et on lui retire ce que le navigateur lui met — taille, graisse, marges —
+ * pour qu'il se rende comme le reste des questions. Le niveau reste au
+ * balisage, l'apparence au système. */
+.zv-faq__q > :is(h2, h3, h4) {
+  margin: 0;
+  font: inherit;
+  color: inherit;
+}
+
+.zv-faq__q:hover {
+  background: var(--panel);
 }
 
-.zv-faq__q svg {
+/* Le chevron porte sa classe : cibler tout `svg` du titre attraperait aussi
+ * une icône posée dans le libellé, qui se verrait rétrécie et retournée. */
+.zv-faq__chevron {
   width: 14px;
   height: 14px;
   flex: none;
   color: var(--accent);
+  transition: rotate 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-faq__item[open] .zv-faq__chevron {
+  rotate: 180deg;
 }
 
 .zv-faq__a {
-  padding: 14px 24px;
+  margin: 0;
+  padding: 0 24px 18px;
   font-size: 13px;
+  line-height: 1.6;
   color: var(--muted);
 }
 
@@ -911,6 +982,13 @@
 
 
 @media (max-width: 767px) {
+
+  /* Le `min-width: 260px` de la valeur ne tient pas sous le seuil : dans une
+   * carte de 215px — un écran de 320px — elle débordait de 45px. La CLÉ
+   * était déjà libérée (flex-basis 100%), il manquait la valeur. */
+  .zv-rows__val {
+    min-width: 0;
+  }
   .zv-btn--sm {
     height: 36px;
     padding: 0 14px;
@@ -1029,3 +1107,258 @@
 .zv-lockup--marque-seule .zv-lockup__word {
   display: none;
 }
+
+/* ─── Cadre média ───────────────────────────────────────────────────────
+ * HORS RELEVÉ (27/08/2026, 0.18.0). Aucune des dix planches ne montre
+ * d'image de contenu — elles sont composées, pas photographiées. Le manque
+ * était pourtant total : pas un `aspect-ratio`, pas un `object-fit` dans le
+ * paquet, et quatre réécritures du même cadre chez un seul consommateur.
+ *
+ * ⚠️ Le rapport vit sur le CADRE, jamais sur l'image. Posé sur un enfant de
+ * grille aligné au centre, il ne se résout pas et la colonne s'effondre à
+ * zéro — c'est un correctif de production, pas une précaution théorique.
+ *
+ * Le fond est posé et non laissé transparent : une image qui tarde, échoue
+ * ou porte de la transparence laisserait voir la surface du dessous, soit un
+ * trou blanc sur une carte, soit un trou sombre sur une bande. */
+
+.zv-media {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  background: var(--hairline);
+  /* Angle vif comme le reste ; aucune ombre, l'image est dans le flux. */
+  border-radius: 0;
+}
+
+/* Les quatre rapports du système. Un cinquième se demande, il ne s'invente
+ * pas : c'est ainsi qu'une bibliothèque finit avec dix-sept rapports dont
+ * trois servent. */
+.zv-media--16-9 {
+  aspect-ratio: 16 / 9;
+}
+
+.zv-media--4-3 {
+  aspect-ratio: 4 / 3;
+}
+
+.zv-media--1-1 {
+  aspect-ratio: 1 / 1;
+}
+
+.zv-media--3-2 {
+  aspect-ratio: 3 / 2;
+}
+
+/* L'image REMPLIT le cadre : c'est le seul comportement qui le garantisse
+ * plein quelle que soit la source, et une grille dont les couvertures ne
+ * s'alignent pas se voit aussitôt. En absolu, pour que le cadre garde la
+ * main sur sa hauteur. */
+.zv-media__img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Le cas inverse — un logo, un schéma, une pièce qu'on ne peut pas rogner.
+ * Le papier passe derrière : il restera du vide, autant qu'il soit choisi. */
+.zv-media--contient {
+  background: var(--paper);
+}
+
+.zv-media--contient .zv-media__img {
+  object-fit: contain;
+}
+
+/* Le coin d'un cadre : durée d'une vidéo, nombre de pages, mention de
+ * réserve. Encre diluée et non un gris opaque — le fond d'image est
+ * imprévisible, et l'encre de charte s'y pose sans jurer. */
+.zv-media__coin {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 7px;
+  background: color-mix(in srgb, var(--ink) 72%, transparent);
+  color: var(--white);
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 500;
+  letter-spacing: 0.08em;
+}
+
+.zv-media__coin--gauche {
+  right: auto;
+  left: 8px;
+}
+
+.zv-media__coin--haut {
+  bottom: auto;
+  top: 8px;
+}
+
+/* Voile de lecture : un titre posé SUR une image n'est lisible qu'au-dessus
+ * d'un dégradé. Il part du bas, là où le texte se pose, et n'assombrit pas
+ * le sujet. Il ne capte pas le pointeur — le cadre reste cliquable. */
+.zv-media__voile {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(
+    180deg,
+    transparent 40%,
+    color-mix(in srgb, var(--ink) 78%, transparent) 100%
+  );
+}
+
+/* ─── Page légale ───────────────────────────────────────────────────────
+ * HORS RELEVÉ (27/08/2026, voir DECISIONS.md). La forme d'un document
+ * contractuel — CGVU, mentions légales, DPA. Le TEXTE, lui, n'est pas ici :
+ * il vit dans @zevra/legal, versionné et archivé. Ce module ne porte que la
+ * mise en page ; c'est ce qui permet au même texte de s'afficher sur la
+ * vitrine et dans une application sans exister en deux exemplaires.
+ *
+ * Presque tout se compose de pièces existantes : le sommaire est .zv-rail,
+ * les définitions .zv-rows, les tableaux .zv-table, les encarts .zv-callout.
+ * Ne restent ici que la colonne de lecture et ce que les listes de texte
+ * courant n'avaient jamais eu. */
+
+.zv-legal {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  /* La MESURE, et c'est la seule règle qui compte vraiment pour un contrat :
+   * au-delà d'environ 80 signes par ligne, l'œil perd le début de la ligne
+   * suivante — sur un texte qu'on lit déjà à reculons, c'est rédhibitoire. */
+  max-width: 72ch;
+}
+
+.zv-legal__section {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  /* Un lien vers un article précis ne doit pas déposer son titre sous la
+   * barre fixe. Sans cette réserve, cliquer « Art. 7 » dans le sommaire
+   * affiche le corps de l'article et cache son intitulé. */
+  scroll-margin-top: 88px;
+}
+
+/* Les listes du texte courant. Le paquet n'en avait aucune : ses listes
+ * étaient toutes des objets (étapes, sommaires numérotés, rangées à filets),
+ * jamais l'énumération d'une clause. */
+.zv-legal__liste {
+  margin: 0;
+  padding-left: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: var(--body);
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+.zv-legal__liste li::marker {
+  color: var(--accent-line);
+}
+
+/* Le renvoi vers un autre document contractuel, dans le fil d'une clause :
+ * souligné, parce qu'à l'intérieur d'un paragraphe la couleur seule ne
+ * suffit pas à annoncer qu'on change de contrat. */
+.zv-legal a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Le tableau d'un contrat (durées de conservation, sous-traitants). Il n'
+ * emprunte PAS .zv-table de data.css : celui-là est une surface de travail
+ * dont les rangées se survolent et se cliquent, ce qu'un tableau de contrat
+ * ne fait jamais. Filets, chiffres alignés, et rien de plus. */
+.zv-legal__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--app);
+  line-height: 1.55;
+  color: var(--ink-2);
+}
+
+.zv-legal__table th {
+  border-bottom: 1px solid var(--line);
+  padding: 8px 12px 8px 0;
+  text-align: left;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--label);
+}
+
+.zv-legal__table td {
+  border-bottom: 1px solid var(--hairline);
+  padding: 10px 12px 10px 0;
+  vertical-align: top;
+  font-variant-numeric: tabular-nums;
+}
+
+/* L'en-tête : titre, date d'entrée en vigueur, identifiant de version.
+ * ⚠️ La VERSION est affichée, et ce n'est pas décoratif : c'est ce que
+ * l'utilisateur cite quand il conteste, et ce que le support lui demande. */
+.zv-legal__tete {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-bottom: 1px solid var(--line);
+  padding-bottom: 24px;
+}
+
+@media (max-width: 767px) {
+  .zv-legal {
+    gap: 36px;
+  }
+
+  .zv-legal__section {
+    scroll-margin-top: calc(var(--topbar-h) + 12px);
+  }
+}
+
+/* Encart d'accompagnement d'une clause : la reformulation en langage courant
+ * (« En clair ») ou le point à ne pas manquer. Il COMMENTE la clause et ne
+ * la remplace pas — d'où une surface d'accompagnement, et non l'aplat d'une
+ * alerte, qui annoncerait un incident.
+ * Il vit ici et non dans feedback.css : une page légale de vitrine n'a pas à
+ * charger la couche applicative pour afficher une glose. */
+.zv-legal__encart {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-left: 2px solid var(--accent-line);
+  background: var(--panel);
+  padding: 14px 18px;
+}
+
+.zv-legal__encart--important {
+  border-left-color: var(--warn);
+  background: var(--warn-soft);
+}
+
+.zv-legal__encart-label {
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--label);
+}
+
+.zv-legal__encart--important .zv-legal__encart-label {
+  color: var(--warn-ink);
+}

package/src/forms.css

@@ -1001,9 +1001,15 @@
     min-height: var(--tap);
   }
 
-  .zv-input--bare {
+  /* 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
+   * parmi les plus saisis d'une application. Sous 16, Safari iOS zoome à la
+   * mise au point et décale la page. */
+  .zv-input--bare,
+  .zv-affix .zv-input--bare {
     min-height: var(--tap);
-    font-size: var(--app-lg);
+    font-size: 16px;
   }
 
   /* Le cadre passe pleine largeur. Il n'est PAS figé (`flex: none`) : le
@@ -1015,8 +1021,11 @@
     flex: 0 1 auto;
   }
 
+  /* Le champ de recherche n'était visé par aucune des deux règles : il
+   * gardait --app (13px), donc il zoomait lui aussi. */
   .zv-search__input {
     padding-block: 12px;
+    font-size: 16px;
   }
 
   /* Le déclencheur peut passer à la ligne : sa valeur courante est un nom de
@@ -1075,3 +1084,57 @@
     color: var(--accent);
   }
 }
+
+/* ─── 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
+ * 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.
+ *
+ * Bâti sur `.zv-affix` plutôt qu'en cadre parallèle : le champ nu, le cadre
+ * qui l'entoure et son anneau de mise au point sont déjà là.
+ *
+ * ⚠️ 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. */
+
+.zv-affix__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  /* Cible tactile obtenue par la taille, pas par du remplissage : un bouton
+   * de 16 px entouré de marge reste un bouton de 16 px pour le doigt. */
+  width: 32px;
+  height: 32px;
+  margin-right: -6px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  transition: color 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-affix__btn:hover {
+  color: var(--ink);
+}
+
+.zv-affix__btn[aria-pressed='true'] {
+  color: var(--accent);
+}
+
+/* Le contour déborderait du cadre à affixe, qui le rogne. On le rentre. */
+.zv-affix__btn:focus-visible {
+  outline-offset: -2px;
+}
+
+/* Les gestionnaires de mot de passe des navigateurs posent leur propre œil
+ * dans le champ : deux boutons côte à côte pour la même chose. On masque le
+ * leur, le nôtre étant accessible et cohérent avec la charte. */
+.zv-affix input[type='password']::-ms-reveal,
+.zv-affix input[type='password']::-ms-clear {
+  display: none;
+}

package/src/icons.css

@@ -81,6 +81,26 @@
   color: var(--ink);
 }
 
+/* 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
+ * 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. */
+.zv-icon-btn[disabled],
+.zv-icon-btn[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.zv-icon-btn[disabled]:hover,
+.zv-icon-btn[aria-disabled='true']:hover {
+  background: transparent;
+  color: var(--muted);
+}
+
 /* Icône décorative posée à côté d'un libellé qui la nomme déjà : elle est
  * atténuée pour que le mot reste le point d'entrée du regard. */
 .zv-icon--quiet {

package/src/layout.css

@@ -395,13 +395,51 @@
   padding-top: 22px;
   padding-bottom: 12px;
   z-index: 40;
+  /* 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
+   * 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
+   * passage sans se disputer la place avec la navigation. */
+  background: color-mix(in srgb, var(--paper) 92%, transparent);
+  /* ⚠️ 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
+   * `@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
+   * voile correctement et ne verraient plus rien. */
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+}
+
+/* La frange de dégradé, posée SOUS la barre. `pointer-events: none` : elle
+ * couvre le haut du contenu, elle ne doit rien intercepter. */
+.zv-header::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 24px;
   background: linear-gradient(
     180deg,
     color-mix(in srgb, var(--paper) 92%, transparent),
     color-mix(in srgb, var(--paper) 0%, transparent)
   );
-  backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  pointer-events: none;
 }
 
 .zv-header:has(> .zv-nav) {

package/src/navigation.css

@@ -832,6 +832,15 @@
  * Sous ce seuil, tout ce qui se touche fait au moins --tap. */
 
 @media (max-width: 767px) {
+
+  /* Le fil ENTIER est un seul lien, et il n'avait aucune hauteur de cible :
+   * à 11px de texte il passe sous le minimum tactile. On déploie la cible
+   * sans toucher au corps. */
+  .zv-crumbs {
+    display: inline-flex;
+    align-items: center;
+    min-height: var(--tap);
+  }
   /* 224px de colonne à côté du contenu sur un écran de 375px ne laisse rien à
    * lire : la colonne cède la place au couple barre + tiroir. */
   .zv-sidebar {
@@ -982,6 +991,17 @@
     padding: 8px;
   }
 
+  /* La cible tactile, que le padding seul ne donne pas : un chevron de dix
+   * pixels entouré de huit reste sous --tap. `.zv-pager__step` la portait
+   * déjà ; ses deux voisines l'attendaient. */
+  .zv-pager__arrow,
+  .zv-pager__rank {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--tap);
+  }
+
   .zv-pager__rank {
     padding-block: 8px;
   }