Mise en place des workspaces

frontend/src/App.jsx

@@ -1,6 +1,7 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import { useAuth } from './context/AuthContext.jsx';
+import { useWorkspace } from './context/WorkspaceContext.jsx';
 import Login from './pages/Login.jsx';
 import Register from './pages/Register.jsx';
 import InvitationRegister from './pages/InvitationRegister.jsx';
@@ -53,6 +54,38 @@ function FraisOnly({ children }) {
   return children;
 }
 
+// ── Gating de navigation par workspace (Phase 4, étape 0 — 08/09/26) ────
+// cf. project_workspaces_transformation.md (mémoire projet). N'agit
+// aujourd'hui sur rien de visible tant qu'un seul workspace (crowdlending)
+// existe réellement : `active` vaut alors toujours 'crowdlending' pour tout
+// utilisateur. Volontairement "fail-open" — si `active` n'est pas encore
+// chargé (null), on laisse passer plutôt que de bloquer, pour ne jamais
+// afficher un flash de contenu erroné le temps du premier chargement.
+function RequireWorkspace({ slug, children }) {
+  const { active } = useWorkspace() || {};
+  if (active && active.slug !== slug) return <Navigate to="/" replace />;
+  return children;
+}
+
+// Page d'accueil sensible au workspace actif : le Dashboard crowdlending
+// tant que ce workspace est actif (comportement actuel, inchangé), sinon un
+// simple message d'attente — appelé à être remplacé par le vrai contenu du
+// workspace concerné au fur et à mesure de sa construction (Phase 4+).
+function WorkspaceHome() {
+  const { active } = useWorkspace() || {};
+  if (active && active.slug !== 'crowdlending') {
+    return (
+      <div style={{ padding: '48px 24px', textAlign: 'center', color: 'var(--text-muted)' }}>
+        <h2 style={{ margin: '0 0 8px', color: 'var(--text)' }}>{active.nom}</h2>
+        <p style={{ margin: 0 }}>
+          {active.description || "Cet espace de travail n'est pas encore disponible."}
+        </p>
+      </div>
+    );
+  }
+  return <Dashboard />;
+}
+
 export default function App() {
   const [allowRegistration, setAllowRegistration] = useState(true);
 
@@ -96,29 +129,29 @@ export default function App() {
       <Route path="/reset-password"  element={<ResetPassword />} />
       <Route path="/verify-email"    element={<VerifyEmail />} />
       <Route element={<Protected><Layout /></Protected>}>
-        <Route index                         element={<Dashboard />} />
-        <Route path="plateformes"            element={<Plateformes />} />
-        <Route path="depots-retraits"        element={<DepotsRetraits />} />
-        <Route path="investissements"        element={<Investissements />} />
-        <Route path="investissements/:id"    element={<InvestissementDetail />} />
-        <Route path="remboursements"         element={<Remboursements />} />
-        <Route path="frais"                  element={<FraisOnly><Frais /></FraisOnly>} />
-        <Route path="simul"                  element={<SimulRemboursements />} />
-        <Route path="taxreport"              element={<TaxReport />} />
-        <Route path="assistant-ia"           element={<AssistantIA />} />
+        <Route index                         element={<WorkspaceHome />} />
+        <Route path="plateformes"            element={<RequireWorkspace slug="crowdlending"><Plateformes /></RequireWorkspace>} />
+        <Route path="depots-retraits"        element={<RequireWorkspace slug="crowdlending"><DepotsRetraits /></RequireWorkspace>} />
+        <Route path="investissements"        element={<RequireWorkspace slug="crowdlending"><Investissements /></RequireWorkspace>} />
+        <Route path="investissements/:id"    element={<RequireWorkspace slug="crowdlending"><InvestissementDetail /></RequireWorkspace>} />
+        <Route path="remboursements"         element={<RequireWorkspace slug="crowdlending"><Remboursements /></RequireWorkspace>} />
+        <Route path="frais"                  element={<RequireWorkspace slug="crowdlending"><FraisOnly><Frais /></FraisOnly></RequireWorkspace>} />
+        <Route path="simul"                  element={<RequireWorkspace slug="crowdlending"><SimulRemboursements /></RequireWorkspace>} />
+        <Route path="taxreport"              element={<RequireWorkspace slug="crowdlending"><TaxReport /></RequireWorkspace>} />
+        <Route path="assistant-ia"           element={<RequireWorkspace slug="crowdlending"><AssistantIA /></RequireWorkspace>} />
         <Route path="2778-sd"                element={<Navigate to="/taxreport" replace />} />
         <Route path="imports"                element={<Navigate to="/settings?section=imports" replace />} />
         <Route path="settings"               element={<Settings />} />
         <Route path="preferences"            element={<Navigate to="/settings?section=apparence" replace />} />
         <Route path="compte"                 element={<MonCompte />} />
         <Route path="admin"                  element={<AdminOnly><Admin /></AdminOnly>} />
-        <Route path="admin/plateformes"      element={<AdminOnly><AdminPlateformes /></AdminOnly>} />
-        <Route path="admin/fiscalite"        element={<AdminOnly><AdminFiscalite /></AdminOnly>} />
+        <Route path="admin/plateformes"      element={<RequireWorkspace slug="crowdlending"><AdminOnly><AdminPlateformes /></AdminOnly></RequireWorkspace>} />
+        <Route path="admin/fiscalite"        element={<RequireWorkspace slug="crowdlending"><AdminOnly><AdminFiscalite /></AdminOnly></RequireWorkspace>} />
         <Route path="admin/ia"                element={<AdminOnly><AdminIA /></AdminOnly>} />
         <Route path="aide"                   element={<Aide />} />
         <Route path="notifications"          element={<Notifications />} />
         <Route path="communication"          element={<Communication />} />
-        <Route path="referentiel/:id"        element={<PlatformeProfile />} />
+        <Route path="referentiel/:id"        element={<RequireWorkspace slug="crowdlending"><PlatformeProfile /></RequireWorkspace>} />
         <Route path="*"                      element={<Navigate to="/" replace />} />
       </Route>
     </Routes>

frontend/src/components/Layout.jsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { api } from '../api.js';
 import { useInvestisseur } from '../context/InvestisseurContext.jsx';
+import { useWorkspace } from '../context/WorkspaceContext.jsx';
 import { useAuth } from '../context/AuthContext.jsx';
 import { useUi } from '../context/UiContext.jsx';
 import Logo from './Logo.jsx';
@@ -253,6 +254,10 @@ const IconBurger = () => (
 export default function Layout() {
   const { sidebarCollapsed, setSidebarCollapsed, toggleSidebar, displayMode, setDisplayMode } = useUi();
   const { hasFrais } = useAuth();
+  const { active: activeWorkspace } = useWorkspace() || {};
+  // Gating de nav par workspace (Phase 4, étape 0) : fail-open tant que
+  // activeWorkspace n'est pas chargé, cf. App.jsx (RequireWorkspace).
+  const isCrowdlendingActive = !activeWorkspace || activeWorkspace.slug === 'crowdlending';
   const navigate = useNavigate();
   const [navIcons, setNavIcons] = useState({});
   const [aiEnabled, setAiEnabled] = useState(false);
@@ -299,7 +304,7 @@ export default function Layout() {
           <div className="sidebar-brand-logo">
             <Logo size={34} />
           </div>
-          <span className="sidebar-brand-text">Crowdlending</span>
+          <span className="sidebar-brand-text">{activeWorkspace?.libelle_menu || 'Crowdlending'}</span>
 
           {/* Réduire (visible seulement en mode étendu) */}
           <button
@@ -327,30 +332,34 @@ export default function Layout() {
           <NavLink to="/" end title="Tableau de bord">
             <NavIcon libFilename={navIcons.dashboard} Fallback={IconDashboard} /><span className="nav-label">Tableau de bord</span>
           </NavLink>
-          <NavLink to="/plateformes" title="Plateformes">
-            <NavIcon libFilename={navIcons.plateforme} Fallback={IconInvestments} /><span className="nav-label">Plateformes</span>
-          </NavLink>
-          <NavLink to="/investissements" title="Investissements">
-            <NavIcon libFilename={navIcons.investissement} Fallback={IconInvestments} /><span className="nav-label">Investissements</span>
-          </NavLink>
-          <NavLink to="/depots-retraits" title="Dépôts / Retraits">
-            <NavIcon libFilename={navIcons['depots-retraits']} Fallback={IconDeposits} /><span className="nav-label">Dépôts / Retraits</span>
-          </NavLink>
-          <NavLink to="/remboursements" title="Remboursements">
-            <NavIcon libFilename={navIcons.remboursement} Fallback={IconRepayments} /><span className="nav-label">Remboursements</span>
-          </NavLink>
-          {hasFrais && (
-            <NavLink to="/frais" title="Frais">
-              <NavIcon libFilename={navIcons.frais} Fallback={IconFrais} /><span className="nav-label">Frais</span>
-            </NavLink>
-          )}
-          <NavLink to="/taxreport" title="Fiscalité">
-            <NavIcon libFilename={navIcons.tax} Fallback={IconFlatTax} /><span className="nav-label">Fiscalité</span>
-          </NavLink>
-          {aiEnabled && (
-            <NavLink to="/assistant-ia" title="Assistant IA">
-              <NavIcon libFilename={navIcons.assistantIa} Fallback={IconAssistantIa} /><span className="nav-label">Assistant IA</span>
-            </NavLink>
+          {isCrowdlendingActive && (
+            <>
+              <NavLink to="/plateformes" title="Plateformes">
+                <NavIcon libFilename={navIcons.plateforme} Fallback={IconInvestments} /><span className="nav-label">Plateformes</span>
+              </NavLink>
+              <NavLink to="/investissements" title="Investissements">
+                <NavIcon libFilename={navIcons.investissement} Fallback={IconInvestments} /><span className="nav-label">Investissements</span>
+              </NavLink>
+              <NavLink to="/depots-retraits" title="Dépôts / Retraits">
+                <NavIcon libFilename={navIcons['depots-retraits']} Fallback={IconDeposits} /><span className="nav-label">Dépôts / Retraits</span>
+              </NavLink>
+              <NavLink to="/remboursements" title="Remboursements">
+                <NavIcon libFilename={navIcons.remboursement} Fallback={IconRepayments} /><span className="nav-label">Remboursements</span>
+              </NavLink>
+              {hasFrais && (
+                <NavLink to="/frais" title="Frais">
+                  <NavIcon libFilename={navIcons.frais} Fallback={IconFrais} /><span className="nav-label">Frais</span>
+                </NavLink>
+              )}
+              <NavLink to="/taxreport" title="Fiscalité">
+                <NavIcon libFilename={navIcons.tax} Fallback={IconFlatTax} /><span className="nav-label">Fiscalité</span>
+              </NavLink>
+              {aiEnabled && (
+                <NavLink to="/assistant-ia" title="Assistant IA">
+                  <NavIcon libFilename={navIcons.assistantIa} Fallback={IconAssistantIa} /><span className="nav-label">Assistant IA</span>
+                </NavLink>
+              )}
+            </>
           )}
 
         </nav>

frontend/src/components/UserMenu.jsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext.jsx';
 import { useUi  } from '../context/UiContext.jsx';
 import { useInvestisseur } from '../context/InvestisseurContext.jsx';
+import { useWorkspace } from '../context/WorkspaceContext.jsx';
 import { memberInitials, memberLabel } from '../utils/format.js';
 
 /* ── Icons ───────────────────────────────────────────────────── */
@@ -47,6 +48,9 @@ function IconCheck() {
 function IconTeam() {
   return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
 }
+function IconLayers() {
+  return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>;
+}
 
 /* ── Avatars ─────────────────────────────────────────────────── */
 function UserAvatar({ user, size = 36 }) {
@@ -100,15 +104,31 @@ function TeamBadge({ size = 28 }) {
   );
 }
 
+function WorkspaceBadge({ size = 28 }) {
+  return (
+    <div className="team-badge" style={{
+      width: size, height: size, borderRadius: '50%',
+      background: 'linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%)',
+      border: '1.5px solid rgba(255,255,255,.25)',
+      color: '#fff',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      flexShrink: 0,
+    }}>
+      <IconLayers />
+    </div>
+  );
+}
+
 /* ── Composant principal ─────────────────────────────────────── */
 export default function UserMenu() {
   const { user, logout, isAdmin } = useAuth();
   const { sidebarCollapsed } = useUi();
   const { investisseurs, activeView, activeViewMember, setActiveView } = useInvestisseur();
+  const { activeWorkspaces, active: activeWorkspace, setActiveWorkspace, hasMultipleWorkspaces } = useWorkspace() || {};
   const navigate = useNavigate();
 
   const [open,    setOpen]    = useState(false);
-  const [subOpen, setSubOpen] = useState(false);
+  const [activeSubPanel, setActiveSubPanel] = useState(null); // null | 'profile' | 'workspace'
   const [popupStyle, setPopupStyle] = useState({});
   const [subStyle,   setSubStyle]   = useState({});
 
@@ -154,7 +174,7 @@ export default function UserMenu() {
   }, [sidebarCollapsed]);
 
   const openMenu  = useCallback(() => { computePosition(); setOpen(true); }, [computePosition]);
-  const closeMenu = useCallback(() => { setOpen(false); setSubOpen(false); }, []);
+  const closeMenu = useCallback(() => { setOpen(false); setActiveSubPanel(null); }, []);
 
   const clearClose    = () => clearTimeout(closeTimer.current);
   const scheduleClose = () => { closeTimer.current = setTimeout(closeMenu, 200); };
@@ -211,6 +231,11 @@ export default function UserMenu() {
     closeMenu();
   };
 
+  const selectWorkspace = (id) => {
+    setActiveWorkspace?.(id);
+    closeMenu();
+  };
+
   /* ── Libellés ────────────────────────────────────────────── */
   const viewLabel = activeView === 'all'
     ? 'Famille et entreprises'
@@ -248,12 +273,31 @@ export default function UserMenu() {
 
           <div className="user-menu-sep" />
 
+          {/* Section Espace de travail (visible uniquement si l'utilisateur
+              a plusieurs workspaces actifs) */}
+          {hasMultipleWorkspaces && (
+            <>
+              <div className="user-menu-section-header">Espace de travail</div>
+              <button
+                className={`user-menu-item user-menu-vue-row${activeSubPanel === 'workspace' ? ' active' : ''}`}
+                role="menuitem"
+                onClick={() => setActiveSubPanel(p => p === 'workspace' ? null : 'workspace')}
+              >
+                <WorkspaceBadge size={24} />
+                <span className="user-menu-vue-name">{activeWorkspace?.libelle_menu || activeWorkspace?.nom || 'Espace de travail'}</span>
+                <span style={{ color: '#4a6490', display: 'flex' }}><IconChevronRight /></span>
+              </button>
+
+              <div className="user-menu-sep" />
+            </>
+          )}
+
           {/* Section Vue du profil */}
           <div className="user-menu-section-header">Vue du profil</div>
           <button
-            className={`user-menu-item user-menu-vue-row${subOpen ? ' active' : ''}`}
+            className={`user-menu-item user-menu-vue-row${activeSubPanel === 'profile' ? ' active' : ''}`}
             role="menuitem"
-            onClick={() => setSubOpen(s => !s)}
+            onClick={() => setActiveSubPanel(p => p === 'profile' ? null : 'profile')}
           >
             {activeView === 'all'
               ? <TeamBadge size={24} />
@@ -295,8 +339,34 @@ export default function UserMenu() {
         document.body
       )}
 
+      {/* ── Sub-panel Espace de travail (portail) ───────────────── */}
+      {open && activeSubPanel === 'workspace' && createPortal(
+        <div
+          ref={subRef}
+          className="user-menu-subpanel"
+          style={subStyle}
+          onMouseEnter={clearClose}
+          onMouseLeave={() => { if (sidebarCollapsed) scheduleClose(); }}
+        >
+          <div className="user-menu-subpanel-title">Espace de travail</div>
+
+          {(activeWorkspaces || []).map(ws => (
+            <button
+              key={ws.id}
+              className={`user-menu-profile-item${activeWorkspace?.id === ws.id ? ' selected' : ''}`}
+              onClick={() => selectWorkspace(ws.id)}
+            >
+              <WorkspaceBadge size={26} />
+              <span className="user-menu-profile-name">{ws.libelle_menu || ws.nom}</span>
+              {activeWorkspace?.id === ws.id && <IconCheck />}
+            </button>
+          ))}
+        </div>,
+        document.body
+      )}
+
       {/* ── Sub-panel Vue du profil (portail) ───────────────────── */}
-      {open && subOpen && createPortal(
+      {open && activeSubPanel === 'profile' && createPortal(
         <div
           ref={subRef}
           className="user-menu-subpanel"

frontend/src/context/WorkspaceContext.jsx

@@ -0,0 +1,87 @@
+import { createContext, useContext, useEffect, useState, useCallback } from 'react';
+import { api } from '../api.js';
+import { useAuth } from './AuthContext.jsx';
+
+/**
+ * Espaces de travail (workspaces) accordés par l'admin à l'utilisateur
+ * connecté — cf. project_workspaces_transformation.md (mémoire projet).
+ * "Crowdlending" est aujourd'hui le seul workspace existant ; ce contexte
+ * ne change donc rien de visible tant qu'un 2e workspace n'a pas été créé
+ * et accordé à au moins un utilisateur (hasMultipleWorkspaces reste false).
+ *
+ * activeWorkspaceId est persisté en DB (table user_preferences, clé
+ * active_workspace_id) selon la même stratégie que UiContext : la DB fait
+ * foi, le localStorage sert de cache immédiat pour éviter un flash au
+ * chargement.
+ */
+
+const WorkspaceCtx = createContext(null);
+
+const KEY_ACTIVE = 'cl_active_workspace_id';
+
+export function WorkspaceProvider({ children }) {
+  const { token } = useAuth();
+  const [workspaces, setWorkspaces] = useState([]);
+  const [activeId, setActiveIdState] = useState(() => {
+    const saved = localStorage.getItem(KEY_ACTIVE);
+    return saved ? Number(saved) : null;
+  });
+  const [loading, setLoading] = useState(false);
+
+  const reload = useCallback(async () => {
+    if (!token) return;
+    setLoading(true);
+    try {
+      const list = await api.get('/workspaces');
+      setWorkspaces(list);
+    } finally {
+      setLoading(false);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    if (token) reload();
+    else setWorkspaces([]);
+  }, [token, reload]);
+
+  // Sync préférence DB → local, une fois authentifié (même stratégie que
+  // UiContext : la DB fait foi, écrase le localStorage si présent).
+  useEffect(() => {
+    if (!token) return;
+    api.get('/preferences').then(prefs => {
+      if (prefs.active_workspace_id) {
+        const id = Number(prefs.active_workspace_id);
+        localStorage.setItem(KEY_ACTIVE, String(id));
+        setActiveIdState(id);
+      }
+    }).catch(() => {});
+  }, [token]);
+
+  const setActiveWorkspace = useCallback((id) => {
+    setActiveIdState(id);
+    localStorage.setItem(KEY_ACTIVE, String(id));
+    api.patch('/preferences', { active_workspace_id: String(id) }).catch(() => {});
+  }, []);
+
+  // Seuls les workspaces activés personnellement (active_by_user) comptent
+  // pour l'affichage — un workspace accordé par l'admin mais désactivé par
+  // l'utilisateur (Settings > Mes espaces de travail) reste invisible.
+  const activeWorkspaces = workspaces.filter(w => w.active_by_user);
+
+  const active =
+    activeWorkspaces.find(w => w.id === activeId) ||
+    activeWorkspaces[0] ||
+    null;
+
+  return (
+    <WorkspaceCtx.Provider value={{
+      workspaces, activeWorkspaces, active, activeId,
+      setActiveWorkspace, reload, loading,
+      hasMultipleWorkspaces: activeWorkspaces.length > 1,
+    }}>
+      {children}
+    </WorkspaceCtx.Provider>
+  );
+}
+
+export const useWorkspace = () => useContext(WorkspaceCtx);

frontend/src/main.jsx

@@ -4,6 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 import App from './App.jsx';
 import { AuthProvider } from './context/AuthContext.jsx';
 import { InvestisseurProvider } from './context/InvestisseurContext.jsx';
+import { WorkspaceProvider } from './context/WorkspaceContext.jsx';
 import { ThemeProvider } from './context/ThemeContext.jsx';
 import { UiProvider } from './context/UiContext.jsx';
 import './styles.css';
@@ -15,7 +16,9 @@ ReactDOM.createRoot(document.getElementById('root')).render(
         <BrowserRouter>
           <AuthProvider>
             <InvestisseurProvider>
-              <App />
+              <WorkspaceProvider>
+                <App />
+              </WorkspaceProvider>
             </InvestisseurProvider>
           </AuthProvider>
         </BrowserRouter>

frontend/src/pages/Admin.jsx

@@ -7,6 +7,7 @@ import IconsSection     from './admin/IconsSection.jsx';
 import SmtpSection      from './admin/SmtpSection.jsx';
 import GeneralSection   from './admin/GeneralSection.jsx';
 import ExportSection    from './admin/ExportSection.jsx';
+import WorkspacesSection from './admin/WorkspacesSection.jsx';
 
 /* ── Icônes nav ───────────────────────────────────────────────── */
 function IconUsers()    { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>; }
@@ -19,6 +20,7 @@ function IconSettings() { return <svg width="15" height="15" viewBox="0 0 24 24"
 function IconMail()     { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>; }
 function IconDownload() { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>; }
 function IconSparkle()   { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/></svg>; }
+function IconLayers()    { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>; }
 
 const NAV = [
   {
@@ -31,6 +33,7 @@ const NAV = [
       { id: 'icons',    label: "Bibliothèque d'icônes", icon: <IconImage /> },
       { id: 'smtp', label: 'Configuration SMTP', icon: <IconMail /> },
       { id: 'ia', label: 'Assistant IA', icon: <IconSparkle />, href: '/admin/ia' },
+      { id: 'workspaces', label: 'Espaces de travail', icon: <IconLayers /> },
     ],
   },
   {
@@ -85,6 +88,7 @@ export default function Admin() {
         {section === 'icons'    && <IconsSection />}
         {section === 'smtp'     && <SmtpSection />}
         {section === 'export'   && <ExportSection />}
+        {section === 'workspaces' && <WorkspacesSection />}
       </div>
     </div>
   );

frontend/src/pages/Settings.jsx

@@ -9,6 +9,7 @@ import MaFiscaliteSection from './settings/MaFiscaliteSection.jsx';
 import ObjectifsSection   from './settings/ObjectifsSection.jsx';
 import DataCleanupSection from './settings/DataCleanupSection.jsx';
 import ImportsSection     from './settings/ImportsSection.jsx';
+import WorkspacesUserSection from './settings/WorkspacesUserSection.jsx';
 
 /* ── Icônes nav ───────────────────────────────────────────────── */
 function IconFamily()   { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>; }
@@ -22,6 +23,7 @@ function IconMyFiscal() { return <svg width="15" height="15" viewBox="0 0 24 24"
 function IconTarget()   { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>; }
 function IconBroom()    { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 21l9-9"/><path d="M12.22 6.22L17 1.5l5.5 5.5-4.72 4.78"/><path d="M5 17c.5-2 2-3.5 4-4.5l3.5 3.5c-1 2-2.5 3.5-4.5 4"/></svg>; }
 function IconUpload()   { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>; }
+function IconSpaces()   { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="4" width="8" height="16" rx="1.5"/><rect x="13" y="4" width="8" height="7" rx="1.5"/><rect x="13" y="13" width="8" height="7" rx="1.5"/></svg>; }
 
 const NAV = [
   {
@@ -30,6 +32,12 @@ const NAV = [
       { id: 'apparence',   label: 'Apparence',               icon: <IconMonitor /> },
     ],
   },
+  {
+    group: 'Mon espace de travail',
+    items: [
+      { id: 'workspaces', label: 'Mes espaces de travail', icon: <IconSpaces /> },
+    ],
+  },
   {
     group: 'Mon paramétrage',
     items: [
@@ -95,6 +103,7 @@ export default function Settings() {
         {section === 'secteurs-inv'   && <SecteursInvSection />}
         {section === 'nettoyage'      && <DataCleanupSection />}
         {section === 'imports'        && <ImportsSection />}
+        {section === 'workspaces'     && <WorkspacesUserSection />}
       </div>
     </div>
   );

frontend/src/pages/admin/ManageRightsModal.jsx

@@ -0,0 +1,274 @@
+import { useState, useEffect, useCallback } from 'react';
+import { api } from '../../api.js';
+import Modal from '../../components/Modal.jsx';
+
+/* Modale en étapes "Gérer les droits" — Administration > Utilisateurs.
+ * Consolide en un seul endroit ce qui était trois actions séparées du menu
+ * ⋮ (rôle, statut, accès IA) + le nouvel octroi de workspaces :
+ *   1. Information générale (rôle, statut du compte)
+ *   2. Espaces de travail (octroi admin — cf. adminWorkspaces.js / PATCH
+ *      /admin/users/:id/workspaces)
+ *   3. Assistant IA (accès individuel, décision admin)
+ * Voir project_workspaces_transformation.md (mémoire projet). */
+
+const STEPS = [
+  { id: 'general',    label: 'Information générale' },
+  { id: 'workspaces', label: 'Espaces de travail' },
+  { id: 'ia',          label: 'Assistant IA' },
+];
+
+const ROLE_OPTIONS   = [{ value: 'user', label: 'Utilisateur' }, { value: 'admin', label: 'Administrateur' }];
+const STATUS_OPTIONS = [
+  { value: 'active',      label: 'Actif' },
+  { value: 'deactivated', label: 'Désactivé' },
+  { value: 'locked',      label: 'Verrouillé' },
+];
+
+function Toggle({ checked, onClick, disabled, title }) {
+  return (
+    <button
+      type="button"
+      title={title}
+      disabled={disabled}
+      onClick={onClick}
+      style={{
+        width: 38, height: 21, borderRadius: 20, border: 'none', flexShrink: 0,
+        background: checked ? 'var(--primary)' : 'var(--border)',
+        position: 'relative', cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1, transition: 'background .15s',
+      }}
+    >
+      <span style={{
+        position: 'absolute', top: 2, left: checked ? 19 : 2,
+        width: 17, height: 17, borderRadius: '50%', background: '#fff',
+        boxShadow: '0 1px 3px rgba(0,0,0,.3)', transition: 'left .15s',
+      }} />
+    </button>
+  );
+}
+
+export default function ManageRightsModal({ open, user, currentUserId, aiAvailable, aiUnavailableReason, onClose, onSaved }) {
+  const isSelf = !!user && user.id === currentUserId;
+
+  const [step, setStep]         = useState('general');
+  const [form, setForm]         = useState(null);
+  const [catalog, setCatalog]   = useState([]);
+  const [loadingCat, setLoadingCat] = useState(false);
+  const [err, setErr]           = useState(null);
+  const [saving, setSaving]     = useState(false);
+
+  useEffect(() => {
+    if (!open || !user) return;
+    setStep('general');
+    setErr(null);
+    setForm({
+      role: user.role || 'user',
+      status: user.status || 'active',
+      workspaceIds: user.workspace_ids || [],
+      aiEnabled: !!user.ai_enabled,
+    });
+    setLoadingCat(true);
+    api.get('/admin/workspaces')
+      .then(setCatalog)
+      .catch(() => setCatalog([]))
+      .finally(() => setLoadingCat(false));
+  }, [open, user]);
+
+  const toggleWorkspace = useCallback((id) => {
+    setForm(f => ({
+      ...f,
+      workspaceIds: f.workspaceIds.includes(id)
+        ? f.workspaceIds.filter(w => w !== id)
+        : [...f.workspaceIds, id],
+    }));
+  }, []);
+
+  if (!open || !user || !form) return null;
+
+  const stepIndex = STEPS.findIndex(s => s.id === step);
+
+  async function handleSave() {
+    setErr(null);
+    setSaving(true);
+    try {
+      const calls = [];
+      if (!isSelf) {
+        if (form.role !== (user.role || 'user')) {
+          calls.push(api.patch(`/admin/users/${user.id}/role`, { role: form.role }));
+        }
+        if (form.status !== (user.status || 'active')) {
+          calls.push(api.patch(`/admin/users/${user.id}/status`, { status: form.status }));
+        }
+      }
+      const origWs = [...(user.workspace_ids || [])].sort().join(',');
+      const newWs  = [...form.workspaceIds].sort().join(',');
+      if (origWs !== newWs) {
+        calls.push(api.patch(`/admin/users/${user.id}/workspaces`, { workspaceIds: form.workspaceIds }));
+      }
+      if (form.aiEnabled !== !!user.ai_enabled) {
+        calls.push(api.patch(`/admin/users/${user.id}/ai-access`, { aiEnabled: form.aiEnabled }));
+      }
+      await Promise.all(calls);
+      onSaved();
+    } catch (e) {
+      setErr(e.message || "Erreur lors de l'enregistrement");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const identity = user.display_name || user.email;
+
+  return (
+    <Modal
+      open={open}
+      title={`Gérer les droits — ${identity}`}
+      onClose={onClose}
+      width={560}
+      footer={
+        <>
+          <button className="ghost" type="button" onClick={onClose}>Annuler</button>
+          {stepIndex > 0 && (
+            <button className="btn btn-outline" type="button" onClick={() => setStep(STEPS[stepIndex - 1].id)}>
+              Précédent
+            </button>
+          )}
+          {stepIndex < STEPS.length - 1 && (
+            <button className="btn btn-outline" type="button" onClick={() => setStep(STEPS[stepIndex + 1].id)}>
+              Suivant
+            </button>
+          )}
+          <button className="btn btn-primary" type="button" onClick={handleSave} disabled={saving}>
+            {saving ? 'Enregistrement…' : 'Enregistrer'}
+          </button>
+        </>
+      }
+    >
+      {/* ── Indicateur d'étape (même pattern que InvestissementFormModal) ── */}
+      <div style={{ marginBottom: 16 }}>
+        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>
+          Étape {stepIndex + 1} : {STEPS[stepIndex].label}
+        </div>
+        <div style={{ display: 'flex', gap: 6 }}>
+          {STEPS.map((s, i) => (
+            <div key={s.id} style={{
+              flex: 1, height: 5, borderRadius: 4,
+              background: i <= stepIndex ? 'var(--primary)' : 'var(--border)',
+            }} />
+          ))}
+        </div>
+      </div>
+
+      {step === 'general' && (
+        <div>
+          {isSelf && (
+            <p style={{ fontSize: 12.5, color: 'var(--text-muted)', background: 'var(--surface-2)', padding: '8px 12px', borderRadius: 8, marginTop: 0 }}>
+              Vous ne pouvez pas modifier votre propre rôle ni votre propre statut depuis cet écran.
+            </p>
+          )}
+          <div style={{ marginBottom: 14 }}>
+            <label style={{ display: 'block', fontSize: 'var(--fs-sm)', fontWeight: 600, marginBottom: 4 }}>Rôle</label>
+            <select
+              className="form-input"
+              value={form.role}
+              disabled={isSelf}
+              onChange={e => setForm(f => ({ ...f, role: e.target.value }))}
+            >
+              {ROLE_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
+            </select>
+          </div>
+          <div>
+            <label style={{ display: 'block', fontSize: 'var(--fs-sm)', fontWeight: 600, marginBottom: 4 }}>Statut du compte</label>
+            <select
+              className="form-input"
+              value={form.status}
+              disabled={isSelf}
+              onChange={e => setForm(f => ({ ...f, status: e.target.value }))}
+            >
+              {STATUS_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
+            </select>
+          </div>
+        </div>
+      )}
+
+      {step === 'workspaces' && (
+        <div>
+          <p style={{ margin: '0 0 12px', fontSize: 12.5, color: 'var(--text-muted)' }}>
+            Espaces de travail accordés à cet utilisateur. L'utilisateur pourra ensuite les activer ou
+            les masquer lui-même depuis ses paramètres.
+          </p>
+          {loadingCat ? (
+            <p style={{ color: 'var(--text-muted)' }}>Chargement…</p>
+          ) : catalog.length === 0 ? (
+            <p style={{ color: 'var(--text-muted)' }}>Aucun espace de travail défini dans le catalogue.</p>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {catalog.map(w => {
+                const granted = form.workspaceIds.includes(w.id);
+                return (
+                  <div
+                    key={w.id}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
+                      borderRadius: 8, border: '1px solid var(--border)',
+                      background: granted ? 'var(--surface-2)' : 'transparent',
+                    }}
+                  >
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontWeight: 700, fontSize: 14.5 }}>{w.nom}</div>
+                      {w.description && (
+                        <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 1 }}>{w.description}</div>
+                      )}
+                    </div>
+                    {!w.actif_global && (
+                      <span style={{ fontSize: 10.5, color: 'var(--text-muted)', border: '1px solid var(--border)', borderRadius: 10, padding: '1px 7px', flexShrink: 0 }}>
+                        indisponible
+                      </span>
+                    )}
+                    <Toggle
+                      checked={granted}
+                      onClick={() => toggleWorkspace(w.id)}
+                      title={granted ? 'Retirer cet espace de travail' : 'Accorder cet espace de travail'}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          {form.workspaceIds.length === 0 && (
+            <p style={{ fontSize: 12, color: 'var(--danger, #dc2626)', marginTop: 10 }}>
+              Aucun espace de travail accordé : l'utilisateur n'aura accès à aucune fonctionnalité.
+            </p>
+          )}
+        </div>
+      )}
+
+      {step === 'ia' && (
+        <div>
+          <div style={{
+            display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
+            borderRadius: 8, border: '1px solid var(--border)',
+            background: form.aiEnabled ? 'var(--surface-2)' : 'transparent',
+          }}>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontWeight: 700, fontSize: 14.5 }}>Accès à l'Assistant IA</div>
+              <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 1 }}>
+                {aiAvailable
+                  ? "Permet à l'utilisateur d'utiliser le chat de l'Assistant IA."
+                  : aiUnavailableReason}
+              </div>
+            </div>
+            <Toggle
+              checked={form.aiEnabled}
+              disabled={!aiAvailable}
+              onClick={() => setForm(f => ({ ...f, aiEnabled: !f.aiEnabled }))}
+              title={!aiAvailable ? aiUnavailableReason : (form.aiEnabled ? "Désactiver l'accès à l'Assistant IA" : "Activer l'accès à l'Assistant IA")}
+            />
+          </div>
+        </div>
+      )}
+
+      {err && <div className="error" style={{ marginTop: 14 }}>{err}</div>}
+    </Modal>
+  );
+}

frontend/src/pages/admin/UsersSection.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import * as XLSX from 'xlsx';
 import { api } from '../../api.js';
 import ConfirmModal from '../../components/ConfirmModal.jsx';
+import ManageRightsModal from './ManageRightsModal.jsx';
 import Modal from '../../components/Modal.jsx';
 import ResultBanner from '../../components/ResultBanner.jsx';
 import PasswordStrength from '../../components/PasswordStrength.jsx';
@@ -61,6 +62,7 @@ const IcoTrash  = () => <svg width="13" height="13" viewBox="0 0 24 24" fill="no
 const IcoDots   = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="5" r="1" fill="currentColor"/><circle cx="12" cy="12" r="1" fill="currentColor"/><circle cx="12" cy="19" r="1" fill="currentColor"/></svg>;
 const IcoSearch = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>;
 const IcoSparkle = () => <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/></svg>;
+const IcoRights  = () => <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>;
 
 // Interrupteur compact — accès individuel à l'Assistant IA (même style visuel
 // que le Toggle de AdminIA.jsx, dupliqué ici car non partagé entre les deux
@@ -426,6 +428,7 @@ export default function UsersSection({ currentUserId }) {
   const [filterStatus, setFilterStatus] = useState('all');
   const [filterRole, setFilterRole]     = useState('all');
   const [openMenu, setOpenMenu] = useState(null);
+  const [rightsTarget, setRightsTarget] = useState(null);
   const [page, setPage]       = useState(1);
   const [pageSize, setPageSize] = useState(10);
   // null tant que non charge (voir l'effet ci-dessous) : l'interrupteur
@@ -488,12 +491,6 @@ export default function UsersSection({ currentUserId }) {
   const confirm = (title, message, onConfirm, confirmLabel) =>
     setConfirmAction({ title, message, onConfirm, confirmLabel });
 
-  const toggleRole = u => {
-    const newRole = u.role === 'admin' ? 'user' : 'admin';
-    confirm('Changer le rôle',
-      `Changer le rôle de ${u.display_name || u.email} → ${newRole === 'admin' ? 'Administrateur' : 'Utilisateur'} ?`,
-      async () => { await api.patch(`/admin/users/${u.id}/role`, { role: newRole }); load(); }, 'Confirmer');
-  };
   const verifyEmail = u => confirm("Vérifier l'email",
     `Marquer l'email de ${u.display_name || u.email} comme vérifié ?`,
     async () => { await api.patch(`/admin/users/${u.id}/verify-email`, {}); load(); }, 'Confirmer');
@@ -773,8 +770,7 @@ export default function UsersSection({ currentUserId }) {
             background: 'var(--surface)', border: '1px solid var(--border)',
             borderRadius: 8, boxShadow: '0 4px 20px rgba(0,0,0,0.15)', padding: '4px 0', minWidth: 200,
           }}>
-            <MenuBtn icon={<IcoEdit />} label={openMenu.user.role === 'admin' ? 'Rétrograder en utilisateur' : 'Promouvoir en admin'} onClick={() => { setOpenMenu(null); toggleRole(openMenu.user); }} />
-            <MenuBtn icon={<IcoSparkle />} label={openMenu.user.ai_enabled ? "Désactiver l'accès IA" : "Activer l'accès IA"} onClick={() => { setOpenMenu(null); toggleAiAccess(openMenu.user); }} />
+            <MenuBtn icon={<IcoRights />} label="Gérer les droits" onClick={() => { setOpenMenu(null); setRightsTarget(openMenu.user); }} />
             {!openMenu.user.email_verified && <>
               <MenuBtn icon={<IcoMail />} label="Renvoyer l'invitation" onClick={() => { setOpenMenu(null); resendInvitation(openMenu.user); }} />
               <MenuBtn icon={<IcoCheck />} label="Vérifier l'email" onClick={() => { setOpenMenu(null); verifyEmail(openMenu.user); }} />
@@ -812,6 +808,20 @@ export default function UsersSection({ currentUserId }) {
         onCreated={() => load()}
       />
 
+      <ManageRightsModal
+        open={!!rightsTarget}
+        user={rightsTarget}
+        currentUserId={currentUserId}
+        aiAvailable={aiAvailable}
+        aiUnavailableReason={aiUnavailableReason}
+        onClose={() => setRightsTarget(null)}
+        onSaved={() => {
+          setRightsTarget(null);
+          setBanner({ ok: true, msg: 'Droits mis à jour.' });
+          load();
+        }}
+      />
+
       <ConfirmModal
         open={!!confirmAction}
         title={confirmAction?.title}

frontend/src/pages/admin/WorkspacesSection.jsx

@@ -0,0 +1,324 @@
+import { useState, useEffect, useCallback } from 'react';
+import { api } from '../../api.js';
+import Modal from '../../components/Modal.jsx';
+import ConfirmModal from '../../components/ConfirmModal.jsx';
+import ResultBanner from '../../components/ResultBanner.jsx';
+
+/* Catalogue des espaces de travail (Administration > Espaces de travail).
+ * CRUD sur la table `workspaces` — indépendant de l'octroi par utilisateur,
+ * qui se fait via la modale "Gérer les droits" (UsersSection.jsx). Voir
+ * project_workspaces_transformation.md (mémoire projet). */
+
+function IconPlus() {
+  return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>;
+}
+function IconEdit() {
+  return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>;
+}
+function IconTrash() {
+  return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>;
+}
+
+function Toggle({ checked, onClick, title }) {
+  return (
+    <button
+      type="button"
+      title={title}
+      onClick={onClick}
+      style={{
+        width: 38, height: 21, borderRadius: 20, border: 'none', flexShrink: 0,
+        background: checked ? 'var(--primary)' : 'var(--border)',
+        position: 'relative', cursor: 'pointer', transition: 'background .15s',
+      }}
+    >
+      <span style={{
+        position: 'absolute', top: 2, left: checked ? 19 : 2,
+        width: 17, height: 17, borderRadius: '50%', background: '#fff',
+        boxShadow: '0 1px 3px rgba(0,0,0,.3)', transition: 'left .15s',
+      }} />
+    </button>
+  );
+}
+
+const emptyForm = { slug: '', nom: '', libelleMenu: '', description: '', actifGlobal: true, ordre: 0 };
+
+function WorkspaceFormModal({ open, onClose, onSaved, workspace }) {
+  const isEdit = !!workspace;
+  const [form, setForm]     = useState(emptyForm);
+  const [err, setErr]       = useState(null);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setErr(null);
+    setForm(workspace
+      ? {
+          slug: workspace.slug,
+          nom: workspace.nom,
+          libelleMenu: workspace.libelle_menu,
+          description: workspace.description || '',
+          actifGlobal: !!workspace.actif_global,
+          ordre: workspace.ordre ?? 0,
+        }
+      : emptyForm);
+  }, [open, workspace]);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setErr(null);
+    if (!form.nom.trim() || !form.libelleMenu.trim() || (!isEdit && !form.slug.trim())) {
+      setErr('Merci de renseigner les champs obligatoires (*)');
+      return;
+    }
+    setSaving(true);
+    try {
+      const payload = {
+        nom: form.nom.trim(),
+        libelleMenu: form.libelleMenu.trim(),
+        description: form.description.trim(),
+        actifGlobal: !!form.actifGlobal,
+        ordre: Number(form.ordre) || 0,
+      };
+      if (isEdit) {
+        await api.put(`/admin/workspaces/${workspace.id}`, payload);
+      } else {
+        await api.post('/admin/workspaces', { ...payload, slug: form.slug.trim() });
+      }
+      onSaved();
+    } catch (e2) {
+      setErr(e2.message || 'Erreur lors de l\'enregistrement');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      title={isEdit ? "Modifier l'espace de travail" : 'Nouvel espace de travail'}
+      onClose={onClose}
+      width={480}
+      footer={
+        <>
+          <button className="ghost" type="button" onClick={onClose}>Annuler</button>
+          <button className="btn btn-primary" type="submit" form="workspace-form" disabled={saving}>
+            {saving ? 'Enregistrement…' : 'Enregistrer'}
+          </button>
+        </>
+      }
+    >
+      <form id="workspace-form" onSubmit={handleSubmit}>
+        <div style={{ marginBottom: 12 }}>
+          <label style={{ display: 'block', fontSize: 'var(--fs-sm)', fontWeight: 600, marginBottom: 4 }}>
+            Identifiant (slug) *
+          </label>
+          <input
+            className="form-input"
+            placeholder="ex: private-equity"
+            value={form.slug}
+            disabled={isEdit}
+            onChange={e => setForm(f => ({ ...f, slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') }))}
+          />
+          <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+            lettres minuscules, chiffres, tirets — non modifiable après création
+          </span>
+        </div>
+        <div style={{ marginBottom: 12 }}>
+          <label style={{ display: 'block', fontSize: 'var(--fs-sm)', fontWeight: 600, marginBottom: 4 }}>
+            Nom *
+          </label>
+          <input
+            className="form-input"
+            placeholder="ex: Private Equity"
+            value={form.nom}
+            onChange={e => setForm(f => ({ ...f, nom: e.target.value }))}
+          />
+        </div>
+        <div style={{ marginBottom: 12 }}>
+          <label style={{ display: 'block', fontSize: 'var(--fs-sm)', fontWeight: 600, marginBottom: 4 }}>
+            Libellé menu *
+          </label>
+          <input
+            className="form-input"
+            placeholder="ex: Private Equity"
+            value={form.libelleMenu}
+            onChange={e => setForm(f => ({ ...f, libelleMenu: e.target.value }))}
+          />
+          <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+            Affiché dans la barre latérale lorsque cet espace est actif
+          </span>
+        </div>
+        <div style={{ marginBottom: 12 }}>
+          <label style={{ display: 'block', fontSize: 'var(--fs-sm)', fontWeight: 600, marginBottom: 4 }}>
+            Description
+          </label>
+          <textarea
+            className="form-input"
+            rows={2}
+            value={form.description}
+            onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
+          />
+        </div>
+        <div style={{ display: 'flex', gap: 20, alignItems: 'center', marginBottom: 4 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <Toggle
+              checked={!!form.actifGlobal}
+              onClick={() => setForm(f => ({ ...f, actifGlobal: !f.actifGlobal }))}
+              title={form.actifGlobal ? 'Désactiver la disponibilité pour attribution' : 'Activer la disponibilité pour attribution'}
+            />
+            <span style={{ fontSize: 'var(--fs-sm)' }}>Disponible pour attribution</span>
+          </div>
+          <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 'var(--fs-sm)' }}>
+            Ordre
+            <input
+              type="number"
+              className="form-input"
+              style={{ width: 70 }}
+              value={form.ordre}
+              onChange={e => setForm(f => ({ ...f, ordre: e.target.value }))}
+            />
+          </label>
+        </div>
+        {err && <div className="error" style={{ marginTop: 8 }}>{err}</div>}
+      </form>
+    </Modal>
+  );
+}
+
+export default function WorkspacesSection() {
+  const [workspaces, setWorkspaces] = useState([]);
+  const [loading, setLoading]       = useState(true);
+  const [banner, setBanner]         = useState(null);
+  const [showForm, setShowForm]     = useState(false);
+  const [editing, setEditing]       = useState(null);
+  const [toDelete, setToDelete]     = useState(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try { setWorkspaces(await api.get('/admin/workspaces')); }
+    catch (e) { setBanner({ ok: false, msg: e.message || 'Erreur de chargement' }); }
+    finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  async function handleDelete() {
+    if (!toDelete) return;
+    try {
+      await api.del(`/admin/workspaces/${toDelete.id}`);
+      setBanner({ ok: true, msg: `Espace de travail « ${toDelete.nom} » supprimé.` });
+      setToDelete(null);
+      load();
+    } catch (e) {
+      setBanner({ ok: false, msg: e.message || 'Erreur lors de la suppression' });
+      setToDelete(null);
+    }
+  }
+
+  if (loading) return <p className="text-muted" style={{ padding: 24 }}>Chargement…</p>;
+
+  return (
+    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
+      {banner && (
+        <ResultBanner
+          result={banner}
+          onDismiss={() => setBanner(null)}
+          style={{ margin: '12px 20px 0', borderRadius: 8 }}
+        />
+      )}
+
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 20px 14px', gap: 16, borderBottom: '1px solid var(--border)', flexWrap: 'wrap' }}>
+        <div>
+          <h3 style={{ margin: '0 0 3px' }}>Espaces de travail</h3>
+          <p style={{ margin: 0, fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>
+            Catalogue des espaces de travail proposés par l'application (Crowdlending, futurs modules…).
+            L'attribution à un utilisateur se fait depuis sa fiche, onglet « Gérer les droits ».
+          </p>
+        </div>
+        <button
+          className="btn btn-primary btn-sm"
+          onClick={() => { setEditing(null); setShowForm(true); }}
+          style={{ display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}
+        >
+          <IconPlus /> Nouvel espace de travail
+        </button>
+      </div>
+
+      {workspaces.length === 0 ? (
+        <p style={{ color: 'var(--text-muted)', textAlign: 'center', padding: '40px 20px' }}>
+          Aucun espace de travail défini.
+        </p>
+      ) : (
+        <div style={{ overflowX: 'auto' }}>
+          <table style={{ margin: 0 }}>
+            <thead>
+              <tr>
+                <th style={{ paddingLeft: 20 }}>Nom</th>
+                <th>Libellé menu</th>
+                <th>Slug</th>
+                <th style={{ textAlign: 'center' }}>Disponible</th>
+                <th style={{ textAlign: 'right' }}>Ordre</th>
+                <th style={{ textAlign: 'right' }}>Utilisateurs</th>
+                <th style={{ width: 90, paddingRight: 20 }}></th>
+              </tr>
+            </thead>
+            <tbody>
+              {workspaces.map(w => (
+                <tr key={w.id}>
+                  <td style={{ paddingLeft: 20, fontWeight: 600 }}>{w.nom}</td>
+                  <td>{w.libelle_menu}</td>
+                  <td style={{ color: 'var(--text-muted)', fontFamily: 'monospace', fontSize: 12 }}>{w.slug}</td>
+                  <td style={{ textAlign: 'center' }}>
+                    {w.actif_global
+                      ? <span className="badge badge-success">Oui</span>
+                      : <span className="badge">Non</span>}
+                  </td>
+                  <td style={{ textAlign: 'right' }}>{w.ordre}</td>
+                  <td style={{ textAlign: 'right' }}>{w.nb_utilisateurs}</td>
+                  <td style={{ paddingRight: 20 }}>
+                    <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
+                      <button
+                        className="btn btn-sm btn-ghost"
+                        title="Modifier"
+                        onClick={() => { setEditing(w); setShowForm(true); }}
+                      >
+                        <IconEdit />
+                      </button>
+                      <button
+                        className="btn btn-sm btn-ghost"
+                        title={w.slug === 'crowdlending' ? 'Le workspace Crowdlending ne peut pas être supprimé' : 'Supprimer'}
+                        disabled={w.slug === 'crowdlending'}
+                        onClick={() => setToDelete(w)}
+                      >
+                        <IconTrash />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <WorkspaceFormModal
+        open={showForm}
+        workspace={editing}
+        onClose={() => setShowForm(false)}
+        onSaved={() => {
+          setShowForm(false);
+          setBanner({ ok: true, msg: editing ? 'Espace de travail mis à jour.' : 'Espace de travail créé.' });
+          load();
+        }}
+      />
+
+      <ConfirmModal
+        open={!!toDelete}
+        title="Supprimer l'espace de travail"
+        message={toDelete ? `Supprimer définitivement « ${toDelete.nom} » ? Les droits accordés aux utilisateurs sur cet espace seront retirés.` : ''}
+        onConfirm={handleDelete}
+        onCancel={() => setToDelete(null)}
+      />
+    </div>
+  );
+}

frontend/src/pages/settings/WorkspacesUserSection.jsx

@@ -0,0 +1,123 @@
+import { useState, useEffect, useCallback } from 'react';
+import { api } from '../../api.js';
+import { useWorkspace } from '../../context/WorkspaceContext.jsx';
+import ResultBanner from '../../components/ResultBanner.jsx';
+
+/* Settings > Mes espaces de travail — activation personnelle des espaces
+ * de travail accordés par l'administrateur (active_by_user). L'octroi lui-
+ * même (granted_by_admin) n'est modifiable que par un administrateur, voir
+ * ManageRightsModal.jsx (Administration > Utilisateurs). Voir
+ * project_workspaces_transformation.md (mémoire projet). */
+
+function Toggle({ checked, onClick, disabled, title }) {
+  return (
+    <button
+      type="button"
+      title={title}
+      disabled={disabled}
+      onClick={onClick}
+      style={{
+        width: 40, height: 22, borderRadius: 20, border: 'none', flexShrink: 0,
+        background: checked ? 'var(--primary)' : 'var(--border)',
+        position: 'relative', cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1, transition: 'background .15s',
+      }}
+    >
+      <span style={{
+        position: 'absolute', top: 2, left: checked ? 20 : 2,
+        width: 18, height: 18, borderRadius: '50%', background: '#fff',
+        boxShadow: '0 1px 3px rgba(0,0,0,.3)', transition: 'left .15s',
+      }} />
+    </button>
+  );
+}
+
+export default function WorkspacesUserSection() {
+  const { reload: reloadWorkspaceCtx } = useWorkspace() || {};
+  const [workspaces, setWorkspaces] = useState([]);
+  const [loading, setLoading]       = useState(true);
+  const [banner, setBanner]         = useState(null);
+  const [pending, setPending]       = useState(null); // id en cours de bascule
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try { setWorkspaces(await api.get('/workspaces')); }
+    catch (e) { setBanner({ ok: false, msg: e.message || 'Erreur de chargement' }); }
+    finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  const activeCount = workspaces.filter(w => w.active_by_user).length;
+
+  async function toggle(w) {
+    const nextActive = !w.active_by_user;
+    if (!nextActive && activeCount <= 1) {
+      setBanner({ ok: false, msg: 'Au moins un espace de travail doit rester actif.' });
+      return;
+    }
+    setPending(w.id);
+    try {
+      await api.patch(`/workspaces/${w.id}/active`, { active: nextActive });
+      setWorkspaces(ws => ws.map(x => x.id === w.id ? { ...x, active_by_user: nextActive } : x));
+      reloadWorkspaceCtx?.();
+    } catch (e) {
+      setBanner({ ok: false, msg: e.message || 'Erreur lors de la mise à jour' });
+    } finally {
+      setPending(null);
+    }
+  }
+
+  if (loading) return <p className="text-muted" style={{ padding: 24 }}>Chargement…</p>;
+
+  return (
+    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
+      {banner && (
+        <ResultBanner
+          result={banner}
+          onDismiss={() => setBanner(null)}
+          style={{ margin: '12px 20px 0', borderRadius: 8 }}
+        />
+      )}
+
+      <div style={{ padding: '20px 20px 14px', borderBottom: '1px solid var(--border)' }}>
+        <h3 style={{ margin: '0 0 3px' }}>Mes espaces de travail</h3>
+        <p style={{ margin: 0, fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>
+          Activez ou masquez les espaces de travail qui vous ont été accordés par un administrateur.
+          Un espace masqué n'apparaît plus dans le sélecteur du menu.
+        </p>
+      </div>
+
+      {workspaces.length === 0 ? (
+        <p style={{ color: 'var(--text-muted)', textAlign: 'center', padding: '40px 20px' }}>
+          Aucun espace de travail ne vous a été accordé.
+        </p>
+      ) : (
+        <div style={{ padding: '8px 20px 20px' }}>
+          {workspaces.map(w => (
+            <div
+              key={w.id}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 12, padding: '12px 4px',
+                borderBottom: '1px solid var(--border)',
+              }}
+            >
+              <div style={{ flex: 1 }}>
+                <div style={{ fontWeight: 600, fontSize: 'var(--fs-sm)' }}>{w.nom}</div>
+                {w.description && (
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>{w.description}</div>
+                )}
+              </div>
+              <Toggle
+                checked={!!w.active_by_user}
+                disabled={pending === w.id}
+                onClick={() => toggle(w)}
+                title={w.active_by_user ? 'Masquer cet espace de travail' : 'Activer cet espace de travail'}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}