@zevra/ui 0.49.0 → 0.50.1

package/react/forms.tsx

@@ -200,7 +200,7 @@ export function SelectTrigger({
       {label}
       {value != null && <strong>{value}</strong>}
       <span className="zv-select__chevron" aria-hidden="true">
-        ▾
+        <Icon nom="chevron-bas" taille="sm" />
       </span>
     </button>
   )

package/react/icon-data.ts

@@ -4,152 +4,238 @@
 export type IconId =
   | 'accueil'
   | 'activite'
+  | 'actualiser'
   | 'aide'
+  | 'annuler'
   | 'app-couches'
   | 'applications'
   | 'archiver'
   | 'attention'
   | 'avancer'
   | 'balance'
+  | 'barres'
   | 'base-de-donnees'
+  | 'batiment'
+  | 'billet'
   | 'bouclier-verifie'
   | 'cadenas'
+  | 'cadenas-ouvert'
   | 'cadrer'
   | 'calendrier'
+  | 'camembert'
+  | 'carte-bancaire'
   | 'chevron-bas'
   | 'chevron-droit'
   | 'chevron-gauche'
   | 'chevron-haut'
   | 'citation'
+  | 'cle'
+  | 'cloche'
   | 'coche'
+  | 'coche-cercle'
+  | 'code'
   | 'copier'
   | 'corbeille'
   | 'courriel'
+  | 'crayon'
+  | 'croix-cercle'
   | 'cube'
   | 'deconnexion'
   | 'depot-fichier'
   | 'diplome'
   | 'dossier'
+  | 'drapeau'
   | 'eclair'
   | 'empreinte'
   | 'envoyer'
   | 'epingle'
   | 'equipe'
   | 'etincelles'
+  | 'etiquette'
   | 'etoile'
   | 'fermer'
   | 'fichier'
   | 'filtre'
+  | 'fleche-bas'
+  | 'fleche-droite'
+  | 'fleche-gauche'
+  | 'fleche-haut'
   | 'globe'
   | 'graphique'
   | 'gras'
+  | 'historique'
   | 'horloge'
   | 'image'
   | 'imprimante'
   | 'info'
   | 'italique'
   | 'lecture'
+  | 'lien'
   | 'lien-externe'
   | 'liste-a-puces'
+  | 'liste-coches'
   | 'livre-ouvert'
+  | 'lune'
   | 'menu'
+  | 'message'
   | 'micro'
   | 'moins'
   | 'muet'
   | 'oeil'
   | 'oeil-barre'
+  | 'partager'
   | 'pause'
+  | 'piece-jointe'
   | 'plein-ecran'
   | 'plus'
+  | 'plus-cercle'
+  | 'poignee'
+  | 'portefeuille'
+  | 'prise'
   | 'recherche'
+  | 'recu'
   | 'registre'
   | 'reglages'
   | 'rembobiner'
+  | 'repere'
   | 'reseau'
+  | 'retablir'
+  | 'robot'
+  | 'sablier'
   | 'signet'
+  | 'soleil'
   | 'son'
+  | 'tableau-de-bord'
   | 'taches'
   | 'telecharger'
   | 'telephone'
+  | 'televerser'
+  | 'terminal'
   | 'tri'
   | 'trois-points'
   | 'utilisateur'
+  | 'utilisateur-moins'
+  | 'utilisateur-plus'
   | 'video'
+  | 'webhook'
 
 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\" />",
+  'actualiser': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\" /><path d=\"M21 3v5h-5\" /><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\" /><path d=\"M8 16H3v5\" /></g>",
   '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\" />",
+  'annuler': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M9 14 4 9l5-5\" /><path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11\" /></g>",
   '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\" />",
   'applications': "<rect x=\"4\" y=\"4\" width=\"6.67\" height=\"6.67\" fill=\"currentColor\" stroke=\"none\" /><rect x=\"13.33\" y=\"4\" width=\"6.67\" height=\"6.67\" fill=\"currentColor\" stroke=\"none\" /><rect x=\"4\" y=\"13.33\" width=\"6.67\" height=\"6.67\" fill=\"currentColor\" stroke=\"none\" /><rect x=\"13.33\" y=\"13.33\" width=\"6.67\" height=\"6.67\" 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\" />",
   '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\" />",
+  'barres': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M3 3v16a2 2 0 0 0 2 2h16\" /><path d=\"M18 17V9\" /><path d=\"M13 17V5\" /><path d=\"M8 17v-3\" /></g>",
   '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\" />",
+  'batiment': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M10 12h4\" /><path d=\"M10 8h4\" /><path d=\"M14 21v-3a2 2 0 0 0-4 0v3\" /><path d=\"M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2\" /><path d=\"M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16\" /></g>",
+  'billet': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><rect width=\"20\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" /><circle cx=\"12\" cy=\"12\" r=\"2\" /><path d=\"M6 12h.01M18 12h.01\" /></g>",
   '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\" /><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-ouvert': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\" /><path d=\"M7 11V7a5 5 0 0 1 9.9-1\" /></g>",
   '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\" /><path d=\"M3.33 9.33 H20.67\" /><path d=\"M8 2.67 V6.67\" /><path d=\"M16 2.67 V6.67\" />",
+  'camembert': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z\" /><path d=\"M21.21 15.89A10 10 0 1 1 8 2.83\" /></g>",
+  'carte-bancaire': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\" /><line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\" /><path d=\"M6 14h2\" /></g>",
   '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\" />",
   '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\" />",
+  'cle': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z\" /><circle cx=\"16.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" /></g>",
+  'cloche': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M10.268 21a2 2 0 0 0 3.464 0\" /><path d=\"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326\" /></g>",
   'coche': "<path d=\"M5 12.4 L9.4 16.8 L19 6.8\" />",
+  'coche-cercle': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m16 9-5.5 5.5L8 12\" /></g>",
+  'code': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"m16 18 6-6-6-6\" /><path d=\"m8 6-6 6 6 6\" /></g>",
   '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\" /><path d=\"M2.67 7.33 L12 13.33 L21.33 7.33\" />",
+  'crayon': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\" /><path d=\"m15 5 4 4\" /></g>",
+  'croix-cercle': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m15 9-6 6\" /><path d=\"m9 9 6 6\" /></g>",
   '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\" />",
   'diplome': "<path d=\"M2.67 9.33 L12 4.67 L21.33 9.33 L12 14 Z\" /><path d=\"M6.67 11.6 V16 C6.67 17.47 9.07 18.67 12 18.67 C14.93 18.67 17.33 17.47 17.33 16 V11.6\" /><path d=\"M21.33 9.33 V14.67\" />",
   'dossier': "<path d=\"M1.41 6.64a1.69 1.69 0 0 1 1.69-1.69h4.8l2.12 2.4h10.87a1.69 1.69 0 0 1 1.69 1.69v9.88a1.69 1.69 0 0 1-1.69 1.69H3.11A1.69 1.69 0 0 1 1.41 20.33V6.64Z\" />",
+  'drapeau': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528\" /></g>",
   'eclair': "<path d=\"M13.33 2.67 L5.33 13.33 H12 L10.67 21.33 L18.67 10.67 H12 Z\" />",
   'empreinte': "<path d=\"M4 18.67 V14.67 A8 9.33 0 0 1 20 14.67 V17.33\" /><path d=\"M8 17.33 A4 5.33 0 0 1 16 17.33\" /><path d=\"M12 13.33 V20\" />",
   'envoyer': "<path d=\"M21.33 2.67 L10.67 13.33\" /><path d=\"M21.33 2.67 L14.67 21.33 L10.67 13.33 L2.67 9.33 Z\" />",
   'epingle': "<path d=\"M12 21.33 C7.56 16.89 5.33 13.42 5.33 10.67 A6.67 6.67 0 0 1 18.67 10.67 C18.67 13.42 16.44 16.89 12 21.33 Z\" /><circle cx=\"12\" cy=\"10.67\" r=\"2.4\" />",
   'equipe': "<circle cx=\"9.33\" cy=\"8\" r=\"3.33\" /><path d=\"M3.33 20 C3.33 15.33 6 13.33 9.33 13.33 C12.67 13.33 15.33 15.33 15.33 20\" /><path d=\"M16 5.33 A2.93 2.93 0 0 1 16 11.07\" /><path d=\"M17.33 13.6 C19.73 14.27 20.67 16.4 20.67 20\" />",
   'etincelles': "<path d=\"M12 2.67 L13.87 8.8 L20 10.67 L13.87 12.53 L12 18.67 L10.13 12.53 L4 10.67 L10.13 8.8 Z\" /><path d=\"M19.33 16.67 L20 18.67 L22 19.33 L20 20 L19.33 22 L18.67 20 L16.67 19.33 L18.67 18.67 Z\" />",
+  'etiquette': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\" /><circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" /></g>",
   'etoile': "<path d=\"M12 3.33 L14.67 8.53 L20.4 9.37 L16.2 13.4 L17.2 19.07 L12 16.4 L6.8 19.07 L7.8 13.4 L3.6 9.37 L9.33 8.53 Z\" />",
   'fermer': "<path d=\"M5.33 5.33 L18.67 18.67\" /><path d=\"M18.67 5.33 L5.33 18.67\" />",
   'fichier': "<path d=\"M13.33 2.67 H6.67 A1.33 1.33 0 0 0 5.33 4 V20 A1.33 1.33 0 0 0 6.67 21.33 H17.33 A1.33 1.33 0 0 0 18.67 20 V8 Z\" /><path d=\"M13.33 2.67 V8 H18.67\" />",
   'filtre': "<path d=\"M2.67 4 H21.33 L14.67 12.27 V18.67 L9.33 21.33 V12.27 Z\" />",
+  'fleche-bas': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M12 5v14\" /><path d=\"m19 12-7 7-7-7\" /></g>",
+  'fleche-droite': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M5 12h14\" /><path d=\"m12 5 7 7-7 7\" /></g>",
+  'fleche-gauche': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"m12 19-7-7 7-7\" /><path d=\"M19 12H5\" /></g>",
+  'fleche-haut': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"m5 12 7-7 7 7\" /><path d=\"M12 19V5\" /></g>",
   '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\" />",
+  'historique': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" /><path d=\"M3 3v5h5\" /><path d=\"M12 7v5l4 2\" /></g>",
   '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': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\" /><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\" /></g>",
   '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\" />",
+  'liste-coches': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M13 5h8\" /><path d=\"M13 12h8\" /><path d=\"M13 19h8\" /><path d=\"m3 17 2 2 4-4\" /><path d=\"m3 7 2 2 4-4\" /></g>",
   '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\" />",
+  'lune': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\" /></g>",
   'menu': "<path d=\"M0 5.33 H24\" /><path d=\"M0 12 H24\" /><path d=\"M0 18.67 H24\" />",
+  'message': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z\" /></g>",
   'micro': "<rect x=\"9.33\" y=\"3.33\" width=\"5.33\" height=\"10.67\" rx=\"2.67\" /><path d=\"M5.33 11.33 A6.67 6.67 0 0 0 18.67 11.33\" /><path d=\"M12 18 V20.67\" /><path d=\"M8.67 20.67 H15.33\" />",
   '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\" />",
+  'partager': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><circle cx=\"18\" cy=\"5\" r=\"3\" /><circle cx=\"6\" cy=\"12\" r=\"3\" /><circle cx=\"18\" cy=\"19\" r=\"3\" /><line x1=\"8.59\" x2=\"15.42\" y1=\"13.51\" y2=\"17.49\" /><line x1=\"15.41\" x2=\"8.59\" y1=\"6.51\" y2=\"10.49\" /></g>",
   '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\" />",
+  'piece-jointe': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551\" /></g>",
   '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\" />",
+  'plus-cercle': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M8 12h8\" /><path d=\"M12 8v8\" /></g>",
+  'poignee': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><circle cx=\"9\" cy=\"12\" r=\"1\" /><circle cx=\"9\" cy=\"5\" r=\"1\" /><circle cx=\"9\" cy=\"19\" r=\"1\" /><circle cx=\"15\" cy=\"12\" r=\"1\" /><circle cx=\"15\" cy=\"5\" r=\"1\" /><circle cx=\"15\" cy=\"19\" r=\"1\" /></g>",
+  'portefeuille': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1\" /><path d=\"M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4\" /></g>",
+  'prise': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M12 22v-5\" /><path d=\"M15 8V2\" /><path d=\"M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z\" /><path d=\"M9 8V2\" /></g>",
   'recherche': "<circle cx=\"10.67\" cy=\"10.67\" r=\"6\" /><path d=\"M15.33 15.33 L20 20\" />",
+  'recu': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M12 17V7\" /><path d=\"M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8\" /><path d=\"M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z\" /></g>",
   '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\" />",
+  'repere': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\" /><circle cx=\"12\" cy=\"10\" r=\"3\" /></g>",
   '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\" />",
+  'retablir': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"m15 14 5-5-5-5\" /><path d=\"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13\" /></g>",
+  'robot': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M12 8V4H8\" /><rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\" /><path d=\"M2 14h2\" /><path d=\"M20 14h2\" /><path d=\"M15 13v2\" /><path d=\"M9 13v2\" /></g>",
+  'sablier': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M5 22h14\" /><path d=\"M5 2h14\" /><path d=\"M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22\" /><path d=\"M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2\" /></g>",
   'signet': "<path d=\"M6 4 H18 V20 L12 15.5 L6 20 Z\" />",
+  'soleil': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><circle cx=\"12\" cy=\"12\" r=\"4\" /><path d=\"M12 2v2\" /><path d=\"M12 20v2\" /><path d=\"m4.93 4.93 1.41 1.41\" /><path d=\"m17.66 17.66 1.41 1.41\" /><path d=\"M2 12h2\" /><path d=\"M20 12h2\" /><path d=\"m6.34 17.66-1.41 1.41\" /><path d=\"m19.07 4.93-1.41 1.41\" /></g>",
   '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\" />",
+  'tableau-de-bord': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><rect width=\"7\" height=\"9\" x=\"3\" y=\"3\" rx=\"1\" /><rect width=\"7\" height=\"5\" x=\"14\" y=\"3\" rx=\"1\" /><rect width=\"7\" height=\"9\" x=\"14\" y=\"12\" rx=\"1\" /><rect width=\"7\" height=\"5\" x=\"3\" y=\"16\" rx=\"1\" /></g>",
   '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\" />",
+  'televerser': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M12 3v12\" /><path d=\"m17 8-5-5-5 5\" /><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" /></g>",
+  'terminal': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"m7 11 2-2-2-2\" /><path d=\"M11 13h4\" /><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" /></g>",
   '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\" />",
+  'utilisateur-moins': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\" /><circle cx=\"9\" cy=\"7\" r=\"4\" /><line x1=\"22\" x2=\"16\" y1=\"11\" y2=\"11\" /></g>",
+  'utilisateur-plus': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\" /><circle cx=\"9\" cy=\"7\" r=\"4\" /><line x1=\"19\" x2=\"19\" y1=\"8\" y2=\"14\" /><line x1=\"22\" x2=\"16\" y1=\"11\" y2=\"11\" /></g>",
   'video': "<path d=\"M3.5 6 H15 V18 H3.5 Z\" /><path d=\"M15 10 L20.5 7 V17 L15 14 Z\" />",
+  'webhook': "<g transform=\"matrix(0.9 0 0 0.9 1.20 1.20)\" stroke-width=\"2.222\"><path d=\"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2\" /><path d=\"m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06\" /><path d=\"m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8\" /></g>",
 }
 
 /** Nom lisible de chaque icône : sert de titre accessible par défaut à
@@ -157,75 +243,118 @@ export const CORPS: Record<IconId, string> = {
 export const NOMS: Record<IconId, string> = {
   'accueil': "Accueil",
   'activite': "Activité (pouls)",
+  'actualiser': "Actualiser",
   'aide': "Aide",
+  'annuler': "Annuler (défaire)",
   'app-couches': "Application (couches)",
   'applications': "Applications (lanceur)",
   'archiver': "Archiver",
   'attention': "Attention (avertissement)",
   'avancer': "Avancer",
   'balance': "Balance (justice)",
+  'barres': "Graphique en barres",
   'base-de-donnees': "Base de données",
+  'batiment': "Bâtiment (organisation)",
+  'billet': "Billet",
   'bouclier-verifie': "Bouclier vérifié (authentification)",
   'cadenas': "Cadenas (secret)",
+  'cadenas-ouvert': "Cadenas ouvert",
   'cadrer': "Cadrer (ajuster à la vue)",
   'calendrier': "Calendrier",
+  'camembert': "Graphique en secteurs",
+  'carte-bancaire': "Carte bancaire",
   'chevron-bas': "Chevron bas",
   'chevron-droit': "Chevron droit",
   'chevron-gauche': "Chevron gauche",
   'chevron-haut': "Chevron haut",
   'citation': "Citation",
+  'cle': "Clé",
+  'cloche': "Cloche (notifications)",
   'coche': "Coche",
+  'coche-cercle': "Validé",
+  'code': "Code",
   'copier': "Copier",
   'corbeille': "Corbeille (supprimer)",
   'courriel': "Courriel",
+  'crayon': "Crayon (modifier, renommer)",
+  'croix-cercle': "Refusé",
   'cube': "Cube (stockage objet)",
   'deconnexion': "Déconnexion",
   'depot-fichier': "Dépôt de fichier (zone de glisser-déposer)",
   'diplome': "Diplôme (Campus)",
   'dossier': "Dossier",
+  'drapeau': "Drapeau",
   'eclair': "Éclair (action rapide)",
   'empreinte': "Empreinte (biométrie, passkey)",
   'envoyer': "Envoyer",
   'epingle': "Épingle (lieu)",
   'equipe': "Équipe (membres)",
   'etincelles': "Étincelles (IA)",
+  'etiquette': "Étiquette",
   'etoile': "Étoile (favori)",
   'fermer': "Fermer",
   'fichier': "Fichier (document)",
   'filtre': "Filtre",
+  'fleche-bas': "Flèche bas",
+  'fleche-droite': "Flèche droite",
+  'fleche-gauche': "Flèche gauche",
+  'fleche-haut': "Flèche haut",
   'globe': "Globe (international)",
   'graphique': "Graphique (barres)",
   'gras': "Gras",
+  'historique': "Historique",
   'horloge': "Horloge (intégration continue)",
   'image': "Image",
   'imprimante': "Imprimante",
   'info': "Information",
   'italique': "Italique",
   'lecture': "Lecture",
+  'lien': "Lien",
   'lien-externe': "Lien externe",
   'liste-a-puces': "Liste à puces",
+  'liste-coches': "Liste cochée",
   'livre-ouvert': "Livre ouvert (formation)",
+  'lune': "Lune",
   'menu': "Menu (hamburger)",
+  'message': "Message",
   'micro': "Micro (dictée)",
   'moins': "Moins",
   'muet': "Muet",
   'oeil': "Œil (afficher)",
   'oeil-barre': "Œil barré",
+  'partager': "Partager",
   'pause': "Pause",
+  'piece-jointe': "Pièce jointe",
   'plein-ecran': "Plein écran",
   'plus': "Plus",
+  'plus-cercle': "Ajouter (cerclé)",
+  'poignee': "Poignée (glisser)",
+  'portefeuille': "Portefeuille",
+  'prise': "Prise (connecteur)",
   'recherche': "Recherche (loupe)",
+  'recu': "Reçu (facture)",
   'registre': "Registre (serveurs empilés)",
   'reglages': "Réglages",
   'rembobiner': "Rembobiner",
+  'repere': "Repère (lieu)",
   'reseau': "Réseau (entrée / globe)",
+  'retablir': "Rétablir (refaire)",
+  'robot': "Robot (assistant)",
+  'sablier': "Sablier",
   'signet': "Signet",
+  'soleil': "Soleil",
   'son': "Son",
+  'tableau-de-bord': "Tableau de bord",
   'taches': "Tâches (liste à cocher)",
   'telecharger': "Télécharger",
   'telephone': "Téléphone",
+  'televerser': "Téléverser",
+  'terminal': "Terminal",
   'tri': "Tri",
   'trois-points': "Trois points (menu contextuel)",
   'utilisateur': "Utilisateur",
+  'utilisateur-moins': "Retirer une personne",
+  'utilisateur-plus': "Ajouter une personne",
   'video': "Vidéo",
+  'webhook': "Webhook",
 }

package/react/overlays.tsx

@@ -66,8 +66,14 @@ export function useOverlay({ ouvert, onClose, panneau, verrouille = true }: UseO
 
     // ⚠️ La valeur PRÉCÉDENTE est restaurée, pas remise à '' : une page qui
     // gérait déjà son propre défilement serait cassée par un reset aveugle.
-    const overflowPrecedent = verrouille ? docu.body.style.overflow : null
-    if (verrouille) docu.body.style.overflow = 'hidden'
+    // ⚠️ Sur `html`, JAMAIS sur `body` (DECISIONS, 03/11/2026) : overlays.css
+    // verrouille déjà `html` ; un `overflow` de plus sur `body` ne remonte
+    // alors plus au viewport, `body` devient un conteneur de défilement à
+    // zéro, et toute colonne `sticky` de la page saute en haut de `body`,
+    // hors de l'écran.
+    const racine = docu.documentElement
+    const overflowPrecedent = verrouille ? racine.style.overflow : null
+    if (verrouille) racine.style.overflow = 'hidden'
 
     const premier = cible?.querySelector<HTMLElement>(FOCUSABLES)
     premier?.focus()
@@ -99,7 +105,7 @@ export function useOverlay({ ouvert, onClose, panneau, verrouille = true }: UseO
     docu.addEventListener('keydown', onKey)
     return () => {
       docu.removeEventListener('keydown', onKey)
-      if (overflowPrecedent !== null) docu.body.style.overflow = overflowPrecedent
+      if (overflowPrecedent !== null) racine.style.overflow = overflowPrecedent
       origine.current?.focus?.()
     }
   }, [ouvert, panneau, verrouille])

package/react/select-menu.tsx

@@ -20,9 +20,11 @@
 // 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 { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
+import type { CSSProperties } from 'react'
 import type { ReactNode } from 'react'
 import { cx } from './cx.js'
+import { Icon } from './icon.js'
 
 export interface OptionSelect<T extends string = string> {
   valeur: T
@@ -117,13 +119,70 @@ export function SelectMenu<T extends string = string>({
     return () => doc.removeEventListener('pointerdown', dehors)
   }, [ouvert])
 
+  // La place de la liste à l'écran (DECISIONS, 03/11/2026) : en `fixed`, elle
+  // échappe à tout conteneur qui rogne (un tableau qui défile, une carte en
+  // `overflow: hidden`). Calculée d'après la boîte du déclencheur, et
+  // recalculée quand la page ou un conteneur défile, ou que la fenêtre change.
+  const [place, setPlace] = useState<CSSProperties | null>(null)
+  useLayoutEffect(() => {
+    if (!ouvert) {
+      setPlace(null)
+      return
+    }
+    const vue = declencheur.current?.ownerDocument.defaultView ?? window
+    const ECART = 5
+    const MARGE = 8
+    function placer(e?: Event) {
+      // Le défilement de la liste ELLE-MÊME ne la déplace pas : sans ce
+      // filtre, chaque tour de molette dans une longue liste la replaçait.
+      if (e && e.target === liste.current) return
+      const d = declencheur.current
+      if (!d) return
+      const r = d.getBoundingClientRect()
+      // La largeur AVANT la mesure : sans elle, la liste vaut encore 100 % de
+      // la fenêtre au premier passage, et le garde-fou de droite la plaque à
+      // gauche de l'écran.
+      liste.current?.style.setProperty('--zv-menu-largeur', `${r.width}px`)
+      const hauteur = liste.current?.scrollHeight ?? 0
+      const largeur = Math.max(liste.current?.offsetWidth ?? 0, r.width)
+      const dessous = vue.innerHeight - r.bottom - ECART - MARGE
+      const dessus = r.top - ECART - MARGE
+      // Au-dessus seulement si la liste ne tient pas dessous ET qu'il y a
+      // davantage de place au-dessus : sinon on garde le sens attendu.
+      const enHaut = hauteur > dessous && dessus > dessous
+      const dispo = Math.max(120, enHaut ? dessus : dessous)
+      const visible = Math.min(hauteur, dispo)
+      setPlace({
+        position: 'fixed',
+        top: enHaut ? r.top - ECART - visible : r.bottom + ECART,
+        // Jamais hors de la fenêtre à droite.
+        left: Math.max(MARGE, Math.min(r.left, vue.innerWidth - largeur - MARGE)),
+        maxHeight: dispo,
+        '--zv-menu-largeur': `${r.width}px`,
+      } as CSSProperties)
+    }
+    placer()
+    vue.addEventListener('scroll', placer, true)
+    vue.addEventListener('resize', placer)
+    return () => {
+      vue.removeEventListener('scroll', placer, true)
+      vue.removeEventListener('resize', placer)
+    }
+  }, [ouvert, options.length])
+
   // L'option active reste visible quand on parcourt une liste plus haute que
-  // son cadre.
+  // son cadre. `place` : la liste n'est bornée (hauteur maximale) qu'une fois
+  // placée ; avant, il n'y a rien à faire défiler, et une liste longue
+  // s'ouvrait en haut (« Algérie ») au lieu de l'option choisie (« France »).
+  // Sur le PASSAGE à « placée », pas sur chaque nouvelle place : la place
+  // change à chaque défilement de la page, et ramener l'option active à
+  // chaque fois contrarierait qui parcourt la liste.
+  const placee = place !== null
   useEffect(() => {
-    if (!ouvert) return
+    if (!ouvert || !placee) return
     const el = liste.current?.children[actif] as HTMLElement | undefined
     el?.scrollIntoView({ block: 'nearest' })
-  }, [ouvert, actif])
+  }, [ouvert, actif, placee])
 
   function suivant(depuis: number, pas: number): number {
     const n = options.length
@@ -215,12 +274,20 @@ export function SelectMenu<T extends string = string>({
       >
         <span className="zv-trunc">{choisi ? choisi.label : placeholder}</span>
         <span className="zv-select__chevron" aria-hidden="true">
-          ▾
+          <Icon nom="chevron-bas" taille="sm" />
         </span>
       </button>
 
       {ouvert && (
-        <div ref={liste} id={idListe} role="listbox" className="zv-menu">
+        <div
+          ref={liste}
+          id={idListe}
+          role="listbox"
+          className="zv-menu zv-menu--place"
+          // Tant que la place n'est pas calculée (premier rendu), la liste est
+          // posée mais invisible : elle ne clignote pas à sa place d'origine.
+          style={place ?? { position: 'fixed', visibility: 'hidden' }}
+        >
           {options.map((o, i) => (
             <button
               key={o.valeur}

package/src/forms.css

@@ -383,8 +383,21 @@
 }
 
 .zv-select-anchor--block .zv-menu {
-  width: 100%;
-  min-width: 0;
+  /* En `fixed` (DECISIONS, 03/11/2026), 100 % vaudrait la fenêtre : la
+   * largeur du déclencheur arrive par `--zv-menu-largeur`. La liste en est
+   * le MINIMUM, pas la mesure : sous un déclencheur calé sur son contenu
+   * (« Membre »), l'option longue (« Administrateur ») débordait. Elle prend
+   * la largeur de ses options, jamais plus que la fenêtre. */
+  width: max-content;
+  min-width: var(--zv-menu-largeur, 100%);
+  max-width: calc(100vw - 16px);
+}
+
+/* La liste de SelectMenu, placée par le composant (`fixed`, haut, gauche,
+ * hauteur maximale) : elle défile au-delà de la place disponible. */
+.zv-menu--place {
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
 /* ─── Déclencheur de sélection DESSINÉE ─────────────────────────────────
@@ -459,10 +472,25 @@
   color: var(--accent);
 }
 
-/* ▾ (U+25BE) posé dans le balisage. */
+/* Le chevron : l'icône `chevron-bas` du jeu (DECISIONS, 02/11/2026). Il
+ * était un « ▾ » (U+25BE) de police, gras et petit, qui ne ressemblait à
+ * aucune icône. Il pivote d'un demi-tour quand la liste est ouverte.
+ * HORS RELEVÉ : la planche ne montrait que l'état fermé. */
 .zv-select__chevron {
-  font-size: var(--mono-sm);
+  display: inline-flex;
+  flex: none;
   color: var(--label);
+  transition: transform 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+[aria-expanded='true'] > .zv-select__chevron {
+  transform: rotate(180deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .zv-select__chevron {
+    transition: none;
+  }
 }
 
 /* ─── Case à cocher et bouton radio ─────────────────────────────────────