From 358cb55d50085a359e9aedc18e931783cf5aec03 Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Thu, 30 Apr 2026 02:25:42 +0200
Subject: [PATCH] feat(aep-v1.1): PA1 fix DOM-TOM pattern desktop 2 onglets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remplace le bandeau DOM-TOM 140px (UX cassée, pin inaccessible) par
  un pattern 2 onglets en haut de carte (Metropole/Europe vs Outre-mer)
- Applique le pattern symetriquement sur pratiques-regeneratives.vue
  et index.vue
- Carte selectionnee occupe toute la hauteur dispo, accordeon DOM-TOM
  scrollable
---
 pages/index.vue                   | 43 ++++++++++++++++++++++++-------
 pages/pratiques-regeneratives.vue | 43 ++++++++++++++++++++++++-------
 2 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 4d42073..a264520 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -40,10 +40,37 @@
         Mode dev — données seed
       </div>
 
-      <!-- ── VUE DESKTOP : Métropole pleine largeur + DOM-TOM row en bas ── -->
+      <!-- ── VUE DESKTOP : Onglets Métropole / Outre-mer + carte pleine hauteur ── -->
       <div class="hidden lg:flex lg:flex-1 lg:flex-col lg:overflow-hidden">
-        <!-- Carte Métropole — pleine largeur -->
-        <div class="flex flex-col flex-1 overflow-hidden">
+
+        <!-- Onglets Métropole / Outre-mer (desktop) -->
+        <div class="shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
+          <button
+            type="button"
+            class="flex-1 py-2 text-sm font-medium transition-colors"
+            :style="desktopMapView === 'metropole'
+              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
+              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
+            @click="desktopMapView = 'metropole'"
+          >
+            Métropolitain
+            <span class="ml-1 text-xs opacity-70">({{ metropoleOrgs.length }})</span>
+          </button>
+          <button
+            type="button"
+            class="flex-1 py-2 text-sm font-medium transition-colors"
+            :style="desktopMapView === 'outremer'
+              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
+              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
+            @click="desktopMapView = 'outremer'"
+          >
+            Outre-mer
+            <span class="ml-1 text-xs opacity-70">({{ outremerOrgs.length }})</span>
+          </button>
+        </div>
+
+        <!-- Carte Métropole (pleine hauteur) -->
+        <div v-show="desktopMapView === 'metropole'" class="flex flex-col flex-1 overflow-hidden">
           <div class="relative flex-1" style="min-height: 200px;">
             <ClientOnly>
               <NavMap
@@ -65,11 +92,8 @@
           <ChatbotPlaceholder @highlightOrgs="onHighlightOrgs" />
         </div>
 
-        <!-- Bandeau DOM-TOM — row horizontale pleine largeur, hauteur fixe -->
-        <div
-          class="shrink-0"
-          style="height: 140px; border-top: 1px solid var(--nav-bg-alt);"
-        >
+        <!-- Carte Outre-mer (pleine hauteur, scroll) -->
+        <div v-show="desktopMapView === 'outremer'" class="flex-1 overflow-y-auto" style="background: var(--nav-bg);">
           <ClientOnly>
             <OutremerMap
               :orgs="outremerOrgs"
@@ -78,7 +102,7 @@
             />
             <template #fallback>
               <div
-                class="flex items-center justify-center h-full text-sm"
+                class="flex items-center justify-center h-48 text-sm"
                 style="color: var(--nav-text-muted);"
               >
                 Chargement…
@@ -335,6 +359,7 @@ const chatbotOpen = ref(false)
 const ficheModalOpen = ref(false)
 const ficheModalId = ref<number | null>(null)
 const mobileMapView = ref<'metropole' | 'outremer'>('metropole')
+const desktopMapView = ref<'metropole' | 'outremer'>('metropole')
 // Surlignage temporaire (5 sec) suite à une réponse chatbot
 // → sélectionne le premier ID recommandé sur la carte, puis remet à null
 let highlightTimer: ReturnType<typeof setTimeout> | null = null
diff --git a/pages/pratiques-regeneratives.vue b/pages/pratiques-regeneratives.vue
index a5050c9..9bc147c 100644
--- a/pages/pratiques-regeneratives.vue
+++ b/pages/pratiques-regeneratives.vue
@@ -26,10 +26,37 @@
     <!-- ═══════════════════════════════════════ ZONE CENTRALE (carte) -->
     <main class="flex-1 flex flex-col overflow-hidden relative">
 
-      <!-- ── VUE DESKTOP : Europe pleine largeur + DOM-TOM row en bas ── -->
+      <!-- ── VUE DESKTOP : Onglets Europe / Outre-mer + carte pleine hauteur ── -->
       <div class="hidden lg:flex lg:flex-1 lg:flex-col lg:overflow-hidden">
-        <!-- Carte Europe — pleine largeur -->
-        <div class="flex flex-col flex-1 overflow-hidden">
+
+        <!-- Onglets Europe / Outre-mer (desktop) -->
+        <div class="shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
+          <button
+            type="button"
+            class="flex-1 py-2 text-sm font-medium transition-colors"
+            :style="desktopMapView === 'europe'
+              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
+              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
+            @click="desktopMapView = 'europe'"
+          >
+            Europe
+            <span class="ml-1 text-xs opacity-70">({{ europeOrgs.length }})</span>
+          </button>
+          <button
+            type="button"
+            class="flex-1 py-2 text-sm font-medium transition-colors"
+            :style="desktopMapView === 'outremer'
+              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
+              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
+            @click="desktopMapView = 'outremer'"
+          >
+            Outre-mer
+            <span class="ml-1 text-xs opacity-70">({{ outremerOrgs.length }})</span>
+          </button>
+        </div>
+
+        <!-- Carte Europe (pleine hauteur) -->
+        <div v-show="desktopMapView === 'europe'" class="flex flex-col flex-1 overflow-hidden">
           <div class="relative flex-1" style="min-height: 200px;">
             <ClientOnly>
               <EuropeMap
@@ -50,11 +77,8 @@
           </div>
         </div>
 
-        <!-- Bandeau DOM-TOM — row horizontale pleine largeur, hauteur fixe -->
-        <div
-          class="shrink-0"
-          style="height: 140px; border-top: 1px solid var(--nav-bg-alt);"
-        >
+        <!-- Carte Outre-mer (pleine hauteur, scroll) -->
+        <div v-show="desktopMapView === 'outremer'" class="flex-1 overflow-y-auto" style="background: var(--nav-bg);">
           <ClientOnly>
             <OutremerMapPratiques
               :orgs="outremerOrgs"
@@ -63,7 +87,7 @@
             />
             <template #fallback>
               <div
-                class="flex items-center justify-center h-full text-sm"
+                class="flex items-center justify-center h-48 text-sm"
                 style="color: var(--nav-text-muted);"
               >
                 Chargement…
@@ -307,6 +331,7 @@ const pays = ref<string[]>(
 
 const selectedId = ref<number | null>(null)
 const mobileMapView = ref<'europe' | 'outremer'>('europe')
+const desktopMapView = ref<'europe' | 'outremer'>('europe')
 
 // Refs vers les instances EuropeMap
 const europeMapRef = ref<any>(null)