@hgdc/ui 0.27.0 → 0.29.0

package/README.md

@@ -31,27 +31,34 @@ Un sous-chemin par composant, sans fichier d'index. Les primitives viennent tout
 | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | `@hgdc/ui/styles.css`      | Jetons OKLCH, thèmes (`.dark` sur `<html>`), variante `rail:`, polices, utilitaires `surface`, `pressable`, `skeleton-pulse`… |
 | `@hgdc/ui/theme`           | `ThemeProvider`, `useTheme`, `themeInitScript` (dans le `<head>`, contre le flash de thème)                                   |
+| `@hgdc/ui/theme-switch`    | `ThemeSwitch` : Système, Clair, Sombre en trois icônes ; déjà dans `AccountMenu`, à poser seul ailleurs                       |
 | `@hgdc/ui/cn`              | `cn()` (clsx + tailwind-merge)                                                                                                |
 | `@hgdc/ui/use-media-query` | `useMediaQuery`, `useIsMobile`                                                                                                |
 | `@hgdc/ui/floating`        | Classes des surfaces flottantes                                                                                               |
 
+Sur écran tactile (pointeur grossier), les cibles font 44 px (variante `coarse:`, classes `touch-target` et `touch-field`) et les champs 16 px, pour qu'iOS ne zoome pas à la saisie ; `ResourceItem` et la barre du haut d'`AppShell` passent à la ligne sur un écran étroit ou à texte agrandi.
+
+Avatars à initiales : `<AvatarFallback colorKey={user.email}>HG</AvatarFallback>` prend une des sept teintes des icônes des produits (`--avatar-1` à `--avatar-7`), stable pour une même adresse, initiales à 4,5:1 au moins en clair et en sombre ; la photo (`AvatarImage`) reste prioritaire.
+
 Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-menu` `empty` `field` `input` `input-otp` `label` `segmented-control` `select` `separator` `sonner` `spinner` `switch` `textarea`.
 
 ## Coque des consoles
 
-| Import         | Exemple                                                                                                                                                                                                                         |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `app-shell`    | `<AppShell product="mail" organization={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>} onSearch={() => setOpen(true)}>`                                                     |
-|                | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                                                                               |
-| `org-switcher` | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                                                                                     |
-| `account-menu` | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché                                                                        |
-| `command-menu` | `<CommandMenu groups={[{ label: "Aller à", items }, { label: "Créer", items }, { label: "Changer", items }]} />` (`Ctrl+K`), `<CommandMenuButton compact="mobile" …/>`                                                          |
-| `products`     | `HGDC_PRODUCTS` (mot, nom, sous-domaine, phrase, pastille `badge`, icône, état, `entryHref`), `HGDC_ACCOUNT`, `productMenuEntries({ current: "Mail" })` : chaque produit du menu pointe vers son entrée `/auth/hgdc` (ADR 0010) |
-| `kbd`          | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`                                                                                                                                                                              |
-| `page-header`  | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />`                                                                    |
-| `page-header`  | `<Page title="Réglages">…</Page>` (colonne de lecture de 768 px), `<Page title="Projets" wide actions={…}>…</Page>` (tableaux, listes, tableaux de bord)                                                                        |
-| `member-item`  | `<ResourceList><MemberItem name={m.name} email={m.email} orgRole={m.role} isMe={m.isMe} /></ResourceList>` : avatar à initiales, « (toi) », `RoleBadge`                                                                         |
-| `initials`     | `initials("Test vérif")` donne « TV » : la même règle pour une personne et une organisation (`OrgMark`, `AccountMenu`, `MemberItem`)                                                                                            |
+| Import             | Exemple                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `app-shell`        | `<AppShell product="mail" organization={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} links={{ documentation: "/docs", settings: { render: <Link to="/settings" /> } }} account={<AccountMenu …/>} onSearch={() => setOpen(true)} assistant={{ open, onOpenChange: setOpen, panel: <Conversation /> }}>` : Documentation, Réglages et État du service (la page de statut par défaut) juste au-dessus du compte ; bouton Assistant à côté de la recherche, panneau dans une colonne à droite (la page se rétrécit, vue dédiée sous 1280 px, Échap ferme, `shortcut: "j"` facultatif). `sidebarFooter` est déprécié |
+|                    | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `org-switcher`     | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `project-switcher` | `<ProjectSwitcher projects={projects} activeId={project?.id} activeName={params.project} allHref="/o/acme" createHref="/o/acme/new" renderLink={(href) => <Link to={href} />} />` : projet actif ou « Tous les projets », marque du projet (`ProjectMark`), « Nouveau projet »                                                                                                                                                                                                                                                                                                                                                        |
+| `account-menu`     | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché. Dans l'ordre : identité, Profil, Sécurité, Thème (Système, Clair, Sombre, `ThemeSwitch`), entrées du produit, Se déconnecter. Ni « État du service » ni raccourcis : la coque pose le premier au-dessus du compte, l'aide garde sa touche `?`                                                                                                                                                                                                                               |
+| `command-menu`     | `<CommandMenu groups={[{ label: "Aller à", items }, { label: "Créer", items }, { label: "Changer", items }]} />` (`Ctrl+K`), `<CommandMenuButton compact="mobile" …/>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `products`         | `HGDC_PRODUCTS` (mot, nom, sous-domaine, phrase, pastille `badge`, icône, état, `entryHref`), `HGDC_ACCOUNT`, `productMenuEntries({ current: "Mail" })` : chaque produit du menu pointe vers son entrée `/auth/hgdc` (ADR 0010)                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `service-status`   | Bandeau d'incident ou de maintenance posé par `AppShell` en tête du contenu (ADR 0018) : `useServiceStatus(pageUrl)`, `ServiceStatusBanner`. `statusPage={false}` pour ne rien lire                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `kbd`              | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `page-header`      | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />`                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `page-header`      | `<Page title="Réglages">…</Page>` (colonne de lecture de 768 px), `<Page title="Projets" wide actions={…}>…</Page>` (tableaux, listes, tableaux de bord)                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `member-item`      | `<ResourceList><MemberItem name={m.name} email={m.email} orgRole={m.role} isMe={m.isMe} /></ResourceList>` : avatar à initiales, « (toi) », `RoleBadge`                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `initials`         | `initials("Test vérif")` donne « TV » : la même règle pour une personne et une organisation (`OrgMark`, `AccountMenu`, `MemberItem`) ; `avatarTone(email)` donne la teinte stable (1 à 7) de l'avatar                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
 Le menu « Produits » et la palette (`badge` d'une commande) montrent la pastille de chaque produit.
 
@@ -112,6 +119,8 @@ Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisati
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `filter-bar`         | `<FilterBar search={{ value: q, onChange }} filters={[{ key: "status", label: "Statut", options }]} values={{ status }} onFilterChange={…} onReset={…} />`                                                   |
 | `data-table`         | `<DataTable label="Déploiements" rows={rows} columns={columns} rowKey={(d) => d.id} sort={sort} onSortChange={…} filters={<FilterBar …/>} loadMore={…} />`                                                   |
+| `cursor-pages`       | `const pages = useCursorPages(JSON.stringify(filters))` : pile de curseurs, 200 lignes par page (`PAGE_SIZE`), retour à la page 1 quand la clé change, `pages.paginationOpts` pour `paginate` de Convex      |
+| `cursor-pager`       | `<CursorPager pages={pages} result={result} scrollTarget={topRef} />` : Précédent, Suivant, « Lignes 201 à 400 », chargement sans saut ; règle des grandes listes dans le guide                              |
 | `board`              | `<Board label="Tableau du projet" columns={[{ id, label, title, cards }]} cardKey={(c) => c.id} cardLabel={(c) => c.title} renderCard={(c, { handle }) => …} onMove={…} />` : poignée souris, doigt, clavier |
 | `dns-record-table`   | `<DnsRecordTable records={[{ type: "MX", name: "send", value, priority: 10, status: "pending" }]} />` (Vérifié, En attente, Échec, À ajouter)                                                                |
 | `log-viewer`         | `<LogViewer lines={[{ id, time, level: "error", message }]} live />` : niveaux, recherche, « Suivre », copie ; seules les lignes visibles sont rendues                                                       |

package/dist/account-menu.d.ts

@@ -20,21 +20,29 @@ export type AccountUser = {
     image?: string | null;
 };
 /**
- * Le menu du compte, en bas de la barre latérale : profil, sécurité, choix du thème en trois icônes, raccourcis, autres
- * produits HGDC, déconnexion. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
+ * Le menu du compte, en bas de la barre latérale (`account` d'`AppShell`). Dans cet ordre :
+ * l'identité (avatar, nom, adresse), Profil, Sécurité, Thème (Système, Clair, Sombre, dans le
+ * menu), les entrées propres au produit, les autres produits (sur téléphone), puis « Se
+ * déconnecter », à part. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
  *
+ * Documentation, Réglages et État du service ne sont pas ici : la coque les pose au-dessus du
+ * compte (`links` d'`AppShell`). L'aide des raccourcis garde sa touche `?`, sans entrée de menu.
+ *
  * « Produits » (masquée au-delà de `lg` dans une coque qui affiche la barre des produits, où ils
  * sont déjà ; gardée sur téléphone) liste par défaut Account et les produits ouverts du catalogue
  * (`productMenuEntries`, `@hgdc/ui/products`), avec `product` coché. `products` remplace cette
  * liste ; `products={[]}` la retire.
  */
-export declare function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, statusPage, children, variant, }: {
+export declare function AccountMenu({ user, onProfile, onSecurity, onSignOut, products: productsProp, product: currentProduct, accountHref, children, variant, }: {
     user: AccountUser;
     onProfile?: () => void;
     onSecurity?: () => void;
-    /** Ouvre l'aide des raccourcis clavier. */
+    /**
+     * @deprecated Plus d'entrée « Raccourcis clavier » dans le menu (0.29) : l'aide s'ouvre par la
+     * touche `?`, que le produit garde. Ignoré.
+     */
     onShortcuts?: () => void;
     onSignOut: () => void;
     /** Les produits de la famille, pour passer de l'un à l'autre. Le catalogue du kit par défaut. */
@@ -44,12 +52,11 @@ export declare function AccountMenu({ user, onProfile, onSecurity, onShortcuts,
     /** Adresse d'Account dans la liste par défaut (un Account local en développement). */
     accountHref?: string;
     /**
-     * Page de statut du produit, entrée « État du service » : celle d'`AppShell` par défaut (son
-     * `statusPage`, sinon `https://status.hgdc.ch/<produit>`), `false` pour la retirer. Hors de la
-     * coque, sans adresse donnée, pas d'entrée.
+     * @deprecated « État du service » a quitté le menu (0.29) : la coque le pose au-dessus du compte
+     * (`links.status` d'`AppShell`, la page de statut de la coque par défaut). Ignoré.
      */
     statusPage?: string | false;
-    /** Entrées propres au produit (« Administration »), après le profil. */
+    /** Entrées propres au produit (« Administration »), après le thème. */
     children?: ReactNode;
     variant?: "row" | "avatar";
 }): React.JSX.Element;

package/dist/account-menu.js

@@ -1,7 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Activity01Icon from "@hugeicons/core-free-icons/Activity01Icon";
 import DashboardSquare01Icon from "@hugeicons/core-free-icons/DashboardSquare01Icon";
-import KeyboardIcon from "@hugeicons/core-free-icons/KeyboardIcon";
 import Logout01Icon from "@hugeicons/core-free-icons/Logout01Icon";
 import SecurityLockIcon from "@hugeicons/core-free-icons/SecurityLockIcon";
 import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
@@ -9,31 +7,38 @@ import UserIcon from "@hugeicons/core-free-icons/UserIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { initials } from "./initials.js";
 import { MENU_LINK_ITEM } from "./org-switcher.js";
 import { ProductBadge } from "./product-badge.js";
 import { productMenuEntries } from "./products.js";
-import { useLeaveOnClick, useProductRailShown, useStatusPage } from "./shell-placement.js";
+import { useLeaveOnClick, useProductRailShown } from "./shell-placement.js";
 import { ThemeSwitch } from "./theme-switch.js";
+/** L'avatar du compte : la photo, sinon les initiales sur la teinte stable de l'adresse. */
+function AccountAvatar({ user, size }) {
+    return (_jsxs(Avatar, { size: size, children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { colorKey: user.email || user.name, className: "text-xs font-semibold uppercase", children: initials(user.name, user.email) })] }));
+}
 /**
- * Le menu du compte, en bas de la barre latérale : profil, sécurité, choix du thème en trois icônes, raccourcis, autres
- * produits HGDC, déconnexion. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
+ * Le menu du compte, en bas de la barre latérale (`account` d'`AppShell`). Dans cet ordre :
+ * l'identité (avatar, nom, adresse), Profil, Sécurité, Thème (Système, Clair, Sombre, dans le
+ * menu), les entrées propres au produit, les autres produits (sur téléphone), puis « Se
+ * déconnecter », à part. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
  *
+ * Documentation, Réglages et État du service ne sont pas ici : la coque les pose au-dessus du
+ * compte (`links` d'`AppShell`). L'aide des raccourcis garde sa touche `?`, sans entrée de menu.
+ *
  * « Produits » (masquée au-delà de `lg` dans une coque qui affiche la barre des produits, où ils
  * sont déjà ; gardée sur téléphone) liste par défaut Account et les produits ouverts du catalogue
  * (`productMenuEntries`, `@hgdc/ui/products`), avec `product` coché. `products` remplace cette
  * liste ; `products={[]}` la retire.
  */
-export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, statusPage, children, variant = "row", }) {
+export function AccountMenu({ user, onProfile, onSecurity, onSignOut, products: productsProp, product: currentProduct, accountHref, children, variant = "row", }) {
     const products = productsProp ?? productMenuEntries({ current: currentProduct, accountHref });
     const railShown = useProductRailShown();
-    const shellStatusPage = useStatusPage();
-    const statusPageUrl = statusPage === false ? null : (statusPage ?? shellStatusPage);
     const leaveOnClick = useLeaveOnClick();
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsxs(Avatar, { children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold uppercase", children: initials(user.name, user.email) })] }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-64", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, children, _jsx(ThemeSwitch, {}), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, statusPageUrl ? (_jsxs(MenuPrimitive.LinkItem, { href: statusPageUrl, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: Activity01Icon, "aria-hidden": true }), "\u00C9tat du service"] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: railShown ? "lg:hidden" : undefined }), _jsxs(DropdownMenuGroup, { className: railShown ? "lg:hidden" : undefined, children: [_jsx(DropdownMenuLabel, { children: "Produits" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, onClick: leaveOnClick, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsx(AccountAvatar, { user: user }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-72", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { className: "flex items-center gap-2.5 py-2", children: [_jsx(AccountAvatar, { user: user }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, _jsx(ThemeSwitch, {}), children ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), children] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: railShown ? "lg:hidden" : undefined }), _jsxs(DropdownMenuGroup, { className: railShown ? "lg:hidden" : undefined, children: [_jsx(DropdownMenuLabel, { children: "Produits" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, onClick: leaveOnClick, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
 }
 function ProductMenuIcon({ product }) {
     if (product.badge)

package/dist/app-shell.d.ts

@@ -33,7 +33,45 @@ export declare function SidebarNavItem({ icon, label, active, href, render, }: {
     /** Lien du routeur : `render={<Link to="…" />}`. */
     render?: React.ReactElement;
 }): React.JSX.Element;
-export declare function AppShell({ product, organization, productRail, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, contentKey, navigating, mainClassName, statusPage, }: {
+/**
+ * Un accès commun de la barre : une adresse, ou un lien du routeur (`{ render: <Link to="/settings" /> }`,
+ * dont le `data-status="active"` marque la page ouverte), ou une adresse avec `active`.
+ */
+export type ShellLink = string | {
+    href?: string;
+    render?: React.ReactElement;
+    active?: boolean;
+};
+/** Les trois accès que la coque pose juste au-dessus du compte, toujours dans cet ordre. */
+export type AppShellLinks = {
+    /** Documentation du produit. */
+    documentation?: ShellLink;
+    /** Réglages du produit ou de l'organisation. */
+    settings?: ShellLink;
+    /** État du service : la page de statut de la coque (`statusPage`) par défaut, `false` pour le retirer. */
+    status?: ShellLink | false;
+};
+/**
+ * L'assistant IA du produit. La coque pose son bouton juste à côté de la recherche et l'ouvre dans
+ * une colonne à droite de la page, sur le fond de l'application : la page se rétrécit et se
+ * réorganise, jamais recouverte. Sous 1280 px, là où les deux ne tiennent plus côte à côte, une
+ * vue dédiée plein écran avec « Retour à la page ». La page reste montée dans les deux cas, et le
+ * panneau, une fois ouvert, aussi : rien ne se perd en fermant ou en changeant de largeur.
+ */
+export type AppShellAssistant = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Le corps de l'assistant : conversation et saisie (`@hgdc/ui/assistant-chat`). La coque pose le
+     * titre, la fermeture et le retour à la page ; le panneau occupe la hauteur restante et défile.
+     */
+    panel: ReactNode;
+    /** Nom du bouton et titre du panneau : « Assistant » par défaut. */
+    label?: string;
+    /** Lettre du raccourci `Ctrl` (`⌘`) + lettre qui ouvre et ferme l'assistant (`"j"`). Aucun par défaut. */
+    shortcut?: string;
+};
+export declare function AppShell({ product, organization, productRail, accountHref, nav, links, account, sidebarFooter, header, onSearch, searchLabel, assistant, children, contentKey, navigating, mainClassName, statusPage, }: {
     /** Le produit affiché (`"host"`) : sa marque en haut de la barre, « vous êtes ici » dans la barre des produits. */
     product: FamilyProduct;
     /** `OrgSwitcher` : en haut de la barre des produits, en haut du tiroir sur téléphone. */
@@ -47,7 +85,21 @@ export declare function AppShell({ product, organization, productRail, accountHr
     accountHref?: string | undefined;
     /** `SidebarNav` et ses `SidebarNavItem`. */
     nav: ReactNode;
-    /** Bas de la barre : liens secondaires (Docs, Paramètres) et `AccountMenu`. */
+    /**
+     * Documentation, Réglages et État du service, juste au-dessus du compte, dans cet ordre, chacun
+     * optionnel (État du service suit `statusPage` par défaut).
+     */
+    links?: AppShellLinks;
+    /** `AccountMenu`, tout en bas de la barre latérale (et du tiroir sur téléphone). */
+    account?: ReactNode;
+    /**
+     * Avec `account` : entrées propres au produit, posées au-dessus des accès communs.
+     *
+     * @deprecated Comme bas de barre complet (liens et `AccountMenu`), remplacé par `links` et
+     * `account` (0.29). Sans `account`, il est rendu tel quel sous les accès communs, pour ne rien
+     * casser : déplacer `AccountMenu` dans `account`, Docs et Réglages dans `links`, et retirer
+     * l'ancien lien vers l'assistant (`assistant`).
+     */
     sidebarFooter?: ReactNode;
     /**
      * Barre du haut, à gauche, après la marque sur téléphone : le contexte de la page (sélecteur de
@@ -61,6 +113,8 @@ export declare function AppShell({ product, organization, productRail, accountHr
     onSearch?: () => void;
     /** Texte du champ de recherche : « Rechercher » par défaut. */
     searchLabel?: string;
+    /** L'assistant IA : son bouton à côté de la recherche, son panneau à droite de la page. */
+    assistant?: AppShellAssistant;
     children: ReactNode;
     /**
      * Clé de la page affichée (le chemin, `location.pathname`) : la zone de contenu devient une
@@ -84,7 +138,7 @@ export declare function AppShell({ product, organization, productRail, accountHr
     /**
      * Page de statut du produit, dont le bandeau d'état se pose en tête du contenu (ADR 0018) :
      * `https://status.hgdc.ch/<produit>` par défaut, une autre adresse (prévisualisation sur une page
-     * de test), ou `false` pour ne rien lire. Le menu du compte en tire son entrée « État du service ».
+     * de test), ou `false` pour ne rien lire. L'accès « État du service », au-dessus du compte, y mène.
      */
     statusPage?: string | false | undefined;
 }): React.JSX.Element;

package/dist/app-shell.js

@@ -1,10 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Activity01Icon from "@hugeicons/core-free-icons/Activity01Icon";
+import AiMagicIcon from "@hugeicons/core-free-icons/AiMagicIcon";
+import ArrowLeft01Icon from "@hugeicons/core-free-icons/ArrowLeft01Icon";
+import BookOpen01Icon from "@hugeicons/core-free-icons/BookOpen01Icon";
+import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
 import Menu01Icon from "@hugeicons/core-free-icons/Menu01Icon";
 import PanelLeftCloseIcon from "@hugeicons/core-free-icons/PanelLeftCloseIcon";
 import PanelLeftOpenIcon from "@hugeicons/core-free-icons/PanelLeftOpenIcon";
+import Settings01Icon from "@hugeicons/core-free-icons/Settings01Icon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { useRender } from "@base-ui/react/use-render";
-import { createContext, Suspense, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { createContext, Suspense, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
 import { CommandMenuButton } from "./command-menu.js";
 import { Drawer, DrawerContent, DrawerTitle } from "./drawer.js";
 import { FamilyLoaderHost, FamilyLoaderRootContext } from "./family-loader.js";
@@ -18,6 +24,7 @@ import { ProductRailShownContext, ShellLeaveContext, StatusPageContext } from ".
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { cn } from "./cn.js";
 import { ServiceStatus, statusPageUrlFor } from "./service-status.js";
+import { useMediaQuery } from "./use-media-query.js";
 // ── Rail : la barre latérale réduite aux icônes, mémorisée par navigateur ──────────────
 const RAIL_KEY = "sidebar";
 const RAIL_EVENT = "sidebarchange";
@@ -99,6 +106,104 @@ export function SidebarNavItem({ icon, label, active, href, render, }) {
     });
     return (_jsx("li", { children: _jsxs(Tooltip, { disabled: !rail, children: [_jsx(TooltipTrigger, { render: link }), _jsx(TooltipContent, { side: "right", children: label })] }) }));
 }
+const COMMON_LINKS = [
+    { key: "documentation", label: "Documentation", icon: BookOpen01Icon },
+    { key: "settings", label: "Réglages", icon: Settings01Icon },
+    { key: "status", label: "État du service", icon: Activity01Icon },
+];
+function ShellCommonLinks({ links, statusPageUrl, }) {
+    const resolved = {
+        documentation: links.documentation,
+        settings: links.settings,
+        status: links.status === false ? undefined : (links.status ?? statusPageUrl ?? undefined),
+    };
+    const items = COMMON_LINKS.flatMap(({ key, label, icon }) => {
+        const link = resolved[key];
+        if (link === undefined)
+            return [];
+        const props = typeof link === "string" ? { href: link } : link;
+        return [
+            _jsx(SidebarNavItem, { icon: icon, label: label, ...(props.href !== undefined ? { href: props.href } : {}), ...(props.render !== undefined ? { render: props.render } : {}), ...(props.active !== undefined ? { active: props.active } : {}) }, key),
+        ];
+    });
+    if (!items.length)
+        return null;
+    return (_jsx("nav", { "aria-label": "Acc\u00E8s communs", children: _jsx("ul", { "data-slot": "app-shell-links", className: "grid gap-0.5", children: items }) }));
+}
+/** Largeur à partir de laquelle la page et l'assistant tiennent côte à côte (`xl`). */
+const ASSISTANT_SIDE_BY_SIDE = "(min-width: 80rem)";
+const FOCUSABLE = 'textarea, input, [contenteditable="true"], [autofocus]';
+function AssistantButton({ assistant, panelId, buttonRef, }) {
+    const label = assistant.label ?? "Assistant";
+    const letter = assistant.shortcut?.toUpperCase();
+    return (_jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { render: _jsx("button", { ref: buttonRef, type: "button", "data-slot": "app-shell-assistant-button", "aria-expanded": assistant.open, "aria-controls": panelId, ...(letter ? { "aria-keyshortcuts": `Control+${letter} Meta+${letter}` } : {}), onClick: () => assistant.onOpenChange(!assistant.open), className: cn("touch-target flex h-9 shrink-0 items-center gap-2 rounded-xl px-3 text-sm font-medium text-muted-foreground outline-none", "transition-colors duration-(--duration-fast) ease-out hover:bg-foreground/[0.05] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", "aria-expanded:bg-foreground/[0.08] aria-expanded:text-foreground", "max-lg:w-9 max-lg:justify-center max-lg:px-0") }), children: [_jsx(HugeiconsIcon, { icon: AiMagicIcon, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem] shrink-0" }), _jsx("span", { className: "max-lg:sr-only", children: label })] }), _jsx(TooltipContent, { children: _jsxs("span", { className: "flex items-center gap-2", children: [assistant.open ? `Fermer ${label.toLocaleLowerCase("fr-CH")}` : label, letter ? (_jsxs(KbdGroup, { children: [_jsx(Kbd, { children: isApplePlatform() ? "⌘" : "Ctrl" }), _jsx(Kbd, { children: letter })] })) : null] }) })] }));
+}
+/** `Ctrl` (`⌘`) + la lettre de l'assistant : l'ouvre ou le ferme, où que soit le focus. */
+function useAssistantShortcut(assistant) {
+    const latest = useRef(assistant);
+    useEffect(() => {
+        latest.current = assistant;
+    });
+    const letter = assistant?.shortcut?.toLowerCase();
+    useEffect(() => {
+        if (!letter)
+            return undefined;
+        const onKey = (event) => {
+            if (event.key.toLowerCase() !== letter || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey)
+                return;
+            const current = latest.current;
+            if (!current)
+                return;
+            event.preventDefault();
+            current.onOpenChange(!current.open);
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [letter]);
+}
+function AssistantPanel({ assistant, panelId, wide, openAtShellMount, buttonRef, }) {
+    const { open, onOpenChange } = assistant;
+    const label = assistant.label ?? "Assistant";
+    const titleId = useId();
+    const panelRef = useRef(null);
+    // Ouvert dès le premier rendu de la coque (état restauré) : le focus reste où le navigateur le met.
+    const wasOpen = useRef(openAtShellMount);
+    // Ouvert : le focus entre dans le panneau (sa saisie, sinon le panneau). Fermé : il revient au
+    // bouton, s'il était dans le panneau ou perdu sur la page.
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (open && !wasOpen.current && panel && !panel.contains(document.activeElement)) {
+            const target = panel.querySelector(FOCUSABLE) ?? panel;
+            target.focus({ preventScroll: true });
+        }
+        if (!open && wasOpen.current) {
+            const active = document.activeElement;
+            if (!active || active === document.body || panel?.contains(active))
+                buttonRef.current?.focus();
+        }
+        wasOpen.current = open;
+    }, [open, buttonRef]);
+    // Échap, le focus dans le panneau : il se ferme (sauf si un élément du panneau l'a déjà traité).
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (!open || !panel)
+            return undefined;
+        const onKey = (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented)
+                return;
+            event.preventDefault();
+            onOpenChange(false);
+        };
+        panel.addEventListener("keydown", onKey);
+        return () => panel.removeEventListener("keydown", onKey);
+    }, [open, onOpenChange]);
+    const close = () => onOpenChange(false);
+    return (_jsx("section", { ref: panelRef, id: panelId, tabIndex: -1, "data-slot": "app-shell-assistant", "data-open": open ? "" : undefined, "aria-labelledby": titleId, inert: !open || undefined, ...(open && !wide ? { role: "dialog", "aria-modal": true } : {}), className: cn("outline-none", 
+        // Vue dédiée, sous 1280 px : plein écran, la page reste montée dessous.
+        "hidden data-open:max-xl:fixed data-open:max-xl:inset-0 data-open:max-xl:z-40 data-open:max-xl:flex data-open:max-xl:flex-col data-open:max-xl:bg-background", "data-open:max-xl:pt-[env(safe-area-inset-top,0px)] data-open:max-xl:soft-in motion-reduce:animate-none", 
+        // Côte à côte : une colonne de la grille, qui s'ouvre en largeur ; la page se réorganise.
+        "xl:invisible xl:flex xl:w-0 xl:flex-col xl:overflow-hidden xl:transition-[width,visibility] xl:duration-(--duration-slow) xl:ease-ios motion-reduce:transition-none", "xl:data-open:visible xl:data-open:w-[26rem] 2xl:data-open:w-[28rem]"), children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col xl:w-[26rem] xl:py-2 xl:pr-2 2xl:w-[28rem]", children: [_jsxs("div", { className: "flex min-h-14 shrink-0 items-center gap-1 border-b border-foreground/5 px-2 sm:px-4 xl:border-0 xl:pr-1 xl:pl-3", children: [_jsxs("button", { type: "button", onClick: close, className: "touch-target flex h-9 shrink-0 items-center gap-1.5 rounded-xl pr-3 pl-2 text-sm font-medium text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 xl:hidden", children: [_jsx(HugeiconsIcon, { icon: ArrowLeft01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-4" }), "Retour \u00E0 la page"] }), _jsxs("h2", { id: titleId, className: "flex min-w-0 flex-1 items-center gap-2 truncate font-heading text-[0.9375rem] font-semibold max-xl:justify-end max-xl:pr-2", children: [_jsx(HugeiconsIcon, { icon: AiMagicIcon, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem] shrink-0" }), label] }), _jsx("button", { type: "button", onClick: close, "aria-label": `Fermer ${label.toLocaleLowerCase("fr-CH")}`, className: "touch-target grid size-9 shrink-0 place-items-center rounded-xl text-muted-foreground outline-none hover:bg-shell-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 max-xl:hidden", children: _jsx(HugeiconsIcon, { icon: Cancel01Icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-[1.125rem]" }) })] }), _jsx("div", { "data-slot": "app-shell-assistant-body", className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: assistant.panel })] }) }));
+}
 // ── Coque ─────────────────────────────────────────────────────────────────────────────
 // Les noms de Hugeicons disent l'état du panneau, pas le geste : « Open » dessine la flèche vers la
 // gauche (réduire), « Close » vers la droite (déplier).
@@ -174,7 +279,7 @@ function useContentLoading({ navigating, pending }) {
     }, [active, visible]);
     return visible;
 }
