@hgdc/ui 0.71.0 → 0.72.0

package/README.md

@@ -135,8 +135,8 @@ Une seule barre latérale (ADR 0024) : organisation et bouton Réduire en haut,
 | `secret-reveal`  | `<SecretReveal label="Clé d'API" value={key} onDismiss={forget} />` : affichée une fois, puis retirée de la page                                                                                                                                                                                                                                                                                                                                        |
 | `assistant-chat` | `<AssistantConversation><AssistantUserMessage>…</AssistantUserMessage><AssistantReply tools={chips} waiting={pending} actions={<AssistantActionCard title=… status="pending" onConfirm={…} onCancel={…} />}><Markdown>{text}</Markdown></AssistantReply></AssistantConversation>`, `<AssistantComposer value={v} onValueChange={setV} onSubmit={send} busy={busy} />`, `<AssistantExamples examples={…} onPick={setV} />` : le produit rend le Markdown |
 | `assistant-view` | `<AssistantView status={status} threads={threads} threadId={id} onThreadChange={setId} thread={thread} renderText={(t) => <Markdown>{t}</Markdown>} onSend={send} onConfirm={confirm} onCancel={cancel} />` : le panneau complet pour `AppShell` (`assistant.panel`), aux formes de `@hgdc/assistant/convex` ; `subject` (page ouverte), `request` (demande venue de la page), `labels` (vouvoiement)                                                   |
-| `family-loader`  | `<FamilyLoaderRoot>{children}</FamilyLoaderRoot>` une fois dans le `body` de la route racine : le seul H d'un chargement de page, fixe sur la zone de contenu de la coque, rendu par le serveur, calé sur l'horloge (même pixel et même phase d'une page et d'un produit à l'autre, ADR 0015). `<FamilyLoader size="lg" />` : le H en ligne (une boucle de 2 s, `transform` et `opacity`). Dans un bouton : `Spinner`                                   |
-| `page-pending`   | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, squelette après 1 s, au moins 500 ms, ADR 0025) ; `AppShell {...useRouterState({ select: shellNavigation, structuralSharing: true })}` : une navigation montre la barre de progression, l'ancienne page reste ; `PagePending variant="list"                                                                                                                           | "dashboard" | "form"` : dans la coque, le squelette de la page ; hors de la coque, le H du document |
+| `family-loader`  | `<FamilyLoaderRoot>{children}</FamilyLoaderRoot>` une fois dans le `body` de la route racine : la lueur du chargement de page (`EdgeGlow`, une bande tricolore qui ondule le long de la carte du contenu, WebGL, repli CSS rendu par le serveur), calée sur l'horloge (même phase d'une page et d'un produit à l'autre). `<FamilyLoader size="lg" />` : le H en ligne (une boucle de 2 s, `transform` et `opacity`). Dans un bouton : `Spinner`         |
+| `page-pending`   | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, squelette après 1 s, au moins 500 ms, ADR 0025) ; `AppShell {...useRouterState({ select: shellNavigation, structuralSharing: true })}` : une navigation montre la barre de progression, l'ancienne page reste ; `PagePending variant="list"                                                                                                                           | "dashboard" | "form"` : dans la coque, le squelette de la page ; hors de la coque, la lueur du document |
 | `page-skeleton`  | `<PageSkeleton variant="dashboard" />` : la forme d'une page qui charge, calée sur `Page` (en-tête, colonne, espacement), pour que rien ne saute à l'arrivée                                                                                                                                                                                                                                                                                            |
 | `skeleton`       | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                                                                                                                                                                                                                                                                                |
 

package/dist/edge-glow.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Réglages de la lueur, choisis par Hugo le 2026-11-11 : épaisseur 47 px, houle 32 %, vitesse
+ * 68 %, pulsation 56 % sur 3 s.
+ */
+export declare const EDGE_GLOW: {
+    readonly width: 47;
+    readonly swell: 0.32;
+    readonly speed: 0.68;
+    readonly pulse: 0.56;
+    readonly pulsePeriodMs: 3000;
+};
+/** Temps des vagues (s) et phase de la pulsation (0 à 1) sur l'horloge : même image partout au même instant. */
+export declare function edgeGlowClock(epochMs: number): {
+    time: number;
+    pulse: number;
+};
+/**
+ * La lueur du chargement de page : une bande tricolore le long du bord de son parent (qui fixe la
+ * taille et l'arrondi, `overflow: hidden`). Elle pousse depuis le bord quand elle devient visible et
+ * s'y retire quand elle se cache ; l'animation ne tourne que pendant ce temps. Sans WebGL, avant
+ * l'hydratation, ou avec le mouvement réduit (une image fixe), le CSS dessine une lueur immobile
+ * (`[data-slot="edge-glow"]:not([data-live])`).
+ */
+export declare function EdgeGlow(): React.JSX.Element;

