@zevra/ui 0.50.0 → 0.51.0

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/partenaires-data.ts

@@ -0,0 +1,18 @@
+// GÉNÉRÉ par scripts/build-partenaires-data.mjs : ne pas éditer à la main.
+// Source : logos/partenaires/ (provenance de chaque fichier dans index.json).
+
+export type PartenaireId =
+  | 'docusign'
+  | 'google'
+  | 'henrri'
+  | 'maileva'
+  | 'microsoft'
+
+/** Les logos des services partenaires, inlinés, et le nom de la marque. */
+export const LOGOS_PARTENAIRES: Record<PartenaireId, { src: string; nom: string; plein: boolean }> = {
+  'docusign': { src: 'data:image/webp;base64,UklGRkgFAABXRUJQVlA4WAoAAAAQAAAAXwAAXwAAQUxQSA8CAAABoETbtmnbmXvv+227btu2bf9ftq3U0lKybZRSYylF27ad3Hv3WjPO+efPOGktIiYAxUfMetGcZbRPXnnw6n2TmgNIEeUNaPMajSWuvXb9qrZACqWJGFJzL4m75UySb1/QC0jlGfAty/Kz7jmTn13YGTGUZeB35fqpZfLNTUCSRXomb+uIpIu0zOeHIgkj6/xgBirKmFlbjqSM5t+OQVJG4/t9EJUx8+GmMShj5qVI0pg5H0ma+ZPNY1DGzH1I0szfax+CMmYeQZJm/kKTEJQx+5JQ0ca7EaQ5P+kGacxcJ67Oy4AQC67EwQKcT1Uiiu8p4cue6DhkYLGDB6ysCXBfOuf1774t+JsqBWYefJfSM6+jefEKjPc6pTufproP5X0p7q/Q78Q535P3gjjjQ+IybxVX5/nijFu1OasT1b3bSpvxQWir85g2d07XZnylubbMSxClmU1CUmZ8pEEIyjK3IUGY+TvtQlCWuQsJwsyfbBKDMM+chwRhmTcgBmHGl9rHAF1uX49Bgi4zLkOCLjfuRIKuTG5Hgiyv87NlqECVZ/LhQUgQZZn84kQTJMhxN8vZyeoN/YEIPb/4+Hm9gRQgqPb5u0/fc2h8QyBG/FYFzuqqnj0iAKSI367h254AYkoBRYoYHCsBRYsYiIj/bXIJ3ww4G3QBXh1yNh6nnXPG19ogFDfyUfdzzO3FWYgoHgBWUDggEgMAAPAVAJ0BKmAAYAA+MRaJQqIhIRgLHHAgAwSxAGk3AL9J/ADaEepfhb+0n+k5JvurythyOoP8z+QH9m+iHor8Rf/DfZL3APMB+nP7K9iD0AP1262b0AP2j9Kz2Mf29/4f/A+Af9c//Q0gNJ3MG8aGoH+qPoAdSB+laEZgR3iv2AwhLHYdOsaluNDFnQs241z2Fa2xKZeHggqLHWCUIMBqnZhLegQGZzHLVNkmuG7OTFK3HtKDTGh1hIAA/v7usEQurJYDnzZuaEty0/pLuG8V+gCnix0ijD36wHNsySlro1acCpUC+MSWl0HIEUAQwJJBGeStHf/b/90fKi/dlvxq0s/Oh3p/zG8b4f6gf2yWdCpOX67m20mGgL/Qh/Dd72O8/jIvkRrOosvlsgyLJ5Hutr/A/n1RiWIUACnzAmzS2JCQOxy3JC8j+qT4ct2BGmy0j/vSpG6/1UBazxDlbu839JqhBeVpIoEoOlMz9DAXp/C70ApMAUY3PE64Ya7XYcb523P7yKke+cYCpaKC3uYzK0HIncy5Pszu+rH1zNhFOtcPdBAj1tZfRLImjY4cKx4WKythwc7NPXiZ3apAytZ1/T7Wuq1SwE7h5ZDhNwiKT/UHCUeo6jWVwLT3QfXbtRVBr5zGOhiHi2KsvHafx/JAMRXUPDAjaKTc2mYuTOVIMH7pym1qbzgIIC1uAsMdkWoLsIVRJa47UrYL1+gX149HTyTVSgV0xhCqJn2pz5Pg7Br85XWPW8IQK78lKaYfqL0UCq9g+bB2l1lCq3rJWcDRwA+EFVV/jVZ7xdPGdpyWA0UL5EO3wmlQt3Qbi5ONgtnXobZwFWsHY3lWlHPYgBWOBWXx4DoT31P2So9qTu8Ab2hOq9UZdinjJg1b4g/f/gfWpNMxnpYyhKB5ITQmj8aPYokyqInXP/ydHbOrJebrwcuZ9JD/SIs+dfv+mY5X8sJW/ApFjv/u0EQoDA3HsxHwx7pJbo8+IsMz8Ij3ut/ZQkTTiQsNDkvLTQnCSyiU/2rHYQz4GFWLMTG5qFZVrNFRq2AAAA==', nom: "DocuSign", plein: false },
+  'google': { src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMjIuNTYgMTIuMjVjMC0uNzgtLjA3LTEuNTMtLjItMi4yNUgxMnY0LjI2aDUuOTJjLS4yNiAxLjM3LTEuMDQgMi41My0yLjIxIDMuMzF2Mi43N2gzLjU3YzIuMDgtMS45MiAzLjI4LTQuNzQgMy4yOC04LjA5eiIgZmlsbD0iIzQyODVGNCIvPjxwYXRoIGQ9Ik0xMiAyM2MyLjk3IDAgNS40Ni0uOTggNy4yOC0yLjY2bC0zLjU3LTIuNzdjLS45OC42Ni0yLjIzIDEuMDYtMy43MSAxLjA2LTIuODYgMC01LjI5LTEuOTMtNi4xNi00LjUzSDIuMTh2Mi44NEMzLjk5IDIwLjUzIDcuNyAyMyAxMiAyM3oiIGZpbGw9IiMzNEE4NTMiLz48cGF0aCBkPSJNNS44NCAxNC4wOWMtLjIyLS42Ni0uMzUtMS4zNi0uMzUtMi4wOXMuMTMtMS40My4zNS0yLjA5VjcuMDdIMi4xOEMxLjQzIDguNTUgMSAxMC4yMiAxIDEycy40MyAzLjQ1IDEuMTggNC45M2wyLjg1LTIuMjIuODEtLjYyeiIgZmlsbD0iI0ZCQkMwNSIvPjxwYXRoIGQ9Ik0xMiA1LjM4YzEuNjIgMCAzLjA2LjU2IDQuMjEgMS42NGwzLjE1LTMuMTVDMTcuNDUgMi4wOSAxNC45NyAxIDEyIDEgNy43IDEgMy45OSAzLjQ3IDIuMTggNy4wN2wzLjY2IDIuODRjLjg3LTIuNiAzLjMtNC41MyA2LjE2LTQuNTN6IiBmaWxsPSIjRUE0MzM1Ii8+PHBhdGggZD0iTTEgMWgyMnYyMkgxeiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==', nom: "Google Workspace", plein: false },
+  'henrri': { src: 'data:image/webp;base64,UklGRrgFAABXRUJQVlA4IKwFAACQHgCdASpgAGAAPjEWiUMiISEXiPTYIAMEsgBqYri/APxu7lyn/Wvxp/LH5i63/PvvZyasu+Z14h+e/5/7dPrN6DPsr9wD9O/8H1APMB+sv7Te0f+rnuA/Tv2AP6Z/lPWA9SP+sf7f2AP1h9NX9mfg3/b39xvadvGT8HysiQ37H/oeH/YR3orIXET2zHIBfSP8Z52vP00bPQvsI/yX+vb6ahQciI39yrPWkj5LEo8aImSVYgK7JqT+zpAddnCZPSLMXeOmYMszqDj62U8IhaM3INGjflWeF2bD83ozTB6i0tRgp2/ZbCnsvFFJaBUW4VW3ptUkW2uAaQ9s8bgAAP7xTYVq77cxtvoUT8iX8iX8oEWUOLh+Tf4FFYPh9CJ/rcey/1W+9K3RmjH0Q2ToquREs5KySoANutbkzjl4dZrpCpHdkcoXQuKfZe10q0MVoS9xFefQ1VogpVds4908KQ4G1AZHX5PjjP+4mMp08dO3f21xrpfsHeC5GA1X+xZgUeulXVaH6PnTTxMbOf+08tvEuViAib0GCa3gSideogTUymOtQXKjDSRKjeIt0DoVOpgMnBn9BeFPjrF1hnBkaV32SaiI2gBc3HUM2gll+USLRnJbZ97R7xnaKD8nkZ2+XGIGeQQzhuD4RNVNpfD/rEKuzDwqAmc5KCu7GGL/Vi22thly5L2NSBem5b1qs1HEz68Oa++gqBG0zTO4JN1hkfJtP/aKxQCurZSx+R/+/9L3on//427rufZ/pqqwDjYprGeexcST5Me+Re/T+9so12oPxTDlUXaiHqGid1o1dbwaJflAE6VaWVuXBZjycDLnjaQkBz/APqfkHfJQnb1IycGnrR4V7MCZl3/z09VjDu3a1yRTZsP3Ut73QYiV4KFvNqpj7ty70rk3u2IYc68Mn8PKOp1P842CSGgRvMDuWDFiA6w88G1SdVOTCHqsB0Q7L0T9/y09//TvNfv3wgvMGTw1DxUOMekHK+wj3s3XMSUJjV9gI3uL9ToNbMIQHF/ENmTj9Ftf88prMgB1//9nBo0eFFe++l0j54Q84D2+ZyYkY2I2ylLOryhVwCs/cCGYlszPE2fHJpJAGcxWigRKlw+UEQpuu3GEsGAphOD3q/sR9xs0x5IbvwNblE8LeFUx2i/0KDtQtXXxdBa+BXnW09zk1WXAOXRmeDD9ukzB1KlXKOujMD5+ZclfXirEcfnQ2OzH+Qdyg6QzolQTdMnmlEbsDmP/EVpoAaFWnHldj26VvH3FbXR1bwdl5rmdKXfDbLxTDEi0dvvJl9LCyW5wA9aNBt1r+K9/bPCUw1Fqmo/HKZPSrid0kCYDG08EZnW74/Fxxb8DTNzjo0FMAT0GLruQg30oMCfQtRfQnqAGxzvc+eLqTylsC96DHmcl0bvON02eR1yNlHdE05/Svnk3oq+3XF6rED/8ddsVQuherFVxnbQGtCdb7clCJBadVNZo6R2G91R/8S4k68URD/pS7lyS6Plxaij69rWRnwnVE3LgZywwsLH264BZsyz05nfl7fyQdgnq3dRGwfNCE0xELt/VvvAKwhlantrqrh5yBIINoRZFlKeXgkT0To5Z5/N5LSOuw0dO0KDv2MK/FVcFQC9sq0oEl/MPT7EXzqKcN3SvaYGHVM6ed6Wh9I3YFh3MZu6YEa30GmI5fY7AwKRsKEPjEgwGX3k++Wk5rwi5mIMWwNS49XG1zwC8mbUG5R+WMnn4Yc/cIWsDjcwqLOTHb42zuk6+OSzBVVKYvnSh5KL2gmN+RdDCqmF6mbdNPEFB9KXh39TE1NYKWJ1QRF2PLEYALWOvrHuFbgZ72YihavKilRZ1dynXEegZITqWnR+J1ZMQbpv2km6OPbJG5dChRj48a8WITagCZgoRaYMi3mrkrvYHB4QXYmxrkSGYhhnTyOn+zvAK7kMPiwAAAAA=', nom: "Henrri", plein: true },
+  'maileva': { src: 'data:image/webp;base64,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', nom: "Maileva", plein: false },
+  'microsoft': { src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMyAyMyI+PHBhdGggZmlsbD0iI2YzZjNmMyIgZD0iTTAgMGgyM3YyM0gweiIvPjxwYXRoIGZpbGw9IiNmMzUzMjUiIGQ9Ik0xIDFoMTB2MTBIMXoiLz48cGF0aCBmaWxsPSIjODFiYzA2IiBkPSJNMTIgMWgxMHYxMEgxMnoiLz48cGF0aCBmaWxsPSIjMDVhNmYwIiBkPSJNMSAxMmgxMHYxMEgxeiIvPjxwYXRoIGZpbGw9IiNmZmJhMDgiIGQ9Ik0xMiAxMmgxMHYxMEgxMnoiLz48L3N2Zz4=', nom: "Microsoft 365", plein: false },
+}

package/react/partenaires.tsx

@@ -0,0 +1,55 @@
+// Les logos des services qu'une app branche : Microsoft 365, Google
+// Workspace, DocuSign, Henrri, Maileva. Premier usage : la Marketplace de
+// Tésope (03/11/2026), où chaque extension se reconnaît à sa marque.
+//
+// ⚠️ ENTRÉE SÉPARÉE (`@zevra/ui/react/partenaires`) : les logos y sont
+// inlinés, le barrel React n'en porte pas un octet. Voir
+// scripts/build-partenaires-data.mjs.
+//
+// Ce sont les marques des ÉDITEURS, en couleur, telles qu'ils les publient :
+// on ne les recolore pas, on ne les redessine pas. Un service sans logo ici
+// garde son `IconTile` : on n'invente pas de marque.
+
+import { cx } from './cx.js'
+import { LOGOS_PARTENAIRES, type PartenaireId } from './partenaires-data.js'
+
+export type { PartenaireId }
+
+/** Les services dont le paquet porte le logo. */
+export const PARTENAIRES = Object.keys(LOGOS_PARTENAIRES) as PartenaireId[]
+
+/** Le paquet a-t-il le logo de ce service ? Sinon, l'app garde son `IconTile`. */
+export const aUnLogo = (id: string): id is PartenaireId => id in LOGOS_PARTENAIRES
+
+export interface LogoPartenaireProps {
+  /** Un service dont le paquet porte le logo. */
+  id?: PartenaireId
+  /**
+   * Une image du paquet À LA PLACE d'un service partenaire : le glyphe d'un
+   * produit Zevra (`GLYPHES.memoire` de `@zevra/ui/glyphes`) quand le
+   * service branché est l'un des nôtres. Jamais une image de l'app : un logo
+   * se range dans le paquet, pas dans un public/.
+   */
+  src?: string
+  /** Avec `src` : l'image couvre toute la tuile (icône d'application à fond plein). */
+  plein?: boolean
+  /** Nom lu par un lecteur d'écran. Par défaut, celui de la marque. Vide : décoratif (le nom est écrit à côté). */
+  titre?: string
+  className?: string
+}
+
+/**
+ * La tuile d'un service : même gabarit que `IconTile` (40×40), fond blanc
+ * au filet, le logo au centre. Une icône d'application à fond plein
+ * (Henrri) occupe toute la tuile.
+ */
+export function LogoPartenaire({ id, src, plein, titre, className }: LogoPartenaireProps) {
+  const l = id ? LOGOS_PARTENAIRES[id] : { src: src ?? '', nom: '', plein: Boolean(plein) }
+  const alt = titre ?? l.nom
+  return (
+    <span className={cx('zv-icon-tile', 'zv-icon-tile--logo', l.plein && 'zv-icon-tile--logo-plein', className)}
+          role={alt ? 'img' : undefined} aria-label={alt || undefined} aria-hidden={alt ? undefined : true}>
+      <img src={l.src} alt="" />
+    </span>
+  )
+}

package/react/select-menu.tsx

@@ -20,7 +20,8 @@
 // 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'
@@ -118,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
@@ -221,7 +279,15 @@ export function SelectMenu<T extends string = string>({
       </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 ─────────────────────────────────
@@ -585,6 +598,8 @@
   height: 20px;
   flex: none;
   border: 1px solid var(--line);
+  /* Carrée par défaut, en gélule sous `zv-arrondi` (tokens.css). */
+  border-radius: var(--r-switch);
   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
@@ -619,7 +634,7 @@
   inset-inline-start: 2px;
   width: 14px;
   height: 14px;
-  border-radius: 0;
+  border-radius: var(--r-switch-knob);
   background: var(--label);
   transition:
     inset-inline-start 150ms cubic-bezier(0.2, 0.7, 0.2, 1),

package/src/icons.css

@@ -132,6 +132,39 @@
   height: 40px;
   flex: none;
   border: 1px solid var(--accent-line);
+  /* Suit l'option arrondie (`zv-arrondi`, 03/11/2026) : nul par défaut. */
+  border-radius: var(--r-pill);
   background: var(--accent-soft);
   color: var(--accent);
 }
+
+/* La tuile d'un SERVICE (DECISIONS, « Les logos des partenaires »,
+ * 03/11/2026). HORS RELEVÉ. Même gabarit que la tuile d'icône (40×40, même
+ * filet), mais sur papier blanc : la marque de l'éditeur garde ses couleurs,
+ * le fond indigo pâle les aurait salies. Le logo occupe 60 % de la tuile,
+ * l'air autour est celui des icônes tracées. Une icône d'application à fond
+ * plein (Henrri) prend toute la tuile : un carré coloré dans un carré blanc
+ * se lirait comme un cadre de trop. */
+.zv-icon-tile--logo {
+  overflow: hidden;
+  border-color: var(--line);
+  background: var(--white);
+}
+
+.zv-icon-tile--logo img {
+  display: block;
+  width: 60%;
+  height: 60%;
+  object-fit: contain;
+}
+
+/* À fond plein, le filet ferait un cadre autour du cadre de la marque. */
+.zv-icon-tile--logo-plein {
+  border-color: transparent;
+}
+
+.zv-icon-tile--logo-plein img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/src/tokens.css

@@ -107,6 +107,9 @@
   --r-pill: 0;
   --r-panel: 0;
   --r-card: 0;
+  /* L'interrupteur : carré ici, en gélule sous `zv-arrondi` (03/11/2026). */
+  --r-switch: 0;
+  --r-switch-knob: 0;
 
   /* Ombres */
   --shadow-card: 0 2px 10px rgba(11, 16, 32, 0.05);
@@ -183,18 +186,27 @@
  * lui seul. `zv-vif` remet un élément au carré dans une zone arrondie.
  *
  * Légèrement, et c'est voulu : à peu près la moitié du relevé d'avant le
- * 25/08. Le rond de forme (pastille, radio, interrupteur) n'en dépend pas. */
+ * 25/08. Le rond de forme (pastille, radio) n'en dépend pas.
+ *
+ * L'interrupteur, lui, en dépend depuis le 03/11/2026 (DECISIONS,
+ * « L'interrupteur suit l'option arrondie ») : carré en angle vif, piste en
+ * gélule et bouton rond sous `zv-arrondi`. Deux tokens à part, parce qu'un
+ * rayon de 3 px sur une piste de 20 px ne se lit ni carré ni rond. */
 .zv-arrondi {
   --r-btn: 4px;
   --r-pill: 3px;
   --r-panel: 6px;
   --r-card: 8px;
+  --r-switch: 999px;
+  --r-switch-knob: 50%;
 }
 .zv-vif {
   --r-btn: 0;
   --r-pill: 0;
   --r-panel: 0;
   --r-card: 0;
+  --r-switch: 0;
+  --r-switch-knob: 0;
 }
 /* L'enveloppe `Angles` : elle ne porte que les tokens, sans ajouter de
  * boîte à la mise en page (l'héritage passe par l'arbre, pas par la boîte). */

package/tokens/index.js

@@ -122,6 +122,9 @@ export const rayons = {
   pill: '0',
   panel: '0',
   card: '0',
+  /** L'interrupteur, piste et bouton : carrés ici, en gélule sous `zv-arrondi` (03/11/2026). */
+  switch: '0',
+  switchKnob: '0',
 }
 
 export const ombres = {