From 13af3fa1c51df078b7145688f973cfe0c236a3b1 Mon Sep 17 00:00:00 2001
From: Jules <transformationsresilientes@gmail.com>
Date: Fri, 25 Sep 2026 12:23:52 +0200
Subject: [PATCH] =?UTF-8?q?fix(b3):=20M3=20=E2=80=94=20vue=20Fiches=20mobi?=
 =?UTF-8?q?le=20pleine=20hauteur,=20intention=20avant=20le=20compteur?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 components/FichesPanel.vue | 14 ++++++++-----
 pages/agences.vue          | 40 ++++++++++++++++++++----------------
 pages/index.vue            | 42 ++++++++++++++++++++++----------------
 3 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/components/FichesPanel.vue b/components/FichesPanel.vue
index 85500fb..d5b90af 100644
--- a/components/FichesPanel.vue
+++ b/components/FichesPanel.vue
@@ -12,6 +12,10 @@
     <div class="fiches-panel__head">
       <p class="fiches-panel__intention">{{ intention }}</p>
 
+      <div class="fiches-panel__count">
+        {{ fiches.length }} fiche{{ fiches.length > 1 ? 's' : '' }}
+      </div>
+
       <ChipGroup v-if="hashtags.length" aria-label="Filtrer les fiches" class="fiches-panel__chips">
         <Chip
           v-for="tag in hashtags"
@@ -22,10 +26,6 @@
           @toggle="toggle(tag)"
         />
       </ChipGroup>
-
-      <div class="fiches-panel__count">
-        {{ fiches.length }} fiche{{ fiches.length > 1 ? 's' : '' }}
-      </div>
     </div>
 
     <div class="fiches-panel__body">
