feat: PKCE auth + CI/CD deploy

- Frontend: PKCE flow (oauth.ts, AuthCallback code exchange, 401 interceptor)
- Backend: token introspection via SuperOAuth (no more JWT secret)
- User model: superOauthId (unified) replaces oauthId+provider
- Cookies httpOnly session + refresh token
- POST /auth/refresh endpoint
- Gitea CI workflow (vps-runner pattern)
- DB_SYNC env var for initial schema creation

frontend/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1,51 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AuthProvider, useAuth } from './context/AuthContext';
+import { Layout } from './components/Layout';
+import { LoginPage }     from './pages/LoginPage';
+import { AuthCallback }  from './pages/AuthCallback';
+import { DashboardPage } from './pages/DashboardPage';
+import { CombatPage }    from './pages/CombatPage';
+import { InventoryPage } from './pages/InventoryPage';
+import { CraftPage }     from './pages/CraftPage';
+import { ForgePage }     from './pages/ForgePage';
+
+const qc = new QueryClient({ defaultOptions: { queries: { retry: 1, staleTime: 30_000 } } });
+
+function ProtectedLayout({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth();
+  if (loading) return (
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#6b7a99', fontSize: 14 }}>
+      Chargement…
+    </div>
+  );
+  if (!user) return <Navigate to="/login" replace />;
+  return <Layout>{children}</Layout>;
+}
+
+function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/login"         element={<LoginPage />} />
+      <Route path="/auth/callback" element={<AuthCallback />} />
+      <Route path="/dashboard"     element={<ProtectedLayout><DashboardPage /></ProtectedLayout>} />
+      <Route path="/combat"        element={<ProtectedLayout><CombatPage /></ProtectedLayout>} />
+      <Route path="/inventory"     element={<ProtectedLayout><InventoryPage /></ProtectedLayout>} />
+      <Route path="/craft"         element={<ProtectedLayout><CraftPage /></ProtectedLayout>} />
+      <Route path="/forge"         element={<ProtectedLayout><ForgePage /></ProtectedLayout>} />
+      <Route path="*"              element={<Navigate to="/dashboard" replace />} />
+    </Routes>
+  );
+}
+
+export default function App() {
+  return (
+    <QueryClientProvider client={qc}>
+      <AuthProvider>
+        <BrowserRouter>
+          <AppRoutes />
+        </BrowserRouter>
+      </AuthProvider>
+    </QueryClientProvider>
+  );
+}

frontend/src/api/client.ts

@@ -0,0 +1,59 @@
+const BASE = import.meta.env.VITE_API_URL ?? 'http://localhost:4000/api';
+
+let refreshPromise: Promise<boolean> | null = null;
+
+async function tryRefresh(): Promise<boolean> {
+  if (refreshPromise) return refreshPromise;
+  refreshPromise = (async () => {
+    try {
+      const res = await fetch(`${BASE}/auth/refresh`, {
+        method: 'POST',
+        credentials: 'include',
+      });
+      return res.ok;
+    } catch {
+      return false;
+    } finally {
+      refreshPromise = null;
+    }
+  })();
+  return refreshPromise;
+}
+
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json', ...options?.headers },
+    ...options,
+  });
+
+  if (res.status === 401 && path !== '/auth/refresh') {
+    const refreshed = await tryRefresh();
+    if (refreshed) {
+      const retry = await fetch(`${BASE}${path}`, {
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json', ...options?.headers },
+        ...options,
+      });
+      if (retry.ok) {
+        if (retry.status === 204) return undefined as T;
+        return retry.json();
+      }
+    }
+    window.dispatchEvent(new Event('auth:expired'));
+    throw new Error('Session expired');
+  }
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ message: res.statusText }));
+    throw new Error(err.message ?? `HTTP ${res.status}`);
+  }
+  if (res.status === 204) return undefined as T;
+  return res.json();
+}
+
+export const api = {
+  get:  <T>(path: string)                        => request<T>(path),
+  post: <T>(path: string, body?: unknown)        => request<T>(path, { method: 'POST', body: body ? JSON.stringify(body) : undefined }),
+  del:  <T>(path: string)                        => request<T>(path, { method: 'DELETE' }),
+};

frontend/src/api/endpoints.ts

@@ -0,0 +1,54 @@
+import { api } from './client';
+import type {
+  User, Character, Monster, CombatResult, CombatLog,
+  CharacterItem, CharacterMaterial, Recipe, CraftJob, Item,
+} from './types';
+
+// Auth
+export const authApi = {
+  setSession: (token: string, refreshToken?: string) =>
+    api.post<User>('/auth/session', { token, refreshToken }),
+  me:         ()               => api.get<User>('/auth/me'),
+  logout:     ()               => api.post<void>('/auth/logout'),
+};
+
+// Character
+export const characterApi = {
+  create: (name: string, stats: Record<string, number>) =>
+    api.post<Character>('/characters', { name, ...stats }),
+  me:     () => api.get<Character>('/characters/me'),
+};
+
+// Combat
+export const combatApi = {
+  monsters:  ()                                         => api.get<Monster[]>('/monsters'),
+  start:     (monsterId: string, attackType: string)    => api.post<CombatResult>('/combat/start', { monsterId, attackType }),
+  history:   ()                                         => api.get<CombatLog[]>('/combat/history'),
+};
+
+// Items
+export const itemApi = {
+  catalogue: ()           => api.get<Item[]>('/items'),
+  inventory: ()           => api.get<CharacterItem[]>('/items/inventory'),
+  equip:     (id: string) => api.post<void>(`/items/equip/${id}`),
+  unequip:   (slot: 'weapon' | 'armor') => api.post<void>(`/items/unequip/${slot}`),
+};
+
+// Materials
+export const materialApi = {
+  inventory: () => api.get<CharacterMaterial[]>('/materials/inventory'),
+};
+
+// Craft
+export const craftApi = {
+  recipes:  ()            => api.get<Recipe[]>('/craft/recipes'),
+  start:    (recipeId: string) => api.post<CraftJob>('/craft/start', { recipeId }),
+  active:   ()            => api.get<CraftJob | { status: 'none' }>('/craft/active'),
+  collect:  (jobId: string)    => api.post<CharacterItem>(`/craft/collect/${jobId}`),
+};
+
+// Forge
+export const forgeApi = {
+  upgrade: (characterItemId: string) =>
+    api.post<{ success: boolean; newForgeLevel: number; item: CharacterItem }>('/forge/upgrade', { characterItemId }),
+};

frontend/src/api/types.ts

