@zevra/ui 0.2.1 → 0.3.1

package/DECISIONS.md

@@ -173,6 +173,32 @@ n'importe quelle police.
 `--muted`. La nuance de température disparaît ; elle n'était reconductible
 nulle part ailleurs.
 
+### Enrobages — hors relevé, assumés
+
+Trois composants n'existent dans aucune source et sont pourtant livrés, car
+leur absence rend le système inutilisable :
+
+**Le menu mobile de la vitrine.** Les cinq planches vitrine sont des rendus
+figés à 1440px : aucune n'a jamais eu de menu mobile. Sans `.zv-nav__burger`
+et le tiroir qu'il ouvre, une page Zevra sur téléphone n'a aucun moyen
+d'atteindre sa navigation. Le tracé du burger est dérivé ; les mesures
+(cible de 40px, panneau de 288px) viennent du tiroir applicatif, lui relevé.
+
+**La modale.** Mémoire n'en emploie aucune. Celle-ci est dérivée de la carte
+et du tiroir, sans une valeur nouvelle. Elle existe parce que la règle du
+projet en impose la forme — panneau plafonné à 92vh qui défile en son sein —
+et qu'à défaut chaque app en réinventerait une.
+
+**La notification flottante.** Mémoire signale tout en place, par une alerte
+de bloc. Celle-ci est l'alerte détachée et posée en coin. Elle ne remplace
+pas `.zv-alert` : une erreur de formulaire se dit à côté du champ, jamais
+dans un coin qui disparaît.
+
+Ces trois-là vivent dans `overlays.css`, module commun aux deux couches.
+Auparavant, le voile et le tiroir étaient dans `navigation.css` : une landing
+devait charger la barre latérale, la pagination et les tableaux pour obtenir
+un bouton burger.
+
 ### Ce que le relevé ne donnait pas
 
 Aucun `<textarea>`, aucune case à cocher, aucun bouton radio n'existe dans

package/README.md

@@ -32,6 +32,7 @@ pnpm add @zevra/ui
 @import "@zevra/ui/surfaces.css";    /* halos, sols, voiles, manifeste */
 @import "@zevra/ui/motion.css";      /* les neuf animations autorisées */
 @import "@zevra/ui/icons.css";       /* dimensionnement des icônes */
+@import "@zevra/ui/overlays.css";    /* voile, tiroir, modale, notification */
 @import "@zevra/ui/forms.css";       /* champs, selects, interrupteurs, dépôt */
 @import "@zevra/ui/feedback.css";    /* alertes, badges, états, chargement */
 @import "@zevra/ui/navigation.css";  /* menus, barre, fil d'Ariane, pagination */
@@ -60,8 +61,15 @@ La **couche applicative** — `forms`, `feedback`, `navigation`, `data`, `icons`
 compose une interface qui s'opère : champs, alertes, menus, tableaux. Elle
 est plus dense, et dispose de son échelle propre (`--app`, `--mono`).
 
-Une app n'a aucune raison de charger les deux. Seuls `tokens.css` et
-`base.css` sont communs.
+Une app n'a aucune raison de charger les deux. Sont communs : `tokens.css`,
+`base.css`, `icons.css` et **`overlays.css`** — une page vitrine a besoin
+d'un tiroir pour son menu mobile autant qu'une application pour sa
+navigation.
+
+**Le menu mobile n'est pas optionnel.** Sous 768px, `.zv-nav__links` doit
+être masqué (`zv-only-desktop`) et remplacé par `.zv-nav__burger`, qui ouvre
+un `.zv-drawer`. Sans lui, la navigation devient inatteignable sur
+téléphone.
 
 Le tableau est **à base de grille**, pas de `<table>` : le gabarit de
 colonnes se pose en `--zv-cols` sur le conteneur, et sous 768px la rangée

package/demo/app.html

@@ -228,6 +228,49 @@
     </div>
   </section>
 
