refactor: migrate all components to Tailwind, globals.css 1676 → 88 lignes

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="fixed inset-0 bg-black/70 flex items-center justify-center z-1000 p-4" onClick={onClose}>
-      <div className="modal-box" onClick={(e) => e.stopPropagation()}>
+      <div className="relative bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-8 w-full max-w-96 animate-fade-in" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-tabs">
+        <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>
-          <button
+
-            className={`modal-tab ${mode === "login" ? "active" : ""}`}
+        <div className="flex border-b border-[#2e2e2e] mb-6">
-            onClick={() => { setMode("login"); setError(null); }}
+          {(["login", "register"] as Mode[]).map((m) => (
-          >
+            <button
-            Connexion
+              key={m}
-          </button>
+              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]"}`}
-          <button
+              onClick={() => { setMode(m); setError(null); }}
-            className={`modal-tab ${mode === "register" ? "active" : ""}`}
+            >
-            onClick={() => { setMode("register"); setError(null); }}
+              {m === "login" ? "Connexion" : "Inscription"}
-          >
+            </button>
-            Inscription
+          ))}
-          </button>
         </div>
 
-        <form className="modal-form" onSubmit={handleSubmit}>
+        <form className="flex flex-col gap-3" onSubmit={handleSubmit}>
           {mode === "register" && (
-            <input
+            <input className={inputCls} type="text" placeholder="Pseudo" value={name} onChange={(e) => setName(e.target.value)} required maxLength={30} />
-              className="input"
-              type="text"
-              placeholder="Pseudo"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              required
-              maxLength={30}
-            />
           )}
-          <input
+          <input className={inputCls} type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required />
-            className="input"
+          <input className={inputCls} type="password" placeholder="Mot de passe" value={password} onChange={(e) => setPassword(e.target.value)} required minLength={6} />
-            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}
-          />
 