-export function AppShell({ product, organization, productRail = true, accountHref, nav, sidebarFooter, header, onSearch, searchLabel, children, contentKey, navigating = false, mainClassName, statusPage, }) {
+export function AppShell({ product, organization, productRail = true, accountHref, nav, links, account, sidebarFooter, header, onSearch, searchLabel, assistant, children, contentKey, navigating = false, mainClassName, statusPage, }) {
     const [menuOpen, setMenuOpen] = useState(false);
     // Barre des produits élargie : la barre latérale se plie le temps du survol (ADR 0011).
     const [railPeek, setRailPeek] = useState(false);
@@ -213,5 +318,18 @@ export function AppShell({ product, organization, productRail = true, accountHre
         if (loading && contentRef.current)
             contentRef.current.scrollTop = 0;
     }, [loading]);
-    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false) }, children: _jsx(ProductRailShownContext, { value: productRail, children: _jsx(ShellLeaveContext, { value: leave, children: _jsx(StatusPageContext, { value: statusPageUrl, children: _jsxs("div", { "data-slot": "app-shell", "data-rail-peek": railPeek ? "" : undefined, "data-product-rail": productRail ? "" : undefined, "data-loading": loading ? "" : undefined, "data-hydrated": hydrated ? "" : undefined, className: cn("min-h-dvh lg:grid lg:h-dvh lg:bg-shell", productRail ? "lg:grid-cols-[auto_auto_minmax(0,1fr)]" : "lg:grid-cols-[auto_minmax(0,1fr)]"), children: [_jsx("a", { href: "#contenu", className: "sr-only z-50 rounded-xl bg-background px-4 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:ring-2 focus:ring-ring", children: "Aller au contenu" }), productRail ? (_jsx(ProductRail, { current: product, organization: organization, accountHref: accountHref, onExpandedChange: setRailPeek })) : null, _jsxs("aside", { "aria-label": "Barre lat\u00E9rale", className: "group/sidebar hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none lg:flex lg:w-64 lg:flex-col lg:rail:w-16", children: [_jsx(SidebarHead, { product: product }), !productRail && organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null, nav, sidebarFooter ? _jsx("div", { className: "grid gap-0.5 px-3 pt-1 pb-3", children: sidebarFooter }) : null] }), _jsx("div", { className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { ref: contentRef, className: "relative flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background lg:[scrollbar-gutter:stable]", children: [_jsxs("header", { className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex min-h-14 shrink-0 flex-wrap items-center gap-x-1 gap-y-1 border-b border-foreground/5 bg-background px-2 py-1.5 sm:px-4 lg:top-0", children: [_jsx("button", { type: "button", onClick: () => setMenuOpen(true), "aria-label": "Ouvrir le menu", className: "touch-target grid size-10 shrink-0 place-items-center rounded-xl text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 lg:hidden", children: _jsx(HugeiconsIcon, { icon: Menu01Icon, "aria-hidden": true, className: "size-5" }) }), _jsxs("div", { "data-slot": "app-shell-brand", className: "flex shrink-0 items-center gap-2 pr-1 lg:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: "font-heading text-[0.9375rem] font-semibold", children: productName(product) })] }), _jsx("div", { className: cn("flex min-w-0 items-center gap-2", header ? "flex-[1_1_7rem]" : "flex-1"), children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null] }), _jsx("div", { "data-slot": "app-shell-loading", "aria-hidden": !loading, className: CONTENT_LOADING_LAYER, children: loading ? (_jsx("span", { role: "status", className: "sr-only", children: "Chargement\u2026" })) : null }), _jsxs("main", { id: "contenu", tabIndex: -1, "aria-busy": loading ? true : undefined, inert: loading || undefined, className: cn("mx-auto w-full max-w-6xl flex-1 px-4 pt-6 pb-16 outline-none sm:px-6 lg:px-10 lg:pt-8", mainClassName), children: [_jsx(ServiceStatus, { pageUrl: statusPageUrl, className: "mb-6" }), _jsx(ContentLoadingContext, { value: registerPagePending, children: contentKey === undefined ? (children) : (_jsx(Suspense, { fallback: _jsx(PagePending, {}), children: children }, contentKey)) })] })] }) }), hasRoot ? null : _jsx(FamilyLoaderHost, {}), _jsx(Drawer, { side: "bottom", open: menuOpen, onOpenChange: setMenuOpen, children: _jsxs(DrawerContent, { className: "lg:hidden", children: [_jsx(DrawerTitle, { className: "sr-only", children: "Menu" }), organization ? _jsx("div", { className: "px-3 pt-1", children: organization }) : null, nav, sidebarFooter ? (_jsx("div", { className: "grid gap-0.5 border-t border-foreground/5 px-3 pt-2 pb-[max(env(safe-area-inset-bottom),0.75rem)]", children: sidebarFooter })) : null] }) })] }) }) }) }) }));
+    // Assistant : monté à la première ouverture, puis gardé (sa conversation survit à la fermeture).
+    const assistantOpen = assistant?.open ?? false;
+    const [assistantMounted, setAssistantMounted] = useState(assistantOpen);
+    const [assistantOpenAtMount] = useState(assistantOpen);
+    if (assistantOpen && !assistantMounted)
+        setAssistantMounted(true);
+    const wide = useMediaQuery(ASSISTANT_SIDE_BY_SIDE);
+    // Vue dédiée (sous 1280 px) : la page, dessous, ne reçoit ni focus ni clic.
+    const pageBlocked = assistantOpen && !wide;
+    const assistantPanelId = useId();
+    const assistantButtonRef = useRef(null);
+    useAssistantShortcut(assistant);
+    const footer = (_jsxs(_Fragment, { children: [account !== undefined ? sidebarFooter : null, _jsx(ShellCommonLinks, { links: links ?? {}, statusPageUrl: statusPageUrl }), account ?? sidebarFooter] }));
+    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false) }, children: _jsx(ProductRailShownContext, { value: productRail, children: _jsx(ShellLeaveContext, { value: leave, children: _jsx(StatusPageContext, { value: statusPageUrl, children: _jsxs("div", { "data-slot": "app-shell", "data-rail-peek": railPeek ? "" : undefined, "data-product-rail": productRail ? "" : undefined, "data-loading": loading ? "" : undefined, "data-hydrated": hydrated ? "" : undefined, "data-assistant": assistantOpen ? "" : undefined, className: cn("min-h-dvh lg:grid lg:h-dvh lg:bg-shell", productRail ? "lg:grid-cols-[auto_auto_minmax(0,1fr)_auto]" : "lg:grid-cols-[auto_minmax(0,1fr)_auto]"), children: [_jsx("a", { href: "#contenu", className: "sr-only z-50 rounded-xl bg-background px-4 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:ring-2 focus:ring-ring", children: "Aller au contenu" }), productRail ? (_jsx("div", { className: "contents", inert: pageBlocked || undefined, children: _jsx(ProductRail, { current: product, organization: organization, accountHref: accountHref, onExpandedChange: setRailPeek }) })) : null, _jsxs("aside", { "aria-label": "Barre lat\u00E9rale", inert: pageBlocked || undefined, className: "group/sidebar hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none lg:flex lg:w-64 lg:flex-col lg:rail:w-16", children: [_jsx(SidebarHead, { product: product }), !productRail && organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null, nav, _jsx("div", { "data-slot": "app-shell-footer", className: "grid gap-0.5 px-3 pt-1 pb-3 empty:hidden", children: footer })] }), _jsx("div", { inert: pageBlocked || undefined, className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { ref: contentRef, className: "relative flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background lg:[scrollbar-gutter:stable]", children: [_jsxs("header", { className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex min-h-14 shrink-0 flex-wrap items-center gap-x-1 gap-y-1 border-b border-foreground/5 bg-background px-2 py-1.5 sm:px-4 lg:top-0", children: [_jsx("button", { type: "button", onClick: () => setMenuOpen(true), "aria-label": "Ouvrir le menu", className: "touch-target grid size-10 shrink-0 place-items-center rounded-xl text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 lg:hidden", children: _jsx(HugeiconsIcon, { icon: Menu01Icon, "aria-hidden": true, className: "size-5" }) }), _jsxs("div", { "data-slot": "app-shell-brand", className: "flex shrink-0 items-center gap-2 pr-1 lg:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: "font-heading text-[0.9375rem] font-semibold", children: productName(product) })] }), _jsx("div", { className: cn("flex min-w-0 items-center gap-2", header ? "flex-[1_1_7rem]" : "flex-1"), children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null, assistant ? (_jsx(AssistantButton, { assistant: assistant, panelId: assistantPanelId, buttonRef: assistantButtonRef })) : null] }), _jsx("div", { "data-slot": "app-shell-loading", "aria-hidden": !loading, className: CONTENT_LOADING_LAYER, children: loading ? (_jsx("span", { role: "status", className: "sr-only", children: "Chargement\u2026" })) : null }), _jsxs("main", { id: "contenu", tabIndex: -1, "aria-busy": loading ? true : undefined, inert: loading || undefined, className: cn("mx-auto w-full max-w-6xl flex-1 px-4 pt-6 pb-16 outline-none sm:px-6 lg:px-10 lg:pt-8", mainClassName), children: [_jsx(ServiceStatus, { pageUrl: statusPageUrl, className: "mb-6" }), _jsx(ContentLoadingContext, { value: registerPagePending, children: contentKey === undefined ? (children) : (_jsx(Suspense, { fallback: _jsx(PagePending, {}), children: children }, contentKey)) })] })] }) }), assistant && assistantMounted ? (_jsx(AssistantPanel, { assistant: assistant, panelId: assistantPanelId, wide: wide, openAtShellMount: assistantOpenAtMount, buttonRef: assistantButtonRef })) : null, hasRoot ? null : _jsx(FamilyLoaderHost, {}), _jsx(Drawer, { side: "bottom", open: menuOpen, onOpenChange: setMenuOpen, children: _jsxs(DrawerContent, { className: "lg:hidden", children: [_jsx(DrawerTitle, { className: "sr-only", children: "Menu" }), organization ? _jsx("div", { className: "px-3 pt-1", children: organization }) : null, nav, _jsx("div", { className: "grid gap-0.5 border-t border-foreground/5 px-3 pt-2 pb-[max(env(safe-area-inset-bottom),0.75rem)] empty:hidden", children: footer })] }) })] }) }) }) }) }));
 }

