@zevra/ui 0.4.0 → 0.5.0

package/react/catalogue.tsx

@@ -0,0 +1,1644 @@
+'use client'
+
+// Catalogue — la planche de tous les composants, avec un exemple rendu et le
+// code qui le produit.
+//
+// Il est PUBLIÉ avec le paquet, pas cantonné aux tests, et c'est délibéré :
+//   · la page « Design system » de l'admin le rend tel quel, donc la
+//     documentation ne peut pas dériver des composants — c'est le même code ;
+//   · tests/react.test.js le rend en HTML et vérifie que chaque classe émise
+//     existe dans le CSS. Un composant absent du catalogue n'est pas couvert :
+//     c'est le rappel le plus efficace qu'on ait trouvé pour le tenir complet.
+//
+// « use client » parce que les enrobages ont besoin d'état pour se démontrer.
+// Ce module n'est jamais importé par le barrel : une app qui ne l'importe pas
+// ne l'embarque pas.
+
+import { useState, type ReactNode } from 'react'
+import { Button, ButtonLink, ButtonRow, LinkArrow } from './actions.js'
+import {
+  Card, Check, Divider, Ent, EntText, Faq, FaqItem, Glass, Inset, MiniStat,
+  MiniStatItem, Pill, Price, Quote, Src, SrcRow, StatCard, Tag, UiPreview,
+} from './content.js'
+import {
+  Avatar, Break, Cell, Chip, ChipRow, Cite, CiteRow, FileType, KV, KVRow,
+  List, ListMain, ListName, ListRow, Meta, MetaRow, Row, Table, TableHead,
+  Trunc, Unwrap,
+} from './data.js'
+import {
+  Alert, Badge, Caret, Dot, Empty, Loading, Progress, Status,
+} from './feedback.js'
+import {
+  Checkbox, Drop, Field, Input, Radio, Search, Seg, SegGroup, Select,
+  SelectAnchor, SelectTrigger, Switch, Textarea,
+} from './forms.js'
+import { ICONES, Icon, IconButton, NOMS_ICONES } from './icon.js'
+import {
+  CTA, Col, Footer, FooterMini, Grid, Grid12, Gutter, Hero, Nav, NavLink,
+  NavLinks, NavLogo, ProofBar, SectionHead, SectionRule, SheetSection, Stat,
+  Stats, Step, Steps,
+} from './layout.js'
+import {
+  ChromeButton, CitePanel, Crumbs, Menu, MenuItem, Pager, PagerArrow,
+  PagerRank, PagerStep, Scroll, SideGroup, SideLink, Sidebar, SidebarFoot,
+  SidebarHead, Tabs, Topbar, TopbarTitle,
+} from './navigation.js'
+import { Drawer, Modal, Toast, Toasts } from './overlays.js'
+import { Band, Fade, Glyph, GridFloor, Halo, PanelNavy, TextOnDark, anim } from './surfaces.js'
+import {
+  Body, CardTitle, Display, Em, H1, H2, H3, Heading, Kicker, Lead, Link, Mono, Note,
+  Rule, Spec, Tagline,
+} from './typography.js'
+
+export interface Exemple {
+  /** Identifiant stable — sert d'ancre dans la page de consultation. */
+  id: string
+  nom: string
+  /** Ce que le composant fait, et surtout quand NE PAS l'employer. */
+  resume: string
+  /** Le code qui produit `rendu`, à copier tel quel. */
+  code: string
+  rendu: ReactNode
+  /** Rendu sur la bande manifeste plutôt que sur papier. */
+  surSombre?: boolean
+}
+
+export interface GroupeCatalogue {
+  id: string
+  nom: string
+  resume: string
+  /** `applicatif` : interfaces internes. `vitrine` : pages publiques.
+   *  `commun` : les deux. */
+  couche: 'commun' | 'applicatif' | 'vitrine'
+  /** Le module CSS à charger pour ce groupe. */
+  css: string
+  exemples: Exemple[]
+}
+
+/* ── Démonstrations qui ont besoin d'état ─────────────────────────── */
+
+function DemoSwitch() {
+  const [on, setOn] = useState(true)
+  return <Switch on={on} texte={on ? 'ACTIVÉ' : 'DÉSACTIVÉ'} onClick={() => setOn(!on)} />
+}
+
+function DemoSeg() {
+  const [actif, setActif] = useState('tous')
+  return (
+    <SegGroup>
+      {[
+        ['tous', 'Tous', 128],
+        ['contrats', 'Contrats', 42],
+        ['jugements', 'Jugements', 9],
+      ].map(([id, label, n]) => (
+        <Seg
+          key={id as string}
+          on={actif === id}
+          compte={n as number}
+          onClick={() => setActif(id as string)}
+        >
+          {label as string}
+        </Seg>
+      ))}
+    </SegGroup>
+  )
+}
+
+function DemoTabs() {
+  const [actif, setActif] = useState<'apercu' | 'sources'>('apercu')
+  return (
+    <Tabs
+      actif={actif}
+      onChange={setActif}
+      onglets={[
+        { id: 'apercu', label: 'Aperçu' },
+        { id: 'sources', label: 'Sources', compte: 12 },
+      ]}
+    />
+  )
+}
+
+function DemoMenu() {
+  const [ouvert, setOuvert] = useState(false)
+  const [valeur, setValeur] = useState('Toute la base')
+  return (
+    <SelectAnchor>
+      <SelectTrigger label="PÉRIMÈTRE" value={valeur} onClick={() => setOuvert(!ouvert)} />
+      {ouvert && (
+        <Menu>
+          {['Toute la base', 'Contrats', 'Jugements'].map((v) => (
+            <MenuItem
+              key={v}
+              actif={v === valeur}
+              onClick={() => {
+                setValeur(v)
+                setOuvert(false)
+              }}
+            >
+              {v}
+            </MenuItem>
+          ))}
+        </Menu>
+      )}
+    </SelectAnchor>
+  )
+}
+
+function DemoDrawer() {
+  const [ouvert, setOuvert] = useState(false)
+  return (
+    <>
+      <Button variante="fantome" compact onClick={() => setOuvert(true)}>
+        Ouvrir le tiroir
+      </Button>
+      <Drawer
+        ouvert={ouvert}
+        onClose={() => setOuvert(false)}
+        fermeture={<ChromeButton aria-label="Fermer" onClick={() => setOuvert(false)}>×</ChromeButton>}
+      >
+        <Sidebar>
+          <SidebarHead>
+            <Mono ton="label">ZEVRA</Mono>
+          </SidebarHead>
+          <SideGroup titre="Espace">
+            <SideLink href="#" courant num="01">
+              Bibliothèque
+            </SideLink>
+            <SideLink href="#" num="02">
+              Répertoire
+            </SideLink>
+          </SideGroup>
+        </Sidebar>
+      </Drawer>
+    </>
+  )
+}
+
+function DemoModal() {
+  const [ouvert, setOuvert] = useState(false)
+  return (
+    <>
+      <Button variante="fantome" compact onClick={() => setOuvert(true)}>
+        Ouvrir la modale
+      </Button>
+      <Modal
+        ouvert={ouvert}
+        onClose={() => setOuvert(false)}
+        titre="Supprimer l'organisation"
+        danger
+        pied={
+          <ButtonRow>
+            <Button variante="fantome" onClick={() => setOuvert(false)}>
+              Annuler
+            </Button>
+            <Button onClick={() => setOuvert(false)}>Supprimer</Button>
+          </ButtonRow>
+        }
+      >
+        <Body>
+          Les 4 812 documents indexés et leurs annotations seront détruits. Cette
+          action est irréversible.
+        </Body>
+      </Modal>
+    </>
+  )
+}
+
+function DemoDrop() {
+  const [survol, setSurvol] = useState(false)
+  return (
+    <Drop
+      survol={survol}
+      titre="Déposer des documents"
+      spec="PDF, DOCX · 25 Mo par fichier"
+      parcourir="Parcourir les fichiers"
+      onDragOver={(e) => {
+        e.preventDefault()
+        setSurvol(true)
+      }}
+      onDragLeave={() => setSurvol(false)}
+      onDrop={(e) => {
+        e.preventDefault()
+        setSurvol(false)
+      }}
+    />
+  )
+}
+
+/* ── Le catalogue ─────────────────────────────────────────────────── */
+
+export const CATALOGUE: GroupeCatalogue[] = [
+  {
+    id: 'typographie',
+    nom: 'Typographie',
+    couche: 'commun',
+    css: 'base.css',
+    resume:
+      "Titres, corps, kickers, labels mono. La TAILLE est un choix de mise en page, la BALISE un choix de structure : d'où la prop « as », qui les sépare.",
+    exemples: [
+      {
+        id: 'headings',
+        nom: 'Titres',
+        resume:
+          'Six paliers. Une page n’a qu’un <h1>, mais peut avoir plusieurs blocs à sa taille — passer « as » plutôt que de casser le plan du document.',
+        code: `<H1>La recherche juridique, sourcée</H1>
+<H2 as="h3">Ce que voit votre équipe</H2>
+<H3>Indexation continue</H3>
+<CardTitle>Bibliothèque</CardTitle>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 12 }}>
+            <H1>La recherche juridique, sourcée</H1>
+            <H2 as="h3">Ce que voit votre équipe</H2>
+            <H3>Indexation continue</H3>
+            <CardTitle>Bibliothèque</CardTitle>
+          </div>
+        ),
+      },
+      {
+        id: 'display',
+        nom: 'Display',
+        resume:
+          'Chiffre ou mot posé pour sa présence, HORS de la hiérarchie des titres — annoncé comme titre de section, il pollue le plan du document.',
+        code: `<Display>4 812</Display>`,
+        rendu: <Display>4 812</Display>,
+      },
+      {
+        id: 'corps',
+        nom: 'Corps et chapô',
+        resume:
+          'Trois densités de corps, plus le chapô qui suit un titre de section et la note de bas de bloc.',
+        code: `<Lead>Chaque réponse cite ses sources.</Lead>
+<Body>Le moteur relit l’intégralité des pièces déposées…</Body>
+<Body taille="dense">Variante resserrée, pour une carte.</Body>
+<Note>Hébergement souverain, données chiffrées au repos.</Note>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 10 }}>
+            <Lead>Chaque réponse cite ses sources.</Lead>
+            <Body>
+              Le moteur relit l’intégralité des pièces déposées, y compris les annexes
+              scannées, et rattache chaque affirmation au passage qui la fonde.
+            </Body>
+            <Body taille="dense">Variante resserrée, pour une carte.</Body>
+            <Note>Hébergement souverain, données chiffrées au repos.</Note>
+          </div>
+        ),
+      },
+      {
+        id: 'kicker',
+        nom: 'Kicker et filet',
+        resume:
+          'Le filet de spectre 56×2 devant un sur-titre. PREMIER des trois emplois autorisés du spectre — jamais en fond, jamais en texte.',
+        code: `<Kicker>Méthode</Kicker>
+<Kicker variante="stack">Sécurité</Kicker>
+<Spec petit />`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 14 }}>
+            <Kicker>Méthode</Kicker>
+            <Kicker variante="stack">Sécurité</Kicker>
+          </div>
+        ),
+      },
+      {
+        id: 'mono',
+        nom: 'Label mono',
+        resume:
+          'Capitales espacées, RÉSERVÉES aux libellés. Une date ou un nom de fichier en capitales espacées devient illisible : pour ceux-là c’est « Meta ».',
+        code: `<Mono ton="label">PÉRIMÈTRE</Mono>
+<Mono ton="ink">12 SOURCES</Mono>
+<Mono ton="muted" micro>V2.4.1</Mono>`,
+        rendu: (
+          <div style={{ display: 'flex', gap: 18, alignItems: 'baseline', flexWrap: 'wrap' }}>
+            <Mono ton="label">PÉRIMÈTRE</Mono>
+            <Mono ton="ink">12 SOURCES</Mono>
+            <Mono ton="muted" micro>
+              V2.4.1
+            </Mono>
+          </div>
+        ),
+      },
+      {
+        id: 'texte-inline',
+        nom: 'Dans le fil du texte',
+        resume:
+          'Mise en valeur, lien, signature de marque, filet neutre. « Em » a un pendant « surSombre » parce que l’indigo d’accent devient illisible sur la bande manifeste.',
+        code: `<Body>Une réponse <Em>toujours sourcée</Em>, jamais inventée.</Body>
+<Link href="/methode">Voir la méthode</Link>
+<Tagline>L’intelligence documentaire souveraine</Tagline>
+<Rule />`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 10 }}>
+            <Body>
+              Une réponse <Em>toujours sourcée</Em>, jamais inventée.
+            </Body>
+            <Link href="#">Voir la méthode</Link>
+            <Tagline>L’intelligence documentaire souveraine</Tagline>
+            <Rule />
+          </div>
+        ),
+      },
+    ],
+  },
+
+  {
+    id: 'actions',
+    nom: 'Actions',
+    couche: 'commun',
+    css: 'components.css',
+    resume:
+      "Trois variantes, et UNE SEULE pleine par page : c'est ce qui fait que l'action principale se voit. Un écran à deux boutons pleins n'en a plus aucun.",
+    exemples: [
+      {
+        id: 'boutons',
+        nom: 'Boutons',
+        resume:
+          '« plein » pour l’action principale, « fantôme » pour l’alternative, « encre » sur une surface claire où l’indigo se perdrait.',
+        code: `<ButtonRow>
+  <Button>Demander une démonstration</Button>
+  <Button variante="fantome">En savoir plus</Button>
+  <Button variante="encre">Se connecter</Button>
+</ButtonRow>`,
+        rendu: (
+          <ButtonRow>
+            <Button>Demander une démonstration</Button>
+            <Button variante="fantome">En savoir plus</Button>
+            <Button variante="encre">Se connecter</Button>
+          </ButtonRow>
+        ),
+      },
+      {
+        id: 'boutons-gabarits',
+        nom: 'Gabarits',
+        resume:
+          '« compact » dans une barre d’outils ou un pied de carte ; « bloc » pour un formulaire mobile, où l’action doit être atteignable au pouce.',
+        code: `<Button compact>Enregistrer</Button>
+<Button bloc>Se connecter</Button>
+<ButtonLink href="/tarifs" variante="fantome">Voir les tarifs</ButtonLink>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 10, maxWidth: 280 }}>
+            <ButtonRow>
+              <Button compact>Enregistrer</Button>
+              <ButtonLink href="#" variante="fantome" compact>
+                Voir les tarifs
+              </ButtonLink>
+            </ButtonRow>
+            <Button bloc>Se connecter</Button>
+          </div>
+        ),
+      },
+      {
+        id: 'lien-fleche',
+        nom: 'Lien fléché',
+        resume:
+          'La flèche fait partie du composant, pas du contenu : recopiée à la main, elle a produit trois tracés différents.',
+        code: `<LinkArrow href="/methode">Comment ça marche</LinkArrow>`,
+        rendu: <LinkArrow href="#">Comment ça marche</LinkArrow>,
+      },
+      {
+        id: 'icon-btn',
+        nom: 'Bouton d’icône',
+        resume:
+          'Le libellé accessible est OBLIGATOIRE, et s’écrit pour l’ACTION (« Fermer le panneau ») et non pour le dessin (« Croix »).',
+        code: `<IconButton icone="fermer" label="Fermer le panneau" />
+<IconButton icone="telecharger" label="Télécharger le document" />`,
+        rendu: (
+          <div style={{ display: 'flex', gap: 6 }}>
+            <IconButton icone={ICONES[0]!} label={NOMS_ICONES[ICONES[0]!]} />
+            <IconButton icone={ICONES[1]!} label={NOMS_ICONES[ICONES[1]!]} />
+            <IconButton icone={ICONES[2]!} label={NOMS_ICONES[ICONES[2]!]} />
+          </div>
+        ),
+      },
+    ],
+  },
+
+  {
+    id: 'saisie',
+    nom: 'Saisie',
+    couche: 'applicatif',
+    css: 'forms.css',
+    resume:
+      "Le liage intitulé ↔ contrôle est EXPLICITE : même valeur en « htmlFor » sur le champ et en « id » sur le contrôle. Sans useId, ces composants restent rendus au serveur.",
+    exemples: [
+      {
+        id: 'champ',
+        nom: 'Champ',
+        resume:
+          'L’aide et l’erreur occupent la même place : la seconde efface la première, sinon les deux se chevauchent.',
+        code: `<Field label="ADRESSE E-MAIL" htmlFor="mail" help="Votre adresse professionnelle.">
+  <Input id="mail" type="email" placeholder="prenom.nom@cabinet.fr" />
+</Field>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 16, maxWidth: 380 }}>
+            <Field label="ADRESSE E-MAIL" htmlFor="ex-mail" help="Votre adresse professionnelle.">
+              <Input id="ex-mail" type="email" placeholder="prenom.nom@cabinet.fr" />
+            </Field>
+            <Field
+              label="IDENTIFIANT D’ORGANISATION"
+              htmlFor="ex-org"
+              erreur="Cet identifiant n’existe pas."
+            >
+              <Input id="ex-org" mono erreur defaultValue="zvr-8841-x" aria-describedby="ex-org-err" />
+            </Field>
+            <Field
+              label="MOT DE PASSE"
+              htmlFor="ex-mdp"
+              action={<Link href="#">Oublié ?</Link>}
+            >
+              <Input id="ex-mdp" type="password" defaultValue="········" />
+            </Field>
+          </div>
+        ),
+      },
+      {
+        id: 'select',
+        nom: 'Sélection',
+        resume:
+          '<select> NATIF : la flèche, l’ouverture au clavier et l’annonce viennent du navigateur. C’est le motif de choix par défaut.',
+        code: `<Field label="RÔLE" htmlFor="role">
+  <Select id="role"><option>Administrateur</option>…</Select>
+</Field>`,
+        rendu: (
+          <div style={{ maxWidth: 260 }}>
+            <Field label="RÔLE" htmlFor="ex-role">
+              <Select id="ex-role" defaultValue="Rédacteur">
+                <option>Administrateur</option>
+                <option>Rédacteur</option>
+                <option>Lecture seule</option>
+              </Select>
+            </Field>
+          </div>
+        ),
+      },
+      {
+        id: 'textarea',
+        nom: 'Zone de texte',
+        resume:
+          'Redimensionnable verticalement SEULEMENT : en libre, l’utilisateur l’élargit hors de sa colonne et casse la mise en page.',
+        code: `<Textarea placeholder="Contexte de la demande…" />`,
+        rendu: (
+          <div style={{ maxWidth: 380 }}>
+            <Textarea placeholder="Contexte de la demande…" />
+          </div>
+        ),
+      },
+      {
+        id: 'recherche',
+        nom: 'Recherche',
+        resume:
+          'Cadre + loupe + champ nu. Deux marquages au clavier (l’anneau du champ ET le filet du cadre) : assumé — supprimer l’un rend le champ invisible, l’autre prive la souris de retour.',
+        code: `<Search placeholder="Rechercher un document…" />`,
+        rendu: (
+          <div style={{ maxWidth: 380 }}>
+            <Search placeholder="Rechercher un document…" />
+          </div>
+        ),
+      },
+      {
+        id: 'menu-select',
+        nom: 'Déclencheur de menu',
+        resume:
+          'Menu MAISON, à réserver aux filtres. À poser dans « SelectAnchor » : c’est l’enveloppe qui ancre le menu, pas le déclencheur.',
+        code: `<SelectAnchor>
+  <SelectTrigger label="PÉRIMÈTRE" value="Toute la base" onClick={…} />
+  {ouvert && <Menu><MenuItem actif>Toute la base</MenuItem>…</Menu>}
+</SelectAnchor>`,
+        rendu: <DemoMenu />,
+      },
+      {
+        id: 'bascules',
+        nom: 'Bascules',
+        resume:
+          'Contrôles natifs (appearance:none seulement) : clavier, focus visible et annonce viennent du navigateur, pas d’un <div> à réoutiller.',
+        code: `<Checkbox defaultChecked /> <Radio name="x" defaultChecked />
+<Switch on={on} texte="ACTIVÉ" onClick={…} />`,
+        rendu: (
+          <div style={{ display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
+            <label style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+              <Checkbox defaultChecked /> <span className="zv-body zv-body--dense">Anonymiser</span>
+            </label>
+            <label style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+              <Radio name="ex-r" defaultChecked /> <span className="zv-body zv-body--dense">Tout</span>
+            </label>
+            <DemoSwitch />
+          </div>
+        ),
+      },
+      {
+        id: 'puces',
+        nom: 'Puces de filtre',
+        resume:
+          'Le seul mécanisme de filtrage du système. Sélection DOUCE par défaut ; la variante « plein » est bornée à un groupe par page.',
+        code: `<SegGroup>
+  <Seg on compte={128} onClick={…}>Tous</Seg>
+  <Seg compte={42} onClick={…}>Contrats</Seg>
+</SegGroup>`,
+        rendu: <DemoSeg />,
+      },
+      {
+        id: 'depot',
+        nom: 'Zone de dépôt',
+        resume:
+          'role="button" + tabIndex posés par le composant : sans eux la page d’import est inatteignable au clavier. Remettre value="" après chaque sélection.',
+        code: `<Drop titre="Déposer des documents" spec="PDF, DOCX · 25 Mo"
+      parcourir="Parcourir les fichiers" survol={survol} … />`,
+        rendu: <DemoDrop />,
+      },
+    ],
+  },
+
+  {
+    id: 'retours',
+    nom: 'Retours',
+    couche: 'applicatif',
+    css: 'feedback.css',
+    resume:
+      "Rien n'est interactif ici. ⚠️ Ni roue, ni squelette, ni infobulle : le CSS n'en a aucun, parce que le relevé de production n'en contenait aucun. Le travail en cours se dit par « Loading », qui nomme ce qu'on attend.",
+    exemples: [
+      {
+        id: 'alertes',
+        nom: 'Bandeaux',
+        resume:
+          'Le ton est OBLIGATOIRE : sans lui, le bandeau hérite d’un filet en currentColor, soit un trait d’encre autour d’un fond blanc.',
+        code: `<Alert ton="info">Les documents sont indexés en continu.</Alert>
+<Alert ton="err" taille="sm">Identifiants incorrects.</Alert>
+<Alert ton="warn" taille="lg">Le moteur est en charge…</Alert>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 10 }}>
+            <Alert ton="info">Les documents sont indexés en continu.</Alert>
+            <Alert ton="ok" taille="sm">Organisation enregistrée.</Alert>
+            <Alert ton="warn">Trois pièces n’ont pas pu être océrisées.</Alert>
+            <Alert ton="err" taille="sm">Identifiants incorrects.</Alert>
+            <Alert ton="dash">Aucune source ne couvre cette période.</Alert>
+          </div>
+        ),
+      },
+      {
+        id: 'badges',
+        nom: 'Étiquettes',
+        resume:
+          'Les capitales s’écrivent dans le CONTENU, pas en CSS : transformé par le navigateur, « INDEXÉ » se casse selon la locale.',
+        code: `<Badge ton="ok">INDEXÉ</Badge>
+<Badge ton="warn" gabarit="micro">WARN</Badge>
+<Badge ton="accent" pastille>IA DÉDIÉE</Badge>`,
+        rendu: (
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Badge>ADMIN</Badge>
+            <Badge ton="accent" pastille>IA DÉDIÉE</Badge>
+            <Badge ton="ok">INDEXÉ</Badge>
+            <Badge ton="warn" gabarit="micro">WARN</Badge>
+            <Badge ton="err" gabarit="micro">ERROR</Badge>
+            <Badge ton="ok" gabarit="state">OK</Badge>
+          </div>
+        ),
+      },
+      {
+        id: 'pastilles',
+        nom: 'Pastilles et statut',
+        resume:
+          'Sans état, la pastille reste GRISE : un statut ajouté côté serveur et pas encore côté interface ne doit pas passer pour un succès. La pastille CARRÉE marque une source, pas un état.',
+        code: `<Status etat="indexe">Indexé · 42 pages</Status>
+<Dot etat="erreur" /> <Dot carree /> <Dot taille="lg" etat="ok" />`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 10 }}>
+            <Status etat="indexe">Indexé · 42 pages</Status>
+            <Status etat="indexation">Indexation en cours</Status>
+            <Status etat="erreur">Fichier illisible : page 3 corrompue</Status>
+            <Status>Statut inconnu</Status>
+          </div>
+        ),
+      },
+      {
+        id: 'absence',
+        nom: 'Absence',
+        resume:
+          '⚠️ DEUX objets. Sans titre : la LIGNE d’absence, un filtre trop étroit, l’en-tête du tableau reste visible. Avec titre et « page » : l’ÉCRAN d’absence, la collection est vide. Les confondre affiche un écran de bienvenue à chaque filtre strict.',
+        code: `<Empty>Aucun document ne correspond à ces filtres.</Empty>
+
+<Empty page titre="Aucun document" action={<Button compact>Importer</Button>}>
+  Déposez vos premières pièces pour lancer l’indexation.
+</Empty>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 16 }}>
+            <Empty>Aucun document ne correspond à ces filtres.</Empty>
+            <Empty page titre="Aucun document" action={<Button compact>Importer</Button>}>
+              Déposez vos premières pièces pour lancer l’indexation.
+            </Empty>
+          </div>
+        ),
+      },
+      {
+        id: 'attente',
+        nom: 'Travail en cours',
+        resume:
+          'STATIQUE : la pastille ne bat pas. Une roue dit « attendez » ; cette phrase dit sur quoi, sur combien, et qu’il ne se passe rien d’anormal.',
+        code: `<Loading>Recherche dans 4 812 documents anonymisés…</Loading>
+<Progress valeur={0.62} label="Indexation" />
+<span>…réponse en cours<Caret /></span>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 12 }}>
+            <Loading>Recherche dans 4 812 documents anonymisés…</Loading>
+            <Progress valeur={0.62} label="Indexation" />
+            <span className="zv-body zv-body--dense">
+              La clause de non-concurrence est limitée à vingt-quatre mois
+              <Caret />
+            </span>
+          </div>
+        ),
+      },
+    ],
+  },
+
+  {
+    id: 'contenu',
+    nom: 'Contenu',
+    couche: 'commun',
+    css: 'components.css',
+    resume:
+      'Surfaces, encarts, étiquettes éditoriales et blocs de preuve. ⚠️ Deux règles de charte y sont opposables : jamais de fausse citation, jamais de lorem dans un aperçu produit.',
+    exemples: [
+      {
+        id: 'cartes',
+        nom: 'Cartes',
+        resume:
+          '« Glass » ne fonctionne QUE devant un halo ou une scène : posée sur du papier nu, elle disparaît.',
+        code: `<Card padding="large">…</Card>
+<Card etat="ok">…</Card>
+<Card flottante>…</Card>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))' }}>
+            <Card>
+              <CardTitle>Bibliothèque</CardTitle>
+              <Body taille="dense">4 812 pièces indexées.</Body>
+            </Card>
+            <Card etat="ok">
+              <Body taille="dense">Sauvegarde vérifiée il y a 2 h.</Body>
+            </Card>
+            <Card etat="err">
+              <Body taille="dense">Trois pièces illisibles.</Body>
+            </Card>
+          </div>
+        ),
+      },
+      {
+        id: 'encarts',
+        nom: 'Encarts',
+        resume:
+          'DEUX objets longtemps confondus : la citation d’interface, et l’extrait de document (« discret » : fond panel, très aéré).',
+        code: `<Inset>La demande est recevable.</Inset>
+<Inset discret>« … le délai de préavis court à compter … »</Inset>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 10 }}>
+            <Inset>
+              <Body taille="dense">Trois arrêts postérieurs confirment cette lecture.</Body>
+            </Inset>
+            <Inset discret>
+              <Body taille="dense">
+                « Le délai de préavis court à compter de la première présentation de la
+                lettre recommandée. »
+              </Body>
+            </Inset>
+          </div>
+        ),
+      },
+      {
+        id: 'etiquettes',
+        nom: 'Étiquettes éditoriales',
+        resume:
+          '⚠️ Trois objets qui se ressemblent et ne se remplacent pas : « Pill » (pastille pleine), « Tag » (kicker mono), « Src » (puce de source).',
+        code: `<Pill>Nouveau</Pill>
+<Tag etat="ok">CONFORME</Tag>
+<SrcRow><Src>BOSS</Src><Src>Judilibre</Src><Src attenue>+ 11</Src></SrcRow>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 12 }}>
+            <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
+              <Pill>Nouveau</Pill>
+              <Tag>MÉTHODE</Tag>
+              <Tag etat="ok">CONFORME</Tag>
+              <Tag etat="err">ÉCART</Tag>
+            </div>
+            <SrcRow>
+              <Src>BOSS</Src>
+              <Src>Judilibre</Src>
+              <Src>KALI</Src>
+              <Src attenue>+ 11</Src>
+            </SrcRow>
+          </div>
+        ),
+      },
+      {
+        id: 'entites',
+        nom: 'Entités pseudonymisées',
+        resume:
+          'Le paragraphe hôte respire davantage : sans lui, les jetons se télescopent d’une ligne à l’autre.',
+        code: `<Body><EntText>Le contrat lie <Ent>SOCIÉTÉ_A</Ent> à <Ent>M. B</Ent>…</EntText></Body>`,
+        rendu: (
+          <Body>
+            <EntText>
+              Le contrat lie <Ent>SOCIÉTÉ_A</Ent> à <Ent>M. B</Ent>, domicilié{' '}
+              <Ent>ADRESSE_1</Ent>, pour une durée de trente-six mois.
+            </EntText>
+          </Body>
+        ),
+      },
+      {
+        id: 'preuve',
+        nom: 'Aperçu d’interface',
+        resume:
+          '⚠️ RÈGLE DE CHARTE : toujours de VRAIES données réalistes, jamais de lorem — c’est ce bloc qui porte la crédibilité de la page.',
+        code: `<UiPreview question="Quelle est la durée de préavis ?"
+           sources="12 sources" puces={<SrcRow>…</SrcRow>}>
+  Trois mois pour les cadres…
+</UiPreview>`,
+        rendu: (
+          <UiPreview
+            question="Quelle durée de préavis s’applique aux cadres ?"
+            sources="12 sources"
+            puces={
+              <SrcRow>
+                <Src>Convention Syntec</Src>
+                <Src>Cass. soc. 2019</Src>
+              </SrcRow>
+            }
+          >
+            Trois mois, sauf stipulation plus favorable du contrat de travail. La
+            convention Syntec ne prévoit pas de réduction en cas de dispense.
+          </UiPreview>
+        ),
+      },
+      {
+        id: 'stats-carte',
+        nom: 'Statistiques de carte',
+        resume:
+          'Paire au pied d’une carte produit, ou carte autonome. ⚠️ Ne pas confondre avec « Stats » (layout), qui est la rangée de chiffres d’une page vitrine : celle-ci vit DANS une carte.',
+        code: `<MiniStat>
+  <MiniStatItem valeur="4 812">documents</MiniStatItem>
+  <MiniStatItem valeur="1,2 s">latence</MiniStatItem>
+</MiniStat>
+
+<StatCard valeur="99,95 %">disponibilité sur 90 jours</StatCard>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 12 }}>
+            <MiniStat>
+              <MiniStatItem valeur="4 812">documents</MiniStatItem>
+              <MiniStatItem valeur="1,2 s">latence médiane</MiniStatItem>
+            </MiniStat>
+            <StatCard valeur="99,95 %">disponibilité sur 90 jours</StatCard>
+          </div>
+        ),
+      },
+      {
+        id: 'faq',
+        nom: 'FAQ',
+        resume:
+          '⚠️ Cinq questions par page au MAXIMUM. Au-delà, ce n’est plus une FAQ, c’est une documentation mal rangée.',
+        code: `<Faq>
+  <FaqItem question="Où sont hébergées les données ?">En France, chez OVHcloud.</FaqItem>
+</Faq>`,
+        rendu: (
+          <Faq>
+            <FaqItem question="Où sont hébergées les données ?">
+              En France, sur une infrastructure OVHcloud dédiée, sans réplication hors
+              Union européenne.
+            </FaqItem>
+            <FaqItem question="Le modèle apprend-il sur nos documents ?">
+              Non. Les pièces déposées ne servent qu’à répondre à vos requêtes et ne
+              sont jamais versées à un entraînement.
+            </FaqItem>
+          </Faq>
+        ),
+      },
+      {
+        id: 'prix',
+        nom: 'Tarifs',
+        resume:
+          '« recommande » pose le bandeau indigo. Trois cartes par page au plus : au-delà, la comparaison ne se fait plus d’un coup d’œil.',
+        code: `<Price montant="490 €" unite="HT · par mois" recommande
+       note="Engagement 12 mois">…</Price>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit,minmax(190px,1fr))' }}>
+            <Price montant="190 €" unite="HT / mois" note="Jusqu’à 3 utilisateurs">
+              <CardTitle>Cabinet</CardTitle>
+            </Price>
+            <Price montant="490 €" unite="HT / mois" recommande note="Engagement 12 mois">
+              <CardTitle>Étude</CardTitle>
+            </Price>
+          </div>
+        ),
+      },
+      {
+        id: 'filets-check',
+        nom: 'Filets et coche',
+        resume:
+          '⚠️ « Check » n’est PAS un contrôle : c’est une coche décorative en tête de liste d’arguments. Le contrôle, c’est « Checkbox ».',
+        code: `<Divider /> <Divider marque />
+<li><Check /> Réponses sourcées</li>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 10 }}>
+            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+              <Check />
+              <span className="zv-body zv-body--dense">Chaque réponse cite ses sources</span>
+            </div>
+            <Divider />
+            <Divider marque />
+          </div>
+        ),
+      },
+      {
+        id: 'citation',
+        nom: 'Citation client',
+        resume:
+          '⚠️ RÈGLE DE CHARTE : jamais de fausse citation. Tant qu’un verbatim n’a pas été recueilli, ce bloc reste EN RÉSERVE — un placeholder crédible finit toujours par partir en production.',
+        code: `<Band><Quote auteur="— Nom, cabinet">Verbatim réel uniquement.</Quote></Band>`,
+        surSombre: true,
+        rendu: (
+          <Band>
+            <Quote auteur="— en attente d’un verbatim recueilli">
+              Ce bloc reste en réserve tant qu’aucune citation réelle n’a été
+              recueillie.
+            </Quote>
+          </Band>
+        ),
+      },
+    ],
+  },
+
+  {
+    id: 'donnees',
+    nom: 'Données',
+    couche: 'applicatif',
+    css: 'data.css',
+    resume:
+      "Le tableau n'est PAS un <table> : c'est une grille CSS, parce qu'une même rangée doit se rendre en colonnes au-dessus du point de rupture et en carte empilée en dessous, sans dupliquer le balisage.",
+    exemples: [
+      {
+        id: 'tableau',
+        nom: 'Tableau',
+        resume:
+          'Le gabarit de colonnes se pose UNE FOIS sur le cadre ; l’en-tête et les lignes en héritent. Recopié aux deux endroits, on l’oublie à l’un et les intitulés se décalent des valeurs sans que rien ne casse visiblement.',
+        code: `<Table gabarit="minmax(0,2fr) 110px 90px">
+  <TableHead>
+    <Cell>Document</Cell><Cell>État</Cell><Cell registre="num">Pages</Cell>
+  </TableHead>
+  <Row href="/doc/1">
+    <Cell registre="nom"><Trunc>Contrat-cadre.pdf</Trunc></Cell>
+    <Cell label="État"><Status etat="indexe">Indexé</Status></Cell>
+    <Cell registre="num" label="Pages" unite="p.">42</Cell>
+  </Row>
+</Table>`,
+        rendu: (
+          <Table gabarit="minmax(0,2fr) 120px 90px">
+            <TableHead>
+              <Cell>Document</Cell>
+              <Cell>État</Cell>
+              <Cell registre="num">Pages</Cell>
+            </TableHead>
+            {[
+              ['Contrat-cadre-Syntec.pdf', 'indexe', 'Indexé', 42],
+              ['Assignation-2024-114.docx', 'indexation', 'Indexation', 8],
+              ['Annexe-3-scannee.pdf', 'erreur', 'Page 3 corrompue', 3],
+            ].map(([nom, etat, libelle, pages]) => (
+              <Row key={nom as string}>
+                <Cell registre="nom">
+                  <Trunc>{nom as string}</Trunc>
+                </Cell>
+                <Cell label="État">
+                  <Status etat={etat as 'indexe'}>{libelle as string}</Status>
+                </Cell>
+                <Cell registre="num" label="Pages" unite="p.">
+                  {pages as number}
+                </Cell>
+              </Row>
+            ))}
+          </Table>
+        ),
+      },
+      {
+        id: 'unwrap',
+        nom: 'Dégroupage',
+        resume:
+          'La primitive structurelle du module : un groupe qui rassemble deux ou trois cellules pour l’empilement mobile, puis s’efface (display: contents) et rend ses enfants DIRECTEMENT à la grille. ⚠️ Il n’exprime QUE ce sens-là.',
+        code: `<Row>
+  <Unwrap><Cell registre="nom">…</Cell><Cell label="Auteur">…</Cell></Unwrap>
+  <Cell registre="num">…</Cell>
+</Row>`,
+        rendu: (
+          <Table gabarit="minmax(0,2fr) 120px 80px">
+            <Row>
+              <Unwrap>
+                <Cell registre="nom">Mémoire en défense</Cell>
+                <Cell label="Auteur">
+                  <Meta>M. Dubois</Meta>
+                </Cell>
+              </Unwrap>
+              <Cell registre="num" label="Pages">
+                17
+              </Cell>
+            </Row>
+          </Table>
+        ),
+      },
+      {
+        id: 'liste',
+        nom: 'Liste sans colonnes',
+        resume: 'Même cadre que le tableau, mais rien à aligner : ni en-tête, ni gabarit.',
+        code: `<List>
+  <ListRow>
+    <ListMain><FileType format="pdf" /><ListName>…</ListName></ListMain>
+    <Meta>2,4 Mo</Meta>
+  </ListRow>
+</List>`,
+        rendu: (
+          <List>
+            <ListRow>
+              <ListMain>
+                <FileType format="pdf" />
+                <ListName>Contrat-cadre-Syntec.pdf</ListName>
+              </ListMain>
+              <Meta>2,4 Mo</Meta>
+            </ListRow>
+            <ListRow upload>
+              <ListMain>
+                <FileType format="docx" />
+                <ListName>Assignation-2024-114.docx</ListName>
+              </ListMain>
+              <Progress valeur={0.4} label="Envoi" />
+            </ListRow>
+          </List>
+        ),
+      },
+      {
+        id: 'meta',
+        nom: 'Métadonnées',
+        resume:
+          'Second registre mono, en BAS DE CASSE : taille, date, latence. Ni capitales ni interlettrage — c’est ce qui le distingue de « Mono », et une date en capitales espacées devient illisible.',
+        code: `<MetaRow><Meta>12 mars 2026</Meta><Meta taille="sm">1,2 s</Meta></MetaRow>`,
+        rendu: (
+          <MetaRow>
+            <Meta taille="md">12 mars 2026</Meta>
+            <Meta>14:07:22</Meta>
+            <Meta taille="sm">1,24 s</Meta>
+            <Meta discret>2,4 Mo</Meta>
+          </MetaRow>
+        ),
+      },
+      {
+        id: 'kv',
+        nom: 'Clé-valeur',
+        resume:
+          '⚠️ La CLÉ est en mono, en accent, et se coupe ; la VALEUR est en texte courant, en gris, et ne se coupe jamais. Inverser les deux change ce que l’œil balaie en premier.',
+        code: `<KV variante="grid">
+  <KVRow cle="ORGANISATION">Cabinet Duflot & Associés</KVRow>
+  <KVRow cle="IDENTIFIANT"><Break>zvr-8841-x-3c9f2a</Break></KVRow>
+</KV>`,
+        rendu: (
+          <KV variante="grid">
+            <KVRow cle="ORGANISATION">Cabinet Duflot &amp; Associés</KVRow>
+            <KVRow cle="IDENTIFIANT">
+              <Break>zvr-8841-x-3c9f2a</Break>
+            </KVRow>
+            <KVRow cle="FORMULE">Étude · 12 postes</KVRow>
+          </KV>
+        ),
+      },
+      {
+        id: 'avatar-chip',
+        nom: 'Pastilles et catégories',
+        resume:
+          'Avatar CARRÉ, jamais rond : le rond est un usage de réseau social. ⚠️ Sa teinte dit la NATURE de l’entité — la changer, c’est changer le sens.',
+        code: `<Avatar ton="accent">MD</Avatar>
+<ChipRow><Chip>Droit social</Chip><Chip variante="outline">2024</Chip></ChipRow>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 12 }}>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <Avatar ton="accent">MD</Avatar>
+              <Avatar ton="ink">JL</Avatar>
+              <Avatar ton="soft">AB</Avatar>
+              <Avatar ton="soft" petit>
+                ZV
+              </Avatar>
+            </div>
+            <ChipRow>
+              <Chip>Droit social</Chip>
+              <Chip>Convention collective</Chip>
+              <Chip variante="mono">2024-114</Chip>
+              <Chip variante="outline">Archivé</Chip>
+            </ChipRow>
+          </div>
+        ),
+      },
+      {
+        id: 'citations-src',
+        nom: 'Citations',
+        resume:
+          'Référence cliquable, dans le fil du texte ou groupée en pied de réponse : elle ouvre la feuille de source.',
+        code: `<CiteRow><Cite>1</Cite><Cite>2</Cite></CiteRow>`,
+        rendu: (
+          <CiteRow>
+            <Cite>Convention Syntec, art. 15</Cite>
+            <Cite>Cass. soc., 4 déc. 2019</Cite>
+          </CiteRow>
+        ),
+      },
+      {
+        id: 'formats',
+        nom: 'Format de fichier',
+        resume:
+          '⚠️ Ces deux couleurs ne viennent PAS de la charte : ce sont celles que le monde associe à ces formats, et les détourner rendrait les vignettes illisibles au premier coup d’œil. Seul usage autorisé : la pastille de format.',
+        code: `<FileType format="pdf" /> <FileType format="docx" />`,
+        rendu: (
+          <div style={{ display: 'flex', gap: 8 }}>
+            <FileType format="pdf" />
+            <FileType format="docx" />
+          </div>
+        ),
+      },
+    ],
+  },
+
+  {
+    id: 'navigation',
+    nom: 'Navigation',
+    couche: 'applicatif',
+    css: 'navigation.css',
+    resume:
+      "Rien n'a d'état propre : l'entrée courante, la page courante et l'item sélectionné viennent de l'appelant — c'est ce qui permet à une colonne de navigation Next de rester rendue au serveur.",
+    exemples: [
+      {
+        id: 'sidebar',
+        nom: 'Colonne latérale',
+        resume:
+          'Une colonne, un filet, rien d’autre. « courant » pose aria-current="page" en plus de la classe : sans lui, l’entrée courante est marquée pour l’œil et muette au lecteur d’écran.',
+        code: `<Sidebar>
+  <SidebarHead>…</SidebarHead>
+  <SideGroup titre="Espace">
+    <SideLink href="/bibliotheque" courant num="01">Bibliothèque</SideLink>
+  </SideGroup>
+  <SidebarFoot>…</SidebarFoot>
+</Sidebar>`,
+        rendu: (
+          <Sidebar style={{ height: 260 }}>
+            <SidebarHead>
+              <Mono ton="ink">ZEVRA</Mono>
+            </SidebarHead>
+            <SideGroup titre="Espace">
+              <SideLink href="#" courant num="01">
+                Bibliothèque
+              </SideLink>
+              <SideLink href="#" num="02">
+                Répertoire
+              </SideLink>
+              <SideLink href="#" num="03">
+                Import
+              </SideLink>
+            </SideGroup>
+            <SidebarFoot>
+              <Meta discret>v2.4.1</Meta>
+            </SidebarFoot>
+          </Sidebar>
+        ),
+      },
+      {
+        id: 'topbar',
+        nom: 'Barre supérieure',
+        resume:
+          '⚠️ Elle REMPLACE la colonne sous le point de rupture : masquée au-dessus, elle n’apparaît que dans le bloc mobile du CSS. Ne jamais la conditionner en JavaScript — le serveur ne connaît pas la largeur de l’écran.',
+        code: `<Topbar>
+  <TopbarBurger aria-label="Ouvrir la navigation">☰</TopbarBurger>
+  <TopbarLogo><img src="/logo.svg" alt="" /></TopbarLogo>
+  <TopbarTitle>Bibliothèque</TopbarTitle>
+</Topbar>`,
+        rendu: (
+          <Topbar style={{ display: 'flex', position: 'static' }}>
+            <TopbarTitle>Bibliothèque</TopbarTitle>
+          </Topbar>
+        ),
+      },
+      {
+        id: 'crumbs',
+        nom: 'Fil d’Ariane',
+        resume:
+          '⚠️ Le fil ENTIER est cliquable — c’est un seul nœud, pas une liste de liens. Le DERNIER segment est plus sombre : c’est celui qu’on lit, le reste n’est qu’un chemin.',
+        code: `<Crumbs href="/dossiers/2024" segments={['Dossiers', '2024', 'Duflot']} />`,
+        rendu: <Crumbs href="#" segments={['Dossiers', '2024', 'Duflot & Associés']} />,
+      },
+      {
+        id: 'onglets',
+        nom: 'Onglets',
+        resume:
+          '⚠️ Il n’existe AUCUNE classe d’onglet dans le CSS : une rangée d’onglets EST une rangée de puces. Ce composant n’ajoute que l’ARIA, pas un style de plus. L’onglet souligné reste à arbitrer avec la DA.',
+        code: `<Tabs actif={actif} onChange={setActif} onglets={[
+  { id: 'apercu', label: 'Aperçu' },
+  { id: 'sources', label: 'Sources', compte: 12 },
+]} />`,
+        rendu: <DemoTabs />,
+      },
+      {
+        id: 'pagination',
+        nom: 'Pagination',
+        resume:
+          '⚠️ Une flèche désactivée reste ATTEIGNABLE au clavier (aria-disabled, pas disabled) : sinon elle disparaît du parcours sans être annoncée.',
+        code: `<Pager>
+  <PagerArrow aria-label="Page précédente" desactive>‹</PagerArrow>
+  <PagerRank>p. 12 / 31</PagerRank>
+  <PagerArrow aria-label="Page suivante">›</PagerArrow>
+</Pager>
+
+<Pager pied>
+  <Meta>128 documents</Meta>
+  <PagerStep>‹ Précédent · Suivant ›</PagerStep>
+</Pager>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 12 }}>
+            <Pager>
+              <PagerArrow aria-label="Page précédente" desactive>
+                ‹
+              </PagerArrow>
+              <PagerRank>p. 12 / 31</PagerRank>
+              <PagerArrow aria-label="Page suivante">›</PagerArrow>
+            </Pager>
+            <Pager pied>
+              <Meta>128 documents</Meta>
+              <PagerStep>‹ Précédent · Suivant ›</PagerStep>
+            </Pager>
+          </div>
+        ),
+      },
+      {
+        id: 'cite-panel',
+        nom: 'Feuille de source',
+        resume: 'Le panneau qu’ouvre une citation : l’extrait, sa référence, ses actions.',
+        code: `<CitePanel titre="Convention Syntec, art. 15"
+           actions={<ChromeButton aria-label="Fermer">×</ChromeButton>}
+           pied={<Button compact bloc>Ouvrir le document</Button>}>
+  …
+</CitePanel>`,
+        rendu: (
+          <CitePanel
+            titre="Convention Syntec, art. 15"
+            actions={<ChromeButton aria-label="Fermer la feuille">×</ChromeButton>}
+            pied={<Button compact>Ouvrir le document</Button>}
+            style={{ position: 'static', width: 'auto', height: 'auto' }}
+          >
+            <Body taille="dense">
+              « Le délai de préavis est de trois mois pour les salariés relevant de la
+              position 3. »
+            </Body>
+          </CitePanel>
+        ),
+      },
+      {
+        id: 'defilement',
+        nom: 'Zone défilante',
+        resume:
+          '⚠️ Porte min-height: 0 ET min-width: 0. Sans les deux, un enfant flex refuse de rétrécir sous son contenu : la zone déborde et c’est la PAGE qui part en défilement horizontal. La faute la plus fréquente de ce gabarit.',
+        code: `<Scroll habillee>…</Scroll>`,
+        rendu: (
+          <Scroll habillee style={{ height: 90, border: '1px solid var(--line)', padding: 10 }}>
+            <Body taille="dense">
+              L’habillage de barre est OPT-IN : sur macOS et iOS, habiller la barre la
+              rend permanente et elle mange une colonne. Par défaut, la barre native
+              du système est conservée.
+            </Body>
+          </Scroll>
+        ),
+      },
+    ],
+  },
+
+  {
+    id: 'enrobages',
+    nom: 'Enrobages',
+    couche: 'commun',
+    css: 'overlays.css',
+    resume:
+      "Le seul module marqué « use client ». Tout ce qui vit ici vole le regard à la page : il faut Échap, un piège de focus et un verrou de défilement — rien de cela ne s'écrit en CSS. Le hook « useOverlay » est exporté pour les enrobages maison.",
+    exemples: [
+      {
+        id: 'tiroir',
+        nom: 'Tiroir',
+        resume:
+          '⚠️ Le tiroir n’existe QUE sous le point de rupture : au-dessus, la navigation est une colonne et il n’y a rien à ouvrir. Réduis la fenêtre pour le voir.',
+        code: `<Drawer ouvert={ouvert} onClose={() => setOuvert(false)}
+        fermeture={<ChromeButton aria-label="Fermer" onClick={…}>×</ChromeButton>}>
+  <Sidebar>…</Sidebar>
+</Drawer>`,
+        rendu: <DemoDrawer />,
+      },
+      {
+        id: 'modale',
+        nom: 'Modale',
+        resume:
+          'Fermée, elle n’est pas rendue du tout : son contenu — un formulaire, le plus souvent — ne doit pas rester dans le DOM à l’état fantôme. « danger » met l’avertissement dans le filet HAUT, pas dans un fond rouge qui rendrait le texte pénible à lire.',
+        code: `<Modal ouvert={ouvert} onClose={…} titre="Supprimer" danger
+       pied={<ButtonRow>…</ButtonRow>}>
+  …
+</Modal>`,
+        rendu: <DemoModal />,
+      },
+      {
+        id: 'toast',
+        nom: 'Notification',
+        resume:
+          '⚠️ Ne remplace PAS « Alert » : une erreur de formulaire se dit à côté du champ, jamais dans un coin qui disparaît. Réserver à ce qui est vrai APRÈS COUP — « copié », « enregistré », « envoyé ».',
+        code: `<Toasts>
+  <Toast ton="ok">Lien copié.</Toast>
+</Toasts>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 8 }}>
+            <Toast ton="ok">Lien copié dans le presse-papiers.</Toast>
+            <Toast>Brouillon enregistré.</Toast>
+            <Toast ton="err">L’envoi a échoué. Réessayez.</Toast>
+          </div>
+        ),
+      },
+    ],
+  },
+
+  {
+    id: 'icones',
+    nom: 'Icônes',
+    couche: 'commun',
+    css: 'icons.css',
+    resume:
+      "34 icônes TRACÉES, jamais pleines : trait 2, bouts arrondis, grille de 24. Elles héritent de la couleur du texte — c'est ce qui leur permet de fonctionner sur papier comme sur la bande manifeste sans déclinaison. Le tracé est inliné : rien à résoudre côté bundler, rien à autoriser côté CSP.",
+    exemples: [
+      {
+        id: 'jeu',
+        nom: 'Le jeu complet',
+        resume:
+          'Sans « titre », l’icône est DÉCORATIVE et masquée aux lecteurs d’écran — le bon défaut : accolée à un libellé qui la répète, elle crée une annonce double.',
+        code: `<Icon nom="recherche" />
+<Icon nom="document" taille="lg" />
+<Icon nom="alerte" titre="Alerte" />`,
+        rendu: (
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14 }}>
+            {ICONES.map((id) => (
+              <span
+                key={id}
+                title={NOMS_ICONES[id]}
+                style={{ display: 'grid', gap: 4, justifyItems: 'center', width: 64 }}
+              >
+                <Icon nom={id} taille="lg" />
+                <span className="zv-meta zv-meta--sm zv-trunc" style={{ maxWidth: 64 }}>
+                  {id}
+                </span>
+              </span>
+            ))}
+          </div>
+        ),
+      },
+      {
+        id: 'tailles',
+        nom: 'Tailles',
+        resume:
+          'Le trait s’épaissit optiquement quand l’icône rétrécit : « sm » et « xl » le compensent. Une rangée de tailles mêlées sans cette compensation paraît déséquilibrée.',
+        code: `<Icon nom="document" taille="sm" />  <Icon nom="document" />
+<Icon nom="document" taille="lg" />  <Icon nom="document" taille="xl" />`,
+        rendu: (
+          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
+            <Icon nom={ICONES[0]!} taille="sm" />
+            <Icon nom={ICONES[0]!} />
+            <Icon nom={ICONES[0]!} taille="lg" />
+            <Icon nom={ICONES[0]!} taille="xl" />
+            <Icon nom={ICONES[0]!} taille="lg" discret />
+          </div>
+        ),
+      },
+    ],
+  },
+
+  {
+    id: 'mise-en-page',
+    nom: 'Mise en page',
+    couche: 'vitrine',
+    css: 'layout.css',
+    resume:
+      "Gouttières, grille 12, sections, frise d'étapes, pieds de page. Une application n'a aucune raison de charger ce module. Les cinq étages d'empilement y sont nommés une fois pour toutes : un z-index écrit à la main finit toujours par passer devant ce qu'il ne fallait pas.",
+    exemples: [
+      {
+        id: 'gouttiere',
+        nom: 'Gouttière',
+        resume:
+          'La largeur de colonne du système. Toute la vitrine s’aligne dessus : un bloc qui pose sa propre largeur maximale se décale de tous les autres.',
+        code: `<Page>
+  <Gutter>…</Gutter>
+  <Gutter variante="wide">…</Gutter>
+  <Gutter variante="chrome"><Nav>…</Nav></Gutter>
+</Page>`,
+        rendu: (
+          <Gutter style={{ border: '1px dashed var(--accent-line)', padding: 12 }}>
+            <Body taille="dense">Contenu aligné sur la colonne du système.</Body>
+          </Gutter>
+        ),
+      },
+      {
+        id: 'grille',
+        nom: 'Grilles',
+        resume:
+          '⚠️ Seules les portées 3, 4, 6, 8 et 9 existent : ce sont les découpes employées par la vitrine. En ajouter une revient à ajouter une mise en page — c’est une décision de DA, pas une utilité.',
+        code: `<Grid12>
+  <Col span={8}>…</Col>
+  <Col span={4}>…</Col>
+</Grid12>
+
+<Grid colonnes={3}>…</Grid>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 12 }}>
+            <Grid12>
+              <Col span={8}>
+                <Card>
+                  <Body taille="dense">span 8</Body>
+                </Card>
+              </Col>
+              <Col span={4}>
+                <Card>
+                  <Body taille="dense">span 4</Body>
+                </Card>
+              </Col>
+            </Grid12>
+            <Grid colonnes={3}>
+              {['Indexer', 'Interroger', 'Vérifier'].map((t) => (
+                <Card key={t}>
+                  <Body taille="dense">{t}</Body>
+                </Card>
+              ))}
+            </Grid>
+          </div>
+        ),
+      },
+      {
+        id: 'sections',
+        nom: 'Sections',
+        resume:
+          'Le bloc « aside » tombe SOUS le titre en dessous du point de rupture — c’est le CSS qui le fait, pas une condition de rendu.',
+        code: `<SectionHead aside={<LinkArrow href="/methode">Tout voir</LinkArrow>}>
+  <Kicker>Méthode</Kicker>
+  <H2>Trois étapes, rien de plus</H2>
+</SectionHead>
+<SectionRule />`,
+        rendu: (
+          <div>
+            <SectionHead aside={<LinkArrow href="#">Tout voir</LinkArrow>}>
+              <Kicker>Méthode</Kicker>
+              <Heading taille="h2-sm">Trois étapes, rien de plus</Heading>
+            </SectionHead>
+            <SectionRule />
+          </div>
+        ),
+      },
+      {
+        id: 'sheet-section',
+        nom: 'Section de document',
+        resume: 'Un intitulé mono, un filet, du corps — pour un document long.',
+        code: `<SheetSection titre="ENGAGEMENTS">…</SheetSection>`,
+        rendu: (
+          <SheetSection titre="ENGAGEMENTS">
+            <Body taille="dense">
+              Les données restent hébergées en France et ne sont jamais versées à un
+              entraînement.
+            </Body>
+          </SheetSection>
+        ),
+      },
+      {
+        id: 'nav-vitrine',
+        nom: 'Navigation vitrine',
+        resume:
+          '⚠️ « NavLink » est la navigation de VITRINE ; l’entrée applicative s’appelle « SideLink ». Les deux ne doivent jamais se recouvrir. La rangée disparaît sous le point de rupture, remplacée par le burger.',
+        code: `<Nav>
+  <NavLogo>…</NavLogo>
+  <NavLinks>
+    <NavLink href="/produit">Produit</NavLink>
+    <NavLink href="/connexion" discret>Se connecter</NavLink>
+  </NavLinks>
+  <NavBurger aria-label="Ouvrir le menu">…</NavBurger>
+</Nav>`,
+        rendu: (
+          <Nav style={{ border: '1px solid var(--hairline)', padding: '0 12px' }}>
+            <NavLogo>
+              <Mono ton="ink">ZEVRA</Mono>
+            </NavLogo>
+            <NavLinks>
+              <NavLink href="#">Produit</NavLink>
+              <NavLink href="#">Méthode</NavLink>
+              <NavLink href="#" discret>
+                Se connecter
+              </NavLink>
+            </NavLinks>
+          </Nav>
+        ),
+      },
+      {
+        id: 'etapes',
+        nom: 'Frise d’étapes',
+        resume:
+          'Le point de méthode est le TROISIÈME et dernier emploi autorisé du spectre (avec le filet de kicker et la barre de progression). Jamais en fond, jamais en texte.',
+        code: `<Steps avancement={0.66}>
+  <Step>Indexer</Step>
+  <Step teinte="violet">Interroger</Step>
+  <Step teinte="cyan">Vérifier</Step>
+</Steps>`,
+        rendu: (
+          <Steps avancement={0.66}>
+            <Step>
+              <Body taille="dense">Indexer</Body>
+            </Step>
+            <Step teinte="violet">
+              <Body taille="dense">Interroger</Body>
+            </Step>
+            <Step teinte="cyan">
+              <Body taille="dense">Vérifier</Body>
+            </Step>
+          </Steps>
+        ),
+      },
+      {
+        id: 'stats-page',
+        nom: 'Ligne de statistiques',
+        resume: 'La rangée de chiffres d’une page vitrine, sous un hero ou dans une bande.',
+        code: `<Stats>
+  <Stat valeur="4 812">documents indexés</Stat>
+  <Stat valeur="1,2 s">latence médiane</Stat>
+</Stats>`,
+        rendu: (
+          <Stats>
+            <Stat valeur="4 812">documents indexés</Stat>
+            <Stat valeur="1,2 s">latence médiane</Stat>
+            <Stat valeur="100 %">réponses sourcées</Stat>
+          </Stats>
+        ),
+      },
+      {
+        id: 'hero-cta',
+        nom: 'Blocs centrés',
+        resume: 'Le hero d’ouverture et le bloc d’appel à l’action de fin de page.',
+        code: `<Hero><Kicker>…</Kicker><H1>…</H1><Lead>…</Lead></Hero>
+<CTA><Heading taille="h2-cta">…</Heading><Button>…</Button></CTA>`,
+        rendu: (
+          <CTA style={{ padding: '24px 0' }}>
+            <Heading2Cta />
+            <ButtonRow>
+              <Button>Demander une démonstration</Button>
+            </ButtonRow>
+          </CTA>
+        ),
+      },
+      {
+        id: 'pieds',
+        nom: 'Pieds de page',
+        resume:
+          '⚠️ « ProofBar » ne cite que de VRAIS clients : un nom inventé dans une bande de preuve sociale est un faux, pas un placeholder.',
+        code: `<Footer marque={<><Mono ton="ink">ZEVRA</Mono><Tagline>…</Tagline></>}>
+  …
+</Footer>
+<FooterMini logo={<Mono ton="ink">ZEVRA</Mono>}>© 2026</FooterMini>`,
+        rendu: (
+          <FooterMini logo={<Mono ton="ink">ZEVRA</Mono>}>
+            <Note>© 2026 Zevra · Hébergé en France</Note>
+          </FooterMini>
+        ),
+      },
+      {
+        id: 'visibilite',
+        nom: 'Visibilité',
+        resume:
+          '⚠️ Rendu par le CSS, PAS par JavaScript : le serveur ne connaît pas la largeur de l’écran, et conditionner le rendu produit un décalage d’hydratation. Les deux nœuds sont posés, le CSS en masque un.',
+        code: `<OnlyDesktop><NavLinks>…</NavLinks></OnlyDesktop>
+<OnlyMobile><NavBurger aria-label="Menu">…</NavBurger></OnlyMobile>`,
+        rendu: (
+          <div style={{ display: 'flex', gap: 10 }}>
+            <span className="zv-only-desktop">
+              <Badge ton="accent">VISIBLE ≥ 768</Badge>
+            </span>
+            <span className="zv-only-mobile">
+              <Badge ton="accent">VISIBLE &lt; 768</Badge>
+            </span>
+          </div>
+        ),
+      },
+    ],
+  },
+
+  {
+    id: 'surfaces',
+    nom: 'Surfaces',
+    couche: 'vitrine',
+    css: 'surfaces.css + motion.css',
+    resume:
+      "Ce qui distingue une page Zevra d'une page blanche bien composée. ⚠️ Tout y est DÉCORATIF : posé en absolu derrière le contenu, sans capter le pointeur, masqué aux lecteurs d'écran — et suppose un parent « position: relative; overflow: hidden ».",
+    exemples: [
+      {
+        id: 'bande',
+        nom: 'Bande manifeste',
+        resume:
+          '⚠️ LA surface sombre du système. Les surfaces sombres se font avec elle et --accent-on-dark, JAMAIS en inversant les neutres : les contrastes ont été réglés dans ce sens-là et pas dans l’autre.',
+        code: `<Band lueur filigrane={<Glyph variante="watermark">…</Glyph>}>
+  <Kicker surSombre>Souveraineté</Kicker>
+  <H2>Vos pièces ne quittent pas la France.</H2>
+</Band>`,
+        surSombre: true,
+        rendu: (
+          <Band lueur>
+            <Kicker surSombre>Souveraineté</Kicker>
+            <Heading taille="h2-sm">Vos pièces ne quittent pas la France.</Heading>
+            <Body>
+              Infrastructure dédiée, chiffrement au repos, aucun transfert hors Union
+              européenne.
+            </Body>
+            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
+              <Tag surSombre etat="ok">CHIFFRÉ</Tag>
+              <Tag surSombre>OVHCLOUD · GRA</Tag>
+            </div>
+          </Band>
+        ),
+      },
+      {
+        id: 'panneau-navy',
+        nom: 'Panneau sombre',
+        resume:
+          'Plus petit qu’une bande : une carte, un encart. « TextOnDark » repeint un texte isolé — « Band » le fait déjà pour son contenu courant, l’ajouter dedans ne sert à rien.',
+        code: `<PanelNavy><TextOnDark>…</TextOnDark></PanelNavy>`,
+        surSombre: true,
+        rendu: (
+          <PanelNavy>
+            <TextOnDark>
+              <Mono ton="on-dark">CHIFFREMENT</Mono>
+              <Body>AES-256 au repos, TLS 1.3 en transit.</Body>
+            </TextOnDark>
+          </PanelNavy>
+        ),
+      },
+      {
+        id: 'halo',
+        nom: 'Halo, sol, voile',
+        resume:
+          'Le violet et le cyan du spectre, très dilués. Ce n’est PAS un emploi du spectre en aplat : c’est une lumière — elle ne compte pas dans les trois emplois autorisés.',
+        code: `<section style={{ position: 'relative', overflow: 'hidden' }}>
+  <Halo place="hero" />
+  <GridFloor />
+  <Fade blanc />
+  …
+</section>`,
+        rendu: (
+          <div
+            style={{
+              position: 'relative',
+              overflow: 'hidden',
+              height: 150,
+              display: 'grid',
+              placeItems: 'center',
+            }}
+          >
+            <Halo place="core" />
+            <GridFloor carte />
+            <Fade blanc />
+            <Mono ton="label" style={{ position: 'relative' }}>
+              HALO · SOL · VOILE
+            </Mono>
+          </div>
+        ),
+      },
+      {
+        id: 'glyphe',
+        nom: 'Glyphe',
+        resume:
+          'Enveloppe d’un logo produit posé comme motif. Le glyphe lui-même est une image du paquet (@zevra/ui/logos/…), pas un tracé du CSS.',
+        code: `<Glyph variante="deep"><img src="…/logos/memoire-glyph-orig.png" alt="" /></Glyph>`,
+        rendu: (
+          <Glyph>
+            <Icon nom={ICONES[0]!} taille="xl" />
+          </Glyph>
+        ),
+      },
+      {
+        id: 'mouvement',
+        nom: 'Mouvement',
+        resume:
+          '⚠️ Les neuf animations sont pilotées AU DÉFILEMENT et réservées à la vitrine : le chrome applicatif n’anime rien. « prefers-reduced-motion » les coupe toutes, globalement, depuis base.css.',
+        code: `<div className={anim('rise')}>…</div>
+<div className={anim('pop', 3)}>…</div>
+<div className={anim('converge', 'tr')}>…</div>`,
+        rendu: (
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+            {(['rise', 'pop', 'filet', 'glyph-in', 'converge', 'breathe', 'drift', 'dot-active', 'progress'] as const).map(
+              (nom) => (
+                <span key={nom} className={anim(nom)}>
+                  <Chip variante="mono">{nom}</Chip>
+                </span>
+              ),
+            )}
+          </div>
+        ),
+      },
+    ],
+  },
+]
+
+function Heading2Cta() {
+  return <Heading taille="h2-cta">Voir Zevra sur vos propres pièces.</Heading>
+}
+
+/** Tous les exemples à plat — pratique pour une recherche ou un test. */
+export const EXEMPLES: (Exemple & { groupe: string })[] = CATALOGUE.flatMap((g) =>
+  g.exemples.map((e) => ({ ...e, groupe: g.id })),
+)