From 755d1ef9ae95d7def417377879f6e25a52c87453 Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Tue, 5 May 2026 17:58:38 +0200
Subject: [PATCH] feat(v2-graphe): sidebar hashtags droite repliable + chatbot
 integre

- GraphView : barre hashtags du haut supprimee, sidebar droite 200px
  groupee par famille (heuristique majoritaire, egalite -> famille la
  plus petite), toggle >>/<< vers 40px replie
- pages/index.vue : ChatbotPlaceholder ajoute sous GraphView en flex-column
- watch sidebarOpen : reinit D3 apres transition CSS pour SVG resize
---
 components/GraphView.vue | 435 ++++++++++++++++++++++++
 pages/index.vue          | 699 +++++++++++++++++----------------------
 2 files changed, 744 insertions(+), 390 deletions(-)
 create mode 100644 components/GraphView.vue

diff --git a/components/GraphView.vue b/components/GraphView.vue
new file mode 100644
index 0000000..eadc782
--- /dev/null
+++ b/components/GraphView.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="graph-view" style="width: 100%; height: 100%; position: relative; background: var(--nav-bg);">
+    <!-- Canvas SVG pour D3 (zone centrale, marge droite pour sidebar) -->
+    <svg
+      ref="svgRef"
+      :style="{
+        width: sidebarOpen ? 'calc(100% - 200px)' : 'calc(100% - 40px)',
+        height: '100%',
+        transition: 'width 0.2s ease',
+      }"
+    ></svg>
+
+    <!-- Sidebar hashtags droite (repliable) -->
+    <aside
+      :style="{
+        position: 'absolute', top: '0', right: '0', bottom: '0',
+        width: sidebarOpen ? '200px' : '40px',
+        background: 'var(--nav-surface)',
+        borderLeft: '1px solid var(--nav-bg-alt)',
+        display: 'flex', flexDirection: 'column',
+        transition: 'width 0.2s ease',
+        zIndex: 10,
+      }"
+    >
+      <!-- Toggle (toujours visible) -->
+      <button
+        @click="sidebarOpen = !sidebarOpen"
+        :title="sidebarOpen ? 'Replier la sidebar' : 'Deplier la sidebar'"
+        style="
+          width: 100%; height: 36px; flex-shrink: 0;
+          display: flex; align-items: center; justify-content: center;
+          background: var(--nav-bg-alt); border: none; cursor: pointer;
+          color: var(--nav-text-muted); font-size: 0.78rem; font-weight: 700;
+          border-bottom: 1px solid var(--nav-bg-alt);
+        "
+      >{{ sidebarOpen ? '>>' : '<<' }}</button>
+
+      <!-- Mode replie : label vertical -->
+      <div
+        v-if="!sidebarOpen"
+        style="
+          flex: 1; display: flex; align-items: center; justify-content: center;
+          writing-mode: vertical-rl; transform: rotate(180deg);
+          font-size: 0.7rem; font-weight: 700; color: var(--nav-text-muted);
+          letter-spacing: 0.12em; text-transform: uppercase;
+        "
+      >HASHTAGS ({{ activeHashtags.length }}/{{ props.allHashtags.length }})</div>
+
+      <!-- Mode deplie : header + liste groupee -->
+      <template v-if="sidebarOpen">
+        <div style="padding: 8px 12px; border-bottom: 1px solid var(--nav-bg-alt); flex-shrink: 0;">
+          <div style="display: flex; align-items: center; justify-content: space-between; gap: 8px;">
+            <span style="font-size: 0.72rem; font-weight: 700; color: var(--nav-text); text-transform: uppercase; letter-spacing: 0.08em;">Hashtags</span>
+            <span style="font-size: 0.68rem; color: var(--nav-text-muted);">{{ activeHashtags.length }} actif{{ activeHashtags.length > 1 ? 's' : '' }}</span>
+          </div>
+          <button
+            v-if="activeHashtags.length"
+            @click="activeHashtags = []"
+            style="margin-top: 4px; font-size: 0.68rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
+          >Tout effacer</button>
+        </div>
+
+        <div style="flex: 1; overflow-y: auto; padding: 6px 10px 10px;">
+          <div
+            v-for="group in hashtagsByFamille"
+            :key="group.famille"
+            style="margin-bottom: 10px;"
+          >
+            <div
+              :style="{
+                fontSize: '0.65rem', fontWeight: 700,
+                color: group.color, textTransform: 'uppercase',
+                letterSpacing: '0.06em', marginBottom: '4px',
+                paddingLeft: '2px',
+              }"
+            >{{ group.label }}</div>
+            <div style="display: flex; flex-wrap: wrap; gap: 3px;">
+              <span
+                v-for="tag in group.tags"
+                :key="tag"
+                style="padding: 2px 7px; border-radius: 9999px; font-size: 0.66rem; cursor: pointer; transition: all 0.12s;"
+                :style="activeHashtags.includes(tag)
+                  ? `background: ${group.color}; color: white; font-weight: 600;`
+                  : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
+                @click="toggleHashtag(tag)"
+              >{{ tag }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </aside>
+
+    <!-- Tooltip -->
+    <div ref="tooltipRef" style="
+      position: absolute; pointer-events: none;
+      background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);
+      border-radius: 6px; padding: 8px 12px; font-size: 0.78rem;
+      color: var(--nav-text); max-width: 220px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      opacity: 0; transition: opacity 0.15s; z-index: 100;
+    "></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ReseauxBifurcationData } from '~/types/structure-v2'
+
+const props = defineProps<{
+  data: ReseauxBifurcationData | null
+  allHashtags: string[]
+  active?: boolean
+}>()
+
+const emit = defineEmits<{
+  'select-structure': [id: string]
+}>()
+
+const svgRef = ref<SVGElement | null>(null)
+const tooltipRef = ref<HTMLElement | null>(null)
+
+// Hashtag filter
+const activeHashtags = ref<string[]>([])
+const sidebarOpen = ref(true)
+
+function toggleHashtag(tag: string) {
+  activeHashtags.value = activeHashtags.value.includes(tag)
+    ? activeHashtags.value.filter(t => t !== tag)
+    : [...activeHashtags.value, tag]
+}
+
+// Mapping hashtag -> famille majoritaire
+// En cas d'egalite : prendre la famille la plus petite (visibilite minoritaires)
+const hashtagsByFamille = computed(() => {
+  if (!props.data) return []
+  // 1. Pour chaque hashtag, compter les structures par famille
+  const counts: Record<string, Record<number, number>> = {}
+  props.data.structures.forEach(s => {
+    s.hashtags.forEach(tag => {
+      if (!counts[tag]) counts[tag] = {}
+      counts[tag][s.famille_principale] = (counts[tag][s.famille_principale] ?? 0) + 1
+    })
+  })
+  // 2. Pour chaque hashtag, trouver la famille majoritaire (egalite -> + petite famille)
+  // Pour preferer la famille la moins peuplee globalement, calculer la taille de chaque famille.
+  const familleSize: Record<number, number> = {}
+  props.data.structures.forEach(s => {
+    familleSize[s.famille_principale] = (familleSize[s.famille_principale] ?? 0) + 1
+  })
+  const tagToFamille: Record<string, number> = {}
+  for (const tag in counts) {
+    const entries = Object.entries(counts[tag])
+    entries.sort((a, b) => {
+      const diff = (b[1] as number) - (a[1] as number)
+      if (diff !== 0) return diff
+      // egalite : famille avec moins de structures gagne
+      return (familleSize[Number(a[0])] ?? 0) - (familleSize[Number(b[0])] ?? 0)
+    })
+    tagToFamille[tag] = Number(entries[0][0])
+  }
+  // 3. Grouper les hashtags par famille
+  const groups: Record<number, string[]> = {}
+  props.allHashtags.forEach(tag => {
+    const fam = tagToFamille[tag]
+    if (fam == null) return
+    if (!groups[fam]) groups[fam] = []
+    groups[fam].push(tag)
+  })
+  // 4. Sortie ordonnee selon ID de famille
+  return [1, 2, 3, 4, 5, 6]
+    .filter(famId => groups[famId]?.length)
+    .map(famId => ({
+      famille: famId,
+      label: FAMILLE_LABELS[famId],
+      color: FAMILLE_COLORS[famId],
+      tags: groups[famId].sort(),
+    }))
+})
+
+// IDs de structures correspondant aux hashtags actifs
+const filteredStructureIds = computed(() => {
+  if (!props.data || !activeHashtags.value.length) return null
+  const ids = new Set(
+    props.data.structures
+      .filter(s => activeHashtags.value.every(h => s.hashtags.includes(h)))
+      .map(s => s.id)
+  )
+  return ids
+})
+
+const FAMILLE_COLORS: Record<number, string> = {
+  1: '#a85d3e',
+  2: '#c4a472',
+  3: '#d4a017',
+  4: '#5a7a4a',
+  5: '#3d6a8c',
+  6: '#6b3fa0',
+}
+
+const FAMILLE_LABELS: Record<number, string> = {
+  1: 'Reemploi',
+  2: 'Frugalite',
+  3: 'Social',
+  4: 'Collectifs',
+  5: 'Urbanisme',
+  6: 'Recherche',
+}
+
+let simulation: any = null
+let d3NodeSelection: any = null
+let d3LinkSelection: any = null
+
+async function initGraph() {
+  if (!svgRef.value || !props.data) return
+
+  const d3 = await import('d3')
+
+  const svgEl = svgRef.value
+  const width = svgEl.clientWidth || 800
+  const height = svgEl.clientHeight || 600
+
+  // Nettoyer
+  d3.select(svgEl).selectAll('*').remove()
+
+  const svg = d3.select(svgEl)
+    .attr('viewBox', `0 0 ${width} ${height}`)
+
+  // Groupe principal avec zoom
+  const g = svg.append('g')
+  const zoomBehavior = d3.zoom<SVGElement, unknown>()
+    .scaleExtent([0.2, 4])
+    .on('zoom', (event) => g.attr('transform', event.transform))
+
+  svg.call(zoomBehavior as any)
+
+  // Noeuds familles (centres fixes en etoile)
+  const familyNodes = [1, 2, 3, 4, 5, 6].map(id => ({
+    id: `family-${id}`,
+    type: 'family',
+    familleId: id,
+    label: FAMILLE_LABELS[id],
+    color: FAMILLE_COLORS[id],
+    r: 32,
+    x: width / 2 + Math.cos((id - 1) * Math.PI * 2 / 6) * 180,
+    y: height / 2 + Math.sin((id - 1) * Math.PI * 2 / 6) * 180,
+    fx: width / 2 + Math.cos((id - 1) * Math.PI * 2 / 6) * 180,
+    fy: height / 2 + Math.sin((id - 1) * Math.PI * 2 / 6) * 180,
+  }))
+
+  // Noeuds structures
+  const structureNodes = props.data.structures.map(s => ({
+    id: s.id,
+    type: 'structure',
+    label: s.nom,
+    famille: s.famille_principale,
+    familles_secondaires: s.familles_secondaires ?? [],
+    hashtags: s.hashtags,
+    color: FAMILLE_COLORS[s.famille_principale] ?? '#888',
+    r: 8,
+    x: undefined as number | undefined,
+    y: undefined as number | undefined,
+    fx: undefined as number | null | undefined,
+    fy: undefined as number | null | undefined,
+  }))
+
+  const allNodes: any[] = [...familyNodes, ...structureNodes]
+
+  // Liens structures -> familles
+  const links: any[] = []
+  structureNodes.forEach(s => {
+    links.push({
+      source: s.id,
+      target: `family-${s.famille}`,
+      type: 'primary',
+      strength: 0.55,
+    })
+    s.familles_secondaires.forEach((f: number) => {
+      links.push({
+        source: s.id,
+        target: `family-${f}`,
+        type: 'secondary',
+        strength: 0.45,
+      })
+    })
+  })
+
+  // Simulation force-directed
+  if (simulation) simulation.stop()
+  simulation = d3.forceSimulation(allNodes)
+    .force('link', d3.forceLink(links).id((d: any) => d.id).distance((d: any) => d.type === 'primary' ? 80 : 120).strength((d: any) => d.strength ?? 0.5))
+    .force('charge', d3.forceManyBody().strength(-120))
+    .force('center', d3.forceCenter(width / 2, height / 2))
+    .force('collision', d3.forceCollide().radius((d: any) => d.r + 4))
+
+  // Rendu liens
+  d3LinkSelection = g.append('g').selectAll('line')
+    .data(links)
+    .join('line')
+    .attr('stroke', (d: any) => d.type === 'primary' ? 'rgba(150,150,150,0.45)' : 'rgba(150,150,150,0.35)')
+    .attr('stroke-width', 1.5)
+    .attr('stroke-dasharray', null)
+
+  // Rendu noeuds (groupes g)
+  d3NodeSelection = g.append('g').selectAll('g')
+    .data(allNodes)
+    .join('g')
+    .style('cursor', (d: any) => d.type === 'structure' ? 'pointer' : 'default')
+    .call(
+      d3.drag<any, any>()
+        .on('start', (event: any, d: any) => {
+          if (!event.active) simulation.alphaTarget(0.3).restart()
+          d.fx = d.x
+          d.fy = d.y
+        })
+        .on('drag', (event: any, d: any) => {
+          d.fx = event.x
+          d.fy = event.y
+        })
+        .on('end', (event: any, d: any) => {
+          if (!event.active) simulation.alphaTarget(0)
+          if (d.type !== 'family') {
+            d.fx = null
+            d.fy = null
+          }
+        })
+    )
+    .on('click', (_event: any, d: any) => {
+      if (d.type === 'structure') emit('select-structure', d.id)
+    })
+
+  // Cercles
+  d3NodeSelection.append('circle')
+    .attr('r', (d: any) => d.r)
+    .attr('fill', (d: any) => d.type === 'family' ? d.color : d.color + 'cc')
+    .attr('stroke', (d: any) => d.type === 'family' ? 'white' : d.color)
+    .attr('stroke-width', (d: any) => d.type === 'family' ? 3 : 1.5)
+
+  // Labels familles
+  d3NodeSelection.filter((d: any) => d.type === 'family')
+    .append('text')
+    .text((d: any) => d.label)
+    .attr('text-anchor', 'middle')
+    .attr('dy', '0.35em')
+    .attr('font-size', '11px')
+    .attr('font-weight', '700')
+    .attr('fill', 'white')
+    .style('pointer-events', 'none')
+
+  // Tooltip hover pour structures
+  d3NodeSelection.filter((d: any) => d.type === 'structure')
+    .on('mouseenter', (_event: any, d: any) => {
+      if (!tooltipRef.value) return
+      tooltipRef.value.style.opacity = '1'
+      tooltipRef.value.innerHTML = `<strong>${d.label}</strong><br><span style="opacity:0.6;font-size:0.7rem;">${FAMILLE_LABELS[d.famille] ?? ''}</span>`
+    })
+    .on('mousemove', (event: any) => {
+      if (!tooltipRef.value || !svgEl) return
+      const rect = (svgEl as HTMLElement).getBoundingClientRect()
+      tooltipRef.value.style.left = (event.clientX - rect.left + 12) + 'px'
+      tooltipRef.value.style.top = (event.clientY - rect.top - 10) + 'px'
+    })
+    .on('mouseleave', () => {
+      if (tooltipRef.value) tooltipRef.value.style.opacity = '0'
+    })
+
+  // Tick - mise a jour positions
+  simulation.on('tick', () => {
+    d3LinkSelection
+      .attr('x1', (d: any) => d.source.x)
+      .attr('y1', (d: any) => d.source.y)
+      .attr('x2', (d: any) => d.target.x)
+      .attr('y2', (d: any) => d.target.y)
+
+    d3NodeSelection.attr('transform', (d: any) => `translate(${d.x},${d.y})`)
+
+    // Surlignage selon hashtags actifs
+    applyHashtagFilter()
+  })
+}
+
+function applyHashtagFilter() {
+  if (!d3NodeSelection || !d3LinkSelection) return
+  if (filteredStructureIds.value) {
+    const ids = filteredStructureIds.value
+    d3NodeSelection.filter((d: any) => d.type === 'structure').select('circle')
+      .attr('opacity', (d: any) => ids.has(d.id) ? 1 : 0.1)
+    d3LinkSelection.attr('opacity', (d: any) => {
+      const srcId = typeof d.source === 'object' ? d.source.id : d.source
+      return ids.has(srcId) ? 1 : 0.05
+    })
+  } else {
+    d3NodeSelection.select('circle').attr('opacity', 1)
+    d3LinkSelection.attr('opacity', 1)
+  }
+}
+
+// Déclencher quand l'onglet devient visible
+// Double rAF : nextTick met à jour le vdom, les 2 frames garantissent que
+// le browser a calculé le layout et que clientWidth/clientHeight != 0
+watch(() => props.active, (val) => {
+  if (val && import.meta.client && props.data) {
+    requestAnimationFrame(() => requestAnimationFrame(() => initGraph()))
+  }
+})
+
+// Relancer si les données arrivent après l'activation
+watch(() => props.data, (val) => {
+  if (val && props.active && import.meta.client) {
+    requestAnimationFrame(() => requestAnimationFrame(() => initGraph()))
+  }
+})
+
+// Re-appliquer le filtre visuel sans rebuild complet
+watch(activeHashtags, () => {
+  applyHashtagFilter()
+  if (simulation) simulation.alpha(0.01).restart()
+}, { deep: true })
+
+// Toggle sidebar : largeur SVG change -> reinit graphe apres transition CSS
+watch(sidebarOpen, () => {
+  if (!import.meta.client || !props.active || !props.data) return
+  setTimeout(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() => initGraph()))
+  }, 220)
+})
+
+onMounted(async () => {
+  if (import.meta.client && props.data && props.active) {
+    await nextTick()
+    initGraph()
+  }
+})
+
+onUnmounted(() => {
+  if (simulation) simulation.stop()
+})
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 9c856e6..71107c3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,83 +1,144 @@
 <template>
   <div class="flex h-full overflow-hidden" style="background: var(--nav-bg);">
 
