@zevra/ui 0.35.0 → 0.37.0

package/src/feedback.css

@@ -1,19 +1,19 @@
-/* Zevra UI — retours d'état : bandeaux, étiquettes, pastilles, absence,
- * travail en cours, curseur de flux — et, depuis le 25/08/2026, la roue,
+/* Zevra UI (retours d'état : bandeaux, étiquettes, pastilles, absence,
+ * travail en cours, curseur de flux) et, depuis le 25/08/2026, la roue,
  * le squelette et l'infobulle, longtemps refusés et enfin arbitrés.
  *
  * 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,
+ *   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,
+ *   typo) --font-display, --font-mono, --app, --app-sm,
  *              --app-h2, --mono, --mono-sm ;
- *   ombre    — --shadow-menu (l'infobulle, qui flotte comme le menu).
+ *   ombre) --shadow-menu (l'infobulle, qui flotte comme le menu).
  * 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
@@ -27,11 +27,11 @@
  * 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
+ * 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 /
+ * É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.
@@ -41,7 +41,7 @@
  *
  * Presque rien ici n'est interactif : pas de bouton de fermeture, pas de
  * champ. Les états [disabled] / [aria-invalid] n'ont aucune cible dans ce
- * module — ils appartiennent aux boutons (components.css) et aux champs
+ * 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. Seule exception, arbitrée le 25/08/2026 :
  * l'infobulle, qui se montre par nature au survol et au focus de sa cible.
@@ -70,7 +70,7 @@
    * 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é — et, depuis le 25/08/2026, comme tout le
+  /* Angle vif, comme au relevé, et, depuis le 25/08/2026, comme tout le
    * paquet : l'arbitrage DA « angle vif partout » (DECISIONS.md) a ramené
    * les quatre tokens de rayon à 0. La contradiction longtemps signalée ici
    * (un bouton arrondi au milieu de blocs vifs dans l'écran vide) est
@@ -78,7 +78,7 @@
   border-radius: 0;
 }
 
-/* Information — le seul ton relevé en bandeau de bas de page (garanties,
+/* Information : le seul ton relevé en bandeau de bas de page (garanties,
  * explication d'un écran). */
 .zv-alert--info {
   border-color: var(--accent-line);
@@ -86,7 +86,7 @@
   color: var(--accent);
 }
 
-/* Avertissement — le texte est --warn-ink, JAMAIS --warn : l'ambre plein
+/* 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 {
@@ -95,7 +95,7 @@
   color: var(--warn-ink);
 }
 
-/* Erreur — à porter avec role="alert" côté balisage, sinon le message
+/* 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 {
@@ -104,7 +104,7 @@
   color: var(--err);
 }
 
-/* Succès — RELEVÉ, pleine largeur, deux fois : reset-password-card.tsx:90 et
+/* 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
@@ -117,20 +117,20 @@
 }
 
 /* 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
+ * 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 :
+ *    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.
+ *    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. */
@@ -143,11 +143,11 @@
   color: var(--muted);
 }
 
-/* Gabarit compact (`px-3 py-[9px]`) — relevé quatre fois : login-card:207,
+/* 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
+ * 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 {
@@ -157,7 +157,7 @@
 /* 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
+ * 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;
@@ -168,7 +168,7 @@
 /* ⚠️ 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
+ *    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
@@ -177,7 +177,7 @@
 /* ─── É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
+ * 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.
@@ -206,7 +206,7 @@
   /* 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; /* angle vif — relevé, et arbitré depuis (25/08/2026) */
+  border-radius: 0; /* angle vif : relevé, et arbitré depuis (25/08/2026) */
 }
 
 /* Gabarit micro : niveau de log en tête de ligne, badge de la coque. À
@@ -231,7 +231,7 @@
   letter-spacing: 0.06em;
 }
 
-/* Tons — triplets relevés tels quels dans les tables de teintes. */
+/* 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
@@ -283,7 +283,7 @@
 .zv-dot {
   width: 6px;
   height: 6px;
-  /* Sans flex: none la pastille s'écrase quand le libellé voisin est long —
+  /* 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;
@@ -331,7 +331,7 @@
 }
 
 /* ─── Statut en clair ───────────────────────────────────────────────────
- * Pastille + libellé, sans cadre — contrairement à l'étiquette. Le cadre
+ * 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 ».
@@ -342,7 +342,7 @@
  * 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
+ * `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. */
@@ -352,7 +352,7 @@
   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]`
+   * 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 */
@@ -370,10 +370,10 @@
 
 /* ─── Absence ───────────────────────────────────────────────────────────
  * DEUX objets distincts, à ne surtout pas fusionner :
- * — la ligne d'absence, quand un filtre ne ramène rien : la collection
+ * - 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
+ * - 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. */
@@ -383,7 +383,7 @@
  * `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
