Rôle modérateur + gestion des comptes admin/modérateur

- Nouveau rôle users.role='moderator' (contrainte CHECK migrée via
  DROP+ADD CONSTRAINT, idempotent) : accès à Membres, Rencontres,
  Inscriptions uniquement. Dashboard, Catégories (écriture), Contenu du
  site, Demandes d'adhésion et gestion des comptes restent admin-only,
  imposé côté serveur (requireAuth accepte désormais un tableau de rôles)
- Nouvel onglet « Administrateurs » (admin-only) : créer un compte admin
  ou modérateur (mot de passe temporaire généré, même mécanique que pour
  les membres — visible tant que non changé, changement forcé à la
  première connexion), réinitialiser l'accès, promouvoir/rétrograder,
  supprimer. Garde-fous : impossible de se supprimer ou de se rétrograder
  soi-même, impossible de supprimer le dernier administrateur
- users.full_name (colonne migrée) pour l'affichage des comptes staff
- AccessCell/CredentialsModal extraits dans AccessControls.jsx, partagés
  entre la gestion des membres et celle des comptes admin/modérateur
- AdminShell filtre ses onglets par rôle ; Espace.jsx route admin et
  modérateur vers le back-office

Corrigé en cours de route : GET /api/admin/categories doit rester lisible
par les modérateurs (nécessaire au formulaire membre) même si sa gestion
en écriture reste admin-only — sans quoi le Promise.all du frontend
échouait silencieusement et vidait la liste des membres.

Vérifié : 34 + 21 tests existants toujours au vert, 26 nouveaux tests de
permissions par rôle, parcours navigateur complet (création modérateur,
connexion, changement forcé, menu restreint, accès aux membres).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fkg15RCxNgUys4ru73He2o

README.md

@@ -75,6 +75,9 @@ s'ils n'en ont pas déjà un :
 | Admin | `admin@sluc-businessclub.fr` | `ADMIN_INITIAL_PASSWORD` (défaut : `SlucAdmin2026!`) |
 | Membre (×12) | email de contact de chaque entreprise de démo, ex. `contact@lorraine-assurances.fr` | `MEMBER_INITIAL_PASSWORD` (défaut : `SlucMembre2026!`) |
 
+D'autres comptes administrateur ou modérateur se créent depuis le back-office
+(onglet « Administrateurs », réservé aux admins) — voir ci-dessous.
+
 Changez le mot de passe admin après la première connexion (Espace membre/admin →
 formulaire « Mot de passe », endpoint `POST /api/auth/change-password`).
 
@@ -106,7 +109,19 @@ l'utilisateur est bloqué sur un écran de changement obligatoire avant d'accéd
   des octets magiques côté serveur).
 - Bannière d'état d'adhésion (validée / à renouveler) et changement de mot de passe.
 
+**Rôles du back-office**
+- **Administrateur** : accès complet — tableau de bord, membres, rencontres, inscriptions,
+  catégories, contenu du site, et gestion des comptes administrateurs/modérateurs.
+- **Modérateur** : accès restreint aux membres, aux rencontres et aux inscriptions
+  (opérations du quotidien) ; pas de tableau de bord, pas de catégories, pas de contenu
+  du site, pas de gestion des comptes. Un modérateur peut être promu administrateur (et
+  inversement) depuis l'onglet « Administrateurs ». Le système empêche de se supprimer
+  ou de se rétrograder soi-même, et de supprimer le dernier compte administrateur restant.
+
 **Espace admin** (rôle `admin`)
+- Administrateurs : création de comptes administrateur ou modérateur (mot de passe
+  temporaire généré, changement obligatoire à la première connexion — même mécanique
+  que pour les membres), réinitialisation d'accès, promotion/rétrogradation, suppression.
 - Tableau de bord : indicateurs temps réel, dernières inscriptions, prochaines rencontres.
 - Membres : création, édition, validation/suspension par saison (1er sept. → 31 août). La création
   d'un membre avec email génère automatiquement un mot de passe temporaire, affiché à l'admin et
@@ -128,8 +143,11 @@ l'utilisateur est bloqué sur un écran de changement obligatoire avant d'accéd
   derrière HTTPS).
 - **CSRF** : cookie SameSite=Strict + vérification de l'en-tête `Origin` sur toutes
   les mutations.
