From 19ea2e59cbf431919bdd59f6000b8f8bf34bb87a Mon Sep 17 00:00:00 2001
From: Thierry <thierryvm@gmail.com>
Date: Thu, 4 Jun 2026 15:28:21 +0200
Subject: [PATCH 1/3] =?UTF-8?q?feat(nav):=20THI-341=20sidebar=20=C3=A9pur?=
 =?UTF-8?q?=C3=A9e=20+=20menu=20avatar=20pour=20le=20secondaire?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix the reported mobile bug (modules unreachable, sidebar overcrowded on iPhone):
move ALL secondary nav into the avatar menu so the sidebar focuses on the
essentials (Tableau de bord + Référence + Modules + OS switch — untouched).

- UserMenu: `card` variant (sidebar) evolves into an avatar menu — trigger row
  (avatar+name+sync) → dropdown opening UPWARD (bottom-full) with the secondary
  items + Mon profil + Se déconnecter. `compact` (landing) preserved + now also
  renders secondaryItems. Reuses the existing CSP-safe custom dropdown (no Radix,
  zero inline styles — same reason as the THI-320 native <select>).
- New prop `secondaryItems` (role-gated by the CALLER = Sidebar/RBAC; UserMenu
  stays "dumb" — no permission logic in the display component = security).
- Sidebar: removed "Mes outils" (collapsible) + "Compte & aide" from the vertical
  nav → passed as secondaryItems to UserMenu (Mes classes/institution/admin
  role-gated + Paramètres IA + Aide & feedback [modal] + Mes signalements).