package/dist/avatar.d.ts

@@ -4,7 +4,15 @@ declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Prop
     size?: "default" | "sm" | "lg";
 }): React.JSX.Element;
 declare function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props): React.JSX.Element;
-declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): React.JSX.Element;
+/**
+ * Ce qui s'affiche sans photo (la photo, `AvatarImage`, reste prioritaire). Des initiales en
+ * texte prennent une teinte de la marque, stable : celle de `colorKey` (identifiant ou adresse
+ * e-mail, à préférer, deux homonymes n'ont pas la même couleur), sinon celle du texte. Une icône,
+ * ou `colorKey={null}`, garde le gris neutre.
+ */
+declare function AvatarFallback({ className, colorKey, children, ...props }: AvatarPrimitive.Fallback.Props & {
+    colorKey?: string | null | undefined;
+}): React.JSX.Element;
 declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/avatar.js

@@ -2,14 +2,33 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import * as React from "react";
 import { cn } from "./cn.js";
+import { avatarTone } from "./initials.js";
 function Avatar({ className, size = "default", ...props }) {
     return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className), ...props }));
 }
 function AvatarImage({ className, ...props }) {
     return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full rounded-full object-cover", className), ...props }));
 }
-function AvatarFallback({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
+/** Lavis et encre de chaque teinte (`--avatar-<n>`, `styles.css`), à 4,5:1 en clair et en sombre. */
+const TONE_CLASSES = {
+    1: "bg-avatar-1 text-avatar-1-ink",
+    2: "bg-avatar-2 text-avatar-2-ink",
+    3: "bg-avatar-3 text-avatar-3-ink",
+    4: "bg-avatar-4 text-avatar-4-ink",
+    5: "bg-avatar-5 text-avatar-5-ink",
+    6: "bg-avatar-6 text-avatar-6-ink",
+    7: "bg-avatar-7 text-avatar-7-ink",
+};
+/**
+ * Ce qui s'affiche sans photo (la photo, `AvatarImage`, reste prioritaire). Des initiales en
+ * texte prennent une teinte de la marque, stable : celle de `colorKey` (identifiant ou adresse
+ * e-mail, à préférer, deux homonymes n'ont pas la même couleur), sinon celle du texte. Une icône,
+ * ou `colorKey={null}`, garde le gris neutre.
+ */
+function AvatarFallback({ className, colorKey, children, ...props }) {
+    const key = colorKey === undefined ? (typeof children === "string" ? children : "") : (colorKey ?? "");
+    const tone = key.trim() ? avatarTone(key) : null;
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", "data-tone": tone ?? undefined, className: cn("flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs", tone ? cn("font-semibold", TONE_CLASSES[tone]) : "bg-muted text-muted-foreground", className), ...props, children: children }));
 }
 function AvatarBadge({ className, ...props }) {
     return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));

package/dist/cursor-pager.d.ts

@@ -0,0 +1,22 @@
+import type { RefObject } from "react";
+import type { CursorPageResult, CursorPages } from "./cursor-pages.ts";
+/** « Lignes 201 à 400 », « 1 ligne », « 37 lignes ». */
+export declare function rangeLabel(offset: number, count: number, single: boolean): string;
+/**
+ * Navigation d'une liste paginée par curseur (`useCursorPages`) : Précédent, Suivant et les lignes
+ * affichées. Sous le tableau ou le journal, à la place de `pagination` ou `loadMore` de `DataTable`.
+ *
+ * `result` à `undefined` pendant le chargement : la barre garde sa hauteur, les boutons sont
+ * désactivés, « Chargement… » remplace le décompte. Une seule page : le décompte seul. Aucune
+ * ligne sur la première page : rien, l'état vide de la liste suffit.
+ *
+ * `scrollTarget` : le haut de la liste, ramené à l'écran à chaque changement de page.
+ */
+export declare function CursorPager({ pages, result, scrollTarget, label, className, }: {
+    pages: CursorPages;
+    result: CursorPageResult | undefined;
+    scrollTarget?: RefObject<HTMLElement | null>;
+    /** Nom de la navigation pour les lecteurs d'écran : « Pagination des appels ». */
+    label?: string;
+    className?: string;
+}): React.JSX.Element | null;

package/dist/cursor-pager.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowLeft01Icon from "@hugeicons/core-free-icons/ArrowLeft01Icon";
+import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Button } from "./button.js";
+import { cn } from "./cn.js";
+import { Spinner } from "./spinner.js";
+const NUMBER = new Intl.NumberFormat("fr-CH");
+/** « Lignes 201 à 400 », « 1 ligne », « 37 lignes ». */
+export function rangeLabel(offset, count, single) {
+    if (single)
+        return `${NUMBER.format(count)} ${count > 1 ? "lignes" : "ligne"}`;
+    return `Lignes ${NUMBER.format(offset + 1)} à ${NUMBER.format(offset + count)}`;
+}
+/**
+ * Navigation d'une liste paginée par curseur (`useCursorPages`) : Précédent, Suivant et les lignes
+ * affichées. Sous le tableau ou le journal, à la place de `pagination` ou `loadMore` de `DataTable`.
+ *
+ * `result` à `undefined` pendant le chargement : la barre garde sa hauteur, les boutons sont
+ * désactivés, « Chargement… » remplace le décompte. Une seule page : le décompte seul. Aucune
+ * ligne sur la première page : rien, l'état vide de la liste suffit.
+ *
+ * `scrollTarget` : le haut de la liste, ramené à l'écran à chaque changement de page.
+ */
+export function CursorPager({ pages, result, scrollTarget, label = "Pagination", className, }) {
+    const loading = result === undefined;
+    const count = result?.page.length ?? 0;
+    const hasNext = result !== undefined && !result.isDone;
+    const single = !pages.hasPrevious && result?.isDone === true;
+    if (!loading && count === 0 && !pages.hasPrevious)
+        return null;
+    const go = (move) => {
+        move();
+        scrollTarget?.current?.scrollIntoView({ block: "start" });
+    };
+    return (_jsxs("nav", { "aria-label": label, "aria-busy": loading || undefined, "data-slot": "cursor-pager", className: cn("flex min-h-10 flex-wrap items-center justify-between gap-x-3 gap-y-2 px-1 text-sm", className), children: [_jsx("p", { className: "flex items-center gap-2 text-muted-foreground tabular-nums", "aria-live": "polite", children: loading ? _jsx(Spinner, { label: "Chargement\u2026" }) : rangeLabel(pages.offset, count, single) }), single ? null : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", disabled: !pages.hasPrevious || loading, onClick: () => go(pages.previous), children: [_jsx(HugeiconsIcon, { icon: ArrowLeft01Icon, strokeWidth: 2, "aria-hidden": true, "data-icon": "inline-start" }), "Pr\u00E9c\u00E9dent"] }), _jsxs(Button, { variant: "outline", size: "sm", disabled: !hasNext, onClick: () => {
+                            if (result !== undefined)
+                                go(() => pages.next(result));
+                        }, children: ["Suivant", _jsx(HugeiconsIcon, { icon: ArrowRight01Icon, strokeWidth: 2, "aria-hidden": true, "data-icon": "inline-end" })] })] }))] }));
+}

