@zevra/ui 0.39.1 → 0.40.0

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