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/scss/components/game-panels.scss

@@ -0,0 +1,172 @@
+// game-panels.scss — Système de style partagé pour tous les panels du cockpit
+// Modifier les tokens dans root.scss, pas ici.
+
+// --- Panel de base ---
+.gp {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gp-gap);
+  padding: var(--gp-padding);
+  background: var(--gp-bg);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--gp-border);
+  border-radius: var(--gp-radius);
+}
+
+.gp-title {
+  font-family: var(--font);
+  font-size: var(--gp-title);
+  font-weight: 700;
+  color: var(--gp-text-color);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.gp-label {
+  font-family: var(--font);
+  font-size: var(--gp-text-sm);
+  font-weight: 500;
+  color: var(--gp-text-muted);
+}
+
+.gp-value {
+  font-family: var(--font);
+  font-size: var(--gp-text);
+  font-weight: 600;
+  color: var(--gp-text-color);
+}
+
+.gp-accent-green { color: var(--gp-accent-green); }
+.gp-accent-purple { color: var(--gp-accent-purple); }
+.gp-accent-amber { color: var(--gp-accent-amber); }
+
+// --- Row item (générateur, noeud évolution) ---
+.gp-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.4rem;
+  padding: 0.4rem 0.5rem;
+  border-radius: calc(var(--gp-radius) - 0.15rem);
+  border: 1px solid transparent;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.gp-row--active {
+  border-color: rgba(16, 185, 129, 0.3);
+  background: var(--gp-accent-green-bg);
+
+  &:hover {
+    background: rgba(16, 185, 129, 0.18);
+  }
+}
+
+.gp-row--locked {
+  border-color: var(--gp-border);
+  background: rgba(255, 255, 255, 0.02);
+  opacity: 0.5;
+}
+
+.gp-row--evolution {
+  border-color: rgba(251, 191, 36, 0.3);
+  background: var(--gp-accent-amber-bg);
+}
+
+.gp-row--unlocked {
+  border-color: rgba(16, 185, 129, 0.3);
+  background: var(--gp-accent-green-bg);
+}
+
+// --- Bouton achat ---
+.gp-btn {
+  font-family: var(--font);
+  font-size: var(--gp-text-sm);
+  font-weight: 600;
+  padding: 0.3rem 0.6rem;
+  border-radius: 0.4rem;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  white-space: nowrap;
+}
+
+.gp-btn--buy {
+  background: var(--gp-btn-bg);
+  color: white;
+
+  &:hover {
+    background: var(--gp-btn-bg-hover);
+  }
+}
+
+.gp-btn--disabled {
+  background: var(--gp-btn-disabled);
+  color: var(--gp-btn-text-disabled);
+  cursor: not-allowed;
+}
+
+.gp-btn--prestige {
+  background: #7c3aed;
+  color: white;
+  padding: 0.4rem 0.8rem;
+  font-size: var(--gp-text);
+  animation: gp-pulse 2s ease-in-out infinite;
+
+  &:hover {
+    background: #8b5cf6;
+  }
+}
+
+@keyframes gp-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
+  50% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); }
+}
+
+// --- Header cockpit (stats résumé) ---
+.gp-cockpit-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+
+.gp-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.1rem;
+  min-width: 3.5rem;
+}
+
+// --- Progress bar ---
+.gp-progress {
+  height: 0.35rem;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 1rem;
+  overflow: hidden;
+}
+
+.gp-progress-fill {
+  height: 100%;
+  border-radius: 1rem;
+  transition: width 0.5s ease;
+}
+
+// --- Section separator ---
+.gp-sep {
+  height: 1px;
+  background: var(--gp-border);
+  margin: 0.15rem 0;
+}
+
+// --- Zone titles in sidebar ---
+.gp-zone-label {
+  font-family: var(--font);
+  font-size: var(--gp-text-sm);
+  font-weight: 600;
+  color: var(--gp-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding-left: 0.2rem;
+}