package/dist/cursor-pages.d.ts

@@ -0,0 +1,57 @@
+/** La règle commune des grandes listes : 200 lignes par page. */
+export declare const PAGE_SIZE = 200;
+/** Ce que renvoie `paginate` de Convex (`PaginationResult`), réduit à ce dont la pile a besoin. */
+export type CursorPageResult<Item = unknown> = {
+    page: ReadonlyArray<Item>;
+    isDone: boolean;
+    continueCursor: string;
+};
+/**
+ * Pile des curseurs : `cursors[i]` ouvre la page `i` (`null` pour la première), `offsets[i]` compte
+ * les lignes des pages d'avant. La page `i + 1`, si elle est connue, borne la page `i` : revenir en
+ * arrière relit exactement les mêmes lignes, sans perte ni doublon, même si la liste bouge.
+ */
+export type CursorStack = {
+    index: number;
+    cursors: ReadonlyArray<string | null>;
+    offsets: ReadonlyArray<number>;
+};
+export declare const FIRST_PAGE: CursorStack;
+/** Page suivante, depuis le résultat de la page `from` ; rien ne change si l'on n'y est plus (double clic) ou si la liste est finie. */
+export declare function nextPage(stack: CursorStack, from: number, result: CursorPageResult): CursorStack;
+/** Page précédente ; rien ne change sur la première. */
+export declare function previousPage(stack: CursorStack, from: number): CursorStack;
+/** Options à passer telles quelles à une query Convex qui reçoit `paginationOptsValidator`. */
+export type CursorPaginationOpts = {
+    numItems: number;
+    cursor: string | null;
+    endCursor?: string;
+};
+export type CursorPages = {
+    pageSize: number;
+    /** Page affichée, à partir de 0. */
+    pageIndex: number;
+    /** Lignes des pages d'avant : la page commence à la ligne `offset + 1`. */
+    offset: number;
+    cursor: string | null;
+    /** Fin de la page quand la suivante a déjà été ouverte. */
+    endCursor: string | null;
+    paginationOpts: CursorPaginationOpts;
+    hasPrevious: boolean;
+    /** À appeler avec le résultat de la page affichée. */
+    next: (result: CursorPageResult) => void;
+    previous: () => void;
+    /** Retour à la première page. */
+    reset: () => void;
+};
+/**
+ * Pagination par curseur, page par page (Précédent, Suivant), pour une liste paginée côté serveur.
+ * Indépendant de Convex, mais calé sur `paginate({ numItems, cursor, endCursor })` et son résultat
+ * `{ page, isDone, continueCursor }` : `paginationOpts` se passe à la query, le résultat à `next`.
+ *
+ * `filtersKey` résume les filtres (période, statut, recherche, tri) : quand elle change, la liste
+ * revient à la première page, puisque les curseurs d'avant ne valent plus rien.
+ */
+export declare function useCursorPages(filtersKey: string, { pageSize }?: {
+    pageSize?: number;
+}): CursorPages;

