@zevra/ui 0.10.0 → 0.11.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