From 25fe91ea938bcfd419b5b8246ac0865072ec33e8 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 15 Apr 2026 07:30:59 +0200
Subject: [PATCH] Fix : inversion des onglets du pad de donation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les boutons d'onglets étaient associés aux containers par index,
mais l'ordre dans le DOM était inversé (one-off avant monthly).
Correction via data-tab sur les boutons pour un lien explicite.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/js/donation.js | 16 ++++++++++------
 en/index.php          |  4 ++--
 index.php             |  4 ++--
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/assets/js/donation.js b/assets/js/donation.js
index 80e50b0..f5c335c 100644
--- a/assets/js/donation.js
+++ b/assets/js/donation.js
@@ -74,17 +74,21 @@
 
   function initTabs() {
     const tabButtons = document.querySelectorAll('.nav--tabs__btn');
-    const containers = document.querySelectorAll('.donation-grid');
 
-    tabButtons.forEach((button, index) => {
+    tabButtons.forEach((button) => {
       button.addEventListener('click', () => {
-        tabButtons.forEach((btn) => btn.classList.remove('is-selected'));
-        containers.forEach((container) =>
-          container.classList.remove('is-selected')
+        const target = button.dataset.tab;
+        const container = document.querySelector(
+          `.donation-grid[data-donation="${target}"]`
         );
 
+        tabButtons.forEach((btn) => btn.classList.remove('is-selected'));
+        document
+          .querySelectorAll('.donation-grid')
+          .forEach((c) => c.classList.remove('is-selected'));
+
         button.classList.add('is-selected');
-        containers[index].classList.add('is-selected');
+        container.classList.add('is-selected');
       });
     });
   }
diff --git a/en/index.php b/en/index.php
index f3eb81f..6f24182 100644
--- a/en/index.php
+++ b/en/index.php
@@ -131,8 +131,8 @@ $data = getContent('en');
       <div class="col-right">
         <section id="section__donation">
           <nav class="nav--tabs">
-            <button class="nav--tabs__btn is-selected">Monthly donation</button>
-            <button class="nav--tabs__btn">One-time donation</button>
+            <button class="nav--tabs__btn is-selected" data-tab="monthly">Monthly donation</button>
+            <button class="nav--tabs__btn" data-tab="one-off">One-time donation</button>
           </nav>
 
           <div data-donation="one-off" class="donation-grid">
diff --git a/index.php b/index.php
index a9f6142..e043712 100644
--- a/index.php
+++ b/index.php
@@ -131,8 +131,8 @@ $data = getContent('fr');
       <div class="col-right">
         <section id="section__donation">
           <nav class="nav--tabs">
-            <button class="nav--tabs__btn is-selected">Je donne tous les mois</button>
-            <button class="nav--tabs__btn">Je donne une fois</button>
+            <button class="nav--tabs__btn is-selected" data-tab="monthly">Je donne tous les mois</button>
+            <button class="nav--tabs__btn" data-tab="one-off">Je donne une fois</button>
           </nav>
 
           <div data-donation="one-off" class="donation-grid">