@zevra/ui 0.7.0 → 0.9.0

package/react/layout.tsx

@@ -346,3 +346,42 @@ export function OnlyDesktop({ className, ...reste }: Div & { className?: string
 export function OnlyMobile({ className, ...reste }: Div & { className?: string }) {
   return <div className={cx('zv-only-mobile', className)} {...reste} />
 }
+
+/* ─── Bandeau d'annonce ────────────────────────────────────────────── */
+
+/** 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. */
+export function Banner({ className, ...reste }: Div & { className?: string }) {
+  return <div className={cx('zv-banner', className)} {...reste} />
+}
+
+/* ─── Carrousel ────────────────────────────────────────────────────── */
+
+export interface CarouselProps extends Div {
+  /** Ce que la rangée contient (« Nos produits ») : une région qui défile
+   *  sans nom est une énigme au lecteur d'écran. */
+  label: string
+  className?: string
+}
+
+/** Défilement natif scroll-snap, AUCUN JavaScript : pas de flèches, pas de
+ *  points. Le conteneur est focalisable — c'est lui que les flèches du
+ *  clavier font défiler. La largeur des éléments vient du consommateur.
+ *  ⚠️ Un carrousel reste un aveu d'espace : la règle de variété lui préfère
+ *  une grille tant que le contenu tient. */
+export function Carousel({ label, className, ...reste }: CarouselProps) {
+  return (
+    <div
+      role="region"
+      aria-label={label}
+      tabIndex={0}
+      className={cx('zv-carousel', className)}
+      {...reste}
+    />
+  )
+}
+
+export function CarouselItem({ className, ...reste }: Div & { className?: string }) {
+  return <div className={cx('zv-carousel__item', className)} {...reste} />
+}

package/react/navigation.tsx

@@ -12,6 +12,7 @@ import type {
   AnchorHTMLAttributes,
   ButtonHTMLAttributes,
   HTMLAttributes,
+  KeyboardEvent as ReactKeyboardEvent,
   ReactNode,
 } from 'react'
 import { cx } from './cx.js'
@@ -182,32 +183,91 @@ export function MenuItem({ actif, className, type = 'button', ...reste }: MenuIt
   )
 }
 
+/* ─── Popover ──────────────────────────────────────────────────────── */
+
+/** Surface ancrée LIBRE — aide contextuelle, mini-formulaire de filtre.
+ *  Même ancre que le menu : à poser dans un `SelectAnchor`, rendu à
+ *  l'ouverture seulement (`{ouvert && <Popover>…}`). Ce n'est PAS une
+ *  infobulle : le popover s'ouvre au CLIC et peut porter de l'interactif ;
+ *  l'infobulle (retours) se montre au survol et n'en porte jamais.
+ *  ⚠️ Fermeture par clic extérieur et Échap : au composant appelant, comme
+ *  pour le menu — et le déclencheur porte aria-expanded. */
+export function Popover({ className, ...reste }: Div & { className?: string }) {
+  return <div className={cx('zv-popover', className)} {...reste} />
+}
+
 /* ─── Onglets ──────────────────────────────────────────────────────── */
 
 export interface TabsProps<T extends string> {
   onglets: readonly { id: T; label: ReactNode; compte?: ReactNode }[]
   actif: T
   onChange: (id: T) => void
-  /** Rangée qui défile au lieu de passer à la ligne. */
+  /** « puces » (défaut) : la rangée de Seg — le motif des FILTRES, qui
+   *  restreignent une collection. « soulignes » : l'onglet au trait —
+   *  arbitré le 25/08/2026 (2 px, accent) — pour les VUES d'un même objet
+   *  (Aperçu / Sources). */
+  variante?: 'puces' | 'soulignes'
+  /** Rangée qui défile au lieu de passer à la ligne (variante puces ; la
+   *  rangée soulignée défile toujours dans son cadre). */
   rail?: boolean
   /** Identifiant du panneau piloté, pour `aria-controls`. */
   panneau?: string
   className?: string
 }
 
-/** ⚠️ Il n'existe AUCUNE classe d'onglet dans le CSS, et c'est délibéré : une
- *  rangée d'onglets est une rangée de puces, avec la grammaire d'état de
- *  `Seg`. Un onglet SOULIGNÉ reste à faire — il suppose d'arbitrer couleur et
- *  épaisseur du trait actif, ce qu'aucune source ne donne. Ce composant
- *  n'ajoute donc que l'ARIA, pas un style de plus. */
+/** Deux dessins, une seule grammaire d'état. En puces, ce composant n'ajoute
+ *  que l'ARIA au-dessus de `Seg` ; en soulignés, il pose `.zv-tabs-line` —
+ *  l'arbitrage longtemps en attente, tranché le 25/08/2026 (DECISIONS.md).
+ *  Les deux portent le contrat clavier du rôle : la rangée est UNE étape de
+ *  tabulation (roving tabindex), les flèches passent d'un onglet à l'autre
+ *  et la sélection suit le focus. */
 export function Tabs<T extends string>({
   onglets,
   actif,
   onChange,
+  variante = 'puces',
   rail,
   panneau,
   className,
 }: TabsProps<T>) {
+  function auClavier(e: ReactKeyboardEvent<HTMLButtonElement>) {
+    const rangee = e.currentTarget.parentElement
+    if (!rangee) return
+    const tabs = Array.from(rangee.querySelectorAll<HTMLButtonElement>('[role="tab"]'))
+    const i = tabs.indexOf(e.currentTarget)
+    let cible = -1
+    if (e.key === 'ArrowRight') cible = (i + 1) % tabs.length
+    else if (e.key === 'ArrowLeft') cible = (i - 1 + tabs.length) % tabs.length
+    else if (e.key === 'Home') cible = 0
+    else if (e.key === 'End') cible = tabs.length - 1
+    if (cible < 0) return
+    e.preventDefault()
+    tabs[cible]?.focus()
+    onChange(onglets[cible]!.id)
+  }
+
+  if (variante === 'soulignes') {
+    return (
+      <div role="tablist" className={cx('zv-tabs-line', className)}>
+        {onglets.map((o) => (
+          <button
+            key={o.id}
+            type="button"
+            role="tab"
+            aria-selected={o.id === actif}
+            aria-controls={panneau}
+            tabIndex={o.id === actif ? 0 : -1}
+            className="zv-tabs-line__tab"
+            onClick={() => onChange(o.id)}
+            onKeyDown={auClavier}
+          >
+            {o.label}
+            {o.compte != null && <span className="zv-tabs-line__count">{o.compte}</span>}
+          </button>
+        ))}
+      </div>
+    )
+  }
   return (
     <SegGroup role="tablist" rail={rail} className={className}>
       {onglets.map((o) => (
@@ -216,9 +276,11 @@ export function Tabs<T extends string>({
           role="tab"
           aria-selected={o.id === actif}
           aria-controls={panneau}
+          tabIndex={o.id === actif ? 0 : -1}
           on={o.id === actif}
           compte={o.compte}
           onClick={() => onChange(o.id)}
+          onKeyDown={auClavier}
         >
           {o.label}
         </Seg>
@@ -327,3 +389,43 @@ export function Scroll({ habillee, className, ...reste }: ScrollProps) {
     />
   )
 }
+
+/* ─── Barre d'onglets mobile ───────────────────────────────────────── */
+
+export interface TabbarProps extends Div {
+  /** Le nom de la barre (« Sections ») : un <nav> anonyme de plus est une
+   *  énigme au lecteur d'écran — même règle que le label de `Carousel`. */
+  label: string
+  className?: string
+}
+
+/** Barre basse de navigation, pour une application à trois ou quatre
+ *  sections. N'existe que SOUS le point de rupture : au-dessus, la colonne
+ *  latérale est là. CINQ entrées au maximum — au-delà, c'est le tiroir.
+ *  ⚠️ Elle est fixe : le gabarit qui la pose doit donner au contenu un
+ *  padding-bottom à sa hauteur, sinon la dernière ligne se cache dessous. */
+export function Tabbar({ label, className, ...reste }: TabbarProps) {
+  return <nav aria-label={label} className={cx('zv-tabbar', className)} {...reste} />
+}
+
+export interface TabbarItemProps extends A {
+  /** Section courante : pose `aria-current="page"`, que le CSS suit. */
+  courant?: boolean
+  /** L'icône au-dessus du libellé — un `<Icon>` du paquet. */
+  icone?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export function TabbarItem({ courant, icone, className, children, ...reste }: TabbarItemProps) {
+  return (
+    <a
+      aria-current={courant ? 'page' : undefined}
+      className={cx('zv-tabbar__item', className)}
+      {...reste}
+    >
+      {icone}
+      {children}
+    </a>
+  )
+}

package/react/surfaces.tsx

@@ -159,3 +159,48 @@ export function anim(
     return `zv-anim-converge zv-anim-converge--${option}`
   return `zv-anim-${nom}`
 }
+
+/* ─── Formats sociaux ──────────────────────────────────────────────── */
+
+export interface SocialFrameProps extends Div {
+  /** paysage 1200×630 (OpenGraph, lien LinkedIn) · carre 1080×1080 (post) ·
+   *  story 1080×1920. FIGÉS en pixels : ce sont des planches qu'on CAPTURE,
+   *  pas des pages — elles ignorent le point de rupture, et c'est voulu. */
+  format?: 'paysage' | 'carre' | 'story'
+  /** La planche sombre : le manifeste en fond. Les règles du fond sombre
+   *  s'appliquent — labels en `Mono ton="on-dark"`, jamais les neutres
+   *  inversés. */
+  manifeste?: boolean
+  /** Le pied : wordmark à gauche, adresse en mono à droite. */
+  pied?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+/** Planche d'export pour les réseaux. ⚠️ La règle « jamais de faux
+ *  contenu » s'y applique au premier chef : un visuel social EST une
+ *  publication — pas de chiffre inventé, pas de citation fabriquée. */
+export function SocialFrame({
+  format = 'paysage',
+  manifeste,
+  pied,
+  className,
+  children,
+  ...reste
+}: SocialFrameProps) {
+  return (
+    <div
+      className={cx(
+        'zv-social',
+        format === 'carre' && 'zv-social--carre',
+        format === 'story' && 'zv-social--story',
+        manifeste && 'zv-social--manifeste',
+        className,
+      )}
+      {...reste}
+    >
+      <div className="zv-social__contenu">{children}</div>
+      {pied && <div className="zv-social__pied">{pied}</div>}
+    </div>
+  )
+}

package/src/base.css

@@ -64,6 +64,22 @@ a:not([class]):hover {
   outline-offset: 2px;
 }
 
+/* Texte pour lecteurs d'écran seulement — la géométrie standard du motif,
+ * aucune valeur de charte. HORS RELEVÉ (25/08/2026) : ajouté avec la roue,
+ * dont le libellé d'annonce doit être un TEXTE dans le flux (un aria-label
+ * sur un span vide n'est pas annoncé par tous les lecteurs). */
+.zv-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

package/src/components.css

@@ -16,7 +16,8 @@
 
 .zv-btn,
 .zv-btn--ghost,
-.zv-btn--ink {
+.zv-btn--ink,
+.zv-btn--danger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -30,10 +31,21 @@
   text-decoration: none;
   border: 0;
   cursor: pointer;
+  /* La courbe maison, 160 ms — coupée globalement par prefers-reduced-motion
+   * (base.css). Le fond en dégradé du bouton plein ne s'interpole pas : lui
+   * seul bascule sans fondu, l'écart est trop faible pour se voir. */
+  transition:
+    background-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    border-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    color 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    box-shadow 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
 .zv-btn {
-  background: linear-gradient(180deg, #2b2bb4 0%, var(--accent-deep) 100%);
+  /* Le sommet du dégradé, relevé dans Main.html et SANS token : écrit une
+   * seule fois ici, les états de survol le dérivent par color-mix. */
+  --zv-btn-haut: #2b2bb4;
+  background: linear-gradient(180deg, var(--zv-btn-haut) 0%, var(--accent-deep) 100%);
   color: var(--white);
   /* Le liseré interne fait tout le galbe du bouton : il est dans Main.html
    * mais absent de --shadow-btn, d'où la composition ici. */
@@ -53,6 +65,74 @@
   color: var(--white);
 }
 
+/* Action DESTRUCTIVE : la confirmation d'une modale danger, la suppression
+ * définitive. HORS RELEVÉ (25/08/2026, voir DECISIONS.md) : sans elle,
+ * « Supprimer » se rendait en plein indigo et se lisait comme n'importe
+ * quelle action. Aplat --err, sans dégradé ni ombre indigo.
+ * ⚠️ Elle COMPTE comme le bouton plein de l'écran : la règle « un seul plein
+ * par page » compte les aplats, pas les couleurs. */
+.zv-btn--danger {
+  background: var(--err);
+  color: var(--white);
+}
+
+/* ─── États de survol et d'appui ────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md) : aucune maquette n'a d'état
+ * hover — elles sont figées. Le survol ASSOMBRIT, l'appui assombrit
+ * davantage et rassoit le bouton (l'ombre tombe, le liseré s'éteint).
+ * Les teintes sont DÉRIVÉES par color-mix — l'idiome du voile
+ * (overlays.css) — des couleurs que le bouton porte déjà : le sommet de
+ * dégradé relevé (--zv-btn-haut, sans token) et --accent-deep. Aucune
+ * teinte nouvelle n'entre. Aucun déplacement : les entrées du système
+ * montent au défilement, un bouton qui saute au survol raconterait autre
+ * chose.
+ * Déclarés AVANT [disabled], qui doit l'emporter à spécificité égale. */
+
+.zv-btn:hover {
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklab, var(--zv-btn-haut) 86%, var(--ink)) 0%,
+    color-mix(in oklab, var(--accent-deep) 86%, var(--ink)) 100%
+  );
+}
+
+.zv-btn:active {
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklab, var(--zv-btn-haut) 72%, var(--ink)) 0%,
+    color-mix(in oklab, var(--accent-deep) 72%, var(--ink)) 100%
+  );
+  box-shadow: none;
+}
+
+.zv-btn--ghost:hover {
+  border-color: var(--accent);
+}
+
+.zv-btn--ghost:active {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+
+/* Un aplat d'encre ne peut pas s'assombrir visiblement : il s'ÉCLAIRCIT au
+ * survol, et l'appui revient à l'encre pleine — plus sombre que le survol,
+ * c'est ce qui fait lire l'enfoncement. */
+.zv-btn--ink:hover {
+  background: color-mix(in oklab, var(--ink) 82%, var(--white));
+}
+
+.zv-btn--ink:active {
+  background: var(--ink);
+}
+
+.zv-btn--danger:hover {
+  background: color-mix(in oklab, var(--err) 86%, var(--ink));
+}
+
+.zv-btn--danger:active {
+  background: color-mix(in oklab, var(--err) 72%, var(--ink));
+}
+
 /* Variante compacte : barres de navigation. L'ombre tombe — un bouton de
  * chrome ne décolle pas de la page. */
 .zv-btn--sm {
@@ -68,7 +148,8 @@
 
 .zv-btn[disabled],
 .zv-btn--ghost[disabled],
-.zv-btn--ink[disabled] {
+.zv-btn--ink[disabled],
+.zv-btn--danger[disabled] {
   /* HORS RELEVÉ — aucune maquette ne montre de bouton désactivé. Traitement
    * minimal et neutre plutôt qu'une couleur inventée. */
   opacity: 0.5;
@@ -76,6 +157,57 @@
   box-shadow: none;
 }
 
+/* Ni le survol ni l'appui ne doivent rattraper un bouton inerte —
+ * désactivé OU occupé (dont le clic est avalé par la façade) : sans ces
+ * règles, les états ci-dessus repeignent le fond et le bouton a l'air
+ * actif. Même précaution que les contrôles désactivés de forms.css. */
+.zv-btn[disabled]:is(:hover, :active),
+.zv-btn[aria-busy='true']:is(:hover, :active) {
+  background: linear-gradient(180deg, var(--zv-btn-haut) 0%, var(--accent-deep) 100%);
+}
+
+/* Occupé mais pas désactivé, le bouton plein garde son ombre à l'appui —
+ * un enfoncement qui ne déclenche rien serait un mensonge de rendu. Le
+ * compact, lui, n'a pas d'ombre à garder. */
+.zv-btn:not(.zv-btn--sm)[aria-busy='true']:active {
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.18) inset,
+    var(--shadow-btn);
+}
+
+.zv-btn--ghost[disabled]:is(:hover, :active),
+.zv-btn--ghost[aria-busy='true']:is(:hover, :active) {
+  border-color: var(--accent-line);
+  background: var(--white);
+}
+
+.zv-btn--ink[disabled]:is(:hover, :active),
+.zv-btn--ink[aria-busy='true']:is(:hover, :active) {
+  background: var(--ink);
+}
+
+.zv-btn--danger[disabled]:is(:hover, :active),
+.zv-btn--danger[aria-busy='true']:is(:hover, :active) {
+  background: var(--err);
+}
+
+/* Attente : le motif de Mémoire (feedback.css le documente) — le LIBELLÉ
+ * change (« Connexion… ») pendant que le bouton s'estompe, en
+ * `cursor-wait; opacity: .7`, valeurs relevées reprises telles quelles.
+ * Codé sur [aria-busy], l'attribut qui rend l'attente audible : le
+ * balisage correct ne coûte rien. La façade React l'expose en prop
+ * `occupe` — qui pose aria-disabled et AVALE le clic plutôt que de poser
+ * `disabled`, pour que le bouton reste dans le parcours clavier pendant
+ * que l'attente s'annonce (voir DECISIONS.md). Déclaré APRÈS [disabled]
+ * pour l'emporter à spécificité égale quand les deux se combinent. */
+.zv-btn[aria-busy='true'],
+.zv-btn--ghost[aria-busy='true'],
+.zv-btn--ink[aria-busy='true'],
+.zv-btn--danger[aria-busy='true'] {
+  cursor: wait;
+  opacity: 0.7;
+}
+
 .zv-btn-row {
   display: flex;
   align-items: center;

package/src/data.css

@@ -5,7 +5,9 @@
  *   les trois registres de cellule, le dégroupage mobile (.zv-unwrap), la
  *   liste sans colonnes, la métadonnée mono, le couple clé-valeur, la
  *   pastille d'initiales, les deux utilitaires de troncature, l'étiquette de
- *   catégorie, la puce de citation et la vignette de format.
+ *   catégorie, la puce de citation et la vignette de format — et, depuis le
+ *   25/08/2026 (hors relevé, voir DECISIONS.md) : la rangée dépliante, la
+ *   touche de clavier et le code, en ligne comme en bloc.
  *
  * DÉPENDANCES
  *   tokens.css — pour les seules variables qui y sont déclarées ;
@@ -156,6 +158,51 @@
  * contient aucun, et les inventer ferait apparaître un fond de plus dans un
  * système qui n'en a que deux (blanc, survol). */
 
+/* ─── En-tête triable ──────────────────────────────────────────────────
+ * ⚠️ HORS RELEVÉ — ajouté le 25/08/2026 avec l'adaptateur TanStack Table.
+ * Aucun tableau de la production n'est triable ; l'intitulé y est du texte
+ * inerte. Un en-tête qui trie DOIT être un <button> — c'est la seule façon
+ * qu'il soit atteignable au clavier et annoncé comme actionnable.
+ *
+ * `font: inherit` plutôt qu'une police redite : l'en-tête a déjà la sienne
+ * (mono, capitales, interlettrée), et un <button> retomberait sur celle du
+ * navigateur. Hériter ne fait entrer aucune valeur nouvelle. */
+
+.zv-sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.zv-sort:hover {
+  color: var(--accent);
+}
+
+.zv-sort:focus-visible {
+  /* L'en-tête colle au bord du cadre : l'anneau de base.css y serait rogné. */
+  outline-offset: -2px;
+}
+
+/* La marque de tri reste TOUJOURS posée, même sur une colonne non triée
+ * (elle vaut alors ↕) : si elle n'apparaissait qu'au tri, la largeur de la
+ * colonne changerait au clic et toute la ligne d'en-tête danserait. */
+.zv-sort__mark {
+  font-size: var(--mono-sm);
+  color: var(--label);
+}
+
+.zv-sort:hover .zv-sort__mark {
+  color: var(--accent);
+}
+
 /* ─── Cellules ─────────────────────────────────────────────────────────
  * Trois registres seulement : le texte courant, le nombre, et l'intitulé qui
  * remplace l'en-tête quand celui-ci disparaît. */
@@ -644,6 +691,134 @@
   background: var(--fmt-docx);
 }
 
+/* ─── Rangée dépliante ─────────────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). La FAQ est le pliage de la
+ * vitrine ; l'applicatif n'en avait aucun — options avancées, détail d'une
+ * ligne de journal. Construite sur <details> NATIF : le clavier, l'annonce
+ * et l'état ouvert viennent du navigateur, aucun JavaScript.
+ * Plusieurs rangées se suivent bord à bord : le filet mitoyen tombe. */
+
+.zv-fold {
+  border: 1px solid var(--line);
+  background: var(--white);
+}
+
+.zv-fold + .zv-fold {
+  border-top: 0;
+}
+
+.zv-fold__titre {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  font-size: var(--app);
+  font-weight: 600;
+  color: var(--ink);
+  cursor: pointer;
+  /* Le marqueur natif du <summary> tombe : le chevron du composant fait le
+   * même travail sans imposer le triangle du navigateur. */
+  list-style: none;
+}
+
+.zv-fold__titre::-webkit-details-marker {
+  display: none;
+}
+
+.zv-fold__titre:hover {
+  background: var(--panel);
+}
+
+/* Le chevron porte sa classe : cibler tout svg du titre attraperait aussi
+ * une icône posée dans le libellé, qui se verrait rétrécie et retournée à
+ * l'ouverture. */
+.zv-fold__chevron {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  color: var(--label);
+  /* `rotate` et non `transform` : la propriété indépendante, comme partout
+   * où le paquet anime. Coupée par prefers-reduced-motion (base.css). */
+  transition: rotate 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-fold[open] > .zv-fold__titre {
+  border-bottom: 1px solid var(--hairline);
+}
+
+.zv-fold[open] > .zv-fold__titre .zv-fold__chevron {
+  rotate: 180deg;
+}
+
+.zv-fold__corps {
+  padding: 12px 16px;
+  font-size: var(--app);
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+/* ─── Touche de clavier ────────────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026). Une documentation d'interface cite des
+ * raccourcis ; le paquet n'avait rien pour les poser. Le bas de 2 px fait
+ * le relief de la touche — géométrie, pas ombre de charte, comme l'anneau
+ * du radio. */
+
+.zv-kbd {
+  display: inline-block;
+  padding: 2px 6px;
+  border: 1px solid var(--line);
+  border-bottom-width: 2px;
+  background: var(--panel);
+  font-family: var(--font-mono);
+  font-size: var(--mono-lg);
+  font-weight: 600;
+  white-space: nowrap;
+  color: var(--ink-2);
+}
+
+/* ─── Code ─────────────────────────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md — c'est l'entrée qui a créé
+ * --font-code). --font-mono (Space Grotesk) est PROPORTIONNELLE : elle
+ * porte le registre des labels, pas l'alignement, et tabular-nums n'aligne
+ * que les chiffres. Du code exige la chasse fixe entière : --font-code, la
+ * pile système, sans fonte chargée.
+ * Aucune coloration syntaxique : elle imposerait une palette entière que la
+ * charte n'a pas. Le code se lit à l'encre sur panneau, comme un extrait. */
+
+/* En ligne, dans une phrase : `pnpm build`. Taille RELATIVE au texte qui
+ * l'accueille — le même extrait sert dans un corps 15 et une note 12,5. */
+.zv-code {
+  padding: 1px 5px;
+  border: 1px solid var(--hairline);
+  background: var(--panel);
+  font-family: var(--font-code);
+  font-size: 0.85em;
+  overflow-wrap: break-word;
+  color: var(--ink-2);
+}
+
+/* En bloc. Le cadre défile en son sein, comme le tableau : une ligne longue
+ * ne pousse jamais la page en défilement horizontal. */
+.zv-codeblock {
+  overflow-x: auto;
+  margin: 0;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  padding: 14px 16px;
+  font-family: var(--font-code);
+  font-size: var(--app-sm);
+  line-height: 1.7;
+  tab-size: 2;
+  color: var(--ink);
+}
+
+/* Le <code> intérieur n'apporte que la sémantique : sans ce rappel, il
+ * retomberait sur la mono du navigateur, à une autre taille. */
+.zv-codeblock code {
+  font: inherit;
+}
+
 /* ─── Sous 768px ───────────────────────────────────────────────────────
  * Point de rupture unique de la charte. Les lignes cessent d'être des lignes :
  * une grille de six colonnes à 375px produit six colonnes illisibles, ou un
@@ -739,4 +914,16 @@
   .zv-cite {
     white-space: normal;
   }
+
+  /* L'en-tête du dépliant devient une cible tactile. */
+  .zv-fold__titre {
+    min-height: var(--tap);
+    padding-block: 10px;
+  }
+
+  /* 16px de gouttière interne sur 375px déjà bordés par la page : le bloc
+   * se resserre, comme les bandeaux. */
+  .zv-codeblock {
+    padding: 12px;
+  }
 }