-          {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>
   );

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">
+        <span key={i} className="flex items-center whitespace-nowrap shrink-0">
-          {i > 0 && <span className="breadcrumb-sep">›</span>}
+          {i > 0 && <span className="text-[#888] text-xs px-1">›</span>}
-          <span className={i === history.length - 1 ? "breadcrumb-current" : "breadcrumb-past"}>
+          <span className={i === history.length - 1 ? "text-xs font-bold text-[#f0f0f0]" : "text-xs text-[#888]"}>
             {title}
           </span>
         </span>

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") {
+  // Results
-    return (
+  if (room.phase === "results") return (
-      <div className="screen results-screen">
+    <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="results-content">
+      <div className="w-full max-w-105 flex flex-col gap-6">
-          <div className="results-winner-banner">
+        <div className="text-center bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-6">
-            {winner ? (
+          {winner ? (
-              <>
+            <>
-                <div className="results-winner-emoji">Victoire !</div>
+              <div className="text-5xl mb-2">🏆</div>
-                <div className="results-winner-name">{winner.name} a gagne la manche !</div>
+              <div className="text-lg font-bold">{winner.name} a gagné 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>
           ) : (
-            <p className="lobby-waiting">En attente de l&apos;hote...</p>
+            <div className="text-lg font-bold">Manche terminée !</div>
           )}
         </div>
-      </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>
-  if (room.phase === "countdown") {
+        </div>
-    return (
+        <div>
-      <div className="screen countdown-screen">
+          <h3 className="text-xs font-bold text-[#888] uppercase tracking-wider mb-3">Classement</h3>
-        <div className="countdown-content">
+          <ul className="flex flex-col gap-2">
-          <div className="countdown-path">
+            {sortedPlayers.map((p, i) => (
-            <div className="countdown-article">
+              <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="countdown-label">Depart</span>
+                <span className="text-sm font-bold text-[#888] min-w-7">#{i + 1}</span>
-              <span className="countdown-article-name">{room.startArticle}</span>
+                <span className="flex-1 font-semibold text-sm">{p.name}</span>
-            </div>
+                {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>}
-            <div className="countdown-arrow">→</div>
+                <span className="font-bold text-[#7c3aed] text-sm">{p.score} pts</span>
-            <div className="countdown-article">
+              </li>
-              <span className="countdown-label">Cible</span>
+            ))}
-              <span className="countdown-article-name highlight">{room.targetArticle}</span>
+          </ul>
-            </div>
+        </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="min-h-dvh w-full bg-[#0f0f0f] flex flex-col">
-      <div className="game-topbar">
+      {/* Topbar */}
-        <div className="topbar-trail-zone">
+      <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="topbar-target-row">
+        <div className="flex-1 min-w-0 flex flex-col gap-1">
-            <span className="topbar-label">CIBLE</span>
+          <div className="flex items-center gap-1.5">
-            <span className="topbar-target-name">{room.targetArticle}</span>
+            <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">
+        <div className="flex gap-3 shrink-0 text-xs font-bold text-[#888] tabular-nums">
-          <span className="stat">{elapsed}</span>
+          <span>{elapsed}</span>
-          <span className="stat">{clicks} clics</span>
+          <span>{clicks} clics</span>
-          <span className="stat">{myPlayer?.score ?? 0} pts</span>
+          <span>{myPlayer?.score ?? 0} pts</span>
         </div>
       </div>
 
-      <div className="game-layout">
+      {/* Content + sidebar */}
-        <div className="game-main">
+      <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">
+            <div className="flex flex-col items-center gap-4 py-10 px-4 text-center">
-              <p>{loadError}</p>
+              <p className="text-[#888]">{loadError}</p>
-              <button className="btn btn-secondary" onClick={onRetry}>Reessayer</button>
+              <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">
+        {/* Sidebar joueurs */}
-          <h4 className="sidebar-title">Joueurs</h4>
+        <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">
-          <ul className="sidebar-players">
+          <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" : ""}`}>
+              <li key={p.id} className="flex flex-col gap-0.5">
-                <span className="sidebar-player-name">{p.name}</span>
+                <span className={`text-xs font-semibold truncate ${p.id === playerId ? "text-[#7c3aed]" : "text-[#f0f0f0]"}`}>{p.name}</span>
-                <span className="sidebar-player-score">{p.score} pts</span>
+                <span className="text-xs text-[#888]">{p.score} pts</span>
-                {p.hasWon && <span className="sidebar-player-won">Gagne !</span>}
+                {p.hasWon && <span className="text-[11px] text-green-400 font-bold">Gagné !</span>}
               </li>
             ))}
           </ul>

app/components/HomeScreen.tsx

@@ -26,40 +26,54 @@ export function HomeScreen({
   session, onShowAuth, onShowProfile, onShowLeaderboard,
 }: HomeScreenProps) {
   return (
-    <div className="screen home-screen">
+    <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">
-      <div className="home-topbar">
+      {/* Topbar */}
-        <button className="btn btn-ghost btn-sm" onClick={onShowLeaderboard}>
+      <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}>
+          <button
-            <span className="account-avatar">{session.user.name?.[0]?.toUpperCase() ?? "?"}</span>
+            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"
-            <span className="account-name">{session.user.name}</span>
+            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">
+      {/* Hero */}
-        <Image src="/wikirush.png" alt="WikiRush" width={320} height={320} className="home-logo-img" priority />
+      <div className="text-center">
-        <p className="home-subtitle">
+        <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 && (
+      {/* Form */}
-        <div className="error-banner">
+      <div className="w-full max-w-[400px] flex flex-col gap-4">
-          {error}
+        {error && (
-          <button onClick={() => setError(null)} className="error-close">x</button>
+          <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">
-        </div>
+            {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="flex flex-col gap-4">
-          <div className="home-section">
+          {/* Multijoueur */}
-            <h3>Multijoueur</h3>
+          <div className="bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-5 flex flex-col gap-3">
-            <button className="btn btn-primary" onClick={onCreateRoom} disabled={loading}>
+            <h3 className="text-xs font-bold text-[#888] uppercase tracking-wider">Multijoueur</h3>
-              {loading ? "Creation..." : "Creer une partie"}
+            <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">
+          {/* Solo */}
-            <h3>Solo</h3>
+          <div className="bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-5 flex flex-col gap-3">
-            <button className="btn btn-ghost" onClick={onSolo}>
+            <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>

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) => {
+  const sorted = [...rows]
-    if (mode === "solo") return b.soloWins - a.soloWins || b.soloGames - a.soloGames;
+    .filter((r) => {
-    if (mode === "multi") return b.multiWins - a.multiWins || b.multiGames - a.multiGames;
+      if (mode === "solo") return r.soloGames > 0;
-    return b.wins - a.wins || b.totalGames - a.totalGames;
+      if (mode === "multi") return r.multiGames > 0;
-  }).filter((r) => {
+      return true;
-    if (mode === "solo") return r.soloGames > 0;
+    })
-    if (mode === "multi") return r.multiGames > 0;
+    .sort((a, b) => {
-    return true;
+      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="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in max-w-160 mx-auto px-4 py-6 pb-12">
-      <div className="leaderboard-header">
+      {/* Header */}
-        <button className="btn btn-ghost btn-back" onClick={onBack}>Retour</button>
+      <div className="flex items-center gap-4 mb-6">
-        <h2 className="leaderboard-title">Classement</h2>
+        <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" : ""}`}>
+              <div
-                <span className="lb-rank">{MEDALS[i] ?? `#${i + 1}`}</span>
+                key={row.id}
-                <span className="lb-name">{row.name}</span>
+                className={`flex items-center gap-3 px-4 py-3.5 rounded-xl border ${isTop ? "border-[#7c3aed] bg-[#7c3aed]/8" : "border-[#2e2e2e] bg-[#1a1a1a]"}`}
-                <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="text-xl w-8 text-center shrink-0">{MEDALS[i] ?? `#${i + 1}`}</span>
-                  <span className="lb-stat"><span className="lb-stat-val">{games}</span><span className="lb-stat-label">parties</span></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>

app/components/LobbyScreen.tsx

@@ -28,52 +28,82 @@ export function LobbyScreen({
   }
 
   return (
-    <div className="screen lobby-screen">
+    <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="btn btn-ghost btn-back" onClick={onLeave}>Quitter</button>
+      <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">
+      {/* Code block */}
-        <span className="lobby-code-label">Code de la salle</span>
+      <div className="w-full text-center bg-[#1a1a1a] border border-[#2e2e2e] rounded-xl p-6">
-        <button className="lobby-code-copy" onClick={copyCode} title="Copier le code">
+        <span className="block text-xs text-[#888] uppercase tracking-widest mb-2">Code de la salle</span>
-          <span className="lobby-code">{room.code}</span>
+        <button
-          <span className="lobby-copy-icon">{copied ? "✓" : "⧉"}</span>
+          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">
+      {/* Players */}
-        <h3 className="lobby-section-title">Joueurs ({room.players.length}/8)</h3>
+      <div className="w-full">
-        <ul className="player-list">
+        <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" : ""}`}>
+            <li
-              <span className="player-name">{p.name}</span>
+              key={p.id}
-              {p.isHost && <span className="player-badge host">Hote</span>}
+              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]"}`}
-              {p.id === playerId && <span className="player-badge you">Toi</span>}
+            >
-              <span className="player-score">{p.score} pts</span>
+              <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">
+        <div className="w-full flex flex-col gap-2.5">
-          <button className="btn btn-primary" onClick={onStart} disabled={loading}>
+          <button
-            {loading ? "Preparation..." : room.round === 0 ? "Demarrer la partie" : "Manche suivante"}
+            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>
   );

app/components/ProfileScreen.tsx

@@ -42,13 +42,7 @@ function computeStats(games: Game[]): Stats {
   };
 }
 
-export function ProfileScreen({
+export function ProfileScreen({ userName, onBack }: { userName: string; onBack: () => void }) {
-  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="min-h-dvh w-full bg-[#0f0f0f] text-[#f0f0f0] animate-fade-in flex flex-col max-w-175 mx-auto px-4 pb-10">
-      <div className="profile-header">
+      {/* Header */}
-        <button className="btn btn-ghost btn-back" onClick={onBack}>← Retour</button>
+      <div className="flex items-center justify-between py-4 gap-3">
-        <div className="profile-title">
+        <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}>
-          <span className="profile-avatar">{userName[0].toUpperCase()}</span>
+          ← Retour
-          <h2 className="profile-name">{userName}</h2>
+        </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">
+      {/* Stats grid */}
-        <div className="stat-card">
+      <div className="grid grid-cols-3 gap-2.5 my-4">
-          <span className="stat-card-value">{stats.total}</span>
+        <div className={statCardCls}>
-          <span className="stat-card-label">Parties</span>
+          <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">
+        <div className={statCardCls}>
-          <span className="stat-card-value">{stats.won}</span>
+          <span className="text-[22px] font-black">{stats.won}</span>
-          <span className="stat-card-label">Victoires</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Victoires</span>
         </div>
-        <div className="stat-card">
+        <div className={statCardCls}>
-          <span className="stat-card-value">{stats.avgClicks > 0 ? stats.avgClicks : "—"}</span>
+          <span className="text-[22px] font-black">{stats.avgClicks > 0 ? stats.avgClicks : "—"}</span>
-          <span className="stat-card-label">Clics moy.</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Clics moy.</span>
         </div>
-        <div className="stat-card">
+        <div className={statCardCls}>
-          <span className="stat-card-value">{stats.avgTime > 0 ? fmt(stats.avgTime) : "—"}</span>
+          <span className="text-[22px] font-black">{stats.avgTime > 0 ? fmt(stats.avgTime) : "—"}</span>
-          <span className="stat-card-label">Temps moy.</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Temps moy.</span>
         </div>
-        <div className="stat-card accent">
+        <div className={`${statCardCls} border-[#7c3aed]`}>
-          <span className="stat-card-value">{stats.bestClicks > 0 ? stats.bestClicks : "—"}</span>
+          <span className="text-[22px] font-black text-[#7c3aed]">{stats.bestClicks > 0 ? stats.bestClicks : "—"}</span>
-          <span className="stat-card-label">Meilleur clics</span>
+          <span className="text-[11px] uppercase tracking-wider text-[#888]">Meilleur clics</span>
         </div>
-        <div className="stat-card accent">
+        <div className={`${statCardCls} border-[#7c3aed]`}>
-          <span className="stat-card-value">{stats.bestTime > 0 ? fmt(stats.bestTime) : "—"}</span>
+          <span className="text-[22px] font-black text-[#7c3aed]">{stats.bestTime > 0 ? fmt(stats.bestTime) : "—"}</span>
-          <span className="stat-card-label">Meilleur temps</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">
+      {/* Game list */}
-        {loading && <div className="article-loading"><div className="loading-spinner" /> Chargement...</div>}
+      <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 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="game-card-top">
+            <div className="flex items-center gap-2.5 text-xs">
-              <span className="game-card-mode">{g.mode === "solo" ? "Solo" : "Multi"}</span>
+              <span className="bg-[#242424] rounded px-2 py-0.5 font-semibold text-[#888]">{g.mode === "solo" ? "Solo" : "Multi"}</span>
-              <span className="game-card-date">{new Date(g.playedAt).toLocaleDateString("fr-FR")}</span>
+              <span className="text-[#888] ml-auto">{new Date(g.playedAt).toLocaleDateString("fr-FR")}</span>
-              <span className={`game-card-result ${g.won ? "won" : "lost"}`}>{g.won ? "Victoire" : "Abandon"}</span>
+              <span className={`font-bold ${g.won ? "text-[#16a34a]" : "text-[#888]"}`}>{g.won ? "Victoire" : "Abandon"}</span>
             </div>
-            <div className="game-card-route">
+            <div className="flex items-center gap-2 text-sm font-semibold flex-wrap">
-              <span className="game-card-start">{g.startArticle}</span>
+              <span>{g.startArticle}</span>
-              <span className="game-card-arrow">→</span>
+              <span className="text-[#888]">→</span>
-              <span className="game-card-target">{g.targetArticle}</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">
+                  <span key={i} className="flex items-center gap-1">
-                    {i > 0 && <span className="game-path-sep">›</span>}
+                    {i > 0 && <span className="text-[#555]">›</span>}
-                    <span className={i === g.path.length - 1 && g.won ? "game-path-end" : ""}>{t}</span>
+                    <span className={i === g.path.length - 1 && g.won ? "text-[#16a34a] font-semibold" : ""}>{t}</span>
                   </span>
                 ))}
               </div>

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 (
+  if (phase === "setup") return (
-    <div className="screen solo-screen">
+    <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">
-      {phase === "setup" && (
+      <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}>
-        <div className="center-content">
+        Retour
-          <button className="btn btn-ghost btn-back" onClick={onQuit}>Retour</button>
+      </button>
-          <h2 className="section-title">Mode Solo</h2>
+      <h2 className="text-3xl font-black">Mode Solo</h2>
-          <p className="section-desc">
+      <p className="text-[#888] text-sm leading-relaxed">
-            Deux articles aleatoires seront choisis. Atteins l&apos;article cible en cliquant uniquement sur les liens !
+        Deux articles aléatoires seront choisis. Atteins l&apos;article cible en cliquant uniquement sur les liens !
-          </p>
+      </p>
-          <button className="btn btn-primary" onClick={onStart} disabled={loading}>
+      <button
-            {loading ? "Preparation..." : "Lancer une partie"}
+        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" && (
+  // playing
-        <>
+  return (
-          <div className="game-main">
+    <div className="min-h-dvh w-full bg-[#0f0f0f] flex flex-col">
-            <div className="article-container">
+      {/* Article */}
-              {title && <h1 className="article-title">{title}</h1>}
+      <div className="flex-1 overflow-y-auto bg-white">
-              {loading && (
+        <div className="article-container">
-                <div className="article-loading">
+          {title && <h1 className="article-title">{title}</h1>}
-                  <div className="loading-spinner" />
+          {loading && (
-                  Chargement...
+            <div className="flex items-center gap-3 py-10 px-4 text-[#888]">
-                </div>
+              <div className="spinner" /> Chargement...
-              )}
-              {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} />
-              )}
             </div>
-          </div>
+          )}
-
+          {loadError && (
-          <div className="solo-bottombar">
+            <div className="flex flex-col items-center gap-4 py-10 px-4 text-center">
-            <div className="breadcrumb-zone">
+              <p className="text-[#888]">{loadError}</p>
-              <span className="breadcrumb-label">VOUS DEVEZ TROUVER</span>
+              <button className="min-h-11 px-5 rounded-xl text-sm font-semibold bg-[#2563eb] text-white hover:bg-[#1d4ed8] cursor-pointer" onClick={onRetry}>
-              <span className="breadcrumb-target">{puzzle?.target}</span>
+                Réessayer
-              <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
               </button>
             </div>
-          </div>
+          )}
-        </>
+          {!loading && !loadError && html && (
-      )}
+            <ArticleView html={html} onNavigate={onNavigate} disabled={loading} />
-
+          )}
-      {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>
         </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>
   );
 }