-    <!-- ═══════════════════════════════════════ SIDEBAR DESKTOP (≥ 1024px) -->
-    <div class="hidden lg:flex w-80 shrink-0 flex-col overflow-hidden">
-      <NavSidebar
-        :search="search"
-        :modeValue="territoireMode"
-        :echelle="echelle"
-        :fonctions="fonctions"
-        :territoire="territoire"
-        :echelleCount="echelleCount"
-        :fonctionCount="fonctionCount"
-        :territoireCount="territoireCount"
-        :resultCount="filtered.length"
-        :orgs="filtered"
-        :selectedId="selectedId"
-        :hasActiveFilters="hasActiveFilters"
-        :pending="pending"
-        @update:search="onSearch"
-        @update:mode="onMode"
-        @update:echelle="onEchelle"
-        @update:fonctions="onFonctions"
-        @update:territoire="onTerritoire"
-        @select-org="onSelectOrg"
-        @hover-org="onHoverOrg"
-        @reset-filters="resetFilters"
+    <!-- ═══════════════════════════════════════ SIDEBAR DESKTOP (>= 1024px) -->
+    <div class="hidden lg:block overflow-y-auto" style="width: 320px; min-width: 320px; flex-shrink: 0; border-right: 1px solid var(--nav-bg-alt); height: 100%;">
+
+      <!-- IntentionBanner s'auto-affiche via Teleport (overlay plein ecran) -->
+      <IntentionBanner />
+
+      <!-- Filtres familles + hashtags -->
+      <HashtagFilter
+        :allHashtags="allHashtags"
+        :selectedHashtags="selectedHashtags"
+        :selectedFamille="selectedFamille"
+        @update:selectedHashtags="selectedHashtags = $event"
+        @update:selectedFamille="selectedFamille = $event"
       />
