@zevra/ui 0.39.0 → 0.40.0

package/react/overlays.tsx

@@ -40,6 +40,19 @@ export function useOverlay({ ouvert, onClose, panneau, verrouille = true }: UseO
   // utilisateur au clavier perd sa place dans la page.
   const origine = useRef<HTMLElement | null>(null)
 
+  // ⚠️ `onClose` NE FIGURE PAS dans les dépendances de l'effet, et ce n'est pas
+  // un oubli. L'effet ne se contente pas d'écouter Échap : il mémorise le
+  // nœud focalisé, verrouille le défilement et donne le focus au premier
+  // élément du panneau. Le rejouer, ce n'est donc pas re-souscrire, c'est
+  // ROUVRIR l'enrobage. Or `onClose` est presque toujours une fonction
+  // anonyme, recréée à chaque rendu du parent : le focus repartait sur le
+  // premier bouton du panneau à chaque rendu de la page derrière, et un champ
+  // qui s'enregistre tout seul devenait impossible à remplir (la note d'une
+  // pièce dans Tésope, 30/09/2026). L'effet lit ici la dernière fonction
+  // connue ; ses dépendances ne portent que l'état.
+  const fermer = useRef(onClose)
+  fermer.current = onClose
+
   useEffect(() => {
     if (!ouvert) return
     const cible = panneau?.current
@@ -62,7 +75,7 @@ export function useOverlay({ ouvert, onClose, panneau, verrouille = true }: UseO
     function onKey(e: KeyboardEvent) {
       if (e.key === 'Escape') {
         e.stopPropagation()
-        onClose()
+        fermer.current()
         return
       }
       if (e.key !== 'Tab' || !cible) return
@@ -89,7 +102,7 @@ export function useOverlay({ ouvert, onClose, panneau, verrouille = true }: UseO
       if (overflowPrecedent !== null) docu.body.style.overflow = overflowPrecedent
       origine.current?.focus?.()
     }
-  }, [ouvert, onClose, panneau, verrouille])
+  }, [ouvert, panneau, verrouille])
 }
 
 /* ─── Voile ────────────────────────────────────────────────────────── */

package/src/layout.css

@@ -650,6 +650,95 @@
   opacity: 0.72;
 }
 
+/* ─── Bandeau des clients (logos) ──────────────────────────────────────
+ * La façade est `BandeauClients` (@zevra/ui/react/clients), qui porte la
+ * liste, les logos inlinés et leurs hauteurs optiques. Repris de zevra.tech
+ * (ClientLogoBanner.astro, 14/10/2026), mesures comprises.
+ *
+ * ÉCHELLE. Chaque logo pose sa hauteur optique en points (--zv-clients-h) ;
+ * la rangée fixe la valeur du point (--zv-clients-u). Toute la bande change
+ * d'échelle d'un même facteur sans toucher aux rapports optiques. Fluide
+ * plutôt que par paliers : ×1,1 à 768 px, ×1,27 à 1 024, ×1,5 dès ~1 366
+ * (« on est fier de nos clients », 25/09/2026). La plus longue ligne doit
+ * tenir dans 624 px à 768 px, et finir avant le rail de lecture à 1 024.
+ *
+ * DÉCOUPE. Le logo n'est pas une image, c'est un MASQUE posé sur un aplat :
+ * la couleur devient une propriété, exacte, que le survol change. Sans
+ * masque (navigateur ancien), l'image s'affiche en fond, aplatie sur
+ * l'encre. */
+
+.zv-clients {
+  max-width: 1120px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+}
+
+.zv-clients__rangee {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  /* Verticalement, 18 px de chaque côté de la coupure (hauteur nulle, sur
+   * sa propre ligne) font 36 px entre les deux lignes. */
+  gap: 18px clamp(26px, 3.6vw, 60px);
+  --zv-clients-u: clamp(1.1px, calc(0.586px + 0.0669vw), 1.5px);
+}
+
+/* La coupure écrite : un élément vide pleine largeur force le retour. */
+.zv-clients__saut {
+  flex-basis: 100%;
+  height: 0;
+}
+
+.zv-clients__logo {
+  /* Posées en ligne par la façade, un logo à la fois ; ces valeurs ne
+   * servent que de repli. */
+  --zv-clients-h: 30;
+  --zv-clients-ratio: 1;
+  --zv-clients-src: none;
+  display: block;
+  height: calc(var(--zv-clients-h) * var(--zv-clients-u));
+  aspect-ratio: var(--zv-clients-ratio);
+  background: var(--zv-clients-src) center / contain no-repeat;
+  filter: brightness(0);
+  opacity: 0.74;
+}
+
+@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
+  .zv-clients__logo {
+    background: var(--ink-2);
+    filter: none;
+    opacity: 1;
+    -webkit-mask: var(--zv-clients-src) center / contain no-repeat;
+    mask: var(--zv-clients-src) center / contain no-repeat;
+    transition: background-color 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
+  }
+
+  .zv-clients__logo:hover {
+    background: var(--accent);
+  }
+}
+
+@media (max-width: 767px) {
+  .zv-clients {
+    gap: 18px;
+  }
+
+  /* Sur téléphone la rangée se replie d'elle-même : la gouttière se
+   * resserre pour que trois lignes ne poussent pas la suite hors de vue. */
+  .zv-clients__rangee {
+    gap: 22px 34px;
+    --zv-clients-u: 0.78px;
+  }
+
+  .zv-clients__saut {
+    display: none;
+  }
+}
+
 /* ─── Carrousel ─────────────────────────────────────────────────────────
  * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Défilement natif
  * scroll-snap, AUCUN JavaScript : pas de flèches (elles exigeraient un