- Guest access to Paramètres IA (BYOK, anonymous-friendly) preserved via a link in
  the "Mode invité" block (the avatar menu doesn't render for guests).
- auth.test rewritten for the new card-as-menu behavior + secondaryItems coverage.

2058 tests pass, type-check + lint clean. Voie A (guest + logged-in, desktop +
mobile 390px) + gates to follow. THI-341.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/components/Sidebar.tsx       | 231 ++--------------------
 src/app/components/auth/UserMenu.tsx | 275 +++++++++++++++++----------
 src/test/auth.test.tsx               |  52 +++--
 3 files changed, 223 insertions(+), 335 deletions(-)

diff --git a/src/app/components/Sidebar.tsx b/src/app/components/Sidebar.tsx
index 8d695da3..e3f12dbb 100644
--- a/src/app/components/Sidebar.tsx
+++ b/src/app/components/Sidebar.tsx
@@ -4,9 +4,9 @@ import { useFocusTrap } from '../../lib/hooks/useFocusTrap';
 import { useUserRole } from '../../lib/hooks/useUserRole';
 import {
   Terminal, LayoutDashboard, BookOpen, Settings,
-  ChevronDown, ChevronRight, CheckCircle2, Circle, X, Menu, Home, Lock, School, ShieldCheck, ShieldUser, Briefcase, LifeBuoy, Inbox,
+  ChevronDown, ChevronRight, CheckCircle2, Circle, X, Menu, Home, Lock, School, ShieldCheck, ShieldUser, LifeBuoy, Inbox,
 } from 'lucide-react';
-import { UserMenu } from './auth/UserMenu';
+import { UserMenu, type UserMenuSecondaryItem } from './auth/UserMenu';
 import { useAuth } from '../context/AuthContext';
 import { SupportTicketModal } from './support/SupportTicketModal';
 import { curriculum } from '../data/curriculum';
@@ -75,31 +75,18 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
   const canSeeInstitutionEntry = role === 'institution_admin' || role === 'super_admin';
   const canSeeAdminEntry = role === 'super_admin';
 
-  // THI-240 — "Mes outils" collapsible section.
-  // Sprint 2.B.3 (27 mai 2026) — refactor sidebar saturation pour super_admin
-  // qui voit 3 entries role-gated (Mes classes + Mon institution + Administration).
-  // Seuil empirique : ≥ 2 entries → collapsible (gain ~132px modules space).
-  // ≤ 1 entry → flat (pas de friction inutile click-to-expand pour 1 lien).
-  // Persist en localStorage pour préserver le state utilisateur (default = closed
-  // pour maximiser l'espace modules immédiat — l'utilisateur peut expand au besoin).
-  const roleGatedCount =
-    (canSeeTeacherEntry ? 1 : 0) +
-    (canSeeInstitutionEntry ? 1 : 0) +
-    (canSeeAdminEntry ? 1 : 0);
-  const useMesOutilsCollapsible = roleGatedCount >= 2;
-  const [mesOutilsOpen, setMesOutilsOpen] = useState<boolean>(() => {
-    if (typeof window === 'undefined') return false;
-    return localStorage.getItem('tl-sidebar-mes-outils-open') === 'true';
-  });
-  const toggleMesOutils = () => {
-    setMesOutilsOpen((prev) => {
-      const next = !prev;
-      if (typeof window !== 'undefined') {
-        localStorage.setItem('tl-sidebar-mes-outils-open', String(next));
-      }
-      return next;
-    });
-  };
+  // THI-341 — items secondaires affichés dans le menu avatar (UserMenu, bas de
+  // sidebar). Le role-gating reste ICI (RBAC en un seul endroit) ; UserMenu ne fait
+  // que rendre la liste fournie. « Aide & feedback » ouvre le modal support (onClick,
+  // pas une route). Désencombre la nav → les modules/leçons gagnent l'espace.
+  const secondaryItems: UserMenuSecondaryItem[] = [
+    ...(canSeeTeacherEntry ? [{ label: 'Mes classes', to: '/app/teacher', icon: <School size={14} /> }] : []),
+    ...(canSeeInstitutionEntry ? [{ label: 'Mon institution', to: '/app/institution', icon: <ShieldUser size={14} /> }] : []),
+    ...(canSeeAdminEntry ? [{ label: 'Administration', to: '/app/admin', icon: <ShieldCheck size={14} /> }] : []),
+    { label: 'Paramètres IA', to: '/app/settings', icon: <Settings size={14} /> },
+    ...(user ? [{ label: 'Aide & feedback', onClick: () => setSupportOpen(true), icon: <LifeBuoy size={14} /> }] : []),
+    ...(user ? [{ label: 'Mes signalements', to: '/app/support', icon: <Inbox size={14} /> }] : []),
+  ];
   // Module actif déduit de la route leçon (/app/learn/:moduleId/:lessonId) via le
   // matching natif du routeur (useMatch) plutôt qu'une regex sur pathname : reste
   // aligné sur la définition de route et ne casse pas silencieusement si la route
@@ -246,190 +233,11 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
             <BookOpen size={16} />
             Référence
           </NavLink>
-          {/* THI-240 — "Mes outils" collapsible role-gated section.
-              Sprint 2.B.3 (27 mai 2026, PR #309 — audit ui-auditor Sonnet upgrade).
-              ≥ 2 entries role-gated → collapsible (gain ~132px modules space pour
-              super_admin avec 3 entries). 1 entry → flat (teacher / institution_admin
-              voient 1 lien sans friction expand). */}
-          {useMesOutilsCollapsible ? (
-            <div>
-              {/* ui-auditor C1 fix : réutilise Button variant=tl-sidebar-row + size=tl-sidebar-row
-                  au lieu de raw <button> avec classes manuelles dupliquées. Cohérent avec le
-                  pattern shadcn existant + SidebarRowButton (modules). text-secondary surcharge
-                  le text-primary du variant car le toggle n'est pas "actif" par défaut. */}
-              <Button
-                type="button"
-                variant="tl-sidebar-row"
-                size="tl-sidebar-row"
-                onClick={toggleMesOutils}
-                aria-expanded={mesOutilsOpen}
-                aria-controls="sidebar-mes-outils"
-                className="text-[var(--github-text-secondary)] hover:text-[var(--github-text-primary)]"
-              >
-                <Briefcase size={16} />
-                <span className="flex-1 text-left">Mes outils</span>
-                <span className="text-xs text-[var(--github-text-secondary)] font-mono">{roleGatedCount}</span>
-                {mesOutilsOpen ? (
-                  <ChevronDown size={14} className="size-[14px] text-[var(--github-text-secondary)] shrink-0" />
-                ) : (
-                  <ChevronRight size={14} className="size-[14px] text-[var(--github-text-secondary)] shrink-0" />
-                )}
-              </Button>
-              {mesOutilsOpen && (
-                <div
-                  id="sidebar-mes-outils"
-                  className="ml-3 pl-3 border-l border-[var(--github-border-secondary)] space-y-0.5 mt-0.5 mb-1"
-                >
-                  {canSeeTeacherEntry && (
-                    <NavLink
-                      to="/app/teacher"
-                      onClick={onClose}
-                      className={({ isActive }) =>
-                        `flex items-center gap-2.5 min-h-11 px-3 py-2 rounded-lg text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 ${
-                          isActive
-                            ? 'bg-[#21262d] text-[var(--github-text-primary)]'
-                            : 'text-[var(--github-text-secondary)] hover:bg-[var(--github-border-secondary)] hover:text-[var(--github-text-primary)]'
-                        }`
-                      }
-                    >
-                      <School size={16} />
-                      Mes classes
-                    </NavLink>
-                  )}
-                  {canSeeInstitutionEntry && (
-                    <NavLink
-                      to="/app/institution"
-                      onClick={onClose}
-                      className={({ isActive }) =>
-                        `flex items-center gap-2.5 min-h-11 px-3 py-2 rounded-lg text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 ${
-                          isActive
-                            ? 'bg-[#21262d] text-[var(--github-text-primary)]'
-                            : 'text-[var(--github-text-secondary)] hover:bg-[var(--github-border-secondary)] hover:text-[var(--github-text-primary)]'
-                        }`
-                      }
-                    >
-                      <ShieldUser size={16} />
-                      Mon institution
-                    </NavLink>
-                  )}
-                  {canSeeAdminEntry && (
-                    <NavLink
-                      to="/app/admin"
-                      onClick={onClose}
-                      className={({ isActive }) =>
-                        `flex items-center gap-2.5 min-h-11 px-3 py-2 rounded-lg text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 ${
-                          isActive
-                            ? 'bg-[#21262d] text-[var(--github-text-primary)]'
-                            : 'text-[var(--github-text-secondary)] hover:bg-[var(--github-border-secondary)] hover:text-[var(--github-text-primary)]'
-                        }`
-                      }
-                    >
-                      <ShieldCheck size={16} />
-                      Administration
-                    </NavLink>
-                  )}
-                </div>
-              )}
-            </div>
-          ) : (
-            <>
-              {/* ≤ 1 entry role-gated → flat (pas de friction expand inutile) */}
-              {canSeeTeacherEntry && (
-                <NavLink
-                  to="/app/teacher"
-                  onClick={onClose}
-                  className={({ isActive }) =>
-                    `flex items-center gap-2.5 min-h-11 px-3 py-2 rounded-lg text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 ${
-                      isActive
-                        ? 'bg-[#21262d] text-[var(--github-text-primary)]'
-                        : 'text-[var(--github-text-secondary)] hover:bg-[var(--github-border-secondary)] hover:text-[var(--github-text-primary)]'
-                    }`
-                  }
-                >
-                  <School size={16} />
-                  Mes classes
-                </NavLink>
-              )}
-              {canSeeInstitutionEntry && (
-                <NavLink
-                  to="/app/institution"
-                  onClick={onClose}
-                  className={({ isActive }) =>
-                    `flex items-center gap-2.5 min-h-11 px-3 py-2 rounded-lg text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 ${
-                      isActive
-                        ? 'bg-[#21262d] text-[var(--github-text-primary)]'
-                        : 'text-[var(--github-text-secondary)] hover:bg-[var(--github-border-secondary)] hover:text-[var(--github-text-primary)]'
-                    }`
-                  }
-                >
-                  <ShieldUser size={16} />
-                  Mon institution
-                </NavLink>
-              )}
-              {canSeeAdminEntry && (
-                <NavLink
-                  to="/app/admin"
-                  onClick={onClose}
-                  className={({ isActive }) =>
-                    `flex items-center gap-2.5 min-h-11 px-3 py-2 rounded-lg text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 ${
-                      isActive
-                        ? 'bg-[#21262d] text-[var(--github-text-primary)]'
-                        : 'text-[var(--github-text-secondary)] hover:bg-[var(--github-border-secondary)] hover:text-[var(--github-text-primary)]'
-                    }`
-                  }
-                >
-                  <ShieldCheck size={16} />
-                  Administration
-                </NavLink>
-              )}
-            </>
-          )}
-          <SidebarSectionLabel className="pt-2 pb-0.5">Compte & aide</SidebarSectionLabel>
-          <NavLink
-            to="/app/settings"
-            onClick={onClose}
-            className={({ isActive }) =>
-              `flex items-center gap-2.5 min-h-11 px-3 py-2 rounded-lg text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 ${
-                isActive
-                  ? 'bg-[#21262d] text-[var(--github-text-primary)]'
-                  : 'text-[var(--github-text-secondary)] hover:bg-[var(--github-border-secondary)] hover:text-[var(--github-text-primary)]'
-              }`
-            }
-          >
-            <Settings size={16} />
-            Paramètres IA
-          </NavLink>
-          {/* Sprint 2.C Étape 2 — support ticket trigger. Button (not NavLink) :
-              opens a modal, not a route. Auth-gated : the ticket RLS needs
-              auth.uid(), so anonymous visitors never see it. */}
-          {user && (
-            <Button
-              type="button"
-              variant="tl-sidebar-row"
-              size="tl-sidebar-row"
-              onClick={() => setSupportOpen(true)}
-              className="text-[var(--github-text-secondary)] hover:text-[var(--github-text-primary)]"
-            >
-              <LifeBuoy size={16} />
-              <span className="flex-1 text-left">Aide & feedback</span>
-            </Button>
-          )}
-          {user && (
-            <NavLink
-              to="/app/support"
-              onClick={onClose}
-              className={({ isActive }) =>
-                `flex items-center gap-2.5 min-h-11 px-3 py-2 rounded-lg text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 ${
-                  isActive
-                    ? 'bg-[#21262d] text-[var(--github-text-primary)]'
-                    : 'text-[var(--github-text-secondary)] hover:bg-[var(--github-border-secondary)] hover:text-[var(--github-text-primary)]'
-                }`
-              }
-            >
-              <Inbox size={16} />
-              Mes signalements
-            </NavLink>
-          )}
+          {/* THI-341 — TOUT le secondaire (Mes outils role-gated + Paramètres IA +
+              Aide & feedback + Mes signalements) part dans le menu avatar (UserMenu,
+              bas). Sidebar épurée centrée sur les modules/leçons (lisibilité apprenants).
+              Role-gating ICI (RBAC, un seul endroit) via `secondaryItems`. Accès invité
+              à Paramètres IA préservé dans le bloc « Mode invité » du UserMenu. */}
         </nav>
 
         {/* Modules */}
@@ -550,6 +358,7 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
           {/* Profile card avec actions intégrées */}
           <UserMenu
             syncStatus={syncStatus}
+            secondaryItems={secondaryItems}
             extraActions={
               <Button
                 asChild
diff --git a/src/app/components/auth/UserMenu.tsx b/src/app/components/auth/UserMenu.tsx
index 5b351de0..516e1eb6 100644
--- a/src/app/components/auth/UserMenu.tsx
+++ b/src/app/components/auth/UserMenu.tsx
@@ -1,33 +1,50 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { Link, useNavigate } from 'react-router';
-import { LogOut, LogIn, User, CircleUser } from 'lucide-react';
+import { LogOut, LogIn, User, CircleUser, ChevronUp, Settings } from 'lucide-react';
 import { useAuth } from '../../context/AuthContext';
 import { useFocusTrap } from '../../../lib/hooks/useFocusTrap';
 import { Button } from '../ui/button';
 import { UserAvatar } from './UserAvatar';
 
+/**
+ * Secondary nav item shown inside the avatar dropdown (THI-341).
+ * The CALLER builds the list (already role-gated) — UserMenu never decides
+ * permissions itself, it only renders. Keeps the RBAC logic in one place
+ * (Sidebar / useUserRole) and the menu component "dumb" (security).
+ */
+export interface UserMenuSecondaryItem {
+  label: string;
+  icon: ReactNode;
+  /** Internal route (rendered as <Link>). */
+  to?: string;
+  /** Action instead of a link (e.g. open the support modal). */
+  onClick?: () => void;
+}
+
 interface UserMenuProps {
   syncStatus: 'local' | 'synced' | 'syncing' | 'error';
   /**
-   * card    — pleine largeur dans la sidebar (défaut)
-   * compact — avatar circulaire dans un header/navbar
+   * card    — sidebar : trigger (avatar+nom+sync) → dropdown VERS LE HAUT
+   * compact — header/navbar : avatar rond → dropdown vers le bas
    */
   variant?: 'card' | 'compact';
-  /** Actions supplémentaires affichées à droite du header de la card (ex. Home, Install) */
-  extraActions?: React.ReactNode;
+  /** Actions supplémentaires (ex. Home) affichées à droite du trigger card. */
+  extraActions?: ReactNode;
+  /** Liens secondaires (déjà role-gated par l'appelant) dans le dropdown. */
+  secondaryItems?: UserMenuSecondaryItem[];
 }
 
 const SYNC_CONFIG: Record<UserMenuProps['syncStatus'], { label: string; dot: string; text: string }> = {
-  local:   { label: 'Local',          dot: 'bg-[var(--github-text-secondary)]',               text: 'text-[var(--github-text-secondary)]' },
-  syncing: { label: 'Sync…',          dot: 'bg-yellow-400 animate-pulse', text: 'text-yellow-400' },
-  synced:  { label: 'Synchronisé',    dot: 'bg-emerald-400',              text: 'text-emerald-400' },
-  error:   { label: 'Erreur de sync', dot: 'bg-[var(--github-red)]',               text: 'text-[var(--github-red)]' },
+  local:   { label: 'Local',          dot: 'bg-[var(--github-text-secondary)]', text: 'text-[var(--github-text-secondary)]' },
+  syncing: { label: 'Sync…',          dot: 'bg-yellow-400 animate-pulse',       text: 'text-yellow-400' },
+  synced:  { label: 'Synchronisé',    dot: 'bg-emerald-400',                    text: 'text-emerald-400' },
+  error:   { label: 'Erreur de sync', dot: 'bg-[var(--github-red)]',            text: 'text-[var(--github-red)]' },
 };
 
 // UserAvatar extracted to ./UserAvatar.tsx (THI-42 PR #1) so ProfilePage can
 // reuse the same OAuth avatar rendering with identical sizing semantics.
 
-export function UserMenu({ syncStatus, variant = 'card', extraActions }: UserMenuProps) {
+export function UserMenu({ syncStatus, variant = 'card', extraActions, secondaryItems = [] }: UserMenuProps) {
   const { user, signOut } = useAuth();
   const navigate = useNavigate();
   const [open, setOpen] = useState(false);
@@ -35,12 +52,11 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions }: UserMen
   const menuRef = useRef<HTMLDivElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
 
-  // Trap focus inside the dropdown popover (compact variant only)
-  useFocusTrap(open && variant === 'compact', popoverRef);
+  // Both variants are now dropdown menus → trap focus + dismiss for both.
+  useFocusTrap(open, popoverRef);
 
-  // Fermeture Escape / clic extérieur (compact uniquement)
   useEffect(() => {
-    if (!open || variant !== 'compact') return;
+    if (!open) return;
     const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
     const onPointer = (e: PointerEvent) => {
       if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false);
@@ -51,7 +67,7 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions }: UserMen
       document.removeEventListener('keydown', onKey);
       document.removeEventListener('pointerdown', onPointer);
     };
-  }, [open, variant]);
+  }, [open]);
 
   const handleSignOut = async () => {
     setOpen(false);
@@ -78,6 +94,16 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions }: UserMen
           </div>
           {extraActions && <div className="flex items-center gap-1 shrink-0">{extraActions}</div>}
         </div>
