feat(fiches): / et /agences ouvrent la fiche dans le panneau ; FicheReseauContenu extrait, FicheModal et FicheModalV2 retirées ; Voir sur la carte (B12-M4)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AGNSEFZdoKvbdsGyfSnu5S

components/FicheDetail.vue

@@ -6,12 +6,14 @@
       style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);"
     >
       <!-- Bandeau titre -->
-      <div class="px-6 pt-6 pb-4" style="border-bottom: 1px solid var(--nav-bg-alt);">
-        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-3">
-          <h1
-            class="text-2xl font-bold leading-snug"
+      <div :class="compact ? 'px-4 pt-4 pb-3' : 'px-6 pt-6 pb-4'" style="border-bottom: 1px solid var(--nav-bg-alt);">
+        <div class="flex flex-col gap-3 mb-3" :class="compact ? '' : 'sm:flex-row sm:items-start sm:justify-between'">
+          <component
+            :is="compact ? 'h2' : 'h1'"
+            class="font-bold leading-snug"
+            :class="compact ? 'text-xl' : 'text-2xl'"
             style="color: var(--nav-text);"
-          >{{ org.nom }}</h1>
+          >{{ org.nom }}</component>
 
           <a
             v-if="org.url"
@@ -44,7 +46,17 @@
         </div>
 
         <!-- Tags fonction -->
-        <div v-if="fonctionTags.length" class="flex flex-wrap gap-1.5">
+        <ChipGroup v-if="fonctionTags.length && etiquettesCliquables" :aria-label="`Fonctions de ${org.nom}`">
+          <Chip
+            v-for="tag in fonctionTags"
+            :key="tag"
+            variant="fonction"
+            :label="tag"
+            :aria-label="`Filtrer par ${tag}`"
+            @toggle="emit('etiquette', tag)"
+          />
+        </ChipGroup>
+        <div v-else-if="fonctionTags.length" class="flex flex-wrap gap-1.5">
           <span
             v-for="tag in fonctionTags"
             :key="tag"
@@ -55,7 +67,7 @@
       </div>
 
       <!-- Corps : description + mini-carte -->
-      <div class="p-6 flex flex-col lg:flex-row gap-6">
+      <div class="flex flex-col gap-6" :class="compact ? 'p-4' : 'p-6 lg:flex-row'">
 
         <!-- Descriptions -->
         <div class="flex-1 min-w-0">
@@ -106,7 +118,8 @@
         <!-- Mini-carte Leaflet -->
         <div
           v-if="hasCoords"
-          class="shrink-0 lg:w-56 xl:w-64 rounded-xl overflow-hidden"
+          class="shrink-0 rounded-xl overflow-hidden"
+          :class="compact ? '' : 'lg:w-56 xl:w-64'"
           style="height: 180px; border: 1px solid var(--nav-bg-alt);"
         >
           <ClientOnly>
@@ -186,7 +199,15 @@
 const baseTiles = useBaseTiles()
 import type { Org } from '~/types/org'
 
-const props = defineProps<{ org: Org }>()
+const props = defineProps<{
+  org: Org
+  /** Panneau de détail de la vue fiches (B12, 380 px) : tout en colonne, titre en h2. */
+  compact?: boolean
+  /** Fonctions en chips cliquables : la vue fiches ajoute le filtre. */
+  etiquettesCliquables?: boolean
+}>()
+
+const emit = defineEmits<{ etiquette: [fonction: string] }>()
 
 // ── Champs ──────────────────────────────────────────────────────────────
 const descriptionUser = computed(() =>