feat: cockpit sidebar — design tokens, panels harmonisés, header stats fixe

- Design tokens game dans root.scss (--gp-*) — un seul endroit pour thémiser
- game-panels.scss : classes partagées (gp, gp-row, gp-btn, gp-progress, etc.)
- CockpitHeader : dashboard résumé (prod/s, ponte, mult, ADN, génération)
- Tous les panels refactorisés sur le système gp-* (tailles, couleurs, spacing)
- Sidebar structurée en zones : header → progression → générateurs → prestige → évolution

Frontend/src/pages/Home.jsx

@@ -8,17 +8,16 @@ import { GeneratorShop } from "../components/GeneratorShop";
 import { PrestigePanel } from "../components/PrestigePanel";
 import { EvolutionTree } from "../components/EvolutionTree";
 import { MilestoneBar } from "../components/MilestoneBar";
+import { CockpitHeader } from "../components/CockpitHeader";
 import { ACHIEVEMENTS } from "../data/achievements";
 import "../scss/home.scss";
+import "../scss/components/game-panels.scss";
 
 export default function Home() {
   const [toggleRain] = useOutletContext();
   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");
@@ -122,24 +121,20 @@ export default function Home() {
           <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>
 
-      {/* Game panels — sidebar (right desktop, bottom mobile) */}
+      {/* Cockpit — sidebar structurée en zones */}
       <aside className="game-sidebar">
+        <CockpitHeader />
+        <div className="gp-sep" />
         <MilestoneBar />
         <GeneratorShop />
+        <div className="gp-sep" />
         <PrestigePanel />
         <EvolutionTree />
         <a href="/achievements" className="achieve-badge">
-          {ACHIEVEMENTS.filter((a) => a.check(state)).length}/{ACHIEVEMENTS.length} succès
+          {ACHIEVEMENTS.filter((a) => a.check(useGameStore.getState().state)).length}/{ACHIEVEMENTS.length} succès
         </a>
       </aside>
     </main>