+        {/* THI-341 — accès invité à Paramètres IA (config clé IA BYOK,
+            anonymous-friendly) : le menu avatar n'existe pas pour un invité, donc
+            on expose le lien ici pour ne pas perdre l'accès en épurant la sidebar. */}
+        <Link
+          to="/app/settings"
+          className="flex items-center justify-center w-full gap-2 min-h-11 py-1.5 mb-1.5 rounded-md text-xs font-mono bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 hover:text-emerald-300 border border-emerald-500/20 hover:border-emerald-500/40 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60"
+        >
+          <Settings size={12} aria-hidden="true" />
+          Paramètres IA
+        </Link>
         <Button
           variant="emerald-soft"
           size="link-inline"
@@ -103,68 +129,144 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions }: UserMen
   const sync = SYNC_CONFIG[syncStatus];
   const initials = displayName[0].toUpperCase();
 
-  // ── Variant card — sidebar ────────────────────────────────────────────────────
-  if (variant === 'card') {
+  // ── Items du dropdown (partagés card + compact) ───────────────────────────────
+  // secondaryItems d'abord (déjà role-gated par l'appelant), puis Mon profil +
+  // Se déconnecter. Langage couleur : liens = neutre→emerald au survol,
+  // Se déconnecter = rouge (cohérent avec l'existant).
+  const itemClass =
+    'flex items-center w-full justify-start gap-2.5 px-4 py-2.5 text-sm text-[var(--github-text-primary)] font-mono hover:bg-emerald-500/10 hover:text-emerald-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 focus-visible:ring-inset';
+
+  const menuItems = (
+    <div className="py-1" role="none">
+      {secondaryItems.map((item) =>
+        item.to ? (
+          <Link key={item.label} to={item.to} role="menuitem" onClick={() => setOpen(false)} className={itemClass}>
+            <span className="shrink-0 text-[var(--github-text-secondary)]" aria-hidden="true">{item.icon}</span>
+            {item.label}
+          </Link>
+        ) : (
+          <button
+            key={item.label}
+            type="button"
+            role="menuitem"
+            onClick={() => { setOpen(false); item.onClick?.(); }}
+            className={itemClass}
+          >
+            <span className="shrink-0 text-[var(--github-text-secondary)]" aria-hidden="true">{item.icon}</span>
+            {item.label}
+          </button>
+        ),
+      )}
+      {secondaryItems.length > 0 && (
+        <div className="my-1 border-t border-[var(--github-border-primary)]" role="separator" />
+      )}
+      <Link
+        to="/app/profile"
+        role="menuitem"
+        onClick={() => setOpen(false)}
+        className={itemClass}
+      >
+        <CircleUser size={14} aria-hidden="true" className="shrink-0" />
+        Mon profil
+      </Link>
+      <Button
+        variant="ghost"
+        size="link-inline"
+        role="menuitem"
+        onClick={handleSignOut}
+        disabled={signingOut}
+        className="w-full justify-start gap-2.5 px-4 py-2.5 text-sm text-[var(--github-red)] font-mono hover:bg-[var(--github-red)]/10 hover:text-[var(--github-red)] rounded-none transition-colors focus-visible:ring-emerald-500/60 focus-visible:ring-2 focus-visible:ring-inset"
+      >
+        <LogOut size={14} aria-hidden="true" className="shrink-0" />
+        {signingOut ? 'Déconnexion…' : 'Se déconnecter'}
+      </Button>
+    </div>
+  );
+
+  const dropdownHeader = (
+    <div className="flex items-center gap-3 px-4 py-3 border-b border-[var(--github-border-primary)]">
+      <UserAvatar avatarUrl={avatarUrl} initials={initials} size="md" />
+      <div className="min-w-0">
+        <p className="text-sm text-[var(--github-text-primary)] font-medium truncate">{displayName}</p>
+        <p className="text-xs text-[var(--github-text-secondary)] truncate">{user.email}</p>
+        <span className={`inline-flex items-center gap-1 mt-0.5 text-xs font-mono ${sync.text}`}>
+          <span aria-hidden="true" className={`w-1.5 h-1.5 rounded-full ${sync.dot}`} />
+          {sync.label}
+        </span>
+      </div>
+    </div>
+  );
+
+  // ── Variant compact — navbar / header (dropdown vers le bas) ──────────────────
+  if (variant === 'compact') {
     return (
-      <div className="px-3 py-2.5 rounded-lg bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)]">
-        <div className="flex items-center gap-2.5 mb-2.5">
-          <div className="relative shrink-0">
-            <UserAvatar avatarUrl={avatarUrl} initials={initials} size="sm" />
-            <span
-              aria-hidden="true"
-              className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-[var(--github-bg-tertiary)] ${sync.dot}`}
-            />
-          </div>
-          <div className="flex-1 min-w-0">
-            <p className="text-xs text-[var(--github-text-primary)] font-medium truncate">{displayName}</p>
-            <p className={`text-xs font-mono truncate ${sync.text}`}>{sync.label}</p>
-          </div>
-          {extraActions && <div className="flex items-center gap-1 shrink-0">{extraActions}</div>}
-        </div>
-        {/* Mon profil — Link direct (pas Button asChild) pour fiabilité hover.
-            asChild + variant Button + <Link> avait un problème de propagation
-            des classes hover en cascade. Pattern cohérent NavLink sidebar :
-            classes explicites bg + border + text + transition + focus-visible. */}
-        <Link
-          to="/app/profile"
-          className="flex items-center justify-center w-full gap-2 min-h-11 py-1.5 mb-1.5 rounded-md text-xs font-mono bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 hover:text-emerald-300 border border-emerald-500/20 hover:border-emerald-500/40 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 focus-visible:ring-offset-0"
-        >
-          <CircleUser size={12} aria-hidden="true" />
-          Mon profil
-        </Link>
+      <div ref={menuRef} className="relative">
         <Button
+          type="button"
           variant="ghost"
           size="link-inline"
-          onClick={handleSignOut}
-          disabled={signingOut}
-          className="w-full gap-2 py-1.5 rounded-md text-xs font-mono text-[var(--github-red)] border border-[var(--github-red)]/20 hover:bg-[var(--github-red)]/10 hover:text-[var(--github-red)] hover:border-[var(--github-red)]/40 transition-all focus-visible:ring-emerald-500/60 focus-visible:ring-2 focus-visible:ring-offset-0"
+          onClick={() => setOpen((o) => !o)}
+          aria-label={`Compte de ${displayName} — ${sync.label}`}
+          aria-expanded={open}
+          aria-haspopup="true"
+          className="relative rounded-full ring-2 ring-transparent hover:ring-emerald-500/50 hover:bg-transparent focus-visible:ring-emerald-500 focus-visible:ring-2 focus-visible:ring-offset-0 transition-all"
         >
-          <LogOut size={12} aria-hidden="true" />
-          {signingOut ? 'Déconnexion…' : 'Se déconnecter'}
+          <UserAvatar avatarUrl={avatarUrl} initials={initials} size="sm" />
+          <span
+            aria-hidden="true"
+            className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-[var(--github-bg)] ${sync.dot}`}
+          />
         </Button>
+
+        {open && (
+          <div
+            ref={popoverRef}
+            role="menu"
+            aria-orientation="vertical"
+            aria-label={`Menu utilisateur ${displayName}`}
+            className="absolute right-0 top-full mt-2 z-50 w-60 bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl shadow-2xl overflow-hidden"
+          >
+            {dropdownHeader}
+            {menuItems}
+          </div>
+        )}
       </div>
     );
   }
 
