@zevra/ui 0.1.0 → 0.2.0

package/src/navigation.css

@@ -0,0 +1,814 @@
+/* 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.
+ *
+ * DÉPEND DE :
+ *   · 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
+ *     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
+ *     ci-dessous est le prolongement ;
+ *   · 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 —
+ * l'entrée applicative s'appelle .zv-sidelink ; le déclencheur du menu est
+ * .zv-select et l'onglet réemploie .zv-seg, tous deux dans forms.css.
+ *
+ * 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
+ * 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é.
+ *
+ * ⚠️ SEUIL. Mémoire bascule à `lg` (1024px) ; le paquet n'a qu'un point de
+ * rupture, 768px, et c'est celui-là qui s'applique. Ce qui est relevé, ce sont
+ * les DEUX jeux de valeurs (doigt / souris), jamais la largeur où ils
+ * basculent. Tout le responsive est en fin de fichier, sous la seule forme
+ * employée par base.css et components.css : `max-width: 767px`. Les règles de
+ * base décrivent donc l'écran large, et le bloc final ramène au doigt.
+ *
+ * ─── Empilement ────────────────────────────────────────────────────────
+ * layout.css tient l'inventaire des couches du paquet et s'arrête à 50
+ * (.zv-layer-top), avec la consigne « toute nouvelle couche s'arbitre par
+ * rapport à celle-ci ». Les recouvrements applicatifs se rangent donc
+ * 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
+ * en bloc pour dégager l'inventaire de vitrine :
+ *
+ *     menu 60 · voile 60 · feuille de source 70 · tiroir 80
+ *
+ * L'égalité menu/voile est conservée parce qu'elle est assumée : les deux ne
+ * coexistent jamais (ouvrir le tiroir ferme le menu). C'est autre chose qu'une
+ * égalité subie entre deux pièces qui, elles, se croisent.
+ * N'insérer aucune valeur intermédiaire sans rejuger l'échelle entière.
+ *
+ * ─── 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.
+ * 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).
+ */
+
+/* ─── Colonne latérale ──────────────────────────────────────────────────
+ * Une colonne, un filet, rien d'autre : ni ombre, ni rayon. Une ombre ferait
+ * flotter une pièce qui ne bouge jamais, et le rayon appartient à l'action
+ * (--r-btn) ou à la carte (--r-card), pas au chrome. */
+
+.zv-sidebar {
+  display: flex;
+  width: 224px;
+  /* Sans `flex: none`, une entrée de nav un peu longue élargit la colonne et
+   * décale le contenu : la largeur est une constante, pas un résultat. */
+  flex: none;
+  flex-direction: column;
+  /* La colonne défile pour son propre compte : une nav longue ne doit jamais
+   * entraîner le contenu, ni l'inverse. */
+  overflow-y: auto;
+  border-right: 1px solid var(--line);
+  background: var(--panel);
+}
+
+.zv-sidebar__head {
+  border-bottom: 1px solid var(--line);
+  padding: 20px 18px 14px;
+}
+
+/* `margin-top: auto` colle le pied en bas quand la nav est courte et le laisse
+ * suivre le contenu quand elle est longue. Un `position: sticky` aurait
+ * recouvert la dernière entrée dès que la colonne défile. */
+.zv-sidebar__foot {
+  margin-top: auto;
+  border-top: 1px solid var(--line);
+}
+
+/* Le même balisage sert à l'aside et au panneau du tiroir. Dans le tiroir, la
+ * croix se pose en absolu par-dessus la tête : sans cette réserve, un logo
+ * client large passe dessous et devient incliquable. */
+.zv-drawer .zv-sidebar__head > :first-child {
+  padding-right: 46px;
+}
+
+/* ─── Groupes de navigation ─────────────────────────────────────────────
+ * Nommés .zv-sidegroup et non .zv-navgroup : layout.css possède déjà .zv-nav,
+ * .zv-nav__logo, .zv-nav__links et .zv-navlink pour la nav de VITRINE. Un
+ * .zv-navgroup posé à côté se lirait comme une pièce de cette famille-là. La
+ * colonne applicative a sa propre lignée : sidebar › sidegroup › sidelink. */
+
+.zv-sidegroup {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px 10px;
+}
+
+.zv-sidegroup__title {
+  padding: 2px 10px 8px;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--label);
+}
+
+/* À 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
+ * troisième trait la transformerait en tableau. */
+.zv-sidegroup + .zv-sidegroup .zv-sidegroup__title {
+  padding-top: 14px;
+}
+
+/* ─── Entrée de barre latérale ──────────────────────────────────────────
+ * `.zv-navlink` appartient déjà à la navigation de vitrine (layout.css) :
+ * l'entrée applicative s'appelle `.zv-sidelink`, et les deux ne doivent
+ * jamais se recouvrir. */
+
+.zv-sidelink {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  font-family: var(--font-text);
+  font-size: var(--app);
+  font-weight: 500;
+  color: var(--ink-2);
+  text-decoration: none;
+}
+
+/* ⚠️ CONTRE-ORDRE, pas un style. base.css repeint les liens nus en accent, et
+ * l'application hôte va souvent plus loin (`a { color: accent }`,
+ * `a:hover { text-decoration: underline }`). Sans ces deux déclarations
+ * d'apparence redondante, l'entrée de nav vire au bleu souligné dès qu'elle
+ * tombe dans une page qui applique le style éditorial. */
+.zv-sidelink:hover {
+  background: var(--hairline);
+  color: var(--ink-2);
+  text-decoration: none;
+}
+
+/* `aria-current="page"` est ajouté au relevé : la production ne marque
+ * l'entrée courante que visuellement, ce qui la rend muette au lecteur
+ * d'écran. Les deux sélecteurs valent la même chose pour que le balisage
+ * correct ne coûte rien. */
+.zv-sidelink--on,
+.zv-sidelink[aria-current="page"] {
+  background: var(--accent-soft);
+  font-weight: 600;
+  color: var(--accent);
+}
+
+/* Au survol de l'entrée courante, le fond change mais le texte reste accent :
+ * sinon la page où l'on se trouve « s'éteint » sous le pointeur. */
+.zv-sidelink--on:hover,
+.zv-sidelink[aria-current="page"]:hover {
+  background: var(--hairline);
+  color: var(--accent);
+}
+
+/* Le contour de base.css déborde de 2px ; dans une colonne en `overflow-y:
+ * auto` il est rogné par le bord du scroller. On le rentre plutôt que d'en
+ * redessiner un autre. */
+.zv-sidelink:focus-visible {
+  outline-offset: -2px;
+}
+
+/* Largeur fixe : le rang mono et le glyphe ⚙ du panneau admin doivent tomber
+ * sur la même colonne, sinon les libellés se décalent d'un groupe à l'autre.
+ * La production écrit 10px en dur (app-shell.tsx:160) ; c'est exactement
+ * --mono, donc le token remplace la valeur sans rien déplacer. */
+.zv-sidelink__num {
+  width: 16px;
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 500;
+  color: var(--label);
+}
+
+/* ─── Barre supérieure ──────────────────────────────────────────────────
+ * Elle remplace la colonne sous le seuil : masquée au-dessus, elle n'apparaît
+ * que dans le bloc mobile de fin de fichier. */
+
+.zv-topbar {
+  display: none;
+  /* --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
+   * 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 —
+   * 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. */
+  height: var(--topbar-h);
+  flex: none;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel);
+  padding-inline: 16px;
+}
+
+/* Le logo cède AVANT le nom : un logo client très large ne doit jamais
+ * pousser la barre hors de l'écran. */
+.zv-topbar__logo {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.zv-topbar__title {
+  min-width: 0;
+  flex: 1 1 0%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--app-sm);
+  font-weight: 600;
+  color: var(--ink);
+}
+
+/* Le hamburger n'est PAS un bouton propre à ce module : c'est le .zv-icon-btn
+ * 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 —
+ * 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.
+ * 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 {
+  margin-right: -8px;
+}
+
+/* ─── Bouton de chrome (croix bordée) ───────────────────────────────────
+ * ⚠️ RENOMMÉ : ce bouton s'appelait .zv-icon-btn, nom que icons.css possède
+ * déjà pour tout autre chose (bouton nu de 40px, coins arrondis). Deux
+ * 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. */
+
+.zv-chrome-btn {
+  display: flex;
+  width: 26px;
+  height: 26px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--white);
+  /* base.css ne reset pas les boutons : sans police ni fond explicites, un
+   * <button> retombe sur ceux du navigateur et détonne. Même précaution que
+   * .zv-btn dans components.css. */
+  font-family: var(--font-text);
+  font-size: var(--app);
+  line-height: 1;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+/* ⚠️ Divergence relevée : la croix du tiroir n'a AUCUN état en production,
+ * celle de la feuille de source porte ce survol. Retenu : le survol partout,
+ * un bouton sans réaction se lit comme un décor. */
+.zv-chrome-btn:hover {
+  background: var(--hairline);
+}
+
+.zv-chrome-btn:focus-visible {
+  outline-offset: -2px;
+}
+
+/* ⚠️ HORS RELEVÉ : aucun bouton de chrome n'est jamais désactivé en
+ * production. Posé parce qu'un bouton grisé sans style se lit comme un bouton
+ * actif ; aucune couleur nouvelle n'est introduite. */
+.zv-chrome-btn[disabled] {
+  color: var(--label);
+  cursor: default;
+}
+
+.zv-chrome-btn[disabled]:hover {
+  background: var(--white);
+}
+
+/* Glyphes relevés, à reproduire tels quels :
+ *   · 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
+ *     `font-size` ci-dessus qui le dimensionne. */
+
+/* ─── Voile ─────────────────────────────────────────────────────────────
+ * Toujours l'encre de charte diluée, jamais un noir pur : la page est
+ * bleutée, un gris neutre y ferait un trou sale. Le voile n'existe que sous
+ * le seuil (cf. bloc mobile) — au-dessus, tiroir et feuille sont des colonnes,
+ * elles n'occultent rien. */
+
+.zv-scrim {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  background: color-mix(in oklab, var(--ink) 40%, transparent);
+}
+
+/* ─── Tiroir de navigation ──────────────────────────────────────────────*/
+
+.zv-drawer {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  /* `visibility` plutôt que `display` : elle sort le contenu du parcours
+   * clavier ET se transitionne, ce qui retient le panneau à l'écran le temps
+   * qu'il glisse dehors. En `display: none`, il disparaîtrait à mi-course. */
+  visibility: hidden;
+  transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.zv-drawer[data-open] {
+  visibility: visible;
+}
+
+/* Le voile du tiroir accompagne un panneau qui glisse : il se fond. Celui de
+ * la feuille de source apparaît net, faute de mouvement à accompagner. */
+.zv-drawer .zv-scrim {
+  opacity: 0;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.zv-drawer[data-open] .zv-scrim {
+  opacity: 1;
+}
+
+.zv-drawer__panel {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  display: flex;
+  width: 288px;
+  /* Le plafond en pourcentage garde toujours une bande de page visible
+   * derrière : un tiroir qui couvre tout l'écran ne se lit plus comme un
+   * tiroir, et l'utilisateur perd l'endroit où appuyer pour sortir. */
+  max-width: 86%;
+  flex-direction: column;
+  overflow-y: auto;
+  border-right: 1px solid var(--line);
+  background: var(--panel);
+  border-radius: 0;
+  /* Aucune ombre : c'est le voile qui fait le contraste. En ajouter une
+   * doublerait la séparation et salirait le bord. */
+  box-shadow: none;
+  transform: translateX(-100%);
+  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.zv-drawer[data-open] .zv-drawer__panel {
+  transform: translateX(0);
+}
+
+/* ⚠️ TENSION ASSUMÉE, à arbitrer. Les deux courbes ci-dessus sont celles du
+ * relevé — voile en cubic-bezier(.4,0,.2,1), panneau en ease-out, même durée.
+ * Leur asymétrie ne se voit pas, elle s'entend : le panneau arrive avant que
+ * le voile ait fini de se poser. Elles ne sont donc PAS la courbe unique
+ * --zv-easing que motion.css impose à la vitrine. Défendable (motion.css régit
+ * neuf animations de page, pas le chrome applicatif), mais c'est une divergence
+ * écrite ici plutôt qu'une variable empruntée en silence — d'autant que ce
+ * module doit rester utilisable sans motion.css.
+ * La coupure prefers-reduced-motion est déjà globale dans base.css : ne pas la
+ * reposer ici, elle neutralise ces deux transitions comme les autres. */
+
+.zv-drawer__close {
+  position: absolute;
+  top: 7px;
+  right: 8px;
+}
+
+/* Comportement attendu du composant, à conserver tel quel :
+ *   · role="dialog" aria-modal="true" aria-label="Navigation", et aria-hidden
+ *     qui reflète l'état fermé ;
+ *   · clic sur le voile ou touche Échap → fermeture ;
+ *   · à l'ouverture, `body { overflow: hidden }` RESTAURÉ à sa valeur
+ *     précédente à la fermeture, jamais remis à '' aveuglément : c'est ce qui
+ *     évite de casser une page qui gérait déjà son propre défilement ;
+ *   · l'état ouvert mémorise la ROUTE d'ouverture, pas un booléen — changer de
+ *     page referme alors le tiroir sans effet ni rendu en cascade. Le
+ *     composant a donc besoin de la route courante, pas d'une prop `open`.
+ * ⚠️ MANQUE en production, à combler côté composant : piège de focus dans le
+ * panneau et restitution du focus au bouton d'ouverture à la fermeture. */
+
+/* ─── Feuille de source citée ───────────────────────────────────────────
+ * ⚠️ RENOMMÉE : cette pièce s'appelait .zv-sheet. layout.css possède déjà
+ * .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
+ * 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
+ * zones : tête fixe, corps défilant, pied d'actions. */
+
+.zv-cite-panel {
+  display: flex;
+  height: 100dvh;
+  width: 392px;
+  flex: none;
+  flex-direction: column;
+  border-left: 1px solid var(--line);
+  /* Blanc, et non --panel : c'est une surface de lecture, pas du chrome. */
+  background: var(--white);
+}
+
+.zv-cite-panel__head {
+  display: flex;
+  /* `flex-start` et non `center` : un titre de document sur trois lignes ne
+   * doit pas faire descendre la croix au milieu du bloc. */
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--line);
+  padding: 18px 20px 14px;
+}
+
+.zv-cite-panel__title {
+  font-family: var(--font-display);
+  font-size: var(--app-h3);
+  line-height: 1.35;
+  font-weight: 500;
+  /* Un nom de fichier sans espace déborderait la colonne et pousserait la
+   * croix hors de l'écran. */
+  overflow-wrap: break-word;
+}
+
+/* Le corps est la seule zone qui défile : le fond gris l'enfonce d'un cran
+ * pour que la page citée s'y détache comme une feuille posée. */
+.zv-cite-panel__body {
+  flex: 1 1 0%;
+  overflow-y: auto;
+  background: var(--hairline);
+  padding: 18px;
+}
+
+.zv-cite-panel__foot {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-top: 1px solid var(--line);
+  padding: 14px 20px;
+}
+
+/* Fermeture par Échap, par le voile, par la croix, et automatiquement à chaque
+ * navigation. AUCUNE transition d'entrée ni de sortie, contrairement au
+ * tiroir : la feuille répond à un clic sur une citation, elle doit être là au
+ * moment où le regard y va.
+ * ⚠️ NON LIVRÉ : le kicker « SOURCE CITÉE » de la tête (citation.tsx:104) n'est
+ * dans aucun inventaire, et il n'est pas tranché s'il relève de la typographie
+ * (.zv-kicker, base.css) ou de ce module. Rien n'est inventé en attendant. */
+
+/* ─── Menu déroulant ────────────────────────────────────────────────────
+ * Ancré sous son déclencheur (.zv-select, forms.css), qui DOIT porter
+ * `position: relative`, sans quoi le menu se colle au coin de la page.
+ * L'enveloppe .zv-select-anchor (forms.css) le porte déjà : c'est elle qu'on
+ * pose autour d'un déclencheur .zv-select, et non le déclencheur lui-même. */
+
+.zv-menu {
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  min-width: 230px;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--white);
+  padding: 5px;
+  /* Seule ombre du chrome applicatif, et elle est justifiée : un menu flotte
+   * vraiment au-dessus de la page, contrairement à la colonne ou au tiroir.
+   * --shadow-card est trop courte pour ce tirage, --shadow-panel trop indigo :
+   * d'où --shadow-menu, qui existe pour ce seul usage. */
+  box-shadow: var(--shadow-menu);
+}
+
+.zv-menu__item {
+  display: block;
+  /* Les quatre déclarations qui suivent existent pour que l'item tienne aussi
+   * bien en <button> qu'en <div> : sans elles, le navigateur impose sa police,
+   * son fond gris, son cadre et un texte centré. */
+  width: 100%;
+  border: 0;
+  background: none;
+  text-align: left;
+  padding: 8px 11px;
+  font-family: var(--font-text);
+  font-size: var(--app-sm);
+  font-weight: 400;
+  color: var(--ink);
+  cursor: pointer;
+}
+
+.zv-menu__item:hover {
+  background: var(--hairline);
+}
+
+.zv-menu__item:focus-visible {
+  outline-offset: -2px;
+}
+
+.zv-menu__item--on,
+.zv-menu__item[aria-selected="true"] {
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 600;
+}
+
+/* ⚠️ 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. */
+.zv-menu__item--on:hover,
+.zv-menu__item[aria-selected="true"]:hover {
+  background: var(--hairline);
+}
+
+/* ⚠️ HORS RELEVÉ : aucun item désactivé n'existe en production. Même
+ * traitement que le bouton de chrome, sans couleur nouvelle. */
+.zv-menu__item[disabled],
+.zv-menu__item[aria-disabled="true"] {
+  color: var(--label);
+  cursor: default;
+}
+
+.zv-menu__item[disabled]:hover,
+.zv-menu__item[aria-disabled="true"]:hover {
+  background: none;
+}
+
+/* ⚠️ MANQUENT en production et NON comblés ici, car ce sont des comportements,
+ * pas du style : navigation au clavier (flèches, Origine/Fin), fermeture au
+ * clic extérieur, fermeture à Échap. Le CSS ci-dessus est prêt à les recevoir
+ * (aria-selected, :focus-visible) ; le composant doit les écrire. */
+
+/* ─── Fil d'Ariane ──────────────────────────────────────────────────────*/
+
+.zv-crumbs {
+  display: block;
+  margin-bottom: 14px;
+  font-family: var(--font-mono);
+  font-size: var(--mono-lg);
+  font-weight: 500;
+  /* Le fil porte des noms de dossier entiers : il a le droit de passer à la
+   * ligne, pas celui d'élargir la page. */
+  overflow-wrap: break-word;
+  color: var(--label);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* Même contre-ordre que .zv-sidelink : sans lui, le fil vire au bleu souligné
+ * dans toute page qui applique le style de lien éditorial. */
+.zv-crumbs:hover {
+  color: var(--label);
+  text-decoration: none;
+}
+
+.zv-crumbs__sep {
+  margin-inline: 4px;
+}
+
+/* Le dernier segment est plus sombre que le fil : c'est lui qu'on lit, le
+ * reste n'est qu'un chemin. Aucun état « segment courant » n'existe au relevé. */
+.zv-crumbs__seg {
+  color: var(--ink-2);
+}
+
+/* ─── Pagination ────────────────────────────────────────────────────────
+ * Deux formes relevées, et deux seulement : le rang centré d'un panneau
+ * (‹ p. 12 / 31 ›) et le pied de tableau (compte à gauche, « ‹ Précédent ·
+ * Suivant › » à droite).
+ *
+ * ⚠️ DOUBLON À TRANCHER, et il est tranché ici : data.css pose .zv-table-foot
+ * pour le MÊME nœud du DOM (repertoire-client.tsx:165) avec les mêmes valeurs.
+ * La pagination est de la navigation, pas de la donnée : la forme reste dans ce
+ * module, sous .zv-pager--foot, et data.css doit abandonner .zv-table-foot.
+ * .zv-pager--foot est un MODIFICATEUR : il se pose avec .zv-pager, jamais seul. */
+
+.zv-pager {
+  display: flex;
+  justify-content: center;
+  gap: 14px;
+  /* Décolle le rang des boutons du pied de feuille, où il est immédiatement
+   * suivi de deux actions pleine largeur. */
+  padding-bottom: 2px;
+  font-family: var(--font-mono);
+  font-size: var(--mono-lg);
+  font-weight: 500;
+  color: var(--muted);
+}
+
+/* `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
+ * nouvelle n'entre par cette porte. */
+.zv-pager__arrow,
+.zv-pager__rank,
+.zv-pager__step {
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  padding: 0;
+  cursor: pointer;
+}
+
+/* ⚠️ HORS RELEVÉ. La production n'a AUCUN état désactivé : les flèches sont
+ * identiques en première et en dernière page. Posé ici parce qu'une flèche
+ * qui ne fait rien et ne le dit pas se lit comme une panne. `pointer-events`
+ * n'est volontairement pas coupé : en aria-disabled, l'élément doit rester
+ * atteignable au clavier pour être annoncé. */
+.zv-pager__arrow[disabled],
+.zv-pager__arrow[aria-disabled="true"] {
+  color: var(--label);
+  cursor: default;
+}
+
+/* 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
+ * `padding` en raccourci annule le `padding-bottom: 2px` du rang de panneau,
+ * qui n'a pas de sens ici. */
+.zv-pager--foot {
+  justify-content: space-between;
+  align-items: center;
+  gap: 0;
+  padding: 12px 4px;
+  color: var(--label);
+}
+
+/* ⚠️ 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. */
+
+/* ─── Onglets ───────────────────────────────────────────────────────────
+ * ⚠️ AUCUNE MATIÈRE PREMIÈRE : pas un seul jeu d'onglets dans les écrans
+ * relevés. Ce module ne livre donc RIEN ici.
+ *
+ * Une rangée d'onglets se construit avec .zv-seg-group et .zv-seg
+ * (forms.css), qui portent déjà la grammaire d'un état actif. Ce module a
+ * d'abord défini une .zv-tabs — display flex, wrap, gouttière 6px — qui
+ * était la copie exacte de .zv-seg-group : deux noms pour le MÊME nœud du
+ * DOM, et c'est l'ordre de chargement qui aurait tranché. Elle est retirée.
+ *
+ * Un onglet SOULIGNÉ, lui, reste à faire : il suppose d'arbitrer la couleur
+ * et l'épaisseur du trait actif, ce qu'aucune source ne donne.
+ */
+
+/* ─── 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
+ * en défilement horizontal. C'est la faute la plus fréquente de ce gabarit. */
+
+.zv-scroll-y {
+  min-height: 0;
+  min-width: 0;
+  flex: 1 1 0%;
+  overflow-y: auto;
+}
+
+/* ⚠️ 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
+ * 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,
+ * et il remplace les barres flottantes de macOS/iOS par des barres permanentes
+ * qui mangent la colonne. */
+.zv-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+
+/* ─── Mobile ────────────────────────────────────────────────────────────
+ * Point de rupture unique du paquet. Les deux jeux de valeurs sont relevés
+ * (Mémoire les fait basculer à 1024px) ; seul le seuil est une convention.
+ * Sous ce seuil, tout ce qui se touche fait au moins --tap. */
+
+@media (max-width: 767px) {
+  /* 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 {
+    display: none;
+  }
+
+  .zv-topbar {
+    display: flex;
+  }
+
+  .zv-sidelink {
+    min-height: var(--tap);
+    padding-block: 11px;
+    font-size: var(--app-lg);
+  }
+
+  .zv-chrome-btn {
+    width: var(--tap);
+    height: var(--tap);
+  }
+
+  /* DÉRIVÉ, pas relevé, et c'est une conséquence de la ligne au-dessus : la
+   * croix passe de 26 à 40px et son bord gauche remonte à 48px du bord droit,
+   * au-delà de la réserve de 46px de la tête. 40 (bouton) + 8 (son décalage)
+   * + 8 (garde) : le logo cesse de passer dessous. */
+  .zv-drawer .zv-sidebar__head > :first-child {
+    padding-right: calc(var(--tap) + 16px);
+  }
+
+  .zv-scrim {
+    display: block;
+  }
+
+  .zv-drawer {
+    display: block;
+  }
+
+  /* La feuille se cale À RAS sous la barre.
+   *
+   * La production pose top: 53px pour une barre de 52 (citation.tsx:101
+   * 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
+   * plus son propre filet haut, le trait apparaissait doublé.
+   *
+   * 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 {
+    position: fixed;
+    inset-inline: 0;
+    top: var(--topbar-h);
+    bottom: 0;
+    z-index: 70;
+    height: auto;
+    width: auto;
+    border-left: 0;
+    border-top: 0;
+  }
+
+  .zv-cite-panel__body {
+    padding: 12px;
+  }
+
+  /* Le menu s'ouvre sous un déclencheur qui peut être près du bord droit :
+   * le plafond en vw l'empêche de sortir de l'écran et d'emporter la page. */
+  .zv-menu {
+    max-width: calc(100vw - 40px);
+  }
+
+  .zv-menu__item {
+    display: flex;
+    align-items: center;
+    min-height: var(--tap);
+  }
+
+  /* Les chevrons sont des glyphes d'une dizaine de pixels : sans ce retrait,
+   * la cible reste celle du caractère, impossible à viser au doigt. */
+  .zv-pager__arrow {
+    padding: 8px;
+  }
+
+  .zv-pager__rank {
+    padding-block: 8px;
+  }
+
+  .zv-pager--foot {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .zv-pager__step {
+    display: flex;
+    align-items: center;
+    min-height: var(--tap);
+  }
+}