feat: migrate frontend React 18 → Svelte 5 + SvelteKit

Core logic portable (economy, balance, cosmetics, migrateSave) — zero rewrite.
136 tests green, identiques. Backend inchangé.

- Svelte 5 runes stores (game, auth, toast) remplacent Zustand
- SvelteKit adapter-static SPA (dist/ output, fallback index.html)
- Tailwind v4 conservé, design system .gp-* porté
- Transitions natives : slide, fly, scale, fade sur toute l'UI
- Sidebar tabbée (Production/Evolution/Collection) + CollapsiblePanel
- Mobile bottom sheet avec FAB toggle + backdrop blur
- Click particles réactifs Svelte (plus de DOM impératif)
- TadpoleSprite bounce + glow ring au clic
- Guide refait en accordéon, Achievements avec filtres
- a11y : focus-visible, Escape modals, aria-current, aria-labels
- CI/CD adapté (tests + build + rsync)
- Build 504K (vs ~1.2MB React)

Frontend/static/svg/aura-swamp.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="320" height="320" shape-rendering="crispEdges">
+  <!-- Aura: Swamp — default cosmetic overlay -->
+  <!-- Same 32x32 grid as tadpole.svg, overlaid on top -->
+
+  <!-- ===== SEAWEED LEFT ===== -->
+  <rect x="0" y="10" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="11" width="1" height="1" fill="#4a8070"/>
+  <rect x="0" y="12" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="13" width="1" height="1" fill="#4a8070"/>
+  <rect x="0" y="14" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="15" width="1" height="1" fill="#4a8070"/>
+  <rect x="0" y="16" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="17" width="1" height="1" fill="#4a8070"/>
+  <rect x="0" y="18" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="19" width="1" height="1" fill="#4a8070"/>
+  <rect x="0" y="20" width="1" height="1" fill="#4a8070"/>
+  <rect x="1" y="21" width="1" height="1" fill="#4a8070"/>
+
+  <!-- ===== SEAWEED RIGHT ===== -->
+  <rect x="30" y="10" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="11" width="1" height="1" fill="#4a8070"/>
+  <rect x="30" y="12" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="13" width="1" height="1" fill="#4a8070"/>
+  <rect x="30" y="14" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="15" width="1" height="1" fill="#4a8070"/>
+  <rect x="30" y="16" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="17" width="1" height="1" fill="#4a8070"/>
+  <rect x="30" y="18" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="19" width="1" height="1" fill="#4a8070"/>
+  <rect x="30" y="20" width="1" height="1" fill="#4a8070"/>
+  <rect x="31" y="21" width="1" height="1" fill="#4a8070"/>
+
+  <!-- ===== WATER RIPPLE ===== -->
+  <rect x="6" y="27" width="13" height="1" fill="#3888d8"/>
+  <rect x="7" y="28" width="11" height="1" fill="#58a8e8"/>
+  <rect x="8" y="29" width="9" height="1" fill="#58a8e8" opacity="0.5"/>
+
+  <!-- ===== BUBBLES ===== -->
+  <rect x="1" y="6" width="1" height="1" fill="#50aab8" opacity="0.6"/>
+  <rect x="0" y="7" width="1" height="1" fill="#50aab8" opacity="0.4"/>
+  <rect x="2" y="5" width="1" height="1" fill="#50aab8" opacity="0.35"/>
+  <rect x="29" y="5" width="1" height="1" fill="#50aab8" opacity="0.5"/>
+  <rect x="30" y="6" width="1" height="1" fill="#50aab8" opacity="0.35"/>
+</svg>

Frontend/static/svg/cosmetics/armor-scales.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g fill="#6b7280" opacity="0.5"><ellipse cx="13" cy="16" rx="3" ry="2"/><ellipse cx="19" cy="16" rx="3" ry="2"/><ellipse cx="16" cy="20" rx="3" ry="2"/><ellipse cx="13" cy="24" rx="3" ry="2"/><ellipse cx="19" cy="24" rx="3" ry="2"/></g></svg>