+
+      <!-- Separateur -->
+      <div style="height: 1px; background: var(--nav-bg-alt);"></div>
+
+      <!-- Barre de recherche -->
+      <div class="px-3 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
+        <label class="sidebar-search-label" aria-label="Rechercher une structure">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="sidebar-search-icon">
+            <circle cx="11" cy="11" r="8"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <input
+            v-model="search"
+            type="search"
+            placeholder="Rechercher une structure..."
+            class="sidebar-search-input"
+            autocomplete="off"
+          />
+          <button
+            v-if="search"
+            type="button"
+            class="sidebar-search-clear"
+            aria-label="Effacer"
+            @click.stop="search = ''"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </label>
+      </div>
+
+      <!-- Header compteur + reset -->
+      <div class="flex items-center justify-between px-4 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
+        <span class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">
+          {{ filtered.length }} structure{{ filtered.length > 1 ? 's' : '' }}
+        </span>
+        <button
+          v-if="hasActiveFilters"
+          @click="resetFilters"
+          class="text-xs underline hover:opacity-70"
+          style="color: var(--nav-text-muted);"
+        >Effacer les filtres</button>
+      </div>
+
+      <!-- Liste fiches (sidebar entiere scroll - pas de scroll interne) -->
+      <div class="px-3 py-2 space-y-1.5">
+        <div v-if="pending" class="flex items-center justify-center py-8" style="color: var(--nav-text-muted);">
+          Chargement...
+        </div>
+        <div v-else-if="filtered.length === 0" class="text-center py-8">
+          <p class="text-xs" style="color: var(--nav-text-muted);">Aucun résultat</p>
+        </div>
+        <div
+          v-for="structure in filtered"
+          :key="structure.id"
+          class="rounded-lg px-3 py-2 cursor-pointer transition-all"
+          :style="selectedId === structure.id
+            ? `background: var(--nav-bg-alt); border-left: 3px solid ${familleColor(structure.famille_principale)}; padding-left: 9px;`
+            : 'background: var(--nav-bg); border-left: 3px solid transparent; padding-left: 9px;'"
+          @click="onSelectStructure(structure.id)"
+          @mouseenter="hoveredId = structure.id"
+          @mouseleave="hoveredId = null"
+        >
+          <div class="flex items-start justify-between gap-1.5">
+            <span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ structure.nom }}</span>
+            <span
+              class="shrink-0 w-2.5 h-2.5 rounded-full mt-1"
+              :style="`background: ${familleColor(structure.famille_principale)};`"
+            />
+          </div>
+          <div class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">{{ structure.type_principal }} - {{ structure.ville }}</div>
+          <div v-if="structure.hashtags.length" class="mt-1 flex flex-wrap gap-1">
+            <span
+              v-for="tag in structure.hashtags.slice(0, 2)"
+              :key="tag"
+              class="text-xs"
+              style="color: var(--nav-text-muted);"
+            >{{ tag }}</span>
+          </div>
+        </div>
+      </div>
+
     </div>
 
     <!-- ═══════════════════════════════════════ ZONE CENTRALE (carte) -->
     <main class="flex-1 flex flex-col overflow-hidden relative">
 