+ * 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;
@@ -445,7 +445,7 @@
   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
+  /* #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. */
@@ -463,12 +463,12 @@
  * pouls est l'invention la plus tentante de tout le relevé. Les boucles de
  * ce module (roue, squelette) disent une ATTENTE ; la pastille dit un
  * ÉTAT, et un état ne bat pas. Ne pas confondre `.zv-dot` avec
- * `.zv-anim-dot-active` de motion.css — ce dernier anime un point de
+ * `.zv-anim-dot-active` de motion.css : ce dernier anime un point de
  * méthode de la vitrine, 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
+ * 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 {
@@ -481,9 +481,9 @@
  * 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
+ * « [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. */
+ * 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
@@ -500,11 +500,11 @@
  *
  * ─── Roue, squelette, infobulle : les manques, comblés ──────────────────
  * Longtemps REFUSÉS ici même, faute de matière première dans les cinq
- * écrans relevés — un système ment moins en affichant un trou qu'une valeur
+ * écrans relevés, un système ment moins en affichant un trou qu'une valeur
  * plausible. Tranchés le 25/08/2026 (DECISIONS.md, « les manques comblés »)
  * en reprenant TELLES QUELLES les contraintes que ce module posait pour ce
- * jour-là : pas de dégradé spectre — donc un squelette en --hairline, pas
- * un balayage spectral — et une infobulle en petit panneau blanc, filet
+ * jour-là : pas de dégradé spectre (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, la seule
  * combinaison déjà présente ailleurs dans le système. Les trois blocs
  * suivent ; ce qui restait à inventer (durées, amplitudes) est dit sur
@@ -518,7 +518,7 @@
  *
  * Géométrie empruntée, rien d'inventé sauf la durée : 16 px (la taille de
  * .zv-icon), trait de 2 (l'épaisseur du jeu d'icônes), piste --accent-line,
- * secteur --accent. 0,8 s linéaire — une rotation qui accélère se lit comme
+ * secteur --accent. 0,8 s linéaire : une rotation qui accélère se lit comme
  * un à-coup. prefers-reduced-motion (base.css) la FIGE : l'anneau
  * interrompu reste lisible immobile, c'est pour cela que le secteur est un
  * quart et pas une moitié. */
@@ -537,15 +537,15 @@
   border: 2px solid var(--accent-line);
   border-top-color: var(--accent);
   /* Rond de FORME, pas de style : c'est le cercle qui fait lire la
-   * rotation — même dérogation que la pastille d'état. */
+   * rotation, même dérogation que la pastille d'état. */
   border-radius: 9999px;
   /* `rotate` et non `transform` : la propriété indépendante compose avec un
-   * éventuel transform de placement — la leçon des boucles de motion.css. */
+   * éventuel transform de placement, la leçon des boucles de motion.css. */
   animation: zv-spin 0.8s linear infinite;
 }
 
 /* En tête d'un panneau ou d'un écran d'attente : la roue seule, plus
- * grande. Le trait ne grossit pas — même compensation optique que les
+ * grande. Le trait ne grossit pas : même compensation optique que les
  * icônes. */
 .zv-spinner--lg {
   width: 24px;
@@ -553,11 +553,11 @@
 }
 
 /* ─── Squelette ─────────────────────────────────────────────────────────
- * L'aplat --hairline exigé — pas de balayage spectral, pas de dégradé de
+ * L'aplat --hairline exigé : pas de balayage spectral, pas de dégradé de
  * gris que la charte n'a pas. La pulsation est une OPACITÉ (1 → 0,55), pas
  * une couleur : elle dit « en chargement » sans introduire de teinte.
  * 1,8 s en ease-in-out, la respiration de zv-breathe plutôt que la courbe
- * d'entrée — c'est une boucle, pas un mouvement.
+ * d'entrée : c'est une boucle, pas un mouvement.
  *
  * La géométrie vient du CONSOMMATEUR (largeur et hauteur en style, comme la
  * largeur de Progress) : un squelette qui invente ses dimensions ne
@@ -565,7 +565,7 @@
  * une hauteur d'un cadratin, pour mimer une ligne du texte courant.
  *
  * ⚠️ Un squelette ANNONCE une structure : ne jamais en poser un pour un
- * contenu dont la forme est inconnue — c'est .zv-loading qui dit ce cas. */
+ * contenu dont la forme est inconnue, c'est .zv-loading qui dit ce cas. */
 
 @keyframes zv-skeleton {
   0%,
@@ -590,20 +590,20 @@
 /* ─── Infobulle ─────────────────────────────────────────────────────────
  * La combinaison imposée par l'arbitrage : panneau blanc, filet --line,
  * ombre --shadow-menu, texte --app-sm / --ink-2. Posée AU-DESSUS de la
- * cible, centrée, à 6 px — au-dessus parce que le pointeur vient d'en bas
+ * cible, centrée, à 6 px : au-dessus parce que le pointeur vient d'en bas
  * et la masquerait en dessous.
  *
  * Elle se montre au survol et au focus de l'enveloppe (.zv-tooltip-hit),
- * avec un retard de 300 ms à l'APPARITION seulement — sans lui, traverser
+ * avec un retard de 300 ms à l'APPARITION seulement : sans lui, traverser
  * une rangée d'icônes fait clignoter une infobulle par icône. La
  * disparition, elle, est immédiate.
  *
  * Le masquage est `visibility` ET opacité, à dessein (WCAG 1.4.13) :
- *   · cachée en visibility:hidden, la bulle ne capte pas le pointeur — pas
+ *   · cachée en visibility:hidden, la bulle ne capte pas le pointeur (pas
  *     de zone de survol fantôme au-dessus de chaque cible ;
  *   · visible, elle EST survolable : descendante de l'enveloppe, le
  *     pointeur peut la traverser sans la fermer ;
- *   · Échap la ferme — la façade pose --off jusqu'au blur, seul
+ *   · Échap la ferme) la façade pose --off jusqu'au blur, seul
  *     comportement qui demande une ligne de script.
  *
  * ⚠️ Réservée à un COMPLÉMENT dispensable (un raccourci, une date exacte,
@@ -669,7 +669,7 @@
 /* ─── 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
+ * `lg:` de Mémoire, lues en sens inverse) : pas une seule règle de confort
  * ajoutée en chemin. */
 
 @media (max-width: 767px) {
@@ -682,8 +682,8 @@
     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
+  /* 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. */
@@ -703,24 +703,49 @@
 
   /* 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
+   * 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;
   }
 
-  /* Même garde-fou que le menu et le popover : plafonnée à l'écran, la
-   * bulle ne pousse jamais la page en défilement horizontal. Le centrage
-   * sur une cible collée au bord peut encore la décaler — limite connue,
-   * une variante d'ancrage latéral s'arbitrera si le cas se présente. */
+  /* ⚠️ LA BULLE CESSE DE FLOTTER : elle se pose en bas de l'écran, pleine
+   * largeur. Le centrage sur une cible proche du bord droit la poussait
+   * hors de l'écran. Mesuré sur le tableau de bord de mcp-factory à 375px :
+   * document large de 416, défilement horizontal sur toute la page. Ce
+   * n'était pas la largeur qui débordait mais la POSITION, et le plafond en
+   * `100vw` n'y pouvait donc rien.
+   *
+   * Ancrée à l'écran, la bulle ne peut plus déborder quelle que soit la
+   * place de sa cible, et c'est le seul endroit où elle reste lisible sur
+   * 320px sans se replier en cinq lignes au-dessus d'un bouton.
+   *
+   * Écarté : la variante d'ancrage latéral que le commentaire précédent
+   * envisageait. Elle aurait obligé chaque app à choisir le bon côté pour
+   * chaque bulle (quarante et une sur ce seul tableau de bord) et à le
+   * refaire à chaque déplacement d'un bouton.
+   *
+   * `inset` remet `top` et `left` à `auto` : sans quoi le `left: 50%` et le
+   * `bottom: calc(100% + 6px)` de la règle de base subsisteraient. */
   .zv-tooltip {
-    max-width: calc(100vw - 40px);
+    position: fixed;
+    inset: auto 16px 16px;
+    transform: none;
+    translate: none;
+    width: auto;
+    max-width: none;
+  }
+
+  /* La variante « sous la cible » n'a plus de sens une fois la bulle posée
+   * en bas : elle rouvrirait le `top` que l'ancrage vient de neutraliser. */
+  .zv-tooltip--bas {
+    top: auto;
   }
 
   /* ⚠️ 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 —
+   * 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;

package/src/fonts.css

@@ -1,4 +1,4 @@
-/* Zevra — chargement des trois familles de la DA.
+/* Zevra : chargement des trois familles de la DA.
  *
  * Import SÉPARÉ du reste : une @import CSS bloque le rendu le temps d'un
  * aller-retour réseau. En production, préférez la balise <link> en tête de
@@ -6,7 +6,7 @@
  * fichier existe pour les prototypes, les maquettes et les canvas de design,
  * où la simplicité prime sur la milliseconde.
  *
- * Graisses volontairement restreintes à ce que la DA utilise réellement —
+ * Graisses volontairement restreintes à ce que la DA utilise réellement,
  * charger la famille entière alourdirait la page sans rien apporter :
  *   Outfit 200-600 (titres en 300, wordmarks en 600)
  *   Public Sans 400/600 (texte courant)