@zevra/ui 0.20.0 → 0.21.0

package/src/components.css

@@ -636,8 +636,23 @@
 /* ─── FAQ ───────────────────────────────────────────────────────────────
  * Cinq questions par page au maximum. */
 
+/* Le filet, comme `.zv-fold` : sans lui, la FAQ est un aplat blanc posé sur
+ * le papier, sans début ni fin. Toutes les autres surfaces blanches de la
+ * vitrine — carte, encart, tarif — en portent un ; celle-ci faisait tache. */
 .zv-faq {
   background: var(--white);
+  border: 1px solid var(--line);
+}
+
+/* Chaque question est un `<details>` : le repli est natif, sans JavaScript.
+ * Le filet sépare les questions ENTRE elles ; la première n'en porte pas, il
+ * tomberait sur celui du bloc et ferait un trait double. */
+.zv-faq__item {
+  border-top: 1px solid var(--hairline);
+}
+
+.zv-faq__item:first-child {
+  border-top: 0;
 }
 
 .zv-faq__q {
@@ -646,22 +661,54 @@
   align-items: center;
   gap: 16px;
   padding: 18px 24px;
-  border-bottom: 1px solid var(--hairline);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
+  /* Le marqueur natif du `<summary>` tombe : le chevron du composant fait le
+   * même travail sans imposer le triangle du navigateur. Même traitement que
+   * `.zv-fold__titre`. */
+  list-style: none;
 }
 
-.zv-faq__q svg {
+.zv-faq__q::-webkit-details-marker {
+  display: none;
+}
+
+/* Une FAQ de vitrine veut ses questions dans le PLAN DU DOCUMENT : c'est ce
+ * que lisent les moteurs, et ce que parcourt un lecteur d'écran qui saute de
+ * titre en titre. On accepte donc un `<h2>`/`<h3>`/`<h4>` comme question,
+ * et on lui retire ce que le navigateur lui met — taille, graisse, marges —
+ * pour qu'il se rende comme le reste des questions. Le niveau reste au
+ * balisage, l'apparence au système. */
+.zv-faq__q > :is(h2, h3, h4) {
+  margin: 0;
+  font: inherit;
+  color: inherit;
+}
+
+.zv-faq__q:hover {
+  background: var(--panel);
+}
+
+/* Le chevron porte sa classe : cibler tout `svg` du titre attraperait aussi
+ * une icône posée dans le libellé, qui se verrait rétrécie et retournée. */
+.zv-faq__chevron {
   width: 14px;
   height: 14px;
   flex: none;
   color: var(--accent);
+  transition: rotate 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-faq__item[open] .zv-faq__chevron {
+  rotate: 180deg;
 }
 
 .zv-faq__a {
-  padding: 14px 24px;
+  margin: 0;
+  padding: 0 24px 18px;
   font-size: 13px;
+  line-height: 1.6;
   color: var(--muted);
 }
 

package/src/layout.css

@@ -395,11 +395,15 @@
   padding-top: 22px;
   padding-bottom: 12px;
   z-index: 40;
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--paper) 92%, transparent),
-    color-mix(in srgb, var(--paper) 0%, transparent)
-  );
+  /* Le voile est PLEIN derrière la barre, et il se dégrade EN DESSOUS d'elle
+   * (::after). Il était auparavant dégradé sur toute sa hauteur : à sa base
+   * il ne restait donc presque rien, et un titre de 38 ou 56px qui passait
+   * dessous se retrouvait COUPÉ EN DEUX — moitié voilée, moitié nette, avec
+   * les entrées de nav posées sur ses lettres. Deux textes superposés, aucun
+   * lisible. Signalé en recette sur mcp-factory.
+   * Le dégradé n'est pas perdu : il vit sous la barre, là où il adoucit le
+   * passage sans se disputer la place avec la navigation. */
+  background: color-mix(in srgb, var(--paper) 92%, transparent);
   /* ⚠️ LE PRÉFIXÉ D'ABORD. Lightning CSS — le compilateur de Tailwind v4,
    * donc celui de toutes nos applications Next — SUPPRIME `backdrop-filter`
    * non préfixé quand il précède la forme `-webkit-`. Or Firefox ne connaît
@@ -419,6 +423,25 @@
   backdrop-filter: blur(6px);
 }
 
+/* La frange de dégradé, posée SOUS la barre. `pointer-events: none` : elle
+ * couvre le haut du contenu, elle ne doit rien intercepter. */
+.zv-header::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 24px;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--paper) 92%, transparent),
+    color-mix(in srgb, var(--paper) 0%, transparent)
+  );
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  pointer-events: none;
+}
+
 .zv-header:has(> .zv-nav) {
   display: block;
   padding-top: 0;