feat(aep-v1.1): PA1 fix DOM-TOM pattern desktop 2 onglets

- 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

@@ -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 -->
+        <!-- Carte Outre-mer (pleine hauteur, scroll) -->
-        <div
+        <div v-show="desktopMapView === 'outremer'" class="flex-1 overflow-y-auto" style="background: var(--nav-bg);">
-          class="shrink-0"
-          style="height: 140px; border-top: 1px solid var(--nav-bg-alt);"
-        >
           <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

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 -->
+        <!-- Carte Outre-mer (pleine hauteur, scroll) -->
-        <div
+        <div v-show="desktopMapView === 'outremer'" class="flex-1 overflow-y-auto" style="background: var(--nav-bg);">
-          class="shrink-0"
-          style="height: 140px; border-top: 1px solid var(--nav-bg-alt);"
-        >
           <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)