@zevra/ui 0.1.0 → 0.2.0

package/src/data.css

@@ -0,0 +1,742 @@
+/* Zevra UI — données : tableaux, listes, cellules, métadonnées, citations
+ *
+ * CE QUE PORTE LE MODULE
+ *   le cadre de tableau et sa grille (.zv-table, .zv-table__head, .zv-row),
+ *   les trois registres de cellule, le dégroupage mobile (.zv-unwrap), la
+ *   liste sans colonnes, la métadonnée mono, le couple clé-valeur, la
+ *   pastille d'initiales, les deux utilitaires de troncature, l'étiquette de
+ *   catégorie, la puce de citation et la vignette de format.
+ *
+ * DÉPENDANCES
+ *   tokens.css — pour les seules variables qui y sont déclarées ;
+ *   base.css   — reset (box-sizing), body, et le :focus-visible global, dont
+ *                ce module ne redéfinit ni la couleur ni l'épaisseur.
+ *   Ni le reset, ni body, ni :root ne sont reposés ici.
+ *
+ * CE QUE LE MODULE NE PORTE PAS
+ *   la pagination (.zv-pager--foot, navigation.css) : le pied de tableau et
+ *   le pied de pagination sont LE MÊME nœud dans la source (un seul
+ *   conteneur flex, compteur à gauche, flèches à droite). La version de ce
+ *   module a été supprimée, elle faisait doublon — les emboîter donnait deux
+ *   space-between imbriqués et 24px de padding vertical.
+ *   Aucun contrôle de formulaire non plus : [disabled] et [aria-invalid]
+ *   n'ont pas d'objet ici, ils vivent dans forms.css.
+ *
+ * ÉCHELLES — comment lire les tailles ci-dessous
+ *   La source emploie des demi-pixels (9,5 / 10,5 / 11,5) que le paquet ne
+ *   nomme pas. Deux rabattements, appliqués systématiquement :
+ *   — registre TEXTE : plancher --app-sm (12px). Les paliers 10,5 et 11,5
+ *     relevés y remontent ; c'est une décision, pas un relevé.
+ *   — micro-labels et glyphes (label de colonne, initiales, vignette) :
+ *     l'échelle mono (--mono-lg 11 / --mono 10 / --mono-sm 9), employée là
+ *     comme MESURE, la famille restant celle que la règle déclare.
+ *   ⚠️ Toutes les tailles et tous les interlettrages mono de la source ont
+ *   été mesurés sur Menlo (chasse fixe). Le paquet rend la mono en Space
+ *   Grotesk, de largeur et de hauteur d'x différentes : ces valeurs ne sont
+ *   donc plus des relevés, ce sont des transpositions à revérifier à l'œil.
+ *
+ * ÉTATS
+ *   Le seul état interactif de la source est le survol (.zv-row, .zv-cite).
+ *   Ni sélection, ni ligne active, ni tri : c'est dit à chaque endroit
+ *   concerné plutôt que comblé par une valeur inventée.
+ */
+
+/* ─── Cadre de tableau ──────────────────────────────────────────────────
+ * Le tableau scrolle DANS son cadre : sans ce confinement, une colonne trop
+ * large fait scroller la page entière et le rail de navigation part avec.
+ * Angle vif et sans ombre : un tableau est une surface de travail, pas une
+ * carte éditoriale. Aucun rayon n'est posé — la valeur par défaut est déjà 0,
+ * il n'y a rien à annuler tant qu'on ne compose pas .zv-table avec .zv-card
+ * (ce que ce module déconseille : ce sont deux intentions différentes). */
+
+.zv-table {
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  background: var(--white);
+
+  /* --zv-cols est un PARAMÈTRE de grille, pas un token de marque : il n'a
+   * rien à faire dans tokens.css et n'y est pas. Il est déclaré ici, sur la
+   * classe qui l'expose, avec une valeur de repli ; l'appelant l'écrase en
+   * style inline sur ce même élément (le style inline l'emporte), et les
+   * enfants en héritent. Une seule déclaration pour l'en-tête ET les lignes :
+   * recopié aux deux endroits, on l'oublie à l'un des deux et les intitulés
+   * se décalent des valeurs sans que rien ne casse visiblement.
+   *
+   * Repli à une colonne souple bornée à 0 : sans gabarit, la rangée se
+   * dégrade en pile dont les cellules tronquent, au lieu de pousser le cadre.
+   *
+   * Gabarits relevés, à reprendre tels quels :
+   *   bibliothèque : 26px minmax(150px, 1fr) 78px 92px 170px 128px
+   *   répertoire   : minmax(190px, 1.4fr) 108px 118px minmax(150px, 1fr) 74px 96px
+   * Les colonnes souples sont en minmax(0|150px, …) : sans borne basse à 0 ou
+   * sans min-width sur la cellule, la troncature ne se déclenche jamais. */
+  --zv-cols: minmax(0, 1fr);
+}
+
+.zv-table__head {
+  display: grid;
+  /* Le repli est répété dans le var() : .zv-table__head et .zv-row servent
+   * aussi hors de .zv-table (rangée seule dans une carte), où rien ne
+   * déclarerait le paramètre. */
+  grid-template-columns: var(--zv-cols, minmax(0, 1fr));
+  align-items: center;
+  gap: 10px;
+  /* Filet plein (--line) contre le cheveu (--hairline) des lignes : c'est le
+   * seul repère qui sépare les intitulés des données, il doit être plus
+   * marqué qu'une séparation de lignes. */
+  border-bottom: 1px solid var(--line);
+  background: var(--panel);
+  padding: 9px 14px;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  /* 0,14em et non les 0,2em de .zv-mono : c'est l'interlettrage que le paquet
+   * emploie déjà pour les capitales denses (.zv-tag, .zv-src). À 0,2em, six
+   * intitulés de colonne ne tiennent plus dans leurs pistes. */
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--label);
+}
+
+/* En-tête d'un tableau posé DANS une carte : la carte porte déjà son filet,
+ * un second trait au-dessus ferait doublon. */
+.zv-table__head--inset {
+  border-bottom: 0;
+  padding: 7px 10px;
+}
+
+/* ⚠️ Aucun tri : les intitulés sont inertes, sans indicateur ni gestionnaire.
+ * Rien dans la source ne dit ce que trierait un clic ni comment se marque la
+ * colonne active — un en-tête triable serait une décision, pas un style. */
+
+/* ─── Ligne de données ─────────────────────────────────────────────────
+ * Une seule écriture de balisage pour deux mises en page : grille au-dessus
+ * du seuil, carte empilée en dessous (voir .zv-unwrap et le bloc responsive).
+ * Aucun zébrage nulle part dans la source — le survol est le seul repère de
+ * ligne, ce qui laisse le fond blanc porter la lecture. */
+
+.zv-row {
+  display: grid;
+  grid-template-columns: var(--zv-cols, minmax(0, 1fr));
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--hairline);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* La dernière ligne colle au cadre : son filet doublerait le trait de bordure
+ * et épaissirait le bas du tableau. C'est déjà ce que fait la source côté
+ * bibliothèque et côté import (`last:border-b-0`) ; seul le répertoire garde
+ * le filet. Le module tranche pour le retrait — ce n'est donc pas une
+ * correction contre la production, c'est l'alignement sur sa majorité. */
+.zv-row:last-child {
+  border-bottom: 0;
+}
+
+.zv-row:hover {
+  /* --panel sur --white : l'écart est faible (2 %), c'est le seul fond de
+   * survol dont dispose un système clair sans introduire un troisième gris.
+   * Ne pas y accrocher un signal qui doit être vu de loin. */
+  background: var(--panel);
+  /* La ligne est un lien : sans cette annulation, le survol souligne d'un
+   * coup tout le contenu de la rangée. */
+  text-decoration: none;
+}
+
+/* Le cadre du tableau est en overflow auto : un contour de focus posé à
+ * l'extérieur de la ligne y serait rogné sur les bords. On le rentre.
+ * (La couleur et l'épaisseur restent celles de base.css.) */
+.zv-row:focus-visible {
+  outline-offset: -2px;
+}
+
+/* ⚠️ Ni état sélectionné, ni :focus-within, ni ligne active : la source n'en
+ * contient aucun, et les inventer ferait apparaître un fond de plus dans un
+ * système qui n'en a que deux (blanc, survol). */
+
+/* ─── Cellules ─────────────────────────────────────────────────────────
+ * Trois registres seulement : le texte courant, le nombre, et l'intitulé qui
+ * remplace l'en-tête quand celui-ci disparaît. */
+
+.zv-cell {
+  /* Sans min-width: 0, une cellule de grille ne descend pas sous la largeur
+   * de son contenu : la troncature ne se déclenche pas et la ligne pousse le
+   * tableau au lieu de couper. C'est la panne la plus fréquente ici. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--app-sm);
+  color: var(--ink-2);
+}
+
+/* Cellule d'identité (nom de document, nom d'entité) : c'est elle qu'on lit
+ * en premier, elle monte d'un cran en taille, en graisse et en contraste.
+ * Sans cette variante, .zv-cell rendrait le titre au même poids que ses
+ * métadonnées et la ligne perdrait son point d'entrée. */
+.zv-cell--name {
+  font-size: var(--app);
+  font-weight: 500;
+  color: var(--ink);
+}
+
+/* Nombres et dates, alignés à droite.
+ *
+ * ⚠️ CORRECTION DE FOND. La version précédente comptait sur --font-mono pour
+ * aligner les colonnes de chiffres. Dans la source, --font-mono valait
+ * `ui-monospace, Menlo` — une vraie chasse fixe. Dans CE paquet, --font-mono
+ * vaut « Space Grotesk », une grotesque PROPORTIONNELLE : le 1 y est plus
+ * étroit que le 8, les unités ne tombent pas les unes sous les autres et
+ * l'alignement annoncé n'existe pas.
+ *
+ * Ce qui aligne réellement, c'est font-variant-numeric: tabular-nums : la
+ * fonte sert alors ses chiffres à chasse égale, quelle que soit sa famille.
+ * La famille mono est conservée ici pour le REGISTRE (valeur technique), pas
+ * pour l'alignement — les deux ne sont plus confondus. */
+.zv-cell--num {
+  /* Sans effet dans la grille ; utile sous 768px, où la cellule se retrouve
+   * enfant d'un .zv-unwrap devenu flex et ne doit pas se laisser comprimer. */
+  flex: none;
+  text-align: right;
+  font-family: var(--font-mono);
+  font-size: var(--mono-lg);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--muted);
+}
+
+/* Intitulé porté par la valeur : quand la ligne devient une carte, l'en-tête
+ * de colonnes n'existe plus et « 12 » ne veut plus rien dire. Il disparaît
+ * dès que la colonne reprend son titre (bloc responsive). */
+.zv-cell__label {
+  display: none;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--label);
+}
+
+/* Même logique pour l'unité en clair — « 42 docs » en carte, « 42 » en
+ * tableau. Reste INLINE : elle appartient à la valeur, pas à sa ligne. */
+.zv-cell__unit {
+  display: none;
+}
+
+/* ─── Dégroupage ───────────────────────────────────────────────────────
+ * La primitive structurelle du module : un groupe qui rassemble deux ou trois
+ * cellules pour l'empilement mobile, puis s'efface (display: contents) et
+ * rend ses enfants DIRECTEMENT à la grille du tableau. C'est ce qui permet
+ * d'écrire le balisage une seule fois pour deux mises en page — sans lui, il
+ * faudrait dupliquer la rangée et les deux copies divergeraient.
+ *
+ * Quatre enveloppes de ce type dans la source, sur trois écrans indépendants :
+ * c'est une primitive, pas une astuce locale.
+ *
+ * ⚠️ Ce que .zv-unwrap NE fait PAS : la fiche client emploie le mouvement
+ * inverse (`contents` sur mobile, flex au-dessus du seuil) pour défaire ses
+ * colonnes en pile ordonnée. Cette classe-ci pose `contents` en base : elle
+ * ne peut pas exprimer ce cas, et le prétendre serait faux. */
+
+.zv-unwrap {
+  display: contents;
+}
+
+/* ─── Liste sans colonnes ──────────────────────────────────────────────
+ * Même cadre que le tableau, mais rien à aligner : pas d'en-tête, pas de
+ * gabarit. Sert dès que les rangées n'ont pas de colonnes comparables. */
+
+.zv-list {
+  border: 1px solid var(--line);
+  background: var(--white);
+}
+
+.zv-list__row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 13px 18px;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.zv-list__row:last-child {
+  border-bottom: 0;
+}
+
+/* Rangée « envoi en cours ».
+ * ⚠️ La source porte ici un papier CHAUD (#FDFCF8) : une température, pas un
+ * accent. Le paquet n'a pas de fond chaud, et le plus proche (--panel) est à
+ * 2 % du blanc de la liste : ce fond est, en pratique, INVISIBLE. Il est
+ * conservé comme rappel discret, mais le signal « quelque chose est en train
+ * de se passer » doit être porté par la jauge (.zv-progress) ou par le
+ * libellé de la rangée — surtout pas par ce fond. */
+.zv-list__row--upload {
+  background: var(--panel);
+}
+
+.zv-list__main {
+  /* Colonne, et non bloc : le nom surmonte sa métadonnée. Sans direction
+   * explicite, les deux se suivaient sur une même ligne et la ligne de
+   * liste se lisait comme une phrase. */
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 0%;
+}
+
+.zv-list__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--app);
+  font-weight: 500;
+}
+
+/* ⚠️ Aucun état interactif dans la source : ni survol de rangée, ni sélection,
+ * ni focus. Une liste de fichiers n'y est pas cliquable — si elle le devient,
+ * c'est .zv-row qu'il faut employer, pas cette rangée-ci. */
+
+/* ─── Métadonnée mono ──────────────────────────────────────────────────
+ * Second registre mono du système, en BAS DE CASSE : taille de fichier, date,
+ * horodatage, compteur, latence. Ni capitales ni interlettrage — c'est
+ * exactement ce qui le distingue de .zv-tag et .zv-mono (capitales,
+ * 0,14–0,2em) : une date ou un nom de fichier passés en capitales espacées
+ * deviennent illisibles et s'alignent mal.
+ *
+ * tabular-nums pour la même raison qu'en .zv-cell--num : Space Grotesk est
+ * proportionnelle, et une colonne d'horodatages y danse d'une ligne à
+ * l'autre sans cette propriété. */
+
+.zv-meta {
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+}
+
+/* La source échelonne 10,5 / 10 / 11px. Les deux premiers se rabattent sur le
+ * même palier du paquet (--mono, 10px) : la variante basse est re-fondée sur
+ * --mono-sm (9px, plancher du paquet) pour garder un écart perceptible.
+ * C'est une décision assumée, pas une mesure. */
+.zv-meta--sm {
+  font-size: var(--mono-sm);
+}
+
+.zv-meta--md {
+  font-size: var(--mono-lg);
+}
+
+/* Métadonnée de second plan (taille d'un fichier en cours d'envoi, compteur
+ * d'en-tête) : elle recule d'un cran pour ne pas concurrencer le nom. */
+.zv-meta--quiet {
+  color: var(--label);
+}
+
+/* Plusieurs métadonnées sur une même ligne : le retour à la ligne est autorisé
+ * dès l'origine, une date et une taille ne tiennent pas côte à côte à 320px. */
+.zv-meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 10px;
+  row-gap: 4px;
+}
+
+/* ─── Clé-valeur ───────────────────────────────────────────────────────
+ * ⚠️ RÔLES REMIS DANS LE SENS DE LA SOURCE. La version précédente mettait la
+ * mono à droite et la césure à gauche ; la fiche client fait l'inverse : la
+ * CLÉ est en mono, en accent, et se coupe ; la VALEUR est en texte courant,
+ * en gris de label, et ne se coupe jamais. Inverser les deux change ce que
+ * l'œil balaie en premier dans une colonne de métadonnées. */
+
+.zv-kv {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: var(--app-sm);
+  font-weight: 500;
+  color: var(--ink-2);
+}
+
+.zv-kv__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.zv-kv__key {
+  /* Une clé longue doit se couper plutôt que pousser la valeur hors de la
+   * carte : ici on préfère la césure à la troncature, un libellé amputé de sa
+   * fin ne se devine pas. */
+  min-width: 0;
+  overflow-wrap: break-word;
+  font-family: var(--font-mono);
+  font-size: var(--mono-lg);
+  font-weight: 500;
+  /* L'accent, parce que la clé est le point d'entrée de la ligne. Les alias
+   * sémantiques de citation (--cite-ink & co.) n'existent pas dans ce paquet :
+   * c'est --accent, directement. */
+  color: var(--accent);
+}
+
+.zv-kv__val {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  color: var(--label);
+}
+
+/* Variante en pied de carte : le filet supérieur détache le récapitulatif du
+ * contenu qu'il résume. Valeurs de la fiche client (mt 12 / pt 10 / corps
+ * 11px / graisse 400). Le corps 11px n'a pas de palier texte dans le paquet,
+ * dont l'échelle s'arrête à --app-sm (12px) : rabattu, et dit. */
+.zv-kv--foot {
+  margin-top: 12px;
+  border-top: 1px solid var(--hairline);
+  padding-top: 10px;
+  font-size: var(--app-sm);
+  font-weight: 400;
+  color: var(--muted);
+}
+
+/* Variante en grille (métadonnées d'une source citée) : deux colonnes des DEUX
+ * côtés du seuil — ce sont quatre valeurs courtes, les empiler ferait une
+ * colonne inutilement longue. Le libellé passe au-dessus de la valeur. */
+.zv-kv--grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 14px;
+  row-gap: 8px;
+  font-size: var(--app-sm);
+}
+
+.zv-kv--grid .zv-kv__row {
+  display: block;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
+/* En grille, la clé redevient un label de colonne : capitales, plus petit,
+ * gris de label — et non plus l'accent de la variante en ligne. */
+.zv-kv--grid .zv-kv__key {
+  display: block;
+  margin-bottom: 2px;
+  font-size: var(--mono-sm);
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--label);
+}
+
+/* La valeur peut se couper ici : dans une case de 50 % de largeur, un
+ * nowrap déborderait de sa colonne. */
+.zv-kv--grid .zv-kv__val {
+  white-space: normal;
+}
+
+/* ─── Pastille d'initiales ─────────────────────────────────────────────
+ * CARRÉE, jamais ronde : le rond est un usage de réseau social, l'encre et le
+ * papier posent des blocs. La teinte dit la NATURE de l'entité, elle n'est pas
+ * décorative — la changer, c'est changer le sens.
+ *
+ * 9,5px dans la source. Le paquet ne descend sous 12px que sur son échelle
+ * mono : --mono-sm (9px) est employé ici comme MESURE, la pastille restant
+ * rendue dans la famille de texte héritée. */
+
+.zv-avatar {
+  display: flex;
+  width: 26px;
+  height: 26px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--mono-sm);
+  font-weight: 600;
+}
+
+/* Puce d'organisation, dans le chrome : une taille en dessous pour ne pas
+ * peser plus que le nom qu'elle accompagne. */
+.zv-avatar--sm {
+  width: 22px;
+  height: 22px;
+}
+
+.zv-avatar--accent {
+  background: var(--accent);
+  color: var(--white);
+}
+
+.zv-avatar--ink {
+  background: var(--ink-2);
+  color: var(--white);
+}
+
+/* Défaut (société, confrère) : sans aplat, pour que les pastilles pleines
+ * restent l'exception et gardent leur valeur de signal. */
+.zv-avatar--soft {
+  border: 1px solid var(--line);
+  background: var(--hairline);
+  color: var(--ink-2);
+}
+
+/* Règles d'initiales, à respecter côté appelant. Il y en a DEUX, et les
+ * confondre change le rendu :
+ *   — .zv-avatar (26px, entité du répertoire) : préfixes « M. | Me | SARL |
+ *     SCI | SA » retirés, découpe sur [espace ou &], AUCUN repli ;
+ *   — .zv-avatar--sm (22px, organisation dans le chrome) : deux mots au plus,
+ *     mots-outils écartés (« cabinet », « étude », « office », « selarl »,
+ *     « scp », « et », « de », « du », « des », « la », « le », « les »),
+ *     repli sur « · » quand rien ne sort — sans ce repli, une pastille vide
+ *     passe pour un défaut d'affichage.
+ * Prescrire la seconde pour la première change les initiales du répertoire. */
+
+/* ─── Troncature ───────────────────────────────────────────────────────
+ * Deux comportements, jamais interchangeables : couper, ou revenir à la ligne. */
+
+/* Couper : réservé à ce qui reste identifiable amputé (titres, noms d'entité)
+ * ET à ce qui est récupérable ailleurs. ⚠️ Ne marche QUE si le parent porte
+ * min-width: 0 (ou si la colonne est en minmax(0, 1fr)) : sans cela, la boîte
+ * ne descend pas sous son contenu, rien n'est coupé et la grille est poussée.
+ * Livré seul, c'est un utilitaire qui ne marche pas. */
+.zv-trunc {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Revenir à la ligne : tout ce qui ne se devine pas coupé — adresses e-mail,
+ * noms de fichiers, jetons, messages d'erreur. Perdre la fin d'un message
+ * d'erreur, c'est perdre l'incident. */
+.zv-break {
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
+/* ─── Étiquette de catégorie ───────────────────────────────────────────
+ * Étiquette NON porteuse d'alerte : nature d'entité, matière, mot-clé. À ne
+ * pas confondre avec le badge d'état (feedback.css), qui porte une couleur
+ * sémantique, ni avec .zv-tag (components.css : mono capitales, sans fond) qui est
+ * un kicker éditorial. Le fond hairline suffit : une catégorie n'a pas à
+ * crier.
+ *
+ * 10,5 puis 11px dans la source : deux micro-labels, rabattus sur --mono et
+ * --mono-lg pris comme mesures (la famille reste celle du texte). */
+
+.zv-chip {
+  display: inline-block;
+  background: var(--hairline);
+  padding: 3px 9px;
+  font-size: var(--mono);
+  font-weight: 600;
+  color: var(--ink-2);
+}
+
+/* Valeur technique dans une étiquette (date normalisée, référence) : la mono
+ * sans capitales, comme .zv-meta. */
+.zv-chip--mono {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Variante à contour : employée quand les étiquettes sont posées sur une carte
+ * blanche, où le fond hairline ne se détacherait plus assez. */
+.zv-chip--outline {
+  border: 1px solid var(--line);
+  background: none;
+  padding: 4px 10px;
+  font-size: var(--mono-lg);
+  font-weight: 500;
+}
+
+.zv-chip-row {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 6px;
+}
+
+/* ─── Citation ─────────────────────────────────────────────────────────
+ * Référence cliquable, insérée dans le fil du texte ou groupée en pied de
+ * réponse ; elle ouvre la feuille de source. Fond, filet et encre sont ceux
+ * de l'accent (--accent-soft / --accent-line / --accent) : le paquet ne
+ * déclare pas d'alias sémantique de citation, et en inventer un ferait un
+ * token de plus qu'aucun test n'accepterait. */
+
+.zv-cite {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 100%;
+  border: 1px solid var(--accent-line);
+  background: var(--accent-soft);
+  color: var(--accent);
+  padding: 2px 8px;
+  /* La puce est insérée au fil d'un paragraphe : sans ce recalage elle pend
+   * sous la ligne de base et hache l'interligne. */
+  vertical-align: 1px;
+  font-family: var(--font-mono);
+  font-size: var(--mono-lg);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  /* nowrap l'emporte tant qu'on est au-dessus du seuil ; overflow-wrap est
+   * posé d'avance pour le passage en white-space: normal du bloc mobile. */
+  overflow-wrap: break-word;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.zv-cite:hover {
+  border-color: var(--accent);
+}
+
+.zv-cite-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+/* ⚠️ Aucun état « source déjà ouverte » : la puce ne se marque pas quand sa
+ * feuille est affichée, on ne sait pas laquelle on lit dès qu'il y en a
+ * plusieurs. À trancher, pas à combler au hasard.
+ * ⚠️ En production c'est un <span onClick> : inatteignable au clavier. Le
+ * rendre focusable côté appelant (<button>) suffit à lui donner le contour de
+ * base.css — c'est la correction à faire, pas un style à ajouter ici.
+ * ⚠️ Recoupe .zv-src (components.css : mono capitales, fond blanc, filet
+ * --accent-line, rayon 4px) : même rôle éditorial, aucune valeur commune. La
+ * version applicative est remplie et à angle vif. Fusion ou dédoublement
+ * assumé : à arbitrer, ce module ne tranche pas seul. */
+
+/* ─── Vignette de format ───────────────────────────────────────────────
+ * ⚠️ HORS CHARTE, ET ASSUMÉ : --fmt-pdf et --fmt-docx sont le rouge Acrobat
+ * et le bleu Word, pas --err ni --accent. Deux relevés indépendants les codent
+ * à l'identique — c'est une intention (reconnaître le format d'un coup d'œil),
+ * pas une dérive ; tokens.css les déclare et n'en autorise pas d'autre usage.
+ * ⚠️ La source pose 7,5px, sous le plancher du paquet (--mono-sm, 9px).
+ * Rabattu sur ce plancher : la vignette grossit d'un pixel et demi, ce qui
+ * n'est PAS le relevé — à revoir à l'œil sur une rangée dense. Réservé à deux
+ * ou quatre caractères en capitales, jamais à du texte.
+ * L'interlettrage reste à 0,06em et non aux 0,14em du reste des capitales :
+ * sur quatre caractères dans 30px de large, 0,14em déborde de la vignette.
+ * Règle de choix relevée : DOCX si le type MIME contient « word », PDF sinon. */
+
+.zv-filetype {
+  flex: none;
+  padding: 2px 5px;
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: var(--mono-sm);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--white);
+}
+
+.zv-filetype--pdf {
+  background: var(--fmt-pdf);
+}
+
+.zv-filetype--docx {
+  background: var(--fmt-docx);
+}
+
+/* ─── Sous 768px ───────────────────────────────────────────────────────
+ * Point de rupture unique de la charte. Les lignes cessent d'être des lignes :
+ * une grille de six colonnes à 375px produit six colonnes illisibles, ou un
+ * débordement horizontal de la page. Le balisage, lui, ne change pas — c'est
+ * .zv-unwrap qui rend l'inversion possible.
+ *
+ * ⚠️ La source coupe à 1024px (lg de Tailwind), pas à 768 : entre les deux,
+ * l'application affichera des cartes là où la source affiche encore un
+ * tableau. C'est la charte qui tranche, mais les gabarits de colonnes ont été
+ * réglés pour 1024 et méritent une vérification à 800px. */
+
+@media (max-width: 767px) {
+  /* Des intitulés de colonnes sans colonnes ne veulent rien dire : ce sont les
+   * valeurs qui reprennent leur étiquette (.zv-cell__label). */
+  .zv-table__head {
+    display: none;
+  }
+
+  /* stretch, pas flex-start : c'est ce que fait la source (aucun items-* au
+   * répertoire, items-stretch à l'import). Avec flex-start, tout enfant
+   * direct qui n'est pas une enveloppe se rétracte à sa largeur de contenu. */
+  .zv-row {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 7px;
+    padding-block: 12px;
+  }
+
+  /* Le groupe redevient une boîte : ses deux ou trois cellules tiennent sur
+   * une même ligne au lieu de s'empiler chacune sur la sienne.
+   * flex-wrap: wrap n'est pas optionnel — deux des quatre enveloppes de la
+   * source passent à la ligne, et sans lui la rangée taille + date + statut
+   * déborde de la carte à 320px, c'est-à-dire exactement le défaut que le
+   * passage en carte devait supprimer.
+   * ⚠️ La gouttière est arbitrée : la source en emploie trois (6, 10, 12px).
+   * 10px est la valeur médiane et la plus fréquente, pas une mesure unique. */
+  .zv-unwrap {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 10px;
+    row-gap: 4px;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .zv-cell__label {
+    display: inline-block;
+  }
+
+  /* La source ne pose PAS de marge sur l'étiquette : elle rend la CELLULE
+   * flex, intitulé à gauche et valeur à droite
+   * (tableau-de-bord/page.tsx:120). Sans cela, « TAILLE » vient se coller à
+   * « 2,4 Mo » et les deux se lisent comme un seul mot.
+   * `:has()` cible les seules cellules qui portent une étiquette — les
+   * autres gardent leur flux. */
+  .zv-cell:has(.zv-cell__label) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  /* Inline, et pas inline-block : « 42 docs » doit rester un seul mot visuel
+   * collé à sa valeur. */
+  .zv-cell__unit {
+    display: inline;
+  }
+
+  .zv-list__row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding: 12px 14px;
+  }
+
+  /* Clé et valeur empilées : côte à côte à 320px, elles se chevauchent dès que
+   * le libellé dépasse trois mots. */
+  .zv-kv__row {
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  /* Un libellé long ne tient pas sur une ligne à cette largeur : les
+   * étiquettes passent en plusieurs rangées plutôt que de déborder. */
+  .zv-chip-row {
+    flex-wrap: wrap;
+  }
+
+  /* Une référence complète ne tient pas en une ligne sur un écran de 320px :
+   * sans césure autorisée, la puce déborde de sa colonne. */
+  .zv-cite {
+    white-space: normal;
+  }
+}