feat: UX game — stats live, production détaillée, prestige visible, badge achievements

- Click-zone : production/s, puissance ponte, multiplicateur toujours visibles
- GeneratorShop : production totale en header, prod individuelle par générateur
- PrestigePanel : toujours affiché (hint "Atteins 1M" si pas encore dispo)
- Badge achievements X/27 dans la sidebar avec lien vers /achievements
- Landing : tadpole sprite animé en accroche visuelle

Frontend/src/pages/Home.jsx

@@ -8,6 +8,7 @@ import { GeneratorShop } from "../components/GeneratorShop";
 import { PrestigePanel } from "../components/PrestigePanel";
 import { EvolutionTree } from "../components/EvolutionTree";
 import { MilestoneBar } from "../components/MilestoneBar";
+import { ACHIEVEMENTS } from "../data/achievements";
 import "../scss/home.scss";
 
 export default function Home() {
@@ -15,6 +16,9 @@ export default function Home() {
   const click = useGameStore((s) => s.click);
   const resources = useGameStore((s) => s.state.resources);
   const clickMultiplier = useGameStore((s) => s.state.clickMultiplier);
+  const productionPerSecond = useGameStore((s) => s.productionPerSecond);
+  const state = useGameStore((s) => s.state);
+  const prestigeMultiplier = state.prestigeMultiplier;
 
   const createParticle = useCallback((clientX, clientY) => {
     const particle = document.createElement("span");
@@ -114,8 +118,17 @@ export default function Home() {
       {/* Clicker area — centre */}
       <div className="click-zone" onClick={handleIncrement}>
         <div className="tadpole-sprite" />
-        <div className="text-center text-3xl md:text-4xl font-bold text-white drop-shadow-lg font-[var(--font)] select-none pointer-events-none">
-          {formatNumber(resources)}
+        <div className="click-zone-stats">
+          <div className="text-center text-3xl md:text-4xl font-bold text-white drop-shadow-lg font-[var(--font)] select-none pointer-events-none">
+            {formatNumber(resources)}
+          </div>
+          <div className="stats-bar">
+            <span>{formatNumber(productionPerSecond)}/s</span>
+            <span className="stats-sep">·</span>
+            <span>x{clickMultiplier} ponte</span>
+            <span className="stats-sep">·</span>
+            <span>x{prestigeMultiplier.toFixed(1)} mult</span>
+          </div>
         </div>
       </div>
 
@@ -125,6 +138,9 @@ export default function Home() {
         <GeneratorShop />
         <PrestigePanel />
         <EvolutionTree />
+        <a href="/achievements" className="achieve-badge">
+          {ACHIEVEMENTS.filter((a) => a.check(state)).length}/{ACHIEVEMENTS.length} succès
+        </a>
       </aside>
     </main>
   );

Frontend/src/pages/Landing.jsx

@@ -11,8 +11,14 @@ export default function Landing() {
           content="Clickerz — Clicker idle dans le Tetard Universe. Fais éclore des têtards, évolue et domine le marais !"
         />
       </Helmet>
-      <main className="min-h-[92vh] mt-20 flex flex-col items-center justify-center gap-8 bg-[var(--bg-color)]">
-        <div className="flex flex-col items-center gap-4 text-center px-4">
+      <main className="min-h-[92vh] mt-20 flex flex-col items-center justify-center gap-6 bg-[var(--bg-color)]">
+        <img
+          src="/svg/tadpole.svg"
+          alt="Têtard Clickerz"
+          className="w-40 h-40 md:w-52 md:h-52 drop-shadow-lg animate-bounce"
+          style={{ animationDuration: "3s" }}
+        />
+        <div className="flex flex-col items-center gap-3 text-center px-4">
           <h1 className="text-4xl md:text-6xl font-bold text-gray-800 font-[var(--font)]">
             Clickerz
           </h1>