feat(mobile+UX): refonte hamburger, pop-ups Mission, Manifeste, fixes mobile

Hamburger:
- Ajout Jobs, Manifeste, Soutenir
- Ré-ordonnancement (cartes/RAG/Codev en haut, ressources en bas)

Pop-ups Mission:
- MissionPopup générique (slot, props title/ctaLabel/storageKey)
- Auto-show 1ère visite Carte 1 (Entraide) et Carte 2 (Réseaux AEP)
- Bouton (i) flottant pour rouvrir

Pages:
- /manifeste : nouvelle page (texte version page-carto-V1)
- /a-propos : section 1 retirée (devient pop-up Carte 1) + scroll latéral fixé
- /agences : 3e onglet "Graphe" sur mobile + labels structures sur GraphView
- /trouver-du-taf : intro pédagogique repliable (onglets / tags / 5 axes),
  filtres mobile repliables, "Plateformes B2C" → "Pour archi indépendants"

Mobile UX:
- FAB coeur jaune Soutenir retiré (BandeauBas) — accessible via hamburger
- FicheModal/V2 : décalage top:76px sur mobile pour ne plus mordre header
- Logo header : "Architecture d'Écologie / Politique" en clair (2 lignes)

Cause racine résolue:
- /api/chatbot-reseaux n'avait jamais été déployé → 404 en prod avant ce build

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app.vue

@@ -7,21 +7,16 @@
       style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);"
     >
       <!-- Logo -->
-      <a href="/" class="flex items-center gap-2 hover:opacity-90 transition-opacity shrink-0 group relative" title="Architecture d'Écologie Politique">
+      <a href="/" class="logo-link flex items-center gap-2 hover:opacity-90 transition-opacity shrink-0" title="Architecture d'Écologie Politique">
         <div
-          class="h-7 px-2 rounded-lg flex items-center justify-center shrink-0"
+          class="h-8 px-2 rounded-lg flex items-center justify-center shrink-0"
           style="background: var(--nav-primary-solid);"
         >
           <span class="font-bold text-xs tracking-tight" style="color: var(--nav-text-on-primary);">AEP</span>
         </div>
-        <div class="flex flex-col">
-          <span class="font-bold text-base tracking-tight leading-tight" style="color: var(--nav-text);">AEP</span>
-          <span class="text-xs leading-tight hidden lg:inline" style="color: var(--nav-text-muted);">Architecture d'Écologie Politique</span>
-        </div>
-        <!-- Tooltip sm (quand le sous-titre lg est caché) -->
-        <div class="absolute left-0 top-full mt-2 px-2 py-1 rounded text-xs whitespace-nowrap pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity lg:hidden z-50"
-          style="background: var(--nav-primary-solid); color: var(--nav-text-on-primary);">
-          Architecture d'Écologie Politique
+        <div class="logo-text flex flex-col leading-tight">
+          <span class="logo-line-1 font-bold tracking-tight" style="color: var(--nav-text);">Architecture</span>
+          <span class="logo-line-2 font-bold tracking-tight" style="color: var(--nav-text);">d'Écologie Politique</span>
         </div>
       </a>
 
@@ -178,11 +173,14 @@
             @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="color: var(--nav-text);">Réseaux AEP</NuxtLink>
+            <NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/agences' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Réseaux AEP</NuxtLink>
+            <NuxtLink to="/trouver-du-taf" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/trouver-du-taf' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Jobs</NuxtLink>
             <NuxtLink to="/rag" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">RAG</NuxtLink>
             <NuxtLink to="/codev" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path.startsWith('/codev') ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Codev</NuxtLink>
             <div style="height: 1px; background: var(--nav-bg-alt); margin: 4px 0;"></div>
+            <NuxtLink to="/manifeste" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/manifeste' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text-muted);'">Manifeste</NuxtLink>
             <NuxtLink to="/a-propos" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">À propos</NuxtLink>
+            <a href="https://liberapay.com/trans-former.fr/donate" target="_blank" rel="noopener noreferrer" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">Soutenir →</a>
             <NuxtLink to="/signaler" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">Signaler</NuxtLink>
           </div>
         </div>
