@zevra/ui 0.1.0 → 0.2.1

package/DECISIONS.md

@@ -128,6 +128,62 @@ le composant plutôt qu'ajouté au token.
 
 ---
 
+## La couche applicative (relevé Mémoire)
+
+Les composants d'interface sont relevés dans l'application Mémoire, en
+production, qui emploie les mêmes tokens de charte. Trois arbitrages de fond
+ont été rendus :
+
+**Les neutres.** Mémoire emploie six niveaux de gris là où la charte en a
+trois, et deux d'entre eux — #6B7488 et #727C93 — **échouent au contraste AA**
+sur texte normal (4,34 et 3,87), alors qu'ils portent justement le texte mono
+de 10,5px : latences, horodatages, compteurs. Les adopter aurait gravé une
+régression d'accessibilité. Ils se rabattent sur `--muted` (5,55). Un seul
+niveau intermédiaire est ajouté, `--ink-2` (#4a5468, contraste 7,05).
+
+**L'échelle de texte.** Le relevé compte huit paliers répartis dans 5,5px,
+avec des demi-pixels et des écarts d'un pixel — de l'entropie d'utilitaires,
+pas une échelle dessinée. Ils se regroupent en trois paliers de texte
+(`--app-lg`, `--app`, `--app-sm`) et trois de labels (`--mono-lg`, `--mono`,
+`--mono-sm`).
+
+**Les filets et surfaces.** Cinq « nouveaux » tokens étaient des doublons
+imperceptibles de tokens existants — écart RVB de 1,4 à 6,8, sous le seuil de
+perception. `--line-inner` → `--hairline`, `--line-soft` → `--line`,
+`--row-hover` / `--paper-hover` / `--paper-warm` → `--panel`.
+
+Au total, 32 tokens proposés se réduisent à 14.
+
+### Écarts assumés au relevé
+
+**La barre supérieure.** La production pose `top: 53px` pour une barre de
+52px, en supposant que son filet s'ajoute à la hauteur. Il ne s'y ajoute
+pas : `box-sizing: border-box` le peint à l'intérieur. Ce pixel n'empilait
+rien, il ouvrait une couture — et la feuille portant son propre filet haut,
+le trait apparaissait doublé. Corrigé : la feuille se cale à ras, sans filet
+propre.
+
+**L'alignement des colonnes de chiffres.** Le relevé s'appuyait sur
+`--font-mono` pour aligner les nombres. Or `--font-mono` vaut Space Grotesk,
+qui n'est **pas à chasse fixe** : l'alignement n'aurait jamais tenu. Remplacé
+par `font-variant-numeric: tabular-nums`, qui aligne les chiffres dans
+n'importe quelle police.
+
+**Le gris chaud.** `#6E6A61`, seule teinte chaude du relevé, se rabat sur
+`--muted`. La nuance de température disparaît ; elle n'était reconductible
+nulle part ailleurs.
+
+### Ce que le relevé ne donnait pas
+
+Aucun `<textarea>`, aucune case à cocher, aucun bouton radio n'existe dans
+Mémoire : le composeur du chat est un `<input>`, et toute sélection passe par
+des puces de filtre ou un interrupteur. Ces trois contrôles sont livrés,
+dérivés strictement de `.zv-input`, et signalés comme tels dans le CSS.
+
+Aucun jeu d'onglets non plus : une rangée d'onglets se construit avec
+`.zv-seg-group` et `.zv-seg`. Un onglet **souligné** reste à faire — il
+suppose d'arbitrer la couleur et l'épaisseur du trait actif.
+
 ## Écarté du paquet
 
 Ce que le relevé recense mais que le paquet ne livre pas, faute d'usage hors

package/README.md

@@ -31,6 +31,11 @@ pnpm add @zevra/ui
 @import "@zevra/ui/layout.css";      /* conteneurs, grilles, sections, chrome */
 @import "@zevra/ui/surfaces.css";    /* halos, sols, voiles, manifeste */
 @import "@zevra/ui/motion.css";      /* les neuf animations autorisées */
+@import "@zevra/ui/icons.css";       /* dimensionnement des icônes */
+@import "@zevra/ui/forms.css";       /* champs, selects, interrupteurs, dépôt */
+@import "@zevra/ui/feedback.css";    /* alertes, badges, états, chargement */
+@import "@zevra/ui/navigation.css";  /* menus, barre, fil d'Ariane, pagination */
+@import "@zevra/ui/data.css";        /* tableaux, listes, clé-valeur, avatars */
 ```
 
 L'ordre compte : les tokens d'abord, le socle ensuite. Toutes les classes sont
@@ -44,6 +49,24 @@ unique à 768px reprend les valeurs mobiles du relevé.
 Chaque valeur vient des maquettes de la passation. Là où deux planches se
 contredisaient, l'arbitrage est écrit dans [DECISIONS.md](DECISIONS.md).
 
+## Deux couches
+
+Le paquet en porte deux, et elles ne servent pas au même usage.
+
+La **couche vitrine** — `base`, `components`, `layout`, `surfaces`, `motion` —
+compose une page qui se lit : hero, sections, manifeste, cartes produit.
+
+La **couche applicative** — `forms`, `feedback`, `navigation`, `data`, `icons` —
+compose une interface qui s'opère : champs, alertes, menus, tableaux. Elle
+est plus dense, et dispose de son échelle propre (`--app`, `--mono`).
+
+Une app n'a aucune raison de charger les deux. Seuls `tokens.css` et
+`base.css` sont communs.
+
+Le tableau est **à base de grille**, pas de `<table>` : le gabarit de
+colonnes se pose en `--zv-cols` sur le conteneur, et sous 768px la rangée
+s'effondre en carte, chaque valeur reprenant son intitulé.
+
 ## Le mouvement
 
 Neuf animations, pas une de plus, sous le préfixe `zv-anim-`. Sept sont
@@ -172,6 +195,9 @@ ci-dessus fonctionne telle quelle.
    l'index régénéré.
 5. Publier une version : `npm version <patch|minor|major>` puis `npm publish`.
 
+`demo/index.html` exerce la couche vitrine, `demo/app.html` la couche
+applicative. Aucune des deux n'est publiée dans le paquet.
+
 `reference/` conserve les maquettes HTML, le prototype animé et les fichiers
 d'origine de la passation. Ce dossier n'est **pas publié** dans le paquet : il
 sert d'archive et de référence visuelle, pas de dépendance.

package/demo/app.html

@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Zevra UI — couche applicative</title>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600&family=Public+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap">
+<link rel="stylesheet" href="../src/index.css">
+<style>
+  /* Propre à la planche — n'appartient pas au système. */
+  body { padding: 0; }
+  .d-wrap { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; }
+  .d-sec { margin-top: 44px; }
+  .d-sec > h2 { margin: 0 0 4px; }
+  .d-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 16px; }
+  .d-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 16px; }
+  .d-box { border: 1px dashed var(--accent-line); padding: 14px; background: var(--white); }
+</style>
+</head>
+<body>
+
+<div class="d-wrap">
+  <span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">Couche applicative</span></span>
+  <h1 class="zv-h2 zv-h2--sm" style="margin-top:18px">Ce qu'une interface exige <span class="zv-em">et qu'une vitrine ignore.</span></h1>
+  <p class="zv-note" style="margin-top:10px">Chaque composant relevé dans Mémoire, posé une fois. Les cadres pointillés isolent un composant de son voisin.</p>
+
+  <!-- FORMULAIRES -->
+  <section class="d-sec">
+    <span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">01 · Formulaires</span></span>
+    <div class="d-grid">
+      <div class="d-box">
+        <label class="zv-field">
+          <span class="zv-field__head">
+            <span class="zv-field__label">Adresse e-mail</span>
+            <a class="zv-link" href="#" style="font-size:var(--app-sm)">Aide</a>
+          </span>
+          <input class="zv-input" type="email" placeholder="prenom@cabinet.fr">
+          <span class="zv-field__help">Utilisée pour la connexion et les alertes.</span>
+        </label>
+      </div>
+      <div class="d-box">
+        <label class="zv-field zv-field--err">
+          <span class="zv-field__label">Identifiant d'organisation</span>
+          <input class="zv-input zv-input--mono" value="karila-2024" aria-invalid="true">
+          <span class="zv-field__err">Cet identifiant est déjà pris.</span>
+        </label>
+      </div>
+      <div class="d-box">
+        <label class="zv-field">
+          <span class="zv-field__label">Rôle</span>
+          <select class="zv-input zv-input--select">
+            <option>Membre</option><option>Administrateur</option><option>Lecture seule</option>
+          </select>
+        </label>
+      </div>
+      <div class="d-box">
+        <label class="zv-field">
+          <span class="zv-field__label">Note interne</span>
+          <textarea class="zv-textarea" placeholder="Contexte du dossier…"></textarea>
+        </label>
+      </div>
+    </div>
+
+    <div class="d-row">
+      <span class="zv-search"><svg class="zv-search__icon" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="5.5" cy="5.5" r="4"/><line x1="8.6" y1="8.6" x2="12" y2="12"/></svg><input class="zv-search__input" placeholder="Rechercher un document…"></span>
+    </div>
+
+    <div class="d-row">
+      <span class="zv-seg-group">
+        <button class="zv-seg zv-seg--on">Tous <span class="zv-seg__count">128</span></button>
+        <button class="zv-seg">Consultations <span class="zv-seg__count">41</span></button>
+        <button class="zv-seg">Actes <span class="zv-seg__count">63</span></button>
+        <button class="zv-seg zv-seg--mono">PDF</button>
+      </span>
+    </div>
+
+    <div class="d-row">
+      <span class="zv-select-anchor">
+        <button class="zv-select">Périmètre : <strong>Toute la base</strong><span class="zv-select__chevron">▾</span></button>
+      </span>
+      <label class="zv-switch-hit"><span class="zv-switch zv-switch--on"><span class="zv-switch__knob"></span></span><span class="zv-switch__text zv-switch__text--on">Indexation automatique</span></label>
+      <label class="zv-switch-hit"><span class="zv-switch"><span class="zv-switch__knob"></span></span><span class="zv-switch__text">Notifications</span></label>
+    </div>
+
+    <div class="d-row">
+      <label class="zv-switch-hit"><input class="zv-check-box" type="checkbox" checked><span class="zv-switch__text">J'accepte les conditions</span></label>
+      <label class="zv-switch-hit"><input class="zv-radio" type="radio" name="r" checked><span class="zv-switch__text">Mensuel</span></label>
+      <label class="zv-switch-hit"><input class="zv-radio" type="radio" name="r"><span class="zv-switch__text">Annuel</span></label>
+    </div>
+
+    <div class="zv-drop" style="margin-top:16px">
+      <span class="zv-drop__title">Déposer des documents</span>
+      <span class="zv-drop__hint">Glissez vos fichiers ici, ou <span class="zv-drop__browse">parcourez votre disque</span>.</span>
+      <span class="zv-drop__spec">PDF, DOCX — 40 Mo maximum</span>
+    </div>
+  </section>
+
+  <!-- RETOURS -->
+  <section class="d-sec">
+    <span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">02 · Retours</span></span>
+    <div class="d-row" style="flex-direction:column;align-items:stretch">
+      <div class="zv-alert zv-alert--info">L'indexation reprendra automatiquement à la reconnexion.</div>
+      <div class="zv-alert zv-alert--ok">Douze documents importés, tous indexés.</div>
+      <div class="zv-alert zv-alert--warn">Trois documents scannés attendent la reconnaissance de texte.</div>
+      <div class="zv-alert zv-alert--err">Impossible de joindre le service d'indexation. Réessayez dans un instant.</div>
+      <div class="zv-alert zv-alert--dash">Réponse construite à partir de vos documents, sans recours à un modèle externe.</div>
+    </div>
+
+    <div class="d-row">
+      <span class="zv-badge zv-badge--ok">Indexé</span>
+      <span class="zv-badge zv-badge--warn">OCR en cours</span>
+      <span class="zv-badge zv-badge--err">Échec</span>
+      <span class="zv-badge zv-badge--accent">Nouveau</span>
+      <span class="zv-badge zv-badge--neutre">Brouillon</span>
+      <span class="zv-badge zv-badge--micro">v2</span>
+      <span class="zv-badge zv-badge--dot"><span class="zv-dot zv-dot--ok"></span>En ligne</span>
+    </div>
+
+    <div class="d-row">
+      <span class="zv-status"><span class="zv-dot zv-dot--indexe"></span><span class="zv-status__label">Indexé</span></span>
+      <span class="zv-status"><span class="zv-dot zv-dot--indexation"></span><span class="zv-status__label">Indexation…</span></span>
+      <span class="zv-status"><span class="zv-dot zv-dot--ocr"></span><span class="zv-status__label">Reconnaissance de texte</span></span>
+      <span class="zv-status"><span class="zv-dot zv-dot--erreur"></span><span class="zv-status__label">Erreur</span></span>
+      <span class="zv-status"><span class="zv-dot zv-dot--recu"></span><span class="zv-status__label">Reçu</span></span>
+      <span class="zv-loading">Chargement…</span>
+    </div>
+
+    <div class="zv-empty" style="margin-top:16px">
+      <div class="zv-empty__title">Aucun document</div>
+      <div class="zv-empty__text">Déposez vos premiers actes pour que Mémoire puisse les interroger.</div>
+      <a class="zv-btn zv-btn--sm zv-empty__action" href="#">Importer</a>
+    </div>
+  </section>
+
+  <!-- NAVIGATION -->
+  <section class="d-sec">
+    <span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">03 · Navigation</span></span>
+
+    <div class="d-box" style="margin-top:16px;padding:0">
+      <div class="zv-topbar">
+        <button class="zv-topbar__burger zv-icon-btn" aria-label="Ouvrir le menu"><svg class="zv-icon"><use href="../icons/sprite.svg#zv-menu"/></svg></button>
+        <span class="zv-topbar__title">Bibliothèque</span>
+      </div>
+    </div>
+
+    <div class="d-grid">
+      <div class="d-box" style="padding:0">
+        <nav class="zv-sidebar" style="height:auto">
+          <div class="zv-sidebar__head"><span class="zv-mono zv-mono--micro">Cabinet Karila</span></div>
+          <div class="zv-sidegroup">
+            <span class="zv-sidegroup__title">Travail</span>
+            <a class="zv-sidelink zv-sidelink--on" href="#"><svg class="zv-icon zv-icon--sm"><use href="../icons/sprite.svg#zv-recherche"/></svg>Recherche</a>
+            <a class="zv-sidelink" href="#"><svg class="zv-icon zv-icon--sm"><use href="../icons/sprite.svg#zv-dossier"/></svg>Bibliothèque <span class="zv-sidelink__num">128</span></a>
+            <a class="zv-sidelink" href="#"><svg class="zv-icon zv-icon--sm"><use href="../icons/sprite.svg#zv-equipe"/></svg>Répertoire</a>
+          </div>
+        </nav>
+      </div>
+      <div class="d-box">
+        <span class="zv-crumbs"><a class="zv-crumbs__seg" href="#">Bibliothèque</a><span class="zv-crumbs__sep">/</span><a class="zv-crumbs__seg" href="#">Actes</a><span class="zv-crumbs__sep">/</span><span class="zv-crumbs__seg">Cession de parts</span></span>
+        <div class="zv-menu" style="position:static;margin-top:16px">
+          <button class="zv-menu__item zv-menu__item--on">Toute la base</button>
+          <button class="zv-menu__item">Consultations</button>
+          <button class="zv-menu__item">Actes signés</button>
+        </div>
+        <div class="zv-pager" style="margin-top:16px">
+          <button class="zv-pager__arrow" aria-label="Page précédente">‹</button>
+          <span class="zv-pager__rank">1 – 25 sur 128</span>
+          <button class="zv-pager__arrow" aria-label="Page suivante">›</button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- DONNÉES -->
+  <section class="d-sec">
+    <span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">04 · Données</span></span>
+
+    <!-- Le tableau est à base de GRILLE, pas de <table> : c'est ainsi qu'il
+         est relevé, et le gabarit de colonnes se pose sur le conteneur. -->
+    <div class="zv-table" style="margin-top:16px;--zv-cols:minmax(180px,1.4fr) 108px 132px 84px 104px">
+      <div class="zv-table__head">
+        <span>Document</span>
+        <span>Nature</span>
+        <span>Statut</span>
+        <span>Taille</span>
+        <span>Indexé le</span>
+      </div>
+      <div class="zv-row">
+        <span class="zv-cell zv-cell--name"><span class="zv-filetype zv-filetype--pdf">PDF</span><span class="zv-trunc">Cession de parts — SCI Beaumont</span></span>
+        <span class="zv-cell">Acte</span>
+        <span class="zv-cell"><span class="zv-status"><span class="zv-dot zv-dot--indexe"></span><span class="zv-status__label">Indexé</span></span></span>
+        <span class="zv-cell zv-cell--num"><span class="zv-cell__label">Taille</span>2,4 Mo</span>
+        <span class="zv-cell zv-cell--num">12/08/2026</span>
+      </div>
+      <div class="zv-row">
+        <span class="zv-cell zv-cell--name"><span class="zv-filetype zv-filetype--docx">DOCX</span><span class="zv-trunc">Consultation — garantie autonome</span></span>
+        <span class="zv-cell">Consultation</span>
+        <span class="zv-cell"><span class="zv-status"><span class="zv-dot zv-dot--ocr"></span><span class="zv-status__label">OCR</span></span></span>
+        <span class="zv-cell zv-cell--num"><span class="zv-cell__label">Taille</span>840 Ko</span>
+        <span class="zv-cell zv-cell--num">11/08/2026</span>
+      </div>
+      <div class="zv-pager zv-pager--foot">
+        <button class="zv-pager__arrow" aria-label="Page précédente">‹</button>
+        <span class="zv-pager__rank">1 – 25 sur 128</span>
+        <button class="zv-pager__arrow" aria-label="Page suivante">›</button>
+      </div>
+    </div>
+
+    <div class="d-grid">
+      <div class="d-box">
+        <div class="zv-kv zv-kv--grid">
+          <div class="zv-kv__row"><span class="zv-kv__key">Nature</span><span class="zv-kv__val">Acte de cession</span></div>
+          <div class="zv-kv__row"><span class="zv-kv__key">Pages</span><span class="zv-kv__val">14</span></div>
+          <div class="zv-kv__row"><span class="zv-kv__key">Signé le</span><span class="zv-kv__val">04/07/2026</span></div>
+        </div>
+      </div>
+      <div class="d-box">
+        <div class="zv-list">
+          <div class="zv-list__row"><span class="zv-avatar zv-avatar--accent">MK</span><span class="zv-list__main"><span class="zv-list__name">Maître Karila</span><span class="zv-meta">Associé · 4 dossiers</span></span></div>
+          <div class="zv-list__row"><span class="zv-avatar zv-avatar--soft">CL</span><span class="zv-list__main"><span class="zv-list__name">Clesame</span><span class="zv-meta zv-meta--quiet">Client · 12 documents</span></span></div>
+        </div>
+      </div>
+      <div class="d-box">
+        <span class="zv-chip-row"><span class="zv-chip">Garantie</span><span class="zv-chip zv-chip--outline">Cession</span><span class="zv-chip zv-chip--mono">40 %</span></span>
+        <p class="zv-cite-row" style="margin-top:14px"><span class="zv-cite">p. 12</span> Garantie autonome plafonnée à 40 % du prix de cession.</p>
+      </div>
+    </div>
+  </section>
+
+</div>
+</body>
+</html>

package/demo/index.html

@@ -0,0 +1,242 @@
+<!doctype html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Zevra UI — planche de vérification</title>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600&family=Public+Sans:wght@400;600&family=Space+Grotesk:wght@500;600;700&display=swap">
+<link rel="stylesheet" href="../src/index.css">
+<style>
+  /* Propre à la planche : elle n'appartient pas au système. */
+  .demo-sec { padding-top: 72px; }
+  .demo-sec > h2 { margin: 0 0 6px; }
+  .demo-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
+  .demo-row > * { min-width: 240px; }
+  .demo-note { margin-top: 4px; }
+</style>
+</head>
+<body>
+<div class="zv-page">
+
+  <!-- Chrome -->
+  <nav class="zv-nav zv-gutter">
+    <span class="zv-display" style="font-size:21px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Zevra</span>
+    <a class="zv-btn zv-btn--sm zv-only-mobile" href="#">Réserver</a>
+    <span class="zv-nav__links zv-only-desktop">
+      <a class="zv-navlink" href="#">Produits</a>
+      <a class="zv-navlink" href="#">Méthode</a>
+      <a class="zv-navlink zv-navlink--quiet" href="#">Se connecter</a>
+      <a class="zv-btn zv-btn--sm" href="#">Réserver 30 min</a>
+    </span>
+  </nav>
+
+  <!-- Hero -->
+  <header class="zv-hero zv-gutter--wide">
+    <span class="zv-halo zv-halo--hero zv-anim-breathe" aria-hidden="true"></span>
+    <span class="zv-kicker zv-kicker--center">
+      <span class="zv-spec" aria-hidden="true"></span>
+      <span class="zv-mono">Planche de vérification</span>
+    </span>
+    <h1 class="zv-h1">Un système pour des outils <span class="zv-em">qui refusent de louer leur intelligence.</span></h1>
+    <p class="zv-lead">Cette page n'existe que pour regarder le paquet fonctionner : chaque composant y est posé une fois, dans son contexte.</p>
+    <span class="zv-tagline">Votre savoir, interrogeable en une phrase</span>
+    <span class="zv-btn-row">
+      <a class="zv-btn" href="#">Action principale</a>
+      <a class="zv-btn--ghost" href="#">Action secondaire</a>
+    </span>
+  </header>
+
+  <!-- Typographie -->
+  <section class="zv-gutter demo-sec">
+    <span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">01 · Typographie</span></span>
+    <div class="zv-grid-12" style="margin-top:28px">
+      <div class="zv-col-8">
+        <h2 class="zv-h2">Titre de section <span class="zv-em">en deux temps.</span></h2>
+        <p class="zv-lead demo-note">Chapô — 18px, gris, interligne 1.6.</p>
+        <p class="zv-body demo-note">Corps de texte à 15px. Un <strong>mot fort</strong> passe en encre.</p>
+        <p class="zv-body zv-body--dense demo-note">Variante dense à 13px, pour les légendes de carte.</p>
+        <p class="zv-rule demo-note">Texte de règle à 14px, celui des planches de documentation.</p>
+      </div>
+      <div class="zv-col-4">
+        <p class="zv-body zv-body--lg">Colonne d'accompagnement à 16px, alignée sur le bas du titre.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Boutons et badges -->
+  <section class="zv-gutter demo-sec">
+    <span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">02 · Boutons et badges</span></span>
+    <div class="demo-row">
+      <a class="zv-btn" href="#">Bouton plein</a>
+      <a class="zv-btn--ghost" href="#">Fantôme</a>
+      <a class="zv-btn--ink" href="#">Encre</a>
+      <a class="zv-btn zv-btn--sm" href="#">Compact</a>
+      <button class="zv-btn" disabled>Désactivé</button>
+      <a class="zv-link-arrow" href="#">Lien fléché
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>
+      </a>
+    </div>
+    <div class="demo-row">
+      <span class="zv-pill">Pièce 01 · Connaissance</span>
+      <span class="zv-src-row">
+        <span class="zv-src">BOSS</span><span class="zv-src">Judilibre</span><span class="zv-src">KALI</span><span class="zv-src zv-src--quiet">+ 11</span>
+      </span>
+      <span class="zv-tag zv-tag--ok">Validé</span>
+      <span class="zv-tag zv-tag--err">Interdit</span>
+    </div>
+    <p class="zv-ent-text demo-row" style="display:block">Par acte du <span class="zv-ent">DATE_1</span>, la société <span class="zv-ent">SOCIÉTÉ_1</span> a cédé à <span class="zv-ent">PERSONNE_1</span> l'intégralité des parts.</p>
+    <div class="zv-progress" style="margin-top:24px"><span class="zv-progress__fill" style="width:38%"></span></div>
+  </section>
+
+  <!-- Cartes -->
+  <section class="zv-gutter demo-sec">
+    <span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">03 · Cartes et encarts</span></span>
+    <div class="zv-grid-3" style="margin-top:28px">
+      <article class="zv-card zv-card--pad-lg" style="display:flex;flex-direction:column;gap:18px;min-height:300px">
+        <span class="zv-mono zv-mono--label">Recherche</span>
+        <h3 class="zv-card-title">Une carte produit, avec sa preuve en bas.</h3>
+        <div class="zv-inset zv-inset--bottom">Réponse sourcée sur <span class="zv-inset__key">14 décisions</span>.</div>
+      </article>
+      <article class="zv-card zv-card--pad-lg" style="display:flex;flex-direction:column;gap:18px;min-height:300px">
+        <span class="zv-mono zv-mono--label">Rédaction</span>
+        <h3 class="zv-card-title">Encart de document, plus aéré.</h3>
+        <div class="zv-inset zv-inset--quiet zv-inset--bottom">Extrait de l'acte, restitué tel quel dans le fil du dossier.</div>
+      </article>
+      <article class="zv-card zv-card--pad-lg" style="display:flex;flex-direction:column;gap:18px;min-height:300px">
+        <span class="zv-mono zv-mono--label">Mesure</span>
+        <h3 class="zv-card-title">Statistiques de pied de carte.</h3>
+        <div class="zv-ministat zv-inset--bottom">
+          <div class="zv-ministat__item"><span class="zv-mono zv-mono--micro">Sources</span><span class="zv-ministat__value">1 240</span></div>
+          <div class="zv-ministat__item"><span class="zv-mono zv-mono--micro">Délai</span><span class="zv-ministat__value">1,8 s</span></div>
+        </div>
+      </article>
+    </div>
+    <div class="demo-row" style="align-items:stretch">
+      <div class="zv-card zv-card--ok zv-card--pad" style="flex:1"><span class="zv-tag zv-tag--ok">Oui</span><p class="zv-body zv-body--dense" style="margin-top:8px">Carte d'état validé.</p></div>
+      <div class="zv-card zv-card--err zv-card--pad" style="flex:1"><span class="zv-tag zv-tag--err">Non</span><p class="zv-body zv-body--dense" style="margin-top:8px">Carte d'état refusé.</p></div>
+      <div class="zv-stat-card"><span class="zv-mono zv-mono--micro">Cabinets</span><span class="zv-stat-card__value">38</span><span class="zv-body zv-body--dense">équipés cette année</span></div>
+    </div>
+  </section>
+
+  <!-- Surfaces -->
+  <section class="demo-sec">
+    <div class="zv-gutter">
+      <span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">04 · Surfaces</span></span>
+    </div>
+    <div style="position:relative;overflow:hidden;height:280px;margin-top:24px">
+      <span class="zv-grid-floor" aria-hidden="true"></span>
+      <span class="zv-fade" aria-hidden="true"></span>
+      <div class="zv-glass zv-gutter" style="position:relative;max-width:520px;margin:48px auto 0;padding-top:28px;padding-bottom:28px">
+        <span class="zv-mono zv-mono--label">Carte verre</span>
+        <p class="zv-body" style="margin-top:10px">Posée devant un sol quadrillé, avec son voile de fondu.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Manifeste -->
+  <section class="zv-band" style="margin-top:64px">
+    <span class="zv-band__glow" aria-hidden="true"></span>
+    <div class="zv-band__content zv-gutter">
+      <span class="zv-kicker"><span class="zv-spec zv-spec--on-dark" aria-hidden="true"></span><span class="zv-mono zv-mono--on-dark">05 · Manifeste</span></span>
+      <h2 class="zv-h2" style="margin-top:24px;max-width:900px">La seule surface sombre du système, <span class="zv-em zv-em--on-dark">et elle ne s'obtient pas en inversant les neutres.</span></h2>
+      <p class="zv-body" style="margin-top:20px;max-width:560px">Les labels passent en indigo clair, les filets en blanc à 18 %.</p>
+      <div class="zv-stats" style="margin-top:40px">
+        <div class="zv-stat"><span class="zv-stat__value">5</span><span class="zv-mono zv-mono--micro zv-mono--on-dark">produits</span></div>
+        <div class="zv-stat"><span class="zv-stat__value">40</span><span class="zv-mono zv-mono--micro zv-mono--on-dark">logos</span></div>
+        <div class="zv-stat"><span class="zv-stat__value">32</span><span class="zv-mono zv-mono--micro zv-mono--on-dark">tokens</span></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Méthode -->
+  <section class="zv-gutter demo-sec">
+    <span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">06 · Méthode</span></span>
+    <div class="zv-steps" style="margin-top:36px">
+      <span class="zv-steps__rail" aria-hidden="true"></span>
+      <span class="zv-steps__progress" style="width:38%" aria-hidden="true"></span>
+      <div class="zv-step"><span class="zv-step__dot" aria-hidden="true"></span><span class="zv-mono zv-mono--label">Étape 01</span><h3 class="zv-card-title">Relever</h3><p class="zv-rule">Les valeurs viennent des maquettes, pas de l'intuition.</p></div>
+      <div class="zv-step"><span class="zv-step__dot zv-step__dot--violet" aria-hidden="true"></span><span class="zv-mono zv-mono--label">Étape 02</span><h3 class="zv-card-title">Arbitrer</h3><p class="zv-rule">Chaque désaccord est écrit, jamais tranché en silence.</p></div>
+      <div class="zv-step"><span class="zv-step__dot zv-step__dot--cyan" aria-hidden="true"></span><span class="zv-mono zv-mono--label">Étape 03</span><h3 class="zv-card-title">Verrouiller</h3><p class="zv-rule">Un test échoue si les deux sources divergent.</p></div>
+    </div>
+  </section>
+
+  <!-- Blocs de landing -->
+  <section class="zv-gutter demo-sec">
+    <span class="zv-kicker"><span class="zv-spec zv-anim-filet" aria-hidden="true"></span><span class="zv-mono">07 · Blocs de landing</span></span>
+    <h2 class="zv-h2 zv-h2--sm zv-anim-rise" style="margin-top:20px">Un titre de landing, <span class="zv-em">d'un cran plus court.</span></h2>
+    <div class="zv-grid-3" style="margin-top:28px;align-items:start">
+
+      <div class="zv-price zv-price--featured">
+        <span class="zv-pill">Early adopter</span>
+        <span class="zv-price__amount">1 250 € <span class="zv-price__unit">HT · 1re année</span></span>
+        <span class="zv-price__note">Puis 2 900 € HT plein tarif.</span>
+        <span class="zv-note" style="display:flex;align-items:center;gap:8px;margin-top:4px">
+          <span class="zv-check" aria-hidden="true"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>
+          Mise en service incluse
+        </span>
+      </div>
+
+      <div class="zv-quote">
+        <span class="zv-spec zv-spec--on-dark" aria-hidden="true"></span>
+        <span class="zv-quote__text">« [Citation client à recueillir.] »</span>
+        <span class="zv-mono zv-mono--micro zv-mono--on-dark">[Nom, cabinet]</span>
+      </div>
+
+      <div class="zv-ui-preview">
+        <span class="zv-ui-preview__q">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
+          Quelle clause de garantie depuis 2021 ?
+        </span>
+        <span class="zv-divider" aria-hidden="true"></span>
+        <span class="zv-ui-preview__a">Garantie autonome plafonnée à 40 %… <span class="zv-ui-preview__count">3 sources</span></span>
+        <span class="zv-src-row"><span class="zv-src">Consultation</span><span class="zv-src">Protocole</span></span>
+      </div>
+
+    </div>
+
+    <div class="zv-card" style="margin-top:24px;overflow:hidden">
+      <div class="zv-faq">
+        <div class="zv-faq__q">Où sont hébergées nos données ?
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
+        </div>
+        <div class="zv-faq__a">En France, sur infrastructure OVHcloud, dans un réseau privé cloisonné.</div>
+      </div>
+    </div>
+
+    <div class="zv-card" style="margin-top:24px">
+      <div class="zv-proof-bar">
+        <span class="zv-mono zv-mono--micro">Ils bâtissent avec nous</span>
+        <span class="zv-proof-bar__names"><span>Karila</span><span>Orange</span><span>Clesame</span><span>Beside Avocats</span><span>Dairia</span><span>BL-NK</span></span>
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA -->
+  <section class="zv-cta zv-gutter--wide">
+    <span class="zv-halo zv-halo--cta" aria-hidden="true"></span>
+    <span class="zv-kicker zv-kicker--center"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">Fin de planche</span></span>
+    <h2 class="zv-h2 zv-h2--cta">Le titre de CTA prend <span class="zv-em">un cran de plus.</span></h2>
+    <a class="zv-btn" href="#">Action finale</a>
+  </section>
+
+  <footer class="zv-footer zv-inset-x">
+    <div class="zv-footer__brand">
+      <span class="zv-spec zv-spec--sm" aria-hidden="true"></span>
+      <p class="zv-body zv-body--dense">Zevra UI — design system « Encre &amp; Papier ».</p>
+      <span class="zv-mono zv-mono--micro">Planche de vérification, hors paquet</span>
+    </div>
+    <div class="zv-footer__cols">
+      <div><span class="zv-mono zv-mono--micro zv-mono--ink" style="display:block">Modules</span><a class="zv-link" href="#">tokens</a><br><a class="zv-link" href="#">base</a><br><a class="zv-link" href="#">components</a></div>
+      <div><span class="zv-mono zv-mono--micro zv-mono--ink" style="display:block">Suite</span><a class="zv-link" href="#">layout</a><br><a class="zv-link" href="#">surfaces</a></div>
+    </div>
+  </footer>
+
+  <div class="zv-footer-mini">
+    <span class="zv-mono zv-mono--micro">Zevra · Legaltech souveraine · France</span>
+    <span class="zv-spec" style="width:32px" aria-hidden="true"></span>
+  </div>
+
+</div>
+</body>
+</html>