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