-      <!-- Indicateur source dev -->
-      <div
-        v-if="dataSource === 'seed'"
-        class="absolute top-2 left-2 z-[500] px-2 py-1 rounded text-xs"
-        style="background: var(--nav-accent); color: var(--nav-text);"
-      >
-        Mode dev — données seed
-      </div>
-
-      <!-- ── VUE DESKTOP : Onglets Métropole / Outre-mer + carte pleine hauteur ── -->
+      <!-- ── VUE DESKTOP : Onglets Métro/Outre-mer ── -->
       <div class="hidden lg:flex lg:flex-1 lg:flex-col lg:overflow-hidden">
-
-        <!-- Onglets Métropole / Outre-mer (desktop) -->
+        <!-- Onglets 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"
+            class="px-5 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>
+          >Métropolitain</button>
           <button
-            type="button"
-            class="flex-1 py-2 text-sm font-medium transition-colors"
+            class="px-5 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>
+          >Outre-mer</button>
+          <button
+            class="px-5 py-2 text-sm font-medium transition-colors"
+            :style="desktopMapView === 'graphe'
+              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
+              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
+            @click="desktopMapView = 'graphe'"
+          >Vue graphique</button>
         </div>
 
-        <!-- Carte Métropole (pleine hauteur) -->
-        <div v-show="desktopMapView === 'metropole'" class="flex flex-col flex-1 overflow-hidden">
+        <!-- Carte Métropole desktop -->
+        <div v-show="desktopMapView === 'metropole'" class="flex-1 flex flex-col overflow-hidden">
           <div class="relative flex-1" style="min-height: 200px;">
             <ClientOnly>
-              <NavMap
+              <NavMapV2
                 ref="navMapRef"
-                :orgs="metropoleOrgs"
+                :structures="metropoleStructures"
                 :selectedId="selectedId"
