@zevra/ui 0.1.0

package/src/base.css

@@ -0,0 +1,367 @@
+/* Zevra UI — socle : reset, document, typographie, signature
+ * Dépend de tokens.css. À charger en premier.
+ *
+ * Chaque valeur ci-dessous est relevée dans les maquettes de la passation du
+ * 23/08/2026. Quand deux planches divergent, l'arbitrage est écrit dans
+ * DECISIONS.md — jamais tranché en silence.
+ *
+ * POINT DE RUPTURE : 768px. Il ne vient PAS du relevé (les cinq maquettes sont
+ * à largeur fixe, sans une seule media query). C'est la convention `md` du
+ * projet, et les valeurs mobiles viennent de Mobile.html, qui est un rendu
+ * figé à 390px. Les quatre modules utilisent ce seuil et lui seul.
+ */
+
+/* ─── Reset ─────────────────────────────────────────────────────────────
+ * Posé ici et nulle part ailleurs : les autres modules ne touchent ni au
+ * box-sizing ni au body. */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--font-text);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ─── Liens ─────────────────────────────────────────────────────────────
+ * Restreint aux liens SANS classe. Les maquettes stylent `a` nu, ce qui
+ * repeint le libellé des boutons au survol (a:hover, 0-1-1, l'emporte sur
+ * .zv-btn, 0-1-0) — bug visible dans Main.html et signalé au relevé. Le
+ * périmètre est réduit plutôt que neutralisé par un :hover inventé. */
+
+a:not([class]) {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+a:not([class]):hover {
+  color: var(--accent-deep);
+}
+
+.zv-link {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.zv-link:hover {
+  color: var(--accent-deep);
+}
+
+/* ─── Accessibilité ─────────────────────────────────────────────────────
+ * HORS RELEVÉ, et assumé : aucune des cinq maquettes ne déclare d'état de
+ * focus. Un système livré sans focus clavier est inutilisable au clavier —
+ * on ne réplique pas cette lacune. Seules des valeurs existantes sont
+ * employées. */
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ─── Titres ────────────────────────────────────────────────────────────
+ * Outfit, graisse 300, interlettrage -0.02em. L'échelle est celle de
+ * Main.html, la planche de référence. */
+
+.zv-display {
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+}
+
+.zv-h1 {
+  margin: 0;
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+  font-size: var(--h1);
+  line-height: 1.05;
+  font-weight: 300;
+  color: var(--ink);
+  max-width: 1100px;
+  text-wrap: balance;
+}
+
+.zv-h2 {
+  margin: 0;
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+  font-size: var(--h2);
+  line-height: 1.06;
+  font-weight: 300;
+  text-wrap: balance;
+}
+
+/* Le titre de CTA final est d'un cran au-dessus des titres de section :
+ * 64px contre 56px (Main.html). Aucun token ne couvre cette taille. */
+.zv-h2--cta {
+  font-size: 64px;
+  max-width: 900px;
+}
+
+/* Titre de section des landings produit : un cran EN DESSOUS du 56px de la
+ * home. Les trois landings de la passation le posent en classe `.h2`, aux
+ * côtés des 56 et 64px qui restent pour la page d'accueil. */
+.zv-h2--sm {
+  font-size: 48px;
+}
+
+.zv-h3 {
+  margin: 0;
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+  font-size: var(--h3);
+  line-height: 1.1;
+  font-weight: 300;
+  max-width: 480px;
+}
+
+.zv-card-title {
+  margin: 0;
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+  font-size: var(--card-title);
+  line-height: 1.25;
+  font-weight: 400;
+}
+
+/* La deuxième moitié de phrase d'un titre bascule en indigo et prend un cran
+ * de graisse. Motif systématique : présent dans les cinq maquettes. */
+.zv-em {
+  color: var(--accent-deep);
+  font-weight: 400;
+}
+
+/* Sur fond sombre l'accent ne change pas de couleur mais de graisse. */
+.zv-em--on-dark {
+  color: var(--white);
+  font-weight: 500;
+}
+
+/* ─── Texte courant ─────────────────────────────────────────────────────
+ * Quatre paliers relevés : 18 (chapô), 16 (colonne d'accompagnement),
+ * 15 (corps), 13 (carte dense). */
+
+.zv-lead {
+  margin: 0;
+  font-size: var(--lead);
+  line-height: 1.6;
+  color: var(--muted);
+  max-width: 660px;
+  text-wrap: pretty;
+}
+
+.zv-body {
+  margin: 0;
+  font-size: var(--body);
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+/* 16px : colonne de droite des en-têtes de section (Main.html). */
+.zv-body--lg {
+  font-size: 16px;
+}
+
+/* 13px : légende de carte, texte serré. */
+.zv-body--dense {
+  font-size: 13px;
+}
+
+.zv-body strong,
+.zv-lead strong {
+  font-weight: 600;
+  color: var(--ink);
+}
+
+/* 14px : texte de règle et de légende des planches. */
+.zv-rule {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+/* 12,5px : la note d'accompagnement d'un bloc ou d'une carte de
+ * documentation. Le plus petit palier de texte courant du système — en
+ * dessous, on passe en label capitales. */
+.zv-note {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--muted);
+}
+
+/* ─── Labels capitales ──────────────────────────────────────────────────
+ * Space Grotesk, majuscules, très interlettré. Trois tailles seulement :
+ * 11px (kicker de section), 10px (label de carte), 9px (micro-label). */
+
+.zv-mono {
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  font-weight: 500;
+  font-size: 11px;
+  color: var(--accent);
+}
+
+.zv-mono--label {
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.zv-mono--micro {
+  font-size: 9px;
+  font-weight: 500;
+  color: var(--label);
+}
+
+.zv-mono--muted {
+  color: var(--label);
+}
+
+.zv-mono--ink {
+  color: var(--ink);
+}
+
+/* Sur fond sombre les labels passent en indigo clair, jamais en blanc pur. */
+.zv-mono--on-dark {
+  color: var(--accent-on-dark);
+}
+
+/* Accroche produit, posée sous le nom d'un glyphe : « Votre savoir,
+ * interrogeable en une phrase ». Moins interlettrée que le label qu'elle
+ * suit (0.14em contre 0.2em) — sinon la phrase se disloque. */
+.zv-tagline {
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-weight: 500;
+  font-size: 9px;
+  line-height: 1.6;
+  color: var(--muted);
+  text-align: center;
+  /* Remonte sous le label : l'ensemble se lit comme un seul bloc. */
+  margin-top: -4px;
+}
+
+/* ─── Signature : le filet de spectre ───────────────────────────────────
+ * 56×2px devant chaque kicker. C'est, avec la barre de progression et les
+ * points de méthode, l'un des trois seuls emplois autorisés du spectre.
+ *
+ * ⚠️ ARBITRAGE (voir DECISIONS.md) : --spectre vaut violet → bleu → cyan,
+ * comme la charte des logos qui le nomme « signature ». Trois autres
+ * planches posent iris → violet → cyan. Le token fait foi ici ; la question
+ * est ouverte pour la DA. */
+
+.zv-spec {
+  display: block;
+  width: var(--spec-filet);
+  height: 2px;
+  background: var(--spectre);
+  border-radius: 1px;
+}
+
+/* Bas de page : filet raccourci. */
+.zv-spec--sm {
+  width: 40px;
+}
+
+/* Sur fond sombre le filet s'éclaircit pour rester lisible. */
+.zv-spec--on-dark {
+  background: linear-gradient(90deg, #7fd8ff, var(--violet));
+}
+
+/* Filet + label, la composition de tête de section. */
+.zv-kicker {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.zv-kicker--stack {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.zv-kicker--center {
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+}
+
+/* ─── Mobile ────────────────────────────────────────────────────────────
+ * Valeurs relevées dans Mobile.html. Le seuil, lui, est la convention du
+ * projet (cf. en-tête). */
+
+@media (max-width: 767px) {
+  .zv-h1 {
+    font-size: 40px;
+    line-height: 1.08;
+  }
+
+  .zv-h2 {
+    font-size: 30px;
+    line-height: 1.1;
+  }
+
+  .zv-h2--cta {
+    font-size: 32px;
+    line-height: 1.08;
+  }
+
+  .zv-card-title {
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  .zv-lead {
+    font-size: 15px;
+    line-height: 1.55;
+  }
+
+  /* .zv-body garde 15px : c'est déjà la taille du chapô mobile. Seule
+   * l'interligne se resserre — et --dense reste distinct, à 13px/1.45. */
+  .zv-body {
+    line-height: 1.55;
+  }
+
+  .zv-body--dense {
+    font-size: 13px;
+    line-height: 1.45;
+  }
+
+  .zv-mono {
+    letter-spacing: 0.18em;
+    font-size: 9px;
+  }
+
+  .zv-mono--label {
+    font-size: 8px;
+  }
+
+  .zv-spec {
+    width: 44px;
+  }
+
+  /* Re-déclaré : une media query n'ajoute pas de spécificité, le modificateur
+   * serait sinon écrasé par la règle ci-dessus. */
+  .zv-spec--sm {
+    width: 40px;
+  }
+}