fix: VITE_API_URL fallback to include /api suffix

Secret was missing /api — frontend called /auth/session instead of
/api/auth/session, Apache SPA fallback returned index.html instead
of proxying to Express backend.

.claude/settings.json

@@ -0,0 +1,19 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm *)",
+      "Bash(git *)",
+      "Bash(pm2 *)",
+      "Bash(curl *)",
+      "Bash(ls *)",
+      "Bash(cat *)",
+      "Bash(grep *)",
+      "Bash(mkdir *)",
+      "Bash(cp *)",
+      "Bash(mv *)",
+      "Bash(node *)",
+      "Bash(npx *)",
+      "Write(*)"
+    ]
+  }
+}

.gitea/workflows/deploy.yml

@@ -32,15 +32,16 @@ jobs:
       - name: Restart pm2
         if: github.event_name == 'push' && github.ref == 'refs/heads/main'
         run: |
-          pm2 restart originsdigital-backend || pm2 start /var/www/originsdigital/backend/dist/index.js --name originsdigital-backend
-          pm2 save
+          su - tetardtek-brain -c 'pm2 reload originsdigital-backend --update-env'
 
       # ── Frontend ─────────────────────────────────────────────────────────────
       - name: Install & build frontend
         working-directory: frontend
         env:
-          VITE_API_URL: ${{ secrets.VITE_API_URL }}
+          VITE_API_URL: ${{ secrets.VITE_API_URL || 'https://origins.tetardtek.com/api' }}
           VITE_SUPEROAUTH_URL: ${{ secrets.VITE_SUPEROAUTH_URL }}
+          VITE_OAUTH_URL: ${{ secrets.VITE_SUPEROAUTH_URL }}
+          VITE_OAUTH_CLIENT_ID: origins
         run: |
           npm ci
           npm run build

backend/src/middleware/admin.middleware.ts

@@ -1,8 +1,8 @@
 import { Response, NextFunction } from "express";
 import { AppDataSource } from "../config/data-source";
 import { User } from "../entities/User";
-import { UserRole } from "../entities/UserRole";
 import { AuthenticatedRequest } from "./auth.middleware";
+import logger from "../utils/logger";
 
 /**
  * Middleware requireAdmin — s'exécute APRÈS requireAuth.
@@ -18,6 +18,7 @@ export const requireAdmin = async (
   try {
     const localUser = await AppDataSource.getRepository(User).findOne({
       where: { superOAuthId: req.user.id },
+      relations: { userRoles: { role: true } },
     });
 
     if (!localUser) {
@@ -25,12 +26,7 @@ export const requireAdmin = async (
       return;
     }
 
-    const userRoles = await AppDataSource.getRepository(UserRole).find({
-      where: { userId: localUser.id },
-      relations: ["role"],
-    });
-
-    const slugs = userRoles.map((ur) => ur.role.slug);
+    const slugs = localUser.userRoles.map((ur) => ur.role.slug);
     const isAdmin = slugs.includes("admin") || slugs.includes("super_admin");
 
     if (!isAdmin) {
@@ -39,7 +35,8 @@ export const requireAdmin = async (
     }
 
     next();
-  } catch {
+  } catch (err) {
+    logger.error("requireAdmin — DB error", { err });
     res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
   }
 };

backend/src/middleware/auth.middleware.ts

@@ -64,6 +64,11 @@ export const requireAuth = async (
       return;
     }
 
+    if (!data.data.user.isActive) {
+      res.status(401).json({ success: false, error: "ACCOUNT_DISABLED", message: "Account is disabled" });
+      return;
+    }
+
     (req as AuthenticatedRequest).user = data.data.user;
     next();
   } catch (err) {

backend/src/routes/admin.routes.ts

@@ -1,6 +1,23 @@
 import { Router, Request, Response } from "express";
 import path from "path";
 import fs from "fs";
+
+/**
+ * Vérifie les magic bytes d'un fichier vidéo déjà écrit sur disque.
+ * MP4  : bytes 4-7 = 'ftyp' (0x66 0x74 0x79 0x70)
+ * WebM : bytes 0-3 = 0x1A 0x45 0xDF 0xA3
+ */
+const isValidVideoMagicBytes = (filePath: string): boolean => {
+  const fd = fs.openSync(filePath, "r");
+  const buf = Buffer.alloc(12);
+  fs.readSync(fd, buf, 0, 12, 0);
+  fs.closeSync(fd);
+
+  const isWebM = buf[0] === 0x1a && buf[1] === 0x45 && buf[2] === 0xdf && buf[3] === 0xa3;
+  const isMP4 = buf[4] === 0x66 && buf[5] === 0x74 && buf[6] === 0x79 && buf[7] === 0x70;
+
+  return isMP4 || isWebM;
+};
 import multer, { FileFilterCallback } from "multer";
 import { AppDataSource } from "../config/data-source";
 import { Video } from "../entities/Video";
@@ -71,6 +88,13 @@ router.post(
       res.status(400).json({ success: false, error: "NO_FILE" });
       return;
     }
+
+    if (!isValidVideoMagicBytes(req.file.path)) {
+      fs.unlinkSync(req.file.path);
+      res.status(415).json({ success: false, error: "INVALID_FILE_CONTENT", message: "File content does not match a valid video format" });
+      return;
+    }
+
     res.status(201).json({
       success: true,
       data: { storageKey: req.file.filename, storageType: "local" },
@@ -99,7 +123,7 @@ router.get("/videos", async (req: Request, res: Response): Promise<void> => {
       skip: (rawPage - 1) * rawLimit,
       take: rawLimit,
     });
-    res.json({ success: true, data: videos, total, page: rawPage, limit: rawLimit });
+    res.json({ success: true, data: { videos }, total, page: rawPage, limit: rawLimit });
   } catch (err) {
     logger.error("GET /admin/videos — failed to list videos", { err });
     res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
@@ -262,13 +286,43 @@ router.get("/users", async (req: Request, res: Response): Promise<void> => {
       })(),
     }));
 
-    res.json({ success: true, data, total, page: rawPage, limit: rawLimit });
+    res.json({ success: true, data: { users: data }, total, page: rawPage, limit: rawLimit });
   } catch (err) {
     logger.error("GET /admin/users — failed to list users", { err });
     res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
   }
 });
 
+/**
+ * PATCH /api/admin/users/:id
+ * Met à jour isActive (ban / unban) d'un utilisateur.
+ */
+router.patch("/users/:id", async (req: Request, res: Response): Promise<void> => {
+  const { isActive } = req.body as { isActive?: boolean };
+
+  if (typeof isActive !== "boolean") {
+    res.status(400).json({ success: false, error: "INVALID_BODY" });
+    return;
+  }
+
+  try {
+    const repo = AppDataSource.getRepository(User);
+    const user = await repo.findOne({ where: { id: req.params.id } });
+
+    if (!user) {
+      res.status(404).json({ success: false, error: "NOT_FOUND" });
+      return;
+    }
+
+    user.isActive = isActive;
+    await repo.save(user);
+    res.json({ success: true, data: { userId: user.id, isActive: user.isActive } });
+  } catch (err) {
+    logger.error("PATCH /admin/users/:id — failed to update user", { err, id: req.params.id });
+    res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
+  }
+});
+
 /**
  * PATCH /api/admin/users/:id/roles
  * Assigne des rôles à un utilisateur (remplace les rôles existants).
@@ -332,6 +386,28 @@ router.patch("/users/:id/roles", async (req: Request, res: Response): Promise<vo
   }
 });
 
+// ---------------------------------------------------------------------------
+// STATS (super_admin)
+// ---------------------------------------------------------------------------
+
+/**
+ * GET /api/admin/stats
+ * Métriques globales de la plateforme.
+ */
+router.get("/stats", async (_req: Request, res: Response): Promise<void> => {
+  try {
+    const [totalUsers, totalVideos, activeSubscriptions] = await Promise.all([
+      AppDataSource.getRepository(User).count(),
+      AppDataSource.getRepository(Video).count({ where: { isPublished: true } }),
+      AppDataSource.getRepository(UserSubscription).count({ where: { status: "active" } }),
+    ]);
+    res.json({ success: true, data: { totalUsers, totalVideos, activeSubscriptions } });
+  } catch (err) {
+    logger.error("GET /admin/stats — failed", { err });
+    res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
+  }
+});
+
 // ---------------------------------------------------------------------------
 // SUBSCRIPTION PLANS
 // ---------------------------------------------------------------------------

backend/src/routes/auth.routes.ts

