feat(nav): restructure cartes + fixes UI

- pages/index.vue : restaurée Carte 1 entraide (NocoDB, 481L)
- pages/agences.vue : Carte 2 réseaux bifurcation + chatbot outre-mer
- app.vue : renommé "Agences Inspirantes" → "Réseaux AEP" (desktop + mobile)
- nuxt.config.ts : leaflet CSS global + cacheDir hors Dropbox
- NavMapV2.vue : double rAF pour init Leaflet après layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.dropboxignore

@@ -0,0 +1,4 @@
+node_modules
+.nuxt
+.output
+.nitro

app.vue

@@ -7,16 +7,21 @@
       style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);"
     >
       <!-- Logo -->
-      <a href="/" class="logo-link flex items-center gap-2 hover:opacity-90 transition-opacity shrink-0" title="Architecture d'Écologie Politique">
+      <a href="/" class="flex items-center gap-2 hover:opacity-90 transition-opacity shrink-0 group relative" title="Architecture d'Écologie Politique">
         <div
-          class="h-8 px-2 rounded-lg flex items-center justify-center shrink-0"
+          class="h-7 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="logo-text flex flex-col leading-tight">
+        <div class="flex flex-col">
-          <span class="logo-line-1 font-bold tracking-tight" style="color: var(--nav-text);">Architecture</span>
+          <span class="font-bold text-base tracking-tight leading-tight" style="color: var(--nav-text);">AEP</span>
-          <span class="logo-line-2 font-bold tracking-tight" style="color: var(--nav-text);">d'Écologie Politique</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>
       </a>
 
@@ -41,14 +46,7 @@
           class="nav-tab"
           :class="{ 'nav-tab--active': route.path === '/trouver-du-taf' }"
         >
-          Jobs
+          Trouver du taf
-        </NuxtLink>
-        <NuxtLink
-          to="/codev"
-          class="nav-tab"
-          :class="{ 'nav-tab--active': route.path.startsWith('/codev') }"
-        >
-          Codev
         </NuxtLink>
         <NuxtLink
           to="/rag"
@@ -173,14 +171,10 @@
             @click="hamburgerOpen = false"
           >
             <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="route.path === '/agences' ? 'color: var(--nav-primary-solid); font-weight: 700;' : '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="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>
@@ -188,7 +182,7 @@
     </header>
 
     <!-- Contenu page (flex-1 pour remplir l'espace) -->
-    <div class="flex-1" :class="route.path === '/' ? 'overflow-hidden' : 'overflow-y-auto'">
+    <div class="flex-1 h-full min-h-0" :class="route.path === '/' ? 'overflow-hidden' : 'overflow-y-auto'">
       <NuxtPage />
     </div>
 
@@ -260,21 +254,6 @@ 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;

assets/css/main.css

@@ -108,16 +108,3 @@
 .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; }

components/BandeauBas.vue

@@ -139,7 +139,72 @@
 
   </footer>
 
-  <!-- Mobile (< 1024px) : pas de FAB — Soutenir est dans le menu hamburger -->
+  <!-- ═══════════════════════════════════════ 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>
 </template>
 
 <script setup lang="ts">
@@ -156,6 +221,7 @@ 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
@@ -394,6 +460,39 @@ 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;

components/CartePensees.vue

