@zevra/ui 0.6.0 → 0.7.0

package/react/index.ts

@@ -38,5 +38,6 @@ export * from './icon.js'
 export * from './layout.js'
 export * from './navigation.js'
 export * from './overlays.js'
+export * from './select-menu.js'
 export * from './surfaces.js'
 export * from './typography.js'

package/react/select-menu.tsx

@@ -0,0 +1,250 @@
+'use client'
+
+// Sélection DESSINÉE — le déclencheur a l'apparence d'un champ, et la liste
+// est peinte par le paquet.
+//
+// ⚠️ POURQUOI CE COMPOSANT EXISTE, ALORS QUE `Select` (natif) EST LÀ.
+// Un <select> natif ne peut pas être habillé : sa liste déroulée est peinte
+// par le SYSTÈME, pas par la page. Sur un macOS en mode sombre elle sort en
+// menu noir au milieu d'une interface claire — aucun CSS ne corrige cela.
+//
+// ⚠️ CE QUE ÇA COÛTE, ET QUI EST PAYÉ ICI. En remplaçant le contrôle natif,
+// on perd le clavier, l'annonce au lecteur d'écran et la liste système. Tout
+// est réimplémenté dans ce fichier : rôles ARIA de combobox/listbox,
+// navigation aux flèches, Origine/Fin, Échap, recherche au clavier, fermeture
+// au clic extérieur et restitution du focus. C'est la raison pour laquelle il
+// n'existe PAS de version « CSS seule » de ce composant : les classes posées
+// à la main sans ce travail livrent un select inutilisable au clavier.
+//
+// Quand préférer `Select` (natif) : un formulaire long sur mobile, où la
+// liste système est plus rapide à manipuler que n'importe quelle liste
+// maison, et où le clavier logiciel s'adapte tout seul.
+
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import { cx } from './cx.js'
+
+export interface OptionSelect<T extends string = string> {
+  valeur: T
+  label: ReactNode
+  /** Texte employé pour la recherche au clavier et l'affichage du
+   *  déclencheur quand `label` n'est pas une chaîne. */
+  texte?: string
+  desactive?: boolean
+}
+
+export interface SelectMenuProps<T extends string = string> {
+  options: readonly OptionSelect<T>[]
+  valeur: T | null
+  onChange: (valeur: T) => void
+  /** Affiché quand rien n'est choisi. */
+  placeholder?: string
+  /** Identifiant du déclencheur — à faire correspondre au `htmlFor` du champ. */
+  id?: string
+  /** Nom du contrôle, quand aucun intitulé visible ne le désigne. */
+  label?: string
+  desactive?: boolean
+  erreur?: boolean
+  className?: string
+}
+
+function texteDe(o: OptionSelect | undefined): string {
+  if (!o) return ''
+  return o.texte ?? (typeof o.label === 'string' ? o.label : String(o.valeur))
+}
+
+export function SelectMenu<T extends string = string>({
+  options,
+  valeur,
+  onChange,
+  placeholder = 'Choisir…',
+  id,
+  label,
+  desactive,
+  erreur,
+  className,
+}: SelectMenuProps<T>) {
+  const auto = useId()
+  const idListe = `${id ?? auto}-liste`
+  const [ouvert, setOuvert] = useState(false)
+  // L'option SURVOLÉE au clavier, distincte de l'option CHOISIE : c'est elle
+  // que `aria-activedescendant` désigne, et elle ne devient un choix qu'à
+  // Entrée. Les confondre ferait valider au premier coup de flèche.
+  const [actif, setActif] = useState(0)
+  const ancre = useRef<HTMLDivElement>(null)
+  const declencheur = useRef<HTMLButtonElement>(null)
+  const liste = useRef<HTMLDivElement>(null)
+  // La saisie au clavier (« ré » → Rédacteur) s'accumule et retombe après
+  // une seconde : c'est le comportement d'un <select> natif, et le perdre
+  // se remarque tout de suite sur une liste longue.
+  const frappe = useRef<{ texte: string; quand: number }>({ texte: '', quand: 0 })
+
+  const indexChoisi = options.findIndex((o) => o.valeur === valeur)
+  const choisi = indexChoisi >= 0 ? options[indexChoisi] : undefined
+
+  const ouvrir = useCallback(() => {
+    if (desactive) return
+    // On s'ouvre SUR l'option courante, pas sur la première : dans une liste
+    // de vingt entrées, repartir du haut oblige à retrouver sa place.
+    setActif(indexChoisi >= 0 ? indexChoisi : 0)
+    setOuvert(true)
+  }, [desactive, indexChoisi])
+
+  const fermer = useCallback((rendreLeFocus = true) => {
+    setOuvert(false)
+    if (rendreLeFocus) declencheur.current?.focus()
+  }, [])
+
+  const choisir = useCallback(
+    (i: number) => {
+      const o = options[i]
+      if (!o || o.desactive) return
+      onChange(o.valeur)
+      fermer()
+    },
+    [options, onChange, fermer],
+  )
+
+  // Clic extérieur. `pointerdown` et non `click` : un clic qui commence
+  // dehors et finit dedans ne doit pas rouvrir ce qu'il vient de fermer.
+  useEffect(() => {
+    if (!ouvert) return
+    const doc = ancre.current?.ownerDocument ?? document
+    function dehors(e: PointerEvent) {
+      if (!ancre.current?.contains(e.target as Node)) setOuvert(false)
+    }
+    doc.addEventListener('pointerdown', dehors)
+    return () => doc.removeEventListener('pointerdown', dehors)
+  }, [ouvert])
+
+  // L'option active reste visible quand on parcourt une liste plus haute que
+  // son cadre.
+  useEffect(() => {
+    if (!ouvert) return
+    const el = liste.current?.children[actif] as HTMLElement | undefined
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [ouvert, actif])
+
+  function suivant(depuis: number, pas: number): number {
+    const n = options.length
+    for (let k = 1; k <= n; k++) {
+      const i = (depuis + pas * k + n * n) % n
+      if (!options[i]?.desactive) return i
+    }
+    return depuis
+  }
+
+  function onKeyDown(e: React.KeyboardEvent) {
+    if (desactive) return
+    if (!ouvert) {
+      if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+        e.preventDefault()
+        ouvrir()
+      }
+      return
+    }
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault()
+        e.stopPropagation()
+        fermer()
+        return
+      case 'Enter':
+      case ' ':
+        e.preventDefault()
+        choisir(actif)
+        return
+      case 'ArrowDown':
+        e.preventDefault()
+        setActif((i) => suivant(i, 1))
+        return
+      case 'ArrowUp':
+        e.preventDefault()
+        setActif((i) => suivant(i, -1))
+        return
+      case 'Home':
+        e.preventDefault()
+        setActif(suivant(-1, 1))
+        return
+      case 'End':
+        e.preventDefault()
+        setActif(suivant(options.length, -1))
+        return
+      case 'Tab':
+        // Tab valide et sort : c'est ce que fait un select natif, et sortir
+        // sans rien retenir surprend.
+        choisir(actif)
+        return
+      default:
+        break
+    }
+    if (e.key.length === 1) {
+      const maintenant = Date.now()
+      const texte =
+        (maintenant - frappe.current.quand < 1000 ? frappe.current.texte : '') +
+        e.key.toLowerCase()
+      frappe.current = { texte, quand: maintenant }
+      const i = options.findIndex(
+        (o) => !o.desactive && texteDe(o).toLowerCase().startsWith(texte),
+      )
+      if (i >= 0) setActif(i)
+    }
+  }
+
+  return (
+    <div
+      ref={ancre}
+      className={cx('zv-select-anchor', 'zv-select-anchor--block', className)}
+    >
+      <button
+        ref={declencheur}
+        id={id}
+        type="button"
+        role="combobox"
+        aria-expanded={ouvert}
+        aria-controls={idListe}
+        aria-haspopup="listbox"
+        aria-label={label}
+        aria-invalid={erreur || undefined}
+        aria-activedescendant={ouvert ? `${idListe}-${actif}` : undefined}
+        disabled={desactive}
+        data-vide={choisi ? undefined : 'oui'}
+        className="zv-input zv-input--trigger"
+        onClick={() => (ouvert ? fermer() : ouvrir())}
+        onKeyDown={onKeyDown}
+      >
+        <span className="zv-trunc">{choisi ? choisi.label : placeholder}</span>
+        <span className="zv-select__chevron" aria-hidden="true">
+          ▾
+        </span>
+      </button>
+
+      {ouvert && (
+        <div ref={liste} id={idListe} role="listbox" className="zv-menu">
+          {options.map((o, i) => (
+            <button
+              key={o.valeur}
+              id={`${idListe}-${i}`}
+              type="button"
+              role="option"
+              aria-selected={o.valeur === valeur}
+              aria-disabled={o.desactive || undefined}
+              // ⚠️ tabIndex -1 : le focus ne quitte JAMAIS le déclencheur.
+              // C'est ce qui permet à aria-activedescendant de porter
+              // l'annonce, et à la frappe de continuer d'arriver au clavier.
+              tabIndex={-1}
+              className={cx(
+                'zv-menu__item',
+                i === actif && !o.desactive && 'zv-menu__item--survol',
+              )}
+              onPointerEnter={() => !o.desactive && setActif(i)}
+              onClick={() => choisir(i)}
+            >
+              {o.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/base.css

@@ -273,7 +273,9 @@ a:not([class]):hover {
   width: var(--spec-filet);
   height: 2px;
   background: var(--spectre);
-  border-radius: 1px;
+  /* Angle vif comme tout le reste depuis le 25/08 — sur 2px de haut, le
+   * rayon d'1px du relevé ne se voyait de toute façon pas. */
+  border-radius: 0;
 }
 
 /* Bas de page : filet raccourci. */

package/src/components.css

@@ -94,7 +94,23 @@
  * à 16px dans DesignSystem.html. Tracés : M5 12h14 et M13 6l6 6-6 6, sur
  * un viewBox 0 0 24 24, stroke currentColor, épaisseur 2, bouts arrondis. */
 
+/* ⚠️ REPRIS le 25/08/2026 — la DA le jugeait « pas ouf ». Le diagnostic :
+ * c'était un lien bleu avec un chevron collé, sans rien qui le distingue
+ * d'un lien de texte, et sans aucune récompense au survol. Le mouvement du
+ * paquet est réservé à la vitrine et piloté au défilement ; il n'y avait
+ * donc PAS de vocabulaire pour un lien d'action.
+ *
+ * Trois ajouts, tous dessinés dans les tokens existants :
+ *   · un FILET qui se déploie sous le libellé au survol, de gauche à droite
+ *     (scaleX sur une origine gauche) — pas un `text-decoration`, qui ne
+ *     s'anime pas et coupe les jambages ;
+ *   · la flèche avance de 4px, ce qui donne au lien sa direction ;
+ *   · le libellé passe en --accent-deep.
+ * Le tout est repeint en une seule transition, donc coupé net par
+ * prefers-reduced-motion (base.css) — l'état final reste lisible sans. */
+
 .zv-link-arrow {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -102,22 +118,56 @@
   font-weight: 600;
   color: var(--accent);
   text-decoration: none;
+  transition: color 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+/* Le filet est un pseudo-élément et non une bordure : une bordure
+ * occuperait de la place et ferait sauter la ligne de base au survol. */
+.zv-link-arrow::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: -3px;
+  height: 1px;
+  background: currentColor;
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
-.zv-link-arrow:hover {
+.zv-link-arrow:hover,
+.zv-link-arrow:focus-visible {
   color: var(--accent-deep);
 }
 
+.zv-link-arrow:hover::after,
+.zv-link-arrow:focus-visible::after {
+  transform: scaleX(1);
+}
+
 .zv-link-arrow svg {
   width: 15px;
   height: 15px;
   flex: none;
+  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-link-arrow:hover svg,
+.zv-link-arrow:focus-visible svg {
+  transform: translateX(4px);
 }
 
+/* Sur la bande manifeste : le filet suit `currentColor`, il n'y a donc rien
+ * à redéclarer — c'est tout l'intérêt de l'avoir posé en currentColor. */
 .zv-link-arrow--on-dark {
   color: var(--white);
 }
 
+.zv-link-arrow--on-dark:hover,
+.zv-link-arrow--on-dark:focus-visible {
+  color: var(--accent-on-dark);
+}
+
 /* ─── Badges et puces ───────────────────────────────────────────────────*/
 
 /* Pastille pleine : numéro de pièce, catégorie de section. */
@@ -148,7 +198,8 @@
   color: var(--accent-deep);
   background: var(--white);
   border: 1px solid var(--accent-line);
-  border-radius: 4px;
+  /* La puce de source est une pastille : elle suit le token, désormais à 0. */
+  border-radius: var(--r-pill);
   padding: 6px 10px;
 }
 
@@ -515,7 +566,7 @@
 .zv-progress {
   height: 3px;
   background: var(--hairline);
-  border-radius: 2px;
+  border-radius: 0;
   overflow: hidden;
 }
 

package/src/forms.css

@@ -183,6 +183,15 @@
   border: 1px solid var(--line);
   background: var(--white);
   padding-inline: 13px;
+  /* La prise de focus s'ANIME (25/08) : sans transition, le cadre sautait
+   * d'un état à l'autre et le retour se lisait comme un défaut de rendu. */
+  transition:
+    border-color 140ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    box-shadow 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-search:hover {
+  border-color: var(--accent-line);
 }
 
 /* DÉRIVÉ : la bordure de focus relevée sur .zv-input, portée par le cadre.
@@ -196,16 +205,42 @@
  *   · supprimer ce filet priverait la souris de tout retour, alors que le
  *     relevé lui en donne un sur les champs bordés.
  * La redondance coûte moins cher que l'une ou l'autre perte. */
+/* ⚠️ REPRIS le 25/08/2026 — la DA jugeait la prise de focus « boff ». Elle
+ * l'était : le cadre passait à --accent-line, un filet si pâle qu'à côté de
+ * l'anneau du champ intérieur il ne se voyait pas. Trois corrections :
+ *   · le filet passe à --accent PLEIN, pas à sa version diluée ;
+ *   · un halo --accent-soft de 3px double le trait — c'est lui qui rend le
+ *     retour visible du coin de l'œil, sans déplacer un pixel de la mise en
+ *     page (box-shadow ne prend pas de place) ;
+ *   · la loupe s'allume avec le cadre : elle cesse d'être une invite grise
+ *     pour devenir la marque du champ actif.
+ *
+ * L'anneau :focus-visible du champ INTÉRIEUR est neutralisé ici, et
+ * seulement ici : le cadre le remplace, et il le remplace pour la souris
+ * comme pour le clavier. C'est ce qui lève la double marque assumée jusque-là
+ * — un seul objet à l'écran, un seul retour. Le champ nu reste parfaitement
+ * repérable au clavier, puisque c'est le cadre entier qui s'allume. */
 .zv-search:focus-within {
-  border-color: var(--accent-line);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.zv-search:focus-within .zv-search__icon {
+  stroke: var(--accent);
+}
+
+.zv-search__input:focus-visible {
+  outline: none;
 }
 
 .zv-search__icon {
   flex: none;
   width: 13px;
   height: 13px;
-  /* Même gris que le placeholder : la loupe est une invite, pas une donnée. */
+  /* Même gris que le placeholder : la loupe est une invite, pas une donnée.
+   * Elle s'allume avec le cadre — voir :focus-within plus bas. */
   stroke: var(--label);
+  transition: stroke 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
 .zv-search__input {
@@ -279,6 +314,63 @@
   max-width: 100%;
 }
 
+/* Ancre pleine largeur : le cas d'un CHAMP de formulaire, où la liste doit
+ * tomber exactement sous le contrôle et faire la même largeur que lui. La
+ * variante en ligne ci-dessus reste celle des filtres, où le déclencheur se
+ * dimensionne sur son libellé. */
+.zv-select-anchor--block {
+  display: block;
+  width: 100%;
+}
+
+.zv-select-anchor--block .zv-menu {
+  width: 100%;
+  min-width: 0;
+}
+
+/* ─── Déclencheur de sélection DESSINÉE ─────────────────────────────────
+ * ⚠️ AJOUTÉ le 25/08/2026 : « le select, faut le designer jusque dans
+ * l'affichage de la liste » (DA, sur pièces).
+ *
+ * Le <select> natif (.zv-input--select) reste dans le paquet et garde son
+ * usage — mais il ne peut PAS être habillé : la liste déroulée est peinte
+ * par le système, pas par la page. Sur un macOS en mode sombre, elle sort
+ * en menu noir au milieu d'une interface claire. Aucun CSS ne corrige cela,
+ * c'est une limite du contrôle.
+ *
+ * D'où ce déclencheur, qui a l'apparence exacte d'un champ et ouvre le
+ * .zv-menu du paquet. Ce qu'il COÛTE, et qu'il faut assumer en le
+ * choisissant : le clavier, l'annonce et la liste native sont à réimplémenter
+ * — c'est fait dans le composant React (SelectMenu), pas dans ce fichier.
+ * Un gabarit qui pose ces classes à la main sans ce travail livre un select
+ * inutilisable au clavier. Dans ce cas, prendre le natif. */
+.zv-input--trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  text-align: left;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: border-color 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-input--trigger:hover {
+  border-color: var(--accent-line);
+}
+
+/* Ouvert, le déclencheur reste marqué : sans cela, la liste flotte au-dessus
+ * d'un champ qui a l'air au repos, et on ne sait plus lequel elle sert. */
+.zv-input--trigger[aria-expanded='true'] {
+  border-color: var(--accent);
+}
+
+/* Le placeholder d'un déclencheur est du texte, pas un ::placeholder : il
+ * lui faut donc sa propre teinte, celle du champ vide. */
+.zv-input--trigger[data-vide='oui'] {
+  color: var(--label);
+}
+
 .zv-select {
   display: inline-flex;
   align-items: center;
@@ -384,37 +476,70 @@
  * elle est portée par l'aplat plein et par le libellé accolé, pas par cette
  * nuance-là. */
 
+/* ⚠️ REDESSINÉ le 25/08/2026 — la DA a tranché « switch horrible » sur
+ * pièces, et elle avait raison sur trois points :
+ *   · 28×16 avec un bouton rond de 12, c'est un jouet posé au milieu de
+ *     contrôles carrés de 16px de haut ; la ligne de réglage n'avait aucune
+ *     unité ;
+ *   · la piste éteinte était --accent-line, un indigo très pâle : éteint et
+ *     allumé se distinguaient par la SATURATION d'une même teinte, ce qui
+ *     tombe au premier écran mal calibré et disparaît en daltonisme ;
+ *   · le bouton rond contredisait l'arbitrage « carré » du même jour.
+ * La piste passe donc à 36×20, à angle vif, avec un filet qui la pose comme
+ * les champs voisins ; éteint elle est BLANCHE au filet gris, allumée elle
+ * est un aplat indigo plein. L'écart n'est plus une nuance, c'est un
+ * contraste. */
 .zv-switch {
   position: relative;
   display: inline-block;
-  width: 28px;
-  height: 16px;
+  width: 36px;
+  height: 20px;
   flex: none;
-  background: var(--accent-line);
+  border: 1px solid var(--line);
+  background: var(--white);
   /* La courbe est celle du paquet (motion.css, `--zv-easing`), recopiée en
    * clair : forms.css ne dépend pas de motion.css et n'a pas à en dépendre
    * pour une transition de couleur. Ce n'est PAS `ease` — le défaut d'un
    * framework tiers n'a rien à faire dans le système. */
-  transition: background-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
+  transition:
+    background-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    border-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-switch-hit:hover .zv-switch {
+  border-color: var(--accent-line);
 }
 
 .zv-switch--on {
+  border-color: var(--accent);
   background: var(--accent);
 }
 
+.zv-switch-hit:hover .zv-switch--on {
+  border-color: var(--accent-deep);
+  background: var(--accent-deep);
+}
+
+/* Bouton CARRÉ : le rond ici n'est pas une forme porteuse de sens (ce que
+ * sont la pastille d'état ou le radio), c'était un style — il tombe avec les
+ * autres rayons. Éteint il est gris comme un contrôle inactif, allumé il
+ * passe en blanc sur l'aplat indigo. */
 .zv-switch__knob {
   position: absolute;
   inset-block-start: 2px;
   inset-inline-start: 2px;
-  width: 12px;
-  height: 12px;
-  border-radius: 9999px;
-  background: var(--white);
-  transition: inset-inline-start 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
+  width: 14px;
+  height: 14px;
+  border-radius: 0;
+  background: var(--label);
+  transition:
+    inset-inline-start 150ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    background-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
 .zv-switch--on .zv-switch__knob {
-  inset-inline-start: 14px;
+  inset-inline-start: 18px;
+  background: var(--white);
 }
 
 /* Cible tactile portée par une enveloppe : agrandir la piste elle-même

package/src/navigation.css

@@ -429,6 +429,15 @@
   background: var(--hairline);
 }
 
+/* ⚠️ Option SURVOLÉE AU CLAVIER — ajoutée le 25/08/2026 avec la sélection
+ * dessinée. Ce n'est ni :hover (la souris n'est pas dessus) ni :focus (le
+ * focus reste sur le déclencheur, c'est aria-activedescendant qui porte
+ * l'annonce). Sans cette classe, parcourir la liste aux flèches ne se voit
+ * pas : le lecteur d'écran suit, l'œil non. */
+.zv-menu__item--survol {
+  background: var(--hairline);
+}
+
 .zv-menu__item:focus-visible {
   outline-offset: -2px;
 }

package/src/tokens.css

@@ -74,11 +74,27 @@
   --lead: 18px;
   --body: 15px;
 
-  /* Rayons */
-  --r-btn: 5px;
-  --r-pill: 3px;
-  --r-panel: 10px;
-  --r-card: 16px;
+  /* Rayons — ARBITRÉS À ZÉRO le 25/08/2026.
+   *
+   * La DA a tranché sur pièces : « très carré, ça fait pro et inspire
+   * confiance » ; le rond disait « flexible, jovial », qui n'est pas ce que
+   * vend Zevra. Le relevé donnait 5/3/10/16px, hérités d'un état antérieur
+   * de la charte — et déjà contredits sur place, puisque les champs de
+   * saisie, les étiquettes et les pastilles d'initiales étaient à angle vif
+   * depuis le premier jour. Les quatre tokens s'alignent sur eux.
+   *
+   * ⚠️ Les tokens RESTENT, à zéro : ils nomment quatre intentions
+   * distinctes (action, pastille, panneau flottant, carte). Le jour où la DA
+   * veut rendre de la rondeur à l'une d'elles, c'est une ligne ici — pas une
+   * chasse aux `border-radius` dans douze fichiers.
+   *
+   * ⚠️ Ce qui n'est PAS concerné : le rond de forme, qui porte du sens et
+   * non du style — pastille d'état, bouton d'interrupteur, radio, halo. Ils
+   * écrivent leur `border-radius` en clair, sans passer par un token. */
+  --r-btn: 0;
+  --r-pill: 0;
+  --r-panel: 0;
+  --r-card: 0;
 
   /* Ombres */
   --shadow-card: 0 2px 10px rgba(11, 16, 32, 0.05);

package/tokens/index.js

@@ -99,11 +99,17 @@ export const mesures = {
   specFilet: '56px',
 }
 
+/** Rayons — À ZÉRO depuis l'arbitrage DA du 25/08/2026 (« très carré, ça
+ *  fait pro et inspire confiance »). Les quatre clés restent : elles nomment
+ *  quatre intentions distinctes, et rendre de la rondeur à l'une d'elles
+ *  doit rester une ligne à changer, pas une chasse dans douze fichiers.
+ *  Le rond de FORME — pastille d'état, bouton d'interrupteur, radio, halo —
+ *  ne passe pas par ici : il porte du sens, pas du style. */
 export const rayons = {
-  btn: '5px',
-  pill: '3px',
-  panel: '10px',
-  card: '16px',
+  btn: '0',
+  pill: '0',
+  panel: '0',
+  card: '0',
 }
 
 export const ombres = {