@zevra/ui 0.16.0 → 0.20.0

package/react/forms.tsx

@@ -21,6 +21,7 @@ import type {
   TextareaHTMLAttributes,
 } from 'react'
 import { cx } from './cx.js'
+import { Icon } from './icon.js'
 
 /* ─── Groupe de champ ──────────────────────────────────────────────── */
 
@@ -471,3 +472,55 @@ export function Range({ className, style, min, max, value, defaultValue, ...rest
     />
   )
 }
+
+export interface InputPasswordProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {
+  /** Le mot de passe est-il en clair ? L'état est TENU PAR L'APPELANT. */
+  visible?: boolean
+  /** Bascule demandée. Sans lui, le bouton n'est pas rendu du tout. */
+  onBascule?: () => void
+  className?: string
+}
+
+/**
+ * Champ de saisie masquée, avec sa bascule d'affichage.
+ *
+ * C'est le seul endroit de l'interface 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 et la réinitialisation qui suit.
+ *
+ * ⚠️ Sans état, comme tout ce fichier : `visible` et `onBascule` viennent de
+ * l'appelant, qui est déjà un composant client puisqu'il tient la valeur du
+ * champ. Le paquet ne tire pas React côté navigateur pour un champ.
+ *
+ * Le libellé du bouton change avec l'état — une icône seule ne dit pas ce qui
+ * va se passer — et `aria-pressed` l'annonce aux lecteurs d'écran.
+ */
+export function InputPassword({
+  visible,
+  onBascule,
+  className,
+  ...reste
+}: InputPasswordProps) {
+  return (
+    <div className={cx('zv-affix', className)}>
+      <input
+        type={visible ? 'text' : 'password'}
+        className="zv-input zv-input--bare"
+        {...reste}
+      />
+      {onBascule && (
+        <button
+          type="button"
+          className="zv-affix__btn"
+          onClick={onBascule}
+          aria-pressed={visible ?? false}
+          aria-label={visible ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
+          title={visible ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
+        >
+          <Icon nom={visible ? 'oeil-barre' : 'oeil'} taille="sm" />
+        </button>
+      )}
+    </div>
+  )
+}

package/react/icon-data.ts

@@ -8,6 +8,7 @@ export type IconId =
   | 'app-couches'
   | 'archiver'
   | 'attention'
+  | 'avancer'
   | 'balance'
   | 'base-de-donnees'
   | 'bouclier-verifie'
@@ -18,6 +19,7 @@ export type IconId =
   | 'chevron-droit'
   | 'chevron-gauche'
   | 'chevron-haut'
+  | 'citation'
   | 'coche'
   | 'copier'
   | 'corbeille'
@@ -38,25 +40,38 @@ export type IconId =
   | 'filtre'
   | 'globe'
   | 'graphique'
+  | 'gras'
   | 'horloge'
+  | 'image'
   | 'imprimante'
   | 'info'
+  | 'italique'
+  | 'lecture'
   | 'lien-externe'
+  | 'liste-a-puces'
   | 'livre-ouvert'
   | 'menu'
   | 'moins'
+  | 'muet'
   | 'oeil'
+  | 'oeil-barre'
+  | 'pause'
+  | 'plein-ecran'
   | 'plus'
   | 'recherche'
   | 'registre'
   | 'reglages'
+  | 'rembobiner'
   | 'reseau'
+  | 'signet'
+  | 'son'
   | 'taches'
   | 'telecharger'
   | 'telephone'
   | 'tri'
   | 'trois-points'
   | 'utilisateur'
+  | 'video'
 
 export const CORPS: Record<IconId, string> = {
   'accueil': "<path d=\"M4 10.67 L12 4 L20 10.67 V20 H4 Z\" /><path d=\"M9.33 20 V13.33 H14.67 V20\" />",
@@ -65,6 +80,7 @@ export const CORPS: Record<IconId, string> = {
   'app-couches': "<path d=\"M12 2.67 L20 6.67 L12 10.67 L4 6.67 Z\" /><path d=\"M4 12 L12 16 L20 12\" /><path d=\"M4 17.33 L12 21.33 L20 17.33\" />",
   'archiver': "<rect x=\"3.33\" y=\"4\" width=\"17.33\" height=\"4.67\" /><path d=\"M5.33 8.67 V18.93 A1.07 1.07 0 0 0 6.4 20 H17.6 A1.07 1.07 0 0 0 18.67 18.93 V8.67\" /><path d=\"M9.33 12.67 H14.67\" />",
   'attention': "<path d=\"M10.67 3.87 L2.53 17.87 A1.55 1.55 0 0 0 3.87 20.19 H20.13 A1.55 1.55 0 0 0 21.47 17.87 L13.33 3.87 A1.54 1.54 0 0 0 10.67 3.87 Z\" /><path d=\"M12 9.33 V13.33\" /><rect x=\"11.2\" y=\"15.73\" width=\"1.6\" height=\"1.6\" fill=\"currentColor\" stroke=\"none\" />",
+  'avancer': "<path d=\"M4 6 L11 12 L4 18 Z\" fill=\"currentColor\" stroke=\"none\" /><path d=\"M13 6 L20 12 L13 18 Z\" fill=\"currentColor\" stroke=\"none\" />",
   'balance': "<path d=\"M12 3.33 V20.67\" /><path d=\"M8.67 20.67 H15.33\" /><path d=\"M5.33 6 H18.67\" /><path d=\"M6.67 6 L3.33 13.33\" /><path d=\"M6.67 6 L10 13.33\" /><path d=\"M3.33 13.33 A3.33 3.33 0 0 0 10 13.33\" /><path d=\"M17.33 6 L14 13.33\" /><path d=\"M17.33 6 L20.67 13.33\" /><path d=\"M14 13.33 A3.33 3.33 0 0 0 20.67 13.33\" />",
   'base-de-donnees': "<ellipse cx=\"12\" cy=\"6\" rx=\"7.33\" ry=\"2.67\" /><path d=\"M4.67 6 V12 C4.67 13.47 7.87 14.67 12 14.67 C16.13 14.67 19.33 13.47 19.33 12 V6\" /><path d=\"M4.67 12 V18 C4.67 19.47 7.87 20.67 12 20.67 C16.13 20.67 19.33 19.47 19.33 18 V12\" />",
   'bouclier-verifie': "<path d=\"M12 2.67 L20 6 V12 C20 16.67 16.67 19.73 12 21.33 C7.33 19.73 4 16.67 4 12 V6 Z\" /><path d=\"M8.67 12 L11.07 14.4 L15.33 10\" />",
@@ -75,6 +91,7 @@ export const CORPS: Record<IconId, string> = {
   'chevron-droit': "<path d=\"M9.33 4 L17.33 12 L9.33 20\" />",
   'chevron-gauche': "<path d=\"M14.67 4 L6.67 12 L14.67 20\" />",
   'chevron-haut': "<path d=\"M6.67 14.67 L12 9.33 L17.33 14.67\" />",
+  'citation': "<path d=\"M4 14 V10 C4 7.8 5.8 6 8 6 V9 C6.9 9 6 9.9 6 11 H9 V14 Z\" /><path d=\"M14 14 V10 C14 7.8 15.8 6 18 6 V9 C16.9 9 16 9.9 16 11 H19 V14 Z\" />",
   'coche': "<path d=\"M5 12.4 L9.4 16.8 L19 6.8\" />",
   'copier': "<rect x=\"4\" y=\"4\" width=\"12\" height=\"12\" /><path d=\"M8 16 V18.93 A1.07 1.07 0 0 0 9.07 20 H18.93 A1.07 1.07 0 0 0 20 18.93 V9.07 A1.07 1.07 0 0 0 18.93 8 H16\" />",
   'corbeille': "<path d=\"M4 6.67 H20\" /><path d=\"M9.33 6.67 V4.67 A1.33 1.33 0 0 1 10.67 3.33 H13.33 A1.33 1.33 0 0 1 14.67 4.67 V6.67\" /><path d=\"M6 6.67 L6.93 18.93 A1.33 1.33 0 0 0 8.27 20 H15.73 A1.33 1.33 0 0 0 17.07 18.93 L18 6.67\" /><path d=\"M10 10.67 V16.67\" /><path d=\"M14 10.67 V16.67\" />",
@@ -95,25 +112,38 @@ export const CORPS: Record<IconId, string> = {
   'filtre': "<path d=\"M2.67 4 H21.33 L14.67 12.27 V18.67 L9.33 21.33 V12.27 Z\" />",
   'globe': "<circle cx=\"12\" cy=\"12\" r=\"8.67\" /><path d=\"M3.33 12 H20.67\" /><path d=\"M12 3.33 C14.22 5.64 15.47 8.71 15.47 12 C15.47 15.29 14.22 18.36 12 20.67 C9.78 18.36 8.53 15.29 8.53 12 C8.53 8.71 9.78 5.64 12 3.33 Z\" />",
   'graphique': "<path d=\"M4 4 V20 H20\" /><path d=\"M8.67 20 V12.67\" /><path d=\"M12.67 20 V8\" /><path d=\"M16.67 20 V15.33\" />",
+  'gras': "<path d=\"M7 4 H13 C15.2 4 16.5 5.3 16.5 7.5 C16.5 9.7 15.2 11 13 11 H7 Z\" /><path d=\"M7 11 H14 C16.2 11 17.5 12.5 17.5 15 C17.5 17.5 16.2 19 14 19 H7 Z\" />",
   'horloge': "<circle cx=\"12\" cy=\"12\" r=\"8\" /><path d=\"M12 6.67 V12 L15.33 14\" />",
+  'image': "<path d=\"M3.5 5 H20.5 V19 H3.5 Z\" /><path d=\"M3.5 16 L9 10.5 L13.5 15 L16 12.5 L20.5 17\" /><path d=\"M15 8.5 H15.01\" />",
   'imprimante': "<path d=\"M6.67 8 V3.33 H17.33 V8\" /><path d=\"M6.67 17.33 H4.67 A1.33 1.33 0 0 1 3.33 16 V10.67 A1.33 1.33 0 0 1 4.67 9.33 H19.33 A1.33 1.33 0 0 1 20.67 10.67 V16 A1.33 1.33 0 0 1 19.33 17.33 H17.33\" /><rect x=\"6.67\" y=\"13.33\" width=\"10.67\" height=\"7.33\" />",
   'info': "<circle cx=\"12\" cy=\"12\" r=\"8.67\" /><path d=\"M12 11.33 V16\" /><rect x=\"11.2\" y=\"7.2\" width=\"1.6\" height=\"1.6\" fill=\"currentColor\" stroke=\"none\" />",
+  'italique': "<path d=\"M10 5 H18\" /><path d=\"M6 19 H14\" /><path d=\"M14.5 5 L9.5 19\" />",
+  'lecture': "<path d=\"M8 5 L19 12 L8 19 Z\" fill=\"currentColor\" stroke=\"none\" />",
   'lien-externe': "<path d=\"M10.67 4 H4 V20 H20 V13.33\" /><path d=\"M14.67 4 H20 V9.33\" /><path d=\"M20 4 L12 12\" />",
+  'liste-a-puces': "<path d=\"M9 6.5 H20\" /><path d=\"M9 12 H20\" /><path d=\"M9 17.5 H20\" /><path d=\"M4 5.5 H6 V7.5 H4 Z\" fill=\"currentColor\" stroke=\"none\" /><path d=\"M4 11 H6 V13 H4 Z\" fill=\"currentColor\" stroke=\"none\" /><path d=\"M4 16.5 H6 V18.5 H4 Z\" fill=\"currentColor\" stroke=\"none\" />",
   'livre-ouvert': "<path d=\"M2.67 5.33 C5.33 4.67 7.78 4.89 12 6.67 C16.22 4.89 18.67 4.67 21.33 5.33 V18 C18.67 17.33 16.22 17.56 12 19.33 C7.78 17.56 5.33 17.33 2.67 18 Z\" /><path d=\"M12 6.67 V19.33\" />",
   'menu': "<path d=\"M0 5.33 H24\" /><path d=\"M0 12 H24\" /><path d=\"M0 18.67 H24\" />",
   'moins': "<path d=\"M4 12 H20\" />",
+  'muet': "<path d=\"M4 9.5 H7.5 L12 5.5 V18.5 L7.5 14.5 H4 Z\" /><path d=\"M16 10 L21 14\" /><path d=\"M21 10 L16 14\" />",
   'oeil': "<path d=\"M2 12 C5.33 6.67 8.67 4.67 12 4.67 C15.33 4.67 18.67 6.67 22 12 C18.67 17.33 15.33 19.33 12 19.33 C8.67 19.33 5.33 17.33 2 12 Z\" /><circle cx=\"12\" cy=\"12\" r=\"2.67\" />",
+  'oeil-barre': "<path d=\"M3 12 C5.5 7.5 8.6 5.5 12 5.5 C15.4 5.5 18.5 7.5 21 12 C18.5 16.5 15.4 18.5 12 18.5 C8.6 18.5 5.5 16.5 3 12 Z\" /><path d=\"M9.5 12 A2.5 2.5 0 0 1 14.5 12 A2.5 2.5 0 0 1 9.5 12 Z\" /><path d=\"M4 20 L20 4\" />",
+  'pause': "<path d=\"M9 5 H11 V19 H9 Z\" fill=\"currentColor\" stroke=\"none\" /><path d=\"M13 5 H15 V19 H13 Z\" fill=\"currentColor\" stroke=\"none\" />",
+  'plein-ecran': "<path d=\"M4 9 V4 H9\" /><path d=\"M20 9 V4 H15\" /><path d=\"M4 15 V20 H9\" /><path d=\"M20 15 V20 H15\" />",
   'plus': "<path d=\"M12 4 V20\" /><path d=\"M4 12 H20\" />",
   'recherche': "<circle cx=\"10.67\" cy=\"10.67\" r=\"6\" /><path d=\"M15.33 15.33 L20 20\" />",
   'registre': "<rect x=\"3.33\" y=\"5.33\" width=\"17.33\" height=\"5.33\" /><rect x=\"3.33\" y=\"13.33\" width=\"17.33\" height=\"5.33\" /><rect x=\"5.87\" y=\"7.2\" width=\"1.6\" height=\"1.6\" fill=\"currentColor\" stroke=\"none\" /><rect x=\"5.87\" y=\"15.2\" width=\"1.6\" height=\"1.6\" fill=\"currentColor\" stroke=\"none\" />",
   'reglages': "<circle cx=\"12\" cy=\"12\" r=\"2.93\" /><path d=\"M12 2 V4.67 M12 19.33 V22 M2 12 H4.67 M19.33 12 H22 M4.8 4.8 L6.67 6.67 M17.33 17.33 L19.2 19.2 M19.2 4.8 L17.33 6.67 M6.67 17.33 L4.8 19.2\" />",
+  'rembobiner': "<path d=\"M11 6 L4 12 L11 18 Z\" fill=\"currentColor\" stroke=\"none\" /><path d=\"M20 6 L13 12 L20 18 Z\" fill=\"currentColor\" stroke=\"none\" />",
   'reseau': "<circle cx=\"12\" cy=\"12\" r=\"8\" /><path d=\"M4 12 H20\" /><path d=\"M12 4 C14.67 8 14.67 16 12 20\" /><path d=\"M12 4 C9.33 8 9.33 16 12 20\" />",
+  'signet': "<path d=\"M6 4 H18 V20 L12 15.5 L6 20 Z\" />",
+  'son': "<path d=\"M4 9.5 H7.5 L12 5.5 V18.5 L7.5 14.5 H4 Z\" /><path d=\"M16 9 C17.5 10.2 17.5 13.8 16 15\" /><path d=\"M18.8 6.6 C21.4 9 21.4 15 18.8 17.4\" />",
   'taches': "<path d=\"M4.67 6.67 L6.67 8.67 L10 5.33\" /><path d=\"M4.67 16 L6.67 18 L10 14.67\" /><path d=\"M13.33 7.33 H20\" /><path d=\"M13.33 16.67 H20\" />",
   'telecharger': "<path d=\"M12 3.33 V15.33\" /><polyline points=\"6.67,10 12,15.33 17.33,10\" /><path d=\"M4.67 20.67 H19.33\" />",
   'telephone': "<path d=\"M20.67 16.93 V19.33 A1.6 1.6 0 0 1 18.93 20.93 C16.13 20.67 13.47 19.67 11.2 18.13 C9.09 16.71 7.29 14.91 5.87 12.8 C4.33 10.52 3.33 7.85 3.07 5.05 A1.6 1.6 0 0 1 4.67 3.33 H7.07 A1.6 1.6 0 0 1 8.67 4.71 C8.79 5.83 9.04 6.93 9.4 7.97 A1.6 1.6 0 0 1 9.04 9.65 L8 10.69 C9.32 13.01 11.03 14.71 13.33 16 L14.37 14.96 A1.6 1.6 0 0 1 16.05 14.6 C17.09 14.96 18.19 15.21 19.31 15.33 A1.6 1.6 0 0 1 20.67 16.93 Z\" />",
   'tri': "<path d=\"M8 4 V20\" /><path d=\"M4.67 7.33 L8 4 L11.33 7.33\" /><path d=\"M16 20 V4\" /><path d=\"M12.67 16.67 L16 20 L19.33 16.67\" />",
   'trois-points': "<rect x=\"4\" y=\"10.67\" width=\"2.66\" height=\"2.66\" fill=\"currentColor\" stroke=\"none\" /><rect x=\"10.67\" y=\"10.67\" width=\"2.66\" height=\"2.66\" fill=\"currentColor\" stroke=\"none\" /><rect x=\"17.34\" y=\"10.67\" width=\"2.66\" height=\"2.66\" fill=\"currentColor\" stroke=\"none\" />",
   'utilisateur': "<circle cx=\"12\" cy=\"8\" r=\"3.33\" /><path d=\"M5.33 20 C5.33 15.33 8.33 13.33 12 13.33 C15.67 13.33 18.67 15.33 18.67 20\" />",
+  'video': "<path d=\"M3.5 6 H15 V18 H3.5 Z\" /><path d=\"M15 10 L20.5 7 V17 L15 14 Z\" />",
 }
 
 /** Nom lisible de chaque icône — sert de titre accessible par défaut à
@@ -125,6 +155,7 @@ export const NOMS: Record<IconId, string> = {
   'app-couches': "Application (couches)",
   'archiver': "Archiver",
   'attention': "Attention (avertissement)",
+  'avancer': "Avancer",
   'balance': "Balance (justice)",
   'base-de-donnees': "Base de données",
   'bouclier-verifie': "Bouclier vérifié (authentification)",
@@ -135,6 +166,7 @@ export const NOMS: Record<IconId, string> = {
   'chevron-droit': "Chevron droit",
   'chevron-gauche': "Chevron gauche",
   'chevron-haut': "Chevron haut",
+  'citation': "Citation",
   'coche': "Coche",
   'copier': "Copier",
   'corbeille': "Corbeille (supprimer)",
@@ -155,23 +187,36 @@ export const NOMS: Record<IconId, string> = {
   'filtre': "Filtre",
   'globe': "Globe (international)",
   'graphique': "Graphique (barres)",
+  'gras': "Gras",
   'horloge': "Horloge (intégration continue)",
+  'image': "Image",
   'imprimante': "Imprimante",
   'info': "Information",
+  'italique': "Italique",
+  'lecture': "Lecture",
   'lien-externe': "Lien externe",
+  'liste-a-puces': "Liste à puces",
   'livre-ouvert': "Livre ouvert (formation)",
   'menu': "Menu (hamburger)",
   'moins': "Moins",
+  'muet': "Muet",
   'oeil': "Œil (afficher)",
+  'oeil-barre': "Œil barré",
+  'pause': "Pause",
+  'plein-ecran': "Plein écran",
   'plus': "Plus",
   'recherche': "Recherche (loupe)",
   'registre': "Registre (serveurs empilés)",
   'reglages': "Réglages",
+  'rembobiner': "Rembobiner",
   'reseau': "Réseau (entrée / globe)",
+  'signet': "Signet",
+  'son': "Son",
   'taches': "Tâches (liste à cocher)",
   'telecharger': "Télécharger",
   'telephone': "Téléphone",
   'tri': "Tri",
   'trois-points': "Trois points (menu contextuel)",
   'utilisateur': "Utilisateur",
+  'video': "Vidéo",
 }

package/react/layout.tsx

@@ -5,6 +5,7 @@
 // Tout y est sans état.
 
 import type {
+  AnchorHTMLAttributes,
   ButtonHTMLAttributes,
   CSSProperties,
   ElementType,
@@ -162,8 +163,14 @@ export function NavLinks({ className, ...reste }: Div & { className?: string })
   return <div className={cx('zv-nav__links', className)} {...reste} />
 }
 
+/** Les composants qui rendent un `<a>` sont typés sur
+ *  `AnchorHTMLAttributes` et non `HTMLAttributes` : sans quoi ils refusent
+ *  `target`, `rel`, `download` et `hreflang`. Un lien sortant ne peut alors
+ *  pas porter `rel="noopener"`, et un lien qui doit s'ouvrir à côté ne le
+ *  peut pas non plus — une app consommatrice a dû écrire la classe à la main
+ *  pour cette seule raison. (0.19.0) */
 export interface NavLinkProps
-  extends Omit<HTMLAttributes<HTMLAnchorElement>, 'className'> {
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> {
   /** Lien secondaire : connexion, mentions. */
   discret?: boolean
   href?: string
@@ -200,7 +207,7 @@ export function NavDrawerLink({
   courant,
   className,
   ...reste
-}: Omit<HTMLAttributes<HTMLAnchorElement>, 'className'> & {
+}: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> & {
   courant?: boolean
   href?: string
   className?: string
@@ -287,7 +294,7 @@ export function Langue({
   courante,
   className,
   ...reste
-}: Omit<HTMLAttributes<HTMLAnchorElement>, 'className'> & {
+}: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> & {
   courante?: boolean
   href?: string
   className?: string
@@ -389,7 +396,7 @@ export function RailItem({
   className,
   children,
   ...reste
-}: Omit<HTMLAttributes<HTMLAnchorElement>, 'className'> & {
+}: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> & {
   courant?: boolean
   href: string
   className?: string

package/react/typography.tsx

@@ -6,7 +6,12 @@
 // balise un choix de structure. Les confondre casse le plan du document pour
 // un lecteur d'écran sans que rien ne se voie à l'écran.
 
-import type { ElementType, HTMLAttributes, ReactNode } from 'react'
+import type {
+  AnchorHTMLAttributes,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from 'react'
 import { cx } from './cx.js'
 
 type Div = Omit<HTMLAttributes<HTMLElement>, 'className'>
@@ -122,12 +127,17 @@ export function Em({
   )
 }
 
+/** Les composants qui rendent un `<a>` sont typés sur
+ *  `AnchorHTMLAttributes` et non `HTMLAttributes` : sans quoi ils refusent
+ *  `target`, `rel`, `download` et `hreflang`. Un lien sortant ne peut alors
+ *  pas porter `rel="noopener"`, et un lien qui doit s'ouvrir à côté ne le
+ *  peut pas non plus — une app consommatrice a dû écrire la classe à la main
+ *  pour cette seule raison. (0.19.0) */
 export function Link({
   className,
   ...reste
-}: Omit<HTMLAttributes<HTMLAnchorElement>, 'className'> & {
+}: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> & {
   className?: string
-  href?: string
 }) {
   return <a className={cx('zv-link', className)} {...reste} />
 }

package/src/base.css

@@ -160,6 +160,13 @@ a:not([class]):hover {
 .zv-em {
   color: var(--accent-deep);
   font-weight: 400;
+  /* Le composant `Em` rend un vrai <em>, que le navigateur penche par
+   * défaut — et AUCUNE italique n'est chargée : Outfit n'en a pas, il en
+   * fabrique donc une oblique de synthèse. Sur un titre de 76px, ça se voit.
+   * La charte ne demande à cette classe qu'un changement de couleur et de
+   * graisse ; on remet donc la droite. (`.zv-inset em` portait déjà cette
+   * règle : elle vit désormais là où le besoin est structurel.) */
+  font-style: normal;
 }
 
 /* Sur fond sombre l'accent ne change pas de couleur mais de graisse. */

package/src/components.css

@@ -41,10 +41,34 @@
     box-shadow 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
-.zv-btn {
-  /* 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;
+/* ─── Le plein ne s'applique QUE si aucune variante n'est posée ────────
+ *
+ * `zv-btn`, `zv-btn--ghost`, `zv-btn--ink` et `zv-btn--danger` sont quatre
+ * classes AUTONOMES et mutuellement exclusives : le socle commun ci-dessus
+ * les groupe dans un même sélecteur, ce qui leur donne exactement l'air
+ * d'une base et de ses modificateurs. `Button` n'en rend jamais qu'une —
+ * mais une app qui écrit ses classes à la main lit du BEM et compose les
+ * deux. C'est arrivé (mcp-factory, 0.19.0), et le résultat était vicieux :
+ * `.zv-btn:hover` (0,2,0) l'emportait sur `.zv-btn--ghost` (0,1,0), d'où un
+ * fond indigo sous un texte encre — illisible, et seulement AU SURVOL, donc
+ * invisible en relecture comme en capture.
+ *
+ * Le `:not(:where(…))` dit ce que le système voulait déjà dire : ces quatre
+ * classes s'excluent. `:where()` a une spécificité NULLE — la garde ne
+ * change donc aucun arbitrage existant, et une app qui surcharge `.zv-btn`
+ * continue de gagner exactement comme avant.
+ *
+ * ⚠️ À reporter sur toute règle future qui peint le bouton plein. */
+
+.zv-btn:not(:where(.zv-btn--ghost, .zv-btn--ink, .zv-btn--danger)) {
+  /* Le sommet du dégradé. RELEVÉ dans Main.html à #2b2bb4, mais DÉRIVÉ de
+   * --accent depuis la 0.19.0 : la déclaration étant portée par le bouton
+   * lui-même, une redéfinition de marque héritée d'un conteneur ne
+   * l'atteignait pas — un cabinet en marque blanche obtenait un dégradé
+   * allant de l'indigo Zevra à SA couleur. Pour la charte par défaut,
+   * l'écart avec la valeur relevée est d'un point de bleu, invisible.
+   * Les états de survol le dérivent ensuite par color-mix. */
+  --zv-btn-haut: var(--accent);
   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
@@ -88,7 +112,7 @@
  * chose.
  * Déclarés AVANT [disabled], qui doit l'emporter à spécificité égale. */
 
-.zv-btn:hover {
+.zv-btn:not(:where(.zv-btn--ghost, .zv-btn--ink, .zv-btn--danger)):hover {
   background: linear-gradient(
     180deg,
     color-mix(in oklab, var(--zv-btn-haut) 86%, var(--ink)) 0%,
@@ -96,7 +120,7 @@
   );
 }
 
-.zv-btn:active {
+.zv-btn:not(:where(.zv-btn--ghost, .zv-btn--ink, .zv-btn--danger)):active {
   background: linear-gradient(
     180deg,
     color-mix(in oklab, var(--zv-btn-haut) 72%, var(--ink)) 0%,
@@ -177,8 +201,8 @@
  * 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) {
+.zv-btn:not(:where(.zv-btn--ghost, .zv-btn--ink, .zv-btn--danger))[disabled]:is(:hover, :active),
+.zv-btn:not(:where(.zv-btn--ghost, .zv-btn--ink, .zv-btn--danger))[aria-busy='true']:is(:hover, :active) {
   background: linear-gradient(180deg, var(--zv-btn-haut) 0%, var(--accent-deep) 100%);
 }
 
@@ -911,6 +935,13 @@
 
 
 @media (max-width: 767px) {
+
+  /* Le `min-width: 260px` de la valeur ne tient pas sous le seuil : dans une
+   * carte de 215px — un écran de 320px — elle débordait de 45px. La CLÉ
+   * était déjà libérée (flex-basis 100%), il manquait la valeur. */
+  .zv-rows__val {
+    min-width: 0;
+  }
   .zv-btn--sm {
     height: 36px;
     padding: 0 14px;
@@ -1029,3 +1060,258 @@
 .zv-lockup--marque-seule .zv-lockup__word {
   display: none;
 }
+
+/* ─── Cadre média ───────────────────────────────────────────────────────
+ * HORS RELEVÉ (27/08/2026, 0.18.0). Aucune des dix planches ne montre
+ * d'image de contenu — elles sont composées, pas photographiées. Le manque
+ * était pourtant total : pas un `aspect-ratio`, pas un `object-fit` dans le
+ * paquet, et quatre réécritures du même cadre chez un seul consommateur.
+ *
+ * ⚠️ 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 — c'est un correctif de production, pas une précaution théorique.
+ *
+ * Le fond est posé et non laissé transparent : une image qui tarde, échoue
+ * ou porte de la transparence laisserait voir la surface du dessous, soit un
+ * trou blanc sur une carte, soit un trou sombre sur une bande. */
+
+.zv-media {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  background: var(--hairline);
+  /* Angle vif comme le reste ; aucune ombre, l'image est dans le flux. */
+  border-radius: 0;
+}
+
+/* Les quatre rapports du système. Un cinquième se demande, il ne s'invente
+ * pas : c'est ainsi qu'une bibliothèque finit avec dix-sept rapports dont
+ * trois servent. */
+.zv-media--16-9 {
+  aspect-ratio: 16 / 9;
+}
+
+.zv-media--4-3 {
+  aspect-ratio: 4 / 3;
+}
+
+.zv-media--1-1 {
+  aspect-ratio: 1 / 1;
+}
+
+.zv-media--3-2 {
+  aspect-ratio: 3 / 2;
+}
+
+/* L'image REMPLIT le cadre : c'est le seul comportement qui le garantisse
+ * plein quelle que soit la source, et une grille dont les couvertures ne
+ * s'alignent pas se voit aussitôt. En absolu, pour que le cadre garde la
+ * main sur sa hauteur. */
+.zv-media__img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Le cas inverse — un logo, un schéma, une pièce qu'on ne peut pas rogner.
+ * Le papier passe derrière : il restera du vide, autant qu'il soit choisi. */
+.zv-media--contient {
+  background: var(--paper);
+}
+
+.zv-media--contient .zv-media__img {
+  object-fit: contain;
+}
+
+/* Le coin d'un cadre : durée d'une vidéo, nombre de pages, mention de
+ * réserve. Encre diluée et non un gris opaque — le fond d'image est
+ * imprévisible, et l'encre de charte s'y pose sans jurer. */
+.zv-media__coin {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 7px;
+  background: color-mix(in srgb, var(--ink) 72%, transparent);
+  color: var(--white);
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 500;
+  letter-spacing: 0.08em;
+}
+
+.zv-media__coin--gauche {
+  right: auto;
+  left: 8px;
+}
+
+.zv-media__coin--haut {
+  bottom: auto;
+  top: 8px;
+}
+
+/* Voile de lecture : un titre posé SUR une image n'est lisible qu'au-dessus
+ * d'un dégradé. Il part du bas, là où le texte se pose, et n'assombrit pas
+ * le sujet. Il ne capte pas le pointeur — le cadre reste cliquable. */
+.zv-media__voile {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(
+    180deg,
+    transparent 40%,
+    color-mix(in srgb, var(--ink) 78%, transparent) 100%
+  );
+}
+
+/* ─── Page légale ───────────────────────────────────────────────────────
+ * HORS RELEVÉ (27/08/2026, voir DECISIONS.md). La forme d'un document
+ * contractuel — CGVU, mentions légales, DPA. Le TEXTE, lui, n'est pas ici :
+ * il vit dans @zevra/legal, versionné et archivé. Ce module ne porte que la
+ * mise en page ; c'est ce qui permet au même texte de s'afficher sur la
+ * vitrine et dans une application sans exister en deux exemplaires.
+ *
+ * Presque tout se compose de pièces existantes : le sommaire est .zv-rail,
+ * les définitions .zv-rows, les tableaux .zv-table, les encarts .zv-callout.
+ * Ne restent ici que la colonne de lecture et ce que les listes de texte
+ * courant n'avaient jamais eu. */
+
+.zv-legal {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  /* La MESURE, et c'est la seule règle qui compte vraiment pour un contrat :
+   * au-delà d'environ 80 signes par ligne, l'œil perd le début de la ligne
+   * suivante — sur un texte qu'on lit déjà à reculons, c'est rédhibitoire. */
+  max-width: 72ch;
+}
+
+.zv-legal__section {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  /* Un lien vers un article précis ne doit pas déposer son titre sous la
+   * barre fixe. Sans cette réserve, cliquer « Art. 7 » dans le sommaire
+   * affiche le corps de l'article et cache son intitulé. */
+  scroll-margin-top: 88px;
+}
+
+/* Les listes du texte courant. Le paquet n'en avait aucune : ses listes
+ * étaient toutes des objets (étapes, sommaires numérotés, rangées à filets),
+ * jamais l'énumération d'une clause. */
+.zv-legal__liste {
+  margin: 0;
+  padding-left: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: var(--body);
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+.zv-legal__liste li::marker {
+  color: var(--accent-line);
+}
+
+/* Le renvoi vers un autre document contractuel, dans le fil d'une clause :
+ * souligné, parce qu'à l'intérieur d'un paragraphe la couleur seule ne
+ * suffit pas à annoncer qu'on change de contrat. */
+.zv-legal a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Le tableau d'un contrat (durées de conservation, sous-traitants). Il n'
+ * emprunte PAS .zv-table de data.css : celui-là est une surface de travail
+ * dont les rangées se survolent et se cliquent, ce qu'un tableau de contrat
+ * ne fait jamais. Filets, chiffres alignés, et rien de plus. */
+.zv-legal__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--app);
+  line-height: 1.55;
+  color: var(--ink-2);
+}
+
+.zv-legal__table th {
+  border-bottom: 1px solid var(--line);
+  padding: 8px 12px 8px 0;
+  text-align: left;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--label);
+}
+
+.zv-legal__table td {
+  border-bottom: 1px solid var(--hairline);
+  padding: 10px 12px 10px 0;
+  vertical-align: top;
+  font-variant-numeric: tabular-nums;
+}
+
+/* L'en-tête : titre, date d'entrée en vigueur, identifiant de version.
+ * ⚠️ La VERSION est affichée, et ce n'est pas décoratif : c'est ce que
+ * l'utilisateur cite quand il conteste, et ce que le support lui demande. */
+.zv-legal__tete {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-bottom: 1px solid var(--line);
+  padding-bottom: 24px;
+}
+
+@media (max-width: 767px) {
+  .zv-legal {
+    gap: 36px;
+  }
+
+  .zv-legal__section {
+    scroll-margin-top: calc(var(--topbar-h) + 12px);
+  }
+}
+
+/* Encart d'accompagnement d'une clause : la reformulation en langage courant
+ * (« En clair ») ou le point à ne pas manquer. Il COMMENTE la clause et ne
+ * la remplace pas — d'où une surface d'accompagnement, et non l'aplat d'une
+ * alerte, qui annoncerait un incident.
+ * Il vit ici et non dans feedback.css : une page légale de vitrine n'a pas à
+ * charger la couche applicative pour afficher une glose. */
+.zv-legal__encart {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-left: 2px solid var(--accent-line);
+  background: var(--panel);
+  padding: 14px 18px;
+}
+
+.zv-legal__encart--important {
+  border-left-color: var(--warn);
+  background: var(--warn-soft);
+}
+
+.zv-legal__encart-label {
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--label);
+}
+
+.zv-legal__encart--important .zv-legal__encart-label {
+  color: var(--warn-ink);
+}