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

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { apiFetch } from '../lib/api';
+
+export default function CallbackPage() {
+  const navigate = useNavigate();
+  const [error, setError] = useState<string | 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 });
+      return;
+    }
+
+    // Envoie le token au backend → backend valide + pose le cookie httpOnly
+    apiFetch<void>('/auth/session', {
+      method: 'POST',
+      body: JSON.stringify({ token }),
+    })
+      .then(() => navigate('/', { replace: true }))
+      .catch(() => setError("Échec de l'authentification. Réessaie."));
+  }, [navigate]);
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center gap-4 pt-20">
+        <p className="text-od-crit">{error}</p>
+        <a
+          href="/"
+          className="font-mono text-xs text-od-muted hover:text-od-text transition-colors"
+        >
+          ← Retour à l'accueil
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center pt-20">
+      <p className="font-mono text-sm text-od-muted">Connexion en cours…</p>
+    </div>
+  );
+}

frontend/src/pages/HomePage.tsx

@@ -0,0 +1,56 @@
+export default function HomePage() {
+  return (
+    <div className="flex flex-col gap-10">
+
+      {/* Hero */}
+      <section className="border-b border-od-border pb-8">
+        <h1 className="text-2xl font-semibold text-od-text">
+          Vidéos & formations
+        </h1>
+        <p className="mt-2 text-sm text-od-muted">
+          Contenu libre et premium — connecte-toi pour accéder aux formations complètes.
+        </p>
+      </section>
+
+      {/* Accès libre */}
+      <section>
+        <h2 className="mb-4 font-mono text-xs uppercase tracking-widest text-od-muted">
+          Accès libre
+        </h2>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <VideoCardPlaceholder tier="free" />
+          <VideoCardPlaceholder tier="free" />
+        </div>
+      </section>
+
+      {/* Premium */}
+      <section>
+        <h2 className="mb-4 font-mono text-xs uppercase tracking-widest text-od-accent">
+          Premium
+        </h2>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <VideoCardPlaceholder tier="premium" />
+          <VideoCardPlaceholder tier="premium" />
+        </div>
+      </section>
+
+    </div>
+  );
+}
+
+function VideoCardPlaceholder({ tier }: { tier: 'free' | 'premium' }) {
+  return (
+    <div className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4">
+      {/* Thumbnail */}
+      <div className="h-28 rounded bg-od-surface-hi" />
+      {/* Title skeleton */}
+      <div className="h-3 w-3/4 rounded bg-od-surface-hi" />
+      <div className="h-2 w-1/2 rounded bg-od-surface-hi" />
+      {tier === 'premium' && (
+        <span className="self-start rounded border border-od-accent px-2 py-0.5 font-mono text-xs text-od-accent">
+          Premium
+        </span>
+      )}
+    </div>
+  );
+}