@zevra/ui 0.4.0 → 0.6.0

package/src/components.css

@@ -524,8 +524,182 @@
   background: var(--spectre);
 }
 
+
+/* ─── Blocs éditoriaux ──────────────────────────────────────────────────
+ * HORS RELEVÉ — ajoutés le 24/08/2026 à la demande de la DA (règle de
+ * variété : jamais deux blocs de même forme qui se suivent, 80 % de formes
+ * différentes par page). Quatre façons de poser du contenu SANS carte,
+ * pour que les grilles de cartes redeviennent un choix et non un réflexe.
+ * Dessinés dans les tokens existants, rien de nouveau dans la palette. */
+
+/* Rangées à filets : un libellé fort, un contenu, un trait fin entre
+ * chaque rangée. Pour les listes où l'alignement fait la lecture
+ * (profils rencontrés, prestations, caractéristiques). */
+.zv-rows {
+  display: flex;
+  flex-direction: column;
+}
+
+.zv-rows__row {
+  display: flex;
+  gap: 24px;
+  align-items: baseline;
+  flex-wrap: wrap;
+  padding: 18px 0;
+  border-top: 1px solid var(--line);
+}
+
+.zv-rows__row:first-child {
+  border-top: none;
+}
+
+.zv-rows__key {
+  font-weight: 600;
+  flex: 0 0 280px;
+}
+
+.zv-rows__val {
+  flex: 1;
+  min-width: 260px;
+  /* C'est le corps de texte du paquet — le token, pas sa valeur recopiée. */
+  font-size: var(--body);
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+/* Sommaire numéroté : le numéro en display léger, le contenu à droite,
+ * un filet entre les entrées. Pour les suites longues qui étoufferaient
+ * en cartes (offres détaillées, programmes). */
+.zv-index {
+  display: flex;
+  flex-direction: column;
+}
+
+.zv-index__item {
+  display: flex;
+  gap: 28px;
+  align-items: flex-start;
+  padding: 28px 0;
+  border-top: 1px solid var(--line);
+}
+
+.zv-index__item:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+
+.zv-index__num {
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: 40px;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: var(--accent-deep);
+  flex: 0 0 64px;
+}
+
+.zv-index__body {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Variante en colonnes : les mêmes entrées numérotées, posées en grille
+ * de trois, sans filets — l'espace fait la séparation. */
+.zv-index--cols {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 40px 32px;
+}
+
+.zv-index--cols .zv-index__item {
+  flex-direction: column;
+  gap: 10px;
+  padding: 0;
+  border-top: none;
+}
+
+.zv-index--cols .zv-index__num {
+  flex: none;
+  font-size: 32px;
+  color: var(--accent-line);
+}
+
+/* Déroulé vertical : le rail et ses points, à la verticale. La déclinaison
+ * verticale de zv-steps, pour les méthodes qui se lisent comme un récit.
+ * Les points reprennent les couleurs des points de méthode (l'un des
+ * trois emplois autorisés du spectre). */
+.zv-flow {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+  padding-left: 32px;
+}
+
+.zv-flow::before {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 8px;
+  bottom: 8px;
+  width: 2px;
+  background: var(--line);
+}
+
+.zv-flow__step {
+  position: relative;
+  --zv-flow-dot: var(--iris);
+}
+
+.zv-flow__step::before {
+  content: '';
+  position: absolute;
+  left: -32px;
+  top: 5px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--zv-flow-dot);
+  box-shadow:
+    0 0 0 4px var(--paper),
+    0 0 0 5px var(--accent-line);
+}
+
+.zv-flow__step--violet {
+  --zv-flow-dot: var(--violet);
+}
+
+.zv-flow__step--cyan {
+  --zv-flow-dot: var(--cyan);
+}
+
+/* Encart d'appel : une bande claire sur fond indigo dilué, un titre, une
+ * action. Pour l'offre transverse qui doit se voir sans crier
+ * (remise Campus, renvoi vers une autre page). */
+.zv-callout {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  flex-wrap: wrap;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-line);
+  border-radius: var(--r-card);
+  padding: 32px 36px;
+}
+
+.zv-callout__title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 300;
+  letter-spacing: -0.01em;
+  font-size: 26px;
+  line-height: 1.2;
+}
+
 /* ─── Mobile ────────────────────────────────────────────────────────────*/
 
+
 @media (max-width: 767px) {
   .zv-btn--sm {
     height: 36px;
@@ -549,4 +723,31 @@
   .zv-inset {
     max-width: none;
   }
+
+  .zv-rows__key {
+    flex-basis: 100%;
+  }
+
+  .zv-index__item {
+    gap: 18px;
+    padding: 22px 0;
+  }
+
+  .zv-index__num {
+    flex-basis: 44px;
+    font-size: 30px;
+  }
+
+  .zv-index--cols {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 28px;
+  }
+
+  .zv-callout {
+    padding: 24px 22px;
+  }
+
+  .zv-callout__title {
+    font-size: 21px;
+  }
 }

package/src/layout.css

@@ -61,7 +61,9 @@
 
 .zv-col-3 { grid-column: span 3; }
 .zv-col-4 { grid-column: span 4; }
+.zv-col-5 { grid-column: span 5; }
 .zv-col-6 { grid-column: span 6; }
+.zv-col-7 { grid-column: span 7; }
 .zv-col-8 { grid-column: span 8; }
 .zv-col-9 { grid-column: span 9; }
 
@@ -520,7 +522,9 @@
 
   .zv-col-3,
   .zv-col-4,
+  .zv-col-5,
   .zv-col-6,
+  .zv-col-7,
   .zv-col-8,
   .zv-col-9,
   .zv-section-head__main,