+  <!-- ENROBAGES -->
+  <section class="d-sec">
+    <span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">05 · Enrobages</span></span>
+    <p class="zv-note" style="margin-top:10px">Tout ce qui se pose par-dessus la page. La modale et la notification sont dérivées, hors relevé — voir DECISIONS.md.</p>
+
+    <div class="d-row">
+      <button class="zv-btn zv-btn--sm" onclick="document.getElementById('m1').toggleAttribute('data-open')">Ouvrir une modale</button>
+      <button class="zv-btn--ghost zv-btn--sm" onclick="document.getElementById('m2').toggleAttribute('data-open')">Modale destructive</button>
+    </div>
+
+    <div class="d-row" style="align-items:stretch;flex-direction:column">
+      <span class="zv-toast">Lien copié dans le presse-papier.</span>
+      <span class="zv-toast zv-toast--ok">Douze documents indexés.</span>
+      <span class="zv-toast zv-toast--err">L'envoi a échoué. Réessayez.</span>
+    </div>
+  </section>
+
+  <div class="zv-modal" id="m1">
+    <span class="zv-scrim" onclick="document.getElementById('m1').removeAttribute('data-open')"></span>
+    <div class="zv-modal__panel">
+      <div class="zv-modal__head">
+        <h3 class="zv-modal__title">Partager ce dossier</h3>
+        <button class="zv-icon-btn" aria-label="Fermer" onclick="document.getElementById('m1').removeAttribute('data-open')"><svg class="zv-icon"><use href="../icons/sprite.svg#zv-fermer"/></svg></button>
+      </div>
+      <div class="zv-modal__body">Les personnes invitées accèdent aux documents de ce dossier, jamais au reste de la base.</div>
+      <div class="zv-modal__foot">
+        <button class="zv-btn--ghost zv-btn--sm" onclick="document.getElementById('m1').removeAttribute('data-open')">Annuler</button>
+        <button class="zv-btn zv-btn--sm">Inviter</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="zv-modal zv-modal--danger" id="m2">
+    <span class="zv-scrim" onclick="document.getElementById('m2').removeAttribute('data-open')"></span>
+    <div class="zv-modal__panel">
+      <div class="zv-modal__head"><h3 class="zv-modal__title">Supprimer ce document ?</h3></div>
+      <div class="zv-modal__body">Cette action retire le document de la base et de l'index. Elle est définitive.</div>
+      <div class="zv-modal__foot">
+        <button class="zv-btn--ghost zv-btn--sm" onclick="document.getElementById('m2').removeAttribute('data-open')">Annuler</button>
+        <button class="zv-btn--ink zv-btn--sm">Supprimer</button>
+      </div>
+    </div>
+  </div>
 </div>
 </body>
 </html>

package/demo/index.html

@@ -22,7 +22,9 @@
   <!-- Chrome -->
   <nav class="zv-nav zv-gutter">
     <span class="zv-display" style="font-size:21px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Zevra</span>
-    <a class="zv-btn zv-btn--sm zv-only-mobile" href="#">Réserver</a>
+    <button class="zv-nav__burger" aria-label="Ouvrir le menu" onclick="document.getElementById('menu').toggleAttribute('data-open')">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg>
+    </button>
     <span class="zv-nav__links zv-only-desktop">
       <a class="zv-navlink" href="#">Produits</a>
       <a class="zv-navlink" href="#">Méthode</a>
@@ -31,6 +33,20 @@
     </span>
   </nav>
 
+  <!-- Tiroir de navigation mobile -->
+  <div class="zv-drawer" id="menu">
+    <span class="zv-scrim" onclick="document.getElementById('menu').removeAttribute('data-open')"></span>
+    <nav class="zv-drawer__panel">
+      <span class="zv-nav-drawer">
+        <a class="zv-nav-drawer__link zv-nav-drawer__link--on" href="#">Produits</a>
+        <a class="zv-nav-drawer__link" href="#">Méthode</a>
+        <a class="zv-nav-drawer__link" href="#">Sécurité</a>
+        <a class="zv-nav-drawer__link" href="#">Tarifs</a>
+        <a class="zv-btn zv-btn--block" href="#" style="margin-top:12px">Réserver 30 min</a>
+      </span>
+    </nav>
+  </div>
+
   <!-- Hero -->
   <header class="zv-hero zv-gutter--wide">
     <span class="zv-halo zv-halo--hero zv-anim-breathe" aria-hidden="true"></span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zevra/ui",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Design system Zevra « Encre & Papier » — tokens, CSS des composants et logos officiels.",
   "license": "UNLICENSED",
   "private": false,
