fix(CartePensees): reformatage syntaxe - fichier condensé sur 1 ligne cassait le build Vite/Vue

Merge P3 media modif
Merge P2 outils build
2026-05-22 11:07:10 +02:00 · 2026-05-22 11:02:05 +02:00 · 2026-05-22 11:01:30 +02:00 · 2026-05-22 11:00:00 +02:00 · 2026-05-22 10:58:39 +02:00 · 2026-05-08 18:58:42 +02:00
45 changed files with 44602 additions and 164 deletions
--- a/app.vue
+++ b/app.vue
@@ -7,26 +7,28 @@
      style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);"
    >
      <!-- Logo -->
-      <a href="/" class="flex items-center gap-2 hover:opacity-90 transition-opacity shrink-0 group relative" title="Architecture d'Écologie Politique">
+      <a href="/" class="logo-link flex items-center gap-2 hover:opacity-90 transition-opacity shrink-0" title="Architecture d'Écologie Politique">
        <div
-          class="h-7 px-2 rounded-lg flex items-center justify-center shrink-0"
+          class="h-8 px-2 rounded-lg flex items-center justify-center shrink-0"
          style="background: var(--nav-primary-solid);"
        >
          <span class="font-bold text-xs tracking-tight" style="color: var(--nav-text-on-primary);">AEP</span>
        </div>
-        <div class="flex flex-col">
-          <span class="font-bold text-base tracking-tight leading-tight" style="color: var(--nav-text);">AEP</span>
-          <span class="text-xs leading-tight hidden lg:inline" style="color: var(--nav-text-muted);">Architecture d'Écologie Politique</span>
-        </div>
-        <!-- Tooltip sm (quand le sous-titre lg est caché) -->
-        <div class="absolute left-0 top-full mt-2 px-2 py-1 rounded text-xs whitespace-nowrap pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity lg:hidden z-50"
-          style="background: var(--nav-primary-solid); color: var(--nav-text-on-primary);">
-          Architecture d'Écologie Politique
+        <div class="logo-text flex flex-col leading-tight">
+          <span class="logo-line-1 font-bold tracking-tight" style="color: var(--nav-text);">Architecture</span>
+          <span class="logo-line-2 font-bold tracking-tight" style="color: var(--nav-text);">d'Écologie Politique</span>
        </div>
      </a>

      <!-- ── Onglets desktop (≥1024px) — remplace la barre de recherche ── -->
      <nav class="hidden lg:flex flex-1 justify-center items-end gap-0 mx-6" aria-label="Navigation projets">
+        <NuxtLink
+          to="/outils"
+          class="nav-tab"
+          :class="{ 'nav-tab--active': route.path === '/outils' }"
+        >
+          Outils
+        </NuxtLink>
        <NuxtLink
          to="/"
          class="nav-tab"
@@ -177,12 +179,16 @@
            style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt); z-index: 9999;"
            @click="hamburgerOpen = false"
          >
+            <NuxtLink to="/outils" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/outils' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Outils</NuxtLink>
            <NuxtLink to="/" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Écosystème Entraide Architecture</NuxtLink>
-            <NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">Réseaux AEP</NuxtLink>
+            <NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/agences' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Réseaux AEP</NuxtLink>
+            <NuxtLink to="/trouver-du-taf" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/trouver-du-taf' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Jobs</NuxtLink>
            <NuxtLink to="/rag" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">RAG</NuxtLink>
            <NuxtLink to="/codev" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path.startsWith('/codev') ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Codev</NuxtLink>
            <div style="height: 1px; background: var(--nav-bg-alt); margin: 4px 0;"></div>
+            <NuxtLink to="/manifeste" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/manifeste' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text-muted);'">Manifeste</NuxtLink>
            <NuxtLink to="/a-propos" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">À propos</NuxtLink>
+            <a href="https://liberapay.com/trans-former.fr/donate" target="_blank" rel="noopener noreferrer" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">Soutenir →</a>
            <NuxtLink to="/signaler" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">Signaler</NuxtLink>
          </div>
        </div>
