feat: login email/password + proxy POST /api/auth/login → SuperOAuth

- auth.routes : POST /api/auth/login proxie vers SuperOAuth, pose httpOnly cookie
- Factorisation upsertUser() partagé avec /session
- LoginPage : form email/password + séparateur + boutons OAuth provider

frontend/src/pages/LoginPage.tsx

@@ -1,4 +1,6 @@
-import { Link } from 'react-router-dom';
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { apiFetch } from '../lib/api';
 
 const PROVIDERS = [
   { id: 'discord', label: 'Discord' },
@@ -8,27 +10,90 @@ const PROVIDERS = [
 ] as const;
 
 export default function LoginPage() {
+  const navigate = useNavigate();
   const base = import.meta.env.VITE_SUPEROAUTH_URL;
   const redirectUrl = encodeURIComponent(window.location.origin + '/callback');
 
+  const [email, setEmail]       = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading]   = useState(false);
+  const [error, setError]       = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email || !password || loading) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await apiFetch('/auth/login', {
+        method: 'POST',
+        body: JSON.stringify({ email, password }),
+      });
+      navigate('/', { replace: true });
+    } catch {
+      setError('Email ou mot de passe incorrect.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
   return (
-    <div className="flex flex-col items-center gap-8 pt-20">
+    <div className="flex flex-col items-center gap-8 pt-16">
       <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"
+      <div className="w-full max-w-xs flex flex-col gap-6">
+
+        {/* Email / password */}
+        <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Email"
+            required
+            className="rounded border border-od-border bg-od-surface px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+          />
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Mot de passe"
+            required
+            className="rounded border border-od-border bg-od-surface px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+          />
+          {error && <p className="text-xs text-od-crit">{error}</p>}
+          <button
+            type="submit"
+            disabled={loading}
+            className="rounded border border-od-accent px-4 py-2 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
           >
-            {label}
-          </a>
-        ))}
+            {loading ? '…' : 'Connexion'}
+          </button>
+        </form>
+
+        {/* Séparateur */}
+        <div className="flex items-center gap-3">
+          <div className="flex-1 border-t border-od-border" />
+          <span className="font-mono text-xs text-od-muted">ou</span>
+          <div className="flex-1 border-t border-od-border" />
+        </div>
+
+        {/* OAuth providers */}
+        <div className="flex flex-col gap-2">
+          {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-2.5 text-sm text-od-muted transition-colors hover:border-od-accent hover:text-od-accent"
+            >
+              {label}
+            </a>
+          ))}
+        </div>
+
       </div>
 
       <Link to="/" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">