@@ -0,0 +1,126 @@
+export interface User {
+  id: string;
+  username: string;
+  email: string | null;
+  createdAt: string;
+}
+
+export interface Character {
+  id: string;
+  name: string;
+  level: number;
+  xp: number;
+  gold: number;
+  force: number;
+  agilite: number;
+  intelligence: number;
+  chance: number;
+  vitalite: number;
+  hpCurrent: number;
+  hpMax: number;
+  endurance: number;          // calculé à la lecture
+  enduranceMax: number;
+  statPoints: number;
+  createdAt: string;
+}
+
+export interface Monster {
+  id: string;
+  name: string;
+  levelMin: number;
+  levelMax: number;
+  hp: number;
+  attack: number;
+  defense: number;
+  attackType: 'melee' | 'ranged' | 'magic';
+  xpReward: number;
+  goldMin: number;
+  goldMax: number;
+}
+
+export interface CombatRound {
+  round: number;
+  playerDamage: number;
+  playerCrit: boolean;
+  monsterDodged: boolean;
+  monsterDamage: number;
+  playerDodged: boolean;
+  playerHp: number;
+  monsterHp: number;
+  log: string[];
+}
+
+export interface CombatResult {
+  winner: 'player' | 'monster';
+  rounds: CombatRound[];
+  xpGained?: number;
+  goldGained?: number;
+  enduranceCost: number;
+  loot?: { material: Material; quantity: number } | null;
+}
+
+export interface CombatLog {
+  id: string;
+  monsterId: string;
+  monsterName?: string;
+  winner: 'player' | 'monster';
+  xpGained: number;
+  goldGained: number;
+  createdAt: string;
+}
+
+export type Rarity = 'common' | 'rare' | 'epic' | 'legendary';
+
+export interface Item {
+  id: string;
+  name: string;
+  description: string;
+  type: 'weapon' | 'armor';
+  rarity: Rarity;
+  attackBonus: number;
+  defenseBonus: number;
+  forceBonus: number;
+  agiliteBonus: number;
+  intelligenceBonus: number;
+  chanceBonus: number;
+  vitaliteBonus: number;
+}
+
+export interface CharacterItem {
+  id: string;
+  item: Item;
+  forgeLevel: number;
+  equipped: boolean;
+  acquiredAt: string;
+}
+
+export interface Material {
+  id: string;
+  name: string;
+  description: string;
+  rarity: Rarity;
+}
+
+export interface CharacterMaterial {
+  id: string;
+  material: Material;
+  quantity: number;
+}
+
+export interface Recipe {
+  id: string;
+  name: string;
+  resultItem: Item;
+  craftDurationSeconds: number;
+  enduranceCost: number;
+  ingredients: { materialId: string; materialName?: string; quantity: number }[];
+}
+
+export interface CraftJob {
+  id: string;
+  recipe: Recipe;
+  startedAt: string;
+  completedAt: string;
+  collected: boolean;
+  status: 'pending' | 'ready';
+}

frontend/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/src/components/Bar.tsx

@@ -0,0 +1,24 @@
+interface BarProps {
+  value: number;
+  max: number;
+  type: 'hp' | 'end' | 'xp';
+  label?: string;
+  showValues?: boolean;
+}
+
+export function Bar({ value, max, type, label, showValues = true }: BarProps) {
+  const pct = Math.min(100, Math.round((value / Math.max(max, 1)) * 100));
+  return (
+    <div>
+      {(label || showValues) && (
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4, fontSize: 12, color: '#6b7a99' }}>
+          {label && <span>{label}</span>}
+          {showValues && <span>{value} / {max}</span>}
+        </div>
+      )}
+      <div className="bar-track">
+        <div className={`bar-fill-${type}`} style={{ width: `${pct}%` }} />
+      </div>
+    </div>
+  );
+}

frontend/src/components/Layout.tsx