Frontend/static/svg/cosmetics/cap-swamp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><ellipse cx="16" cy="8" rx="10" ry="4" fill="#34d399"/><rect x="6" y="7" width="20" height="3" rx="1" fill="#059669"/></svg>

Frontend/static/svg/cosmetics/cape-algae.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10,14 Q6,20 8,28 L16,26 L24,28 Q26,20 22,14Z" fill="#059669" opacity="0.5"/></svg>

Frontend/static/svg/cosmetics/crown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon points="8,10 11,4 16,8 21,4 24,10" fill="#fbbf24"/><rect x="8" y="10" width="16" height="3" rx="1" fill="#f59e0b"/></svg>

Frontend/static/svg/cosmetics/flame-tail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M14,22 Q12,18 16,16 Q20,18 18,22 Q20,20 18,26 Q16,28 14,26 Q12,24 14,22Z" fill="#f59e0b" opacity="0.8"/></svg>

Frontend/static/svg/cosmetics/glasses-savant.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="11" cy="13" r="3" fill="none" stroke="#a78bfa" stroke-width="1.5"/><circle cx="21" cy="13" r="3" fill="none" stroke="#a78bfa" stroke-width="1.5"/><line x1="14" y1="13" x2="18" y2="13" stroke="#a78bfa" stroke-width="1"/></svg>

Frontend/static/svg/cosmetics/mask-frog.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M8,12 Q16,18 24,12 Q24,16 16,17 Q8,16 8,12Z" fill="#34d399" opacity="0.7"/></svg>

Frontend/static/svg/cosmetics/particles-gold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g fill="#fbbf24" opacity="0.6"><circle cx="6" cy="8" r="1.2"/><circle cx="26" cy="6" r="1"/><circle cx="4" cy="20" r="0.8"/><circle cx="28" cy="22" r="1.2"/><circle cx="10" cy="28" r="1"/><circle cx="22" cy="30" r="0.8"/><circle cx="16" cy="2" r="1"/><circle cx="2" cy="14" r="0.8"/><circle cx="30" cy="14" r="1"/></g></svg>

Frontend/static/svg/cosmetics/ribbon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M12,22 L16,20 L20,22 L18,26 L16,24 L14,26Z" fill="#ec4899"/><circle cx="16" cy="21" r="2" fill="#f472b6"/></svg>

Frontend/static/svg/tadpole.svg