-                @select-org="onSelectOrg"
+                @select-structure="onSelectStructure"
               />
               <template #fallback>
                 <div
@@ -89,32 +150,53 @@
               </template>
             </ClientOnly>
           </div>
-          <ChatbotPlaceholder @highlightOrgs="onHighlightOrgs" />
+          <ChatbotPlaceholder
+            @highlightOrgs="() => {}"
+            @applyHashtag="(tag) => { if (!selectedHashtags.includes(tag)) selectedHashtags = [...selectedHashtags, tag] }"
+          />
         </div>
 
-        <!-- Carte Outre-mer (pleine hauteur, scroll) -->
+        <!-- Carte Outre-mer desktop -->
         <div v-show="desktopMapView === 'outremer'" class="flex-1 overflow-y-auto" style="background: var(--nav-bg);">
           <ClientOnly>
             <OutremerMap
-              :orgs="outremerOrgs"
-              :selectedId="selectedId"
-              @select-org="onSelectOrg"
+              :orgs="outremerOrgsLegacy"
+              :selectedId="selectedIdLegacyNum"
+              @select-org="() => {}"
             />
             <template #fallback>
-              <div
-                class="flex items-center justify-center h-48 text-sm"
-                style="color: var(--nav-text-muted);"
-              >
+              <div class="flex items-center justify-center h-full text-sm" style="color: var(--nav-text-muted);">
                 Chargement…
               </div>
             </template>
           </ClientOnly>
         </div>
+
+        <!-- Vue graphique desktop -->
+        <div v-show="desktopMapView === 'graphe'" class="flex-1 overflow-hidden flex flex-col">
+          <div class="flex-1 overflow-hidden relative">
+            <ClientOnly>
+              <GraphView
+                :data="bifurcationData"
+                :allHashtags="allHashtags"
+                :active="desktopMapView === 'graphe'"
+                @select-structure="onSelectStructure"
+              />
+              <template #fallback>
+                <div class="flex items-center justify-center h-full" style="color: var(--nav-text-muted);">
+                  Chargement du graphe...
+                </div>
+              </template>
+            </ClientOnly>
+          </div>
+          <ChatbotPlaceholder
+            @highlightOrgs="() => {}"
+            @applyHashtag="(tag) => { if (!selectedHashtags.includes(tag)) selectedHashtags = [...selectedHashtags, tag] }"
+          />
+        </div>
       </div>
 
-      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer + carte pleine hauteur + sheet swipable ── -->
-
-      <!-- Onglets Métropolitain / Outre-mer -->
+      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer + sheet swipable ── -->
       <div class="lg:hidden shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
         <button
           class="flex-1 py-2 text-sm font-medium transition-colors"
@@ -133,34 +215,30 @@
       </div>
 
       <div class="lg:hidden flex-1 relative overflow-hidden">
-
-        <!-- Carte Métropole -->
+        <!-- Carte mobile Métropole -->
         <div v-show="mobileMapView === 'metropole'" class="absolute inset-0">
           <ClientOnly>
-            <NavMap
+            <NavMapV2
               ref="navMapMobileRef"
-              :orgs="metropoleOrgs"
+              :structures="metropoleStructures"
               :selectedId="selectedId"
-              @select-org="onSelectOrgMobile"
+              @select-structure="onSelectStructureMobile"
             />
             <template #fallback>
-              <div
-                class="w-full h-full flex items-center justify-center"
-                style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-              >
+              <div class="w-full h-full flex items-center justify-center" style="background: var(--nav-bg-alt); color: var(--nav-text-muted);">
                 Chargement de la carte…
               </div>
             </template>
           </ClientOnly>
         </div>
 
-        <!-- Carte Outre-mer (scroll vertical, pleine largeur) -->
+        <!-- Carte mobile Outre-mer -->
         <div v-show="mobileMapView === 'outremer'" class="absolute inset-0 overflow-y-auto" style="background: var(--nav-bg);">
           <ClientOnly>
             <OutremerMap
-              :orgs="outremerOrgs"
-              :selectedId="selectedId"
-              @select-org="onSelectOrgMobile"
+              :orgs="outremerOrgsLegacy"
+              :selectedId="selectedIdLegacyNum"
+              @select-org="() => {}"
             />
             <template #fallback>
               <div class="flex items-center justify-center h-48" style="color: var(--nav-text-muted);">
@@ -170,85 +248,65 @@
           </ClientOnly>
         </div>
 
-        <!-- Bottom sheet swipable (Métropole et Outre-mer) -->
+        <!-- Bottom sheet swipable -->
         <ClientOnly>
           <MobileSheet :resultCount="filtered.length" :pending="pending">
-            <!-- Barre recherche -->
+            <!-- Bandeau intention mobile -->
+            <div class="px-3 py-2" style="background: var(--bifurc-banner-bg, #faf8f5); border-bottom: 1px solid var(--bifurc-banner-border, #e0d8cc);">
+              <p class="text-xs leading-relaxed" style="color: var(--bifurc-banner-text, #2c2416); margin: 0;">
+                120 réseaux, collectifs et agences où des pensées écologiques deviennent des pratiques d'architecture.
+              </p>
+            </div>
+
+            <!-- Filtres hashtags mobile -->
+            <div class="px-3 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
+              <HashtagFilter
+                :allHashtags="allHashtags"
+                :selectedHashtags="selectedHashtags"
+                :selectedFamille="selectedFamille"
+                @update:selectedHashtags="selectedHashtags = $event"
+                @update:selectedFamille="selectedFamille = $event"
+              />
+            </div>
+
+            <!-- Barre recherche mobile -->
             <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">
+              <label class="mobile-search-label" aria-label="Rechercher une structure">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-muted); flex-shrink: 0;">
                   <circle cx="11" cy="11" r="8"/>
                   <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                 </svg>
                 <input
-                  v-model="mobileSearch"
+                  v-model="search"
                   type="search"
                   placeholder="Rechercher…"
                   class="mobile-search-input"
                   autocomplete="off"
-                  @input="onSearch(mobileSearch)"
                 />
                 <button
-                  v-if="mobileSearch"
+                  v-if="search"
                   type="button"
                   class="mobile-search-clear"
                   aria-label="Effacer"
-                  @click.stop="mobileSearch = ''; onSearch('')"
+                  @click.stop="search = ''"
                 >
                   <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                     <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                   </svg>
                 </button>
               </label>
