@zevra/ui 0.12.2 → 0.12.4

package/src/layout.css

@@ -29,25 +29,34 @@
 .zv-gutter {
   padding-left: 72px;
   padding-right: 72px;
+  max-width: var(--page-max);
+  margin-inline: auto;
 }
 
 /* Blocs centrés : hero, CTA, manifeste du prototype. */
 .zv-gutter--wide {
   padding-left: 120px;
   padding-right: 120px;
+  max-width: var(--page-max);
+  margin-inline: auto;
 }
 
 /* Chrome haut du prototype. */
 .zv-gutter--chrome {
   padding-left: 56px;
   padding-right: 56px;
+  max-width: var(--page-max);
+  margin-inline: auto;
 }
 
 /* Variante en marge, pour les blocs détachés du bord (grille produits,
- * vitrine, pied de page). */
+ * vitrine, pied de page). Le max() tient les deux promesses à la fois :
+ * jamais moins de 72px de marge visible, et un centrage sur --page-max dès
+ * que l'écran en offre davantage. */
 .zv-inset-x {
-  margin-left: 72px;
-  margin-right: 72px;
+  max-width: calc(var(--page-max) - 144px);
+  margin-left: max(72px, calc((100% - (var(--page-max) - 144px)) / 2));
+  margin-right: max(72px, calc((100% - (var(--page-max) - 144px)) / 2));
 }
 
 /* ─── Grille 12 colonnes ────────────────────────────────────────────────

package/src/motion.js

@@ -34,11 +34,12 @@
           io.unobserve(e.target);
         }
       },
-      /* Déclenche un peu AVANT l'entrée au viewport (marge basse positive) :
-       * l'entrée accompagne l'arrivée, et un saut de page (ancre de
-       * sommaire, molette rapide) n'atterrit jamais sur un écran vide qui
-       * attendrait le prochain cran de défilement. */
-      { rootMargin: '0px 0px 12% 0px', threshold: 0.01 }
+      /* Marge basse positive : l'entrée se déclenche un peu AVANT le
+       * viewport, un saut d'ancre n'atterrit jamais sur un écran vide.
+       * Marge haute généreuse : ce que le lecteur a dépassé en volant est
+       * déjà posé s'il remonte — remonter ne doit jamais rejouer quoi que
+       * ce soit, ni le faire attendre. */
+      { rootMargin: '80% 0px 12% 0px', threshold: 0.01 }
     );
 
     for (const el of document.querySelectorAll(ENTREES)) {

package/src/overlays.css

@@ -44,6 +44,17 @@
 
 /* ─── Tiroir de navigation ──────────────────────────────────────────────*/
 
+/* Tiroir ou modale ouverts : la page derrière ne défile plus. `:has()` est
+ * le seul chemin CSS pour verrouiller le body depuis un état descendant —
+ * sans lui, la molette fait défiler le fond sous le voile et le panneau
+ * semble dériver. */
+html:has(.zv-drawer[data-open]),
+html:has(.zv-drawer--open),
+html:has(.zv-modal[data-open]),
+html:has(.zv-modal--open) {
+  overflow: hidden;
+}
+
 .zv-drawer {
   display: none;
   position: fixed;

package/src/tokens.css

@@ -9,6 +9,12 @@
  */
 
 :root {
+  /* Largeur de page. Le relevé de la passation a été fait sur une trame de
+   * 1440 : au-delà, les enveloppes (zv-gutter et variantes) se centrent au
+   * lieu de s'étirer — un hero qui colle au bord gauche d'un écran de
+   * 2 560 px ne raconte plus une page, il raconte un débordement. */
+  --page-max: 1440px;
+
   /* Neutres (charte Mémoire) */
   --ink: #0b1020;
   /* Niveau intermédiaire, entre l'encre et le gris : titre de colonne,

package/tokens/index.js

@@ -99,6 +99,8 @@ export const mesures = {
   tap: '40px',
   topbarH: '52px',
   specFilet: '56px',
+  /* Largeur de page : au-delà, les enveloppes se centrent (0.12.4). */
+  pageMax: '1440px',
 }
 
 /** Rayons — À ZÉRO depuis l'arbitrage DA du 25/08/2026 (« très carré, ça