package/dist/edge-glow.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+/**
+ * Réglages de la lueur, choisis par Hugo le 2026-11-11 : épaisseur 47 px, houle 32 %, vitesse
+ * 68 %, pulsation 56 % sur 3 s.
+ */
+export const EDGE_GLOW = { width: 47, swell: 0.32, speed: 0.68, pulse: 0.56, pulsePeriodMs: 3000 };
+const VERTEX = "attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}";
+/**
+ * Une seule bande le long du bord : opaque contre le bord, effacée vers l'intérieur. Son bord
+ * intérieur ondule (cinq vagues de vitesses différentes, qui ne se répètent pas), toute la bande
+ * respire (pulsation), les couleurs du H tournent. La profondeur est un minimum adouci des quatre
+ * distances aux bords : les coins intérieurs restent arrondis quelle que soit l'épaisseur.
+ */
+const FRAGMENT = `precision highp float;
+uniform vec2 R;uniform float D,T,W,A,I,P,Q;
+vec3 pal(float x){x=fract(x)*6.;vec3 b=vec3(.173,.471,.992),v=vec3(.451,.263,.996),k=vec3(.996,.322,.573),o=vec3(1.,.604,.275);
+if(x<1.)return mix(b,v,x);if(x<2.)return mix(v,k,x-1.);if(x<3.)return mix(k,o,x-2.);if(x<4.)return mix(o,k,x-3.);if(x<5.)return mix(k,v,x-4.);return mix(v,b,x-5.);}
+void main(){vec2 s=R/D;vec2 p=gl_FragCoord.xy/D;
+float k=14.;float d=-k*log(exp(-p.x/k)+exp(-p.y/k)+exp(-(s.x-p.x)/k)+exp(-(s.y-p.y)/k));
+vec2 c=p-s*.5;float a=atan(c.y/s.y,c.x/s.x);
+float w=.55+A*(.22*sin(2.*a+1.1*T)+.16*sin(3.*a-1.7*T+1.3)+.12*sin(5.*a+2.3*T+.4)+.08*sin(8.*a-3.1*T+2.)+.05*sin(13.*a+4.2*T));
+float br=.5-.5*cos(6.2832*Q);br=br*br*(3.-2.*br);
+float th=max(W*w,W*.12)*I*(1.+P*(br*1.2-.4));
+float f=pow(1.-smoothstep(0.,th,d),1.5);
+float al=f*.92*min(I*1.5,1.)*(.88+.12*br);
+gl_FragColor=vec4(pal(a/6.2832+T*.06)*al,al);}`;
+/** Temps des vagues (s) et phase de la pulsation (0 à 1) sur l'horloge : même image partout au même instant. */
+export function edgeGlowClock(epochMs) {
+    // Ramené sous 2π × 1000 : la précision des flottants du GPU reste fine, un saut toutes les 2,5 h.
+    const time = ((epochMs / 1000) * EDGE_GLOW.speed) % (Math.PI * 2000);
+    const pulse = (((epochMs % EDGE_GLOW.pulsePeriodMs) + EDGE_GLOW.pulsePeriodMs) % EDGE_GLOW.pulsePeriodMs) /
+        EDGE_GLOW.pulsePeriodMs;
+    return { time, pulse };
+}
+function createRenderer(canvas) {
+    const gl = canvas.getContext("webgl", { premultipliedAlpha: true, antialias: false, alpha: true });
+    if (!gl)
+        return null;
+    const program = gl.createProgram();
+    for (const [type, source] of [
+        [gl.VERTEX_SHADER, VERTEX],
+        [gl.FRAGMENT_SHADER, FRAGMENT],
+    ]) {
+        const shader = gl.createShader(type);
+        if (!shader)
+            return null;
+        gl.shaderSource(shader, source);
+        gl.compileShader(shader);
+        gl.attachShader(program, shader);
+    }
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS))
+        return null;
+    gl.useProgram(program);
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const position = gl.getAttribLocation(program, "p");
+    gl.enableVertexAttribArray(position);
+    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+    const u = (name) => gl.getUniformLocation(program, name);
+    const [uR, uD, uT, uW, uA, uI, uP, uQ] = ["R", "D", "T", "W", "A", "I", "P", "Q"].map(u);
+    return {
+        draw(width, height, ratio, intensity, epochMs) {
+            const w = Math.round(width * ratio);
+            const h = Math.round(height * ratio);
+            if (canvas.width !== w || canvas.height !== h) {
+                canvas.width = w;
+                canvas.height = h;
+                gl.viewport(0, 0, w, h);
+            }
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            if (intensity < 0.003)
+                return;
+            const { time, pulse } = edgeGlowClock(epochMs);
+            gl.uniform2f(uR ?? null, w, h);
+            gl.uniform1f(uD ?? null, ratio);
+            gl.uniform1f(uT ?? null, time);
+            gl.uniform1f(uW ?? null, EDGE_GLOW.width);
+            gl.uniform1f(uA ?? null, EDGE_GLOW.swell);
+            gl.uniform1f(uI ?? null, intensity);
+            gl.uniform1f(uP ?? null, EDGE_GLOW.pulse);
+            gl.uniform1f(uQ ?? null, pulse);
+            gl.drawArrays(gl.TRIANGLES, 0, 3);
+        },
+    };
+}
+function isShown(element) {
+    return typeof element.checkVisibility === "function" ? element.checkVisibility({ visibilityProperty: true }) : true;
+}
+/**
+ * La lueur du chargement de page : une bande tricolore le long du bord de son parent (qui fixe la
+ * taille et l'arrondi, `overflow: hidden`). Elle pousse depuis le bord quand elle devient visible et
+ * s'y retire quand elle se cache ; l'animation ne tourne que pendant ce temps. Sans WebGL, avant
+ * l'hydratation, ou avec le mouvement réduit (une image fixe), le CSS dessine une lueur immobile
+ * (`[data-slot="edge-glow"]:not([data-live])`).
+ */
+export function EdgeGlow() {
+    const ref = useRef(null);
+    useEffect(() => {
+        const canvas = ref.current;
+        if (!canvas)
+            return;
+        const renderer = createRenderer(canvas);
+        if (!renderer)
+            return;
+        const still = window.matchMedia("(prefers-reduced-motion: reduce)");
+        canvas.dataset["live"] = "";
+        let frame = 0;
+        let intensity = 0;
+        let last = performance.now();
+        const tick = (now) => {
+            frame = 0;
+            const shown = isShown(canvas);
+            const dt = Math.min((now - last) / 1000, 0.05);
+            last = now;
+            const target = shown ? 1 : 0;
+            intensity = still.matches ? target : intensity + (target - intensity) * (1 - Math.exp(-dt * (shown ? 5 : 7)));
+            // Mouvement réduit : une image fixe, toujours la même.
+            const epoch = still.matches ? 0 : performance.timeOrigin + now;
+            const { width, height } = canvas.getBoundingClientRect();
+            renderer.draw(width, height, Math.min(window.devicePixelRatio || 1, 1.5), intensity, epoch);
+            if (still.matches || (!shown && intensity < 0.003))
+                return;
+            frame = requestAnimationFrame(tick);
+        };
+        const wake = (event) => {
+            if (event && !(event.target instanceof Element && event.target.contains(canvas)))
+                return;
+            if (frame)
+                return;
+            last = performance.now();
+            frame = requestAnimationFrame(tick);
+        };
+        wake();
+        // Le chargeur s'affiche par une transition CSS (`:has`) : elle réveille la boucle.
+        document.addEventListener("transitionrun", wake);
+        const onMotionChange = () => wake();
+        still.addEventListener("change", onMotionChange);
+        return () => {
+            cancelAnimationFrame(frame);
+            document.removeEventListener("transitionrun", wake);
+            still.removeEventListener("change", onMotionChange);
+        };
+    }, []);
+    return _jsx("canvas", { ref: ref, "data-slot": "edge-glow", "aria-hidden": true });
+}

