From 3de04926311884b3f0a75fef19a5c7a54765aa23 Mon Sep 17 00:00:00 2001
From: Tetardtek <kvnn64@gmail.com>
Date: Sat, 28 Mar 2026 18:52:14 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20evolution=20tree=20tabs=20=E2=80=94=20on?=
 =?UTF-8?q?e=20branch=20at=20a=20time=20instead=20of=203=20cramped=20colum?=
 =?UTF-8?q?ns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/src/components/EvolutionTree.tsx | 32 ++++++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/Frontend/src/components/EvolutionTree.tsx b/Frontend/src/components/EvolutionTree.tsx
index 224f045..1630d47 100644
--- a/Frontend/src/components/EvolutionTree.tsx
+++ b/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" />
-        <BranchColumn branch="marais" />
-        <BranchColumn branch="adaptation" />
+
+      {/* Branch tabs */}
+      <div className="flex gap-1">
+        {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>
   );