@zevra/ui 0.1.0

package/src/motion.css

@@ -0,0 +1,248 @@
+/* Zevra UI — mouvement : les neuf animations autorisées
+ * Dépend de tokens.css. Relevé dans `maquettes/Motion.html`, qui les nomme
+ * et fixe leurs plages de défilement.
+ *
+ * NEUF, PAS UNE DE PLUS. Les règles de la passation :
+ *   · un seul type de mouvement par scène, plus le flottement continu ;
+ *   · les entrées se font toujours vers le HAUT, jamais latéralement ;
+ *   · aucun mouvement sur la typographie une fois posée ;
+ *   · une seule courbe : cubic-bezier(.2, .7, .2, 1).
+ *
+ * ─── Comment c'est construit ────────────────────────────────────────────
+ * L'état AU REPOS de chaque élément est son état FINAL : sans animation, la
+ * page est complète et lisible. Les animations d'entrée ne vivent que dans
+ * le bloc @supports, si bien qu'un navigateur sans `animation-timeline`
+ * affiche simplement le contenu en place plutôt qu'un écran vide.
+ *
+ * Les deux boucles (drift, breathe) animent les propriétés `translate` et
+ * `scale` INDÉPENDANTES, jamais `transform` : les éléments concernés — halo
+ * centré par translateX(-50%), glyphe en scène — portent déjà un transform
+ * de placement, qu'une animation sur `transform` écraserait.
+ *
+ * Décalage : poser `--zv-delay` en style inline. Le stagger d'un groupe est
+ * de 120 ms (entrées), les vagues de badges de 6 % de défilement.
+ */
+
+:root {
+  --zv-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --zv-delay: 0s;
+}
+
+/* ─── Boucles continues ─────────────────────────────────────────────────
+ * Les deux seules animations qui ne dépendent pas du défilement. */
+
+/* 1 · Flottement des glyphes en scène. Jamais sur du texte. */
+@keyframes zv-drift {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+  50% {
+    translate: 0 -10px;
+  }
+}
+
+.zv-anim-drift {
+  animation: zv-drift 7s ease-in-out infinite;
+  animation-delay: var(--zv-delay);
+}
+
+/* 2 · Respiration du halo de hero. Le SEUL mouvement autorisé avant le
+ *     premier défilement. */
+@keyframes zv-breathe {
+  0%,
+  100% {
+    scale: 1;
+    opacity: 1;
+  }
+  50% {
+    scale: 1.06;
+    opacity: 0.92;
+  }
+}
+
+.zv-anim-breathe {
+  animation: zv-breathe 9s ease-in-out infinite;
+}
+
+/* ─── Entrées pilotées par le défilement ────────────────────────────────
+ * Hors de ce bloc, aucune de ces classes ne produit d'effet : l'élément
+ * reste dans son état final. C'est voulu. */
+
+@supports (animation-timeline: view()) {
+  /* 3 · Entrée standard de tout contenu texte et panneau.
+   *     Stagger de 120 ms entre les éléments d'un même groupe. */
+  @keyframes zv-rise {
+    from {
+      opacity: 0;
+      transform: translateY(32px);
+    }
+  }
+
+  .zv-anim-rise {
+    animation: zv-rise var(--zv-easing) both;
+    animation-timeline: view();
+    animation-range: contain 10% contain 45%;
+  }
+
+  /* 4 · Entrée des glyphes produit dans leur scène : montée et grossissement. */
+  @keyframes zv-glyph-in {
+    from {
+      opacity: 0;
+      transform: translateY(40px) scale(0.7);
+    }
+  }
+
+  .zv-anim-glyph-in {
+    animation: zv-glyph-in var(--zv-easing) both;
+    animation-timeline: view();
+    animation-range: contain 0% contain 45%;
+  }
+
+  /* 5 · La signature de la page d'accueil : les glyphes convergent vers le
+   *     Z depuis les quatre coins. La direction se choisit par modificateur —
+   *     c'est la seule entrée latérale du système, et elle est latérale
+   *     parce qu'elle converge, pas parce qu'elle glisse. */
+  @keyframes zv-converge-tl {
+    from {
+      opacity: 0;
+      transform: translate(-420px, -420px) scale(1.5);
+    }
+  }
+
+  @keyframes zv-converge-tr {
+    from {
+      opacity: 0;
+      transform: translate(420px, -420px) scale(1.5);
+    }
+  }
+
+  @keyframes zv-converge-bl {
+    from {
+      opacity: 0;
+      transform: translate(-420px, 420px) scale(1.5);
+    }
+  }
+
+  @keyframes zv-converge-br {
+    from {
+      opacity: 0;
+      transform: translate(420px, 420px) scale(1.5);
+    }
+  }
+
+  .zv-anim-converge {
+    animation: zv-converge-tl var(--zv-easing) both;
+    animation-timeline: view();
+    animation-range: contain 0% contain 55%;
+  }
+
+  .zv-anim-converge--tr {
+    animation-name: zv-converge-tr;
+  }
+
+  .zv-anim-converge--bl {
+    animation-name: zv-converge-bl;
+  }
+
+  .zv-anim-converge--br {
+    animation-name: zv-converge-br;
+  }
+
+  /* 6 · Badges, jetons d'entités, éléments de preuve.
+   *     En cascade : six vagues espacées de 6 % de défilement. */
+  @keyframes zv-pop {
+    from {
+      opacity: 0;
+      transform: scale(0.6);
+    }
+  }
+
+  .zv-anim-pop {
+    animation: zv-pop var(--zv-easing) both;
+    animation-timeline: view();
+    animation-range: contain 30% contain 70%;
+  }
+
+  /* Les six vagues. Décaler la plage, et non le délai : un délai en secondes
+   * n'a aucun sens sur une timeline de défilement. */
+  .zv-anim-pop--2 { animation-range: contain 36% contain 76%; }
+  .zv-anim-pop--3 { animation-range: contain 42% contain 82%; }
+  .zv-anim-pop--4 { animation-range: contain 48% contain 88%; }
+  .zv-anim-pop--5 { animation-range: contain 54% contain 94%; }
+  .zv-anim-pop--6 { animation-range: contain 60% contain 100%; }
+
+  /* 7 · Le filet de spectre se dessine à l'entrée de chaque en-tête de
+   *     section. On anime bien la largeur, et non une mise à l'échelle :
+   *     le dégradé doit se révéler, pas s'étirer. */
+  @keyframes zv-filet {
+    from {
+      width: 0;
+    }
+  }
+
+  .zv-anim-filet {
+    animation: zv-filet var(--zv-easing) both;
+    animation-timeline: view();
+    animation-range: contain 5% contain 25%;
+  }
+
+  /* 8 · Le point d'étape s'allume à l'entrée de sa scène et s'éteint à la
+   *     sortie. Un seul actif à la fois. */
+  @keyframes zv-dot-active {
+    0%,
+    100% {
+      background: var(--accent-line);
+      box-shadow: none;
+    }
+    35%,
+    70% {
+      background: var(--iris);
+      box-shadow: 0 0 0 4px rgba(88, 72, 248, 0.18);
+    }
+  }
+
+  .zv-anim-dot-active {
+    animation: zv-dot-active linear both;
+    animation-timeline: view();
+    animation-range: cover 0% cover 100%;
+  }
+
+  /* 9 · La barre de progression, pilotée par le défilement global de la
+   *     page — la seule à lire `scroll(root)` plutôt que sa propre entrée. */
+  @keyframes zv-progress {
+    from {
+      transform: scaleX(0);
+    }
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+  .zv-anim-progress {
+    transform-origin: 0 50%;
+    animation: zv-progress linear both;
+    animation-timeline: scroll(root);
+  }
+}
+
+/* ─── Accessibilité ─────────────────────────────────────────────────────
+ * Les neuf classes se neutralisent d'un seul bloc. Une durée courte ne
+ * suffit PAS pour une animation pilotée par le défilement — elle ignore la
+ * durée : il faut couper la timeline et l'animation elles-mêmes. La page
+ * reste complète et lisible, dans son état final. */
+
+@media (prefers-reduced-motion: reduce) {
+  .zv-anim-drift,
+  .zv-anim-breathe,
+  .zv-anim-rise,
+  .zv-anim-glyph-in,
+  .zv-anim-converge,
+  .zv-anim-pop,
+  .zv-anim-filet,
+  .zv-anim-dot-active,
+  .zv-anim-progress {
+    animation: none !important;
+    animation-timeline: none !important;
+  }
+}

package/src/surfaces.css

@@ -0,0 +1,235 @@
+/* Zevra UI — surfaces : halos, sols quadrillés, voiles, bandeau manifeste
+ * Dépend de tokens.css. Indépendant des autres modules.
+ *
+ * C'est ce qui distingue une page Zevra d'une page blanche bien composée.
+ * Toutes ces surfaces sont DÉCORATIVES : elles se posent en absolu derrière
+ * le contenu, ne captent jamais le pointeur, et n'ont pas à être lues par un
+ * lecteur d'écran (les poser en aria-hidden).
+ *
+ * Elles supposent toutes un parent `position: relative; overflow: hidden`.
+ */
+
+/* ─── Halo ambiant ──────────────────────────────────────────────────────
+ * Le violet et le cyan du spectre, très dilués, derrière un bloc centré.
+ * Ce n'est pas un emploi du spectre en aplat : c'est une lumière. */
+
+.zv-halo {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+/* Derrière un hero. */
+.zv-halo--hero {
+  top: -140px;
+  width: 1400px;
+  height: 900px;
+  background: radial-gradient(
+    closest-side,
+    rgba(138, 58, 248, 0.2),
+    rgba(20, 194, 248, 0.1) 48%,
+    rgba(245, 246, 250, 0) 72%
+  );
+}
+
+/* Derrière un CTA final : plus petit, plus discret. */
+.zv-halo--cta {
+  top: 40px;
+  width: 900px;
+  height: 500px;
+  background: radial-gradient(
+    closest-side,
+    rgba(138, 58, 248, 0.18),
+    rgba(20, 194, 248, 0.08) 55%,
+    rgba(245, 246, 250, 0) 75%
+  );
+}
+
+/* Noyau lumineux d'une scène : blanc au centre, pour détacher un objet. */
+.zv-halo--core {
+  top: 42%;
+  width: 980px;
+  height: 560px;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(
+    closest-side,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(228, 222, 255, 0.85) 35%,
+    rgba(138, 58, 248, 0.14) 62%,
+    rgba(20, 194, 248, 0.06) 80%,
+    rgba(245, 246, 250, 0) 100%
+  );
+}
+
+/* ─── Sol quadrillé ─────────────────────────────────────────────────────
+ * Une grille indigo très pâle, basculée en perspective : le « sol » sur
+ * lequel les glyphes produit sont posés. */
+
+.zv-grid-floor {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 1800px;
+  height: 560px;
+  transform: translateX(-50%) perspective(900px) rotateX(58deg);
+  transform-origin: 50% 100%;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(88, 72, 248, 0.13) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(88, 72, 248, 0.13) 1px, transparent 1px);
+  background-size: 64px 64px;
+}
+
+/* Variante à l'échelle d'une carte. */
+.zv-grid-floor--card {
+  width: 900px;
+  height: 260px;
+  transform: translateX(-50%) perspective(600px) rotateX(62deg);
+}
+
+/* ─── Voiles de fondu ───────────────────────────────────────────────────
+ * Posés PAR-DESSUS un sol ou une scène pour en noyer les bords dans le
+ * papier. Sans eux, la grille se coupe net et le truc se voit. */
+
+.zv-fade {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    180deg,
+    var(--paper) 0%,
+    rgba(245, 246, 250, 0) 40%,
+    rgba(245, 246, 250, 0) 66%,
+    var(--paper) 100%
+  );
+}
+
+/* Variante sur fond blanc (intérieur de carte). */
+.zv-fade--white {
+  background: linear-gradient(
+    180deg,
+    #fff 0%,
+    rgba(255, 255, 255, 0) 35%,
+    rgba(255, 255, 255, 0) 70%,
+    #fff 100%
+  );
+}
+
+/* ─── Bandeau manifeste ─────────────────────────────────────────────────
+ * La seule surface sombre du système. Le dégradé est celui du logo, en
+ * diagonale. On n'y inverse PAS les neutres : les labels passent en indigo
+ * clair (--accent-on-dark), les filets en blanc à 18 %. */
+
+.zv-band {
+  position: relative;
+  overflow: hidden;
+  background: var(--manifeste);
+  color: var(--white);
+  padding-top: 112px;
+  padding-bottom: 112px;
+}
+
+.zv-band__content {
+  position: relative;
+  z-index: 1;
+}
+
+/* Filigrane : le glyphe, blanchi et presque effacé, débordant du cadre. */
+.zv-band__watermark {
+  position: absolute;
+  right: -40px;
+  top: -80px;
+  width: 640px;
+  height: auto;
+  opacity: 0.07;
+  pointer-events: none;
+  /* Ramène n'importe quel logo couleur en blanc pur. */
+  filter: brightness(0) invert(1);
+}
+
+/* Lueur bleue au pied du bandeau, qui l'empêche de finir en aplat mort. */
+.zv-band__glow {
+  position: absolute;
+  left: 50%;
+  bottom: -300px;
+  width: 900px;
+  height: 600px;
+  transform: translateX(-50%);
+  border-radius: 50%;
+  pointer-events: none;
+  background: radial-gradient(closest-side, rgba(32, 160, 240, 0.5), rgba(32, 160, 240, 0) 70%);
+}
+
+/* Texte courant sur fond sombre : ni blanc pur, ni le gris du mode clair. */
+.zv-band .zv-body,
+.zv-band .zv-rule,
+.zv-text-on-dark {
+  color: #c7cde0;
+}
+
+/* Panneau navy compact (planches de logos). */
+.zv-panel-navy {
+  background: linear-gradient(135deg, #06063a 0%, #0b0b5e 40%, var(--accent-deep) 100%);
+  border-radius: var(--r-card);
+  padding: 28px;
+  color: var(--white);
+}
+
+/* ─── Glyphes ───────────────────────────────────────────────────────────
+ * Les glyphes produit se posent toujours avec leur ombre portée — c'est
+ * elle qui les décolle du papier. Jamais de recoloration ni d'inclinaison. */
+
+.zv-glyph {
+  filter: var(--shadow-glyph);
+}
+
+/* Version appuyée : glyphe présenté seul, en grand. */
+.zv-glyph--deep {
+  filter:
+    drop-shadow(0 24px 32px rgba(88, 72, 248, 0.28))
+    drop-shadow(0 2px 4px rgba(11, 16, 32, 0.08));
+}
+
+/* Glyphe en filigrane d'une carte, poussé dans l'angle. */
+.zv-glyph--watermark {
+  position: absolute;
+  top: 26px;
+  right: 24px;
+  width: 100px;
+  height: auto;
+  pointer-events: none;
+}
+
+/* ─── Mouvement ────────────────────────────────────────────────────────
+ * Les animations vivent dans motion.css, qui porte les neuf mouvements
+ * autorisés par la passation. Les surfaces d'ici en sont les cibles
+ * habituelles : .zv-anim-breathe sur un halo, .zv-anim-drift sur un glyphe. */
+
+/* ─── Mobile ────────────────────────────────────────────────────────────*/
+
+@media (max-width: 767px) {
+  .zv-halo--hero {
+    top: -160px;
+    width: 600px;
+    height: 520px;
+    background: radial-gradient(
+      closest-side,
+      rgba(91, 75, 240, 0.3),
+      rgba(32, 128, 240, 0.16) 45%,
+      rgba(245, 246, 250, 0) 72%
+    );
+  }
+
+  .zv-band {
+    padding-top: 48px;
+    padding-bottom: 48px;
+  }
+
+  .zv-band__watermark {
+    right: -40px;
+    top: -40px;
+    width: 280px;
+  }
+}

package/src/tokens.css

@@ -0,0 +1,76 @@
+/* Zevra — Design tokens « Encre & Papier »
+ * Source : passation DA du 23/08/2026 (canvas Claude Design « Zevra DA Encre
+ * et Papier »). Ce fichier est la SOURCE DE VÉRITÉ des valeurs de marque :
+ * toute app doit lire ces variables plutôt que recopier un hexadécimal.
+ *
+ * ⚠️ Système CLAIR par nature (papier/encre). Les surfaces sombres se font
+ * avec --manifeste et --accent-on-dark, pas en inversant les neutres : les
+ * contrastes ont été réglés dans ce sens-là et pas dans l'autre.
+ */
+
+:root {
+  /* Neutres (charte Mémoire) */
+  --ink: #0b1020;
+  --muted: #5a637a;
+  --label: #8a93a8;
+  --line: #e3e6ef;
+  --hairline: #eef1f8;
+  --paper: #f5f6fa;
+  --panel: #fbfcfe;
+  --white: #ffffff;
+
+  /* Indigo (action, labels, liens) */
+  --accent-deep: #1e1b8c;
+  --accent: #2a2aa8;
+  --accent-line: #c9d6f5;
+  --accent-soft: #eaf1ff;
+
+  /* Spectre produit (prélevé dans les logos officiels).
+   * ⚠️ Usage strictement limité : filet de section (56×2), barre de
+   * progression, points de méthode. Jamais en fond, jamais en texte. */
+  --violet: #8a3af8;
+  --iris: #5848f8;
+  --bleu: #2f6ef8;
+  --cyan: #14c2f8;
+  --lavande: #b8a8f8;
+  --spectre: linear-gradient(90deg, #8a3af8, #2f6ef8 55%, #14c2f8);
+
+  /* Fond sombre (bande manifeste) — dégradé type logo */
+  --manifeste: linear-gradient(135deg, #06063a 0%, #0b0b5e 28%, #1e1b8c 55%, #3d36d6 80%, #2080f0 100%);
+  --accent-on-dark: #a5b4fc;
+
+  /* États */
+  --ok: #1c6b4a;
+  --ok-soft: #e6f3ec;
+  --ok-line: #bfdccb;
+  --warn: #b98a1f;
+  --err: #b5202c;
+
+  /* Typo — Google Fonts : Outfit (display), Public Sans (texte), Space Grotesk (labels) */
+  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;   /* titres 200-400, wordmarks 600 */
+  --font-text: "Public Sans", "Helvetica Neue", Arial, sans-serif; /* 400/600 */
+  --font-mono: "Space Grotesk", "Menlo", monospace;                /* labels caps, 0.18-0.2em */
+
+  /* Échelle display (letter-spacing -0.02em, graisse 300 + chute en 400 --accent-deep) */
+  --h1: 76px;
+  --h2: 56px;
+  --h3: 38px;
+  --card-title: 24px;
+  --lead: 18px;
+  --body: 15px;
+
+  /* Rayons */
+  --r-btn: 5px;
+  --r-pill: 3px;
+  --r-panel: 10px;
+  --r-card: 16px;
+
+  /* Ombres */
+  --shadow-card: 0 2px 10px rgba(11, 16, 32, 0.05);
+  --shadow-panel: 0 24px 60px rgba(30, 27, 140, 0.12);
+  --shadow-btn: 0 10px 28px rgba(30, 27, 140, 0.30);
+  --shadow-glyph: drop-shadow(0 24px 32px rgba(88, 72, 248, 0.28));
+
+  /* Signature */
+  --spec-filet: 56px; /* filet de spectre 56×2px devant chaque kicker */
+}

package/tokens/index.js

@@ -0,0 +1,91 @@
+/**
+ * Zevra — tokens de la DA « Encre & Papier », en JavaScript.
+ *
+ * ⚠️ MIROIR de src/tokens.css, pas une seconde source. Le CSS fait foi pour
+ * tout ce qui s'affiche ; cet export existe pour les usages où l'on ne peut
+ * pas lire une variable CSS : génération d'images, graphes (Recharts, Canvas),
+ * couleurs de thème d'un e-mail, scripts de build.
+ *
+ * Toute modification ici DOIT être reportée dans src/tokens.css, et
+ * inversement. Le test tokens.test.js vérifie que les deux ne divergent pas.
+ */
+
+export const couleurs = {
+  // Neutres
+  ink: '#0b1020',
+  muted: '#5a637a',
+  label: '#8a93a8',
+  line: '#e3e6ef',
+  hairline: '#eef1f8',
+  paper: '#f5f6fa',
+  panel: '#fbfcfe',
+  white: '#ffffff',
+
+  // Indigo — l'action
+  accentDeep: '#1e1b8c',
+  accent: '#2a2aa8',
+  accentLine: '#c9d6f5',
+  accentSoft: '#eaf1ff',
+
+  // Spectre produit — usage restreint (filets, progression, points)
+  violet: '#8a3af8',
+  iris: '#5848f8',
+  bleu: '#2f6ef8',
+  cyan: '#14c2f8',
+  lavande: '#b8a8f8',
+
+  // Sur fond sombre
+  accentOnDark: '#a5b4fc',
+
+  // États
+  ok: '#1c6b4a',
+  okSoft: '#e6f3ec',
+  okLine: '#bfdccb',
+  warn: '#b98a1f',
+  err: '#b5202c',
+}
+
+/** Dégradés. Ce sont des valeurs CSS complètes, pas des couleurs. */
+export const degrades = {
+  spectre: 'linear-gradient(90deg, #8a3af8, #2f6ef8 55%, #14c2f8)',
+  manifeste:
+    'linear-gradient(135deg, #06063a 0%, #0b0b5e 28%, #1e1b8c 55%, #3d36d6 80%, #2080f0 100%)',
+}
+
+/**
+ * Palette ordonnée pour les visualisations de données. Dérivée du spectre :
+ * un graphe reste ainsi dans la marque sans emprunter à l'indigo, qui porte
+ * l'action et ne doit pas se confondre avec une série de données.
+ */
+export const serieGraphique = ['#5848f8', '#2f6ef8', '#14c2f8', '#8a3af8', '#b8a8f8']
+
+export const polices = {
+  display: '"Outfit", "Helvetica Neue", Arial, sans-serif',
+  texte: '"Public Sans", "Helvetica Neue", Arial, sans-serif',
+  mono: '"Space Grotesk", "Menlo", monospace',
+}
+
+export const tailles = {
+  h1: '76px',
+  h2: '56px',
+  h3: '38px',
+  cardTitle: '24px',
+  lead: '18px',
+  body: '15px',
+}
+
+export const rayons = {
+  btn: '5px',
+  pill: '3px',
+  panel: '10px',
+  card: '16px',
+}
+
+export const ombres = {
+  card: '0 2px 10px rgba(11, 16, 32, 0.05)',
+  panel: '0 24px 60px rgba(30, 27, 140, 0.12)',
+  btn: '0 10px 28px rgba(30, 27, 140, 0.30)',
+  glyph: 'drop-shadow(0 24px 32px rgba(88, 72, 248, 0.28))',
+}
+
+export default { couleurs, degrades, serieGraphique, polices, tailles, rayons, ombres }