@zevra/ui 0.35.0 → 0.36.0

package/react/catalogue.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-// Catalogue — la planche de tous les composants, avec un exemple rendu et le
+// 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 ;
+//     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.
@@ -38,7 +38,7 @@ import {
 } from './forms.js'
 import { ICONES, Icon, IconButton, IconTile, NOMS_ICONES } from './icon.js'
 // Les glyphes sont INLINÉS (data-URI) : le catalogue est rendu hors du dépôt
-// — planche, kit de canvas, page d'admin — où un chemin d'image ne résout pas.
+// - planche, kit de canvas, page d'admin) où un chemin d'image ne résout pas.
 import {
   ACCROCHES_PRODUITS, ADRESSES_PRODUITS, APPS, GLYPHES, MOT_ZEVRA, NOMS_PRODUITS,
 } from './glyphes.js'
@@ -66,7 +66,7 @@ import {
 } from './typography.js'
 
 export interface Exemple {
-  /** Identifiant stable — sert d'ancre dans la page de consultation. */
+  /** 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. */
@@ -341,7 +341,7 @@ function DemoPopover() {
 }
 
 /** La barre de vitrine dans ses deux états. Rendue au REPOS : survoler le
- *  lanceur ou la pastille déplie le panneau, comme sur un vrai site — c'est
+ *  lanceur ou la pastille déplie le panneau, comme sur un vrai site, c'est
  *  du CSS, il n'y a rien à hydrater. La réserve sous chaque barre existe pour
  *  que le panneau ait la place de s'ouvrir sans être coupé. */
 function DemoNav() {
@@ -447,7 +447,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '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>
@@ -465,7 +465,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '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>,
       },
@@ -494,7 +494,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '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 />`,
@@ -552,7 +552,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
     couche: 'commun',
     css: 'components.css',
     resume:
-      "Quatre variantes, et UNE SEULE pleine par page — « danger » comprise, la règle compte les aplats, pas les couleurs : c'est ce qui fait que l'action principale se voit. Un écran à deux boutons pleins n'en a plus aucun.",
+      "Quatre variantes, et UNE SEULE pleine par page, « danger » comprise, la règle compte les aplats, pas les couleurs : c'est ce qui fait que l'action principale se voit. Un écran à deux boutons pleins n'en a plus aucun.",
     exemples: [
       {
         id: 'boutons',
@@ -596,7 +596,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'etats',
         nom: 'États',
         resume:
-          '« danger » COMPTE comme le bouton plein de la page — la règle compte les aplats, pas les couleurs ; à réserver à la confirmation destructive. « occupe » pose aria-busy et aria-disabled et AVALE le clic sans sortir le bouton du parcours clavier : le LIBELLÉ doit changer avec lui, l’estompement seul ne dit pas ce qu’on attend. Survol et appui sont dans le CSS, rien à câbler.',
+          '« danger » COMPTE comme le bouton plein de la page : la règle compte les aplats, pas les couleurs ; à réserver à la confirmation destructive. « occupe » pose aria-busy et aria-disabled et AVALE le clic sans sortir le bouton du parcours clavier : le LIBELLÉ doit changer avec lui, l’estompement seul ne dit pas ce qu’on attend. Survol et appui sont dans le CSS, rien à câbler.',
         code: `<Button variante="danger">Supprimer définitivement</Button>
 <Button occupe>Connexion…</Button>
 <Button variante="fantome" disabled>Envoyer</Button>`,
@@ -614,7 +614,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'boutons-icones',
         nom: 'Boutons à icône',
         resume:
-          'L’icône vient du jeu (16 px) et hérite de la couleur du libellé — en prop, jamais recopiée à la main. « carre » est l’action à icône SEULE : aria-label OBLIGATOIRE, écrit pour l’ACTION. Ne pas confondre avec IconButton (chrome nu, 40 px) ni ChromeButton (croix bordée) : le carré est une action, il en a le poids.',
+          'L’icône vient du jeu (16 px) et hérite de la couleur du libellé : en prop, jamais recopiée à la main. « carre » est l’action à icône SEULE : aria-label OBLIGATOIRE, écrit pour l’ACTION. Ne pas confondre avec IconButton (chrome nu, 40 px) ni ChromeButton (croix bordée) : le carré est une action, il en a le poids.',
         code: `<Button icone="telecharger">Télécharger le rapport</Button>
 <Button variante="fantome" iconeApres="chevron-droit">Étape suivante</Button>
 <Button carre variante="encre" icone="envoyer" aria-label="Envoyer le message" />`,
@@ -696,7 +696,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'select',
         nom: 'Sélection',
         resume:
-          'Liste DESSINÉE jusqu’au bout — c’est le motif par défaut depuis le 25/08. Le <select> natif ne peut pas être habillé : sa liste est peinte par le système, et sort en menu noir sur un macOS en mode sombre. Clavier, annonce et recherche à la frappe sont réimplémentés ici.',
+          'Liste DESSINÉE jusqu’au bout : c’est le motif par défaut depuis le 25/08. Le <select> natif ne peut pas être habillé : sa liste est peinte par le système, et sort en menu noir sur un macOS en mode sombre. Clavier, annonce et recherche à la frappe sont réimplémentés ici.',
         code: `<Field label="RÔLE" htmlFor="role">
   <SelectMenu id="role" valeur={role} onChange={setRole} options={[
     { valeur: 'admin', label: 'Administrateur' },
@@ -742,7 +742,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '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 }}>
@@ -822,7 +822,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'curseur',
         nom: 'Curseur',
         resume:
-          'Natif habillé : clavier, bornes et annonce viennent du navigateur ; le remplissage suit la valeur en contrôlé. Toujours un intitulé ET la valeur affichée en clair — un curseur seul ne dit ni ce qu’il règle, ni sur combien. Pas de spectre sur la piste : ce n’est pas une barre de progression.',
+          'Natif habillé : clavier, bornes et annonce viennent du navigateur ; le remplissage suit la valeur en contrôlé. Toujours un intitulé ET la valeur affichée en clair : un curseur seul ne dit ni ce qu’il règle, ni sur combien. Pas de spectre sur la piste : ce n’est pas une barre de progression.',
         code: `<Field label="SOURCES INTERROGÉES" htmlFor="prof" help={\`\${sources} sources sur 17\`}>
   <Range id="prof" min={1} max={17} value={sources} onChange={…} />
 </Field>`,
@@ -852,7 +852,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'mot-de-passe',
         nom: 'Mot de passe',
         resume:
-          'Le seul champ où l’on tape sans voir ce qu’on écrit : sur un mot de passe long saisi au clavier d’un téléphone, la bascule évite l’échec silencieux. L’état est tenu par l’appelant, et le libellé du bouton change — une icône seule ne dit pas ce qui va se passer.',
+          'Le seul champ où l’on tape sans voir ce qu’on écrit : sur un mot de passe long saisi au clavier d’un téléphone, la bascule évite l’échec silencieux. L’état est tenu par l’appelant, et le libellé du bouton change : une icône seule ne dit pas ce qui va se passer.',
         code: `const [visible, setVisible] = useState(false)
 
 <Field label="MOT DE PASSE" htmlFor="mdp">
@@ -871,7 +871,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
     couche: 'applicatif',
     css: 'feedback.css',
     resume:
-      "Rien n'y crie : le bandeau porte le ton, la pastille l'état, la phrase le travail. La roue, le squelette et l'infobulle — longtemps refusés faute de relevé — sont arbitrés depuis le 25/08/2026 (DECISIONS.md), chacun avec son périmètre écrit ; « Loading », qui nomme ce qu'on attend, reste le motif d'attente par défaut.",
+      "Rien n'y crie : le bandeau porte le ton, la pastille l'état, la phrase le travail. La roue, le squelette et l'infobulle, longtemps refusés faute de relevé, sont arbitrés depuis le 25/08/2026 (DECISIONS.md), chacun avec son périmètre écrit ; « Loading », qui nomme ce qu'on attend, reste le motif d'attente par défaut.",
     exemples: [
       {
         id: 'alertes',
@@ -968,7 +968,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'roue',
         nom: 'Roue',
         resume:
-          'Attente COURTE et LOCALE : un bouton, une cellule, un panneau sans la place d’une phrase. Pour l’attente d’un écran, « Loading » reste le motif — la phrase dit sur quoi et sur combien. Sans label, la roue est décorative et masquée aux lecteurs d’écran.',
+          'Attente COURTE et LOCALE : un bouton, une cellule, un panneau sans la place d’une phrase. Pour l’attente d’un écran, « Loading » reste le motif : la phrase dit sur quoi et sur combien. Sans label, la roue est décorative et masquée aux lecteurs d’écran.',
         code: `<Spinner label="Vérification du dépôt…" />
 <Spinner grand />`,
         rendu: (
@@ -982,7 +982,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'squelette',
         nom: 'Squelette',
         resume:
-          'Il ANNONCE une structure connue — la carte, la ligne qui va venir ; pour un contenu de forme inconnue, c’est « Loading ». La géométrie vient de l’appelant : un squelette qui invente ses dimensions ne ressemble jamais au contenu. C’est la zone qui charge qui porte aria-busy, pas chaque os.',
+          'Il ANNONCE une structure connue : la carte, la ligne qui va venir ; pour un contenu de forme inconnue, c’est « Loading ». La géométrie vient de l’appelant : un squelette qui invente ses dimensions ne ressemble jamais au contenu. C’est la zone qui charge qui porte aria-busy, pas chaque os.',
         code: `<div aria-busy="true">
   <Skeleton texte largeur="60%" />
   <Skeleton texte />
@@ -1000,7 +1000,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'infobulle',
         nom: 'Infobulle',
         resume:
-          'Un COMPLÉMENT dispensable — un raccourci, une date exacte, une unité : une commande n’a pas le droit d’y cacher son nom, et le tactile ne survole pas. Liage aria-describedby EXPLICITE (id), comme le htmlFor de Field — pas de useId, le rendu serveur reste possible. Apparition retardée de 300 ms, disparition immédiate, Échap la ferme.',
+          'Un COMPLÉMENT dispensable, un raccourci, une date exacte, une unité : une commande n’a pas le droit d’y cacher son nom, et le tactile ne survole pas. Liage aria-describedby EXPLICITE (id), comme le htmlFor de Field : pas de useId, le rendu serveur reste possible. Apparition retardée de 300 ms, disparition immédiate, Échap la ferme.',
         code: `<Tooltip id="th-date" contenu="Déposé le 12/08/2026 à 14 h 02">
   <Button variante="fantome" compact aria-describedby="th-date">12 août</Button>
 </Tooltip>`,
@@ -1029,7 +1029,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'page-erreur',
         nom: 'Page d’erreur',
         resume:
-          '404, 403, 410, 500. ⚠️ Le glyphe est DÉCORATIF par défaut (glypheAlt=""), et le mot « Erreur » se passe en prop : la 0.32.0 posait alt="Zevra" et « Erreur » en dur, si bien que la 404 de Mémoire annonçait « Zevra » au lecteur d’écran et affichait « Erreur 404 » sous /en/. Le composant ne porte AUCUN texte : une plaisanterie câblée dans un design system part dans les sept apps, dans une seule langue, et n’en revient jamais. La copie ci-dessous est la RÉFÉRENCE, à copier et à adapter. Elle plaisante en vocabulaire juridique — un mot juste employé de travers, pas une blague sur un ton qu’Encre & Papier n’a pas — et l’ordre est fixe : le titre dit la panne en clair, l’esprit vient ensuite et se dédit lui-même. Une page d’erreur qui fait rire avant d’informer est ratée.',
+          '404, 403, 410, 500. ⚠️ Le glyphe est DÉCORATIF par défaut (glypheAlt=""), et le mot « Erreur » se passe en prop : la 0.32.0 posait alt="Zevra" et « Erreur » en dur, si bien que la 404 de Mémoire annonçait « Zevra » au lecteur d’écran et affichait « Erreur 404 » sous /en/. Le composant ne porte AUCUN texte : une plaisanterie câblée dans un design system part dans les sept apps, dans une seule langue, et n’en revient jamais. La copie ci-dessous est la RÉFÉRENCE, à copier et à adapter. Elle plaisante en vocabulaire juridique (un mot juste employé de travers, pas une blague sur un ton qu’Encre & Papier n’a pas) et l’ordre est fixe : le titre dit la panne en clair, l’esprit vient ensuite et se dédit lui-même. Une page d’erreur qui fait rire avant d’informer est ratée.',
         code: `<PageErreur
   code="404"
   libelle="Erreur"          {/* le mot est À VOUS : « Error » sous /en/ */}
@@ -1157,7 +1157,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '⚠️ 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…
@@ -1260,7 +1260,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'page-legale',
         nom: 'Page légale',
         resume:
-          'La FORME d’un document contractuel ; le TEXTE vit dans @zevra/legal, versionné et archivé — le design system ne dépend pas du contenu, sinon corriger une clause deviendrait une livraison de charte. La version est AFFICHÉE : c’est ce que l’utilisateur cite quand il conteste. ⚠️ Jamais de « voir plus » sur un contrat : ce qu’on accepte se lit en entier là où on l’accepte. Le sommaire se pose à côté, avec « Rail ».',
+          'La FORME d’un document contractuel ; le TEXTE vit dans @zevra/legal, versionné et archivé : le design system ne dépend pas du contenu, sinon corriger une clause deviendrait une livraison de charte. La version est AFFICHÉE : c’est ce que l’utilisateur cite quand il conteste. ⚠️ Jamais de « voir plus » sur un contrat : ce qu’on accepte se lit en entier là où on l’accepte. Le sommaire se pose à côté, avec « Rail ».',
         code: `import { enVigueur } from '@zevra/legal'
 
 <LegalPage document={enVigueur('mentions-legales')} />`,
@@ -1306,12 +1306,12 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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>`,
+          '⚠️ 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">
+            <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>
@@ -1375,7 +1375,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'tableau-prose',
         nom: 'Tableau de prose',
         resume:
-          'Les cellules reviennent à la ligne au lieu de tronquer. ⚠️ Dès qu’une cellule porte une PHRASE et non une donnée — une clause, un fondement juridique, une durée et son motif —, tronquer ne raccourcit pas : ça cache, et le lecteur n’a aucun moyen de savoir qu’il manque quelque chose. La troncature reste juste pour une ligne de données, qui se balaye du regard.',
+          'Les cellules reviennent à la ligne au lieu de tronquer. ⚠️ Dès qu’une cellule porte une PHRASE et non une donnée (une clause, un fondement juridique, une durée et son motif), tronquer ne raccourcit pas : ça cache, et le lecteur n’a aucun moyen de savoir qu’il manque quelque chose. La troncature reste juste pour une ligne de données, qui se balaye du regard.',
         code: `<Table prose gabarit="minmax(0,1fr) minmax(0,2fr)">
   <TableHead><Cell>Donnée</Cell><Cell>Durée et fondement</Cell></TableHead>
   <Row>
@@ -1466,7 +1466,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '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>
@@ -1500,7 +1500,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '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: (
@@ -1552,7 +1552,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'depliant',
         nom: 'Rangée dépliante',
         resume:
-          '<details> NATIF : clavier, annonce et état viennent du navigateur, aucun JavaScript. Le pliage APPLICATIF — options avancées, détail d’une ligne de journal ; la FAQ (contenu) reste celui de la vitrine. Plusieurs rangées se posent bord à bord, le filet mitoyen tombe seul.',
+          '<details> NATIF : clavier, annonce et état viennent du navigateur, aucun JavaScript. Le pliage APPLICATIF : options avancées, détail d’une ligne de journal ; la FAQ (contenu) reste celui de la vitrine. Plusieurs rangées se posent bord à bord, le filet mitoyen tombe seul.',
         code: `<Fold titre="Options avancées">…</Fold>
 <Fold titre="Journal d'indexation" ouvert>…</Fold>`,
         rendu: (
@@ -1572,7 +1572,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'code',
         nom: 'Code et raccourcis',
         resume:
-          'La chasse fixe RÉELLE (--font-code) : --font-mono est proportionnelle et n’aligne pas du code, tabular-nums n’aligne que les chiffres. Aucune coloration syntaxique — elle imposerait une palette que la charte n’a pas. « ⌘K » fait DEUX touches, donc deux Kbd.',
+          'La chasse fixe RÉELLE (--font-code) : --font-mono est proportionnelle et n’aligne pas du code, tabular-nums n’aligne que les chiffres. Aucune coloration syntaxique : elle imposerait une palette que la charte n’a pas. « ⌘K » fait DEUX touches, donc deux Kbd.',
         code: `<Body>Lancer <Code>pnpm build</Code>, puis <Kbd>⌘</Kbd> <Kbd>K</Kbd>.</Body>
 <CodeBlock>claude mcp add --transport http zevra-design …</CodeBlock>`,
         rendu: (
@@ -1596,13 +1596,13 @@ export const CATALOGUE: GroupeCatalogue[] = [
     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.",
+      "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. « num » accepte un rang mono OU un glyphe (le ⚙ du relevé), sur la même colonne de 16 px — jamais les deux.',
+          '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. « num » accepte un rang mono OU un glyphe (le ⚙ du relevé), sur la même colonne de 16 px : jamais les deux.',
         code: `<Sidebar>
   <SidebarHead>…</SidebarHead>
   <SideGroup titre="Espace">
@@ -1644,7 +1644,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '⚠️ 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>
@@ -1660,7 +1660,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '⚠️ 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']} />,
       },
@@ -1668,7 +1668,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'onglets',
         nom: 'Onglets en puces',
         resume:
-          'La rangée de puces, grammaire d’état de Seg — le motif des FILTRES, qui restreignent une collection. Ce composant n’ajoute que l’ARIA. Pour les VUES d’un même objet, prendre la variante soulignée.',
+          'La rangée de puces, grammaire d’état de Seg : le motif des FILTRES, qui restreignent une collection. Ce composant n’ajoute que l’ARIA. Pour les VUES d’un même objet, prendre la variante soulignée.',
         code: `<Tabs actif={actif} onChange={setActif} onglets={[
   { id: 'apercu', label: 'Aperçu' },
   { id: 'sources', label: 'Sources', compte: 12 },
@@ -1679,7 +1679,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'onglets-soulignes',
         nom: 'Onglets soulignés',
         resume:
-          'L’arbitrage longtemps en attente, tranché le 25/08/2026 : trait actif de 2 px — l’épaisseur des filets dessinés du système — en accent, PAS en spectre (un quatrième emploi n’existe pas). Pour les VUES d’un même objet (Aperçu / Sources) ; pour filtrer, les puces.',
+          'L’arbitrage longtemps en attente, tranché le 25/08/2026 : trait actif de 2 px, l’épaisseur des filets dessinés du système, en accent, PAS en spectre (un quatrième emploi n’existe pas). Pour les VUES d’un même objet (Aperçu / Sources) ; pour filtrer, les puces.',
         code: `<Tabs variante="soulignes" actif={actif} onChange={setActif} onglets={[
   { id: 'apercu', label: 'Aperçu' },
   { id: 'sources', label: 'Sources', compte: 12 },
@@ -1690,7 +1690,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'popover',
         nom: 'Popover',
         resume:
-          'Surface ancrée LIBRE — aide contextuelle, mini-formulaire de filtre — dans la même ancre que le menu (SelectAnchor). Ce n’est PAS une infobulle : le popover s’ouvre au CLIC et peut porter de l’interactif. Fermeture par clic extérieur et Échap : à l’appelant, comme pour le menu.',
+          'Surface ancrée LIBRE (aide contextuelle, mini-formulaire de filtre) dans la même ancre que le menu (SelectAnchor). Ce n’est PAS une infobulle : le popover s’ouvre au CLIC et peut porter de l’interactif. Fermeture par clic extérieur et Échap : à l’appelant, comme pour le menu.',
         code: `<SelectAnchor>
   <Button variante="fantome" compact aria-expanded={ouvert} onClick={…}>Colonnes affichées</Button>
   {ouvert && <Popover>…</Popover>}
@@ -1776,7 +1776,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
     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.",
+      "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',
@@ -1793,7 +1793,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '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>}>
   …
@@ -1804,7 +1804,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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é ».',
+          '⚠️ 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>`,
@@ -1825,13 +1825,13 @@ export const CATALOGUE: GroupeCatalogue[] = [
     couche: 'commun',
     css: 'icons.css',
     resume:
-      "55 icônes TRACÉES, jamais pleines : trait 2, grille de 24, BOUTS FRANCS et jonctions vives — le trait carré de la charte, points d'encre carrés compris. 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.",
+      "55 icônes TRACÉES, jamais pleines : trait 2, grille de 24, BOUTS FRANCS et jonctions vives, le trait carré de la charte, points d'encre carrés compris. 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.',
+          '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" />`,
@@ -1873,7 +1873,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'tuile',
         nom: 'Tuile d’icône',
         resume:
-          'La pastille carrée devant un argument de la vitrine — liste de garanties, grille d’atouts. DÉCORATIVE par défaut : c’est le libellé voisin qui nomme, un titre ne se pose que si elle est seule. UNE par argument, jamais en décor isolé — une tuile sans libellé est un rébus.',
+          'La pastille carrée devant un argument de la vitrine : liste de garanties, grille d’atouts. DÉCORATIVE par défaut : c’est le libellé voisin qui nomme, un titre ne se pose que si elle est seule. UNE par argument, jamais en décor isolé : une tuile sans libellé est un rébus.',
         code: `<IconTile nom="bouclier-verifie" />
 <IconTile nom="balance" />`,
         rendu: (
@@ -1881,7 +1881,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
             {(
               [
                 ['bouclier-verifie', 'Hébergement souverain', 'Infrastructure dédiée, en France.'],
-                ['balance', 'Sources officielles', 'BOSS, Judilibre, KALI — datées et citées.'],
+                ['balance', 'Sources officielles', 'BOSS, Judilibre, KALI : datées et citées.'],
                 ['cadenas', 'Zéro réutilisation', 'Vos pièces n’entraînent aucun modèle.'],
               ] as const
             ).map(([nom, titre, texte]) => (
@@ -1905,13 +1905,13 @@ export const CATALOGUE: GroupeCatalogue[] = [
     couche: 'vitrine',
     css: 'components.css',
     resume:
-      "Quatre façons de poser du contenu SANS carte. Ils existent pour une règle de composition de la DA (24/08/2026) : jamais deux blocs de même forme qui se suivent, 80 % de formes différentes par page — les grilles de cartes redeviennent un choix, pas un réflexe.",
+      "Quatre façons de poser du contenu SANS carte. Ils existent pour une règle de composition de la DA (24/08/2026) : jamais deux blocs de même forme qui se suivent, 80 % de formes différentes par page, les grilles de cartes redeviennent un choix, pas un réflexe.",
     exemples: [
       {
         id: 'rows',
         nom: 'Rangées à filets',
         resume:
-          'Libellé fort + contenu, un trait fin entre chaque rangée. Pour les listes où l’ALIGNEMENT fait la lecture (profils rencontrés, prestations, caractéristiques) — là où des cartes casseraient la comparaison.',
+          'Libellé fort + contenu, un trait fin entre chaque rangée. Pour les listes où l’ALIGNEMENT fait la lecture (profils rencontrés, prestations, caractéristiques) : là où des cartes casseraient la comparaison.',
         code: `<Rows>
   <RowsItem cle="Directions juridiques">Structurer la connaissance interne…</RowsItem>
   <RowsItem cle="Cabinets d’avocats">Retrouver la jurisprudence du cabinet…</RowsItem>
@@ -1953,7 +1953,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
             <IndexItem num="02">
               <CardTitle>Indexation</CardTitle>
               <Body taille="dense">
-                Le corpus est océrisé, anonymisé et indexé — comptez une semaine pour
+                Le corpus est océrisé, anonymisé et indexé : comptez une semaine pour
                 10 000 pièces.
               </Body>
             </IndexItem>
@@ -1964,7 +1964,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'flow',
         nom: 'Déroulé vertical',
         resume:
-          'La déclinaison verticale de « Steps », pour les méthodes qui se lisent comme un récit. Les points reprennent les couleurs des points de méthode — l’un des trois emplois autorisés du spectre.',
+          'La déclinaison verticale de « Steps », pour les méthodes qui se lisent comme un récit. Les points reprennent les couleurs des points de méthode : l’un des trois emplois autorisés du spectre.',
         code: `<Flow>
   <FlowStep><CardTitle>Déposer</CardTitle>…</FlowStep>
   <FlowStep teinte="violet"><CardTitle>Interroger</CardTitle>…</FlowStep>
@@ -1991,7 +1991,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'callout',
         nom: 'Encart d’appel',
         resume:
-          'Une bande sur accent-soft, un titre, une action : l’offre transverse qui doit se voir sans crier (remise, renvoi vers une autre page). L’action passe en enfant — elle se range à droite et tombe sous le titre sur mobile.',
+          'Une bande sur accent-soft, un titre, une action : l’offre transverse qui doit se voir sans crier (remise, renvoi vers une autre page). L’action passe en enfant : elle se range à droite et tombe sous le titre sur mobile.',
         code: `<Callout titre="Formation Campus incluse la première année">
   <ButtonLink href="/campus" variante="fantome">Découvrir Campus</ButtonLink>
 </Callout>`,
@@ -2034,7 +2034,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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é.',
+          '⚠️ 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>
@@ -2069,7 +2069,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '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>
@@ -2088,7 +2088,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
       {
         id: 'sheet-section',
         nom: 'Section de document',
-        resume: 'Un intitulé mono, un filet, du corps — pour un document long.',
+        resume: 'Un intitulé mono, un filet, du corps : pour un document long.',
         code: `<SheetSection titre="ENGAGEMENTS">…</SheetSection>`,
         rendu: (
           <SheetSection titre="ENGAGEMENTS">
@@ -2103,7 +2103,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'nav-vitrine',
         nom: 'Navigation',
         resume:
-          'LA barre du site, dans ses deux états — c’est le design de landing.zevra.tech, et il fait référence : une app qui compose sa propre barre finit par ne plus ressembler aux autres. Deux zones, et la distinction n’est pas cosmétique : « NavLinks » porte ce qui TOMBE dans le tiroir sous le point de rupture (familles, langues, appel à l’action) ; « NavActions » porte ce qui RESTE à toutes les largeurs — lanceur, compte, burger. Un compte placé dans NavLinks s’évanouit sur téléphone, et l’on ne peut plus se connecter. ⚠️ Le lanceur ET le compte sont là dans les deux états : les produits sont publics, et une barre où l’on ne peut pas se connecter est une barre où l’on ne revient pas. Seul le contenu du compte change. Survoler une famille, le lanceur ou la pastille pour déplier — c’est du CSS, il n’y a rien à hydrater. « zv-nav--riche » bascule vers le tiroir à 1150px, où une barre de cette densité déborde (mesuré), et non à 768.',
+          'LA barre du site, dans ses deux états, c’est le design de landing.zevra.tech, et il fait référence : une app qui compose sa propre barre finit par ne plus ressembler aux autres. Deux zones, et la distinction n’est pas cosmétique : « NavLinks » porte ce qui TOMBE dans le tiroir sous le point de rupture (familles, langues, appel à l’action) ; « NavActions » porte ce qui RESTE à toutes les largeurs, lanceur, compte, burger. Un compte placé dans NavLinks s’évanouit sur téléphone, et l’on ne peut plus se connecter. ⚠️ Le lanceur ET le compte sont là dans les deux états : les produits sont publics, et une barre où l’on ne peut pas se connecter est une barre où l’on ne revient pas. Seul le contenu du compte change. Survoler une famille, le lanceur ou la pastille pour déplier : c’est du CSS, il n’y a rien à hydrater. « zv-nav--riche » bascule vers le tiroir à 1150px, où une barre de cette densité déborde (mesuré), et non à 768.',
         code: `<Nav className="zv-nav--riche">
   <NavLogo>
     <Lockup capitale={15}>
@@ -2135,7 +2135,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
     {/* APPS = les produits QUI ONT UNE ADRESSE, pas les sept glyphes :
         une tuile qui mène à rien promet un produit et fait tomber le
         visiteur. Plume et Supernovia y entreront le jour où ils ouvrent,
-        par une ligne dans logos/index.json — sans toucher aux apps. */}
+        par une ligne dans logos/index.json : sans toucher aux apps. */}
     <Lanceur>            {/* titre="Applications" par défaut, filet de spectre */}
       <LanceurGroupe>Suite Zevra</LanceurGroupe>
       <LanceurApps>
@@ -2159,7 +2159,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'lockup',
         nom: 'Lockup',
         resume:
-          'La marque et le mot. Tout se pilote par « capitale », qui EST la hauteur de capitale : la marque vaut 2,86 fois cette valeur et l’écart 0,64, proportions relevées au pixel sur l’original. Sous 11 px, poser « marqueSeule » — le mot ne se lit plus, quelle que soit sa netteté, et c’est la marque qui identifie.',
+          'La marque et le mot. Tout se pilote par « capitale », qui EST la hauteur de capitale : la marque vaut 2,86 fois cette valeur et l’écart 0,64, proportions relevées au pixel sur l’original. Sous 11 px, poser « marqueSeule » : le mot ne se lit plus, quelle que soit sa netteté, et c’est la marque qui identifie.',
         code: `<Lockup capitale={15}>
   <LockupMark src={GLYPHES.zevra} />
   <LockupWord src={MOT_ZEVRA} alt="Zevra" />
@@ -2175,7 +2175,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'tiroir-groupe',
         nom: 'Tiroir groupé',
         resume:
-          'Quand la barre porte des familles, les aplatir en une liste unique rend le tiroir illisible : un label capitale par famille, ses entrées en dessous. Le sélecteur de langue s’y pose en pied, détaché par un filet. L’ouverture et la fermeture viennent de « @zevra/ui/nav.js » — le tiroir doit vivre EN DEHORS du chrome flouté, qui devient sinon son bloc conteneur.',
+          'Quand la barre porte des familles, les aplatir en une liste unique rend le tiroir illisible : un label capitale par famille, ses entrées en dessous. Le sélecteur de langue s’y pose en pied, détaché par un filet. L’ouverture et la fermeture viennent de « @zevra/ui/nav.js » : le tiroir doit vivre EN DEHORS du chrome flouté, qui devient sinon son bloc conteneur.',
         code: `<NavDrawer>
   <NavDrawerGroup>Services</NavDrawerGroup>
   <NavDrawerLink href="/audit" className="zv-nav-drawer__link--sous">Audit</NavDrawerLink>
@@ -2209,7 +2209,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'rail',
         nom: 'Rail de lecture',
         resume:
-          'La table des matières d’une page longue, posée sur le côté. Elle NAVIGUE (chaque entrée est une ancre) et elle SUIT — importer « @zevra/ui/rail.js » pour que l’entrée courante s’allume ; sans lui le rail navigue toujours, il ne suit plus. Le module lit la POSITION plutôt que d’observer les intersections : les ancres d’un rail sont souvent des points de 1 px en tête de section, qu’un défilement rapide fait manquer à un IntersectionObserver réduit à sa bande centrale. ⚠️ Il disparaît sous le point de rupture — un rail fixe sur un téléphone se pose sur la lecture.',
+          'La table des matières d’une page longue, posée sur le côté. Elle NAVIGUE (chaque entrée est une ancre) et elle SUIT : importer « @zevra/ui/rail.js » pour que l’entrée courante s’allume ; sans lui le rail navigue toujours, il ne suit plus. Le module lit la POSITION plutôt que d’observer les intersections : les ancres d’un rail sont souvent des points de 1 px en tête de section, qu’un défilement rapide fait manquer à un IntersectionObserver réduit à sa bande centrale. ⚠️ Il disparaît sous le point de rupture : un rail fixe sur un téléphone se pose sur la lecture.',
         code: `<Rail aria-label="Sections">
   <RailItem href="#intro" courant>Intro</RailItem>
   <RailItem href="#methode">Méthode</RailItem>
@@ -2335,14 +2335,14 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'bandeau',
         nom: 'Bandeau d’annonce',
         resume:
-          'La bande AU-DESSUS de la barre de navigation : annonce de version, information réglementaire. UN SEUL par page, et jamais pour du marketing permanent — un bandeau qui ne part pas devient un bourrelet de chrome. Le lien s’y souligne : sur un fond déjà indigo, la couleur seule ne le distingue plus.',
+          'La bande AU-DESSUS de la barre de navigation : annonce de version, information réglementaire. UN SEUL par page, et jamais pour du marketing permanent : un bandeau qui ne part pas devient un bourrelet de chrome. Le lien s’y souligne : sur un fond déjà indigo, la couleur seule ne le distingue plus.',
         code: `<Banner>
-  La charte évolue — le journal des livraisons est en ligne.{' '}
+  La charte évolue : le journal des livraisons est en ligne.{' '}
   <a href="/journal">Ce qui change</a>
 </Banner>`,
         rendu: (
           <Banner>
-            La charte évolue — le journal des livraisons est en ligne.{' '}
+            La charte évolue : le journal des livraisons est en ligne.{' '}
             <a href="#">Ce qui change</a>
           </Banner>
         ),
@@ -2351,7 +2351,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'carrousel',
         nom: 'Carrousel',
         resume:
-          'Défilement natif scroll-snap, AUCUN JavaScript : pas de flèches, pas de points ; le conteneur prend le focus, et son label est OBLIGATOIRE — une région qui défile sans nom est une énigme au lecteur d’écran. Un carrousel reste un aveu d’espace : la règle de variété lui préfère une grille tant que le contenu tient.',
+          'Défilement natif scroll-snap, AUCUN JavaScript : pas de flèches, pas de points ; le conteneur prend le focus, et son label est OBLIGATOIRE, une région qui défile sans nom est une énigme au lecteur d’écran. Un carrousel reste un aveu d’espace : la règle de variété lui préfère une grille tant que le contenu tient.',
         code: `<Carousel label="La suite Zevra">
   <CarouselItem style={{ width: 260 }}>
     <Card>…</Card>
@@ -2386,7 +2386,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'media',
         nom: 'Cadre média',
         resume:
-          'Le rapport vit sur le CADRE, jamais sur l’image : posé sur un enfant de grille aligné au centre, il ne se résout pas et la colonne s’effondre à zéro. Le cadre ne charge ni ne décode rien — pour masquer le temps de décodage, composer Spinner par-dessus.',
+          'Le rapport vit sur le CADRE, jamais sur l’image : posé sur un enfant de grille aligné au centre, il ne se résout pas et la colonne s’effondre à zéro. Le cadre ne charge ni ne décode rien : pour masquer le temps de décodage, composer Spinner par-dessus.',
         code: `<Media ratio="16-9">
   <MediaImg src={couverture} alt="" />
   <MediaVoile />
@@ -2416,13 +2416,13 @@ export const CATALOGUE: GroupeCatalogue[] = [
     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 ».",
+      "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. La bande ne porte AUCUNE gouttière propre : c’est la page qui la donne — poser un Gutter dedans, sinon le contenu colle au bord.',
+          '⚠️ LA surface sombre du système. Les surfaces sombres se font avec elle et --accent-on-dark, JAMAIS en inversant les neutres. La bande ne porte AUCUNE gouttière propre : c’est la page qui la donne, poser un Gutter dedans, sinon le contenu colle au bord.',
         code: `<Band lueur filigrane={<Glyph variante="watermark">…</Glyph>}>
   <Gutter>
     <Kicker surSombre>Souveraineté</Kicker>
@@ -2451,7 +2451,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '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: (
@@ -2467,7 +2467,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         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.',
+          '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 />
@@ -2533,7 +2533,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'format-social',
         nom: 'Formats sociaux',
         resume:
-          'Planches d’EXPORT — paysage 1200×630 (OpenGraph, lien LinkedIn), carré 1080 (post), story 1080×1920 — FIGÉES en pixels : on les capture, on ne les publie pas en HTML, et elles ignorent le point de rupture. Un visuel social EST une publication : jamais de faux chiffre ni de fausse citation. Rendue ici à l’échelle 0,35.',
+          'Planches d’EXPORT (paysage 1200×630 (OpenGraph, lien LinkedIn), carré 1080 (post), story 1080×1920) FIGÉES en pixels : on les capture, on ne les publie pas en HTML, et elles ignorent le point de rupture. Un visuel social EST une publication : jamais de faux chiffre ni de fausse citation. Rendue ici à l’échelle 0,35.',
         code: `<SocialFrame manifeste pied={<><Mono ton="on-dark">ZEVRA</Mono><Mono ton="on-dark">zevra.tech</Mono></>}>
   <Kicker surSombre><Mono ton="on-dark">Manifeste · Article 1ᵉʳ</Mono></Kicker>
   <Heading taille="h2" as="p">
@@ -2572,7 +2572,7 @@ 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. */
+/** 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 })),
 )