feat(frontend): scaffold Tailwind design system + routing + auth callback

- Tailwind v3 + PostCSS + autoprefixer
- BrowserRouter with Layout shell (Header, theme toggle dark/light)
- Pages: HomePage, CallbackPage (SuperOAuth callback handler)
- hooks/useAuth.ts + lib/api.ts (API client base)
- styles/index.css (Tailwind directives)
- Theme persisted in localStorage (od-theme)

frontend/src/components/layout/Header.tsx

@@ -0,0 +1,70 @@
+import { Link } from 'react-router-dom';
+import type { User } from '../../hooks/useAuth';
+
+interface HeaderProps {
+  theme: 'dark' | 'light';
+  onToggleTheme: () => void;
+  user: User | null;
+}
+
+export default function Header({ theme, onToggleTheme, user }: HeaderProps) {
+  const loginUrl = import.meta.env.VITE_SUPEROAUTH_AUTHORIZE_URL;
+
+  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">
+
+        {/* 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">
+            OD
+          </span>
+          <span className="text-sm font-semibold text-od-text">
+            OriginsDigital
+          </span>
+        </Link>
+
+        {/* Navigation */}
+        <nav className="flex gap-6">
+          <Link
+            to="/"
+            className="text-sm text-od-muted hover:text-od-text transition-colors"
+          >
+            Accueil
+          </Link>
+          <Link
+            to="/videos"
+            className="text-sm text-od-muted hover:text-od-text transition-colors"
+          >
+            Vidéos
+          </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>
+
+          {user ? (
+            <span className="font-mono text-xs text-od-accent">
+              {user.nickname}
+            </span>
+          ) : (
+            <a
+              href={loginUrl}
+              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"
+            >
+              Connexion
+            </a>
+          )}
+        </div>
+
+      </div>
+    </header>
+  );
+}

frontend/src/components/layout/Layout.tsx

@@ -0,0 +1,25 @@
+import { Outlet } from 'react-router-dom';
+import Header from './Header';
+import { useAuth } from '../../hooks/useAuth';
+
+interface LayoutProps {
+  theme: 'dark' | 'light';
+  onToggleTheme: () => void;
+}
+
+export default function Layout({ theme, onToggleTheme }: LayoutProps) {
+  const { user, loading } = useAuth();
+
+  return (
+    <div className="min-h-screen bg-od-bg text-od-text">
+      <Header
+        theme={theme}
+        onToggleTheme={onToggleTheme}
+        user={loading ? null : user}
+      />
+      <main className="mx-auto max-w-5xl px-4 py-8">
+        <Outlet />
+      </main>
+    </div>
+  );
+}