@@ -1,135 +0,0 @@
-<template>
-  <div style="width: 100%; height: 100%; position: relative; background: var(--nav-bg);">
-    <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; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string }
-interface PenseesData { ecoles: EcoleData[]; auteurs: AuteurData[] }
-
-const props = defineProps<{ data: PenseesData | null; active?: boolean }>()
-const emit = defineEmits<{ 'select-auteur': [id: string] }>()
-
-const svgRef = ref<SVGElement | null>(null)
-const tooltipRef = ref<HTMLElement | null>(null)
-let simulation: any = null
-let d3NodeSel: any = null
-let d3LinkSel: 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]))
-
-  const ecoleNodes: any[] = props.data.ecoles.map(e => ({
-    id: `ecole-${e.id}`, type: 'ecole', ecoleId: e.id, label: e.label, color: e.color, r: 38,
-    x: W * e.x_hint, y: H * e.y_hint, fx: W * e.x_hint, fy: H * e.y_hint,
-  }))
-
-  const auteurNodes: any[] = props.data.auteurs.map(a => ({
-    id: a.id, type: 'auteur', nom: a.nom, dates: a.dates, bio_courte: a.bio_courte,
-    ecole_principale: a.ecole_principale,
-    color: ecoleMap.get(a.ecole_principale)?.color ?? '#888', r: 11,
-  }))
-
-  const allNodes = [...ecoleNodes, ...auteurNodes]
-  const links: any[] = []
-  props.data.auteurs.forEach(a => {
-    links.push({ source: a.id, target: `ecole-${a.ecole_principale}`, strength: 0.65 })
-    a.ecoles.filter(e => e !== a.ecole_principale).forEach(e => links.push({ source: a.id, target: `ecole-${e}`, strength: 0.25 }))
-  })
-
-  if (simulation) simulation.stop()
-  simulation = d3.forceSimulation(allNodes)
-    .force('link', d3.forceLink(links).id((d: any) => d.id).distance(90).strength((d: any) => d.strength ?? 0.5))
-    .force('charge', d3.forceManyBody().strength(-80))
-    .force('center', d3.forceCenter(W / 2, H / 2))
-    .force('collision', d3.forceCollide().radius((d: any) => d.r + 5))
-
-  d3LinkSel = g.append('g').selectAll('line').data(links).join('line')
-    .attr('stroke', 'rgba(150,150,150,0.3)').attr('stroke-width', 1.2)
-
-  d3NodeSel = g.append('g').selectAll('g').data(allNodes).join('g')
-    .style('cursor', (d: any) => d.type === 'auteur' ? '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); if (d.type !== 'ecole') { d.fx = null; d.fy = null } }))
-    .on('click', (e: any, d: any) => { e.stopPropagation(); if (d.type === 'auteur') emit('select-auteur', d.id) })
-
-  d3NodeSel.append('circle')
-    .attr('r', (d: any) => d.r)
-    .attr('fill', (d: any) => d.type === 'ecole' ? d.color : d.color + 'cc')
-    .attr('stroke', (d: any) => d.type === 'ecole' ? 'rgba(255,255,255,0.6)' : d.color)
-    .attr('stroke-width', (d: any) => d.type === 'ecole' ? 3 : 1.5)
-
-  d3NodeSel.filter((d: any) => d.type === 'ecole').append('text')
-    .attr('text-anchor', 'middle').attr('dy', '0.35em').attr('font-size', '10px').attr('font-weight', '700').attr('fill', 'white')
-    .style('pointer-events', 'none')
-    .each(function(d: any) {
-      const el = d3.select(this as any)
-      const words: string[] = d.label.split(' ')
-      if (words.length <= 2) { el.text(d.label) } else {
-        const mid = Math.ceil(words.length / 2)
-        el.append('tspan').attr('x', 0).attr('dy', '-0.6em').text(words.slice(0, mid).join(' '))
-        el.append('tspan').attr('x', 0).attr('dy', '1.2em').text(words.slice(mid).join(' '))
-      }
-    })
-
-  d3NodeSel.filter((d: any) => d.type === 'auteur').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)).attr('font-size', '9px').attr('font-weight', '500')
-    .style('pointer-events', 'none')
-
-  d3NodeSel.filter((d: any) => d.type === 'auteur')
-    .on('mouseenter', (e: any, d: any) => {
-      if (!tooltipRef.value) return
-      const bio = d.bio_courte.length > 90 ? d.bio_courte.slice(0, 87) + '...' : d.bio_courte
-      tooltipRef.value.innerHTML = `<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}</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.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)
-    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() })
-</script>
-
-<style>
-.pensees-auteur-label { fill: var(--nav-text); opacity: 0.75; paint-order: stroke; stroke: var(--nav-bg); stroke-width: 3px; stroke-linejoin: round; user-select: none; }
-</style>

components/ChatbotPensees.vue

@@ -1,141 +0,0 @@
-<template>
-  <button v-if="!open" @click="open = true"
-    class="fixed bottom-6 right-6 z-[1000] flex items-center gap-2 px-4 rounded-full shadow-lg"
-    style="height:48px;background:var(--nav-primary);color:var(--nav-text-on-primary);font-size:0.875rem;font-weight:600;"
-    aria-label="Chatbot Pensees Ecologiques">
-    <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>
-    <span>Pensees ?</span>
-  </button>
-
-  <Transition name="cpanel">
-    <div v-if="open" class="fixed bottom-6 right-6 z-[1000] flex flex-col"
-      style="width:min(360px,calc(100vw - 24px));max-height:60vh;background:var(--nav-surface);border-radius:14px;box-shadow:0 8px 32px rgba(26,34,56,0.22);overflow:hidden;border:1px solid var(--nav-bg-alt);"
-      role="dialog" aria-modal="true" aria-label="RAG Pensees Ecologiques">
-      <div class="flex items-center justify-between px-4 py-3 shrink-0" style="border-bottom:1px solid var(--nav-bg-alt);background:var(--nav-bg);">
-        <div>
-          <p class="text-sm font-bold" style="color:var(--nav-text);">RAG Pensees Ecologiques</p>
-          <p class="text-xs" style="color:var(--nav-text-muted);">{{ corpusCount }} auteurs ingeres</p>
-        </div>
-        <button @click="open = false" class="flex items-center justify-center w-7 h-7 rounded-full hover:opacity-70"
-          style="background:var(--nav-bg-alt);color:var(--nav-text-muted);" aria-label="Fermer">
-          <svg width="12" height="12" 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 ref="msgEl" class="flex-1 overflow-y-auto px-4 py-3 flex flex-col gap-3" style="min-height:0;">
-        <div v-if="messages.length === 0" style="font-size:0.8rem;color:var(--nav-text-muted);line-height:1.5;">
-          Pose une question sur les pensees ecologiques : ecosocialisme, decroissance, ecofeminismes, technocritique, deep ecology...
-        </div>
-        <template v-for="(msg, i) in messages" :key="i">
-          <div v-if="msg.role === 'user'" class="self-end max-w-[85%] px-3 py-2 rounded-xl text-sm"
-            style="background:var(--nav-primary);color:var(--nav-text-on-primary);font-weight:500;">{{ msg.content }}</div>
-          <div v-else class="self-start max-w-full">
-            <div class="px-3 py-2 rounded-xl text-sm leading-relaxed" style="background:var(--nav-bg-alt);color:var(--nav-text);"
-              v-html="renderMd(stripSrc(msg.content))" />
-            <div v-if="parseSrc(msg.content).length" class="mt-1.5">
-              <button @click="toggled[i] = !toggled[i]" class="flex items-center gap-1 text-xs hover:opacity-70" style="color:var(--nav-text-muted);">
-                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
-                  :style="`transform:rotate(${toggled[i] ? 90 : 0}deg);transition:transform 0.15s`"><polyline points="9 18 15 12 9 6"/></svg>
-                Sources ({{ parseSrc(msg.content).length }})
-              </button>
-              <div v-if="toggled[i]" class="mt-1 flex flex-col gap-1">
-                <div v-for="(s, si) in parseSrc(msg.content)" :key="si" class="px-2 py-1 rounded text-xs"
-                  style="background:var(--nav-bg-alt);color:var(--nav-text-muted);border-left:2px solid var(--nav-primary-solid);">
-                  <span style="font-weight:600;color:var(--nav-text);">[{{ si + 1 }}]</span> {{ s }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </template>
-        <div v-if="loading" class="self-start px-3 py-2 rounded-xl" style="background:var(--nav-bg-alt);">
-          <span class="dots"><span/><span style="animation-delay:150ms"/><span style="animation-delay:300ms"/></span>
-        </div>
-        <div v-if="err" class="text-xs px-3 py-2 rounded-xl" style="background:#fee;color:#c0392b;">{{ err }}</div>
-      </div>
-      <div class="shrink-0 px-3 py-3" style="border-top:1px solid var(--nav-bg-alt);">
-        <div class="flex items-center gap-2">
-          <input ref="inputEl" v-model="q" type="text" placeholder="Ta question..." maxlength="500"
-            class="flex-1 px-3 py-2 rounded-lg text-sm outline-none"
-            style="background:var(--nav-bg);color:var(--nav-text);border:1px solid var(--nav-bg-alt);"
-            @keydown.enter.prevent="send" />
-          <button @click="send" :disabled="loading || !q.trim()"
-            class="flex items-center justify-center w-9 h-9 rounded-lg"
-            :style="loading||!q.trim() ? 'background:var(--nav-bg-alt);opacity:0.5;cursor:not-allowed;' : 'background:var(--nav-primary);cursor:pointer;'"
-            aria-label="Envoyer">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="color:white;">
-              <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>
-</template>
-
-<script setup lang="ts">
-interface Message { role: 'user' | 'assistant'; content: string }
-const props = defineProps<{ auteurContext?: string | null }>()
-const open = ref(false)
-const q = ref('')
-const messages = ref<Message[]>([])
-const loading = ref(false)
-const err = ref('')
-const toggled = ref<Record<number, boolean>>({})
-const msgEl = ref<HTMLElement | null>(null)
-const inputEl = ref<HTMLInputElement | null>(null)
-const corpusCount = 18
-
-watch(open, (val) => {
-  if (!val) return
-  nextTick(() => inputEl.value?.focus())
-  if (props.auteurContext && messages.value.length === 0)
-    q.value = `Quelles sont les theses centrales de ${props.auteurContext} ?`
-})
-watch(() => props.auteurContext, (ctx) => {
-  if (!ctx) return
-  if (!open.value) open.value = true
-  if (messages.value.length === 0) q.value = `Quelles sont les theses centrales de ${ctx} ?`
-})
-
-async function send() {
-  const query = q.value.trim()
-  if (!query || loading.value) return
-  err.value = ''
-  messages.value.push({ role: 'user', content: query })
-  q.value = ''
-  loading.value = true
-  await nextTick(); scrollBottom()
-  try {
-    const res = await $fetch<{ response: string }>('/api/chatbot-pensees', { method: 'POST', body: { query, mode: 'hybrid' } })
-    messages.value.push({ role: 'assistant', content: res.response ?? '' })
-  } catch (e: any) {
-    const s = e?.response?.status ?? e?.statusCode
-    err.value = s === 429 ? 'Limite atteinte.' : s === 503 ? 'RAG indisponible.' : 'Erreur - reessaie.'
-  } finally {
-    loading.value = false
-    await nextTick(); scrollBottom()
-  }
-}
-function scrollBottom() { if (msgEl.value) msgEl.value.scrollTop = msgEl.value.scrollHeight }
-function renderMd(t: string) {
-  return '<p>' + t.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>').replace(/\*(.+?)\*/g, '<em>$1</em>').replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>') + '</p>'
-}
-function stripSrc(t: string) { return t.replace(/\n*(?:Sources?|References?)\s*:[\s\S]*$/i, '').trim() }
-function parseSrc(t: string): string[] {
-  const bloc = t.match(/\n*(?:Sources?|References?)\s*:\n?([\s\S]+?)$/i)
-  if (bloc) return bloc[1].split('\n').map(l => l.replace(/^[-*\d.[\]]+\s*/, '').trim()).filter(l => l.length > 3)
-  return [...new Set([...t.matchAll(/\[([^\]]{5,80})\]/g)].filter(m => m[1].includes(' - ')).map(m => m[1]))]
-}
-</script>
-
-<style scoped>
-.cpanel-enter-active { transition: opacity 0.2s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
-.cpanel-leave-active { transition: opacity 0.18s, transform 0.15s ease-in; }
-.cpanel-enter-from { opacity: 0; transform: translateY(12px) scale(0.95); }
-.cpanel-leave-to { opacity: 0; transform: translateY(8px) scale(0.97); }
-.dots span { display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--nav-text-muted);margin:0 2px;animation:bounce 1s infinite; }
-@keyframes bounce { 0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)} }
-</style>

components/ChatbotReseaux.vue

@@ -1,208 +0,0 @@
-<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>

components/ChatbotSheet.vue

@@ -69,14 +69,18 @@
         <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>Ce chatbot fonctionne sur un serveur européen souverain
-            <p>Pour m'aider à te répondre efficacement, formule ta requête ainsi :</p>
+(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 -->
@@ -88,7 +92,7 @@
 
             <!-- Message assistant -->
             <div v-else class="assistant-bubble">
-              <div class="md-content" v-html="renderMd(msg.content)" />
+              <p>{{ msg.content }}</p>
 
               <!-- Fiches recommandées -->
               <div v-if="msg.fiches && msg.fiches.length > 0" class="fiches-list">
@@ -160,9 +164,6 @@
 </template>
 
 <script setup lang="ts">
-import { useMarkdown } from '~/composables/useMarkdown'
-const { render: renderMd } = useMarkdown()
-
 interface FicheReco {
   id: number | string
   nom: string
@@ -319,17 +320,7 @@ 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 {

components/FicheAuteur.vue

@@ -1,98 +0,0 @@
-<template>
-  <Teleport to="body">
-    <Transition name="backdrop">
-      <div v-if="open && auteur" class="fixed inset-0 z-[1500]" style="background: rgba(26,34,56,0.55);" @click="emit('close')" aria-hidden="true" />
-    </Transition>
-    <Transition name="modal">
-      <div v-if="open && auteur" class="fixed z-[1501] left-1/2 flex flex-col"
-        style="top:50%;transform:translate(-50%,-50%);width:min(520px,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">
-        <!-- Header -->
-        <div class="flex items-start justify-between px-5 py-4 shrink-0"
-          :style="`border-bottom: 3px solid ${ecoleColor}; background: var(--nav-surface);`">
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2 flex-wrap">
-              <span class="px-2 py-0.5 rounded-full text-xs font-semibold" :style="`background:${ecoleColor}22;color:${ecoleColor};`">{{ ecoleLabel }}</span>
-              <span v-for="eid in auteur.ecoles.filter(e => e !== auteur.ecole_principale)" :key="eid"
-                class="px-2 py-0.5 rounded-full text-xs" :style="`background:${getEcoleColor(eid)}22;color:${getEcoleColor(eid)};`">{{ getEcoleLabel(eid) }}</span>
-            </div>
-            <h2 class="mt-2 font-bold text-lg leading-tight" style="color:var(--nav-text);">{{ auteur.nom }}</h2>
-            <p class="text-sm" style="color:var(--nav-text-muted);">{{ auteur.dates }}</p>
-          </div>
-          <button @click="emit('close')" 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>
-        <!-- Body -->
-        <div class="flex-1 overflow-y-auto px-5 py-4 flex flex-col gap-4">
-          <p class="text-sm leading-relaxed" style="color:var(--nav-text);">{{ auteur.bio_courte }}</p>
-          <div v-if="auteur.theses_cles.length">
-            <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:var(--nav-text-muted);">Theses cles</p>
-            <ul class="flex flex-col gap-1.5">
-              <li v-for="t in auteur.theses_cles" :key="t" class="flex items-start gap-2 text-sm" style="color:var(--nav-text);">
-                <span class="mt-1.5 w-1.5 h-1.5 rounded-full shrink-0" :style="`background:${ecoleColor};`"></span>
-                <span>{{ t }}</span>
-              </li>
-            </ul>
-          </div>
-          <div v-if="auteur.livres_rag.length">
-            <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:var(--nav-text-muted);">Livres dans le RAG</p>
-            <div class="flex flex-col gap-2">
-              <div v-for="l in auteur.livres_rag" :key="l.slug" class="flex items-start gap-3 p-3 rounded-lg" style="background:var(--nav-bg-alt);">
-                <div class="flex-1 min-w-0">
-                  <p class="text-sm font-semibold leading-snug" style="color:var(--nav-text);">{{ l.titre }}</p>
-                  <p class="text-xs mt-0.5" style="color:var(--nav-text-muted);">{{ l.annee }}</p>
-                </div>
-                <div class="flex gap-1 shrink-0">
-                  <span v-for="c in l.couches" :key="c" class="px-1.5 py-0.5 rounded text-xs" style="background:var(--nav-surface);color:var(--nav-text-muted);">{{ c }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- Footer -->
-        <div class="shrink-0 px-5 py-3 border-t" style="border-color:var(--nav-bg-alt);">
-          <button @click="emit('interroger-rag', auteurId!)" class="w-full py-2.5 rounded-lg text-sm font-semibold hover:opacity-80"
-            :style="`background:${ecoleColor};color:white;`">
-            Interroger le RAG sur {{ auteur.nom.split(' ').pop() }}
-          </button>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-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 EcoleData { id: string; label: string; color: string }
-interface PenseesData { ecoles: EcoleData[]; auteurs: AuteurData[] }
-
-const props = defineProps<{ open: boolean; auteurId: string | null; data: PenseesData | null }>()
-const emit = defineEmits<{ close: []; 'interroger-rag': [auteurId: string] }>()
-
-const auteur = computed<AuteurData | null>(() => {
-  if (!props.auteurId || !props.data) return null
-  return props.data.auteurs.find(a => a.id === props.auteurId) ?? null
-})
-const ecoleColor = computed(() => props.data?.ecoles.find(e => e.id === auteur.value?.ecole_principale)?.color ?? '#888')
-const ecoleLabel = computed(() => props.data?.ecoles.find(e => e.id === auteur.value?.ecole_principale)?.label ?? '')
-function getEcoleColor(id: string) { return props.data?.ecoles.find(e => e.id === id)?.color ?? '#888' }
-function getEcoleLabel(id: string) { return props.data?.ecoles.find(e => e.id === id)?.label ?? id }
-
-function onKey(e: KeyboardEvent) { if (e.key === 'Escape' && props.open) emit('close') }
-onMounted(() => window.addEventListener('keydown', onKey))
-onUnmounted(() => window.removeEventListener('keydown', onKey))
-</script>
-
-<style scoped>
-.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); }
-</style>

components/FicheModal.vue

@@ -15,9 +15,10 @@
     <Transition name="modal">
       <div
         v-if="modelValue && orgId != null"
-        class="fiche-modal fixed z-[1501] left-1/2 -translate-x-1/2 flex flex-col"
+        class="fixed z-[1501] top-1/2 left-1/2 -translate-x-1/2 -translate-y-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);
@@ -143,21 +144,6 @@ 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; }
@@ -170,11 +156,6 @@ 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; }

components/FicheModalV2.vue

@@ -15,9 +15,10 @@
     <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"
+        class="fixed z-[1501] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
         style="
           width: min(780px, 94vw);
+          max-height: 90vh;
           background: var(--nav-bg);
           border-radius: 16px;
           box-shadow: 0 16px 64px rgba(26,34,56,0.28);
@@ -324,21 +325,6 @@ const structuresVoisines = computed<StructureV2[]>(() => {
 .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;
@@ -347,11 +333,6 @@ const structuresVoisines = computed<StructureV2[]>(() => {
   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; }

components/GraphView.vue

@@ -587,20 +587,6 @@ async function initGraph() {
     .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) => {
@@ -872,15 +858,3 @@ 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>

components/MissionPopup.vue

@@ -1,181 +0,0 @@
-<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>

components/NavMap.vue

@@ -221,12 +221,7 @@ function updateTileTheme(dark: boolean) {
 let themeObserver: MutationObserver | null = null
 
 onMounted(() => {
-  // Double rAF : laisser le browser calculer la hauteur du conteneur avant Leaflet
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
   initMap()
-    })
-  })
 
   // Observer les changements de classe dark sur <html>
   themeObserver = new MutationObserver(() => {

components/NavMapV2.vue

@@ -222,7 +222,12 @@ function updateTileTheme(dark: boolean) {
 let themeObserver: MutationObserver | null = null
 
 onMounted(() => {
+  // Double rAF : laisser le browser calculer la hauteur du conteneur avant Leaflet
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
       initMap()
+    })
+  })
   document.addEventListener('nav-v2-select', onNavV2Select as EventListener)
 
   themeObserver = new MutationObserver(() => {

components/NavSidebar.vue

@@ -125,8 +125,8 @@
             <span
               v-for="fn in orgFonctions(org)"
               :key="fn"
-              class="px-2 py-0.5 rounded-full text-xs font-medium"
+              class="px-1.5 py-0.5 rounded text-xs"
-              style="background: var(--nav-bg-alt); color: var(--nav-text-muted); border: 1px solid var(--nav-bg-alt); letter-spacing: 0.01em;"
+              style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
             >{{ fn }}</span>
           </div>
           <div v-if="org.localisation_ville" class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">

components/PlatformeTaffCard.vue

@@ -1,26 +1,41 @@
 <template>
   <button
     type="button"
-    class="taff-card"
+    class="w-full text-left rounded-xl border transition-all duration-200 hover:shadow-md focus-visible:outline-none"
-    :style="`border-left-color: ${tagConfig.accent};`"
+    :style="`
+      background: var(--nav-surface);
+      border-color: ${tagBorderColor};
+      border-left: 4px solid ${tagAccentColor};
+    `"
     @click="$emit('open', plateforme)"
   >
-    <!-- Ligne 1 : tag + badge AO + lien -->
+    <!-- Header -->
-    <div class="taff-card-top">
+    <div class="flex items-start justify-between gap-2 px-4 pt-4 pb-2">
-      <div class="flex items-center gap-2 flex-wrap">
+      <div class="flex-1 min-w-0">
-        <span class="taff-tag" :style="`background: ${tagConfig.bg}; color: ${tagConfig.text};`">
+        <div class="flex items-center gap-2 flex-wrap mb-0.5">
-          {{ tagConfig.emoji }} {{ tagConfig.label }}
+          <span
+            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold shrink-0"
+            :style="`background: ${tagBgColor}; color: ${tagTextColor};`"
+          >
+            <span>{{ tagEmoji }}</span>
+            <span>{{ tagLabel }}</span>
           </span>
           <span
             v-if="plateforme.type === 'appel-offre-public'"
-          class="taff-badge-ao"
+            class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium shrink-0"
+            style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
           >AO public</span>
         </div>
+        <h3 class="font-semibold text-base leading-snug" style="color: var(--nav-text);">
+          {{ plateforme.nom }}
+        </h3>
+      </div>
       <a
         :href="plateforme.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="taff-visit-btn"
+        class="shrink-0 flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-opacity hover:opacity-70"
+        style="background: var(--nav-bg-alt); color: var(--nav-text);"
         @click.stop
         title="Visiter le site"
       >
@@ -33,35 +48,42 @@
       </a>
     </div>
 
-    <!-- Ligne 2 : nom -->
+    <!-- Description courte -->
-    <div class="taff-card-name">{{ plateforme.nom }}</div>
+    <p class="px-4 pb-3 text-sm leading-relaxed line-clamp-2" style="color: var(--nav-text-muted);">
+      {{ plateforme.description_courte }}
+    </p>
 
-    <!-- Ligne 3 : axes (icône + score, compacts) -->
+    <!-- Scoring axes -->
-    <div class="taff-card-axes">
+    <div class="px-4 pb-3 flex items-center gap-2 flex-wrap">
-      <template v-for="axe in AXES" :key="axe.id">
+      <template v-for="axe in axes" :key="axe.id">
         <span
           v-if="plateforme.scoring[axe.id] !== null"
-          class="taff-axe-chip"
+          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium"
           :style="`background: ${axeScoreBg(plateforme.scoring[axe.id])}; color: ${axeScoreText(plateforme.scoring[axe.id])};`"
           :title="axe.label"
-        >{{ axe.icon }} {{ plateforme.scoring[axe.id] }}</span>
+        >
+          <span>{{ axe.icon }}</span>
+          <span>{{ plateforme.scoring[axe.id] }}</span>
+        </span>
       </template>
     </div>
 
-    <!-- Ligne 4 : description (3 lignes max, lisible) -->
+    <!-- Footer: secteurs + coût -->
-    <p class="taff-card-desc">{{ plateforme.description_courte }}</p>
+    <div class="px-4 pb-3 flex items-center gap-2 flex-wrap">
-
-    <!-- Ligne 5 : secteurs + coût -->
-    <div class="taff-card-footer">
-      <div class="flex items-center gap-1.5 flex-wrap">
       <span
         v-for="s in plateforme.secteurs_servis.slice(0, 3)"
         :key="s"
-          class="taff-secteur-chip"
+        class="inline-block px-2 py-0.5 rounded-full text-xs"
-        >{{ SECTEUR_LABELS[s] ?? s }}</span>
+        style="background: var(--nav-bg); color: var(--nav-text-muted); border: 1px solid var(--nav-bg-alt);"
-        <span v-if="plateforme.secteurs_servis.length > 3" class="taff-more">+{{ plateforme.secteurs_servis.length - 3 }}</span>
+      >{{ secteurLabel(s) }}</span>
-      </div>
+      <span
-      <span class="taff-cout">{{ COUT_LABELS[plateforme.cout_entree] ?? plateforme.cout_entree }}</span>
+        v-if="plateforme.secteurs_servis.length > 3"
+        class="text-xs"
+        style="color: var(--nav-text-muted);"
+      >+{{ plateforme.secteurs_servis.length - 3 }}</span>
+      <span class="ml-auto text-xs font-medium" style="color: var(--nav-text-muted);">
+        {{ coutLabel(plateforme.cout_entree) }}
+      </span>
     </div>
   </button>
 </template>
@@ -72,7 +94,7 @@ import type { PlateformeTaff } from '~/types/plateforme-taff'
 const props = defineProps<{ plateforme: PlateformeTaff }>()
 defineEmits<{ open: [p: PlateformeTaff] }>()
 
-const AXES = [
+const axes = [
   { id: 'remuneration' as const, icon: '🪙', label: 'Rémunération' },
   { id: 'transparence' as const, icon: '🔍', label: 'Transparence' },
   { id: 'pratiques' as const, icon: '⚖️', label: 'Pratiques pro' },
@@ -81,12 +103,18 @@ const AXES = [
 ]
 
 const TAG_CONFIG = {
-  'recommande':   { emoji: '✅', label: 'Recommandé AEP', accent: '#5a7a4a', bg: 'rgba(90,122,74,0.12)',    text: '#3d5534' },
+  'recommande':   { emoji: '✅', label: 'Recommandé AEP', accent: '#5a7a4a', bg: 'rgba(90,122,74,0.12)', text: '#3d5534', border: 'rgba(90,122,74,0.25)' },
-  'sous-reserve': { emoji: '⚠️', label: 'Sous réserve',   accent: '#c4a472', bg: 'rgba(196,164,114,0.15)', text: '#7a5f2a' },
+  'sous-reserve': { emoji: '⚠️', label: 'Sous réserve',   accent: '#c4a472', bg: 'rgba(196,164,114,0.15)', text: '#7a5f2a', border: 'rgba(196,164,114,0.35)' },
-  'a-eviter':     { emoji: '❌', label: 'À éviter',       accent: '#a85d3e', bg: 'rgba(168,93,62,0.12)',    text: '#7a3322' },
+  'a-eviter':     { emoji: '❌', label: 'À éviter',       accent: '#a85d3e', bg: 'rgba(168,93,62,0.12)', text: '#7a3322', border: 'rgba(168,93,62,0.25)' },
 }
 
 const tagConfig = computed(() => TAG_CONFIG[props.plateforme.scoring.tag_global] ?? TAG_CONFIG['sous-reserve'])
+const tagEmoji = computed(() => tagConfig.value.emoji)
+const tagLabel = computed(() => tagConfig.value.label)
+const tagAccentColor = computed(() => tagConfig.value.accent)
+const tagBgColor = computed(() => tagConfig.value.bg)
+const tagTextColor = computed(() => tagConfig.value.text)
+const tagBorderColor = computed(() => tagConfig.value.border)
 
 function axeScoreBg(score: string | null) {
   if (score === '✅') return 'rgba(90,122,74,0.12)'
@@ -94,6 +122,7 @@ function axeScoreBg(score: string | null) {
   if (score === '❌') return 'rgba(168,93,62,0.12)'
   return 'var(--nav-bg-alt)'
 }
+
 function axeScoreText(score: string | null) {
   if (score === '✅') return '#3d5534'
   if (score === '⚠️') return '#7a5f2a'
@@ -102,143 +131,24 @@ function axeScoreText(score: string | null) {
 }
 
 const SECTEUR_LABELS: Record<string, string> = {
-  'renovation': 'Rénovation', 'construction-neuve': 'Neuf', 'urbanisme': 'Urbanisme',
+  'renovation': 'Rénovation',
-  'architecture-interieure': 'Archi intérieure', 'paysage': 'Paysage',
+  'construction-neuve': 'Neuf',
-  'mar-conseil': 'MAR/Conseil', 'transversal': 'Transversal',
+  'urbanisme': 'Urbanisme',
+  'architecture-interieure': 'Archi intérieure',
+  'paysage': 'Paysage',
+  'mar-conseil': 'MAR/Conseil',
+  'transversal': 'Transversal',
 }
+
+function secteurLabel(s: string) { return SECTEUR_LABELS[s] ?? s }
+
 const COUT_LABELS: Record<string, string> = {
-  'gratuit': 'Gratuit', 'freemium': 'Freemium', 'abonnement': 'Abonnement',
+  'gratuit': 'Gratuit',
-  'lead-paye': 'Lead payant', 'commission': 'Commission',
+  'freemium': 'Freemium',
+  'abonnement': 'Abonnement',
+  'lead-paye': 'Lead payant',
+  'commission': 'Commission',
 }
+
+function coutLabel(c: string) { return COUT_LABELS[c] ?? c }
 </script>
-
-<style scoped>
-.taff-card {
-  width: 100%;
-  text-align: left;
-  border-radius: 12px;
-  border: 1px solid var(--nav-bg-alt);
-  border-left: 4px solid;
-  background: var(--nav-surface);
-  display: flex;
-  flex-direction: column;
-  transition: box-shadow 0.2s;
-  cursor: pointer;
-}
-.taff-card:hover { box-shadow: 0 4px 16px rgba(26,34,56,0.1); }
-.taff-card:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }
-
-.taff-card-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 1rem 1rem 0.5rem;
-}
-
-.taff-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.625rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 700;
-}
-
-.taff-badge-ao {
-  display: inline-flex;
-  padding: 0.25rem 0.5rem;
-  border-radius: 9999px;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  background: var(--nav-bg-alt);
-  color: var(--nav-text-muted);
-}
-
-.taff-visit-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.75rem;
-  border-radius: 8px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  background: var(--nav-bg-alt);
-  color: var(--nav-text);
-  white-space: nowrap;
-  flex-shrink: 0;
-  transition: opacity 0.15s;
-}
-.taff-visit-btn:hover { opacity: 0.7; }
-
-.taff-card-name {
-  padding: 0.25rem 1rem 0.75rem;
-  font-size: 1.0625rem;
-  font-weight: 700;
-  color: var(--nav-text);
-  line-height: 1.3;
-}
-
-.taff-card-axes {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0 1rem 0.875rem;
-  flex-wrap: wrap;
-}
-
-.taff-axe-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.625rem;
-  border-radius: 9999px;
-  font-size: 0.8125rem;
-  font-weight: 600;
-}
-
-.taff-card-desc {
-  padding: 0 1rem 1rem;
-  font-size: 0.875rem;
-  line-height: 1.65;
-  color: var(--nav-text-muted);
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  flex: 1;
-}
-
-.taff-card-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  border-top: 1px solid var(--nav-bg-alt);
-  flex-wrap: wrap;
-}
-
-.taff-secteur-chip {
-  display: inline-block;
-  padding: 0.2rem 0.5rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  background: var(--nav-bg);
-  color: var(--nav-text-muted);
-  border: 1px solid var(--nav-bg-alt);
-}
-
-.taff-more {
-  font-size: 0.75rem;
-  color: var(--nav-text-muted);
-}
-
-.taff-cout {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--nav-text-muted);
-  white-space: nowrap;
-}
-</style>

components/codev/CodevGraph.vue

@@ -1,450 +0,0 @@
-<template>
-  <div ref="container" class="codev-graph-wrap">
-
-    <!-- Placeholder si aucune fiche -->
-    <div v-if="fiches.length === 0" class="empty-state">
-      <p class="empty-msg">Encore personne. Sois la premiere fiche !</p>
-      <NuxtLink to="/codev/fiche" class="empty-link">Creer ma fiche &rarr;</NuxtLink>
-    </div>
-
-    <!-- SVG D3 -->
-    <svg v-else ref="svgEl" class="codev-svg">
-      <defs>
-        <marker
-          id="arrow-solution"
-          viewBox="0 0 10 10"
-          refX="18"
-          refY="5"
-          markerWidth="6"
-          markerHeight="6"
-          orient="auto-start-reverse"
-        >
-          <path d="M 0 0 L 10 5 L 0 10 z" fill="#22c55e" />
-        </marker>
-      </defs>
-    </svg>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-import * as d3 from 'd3'
-import type { CodevFiche, CodevMatch } from '~/types/codev'
-
-// ── Props / Emits ──────────────────────────────────────────────────────────
-
-const props = withDefaults(defineProps<{
-  fiches: CodevFiche[]
-  matches?: CodevMatch[]
-  mode?: 'none' | 'solution' | 'alliance' | 'surprise'
-  showLabels?: boolean
-}>(), {
-  matches: () => [],
-  mode: 'none',
-  showLabels: false,
-})
-
-const emit = defineEmits<{
-  'select-fiche': [id: number]
-}>()
-
-// ── Refs ───────────────────────────────────────────────────────────────────
-
-const container = ref<HTMLDivElement | null>(null)
-const svgEl = ref<SVGSVGElement | null>(null)
-const width = ref(800)
-const height = ref(600)
-
-// ── State interne ──────────────────────────────────────────────────────────
-
-type SimNode = d3.SimulationNodeDatum & { id: number; nom: string; offre: string; besoin: string }
-type SimLink = d3.SimulationLinkDatum<SimNode> & { score: number; mode: string }
-
-let simulation: d3.Simulation<SimNode, SimLink> | null = null
-let svgRoot: d3.Selection<SVGSVGElement, unknown, null, undefined> | null = null
-let gLinks: d3.Selection<SVGGElement, unknown, null, undefined> | null = null
-let gNodes: d3.Selection<SVGGElement, unknown, null, undefined> | null = null
-
-const isMobile = computed(() => width.value < 600)
-const nodeRadius = computed(() => isMobile.value ? 22 : 28)
-
-// ── Helpers ────────────────────────────────────────────────────────────────
-
-function truncate(str: string, max = 10): string {
-  if (!str) return ''
-  return str.length > max ? str.slice(0, max - 1) + '…' : str
-}
-
-function buildNodes(): SimNode[] {
-  return props.fiches.map(f => ({
-    id: f.id,
-    nom: f.nom,
-    offre: f.offre,
-    besoin: f.besoin,
-  }))
-}
-
-function buildLinks(nodes: SimNode[]): SimLink[] {
-  if (!props.matches || props.matches.length === 0) return []
-  const nodeById = new Map(nodes.map(n => [n.id, n]))
-  return props.matches
-    .filter(m => nodeById.has(m.fromId) && nodeById.has(m.toId))
-    .map(m => ({
-      source: nodeById.get(m.fromId)!,
-      target: nodeById.get(m.toId)!,
-      score: m.score,
-      mode: m.mode,
-    }))
-}
-
-function linkColor(mode: string): string {
-  if (mode === 'solution') return '#22c55e'
-  if (mode === 'alliance') return '#f97316'
-  if (mode === 'surprise') return '#3b82f6'
-  return '#ccc'
-}
-
-// ── Drag handler ───────────────────────────────────────────────────────────
-
-function makeDrag(sim: d3.Simulation<SimNode, SimLink>): d3.DragBehavior<SVGGElement, SimNode, SimNode> {
-  return d3.drag<SVGGElement, SimNode>()
-    .on('start', (event, d) => {
-      if (!event.active) sim.alphaTarget(0.3).restart()
-      d.fx = d.x
-      d.fy = d.y
-    })
-    .on('drag', (event, d) => {
-      d.fx = event.x
-      d.fy = event.y
-    })
-    .on('end', (event, d) => {
-      if (!event.active) sim.alphaTarget(0)
-      d.fx = null
-      d.fy = null
-    })
-}
-
-// ── Initialisation SVG ─────────────────────────────────────────────────────
-
-function initSvg() {
-  if (!svgEl.value) return
-
-  svgRoot = d3.select(svgEl.value)
-    .attr('width', width.value)
-    .attr('height', height.value)
-
-  svgRoot.selectAll('*').remove()
-
-  gLinks = svgRoot.append('g').attr('class', 'links')
-  gNodes = svgRoot.append('g').attr('class', 'nodes')
-}
-
-// ── Rebuild liens (hook pour M4) ───────────────────────────────────────────
-
-let currentNodes: SimNode[] = []
-let currentLinks: SimLink[] = []
-
-function rebuildLinks() {
-  currentLinks = buildLinks(currentNodes)
-  if (!gLinks || !simulation) return
-
-  // .join() moderne D3 pour garantir le re-rendu complet
-  gLinks
-    .selectAll<SVGLineElement, SimLink>('line')
-    .data(currentLinks)
-    .join(
-      enter => enter.append('line'),
-      update => update,
-      exit => exit.remove()
-    )
-    .attr('stroke', d => linkColor(d.mode))
-    .attr('stroke-width', d => 1 + d.score * 3)
-    .attr('stroke-opacity', 0.7)
-    .attr('marker-end', d => d.mode === 'solution' ? 'url(#arrow-solution)' : null)
-}
-
-// ── Rendu complet ──────────────────────────────────────────────────────────
-
-function render() {
-  if (!svgEl.value || props.fiches.length === 0) return
-
-  initSvg()
-
-  currentNodes = buildNodes()
-  currentLinks = buildLinks(currentNodes)
-
-  const r = nodeRadius.value
-  const fontSize = isMobile.value ? 10 : 12
-
-  // Liens
-  gLinks!
-    .selectAll<SVGLineElement, SimLink>('line')
-    .data(currentLinks)
-    .join('line')
-    .attr('stroke', d => linkColor(d.mode))
-    .attr('stroke-width', d => 1 + d.score * 3)
-    .attr('stroke-opacity', 0.7)
-    .attr('marker-end', d => d.mode === 'solution' ? 'url(#arrow-solution)' : null)
-
-  // Noeuds = groupe <g> par personne
-  const nodeGroups = gNodes!
-    .selectAll<SVGGElement, SimNode>('g.node')
-    .data(currentNodes, d => String(d.id))
-    .join('g')
-    .attr('class', 'node')
-    .style('cursor', 'pointer')
-    .call(makeDrag(simulation!) as any)
-    .on('click', (_event, d) => emit('select-fiche', d.id))
-
-  // Cercle principal
-  nodeGroups.append('circle')
-    .attr('r', r)
-    .attr('fill', '#ffffff')
-    .attr('stroke', '#1B4436')
-    .attr('stroke-width', 2)
-
-  // Label nom
-  nodeGroups.append('text')
-    .attr('text-anchor', 'middle')
-    .attr('dominant-baseline', 'central')
-    .attr('font-size', fontSize)
-    .attr('font-weight', '700')
-    .attr('fill', '#1a1a2e')
-    .attr('pointer-events', 'none')
-    .text(d => truncate(d.nom, 10))
-
-  // Pastille offre (haut-droite, vert)
-  nodeGroups.append('circle')
-    .attr('r', 6)
-    .attr('cx', r * 0.65)
-    .attr('cy', -r * 0.65)
-    .attr('fill', '#22c55e')
-    .attr('stroke', '#fff')
-    .attr('stroke-width', 1.5)
-
-  // Pastille besoin (bas-droite, bleu)
-  nodeGroups.append('circle')
-    .attr('r', 6)
-    .attr('cx', r * 0.65)
-    .attr('cy', r * 0.65)
-    .attr('fill', '#3b82f6')
-    .attr('stroke', '#fff')
-    .attr('stroke-width', 1.5)
-
-  // Tooltip SVG natif <title>
-  nodeGroups.append('title')
-    .text(d => `${d.nom}\nOffre : ${d.offre}\nBesoin : ${d.besoin}`)
-
-  // Groupe label bulle (affiche si showLabels)
-  const labelGroups = nodeGroups.append('g')
-    .attr('class', 'label-bubble')
-    .attr('visibility', props.showLabels ? 'visible' : 'hidden')
-
-  // Fond bulle besoin (dessous du noeud)
-  labelGroups.append('rect')
-    .attr('class', 'bubble-besoin-bg')
-    .attr('x', -(r + 50))
-    .attr('y', r + 4)
-    .attr('width', 100)
-    .attr('height', 28)
-    .attr('rx', 6)
-    .attr('fill', '#eff6ff')
-    .attr('stroke', '#3b82f6')
-    .attr('stroke-width', 1)
-
-  // Texte besoin
-  labelGroups.append('text')
-    .attr('class', 'bubble-besoin-txt')
-    .attr('x', -(r) + 50)
-    .attr('y', r + 22)
-    .attr('text-anchor', 'middle')
-    .attr('font-size', 9)
-    .attr('fill', '#1e40af')
-    .attr('pointer-events', 'none')
-    .text(d => truncate(d.besoin, 18))
-
-  // Fond bulle offre (dessus du noeud)
-  labelGroups.append('rect')
-    .attr('class', 'bubble-offre-bg')
-    .attr('x', -(r + 50))
-    .attr('y', -(r + 32))
-    .attr('width', 100)
-    .attr('height', 28)
-    .attr('rx', 6)
-    .attr('fill', '#f0fdf4')
-    .attr('stroke', '#22c55e')
-    .attr('stroke-width', 1)
-
-  // Texte offre
-  labelGroups.append('text')
-    .attr('class', 'bubble-offre-txt')
-    .attr('x', -(r) + 50)
-    .attr('y', -(r + 14))
-    .attr('text-anchor', 'middle')
-    .attr('font-size', 9)
-    .attr('fill', '#166534')
-    .attr('pointer-events', 'none')
-    .text(d => truncate(d.offre, 18))
-
-  // Simulation
-  simulation = d3.forceSimulation<SimNode, SimLink>(currentNodes)
-    .force('link', d3.forceLink<SimNode, SimLink>(currentLinks)
-      .id(d => d.id)
-      .distance(120)
-      .strength(0.3))
-    .force('charge', d3.forceManyBody<SimNode>().strength(-400))
-    .force('center', d3.forceCenter(width.value / 2, height.value / 2))
-    .force('collide', d3.forceCollide<SimNode>().radius(r + 12))
-    .force('x', d3.forceX(width.value / 2).strength(0.05))
-    .force('y', d3.forceY(height.value / 2).strength(0.05))
-    .alphaDecay(0.02)
-    .on('tick', tick)
-
-  // Re-bind drag avec la nouvelle simulation
-  gNodes!.selectAll<SVGGElement, SimNode>('g.node')
-    .call(makeDrag(simulation) as any)
-}
-
-function tick() {
-  const r = nodeRadius.value
-  if (!gLinks || !gNodes) return
-
-  gLinks.selectAll<SVGLineElement, SimLink>('line')
-    .attr('x1', d => Math.max(r, Math.min(width.value - r, (d.source as SimNode).x ?? 0)))
-    .attr('y1', d => Math.max(r, Math.min(height.value - r, (d.source as SimNode).y ?? 0)))
-    .attr('x2', d => Math.max(r, Math.min(width.value - r, (d.target as SimNode).x ?? 0)))
-    .attr('y2', d => Math.max(r, Math.min(height.value - r, (d.target as SimNode).y ?? 0)))
-
-  gNodes.selectAll<SVGGElement, SimNode>('g.node')
-    .attr('transform', d => {
-      const x = Math.max(r, Math.min(width.value - r, d.x ?? 0))
-      const y = Math.max(r, Math.min(height.value - r, d.y ?? 0))
-      return `translate(${x},${y})`
-    })
-}
-
-// ── Watch matches/mode (hook pour M4) ─────────────────────────────────────
-
-watch(() => [props.matches, props.mode] as const, () => {
-  if (!simulation) return
-  rebuildLinks()
-  const newForce = d3.forceLink<SimNode, SimLink>(currentLinks)
-    .id(d => String(d.id))
-    .distance(120)
-    .strength(0.5)
-  simulation.force('link', newForce)
-  simulation.alpha(0.8).restart()
-}, { deep: true })
-
-// ── Watch showLabels ──────────────────────────────────────────────────────
-
-watch(() => props.showLabels, (val) => {
-  if (!svgEl.value) return
-  d3.select(svgEl.value).selectAll('.label-bubble').attr('visibility', val ? 'visible' : 'hidden')
-})
-
-// ── Watch fiches (re-render si nouvelles fiches) ───────────────────────────
-
-watch(() => props.fiches, () => {
-  if (simulation) {
-    simulation.stop()
-    simulation = null
-  }
-  render()
-}, { deep: true })
-
-// ── ResizeObserver ─────────────────────────────────────────────────────────
-
-let ro: ResizeObserver | null = null
-
-onMounted(() => {
-  if (!container.value) return
-  width.value = container.value.clientWidth || 800
-  height.value = container.value.clientHeight || 600
-
-  render()
-
-  ro = new ResizeObserver(() => {
-    if (!container.value) return
-    width.value = container.value.clientWidth || 800
-    height.value = container.value.clientHeight || 600
-    if (svgRoot) {
-      svgRoot.attr('width', width.value).attr('height', height.value)
-    }
-    if (simulation) {
-      simulation.force('center', d3.forceCenter(width.value / 2, height.value / 2))
-      simulation.alpha(0.3).restart()
-    }
-  })
-  ro.observe(container.value!)
-})
-
-onUnmounted(() => {
-  if (simulation) simulation.stop()
-  if (ro) ro.disconnect()
-})
-</script>
-
-<style scoped>
-.codev-graph-wrap {
-  width: 100%;
-  height: 70vh;
-  min-height: 320px;
-  position: relative;
-  background: var(--nav-bg, #fafafa);
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.codev-svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-/* ── Etat vide ── */
-
-.empty-state {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  padding: 2rem;
-  text-align: center;
-}
-
-.empty-msg {
-  font-size: 1.125rem;
-  color: var(--nav-text-muted, #6b7280);
-  margin: 0;
-}
-
-.empty-link {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--nav-primary-solid, #1B4436);
-  text-decoration: none;
-  border: 1.5px solid var(--nav-primary-solid, #1B4436);
-  border-radius: 8px;
-  padding: 0.5rem 1.25rem;
-  transition: background 0.15s, color 0.15s;
-}
-
-.empty-link:hover {
-  background: var(--nav-primary-solid, #1B4436);
-  color: #fff;
-}
-
-/* ── Mobile ── */
-
-@media (max-width: 600px) {
-  .codev-graph-wrap {
-    height: 65vh;
-    min-height: 260px;
-    border-radius: 8px;
-  }
-}
-</style>

composables/useMarkdown.ts

@@ -1,36 +0,0 @@
-/**
- * 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 }
-}

nuxt.config.ts

@@ -19,11 +19,6 @@ export default defineNuxtConfig({
     redisUrl: process.env.REDIS_URL || 'redis://127.0.0.1:6379',
     resendApiKey: process.env.RESEND_API_KEY,
     emailJules: process.env.EMAIL_JULES || 'jules@trans-former.fr',
-    codevTableId: '',            // NUXT_CODEV_TABLE_ID
-    codevPassword: 'merci',      // NUXT_CODEV_PASSWORD - défaut "merci", overridable
-    codevBaseId: '',             // NUXT_CODEV_BASE_ID - base NocoDB (ex: pipilvsi7dibo80)
-    codevAdminPassword: 'admin2026', // NUXT_CODEV_ADMIN_PASSWORD
-    ragPeUrl: process.env.NUXT_RAG_PE_URL || 'http://localhost:9621',
   },
 
   // Leaflet ne fonctionne pas en SSR — forcer le rendu côté client

pages/a-propos.vue

@@ -8,12 +8,16 @@
       </NuxtLink>
 
       <!-- ══════════════════════════════════════════════════════════
-           SECTION INTRO - À propos d'AEP
+           SECTION 1 - Mission AEP
       ══════════════════════════════════════════════════════════ -->
+      <!-- TODO Jules : Écrire le pitch (~100 mots) - qui est AEP, pour qui, pourquoi, quelle promesse -->
       <section class="section-mission">
-        <h1>À propos d'AEP</h1>
+        <h1>Architecture d'Écologie Politique</h1>
         <p class="mission-text">
-          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.
+          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.
         </p>
       </section>
 
@@ -205,14 +209,11 @@ 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 ──────────────────────────────────────────────────────────────────── */
@@ -321,16 +322,13 @@ 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);
-  line-height: 1.4;
+  white-space: nowrap;
-}
-
-@media (min-width: 560px) {
-  .badge-label { white-space: nowrap; }
 }
 
 @media (max-width: 559px) {

pages/agences.vue

@@ -128,12 +128,6 @@
               : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
             @click="desktopMapView = 'graphe'"
           >Vue graphique</button>
-          <NuxtLink
-            to="/pensees-ecologiques"
-            class="px-5 py-2 text-sm font-medium transition-colors"
-            style="color: var(--nav-text-muted); border-bottom: 2px solid transparent;"
-            active-class="!color-nav-text"
-          >Pensees</NuxtLink>
         </div>
 
         <!-- Carte Métropole desktop -->
@@ -163,7 +157,8 @@
         </div>
 
         <!-- Carte Outre-mer desktop -->
-        <div v-show="desktopMapView === 'outremer'" class="flex-1 overflow-y-auto" style="background: var(--nav-bg);">
+        <div v-show="desktopMapView === 'outremer'" class="flex-1 flex flex-col overflow-hidden" style="background: var(--nav-bg);">
+          <div class="flex-1 overflow-y-auto">
             <ClientOnly>
               <OutremerMap
                 :orgs="outremerOrgsLegacy"
@@ -177,6 +172,10 @@
               </template>
             </ClientOnly>
           </div>
+          <ChatbotPlaceholder
+            @highlightOrgs="() => {}"
+            @applyHashtag="(tag) => { if (!selectedHashtags.includes(tag)) selectedHashtags = [...selectedHashtags, tag] }"
+          /></div>
 
         <!-- Vue graphique desktop -->
         <div v-show="desktopMapView === 'graphe'" class="flex-1 overflow-hidden flex flex-col">
@@ -202,7 +201,7 @@
         </div>
       </div>
 
-      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer/Graphique + sheet swipable ── -->
+      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer + sheet swipable ── -->
       <div class="lg:hidden shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
         <button
           class="flex-1 py-2 text-sm font-medium transition-colors"
@@ -218,18 +217,6 @@
             : '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>
-        <NuxtLink
-          to="/pensees-ecologiques"
-          class="flex-1 py-2 text-sm font-medium transition-colors text-center"
-          style="color: var(--nav-text-muted); border-bottom: 2px solid transparent;"
-        >Pensees</NuxtLink>
       </div>
 
       <div class="lg:hidden flex-1 relative overflow-hidden">
@@ -266,25 +253,8 @@
           </ClientOnly>
         </div>
 
-        <!-- Vue graphique mobile -->
+        <!-- Bottom sheet swipable -->
-        <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);">
@@ -409,46 +379,12 @@
     </button>
 
     <!-- ═══════════════════════════════════════ CHATBOT BOTTOM SHEET (mobile) -->
-    <ChatbotReseaux
+    <ChatbotSheet
       :modelValue="chatbotOpen"
       @update:modelValue="chatbotOpen = $event"
+      @highlightOrgs="() => {}"
     />
 
-    <!-- ═══════════════════════════════════════ CHATBOT PENSEES (desktop, tous onglets) -->
-    <ClientOnly>
-      <ChatbotPensees />
-    </ClientOnly>
-
-    <!-- ═══════════════════════════════════════ 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>
 
@@ -475,17 +411,8 @@ 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' | 'graphe'>('metropole')
+const mobileMapView = ref<'metropole' | 'outremer'>('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('')
@@ -593,29 +520,3 @@ 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>

pages/codev/carto.vue

@@ -1,550 +0,0 @@
-<template>
-  <div class="codev-carto">
-
-    <header class="carto-header">
-      <h1>Carto entraide</h1>
-      <p class="carto-subtitle">
-        <template v-if="pending">Chargement...</template>
-        <template v-else>
-          {{ fiches.length }} fiche{{ fiches.length !== 1 ? 's' : '' }} - clique sur un nom pour voir le detail
-        </template>
-      </p>
-      <NuxtLink to="/codev/qr" class="qr-link" title="QR Code">[ QR ]</NuxtLink>
-    </header>
-
-    <div class="codev-tabs">
-      <button :class="{ active: tab === 'carto' }" @click="tab = 'carto'" type="button">Carto</button>
-      <button :class="{ active: tab === 'annuaire' }" @click="tab = 'annuaire'" type="button">Annuaire</button>
-    </div>
-
-    <div v-if="tab === 'carto'">
-      <div class="show-labels-bar">
-        <button
-          type="button"
-          :class="{ active: showLabels }"
-          @click="showLabels = !showLabels"
-        >
-          {{ showLabels ? 'Masquer besoins/offres' : 'Montrer besoins/offres' }}
-        </button>
-      </div>
-
-      <ClientOnly>
-        <CodevGraph
-          :fiches="fiches"
-          :matches="matches"
-          :mode="mode"
-          :show-labels="showLabels"
-          @select-fiche="onSelectFiche"
-        />
-        <template #fallback>
-          <div class="graph-fallback">Chargement du graphe...</div>
-        </template>
-      </ClientOnly>
-
-      <!-- Bandeau info mode actif -->
-      <div v-if="mode !== 'none'" class="mode-banner">
-        <span>
-          Mode {{ MODE_LABELS[mode] }} actif -
-          {{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
-        </span>
-        <button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
-      </div>
-
-      <!-- Boutons matching -->
-      <div class="matching-controls">
-        <button
-          :class="{ active: mode === 'solution' }"
-          style="--mode-color: #22c55e"
-          @click="setMode('solution')"
-          type="button"
-        >
-          Solution
-          <span class="hint">besoin - compétence</span>
-        </button>
-        <button
-          :class="{ active: mode === 'alliance' }"
-          style="--mode-color: #f97316"
-          @click="setMode('alliance')"
-          type="button"
-        >
-          Alliance
-          <span class="hint">besoins partagés</span>
-        </button>
-        <button
-          v-if="mode !== 'none'"
-          class="reset"
-          @click="setMode('none')"
-          type="button"
-        >
-          Effacer
-        </button>
-      </div>
-    </div>
-
-    <div v-else-if="tab === 'annuaire'" class="annuaire-wrap">
-
-      <div v-if="fiches.length === 0" class="list-empty">
-        Aucune fiche. <NuxtLink to="/codev/fiche">Ajouter la mienne</NuxtLink>
-      </div>
-
-      <div v-else class="annuaire-scroll">
-        <table class="annuaire-table">
-          <thead>
-            <tr>
-              <th class="col-nom">Prénom</th>
-              <th class="col-besoin">Besoin</th>
-              <th class="col-offre">Ce que j'offre</th>
-              <th v-if="isAdmin" class="col-actions"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="f in fiches" :key="f.id" @click="navigateTo(`/codev/fiche?id=${f.id}`)" class="annuaire-row">
-              <td class="col-nom">{{ f.nom }}</td>
-              <td class="col-besoin">{{ f.besoin }}</td>
-              <td class="col-offre">{{ f.offre }}</td>
-              <td v-if="isAdmin" class="col-actions">
-                <button @click.stop="deleteFiche(f.id)" class="delete-btn" type="button" title="Supprimer">✕</button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <p class="annuaire-hint">Clique sur une ligne pour modifier la fiche</p>
-    </div>
-
-    <!-- FAB ajouter une fiche -->
-    <NuxtLink to="/codev/fiche" class="fab-add" title="Ajouter ma fiche" aria-label="Ajouter une fiche">
-      +
-    </NuxtLink>
-
-    <Transition name="sheet">
-      <div v-if="selectedFiche" class="bottom-sheet" @click.self="selectedFiche = null">
-        <div class="sheet-content">
-          <div class="sheet-handle"></div>
-          <div class="sheet-name">{{ selectedFiche.nom }}</div>
-          <div class="sheet-section">
-            <span class="sheet-label">Besoin</span>
-            <p class="sheet-text">{{ selectedFiche.besoin }}</p>
-          </div>
-          <div class="sheet-section">
-            <span class="sheet-label">Ce que j'apporte</span>
-            <p class="sheet-text">{{ selectedFiche.offre }}</p>
-          </div>
-          <div class="sheet-tags" v-if="selectedFiche.hashtags.length">
-            <span v-for="t in selectedFiche.hashtags" :key="t" class="sheet-tag">#{{ t }}</span>
-          </div>
-          <NuxtLink :to="`/codev/fiche?id=${selectedFiche.id}`" class="sheet-edit-btn">Modifier cette fiche</NuxtLink>
-          <button class="sheet-close" @click="selectedFiche = null" type="button">Fermer</button>
-        </div>
-      </div>
-    </Transition>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { CodevFiche, CodevMatch } from '~/types/codev'
-import { computeMatches } from '~/utils/codev/matching'
-
-useHead({ title: 'Carto - Co-developpement' })
-
-const { data, pending, refresh } = await useFetch<{ list: CodevFiche[] }>('/api/codev/fiches')
-const fiches = computed(() => data.value?.list ?? [])
-
-const matches = ref<CodevMatch[]>([])
-const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')
-const showLabels = ref(false)
-const tab = ref<'carto' | 'annuaire'>('carto')
-const selectedFiche = ref<CodevFiche | null>(null)
-const isMobileView = typeof window !== 'undefined' ? window.innerWidth < 600 : false
-
-const isAdmin = ref(false)
-
-onMounted(async () => {
-  try {
-    const r = await $fetch<{ admin: boolean }>('/api/codev/me')
-    isAdmin.value = r.admin
-  } catch { isAdmin.value = false }
-})
-
-const MODE_LABELS: Record<string, string> = {
-  solution: 'Solution',
-  alliance: 'Alliance',
-  surprise: 'Surprise',
-}
-
-function setMode(newMode: 'none' | 'solution' | 'alliance' | 'surprise') {
-  mode.value = newMode
-  if (newMode === 'none') {
-    matches.value = []
-  } else {
-    matches.value = computeMatches(fiches.value, newMode)
-  }
-}
-
-function onSelectFiche(id: number) {
-  if (isMobileView) {
-    selectedFiche.value = fiches.value.find(f => f.id === id) ?? null
-  } else {
-    navigateTo(`/codev/fiche?id=${id}`)
-  }
-}
-
-async function deleteFiche(id: number) {
-  if (!confirm('Supprimer la fiche ?')) return
-  await $fetch(`/api/codev/fiches/${id}`, { method: 'DELETE' })
-  await refresh()
-}
-</script>
-
-<style scoped>
-.codev-carto {
-  min-height: 100vh;
-  background: var(--nav-bg, #fafafa);
-  display: flex;
-  flex-direction: column;
-  padding: 1.25rem 1rem 2rem;
-  gap: 1rem;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-/* ── En-tete ── */
-
-.carto-header {
-  text-align: center;
-  padding-bottom: 0.5rem;
-}
-
-.carto-header h1 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--nav-text, #1a1a2e);
-  margin: 0 0 0.375rem;
-}
-
-.carto-subtitle {
-  font-size: 0.9rem;
-  color: var(--nav-text-muted, #6b7280);
-  margin: 0;
-}
-
-/* ── Fallback ── */
-
-.graph-fallback {
-  width: 100%;
-  height: 70vh;
-  min-height: 320px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--nav-text-muted, #6b7280);
-  font-size: 0.9rem;
-  background: var(--nav-bg-alt, #f3f4f6);
-  border-radius: 12px;
-}
-
-/* ── Bandeau mode actif ── */
-
-.mode-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.5rem 0.875rem;
-  background: #f0fdf4;
-  border: 1px solid #bbf7d0;
-  border-radius: 8px;
-  font-size: 0.875rem;
-  color: #166534;
-  flex-wrap: wrap;
-}
-
-.banner-clear {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #166534;
-  background: transparent;
-  border: 1px solid #166534;
-  border-radius: 6px;
-  padding: 0.2rem 0.6rem;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.banner-clear:hover {
-  background: #166534;
-  color: #fff;
-}
-
-/* ── Boutons matching ── */
-
-.matching-controls {
-  position: sticky;
-  bottom: 0;
-  display: flex;
-  gap: 8px;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(8px);
-  border-top: 1px solid #e5e7eb;
-  margin: 0 -1rem -2rem;
-}
-
-.matching-controls button {
-  flex: 1;
-  padding: 12px 8px;
-  border: 1px solid #d0d4dc;
-  border-radius: 8px;
-  background: white;
-  font-size: 14px;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
-}
-
-.matching-controls button .hint {
-  font-size: 11px;
-  color: #6b7280;
-  font-weight: normal;
-}
-
-.matching-controls button.active {
-  background: var(--mode-color, #1B4436);
-  color: white;
-  border-color: transparent;
-}
-
-.matching-controls button.active .hint {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.matching-controls button.reset {
-  flex: 0 0 auto;
-  padding: 12px 16px;
-  background: #f3f4f6;
-  border-color: #d0d4dc;
-  color: #374151;
-  font-size: 13px;
-}
-
-.matching-controls button.reset:hover {
-  background: #e5e7eb;
-}
-
-@media (max-width: 500px) {
-  .matching-controls {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    margin: 0 -0.75rem -1.5rem;
-  }
-
-  .matching-controls button.reset {
-    grid-column: span 2;
-  }
-}
-
-/* ── Toggle besoins/offres ── */
-
-.show-labels-bar {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 8px;
-}
-
-.show-labels-bar button {
-  border: 1px solid #d0d4dc;
-  border-radius: 8px;
-  padding: 8px 16px;
-  background: white;
-  font-size: 13px;
-  cursor: pointer;
-  color: #374151;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
-}
-
-.show-labels-bar button.active {
-  background: #1B4436;
-  color: white;
-  border-color: transparent;
-}
-
-/* ── FAB ajouter ── */
-
-.fab-add {
-  position: fixed;
-  bottom: 80px;
-  right: 16px;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: #1B4436;
-  color: white;
-  font-size: 28px;
-  font-weight: 300;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
-  z-index: 100;
-  transition: transform 0.15s, opacity 0.15s;
-  line-height: 1;
-}
-
-.fab-add:hover {
-  transform: scale(1.08);
-  opacity: 0.92;
-}
-
-/* ── 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); }
-
-/* ── List view ── */
-
-.list-view { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
-.list-card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
-.list-card-name { font-weight: 700; font-size: 0.95rem; color: #1a1a2e; }
-.list-card-text { font-size: 0.875rem; color: #4b5563; margin: 0; line-height: 1.5; }
-.list-card-link { font-size: 0.8rem; color: #1B4436; text-decoration: none; align-self: flex-end; }
-.list-empty { text-align: center; color: #6b7280; font-size: 0.9rem; }
-
-/* ── Bottom sheet ── */
-
-.bottom-sheet { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; display: flex; align-items: flex-end; }
-.sheet-content { background: white; border-radius: 16px 16px 0 0; padding: 16px 20px 32px; width: 100%; display: flex; flex-direction: column; gap: 12px; max-height: 80vh; overflow-y: auto; }
-.sheet-handle { width: 36px; height: 4px; background: #d1d5db; border-radius: 2px; align-self: center; margin-bottom: 4px; }
-.sheet-name { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; }
-.sheet-section { display: flex; flex-direction: column; gap: 4px; }
-.sheet-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
-.sheet-text { font-size: 0.9rem; color: #374151; margin: 0; line-height: 1.5; }
-.sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; }
-.sheet-tag { font-size: 0.75rem; background: #f3f4f6; color: #374151; padding: 2px 8px; border-radius: 12px; }
-.sheet-edit-btn { display: block; text-align: center; background: #1B4436; color: white; border-radius: 8px; padding: 12px; text-decoration: none; font-weight: 600; }
-.sheet-close { background: transparent; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px; color: #6b7280; cursor: pointer; font-size: 0.875rem; }
-.sheet-enter-active, .sheet-leave-active { transition: opacity 0.2s; }
-.sheet-enter-from, .sheet-leave-to { opacity: 0; }
-
-/* ── QR link ── */
-
-.qr-link {
-  font-size: 0.75rem;
-  color: #9ca3af;
-  text-decoration: none;
-  align-self: flex-end;
-}
-.qr-link:hover { color: #6b7280; }
-
-/* ── 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 {
-  cursor: pointer;
-  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; }
-
-.annuaire-hint {
-  font-size: 0.75rem;
-  color: #9ca3af;
-  text-align: center;
-  margin: 0;
-}
-
-.col-actions { width: 40px; text-align: center; }
-.delete-btn {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: #ef4444;
-  font-size: 1rem;
-  padding: 4px 8px;
-  border-radius: 4px;
-  transition: background 0.1s;
-}
-.delete-btn:hover { background: #fef2f2; }
-
-/* ── Mobile ── */
-
-@media (max-width: 600px) {
-  .codev-carto {
-    padding: 1rem 0.75rem 1.5rem;
-  }
-
-  .carto-header h1 {
-    font-size: 1.25rem;
-  }
-}
-</style>

pages/codev/demo.vue

@@ -1,406 +0,0 @@
-<template>
-  <div class="codev-demo">
-
-    <header class="demo-header">
-      <span class="demo-badge">DEMO</span>
-      <h1>Co-developpement - exemple</h1>
-      <p class="subtitle">10 personnes fictives. Clique sur un mode pour voir les matchs.</p>
-    </header>
-
-    <div class="codev-tabs">
-      <button :class="{ active: tab === 'carto' }" @click="tab = 'carto'" type="button">Carto</button>
-      <button :class="{ active: tab === 'annuaire' }" @click="tab = 'annuaire'" type="button">Annuaire</button>
-    </div>
-
-    <div v-if="tab === 'carto'">
-      <ClientOnly>
-        <CodevGraph
-          :fiches="fiches"
-          :matches="matches"
-          :mode="mode"
-        />
-        <template #fallback>
-          <div class="graph-fallback">Chargement du graphe...</div>
-        </template>
-      </ClientOnly>
-
-      <!-- Bandeau info mode actif -->
-      <div v-if="mode !== 'none'" class="mode-banner">
-        <span>
-          Mode {{ MODE_LABELS[mode] }} actif -
-          {{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
-        </span>
-        <button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
-      </div>
-
-      <!-- Boutons matching -->
-      <div class="matching-controls">
-        <button
-          :class="{ active: mode === 'solution' }"
-          style="--mode-color: #22c55e"
-          @click="setMode('solution')"
-          type="button"
-        >
-          Solution
-          <span class="hint">besoin - offre</span>
-        </button>
-        <button
-          :class="{ active: mode === 'alliance' }"
-          style="--mode-color: #f97316"
-          @click="setMode('alliance')"
-          type="button"
-        >
-          Alliance
-          <span class="hint">besoins partages</span>
-        </button>
-        <button
-          v-if="mode !== 'none'"
-          class="reset"
-          @click="setMode('none')"
-          type="button"
-        >
-          Effacer
-        </button>
-      </div>
-    </div>
-
-    <div v-else-if="tab === 'annuaire'" class="annuaire-wrap">
-      <div class="annuaire-scroll">
-        <table class="annuaire-table">
-          <thead>
-            <tr>
-              <th class="col-nom">Prénom</th>
-              <th class="col-besoin">Besoin</th>
-              <th class="col-offre">Ce que j'offre</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="f in fiches" :key="f.id" class="annuaire-row">
-              <td class="col-nom">{{ f.nom }}</td>
-              <td class="col-besoin">{{ f.besoin }}</td>
-              <td class="col-offre">{{ f.offre }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { CodevFiche, CodevMatch } from '~/types/codev'
-import { computeMatches } from '~/utils/codev/matching'
-
-const tab = ref<'carto' | 'annuaire'>('carto')
-
-// 10 fiches sans hashtags — textes enrichis pour que scoreDirect discrimine bien les 3 modes :
-//
-// Solution (scoreDirect besoinA vs offreB) :
-//   Sami(besoin vendre formation) -> Ines(offre vente formations) ✓
-//   Nael(besoin site web formation) -> Sami(offre developpement web) ✓
-//   Eva(besoin coaching vente) -> Ines(offre vente formations) ✓
-//   Tom(besoin tiers-lieu) -> Zoe(offre facilitation tiers-lieux) ✓
-//
-// Alliance (besoins similaires) :
-//   Lea + Maya (coaching, lancer, offre) ✓
-//   Tom + Zoe (tiers-lieu, co-creer) ✓
-//   Sami + Kenji (vendre, formations) ✓
-//
-// Surprise (offres similaires) :
-//   Lea + Zoe (facilitation, groupes) ✓
-//   Tom + Roman (architecture) ✓
-//   Ines + Nael (marketing, formations) ✓
-
-const FICHES_DEMO: CodevFiche[] = [
-  {
-    id: 1, nom: 'Lea',
-    besoin: 'Structurer et lancer mon offre de coaching professionnel cet automne',
-    offre: 'Facilitation de groupes et animation de cercles de parole',
-    hashtags: [],
-    created_at: '2026-05-08T10:00:00Z',
-  },
-  {
-    id: 2, nom: 'Sami',
-    besoin: 'Vendre ma formation en ligne et attirer mes premiers clients',
-    offre: 'Developpement web sur mesure, creation de sites et applications',
-    hashtags: [],
-    created_at: '2026-05-08T10:01:00Z',
-  },
-  {
-    id: 3, nom: 'Ines',
-    besoin: 'Ameliorer la facilitation de mes ateliers collaboratifs',
-    offre: 'Vente de formations en ligne et marketing pour formateurs',
-    hashtags: [],
-    created_at: '2026-05-08T10:02:00Z',
-  },
-  {
-    id: 4, nom: 'Tom',
-    besoin: 'Trouver des associes pour co-creer un tiers-lieu rural',
-    offre: 'Architecture bioclimatique et eco-construction pour tiers-lieux',
-    hashtags: [],
-    created_at: '2026-05-08T10:03:00Z',
-  },
-  {
-    id: 5, nom: 'Maya',
-    besoin: 'Creer et lancer mon offre de coaching en transition professionnelle',
-    offre: 'Accompagnement coaching de carriere et transitions professionnelles',
-    hashtags: [],
-    created_at: '2026-05-08T10:04:00Z',
-  },
-  {
-    id: 6, nom: 'Kenji',
-    besoin: 'Apprendre a vendre mes formations sans pression commerciale',
-    offre: 'Photographie professionnelle et direction artistique editoriale',
-    hashtags: [],
-    created_at: '2026-05-08T10:05:00Z',
-  },
-  {
-    id: 7, nom: 'Zoe',
-    besoin: 'Co-creer un tiers-lieu avec des porteurs de projet alignes',
-    offre: 'Facilitation de collectifs et animation en intelligence collective',
-    hashtags: [],
-    created_at: '2026-05-08T10:06:00Z',
-  },
-  {
-    id: 8, nom: 'Nael',
-    besoin: 'Creer un site web pour presenter et vendre ma formation',
-    offre: 'Strategie marketing digital et lancement de produits en ligne',
-    hashtags: [],
-    created_at: '2026-05-08T10:07:00Z',
-  },
-  {
-    id: 9, nom: 'Eva',
-    besoin: 'Lancer mon coaching avec une page de vente qui convertit',
-    offre: 'Ecriture longue forme, articles de fond et tribunes editoriales',
-    hashtags: [],
-    created_at: '2026-05-08T10:08:00Z',
-  },
-  {
-    id: 10, nom: 'Roman',
-    besoin: 'Ecrire de meilleurs articles pour mon blog et ma newsletter',
-    offre: 'Architecture technique et plans pour renovation energetique',
-    hashtags: [],
-    created_at: '2026-05-08T10:09:00Z',
-  },
-]
-
-const fiches = ref(FICHES_DEMO)
-const matches = ref<CodevMatch[]>([])
-const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')
-
-const MODE_LABELS: Record<string, string> = {
-  solution: 'Solution',
-  alliance: 'Alliance',
-  surprise: 'Surprise',
-}
-
-useHead({ title: 'Demo - Co-developpement' })
-
-function setMode(newMode: typeof mode.value) {
-  mode.value = newMode
-  if (newMode === 'none') {
-    matches.value = []
-  } else {
-    matches.value = computeMatches(fiches.value, newMode, 0.12)
-  }
-}
-</script>
-
-<style scoped>
-.codev-demo {
-  min-height: 100vh;
-  background: var(--nav-bg, #fafafa);
-  display: flex;
-  flex-direction: column;
-  padding: 1.25rem 1rem 2rem;
-  gap: 1rem;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-/* ── En-tete ── */
-
-.demo-header {
-  text-align: center;
-  padding-bottom: 0.5rem;
-}
-
-.demo-badge {
-  display: inline-block;
-  background: #f97316;
-  color: #fff;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  padding: 4px 8px;
-  border-radius: 4px;
-  margin-bottom: 0.5rem;
-}
-
-.demo-header h1 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--nav-text, #1a1a2e);
-  margin: 0 0 0.375rem;
-}
-
-.subtitle {
-  font-size: 0.9rem;
-  color: var(--nav-text-muted, #6b7280);
-  margin: 0;
-}
-
-/* ── Fallback ── */
-
-.graph-fallback {
-  width: 100%;
-  height: 70vh;
-  min-height: 320px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--nav-text-muted, #6b7280);
-  font-size: 0.9rem;
-  background: var(--nav-bg-alt, #f3f4f6);
-  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 {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.5rem 0.875rem;
-  background: #f0fdf4;
-  border: 1px solid #bbf7d0;
-  border-radius: 8px;
-  font-size: 0.875rem;
-  color: #166534;
-  flex-wrap: wrap;
-}
-
-.banner-clear {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #166534;
-  background: transparent;
-  border: 1px solid #166534;
-  border-radius: 6px;
-  padding: 0.2rem 0.6rem;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.banner-clear:hover {
-  background: #166534;
-  color: #fff;
-}
-
-/* ── Boutons matching ── */
-
-.matching-controls {
-  position: sticky;
-  bottom: 0;
-  display: flex;
-  gap: 8px;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(8px);
-  border-top: 1px solid #e5e7eb;
-  margin: 0 -1rem -2rem;
-}
-
-.matching-controls button {
-  flex: 1;
-  padding: 12px 8px;
-  border: 1px solid #d0d4dc;
-  border-radius: 8px;
-  background: white;
-  font-size: 14px;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
-}
-
-.matching-controls button .hint {
-  font-size: 11px;
-  color: #6b7280;
-  font-weight: normal;
-}
-
-.matching-controls button.active {
-  background: var(--mode-color, #1B4436);
-  color: white;
-  border-color: transparent;
-}
-
-.matching-controls button.active .hint {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.matching-controls button.reset {
-  flex: 0 0 auto;
-  padding: 12px 16px;
-  background: #f3f4f6;
-  border-color: #d0d4dc;
-  color: #374151;
-  font-size: 13px;
-}
-
-.matching-controls button.reset:hover {
-  background: #e5e7eb;
-}
-
-@media (max-width: 500px) {
-  .matching-controls {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    margin: 0 -0.75rem -1.5rem;
-  }
-
-  .matching-controls button.reset {
-    grid-column: span 2;
-  }
-}
-
-/* ── Mobile ── */
-
-@media (max-width: 600px) {
-  .codev-demo {
-    padding: 1rem 0.75rem 1.5rem;
-  }
-
-  .demo-header h1 {
-    font-size: 1.25rem;
-  }
-}
-</style>

pages/codev/fiche.vue

@@ -1,415 +0,0 @@
-<template>
-  <div class="fiche-page">
-    <div class="fiche-inner">
-
-      <!-- En-tête -->
-      <div class="fiche-header">
-        <NuxtLink to="/codev/carto" class="back-link">← Retour à la carte</NuxtLink>
-        <h1>{{ isEdit ? 'Modifier ma fiche' : 'Ma fiche' }}</h1>
-        <p class="fiche-lead">3 lignes pour te présenter. Le reste se passe entre nous.</p>
-      </div>
-
-      <!-- Formulaire -->
-      <form class="fiche-form" @submit.prevent="submit" novalidate>
-
-        <!-- Nom -->
-        <div class="field-group">
-          <label for="nom">
-            Prénom <span class="required">*</span>
-          </label>
-          <input
-            id="nom"
-            v-model="form.nom"
-            type="text"
-            placeholder="Ex : Camille"
-            required
-            minlength="2"
-            maxlength="50"
-            :disabled="loading"
-          />
-        </div>
-
-        <!-- Besoin -->
-        <div class="field-group">
-          <div class="label-row">
-            <label for="besoin">
-              Mon besoin actuel <span class="required">*</span>
-            </label>
-            <button type="button" class="tooltip-trigger" @click="toggleTip('besoin')" aria-label="C'est quoi un besoin ?">?</button>
-          </div>
-          <details v-if="activeTip === 'besoin'" class="tooltip-block" open>
-            <summary class="sr-only">Aide</summary>
-            <p>Un besoin, c'est ce qui te manque pour avancer. Ca peut etre concret (un coup de main sur un dossier) ou plus large (clarifier ou tu vas). Pas grave si c'est flou - la rencontre IRL aide a le preciser.</p>
-          </details>
-          <textarea
-            id="besoin"
-            v-model="form.besoin"
-            rows="3"
-            placeholder="Ex : J'ai besoin d'aide pour structurer mon offre de prestation"
-            required
-            minlength="5"
-            maxlength="300"
-            :disabled="loading"
-          />
-          <span class="char-count" :class="{ 'char-warn': form.besoin.length > 260 }">
-            {{ form.besoin.length }}/300
-          </span>
-        </div>
-
-        <!-- Offre -->
-        <div class="field-group">
-          <div class="label-row">
-            <label for="offre">
-              Ce que j'offre a la communaute <span class="required">*</span>
-            </label>
-            <button type="button" class="tooltip-trigger" @click="toggleTip('offre')" aria-label="C'est quoi une offre ?">?</button>
-          </div>
-          <details v-if="activeTip === 'offre'" class="tooltip-block" open>
-            <summary class="sr-only">Aide</summary>
-            <p>Une offre, c'est une competence, une experience ou une qualite que tu peux partager. Ce que les autres viennent chercher chez toi naturellement.</p>
-          </details>
-          <textarea
-            id="offre"
-            v-model="form.offre"
-            rows="3"
-            placeholder="Ex : Je peux partager mon expérience en facilitation de groupe"
-            required
-            minlength="5"
-            maxlength="300"
-            :disabled="loading"
-          />
-          <span class="char-count" :class="{ 'char-warn': form.offre.length > 260 }">
-            {{ form.offre.length }}/300
-          </span>
-        </div>
-
-        <!-- Hashtags -->
-        <div class="field-group">
-          <label for="hashtags">
-            Mots-clés
-            <span class="label-hint">(optionnel, 3 max, séparés par des virgules)</span>
-          </label>
-          <input
-            id="hashtags"
-            v-model="form.hashtagsRaw"
-            type="text"
-            placeholder="Ex : business, écriture, écologie"
-            maxlength="120"
-            :disabled="loading"
-          />
-        </div>
-
-        <!-- Erreur serveur -->
-        <div v-if="error" class="server-error" role="alert">
-          {{ error }}
-        </div>
-
-        <!-- Bouton -->
-        <button type="submit" class="submit-btn" :disabled="loading">
-          {{ isEdit ? (loading ? 'Modification...' : 'Enregistrer les modifications') : (loading ? 'Envoi en cours...' : 'Ajouter ma fiche') }}
-        </button>
-
-        <NuxtLink to="/codev/carto" class="skip-link">
-          Voir la carte sans créer de fiche →
-        </NuxtLink>
-
-      </form>
-
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const route = useRoute()
-const editId = computed(() => route.query.id ? Number(route.query.id) : null)
-const isEdit = computed(() => editId.value !== null)
-
-const form = ref({ nom: '', besoin: '', offre: '', hashtagsRaw: '' })
-const error = ref('')
-const loading = ref(false)
-const activeTip = ref<'besoin' | 'offre' | null>(null)
-
-useHead({ title: computed(() => isEdit.value ? 'Modifier ma fiche — Co-développement' : 'Ma fiche — Co-développement') })
-
-onMounted(async () => {
-  if (!isEdit.value) return
-  try {
-    const fiche = await $fetch<any>(`/api/codev/fiches/${editId.value}`)
-    form.value.nom = fiche.nom
-    form.value.besoin = fiche.besoin
-    form.value.offre = fiche.offre
-    form.value.hashtagsRaw = fiche.hashtags.join(', ')
-  } catch {
-    error.value = 'Impossible de charger la fiche, elle a peut-etre ete supprimee.'
-  }
-})
-
-function toggleTip(field: 'besoin' | 'offre') {
-  activeTip.value = activeTip.value === field ? null : field
-}
-
-async function submit() {
-  error.value = ''
-  loading.value = true
-  try {
-    const hashtags = form.value.hashtagsRaw
-      .split(',')
-      .map((h) => h.trim().toLowerCase().replace(/^#/, ''))
-      .filter(Boolean)
-      .slice(0, 3)
-
-    const payload = {
-      nom: form.value.nom,
-      besoin: form.value.besoin,
-      offre: form.value.offre,
-      hashtags,
-    }
-
-    if (isEdit.value) {
-      await $fetch(`/api/codev/fiches/${editId.value}`, { method: 'PATCH', body: payload })
-    } else {
-      await $fetch('/api/codev/fiches', { method: 'POST', body: payload })
-    }
-    await navigateTo('/codev/carto')
-  } catch (e: any) {
-    error.value = e?.data?.message || e?.statusMessage || 'Erreur, reessaie'
-  } finally {
-    loading.value = false
-  }
-}
-</script>
-
-<style scoped>
-/* ── Layout ── */
-
-.fiche-page {
-  min-height: 100vh;
-  background: var(--nav-bg, #fafafa);
-  padding: 1.5rem 1rem 4rem;
-}
-
-.fiche-inner {
-  max-width: 480px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 1.75rem;
-}
-
-/* ── En-tête ── */
-
-.back-link {
-  display: inline-block;
-  font-size: 0.875rem;
-  color: var(--nav-text-muted, #6b7280);
-  text-decoration: none;
-  margin-bottom: 0.75rem;
-}
-
-.back-link:hover {
-  color: var(--nav-primary-solid, #1B4436);
-}
-
-.fiche-header h1 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--nav-text, #1a1a2e);
-  margin: 0 0 0.375rem;
-}
-
-.fiche-lead {
-  font-size: 0.9rem;
-  color: var(--nav-text-muted, #6b7280);
-  margin: 0;
-  line-height: 1.5;
-}
-
-/* ── Formulaire ── */
-
-.fiche-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-/* ── Champ ── */
-
-.field-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.field-group label {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--nav-text, #1a1a2e);
-}
-
-.label-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.label-hint {
-  font-weight: 400;
-  font-size: 0.8rem;
-  color: var(--nav-text-muted, #6b7280);
-  margin-left: 0.25rem;
-}
-
-.required {
-  color: #c0392b;
-}
-
-.field-group input[type="text"],
-.field-group input[type="password"],
-.field-group textarea {
-  width: 100%;
-  padding: 0.75rem 0.875rem;
-  border: 1px solid var(--border-color, #d0d4dc);
-  border-radius: 8px;
-  font-size: 1rem;
-  color: var(--nav-text, #1a1a2e);
-  background: var(--nav-surface, #ffffff);
-  font-family: inherit;
-  transition: border-color 0.15s, box-shadow 0.15s;
-  box-sizing: border-box;
-}
-
-.field-group input:focus,
-.field-group textarea:focus {
-  outline: none;
-  border-color: var(--nav-primary-solid, #1B4436);
-  box-shadow: 0 0 0 2px rgba(27, 68, 54, 0.15);
-}
-
-.field-group input:disabled,
-.field-group textarea:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.field-group textarea {
-  resize: vertical;
-  min-height: 80px;
-}
-
-.char-count {
-  font-size: 0.75rem;
-  color: var(--nav-text-muted, #6b7280);
-  text-align: right;
-}
-
-.char-warn {
-  color: #e67e22;
-}
-
-/* ── Tooltip ── */
-
-.tooltip-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  background: var(--nav-surface, #ffffff);
-  border: 1px solid var(--border-color, #d0d4dc);
-  border-radius: 50%;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: var(--nav-text-muted, #6b7280);
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  flex-shrink: 0;
-  transition: border-color 0.15s, color 0.15s;
-}
-
-.tooltip-trigger:hover {
-  border-color: var(--nav-primary-solid, #1B4436);
-  color: var(--nav-primary-solid, #1B4436);
-}
-
-.tooltip-block {
-  background: var(--nav-surface, #ffffff);
-  border: 1px solid var(--border-color, #d0d4dc);
-  border-radius: 8px;
-  padding: 0.75rem 0.875rem;
-  font-size: 0.85rem;
-  color: var(--nav-text-muted, #6b7280);
-  line-height: 1.5;
-}
-
-.tooltip-block p {
-  margin: 0;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-/* ── Erreur serveur ── */
-
-.server-error {
-  padding: 0.75rem 0.875rem;
-  background: #fdf0ee;
-  border: 1px solid #e74c3c;
-  border-radius: 8px;
-  font-size: 0.875rem;
-  color: #c0392b;
-}
-
-/* ── Bouton ── */
-
-.submit-btn {
-  width: 100%;
-  padding: 0.875rem 1rem;
-  background: var(--nav-primary-solid, #1B4436);
-  color: #ffffff;
-  border: none;
-  border-radius: 8px;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  font-family: inherit;
-  transition: opacity 0.15s;
-  margin-top: 0.25rem;
-}
-
-.submit-btn:hover:not(:disabled) {
-  opacity: 0.88;
-}
-
-.submit-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.skip-link {
-  display: block;
-  text-align: center;
-  font-size: 0.825rem;
-  color: var(--nav-text-muted, #9ca3af);
-  text-decoration: none;
-  margin-top: 0.5rem;
-  padding: 0.5rem;
-}
-.skip-link:hover { color: var(--nav-text, #1a1a2e); }
-
-/* ── Responsive ── */
-
-@media (max-width: 480px) {
-  .fiche-page {
-    padding: 1.25rem 1rem 3rem;
-  }
-}
-</style>

pages/codev/index.vue

@@ -1,217 +0,0 @@
-<template>
-  <div class="lock-page">
-    <div class="lock-inner">
-
-      <div class="lock-header">
-        <h1>Co-développement</h1>
-        <p class="lock-subtitle">Entraide entre pairs</p>
-        <p class="lock-intro">Cet espace est un cercle. Pour entrer, il y a un mot.</p>
-      </div>
-
-      <form class="lock-form" @submit.prevent="submit" novalidate>
-
-        <div class="field-group">
-          <input
-            id="password"
-            v-model="password"
-            type="password"
-            placeholder="Mot de passe"
-            autocomplete="current-password"
-            required
-            :disabled="loading"
-            class="lock-input"
-          />
-        </div>
-
-        <div v-if="error" class="lock-error" role="alert">
-          {{ error }}
-        </div>
-
-        <button type="submit" class="lock-btn" :disabled="loading || !password">
-          {{ loading ? 'Vérification...' : 'Entrer' }}
-        </button>
-
-      </form>
-
-      <div class="lock-footer">
-        <NuxtLink to="/codev/demo" class="demo-link">Voir l'exemple &rarr;</NuxtLink>
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const password = ref('')
-const error = ref('')
-const loading = ref(false)
-
-useHead({ title: 'Co-développement — Entraide entre pairs' })
-
-async function submit() {
-  error.value = ''
-  loading.value = true
-  try {
-    await $fetch('/api/codev/auth', {
-      method: 'POST',
-      body: { password: password.value },
-    })
-    await navigateTo('/codev/fiche')
-  } catch (e: any) {
-    error.value = e?.statusMessage || 'Mauvais mot de passe'
-  } finally {
-    loading.value = false
-  }
-}
-</script>
-
-<style scoped>
-/* ── Layout ── */
-
-.lock-page {
-  min-height: 100vh;
-  background: var(--nav-bg, #fafafa);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem 1rem;
-}
-
-.lock-inner {
-  width: 100%;
-  max-width: 400px;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-/* ── En-tête ── */
-
-.lock-header {
-  text-align: center;
-}
-
-.lock-header h1 {
-  font-size: 1.75rem;
-  font-weight: 700;
-  color: var(--nav-text, #1a1a2e);
-  margin: 0 0 0.375rem;
-}
-
-.lock-subtitle {
-  font-size: 1rem;
-  color: var(--nav-text-muted, #6b7280);
-  margin: 0 0 1rem;
-}
-
-.lock-intro {
-  font-size: 0.9rem;
-  color: var(--nav-text-muted, #6b7280);
-  line-height: 1.5;
-  margin: 0;
-  font-style: italic;
-}
-
-/* ── Formulaire ── */
-
-.lock-form {
-  display: flex;
-  flex-direction: column;
-  gap: 0.875rem;
-}
-
-.field-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.lock-input {
-  width: 100%;
-  padding: 0.875rem 1rem;
-  border: 1px solid var(--border-color, #d0d4dc);
-  border-radius: 8px;
-  font-size: 1rem;
-  color: var(--nav-text, #1a1a2e);
-  background: var(--nav-surface, #ffffff);
-  font-family: inherit;
-  text-align: center;
-  letter-spacing: 0.1em;
-  transition: border-color 0.15s, box-shadow 0.15s;
-  box-sizing: border-box;
-}
-
-.lock-input:focus {
-  outline: none;
-  border-color: var(--nav-primary-solid, #1B4436);
-  box-shadow: 0 0 0 2px rgba(27, 68, 54, 0.15);
-}
-
-.lock-input:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* ── Erreur ── */
-
-.lock-error {
-  padding: 0.625rem 0.875rem;
-  background: #fdf0ee;
-  border: 1px solid #e74c3c;
-  border-radius: 8px;
-  font-size: 0.875rem;
-  color: #c0392b;
-  text-align: center;
-}
-
-/* ── Bouton ── */
-
-.lock-btn {
-  width: 100%;
-  padding: 0.875rem 1rem;
-  background: var(--nav-primary-solid, #1B4436);
-  color: #ffffff;
-  border: none;
-  border-radius: 8px;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  font-family: inherit;
-  transition: opacity 0.15s;
-}
-
-.lock-btn:hover:not(:disabled) {
-  opacity: 0.88;
-}
-
-.lock-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-/* ── Pied de page ── */
-
-.lock-footer {
-  text-align: center;
-}
-
-.demo-link {
-  font-size: 0.875rem;
-  color: var(--nav-text-muted, #6b7280);
-  text-decoration: none;
-  transition: color 0.15s;
-}
-
-.demo-link:hover {
-  color: var(--nav-primary-solid, #1B4436);
-}
-
-/* ── Responsive ── */
-
-@media (max-width: 480px) {
-  .lock-page {
-    padding: 1.25rem 1rem 2.5rem;
-    align-items: flex-start;
-    padding-top: 3rem;
-  }
-}
-</style>

pages/codev/qr.vue

@@ -1,94 +0,0 @@
-<template>
-  <div class="qr-page">
-    <div class="qr-card">
-      <h1>Co-développement</h1>
-      <p class="qr-subtitle">Scanne pour rejoindre la session</p>
-
-      <img
-        :src="`https://api.qrserver.com/v1/create-qr-code/?size=280x280&data=${encodeURIComponent(APP_URL)}&bgcolor=ffffff&color=1B4436&margin=2`"
-        alt="QR code aep.trans-former.fr/codev"
-        class="qr-img"
-        width="280"
-        height="280"
-      />
-
-      <p class="qr-url">{{ APP_URL }}</p>
-      <p class="qr-password">Mot de passe : <strong>merci</strong></p>
-
-      <a :href="`https://api.qrserver.com/v1/create-qr-code/?size=600x600&data=${encodeURIComponent(APP_URL)}&bgcolor=ffffff&color=1B4436&margin=2`"
-        download="codev-qr.png"
-        class="qr-download"
-        target="_blank"
-      >
-        Télécharger le QR code
-      </a>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const APP_URL = 'https://aep.trans-former.fr/codev'
-useHead({ title: 'QR Code — Co-développement' })
-</script>
-
-<style scoped>
-.qr-page {
-  min-height: 100vh;
-  background: var(--nav-bg, #fafafa);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem 1rem;
-}
-.qr-card {
-  background: white;
-  border-radius: 16px;
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  max-width: 360px;
-  width: 100%;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
-  text-align: center;
-}
-.qr-card h1 {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #1a1a2e;
-  margin: 0;
-}
-.qr-subtitle {
-  font-size: 0.9rem;
-  color: #6b7280;
-  margin: 0;
-}
-.qr-img {
-  border-radius: 8px;
-  border: 2px solid #e5e7eb;
-}
-.qr-url {
-  font-size: 0.8rem;
-  color: #9ca3af;
-  margin: 0;
-  font-family: monospace;
-}
-.qr-password {
-  font-size: 0.95rem;
-  color: #374151;
-  margin: 0;
-}
-.qr-download {
-  display: inline-block;
-  padding: 10px 20px;
-  background: #1B4436;
-  color: white;
-  border-radius: 8px;
-  text-decoration: none;
-  font-size: 0.875rem;
-  font-weight: 600;
-  transition: opacity 0.15s;
-}
-.qr-download:hover { opacity: 0.88; }
-</style>

pages/index.vue

@@ -37,31 +37,13 @@
         class="absolute top-2 left-2 z-[500] px-2 py-1 rounded text-xs"
         style="background: var(--nav-accent); color: var(--nav-text);"
       >
-        Mode dev — données seed
+        Mode dev - données seed
       </div>
 
-      <!-- ── VUE DESKTOP : Onglets Métropole / Outre-mer ── -->
+      <!-- ── VUE DESKTOP : Métropole pleine largeur + DOM-TOM row en bas ── -->
       <div class="hidden lg:flex lg:flex-1 lg:flex-col lg:overflow-hidden">
-        <!-- Barre onglets desktop -->
+        <!-- Carte Métropole — pleine largeur -->
-        <div class="shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
+        <div class="flex flex-col flex-1 overflow-hidden">
-          <button
-            class="px-5 py-2 text-sm font-medium transition-colors"
-            :style="desktopMapView === 'metropole'
-              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
-              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
-            @click="desktopMapView = 'metropole'"
-          >Métropolitain</button>
-          <button
-            class="px-5 py-2 text-sm font-medium transition-colors"
-            :style="desktopMapView === 'outremer'
-              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
-              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
-            @click="desktopMapView = 'outremer'"
-          >Outre-mer</button>
-        </div>
-
-        <!-- Carte Métropole desktop -->
-        <div v-show="desktopMapView === 'metropole'" class="flex-1 flex flex-col overflow-hidden">
           <div class="relative flex-1" style="min-height: 200px;">
             <ClientOnly>
               <NavMap
@@ -71,16 +53,23 @@
                 @select-org="onSelectOrg"
               />
               <template #fallback>
-                <div class="w-full h-full flex items-center justify-center" style="background: var(--nav-bg-alt); color: var(--nav-text-muted);">Chargement de la carte…</div>
+                <div
+                  class="w-full h-full flex items-center justify-center"
+                  style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
+                >
+                  Chargement de la carte…
+                </div>
               </template>
             </ClientOnly>
           </div>
           <ChatbotPlaceholder @highlightOrgs="onHighlightOrgs" />
         </div>
 
-        <!-- Carte Outre-mer desktop -->
+        <!-- Bandeau DOM-TOM — row horizontale pleine largeur, hauteur fixe -->
-        <div v-show="desktopMapView === 'outremer'" class="flex-1 flex flex-col overflow-hidden">
+        <div
-          <div class="flex-1 overflow-y-auto">
+          class="shrink-0"
+          style="height: 140px; border-top: 1px solid var(--nav-bg-alt);"
+        >
           <ClientOnly>
             <OutremerMap
               :orgs="outremerOrgs"
@@ -88,12 +77,15 @@
               @select-org="onSelectOrg"
             />
             <template #fallback>
-                <div class="flex items-center justify-center h-full text-sm" style="color: var(--nav-text-muted);">Chargement…</div>
+              <div
+                class="flex items-center justify-center h-full text-sm"
+                style="color: var(--nav-text-muted);"
+              >
+                Chargement…
+              </div>
             </template>
           </ClientOnly>
         </div>
-          <ChatbotPlaceholder @highlightOrgs="onHighlightOrgs" />
-        </div>
       </div>
 
       <!-- ── VUE MOBILE : Onglets Métro/Outre-mer + carte pleine hauteur + sheet swipable ── -->
@@ -184,48 +176,9 @@
                   </svg>
                 </button>
               </label>
-
-              <!-- Filtres ÉCHELLE — chips style FONCTION -->
-              <div class="mt-2">
-                <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">ÉCHELLE</span>
-                <div class="flex flex-wrap gap-1">
-                  <span
-                    v-for="opt in ECHELLES"
-                    :key="opt"
-                    class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
-                    :style="echelle.includes(opt)
-                      ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
-                      : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
-                    @click="toggleEchelle(opt)"
-                  >{{ opt }}</span>
-                </div>
             </div>
 
-              <!-- Filtres FONCTION — chips flex-wrap -->
+            <!-- Liste fiches -->
-              <div class="mt-2">
-                <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">FONCTION</span>
-                <div class="flex flex-wrap gap-1">
-                  <span
-                    v-for="fn in FONCTIONS"
-                    :key="fn"
-                    class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
-                    :style="fonctions.includes(fn)
-                      ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
-                      : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
-                    @click="toggleFonction(fn)"
-                  >{{ fn }}</span>
-                </div>
-              </div>
-
-              <button
-                v-if="hasActiveFilters"
-                @click="resetFilters"
-                class="mt-2 text-xs"
-                style="color: var(--nav-text-muted); text-decoration: underline;"
-              >✕ Effacer les filtres</button>
-            </div>
-
-            <!-- Compteur + Liste fiches -->
             <div class="px-3 py-2">
               <div class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">
                 {{ filtered.length }} résultat{{ filtered.length > 1 ? 's' : '' }}
@@ -234,10 +187,7 @@
                 Chargement des fiches…
               </div>
               <div v-else-if="filtered.length === 0" class="text-center py-8">
-                <p class="text-sm mb-2" style="color: var(--nav-text-muted);">Aucun résultat pour ces filtres.</p>
+                <p class="text-sm" style="color: var(--nav-text-muted);">Aucun résultat pour ces filtres.</p>
-                <button @click="resetFilters" class="text-sm underline" style="color: var(--nav-primary-solid);">
-                  Effacer les filtres
-                </button>
               </div>
               <div class="space-y-2">
                 <div
@@ -249,25 +199,7 @@
                     : 'background: var(--nav-surface); border-left: 3px solid transparent;'"
                   @click="onSelectOrgMobile(org.Id)"
                 >
-                  <div class="flex items-start justify-between gap-2">
                   <span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ org.nom }}</span>
-                    <span
-                      v-if="org.echelle"
-                      class="shrink-0 px-2 py-0.5 rounded-full text-xs font-medium"
-                      style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-                    >{{ org.echelle }}</span>
-                  </div>
-                  <div v-if="fonctionsList(org).length" class="mt-1 flex flex-wrap gap-1">
-                    <span
-                      v-for="fn in fonctionsList(org)"
-                      :key="fn"
-                      class="px-1.5 py-0.5 rounded text-xs"
-                      style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-                    >{{ fn }}</span>
-                  </div>
-                  <div v-if="org.localisation_ville" class="mt-1 text-xs" style="color: var(--nav-text-muted);">
-                    {{ org.localisation_ville }}
-                  </div>
                 </div>
               </div>
             </div>
@@ -312,26 +244,6 @@
       @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>
 
@@ -358,23 +270,11 @@ const territoireMode = ref<string>(
   (route.query.mode as string) === 'outremer' ? 'outremer' : 'metropole'
 )
 
-const desktopMapView = ref<'metropole' | 'outremer'>('metropole')
 const selectedId = ref<number | null>(null)
 const chatbotOpen = ref(false)
 const ficheModalOpen = ref(false)
 const ficheModalId = ref<number | null>(null)
 const mobileMapView = ref<'metropole' | 'outremer'>('metropole')
-const 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
 const prevSelectedId = ref<number | null>(null)
 
@@ -382,28 +282,20 @@ function onHighlightOrgs(ids: (number | string)[]) {
   if (!ids.length) return
   const firstId = typeof ids[0] === 'string' ? parseInt(ids[0], 10) : ids[0]
   if (isNaN(firstId)) return
-
-  // Sauvegarde la sélection courante
   prevSelectedId.value = selectedId.value
   selectedId.value = firstId
-
   if (highlightTimer) clearTimeout(highlightTimer)
   highlightTimer = setTimeout(() => {
-    // Restaure la sélection précédente (ou null)
     selectedId.value = prevSelectedId.value
     prevSelectedId.value = null
     highlightTimer = null
   }, 5000)
 }
 
-// Ref locale barre de recherche mobile (synchronisée avec search via onSearch)
 const mobileSearch = ref<string>((route.query.q as string) ?? '')
-
-// Refs vers les instances NavMap (desktop + mobile séparées via deux <ClientOnly>)
 const navMapRef = ref<any>(null)
 const navMapMobileRef = ref<any>(null)
 
-// Sync URL <-> état filtres
 function syncUrl() {
   const q: Record<string, string> = {}
   if (search.value) q.q = search.value
@@ -414,7 +306,6 @@ function syncUrl() {
   router.replace({ query: Object.keys(q).length ? q : undefined })
 }
 
-// Sauvegarde les filtres courants dans sessionStorage pour le bouton retour des fiches
 function storeFiltersForBack() {
   if (typeof window === 'undefined') return
   const q: Record<string, string> = {}
@@ -435,14 +326,12 @@ function onTerritoire(v: string | null) { territoire.value = v; syncUrl(); store
 
 function onSelectOrg(id: number) {
   selectedId.value = selectedId.value === id ? null : id
-  // Desktop : ouvrir le modal fiche
   if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
     ficheModalId.value = id
     ficheModalOpen.value = true
   }
 }
 
-// Tap card mobile → ouvre la fiche détaillée
 function onSelectOrgMobile(id: number) {
   selectedId.value = id
   storeFiltersForBack()
@@ -465,7 +354,6 @@ function resetFilters() {
   router.replace({ query: undefined })
 }
 
-// Tagging compact mobile — toggle direct
 function toggleEchelle(opt: string) {
   if (echelle.value.includes(opt)) {
     onEchelle(echelle.value.filter(v => v !== opt))
@@ -482,7 +370,6 @@ function toggleFonction(fn: string) {
   }
 }
 
-// Sync recherche depuis app.vue top nav (via URL ?q=)
 watch(() => route.query.q, (v) => {
   search.value = (v as string) ?? ''
 })
@@ -493,7 +380,6 @@ const { data, pending, error } = await useFetch<{ list: Org[]; source: string }>
 const orgs = computed<Org[]>(() => data.value?.list ?? [])
 const dataSource = computed(() => data.value?.source ?? 'nocodb')
 
-// Fiche aléatoire — réagit au ?random=1
 watch(() => route.query.random, (v) => {
   if (v === '1' && orgs.value.length > 0) {
     const randomOrg = orgs.value[Math.floor(Math.random() * orgs.value.length)]
@@ -504,27 +390,20 @@ watch(() => route.query.random, (v) => {
 // ── Filtrage côté client ──────────────────────────────────────────────────
 const filtered = computed<Org[]>(() => {
   let result = orgs.value
-
   if (search.value.trim()) {
     const q = search.value.toLowerCase()
     result = result.filter(
-      (o) =>
+      (o) => o.nom?.toLowerCase().includes(q) || o.localisation_ville?.toLowerCase().includes(q)
-        o.nom?.toLowerCase().includes(q) ||
-        o.localisation_ville?.toLowerCase().includes(q)
     )
   }
-
   if (echelle.value.length) {
     result = result.filter((o) => o.echelle && echelle.value.includes(o.echelle))
   }
-
   if (fonctions.value.length) {
-    // Garde les orgs qui matchent au moins 1 fonction sélectionnée
     result = result.filter((o) => {
       const orgFns = (o.tags_fonction ?? '').split(',').map((f) => f.trim()).filter(Boolean)
       return fonctions.value.some((fn) => orgFns.includes(fn))
     })
-    // Tri par score pondéré : priorité 1 (1er cliqué) = poids le plus fort
     const n = fonctions.value.length
     const score = (o: Org) =>
       fonctions.value.reduce((s, fn, i) => {
@@ -533,11 +412,9 @@ const filtered = computed<Org[]>(() => {
       }, 0)
     result = [...result].sort((a, b) => score(b) - score(a))
   }
-
   if (territoire.value) {
     result = result.filter((o) => o.territoire === territoire.value)
   }
-
   return result
 })
 
@@ -566,7 +443,6 @@ const outremerCountByDom = computed<Record<string, number>>(() => {
   return counts
 })
 
-// ── Compteurs ─────────────────────────────────────────────────────────────
 const ECHELLES = ['National', 'Régional', 'Local'] as const
 const ECHELLE_LABELS: Record<string, string> = { National: 'Nat', Régional: 'Rég', Local: 'Loc' }
 const FONCTIONS = ['Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier', 'Comptabilité', 'Développement', 'Formation', "Gestion d'agence", 'Santé mentale'] as const
@@ -597,36 +473,9 @@ const territoireCount = computed<Record<string, number>>(() => {
   return counts
 })
 
-// ── Helpers ───────────────────────────────────────────────────────────────
 function fonctionsList(org: Org): string[] {
   return (org.tags_fonction ?? '').split(',').map((f) => f.trim()).filter(Boolean).slice(0, 3)
 }
 
-useHead({ title: 'AEP — Cartographie de l\'écologie politique architecturale' })
+useHead({ title: "AEP - 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>

pages/manifeste.vue

@@ -1,239 +0,0 @@
-<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>

pages/pensees-ecologiques.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="flex h-full overflow-hidden" style="background: var(--nav-bg);">
-
-    <!-- ZONE PRINCIPALE (pleine largeur, pas de sidebar) -->
-    <main class="flex-1 flex flex-col overflow-hidden relative">
-
-        <!-- Header onglet -->
-      <div class="shrink-0 px-5 py-3"
-        style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
-        <h1 class="font-bold text-base" style="color: var(--nav-text);">Pensees Ecologiques</h1>
-        <p class="text-xs mt-0.5" style="color: var(--nav-text-muted);">
-          {{ corpusCount }} auteurs ingeres dans le RAG - carte FRACAS Bonpote V2
-        </p>
-      </div>
-
-      <!-- Carte pensees (D3 force-directed) -->
-      <div class="flex-1 overflow-hidden relative">
-        <ClientOnly>
-          <CartePensees
-            :data="penseesData"
-            :active="true"
-            @select-auteur="onSelectAuteur"
-          />
-          <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>
-      </div>
-
-    </main>
-
-    <!-- Fiche auteur modal -->
-    <FicheAuteur
-      :open="ficheOpen"
-      :auteurId="ficheAuteurId"
-      :data="penseesData"
-      @close="ficheOpen = false"
-      @interroger-rag="onInterrogerRag"
-    />
-
-    <!-- Chatbot flottant -->
-    <ChatbotPensees :auteurContext="chatbotAuteur" />
-
-  </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[] }
-
-const ficheOpen = ref(false)
-const ficheAuteurId = ref<string | null>(null)
-const chatbotAuteur = ref<string | null>(null)
-const penseesData = ref<PenseesData | null>(null)
-
-const corpusCount = computed(() => penseesData.value?.auteurs.length ?? 0)
-
-onMounted(async () => {
-  try {
-    penseesData.value = await $fetch<PenseesData>('/data/auteurs-pensees.json')
-  } catch (e) {
-    console.error('Erreur chargement auteurs-pensees.json', e)
-  }
-})
-
-function onSelectAuteur(id: string) {
-  ficheAuteurId.value = id
-  ficheOpen.value = true
-  chatbotAuteur.value = null
-}
-
-function onInterrogerRag(auteurId: string) {
-  ficheOpen.value = false
-  const auteur = penseesData.value?.auteurs.find(a => a.id === auteurId)
-  chatbotAuteur.value = auteur?.nom ?? null
-}
-
-useHead({ title: 'AEP - Pensees Ecologiques - Carte FRACAS' })
-</script>

pages/trouver-du-taf.vue

@@ -6,50 +6,10 @@
       <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 et d'appels d'offres,
+          Annuaire critique des plateformes de mise en relation archi ↔ particulier.
-          pour les <strong>architectes indépendants</strong> — 70&nbsp;% de la profession et sa part la plus précaire économiquement.
+          Évaluées sur 5 axes éthiques — rémunération, transparence, pratiques pro, écologie, qualité du matching.
+          Cible : archi freelance indépendant en France.
         </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>
@@ -68,7 +28,7 @@
     </div>
 
     <!-- ── Filtres ─────────────────────────────────────────────────── -->
-    <div class="taff-filters-bar" :class="{ 'taff-filters-bar--collapsed': !filtersExpanded }">
+    <div class="taff-filters-bar">
       <div class="taff-filters-inner">
 
         <!-- Onglets B2C / AO publics -->
@@ -79,7 +39,7 @@
             :class="{ 'taff-tab--active': activeTab === 'b2c' }"
             @click="activeTab = 'b2c'; resetFilters()"
           >
-            Pour archi indépendants
+            Plateformes B2C
             <span class="taff-tab-count">{{ b2cCount }}</span>
           </button>
           <button
@@ -91,33 +51,8 @@
             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
@@ -181,8 +116,6 @@
             @click="resetFilters"
           >Effacer</button>
         </div>
-
-        </div><!-- /.taff-filters-collapsible -->
       </div>
     </div>
 
@@ -202,105 +135,6 @@
       </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>
@@ -314,7 +148,7 @@
       <Transition name="taff-backdrop">
         <div
           v-if="modalPlateforme"
-          class="fixed inset-0 z-[10000]"
+          class="fixed inset-0 z-[1500]"
           style="background: rgba(26,34,56,0.55);"
           @click="closeModal"
           aria-hidden="true"
@@ -323,8 +157,8 @@
       <Transition name="taff-modal">
         <div
           v-if="modalPlateforme"
-          class="fixed z-[10001] left-1/2 -translate-x-1/2 flex flex-col"
+          class="fixed z-[1501] top-1/2 left-1/2 -translate-x-1/2 -translate-y-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;"
+          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;"
           role="dialog"
           aria-modal="true"
           :aria-label="modalPlateforme.nom"
@@ -472,21 +306,6 @@ 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 = ''
@@ -570,52 +389,6 @@ 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' },
@@ -647,147 +420,16 @@ 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); text-align: center; }
+.taff-header { padding: 2.5rem 1.5rem 1.5rem; border-bottom: 1px solid var(--nav-bg-alt); }
-.taff-header-inner { max-width: 680px; margin: 0 auto; }
+.taff-header-inner { max-width: 680px; }
 .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: 0.625rem; }
+.taff-subtitle { font-size: 0.9375rem; color: var(--nav-text-muted); line-height: 1.6; margin-bottom: 1rem; }
-.taff-cible { font-size: 0.875rem; color: var(--nav-text-muted); line-height: 1.55; margin-bottom: 1rem; font-style: italic; }
+.taff-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; }
-.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; }
@@ -806,7 +448,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: flex; flex-direction: column; gap: 0.75rem; max-width: 720px; margin: 0 auto; }
+.taff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
 .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; }
@@ -815,202 +457,16 @@ const parsedDescription = computed(() => {
 
 /* Modal body helpers */
 .modal-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nav-text-muted); margin-bottom: 0.75rem; }
-.modal-axes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.modal-axes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; }
-.modal-axe { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 8px; flex: 1 1 130px; min-width: 130px; }
+.modal-axe { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 8px; }
 .modal-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
 .modal-meta-item { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.875rem; border-radius: 8px; background: var(--nav-bg-alt); }
 .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 modal */
+/* Transitions */
 .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: translateX(-50%) translateY(-12px); }
+.taff-modal-enter-from, .taff-modal-leave-to { opacity: 0; transform: translate(-50%, calc(-50% + 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>

public/data/auteurs-pensees.json

@@ -1,300 +0,0 @@
-{
-  "meta": {
-    "version": "1.0",
-    "source": "FRACAS Bonpote V2 oct 2024 + LightRAG corpus J+2",
-    "corpus_ingere": 27,
-    "updated": "2026-05-11"
-  },
-  "ecoles": [
-    {
-      "id": "ecosocialisme",
-      "label": "Écosocialisme",
-      "description": "Synthèse du marxisme et de l'écologie. Articule la critique du capitalisme et la crise écologique comme deux faces d'un même système.",
-      "color": "#c0392b",
-      "x_hint": 0.55,
-      "y_hint": 0.28
-    },
-    {
-      "id": "eco-anarchisme",
-      "label": "Éco-anarchisme",
-      "description": "Écologies libertaires et anti-industrielles. Contre l'État, le capitalisme et la domination de la nature — pour l'autogestion et le municipalisme libertaire.",
-      "color": "#2d6a4f",
-      "x_hint": 0.25,
-      "y_hint": 0.3
-    },
-    {
-      "id": "decroissance",
-      "label": "Décroissance",
-      "description": "Critique radicale de la croissance économique comme horizon. Pour une réduction volontaire de la production et de la consommation.",
-      "color": "#e67e22",
-      "x_hint": 0.38,
-      "y_hint": 0.42
-    },
-    {
-      "id": "ecofeminismes",
-      "label": "Écoféminismes",
-      "description": "Connexions entre la domination des femmes et la domination de la nature. Féminisme de la subsistance, critique du développement, commons.",
-      "color": "#e07a5f",
-      "x_hint": 0.48,
-      "y_hint": 0.68
-    },
-    {
-      "id": "technocritique",
-      "label": "Technocritique",
-      "description": "Critique radicale de la technique comme système autonome. Contre l'illusion de la technologie comme solution aux crises qu'elle engendre.",
-      "color": "#7f8c8d",
-      "x_hint": 0.2,
-      "y_hint": 0.48
-    },
-    {
-      "id": "ecologies-decoloniales",
-      "label": "Écologies décoloniales",
-      "description": "Articulation des luttes écologiques et des luttes anticoloniales. Critique de l'extractivisme comme continuation du colonialisme.",
-      "color": "#b5451b",
-      "x_hint": 0.3,
-      "y_hint": 0.72
-    },
-    {
-      "id": "ethiques-environnementales",
-      "label": "Éthiques environnementales",
-      "description": "Philosophies de la nature : deep ecology, écocentrisme, droits des non-humains. Valeur intrinsèque du vivant.",
-      "color": "#2c7873",
-      "x_hint": 0.72,
-      "y_hint": 0.72
-    },
-    {
-      "id": "pensees-vivant",
-      "label": "Pensées du vivant",
-      "description": "Anthropologie et ontologies de la nature. Dépasser le dualisme nature/culture. Sympoïèse, multi-espèces.",
-      "color": "#6b8e6e",
-      "x_hint": 0.62,
-      "y_hint": 0.58
-    }
-  ],
-  "auteurs": [
-    {
-      "id": "murray-bookchin",
-      "nom": "Murray Bookchin",
-      "dates": "1921-2006",
-      "ecoles": ["eco-anarchisme"],
-      "ecole_principale": "eco-anarchisme",
-      "livres_rag": [
-        { "slug": "bookchin-ecology-of-freedom", "titre": "L'Écologie de la liberté", "annee": 1982, "couches": ["fond", "structure"] },
-        { "slug": "bookchin-post-scarcity", "titre": "Post-Scarcity Anarchism", "annee": 1971, "couches": ["fond", "structure"] },
-        { "slug": "bookchin-urbanization", "titre": "The Rise of Urbanization and the Decline of Citizenship", "annee": 1987, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Municipalisme libertaire", "Écologie sociale", "Hiérarchie comme origine de la domination nature"],
-      "bio_courte": "Théoricien américain de l'écologie sociale et du municipalisme libertaire. A développé le concept d'\"écologie sociale\" articulant domination sociale et destruction de la nature."
-    },
-    {
-      "id": "pierre-kropotkine",
-      "nom": "Pierre Kropotkine",
-      "dates": "1842-1921",
-      "ecoles": ["eco-anarchisme"],
-      "ecole_principale": "eco-anarchisme",
-      "livres_rag": [
-        { "slug": "kropotkine-entraide", "titre": "L'Entraide, un facteur de l'évolution", "annee": 1902, "couches": ["fond", "structure"] },
-        { "slug": "kropotkine-pain", "titre": "La Conquête du pain", "annee": 1892, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Entraide vs sélection naturelle darwiniste", "Fédéralisme anarchiste", "Géographie critique"],
-      "bio_courte": "Géographe et révolutionnaire russe. Son oeuvre centrale démontre que l'entraide, et non la compétition, est le moteur principal de l'évolution."
-    },
-    {
-      "id": "michael-lowy",
-      "nom": "Michael Löwy",
-      "dates": "1938-",
-      "ecoles": ["ecosocialisme"],
-      "ecole_principale": "ecosocialisme",
-      "livres_rag": [
-        { "slug": "lowy-ecosocialisme", "titre": "Écosocialisme", "annee": 2011, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Romantisme révolutionnaire", "Anticapitalisme écologique", "Walter Benjamin et l'écologie"],
-      "bio_courte": "Sociologue franco-brésilien, figure centrale de l'écosocialisme. Articule marxisme hétérodoxe et critique de la modernité industrielle."
-    },
-    {
-      "id": "andreas-malm",
-      "nom": "Andreas Malm",
-      "dates": "1977-",
-      "ecoles": ["ecosocialisme"],
-      "ecole_principale": "ecosocialisme",
-      "livres_rag": [
-        { "slug": "malm-fossil-capital", "titre": "Fossil Capital", "annee": 2016, "couches": ["fond", "structure"] },
-        { "slug": "malm-comment-saboter", "titre": "Comment saboter un pipeline ?", "annee": 2020, "couches": ["fond", "structure"] },
-        { "slug": "malm-corona-climat", "titre": "Corona, Climate, Chronic Emergency", "annee": 2020, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Capitalisme fossile", "Sabotage stratégique", "Urgence climatique et action directe"],
-      "bio_courte": "Professeur d'écologie humaine à Lund. Théoricien du 'capital fossile' et défenseur d'une écologie de guerre pour répondre à l'urgence climatique."
-    },
-    {
-      "id": "kohei-saito",
-      "nom": "Kohei Saito",
-      "dates": "1987-",
-      "ecoles": ["ecosocialisme"],
-      "ecole_principale": "ecosocialisme",
-      "livres_rag": [
-        { "slug": "saito-marx-ecosocialisme", "titre": "Marx dans l'Anthropocène", "annee": 2020, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Marx et l'écologie", "Métabolisme social", "Décroissance communiste"],
-      "bio_courte": "Philosophe japonais, auteur d'une relecture écologiste des cahiers tardifs de Marx. Défend une 'décroissance communiste' comme horizon."
-    },
-    {
-      "id": "karl-marx",
-      "nom": "Karl Marx",
-      "dates": "1818-1883",
-      "ecoles": ["ecosocialisme", "eco-anarchisme"],
-      "ecole_principale": "ecosocialisme",
-      "livres_rag": [
-        { "slug": "marx-manuscrits-1844", "titre": "Manuscrits de 1844", "annee": 1844, "couches": ["fond", "structure"] },
-        { "slug": "marx-capital", "titre": "Le Capital", "annee": 1867, "couches": ["fond", "structure"] },
-        { "slug": "marx-grundrisse", "titre": "Grundrisse", "annee": 1857, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Métabolisme entre travail humain et nature", "Aliénation naturelle", "Accumulation primitive"],
-      "bio_courte": "Pensée-racine de l'écosocialisme. Les Grundrisse et le Capital contiennent une critique écologique du capitalisme souvent occultée."
-    },
-    {
-      "id": "serge-latouche",
-      "nom": "Serge Latouche",
-      "dates": "1940-",
-      "ecoles": ["decroissance"],
-      "ecole_principale": "decroissance",
-      "livres_rag": [
-        { "slug": "latouche-decroissance", "titre": "Le Pari de la décroissance", "annee": 2006, "couches": ["fond", "structure"] },
-        { "slug": "latouche-petit-traite", "titre": "Petit traité de la décroissance sereine", "annee": 2007, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Sereine décroissance", "Critique du développement", "Société frugale abondante"],
-      "bio_courte": "Économiste hétérodoxe franco-algérien, principal théoricien de la décroissance en France. Critique radical de l'économie du développement."
-    },
-    {
-      "id": "pablo-servigne",
-      "nom": "Pablo Servigne",
-      "dates": "1978-",
-      "ecoles": ["decroissance", "pensees-vivant"],
-      "ecole_principale": "decroissance",
-      "livres_rag": [
-        { "slug": "servigne-comment-tout", "titre": "Comment tout peut s'effondrer", "annee": 2015, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Collapsologie", "Entraide comme résilience", "Transition post-collapse"],
-      "bio_courte": "Ingénieur agronome belge, cofondateur de la collapsologie. Explore les conditions d'un effondrement de la civilisation industrielle et les voies de résilience."
-    },
-    {
-      "id": "donella-meadows",
-      "nom": "Dennis et Donella Meadows",
-      "dates": "1941-2001 / 1942-",
-      "ecoles": ["decroissance"],
-      "ecole_principale": "decroissance",
-      "livres_rag": [
-        { "slug": "meadows-limites-croissance", "titre": "Les Limites à la croissance", "annee": 1972, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Limites planétaires", "Modèles systémiques", "Overshoot"],
-      "bio_courte": "Le rapport Meadows (1972) est le premier modèle systémique démontrant l'impossibilité d'une croissance infinie dans un monde fini."
-    },
-    {
-      "id": "francoise-deaubonne",
-      "nom": "Françoise d'Eaubonne",
-      "dates": "1920-2005",
-      "ecoles": ["ecofeminismes"],
-      "ecole_principale": "ecofeminismes",
-      "livres_rag": [
-        { "slug": "eaubonne-feminisme-mort", "titre": "Le Féminisme ou la mort", "annee": 1974, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Écoféminisme (terme inventé)", "Patriarcat et destruction de la nature", "Révolution féministe écologique"],
-      "bio_courte": "Féministe française, inventrice du terme 'écoféminisme' en 1974. Lie patriarcat et destruction de l'environnement dans une même critique."
-    },
-    {
-      "id": "silvia-federici",
-      "nom": "Silvia Federici",
-      "dates": "1942-",
-      "ecoles": ["ecofeminismes"],
-      "ecole_principale": "ecofeminismes",
-      "livres_rag": [
-        { "slug": "federici-caliban", "titre": "Caliban et la sorcière", "annee": 2004, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Accumulation primitive et corps des femmes", "Chasse aux sorcières", "Travail reproductif"],
-      "bio_courte": "Philosophe italo-américaine, théoricienne du féminisme marxiste. Caliban et la sorcière relit l'accumulation primitive à travers la domination des femmes."
-    },
-    {
-      "id": "vandana-shiva",
-      "nom": "Vandana Shiva",
-      "dates": "1952-",
-      "ecoles": ["ecofeminismes", "ecologies-decoloniales"],
-      "ecole_principale": "ecofeminismes",
-      "livres_rag": [
-        { "slug": "shiva-monocultures-esprit", "titre": "Monocultures of the Mind", "annee": 1993, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Biopiraterie", "Souveraineté alimentaire", "Écoféminisme tiers-mondiste"],
-      "bio_courte": "Physicienne et militante indienne, figure mondiale de l'écoféminisme et de la souveraineté alimentaire. Cofondatrice de Navdanya."
-    },
-    {
-      "id": "malcolm-ferdinand",
-      "nom": "Malcom Ferdinand",
-      "dates": "1985-",
-      "ecoles": ["ecologies-decoloniales"],
-      "ecole_principale": "ecologies-decoloniales",
-      "livres_rag": [
-        { "slug": "ferdinand-ecologie-decoloniale", "titre": "Une écologie décoloniale", "annee": 2019, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Double fracture coloniale et écologique", "Habiter le monde", "Antillanité et écologie"],
-      "bio_courte": "Ingénieur et philosophe martiniquais. Son oeuvre articule colonialisme et destruction de l'environnement autour de la 'double fracture' historique."
-    },
-    {
-      "id": "jacques-ellul",
-      "nom": "Jacques Ellul",
-      "dates": "1912-1994",
-      "ecoles": ["technocritique"],
-      "ecole_principale": "technocritique",
-      "livres_rag": [
-        { "slug": "ellul-technique-enjeu", "titre": "La Technique ou l'Enjeu du siècle", "annee": 1954, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Technique comme système autonome", "Efficacité comme valeur unique", "Propagande et technosystème"],
-      "bio_courte": "Juriste, sociologue et théologien bordelais. Son oeuvre fondatrice analyse la Technique comme système autonome qui échappe à tout contrôle humain."
-    },
-    {
-      "id": "david-graeber",
-      "nom": "David Graeber",
-      "dates": "1961-2020",
-      "ecoles": ["eco-anarchisme"],
-      "ecole_principale": "eco-anarchisme",
-      "livres_rag": [
-        { "slug": "graeber-dette", "titre": "Dette : 5000 ans d'histoire", "annee": 2011, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Dette comme instrument de domination", "Anthropologie anarchiste", "Bullshit jobs"],
-      "bio_courte": "Anthropologue américain, figure du mouvement Occupy. Ses travaux anthropologiques déconstruisent les mythes fondateurs du capitalisme (troc, dette, marché)."
-    },
-    {
-      "id": "philippe-descola",
-      "nom": "Philippe Descola",
-      "dates": "1949-",
-      "ecoles": ["pensees-vivant"],
-      "ecole_principale": "pensees-vivant",
-      "livres_rag": [
-        { "slug": "descola-par-dela-nature", "titre": "Par-delà nature et culture", "annee": 2005, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Dualisme nature/culture comme exception occidentale", "4 ontologies (animisme, totémisme, analogisme, naturalisme)", "Cosmopolitiques"],
-      "bio_courte": "Anthropologue et ethnologue français, successeur de Lévi-Strauss au Collège de France. Démontre que le dualisme nature/culture est une anomalie culturelle."
-    },
-    {
-      "id": "rachel-carson",
-      "nom": "Rachel Carson",
-      "dates": "1907-1964",
-      "ecoles": ["ethiques-environnementales"],
-      "ecole_principale": "ethiques-environnementales",
-      "livres_rag": [
-        { "slug": "carson-printemps-silencieux", "titre": "Printemps silencieux", "annee": 1962, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Impact des pesticides sur les écosystèmes", "Naissance du mouvement environnementaliste moderne", "Responsabilité scientifique"],
-      "bio_courte": "Marine biologist and author américaine. Son livre Printemps silencieux (1962) a lancé le mouvement environnementaliste moderne en dénonçant les pesticides."
-    },
-    {
-      "id": "arne-naess",
-      "nom": "Arne Næss",
-      "dates": "1912-2009",
-      "ecoles": ["ethiques-environnementales"],
-      "ecole_principale": "ethiques-environnementales",
-      "livres_rag": [
-        { "slug": "naess-ecologie-profonde", "titre": "Écologie, communauté et style de vie", "annee": 1989, "couches": ["fond", "structure"] }
-      ],
-      "theses_cles": ["Deep ecology vs écologie superficielle", "Égalité biosphérique", "Réalisation de Soi élargie"],
-      "bio_courte": "Philosophe norvégien, fondateur de la 'deep ecology'. Défend une valeur intrinsèque de tous les êtres vivants, indépendamment de leur utilité pour les humains."
-    }
-  ]
-}

server/api/chatbot-pensees.post.ts

@@ -1,85 +0,0 @@
-import type { H3Event } from 'h3'
-import { checkRateLimitJson } from '~/server/utils/rateLimitJson'
-
-interface ChatbotPenseesRequest {
-  query: string
-  mode?: 'hybrid' | 'local' | 'global' | 'naive' | 'mix'
-  filter_couche?: 'fond' | 'forme' | 'structure' | null
-  filter_ecole?: string | null
-  history?: Array<{ role: 'user' | 'assistant'; content: string }>
-}
-
-interface LightRAGQueryResponse {
-  response: string
-}
-
-const SYSTEM_PREFACE = `Tu es un agent du RAG Pensées Écologiques, infrastructure militante du collectif trans-former.fr.
-Tu réponds en t'appuyant STRICTEMENT sur le corpus ingéré (auteurs FRACAS Bonpote : écosocialisme, éco-anarchisme, écoféminismes, écologies décoloniales, technocritique, pensées du vivant, décroissance...).
-
-Règles :
-- Cite les sources (auteur, livre) à chaque assertion importante.
-- Si la question dépasse le corpus, dis-le clairement. Pas d'hallucination.
-- Ton politique direct, pas de neutralité fade.
-- Réponse en français, dense, sans délayage.
-- Distingue les positions selon les écoles quand elles divergent.`
-
-export default defineEventHandler(async (event: H3Event) => {
-  const config = useRuntimeConfig(event)
-
-  // 1. Rate limit (20 req/jour/IP, IP hashée RGPD)
-  const ip =
-    getHeader(event, 'x-forwarded-for')?.split(',')[0].trim() ||
-    event.node.req.socket?.remoteAddress ||
-    '0.0.0.0'
-
-  const allowed = checkRateLimitJson(ip, 'chatbot-pensees', 20)
-  if (!allowed) {
-    throw createError({ statusCode: 429, message: 'Limite de 20 questions par jour atteinte.' })
-  }
-
-  // 2. Body parse + validation
-  const body = await readBody<ChatbotPenseesRequest>(event)
-  if (!body?.query || body.query.trim().length < 3 || body.query.trim().length > 500) {
-    throw createError({ statusCode: 400, message: 'Query invalide (3-500 caractères).' })
-  }
-
-  const query = body.query.trim()
-  const mode = body.mode || 'hybrid'
-  const ragUrl = (config.ragPeUrl as string) || 'http://localhost:9621'
-
-  // 3. Health guard — LightRAG down = erreur claire, pas de fallback hallucinatoire
-  try {
-    await $fetch(`${ragUrl}/health`, { timeout: 5000 })
-  } catch {
-    throw createError({
-      statusCode: 503,
-      message: 'RAG indisponible pour l\'instant — réessaie dans quelques minutes.',
-    })
-  }
-
-  // 4. Call LightRAG VPS — préface système injectée dans la query
-  const ragQuery = `${SYSTEM_PREFACE}\n\nQuestion : ${query}`
-
-  let ragResponse: LightRAGQueryResponse
-  try {
-    ragResponse = await $fetch<LightRAGQueryResponse>(`${ragUrl}/query`, {
-      method: 'POST',
-      body: { query: ragQuery, mode },
-      timeout: 90000,
-    })
-  } catch (e: any) {
-    const status = e?.response?.status
-    if (status === 429) {
-      throw createError({ statusCode: 429, message: 'RAG saturé — réessaie dans quelques instants.' })
-    }
-    throw createError({ statusCode: 504, message: 'RAG en cours de processing — réessaie dans quelques secondes.' })
-  }
-
-  // 5. Retour formaté
-  return {
-    response: ragResponse.response ?? '',
-    mode,
-    filter: { couche: body.filter_couche ?? null, ecole: body.filter_ecole ?? null },
-    timestamp: new Date().toISOString(),
-  }
-})

server/api/chatbot-reseaux.post.ts

@@ -1,125 +0,0 @@
-/**
- * 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: [] }
-  }
-})

server/api/chatbot-taff.post.ts

@@ -1,136 +0,0 @@
-/**
- * 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: [] }
-  }
-})

server/api/codev/auth.post.ts

@@ -1,46 +0,0 @@
-import { z } from 'zod'
-
-const AuthSchema = z.object({
-  password: z.string().min(1).max(100),
-})
-
-export default defineEventHandler(async (event) => {
-  const body = await readBody(event)
-  const parsed = AuthSchema.safeParse(body)
-
-  if (!parsed.success) {
-    throw createError({ statusCode: 422, statusMessage: 'Mot de passe invalide' })
-  }
-
-  const config = useRuntimeConfig()
-  const expected = config.codevPassword || 'merci'
-
-  const isAdmin = parsed.data.password.trim().toLowerCase() === (config.codevAdminPassword || 'admin2026').trim().toLowerCase()
-  const isUser = parsed.data.password.trim().toLowerCase() === expected.trim().toLowerCase()
-
-  if (!isAdmin && !isUser) {
-    throw createError({ statusCode: 401, statusMessage: 'Mauvais mot de passe' })
-  }
-
-  // Cookie session (user + admin)
-  setCookie(event, 'codev_session', 'ok', {
-    httpOnly: true,
-    sameSite: 'lax',
-    secure: process.env.NODE_ENV === 'production',
-    maxAge: 60 * 60 * 24, // 24h
-    path: '/',
-  })
-
-  // Cookie admin si mot de passe admin
-  if (isAdmin) {
-    setCookie(event, 'codev_admin', 'ok', {
-      httpOnly: true,
-      sameSite: 'lax',
-      secure: process.env.NODE_ENV === 'production',
-      maxAge: 60 * 60 * 24, // 24h
-      path: '/',
-    })
-  }
-
-  return { status: 200, ok: true, admin: isAdmin }
-})

server/api/codev/fiches.get.ts

@@ -1,31 +0,0 @@
-import type { CodevFiche } from '~/types/codev'
-
-export default defineEventHandler(async (event): Promise<{ list: CodevFiche[] }> => {
-  const config = useRuntimeConfig()
-  const tableId = config.codevTableId
-
-  if (!tableId) {
-    throw createError({ statusCode: 500, message: 'codevTableId non configuré' })
-  }
-
-  const url = `${config.nocodbUrl}/api/v2/tables/${tableId}/records?sort=created_at&limit=200`
-
-  const data: any = await $fetch(url, {
-    headers: { 'xc-token': config.nocodbToken },
-  }).catch(() => ({ list: [] }))
-
-  // Mapper chaque record NocoDB vers CodevFiche
-  const list: CodevFiche[] = (data?.list ?? []).map((r: any) => ({
-    id: r.Id ?? r.id,
-    nom: r.nom || '',
-    besoin: r.besoin || '',
-    offre: r.offre || '',
-    hashtags: (r.hashtags || '')
-      .split(',')
-      .map((h: string) => h.trim().toLowerCase().replace(/^#/, ''))
-      .filter(Boolean),
-    created_at: r.created_at || r.CreatedAt || new Date().toISOString(),
-  }))
-
-  return { list }
-})

server/api/codev/fiches.post.ts

@@ -1,63 +0,0 @@
-import { z } from 'zod'
-
-const FicheSchema = z.object({
-  nom: z.string().min(2).max(50).trim(),
-  besoin: z.string().min(5).max(300).trim(),
-  offre: z.string().min(5).max(300).trim(),
-  hashtags: z.array(z.string().max(30)).max(3).default([]),
-})
-
-export default defineEventHandler(async (event) => {
-  const body = await readBody(event)
-  const parsed = FicheSchema.safeParse(body)
-
-  if (!parsed.success) {
-    throw createError({
-      statusCode: 422,
-      statusMessage: 'Validation échouée',
-      data: parsed.error.flatten().fieldErrors,
-    })
-  }
-
-  const config = useRuntimeConfig()
-  const tableId = config.codevTableId
-  const baseId = config.codevBaseId || 'pipilvsi7dibo80'
-
-  const payload = {
-    nom: parsed.data.nom,
-    besoin: parsed.data.besoin,
-    offre: parsed.data.offre,
-    hashtags: parsed.data.hashtags
-      .map((h) => h.trim().toLowerCase().replace(/^#/, ''))
-      .filter(Boolean)
-      .slice(0, 3)
-      .join(','),
-    created_at: new Date().toISOString(),
-  }
-
-  // NocoDB v1 endpoint pour INSERT (cf. submit/index.post.ts pour le pattern)
-  const insertUrl = `${config.nocodbUrl}/api/v1/db/data/noco/${baseId}/${tableId}`
-
-  let inserted: any
-  try {
-    inserted = await $fetch(insertUrl, {
-      method: 'POST',
-      headers: {
-        'xc-token': config.nocodbToken,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(payload),
-    })
-  } catch (e: any) {
-    console.error('[codev/fiches.post] NocoDB insert error:', e?.message ?? e)
-    throw createError({
-      statusCode: 502,
-      statusMessage: 'Erreur serveur, réessaie',
-    })
-  }
-
-  return {
-    status: 201,
-    id: inserted?.Id ?? inserted?.id ?? null,
-  }
-})

server/api/codev/fiches/[id].delete.ts

@@ -1,25 +0,0 @@
-export default defineEventHandler(async (event) => {
-  // Vérif cookie admin
-  const adminCookie = getCookie(event, 'codev_admin')
-  if (adminCookie !== 'ok') {
-    throw createError({ statusCode: 403, statusMessage: 'Accès refusé' })
-  }
-
-  const config = useRuntimeConfig()
-  const tableId = config.codevTableId
-  const id = getRouterParam(event, 'id')
-
-  if (!tableId || !id) {
-    throw createError({ statusCode: 400, message: 'Parametre manquant' })
-  }
-
-  await $fetch(`${config.nocodbUrl}/api/v2/tables/${tableId}/records`, {
-    method: 'DELETE',
-    headers: { 'xc-token': config.nocodbToken, 'Content-Type': 'application/json' },
-    body: JSON.stringify({ Id: Number(id) }),
-  }).catch(() => {
-    throw createError({ statusCode: 502, statusMessage: 'Erreur suppression' })
-  })
-
-  return { status: 200, ok: true }
-})

server/api/codev/fiches/[id].get.ts

@@ -1,34 +0,0 @@
-import type { CodevFiche } from '~/types/codev'
-
-export default defineEventHandler(async (event): Promise<CodevFiche> => {
-  const config = useRuntimeConfig()
-  const tableId = config.codevTableId
-  const baseId = config.codevBaseId || 'pipilvsi7dibo80'
-  const id = getRouterParam(event, 'id')
-
-  if (!tableId || !id) {
-    throw createError({ statusCode: 400, message: 'Parametre manquant' })
-  }
-
-  const url = `${config.nocodbUrl}/api/v1/db/data/noco/${baseId}/${tableId}/${id}`
-
-  const r: any = await $fetch(url, {
-    headers: { 'xc-token': config.nocodbToken },
-  }).catch(() => null)
-
-  if (!r) {
-    throw createError({ statusCode: 404, message: 'Fiche introuvable' })
-  }
-
-  return {
-    id: r.Id ?? r.id,
-    nom: r.nom || '',
-    besoin: r.besoin || '',
-    offre: r.offre || '',
-    hashtags: (r.hashtags || '')
-      .split(',')
-      .map((h: string) => h.trim().toLowerCase().replace(/^#/, ''))
-      .filter(Boolean),
-    created_at: r.created_at || r.CreatedAt || '',
-  }
-})

server/api/codev/fiches/[id].patch.ts

@@ -1,59 +0,0 @@
-import { z } from 'zod'
-
-const PatchSchema = z.object({
-  nom: z.string().min(2).max(50).trim(),
-  besoin: z.string().min(5).max(300).trim(),
-  offre: z.string().min(5).max(300).trim(),
-  hashtags: z.array(z.string().max(30)).max(3).default([]),
-})
-
-export default defineEventHandler(async (event) => {
-  const config = useRuntimeConfig()
-  const tableId = config.codevTableId
-  const baseId = config.codevBaseId || 'pipilvsi7dibo80'
-  const id = getRouterParam(event, 'id')
-  const body = await readBody(event)
-
-  if (!tableId || !id) {
-    throw createError({ statusCode: 400, message: 'Parametre manquant' })
-  }
-
-  const parsed = PatchSchema.safeParse(body)
-  if (!parsed.success) {
-    throw createError({
-      statusCode: 422,
-      statusMessage: 'Validation echouee',
-      data: parsed.error.flatten().fieldErrors,
-    })
-  }
-
-  const payload = {
-    nom: parsed.data.nom,
-    besoin: parsed.data.besoin,
-    offre: parsed.data.offre,
-    hashtags: parsed.data.hashtags
-      .map((h) => h.trim().toLowerCase().replace(/^#/, ''))
-      .filter(Boolean)
-      .slice(0, 3)
-      .join(','),
-  }
-
-  // NocoDB v1 PATCH par Id
-  const url = `${config.nocodbUrl}/api/v1/db/data/noco/${baseId}/${tableId}/${id}`
-
-  try {
-    await $fetch(url, {
-      method: 'PATCH',
-      headers: {
-        'xc-token': config.nocodbToken,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(payload),
-    })
-  } catch (e: any) {
-    console.error('[codev/fiches.patch] NocoDB patch error:', e?.message ?? e)
-    throw createError({ statusCode: 502, statusMessage: 'Erreur serveur' })
-  }
-
-  return { status: 200, ok: true }
-})

server/api/codev/me.get.ts

@@ -1,5 +0,0 @@
-export default defineEventHandler((event) => {
-  const admin = getCookie(event, 'codev_admin') === 'ok'
-  const session = getCookie(event, 'codev_session') === 'ok'
-  return { admin, session }
-})

server/api/plateformes-taff.get.ts

@@ -1,9 +0,0 @@
-/**
- * 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)

server/middleware/codev-auth.ts

@@ -1,21 +0,0 @@
-// Middleware server Nuxt — protection des routes /codev/fiche et /codev/carto
-// Laisse passer /codev (lock screen), /codev/demo et toutes les routes /api/*
-
-export default defineEventHandler((event) => {
-  const url = getRequestURL(event)
-  const path = url.pathname
-
-  // Seulement les routes sous /codev/
-  if (!path.startsWith('/codev/')) return
-
-  // Routes publiques : /codev/demo et /codev/qr (et sous-routes éventuelles)
-  if (path === '/codev/demo' || path.startsWith('/codev/demo/')) return
-  if (path === '/codev/qr' || path.startsWith('/codev/qr/')) return
-
-  // Vérification cookie
-  const session = getCookie(event, 'codev_session')
-  if (session === 'ok') return
-
-  // Non authentifié -> redirect vers /codev (lock screen)
-  return sendRedirect(event, '/codev', 302)
-})

types/codev.ts

@@ -1,18 +0,0 @@
-export interface CodevFiche {
-  id: number
-  nom: string
-  besoin: string
-  offre: string
-  hashtags: string[]   // parsé depuis CSV NocoDB
-  created_at: string   // ISO
-}
-
-export interface CodevMatch {
-  fromId: number
-  toId: number
-  score: number          // 0-1
-  mode: 'solution' | 'alliance' | 'surprise'
-  // solution : fromId.besoin matche toId.offre (orienté)
-  // alliance : symétrique sur besoin
-  // surprise : symétrique sur offre
-}

utils/codev/matching.ts

@@ -1,106 +0,0 @@
-import type { CodevFiche, CodevMatch } from '~/types/codev'
-
-const STOP_WORDS_FR = new Set([
-  'le', 'la', 'les', 'un', 'une', 'des', 'de', 'du', 'au', 'aux',
-  'et', 'ou', 'mais', 'donc', 'car', 'ni', 'or',
-  'a', 'en', 'pour', 'par', 'sur', 'avec', 'sans', 'dans', 'sous',
-  'je', 'tu', 'il', 'elle', 'on', 'nous', 'vous', 'ils', 'elles',
-  'mon', 'ma', 'mes', 'ton', 'ta', 'tes', 'son', 'sa', 'ses',
-  'notre', 'nos', 'votre', 'vos', 'leur', 'leurs',
-  'ce', 'cet', 'cette', 'ces', 'qui', 'que', 'quoi', 'dont',
-  'est', 'sont', 'etre', 'ai', 'as', 'avoir',
-  'pas', 'plus', 'moins', 'tres', 'aussi', 'bien', 'tout', 'tous',
-  'me', 'te', 'se', 'lui', 'leur', 'y',
-])
-
-function tokenize(text: string): Set<string> {
-  if (!text) return new Set()
-  const tokens = text
-    .toLowerCase()
-    .replace(/[.,;:!?()'"\-/]/g, ' ')
-    .split(/\s+/)
-    .filter((t) => t.length >= 3 && !STOP_WORDS_FR.has(t))
-  return new Set(tokens)
-}
-
-function jaccard(a: Set<string>, b: Set<string>): number {
-  if (a.size === 0 || b.size === 0) return 0
-  let inter = 0
-  for (const x of a) if (b.has(x)) inter++
-  const union = a.size + b.size - inter
-  return union === 0 ? 0 : inter / union
-}
-
-function score(textA: string, hashtagsA: string[], textB: string, hashtagsB: string[]): number {
-  const tagsA = new Set(hashtagsA.map((h) => h.toLowerCase()))
-  const tagsB = new Set(hashtagsB.map((h) => h.toLowerCase()))
-
-  if (tagsA.size > 0 && tagsB.size > 0) {
-    return jaccard(tagsA, tagsB)
-  }
-  return jaccard(tokenize(textA), tokenize(textB))
-}
-
-// scoreDirect tokenise TOUJOURS les textes, ignore les hashtags
-// Utilise pour matchSolution : besoin vs offre doivent etre compares par leur contenu reel
-function scoreDirect(textA: string, textB: string): number {
-  return jaccard(tokenize(textA), tokenize(textB))
-}
-
-export function matchSolution(fiches: CodevFiche[], threshold = 0.18): CodevMatch[] {
-  const matches: CodevMatch[] = []
-  for (const a of fiches) {
-    for (const b of fiches) {
-      if (a.id === b.id) continue
-      // Solution : on compare le TEXTE besoin de A avec le TEXTE offre de B
-      // On ignore les hashtags pour differencier besoin et offre
-      const s = scoreDirect(a.besoin, b.offre)
-      if (s >= threshold) {
-        matches.push({ fromId: a.id, toId: b.id, score: s, mode: 'solution' })
-      }
-    }
-  }
-  return matches
-}
-
-export function matchAlliance(fiches: CodevFiche[], threshold = 0.25): CodevMatch[] {
-  const matches: CodevMatch[] = []
-  for (let i = 0; i < fiches.length; i++) {
-    for (let j = i + 1; j < fiches.length; j++) {
-      const a = fiches[i], b = fiches[j]
-      // Alliance : besoins similaires — on compare hashtags si presents, sinon textes
-      const s = score(a.besoin, a.hashtags, b.besoin, b.hashtags)
-      if (s >= threshold) {
-        matches.push({ fromId: a.id, toId: b.id, score: s, mode: 'alliance' })
-      }
-    }
-  }
-  return matches
-}
-
-export function matchSurprise(fiches: CodevFiche[], threshold = 0.25): CodevMatch[] {
-  const matches: CodevMatch[] = []
-  for (let i = 0; i < fiches.length; i++) {
-    for (let j = i + 1; j < fiches.length; j++) {
-      const a = fiches[i], b = fiches[j]
-      // Surprise : offres similaires
-      const s = score(a.offre, a.hashtags, b.offre, b.hashtags)
-      if (s >= threshold) {
-        matches.push({ fromId: a.id, toId: b.id, score: s, mode: 'surprise' })
-      }
-    }
-  }
-  return matches
-}
-
-export function computeMatches(
-  fiches: CodevFiche[],
-  mode: 'solution' | 'alliance' | 'surprise',
-  threshold?: number,
-): CodevMatch[] {
-  switch (mode) {
-    case 'solution': return matchSolution(fiches, threshold)
-    case 'alliance': return matchAlliance(fiches, threshold)
-    case 'surprise': return matchSurprise(fiches, threshold)
-  }
-}