package/dist/family-loader.d.ts

@@ -26,22 +26,23 @@ export declare const FamilyLoaderRootContext: React.Context<boolean>;
  * 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
+ * Un chargement de page ne montre pas ce H : c'est `PagePending`, qui passe par la lueur du
+ * document (`FamilyLoaderRoot`, `EdgeGlow`). Ce composant sert au H en
  * ligne (une carte, un panneau) ; dans un bouton ou une ligne, `Spinner` reste la règle.
  */
 export declare function FamilyLoader({ size, label, page, className, }: {
     /** `sm` 24 px, `md` 40 px, `lg` 64 px. Par défaut `lg` en page, `md` sinon. */
     size?: keyof typeof SIZES;
     label?: string;
-    /** Chargement de toute la page : passe par le H du document, comme `PagePending`. */
+    /** Chargement de toute la page : passe par la lueur du document, comme `PagePending`. */
     page?: boolean;
     className?: string;
 }): React.JSX.Element;
 /**
- * Le H du document : un seul élément, en position fixe sur la scène (la zone de contenu de la
- * coque), toujours monté, que le CSS montre quand une page attend ou que la coque charge. Monté par
- * `FamilyLoaderRoot`, ou, à défaut, par la coque ou par `PagePending` eux-mêmes.
+ * Le chargeur du document : la lueur du bord (`EdgeGlow`), en position fixe sur la carte du contenu
+ * de la coque (tout l'écran sur téléphone), toujours montée, que le CSS montre quand une page attend
+ * ou que la coque charge. Monté par `FamilyLoaderRoot`, ou, à défaut, par la coque ou par
+ * `PagePending` eux-mêmes.
  */
 export declare function FamilyLoaderHost(): React.JSX.Element;
 /**
@@ -54,14 +55,14 @@ export declare function FamilyLoaderHost(): React.JSX.Element;
  * </body>
  * ```
  *
- * Il rend le H dans le HTML du serveur, avant l'hydratation, à la même place et à la même phase
+ * Il rend la lueur dans le HTML du serveur (repli CSS avant l'hydratation), à la même place et à la même phase
  * que dans la coque et que dans le produit qu'on vient de quitter (ADR 0015).
  */
 export declare function FamilyLoaderRoot({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
 /**
- * La place d'une page qui attend, hors de la coque : sa seule présence montre le H du document
+ * La place d'une page qui attend, hors de la coque : sa seule présence montre la lueur du document
  * (CSS `:has`), dès le rendu serveur. Sans `FamilyLoaderRoot`, elle monte son propre H.
  */
 export declare function PageLoadingPlaceholder({ label, hasRoot, className, }: {

package/dist/family-loader.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useLayoutEffect, useRef } from "react";
 import { cn } from "./cn.js";
+import { EdgeGlow } from "./edge-glow.js";
 import { useBackgroundOrganizationRefresh } from "./product-switch.js";
 import { ShellFrame } from "./shell-frame.js";
 const SIZES = { sm: 24, md: 40, lg: 64 };
@@ -35,12 +36,6 @@ export function syncFamilyLoader(root) {
             animation.startTime = start;
     }
 }
-/**
- * Même calage, en ligne dans le HTML rendu par le serveur, juste après l'élément : il s'exécute
- * avant l'hydratation, une fois la feuille de style chargée (un script attend les feuilles de
- * style qui le précèdent). Une animation recréée (mouvement réduit basculé) se recale aussi.
- */
-const SYNC_SCRIPT = `(function(e){if(!e||!e.getAnimations)return;var p=${FAMILY_LOADER_PERIOD_MS};function s(){var t=-(((performance.timeOrigin%p)+p)%p);e.getAnimations({subtree:true}).forEach(function(a){if(String(a.animationName).indexOf("family-loader")===0&&a.startTime!==t)a.startTime=t})}s();e.addEventListener("animationstart",s)})(document.currentScript&&document.currentScript.previousElementSibling)`;
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 /** Cale le H sur l'horloge au montage et à chaque animation recréée. */
 function useClockSync(ref) {
@@ -70,8 +65,8 @@ export const FamilyLoaderRootContext = createContext(false);
  * 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
+ * Un chargement de page ne montre pas ce H : c'est `PagePending`, qui passe par la lueur du
+ * document (`FamilyLoaderRoot`, `EdgeGlow`). Ce composant sert au H en
  * ligne (une carte, un panneau) ; dans un bouton ou une ligne, `Spinner` reste la règle.
  */
 export function FamilyLoader({ size, label = "Chargement…", page = false, className, }) {
@@ -86,14 +81,13 @@ function FamilyMark({ px, label, className, }) {
     return (_jsx("span", { ref: ref, ...(label ? { role: "status", "aria-label": label } : { "aria-hidden": true }), "data-slot": "family-loader", className: cn("family-loader", className), style: { ["--family-loader-size"]: `${px}px` }, children: _jsx(Mark, {}) }));
 }
 /**
- * Le H du document : un seul élément, en position fixe sur la scène (la zone de contenu de la
- * coque), toujours monté, que le CSS montre quand une page attend ou que la coque charge. Monté par
- * `FamilyLoaderRoot`, ou, à défaut, par la coque ou par `PagePending` eux-mêmes.
+ * Le chargeur du document : la lueur du bord (`EdgeGlow`), en position fixe sur la carte du contenu
+ * de la coque (tout l'écran sur téléphone), toujours montée, que le CSS montre quand une page attend
+ * ou que la coque charge. Monté par `FamilyLoaderRoot`, ou, à défaut, par la coque ou par
+ * `PagePending` eux-mêmes.
  */
 export function FamilyLoaderHost() {
-    const ref = useRef(null);
-    useClockSync(ref);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: ref, "data-slot": "family-loader-root", "aria-hidden": true, children: [_jsx("div", { "data-frame": true, children: _jsx(ShellFrame, {}) }), _jsx("div", { "data-stage": true, children: _jsx("span", { "data-slot": "family-loader", className: "family-loader", style: { ["--family-loader-size"]: "64px" }, children: _jsx(Mark, {}) }) })] }), _jsx("script", { dangerouslySetInnerHTML: { __html: SYNC_SCRIPT } })] }));
+    return (_jsxs("div", { "data-slot": "family-loader-root", "aria-hidden": true, children: [_jsx("div", { "data-frame": true, children: _jsx(ShellFrame, {}) }), _jsx("div", { "data-glow": true, children: _jsx(EdgeGlow, {}) })] }));
 }
 /**
  * Le chargeur du document, à poser une fois dans le `body` de la route racine, autour de l'app :
@@ -105,7 +99,7 @@ export function FamilyLoaderHost() {
  * </body>
  * ```
  *
- * Il rend le H dans le HTML du serveur, avant l'hydratation, à la même place et à la même phase
+ * Il rend la lueur dans le HTML du serveur (repli CSS avant l'hydratation), à la même place et à la même phase
  * que dans la coque et que dans le produit qu'on vient de quitter (ADR 0015).
  */
 export function FamilyLoaderRoot({ children }) {
@@ -114,7 +108,7 @@ export function FamilyLoaderRoot({ children }) {
     return (_jsxs(FamilyLoaderRootContext, { value: true, children: [children, _jsx(FamilyLoaderHost, {})] }));
 }
 /**
- * La place d'une page qui attend, hors de la coque : sa seule présence montre le H du document
+ * La place d'une page qui attend, hors de la coque : sa seule présence montre la lueur du document
  * (CSS `:has`), dès le rendu serveur. Sans `FamilyLoaderRoot`, elle monte son propre H.
  */
 export function PageLoadingPlaceholder({ label, hasRoot, className, }) {

package/dist/module-bar.js

@@ -17,6 +17,7 @@ import { ProductBadge } from "./product-badge.js";
 import { PRODUCT_PRERENDER_ATTRIBUTE } from "./product-switch.js";
 import { shellProductEntries } from "./products.js";
 import { familyProductName } from "./product-name.js";
+import { lastOrganization } from "./shell-memory.js";
 import { useLeaveOnClick } from "./shell-placement.js";
 import { SIDEBAR_ITEM, SidebarNavBack } from "./sidebar-nav.js";
 import { useSidebarRail } from "./sidebar-rail.js";
@@ -26,6 +27,10 @@ const noSubscription = () => () => { };
 function usePageOrigin() {
     return useSyncExternalStore(noSubscription, () => window.location.origin, () => undefined);
 }
+/** Dernière organisation ouverte après l'hydratation, `null` au rendu serveur (lien vers l'accueil d'abord). */
+function useLastOrganization() {
+    return useSyncExternalStore(noSubscription, lastOrganization, () => null);
+}
 const GROUP_LABEL = "px-3 pt-3 pb-1.5 text-xs font-medium text-muted-foreground lg:text-shell-muted lg:rail:sr-only";
 function ShellEntryLink({ entry, icon, onOpenCurrent, }) {
     const rail = useSidebarRail();
@@ -83,8 +88,9 @@ function ModuleBarEditor({ order, onSave, onCancel, }) {
  */
 export function ShellNavigation({ product, nav, accountHref, level, onLevelChange, projectModules, }) {
     const pageOrigin = usePageOrigin();
+    const organization = useLastOrganization();
     const order = useModuleBar();
-    const { products, account } = shellProductEntries({ current: product, accountHref, pageOrigin });
+    const { products, account } = shellProductEntries({ current: product, accountHref, pageOrigin, organization });
     return (_jsxs("div", { "data-slot": "shell-navigation", className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { "data-slot": "shell-manager", className: "shrink-0 px-3 pt-1", children: [_jsx("ul", { children: _jsx(ShellEntryLink, { entry: account, icon: UserGroupIcon }) }), _jsx("div", { "aria-hidden": true, className: "mx-2 mt-2 h-px bg-foreground/8" })] }), level === "modules" ? (_jsx(ModuleList, { entries: products, order: shownModules(order, product).filter((word) => !projectModules || word === product || projectModules.includes(word)), onOpenCurrent: () => onLevelChange("tabs"), onCustomize: () => onLevelChange("edit") })) : level === "edit" ? (_jsx(ModuleBarEditor, { order: order, onSave: (next) => {
                     saveModuleBar(next);
                     void pushModuleBar(next);

package/dist/page-pending.d.ts

@@ -13,17 +13,17 @@ export declare const NAVIGATION_PROGRESS_MS = 150;
 export declare const NAVIGATION_PROGRESS_MIN_MS = 300;
 /**
  * Calque de la zone de contenu, sous l'en-tête de la coque (56 px), opaque : il cache la page
- * pendant le départ vers un autre module, le H du document par-dessus (ADR 0015, 0020).
+ * pendant le départ vers un autre module, la lueur du document par-dessus (ADR 0015, 0020).
  */
 export declare const CONTENT_LOADING_LAYER = "absolute inset-x-0 top-14 bottom-0 z-20 bg-background";
-/** Vrai dans la zone de contenu d'`AppShell` : une page qui attend y montre son squelette, pas le H. */
+/** Vrai dans la zone de contenu d'`AppShell` : une page qui attend y montre son squelette, pas la lueur. */
 export declare const ShellContentContext: React.Context<boolean>;
 /**
  * Le chargement d'une page.
  *
  * - **Dans la coque** (`AppShell`) : le squelette de la page (`PageSkeleton`), la coque restant en
- *   place. Jamais le H : il est réservé au document qui n'a pas encore de coque (ADR 0025).
- * - **Hors de la coque** (page d'entrée, rendu serveur sans coque) : le H du document
+ *   place. Jamais la lueur : elle est réservée au document qui n'a pas encore de coque (ADR 0025).
+ * - **Hors de la coque** (page d'entrée, rendu serveur sans coque) : la lueur du document
  *   (`FamilyLoaderRoot`), au même pixel que dans la coque (ADR 0015).
  *
  * Composant par défaut de `pendingComponent` (`routerPendingDefaults`) et repli de la frontière

package/dist/page-pending.js

@@ -16,17 +16,17 @@ export const NAVIGATION_PROGRESS_MS = 150;
 export const NAVIGATION_PROGRESS_MIN_MS = 300;
 /**
  * Calque de la zone de contenu, sous l'en-tête de la coque (56 px), opaque : il cache la page
- * pendant le départ vers un autre module, le H du document par-dessus (ADR 0015, 0020).
+ * pendant le départ vers un autre module, la lueur du document par-dessus (ADR 0015, 0020).
  */
 export const CONTENT_LOADING_LAYER = "absolute inset-x-0 top-14 bottom-0 z-20 bg-background";
-/** Vrai dans la zone de contenu d'`AppShell` : une page qui attend y montre son squelette, pas le H. */
+/** Vrai dans la zone de contenu d'`AppShell` : une page qui attend y montre son squelette, pas la lueur. */
 export const ShellContentContext = createContext(false);
 /**
  * Le chargement d'une page.
  *
  * - **Dans la coque** (`AppShell`) : le squelette de la page (`PageSkeleton`), la coque restant en
- *   place. Jamais le H : il est réservé au document qui n'a pas encore de coque (ADR 0025).
- * - **Hors de la coque** (page d'entrée, rendu serveur sans coque) : le H du document
+ *   place. Jamais la lueur : elle est réservée au document qui n'a pas encore de coque (ADR 0025).
+ * - **Hors de la coque** (page d'entrée, rendu serveur sans coque) : la lueur du document
  *   (`FamilyLoaderRoot`), au même pixel que dans la coque (ADR 0015).
  *
  * Composant par défaut de `pendingComponent` (`routerPendingDefaults`) et repli de la frontière

package/dist/product-switch.d.ts

@@ -4,6 +4,15 @@ export declare const ORG_SYNC_COOKIE = "hgdc-org-sync";
 export declare const BACKGROUND_REFRESH_PATH = "/auth/hgdc?refresh=1&frame=1";
 /** Abandon du cadre s'il ne s'est pas chargé : Account injoignable, réseau coupé. */
 export declare const BACKGROUND_REFRESH_TIMEOUT_MS = 20000;
+/**
+ * Une relecture au plus par produit pendant ce délai. Elle refait une connexion complète chez ID
+ * (environ 3 s côté serveur, pendant le chargement de la page) : la refaire à chaque passage d'un
+ * produit à l'autre ralentissait la navigation (2026-11-11). Les changements d'appartenance arrivent
+ * déjà en direct par les événements d'Account ; la relecture n'est qu'un filet.
+ */
+export declare const BACKGROUND_REFRESH_INTERVAL_MS: number;
+/** Heure de la dernière relecture d'un produit, en `localStorage` : `hgdc-org-sync:<base>` (`/` à la racine). */
+export declare const ORG_SYNC_LAST_KEY_PREFIX = "hgdc-org-sync:";
 /** Marque d'un lien de la barre vers un autre produit servi sous la même origine : prérendu au survol. */
 export declare const PRODUCT_PRERENDER_ATTRIBUTE = "data-hgdc-prerender";
 /**
@@ -30,12 +39,13 @@ export declare function takeOrgSync(doc?: Document): string | null;
 /** Lit et efface le cookie de relecture. Vrai s'il était posé. */
 export declare function takeOrgSyncCookie(doc?: Document): boolean;
 /**
- * Relit les organisations dans un cadre caché, une fois, si l'entrée l'a demandé. Le cadre n'a
- * ni script ni formulaire (`sandbox`), il suit seulement les redirections d'Account ; la nouvelle
- * session du produit recopie les organisations, et les requêtes Convex abonnées se mettent à jour.
- * Si la session d'Account a expiré, Account refuse d'être affiché dans un cadre : rien ne se passe,
- * la session du produit reste celle d'avant. Une page prérendue au survol attend d'être affichée :
- * un survol sans clic ne relit rien.
+ * Relit les organisations dans un cadre caché, une fois, si l'entrée l'a demandé et que la dernière
+ * relecture de ce produit date de plus de `BACKGROUND_REFRESH_INTERVAL_MS`. Le cadre n'a ni script ni
+ * formulaire (`sandbox`), il suit seulement les redirections d'Account ; la nouvelle session du
+ * produit recopie les organisations, et les requêtes Convex abonnées se mettent à jour. Si la session
+ * d'Account a expiré, Account refuse d'être affiché dans un cadre : rien ne se passe, la session du
+ * produit reste celle d'avant. Une page prérendue au survol attend d'être affichée : un survol sans
+ * clic ne relit rien.
  */
 export declare function startBackgroundRefresh(doc?: Document): HTMLIFrameElement | null;
 /**

package/dist/product-switch.js

@@ -15,6 +15,15 @@ export const ORG_SYNC_COOKIE = "hgdc-org-sync";
 export const BACKGROUND_REFRESH_PATH = "/auth/hgdc?refresh=1&frame=1";
 /** Abandon du cadre s'il ne s'est pas chargé : Account injoignable, réseau coupé. */
 export const BACKGROUND_REFRESH_TIMEOUT_MS = 20_000;
+/**
+ * Une relecture au plus par produit pendant ce délai. Elle refait une connexion complète chez ID
+ * (environ 3 s côté serveur, pendant le chargement de la page) : la refaire à chaque passage d'un
+ * produit à l'autre ralentissait la navigation (2026-11-11). Les changements d'appartenance arrivent
+ * déjà en direct par les événements d'Account ; la relecture n'est qu'un filet.
+ */
+export const BACKGROUND_REFRESH_INTERVAL_MS = 10 * 60_000;
+/** Heure de la dernière relecture d'un produit, en `localStorage` : `hgdc-org-sync:<base>` (`/` à la racine). */
+export const ORG_SYNC_LAST_KEY_PREFIX = "hgdc-org-sync:";
 /** Marque d'un lien de la barre vers un autre produit servi sous la même origine : prérendu au survol. */
 export const PRODUCT_PRERENDER_ATTRIBUTE = "data-hgdc-prerender";
 /**
@@ -83,12 +92,33 @@ export function takeOrgSyncCookie(doc = document) {
     return takeOrgSync(doc) !== null;
 }
 /**
- * Relit les organisations dans un cadre caché, une fois, si l'entrée l'a demandé. Le cadre n'a
- * ni script ni formulaire (`sandbox`), il suit seulement les redirections d'Account ; la nouvelle
- * session du produit recopie les organisations, et les requêtes Convex abonnées se mettent à jour.
- * Si la session d'Account a expiré, Account refuse d'être affiché dans un cadre : rien ne se passe,
- * la session du produit reste celle d'avant. Une page prérendue au survol attend d'être affichée :
- * un survol sans clic ne relit rien.
+ * Vrai si la relecture de ce produit est due, et note alors l'heure : au plus une toutes les
+ * `BACKGROUND_REFRESH_INTERVAL_MS`. Sans `localStorage` (navigation privée stricte), toujours due.
+ */
+function refreshDue(base, win, now = Date.now()) {
+    const key = `${ORG_SYNC_LAST_KEY_PREFIX}${base || "/"}`;
+    try {
+        const storage = win?.localStorage;
+        if (!storage)
+            return true;
+        const last = Number(storage.getItem(key));
+        if (Number.isFinite(last) && last > 0 && now - last >= 0 && now - last < BACKGROUND_REFRESH_INTERVAL_MS)
+            return false;
+        storage.setItem(key, String(now));
+    }
+    catch {
+        // Stockage refusé : la relecture part, comme avant.
+    }
+    return true;
+}
+/**
+ * Relit les organisations dans un cadre caché, une fois, si l'entrée l'a demandé et que la dernière
+ * relecture de ce produit date de plus de `BACKGROUND_REFRESH_INTERVAL_MS`. Le cadre n'a ni script ni
+ * formulaire (`sandbox`), il suit seulement les redirections d'Account ; la nouvelle session du
+ * produit recopie les organisations, et les requêtes Convex abonnées se mettent à jour. Si la session
+ * d'Account a expiré, Account refuse d'être affiché dans un cadre : rien ne se passe, la session du
+ * produit reste celle d'avant. Une page prérendue au survol attend d'être affichée : un survol sans
+ * clic ne relit rien.
  */
 export function startBackgroundRefresh(doc = document) {
     if (doc.prerendering) {
@@ -96,7 +126,7 @@ export function startBackgroundRefresh(doc = document) {
         return null;
     }
     const base = takeOrgSync(doc);
-    if (base === null)
+    if (base === null || !refreshDue(base, doc.defaultView))
         return null;
     const frame = doc.createElement("iframe");
     frame.hidden = true;

package/dist/products.d.ts

@@ -65,13 +65,19 @@ export type ProductOrigin = {
 export declare const PRODUCT_ORIGINS: Readonly<Record<string, ProductOrigin>>;
 /** Adresse de l'app d'un produit : celle de `PRODUCT_ORIGINS`, sinon `https://<mot>.hgdc.ch`. */
 export declare function productOrigin(word: string, origins?: Readonly<Record<string, ProductOrigin>>): ProductOrigin;
-/** Entrée dans l'app d'un produit avec la session HGDC : `https://app.hgdc.ch/analytics/auth/hgdc?refresh=background&next=/`. */
-export declare function productEntryHref(word: string, origins?: Readonly<Record<string, ProductOrigin>>): string;
+/**
+ * Entrée dans l'app d'un produit avec la session HGDC : `https://app.hgdc.ch/analytics/auth/hgdc?refresh=background&next=/`.
+ * Avec `organization` (slug de la dernière organisation ouverte), l'entrée mène droit à
+ * `/o/<organisation>` : sans les redirections de l'accueil (`/`, puis `/dashboard` ou `/o/…`).
+ */
+export declare function productEntryHref(word: string, origins?: Readonly<Record<string, ProductOrigin>>, organization?: string | null): string;
 /**
  * Requête de l'entrée depuis un autre produit : arriver sur l'accueil, relire les organisations en
  * arrière-plan (`refresh=background`, ADR 0016).
  */
 export declare const PRODUCT_ENTRY_REFRESH_QUERY = "refresh=background&next=/";
+/** Requête de l'entrée : `refresh=background` toujours en tête (règles de prérendu), `next` vers l'organisation si connue. */
+export declare function productEntryQuery(word: string, organization?: string | null): string;
 export declare const HGDC_ACCOUNT: HgdcCatalogProduct;
 /** Manager : les organisations, leurs membres et leurs rôles. En tête du menu et de la barre des produits. */
 export declare const HGDC_MANAGER: HgdcCatalogProduct;
@@ -137,6 +143,8 @@ export declare function shellProductEntries(options?: {
     accountHref?: string | undefined;
     catalog?: ReadonlyArray<HgdcCatalogProduct> | undefined;
     pageOrigin?: string | undefined;
+    /** Dernière organisation ouverte (`lastOrganization()`, absente au rendu serveur) : l'entrée y mène droit. */
+    organization?: string | null | undefined;
 }): {
     products: Array<ShellProductEntry>;
     account: ShellProductEntry;

package/dist/products.js

@@ -37,16 +37,32 @@ export function productOrigin(word, origins = PRODUCT_ORIGINS) {
     const key = word.toLowerCase();
     return Object.hasOwn(origins, key) ? origins[key] : { origin: `https://${key}.hgdc.ch`, basePath: "" };
 }
-/** Entrée dans l'app d'un produit avec la session HGDC : `https://app.hgdc.ch/analytics/auth/hgdc?refresh=background&next=/`. */
-export function productEntryHref(word, origins = PRODUCT_ORIGINS) {
+/**
+ * Entrée dans l'app d'un produit avec la session HGDC : `https://app.hgdc.ch/analytics/auth/hgdc?refresh=background&next=/`.
+ * Avec `organization` (slug de la dernière organisation ouverte), l'entrée mène droit à
+ * `/o/<organisation>` : sans les redirections de l'accueil (`/`, puis `/dashboard` ou `/o/…`).
+ */
+export function productEntryHref(word, origins = PRODUCT_ORIGINS, organization) {
     const app = productOrigin(word, origins);
-    return `${app.origin}${app.basePath}${PRODUCT_ENTRY_PATH}?${PRODUCT_ENTRY_REFRESH_QUERY}`;
+    return `${app.origin}${app.basePath}${PRODUCT_ENTRY_PATH}?${productEntryQuery(word, organization)}`;
 }
 /**
  * Requête de l'entrée depuis un autre produit : arriver sur l'accueil, relire les organisations en
  * arrière-plan (`refresh=background`, ADR 0016).
  */
 export const PRODUCT_ENTRY_REFRESH_QUERY = "refresh=background&next=/";
+/** Slug d'organisation tel que les produits l'écrivent dans `/o/<slug>` : rien d'autre ne part dans `next`. */
+const ORGANIZATION_SLUG = /^[a-z0-9][a-z0-9-]{0,62}$/;
+/** Produits dont `/o/<slug>` est la page d'une organisation. Manager les désigne par leur identifiant. */
+function opensOrganizationBySlug(word) {
+    return word.toLowerCase() !== "manager";
+}
+/** Requête de l'entrée : `refresh=background` toujours en tête (règles de prérendu), `next` vers l'organisation si connue. */
+export function productEntryQuery(word, organization) {
+    if (!organization || !ORGANIZATION_SLUG.test(organization) || !opensOrganizationBySlug(word))
+        return PRODUCT_ENTRY_REFRESH_QUERY;
+    return `refresh=background&next=${encodeURIComponent(`/o/${organization}`)}`;
+}
 function product(word, pitch, icon, stage, 
 /** Nom affiché quand il diffère du mot de l'adresse : le nom du module (« Déploiements » pour `host`). */
 name = word) {
@@ -147,7 +163,7 @@ export function sameOriginPath(href, pageOrigin) {
  */
 export function shellProductEntries(options = {}) {
     const current = options.current?.toLowerCase();
-    const { pageOrigin } = options;
+    const { pageOrigin, organization } = options;
     const entry = (item, href, product) => {
         const base = {
             name: item.name,
@@ -165,7 +181,9 @@ export function shellProductEntries(options = {}) {
     const head = manager ?? HGDC_MANAGER;
     const local = localManagerHref(options.accountHref);
     return {
-        products: others.filter(isProductOpen).map((item) => entry(item, item.entryHref, true)),
+        products: others
+            .filter(isProductOpen)
+            .map((item) => entry(item, organization ? productEntryHref(item.badge, PRODUCT_ORIGINS, organization) : item.entryHref, true)),
         account: entry(head, local ?? head.entryHref, local === undefined),
     };
 }

package/dist/spinner.d.ts

@@ -6,10 +6,11 @@ declare const SIZES: {
     readonly 8: "size-8";
 };
 /**
- * L'anneau d'attente de la DA : un arc arrondi qui tourne sur une piste à peine visible, le
- * même que la page d'attente du portail. Dans un bouton ou une ligne, il prend la couleur du
- * texte (`tone="current"`) ; seul sur une page, il prend l'accent (`tone="accent"`).
- * Mouvement réduit : l'arc ne tourne plus, il respire.
+ * L'anneau d'attente de la DA : un arc arrondi sur une piste à peine visible. La tête avance
+ * toujours, la queue la rattrape, puis l'arc repart d'un point ; l'anneau tourne lentement en même
+ * temps (`styles.css`, `.spinner-*`). Dans un bouton ou une ligne, il prend la couleur du texte
+ * (`tone="current"`) ; seul sur une page, les couleurs du H (`tone="accent"`).
+ * Mouvement réduit : un arc fixe qui respire.
  */
 export declare function Spinner({ className, label, size, tone, }: {
     className?: string;

package/dist/spinner.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { cn } from "./cn.js";
 const SIZES = { 3: "size-3", 4: "size-4", 5: "size-5", 6: "size-6", 8: "size-8" };
 /**
- * L'anneau d'attente de la DA : un arc arrondi qui tourne sur une piste à peine visible, le
- * même que la page d'attente du portail. Dans un bouton ou une ligne, il prend la couleur du
- * texte (`tone="current"`) ; seul sur une page, il prend l'accent (`tone="accent"`).
- * Mouvement réduit : l'arc ne tourne plus, il respire.
+ * L'anneau d'attente de la DA : un arc arrondi sur une piste à peine visible. La tête avance
+ * toujours, la queue la rattrape, puis l'arc repart d'un point ; l'anneau tourne lentement en même
+ * temps (`styles.css`, `.spinner-*`). Dans un bouton ou une ligne, il prend la couleur du texte
+ * (`tone="current"`) ; seul sur une page, les couleurs du H (`tone="accent"`).
+ * Mouvement réduit : un arc fixe qui respire.
  */
 export function Spinner({ className, label, size = 4, tone = "current", }) {
-    return (_jsxs("span", { role: "status", className: cn("inline-flex items-center gap-2", className), children: [_jsxs("svg", { viewBox: "0 0 32 32", fill: "none", "aria-hidden": true, className: cn("shrink-0", SIZES[size]), children: [_jsx("circle", { cx: "16", cy: "16", r: "13", strokeWidth: "4", className: "stroke-current opacity-15" }), _jsx("circle", { cx: "16", cy: "16", r: "13", strokeWidth: "4", strokeLinecap: "round", strokeDasharray: "22 60", className: cn("origin-center animate-spin motion-reduce:animate-pulse", tone === "accent" ? "stroke-accent" : "stroke-current") })] }), label ? _jsx("span", { children: label }) : _jsx("span", { className: "sr-only", children: "Chargement" })] }));
+    const gradient = useId();
+    return (_jsxs("span", { role: "status", className: cn("inline-flex items-center gap-2", className), children: [_jsxs("svg", { viewBox: "0 0 32 32", fill: "none", "aria-hidden": true, className: cn("shrink-0", SIZES[size]), children: [tone === "accent" ? (_jsx("defs", { children: _jsxs("linearGradient", { id: gradient, x1: "0", y1: "0", x2: "1", y2: "1", children: [_jsx("stop", { offset: "0", stopColor: "#2c78fd" }), _jsx("stop", { offset: "0.45", stopColor: "#7343fe" }), _jsx("stop", { offset: "0.8", stopColor: "#fe5292" }), _jsx("stop", { offset: "1", stopColor: "#ff9a46" })] }) })) : null, _jsx("circle", { cx: "16", cy: "16", r: "12", strokeWidth: "4", className: "stroke-current opacity-15" }), _jsx("g", { className: "spinner-rotor", children: _jsx("circle", { cx: "16", cy: "16", r: "12", strokeWidth: "4", strokeLinecap: "round", pathLength: 100, transform: "rotate(-90 16 16)", className: cn("spinner-arc", tone === "accent" ? null : "stroke-current"), ...(tone === "accent" ? { stroke: `url(#${gradient})` } : {}) }) })] }), label ? _jsx("span", { children: label }) : _jsx("span", { className: "sr-only", children: "Chargement" })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.71.0",
+  "version": "0.72.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

@@ -558,6 +558,50 @@
   animation: rise 420ms var(--ease-ios) both;
 }
 
+/* L'anneau d'attente (`Spinner`) : la tête de l'arc avance de 1 à 99 % du tour pendant que la
+   queue reste, puis la queue la rattrape (la tête ne recule jamais) ; l'anneau tourne lentement,
+   chaque départ tombe un peu plus loin. */
+@keyframes spinner-arc {
+  0% {
+    stroke-dasharray: 1 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 71 150;
+    stroke-dashoffset: -28;
+  }
+  100% {
+    stroke-dasharray: 71 150;
+    stroke-dashoffset: -99;
+  }
+}
+@keyframes spinner-rotor {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-breathe {
+  50% {
+    opacity: 0.45;
+  }
+}
+.spinner-rotor {
+  transform-origin: 50% 50%;
+  animation: spinner-rotor 1.6s linear infinite;
+}
+.spinner-arc {
+  animation: spinner-arc 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spinner-rotor {
+    animation: none;
+  }
+  .spinner-arc {
+    stroke-dasharray: 30 150;
+    animation: spinner-breathe 1.6s ease-in-out infinite;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .soft-in,
   .pop-in,
@@ -792,11 +836,11 @@
   }
 }
 
-/* Le chargeur du document (`FamilyLoaderRoot`) : un seul H par page, en position fixe sur la scène.
-   Visible quand une page attend (`PagePending`) hors de la coque, ou quand la coque part vers un
-   autre module (`data-loading`). Dans la coque, une page qui attend montre son squelette, jamais
-   le H (ADR 0025). Masqué avec 80 ms de retenue : un `PagePending` qui laisse la place à un autre ne fait
-   pas clignoter le H. */
+/* Le chargeur du document (`FamilyLoaderRoot`) : une seule lueur par page, en position fixe sur la
+   carte du contenu. Visible quand une page attend (`PagePending`) hors de la coque, ou quand la
+   coque part vers un autre module (`data-loading`). Dans la coque, une page qui attend montre son
+   squelette, jamais la lueur (ADR 0025). Masqué avec 80 ms de retenue : un `PagePending` qui laisse
+   la place à un autre ne fait pas clignoter la lueur. */
 [data-slot="family-loader-root"] {
   position: fixed;
   inset: 0;
@@ -816,14 +860,33 @@
     opacity 150ms var(--ease-out),
     visibility 0s;
 }
-[data-slot="family-loader-root"] > [data-stage] {
+/* La lueur du chargement (`EdgeGlow`) : tout l'écran sur téléphone ; sur ordinateur, la carte du
+   contenu de la coque (marge de 8 px, `rounded-xl`), en-tête compris. */
+[data-slot="family-loader-root"] > [data-glow] {
   position: fixed;
-  top: var(--hgdc-stage-top);
-  right: var(--hgdc-stage-right);
-  bottom: var(--hgdc-stage-bottom);
-  left: var(--hgdc-stage-left);
-  display: grid;
-  place-items: center;
+  inset: 0;
+  overflow: hidden;
+}
+@media (width >= 64rem) {
+  [data-slot="family-loader-root"] > [data-glow] {
+    inset: 0.5rem 0.5rem 0.5rem var(--hgdc-content-left);
+    border-radius: var(--radius-xl);
+  }
+}
+[data-slot="edge-glow"] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+/* Sans WebGL ou avant l'hydratation : une lueur immobile, mêmes couleurs, dessinée par le CSS. */
+[data-slot="edge-glow"]:not([data-live]) {
+  padding: 1.5rem;
+  background: conic-gradient(#2c78fd, #7343fe, #fe5292, #ff9a46, #fe5292, #7343fe, #2c78fd);
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+  filter: blur(1.25rem);
+  opacity: 0.6;
 }
 /* Hors de la coque, le cadre de la coque : la page qui arrive a déjà sa forme, le H sa place. */
 [data-slot="family-loader-root"] > [data-frame] {
@@ -877,7 +940,7 @@
 }
 
 /* Calque de la zone de contenu (`AppShell`) pendant le départ vers un autre module : opaque,
-   au-dessus de la page, sous le H du document. Même rythme que le H. */
+   au-dessus de la page, sous la lueur du document. Même rythme que la lueur. */
 [data-slot="app-shell-loading"] {
   opacity: 0;
   visibility: hidden;
@@ -970,7 +1033,7 @@
 }
 :root:has([data-slot="page-pending"]):not(:has([data-slot="app-shell"])),
 :root:has([data-slot="app-shell"][data-loading]) {
-  & [data-slot="family-loader-root"] > [data-stage] {
+  & [data-slot="family-loader-root"] > [data-glow] {
     view-transition-name: hgdc-loader;
   }
 }