@zevra/ui 0.10.0 → 0.12.0

package/react/data.tsx

@@ -334,8 +334,8 @@ export function Fold({ titre, ouvert, className, children, ...reste }: FoldProps
           fill="none"
           stroke="currentColor"
           strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          strokeLinecap="square"
+          strokeLinejoin="miter"
           aria-hidden="true"
         >
           <path d="M6.67 9.33 L12 14.67 L17.33 9.33" />

package/react/forms.tsx

@@ -359,7 +359,7 @@ export function Drop({
         fill="none"
         stroke="var(--accent)"
         strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeLinecap="square"
         aria-hidden="true"
       >
         <line x1="15" y1="4" x2="15" y2="18" />

package/react/icon-data.ts

@@ -61,24 +61,24 @@ export type IconId =
 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\" />",
   'activite': "<path d=\"M3.33 12 H8 L10.67 5.33 L14 18.67 L16 12 H20.67\" />",
-  'aide': "<circle cx=\"12\" cy=\"12\" r=\"8.67\" /><path d=\"M9.33 9.33 A2.67 2.67 0 0 1 14.53 10.13 C14.53 11.87 12 12.27 12 14\" /><circle cx=\"12\" cy=\"17.07\" r=\"0.8\" fill=\"currentColor\" stroke=\"none\" />",
+  'aide': "<circle cx=\"12\" cy=\"12\" r=\"8.67\" /><path d=\"M9.33 9.33 A2.67 2.67 0 0 1 14.53 10.13 C14.53 11.87 12 12.27 12 14\" /><rect x=\"11.2\" y=\"16.27\" width=\"1.6\" height=\"1.6\" fill=\"currentColor\" stroke=\"none\" />",
   '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\" rx=\"1.07\" /><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\" /><circle cx=\"12\" cy=\"16.53\" r=\"0.8\" fill=\"currentColor\" stroke=\"none\" />",
+  '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\" />",
   '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\" />",
-  'cadenas': "<rect x=\"4.67\" y=\"10.67\" width=\"14.67\" height=\"9.33\" rx=\"1.6\" /><path d=\"M8 10.67 V7.33 A4 4 0 0 1 16 7.33 V10.67\" /><circle cx=\"12\" cy=\"15.33\" r=\"1.33\" />",
+  'cadenas': "<rect x=\"4.67\" y=\"10.67\" width=\"14.67\" height=\"9.33\" /><path d=\"M8 10.67 V7.33 A4 4 0 0 1 16 7.33 V10.67\" /><circle cx=\"12\" cy=\"15.33\" r=\"1.33\" />",
   'cadrer': "<path d=\"M4 8 V4 H8\" /><path d=\"M20 8 V4 H16\" /><path d=\"M4 16 V20 H8\" /><path d=\"M20 16 V20 H16\" />",
-  'calendrier': "<rect x=\"3.33\" y=\"4.67\" width=\"17.33\" height=\"16\" rx=\"1.33\" /><path d=\"M3.33 9.33 H20.67\" /><path d=\"M8 2.67 V6.67\" /><path d=\"M16 2.67 V6.67\" />",
+  'calendrier': "<rect x=\"3.33\" y=\"4.67\" width=\"17.33\" height=\"16\" /><path d=\"M3.33 9.33 H20.67\" /><path d=\"M8 2.67 V6.67\" /><path d=\"M16 2.67 V6.67\" />",
   'chevron-bas': "<path d=\"M6.67 9.33 L12 14.67 L17.33 9.33\" />",
   '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\" />",
   'coche': "<path d=\"M5 12.4 L9.4 16.8 L19 6.8\" />",
-  'copier': "<rect x=\"4\" y=\"4\" width=\"12\" height=\"12\" rx=\"1.6\" /><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\" />",
+  '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\" />",
-  'courriel': "<rect x=\"2.67\" y=\"5.33\" width=\"18.67\" height=\"13.33\" rx=\"1.33\" /><path d=\"M2.67 7.33 L12 13.33 L21.33 7.33\" />",
+  'courriel': "<rect x=\"2.67\" y=\"5.33\" width=\"18.67\" height=\"13.33\" /><path d=\"M2.67 7.33 L12 13.33 L21.33 7.33\" />",
   'cube': "<path d=\"M3.33 8 L12 4 L20.67 8 V16 L12 20 L3.33 16 Z\" /><path d=\"M3.33 8 L12 12 L20.67 8\" /><path d=\"M12 12 V20\" />",
   'deconnexion': "<path d=\"M14.67 4 H5.33 V20 H14.67\" /><path d=\"M10.67 12 H20\" /><path d=\"M16.67 8 L20.67 12 L16.67 16\" />",
   'depot-fichier': "<path d=\"M12 3.2 V14.4\" /><polyline points=\"7.6,10 12,14.4 16.4,10\" /><path d=\"M4 16.8 v2.4 a1.6 1.6 0 0 0 1.6 1.6 h12.8 a1.6 1.6 0 0 0 1.6-1.6 v-2.4\" />",
@@ -96,8 +96,8 @@ export const CORPS: Record<IconId, string> = {
   '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\" />",
   'horloge': "<circle cx=\"12\" cy=\"12\" r=\"8\" /><path d=\"M12 6.67 V12 L15.33 14\" />",
-  '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\" rx=\"0.8\" />",
-  'info': "<circle cx=\"12\" cy=\"12\" r=\"8.67\" /><path d=\"M12 11.33 V16\" /><circle cx=\"12\" cy=\"8\" r=\"0.8\" fill=\"currentColor\" stroke=\"none\" />",
+  '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\" />",
   '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\" />",
   '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\" />",
@@ -105,14 +105,14 @@ export const CORPS: Record<IconId, string> = {
   '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\" />",
   '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\" rx=\"1.33\" /><rect x=\"3.33\" y=\"13.33\" width=\"17.33\" height=\"5.33\" rx=\"1.33\" /><circle cx=\"6.67\" cy=\"8\" r=\"0.8\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"6.67\" cy=\"16\" r=\"0.8\" fill=\"currentColor\" stroke=\"none\" />",
+  '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\" />",
   '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\" />",
   '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': "<circle cx=\"5.33\" cy=\"12\" r=\"1.33\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"12\" cy=\"12\" r=\"1.33\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"18.67\" cy=\"12\" r=\"1.33\" fill=\"currentColor\" stroke=\"none\" />",
+  '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\" />",
 }
 

package/react/icon.tsx

@@ -5,7 +5,7 @@
 // autoriser côté CSP. L'icône hérite de la couleur du texte : elle fonctionne
 // sur papier comme sur la bande manifeste sans déclinaison.
 
-import type { ButtonHTMLAttributes, ReactNode, SVGAttributes } from 'react'
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode, SVGAttributes } from 'react'
 import { cx } from './cx.js'
 import { CORPS, NOMS, type IconId } from './icon-data.js'
 
@@ -82,3 +82,25 @@ export function IconButton({
     </button>
   )
 }
+
+/* ─── Tuile d'icône ────────────────────────────────────────────────── */
+
+export interface IconTileProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
+  nom: IconId
+  /** Titre accessible. Sans lui la tuile est DÉCORATIVE — le bon défaut :
+   *  elle accompagne un libellé qui la nomme déjà. */
+  titre?: string
+  className?: string
+}
+
+/** La pastille carrée qui porte une icône devant un argument de la vitrine
+ *  (liste de garanties, grille d'atouts). UNE par argument, jamais en décor
+ *  isolé : une tuile sans libellé voisin est un rébus. */
+export function IconTile({ nom, titre, className, ...reste }: IconTileProps) {
+  return (
+    <span className={cx('zv-icon-tile', className)} {...reste}>
+      <Icon nom={nom} titre={titre} />
+    </span>
+  )
+}

package/src/components.css

@@ -146,6 +146,22 @@
   width: 100%;
 }
 
+/* Bouton d'action à icône SEULE : l'envoi d'un composeur, l'action unique
+ * d'une barre. HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Le libellé
+ * accessible est OBLIGATOIRE (aria-label), et s'écrit pour l'ACTION.
+ * Ne pas confondre : .zv-icon-btn est le chrome nu (40 px, sans cadre),
+ * .zv-chrome-btn la croix bordée (26 px) — le carré est une action, il en
+ * a le poids et l'aplat. */
+.zv-btn--carre {
+  width: 48px;
+  padding: 0;
+}
+
+.zv-btn--sm.zv-btn--carre {
+  width: 40px;
+  padding: 0;
+}
+
 .zv-btn[disabled],
 .zv-btn--ghost[disabled],
 .zv-btn--ink[disabled],
@@ -224,7 +240,8 @@
 /* ─── Lien fléché ───────────────────────────────────────────────────────
  * Le SVG fait 15×15 : quatre occurrences dans Main.html contre une seule
  * à 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. */
+ * un viewBox 0 0 24 24 — au trait carré depuis le 25/08/2026, comme tout
+ * le jeu d'icônes (DECISIONS.md, « Le trait carré »). */
 
 /* ⚠️ 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
@@ -281,6 +298,16 @@
   width: 15px;
   height: 15px;
   flex: none;
+  /* ⚠️ CORRIGÉ le 25/08/2026 : le trait n'avait JAMAIS été déclaré — ni
+   * fill:none ni stroke —, la flèche se rendait en triangle PLEIN noir (le
+   * fût, d'aire nulle, disparaissait) au lieu du tracé que le commentaire
+   * d'en-tête promettait depuis le premier jour. Posé au trait carré, avec
+   * le reste du jeu. */
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
   transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
@@ -890,6 +917,12 @@
     font-size: 13px;
   }
 