package/dist/cursor-pages.js

@@ -0,0 +1,56 @@
+import { useCallback, useState } from "react";
+/** La règle commune des grandes listes : 200 lignes par page. */
+export const PAGE_SIZE = 200;
+export const FIRST_PAGE = { index: 0, cursors: [null], offsets: [0] };
+/** Page suivante, depuis le résultat de la page `from` ; rien ne change si l'on n'y est plus (double clic) ou si la liste est finie. */
+export function nextPage(stack, from, result) {
+    if (stack.index !== from || result.isDone)
+        return stack;
+    const to = from + 1;
+    if (stack.cursors.length > to)
+        return { ...stack, index: to };
+    return {
+        index: to,
+        cursors: [...stack.cursors, result.continueCursor],
+        offsets: [...stack.offsets, (stack.offsets[from] ?? 0) + result.page.length],
+    };
+}
+/** Page précédente ; rien ne change sur la première. */
+export function previousPage(stack, from) {
+    if (stack.index !== from || from === 0)
+        return stack;
+    return { ...stack, index: from - 1 };
+}
+/**
+ * Pagination par curseur, page par page (Précédent, Suivant), pour une liste paginée côté serveur.
+ * Indépendant de Convex, mais calé sur `paginate({ numItems, cursor, endCursor })` et son résultat
+ * `{ page, isDone, continueCursor }` : `paginationOpts` se passe à la query, le résultat à `next`.
+ *
+ * `filtersKey` résume les filtres (période, statut, recherche, tri) : quand elle change, la liste
+ * revient à la première page, puisque les curseurs d'avant ne valent plus rien.
+ */
+export function useCursorPages(filtersKey, { pageSize = PAGE_SIZE } = {}) {
+    const [state, setState] = useState({ key: filtersKey, stack: FIRST_PAGE });
+    // Retour au début pendant le rendu même : aucune requête ne part avec un curseur d'un autre filtre.
+    const stack = state.key === filtersKey ? state.stack : FIRST_PAGE;
+    if (state.key !== filtersKey)
+        setState({ key: filtersKey, stack: FIRST_PAGE });
+    const index = stack.index;
+    const next = useCallback((result) => setState((s) => (s.key === filtersKey ? { key: s.key, stack: nextPage(s.stack, index, result) } : s)), [filtersKey, index]);
+    const previous = useCallback(() => setState((s) => (s.key === filtersKey ? { key: s.key, stack: previousPage(s.stack, index) } : s)), [filtersKey, index]);
+    const reset = useCallback(() => setState({ key: filtersKey, stack: FIRST_PAGE }), [filtersKey]);
+    const cursor = stack.cursors[index] ?? null;
+    const endCursor = stack.cursors[index + 1] ?? null;
+    return {
+        pageSize,
+        pageIndex: index,
+        offset: stack.offsets[index] ?? 0,
+        cursor,
+        endCursor,
+        paginationOpts: endCursor === null ? { numItems: pageSize, cursor } : { numItems: pageSize, cursor, endCursor },
+        hasPrevious: index > 0,
+        next,
+        previous,
+        reset,
+    };
+}