@@ -0,0 +1,90 @@
+import { Link, useLocation } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { Swords, Package, Hammer, User, LogOut, Shield } from 'lucide-react';
+
+const NAV = [
+  { to: '/dashboard', icon: User,    label: 'Personnage' },
+  { to: '/combat',    icon: Swords,  label: 'Combat' },
+  { to: '/inventory', icon: Package, label: 'Inventaire' },
+  { to: '/craft',     icon: Hammer,  label: 'Artisanat' },
+  { to: '/forge',     icon: Shield,  label: 'Forge' },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  const { user, logout } = useAuth();
+  const loc = useLocation();
+
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+      {/* Header */}
+      <header style={{
+        background: '#161b25',
+        borderBottom: '1px solid #2a3448',
+        padding: '0 1.5rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: 52,
+        position: 'sticky',
+        top: 0,
+        zIndex: 10,
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ fontSize: 20 }}>🐸</span>
+          <span style={{ fontWeight: 800, color: '#f4c94e', letterSpacing: '-0.5px' }}>TetaRdPG</span>
+        </div>
+        {user && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <span style={{ fontSize: 13, color: '#6b7a99' }}>{user.username}</span>
+            <button className="btn btn-ghost" style={{ padding: '0.3rem 0.6rem' }} onClick={logout} title="Déconnexion">
+              <LogOut size={14} />
+            </button>
+          </div>
+        )}
+      </header>
+
+      <div style={{ display: 'flex', flex: 1 }}>
+        {/* Sidebar nav */}
+        <nav style={{
+          width: 56,
+          background: '#161b25',
+          borderRight: '1px solid #2a3448',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '1rem 0',
+          gap: 4,
+          position: 'sticky',
+          top: 52,
+          height: 'calc(100vh - 52px)',
+        }}>
+          {NAV.map(({ to, icon: Icon, label }) => {
+            const active = loc.pathname.startsWith(to);
+            return (
+              <Link key={to} to={to} title={label} style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 40,
+                height: 40,
+                borderRadius: 8,
+                color: active ? '#f4c94e' : '#6b7a99',
+                background: active ? '#1e2535' : 'transparent',
+                border: active ? '1px solid #c49c2e' : '1px solid transparent',
+                textDecoration: 'none',
+                transition: 'all 0.15s',
+              }}>
+                <Icon size={18} />
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Main content */}
+        <main style={{ flex: 1, padding: '1.5rem', maxWidth: 900, margin: '0 auto', width: '100%' }}>
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

frontend/src/context/AuthContext.tsx

@@ -0,0 +1,49 @@
+import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
+import { authApi } from '../api/endpoints';
+import type { User } from '../api/types';
+
+interface AuthCtx {
+  user: User | null;
+  loading: boolean;
+  logout: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+const Ctx = createContext<AuthCtx | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = async () => {
+    try {
+      const u = await authApi.me();
+      setUser(u);
+    } catch {
+      setUser(null);
+    }
+  };
+
+  useEffect(() => {
+    refresh().finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    const onExpired = () => setUser(null);
+    window.addEventListener('auth:expired', onExpired);
+    return () => window.removeEventListener('auth:expired', onExpired);
+  }, []);
+
+  const logout = async () => {
+    await authApi.logout();
+    setUser(null);
+  };
+
+  return <Ctx.Provider value={{ user, loading, logout, refresh }}>{children}</Ctx.Provider>;
+}
+
+export function useAuth() {
+  const ctx = useContext(Ctx);
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
+  return ctx;
+}

frontend/src/index.css

@@ -0,0 +1,94 @@
+@import "tailwindcss";
+
+@theme {
+  --color-rpg-bg: #0d0f14;
+  --color-rpg-surface: #161b25;
+  --color-rpg-border: #2a3448;
+  --color-rpg-gold: #f4c94e;
+  --color-rpg-gold-dim: #c49c2e;
+  --color-rpg-red: #e84040;
+  --color-rpg-green: #3ddc84;
+  --color-rpg-blue: #5ba4f5;
+  --color-rpg-purple: #a78bfa;
+  --color-rpg-text: #dce4f0;
+  --color-rpg-muted: #6b7a99;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background-color: #0d0f14;
+  color: #dce4f0;
+  font-family: system-ui, sans-serif;
+  min-height: 100vh;
+}
+
+#root { min-height: 100vh; }
+
+/* Barres */
+.bar-track { background: #1e2535; border-radius: 4px; overflow: hidden; height: 10px; }
+.bar-fill-hp  { background: linear-gradient(90deg, #c0392b, #e84040); height: 100%; transition: width 0.4s ease; }
+.bar-fill-end { background: linear-gradient(90deg, #1d6fa4, #5ba4f5); height: 100%; transition: width 0.4s ease; }
+.bar-fill-xp  { background: linear-gradient(90deg, #7c3aed, #a78bfa); height: 100%; transition: width 0.4s ease; }
+
+/* Cards */
+.card { background: #161b25; border: 1px solid #2a3448; border-radius: 8px; padding: 1rem; }
+.card-gold { border-color: #c49c2e; }
+.card-hover { cursor: pointer; transition: border-color 0.2s; }
+.card-hover:hover { border-color: #f4c94e; }
+
+/* Boutons */
+.btn { font-weight: 600; padding: 0.5rem 1.25rem; border-radius: 6px; border: none; cursor: pointer; transition: opacity 0.2s; font-size: 0.875rem; }
+.btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn-gold { background: linear-gradient(135deg, #c49c2e, #f4c94e); color: #0d0f14; }
+.btn-gold:hover:not(:disabled) { opacity: 0.85; }
+.btn-red { background: linear-gradient(135deg, #c0392b, #e84040); color: #fff; }
+.btn-red:hover:not(:disabled) { opacity: 0.85; }
+.btn-ghost { background: #1e2535; color: #dce4f0; border: 1px solid #2a3448; }
+.btn-ghost:hover:not(:disabled) { background: #2a3448; }
+.btn-blue { background: linear-gradient(135deg, #1d6fa4, #5ba4f5); color: #fff; }
+.btn-blue:hover:not(:disabled) { opacity: 0.85; }
+
+/* Rareté */
+.rarity-common    { color: #9ca3af; }
+.rarity-rare      { color: #5ba4f5; }
+.rarity-epic      { color: #a78bfa; }
+.rarity-legendary { color: #f4c94e; }
+
+/* Badge */
+.badge { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.05em; }
+.badge-green { background: #0d2a1a; color: #3ddc84; border: 1px solid #1a5c35; }
+.badge-red   { background: #2a0d0d; color: #e84040; border: 1px solid #5c1a1a; }
+.badge-gold  { background: #2a1f0d; color: #f4c94e; border: 1px solid #5c420d; }
+.badge-blue  { background: #0d1a2a; color: #5ba4f5; border: 1px solid #1a3f5c; }
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: #0d0f14; }
+::-webkit-scrollbar-thumb { background: #2a3448; border-radius: 3px; }
+
+/* Séparateur */
+.divider { border: none; border-top: 1px solid #2a3448; margin: 1rem 0; }
+
+/* Input */
+.input-rpg {
+  background: #1e2535;
+  border: 1px solid #2a3448;
+  color: #dce4f0;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  width: 100%;
+  outline: none;
+  transition: border-color 0.2s;
+}
+.input-rpg:focus { border-color: #f4c94e; }
+.input-rpg::placeholder { color: #6b7a99; }
+
+/* Combat log */
+.combat-log { background: #0d0f14; border: 1px solid #2a3448; border-radius: 6px; padding: 0.75rem; max-height: 260px; overflow-y: auto; font-size: 0.8rem; font-family: monospace; }
+.log-player { color: #3ddc84; }
+.log-monster { color: #e84040; }
+.log-system  { color: #f4c94e; }
+.log-crit    { color: #a78bfa; font-weight: bold; }

frontend/src/lib/oauth.ts

@@ -0,0 +1,110 @@
+// OAuth 2.0 PKCE client — SuperOAuth consumer for TetaRdPG
+// Adapted from OriginsDigital reference pattern
+
+const OAUTH_URL       = import.meta.env.VITE_OAUTH_URL       || '';
+const OAUTH_CLIENT_ID = import.meta.env.VITE_OAUTH_CLIENT_ID || '';
+
+const SESSION_KEY_VERIFIER = 'trpg_pkce_verifier';
+
+// --- PKCE helpers ---
+
+function base64UrlEncode(buffer: ArrayBuffer): string {
+  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '');
+}
+
+export function generateCodeVerifier(): string {
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  return base64UrlEncode(array.buffer);
+}
+
+export async function generateCodeChallenge(verifier: string): Promise<string> {
+  const data   = new TextEncoder().encode(verifier);
+  const digest = await crypto.subtle.digest('SHA-256', data);
+  return base64UrlEncode(digest);
+}
+
+// --- Auth URL ---
+
+export async function buildAuthUrl(
+  redirectUri: string,
+  provider: string,
+  scope = 'openid profile email',
+  clientId = OAUTH_CLIENT_ID,
+): Promise<{ url: string; verifier: string }> {
+  const verifier  = generateCodeVerifier();
+  const challenge = await generateCodeChallenge(verifier);
+  const state     = base64UrlEncode(crypto.getRandomValues(new Uint8Array(16)).buffer);
+
+  const params = new URLSearchParams({
+    response_type:         'code',
+    client_id:             clientId,
+    redirect_uri:          redirectUri,
+    scope,
+    state,
+    provider,
+    code_challenge:        challenge,
+    code_challenge_method: 'S256',
+  });
+
+  return {
+    url:      `${OAUTH_URL}/oauth/authorize?${params.toString()}`,
+    verifier,
+  };
+}
+
+// --- Token exchange ---
+
+export interface TokenResponse {
+  access_token: string;
+  refresh_token?: string;
+  token_type: string;
+  expires_in: number;
+  scope?: string;
+}
+
+export async function exchangeCode(
+  code: string,
+  verifier: string,
+  redirectUri: string,
+  clientId = OAUTH_CLIENT_ID,
+): Promise<TokenResponse> {
+  const response = await fetch(`${OAUTH_URL}/oauth/token`, {
+    method:  'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: new URLSearchParams({
+      grant_type:    'authorization_code',
+      client_id:     clientId,
+      code,
+      code_verifier: verifier,
+      redirect_uri:  redirectUri,
+    }).toString(),
+  });
+
+  if (!response.ok) {
+    const text = await response.text().catch(() => '');
+    throw new Error(`OAuth token exchange failed (${response.status}): ${text}`);
+  }
+
+  const data = await response.json() as TokenResponse;
+  if (!data.access_token) throw new Error('No access_token in OAuth response');
+
+  return data;
+}
+
+// --- PKCE verifier persistence (avant redirect) ---
+
+export function saveVerifier(verifier: string): void {
+  sessionStorage.setItem(SESSION_KEY_VERIFIER, verifier);
+}
+
+export function loadVerifier(): string | null {
+  return sessionStorage.getItem(SESSION_KEY_VERIFIER);
+}
+
+export function clearVerifier(): void {
+  sessionStorage.removeItem(SESSION_KEY_VERIFIER);
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/pages/AuthCallback.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { exchangeCode, loadVerifier, clearVerifier } from '../lib/oauth';
+import { authApi } from '../api/endpoints';
+import { useAuth } from '../context/AuthContext';
+
+export function AuthCallback() {
+  const navigate = useNavigate();
+  const { refresh } = useAuth();
+  const called = useRef(false);
+  const [status, setStatus] = useState<'loading' | 'error'>('loading');
+  const [errorMsg, setErrorMsg] = useState('');
+
+  useEffect(() => {
+    if (called.current) return;
+    called.current = true;
+
+    const params = new URLSearchParams(window.location.search);
+    const code   = params.get('code');
+    const error  = params.get('error');
+
+    if (error) {
+      setStatus('error');
+      setErrorMsg(error);
+      return;
+    }
+
+    if (!code) {
+      navigate('/login?error=no_code', { replace: true });
+      return;
+    }
+
+    const verifier = loadVerifier();
+    if (!verifier) {
+      navigate('/login?error=no_verifier', { replace: true });
+      return;
+    }
+
+    const redirectUri = `${window.location.origin}/auth/callback`;
+
+    exchangeCode(code, verifier, redirectUri)
+      .then((tokens) => {
+        clearVerifier();
+        return authApi.setSession(tokens.access_token, tokens.refresh_token);
+      })
+      .then(() => refresh())
+      .then(() => navigate('/dashboard', { replace: true }))
+      .catch(() => {
+        clearVerifier();
+        navigate('/login?error=session_failed', { replace: true });
+      });
+  }, [navigate, refresh]);
+
+  if (status === 'error') {
+    return (
+      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{ fontSize: 40, marginBottom: 16 }}>💀</div>
+          <p style={{ color: '#ef4444', fontSize: 14, marginBottom: 8 }}>Erreur d'authentification</p>
+          <p style={{ color: '#6b7a99', fontSize: 12 }}>{errorMsg}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ textAlign: 'center' }}>
+        <div style={{ fontSize: 40, marginBottom: 16 }}>⚔️</div>
+        <p style={{ color: '#6b7a99', fontSize: 14 }}>Connexion en cours…</p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/CombatPage.tsx

@@ -0,0 +1,196 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { combatApi } from '../api/endpoints';
+import type { Monster, CombatResult } from '../api/types';
+import { Swords, Trophy, Skull, Clock } from 'lucide-react';
+
+const ATTACK_TYPES = [
+  { id: 'melee',  label: 'Mêlée',    emoji: '⚔️',  stat: 'Force × 1.5' },
+  { id: 'ranged', label: 'Distance', emoji: '🏹',  stat: 'Agilité × 1.5' },
+  { id: 'magic',  label: 'Magie',    emoji: '✨',  stat: 'Intelligence × 1.5' },
+];
+
+function MonsterCard({ m, selected, onSelect }: { m: Monster; selected: boolean; onSelect: () => void }) {
+  return (
+    <div
+      className={`card card-hover ${selected ? 'card-gold' : ''}`}
+      onClick={onSelect}
+      style={{ cursor: 'pointer', transition: 'all 0.15s' }}
+    >
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
+        <span style={{ fontWeight: 700, fontSize: 14, color: selected ? '#f4c94e' : '#dce4f0' }}>{m.name}</span>
+        <span className="badge badge-red" style={{ fontSize: 10 }}>Niv. {m.levelMin}–{m.levelMax}</span>
+      </div>
+      <div style={{ display: 'flex', gap: 12, fontSize: 12, color: '#6b7a99' }}>
+        <span>❤️ {m.hp}</span>
+        <span>⚔️ {m.attack}</span>
+        <span>🛡️ {m.defense}</span>
+        <span>⭐ {m.xpReward} XP</span>
+        <span>💰 {m.goldMin}–{m.goldMax}</span>
+      </div>
+    </div>
+  );
+}
+
+function CombatLog({ result }: { result: CombatResult }) {
+  const won = result.winner === 'player';
+  return (
+    <div className="card" style={{ marginTop: '1rem' }}>
+      {/* Résultat */}
+      <div style={{ textAlign: 'center', padding: '0.75rem 0', marginBottom: '0.75rem', borderBottom: '1px solid #2a3448' }}>
+        {won
+          ? <div style={{ color: '#3ddc84', fontWeight: 800, fontSize: 18 }}>
+              <Trophy size={20} style={{ display: 'inline', marginRight: 8 }} />
+              Victoire ! +{result.xpGained} XP  +{result.goldGained} or
+            </div>
+          : <div style={{ color: '#e84040', fontWeight: 800, fontSize: 18 }}>
+              <Skull size={20} style={{ display: 'inline', marginRight: 8 }} />
+              Défaite… −50 endurance
+            </div>
+        }
+        {result.loot && (
+          <div style={{ fontSize: 13, color: '#f4c94e', marginTop: 4 }}>
+            🎁 Loot : {result.loot.material.name} ×{result.loot.quantity}
+          </div>
+        )}
+      </div>
+
+      {/* Log de combat */}
+      <p style={{ margin: '0 0 6px', fontSize: 12, fontWeight: 700, color: '#6b7a99' }}>
+        Log — {result.rounds.length} tour{result.rounds.length > 1 ? 's' : ''}
+      </p>
+      <div className="combat-log">
+        {result.rounds.flatMap(r =>
+          r.log.map((line, i) => {
+            const cls = line.includes('frappe') && !line.includes('Monstre') ? 'log-player'
+              : line.includes('Monstre') || line.includes('frappe') ? 'log-monster'
+              : line.includes('CRITIQUE') ? 'log-crit'
+              : 'log-system';
+            return <div key={`${r.round}-${i}`} className={cls}>[T{r.round}] {line}</div>;
+          })
+        )}
+        {won
+          ? <div className="log-system">══ Victoire ══</div>
+          : <div className="log-monster">══ Défaite ══</div>
+        }
+      </div>
+    </div>
+  );
+}
+
+export function CombatPage() {
+  const qc = useQueryClient();
+  const [selectedMonster, setSelectedMonster] = useState<Monster | null>(null);
+  const [attackType, setAttackType] = useState('melee');
+  const [lastResult, setLastResult] = useState<CombatResult | null>(null);
+
+  const { data: monsters, isLoading } = useQuery({
+    queryKey: ['monsters'],
+    queryFn: combatApi.monsters,
+  });
+
+  const { data: history } = useQuery({
+    queryKey: ['combatHistory'],
+    queryFn: combatApi.history,
+  });
+
+  const fight = useMutation({
+    mutationFn: () => combatApi.start(selectedMonster!.id, attackType),
+    onSuccess: (result) => {
+      setLastResult(result);
+      qc.invalidateQueries({ queryKey: ['character'] });
+      qc.invalidateQueries({ queryKey: ['combatHistory'] });
+    },
+  });
+
+  if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement des monstres…</div>;
+
+  return (
+    <div>
+      <h2 style={{ margin: '0 0 1rem', color: '#f4c94e', fontSize: 20 }}>⚔️ Combat</h2>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginBottom: '1rem' }}>
+        {/* Choix monstre */}
+        <div>
+          <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase' }}>
+            Adversaire
+          </p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            {monsters?.map(m => (
+              <MonsterCard
+                key={m.id}
+                m={m}
+                selected={selectedMonster?.id === m.id}
+                onSelect={() => setSelectedMonster(m)}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Panneau droite */}
+        <div>
+          {/* Type d'attaque */}
+          <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase' }}>
+            Type d'attaque
+          </p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: '1rem' }}>
+            {ATTACK_TYPES.map(a => (
+              <div
+                key={a.id}
+                className={`card card-hover ${attackType === a.id ? 'card-gold' : ''}`}
+                onClick={() => setAttackType(a.id)}
+                style={{ display: 'flex', alignItems: 'center', gap: 10 }}
+              >
+                <span style={{ fontSize: 18 }}>{a.emoji}</span>
+                <div>
+                  <div style={{ fontWeight: 700, fontSize: 13, color: attackType === a.id ? '#f4c94e' : '#dce4f0' }}>{a.label}</div>
+                  <div style={{ fontSize: 11, color: '#6b7a99' }}>{a.stat}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Bouton combattre */}
+          <button
+            className="btn btn-red"
+            style={{ width: '100%', fontSize: 15, padding: '0.75rem' }}
+            disabled={!selectedMonster || fight.isPending}
+            onClick={() => fight.mutate()}
+          >
+            {fight.isPending ? (
+              <span><Swords size={14} style={{ display: 'inline', marginRight: 6 }} />Combat…</span>
+            ) : (
+              <span>⚔️ Combattre {selectedMonster ? `— ${selectedMonster.name}` : ''}</span>
+            )}
+          </button>
+
+          {fight.isError && (
+            <p style={{ color: '#e84040', fontSize: 12, marginTop: 8 }}>{(fight.error as Error).message}</p>
+          )}
+
+          {/* Historique récent */}
+          {history && history.length > 0 && (
+            <div style={{ marginTop: '1rem' }}>
+              <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase', display:'flex', alignItems:'center', gap:4 }}>
+                <Clock size={11} /> Historique récent
+              </p>
+              <div className="card" style={{ padding: '0.75rem' }}>
+                {history.slice(0, 5).map(h => (
+                  <div key={h.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '3px 0', borderBottom: '1px solid #1e2535' }}>
+                    <span style={{ color: h.winner === 'player' ? '#3ddc84' : '#e84040' }}>
+                      {h.winner === 'player' ? '✓' : '✗'} {h.monsterName ?? 'Monstre'}
+                    </span>
+                    <span style={{ color: '#6b7a99' }}>+{h.xpGained}xp +{h.goldGained}or</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Résultat du dernier combat */}
+      {lastResult && <CombatLog result={lastResult} />}
+    </div>
+  );
+}

frontend/src/pages/CraftPage.tsx

@@ -0,0 +1,150 @@
+import { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { craftApi, materialApi } from '../api/endpoints';
+import type { Recipe, CraftJob } from '../api/types';
+import { Hammer, Clock, CheckCircle } from 'lucide-react';
+
+function timeLeft(completedAt: string): string {
+  const diff = new Date(completedAt).getTime() - Date.now();
+  if (diff <= 0) return 'Prêt !';
+  const s = Math.ceil(diff / 1000);
+  return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+
+function ActiveCraft({ job, onCollect }: { job: CraftJob; onCollect: () => void }) {
+  const [, tick] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => tick(n => n + 1), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  const ready = job.status === 'ready' || new Date(job.completedAt) <= new Date();
+  return (
+    <div className={`card ${ready ? 'card-gold' : ''}`} style={{ marginBottom: '1rem' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          {ready ? <CheckCircle size={16} color="#3ddc84" /> : <Clock size={16} color="#5ba4f5" />}
+          <div>
+            <span style={{ fontWeight: 700, fontSize: 14 }}>{job.recipe.name}</span>
+            <span style={{ fontSize: 12, color: '#6b7a99', marginLeft: 8 }}>
+              → {job.recipe.resultItem.name}
+            </span>
+          </div>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          {!ready && <span style={{ fontSize: 13, color: '#5ba4f5', fontFamily: 'monospace' }}>{timeLeft(job.completedAt)}</span>}
+          <button
+            className={`btn ${ready ? 'btn-gold' : 'btn-ghost'}`}
+            style={{ fontSize: 12, padding: '0.25rem 0.75rem' }}
+            disabled={!ready}
+            onClick={onCollect}
+          >
+            {ready ? '⚒️ Collecter' : 'En cours…'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RecipeCard({ recipe, onCraft, disabled, materials }: {
+  recipe: Recipe;
+  onCraft: () => void;
+  disabled: boolean;
+  materials: Map<string, number>;
+}) {
+  const canCraft = recipe.ingredients.every(ing => (materials.get(ing.materialId) ?? 0) >= ing.quantity);
+
+  return (
+    <div className={`card ${canCraft ? '' : ''}`} style={{ opacity: canCraft ? 1 : 0.6 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
+        <span style={{ fontWeight: 700, fontSize: 14 }}>{recipe.name}</span>
+        <span style={{ fontSize: 11, color: '#6b7a99' }}>{recipe.craftDurationSeconds}s · {recipe.enduranceCost} end.</span>
+      </div>
+      <div style={{ fontSize: 12, color: '#6b7a99', marginBottom: 8 }}>
+        → <span style={{ color: '#dce4f0' }}>{recipe.resultItem.name}</span>
+      </div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 10 }}>
+        {recipe.ingredients.map(ing => {
+          const have = materials.get(ing.materialId) ?? 0;
+          const ok = have >= ing.quantity;
+          return (
+            <span key={ing.materialId} className={`badge ${ok ? 'badge-green' : 'badge-red'}`}>
+              {ing.materialName ?? '?'} {have}/{ing.quantity}
+            </span>
+          );
+        })}
+      </div>
+      <button
+        className="btn btn-gold"
+        style={{ fontSize: 12, padding: '0.3rem 0.875rem' }}
+        disabled={!canCraft || disabled}
+        onClick={onCraft}
+      >
+        <Hammer size={12} style={{ display: 'inline', marginRight: 4 }} />
+        Craft
+      </button>
+    </div>
+  );
+}
+
+export function CraftPage() {
+  const qc = useQueryClient();
+
+  const { data: recipes } = useQuery({ queryKey: ['recipes'], queryFn: craftApi.recipes });
+  const { data: activeCraft, refetch: refetchActive } = useQuery({ queryKey: ['activeCraft'], queryFn: craftApi.active, refetchInterval: 5000 });
+  const { data: mats } = useQuery({ queryKey: ['materials'], queryFn: materialApi.inventory });
+
+  const materialMap = new Map(mats?.map(cm => [cm.material.id, cm.quantity]) ?? []);
+
+  const startMut = useMutation({
+    mutationFn: (recipeId: string) => craftApi.start(recipeId),
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ['activeCraft'] }); qc.invalidateQueries({ queryKey: ['character'] }); qc.invalidateQueries({ queryKey: ['materials'] }); },
+  });
+
+  const collectMut = useMutation({
+    mutationFn: (jobId: string) => craftApi.collect(jobId),
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ['activeCraft'] }); qc.invalidateQueries({ queryKey: ['inventory'] }); refetchActive(); },
+  });
+
+  const hasActive = activeCraft && 'id' in activeCraft;
+
+  return (
+    <div>
+      <h2 style={{ margin: '0 0 1rem', color: '#f4c94e', fontSize: 20 }}>
+        <Hammer size={18} style={{ display: 'inline', marginRight: 8 }} />Artisanat
+      </h2>
+
+      {hasActive && (
+        <ActiveCraft
+          job={activeCraft as CraftJob}
+          onCollect={() => collectMut.mutate((activeCraft as CraftJob).id)}
+        />
+      )}
+
+      {hasActive && (
+        <div className="card" style={{ marginBottom: '1rem', textAlign: 'center', color: '#6b7a99', fontSize: 13 }}>
+          Un craft est en cours — tu ne peux pas en lancer un autre.
+        </div>
+      )}
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: '0.75rem' }}>
+        {recipes?.map(r => (
+          <RecipeCard
+            key={r.id}
+            recipe={r}
+            onCraft={() => startMut.mutate(r.id)}
+            disabled={hasActive || startMut.isPending}
+            materials={materialMap}
+          />
+        ))}
+      </div>
+
+      {recipes?.length === 0 && (
+        <div className="card" style={{ textAlign: 'center', padding: '2rem', color: '#6b7a99' }}>
+          Aucune recette disponible.
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/DashboardPage.tsx

@@ -0,0 +1,188 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { characterApi } from '../api/endpoints';
+import { Bar } from '../components/Bar';
+import { Zap, Heart, Star, Coins, Sword, Shield } from 'lucide-react';
+
+const STATS = ['force', 'agilite', 'intelligence', 'chance', 'vitalite'] as const;
+const STAT_LABELS: Record<string, string> = {
+  force: 'Force', agilite: 'Agilité', intelligence: 'Intelligence', chance: 'Chance', vitalite: 'Vitalité',
+};
+
+function CreateCharacter() {
+  const qc = useQueryClient();
+  const [name, setName] = useState('');
+  const [pts, setPts] = useState<Record<string, number>>({ force:1, agilite:1, intelligence:1, chance:1, vitalite:1 });
+  const used = Object.values(pts).reduce((a, b) => a + b, 0) - 5;
+  const remaining = 5 - used;
+
+  const mut = useMutation({
+    mutationFn: () => characterApi.create(name, pts),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['character'] }),
+  });
+
+  const adjust = (stat: string, delta: number) => {
+    const next = (pts[stat] ?? 1) + delta;
+    if (next < 1 || next > 10) return;
+    if (delta > 0 && remaining <= 0) return;
+    setPts(p => ({ ...p, [stat]: next }));
+  };
+
+  return (
+    <div style={{ maxWidth: 420, margin: '4rem auto' }}>
+      <div className="card card-gold" style={{ padding: '1.5rem' }}>
+        <h2 style={{ margin: '0 0 4px', color: '#f4c94e', fontSize: 20 }}>Créer ton personnage</h2>
+        <p style={{ margin: '0 0 1.25rem', color: '#6b7a99', fontSize: 13 }}>
+          {remaining > 0 ? `${remaining} point${remaining > 1 ? 's' : ''} à répartir` : 'Tous les points répartis'}
+        </p>
+
+        <input
+          className="input-rpg"
+          placeholder="Nom du personnage"
+          value={name}
+          onChange={e => setName(e.target.value)}
+          style={{ marginBottom: '1rem' }}
+          maxLength={30}
+        />
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: '1.25rem' }}>
+          {STATS.map(s => (
+            <div key={s} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <span style={{ fontSize: 13, width: 110, color: '#dce4f0' }}>{STAT_LABELS[s]}</span>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <button className="btn btn-ghost" style={{ padding: '0.15rem 0.5rem', fontSize: 14 }} onClick={() => adjust(s, -1)}>−</button>
+                <span style={{ width: 20, textAlign: 'center', fontWeight: 700, color: '#f4c94e' }}>{pts[s]}</span>
+                <button className="btn btn-ghost" style={{ padding: '0.15rem 0.5rem', fontSize: 14 }} onClick={() => adjust(s, +1)}>+</button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <button
+          className="btn btn-gold"
+          style={{ width: '100%' }}
+          disabled={!name.trim() || remaining !== 0 || mut.isPending}
+          onClick={() => mut.mutate()}
+        >
+          {mut.isPending ? 'Création…' : 'Commencer l\'aventure ⚔️'}
+        </button>
+
+        {mut.isError && <p style={{ color: '#e84040', fontSize: 12, marginTop: 8 }}>{(mut.error as Error).message}</p>}
+      </div>
+    </div>
+  );
+}
+
+export function DashboardPage() {
+  const { data: char, isLoading, isError } = useQuery({
+    queryKey: ['character'],
+    queryFn: characterApi.me,
+    retry: 1,
+  });
+
+  if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement…</div>;
+  if (isError || !char) return <CreateCharacter />;
+
+  const xpNext = Math.round(100 * Math.pow(char.level, 1.5));
+
+  return (
+    <div>
+      {/* Header perso */}
+      <div className="card card-gold" style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '1rem', padding: '1rem 1.25rem' }}>
+        <div style={{ fontSize: 48 }}>🐸</div>
+        <div style={{ flex: 1 }}>
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
+            <h2 style={{ margin: 0, fontSize: 22, color: '#f4c94e' }}>{char.name}</h2>
+            <span style={{ fontSize: 13, color: '#6b7a99' }}>Niveau {char.level}</span>
+          </div>
+          <div style={{ display: 'flex', gap: 16, marginTop: 6, flexWrap: 'wrap' }}>
+            <span style={{ fontSize: 12, color: '#6b7a99', display: 'flex', alignItems: 'center', gap: 4 }}>
+              <Coins size={12} color="#f4c94e" /> {char.gold} or
+            </span>
+            <span style={{ fontSize: 12, color: '#6b7a99', display: 'flex', alignItems: 'center', gap: 4 }}>
+              <Star size={12} color="#a78bfa" /> {char.xp} / {xpNext} XP
+            </span>
+            {(char as any).statPoints > 0 && (
+              <span className="badge badge-gold">+{(char as any).statPoints} pts à répartir</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+        {/* Barres vitales */}
+        <div className="card">
+          <p style={{ margin: '0 0 0.75rem', fontSize: 13, fontWeight: 700, color: '#9ca3af' }}>État</p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+            <div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+                <span style={{ fontSize: 12, color: '#e84040', display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <Heart size={11} /> PV
+                </span>
+                <span style={{ fontSize: 11, color: '#6b7a99' }}>{char.hpCurrent} / {char.hpMax}</span>
+              </div>
+              <Bar value={char.hpCurrent} max={char.hpMax} type="hp" showValues={false} />
+            </div>
+            <div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+                <span style={{ fontSize: 12, color: '#5ba4f5', display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <Zap size={11} /> Endurance
+                </span>
+                <span style={{ fontSize: 11, color: '#6b7a99' }}>{char.endurance} / {char.enduranceMax}</span>
+              </div>
+              <Bar value={char.endurance} max={char.enduranceMax} type="end" showValues={false} />
+            </div>
+            <div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+                <span style={{ fontSize: 12, color: '#a78bfa', display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <Star size={11} /> XP
+                </span>
+                <span style={{ fontSize: 11, color: '#6b7a99' }}>{char.xp} / {xpNext}</span>
+              </div>
+              <Bar value={char.xp} max={xpNext} type="xp" showValues={false} />
+            </div>
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className="card">
+          <p style={{ margin: '0 0 0.75rem', fontSize: 13, fontWeight: 700, color: '#9ca3af' }}>Statistiques</p>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 12px' }}>
+            {STATS.map(s => (
+              <div key={s} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <span style={{ fontSize: 12, color: '#6b7a99' }}>{STAT_LABELS[s]}</span>
+                <span style={{ fontSize: 13, fontWeight: 700, color: '#dce4f0' }}>{char[s]}</span>
+              </div>
+            ))}
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <span style={{ fontSize: 12, color: '#e84040', display:'flex', alignItems:'center', gap:3 }}><Heart size={10}/> PV max</span>
+              <span style={{ fontSize: 13, fontWeight: 700, color: '#dce4f0' }}>{char.hpMax}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Équipement résumé */}
+        <div className="card" style={{ gridColumn: '1 / -1' }}>
+          <p style={{ margin: '0 0 0.75rem', fontSize: 13, fontWeight: 700, color: '#9ca3af' }}>Combat actuel</p>
+          <div style={{ display: 'flex', gap: 24 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <Sword size={14} color="#f4c94e" />
+              <span style={{ fontSize: 13, color: '#6b7a99' }}>Attaque : </span>
+              <span style={{ fontSize: 14, fontWeight: 700 }}>{Math.floor(char.force * 1.5)}</span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <Shield size={14} color="#5ba4f5" />
+              <span style={{ fontSize: 13, color: '#6b7a99' }}>Critique : </span>
+              <span style={{ fontSize: 14, fontWeight: 700 }}>{(5 + char.chance * 0.2).toFixed(1)}%</span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <Zap size={14} color="#3ddc84" />
+              <span style={{ fontSize: 13, color: '#6b7a99' }}>Esquive : </span>
+              <span style={{ fontSize: 14, fontWeight: 700 }}>{(5 + char.chance * 0.1).toFixed(1)}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/ForgePage.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { itemApi, forgeApi } from '../api/endpoints';
+import type { CharacterItem } from '../api/types';
+import { Shield, CheckCircle, XCircle, AlertTriangle } from 'lucide-react';
+
+const FORGE_RISK = [0, 0, 0, 20, 30, 40];
+const FORGE_LABEL = ['—', '—', 'Garanti', '20% échec', '30% échec', '40% échec'];
+
+export function ForgePage() {
+  const qc = useQueryClient();
+  const [selected, setSelected] = useState<CharacterItem | null>(null);
+  const [lastResult, setLastResult] = useState<{ success: boolean; newLevel: number } | null>(null);
+
+  const { data: inventory, isLoading } = useQuery({
+    queryKey: ['inventory'],
+    queryFn: itemApi.inventory,
+  });
+
+  const forgeMut = useMutation({
+    mutationFn: () => forgeApi.upgrade(selected!.id),
+    onSuccess: (res) => {
+      setLastResult({ success: res.success, newLevel: res.newForgeLevel });
+      qc.invalidateQueries({ queryKey: ['inventory'] });
+      // Refresh selected item from updated inventory
+      setSelected(res.item);
+    },
+  });
+
+  if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement…</div>;
+
+  const forgeable = inventory ?? [];
+  const nextLevel = (selected?.forgeLevel ?? 0) + 1;
+  const risk = FORGE_RISK[nextLevel] ?? 40;
+  const atMax = selected && selected.forgeLevel >= 5;
+
+  return (
+    <div>
+      <h2 style={{ margin: '0 0 1rem', color: '#f4c94e', fontSize: 20 }}>
+        <Shield size={18} style={{ display: 'inline', marginRight: 8 }} />Forge
+      </h2>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+        {/* Sélection item */}
+        <div>
+          <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase' }}>
+            Choisir un équipement
+          </p>
+          {forgeable.length === 0 ? (
+            <div className="card" style={{ color: '#6b7a99', fontSize: 13, textAlign: 'center', padding: '1.5rem' }}>
+              Aucun item dans l'inventaire
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {forgeable.map(ci => (
+                <div
+                  key={ci.id}
+                  className={`card card-hover ${selected?.id === ci.id ? 'card-gold' : ''}`}
+                  onClick={() => { setSelected(ci); setLastResult(null); }}
+                  style={{ display: 'flex', alignItems: 'center', gap: 10 }}
+                >
+                  <span style={{ fontSize: 20 }}>{ci.item.type === 'weapon' ? '⚔️' : '🛡️'}</span>
+                  <div style={{ flex: 1 }}>
+                    <div style={{ fontWeight: 700, fontSize: 13, color: selected?.id === ci.id ? '#f4c94e' : '#dce4f0' }}>
+                      {ci.item.name}
+                    </div>
+                    <div style={{ fontSize: 11, color: '#6b7a99' }}>Niveau forge : {ci.forgeLevel}/5</div>
+                  </div>
+                  {ci.forgeLevel > 0 && (
+                    <span className="badge badge-blue" style={{ fontSize: 9 }}>+{ci.forgeLevel}</span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Panneau forge */}
+        <div>
+          {selected ? (
+            <div className="card card-gold" style={{ padding: '1.25rem' }}>
+              <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
+                <div style={{ fontSize: 40, marginBottom: 4 }}>
+                  {selected.item.type === 'weapon' ? '⚔️' : '🛡️'}
+                </div>
+                <div style={{ fontWeight: 800, fontSize: 16, color: '#f4c94e' }}>{selected.item.name}</div>
+                <div style={{ fontSize: 12, color: '#6b7a99', marginTop: 2 }}>Forge actuelle : +{selected.forgeLevel}</div>
+              </div>
+
+              {!atMax ? (
+                <>
+                  <div className="card" style={{ marginBottom: '1rem', textAlign: 'center' }}>
+                    <div style={{ fontSize: 12, color: '#6b7a99', marginBottom: 4 }}>Prochain niveau : +{nextLevel}</div>
+                    <div style={{
+                      fontSize: 14, fontWeight: 700,
+                      color: risk === 0 ? '#3ddc84' : risk <= 20 ? '#f4c94e' : '#e84040',
+                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4
+                    }}>
+                      {risk === 0
+                        ? <><CheckCircle size={14} /> Succès garanti</>
+                        : <><AlertTriangle size={14} /> {FORGE_LABEL[nextLevel]}</>
+                      }
+                    </div>
+                  </div>
+
+                  <button
+                    className="btn btn-gold"
+                    style={{ width: '100%', fontSize: 14, padding: '0.75rem' }}
+                    disabled={forgeMut.isPending}
+                    onClick={() => forgeMut.mutate()}
+                  >
+                    {forgeMut.isPending ? 'Forge en cours…' : `🔨 Forger → +${nextLevel}`}
+                  </button>
+                </>
+              ) : (
+                <div style={{ textAlign: 'center', color: '#f4c94e', fontSize: 13, padding: '0.5rem' }}>
+                  ✨ Niveau maximum atteint (+5)
+                </div>
+              )}
+
+              {/* Résultat */}
+              {lastResult && (
+                <div style={{ marginTop: '0.75rem', textAlign: 'center' }}>
+                  {lastResult.success
+                    ? <div style={{ color: '#3ddc84', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
+                        <CheckCircle size={16} /> Succès ! Item à +{lastResult.newLevel}
+                      </div>
+                    : <div style={{ color: '#e84040', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
+                        <XCircle size={16} /> Échec — l'item est inchangé
+                      </div>
+                  }
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="card" style={{ textAlign: 'center', padding: '2rem', color: '#6b7a99', fontSize: 13 }}>
+              Sélectionne un équipement à améliorer
+            </div>
+          )}
+
+          {/* Tableau des risques */}
+          <div className="card" style={{ marginTop: '1rem' }}>
+            <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99' }}>Risques par niveau</p>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+              {[1,2,3,4,5].map(n => (
+                <div key={n} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '2px 0' }}>
+                  <span style={{ color: '#9ca3af' }}>Niv. {n}</span>
+                  <span style={{ color: FORGE_RISK[n] === 0 ? '#3ddc84' : FORGE_RISK[n] <= 20 ? '#f4c94e' : '#e84040', fontWeight: 600 }}>
+                    {FORGE_LABEL[n]}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/InventoryPage.tsx

@@ -0,0 +1,147 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { itemApi, materialApi } from '../api/endpoints';
+import type { CharacterItem } from '../api/types';
+import { Package, Sword, Shield } from 'lucide-react';
+
+const RARITY_LABEL: Record<string, string> = {
+  common: 'Commun', rare: 'Rare', epic: 'Épique', legendary: 'Légendaire',
+};
+
+function ItemCard({ ci, onEquip, onUnequip }: { ci: CharacterItem; onEquip: () => void; onUnequip: () => void }) {
+  const { item } = ci;
+  const bonuses = [
+    item.attackBonus   && `+${item.attackBonus} ATK`,
+    item.defenseBonus  && `+${item.defenseBonus} DEF`,
+    item.forceBonus    && `+${item.forceBonus} FOR`,
+    item.agiliteBonus  && `+${item.agiliteBonus} AGI`,
+    item.intelligenceBonus && `+${item.intelligenceBonus} INT`,
+    item.chanceBonus   && `+${item.chanceBonus} CHA`,
+    item.vitaliteBonus && `+${item.vitaliteBonus} VIT`,
+  ].filter(Boolean).join(' · ');
+
+  return (
+    <div className={`card ${ci.equipped ? 'card-gold' : ''}`} style={{ position: 'relative' }}>
+      {ci.equipped && (
+        <span className="badge badge-gold" style={{ position: 'absolute', top: 8, right: 8, fontSize: 9 }}>Équipé</span>
+      )}
+      {ci.forgeLevel > 0 && (
+        <span className="badge badge-blue" style={{ position: 'absolute', top: ci.equipped ? 28 : 8, right: 8, fontSize: 9 }}>
+          +{ci.forgeLevel}
+        </span>
+      )}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+        <span style={{ fontSize: 20 }}>{item.type === 'weapon' ? '⚔️' : '🛡️'}</span>
+        <div>
+          <div style={{ fontWeight: 700, fontSize: 13 }}>{item.name}</div>
+          <div className={`rarity-${item.rarity}`} style={{ fontSize: 11 }}>{RARITY_LABEL[item.rarity]}</div>
+        </div>
+      </div>
+      {bonuses && <div style={{ fontSize: 11, color: '#3ddc84', marginBottom: 8 }}>{bonuses}</div>}
+      <div style={{ display: 'flex', gap: 6 }}>
+        {!ci.equipped
+          ? <button className="btn btn-ghost" style={{ fontSize: 11, padding: '0.2rem 0.6rem' }} onClick={onEquip}>Équiper</button>
+          : <button className="btn btn-ghost" style={{ fontSize: 11, padding: '0.2rem 0.6rem' }} onClick={onUnequip}>Déséquiper</button>
+        }
+      </div>
+    </div>
+  );
+}
+
+export function InventoryPage() {
+  const qc = useQueryClient();
+
+  const { data: inventory, isLoading: loadInv } = useQuery({
+    queryKey: ['inventory'],
+    queryFn: itemApi.inventory,
+  });
+
+  const { data: materials, isLoading: loadMat } = useQuery({
+    queryKey: ['materials'],
+    queryFn: materialApi.inventory,
+  });
+
+  const equipMut = useMutation({
+    mutationFn: (id: string) => itemApi.equip(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['inventory'] }),
+  });
+
+  const unequipMut = useMutation({
+    mutationFn: (slot: 'weapon' | 'armor') => itemApi.unequip(slot),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['inventory'] }),
+  });
+
+  if (loadInv || loadMat) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement…</div>;
+
+  const weapons = inventory?.filter(ci => ci.item.type === 'weapon') ?? [];
+  const armors  = inventory?.filter(ci => ci.item.type === 'armor')  ?? [];
+
+  return (
+    <div>
+      <h2 style={{ margin: '0 0 1rem', color: '#f4c94e', fontSize: 20 }}>
+        <Package size={18} style={{ display: 'inline', marginRight: 8 }} />Inventaire
+      </h2>
+
+      {inventory?.length === 0 && (
+        <div className="card" style={{ textAlign: 'center', padding: '2rem', color: '#6b7a99' }}>
+          Inventaire vide — gagne des combats pour lootter des matériaux et crafter des équipements !
+        </div>
+      )}
+
+      {/* Armes */}
+      {weapons.length > 0 && (
+        <div style={{ marginBottom: '1.25rem' }}>
+          <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase', display:'flex', alignItems:'center', gap:4 }}>
+            <Sword size={11} /> Armes ({weapons.length})
+          </p>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: '0.75rem' }}>
+            {weapons.map(ci => (
+              <ItemCard
+                key={ci.id} ci={ci}
+                onEquip={() => equipMut.mutate(ci.id)}
+                onUnequip={() => unequipMut.mutate('weapon')}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Armures */}
+      {armors.length > 0 && (
+        <div style={{ marginBottom: '1.25rem' }}>
+          <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase', display:'flex', alignItems:'center', gap:4 }}>
+            <Shield size={11} /> Armures ({armors.length})
+          </p>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: '0.75rem' }}>
+            {armors.map(ci => (
+              <ItemCard
+                key={ci.id} ci={ci}
+                onEquip={() => equipMut.mutate(ci.id)}
+                onUnequip={() => unequipMut.mutate('armor')}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Matériaux */}
+      {materials && materials.length > 0 && (
+        <div>
+          <p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase' }}>
+            🌿 Matériaux
+          </p>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: '0.5rem' }}>
+            {materials.map(cm => (
+              <div key={cm.id} className="card" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0.625rem' }}>
+                <span style={{ fontSize: 18 }}>🌿</span>
+                <div>
+                  <div style={{ fontSize: 13, fontWeight: 600 }}>{cm.material.name}</div>
+                  <div className={`rarity-${cm.material.rarity}`} style={{ fontSize: 11 }}>×{cm.quantity}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,76 @@
+import { buildAuthUrl, saveVerifier } from '../lib/oauth';
+
+const PROVIDERS = [
+  { id: 'discord', label: 'Discord',  color: '#5865F2', emoji: '🎮' },
+  { id: 'github',  label: 'GitHub',   color: '#24292e', emoji: '🐙' },
+  { id: 'google',  label: 'Google',   color: '#ea4335', emoji: '🌐' },
+];
+
+export function LoginPage() {
+  const login = async (provider: string) => {
+    const redirectUri = `${window.location.origin}/auth/callback`;
+    const { url, verifier } = await buildAuthUrl(redirectUri, provider);
+    saveVerifier(verifier);
+    window.location.href = url;
+  };
+
+  return (
+    <div style={{
+      minHeight: '100vh',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'radial-gradient(ellipse at 50% 0%, #1a1f2e 0%, #0d0f14 60%)',
+    }}>
+      <div style={{ textAlign: 'center', maxWidth: 380, width: '100%', padding: '0 1rem' }}>
+        {/* Logo */}
+        <div style={{ marginBottom: 32 }}>
+          <div style={{ fontSize: 64, marginBottom: 8 }}>🐸</div>
+          <h1 style={{ margin: 0, fontSize: 36, fontWeight: 900, color: '#f4c94e', letterSpacing: '-1px' }}>TetaRdPG</h1>
+          <p style={{ margin: '8px 0 0', color: '#6b7a99', fontSize: 14 }}>
+            RPG communautaire asynchrone
+          </p>
+        </div>
+
+        {/* Card login */}
+        <div className="card" style={{ padding: '1.5rem' }}>
+          <p style={{ margin: '0 0 1.25rem', color: '#9ca3af', fontSize: 13 }}>
+            Connecte-toi pour commencer ton aventure
+          </p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+            {PROVIDERS.map(p => (
+              <button
+                key={p.id}
+                onClick={() => login(p.id)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 10,
+                  padding: '0.625rem 1rem',
+                  background: '#1e2535',
+                  border: '1px solid #2a3448',
+                  borderRadius: 8,
+                  color: '#dce4f0',
+                  cursor: 'pointer',
+                  fontSize: 14,
+                  fontWeight: 600,
+                  transition: 'border-color 0.2s',
+                  width: '100%',
+                }}
+                onMouseEnter={e => (e.currentTarget.style.borderColor = '#f4c94e')}
+                onMouseLeave={e => (e.currentTarget.style.borderColor = '#2a3448')}
+              >
+                <span style={{ fontSize: 18 }}>{p.emoji}</span>
+                <span>Continuer avec {p.label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <p style={{ marginTop: 20, fontSize: 11, color: '#3a4558' }}>
+          En te connectant, tu acceptes les règles de la taverne du Têtard Prophétique.
+        </p>
+      </div>
+    </div>
+  );
+}