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,7 +1,6 @@
 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";
 
@@ -19,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) {
@@ -26,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) {

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 });

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/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/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/pages/CallbackPage.tsx

@@ -1,6 +1,7 @@
 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';
 
@@ -9,31 +10,130 @@ interface SessionResponse {
   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');
 
-    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;
     }
 
-    apiFetch<SessionResponse>('/auth/session', {
-      method: 'POST',
-      body: JSON.stringify({ token }),
-    })
-      .then((res) => {
-        setUser(res.data.user);
-        navigate('/', { replace: true });
+    // --- 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 }),
       })
-      .catch(() => setError("Échec de l'authentification. Réessaie."));
+        .then((res) => {
+          setUser(res.data.user);
+          navigate('/', { replace: true });
+        })
+        .catch(() => setError("Échec de l'authentification. Réessaie."));
+      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/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

@@ -2,6 +2,7 @@ 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' },
@@ -15,8 +16,6 @@ export default function LoginPage() {
   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('');
@@ -24,10 +23,18 @@ export default function LoginPage() {
   const [error, setError]         = useState<string | null>(null);
   const [oauthLoading, setOauthLoading] = useState<string | null>(null);
 
-  function handleOAuth(providerId: string) {
+  async function handleOAuth(providerId: string) {
     if (oauthLoading) return;
     setOauthLoading(providerId);
-    window.location.href = `${base}/api/v1/oauth/${providerId}?redirectUrl=${redirectUrl}&tenantId=origins`;
+    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) {

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,17 +13,46 @@ 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'],
-        mono: ['"JetBrains Mono"', '"Fira Code"', 'ui-monospace', 'monospace'],
+        // 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',
       },
     },
   },