@@ -29,12 +29,13 @@
     "./layout.css": "./src/layout.css",
     "./surfaces.css": "./src/surfaces.css",
     "./motion.css": "./src/motion.css",
-    "./logos/*": "./logos/*",
     "./icons.css": "./src/icons.css",
+    "./overlays.css": "./src/overlays.css",
     "./forms.css": "./src/forms.css",
     "./feedback.css": "./src/feedback.css",
     "./navigation.css": "./src/navigation.css",
     "./data.css": "./src/data.css",
+    "./logos/*": "./logos/*",
     "./icons/*": "./icons/*",
     "./demo/*": "./demo/*"
   },

package/src/index.css

@@ -10,6 +10,7 @@
 @import "./surfaces.css";
 @import "./motion.css";
 @import "./icons.css";
+@import "./overlays.css";
 @import "./forms.css";
 @import "./feedback.css";
 @import "./navigation.css";

package/src/layout.css

@@ -195,6 +195,77 @@
   text-decoration: none;
 }
 
+/* Bouton burger de la barre vitrine.
+ *
+ * ⚠️ HORS RELEVÉ des planches vitrine, qui sont toutes des rendus figés à
+ * 1440px et n'ont donc jamais eu de menu mobile. Mobile.html en montre un,
+ * mais sans en donner le tracé.
+ *
+ * Il est ici parce qu'une page sans lui n'a AUCUN moyen d'atteindre sa
+ * navigation sur téléphone : sous le seuil, .zv-nav__links doit être masqué
+ * (.zv-only-desktop) et rien ne le remplace. Le tiroir qu'il ouvre vit dans
+ * overlays.css.
+ *
+ * Il n'apparaît que sous le seuil : au-dessus, les liens sont là. */
+.zv-nav__burger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  /* 40px de cible tactile, obtenus par la taille et non par du padding : un
+   * bouton de 24px entouré de marge reste un bouton de 24px pour le doigt. */
+  width: 40px;
+  height: 40px;
+  /* Les marges négatives ramènent le bouton à l'alignement optique de la
+   * barre : sans elles, sa zone tactile décale le logo et le bord droit. */
+  margin: -8px -8px -8px 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--ink);
+  cursor: pointer;
+}
+
+.zv-nav__burger svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+/* Le tiroir de la vitrine : liens empilés, respiration généreuse. Le panneau
+ * lui-même vient d'overlays.css ; ceci n'habille que son contenu. */
+.zv-nav-drawer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 20px;
+}
+
+.zv-nav-drawer__link {
+  display: flex;
+  align-items: center;
+  /* Chaque entrée fait au moins une cible tactible pleine : une liste de
+   * liens serrés est la première cause de faux appuis sur téléphone. */
+  min-height: var(--tap);
+  padding: 0 12px;
+  border-radius: var(--r-panel);
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.zv-nav-drawer__link:hover {
+  background: var(--panel);
+  color: var(--accent);
+}
+
+.zv-nav-drawer__link--on {
+  color: var(--accent);
+}
+
 .zv-navlink--quiet {
   color: var(--label);
 }
@@ -395,15 +466,23 @@
  * mêmes éléments de navigation — les liens de nav desktop deviennent un
  * menu burger — et que sans eux chaque app réinvente la même règle. */
 
-.zv-only-desktop {
-  display: none;
-}
-
-@media (min-width: 768px) {
+/* Chaque utilitaire MASQUE dans la plage où l'élément n'a pas sa place, et ne
+ * dit RIEN dans l'autre.
+ *
+ * La version précédente posait `display: none` par défaut puis
+ * `display: revert` au-dessus du seuil. C'était faux : `revert` revient au
+ * défaut du NAVIGATEUR — `inline` pour un span — et écrasait donc le
+ * `display: flex` que l'élément tenait de sa propre classe. Une rangée de
+ * liens de navigation perdait sa gouttière et ses libellés se collaient.
+ *
+ * En ne déclarant rien dans la plage visible, l'élément garde son display. */
+@media (max-width: 767px) {
   .zv-only-desktop {
-    display: revert;
+    display: none;
   }
+}
 
+@media (min-width: 768px) {
   .zv-only-mobile {
     display: none;
   }
@@ -473,6 +552,11 @@
     padding-top: 20px;
   }
 
+  /* Le burger n'existe que là où les liens disparaissent. */
+  .zv-nav__burger {
+    display: inline-flex;
+  }
+
   .zv-nav__logo {
     height: 30px;
   }

package/src/navigation.css

@@ -314,105 +314,6 @@
  *   · 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
@@ -742,14 +643,6 @@
     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

package/src/overlays.css

@@ -0,0 +1,305 @@
+/* Zevra UI — enrobages : voile, tiroir, modale, notification
+ * Dépend de tokens.css et base.css.
+ *
+ * Ce module est COMMUN aux deux couches. Une page vitrine a besoin d'un
+ * tiroir pour son menu mobile ; une application en a besoin pour sa
+ * navigation. Les laisser dans navigation.css obligeait une landing à
+ * charger la barre latérale, la pagination et les tableaux pour obtenir un
+ * bouton burger — c'est ce qui a motivé cette séparation.
+ *
+ * Tout ce qui vit ici se pose PAR-DESSUS la page et lui vole le regard. D'où
+ * une règle commune : rien ne s'ouvre sans un moyen évident d'en sortir, et
+ * l'échappement au clavier est du ressort du gabarit, que le CSS ne peut pas
+ * assurer seul.
+ *
+ * Empilement, dans l'ordre : voile 60, tiroir 80, modale 90, notification 100.
+ * Les couches inférieures (2, 5, 40, 50) sont dans layout.css.
+ */
+
+/* ─── 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.
+ *
+ * Et il redescend au sol : son z-index de 60 est la couche qu'il occupe
+ * quand il est SEUL sur la page. À l'intérieur d'un enrobage, qui ouvre son
+ * propre contexte d'empilement, ce 60 l'emportait sur le panneau et voilait
+ * le tiroir par-dessus — il paraissait délavé, derrière son propre écran. */
+.zv-drawer .zv-scrim {
+  z-index: 0;
+  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;
+  /* Le panneau passe DEVANT son voile. .zv-drawer ouvre un contexte
+   * d'empilement, dans lequel le z-index 60 du voile l'emporte sur un
+   * panneau resté en `auto` : le tiroir s'affichait alors délavé, comme s'il
+   * était derrière son propre écran. */
+  z-index: 1;
+  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. */
+
+
+/* ─── Modale ────────────────────────────────────────────────────────────
+ * ⚠️ HORS RELEVÉ. Aucune modale dans les sources de Mémoire — l'application
+ * n'en emploie pas. Celle-ci est DÉRIVÉE de la carte et du tiroir, sans
+ * introduire une seule valeur nouvelle : elle réemploie --r-card,
+ * --shadow-panel et le voile ci-dessus.
+ *
+ * Elle existe parce que la règle du projet en impose la forme (panneau
+ * plafonné à 92vh, qui défile en son sein) et qu'à défaut chaque app en
+ * réinventerait une.
+ *
+ * Employer <dialog> plutôt que ce balisage quand c'est possible : le
+ * navigateur y apporte le piège de focus et la fermeture par Échap, que le
+ * CSS ne sait pas faire. */
+
+.zv-modal {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.zv-modal[data-open] {
+  display: flex;
+}
+
+/* Le voile d'une modale se montre à TOUTES les largeurs, et passe sous son
+ * panneau.
+ *
+ * .zv-scrim est masqué par défaut et ne s'affiche que sous le seuil : c'est
+ * juste pour le tiroir, qui n'existe qu'en mobile. La modale, elle, existe
+ * partout — sans cette règle, elle s'ouvrait en desktop sans rien occulter.
+ * Le z-index revient à 0 pour la même raison que sur le tiroir. */
+.zv-modal .zv-scrim {
+  z-index: 0;
+  display: block;
+}
+
+.zv-modal__panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  max-width: 520px;
+  /* Le plafond ET le défilement interne : sans les deux, une modale au
+   * contenu long pousse ses actions hors de l'écran, et l'utilisateur ne
+   * peut plus ni valider ni annuler. */
+  max-height: 92vh;
+  flex-direction: column;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: var(--r-card);
+  background: var(--white);
+  box-shadow: var(--shadow-panel);
+}
+
+.zv-modal__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 22px 0;
+}
+
+.zv-modal__title {
+  margin: 0;
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+  font-size: var(--app-h2);
+  font-weight: 400;
+  color: var(--ink);
+}
+
+.zv-modal__body {
+  padding: 14px 22px;
+  font-size: var(--app);
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+/* Les actions restent visibles quand le corps défile : c'est tout l'intérêt
+ * du plafond ci-dessus. */
+.zv-modal__foot {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  border-top: 1px solid var(--hairline);
+  background: var(--white);
+  padding: 14px 22px;
+}
+
+/* Modale destructive : le filet haut porte l'avertissement, pas un fond
+ * rouge — une surface d'alerte pleine rendrait le texte pénible à lire. */
+.zv-modal--danger .zv-modal__panel {
+  border-top: 3px solid var(--err);
+}
+
+/* ─── Notification flottante ────────────────────────────────────────────
+ * ⚠️ HORS RELEVÉ, même raison : Mémoire signale tout en place, par une
+ * alerte de bloc. Cette notification est l'alerte du module de retours,
+ * détachée et posée en coin.
+ *
+ * Elle ne remplace PAS .zv-alert : une erreur de formulaire se dit à côté du
+ * champ, jamais dans un coin qui disparaît. Réserver ce composant à ce qui
+ * est vrai après coup — « copié », « enregistré », « envoyé ». */
+
+.zv-toasts {
+  position: fixed;
+  z-index: 100;
+  right: 16px;
+  bottom: 16px;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 8px;
+  /* Le conteneur ne capte rien : seules les notifications elles-mêmes le
+   * font, sans quoi une colonne invisible bloquerait les clics dans tout le
+   * coin de l'écran. */
+  pointer-events: none;
+}
+
+.zv-toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  max-width: 380px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-panel);
+  background: var(--white);
+  box-shadow: var(--shadow-menu);
+  padding: 12px 14px;
+  font-size: var(--app-sm);
+  color: var(--ink);
+}
+
+.zv-toast--ok {
+  border-color: var(--ok-line);
+  background: var(--ok-soft);
+  color: var(--ok);
+}
+
+.zv-toast--err {
+  border-color: var(--err-line);
+  background: var(--err-soft);
+  color: var(--err);
+}
+
+/* ─── Mobile ────────────────────────────────────────────────────────────*/
+
+@media (max-width: 767px) {
+  /* Voile et tiroir n'existent QUE sous le seuil : au-dessus, la navigation
+   * est une colonne permanente, elle n'occulte rien. */
+  .zv-scrim {
+    display: block;
+  }
+
+  .zv-drawer {
+    display: block;
+  }
+
+  /* La notification prend la largeur : un coin de 380px sur un écran de 390
+   * n'est plus un coin. */
+  .zv-toasts {
+    right: 12px;
+    left: 12px;
+    bottom: 12px;
+  }
+
+  .zv-toast {
+    max-width: none;
+  }
+}