-  // ── Variant compact — navbar / header ─────────────────────────────────────────
+  // ── Variant card — sidebar (trigger row + dropdown VERS LE HAUT) ──────────────
   return (
     <div ref={menuRef} className="relative">
-      <Button
-        type="button"
-        variant="ghost"
-        size="link-inline"
-        onClick={() => setOpen((o) => !o)}
-        aria-label={`Compte de ${displayName} — ${sync.label}`}
-        aria-expanded={open}
-        aria-haspopup="true"
-        className="relative rounded-full ring-2 ring-transparent hover:ring-emerald-500/50 hover:bg-transparent focus-visible:ring-emerald-500 focus-visible:ring-2 focus-visible:ring-offset-0 transition-all"
-      >
-        <UserAvatar avatarUrl={avatarUrl} initials={initials} size="sm" />
-        <span
-          aria-hidden="true"
-          className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-[var(--github-bg)] ${sync.dot}`}
-        />
-      </Button>
+      <div className="flex items-center gap-1">
+        <Button
+          type="button"
+          variant="ghost"
+          size="link-inline"
+          onClick={() => setOpen((o) => !o)}
+          aria-label={`Compte de ${displayName} — ${sync.label}. Menu`}
+          aria-expanded={open}
+          aria-haspopup="true"
+          className="flex-1 flex items-center justify-start gap-2.5 px-3 py-2.5 rounded-lg bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] hover:border-emerald-500/40 hover:bg-[var(--github-border-secondary)] transition-colors focus-visible:ring-emerald-500/60 focus-visible:ring-2 focus-visible:ring-offset-0"
+        >
+          <span className="relative shrink-0">
+            <UserAvatar avatarUrl={avatarUrl} initials={initials} size="sm" />
+            <span
+              aria-hidden="true"
+              className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-[var(--github-bg-tertiary)] ${sync.dot}`}
+            />
+          </span>
+          <span className="flex-1 min-w-0 text-left">
+            <span className="block text-xs text-[var(--github-text-primary)] font-medium truncate">{displayName}</span>
+            <span className={`block text-xs font-mono truncate ${sync.text}`}>{sync.label}</span>
+          </span>
+          <ChevronUp
+            size={14}
+            aria-hidden="true"
+            className={`size-[14px] shrink-0 text-[var(--github-text-secondary)] transition-transform ${open ? '' : 'rotate-180'}`}
+          />
+        </Button>
+        {extraActions && <div className="flex items-center gap-1 shrink-0">{extraActions}</div>}
+      </div>
 
       {open && (
         <div
@@ -172,45 +274,10 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions }: UserMen
           role="menu"
           aria-orientation="vertical"
           aria-label={`Menu utilisateur ${displayName}`}
-          className="absolute right-0 top-full mt-2 z-50 w-60 bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl shadow-2xl overflow-hidden"
+          className="absolute bottom-full left-0 right-0 mb-2 z-50 bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl shadow-2xl overflow-hidden"
         >
-          <div className="flex items-center gap-3 px-4 py-3 border-b border-[var(--github-border-primary)]">
-            <UserAvatar avatarUrl={avatarUrl} initials={initials} size="md" />
-            <div className="min-w-0">
-              <p className="text-sm text-[var(--github-text-primary)] font-medium truncate">{displayName}</p>
-              <p className="text-xs text-[var(--github-text-secondary)] truncate">{user.email}</p>
-              <span className={`inline-flex items-center gap-1 mt-0.5 text-xs font-mono ${sync.text}`}>
-                <span aria-hidden="true" className={`w-1.5 h-1.5 rounded-full ${sync.dot}`} />
-                {sync.label}
-              </span>
-            </div>
-          </div>
-          <div className="py-1" role="none">
-            {/* Survol emerald cohérent avec la variante card (sidebar /app) :
-                l'ancien hover:bg-[var(--github-border-secondary)] était IDENTIQUE
-                au fond du popover → survol invisible. Langage couleur unifié :
-                Mon profil = emerald, Se déconnecter = rouge (cf. card ci-dessus). */}
-            <Link
-              to="/app/profile"
-              role="menuitem"
-              onClick={() => setOpen(false)}
-              className="flex items-center w-full justify-start gap-2.5 px-4 py-2.5 text-sm text-[var(--github-text-primary)] font-mono hover:bg-emerald-500/10 hover:text-emerald-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60"
-            >
-              <CircleUser size={14} aria-hidden="true" />
-              Mon profil
-            </Link>
-            <Button
-              variant="ghost"
-              size="link-inline"
-              role="menuitem"
-              onClick={handleSignOut}
-              disabled={signingOut}
-              className="w-full justify-start gap-2.5 px-4 py-2.5 text-sm text-[var(--github-red)] font-mono hover:bg-[var(--github-red)]/10 hover:text-[var(--github-red)] rounded-none transition-colors focus-visible:ring-emerald-500/60 focus-visible:ring-2 focus-visible:ring-offset-0"
-            >
-              <LogOut size={14} aria-hidden="true" />
-              {signingOut ? 'Déconnexion…' : 'Se déconnecter'}
-            </Button>
-          </div>
+          {dropdownHeader}
+          {menuItems}
         </div>
       )}
     </div>
