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>

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; }