package/dist/family-loader.d.ts

@@ -21,11 +21,10 @@ export declare function syncFamilyLoader(root: Element | null): void;
  */
 export declare const FamilyLoaderRootContext: React.Context<boolean>;
 /**
- * Le H du chargement, le H « Double » de la H Collection : la silhouette grise du H plein, devant
- * son reflet immobile (35 %, 50 % en sombre), toujours visibles. Les trois pièces du H plein se
- * remplissent de leurs dégradés en une seule boucle de 2 s (gauche, pont, droite, H complet,
- * fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
- * seulement. Mouvement réduit : le H plein respire doucement.
+ * Le H du chargement : un seul H, sans reflet ni ombre, sa silhouette grise toujours visible. Les
+ * trois pièces se remplissent de leurs dégradés en une seule boucle de 2 s (gauche, pont, droite,
+ * H complet, fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
+ * seulement. Mouvement réduit : le H plein, immobile.
  *
  * Un chargement de page ne dessine pas ce H lui-même : c'est `PagePending`, qui passe par le H du
  * document (`FamilyLoaderRoot`), au même pixel dans tous les états. Ce composant sert au H en

package/dist/family-loader.js

@@ -54,9 +54,9 @@ function useClockSync(ref) {
     }, [ref]);
 }
 const PIECES = ["left", "bar", "right"];
-/** Le H « Double » : le reflet immobile, puis les trois pièces du H plein qui se remplissent. */
+/** Un seul H : les trois pièces du H plein qui se remplissent, sans reflet ni ombre. */
 function Mark() {
-    return (_jsxs(_Fragment, { children: [_jsx("span", { "data-reflet": true, "aria-hidden": true, children: PIECES.map((piece) => (_jsx("span", { "data-piece": piece, children: _jsx("span", {}) }, piece))) }), PIECES.map((piece) => (_jsx("span", { "data-piece": piece, "aria-hidden": true, children: _jsx("span", { "data-fill": true }) }, piece)))] }));
+    return (_jsx(_Fragment, { children: PIECES.map((piece) => (_jsx("span", { "data-piece": piece, "aria-hidden": true, children: _jsx("span", { "data-fill": true }) }, piece))) }));
 }
 /**
  * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` et la coque s'y
@@ -64,11 +64,10 @@ function Mark() {
  */
 export const FamilyLoaderRootContext = createContext(false);
 /**
- * Le H du chargement, le H « Double » de la H Collection : la silhouette grise du H plein, devant
- * son reflet immobile (35 %, 50 % en sombre), toujours visibles. Les trois pièces du H plein se
- * remplissent de leurs dégradés en une seule boucle de 2 s (gauche, pont, droite, H complet,
- * fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
- * seulement. Mouvement réduit : le H plein respire doucement.
+ * Le H du chargement : un seul H, sans reflet ni ombre, sa silhouette grise toujours visible. Les
+ * trois pièces se remplissent de leurs dégradés en une seule boucle de 2 s (gauche, pont, droite,
+ * H complet, fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
+ * seulement. Mouvement réduit : le H plein, immobile.
  *
  * Un chargement de page ne dessine pas ce H lui-même : c'est `PagePending`, qui passe par le H du
  * document (`FamilyLoaderRoot`), au même pixel dans tous les états. Ce composant sert au H en

package/dist/initials.d.ts

@@ -6,3 +6,12 @@
  * e-mail : « jean.dupont@… » donne « JD »), puis « ? ».
  */
 export declare function initials(name: string | null | undefined, fallback?: string | null): string;
+/** Nombre de teintes d'avatar (`--avatar-1` à `--avatar-7`, `styles.css`). */
+export declare const AVATAR_TONES = 7;
+export type AvatarTone = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+/**
+ * La teinte de l'avatar à initiales d'une personne ou d'une organisation, stable : la même clé
+ * (identifiant, ou adresse e-mail, sans tenir compte de la casse ni des espaces autour) donne
+ * toujours la même teinte, dans tous les produits. FNV-1a 32 bits, puis modulo 7.
+ */
+export declare function avatarTone(key: string): AvatarTone;

package/dist/initials.js

@@ -21,3 +21,18 @@ export function initials(name, fallback) {
         return fromName;
     return firstLetters((fallback ?? "").split("@")[0] ?? "", /[\s._+-]+/) || "?";
 }
+/** Nombre de teintes d'avatar (`--avatar-1` à `--avatar-7`, `styles.css`). */
+export const AVATAR_TONES = 7;
+/**
+ * La teinte de l'avatar à initiales d'une personne ou d'une organisation, stable : la même clé
+ * (identifiant, ou adresse e-mail, sans tenir compte de la casse ni des espaces autour) donne
+ * toujours la même teinte, dans tous les produits. FNV-1a 32 bits, puis modulo 7.
+ */
+export function avatarTone(key) {
+    let hash = 0x811c9dc5;
+    for (const char of key.trim().toLocaleLowerCase("fr-CH")) {
+        hash ^= char.codePointAt(0) ?? 0;
+        hash = Math.imul(hash, 0x01000193) >>> 0;
+    }
+    return ((hash % AVATAR_TONES) + 1);
+}