@@ -262,6 +260,21 @@ function goRandom() {
 </script>
 
 <style>
+/* ── Logo header (texte 2 lignes) ─────────────────────────────────────── */
+.logo-text {
+  line-height: 1.05;
+}
+.logo-line-1, .logo-line-2 {
+  font-size: 0.7rem;
+  letter-spacing: -0.01em;
+}
+@media (min-width: 640px) {
+  .logo-line-1, .logo-line-2 { font-size: 0.78rem; }
+}
+@media (min-width: 1024px) {
+  .logo-line-1, .logo-line-2 { font-size: 0.85rem; }
+}
+
 /* ── Onglets header desktop ───────────────────────────────────────────── */
 .nav-tab {
   position: relative;

components/BandeauBas.vue

@@ -139,72 +139,7 @@
 
   </footer>
 
-  <!-- ═══════════════════════════════════════ FAB MOBILE (< 1024px) ════════ -->
-  <div v-else>
-    <!-- FAB soutenir (à gauche du chatbot) -->
-    <button
-      class="fab-soutenir"
-      type="button"
-      @click="fabSheetOpen = true"
-      aria-label="Soutenir le projet AEP"
-    >
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
-      </svg>
-    </button>
-
-    <!-- Bottom sheet FAB -->
-    <Teleport to="body">
-      <Transition name="backdrop">
-        <div
-          v-if="fabSheetOpen"
-          class="fixed inset-0 z-[1020]"
-          style="background: rgba(26,34,56,0.5);"
-          @click="fabSheetOpen = false"
-          aria-hidden="true"
-        />
-      </Transition>
-      <Transition name="sheet">
-        <div
-          v-if="fabSheetOpen"
-          class="fab-sheet"
-          role="dialog"
-          aria-modal="true"
-          aria-label="Soutenir AEP"
-        >
-          <!-- Poignée -->
-          <div class="flex justify-center pt-3 pb-1">
-            <div class="rounded-full" style="width: 36px; height: 4px; background: var(--nav-bg-alt);" />
-          </div>
-          <div class="px-5 pb-6">
-            <h2 class="text-base font-bold mb-2" style="color: var(--nav-text);">Soutenir AEP</h2>
-            <template v-if="stats">
-              <p class="text-sm mb-1" style="color: var(--nav-text-muted);">
-                Coût IA ce mois : <strong>{{ stats.cout_mois_eur.toFixed(2) }} €</strong>
-                · Tokens : {{ stats.tokens_mois.toLocaleString('fr-FR') }}
-              </p>
-              <p class="text-sm mb-3" style="color: var(--nav-text-muted);">
-                {{ stats.fiches_semaine }} fiche{{ stats.fiches_semaine !== 1 ? 's' : '' }} ajoutée{{ stats.fiches_semaine !== 1 ? 's' : '' }} cette semaine
-              </p>
-            </template>
-            <p class="text-sm mb-4" style="color: var(--nav-text-muted); line-height: 1.5;">
-              1 € = 30 fiches mises en ligne. AEP est libre, sans pub, financé par les dons.
-            </p>
-            <a
-              href="https://liberapay.com/trans-former.fr/donate"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="block w-full text-center py-3 rounded-xl font-semibold text-sm"
-              style="background: var(--nav-primary); color: var(--nav-text-on-primary); text-decoration: none;"
-              @click="fabSheetOpen = false"
-            >
-              Soutenir sur Liberapay →
-            </a>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-  </div>
+  <!-- Mobile (< 1024px) : pas de FAB — Soutenir est dans le menu hamburger -->
 </template>
 
 <script setup lang="ts">
@@ -221,7 +156,6 @@ interface Stats {
 const stats = ref<Stats | null>(null)
 const loading = ref(true)
 const modalOpen = ref(false)
-const fabSheetOpen = ref(false)
 const tooltipVisible = ref(false)
 
 // Desktop — replié par défaut, déploie au hover, replie immédiatement à la sortie
@@ -460,39 +394,6 @@ const jaugePct = computed(() => {
   border-top-color: var(--nav-primary-solid, #1a2238);
 }
 
-/* ── FAB mobile soutenir ─────────────────────────────────────────────────── */
-.fab-soutenir {
-  position: fixed;
-  bottom: 68px; /* au-dessus du FAB chatbot à 24px du bas + 48px de hauteur */
-  left: 16px;
-  z-index: 1000;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  border: none;
-  background: var(--nav-accent);
-  color: var(--nav-text);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 16px rgba(26,34,56,0.25);
-  cursor: pointer;
-  transition: opacity 0.15s, transform 0.1s;
-}
-
-.fab-soutenir:hover { opacity: 0.88; transform: translateY(-1px); }
-
-/* ── Bottom sheet FAB ────────────────────────────────────────────────────── */
-.fab-sheet {
-  position: fixed;
-  inset-x: 0;
-  bottom: 0;
-  z-index: 1021;
-  background: var(--nav-surface);
-  border-radius: 16px 16px 0 0;
-  box-shadow: 0 -4px 32px rgba(26,34,56,0.18);
-}
-
 /* ── Modal ───────────────────────────────────────────────────────────────── */
 .modal-backdrop {
   position: fixed;

components/FicheModal.vue

@@ -15,10 +15,9 @@
     <Transition name="modal">
       <div
         v-if="modelValue && orgId != null"
-        class="fixed z-[1501] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
+        class="fiche-modal fixed z-[1501] left-1/2 -translate-x-1/2 flex flex-col"
         style="
           width: min(768px, 92vw);
-          max-height: 90vh;
           background: var(--nav-bg);
           border-radius: 16px;
           box-shadow: 0 16px 64px rgba(26,34,56,0.28);
@@ -144,6 +143,21 @@ function onCommentSubmitted() {
 </script>
 
 <style scoped>
+/* Modal positionnement : centré desktop, descendu sous le header sur mobile */
+.fiche-modal {
+  top: 50%;
+  transform: translate(-50%, -50%);
+  max-height: 90vh;
+}
+
+@media (max-width: 1023px) {
+  .fiche-modal {
+    top: 76px;
+    transform: translateX(-50%);
+    max-height: calc(100dvh - 92px);
+  }
+}
+
 /* Backdrop */
 .backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
 .backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
@@ -156,6 +170,11 @@ function onCommentSubmitted() {
   opacity: 0;
   transform: translate(-50%, -52%);
 }
+@media (max-width: 1023px) {
+  .modal-enter-from, .modal-leave-to {
+    transform: translate(-50%, calc(-2% + 76px));
+  }
+}
 
 @media (prefers-reduced-motion: reduce) {
   .backdrop-enter-active, .backdrop-leave-active { transition: none; }

components/FicheModalV2.vue

@@ -15,10 +15,9 @@
     <Transition name="modal">
       <div
         v-if="modelValue && structureId != null && structure"
-        class="fixed z-[1501] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
+        class="fiche-modal-v2 fixed z-[1501] left-1/2 -translate-x-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);
@@ -325,6 +324,21 @@ 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;
@@ -333,6 +347,11 @@ 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,6 +587,20 @@ 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) => {
@@ -858,3 +872,15 @@ 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

@@ -0,0 +1,181 @@
+<template>
+  <Teleport to="body">
+    <Transition name="backdrop">
+      <div
+        v-if="modelValue"
+        class="fixed inset-0 z-[1500]"
+        style="background: rgba(26,34,56,0.55);"
+        @click="close"
+        aria-hidden="true"
+      />
+    </Transition>
+
+    <Transition name="modal">
+      <div
+        v-if="modelValue"
+        class="mission-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="mission-title"
+        @keydown.esc="close"
+      >
+        <button
+          class="mission-close"
+          type="button"
+          @click="close"
+          aria-label="Fermer"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+
+        <div class="mission-body">
+          <h2 id="mission-title" class="mission-title">{{ title }}</h2>
+          <slot>
+            <p class="mission-text">
+              L'architecture est l'une des professions les plus complexes qui soit ; elle croise droit, technique, esthétique, économie, social, écologie — tout à la fois, tout simultanément, souvent sans filet. Paradoxalement, c'est aussi l'une des moins structurées sur le plan de l'entraide&nbsp;: peu de transmission horizontale, beaucoup d'isolement, une culture du chacun-pour-soi héritée d'une formation qui prépare à la compétition plus qu'à la coopération. On sort de l'école seul·e. On s'installe seul·e. On réinvente ce que d'autres ont déjà traversé.
+            </p>
+            <p class="mission-text">
+              Cette carte est née de cette frustration — et de cette conviction&nbsp;: les ressources existent, les gens qui ont réussi à sortir la tête de l'eau aussi. L'enjeu, c'est de les documenter, de les rendre accessibles, de les ajuster en temps réel grâce aux retours de la communauté. Pas un catalogue figé&nbsp;; un commun vivant, au service de ceux et celles qui cherchent à faire évoluer leur pratique vers quelque chose de plus épanouissant, mieux rémunéré, au service de la société — et qui prend soin de la santé, la nôtre et celle des gens pour qui nous construisons.
+            </p>
+          </slot>
+
+          <div class="mission-cta-wrap">
+            <button class="btn-explorer" type="button" @click="close">{{ ctaLabel }}</button>
+            <NuxtLink to="/manifeste" class="link-manifeste" @click="close">Lire le manifeste →</NuxtLink>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  modelValue: boolean
+  title?: string
+  ctaLabel?: string
+  storageKey?: string
+}>(), {
+  title: "L'écosystème d'entraide architecte",
+  ctaLabel: 'Explorer la carte',
+  storageKey: 'aep_mission_seen',
+})
+
+const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
+
+function close() {
+  emit('update:modelValue', false)
+  if (typeof window !== 'undefined') {
+    try { localStorage.setItem(props.storageKey, '1') } catch {}
+  }
+}
+</script>
+
+<style scoped>
+.mission-modal {
+  position: fixed;
+  z-index: 1501;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(560px, 92vw);
+  max-height: calc(100dvh - 80px);
+  background: var(--nav-bg);
+  border-radius: 16px;
+  box-shadow: 0 16px 64px rgba(26,34,56,0.28);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.mission-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: none;
+  background: var(--nav-bg-alt);
+  color: var(--nav-text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s;
+  z-index: 1;
+}
+.mission-close:hover { background: var(--nav-surface); }
+
+.mission-body {
+  padding: 1.75rem 1.5rem 1.5rem;
+  overflow-y: auto;
+}
+
+.mission-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  margin: 0 0 1rem;
+  line-height: 1.25;
+  padding-right: 2rem;
+}
+
+.mission-text,
+:slotted(.mission-text) {
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--nav-text);
+  margin: 0 0 1rem;
+}
+:slotted(.mission-text strong) { font-weight: 700; }
+:slotted(.mission-text a) { color: var(--nav-primary-solid); text-decoration: underline; }
+
+.mission-cta-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.btn-explorer {
+  padding: 0.65rem 1.25rem;
+  background: var(--nav-primary);
+  color: var(--nav-text-on-primary);
+  border: none;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.btn-explorer:hover { opacity: 0.88; }
+
+.link-manifeste {
+  font-size: 0.875rem;
+  color: var(--nav-primary-solid);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.link-manifeste:hover { opacity: 0.75; }
+
+.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
+.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
+
+.modal-enter-active, .modal-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
+.modal-enter-from, .modal-leave-to { opacity: 0; transform: translate(-50%, -48%); }
+
+@media (max-width: 480px) {
+  .mission-body { padding: 1.5rem 1.1rem 1.25rem; }
+  .mission-title { font-size: 1.1rem; }
+  .mission-text { font-size: 0.9rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-enter-active, .modal-leave-active { transition: none; }
+  .backdrop-enter-active, .backdrop-leave-active { transition: none; }
+}
+</style>

pages/a-propos.vue

@@ -8,16 +8,12 @@
       </NuxtLink>
 
       <!-- ══════════════════════════════════════════════════════════
-           SECTION 1 - Mission AEP
+           SECTION INTRO - À propos d'AEP
       ══════════════════════════════════════════════════════════ -->
-      <!-- TODO Jules : Écrire le pitch (~100 mots) - qui est AEP, pour qui, pourquoi, quelle promesse -->
       <section class="section-mission">
-        <h1>Architecture d'Écologie Politique</h1>
+        <h1>À propos d'AEP</h1>
         <p class="mission-text">
-          L'architecture est l'une des professions les plus complexes qui soit ; elle croise droit, technique, esthétique, économie, social, écologie - tout à la fois, tout simultanément, souvent sans filet. Paradoxalement, c'est aussi l'une des moins structurées sur le plan de l'entraide : peu de transmission horizontale, beaucoup d'isolement, une culture du chacun-pour-soi héritée d'une formation qui prépare à la compétition plus qu'à la coopération. On sort de l'école seul.e. On s'installe seul.e. On réinvente ce que d'autres ont déjà traversé.
-        </p>
-        <p class="mission-text">
-          Cette carte est née de cette frustration - et de cette conviction : les ressources existent, les gens qui ont réussi à sortir la tête de l'eau aussi. L'enjeu, c'est de les documenter, de les rendre accessibles, de les ajuster en temps réel grâce aux retours de la communauté. Pas un catalogue figé ; un commun vivant, au service de ceux et celles qui cherchent à faire évoluer leur pratique vers quelque chose de plus épanouissant, mieux rémunéré, au service de la société - et qui prend soin de la santé, la nôtre et celle des gens pour qui nous construisons.
+          AEP — Architecture d'Écologie Politique — est un commun vivant : une infrastructure d'entraide, de ressources documentées et de cartographies au service d'une profession en mutation. Ce site rassemble trois cartes (entraide, réseaux engagés, plateformes de mise en relation), un manifeste, une transparence radicale sur l'IA et le financement, et une gouvernance partagée.
         </p>
       </section>
 
@@ -209,11 +205,14 @@ useHead({ title: 'À propos - AEP' })
   min-height: 100vh;
   background: var(--nav-bg);
   padding: 1.5rem 1rem 5rem;
+  overflow-x: hidden;
+  width: 100%;
 }
 
 .apropos-inner {
   max-width: 720px;
   margin: 0 auto;
+  width: 100%;
 }
 
 /* ── Retour ──────────────────────────────────────────────────────────────────── */
@@ -322,13 +321,16 @@ useHead({ title: 'À propos - AEP' })
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--nav-text);
-  white-space: nowrap;
 }
 
 .badge-detail {
   font-size: 0.775rem;
   color: var(--nav-text-muted);
-  white-space: nowrap;
+  line-height: 1.4;
+}
+
+@media (min-width: 560px) {
+  .badge-label { white-space: nowrap; }
 }
 
 @media (max-width: 559px) {

pages/agences.vue

@@ -196,7 +196,7 @@
         </div>
       </div>
 
-      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer + sheet swipable ── -->
+      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer/Graphique + sheet swipable ── -->
       <div class="lg:hidden shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
         <button
           class="flex-1 py-2 text-sm font-medium transition-colors"
@@ -212,6 +212,13 @@
             : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
           @click="mobileMapView = 'outremer'"
         >Outre-mer</button>
+        <button
+          class="flex-1 py-2 text-sm font-medium transition-colors"
+          :style="mobileMapView === 'graphe'
+            ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
+            : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
+          @click="mobileMapView = 'graphe'"
+        >Graphe</button>
       </div>
 
       <div class="lg:hidden flex-1 relative overflow-hidden">
@@ -248,8 +255,25 @@
           </ClientOnly>
         </div>
 
-        <!-- Bottom sheet swipable -->
-        <ClientOnly>
+        <!-- Vue graphique mobile -->
+        <div v-show="mobileMapView === 'graphe'" class="absolute inset-0 overflow-hidden" style="background: var(--nav-bg);">
+          <ClientOnly>
+            <GraphView
+              :data="bifurcationData"
+              :allHashtags="allHashtags"
+              :active="mobileMapView === 'graphe'"
+              @select-structure="onSelectStructureMobile"
+            />
+            <template #fallback>
+              <div class="flex items-center justify-center h-48" style="color: var(--nav-text-muted);">
+                Chargement du graphe…
+              </div>
+            </template>
+          </ClientOnly>
+        </div>
+
+        <!-- Bottom sheet swipable (masqué en vue graphique pour ne pas occulter le canvas) -->
+        <ClientOnly v-if="mobileMapView !== 'graphe'">
           <MobileSheet :resultCount="filtered.length" :pending="pending">
             <!-- Bandeau intention mobile -->
             <div class="px-3 py-2" style="background: var(--bifurc-banner-bg, #faf8f5); border-bottom: 1px solid var(--bifurc-banner-border, #e0d8cc);">
@@ -379,6 +403,36 @@
       @update:modelValue="chatbotOpen = $event"
     />
 
+    <!-- ═══════════════════════════════════════ 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>
 
@@ -405,8 +459,17 @@ const hoveredId = ref<string | null>(null)
 const ficheModalOpen = ref(false)
 const ficheModalId = ref<string | null>(null)
 const chatbotOpen = ref(false)
-const mobileMapView = ref<'metropole' | 'outremer'>('metropole')
+const mobileMapView = ref<'metropole' | 'outremer' | 'graphe'>('metropole')
 const desktopMapView = ref<'metropole' | 'outremer' | 'graphe'>('metropole')
+const missionOpen = ref(false)
+
+onMounted(() => {
+  try {
+    if (!localStorage.getItem('aep_reseaux_seen')) {
+      missionOpen.value = true
+    }
+  } catch {}
+})
 
 // Filtres
 const search = ref('')
@@ -514,3 +577,29 @@ function onSelectStructureMobile(id: string) {
 
 useHead({ title: "AEP - Réseaux de bifurcation architecturale" })
 </script>
+
+<style scoped>
+.reseaux-info-btn {
+  position: fixed;
+  bottom: 24px;
+  left: 16px;
+  z-index: 1000;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: var(--nav-surface);
+  color: var(--nav-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 12px rgba(26,34,56,0.18);
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.1s;
+}
+.reseaux-info-btn:hover { opacity: 0.85; transform: translateY(-1px); color: var(--nav-text); }
+
+@media (min-width: 1024px) {
+  .reseaux-info-btn { bottom: 16px; left: 340px; }
+}
+</style>

pages/index.vue

@@ -312,6 +312,26 @@
       @highlightOrgs="onHighlightOrgs"
     />
 
+    <!-- ═══════════════════════════════════════ POP-UP MISSION ENTRAIDE -->
+    <button
+      class="mission-info-btn"
+      type="button"
+      @click="missionOpen = true"
+      aria-label="À propos de cette carte d'entraide"
+      title="À propos de cette carte"
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="10"/>
+        <line x1="12" y1="16" x2="12" y2="12"/>
+        <line x1="12" y1="8" x2="12.01" y2="8"/>
+      </svg>
+    </button>
+
+    <MissionPopup
+      :modelValue="missionOpen"
+      @update:modelValue="missionOpen = $event"
+    />
+
   </div>
 </template>
 
@@ -344,6 +364,15 @@ const chatbotOpen = ref(false)
 const ficheModalOpen = ref(false)
 const ficheModalId = ref<number | null>(null)
 const mobileMapView = ref<'metropole' | 'outremer'>('metropole')
+const missionOpen = ref(false)
+
+onMounted(() => {
+  try {
+    if (!localStorage.getItem('aep_mission_seen')) {
+      missionOpen.value = true
+    }
+  } catch {}
+})
 // Surlignage temporaire (5 sec) suite à une réponse chatbot
 // → sélectionne le premier ID recommandé sur la carte, puis remet à null
 let highlightTimer: ReturnType<typeof setTimeout> | null = null
@@ -575,3 +604,29 @@ function fonctionsList(org: Org): string[] {
 
 useHead({ title: 'AEP — Cartographie de l\'écologie politique architecturale' })
 </script>
+
+<style scoped>
+.mission-info-btn {
+  position: fixed;
+  bottom: 24px;
+  left: 16px;
+  z-index: 1000;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: var(--nav-surface);
+  color: var(--nav-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 12px rgba(26,34,56,0.18);
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.1s;
+}
+.mission-info-btn:hover { opacity: 0.85; transform: translateY(-1px); color: var(--nav-text); }
+
+@media (min-width: 1024px) {
+  .mission-info-btn { bottom: 16px; left: 340px; }
+}
+</style>

pages/manifeste.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="manifeste-page">
+    <div class="manifeste-inner">
+
+      <NuxtLink to="/" class="back-link">← Retour à la carte</NuxtLink>
+
+      <h1 class="manifeste-title">Manifeste — Architecture d'Écologie Politique</h1>
+
+      <p class="lede">
+        <em>Un quart des architectes vivent sous le seuil de pauvreté. La moitié de nos heures, non facturées. Nos cotisations, parmi les plus lourdes des professions réglementées. Et le secteur du bâtiment, à lui seul, pèse 34&nbsp;% des émissions mondiales de gaz à effet de serre.</em>
+      </p>
+
+      <p>
+        Quelque chose s'est rompu — pas dans nos vies, dans les cadres qui les contiennent.
+      </p>
+
+      <p>
+        Notre profession ne traverse pas une simple crise. Elle reflète l'effondrement d'un monde qui confond performance et destruction, signature et silence, expertise et soumission.
+      </p>
+
+      <hr />
+
+      <h2>Ce que nous voyons.</h2>
+
+      <p>
+        À l'échelle du métier, une profession structurellement sous l'eau, qui absorbe les tensions d'un système extractiviste — et porte la responsabilité quand d'autres captent la valeur.
+      </p>
+
+      <p>
+        À l'échelle des corps, une culture qui rend l'exploitation désirable&nbsp;: métier-passion, modèle starchitecte, isolement libéral, moteur critique délégitimant. Nous tenons. Nous payons.
+      </p>
+
+      <p>
+        À l'échelle du monde, l'effondrement écologique et social qui avance, pendant que notre voix s'efface du débat public. Notre silence le sert.
+      </p>
+
+      <hr />
+
+      <h2>Ce que nous refusons.</h2>
+
+      <p class="refus">
+        Nous ne signerons plus pour des projets qui détruisent.<br />
+        Nous n'isolerons plus celles et ceux qui doutent.<br />
+        Nous ne porterons plus seul·es ce qui doit se penser, se faire — et se soigner — ensemble.
+      </p>
+
+      <hr />
+
+      <p class="pivot">
+        <strong>Et pourtant, quelque chose tient.</strong>
+      </p>
+
+      <p class="pivot-suite">
+        Pas l'espoir naïf, ni la promesse héroïque. Quelque chose de plus humble&nbsp;: la fatigue commune reconnue, et l'envie qui revient de ne plus économiser sa vie.
+      </p>
+
+      <hr />
+
+      <h2>Ce que nous tentons.</h2>
+
+      <p>
+        <em>Partager.</em> Nos parcours, nos doutes, nos bifurcations. Se former les un·es les autres. Se tendre la main. Documenter ce qui marche, ce qui rate. Le personnel devient politique quand il se met en commun.
+      </p>
+
+      <p>
+        <em>Construire.</em> L'infrastructure collective qui nous a manqué. Cartes d'entraide, communs documentés, gouvernance horizontale, financement transparent, infra souveraine. <strong>Architecture d'Écologie Politique</strong>&nbsp;: un commun vivant, ouvert, biorégional, ancré.
+      </p>
+
+      <p>
+        <em>Pratiquer une médecine du corps social.</em> Diagnostiquer les infrastructures qui défaillent — l'éducation, la justice, la sécurité, l'énergie, la santé, le logement, l'agriculture. Proposer des reconfigurations situées, territoire par territoire. Reprendre le pouvoir par la base. Écrire, lentement, un nouveau contrat social.
+      </p>
+
+      <p>
+        <em>Commencer par les marges.</em> Là où le corps social souffre le plus, là où il est le plus prêt à changer. Ne pas décider à la place — faire émerger. Transparence totale, sur le process et sur l'argent. Tendresse militante&nbsp;: la lucidité sans le mépris, l'engagement sans la dureté.
+      </p>
+
+      <hr />
+
+      <h2>Architectes, allié·es, habitant·es.</h2>
+
+      <p>
+        Nous avons un travail à faire ensemble. Lentement, patiemment, par accumulation de petits gestes situés. Pas pour fuir — pour bifurquer.
+      </p>
+
+      <p class="chute">
+        <em>Nos métiers sont des médecines. Reprenons-en le pouls — à mains nues, ensemble.</em>
+      </p>
+
+      <hr />
+
+      <p class="cta-wrap">
+        <a
+          href="https://www.trans-former.fr/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="btn-blog"
+        >
+          En lire plus — blog AEP →
+        </a>
+      </p>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+useHead({
+  title: 'Manifeste — AEP',
+  meta: [
+    { name: 'description', content: 'Manifeste d\'Architecture d\'Écologie Politique — un commun vivant pour bifurquer ensemble.' },
+  ],
+})
+</script>
+
+<style scoped>
+.manifeste-page {
+  min-height: 100vh;
+  background: var(--nav-bg);
+  padding: 1.5rem 1rem 5rem;
+  overflow-x: hidden;
+  width: 100%;
+}
+
+.manifeste-inner {
+  max-width: 680px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--nav-primary-solid);
+  opacity: 0.7;
+  text-decoration: none;
+  margin-bottom: 2rem;
+  transition: opacity 0.15s;
+}
+
+.back-link:hover { opacity: 1; }
+
+.manifeste-title {
+  font-size: 1.65rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  margin: 0 0 1.5rem;
+  line-height: 1.25;
+}
+
+.lede {
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--nav-text);
+  margin: 0 0 1.25rem;
+  border-left: 3px solid var(--nav-primary-solid);
+  padding-left: 1rem;
+  opacity: 0.85;
+}
+
+p {
+  font-size: 0.975rem;
+  line-height: 1.75;
+  color: var(--nav-text);
+  margin: 0 0 1.1rem;
+}
+
+h2 {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  margin: 2rem 0 1rem;
+  letter-spacing: 0.01em;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--nav-bg-alt);
+  margin: 2rem 0;
+}
+
+.refus {
+  font-style: normal;
+}
+
+.pivot {
+  font-size: 1.15rem;
+  text-align: center;
+  margin: 2rem 0 1rem;
+  font-style: italic;
+}
+
+.pivot strong {
+  font-weight: 700;
+  font-style: normal;
+}
+
+.pivot-suite {
+  text-align: center;
+  font-style: italic;
+  opacity: 0.85;
+}
+
+.chute {
+  font-size: 1.05rem;
+  text-align: center;
+  margin-top: 1.5rem;
+  color: var(--nav-text);
+}
+
+.cta-wrap {
+  text-align: center;
+  margin: 2rem 0 0;
+}
+
+.btn-blog {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.75rem 1.5rem;
+  background: var(--nav-primary);
+  color: var(--nav-text-on-primary);
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.btn-blog:hover { opacity: 0.85; }
+
+@media (max-width: 480px) {
+  .manifeste-page { padding: 1rem 0.85rem 4rem; }
+  .manifeste-title { font-size: 1.4rem; }
+  .lede { font-size: 0.95rem; padding-left: 0.85rem; }
+  p { font-size: 0.95rem; }
+  .pivot { font-size: 1.05rem; }
+}
+</style>

pages/trouver-du-taf.vue

@@ -6,13 +6,50 @@
       <div class="taff-header-inner">
         <h1 class="taff-title">Trouver du taf en archi</h1>
         <p class="taff-subtitle">
-          Annuaire critique des plateformes de mise en relation archi ↔ particulier,
-          évaluées sur 5 axes éthiques — rémunération, transparence, pratiques pro, écologie, qualité du matching.
-        </p>
-        <p class="taff-cible">
-          Cette carte s'adresse aux <strong>architectes indépendants</strong> —
-          70&nbsp;% de la profession et sa part la plus précaire économiquement.
+          Annuaire critique des plateformes de mise en relation et d'appels d'offres,
+          pour les <strong>architectes indépendants</strong> — 70&nbsp;% de la profession et sa part la plus précaire économiquement.
         </p>
+
+        <!-- Pédagogie : ce qu'on évalue -->
+        <details class="taff-pedago" open>
+          <summary class="taff-pedago-summary">
+            <span>Comment on lit cette carte&nbsp;?</span>
+            <svg class="taff-pedago-chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          </summary>
+
+          <div class="taff-pedago-body">
+            <div class="taff-pedago-block">
+              <h3>Deux onglets, deux mondes</h3>
+              <ul>
+                <li><strong>Pour archi indépendants</strong> (B2C)&nbsp;: plateformes privées qui te mettent en relation avec des particuliers (Houzz, Architoo, etc.). Modèle économique = elles te facturent l'accès aux leads.</li>
+                <li><strong>Appels d'offres publics</strong>&nbsp;: marchés publics (BOAMP, JOUE, plateformes territoriales). Procédure réglementée, gros volumes, accès aux MOE publics.</li>
+              </ul>
+            </div>
+
+            <div class="taff-pedago-block">
+              <h3>Trois étiquettes, trois niveaux de confiance</h3>
+              <ul>
+                <li><span class="taff-pedago-tag" style="background: rgba(90,122,74,0.12); color: #3d5534;">✅ Recommandé</span> validé par AEP — pratiques alignées avec une éthique architecturale (rémunération correcte, transparence, écologie, qualité du matching)</li>
+                <li><span class="taff-pedago-tag" style="background: rgba(196,164,114,0.15); color: #7a5f2a;">⚠️ Sous réserve</span> utilisable mais avec vigilance — un ou plusieurs points faibles à connaître avant de t'inscrire</li>
+                <li><span class="taff-pedago-tag" style="background: rgba(168,93,62,0.12); color: #7a3322;">❌ À éviter</span> pratiques contraires à l'intérêt des architectes (commissions abusives, dumping, appâtage, etc.)</li>
+              </ul>
+            </div>
+
+            <div class="taff-pedago-block">
+              <h3>Cinq axes d'évaluation</h3>
+              <p class="taff-pedago-axes">
+                <strong>Rémunération</strong> (commissions, leads payants) ·
+                <strong>Transparence</strong> (CGV, modèle économique) ·
+                <strong>Pratiques pro</strong> (respect du Code de déontologie) ·
+                <strong>Écologie</strong> (incitation à la réno, matériaux) ·
+                <strong>Qualité du matching</strong> (filtres, pertinence des leads).
+              </p>
+            </div>
+          </div>
+        </details>
+
         <div class="taff-stats">
           <span class="taff-stat" style="color: #3d5534;">
             <span class="taff-stat-dot" style="background: #5a7a4a;"></span>
@@ -31,7 +68,7 @@
     </div>
 
     <!-- ── Filtres ─────────────────────────────────────────────────── -->
-    <div class="taff-filters-bar">
+    <div class="taff-filters-bar" :class="{ 'taff-filters-bar--collapsed': !filtersExpanded }">
       <div class="taff-filters-inner">
 
         <!-- Onglets B2C / AO publics -->
@@ -42,7 +79,7 @@
             :class="{ 'taff-tab--active': activeTab === 'b2c' }"
             @click="activeTab = 'b2c'; resetFilters()"
           >
-            Plateformes B2C
+            Pour archi indépendants
             <span class="taff-tab-count">{{ b2cCount }}</span>
           </button>
           <button
@@ -54,8 +91,33 @@
             Appels d'offres publics
             <span class="taff-tab-count">{{ aoCount }}</span>
           </button>
+
+          <!-- Toggle filtres mobile -->
+          <button
+            type="button"
+            class="taff-filters-toggle"
+            :aria-expanded="filtersExpanded"
+            @click="filtersExpanded = !filtersExpanded"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <line x1="4" y1="6" x2="20" y2="6"/><line x1="7" y1="12" x2="17" y2="12"/><line x1="10" y1="18" x2="14" y2="18"/>
+            </svg>
+            <span>Filtres</span>
+            <span v-if="activeFilterCount" class="taff-filters-toggle-badge">{{ activeFilterCount }}</span>
+            <svg
+              width="11" height="11" viewBox="0 0 24 24"
+              fill="none" stroke="currentColor" stroke-width="2.5"
+              stroke-linecap="round" stroke-linejoin="round"
+              :style="{ transform: filtersExpanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.18s' }"
+              aria-hidden="true"
+            >
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          </button>
         </div>
 
+        <div class="taff-filters-collapsible">
+
         <!-- Filtres tag global -->
         <div class="taff-filter-group">
           <button
@@ -119,6 +181,8 @@
             @click="resetFilters"
           >Effacer</button>
         </div>
+
+        </div><!-- /.taff-filters-collapsible -->
       </div>
     </div>
 
@@ -408,6 +472,21 @@ const filterTag     = ref('')
 const filterSecteur = ref('')
 const search        = ref('')
 const hasFilters    = computed(() => !!(filterTag.value || filterSecteur.value || search.value))
+const activeFilterCount = computed(() => {
+  let n = 0
+  if (filterTag.value) n++
+  if (filterSecteur.value) n++
+  if (search.value) n++
+  return n
+})
+
+// Filtres ouverts par défaut sur desktop, repliés sur mobile (init côté client)
+const filtersExpanded = ref(true)
+onMounted(() => {
+  if (typeof window !== 'undefined' && window.innerWidth < 768) {
+    filtersExpanded.value = false
+  }
+})
 
 function resetFilters() {
   filterTag.value = ''
@@ -574,12 +653,141 @@ const parsedDescription = computed(() => {
 .taff-subtitle { font-size: 0.9375rem; color: var(--nav-text-muted); line-height: 1.6; margin-bottom: 0.625rem; }
 .taff-cible { font-size: 0.875rem; color: var(--nav-text-muted); line-height: 1.55; margin-bottom: 1rem; font-style: italic; }
 .taff-cible strong { color: var(--nav-text); font-style: normal; }
-.taff-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
+.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; }