@@ -93,7 +93,7 @@ function toggle(tag: string) {
 }
 
 .fiches-panel__count {
-  margin-top: var(--space-xs);
+  margin: 0 0 var(--space-xs);
   font-size: var(--fs-xs);
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
@@ -101,6 +101,10 @@ function toggle(tag: string) {
   color: var(--text-subtle);
 }
 
+.fiches-panel__chips {
+  margin-top: var(--space-2xs);
+}
+
 .fiches-panel__body {
   flex: 1;
   min-height: 0;
diff --git a/pages/agences.vue b/pages/agences.vue
index f096f6b..55489fd 100644
--- a/pages/agences.vue
+++ b/pages/agences.vue
@@ -310,10 +310,29 @@
           </ClientOnly>
         </div>
 
-        <!-- Fond neutre pour l'onglet « Fiches » (pas de carte dessous) -->
-        <div v-show="mobileMapView === 'fiches'" class="absolute inset-0" style="background: var(--nav-bg-alt);" />
+        <!-- Zone « Fiches » mobile (B3-M3) — pleine hauteur sous la barre d'onglets,
+             pas de carte dessous donc pas de sheet demi-hauteur (même logique que
+             la vue graphe qui masque déjà le MobileSheet). Fix 2026-09-25 : la
+             version précédente empilait un second MobileSheet (état half par
+             défaut) au-dessus d'un fond neutre plein écran, laissant ~45% de
+             hauteur vide au-dessus du panneau. -->
+        <div
+          v-show="mobileMapView === 'fiches'"
+          class="absolute inset-0 flex flex-col overflow-hidden"
+          style="background: var(--nav-bg-alt);"
+        >
+          <FichesPanel
+            :fiches="allStructuresMini"
+            :hashtags="allHashtags"
+            :selected="selectedHashtags"
+            :query="search"
+            intention="Toutes les agences et réseaux du répertoire, filtrables par hashtag."
+            @update:selected="selectedHashtags = $event"
+            @open="(fiche) => onSelectStructureMobile(String(fiche.id))"
+          />
+        </div>
 
-        <!-- Bottom sheet swipable (masqué en vue graphique pour ne pas occulter le canvas) -->
+        <!-- Bottom sheet swipable (masqué en vue graphique et en vue fiches) -->
         <ClientOnly v-if="mobileMapView !== 'graphe' && mobileMapView !== 'fiches'">
           <MobileSheet :resultCount="filtered.length" :pending="pending">
             <!-- Bandeau intention mobile -->
@@ -405,21 +424,6 @@
             </div>
           </MobileSheet>
         </ClientOnly>
-
-        <!-- Bottom sheet — onglet « Fiches » mobile (B3-M3), contenu dédié -->
-        <ClientOnly v-else-if="mobileMapView === 'fiches'">
-          <MobileSheet :resultCount="filtered.length" :pending="pending">
-            <FichesPanel
-              :fiches="allStructuresMini"
-              :hashtags="allHashtags"
-              :selected="selectedHashtags"
-              :query="search"
-              intention="Toutes les agences et réseaux du répertoire, filtrables par hashtag."
-              @update:selected="selectedHashtags = $event"
-              @open="(fiche) => onSelectStructureMobile(String(fiche.id))"
-            />
-          </MobileSheet>
-        </ClientOnly>
       </div>
     </main>
 
diff --git a/pages/index.vue b/pages/index.vue
index 58ed839..875407d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -193,12 +193,31 @@
           </ClientOnly>
         </div>
 
-        <!-- Fond neutre pour l'onglet « Fiches » (pas de carte dessous) -->
-        <div v-show="mobileMapView === 'fiches'" class="absolute inset-0" style="background: var(--nav-bg-alt);" />
+        <!-- Zone « Fiches » mobile (B3-M3) — pleine hauteur sous la barre d'onglets,
+             pas de carte dessous donc pas de sheet demi-hauteur (même logique que
+             la vue graphe qui masque aussi le MobileSheet). Fix 2026-09-25 : la
+             version précédente empilait un second MobileSheet (état half par
+             défaut) au-dessus d'un fond neutre plein écran, laissant ~45% de
+             hauteur vide au-dessus du panneau. -->
+        <div
+          v-show="mobileMapView === 'fiches'"
+          class="absolute inset-0 flex flex-col overflow-hidden"
+          style="background: var(--nav-bg-alt);"
+        >
+          <FichesPanel
+            :fiches="allFichesMini"
+            :hashtags="[...FONCTIONS]"
+            :selected="fonctions"
+            :query="search"
+            intention="Toutes les structures d'entraide, y compris celles sans adresse sur la carte. Cochez une fonction pour filtrer."
+            @update:selected="onFonctions"
+            @open="(fiche) => onSelectOrgMobile(Number(fiche.id))"
+          />
+        </div>
 
-        <!-- Bottom sheet swipable (Métropole, Outre-mer et Fiches) -->
-        <ClientOnly>
-          <MobileSheet v-if="mobileMapView !== 'fiches'" :resultCount="filtered.length" :pending="pending">
+        <!-- Bottom sheet swipable (Métropole et Outre-mer uniquement) -->
+        <ClientOnly v-if="mobileMapView !== 'fiches'">
+          <MobileSheet :resultCount="filtered.length" :pending="pending">
             <!-- Barre recherche -->
             <div class="px-3 pt-2 pb-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
               <label class="mobile-search-label" aria-label="Rechercher une organisation">
@@ -314,19 +333,6 @@
               </div>
             </div>
           </MobileSheet>
-
-          <!-- Bottom sheet — onglet « Fiches » mobile (B3-M3), contenu dédié -->
-          <MobileSheet v-else :resultCount="filtered.length" :pending="pending">
-            <FichesPanel
-              :fiches="allFichesMini"
-              :hashtags="[...FONCTIONS]"
-              :selected="fonctions"
-              :query="search"
-              intention="Toutes les structures d'entraide, y compris celles sans adresse sur la carte. Cochez une fonction pour filtrer."
-              @update:selected="onFonctions"
-              @open="(fiche) => onSelectOrgMobile(Number(fiche.id))"
-            />
-          </MobileSheet>
         </ClientOnly>
       </div>