package/dist/member-item.js

@@ -18,5 +18,5 @@ import { ResourceItem } from "./resource-list.js";
  */
 export function MemberItem({ name, email, orgRole: role, image, isMe = false, roleHint, actions, className, }) {
     const shown = name.trim() || email || "Sans nom";
-    return (_jsx(ResourceItem, { className: className, icon: _jsxs(Avatar, { className: "size-10", children: [image ? _jsx(AvatarImage, { src: image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold", children: initials(name, email) })] }), title: _jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "truncate", children: shown }), isMe ? _jsx("span", { className: "shrink-0 font-normal text-muted-foreground", children: "(toi)" }) : null] }), meta: email && email !== shown ? email : undefined, badge: role ? _jsx(RoleBadge, { orgRole: role, ...(roleHint !== undefined ? { title: roleHint } : {}) }) : undefined, actions: actions }));
+    return (_jsx(ResourceItem, { className: className, icon: _jsxs(Avatar, { className: "size-10", children: [image ? _jsx(AvatarImage, { src: image, alt: "" }) : null, _jsx(AvatarFallback, { colorKey: email || name, className: "text-xs font-semibold", children: initials(name, email) })] }), title: _jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "truncate", children: shown }), isMe ? _jsx("span", { className: "shrink-0 font-normal text-muted-foreground", children: "(toi)" }) : null] }), meta: email && email !== shown ? email : undefined, badge: role ? _jsx(RoleBadge, { orgRole: role, ...(roleHint !== undefined ? { title: roleHint } : {}) }) : undefined, actions: actions }));
 }

package/dist/project-switcher.d.ts

@@ -0,0 +1,48 @@
+import { type ReactElement } from "react";
+export type SwitcherProject = {
+    id: string;
+    name: string;
+    /** Image carrée du projet (favicon du site, logo). Sans image, ou si elle ne charge pas : `mark`. */
+    iconUrl?: string | null;
+    /** Une ou deux lettres de repli : la marque du framework, l'initiale du produit. Par défaut, la première lettre du nom. */
+    mark?: string;
+    /** Lien vers le projet ; sans lien, le choix passe par `onSelect`. */
+    href?: string;
+};
+/**
+ * Identité visuelle d'un projet : son image, ou sa marque en lettres sur un carré gris. La même
+ * dans le sélecteur, une liste de projets ou un en-tête.
+ */
+export declare function ProjectMark({ project, className, }: {
+    project: Pick<SwitcherProject, "name" | "iconUrl" | "mark">;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Le projet ouvert, ou « Tous les projets » sur les pages de l'organisation, et le menu pour passer
+ * d'un projet à l'autre ou en créer un. Dans la barre du haut d'`AppShell` (`header`), à côté de la
+ * barre latérale. Le même dans tous les produits qui ont des projets (Host, Docs…).
+ *
+ * Présentationnel : le produit passe la liste et dit où mène chaque choix, par lien (`href` sur le
+ * projet, `allHref`, `createHref`, rendus par `renderLink`, par exemple
+ * `(href) => <Link to={href} />`) ou par action (`onSelect`, `onCreate`). `projects` à `undefined`
+ * pendant le chargement : le déclencheur montre déjà `activeName` (le segment de l'URL), le menu
+ * reste utilisable pour « Tous les projets » et « Nouveau projet ».
+ */
+export declare function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, createLabel, className, }: {
+    projects: ReadonlyArray<SwitcherProject> | undefined;
+    /** Le projet ouvert ; `null` ou absent : « Tous les projets ». */
+    activeId?: string | null;
+    /** Nom affiché tant que la liste charge, ou si le projet actif n'y figure pas. */
+    activeName?: string;
+    /** Choix d'un projet sans `href` (`id`), ou de « Tous les projets » sans `allHref` (`null`). */
+    onSelect?: (id: string | null) => void;
+    allHref?: string;
+    /** Lien « Nouveau projet ». */
+    createHref?: string;
+    /** Ou une action, si la création s'ouvre dans une boîte de dialogue. */
+    onCreate?: () => void;
+    /** Rend un lien du routeur du produit ; par défaut un `<a href>`. */
+    renderLink?: (href: string) => ReactElement;
+    createLabel?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/project-switcher.js

@@ -0,0 +1,48 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DashboardSquare01Icon from "@hugeicons/core-free-icons/DashboardSquare01Icon";
+import PlusSignIcon from "@hugeicons/core-free-icons/PlusSignIcon";
+import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
+import UnfoldMoreIcon from "@hugeicons/core-free-icons/UnfoldMoreIcon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { useState } from "react";
+import { cn } from "./cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { MENU_LINK_ITEM } from "./org-switcher.js";
+/**
+ * Identité visuelle d'un projet : son image, ou sa marque en lettres sur un carré gris. La même
+ * dans le sélecteur, une liste de projets ou un en-tête.
+ */
+export function ProjectMark({ project, className, }) {
+    const [broken, setBroken] = useState(null);
+    const url = project.iconUrl && project.iconUrl !== broken ? project.iconUrl : null;
+    const base = "grid size-6 shrink-0 place-items-center overflow-hidden rounded-md bg-muted";
+    if (url)
+        return (_jsx("span", { "aria-hidden": true, "data-slot": "project-mark", className: cn(base, className), children: _jsx("img", { src: url, alt: "", loading: "lazy", decoding: "async", onError: () => setBroken(url), className: "size-[60%] object-contain" }) }));
+    const mark = (project.mark ?? project.name.trim().charAt(0)) || "?";
+    return (_jsx("span", { "aria-hidden": true, "data-slot": "project-mark", className: cn(base, "font-mono text-[10px] font-semibold text-foreground uppercase", className), children: mark }));
+}
+/** Rend une destination du menu : un lien (`href`, par `renderLink`) ou une action. */
+function SwitcherEntry({ href, onSelect, renderLink, children, }) {
+    if (href !== undefined)
+        return (_jsx(MenuPrimitive.LinkItem, { href: href, render: renderLink?.(href), closeOnClick: true, "data-slot": "dropdown-menu-item", className: MENU_LINK_ITEM, children: children }));
+    return _jsx(DropdownMenuItem, { onClick: onSelect, children: children });
+}
+/**
+ * Le projet ouvert, ou « Tous les projets » sur les pages de l'organisation, et le menu pour passer
+ * d'un projet à l'autre ou en créer un. Dans la barre du haut d'`AppShell` (`header`), à côté de la
+ * barre latérale. Le même dans tous les produits qui ont des projets (Host, Docs…).
+ *
+ * Présentationnel : le produit passe la liste et dit où mène chaque choix, par lien (`href` sur le
+ * projet, `allHref`, `createHref`, rendus par `renderLink`, par exemple
+ * `(href) => <Link to={href} />`) ou par action (`onSelect`, `onCreate`). `projects` à `undefined`
+ * pendant le chargement : le déclencheur montre déjà `activeName` (le segment de l'URL), le menu
+ * reste utilisable pour « Tous les projets » et « Nouveau projet ».
+ */
+export function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, createLabel = "Nouveau projet", className, }) {
+    const hasActive = activeId !== undefined && activeId !== null;
+    const current = hasActive ? projects?.find((p) => p.id === activeId) : undefined;
+    const label = hasActive ? (current?.name ?? activeName ?? "") : "Tous les projets";
+    const canCreate = createHref !== undefined || onCreate !== undefined;
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": hasActive ? `Projet ${label}, changer de projet` : "Tous les projets, changer de projet", className: cn("flex h-10 max-w-full min-w-0 items-center gap-2 rounded-xl px-2.5 text-sm font-medium outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted coarse:h-11", className) }), children: [hasActive ? (current ? (_jsx(ProjectMark, { project: current })) : (_jsx("span", { "aria-hidden": true, className: "size-6 shrink-0 rounded-md bg-muted skeleton-pulse" }))) : (_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })), _jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72 max-w-[calc(100vw-2rem)]", children: [_jsxs(SwitcherEntry, { href: allHref, onSelect: () => onSelect?.(null), renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4" }), _jsx("span", { className: "flex-1", children: "Tous les projets" }), hasActive ? null : _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Vue active", className: "size-4" })] }), projects?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Projets" }), projects.map((project) => (_jsxs(SwitcherEntry, { href: project.href, onSelect: () => onSelect?.(project.id), renderLink: renderLink, children: [_jsx(ProjectMark, { project: project }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: project.name }), project.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Projet actif", className: "size-4" })) : null] }, project.id)))] })] })) : null, canCreate ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(SwitcherEntry, { href: createHref, onSelect: onCreate, renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true, className: "size-4" }), createLabel] })] })) : null] })] }));
+}

package/dist/theme-switch.js