-
-              <!-- Filtres ÉCHELLE — chips style FONCTION -->
-              <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">
-                  <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 }}</button>
-                </div>
-              </div>
-
-              <!-- Filtres FONCTION — chips flex-wrap -->
-              <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">
-                  <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 }}</button>
-                </div>
-              </div>
-
               <button
                 v-if="hasActiveFilters"
                 @click="resetFilters"
-                class="mt-2 text-xs"
+                class="mt-1 text-xs"
                 style="color: var(--nav-text-muted); text-decoration: underline;"
-              >✕ Effacer les filtres</button>
+              >Effacer les filtres</button>
             </div>
 
-            <!-- Compteur + Liste fiches -->
+            <!-- Liste fiches mobile -->
             <div class="px-3 py-2">
               <div class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">
-                {{ filtered.length }} résultat{{ filtered.length > 1 ? 's' : '' }}
+                {{ filtered.length }} structure{{ filtered.length > 1 ? 's' : '' }}
               </div>
               <div v-if="pending" class="flex items-center justify-center py-8" style="color: var(--nav-text-muted);">
                 Chargement des fiches…
@@ -261,46 +319,36 @@
               </div>
               <div class="space-y-2">
                 <div
-                  v-for="org in filtered"
-                  :key="org.Id"
+                  v-for="structure in filtered"
+                  :key="structure.id"
                   class="block rounded-lg p-3 transition-all cursor-pointer"
-                  :style="selectedId === org.Id
-                    ? 'background: var(--nav-bg-alt); border-left: 3px solid var(--nav-accent);'
+                  :style="selectedId === structure.id
+                    ? `background: var(--nav-bg-alt); border-left: 3px solid ${familleColor(structure.famille_principale)};`
                     : 'background: var(--nav-surface); border-left: 3px solid transparent;'"
-                  @click="onSelectOrgMobile(org.Id)"
+                  @click="onSelectStructureMobile(structure.id)"
                 >
                   <div class="flex items-start justify-between gap-2">
-                    <span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ org.nom }}</span>
+                    <span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ structure.nom }}</span>
                     <span
-                      v-if="org.echelle"
-                      class="shrink-0 px-2 py-0.5 rounded-full text-xs font-medium"
-                      style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-                    >{{ org.echelle }}</span>
-                  </div>
-                  <div v-if="fonctionsList(org).length" class="mt-1 flex flex-wrap gap-1">
-                    <span
-                      v-for="fn in fonctionsList(org)"
-                      :key="fn"
-                      class="px-1.5 py-0.5 rounded text-xs"
-                      style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-                    >{{ fn }}</span>
-                  </div>
-                  <div v-if="org.localisation_ville" class="mt-1 text-xs" style="color: var(--nav-text-muted);">
-                    {{ org.localisation_ville }}
+                      class="shrink-0 w-2.5 h-2.5 rounded-full mt-1"
+                      :style="`background: ${familleColor(structure.famille_principale)};`"
+                    />
                   </div>
+                  <div class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">{{ structure.type_principal }} · {{ structure.ville }}</div>
                 </div>
               </div>
             </div>
           </MobileSheet>
         </ClientOnly>
       </div>
-
     </main>
 
-    <!-- ═══════════════════════════════════════ MODAL FICHE (desktop) -->
-    <FicheModal
+    <!-- ═══════════════════════════════════════ MODAL FICHE V2 (desktop) -->
+    <FicheModalV2
       v-model="ficheModalOpen"
-      :orgId="ficheModalId"
+      :structureId="ficheModalId"
+      :data="bifurcationData"
+      @update:structureId="ficheModalId = $event"
     />
 
     <!-- ═══════════════════════════════════════ BOUTON CHATBOT FLOTTANT (mobile) -->
@@ -329,270 +377,141 @@
     <ChatbotSheet
       :modelValue="chatbotOpen"
       @update:modelValue="chatbotOpen = $event"
-      @highlightOrgs="onHighlightOrgs"
+      @highlightOrgs="() => {}"
     />
 
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Org } from '~/types/org'
+import type { ReseauxBifurcationData, StructureV2 } from '~/types/structure-v2'
 