diff --git a/src/test/auth.test.tsx b/src/test/auth.test.tsx
index d683c686..f6251320 100644
--- a/src/test/auth.test.tsx
+++ b/src/test/auth.test.tsx
@@ -42,46 +42,58 @@ function renderCompact() {
   );
 }
 
-// ── Card variant (sidebar) ────────────────────────────────────────────────────
+// ── Card variant (sidebar) — THI-341 : maintenant un menu avatar (dropdown ↑) ──
 
-describe('UserMenu card variant (sidebar)', () => {
+describe('UserMenu card variant (sidebar menu)', () => {
   beforeEach(() => {
     mockSignOut.mockResolvedValue(undefined);
     mockNavigate.mockClear();
     mockSignOut.mockClear();
   });
 
-  it('renders sign-out button directly without opening a dropdown', () => {
+  it('shows display name + sync label in the trigger (dropdown closed)', () => {
     renderCard();
-    expect(screen.getByRole('button', { name: /se déconnecter/i })).toBeInTheDocument();
+    expect(screen.getByText('test')).toBeInTheDocument(); // displayName from email
+    expect(screen.getByText('Local')).toBeInTheDocument(); // sync status
   });
 
-  it('shows display name derived from email', () => {
+  it('does not show sign-out before the dropdown is opened', () => {
     renderCard();
-    // displayName falls back to email prefix when user_metadata is empty
-    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(screen.queryByText(/se déconnecter/i)).not.toBeInTheDocument();
   });
 
-  it('shows sync status label', () => {
+  it('opens the dropdown and shows sign-out on trigger click', () => {
     renderCard();
-    expect(screen.getByText('Local')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /compte de test/i }));
+    expect(screen.getByText(/se déconnecter/i)).toBeInTheDocument();
   });
 
-  it('calls signOut and navigates to "/" on click', async () => {
+  it('renders role-gated secondaryItems (link + action) in the dropdown', () => {
+    const onAction = vi.fn();
+    render(
+      <MemoryRouter>
+        <UserMenu
+          syncStatus="local"
+          secondaryItems={[
+            { label: 'Administration', to: '/app/admin', icon: <span /> },
+            { label: 'Aide & feedback', onClick: onAction, icon: <span /> },
+          ]}
+        />
+      </MemoryRouter>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /compte de test/i }));
+    expect(screen.getByRole('menuitem', { name: /administration/i })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('menuitem', { name: /aide & feedback/i }));
+    expect(onAction).toHaveBeenCalledOnce();
+  });
+
+  it('calls signOut and navigates to "/" from the dropdown', async () => {
     renderCard();
-    fireEvent.click(screen.getByRole('button', { name: /se déconnecter/i }));
+    fireEvent.click(screen.getByRole('button', { name: /compte de test/i }));
+    fireEvent.click(screen.getByText(/se déconnecter/i));
     await waitFor(() => expect(mockSignOut).toHaveBeenCalledOnce());
     await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true }));
   });
-
-  it('disables the button while signing out', async () => {
-    // signOut never resolves so the button stays disabled
-    mockSignOut.mockReturnValue(new Promise(() => {}));
-    renderCard();
-    const btn = screen.getByRole('button', { name: /se déconnecter/i });
-    fireEvent.click(btn);
-    await waitFor(() => expect(btn).toBeDisabled());
-  });
 });
 
 // ── Compact variant (landing header) ─────────────────────────────────────────

From e27e2bc8d618dde6808d7561374a43ba678aca93 Mon Sep 17 00:00:00 2001
From: Thierry <thierryvm@gmail.com>
Date: Thu, 4 Jun 2026 15:37:03 +0200
Subject: [PATCH 2/3] fix(nav): apply ui + mobile gate findings (THI-341)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- a11y H1: aria-haspopup "true" → "menu" (WAI-ARIA 1.2: "true" aliases listbox;
  the popup is role="menu") on both triggers.
- a11y M1: tabIndex={-1} on both popover containers (useFocusTrap contract).
- mobile F-01: card trigger min-h-11 (44px touch target).
- mobile F-02: dropdown overflow-y-auto + max-h-[min(440px,calc(100dvh-200px))]
  instead of overflow-hidden → no top-clip on small viewport / large-text for
  super_admin (9 items); scrolls instead.
- mobile F-03: dropdown items py-2.5 → py-3 (44px touch targets).
- test: adapted the card sign-out test to the real dropdown behavior (handleSignOut
  closes the menu first → item unmounts), not the assumed "disabled" state.

auth 16/16, type-check + lint clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/components/auth/UserMenu.tsx | 16 +++++++++-------
 src/test/auth.test.tsx               | 11 +++++++++++
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/app/components/auth/UserMenu.tsx b/src/app/components/auth/UserMenu.tsx
index 516e1eb6..970b5616 100644
--- a/src/app/components/auth/UserMenu.tsx
+++ b/src/app/components/auth/UserMenu.tsx
@@ -134,7 +134,7 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions, secondary
   // Se déconnecter. Langage couleur : liens = neutre→emerald au survol,
   // Se déconnecter = rouge (cohérent avec l'existant).
   const itemClass =
-    'flex items-center w-full justify-start gap-2.5 px-4 py-2.5 text-sm text-[var(--github-text-primary)] font-mono hover:bg-emerald-500/10 hover:text-emerald-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 focus-visible:ring-inset';
+    'flex items-center w-full justify-start gap-2.5 px-4 py-3 text-sm text-[var(--github-text-primary)] font-mono hover:bg-emerald-500/10 hover:text-emerald-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 focus-visible:ring-inset';
 
   const menuItems = (
     <div className="py-1" role="none">
@@ -175,7 +175,7 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions, secondary
         role="menuitem"
         onClick={handleSignOut}
         disabled={signingOut}
-        className="w-full justify-start gap-2.5 px-4 py-2.5 text-sm text-[var(--github-red)] font-mono hover:bg-[var(--github-red)]/10 hover:text-[var(--github-red)] rounded-none transition-colors focus-visible:ring-emerald-500/60 focus-visible:ring-2 focus-visible:ring-inset"
+        className="w-full justify-start gap-2.5 px-4 py-3 text-sm text-[var(--github-red)] font-mono hover:bg-[var(--github-red)]/10 hover:text-[var(--github-red)] rounded-none transition-colors focus-visible:ring-emerald-500/60 focus-visible:ring-2 focus-visible:ring-inset"
       >
         <LogOut size={14} aria-hidden="true" className="shrink-0" />
         {signingOut ? 'Déconnexion…' : 'Se déconnecter'}
@@ -208,7 +208,7 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions, secondary
           onClick={() => setOpen((o) => !o)}
           aria-label={`Compte de ${displayName} — ${sync.label}`}
           aria-expanded={open}
-          aria-haspopup="true"
+          aria-haspopup="menu"
           className="relative rounded-full ring-2 ring-transparent hover:ring-emerald-500/50 hover:bg-transparent focus-visible:ring-emerald-500 focus-visible:ring-2 focus-visible:ring-offset-0 transition-all"
         >
           <UserAvatar avatarUrl={avatarUrl} initials={initials} size="sm" />
@@ -221,10 +221,11 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions, secondary
         {open && (
           <div
             ref={popoverRef}
+          tabIndex={-1}
             role="menu"
             aria-orientation="vertical"
             aria-label={`Menu utilisateur ${displayName}`}
-            className="absolute right-0 top-full mt-2 z-50 w-60 bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl shadow-2xl overflow-hidden"
+            className="absolute right-0 top-full mt-2 z-50 w-60 bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl shadow-2xl overflow-y-auto max-h-[min(440px,calc(100dvh-200px))]"
           >
             {dropdownHeader}
             {menuItems}
@@ -245,8 +246,8 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions, secondary
           onClick={() => setOpen((o) => !o)}
           aria-label={`Compte de ${displayName} — ${sync.label}. Menu`}
           aria-expanded={open}
-          aria-haspopup="true"
-          className="flex-1 flex items-center justify-start gap-2.5 px-3 py-2.5 rounded-lg bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] hover:border-emerald-500/40 hover:bg-[var(--github-border-secondary)] transition-colors focus-visible:ring-emerald-500/60 focus-visible:ring-2 focus-visible:ring-offset-0"
+          aria-haspopup="menu"
+          className="flex-1 flex items-center justify-start gap-2.5 px-3 py-2.5 min-h-11 rounded-lg bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] hover:border-emerald-500/40 hover:bg-[var(--github-border-secondary)] transition-colors focus-visible:ring-emerald-500/60 focus-visible:ring-2 focus-visible:ring-offset-0"
         >
           <span className="relative shrink-0">
             <UserAvatar avatarUrl={avatarUrl} initials={initials} size="sm" />
@@ -271,10 +272,11 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions, secondary
       {open && (
         <div
           ref={popoverRef}
+          tabIndex={-1}
           role="menu"
           aria-orientation="vertical"
           aria-label={`Menu utilisateur ${displayName}`}
-          className="absolute bottom-full left-0 right-0 mb-2 z-50 bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl shadow-2xl overflow-hidden"
+          className="absolute bottom-full left-0 right-0 mb-2 z-50 bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl shadow-2xl overflow-y-auto max-h-[min(440px,calc(100dvh-200px))]"
         >
           {dropdownHeader}
           {menuItems}
diff --git a/src/test/auth.test.tsx b/src/test/auth.test.tsx
index f6251320..d857300b 100644
--- a/src/test/auth.test.tsx
+++ b/src/test/auth.test.tsx
@@ -94,6 +94,17 @@ describe('UserMenu card variant (sidebar menu)', () => {
     await waitFor(() => expect(mockSignOut).toHaveBeenCalledOnce());
     await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true }));
   });
+
+  it('closes the dropdown on sign-out click (item unmounts) and calls signOut', async () => {
+    mockSignOut.mockReturnValue(new Promise(() => {})); // never resolves
+    renderCard();
+    fireEvent.click(screen.getByRole('button', { name: /compte de test/i }));
+    expect(screen.getByText(/se déconnecter/i)).toBeInTheDocument();
+    fireEvent.click(screen.getByText(/se déconnecter/i));
+    // handleSignOut sets open=false first → the dropdown (and its items) unmount.
+    await waitFor(() => expect(screen.queryByText(/se déconnecter/i)).not.toBeInTheDocument());
+    expect(mockSignOut).toHaveBeenCalledOnce();
+  });
 });
 
 // ── Compact variant (landing header) ─────────────────────────────────────────

From 5df95fcb8e93537c0e6c4ed5790b3bbfa1038e32 Mon Sep 17 00:00:00 2001
From: Thierry <thierryvm@gmail.com>
Date: Thu, 4 Jun 2026 15:41:04 +0200
Subject: [PATCH 3/3] fix(nav): defensive displayName/initials for empty-email
 accounts (code-reviewer)

Pre-existing edge case surfaced by code-review: `displayName[0].toUpperCase()`
crashed if `user.email === ''` (the `??` chain kept the empty string). Use `||`
so '' falls through to 'Utilisateur', and guard `initials` with `?? 'U'`. THI-341.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/components/auth/UserMenu.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/components/auth/UserMenu.tsx b/src/app/components/auth/UserMenu.tsx
index 970b5616..edbc9e06 100644
--- a/src/app/components/auth/UserMenu.tsx
+++ b/src/app/components/auth/UserMenu.tsx
@@ -120,14 +120,16 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions, secondary
   const avatarUrl =
     (user.user_metadata?.avatar_url as string | undefined) ??
     (user.user_metadata?.picture as string | undefined);
+  // `||` (not `??`) so an empty string ('' from a metadata-less / email-less
+  // account) also falls through to the next candidate instead of sticking (code-reviewer).
   const displayName =
-    (user.user_metadata?.full_name as string | undefined) ??
-    (user.user_metadata?.user_name as string | undefined) ??
-    user.email?.split('@')[0] ??
+    (user.user_metadata?.full_name as string | undefined)?.trim() ||
+    (user.user_metadata?.user_name as string | undefined)?.trim() ||
+    user.email?.split('@')[0]?.trim() ||
     'Utilisateur';
 
   const sync = SYNC_CONFIG[syncStatus];
-  const initials = displayName[0].toUpperCase();
+  const initials = (displayName[0] ?? 'U').toUpperCase();
 
   // ── Items du dropdown (partagés card + compact) ───────────────────────────────
   // secondaryItems d'abord (déjà role-gated par l'appelant), puis Mon profil +