fix(auth): UserMenu sessionStorage → AuthContext — unification auth state

.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(*)"
+    ]
+  }
+}

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) {

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

@@ -0,0 +1,241 @@
+import { Link } from 'react-router-dom';
+
+// ─── Pricing data ─────────────────────────────────────────────────────────────
+
+interface Tier {
+  name: string;
+  price: string;
+  period: string;
+  tagline: string;
+  features: string[];
+  cta: string;
+  highlighted: boolean;
+}
+
+const TIERS: Tier[] = [
+  {
+    name: 'Starter',
+    price: '29€',
+    period: '/mois',
+    tagline: 'Pour démarrer proprement.',
+    features: [
+      '1 projet',
+      'Domaine custom',
+      'White-label basique',
+      'Support communauté',
+    ],
+    cta: 'Commencer',
+    highlighted: false,
+  },
+  {
+    name: 'Studio',
+    price: '99€',
+    period: '/mois',
+    tagline: 'Pour les studios actifs.',
+    features: [
+      '5 projets',
+      'Analytics intégrés',
+      'SuperOAuth Tier 3',
+      'White-label complet',
+      'Support email',
+    ],
+    cta: 'Choisir Studio',
+    highlighted: true,
+  },
+  {
+    name: 'Pro',
+    price: '249€',
+    period: '/mois',
+    tagline: 'Pour les opérations à fort volume.',
+    features: [
+      'Projets illimités',
+      'API access complet',
+      'Support prioritaire',
+      'SuperOAuth Tier 3',
+      'SLA 99.9%',
+    ],
+    cta: 'Choisir Pro',
+    highlighted: false,
+  },
+];
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+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">
+            SuperOAuth Tier 3 — multi-tenant natif
+          </span>
+        </div>
+
+        {/* Headline */}
+        <h1 className="font-display text-5xl font-bold leading-[1.1] tracking-tight text-od-text">
+          La plateforme des{' '}
+          <span className="text-od-accent">studios indépendants.</span>
+        </h1>
+
+        {/* Sous-titre */}
+        <p className="text-base text-od-muted leading-relaxed max-w-xl">
+          Lancez votre vitrine de contenu en quelques minutes.
+          Auth multi-tenant, domaine custom, white-label complet —
+          sans compromis sur la qualité.
+        </p>
+
+        {/* CTAs */}
+        <div className="flex items-center gap-4 pt-2">
+          <Link
+            to="/login"
+            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"
+          >
+            Se connecter
+          </Link>
+          <a
+            href="#pricing"
+            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"
+          >
+            Voir les tarifs
+          </a>
+        </div>
+
+        {/* Social proof minimal */}
+        <p className="font-mono text-2xs text-od-muted pt-2">
+          Intégration SuperOAuth Tier 3 · Auth per-tenant · CNAME custom
+        </p>
+
+      </section>
+
+      {/* ── Différenciateur ───────────────────────────────────────────────── */}
+      <section className="grid grid-cols-3 gap-4">
+        {[
+          {
+            label: 'Auth multi-tenant',
+            desc: 'SuperOAuth Tier 3 intégré nativement. Per-tenant providers, isolation complète des données.',
+          },
+          {
+            label: 'White-label total',
+            desc: 'Logo, domaine, emails, couleurs — votre marque, pas la nôtre. CNAME custom inclus dès Starter.',
+          },
+          {
+            label: 'Prévisible',
+            desc: 'Abonnement fixe, pas de commission, pas de per-seat. Votre croissance ne nous rémunère pas.',
+          },
+        ].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>
+
+      {/* ── Pricing ───────────────────────────────────────────────────────── */}
+      <section id="pricing" className="flex flex-col gap-8 scroll-mt-20">
+
+        <div className="flex flex-col gap-2">
+          <span className="font-mono text-2xs uppercase tracking-widest text-od-muted">Tarifs</span>
+          <h2 className="font-display text-3xl font-bold text-od-text tracking-tight">
+            Simple. Sans surprise.
+          </h2>
+          <p className="text-sm text-od-muted max-w-md">
+            Abonnement mensuel sans engagement. Pas de commission sur vos revenus.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-3 gap-4">
+          {TIERS.map((tier) => (
+            <PricingCard key={tier.name} tier={tier} />
+          ))}
+        </div>
+
+        {/* Enterprise mention */}
+        <div className="flex items-center justify-between rounded border border-od-border bg-od-surface px-6 py-4">
+          <div className="flex flex-col gap-0.5">
+            <span className="text-sm font-semibold text-od-text">Enterprise</span>
+            <span className="text-xs text-od-muted">SLA, déploiement dédié, onboarding personnalisé</span>
+          </div>
+          <a
+            href="mailto:contact@originsdigital.com"
+            className="rounded border border-od-border px-4 py-2 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-all duration-150"
+          >
+            Nous contacter
+          </a>
+        </div>
+
+      </section>
+
+    </div>
+  );
+}
+
+// ─── PricingCard ──────────────────────────────────────────────────────────────
+
+function PricingCard({ tier }: { tier: Tier }) {
+  const base =
+    'relative flex flex-col gap-5 rounded border p-6 transition-all duration-150';
+  const highlighted =
+    tier.highlighted
+      ? 'border-od-accent bg-od-surface shadow-accent-glow'
+      : 'border-od-border bg-od-surface hover:border-od-border-hi';
+
+  return (
+    <div className={`${base} ${highlighted}`}>
+
+      {tier.highlighted && (
+        <div className="absolute -top-px left-0 right-0 h-px bg-od-accent" />
+      )}
+
+      {tier.highlighted && (
+        <div className="absolute -top-3 right-4 rounded-full border border-od-accent bg-od-bg px-2 py-0.5">
+          <span className="font-mono text-2xs text-od-accent tracking-wider">Populaire</span>
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="flex flex-col gap-1">
+        <span className="font-mono text-xs uppercase tracking-widest text-od-muted">{tier.name}</span>
+        <div className="flex items-baseline gap-1">
+          <span className="font-display text-4xl font-bold text-od-text">{tier.price}</span>
+          <span className="font-mono text-xs text-od-muted">{tier.period}</span>
+        </div>
+        <span className="text-xs text-od-muted">{tier.tagline}</span>
+      </div>
+
+      {/* Separator */}
+      <div className="border-t border-od-border" />
+
+      {/* Features */}
+      <ul className="flex flex-col gap-2.5 flex-1">
+        {tier.features.map((f) => (
+          <li key={f} className="flex items-start gap-2 text-xs text-od-muted">
+            <span className="mt-0.5 text-od-accent">—</span>
+            <span>{f}</span>
+          </li>
+        ))}
+      </ul>
+
+      {/* CTA */}
+      <Link
+        to="/login"
+        className={
+          tier.highlighted
+            ? 'inline-flex items-center justify-center rounded border border-od-accent bg-od-accent px-4 py-2 font-mono text-xs font-semibold text-od-bg transition-all duration-150 hover:bg-od-accent-dim hover:border-od-accent-dim'
+            : 'inline-flex items-center justify-center rounded border border-od-border px-4 py-2 font-mono text-xs text-od-muted transition-all duration-150 hover:border-od-accent hover:text-od-accent'
+        }
+      >
+        {tier.cta}
+      </Link>
+
+    </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,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',
       },
     },
   },