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/components/GeneratorShop.tsx

@@ -11,12 +11,10 @@ export function GeneratorShop() {
   const generatorCost = useGameStore((s) => s.generatorCost);
 
   return (
-    <div className="flex flex-col gap-2 p-4 rounded-xl bg-gray-900/80 backdrop-blur-sm max-w-md w-full">
-      <div className="flex justify-between items-center">
-        <h2 className="text-sm font-bold text-white">Générateurs</h2>
-        <span className="text-xs text-emerald-400 font-medium">
-          {formatNumber(productionPerSecond)}/s
-        </span>
+    <div className="gp">
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <span className="gp-title">Générateurs</span>
+        <span className="gp-value gp-accent-green">{formatNumber(productionPerSecond)}/s</span>
       </div>
       {generators.map((gen) => {
         const cost = generatorCost(gen);
@@ -26,32 +24,24 @@ export function GeneratorShop() {
         return (
           <div
             key={gen.id}
-            className={`flex items-center justify-between gap-2 p-2.5 rounded-lg border transition-colors ${
-              canAfford
-                ? "border-emerald-500/50 bg-emerald-950/30 hover:bg-emerald-950/50"
-                : "border-gray-700/50 bg-gray-800/30 opacity-60"
-            }`}
+            className={`gp-row ${canAfford ? "gp-row--active" : "gp-row--locked"}`}
           >
-            <div className="flex flex-col min-w-0">
-              <div className="flex items-center gap-2">
-                <span className="text-white font-semibold text-sm">{gen.name}</span>
+            <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: "0.3rem" }}>
+                <span className="gp-value">{gen.name}</span>
                 {gen.owned > 0 && (
-                  <span className="text-emerald-400 text-xs font-medium">x{gen.owned}</span>
+                  <span className="gp-label gp-accent-green">x{gen.owned}</span>
                 )}
               </div>
-              <span className="text-gray-400 text-xs">
-                +{gen.baseProduction}/s chacun
+              <span className="gp-label">
+                +{gen.baseProduction}/s
                 {gen.owned > 0 && ` · ${formatNumber(currentProd)}/s total`}
               </span>
             </div>
             <button
               onClick={() => buy(gen.id)}
               disabled={!canAfford}
-              className={`shrink-0 px-3 py-1.5 rounded-md text-xs font-medium transition-colors cursor-pointer ${
-                canAfford
-                  ? "bg-emerald-600 hover:bg-emerald-500 text-white"
-                  : "bg-gray-700 text-gray-500 cursor-not-allowed"
-              }`}
+              className={`gp-btn ${canAfford ? "gp-btn--buy" : "gp-btn--disabled"}`}
             >
               {formatNumber(cost)}
             </button>