@zevra/ui 0.1.0 → 0.2.0

package/src/feedback.css

@@ -0,0 +1,566 @@
+/* Zevra UI — retours d'état : bandeaux, étiquettes, pastilles, absence,
+ * travail en cours, curseur de flux.
+ *
+ * Dépend de tokens.css et de base.css (reset, fonte de corps, focus clavier
+ * global). Indépendant des autres modules.
+ *
+ * Tokens réellement employés ici, tous vérifiés dans tokens.css :
+ *   couleurs — --ink, --ink-2, --muted, --label, --line, --hairline, --white,
+ *              --accent, --accent-line, --accent-soft,
+ *              --ok, --ok-soft, --ok-line,
+ *              --warn, --warn-soft, --warn-line, --warn-ink,
+ *              --err, --err-soft, --err-line ;
+ *   typo     — --font-display, --font-mono, --app, --app-sm,
+ *              --app-h2, --mono, --mono-sm.
+ * Aucun autre. Il n'existe PAS de --ink-3…--ink-7, pas de --line-soft, pas de
+ * --line-firm, pas d'échelles --text-* ni --mono-xs/--mono-2xs : une version
+ * antérieure de cet en-tête les déclarait en dépendance, ce qui rendait le
+ * module inauditable (rien ne disait quelle valeur portait --ink-6) et l'aurait
+ * rendu sans couleur ni taille chez le consommateur. Les valeurs relevées qui
+ * tombaient sur ces noms sont rabattues sur les paliers du paquet, et chaque
+ * rabattement qui déplace le rendu est écrit en commentaire à l'endroit exact
+ * où il est fait.
+ *
+ * Relevé sur l'application Mémoire, en production. Une différence de méthode
+ * avec les modules de vitrine : Mémoire est écrite mobile-first et bascule à
+ * `lg` (1024px), alors que la charte ne connaît qu'UN point de rupture, à
+ * 768px. Les valeurs desktop sont donc posées en base et les valeurs mobiles
+ * regroupées en fin de fichier — le rendu desktop est identique au relevé, le
+ * rendu mobile arrive 256px plus tôt. C'est délibéré : deux ruptures dans un
+ * système qui en annonce une seule est une dette qui se paie sur chaque app.
+ *
+ * ÉCHELLE DE TEXTE — la production emploie des demi-pixels (11,5 / 12,5 /
+ * 13,5) que le paquet a rationalisés en trois paliers (12 / 13 / 14). Le
+ * rabattement retenu ici conserve les ÉCARTS du relevé plutôt que la valeur
+ * absolue : 11,5 et 12,5 → --app-sm (12), 13,5 → --app (13), 14 → --app-lg.
+ * Deux tailles distinctes d'un pixel dans la source restent donc distinctes
+ * d'un pixel ; c'est ce qui fait qu'un bandeau ample reste plus grand qu'un
+ * bandeau courant, des deux côtés du seuil.
+ *
+ * Rien ici n'est interactif : pas de bouton de fermeture, pas de survol, pas
+ * de champ. Les états :hover / :focus-visible / [disabled] / [aria-invalid]
+ * n'ont donc aucune cible dans ce module — ils appartiennent aux boutons
+ * (components.css) et aux champs (forms.css). Le focus clavier global de
+ * base.css suffit au bandeau qu'on rend focusable pour l'annoncer.
+ */
+
+/* ─── Bandeaux d'état ───────────────────────────────────────────────────
+ * Filet + fond atténué + texte du même ton : la grammaire la plus
+ * systématique du relevé, appliquée à l'identique six fois. Elle tient
+ * parce que les trois valeurs viennent d'une même famille de tokens ; la
+ * recomposer à la main avec des opacités produit six bandeaux différents.
+ *
+ * Le ton est OBLIGATOIRE : `.zv-alert` seule hérite d'un filet en
+ * currentColor, c'est-à-dire un trait d'encre autour d'un fond blanc.
+ * Toujours l'accompagner de --info / --ok / --warn / --err / --dash. */
+
+.zv-alert {
+  border: 1px solid;
+  padding: 12px 16px;
+  /* 12,5px relevé → palier 12. La valeur mobile (13,5 → 13) est en fin de
+   * fichier : les cinq bandeaux d'authentification GROSSISSENT sous le
+   * seuil, ils ne rétrécissent pas. */
+  font-size: var(--app-sm);
+  line-height: 1.55;
+  font-weight: 500;
+  /* Un bandeau porte souvent un message d'erreur brut, non maîtrisé :
+   * nom de fichier à rallonge, identifiant, chemin. Sans coupure, il pousse
+   * la page en défilement horizontal. */
+  overflow-wrap: break-word;
+  /* Angle vif, comme au relevé.
+   * ⚠️ NON ARBITRÉ EN DA, et le module ne tranche pas à sa place : le
+   * `border-radius: 0` posé ici et sur .zv-badge est la valeur relevée, pas
+   * une « signature de la couche applicative ». Il entre en contradiction
+   * directe avec .zv-empty__action, qui renvoie au .zv-btn de
+   * components.css et donc à --r-btn (5px) : un écran vide affichera un
+   * bouton arrondi au milieu de blocs à angle vif. La règle doit monter
+   * dans DECISIONS.md ou tomber — elle ne peut pas rester implicite dans
+   * quatre modules. */
+  border-radius: 0;
+}
+
+/* Information — le seul ton relevé en bandeau de bas de page (garanties,
+ * explication d'un écran). */
+.zv-alert--info {
+  border-color: var(--accent-line);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+/* Avertissement — le texte est --warn-ink, JAMAIS --warn : l'ambre plein
+ * sur fond ambre atténué passe sous le seuil de contraste. C'est la seule
+ * famille asymétrique du système, et l'erreur la plus facile à commettre. */
+.zv-alert--warn {
+  border-color: var(--warn-line);
+  background: var(--warn-soft);
+  color: var(--warn-ink);
+}
+
+/* Erreur — à porter avec role="alert" côté balisage, sinon le message
+ * apparaît sans être annoncé aux lecteurs d'écran : c'est précisément le
+ * seul contenu de l'écran qu'on ne peut pas se permettre de rater. */
+.zv-alert--err {
+  border-color: var(--err-line);
+  background: var(--err-soft);
+  color: var(--err);
+}
+
+/* Succès — RELEVÉ, pleine largeur, deux fois : reset-password-card.tsx:90 et
+ * forgot-password-card.tsx:60, en `border-ok-line bg-ok-soft px-3 py-[10px]
+ * text-[13.5px]/[1.6] font-medium text-ok`. (Une version antérieure de ce
+ * commentaire le disait « extrapolé » : c'était faux, les deux écrans de
+ * réinitialisation n'avaient pas été relus. Le gabarit du relevé est celui
+ * de --sm, à composer avec.) */
+.zv-alert--ok {
+  border-color: var(--ok-line);
+  background: var(--ok-soft);
+  color: var(--ok);
+}
+
+/* Variante « aveu d'ignorance » : ce que le système n'a PAS trouvé. Le
+ * pointillé sans fond dit qu'il n'y a rien derrière — un fond plein ferait
+ * lire une réponse là où il n'y en a pas. Avec la zone de dépôt, c'est le
+ * seul pointillé de toute la couche applicative : le garder rare, c'est ce
+ * qui lui laisse son sens.
+ *
+ * ⚠️ DEUX PERTES DE TEINTE, assumées et signalées plutôt que glissées :
+ * 1. le texte est `#6E6A61` en production (chat-client.tsx:265), un gris
+ *    CHAUD — le seul du fil de réponse. Le paquet n'a pas de neutre chaud :
+ *    --muted (#5a637a) est bleuté. Le rabattement est arrêté, mais il
+ *    REFROIDIT ce texte, et il le range sous le même token que les gris
+ *    froids du relevé (#6B7488 du pager, du bouton d'icône). Deux familles
+ *    de teinte finissent donc sur --muted : c'est une fusion, pas une
+ *    nuance. Le jour où la DA veut retrouver ce chaud, il faut un token
+ *    dédié dans tokens.css — pas une valeur en dur ici.
+ * 2. le filet est `#C9CEDD` en production, un gris froid neutre ; --accent-line
+ *    (#c9d6f5) est le seul filet du paquet à cette clarté, mais il est
+ *    légèrement indigo. Écart perceptible sur un pointillé large. */
+.zv-alert--dash {
+  border: 1px dashed var(--accent-line);
+  background: none;
+  padding: 10px 14px;
+  font-size: var(--app);
+  line-height: 1.55;
+  color: var(--muted);
+}
+
+/* Gabarit compact (`px-3 py-[9px]`) — relevé quatre fois : login-card:207,
+ * bibliotheque-client:210, branding-card:219, billing-card:164. Deux d'entre
+ * eux sont des alertes de PAGE, pas de panneau : ce gabarit n'est donc pas
+ * « le bandeau dans un cadre », c'est simplement le bandeau resserré. La
+ * carte de suppression (delete-org-card:39) n'a aucun bandeau — l'histoire
+ * qui justifiait ces valeurs dans une version antérieure était inventée, les
+ * valeurs, elles, sont bonnes. */
+.zv-alert--sm {
+  padding: 9px 12px;
+}
+
+/* Gabarit ample : le message d'incident qui REMPLACE une réponse attendue
+ * (GPU en charge). Il occupe la place du contenu manquant, d'où le corps plus
+ * grand. Source chat-client.tsx:308 : `px-4 py-[14px] text-[13.5px]/[1.6]
+ * lg:px-5 lg:py-4` — le padding change au seuil, la TAILLE non (13,5px des
+ * deux côtés). D'où l'absence de font-size dans le bloc mobile. */
+.zv-alert--lg {
+  padding: 16px 20px;
+  font-size: var(--app);
+  line-height: 1.6;
+}
+
+/* ⚠️ DEUX ARBITRAGES de couleur portés ici, pas glissés sous le tapis :
+ * 1. le filet vert est écrit `border-ok/30` en production (un color-mix à
+ *    30 %) alors que --ok-line existe dans le paquet et n'y sert jamais.
+ *    Retenu : --ok-line. Le rendu diffère — le color-mix laissait
+ *    transparaître --ok-soft, le token est un vert franc.
+ * 2. l'ambre de production est #FFF6E3 / #EBD9AE (teintes écrites en dur
+ *    dans deux tables), le token du paquet #faf3e2 / #ebdcb4. Retenu : les
+ *    tokens. Écart visible à l'œil sur les bandeaux et badges WARN. */
+
+/* ─── Étiquettes d'état ─────────────────────────────────────────────────
+ * Rôle d'une entité, niveau d'un log, état d'un service, issue d'un envoi :
+ * un seul objet, trois gabarits, cinq tons. Le mono en petit corps est ce
+ * qui les distingue d'un texte — une étiquette se lit d'un coup d'œil, elle
+ * ne se lit pas en phrase.
+ *
+ * Pas de text-transform : les libellés sont écrits en capitales à la source.
+ * Le laisser au contenu évite qu'un libellé accentué (« INDEXÉ ») soit
+ * transformé différemment selon la locale du navigateur.
+ *
+ * Ne pas confondre avec .zv-pill / .zv-tag / .zv-src de components.css :
+ * ceux-là appartiennent à la vitrine (pastille pleine indigo, micro-label
+ * espacé, puce de source). Aucun nom n'est repris ici. */
+
+.zv-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  /* En cellule de grille, une étiquette étirée sur toute la colonne cesse
+   * de se lire comme une étiquette : elle se cale à gauche sur sa largeur. */
+  justify-self: start;
+  border: 1px solid;
+  padding: 3px 8px;
+  font-family: var(--font-mono);
+  font-size: var(--mono); /* 10px relevé, palier exact du paquet */
+  font-weight: 600;
+  /* Un état ne se coupe jamais en deux lignes : « EN CHARGE » sur deux
+   * lignes se lit comme deux états. */
+  white-space: nowrap;
+  border-radius: 0; /* même arbitrage non tranché que .zv-alert, voir plus haut */
+}
+
+/* Gabarit micro : niveau de log en tête de ligne, badge de la coque. À
+ * cette taille la graisse monte et les lettres s'espacent, sinon les
+ * capitales se referment et INFO/WARN ne se distinguent plus en diagonale.
+ * 8,5px relevé → --mono-sm (9px), le plus petit palier du paquet. */
+.zv-badge--micro {
+  padding: 2px 6px;
+  font-size: var(--mono-sm);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+
+/* Gabarit état de service (OK / CHARGE). ⚠️ 9,5px au relevé, rabattu sur
+ * --mono (10px) : il retombe donc sur la MÊME taille que .zv-badge, et ne
+ * s'en distingue plus que par l'interlettrage. C'est la conséquence assumée
+ * de l'échelle à trois paliers ; le gabarit est conservé pour garder un nom
+ * à cet usage, pas parce qu'il change encore de corps. */
+.zv-badge--state {
+  padding: 3px 8px;
+  font-size: var(--mono);
+  letter-spacing: 0.06em;
+}
+
+/* Tons — triplets relevés tels quels dans les tables de teintes. */
+
+/* Neutre : `border-line bg-hairline text-[#4A5468]` (repertoire-client:25).
+ * Le filet est bien --line, pas un filet adouci : une version antérieure y
+ * avait substitué un token intermédiaire sans le dire. #4A5468 est le neutre
+ * intermédiaire du paquet, --ink-2. */
+.zv-badge--neutre {
+  background: var(--hairline);
+  border-color: var(--line);
+  color: var(--ink-2);
+}
+.zv-badge--accent {
+  background: var(--accent-soft);
+  border-color: var(--accent-line);
+  color: var(--accent);
+}
+.zv-badge--ok {
+  background: var(--ok-soft);
+  border-color: var(--ok-line);
+  color: var(--ok);
+}
+.zv-badge--warn {
+  background: var(--warn-soft);
+  border-color: var(--warn-line);
+  color: var(--warn-ink);
+}
+.zv-badge--err {
+  background: var(--err-soft);
+  border-color: var(--err-line);
+  color: var(--err);
+}
+
+/* Étiquette à pastille (« RÉSEAU PRIVÉ · IA DÉDIÉE », « TOUT
+ * OPÉRATIONNEL »). La pastille reprend la couleur du texte plutôt qu'un ton
+ * réglé à part : c'est ce que fait le relevé, et cela garantit que les deux
+ * ne divergent jamais quand on change de ton.
+ * ⚠️ Un jour où l'on posera une pastille sur .zv-badge--warn, currentColor
+ * donnera --warn-ink (l'ambre sombre) et non --warn : cas absent du relevé,
+ * à trancher avec la DA plutôt qu'à corriger ici en douce. */
+.zv-badge--dot .zv-dot {
+  background: currentColor;
+}
+
+/* ─── Pastilles d'état ──────────────────────────────────────────────────
+ * Seule ou dans une étiquette. Ronde par défaut ; CARRÉE dans les bandeaux
+ * de provenance qui coiffent une réponse. La distinction est tenue sur cinq
+ * occurrences : ce n'est pas un oubli de `rounded-full`, c'est la marque
+ * que le point désigne une SOURCE et non un ÉTAT. Ne pas l'uniformiser. */
+
+.zv-dot {
+  width: 6px;
+  height: 6px;
+  /* Sans flex: none la pastille s'écrase quand le libellé voisin est long —
+   * elle devient un ovale, et l'état n'est plus lisible. */
+  flex: none;
+  border-radius: 9999px;
+  /* Repli gris : un statut inconnu (nouvel état ajouté côté serveur, jamais
+   * déployé côté interface) doit rester neutre. Le teindre en vert par
+   * défaut ferait passer un échec pour un succès. */
+  background: var(--label);
+}
+
+/* Pastille de provenance : carrée. Seule dérogation au rond de tout le
+ * module. */
+.zv-dot--square {
+  border-radius: 0;
+}
+
+/* Dans une étiquette de la coque ou une garantie : plus discrète. */
+.zv-dot--sm {
+  width: 5px;
+  height: 5px;
+}
+
+/* Devant un libellé de service ou une phrase de travail en cours : la
+ * pastille porte seule l'information, elle grossit d'un pixel. */
+.zv-dot--lg {
+  width: 7px;
+  height: 7px;
+}
+
+/* Correspondance statut → couleur, relevée telle quelle. Elle vit en CSS et
+ * pas dans chaque app : c'est la seule façon que « reçu » et « OCR en
+ * cours » restent du même ambre partout. */
+.zv-dot--recu,
+.zv-dot--ocr {
+  background: var(--warn);
+}
+.zv-dot--indexation {
+  background: var(--accent);
+}
+.zv-dot--indexe,
+.zv-dot--ok {
+  background: var(--ok);
+}
+.zv-dot--erreur {
+  background: var(--err);
+}
+
+/* ─── Statut en clair ───────────────────────────────────────────────────
+ * Pastille + libellé, sans cadre — contrairement à l'étiquette. Le cadre
+ * est réservé à ce qui classe (rôle, niveau) ; le statut, lui, se lit dans
+ * le fil de la ligne. Le message d'erreur REMPLACE le libellé quand il y en
+ * a un : l'utilisateur veut lire la cause, pas le mot « Erreur ».
+ *
+ * Source : bibliotheque-client.tsx:259, `flex min-w-0 items-center
+ * gap-[6px] text-[11.5px] font-medium text-[#3A4256] lg:min-w-[auto]`, avec
+ * un `<span className="truncate">` à l'intérieur et AUCUNE variante `lg:`
+ * sur ce span. Autrement dit : le libellé tronque, et il tronque SOUS le
+ * seuil, là où min-width vaut 0 ; au-dessus, la colonne reprend sa largeur
+ * naturelle. Le fichier est desktop-first, donc `min-width: auto` est ici et
+ * `min-width: 0` dans le bloc mobile — l'inverse exact de ce qu'une version
+ * antérieure de ce module posait, qui faisait passer le libellé à la ligne
+ * sur téléphone et décalait la pastille de 5px vers le bas. Rien de tout
+ * cela n'existe en production. */
+
+.zv-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  /* Valeur initiale, écrite pour être lue : au-dessus du seuil la colonne
+   * n'est pas contrainte, le libellé la pousse — c'est le `lg:min-w-[auto]`
+   * du relevé. La troncature n'opère réellement que sous le seuil. */
+  min-width: auto;
+  font-size: var(--app-sm); /* 11,5px relevé → palier 12 */
+  font-weight: 500;
+  color: var(--ink-2); /* #3A4256 relevé → neutre intermédiaire du paquet */
+}
+
+/* Le libellé tronque des DEUX côtés du seuil : la classe `truncate` de la
+ * source n'a pas de variante responsive. */
+.zv-status__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ─── Absence ───────────────────────────────────────────────────────────
+ * DEUX objets distincts, à ne surtout pas fusionner :
+ * — la ligne d'absence, quand un filtre ne ramène rien : la collection
+ *   existe, seul le filtre est trop étroit. Elle vit DANS le cadre, à la
+ *   place des lignes, pour que l'en-tête de tableau reste visible ;
+ * — l'écran d'absence, quand la collection est vide : il remplace le
+ *   tableau entier, porte un titre et l'action qui la remplira.
+ * Les confondre donne soit un écran de bienvenue affiché à chaque filtre
+ * trop strict, soit une collection vide qui n'offre aucune porte de sortie. */
+
+/* ⚠️ Les quatre lignes d'absence relevées ne s'accordent pas : `p-[26px]`
+ * (repertoire-client:159), `px-[14px] py-6` (bibliotheque-client:230),
+ * `px-[18px] py-8` (import-client:263), `py-5` seul (logs-client:234).
+ * Retenue : la seule qui soit écrite telle quelle, 26px sur les quatre
+ * côtés. Une version antérieure posait « 26px 14px », c'est-à-dire le
+ * vertical de la première recomposé avec l'horizontal de la deuxième — une
+ * paire plausible qui n'existe dans aucune source. */
+.zv-empty {
+  padding: 26px;
+  text-align: center;
+  font-size: var(--app-sm);
+  color: var(--muted);
+}
+
+.zv-empty--page {
+  border: 1px solid var(--line);
+  background: var(--white);
+  padding: 48px 32px;
+  text-align: center;
+}
+
+/* --app-h2 (20px) est le palier que tokens.css destine explicitement au
+ * « titre de fiche, d'état vide, d'interstice ». */
+.zv-empty__title {
+  /* Posé explicitement : sur un <span>, le titre viendrait se coller au
+   * texte qui le suit au lieu de le surmonter, et l'état vide se lirait
+   * comme une seule phrase. */
+  display: block;
+  font-family: var(--font-display);
+  font-size: var(--app-h2);
+  font-weight: 300;
+  color: var(--ink);
+}
+
+.zv-empty__text {
+  /* La mesure bornée n'est pas décorative : centré et pleine largeur, ce
+   * paragraphe devient illisible dès 900px de cadre. */
+  margin: 8px auto 0;
+  max-width: 420px;
+  font-size: var(--app);
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+/* L'action de l'écran vide (le bouton qui remplit la collection). Elle est
+ * ici pour l'écart seul : le bouton lui-même vient de components.css — et
+ * porte donc --r-btn, voir la contradiction signalée sur .zv-alert. */
+.zv-empty__action {
+  margin-top: 20px;
+}
+
+/* Ni icône, ni illustration, ni « réinitialiser les filtres » : rien de tel
+ * n'existe dans les sources, et ce sont exactement les trois ajouts qu'un
+ * état vide attire. */
+
+/* ─── Travail en cours ──────────────────────────────────────────────────
+ * En production ce n'est PAS une roue : c'est une pastille suivie d'une
+ * phrase qui dit le travail réel (« Recherche dans 4 812 documents
+ * anonymisés… »). Une roue dit « attendez » ; cette phrase dit ce qu'on
+ * attend, sur combien, et qu'il ne se passe rien d'anormal. */
+
+.zv-loading {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-family: var(--font-mono);
+  font-size: var(--app-sm);
+  font-weight: 500;
+  /* #727C93 au relevé — un gris froid, rabattu sur --muted comme les autres
+   * neutres secondaires. Le token porte donc plusieurs gris du relevé : la
+   * hiérarchie interne des gris de Mémoire (#6B7488 / #727C93) n'existe plus
+   * dans le paquet, elle échouait de toute façon au seuil AA. */
+  color: var(--muted);
+}
+
+.zv-loading .zv-dot {
+  width: 7px;
+  height: 7px;
+  background: var(--accent);
+}
+
+/* ⚠️ STATIQUE, et c'est un choix. Aucune animation dans la source : ni
+ * @keyframes, ni classe d'animation, la pastille ne bat pas. Lui ajouter un
+ * pouls est l'invention la plus tentante de tout le relevé — et les
+ * @keyframes du paquet (motion.css) sont réservées à la vitrine, pilotées au
+ * défilement. Ne pas confondre `.zv-dot` avec `.zv-anim-dot-active` de
+ * motion.css : ce dernier anime un point de méthode, pas un état. */
+
+/* ─── Curseur de flux ───────────────────────────────────────────────────
+ * Bloc collé à la fin du texte en cours de diffusion, sur le dernier
+ * message seulement. Il dit « la réponse n'est pas finie » — sans lui, une
+ * réponse coupée à mi-phrase se lit comme une réponse complète et fausse. */
+
+.zv-caret {
+  margin-left: 2px;
+  color: var(--accent);
+}
+
+/* Le glyphe ▍ (U+258D) est un CARACTÈRE posé dans le texte, pas un
+ * pseudo-élément : il suit la dernière lettre où qu'elle tombe, y compris
+ * en fin de ligne justifiée. STATIQUE là encore, aucun clignotement.
+ *
+ * Le flux interrompu, lui, n'a AUCUN style : c'est la phrase
+ * « [Flux interrompu — la réponse est incomplète.] » ajoutée au corps du
+ * message, rendue par white-space: pre-wrap. La réponse partielle est
+ * conservée, jamais effacée — on n'efface pas ce que l'utilisateur a déjà lu. */
+
+/* ─── Retour d'attente : ce que fait Mémoire, et ce qu'elle ne fait pas ──
+ * Le retour d'attente de cette application est TEXTUEL, et c'est cohérent
+ * avec .zv-loading ci-dessus : le libellé du bouton change pendant l'action
+ * (`{busy === d.id ? 'Suppression…' : 'Supprimer'}`, bibliotheque-client:283 ;
+ * `{pending ? 'Connexion…' : 'Se connecter'}` au login), en plus d'un
+ * `disabled:cursor-wait`. Ce n'est pas du CSS : c'est un motif de balisage à
+ * reprendre, et il ne demande aucune classe.
+ *
+ * Restent DEUX actions sans aucun retour : la déconnexion et l'envoi de
+ * message (le bouton reste plein et cliquable en apparence alors que la
+ * garde existe côté script). C'est un défaut de l'application, pas une
+ * intention de charte : ne pas le répliquer dans une app neuve.
+ *
+ * ─── Manques assumés : roue, squelette, infobulle ───────────────────────
+ * AUCUNE MATIÈRE PREMIÈRE dans les cinq écrans relevés. Ni .zv-spinner, ni
+ * .zv-skeleton, ni .zv-tooltip ne sont écrits ici : les livrer supposerait
+ * d'inventer une durée, une amplitude et une géométrie que personne n'a
+ * arbitrées, et un système ment moins en affichant un trou qu'une valeur
+ * plausible. Rien n'appelle d'infobulle et rien n'en propose : le nom de
+ * document tronqué n'a même pas d'attribut title, les barres des graphiques
+ * n'affichent aucune valeur au pointeur.
+ *
+ * Contraintes à respecter le jour où la DA les tranche : pas de dégradé
+ * spectre (réservé au filet de section, à la barre de progression et aux
+ * points de méthode) — donc un squelette en --hairline, pas un balayage
+ * spectral ; et une infobulle en petit panneau blanc, filet --line, ombre
+ * --shadow-menu, texte --app-sm / --ink-2, qui est la seule combinaison déjà
+ * présente ailleurs dans le système. */
+
+/* ─── Mobile ────────────────────────────────────────────────────────────
+ * Un seul point de rupture, 768px, comme dans tous les modules du paquet.
+ * Ce bloc ne contient QUE des bascules attestées dans la source (variantes
+ * `lg:` de Mémoire, lues en sens inverse) — pas une seule règle de confort
+ * ajoutée en chemin. */
+
+@media (max-width: 767px) {
+  /* Les cinq bandeaux d'authentification portent `text-[13.5px]
+   * lg:text-[12.5px]` (login-card:207, reset-password-card:78 et :137,
+   * forgot-password-card:60 et :96) : le texte GROSSIT d'un palier sous le
+   * seuil. C'est le motif le mieux attesté du module ; l'oublier laissait le
+   * bandeau à sa plus petite taille précisément sur l'écran le plus étroit. */
+  .zv-alert {
+    font-size: var(--app);
+  }
+
+  /* Le bandeau pointillé fait l'inverse — `text-[13px]` en desktop,
+   * `text-[12.5px]` sous le seuil — et resserre sa gouttière : 16px de
+   * chaque côté sur 375px déjà bordés par le padding de page, c'est la
+   * moitié de la largeur perdue en marges. Déclaré APRÈS .zv-alert pour
+   * l'emporter à spécificité égale. */
+  .zv-alert--dash {
+    padding: 10px 12px;
+    font-size: var(--app-sm);
+  }
+
+  /* Le message d'incident resserre son padding (`px-4 py-[14px]`) et GARDE
+   * sa taille : la source n'a pas de variante `lg:` sur le corps. Redéclaré
+   * ici uniquement pour n'être pas rétréci par la règle .zv-alert ci-dessus,
+   * à spécificité égale. */
+  .zv-alert--lg {
+    padding: 14px 16px;
+    font-size: var(--app);
+  }
+
+  /* C'est ici, et seulement ici, que la troncature du statut opère : le
+   * `min-w-0` de la source vaut sous le seuil, et sans lui l'ellipse ne se
+   * déclenche pas dans une cellule flex ou grid — le libellé pousse la
+   * colonne. C'est la cause n° 1 de débordement horizontal des tableaux. */
+  .zv-status {
+    min-width: 0;
+  }
+
+  /* ⚠️ NON RELEVÉ : aucune variante `lg:` sur le padding de l'écran vide.
+   * Ce resserrement est une décision de portage, prise parce que 32px de
+   * gouttière sur 375px laissent 311px de contenu à un bloc qui porte un
+   * titre et un bouton. Si la DA la refuse, c'est cette règle qui saute —
+   * pas le reste du bloc. */
+  .zv-empty--page {
+    padding: 40px 20px;
+  }
+}