diff --git a/app/components/AuthModal.tsx b/app/components/AuthModal.tsx
index 0865562..c941215 100644
--- a/app/components/AuthModal.tsx
+++ b/app/components/AuthModal.tsx
@@ -17,7 +17,6 @@ export function AuthModal({ onClose, onSuccess }: { onClose: () => void; onSucce
     e.preventDefault();
     setError(null);
     setLoading(true);
-
     try {
       if (mode === "register") {
         const res = await fetch("/api/register", {
@@ -28,11 +27,7 @@ export function AuthModal({ onClose, onSuccess }: { onClose: () => void; onSucce
         const data = await res.json() as { error?: string };
         if (!res.ok) { setError(data.error ?? "Erreur"); return; }
       }
-
-      const result = await signIn("credentials", {
-        email, password, redirect: false,
-      });
-
+      const result = await signIn("credentials", { email, password, redirect: false });
       if (result?.error) { setError("Email ou mot de passe incorrect"); return; }
       onSuccess();
     } finally {
@@ -40,62 +35,40 @@ export function AuthModal({ onClose, onSuccess }: { onClose: () => void; onSucce
     }
   }
 
+  const inputCls = "w-full min-h-11 px-3.5 bg-[#0f0f0f] border-[1.5px] border-[#2e2e2e] rounded-xl text-[#f0f0f0] text-sm outline-none focus:border-[#7c3aed]";
+
   return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="modal-box" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-tabs">
-          <button
-            className={`modal-tab ${mode === "login" ? "active" : ""}`}
-            onClick={() => { setMode("login"); setError(null); }}
-          >
-            Connexion
-          </button>
-          <button
-            className={`modal-tab ${mode === "register" ? "active" : ""}`}
-            onClick={() => { setMode("register"); setError(null); }}
-          >
-            Inscription
-          </button>
+    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-1000 p-4" onClick={onClose}>
+      <div className="relative bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-8 w-full max-w-96 animate-fade-in" onClick={(e) => e.stopPropagation()}>
+        <button className="absolute top-3 right-3.5 text-[#888] hover:text-[#f0f0f0] text-lg leading-none px-1.5 py-1 cursor-pointer bg-transparent border-none" onClick={onClose} aria-label="Fermer">✕</button>
+
+        <div className="flex border-b border-[#2e2e2e] mb-6">
+          {(["login", "register"] as Mode[]).map((m) => (
+            <button
+              key={m}
+              className={`flex-1 text-sm font-semibold py-2.5 border-b-2 -mb-px cursor-pointer bg-transparent transition-colors ${mode === m ? "text-[#7c3aed] border-[#7c3aed]" : "text-[#888] border-transparent hover:text-[#f0f0f0]"}`}
+              onClick={() => { setMode(m); setError(null); }}
+            >
+              {m === "login" ? "Connexion" : "Inscription"}
+            </button>
+          ))}
         </div>
 
-        <form className="modal-form" onSubmit={handleSubmit}>
+        <form className="flex flex-col gap-3" onSubmit={handleSubmit}>
           {mode === "register" && (
-            <input
-              className="input"
-              type="text"
-              placeholder="Pseudo"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              required
-              maxLength={30}
-            />
+            <input className={inputCls} type="text" placeholder="Pseudo" value={name} onChange={(e) => setName(e.target.value)} required maxLength={30} />
           )}
-          <input
-            className="input"
-            type="email"
-            placeholder="Email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            required
-          />
-          <input
-            className="input"
-            type="password"
-            placeholder="Mot de passe"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
-            minLength={6}
-          />
+          <input className={inputCls} type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+          <input className={inputCls} type="password" placeholder="Mot de passe" value={password} onChange={(e) => setPassword(e.target.value)} required minLength={6} />
 
-          {error && <div className="error-banner" style={{ marginBottom: 0 }}>{error}</div>}
+          {error && (
+            <div className="bg-red-950/40 border border-red-600 text-red-300 px-3 py-2 rounded-xl text-sm">{error}</div>
+          )}
 
-          <button className="btn btn-primary" type="submit" disabled={loading}>
+          <button className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer mt-1" type="submit" disabled={loading}>
             {loading ? "Chargement..." : mode === "login" ? "Se connecter" : "Créer un compte"}
           </button>
         </form>
-
-        <button className="modal-close" onClick={onClose} aria-label="Fermer">✕</button>
       </div>
     </div>
   );
diff --git a/app/components/Breadcrumbs.tsx b/app/components/Breadcrumbs.tsx
index d4e235f..92c23ac 100644
--- a/app/components/Breadcrumbs.tsx
+++ b/app/components/Breadcrumbs.tsx
@@ -4,11 +4,11 @@ import { useRef } from "react";
 
 export function Breadcrumbs({ history, endRef }: { history: string[]; endRef: React.RefObject<HTMLDivElement | null> }) {
   return (
-    <div className="breadcrumb-trail">
+    <div className="flex items-center flex-nowrap overflow-x-auto gap-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
       {history.map((title, i) => (
-        <span key={i} className="breadcrumb-item">
-          {i > 0 && <span className="breadcrumb-sep">›</span>}
-          <span className={i === history.length - 1 ? "breadcrumb-current" : "breadcrumb-past"}>
+        <span key={i} className="flex items-center whitespace-nowrap shrink-0">
+          {i > 0 && <span className="text-[#888] text-xs px-1">›</span>}
+          <span className={i === history.length - 1 ? "text-xs font-bold text-[#f0f0f0]" : "text-xs text-[#888]"}>
             {title}
           </span>
         </span>
diff --git a/app/components/GameScreen.tsx b/app/components/GameScreen.tsx
index 835ad7c..a235729 100644
--- a/app/components/GameScreen.tsx
+++ b/app/components/GameScreen.tsx
@@ -36,100 +36,109 @@ export function GameScreen({
     breadcrumbEndRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" });
   }, [history]);
 
-  if (room.phase === "results") {
-    return (
-      <div className="screen results-screen">
-        <div className="results-content">
-          <div className="results-winner-banner">
-            {winner ? (
-              <>
-                <div className="results-winner-emoji">Victoire !</div>
-                <div className="results-winner-name">{winner.name} a gagne la manche !</div>
-              </>
-            ) : (
-              <div className="results-winner-name">Manche terminee !</div>
-            )}
-          </div>
-          <div className="results-path">
-            <span className="path-start">{room.startArticle}</span>
-            <span className="path-arrow"> → </span>
-            <span className="path-end">{room.targetArticle}</span>
-          </div>
-          <div className="results-scoreboard">
-            <h3 className="results-title">Classement</h3>
-            <ul className="scoreboard-list">
-              {sortedPlayers.map((p, i) => (
-                <li key={p.id} className={`scoreboard-item ${p.id === playerId ? "me" : ""}`}>
-                  <span className="scoreboard-rank">#{i + 1}</span>
-                  <span className="scoreboard-name">{p.name}</span>
-                  {p.hasWon && <span className="player-badge winner">Gagnant</span>}
-                  <span className="scoreboard-score">{p.score} pts</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-          {isHost ? (
-            <div className="results-actions">
-              <button className="btn btn-primary" onClick={onNextRound}>Manche suivante</button>
-              <button className="btn btn-ghost" onClick={onResetGame}>Nouvelle partie</button>
-            </div>
+  // Results
+  if (room.phase === "results") return (
+    <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex items-center justify-center px-4 py-6">
+      <div className="w-full max-w-105 flex flex-col gap-6">
+        <div className="text-center bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-6">
+          {winner ? (
+            <>
+              <div className="text-5xl mb-2">🏆</div>
+              <div className="text-lg font-bold">{winner.name} a gagné la manche !</div>
+            </>
           ) : (
-            <p className="lobby-waiting">En attente de l&apos;hote...</p>
+            <div className="text-lg font-bold">Manche terminée !</div>
           )}
         </div>
-      </div>
-    );
-  }
-
-  if (room.phase === "countdown") {
-    return (
-      <div className="screen countdown-screen">
-        <div className="countdown-content">
-          <div className="countdown-path">
-            <div className="countdown-article">
-              <span className="countdown-label">Depart</span>
-              <span className="countdown-article-name">{room.startArticle}</span>
-            </div>
-            <div className="countdown-arrow">→</div>
-            <div className="countdown-article">
-              <span className="countdown-label">Cible</span>
-              <span className="countdown-article-name highlight">{room.targetArticle}</span>
-            </div>
+        <div className="text-center text-sm text-[#888]">
+          <span className="text-[#f0f0f0]">{room.startArticle}</span>
+          <span className="mx-2">→</span>
+          <span className="text-[#7c3aed] font-bold">{room.targetArticle}</span>
+        </div>
+        <div>
+          <h3 className="text-xs font-bold text-[#888] uppercase tracking-wider mb-3">Classement</h3>
+          <ul className="flex flex-col gap-2">
+            {sortedPlayers.map((p, i) => (
+              <li key={p.id} className={`flex items-center gap-2.5 bg-[#1a1a1a] rounded-xl px-3.5 py-2.5 min-h-11 border ${p.id === playerId ? "border-[#7c3aed]" : "border-[#2e2e2e]"}`}>
+                <span className="text-sm font-bold text-[#888] min-w-7">#{i + 1}</span>
+                <span className="flex-1 font-semibold text-sm">{p.name}</span>
+                {p.hasWon && <span className="text-[11px] font-bold px-2 py-0.5 rounded-full bg-green-900/40 text-green-300 uppercase tracking-wide">Gagnant</span>}
+                <span className="font-bold text-[#7c3aed] text-sm">{p.score} pts</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {isHost ? (
+          <div className="flex flex-col gap-2.5">
+            <button className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] cursor-pointer" onClick={onNextRound}>
+              Manche suivante
+            </button>
+            <button className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onResetGame}>
+              Nouvelle partie
+            </button>
           </div>
-          <div className="countdown-number">
-            {countdown !== null && countdown > 0 ? countdown : "Partez !"}
+        ) : (
+          <p className="text-sm text-[#888] text-center animate-pulse-slow">En attente de l&apos;hôte...</p>
+        )}
+      </div>
+    </div>
+  );
+
+  // Countdown
+  if (room.phase === "countdown") return (
+    <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] flex items-center justify-center">
+      <div className="text-center px-6">
+        <div className="flex items-center justify-center gap-10 flex-wrap mb-12">
+          <div className="flex flex-col items-center gap-1 max-w-48">
+            <span className="text-[11px] text-[#888] uppercase tracking-wider">Départ</span>
+            <span className="text-lg font-bold text-center">{room.startArticle}</span>
+          </div>
+          <span className="text-2xl text-[#888]">→</span>
+          <div className="flex flex-col items-center gap-1 max-w-48">
+            <span className="text-[11px] text-[#888] uppercase tracking-wider">Cible</span>
+            <span className="text-xl font-bold text-[#7c3aed] text-center">{room.targetArticle}</span>
           </div>
         </div>
+        <div className="text-[clamp(80px,20vw,140px)] font-black leading-none text-[#7c3aed] animate-count-pop">
+          {countdown !== null && countdown > 0 ? countdown : "Partez !"}
+        </div>
       </div>
-    );
-  }
+    </div>
+  );
 
+  // Playing
   return (
-    <div className="screen game-screen">
-      <div className="game-topbar">
-        <div className="topbar-trail-zone">
-          <div className="topbar-target-row">
-            <span className="topbar-label">CIBLE</span>
-            <span className="topbar-target-name">{room.targetArticle}</span>
+    <div className="min-h-dvh w-full bg-[#0f0f0f] flex flex-col">
+      {/* Topbar */}
+      <div className="sticky top-0 z-50 bg-[#0f0f0f]/97 backdrop-blur-sm border-b border-[#2e2e2e] flex items-center gap-3 px-3.5 py-2">
+        <div className="flex-1 min-w-0 flex flex-col gap-1">
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] font-bold uppercase tracking-wider text-[#888] shrink-0">Cible</span>
+            <span className="text-xs font-bold text-[#7c3aed] truncate">{room.targetArticle}</span>
           </div>
           <Breadcrumbs history={history} endRef={breadcrumbEndRef} />
         </div>
-        <div className="topbar-stats">
-          <span className="stat">{elapsed}</span>
-          <span className="stat">{clicks} clics</span>
-          <span className="stat">{myPlayer?.score ?? 0} pts</span>
+        <div className="flex gap-3 shrink-0 text-xs font-bold text-[#888] tabular-nums">
+          <span>{elapsed}</span>
+          <span>{clicks} clics</span>
+          <span>{myPlayer?.score ?? 0} pts</span>
         </div>
       </div>
 
-      <div className="game-layout">
-        <div className="game-main">
+      {/* Content + sidebar */}
+      <div className="flex flex-1 min-h-0">
+        <div className="flex-1 overflow-y-auto bg-white">
           {loading && (
-            <div className="article-loading"><div className="loading-spinner" /> Chargement...</div>
+            <div className="flex items-center gap-3 py-10 px-4 text-[#888]">
+              <div className="spinner" /> Chargement...
+            </div>
           )}
           {loadError && (
-            <div className="article-error">
-              <p>{loadError}</p>
-              <button className="btn btn-secondary" onClick={onRetry}>Reessayer</button>
+            <div className="flex flex-col items-center gap-4 py-10 px-4 text-center">
+              <p className="text-[#888]">{loadError}</p>
+              <button className="min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#2563eb] text-white hover:bg-[#1d4ed8] cursor-pointer" onClick={onRetry}>
+                Réessayer
+              </button>
             </div>
           )}
           {!loading && !loadError && html && (
@@ -140,14 +149,15 @@ export function GameScreen({
           )}
         </div>
 
-        <aside className="game-sidebar">
-          <h4 className="sidebar-title">Joueurs</h4>
-          <ul className="sidebar-players">
+        {/* Sidebar joueurs */}
+        <aside className="hidden sm:flex w-40 shrink-0 bg-[#1a1a1a] border-l border-[#2e2e2e] flex-col px-3 py-4 overflow-y-auto gap-3">
+          <h4 className="text-[11px] font-bold uppercase tracking-wider text-[#888]">Joueurs</h4>
+          <ul className="flex flex-col gap-2.5">
             {sortedPlayers.map((p) => (
-              <li key={p.id} className={`sidebar-player ${p.id === playerId ? "me" : ""}`}>
-                <span className="sidebar-player-name">{p.name}</span>
-                <span className="sidebar-player-score">{p.score} pts</span>
-                {p.hasWon && <span className="sidebar-player-won">Gagne !</span>}
+              <li key={p.id} className="flex flex-col gap-0.5">
+                <span className={`text-xs font-semibold truncate ${p.id === playerId ? "text-[#7c3aed]" : "text-[#f0f0f0]"}`}>{p.name}</span>
+                <span className="text-xs text-[#888]">{p.score} pts</span>
+                {p.hasWon && <span className="text-[11px] text-green-400 font-bold">Gagné !</span>}
               </li>
             ))}
           </ul>
diff --git a/app/components/HomeScreen.tsx b/app/components/HomeScreen.tsx
index 7122d79..796ae08 100644
--- a/app/components/HomeScreen.tsx
+++ b/app/components/HomeScreen.tsx
@@ -26,40 +26,54 @@ export function HomeScreen({
   session, onShowAuth, onShowProfile, onShowLeaderboard,
 }: HomeScreenProps) {
   return (
-    <div className="screen home-screen">
-      <div className="home-topbar">
-        <button className="btn btn-ghost btn-sm" onClick={onShowLeaderboard}>
+    <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col items-center justify-center px-4 py-6 gap-8">
+      {/* Topbar */}
+      <div className="absolute top-4 right-4 flex items-center gap-2">
+        <button
+          className="text-sm font-semibold px-3 py-1.5 rounded-lg bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer"
+          onClick={onShowLeaderboard}
+        >
           🏆 Classement
         </button>
         {session?.user ? (
-          <button className="btn-account" onClick={onShowProfile}>
-            <span className="account-avatar">{session.user.name?.[0]?.toUpperCase() ?? "?"}</span>
-            <span className="account-name">{session.user.name}</span>
+          <button
+            className="flex items-center gap-2 bg-[#242424] border border-[#2e2e2e] rounded-full pl-1.5 pr-3 py-1.5 cursor-pointer hover:bg-[#1a1a1a] text-sm font-medium"
+            onClick={onShowProfile}
+          >
+            <span className="w-7 h-7 rounded-full bg-[#7c3aed] text-white flex items-center justify-center text-xs font-bold">
+              {session.user.name?.[0]?.toUpperCase() ?? "?"}
+            </span>
+            <span className="max-w-[120px] truncate">{session.user.name}</span>
           </button>
         ) : (
-          <button className="btn btn-ghost btn-sm" onClick={onShowAuth}>
+          <button
+            className="text-sm font-semibold px-3 py-1.5 rounded-lg bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer"
+            onClick={onShowAuth}
+          >
             Connexion / Inscription
           </button>
         )}
       </div>
 
-      <div className="home-hero">
-        <Image src="/wikirush.png" alt="WikiRush" width={320} height={320} className="home-logo-img" priority />
-        <p className="home-subtitle">
+      {/* Hero */}
+      <div className="text-center">
+        <Image src="/wikirush.png" alt="WikiRush" width={320} height={320} className="w-[clamp(200px,55vw,320px)] h-auto mx-auto mix-blend-screen" priority />
+        <p className="mt-3 text-[#888] text-sm max-w-[360px] mx-auto">
           Navigue entre les articles Wikipedia pour atteindre la cible en premier !
         </p>
       </div>
 
-      {error && (
-        <div className="error-banner">
-          {error}
-          <button onClick={() => setError(null)} className="error-close">x</button>
-        </div>
-      )}
+      {/* Form */}
+      <div className="w-full max-w-[400px] flex flex-col gap-4">
+        {error && (
+          <div className="flex items-center justify-between gap-3 bg-red-950/40 border border-red-600 text-red-300 px-3 py-2.5 rounded-xl text-sm">
+            {error}
+            <button onClick={() => setError(null)} className="text-base px-1.5 py-0.5 rounded hover:bg-white/10 cursor-pointer">✕</button>
+          </div>
+        )}
 
-      <div className="home-form">
         <input
-          className="input"
+          className="w-full min-h-[44px] px-3.5 bg-[#1a1a1a] border-[1.5px] border-[#2e2e2e] rounded-xl text-[#f0f0f0] text-sm outline-none focus:border-[#7c3aed]"
           type="text"
           placeholder="Ton pseudo"
           value={playerName}
@@ -68,33 +82,48 @@ export function HomeScreen({
           onKeyDown={(e) => e.key === "Enter" && onCreateRoom()}
         />
 
-        <div className="home-actions">
-          <div className="home-section">
-            <h3>Multijoueur</h3>
-            <button className="btn btn-primary" onClick={onCreateRoom} disabled={loading}>
-              {loading ? "Creation..." : "Creer une partie"}
+        <div className="flex flex-col gap-4">
+          {/* Multijoueur */}
+          <div className="bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-5 flex flex-col gap-3">
+            <h3 className="text-xs font-bold text-[#888] uppercase tracking-wider">Multijoueur</h3>
+            <button
+              className="w-full min-h-[44px] px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer"
+              onClick={onCreateRoom} disabled={loading}
+            >
+              {loading ? "Création..." : "Créer une partie"}
             </button>
-            <div className="join-row">
+            <div className="flex gap-2.5 items-center">
               <input
-                className="input input-code"
+                className="flex-1 min-h-[44px] px-3.5 bg-[#0f0f0f] border-[1.5px] border-[#2e2e2e] rounded-xl text-[#f0f0f0] font-mono text-lg tracking-widest uppercase outline-none focus:border-[#7c3aed]"
                 type="text"
-                placeholder="Code (ex: WIKI)"
+                placeholder="CODE"
                 value={joinCode}
                 onChange={(e) => setJoinCode(e.target.value.toUpperCase().slice(0, 4))}
                 maxLength={4}
                 onKeyDown={(e) => e.key === "Enter" && onJoinRoom()}
               />
-              <button className="btn btn-secondary" onClick={onJoinRoom} disabled={loading}>
+              <button
+                className="min-h-[44px] px-5 rounded-xl text-sm font-semibold bg-[#2563eb] text-white hover:bg-[#1d4ed8] disabled:opacity-50 cursor-pointer flex-shrink-0"
+                onClick={onJoinRoom} disabled={loading}
+              >
                 Rejoindre
               </button>
             </div>
           </div>
 
-          <div className="home-divider">ou</div>
+          {/* Divider */}
+          <div className="relative text-center text-[#888] text-xs">
+            <span className="relative z-10 px-3 bg-[#0f0f0f]">ou</span>
+            <div className="absolute inset-x-0 top-1/2 h-px bg-[#2e2e2e] -z-0" />
+          </div>
 
-          <div className="home-section">
-            <h3>Solo</h3>
-            <button className="btn btn-ghost" onClick={onSolo}>
+          {/* Solo */}
+          <div className="bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-5 flex flex-col gap-3">
+            <h3 className="text-xs font-bold text-[#888] uppercase tracking-wider">Solo</h3>
+            <button
+              className="w-full min-h-[44px] px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer"
+              onClick={onSolo}
+            >
               Jouer en solo
             </button>
           </div>
diff --git a/app/components/LeaderboardScreen.tsx b/app/components/LeaderboardScreen.tsx
index 80284f6..b850f31 100644
--- a/app/components/LeaderboardScreen.tsx
+++ b/app/components/LeaderboardScreen.tsx
@@ -36,28 +36,34 @@ export function LeaderboardScreen({ onBack }: { onBack: () => void }) {
       .then((data) => { setRows(data); setLoading(false); });
   }, []);
 
-  const sorted = [...rows].sort((a, b) => {
-    if (mode === "solo") return b.soloWins - a.soloWins || b.soloGames - a.soloGames;
-    if (mode === "multi") return b.multiWins - a.multiWins || b.multiGames - a.multiGames;
-    return b.wins - a.wins || b.totalGames - a.totalGames;
-  }).filter((r) => {
-    if (mode === "solo") return r.soloGames > 0;
-    if (mode === "multi") return r.multiGames > 0;
-    return true;
-  });
+  const sorted = [...rows]
+    .filter((r) => {
+      if (mode === "solo") return r.soloGames > 0;
+      if (mode === "multi") return r.multiGames > 0;
+      return true;
+    })
+    .sort((a, b) => {
+      if (mode === "solo") return b.soloWins - a.soloWins || b.soloGames - a.soloGames;
+      if (mode === "multi") return b.multiWins - a.multiWins || b.multiGames - a.multiGames;
+      return b.wins - a.wins || b.totalGames - a.totalGames;
+    });
 
   return (
-    <div className="screen leaderboard-screen">
-      <div className="leaderboard-header">
-        <button className="btn btn-ghost btn-back" onClick={onBack}>Retour</button>
-        <h2 className="leaderboard-title">Classement</h2>
+    <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in max-w-160 mx-auto px-4 py-6 pb-12">
+      {/* Header */}
+      <div className="flex items-center gap-4 mb-6">
+        <button className="min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onBack}>
+          Retour
+        </button>
+        <h2 className="text-2xl font-black">Classement</h2>
       </div>
 
-      <div className="leaderboard-tabs">
+      {/* Tabs */}
+      <div className="flex gap-2 mb-5">
         {(["all", "solo", "multi"] as Mode[]).map((m) => (
           <button
             key={m}
-            className={`leaderboard-tab ${mode === m ? "active" : ""}`}
+            className={`flex-1 py-2 rounded-xl text-xs font-semibold border cursor-pointer transition-colors ${mode === m ? "bg-[#7c3aed] border-[#7c3aed] text-white" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888] hover:text-[#f0f0f0]"}`}
             onClick={() => setMode(m)}
           >
             {m === "all" ? "Global" : m === "solo" ? "Solo" : "Multijoueur"}
@@ -66,27 +72,43 @@ export function LeaderboardScreen({ onBack }: { onBack: () => void }) {
       </div>
 
       {loading ? (
-        <div className="leaderboard-loading"><div className="loading-spinner" /></div>
+        <div className="flex justify-center py-12"><div className="spinner" /></div>
       ) : sorted.length === 0 ? (
-        <p className="leaderboard-empty">Aucune partie jouée pour le moment.</p>
+        <p className="text-[#888] text-center py-12">Aucune partie jouée pour le moment.</p>
       ) : (
-        <div className="leaderboard-list">
+        <div className="flex flex-col gap-2.5">
           {sorted.map((row, i) => {
             const games = mode === "solo" ? row.soloGames : mode === "multi" ? row.multiGames : row.totalGames;
             const wins = mode === "solo" ? row.soloWins : mode === "multi" ? row.multiWins : row.wins;
+            const isTop = i < 3;
 
             return (
-              <div key={row.id} className={`leaderboard-row ${i < 3 ? "top" : ""}`}>
-                <span className="lb-rank">{MEDALS[i] ?? `#${i + 1}`}</span>
-                <span className="lb-name">{row.name}</span>
-                <div className="lb-stats">
-                  <span className="lb-stat"><span className="lb-stat-val">{wins}</span><span className="lb-stat-label">victoires</span></span>
-                  <span className="lb-stat"><span className="lb-stat-val">{games}</span><span className="lb-stat-label">parties</span></span>
+              <div
+                key={row.id}
+                className={`flex items-center gap-3 px-4 py-3.5 rounded-xl border ${isTop ? "border-[#7c3aed] bg-[#7c3aed]/8" : "border-[#2e2e2e] bg-[#1a1a1a]"}`}
+              >
+                <span className="text-xl w-8 text-center shrink-0">{MEDALS[i] ?? `#${i + 1}`}</span>
+                <span className="flex-1 font-bold text-sm truncate">{row.name}</span>
+                <div className="flex gap-4 shrink-0">
+                  <div className="flex flex-col items-center gap-0.5">
+                    <span className="text-sm font-black tabular-nums">{wins}</span>
+                    <span className="text-[9px] font-bold uppercase tracking-wider text-[#888]">victoires</span>
+                  </div>
+                  <div className="flex flex-col items-center gap-0.5">
+                    <span className="text-sm font-black tabular-nums">{games}</span>
+                    <span className="text-[9px] font-bold uppercase tracking-wider text-[#888]">parties</span>
+                  </div>
                   {row.avgClicks != null && (
-                    <span className="lb-stat"><span className="lb-stat-val">{row.avgClicks}</span><span className="lb-stat-label">moy. clics</span></span>
+                    <div className="flex flex-col items-center gap-0.5">
+                      <span className="text-sm font-black tabular-nums">{row.avgClicks}</span>
+                      <span className="text-[9px] font-bold uppercase tracking-wider text-[#888]">moy. clics</span>
+                    </div>
                   )}
                   {row.bestTime != null && (
-                    <span className="lb-stat"><span className="lb-stat-val">{fmt(row.bestTime)}</span><span className="lb-stat-label">meilleur temps</span></span>
+                    <div className="flex flex-col items-center gap-0.5">
+                      <span className="text-sm font-black tabular-nums">{fmt(row.bestTime)}</span>
+                      <span className="text-[9px] font-bold uppercase tracking-wider text-[#888]">meilleur</span>
+                    </div>
                   )}
                 </div>
               </div>
diff --git a/app/components/LobbyScreen.tsx b/app/components/LobbyScreen.tsx
index 3dfba34..36465d1 100644
--- a/app/components/LobbyScreen.tsx
+++ b/app/components/LobbyScreen.tsx
@@ -28,52 +28,82 @@ export function LobbyScreen({
   }
 
   return (
-    <div className="screen lobby-screen">
-      <button className="btn btn-ghost btn-back" onClick={onLeave}>Quitter</button>
+    <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col items-center px-4 py-5 gap-6 max-w-120 mx-auto">
+      <button className="self-start min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onLeave}>
+        Quitter
+      </button>
 
-      <div className="lobby-code-block">
-        <span className="lobby-code-label">Code de la salle</span>
-        <button className="lobby-code-copy" onClick={copyCode} title="Copier le code">
-          <span className="lobby-code">{room.code}</span>
-          <span className="lobby-copy-icon">{copied ? "✓" : "⧉"}</span>
+      {/* Code block */}
+      <div className="w-full text-center bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-6">
+        <span className="block text-xs text-[#888] uppercase tracking-widest mb-2">Code de la salle</span>
+        <button
+          className="flex items-center justify-center gap-2.5 mx-auto px-2 py-1 rounded-lg hover:bg-[#242424] cursor-pointer border-none bg-transparent"
+          onClick={copyCode}
+        >
+          <span className="text-[clamp(42px,12vw,64px)] font-black font-mono tracking-[0.15em] text-[#7c3aed] leading-none">
+            {room.code}
+          </span>
+          <span className={`text-xl leading-none ${copied ? "text-green-400" : "text-[#888]"}`}>
+            {copied ? "✓" : "⧉"}
+          </span>
         </button>
-        <span className="lobby-code-hint">{copied ? "Copié !" : "Clique sur le code pour le copier"}</span>
+        <span className="block text-xs text-[#888] mt-2">
+          {copied ? "Copié !" : "Clique sur le code pour le copier"}
+        </span>
       </div>
 
       {error && (
-        <div className="error-banner">
+        <div className="w-full flex items-center justify-between gap-3 bg-red-950/40 border border-red-600 text-red-300 px-3 py-2.5 rounded-xl text-sm">
           {error}
-          <button onClick={() => setError(null)} className="error-close">x</button>
+          <button onClick={() => setError(null)} className="text-base px-1.5 rounded hover:bg-white/10 cursor-pointer">✕</button>
         </div>
       )}
 
-      <div className="lobby-players">
-        <h3 className="lobby-section-title">Joueurs ({room.players.length}/8)</h3>
-        <ul className="player-list">
+      {/* Players */}
+      <div className="w-full">
+        <h3 className="text-xs font-bold text-[#888] uppercase tracking-wider mb-2">
+          Joueurs ({room.players.length}/8)
+        </h3>
+        <ul className="flex flex-col gap-2">
           {room.players.map((p) => (
-            <li key={p.id} className={`player-item ${p.id === playerId ? "me" : ""}`}>
-              <span className="player-name">{p.name}</span>
-              {p.isHost && <span className="player-badge host">Hote</span>}
-              {p.id === playerId && <span className="player-badge you">Toi</span>}
-              <span className="player-score">{p.score} pts</span>
+            <li
+              key={p.id}
+              className={`flex items-center gap-2 bg-[#1a1a1a] rounded-xl px-3.5 py-2.5 min-h-11 border ${p.id === playerId ? "border-[#7c3aed]" : "border-[#2e2e2e]"}`}
+            >
+              <span className="flex-1 font-semibold text-sm">{p.name}</span>
+              {p.isHost && <span className="text-[11px] font-bold px-2 py-0.5 rounded-full bg-purple-900/40 text-purple-300 uppercase tracking-wide">Hôte</span>}
+              {p.id === playerId && <span className="text-[11px] font-bold px-2 py-0.5 rounded-full bg-blue-900/40 text-blue-300 uppercase tracking-wide">Toi</span>}
+              <span className="text-sm font-bold text-[#7c3aed] min-w-12.5 text-right">{p.score} pts</span>
             </li>
           ))}
         </ul>
       </div>
 
-      {room.round > 0 && <div className="lobby-round-info">Manche {room.round} terminee</div>}
+      {room.round > 0 && (
+        <p className="text-xs text-[#888] text-center">Manche {room.round} terminée</p>
+      )}
 
       {isHost ? (
-        <div className="lobby-host-actions">
-          <button className="btn btn-primary" onClick={onStart} disabled={loading}>
-            {loading ? "Preparation..." : room.round === 0 ? "Demarrer la partie" : "Manche suivante"}
+        <div className="w-full flex flex-col gap-2.5">
+          <button
+            className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer"
+            onClick={onStart} disabled={loading}
+          >
+            {loading ? "Préparation..." : room.round === 0 ? "Démarrer la partie" : "Manche suivante"}
           </button>
           {room.round > 0 && (
-            <button className="btn btn-ghost" onClick={onReset}>Nouvelle partie (reset scores)</button>
+            <button
+              className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer"
+              onClick={onReset}
+            >
+              Nouvelle partie (reset scores)
+            </button>
           )}
         </div>
       ) : (
-        <p className="lobby-waiting">En attente que l&apos;hote demarre...</p>
+        <p className="text-sm text-[#888] text-center animate-pulse-slow">
+          En attente que l&apos;hôte démarre...
+        </p>
       )}
     </div>
   );
diff --git a/app/components/ProfileScreen.tsx b/app/components/ProfileScreen.tsx
index c1e6d28..dff1309 100644
--- a/app/components/ProfileScreen.tsx
+++ b/app/components/ProfileScreen.tsx
@@ -42,13 +42,7 @@ function computeStats(games: Game[]): Stats {
   };
 }
 
-export function ProfileScreen({
-  userName,
-  onBack,
-}: {
-  userName: string;
-  onBack: () => void;
-}) {
+export function ProfileScreen({ userName, onBack }: { userName: string; onBack: () => void }) {
   const [games, setGames] = useState<Game[]>([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState<"all" | "solo" | "multi">("all");
@@ -63,51 +57,63 @@ export function ProfileScreen({
   const filtered = filter === "all" ? games : games.filter((g) => g.mode === filter);
   const stats = computeStats(filtered);
 
+  const statCardCls = "bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-3.5 text-center flex flex-col gap-1";
+
   return (
-    <div className="screen profile-screen">
-      <div className="profile-header">
-        <button className="btn btn-ghost btn-back" onClick={onBack}>← Retour</button>
-        <div className="profile-title">
-          <span className="profile-avatar">{userName[0].toUpperCase()}</span>
-          <h2 className="profile-name">{userName}</h2>
+    <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col max-w-175 mx-auto px-4 pb-10">
+      {/* Header */}
+      <div className="flex items-center justify-between py-4 gap-3">
+        <button className="min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onBack}>
+          ← Retour
+        </button>
+        <div className="flex items-center gap-2.5">
+          <span className="w-10 h-10 rounded-full bg-[#7c3aed] text-white flex items-center justify-center text-lg font-bold shrink-0">
+            {userName[0].toUpperCase()}
+          </span>
+          <h2 className="text-xl font-bold">{userName}</h2>
         </div>
-        <button className="btn btn-ghost" onClick={() => signOut({ redirect: false }).then(onBack)}>
+        <button
+          className="min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer"
+          onClick={() => signOut({ redirect: false }).then(onBack)}
+        >
           Déconnexion
         </button>
       </div>
 
-      <div className="profile-stats-grid">
-        <div className="stat-card">
-          <span className="stat-card-value">{stats.total}</span>
-          <span className="stat-card-label">Parties</span>
+      {/* Stats grid */}
+      <div className="grid grid-cols-3 gap-2.5 my-4">
+        <div className={statCardCls}>
+          <span className="text-[22px] font-black">{stats.total}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Parties</span>
         </div>
-        <div className="stat-card">
-          <span className="stat-card-value">{stats.won}</span>
-          <span className="stat-card-label">Victoires</span>
+        <div className={statCardCls}>
+          <span className="text-[22px] font-black">{stats.won}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Victoires</span>
         </div>
-        <div className="stat-card">
-          <span className="stat-card-value">{stats.avgClicks > 0 ? stats.avgClicks : "—"}</span>
-          <span className="stat-card-label">Clics moy.</span>
+        <div className={statCardCls}>
+          <span className="text-[22px] font-black">{stats.avgClicks > 0 ? stats.avgClicks : "—"}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Clics moy.</span>
         </div>
-        <div className="stat-card">
-          <span className="stat-card-value">{stats.avgTime > 0 ? fmt(stats.avgTime) : "—"}</span>
-          <span className="stat-card-label">Temps moy.</span>
+        <div className={statCardCls}>
+          <span className="text-[22px] font-black">{stats.avgTime > 0 ? fmt(stats.avgTime) : "—"}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Temps moy.</span>
         </div>
-        <div className="stat-card accent">
-          <span className="stat-card-value">{stats.bestClicks > 0 ? stats.bestClicks : "—"}</span>
-          <span className="stat-card-label">Meilleur clics</span>
+        <div className={`${statCardCls} border-[#7c3aed]`}>
+          <span className="text-[22px] font-black text-[#7c3aed]">{stats.bestClicks > 0 ? stats.bestClicks : "—"}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Meilleur clics</span>
         </div>
-        <div className="stat-card accent">
-          <span className="stat-card-value">{stats.bestTime > 0 ? fmt(stats.bestTime) : "—"}</span>
-          <span className="stat-card-label">Meilleur temps</span>
+        <div className={`${statCardCls} border-[#7c3aed]`}>
+          <span className="text-[22px] font-black text-[#7c3aed]">{stats.bestTime > 0 ? fmt(stats.bestTime) : "—"}</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Meilleur temps</span>
         </div>
       </div>
 
-      <div className="profile-filters">
+      {/* Filters */}
+      <div className="flex gap-2 mb-4">
         {(["all", "solo", "multi"] as const).map((f) => (
           <button
             key={f}
-            className={`filter-btn ${filter === f ? "active" : ""}`}
+            className={`px-4 py-1.5 rounded-full text-xs font-semibold border cursor-pointer transition-colors ${filter === f ? "bg-[#7c3aed] border-[#7c3aed] text-white" : "bg-[#242424] border-[#2e2e2e] text-[#888] hover:text-[#f0f0f0]"}`}
             onClick={() => setFilter(f)}
           >
             {f === "all" ? "Tout" : f === "solo" ? "Solo" : "Multi"}
@@ -115,36 +121,39 @@ export function ProfileScreen({
         ))}
       </div>
 
-      <div className="games-list">
-        {loading && <div className="article-loading"><div className="loading-spinner" /> Chargement...</div>}
+      {/* Game list */}
+      <div className="flex flex-col gap-2.5">
+        {loading && (
+          <div className="flex items-center gap-3 py-10 text-[#888]"><div className="spinner" /> Chargement...</div>
+        )}
         {!loading && filtered.length === 0 && (
-          <p className="games-empty">Aucune partie enregistrée.</p>
+          <p className="text-[#888] text-center py-10">Aucune partie enregistrée.</p>
         )}
         {filtered.map((g) => (
-          <div key={g.id} className={`game-card ${g.won ? "won" : "lost"}`}>
-            <div className="game-card-top">
-              <span className="game-card-mode">{g.mode === "solo" ? "Solo" : "Multi"}</span>
-              <span className="game-card-date">{new Date(g.playedAt).toLocaleDateString("fr-FR")}</span>
-              <span className={`game-card-result ${g.won ? "won" : "lost"}`}>{g.won ? "Victoire" : "Abandon"}</span>
+          <div key={g.id} className={`bg-[#1a1a1a] rounded-xl px-4 py-3.5 flex flex-col gap-2 border-l-4 ${g.won ? "border-l-[#16a34a] border-y border-r border-[#2e2e2e]" : "border-l-[#2e2e2e] border-y border-r border-[#2e2e2e] opacity-70"}`}>
+            <div className="flex items-center gap-2.5 text-xs">
+              <span className="bg-[#242424] rounded px-2 py-0.5 font-semibold text-[#888]">{g.mode === "solo" ? "Solo" : "Multi"}</span>
+              <span className="text-[#888] ml-auto">{new Date(g.playedAt).toLocaleDateString("fr-FR")}</span>
+              <span className={`font-bold ${g.won ? "text-[#16a34a]" : "text-[#888]"}`}>{g.won ? "Victoire" : "Abandon"}</span>
             </div>
-            <div className="game-card-route">
-              <span className="game-card-start">{g.startArticle}</span>
-              <span className="game-card-arrow">→</span>
-              <span className="game-card-target">{g.targetArticle}</span>
+            <div className="flex items-center gap-2 text-sm font-semibold flex-wrap">
+              <span>{g.startArticle}</span>
+              <span className="text-[#888]">→</span>
+              <span className="text-[#7c3aed]">{g.targetArticle}</span>
             </div>
             {g.won && (
-              <div className="game-card-stats">
+              <div className="flex gap-4 text-xs text-[#888]">
                 <span>{g.clicks} clics</span>
                 <span>{fmt(g.timeSeconds)}</span>
                 <span>{g.path.length - 1} articles parcourus</span>
               </div>
             )}
             {g.path.length > 0 && (
-              <div className="game-card-path">
+              <div className="flex flex-wrap gap-1 text-xs text-[#888] pt-1 border-t border-[#2e2e2e]">
                 {g.path.map((t, i) => (
-                  <span key={i} className="game-path-item">
-                    {i > 0 && <span className="game-path-sep">›</span>}
-                    <span className={i === g.path.length - 1 && g.won ? "game-path-end" : ""}>{t}</span>
+                  <span key={i} className="flex items-center gap-1">
+                    {i > 0 && <span className="text-[#555]">›</span>}
+                    <span className={i === g.path.length - 1 && g.won ? "text-[#16a34a] font-semibold" : ""}>{t}</span>
                   </span>
                 ))}
               </div>
diff --git a/app/components/SoloScreen.tsx b/app/components/SoloScreen.tsx
index 3bb64a7..f323b91 100644
--- a/app/components/SoloScreen.tsx
+++ b/app/components/SoloScreen.tsx
@@ -26,12 +26,6 @@ type SoloScreenProps = {
   onRetry: () => void;
 };
 
-function fmt(s: number): string {
-  const m = Math.floor(s / 60);
-  const sec = Math.floor(s % 60);
-  return `${m}:${String(sec).padStart(2, "0")}`;
-}
-
 export function SoloScreen({
   phase, puzzle, html, title, loading, loadError, history, clicks,
   elapsedDisplay, canGoBack, onStart, onNavigate, onBack, onQuit, onNewGame, onRetry,
@@ -42,102 +36,111 @@ export function SoloScreen({
     breadcrumbEndRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" });
   }, [history]);
 
-  return (
-    <div className="screen solo-screen">
-      {phase === "setup" && (
-        <div className="center-content">
-          <button className="btn btn-ghost btn-back" onClick={onQuit}>Retour</button>
-          <h2 className="section-title">Mode Solo</h2>
-          <p className="section-desc">
-            Deux articles aleatoires seront choisis. Atteins l&apos;article cible en cliquant uniquement sur les liens !
-          </p>
-          <button className="btn btn-primary" onClick={onStart} disabled={loading}>
-            {loading ? "Preparation..." : "Lancer une partie"}
+  if (phase === "setup") return (
+    <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col items-center justify-center px-4 py-6 gap-5 max-w-100 mx-auto text-center">
+      <button className="self-start min-h-9.5 px-3.5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onQuit}>
+        Retour
+      </button>
+      <h2 className="text-3xl font-black">Mode Solo</h2>
+      <p className="text-[#888] text-sm leading-relaxed">
+        Deux articles aléatoires seront choisis. Atteins l&apos;article cible en cliquant uniquement sur les liens !
+      </p>
+      <button
+        className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] disabled:opacity-50 cursor-pointer"
+        onClick={onStart} disabled={loading}
+      >
+        {loading ? "Préparation..." : "Lancer une partie"}
+      </button>
+    </div>
+  );
+
+  if (phase === "won") return (
+    <div className="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex items-center justify-center px-4 py-6">
+      <div className="w-full max-w-96 text-center flex flex-col gap-5">
+        <div className="text-6xl leading-none">🎉</div>
+        <h2 className="text-3xl font-black">Article atteint !</h2>
+        <div className="flex gap-6 justify-center">
+          <div className="flex flex-col gap-1">
+            <span className="text-4xl font-black text-[#7c3aed]">{clicks}</span>
+            <span className="text-xs text-[#888]">clics</span>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-4xl font-black text-[#7c3aed]">{elapsedDisplay}</span>
+            <span className="text-xs text-[#888]">temps</span>
+          </div>
+        </div>
+        <div className="bg-[#1a1a1a] rounded-xl px-4 py-3 flex flex-wrap gap-1 text-sm text-[#888]">
+          {history.map((t, i) => (
+            <span key={i} className="flex items-center gap-1">
+              {i > 0 && <span className="text-[#555]">›</span>}
+              <span className={i === history.length - 1 ? "text-[#16a34a] font-semibold" : ""}>{t}</span>
+            </span>
+          ))}
+        </div>
+        <div className="flex flex-col gap-2.5">
+          <button className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#7c3aed] text-white hover:bg-[#6d28d9] cursor-pointer" onClick={onNewGame}>
+            Nouvelle partie
+          </button>
+          <button className="w-full min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onQuit}>
+            Accueil
           </button>
         </div>
-      )}
+      </div>
+    </div>
+  );
 
-      {phase === "playing" && (
-        <>
-          <div className="game-main">
-            <div className="article-container">
-              {title && <h1 className="article-title">{title}</h1>}
-              {loading && (
-                <div className="article-loading">
-                  <div className="loading-spinner" />
-                  Chargement...
-                </div>
-              )}
-              {loadError && (
-                <div className="article-error">
-                  <p>{loadError}</p>
-                  <button className="btn btn-secondary" onClick={onRetry}>Reessayer</button>
-                </div>
-              )}
-              {!loading && !loadError && html && (
-                <ArticleView html={html} onNavigate={onNavigate} disabled={loading} />
-              )}
+  // playing
+  return (
+    <div className="min-h-dvh w-full bg-[#0f0f0f] flex flex-col">
+      {/* Article */}
+      <div className="flex-1 overflow-y-auto bg-white">
+        <div className="article-container">
+          {title && <h1 className="article-title">{title}</h1>}
+          {loading && (
+            <div className="flex items-center gap-3 py-10 px-4 text-[#888]">
+              <div className="spinner" /> Chargement...
             </div>
-          </div>
-
-          <div className="solo-bottombar">
-            <div className="breadcrumb-zone">
-              <span className="breadcrumb-label">VOUS DEVEZ TROUVER</span>
-              <span className="breadcrumb-target">{puzzle?.target}</span>
-              <Breadcrumbs history={history} endRef={breadcrumbEndRef} />
-            </div>
-            <div className="solo-stats">
-              <div className="solo-stat">
-                <span className="solo-stat-label">TEMPS</span>
-                <span className="solo-stat-value">{elapsedDisplay}</span>
-              </div>
-              <div className="solo-stat">
-                <span className="solo-stat-label">CLICS</span>
-                <span className="solo-stat-value">{clicks}</span>
-              </div>
-              {canGoBack && (
-                <button className="btn btn-ghost solo-back-btn" onClick={onBack} disabled={loading}>
-                  &larr; Retour <span className="solo-back-cost">+1</span>
-                </button>
-              )}
-              <button className="btn btn-ghost solo-quit" onClick={onQuit}>
-                Quitter
+          )}
+          {loadError && (
+            <div className="flex flex-col items-center gap-4 py-10 px-4 text-center">
+              <p className="text-[#888]">{loadError}</p>
+              <button className="min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#2563eb] text-white hover:bg-[#1d4ed8] cursor-pointer" onClick={onRetry}>
+                Réessayer
               </button>
             </div>
-          </div>
-        </>
-      )}
-
-      {phase === "won" && (
-        <div className="victory-screen">
-          <div className="victory-content">
-            <div className="victory-emoji">Bravo !</div>
-            <h2 className="victory-title">Article atteint !</h2>
-            <div className="victory-stats">
-              <div className="victory-stat">
-                <span className="victory-stat-value">{clicks}</span>
-                <span className="victory-stat-label">clics</span>
-              </div>
-              <div className="victory-stat">
-                <span className="victory-stat-value">{elapsedDisplay}</span>
-                <span className="victory-stat-label">temps</span>
-              </div>
-            </div>
-            <div className="victory-path-full">
-              {history.map((t, i) => (
-                <span key={i} className="victory-path-item">
-                  {i > 0 && <span className="victory-path-sep">›</span>}
-                  <span className={i === history.length - 1 ? "victory-path-end" : "victory-path-step"}>{t}</span>
-                </span>
-              ))}
-            </div>
-            <div className="victory-actions">
-              <button className="btn btn-primary" onClick={onNewGame}>Nouvelle partie</button>
-              <button className="btn btn-ghost" onClick={onQuit}>Accueil</button>
-            </div>
-          </div>
+          )}
+          {!loading && !loadError && html && (
+            <ArticleView html={html} onNavigate={onNavigate} disabled={loading} />
+          )}
         </div>
-      )}
+      </div>
+
+      {/* Bottom bar */}
+      <div className="fixed bottom-0 left-0 right-0 z-50 bg-[#0f0f0f]/97 backdrop-blur-sm border-t border-[#2e2e2e] flex items-center justify-between px-4 py-2.5 gap-3">
+        <div className="flex-1 min-w-0 flex flex-col gap-1">
+          <span className="text-[9px] font-bold tracking-widest text-[#888] uppercase">Vous devez trouver</span>
+          <span className="text-base font-black text-[#7c3aed] truncate">{puzzle?.target}</span>
+          <Breadcrumbs history={history} endRef={breadcrumbEndRef} />
+        </div>
+        <div className="flex items-center gap-4 shrink-0">
+          <div className="flex flex-col items-center gap-0.5 min-w-11">
+            <span className="text-[9px] font-bold tracking-wider text-[#888] uppercase">Temps</span>
+            <span className="text-sm font-black tabular-nums">{elapsedDisplay}</span>
+          </div>
+          <div className="flex flex-col items-center gap-0.5 min-w-11">
+            <span className="text-[9px] font-bold tracking-wider text-[#888] uppercase">Clics</span>
+            <span className="text-sm font-black tabular-nums">{clicks}</span>
+          </div>
+          {canGoBack && (
+            <button className="min-h-9 px-3 rounded-xl text-xs font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] disabled:opacity-50 cursor-pointer" onClick={onBack} disabled={loading}>
+              ← +1
+            </button>
+          )}
+          <button className="min-h-9 px-3 rounded-xl text-xs font-semibold bg-[#242424] border border-[#2e2e2e] text-[#f0f0f0] hover:bg-[#1a1a1a] cursor-pointer" onClick={onQuit}>
+            Quitter
+          </button>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index bb42f73..0c5dbf4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,646 +1,24 @@
 @import "tailwindcss";
 
 /* ================================
-   Variables & Reset
+   Variables globales
    ================================ */
 
 :root {
-  --bg: #0f0f0f;
-  --bg-2: #1a1a1a;
-  --bg-3: #242424;
-  --border: #2e2e2e;
-  --text: #f0f0f0;
-  --text-muted: #888;
   --accent: #7c3aed;
   --accent-hover: #6d28d9;
-  --blue: #2563eb;
-  --blue-hover: #1d4ed8;
-  --green: #16a34a;
-  --red: #dc2626;
-  --yellow: #ca8a04;
-  --radius: 10px;
-  --transition: 200ms ease;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body {
-  height: 100%;
-  background: var(--bg);
-  color: var(--text);
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  overflow-x: hidden;
 }
 
 /* ================================
-   Ecrans (transitions)
-   ================================ */
-
-.screen {
-  min-height: 100dvh;
-  width: 100%;
-  background: var(--bg);
-  color: var(--text);
-  animation: fadeIn var(--transition) ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(6px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-/* ================================
-   Boutons
-   ================================ */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 44px;
-  padding: 0 20px;
-  border-radius: var(--radius);
-  font-size: 15px;
-  font-weight: 600;
-  cursor: pointer;
-  border: none;
-  transition: background var(--transition), opacity var(--transition);
-  white-space: nowrap;
-  width: 100%;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: var(--accent);
-  color: #fff;
-}
-.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
-
-.btn-secondary {
-  background: var(--blue);
-  color: #fff;
-}
-.btn-secondary:hover:not(:disabled) { background: var(--blue-hover); }
-
-.btn-ghost {
-  background: var(--bg-3);
-  color: var(--text);
-  border: 1px solid var(--border);
-}
-.btn-ghost:hover:not(:disabled) { background: var(--bg-2); }
-
-.btn-back {
-  width: auto;
-  font-size: 14px;
-  padding: 0 14px;
-  min-height: 38px;
-}
-
-/* ================================
-   Inputs
-   ================================ */
-
-.input {
-  width: 100%;
-  min-height: 44px;
-  padding: 0 14px;
-  background: var(--bg-2);
-  border: 1.5px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-size: 15px;
-  transition: border-color var(--transition);
-  outline: none;
-}
-
-.input:focus {
-  border-color: var(--accent);
-}
-
-.input-code {
-  font-family: monospace;
-  font-size: 18px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  flex: 1;
-}
-
-/* ================================
-   Bandeau d'erreur
-   ================================ */
-
-.error-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  background: rgba(220, 38, 38, 0.15);
-  border: 1px solid var(--red);
-  color: #fca5a5;
-  padding: 10px 14px;
-  border-radius: var(--radius);
-  font-size: 14px;
-  margin-bottom: 12px;
-}
-
-.error-close {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 1;
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-.error-close:hover { background: rgba(255,255,255,0.1); }
-
-/* ================================
-   Accueil
-   ================================ */
-
-.home-screen {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 24px 16px;
-  gap: 32px;
-}
-
-.home-hero {
-  text-align: center;
-}
-
-.home-logo-img {
-  width: clamp(200px, 55vw, 320px);
-  height: auto;
-  display: block;
-  margin: 0 auto;
-}
-
-.home-subtitle {
-  margin-top: 12px;
-  color: var(--text-muted);
-  font-size: 15px;
-  max-width: 360px;
-  margin-inline: auto;
-}
-
-.home-form {
-  width: 100%;
-  max-width: 400px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.home-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.home-section {
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.home-section h3 {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.home-divider {
-  text-align: center;
-  color: var(--text-muted);
-  font-size: 13px;
-  position: relative;
-}
-
-.home-divider::before,
-.home-divider::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  width: 40%;
-  height: 1px;
-  background: var(--border);
-}
-.home-divider::before { left: 0; }
-.home-divider::after { right: 0; }
-
-.join-row {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.join-row .btn {
-  width: auto;
-  flex-shrink: 0;
-}
-
-/* ================================
-   Salle d'attente (Lobby)
-   ================================ */
-
-.lobby-screen {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px 16px 32px;
-  gap: 24px;
-  max-width: 480px;
-  margin: 0 auto;
-}
-
-.lobby-code-block {
-  text-align: center;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 24px;
-  width: 100%;
-}
-
-.lobby-code-label {
-  display: block;
-  font-size: 12px;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  margin-bottom: 8px;
-}
-
-.lobby-code-copy {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 8px;
-  margin: 0 auto;
-  transition: background var(--transition);
-}
-.lobby-code-copy:hover { background: var(--bg-3); }
-
-.lobby-copy-icon {
-  font-size: 22px;
-  color: var(--text-muted);
-  line-height: 1;
-}
-.lobby-code-copy:hover .lobby-copy-icon { color: var(--accent); }
-
-.lobby-code {
-  display: block;
-  font-size: clamp(42px, 12vw, 64px);
-  font-weight: 900;
-  font-family: monospace;
-  letter-spacing: 0.15em;
-  color: var(--accent);
-  line-height: 1;
-}
-
-.lobby-code-hint {
-  display: block;
-  font-size: 13px;
-  color: var(--text-muted);
-  margin-top: 8px;
-}
-
-.lobby-section-title {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin-bottom: 8px;
-}
-
-.lobby-players {
-  width: 100%;
-}
-
-.player-list {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.player-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 10px 14px;
-  min-height: 44px;
-}
-
-.player-item.me {
-  border-color: var(--accent);
-}
-
-.player-name {
-  flex: 1;
-  font-weight: 600;
-  font-size: 15px;
-}
-
-.player-badge {
-  font-size: 11px;
-  font-weight: 700;
-  padding: 2px 8px;
-  border-radius: 20px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.player-badge.host { background: rgba(124, 58, 237, 0.2); color: #a78bfa; }
-.player-badge.you  { background: rgba(37, 99, 235, 0.2); color: #93c5fd; }
-.player-badge.winner { background: rgba(22, 163, 74, 0.2); color: #86efac; }
-
-.player-score {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--accent);
-  min-width: 50px;
-  text-align: right;
-}
-
-.lobby-host-actions {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.lobby-round-info {
-  font-size: 13px;
-  color: var(--text-muted);
-  text-align: center;
-}
-
-.lobby-waiting {
-  font-size: 14px;
-  color: var(--text-muted);
-  text-align: center;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.5; }
-}
-
-/* ================================
-   Barre superieure (jeu)
-   ================================ */
-
-.game-topbar {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  background: rgba(15, 15, 15, 0.97);
-  backdrop-filter: blur(8px);
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 14px;
-}
-
-/* Zone fil d'ariane (topbar multi) */
-.topbar-trail-zone {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.topbar-target-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.topbar-label {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-
-.topbar-target-name {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--accent);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Fil d'ariane commun (solo + multi) */
-.breadcrumb-trail {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  gap: 0;
-  scrollbar-width: none;
-}
-.breadcrumb-trail::-webkit-scrollbar { display: none; }
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.breadcrumb-sep {
-  color: var(--text-muted);
-  font-size: 13px;
-  padding: 0 4px;
-}
-
-.breadcrumb-past {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.breadcrumb-current {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text);
-}
-
-/* Topbar trail - scroll horizontal sur ligne unique */
-.topbar-trail {
-  max-width: 100%;
-}
-
-.topbar-stats {
-  display: flex;
-  gap: 12px;
-  flex-shrink: 0;
-}
-
-.stat {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text-muted);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ---- Barre basse solo - zone breadcrumb ---- */
-.breadcrumb-zone {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.breadcrumb-label {
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  color: var(--text-muted);
-  text-transform: uppercase;
-}
-
-.breadcrumb-target {
-  font-size: 16px;
-  font-weight: 900;
-  color: var(--accent);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* ================================
-   Jeu - layout
-   ================================ */
-
-.game-screen {
-  min-height: 100dvh;
-  display: flex;
-  flex-direction: column;
-}
-
-.game-layout {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.game-main {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0;
-  background: #fff;
-}
-
-.game-sidebar {
-  width: 160px;
-  flex-shrink: 0;
-  background: var(--bg-2);
-  border-left: 1px solid var(--border);
-  padding: 16px 12px;
-  overflow-y: auto;
-  display: none; /* affiche uniquement sur desktop */
-}
-
-@media (min-width: 640px) {
-  .game-sidebar { display: block; }
-}
-
-.sidebar-title {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-  margin-bottom: 12px;
-}
-
-.sidebar-players {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.sidebar-player {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.sidebar-player.me .sidebar-player-name {
-  color: var(--accent);
-}
-
-.sidebar-player-name {
-  font-size: 13px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sidebar-player-score {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.sidebar-player-won {
-  font-size: 11px;
-  color: var(--green);
-  font-weight: 700;
-}
-
-/* ================================
-   Article Wikipedia
+   Article Wikipedia (HTML externe — ne peut pas être tailwindifié)
    ================================ */
 
 .article-container {
   max-width: 700px;
   margin: 0 auto;
-  padding: 28px 20px 80px; /* padding-bottom pour ne pas etre masque par la barre basse */
+  padding: 28px 20px 80px;
   background: #fff;
-  color: #202122; /* couleur Wikipedia standard */
+  color: #202122;
   min-height: 100%;
 }
 
@@ -654,1022 +32,57 @@ body {
   padding-bottom: 4px;
 }
 
-/* Les sections Wikipedia */
-.article-content section {
-  margin-bottom: 8px;
-}
+.wiki-link { color: #3366cc; text-decoration: none; cursor: pointer; }
+.wiki-link:hover { text-decoration: underline; color: #0645ad; }
 
-/* Liens Wikipedia cliquables (classe injectee dynamiquement via JS) */
-.wiki-link {
-  color: #3366cc;
-  text-decoration: none;
-  cursor: pointer;
-  min-height: 44px;
-  display: inline;
-  line-height: inherit;
-}
-
-.wiki-link:hover {
-  text-decoration: underline;
-  color: #0645ad;
-}
-
-/* Typographie article - style proche de Wikipedia */
-.article-content p {
-  margin: 0 0 0.8em;
-  line-height: 1.75;
-  font-size: 15px;
-  color: #202122;
-}
-
-.article-content h2 {
-  font-size: 22px;
-  font-weight: normal;
-  font-family: "Linux Libertine", "Georgia", serif;
-  border-bottom: 1px solid #a2a9b1;
-  padding-bottom: 3px;
-  margin: 20px 0 8px;
-  color: #000;
-}
-
-.article-content h3 {
-  font-size: 17px;
-  font-weight: bold;
-  margin: 16px 0 6px;
-  color: #000;
-}
-
-.article-content h4 {
-  font-size: 15px;
-  font-weight: bold;
-  margin: 12px 0 4px;
-}
-
-.article-content ul,
-.article-content ol {
-  padding-left: 28px;
-  margin: 0 0 0.8em;
-}
-
-.article-content li {
-  margin-bottom: 4px;
-  font-size: 15px;
-  line-height: 1.6;
-}
-
-.article-content b,
-.article-content strong {
-  font-weight: bold;
-}
-
-.article-content i,
-.article-content em {
-  font-style: italic;
-}
-
-/* Images dans l'article */
-.article-content figure {
-  margin: 12px 0 16px;
-  max-width: 100%;
-}
-
-.article-content figure img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 4px;
-  display: block;
-}
-
-.article-content figcaption,
-.article-content .thumbcaption,
-.article-content .mw-file-description {
-  font-size: 12px;
-  color: #555;
-  margin-top: 4px;
-  font-style: italic;
-}
-
-/* Images flottantes Wikipedia (thumb) - on les rend en bloc */
-.article-content .thumb,
-.article-content .thumbinner {
-  float: none !important;
-  display: block;
-  margin: 12px 0;
-  max-width: 100%;
-}
-
-/* ---- Infobox ---- */
-/* Conteneur PCS (wrapper du mobile Wikipedia) */
-.article-content .pcs-collapse-table-container {
-  float: right;
-  clear: right;
-  margin: 0 0 16px 20px;
-  max-width: 280px;
-  width: 100%;
-  font-size: 13px;
-}
-
-/* Le titre "Faits en bref" du PCS - on le cache */
-.article-content .pcs-collapse-table-collapsed-container {
-  display: none;
-}
-
-/* Infobox elle-meme */
-.article-content .infobox,
-.article-content .infobox_v3 {
-  width: 100% !important;
-  max-width: 280px;
-  border: 1px solid #a2a9b1;
-  border-collapse: collapse;
-  background: #f8f9fa;
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.article-content .infobox td,
-.article-content .infobox th,
-.article-content .infobox_v3 td,
-.article-content .infobox_v3 th {
-  padding: 4px 8px;
-  border: 1px solid #a2a9b1;
-  vertical-align: top;
-  color: #202122;
-}
-
-.article-content .infobox th,
-.article-content .infobox_v3 th,
-.article-content .entete {
-  background: #eaecf0;
-  font-weight: bold;
-  text-align: center;
-}
-
-/* Images dans l'infobox */
-.article-content .infobox img,
-.article-content .infobox_v3 img {
-  max-width: 100%;
-  height: auto;
-}
-
-/* ---- TOC (sommaire) ---- */
-.article-content .toc,
-.article-content #toc {
-  display: inline-block;
-  background: #f8f9fa;
-  border: 1px solid #a2a9b1;
-  padding: 10px 16px;
-  margin: 0 0 16px;
-  font-size: 13px;
-  min-width: 180px;
-}
-
-.article-content .toc h2,
-.article-content #toc h2 {
-  font-size: 14px;
-  font-weight: bold;
-  border: none;
-  margin: 0 0 6px;
-  padding: 0;
-}
-
-.article-content .toc ul,
-.article-content #toc ul {
-  margin: 0;
-  padding-left: 16px;
-  list-style: none;
-}
-
-.article-content .toc li,
-.article-content #toc li {
-  margin: 2px 0;
-  font-size: 13px;
-}
-
-/* Masquer uniquement les elements vraiment parasites */
+.article-content p { margin: 0 0 0.8em; line-height: 1.75; font-size: 15px; color: #202122; }
+.article-content h2 { font-size: 22px; font-weight: normal; font-family: "Linux Libertine","Georgia",serif; border-bottom: 1px solid #a2a9b1; padding-bottom: 3px; margin: 20px 0 8px; color: #000; }
+.article-content h3 { font-size: 17px; font-weight: bold; margin: 16px 0 6px; color: #000; }
+.article-content h4 { font-size: 15px; font-weight: bold; margin: 12px 0 4px; }
+.article-content ul, .article-content ol { padding-left: 28px; margin: 0 0 0.8em; }
+.article-content li { margin-bottom: 4px; font-size: 15px; line-height: 1.6; }
+.article-content b, .article-content strong { font-weight: bold; }
+.article-content i, .article-content em { font-style: italic; }
+.article-content figure { margin: 12px 0 16px; max-width: 100%; }
+.article-content figure img { max-width: 100%; height: auto; border-radius: 4px; display: block; }
+.article-content figcaption, .article-content .thumbcaption, .article-content .mw-file-description { font-size: 12px; color: #555; margin-top: 4px; font-style: italic; }
+.article-content .thumb, .article-content .thumbinner { float: none !important; display: block; margin: 12px 0; max-width: 100%; }
+.article-content .pcs-collapse-table-container { float: right; clear: right; margin: 0 0 16px 20px; max-width: 280px; width: 100%; font-size: 13px; }
+.article-content .pcs-collapse-table-collapsed-container { display: none; }
+.article-content .infobox, .article-content .infobox_v3 { width: 100% !important; max-width: 280px; border: 1px solid #a2a9b1; border-collapse: collapse; background: #f8f9fa; font-size: 13px; line-height: 1.5; }
+.article-content .infobox td, .article-content .infobox th, .article-content .infobox_v3 td, .article-content .infobox_v3 th { padding: 4px 8px; border: 1px solid #a2a9b1; vertical-align: top; color: #202122; }
+.article-content .infobox th, .article-content .infobox_v3 th, .article-content .entete { background: #eaecf0; font-weight: bold; text-align: center; }
+.article-content .infobox img, .article-content .infobox_v3 img { max-width: 100%; height: auto; }
+.article-content .toc, .article-content #toc { display: inline-block; background: #f8f9fa; border: 1px solid #a2a9b1; padding: 10px 16px; margin: 0 0 16px; font-size: 13px; min-width: 180px; }
+.article-content .toc h2, .article-content #toc h2 { font-size: 14px; font-weight: bold; border: none; margin: 0 0 6px; padding: 0; }
+.article-content .toc ul, .article-content #toc ul { margin: 0; padding-left: 16px; list-style: none; }
+.article-content .toc li, .article-content #toc li { margin: 2px 0; font-size: 13px; }
 .article-content .pcs-edit-section-header,
 .article-content [style*="display:none"],
-.article-content .noprint {
-  display: none !important;
-}
+.article-content .noprint { display: none !important; }
 
-/* Sur mobile : infobox en pleine largeur, pas de float */
 @media (max-width: 500px) {
-  .article-content .pcs-collapse-table-container {
-    float: none;
-    max-width: 100%;
-    margin: 0 0 16px;
-  }
-  .article-content .infobox,
-  .article-content .infobox_v3 {
-    max-width: 100%;
-  }
+  .article-content .pcs-collapse-table-container { float: none; max-width: 100%; margin: 0 0 16px; }
+  .article-content .infobox, .article-content .infobox_v3 { max-width: 100%; }
 }
 
-.article-loading {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 40px 16px;
-  color: var(--text-muted);
-  max-width: 680px;
-  margin: 0 auto;
-}
+/* ================================
+   Animations
+   ================================ */
 
-.article-error {
-  max-width: 680px;
-  margin: 0 auto;
-  padding: 40px 16px;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  align-items: center;
-}
+@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+@keyframes countPop { from { transform: scale(1.3); opacity: 0.7; } to { transform: scale(1); opacity: 1; } }
 
-.loading-spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
+.animate-fade-in { animation: fadeIn 200ms ease; }
+.animate-count-pop { animation: countPop 0.3s ease; }
+.animate-pulse-slow { animation: pulse 2s infinite; }
+.spinner {
+  width: 20px; height: 20px;
+  border: 2px solid #2e2e2e;
+  border-top-color: #7c3aed;
   border-radius: 50%;
   flex-shrink: 0;
   animation: spin 0.7s linear infinite;
 }
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* ================================
-   Compte a rebours
-   ================================ */
-
-.countdown-screen {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100dvh;
-}
-
-.countdown-content {
-  text-align: center;
-  padding: 24px;
-}
-
-.countdown-path {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  flex-wrap: wrap;
-  margin-bottom: 48px;
-}
-
-.countdown-article {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  max-width: 200px;
-}
-
-.countdown-label {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-}
-
-.countdown-article-name {
-  font-size: 18px;
-  font-weight: 700;
-  text-align: center;
-}
-
-.countdown-article-name.highlight {
-  color: var(--accent);
-  font-size: 20px;
-}
-
-.countdown-arrow {
-  color: var(--text-muted);
-  font-size: 24px;
-}
-
-.countdown-number {
-  font-size: clamp(80px, 20vw, 140px);
-  font-weight: 900;
-  line-height: 1;
-  color: var(--accent);
-  animation: countPop 0.3s ease;
-}
-
-@keyframes countPop {
-  from { transform: scale(1.3); opacity: 0.7; }
-  to   { transform: scale(1); opacity: 1; }
-}
-
-/* ================================
-   Resultats de manche
-   ================================ */
-
-.results-screen {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100dvh;
-  padding: 24px 16px;
-}
-
-.results-content {
-  width: 100%;
-  max-width: 420px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.results-winner-banner {
-  text-align: center;
-  padding: 24px;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-}
-
-.results-winner-emoji {
-  font-size: 48px;
-  margin-bottom: 8px;
-}
-
-.results-winner-name {
-  font-size: 20px;
-  font-weight: 700;
-}
-
-.results-path {
-  text-align: center;
-  font-size: 14px;
-  color: var(--text-muted);
-}
-
-.path-start { color: var(--text); }
-.path-arrow { color: var(--text-muted); }
-.path-end   { color: var(--accent); font-weight: 700; }
-
-.results-title {
-  font-size: 13px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-  margin-bottom: 12px;
-}
-
-.scoreboard-list {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.scoreboard-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 10px 14px;
-  min-height: 44px;
-}
-
-.scoreboard-item.me {
-  border-color: var(--accent);
-}
-
-.scoreboard-rank {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--text-muted);
-  min-width: 28px;
-}
-
-.scoreboard-name {
-  flex: 1;
-  font-weight: 600;
-}
-
-.scoreboard-score {
-  font-weight: 700;
-  color: var(--accent);
-}
-
-.results-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-/* ================================
-   Victoire solo
-   ================================ */
-
-.victory-screen {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100dvh;
-  padding: 24px 16px;
-  background: var(--bg);
-  color: var(--fg);
-}
-
-.victory-content {
-  width: 100%;
-  max-width: 380px;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.victory-emoji {
-  font-size: 64px;
-  line-height: 1;
-}
-
-.victory-title {
-  font-size: 28px;
-  font-weight: 800;
-}
-
-.victory-stats {
-  display: flex;
-  gap: 24px;
-  justify-content: center;
-}
-
-.victory-stat {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.victory-stat-value {
-  font-size: 36px;
-  font-weight: 900;
-  color: var(--accent);
-  line-height: 1;
-}
-
-.victory-stat-label {
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-.victory-path {
-  font-size: 15px;
-  color: var(--text-muted);
-  padding: 12px 16px;
-  background: var(--bg-2);
-  border-radius: 8px;
-}
-
-.victory-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-/* ================================
-   Solo screen
-   ================================ */
-
-.solo-screen {
-  min-height: 100dvh;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg);
-}
-
-/* Barre fixee en bas pendant le jeu solo */
-.solo-bottombar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 50;
-  background: rgba(15, 15, 15, 0.97);
-  backdrop-filter: blur(8px);
-  border-top: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 16px;
-  gap: 12px;
-}
-
-
-.solo-stats {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-shrink: 0;
-}
-
-.solo-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1px;
-  min-width: 44px;
-}
-
-.solo-stat-label {
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-  text-transform: uppercase;
-}
-
-.solo-stat-value {
-  font-size: 15px;
-  font-weight: 800;
-  color: var(--text);
-  font-variant-numeric: tabular-nums;
-}
-
-.solo-quit {
-  width: auto;
-  min-height: 36px;
-  padding: 0 14px;
-  font-size: 13px;
-}
-
-.center-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  padding: 24px 16px;
-  gap: 20px;
-  max-width: 400px;
-  margin: 0 auto;
-  width: 100%;
-  text-align: center;
-}
-
-.section-title {
-  font-size: 28px;
-  font-weight: 800;
-}
-
-.section-desc {
-  color: var(--text-muted);
-  font-size: 15px;
-  line-height: 1.6;
-}
-
-/* ================================
-   Responsive adjustements
-   ================================ */
-
-@media (max-width: 480px) {
-  .countdown-path {
-    flex-direction: column;
-    gap: 8px;
-  }
-  .countdown-arrow { transform: rotate(90deg); }
-  .game-topbar { font-size: 12px; }
-}
-
-/* ================================
-   Auth modal
-   ================================ */
-
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 16px;
-}
-
-.modal-box {
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 32px 28px;
-  width: 100%;
-  max-width: 380px;
-  position: relative;
-  animation: fadeIn var(--transition) ease;
-}
-
-.modal-close {
-  position: absolute;
-  top: 12px;
-  right: 14px;
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  font-size: 18px;
-  cursor: pointer;
-  line-height: 1;
-  padding: 4px 6px;
-}
-.modal-close:hover { color: var(--text); }
-
-.modal-tabs {
-  display: flex;
-  gap: 0;
-  margin-bottom: 24px;
-  border-bottom: 1px solid var(--border);
-}
-
-.modal-tab {
-  flex: 1;
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  font-size: 15px;
-  font-weight: 600;
-  padding: 10px 0;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  transition: color var(--transition), border-color var(--transition);
-}
-.modal-tab:hover { color: var(--text); }
-.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
-
-.modal-form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-/* ================================
-   Compte / Home topbar
-   ================================ */
-
-.home-topbar {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.btn-account {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: var(--bg-3);
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  padding: 6px 14px 6px 6px;
-  cursor: pointer;
-  color: var(--text);
-  font-size: 14px;
-  font-weight: 500;
-  transition: background var(--transition);
-}
-.btn-account:hover { background: var(--bg-2); }
-
-.account-avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: var(--accent);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.account-name {
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.btn-sm {
-  font-size: 13px;
-  padding: 6px 14px;
-  min-height: auto;
-}
-
-/* ================================
-   Profil / Historique
-   ================================ */
-
-.profile-screen {
-  min-height: 100dvh;
-  background: var(--bg);
-  color: var(--text);
-  display: flex;
-  flex-direction: column;
-  max-width: 700px;
-  margin: 0 auto;
-  width: 100%;
-  padding: 0 16px 40px;
-}
-
-.profile-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 0;
-  gap: 12px;
-}
-
-.profile-title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.profile-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: var(--accent);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.profile-name {
-  font-size: 20px;
-  font-weight: 700;
-}
-
-.profile-stats-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-  margin: 16px 0;
-}
-
-.stat-card {
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 14px 12px;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.stat-card.accent { border-color: var(--accent); }
-
-.stat-card-value {
-  font-size: 22px;
-  font-weight: 800;
-  color: var(--text);
-  font-variant-numeric: tabular-nums;
-}
-.stat-card.accent .stat-card-value { color: var(--accent); }
-
-.stat-card-label {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-}
-
-.profile-filters {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.filter-btn {
-  background: var(--bg-3);
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  color: var(--text-muted);
-  font-size: 13px;
-  font-weight: 600;
-  padding: 6px 16px;
-  cursor: pointer;
-  transition: all var(--transition);
-}
-.filter-btn:hover { color: var(--text); }
-.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
-
-.games-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.games-empty {
-  color: var(--text-muted);
-  text-align: center;
-  padding: 40px 0;
-}
-
-.game-card {
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 14px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.game-card.won { border-left: 3px solid var(--green); }
-.game-card.lost { border-left: 3px solid var(--border); opacity: 0.7; }
-
-.game-card-top {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 12px;
-}
-
-.game-card-mode {
-  background: var(--bg-3);
-  border-radius: 4px;
-  padding: 2px 8px;
-  font-weight: 600;
-  color: var(--text-muted);
-}
-
-.game-card-date { color: var(--text-muted); margin-left: auto; }
-
-.game-card-result { font-weight: 700; }
-.game-card-result.won { color: var(--green); }
-.game-card-result.lost { color: var(--text-muted); }
-
-.game-card-route {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 15px;
-  font-weight: 600;
-  flex-wrap: wrap;
-}
-.game-card-arrow { color: var(--text-muted); }
-.game-card-target { color: var(--accent); }
-
-.game-card-stats {
-  display: flex;
-  gap: 16px;
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-.game-card-path {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px;
-  font-size: 12px;
-  color: var(--text-muted);
-  padding-top: 4px;
-  border-top: 1px solid var(--border);
-}
-.game-path-sep { margin: 0 2px; }
-.game-path-end { color: var(--green); font-weight: 600; }
-
-/* ================================
-   Leaderboard
-   ================================ */
-
-.leaderboard-screen {
-  max-width: 640px;
-  margin: 0 auto;
-  padding: 24px 16px 48px;
-}
-
-.leaderboard-header {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 24px;
-}
-
-.leaderboard-title {
-  font-size: 24px;
-  font-weight: 800;
-}
-
-.leaderboard-tabs {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 20px;
-}
-
-.leaderboard-tab {
-  flex: 1;
-  padding: 8px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background: var(--bg-2);
-  color: var(--text-muted);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background var(--transition), color var(--transition);
-}
-
-.leaderboard-tab.active {
-  background: var(--accent);
-  color: #fff;
-  border-color: var(--accent);
-}
-
-.leaderboard-loading {
-  display: flex;
-  justify-content: center;
-  padding: 48px;
-}
-
-.leaderboard-empty {
-  text-align: center;
-  color: var(--text-muted);
-  padding: 48px 0;
-}
-
-.leaderboard-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.leaderboard-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
-  background: var(--bg-2);
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-}
-
-.leaderboard-row.top {
-  border-color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
-}
-
-.lb-rank {
-  font-size: 22px;
-  width: 32px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.lb-name {
-  font-weight: 700;
-  font-size: 15px;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.lb-stats {
-  display: flex;
-  gap: 16px;
-  flex-shrink: 0;
-}
-
-.lb-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1px;
-}
-
-.lb-stat-val {
-  font-size: 15px;
-  font-weight: 800;
-  font-variant-numeric: tabular-nums;
-  color: var(--text);
-}
-
-.lb-stat-label {
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-}