From 682d5d337e6851e32f2ffc929de5cc02248cbe0b Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Thu, 30 Apr 2026 02:31:31 +0200
Subject: [PATCH] fix(aep-v1.1): bugs E2E M1 M2 M3 L1 L2 L3

M1 - Chips a11y : converti les <span> chips mobile (criteres, types,
echelle, fonctions) en <button type=button> avec aria-pressed pour
support clavier et lecteurs d'ecran (sidebar desktop deja en boutons).

M2 - Effacer les filtres ne vide pas la search : resetFilters() reset
maintenant aussi mobileSearch dans pratiques-regeneratives.vue et
index.vue.

M3 - FAB Soutenir overlap chip Agence : repositionne le FAB Soutenir
en stack vertical avec le FAB Chatbot (right: 16px, bottom: 84px) au
lieu de left: 16px, bottom: 68px. Evite l'overlap avec les chips de
la bottom-sheet sur viewport intermediaire.

L1 - /fiche/[id] introuvable pour pratiques : ajoute un fallback dans
pages/fiche/[id].vue qui detecte si l'id correspond a une pratique
regenerative et redirige vers /pratique/[id] (navigateTo replace).

L2 - Label retour incorrect sur /proposer-pratique : harmonise en
'Retour aux pratiques regeneratives'.

L3 - Map ne fitBounds pas apres filtre : EuropeMap et NavMap appellent
maintenant fitBounds(bounds, padding 40px, maxZoom 10) quand la liste
filtree contient 1 a 15 markers. Saute le tout premier rendu pour
preserver la vue initiale.
---
 components/BandeauBas.vue         |  6 ++++--
 components/EuropeMap.vue          | 29 +++++++++++++++++++++++++++++
 components/NavMap.vue             | 21 +++++++++++++++++++++
 pages/fiche/[id].vue              | 15 +++++++++++++++
 pages/index.vue                   | 13 +++++++++----
 pages/pratiques-regeneratives.vue | 13 +++++++++----
 pages/proposer-pratique.vue       |  2 +-
 7 files changed, 88 insertions(+), 11 deletions(-)

diff --git a/components/BandeauBas.vue b/components/BandeauBas.vue
index deb85d1..51c6a68 100644
--- a/components/BandeauBas.vue
+++ b/components/BandeauBas.vue
@@ -461,10 +461,12 @@ const jaugePct = computed(() => {
 }
 
 /* ── FAB mobile soutenir ─────────────────────────────────────────────────── */
+/* Stack vertical avec le FAB Chatbot a droite (evite l'overlap avec les chips
+   sidebar mobile sur viewport intermediaire ~880px - bug E2E M3) */
 .fab-soutenir {
   position: fixed;
-  bottom: 68px; /* au-dessus du FAB chatbot à 24px du bas + 48px de hauteur */
-  left: 16px;
+  bottom: 84px; /* au-dessus du FAB chatbot a bottom-6 (24px) + 48px de hauteur + 12px gap */
+  right: 16px;
   z-index: 1000;
   width: 44px;
   height: 44px;
diff --git a/components/EuropeMap.vue b/components/EuropeMap.vue
index 6a6c157..9c918a7 100644
--- a/components/EuropeMap.vue
+++ b/components/EuropeMap.vue
@@ -123,6 +123,12 @@ async function initMap() {
   updateMarkers(L)
 }
 
+// Vue initiale (centre Europe + zoom 4) - sauvegardee pour reset
+const INITIAL_CENTER: [number, number] = [50.0, 10.0]
+const INITIAL_ZOOM = 4
+
+let initialFitDone = false
+
 function updateMarkers(L?: any) {
   if (!mapInstance || !clusterGroup) return
   const leaflet = L || (window as any).L
@@ -158,6 +164,29 @@ function updateMarkers(L?: any) {
     markers.set(org.id, marker)
     clusterGroup.addLayer(marker)
   })
+
+  // Bug E2E L3 : recadrer la carte sur les resultats filtres
+  // Conditions : 1+ resultat, et au moins 1 marker hors viewport actuel.
+  // On evite de recadrer au tout premier rendu (laisser la vue initiale).
+  if (orgsWithCoords.length > 0 && initialFitDone) {
+    try {
+      const bounds = leaflet.latLngBounds(
+        orgsWithCoords.map((o) => [o.lat!, o.lng!])
+      )
+      // On recadre uniquement si la liste filtree est restreinte
+      // (evite un recadrage permanent quand toutes les fiches sont la).
+      if (orgsWithCoords.length <= 15) {
+        mapInstance.fitBounds(bounds, {
+          padding: [40, 40],
+          maxZoom: 10,
+          animate: true,
+        })
+      }
+    } catch (e) {
+      console.warn('[EuropeMap] fitBounds echoue:', e)
+    }
+  }
+  initialFitDone = true
 }
 
 watch(
diff --git a/components/NavMap.vue b/components/NavMap.vue
index ae3938c..aeb68ab 100644
--- a/components/NavMap.vue
+++ b/components/NavMap.vue
@@ -128,6 +128,8 @@ async function initMap() {
   updateMarkers(L)
 }
 
+let initialFitDone = false
+
 function updateMarkers(L?: any) {
   if (!mapInstance || !clusterGroup) return
   const leaflet = L || (window as any).L
@@ -168,6 +170,25 @@ function updateMarkers(L?: any) {
     markers.set(org.Id, marker)
     clusterGroup.addLayer(marker)
   })
+
+  // Bug E2E L3 : recadrer la carte sur les resultats filtres
+  if (orgsWithCoords.length > 0 && initialFitDone) {
+    try {
+      const bounds = leaflet.latLngBounds(
+        orgsWithCoords.map((o: any) => [o.latitude!, o.longitude!])
+      )
+      if (orgsWithCoords.length <= 15) {
+        mapInstance.fitBounds(bounds, {
+          padding: [40, 40],
+          maxZoom: 10,
+          animate: true,
+        })
+      }
+    } catch (e) {
+      console.warn('[NavMap] fitBounds echoue:', e)
+    }
+  }
+  initialFitDone = true
 }
 
 // Réagir aux changements de filtres (liste d'orgs)
diff --git a/pages/fiche/[id].vue b/pages/fiche/[id].vue
index 9f19738..cd57b52 100644
--- a/pages/fiche/[id].vue
+++ b/pages/fiche/[id].vue
@@ -72,6 +72,21 @@ const { data: org, pending, error } = await useFetch<Org>(`/api/fiche/${orgId}`,
   key: `fiche-${orgId}`,
 })
 
