fix: login page avec sélection provider → /api/v1/auth/oauth/:provider?redirectUrl

SuperOAuth root page ignore ?redirectUrl, les boutons de sa UI pointent vers
ses propres URIs hardcodées. Fix : notre page /login construit les URLs API
directement avec redirectUrl=origins.tetardtek.com/callback.

Aussi : CORS_ORIGINS SuperOAuth mis à jour (origins.tetardtek.com ajouté).

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Layout from './components/layout/Layout';
 import HomePage from './pages/HomePage';
+import LoginPage from './pages/LoginPage';
 import CallbackPage from './pages/CallbackPage';
 import VideoPage from './pages/VideoPage';
 import PlaylistsPage from './pages/PlaylistsPage';
@@ -26,6 +27,7 @@ function App() {
       <Routes>
         <Route element={<Layout theme={theme} onToggleTheme={toggleTheme} />}>
           <Route path="/" element={<HomePage />} />
+          <Route path="/login" element={<LoginPage />} />
           <Route path="/video/:id" element={<VideoPage />} />
           <Route path="/playlists" element={<PlaylistsPage />} />
           <Route path="/playlists/:id" element={<PlaylistPage />} />

frontend/src/components/layout/Header.tsx

@@ -10,8 +10,6 @@ interface HeaderProps {
 }
 
 export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderProps) {
-  const loginUrl = `${import.meta.env.VITE_SUPEROAUTH_URL}?redirectUrl=${encodeURIComponent(window.location.origin + '/callback')}`;
-
   async function handleLogout() {
     await apiFetch('/auth/logout', { method: 'POST' }).catch(() => {});
     onLogout();
@@ -64,12 +62,12 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP
               </button>
             </div>
           ) : (
-            <a
+            <Link
-              href={loginUrl}
+              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"
             >
               Connexion
-            </a>
+            </Link>
           )}
         </div>
 

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,39 @@
+import { Link } from 'react-router-dom';
+
+const PROVIDERS = [
+  { id: 'discord', label: 'Discord' },
+  { id: 'github',  label: 'GitHub'  },
+  { id: 'google',  label: 'Google'  },
+  { id: 'twitch',  label: 'Twitch'  },
+] as const;
+
+export default function LoginPage() {
+  const base = import.meta.env.VITE_SUPEROAUTH_URL;
+  const redirectUrl = encodeURIComponent(window.location.origin + '/callback');
+
+  return (
+    <div className="flex flex-col items-center gap-8 pt-20">
+      <div className="flex flex-col items-center gap-2">
+        <span className="font-mono text-xs font-bold tracking-widest text-od-accent">OD</span>
+        <h1 className="text-xl font-semibold text-od-text">Connexion</h1>
+        <p className="text-sm text-od-muted">Choisis ton provider pour continuer</p>
+      </div>
+
+      <div className="flex w-full max-w-xs flex-col gap-3">
+        {PROVIDERS.map(({ id, label }) => (
+          <a
+            key={id}
+            href={`${base}/api/v1/auth/oauth/${id}?redirectUrl=${redirectUrl}`}
+            className="flex items-center justify-center rounded border border-od-border bg-od-surface px-4 py-3 text-sm text-od-text transition-colors hover:border-od-accent hover:text-od-accent"
+          >
+            {label}
+          </a>
+        ))}
+      </div>
+
+      <Link to="/" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">
+        ← Retour
+      </Link>
+    </div>
+  );
+}