@zevra/ui 0.1.0

package/src/layout.css

@@ -0,0 +1,542 @@
+/* Zevra UI — mise en page : conteneurs, grilles, sections, chrome
+ * Dépend de tokens.css et base.css. Ne pose ni reset ni fond de page :
+ * c'est le rôle de base.css.
+ *
+ * ⚠️ Les maquettes sont des rendus FIGÉS (1440px pour les planches, 390px
+ * pour Mobile.html). Les reproduire en `width: 1440px` donnerait un
+ * débordement horizontal garanti sur téléphone — ce que les règles du projet
+ * interdisent explicitement. Les conteneurs sont donc fluides et plafonnés,
+ * ce qui rend le rendu identique au-delà de 1440px et utilisable en dessous.
+ */
+
+/* ─── Page ──────────────────────────────────────────────────────────────*/
+
+.zv-page {
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+  background: var(--paper);
+}
+
+/* ─── Gouttières ────────────────────────────────────────────────────────
+ * Trois retraits relevés, et un seul mécanisme pour les poser : ces
+ * utilitaires. Les blocs ci-dessous ne portent QUE leur rythme vertical,
+ * jamais leur retrait horizontal — sans quoi poser un utilitaire par-dessus
+ * un bloc écraserait son padding vertical (shorthand contre longhand). */
+
+.zv-gutter {
+  padding-left: 72px;
+  padding-right: 72px;
+}
+
+/* Blocs centrés : hero, CTA, manifeste du prototype. */
+.zv-gutter--wide {
+  padding-left: 120px;
+  padding-right: 120px;
+}
+
+/* Chrome haut du prototype. */
+.zv-gutter--chrome {
+  padding-left: 56px;
+  padding-right: 56px;
+}
+
+/* Variante en marge, pour les blocs détachés du bord (grille produits,
+ * vitrine, pied de page). */
+.zv-inset-x {
+  margin-left: 72px;
+  margin-right: 72px;
+}
+
+/* ─── Grille 12 colonnes ────────────────────────────────────────────────
+ * Répartitions relevées : 3+9, 8+4, 6+6. */
+
+.zv-grid-12 {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 32px;
+}
+
+.zv-col-3 { grid-column: span 3; }
+.zv-col-4 { grid-column: span 4; }
+.zv-col-6 { grid-column: span 6; }
+.zv-col-8 { grid-column: span 8; }
+.zv-col-9 { grid-column: span 9; }
+
+/* Grille de cartes produit. */
+.zv-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 24px;
+}
+
+.zv-grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+/* ─── Sections ──────────────────────────────────────────────────────────*/
+
+/* En-tête de section : titre à gauche sur 8 colonnes, texte
+ * d'accompagnement à droite sur 4, alignés par le bas. */
+.zv-section-head {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 32px;
+  align-items: end;
+  padding-top: 104px;
+}
+
+.zv-section-head__main {
+  grid-column: span 8;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.zv-section-head__aside {
+  grid-column: span 4;
+}
+
+/* Section de planche : filet haut, titre sur 3 colonnes, corps sur 9.
+ * C'est la structure des planches de documentation (DesignSystem, Logos),
+ * pas celle des pages produit. */
+.zv-sheet-section {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 32px;
+  padding: 56px 0;
+  border-top: 1px solid var(--line);
+}
+
+.zv-sheet-section__title {
+  grid-column: span 3;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.zv-sheet-section__body {
+  grid-column: span 9;
+}
+
+/* Séparateur de section, avec son rythme vertical. */
+.zv-section-rule {
+  border-top: 1px solid var(--line);
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.zv-section-rule--quiet {
+  border-top-color: var(--hairline);
+  padding-top: 18px;
+  padding-bottom: 28px;
+}
+
+/* ─── Blocs centrés : hero et CTA ───────────────────────────────────────*/
+
+.zv-hero {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding-top: 96px;
+  gap: 28px;
+  z-index: 2;
+}
+
+.zv-cta {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding-top: 128px;
+  padding-bottom: 96px;
+  gap: 24px;
+}
+
+.zv-cta .zv-lead {
+  max-width: 580px;
+  font-size: 17px;
+}
+
+/* ─── Chrome : navigation ───────────────────────────────────────────────*/
+
+.zv-nav {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 26px;
+  z-index: 2;
+}
+
+.zv-nav__logo {
+  height: 42px;
+  width: auto;
+  display: block;
+}
+
+.zv-nav__links {
+  display: flex;
+  align-items: center;
+  gap: 34px;
+}
+
+.zv-navlink {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.zv-navlink--quiet {
+  color: var(--label);
+}
+
+/* Header fixe du prototype : voile dégradé plutôt qu'un fond plein, pour
+ * que le contenu s'y fonde au défilement. */
+.zv-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 22px;
+  padding-bottom: 12px;
+  z-index: 40;
+  background: linear-gradient(180deg, rgba(245, 246, 250, 0.92), rgba(245, 246, 250, 0));
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+/* ─── Frise d'étapes ────────────────────────────────────────────────────
+ * Troisième et dernier emploi autorisé du spectre : les points de méthode,
+ * dans l'ordre iris → violet → cyan. */
+
+.zv-steps {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 32px;
+}
+
+.zv-steps__rail {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--line);
+}
+
+.zv-steps__progress {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--iris), var(--violet) 70%, var(--cyan));
+}
+
+.zv-step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 36px 32px 0 0;
+}
+
+.zv-step:last-child {
+  padding-right: 0;
+}
+
+.zv-step__dot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  /* Le double anneau détache la puce du rail qui passe derrière. */
+  background: var(--iris);
+  box-shadow:
+    0 0 0 4px var(--paper),
+    0 0 0 5px var(--accent-line);
+}
+
+/* Troisième et dernier emploi du spectre : les puces, dans l'ordre
+ * iris → violet → cyan. La couleur se pose sur la puce elle-même, et non
+ * par :nth-child sur l'étape : le rail et sa progression sont des enfants
+ * du même conteneur, ils décalent la numérotation et laissent les puces
+ * suivantes sans fond. */
+.zv-step__dot--violet {
+  background: var(--violet);
+}
+
+.zv-step__dot--cyan {
+  background: var(--cyan);
+}
+
+/* ─── Ligne de statistiques ─────────────────────────────────────────────
+ * Posée sur le bandeau manifeste, d'où le filet clair. */
+
+.zv-stats {
+  display: flex;
+  gap: 64px;
+  padding-top: 32px;
+  border-top: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.zv-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.zv-stat__value {
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+  font-size: 40px;
+  font-weight: 300;
+}
+
+/* ─── Pied de page ──────────────────────────────────────────────────────*/
+
+.zv-footer {
+  position: relative;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  border-top: 1px solid var(--line);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 48px;
+}
+
+.zv-footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  max-width: 320px;
+}
+
+.zv-footer__cols {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 48px;
+  font-size: 13px;
+  color: var(--muted);
+  line-height: 2;
+}
+
+/* ─── Bande de preuve sociale ───────────────────────────────────────────
+ * Label à gauche, noms de clients à droite, en Outfit 500 atténué.
+ * ⚠️ Règle de la passation : jamais plus d'une ligne. Au-delà, la preuve
+ * se dilue au lieu de s'accumuler. */
+
+.zv-proof-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 24px 40px;
+}
+
+.zv-proof-bar__names {
+  display: flex;
+  gap: 36px;
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+  font-size: 17px;
+  font-weight: 500;
+  color: var(--ink);
+  opacity: 0.72;
+}
+
+/* ─── Pied de page réduit ───────────────────────────────────────────────
+ * Pages secondaires. Le pied complet à quatre colonnes reste réservé à la
+ * page d'accueil. */
+
+.zv-footer-mini {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 20px 32px;
+  background: var(--paper);
+}
+
+.zv-footer-mini__logo {
+  height: 22px;
+  width: auto;
+  display: block;
+}
+
+/* ─── Empilement ────────────────────────────────────────────────────────
+ * Inventaire complet des couches relevées. Toute nouvelle couche s'arbitre
+ * par rapport à celle-ci plutôt qu'en surenchérissant. */
+
+.zv-layer-scene { z-index: 1; }   /* scène constellation, sous la nav */
+.zv-layer-content { z-index: 2; } /* nav, hero */
+.zv-layer-progress { z-index: 5; } /* barre de progression en flux */
+.zv-layer-chrome { z-index: 40; } /* header fixe, rail d'étapes */
+.zv-layer-top { z-index: 50; }    /* barre de progression fixe */
+
+/* ─── Bascule d'affichage ───────────────────────────────────────────────
+ * HORS RELEVÉ : utilitaires mécaniques, pas des décisions de charte. Ils
+ * existent parce que les maquettes desktop et mobile ne montrent PAS les
+ * mêmes éléments de navigation — les liens de nav desktop deviennent un
+ * menu burger — et que sans eux chaque app réinvente la même règle. */
+
+.zv-only-desktop {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .zv-only-desktop {
+    display: revert;
+  }
+
+  .zv-only-mobile {
+    display: none;
+  }
+}
+
+/* ─── Mobile ────────────────────────────────────────────────────────────
+ * Les grilles s'empilent, les gouttières se resserrent aux valeurs de
+ * Mobile.html (20 / 22 / 24px). */
+
+@media (max-width: 767px) {
+  .zv-gutter,
+  .zv-gutter--wide,
+  .zv-gutter--chrome {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .zv-inset-x {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+
+  .zv-grid-12,
+  .zv-grid-3,
+  .zv-section-head,
+  .zv-sheet-section,
+  .zv-steps {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 20px;
+  }
+
+  .zv-grid-4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .zv-col-3,
+  .zv-col-4,
+  .zv-col-6,
+  .zv-col-8,
+  .zv-col-9,
+  .zv-section-head__main,
+  .zv-section-head__aside,
+  .zv-sheet-section__title,
+  .zv-sheet-section__body {
+    grid-column: auto;
+  }
+
+  .zv-section-head {
+    padding-top: 44px;
+    align-items: start;
+    text-align: center;
+    justify-items: center;
+  }
+
+  .zv-hero {
+    padding-top: 44px;
+    gap: 18px;
+  }
+
+  .zv-cta {
+    padding-top: 56px;
+    padding-bottom: 48px;
+    gap: 16px;
+  }
+
+  .zv-nav {
+    padding-top: 20px;
+  }
+
+  .zv-nav__logo {
+    height: 30px;
+  }
+
+  /* Les liens de navigation desktop n'ont pas d'équivalent mobile au
+   * relevé : Mobile.html les remplace par un menu burger. Ils ne sont pas
+   * masqués d'office — cela casserait les pages sans burger — mais
+   * .zv-only-desktop est là pour le faire en une classe. */
+
+  .zv-steps__rail,
+  .zv-steps__progress {
+    display: none;
+  }
+
+  .zv-step {
+    padding: 0 0 0 24px;
+  }
+
+  .zv-step__dot {
+    top: 4px;
+  }
+
+  .zv-stats {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+    padding-top: 16px;
+  }
+
+  .zv-stat {
+    gap: 4px;
+  }
+
+  .zv-stat__value {
+    font-size: 28px;
+  }
+
+  .zv-proof-bar,
+  .zv-footer-mini {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 12px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  /* Les noms de clients passent en lignes plutôt qu'en une seule rangée,
+   * qui déborderait. La règle « jamais plus d'une ligne » vaut pour le
+   * desktop : à 390px, aucune rangée de six noms ne tient. */
+  .zv-proof-bar__names {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px 20px;
+    font-size: 15px;
+  }
+
+  .zv-footer {
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .zv-footer__cols {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 24px;
+  }
+}