+// ── Fallback Pratiques regeneratives (bug E2E L1) ─────────────────────
+// Si /api/fiche/:id echoue, on regarde si l'id correspond a une pratique
+// regenerative et on redirige automatiquement vers /pratique/:id.
+if (error.value) {
+  try {
+    const pratiquesRes = await $fetch<{ list: { id: number }[] }>('/api/pratiques')
+    const numericId = Number(orgId)
+    if (!isNaN(numericId) && pratiquesRes.list?.some((p) => p.id === numericId)) {
+      await navigateTo(`/pratique/${numericId}`, { replace: true })
+    }
+  } catch {
+    // pas de fallback dispo, on garde l'erreur
+  }
+}
+
 // ── Commentaires — tick de rafraîchissement ───────────────────────────
 const commentRefreshTick = ref(0)
 
diff --git a/pages/index.vue b/pages/index.vue
index a264520..9c856e6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -205,15 +205,17 @@
               <div class="mt-2">
                 <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">ÉCHELLE</span>
                 <div class="flex flex-wrap gap-1">
-                  <span
+                  <button
                     v-for="opt in ECHELLES"
                     :key="opt"
+                    type="button"
                     class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
                     :style="echelle.includes(opt)
                       ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
                       : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
+                    :aria-pressed="echelle.includes(opt)"
                     @click="toggleEchelle(opt)"
-                  >{{ opt }}</span>
+                  >{{ opt }}</button>
                 </div>
               </div>
 
@@ -221,15 +223,17 @@
               <div class="mt-2">
                 <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">FONCTION</span>
                 <div class="flex flex-wrap gap-1">
-                  <span
+                  <button
                     v-for="fn in FONCTIONS"
                     :key="fn"
+                    type="button"
                     class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
                     :style="fonctions.includes(fn)
                       ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
                       : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
+                    :aria-pressed="fonctions.includes(fn)"
                     @click="toggleFonction(fn)"
-                  >{{ fn }}</span>
+                  >{{ fn }}</button>
                 </div>
               </div>
 
@@ -446,6 +450,7 @@ const hasActiveFilters = computed(() =>
 
 function resetFilters() {
   search.value = ''
+  mobileSearch.value = ''
   echelle.value = []
   fonctions.value = []
   territoire.value = null
diff --git a/pages/pratiques-regeneratives.vue b/pages/pratiques-regeneratives.vue
index 7f0d667..31d57d5 100644
--- a/pages/pratiques-regeneratives.vue
+++ b/pages/pratiques-regeneratives.vue
@@ -211,15 +211,17 @@ le réemploi de matériaux en Belgique."</p>
               <div class="mt-2">
                 <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">CRITÈRES</span>
                 <div class="flex flex-wrap gap-1">
-                  <span
+                  <button
                     v-for="c in CRITERES"
                     :key="c.id"
+                    type="button"
                     class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
                     :style="criteres.includes(c.id)
                       ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
                       : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
+                    :aria-pressed="criteres.includes(c.id)"
                     @click="toggleCritere(c.id)"
-                  >{{ c.label }}</span>
+                  >{{ c.label }}</button>
                 </div>
               </div>
 
@@ -227,15 +229,17 @@ le réemploi de matériaux en Belgique."</p>
               <div class="mt-2">
                 <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">TYPE</span>
                 <div class="flex flex-wrap gap-1">
-                  <span
+                  <button
                     v-for="t in TYPES_ENTITE"
                     :key="t"
+                    type="button"
                     class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
                     :style="typesEntite.includes(t)
                       ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
                       : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
+                    :aria-pressed="typesEntite.includes(t)"
                     @click="toggleType(t)"
-                  >{{ TYPES_ENTITE_LABELS[t] ?? t }}</span>
+                  >{{ TYPES_ENTITE_LABELS[t] ?? t }}</button>
                 </div>
               </div>
 
@@ -457,6 +461,7 @@ const hasActiveFilters = computed(() =>
 
 function resetFilters() {
   search.value = ''
+  mobileSearch.value = ''
   criteres.value = []
   typesEntite.value = []
   pays.value = []
diff --git a/pages/proposer-pratique.vue b/pages/proposer-pratique.vue
index 8e87091..f63f7e8 100644
--- a/pages/proposer-pratique.vue
+++ b/pages/proposer-pratique.vue
@@ -3,7 +3,7 @@
     <div class="contribuer-inner">
       <!-- Retour -->
       <NuxtLink to="/pratiques-regeneratives" class="back-link">
-        ← Retour à la carte
+        ← Retour aux pratiques régénératives
       </NuxtLink>
 
       <!-- En-tête -->