+  /* Le carré compact suit la hauteur compacte mobile. */
+  .zv-btn--sm.zv-btn--carre {
+    width: 36px;
+    padding: 0;
+  }
+
   .zv-pill {
     height: 26px;
     padding: 0 12px;

package/src/forms.css

@@ -503,11 +503,12 @@
 }
 
 /* Le blanc du glyphe est écrit en clair (%23fff) : une data-URI ne lit pas
- * les variables CSS. Valeur strictement égale à --white. */
+ * les variables CSS. Valeur strictement égale à --white. La coche est au
+ * trait carré depuis le 25/08/2026, comme tout ce qui trace. */
 .zv-check-box:checked {
   border-color: var(--accent);
   background-color: var(--accent);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5,6.5 5,9 9.5,3.5'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='2.5,6.5 5,9 9.5,3.5'/%3E%3C/svg%3E");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 12px 12px;
@@ -816,9 +817,9 @@
  * tabindex="0" (l'anneau de base.css suit alors tout seul).
  *
  * L'icône est un SVG du balisage (import-client.tsx:159-166) : viewBox
- * 0 0 30 30, fill="none", stroke="var(--accent)", stroke-width="1.5",
- * stroke-linecap="round" — et PAS de stroke-linejoin, le tracé n'a qu'un
- * angle franc et la source ne le pose pas :
+ * 0 0 30 30, fill="none", stroke="var(--accent)", stroke-width="1.5" —
+ * relevée en stroke-linecap="round", REPRISE au trait carré le 25/08/2026
+ * comme tout ce qui trace (DECISIONS.md, « Le trait carré ») :
  *   <line x1="15" y1="4" x2="15" y2="18"/>
  *   <polyline points="9.5,12.5 15,18 20.5,12.5"/>
  *   <path d="M5 21 v3 a2 2 0 0 0 2 2 h16 a2 2 0 0 0 2-2 v-3"/> */

package/src/icons.css

@@ -1,10 +1,13 @@
 /* Zevra UI — icônes
  * Dépend de tokens.css. Le jeu lui-même vit dans icons/ (index + sprite).
  *
- * Les icônes sont TRACÉES, jamais pleines : trait à l'épaisseur 2, bouts et
- * jonctions arrondis, sur une grille de 24. Elles héritent de la couleur du
- * texte — c'est ce qui leur permet de fonctionner sur papier comme sur la
- * bande manifeste sans qu'on ait à les décliner.
+ * Les icônes sont TRACÉES, jamais pleines : trait à l'épaisseur 2, sur une
+ * grille de 24, à BOUTS FRANCS et JONCTIONS VIVES — le trait carré de la
+ * charte, arbitré le 25/08/2026 (DECISIONS.md, « Le trait carré ») : les
+ * bouts arrondis étaient le dialecte des bibliothèques génériques, pas le
+ * nôtre. Le réglage vit ici, les 55 tracés le suivent d'un coup. Elles
+ * héritent de la couleur du texte — c'est ce qui leur permet de fonctionner
+ * sur papier comme sur la bande manifeste sans qu'on ait à les décliner.
  *
  * Deux façons de les poser :
  *
@@ -26,8 +29,12 @@
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+  /* `square` garde l'emprise optique du rond (le bout dépasse d'une
+   * demi-épaisseur, comme lui) : la silhouette change sans qu'un seul
+   * tracé soit redessiné. Les angles très aigus retombent d'eux-mêmes en
+   * biseau (miter-limit par défaut) — rien à régler. */
+  stroke-linecap: square;
+  stroke-linejoin: miter;
 }
 
 /* Accolée à du texte dense : métadonnée, puce de source, cellule. */
@@ -79,3 +86,21 @@
 .zv-icon--quiet {
   color: var(--label);
 }
+
+/* ─── Tuile d'icône ─────────────────────────────────────────────────────
+ * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). La pastille carrée qui
+ * porte une icône devant un argument de la vitrine — liste de garanties,
+ * grille d'atouts. Carrée par NATURE, pas par style : c'est une tuile.
+ * Une par argument, jamais en décor isolé ; c'est le libellé voisin qui
+ * nomme, la tuile est décorative par défaut. */
+.zv-icon-tile {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex: none;
+  border: 1px solid var(--accent-line);
+  background: var(--accent-soft);
+  color: var(--accent);
+}

package/src/layout.css

@@ -263,7 +263,9 @@
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
-  stroke-linecap: round;
+  /* Bouts francs — le trait carré du jeu d'icônes (25/08/2026). Le burger
+   * applicatif, relevé « extrémités franches », y était déjà. */
+  stroke-linecap: square;
 }
 
 /* Le tiroir de la vitrine : liens empilés, respiration généreuse. Le panneau

package/src/motion.css

@@ -14,9 +14,24 @@
  *
  * ─── Comment c'est construit ────────────────────────────────────────────
  * L'état AU REPOS de chaque élément est son état FINAL : sans animation, la
- * page est complète et lisible. Les animations d'entrée ne vivent que dans
- * le bloc @supports, si bien qu'un navigateur sans `animation-timeline`
- * affiche simplement le contenu en place plutôt qu'un écran vide.
+ * page est complète et lisible.
+ *
+ * Les ENTRÉES se jouent UNE FOIS (arbitrage du 26/08/2026, DECISIONS.md) :
+ * l'ancien pilotage par `animation-timeline: view()` rejouait chaque entrée
+ * à l'envers dès qu'on remontait — le contenu disparaissait sous le lecteur,
+ * et une grille haute n'était jamais « contenue », donc jamais posée. Le
+ * paquet arme désormais les entrées par `html.zv-motion` (posé par
+ * motion.js, importable en `@zevra/ui/motion.js`), et chaque élément se
+ * révèle quand il entre au viewport, puis N'EN BOUGE PLUS. Sans JavaScript,
+ * rien n'est armé : la page s'affiche complète — même dégradation douce
+ * qu'avant.
+ *
+ * Un échafaudage de scènes (l'expérience épinglée d'une home) peut vouloir
+ * garder le pilotage au défilement : poser `data-zv-motion-skip` sur la
+ * scène — motion.js n'y touche pas — et re-brancher les @keyframes du
+ * paquet sur ses timelines nommées. Seuls la barre de progression
+ * (zv-anim-progress) et le point d'étape (zv-anim-dot-active) restent
+ * scroll-pilotés ici : suivre la lecture est leur raison d'être.
  *
  * Les deux boucles (drift, breathe) animent les propriétés `translate` et
  * `scale` INDÉPENDANTES, jamais `transform` : les éléments concernés — halo
@@ -69,146 +84,210 @@
   animation: zv-breathe 9s ease-in-out infinite;
 }
 
-/* ─── Entrées pilotées par le défilement ────────────────────────────────
- * Hors de ce bloc, aucune de ces classes ne produit d'effet : l'élément
- * reste dans son état final. C'est voulu. */
+/* ─── Entrées : une révélation par visite ───────────────────────────────
+ * Les @keyframes vivent au niveau racine : un échafaudage de scènes peut
+ * les re-brancher sur ses propres timelines nommées (voir l'en-tête). */
 