@@ -262,6 +268,21 @@ function goRandom() {
 </script>

 <style>
+/* ── Logo header (texte 2 lignes) ─────────────────────────────────────── */
+.logo-text {
+  line-height: 1.05;
+}
+.logo-line-1, .logo-line-2 {
+  font-size: 0.7rem;
+  letter-spacing: -0.01em;
+}
+@media (min-width: 640px) {
+  .logo-line-1, .logo-line-2 { font-size: 0.78rem; }
+}
+@media (min-width: 1024px) {
+  .logo-line-1, .logo-line-2 { font-size: 0.85rem; }
+}
+
 /* ── Onglets header desktop ───────────────────────────────────────────── */
 .nav-tab {
  position: relative;
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -108,3 +108,16 @@
 .dark .leaflet-popup-tip {
  background: var(--nav-surface);
 }
+
+/* ── Rendu Markdown chatbot (useMarkdown composable) ────────────────────── */
+.md-content { font-size: inherit; line-height: 1.6; }
+.md-content p { margin: 0 0 0.5em; }
+.md-content p:last-child { margin-bottom: 0; }
+.md-content strong, .md-h1, .md-h2, .md-h3 { font-weight: 700; }
+.md-h2 { font-size: 0.9375em; display: block; margin-bottom: 0.25em; }
+.md-h3 { font-size: 0.875em; display: block; }
+.md-content em { font-style: italic; }
+.md-list { margin: 0.375em 0 0.375em 1em; padding: 0; list-style: disc; }
+.md-list li { margin-bottom: 0.2em; }
+.md-link { text-decoration: underline; opacity: 0.85; }
+.md-link:hover { opacity: 1; }
--- a/assets/css/v2-bifurcation.css
+++ b/assets/css/v2-bifurcation.css
@@ -0,0 +1,23 @@
+/* Palette familles V2 - variables locales, ne pas toucher --nav-* */
+:root {
+  --bifurc-color-f1: #a85d3e;   /* Réemploi & filières - terracotta */
+  --bifurc-color-f2: #c4a472;   /* Frugalité & low-tech - terre crue */
+  --bifurc-color-f3: #d4a017;   /* Architecture sociale - ocre */
+  --bifurc-color-f4: #5a7a4a;   /* Collectifs & AMO - vert mousse */
+  --bifurc-color-f5: #3d6a8c;   /* Urbanisme transition - bleu profond */
+
+  --bifurc-badge-f6: #6b3fa0;   /* Recherche politique - violet */
+  --bifurc-badge-cr: #2d8a6b;   /* Centre ressources - vert foncé */
+  --bifurc-badge-mm: #c44a2f;   /* Mouvement manifeste - rouge brique */
+  --bifurc-badge-cp: #1a3a6b;   /* Contre-pouvoir - bleu nuit */
+
+  --bifurc-banner-bg: #faf8f5;
+  --bifurc-banner-border: #e0d8cc;
+  --bifurc-banner-text: #2c2416;
+}
+
+.bifurc-pin-f1 { background: var(--bifurc-color-f1); }
+.bifurc-pin-f2 { background: var(--bifurc-color-f2); }
+.bifurc-pin-f3 { background: var(--bifurc-color-f3); }
+.bifurc-pin-f4 { background: var(--bifurc-color-f4); }
+.bifurc-pin-f5 { background: var(--bifurc-color-f5); }
--- a/components/BandeauBas.vue
+++ b/components/BandeauBas.vue
@@ -139,72 +139,7 @@

  </footer>

-  <!-- ═══════════════════════════════════════ FAB MOBILE (< 1024px) ════════ -->
-  <div v-else>
-    <!-- FAB soutenir (à gauche du chatbot) -->
-    <button
-      class="fab-soutenir"
-      type="button"
-      @click="fabSheetOpen = true"
-      aria-label="Soutenir le projet AEP"
-    >
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
-      </svg>
-    </button>
-
-    <!-- Bottom sheet FAB -->
-    <Teleport to="body">
-      <Transition name="backdrop">
-        <div
-          v-if="fabSheetOpen"
-          class="fixed inset-0 z-[1020]"
-          style="background: rgba(26,34,56,0.5);"
-          @click="fabSheetOpen = false"
-          aria-hidden="true"
-        />
-      </Transition>
-      <Transition name="sheet">
-        <div
-          v-if="fabSheetOpen"
-          class="fab-sheet"
-          role="dialog"
-          aria-modal="true"
-          aria-label="Soutenir AEP"
-        >
-          <!-- Poignée -->
-          <div class="flex justify-center pt-3 pb-1">
-            <div class="rounded-full" style="width: 36px; height: 4px; background: var(--nav-bg-alt);" />
-          </div>
-          <div class="px-5 pb-6">
-            <h2 class="text-base font-bold mb-2" style="color: var(--nav-text);">Soutenir AEP</h2>
-            <template v-if="stats">
-              <p class="text-sm mb-1" style="color: var(--nav-text-muted);">
-                Coût IA ce mois : <strong>{{ stats.cout_mois_eur.toFixed(2) }} €</strong>
-                · Tokens : {{ stats.tokens_mois.toLocaleString('fr-FR') }}
-              </p>
-              <p class="text-sm mb-3" style="color: var(--nav-text-muted);">
-                {{ stats.fiches_semaine }} fiche{{ stats.fiches_semaine !== 1 ? 's' : '' }} ajoutée{{ stats.fiches_semaine !== 1 ? 's' : '' }} cette semaine
-              </p>
-            </template>
-            <p class="text-sm mb-4" style="color: var(--nav-text-muted); line-height: 1.5;">
-              1 € = 30 fiches mises en ligne. AEP est libre, sans pub, financé par les dons.
-            </p>
-            <a
-              href="https://liberapay.com/trans-former.fr/donate"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="block w-full text-center py-3 rounded-xl font-semibold text-sm"
-              style="background: var(--nav-primary); color: var(--nav-text-on-primary); text-decoration: none;"
-              @click="fabSheetOpen = false"
-            >
-              Soutenir sur Liberapay →
-            </a>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-  </div>
+  <!-- Mobile (< 1024px) : pas de FAB — Soutenir est dans le menu hamburger -->
 </template>

 <script setup lang="ts">
@@ -221,7 +156,6 @@ interface Stats {
 const stats = ref<Stats | null>(null)
 const loading = ref(true)
 const modalOpen = ref(false)
-const fabSheetOpen = ref(false)
 const tooltipVisible = ref(false)

 // Desktop — replié par défaut, déploie au hover, replie immédiatement à la sortie
@@ -460,39 +394,6 @@ const jaugePct = computed(() => {
  border-top-color: var(--nav-primary-solid, #1a2238);
 }

-/* ── FAB mobile soutenir ─────────────────────────────────────────────────── */
-.fab-soutenir {
-  position: fixed;
-  bottom: 68px; /* au-dessus du FAB chatbot à 24px du bas + 48px de hauteur */
-  left: 16px;
-  z-index: 1000;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  border: none;
-  background: var(--nav-accent);
-  color: var(--nav-text);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 16px rgba(26,34,56,0.25);
-  cursor: pointer;
-  transition: opacity 0.15s, transform 0.1s;
-}
-
-.fab-soutenir:hover { opacity: 0.88; transform: translateY(-1px); }
-
-/* ── Bottom sheet FAB ────────────────────────────────────────────────────── */
-.fab-sheet {
-  position: fixed;
-  inset-x: 0;
-  bottom: 0;
-  z-index: 1021;
-  background: var(--nav-surface);
-  border-radius: 16px 16px 0 0;
-  box-shadow: 0 -4px 32px rgba(26,34,56,0.18);
-}
-
 /* ── Modal ───────────────────────────────────────────────────────────────── */
 .modal-backdrop {
  position: fixed;
--- a/components/CartePensees.vue
+++ b/components/CartePensees.vue
@@ -0,0 +1,372 @@
+<template>
+  <div style="width: 100%; height: 100%; position: relative; background: #f5f3f0;">
+    <svg ref="svgRef" style="width: 100%; height: 100%;"></svg>
+    <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: 240px; 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">
+interface EcoleData { id: string; label: string; description: string; color: string; x_hint: number; y_hint: number }
+interface LivreRag { slug: string; titre: string; annee: number; couches: string[] }
+interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; ingere: boolean; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string; bio_courte_provisoire?: string }
+interface PenseesData { ecoles: EcoleData[]; auteurs: AuteurData[] }
+
+// Liens d'influence inter-ecoles (Phase 7 - matrice de filiation)
+const LINKS_INFLUENCE = [
+  // filiations directes
+  { source: 'eco-anarchisme', target: 'technocritique', auteurs_passerelle: ['Bookchin', 'Illich'], type: 'filiation' },
+  { source: 'eco-anarchisme', target: 'decroissance', auteurs_passerelle: ['Latouche', 'Kropotkine'], type: 'filiation' },
+  { source: 'ecosocialisme', target: 'decroissance', auteurs_passerelle: ['Saito', 'Gorz'], type: 'filiation' },
+  { source: 'ecosocialisme', target: 'ecologies-decoloniales', auteurs_passerelle: ['Klein', 'Ferdinand'], type: 'filiation' },
+  { source: 'ecofeminismes', target: 'ecologies-decoloniales', auteurs_passerelle: ['Shiva', 'Ouassak'], type: 'filiation' },
+  { source: 'ecofeminismes', target: 'pensees-vivant', auteurs_passerelle: ['Haraway', 'Despret'], type: 'filiation' },
+  { source: 'technocritique', target: 'decroissance', auteurs_passerelle: ['Ellul', 'Latouche'], type: 'filiation' },
+  { source: 'decroissance', target: 'pensees-vivant', auteurs_passerelle: ['Servigne', 'Despret'], type: 'filiation' },
+  { source: 'pensees-vivant', target: 'ethiques-environnementales', auteurs_passerelle: ['Naess', 'Latour'], type: 'filiation' },
+  { source: 'ecosocialisme', target: 'eco-anarchisme', auteurs_passerelle: ['Gorz', 'Graeber'], type: 'filiation' },
+  // liens de critique
+  { source: 'ecosocialisme', target: 'capitalisme-vert', auteurs_passerelle: ['Klein', 'Malm'], type: 'critique' },
+  { source: 'decroissance', target: 'capitalisme-vert', auteurs_passerelle: ['Latouche', 'Meadows'], type: 'critique' },
+  { source: 'eco-anarchisme', target: 'capitalisme-vert', auteurs_passerelle: ['Bookchin'], type: 'critique' },
+  { source: 'ethiques-environnementales', target: 'ecofascismes', auteurs_passerelle: ['Naess'], type: 'critique' },
+  { source: 'capitalisme-vert', target: 'ecofascismes', auteurs_passerelle: [], type: 'critique' },
+]
+
+const props = defineProps<{ data: PenseesData | null; active?: boolean }>()
+const emit = defineEmits<{ 'select-auteur': [id: string]; 'select-ecole': [id: string] }>()
+
+const svgRef = ref<SVGElement | null>(null)
+const tooltipRef = ref<HTMLElement | null>(null)
+let simulation: any = null
+let d3LinkSel: any = null
+let d3InfluenceSel: any = null
+let d3NodeSel: any = null
+let d3EdgeLabelSel: any = null
+
+async function initGraph() {
+  if (!svgRef.value || !props.data) return
+  const d3 = await import('d3')
+
+  const svgEl = svgRef.value
+  const W = svgEl.clientWidth || 900
+  const H = svgEl.clientHeight || 600
+
+  d3.select(svgEl).selectAll('*').remove()
+  const svg = d3.select(svgEl).attr('viewBox', `0 0 ${W} ${H}`)
+  const g = svg.append('g')
+
+  svg.call(d3.zoom<SVGElement, unknown>().scaleExtent([0.3, 4]).on('zoom', (e) => g.attr('transform', e.transform)) as any)
+
+  const ecoleMap = new Map<string, EcoleData>(props.data.ecoles.map(e => [e.id, e]))
+
+  // Positions fixes des ecoles (base pour forces D3)
+  const ecolePositions = new Map<string, { tx: number; ty: number }>()
+  props.data.ecoles.forEach(e => {
+    ecolePositions.set(e.id, { tx: W * e.x_hint, ty: H * e.y_hint })
+  })
+
+  // ---- LIENS D'INFLUENCE INTER-ECOLES (couche 3) ----
+  const gInfluence = g.append('g').attr('class', 'links-influence')
+
+  LINKS_INFLUENCE.forEach(link => {
+    const src = ecolePositions.get(link.source)
+    const tgt = ecolePositions.get(link.target)
+    if (!src || !tgt) return
+
+    const isCritique = link.type === 'critique'
+    const lineEl = gInfluence.append('line')
+      .attr('class', 'influence-link')
+      .attr('x1', src.tx).attr('y1', src.ty)
+      .attr('x2', tgt.tx).attr('y2', tgt.ty)
+      .attr('stroke', isCritique ? '#d99' : '#9aa')
+      .attr('stroke-width', 1)
+      .attr('stroke-dasharray', isCritique ? '4,3' : '6,4')
+      .attr('stroke-opacity', isCritique ? 0.2 : 0.22)
+
+    if (link.auteurs_passerelle && link.auteurs_passerelle.length > 0) {
+      lineEl
+        .on('mouseenter', (e: any) => {
+          if (!tooltipRef.value) return
+          tooltipRef.value.innerHTML = `<strong>Influence</strong><br><span style="opacity:0.8;font-size:0.72rem;">Passerelles : ${link.auteurs_passerelle.join(', ')}</span>`
+          tooltipRef.value.style.opacity = '1'
+        })
+        .on('mousemove', (e: any) => {
+          if (!tooltipRef.value || !svgEl) return
+          const rect = (svgEl as HTMLElement).getBoundingClientRect()
+          tooltipRef.value.style.left = (e.clientX - rect.left + 14) + 'px'
+          tooltipRef.value.style.top = (e.clientY - rect.top - 10) + 'px'
+        })
+        .on('mouseleave', () => { if (tooltipRef.value) tooltipRef.value.style.opacity = '0' })
+    }
+  })
+
+  // ---- SIMULATION D3 (auteurs) ----
+  const auteurNodes: any[] = props.data.auteurs.map(a => {
+    const ecole = ecoleMap.get(a.ecole_principale)
+    const jitter = () => (Math.random() - 0.5) * 80
+    return {
+      id: a.id, type: 'auteur', nom: a.nom, dates: a.dates,
+      bio_courte: a.bio_courte,
+      bio_provisoire: a.bio_courte_provisoire ?? '',
+      ingere: a.ingere,
+      ecole_principale: a.ecole_principale,
+      color: ecole?.color ?? '#888', r: 11,
+      x: W * (ecole?.x_hint ?? 0.5) + jitter(),
+      y: H * (ecole?.y_hint ?? 0.5) + jitter(),
+    }
+  })
+
+  // Liens appartenance auteur -> ecole (vers centroid fixe)
+  const links: any[] = []
+  props.data.auteurs.forEach(a => {
+    links.push({ source: a.id, target: a.ecole_principale, strength: 0.65, isSubcourant: false })
+    a.ecoles.filter(e => e !== a.ecole_principale).forEach(e => {
+      links.push({ source: a.id, target: e, strength: 0.25, isSubcourant: true })
+    })
+  })
+
+  // Nodes fictifs fixes pour les ecoles (cibles des liens appartenance)
+  const ecoleFixedNodes: any[] = props.data.ecoles.map(e => ({
+    id: e.id, type: 'ecole-fixed', ecoleId: e.id,
+    x: W * e.x_hint, y: H * e.y_hint,
+    fx: W * e.x_hint, fy: H * e.y_hint,
+  }))
+
+  // Rayon proportionnel au nombre d'auteurs de l'ecole
+  const ecoleAuteurCounts = new Map<string, number>()
+  props.data.ecoles.forEach(e => ecoleAuteurCounts.set(e.id, 0))
+  props.data.auteurs.forEach(a => ecoleAuteurCounts.set(a.ecole_principale, (ecoleAuteurCounts.get(a.ecole_principale) ?? 0) + 1))
+  const ecoleRadius = (count: number) => Math.max(16, Math.min(36, 13 + count * 1.5))
+
+  const allNodes = [...ecoleFixedNodes, ...auteurNodes]
+
+  if (simulation) simulation.stop()
+  simulation = d3.forceSimulation(allNodes)
+    .force('link', d3.forceLink(links).id((d: any) => d.id).distance(120).strength((d: any) => d.strength ?? 0.5))
+    .force('charge', d3.forceManyBody().strength(-70))
+    .force('center', d3.forceCenter(W / 2, H / 2).strength(0.02))
+    .force('collision', d3.forceCollide().radius((d: any) => d.type === 'ecole-fixed' ? ecoleRadius(ecoleAuteurCounts.get(d.ecoleId) ?? 0) + 4 : 12))
+    .force('forceX', d3.forceX<any>((d: any) => {
+      if (d.type === 'auteur') {
+        const pos = ecolePositions.get(d.ecole_principale)
+        return pos ? pos.tx : W / 2
+      }
+      return W / 2
+    }).strength(0.15))
+    .force('forceY', d3.forceY<any>((d: any) => {
+      if (d.type === 'auteur') {
+        const pos = ecolePositions.get(d.ecole_principale)
+        return pos ? pos.ty : H / 2
+      }
+      return H / 2
+    }).strength(0.15))
+
+  // ---- NOEUDS ECOLES visibles (couche 3.5) ----
+  const gEcoles = g.append('g').attr('class', 'ecoles-nodes')
+  ecoleFixedNodes.forEach(eNode => {
+    const ecole = ecoleMap.get(eNode.ecoleId)
+    if (!ecole) return
+    const count = ecoleAuteurCounts.get(eNode.ecoleId) ?? 0
+    const r = ecoleRadius(count)
+    gEcoles.append('circle')
+      .attr('cx', eNode.fx).attr('cy', eNode.fy).attr('r', r)
+      .attr('fill', ecole.color).attr('fill-opacity', 0.82).attr('stroke', ecole.color).attr('stroke-width', 2)
+      .attr('class', 'ecole-node').style('cursor', 'pointer')
+      .on('mouseenter', (e: any) => {
+        if (!tooltipRef.value) return
+        tooltipRef.value.innerHTML = `<strong>${ecole.label}</strong> <span style="opacity:0.6;font-size:0.7rem;">${count} auteur${count > 1 ? 's' : ''}</span><br><span style="opacity:0.75;font-size:0.72rem;">${ecole.description}</span>`
+        tooltipRef.value.style.opacity = '1'
+      })
+      .on('mousemove', (e: any) => {
+        if (!tooltipRef.value || !svgEl) return
+        const rect = (svgEl as HTMLElement).getBoundingClientRect()
+        tooltipRef.value.style.left = (e.clientX - rect.left + 14) + 'px'
+        tooltipRef.value.style.top = (e.clientY - rect.top - 10) + 'px'
+      })
+      .on('mouseleave', () => { if (tooltipRef.value) tooltipRef.value.style.opacity = '0' })
+      .on('click', (e: any) => { e.stopPropagation(); emit('select-ecole', eNode.ecoleId) })
+
+    // ---- TITRES ECOLES visibles en permanence ----
+    const labelText = ecole.label
+    const words = labelText.split(' ')
+    const fontSize = Math.max(12, r * 0.45)
+    if (words.length > 2 || labelText.length > 12) {
+      const mid = Math.ceil(words.length / 2)
+      const line1 = words.slice(0, mid).join(' ')
+      const line2 = words.slice(mid).join(' ')
+      const textEl = gEcoles.append('text')
+        .attr('x', eNode.fx)
+        .attr('y', eNode.fy)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'middle')
+        .style('pointer-events', 'none')
+        .style('font-weight', '700')
+        .style('font-size', `${fontSize}px`)
+        .style('fill', '#ffffff')
+        .style('text-shadow', '0 1px 3px rgba(0,0,0,0.5)')
+        .style('user-select', 'none')
+      textEl.append('tspan')
+        .attr('x', eNode.fx)
+        .attr('dy', `-${fontSize * 0.6}px`)
+        .text(line1)
+      textEl.append('tspan')
+        .attr('x', eNode.fx)
+        .attr('dy', `${fontSize * 1.2}px`)
+        .text(line2)
+    } else {
+      gEcoles.append('text')
+        .attr('x', eNode.fx)
+        .attr('y', eNode.fy)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'middle')
+        .style('pointer-events', 'none')
+        .style('font-weight', '700')
+        .style('font-size', `${fontSize}px`)
+        .style('fill', '#ffffff')
+        .style('user-select', 'none')
+        .text(labelText)
+    }
+  })
+
+  // ---- LIENS APPARTENANCE (couche 4) ----
+  const gLinks = g.append('g').attr('class', 'links-appartenance')
+  d3LinkSel = gLinks.selectAll('line').data(links).join('line')
+    .attr('stroke', 'rgba(150,150,150,0.28)').attr('stroke-width', 1.2)
+
+  // ---- EDGE LABELS - sous-courants (couche 4b) ----
+  const subcourantLinks = links.filter((l: any) => l.isSubcourant)
+  d3EdgeLabelSel = gLinks.selectAll('text.pensees-edge-label')
+    .data(subcourantLinks)
+    .join('text')
+    .attr('class', 'pensees-edge-label')
+
+  // ---- NODES AUTEURS (couche 5) ----
+  const gAuteurs = g.append('g').attr('class', 'auteurs')
+  d3NodeSel = gAuteurs.selectAll('g').data(auteurNodes).join('g')
+    .style('cursor', (d: any) => d.ingere ? 'pointer' : 'default')
+    .call(d3.drag<any, any>()
+      .on('start', (e: any, d: any) => { if (!e.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y })
+      .on('drag', (e: any, d: any) => { d.fx = e.x; d.fy = e.y })
+      .on('end', (e: any, d: any) => { if (!e.active) simulation.alphaTarget(0); d.fx = null; d.fy = null }))
+    .on('click', (e: any, d: any) => {
+      if (!d.ingere) return
+      e.stopPropagation()
+      emit('select-auteur', d.id)
+    })
+
+  // Phase 8.D : grisage conditionnel auteurs non-ingeres
+  d3NodeSel.append('circle')
+    .attr('r', (d: any) => d.r)
+    .attr('fill', (d: any) => d.ingere ? (d.color + 'cc') : '#bbbbbb')
+    .attr('stroke', (d: any) => d.ingere ? d.color : '#999999')
+    .attr('stroke-width', 1.5)
+    .attr('opacity', (d: any) => d.ingere ? 1 : 0.35)
+
+  // ---- LABELS AUTEURS (couche 6 - drop-shadow blanc) ----
+  d3NodeSel.append('text')
+    .attr('class', 'pensees-auteur-label')
+    .text((d: any) => d.nom.split(' ').pop() ?? d.nom)
+    .attr('text-anchor', 'middle')
+    .attr('dy', (d: any) => -(d.r + 4))
+    .style('pointer-events', 'none')
+    .style('opacity', (d: any) => d.ingere ? 1 : 0.3)
+    .style('fill', (d: any) => d.ingere ? '#1a1a1a' : '#777777')
+
+  d3NodeSel
+    .on('mouseenter', (e: any, d: any) => {
+      if (!tooltipRef.value) return
+      let tooltipHtml = ''
+      if (d.ingere) {
+        const rawBio = d.bio_courte || ''
+        const bio = rawBio.length > 90 ? rawBio.slice(0, 87) + '...' : rawBio
+        tooltipHtml = `<strong>${d.nom}</strong> <span style="opacity:0.6;font-size:0.7rem;">${d.dates}</span><br><span style="opacity:0.75;font-size:0.72rem;">${bio || 'Dans le RAG ATIS.'}</span>`
+      } else {
+        tooltipHtml = `<strong>${d.nom}</strong> <span style="opacity:0.6;font-size:0.7rem;">${d.dates}</span><br><span style="opacity:0.65;font-size:0.72rem;font-style:italic;">Présent dans Bonpote, pas encore ingéré dans le RAG ATIS.</span>`
+      }
+      tooltipRef.value.innerHTML = tooltipHtml
+      tooltipRef.value.style.opacity = '1'
+    })
+    .on('mousemove', (e: any) => {
+      if (!tooltipRef.value || !svgEl) return
+      const rect = (svgEl as HTMLElement).getBoundingClientRect()
+      tooltipRef.value.style.left = (e.clientX - rect.left + 14) + 'px'
+      tooltipRef.value.style.top = (e.clientY - rect.top - 10) + 'px'
+    })
+    .on('mouseleave', () => { if (tooltipRef.value) tooltipRef.value.style.opacity = '0' })
+
+  simulation.on('tick', () => {
+    d3LinkSel
+      .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)
+
+    d3EdgeLabelSel
+      .attr('x', (d: any) => (d.source.x + d.target.x) / 2)
+      .attr('y', (d: any) => (d.source.y + d.target.y) / 2)
+      .text((d: any) => {
+        const targetId = typeof d.target === 'object' ? d.target.id : d.target
+        return targetId
+      })
+
+    d3NodeSel.attr('transform', (d: any) => `translate(${d.x},${d.y})`)
+  })
+}
+
+watch(() => props.active, (val) => {
+  if (val && import.meta.client && props.data)
+    requestAnimationFrame(() => requestAnimationFrame(() => initGraph()))
+})
+watch(() => props.data, (val) => {
+  if (val && props.active && import.meta.client)
+    requestAnimationFrame(() => requestAnimationFrame(() => initGraph()))
+})
+onMounted(async () => {
+  if (import.meta.client && props.data && props.active) {
+    await nextTick()
+    initGraph()
+  }
+})
+onUnmounted(() => { if (simulation) simulation.stop() })
+
+function triggerResize() {
+  if (simulation) {
+    simulation.alpha(0.3).restart()
+  } else if (import.meta.client && props.data && props.active) {
+    initGraph()
+  }
+}
+defineExpose({ triggerResize })
+</script>
+
+<style>
+.pensees-auteur-label {
+  fill: #1a1a1a;
+  font-weight: 600;
+  font-size: 10px;
+  filter: drop-shadow(0 0 2.5px rgba(255,255,255,0.95));
+  user-select: none;
+}
+
+.pensees-edge-label {
+  fill: #555;
+  font-size: 8.5px;
+  font-style: italic;
+  opacity: 0.7;
+  text-anchor: middle;
+  dominant-baseline: middle;
+  user-select: none;
+  pointer-events: none;
+}
+
+.ecole-node {
+  transition: opacity 0.15s, r 0.15s;
+}
+.ecole-node:hover {
+  opacity: 0.75;
+}
+</style>
--- a/components/ChatbotPlaceholder.vue
+++ b/components/ChatbotPlaceholder.vue
@@ -52,18 +52,9 @@
      <div class="chatbot-body-inner" ref="messagesContainer">
        <!-- Onboarding -->
        <div v-if="messages.length === 0" class="onboarding-bubble">
-          <p>Ce chatbot fonctionne sur un serveur européen souverain
-(Mistral FR, zéro rétention), conçu sobre en énergie.</p>
-          <p>Pour m'aider à te répondre efficacement,
-formule ta requête ainsi :</p>
-          <ul>
-            <li>• Besoin : [ce que tu cherches]</li>
-            <li>• Thématique : [juridique / technique / économique / ...]</li>
-            <li>• Lieu : [région ou ville]</li>
-          </ul>
-          <p class="example">Exemple : "Je suis salarié d'agence, litige avec mon
-employeur, besoin conseil juridique droit du travail,
-Île-de-France."</p>
+          <p>Explore les 120 structures de la carte par la conversation. Je peux t'aider à trouver des collectifs, agences ou réseaux selon ta situation, ta pratique ou tes inspirations du moment.</p>
+          <p class="example">Exemple : "Je cherche des acteurs de la rénovation de maisons individuelles en France, plutôt en milieu rural, avec des approches biosourcées ou low-tech."</p>
+          <p style="margin-top: 8px; font-size: 0.72rem; opacity: 0.6;">Propulsé par Mistral FR - serveur européen souverain, zéro rétention.</p>
        </div>

        <!-- Messages -->
@@ -72,7 +63,7 @@ employeur, besoin conseil juridique droit du travail,
          <div v-else class="assistant-bubble">
            <p>{{ msg.content }}</p>
            <div v-if="msg.fiches && msg.fiches.length > 0" class="fiches-list">
-              <p class="fiches-title">Fiches recommandées :</p>
+              <p class="fiches-title">Fiches recommandees :</p>
              <a
                v-for="fiche in msg.fiches"
                :key="fiche.id"
@@ -83,6 +74,21 @@ employeur, besoin conseil juridique droit du travail,
                <span v-if="fiche.explication" class="fiche-expl">{{ fiche.explication }}</span>
              </a>
            </div>
+            <div v-if="msg.suggestedHashtags && msg.suggestedHashtags.length" style="margin-top: 8px;">
+              <p style="font-size: 0.7rem; color: var(--nav-text-muted); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;">Filtrer par :</p>
+              <div style="display: flex; flex-wrap: wrap; gap: 4px;">
+                <span
+                  v-for="tag in msg.suggestedHashtags"
+                  :key="tag"
+                  style="
+                    padding: 2px 8px; border-radius: 9999px; font-size: 0.7rem; cursor: pointer;
+                    background: var(--nav-bg-alt); color: var(--nav-text); border: 1px solid var(--nav-bg-alt);
+                    transition: all 0.15s;
+                  "
+                  @click="emit('applyHashtag', tag)"
+                >{{ tag }}</span>
+              </div>
+            </div>
          </div>
        </template>

@@ -132,10 +138,12 @@ interface ChatMessage {
  role: 'user' | 'assistant'
  content: string
  fiches?: FicheReco[]
+  suggestedHashtags?: string[]
 }

 const emit = defineEmits<{
  'highlightOrgs': [ids: (number | string)[]]
+  'applyHashtag': [tag: string]
 }>()

 const isExpanded = ref(false)
@@ -145,6 +153,37 @@ const loading = ref(false)
 const errorMsg = ref('')
 const messagesContainer = ref<HTMLElement | null>(null)

+// Detection hashtags depuis la question posee
+const HASHTAG_KEYWORDS: Record<string, string[]> = {
+  '#reemploi-structurel': ['reemploi', 'materiaux recuperes', 'deconstruction', 'reemploi structurel'],
+  '#reemploi-second-oeuvre': ['revetement', 'second oeuvre', 'reemploi'],
+  '#biosource-geosource': ['biosource', 'geosource', 'paille', 'terre', 'chanvre', 'lin', 'biosource'],
+  '#low-tech-experimentation': ['low-tech', 'low tech', 'technique simple', 'autonomie', 'lowtech'],
+  '#chantier-ecole': ['formation', 'chantier ecole', 'chantier-ecole', 'apprendre', 'auto-construction', 'autoconstruction'],
+  '#sobriete-energetique': ['sobriete', 'energie', 'renovation energetique', 'isolation', 'chauffage', 'economie energie'],
+  '#mal-logement-precarite': ['mal-logement', 'precarite', 'sans-abri', 'logement social', 'squat', 'mal logement'],
+  '#tiers-lieux-friches': ['friche', 'tiers-lieu', 'tiers lieu', 'espace intermediaire', 'temporaire', 'reconversion'],
+  '#accompagnement-cooperatif': ['cooperative', 'accompagnement', 'cooperation', 'collectif', 'mutualisation'],
+  '#transition-energetique-territoriale': ['territoire', 'transition', 'energetique', 'local', 'region', 'transition energetique'],
+  '#communs-fonciers': ['communs', 'foncier', 'anti-speculatif', 'community land trust', 'commun foncier'],
+  '#hack-juridique': ['juridique', 'montage', 'structure legale', 'sci', 'cooperative', 'statut'],
+  '#retrofit-strates': ['retrofit', 'renovation lourde', 'sur-isolation', 'rehaussement'],
+  '#phytoconstruction': ['plantes', 'vegetal', 'arbre', 'construction vivante', 'phyto'],
+}
+
+function detectHashtagsFromQuery(query: string): string[] {
+  const q = query.toLowerCase()
+    .normalize('NFD')
+    .replace(/[̀-ͯ]/g, '')
+  const detected: string[] = []
+  for (const [hashtag, keywords] of Object.entries(HASHTAG_KEYWORDS)) {
+    if (keywords.some(kw => q.includes(kw))) {
+      detected.push(hashtag)
+    }
+  }
+  return detected.slice(0, 3)
+}
+
 function toggleExpand() {
  isExpanded.value = !isExpanded.value
 }
@@ -170,10 +209,12 @@ async function sendMessage() {
      body: { question },
    })

+    const suggestedHashtags = detectHashtagsFromQuery(question)
    const assistantMsg: ChatMessage = {
      role: 'assistant',
      content: res.reponse_texte,
      fiches: res.fiches_recommandees || [],
+      suggestedHashtags: suggestedHashtags.length ? suggestedHashtags : undefined,
    }
    messages.value.push(assistantMsg)

--- a/components/ChatbotReseaux.vue
+++ b/components/ChatbotReseaux.vue
@@ -0,0 +1,208 @@
+<template>
+  <Teleport to="body">
+    <transition name="backdrop">
+      <div
+        v-if="modelValue"
+        class="fixed inset-0 z-[1010]"
+        style="background: rgba(26,34,56,0.5);"
+        @click="emit('update:modelValue', false)"
+        aria-hidden="true"
+      />
+    </transition>
+
+    <transition name="sheet">
+      <div
+        v-if="modelValue"
+        class="fixed inset-x-0 bottom-0 z-[1011] flex flex-col"
+        style="background: var(--nav-surface); height: 100dvh; max-height: 100dvh; box-shadow: 0 -4px 32px rgba(26,34,56,0.18);"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Assistant Réseaux AEP"
+      >
+        <div class="flex justify-center pt-3 pb-1 shrink-0">
+          <div class="rounded-full" style="width: 36px; height: 4px; background: var(--nav-bg-alt);" />
+        </div>
+
+        <div class="flex items-center justify-between px-4 py-3 shrink-0 border-b" style="border-color: var(--nav-bg-alt);">
+          <button
+            @click="emit('update:modelValue', false)"
+            class="flex items-center gap-2 text-sm font-medium transition-opacity hover:opacity-70"
+            style="color: var(--nav-text-muted);"
+            aria-label="Retour"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="15 18 9 12 15 6"/>
+            </svg>
+            Retour
+          </button>
+          <div class="flex items-center gap-2">
+            <div class="w-7 h-7 rounded-full flex items-center justify-center shrink-0" style="background: var(--nav-primary);">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--nav-text-on-primary);">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+              </svg>
+            </div>
+            <span class="font-bold text-sm" style="color: var(--nav-text);">Réseaux AEP</span>
+          </div>
+        </div>
+
+        <div ref="messagesContainer" class="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-3">
+          <div v-if="messages.length === 0" class="onboarding-bubble">
+            <p>Je connais les <strong>120 réseaux, collectifs et agences</strong> cartographiés dans AEP — ceux qui portent une vision écologique et politique de l'architecture.</p>
+            <p>Décris ta situation : tu cherches un collectif, une agence inspirante, un partenaire sur un projet en Occitanie, en transition énergétique ?</p>
+          </div>
+
+          <template v-for="(msg, i) in messages" :key="i">
+            <div v-if="msg.role === 'user'" class="user-bubble">{{ msg.content }}</div>
+            <div v-else class="assistant-bubble">
+              <div v-html="renderMd(msg.content)" />
+              <div v-if="msg.fiches && msg.fiches.length > 0" class="fiches-list" style="margin-top:12px;">
+                <p class="fiches-title">Structures recommandées :</p>
+                <a
+                  v-for="fiche in msg.fiches"
+                  :key="fiche.id"
+                  :href="`/agences#${fiche.id}`"
+                  class="fiche-card"
+                >
+                  <span class="fiche-nom">{{ fiche.nom }}</span>
+                  <span v-if="fiche.explication" class="fiche-expl">{{ fiche.explication }}</span>
+                </a>
+              </div>
+            </div>
+          </template>
+
+          <div v-if="loading" class="assistant-bubble loading-bubble">
+            <span class="dot" /><span class="dot" /><span class="dot" />
+          </div>
+          <div v-if="errorMsg" class="error-bubble">{{ errorMsg }}</div>
+        </div>
+
+        <div class="shrink-0 px-4 pt-3 border-t" style="border-color: var(--nav-bg-alt); padding-bottom: max(1rem, env(safe-area-inset-bottom));">
+          <div class="flex items-center gap-2">
+            <input
+              v-model="inputText"
+              type="text"
+              :disabled="loading"
+              placeholder="Décris ta situation…"
+              class="flex-1 px-4 py-3 rounded-xl text-sm border"
+              style="border-color: var(--nav-bg-alt); background: var(--nav-bg); color: var(--nav-text); font-family: var(--nav-font); font-size: 16px;"
+              @keydown.enter.prevent="sendMessage"
+            />
+            <button
+              :disabled="loading || !inputText.trim()"
+              class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 transition-opacity"
+              style="background: var(--nav-primary);"
+              :style="{ opacity: (loading || !inputText.trim()) ? 0.4 : 1 }"
+              aria-label="Envoyer"
+              @click="sendMessage"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--nav-text-on-primary);">
+                <line x1="22" y1="2" x2="11" y2="13"/>
+                <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useMarkdown } from '~/composables/useMarkdown'
+const { render: renderMd } = useMarkdown()
+
+interface FicheReco { id: number | string; nom: string; explication?: string }
+interface ChatMessage { role: 'user' | 'assistant'; content: string; fiches?: FicheReco[] }
+
+const props = defineProps<{ modelValue: boolean }>()
+const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
+
+const messages = ref<ChatMessage[]>([])
+const inputText = ref('')
+const loading = ref(false)
+const errorMsg = ref('')
+const messagesContainer = ref<HTMLElement | null>(null)
+
+watch(() => props.modelValue, (open) => {
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = open ? 'hidden' : ''
+  document.documentElement.style.overflow = open ? 'hidden' : ''
+})
+
+onUnmounted(() => {
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = ''
+    document.documentElement.style.overflow = ''
+  }
+})
+
+async function sendMessage() {
+  const question = inputText.value.trim()
+  if (!question || loading.value) return
+  inputText.value = ''
+  errorMsg.value = ''
+  messages.value.push({ role: 'user', content: question })
+  loading.value = true
+  await nextTick()
+  if (messagesContainer.value) messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+
+  try {
+    const res = await $fetch<{ reponse_texte: string; fiches_recommandees: FicheReco[] }>(
+      '/api/chatbot-reseaux',
+      { method: 'POST', body: { question } }
+    )
+    messages.value.push({ role: 'assistant', content: res.reponse_texte, fiches: res.fiches_recommandees || [] })
+  } catch (e: any) {
+    const s = e?.statusCode ?? e?.status
+    errorMsg.value = s === 429
+      ? 'Limite de 20 questions par jour atteinte.'
+      : 'Une erreur est survenue. Réessaie dans quelques instants.'
+  } finally {
+    loading.value = false
+    await nextTick()
+    if (messagesContainer.value) messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+  }
+}
+</script>
+
+<style scoped>
+.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
+.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
+.sheet-enter-active, .sheet-leave-active { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
+.sheet-enter-from, .sheet-leave-to { transform: translateY(100%); }
+
+.onboarding-bubble {
+  background: var(--nav-bg); border: 1px solid var(--nav-bg-alt);
+  border-radius: 12px; padding: 16px;
+  font-size: 0.85rem; line-height: 1.65; color: var(--nav-text-muted);
+}
+.onboarding-bubble p { margin-bottom: 10px; }
+.onboarding-bubble strong { font-weight: 700; color: var(--nav-text); }
+
+.user-bubble {
+  align-self: flex-end; max-width: 80%;
+  background: var(--nav-primary); color: var(--nav-text-on-primary);
+  border-radius: 16px 16px 4px 16px; padding: 10px 14px;
+  font-size: 0.875rem; line-height: 1.5;
+}
+.assistant-bubble {
+  align-self: flex-start; max-width: 90%;
+  background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);
+  border-radius: 16px 16px 16px 4px; padding: 12px 14px;
+  font-size: 0.875rem; line-height: 1.6; color: var(--nav-text);
+}
+.loading-bubble { display: flex; gap: 5px; align-items: center; }
+.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nav-text-muted); animation: blink 1.2s infinite; }
+.dot:nth-child(2) { animation-delay: 0.2s; }
+.dot:nth-child(3) { animation-delay: 0.4s; }
+@keyframes blink { 0%,80%,100% { opacity: 0.3; } 40% { opacity: 1; } }
+
+.error-bubble { align-self: flex-start; max-width: 90%; color: #a85d3e; font-size: 0.8rem; padding: 8px 12px; border-radius: 8px; background: rgba(168,93,62,0.08); }
+
+.fiches-list { display: flex; flex-direction: column; gap: 6px; }
+.fiches-title { font-size: 0.75rem; font-weight: 600; color: var(--nav-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
+.fiche-card { display: block; background: var(--nav-bg); border: 1px solid var(--nav-bg-alt); border-radius: 8px; padding: 8px 12px; text-decoration: none; transition: background 0.15s; }
+.fiche-card:hover { background: var(--nav-bg-alt); }
+.fiche-nom { display: block; font-size: 0.875rem; font-weight: 600; color: var(--nav-text); }
+.fiche-expl { display: block; font-size: 0.8rem; color: var(--nav-text-muted); margin-top: 2px; }
+</style>
--- a/components/ChatbotSheet.vue
+++ b/components/ChatbotSheet.vue
@@ -69,18 +69,14 @@
        <div ref="messagesContainer" class="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-3">
          <!-- Message onboarding (avant la première question) -->
          <div v-if="messages.length === 0" class="onboarding-bubble">
-            <p>Ce chatbot fonctionne sur un serveur européen souverain
-(Mistral FR, zéro rétention), conçu sobre en énergie.</p>
-            <p>Pour m'aider à te répondre efficacement,
-formule ta requête ainsi :</p>
+            <p>Ce chatbot fonctionne sur un serveur européen souverain (Mistral FR, zéro rétention), conçu sobre en énergie.</p>
+            <p>Pour m'aider à te répondre efficacement, formule ta requête ainsi :</p>
            <ul>
              <li>• Besoin : [ce que tu cherches]</li>
              <li>• Thématique : [juridique / technique / économique / ...]</li>
              <li>• Lieu : [région ou ville]</li>
            </ul>
-            <p class="example">Exemple : "Je suis salarié d'agence, litige avec mon
-employeur, besoin conseil juridique droit du travail,
-Île-de-France."</p>
+            <p class="example">Exemple : "Je suis salarié d'agence, litige avec mon employeur, besoin conseil juridique droit du travail, Île-de-France."</p>
          </div>

          <!-- Messages -->
@@ -92,7 +88,7 @@ employeur, besoin conseil juridique droit du travail,

            <!-- Message assistant -->
            <div v-else class="assistant-bubble">
-              <p>{{ msg.content }}</p>
+              <div class="md-content" v-html="renderMd(msg.content)" />

              <!-- Fiches recommandées -->
              <div v-if="msg.fiches && msg.fiches.length > 0" class="fiches-list">
@@ -164,6 +160,9 @@ employeur, besoin conseil juridique droit du travail,
 </template>

 <script setup lang="ts">
+import { useMarkdown } from '~/composables/useMarkdown'
+const { render: renderMd } = useMarkdown()
+
 interface FicheReco {
  id: number | string
  nom: string
@@ -320,7 +319,17 @@ function scrollToBottom() {
  line-height: 1.6;
  color: var(--nav-text);
 }
-.assistant-bubble p { margin: 0; }
+.assistant-bubble > p { margin: 0; }
+
+/* Markdown rendu via v-html — :deep() perce le scoped */
+:deep(.md-content) { font-size: inherit; line-height: 1.6; }
+:deep(.md-content p) { margin: 0 0 0.4em; }
+:deep(.md-content p:last-child) { margin-bottom: 0; }
+:deep(.md-content strong) { font-weight: 700; }
+:deep(.md-content em) { font-style: italic; }
+:deep(.md-content ul) { margin: 0.3em 0 0.3em 1.1em; list-style: disc; padding: 0; }
+:deep(.md-content li) { margin-bottom: 0.15em; }
+:deep(.md-content a) { text-decoration: underline; opacity: 0.8; }

 /* Fiches recommandées */
 .fiches-list {
--- a/components/FicheFamilleModal.vue
+++ b/components/FicheFamilleModal.vue
@@ -0,0 +1,284 @@
+<template>
+  <Teleport to="body">
+    <!-- Backdrop -->
+    <Transition name="backdrop">
+      <div
+        v-if="modelValue && familleId != null"
+        class="fixed inset-0 z-[1400]"
+        style="background: rgba(26,34,56,0.55);"
+        @click="close"
+        aria-hidden="true"
+      />
+    </Transition>
+
+    <!-- Modal -->
+    <Transition name="modal">
+      <div
+        v-if="modelValue && familleId != null"
+        class="fixed z-[1401] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
+        style="
+          width: min(720px, 94vw);
+          max-height: 88vh;
+          background: var(--nav-bg);
+          border-radius: 16px;
+          box-shadow: 0 16px 64px rgba(26,34,56,0.28);
+          overflow: hidden;
+        "
+        role="dialog"
+        aria-modal="true"
+        :aria-label="familleLabel"
+        @keydown.esc="close"
+      >
+        <!-- Header : background couleur famille -->
+        <div
+          class="flex items-center justify-between px-5 py-4 shrink-0"
+          :style="`background: ${familleColor}; color: white;`"
+        >
+          <div class="flex items-center gap-3">
+            <div
+              class="w-3 h-3 rounded-full shrink-0"
+              style="background: white;"
+            />
+            <h2 class="text-lg font-bold" style="color: white;">{{ familleLabel }}</h2>
+          </div>
+          <button
+            @click="close"
+            class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors"
+            style="background: rgba(255,255,255,0.18); color: white;"
+            aria-label="Fermer"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Body scrollable -->
+        <div class="flex-1 overflow-y-auto px-5 py-5">
+          <!-- Description longue editoriale -->
+          <p
+            class="text-sm leading-relaxed mb-5"
+            style="color: var(--nav-text); white-space: pre-wrap;"
+          >{{ familleDescription }}</p>
+
+          <!-- Separateur -->
+          <div style="height: 1px; background: var(--nav-bg-alt); margin-bottom: 16px;" />
+
+          <!-- Mode fusion : Principal+Secondaire melanges (peu de secondaires) -->
+          <template v-if="!showSplit">
+            <h3
+              class="text-xs font-bold uppercase tracking-wide mb-3"
+              style="color: var(--nav-text-muted);"
+            >{{ allStructures.length }} structure{{ allStructures.length > 1 ? 's' : '' }}</h3>
+            <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px;">
+              <li
+                v-for="s in allStructures"
+                :key="s.id"
+                @click="selectStructure(s.id)"
+                class="structure-row"
+                style="
+                  display: flex; align-items: center; gap: 10px;
+                  padding: 8px 10px; border-radius: 6px;
+                  cursor: pointer; transition: background 0.1s;
+                "
+              >
+                <span
+                  style="width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;"
+                  :style="`background: ${FAMILLE_COLORS[s.famille_principale] ?? '#888'};`"
+                  :title="`Famille principale : ${FAMILLE_LABELS[s.famille_principale] ?? ''}`"
+                />
+                <span class="text-sm font-medium" style="color: var(--nav-text);">{{ s.nom }}</span>
+                <span class="text-xs" style="color: var(--nav-text-muted);">{{ s.ville }}</span>
+              </li>
+            </ul>
+          </template>
+
+          <!-- Mode split : Principal / Secondaire separes -->
+          <template v-else>
+            <div v-if="principalStructures.length" class="mb-5">
+              <h3
+                class="text-xs font-bold uppercase tracking-wide mb-3"
+                style="color: var(--nav-text-muted);"
+              >Principal ({{ principalStructures.length }})</h3>
+              <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px;">
+                <li
+                  v-for="s in principalStructures"
+                  :key="s.id"
+                  @click="selectStructure(s.id)"
+                  class="structure-row"
+                  style="
+                    display: flex; align-items: center; gap: 10px;
+                    padding: 8px 10px; border-radius: 6px;
+                    cursor: pointer; transition: background 0.1s;
+                  "
+                >
+                  <span
+                    style="width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;"
+                    :style="`background: ${FAMILLE_COLORS[s.famille_principale] ?? '#888'};`"
+                  />
+                  <span class="text-sm font-medium" style="color: var(--nav-text);">{{ s.nom }}</span>
+                  <span class="text-xs" style="color: var(--nav-text-muted);">{{ s.ville }}</span>
+                </li>
+              </ul>
+            </div>
+
+            <div v-if="secondaireStructures.length">
+              <h3
+                class="text-xs font-bold uppercase tracking-wide mb-3"
+                style="color: var(--nav-text-muted);"
+              >Secondaire ({{ secondaireStructures.length }})</h3>
+              <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px;">
+                <li
+                  v-for="s in secondaireStructures"
+                  :key="s.id"
+                  @click="selectStructure(s.id)"
+                  class="structure-row"
+                  style="
+                    display: flex; align-items: center; gap: 10px;
+                    padding: 8px 10px; border-radius: 6px;
+                    cursor: pointer; transition: background 0.1s;
+                  "
+                >
+                  <span
+                    style="width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;"
+                    :style="`background: ${FAMILLE_COLORS[s.famille_principale] ?? '#888'};`"
+                    :title="`Famille principale : ${FAMILLE_LABELS[s.famille_principale] ?? ''}`"
+                  />
+                  <span class="text-sm font-medium" style="color: var(--nav-text);">{{ s.nom }}</span>
+                  <span class="text-xs" style="color: var(--nav-text-muted);">{{ s.ville }}</span>
+                </li>
+              </ul>
+            </div>
+          </template>
+        </div>
+
+        <!-- Footer -->
+        <div
+          class="px-5 py-3 shrink-0 text-xs"
+          style="border-top: 1px solid var(--nav-bg-alt); color: var(--nav-text-muted); background: var(--nav-surface);"
+        >
+          Click sur une structure pour ouvrir sa fiche
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { ReseauxBifurcationData, StructureV2 } from '~/types/structure-v2'
+
+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 & filieres',
+  2: 'Frugalite & low-tech',
+  3: 'Architecture sociale',
+  4: 'Collectifs & AMO',
+  5: 'Urbanisme de transition',
+  6: 'Recherche-action',
+}
+
+const FAMILLE_DESCRIPTIONS: Record<number, string> = {
+  1: "Structures dont le geste premier est de travailler avec la matiere existante : deconstruction selective, plateformes de redistribution, filieres biosourcees et geosourcees.",
+  2: "Pratiques qui partent du principe qu'on peut faire mieux avec moins. Renovation profonde, materiaux locaux, sobriete choisie.",
+  3: "Structures dont le terrain premier est le mal-logement, la precarite, l'hospitalite. Architecture comme reponse a l'urgence sociale.",
+  4: "Structures qui accompagnent les projets collectifs : cooperatives d'habitat, ecovillages, accompagnement vers l'autogestion ou la renovation.",
+  5: "Demarches a l'echelle du territoire : villes en transition, PLU alternatifs, coalitions territoriales.",
+  6: "Recherche-action et production de contre-savoirs (Forensic Architecture, Rural Studio, PEROU, Centrala). Badge transversal aux familles.",
+}
+
+const props = defineProps<{
+  modelValue: boolean
+  familleId: number | null
+  data: ReseauxBifurcationData | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'select-structure': [id: string]
+}>()
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+function selectStructure(id: string) {
+  // Fermer d'abord pour eviter superposition de modales
+  emit('update:modelValue', false)
+  emit('select-structure', id)
+}
+
+// Fermeture Esc globale
+onMounted(() => {
+  const handler = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && props.modelValue) close()
+  }
+  window.addEventListener('keydown', handler)
+  onUnmounted(() => window.removeEventListener('keydown', handler))
+})
+
+const familleColor = computed(() =>
+  FAMILLE_COLORS[props.familleId ?? 0] ?? '#888'
+)
+
+const familleLabel = computed(() =>
+  FAMILLE_LABELS[props.familleId ?? 0] ?? ''
+)
+
+const familleDescription = computed(() =>
+  FAMILLE_DESCRIPTIONS[props.familleId ?? 0] ?? ''
+)
+
+const principalStructures = computed<StructureV2[]>(() => {
+  if (!props.data || props.familleId == null) return []
+  return props.data.structures
+    .filter(s => s.famille_principale === props.familleId)
+    .sort((a, b) => a.nom.localeCompare(b.nom, 'fr'))
+})
+
+const secondaireStructures = computed<StructureV2[]>(() => {
+  if (!props.data || props.familleId == null) return []
+  return props.data.structures
+    .filter(s =>
+      s.famille_principale !== props.familleId
+      && (s.familles_secondaires ?? []).includes(props.familleId as number)
+    )
+    .sort((a, b) => a.nom.localeCompare(b.nom, 'fr'))
+})
+
+const allStructures = computed<StructureV2[]>(() => {
+  return [...principalStructures.value, ...secondaireStructures.value]
+})
+
+// Heuristique : si > 3 secondaires, separer en sections distinctes
+const showSplit = computed(() => secondaireStructures.value.length > 3)
+</script>
+
+<style scoped>
+.structure-row:hover {
+  background: var(--nav-bg-alt);
+}
+
+.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
+.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
+
+.modal-enter-active, .modal-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.modal-enter-from, .modal-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -52%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .backdrop-enter-active, .backdrop-leave-active { transition: none; }
+  .modal-enter-active, .modal-leave-active { transition: none; }
+}
+</style>
--- a/components/FicheModal.vue
+++ b/components/FicheModal.vue
@@ -15,10 +15,9 @@
    <Transition name="modal">
      <div
        v-if="modelValue && orgId != null"
-        class="fixed z-[1501] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
+        class="fiche-modal fixed z-[1501] left-1/2 -translate-x-1/2 flex flex-col"
        style="
          width: min(768px, 92vw);
-          max-height: 90vh;
          background: var(--nav-bg);
          border-radius: 16px;
          box-shadow: 0 16px 64px rgba(26,34,56,0.28);
@@ -144,6 +143,21 @@ function onCommentSubmitted() {
 </script>

 <style scoped>
+/* Modal positionnement : centré desktop, descendu sous le header sur mobile */
+.fiche-modal {
+  top: 50%;
+  transform: translate(-50%, -50%);
+  max-height: 90vh;
+}
+
+@media (max-width: 1023px) {
+  .fiche-modal {
+    top: 76px;
+    transform: translateX(-50%);
+    max-height: calc(100dvh - 92px);
+  }
+}
+
 /* Backdrop */
 .backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
 .backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
@@ -156,6 +170,11 @@ function onCommentSubmitted() {
  opacity: 0;
  transform: translate(-50%, -52%);
 }
+@media (max-width: 1023px) {
+  .modal-enter-from, .modal-leave-to {
+    transform: translate(-50%, calc(-2% + 76px));
+  }
+}

@media (prefers-reduced-motion: reduce) {
  .backdrop-enter-active, .backdrop-leave-active { transition: none; }
--- a/components/FicheModalV2.vue
+++ b/components/FicheModalV2.vue
@@ -0,0 +1,360 @@
+<template>
+  <Teleport to="body">
+    <!-- Backdrop -->
+    <Transition name="backdrop">
+      <div
+        v-if="modelValue && structureId != null"
+        class="fixed inset-0 z-[1500]"
+        style="background: rgba(26,34,56,0.55);"
+        @click="close"
+        aria-hidden="true"
+      />
+    </Transition>
+
+    <!-- Modal -->
+    <Transition name="modal">
+      <div
+        v-if="modelValue && structureId != null && structure"
+        class="fiche-modal-v2 fixed z-[1501] left-1/2 -translate-x-1/2 flex flex-col"
+        style="
+          width: min(780px, 94vw);
+          background: var(--nav-bg);
+          border-radius: 16px;
+          box-shadow: 0 16px 64px rgba(26,34,56,0.28);
+          overflow: hidden;
+        "
+        role="dialog"
+        aria-modal="true"
+        :aria-label="structure?.nom ?? 'Fiche structure'"
+        @keydown.esc="close"
+      >
+        <!-- Header modal -->
+        <div
+          class="flex items-center justify-between px-5 py-3 shrink-0"
+          :style="`border-bottom: 3px solid ${familleColor}; background: var(--nav-surface);`"
+        >
+          <div class="flex items-center gap-3">
+            <!-- Pastille famille -->
+            <div
+              class="w-3 h-3 rounded-full shrink-0"
+              :style="`background: ${familleColor};`"
+            />
+            <span class="text-sm font-semibold" style="color: var(--nav-text-muted);">
+              {{ familleLabel }}
+            </span>
+            <!-- Badges -->
+            <div class="flex gap-1.5">
+              <span
+                v-if="structure.badges.centre_ressources"
+                class="px-2 py-0.5 rounded-full text-xs font-medium"
+                style="background: #2d8a6b22; color: #2d8a6b;"
+              >Centre ressources</span>
+              <span
+                v-if="structure.badges.mouvement_manifeste"
+                class="px-2 py-0.5 rounded-full text-xs font-medium"
+                style="background: #c44a2f22; color: #c44a2f;"
+              >Manifeste</span>
+              <span
+                v-if="structure.badges.contre_pouvoir_spatial"
+                class="px-2 py-0.5 rounded-full text-xs font-medium"
+                style="background: #1a3a6b22; color: #1a3a6b;"
+              >Contre-pouvoir</span>
+              <span
+                v-if="structure.badges.f6_recherche_politique"
+                class="px-2 py-0.5 rounded-full text-xs font-medium"
+                style="background: #6b3fa022; color: #6b3fa0;"
+              >Recherche pol.</span>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <a
+              v-if="structure.url"
+              :href="structure.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-opacity hover:opacity-70"
+              style="background: var(--nav-bg-alt); color: var(--nav-text);"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+                <polyline points="15 3 21 3 21 9"/>
+                <line x1="10" y1="14" x2="21" y2="3"/>
+              </svg>
+              Site web
+            </a>
+            <button
+              @click="close"
+              class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors"
+              style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
+              aria-label="Fermer"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Contenu scrollable -->
+        <div class="flex-1 overflow-y-auto px-5 py-5">
+          <!-- Nom + meta -->
+          <div class="mb-4">
+            <h2 class="text-xl font-bold mb-1" style="color: var(--nav-text);">{{ structure.nom }}</h2>
+            <div class="flex flex-wrap gap-2 text-sm" style="color: var(--nav-text-muted);">
+              <span>{{ structure.type_principal }}</span>
+              <span>·</span>
+              <span>{{ structure.ville }}, {{ structure.pays }}</span>
+            </div>
+          </div>
+
+          <!-- Hashtags -->
+          <div v-if="structure.hashtags.length" class="flex flex-wrap gap-1.5 mb-4">
+            <span
+              v-for="tag in structure.hashtags"
+              :key="tag"
+              class="px-2 py-0.5 rounded-full text-xs"
+              style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
+            >{{ tag }}</span>
+          </div>
+
+          <!-- Description courte -->
+          <p class="text-sm leading-relaxed mb-4" style="color: var(--nav-text);">{{ structure.description_courte }}</p>
+
+          <!-- Description longue (expandable) -->
+          <div v-if="structure.description_longue" class="mb-4">
+            <div
+              class="text-sm leading-relaxed"
+              style="color: var(--nav-text); white-space: pre-wrap;"
+              :style="showFullDesc ? '' : 'max-height: 120px; overflow: hidden;'"
+            >{{ structure.description_longue }}</div>
+            <button
+              @click="showFullDesc = !showFullDesc"
+              class="mt-2 text-xs underline"
+              style="color: var(--nav-text-muted);"
+            >{{ showFullDesc ? 'Réduire' : 'Lire la suite…' }}</button>
+          </div>
+
+          <!-- Pensées rattachées -->
+          <div v-if="structure.pensees && structure.pensees.length" class="mb-4">
+            <h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Pensées rattachées</h3>
+            <div class="flex flex-wrap gap-1.5">
+              <span
+                v-for="pensee in structure.pensees"
+                :key="pensee.id"
+                class="px-2 py-0.5 rounded text-xs"
+                :style="pensee.confiance === 'ia_suggested'
+                  ? 'background: var(--nav-bg-alt); color: var(--nav-text-muted); border: 1px dashed var(--nav-bg-alt);'
+                  : 'background: var(--nav-bg-alt); color: var(--nav-text);'"
+                :title="pensee.confiance === 'ia_suggested' ? 'IA suggéré' : ''"
+              >
+                {{ pensee.label }}<span v-if="pensee.confiance === 'ia_suggested'" class="ml-1 opacity-60">~</span>
+              </span>
+            </div>
+          </div>
+
+          <!-- Projets emblématiques -->
+          <div v-if="projetsStructure.length" class="mb-4">
+            <h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Projets emblématiques</h3>
+            <div class="space-y-2">
+              <div
+                v-for="projet in projetsStructure.slice(0, 5)"
+                :key="projet.id"
+                class="rounded-lg p-3"
+                style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);"
+              >
+                <div class="flex items-start justify-between gap-2">
+                  <span class="font-medium text-sm" style="color: var(--nav-text);">{{ projet.nom }}</span>
+                  <span v-if="projet.annee" class="text-xs shrink-0" style="color: var(--nav-text-muted);">{{ projet.annee }}</span>
+                </div>
+                <div v-if="projet.lieu" class="text-xs mt-0.5" style="color: var(--nav-text-muted);">{{ projet.lieu }}</div>
+                <p class="text-xs mt-1 leading-relaxed" style="color: var(--nav-text-muted);">{{ projet.description.slice(0, 120) }}{{ projet.description.length > 120 ? '…' : '' }}</p>
+                <a
+                  v-if="projet.url"
+                  :href="projet.url"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-xs mt-1 inline-block"
+                  style="color: var(--nav-text-muted); text-decoration: underline;"
+                >En savoir plus →</a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Structures voisines (graphe) -->
+          <div v-if="structuresVoisines.length" class="mb-4">
+            <h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Structures liées</h3>
+            <div class="flex flex-wrap gap-2">
+              <button
+                v-for="voisine in structuresVoisines.slice(0, 6)"
+                :key="voisine.id"
+                class="px-2 py-1 rounded text-xs transition-colors hover:opacity-70"
+                style="background: var(--nav-bg-alt); color: var(--nav-text); border: 1px solid transparent;"
+                @click="emit('update:structureId', voisine.id)"
+              >{{ voisine.nom }}</button>
+            </div>
+          </div>
+
+          <!-- Sources -->
+          <div v-if="structure.sources && structure.sources.length" class="mb-4">
+            <h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Sources</h3>
+            <div class="space-y-1">
+              <div v-for="(source, i) in structure.sources" :key="i" class="flex items-center gap-2">
+                <span
+                  class="px-1.5 py-0.5 rounded text-xs shrink-0"
+                  style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
+                >{{ source.type }}</span>
+                <a
+                  v-if="source.url"
+                  :href="source.url"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-xs underline truncate"
+                  style="color: var(--nav-text);"
+                >{{ source.titre }}</a>
+                <span v-else class="text-xs" style="color: var(--nav-text);">{{ source.titre }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- CTAs -->
+          <div class="flex gap-3 pt-2" style="border-top: 1px solid var(--nav-bg-alt);">
+            <a
+              href="/contribuer"
+              class="text-xs underline"
+              style="color: var(--nav-text-muted);"
+            >Signaler une erreur</a>
+            <a
+              href="/contribuer"
+              class="text-xs underline"
+              style="color: var(--nav-text-muted);"
+            >Réclamer cette fiche</a>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { ReseauxBifurcationData, StructureV2, ProjetEmblematique } from '~/types/structure-v2'
+
+const FAMILLE_COLORS: Record<number, string> = {
+  1: '#a85d3e',
+  2: '#c4a472',
+  3: '#d4a017',
+  4: '#5a7a4a',
+  5: '#3d6a8c',
+}
+
+const FAMILLE_LABELS: Record<number, string> = {
+  1: 'Réemploi & filières',
+  2: 'Frugalité & low-tech',
+  3: 'Architecture sociale',
+  4: 'Collectifs & AMO',
+  5: 'Urbanisme de transition',
+}
+
+const props = defineProps<{
+  modelValue: boolean
+  structureId: string | null
+  data: ReseauxBifurcationData | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'update:structureId': [id: string]
+}>()
+
+const showFullDesc = ref(false)
+
+function close() {
+  emit('update:modelValue', false)
+  showFullDesc.value = false
+}
+
+// Fermeture Esc globale
+onMounted(() => {
+  const handler = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && props.modelValue) close()
+  }
+  window.addEventListener('keydown', handler)
+  onUnmounted(() => window.removeEventListener('keydown', handler))
+})
+
+// Remettre showFullDesc a false a chaque changement de fiche
+watch(() => props.structureId, () => {
+  showFullDesc.value = false
+})
+
+const structure = computed<StructureV2 | null>(() => {
+  if (!props.data || !props.structureId) return null
+  return props.data.structures.find(s => s.id === props.structureId) ?? null
+})
+
+const familleColor = computed(() =>
+  FAMILLE_COLORS[structure.value?.famille_principale ?? 1] ?? '#888'
+)
+
+const familleLabel = computed(() =>
+  FAMILLE_LABELS[structure.value?.famille_principale ?? 1] ?? ''
+)
+
+const projetsStructure = computed<ProjetEmblematique[]>(() => {
+  if (!props.data || !props.structureId) return []
+  return props.data.projets?.filter(p => p.structure_parent === props.structureId) ?? []
+})
+
+const structuresVoisines = computed<StructureV2[]>(() => {
+  if (!props.data || !props.structureId) return []
+  const edges = props.data.graphe?.edges ?? []
+  const voisineIds = edges
+    .filter(e => e.source === props.structureId || e.target === props.structureId)
+    .sort((a, b) => (b.score ?? 0) - (a.score ?? 0))
+    .map(e => e.source === props.structureId ? e.target : e.source)
+    .slice(0, 8)
+
+  return voisineIds
+    .map(id => props.data!.structures.find(s => s.id === id))
+    .filter(Boolean) as StructureV2[]
+})
+</script>
+
+<style scoped>
+/* Backdrop */
+.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
+.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
+
+/* Modal positionnement : centré desktop, descendu sous le header sur mobile */
+.fiche-modal-v2 {
+  top: 50%;
+  transform: translate(-50%, -50%);
+  max-height: 90vh;
+}
+
+@media (max-width: 1023px) {
+  .fiche-modal-v2 {
+    top: 76px;
+    transform: translateX(-50%);
+    max-height: calc(100dvh - 92px);
+  }
+}
+
+/* Modal */
+.modal-enter-active, .modal-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.modal-enter-from, .modal-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -52%);
+}
+@media (max-width: 1023px) {
+  .modal-enter-from, .modal-leave-to {
+    transform: translate(-50%, calc(-2% + 76px));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .backdrop-enter-active, .backdrop-leave-active { transition: none; }
+  .modal-enter-active, .modal-leave-active { transition: none; }
+}
+</style>
--- a/components/GraphView.vue
+++ b/components/GraphView.vue
@@ -0,0 +1,886 @@
+<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 droite (repliable) - 3 sections : AFFICHER / HASHTAGS / MODE D'EMPLOI -->
+    <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 : 3 sections empilees -->
+      <template v-if="sidebarOpen">
+        <div style="flex: 1; overflow-y: auto; display: flex; flex-direction: column;">
+
+          <!-- SECTION 1 : AFFICHER (toggles familles / pratiques) -->
+          <div style="padding: 10px 12px; flex-shrink: 0;">
+            <div style="font-size: 0.72rem; font-weight: 700; color: var(--nav-text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px;">Afficher</div>
+            <label
+              :style="{
+                display: 'flex', alignItems: 'center', gap: '8px',
+                padding: '7px 10px', marginBottom: '4px',
+                borderRadius: '6px', cursor: 'pointer',
+                fontSize: '0.82rem', fontWeight: 600,
+                background: showFamilles ? 'var(--nav-bg-alt)' : 'transparent',
+                color: showFamilles ? 'var(--nav-text)' : 'var(--nav-text-muted)',
+                transition: 'all 0.12s',
+              }"
+            >
+              <input type="checkbox" v-model="showFamilles" style="cursor: pointer; width: 14px; height: 14px;" />
+              <span>Familles</span>
+            </label>
+            <label
+              :style="{
+                display: 'flex', alignItems: 'center', gap: '8px',
+                padding: '7px 10px',
+                borderRadius: '6px', cursor: 'pointer',
+                fontSize: '0.82rem', fontWeight: 600,
+                background: showPratiques ? 'var(--nav-bg-alt)' : 'transparent',
+                color: showPratiques ? 'var(--nav-text)' : 'var(--nav-text-muted)',
+                transition: 'all 0.12s',
+              }"
+            >
+              <input type="checkbox" v-model="showPratiques" style="cursor: pointer; width: 14px; height: 14px;" />
+              <span>Pratiques</span>
+            </label>
+          </div>
+
+          <!-- SECTION 2 : HASHTAGS (chips groupees) -->
+          <div style="border-top: 1px solid var(--nav-bg-alt); margin-top: 0; padding: 10px 12px 8px; flex-shrink: 0;">
+            <div style="display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px;">
+              <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-bottom: 6px; 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: 0 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>
+
+          <!-- SECTION 3 : MODE D'EMPLOI -->
+          <div style="border-top: 1px solid var(--nav-bg-alt); padding: 10px 12px; flex-shrink: 0;">
+            <div style="font-size: 0.72rem; font-weight: 700; color: var(--nav-text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;">Mode d'emploi</div>
+            <div style="font-size: 0.7rem; color: var(--nav-text-muted); line-height: 1.5;">
+              La carte croise des familles editoriales avec des pratiques (hashtags). Coche les couches a afficher, filtre par hashtag, clique sur un noeud pour en savoir plus.
+            </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>
+
+    <!-- Popover unifie (famille OU hashtag) -->
+    <div
+      v-if="popover.open"
+      :style="{
+        position: 'absolute',
+        left: popover.x + 'px',
+        top: popover.y + 'px',
+        background: 'var(--nav-surface)',
+        border: '1px solid var(--nav-bg-alt)',
+        borderRadius: '8px',
+        padding: '12px 14px',
+        maxWidth: '280px',
+        boxShadow: '0 6px 18px rgba(0,0,0,0.18)',
+        zIndex: 50,
+      }"
+      @click.stop
+    >
+      <button
+        @click="closePopover"
+        style="
+          position: absolute; top: 4px; right: 6px;
+          background: none; border: none; cursor: pointer;
+          font-size: 1rem; color: var(--nav-text-muted); padding: 2px 6px;
+          line-height: 1;
+        "
+        title="Fermer"
+      >x</button>
+      <div
+        :style="{
+          fontWeight: 700, fontSize: '0.92rem',
+          color: popover.color, marginBottom: '6px',
+          paddingRight: '14px',
+        }"
+      >{{ popover.title }}</div>
+
+      <!-- Body famille : description + compteur + 6 structures + bouton "Voir toutes" -->
+      <div v-if="popover.kind === 'famille'">
+        <div style="font-size: 0.78rem; line-height: 1.45; color: var(--nav-text); margin-bottom: 10px;">
+          {{ popover.body }}
+        </div>
+        <div style="font-size: 0.72rem; color: var(--nav-text-muted); margin-bottom: 6px;">
+          {{ popover.structures.length }} structure{{ popover.structures.length > 1 ? 's' : '' }} dans cette famille
+        </div>
+        <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px;">
+          <li
+            v-for="s in popover.structures.slice(0, 6)"
+            :key="s.id"
+            @click="selectStructureFromPopover(s.id)"
+            style="
+              font-size: 0.78rem; color: var(--nav-text);
+              padding: 4px 6px; border-radius: 4px;
+              cursor: pointer; transition: background 0.1s;
+              display: flex; align-items: center; gap: 6px;
+            "
+            @mouseenter="(e: any) => e.currentTarget.style.background = 'var(--nav-bg-alt)'"
+            @mouseleave="(e: any) => e.currentTarget.style.background = 'transparent'"
+          >
+            <span
+              style="width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;"
+              :style="`background: ${popover.color};`"
+            />
+            <span>{{ s.nom }}</span>
+          </li>
+        </ul>
+        <button
+          v-if="popover.familleId != null"
+          @click="openFicheFamilleFromPopover"
+          style="
+            margin-top: 10px; width: 100%;
+            padding: 7px 10px; border-radius: 6px;
+            background: var(--nav-bg-alt); border: none;
+            font-size: 0.75rem; font-weight: 600; cursor: pointer;
+            color: var(--nav-text); transition: opacity 0.12s;
+            text-align: left;
+          "
+          @mouseenter="(e: any) => e.currentTarget.style.opacity = '0.7'"
+          @mouseleave="(e: any) => e.currentTarget.style.opacity = '1'"
+        >Voir toutes les {{ popover.structures.length }} pratiques -&gt;</button>
+      </div>
+
+      <!-- Body hashtag : ligne generique + compteur + liste structures cliquables -->
+      <div v-else-if="popover.kind === 'hashtag'">
+        <div
+          style="
+            font-size: 0.72rem; color: var(--nav-text-muted);
+            font-style: italic; margin-bottom: 8px; line-height: 1.4;
+          "
+        >Pratique transversale - portee par {{ popover.structures.length }} structure{{ popover.structures.length > 1 ? 's' : '' }} de {{ popover.famillesCount }} famille{{ popover.famillesCount > 1 ? 's' : '' }}</div>
+        <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px;">
+          <li
+            v-for="s in popover.structures.slice(0, 6)"
+            :key="s.id"
+            @click="selectStructureFromPopover(s.id)"
+            style="
+              font-size: 0.78rem; color: var(--nav-text);
+              padding: 4px 6px; border-radius: 4px;
+              cursor: pointer; transition: background 0.1s;
+            "
+            @mouseenter="(e: any) => e.currentTarget.style.background = 'var(--nav-bg-alt)'"
+            @mouseleave="(e: any) => e.currentTarget.style.background = 'transparent'"
+          >{{ s.nom }}</li>
+        </ul>
+        <div
+          v-if="popover.structures.length > 6"
+          style="font-size: 0.7rem; color: var(--nav-text-muted); margin-top: 6px; padding-left: 6px;"
+        >+ {{ popover.structures.length - 6 }} autre{{ popover.structures.length - 6 > 1 ? 's' : '' }}</div>
+      </div>
+    </div>
+
+    <!-- Fiche famille modale -->
+    <FicheFamilleModal
+      v-model="ficheFamilleOpen"
+      :famille-id="ficheFamilleId"
+      :data="props.data"
+      @select-structure="(id) => emit('select-structure', id)"
+    />
+  </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)
+
+// Layers superposables (remplace viewMode exclusif PV2-5e)
+const showFamilles = ref(true)
+const showPratiques = ref(false)
+
+function toggleHashtag(tag: string) {
+  activeHashtags.value = activeHashtags.value.includes(tag)
+    ? activeHashtags.value.filter(t => t !== tag)
+    : [...activeHashtags.value, tag]
+}
+
+// Popover unifie (famille | hashtag)
+type PopoverState = {
+  open: boolean
+  kind: 'famille' | 'hashtag' | null
+  x: number
+  y: number
+  title: string
+  body: string
+  color: string
+  structures: { id: string; nom: string }[]
+  familleId: number | null
+  famillesCount: number
+}
+
+const popover = ref<PopoverState>({
+  open: false,
+  kind: null,
+  x: 0,
+  y: 0,
+  title: '',
+  body: '',
+  color: '#000',
+  structures: [],
+  familleId: null,
+  famillesCount: 0,
+})
+
+// Fiche famille modale
+const ficheFamilleOpen = ref(false)
+const ficheFamilleId = ref<number | null>(null)
+
+function closePopover() {
+  popover.value.open = false
+  popover.value.kind = null
+}
+
+function selectStructureFromPopover(id: string) {
+  closePopover()
+  emit('select-structure', id)
+}
+
+function openFicheFamilleFromPopover() {
+  if (popover.value.familleId == null) return
+  ficheFamilleId.value = popover.value.familleId
+  ficheFamilleOpen.value = true
+  closePopover()
+}
+
+// Mapping hashtag -> famille majoritaire
+// En cas d'egalite : prendre la famille la plus petite (visibilite minoritaires)
+const tagToFamille = computed<Record<string, number>>(() => {
+  if (!props.data) return {}
+  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
+    })
+  })
+  const familleSize: Record<number, number> = {}
+  props.data.structures.forEach(s => {
+    familleSize[s.famille_principale] = (familleSize[s.famille_principale] ?? 0) + 1
+  })
+  const out: 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
+      return (familleSize[Number(a[0])] ?? 0) - (familleSize[Number(b[0])] ?? 0)
+    })
+    out[tag] = Number(entries[0][0])
+  }
+  return out
+})
+
+const hashtagsByFamille = computed(() => {
+  if (!props.data) return []
+  const map = tagToFamille.value
+  const groups: Record<number, string[]> = {}
+  props.allHashtags.forEach(tag => {
+    const fam = map[tag]
+    if (fam == null) return
+    if (!groups[fam]) groups[fam] = []
+    groups[fam].push(tag)
+  })
+  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(),
+    }))
+})
+
+// Structures portant un hashtag donne (pour popover)
+function structuresForHashtag(tag: string): { id: string; nom: string }[] {
+  if (!props.data) return []
+  return props.data.structures
+    .filter(s => s.hashtags.includes(tag))
+    .map(s => ({ id: s.id, nom: s.nom }))
+}
+
+// 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',
+}
+
+const FAMILLE_DESCRIPTIONS: Record<number, string> = {
+  1: "Structures dont le geste premier est de travailler avec la matiere existante : deconstruction selective, plateformes de redistribution, filieres biosourcees et geosourcees.",
+  2: "Pratiques qui partent du principe qu'on peut faire mieux avec moins. Renovation profonde, materiaux locaux, sobriete choisie.",
+  3: "Structures dont le terrain premier est le mal-logement, la precarite, l'hospitalite. Architecture comme reponse a l'urgence sociale.",
+  4: "Structures qui accompagnent les projets collectifs : cooperatives d'habitat, ecovillages, accompagnement vers l'autogestion ou la renovation.",
+  5: "Demarches a l'echelle du territoire : villes en transition, PLU alternatifs, coalitions territoriales.",
+  6: "Recherche-action et production de contre-savoirs (Forensic Architecture, Rural Studio, PEROU, Centrala). Badge transversal aux familles.",
+}
+
+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()
+  closePopover()
+
+  const svg = d3.select(svgEl)
+    .attr('viewBox', `0 0 ${width} ${height}`)
+
+  // Click sur le SVG vide -> fermer popover
+  svg.on('click', (event: any) => {
+    if (event.target === svgEl) closePopover()
+  })
+
+  // 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)
+      closePopover()
+    })
+
+  svg.call(zoomBehavior as any)
+
+  const { allNodes, links } = buildNodesLinks(width, height)
+
+  // Simulation force-directed
+  if (simulation) simulation.stop()
+
+  // Adapter la charge selon le nombre de noeuds (mode "tout coche" = plus de repulsion)
+  const heavyMode = showPratiques.value && allNodes.length > 150
+
+  simulation = d3.forceSimulation(allNodes)
+    .force('link', d3.forceLink(links).id((d: any) => d.id)
+      .distance((d: any) => {
+        if (d.type === 'practice') return 90
+        return d.type === 'primary' ? 80 : 120
+      })
+      .strength((d: any) => d.strength ?? 0.5))
+    .force('charge', d3.forceManyBody().strength(heavyMode ? -80 : -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) => {
+      if (d.type === 'practice') return 'rgba(150,150,150,0.25)'
+      return 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) => {
+      if (d.type === 'structure') return 'pointer'
+      if (d.type === 'family') return 'pointer'
+      if (d.type === 'hashtag') return 'pointer'
+      return '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
+          closePopover()
+        })
+        .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) => {
+      event.stopPropagation()
+      if (d.type === 'structure') {
+        emit('select-structure', d.id)
+      } else if (d.type === 'family') {
+        openFamillePopover(d, event, svgEl)
+      } else if (d.type === 'hashtag') {
+        openHashtagPopover(d, event, svgEl)
+      }
+    })
+
+  // Cercles
+  d3NodeSelection.append('circle')
+    .attr('r', (d: any) => d.r)
+    .attr('fill', (d: any) => {
+      if (d.type === 'family') return d.color
+      if (d.type === 'hashtag') return d.fill
+      return d.color + 'cc'
+    })
+    .attr('stroke', (d: any) => {
+      if (d.type === 'family') return 'white'
+      if (d.type === 'hashtag') return d.stroke
+      return d.color
+    })
+    .attr('stroke-width', (d: any) => {
+      if (d.type === 'family') return 3
+      if (d.type === 'hashtag') return 2
+      return 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')
+
+  // Labels hashtags : texte noir sur fond clair, tronque a 12 caracteres
+  d3NodeSelection.filter((d: any) => d.type === 'hashtag')
+    .append('text')
+    .text((d: any) => {
+      const raw = d.label as string
+      return raw.length > 12 ? raw.slice(0, 12) + '...' : raw
+    })
+    .attr('text-anchor', 'middle')
+    .attr('dy', '0.35em')
+    .attr('font-size', '9px')
+    .attr('font-weight', '600')
+    .attr('fill', '#2a2a2a')
+    .style('pointer-events', 'none')
+
+  // Labels structures : nom au-dessus du cercle, halo pour lisibilite
+  d3NodeSelection.filter((d: any) => d.type === 'structure')
+    .append('text')
+    .attr('class', 'graph-struct-label')
+    .text((d: any) => {
+      const raw = d.label as string
+      return raw.length > 22 ? raw.slice(0, 20) + '…' : raw
+    })
+    .attr('text-anchor', 'middle')
+    .attr('dy', (d: any) => -(d.r + 5))
+    .attr('font-size', '9.5px')
+    .attr('font-weight', '500')
+    .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 buildNodesLinks(width: number, height: number) {
+  const allNodes: any[] = []
+  const links: any[] = []
+
+  if (!props.data) return { allNodes, links }
+
+  const tagFamilleMap = tagToFamille.value
+
+  // Noeuds structures (toujours presents)
+  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,
+  }))
+  allNodes.push(...structureNodes)
+
+  // Layer Familles : 6 noeuds famille fixes en etoile + liens primaires/secondaires
+  if (showFamilles.value) {
+    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,
+    }))
+    allNodes.push(...familyNodes)
+
+    structureNodes.forEach(s => {
+      links.push({
+        source: s.id,
+        target: `family-${s.famille}`,
+        type: 'primary',
+        strength: 0.55,
+      })
+      ;(s.familles_secondaires as number[]).forEach((f: number) => {
+        links.push({
+          source: s.id,
+          target: `family-${f}`,
+          type: 'secondary',
+          strength: 0.45,
+        })
+      })
+    })
+  }
+
+  // Layer Pratiques : noeuds hashtag + liens structure -> hashtag
+  if (showPratiques.value) {
+    const uniqueTags = new Set<string>()
+    props.data.structures.forEach(s => s.hashtags.forEach(t => uniqueTags.add(t)))
+    const tagsArr = Array.from(uniqueTags).sort()
+
+    // Si seul layer Pratiques actif : disposition radiale comme reference
+    // Si superpose avec Familles : laisser la simulation placer
+    const radius = Math.min(width, height) * 0.32
+    const hashtagNodes = tagsArr.map((tag, i) => {
+      const famId = tagFamilleMap[tag]
+      const strokeColor = famId != null ? FAMILLE_COLORS[famId] : '#888'
+      const node: any = {
+        id: `hashtag-${tag}`,
+        type: 'hashtag',
+        label: tag.startsWith('#') ? tag.slice(1) : tag,
+        tag,
+        fill: 'var(--nav-bg-alt)',
+        stroke: strokeColor,
+        color: strokeColor,
+        r: 22,
+      }
+      if (!showFamilles.value) {
+        const angle = (i / tagsArr.length) * Math.PI * 2
+        node.x = width / 2 + Math.cos(angle) * radius
+        node.y = height / 2 + Math.sin(angle) * radius
+      }
+      return node
+    })
+    allNodes.push(...hashtagNodes)
+
+    structureNodes.forEach(s => {
+      s.hashtags.forEach(tag => {
+        if (uniqueTags.has(tag)) {
+          links.push({
+            source: s.id,
+            target: `hashtag-${tag}`,
+            type: 'practice',
+            strength: 0.3,
+          })
+        }
+      })
+    })
+  }
+
+  return { allNodes, links }
+}
+
+function clampPopoverPosition(rect: DOMRect, evtX: number, evtY: number, w = 280, h = 180) {
+  const margin = 12
+  let x = evtX - rect.left + 14
+  let y = evtY - rect.top + 10
+  if (x + w > rect.width - margin) {
+    x = Math.max(margin, rect.width - w - margin)
+  }
+  if (y + h > rect.height - margin) {
+    y = Math.max(margin, rect.height - h - margin)
+  }
+  return { x, y }
+}
+
+function structuresForFamille(famId: number): { id: string; nom: string }[] {
+  if (!props.data) return []
+  return props.data.structures
+    .filter(s =>
+      s.famille_principale === famId
+      || (s.familles_secondaires ?? []).includes(famId)
+    )
+    .sort((a, b) => a.nom.localeCompare(b.nom, 'fr'))
+    .map(s => ({ id: s.id, nom: s.nom }))
+}
+
+function openFamillePopover(d: any, event: any, svgEl: SVGElement) {
+  const rect = (svgEl as HTMLElement).getBoundingClientRect()
+  const famId = d.familleId as number
+  const desc = FAMILLE_DESCRIPTIONS[famId] ?? ''
+  const structures = structuresForFamille(famId)
+  const { x, y } = clampPopoverPosition(rect, event.clientX, event.clientY, 280, 280)
+  popover.value = {
+    open: true,
+    kind: 'famille',
+    x,
+    y,
+    title: FAMILLE_LABELS[famId] ?? '',
+    body: desc,
+    color: FAMILLE_COLORS[famId] ?? '#000',
+    structures,
+    familleId: famId,
+    famillesCount: 0,
+  }
+}
+
+function openHashtagPopover(d: any, event: any, svgEl: SVGElement) {
+  const rect = (svgEl as HTMLElement).getBoundingClientRect()
+  const tag = d.tag as string
+  const structures = structuresForHashtag(tag)
+  const famId = tagToFamille.value[tag]
+  const color = famId != null ? FAMILLE_COLORS[famId] : '#444'
+  // Compter les familles distinctes parmi les porteuses (famille_principale)
+  const famSet = new Set<number>()
+  if (props.data) {
+    props.data.structures
+      .filter(s => s.hashtags.includes(tag))
+      .forEach(s => famSet.add(s.famille_principale))
+  }
+  const { x, y } = clampPopoverPosition(rect, event.clientX, event.clientY, 280, 220)
+  popover.value = {
+    open: true,
+    kind: 'hashtag',
+    x,
+    y,
+    title: tag.startsWith('#') ? tag : '#' + tag,
+    body: '',
+    color,
+    structures,
+    familleId: null,
+    famillesCount: famSet.size,
+  }
+}
+
+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
+      const tgtId = typeof d.target === 'object' ? d.target.id : d.target
+      return ids.has(srcId) || ids.has(tgtId) ? 1 : 0.05
+    })
+  } else {
+    d3NodeSelection.select('circle').attr('opacity', 1)
+    d3LinkSelection.attr('opacity', 1)
+  }
+}
+
+// Declencher quand l'onglet devient visible
+watch(() => props.active, (val) => {
+  if (val && import.meta.client && props.data) {
+    requestAnimationFrame(() => requestAnimationFrame(() => initGraph()))
+  }
+})
+
+// Relancer si les donnees arrivent apres 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 })
+
+// Watchers layers : rebuild simulation
+watch([showFamilles, showPratiques], () => {
+  closePopover()
+  if (import.meta.client && props.data && props.active) {
+    requestAnimationFrame(() => requestAnimationFrame(() => initGraph()))
+  }
+})
+
+// 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>
+
+<style>
+/* Labels des structures dans le graphe (D3 injecte les <text>, donc style global) */
+.graph-view .graph-struct-label {
+  fill: var(--nav-text);
+  paint-order: stroke;
+  stroke: var(--nav-bg);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+  user-select: none;
+}
+</style>
--- a/components/HashtagFilter.vue
+++ b/components/HashtagFilter.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="hashtag-filter" style="padding: 8px 12px; background: var(--nav-surface);">
+    <!-- Filtres famille -->
+    <div style="margin-bottom: 6px;">
+      <span class="filter-label">FAMILLES</span>
+      <div class="chips-row">
+        <span
+          v-for="fam in FAMILLES"
+          :key="fam.id"
+          class="chip"
+          :style="selectedFamille === fam.id
+            ? `background: ${fam.color}; color: white; font-weight: 600; border: 2px solid ${fam.color};`
+            : `background: var(--nav-bg-alt); color: ${fam.color}; border: 2px solid ${fam.color}; font-weight: 600;`"
+          @click="toggleFamille(fam.id)"
+        >{{ fam.shortLabel }}</span>
+      </div>
+    </div>
+
+    <!-- Filtres hashtags avec toggle -->
+    <div>
+      <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;">
+        <span class="filter-label">HASHTAGS</span>
+        <button
+          @click="hashtagsVisible = !hashtagsVisible"
+          style="font-size: 0.7rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
+        >{{ hashtagsVisible ? 'Replier' : 'Afficher (' + props.allHashtags.length + ')' }}</button>
+      </div>
+      <div v-if="hashtagsVisible" class="chips-row">
+        <span
+          v-for="tag in props.allHashtags"
+          :key="tag"
+          class="chip chip-small"
+          :style="selectedHashtags.includes(tag)
+            ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
+            : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
+          @click="toggleHashtag(tag)"
+        >{{ tag }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const FAMILLES = [
+  { id: 1, shortLabel: 'Réemploi', color: '#a85d3e' },
+  { id: 2, shortLabel: 'Frugalité', color: '#c4a472' },
+  { id: 3, shortLabel: 'Social', color: '#d4a017' },
+  { id: 4, shortLabel: 'Collectifs', color: '#5a7a4a' },
+  { id: 5, shortLabel: 'Urbanisme', color: '#3d6a8c' },
+  { id: 6, shortLabel: 'Recherche', color: '#6b3fa0' },
+]
+
+const props = defineProps<{
+  allHashtags: string[]
+  selectedHashtags: string[]
+  selectedFamille: number | null
+}>()
+
+const emit = defineEmits<{
+  'update:selectedHashtags': [v: string[]]
+  'update:selectedFamille': [v: number | null]
+}>()
+
+const hashtagsVisible = ref(false)
+
+function toggleFamille(id: number) {
+  emit('update:selectedFamille', props.selectedFamille === id ? null : id)
+}
+
+function toggleHashtag(tag: string) {
+  const current = props.selectedHashtags
+  emit('update:selectedHashtags',
+    current.includes(tag) ? current.filter(t => t !== tag) : [...current, tag]
+  )
+}
+</script>
+
+<style scoped>
+.filter-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--nav-text-muted);
+  display: block;
+  margin-bottom: 4px;
+}
+.chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
+.chip {
+  cursor: pointer;
+  padding: 3px 10px;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  transition: all 0.15s;
+  user-select: none;
+}
+.chip-small { font-size: 0.7rem; padding: 2px 8px; }
+</style>
--- a/components/IntentionBanner.vue
+++ b/components/IntentionBanner.vue
@@ -0,0 +1,76 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="visible"
+        class="intention-overlay"
+        style="
+          position: fixed;
+          inset: 0;
+          z-index: 2000;
+          background: rgba(20, 18, 14, 0.85);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 24px;
+        "
+        @click.self="dismiss"
+      >
+        <div style="
+          max-width: 540px;
+          width: 100%;
+          background: #faf8f5;
+          border-radius: 8px;
+          padding: 32px;
+          color: #2c2416;
+        ">
+          <p style="font-size: 1rem; line-height: 1.7; margin: 0 0 12px 0;">
+            Cette carte recense les réseaux, collectifs, agences et projets où des
+            pensées écologiques deviennent des pratiques d'architecture et d'habiter.
+          </p>
+          <p style="font-size: 0.875rem; line-height: 1.6; opacity: 0.75; margin: 0 0 24px 0;">
+            Elle ne prétend pas à l'exhaustivité. Elle est un geste politique :
+            rendre visible ce qui se transforme, comment, par qui, où.
+            5 familles et des hashtags vous permettent d'explorer.
+          </p>
+          <button
+            @click="dismiss"
+            style="
+              background: #2c2416;
+              color: #faf8f5;
+              border: none;
+              border-radius: 4px;
+              padding: 10px 24px;
+              font-size: 0.875rem;
+              font-weight: 600;
+              cursor: pointer;
+              width: 100%;
+            "
+          >Explorer la carte</button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const visible = ref(false)
+
+onMounted(() => {
+  if (typeof localStorage !== 'undefined' && !localStorage.getItem('aep_intention_seen')) {
+    visible.value = true
+  }
+})
+
+function dismiss() {
+  visible.value = false
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem('aep_intention_seen', '1')
+  }
+}
+</script>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+</style>
--- a/components/MediaTabBackend.vue
+++ b/components/MediaTabBackend.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="media-tab-backend" style="padding: 2rem; overflow-y: auto;">
+    <div style="max-width: 640px;">
+      <h2 style="font-weight: 700; font-size: 1.1rem; margin-bottom: 0.75rem; color: var(--nav-text);">LightRAG backend</h2>
+      <p style="font-size: 0.9rem; line-height: 1.6; color: var(--nav-text); margin-bottom: 0.5rem;">
+        Voici l'interface brute du <strong>LightRAG</strong> qui alimente la carte des pensées écologiques.
+        C'est la "cuisine" du RAG : ingestion de documents, extraction d'entités, relations, requêtes.
+      </p>
+    </div>
+
+    <!-- PLACEHOLDER — DNS en attente
+         TODO: Décommenter iframe + supprimer placeholder une fois lightrag.trans-former.fr propagé.
+         DNS A record à créer sur OVH : lightrag → 178.104.106.195 TTL 300
+    -->
+    <div style="margin-top: 1.5rem; padding: 2rem; border: 2px dashed var(--nav-bg-alt, #ddd); border-radius: 8px; text-align: center; color: var(--nav-text-muted);">
+      <p style="font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem;">⏳ Backend en cours d'exposition publique — bientôt accessible.</p>
+      <p style="font-size: 0.85rem;">L'interface LightRAG sera disponible ici dès la mise en place du sous-domaine <code>lightrag.trans-former.fr</code>.</p>
+    </div>
+
+    <!--
+    <iframe
+      src="https://lightrag.trans-former.fr/"
+      style="width: 100%; height: 70vh; border: 1px solid var(--nav-bg-alt, #ddd); border-radius: 8px; margin-top: 1.5rem;"
+      title="LightRAG backend AEP — lecture seule"
+      sandbox="allow-same-origin allow-scripts"
+      loading="lazy"
+    />
+    -->
+  </div>
+</template>
--- a/components/MediaTabProjets.vue
+++ b/components/MediaTabProjets.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="media-tab-projets" style="padding: 1.5rem; overflow-y: auto;">
+    <div style="max-width: 70ch; margin-bottom: 1.5rem;">
+      <h2 style="font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--nav-text);">PFE engagés</h2>
+      <p style="font-size: 0.9rem; line-height: 1.6; color: var(--nav-text);">
+        Mutualiser le savoir. Voici les PFE engagés publiés en ligne dont nous avons connaissance.
+        Partage-nous le lien de ton travail si tu veux participer à cette initiative.
+      </p>
+    </div>
+
+    <div class="projets-grid">
+      <article v-for="p in projets" :key="p.id" class="projet-card">
+        <img v-if="p.thumb" :src="p.thumb" :alt="p.titre" class="projet-thumb" loading="lazy" />
+        <div v-else class="projet-thumb projet-thumb--placeholder">📐</div>
+
+        <h3 style="font-weight: 600; font-size: 0.95rem; margin: 0.5rem 0 0.25rem; color: var(--nav-text);">{{ p.titre }}</h3>
+        <p style="font-size: 0.8rem; color: var(--nav-text-muted); margin-bottom: 0.5rem;">
+          {{ (p.auteurs || []).filter((a: string) => a !== 'Inconnu').join(', ') }}
+          <template v-if="p.ecole && p.ecole !== 'Inconnu'"> · {{ p.ecole }}</template>
+          <template v-if="p.annee && p.annee !== 'Inconnu'"> · {{ p.annee }}</template>
+        </p>
+        <p style="font-size: 0.875rem; line-height: 1.5; color: var(--nav-text); flex: 1; margin-bottom: 0.75rem;">{{ p.description }}</p>
+
+        <a v-if="p.url" :href="p.url" target="_blank" rel="noopener" style="color: var(--nav-primary-solid, #3b6ea5); font-weight: 600; font-size: 0.875rem; text-decoration: none;">
+          Découvrir →
+        </a>
+        <span v-if="p.link_status === 'broken'" style="color: #e67e22; font-size: 0.8rem; display: block; margin-top: 0.25rem;">⚠ Lien d'origine cassé</span>
+      </article>
+    </div>
+
+    <p style="margin-top: 2rem; font-size: 0.875rem; color: var(--nav-text-muted);">
+      Tu as un PFE engagé à partager ? <a href="mailto:contact@trans-former.fr" style="color: var(--nav-primary-solid);">Écris-moi</a>.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { data: pfeData } = await useFetch<{ projets: any[] }>('/data/pfe-engages.json')
+const projets = computed(() => pfeData.value?.projets ?? [])
+</script>
+
+<style scoped>
+.projets-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.25rem;
+}
+.projet-card {
+  border: 1px solid var(--nav-bg-alt, #eee);
+  border-radius: 10px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  background: var(--nav-surface);
+}
+.projet-thumb {
+  width: 100%;
+  height: 140px;
+  object-fit: cover;
+  border-radius: 6px;
+  background: var(--nav-bg-alt, #f5f5f5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+}
+</style>
--- a/components/MediaTabVisuel.vue
+++ b/components/MediaTabVisuel.vue
@@ -0,0 +1,604 @@
+<template>
+  <div class="media-visuel">
+
+    <!-- Conteneur split / plein ecran -->
+    <div class="layout-container">
+
+      <!-- Slot carte D3 -->
+      <div
+        class="carte-slot"
+        :class="[
+          layoutMode === 'split' ? 'carte-split' : '',
+          layoutMode === 'carte-full' ? 'carte-full' : '',
+          layoutMode === 'chatbot-full' ? 'carte-hidden' : '',
+        ]"
+        :style="layoutMode === 'split' ? { flexBasis: carteFlexBasis } : {}"
+        style="position: relative;"
+      >
+        <ClientOnly>
+          <CartePensees
+            ref="cartePenseesRef"
+            :data="penseesData"
+            :active="true"
+            @select-auteur="onSelectAuteur"
+            @select-ecole="onSelectEcole"
+          />
+          <template #fallback>
+            <div class="w-full h-full flex items-center justify-center" style="color: var(--nav-text-muted);">
+              Chargement de la carte...
+            </div>
+          </template>
+        </ClientOnly>
+
+        <!-- Overlay PDF FRACAS -->
+        <div
+          v-if="showFracasPdf"
+          class="fracas-overlay"
+          :style="{ opacity: fracasOpacity / 100 }"
+        >
+          <embed
+            src="/cartes/carte-fracas-bonpote-v2.pdf"
+            type="application/pdf"
+            style="width: 100%; height: 100%;"
+          />
+        </div>
+      </div>
+
+      <!-- Barre de toggle -->
+      <div class="layout-toggle-bar shrink-0">
+        <button
+          @click="setLayoutMode('carte-full')"
+          :class="{ active: layoutMode === 'carte-full' }"
+          class="toggle-btn"
+          title="Carte en plein ecran"
+        >
+          <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">
+            <polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
+            <line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
+          </svg>
+          Carte plein ecran
+        </button>
+        <button
+          v-if="layoutMode !== 'split'"
+          @click="setLayoutMode('split')"
+          class="toggle-btn"
+          title="Vue partagee"
+        >
+          <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">
+            <rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="12" x2="21" y2="12"/>
+          </svg>
+          Vue partagee
+        </button>
+        <button
+          @click="setLayoutMode('chatbot-full')"
+          :class="{ active: layoutMode === 'chatbot-full' }"
+          class="toggle-btn"
+          title="Chatbot en plein ecran"
+        >
+          <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">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+          </svg>
+          Chatbot plein ecran
+        </button>
+        <button
+          @click="setLayoutMode('bonpote')"
+          :class="{ active: layoutMode === 'bonpote' }"
+          class="toggle-btn"
+          title="A propos de la carte FRACAS Bonpote V2"
+          style="margin-left: auto;"
+        >
+          <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">
+            <circle cx="12" cy="12" r="10"/><polyline points="12 8 12 12 14 14"/>
+          </svg>
+          Bonpote V2
+        </button>
+
+        <!-- Toggle PDF FRACAS -->
+        <label class="layer-toggle" title="Superposer la carte FRACAS Bonpote V2 en PDF">
+          <input type="checkbox" v-model="showFracasPdf" />
+          📄 Carte FRACAS (PDF)
+        </label>
+        <input
+          v-if="showFracasPdf"
+          type="range"
+          min="0"
+          max="100"
+          v-model.number="fracasOpacity"
+          class="opacity-slider"
+          :title="`Opacité ${fracasOpacity}%`"
+        />
+      </div>
+
+      <!-- Poignee draggable (visible uniquement en mode split, pas sur mobile) -->
+      <div
+        v-if="layoutMode === 'split'"
+        class="split-handle"
+        @mousedown.prevent="onHandleMousedown"
+        title="Redimensionner"
+      >
+        <span class="split-handle-grip"></span>
+      </div>
+
+      <!-- Slot chatbot inline -->
+      <div
+        class="chatbot-slot"
+        :class="[
+          layoutMode === 'split' ? 'chatbot-split' : '',
+          layoutMode === 'chatbot-full' ? 'chatbot-full-mode' : '',
+          layoutMode === 'carte-full' ? 'chatbot-hidden' : '',
+        ]"
+        :style="layoutMode === 'split' ? { flexBasis: chatbotFlexBasis } : {}"
+      >
+        <ClientOnly>
+          <ChatbotPensees :auteurContext="chatbotAuteur" :inline="true" />
+        </ClientOnly>
+      </div>
+
+      <!-- Vue Bonpote V2 -->
+      <div
+        v-if="layoutMode === 'bonpote'"
+        class="flex-1 overflow-y-auto px-6 py-8"
+        style="max-width: 680px; margin: 0 auto;"
+      >
+        <div class="mb-6">
+          <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color: var(--nav-text-muted);">Reference editoriale</p>
+          <h2 class="text-xl font-bold mb-3" style="color: var(--nav-text);">Carte FRACAS des pensees ecologiques</h2>
+          <p class="text-sm leading-relaxed mb-4" style="color: var(--nav-text);">
+            FRACAS (Familles, Racines et Arpentages des Courants et Alternatives Solidaires) est une carte des ecoles de pensee ecologique publiee par Bonpote en octobre 2024. Elle reference ~140 auteurs et autrices reparti-es en 10 ecoles de pensee, depuis l'ecosocialisme jusqu'a l'ethique environnementale.
+          </p>
+          <p class="text-sm leading-relaxed mb-6" style="color: var(--nav-text);">
+            Le RAG ATIS est construit sur cette reference : chaque auteur ingere dans la bibliotheque correspond a une entree de la carte FRACAS. Les ecoles de pensee, les positions et les couleurs de notre carte sont transposees 1:1 depuis Bonpote V2.
+          </p>
+          <div class="flex flex-col gap-3">
+            <a href="https://bonpote.com/la-carte-des-pensees-ecologiques/"
+              target="_blank" rel="noopener"
+              class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity"
+              style="background: var(--nav-primary, #3b6ea5); color: white; font-size: 0.875rem; font-weight: 600; text-decoration: none;">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+              Lire l'article Bonpote + carte interactive
+            </a>
+            <a href="https://bonpote.com/wp-content/uploads/2024/10/FRACAS_BONPOTE_CARTE_VERSO_V2-OCT2024.pdf"
+              target="_blank" rel="noopener"
+              class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity"
+              style="background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; font-weight: 500; text-decoration: none;">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+              Telecharger le poster PDF (recto/verso)
+            </a>
+            <button
+              @click="setLayoutMode('split')"
+              class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity text-left"
+              style="background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer;">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+              Interroger le RAG ATIS sur ces pensees
+            </button>
+          </div>
+        </div>
+        <div>
+          <p class="text-xs font-bold uppercase tracking-widest mb-3" style="color: var(--nav-text-muted);">Les 10 ecoles de pensee (FRACAS V2)</p>
+          <div class="flex flex-col gap-2">
+            <div v-for="ecole in (penseesData?.ecoles ?? [])" :key="ecole.id"
+              class="flex items-start gap-3 px-3 py-2 rounded-lg"
+              style="background: var(--nav-bg-alt);">
+              <span class="w-3 h-3 rounded-full shrink-0 mt-1" :style="`background:${ecole.color};`"></span>
+              <div>
+                <p class="text-sm font-semibold" style="color: var(--nav-text);">{{ ecole.label }}</p>
+                <p class="text-xs mt-0.5 leading-relaxed" style="color: var(--nav-text-muted);">{{ ecole.description }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Fiche auteur modal -->
+    <FicheAuteur
+      :open="ficheOpen"
+      :auteurId="ficheAuteurId"
+      :data="penseesData"
+      @close="ficheOpen = false"
+      @interroger-rag="onInterrogerRag"
+    />
+
+    <!-- Fiche ecole modal -->
+    <FicheEcole
+      :open="ficheEcoleOpen"
+      :ecoleId="ficheEcoleId"
+      :data="penseesData"
+      @close="ficheEcoleOpen = false"
+      @select-auteur="onSelectAuteurFromEcole"
+      @interroger-ecole="onInterrogerEcole"
+    />
+
+    <!-- Modal info RAG -->
+    <Teleport to="body">
+      <Transition name="backdrop">
+        <div v-if="ragInfoOpen" class="fixed inset-0 z-[2000]" style="background:rgba(26,34,56,0.55);" @click="ragInfoOpen = false" aria-hidden="true" />
+      </Transition>
+      <Transition name="modal">
+        <div v-if="ragInfoOpen" class="fixed z-[2001] left-1/2 flex flex-col"
+          style="top:50%;transform:translate(-50%,-50%);width:min(580px,94vw);max-height:85vh;background:var(--nav-bg);border-radius:14px;box-shadow:0 16px 64px rgba(26,34,56,0.28);overflow:hidden;"
+          role="dialog" aria-modal="true" aria-label="A propos du RAG FRACAS">
+          <div class="flex items-center justify-between px-5 py-4 shrink-0"
+            style="border-bottom:2px solid var(--nav-bg-alt);background:var(--nav-surface);">
+            <h2 class="font-bold text-base" style="color:var(--nav-text);">FRACAS - Bibliotheque des pensees ecologiques</h2>
+            <button @click="ragInfoOpen = false" class="ml-3 shrink-0 flex items-center justify-center w-8 h-8 rounded-full hover:opacity-70"
+              style="background:var(--nav-bg-alt);color:var(--nav-text-muted);" aria-label="Fermer">
+              <svg width="14" height="14" 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>
+          </div>
+          <div class="flex-1 overflow-y-auto px-5 py-4" style="color:var(--nav-text);font-size:0.875rem;line-height:1.6;">
+            <p class="mb-3">Une bibliotheque parlante politisee - des pensees ecologiques de gauche, organisees pour aider a creer une pensee complexe et nuancee, critiquer le recit dominant et soutenir des alternatives concretes et des projets collectifs.</p>
+            <p class="mb-4" style="color:var(--nav-text-muted);font-size:0.8rem;">Projet open source, ouvert a toutes et a tous - <a href="https://bonpote.com/la-carte-des-pensees-ecologiques/" target="_blank" rel="noopener" style="text-decoration:underline;">article + carte FRACAS Bonpote V2</a>.</p>
+            <div class="flex flex-col gap-3">
+              <div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
+                <p class="font-semibold mb-1" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Ce qu'est un RAG</p>
+                <p>Les textes sont vectorises dans un espace de 662 dimensions - chaque livre devient un nuage de points semantiques. La proximite entre les points capture la proximite entre les idees, pas les mots.</p>
+              </div>
+              <div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
+                <p class="font-semibold mb-1" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Chunking intelligent</p>
+                <p>Lors de l'ingestion, nous selectionnons les entites cles (concepts, auteurs, relations entre idees) plutot que de decouper mecaniquement les textes.</p>
+              </div>
+              <div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
+                <p class="font-semibold mb-2" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Trois couches d'analyse</p>
+                <div class="flex flex-col gap-1.5">
+                  <div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Fond</span><span>Les idees, les theses, les arguments - ce qu'on interroge directement.</span></div>
+                  <div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Forme</span><span>Les modeles narratifs, la rhetorique, la construction argumentative.</span></div>
+                  <div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Structure</span><span>L'architecture des livres - comment les auteurs construisent leur pensee.</span></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+interface EcoleData { id: string; label: string; description: string; color: string; x_hint: number; y_hint: number }
+interface LivreRag { slug: string; titre: string; annee: number; couches: string[] }
+interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string }
+interface PenseesData { meta: any; ecoles: EcoleData[]; auteurs: AuteurData[] }
+
+type LayoutMode = 'split' | 'carte-full' | 'chatbot-full' | 'bonpote'
+
+const STORAGE_KEY = 'media-layout-mode'
+const SPLIT_RATIO_KEY = 'media-split-ratio'
+const DEFAULT_SPLIT_RATIO = 0.66
+
+const ficheOpen = ref(false)
+const ficheAuteurId = ref<string | null>(null)
+const ficheEcoleOpen = ref(false)
+const ficheEcoleId = ref<string | null>(null)
+const ragInfoOpen = ref(false)
+const chatbotAuteur = ref<string | null>(null)
+const layoutMode = ref<LayoutMode>('split')
+const cartePenseesRef = ref<{ triggerResize: () => void } | null>(null)
+
+// Toggle PDF FRACAS
+const showFracasPdf = ref(false)
+const fracasOpacity = ref(60)
+
+// Props injectées depuis le parent (penseesData)
+const props = defineProps<{ penseesData: PenseesData | null }>()
+
+// Ratio de la carte vs chatbot en mode split (0.2 a 0.8)
+const splitRatio = ref(DEFAULT_SPLIT_RATIO)
+const carteFlexBasis = computed(() => `${splitRatio.value * 100}%`)
+const chatbotFlexBasis = computed(() => `${(1 - splitRatio.value) * 100}%`)
+
+// Logique poignee draggable
+let dragStartY = 0
+let dragStartRatio = DEFAULT_SPLIT_RATIO
+let containerHeight = 0
+
+function onHandleMousedown(e: MouseEvent) {
+  dragStartY = e.clientY
+  dragStartRatio = splitRatio.value
+  const container = (e.target as HTMLElement)?.closest('.layout-container') as HTMLElement | null
+  containerHeight = container ? container.clientHeight : window.innerHeight
+
+  window.addEventListener('mousemove', onHandleMousemove)
+  window.addEventListener('mouseup', onHandleMouseup)
+}
+
+function onHandleMousemove(e: MouseEvent) {
+  const delta = e.clientY - dragStartY
+  const newRatio = dragStartRatio + delta / containerHeight
+  splitRatio.value = Math.min(0.80, Math.max(0.20, newRatio))
+}
+
+function onHandleMouseup() {
+  window.removeEventListener('mousemove', onHandleMousemove)
+  window.removeEventListener('mouseup', onHandleMouseup)
+  if (typeof window !== 'undefined') {
+    localStorage.setItem(SPLIT_RATIO_KEY, String(splitRatio.value))
+  }
+  cartePenseesRef.value?.triggerResize()
+}
+
+onMounted(() => {
+  if (typeof window !== 'undefined') {
+    const saved = localStorage.getItem(STORAGE_KEY) as LayoutMode | null
+    if (saved && ['split', 'carte-full', 'chatbot-full', 'bonpote'].includes(saved)) {
+      layoutMode.value = saved
+    }
+    const savedRatio = parseFloat(localStorage.getItem(SPLIT_RATIO_KEY) ?? '')
+    if (!isNaN(savedRatio) && savedRatio >= 0.20 && savedRatio <= 0.80) {
+      splitRatio.value = savedRatio
+    }
+    if (!localStorage.getItem('rag-fracas-info-seen')) {
+      ragInfoOpen.value = true
+      localStorage.setItem('rag-fracas-info-seen', '1')
+    }
+  }
+})
+
+function setLayoutMode(mode: LayoutMode) {
+  layoutMode.value = mode
+  if (typeof window !== 'undefined') {
+    localStorage.setItem(STORAGE_KEY, mode)
+  }
+  if (mode !== 'chatbot-full') {
+    setTimeout(() => {
+      cartePenseesRef.value?.triggerResize()
+    }, 350)
+  }
+}
+
+watch(layoutMode, (v) => {
+  if (typeof window !== 'undefined') {
+    localStorage.setItem(STORAGE_KEY, v)
+  }
+})
+
+function onSelectAuteur(id: string) {
+  ficheAuteurId.value = id
+  ficheOpen.value = true
+  chatbotAuteur.value = null
+}
+
+function onSelectEcole(id: string) {
+  ficheEcoleId.value = id
+  ficheEcoleOpen.value = true
+}
+
+function onSelectAuteurFromEcole(auteurId: string) {
+  ficheEcoleOpen.value = false
+  onSelectAuteur(auteurId)
+}
+
+function onInterrogerEcole(ecoleId: string) {
+  ficheEcoleOpen.value = false
+  const ecole = props.penseesData?.ecoles.find(e => e.id === ecoleId)
+  chatbotAuteur.value = ecole?.label ?? null
+  if (layoutMode.value === 'carte-full') setLayoutMode('split')
+}
+
+function onInterrogerRag(auteurId: string) {
+  ficheOpen.value = false
+  const auteur = props.penseesData?.auteurs.find(a => a.id === auteurId)
+  chatbotAuteur.value = auteur?.nom ?? null
+  if (layoutMode.value === 'carte-full') {
+    setLayoutMode('split')
+  }
+}
+</script>
+
+<style scoped>
+.media-visuel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* Conteneur des slots carte + toggle + chatbot */
+.layout-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* --- Slot carte --- */
+.carte-slot {
+  overflow: hidden;
+  position: relative;
+  transition: opacity 0.2s ease;
+}
+
+.carte-split {
+  flex: 0 0 66%;
+  min-height: 0;
+  opacity: 1;
+}
+
+.carte-full {
+  flex: 1 1 100%;
+  min-height: 0;
+  opacity: 1;
+}
+
+.carte-hidden {
+  flex: 0 0 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+/* --- Overlay PDF FRACAS --- */
+.fracas-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 50;
+  pointer-events: none;
+}
+
+/* --- Barre de toggle --- */
+.layout-toggle-bar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  background: var(--nav-bg);
+  border-top: 1px solid rgba(180, 170, 160, 0.22);
+  border-bottom: 1px solid rgba(180, 170, 160, 0.22);
+  min-height: 38px;
+  flex-wrap: wrap;
+}
+
+.toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  background: var(--nav-bg-alt);
+  color: var(--nav-text-muted);
+  border: 1px solid transparent;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.toggle-btn:hover {
+  background: var(--nav-surface);
+  color: var(--nav-text);
+}
+
+.toggle-btn.active {
+  background: var(--nav-primary);
+  color: var(--nav-text-on-primary);
+  border-color: var(--nav-primary);
+}
+
+/* --- Toggle layer PDF FRACAS --- */
+.layer-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  background: var(--nav-bg-alt);
+  color: var(--nav-text-muted);
+  border: 1px solid transparent;
+  user-select: none;
+  margin-left: 4px;
+}
+
+.layer-toggle input[type="checkbox"] {
+  margin: 0;
+  cursor: pointer;
+}
+
+.opacity-slider {
+  width: 80px;
+  cursor: pointer;
+  accent-color: var(--nav-primary, #3b6ea5);
+}
+
+/* --- Poignee draggable entre carte et chatbot --- */
+.split-handle {
+  flex-shrink: 0;
+  height: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: row-resize;
+  background: transparent;
+  position: relative;
+  z-index: 10;
+  user-select: none;
+}
+
+.split-handle:hover {
+  background: rgba(180, 170, 160, 0.18);
+}
+
+.split-handle-grip {
+  display: block;
+  width: 32px;
+  height: 4px;
+  border-radius: 2px;
+  background: repeating-linear-gradient(
+    to bottom,
+    rgba(160, 150, 140, 0.55) 0px,
+    rgba(160, 150, 140, 0.55) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+}
+
+/* Masquer la poignee sur mobile (ratio fixe) */
+@media (max-width: 767px) {
+  .split-handle {
+    display: none;
+  }
+}
+
+/* --- Slot chatbot --- */
+.chatbot-slot {
+  overflow: hidden;
+  position: relative;
+  transition: opacity 0.2s ease;
+  border-top: 1px solid rgba(180, 170, 160, 0.28);
+}
+
+.chatbot-split {
+  flex: 0 0 34%;
+  min-height: 0;
+  opacity: 1;
+}
+
+.chatbot-full-mode {
+  flex: 1 1 100%;
+  min-height: 0;
+  opacity: 1;
+}
+
+.chatbot-hidden {
+  flex: 0 0 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+/* --- Transitions modal RAG info --- */
+.backdrop-enter-active,.backdrop-leave-active { transition: opacity 0.2s; }
+.backdrop-enter-from,.backdrop-leave-to { opacity: 0; }
+.modal-enter-active { transition: opacity 0.2s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
+.modal-leave-active { transition: opacity 0.18s, transform 0.18s ease-in; }
+.modal-enter-from { opacity: 0; transform: translate(-50%,-48%) scale(0.94); }
+.modal-leave-to { opacity: 0; transform: translate(-50%,-48%) scale(0.96); }
+
+/* --- Responsive mobile (<768px) --- */
+@media (max-width: 767px) {
+  .carte-split {
+    flex: 0 0 60vh;
+    height: 60vh;
+  }
+
+  .chatbot-split {
+    flex: 0 0 calc(40vh - 38px);
+    height: calc(40vh - 38px);
+  }
+
+  .toggle-btn span,
+  .toggle-btn {
+    font-size: 0.7rem;
+    padding: 3px 7px;
+  }
+}
+</style>
--- a/components/MissionPopup.vue
+++ b/components/MissionPopup.vue
@@ -0,0 +1,181 @@
+<template>
+  <Teleport to="body">
+    <Transition name="backdrop">
+      <div
+        v-if="modelValue"
+        class="fixed inset-0 z-[1500]"
+        style="background: rgba(26,34,56,0.55);"
+        @click="close"
+        aria-hidden="true"
+      />
+    </Transition>
+
+    <Transition name="modal">
+      <div
+        v-if="modelValue"
+        class="mission-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="mission-title"
+        @keydown.esc="close"
+      >
+        <button
+          class="mission-close"
+          type="button"
+          @click="close"
+          aria-label="Fermer"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+
+        <div class="mission-body">
+          <h2 id="mission-title" class="mission-title">{{ title }}</h2>
+          <slot>
+            <p class="mission-text">
+              L'architecture est l'une des professions les plus complexes qui soit ; elle croise droit, technique, esthétique, économie, social, écologie — tout à la fois, tout simultanément, souvent sans filet. Paradoxalement, c'est aussi l'une des moins structurées sur le plan de l'entraide&nbsp;: peu de transmission horizontale, beaucoup d'isolement, une culture du chacun-pour-soi héritée d'une formation qui prépare à la compétition plus qu'à la coopération. On sort de l'école seul·e. On s'installe seul·e. On réinvente ce que d'autres ont déjà traversé.
+            </p>
+            <p class="mission-text">
+              Cette carte est née de cette frustration — et de cette conviction&nbsp;: les ressources existent, les gens qui ont réussi à sortir la tête de l'eau aussi. L'enjeu, c'est de les documenter, de les rendre accessibles, de les ajuster en temps réel grâce aux retours de la communauté. Pas un catalogue figé&nbsp;; un commun vivant, au service de ceux et celles qui cherchent à faire évoluer leur pratique vers quelque chose de plus épanouissant, mieux rémunéré, au service de la société — et qui prend soin de la santé, la nôtre et celle des gens pour qui nous construisons.
+            </p>
+          </slot>
+
+          <div class="mission-cta-wrap">
+            <button class="btn-explorer" type="button" @click="close">{{ ctaLabel }}</button>
+            <NuxtLink to="/manifeste" class="link-manifeste" @click="close">Lire le manifeste →</NuxtLink>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  modelValue: boolean
+  title?: string
+  ctaLabel?: string
+  storageKey?: string
+}>(), {
+  title: "L'écosystème d'entraide architecte",
+  ctaLabel: 'Explorer la carte',
+  storageKey: 'aep_mission_seen',
+})
+
+const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
+
+function close() {
+  emit('update:modelValue', false)
+  if (typeof window !== 'undefined') {
+    try { localStorage.setItem(props.storageKey, '1') } catch {}
+  }
+}
+</script>
+
+<style scoped>
+.mission-modal {
+  position: fixed;
+  z-index: 1501;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(560px, 92vw);
+  max-height: calc(100dvh - 80px);
+  background: var(--nav-bg);
+  border-radius: 16px;
+  box-shadow: 0 16px 64px rgba(26,34,56,0.28);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.mission-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: none;
+  background: var(--nav-bg-alt);
+  color: var(--nav-text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s;
+  z-index: 1;
+}
+.mission-close:hover { background: var(--nav-surface); }
+
+.mission-body {
+  padding: 1.75rem 1.5rem 1.5rem;
+  overflow-y: auto;
+}
+
+.mission-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  margin: 0 0 1rem;
+  line-height: 1.25;
+  padding-right: 2rem;
+}
+
+.mission-text,
+:slotted(.mission-text) {
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--nav-text);
+  margin: 0 0 1rem;
+}
+:slotted(.mission-text strong) { font-weight: 700; }
+:slotted(.mission-text a) { color: var(--nav-primary-solid); text-decoration: underline; }
+
+.mission-cta-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.btn-explorer {
+  padding: 0.65rem 1.25rem;
+  background: var(--nav-primary);
+  color: var(--nav-text-on-primary);
+  border: none;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.btn-explorer:hover { opacity: 0.88; }
+
+.link-manifeste {
+  font-size: 0.875rem;
+  color: var(--nav-primary-solid);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.link-manifeste:hover { opacity: 0.75; }
+
+.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
+.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
+
+.modal-enter-active, .modal-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
+.modal-enter-from, .modal-leave-to { opacity: 0; transform: translate(-50%, -48%); }
+
+@media (max-width: 480px) {
+  .mission-body { padding: 1.5rem 1.1rem 1.25rem; }
+  .mission-title { font-size: 1.1rem; }
+  .mission-text { font-size: 0.9rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-enter-active, .modal-leave-active { transition: none; }
+  .backdrop-enter-active, .backdrop-leave-active { transition: none; }
+}
+</style>
--- a/components/NavMapV2.vue
+++ b/components/NavMapV2.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="relative w-full h-full">
+    <div ref="mapContainer" class="w-full h-full rounded-none" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Map, Marker, DivIcon } from 'leaflet'
+import type { StructureV2 } from '~/types/structure-v2'
+
+// Couleurs par famille (synchronisées avec v2-bifurcation.css)
+const FAMILLE_COLORS: Record<number, string> = {
+  1: '#a85d3e',
+  2: '#c4a472',
+  3: '#d4a017',
+  4: '#5a7a4a',
+  5: '#3d6a8c',
+}
+
+const props = defineProps<{
+  structures: StructureV2[]
+  selectedId?: string | null
+}>()
+
+const emit = defineEmits<{
+  'select-structure': [id: string]
+}>()
+
+const mapContainer = ref<HTMLElement | null>(null)
+let mapInstance: Map | null = null
+let clusterGroup: any = null
+const markers = new Map<string, Marker>()
+let tileLayerInstance: any = null
+
+function getFamilleColor(famille: number): string {
+  return FAMILLE_COLORS[famille] ?? '#888888'
+}
+
+function createPinIcon(famille: number, isSelected = false): DivIcon {
+  const L = (window as any).L
+  const bg = getFamilleColor(famille)
+  const size = isSelected ? 20 : 14
+  const border = isSelected ? 'white' : 'rgba(255,255,255,0.7)'
+  const shadow = isSelected ? `0 0 0 4px ${bg}55` : 'none'
+
+  return L.divIcon({
+    className: '',
+    html: `<div style="
+      width: ${size}px;
+      height: ${size}px;
+      border-radius: 50%;
+      background: ${bg};
+      border: 2px solid ${border};
+      box-shadow: ${shadow};
+      transition: all 0.2s;
+    "></div>`,
+    iconSize: [size, size],
+    iconAnchor: [size / 2, size / 2],
+    popupAnchor: [0, -(size / 2 + 4)],
+  })
+}
+
+async function initMap() {
+  if (!mapContainer.value) return
+
+  const Lmod = await import('leaflet')
+  const L: any = (Lmod as any).default || Lmod
+  await import('leaflet/dist/leaflet.css')
+  // @ts-ignore
+  await import('leaflet.markercluster/dist/MarkerCluster.css')
+  // @ts-ignore
+  await import('leaflet.markercluster/dist/MarkerCluster.Default.css')
+
+  // Installer L globalement AVANT le plugin
+  ;(window as any).L = L
+  // @ts-ignore
+  await import('leaflet.markercluster')
+  const MarkerClusterGroup = L.MarkerClusterGroup
+
+  mapInstance = L.map(mapContainer.value, {
+    center: [46.6, 2.3],
+    zoom: 5,
+    zoomControl: true,
+    attributionControl: true,
+    minZoom: 2,
+    maxZoom: 18,
+  })
+
+  const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+  const tileUrl = isDark
+    ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
+    : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
+
+  tileLayerInstance = L.tileLayer(tileUrl, {
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
+    maxZoom: 19,
+  })
+  tileLayerInstance.addTo(mapInstance!)
+
+  clusterGroup = new MarkerClusterGroup({
+    disableClusteringAtZoom: 14,
+    maxClusterRadius: 50,
+    showCoverageOnHover: false,
+    iconCreateFunction: (cluster: any) => {
+      const count = cluster.getChildCount()
+      return L.divIcon({
+        html: `<div style="
+          width: 36px; height: 36px; border-radius: 50%;
+          background: var(--nav-primary);
+          color: var(--nav-text-on-primary);
+          display: flex; align-items: center; justify-content: center;
+          font-weight: 700; font-size: 13px;
+          border: 2px solid white;
+          font-family: var(--nav-font);
+        ">${count}</div>`,
+        className: '',
+        iconSize: [36, 36],
+        iconAnchor: [18, 18],
+      })
+    },
+  })
+
+  mapInstance.addLayer(clusterGroup)
+  updateMarkers(L)
+}
+
+function updateMarkers(L?: any) {
+  if (!mapInstance || !clusterGroup) return
+  const leaflet = L || (window as any).L
+  if (!leaflet) return
+
+  clusterGroup.clearLayers()
+  markers.clear()
+
+  const structuresWithCoords = props.structures.filter(
+    (s) => s.latitude != null && s.longitude != null
+  )
+
+  structuresWithCoords.forEach((structure) => {
+    const isSelected = structure.id === props.selectedId
+    const icon = createPinIcon(structure.famille_principale, isSelected)
+
+    const marker = leaflet.marker([structure.latitude!, structure.longitude!], { icon })
+
+    const hashtagsHtml = structure.hashtags.slice(0, 2)
+      .map(h => `<span style="font-size:10px;color:var(--nav-text-muted);">${h}</span>`)
+      .join(' ')
+
+    marker.bindPopup(`
+      <div style="font-family: var(--nav-font); min-width: 190px; padding: 4px 0;">
+        <div style="font-weight: 700; color: var(--nav-text); margin-bottom: 2px; font-size: 0.9rem;">${structure.nom}</div>
+        <div style="font-size: 11px; color: var(--nav-text-muted); margin-bottom: 4px;">${structure.type_principal} · ${structure.ville}, ${structure.pays}</div>
+        ${hashtagsHtml ? `<div style="margin-bottom: 6px;">${hashtagsHtml}</div>` : ''}
+        <div style="font-size: 11px; color: var(--nav-text); line-height: 1.4; margin-bottom: 8px;">${structure.description_courte.slice(0, 100)}…</div>
+        <button onclick="document.dispatchEvent(new CustomEvent('nav-v2-select', {detail:'${structure.id}'}))" style="
+          font-size: 12px;
+          color: var(--nav-primary-solid);
+          text-decoration: underline;
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: 0;
+          font-family: var(--nav-font);
+        ">Voir la fiche →</button>
+      </div>
+    `, { maxWidth: 260 })
+
+    marker.on('click', () => emit('select-structure', structure.id))
+
+    markers.set(structure.id, marker)
+    clusterGroup.addLayer(marker)
+  })
+}
+
+// Ecouter l'event custom depuis les popups Leaflet
+function onNavV2Select(e: CustomEvent) {
+  emit('select-structure', e.detail)
+}
+
+watch(
+  () => props.structures,
+  () => updateMarkers(),
+  { deep: false }
+)
+
+watch(
+  () => props.selectedId,
+  (newId, oldId) => {
+    if (!mapInstance) return
+    const leaflet = (window as any).L
+    if (!leaflet) return
+
+    if (oldId != null) {
+      const oldMarker = markers.get(oldId)
+      const oldStructure = props.structures.find(s => s.id === oldId)
+      if (oldMarker && oldStructure) {
+        oldMarker.setIcon(createPinIcon(oldStructure.famille_principale, false))
+      }
+    }
+    if (newId != null) {
+      const newMarker = markers.get(newId)
+      const newStructure = props.structures.find(s => s.id === newId)
+      if (newMarker && newStructure) {
+        newMarker.setIcon(createPinIcon(newStructure.famille_principale, true))
+        const latLng = newMarker.getLatLng()
+        mapInstance.panTo(latLng, { animate: true })
+      }
+    }
+  }
+)
+
+function updateTileTheme(dark: boolean) {
+  if (!mapInstance || !tileLayerInstance) return
+  const L = (window as any).L
+  if (!L) return
+  const url = dark
+    ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
+    : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
+  tileLayerInstance.setUrl(url)
+}
+
+let themeObserver: MutationObserver | null = null
+
+onMounted(() => {
+  initMap()
+  document.addEventListener('nav-v2-select', onNavV2Select as EventListener)
+
+  themeObserver = new MutationObserver(() => {
+    const dark = document.documentElement.classList.contains('dark')
+    updateTileTheme(dark)
+  })
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+})
+
+onUnmounted(() => {
+  document.removeEventListener('nav-v2-select', onNavV2Select as EventListener)
+  themeObserver?.disconnect()
+  if (mapInstance) {
+    mapInstance.remove()
+    mapInstance = null
+  }
+})
+</script>
--- a/components/OutilCard.vue
+++ b/components/OutilCard.vue
@@ -0,0 +1,150 @@
+<template>
+  <component
+    :is="url ? 'a' : 'div'"
+    v-bind="url ? { href: url, target: '_blank', rel: 'noopener noreferrer' } : {}"
+    class="outil-card"
+    :class="{ 'outil-card--link': !!url, 'outil-card--disabled': !url }"
+  >
+    <div class="outil-card__header">
+      <span class="outil-card__icon" aria-hidden="true">{{ icon }}</span>
+      <span :class="['outil-card__badge', `outil-card__badge--${tag}`]">{{ tagLabel }}</span>
+    </div>
+    <h3 class="outil-card__titre">{{ titre }}</h3>
+    <p class="outil-card__desc">{{ description }}</p>
+    <span v-if="cta && url" class="outil-card__cta">{{ cta }}</span>
+    <span v-else-if="!url" class="outil-card__cta outil-card__cta--disabled">Bientôt disponible</span>
+  </component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  icon?: string
+  titre: string
+  url?: string | null
+  description?: string
+  cta?: string
+  tag?: string
+}>()
+
+const tagLabels: Record<string, string> = {
+  'outil-aep': 'Outil AEP',
+  'inspiration-externe': 'Inspiration',
+  'disponible': 'Disponible',
+  'recommande': 'Recommandé',
+  'a-venir': 'À venir',
+}
+
+const tagLabel = computed(() => props.tag ? (tagLabels[props.tag] ?? props.tag) : '')
+</script>
+
+<style scoped>
+.outil-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem 1.25rem;
+  border-radius: 10px;
+  border: 1px solid var(--nav-bg-alt);
+  background: var(--nav-surface);
+  text-decoration: none;
+  color: var(--nav-text);
+  transition: box-shadow 0.15s, border-color 0.15s;
+}
+
+.outil-card--link:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border-color: var(--nav-primary-solid);
+}
+
+.outil-card--disabled {
+  opacity: 0.65;
+}
+
+.outil-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.outil-card__icon {
+  font-size: 1.3rem;
+  line-height: 1;
+}
+
+.outil-card__badge {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 7px;
+  border-radius: 999px;
+}
+
+.outil-card__badge--outil-aep {
+  background: #d1fae5;
+  color: #065f46;
+}
+.outil-card__badge--inspiration-externe {
+  background: #fef3c7;
+  color: #92400e;
+}
+.outil-card__badge--disponible {
+  background: #d1fae5;
+  color: #065f46;
+}
+.outil-card__badge--recommande {
+  background: #dbeafe;
+  color: #1e40af;
+}
+.outil-card__badge--a-venir {
+  background: var(--nav-bg-alt);
+  color: var(--nav-text-muted);
+}
+
+.outil-card__titre {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--nav-text);
+  margin: 0;
+  line-height: 1.35;
+}
+
+.outil-card__desc {
+  font-size: 0.82rem;
+  color: var(--nav-text-muted);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.outil-card__cta {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--nav-primary-solid);
+  margin-top: 0.25rem;
+}
+
+.outil-card__cta--disabled {
+  color: var(--nav-text-muted);
+  font-weight: 400;
+  font-style: italic;
+}
+
+/* Dark mode badge overrides */
+:global(.dark) .outil-card__badge--outil-aep {
+  background: #064e3b;
+  color: #a7f3d0;
+}
+:global(.dark) .outil-card__badge--inspiration-externe {
+  background: #78350f;
+  color: #fde68a;
+}
+:global(.dark) .outil-card__badge--disponible {
+  background: #064e3b;
+  color: #a7f3d0;
+}
+:global(.dark) .outil-card__badge--recommande {
+  background: #1e3a5f;
+  color: #93c5fd;
+}
+</style>
--- a/components/SimulateurFeature.vue
+++ b/components/SimulateurFeature.vue
@@ -0,0 +1,156 @@
+<template>
+  <component
+    :is="url ? 'a' : 'div'"
+    v-bind="url ? { href: url, target: '_blank', rel: 'noopener noreferrer' } : {}"
+    class="simu-feature"
+    :class="{ 'simu-feature--link': !!url }"
+  >
+    <div class="simu-feature__inner">
+      <div class="simu-feature__left">
+        <span class="simu-feature__icon" aria-hidden="true">{{ icon }}</span>
+        <div class="simu-feature__body">
+          <div class="simu-feature__header">
+            <h3 class="simu-feature__titre">{{ titre }}</h3>
+            <span v-if="tag" :class="['simu-feature__badge', `simu-feature__badge--${tag}`]">{{ tagLabel }}</span>
+          </div>
+          <p class="simu-feature__desc">{{ description }}</p>
+        </div>
+      </div>
+      <span v-if="cta && url" class="simu-feature__cta">{{ cta }}</span>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  icon?: string
+  titre: string
+  url?: string | null
+  description?: string
+  cta?: string
+  tag?: string
+}>()
+
+const tagLabels: Record<string, string> = {
+  'outil-aep': 'Outil AEP',
+  'inspiration-externe': 'Inspiration externe',
+  'disponible': 'Disponible',
+  'recommande': 'Recommandé',
+  'a-venir': 'À venir',
+}
+
+const tagLabel = computed(() => props.tag ? (tagLabels[props.tag] ?? props.tag) : '')
+</script>
+
+<style scoped>
+.simu-feature {
+  display: block;
+  padding: 1.5rem 1.75rem;
+  border-radius: 14px;
+  border: 1.5px solid var(--nav-bg-alt);
+  background: var(--nav-surface);
+  text-decoration: none;
+  color: var(--nav-text);
+  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
+}
+
+.simu-feature--link:hover {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  border-color: var(--nav-primary-solid);
+  transform: translateY(-2px);
+}
+
+.simu-feature__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.simu-feature__left {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.simu-feature__icon {
+  font-size: 2rem;
+  line-height: 1;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.simu-feature__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.simu-feature__header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.4rem;
+}
+
+.simu-feature__titre {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.simu-feature__badge {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.simu-feature__badge--inspiration-externe {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.simu-feature__desc {
+  font-size: 0.88rem;
+  color: var(--nav-text-muted);
+  margin: 0;
+  line-height: 1.55;
+}
+
+.simu-feature__cta {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.6rem 1.25rem;
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+}
+
+.simu-feature--link:hover .simu-feature__cta {
+  opacity: 0.88;
+}
+
+:global(.dark) .simu-feature__badge {
+  background: #064e3b;
+  color: #a7f3d0;
+}
+:global(.dark) .simu-feature__badge--inspiration-externe {
+  background: #78350f;
+  color: #fde68a;
+}
+</style>
--- a/components/TreeASCII.vue
+++ b/components/TreeASCII.vue
@@ -0,0 +1,201 @@
+<template>
+  <ul class="tree-ascii" :class="{ 'tree-ascii--root': depth === 0 }" :style="{ '--depth': depth }">
+    <li
+      v-for="(node, i) in tree.children"
+      :key="i"
+      class="tree-ascii__node"
+    >
+      <!-- Nœud avec enfants : bouton toggle -->
+      <template v-if="node.children && node.children.length">
+        <button
+          class="tree-ascii__branch"
+          :aria-expanded="!!open[i]"
+          @click="toggle(i)"
+        >
+          <span class="tree-ascii__chevron" aria-hidden="true">{{ open[i] ? '▼' : '▶' }}</span>
+          <span class="tree-ascii__label">{{ node.name }}</span>
+          <span class="tree-ascii__count">({{ node.children.length }})</span>
+        </button>
+        <TreeASCII
+          v-if="open[i]"
+          :tree="node"
+          :depth="depth + 1"
+        />
+      </template>
+
+      <!-- Feuille avec URL : lien cliquable -->
+      <template v-else-if="node.url">
+        <a
+          :href="node.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="tree-ascii__leaf tree-ascii__leaf--link"
+        >
+          <span class="tree-ascii__prefix" aria-hidden="true">└─</span>
+          <span class="tree-ascii__label">{{ node.name }}</span>
+          <span v-if="node.desc" class="tree-ascii__desc"> — {{ node.desc }}</span>
+          <svg class="tree-ascii__ext" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+            <polyline points="15 3 21 3 21 9"/>
+            <line x1="10" y1="14" x2="21" y2="3"/>
+          </svg>
+        </a>
+      </template>
+
+      <!-- Feuille sans URL -->
+      <template v-else>
+        <span class="tree-ascii__leaf">
+          <span class="tree-ascii__prefix" aria-hidden="true">└─</span>
+          <span class="tree-ascii__label">{{ node.name }}</span>
+          <span v-if="node.desc" class="tree-ascii__desc"> — {{ node.desc }}</span>
+        </span>
+      </template>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+export interface TreeNode {
+  name: string
+  url?: string
+  desc?: string
+  children?: TreeNode[]
+}
+
+export interface TreeData {
+  name?: string
+  children?: TreeNode[]
+}
+
+const props = withDefaults(defineProps<{
+  tree: TreeData
+  depth?: number
+}>(), {
+  depth: 0
+})
+
+// Toutes les branches fermées par défaut
+const open = ref<Record<number, boolean>>({})
+
+function toggle(i: number) {
+  open.value[i] = !open.value[i]
+}
+</script>
+
+<style scoped>
+.tree-ascii {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+  font-size: 0.82rem;
+  padding-left: calc(var(--depth, 0) * 1.25rem + 0.5rem);
+}
+
+.tree-ascii--root {
+  padding-left: 0;
+}
+
+.tree-ascii__node {
+  margin: 2px 0;
+  line-height: 1.6;
+}
+
+/* Bouton branche (nœud avec enfants) */
+.tree-ascii__branch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: var(--nav-text);
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 600;
+  transition: background 0.1s, color 0.1s;
+  text-align: left;
+}
+
+.tree-ascii__branch:hover {
+  background: var(--nav-bg-alt);
+  color: var(--nav-primary-solid);
+}
+
+.tree-ascii__chevron {
+  font-size: 0.65rem;
+  color: var(--nav-text-muted);
+  width: 12px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.tree-ascii__count {
+  font-size: 0.7rem;
+  color: var(--nav-text-muted);
+  font-weight: 400;
+}
+
+/* Feuille */
+.tree-ascii__leaf {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  padding: 1px 6px;
+  border-radius: 4px;
+  text-decoration: none;
+  color: var(--nav-text-muted);
+}
+
+.tree-ascii__leaf--link {
+  color: var(--nav-text);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+
+.tree-ascii__leaf--link:hover {
+  background: var(--nav-bg-alt);
+  color: var(--nav-primary-solid);
+  text-decoration: underline;
+}
+
+.tree-ascii__prefix {
+  color: var(--nav-text-muted);
+  opacity: 0.5;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+.tree-ascii__label {
+  font-weight: 500;
+}
+
+.tree-ascii__leaf--link .tree-ascii__label {
+  font-weight: 400;
+}
+
+.tree-ascii__desc {
+  color: var(--nav-text-muted);
+  font-size: 0.78rem;
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 60ch;
+}
+
+.tree-ascii__ext {
+  opacity: 0.4;
+  flex-shrink: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+}
+
+@media (max-width: 640px) {
+  .tree-ascii__desc {
+    display: none;
+  }
+}
+</style>
--- a/composables/useMarkdown.ts
+++ b/composables/useMarkdown.ts
@@ -0,0 +1,36 @@
+/**
+ * Convertit du Markdown Mistral en HTML avec inline styles.
+ * Inline styles = zéro dépendance CSS, fonctionne dans tout contexte Vue (scoped, v-html, etc.)
+ */
+export function useMarkdown() {
+  const S = {
+    p:      'style="margin:0 0 0.45em;line-height:1.6;"',
+    strong: 'style="font-weight:700;"',
+    em:     'style="font-style:italic;"',
+    h2:     'style="font-weight:700;display:block;margin-bottom:0.2em;"',
+    h3:     'style="font-weight:700;display:block;font-size:0.95em;margin-bottom:0.15em;"',
+    ul:     'style="margin:0.3em 0 0.3em 1.2em;padding:0;list-style:disc;"',
+    li:     'style="margin-bottom:0.15em;"',
+    a:      'style="text-decoration:underline;opacity:0.85;"',
+  }
+
+  function render(text: string): string {
+    if (!text) return ''
+    let html = text
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      .replace(/^### (.+)$/gm, `<strong ${S.h3}>$1</strong>`)
+      .replace(/^## (.+)$/gm,  `<strong ${S.h2}>$1</strong>`)
+      .replace(/^# (.+)$/gm,   `<strong ${S.h2}>$1</strong>`)
+      .replace(/\*\*(.+?)\*\*/g, `<strong ${S.strong}>$1</strong>`)
+      .replace(/\*(.+?)\*/g,     `<em ${S.em}>$1</em>`)
+      .replace(/^[-•]\s+(.+)$/gm, `<li ${S.li}>$1</li>`)
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, `<a href="$2" target="_blank" rel="noopener" ${S.a}>$1</a>`)
+
+    html = html.replace(/(<li[^>]*>.*<\/li>\n?)+/g, m => `<ul ${S.ul}>${m}</ul>`)
+    html = html.replace(/\n{2,}/g, `</p><p ${S.p}>`)
+    html = html.replace(/\n/g, '<br>')
+    return `<p ${S.p}>${html}</p>`
+  }
+
+  return { render }
+}
--- a/pages/a-propos.vue
+++ b/pages/a-propos.vue
@@ -8,16 +8,12 @@
      </NuxtLink>

      <!-- ══════════════════════════════════════════════════════════
-           SECTION 1 - Mission AEP
+           SECTION INTRO - À propos d'AEP
      ══════════════════════════════════════════════════════════ -->
-      <!-- TODO Jules : Écrire le pitch (~100 mots) - qui est AEP, pour qui, pourquoi, quelle promesse -->
      <section class="section-mission">
-        <h1>Architecture d'Écologie Politique</h1>
+        <h1>À propos d'AEP</h1>
        <p class="mission-text">
-          L'architecture est l'une des professions les plus complexes qui soit ; elle croise droit, technique, esthétique, économie, social, écologie - tout à la fois, tout simultanément, souvent sans filet. Paradoxalement, c'est aussi l'une des moins structurées sur le plan de l'entraide : peu de transmission horizontale, beaucoup d'isolement, une culture du chacun-pour-soi héritée d'une formation qui prépare à la compétition plus qu'à la coopération. On sort de l'école seul.e. On s'installe seul.e. On réinvente ce que d'autres ont déjà traversé.
-        </p>
-        <p class="mission-text">
-          Cette carte est née de cette frustration - et de cette conviction : les ressources existent, les gens qui ont réussi à sortir la tête de l'eau aussi. L'enjeu, c'est de les documenter, de les rendre accessibles, de les ajuster en temps réel grâce aux retours de la communauté. Pas un catalogue figé ; un commun vivant, au service de ceux et celles qui cherchent à faire évoluer leur pratique vers quelque chose de plus épanouissant, mieux rémunéré, au service de la société - et qui prend soin de la santé, la nôtre et celle des gens pour qui nous construisons.
+          AEP — Architecture d'Écologie Politique — est un commun vivant : une infrastructure d'entraide, de ressources documentées et de cartographies au service d'une profession en mutation. Ce site rassemble trois cartes (entraide, réseaux engagés, plateformes de mise en relation), un manifeste, une transparence radicale sur l'IA et le financement, et une gouvernance partagée.
        </p>
      </section>

@@ -209,11 +205,14 @@ useHead({ title: 'À propos - AEP' })
  min-height: 100vh;
  background: var(--nav-bg);
  padding: 1.5rem 1rem 5rem;
+  overflow-x: hidden;
+  width: 100%;
 }

 .apropos-inner {
  max-width: 720px;
  margin: 0 auto;
+  width: 100%;
 }

 /* ── Retour ──────────────────────────────────────────────────────────────────── */
@@ -322,13 +321,16 @@ useHead({ title: 'À propos - AEP' })
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nav-text);
-  white-space: nowrap;
 }

 .badge-detail {
  font-size: 0.775rem;
  color: var(--nav-text-muted);
-  white-space: nowrap;
+  line-height: 1.4;
+}
+
+@media (min-width: 560px) {
+  .badge-label { white-space: nowrap; }
 }

@media (max-width: 559px) {
--- a/pages/agences.vue
+++ b/pages/agences.vue
@@ -196,7 +196,7 @@
        </div>
      </div>

-      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer + sheet swipable ── -->
+      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer/Graphique + 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"
@@ -212,6 +212,13 @@
            : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
          @click="mobileMapView = 'outremer'"
        >Outre-mer</button>
+        <button
+          class="flex-1 py-2 text-sm font-medium transition-colors"
+          :style="mobileMapView === 'graphe'
+            ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
+            : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
+          @click="mobileMapView = 'graphe'"
+        >Graphe</button>
      </div>

      <div class="lg:hidden flex-1 relative overflow-hidden">
@@ -248,8 +255,25 @@
          </ClientOnly>
        </div>

-        <!-- Bottom sheet swipable -->
+        <!-- Vue graphique mobile -->
+        <div v-show="mobileMapView === 'graphe'" class="absolute inset-0 overflow-hidden" style="background: var(--nav-bg);">
          <ClientOnly>
+            <GraphView
+              :data="bifurcationData"
+              :allHashtags="allHashtags"
+              :active="mobileMapView === 'graphe'"
+              @select-structure="onSelectStructureMobile"
+            />
+            <template #fallback>
+              <div class="flex items-center justify-center h-48" style="color: var(--nav-text-muted);">
+                Chargement du graphe…
+              </div>
+            </template>
+          </ClientOnly>
+        </div>
+
+        <!-- Bottom sheet swipable (masqué en vue graphique pour ne pas occulter le canvas) -->
+        <ClientOnly v-if="mobileMapView !== 'graphe'">
          <MobileSheet :resultCount="filtered.length" :pending="pending">
            <!-- 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);">
@@ -374,12 +398,41 @@
    </button>

    <!-- ═══════════════════════════════════════ CHATBOT BOTTOM SHEET (mobile) -->
-    <ChatbotSheet
+    <ChatbotReseaux
      :modelValue="chatbotOpen"
      @update:modelValue="chatbotOpen = $event"
-      @highlightOrgs="() => {}"
    />

+    <!-- ═══════════════════════════════════════ POP-UP MISSION RÉSEAUX AEP -->
+    <button
+      class="reseaux-info-btn"
+      type="button"
+      @click="missionOpen = true"
+      aria-label="À propos des réseaux AEP cartographiés"
+      title="À propos de cette carte"
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="10"/>
+        <line x1="12" y1="16" x2="12" y2="12"/>
+        <line x1="12" y1="8" x2="12.01" y2="8"/>
+      </svg>
+    </button>
+
+    <MissionPopup
+      :modelValue="missionOpen"
+      @update:modelValue="missionOpen = $event"
+      title="Réseaux AEP — l'architecture qui s'engage"
+      ctaLabel="Explorer les 120 réseaux"
+      storageKey="aep_reseaux_seen"
+    >
+      <p class="mission-text">
+        Cette carte rassemble <strong>120 réseaux, collectifs et agences</strong> qui pratiquent une architecture engagée — écologique, politique, biorégionale. Ce ne sont pas seulement des agences «&nbsp;vertes&nbsp;»&nbsp;: ce sont celles et ceux qui assument des positions, refusent des projets, expérimentent des modèles de gouvernance, mettent leurs ressources et leurs savoirs en commun.
+      </p>
+      <p class="mission-text">
+        Six familles structurent la cartographie&nbsp;: militants, agences engagées, collectifs de production, ressources communes, recherche, formations alternatives. Filtre par hashtag, ouvre la fiche d'une structure, navigue le graphe (3<sup>e</sup> onglet) pour voir les affinités. Si tu animes ou connais un réseau qui devrait y être&nbsp;: <NuxtLink to="/contribuer" @click.stop>propose-le</NuxtLink>.
+      </p>
+    </MissionPopup>
+
  </div>
 </template>

@@ -406,8 +459,17 @@ 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 mobileMapView = ref<'metropole' | 'outremer' | 'graphe'>('metropole')
 const desktopMapView = ref<'metropole' | 'outremer' | 'graphe'>('metropole')
+const missionOpen = ref(false)
+
+onMounted(() => {
+  try {
+    if (!localStorage.getItem('aep_reseaux_seen')) {
+      missionOpen.value = true
+    }
+  } catch {}
+})

 // Filtres
 const search = ref('')
@@ -515,3 +577,29 @@ function onSelectStructureMobile(id: string) {

 useHead({ title: "AEP - Réseaux de bifurcation architecturale" })
 </script>
+
+<style scoped>
+.reseaux-info-btn {
+  position: fixed;
+  bottom: 24px;
+  left: 16px;
+  z-index: 1000;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: var(--nav-surface);
+  color: var(--nav-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 12px rgba(26,34,56,0.18);
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.1s;
+}
+.reseaux-info-btn:hover { opacity: 0.85; transform: translateY(-1px); color: var(--nav-text); }
+
+@media (min-width: 1024px) {
+  .reseaux-info-btn { bottom: 16px; left: 340px; }
+}
+</style>
--- a/pages/codev/demo.vue
+++ b/pages/codev/demo.vue
@@ -266,6 +266,29 @@ function setMode(newMode: typeof mode.value) {
  border-radius: 12px;
 }

+/* ── Tabs ── */
+
+.codev-tabs { display: flex; gap: 4px; background: #f3f4f6; border-radius: 10px; padding: 4px; }
+.codev-tabs button { flex: 1; padding: 8px 4px; border: none; border-radius: 7px; background: transparent; font-size: 0.875rem; font-weight: 500; cursor: pointer; color: #6b7280; transition: all 0.15s; }
+.codev-tabs button.active { background: white; color: #1a1a2e; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+
+/* ── Annuaire ── */
+
+.annuaire-wrap { display: flex; flex-direction: column; gap: 8px; flex: 1; }
+.annuaire-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e5e7eb; border-radius: 10px; }
+.annuaire-table { width: 100%; border-collapse: collapse; min-width: 480px; }
+.annuaire-table thead tr { background: #f9fafb; border-bottom: 2px solid #e5e7eb; }
+.annuaire-table th { padding: 10px 14px; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; white-space: nowrap; }
+.annuaire-table td { padding: 12px 14px; font-size: 0.875rem; color: #374151; vertical-align: top; border-bottom: 1px solid #f3f4f6; line-height: 1.5; }
+.annuaire-row { transition: background 0.12s; }
+.annuaire-row:hover { background: #f9fafb; }
+.annuaire-row:last-child td { border-bottom: none; }
+.col-nom { position: sticky; left: 0; z-index: 2; background: #ffffff; font-weight: 600; color: #1a1a2e !important; white-space: nowrap; min-width: 80px; border-right: 2px solid #e5e7eb; box-shadow: 2px 0 6px rgba(0,0,0,0.06); }
+.annuaire-row:hover .col-nom { background: #f9fafb; }
+thead tr .col-nom { background: #f9fafb; z-index: 3; }
+.col-besoin { min-width: 200px; max-width: 260px; }
+.col-offre  { min-width: 200px; max-width: 260px; }
+
 /* ── Bandeau mode actif ── */

 .mode-banner {
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -312,6 +312,26 @@
      @highlightOrgs="onHighlightOrgs"
    />

+    <!-- ═══════════════════════════════════════ POP-UP MISSION ENTRAIDE -->
+    <button
+      class="mission-info-btn"
+      type="button"
+      @click="missionOpen = true"
+      aria-label="À propos de cette carte d'entraide"
+      title="À propos de cette carte"
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="10"/>
+        <line x1="12" y1="16" x2="12" y2="12"/>
+        <line x1="12" y1="8" x2="12.01" y2="8"/>
+      </svg>
+    </button>
+
+    <MissionPopup
+      :modelValue="missionOpen"
+      @update:modelValue="missionOpen = $event"
+    />
+
  </div>
 </template>

@@ -344,6 +364,15 @@ const chatbotOpen = ref(false)
 const ficheModalOpen = ref(false)
 const ficheModalId = ref<number | null>(null)
 const mobileMapView = ref<'metropole' | 'outremer'>('metropole')
+const missionOpen = ref(false)
+
+onMounted(() => {
+  try {
+    if (!localStorage.getItem('aep_mission_seen')) {
+      missionOpen.value = true
+    }
+  } catch {}
+})
 // 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
@@ -575,3 +604,29 @@ function fonctionsList(org: Org): string[] {

 useHead({ title: 'AEP — Cartographie de l\'écologie politique architecturale' })
 </script>
+
+<style scoped>
+.mission-info-btn {
+  position: fixed;
+  bottom: 24px;
+  left: 16px;
+  z-index: 1000;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: var(--nav-surface);
+  color: var(--nav-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 12px rgba(26,34,56,0.18);
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.1s;
+}
+.mission-info-btn:hover { opacity: 0.85; transform: translateY(-1px); color: var(--nav-text); }
+
+@media (min-width: 1024px) {
+  .mission-info-btn { bottom: 16px; left: 340px; }
+}
+</style>
--- a/pages/manifeste.vue
+++ b/pages/manifeste.vue
@@ -0,0 +1,239 @@
+<template>
+  <div class="manifeste-page">
+    <div class="manifeste-inner">
+
+      <NuxtLink to="/" class="back-link">← Retour à la carte</NuxtLink>
+
+      <h1 class="manifeste-title">Manifeste — Architecture d'Écologie Politique</h1>
+
+      <p class="lede">
+        <em>Un quart des architectes vivent sous le seuil de pauvreté. La moitié de nos heures, non facturées. Nos cotisations, parmi les plus lourdes des professions réglementées. Et le secteur du bâtiment, à lui seul, pèse 34&nbsp;% des émissions mondiales de gaz à effet de serre.</em>
+      </p>
+
+      <p>
+        Quelque chose s'est rompu — pas dans nos vies, dans les cadres qui les contiennent.
+      </p>
+
+      <p>
+        Notre profession ne traverse pas une simple crise. Elle reflète l'effondrement d'un monde qui confond performance et destruction, signature et silence, expertise et soumission.
+      </p>
+
+      <hr />
+
+      <h2>Ce que nous voyons.</h2>
+
+      <p>
+        À l'échelle du métier, une profession structurellement sous l'eau, qui absorbe les tensions d'un système extractiviste — et porte la responsabilité quand d'autres captent la valeur.
+      </p>
+
+      <p>
+        À l'échelle des corps, une culture qui rend l'exploitation désirable&nbsp;: métier-passion, modèle starchitecte, isolement libéral, moteur critique délégitimant. Nous tenons. Nous payons.
+      </p>
+
+      <p>
+        À l'échelle du monde, l'effondrement écologique et social qui avance, pendant que notre voix s'efface du débat public. Notre silence le sert.
+      </p>
+
+      <hr />
+
+      <h2>Ce que nous refusons.</h2>
+
+      <p class="refus">
+        Nous ne signerons plus pour des projets qui détruisent.<br />
+        Nous n'isolerons plus celles et ceux qui doutent.<br />
+        Nous ne porterons plus seul·es ce qui doit se penser, se faire — et se soigner — ensemble.
+      </p>
+
+      <hr />
+
+      <p class="pivot">
+        <strong>Et pourtant, quelque chose tient.</strong>
+      </p>
+
+      <p class="pivot-suite">
+        Pas l'espoir naïf, ni la promesse héroïque. Quelque chose de plus humble&nbsp;: la fatigue commune reconnue, et l'envie qui revient de ne plus économiser sa vie.
+      </p>
+
+      <hr />
+
+      <h2>Ce que nous tentons.</h2>
+
+      <p>
+        <em>Partager.</em> Nos parcours, nos doutes, nos bifurcations. Se former les un·es les autres. Se tendre la main. Documenter ce qui marche, ce qui rate. Le personnel devient politique quand il se met en commun.
+      </p>
+
+      <p>
+        <em>Construire.</em> L'infrastructure collective qui nous a manqué. Cartes d'entraide, communs documentés, gouvernance horizontale, financement transparent, infra souveraine. <strong>Architecture d'Écologie Politique</strong>&nbsp;: un commun vivant, ouvert, biorégional, ancré.
+      </p>
+
+      <p>
+        <em>Pratiquer une médecine du corps social.</em> Diagnostiquer les infrastructures qui défaillent — l'éducation, la justice, la sécurité, l'énergie, la santé, le logement, l'agriculture. Proposer des reconfigurations situées, territoire par territoire. Reprendre le pouvoir par la base. Écrire, lentement, un nouveau contrat social.
+      </p>
+
+      <p>
+        <em>Commencer par les marges.</em> Là où le corps social souffre le plus, là où il est le plus prêt à changer. Ne pas décider à la place — faire émerger. Transparence totale, sur le process et sur l'argent. Tendresse militante&nbsp;: la lucidité sans le mépris, l'engagement sans la dureté.
+      </p>
+
+      <hr />
+
+      <h2>Architectes, allié·es, habitant·es.</h2>
+
+      <p>
+        Nous avons un travail à faire ensemble. Lentement, patiemment, par accumulation de petits gestes situés. Pas pour fuir — pour bifurquer.
+      </p>
+
+      <p class="chute">
+        <em>Nos métiers sont des médecines. Reprenons-en le pouls — à mains nues, ensemble.</em>
+      </p>
+
+      <hr />
+
+      <p class="cta-wrap">
+        <a
+          href="https://www.trans-former.fr/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="btn-blog"
+        >
+          En lire plus — blog AEP →
+        </a>
+      </p>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+useHead({
+  title: 'Manifeste — AEP',
+  meta: [
+    { name: 'description', content: 'Manifeste d\'Architecture d\'Écologie Politique — un commun vivant pour bifurquer ensemble.' },
+  ],
+})
+</script>
+
+<style scoped>
+.manifeste-page {
+  min-height: 100vh;
+  background: var(--nav-bg);
+  padding: 1.5rem 1rem 5rem;
+  overflow-x: hidden;
+  width: 100%;
+}
+
+.manifeste-inner {
+  max-width: 680px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--nav-primary-solid);
+  opacity: 0.7;
+  text-decoration: none;
+  margin-bottom: 2rem;
+  transition: opacity 0.15s;
+}
+
+.back-link:hover { opacity: 1; }
+
+.manifeste-title {
+  font-size: 1.65rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  margin: 0 0 1.5rem;
+  line-height: 1.25;
+}
+
+.lede {
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--nav-text);
+  margin: 0 0 1.25rem;
+  border-left: 3px solid var(--nav-primary-solid);
+  padding-left: 1rem;
+  opacity: 0.85;
+}
+
+p {
+  font-size: 0.975rem;
+  line-height: 1.75;
+  color: var(--nav-text);
+  margin: 0 0 1.1rem;
+}
+
+h2 {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  margin: 2rem 0 1rem;
+  letter-spacing: 0.01em;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--nav-bg-alt);
+  margin: 2rem 0;
+}
+
+.refus {
+  font-style: normal;
+}
+
+.pivot {
+  font-size: 1.15rem;
+  text-align: center;
+  margin: 2rem 0 1rem;
+  font-style: italic;
+}
+
+.pivot strong {
+  font-weight: 700;
+  font-style: normal;
+}
+
+.pivot-suite {
+  text-align: center;
+  font-style: italic;
+  opacity: 0.85;
+}
+
+.chute {
+  font-size: 1.05rem;
+  text-align: center;
+  margin-top: 1.5rem;
+  color: var(--nav-text);
+}
+
+.cta-wrap {
+  text-align: center;
+  margin: 2rem 0 0;
+}
+
+.btn-blog {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.75rem 1.5rem;
+  background: var(--nav-primary);
+  color: var(--nav-text-on-primary);
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.btn-blog:hover { opacity: 0.85; }
+
+@media (max-width: 480px) {
+  .manifeste-page { padding: 1rem 0.85rem 4rem; }
+  .manifeste-title { font-size: 1.4rem; }
+  .lede { font-size: 0.95rem; padding-left: 0.85rem; }
+  p { font-size: 0.95rem; }
+  .pivot { font-size: 1.05rem; }
+}
+</style>
--- a/pages/media.vue
+++ b/pages/media.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="media-page" style="background: var(--nav-bg);">
+    <nav class="subtabs" style="display:flex; gap:0; border-bottom: 1px solid var(--nav-bg-alt); background: var(--nav-surface); padding: 0 1rem;">
+      <button
+        :class="['subtab-btn', { active: tab === 'visuel' }]"
+        @click="tab = 'visuel'"
+      >
+        🌳 RAG visuel
+      </button>
+      <button
+        :class="['subtab-btn', { active: tab === 'backend' }]"
+        @click="tab = 'backend'"
+      >
+        ⚙ LightRAG backend
+      </button>
+      <button
+        :class="['subtab-btn', { active: tab === 'projets' }]"
+        @click="tab = 'projets'"
+      >
+        📚 Projets
+      </button>
+    </nav>
+
+    <MediaTabVisuel v-if="tab === 'visuel'" />
+    <MediaTabBackend v-else-if="tab === 'backend'" />
+    <MediaTabProjets v-else-if="tab === 'projets'" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+
+const tab = ref<'visuel' | 'backend' | 'projets'>(
+  (['visuel', 'backend', 'projets'].includes(route.query.tab as string)
+    ? route.query.tab as 'visuel' | 'backend' | 'projets'
+    : 'visuel')
+)
+
+watch(tab, (newTab) => {
+  router.replace({ query: { ...route.query, tab: newTab } })
+})
+
+useHead({ title: 'AEP - Media' })
+</script>
+
+<style scoped>
+.media-page { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
+.subtabs { display: flex; gap: 0; flex-shrink: 0; }
+.subtab-btn {
+  padding: 10px 18px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  color: var(--nav-text-muted);
+  transition: color 0.15s, border-color 0.15s;
+}
+.subtab-btn:hover { color: var(--nav-text); }
+.subtab-btn.active { color: var(--nav-primary-solid); border-bottom-color: var(--nav-primary-solid); font-weight: 600; }
+</style>
--- a/pages/outils.vue
+++ b/pages/outils.vue
@@ -0,0 +1,533 @@
+<template>
+  <div class="outils-page">
+
+    <!-- ══════════════════════ EN-TÊTE PAGE ══════════════════════ -->
+    <header class="outils-header">
+      <div class="outils-header__inner">
+        <div class="outils-header__icon-wrap" aria-hidden="true">
+          <img src="/icons/outils-wrench.svg" alt="" class="outils-header__icon" />
+        </div>
+        <div>
+          <h1 class="outils-header__title">Outils</h1>
+          <p class="outils-header__intro">
+            En tant qu'architecte, on jongle avec une multitude d'outils — simulation, dessin,
+            calcul, recherche, partage. Les mutualiser, se conseiller dessus, savoir lequel
+            utiliser quand : c'est une forme d'entraide concrète. Voici ceux que je propose
+            dans un premier temps. Chacun peut contribuer pour enrichir cette boîte à outils
+            commune.
+          </p>
+        </div>
+      </div>
+    </header>
+
+    <main class="outils-main">
+
+      <!-- ══════════════ SECTION 1 — Simulateurs métier ══════════════ -->
+      <section class="outils-section outils-section--simulateurs" aria-labelledby="sec-simulateurs">
+        <h2 id="sec-simulateurs" class="outils-section__title">
+          <span aria-hidden="true">🧮</span> Simulateurs métier
+        </h2>
+        <p class="outils-section__subtitle">Créés par AEP — outils de calcul situés.</p>
+
+        <div class="simu-grid">
+          <SimulateurFeature
+            v-for="s in outils?.simulateurs"
+            :key="s.id"
+            :icon="s.icon"
+            :titre="s.titre"
+            :url="s.url"
+            :description="s.description"
+            :cta="s.cta"
+            :tag="s.tag"
+          />
+        </div>
+
+        <!-- Inspirations -->
+        <div v-if="outils?.simulateurs_inspirations?.length" class="simu-inspirations">
+          <p class="simu-inspirations__label">Inspiration externe</p>
+          <div class="outil-cards-grid">
+            <OutilCard
+              v-for="s in outils.simulateurs_inspirations"
+              :key="s.id"
+              :icon="s.icon"
+              :titre="s.titre"
+              :url="s.url"
+              :description="s.description"
+              :tag="s.tag"
+            />
+          </div>
+        </div>
+      </section>
+
+      <!-- ══════════════ SECTION 2 — Open source recommandés ══════════════ -->
+      <section class="outils-section outils-section--opensource" aria-labelledby="sec-opensource">
+        <h2 id="sec-opensource" class="outils-section__title">
+          <span aria-hidden="true">🔧</span> Outils tech open source
+        </h2>
+        <p class="outils-section__subtitle">Quelques recommandations directes. Le cœur de l'onglet, c'est la section FMHY plus bas.</p>
+
+        <div class="outil-cards-grid">
+          <OutilCard
+            v-for="outil in outils?.opensource"
+            :key="outil.id"
+            :icon="outil.icon"
+            :titre="outil.titre"
+            :url="outil.url"
+            :description="outil.description"
+            :tag="outil.tag"
+          />
+        </div>
+      </section>
+
+      <!-- ══════════════ SECTION 3 — Bifurcation ══════════════ -->
+      <section class="outils-section" aria-labelledby="sec-bifurcation">
+        <h2 id="sec-bifurcation" class="outils-section__title">
+          <span aria-hidden="true">🌿</span> Bifurcation post-études d'archi
+        </h2>
+        <p class="outils-section__desc">
+          {{ outils?.bifurcation?.intro }}
+        </p>
+
+        <!-- 3.1 Vidéos OFQA -->
+        <div class="bifurcation-block">
+          <h3 class="bifurcation-block__title">Série vidéo OFQA / ENSA-PB</h3>
+          <ul class="ofqa-list">
+            <li
+              v-for="ep in outils?.bifurcation?.videos_ofqa"
+              :key="ep.ep"
+              class="ofqa-list__item"
+            >
+              <component
+                :is="ep.url ? 'a' : 'span'"
+                v-bind="ep.url ? { href: ep.url, target: '_blank', rel: 'noopener noreferrer' } : {}"
+                class="ofqa-list__link"
+                :class="{ 'ofqa-list__link--disabled': !ep.url }"
+              >
+                <span class="ofqa-list__ep">EP/{{ ep.ep }}</span>
+                <span class="ofqa-list__titre">{{ ep.titre }}</span>
+                <span class="ofqa-list__personnes">— {{ ep.personnes }}</span>
+                <span v-if="ep.note" class="ofqa-list__note">({{ ep.note }})</span>
+              </component>
+            </li>
+          </ul>
+        </div>
+
+        <!-- 3.2 Coalition -->
+        <div v-if="outils?.bifurcation?.coalition_ensa_pb" class="bifurcation-block bifurcation-block--coalition">
+          <h3 class="bifurcation-block__title">{{ outils.bifurcation.coalition_ensa_pb.titre }}</h3>
+          <p class="bifurcation-block__desc">{{ outils.bifurcation.coalition_ensa_pb.description }}</p>
+        </div>
+
+        <!-- 3.3 Ressources externes -->
+        <div v-if="outils?.bifurcation?.ressources_externes?.length" class="bifurcation-block">
+          <h3 class="bifurcation-block__title">Ressources externes</h3>
+          <div class="outil-cards-grid">
+            <OutilCard
+              v-for="r in outils.bifurcation.ressources_externes"
+              :key="r.id"
+              :icon="r.icon"
+              :titre="r.titre"
+              :url="r.url"
+              :description="r.description"
+            />
+          </div>
+        </div>
+      </section>
+
+      <!-- ══════════════ SECTION 4 — FMHY (cœur de la page) ══════════════ -->
+      <section class="outils-section outils-section--fmhy" aria-labelledby="sec-fmhy">
+        <h2 id="sec-fmhy" class="outils-section__title">
+          <span aria-hidden="true">🌳</span> Bibliothèque de ressources libres
+        </h2>
+        <p class="outils-section__desc">
+          Le vrai trésor de l'onglet Outils. FMHY (Free Media Heck Yeah) est la plus grosse
+          base communautaire d'outils, services et ressources libres/gratuits du web. J'en ai
+          curé ~50 entrées pertinentes pour un architecte : IA, lecture, dev, vie privée,
+          formation, médias. Clique sur les branches pour explorer.
+        </p>
+
+        <div class="fmhy-tree-wrap">
+          <div v-if="fmhyPending" class="fmhy-loading" aria-label="Chargement…">
+            <span>Chargement…</span>
+          </div>
+          <div v-else-if="fmhyError" class="fmhy-error">
+            Impossible de charger les ressources. <a href="https://fmhy.net/" target="_blank" rel="noopener noreferrer">Explorer fmhy.net →</a>
+          </div>
+          <TreeASCII v-else-if="fmhyData" :tree="fmhyData" :depth="0" />
+        </div>
+
+        <div class="fmhy-footer">
+          <a href="https://fmhy.net/" target="_blank" rel="noopener noreferrer" class="fmhy-footer__link">
+            Explorer tout l'arbre → fmhy.net
+          </a>
+        </div>
+      </section>
+
+      <!-- ══════════════ SECTION 5 — Placeholder login ══════════════ -->
+      <section class="outils-section outils-section--placeholder" aria-labelledby="sec-logiciels">
+        <div class="placeholder-block">
+          <span class="placeholder-block__badge">Bientôt — nécessite un compte</span>
+          <h2 id="sec-logiciels" class="placeholder-block__title">{{ outils?.section_5_placeholder?.titre }}</h2>
+          <p class="placeholder-block__desc">{{ outils?.section_5_placeholder?.description }}</p>
+        </div>
+      </section>
+
+      <!-- ══════════════ FOOTER CONTRIBUTION ══════════════ -->
+      <footer class="outils-footer">
+        <p class="outils-footer__text">
+          {{ outils?.footer_contribution }}
+        </p>
+      </footer>
+
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Chargement des données
+const { data: outils } = await useFetch('/data/outils.json')
+const { data: fmhyData, pending: fmhyPending, error: fmhyError } = await useFetch('/data/fmhy-curated.json')
+
+useSeoMeta({
+  title: 'Outils — AEP',
+  description: 'Outils partagés entre architectes : simulateurs, open source, ressources libres FMHY, bifurcation post-études.'
+})
+</script>
+
+<style scoped>
+/* ── Layout global ──────────────────────────────────────────── */
+.outils-page {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem 4rem;
+  color: var(--nav-text);
+}
+
+/* ── Header ─────────────────────────────────────────────────── */
+.outils-header {
+  margin-bottom: 2.5rem;
+}
+
+.outils-header__inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.25rem;
+}
+
+.outils-header__icon-wrap {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 10px;
+  background: var(--nav-bg-alt);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0.6rem;
+}
+
+.outils-header__icon {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  opacity: 0.75;
+}
+
+.outils-header__title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin: 0 0 0.5rem;
+  color: var(--nav-text);
+}
+
+.outils-header__intro {
+  font-size: 0.9rem;
+  color: var(--nav-text-muted);
+  line-height: 1.65;
+  margin: 0;
+  max-width: 70ch;
+}
+
+/* ── Sections ───────────────────────────────────────────────── */
+.outils-main {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+.outils-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.outils-section__title {
+  font-size: 1.15rem;
+  font-weight: 700;
+  margin: 0;
+  color: var(--nav-text);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1.5px solid var(--nav-bg-alt);
+}
+
+.outils-section__subtitle {
+  font-size: 0.82rem;
+  color: var(--nav-text-muted);
+  margin: -0.5rem 0 0;
+  font-style: italic;
+}
+
+.outils-section__desc {
+  font-size: 0.88rem;
+  color: var(--nav-text-muted);
+  line-height: 1.65;
+  margin: 0;
+  max-width: 72ch;
+}
+
+/* ── Simulateurs ────────────────────────────────────────────── */
+.outils-section--simulateurs {
+  gap: 1.25rem;
+}
+
+.simu-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.simu-inspirations {
+  margin-top: 0.5rem;
+}
+
+.simu-inspirations__label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--nav-text-muted);
+  margin-bottom: 0.5rem;
+}
+
+/* ── Cards grid ─────────────────────────────────────────────── */
+.outil-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 0.75rem;
+}
+
+/* ── Section FMHY ───────────────────────────────────────────── */
+.outils-section--fmhy {
+  background: var(--nav-bg-alt);
+  border-radius: 14px;
+  padding: 1.75rem;
+  gap: 1.25rem;
+  margin: 0 -0.25rem;
+}
+
+.fmhy-tree-wrap {
+  background: var(--nav-surface);
+  border: 1px solid var(--nav-bg-alt);
+  border-radius: 10px;
+  padding: 1.25rem 1.5rem;
+  overflow-x: auto;
+}
+
+.fmhy-loading,
+.fmhy-error {
+  font-size: 0.85rem;
+  color: var(--nav-text-muted);
+  padding: 0.5rem 0;
+}
+
+.fmhy-error a {
+  color: var(--nav-primary-solid);
+}
+
+.fmhy-footer {
+  text-align: right;
+}
+
+.fmhy-footer__link {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--nav-primary-solid);
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.fmhy-footer__link:hover {
+  opacity: 0.75;
+  text-decoration: underline;
+}
+
+/* ── Bifurcation ────────────────────────────────────────────── */
+.bifurcation-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.bifurcation-block__title {
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: var(--nav-text);
+  margin: 0;
+}
+
+.bifurcation-block__desc {
+  font-size: 0.84rem;
+  color: var(--nav-text-muted);
+  margin: 0;
+  line-height: 1.55;
+}
+
+.bifurcation-block--coalition {
+  background: var(--nav-bg-alt);
+  border-radius: 8px;
+  padding: 0.875rem 1rem;
+}
+
+/* ── Liste OFQA ─────────────────────────────────────────────── */
+.ofqa-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.ofqa-list__item {
+  display: flex;
+}
+
+.ofqa-list__link {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  padding: 3px 6px;
+  border-radius: 5px;
+  font-size: 0.84rem;
+  text-decoration: none;
+  color: var(--nav-text);
+  transition: background 0.1s;
+}
+
+.ofqa-list__link:not(.ofqa-list__link--disabled):hover {
+  background: var(--nav-bg-alt);
+  color: var(--nav-primary-solid);
+  text-decoration: underline;
+}
+
+.ofqa-list__link--disabled {
+  color: var(--nav-text-muted);
+  cursor: default;
+}
+
+.ofqa-list__ep {
+  font-family: 'JetBrains Mono', 'Courier New', monospace;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--nav-text-muted);
+  flex-shrink: 0;
+  min-width: 4.5rem;
+}
+
+.ofqa-list__titre {
+  font-weight: 500;
+}
+
+.ofqa-list__personnes {
+  color: var(--nav-text-muted);
+  font-size: 0.82rem;
+}
+
+.ofqa-list__note {
+  color: var(--nav-text-muted);
+  font-size: 0.78rem;
+  font-style: italic;
+}
+
+/* ── Section 5 placeholder ──────────────────────────────────── */
+.outils-section--placeholder {
+  opacity: 0.6;
+}
+
+.placeholder-block {
+  border: 1.5px dashed var(--nav-bg-alt);
+  border-radius: 12px;
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.placeholder-block__badge {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--nav-text-muted);
+}
+
+.placeholder-block__title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--nav-text);
+  margin: 0;
+}
+
+.placeholder-block__desc {
+  font-size: 0.84rem;
+  color: var(--nav-text-muted);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ── Footer ─────────────────────────────────────────────────── */
+.outils-footer {
+  padding-top: 1rem;
+  border-top: 1px solid var(--nav-bg-alt);
+  text-align: center;
+}
+
+.outils-footer__text {
+  font-size: 0.84rem;
+  color: var(--nav-text-muted);
+  margin: 0;
+}
+
+/* ── Mobile ─────────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .outils-page {
+    padding: 1.25rem 1rem 4rem;
+  }
+
+  .outils-header__inner {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .outils-header__title {
+    font-size: 1.4rem;
+  }
+
+  .outil-cards-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .outils-section--fmhy {
+    padding: 1.25rem 1rem;
+    margin: 0 -0.5rem;
+  }
+
+  .fmhy-tree-wrap {
+    padding: 0.875rem 0.75rem;
+  }
+}
+</style>
--- a/pages/trouver-du-taf.vue
+++ b/pages/trouver-du-taf.vue
@@ -6,10 +6,50 @@
      <div class="taff-header-inner">
        <h1 class="taff-title">Trouver du taf en archi</h1>
        <p class="taff-subtitle">
-          Annuaire critique des plateformes de mise en relation archi ↔ particulier.
-          Évaluées sur 5 axes éthiques — rémunération, transparence, pratiques pro, écologie, qualité du matching.
-          Cible : archi freelance indépendant en France.
+          Annuaire critique des plateformes de mise en relation et d'appels d'offres,
+          pour les <strong>architectes indépendants</strong> — 70&nbsp;% de la profession et sa part la plus précaire économiquement.
        </p>
+
+        <!-- Pédagogie : ce qu'on évalue -->
+        <details class="taff-pedago" open>
+          <summary class="taff-pedago-summary">
+            <span>Comment on lit cette carte&nbsp;?</span>
+            <svg class="taff-pedago-chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          </summary>
+
+          <div class="taff-pedago-body">
+            <div class="taff-pedago-block">
+              <h3>Deux onglets, deux mondes</h3>
+              <ul>
+                <li><strong>Pour archi indépendants</strong> (B2C)&nbsp;: plateformes privées qui te mettent en relation avec des particuliers (Houzz, Architoo, etc.). Modèle économique = elles te facturent l'accès aux leads.</li>
+                <li><strong>Appels d'offres publics</strong>&nbsp;: marchés publics (BOAMP, JOUE, plateformes territoriales). Procédure réglementée, gros volumes, accès aux MOE publics.</li>
+              </ul>
+            </div>
+
+            <div class="taff-pedago-block">
+              <h3>Trois étiquettes, trois niveaux de confiance</h3>
+              <ul>
+                <li><span class="taff-pedago-tag" style="background: rgba(90,122,74,0.12); color: #3d5534;">✅ Recommandé</span> validé par AEP — pratiques alignées avec une éthique architecturale (rémunération correcte, transparence, écologie, qualité du matching)</li>
+                <li><span class="taff-pedago-tag" style="background: rgba(196,164,114,0.15); color: #7a5f2a;">⚠️ Sous réserve</span> utilisable mais avec vigilance — un ou plusieurs points faibles à connaître avant de t'inscrire</li>
+                <li><span class="taff-pedago-tag" style="background: rgba(168,93,62,0.12); color: #7a3322;">❌ À éviter</span> pratiques contraires à l'intérêt des architectes (commissions abusives, dumping, appâtage, etc.)</li>
+              </ul>
+            </div>
+
+            <div class="taff-pedago-block">
+              <h3>Cinq axes d'évaluation</h3>
+              <p class="taff-pedago-axes">
+                <strong>Rémunération</strong> (commissions, leads payants) ·
+                <strong>Transparence</strong> (CGV, modèle économique) ·
+                <strong>Pratiques pro</strong> (respect du Code de déontologie) ·
+                <strong>Écologie</strong> (incitation à la réno, matériaux) ·
+                <strong>Qualité du matching</strong> (filtres, pertinence des leads).
+              </p>
+            </div>
+          </div>
+        </details>
+
        <div class="taff-stats">
          <span class="taff-stat" style="color: #3d5534;">
            <span class="taff-stat-dot" style="background: #5a7a4a;"></span>
@@ -28,7 +68,7 @@
    </div>

    <!-- ── Filtres ─────────────────────────────────────────────────── -->
-    <div class="taff-filters-bar">
+    <div class="taff-filters-bar" :class="{ 'taff-filters-bar--collapsed': !filtersExpanded }">
      <div class="taff-filters-inner">

        <!-- Onglets B2C / AO publics -->
@@ -39,7 +79,7 @@
            :class="{ 'taff-tab--active': activeTab === 'b2c' }"
            @click="activeTab = 'b2c'; resetFilters()"
          >
-            Plateformes B2C
+            Pour archi indépendants
            <span class="taff-tab-count">{{ b2cCount }}</span>
          </button>
          <button
@@ -51,8 +91,33 @@
            Appels d'offres publics
            <span class="taff-tab-count">{{ aoCount }}</span>
          </button>
+
+          <!-- Toggle filtres mobile -->
+          <button
+            type="button"
+            class="taff-filters-toggle"
+            :aria-expanded="filtersExpanded"
+            @click="filtersExpanded = !filtersExpanded"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <line x1="4" y1="6" x2="20" y2="6"/><line x1="7" y1="12" x2="17" y2="12"/><line x1="10" y1="18" x2="14" y2="18"/>
+            </svg>
+            <span>Filtres</span>
+            <span v-if="activeFilterCount" class="taff-filters-toggle-badge">{{ activeFilterCount }}</span>
+            <svg
+              width="11" height="11" viewBox="0 0 24 24"
+              fill="none" stroke="currentColor" stroke-width="2.5"
+              stroke-linecap="round" stroke-linejoin="round"
+              :style="{ transform: filtersExpanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.18s' }"
+              aria-hidden="true"
+            >
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          </button>
        </div>

+        <div class="taff-filters-collapsible">
+
        <!-- Filtres tag global -->
        <div class="taff-filter-group">
          <button
@@ -116,6 +181,8 @@
            @click="resetFilters"
          >Effacer</button>
        </div>
+
+        </div><!-- /.taff-filters-collapsible -->
      </div>
    </div>

@@ -135,6 +202,105 @@
      </div>
    </div>

+    <!-- ── Chatbot FAB ───────────────────────────────────────────── -->
+    <Teleport to="body">
+      <!-- Bouton flottant -->
+      <button
+        v-if="!chatOpen"
+        class="taff-fab"
+        @click="chatOpen = true"
+        aria-label="Ouvrir le guide IA — Quel plateforme me convient ?"
+        title="Guide IA — Je t'aide à choisir"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+        </svg>
+        <span class="taff-fab-label">Guide IA</span>
+      </button>
+
+      <!-- Panel chatbot -->
+      <Transition name="taff-chat">
+        <div v-if="chatOpen" class="taff-chat-panel" role="dialog" aria-modal="true" aria-label="Guide IA — Choisir sa plateforme">
+
+          <!-- Header panel -->
+          <div class="taff-chat-header">
+            <div class="flex items-center gap-2">
+              <div class="taff-chat-avatar">
+                <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-on-primary);">
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                </svg>
+              </div>
+              <div>
+                <div class="text-sm font-semibold" style="color: var(--nav-text);">Guide AEP</div>
+                <div class="text-xs" style="color: var(--nav-text-muted);">Je t'aide à choisir ta plateforme</div>
+              </div>
+            </div>
+            <button @click="chatOpen = false" class="taff-chat-close" aria-label="Fermer">
+              <svg width="14" height="14" 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>
+          </div>
+
+          <!-- Messages -->
+          <div class="taff-chat-messages" ref="chatMessagesEl">
+            <!-- Message d'accueil -->
+            <div class="taff-msg taff-msg--bot">
+              <p>Dis-moi ta situation : ton secteur, ta zone, ce qui te bloque. Je t'oriente parmi les {{ allPlateformes.length }} plateformes de l'annuaire.</p>
+              <p class="text-xs mt-1.5 opacity-60">Ex : "Je suis en rénovation à Lyon, je cherche des leads sans commission."</p>
+            </div>
+
+            <!-- Messages de la conversation -->
+            <template v-for="(msg, i) in chatMessages" :key="i">
+              <div :class="['taff-msg', msg.role === 'user' ? 'taff-msg--user' : 'taff-msg--bot']">
+                <div v-if="msg.role === 'bot'" class="md-content" v-html="renderMd(msg.content)" />
+                <span v-else>{{ msg.content }}</span>
+              </div>
+              <!-- Plateformes recommandées -->
+              <div v-if="msg.role === 'bot' && msg.recommandations?.length" class="taff-chat-recos">
+                <button
+                  v-for="r in msg.recommandations"
+                  :key="r.id"
+                  class="taff-reco-chip"
+                  @click="openModalById(r.id); chatOpen = false"
+                >
+                  {{ r.nom }}
+                  <span class="taff-reco-arrow">→</span>
+                </button>
+              </div>
+            </template>
+
+            <!-- Loader -->
+            <div v-if="chatLoading" class="taff-msg taff-msg--bot">
+              <span class="taff-typing"><span/><span/><span/></span>
+            </div>
+          </div>
+
+          <!-- Input -->
+          <div class="taff-chat-input-wrap">
+            <textarea
+              v-model="chatInput"
+              class="taff-chat-input"
+              placeholder="Décris ta situation..."
+              rows="2"
+              @keydown.enter.exact.prevent="sendChat"
+            />
+            <button
+              class="taff-chat-send"
+              :disabled="chatLoading || !chatInput.trim()"
+              @click="sendChat"
+              aria-label="Envoyer"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+              </svg>
+            </button>
+          </div>
+          <p class="taff-chat-footer-note">Propulsé par Mistral · 20 questions/jour</p>
+        </div>
+      </Transition>
+    </Teleport>
+
    <!-- ── Note juridique ────────────────────────────────────────── -->
    <div class="taff-disclaimer">
      <p>
@@ -157,8 +323,8 @@
      <Transition name="taff-modal">
        <div
          v-if="modalPlateforme"
-          class="fixed z-[10001] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
-          style="width: min(760px, 92vw); max-height: 90vh; background: var(--nav-bg); border-radius: 16px; box-shadow: 0 16px 64px rgba(26,34,56,0.28); overflow: hidden;"
+          class="fixed z-[10001] left-1/2 -translate-x-1/2 flex flex-col"
+          style="width: min(760px, 92vw); top: 72px; max-height: calc(100vh - 88px); background: var(--nav-bg); border-radius: 16px; box-shadow: 0 16px 64px rgba(26,34,56,0.28); overflow: hidden;"
          role="dialog"
          aria-modal="true"
          :aria-label="modalPlateforme.nom"
@@ -306,6 +472,21 @@ const filterTag     = ref('')
 const filterSecteur = ref('')
 const search        = ref('')
 const hasFilters    = computed(() => !!(filterTag.value || filterSecteur.value || search.value))
+const activeFilterCount = computed(() => {
+  let n = 0
+  if (filterTag.value) n++
+  if (filterSecteur.value) n++
+  if (search.value) n++
+  return n
+})
+
+// Filtres ouverts par défaut sur desktop, repliés sur mobile (init côté client)
+const filtersExpanded = ref(true)
+onMounted(() => {
+  if (typeof window !== 'undefined' && window.innerWidth < 768) {
+    filtersExpanded.value = false
+  }
+})

 function resetFilters() {
  filterTag.value = ''
@@ -389,6 +570,52 @@ function axeScoreText(score: string) {
 const modalPlateforme = ref<PlateformeTaff | null>(null)
 function openModal(p: PlateformeTaff) { modalPlateforme.value = p }
 function closeModal()                  { modalPlateforme.value = null }
+function openModalById(id: string) {
+  const p = allPlateformes.value.find(p => p.id === id)
+  if (p) modalPlateforme.value = p
+}
+
+// Chatbot
+interface ChatMessage {
+  role: 'user' | 'bot'
+  content: string
+  recommandations?: { id: string; nom: string; raison: string }[]
+}
+
+const { render: renderMd } = useMarkdown()
+
+const chatOpen    = ref(false)
+const chatInput   = ref('')
+const chatLoading = ref(false)
+const chatMessages = ref<ChatMessage[]>([])
+const chatMessagesEl = ref<HTMLElement | null>(null)
+
+async function sendChat() {
+  const q = chatInput.value.trim()
+  if (!q || chatLoading.value) return
+  chatMessages.value.push({ role: 'user', content: q })
+  chatInput.value = ''
+  chatLoading.value = true
+  await nextTick()
+  chatMessagesEl.value?.scrollTo({ top: chatMessagesEl.value.scrollHeight, behavior: 'smooth' })
+  try {
+    const res = await $fetch<{ reponse_texte: string; plateformes_recommandees: { id: string; nom: string; raison: string }[] }>(
+      '/api/chatbot-taff',
+      { method: 'POST', body: { question: q } }
+    )
+    chatMessages.value.push({
+      role: 'bot',
+      content: res.reponse_texte,
+      recommandations: res.plateformes_recommandees ?? [],
+    })
+  } catch (e: any) {
+    chatMessages.value.push({ role: 'bot', content: e?.data?.statusMessage ?? 'Erreur — réessaie dans un instant.' })
+  } finally {
+    chatLoading.value = false
+    await nextTick()
+    chatMessagesEl.value?.scrollTo({ top: chatMessagesEl.value.scrollHeight, behavior: 'smooth' })
+  }
+}

 const TAG_CONFIG: Record<string, { emoji: string; label: string; bg: string; text: string }> = {
  'recommande':   { emoji: '✅', label: 'Recommandé AEP', bg: 'rgba(90,122,74,0.12)',    text: '#3d5534' },
@@ -420,16 +647,147 @@ const parsedDescription = computed(() => {
 <style scoped>
 .taff-page { max-width: 1280px; margin: 0 auto; padding-bottom: 3rem; }

-.taff-header { padding: 2.5rem 1.5rem 1.5rem; border-bottom: 1px solid var(--nav-bg-alt); }
-.taff-header-inner { max-width: 680px; }
+.taff-header { padding: 2.5rem 1.5rem 1.5rem; border-bottom: 1px solid var(--nav-bg-alt); text-align: center; }
+.taff-header-inner { max-width: 680px; margin: 0 auto; }
 .taff-title { font-size: 1.875rem; font-weight: 800; color: var(--nav-text); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
-.taff-subtitle { font-size: 0.9375rem; color: var(--nav-text-muted); line-height: 1.6; margin-bottom: 1rem; }
-.taff-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; }
+.taff-subtitle { font-size: 0.9375rem; color: var(--nav-text-muted); line-height: 1.6; margin-bottom: 0.625rem; }
+.taff-cible { font-size: 0.875rem; color: var(--nav-text-muted); line-height: 1.55; margin-bottom: 1rem; font-style: italic; }
+.taff-cible strong { color: var(--nav-text); font-style: normal; }
+.taff-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
 .taff-stat { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; }
+
+/* Pédagogie repliable */
+.taff-pedago {
+  background: var(--nav-bg);
+  border: 1px solid var(--nav-bg-alt);
+  border-radius: 12px;
+  margin: 1rem 0 0.75rem;
+  overflow: hidden;
+}
+.taff-pedago-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--nav-text);
+  cursor: pointer;
+  list-style: none;
+}
+.taff-pedago-summary::-webkit-details-marker { display: none; }
+.taff-pedago-chevron {
+  color: var(--nav-text-muted);
+  transition: transform 0.2s ease;
+}
+.taff-pedago[open] .taff-pedago-chevron { transform: rotate(180deg); }
+.taff-pedago-body {
+  padding: 0 1rem 1rem;
+  border-top: 1px solid var(--nav-bg-alt);
+}
+.taff-pedago-block { margin-top: 0.875rem; }
+.taff-pedago-block h3 {
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--nav-text-muted);
+  font-weight: 700;
+  margin: 0 0 0.5rem;
+}
+.taff-pedago-block ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.taff-pedago-block li {
+  font-size: 0.85rem;
+  line-height: 1.55;
+  color: var(--nav-text);
+}
+.taff-pedago-block li strong { font-weight: 700; }
+.taff-pedago-tag {
+  display: inline-block;
+  padding: 0.1rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  margin-right: 0.25rem;
+}
+.taff-pedago-axes {
+  font-size: 0.85rem;
+  line-height: 1.65;
+  color: var(--nav-text);
+  margin: 0;
+}
+.taff-pedago-axes strong { font-weight: 700; }
+
+@media (max-width: 600px) {
+  .taff-pedago-body { padding: 0 0.85rem 0.85rem; }
+  .taff-pedago-block li, .taff-pedago-axes { font-size: 0.82rem; }
+}
 .taff-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

 .taff-filters-bar { position: sticky; top: 0; z-index: 100; background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt); padding: 0.75rem 1.5rem; box-shadow: 0 2px 8px rgba(26,34,56,0.06); }
 .taff-filters-inner { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
+.taff-filters-collapsible { display: contents; }
+
+/* Toggle filtres : visible uniquement sur mobile */
+.taff-filters-toggle { display: none; }
+
+@media (max-width: 767px) {
+  .taff-filters-bar { padding: 0.5rem 0.875rem; }
+  .taff-filters-inner { gap: 0.4rem; }
+  .taff-tabs { width: 100%; justify-content: space-between; }
+  .taff-tabs .taff-tab { flex: 1; justify-content: center; }
+  .taff-filters-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.375rem 0.75rem;
+    background: var(--nav-bg);
+    border: 1px solid var(--nav-bg-alt);
+    border-left: none;
+    color: var(--nav-text-muted);
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .taff-filters-toggle-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 9999px;
+    background: var(--nav-primary-solid);
+    color: var(--nav-text-on-primary);
+    font-size: 0.7rem;
+    font-weight: 700;
+  }
+  .taff-filters-collapsible {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 0.5rem;
+    overflow: hidden;
+    max-height: 1000px;
+    transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.2s ease;
+    margin-top: 0.4rem;
+    opacity: 1;
+  }
+  .taff-filters-bar--collapsed .taff-filters-collapsible {
+    max-height: 0;
+    opacity: 0;
+    margin-top: 0;
+    pointer-events: none;
+  }
+}

 .taff-tabs { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--nav-bg-alt); flex-shrink: 0; }
 .taff-tab { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: var(--nav-text-muted); background: var(--nav-bg); border: none; cursor: pointer; transition: background 0.15s; }
@@ -448,7 +806,7 @@ const parsedDescription = computed(() => {
 .taff-search-clear { color: var(--nav-text-muted); background: none; border: none; cursor: pointer; padding: 0; display: flex; }

 .taff-grid-wrap { padding: 1.5rem; }
-.taff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
+.taff-grid { display: flex; flex-direction: column; gap: 0.75rem; max-width: 720px; margin: 0 auto; }
 .taff-empty { text-align: center; padding: 3rem; }
 .taff-reset-btn { margin-top: 0.75rem; padding: 0.5rem 1.25rem; border-radius: 8px; background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; border: none; cursor: pointer; }
 .taff-reset-btn:hover { opacity: 0.7; }
@@ -464,9 +822,195 @@ const parsedDescription = computed(() => {
 .modal-meta-key { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--nav-text-muted); }
 .modal-meta-val { font-size: 0.875rem; font-weight: 500; color: var(--nav-text); }

-/* Transitions */
+/* Transitions modal */
 .taff-backdrop-enter-active, .taff-backdrop-leave-active { transition: opacity 0.2s; }
 .taff-backdrop-enter-from, .taff-backdrop-leave-to { opacity: 0; }
 .taff-modal-enter-active, .taff-modal-leave-active { transition: opacity 0.2s, transform 0.2s; }
-.taff-modal-enter-from, .taff-modal-leave-to { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
+.taff-modal-enter-from, .taff-modal-leave-to { opacity: 0; transform: translateX(-50%) translateY(-12px); }
+
+/* ── Chatbot FAB ──────────────────────────────────────────────────── */
+.taff-fab {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 9998;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.125rem;
+  border-radius: 9999px;
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 4px 20px rgba(26,34,56,0.3);
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+.taff-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,34,56,0.35); }
+.taff-fab-label { white-space: nowrap; }
+
+/* Panel chatbot */
+.taff-chat-panel {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 9999;
+  width: min(380px, calc(100vw - 2rem));
+  max-height: calc(100vh - 4rem);
+  background: var(--nav-surface);
+  border-radius: 16px;
+  box-shadow: 0 8px 40px rgba(26,34,56,0.25);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--nav-bg-alt);
+}
+
+.taff-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--nav-bg-alt);
+  background: var(--nav-surface);
+  flex-shrink: 0;
+}
+.taff-chat-avatar {
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  background: var(--nav-primary-solid);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.taff-chat-close {
+  width: 28px; height: 28px;
+  border-radius: 8px;
+  background: var(--nav-bg-alt);
+  color: var(--nav-text-muted);
+  border: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: opacity 0.15s;
+}
+.taff-chat-close:hover { opacity: 0.7; }
+
+.taff-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.taff-msg {
+  padding: 0.625rem 0.875rem;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  max-width: 92%;
+}
+.taff-msg--bot {
+  background: var(--nav-bg-alt);
+  color: var(--nav-text);
+  align-self: flex-start;
+  border-bottom-left-radius: 4px;
+}
+.taff-msg--user {
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+  align-self: flex-end;
+  border-bottom-right-radius: 4px;
+}
+
+.taff-chat-recos {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  align-self: flex-start;
+  max-width: 92%;
+}
+.taff-reco-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  background: var(--nav-bg);
+  color: var(--nav-text);
+  border: 1px solid var(--nav-bg-alt);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.taff-reco-chip:hover { background: var(--nav-bg-alt); }
+.taff-reco-arrow { opacity: 0.5; }
+
+/* Typing indicator */
+.taff-typing { display: inline-flex; gap: 4px; align-items: center; }
+.taff-typing span {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--nav-text-muted);
+  animation: taff-bounce 1.2s infinite;
+}
+.taff-typing span:nth-child(2) { animation-delay: 0.2s; }
+.taff-typing span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes taff-bounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
+  40% { transform: translateY(-5px); opacity: 1; }
+}
+
+.taff-chat-input-wrap {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-top: 1px solid var(--nav-bg-alt);
+  background: var(--nav-surface);
+  flex-shrink: 0;
+}
+.taff-chat-input {
+  flex: 1;
+  resize: none;
+  border: 1px solid var(--nav-bg-alt);
+  border-radius: 10px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background: var(--nav-bg);
+  color: var(--nav-text);
+  font-family: var(--nav-font);
+  outline: none;
+  line-height: 1.5;
+}
+.taff-chat-input::placeholder { color: var(--nav-text-muted); }
+.taff-chat-input:focus { border-color: var(--nav-primary); }
+
+.taff-chat-send {
+  width: 36px; height: 36px;
+  border-radius: 10px;
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+  border: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  transition: opacity 0.15s;
+}
+.taff-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
+.taff-chat-send:not(:disabled):hover { opacity: 0.85; }
+
+.taff-chat-footer-note {
+  text-align: center;
+  font-size: 0.6875rem;
+  color: var(--nav-text-muted);
+  padding: 0.375rem;
+  background: var(--nav-surface);
+  flex-shrink: 0;
+}
+
+/* Transition panel chatbot */
+.taff-chat-enter-active, .taff-chat-leave-active { transition: opacity 0.2s, transform 0.2s; }
+.taff-chat-enter-from, .taff-chat-leave-to { opacity: 0; transform: translateY(12px) scale(0.97); }
 </style>
--- a/public/cartes/carte-fracas-bonpote-v2.pdf
+++ b/public/cartes/carte-fracas-bonpote-v2.pdf
--- a/public/data/fmhy-curated.json
+++ b/public/data/fmhy-curated.json
@@ -0,0 +1,102 @@
+{
+  "name": "FMHY — Sélection Architecte",
+  "description": "~50 ressources curées depuis FMHY (Free Media Heck Yeah) — pertinentes pour un architecte, un praticien de la transition, un créateur solo.",
+  "children": [
+    {
+      "name": "IA & Outils cognitifs",
+      "children": [
+        { "name": "ChatGPT (OpenAI)", "url": "https://chat.openai.com/", "desc": "LLM généraliste, référence." },
+        { "name": "Claude (Anthropic)", "url": "https://claude.ai/", "desc": "Excellent pour rédaction longue et analyse de documents." },
+        { "name": "Mistral Le Chat", "url": "https://chat.mistral.ai/", "desc": "LLM français, souverain, gratuit." },
+        { "name": "Perplexity", "url": "https://www.perplexity.ai/", "desc": "Moteur de recherche IA avec sources citées." },
+        { "name": "Hugging Face", "url": "https://huggingface.co/", "desc": "Hub de modèles open source. Indispensable." },
+        { "name": "LM Studio", "url": "https://lmstudio.ai/", "desc": "Faire tourner des LLM localement, sans cloud." }
+      ]
+    },
+    {
+      "name": "Lecture & Documentation",
+      "children": [
+        { "name": "Anna's Archive", "url": "https://annas-archive.org/", "desc": "Bibliothèque shadow la plus complète du web. Livres, articles, thèses." },
+        { "name": "Sci-Hub", "url": "https://sci-hub.se/", "desc": "Accès libre aux articles scientifiques payants." },
+        { "name": "Library Genesis", "url": "https://libgen.is/", "desc": "Livres techniques et académiques en PDF." },
+        { "name": "Z-Library", "url": "https://z-lib.id/", "desc": "Bibliothèque numérique massive, interface soignée." },
+        { "name": "OpenLibrary (Internet Archive)", "url": "https://openlibrary.org/", "desc": "Prêt numérique gratuit, millions de livres." },
+        { "name": "Calibre", "url": "https://calibre-ebook.com/", "desc": "Gestion de bibliothèque numérique, convertisseur de formats." }
+      ]
+    },
+    {
+      "name": "Dessin & Modélisation",
+      "children": [
+        { "name": "FreeCAD", "url": "https://www.freecad.org/", "desc": "Modélisation 3D open source, paramétrique. Alternative à Rhino pour usage simple." },
+        { "name": "Blender", "url": "https://www.blender.org/", "desc": "3D, rendu, animation. La référence open source." },
+        { "name": "Inkscape", "url": "https://inkscape.org/", "desc": "Dessin vectoriel. Alternative à Illustrator." },
+        { "name": "GIMP", "url": "https://www.gimp.org/", "desc": "Retouche photo. Alternative à Photoshop." },
+        { "name": "Krita", "url": "https://krita.org/", "desc": "Dessin digital et croquis. Excellent pour les concepts." },
+        { "name": "LibreOffice Draw", "url": "https://www.libreoffice.org/", "desc": "Diagrammes, plans rapides, sans suite Adobe." }
+      ]
+    },
+    {
+      "name": "Productivité & Texte",
+      "children": [
+        { "name": "Obsidian", "url": "https://obsidian.md/", "desc": "PKM / prise de notes en Markdown. Gratuit pour usage personnel." },
+        { "name": "Logseq", "url": "https://logseq.com/", "desc": "PKM open source, graphe de connaissances." },
+        { "name": "Zotero", "url": "https://www.zotero.org/", "desc": "Gestionnaire de références bibliographiques. Indispensable pour la recherche." },
+        { "name": "Marktext", "url": "https://github.com/marktext/marktext", "desc": "Éditeur Markdown WYSIWYG, open source." },
+        { "name": "Typst", "url": "https://typst.app/", "desc": "Alternative moderne à LaTeX pour la mise en page de documents." },
+        { "name": "Pandoc", "url": "https://pandoc.org/", "desc": "Conversion universelle entre formats de documents (MD, DOCX, PDF, HTML...)." }
+      ]
+    },
+    {
+      "name": "Dev & Infrastructure",
+      "children": [
+        { "name": "VS Code", "url": "https://code.visualstudio.com/", "desc": "Éditeur de code. La référence, gratuit." },
+        { "name": "Coolify", "url": "https://coolify.io/", "desc": "Self-hosting simplifié. Alternative à Heroku/Vercel sur son propre VPS." },
+        { "name": "Hetzner Cloud", "url": "https://www.hetzner.com/cloud/", "desc": "VPS européen, tarifs très bas, data centers Allemagne." },
+        { "name": "Caddy", "url": "https://caddyserver.com/", "desc": "Serveur web avec HTTPS automatique. Plus simple que Nginx." },
+        { "name": "n8n", "url": "https://n8n.io/", "desc": "Automatisation open source (comme Zapier mais self-hostable)." },
+        { "name": "Gitea", "url": "https://gitea.io/", "desc": "Hébergement Git self-hosted. Alternative à GitHub." }
+      ]
+    },
+    {
+      "name": "Vie privée & Sécurité",
+      "children": [
+        { "name": "Bitwarden", "url": "https://bitwarden.com/", "desc": "Gestionnaire de mots de passe open source. Self-hostable." },
+        { "name": "ProtonMail", "url": "https://proton.me/mail", "desc": "Email chiffré, hébergement Suisse." },
+        { "name": "Signal", "url": "https://signal.org/", "desc": "Messagerie chiffrée E2E. La référence." },
+        { "name": "uBlock Origin", "url": "https://ublockorigin.com/", "desc": "Bloqueur de publicités et trackers, le plus efficace." },
+        { "name": "Mullvad VPN", "url": "https://mullvad.net/", "desc": "VPN respectueux de la vie privée, sans compte email requis." },
+        { "name": "Privacy Guides", "url": "https://www.privacyguides.org/", "desc": "Recommandations d'outils respectueux de la vie privée, par thème." }
+      ]
+    },
+    {
+      "name": "Formation & Apprentissage",
+      "children": [
+        { "name": "MIT OpenCourseWare", "url": "https://ocw.mit.edu/", "desc": "Cours du MIT en libre accès, toutes disciplines." },
+        { "name": "Khan Academy", "url": "https://www.khanacademy.org/", "desc": "Maths, sciences, programmation — gratuit, pédagogie excellente." },
+        { "name": "YouTube (canaux techniques)", "url": "https://www.youtube.com/", "desc": "Channals : The Coding Train, Fireship, 3Blue1Brown, etc." },
+        { "name": "freeCodeCamp", "url": "https://www.freecodecamp.org/", "desc": "Apprendre le développement web de zéro, gratuit et certifiant." },
+        { "name": "Coursera (audit gratuit)", "url": "https://www.coursera.org/", "desc": "Cours universitaires, audit gratuit disponible sur la plupart." }
+      ]
+    },
+    {
+      "name": "Médias & Audio",
+      "children": [
+        { "name": "Audacity", "url": "https://www.audacityteam.org/", "desc": "Enregistrement et édition audio. Référence open source." },
+        { "name": "yt-dlp", "url": "https://github.com/yt-dlp/yt-dlp", "desc": "Télécharger des vidéos/audio depuis YouTube et 1000+ sites." },
+        { "name": "VLC", "url": "https://www.videolan.org/vlc/", "desc": "Lecteur multimédia universel." },
+        { "name": "Kdenlive", "url": "https://kdenlive.org/", "desc": "Montage vidéo open source, non linéaire." },
+        { "name": "OBS Studio", "url": "https://obsproject.com/", "desc": "Enregistrement et streaming vidéo. La référence gratuite." }
+      ]
+    },
+    {
+      "name": "Divers Utiles",
+      "children": [
+        { "name": "Nextcloud", "url": "https://nextcloud.com/", "desc": "Cloud personnel self-hosted. Alternative à Google Drive/Dropbox." },
+        { "name": "Joplin", "url": "https://joplinapp.org/", "desc": "Notes chiffrées, sync Nextcloud, open source." },
+        { "name": "draw.io / diagrams.net", "url": "https://app.diagrams.net/", "desc": "Diagrammes et schémas, gratuit, pas de compte requis." },
+        { "name": "Excalidraw", "url": "https://excalidraw.com/", "desc": "Tableau blanc collaboratif, style hand-drawn, open source." },
+        { "name": "Fmhy.net (complet)", "url": "https://fmhy.net/", "desc": "L'arbre complet. Des milliers de ressources organisées par thème." }
+      ]
+    }
+  ]
+}
--- a/public/data/outils.json
+++ b/public/data/outils.json
@@ -0,0 +1,90 @@
+{
+  "simulateurs": [
+    {
+      "id": "autonomie",
+      "icon": "🟢",
+      "titre": "Simulateur Autonomie",
+      "url": "https://calculs.trans-former.fr/autonomie/",
+      "description": "Évaluer le degré d'autonomie d'une famille à un site donné selon les ressources locales (eau, énergie, alimentation).",
+      "cta": "Lancer le simulateur →",
+      "tag": "outil-aep"
+    }
+  ],
+  "simulateurs_inspirations": [
+    {
+      "id": "florquin-prix-m2",
+      "icon": "💡",
+      "titre": "Estimation prix au m² — Florquin Studio",
+      "url": "https://offre.florquinstudio.com/",
+      "description": "Une agence parisienne qui a construit un système d'estimation au m² assez fin. Pas dans nos outils, mais inspirant pour qui veut industrialiser son chiffrage.",
+      "tag": "inspiration-externe"
+    }
+  ],
+  "opensource": [
+    {
+      "id": "dictee-universelle-groq",
+      "icon": "🎤",
+      "titre": "Dictée universelle Groq",
+      "url": "https://github.com/Jayjay-nene/dictee-universelle-groq",
+      "description": "Appuie sur une touche, parle, le texte apparaît au curseur avec ponctuation et majuscules auto. Transcription Whisper Groq < 1s. Marche dans toutes les applis Windows. Outil par Jayjay-nene.",
+      "tag": "recommande"
+    },
+    {
+      "id": "atis-voice",
+      "icon": "🎙",
+      "titre": "Atis Voice (text-to-speech)",
+      "url": null,
+      "description": "Pipeline TTS pour transformer un texte en audio.",
+      "tag": "disponible"
+    },
+    {
+      "id": "install-vps",
+      "icon": "🖥",
+      "titre": "Install VPS open source",
+      "url": null,
+      "description": "Setup pas-à-pas pour monter son propre VPS (Hetzner, Coolify, Caddy, Postgres…) en mode reproductible.",
+      "tag": "a-venir"
+    },
+    {
+      "id": "skills-claude-code",
+      "icon": "⚙",
+      "titre": "Skills Claude Code",
+      "url": null,
+      "description": "Skills custom pour booster sa pratique avec un agent IA.",
+      "tag": "a-venir"
+    }
+  ],
+  "bifurcation": {
+    "intro": "Beaucoup de jeunes diplômés en archi cherchent des chemins alternatifs. Cette section rassemble des témoignages, expériences, et ressources sur ce que c'est que de bifurquer.",
+    "videos_ofqa": [
+      { "ep": "01", "titre": "Architectes indépendants", "personnes": "Jules Nény & Imane Fatmi", "url": "https://youtu.be/aMreB5KdNhY" },
+      { "ep": "02", "titre": "Artiste & Maçon", "personnes": "Romane Dutour & Maël Canal", "url": "https://youtu.be/9gpjokx2ndI" },
+      { "ep": "03", "titre": "Social & BTP", "personnes": "Célia Berdy & Esilda Perrot", "url": null, "note": "vidéo perdue, doc PDF seulement" },
+      { "ep": "04", "titre": "Menuisier & Paysagiste", "personnes": "Adel Mohamedi & Julie Bowie", "url": "https://youtu.be/yKaRQhA3Z6g" },
+      { "ep": "05", "titre": "Éco-construction", "personnes": "Edouard Vermès", "url": "https://youtu.be/97bDg1BjeuQ" },
+      { "ep": "06", "titre": "Musicien & Urbaniste", "personnes": "Ruben Madar & Antoine Troccaz", "url": "https://drive.google.com/drive/folders/14g8YBn5bZAy8aIkHzQlOTrTtnWOaqRO3" },
+      { "ep": "07", "titre": "AMO & Réemploi", "personnes": "Domitille Chaigne & Clémence Bondon", "url": "https://drive.google.com/file/d/1Q9Za81CElszmMn5n8dBsG0pJkiWmB32c/view" },
+      { "ep": "08", "titre": "Gouvernance école", "personnes": "Solenn Guével", "url": "https://drive.google.com/drive/folders/1UaLsSyQcJydkXyV71klrY1tv9KgAh-mG" },
+      { "ep": "bonus", "titre": "PFE — invitation à faire collectif", "personnes": "Jules Nény & Imane Fatmi", "url": "https://youtu.be/4qTEIC2Lmqw" }
+    ],
+    "coalition_ensa_pb": {
+      "titre": "Coalition inter-asso ENSA-PB — victoire salle des enseignants",
+      "description": "Une coalition d'associations étudiantes a obtenu l'usage de la salle des enseignants pour des temps de travail collectif."
+    },
+    "ressources_externes": [
+      {
+        "id": "drop-the-kutch",
+        "icon": "🎧",
+        "titre": "Podcast Drop the Kutch — Sâm Afchar",
+        "url": "https://podcasts-francais.fr/podcast/drop-the-kutsch",
+        "description": "Témoignages de bifurcations post études d'archi. Super taf."
+      }
+    ]
+  },
+  "section_5_placeholder": {
+    "titre": "[V2 — Login] Logiciels pro",
+    "description": "Logiciels lourds (Adobe, AutoCAD…) — accès mutualisé. Disponible après création de compte AEP.",
+    "status": "bientot-login"
+  },
+  "footer_contribution": "Tu utilises un outil qui mérite d'être ici ? Écris-moi : contact@trans-former.fr"
+}
--- a/public/data/pfe-engages.json
+++ b/public/data/pfe-engages.json
@@ -0,0 +1,70 @@
+{
+  "projets": [
+    {
+      "id": "quartier-2030",
+      "titre": "Votre quartier en 2030",
+      "auteurs": ["Inconnu"],
+      "annee": "2020",
+      "ecole": "Inconnu",
+      "url": "https://quartier-2030.firebaseapp.com/",
+      "description": "Exploration prospective confrontant smart city, no future, résilience et deep ecology à l'échelle du quartier. Le travail donne à voir plusieurs futurs urbains contrastés, de l'utopie technologique au retrait radical, en laissant le visiteur naviguer entre les scénarios. Un travail d'orfèvre pour sortir de la pensée linéaire sur la ville.",
+      "thumb": null,
+      "link_status": "ok"
+    },
+    {
+      "id": "seine-nature",
+      "titre": "Seine — nature urbaine",
+      "auteurs": ["Inconnu"],
+      "annee": "2019",
+      "ecole": "Inconnu",
+      "url": "http://www.seine.natureurbaine.com/00_index/page_theme/theme.html",
+      "description": "Projet de transformation territoriale collective autour de la Seine, pensé comme une démarche systémique et pluridisciplinaire. L'intervention se concentre sur les marges périurbaines, traitées par une logique d'acupuncture : des micro-interventions précises pour enclencher des dynamiques plus larges. L'approche refuse le grand projet unique au profit d'un réseau de petites transformations.",
+      "thumb": null,
+      "link_status": "ok"
+    },
+    {
+      "id": "tmip",
+      "titre": "TMIP — Transformation de la Maison Individuelle Périurbaine",
+      "auteurs": ["Jules Nény"],
+      "annee": "2019",
+      "ecole": "ENSA Paris-Belleville",
+      "url": "https://issuu.com/transformationresilientes/docs/tmip_archijeunes_cstb_",
+      "description": "Étude de la maison périurbaine sous l'angle des Gilets jaunes : comment ce lieu de vie concentre les tensions entre émancipation individuelle et dépendance structurelle (voiture, énergie, services). Le projet propose un réseau de micro-infrastructures partagées pour transformer ces maisons isolées en systèmes résilients interconnectés. Publié avec ARCHI'JEUNES et le CSTB.",
+      "thumb": null,
+      "link_status": "ok"
+    },
+    {
+      "id": "filiere-bois",
+      "titre": "Enquête sur les paysages forestiers franciliens",
+      "auteurs": ["Quid Architecture"],
+      "annee": "2021",
+      "ecole": "Inconnu",
+      "url": "https://www.faireparis.com/fr/projets/faire-2021/enquete-sur-les-paysages-forestiers-franciliens-2159.html",
+      "description": "Projet lauréat FAIRE 2021. Enquête sur les dysfonctionnements de la filière bois en Île-de-France, aux interfaces entre sylviculteurs, scieries, artisans et maîtres d'ouvrage. Le travail cartographie les ruptures de filière et propose des interventions concrètes pour réparer les liens entre forêt et construction. Une démarche systémique rare dans les études architecturales.",
+      "thumb": null,
+      "link_status": "ok"
+    },
+    {
+      "id": "jeu-champagne",
+      "titre": "Jeu de rôle Champagne PFE — Plateau",
+      "auteurs": ["Inconnu"],
+      "annee": "2020",
+      "ecole": "Inconnu",
+      "url": "https://campfe2020.wixsite.com/champagnepfe/plateau",
+      "description": "Dispositif ludique et coopératif développé comme outil de médiation entre acteurs d'un territoire. Le jeu de rôle permet de traverser des problèmes complexes en engageant simultanément des parties prenantes aux intérêts divergents. Une exploration de l'architecture comme processus collectif plutôt que comme objet produit.",
+      "thumb": null,
+      "link_status": "ok"
+    },
+    {
+      "id": "transition-agricole",
+      "titre": "Transition agricole — réinvestissement de fermes traditionnelles",
+      "auteurs": ["Inconnu"],
+      "annee": "2020",
+      "ecole": "Inconnu",
+      "url": "https://www.calameo.com/books/007306483e0b23edb1db7",
+      "description": "Projet sur la transformation de fermes traditionnelles dans une logique agricole moderne et diversifiée. L'étude explore comment l'architecture peut accompagner les transitions d'usage des bâtiments ruraux, en articulant patrimonial et fonctionnel. Voir aussi le projet complémentaire sur la Seine aval : https://www.calameo.com/books/007063623f4d4b800b01d",
+      "thumb": null,
+      "link_status": "ok"
+    }
+  ]
+}
--- a/public/data/reseaux-bifurcation.json
+++ b/public/data/reseaux-bifurcation.json
--- a/public/icons/CREDITS.md
+++ b/public/icons/CREDITS.md
@@ -0,0 +1,12 @@
+# Icons Credits
+
+## outils-wrench.svg
+
+**Source :** Heroicons — `wrench-screwdriver` icon
+**Licence :** MIT
+**URL :** https://heroicons.com/
+**Note :** Fallback Heroicons utilisé car l'API Noun Project a retourné 403 Forbidden au moment du build (2026-05-22). L'icône `wrench-screwdriver` de Heroicons (MIT) est une clé à molette + tournevis, style line art minimaliste, compatible avec l'identité visuelle AEP.
+
+Si tu veux substituer par une icône Noun Project, utilise l'endpoint :
+`GET https://api.thenounproject.com/v2/icon?query=wrench&limit=20`
+avec les credentials OAuth 1.0a stockées dans `_System/API-credentials.md`.
--- a/public/icons/outils-wrench.svg
+++ b/public/icons/outils-wrench.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l5.654-4.654m5.598-2.337 3.07-3.293a2.25 2.25 0 0 0-3.182-3.182l-3.293 3.07M6.75 12.75l-2.25.75.75-2.25 2.25-.75-.75 2.25Z" />
+</svg>
--- a/server/api/admin/rag-info.get.ts
+++ b/server/api/admin/rag-info.get.ts
@@ -0,0 +1,39 @@
+/**
+ * GET /api/admin/rag-info
+ *
+ * Retourne le statut du système RAG (v1 + v2) pour la page /admin/rag-status
+ */
+
+import { existsSync, readFileSync } from 'fs'
+import { resolve } from 'path'
+
+export default defineEventHandler(async (_event) => {
+  // Statut V2 : compter les embeddings
+  let v2Count = 0
+  let v2Date: string | null = null
+  let v2Model: string | null = null
+
+  try {
+    // Chercher depuis process.cwd() (racine du projet Nuxt)
+    const embPath = resolve(process.cwd(), 'server', 'data', 'embeddings-v2.json')
+    if (existsSync(embPath)) {
+      const data = JSON.parse(readFileSync(embPath, 'utf-8'))
+      v2Count = data.embeddings?.length ?? 0
+      v2Date = data.meta?.date ?? null
+      v2Model = data.meta?.model ?? null
+    }
+  } catch (e: any) {
+    console.warn('[rag-info] Erreur lecture embeddings-v2.json :', e?.message ?? e)
+  }
+
+  return {
+    v2_embeddings_count: v2Count,
+    v2_ready: v2Count > 0,
+    v2_model: v2Model ?? 'mistral-embed',
+    v2_generated_date: v2Date ?? null,
+    v1_enabled: process.env.RAG_V1_ENABLED !== 'false',
+    v1_deprecation_date: process.env.RAG_V1_DEPRECATION_DATE ?? 'non défini',
+    model_chat: 'mistral-small-latest',
+    setup_command: 'MISTRAL_API_KEY=xxx node scripts/vectorize-v2.js'
+  }
+})
--- a/server/api/chatbot-reseaux.post.ts
+++ b/server/api/chatbot-reseaux.post.ts
@@ -0,0 +1,125 @@
+/**
+ * POST /api/chatbot-reseaux
+ * Chatbot Réseaux AEP — Carte 2 "Réseaux de bifurcation"
+ * Keyword search sur reseaux-bifurcation.json + Mistral Small.
+ */
+// @ts-ignore — JSON import résolu par Rollup
+import reseauxData from '../../public/data/reseaux-bifurcation.json'
+import { checkRateLimitJson } from '~/server/utils/rateLimitJson'
+
+interface Structure {
+  id: string
+  nom: string
+  url?: string
+  pays?: string
+  ville?: string
+  famille_principale?: string
+  hashtags?: string[]
+  description_courte?: string
+  description_longue?: string
+}
+
+const SYSTEM_PROMPT = `Tu es un conseiller expert au service des architectes engagés dans la transition écologique. Tu connais le réseau AEP (Architecture d'Écologie Politique) — une cartographie des collectifs, agences, initiatives et réseaux qui portent une vision alternative de l'architecture en France et en Europe.
+
+Ton rôle : orienter l'architecte vers les structures les plus pertinentes pour sa situation, à partir des données ci-dessous.
+
+RÈGLES :
+1. Ne cite QUE des structures présentes dans le contexte ci-dessous.
+2. Sois direct et engagé — c'est l'esprit AEP.
+3. Réponse max 250 mots, en français.
+4. Retourne UNIQUEMENT un JSON valide, sans texte avant ou après.
+
+FORMAT :
+{
+  "reponse_texte": "Ta réponse en prose, max 250 mots",
+  "fiches_recommandees": [
+    { "id": "slug-id", "nom": "Nom structure", "explication": "Pourquoi en 1 phrase" }
+  ]
+}
+
+STRUCTURES DISPONIBLES :
+{{STRUCTURES_JSON}}`
+
+function scoreStructure(s: Structure, keywords: string[]): number {
+  if (keywords.length === 0) return 1
+  const haystack = [s.nom, s.famille_principale, s.description_courte, s.description_longue, (s.hashtags ?? []).join(' '), s.ville, s.pays]
+    .filter(Boolean).join(' ').toLowerCase()
+  return keywords.reduce((score, kw) => score + (haystack.includes(kw) ? 1 : 0), 0)
+}
+
+function extractKeywords(q: string): string[] {
+  return q.toLowerCase().replace(/[^\w\sàâäéèêëîïôùûüç-]/g, ' ').split(/\s+/).filter(w => w.length >= 3).slice(0, 10)
+}
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+
+  const ip = getHeader(event, 'x-forwarded-for')?.split(',')[0].trim() || event.node.req.socket?.remoteAddress || '0.0.0.0'
+  const allowed = checkRateLimitJson(ip, 'chatbot-reseaux', 20)
+  if (!allowed) throw createError({ statusCode: 429, message: 'Limite de 20 questions par jour atteinte.' })
+
+  const body = await readBody(event)
+  const question: string = (body?.question ?? '').trim()
+  if (!question || question.length < 5) throw createError({ statusCode: 400, message: 'Question trop courte.' })
+
+  const structures: Structure[] = ((reseauxData as any).structures ?? [])
+  const keywords = extractKeywords(question)
+
+  const top = structures
+    .map(s => ({ s, score: scoreStructure(s, keywords) }))
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 20)
+    .map(x => x.s)
+
+  const context = top.map(s => ({
+    id: s.id,
+    nom: s.nom,
+    famille: s.famille_principale ?? '',
+    lieu: [s.ville, s.pays].filter(Boolean).join(', '),
+    tags: (s.hashtags ?? []).slice(0, 5).join(', '),
+    description: (s.description_courte ?? s.description_longue ?? '').slice(0, 200),
+  }))
+
+  const systemPrompt = SYSTEM_PROMPT.replace('{{STRUCTURES_JSON}}', JSON.stringify(context, null, 0))
+
+  const mistralApiKey = config.mistralApiKey as string
+  if (!mistralApiKey) throw createError({ statusCode: 500, message: 'Clé API Mistral manquante.' })
+
+  let mistralRaw: string
+  try {
+    const res = await $fetch<{ choices: { message: { content: string } }[] }>(
+      'https://api.mistral.ai/v1/chat/completions',
+      {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${mistralApiKey}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          model: 'mistral-small-latest',
+          temperature: 0.3,
+          max_tokens: 700,
+          response_format: { type: 'json_object' },
+          messages: [
+            { role: 'system', content: systemPrompt },
+            { role: 'user', content: question },
+          ],
+        }),
+      }
+    )
+    mistralRaw = res.choices?.[0]?.message?.content ?? '{}'
+  } catch {
+    throw createError({ statusCode: 502, message: 'Erreur IA — réessaie dans quelques instants.' })
+  }
+
+  try {
+    const parsed = JSON.parse(mistralRaw)
+    return {
+      reponse_texte: parsed.reponse_texte ?? "Je n'ai pas pu analyser ta demande.",
+      fiches_recommandees: (parsed.fiches_recommandees ?? []).map((r: any) => ({
+        id: r.id,
+        nom: r.nom ?? structures.find(s => s.id === r.id)?.nom ?? r.id,
+        explication: r.explication ?? '',
+      })),
+    }
+  } catch {
+    return { reponse_texte: "Je n'ai pas pu analyser ta demande.", fiches_recommandees: [] }
+  }
+})
--- a/server/api/chatbot-taff.post.ts
+++ b/server/api/chatbot-taff.post.ts
@@ -0,0 +1,136 @@
+/**
+ * POST /api/chatbot-taff
+ * Chatbot d'aiguillage — Carte 3 "Trouver du taf"
+ * Lit plateformes-taff.json, appelle Mistral Small, retourne recommandations.
+ */
+
+// @ts-ignore — JSON import résolu par Vite/Rollup
+import taffData from '../../public/data/plateformes-taff.json'
+import { checkRateLimitJson } from '~/server/utils/rateLimitJson'
+
+interface PlateformeMinimal {
+  id: string
+  nom: string
+  type: string
+  description_courte: string
+  scoring: {
+    remuneration: string | null
+    transparence: string | null
+    pratiques: string | null
+    ecologie: string | null
+    matching: string | null
+    tag_global: string
+    justification_tag: string
+  }
+  secteurs_servis: string[]
+  cout_entree: string
+}
+
+const SYSTEM_PROMPT = `Tu es un conseiller expert au service des architectes indépendants français. Tu connais toutes les plateformes de mise en relation architecte↔particulier et les agrégateurs d'appels d'offres publics référencés par AEP (Architecture d'Écologie Politique).
+
+Ton rôle : aider l'architecte à choisir LA ou LES plateformes adaptées à sa situation, en t'appuyant exclusivement sur les données ci-dessous.
+
+RÈGLES :
+1. Ne recommande QUE des plateformes présentes dans le contexte ci-dessous.
+2. Sois direct et opinionné — c'est ça la valeur d'AEP.
+3. Si une plateforme est ❌ "À éviter", signale-le clairement.
+4. Réponse max 250 mots, en français, ton conseiller pair.
+5. Retourne UNIQUEMENT un JSON valide, sans texte avant ou après.
+
+FORMAT :
+{
+  "reponse_texte": "Ta réponse en prose, max 250 mots",
+  "plateformes_recommandees": [
+    { "id": "slug-kebab", "nom": "Nom plateforme", "raison": "Pourquoi cette plateforme en 1 phrase" }
+  ]
+}
+
+PLATEFORMES DISPONIBLES :
+{{PLATEFORMES_JSON}}`
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+
+  const ip =
+    getHeader(event, 'x-forwarded-for')?.split(',')[0].trim() ||
+    event.node.req.socket?.remoteAddress ||
+    '0.0.0.0'
+
+  const allowed = checkRateLimitJson(ip, 'chatbot-taff', 20)
+  if (!allowed) {
+    throw createError({ statusCode: 429, statusMessage: 'Limite de 20 questions par jour atteinte.' })
+  }
+
+  const body = await readBody(event)
+  const question: string = (body?.question ?? '').trim()
+  if (!question || question.length < 5) {
+    throw createError({ statusCode: 400, statusMessage: 'Question trop courte.' })
+  }
+
+  // Données bundlées statiquement à la compilation (import JSON)
+  const plateformes: PlateformeMinimal[] = ((taffData as any).plateformes ?? []).map((p: any) => ({
+    id: p.id,
+    nom: p.nom,
+    type: p.type,
+    description_courte: p.description_courte,
+    scoring: p.scoring,
+    secteurs_servis: p.secteurs_servis,
+    cout_entree: p.cout_entree,
+  }))
+
+  const context = plateformes.map(p => ({
+    id: p.id,
+    nom: p.nom,
+    type: p.type === 'b2c-mise-en-relation' ? 'B2C' : 'Appels offres publics',
+    tag: p.scoring.tag_global,
+    resume: p.description_courte,
+    secteurs: p.secteurs_servis.join(', '),
+    cout: p.cout_entree,
+    justification: p.scoring.justification_tag,
+  }))
+
+  const systemPrompt = SYSTEM_PROMPT.replace('{{PLATEFORMES_JSON}}', JSON.stringify(context, null, 0))
+
+  const mistralApiKey = config.mistralApiKey as string
+  if (!mistralApiKey) {
+    throw createError({ statusCode: 500, statusMessage: 'Clé API Mistral manquante.' })
+  }
+
+  let mistralRaw: string
+  try {
+    const res = await $fetch<{ choices: { message: { content: string } }[] }>(
+      'https://api.mistral.ai/v1/chat/completions',
+      {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${mistralApiKey}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          model: 'mistral-small-latest',
+          temperature: 0.3,
+          max_tokens: 700,
+          response_format: { type: 'json_object' },
+          messages: [
+            { role: 'system', content: systemPrompt },
+            { role: 'user', content: question },
+          ],
+        }),
+      }
+    )
+    mistralRaw = res.choices?.[0]?.message?.content ?? '{}'
+  } catch {
+    throw createError({ statusCode: 502, statusMessage: 'Erreur IA — réessaie dans quelques instants.' })
+  }
+
+  try {
+    const parsed = JSON.parse(mistralRaw)
+    return {
+      reponse_texte: parsed.reponse_texte ?? "Je n'ai pas pu analyser ta demande.",
+      plateformes_recommandees: (parsed.plateformes_recommandees ?? []).map((r: any) => ({
+        id: r.id,
+        nom: r.nom ?? plateformes.find(p => p.id === r.id)?.nom ?? r.id,
+        raison: r.raison ?? '',
+      })),
+    }
+  } catch {
+    return { reponse_texte: "Je n'ai pas pu analyser ta demande.", plateformes_recommandees: [] }
+  }
+})
--- a/server/api/chatbot-v2.post.ts
+++ b/server/api/chatbot-v2.post.ts
@@ -0,0 +1,194 @@
+/**
+ * POST /api/chatbot-v2
+ *
+ * Chatbot V2 - Embedding-based search sur structures bifurcation
+ * Coexiste avec /api/chatbot (keyword NocoDB) pendant la transition.
+ *
+ * SETUP AVANT DEPLOY :
+ * cd nav-carte && MISTRAL_API_KEY=xxx node scripts/vectorize-v2.js
+ * Coût estimé : ~0.10 EUR pour 120 fiches
+ *
+ * Flow :
+ *   1. Rate limit (réutilise checkRateLimitJson, 10 req/IP/jour)
+ *   2. Embed la query via Mistral Embed (mistral-embed)
+ *   3. Top-5 cosine similarity sur embeddings-v2.json
+ *   4. Si embeddings absents : réponse graceful (v2_ready: false)
+ *   5. Construit contexte RAG depuis les fiches candidates
+ *   6. Génère réponse Mistral Small (json_object)
+ *   7. Retourne { reponse_texte, fiches_recommandees, sources, v2_ready }
+ *
+ * Variables d'env :
+ *   MISTRAL_API_KEY       - Clé Mistral (partagée avec chatbot v1)
+ *   RAG_V1_ENABLED        - true/false (défaut: true) - coexistence pendant transition
+ *   RAG_V1_DEPRECATION_DATE - Date prévue deprecation v1 (ex: 2026-05-18)
+ */
+
+import { checkRateLimitJson } from '~/server/utils/rateLimitJson'
+import { loadEmbeddingsV2, topKSearch } from '~/server/utils/vectorSearch'
+
+// ── System prompt V2 ───────────────────────────────────────────────────────────
+
+const SYSTEM_PROMPT_V2 = `Tu es un assistant pour la carte des réseaux de bifurcation en architecture (projet AEP).
+Tu réponds aux questions sur les structures, les pratiques, les pensées écologiques.
+
+Règles :
+- Cite chaque structure par son nom exact et son fiche_id
+- Indique la famille (1-5) entre parenthèses après chaque nom
+- Reste sobre et descriptif - pas militant agressif
+- Tirets longs interdits : utilise des - ou des ;
+- Max 200 mots par réponse
+- Si hors-scope (pas archi/habiter/écologie), redirige poliment vers la carte
+- Retourne UNIQUEMENT un JSON valide, sans texte avant ou après
+
+Familles :
+1 - Réemploi et filières
+2 - Frugalité et low-tech
+3 - Architecture sociale et précarités
+4 - Collectifs, écolieux et AMO
+5 - Urbanisme de transition et territoires
+
+FORMAT DE SORTIE :
+{
+  "reponse_texte": "Ta réponse en prose (max 200 mots)",
+  "fiches_recommandees": [
+    { "fiche_id": "f1-rotor", "nom": "Rotor", "explication": "1-2 phrases pourquoi cette fiche" }
+  ]
+}
+
+CONTEXTE - Structures disponibles :
+{{CONTEXTE_RAG}}`
+
+// ── Handler ────────────────────────────────────────────────────────────────────
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+
+  // 1. Rate limit
+  const ip =
+    getHeader(event, 'x-forwarded-for')?.split(',')[0].trim() ||
+    event.node.req.socket?.remoteAddress ||
+    '0.0.0.0'
+
+  const allowed = checkRateLimitJson(ip, 'chatbot-v2', 10)
+  if (!allowed) {
+    throw createError({
+      statusCode: 429,
+      statusMessage: 'Limite de 10 questions par jour atteinte.'
+    })
+  }
+
+  // 2. Validation body
+  const body = await readBody(event)
+  const question: string = (body?.question ?? '').trim()
+
+  if (!question || question.length < 3) {
+    throw createError({ statusCode: 400, statusMessage: 'Question trop courte.' })
+  }
+
+  const mistralApiKey = config.mistralApiKey as string
+  if (!mistralApiKey) {
+    throw createError({ statusCode: 500, statusMessage: 'Clé API Mistral manquante.' })
+  }
+
+  // 3. Charger embeddings V2 (lazy, cachés en mémoire)
+  const embeddingsV2 = loadEmbeddingsV2()
+
+  // Graceful fallback si le script vectorize-v2.js n'a pas encore été lancé
+  if (embeddingsV2.length === 0) {
+    return {
+      reponse_texte: "La base vectorielle V2 est en cours de préparation. Merci d'utiliser le chatbot classique en attendant.",
+      fiches_recommandees: [],
+      sources: [],
+      v2_ready: false
+    }
+  }
+
+  // 4. Embed la query via Mistral Embed
+  let queryEmbedding: number[]
+  try {
+    const embedRes = await $fetch<{ data: { embedding: number[] }[] }>(
+      'https://api.mistral.ai/v1/embeddings',
+      {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${mistralApiKey}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          model: 'mistral-embed',
+          inputs: [question]
+        })
+      }
+    )
+    queryEmbedding = embedRes.data[0].embedding
+  } catch (e: any) {
+    console.error('[chatbot-v2] Erreur embedding Mistral :', e?.message ?? e)
+    throw createError({ statusCode: 502, statusMessage: 'Erreur embedding Mistral.' })
+  }
+
+  // 5. Top-5 cosine similarity
+  const v2Results = topKSearch(embeddingsV2, queryEmbedding, 5)
+
+  // 6. Contexte RAG
+  const candidatesContext = v2Results.map(r => ({
+    fiche_id: r.fiche_id,
+    nom: r.nom,
+    famille: r.famille,
+    hashtags: r.hashtags,
+    score: r.score,
+    preview: r.text_preview
+  }))
+
+  const contextStr = candidatesContext
+    .map(c => `[${c.fiche_id}] ${c.nom} (famille ${c.famille}, score: ${c.score.toFixed(2)})\n${c.preview}`)
+    .join('\n\n---\n\n')
+
+  const systemPrompt = SYSTEM_PROMPT_V2.replace('{{CONTEXTE_RAG}}', contextStr)
+
+  // 7. Mistral Small - génération réponse
+  let mistralRaw: string
+  try {
+    const mistralRes = await $fetch<{
+      choices: { message: { content: string } }[]
+    }>('https://api.mistral.ai/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${mistralApiKey}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        model: 'mistral-small-latest',
+        temperature: 0.3,
+        max_tokens: 600,
+        response_format: { type: 'json_object' },
+        messages: [
+          { role: 'system', content: systemPrompt },
+          { role: 'user', content: question }
+        ]
+      })
+    })
+    mistralRaw = mistralRes.choices?.[0]?.message?.content ?? '{}'
+  } catch (e: any) {
+    console.error('[chatbot-v2] Erreur Mistral Small :', e?.message ?? e)
+    throw createError({ statusCode: 502, statusMessage: 'Erreur appel Mistral Small.' })
+  }
+
+  // 8. Parse JSON
+  let parsed: { reponse_texte: string; fiches_recommandees: any[] }
+  try {
+    parsed = JSON.parse(mistralRaw)
+    if (!parsed.reponse_texte) throw new Error('reponse_texte absent')
+  } catch {
+    parsed = {
+      reponse_texte: "Impossible d'analyser la réponse.",
+      fiches_recommandees: []
+    }
+  }
+
+  return {
+    reponse_texte: parsed.reponse_texte,
+    fiches_recommandees: parsed.fiches_recommandees ?? [],
+    sources: candidatesContext,
+    v2_ready: true
+  }
+})
--- a/server/api/plateformes-taff.get.ts
+++ b/server/api/plateformes-taff.get.ts
@@ -0,0 +1,9 @@
+/**
+ * GET /api/plateformes-taff
+ * Retourne les données TAFF — JSON importé statiquement (bundlé par Rollup).
+ * Utilisé par le chatbot-taff en interne et potentiellement par le front.
+ */
+// @ts-ignore — JSON import résolu par Vite/Rollup
+import data from '../../public/data/plateformes-taff.json'
+
+export default defineEventHandler(() => data)
--- a/server/utils/vectorSearch.ts
+++ b/server/utils/vectorSearch.ts
@@ -0,0 +1,96 @@
+/**
+ * Recherche vectorielle sur les embeddings V2
+ * Cosine similarity + top-K
+ *
+ * Utilisé par : server/api/chatbot-v2.post.ts
+ * Données     : server/data/embeddings-v2.json (généré par scripts/vectorize-v2.js)
+ */
+
+import { readFileSync, existsSync } from 'fs'
+import { fileURLToPath } from 'url'
+import { resolve, dirname } from 'path'
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+
+export interface EmbeddingEntry {
+  fiche_id: string
+  nom: string
+  famille: number
+  hashtags: string[]
+  embedding: number[]
+  text_preview: string
+}
+
+export interface SearchResult {
+  fiche_id: string
+  nom: string
+  famille: number
+  hashtags: string[]
+  score: number
+  text_preview: string
+}
+
+// ── Cosine similarity ──────────────────────────────────────────────────────────
+
+export function cosineSimilarity(a: number[], b: number[]): number {
+  if (a.length !== b.length) return 0
+  let dot = 0, normA = 0, normB = 0
+  for (let i = 0; i < a.length; i++) {
+    dot += a[i] * b[i]
+    normA += a[i] * a[i]
+    normB += b[i] * b[i]
+  }
+  const denom = Math.sqrt(normA) * Math.sqrt(normB)
+  return denom === 0 ? 0 : dot / denom
+}
+
+// ── Top-K search ───────────────────────────────────────────────────────────────
+
+export function topKSearch(
+  embeddings: EmbeddingEntry[],
+  queryEmbedding: number[],
+  k: number = 5
+): SearchResult[] {
+  return embeddings
+    .map(e => ({
+      fiche_id: e.fiche_id,
+      nom: e.nom,
+      famille: e.famille,
+      hashtags: e.hashtags,
+      score: cosineSimilarity(e.embedding, queryEmbedding),
+      text_preview: e.text_preview
+    }))
+    .sort((a, b) => b.score - a.score)
+    .slice(0, k)
+}
+
+// ── Chargement lazy des embeddings (cache module-level) ────────────────────────
+
+let _embeddingsV2: EmbeddingEntry[] | null = null
+
+export function loadEmbeddingsV2(): EmbeddingEntry[] {
+  if (_embeddingsV2 !== null) return _embeddingsV2
+
+  try {
+    // Résolution du chemin depuis server/utils/ vers server/data/
+    const currentDir = dirname(fileURLToPath(import.meta.url))
+    const embPath = resolve(currentDir, '..', 'data', 'embeddings-v2.json')
+
+    if (!existsSync(embPath)) {
+      console.warn('[vectorSearch] embeddings-v2.json absent - V2 vector search désactivé')
+      console.warn('[vectorSearch] Lancer : MISTRAL_API_KEY=xxx node scripts/vectorize-v2.js')
+      _embeddingsV2 = []
+      return []
+    }
+
+    const raw = readFileSync(embPath, 'utf-8')
+    const data = JSON.parse(raw)
+    _embeddingsV2 = data.embeddings ?? []
+    console.log(`[vectorSearch] ${_embeddingsV2!.length} embeddings V2 chargés (${data.meta?.model ?? 'unknown'})`)
+    return _embeddingsV2!
+  } catch (e: any) {
+    console.warn('[vectorSearch] Erreur chargement embeddings-v2.json :', e?.message ?? e)
+    _embeddingsV2 = []
+    return []
+  }
+}
--- a/types/structure-v2.ts
+++ b/types/structure-v2.ts
@@ -0,0 +1,91 @@
+/**
+ * Types V2 - Carte des réseaux de bifurcation
+ * Source : public/data/reseaux-bifurcation.json
+ */
+
+export interface StructureV2 {
+  id: string
+  nom: string
+  url: string
+  pays: string
+  ville: string
+  famille_principale: 1 | 2 | 3 | 4 | 5
+  familles_secondaires?: number[]
+  hashtags: string[]
+  type_principal: string
+  badges: {
+    centre_ressources: boolean
+    mouvement_manifeste: boolean
+    contre_pouvoir_spatial: boolean
+    f6_recherche_politique: boolean
+  }
+  description_courte: string
+  description_longue: string
+  pensees: { id: string; label: string; confiance: string }[]
+  sources: { type: string; titre: string; url: string }[]
+  already_in_v1: boolean
+  eligible_v2: boolean
+  // Geocoords (ajoutés par géocodage - peut être null)
+  latitude?: number | null
+  longitude?: number | null
+}
+
+export interface ReseauxBifurcationData {
+  version: string
+  meta: {
+    total_structures: number
+    total_projets_emblematiques: number
+    total_edges_graphe: number
+    familles: { id: number; label: string; color: string }[]
+    hashtags_officiels: string[]
+  }
+  structures: StructureV2[]
+  projets: ProjetEmblematique[]
+  graphe: { edges: GrapheEdge[] }
+}
+
+export interface ProjetEmblematique {
+  id: string
+  nom: string
+  structure_parent: string
+  annee?: number
+  lieu?: string
+  geocoords?: { lat: number; lng: number } | null
+  description: string
+  url?: string | null
+  tags: string[]
+}
+
+export interface GrapheEdge {
+  source: string
+  target: string
+  types: string[]
+  score: number
+  evidence: string
+}
+
+// Mapping StructureV2 vers le format attendu par NavMap (interface Org)
+// NavMap attend { Id, latitude, longitude, nom, ... }
+export function structureToMapOrg(s: StructureV2, index: number): {
+  Id: number
+  nom: string
+  latitude?: number | null
+  longitude?: number | null
+  prioritaire?: boolean
+  famille_principale?: number
+  hashtags?: string[]
+  type_principal?: string
+  description_courte?: string
+} {
+  return {
+    Id: index,
+    nom: s.nom,
+    latitude: s.latitude,
+    longitude: s.longitude,
+    prioritaire: s.badges?.centre_ressources || s.badges?.mouvement_manifeste || s.badges?.contre_pouvoir_spatial,
+    famille_principale: s.famille_principale,
+    hashtags: s.hashtags,
+    type_principal: s.type_principal,
+    description_courte: s.description_courte,
+  }
+}
Author	SHA1	Message	Date
Jules Neny	db8f614928	fix(CartePensees): reformatage syntaxe - fichier condensé sur 1 ligne cassait le build Vite/Vue	2026-05-22 11:07:10 +02:00
Jules Neny	59cb81a055	Merge P3 media modif	2026-05-22 11:02:05 +02:00
Jules Neny	91e3466ec6	Merge P2 outils build	2026-05-22 11:01:30 +02:00
Jules Neny	cb75889231	feat(media): 3 sous-onglets RAG/LightRAG/Projets + titres cercles D3 + layer PDF FRACAS + onglet PFE	2026-05-22 11:00:00 +02:00
Jules Neny	422f45116f	feat(outils): page Outils V1 + composants TreeASCII/OutilCard/SimulateurFeature + nav premier onglet	2026-05-22 10:58:39 +02:00
Jules Neny	f5732bf336	feat(mobile+UX): refonte hamburger, pop-ups Mission, Manifeste, fixes mobile Hamburger: - Ajout Jobs, Manifeste, Soutenir - Ré-ordonnancement (cartes/RAG/Codev en haut, ressources en bas) Pop-ups Mission: - MissionPopup générique (slot, props title/ctaLabel/storageKey) - Auto-show 1ère visite Carte 1 (Entraide) et Carte 2 (Réseaux AEP) - Bouton (i) flottant pour rouvrir Pages: - /manifeste : nouvelle page (texte version page-carto-V1) - /a-propos : section 1 retirée (devient pop-up Carte 1) + scroll latéral fixé - /agences : 3e onglet "Graphe" sur mobile + labels structures sur GraphView - /trouver-du-taf : intro pédagogique repliable (onglets / tags / 5 axes), filtres mobile repliables, "Plateformes B2C" → "Pour archi indépendants" Mobile UX: - FAB coeur jaune Soutenir retiré (BandeauBas) — accessible via hamburger - FicheModal/V2 : décalage top:76px sur mobile pour ne plus mordre header - Logo header : "Architecture d'Écologie / Politique" en clair (2 lignes) Cause racine résolue: - /api/chatbot-reseaux n'avait jamais été déployé → 404 en prod avant ce build 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-08 18:58:42 +02:00
Jules Neny	5967a5af57	fix(chatbot): séparation définitive Carte1/Carte2 + markdown inline styles - ChatbotReseaux.vue : composant standalone, endpoint hardcodé /api/chatbot-reseaux, onboarding 120 réseaux AEP, aucun prop partagé avec ChatbotSheet - ChatbotSheet.vue : restauré état simple, /api/chatbot hardcodé, onboarding Carte 1 - agences.vue : ChatbotReseaux au lieu de ChatbotSheet - useMarkdown.ts : inline styles (font-weight:700 etc) — zéro dépendance CSS, fonctionne dans tout contexte Vue scoped/v-html sans exception Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 02:38:47 +02:00
Jules Neny	419071b4c5	fix(chatbot): double-sécurité endpoint — prop + useRoute fallback Route /agences → /api/chatbot-reseaux garanti, même si prop non reçu. Titre du chatbot affiche la carte active pour confirmation visuelle. activeEndpoint computed depuis props.endpoint ?? route-based detection. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 02:26:54 +02:00
Jules Neny	f7b01c33e6	fix(chatbot): markdown :deep() + onboarding v-if/v-else propre - CSS: :deep(.md-content) perce le scoped — résout l'écrasement par .assistant-bubble p - Template: <template v-if> / <template v-else> au lieu de <p v-if /> + v-else (tag void + v-else = pairing HTML instable) - Carte 1 retrouve son onboarding d'origine (v-else sur props.onboarding absent) - Carte 2 garde son onboarding 120 structures via prop Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 02:07:28 +02:00
Jules Neny	a72928343f	fix(chatbot): import explicite useMarkdown + titre/onboarding par carte - ChatbotSheet: import explicite useMarkdown (plus d'auto-import incertain) - Props: title, onboarding, endpoint - agences.vue: titre 'Réseaux AEP' + message d'accueil distinct + endpoint correct - Header chatbot affiche le nom de la carte active Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 01:54:38 +02:00
Jules Neny	f9a0875727	fix(chatbot): Réseaux AEP → /api/chatbot-reseaux + prop endpoint ChatbotSheet - server/api/chatbot-reseaux.post.ts : keyword search sur reseaux-bifurcation.json (120 structures, même pattern que chatbot-taff) - ChatbotSheet.vue : prop endpoint? (défaut /api/chatbot) + renderMd déjà actif - agences.vue : endpoint='/api/chatbot-reseaux' Markdown s'active au prochain restart du bat (cache .nuxt à nettoyer). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 01:43:02 +02:00
Jules Neny	ec9178be08	feat(ux): markdown chatbots + header Jobs centré + cible archi indépendants - composables/useMarkdown.ts : renderer MD léger (bold/italic/listes/titres) - ChatbotSheet.vue + trouver-du-taf.vue : v-html renderMd() sur messages bot - assets/css/main.css : styles .md-content globaux pour tous les chatbots - taff-header centré + phrase cible 'architectes indépendants, 70% de la profession' Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 01:26:46 +02:00
Jules Neny	6525afd5f5	fix(chatbot-taff): import JSON statique — fonctionne dev + prod Import direct du JSON au moment du build (bundlé par Rollup). Supprime serverAssets et useStorage qui ne marchaient pas en dev Nitro. Ajoute GET /api/plateformes-taff comme endpoint réutilisable. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 01:17:07 +02:00
Jules Neny	4d7e8bede9	fix(chatbot-taff): useStorage('assets:taff') — lecture JSON native Nitro - nuxt.config.ts: nitro.serverAssets pointe sur public/data/ - chatbot-taff: useStorage remplace readFileSync et $fetch (fonctionne dev + prod sans dépendance filesystem ni réseau) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 01:13:21 +02:00
Jules Neny	70b9b1aa3c	fix(chatbot-taff): lecture JSON via $fetch(origin) — fonctionne dev + prod Remplace readFileSync (chemin instable Nitro) par $fetch sur le serveur lui-même qui sert déjà plateformes-taff.json en statique. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 01:10:29 +02:00
Jules Neny	cc93571d94	fix(chatbot-taff): Windows path — process.cwd() → fileURLToPath(import.meta.url) Crash ESM loader sur Windows (protocole c:) corrigé. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 01:05:06 +02:00
Jules Neny	2b34d05585	fix(codev): demo - CSS tabs + annuaire manquants	2026-05-07 00:58:14 +02:00
Jules Neny	19ff17e236	feat(taff): layout colonne + modal positionné + chatbot flottant - Grille : 3 colonnes → 1 colonne centrée 720px (respire, 16 fiches) - Modal : top fixe 72px au lieu de top-1/2 (ne mord plus le header) - Chatbot FAB : bouton fixe bas-droite + panel slide-in avec Mistral - /api/chatbot-taff : endpoint dédié lisant plateformes-taff.json - Cartes : layout restructuré tag/nom/axes/desc-3-lignes/footer Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 00:57:58 +02:00
Jules Neny	eb1bcf6080	feat(aep-v2): restore composants V2 manquants sur main (NavMapV2 + HashtagFilter + GraphView + FicheFamilleModal + types + css + server) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 00:56:08 +02:00
Jules Neny	9eb66ac10c	fix(data): restore reseaux-bifurcation.json manquant sur main (21072L, 120 structures)	2026-05-07 00:51:28 +02:00