feat: migrate SCSS → Tailwind CSS + remove sass dependency

12 SCSS files (1167 lines) replaced by centralized index.css with
Tailwind v4 @theme tokens, @layer components, and utility classes.
Game panel design system (gp-*) preserved as CSS components.
Inline styles in Settings/Login/MilestoneBar converted to Tailwind utilities.
sass removed from dependencies. Build clean, 53 tests pass.

Frontend/src/components/EvolutionTree.tsx

@@ -29,7 +29,7 @@ function NodeRow({
 
   return (
     <div className={rowClass}>
-      <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
+      <div className="flex flex-col min-w-0">
         <span className="gp-value">{node.name}</span>
         <span className="gp-label">{EFFECT_LABELS[node.effect](node.value)}</span>
       </div>
@@ -39,8 +39,7 @@ function NodeRow({
         <button
           disabled={!canBuy}
           onClick={onBuy}
-          className={`gp-btn ${canBuy ? "gp-btn--buy" : "gp-btn--disabled"}`}
-          style={canBuy ? { background: "#d97706" } : {}}
+          className={`gp-btn ${canBuy ? "gp-btn--buy bg-amber-600!" : "gp-btn--disabled"}`}
         >
           {node.cost} ADN
         </button>
@@ -58,7 +57,7 @@ export function EvolutionTree() {
 
   return (
     <div className="gp">
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+      <div className="flex justify-between items-center">
         <span className="gp-title">Évolution</span>
         <span className="gp-value gp-accent-amber">{state.ancestralDna} ADN</span>
       </div>

Frontend/src/components/GeneratorShop.tsx

@@ -12,7 +12,7 @@ export function GeneratorShop() {
 
   return (
     <div className="gp">
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+      <div className="flex justify-between items-center">
         <span className="gp-title" title="Achète des générateurs pour produire des têtards automatiquement">Générateurs</span>
         <span className="gp-value gp-accent-green" title="Production totale par seconde">{formatNumber(productionPerSecond)}/s</span>
       </div>
@@ -26,8 +26,8 @@ export function GeneratorShop() {
             key={gen.id}
             className={`gp-row ${canAfford ? "gp-row--active" : "gp-row--locked"}`}
           >
-            <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
-              <div style={{ display: "flex", alignItems: "center", gap: "0.3rem" }}>
+            <div className="flex flex-col min-w-0">
+              <div className="flex items-center gap-1">
                 <span className="gp-value">{gen.name}</span>
                 {gen.owned > 0 && (
                   <span className="gp-label gp-accent-green">x{gen.owned}</span>

Frontend/src/components/MilestoneBar.tsx

@@ -13,8 +13,8 @@ export function MilestoneBar() {
   const remaining = Math.max(PRESTIGE_THRESHOLD - resources, 0);
 
   return (
-    <div className="gp" style={{ gap: "0.25rem" }}>
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
+    <div className="gp gap-1">
+      <div className="flex justify-between">
         <span className="gp-label">Prochaine Génération</span>
         <span className="gp-label">
           {formatNumber(resources)} / {formatNumber(PRESTIGE_THRESHOLD)}
@@ -22,14 +22,11 @@ export function MilestoneBar() {
       </div>
       <div className="gp-progress">
         <div
-          className="gp-progress-fill"
-          style={{
-            width: `${progressPercent}%`,
-            background: "linear-gradient(90deg, #7c3aed, #a78bfa)",
-          }}
+          className="gp-progress-fill bg-gradient-to-r from-violet-600 to-violet-400"
+          style={{ width: `${progressPercent}%` }}
         />
       </div>
-      <span className="gp-label" style={{ textAlign: "right" }}>
+      <span className="gp-label text-right">
         {remaining > 0
           ? `${formatNumber(remaining)} restants`
           : "Nouvelle Génération disponible !"}

Frontend/src/components/PrestigePanel.tsx

@@ -26,7 +26,7 @@ export function PrestigePanel() {
     <div className="gp">
       <span className="gp-title" title="Recommence à zéro en échange d'un bonus permanent — tes têtards et générateurs sont réinitialisés mais tu gagnes de l'ADN et un multiplicateur">Prestige</span>
       {canPrestige ? (
-        <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
+        <div className="flex flex-col gap-1.5">
           <span className="gp-value gp-accent-purple">
             +{dnaPreview} ADN · +0.1x mult
           </span>

Frontend/src/components/burger.jsx

@@ -1,8 +1,5 @@
 import { NavLink as Link } from "react-router-dom";
 import PropTypes from "prop-types";
-import "../scss/components/navbar.scss";
-
-import "../scss/root.scss";
 import PrimaryButton from "./buttons/PrimaryButton";
 
 export default function Burger({ navData }) {

Frontend/src/components/buttons/PrimaryButton.jsx

@@ -1,5 +1,4 @@
 import PropTypes from "prop-types";
-import "../../scss/components/buttons.scss";
 import { Link } from "react-router-dom";
 
 export default function PrimaryButton({ btnText, btnLink }) {

Frontend/src/components/buttons/SecondaryButton.jsx

@@ -1,4 +1,3 @@
-import "../../scss/components/buttons.scss";
 import PropTypes from "prop-types";
 import { Link } from "react-router";
 

Frontend/src/components/footer.jsx

@@ -1,4 +1,3 @@
-import "../scss/components/footer.scss";
 import { NavLink as Link } from "react-router-dom";
 
 export default function Footer() {

Frontend/src/components/navbar.jsx

@@ -1,9 +1,6 @@
 import { NavLink as Link } from "react-router-dom";
 import PropTypes from "prop-types";
 
-import "../scss/components/navbar.scss";
-import "../scss/root.scss";
-
 import PrimaryButton from "./buttons/PrimaryButton";
 import Burger from "./burger";
 import { useAuth } from "../context/AuthContext";