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/CockpitHeader.tsx

@@ -0,0 +1,37 @@
+// CockpitHeader.tsx — Dashboard résumé toujours visible en haut du cockpit
+
+import { useGameStore } from "../store/useGameStore";
+import { formatNumber } from "../utils/formatNumber";
+
+export function CockpitHeader() {
+  const productionPerSecond = useGameStore((s) => s.productionPerSecond);
+  const { clickMultiplier, prestigeMultiplier, ancestralDna, prestigeCount } =
+    useGameStore((s) => s.state);
+
+  return (
+    <div className="gp gp-cockpit-header">
+      <div className="gp-stat">
+        <span className="gp-label">Prod/s</span>
+        <span className="gp-value gp-accent-green">
+          {formatNumber(productionPerSecond)}
+        </span>
+      </div>
+      <div className="gp-stat">
+        <span className="gp-label">Ponte</span>
+        <span className="gp-value">x{clickMultiplier}</span>
+      </div>
+      <div className="gp-stat">
+        <span className="gp-label">Mult</span>
+        <span className="gp-value">x{prestigeMultiplier.toFixed(1)}</span>
+      </div>
+      <div className="gp-stat">
+        <span className="gp-label">ADN</span>
+        <span className="gp-value gp-accent-purple">{ancestralDna}</span>
+      </div>
+      <div className="gp-stat">
+        <span className="gp-label">Gén.</span>
+        <span className="gp-value">{prestigeCount}</span>
+      </div>
+    </div>
+  );
+}