-// ── URL query params sync ─────────────────────────────────────────────────
-const route = useRoute()
-const router = useRouter()
-
-const search = ref<string>((route.query.q as string) ?? '')
-const echelle = ref<string[]>(
-  route.query.echelle
-    ? (route.query.echelle as string).split(',').filter(Boolean)
-    : []
-)
-const fonctions = ref<string[]>(
-  route.query.fonctions
-    ? (route.query.fonctions as string).split(',').filter(Boolean)
-    : []
-)
-const territoire = ref<string | null>((route.query.territoire as string) ?? null)
-const territoireMode = ref<string>(
-  (route.query.mode as string) === 'outremer' ? 'outremer' : 'metropole'
-)
-
-const selectedId = ref<number | null>(null)
-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
-const prevSelectedId = ref<number | null>(null)
-
-function onHighlightOrgs(ids: (number | string)[]) {
-  if (!ids.length) return
-  const firstId = typeof ids[0] === 'string' ? parseInt(ids[0], 10) : ids[0]
-  if (isNaN(firstId)) return
-
-  // Sauvegarde la sélection courante
-  prevSelectedId.value = selectedId.value
-  selectedId.value = firstId
-
-  if (highlightTimer) clearTimeout(highlightTimer)
-  highlightTimer = setTimeout(() => {
-    // Restaure la sélection précédente (ou null)
-    selectedId.value = prevSelectedId.value
-    prevSelectedId.value = null
-    highlightTimer = null
-  }, 5000)
+// ── Couleurs familles ──────────────────────────────────────────────────────
+const FAMILLE_COLORS: Record<number, string> = {
+  1: '#a85d3e',
+  2: '#c4a472',
+  3: '#d4a017',
+  4: '#5a7a4a',
+  5: '#3d6a8c',
+  6: '#6b3fa0',
 }
 
-// Ref locale barre de recherche mobile (synchronisée avec search via onSearch)
-const mobileSearch = ref<string>((route.query.q as string) ?? '')
+function familleColor(f: number): string {
+  return FAMILLE_COLORS[f] ?? '#888'
+}
 
-// Refs vers les instances NavMap (desktop + mobile séparées via deux <ClientOnly>)
+// ── État UI ────────────────────────────────────────────────────────────────
+const selectedId = ref<string | null>(null)
+const hoveredId = ref<string | null>(null)
+const ficheModalOpen = ref(false)
+const ficheModalId = ref<string | null>(null)
+const chatbotOpen = ref(false)
+const mobileMapView = ref<'metropole' | 'outremer'>('metropole')
+const desktopMapView = ref<'metropole' | 'outremer' | 'graphe'>('metropole')
+
+// Filtres
+const search = ref('')
+const selectedFamille = ref<number | null>(null)
+const selectedHashtags = ref<string[]>([])
+
+// Refs cartes
 const navMapRef = ref<any>(null)
 const navMapMobileRef = ref<any>(null)
 
-// Sync URL <-> état filtres
-function syncUrl() {
-  const q: Record<string, string> = {}
-  if (search.value) q.q = search.value
-  if (echelle.value.length) q.echelle = echelle.value.join(',')
-  if (fonctions.value.length) q.fonctions = fonctions.value.join(',')
-  if (territoire.value) q.territoire = territoire.value
-  if (territoireMode.value === 'outremer') q.mode = 'outremer'
-  router.replace({ query: Object.keys(q).length ? q : undefined })
+// ── Données V2 - JSON statique ─────────────────────────────────────────────
+const bifurcationData = ref<ReseauxBifurcationData | null>(null)
+const pending = ref(true)
+
+onMounted(async () => {
+  try {
+    bifurcationData.value = await $fetch<ReseauxBifurcationData>('/data/reseaux-bifurcation.json')
+  } catch (e) {
+    console.error('Erreur chargement reseaux-bifurcation.json', e)
+  } finally {
+    pending.value = false
+  }
+})
+
+const structures = computed<StructureV2[]>(() => bifurcationData.value?.structures ?? [])
+
+// Tous les hashtags uniques triés
+const allHashtags = computed<string[]>(() => {
+  const set = new Set<string>()
+  structures.value.forEach(s => s.hashtags.forEach(h => set.add(h)))
+  return Array.from(set).sort()
+})
+
+// ── Filtrage ───────────────────────────────────────────────────────────────
+const filtered = computed<StructureV2[]>(() => {
+  let result = structures.value
+
+  // Filtre texte
+  if (search.value.trim()) {
+    const q = search.value.toLowerCase()
+    result = result.filter(
+      s =>
+        s.nom.toLowerCase().includes(q) ||
+        s.ville.toLowerCase().includes(q) ||
+        s.description_courte.toLowerCase().includes(q) ||
+        s.hashtags.some(h => h.toLowerCase().includes(q))
+    )
+  }
+
+  // Filtre famille - F6 = badge_f6_recherche_politique, pas famille_principale
+  if (selectedFamille.value !== null) {
+    if (selectedFamille.value === 6) {
+      result = result.filter(s => (s.badges as any)?.f6_recherche_politique === true)
+    } else {
+      result = result.filter(
+        s => s.famille_principale === selectedFamille.value ||
+          (s.familles_secondaires ?? []).includes(selectedFamille.value!)
+      )
+    }
+  }
+
+  // Filtre hashtags (AND logique si plusieurs)
+  if (selectedHashtags.value.length) {
+    result = result.filter(
+      s => selectedHashtags.value.every(h => s.hashtags.includes(h))
+    )
+  }
+
+  return result
+})
+
+const hasActiveFilters = computed(
+  () => !!search.value || selectedFamille.value !== null || selectedHashtags.value.length > 0
+)
+
+function resetFilters() {
+  search.value = ''
+  selectedFamille.value = null
+  selectedHashtags.value = []
 }
 
-// Sauvegarde les filtres courants dans sessionStorage pour le bouton retour des fiches
-function storeFiltersForBack() {
-  if (typeof window === 'undefined') return
-  const q: Record<string, string> = {}
-  if (search.value) q.q = search.value
-  if (echelle.value.length) q.echelle = echelle.value.join(',')
-  if (fonctions.value.length) q.fonctions = fonctions.value.join(',')
-  if (territoire.value) q.territoire = territoire.value
-  if (territoireMode.value === 'outremer') q.mode = 'outremer'
-  const qs = new URLSearchParams(q).toString()
-  sessionStorage.setItem('nav_back_filters', qs)
-}
+// Structures métropole (pays != DOM-TOM, et avec coordonnées)
+// Pour simplifier : toutes les structures (la carte gère les sans-coords)
+const metropoleStructures = computed<StructureV2[]>(() => filtered.value)
 
-function onSearch(v: string) { search.value = v; syncUrl(); storeFiltersForBack() }
-function onMode(v: string) { territoireMode.value = v; syncUrl(); storeFiltersForBack() }
-function onEchelle(v: string[]) { echelle.value = v; syncUrl(); storeFiltersForBack() }
-function onFonctions(v: string[]) { fonctions.value = v; syncUrl(); storeFiltersForBack() }
-function onTerritoire(v: string | null) { territoire.value = v; syncUrl(); storeFiltersForBack() }
+// Outre-mer : pas de structures V2 DOM-TOM pour l'instant - garder le composant existant vide
+// OutremerMap attend le format Org legacy - on passe un tableau vide
+const outremerOrgsLegacy = computed(() => [])
+const selectedIdLegacyNum = computed(() => null)
 
-function onSelectOrg(id: number) {
+// ── Sélection ─────────────────────────────────────────────────────────────
+function onSelectStructure(id: string) {
   selectedId.value = selectedId.value === id ? null : id
-  // Desktop : ouvrir le modal fiche
   if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
     ficheModalId.value = id
     ficheModalOpen.value = true
   }
 }
 
-// Tap card mobile → ouvre la fiche détaillée
-function onSelectOrgMobile(id: number) {
+function onSelectStructureMobile(id: string) {
   selectedId.value = id
-  storeFiltersForBack()
-  router.push(`/fiche/${id}`)
+  ficheModalId.value = id
+  ficheModalOpen.value = true
 }
 
-function onHoverOrg(id: number | null) {
-  if (id !== null) selectedId.value = id
-}
-
-const hasActiveFilters = computed(() =>
-  !!search.value || echelle.value.length > 0 || fonctions.value.length > 0 || !!territoire.value
-)
-
-function resetFilters() {
-  search.value = ''
-  mobileSearch.value = ''
-  echelle.value = []
-  fonctions.value = []
-  territoire.value = null
-  router.replace({ query: undefined })
-}
-
-// Tagging compact mobile — toggle direct
-function toggleEchelle(opt: string) {
-  if (echelle.value.includes(opt)) {
-    onEchelle(echelle.value.filter(v => v !== opt))
-  } else {
-    onEchelle([...echelle.value, opt])
-  }
-}
-
-function toggleFonction(fn: string) {
-  if (fonctions.value.includes(fn)) {
-    onFonctions(fonctions.value.filter(f => f !== fn))
-  } else {
-    onFonctions([...fonctions.value, fn])
-  }
-}
-
-// Sync recherche depuis app.vue top nav (via URL ?q=)
-watch(() => route.query.q, (v) => {
-  search.value = (v as string) ?? ''
-})
-
-// ── Données ───────────────────────────────────────────────────────────────
-const { data, pending, error } = await useFetch<{ list: Org[]; source: string }>('/api/organisations')
-
-const orgs = computed<Org[]>(() => data.value?.list ?? [])
-const dataSource = computed(() => data.value?.source ?? 'nocodb')
-
-// Fiche aléatoire — réagit au ?random=1
-watch(() => route.query.random, (v) => {
-  if (v === '1' && orgs.value.length > 0) {
-    const randomOrg = orgs.value[Math.floor(Math.random() * orgs.value.length)]
-    router.replace({ path: `/fiche/${randomOrg.Id}` })
-  }
-})
-
-// ── Filtrage côté client ──────────────────────────────────────────────────
-const filtered = computed<Org[]>(() => {
-  let result = orgs.value
-
-  if (search.value.trim()) {
-    const q = search.value.toLowerCase()
-    result = result.filter(
-      (o) =>
-        o.nom?.toLowerCase().includes(q) ||
-        o.localisation_ville?.toLowerCase().includes(q)
-    )
-  }
-
-  if (echelle.value.length) {
-    result = result.filter((o) => o.echelle && echelle.value.includes(o.echelle))
-  }
-
-  if (fonctions.value.length) {
-    // Garde les orgs qui matchent au moins 1 fonction sélectionnée
-    result = result.filter((o) => {
-      const orgFns = (o.tags_fonction ?? '').split(',').map((f) => f.trim()).filter(Boolean)
-      return fonctions.value.some((fn) => orgFns.includes(fn))
-    })
-    // Tri par score pondéré : priorité 1 (1er cliqué) = poids le plus fort
-    const n = fonctions.value.length
-    const score = (o: Org) =>
-      fonctions.value.reduce((s, fn, i) => {
-        const fns = (o.tags_fonction ?? '').split(',').map((f) => f.trim()).filter(Boolean)
-        return s + (fns.includes(fn) ? (n - i) : 0)
-      }, 0)
-    result = [...result].sort((a, b) => score(b) - score(a))
-  }
-
-  if (territoire.value) {
-    result = result.filter((o) => o.territoire === territoire.value)
-  }
-
-  return result
-})
-
-const DOM_TOM = ['Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte']
-const DOM_TOM_LIST = DOM_TOM
-
-const metropoleOrgs = computed<Org[]>(() =>
-  filtered.value.filter(o => !o.territoire || !DOM_TOM.includes(o.territoire))
-)
-
-const outremerOrgs = computed<Org[]>(() => {
-  if (territoire.value && DOM_TOM.includes(territoire.value)) {
-    return filtered.value.filter(o => o.territoire === territoire.value)
-  }
-  return filtered.value.filter(o => o.territoire && DOM_TOM.includes(o.territoire))
-})
-
-const outremerCountByDom = computed<Record<string, number>>(() => {
-  const counts: Record<string, number> = {}
-  DOM_TOM.forEach(d => { counts[d] = 0 })
-  filtered.value.forEach(o => {
-    if (o.territoire && DOM_TOM.includes(o.territoire)) {
-      counts[o.territoire] = (counts[o.territoire] ?? 0) + 1
-    }
-  })
-  return counts
-})
-
-// ── Compteurs ─────────────────────────────────────────────────────────────
-const ECHELLES = ['National', 'Régional', 'Local'] as const
-const ECHELLE_LABELS: Record<string, string> = { National: 'Nat', Régional: 'Rég', Local: 'Loc' }
-const FONCTIONS = ['Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier', 'Comptabilité', 'Développement', 'Formation', "Gestion d'agence", 'Santé mentale'] as const
-const TERRITOIRES = ['Métropole', 'Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte']
-
-const echelleCount = computed<Record<string, number>>(() => {
-  const counts: Record<string, number> = {}
-  ECHELLES.forEach((e) => { counts[e] = 0 })
-  orgs.value.forEach((o) => { if (o.echelle) counts[o.echelle] = (counts[o.echelle] ?? 0) + 1 })
-  return counts
-})
-
-const fonctionCount = computed<Record<string, number>>(() => {
-  const counts: Record<string, number> = {}
-  FONCTIONS.forEach((f) => { counts[f] = 0 })
-  orgs.value.forEach((o) => {
-    const fns = (o.tags_fonction ?? '').split(',').map((f) => f.trim()).filter(Boolean)
-    fns.forEach((fn) => { counts[fn] = (counts[fn] ?? 0) + 1 })
-  })
-  return counts
-})
-
-const territoireCount = computed<Record<string, number>>(() => {
-  const counts: Record<string, number> = {}
-  TERRITOIRES.forEach((t) => { counts[t] = 0 })
-  orgs.value.forEach((o) => { if (o.territoire) counts[o.territoire] = (counts[o.territoire] ?? 0) + 1 })
-  counts['Métropole'] = orgs.value.filter(o => !o.territoire || !DOM_TOM.includes(o.territoire)).length
-  return counts
-})
-
-// ── Helpers ───────────────────────────────────────────────────────────────
-function fonctionsList(org: Org): string[] {
-  return (org.tags_fonction ?? '').split(',').map((f) => f.trim()).filter(Boolean).slice(0, 3)
-}
-
-useHead({ title: 'AEP — Cartographie de l\'écologie politique architecturale' })
+useHead({ title: "AEP - Réseaux de bifurcation architecturale" })
 </script>