fix: evolution tree tabs — one branch at a time instead of 3 cramped columns

Frontend/src/components/EvolutionTree.tsx

@@ -1,6 +1,7 @@
 // EvolutionTree.tsx — Arbre d'Évolution V2 (Sprint 3)
 // 3 branches + capstones + post-capstone repeatables + Convergence évolutif
 
+import { useState } from "react";
 import { useGameStore } from "../store/useGameStore";
 import {
   canBuyEvolutionNode,
@@ -208,10 +209,13 @@ function ConvergenceSection() {
   );
 }
 
+const BRANCHES: Branch[] = ["ponte", "marais", "adaptation"];
+
 export function EvolutionTree() {
   const state = useGameStore((s) => s.state);
   const resetTree = useGameStore((s) => s.resetTree);
   const { prestigeCount, ancestralDna, evolutionTree } = state;
+  const [activeBranch, setActiveBranch] = useState<Branch>("ponte");
 
   if (prestigeCount < 1) return null;
 
@@ -254,11 +258,31 @@ export function EvolutionTree() {
           )}
         </div>
       </div>
-      <div className="flex gap-1.5">
+
-        <BranchColumn branch="ponte" />
+      {/* Branch tabs */}
-        <BranchColumn branch="marais" />
+      <div className="flex gap-1">
-        <BranchColumn branch="adaptation" />
+        {BRANCHES.map((branch) => {
+          const config = BRANCH_CONFIG[branch];
+          const isActive = activeBranch === branch;
+          return (
+            <button
+              key={branch}
+              onClick={() => setActiveBranch(branch)}
+              className={`gp-btn flex-1 py-1.5! text-[0.7rem]! font-bold! uppercase! tracking-wider! ${
+                isActive
+                  ? `gp-btn--buy ${config.accent}`
+                  : "gp-btn--disabled"
+              }`}
+            >
+              {config.label}
+            </button>
+          );
+        })}
       </div>
+
+      {/* Active branch content */}
+      <BranchColumn branch={activeBranch} />
+
       <ConvergenceSection />
     </div>
   );