@@ -0,0 +1,139 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="320" height="320" shape-rendering="crispEdges">
+  <!-- Kawaii Tadpole V5 — pixel art 32x32 — BASE ONLY (no auras) -->
+  <!-- Character fills ~90% of canvas. Auras = separate overlay files. -->
+
+  <!-- ===== TAIL (behind body) ===== -->
+  <g id="tail">
+    <!-- Outline (darkest green, full shape) -->
+    <rect x="28" y="3" width="3" height="1" fill="#1c4c0c"/>
+    <rect x="26" y="4" width="6" height="1" fill="#1c4c0c"/>
+    <rect x="24" y="5" width="8" height="1" fill="#1c4c0c"/>
+    <rect x="19" y="6" width="12" height="1" fill="#1c4c0c"/>
+    <rect x="20" y="7" width="11" height="1" fill="#1c4c0c"/>
+    <rect x="21" y="8" width="9" height="1" fill="#1c4c0c"/>
+    <rect x="22" y="9" width="7" height="1" fill="#1c4c0c"/>
+    <rect x="22" y="10" width="6" height="1" fill="#1c4c0c"/>
+    <rect x="23" y="11" width="4" height="1" fill="#1c4c0c"/>
+    <rect x="23" y="12" width="4" height="1" fill="#1c4c0c"/>
+    <rect x="23" y="13" width="3" height="1" fill="#1c4c0c"/>
+    <rect x="23" y="14" width="3" height="1" fill="#1c4c0c"/>
+    <rect x="23" y="15" width="3" height="1" fill="#1c4c0c"/>
+    <rect x="23" y="16" width="2" height="1" fill="#1c4c0c"/>
+    <rect x="23" y="17" width="2" height="1" fill="#1c4c0c"/>
+    <!-- Fill (dark green) -->
+    <rect x="27" y="4" width="4" height="1" fill="#2c6410"/>
+    <rect x="25" y="5" width="6" height="1" fill="#2c6410"/>
+    <rect x="20" y="6" width="10" height="1" fill="#2c6410"/>
+    <rect x="21" y="7" width="9" height="1" fill="#2c6410"/>
+    <rect x="22" y="8" width="7" height="1" fill="#2c6410"/>
+    <rect x="23" y="9" width="5" height="1" fill="#2c6410"/>
+    <rect x="23" y="10" width="4" height="1" fill="#2c6410"/>
+    <rect x="24" y="11" width="2" height="1" fill="#2c6410"/>
+    <rect x="24" y="12" width="2" height="1" fill="#2c6410"/>
+    <rect x="24" y="13" width="1" height="1" fill="#2c6410"/>
+    <!-- Highlight (lighter green, upper curve) -->
+    <rect x="28" y="4" width="2" height="1" fill="#50a020"/>
+    <rect x="26" y="5" width="4" height="1" fill="#50a020"/>
+    <rect x="21" y="6" width="5" height="1" fill="#50a020"/>
+    <rect x="22" y="7" width="4" height="1" fill="#50a020"/>
+    <rect x="23" y="8" width="3" height="1" fill="#50a020"/>
+    <rect x="24" y="9" width="2" height="1" fill="#50a020"/>
+    <!-- Tip accent -->
+    <rect x="29" y="3" width="1" height="1" fill="#68b830"/>
+    <rect x="30" y="4" width="1" height="1" fill="#50aab8" opacity="0.5"/>
+    <rect x="31" y="3" width="1" height="1" fill="#50aab8" opacity="0.35"/>
+  </g>
+
+  <!-- ===== BODY (head, on top of tail) ===== -->
+  <g id="body">
+    <!-- Black outline circle (outer r=11, center 12,15) -->
+    <rect x="8" y="5" width="9" height="1" fill="#111"/>
+    <rect x="6" y="6" width="13" height="1" fill="#111"/>
+    <rect x="5" y="7" width="15" height="1" fill="#111"/>
+    <rect x="4" y="8" width="17" height="1" fill="#111"/>
+    <rect x="3" y="9" width="19" height="1" fill="#111"/>
+    <rect x="3" y="10" width="19" height="1" fill="#111"/>
+    <rect x="2" y="11" width="21" height="1" fill="#111"/>
+    <rect x="2" y="12" width="21" height="1" fill="#111"/>
+    <rect x="2" y="13" width="21" height="1" fill="#111"/>
+    <rect x="2" y="14" width="21" height="1" fill="#111"/>
+    <rect x="1" y="15" width="23" height="1" fill="#111"/>
+    <rect x="2" y="16" width="21" height="1" fill="#111"/>
+    <rect x="2" y="17" width="21" height="1" fill="#111"/>
+    <rect x="2" y="18" width="21" height="1" fill="#111"/>
+    <rect x="2" y="19" width="21" height="1" fill="#111"/>
+    <rect x="3" y="20" width="19" height="1" fill="#111"/>
+    <rect x="3" y="21" width="19" height="1" fill="#111"/>
+    <rect x="4" y="22" width="17" height="1" fill="#111"/>
+    <rect x="5" y="23" width="15" height="1" fill="#111"/>
+    <rect x="6" y="24" width="13" height="1" fill="#111"/>
+    <rect x="8" y="25" width="9" height="1" fill="#111"/>
+
+    <!-- Green fill (inner r=10) — Band 1: lightest top -->
+    <rect x="12" y="5" width="1" height="1" fill="#d0f058"/>
+    <rect x="8" y="6" width="9" height="1" fill="#d0f058"/>
+    <rect x="6" y="7" width="13" height="1" fill="#d0f058"/>
+    <rect x="5" y="8" width="15" height="1" fill="#d0f058"/>
+    <!-- Band 2: light -->
+    <rect x="4" y="9" width="17" height="1" fill="#a8d830"/>
+    <rect x="4" y="10" width="17" height="1" fill="#a8d830"/>
+    <rect x="3" y="11" width="19" height="1" fill="#a8d830"/>
+    <!-- Band 3: medium (center, largest area) -->
+    <rect x="3" y="12" width="19" height="1" fill="#80c020"/>
+    <rect x="3" y="13" width="19" height="1" fill="#80c020"/>
+    <rect x="3" y="14" width="19" height="1" fill="#80c020"/>
+    <rect x="2" y="15" width="21" height="1" fill="#80c020"/>
+    <rect x="3" y="16" width="19" height="1" fill="#80c020"/>
+    <rect x="3" y="17" width="19" height="1" fill="#80c020"/>
+    <rect x="3" y="18" width="19" height="1" fill="#80c020"/>
+    <!-- Band 4: dark -->
+    <rect x="3" y="19" width="19" height="1" fill="#60a418"/>
+    <rect x="4" y="20" width="17" height="1" fill="#60a418"/>
+    <rect x="4" y="21" width="17" height="1" fill="#60a418"/>
+    <rect x="5" y="22" width="15" height="1" fill="#60a418"/>
+    <!-- Band 5: darkest bottom -->
+    <rect x="6" y="23" width="13" height="1" fill="#4c8c14"/>
+    <rect x="8" y="24" width="9" height="1" fill="#4c8c14"/>
+    <rect x="12" y="25" width="1" height="1" fill="#4c8c14"/>
+
+    <!-- Specular highlight (top-left) -->
+    <rect x="8" y="6" width="3" height="1" fill="#e8ff78"/>
+    <rect x="6" y="7" width="3" height="1" fill="#e8ff78"/>
+    <rect x="6" y="8" width="2" height="1" fill="#e8ff78"/>
+  </g>
+
+  <!-- ===== EYES (big, expressive, pixel art) ===== -->
+  <g id="eyes">
+    <!-- Left eye — black pupil (5x6) -->
+    <rect x="6" y="12" width="5" height="6" fill="#111"/>
+    <!-- Left eye — white highlight (2x2 top-left) -->
+    <rect x="6" y="12" width="2" height="2" fill="#fff"/>
+    <!-- Left eye — secondary glint -->
+    <rect x="10" y="16" width="1" height="1" fill="#fff" opacity="0.4"/>
+
+    <!-- Right eye — black pupil (5x6) -->
+    <rect x="14" y="12" width="5" height="6" fill="#111"/>
+    <!-- Right eye — white highlight -->
+    <rect x="14" y="12" width="2" height="2" fill="#fff"/>
+    <!-- Right eye — secondary glint -->
+    <rect x="18" y="16" width="1" height="1" fill="#fff" opacity="0.4"/>
+  </g>
+
+  <!-- ===== MOUTH (subtle pixel smile) ===== -->
+  <g id="mouth">
+    <rect x="9" y="20" width="1" height="1" fill="#2a5a10"/>
+    <rect x="10" y="21" width="4" height="1" fill="#2a5a10"/>
+    <rect x="14" y="20" width="1" height="1" fill="#2a5a10"/>
+  </g>
+
+  <!-- ===== CHEEKS (subtle beige spots) ===== -->
+  <rect x="4" y="19" width="2" height="1" fill="#c0a860" opacity="0.3"/>
+  <rect x="19" y="19" width="2" height="1" fill="#c0a860" opacity="0.3"/>
+
+  <!-- ===== COSMETIC SLOTS (populated by game logic) ===== -->
+  <g id="slot-hat"><!-- crown, cap, helmet — above y=5 --></g>
+  <g id="slot-eyes"><!-- glasses, monocle, mask — over eyes area --></g>
+  <g id="slot-body"><!-- cape, armor, shirt — over body --></g>
+  <g id="slot-tail"><!-- flame, ribbon, glow — over tail --></g>
+  <g id="slot-accessory"><!-- aura, particles, pet — around character --></g>
+</svg>