-- **Autorisation** : middleware de rôles (`member` / `admin`) sur chaque route protégée ;
-  un membre ne peut modifier que sa propre fiche.
+- **Autorisation** : middleware de rôles (`member` / `moderator` / `admin`) sur chaque
+  route protégée ; un membre ne peut modifier que sa propre fiche ; les routes
+  administratives sensibles (catégories en écriture, contenu du site, demandes
+  d'adhésion, gestion des comptes) restent strictement admin-only même si un
+  modérateur est authentifié.
 - **Validation** : schémas `zod` sur toutes les entrées (types, longueurs, formats),
   contraintes `CHECK` en base en seconde ligne.
 - **Rate limiting** : global (300/min), connexion (10 / 15 min), formulaires publics

server/src/errors.js

@@ -0,0 +1,9 @@
+// Thrown by access-management helpers (member/staff account creation and
+// resets) for expected, user-facing failures — routes map these to the
+// right HTTP status instead of a generic 500.
+export class AccessError extends Error {
+  constructor(status, message) {
+    super(message);
+    this.status = status;
+  }
+}

server/src/memberAccess.js

@@ -1,13 +1,7 @@
 import bcrypt from 'bcryptjs';
 import { query } from './db.js';
 import { generateTempPassword } from './passwords.js';
-
-export class AccessError extends Error {
-  constructor(status, message) {
-    super(message);
-    this.status = status;
-  }
-}
+import { AccessError } from './errors.js';
 
 // Creates the member's login if it doesn't exist yet, or resets it if it
 // does — same operation either way, used for "create member" and for

server/src/middleware/auth.js

@@ -31,10 +31,13 @@ export function attachUser(req, _res, next) {
   next();
 }
 
-export function requireAuth(role) {
+// `roles` may be a single role string, an array of allowed roles, or
+// omitted to just require any authenticated session.
+export function requireAuth(roles) {
+  const allowed = roles ? (Array.isArray(roles) ? roles : [roles]) : null;
   return (req, res, next) => {
     if (!req.user) return res.status(401).json({ error: 'Authentification requise' });
-    if (role && req.user.role !== role) return res.status(403).json({ error: 'Accès refusé' });
+    if (allowed && !allowed.includes(req.user.role)) return res.status(403).json({ error: 'Accès refusé' });
     next();
   };
 }

server/src/routes/admin.js

@@ -8,14 +8,22 @@ import {
   inscriptionAdminSchema,
   categorySchema,
   contentSchema,
+  staffUserSchema,
+  roleChangeSchema,
   idParam,
 } from '../schemas.js';
 import { imageUpload, saveImage, deleteImage } from '../uploads.js';
-import { ensureMemberAccess, AccessError } from '../memberAccess.js';
+import { ensureMemberAccess } from '../memberAccess.js';
+import { createStaffUser, resetStaffAccess } from '../userAccess.js';
+import { AccessError } from '../errors.js';
 
 export const adminRouter = Router();
 
-adminRouter.use(requireAuth('admin'));
+// Every route below requires at least an authenticated staff session
+// (admin or moderator); individual routes further restrict to admin-only
+// where noted.
+adminRouter.use(requireAuth(['admin', 'moderator']));
+const adminOnly = requireAuth('admin');
 
 const MEMBER_SQL = `
   SELECT m.id, m.nom, m.secteur, m.categorie_id, c.name AS categorie, m.dirigeant,
@@ -38,8 +46,8 @@ const INSCR_SQL = `
          i.rencontre_id, r.titre AS rencontre
     FROM inscriptions i JOIN rencontres r ON r.id = i.rencontre_id`;
 
-// ---------- Dashboard ----------
-adminRouter.get('/dashboard', async (_req, res, next) => {
+// ---------- Dashboard (admin only) ----------
+adminRouter.get('/dashboard', adminOnly, async (_req, res, next) => {
   try {
     const [kpis, latest, upcoming] = await Promise.all([
       query(`
@@ -60,7 +68,7 @@ adminRouter.get('/dashboard', async (_req, res, next) => {
   }
 });
 
-// ---------- Members ----------
+// ---------- Members (admin + moderator) ----------
 adminRouter.get('/members', async (_req, res, next) => {
   try {
     const result = await query(`${MEMBER_SQL} ORDER BY m.nom`);
@@ -145,7 +153,7 @@ adminRouter.post('/members/:id/reset-access', validate(idParam, 'params'), async
   }
 });
 
-// ---------- Rencontres ----------
+// ---------- Rencontres (admin + moderator) ----------
 adminRouter.get('/rencontres', async (_req, res, next) => {
   try {
     const result = await query(`${RENC_SQL} GROUP BY r.id ORDER BY r.date_renc`);
@@ -202,7 +210,7 @@ adminRouter.get('/rencontres/:id/inscriptions', validate(idParam, 'params'), asy
   }
 });
 
-// ---------- Inscriptions ----------
+// ---------- Inscriptions (admin + moderator) ----------
 adminRouter.get('/inscriptions', async (_req, res, next) => {
   try {
     const result = await query(`${INSCR_SQL} ORDER BY i.created_at DESC, i.id DESC`);
@@ -250,6 +258,9 @@ adminRouter.delete('/inscriptions/:id', validate(idParam, 'params'), async (req,
 });
 
 // ---------- Categories ----------
+// Read access is shared with moderators: the member form's category
+// dropdown needs it. Managing categories (create/rename/delete) stays
+// admin-only.
 adminRouter.get('/categories', async (_req, res, next) => {
   try {
     const result = await query(`
@@ -262,7 +273,7 @@ adminRouter.get('/categories', async (_req, res, next) => {
   }
 });
 
-adminRouter.post('/categories', validate(categorySchema), async (req, res, next) => {
+adminRouter.post('/categories', adminOnly, validate(categorySchema), async (req, res, next) => {
   try {
     const result = await query(
       'INSERT INTO categories (name) VALUES ($1) ON CONFLICT (name) DO NOTHING RETURNING id',
@@ -275,7 +286,7 @@ adminRouter.post('/categories', validate(categorySchema), async (req, res, next)
   }
 });
 
-adminRouter.put('/categories/:id', validate(idParam, 'params'), validate(categorySchema), async (req, res, next) => {
+adminRouter.put('/categories/:id', adminOnly, validate(idParam, 'params'), validate(categorySchema), async (req, res, next) => {
   try {
     const result = await query('UPDATE categories SET name = $1 WHERE id = $2 RETURNING id', [
       req.data.name,
@@ -289,7 +300,7 @@ adminRouter.put('/categories/:id', validate(idParam, 'params'), validate(categor
   }
 });
 
-adminRouter.delete('/categories/:id', validate(idParam, 'params'), async (req, res, next) => {
+adminRouter.delete('/categories/:id', adminOnly, validate(idParam, 'params'), async (req, res, next) => {
   try {
     // members.categorie_id has ON DELETE SET NULL: they become "Non classée"
     await query('DELETE FROM categories WHERE id = $1', [req.params.id]);
@@ -299,8 +310,8 @@ adminRouter.delete('/categories/:id', validate(idParam, 'params'), async (req, r
   }
 });
 
-// ---------- Site content ----------
-adminRouter.put('/content', validate(contentSchema), async (req, res, next) => {
+// ---------- Site content (admin only) ----------
+adminRouter.put('/content', adminOnly, validate(contentSchema), async (req, res, next) => {
   try {
     const entries = Object.entries(req.data).filter(([, v]) => v !== undefined);
     for (const [key, value] of entries) {
@@ -316,7 +327,7 @@ adminRouter.put('/content', validate(contentSchema), async (req, res, next) => {
   }
 });
 
-adminRouter.post('/content/hero-photo', (req, res, next) => {
+adminRouter.post('/content/hero-photo', adminOnly, (req, res, next) => {
   imageUpload(req, res, async (err) => {
     if (err) return res.status(400).json({ error: 'Fichier invalide (2 Mo max).' });
     try {
@@ -337,8 +348,8 @@ adminRouter.post('/content/hero-photo', (req, res, next) => {
   });
 });
 
-// ---------- Demandes d'adhésion ----------
-adminRouter.get('/demandes', async (_req, res, next) => {
+// ---------- Demandes d'adhésion (admin only) ----------
+adminRouter.get('/demandes', adminOnly, async (_req, res, next) => {
   try {
     const result = await query('SELECT * FROM demandes_adhesion ORDER BY created_at DESC');
     res.json({ demandes: result.rows });
@@ -346,3 +357,79 @@ adminRouter.get('/demandes', async (_req, res, next) => {
     next(err);
   }
 });
+
+// ---------- Admin & moderator accounts (admin only) ----------
+adminRouter.get('/users', adminOnly, async (req, res, next) => {
+  try {
+    const result = await query(`
+      SELECT id, email, full_name, role, must_change_password,
+             CASE WHEN must_change_password THEN temp_password ELSE NULL END AS temp_password,
+             created_at
+        FROM users WHERE role IN ('admin', 'moderator')
+       ORDER BY role, full_name, email`);
+    res.json({ users: result.rows.map((u) => ({ ...u, is_self: u.id === req.user.sub })) });
+  } catch (err) {
+    next(err);
+  }
+});
+
+adminRouter.post('/users', adminOnly, validate(staffUserSchema), async (req, res, next) => {
+  try {
+    const { fullName, email, role } = req.data;
+    const { id, tempPassword } = await createStaffUser({ fullName, email, role });
+    res.status(201).json({ id, tempPassword });
+  } catch (err) {
+    if (err instanceof AccessError) return res.status(err.status).json({ error: err.message });
+    next(err);
+  }
+});
+
+adminRouter.post('/users/:id/reset-access', adminOnly, validate(idParam, 'params'), async (req, res, next) => {
+  try {
+    const tempPassword = await resetStaffAccess(req.params.id);
+    res.json({ tempPassword });
+  } catch (err) {
+    if (err instanceof AccessError) return res.status(err.status).json({ error: err.message });
+    next(err);
+  }
+});
+
+adminRouter.put('/users/:id/role', adminOnly, validate(idParam, 'params'), validate(roleChangeSchema), async (req, res, next) => {
+  try {
+    if (req.params.id === req.user.sub) {
+      return res.status(400).json({ error: 'Vous ne pouvez pas modifier votre propre rôle.' });
+    }
+    const target = await query(`SELECT role FROM users WHERE id = $1 AND role IN ('admin', 'moderator')`, [req.params.id]);
+    if (target.rowCount === 0) return res.status(404).json({ error: 'Compte introuvable' });
+    if (target.rows[0].role === 'admin' && req.data.role !== 'admin') {
+      const adminCount = await query(`SELECT COUNT(*)::int AS n FROM users WHERE role = 'admin'`);
+      if (adminCount.rows[0].n <= 1) {
+        return res.status(400).json({ error: 'Impossible : il doit rester au moins un administrateur.' });
+      }
+    }
+    await query('UPDATE users SET role = $1 WHERE id = $2', [req.data.role, req.params.id]);
+    res.json({ ok: true });
+  } catch (err) {
+    next(err);
+  }
+});
+
+adminRouter.delete('/users/:id', adminOnly, validate(idParam, 'params'), async (req, res, next) => {
+  try {
+    if (req.params.id === req.user.sub) {
+      return res.status(400).json({ error: 'Vous ne pouvez pas supprimer votre propre compte.' });
+    }
+    const target = await query(`SELECT role FROM users WHERE id = $1 AND role IN ('admin', 'moderator')`, [req.params.id]);
+    if (target.rowCount === 0) return res.status(404).json({ error: 'Compte introuvable' });
+    if (target.rows[0].role === 'admin') {
+      const adminCount = await query(`SELECT COUNT(*)::int AS n FROM users WHERE role = 'admin'`);
+      if (adminCount.rows[0].n <= 1) {
+        return res.status(400).json({ error: 'Impossible de supprimer le dernier compte administrateur.' });
+      }
+    }
+    await query(`DELETE FROM users WHERE id = $1 AND role IN ('admin', 'moderator')`, [req.params.id]);
+    res.json({ ok: true });
+  } catch (err) {
+    next(err);
+  }
+});

server/src/schemas.js

@@ -68,6 +68,16 @@ export const inscriptionAdminSchema = z.object({
 
 export const categorySchema = z.object({ name: trimmed(80, 1) });
 
+export const staffRoleEnum = z.enum(['admin', 'moderator']);
+
+export const staffUserSchema = z.object({
+  fullName: trimmed(120, 1),
+  email: trimmed(254, 3).email(),
+  role: staffRoleEnum,
+});
+
+export const roleChangeSchema = z.object({ role: staffRoleEnum });
+
 export const contentSchema = z.object({
   hero_quote_text: trimmed(300).optional(),
   hero_quote_author: trimmed(120).optional(),

server/src/sql/schema.sql

@@ -28,8 +28,11 @@ CREATE TABLE IF NOT EXISTS users (
     id                   SERIAL PRIMARY KEY,
     email                CITEXT NOT NULL UNIQUE CHECK (char_length(email) <= 254),
     password_hash        TEXT NOT NULL,
-    role                 TEXT NOT NULL CHECK (role IN ('member', 'admin')),
+    role                 TEXT NOT NULL CHECK (role IN ('member', 'admin', 'moderator')),
     member_id            INTEGER UNIQUE REFERENCES members(id) ON DELETE CASCADE,
+    -- Display name for admin/moderator accounts (member accounts show their
+    -- name via the linked members row instead, this stays NULL for them).
+    full_name            TEXT,
     -- Temporary password shown to the admin (create / reset access), kept
     -- readable only until the user changes it — cleared automatically at
     -- that point. NULL once a real password has been chosen by the user.
@@ -37,10 +40,13 @@ CREATE TABLE IF NOT EXISTS users (
     must_change_password BOOLEAN NOT NULL DEFAULT false,
     created_at           TIMESTAMPTZ NOT NULL DEFAULT now()
 );
--- ALTER ... IF NOT EXISTS heals databases that already had this table
--- before these columns were introduced.
+-- ALTER ... IF NOT EXISTS / DROP+ADD CONSTRAINT heal databases that already
+-- had this table before these columns/roles were introduced.
 ALTER TABLE users ADD COLUMN IF NOT EXISTS temp_password TEXT;
 ALTER TABLE users ADD COLUMN IF NOT EXISTS must_change_password BOOLEAN NOT NULL DEFAULT false;
+ALTER TABLE users ADD COLUMN IF NOT EXISTS full_name TEXT;
+ALTER TABLE users DROP CONSTRAINT IF EXISTS users_role_check;
+ALTER TABLE users ADD CONSTRAINT users_role_check CHECK (role IN ('member', 'admin', 'moderator'));
 
 CREATE TABLE IF NOT EXISTS rencontres (
     id          SERIAL PRIMARY KEY,

server/src/sql/seed.sql

@@ -62,6 +62,6 @@ INSERT INTO users (email, password_hash, role, member_id)
 SELECT email, '*seed*', 'member', id FROM members WHERE email IS NOT NULL
 ON CONFLICT (email) DO NOTHING;
 
-INSERT INTO users (email, password_hash, role) VALUES
-  ('admin@sluc-businessclub.fr', '*seed*', 'admin')
+INSERT INTO users (email, password_hash, role, full_name) VALUES
+  ('admin@sluc-businessclub.fr', '*seed*', 'admin', 'Administrateur')
 ON CONFLICT (email) DO NOTHING;

server/src/userAccess.js

@@ -0,0 +1,39 @@
+import bcrypt from 'bcryptjs';
+import { query } from './db.js';
+import { generateTempPassword } from './passwords.js';
+import { AccessError } from './errors.js';
+
+const STAFF_ROLES = ['admin', 'moderator'];
+
+// Creates an admin or moderator account with a temporary password — same
+// readable-until-changed mechanic as member accounts (see memberAccess.js).
+export async function createStaffUser({ fullName, email, role }) {
+  if (!STAFF_ROLES.includes(role)) throw new AccessError(400, 'Rôle invalide.');
+  const tempPassword = generateTempPassword();
+  const hash = await bcrypt.hash(tempPassword, 12);
+  try {
+    const result = await query(
+      `INSERT INTO users (email, password_hash, role, full_name, temp_password, must_change_password)
+       VALUES ($1, $2, $3, $4, $5, true) RETURNING id`,
+      [email, hash, role, fullName, tempPassword]
+    );
+    return { id: result.rows[0].id, tempPassword };
+  } catch (err) {
+    if (err.code === '23505') throw new AccessError(409, 'Cet email est déjà utilisé.');
+    throw err;
+  }
+}
+
+// Regenerates the temporary password for an existing admin/moderator
+// account (e.g. they lost it).
+export async function resetStaffAccess(userId) {
+  const tempPassword = generateTempPassword();
+  const hash = await bcrypt.hash(tempPassword, 12);
+  const result = await query(
+    `UPDATE users SET password_hash=$1, temp_password=$2, must_change_password=true
+      WHERE id=$3 AND role IN ('admin', 'moderator') RETURNING id`,
+    [hash, tempPassword, userId]
+  );
+  if (result.rowCount === 0) throw new AccessError(404, 'Compte introuvable.');
+  return tempPassword;
+}

web/src/App.jsx

@@ -12,12 +12,15 @@ import { useAuth } from './lib/AuthContext.jsx';
 export default function App() {
   const location = useLocation();
   const { user } = useAuth();
-  // The admin backend (shown inside /espace-membre once an admin logs in)
-  // uses its own full-height sidebar layout, without the public header/footer.
-  // A forced password change is still shown inside the normal site layout.
+  // The admin backend (shown inside /espace-membre once an admin or
+  // moderator logs in) uses its own full-height sidebar layout, without the
+  // public header/footer. A forced password change is still shown inside
+  // the normal site layout.
   const isAdminBackend =
     location.pathname.startsWith('/admin') ||
-    (location.pathname === '/espace-membre' && user?.role === 'admin' && !user?.mustChangePassword);
+    (location.pathname === '/espace-membre' &&
+      (user?.role === 'admin' || user?.role === 'moderator') &&
+      !user?.mustChangePassword);
 
   useEffect(() => {
     window.scrollTo(0, 0);

web/src/components/admin/AccessControls.jsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import Modal from '../Modal.jsx';
+
+// Shows a just-generated temporary password so the admin can relay it
+// (copy button). It also stays readable inline (via AccessCell below)
+// until the account holder changes it.
+export function CredentialsModal({ recipient, tempPassword, onClose }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(tempPassword);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard unavailable (non-HTTPS, older browser) — password stays selectable */
+    }
+  };
+  return (
+    <Modal onClose={onClose} maxWidth={440} header={{ kicker: 'Accès', title: 'Mot de passe temporaire généré' }}>
+      <div style={{ padding: '26px 30px' }}>
+        <p style={{ fontSize: 14, color: 'var(--gray)', lineHeight: 1.6, marginBottom: 18 }}>
+          Communiquez ces identifiants à <strong>{recipient}</strong>. Ce mot de passe devra être
+          changé dès la première connexion.
+        </p>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--admin-bg)', borderRadius: 6, padding: '14px 16px' }}>
+          <code style={{ fontSize: 18, fontWeight: 700, letterSpacing: '.02em', flex: 1, userSelect: 'all' }}>{tempPassword}</code>
+          <button type="button" className="btn btn-outline-soft btn-sm" style={{ fontSize: 13, padding: '8px 14px' }} onClick={copy}>
+            {copied ? '✓ Copié' : 'Copier'}
+          </button>
+        </div>
+        <p style={{ fontSize: 12.5, color: 'var(--gray-light)', lineHeight: 1.55, marginTop: 12 }}>
+          Ce mot de passe reste visible dans la liste tant qu'il n'a pas été changé.
+        </p>
+        <button type="button" className="btn btn-dark btn-sm" style={{ width: '100%', marginTop: 20, fontSize: 14 }} onClick={onClose}>
+          Fermer
+        </button>
+      </div>
+    </Modal>
+  );
+}
+
+// Compact cell for a table row: shows the live temp password (+ copy +
+// reset), a "Défini" badge once changed, or a "Créer l'accès" action when
+// there's no login yet.
+export function AccessCell({ hasEmail = true, hasLogin, mustChangePassword, tempPassword, onGenerate, createLabel = "Créer l'accès" }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
+  if (!hasEmail) {
+    return (
+      <span style={{ fontSize: 12.5, color: 'var(--gray-light)' }} title="Ajoutez un email pour créer un accès">
+        —
+      </span>
+    );
+  }
+  if (!hasLogin) {
+    return (
+      <button type="button" className="btn-link" style={{ fontSize: 12.5 }} onClick={onGenerate}>
+        {createLabel}
+      </button>
+    );
+  }
+  if (mustChangePassword && tempPassword) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+        <code style={{ fontSize: 12, background: 'var(--admin-bg)', padding: '4px 8px', borderRadius: 3, fontWeight: 600 }}>
+          {tempPassword}
+        </code>
+        <button type="button" className="btn-link-gray" style={{ fontSize: 11.5 }} onClick={() => copy(tempPassword)}>
+          {copied ? '✓' : 'copier'}
+        </button>
+        <button type="button" className="btn-link-gray" style={{ fontSize: 11.5 }} onClick={onGenerate}>
+          réinitialiser
+        </button>
+      </div>
+    );
+  }
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+      <span className="badge badge-green">Défini</span>
+      <button type="button" className="btn-link-gray" style={{ fontSize: 11.5 }} onClick={onGenerate}>
+        réinitialiser
+      </button>
+    </div>
+  );
+}

web/src/components/admin/AdminTabs.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { api, dateParts, seasonLabel, statutLabel } from '../../lib/api.js';
 import Modal from '../Modal.jsx';
+import { AccessCell, CredentialsModal } from './AccessControls.jsx';
 
 /* ---------------- Members ---------------- */
 
@@ -88,95 +89,6 @@ function MemberFormModal({ member, categories, onClose, onSaved }) {
   );
 }
 
-// Shows a just-generated temporary password so the admin can relay it to
-// the member (copy button). It also stays readable in the members table
-// below until the member changes it.
-function CredentialsModal({ email, tempPassword, onClose }) {
-  const [copied, setCopied] = useState(false);
-  const copy = async () => {
-    try {
-      await navigator.clipboard.writeText(tempPassword);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      /* clipboard unavailable (non-HTTPS, older browser) — password stays selectable */
-    }
-  };
-  return (
-    <Modal onClose={onClose} maxWidth={440} header={{ kicker: 'Accès membre', title: 'Mot de passe temporaire généré' }}>
-      <div style={{ padding: '26px 30px' }}>
-        <p style={{ fontSize: 14, color: 'var(--gray)', lineHeight: 1.6, marginBottom: 18 }}>
-          Communiquez ces identifiants à <strong>{email}</strong>. Ce mot de passe devra être
-          changé dès la première connexion.
-        </p>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--admin-bg)', borderRadius: 6, padding: '14px 16px' }}>
-          <code style={{ fontSize: 18, fontWeight: 700, letterSpacing: '.02em', flex: 1, userSelect: 'all' }}>{tempPassword}</code>
-          <button type="button" className="btn btn-outline-soft btn-sm" style={{ fontSize: 13, padding: '8px 14px' }} onClick={copy}>
-            {copied ? '✓ Copié' : 'Copier'}
-          </button>
-        </div>
-        <p style={{ fontSize: 12.5, color: 'var(--gray-light)', lineHeight: 1.55, marginTop: 12 }}>
-          Ce mot de passe reste visible dans la liste des membres tant qu'il n'a pas été changé.
-        </p>
-        <button type="button" className="btn btn-dark btn-sm" style={{ width: '100%', marginTop: 20, fontSize: 14 }} onClick={onClose}>
-          Fermer
-        </button>
-      </div>
-    </Modal>
-  );
-}
-
-function AccessCell({ member, onGenerate }) {
-  const [copied, setCopied] = useState(false);
-  const copy = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      /* clipboard unavailable */
-    }
-  };
-
-  if (!member.email) {
-    return (
-      <span style={{ fontSize: 12.5, color: 'var(--gray-light)' }} title="Ajoutez un email pour créer un accès">
-        —
-      </span>
-    );
-  }
-  if (!member.has_login) {
-    return (
-      <button type="button" className="btn-link" style={{ fontSize: 12.5 }} onClick={() => onGenerate(member)}>
-        Créer l'accès
-      </button>
-    );
-  }
-  if (member.must_change_password && member.temp_password) {
-    return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-        <code style={{ fontSize: 12, background: 'var(--admin-bg)', padding: '4px 8px', borderRadius: 3, fontWeight: 600 }}>
-          {member.temp_password}
-        </code>
-        <button type="button" className="btn-link-gray" style={{ fontSize: 11.5 }} onClick={() => copy(member.temp_password)}>
-          {copied ? '✓' : 'copier'}
-        </button>
-        <button type="button" className="btn-link-gray" style={{ fontSize: 11.5 }} onClick={() => onGenerate(member)}>
-          réinitialiser
-        </button>
-      </div>
-    );
-  }
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-      <span className="badge badge-green">Défini</span>
-      <button type="button" className="btn-link-gray" style={{ fontSize: 11.5 }} onClick={() => onGenerate(member)}>
-        réinitialiser
-      </button>
-    </div>
-  );
-}
-
 export function MembersTab() {
   const [members, setMembers] = useState([]);
   const [categories, setCategories] = useState([]);
@@ -206,7 +118,7 @@ export function MembersTab() {
     setAccessError('');
     try {
       const d = await api.post(`/api/admin/members/${m.id}/reset-access`);
-      setCredentials({ email: m.email, tempPassword: d.tempPassword });
+      setCredentials({ recipient: m.email, tempPassword: d.tempPassword });
       reload();
     } catch (err) {
       setAccessError(err.message);
@@ -255,7 +167,13 @@ export function MembersTab() {
                   </span>
                 </td>
                 <td>
-                  <AccessCell member={m} onGenerate={generateAccess} />
+                  <AccessCell
+                    hasEmail={!!m.email}
+                    hasLogin={m.has_login}
+                    mustChangePassword={m.must_change_password}
+                    tempPassword={m.temp_password}
+                    onGenerate={() => generateAccess(m)}
+                  />
                 </td>
                 <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                   <button className="btn-link-gray" style={{ color: 'var(--gray)', marginRight: 14 }} onClick={() => toggle(m)}>
@@ -277,7 +195,7 @@ export function MembersTab() {
             setModal(null);
             reload();
             if (result?.tempPassword) {
-              setCredentials({ email: result.email, tempPassword: result.tempPassword });
+              setCredentials({ recipient: result.email, tempPassword: result.tempPassword });
             } else if (result?.accessError) {
               setAccessError(`Membre créé, mais accès non créé : ${result.accessError}`);
             }
@@ -286,7 +204,7 @@ export function MembersTab() {
       )}
       {credentials && (
         <CredentialsModal
-          email={credentials.email}
+          recipient={credentials.recipient}
           tempPassword={credentials.tempPassword}
           onClose={() => setCredentials(null)}
         />

web/src/components/admin/AdminUsers.jsx

@@ -0,0 +1,180 @@
+import { useEffect, useState } from 'react';
+import { api } from '../../lib/api.js';
+import Modal from '../Modal.jsx';
+import { AccessCell, CredentialsModal } from './AccessControls.jsx';
+
+const ROLE_LABEL = { admin: 'Administrateur', moderator: 'Modérateur' };
+
+function UserFormModal({ onClose, onCreated }) {
+  const [form, setForm] = useState({ fullName: '', email: '', role: 'moderator' });
+  const [error, setError] = useState('');
+
+  const onChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError('');
+    try {
+      const result = await api.post('/api/admin/users', form);
+      onCreated({ ...result, email: form.email, fullName: form.fullName });
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  return (
+    <Modal onClose={onClose} maxWidth={480} header={{ kicker: 'Comptes', title: 'Nouveau compte' }}>
+      <form onSubmit={submit} style={{ padding: '26px 30px' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+          <label className="field">Nom complet
+            <input name="fullName" value={form.fullName} onChange={onChange} required maxLength={120} />
+          </label>
+          <label className="field">Email
+            <input name="email" type="email" value={form.email} onChange={onChange} required maxLength={254} />
+          </label>
+          <label className="field">Rôle
+            <select name="role" value={form.role} onChange={onChange}>
+              <option value="moderator">Modérateur — membres, rencontres, inscriptions</option>
+              <option value="admin">Administrateur — accès complet</option>
+            </select>
+          </label>
+        </div>
+        {error && <p className="error-text" style={{ marginTop: 12 }}>{error}</p>}
+        <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
+          <button type="submit" className="btn btn-red btn-sm" style={{ flex: 1, fontSize: 14.5, padding: 13 }}>
+            Créer le compte
+          </button>
+          <button type="button" className="btn btn-outline-soft btn-sm" style={{ fontSize: 14.5, padding: '13px 22px' }} onClick={onClose}>
+            Annuler
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
+
+export function UsersTab() {
+  const [users, setUsers] = useState([]);
+  const [modal, setModal] = useState(false);
+  const [credentials, setCredentials] = useState(null);
+  const [error, setError] = useState('');
+
+  const reload = () => api.get('/api/admin/users').then((d) => setUsers(d.users)).catch(() => {});
+
+  useEffect(() => {
+    reload();
+  }, []);
+
+  const generateAccess = async (u) => {
+    setError('');
+    try {
+      const d = await api.post(`/api/admin/users/${u.id}/reset-access`);
+      setCredentials({ recipient: `${u.full_name} (${u.email})`, tempPassword: d.tempPassword });
+      reload();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const changeRole = async (u, role) => {
+    setError('');
+    try {
+      await api.put(`/api/admin/users/${u.id}/role`, { role });
+      reload();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const remove = async (u) => {
+    if (!window.confirm(`Supprimer le compte de ${u.full_name || u.email} ?`)) return;
+    setError('');
+    try {
+      await api.del(`/api/admin/users/${u.id}`);
+      reload();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  return (
+    <div className="card" style={{ borderRadius: 6, overflow: 'hidden' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 24px', borderBottom: '1px solid var(--border)' }}>
+        <div>
+          <h3 className="serif" style={{ fontSize: 19, fontWeight: 600 }}>Administrateurs & modérateurs</h3>
+          <div style={{ fontSize: 12.5, color: 'var(--gray-light)', marginTop: 3, maxWidth: 520, lineHeight: 1.5 }}>
+            Les modérateurs gèrent les membres, les rencontres et les inscriptions. Les administrateurs
+            ont accès à l'ensemble du back-office.
+          </div>
+        </div>
+        <button className="btn btn-red btn-sm" style={{ fontSize: 13, padding: '10px 18px' }} onClick={() => setModal(true)}>
+          + Ajouter un compte
+        </button>
+      </div>
+      {error && <p className="error-text" style={{ padding: '12px 24px 0' }}>{error}</p>}
+      <div style={{ overflowX: 'auto' }}>
+        <table className="table">
+          <thead>
+            <tr>
+              <th>Nom</th><th>Email</th><th>Rôle</th><th>Accès</th><th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((u) => (
+              <tr key={u.id}>
+                <td>{u.full_name || '—'}</td>
+                <td>{u.email}</td>
+                <td>
+                  <span className={`badge ${u.role === 'admin' ? 'badge-green' : 'badge-amber'}`}>
+                    {ROLE_LABEL[u.role]}
+                  </span>
+                </td>
+                <td>
+                  <AccessCell
+                    hasLogin
+                    mustChangePassword={u.must_change_password}
+                    tempPassword={u.temp_password}
+                    onGenerate={() => generateAccess(u)}
+                  />
+                </td>
+                <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
+                  {u.is_self ? (
+                    <span style={{ fontSize: 12, color: 'var(--gray-light)' }}>Vous</span>
+                  ) : (
+                    <>
+                      <button
+                        className="btn-link-gray"
+                        style={{ color: 'var(--gray)', marginRight: 14 }}
+                        onClick={() => changeRole(u, u.role === 'admin' ? 'moderator' : 'admin')}
+                      >
+                        {u.role === 'admin' ? 'Passer modérateur' : 'Passer admin'}
+                      </button>
+                      <button className="btn-link" style={{ fontSize: 13 }} onClick={() => remove(u)}>Supprimer</button>
+                    </>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {modal && (
+        <UserFormModal
+          onClose={() => setModal(false)}
+          onCreated={(result) => {
+            setModal(false);
+            reload();
+            setCredentials({ recipient: `${result.fullName} (${result.email})`, tempPassword: result.tempPassword });
+          }}
+        />
+      )}
+      {credentials && (
+        <CredentialsModal
+          recipient={credentials.recipient}
+          tempPassword={credentials.tempPassword}
+          onClose={() => setCredentials(null)}
+        />
+      )}
+    </div>
+  );
+}

web/src/pages/Admin.jsx

@@ -4,14 +4,19 @@ import { useAuth } from '../lib/AuthContext.jsx';
 import { api, dateParts, statutLabel } from '../lib/api.js';
 import { MembersTab, RencontresTab, InscriptionsTab } from '../components/admin/AdminTabs.jsx';
 import { CategoriesTab, ContenuTab } from '../components/admin/AdminContent.jsx';
+import { UsersTab } from '../components/admin/AdminUsers.jsx';
 
+// Moderators only get members/rencontres/inscriptions — everything else
+// (dashboard, taxonomy, site content, staff account management) is
+// admin-only, enforced both here (sidebar) and server-side (routes).
 const TABS = [
-  { key: 'dashboard', icon: '◧', label: 'Tableau de bord', title: 'Tableau de bord' },
-  { key: 'membres', icon: '▤', label: 'Membres', title: 'Gestion des membres' },
-  { key: 'rencontres', icon: '◈', label: 'Rencontres', title: 'Rencontres' },
-  { key: 'inscriptions', icon: '✎', label: 'Inscriptions', title: 'Inscriptions' },
-  { key: 'categories', icon: '☲', label: 'Catégories', title: 'Catégories' },
-  { key: 'contenu', icon: '▧', label: 'Contenu du site', title: 'Contenu du site' },
+  { key: 'dashboard', icon: '◧', label: 'Tableau de bord', title: 'Tableau de bord', roles: ['admin'] },
+  { key: 'membres', icon: '▤', label: 'Membres', title: 'Gestion des membres', roles: ['admin', 'moderator'] },
+  { key: 'rencontres', icon: '◈', label: 'Rencontres', title: 'Rencontres', roles: ['admin', 'moderator'] },
+  { key: 'inscriptions', icon: '✎', label: 'Inscriptions', title: 'Inscriptions', roles: ['admin', 'moderator'] },
+  { key: 'categories', icon: '☲', label: 'Catégories', title: 'Catégories', roles: ['admin'] },
+  { key: 'contenu', icon: '▧', label: 'Contenu du site', title: 'Contenu du site', roles: ['admin'] },
+  { key: 'utilisateurs', icon: '⚿', label: 'Administrateurs', title: 'Administrateurs & modérateurs', roles: ['admin'] },
 ];
 
 function Dashboard() {
@@ -86,13 +91,14 @@ function Dashboard() {
 }
 
 // Rendered inside /espace-membre once a logged-in user is confirmed as
-// admin (see Espace.jsx). Assumes an authenticated admin user — no auth
-// gate here, the caller already checked it.
+// admin or moderator (see Espace.jsx). Assumes an authenticated staff
+// user — no auth gate here, the caller already checked it.
 export function AdminShell() {
   const { user, logout } = useAuth();
-  const [tab, setTab] = useState('dashboard');
+  const tabs = TABS.filter((t) => t.roles.includes(user.role));
+  const [tab, setTab] = useState(tabs[0].key);
 
-  const current = TABS.find((t) => t.key === tab);
+  const current = tabs.find((t) => t.key === tab) || tabs[0];
   const today = new Date().toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
 
   return (
@@ -101,12 +107,14 @@ export function AdminShell() {
         <div style={{ padding: '0 24px 26px', borderBottom: '1px solid rgba(255,255,255,.1)', display: 'flex', alignItems: 'center', gap: 12 }}>
           <img src="/assets/logo.jpg" alt="SLUC" style={{ height: 40, width: 40, objectFit: 'cover', borderRadius: 4, background: '#fff' }} />
           <div style={{ lineHeight: 1.1 }}>
-            <div className="serif" style={{ fontSize: 16, fontWeight: 600 }}>Admin</div>
+            <div className="serif" style={{ fontSize: 16, fontWeight: 600 }}>
+              {user.role === 'admin' ? 'Admin' : 'Modérateur'}
+            </div>
             <div style={{ fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: '#8A8279' }}>Business Club</div>
           </div>
         </div>
         <nav style={{ padding: '20px 14px', display: 'flex', flexDirection: 'column', gap: 4, flex: 1 }}>
-          {TABS.map((t) => (
+          {tabs.map((t) => (
             <button key={t.key} className={`admin-nav-btn${tab === t.key ? ' active' : ''}`} onClick={() => setTab(t.key)}>
               {t.icon} {t.label}
             </button>
@@ -138,6 +146,7 @@ export function AdminShell() {
           {tab === 'inscriptions' && <InscriptionsTab />}
           {tab === 'categories' && <CategoriesTab />}
           {tab === 'contenu' && <ContenuTab />}
+          {tab === 'utilisateurs' && <UsersTab />}
         </div>
       </div>
     </div>

web/src/pages/Espace.jsx

@@ -332,15 +332,15 @@ function Portal() {
   );
 }
 
-// Single login entry point for both members and admins. Once authenticated,
-// the content shown depends on the account's role — the URL and the login
-// form never differ.
+// Single login entry point for members, admins and moderators. Once
+// authenticated, the content shown depends on the account's role — the
+// URL and the login form never differ.
 export default function Espace() {
   const { user, loading } = useAuth();
 
   if (loading) return <main style={{ minHeight: '60vh' }} />;
   if (!user) return <main><LoginSection /></main>;
   if (user.mustChangePassword) return <main><ForcedPasswordChange /></main>;
-  if (user.role === 'admin') return <AdminShell />;
+  if (user.role === 'admin' || user.role === 'moderator') return <AdminShell />;
   return <main><Portal /></main>;
 }