@@ -37,6 +37,10 @@ export function ThemeSwitch({ className }) {
     const current = CHOICES.find((choice) => choice.value === theme);
     return (_jsxs("div", { className: cn("flex items-center gap-2.5 px-3 py-[3px] text-sm font-medium max-lg:min-h-11 coarse:min-h-11", className), children: [_jsx(HugeiconsIcon, { icon: current?.icon ?? ComputerIcon, "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { className: "flex-1", children: "Th\u00E8me" }), _jsx("div", { ref: group, role: "radiogroup", "aria-label": "Th\u00E8me", tabIndex: -1, onKeyDown: onKeyDown, className: "flex w-fit items-center gap-0.5 rounded-full border border-border p-0.5", children: CHOICES.map(({ value, label, icon }) => {
                     const active = theme === value;
-                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(MenuPrimitive.Item, { closeOnClick: false, role: "radio", "aria-checked": active, "aria-label": label, "data-theme-choice": value, onClick: () => setTheme(value), className: cn("touch-target grid size-6 cursor-default place-items-center rounded-full outline-none", "transition-colors duration-(--duration-fast) ease-out focus-visible:ring-2 focus-visible:ring-ring/50", active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground") }), children: _jsx(HugeiconsIcon, { icon: icon, "aria-hidden": true, className: "size-3.5" }) }), _jsx(TooltipContent, { children: label })] }, value));
+                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(MenuPrimitive.Item, { closeOnClick: false, role: "radio", "aria-checked": active, "aria-label": label, "data-theme-choice": value, onClick: () => setTheme(value), className: cn("touch-target grid size-7 cursor-default place-items-center rounded-full outline-none", "transition-colors duration-(--duration-fast) ease-out focus-visible:ring-2 focus-visible:ring-ring/50", 
+                                    // Le choix actif comme dans `SegmentedControl` : encre pleine, lisible d'un coup d'œil.
+                                    active
+                                        ? "bg-foreground text-background"
+                                        : "text-muted-foreground hover:bg-muted hover:text-foreground data-highlighted:bg-muted data-highlighted:text-foreground") }), children: _jsx(HugeiconsIcon, { icon: icon, "aria-hidden": true, className: "size-4" }) }), _jsx(TooltipContent, { children: label })] }, value));
                 }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",

package/styles.css

@@ -100,6 +100,20 @@
   --color-inverse-foreground: var(--inverse-foreground);
   --color-inverse-muted: var(--inverse-muted);
   --color-inverse-code: var(--inverse-code);
+  --color-avatar-1: var(--avatar-1);
+  --color-avatar-1-ink: var(--avatar-1-ink);
+  --color-avatar-2: var(--avatar-2);
+  --color-avatar-2-ink: var(--avatar-2-ink);
+  --color-avatar-3: var(--avatar-3);
+  --color-avatar-3-ink: var(--avatar-3-ink);
+  --color-avatar-4: var(--avatar-4);
+  --color-avatar-4-ink: var(--avatar-4-ink);
+  --color-avatar-5: var(--avatar-5);
+  --color-avatar-5-ink: var(--avatar-5-ink);
+  --color-avatar-6: var(--avatar-6);
+  --color-avatar-6-ink: var(--avatar-6-ink);
+  --color-avatar-7: var(--avatar-7);
+  --color-avatar-7-ink: var(--avatar-7-ink);
   --radius-sm: calc(var(--radius) * 0.6);
   --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
@@ -185,6 +199,23 @@
   --inverse-foreground: oklch(0.985 0 0);
   --inverse-muted: oklch(0.708 0 0);
   --inverse-code: oklch(0.82 0.11 296);
+  /* Avatars à initiales (`AvatarFallback`) : sept teintes, celles des icônes des produits (Host,
+     Portal, Account, Mail, Status, Analytics, Docs), en lavis avec une encre de la même teinte.
+     Initiales à 5,5:1 au moins, en clair comme en sombre (vérifié par styles.test.ts). */
+  --avatar-1: oklch(0.88 0.055 262);
+  --avatar-1-ink: oklch(0.42 0.12 262);
+  --avatar-2: oklch(0.88 0.06 293);
+  --avatar-2-ink: oklch(0.42 0.12 293);
+  --avatar-3: oklch(0.88 0.062 40);
+  --avatar-3-ink: oklch(0.42 0.12 40);
+  --avatar-4: oklch(0.88 0.063 2);
+  --avatar-4-ink: oklch(0.42 0.12 2);
+  --avatar-5: oklch(0.88 0.07 160);
+  --avatar-5-ink: oklch(0.42 0.09 160);
+  --avatar-6: oklch(0.88 0.07 75);
+  --avatar-6-ink: oklch(0.42 0.083 75);
+  --avatar-7: oklch(0.88 0.07 215);
+  --avatar-7-ink: oklch(0.42 0.07 215);
   --radius: 0.85rem;
   --scrollbar-thumb: color-mix(in oklch, var(--foreground) 18%, transparent);
 }
@@ -229,6 +260,20 @@
   --success: oklch(0.7 0.15 152);
   --success-foreground: oklch(0.16 0.02 152);
   --inverse: oklch(0.1 0 0);
+  --avatar-1: oklch(0.4 0.09 262);
+  --avatar-1-ink: oklch(0.9 0.045 262);
+  --avatar-2: oklch(0.4 0.09 293);
+  --avatar-2-ink: oklch(0.9 0.05 293);
+  --avatar-3: oklch(0.4 0.09 40);
+  --avatar-3-ink: oklch(0.9 0.05 40);
+  --avatar-4: oklch(0.4 0.09 2);
+  --avatar-4-ink: oklch(0.9 0.05 2);
+  --avatar-5: oklch(0.4 0.085 160);
+  --avatar-5-ink: oklch(0.9 0.05 160);
+  --avatar-6: oklch(0.4 0.079 75);
+  --avatar-6-ink: oklch(0.9 0.05 75);
+  --avatar-7: oklch(0.4 0.066 215);
+  --avatar-7-ink: oklch(0.9 0.05 215);
 }
 
 /* Identité H Collection. Dégradé de chaque icône produit sur fond clair, de la teinte vive à la
@@ -533,7 +578,7 @@
   }
 }
 /* Chargeur de la famille (`FamilyLoader`, ADR 0015) : silhouette grise du H, pièces remplies de
-   leurs dégradés. Géométrie du H sur 256 (FAMILY_MARK_SVG). Une seule boucle de 2 s pour tout le H,
+   leurs dégradés. Géométrie du H de FAMILY_MARK_SVG, sans le reflet. Une seule boucle de 2 s pour tout le H,
    calée sur l'horloge (`syncFamilyLoader`) : le jambage gauche monte, la barre le prolonge vers la
    droite, le jambage droit s'ouvre depuis la barre vers le haut et le bas ; le H complet tient, se
    vide d'un fondu, la silhouette reste un instant, et ça recommence. Seuls `transform` et `opacity`
@@ -551,23 +596,21 @@
 .dark .family-loader {
   --fl-ghost-mix: 19%;
 }
-/* Le H « Double » (`family/hcollection-icon.svg`, cadre de 46 unités) : le H plein, trois pièces,
-   devant son reflet décalé de 6 unités. Seul le H plein se remplit ; le reflet reste à 35 % (50 %
-   en sombre), immobile. */
+/* Un seul H, plein, trois pièces, centré dans un cadre de 46 unités (le H de la marque,
+   `family/hcollection-icon.svg`, sans son reflet) : ni ombre, ni double, à aucune image de la
+   boucle (demande de Hugo, 2026-10-18). */
 .family-loader {
   --fl-u: calc(var(--fl) / 46);
   --fl-l0: #2c78fd;
   --fl-l1: #7343fe;
   --fl-r0: #fe5292;
   --fl-r1: #ff9a46;
-  --fl-reflet: 0.35;
 }
 .dark .family-loader {
   --fl-l0: #6aa0ff;
   --fl-l1: #9a7bff;
   --fl-r0: #ff7aa8;
   --fl-r1: #ffb070;
-  --fl-reflet: 0.5;
 }
 .family-loader [data-piece] {
   position: absolute;
@@ -581,31 +624,24 @@
 .family-loader [data-piece="left"],
 .family-loader [data-piece="right"] {
   z-index: 1;
-  top: calc(var(--fl-u) * 2.5);
+  top: calc(var(--fl-u) * 5);
   width: calc(var(--fl-u) * 10);
   height: calc(var(--fl-u) * 36);
   border-radius: calc(var(--fl-u) * 3);
 }
 .family-loader [data-piece="left"] {
-  left: calc(var(--fl-u) * 5.5);
+  left: calc(var(--fl-u) * 8);
 }
 .family-loader [data-piece="right"] {
-  left: calc(var(--fl-u) * 25.5);
+  left: calc(var(--fl-u) * 28);
 }
 /* Le pont déborde d'une demi-unité sous chaque montant, comme dans le dessin. */
 .family-loader [data-piece="bar"] {
-  left: calc(var(--fl-u) * 15);
-  top: calc(var(--fl-u) * 16);
+  left: calc(var(--fl-u) * 17.5);
+  top: calc(var(--fl-u) * 18.5);
   width: calc(var(--fl-u) * 11);
   height: calc(var(--fl-u) * 9);
 }
-/* Le reflet : le même H, plein, décalé de (6, 6), en un seul calque translucide. */
-.family-loader > [data-reflet] {
-  position: absolute;
-  inset: 0;
-  opacity: var(--fl-reflet);
-  transform: translate(calc(var(--fl-u) * 6), calc(var(--fl-u) * 6));
-}
 /* Couleurs du H : chaque montant son dégradé vertical ; le pont prend celui du montant droit,
    recouvert de celui du gauche qui s'efface de gauche à droite (le masque du dessin). Le pont
    occupe les unités 25 à 34 des 11,5 à 47,5 des montants : dégradé quatre fois plus haut, centré. */
@@ -627,10 +663,6 @@
   background-position: 0 50%;
   mask-image: linear-gradient(to right, #000 4.545%, transparent 95.455%);
 }
-.family-loader [data-reflet] [data-piece] > * {
-  position: absolute;
-  inset: 0;
-}
 .family-loader [data-fill] {
   position: absolute;
   inset: 0;
@@ -723,21 +755,12 @@
     opacity: 1;
   }
 }
-/* Mouvement réduit : le H est plein et respire doucement, sur la même boucle. */
-@keyframes family-loader-breathe {
-  0%,
-  100% {
-    opacity: 0.4;
-  }
-  50% {
-    opacity: 1;
-  }
-}
+/* Mouvement réduit : le H plein, immobile. Le chargement se lit au libellé (`role="status"`). */
 @media (prefers-reduced-motion: reduce) {
   .family-loader [data-piece] [data-fill] {
     transform: none;
-    animation-name: family-loader-breathe;
-    animation-timing-function: ease-in-out;
+    opacity: 1;
+    animation-name: none;
   }
 }