-@supports (animation-timeline: view()) {
-  /* 3 · Entrée standard de tout contenu texte et panneau.
-   *     Stagger de 120 ms entre les éléments d'un même groupe. */
-  @keyframes zv-rise {
-    from {
-      opacity: 0;
-      transform: translateY(32px);
-    }
+@keyframes zv-rise {
+  from {
+    opacity: 0;
+    transform: translateY(32px);
   }
+}
 
-  .zv-anim-rise {
-    animation: zv-rise var(--zv-easing) both;
-    animation-timeline: view();
-    animation-range: contain 10% contain 45%;
+/* Le même mouvement, DOSÉ pour les blocs des pages intérieures : douze
+ * pixels au lieu de trente-deux — le bloc est posé avant que l'œil ait fini
+ * d'arriver, et une visite répétée ne le remarque plus. */
+@keyframes zv-rise-doux {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
   }
+}
 
-  /* 3 bis · Le même mouvement, DOSÉ pour les blocs des pages intérieures :
-   *     douze pixels au lieu de trente-deux, une plage plus courte — le
-   *     bloc est posé avant que l'œil ait fini d'arriver, et une visite
-   *     répétée ne le remarque plus. Se pose AVEC zv-anim-rise, dont il ne
-   *     change que l'amplitude et la plage. La home garde l'entrée
-   *     pleine : c'est elle la signature, le doux est le quotidien. */
-  @keyframes zv-rise-doux {
-    from {
-      opacity: 0;
-      transform: translateY(12px);
-    }
+@keyframes zv-glyph-in {
+  from {
+    opacity: 0;
+    transform: translateY(40px) scale(0.7);
   }
+}
 
-  .zv-anim-rise--doux {
-    animation-name: zv-rise-doux;
-    animation-range: contain 5% contain 30%;
+/* La signature de la page d'accueil : les glyphes convergent vers le Z
+ * depuis les quatre coins — la seule entrée latérale du système, latérale
+ * parce qu'elle converge, pas parce qu'elle glisse. */
+@keyframes zv-converge-tl {
+  from {
+    opacity: 0;
+    transform: translate(-420px, -420px) scale(1.5);
   }
+}
 
-  /* 4 · Entrée des glyphes produit dans leur scène : montée et grossissement. */
-  @keyframes zv-glyph-in {
-    from {
-      opacity: 0;
-      transform: translateY(40px) scale(0.7);
-    }
+@keyframes zv-converge-tr {
+  from {
+    opacity: 0;
+    transform: translate(420px, -420px) scale(1.5);
   }
+}
 
-  .zv-anim-glyph-in {
-    animation: zv-glyph-in var(--zv-easing) both;
-    animation-timeline: view();
-    animation-range: contain 0% contain 45%;
+@keyframes zv-converge-bl {
+  from {
+    opacity: 0;
+    transform: translate(-420px, 420px) scale(1.5);
   }
+}
 
-  /* 5 · La signature de la page d'accueil : les glyphes convergent vers le
-   *     Z depuis les quatre coins. La direction se choisit par modificateur —
-   *     c'est la seule entrée latérale du système, et elle est latérale
-   *     parce qu'elle converge, pas parce qu'elle glisse. */
-  @keyframes zv-converge-tl {
-    from {
-      opacity: 0;
-      transform: translate(-420px, -420px) scale(1.5);
-    }
+@keyframes zv-converge-br {
+  from {
+    opacity: 0;
+    transform: translate(420px, 420px) scale(1.5);
   }
+}
 
-  @keyframes zv-converge-tr {
-    from {
-      opacity: 0;
-      transform: translate(420px, -420px) scale(1.5);
-    }
+@keyframes zv-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
   }
+}
 
-  @keyframes zv-converge-bl {
-    from {
-      opacity: 0;
-      transform: translate(-420px, 420px) scale(1.5);
-    }
+/* Le filet de spectre se dessine : on anime bien la largeur, et non une
+ * mise à l'échelle — le dégradé doit se révéler, pas s'étirer. */
+@keyframes zv-filet {
+  from {
+    width: 0;
   }
+}
 
-  @keyframes zv-converge-br {
-    from {
-      opacity: 0;
-      transform: translate(420px, 420px) scale(1.5);
-    }
+/* ─── Le contrat au repos : des définitions inertes ─────────────────────
+ * Chaque classe d'entrée possède ici sa définition PROPRE, volontairement
+ * inerte tant que rien n'est armé : sans motion.js, aucune animation n'est
+ * attachée et ces propriétés n'ont pas d'effet — la page s'affiche
+ * complète. C'est aussi le point d'ancrage du dosage : le décalage d'un
+ * groupe se règle en posant --zv-delay par élément (120 ms). */
+
+.zv-anim-rise {
+  animation-delay: var(--zv-delay);
+}
+
+.zv-anim-rise--doux {
+  animation-duration: 0.45s;
+}
+
+.zv-anim-glyph-in {
+  animation-delay: var(--zv-delay);
+}
+
+.zv-anim-converge {
+  animation-delay: var(--zv-delay);
+}
+
+.zv-anim-converge--tr {
+  animation-name: zv-converge-tr;
+}
+
+.zv-anim-converge--bl {
+  animation-name: zv-converge-bl;
+}
+
+.zv-anim-converge--br {
+  animation-name: zv-converge-br;
+}
+
+.zv-anim-pop {
+  animation-delay: var(--zv-delay);
+}
+
+/* Les six vagues : 70 ms d'écart — un délai en secondes retrouve son sens
+ * maintenant que l'entrée est temporelle. */
+.zv-anim-pop--2 { animation-delay: calc(var(--zv-delay) + 0.07s); }
+.zv-anim-pop--3 { animation-delay: calc(var(--zv-delay) + 0.14s); }
+.zv-anim-pop--4 { animation-delay: calc(var(--zv-delay) + 0.21s); }
+.zv-anim-pop--5 { animation-delay: calc(var(--zv-delay) + 0.28s); }
+.zv-anim-pop--6 { animation-delay: calc(var(--zv-delay) + 0.35s); }
+
+.zv-anim-filet {
+  animation-delay: var(--zv-delay);
+}
+
+/* ─── L'armement, puis la libération ────────────────────────────────────
+ * `:where(html.zv-motion)` garde la spécificité d'une classe simple : les
+ * définitions inertes ci-dessus (délais, noms, durées) restent lisibles à
+ * travers l'armement, et `.zv-in` — plus bas dans le fichier — gagne à la
+ * cascade sans surenchère. Armé, l'élément attend en PAUSE sur la première
+ * image de son animation (fill both) ; libéré, elle se joue une fois et
+ * s'arrête sur l'état final. Le défilement n'y reviendra jamais. */
+
+@media (prefers-reduced-motion: no-preference) {
+  /* 3 · Entrée standard de tout contenu texte et panneau. */
+  :where(html.zv-motion) .zv-anim-rise {
+    animation: zv-rise 0.6s var(--zv-easing) both paused;
+    animation-delay: var(--zv-delay);
   }
 
-  .zv-anim-converge {
-    animation: zv-converge-tl var(--zv-easing) both;
-    animation-timeline: view();
-    animation-range: contain 0% contain 55%;
+  /* 3 bis · Le dosage des pages intérieures : se pose AVEC zv-anim-rise,
+   *     dont il ne change que l'amplitude et la durée. La home garde
+   *     l'entrée pleine : c'est elle la signature, le doux est le
+   *     quotidien. */
+  :where(html.zv-motion) .zv-anim-rise--doux {
+    animation-name: zv-rise-doux;
+    animation-duration: 0.45s;
   }
 
-  .zv-anim-converge--tr {
+  /* 4 · Entrée des glyphes produit : montée et grossissement. */
+  :where(html.zv-motion) .zv-anim-glyph-in {
+    animation: zv-glyph-in 0.6s var(--zv-easing) both paused;
+    animation-delay: var(--zv-delay);
+  }
+
+  /* 5 · La convergence. Direction par modificateur. */
+  :where(html.zv-motion) .zv-anim-converge {
+    animation: zv-converge-tl 0.7s var(--zv-easing) both paused;
+    animation-delay: var(--zv-delay);
+  }
+
+  :where(html.zv-motion) .zv-anim-converge--tr {
     animation-name: zv-converge-tr;
   }
 
-  .zv-anim-converge--bl {
+  :where(html.zv-motion) .zv-anim-converge--bl {
     animation-name: zv-converge-bl;
   }
 
-  .zv-anim-converge--br {
+  :where(html.zv-motion) .zv-anim-converge--br {
     animation-name: zv-converge-br;
   }
 
-  /* 6 · Badges, jetons d'entités, éléments de preuve.
-   *     En cascade : six vagues espacées de 6 % de défilement. */
-  @keyframes zv-pop {
-    from {
-      opacity: 0;
-      transform: scale(0.6);
-    }
+  /* 6 · Badges, jetons d'entités, éléments de preuve — en cascade. */
+  :where(html.zv-motion) .zv-anim-pop {
+    animation: zv-pop 0.4s var(--zv-easing) both paused;
+    animation-delay: var(--zv-delay);
   }
 
-  .zv-anim-pop {
-    animation: zv-pop var(--zv-easing) both;
-    animation-timeline: view();
-    animation-range: contain 30% contain 70%;
-  }
+  :where(html.zv-motion) .zv-anim-pop--2 { animation-delay: calc(var(--zv-delay) + 0.07s); }
+  :where(html.zv-motion) .zv-anim-pop--3 { animation-delay: calc(var(--zv-delay) + 0.14s); }
+  :where(html.zv-motion) .zv-anim-pop--4 { animation-delay: calc(var(--zv-delay) + 0.21s); }
+  :where(html.zv-motion) .zv-anim-pop--5 { animation-delay: calc(var(--zv-delay) + 0.28s); }
+  :where(html.zv-motion) .zv-anim-pop--6 { animation-delay: calc(var(--zv-delay) + 0.35s); }
 
-  /* Les six vagues. Décaler la plage, et non le délai : un délai en secondes
-   * n'a aucun sens sur une timeline de défilement. */
-  .zv-anim-pop--2 { animation-range: contain 36% contain 76%; }
-  .zv-anim-pop--3 { animation-range: contain 42% contain 82%; }
-  .zv-anim-pop--4 { animation-range: contain 48% contain 88%; }
-  .zv-anim-pop--5 { animation-range: contain 54% contain 94%; }
-  .zv-anim-pop--6 { animation-range: contain 60% contain 100%; }
-
-  /* 7 · Le filet de spectre se dessine à l'entrée de chaque en-tête de
-   *     section. On anime bien la largeur, et non une mise à l'échelle :
-   *     le dégradé doit se révéler, pas s'étirer. */
-  @keyframes zv-filet {
-    from {
-      width: 0;
-    }
+  /* 7 · Le filet de spectre, à l'entrée de chaque en-tête de section. */
+  :where(html.zv-motion) .zv-anim-filet {
+    animation: zv-filet 0.5s var(--zv-easing) both paused;
+    animation-delay: var(--zv-delay);
   }
+}
 
-  .zv-anim-filet {
-    animation: zv-filet var(--zv-easing) both;
-    animation-timeline: view();
-    animation-range: contain 5% contain 25%;
-  }
+/* La libération, commune : posée par motion.js à l'entrée au viewport, une
+ * seule fois. Sa place APRÈS l'armement fait tout : à spécificité égale,
+ * c'est elle qui a le dernier mot. */
+.zv-in {
+  animation-play-state: running;
+}
 
+/* ─── Les deux lectures du défilement, conservées ───────────────────────
+ * Suivre la position de lecture est leur raison d'être : elles doivent
+ * avancer ET reculer avec le lecteur. */
+
+@supports (animation-timeline: view()) {
   /* 8 · Le point d'étape s'allume à l'entrée de sa scène et s'éteint à la
    *     sortie. Un seul actif à la fois. */
   @keyframes zv-dot-active {