@@ -92,7 +92,7 @@ router.post("/login", async (req: Request, res: Response): Promise<void> => {
  * le valide, puis le pose en httpOnly cookie.
  */
 router.post("/session", async (req: Request, res: Response): Promise<void> => {
-  const { token } = req.body as { token?: string };
+  const { token, refreshToken } = req.body as { token?: string; refreshToken?: string };
 
   if (!token) {
     res.status(400).json({ success: false, error: "MISSING_TOKEN" });
@@ -126,6 +126,9 @@ router.post("/session", async (req: Request, res: Response): Promise<void> => {
     await upsertUser(data.data.user as { id: string; email: string | null; nickname: string });
 
     res.cookie(COOKIE_NAME, token, COOKIE_OPTIONS);
+    if (refreshToken) {
+      res.cookie(REFRESH_COOKIE_NAME, refreshToken, REFRESH_COOKIE_OPTIONS);
+    }
     res.json({ success: true, data: { user: data.data.user } });
   } catch (err) {
     logger.error("POST /auth/session — auth service unavailable", { err });
@@ -152,7 +155,7 @@ router.post("/refresh", async (req: Request, res: Response): Promise<void> => {
   }
 
   try {
-    const response = await fetch(`${superOAuthUrl}/api/v1/auth/token/refresh`, {
+    const response = await fetch(`${superOAuthUrl}/api/v1/auth/refresh`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ refreshToken }),
@@ -160,22 +163,22 @@ router.post("/refresh", async (req: Request, res: Response): Promise<void> => {
 
     const data = await response.json() as {
       success: boolean;
-      data?: { tokens: { accessToken: string; refreshToken?: string }; user?: { id: string; email: string | null; nickname: string } };
+      data?: { accessToken: string; refreshToken?: string };
       error?: string;
     };
 
-    if (!response.ok || !data.data?.tokens?.accessToken) {
+    if (!response.ok || !data.data?.accessToken) {
       res.clearCookie(COOKIE_NAME);
       res.clearCookie(REFRESH_COOKIE_NAME);
       res.status(401).json({ success: false, error: "REFRESH_FAILED" });
       return;
     }
 
-    res.cookie(COOKIE_NAME, data.data.tokens.accessToken, COOKIE_OPTIONS);
-    if (data.data.tokens.refreshToken) {
-      res.cookie(REFRESH_COOKIE_NAME, data.data.tokens.refreshToken, REFRESH_COOKIE_OPTIONS);
+    res.cookie(COOKIE_NAME, data.data.accessToken, COOKIE_OPTIONS);
+    if (data.data.refreshToken) {
+      res.cookie(REFRESH_COOKIE_NAME, data.data.refreshToken, REFRESH_COOKIE_OPTIONS);
     }
-    res.json({ success: true, data: { user: data.data.user ?? null } });
+    res.json({ success: true });
   } catch (err) {
     logger.error("POST /auth/refresh — auth service unavailable", { err });
     res.status(500).json({ success: false, error: "AUTH_SERVICE_UNAVAILABLE" });

backend/src/routes/stream.routes.ts

@@ -5,6 +5,7 @@ import { AppDataSource } from "../config/data-source";
 import { Video } from "../entities/Video";
 import { User } from "../entities/User";
 import { UserSubscription } from "../entities/UserSubscription";
+import logger from "../utils/logger";
 
 const router = Router();
 
@@ -41,7 +42,8 @@ async function getUserLevel(token: string | undefined): Promise<number> {
     });
 
     return sub?.plan.level ?? 0;
-  } catch {
+  } catch (err) {
+    logger.warn("getUserLevel — auth/DB error", { err });
     return 0;
   }
 }
@@ -128,7 +130,8 @@ router.get("/:key(*)", async (req: Request, res: Response): Promise<void> => {
       });
       fs.createReadStream(resolved).pipe(res);
     }
-  } catch {
+  } catch (err) {
+    logger.error("GET /stream/:key — unexpected error", { err });
     res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
   }
 });

backend/src/routes/user.routes.ts

@@ -3,6 +3,7 @@ import { AppDataSource } from "../config/data-source";
 import { User } from "../entities/User";
 import { UserSubscription } from "../entities/UserSubscription";
 import { requireAuth, AuthenticatedRequest } from "../middleware/auth.middleware";
+import logger from "../utils/logger";
 
 const router = Router();
 
@@ -27,6 +28,7 @@ async function getActiveSub(userId: string) {
 router.get("/me/profile", requireAuth, async (req: Request, res: Response): Promise<void> => {
   const { user } = req as AuthenticatedRequest;
 
+  try {
     const localUser = await AppDataSource.getRepository(User).findOne({
       where: { superOAuthId: user.id },
       relations: ["userRoles", "userRoles.role"],
@@ -66,6 +68,10 @@ router.get("/me/profile", requireAuth, async (req: Request, res: Response): Prom
         createdAt: localUser.createdAt.toISOString(),
       },
     });
+  } catch (err) {
+    logger.error("GET /users/me/profile — DB error", { err });
+    res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
+  }
 });
 
 /**
@@ -95,12 +101,13 @@ router.patch("/me", requireAuth, async (req: Request, res: Response): Promise<vo
       if (!["http:", "https:"].includes(parsed.protocol)) {
         throw new Error("invalid protocol");
       }
-    } catch {
+    } catch (_err) {
       res.status(400).json({ success: false, error: "INVALID_AVATAR", message: "avatar must be a valid http/https URL or null" });
       return;
     }
   }
 
+  try {
     const userRepo = AppDataSource.getRepository(User);
     const localUser = await userRepo.findOne({ where: { superOAuthId: user.id } });
 
@@ -122,6 +129,10 @@ router.patch("/me", requireAuth, async (req: Request, res: Response): Promise<vo
         avatar: localUser.avatar,
       },
     });
+  } catch (err) {
+    logger.error("PATCH /users/me — DB error", { err });
+    res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
+  }
 });
 
 export default router;

backend/src/routes/video.routes.ts

@@ -35,19 +35,26 @@ router.get("/", async (req: Request, res: Response): Promise<void> => {
   try {
     const user = (req as AuthenticatedRequest).user as AuthenticatedUser | undefined;
     const userLevel = user ? await getUserPlanLevel(user.id) : 0;
+    const q = typeof req.query.q === "string" ? req.query.q.trim() : "";
 
-    const videos = await AppDataSource.getRepository(Video).find({
-      where: { isPublished: true },
-      order: { publishedAt: "DESC" },
-      select: ["id", "title", "description", "thumbnailUrl", "duration",
-               "storageType", "storageKey", "requiredLevel", "publishedAt"],
-    });
+    const qb = AppDataSource.getRepository(Video)
+      .createQueryBuilder("v")
+      .where("v.isPublished = :pub", { pub: true })
+      .select([
+        "v.id", "v.title", "v.description", "v.thumbnailUrl", "v.duration",
+        "v.storageType", "v.storageKey", "v.requiredLevel", "v.publishedAt",
+      ])
+      .orderBy("v.publishedAt", "DESC");
+
+    if (q) {
+      qb.andWhere("(v.title LIKE :q OR v.description LIKE :q)", { q: `%${q}%` });
+    }
+
+    const videos = await qb.getMany();
 
-    // Injequer un flag `locked` côté client pour les vidéos hors niveau
     const result = videos.map((v) => ({
       ...v,
       locked: v.requiredLevel > userLevel,
-      // Ne pas exposer storageKey si la vidéo est verrouillée
       storageKey: v.requiredLevel > userLevel ? null : v.storageKey,
     }));
 

docs/vision-b2b.md

@@ -0,0 +1,80 @@
+# OriginsDigital — Vision B2B
+
+> Sprint 3 — Step 1 output
+> Date : 2026-03-17
+
+---
+
+## Segment cible
+
+**Studios indépendants et créateurs professionnels**
+
+- Studios indé : 1-10 personnes, besoin d'une vitrine pro sans ressources design
+- Créateurs pro : streamers, YouTubers, artistes digitaux qui monétisent leur audience
+- Critère d'exclusion V1 : pas de grandes agences (cycle vente trop long), pas de B2C pur
+
+---
+
+## White-label — Ce qui est personnalisable
+
+| Élément | Personnalisable | Notes |
+|---------|----------------|-------|
+| Logo | ✅ | Upload SVG/PNG, remplacement complet |
+| Couleurs | ✅ | Palette primaire + secondaire via config |
+| Domaine | ✅ | CNAME custom (studio.client.com) |
+| Emails transactionnels | ✅ | Templates brandés (sender name + domaine) |
+| Favicon | ✅ | |
+| Nom de la plateforme | ✅ | Affiché dans les headers + emails |
+| Code source | ❌ | Pas d'accès au code — SaaS uniquement |
+
+Isolation tenant complète via **SuperOAuth Tier 3** (per-tenant providers, déjà en prod ✅).
+
+---
+
+## Identité visuelle cible
+
+**3 mots** : Sobre. Précis. Autoritaire.
+
+Références : Linear, Vercel, Pika.art
+
+- Socle : Void Dark conservé
+- Accent : or inchangé
+- Typographie : ajout d'une typo display (Geist / Cal Sans) pour les H1
+- Pas de gradients agressifs — micro-détails subtils (bordures fines, shadows légères)
+- Motion : transitions rapides (150ms), pas d'animations décoratives
+
+---
+
+## Pricing model B2B
+
+**Abonnement mensuel par tier** — pas de per-seat, pas de commission en V1
+
+| Tier | Prix/mois | Inclus |
+|------|-----------|--------|
+| Starter | 29€ | 1 projet, domaine custom, white-label basique |
+| Studio | 99€ | 5 projets, analytics, intégration SuperOAuth |
+| Pro | 249€ | Projets illimités, API access, support prioritaire |
+| Enterprise | Sur devis | SLA, déploiement dédié, onboarding |
+
+**Pourquoi abonnement et pas per-seat ?**
+Cible studios indé = équipes petites → per-seat pénalise la croissance et complexifie la facturation.
+Commission découragerait les cas d'usage à fort volume. Abonnement = prévisibilité pour le client et pour nous.
+
+---
+
+## Différenciateur principal
+
+**SuperOAuth Tier 3 intégré nativement** = auth multi-tenant per-tenant providers, en standard.
+
+Aucun concurrent direct dans la cible (studios indé / créateurs pro) ne propose ça en standard.
+C'est notre moat technique visible dès l'onboarding.
+
+---
+
+## Brief refonte visuelle → Step 2
+
+- Palette : fond `#0a0a0a`, surface `#111`, accent `#c9a84c` (or mat)
+- Typo display : Cal Sans ou Geist — pour H1 uniquement
+- Composants prioritaires : hero landing, pricing card, CTA button, navbar avec login OAuth
+- Mobile-first, dark mode natif (pas de toggle — dark only en V1)
+- Densité : élevée — pas d'espaces vides décoratifs, chaque pixel justifié

frontend/.env.example

@@ -2,3 +2,7 @@
 # Le flow : /api/v1/auth/oauth/:provider?redirectUrl=<callback_url>
 # Valeur : voir brain/MYSECRETS section originsdigital
 VITE_SUPEROAUTH_URL=
+
+# SuperOAuth PKCE (Step 3) — flow authorization_code avec PKCE
+VITE_OAUTH_URL=https://oauth.tetardtek.com
+VITE_OAUTH_CLIENT_ID=originsdigital

frontend/index.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>OriginsDigital</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

frontend/src/App.tsx

@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
 import Layout from './components/layout/Layout';
 import RequireAuth from './components/RequireAuth';
+import LandingPage from './pages/LandingPage';
 import HomePage from './pages/HomePage';
 import LoginPage from './pages/LoginPage';
 import CallbackPage from './pages/CallbackPage';
@@ -12,26 +12,14 @@ import PlaylistPage from './pages/PlaylistPage';
 import AdminPage from './pages/AdminPage';
 import ProfilePage from './pages/ProfilePage';
 
-type Theme = 'dark' | 'light';
-
 function App() {
-  const [theme, setTheme] = useState<Theme>(() => {
-    return (localStorage.getItem('od-theme') as Theme) ?? 'dark';
-  });
-
-  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme);
-    localStorage.setItem('od-theme', theme);
-  }, [theme]);
-
-  const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
-
   return (
     <AuthProvider>
       <BrowserRouter>
         <Routes>
-          <Route element={<Layout theme={theme} onToggleTheme={toggleTheme} />}>
-            <Route path="/" element={<HomePage />} />
+          <Route element={<Layout />}>
+            <Route path="/" element={<LandingPage />} />
+            <Route path="/app" element={<HomePage />} />
             <Route path="/login" element={<LoginPage />} />
             <Route path="/callback" element={<CallbackPage />} />
             <Route path="/video/:id" element={<VideoPage />} />

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,31 @@
+import { Component, type ReactNode } from 'react';
+
+interface Props { children: ReactNode; }
+interface State { hasError: boolean; }
+
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false };
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex min-h-screen items-center justify-center bg-od-bg">
+          <div className="rounded border border-od-crit/40 bg-od-surface p-8 text-center">
+            <p className="font-mono text-sm text-od-crit">Une erreur inattendue s'est produite.</p>
+            <button
+              className="mt-4 rounded border border-od-border px-4 py-2 text-xs text-od-muted hover:border-od-accent/40"
+              onClick={() => window.location.reload()}
+            >
+              Recharger
+            </button>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

frontend/src/components/UserBadge.tsx

@@ -9,6 +9,17 @@ export default function UserBadge({ user }: UserBadgeProps) {
 
   return (
     <span className="flex items-center gap-2">
+      {user.avatar ? (
+        <img
+          src={user.avatar}
+          alt={user.nickname}
+          className="h-6 w-6 rounded-full object-cover border border-od-border"
+        />
+      ) : (
+        <span className="flex h-6 w-6 items-center justify-center rounded-full bg-od-surface border border-od-border font-mono text-[10px] text-od-accent">
+          {user.nickname[0].toUpperCase()}
+        </span>
+      )}
       <span className="font-mono text-xs text-od-accent">{user.nickname}</span>
       <span className="font-mono text-[10px] px-1.5 py-0.5 rounded border border-od-border text-od-muted">
         {planLabel}

frontend/src/components/VideoPlayer.tsx

@@ -69,7 +69,7 @@ function NativePlayer({ url }: { url: string }) {
         hls = new Hls();
         hls.loadSource(url);
         hls.attachMedia(video);
-      });
+      }).catch(() => { /* HLS non disponible — dégradation silencieuse */ });
     }
 
     return () => { hls?.destroy(); };

frontend/src/components/auth/LoginButton.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { buildAuthUrl, saveVerifier } from '../../lib/oauth';
+
+interface LoginButtonProps {
+  className?: string;
+  provider?: string;
+}
+
+export default function LoginButton({ className, provider = 'discord' }: LoginButtonProps) {
+  const [loading, setLoading] = useState(false);
+
+  async function handleClick() {
+    if (loading) return;
+    setLoading(true);
+    try {
+      const redirectUri = `${window.location.origin}/callback`;
+      const { url, verifier } = await buildAuthUrl(redirectUri, provider);
+      saveVerifier(verifier);
+      window.location.href = url;
+    } catch {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={loading}
+      className={[
+        'rounded border border-[#c9a84c] px-4 py-2 font-mono text-xs text-[#c9a84c]',
+        'transition-all duration-150',
+        'hover:bg-[#c9a84c] hover:text-od-bg',
+        'disabled:opacity-40 disabled:cursor-not-allowed',
+        className ?? '',
+      ].join(' ')}
+    >
+      {loading ? '…' : 'Se connecter avec SuperOAuth'}
+    </button>
+  );
+}

frontend/src/components/auth/UserMenu.tsx

@@ -0,0 +1,43 @@
+import { clearAccessToken } from '../../lib/oauth';
+import { useAuthContext } from '../../context/AuthContext';
+import LoginButton from './LoginButton';
+
+interface UserMenuProps {
+  /** Optionnel : si fourni, prend le dessus sur le nickname de l'utilisateur */
+  displayName?: string;
+}
+
+export default function UserMenu({ displayName }: UserMenuProps) {
+  const { user } = useAuthContext();
+
+  function handleLogout() {
+    clearAccessToken();
+    window.location.href = '/';
+  }
+
+  if (!user) {
+    return <LoginButton />;
+  }
+
+  const name = displayName ?? user.nickname ?? 'Mon compte';
+
+  return (
+    <div className="flex items-center gap-3">
+      {/* Avatar placeholder */}
+      <span className="flex h-7 w-7 items-center justify-center rounded-full bg-od-surface border border-[#c9a84c] font-mono text-[10px] text-[#c9a84c]">
+        {name !== 'Mon compte' ? name[0].toUpperCase() : '●'}
+      </span>
+
+      <span className="font-mono text-xs text-[#c9a84c]">
+        {name}
+      </span>
+
+      <button
+        onClick={handleLogout}
+        className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors duration-150"
+      >
+        Se déconnecter
+      </button>
+    </div>
+  );
+}

frontend/src/components/layout/Footer.tsx

@@ -0,0 +1,21 @@
+export default function Footer() {
+  return (
+    <footer className="border-t border-od-border bg-od-bg">
+      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-6">
+        <div className="flex items-center gap-2">
+          <span className="font-mono text-xs font-bold tracking-[0.2em] text-od-accent">OD</span>
+          <span className="text-xs text-od-muted">OriginsDigital</span>
+        </div>
+        <p className="font-mono text-2xs text-od-muted">
+          © {new Date().getFullYear()} OriginsDigital — Tous droits réservés
+        </p>
+        <div className="flex items-center gap-6">
+          <a href="mailto:contact@originsdigital.com" className="font-mono text-2xs text-od-muted hover:text-od-text transition-colors duration-150">
+            Contact
+          </a>
+          <span className="font-mono text-2xs text-od-muted">Powered by SuperOAuth</span>
+        </div>
+      </div>
+    </footer>
+  );
+}

frontend/src/components/layout/Header.tsx

@@ -5,13 +5,11 @@ import type { User } from '../../context/AuthContext';
 import UserBadge from '../UserBadge';
 
 interface HeaderProps {
-  theme: 'dark' | 'light';
-  onToggleTheme: () => void;
   user: User | null;
   onLogout: () => void;
 }
 
-export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderProps) {
+export default function Header({ user, onLogout }: HeaderProps) {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -33,67 +31,65 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP
   }
 
   return (
-    <header className="border-b border-od-border bg-od-surface">
-      <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
+    <header className="sticky top-0 z-40 border-b border-od-border bg-od-bg/90 backdrop-blur-sm">
+      <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-6">
 
         {/* Logo */}
-        <Link to="/" className="flex items-center gap-2 group">
-          <span className="font-mono text-xs font-bold text-od-accent tracking-widest group-hover:text-od-accent-dim transition-colors">
+        <Link to="/" className="flex items-center gap-2.5 group">
+          <span className="font-mono text-xs font-bold tracking-[0.2em] text-od-accent group-hover:text-od-accent-dim transition-colors duration-150">
             OD
           </span>
-          <span className="text-sm font-semibold text-od-text">
+          <span className="text-sm font-semibold text-od-text tracking-tight">
             OriginsDigital
           </span>
         </Link>
 
         {/* Navigation */}
-        <nav className="flex gap-6">
-          <Link to="/" className="text-sm text-od-muted hover:text-od-text transition-colors">
+        <nav className="flex items-center gap-8">
+          <Link to="/" className="text-sm text-od-muted hover:text-od-text transition-colors duration-150">
             Accueil
           </Link>
           {user && (
-            <Link to="/playlists" className="text-sm text-od-muted hover:text-od-text transition-colors">
+            <Link to="/playlists" className="text-sm text-od-muted hover:text-od-text transition-colors duration-150">
               Playlists
             </Link>
           )}
+          {!user && (
+            <Link to="/#pricing" className="text-sm text-od-muted hover:text-od-text transition-colors duration-150">
+              Tarifs
+            </Link>
+          )}
           {user?.roles?.some((r) => r === 'admin' || r === 'super_admin') && (
-            <Link to="/admin" className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors">
+            <Link to="/admin" className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors duration-150">
               admin
             </Link>
           )}
         </nav>
 
-        {/* Right — thème + auth */}
-        <div className="flex items-center gap-4">
-          <button
-            onClick={onToggleTheme}
-            aria-label="Changer le thème"
-            className="font-mono text-xs text-od-muted hover:text-od-text transition-colors"
-          >
-            {theme === 'dark' ? '◑' : '◐'}
-          </button>
-
+        {/* Right — auth */}
+        <div className="flex items-center gap-3">
           {user ? (
             <div className="relative" ref={dropdownRef}>
               <button
                 onClick={() => setOpen((o) => !o)}
-                className="flex items-center gap-1.5 hover:opacity-80 transition-opacity"
+                className="flex items-center gap-1.5 hover:opacity-80 transition-opacity duration-150"
               >
                 <UserBadge user={user} />
                 <span className="font-mono text-xs text-od-muted">▾</span>
               </button>
               {open && (
-                <div className="absolute right-0 top-full mt-1 w-36 rounded border border-od-border bg-od-surface shadow-lg z-50">
+                <div className="absolute right-0 top-full mt-1.5 w-40 rounded border border-od-border bg-od-surface shadow-xl z-50 animate-fade-in">
                   <Link
                     to="/profile"
                     onClick={() => setOpen(false)}
-                    className="block px-3 py-2 text-xs text-od-muted hover:text-od-text transition-colors"
+                    className="block px-4 py-2.5 text-xs text-od-muted hover:text-od-text transition-colors duration-150"
                   >
                     Profil
                   </Link>
+                  <div className="border-t border-od-border" />
                   <button
                     onClick={handleLogout}
-                    className="w-full text-left px-3 py-2 font-mono text-xs text-od-muted hover:text-od-crit transition-colors"
+                    className="w-full text-left px-4 py-2.5 font-mono text-xs text-od-muted hover:text-od-crit transition-colors duration-150"
                   >
                     Déconnexion
                   </button>
@@ -103,9 +99,9 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP
           ) : (
             <Link
               to="/login"
-              className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors"
+              className="rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-all duration-150"
             >
-              Connexion
+              Se connecter
             </Link>
           )}
         </div>

frontend/src/components/layout/Layout.tsx

@@ -1,26 +1,21 @@
 import { Outlet } from 'react-router-dom';
 import Header from './Header';
+import Footer from './Footer';
 import { useAuthContext } from '../../context/AuthContext';
 
-interface LayoutProps {
-  theme: 'dark' | 'light';
-  onToggleTheme: () => void;
-}
-
-export default function Layout({ theme, onToggleTheme }: LayoutProps) {
+export default function Layout() {
   const { user, loading, setUser } = useAuthContext();
 
   return (
-    <div className="min-h-screen bg-od-bg text-od-text">
+    <div className="min-h-screen bg-od-bg text-od-text flex flex-col">
       <Header
-        theme={theme}
-        onToggleTheme={onToggleTheme}
         user={loading ? null : user}
         onLogout={() => setUser(null)}
       />
-      <main className="mx-auto max-w-5xl px-4 py-8">
+      <main className="flex-1 mx-auto w-full max-w-6xl px-6 py-10">
         <Outlet />
       </main>
+      <Footer />
     </div>
   );
 }

frontend/src/context/AuthContext.tsx

@@ -5,6 +5,7 @@ export interface User {
   id: string;
   email: string | null;
   nickname: string;
+  avatar?: string | null;
   plan?: { slug: string; name: string; level: number } | null;
   subscriptionLevel?: number;
   roles: string[];
@@ -38,6 +39,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     return () => { cancelled = true; };
   }, []);
 
+  // Token expiré et refresh impossible → déconnexion silencieuse
+  useEffect(() => {
+    const handler = () => setUser(null);
+    window.addEventListener('auth:expired', handler);
+    return () => window.removeEventListener('auth:expired', handler);
+  }, []);
+
   return (
     <AuthContext.Provider value={{ user, loading, setUser }}>
       {children}

frontend/src/lib/api.ts

@@ -8,19 +8,39 @@ export class ApiError extends Error {
   }
 }
 
-export async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
-  const res = await fetch(`${BASE}${path}`, {
-    credentials: 'include', // transmet le cookie httpOnly automatiquement
+function buildInit(init?: RequestInit): RequestInit {
+  return {
+    credentials: 'include',
     ...init,
-    headers: {
-      'Content-Type': 'application/json',
-      ...init?.headers,
-    },
-  });
-
-  if (!res.ok) {
-    throw new ApiError(res.status, path);
+    headers: { 'Content-Type': 'application/json', ...init?.headers },
+  };
 }
 
+// Déduplique les appels refresh simultanés
+let refreshingPromise: Promise<boolean> | null = null;
+
+async function tryRefresh(): Promise<boolean> {
+  if (refreshingPromise) return refreshingPromise;
+  refreshingPromise = fetch(`${BASE}/auth/refresh`, { method: 'POST', credentials: 'include' })
+    .then((r) => r.ok)
+    .finally(() => { refreshingPromise = null; });
+  return refreshingPromise;
+}
+
+export async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, buildInit(init));
+
+  if (res.status === 401 && path !== '/auth/refresh') {
+    const refreshed = await tryRefresh();
+    if (refreshed) {
+      const retry = await fetch(`${BASE}${path}`, buildInit(init));
+      if (!retry.ok) throw new ApiError(retry.status, path);
+      return retry.json() as Promise<T>;
+    }
+    window.dispatchEvent(new Event('auth:expired'));
+    throw new ApiError(401, path);
+  }
+
+  if (!res.ok) throw new ApiError(res.status, path);
   return res.json() as Promise<T>;
 }

frontend/src/lib/oauth.ts

@@ -0,0 +1,119 @@
+// OAuth 2.0 PKCE client — SuperOAuth Tier 3 multi-tenant
+// Token stocké en sessionStorage (pas localStorage — sécurité, scope onglet)
+
+const OAUTH_URL     = import.meta.env.VITE_OAUTH_URL     || '';
+const OAUTH_CLIENT_ID = import.meta.env.VITE_OAUTH_CLIENT_ID || '';
+
+const SESSION_KEY_TOKEN    = 'od_access_token';
+const SESSION_KEY_VERIFIER = 'od_pkce_verifier';
+
+// --- PKCE helpers ---
+
+function base64UrlEncode(buffer: ArrayBuffer): string {
+  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '');
+}
+
+export function generateCodeVerifier(): string {
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  return base64UrlEncode(array.buffer);
+}
+
+export async function generateCodeChallenge(verifier: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data    = encoder.encode(verifier);
+  const digest  = await crypto.subtle.digest('SHA-256', data);
+  return base64UrlEncode(digest);
+}
+
+// --- Auth URL ---
+
+export async function buildAuthUrl(
+  redirectUri: string,
+  provider: string,
+  scope = 'openid profile email',
+  clientId  = OAUTH_CLIENT_ID,
+): Promise<{ url: string; verifier: string }> {
+  const verifier  = generateCodeVerifier();
+  const challenge = await generateCodeChallenge(verifier);
+  const state     = base64UrlEncode(crypto.getRandomValues(new Uint8Array(16)).buffer);
+
+  const params = new URLSearchParams({
+    response_type:         'code',
+    client_id:             clientId,
+    redirect_uri:          redirectUri,
+    scope,
+    state,
+    provider,
+    code_challenge:        challenge,
+    code_challenge_method: 'S256',
+  });
+
+  return {
+    url:      `${OAUTH_URL}/oauth/authorize?${params.toString()}`,
+    verifier,
+  };
+}
+
+// --- Token exchange ---
+
+export interface TokenResponse {
+  access_token: string;
+  refresh_token?: string;
+  token_type: string;
+  expires_in: number;
+  scope?: string;
+}
+
+export async function exchangeCode(
+  code: string,
+  verifier: string,
+  redirectUri: string,
+  clientId = OAUTH_CLIENT_ID,
+): Promise<TokenResponse> {
+  const response = await fetch(`${OAUTH_URL}/oauth/token`, {
+    method:  'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: new URLSearchParams({
+      grant_type:    'authorization_code',
+      client_id:     clientId,
+      code,
+      code_verifier: verifier,
+      redirect_uri:  redirectUri,
+    }).toString(),
+  });
+
+  if (!response.ok) {
+    const text = await response.text().catch(() => '');
+    throw new Error(`OAuth token exchange failed (${response.status}): ${text}`);
+  }
+
+  const data = await response.json() as TokenResponse;
+  if (!data.access_token) throw new Error('No access_token in OAuth response');
+
+  return data;
+}
+
+// --- Token accessors ---
+
+export function getAccessToken(): string | null {
+  return sessionStorage.getItem(SESSION_KEY_TOKEN);
+}
+
+export function clearAccessToken(): void {
+  sessionStorage.removeItem(SESSION_KEY_TOKEN);
+  sessionStorage.removeItem(SESSION_KEY_VERIFIER);
+}
+
+// --- PKCE verifier persistence (avant redirect) ---
+
+export function saveVerifier(verifier: string): void {
+  sessionStorage.setItem(SESSION_KEY_VERIFIER, verifier);
+}
+
+export function loadVerifier(): string | null {
+  return sessionStorage.getItem(SESSION_KEY_VERIFIER);
+}

frontend/src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./styles/index.css";
 import App from "./App";
+import ErrorBoundary from "./components/ErrorBoundary";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
+    <ErrorBoundary>
       <App />
+    </ErrorBoundary>
   </StrictMode>
 );

frontend/src/pages/AdminPage.tsx

@@ -41,21 +41,32 @@ interface AdminUser {
   } | null;
 }
 
+interface Stats {
+  totalUsers: number;
+  totalVideos: number;
+  activeSubscriptions: number;
+}
+
 // ── Tabs ─────────────────────────────────────────────────────────────────────
 
-type Tab = 'videos' | 'users' | 'plans';
+type Tab = 'videos' | 'users' | 'plans' | 'system';
 
 export default function AdminPage() {
   const { user, loading: authLoading } = useAuthContext();
+  const isSuperAdmin = user?.roles?.includes('super_admin') ?? false;
   const [tab, setTab] = useState<Tab>('videos');
 
   if (authLoading) return null;
   if (!user?.roles?.some((r) => r === 'admin' || r === 'super_admin')) return <Navigate to="/" replace />;
 
+  const tabs: Tab[] = isSuperAdmin
+    ? ['videos', 'users', 'plans', 'system']
+    : ['videos', 'users', 'plans'];
+
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-1 border-b border-od-border pb-4">
-        {(['videos', 'users', 'plans'] as Tab[]).map((t) => (
+        {tabs.map((t) => (
           <button
             key={t}
             onClick={() => setTab(t)}
@@ -71,8 +82,9 @@ export default function AdminPage() {
       </div>
 
       {tab === 'videos' && <VideosTab />}
-      {tab === 'users'  && <UsersTab />}
+      {tab === 'users'  && <UsersTab isSuperAdmin={isSuperAdmin} />}
       {tab === 'plans'  && <PlansTab />}
+      {tab === 'system' && isSuperAdmin && <SystemTab />}
     </div>
   );
 }
@@ -85,7 +97,8 @@ function VideosTab() {
   const [fetchError, setFetchError] = useState<string | null>(null);
   const [actionError, setActionError] = useState<string | null>(null);
   const [form, setForm] = useState({
-    title: '', storageType: 'youtube', storageKey: '',
+    title: '', description: '', thumbnailUrl: '',
+    storageType: 'youtube', storageKey: '',
     requiredLevel: 0, isPublished: false,
   });
   const [saving, setSaving] = useState(false);
@@ -94,7 +107,7 @@ function VideosTab() {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    apiFetch<{ success: boolean; data: { videos: Video[] } }>('/admin/videos')
+    apiFetch<{ success: boolean; data: { videos: Video[] } }>('/admin/videos?limit=100')
       .then((r) => setVideos(r.data.videos))
       .catch(() => setFetchError('Impossible de charger les vidéos.'))
       .finally(() => setLoading(false));
@@ -132,7 +145,7 @@ function VideosTab() {
         { method: 'POST', body: JSON.stringify(form) }
       );
       setVideos((v) => [r.data.video, ...v]);
-      setForm({ title: '', storageType: 'youtube', storageKey: '', requiredLevel: 0, isPublished: false });
+      setForm({ title: '', description: '', thumbnailUrl: '', storageType: 'youtube', storageKey: '', requiredLevel: 0, isPublished: false });
     } catch {
       setError('Erreur lors de la création.');
     }
@@ -166,7 +179,6 @@ function VideosTab() {
   return (
     <div className="flex flex-col gap-6">
 
-      {/* Formulaire création */}
       <form onSubmit={handleCreate} className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4">
         <p className="font-mono text-xs text-od-muted uppercase tracking-widest">Nouvelle vidéo</p>
 
@@ -178,6 +190,21 @@ function VideosTab() {
           className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
         />
 
+        <textarea
+          value={form.description}
+          onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+          placeholder="Description (optionnel)"
+          rows={2}
+          className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent resize-none"
+        />
+
+        <input
+          value={form.thumbnailUrl}
+          onChange={(e) => setForm((f) => ({ ...f, thumbnailUrl: e.target.value }))}
+          placeholder="URL thumbnail (optionnel)"
+          className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+        />
+
         <div className="flex gap-2">
           <select
             value={form.storageType}
@@ -219,8 +246,7 @@ function VideosTab() {
           <label className="flex items-center gap-2 text-sm text-od-muted">
             Niveau requis
             <input
-              type="number"
-              min={0}
+              type="number" min={0}
               value={form.requiredLevel}
               onChange={(e) => setForm((f) => ({ ...f, requiredLevel: parseInt(e.target.value) || 0 }))}
               className="w-16 rounded border border-od-border bg-od-bg px-2 py-1 text-sm text-od-text outline-none focus:border-od-accent"
@@ -246,7 +272,6 @@ function VideosTab() {
         </button>
       </form>
 
-      {/* Liste */}
       {loading ? (
         <div className="flex flex-col gap-2">
           {[...Array(3)].map((_, i) => <div key={i} className="h-12 rounded border border-od-border animate-pulse" />)}
@@ -289,7 +314,7 @@ function VideosTab() {
 
 // ── Users tab ────────────────────────────────────────────────────────────────
 
-function UsersTab() {
+function UsersTab({ isSuperAdmin }: { isSuperAdmin: boolean }) {
   const [users, setUsers] = useState<AdminUser[]>([]);
   const [plans, setPlans] = useState<Plan[]>([]);
   const [loading, setLoading] = useState(true);
@@ -299,10 +324,11 @@ function UsersTab() {
   const [selectedPlan, setSelectedPlan] = useState<Record<string, string>>({});
   const [assigningRole, setAssigningRole] = useState<string | null>(null);
   const [selectedRole, setSelectedRole] = useState<Record<string, string>>({});
+  const [togglingBan, setTogglingBan] = useState<string | null>(null);
 
   useEffect(() => {
     Promise.all([
-      apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users'),
+      apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users?limit=100'),
       apiFetch<{ success: boolean; data: { plans: Plan[] } }>('/admin/plans'),
     ])
       .then(([ur, pr]) => {
@@ -323,8 +349,9 @@ function UsersTab() {
         method: 'POST',
         body: JSON.stringify({ planId }),
       });
-      const r = await apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users');
+      const r = await apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users?limit=100');
       setUsers(r.data.users);
+      setSelectedPlan((s) => { const n = { ...s }; delete n[userId]; return n; });
     } catch {
       setActionError('Impossible d\'assigner le plan.');
     }
@@ -341,14 +368,30 @@ function UsersTab() {
         method: 'PATCH',
         body: JSON.stringify({ roles: [role] }),
       });
-      const r = await apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users');
+      const r = await apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users?limit=100');
       setUsers(r.data.users);
+      setSelectedRole((s) => { const n = { ...s }; delete n[userId]; return n; });
     } catch {
       setActionError('Impossible d\'assigner le rôle.');
     }
     setAssigningRole(null);
   }
 
+  async function toggleBan(u: AdminUser) {
+    setTogglingBan(u.id);
+    setActionError(null);
+    try {
+      await apiFetch(`/admin/users/${u.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ isActive: !u.isActive }),
+      });
+      setUsers((prev) => prev.map((x) => x.id === u.id ? { ...x, isActive: !u.isActive } : x));
+    } catch {
+      setActionError('Impossible de modifier le statut.');
+    }
+    setTogglingBan(null);
+  }
+
   if (loading) return (
     <div className="flex flex-col gap-2">
       {[...Array(3)].map((_, i) => <div key={i} className="h-20 rounded border border-od-border animate-pulse" />)}
@@ -357,14 +400,29 @@ function UsersTab() {
 
   if (error) return <p className="text-sm text-od-crit">{error}</p>;
 
+  // Rôles assignables selon le niveau du current user
+  const assignableRoles = isSuperAdmin
+    ? ['user', 'moderator', 'admin', 'super_admin']
+    : ['user', 'moderator'];
+
   return (
     <div className="flex flex-col gap-2">
       {actionError && <p className="text-xs text-od-crit">{actionError}</p>}
       {users.map((u) => (
-        <div key={u.id} className="flex flex-col gap-2 rounded border border-od-border bg-od-surface px-4 py-3">
+        <div
+          key={u.id}
+          className={`flex flex-col gap-2 rounded border bg-od-surface px-4 py-3 ${
+            u.isActive ? 'border-od-border' : 'border-od-crit/40 opacity-60'
+          }`}
+        >
           <div className="flex items-start justify-between gap-2">
             <div>
-              <p className="text-sm font-medium text-od-text">{u.nickname}</p>
+              <p className="text-sm font-medium text-od-text">
+                {u.nickname}
+                {!u.isActive && (
+                  <span className="ml-2 font-mono text-xs text-od-crit">banni</span>
+                )}
+              </p>
               <p className="font-mono text-xs text-od-muted">{u.email ?? '—'}</p>
             </div>
             <div className="flex flex-col items-end gap-1">
@@ -382,11 +440,11 @@ function UsersTab() {
             </div>
           </div>
 
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2">
             <select
               value={selectedPlan[u.id] ?? ''}
               onChange={(e) => setSelectedPlan((s) => ({ ...s, [u.id]: e.target.value }))}
-              className="flex-1 rounded border border-od-border bg-od-bg px-2 py-1 text-xs text-od-text outline-none focus:border-od-accent"
+              className="flex-1 min-w-0 rounded border border-od-border bg-od-bg px-2 py-1 text-xs text-od-text outline-none focus:border-od-accent"
             >
               <option value="">— Plan —</option>
               {plans.filter((p) => p.isActive).map((p) => (
@@ -406,9 +464,7 @@ function UsersTab() {
               className="rounded border border-od-border bg-od-bg px-2 py-1 text-xs text-od-text outline-none focus:border-od-accent"
             >
               <option value="">— Rôle —</option>
-              <option value="user">user</option>
-              <option value="admin">admin</option>
-              <option value="super_admin">super_admin</option>
+              {assignableRoles.map((r) => <option key={r} value={r}>{r}</option>)}
             </select>
             <button
               disabled={!selectedRole[u.id] || assigningRole === u.id}
@@ -417,6 +473,17 @@ function UsersTab() {
             >
               {assigningRole === u.id ? '…' : 'Rôle'}
             </button>
+            <button
+              disabled={togglingBan === u.id}
+              onClick={() => toggleBan(u)}
+              className={`rounded border px-3 py-1 font-mono text-xs transition-colors disabled:opacity-40 ${
+                u.isActive
+                  ? 'border-od-border text-od-muted hover:border-od-crit hover:text-od-crit'
+                  : 'border-od-crit text-od-crit hover:bg-od-crit hover:text-od-bg'
+              }`}
+            >
+              {togglingBan === u.id ? '…' : u.isActive ? 'Bannir' : 'Débannir'}
+            </button>
           </div>
         </div>
       ))}
@@ -559,3 +626,51 @@ function PlansTab() {
     </div>
   );
 }
+
+// ── System tab (super_admin only) ─────────────────────────────────────────────
+
+function SystemTab() {
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    apiFetch<{ success: boolean; data: Stats }>('/admin/stats')
+      .then((r) => setStats(r.data))
+      .catch(() => setError(true))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <p className="font-mono text-xs text-od-muted uppercase tracking-widest">Métriques plateforme</p>
+
+      {loading && (
+        <div className="grid gap-4 sm:grid-cols-3">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="h-20 rounded border border-od-border animate-pulse" />
+          ))}
+        </div>
+      )}
+
+      {error && <p className="text-sm text-od-crit">Impossible de charger les stats.</p>}
+
+      {stats && (
+        <div className="grid gap-4 sm:grid-cols-3">
+          <StatCard label="Utilisateurs" value={stats.totalUsers} />
+          <StatCard label="Vidéos publiées" value={stats.totalVideos} />
+          <StatCard label="Abonnements actifs" value={stats.activeSubscriptions} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatCard({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="flex flex-col gap-1 rounded border border-od-border bg-od-surface p-4">
+      <p className="font-mono text-xs text-od-muted uppercase tracking-widest">{label}</p>
+      <p className="text-2xl font-semibold text-od-accent">{value}</p>
+    </div>
+  );
+}

frontend/src/pages/CallbackPage.tsx

@@ -1,30 +1,139 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { apiFetch } from '../lib/api';
+import { exchangeCode, loadVerifier } from '../lib/oauth';
+import { useAuthContext } from '../context/AuthContext';
+import type { User } from '../context/AuthContext';
+
+interface SessionResponse {
+  success: boolean;
+  data: { user: User };
+}
+
+type PendingState =
+  | { kind: 'verification_pending'; email: string }
+  | { kind: 'merge_pending'; email: string; provider: string };
 
 export default function CallbackPage() {
   const navigate = useNavigate();
+  const { setUser } = useAuthContext();
   const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState<PendingState | null>(null);
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
-    const token = params.get('token');
 
-    // Pas de token dans l'URL → retour silencieux
-    if (!token) {
-      navigate('/', { replace: true });
+    // --- Erreur OAuth explicite ---
+    const oauthError = params.get('error');
+    if (oauthError) {
+      const desc = params.get('error_description') ?? oauthError;
+      setError(`Erreur OAuth : ${desc}`);
       return;
     }
 
-    // Envoie le token au backend → backend valide + pose le cookie httpOnly
-    apiFetch<void>('/auth/session', {
+    // --- Pending states (verification / merge) ---
+    const status = params.get('status');
+    if (status === 'verification_pending') {
+      setPending({ kind: 'verification_pending', email: params.get('email') ?? '' });
+      return;
+    }
+    if (status === 'merge_pending') {
+      setPending({
+        kind: 'merge_pending',
+        email: params.get('email') ?? '',
+        provider: params.get('provider') ?? '',
+      });
+      return;
+    }
+
+    // --- Flow PKCE : ?code= présent ---
+    const code = params.get('code');
+    if (code) {
+      const verifier = loadVerifier();
+      if (!verifier) {
+        setError('Session PKCE expirée. Recommence la connexion.');
+        return;
+      }
+      const redirectUri = `${window.location.origin}/callback`;
+
+      exchangeCode(code, verifier, redirectUri)
+        .then((tokens) => {
+          return apiFetch<SessionResponse>('/auth/session', {
+            method: 'POST',
+            body: JSON.stringify({
+              token: tokens.access_token,
+              refreshToken: tokens.refresh_token,
+            }),
+          });
+        })
+        .then((res) => {
+          setUser(res.data.user);
+          navigate('/', { replace: true });
+        })
+        .catch(() => setError("Échec de l'échange de code OAuth. Réessaie."));
+      return;
+    }
+
+    // --- Flow session (token JWT en query param) ---
+    const token = params.get('token');
+    if (token) {
+      apiFetch<SessionResponse>('/auth/session', {
         method: 'POST',
         body: JSON.stringify({ token }),
       })
-      .then(() => navigate('/', { replace: true }))
+        .then((res) => {
+          setUser(res.data.user);
+          navigate('/', { replace: true });
+        })
         .catch(() => setError("Échec de l'authentification. Réessaie."));
-  }, [navigate]);
+      return;
+    }
 
+    // Aucun paramètre reconnu → retour accueil
+    navigate('/', { replace: true });
+  }, [navigate, setUser]);
+
+  // --- Pending UI ---
+  if (pending) {
+    return (
+      <div className="flex flex-col items-center gap-6 pt-20 max-w-md mx-auto text-center">
+        {pending.kind === 'verification_pending' ? (
+          <>
+            <div className="text-4xl">📧</div>
+            <h2 className="text-lg font-semibold text-od-text">Vérifie ton email</h2>
+            <p className="text-sm text-od-muted">
+              Un email de vérification a été envoyé à{' '}
+              <span className="text-od-text font-mono">{pending.email}</span>.
+              <br />
+              Clique sur le lien pour activer ton compte.
+            </p>
+          </>
+        ) : (
+          <>
+            <div className="text-4xl">🔗</div>
+            <h2 className="text-lg font-semibold text-od-text">Fusion de compte</h2>
+            <p className="text-sm text-od-muted">
+              Un compte existe déjà avec l'email{' '}
+              <span className="text-od-text font-mono">{pending.email}</span>.
+              <br />
+              Un email a été envoyé pour fusionner ton compte{' '}
+              <span className="text-od-accent capitalize">{pending.provider}</span>.
+              <br />
+              Clique sur le lien dans l'email pour confirmer.
+            </p>
+          </>
+        )}
+        <a
+          href="/login"
+          className="font-mono text-xs text-od-muted hover:text-od-text transition-colors"
+        >
+          ← Retour à la connexion
+        </a>
+      </div>
+    );
+  }
+
+  // --- Error UI ---
   if (error) {
     return (
       <div className="flex flex-col items-center gap-4 pt-20">

frontend/src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { apiFetch } from '../lib/api';
 
@@ -19,16 +19,26 @@ interface VideosResponse {
 export default function HomePage() {
   const [videos, setVideos] = useState<Video[]>([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [query, setQuery] = useState('');
 
   useEffect(() => {
     apiFetch<VideosResponse>('/videos')
       .then((res) => setVideos(res.data.videos))
-      .catch(() => setVideos([]))
+      .catch(() => setError(true))
       .finally(() => setLoading(false));
   }, []);
 
-  const free    = videos.filter((v) => !v.locked);
-  const premium = videos.filter((v) => v.locked);
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return videos;
+    return videos.filter(
+      (v) => v.title.toLowerCase().includes(q) || v.description?.toLowerCase().includes(q),
+    );
+  }, [videos, query]);
+
+  const free    = filtered.filter((v) => !v.locked);
+  const premium = filtered.filter((v) => v.locked);
 
   return (
     <div className="flex flex-col gap-10">
@@ -39,6 +49,13 @@ export default function HomePage() {
         <p className="mt-2 text-sm text-od-muted">
           Contenu libre et premium — connecte-toi pour accéder aux formations complètes.
         </p>
+        <input
+          type="search"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Rechercher…"
+          className="mt-4 w-full max-w-sm rounded border border-od-border bg-od-surface px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+        />
       </section>
 
       {loading && (
@@ -47,7 +64,11 @@ export default function HomePage() {
         </div>
       )}
 
-      {!loading && (
+      {error && (
+        <p className="text-sm text-od-crit">Impossible de charger les vidéos. Réessaie plus tard.</p>
+      )}
+
+      {!loading && !error && (
         <>
           {free.length > 0 && (
             <section>
@@ -74,6 +95,9 @@ export default function HomePage() {
           {videos.length === 0 && (
             <p className="text-sm text-od-muted">Aucune vidéo disponible pour l'instant.</p>
           )}
+          {videos.length > 0 && filtered.length === 0 && (
+            <p className="text-sm text-od-muted">Aucun résultat pour « {query} ».</p>
+          )}
         </>
       )}
 

frontend/src/pages/LandingPage.tsx

@@ -0,0 +1,120 @@
+import { Link } from 'react-router-dom';
+
+export default function LandingPage() {
+  return (
+    <div className="flex flex-col gap-24 pb-16">
+
+      {/* ── Hero ──────────────────────────────────────────────────────────── */}
+      <section className="pt-16 flex flex-col gap-6 max-w-3xl">
+
+        {/* Badge */}
+        <div className="inline-flex w-fit items-center gap-2 rounded border border-od-border bg-od-surface px-3 py-1">
+          <span className="h-1.5 w-1.5 rounded-full bg-od-accent" />
+          <span className="font-mono text-2xs text-od-muted tracking-widest uppercase">
+            Vidéos · Playlists · Communauté
+          </span>
+        </div>
+
+        {/* Headline */}
+        <h1 className="font-display text-5xl font-bold leading-[1.1] tracking-tight text-od-text">
+          Partagez vos vidéos.{' '}
+          <span className="text-od-accent">Construisez votre audience.</span>
+        </h1>
+
+        {/* Sous-titre */}
+        <p className="text-base text-od-muted leading-relaxed max-w-xl">
+          OriginsDigital est une plateforme de partage vidéo pensée pour les créateurs.
+          Organisez votre contenu en playlists, proposez du contenu libre ou premium,
+          et faites grandir votre communauté.
+        </p>
+
+        {/* CTAs */}
+        <div className="flex items-center gap-4 pt-2">
+          <Link
+            to="/app"
+            className="inline-flex items-center gap-2 rounded border border-od-accent bg-od-accent px-6 py-2.5 font-mono text-sm font-semibold text-od-bg transition-all duration-150 hover:bg-od-accent-dim hover:border-od-accent-dim"
+          >
+            Explorer les vidéos
+          </Link>
+          <Link
+            to="/login"
+            className="inline-flex items-center gap-2 rounded border border-od-border px-6 py-2.5 font-mono text-sm text-od-muted transition-all duration-150 hover:border-od-border-hi hover:text-od-text"
+          >
+            Se connecter
+          </Link>
+        </div>
+
+      </section>
+
+      {/* ── Features ──────────────────────────────────────────────────────── */}
+      <section className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        {[
+          {
+            label: 'Playlists organisées',
+            desc: 'Regroupez vos vidéos par thème, série ou parcours. Vos spectateurs retrouvent facilement ce qui les intéresse.',
+          },
+          {
+            label: 'Contenu libre & premium',
+            desc: 'Proposez du contenu en accès libre pour attirer, et du contenu premium pour fidéliser. Vous décidez.',
+          },
+          {
+            label: 'Fait pour les créateurs',
+            desc: 'Interface épurée, recherche rapide, profil personnalisé. Le contenu au centre, pas la distraction.',
+          },
+        ].map(({ label, desc }) => (
+          <div
+            key={label}
+            className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-5 transition-colors duration-150 hover:border-od-border-hi"
+          >
+            <div className="h-px w-8 bg-od-accent" />
+            <p className="text-sm font-semibold text-od-text">{label}</p>
+            <p className="text-xs text-od-muted leading-relaxed">{desc}</p>
+          </div>
+        ))}
+      </section>
+
+      {/* ── Comment ça marche ─────────────────────────────────────────────── */}
+      <section className="flex flex-col gap-8">
+        <div className="flex flex-col gap-2">
+          <span className="font-mono text-2xs uppercase tracking-widest text-od-muted">Comment ça marche</span>
+          <h2 className="font-display text-3xl font-bold text-od-text tracking-tight">
+            Simple et direct.
+          </h2>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+          {[
+            { step: '01', title: 'Connectez-vous', desc: 'Via Discord, GitHub, Google ou Twitch. Un clic, pas de formulaire.' },
+            { step: '02', title: 'Explorez', desc: 'Parcourez les vidéos libres, cherchez par thème, découvrez les playlists.' },
+            { step: '03', title: 'Accédez au premium', desc: 'Débloquez les formations complètes et le contenu exclusif.' },
+          ].map(({ step, title, desc }) => (
+            <div key={step} className="flex flex-col gap-2">
+              <span className="font-mono text-lg font-bold text-od-accent">{step}</span>
+              <p className="text-sm font-semibold text-od-text">{title}</p>
+              <p className="text-xs text-od-muted leading-relaxed">{desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ── CTA final ─────────────────────────────────────────────────────── */}
+      <section className="flex flex-col items-center gap-4 rounded border border-od-border bg-od-surface px-8 py-10 text-center">
+        <h2 className="font-display text-2xl font-bold text-od-text">
+          Prêt à découvrir ?
+        </h2>
+        <p className="text-sm text-od-muted max-w-md">
+          Pas besoin de compte pour explorer. Connectez-vous quand vous êtes prêt.
+        </p>
+        <div className="flex items-center gap-4 pt-2">
+          <Link
+            to="/app"
+            className="inline-flex items-center gap-2 rounded border border-od-accent bg-od-accent px-6 py-2.5 font-mono text-sm font-semibold text-od-bg transition-all duration-150 hover:bg-od-accent-dim hover:border-od-accent-dim"
+          >
+            Explorer les vidéos
+          </Link>
+        </div>
+      </section>
+
+    </div>
+  );
+}

frontend/src/pages/LoginPage.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { apiFetch } from '../lib/api';
+import { useAuthContext, type User } from '../context/AuthContext';
+import { buildAuthUrl, saveVerifier } from '../lib/oauth';
 
 const PROVIDERS = [
   { id: 'discord', label: 'Discord' },
@@ -12,14 +14,28 @@ const PROVIDERS = [
 export default function LoginPage() {
   const navigate = useNavigate();
   const location = useLocation();
+  const { setUser } = useAuthContext();
   const from = (location.state as { from?: Location })?.from?.pathname ?? '/';
-  const base = import.meta.env.VITE_SUPEROAUTH_URL;
-  const redirectUrl = encodeURIComponent(window.location.origin + '/callback');
 
   const [email, setEmail]         = useState('');
   const [password, setPassword]   = useState('');
   const [loading, setLoading]     = useState(false);
   const [error, setError]         = useState<string | null>(null);
+  const [oauthLoading, setOauthLoading] = useState<string | null>(null);
+
+  async function handleOAuth(providerId: string) {
+    if (oauthLoading) return;
+    setOauthLoading(providerId);
+    try {
+      const redirectUri = `${window.location.origin}/callback`;
+      const { url, verifier } = await buildAuthUrl(redirectUri, providerId);
+      saveVerifier(verifier);
+      window.location.href = url;
+    } catch {
+      setOauthLoading(null);
+      setError('Impossible de démarrer la connexion OAuth.');
+    }
+  }
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -27,10 +43,11 @@ export default function LoginPage() {
     setLoading(true);
     setError(null);
     try {
-      await apiFetch('/auth/login', {
+      const res = await apiFetch<{ success: boolean; data: { user: User } }>('/auth/login', {
         method: 'POST',
         body: JSON.stringify({ email, password }),
       });
+      setUser(res.data.user);
       navigate(from, { replace: true });
     } catch {
       setError('Email ou mot de passe incorrect.');
@@ -86,13 +103,14 @@ export default function LoginPage() {
         {/* OAuth providers */}
         <div className="flex flex-col gap-2">
           {PROVIDERS.map(({ id, label }) => (
-            <a
+            <button
               key={id}
-              href={`${base}/api/v1/auth/oauth/${id}?redirectUrl=${redirectUrl}`}
-              className="flex items-center justify-center rounded border border-od-border bg-od-surface px-4 py-2.5 text-sm text-od-muted transition-colors hover:border-od-accent hover:text-od-accent"
+              onClick={() => handleOAuth(id)}
+              disabled={oauthLoading === id}
+              className="flex items-center justify-center rounded border border-od-border bg-od-surface px-4 py-2.5 text-sm text-od-muted transition-colors hover:border-od-accent hover:text-od-accent disabled:opacity-40"
             >
-              {label}
-            </a>
+              {oauthLoading === id ? '…' : label}
+            </button>
           ))}
         </div>
 

frontend/src/pages/PlaylistPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, Link, useNavigate } from 'react-router-dom';
 import { apiFetch, ApiError } from '../lib/api';
 
 interface Video {
@@ -27,9 +27,25 @@ interface PlaylistResponse {
 
 export default function PlaylistPage() {
   const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
   const [data, setData] = useState<PlaylistResponse['data'] | null>(null);
   const [error, setError] = useState<'forbidden' | 'not_found' | null>(null);
   const [loading, setLoading] = useState(true);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  // Edit inline form
+  const [editOpen, setEditOpen] = useState(false);
+  const [editTitle, setEditTitle] = useState('');
+  const [editVisibility, setEditVisibility] = useState<'private' | 'shared' | 'public'>('private');
+  const [saving, setSaving] = useState(false);
+
+  // Share modal
+  const [shareOpen, setShareOpen] = useState(false);
+  const [shareUserId, setShareUserId] = useState('');
+  const [sharePermission, setSharePermission] = useState<'view' | 'edit'>('view');
+  const [sharing, setSharing] = useState(false);
+  const [shareError, setShareError] = useState<string | null>(null);
+  const [shareOk, setShareOk] = useState(false);
 
   useEffect(() => {
     if (!id) return;
@@ -42,6 +58,73 @@ export default function PlaylistPage() {
       .finally(() => setLoading(false));
   }, [id]);
 
+  function openEdit() {
+    if (!data) return;
+    setEditTitle(data.playlist.title);
+    setEditVisibility(data.playlist.visibility);
+    setEditOpen(true);
+    setActionError(null);
+  }
+
+  async function handleEdit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!id || saving) return;
+    setSaving(true);
+    setActionError(null);
+    try {
+      const res = await apiFetch<{ success: boolean; data: { playlist: Playlist } }>(
+        `/playlists/${id}`,
+        { method: 'PATCH', body: JSON.stringify({ title: editTitle.trim(), visibility: editVisibility }) }
+      );
+      setData((prev) => prev ? { ...prev, playlist: res.data.playlist } : prev);
+      setEditOpen(false);
+    } catch {
+      setActionError('Impossible de modifier la playlist.');
+    }
+    setSaving(false);
+  }
+
+  async function handleDelete() {
+    if (!id || !confirm('Supprimer cette playlist ?')) return;
+    setActionError(null);
+    try {
+      await apiFetch(`/playlists/${id}`, { method: 'DELETE' });
+      navigate('/playlists');
+    } catch {
+      setActionError('Impossible de supprimer la playlist.');
+    }
+  }
+
+  async function handleRemoveVideo(videoId: string) {
+    if (!id || !confirm('Retirer cette vidéo de la playlist ?')) return;
+    setActionError(null);
+    try {
+      await apiFetch(`/playlists/${id}/videos/${videoId}`, { method: 'DELETE' });
+      setData((prev) => prev ? { ...prev, videos: prev.videos.filter((v) => v.id !== videoId) } : prev);
+    } catch {
+      setActionError('Impossible de retirer la vidéo.');
+    }
+  }
+
+  async function handleShare(e: React.FormEvent) {
+    e.preventDefault();
+    if (!id || !shareUserId.trim() || sharing) return;
+    setSharing(true);
+    setShareError(null);
+    setShareOk(false);
+    try {
+      await apiFetch(`/playlists/${id}/share`, {
+        method: 'POST',
+        body: JSON.stringify({ userId: shareUserId.trim(), permission: sharePermission }),
+      });
+      setShareOk(true);
+      setShareUserId('');
+    } catch {
+      setShareError("Impossible d'envoyer l'invitation.");
+    }
+    setSharing(false);
+  }
+
   if (loading) {
     return (
       <div className="flex flex-col gap-3">
@@ -77,11 +160,50 @@ export default function PlaylistPage() {
   }
 
   const { playlist, videos, permission } = data;
+  const isOwner = permission === 'owner';
 
   return (
     <div className="flex flex-col gap-6">
 
-      <div className="flex flex-col gap-1 border-b border-od-border pb-6">
+      {/* Header */}
+      <div className="flex flex-col gap-3 border-b border-od-border pb-6">
+        {editOpen ? (
+          <form onSubmit={handleEdit} className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4">
+            <p className="font-mono text-xs text-od-muted uppercase tracking-widest">Modifier</p>
+            <input
+              value={editTitle}
+              onChange={(e) => setEditTitle(e.target.value)}
+              required
+              className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+            />
+            <select
+              value={editVisibility}
+              onChange={(e) => setEditVisibility(e.target.value as 'private' | 'shared' | 'public')}
+              className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text outline-none focus:border-od-accent"
+            >
+              <option value="private">Privée</option>
+              <option value="shared">Partagée</option>
+              <option value="public">Publique</option>
+            </select>
+            <div className="flex gap-2">
+              <button
+                type="submit"
+                disabled={saving}
+                className="rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
+              >
+                {saving ? '…' : 'Enregistrer'}
+              </button>
+              <button
+                type="button"
+                onClick={() => setEditOpen(false)}
+                className="rounded border border-od-border px-4 py-1.5 font-mono text-xs text-od-muted hover:text-od-text transition-colors"
+              >
+                Annuler
+              </button>
+            </div>
+          </form>
+        ) : (
+          <>
             <div className="flex items-center gap-3">
               <h1 className="text-xl font-semibold text-od-text">{playlist.title}</h1>
               <span className="font-mono text-xs text-od-muted">{permission}</span>
@@ -89,29 +211,111 @@ export default function PlaylistPage() {
             {playlist.description && (
               <p className="text-sm text-od-muted">{playlist.description}</p>
             )}
+            {isOwner && (
+              <div className="flex gap-2">
+                <button
+                  onClick={openEdit}
+                  className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors"
+                >
+                  Éditer
+                </button>
+                <button
+                  onClick={() => { setShareOpen(true); setShareError(null); setShareOk(false); }}
+                  className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors"
+                >
+                  Partager
+                </button>
+                <button
+                  onClick={handleDelete}
+                  className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-crit hover:text-od-crit transition-colors"
+                >
+                  Supprimer
+                </button>
+              </div>
+            )}
+          </>
+        )}
+        {actionError && <p className="font-mono text-xs text-od-crit">{actionError}</p>}
       </div>
 
+      {/* Share modal */}
+      {shareOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-od-bg/80">
+          <div className="w-full max-w-sm rounded border border-od-border bg-od-surface p-6 flex flex-col gap-4">
+            <p className="font-mono text-xs text-od-muted uppercase tracking-widest">Partager</p>
+            <form onSubmit={handleShare} className="flex flex-col gap-3">
+              <input
+                value={shareUserId}
+                onChange={(e) => setShareUserId(e.target.value)}
+                placeholder="ID utilisateur"
+                required
+                className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+              />
+              <select
+                value={sharePermission}
+                onChange={(e) => setSharePermission(e.target.value as 'view' | 'edit')}
+                className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text outline-none focus:border-od-accent"
+              >
+                <option value="view">Lecture seule</option>
+                <option value="edit">Édition</option>
+              </select>
+              {shareError && <p className="font-mono text-xs text-od-crit">{shareError}</p>}
+              {shareOk && <p className="font-mono text-xs text-od-ok">Invitation envoyée.</p>}
+              <div className="flex gap-2">
+                <button
+                  type="submit"
+                  disabled={sharing || !shareUserId.trim()}
+                  className="rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
+                >
+                  {sharing ? '…' : 'Inviter'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShareOpen(false)}
+                  className="rounded border border-od-border px-4 py-1.5 font-mono text-xs text-od-muted hover:text-od-text transition-colors"
+                >
+                  Fermer
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Videos */}
       {videos.length === 0 ? (
         <p className="text-sm text-od-muted">Aucune vidéo dans cette playlist.</p>
       ) : (
         <div className="flex flex-col gap-2">
           {videos.map((v, i) => (
-            <Link
+            <div
               key={v.id}
-              to={`/video/${v.id}`}
-              className="flex items-center gap-4 rounded border border-od-border bg-od-surface px-4 py-3 hover:border-od-accent/40 transition-colors"
+              className="flex items-center gap-4 rounded border border-od-border bg-od-surface px-4 py-3"
             >
               <span className="font-mono text-xs text-od-muted w-5 shrink-0">{i + 1}</span>
+              <Link
+                to={`/video/${v.id}`}
+                className="flex flex-1 items-center gap-4 hover:opacity-80 transition-opacity min-w-0"
+              >
                 {v.thumbnailUrl && (
                   <img src={v.thumbnailUrl} alt="" className="h-10 w-16 rounded object-cover shrink-0" />
                 )}
-              <span className="flex-1 text-sm text-od-text">{v.title}</span>
+                <span className="flex-1 text-sm text-od-text truncate">{v.title}</span>
                 {v.duration && (
                   <span className="font-mono text-xs text-od-muted shrink-0">
                     {Math.floor(v.duration / 60)}:{String(v.duration % 60).padStart(2, '0')}
                   </span>
                 )}
               </Link>
+              {isOwner && (
+                <button
+                  onClick={() => handleRemoveVideo(v.id)}
+                  className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors shrink-0"
+                >
+                  ✕
+                </button>
+              )}
+            </div>
           ))}
         </div>
       )}

frontend/src/pages/PlaylistsPage.tsx

@@ -9,28 +9,40 @@ interface Playlist {
   visibility: 'private' | 'shared' | 'public';
 }
 
+interface Invitation {
+  shareId: string;
+  playlistId: string;
+  playlistTitle: string;
+  permission: 'view' | 'edit';
+}
+
 interface PlaylistsResponse {
   success: boolean;
   data: {
     owned: Playlist[];
     shared: (Playlist & { permission: 'view' | 'edit' })[];
+    invitations?: Invitation[];
   };
 }
 
 export default function PlaylistsPage() {
   const [owned, setOwned] = useState<Playlist[]>([]);
   const [shared, setShared] = useState<(Playlist & { permission: 'view' | 'edit' })[]>([]);
+  const [invitations, setInvitations] = useState<Invitation[]>([]);
   const [loading, setLoading] = useState(true);
   const [fetchError, setFetchError] = useState<string | null>(null);
   const [createTitle, setCreateTitle] = useState('');
   const [creating, setCreating] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
+  const [inviteError, setInviteError] = useState<string | null>(null);
+  const [respondingId, setRespondingId] = useState<string | null>(null);
 
   useEffect(() => {
     apiFetch<PlaylistsResponse>('/playlists')
       .then((res) => {
         setOwned(res.data.owned);
         setShared(res.data.shared);
+        setInvitations(res.data.invitations ?? []);
       })
       .catch(() => setFetchError('Impossible de charger les playlists.'))
       .finally(() => setLoading(false));
@@ -54,6 +66,28 @@ export default function PlaylistsPage() {
     setCreating(false);
   }
 
+  async function respondInvitation(inv: Invitation, status: 'accepted' | 'revoked') {
+    if (respondingId) return;
+    setRespondingId(inv.shareId);
+    setInviteError(null);
+    try {
+      await apiFetch(`/playlists/${inv.playlistId}/share/${inv.shareId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ status }),
+      });
+      setInvitations((prev) => prev.filter((i) => i.shareId !== inv.shareId));
+      if (status === 'accepted') {
+        const res = await apiFetch<PlaylistsResponse>('/playlists');
+        setOwned(res.data.owned);
+        setShared(res.data.shared);
+        setInvitations(res.data.invitations ?? []);
+      }
+    } catch {
+      setInviteError("Impossible de répondre à l'invitation.");
+    }
+    setRespondingId(null);
+  }
+
   if (loading) {
     return (
       <div className="flex flex-col gap-3">
@@ -96,6 +130,41 @@ export default function PlaylistsPage() {
         {createError && <p className="font-mono text-xs text-od-crit">{createError}</p>}
       </div>
 
+      {/* Invitations reçues */}
+      {invitations.length > 0 && (
+        <section className="flex flex-col gap-2">
+          <h2 className="font-mono text-xs uppercase tracking-widest text-od-muted">Invitations</h2>
+          {inviteError && <p className="font-mono text-xs text-od-crit">{inviteError}</p>}
+          {invitations.map((inv) => (
+            <div
+              key={inv.shareId}
+              className="flex items-center justify-between gap-4 rounded border border-od-border bg-od-surface px-4 py-3"
+            >
+              <div className="flex flex-col gap-0.5 min-w-0">
+                <span className="text-sm text-od-text truncate">{inv.playlistTitle}</span>
+                <span className="font-mono text-xs text-od-muted">{inv.permission}</span>
+              </div>
+              <div className="flex gap-2 shrink-0">
+                <button
+                  disabled={respondingId === inv.shareId}
+                  onClick={() => respondInvitation(inv, 'accepted')}
+                  className="rounded border border-od-ok px-3 py-1 font-mono text-xs text-od-ok hover:bg-od-ok hover:text-od-bg transition-colors disabled:opacity-40"
+                >
+                  {respondingId === inv.shareId ? '…' : 'Accepter'}
+                </button>
+                <button
+                  disabled={respondingId === inv.shareId}
+                  onClick={() => respondInvitation(inv, 'revoked')}
+                  className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-crit hover:text-od-crit transition-colors disabled:opacity-40"
+                >
+                  Refuser
+                </button>
+              </div>
+            </div>
+          ))}
+        </section>
+      )}
+
       {/* Mes playlists */}
       {owned.length > 0 && (
         <section className="flex flex-col gap-2">
@@ -112,7 +181,7 @@ export default function PlaylistsPage() {
         </section>
       )}
 
-      {owned.length === 0 && shared.length === 0 && (
+      {owned.length === 0 && shared.length === 0 && invitations.length === 0 && (
         <p className="text-sm text-od-muted">Aucune playlist pour l'instant.</p>
       )}
 

frontend/src/pages/ProfilePage.tsx

@@ -11,41 +11,42 @@ interface MeResponse {
 export default function ProfilePage() {
   const { user, setUser } = useAuthContext();
 
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(user?.nickname ?? '');
+  const [editingNickname, setEditingNickname] = useState(false);
+  const [draftNickname, setDraftNickname] = useState(user?.nickname ?? '');
+  const [editingAvatar, setEditingAvatar] = useState(false);
+  const [draftAvatar, setDraftAvatar] = useState(user?.avatar ?? '');
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   if (!user) return null;
 
-  function handleEdit() {
-    setDraft(user!.nickname);
+  function startEditNickname() {
+    setDraftNickname(user!.nickname);
     setError(null);
-    setEditing(true);
+    setEditingNickname(true);
   }
 
-  function handleCancel() {
-    setEditing(false);
+  function startEditAvatar() {
+    setDraftAvatar(user!.avatar ?? '');
+    setError(null);
+    setEditingAvatar(true);
+  }
+
+  function cancel() {
+    setEditingNickname(false);
+    setEditingAvatar(false);
     setError(null);
   }
 
-  async function handleSave() {
-    const trimmed = draft.trim();
-    if (!trimmed || trimmed === user!.nickname) {
-      setEditing(false);
-      return;
-    }
-
+  async function save(patch: { nickname?: string; avatar?: string | null }) {
     setSaving(true);
     setError(null);
     try {
-      await apiFetch('/users/me', {
-        method: 'PATCH',
-        body: JSON.stringify({ nickname: trimmed }),
-      });
+      await apiFetch('/users/me', { method: 'PATCH', body: JSON.stringify(patch) });
       const res = await apiFetch<MeResponse>('/auth/me');
       setUser(res.data.user);
-      setEditing(false);
+      setEditingNickname(false);
+      setEditingAvatar(false);
     } catch (e) {
       setError(e instanceof ApiError ? `Erreur ${e.status}` : 'Erreur réseau');
     } finally {
@@ -53,6 +54,19 @@ export default function ProfilePage() {
     }
   }
 
+  async function handleSaveNickname() {
+    const trimmed = draftNickname.trim();
+    if (!trimmed || trimmed === user!.nickname) { cancel(); return; }
+    await save({ nickname: trimmed });
+  }
+
+  async function handleSaveAvatar() {
+    const trimmed = draftAvatar.trim();
+    const val = trimmed === '' ? null : trimmed;
+    if (val === (user!.avatar ?? null)) { cancel(); return; }
+    await save({ avatar: val });
+  }
+
   const planLabel = user.plan?.name ?? 'Free';
   const planSlug  = user.plan?.slug ?? 'free';
 
@@ -60,63 +74,95 @@ export default function ProfilePage() {
     <div className="max-w-lg space-y-8">
       <h1 className="font-mono text-sm text-od-accent">Profil</h1>
 
-      {/* Infos compte */}
+      {/* Compte */}
       <section className="space-y-4">
-        <h2 className="text-xs font-semibold text-od-muted uppercase tracking-widest">
-          Compte
-        </h2>
+        <h2 className="text-xs font-semibold text-od-muted uppercase tracking-widest">Compte</h2>
 
         <div className="rounded border border-od-border bg-od-surface divide-y divide-od-border">
 
+          {/* Avatar */}
+          <div className="flex items-center justify-between px-4 py-3 gap-4">
+            <span className="text-xs text-od-muted shrink-0">Avatar</span>
+            {editingAvatar ? (
+              <div className="flex flex-col items-end gap-2 flex-1 min-w-0">
+                <div className="flex items-center gap-2 w-full">
+                  <input
+                    value={draftAvatar}
+                    onChange={(e) => setDraftAvatar(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Enter') handleSaveAvatar(); if (e.key === 'Escape') cancel(); }}
+                    placeholder="URL https://…  (vide = supprimer)"
+                    disabled={saving}
+                    className="flex-1 min-w-0 rounded border border-od-border bg-od-bg px-2 py-0.5 font-mono text-xs text-od-text focus:border-od-accent focus:outline-none disabled:opacity-50 placeholder-od-muted"
+                    autoFocus
+                  />
+                  <button onClick={handleSaveAvatar} disabled={saving}
+                    className="font-mono text-xs text-od-accent hover:opacity-80 transition-opacity disabled:opacity-40">
+                    {saving ? '…' : '✓'}
+                  </button>
+                  <button onClick={cancel} disabled={saving}
+                    className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors disabled:opacity-40">
+                    ✕
+                  </button>
+                </div>
+                {draftAvatar && (
+                  <img src={draftAvatar} alt="preview" className="h-10 w-10 rounded-full object-cover border border-od-border" />
+                )}
+                {error && <span className="font-mono text-[10px] text-od-crit">{error}</span>}
+              </div>
+            ) : (
+              <div className="flex items-center gap-3">
+                {user.avatar ? (
+                  <img src={user.avatar} alt={user.nickname} className="h-8 w-8 rounded-full object-cover border border-od-border" />
+                ) : (
+                  <span className="flex h-8 w-8 items-center justify-center rounded-full bg-od-surface-hi border border-od-border font-mono text-sm text-od-accent">
+                    {user.nickname[0].toUpperCase()}
+                  </span>
+                )}
+                <button onClick={startEditAvatar}
+                  className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors">
+                  modifier
+                </button>
+              </div>
+            )}
+          </div>
+
           {/* Email */}
           <div className="flex items-center justify-between px-4 py-3">
             <span className="text-xs text-od-muted">Email</span>
-            <span className="font-mono text-xs text-od-text">
-              {user.email ?? '—'}
-            </span>
+            <span className="font-mono text-xs text-od-text">{user.email ?? '—'}</span>
           </div>
 
           {/* Nickname */}
           <div className="flex items-center justify-between px-4 py-3">
             <span className="text-xs text-od-muted">Pseudo</span>
-            {editing ? (
+            {editingNickname ? (
               <div className="flex flex-col items-end gap-1">
                 <div className="flex items-center gap-2">
                   <input
-                    value={draft}
-                    onChange={(e) => setDraft(e.target.value)}
-                    onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); if (e.key === 'Escape') handleCancel(); }}
-                    maxLength={32}
+                    value={draftNickname}
+                    onChange={(e) => setDraftNickname(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Enter') handleSaveNickname(); if (e.key === 'Escape') cancel(); }}
+                    maxLength={100}
                     disabled={saving}
                     className="w-36 rounded border border-od-border bg-od-bg px-2 py-0.5 font-mono text-xs text-od-text focus:border-od-accent focus:outline-none disabled:opacity-50"
                     autoFocus
                   />
-                  <button
-                    onClick={handleSave}
-                    disabled={saving}
-                    className="font-mono text-xs text-od-accent hover:opacity-80 transition-opacity disabled:opacity-40"
-                  >
+                  <button onClick={handleSaveNickname} disabled={saving}
+                    className="font-mono text-xs text-od-accent hover:opacity-80 transition-opacity disabled:opacity-40">
                     {saving ? '…' : '✓'}
                   </button>
-                  <button
-                    onClick={handleCancel}
-                    disabled={saving}
-                    className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors disabled:opacity-40"
-                  >
+                  <button onClick={cancel} disabled={saving}
+                    className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors disabled:opacity-40">
                     ✕
                   </button>
                 </div>
-                {error && (
-                  <span className="font-mono text-[10px] text-od-crit">{error}</span>
-                )}
+                {error && <span className="font-mono text-[10px] text-od-crit">{error}</span>}
               </div>
             ) : (
               <div className="flex items-center gap-3">
                 <span className="font-mono text-xs text-od-text">{user.nickname}</span>
-                <button
-                  onClick={handleEdit}
-                  className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors"
-                >
+                <button onClick={startEditNickname}
+                  className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors">
                   modifier
                 </button>
               </div>
@@ -128,10 +174,7 @@ export default function ProfilePage() {
 
       {/* Plan */}
       <section className="space-y-4">
-        <h2 className="text-xs font-semibold text-od-muted uppercase tracking-widest">
-          Abonnement
-        </h2>
-
+        <h2 className="text-xs font-semibold text-od-muted uppercase tracking-widest">Abonnement</h2>
         <div className="rounded border border-od-border bg-od-surface px-4 py-3 flex items-center justify-between">
           <p className="text-xs text-od-text">{planLabel}</p>
           <span className="font-mono text-[10px] px-1.5 py-0.5 rounded border border-od-border text-od-muted">

frontend/src/pages/VideoPage.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { apiFetch, ApiError } from '../lib/api';
+import { useAuthContext } from '../context/AuthContext';
 import VideoPlayer from '../components/VideoPlayer';
 
 interface Video {
@@ -20,8 +21,14 @@ interface VideoResponse {
   data: { video: Video };
 }
 
+interface Playlist {
+  id: string;
+  title: string;
+}
+
 export default function VideoPage() {
   const { id } = useParams<{ id: string }>();
+  const { user } = useAuthContext();
   const [video, setVideo]     = useState<Video | null>(null);
   const [error, setError]     = useState<'forbidden' | 'not_found' | 'unknown' | null>(null);
   const [loading, setLoading] = useState(true);
@@ -106,6 +113,8 @@ export default function VideoPage() {
         </div>
       </div>
 
+      {user && <AddToPlaylist videoId={video.id} />}
+
       <Link to="/" className="self-start font-mono text-xs text-od-muted hover:text-od-text transition-colors">
         ← Retour aux vidéos
       </Link>
@@ -113,3 +122,70 @@ export default function VideoPage() {
     </div>
   );
 }
+
+// ── Ajouter à une playlist ────────────────────────────────────────────────────
+
+function AddToPlaylist({ videoId }: { videoId: string }) {
+  const [playlists, setPlaylists] = useState<Playlist[]>([]);
+  const [selected, setSelected]  = useState('');
+  const [adding, setAdding]      = useState(false);
+  const [status, setStatus]      = useState<'idle' | 'ok' | 'already' | 'error'>('idle');
+
+  useEffect(() => {
+    apiFetch<{ success: boolean; data: { owned: Playlist[]; shared: (Playlist & { permission: string })[] } }>(
+      '/playlists'
+    ).then((res) => {
+      const editable = [
+        ...res.data.owned,
+        ...res.data.shared.filter((p) => p.permission === 'edit'),
+      ];
+      setPlaylists(editable);
+      if (editable.length > 0) setSelected(editable[0].id);
+    }).catch(() => {});
+  }, []);
+
+  async function handleAdd() {
+    if (!selected || adding) return;
+    setAdding(true);
+    setStatus('idle');
+    try {
+      await apiFetch(`/playlists/${selected}/videos`, {
+        method: 'POST',
+        body: JSON.stringify({ videoId }),
+      });
+      setStatus('ok');
+    } catch (e) {
+      setStatus(e instanceof ApiError && e.status === 409 ? 'already' : 'error');
+    }
+    setAdding(false);
+  }
+
+  if (playlists.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-2 rounded border border-od-border bg-od-surface p-4">
+      <p className="font-mono text-xs text-od-muted uppercase tracking-widest">Ajouter à une playlist</p>
+      <div className="flex items-center gap-2">
+        <select
+          value={selected}
+          onChange={(e) => { setSelected(e.target.value); setStatus('idle'); }}
+          className="flex-1 rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text outline-none focus:border-od-accent"
+        >
+          {playlists.map((p) => (
+            <option key={p.id} value={p.id}>{p.title}</option>
+          ))}
+        </select>
+        <button
+          onClick={handleAdd}
+          disabled={adding}
+          className="rounded border border-od-accent px-4 py-2 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
+        >
+          {adding ? '…' : '+ Ajouter'}
+        </button>
+      </div>
+      {status === 'ok'     && <p className="font-mono text-xs text-od-ok">Vidéo ajoutée.</p>}
+      {status === 'already'&& <p className="font-mono text-xs text-od-muted">Déjà dans cette playlist.</p>}
+      {status === 'error'  && <p className="font-mono text-xs text-od-crit">Erreur — réessaie.</p>}
+    </div>
+  );
+}

frontend/src/styles/index.css

@@ -2,39 +2,31 @@
 @tailwind components;
 @tailwind utilities;
 
-/* ─── Void Dark (défaut) ─────────────────────────────────────────────────── */
-:root,
-[data-theme="dark"] {
-  --od-bg:           #0a0a0d;   /* fond principal — quasi-noir cool */
-  --od-surface:      #111115;   /* panneaux, cartes */
-  --od-surface-hi:   #191920;   /* survol, éléments élevés */
-  --od-border:       #222228;   /* séparateurs subtils */
-  --od-text:         #dddde8;   /* texte principal */
-  --od-muted:        #62626e;   /* texte secondaire, labels */
-  --od-accent:       #d4a853;   /* or chaud — premium */
-  --od-accent-dim:   #a07830;   /* survol accent */
+/* ─── Void Dark — dark only V1 ──────────────────────────────────────────── */
+:root {
+  --od-bg:           #0a0a0a;   /* fond principal — validated */
+  --od-surface:      #111111;   /* panneaux, cartes */
+  --od-surface-hi:   #1a1a1a;   /* survol, éléments élevés */
+  --od-border:       #222222;   /* séparateurs subtils */
+  --od-border-hi:    #2e2e2e;   /* bordures hover */
+  --od-text:         #e8e8e8;   /* texte principal */
+  --od-muted:        #5a5a5a;   /* texte secondaire, labels */
+  --od-accent:       #c9a84c;   /* or mat — validated */
+  --od-accent-dim:   #a08038;   /* survol accent */
+  --od-accent-glow:  rgba(201,168,76,0.12); /* glow subtil */
   --od-crit:         #d95f5f;   /* erreurs */
   --od-ok:           #5fc875;   /* succès */
 }
 
-/* ─── Void Light ─────────────────────────────────────────────────────────── */
-[data-theme="light"] {
-  --od-bg:           #f2f2f5;
-  --od-surface:      #ffffff;
-  --od-surface-hi:   #e8e8ee;
-  --od-border:       #d0d0da;
-  --od-text:         #14141a;
-  --od-muted:        #6a6a78;
-  --od-accent:       #a07830;
-  --od-accent-dim:   #7a5c20;
-  --od-crit:         #c04040;
-  --od-ok:           #3aa855;
+/* ─── Base ───────────────────────────────────────────────────────────────── */
+html {
+  color-scheme: dark;
 }
 
-/* ─── Base ───────────────────────────────────────────────────────────────── */
 body {
   background-color: var(--od-bg);
   color: var(--od-text);
-  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

frontend/tailwind.config.ts

@@ -1,8 +1,8 @@
 import type { Config } from 'tailwindcss';
 
-// Design system "Void" — palette custom OriginsDigital
-// Les couleurs sont définies comme variables CSS dans src/styles/index.css
-// → thème sombre/clair géré via data-theme="dark|light" sur <html>
+// Design system "Void Dark" — OriginsDigital V1
+// Palette validée Step 1 : fond #0a0a0a, surface #111, accent #c9a84c (or mat)
+// Dark only — pas de toggle en V1
 export default {
   content: ['./index.html', './src/**/*.{ts,tsx}'],
   theme: {
@@ -13,18 +13,47 @@ export default {
           surface:      'var(--od-surface)',
           'surface-hi': 'var(--od-surface-hi)',
           border:       'var(--od-border)',
+          'border-hi':  'var(--od-border-hi)',
           text:         'var(--od-text)',
           muted:        'var(--od-muted)',
           accent:       'var(--od-accent)',
           'accent-dim': 'var(--od-accent-dim)',
+          'accent-glow':'var(--od-accent-glow)',
           crit:         'var(--od-crit)',
           ok:           'var(--od-ok)',
         },
       },
       fontFamily: {
-        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        // display : Geist — headlines H1, titres premium
+        display: ['Geist', 'Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        sans:    ['Geist', 'Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
         mono:    ['"JetBrains Mono"', '"Fira Code"', 'ui-monospace', 'monospace'],
       },
+      fontSize: {
+        // Densité élevée — chaque pixel justifié
+        '2xs': ['0.625rem', { lineHeight: '1rem' }],
+      },
+      borderRadius: {
+        sm: '0.25rem',
+        DEFAULT: '0.375rem',
+        md: '0.5rem',
+        lg: '0.75rem',
+      },
+      transitionDuration: {
+        DEFAULT: '150ms',
+      },
+      boxShadow: {
+        'accent-glow': '0 0 0 1px var(--od-accent-glow), 0 4px 20px var(--od-accent-glow)',
+      },
+      keyframes: {
+        'fade-in': {
+          from: { opacity: '0', transform: 'translateY(4px)' },
+          to:   { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+      animation: {
+        'fade-in': 'fade-in 150ms ease-out',
+      },
     },
   },
   plugins: [],