feat(aep-v2): restore V2 cascade composants récupérés depuis vault history

- Récupérés depuis commit vault b700612^ (état pré-chirurgie git)
- FicheFamilleModal.vue (284L) — PV2-5g
- FicheModalV2.vue (341L) + NavMapV2.vue (243L) — PV2-5
- HashtagFilter.vue (97L) + IntentionBanner.vue (76L) — PV2-5
- GraphView.vue (860L) — PV2-5b+5e+5f+5g complet
- ChatbotPlaceholder.vue (423L) — version chatbot-v2
- pages/index.vue (517L) — carte unifiée 3 onglets
- types/structure-v2.ts, assets/css/v2-bifurcation.css
- server/api/chatbot-v2.post.ts, server/utils/vectorSearch.ts

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

.dropboxignore

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

JOURNAL-V2.md

@@ -1,6 +1,5 @@
 ---
 type: journal
-note_J8: Phase 8.G LIVREE 2026-05-14 - voir PILOTE-RAG-PE.md pour details
 project: NAV V2
 created: 2026-04-14
 status: actif
@@ -12,56 +11,6 @@ Journal technique de la V2. Décisions, anomalies, points bloquants, TODOs.
 
 ---
 
-## 2026-05-08 — Fix mobile + chatbot prod (cause racine résolue)
-
-**Commits :** session loggée sur main (pushé sur gitea)
-**Pattern :** pilote direct, 2 batches successifs, ~3h, 11 fichiers
-
-### Cause racine bug "chatbot Carte 1 == Carte 2"
-
-`/api/chatbot-reseaux` était **404 en prod** (jamais déployé) — explique pourquoi 5 cycles de fix précédents (ChatbotReseaux.vue prop endpoint, useRoute fallback, useMarkdown direct, etc.) n'ont rien donné : le code source était correct depuis le début. Le rebuild + redeploy de cette session résout le bug.
-
-**Verif :** `curl -s -X POST https://aep.trans-former.fr/api/chatbot-reseaux` → 200 + réponse distincte de `/api/chatbot`.
-
-### Batch 1 — fixes mobile principaux
-
-- Hamburger app.vue : ajout Jobs + Manifeste + Soutenir, ré-ordonnancement (Manifeste dans 2e groupe avec À propos/Soutenir/Signaler)
-- BandeauBas.vue : FAB cœur jaune mobile retiré (Soutenir migré dans hamburger via lien Liberapay direct)
-- agences.vue mobile : 3e onglet "Graphe" ajouté + masquage MobileSheet en mode graphe (canvas fullscreen)
-- a-propos.vue : section 1 "Mission" retirée (devient pop-up Carte 1) + `overflow-x: hidden` sur `.apropos-page` + retrait `white-space: nowrap` problématique sur `.badge-detail`
-- pages/manifeste.vue : nouvelle page (texte version `manifeste-page-carto-V1.md`, sans le diagramme ASCII pour V1 web)
-- components/MissionPopup.vue : nouveau composant générique (props `title`, `ctaLabel`, `storageKey`, slot pour contenu, `:slotted()` pour styles)
-- index.vue : intégration MissionPopup + bouton (i) `position:fixed` bottom-left + auto-show 1ère visite via `localStorage.aep_mission_seen`
-- trouver-du-taf.vue : toggle "Filtres [N] [chevron]" mobile-only (`@media max-width: 767px`) avec `taff-filters-collapsible` max-height transition
-- FicheModal.vue + FicheModalV2.vue : sur mobile `top: 76px` + `max-height: calc(100dvh - 92px)` au lieu de `top: 50% translate(-50%, -50%)` + `max-height: 90vh` qui mordait sur le header
-
-### Batch 2 — pop-up Carte 2, logo, intro Jobs, labels graphe
-
-- agences.vue : pop-up Réseaux AEP avec MissionPopup (storageKey `aep_reseaux_seen`, ctaLabel "Explorer les 120 réseaux") + bouton (i) flottant
-- app.vue logo header : badge AEP + 2 spans `logo-line-1` ("Architecture") / `logo-line-2` ("d'Écologie Politique") avec font-size responsive (0.7rem mobile → 0.85rem ≥1024)
-- trouver-du-taf.vue : `<details class="taff-pedago" open>` avec 3 blocs (deux onglets, trois étiquettes, cinq axes) + onglet "Plateformes B2C" → "Pour archi indépendants"
-- GraphView.vue : `d3NodeSelection.filter(type==='structure').append('text')` avec class `graph-struct-label`, `dy: -(d.r + 5)`, font-size 9.5px, halo via `paint-order: stroke; stroke: var(--nav-bg)` (style global non-scoped pour piercer D3)
-
-### Bug d'opération à retenir
-
-Lors du 1er déploiement batch 2, `bash deploy.sh` semblait OK (HTTP 200) mais le HTML en prod ne contenait pas les modifs. **Cause** : Dropbox sync a effacé `.output/` entre `npm run build` et le tar SCP — le tar a uploadé un `.output` quasi-vide. Solution : 2e cycle clean (`Remove-Item .nuxt/dist + .output`) + rebuild + redeploy avec `yes y |` (skip confirm interactif `.env diff`).
-
-**Réflexe à intégrer** : après build, vérifier `grep -o "<un-fragment-de-modif>" .output/public/_nuxt/*.js | head` AVANT le deploy. Si 0 match → ne pas deploy, rebuild.
-
-### Bug de communication à retenir
-
-Jules a signalé "le logo n'a pas marché", "B2C pas renommé", "hamburger pas modifié" alors que le HTML en prod contenait bien les modifs (vérifié curl avec `?nc=$(date +%s)`). **Cause** : cache navigateur / service worker Nuxt. Réflexe à mettre en place pour /done de toute session web : si Jules dit "ça n'apparaît pas", vérifier curl en bypass cache AVANT de chercher un bug. Si match curl → demander hard refresh (Ctrl+Shift+R).
-
-### Reste à faire (batch 3)
-
-Voir `0 INBOX/PROMPTS/cascade-megaboum/REPRISE-aep-carto-fix-batch3.md` :
-- Bouton "+" → sélecteur 3 cartes (Entraide/Réseaux/Jobs)
-- Pop-up explication 5 axes Jobs (paragraphe par axe)
-- Pop-up Carte 1 visibilité (option à clarifier avec Jules)
-- GraphView Carte 1 (centres = hashtags, couche échelle activable) — gros chantier session dédiée
-
----
-
 ## 2026-04-27 — Session V3 : Finition mobile + Blog Liberapay + 3 deploys
 
 **Commit :** `a02a555` — feat(mobile): accordéon outremer, hamburger nav, logo AEP, fiches cliquables, chatbot fullscreen
@@ -1054,57 +1003,3 @@ Incohérence entre `deploy.sh` (rsync vers `/opt/nav-carte/`) et `nav-carte.serv
 - **Caching API organisations** — actuellement re-fetch NocoDB à chaque render
 - **Full-text search côté client** — Fuse.js sur descriptions enrichies
 - **Mode offline / PWA** — manifest + service worker pour usage terrain
-
----
-
-## Décisions structurantes (mémoire profonde)
-
-> Archive des décisions structurantes du projet nav-carte (AEP V1/V2/Codev/Carte 3), déchargée hebdo depuis coordo-agent-dev. Tri chronologique inverse (plus récent en haut). Copies verbatim, pas de reformulation.
-
-### 2026-W19 (décharge 2026-05-13)
-
-- [W19 — 2026-05-08 19:21] **AEP nav-carte fix mobile batch1+2 LIVE + cause racine chatbot Carte1=Carte2 résolue** (~3h pilote direct, 2 batches successifs, 11 fichiers). **Cause racine identifiée** après 5 cycles de fix précédents infructueux : `/api/chatbot-reseaux` était **404 en prod** (jamais déployé). Le code source nav-carte était correct depuis le début. Rebuild + redeploy = bug résolu (vérifié curl POST sur les 2 endpoints, réponses distinctes). **Batch 1** : hamburger refondu (Jobs/Manifeste/Soutenir), FAB cœur jaune retiré, 3e onglet Graphe mobile sur agences, /a-propos refondue + scroll latéral fixé, page /manifeste créée (texte version page-carto-V1), MissionPopup générique avec slot/props (storageKey, title, ctaLabel) auto-show 1ère visite, filtres Jobs mobile repliables (toggle "Filtres [N]"), FicheModal/V2 décalage `top:76px` mobile pour ne plus mordre header. **Batch 2** : pop-up Carte 2 Réseaux AEP, logo header `Architecture d'Écologie Politique` en clair sur 2 lignes (logo-line-1/2 responsive), onglet "Plateformes B2C" → "Pour archi indépendants", intro pédagogique repliable Jobs (2 onglets / 3 tags / 5 axes éthiques), labels noms structures sur GraphView (D3 append text + halo via `paint-order: stroke`). **Pattern d'opération critique découvert** : Dropbox sync efface .output entre `npm run build` et `tar | ssh` du deploy.sh — 1er deploy batch 2 a uploadé un .output quasi-vide sans erreur visible (HTTP 200 trompeur). Réflexe : `grep "fragment-modif" .output/public/_nuxt/*.js | head` AVANT deploy. **Pattern de communication** : Jules a signalé "modifs pas faites" alors que HTML prod contenait bien les modifs (vérifié curl) — cache navigateur / service worker. Réflexe : si "ça apparaît pas", curl bypass cache AVANT chercher bug, puis demander hard refresh. Git : commit propre + push gitea/main (`yes y | bash deploy.sh` pour skip confirm interactif `.env diff`). Prompt batch 3 dans `0 INBOX/PROMPTS/cascade-megaboum/REPRISE-aep-carto-fix-batch3.md`.
-
-- [W19 — 2026-05-07 17:18] **AEP Carte 3 "Trouver du taf" — T2 scoring 5 axes + T3/T4 LIVE** : 24 plateformes scorées (7✅/14⚠️/3❌), plateformes-taff.json prod, page /trouver-du-taf complète (filtres, grille 1 col, modal fiche, chatbot FAB Guide IA). Endpoints /api/chatbot-taff (import JSON statique + Mistral Small) + /api/chatbot-reseaux (keyword search 120 structures). ChatbotReseaux.vue créé (standalone Carte 2). useMarkdown.ts inline styles CSS-free. Onglet Jobs nav desktop. Bug dev : cache .nuxt corrompu par agent concurrent → bat rmdir+délai 12s. Chatbot séparation + markdown à vérifier en PROD (pas dev). Menu hamburger mobile Jobs manquant. Branche main.
-
-- [W19 — 2026-05-07 01:11] **Codev MVP LIVRÉ en prod** — cascade M1→M5 complète (5 agents Sonnet), merge feat/codev-mvp→main, push Gitea. App entraide /codev live avec lock screen, formulaire, graphe D3 force-directed, annuaire table sticky, 2 modes matching (Solution tokenize direct + Alliance Jaccard), mode admin (DELETE fiche), QR code public, panel mobile bottom sheet. Décision build : TOUJOURS depuis C:\tmp\nav-build (Dropbox corrompt cache Vite = 500 prod). Algo fix critique : Solution compare textes besoin↔offre directement (ignore hashtags), évite que les 3 modes donnent le même graphe.
-
-- [W19 — 2026-05-06 17:11] **MP-TAFF T1b scraping compléments DONE** — BrowserMCP utilisé pour débloquer Trustpilot (7 pages) + instao.fr + francemarches.com. `T1-output-plateformes.json` finalisé : 25 plateformes, 7 avec feedback Trustpilot. Signaux forts T2 : Archionline 2.4/5 (spam + permis PLU non conformes), hemea = courtier déguisé en MOE, TMA = meilleur ratio pros. Prochaine étape : **MP-TAFF T2 scoring 5 axes éthiques**.
-
-- [W19 — 2026-05-06 13:30] **Cascade dispatchable Codev MVP livrée — 9 fichiers prêts à dispatcher en session Opus dédiée** : Cadrage `/orchestrateur` app entraide / co-développement Jules pour facilitation IRL jeudi 8/05 ~10 amis. 5 intersections tranchées : URL `/codev` (sous-route aep.trans-former.fr pas nouveau domaine), naming "Co-développement"/"Entraide entre pairs", mot de passe partagé `merci`, persistance NocoDB nouvelle table `codev_fiches` (carto vit hebdo, pas effacée), démo route publique `/codev/demo` (10 prénoms factices pour pitch univ). **Démêlage trinôme** (problème mathématique flaggé par Jules) : matching pair-only en MVP, trinômes émergent visuellement du D3 force-directed (triangles dans le graphe), pas de logique trinôme explicite codée — économie combinatoire majeure. 3 modes : Solution (besoin→offre asymétrique avec flèche), Alliance (besoin↔besoin symétrique), Surprise (offre↔offre symétrique). **Algo matching MVP simple** sans IA : Jaccard sur hashtags si présents, sinon Jaccard sur tokens FR (stop-words filtrés) seuil 0.15 — V2 embeddings si scaling. **Réutilisation pattern GraphView.vue** (~700 lignes existant) en simplifié (~200-300 lignes pour CodevGraph) — pas de greenfield. Cascade dans `codev-build/` (même pattern que `aep-communaute-build/`) : INDEX (table+décisions+statut) + META-PROMPT-OPUS (preflight+dispatch séquentiel+1 checkpoint deploy+format récap) + M1 (NocoDB table API + 3 endpoints + runtimeConfig) + M2 (lock+fiche+middleware auth skip /codev+/codev/demo) + M3 (CodevGraph D3 + page carto affichage seul) + M4 (matching 3 modes + boutons + animation force.alpha(0.5).restart()) + M5 split phase 1 (démo+build local+stop) + phase 2 (deploy prod après checkpoint Jules) + FEEDBACK-PASSES (10 risques pré-dispatch corrigés) + PHRASE-LANCEMENT (one-shot pour session Opus). **Patches en cours de session** : M1 fait création table NocoDB en autonomie via API (token NocoDB `e9rU...` déjà dans nav-carte/.env, endpoint `POST /api/v2/meta/bases/{baseId}/tables`), M5 phase 2 sync .env VPS automatiquement (ssh append + restart aep), règle d'or "couper M4/M5 si timing serré" retirée du META car Jules a confirmé scope OK. **1 seul checkpoint Jules** : entre M5 phase 1 (build local 200) et M5 phase 2 (deploy prod). Pattern méga-dispatch consécutif #5 (avant : Simulateur V2 30/04, Méga-cascade AEP V2 30/04, MP-TAFF cascade-megaboum 06/05, AEP V2 graphe PV2-5 micro-itérations 06/05). À dispatcher en session Opus dédiée (jauge propre, ~1h30 cascade attendue + ~5 min action manuelle Jules NocoDB).
-
-- [W19 — 2026-05-06 21:30→01:45] **AEP V2 graphe interactif PV2-5b/e/f/g + chatbot v2 vivant + decouverte 2 repos imbriqués** : 4 commits vault `feat/aep-v2-cartobifurcation` (062337a sidebar+chatbot intégré, 2adffdf toggle Familles/Pratiques+popover famille, 5d7556a carte unifiée layers superposables+popover hashtag+lisibilité, e1ae1b9 popovers enrichis+FicheFamilleModal). 4 micro-itérations dispatch agent Sonnet en séquentiel, pilote commit lui-même chaque fois (pattern anti-hallucination établi après agent 1 a inventé hash 755d1ef). **Décisions design** : skip PV2-5c bicolores (8/120 structures = effet marginal), toggle PV2-5e exclusif fusionné en layers superposables PV2-5f (intuition Jules : séparation artificielle), Pratiques default OFF perf-friendly (174 noeuds + 640 liens si tout coché), FicheFamilleModal composant dédié réutilisable, skip définitions hashtags (pas de contenu source) → ligne générique "portée par N structures de M familles". **Découverte 2 repos git imbriqués** (vault parent ATIS-IPCJRA branche v2 + sous-repo nav-carte/ branche v1.1 distincte) → expliquait les "hallucinations" branche des agents. Notée dans `ATIS-Dev.md` section "Pièges connus" + réflexe pilote `git rev-parse --show-toplevel` au démarrage. **Chatbot v2** : endpoint v1→v2 dans ChatbotPlaceholder.vue (commit sous-repo 5878c56), vectorize-v2.js renommé en .cjs (incompat ESM type=module), payload Mistral fixed `inputs`→`input`, 120 embeddings générés (3.5MB embeddings-v2.json gitignored), patch vectorSearch.ts process.cwd() au lieu d'import.meta.url (bug Nitro bundle). **Rotation clé Mistral** : nouvelle clé `PXsPUhk...` notée _System/API-credentials.md, appliquée local .env + VPS /opt/aep/.env (backup .env.bak.before-rotation-20260506) + restart aep + smoke test prod chatbot v1 OK. **Doc features graphe** créée : `aep-communaute-build/PV2-5-FEATURES-GRAPHE.md` (briefing agent qui découvre en 30 sec). **Backlog différé** : PV2-5d sous-noeuds projets emblématiques (perf-critique 480 noeuds), définitions hashtags (session écriture éditoriale Jules), décision repo imbriqués (intersection stratégique demain). **Test live chatbot v2 bloqué** par lock Dropbox sur .nuxt/dev → prompt cloture demain `PV2-5h-test-chatbot-v2-local.md`.
-
-- [W19 — 2026-05-06 02:30] **MP-TAFF V2 cadré + prompt scraping autonome séparé + rename atis-humain** : Brainstorm divergent Jules pour Carte 3 AEP "Trouver du taf en archi". 5 axes scoring éthique AEP validés (Rémunération / Transparence / Pratiques pro / Écologie / Matching) avec définitions + critères + échelles ✅⚠️❌ — c'est le différenciant central vs annuaires neutres. Décisions verrouillées : freelance only V1 (70% archis indé = cible la plus en galère), IA applique scoring (critères validés une fois = pas de validation fiche par fiche), onglet `aep.trans-former.fr` (pas sous-domaine), branche parallèle `feat/aep-taff-v1` (pas attendre merge V2), SEO reporté V2 (skill `/seo-page-aep` à créer). MP-TAFF V2 ~430 lignes avec 2 tours auto-feedback (table décision tag global, format desc IA 5 sections, §risque juridique nominatif, calibrage chatbot 3 questions, préflight conflit branche V2 + i18n). **MP-TAFF-T1-scraping-autonome.md créé** (~270 lignes) — sortable sur PC séparé pour parallélisation pendant qu'ATIS Dev bosse T0/T2/T3+. Pattern routing scraping documenté : Jina d'abord → crawl4ai SPA → BrowserMCP RGPD/auth → manuel flag. Forums commu intégrés : Team.Archi, Reddit r/Architecture FR, presse pro (Le Moniteur, AMC, D'A). Output JSON structuré consommable par T2. 🔒1 simplifié = récap scope synthétique (10 min Jules). Backlog cascade : MP-MENTOR (carte 4 entraide), MP-CROSS (n8n + GitHub OS) restent prêts. **Rename `tara` → `atis-humain`** : skill renommée, routing patché dans `atis-archi.md` ligne 390 et `ATIS-agents-specialises.md` ligne 29. Anciennes refs à Tara la personne (Mediathèque, done.md, ton-jules.md) inchangées.
-
-- [W19 — 2026-05-05] **AEP V2 PV2-4+5+8 DONE + vue graphique D3** : PV2-4 (887 edges, 480 projets, reseaux-bifurcation.json 847KB). PV2-5 UI (NavMapV2, HashtagFilter, IntentionBanner, FicheModalV2, palette 5 familles, geocodage 118/120, GraphView.vue D3 force-directed). PV2-8 RAG (chatbot-v2.post.ts + vectorize-v2.js). Fixes UI : onglets outremer desktop, sidebar scroll, chips colorees, hashtags repliables, F6 filtre, intention overlay localStorage. EDITO-V2.md cree. 13 commits feat/aep-v2-cartobifurcation. 🔒 PV2-5 checkpoint visuel Jules en attente.
-
-### 2026-W18 (décharge 2026-05-13)
-
-- [W18 — 2026-05-03] **AEP V2 PV2-2ter DONE** : 10 emails récupérés. Volet A F2 (amaco/LTE), F4 (toitsdechoix/HPO/HabiterAuvergne/EmmanuelleDucos). Confirmed not public : F3 (LALCA/Sentiers/AOA/METALAB), F4 (unitoit/atelier15/a-tipic/HPF/atcoop). Blocages : rfcp.fr GravityView JS, a-tipic HTTP 400. Volet B F6 : 7 flags + 4 emails (Forensic/Centrala/NBL/Assemble) + 1 new fiche Collectif Etc (contact@collectifetc.com). Seed 122 fiches. Commit `7ce8e12`.
-
-- [W18 — 2026-05-03] **AEP V2 PV2-2 F1 DONE** : 26 fiches réemploi & filières (14 V1 + 12 nouvelles). Nouvelles : Cycle Up (contact@cycle-up.fr), Backacia (form), Mobius (contact@mobius-corp.com), AD VITAM MATERIAL (reemploi@embuild.be), Cirkla (c/o insitu), CANCAN (contact@collectifcancan.fr), HArquitectes (harquitectes@harquitectes.com), isla (press@isla-architects.com), jdviv BE (EUmies 2026 co-winner), SalvoWEB, B+L Architectes, REFAIR/BDR. 6/12 emails high. Hashtag nouveau proposé : #amo-reemploi (AMO/diagnostic PEMD spécialisés). BrowserMCP off toute la session → Jina only (Reuse Foundation non scrapée, jdviv URL à confirmer). Commit `656cc2d`. **PV2-2 5/5 familles DONE.** → Reste PV2-3+PV2-4.
-
-- [W18 — 2026-05-03] **AEP V2 PV2-2 F2 DONE** : 36 fiches frugalité & low-tech (22 V1 + 14 nouvelles). Nouvelles : Lacaton&Vassal (Pritzker 2021), Kéré Architecture (mail@kerearchitecture.com), Anna Heringer, CRATerre (secretariat@craterre.org), Les Grands Ateliers, AsTerre (secretariat@asterre.org), RFCP, EnvirobatBDM, NUNC, LAPS, Dorodango, BEES, amàco (contact@amaco.org), Lehm Ton Erde. 4/14 emails high conf. Sources productrices : AsTerre annuaire (19 agences archi identifiées), Pritzker (2 nouvelles), frugalite.org réseau. Blocages : RFCP annuaire JS, lehmtonerde.at 422, OFF laureats non scraped, BrowserMCP instable (3 décos). Commits `8808a35`+`301c3be`. → Reste F1 Réemploi.
-
-- [W18 — 2026-05-03] **AEP V2 PV2-2 F3 DONE** : 22 fiches architecture sociale & précarités (11 V1 + 11 nouvelles). Nouvelles : PEROU, Plateau Urbain (SCIC), Bellastock, ASF France, Rural Studio, Forensic Architecture, Collectif Parenthèse, WoMa, Fab City Grand Paris, CivicWise. 6/11 emails high conf (PEROU·Bellastock·Rural Studio·Parenthèse·WoMa·CivicWise). Sources : Quatorze /partenaires-new (meilleur hub), YWC lieux (Grands Voisins + Coco Velten), A&P filtres. 4 multi-famille (Bellastock F3+F5, Parenthèse F3+F4, WoMa F3+F4, YWC F3+F4+F5). Commit `d2028f5`. → Reste F1 + F2.
-
-- [W18 — 2026-05-02 23:23] **AEP V2 PV2-2 F4 DONE** : 20 nouvelles fiches collectifs/écolieux/AMO via Jina (BrowserMCP déco → pivot Jina). 11/20 emails high conf. Structures-clés : RAHP, HPF, Habicoop, Hab-Fab SCIC, Regain SCIC, Coopérative Oasis, Mietshäuser Syndikat. 9 contacts partiels (tel/form) à compléter BrowserMCP. Commit `f54afe3`.
-
-- [W18 — 2026-05-02 19:51] **AEP V2 PV2-2 F5 DONE** : 15 fiches urbanisme transition via BrowserMCP. 7 emails high (CLER/TEPOS/Coloco/Bas Smets/EP/FNAU/Atelier Georges). Commit `56c93eb`.
-
-- [W18 — 2026-05-02 18:17] **C3 smoke test + PV2-1 scrape DONE** : C3 = 2 bugs (P0 algo-config.json 404, P1 redirect 301 manquant) + rapport `C3-RAPPORT.md`. PV2-1 = 5/5 emails trouvés via BrowserMCP (Opalis/Frugalité/Quatorze/Tepop/Transition France), commit 6df5b84. Stack BrowserMCP validé pour batch PV2-2. Patcher P0+P1 avant merge master simulateur.
-
-- [W18 — 2026-04-30 12:00] **AEP Cascade V2 Phase A2+A3 figées + PILOTE-V2 doc pilote vivant** : Session "AEP COMMU V3 suite" /atis-archi puis /atis-dev. SPEC-V2-FEEDBACK-DEV.md livré (faisabilité pipeline 3 passes, email cascade 5 niveaux estim 65-80%, reclaim JWT HS256 30j single-use, grain JSON suffisant si desc_longue 600+ + 3 sources, branches 2 dédiées, pre-flights standardisés, fix BOM). PILOTE-V2.md créé comme **source de vérité vivante** à la racine `aep-communaute-build/` (Jules pilote depuis ce fichier ; tout Opus suivant le lit en premier). 13 prompts PV2-X dans `0 INBOX/PROMPTS/aep-v2-cartobifurcation/` (README + PV2-0 preflight + PV2-1 scrape test 5 fiches + PV2-2 5 agents recherche par famille en parallèle (idée Jules : recoupement multi-famille = signal politique transversalité) + PV2-2bis recoupement + PV2-3 passe2 analyse + PV2-4 passe3 croisements + PV2-5 refonte UI + PV2-6 reclaim + PV2-7 badges statut + PV2-8 RAG coexistence v1+v2 + PV2-9 bandeau regards d'ailleurs + PV2-10 E2E build + PV2-11 batch emails + tri DOM-TOM). NEXT-SESSION-PROMPT-V3.md créé pour relais. **Amendements Jules sur SPEC-V2** : famille 1 "Réemploi & matière" → "Réemploi & filières", AMO ajouté famille 4 (Tepop/Hab-Fab/Habicoop), famille 5 Urbanisme transition gardée fermement (cibler scrape agressif), centres ressources DOM-TOM → carte ressources existante (sauf Caribois praticien direct), pas de cap fiches sur agents recherche, stratégie snowball depuis nodes établis (Frugalité, Opalis, A&P) + crawl collaborateurs/influences/prix/distinctions. Sessions batch nocturnes dimensionnées Claude Max 5h Opus. PV2-0 partiel exécuté : branche `feat/aep-v2-cartobifurcation` créée depuis origin/main (tracking unset = anti-push main accidentel) + BOM UTF-8 retiré de `nav-carte/deploy.sh`. PV2-0 effectif (checkout + structure `nav-carte/V2-cascade/` + hook pre-commit no-BOM + sources-par-famille.md) à faire prochaine session après commit/stash des 830 fichiers pending sur `feat/aep-website-v1.1`.
-
-- [W18 — 2026-04-30] **Cascade MEGABOUM opérationnelle — 4 MP rédigés + cockpit lisible** : `0 INBOX/PROMPTS/cascade-megaboum/` créé avec `00-COCKPIT-CASCADE.md` (index lisible en 3 min par tout Opus dispatché, format différent de la mégaspec — celle-ci reste lecture profonde optionnelle). 4 méga-prompts prêts à dispatcher : **MP-TAFF** (app trouver du taf B2C/B2B/appels publics, ~5h, étend `aep-communaute-build/`), **MP-MENTOR** (app mentorat-entraide M7-M, ~5h, post-TAFF), **MP-CROSS** (pipeline cross-posting n8n LinkedIn+Substack+Listmonk+@aep.politique + GitHub OS publish skills/lightrag/vps-kit, ~5h, parallèle), **MP-DESIGN** (création agent atis-design, prompt court ~1h via /create-agent + scrape Prisme.one). Brief archive `MP10-manifeste-aep-INFO-BRIEF.md` (chantier déjà lancé par Jules). Chaque MP démarre par CHECKPOINT 0 réflexion faisabilité (l'Opus lit, propose, attend OK Jules avant dispatch). Backlog explicite : page-cerveau Astro from scratch, méga-RAG FRACAS vague 1, atis-philosophe, frontend-slides, rename atis-humain (P1 30 min), Insta @julesneny n8n (Q3). LightRAG VPS DOWN **déclassé** : pas bloqueur P0 semaine si on ne fait pas méga-RAG, devient bloqueur quand on attaquera RAG. Cadence : Jules pilote au fil des jours, 1-2 MP/jour, 2 clusters max simultanés.
-
-- [W18 — 2026-04-30 02:46] **Méga-cascade V2 AEP Phase A1 figée + 3 agents background livrés** : Session Opus orchestrateur "AEP commu V2". 9 intersections tranchées par Jules en un message (5 familles fusion F4+F5, UX vignette + template carte 1, scope FR+Europe francophone + capture incidente régénératifs hors scope, articulation pensées<->structures reportée V2, passe profonde GO, email champ soft, charte reportée, filtre échelle drop, A3 absorbé A1). SPEC-V2.md figée. 3 agents Sonnet dispatchés en parallèle background : VOIE 2 V1.1 nav-carte (4 commits `feat/aep-v1.1-nav-carte` basée sur feat/aep-pratiques-regeneratives car main pré-V1 ; PA1 DOM-TOM pattern desktop 2 onglets, PA3 bouton Proposer contextuel, PA5 chatbot pratiques régé Mistral, 6/6 bugs E2E M1-M3+L1-L3 corrigés, build Nuxt OK), VOIE 3 website (1 commit `feat/aep-website-v1.1` e95f693 ; PB1 hamburger 4 entrées + stubs /manifeste /ressources /signaler ; **/!\ livré sur renovation-energetique.trans-former.fr - website pro, pas aep.trans-former.fr - à clarifier prochaine session**), PASSE PROFONDE (52 pratiques régé + 99 ressources institutionnelles analysés ; 5 familles confirmées avec garde-fous F5 ; 46 hashtags ; 7 cas limites + 4 hors-grille type "mouvement-manifeste" potentiel ; **226 acteurs candidats enrichissement carte ressources : P1=56 fiches urgentes dont 30 CAUE manquants top dpts + 4 CAUE DOM-TOM + 9 MA régionales + 2 CROA DOM ; constat critique : 0 DOM-TOM + 6/92 CAUE dans carte ressources actuelle**). 5 questions stratégiques remontées pour Phase A2 (Q-PP1 5 vs 6 familles, Q-PP2 type mouvement-manifeste, Q-PP3 F5 différée passe 2, Q-PP4 double-référencement KEBATI/AQUAA/RBD/Envirobat, Q-V3 site cible hamburger). NEXT-SESSION-PROMPT.md pré-écrit pour reprise propre Phase A2 /atis-dev. Pattern méga-dispatch consécutif #4. Tokens : 130k orchestrateur + ~451k délégués sous-agents.
-
-- [W18 — 2026-04-30 01:42] **Méga-cascade V2 AEP cadrée** : `MEGA-V2.md` master orchestration 3 voies créé. VOIE 1 = V2 conceptuelle (refonte carte écosystème AEP en carte des réseaux de bifurcation, 5-6 familles éditoriales, reclaim email magique, pipeline IA cascade 3 passes, ~75-100 fiches). VOIE 2 = V1.1 nav-carte (items 1+2+4+5+8 ; item 3 absorbé par VOIE 1). VOIE 3 = website astro-site (hamburger + manifeste + ressources). Décisions Jules : `/atis-archi` pilote la spec V2 conceptuelle Phase A1, `/atis-dev` en relai Phase A2. Apports critiques : champ email obligatoire dans le scrape (sans email = pas de reclaim), passe profonde sur fiches existantes (~52+80) pour faire remonter hashtags sous-familles, item 4 (filtre échelle) à questionner, A3 absorbable dans A1, page Manifeste à ajouter au hamburger website. Phrase d'amorce + effort `high` recommandé pour la session Opus dédiée demain. PHRASE-LANCEMENT-OPUS-V2.md marqué SUPERSEDED. 2 briefs INBOX (V2-BRIEF-AGENT-OPUS + V2-RECAP-PROJET) déplacés dans aep-communaute-build/.
-
-- [W18 — 2026-04-29 11:48] **AEP scrape P1-P7 FAIT** : BrowserMCP (P1 architecture-precarites.fr : 200+ projets, 5 catégories) + Jina (P4 vegetal-e ✅, P6 colorado-architecture ✅, P7 karibati ✅, P3 caribois ✅). P2 archidev bot-protégé + P5 envirobat 422 → consultation manuelle. `scrape-browsermcp.json` créé (7 entrées). Email auteurs architecture-precarites.fr envoyé par Jules. INCLURE : vegetal-e (5/8), envirobat-RE (7/8), karibati (5/8). EXCLURE : caribois (2/8), colorado (3/8).
-
-- [W18 — 2026-04-29] **AEP V1 E2E PASS** : 5/5 scénarios OK (3 mobile, 3 laptop). Branche `feat/aep-pratiques-regeneratives` prête à merger main. `E2E-RESULTS.md` créé. Bugs mineurs capturés : M1 chips a11y + M2 reset searchbox + M3 floating button + L1 redirection.
-
-- [W18 — 2026-04-29 08:11] **AEP V1 LIVRÉE** : 52 fiches prod (`aep.trans-former.fr/pratiques-regeneratives`), 12 commits feat/. V1.1 mode divergent cadrée (8 items brain-dump Jules).

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">
-          <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 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>
       </a>
 
@@ -34,28 +39,23 @@
           class="nav-tab"
           :class="{ 'nav-tab--active': route.path === '/agences' }"
         >
-          Réseaux AEP
+          Agences Inspirantes
+          <span class="nav-tab-badge">en construction</span>
         </NuxtLink>
         <NuxtLink
           to="/trouver-du-taf"
           class="nav-tab"
           :class="{ 'nav-tab--active': route.path === '/trouver-du-taf' }"
         >
-          Jobs
+          Trouver du taf
         </NuxtLink>
         <NuxtLink
-          to="/codev"
+          to="/rag"
           class="nav-tab"
-          :class="{ 'nav-tab--active': route.path.startsWith('/codev') }"
+          :class="{ 'nav-tab--active': route.path === '/rag' }"
         >
-          Codev
-        </NuxtLink>
-        <NuxtLink
-          to="/media"
-          class="nav-tab"
-          :class="{ 'nav-tab--active': route.path === '/media' }"
-        >
-          recherche-média
+          RAG
+          <span class="nav-tab-badge">en construction</span>
         </NuxtLink>
       </nav>
 
@@ -107,52 +107,14 @@
         >
           Signaler
         </NuxtLink>
-        <!-- Proposer — popover 3 choix -->
-        <div class="hidden sm:block relative" ref="proposerAnchor" data-proposer-popover>
-          <button
-            @click="proposerOpen = !proposerOpen"
-            class="px-3 py-1.5 rounded-lg text-sm font-semibold transition-all hover:opacity-80 inline-flex items-center gap-1"
-            style="background: var(--nav-accent); color: var(--nav-text);"
-            aria-label="Proposer une contribution"
-          >
-            + Proposer
-          </button>
-          <div
-            v-if="proposerOpen"
-            class="absolute right-0 top-full mt-1 rounded-lg shadow-lg min-w-[240px] py-1"
-            style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt); z-index: 9999;"
-          >
-            <NuxtLink
-              to="/contribuer"
-              class="flex items-center justify-between px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70"
-              style="color: var(--nav-text);"
-              @click="proposerOpen = false"
-            >
-              <span>Fiche Entraide <span style="color: var(--nav-text-muted); font-weight: 400; font-size: 0.7rem; display: block;">Carte 1 — Écosystème archi</span></span>
-              <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="flex-shrink:0; color: var(--nav-text-muted);"><polyline points="9 18 15 12 9 6"/></svg>
-            </NuxtLink>
-            <div style="height: 1px; background: var(--nav-bg-alt); margin: 2px 0;"></div>
-            <NuxtLink
-              to="/contribuer-reseau"
-              class="flex items-center justify-between px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70"
-              style="color: var(--nav-text);"
-              @click="proposerOpen = false"
-            >
-              <span>Réseau / collectif <span style="color: var(--nav-text-muted); font-weight: 400; font-size: 0.7rem; display: block;">Carte 2 — Réseaux AEP</span></span>
-              <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="flex-shrink:0; color: var(--nav-text-muted);"><polyline points="9 18 15 12 9 6"/></svg>
-            </NuxtLink>
-            <div style="height: 1px; background: var(--nav-bg-alt); margin: 2px 0;"></div>
-            <NuxtLink
-              to="/contribuer-job"
-              class="flex items-center justify-between px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70"
-              style="color: var(--nav-text);"
-              @click="proposerOpen = false"
-            >
-              <span>Plateforme jobs <span style="color: var(--nav-text-muted); font-weight: 400; font-size: 0.7rem; display: block;">Carte 3 — Jobs archi</span></span>
-              <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="flex-shrink:0; color: var(--nav-text-muted);"><polyline points="9 18 15 12 9 6"/></svg>
-            </NuxtLink>
-          </div>
-        </div>
+        <!-- Proposer une ressource -->
+        <NuxtLink
+          to="/contribuer"
+          class="px-3 py-1.5 rounded-lg text-sm font-semibold transition-all hover:opacity-80 hidden sm:inline-flex items-center gap-1"
+          style="background: var(--nav-accent); color: var(--nav-text);"
+        >
+          + Proposer
+        </NuxtLink>
 
         <!-- Toggle dark mode -->
         <button
@@ -174,40 +136,18 @@
           </svg>
         </button>
 
-        <!-- Mobile : contribuer icône → popover -->
-        <div class="sm:hidden relative" data-proposer-popover>
-          <button
-            @click="proposerOpen = !proposerOpen"
-            class="p-2 rounded-lg"
-            style="background: var(--nav-accent); color: var(--nav-text);"
-            title="Contribuer"
-            aria-label="Contribuer"
-          >
-            <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="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
-            </svg>
-          </button>
-          <div
-            v-if="proposerOpen"
-            class="absolute right-0 top-full mt-1 rounded-lg shadow-lg min-w-[220px] py-1"
-            style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt); z-index: 9999;"
-          >
-            <NuxtLink to="/contribuer" class="flex items-center justify-between px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" style="color: var(--nav-text);" @click="proposerOpen = false">
-              <span>Fiche Entraide</span>
-              <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="flex-shrink:0; color: var(--nav-text-muted);"><polyline points="9 18 15 12 9 6"/></svg>
-            </NuxtLink>
-            <div style="height: 1px; background: var(--nav-bg-alt); margin: 2px 0;"></div>
-            <NuxtLink to="/contribuer-reseau" class="flex items-center justify-between px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" style="color: var(--nav-text);" @click="proposerOpen = false">
-              <span>Réseau / collectif</span>
-              <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="flex-shrink:0; color: var(--nav-text-muted);"><polyline points="9 18 15 12 9 6"/></svg>
-            </NuxtLink>
-            <div style="height: 1px; background: var(--nav-bg-alt); margin: 2px 0;"></div>
-            <NuxtLink to="/contribuer-job" class="flex items-center justify-between px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" style="color: var(--nav-text);" @click="proposerOpen = false">
-              <span>Plateforme jobs</span>
-              <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="flex-shrink:0; color: var(--nav-text-muted);"><polyline points="9 18 15 12 9 6"/></svg>
-            </NuxtLink>
-          </div>
-        </div>
+        <!-- Mobile : contribuer icône -->
+        <NuxtLink
+          to="/contribuer"
+          class="sm:hidden p-2 rounded-lg"
+          style="background: var(--nav-accent); color: var(--nav-text);"
+          title="Contribuer une fiche"
+          aria-label="Contribuer"
+        >
+          <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="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+          </svg>
+        </NuxtLink>
 
         <!-- Hamburger mobile (lg:hidden) — toujours en dernier à droite -->
         <div class="lg:hidden relative">
@@ -232,14 +172,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="/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="/media" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/media' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">recherche-média</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>
+            <NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">Agences Inspirantes</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>
             <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>
@@ -264,31 +200,6 @@ const route = useRoute()
 const hamburgerOpen = ref(false)
 watch(() => route.path, () => { hamburgerOpen.value = false })
 
-// ── Popover "+ Proposer" ─────────────────────────────────────────────────
-const proposerOpen = ref(false)
-const proposerAnchor = ref<HTMLElement | null>(null)
-
-function onClickOutsideProposer(e: MouseEvent) {
-  // Ferme si le clic est hors de tout élément portant data-proposer-popover
-  const target = e.target as HTMLElement
-  if (!target.closest('[data-proposer-popover]')) {
-    proposerOpen.value = false
-  }
-}
-
-watch(proposerOpen, (open) => {
-  if (open) {
-    // Délai court pour ne pas attraper le clic d'ouverture lui-même
-    setTimeout(() => document.addEventListener('click', onClickOutsideProposer, true), 10)
-  } else {
-    document.removeEventListener('click', onClickOutsideProposer, true)
-  }
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', onClickOutsideProposer, true)
-})
-
 // ── Dark mode ─────────────────────────────────────────────────────────────
 const isDark = ref(false)
 
@@ -344,21 +255,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,331 +0,0 @@
-<template>
-  <div style="width: 100%; height: 100%; position: relative; background: #f5f3f0;">
-    <svg ref="svgRef" style="width: 100%; height: 100%;"></svg>
-    <div ref="tooltipRef" style="
-      position: absolute; pointer-events: none;
-      background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);
-      border-radius: 6px; padding: 8px 12px; font-size: 0.78rem;
-      color: var(--nav-text); max-width: 240px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-      opacity: 0; transition: opacity 0.15s; z-index: 100;
-    "></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface EcoleData { id: string; label: string; description: string; color: string; x_hint: number; y_hint: number }
-interface LivreRag { slug: string; titre: string; annee: number; couches: string[] }
-interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; ingere: boolean; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string; bio_courte_provisoire?: string }
-interface PenseesData { ecoles: EcoleData[]; auteurs: AuteurData[] }
-
-// Liens d'influence inter-ecoles (Phase 7 - matrice de filiation)
-const LINKS_INFLUENCE = [
-  // filiations directes
-  { source: 'eco-anarchisme', target: 'technocritique', auteurs_passerelle: ['Bookchin', 'Illich'], type: 'filiation' },
-  { source: 'eco-anarchisme', target: 'decroissance', auteurs_passerelle: ['Latouche', 'Kropotkine'], type: 'filiation' },
-  { source: 'ecosocialisme', target: 'decroissance', auteurs_passerelle: ['Saito', 'Gorz'], type: 'filiation' },
-  { source: 'ecosocialisme', target: 'ecologies-decoloniales', auteurs_passerelle: ['Klein', 'Ferdinand'], type: 'filiation' },
-  { source: 'ecofeminismes', target: 'ecologies-decoloniales', auteurs_passerelle: ['Shiva', 'Ouassak'], type: 'filiation' },
-  { source: 'ecofeminismes', target: 'pensees-vivant', auteurs_passerelle: ['Haraway', 'Despret'], type: 'filiation' },
-  { source: 'technocritique', target: 'decroissance', auteurs_passerelle: ['Ellul', 'Latouche'], type: 'filiation' },
-  { source: 'decroissance', target: 'pensees-vivant', auteurs_passerelle: ['Servigne', 'Despret'], type: 'filiation' },
-  { source: 'pensees-vivant', target: 'ethiques-environnementales', auteurs_passerelle: ['Naess', 'Latour'], type: 'filiation' },
-  { source: 'ecosocialisme', target: 'eco-anarchisme', auteurs_passerelle: ['Gorz', 'Graeber'], type: 'filiation' },
-  // liens de critique (toutes les ecoles progressistes vs cap-vert / ecofascismes)
-  { source: 'ecosocialisme', target: 'capitalisme-vert', auteurs_passerelle: ['Klein', 'Malm'], type: 'critique' },
-  { source: 'decroissance', target: 'capitalisme-vert', auteurs_passerelle: ['Latouche', 'Meadows'], type: 'critique' },
-  { source: 'eco-anarchisme', target: 'capitalisme-vert', auteurs_passerelle: ['Bookchin'], type: 'critique' },
-  { source: 'ethiques-environnementales', target: 'ecofascismes', auteurs_passerelle: ['Naess'], type: 'critique' },
-  { source: 'capitalisme-vert', target: 'ecofascismes', auteurs_passerelle: [], type: 'critique' },
-]
-
-const props = defineProps<{ data: PenseesData | null; active?: boolean }>()
-const emit = defineEmits<{ 'select-auteur': [id: string]; 'select-ecole': [id: string] }>()
-
-const svgRef = ref<SVGElement | null>(null)
-const tooltipRef = ref<HTMLElement | null>(null)
-let simulation: any = null
-let d3LinkSel: any = null
-let d3InfluenceSel: any = null
-let d3NodeSel: any = null
-let d3EdgeLabelSel: any = null
-
-async function initGraph() {
-  if (!svgRef.value || !props.data) return
-  const d3 = await import('d3')
-
-  const svgEl = svgRef.value
-  const W = svgEl.clientWidth || 900
-  const H = svgEl.clientHeight || 600
-
-  d3.select(svgEl).selectAll('*').remove()
-  const svg = d3.select(svgEl).attr('viewBox', `0 0 ${W} ${H}`)
-  const g = svg.append('g')
-
-  svg.call(d3.zoom<SVGElement, unknown>().scaleExtent([0.3, 4]).on('zoom', (e) => g.attr('transform', e.transform)) as any)
-
-  const ecoleMap = new Map<string, EcoleData>(props.data.ecoles.map(e => [e.id, e]))
-
-  // Positions fixes des ecoles (base pour forces D3)
-  const ecolePositions = new Map<string, { tx: number; ty: number }>()
-  props.data.ecoles.forEach(e => {
-    ecolePositions.set(e.id, { tx: W * e.x_hint, ty: H * e.y_hint })
-  })
-
-  // ---- LIENS D'INFLUENCE INTER-ECOLES (couche 3) ----
-  const gInfluence = g.append('g').attr('class', 'links-influence')
-
-  LINKS_INFLUENCE.forEach(link => {
-    const src = ecolePositions.get(link.source)
-    const tgt = ecolePositions.get(link.target)
-    if (!src || !tgt) return
-
-    const isCritique = link.type === 'critique'
-    const lineEl = gInfluence.append('line')
-      .attr('class', 'influence-link')
-      .attr('x1', src.tx).attr('y1', src.ty)
-      .attr('x2', tgt.tx).attr('y2', tgt.ty)
-      .attr('stroke', isCritique ? '#d99' : '#9aa')
-      .attr('stroke-width', 1)
-      .attr('stroke-dasharray', isCritique ? '4,3' : '6,4')
-      .attr('stroke-opacity', isCritique ? 0.2 : 0.22)
-
-    if (link.auteurs_passerelle && link.auteurs_passerelle.length > 0) {
-      lineEl
-        .on('mouseenter', (e: any) => {
-          if (!tooltipRef.value) return
-          tooltipRef.value.innerHTML = `<strong>Influence</strong><br><span style="opacity:0.8;font-size:0.72rem;">Passerelles : ${link.auteurs_passerelle.join(', ')}</span>`
-          tooltipRef.value.style.opacity = '1'
-        })
-        .on('mousemove', (e: any) => {
-          if (!tooltipRef.value || !svgEl) return
-          const rect = (svgEl as HTMLElement).getBoundingClientRect()
-          tooltipRef.value.style.left = (e.clientX - rect.left + 14) + 'px'
-          tooltipRef.value.style.top = (e.clientY - rect.top - 10) + 'px'
-        })
-        .on('mouseleave', () => { if (tooltipRef.value) tooltipRef.value.style.opacity = '0' })
-    }
-  })
-
-  // ---- SIMULATION D3 (auteurs) ----
-  // Pre-positionner chaque auteur pres de son ecole + jitter aleatoire pour eviter le rush initial vers la droite
-  const auteurNodes: any[] = props.data.auteurs.map(a => {
-    const ecole = ecoleMap.get(a.ecole_principale)
-    const jitter = () => (Math.random() - 0.5) * 80
-    return {
-      id: a.id, type: 'auteur', nom: a.nom, dates: a.dates,
-      bio_courte: a.bio_courte,
-      bio_provisoire: a.bio_courte_provisoire ?? '',
-      ingere: a.ingere,
-      ecole_principale: a.ecole_principale,
-      color: ecole?.color ?? '#888', r: 11,
-      x: W * (ecole?.x_hint ?? 0.5) + jitter(),
-      y: H * (ecole?.y_hint ?? 0.5) + jitter(),
-    }
-  })
-
-  // Liens appartenance auteur -> ecole (vers centroid fixe)
-  const links: any[] = []
-  props.data.auteurs.forEach(a => {
-    links.push({ source: a.id, target: a.ecole_principale, strength: 0.65, isSubcourant: false })
-    a.ecoles.filter(e => e !== a.ecole_principale).forEach(e => {
-      links.push({ source: a.id, target: e, strength: 0.25, isSubcourant: true })
-    })
-  })
-
-  // Nodes fictifs fixes pour les ecoles (cibles des liens appartenance)
-  const ecoleFixedNodes: any[] = props.data.ecoles.map(e => ({
-    id: e.id, type: 'ecole-fixed', ecoleId: e.id,
-    x: W * e.x_hint, y: H * e.y_hint,
-    fx: W * e.x_hint, fy: H * e.y_hint,
-  }))
-
-  // Rayon proportionnel au nombre d'auteurs de l'ecole
-  const ecoleAuteurCounts = new Map<string, number>()
-  props.data.ecoles.forEach(e => ecoleAuteurCounts.set(e.id, 0))
-  props.data.auteurs.forEach(a => ecoleAuteurCounts.set(a.ecole_principale, (ecoleAuteurCounts.get(a.ecole_principale) ?? 0) + 1))
-  const ecoleRadius = (count: number) => Math.max(16, Math.min(36, 13 + count * 1.5))
-
-  const allNodes = [...ecoleFixedNodes, ...auteurNodes]
-
-  if (simulation) simulation.stop()
-  // Phase 8.D : sim ajustee pour 171 auteurs (vs 28 v2.1, densite 6x)
-  simulation = d3.forceSimulation(allNodes)
-    .force('link', d3.forceLink(links).id((d: any) => d.id).distance(120).strength((d: any) => d.strength ?? 0.5))
-    .force('charge', d3.forceManyBody().strength(-70))
-    .force('center', d3.forceCenter(W / 2, H / 2).strength(0.02))
-    .force('collision', d3.forceCollide().radius((d: any) => d.type === 'ecole-fixed' ? ecoleRadius(ecoleAuteurCounts.get(d.ecoleId) ?? 0) + 4 : 12))
-    .force('forceX', d3.forceX<any>((d: any) => {
-      if (d.type === 'auteur') {
-        const pos = ecolePositions.get(d.ecole_principale)
-        return pos ? pos.tx : W / 2
-      }
-      return W / 2
-    }).strength(0.15))
-    .force('forceY', d3.forceY<any>((d: any) => {
-      if (d.type === 'auteur') {
-        const pos = ecolePositions.get(d.ecole_principale)
-        return pos ? pos.ty : H / 2
-      }
-      return H / 2
-    }).strength(0.15))
-
-  // ---- NOEUDS ECOLES visibles (couche 3.5) ----
-  // Cercles proportionnels au count d'auteurs, fixes aux centroids Bonpote, cliquables
-  const gEcoles = g.append('g').attr('class', 'ecoles-nodes')
-  ecoleFixedNodes.forEach(eNode => {
-    const ecole = ecoleMap.get(eNode.ecoleId)
-    if (!ecole) return
-    const count = ecoleAuteurCounts.get(eNode.ecoleId) ?? 0
-    const r = ecoleRadius(count)
-    gEcoles.append('circle')
-      .attr('cx', eNode.fx).attr('cy', eNode.fy).attr('r', r)
-      .attr('fill', ecole.color).attr('fill-opacity', 0.82).attr('stroke', ecole.color).attr('stroke-width', 2)
-      .attr('class', 'ecole-node').style('cursor', 'pointer')
-      .on('mouseenter', (e: any) => {
-        if (!tooltipRef.value) return
-        tooltipRef.value.innerHTML = `<strong>${ecole.label}</strong> <span style="opacity:0.6;font-size:0.7rem;">${count} auteur${count > 1 ? 's' : ''}</span><br><span style="opacity:0.75;font-size:0.72rem;">${ecole.description}</span>`
-        tooltipRef.value.style.opacity = '1'
-      })
-      .on('mousemove', (e: any) => {
-        if (!tooltipRef.value || !svgEl) return
-        const rect = (svgEl as HTMLElement).getBoundingClientRect()
-        tooltipRef.value.style.left = (e.clientX - rect.left + 14) + 'px'
-        tooltipRef.value.style.top = (e.clientY - rect.top - 10) + 'px'
-      })
-      .on('mouseleave', () => { if (tooltipRef.value) tooltipRef.value.style.opacity = '0' })
-      .on('click', (e: any) => { e.stopPropagation(); emit('select-ecole', eNode.ecoleId) })
-  })
-
-  // ---- LIENS APPARTENANCE (couche 4) ----
-  const gLinks = g.append('g').attr('class', 'links-appartenance')
-  d3LinkSel = gLinks.selectAll('line').data(links).join('line')
-    .attr('stroke', 'rgba(150,150,150,0.28)').attr('stroke-width', 1.2)
-
-  // ---- EDGE LABELS - sous-courants (couche 4b) ----
-  // Afficher label "decroissance" sur lien Servigne (sous-courant specifique - option C)
-  const subcourantLinks = links.filter((l: any) => l.isSubcourant)
-  d3EdgeLabelSel = gLinks.selectAll('text.pensees-edge-label')
-    .data(subcourantLinks)
-    .join('text')
-    .attr('class', 'pensees-edge-label')
-
-  // ---- NODES AUTEURS (couche 5) ----
-  const gAuteurs = g.append('g').attr('class', 'auteurs')
-  d3NodeSel = gAuteurs.selectAll('g').data(auteurNodes).join('g')
-    .style('cursor', (d: any) => d.ingere ? 'pointer' : 'default')
-    .call(d3.drag<any, any>()
-      .on('start', (e: any, d: any) => { if (!e.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y })
-      .on('drag', (e: any, d: any) => { d.fx = e.x; d.fy = e.y })
-      .on('end', (e: any, d: any) => { if (!e.active) simulation.alphaTarget(0); d.fx = null; d.fy = null }))
-    .on('click', (e: any, d: any) => {
-      if (!d.ingere) return
-      e.stopPropagation()
-      emit('select-auteur', d.id)
-    })
-
-  // Phase 8.D : grisage conditionnel auteurs non-ingeres (ingere:false)
-  d3NodeSel.append('circle')
-    .attr('r', (d: any) => d.r)
-    .attr('fill', (d: any) => d.ingere ? (d.color + 'cc') : '#bbbbbb')
-    .attr('stroke', (d: any) => d.ingere ? d.color : '#999999')
-    .attr('stroke-width', 1.5)
-    .attr('opacity', (d: any) => d.ingere ? 1 : 0.35)
-
-  // ---- LABELS AUTEURS (couche 6 - fix 7.1 : drop-shadow blanc) ----
-  d3NodeSel.append('text')
-    .attr('class', 'pensees-auteur-label')
-    .text((d: any) => d.nom.split(' ').pop() ?? d.nom)
-    .attr('text-anchor', 'middle')
-    .attr('dy', (d: any) => -(d.r + 4))
-    .style('pointer-events', 'none')
-    .style('opacity', (d: any) => d.ingere ? 1 : 0.3)
-    .style('fill', (d: any) => d.ingere ? '#1a1a1a' : '#777777')
-
-  d3NodeSel
-    .on('mouseenter', (e: any, d: any) => {
-      if (!tooltipRef.value) return
-      let tooltipHtml = ''
-      if (d.ingere) {
-        const rawBio = d.bio_courte || ''
-        const bio = rawBio.length > 90 ? rawBio.slice(0, 87) + '...' : rawBio
-        tooltipHtml = `<strong>${d.nom}</strong> <span style="opacity:0.6;font-size:0.7rem;">${d.dates}</span><br><span style="opacity:0.75;font-size:0.72rem;">${bio || 'Dans le RAG ATIS.'}</span>`
-      } else {
-        tooltipHtml = `<strong>${d.nom}</strong> <span style="opacity:0.6;font-size:0.7rem;">${d.dates}</span><br><span style="opacity:0.65;font-size:0.72rem;font-style:italic;">Présent dans Bonpote, pas encore ingéré dans le RAG ATIS.</span>`
-      }
-      tooltipRef.value.innerHTML = tooltipHtml
-      tooltipRef.value.style.opacity = '1'
-    })
-    .on('mousemove', (e: any) => {
-      if (!tooltipRef.value || !svgEl) return
-      const rect = (svgEl as HTMLElement).getBoundingClientRect()
-      tooltipRef.value.style.left = (e.clientX - rect.left + 14) + 'px'
-      tooltipRef.value.style.top = (e.clientY - rect.top - 10) + 'px'
-    })
-    .on('mouseleave', () => { if (tooltipRef.value) tooltipRef.value.style.opacity = '0' })
-
-  simulation.on('tick', () => {
-    d3LinkSel
-      .attr('x1', (d: any) => d.source.x).attr('y1', (d: any) => d.source.y)
-      .attr('x2', (d: any) => d.target.x).attr('y2', (d: any) => d.target.y)
-
-    // Edge labels positions (milieu du lien)
-    d3EdgeLabelSel
-      .attr('x', (d: any) => (d.source.x + d.target.x) / 2)
-      .attr('y', (d: any) => (d.source.y + d.target.y) / 2)
-      .text((d: any) => {
-        const targetId = typeof d.target === 'object' ? d.target.id : d.target
-        return targetId
-      })
-
-    d3NodeSel.attr('transform', (d: any) => `translate(${d.x},${d.y})`)
-  })
-}
-
-watch(() => props.active, (val) => { if (val && import.meta.client && props.data) requestAnimationFrame(() => requestAnimationFrame(() => initGraph())) })
-watch(() => props.data, (val) => { if (val && props.active && import.meta.client) requestAnimationFrame(() => requestAnimationFrame(() => initGraph())) })
-onMounted(async () => { if (import.meta.client && props.data && props.active) { await nextTick(); initGraph() } })
-onUnmounted(() => { if (simulation) simulation.stop() })
-
-function triggerResize() {
-  if (simulation) {
-    simulation.alpha(0.3).restart()
-  } else if (import.meta.client && props.data && props.active) {
-    initGraph()
-  }
-}
-defineExpose({ triggerResize })
-</script>
-
-<style>
-/* ---- Labels auteurs : fix 7.1 drop-shadow blanc pour lisibilite sur pastel ---- */
-.pensees-auteur-label {
-  fill: #1a1a1a;
-  font-weight: 600;
-  font-size: 10px;
-  filter: drop-shadow(0 0 2.5px rgba(255,255,255,0.95));
-  user-select: none;
-}
-
-/* ---- Labels edge sous-courants (option C : seulement les liens secondaires) ---- */
-.pensees-edge-label {
-  fill: #555;
-  font-size: 8.5px;
-  font-style: italic;
-  opacity: 0.7;
-  text-anchor: middle;
-  dominant-baseline: middle;
-  user-select: none;
-  pointer-events: none;
-}
-
-/* ---- Voronoi cellules : non-blurre Phase 8.F (revert Phase 8.D) ---- */
-/* Blur retire ; les cellules colorees Bonpote-aligned suffisent visuellement. */
-
-.ecole-node {
-  transition: opacity 0.15s, r 0.15s;
-}
-.ecole-node:hover {
-  opacity: 0.75;
-}
-
-</style>

components/ChatbotPensees.vue

@@ -1,446 +0,0 @@
-<template>
-  <!-- Mode overlay : bouton flottant bottom-right (legacy) -->
-  <template v-if="!inline">
-    <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">
-
-        <!-- Header overlay -->
-        <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>
-          </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>
-
-        <!-- Corpus toggle overlay -->
-        <div class="shrink-0 px-3 pt-2 pb-1" style="background:var(--nav-bg);border-bottom:1px solid var(--nav-bg-alt);">
-          <div class="flex gap-1" role="group" aria-label="Choisir le corpus">
-            <button v-for="opt in corpusOptions" :key="opt.value" @click="setCorpus(opt.value)" :title="opt.tooltip"
-              class="flex-1 px-2 py-1 rounded text-xs font-medium transition-colors"
-              :style="corpus === opt.value ? 'background:var(--nav-primary);color:var(--nav-text-on-primary);' : 'background:var(--nav-bg-alt);color:var(--nav-text-muted);'"
-              :aria-pressed="corpus === opt.value">{{ opt.label }}</button>
-          </div>
-        </div>
-
-        <!-- Messages overlay -->
-        <div ref="msgElOverlay" 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;">
-            <template v-if="corpus === 'pensees'">Pose une question sur les pensees ecologiques...</template>
-            <template v-else-if="corpus === 'projets'">Pose une question sur les projets d'architecture de Jules...</template>
-            <template v-else>Pose une question sur les pensees ecologiques ancrees dans les projets archi de Jules.</template>
-          </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="filteredSources(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 ({{ filteredSources(msg.content).length }})
-                </button>
-                <div v-if="toggled[i]" class="mt-1 flex flex-col gap-1">
-                  <div v-for="(s, si) in filteredSources(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>
-
-        <!-- Input overlay -->
-        <div class="shrink-0 px-3 py-3" style="border-top:1px solid var(--nav-bg-alt);">
-          <div class="flex items-center gap-2" style="position:relative;">
-            <!-- Hashtag autocomplete dropdown (Slack/Discord pattern, au-dessus de l'input) -->
-            <div v-if="hashtagDropdownOpen && hashtagSuggestions.length"
-              class="hashtag-dropdown"
-              style="position:absolute;bottom:100%;left:0;right:0;margin-bottom:6px;max-height:220px;overflow-y:auto;background:var(--nav-surface);border:1px solid var(--nav-bg-alt);border-radius:8px;box-shadow:0 -4px 12px rgba(0,0,0,0.12);z-index:50;">
-              <div v-for="(auteur, idx) in hashtagSuggestions" :key="auteur.id"
-                @mousedown.prevent="applyHashtagSuggestion(auteur)"
-                @mouseenter="hashtagSelectedIndex = idx"
-                class="px-3 py-2 cursor-pointer text-sm"
-                :style="idx === hashtagSelectedIndex ? 'background:var(--nav-primary);color:var(--nav-text-on-primary);' : 'color:var(--nav-text);'">
-                <span style="font-weight:600;">#{{ auteur.id }}</span>
-                <span :style="idx === hashtagSelectedIndex ? 'opacity:0.85;margin-left:8px;font-size:0.78rem;' : 'opacity:0.65;margin-left:8px;font-size:0.78rem;color:var(--nav-text-muted);'">{{ auteur.nom }}</span>
-              </div>
-            </div>
-            <input ref="inputElOverlay" v-model="q" type="text" placeholder="Ta question, tape #auteur pour cibler" 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="onInputKeydown" />
-            <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>
-
-  <!-- Mode inline : remplit 100% de son parent slot -->
-  <div v-else
-    class="flex flex-col w-full h-full"
-    style="background:var(--nav-surface);overflow:hidden;"
-    role="region" aria-label="RAG Pensees Ecologiques">
-
-    <!-- Header inline -->
-    <div class="flex items-center justify-between px-4 py-2 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>
-      </div>
-    </div>
-
-    <!-- Corpus toggle inline -->
-    <div class="shrink-0 px-3 pt-2 pb-1" style="background:var(--nav-bg);border-bottom:1px solid var(--nav-bg-alt);">
-      <div class="flex gap-1" role="group" aria-label="Choisir le corpus">
-        <button v-for="opt in corpusOptions" :key="opt.value" @click="setCorpus(opt.value)" :title="opt.tooltip"
-          class="flex-1 px-2 py-1 rounded text-xs font-medium transition-colors"
-          :style="corpus === opt.value ? 'background:var(--nav-primary);color:var(--nav-text-on-primary);' : 'background:var(--nav-bg-alt);color:var(--nav-text-muted);'"
-          :aria-pressed="corpus === opt.value">{{ opt.label }}</button>
-      </div>
-    </div>
-
-    <!-- Messages inline -->
-    <div ref="msgElInline" 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;">
-        <template v-if="corpus === 'pensees'">Pose une question sur les pensees ecologiques : ecosocialisme, decroissance, ecofeminismes, technocritique, deep ecology...</template>
-        <template v-else-if="corpus === 'projets'">Pose une question sur les projets d'architecture de Jules : Butte Pinson, strategie thermique, partis pris constructifs...</template>
-        <template v-else>Pose une question sur les pensees ecologiques ancrees dans les projets archi de Jules (corpus croise, defaut).</template>
-      </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="filteredSources(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 ({{ filteredSources(msg.content).length }})
-            </button>
-            <div v-if="toggled[i]" class="mt-1 flex flex-col gap-1">
-              <div v-for="(s, si) in filteredSources(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>
-
-    <!-- Input inline -->
-    <div class="shrink-0 px-3 py-3" style="border-top:1px solid var(--nav-bg-alt);">
-      <div class="flex items-center gap-2" style="position:relative;">
-        <!-- Hashtag autocomplete dropdown (Slack/Discord pattern, au-dessus de l'input) -->
-        <div v-if="hashtagDropdownOpen && hashtagSuggestions.length"
-          class="hashtag-dropdown"
-          style="position:absolute;bottom:100%;left:0;right:0;margin-bottom:6px;max-height:220px;overflow-y:auto;background:var(--nav-surface);border:1px solid var(--nav-bg-alt);border-radius:8px;box-shadow:0 -4px 12px rgba(0,0,0,0.12);z-index:50;">
-          <div v-for="(auteur, idx) in hashtagSuggestions" :key="auteur.id"
-            @mousedown.prevent="applyHashtagSuggestion(auteur)"
-            @mouseenter="hashtagSelectedIndex = idx"
-            class="px-3 py-2 cursor-pointer text-sm"
-            :style="idx === hashtagSelectedIndex ? 'background:var(--nav-primary);color:var(--nav-text-on-primary);' : 'color:var(--nav-text);'">
-            <span style="font-weight:600;">#{{ auteur.id }}</span>
-            <span :style="idx === hashtagSelectedIndex ? 'opacity:0.85;margin-left:8px;font-size:0.78rem;' : 'opacity:0.65;margin-left:8px;font-size:0.78rem;color:var(--nav-text-muted);'">{{ auteur.nom }}</span>
-          </div>
-        </div>
-        <input ref="inputElInline" v-model="q" type="text" placeholder="Ta question, tape #auteur pour cibler" 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="onInputKeydown" />
-        <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>
-</template>
-
-<script setup lang="ts">
-interface Message { role: 'user' | 'assistant'; content: string }
-interface AuteurMini { id: string; nom: string }
-
-type CorpusMode = 'pensees' | 'projets' | 'both'
-
-const CORPUS_STORAGE_KEY = 'chatbot-pensees-corpus'
-
-const PROJECT_SOURCE_PATTERNS = [/butte.?pinson/i, /butte_pinson/i]
-
-function isProjectSource(s: string): boolean {
-  return PROJECT_SOURCE_PATTERNS.some(p => p.test(s))
-}
-
-const corpusOptions: { value: CorpusMode; label: string; tooltip: string }[] = [
-  { value: 'pensees', label: 'Pensees', tooltip: 'Corpus FRACAS uniquement (auteurs ecologie politique)' },
-  { value: 'projets', label: 'Projets', tooltip: 'Projets archi de Jules uniquement' },
-  { value: 'both',    label: 'Croise*', tooltip: 'Projets ancres + pensees en eclairage (defaut)' },
-]
-
-const props = defineProps<{
-  auteurContext?: string | null
-  inline?: boolean
-}>()
-
-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 msgElOverlay = ref<HTMLElement | null>(null)
-const msgElInline = ref<HTMLElement | null>(null)
-const inputElOverlay = ref<HTMLInputElement | null>(null)
-const inputElInline = ref<HTMLInputElement | null>(null)
-const corpusCount = 18
-
-const corpus = ref<CorpusMode>('pensees')
-
-// Phase 8.E : hashtag mentions
-const auteursIngeres = ref<AuteurMini[]>([])
-const hashtagSuggestions = ref<AuteurMini[]>([])
-const hashtagDropdownOpen = ref(false)
-const hashtagSelectedIndex = ref(0)
-
-function getActiveInput(): HTMLInputElement | null {
-  return props.inline ? inputElInline.value : inputElOverlay.value
-}
-
-function detectHashtagAtCursor(input: string, cursorPos: number): { start: number; partial: string } | null {
-  const before = input.slice(0, cursorPos)
-  const m = before.match(/#([a-z0-9-]*)$/i)
-  if (!m) return null
-  return { start: m.index ?? 0, partial: (m[1] || '').toLowerCase() }
-}
-
-function updateHashtagSuggestions() {
-  const el = getActiveInput()
-  const cursorPos = el?.selectionStart ?? q.value.length
-  const detection = detectHashtagAtCursor(q.value, cursorPos)
-  // Ouvrir dès que le # est présent (partial vide accepté pour afficher la liste)
-  if (!detection) {
-    hashtagDropdownOpen.value = false
-    return
-  }
-  const partial = detection.partial
-  const list = partial.length === 0
-    ? auteursIngeres.value.slice(0, 8)
-    : auteursIngeres.value
-        .filter(a => a.id.toLowerCase().includes(partial) || a.nom.toLowerCase().includes(partial))
-        .slice(0, 8)
-  hashtagSuggestions.value = list
-  hashtagDropdownOpen.value = list.length > 0
-  hashtagSelectedIndex.value = 0
-}
-
-function applyHashtagSuggestion(auteur: AuteurMini) {
-  const el = getActiveInput()
-  const cursorPos = el?.selectionStart ?? q.value.length
-  const detection = detectHashtagAtCursor(q.value, cursorPos)
-  if (!detection) return
-  const before = q.value.slice(0, detection.start)
-  const after = q.value.slice(cursorPos)
-  const insert = '#' + auteur.id + ' '
-  q.value = before + insert + after
-  hashtagDropdownOpen.value = false
-  nextTick(() => {
-    const focusEl = getActiveInput()
-    if (!focusEl) return
-    focusEl.focus()
-    const newPos = before.length + insert.length
-    focusEl.setSelectionRange(newPos, newPos)
-  })
-}
-
-function onInputKeydown(e: KeyboardEvent) {
-  if (hashtagDropdownOpen.value && hashtagSuggestions.value.length > 0) {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      hashtagSelectedIndex.value = (hashtagSelectedIndex.value + 1) % hashtagSuggestions.value.length
-      return
-    }
-    if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      hashtagSelectedIndex.value = (hashtagSelectedIndex.value - 1 + hashtagSuggestions.value.length) % hashtagSuggestions.value.length
-      return
-    }
-    if (e.key === 'Enter' || e.key === 'Tab') {
-      e.preventDefault()
-      applyHashtagSuggestion(hashtagSuggestions.value[hashtagSelectedIndex.value])
-      return
-    }
-    if (e.key === 'Escape') {
-      e.preventDefault()
-      hashtagDropdownOpen.value = false
-      return
-    }
-  }
-  if (e.key === 'Enter') {
-    e.preventDefault()
-    send()
-  }
-}
-
-watch(q, () => {
-  updateHashtagSuggestions()
-})
-
-onMounted(async () => {
-  const saved = window.localStorage.getItem(CORPUS_STORAGE_KEY) as CorpusMode | null
-  if (saved && ['pensees', 'projets', 'both'].includes(saved)) {
-    corpus.value = saved
-  }
-  // Chargement liste auteurs ingérés pour autocomplete hashtag
-  try {
-    const data = await $fetch<any>('/data/auteurs-pensees.json')
-    auteursIngeres.value = (data?.auteurs ?? [])
-      .filter((a: any) => a.ingere === true)
-      .map((a: any) => ({ id: String(a.id), nom: String(a.nom) }))
-  } catch (e) {
-    console.error('Erreur chargement auteurs-pensees.json pour hashtag', e)
-  }
-})
-
-function setCorpus(val: CorpusMode) {
-  corpus.value = val
-  window.localStorage.setItem(CORPUS_STORAGE_KEY, val)
-}
-
-watch(open, (val) => {
-  if (!val) return
-  nextTick(() => inputElOverlay.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 (!props.inline && !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
-
-  // Extraire le premier hashtag matchant un auteur ingéré
-  let auteurSlug: string | null = null
-  const matches = [...query.matchAll(/#([a-z0-9-]+)/gi)]
-  for (const m of matches) {
-    const slug = m[1].toLowerCase()
-    if (auteursIngeres.value.find(a => a.id === slug)) {
-      auteurSlug = slug
-      break
-    }
-  }
-  // Premier hashtag non-matché (pour info utilisateur si jamais ne match aucun)
-  let auteurSlugUnmatched: string | null = null
-  if (!auteurSlug && matches.length > 0) {
-    auteurSlugUnmatched = matches[0][1].toLowerCase()
-  }
-
-  err.value = ''
-  messages.value.push({ role: 'user', content: query })
-  q.value = ''
-  hashtagDropdownOpen.value = false
-  loading.value = true
-  await nextTick()
-  scrollBottom()
-  try {
-    const res = await $fetch<any>('/api/chatbot-pensees', {
-      method: 'POST',
-      body: {
-        query,
-        mode: 'hybrid',
-        corpus: corpus.value,
-        auteur_slug: auteurSlug ?? auteurSlugUnmatched,
-      },
-    })
-    let responseText = res.response ?? ''
-    if (res.auteur_unmatched) {
-      responseText = `*(Aucun livre de #${res.auteur_unmatched} n'est ingéré dans le RAG. Je réponds depuis la carte entière.)*\n\n` + responseText
-    }
-    messages.value.push({ role: 'assistant', content: responseText })
-  } 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() {
-  const el = props.inline ? msgElInline.value : msgElOverlay.value
-  if (el) el.scrollTop = el.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]))]
-}
-
-function filteredSources(t: string): string[] {
-  const all = parseSrc(t)
-  if (corpus.value === 'both') return all
-  if (corpus.value === 'projets') return all.filter(s => isProjectSource(s))
-  return all.filter(s => !isProjectSource(s))
-}
-</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/ChatbotPlaceholder.vue

@@ -52,10 +52,9 @@
       <div class="chatbot-body-inner" ref="messagesContainer">
         <!-- Onboarding -->
         <div v-if="messages.length === 0" class="onboarding-bubble">
-          <p>Je connais les structures d'entraide pour architectes référencées sur cette carte — appui juridique, technique, économique, formation, santé mentale, gestion d'agence…</p>
-          <p>Décris ta situation, je te propose les fiches les plus pertinentes.</p>
-          <p class="example">Exemple : "Architecte salarié, litige avec mon employeur, besoin d'un appui juridique droit du travail, Île-de-France."</p>
-          <p style="margin-top: 8px; font-size: 0.72rem; opacity: 0.6;">Propulsé par Mistral FR — serveur européen souverain, zéro rétention.</p>
+          <p>Explore les 120 structures de la carte par la conversation. Je peux t'aider à trouver des collectifs, agences ou réseaux selon ta situation, ta pratique ou tes inspirations du moment.</p>
+          <p class="example">Exemple : "Je cherche des acteurs de la rénovation de maisons individuelles en France, plutôt en milieu rural, avec des approches biosourcées ou low-tech."</p>
+          <p style="margin-top: 8px; font-size: 0.72rem; opacity: 0.6;">Propulsé par Mistral FR - serveur européen souverain, zéro rétention.</p>
         </div>
 
         <!-- Messages -->

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>Pour m'aider à te répondre efficacement, formule ta requête ainsi :</p>
+            <p>Ce chatbot fonctionne sur un serveur européen souverain
+(Mistral FR, zéro rétention), conçu sobre en énergie.</p>
+            <p>Pour m'aider à te répondre efficacement,
+formule ta requête ainsi :</p>
             <ul>
               <li>• Besoin : [ce que tu cherches]</li>
               <li>• Thématique : [juridique / technique / économique / ...]</li>
               <li>• Lieu : [région ou ville]</li>
             </ul>
-            <p class="example">Exemple : "Je suis salarié d'agence, litige avec mon employeur, besoin conseil juridique droit du travail, Île-de-France."</p>
+            <p class="example">Exemple : "Je suis salarié d'agence, litige avec mon
+employeur, besoin conseil juridique droit du travail,
+Île-de-France."</p>
           </div>
 
           <!-- Messages -->
@@ -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; }
-
-/* 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; }
+.assistant-bubble p { margin: 0; }
 
 /* Fiches recommandées */
 .fiches-list {

components/EchelleFilter.vue

@@ -1,16 +1,38 @@
 <template>
-  <div class="space-y-1">
-    <p class="filter-label">ÉCHELLE</p>
-    <div class="chips-row">
-      <span
+  <div class="space-y-1.5">
+    <p class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">Échelle</p>
+    <!-- Inline sur 1 ligne — même pattern que FonctionFilter -->
+    <div class="flex flex-wrap gap-x-4 gap-y-1.5">
+      <label
         v-for="option in ECHELLES"
         :key="option"
-        class="chip"
-        :style="isSelected(option)
-          ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
-          : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
-        @click="toggle(option)"
-      >{{ option }}</span>
+        class="flex items-center gap-1.5 cursor-pointer select-none transition-opacity"
+      >
+        <!-- Case carrée -->
+        <span
+          class="flex items-center justify-center shrink-0 transition-all"
+          style="width: 18px; height: 18px; border: 1.5px solid; border-radius: 3px;"
+          :style="isSelected(option)
+            ? 'background: var(--nav-primary); border-color: var(--nav-primary); color: #ffffff;'
+            : 'background: var(--nav-bg-alt); border-color: rgba(26,34,56,0.25); color: transparent;'"
+        >
+          <svg v-if="isSelected(option)" width="11" height="11" viewBox="0 0 12 12" fill="none">
+            <polyline points="2,6 5,9 10,3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </span>
+        <!-- Label -->
+        <span
+          class="text-sm leading-tight"
+          :style="isSelected(option) ? 'color: var(--nav-text); font-weight: 600;' : 'color: var(--nav-text);'"
+        >{{ option }}</span>
+        <!-- Input réel (masqué) -->
+        <input
+          type="checkbox"
+          class="sr-only"
+          :checked="isSelected(option)"
+          @change="toggle(option)"
+        />
+      </label>
     </div>
   </div>
 </template>
@@ -39,24 +61,3 @@ function toggle(option: string) {
   }
 }
 </script>
-
-<style scoped>
-.filter-label {
-  font-size: 0.7rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: var(--nav-text-muted);
-  display: block;
-  margin-bottom: 4px;
-  text-transform: uppercase;
-}
-.chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
-.chip {
-  cursor: pointer;
-  padding: 3px 10px;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  transition: all 0.15s;
-  user-select: none;
-}
-</style>

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/FicheEcole.vue

@@ -1,101 +0,0 @@
-<template>
-  <Teleport to="body">
-    <Transition name="backdrop">
-      <div v-if="open && ecole" 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 && ecole" class="fixed z-[1501] left-1/2 flex flex-col"
-        style="top:50%;transform:translate(-50%,-50%);width:min(540px,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 ${ecole.color}; background: var(--nav-surface);`">
-          <div class="flex-1 min-w-0">
-            <span class="px-2 py-0.5 rounded-full text-xs font-semibold" :style="`background:${ecole.color}22;color:${ecole.color};`">Ecole de pensee</span>
-            <h2 class="mt-2 font-bold text-lg leading-tight" style="color:var(--nav-text);">{{ ecole.label }}</h2>
-            <p class="text-sm mt-1 leading-relaxed" style="color:var(--nav-text-muted);">{{ ecole.description }}</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">
-          <div v-if="auteursIngeres.length">
-            <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:var(--nav-text-muted);">Dans le RAG ({{ auteursIngeres.length }})</p>
-            <div class="flex flex-wrap gap-2">
-              <button v-for="a in auteursIngeres" :key="a.id"
-                class="px-2.5 py-1 rounded-full text-xs font-medium hover:opacity-80 transition-opacity"
-                :style="`background:${ecole.color}22;color:${ecole.color};border:1px solid ${ecole.color}44;cursor:pointer;`"
-                @click="onSelectAuteur(a.id)">
-                {{ a.nom }}
-              </button>
-            </div>
-          </div>
-          <div v-if="auteursNonIngeres.length">
-            <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:var(--nav-text-muted);">Presents dans Bonpote, pas encore dans le RAG ({{ auteursNonIngeres.length }})</p>
-            <div class="flex flex-wrap gap-2">
-              <span v-for="a in auteursNonIngeres" :key="a.id"
-                class="px-2.5 py-1 rounded-full text-xs"
-                style="background:var(--nav-bg-alt);color:var(--nav-text-muted);">
-                {{ a.nom }}
-              </span>
-            </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-ecole', ecoleId!)" class="w-full py-2.5 rounded-lg text-sm font-semibold hover:opacity-80"
-            :style="`background:${ecole.color};color:white;`">
-            Interroger le RAG sur {{ ecole.label }}
-          </button>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-interface AuteurData { id: string; nom: string; ecoles: string[]; ecole_principale: string; ingere: boolean }
-interface EcoleData { id: string; label: string; description: string; color: string }
-interface PenseesData { ecoles: EcoleData[]; auteurs: AuteurData[] }
-
-const props = defineProps<{ open: boolean; ecoleId: string | null; data: PenseesData | null }>()
-const emit = defineEmits<{ close: []; 'select-auteur': [auteurId: string]; 'interroger-ecole': [ecoleId: string] }>()
-
-const ecole = computed<EcoleData | null>(() => {
-  if (!props.ecoleId || !props.data) return null
-  return props.data.ecoles.find(e => e.id === props.ecoleId) ?? null
-})
-
-const auteursIngeres = computed(() => {
-  if (!props.ecoleId || !props.data) return []
-  return props.data.auteurs.filter(a => a.ecole_principale === props.ecoleId && (a as any).ingere)
-})
-
-const auteursNonIngeres = computed(() => {
-  if (!props.ecoleId || !props.data) return []
-  return props.data.auteurs.filter(a => a.ecole_principale === props.ecoleId && !(a as any).ingere)
-})
-
-function onSelectAuteur(id: string) {
-  emit('close')
-  emit('select-auteur', 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/FonctionFilter.vue

@@ -1,33 +1,35 @@
 <template>
-  <div class="space-y-1">
-    <!-- Label + toggle collapse -->
-    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;">
-      <p class="filter-label" style="margin-bottom: 0;">
-        FONCTION
-        <span v-if="modelValue.length" style="font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.65rem; margin-left: 4px;">({{ modelValue.length }} active{{ modelValue.length > 1 ? 's' : '' }})</span>
-      </p>
+  <div class="space-y-1.5">
+    <p class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">Fonction</p>
+    <div class="space-y-1">
       <button
-        @click="toggleCollapse"
-        style="font-size: 0.7rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; white-space: nowrap;"
-      >{{ isOpen ? 'Replier' : 'Fonctions (' + FONCTIONS.length + ')' }}</button>
-    </div>
-
-    <!-- Chips (visible si ouvert ou si des fonctions sont actives) -->
-    <div v-if="isOpen" class="chips-row">
-      <span
         v-for="fn in FONCTIONS"
         :key="fn"
-        class="chip"
-        :style="modelValue.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="toggle(fn)"
-      >{{ fn }}</span>
+        :aria-pressed="modelValue.includes(fn)"
+        class="flex items-center gap-2.5 w-full rounded px-1 py-0.5 transition-all text-left hover:opacity-80"
+        :style="modelValue.includes(fn) ? 'background: rgba(26,34,56,0.06);' : ''"
+      >
+        <!-- Case : affiche le rang de priorité si actif, sinon le nombre d'orgs -->
+        <span
+          class="flex items-center justify-center shrink-0 text-xs font-bold transition-all"
+          style="width: 24px; height: 24px; border: 1.5px solid; border-radius: 4px;"
+          :style="modelValue.includes(fn)
+            ? 'background: var(--nav-primary); border-color: var(--nav-primary); color: var(--nav-text-on-primary);'
+            : 'background: var(--nav-bg-alt); border-color: var(--nav-bg-alt); color: var(--nav-text-muted);'"
+        >
+          {{ modelValue.includes(fn) ? (modelValue.indexOf(fn) + 1) : (counts[fn] ?? 0) }}
+        </span>
+        <!-- Label -->
+        <span
+          class="text-sm leading-tight"
+          :style="modelValue.includes(fn) ? 'color: var(--nav-text); font-weight: 600;' : 'color: var(--nav-text);'"
+        >{{ fn }}</span>
+      </button>
     </div>
-
-    <!-- Effacer (visible même replié si filtres actifs) -->
     <p v-if="modelValue.length" class="text-xs pt-0.5" style="color: var(--nav-text-muted);">
-      <button @click="emit('update:modelValue', [])" class="underline hover:opacity-70">Effacer</button>
+      {{ modelValue.length }} actif{{ modelValue.length > 1 ? 's' : '' }}
+      <button @click="emit('update:modelValue', [])" class="ml-2 underline hover:opacity-70">Effacer</button>
     </p>
   </div>
 </template>
@@ -55,25 +57,6 @@ const emit = defineEmits<{
   'update:modelValue': [value: string[]]
 }>()
 
-// Replié par défaut, ouvre automatiquement quand des filtres sont actifs
-const manuallyOpen = ref(false)
-
-const isOpen = computed(() => {
-  return manuallyOpen.value || props.modelValue.length > 0
-})
-
-function toggleCollapse() {
-  // Si des filtres actifs forcent l'ouverture, on doit gérer le cas « forcer fermer »
-  if (isOpen.value) {
-    manuallyOpen.value = false
-    // Si des fonctions sont actives, le computed va les réouvrir — on les efface
-    // Non : on laisse le choix à l'utilisateur. On toggle juste manuallyOpen.
-    // Quand replié avec filtres actifs, l'indicateur "(N actives)" reste visible.
-  } else {
-    manuallyOpen.value = true
-  }
-}
-
 function toggle(fn: string) {
   if (props.modelValue.includes(fn)) {
     emit('update:modelValue', props.modelValue.filter(f => f !== fn))
@@ -82,23 +65,3 @@ function toggle(fn: string) {
   }
 }
 </script>
-
-<style scoped>
-.filter-label {
-  font-size: 0.7rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: var(--nav-text-muted);
-  display: block;
-  text-transform: uppercase;
-}
-.chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
-.chip {
-  cursor: pointer;
-  padding: 3px 10px;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  transition: all 0.15s;
-  user-select: none;
-}
-</style>

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,16 +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);
-  opacity: 0.7;
-  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()
-    })
-  })
+  initMap()
 
   // Observer les changements de classe dark sur <html>
   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"
-              style="background: var(--nav-bg-alt); color: var(--nav-text-muted); border: 1px solid var(--nav-bg-alt); letter-spacing: 0.01em;"
+              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-0.5 text-xs" style="color: var(--nav-text-muted);">

components/PlatformeTaffCard.vue

@@ -1,26 +1,41 @@
 <template>
   <button
     type="button"
-    class="taff-card"
-    :style="`border-left-color: ${tagConfig.accent};`"
+    class="w-full text-left rounded-xl border transition-all duration-200 hover:shadow-md focus-visible:outline-none"
+    :style="`
+      background: var(--nav-surface);
+      border-color: ${tagBorderColor};
+      border-left: 4px solid ${tagAccentColor};
+    `"
     @click="$emit('open', plateforme)"
   >
-    <!-- Ligne 1 : tag + badge AO + lien -->
-    <div class="taff-card-top">
-      <div class="flex items-center gap-2 flex-wrap">
-        <span class="taff-tag" :style="`background: ${tagConfig.bg}; color: ${tagConfig.text};`">
-          {{ tagConfig.emoji }} {{ tagConfig.label }}
-        </span>
-        <span
-          v-if="plateforme.type === 'appel-offre-public'"
-          class="taff-badge-ao"
-        >AO public</span>
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-2 px-4 pt-4 pb-2">
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2 flex-wrap mb-0.5">
+          <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="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 -->
-    <div class="taff-card-name">{{ plateforme.nom }}</div>
+    <!-- Description courte -->
+    <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) -->
-    <div class="taff-card-axes">
-      <template v-for="axe in AXES" :key="axe.id">
+    <!-- Scoring axes -->
+    <div class="px-4 pb-3 flex items-center gap-2 flex-wrap">
+      <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) -->
-    <p class="taff-card-desc">{{ plateforme.description_courte }}</p>
-
-    <!-- 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"
-        >{{ SECTEUR_LABELS[s] ?? s }}</span>
-        <span v-if="plateforme.secteurs_servis.length > 3" class="taff-more">+{{ plateforme.secteurs_servis.length - 3 }}</span>
-      </div>
-      <span class="taff-cout">{{ COUT_LABELS[plateforme.cout_entree] ?? plateforme.cout_entree }}</span>
+    <!-- Footer: secteurs + coût -->
+    <div class="px-4 pb-3 flex items-center gap-2 flex-wrap">
+      <span
+        v-for="s in plateforme.secteurs_servis.slice(0, 3)"
+        :key="s"
+        class="inline-block px-2 py-0.5 rounded-full text-xs"
+        style="background: var(--nav-bg); color: var(--nav-text-muted); border: 1px solid var(--nav-bg-alt);"
+      >{{ secteurLabel(s) }}</span>
+      <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,21 +94,27 @@ 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' },
-  { id: 'ecologie'     as const, icon: '🌿', label: 'Écologie' },
-  { id: 'matching'     as const, icon: '🎯', label: 'Matching' },
+  { id: 'pratiques' as const, icon: '⚖️', label: 'Pratiques pro' },
+  { id: 'ecologie' as const, icon: '🌿', label: 'Écologie' },
+  { id: 'matching' as const, icon: '🎯', label: 'Matching' },
 ]
 
 const TAG_CONFIG = {
-  'recommande':   { emoji: '✅', label: 'Recommandé AEP', accent: '#5a7a4a', bg: 'rgba(90,122,74,0.12)',    text: '#3d5534' },
-  'sous-reserve': { emoji: '⚠️', label: 'Sous réserve',   accent: '#c4a472', bg: 'rgba(196,164,114,0.15)', text: '#7a5f2a' },
-  'a-eviter':     { emoji: '❌', label: 'À éviter',       accent: '#a85d3e', bg: 'rgba(168,93,62,0.12)',    text: '#7a3322' },
+  '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', border: 'rgba(196,164,114,0.35)' },
+  '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',
-  'architecture-interieure': 'Archi intérieure', 'paysage': 'Paysage',
-  'mar-conseil': 'MAR/Conseil', 'transversal': 'Transversal',
+  'renovation': 'Rénovation',
+  'construction-neuve': 'Neuf',
+  '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',
-  'lead-paye': 'Lead payant', 'commission': 'Commission',
+  'gratuit': 'Gratuit',
+  '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 }
-}

deploy.sh

@@ -30,9 +30,9 @@ LOCAL_ENV_CONTENT=$(cat "$LOCAL_ENV" 2>/dev/null || echo "")
 if [ "$LOCAL_ENV_CONTENT" != "$REMOTE_ENV_CONTENT" ]; then
   log "AVERTISSEMENT : .env.production local != .env VPS"
   log "  --- Local ---"
-  echo "$LOCAL_ENV_CONTENT" | sed -E 's/(TOKEN|API_KEY|PASSWORD|SECRET)=.*$/\1=***/' | sed 's/^/    /'
+  echo "$LOCAL_ENV_CONTENT" | sed 's/TOKEN=.*/TOKEN=***/' | sed 's/^/    /'
   log "  --- VPS ---"
-  echo "$REMOTE_ENV_CONTENT" | sed -E 's/(TOKEN|API_KEY|PASSWORD|SECRET)=.*$/\1=***/' | sed 's/^/    /'
+  echo "$REMOTE_ENV_CONTENT" | sed 's/TOKEN=.*/TOKEN=***/' | sed 's/^/    /'
   read -p "Continuer malgre la difference ? [y/N] " CONFIRM
   [ "$CONFIRM" = "y" ] || { log "Deploiement annule."; exit 1; }
 fi

nuxt.config.ts

@@ -1,11 +1,6 @@
 export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss'],
-  css: [
-    '~/assets/css/main.css',
-    'leaflet/dist/leaflet.css',
-    'leaflet.markercluster/dist/MarkerCluster.css',
-    'leaflet.markercluster/dist/MarkerCluster.Default.css',
-  ],
+  css: ['~/assets/css/main.css'],
 
   runtimeConfig: {
     nocodbUrl: process.env.NOCODB_URL,
@@ -16,25 +11,19 @@ export default defineNuxtConfig({
     commentTableId: process.env.COMMENT_TABLE_ID || process.env.AVIS_TABLE_ID,
     statsTableId: process.env.STATS_TABLE_ID || 'mbbq7n47ixy19mc',
     mistralApiKey: process.env.MISTRAL_API_KEY,
-    nebiusApiKey: process.env.NEBIUS_API_KEY,
     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
   ssr: true,
 
   vite: {
-    cacheDir: 'C:/Users/jules/AppData/Local/nav-carte-vite-cache',
     optimizeDeps: {
-      include: ['leaflet', 'leaflet.markercluster', 'd3'],
+      include: ['leaflet', 'leaflet.markercluster'],
     },
+    // Éviter l'import SSR de Leaflet qui utilise window
     ssr: {
       noExternal: [],
     },

package-lock.json

@@ -10,7 +10,6 @@
         "@headlessui/vue": "^1.7.23",
         "@types/leaflet": "^1.9.21",
         "@types/leaflet.markercluster": "^1.5.6",
-        "d3": "^7.9.0",
         "ioredis": "^5.3.2",
         "leaflet": "^1.9.4",
         "leaflet.markercluster": "^1.5.3",
@@ -5313,416 +5312,6 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
-    "node_modules/d3": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
-      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "3",
-        "d3-axis": "3",
-        "d3-brush": "3",
-        "d3-chord": "3",
-        "d3-color": "3",
-        "d3-contour": "4",
-        "d3-delaunay": "6",
-        "d3-dispatch": "3",
-        "d3-drag": "3",
-        "d3-dsv": "3",
-        "d3-ease": "3",
-        "d3-fetch": "3",
-        "d3-force": "3",
-        "d3-format": "3",
-        "d3-geo": "3",
-        "d3-hierarchy": "3",
-        "d3-interpolate": "3",
-        "d3-path": "3",
-        "d3-polygon": "3",
-        "d3-quadtree": "3",
-        "d3-random": "3",
-        "d3-scale": "4",
-        "d3-scale-chromatic": "3",
-        "d3-selection": "3",
-        "d3-shape": "3",
-        "d3-time": "3",
-        "d3-time-format": "4",
-        "d3-timer": "3",
-        "d3-transition": "3",
-        "d3-zoom": "3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-array": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
-      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
-      "license": "ISC",
-      "dependencies": {
-        "internmap": "1 - 2"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-axis": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
-      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-brush": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
-      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-drag": "2 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-selection": "3",
-        "d3-transition": "3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-chord": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
-      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-path": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-color": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-contour": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
-      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "^3.2.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-delaunay": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
-      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
-      "license": "ISC",
-      "dependencies": {
-        "delaunator": "5"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-dispatch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
-      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-drag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
-      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-selection": "3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-dsv": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
-      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
-      "license": "ISC",
-      "dependencies": {
-        "commander": "7",
-        "iconv-lite": "0.6",
-        "rw": "1"
-      },
-      "bin": {
-        "csv2json": "bin/dsv2json.js",
-        "csv2tsv": "bin/dsv2dsv.js",
-        "dsv2dsv": "bin/dsv2dsv.js",
-        "dsv2json": "bin/dsv2json.js",
-        "json2csv": "bin/json2dsv.js",
-        "json2dsv": "bin/json2dsv.js",
-        "json2tsv": "bin/json2dsv.js",
-        "tsv2csv": "bin/dsv2dsv.js",
-        "tsv2json": "bin/dsv2json.js"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-dsv/node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/d3-ease": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
-      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-fetch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
-      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-dsv": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-force": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
-      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-quadtree": "1 - 3",
-        "d3-timer": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-format": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
-      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-geo": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
-      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "2.5.0 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-hierarchy": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
-      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-interpolate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
-      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-color": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-polygon": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
-      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-quadtree": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
-      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-random": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
-      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-scale": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
-      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "2.10.0 - 3",
-        "d3-format": "1 - 3",
-        "d3-interpolate": "1.2.0 - 3",
-        "d3-time": "2.1.1 - 3",
-        "d3-time-format": "2 - 4"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-scale-chromatic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
-      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-interpolate": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-selection": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
-      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-shape": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
-      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-path": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-time": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
-      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "2 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-time-format": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
-      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-time": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-timer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
-      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-transition": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
-      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-dispatch": "1 - 3",
-        "d3-ease": "1 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-timer": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "d3-selection": "2 - 3"
-      }
-    },
-    "node_modules/d3-zoom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
-      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-drag": "2 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-selection": "2 - 3",
-        "d3-transition": "2 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/db0": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/db0/-/db0-0.3.4.tgz",
@@ -5836,15 +5425,6 @@
       "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
       "license": "MIT"
     },
-    "node_modules/delaunator": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.1.0.tgz",
-      "integrity": "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==",
-      "license": "ISC",
-      "dependencies": {
-        "robust-predicates": "^3.0.2"
-      }
-    },
     "node_modules/delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -6900,18 +6480,6 @@
         "node": ">=16.17.0"
       }
     },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -6987,15 +6555,6 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/internmap": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
-      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/ioredis": {
       "version": "5.10.1",
       "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.10.1.tgz",
@@ -9921,12 +9480,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/robust-predicates": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
-      "integrity": "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==",
-      "license": "Unlicense"
-    },
     "node_modules/rollup": {
       "version": "4.60.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
@@ -10042,12 +9595,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -10086,12 +9633,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT"
-    },
     "node_modules/sax": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",

package.json

@@ -13,7 +13,6 @@
     "@headlessui/vue": "^1.7.23",
     "@types/leaflet": "^1.9.21",
     "@types/leaflet.markercluster": "^1.5.6",
-    "d3": "^7.9.0",
     "ioredis": "^5.3.2",
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",

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;
-}
-
-@media (min-width: 560px) {
-  .badge-label { white-space: nowrap; }
+  white-space: nowrap;
 }
 
 @media (max-width: 559px) {

pages/agences.vue

@@ -1,610 +1,39 @@
 <template>
-  <div class="flex h-full overflow-hidden" style="background: var(--nav-bg);">
-
-    <!-- ═══════════════════════════════════════ SIDEBAR DESKTOP (>= 1024px) -->
-    <div class="hidden lg:block overflow-y-auto" style="width: 320px; min-width: 320px; flex-shrink: 0; border-right: 1px solid var(--nav-bg-alt); height: 100%;">
-
-      <!-- IntentionBanner s'auto-affiche via Teleport (overlay plein ecran) -->
-      <IntentionBanner />
-
-      <!-- Filtres familles + hashtags -->
-      <HashtagFilter
-        :allHashtags="allHashtags"
-        :selectedHashtags="selectedHashtags"
-        :selectedFamille="selectedFamille"
-        @update:selectedHashtags="selectedHashtags = $event"
-        @update:selectedFamille="selectedFamille = $event"
-      />
-
-      <!-- Separateur -->
-      <div style="height: 1px; background: var(--nav-bg-alt);"></div>
-
-      <!-- Barre de recherche -->
-      <div class="px-3 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
-        <label class="sidebar-search-label" aria-label="Rechercher une structure">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="sidebar-search-icon">
-            <circle cx="11" cy="11" r="8"/>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
-          </svg>
-          <input
-            v-model="search"
-            type="search"
-            placeholder="Rechercher une structure..."
-            class="sidebar-search-input"
-            autocomplete="off"
-          />
-          <button
-            v-if="search"
-            type="button"
-            class="sidebar-search-clear"
-            aria-label="Effacer"
-            @click.stop="search = ''"
-          >
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
-              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
-          </button>
-        </label>
+  <div class="flex flex-col items-center justify-center h-full gap-6" style="background: var(--nav-bg);">
+    <div class="text-center max-w-md px-6">
+      <div
+        class="inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-5"
+        style="background: var(--nav-bg-alt);"
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-muted);">
+          <rect x="3" y="3" width="7" height="7"/>
+          <rect x="14" y="3" width="7" height="7"/>
+          <rect x="14" y="14" width="7" height="7"/>
+          <rect x="3" y="14" width="7" height="7"/>
+        </svg>
       </div>
-
-      <!-- Header compteur + reset -->
-      <div class="flex items-center justify-between px-4 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
-        <span class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">
-          {{ filtered.length }} structure{{ filtered.length > 1 ? 's' : '' }}
-        </span>
-        <button
-          v-if="hasActiveFilters"
-          @click="resetFilters"
-          class="text-xs underline hover:opacity-70"
-          style="color: var(--nav-text-muted);"
-        >Effacer les filtres</button>
-      </div>
-
-      <!-- Liste fiches (sidebar entiere scroll - pas de scroll interne) -->
-      <div class="px-3 py-2 space-y-1.5">
-        <div v-if="pending" class="flex items-center justify-center py-8" style="color: var(--nav-text-muted);">
-          Chargement...
-        </div>
-        <div v-else-if="filtered.length === 0" class="text-center py-8">
-          <p class="text-xs" style="color: var(--nav-text-muted);">Aucun résultat</p>
-        </div>
-        <div
-          v-for="structure in filtered"
-          :key="structure.id"
-          class="rounded-lg px-3 py-2 cursor-pointer transition-all"
-          :style="selectedId === structure.id
-            ? `background: var(--nav-bg-alt); border-left: 3px solid ${familleColor(structure.famille_principale)}; padding-left: 9px;`
-            : 'background: var(--nav-bg); border-left: 3px solid transparent; padding-left: 9px;'"
-          @click="onSelectStructure(structure.id)"
-          @mouseenter="hoveredId = structure.id"
-          @mouseleave="hoveredId = null"
-        >
-          <div class="flex items-start justify-between gap-1.5">
-            <span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ structure.nom }}</span>
-            <span
-              class="shrink-0 w-2.5 h-2.5 rounded-full mt-1"
-              :style="`background: ${familleColor(structure.famille_principale)};`"
-            />
-          </div>
-          <div class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">{{ structure.type_principal }} - {{ structure.ville }}</div>
-          <div v-if="structure.hashtags.length" class="mt-1 flex flex-wrap gap-1">
-            <span
-              v-for="tag in structure.hashtags.slice(0, 2)"
-              :key="tag"
-              class="text-xs"
-              style="color: var(--nav-text-muted);"
-            >{{ tag }}</span>
-          </div>
-        </div>
-      </div>
-
+      <h1 class="text-2xl font-bold mb-3" style="color: var(--nav-text);">Agences Inspirantes</h1>
+      <p class="text-sm leading-relaxed mb-6" style="color: var(--nav-text-muted);">
+        Cette section répertoriera les agences d'architecture qui incarnent une pratique engagée — écologie politique, auto-construction, architectures vernaculaires, sobriété.
+      </p>
+      <p class="text-xs font-semibold uppercase tracking-widest mb-6" style="color: var(--nav-text-muted); opacity: 0.6;">
+        Bientôt disponible
+      </p>
+      <NuxtLink
+        to="/"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all hover:opacity-80"
+        style="background: var(--nav-primary); color: var(--nav-text-on-primary);"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+          <line x1="19" y1="12" x2="5" y2="12"/>
+          <polyline points="12 19 5 12 12 5"/>
+        </svg>
+        Retour à l'écosystème
+      </NuxtLink>
     </div>
-
-    <!-- ═══════════════════════════════════════ ZONE CENTRALE (carte) -->
-    <main class="flex-1 flex flex-col overflow-hidden relative">
-
-      <!-- ── VUE DESKTOP : Onglets Métro/Outre-mer ── -->
-      <div class="hidden lg:flex lg:flex-1 lg:flex-col lg:overflow-hidden">
-        <!-- Onglets desktop -->
-        <div class="shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
-          <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>
-          <button
-            class="px-5 py-2 text-sm font-medium transition-colors"
-            :style="desktopMapView === 'graphe'
-              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
-              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
-            @click="desktopMapView = 'graphe'"
-          >Vue graphique</button>
-        </div>
-
-        <!-- Carte Métropole desktop -->
-        <div v-show="desktopMapView === 'metropole'" class="flex-1 flex flex-col overflow-hidden">
-          <div class="relative flex-1" style="min-height: 200px;">
-            <ClientOnly>
-              <NavMapV2
-                ref="navMapRef"
-                :structures="metropoleStructures"
-                :selectedId="selectedId"
-                @select-structure="onSelectStructure"
-              />
-              <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>
-              </template>
-            </ClientOnly>
-          </div>
-          <ChatbotPlaceholder
-            @highlightOrgs="() => {}"
-            @applyHashtag="(tag) => { if (!selectedHashtags.includes(tag)) selectedHashtags = [...selectedHashtags, tag] }"
-          />
-        </div>
-
-        <!-- Carte Outre-mer desktop -->
-        <div v-show="desktopMapView === 'outremer'" class="flex-1 overflow-y-auto" style="background: var(--nav-bg);">
-          <ClientOnly>
-            <OutremerMap
-              :orgs="outremerOrgsLegacy"
-              :selectedId="selectedIdLegacyNum"
-              @select-org="() => {}"
-            />
-            <template #fallback>
-              <div class="flex items-center justify-center h-full text-sm" style="color: var(--nav-text-muted);">
-                Chargement…
-              </div>
-            </template>
-          </ClientOnly>
-        </div>
-
-        <!-- Vue graphique desktop -->
-        <div v-show="desktopMapView === 'graphe'" class="flex-1 overflow-hidden flex flex-col">
-          <div class="flex-1 overflow-hidden relative">
-            <ClientOnly>
-              <GraphView
-                :data="bifurcationData"
-                :allHashtags="allHashtags"
-                :active="desktopMapView === 'graphe'"
-                @select-structure="onSelectStructure"
-              />
-              <template #fallback>
-                <div class="flex items-center justify-center h-full" style="color: var(--nav-text-muted);">
-                  Chargement du graphe...
-                </div>
-              </template>
-            </ClientOnly>
-          </div>
-          <ChatbotPlaceholder
-            @highlightOrgs="() => {}"
-            @applyHashtag="(tag) => { if (!selectedHashtags.includes(tag)) selectedHashtags = [...selectedHashtags, tag] }"
-          />
-        </div>
-      </div>
-
-      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer/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"
-          :style="mobileMapView === 'metropole'
-            ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
-            : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
-          @click="mobileMapView = 'metropole'"
-        >Métropolitain</button>
-        <button
-          class="flex-1 py-2 text-sm font-medium transition-colors"
-          :style="mobileMapView === 'outremer'
-            ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
-            : '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">
-        <!-- Carte mobile Métropole -->
-        <div v-show="mobileMapView === 'metropole'" class="absolute inset-0">
-          <ClientOnly>
-            <NavMapV2
-              ref="navMapMobileRef"
-              :structures="metropoleStructures"
-              :selectedId="selectedId"
-              @select-structure="onSelectStructureMobile"
-            />
-            <template #fallback>
-              <div class="w-full h-full flex items-center justify-center" style="background: var(--nav-bg-alt); color: var(--nav-text-muted);">
-                Chargement de la carte…
-              </div>
-            </template>
-          </ClientOnly>
-        </div>
-
-        <!-- Carte mobile Outre-mer -->
-        <div v-show="mobileMapView === 'outremer'" class="absolute inset-0 overflow-y-auto" style="background: var(--nav-bg);">
-          <ClientOnly>
-            <OutremerMap
-              :orgs="outremerOrgsLegacy"
-              :selectedId="selectedIdLegacyNum"
-              @select-org="() => {}"
-            />
-            <template #fallback>
-              <div class="flex items-center justify-center h-48" style="color: var(--nav-text-muted);">
-                Chargement…
-              </div>
-            </template>
-          </ClientOnly>
-        </div>
-
-        <!-- 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);">
-              <p class="text-xs leading-relaxed" style="color: var(--bifurc-banner-text, #2c2416); margin: 0;">
-                120 réseaux, collectifs et agences où des pensées écologiques deviennent des pratiques d'architecture.
-              </p>
-            </div>
-
-            <!-- Filtres hashtags mobile -->
-            <div class="px-3 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
-              <HashtagFilter
-                :allHashtags="allHashtags"
-                :selectedHashtags="selectedHashtags"
-                :selectedFamille="selectedFamille"
-                @update:selectedHashtags="selectedHashtags = $event"
-                @update:selectedFamille="selectedFamille = $event"
-              />
-            </div>
-
-            <!-- Barre recherche mobile -->
-            <div class="px-3 pt-2 pb-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
-              <label class="mobile-search-label" aria-label="Rechercher une structure">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-muted); flex-shrink: 0;">
-                  <circle cx="11" cy="11" r="8"/>
-                  <line x1="21" y1="21" x2="16.65" y2="16.65"/>
-                </svg>
-                <input
-                  v-model="search"
-                  type="search"
-                  placeholder="Rechercher…"
-                  class="mobile-search-input"
-                  autocomplete="off"
-                />
-                <button
-                  v-if="search"
-                  type="button"
-                  class="mobile-search-clear"
-                  aria-label="Effacer"
-                  @click.stop="search = ''"
-                >
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
-                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-                  </svg>
-                </button>
-              </label>
-              <button
-                v-if="hasActiveFilters"
-                @click="resetFilters"
-                class="mt-1 text-xs"
-                style="color: var(--nav-text-muted); text-decoration: underline;"
-              >Effacer les filtres</button>
-            </div>
-
-            <!-- Liste fiches mobile -->
-            <div class="px-3 py-2">
-              <div class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">
-                {{ filtered.length }} structure{{ filtered.length > 1 ? 's' : '' }}
-              </div>
-              <div v-if="pending" class="flex items-center justify-center py-8" style="color: var(--nav-text-muted);">
-                Chargement des fiches…
-              </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>
-                <button @click="resetFilters" class="text-sm underline" style="color: var(--nav-primary-solid);">
-                  Effacer les filtres
-                </button>
-              </div>
-              <div class="space-y-2">
-                <div
-                  v-for="structure in filtered"
-                  :key="structure.id"
-                  class="block rounded-lg p-3 transition-all cursor-pointer"
-                  :style="selectedId === structure.id
-                    ? `background: var(--nav-bg-alt); border-left: 3px solid ${familleColor(structure.famille_principale)};`
-                    : 'background: var(--nav-surface); border-left: 3px solid transparent;'"
-                  @click="onSelectStructureMobile(structure.id)"
-                >
-                  <div class="flex items-start justify-between gap-2">
-                    <span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ structure.nom }}</span>
-                    <span
-                      class="shrink-0 w-2.5 h-2.5 rounded-full mt-1"
-                      :style="`background: ${familleColor(structure.famille_principale)};`"
-                    />
-                  </div>
-                  <div class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">{{ structure.type_principal }} · {{ structure.ville }}</div>
-                </div>
-              </div>
-            </div>
-          </MobileSheet>
-        </ClientOnly>
-      </div>
-    </main>
-
-    <!-- ═══════════════════════════════════════ MODAL FICHE V2 (desktop) -->
-    <FicheModalV2
-      v-model="ficheModalOpen"
-      :structureId="ficheModalId"
-      :data="bifurcationData"
-      @update:structureId="ficheModalId = $event"
-    />
-
-    <!-- ═══════════════════════════════════════ BOUTON CHATBOT FLOTTANT (mobile) -->
-    <button
-      class="lg:hidden fixed bottom-6 right-4 z-[1000] flex items-center gap-2 px-4 rounded-full shadow-lg"
-      style="
-        height: 48px;
-        background: var(--nav-primary);
-        opacity: 0.92;
-        color: var(--nav-text-on-primary);
-        box-shadow: 0 4px 16px rgba(26,34,56,0.25);
-        font-family: var(--nav-font);
-        font-size: 0.875rem;
-        font-weight: 600;
-      "
-      aria-label="Ouvrir l'assistant Chatbot"
-      @click="chatbotOpen = true"
-    >
-      <svg width="18" height="18" 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>Chatbot</span>
-    </button>
-
-    <!-- ═══════════════════════════════════════ CHATBOT BOTTOM SHEET (mobile) -->
-    <ChatbotReseaux
-      :modelValue="chatbotOpen"
-      @update:modelValue="chatbotOpen = $event"
-    />
-
-    <!-- ═══════════════════════════════════════ 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>
 
 <script setup lang="ts">
-import type { ReseauxBifurcationData, StructureV2 } from '~/types/structure-v2'
-
-// ── Couleurs familles ──────────────────────────────────────────────────────
-const FAMILLE_COLORS: Record<number, string> = {
-  1: '#a85d3e',
-  2: '#c4a472',
-  3: '#d4a017',
-  4: '#5a7a4a',
-  5: '#3d6a8c',
-  6: '#6b3fa0',
-}
-
-function familleColor(f: number): string {
-  return FAMILLE_COLORS[f] ?? '#888'
-}
-
-// ── État UI ────────────────────────────────────────────────────────────────
-const selectedId = ref<string | null>(null)
-const hoveredId = ref<string | null>(null)
-const ficheModalOpen = ref(false)
-const ficheModalId = ref<string | null>(null)
-const chatbotOpen = ref(false)
-const mobileMapView = ref<'metropole' | 'outremer' | '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('')
-const selectedFamille = ref<number | null>(null)
-const selectedHashtags = ref<string[]>([])
-
-// Refs cartes
-const navMapRef = ref<any>(null)
-const navMapMobileRef = ref<any>(null)
-
-// ── Données V2 - JSON statique ─────────────────────────────────────────────
-const bifurcationData = ref<ReseauxBifurcationData | null>(null)
-const pending = ref(true)
-
-onMounted(async () => {
-  try {
-    bifurcationData.value = await $fetch<ReseauxBifurcationData>('/data/reseaux-bifurcation.json')
-  } catch (e) {
-    console.error('Erreur chargement reseaux-bifurcation.json', e)
-  } finally {
-    pending.value = false
-  }
-})
-
-const structures = computed<StructureV2[]>(() => bifurcationData.value?.structures ?? [])
-
-// Tous les hashtags uniques triés
-const allHashtags = computed<string[]>(() => {
-  const set = new Set<string>()
-  structures.value.forEach(s => s.hashtags.forEach(h => set.add(h)))
-  return Array.from(set).sort()
-})
-
-// ── Filtrage ───────────────────────────────────────────────────────────────
-const filtered = computed<StructureV2[]>(() => {
-  let result = structures.value
-
-  // Filtre texte
-  if (search.value.trim()) {
-    const q = search.value.toLowerCase()
-    result = result.filter(
-      s =>
-        s.nom.toLowerCase().includes(q) ||
-        s.ville.toLowerCase().includes(q) ||
-        s.description_courte.toLowerCase().includes(q) ||
-        s.hashtags.some(h => h.toLowerCase().includes(q))
-    )
-  }
-
-  // Filtre famille - F6 = badge_f6_recherche_politique, pas famille_principale
-  if (selectedFamille.value !== null) {
-    if (selectedFamille.value === 6) {
-      result = result.filter(s => (s.badges as any)?.f6_recherche_politique === true)
-    } else {
-      result = result.filter(
-        s => s.famille_principale === selectedFamille.value ||
-          (s.familles_secondaires ?? []).includes(selectedFamille.value!)
-      )
-    }
-  }
-
-  // Filtre hashtags (AND logique si plusieurs)
-  if (selectedHashtags.value.length) {
-    result = result.filter(
-      s => selectedHashtags.value.every(h => s.hashtags.includes(h))
-    )
-  }
-
-  return result
-})
-
-const hasActiveFilters = computed(
-  () => !!search.value || selectedFamille.value !== null || selectedHashtags.value.length > 0
-)
-
-function resetFilters() {
-  search.value = ''
-  selectedFamille.value = null
-  selectedHashtags.value = []
-}
-
-// Structures métropole (pays != DOM-TOM, et avec coordonnées)
-// Pour simplifier : toutes les structures (la carte gère les sans-coords)
-const metropoleStructures = computed<StructureV2[]>(() => filtered.value)
-
-// Outre-mer : pas de structures V2 DOM-TOM pour l'instant - garder le composant existant vide
-// OutremerMap attend le format Org legacy - on passe un tableau vide
-const outremerOrgsLegacy = computed(() => [])
-const selectedIdLegacyNum = computed(() => null)
-
-// ── Sélection ─────────────────────────────────────────────────────────────
-function onSelectStructure(id: string) {
-  selectedId.value = selectedId.value === id ? null : id
-  if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
-    ficheModalId.value = id
-    ficheModalOpen.value = true
-  }
-}
-
-function onSelectStructureMobile(id: string) {
-  selectedId.value = id
-  ficheModalId.value = id
-  ficheModalOpen.value = true
-}
-
-useHead({ title: "AEP - Réseaux de bifurcation architecturale" })
+useHead({ title: 'Agences Inspirantes — AEP (bientôt disponible)' })
 </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

@@ -1,48 +1,111 @@
 <template>
   <div class="flex h-full overflow-hidden" style="background: var(--nav-bg);">
 
-    <!-- ═══════════════════════════════════════ SIDEBAR DESKTOP (≥ 1024px) -->
-    <div class="hidden lg:flex w-80 shrink-0 flex-col overflow-hidden">
-      <NavSidebar
-        :search="search"
-        :modeValue="territoireMode"
-        :echelle="echelle"
-        :fonctions="fonctions"
-        :territoire="territoire"
-        :echelleCount="echelleCount"
-        :fonctionCount="fonctionCount"
-        :territoireCount="territoireCount"
-        :resultCount="filtered.length"
-        :orgs="filtered"
-        :selectedId="selectedId"
-        :hasActiveFilters="hasActiveFilters"
-        :pending="pending"
-        @update:search="onSearch"
-        @update:mode="onMode"
-        @update:echelle="onEchelle"
-        @update:fonctions="onFonctions"
-        @update:territoire="onTerritoire"
-        @select-org="onSelectOrg"
-        @hover-org="onHoverOrg"
-        @reset-filters="resetFilters"
+    <!-- ═══════════════════════════════════════ SIDEBAR DESKTOP (>= 1024px) -->
+    <div class="hidden lg:block overflow-y-auto" style="width: 320px; min-width: 320px; flex-shrink: 0; border-right: 1px solid var(--nav-bg-alt); height: 100%;">
+
+      <!-- IntentionBanner s'auto-affiche via Teleport (overlay plein ecran) -->
+      <IntentionBanner />
+
+      <!-- Filtres familles + hashtags -->
+      <HashtagFilter
+        :allHashtags="allHashtags"
+        :selectedHashtags="selectedHashtags"
+        :selectedFamille="selectedFamille"
+        @update:selectedHashtags="selectedHashtags = $event"
+        @update:selectedFamille="selectedFamille = $event"
       />
+
+      <!-- Separateur -->
+      <div style="height: 1px; background: var(--nav-bg-alt);"></div>
+
+      <!-- Barre de recherche -->
+      <div class="px-3 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
+        <label class="sidebar-search-label" aria-label="Rechercher une structure">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="sidebar-search-icon">
+            <circle cx="11" cy="11" r="8"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <input
+            v-model="search"
+            type="search"
+            placeholder="Rechercher une structure..."
+            class="sidebar-search-input"
+            autocomplete="off"
+          />
+          <button
+            v-if="search"
+            type="button"
+            class="sidebar-search-clear"
+            aria-label="Effacer"
+            @click.stop="search = ''"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </label>
+      </div>
+
+      <!-- Header compteur + reset -->
+      <div class="flex items-center justify-between px-4 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
+        <span class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">
+          {{ filtered.length }} structure{{ filtered.length > 1 ? 's' : '' }}
+        </span>
+        <button
+          v-if="hasActiveFilters"
+          @click="resetFilters"
+          class="text-xs underline hover:opacity-70"
+          style="color: var(--nav-text-muted);"
+        >Effacer les filtres</button>
+      </div>
+
+      <!-- Liste fiches (sidebar entiere scroll - pas de scroll interne) -->
+      <div class="px-3 py-2 space-y-1.5">
+        <div v-if="pending" class="flex items-center justify-center py-8" style="color: var(--nav-text-muted);">
+          Chargement...
+        </div>
+        <div v-else-if="filtered.length === 0" class="text-center py-8">
+          <p class="text-xs" style="color: var(--nav-text-muted);">Aucun résultat</p>
+        </div>
+        <div
+          v-for="structure in filtered"
+          :key="structure.id"
+          class="rounded-lg px-3 py-2 cursor-pointer transition-all"
+          :style="selectedId === structure.id
+            ? `background: var(--nav-bg-alt); border-left: 3px solid ${familleColor(structure.famille_principale)}; padding-left: 9px;`
+            : 'background: var(--nav-bg); border-left: 3px solid transparent; padding-left: 9px;'"
+          @click="onSelectStructure(structure.id)"
+          @mouseenter="hoveredId = structure.id"
+          @mouseleave="hoveredId = null"
+        >
+          <div class="flex items-start justify-between gap-1.5">
+            <span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ structure.nom }}</span>
+            <span
+              class="shrink-0 w-2.5 h-2.5 rounded-full mt-1"
+              :style="`background: ${familleColor(structure.famille_principale)};`"
+            />
+          </div>
+          <div class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">{{ structure.type_principal }} - {{ structure.ville }}</div>
+          <div v-if="structure.hashtags.length" class="mt-1 flex flex-wrap gap-1">
+            <span
+              v-for="tag in structure.hashtags.slice(0, 2)"
+              :key="tag"
+              class="text-xs"
+              style="color: var(--nav-text-muted);"
+            >{{ tag }}</span>
+          </div>
+        </div>
+      </div>
+
     </div>
 
     <!-- ═══════════════════════════════════════ ZONE CENTRALE (carte) -->
     <main class="flex-1 flex flex-col overflow-hidden relative">
 
-      <!-- Indicateur source dev -->
-      <div
-        v-if="dataSource === 'seed'"
-        class="absolute top-2 left-2 z-[500] px-2 py-1 rounded text-xs"
-        style="background: var(--nav-accent); color: var(--nav-text);"
-      >
-        Mode dev — données seed
-      </div>
-
-      <!-- ── VUE DESKTOP : Onglets Métropole / Outre-mer ── -->
+      <!-- ── VUE DESKTOP : Onglets Métro/Outre-mer ── -->
       <div class="hidden lg:flex lg:flex-1 lg:flex-col lg:overflow-hidden">
-        <!-- Barre onglets desktop -->
+        <!-- Onglets desktop -->
         <div class="shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
           <button
             class="px-5 py-2 text-sm font-medium transition-colors"
@@ -58,47 +121,82 @@
               : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
             @click="desktopMapView = 'outremer'"
           >Outre-mer</button>
+          <button
+            class="px-5 py-2 text-sm font-medium transition-colors"
+            :style="desktopMapView === 'graphe'
+              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
+              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
+            @click="desktopMapView = 'graphe'"
+          >Vue graphique</button>
         </div>
 
         <!-- Carte Métropole desktop -->
         <div v-show="desktopMapView === 'metropole'" class="flex-1 flex flex-col overflow-hidden">
           <div class="relative flex-1" style="min-height: 200px;">
             <ClientOnly>
-              <NavMap
+              <NavMapV2
                 ref="navMapRef"
-                :orgs="metropoleOrgs"
+                :structures="metropoleStructures"
                 :selectedId="selectedId"
-                @select-org="onSelectOrg"
+                @select-structure="onSelectStructure"
               />
               <template #fallback>
-                <div 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" />
+          <ChatbotPlaceholder
+            @highlightOrgs="() => {}"
+            @applyHashtag="(tag) => { if (!selectedHashtags.includes(tag)) selectedHashtags = [...selectedHashtags, tag] }"
+          />
         </div>
 
         <!-- Carte Outre-mer desktop -->
-        <div v-show="desktopMapView === 'outremer'" class="flex-1 flex flex-col overflow-hidden">
-          <div class="flex-1 overflow-y-auto">
+        <div v-show="desktopMapView === 'outremer'" class="flex-1 overflow-y-auto" style="background: var(--nav-bg);">
+          <ClientOnly>
+            <OutremerMap
+              :orgs="outremerOrgsLegacy"
+              :selectedId="selectedIdLegacyNum"
+              @select-org="() => {}"
+            />
+            <template #fallback>
+              <div class="flex items-center justify-center h-full text-sm" style="color: var(--nav-text-muted);">
+                Chargement…
+              </div>
+            </template>
+          </ClientOnly>
+        </div>
+
+        <!-- Vue graphique desktop -->
+        <div v-show="desktopMapView === 'graphe'" class="flex-1 overflow-hidden flex flex-col">
+          <div class="flex-1 overflow-hidden relative">
             <ClientOnly>
-              <OutremerMap
-                :orgs="outremerOrgs"
-                :selectedId="selectedId"
-                @select-org="onSelectOrg"
+              <GraphView
+                :data="bifurcationData"
+                :allHashtags="allHashtags"
+                :active="desktopMapView === 'graphe'"
+                @select-structure="onSelectStructure"
               />
               <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" style="color: var(--nav-text-muted);">
+                  Chargement du graphe...
+                </div>
               </template>
             </ClientOnly>
           </div>
-          <ChatbotPlaceholder @highlightOrgs="onHighlightOrgs" />
+          <ChatbotPlaceholder
+            @highlightOrgs="() => {}"
+            @applyHashtag="(tag) => { if (!selectedHashtags.includes(tag)) selectedHashtags = [...selectedHashtags, tag] }"
+          />
         </div>
       </div>
 
-      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer + carte pleine hauteur + sheet swipable ── -->
-
-      <!-- Onglets Métropolitain / Outre-mer -->
+      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer + sheet swipable ── -->
       <div class="lg:hidden shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
         <button
           class="flex-1 py-2 text-sm font-medium transition-colors"
@@ -117,34 +215,30 @@
       </div>
 
       <div class="lg:hidden flex-1 relative overflow-hidden">
-
-        <!-- Carte Métropole -->
+        <!-- Carte mobile Métropole -->
         <div v-show="mobileMapView === 'metropole'" class="absolute inset-0">
           <ClientOnly>
-            <NavMap
+            <NavMapV2
               ref="navMapMobileRef"
-              :orgs="metropoleOrgs"
+              :structures="metropoleStructures"
               :selectedId="selectedId"
-              @select-org="onSelectOrgMobile"
+              @select-structure="onSelectStructureMobile"
             />
             <template #fallback>
-              <div
-                class="w-full h-full flex items-center justify-center"
-                style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-              >
+              <div class="w-full h-full flex items-center justify-center" style="background: var(--nav-bg-alt); color: var(--nav-text-muted);">
                 Chargement de la carte…
               </div>
             </template>
           </ClientOnly>
         </div>
 
-        <!-- Carte Outre-mer (scroll vertical, pleine largeur) -->
+        <!-- Carte mobile Outre-mer -->
         <div v-show="mobileMapView === 'outremer'" class="absolute inset-0 overflow-y-auto" style="background: var(--nav-bg);">
           <ClientOnly>
             <OutremerMap
-              :orgs="outremerOrgs"
-              :selectedId="selectedId"
-              @select-org="onSelectOrgMobile"
+              :orgs="outremerOrgsLegacy"
+              :selectedId="selectedIdLegacyNum"
+              @select-org="() => {}"
             />
             <template #fallback>
               <div class="flex items-center justify-center h-48" style="color: var(--nav-text-muted);">
@@ -154,90 +248,65 @@
           </ClientOnly>
         </div>
 
-        <!-- Bottom sheet swipable (Métropole et Outre-mer) -->
+        <!-- Bottom sheet swipable -->
         <ClientOnly>
           <MobileSheet :resultCount="filtered.length" :pending="pending">
-            <!-- Barre recherche -->
+            <!-- Bandeau intention mobile -->
+            <div class="px-3 py-2" style="background: var(--bifurc-banner-bg, #faf8f5); border-bottom: 1px solid var(--bifurc-banner-border, #e0d8cc);">
+              <p class="text-xs leading-relaxed" style="color: var(--bifurc-banner-text, #2c2416); margin: 0;">
+                120 réseaux, collectifs et agences où des pensées écologiques deviennent des pratiques d'architecture.
+              </p>
+            </div>
+
+            <!-- Filtres hashtags mobile -->
+            <div class="px-3 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
+              <HashtagFilter
+                :allHashtags="allHashtags"
+                :selectedHashtags="selectedHashtags"
+                :selectedFamille="selectedFamille"
+                @update:selectedHashtags="selectedHashtags = $event"
+                @update:selectedFamille="selectedFamille = $event"
+              />
+            </div>
+
+            <!-- Barre recherche mobile -->
             <div class="px-3 pt-2 pb-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
-              <label class="mobile-search-label" aria-label="Rechercher une organisation">
+              <label class="mobile-search-label" aria-label="Rechercher une structure">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-muted); flex-shrink: 0;">
                   <circle cx="11" cy="11" r="8"/>
                   <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                 </svg>
                 <input
-                  v-model="mobileSearch"
+                  v-model="search"
                   type="search"
                   placeholder="Rechercher…"
                   class="mobile-search-input"
                   autocomplete="off"
-                  @input="onSearch(mobileSearch)"
                 />
                 <button
-                  v-if="mobileSearch"
+                  v-if="search"
                   type="button"
                   class="mobile-search-clear"
                   aria-label="Effacer"
-                  @click.stop="mobileSearch = ''; onSearch('')"
+                  @click.stop="search = ''"
                 >
                   <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                     <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                   </svg>
                 </button>
               </label>
-
-              <!-- Filtres ÉCHELLE — chips style FONCTION -->
-              <div class="mt-2">
-                <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">ÉCHELLE</span>
-                <div class="flex flex-wrap gap-1">
-                  <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 + toggle collapse -->
-              <div class="mt-2">
-                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;">
-                  <span class="text-xs font-bold uppercase tracking-wide" style="color: var(--nav-text-muted);">
-                    FONCTION
-                    <span v-if="fonctions.length" style="font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.65rem; margin-left: 4px;">({{ fonctions.length }} active{{ fonctions.length > 1 ? 's' : '' }})</span>
-                  </span>
-                  <button
-                    @click="mobileFonctionsOpen = !mobileFonctionsOpen"
-                    style="font-size: 0.65rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; white-space: nowrap;"
-                  >{{ mobileFonctionsOpen || fonctions.length ? (mobileFonctionsOpen ? 'Replier' : 'Afficher') : 'Fonctions (' + FONCTIONS.length + ')' }}</button>
-                </div>
-                <div v-if="mobileFonctionsOpen || fonctions.length" 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"
+                class="mt-1 text-xs"
                 style="color: var(--nav-text-muted); text-decoration: underline;"
-              >✕ Effacer les filtres</button>
+              >Effacer les filtres</button>
             </div>
 
-            <!-- Compteur + Liste fiches -->
+            <!-- Liste fiches mobile -->
             <div class="px-3 py-2">
               <div class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">
-                {{ filtered.length }} résultat{{ filtered.length > 1 ? 's' : '' }}
+                {{ filtered.length }} structure{{ filtered.length > 1 ? 's' : '' }}
               </div>
               <div v-if="pending" class="flex items-center justify-center py-8" style="color: var(--nav-text-muted);">
                 Chargement des fiches…
@@ -250,46 +319,36 @@
               </div>
               <div class="space-y-2">
                 <div
-                  v-for="org in filtered"
-                  :key="org.Id"
+                  v-for="structure in filtered"
+                  :key="structure.id"
                   class="block rounded-lg p-3 transition-all cursor-pointer"
-                  :style="selectedId === org.Id
-                    ? 'background: var(--nav-bg-alt); border-left: 3px solid var(--nav-accent);'
+                  :style="selectedId === structure.id
+                    ? `background: var(--nav-bg-alt); border-left: 3px solid ${familleColor(structure.famille_principale)};`
                     : 'background: var(--nav-surface); border-left: 3px solid transparent;'"
-                  @click="onSelectOrgMobile(org.Id)"
+                  @click="onSelectStructureMobile(structure.id)"
                 >
                   <div class="flex items-start justify-between gap-2">
-                    <span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ org.nom }}</span>
+                    <span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ structure.nom }}</span>
                     <span
-                      v-if="org.echelle"
-                      class="shrink-0 px-2 py-0.5 rounded-full text-xs font-medium"
-                      style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-                    >{{ org.echelle }}</span>
-                  </div>
-                  <div v-if="fonctionsList(org).length" class="mt-1 flex flex-wrap gap-1">
-                    <span
-                      v-for="fn in fonctionsList(org)"
-                      :key="fn"
-                      class="px-1.5 py-0.5 rounded text-xs"
-                      style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-                    >{{ fn }}</span>
-                  </div>
-                  <div v-if="org.localisation_ville" class="mt-1 text-xs" style="color: var(--nav-text-muted);">
-                    {{ org.localisation_ville }}
+                      class="shrink-0 w-2.5 h-2.5 rounded-full mt-1"
+                      :style="`background: ${familleColor(structure.famille_principale)};`"
+                    />
                   </div>
+                  <div class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">{{ structure.type_principal }} · {{ structure.ville }}</div>
                 </div>
               </div>
             </div>
           </MobileSheet>
         </ClientOnly>
       </div>
-
     </main>
 
-    <!-- ═══════════════════════════════════════ MODAL FICHE (desktop) -->
-    <FicheModal
+    <!-- ═══════════════════════════════════════ MODAL FICHE V2 (desktop) -->
+    <FicheModalV2
       v-model="ficheModalOpen"
-      :orgId="ficheModalId"
+      :structureId="ficheModalId"
+      :data="bifurcationData"
+      @update:structureId="ficheModalId = $event"
     />
 
     <!-- ═══════════════════════════════════════ BOUTON CHATBOT FLOTTANT (mobile) -->
@@ -318,325 +377,141 @@
     <ChatbotSheet
       :modelValue="chatbotOpen"
       @update:modelValue="chatbotOpen = $event"
-      @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"
+      @highlightOrgs="() => {}"
     />
 
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Org } from '~/types/org'
+import type { ReseauxBifurcationData, StructureV2 } from '~/types/structure-v2'
 
-// ── URL query params sync ─────────────────────────────────────────────────
-const route = useRoute()
-const router = useRouter()
-
-const search = ref<string>((route.query.q as string) ?? '')
-const echelle = ref<string[]>(
-  route.query.echelle
-    ? (route.query.echelle as string).split(',').filter(Boolean)
-    : []
-)
-const fonctions = ref<string[]>(
-  route.query.fonctions
-    ? (route.query.fonctions as string).split(',').filter(Boolean)
-    : []
-)
-const territoire = ref<string | null>((route.query.territoire as string) ?? null)
-const territoireMode = ref<string>(
-  (route.query.mode as string) === 'outremer' ? 'outremer' : 'metropole'
-)
-
-const 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)
-const mobileFonctionsOpen = 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)
-
-function onHighlightOrgs(ids: (number | string)[]) {
-  if (!ids.length) return
-  const firstId = typeof ids[0] === 'string' ? parseInt(ids[0], 10) : ids[0]
-  if (isNaN(firstId)) return
-
-  // Sauvegarde la sélection courante
-  prevSelectedId.value = selectedId.value
-  selectedId.value = firstId
-
-  if (highlightTimer) clearTimeout(highlightTimer)
-  highlightTimer = setTimeout(() => {
-    // Restaure la sélection précédente (ou null)
-    selectedId.value = prevSelectedId.value
-    prevSelectedId.value = null
-    highlightTimer = null
-  }, 5000)
+// ── Couleurs familles ──────────────────────────────────────────────────────
+const FAMILLE_COLORS: Record<number, string> = {
+  1: '#a85d3e',
+  2: '#c4a472',
+  3: '#d4a017',
+  4: '#5a7a4a',
+  5: '#3d6a8c',
+  6: '#6b3fa0',
 }
 
-// Ref locale barre de recherche mobile (synchronisée avec search via onSearch)
-const mobileSearch = ref<string>((route.query.q as string) ?? '')
+function familleColor(f: number): string {
+  return FAMILLE_COLORS[f] ?? '#888'
+}
 
-// Refs vers les instances NavMap (desktop + mobile séparées via deux <ClientOnly>)
+// ── État UI ────────────────────────────────────────────────────────────────
+const selectedId = ref<string | null>(null)
+const hoveredId = ref<string | null>(null)
+const ficheModalOpen = ref(false)
+const ficheModalId = ref<string | null>(null)
+const chatbotOpen = ref(false)
+const mobileMapView = ref<'metropole' | 'outremer'>('metropole')
+const desktopMapView = ref<'metropole' | 'outremer' | 'graphe'>('metropole')
+
+// Filtres
+const search = ref('')
+const selectedFamille = ref<number | null>(null)
+const selectedHashtags = ref<string[]>([])
+
+// Refs cartes
 const navMapRef = ref<any>(null)
 const navMapMobileRef = ref<any>(null)
 
-// Sync URL <-> état filtres
-function syncUrl() {
-  const q: Record<string, string> = {}
-  if (search.value) q.q = search.value
-  if (echelle.value.length) q.echelle = echelle.value.join(',')
-  if (fonctions.value.length) q.fonctions = fonctions.value.join(',')
-  if (territoire.value) q.territoire = territoire.value
-  if (territoireMode.value === 'outremer') q.mode = 'outremer'
-  router.replace({ query: Object.keys(q).length ? q : undefined })
+// ── Données V2 - JSON statique ─────────────────────────────────────────────
+const bifurcationData = ref<ReseauxBifurcationData | null>(null)
+const pending = ref(true)
+
+onMounted(async () => {
+  try {
+    bifurcationData.value = await $fetch<ReseauxBifurcationData>('/data/reseaux-bifurcation.json')
+  } catch (e) {
+    console.error('Erreur chargement reseaux-bifurcation.json', e)
+  } finally {
+    pending.value = false
+  }
+})
+
+const structures = computed<StructureV2[]>(() => bifurcationData.value?.structures ?? [])
+
+// Tous les hashtags uniques triés
+const allHashtags = computed<string[]>(() => {
+  const set = new Set<string>()
+  structures.value.forEach(s => s.hashtags.forEach(h => set.add(h)))
+  return Array.from(set).sort()
+})
+
+// ── Filtrage ───────────────────────────────────────────────────────────────
+const filtered = computed<StructureV2[]>(() => {
+  let result = structures.value
+
+  // Filtre texte
+  if (search.value.trim()) {
+    const q = search.value.toLowerCase()
+    result = result.filter(
+      s =>
+        s.nom.toLowerCase().includes(q) ||
+        s.ville.toLowerCase().includes(q) ||
+        s.description_courte.toLowerCase().includes(q) ||
+        s.hashtags.some(h => h.toLowerCase().includes(q))
+    )
+  }
+
+  // Filtre famille - F6 = badge_f6_recherche_politique, pas famille_principale
+  if (selectedFamille.value !== null) {
+    if (selectedFamille.value === 6) {
+      result = result.filter(s => (s.badges as any)?.f6_recherche_politique === true)
+    } else {
+      result = result.filter(
+        s => s.famille_principale === selectedFamille.value ||
+          (s.familles_secondaires ?? []).includes(selectedFamille.value!)
+      )
+    }
+  }
+
+  // Filtre hashtags (AND logique si plusieurs)
+  if (selectedHashtags.value.length) {
+    result = result.filter(
+      s => selectedHashtags.value.every(h => s.hashtags.includes(h))
+    )
+  }
+
+  return result
+})
+
+const hasActiveFilters = computed(
+  () => !!search.value || selectedFamille.value !== null || selectedHashtags.value.length > 0
+)
+
+function resetFilters() {
+  search.value = ''
+  selectedFamille.value = null
+  selectedHashtags.value = []
 }
 
-// Sauvegarde les filtres courants dans sessionStorage pour le bouton retour des fiches
-function storeFiltersForBack() {
-  if (typeof window === 'undefined') return
-  const q: Record<string, string> = {}
-  if (search.value) q.q = search.value
-  if (echelle.value.length) q.echelle = echelle.value.join(',')
-  if (fonctions.value.length) q.fonctions = fonctions.value.join(',')
-  if (territoire.value) q.territoire = territoire.value
-  if (territoireMode.value === 'outremer') q.mode = 'outremer'
-  const qs = new URLSearchParams(q).toString()
-  sessionStorage.setItem('nav_back_filters', qs)
-}
+// Structures métropole (pays != DOM-TOM, et avec coordonnées)
+// Pour simplifier : toutes les structures (la carte gère les sans-coords)
+const metropoleStructures = computed<StructureV2[]>(() => filtered.value)
 
-function onSearch(v: string) { search.value = v; syncUrl(); storeFiltersForBack() }
-function onMode(v: string) { territoireMode.value = v; syncUrl(); storeFiltersForBack() }
-function onEchelle(v: string[]) { echelle.value = v; syncUrl(); storeFiltersForBack() }
-function onFonctions(v: string[]) { fonctions.value = v; syncUrl(); storeFiltersForBack() }
-function onTerritoire(v: string | null) { territoire.value = v; syncUrl(); storeFiltersForBack() }
+// Outre-mer : pas de structures V2 DOM-TOM pour l'instant - garder le composant existant vide
+// OutremerMap attend le format Org legacy - on passe un tableau vide
+const outremerOrgsLegacy = computed(() => [])
+const selectedIdLegacyNum = computed(() => null)
 
-function onSelectOrg(id: number) {
+// ── Sélection ─────────────────────────────────────────────────────────────
+function onSelectStructure(id: string) {
   selectedId.value = selectedId.value === id ? null : id
-  // Desktop : ouvrir le modal fiche
   if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
     ficheModalId.value = id
     ficheModalOpen.value = true
   }
 }
 
-// Tap card mobile → ouvre la fiche détaillée
-function onSelectOrgMobile(id: number) {
+function onSelectStructureMobile(id: string) {
   selectedId.value = id
-  storeFiltersForBack()
-  router.push(`/fiche/${id}`)
+  ficheModalId.value = id
+  ficheModalOpen.value = true
 }
 
-function onHoverOrg(id: number | null) {
-  if (id !== null) selectedId.value = id
-}
-
-const hasActiveFilters = computed(() =>
-  !!search.value || echelle.value.length > 0 || fonctions.value.length > 0 || !!territoire.value
-)
-
-function resetFilters() {
-  search.value = ''
-  echelle.value = []
-  fonctions.value = []
-  territoire.value = null
-  router.replace({ query: undefined })
-}
-
-// Tagging compact mobile — toggle direct
-function toggleEchelle(opt: string) {
-  if (echelle.value.includes(opt)) {
-    onEchelle(echelle.value.filter(v => v !== opt))
-  } else {
-    onEchelle([...echelle.value, opt])
-  }
-}
-
-function toggleFonction(fn: string) {
-  if (fonctions.value.includes(fn)) {
-    onFonctions(fonctions.value.filter(f => f !== fn))
-  } else {
-    onFonctions([...fonctions.value, fn])
-  }
-}
-
-// Sync recherche depuis app.vue top nav (via URL ?q=)
-watch(() => route.query.q, (v) => {
-  search.value = (v as string) ?? ''
-})
-
-// ── Données ───────────────────────────────────────────────────────────────
-const { data, pending, error } = await useFetch<{ list: Org[]; source: string }>('/api/organisations')
-
-const orgs = computed<Org[]>(() => data.value?.list ?? [])
-const dataSource = computed(() => data.value?.source ?? 'nocodb')
-
-// Fiche aléatoire — réagit au ?random=1
-watch(() => route.query.random, (v) => {
-  if (v === '1' && orgs.value.length > 0) {
-    const randomOrg = orgs.value[Math.floor(Math.random() * orgs.value.length)]
-    router.replace({ path: `/fiche/${randomOrg.Id}` })
-  }
-})
-
-// ── Filtrage côté client ──────────────────────────────────────────────────
-const filtered = computed<Org[]>(() => {
-  let result = orgs.value
-
-  if (search.value.trim()) {
-    const q = search.value.toLowerCase()
-    result = result.filter(
-      (o) =>
-        o.nom?.toLowerCase().includes(q) ||
-        o.localisation_ville?.toLowerCase().includes(q)
-    )
-  }
-
-  if (echelle.value.length) {
-    result = result.filter((o) => o.echelle && echelle.value.includes(o.echelle))
-  }
-
-  if (fonctions.value.length) {
-    // Garde les orgs qui matchent au moins 1 fonction sélectionnée
-    result = result.filter((o) => {
-      const orgFns = (o.tags_fonction ?? '').split(',').map((f) => f.trim()).filter(Boolean)
-      return fonctions.value.some((fn) => orgFns.includes(fn))
-    })
-    // Tri par score pondéré : priorité 1 (1er cliqué) = poids le plus fort
-    const n = fonctions.value.length
-    const score = (o: Org) =>
-      fonctions.value.reduce((s, fn, i) => {
-        const fns = (o.tags_fonction ?? '').split(',').map((f) => f.trim()).filter(Boolean)
-        return s + (fns.includes(fn) ? (n - i) : 0)
-      }, 0)
-    result = [...result].sort((a, b) => score(b) - score(a))
-  }
-
-  if (territoire.value) {
-    result = result.filter((o) => o.territoire === territoire.value)
-  }
-
-  return result
-})
-
-const DOM_TOM = ['Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte']
-const DOM_TOM_LIST = DOM_TOM
-
-const metropoleOrgs = computed<Org[]>(() =>
-  filtered.value.filter(o => !o.territoire || !DOM_TOM.includes(o.territoire))
-)
-
-const outremerOrgs = computed<Org[]>(() => {
-  if (territoire.value && DOM_TOM.includes(territoire.value)) {
-    return filtered.value.filter(o => o.territoire === territoire.value)
-  }
-  return filtered.value.filter(o => o.territoire && DOM_TOM.includes(o.territoire))
-})
-
-const outremerCountByDom = computed<Record<string, number>>(() => {
-  const counts: Record<string, number> = {}
-  DOM_TOM.forEach(d => { counts[d] = 0 })
-  filtered.value.forEach(o => {
-    if (o.territoire && DOM_TOM.includes(o.territoire)) {
-      counts[o.territoire] = (counts[o.territoire] ?? 0) + 1
-    }
-  })
-  return counts
-})
-
-// ── Compteurs ─────────────────────────────────────────────────────────────
-const ECHELLES = ['National', 'Régional', 'Local'] as const
-const ECHELLE_LABELS: Record<string, string> = { National: 'Nat', Régional: 'Rég', Local: 'Loc' }
-const FONCTIONS = ['Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier', 'Comptabilité', 'Développement', 'Formation', "Gestion d'agence", 'Santé mentale'] as const
-const TERRITOIRES = ['Métropole', 'Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte']
-
-const echelleCount = computed<Record<string, number>>(() => {
-  const counts: Record<string, number> = {}
-  ECHELLES.forEach((e) => { counts[e] = 0 })
-  orgs.value.forEach((o) => { if (o.echelle) counts[o.echelle] = (counts[o.echelle] ?? 0) + 1 })
-  return counts
-})
-
-const fonctionCount = computed<Record<string, number>>(() => {
-  const counts: Record<string, number> = {}
-  FONCTIONS.forEach((f) => { counts[f] = 0 })
-  orgs.value.forEach((o) => {
-    const fns = (o.tags_fonction ?? '').split(',').map((f) => f.trim()).filter(Boolean)
-    fns.forEach((fn) => { counts[fn] = (counts[fn] ?? 0) + 1 })
-  })
-  return counts
-})
-
-const territoireCount = computed<Record<string, number>>(() => {
-  const counts: Record<string, number> = {}
-  TERRITOIRES.forEach((t) => { counts[t] = 0 })
-  orgs.value.forEach((o) => { if (o.territoire) counts[o.territoire] = (counts[o.territoire] ?? 0) + 1 })
-  counts['Métropole'] = orgs.value.filter(o => !o.territoire || !DOM_TOM.includes(o.territoire)).length
-  return counts
-})
-
-// ── Helpers ───────────────────────────────────────────────────────────────
-function fonctionsList(org: Org): string[] {
-  return (org.tags_fonction ?? '').split(',').map((f) => f.trim()).filter(Boolean).slice(0, 3)
-}
-
-useHead({ title: 'AEP — Cartographie de l\'écologie politique architecturale' })
+useHead({ title: "AEP - Réseaux de bifurcation architecturale" })
 </script>
-
-<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/media.vue

@@ -1,590 +0,0 @@
-<template>
-  <div class="media-page" style="background: var(--nav-bg);">
-
-    <!-- ZONE PRINCIPALE (pleine largeur, pas de sidebar) -->
-    <main class="media-main">
-
-      <!-- Header onglet -->
-      <div class="shrink-0 px-5 py-3"
-        style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt); display:flex; align-items:center; justify-content:space-between; gap:12px;">
-        <div>
-          <h1 class="font-bold text-base" style="color: var(--nav-text);">ATIS Media</h1>
-          <p class="text-xs mt-0.5" style="color: var(--nav-text-muted);">
-            {{ corpusCount }} auteurs / {{ livresCount }} livres ingeres dans le RAG -
-            <a href="https://bonpote.com/la-carte-des-pensees-ecologiques/"
-              target="_blank" rel="noopener"
-              style="color: var(--nav-primary, #3b6ea5); text-decoration: underline; text-underline-offset: 2px;">
-              carte FRACAS Bonpote V2
-            </a>
-          </p>
-        </div>
-        <button
-          @click="ragInfoOpen = true"
-          title="A propos du RAG FRACAS"
-          style="width:26px;height:26px;border-radius:50%;border:1.5px solid var(--nav-text-muted);color:var(--nav-text-muted);font-size:0.72rem;font-weight:700;cursor:pointer;flex-shrink:0;background:var(--nav-bg-alt);display:flex;align-items:center;justify-content:center;"
-          aria-label="A propos du RAG">
-          i
-        </button>
-      </div>
-
-      <!-- Conteneur split / plein ecran -->
-      <div class="layout-container">
-
-        <!-- Slot carte D3 -->
-        <div
-          class="carte-slot"
-          :class="[
-            layoutMode === 'split' ? 'carte-split' : '',
-            layoutMode === 'carte-full' ? 'carte-full' : '',
-            layoutMode === 'chatbot-full' ? 'carte-hidden' : '',
-          ]"
-          :style="layoutMode === 'split' ? { flexBasis: carteFlexBasis } : {}"
-        >
-          <ClientOnly>
-            <CartePensees
-              ref="cartePenseesRef"
-              :data="penseesData"
-              :active="true"
-              @select-auteur="onSelectAuteur"
-              @select-ecole="onSelectEcole"
-            />
-            <template #fallback>
-              <div class="w-full h-full flex items-center justify-center" style="color: var(--nav-text-muted);">
-                Chargement de la carte...
-              </div>
-            </template>
-          </ClientOnly>
-        </div>
-
-        <!-- Barre de toggle -->
-        <div class="layout-toggle-bar shrink-0">
-          <button
-            @click="setLayoutMode('carte-full')"
-            :class="{ active: layoutMode === 'carte-full' }"
-            class="toggle-btn"
-            title="Carte en plein ecran"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
-              <line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
-            </svg>
-            Carte plein ecran
-          </button>
-          <button
-            v-if="layoutMode !== 'split'"
-            @click="setLayoutMode('split')"
-            class="toggle-btn"
-            title="Vue partagee"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="12" x2="21" y2="12"/>
-            </svg>
-            Vue partagee
-          </button>
-          <button
-            @click="setLayoutMode('chatbot-full')"
-            :class="{ active: layoutMode === 'chatbot-full' }"
-            class="toggle-btn"
-            title="Chatbot en plein ecran"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-            </svg>
-            Chatbot plein ecran
-          </button>
-          <button
-            @click="setLayoutMode('bonpote')"
-            :class="{ active: layoutMode === 'bonpote' }"
-            class="toggle-btn"
-            title="A propos de la carte FRACAS Bonpote V2"
-            style="margin-left: auto;"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <circle cx="12" cy="12" r="10"/><polyline points="12 8 12 12 14 14"/>
-            </svg>
-            Bonpote V2
-          </button>
-        </div>
-
-        <!-- Poignee draggable (visible uniquement en mode split, pas sur mobile) -->
-        <div
-          v-if="layoutMode === 'split'"
-          class="split-handle"
-          @mousedown.prevent="onHandleMousedown"
-          title="Redimensionner"
-        >
-          <span class="split-handle-grip"></span>
-        </div>
-
-        <!-- Slot chatbot inline -->
-        <div
-          class="chatbot-slot"
-          :class="[
-            layoutMode === 'split' ? 'chatbot-split' : '',
-            layoutMode === 'chatbot-full' ? 'chatbot-full-mode' : '',
-            layoutMode === 'carte-full' ? 'chatbot-hidden' : '',
-          ]"
-          :style="layoutMode === 'split' ? { flexBasis: chatbotFlexBasis } : {}"
-        >
-          <ClientOnly>
-            <ChatbotPensees :auteurContext="chatbotAuteur" :inline="true" />
-          </ClientOnly>
-        </div>
-
-        <!-- Vue Bonpote V2 -->
-        <div
-          v-if="layoutMode === 'bonpote'"
-          class="flex-1 overflow-y-auto px-6 py-8"
-          style="max-width: 680px; margin: 0 auto;"
-        >
-          <div class="mb-6">
-            <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color: var(--nav-text-muted);">Reference editoriale</p>
-            <h2 class="text-xl font-bold mb-3" style="color: var(--nav-text);">Carte FRACAS des pensees ecologiques</h2>
-            <p class="text-sm leading-relaxed mb-4" style="color: var(--nav-text);">
-              FRACAS (Familles, Racines et Arpentages des Courants et Alternatives Solidaires) est une carte des ecoles de pensee ecologique publiee par Bonpote en octobre 2024. Elle reference ~140 auteurs et autrices reparti-es en 10 ecoles de pensee, depuis l'ecosocialisme jusqu'a l'ethique environnementale.
-            </p>
-            <p class="text-sm leading-relaxed mb-6" style="color: var(--nav-text);">
-              Le RAG ATIS est construit sur cette reference : chaque auteur ingere dans la bibliotheque correspond a une entree de la carte FRACAS. Les ecoles de pensee, les positions et les couleurs de notre carte sont transposees 1:1 depuis Bonpote V2.
-            </p>
-            <div class="flex flex-col gap-3">
-              <a href="https://bonpote.com/la-carte-des-pensees-ecologiques/"
-                target="_blank" rel="noopener"
-                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity"
-                style="background: var(--nav-primary, #3b6ea5); color: white; font-size: 0.875rem; font-weight: 600; text-decoration: none;">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
-                Lire l'article Bonpote + carte interactive
-              </a>
-              <a href="https://bonpote.com/wp-content/uploads/2024/10/FRACAS_BONPOTE_CARTE_VERSO_V2-OCT2024.pdf"
-                target="_blank" rel="noopener"
-                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity"
-                style="background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; font-weight: 500; text-decoration: none;">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
-                Telecharger le poster PDF (recto/verso)
-              </a>
-              <button
-                @click="setLayoutMode('split')"
-                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity text-left"
-                style="background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer;">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-                Interroger le RAG ATIS sur ces pensees
-              </button>
-            </div>
-          </div>
-          <div>
-            <p class="text-xs font-bold uppercase tracking-widest mb-3" style="color: var(--nav-text-muted);">Les 10 ecoles de pensee (FRACAS V2)</p>
-            <div class="flex flex-col gap-2">
-              <div v-for="ecole in (penseesData?.ecoles ?? [])" :key="ecole.id"
-                class="flex items-start gap-3 px-3 py-2 rounded-lg"
-                style="background: var(--nav-bg-alt);">
-                <span class="w-3 h-3 rounded-full shrink-0 mt-1" :style="`background:${ecole.color};`"></span>
-                <div>
-                  <p class="text-sm font-semibold" style="color: var(--nav-text);">{{ ecole.label }}</p>
-                  <p class="text-xs mt-0.5 leading-relaxed" style="color: var(--nav-text-muted);">{{ ecole.description }}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    </main>
-
-    <!-- Fiche auteur modal -->
-    <FicheAuteur
-      :open="ficheOpen"
-      :auteurId="ficheAuteurId"
-      :data="penseesData"
-      @close="ficheOpen = false"
-      @interroger-rag="onInterrogerRag"
-    />
-
-    <!-- Fiche ecole modal -->
-    <FicheEcole
-      :open="ficheEcoleOpen"
-      :ecoleId="ficheEcoleId"
-      :data="penseesData"
-      @close="ficheEcoleOpen = false"
-      @select-auteur="onSelectAuteurFromEcole"
-      @interroger-ecole="onInterrogerEcole"
-    />
-
-    <!-- Modal info RAG -->
-    <Teleport to="body">
-      <Transition name="backdrop">
-        <div v-if="ragInfoOpen" class="fixed inset-0 z-[2000]" style="background:rgba(26,34,56,0.55);" @click="ragInfoOpen = false" aria-hidden="true" />
-      </Transition>
-      <Transition name="modal">
-        <div v-if="ragInfoOpen" class="fixed z-[2001] left-1/2 flex flex-col"
-          style="top:50%;transform:translate(-50%,-50%);width:min(580px,94vw);max-height:85vh;background:var(--nav-bg);border-radius:14px;box-shadow:0 16px 64px rgba(26,34,56,0.28);overflow:hidden;"
-          role="dialog" aria-modal="true" aria-label="A propos du RAG FRACAS">
-          <div class="flex items-center justify-between px-5 py-4 shrink-0"
-            style="border-bottom:2px solid var(--nav-bg-alt);background:var(--nav-surface);">
-            <h2 class="font-bold text-base" style="color:var(--nav-text);">FRACAS - Bibliotheque des pensees ecologiques</h2>
-            <button @click="ragInfoOpen = false" class="ml-3 shrink-0 flex items-center justify-center w-8 h-8 rounded-full hover:opacity-70"
-              style="background:var(--nav-bg-alt);color:var(--nav-text-muted);" aria-label="Fermer">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
-                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-              </svg>
-            </button>
-          </div>
-          <div class="flex-1 overflow-y-auto px-5 py-4" style="color:var(--nav-text);font-size:0.875rem;line-height:1.6;">
-            <p class="mb-3">Une bibliotheque parlante politisee - des pensees ecologiques de gauche, organisees pour aider a creer une pensee complexe et nuancee, critiquer le recit dominant et soutenir des alternatives concretes et des projets collectifs.</p>
-            <p class="mb-4" style="color:var(--nav-text-muted);font-size:0.8rem;">Projet open source, ouvert a toutes et a tous - <a href="https://bonpote.com/la-carte-des-pensees-ecologiques/" target="_blank" rel="noopener" style="text-decoration:underline;">article + carte FRACAS Bonpote V2</a>.</p>
-            <div class="flex flex-col gap-3">
-              <div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
-                <p class="font-semibold mb-1" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Ce qu'est un RAG</p>
-                <p>Les textes sont vectorises dans un espace de 662 dimensions - chaque livre devient un nuage de points semantiques. La proximite entre les points capture la proximite entre les idees, pas les mots.</p>
-              </div>
-              <div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
-                <p class="font-semibold mb-1" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Chunking intelligent</p>
-                <p>Lors de l'ingestion, nous selectionnons les entites cles (concepts, auteurs, relations entre idees) plutot que de decouper mecaniquement les textes.</p>
-              </div>
-              <div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
-                <p class="font-semibold mb-2" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Trois couches d'analyse</p>
-                <div class="flex flex-col gap-1.5">
-                  <div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Fond</span><span>Les idees, les theses, les arguments - ce qu'on interroge directement.</span></div>
-                  <div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Forme</span><span>Les modeles narratifs, la rhetorique, la construction argumentative.</span></div>
-                  <div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Structure</span><span>L'architecture des livres - comment les auteurs construisent leur pensee.</span></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-interface EcoleData { id: string; label: string; description: string; color: string; x_hint: number; y_hint: number }
-interface LivreRag { slug: string; titre: string; annee: number; couches: string[] }
-interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string }
-interface PenseesData { meta: any; ecoles: EcoleData[]; auteurs: AuteurData[] }
-
-type LayoutMode = 'split' | 'carte-full' | 'chatbot-full' | 'bonpote'
-
-const STORAGE_KEY = 'media-layout-mode'
-const SPLIT_RATIO_KEY = 'media-split-ratio'
-const DEFAULT_SPLIT_RATIO = 0.66
-
-const ficheOpen = ref(false)
-const ficheAuteurId = ref<string | null>(null)
-const ficheEcoleOpen = ref(false)
-const ficheEcoleId = ref<string | null>(null)
-const ragInfoOpen = ref(false)
-const chatbotAuteur = ref<string | null>(null)
-const penseesData = ref<PenseesData | null>(null)
-const layoutMode = ref<LayoutMode>('split')
-const cartePenseesRef = ref<{ triggerResize: () => void } | null>(null)
-
-// Ratio de la carte vs chatbot en mode split (0.2 a 0.8)
-const splitRatio = ref(DEFAULT_SPLIT_RATIO)
-const carteFlexBasis = computed(() => `${splitRatio.value * 100}%`)
-const chatbotFlexBasis = computed(() => `${(1 - splitRatio.value) * 100}%`)
-
-const corpusCount = computed(() => penseesData.value?.auteurs.filter((a: any) => a.ingere).length ?? 0)
-const livresCount = computed(() => {
-  if (!penseesData.value) return 0
-  const slugs = new Set<string>()
-  penseesData.value.auteurs
-    .filter((a: any) => a.ingere)
-    .forEach((a: any) => (a.livres_rag ?? []).forEach((l: any) => slugs.add(l.slug)))
-  return slugs.size
-})
-
-// Logique poignee draggable
-let dragStartY = 0
-let dragStartRatio = DEFAULT_SPLIT_RATIO
-let containerHeight = 0
-
-function onHandleMousedown(e: MouseEvent) {
-  dragStartY = e.clientY
-  dragStartRatio = splitRatio.value
-  // Hauteur du layout-container (carte + handle + chatbot)
-  const container = (e.target as HTMLElement)?.closest('.layout-container') as HTMLElement | null
-  containerHeight = container ? container.clientHeight : window.innerHeight
-
-  window.addEventListener('mousemove', onHandleMousemove)
-  window.addEventListener('mouseup', onHandleMouseup)
-}
-
-function onHandleMousemove(e: MouseEvent) {
-  const delta = e.clientY - dragStartY
-  const newRatio = dragStartRatio + delta / containerHeight
-  splitRatio.value = Math.min(0.80, Math.max(0.20, newRatio))
-}
-
-function onHandleMouseup() {
-  window.removeEventListener('mousemove', onHandleMousemove)
-  window.removeEventListener('mouseup', onHandleMouseup)
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(SPLIT_RATIO_KEY, String(splitRatio.value))
-  }
-  // Notifier D3 du resize apres relachement
-  cartePenseesRef.value?.triggerResize()
-}
-
-onMounted(async () => {
-  if (typeof window !== 'undefined') {
-    const saved = localStorage.getItem(STORAGE_KEY) as LayoutMode | null
-    if (saved && ['split', 'carte-full', 'chatbot-full', 'bonpote'].includes(saved)) {
-      layoutMode.value = saved
-    }
-    const savedRatio = parseFloat(localStorage.getItem(SPLIT_RATIO_KEY) ?? '')
-    if (!isNaN(savedRatio) && savedRatio >= 0.20 && savedRatio <= 0.80) {
-      splitRatio.value = savedRatio
-    }
-    // Afficher le popup info RAG a la premiere visite
-    if (!localStorage.getItem('rag-fracas-info-seen')) {
-      ragInfoOpen.value = true
-      localStorage.setItem('rag-fracas-info-seen', '1')
-    }
-  }
-  try {
-    penseesData.value = await $fetch<PenseesData>('/data/auteurs-pensees.json?v=4.2')
-  } catch (e) {
-    console.error('Erreur chargement auteurs-pensees.json', e)
-  }
-})
-
-// Persister + reset D3 apres transition
-function setLayoutMode(mode: LayoutMode) {
-  layoutMode.value = mode
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(STORAGE_KEY, mode)
-  }
-  // Restart simulation D3 apres la fin de la transition CSS (300ms)
-  if (mode !== 'chatbot-full') {
-    setTimeout(() => {
-      cartePenseesRef.value?.triggerResize()
-    }, 350)
-  }
-}
-
-watch(layoutMode, (v) => {
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(STORAGE_KEY, v)
-  }
-})
-
-function onSelectAuteur(id: string) {
-  ficheAuteurId.value = id
-  ficheOpen.value = true
-  chatbotAuteur.value = null
-}
-
-function onSelectEcole(id: string) {
-  ficheEcoleId.value = id
-  ficheEcoleOpen.value = true
-}
-
-function onSelectAuteurFromEcole(auteurId: string) {
-  ficheEcoleOpen.value = false
-  onSelectAuteur(auteurId)
-}
-
-function onInterrogerEcole(ecoleId: string) {
-  ficheEcoleOpen.value = false
-  const ecole = penseesData.value?.ecoles.find(e => e.id === ecoleId)
-  chatbotAuteur.value = ecole?.label ?? null
-  if (layoutMode.value === 'carte-full') setLayoutMode('split')
-}
-
-function onInterrogerRag(auteurId: string) {
-  ficheOpen.value = false
-  const auteur = penseesData.value?.auteurs.find(a => a.id === auteurId)
-  chatbotAuteur.value = auteur?.nom ?? null
-  // Basculer en split pour que le chatbot soit visible
-  if (layoutMode.value === 'carte-full') {
-    setLayoutMode('split')
-  }
-}
-
-useHead({ title: 'AEP - Media - Carte FRACAS Bonpote' })
-</script>
-
-<style scoped>
-/* Page container : flex column, prend toute la hauteur viewport */
-.media-page {
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-}
-
-.media-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  position: relative;
-}
-
-/* Conteneur des slots carte + toggle + chatbot */
-.layout-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
-}
-
-/* --- Slot carte --- */
-.carte-slot {
-  overflow: hidden;
-  position: relative;
-  transition: opacity 0.2s ease;
-}
-
-.carte-split {
-  flex: 0 0 66%;
-  min-height: 0;
-  opacity: 1;
-}
-
-.carte-full {
-  flex: 1 1 100%;
-  min-height: 0;
-  opacity: 1;
-}
-
-.carte-hidden {
-  flex: 0 0 0;
-  height: 0;
-  opacity: 0;
-  overflow: hidden;
-}
-
-/* --- Barre de toggle --- */
-.layout-toggle-bar {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  background: var(--nav-bg);
-  border-top: 1px solid rgba(180, 170, 160, 0.22);
-  border-bottom: 1px solid rgba(180, 170, 160, 0.22);
-  min-height: 38px;
-}
-
-.toggle-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 4px 10px;
-  border-radius: 6px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  cursor: pointer;
-  background: var(--nav-bg-alt);
-  color: var(--nav-text-muted);
-  border: 1px solid transparent;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
-}
-
-.toggle-btn:hover {
-  background: var(--nav-surface);
-  color: var(--nav-text);
-}
-
-.toggle-btn.active {
-  background: var(--nav-primary);
-  color: var(--nav-text-on-primary);
-  border-color: var(--nav-primary);
-}
-
-/* --- Poignee draggable entre carte et chatbot --- */
-.split-handle {
-  flex-shrink: 0;
-  height: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: row-resize;
-  background: transparent;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-}
-
-.split-handle:hover {
-  background: rgba(180, 170, 160, 0.18);
-}
-
-.split-handle-grip {
-  display: block;
-  width: 32px;
-  height: 4px;
-  border-radius: 2px;
-  background: repeating-linear-gradient(
-    to bottom,
-    rgba(160, 150, 140, 0.55) 0px,
-    rgba(160, 150, 140, 0.55) 1px,
-    transparent 1px,
-    transparent 3px
-  );
-}
-
-/* Masquer la poignee sur mobile (ratio fixe) */
-@media (max-width: 767px) {
-  .split-handle {
-    display: none;
-  }
-}
-
-/* --- Slot chatbot --- */
-.chatbot-slot {
-  overflow: hidden;
-  position: relative;
-  transition: opacity 0.2s ease;
-  border-top: 1px solid rgba(180, 170, 160, 0.28);
-}
-
-.chatbot-split {
-  flex: 0 0 34%;
-  min-height: 0;
-  opacity: 1;
-}
-
-.chatbot-full-mode {
-  flex: 1 1 100%;
-  min-height: 0;
-  opacity: 1;
-}
-
-.chatbot-hidden {
-  flex: 0 0 0;
-  height: 0;
-  opacity: 0;
-  overflow: hidden;
-}
-
-/* --- Transitions modal RAG info --- */
-.backdrop-enter-active,.backdrop-leave-active { transition: opacity 0.2s; }
-.backdrop-enter-from,.backdrop-leave-to { opacity: 0; }
-.modal-enter-active { transition: opacity 0.2s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
-.modal-leave-active { transition: opacity 0.18s, transform 0.18s ease-in; }
-.modal-enter-from { opacity: 0; transform: translate(-50%,-48%) scale(0.94); }
-.modal-leave-to { opacity: 0; transform: translate(-50%,-48%) scale(0.96); }
-
-/* --- Responsive mobile (<768px) --- */
-/* Stack vertical : carte 60vh + chatbot 40vh en mode split */
-@media (max-width: 767px) {
-  .carte-split {
-    flex: 0 0 60vh;
-    height: 60vh;
-  }
-
-  .chatbot-split {
-    flex: 0 0 calc(40vh - 38px);
-    height: calc(40vh - 38px);
-  }
-
-  .toggle-btn span,
-  .toggle-btn {
-    font-size: 0.7rem;
-    padding: 3px 7px;
-  }
-}
-</style>

pages/rag.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex flex-col items-center justify-center h-full gap-6" style="background: var(--nav-bg);">
+    <div class="text-center max-w-md px-6">
+      <div
+        class="inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-5"
+        style="background: var(--nav-bg-alt);"
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-muted);">
+          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
+          <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
+          <line x1="12" y1="22.08" x2="12" y2="12"/>
+        </svg>
+      </div>
+      <h1 class="text-2xl font-bold mb-3" style="color: var(--nav-text);">RAG — Retrieval Augmented Generation</h1>
+      <p class="text-sm leading-relaxed mb-6" style="color: var(--nav-text-muted);">
+        Une base de connaissances interrogeable par IA — textes, rapports, manifestes et ressources documentaires sur l'architecture d'écologie politique.
+      </p>
+      <p class="text-xs font-semibold uppercase tracking-widest mb-6" style="color: var(--nav-text-muted); opacity: 0.6;">
+        Bientôt disponible
+      </p>
+      <NuxtLink
+        to="/"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all hover:opacity-80"
+        style="background: var(--nav-primary); color: var(--nav-text-on-primary);"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+          <line x1="19" y1="12" x2="5" y2="12"/>
+          <polyline points="12 19 5 12 12 5"/>
+        </svg>
+        Retour à l'écosystème
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+useHead({ title: 'RAG — AEP (bientôt disponible)' })
+</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,
-          pour les <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 archi ↔ particulier.
+          Évaluées sur 5 axes éthiques — rémunération, transparence, pratiques pro, écologie, qualité du matching.
+          Cible : archi freelance indépendant en France.
         </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"
-          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;"
+          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); 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-inner { max-width: 680px; margin: 0 auto; }
+.taff-header { padding: 2.5rem 1.5rem 1.5rem; border-bottom: 1px solid var(--nav-bg-alt); }
+.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-cible { font-size: 0.875rem; color: var(--nav-text-muted); line-height: 1.55; margin-bottom: 1rem; font-style: italic; }
-.taff-cible strong { color: var(--nav-text); font-style: normal; }
-.taff-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
+.taff-subtitle { font-size: 0.9375rem; color: var(--nav-text-muted); line-height: 1.6; margin-bottom: 1rem; }
+.taff-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; }
 .taff-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-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-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.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); }
-
-/* ── 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); }
+.taff-modal-enter-from, .taff-modal-leave-to { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
 </style>

scripts/build_authors_v3.mjs

@@ -1,376 +0,0 @@
-// Build auteurs-pensees.json v3.0 — Phase 8.A
-// Sync corpus JSON unifié : Bonpote authors + LightRAG ingestion flags
-
-import fs from 'node:fs';
-import path from 'node:path';
-
-const JSON_PATH = 'C:\\Users\\jules\\Dropbox\\ATIS - IPCJRA\\1 PROJETS\\TECH  - infra VPS, website pro, RAG\\nav-carte\\public\\data\\auteurs-pensees.json';
-
-// === LightRAG slug prefixes (from /documents endpoint 2026-05-12) ===
-const LIGHTRAG_PREFIX_TO_AUTHOR_SLUG = {
-  bookchin: 'murray-bookchin',
-  brand: 'steward-brand',
-  carson: 'rachel-carson',
-  charbonneau: 'bernard-charbonneau',
-  descola: 'philippe-descola',
-  despret: 'vinciane-despret',
-  eaubonne: 'francoise-deaubonne',
-  ellul: 'jacques-ellul',
-  federici: 'silvia-federici',
-  ferdinand: 'malcolm-ferdinand',
-  figueres: 'christiana-figueres',
-  georgescu: 'nicholas-georgescu-roegen',
-  gorz: 'andre-gorz',
-  graeber: 'david-graeber',
-  keith: 'david-keith',
-  klein: 'naomi-klein',
-  kropotkine: 'pierre-kropotkine',
-  latouche: 'serge-latouche',
-  latour: 'bruno-latour',
-  lowy: 'michael-lowy',
-  malm: 'andreas-malm',
-  marx: 'karl-marx',
-  meadows: 'donella-meadows',
-  morizot: 'baptiste-morizot',
-  naess: 'arne-naess',
-  ouassak: 'fatima-ouassak',
-  reclus: 'elisee-reclus',
-  saito: 'kohei-saito',
-  servigne: 'pablo-servigne',
-  shiva: 'vandana-shiva',
-  stengers: 'isabelle-stengers',
-  vettese: 'troy-vettese',
-};
-
-const INGESTED_AUTHOR_SLUGS = new Set(Object.values(LIGHTRAG_PREFIX_TO_AUTHOR_SLUG));
-
-// === Bonpote authors (nom, dates, ecole_principale, ecoles_secondaires[]) ===
-const BONPOTE_AUTHORS = [
-  // Éco-anarchisme
-  ['Pierre Kropotkine', '1842-1921', 'eco-anarchisme', []],
-  ['Élisée Reclus', '1830-1905', 'eco-anarchisme', []],
-  ['Murray Bookchin', '1921-2006', 'eco-anarchisme', []],
-  ['David Graeber', '1961-2020', 'eco-anarchisme', []],
-  ['James C. Scott', '1936-2024', 'eco-anarchisme', []],
-  ['Marshall Sahlins', '1930-2021', 'eco-anarchisme', []],
-  ['Pierre Clastres', '1934-1977', 'eco-anarchisme', []],
-  ['Cornélius Castoriadis', '1922-1997', 'eco-anarchisme', []],
-  ['David Harvey', '1935-', 'eco-anarchisme', ['ecosocialisme']],
-  ['Henri Lefebvre', '1901-1991', 'eco-anarchisme', ['ecosocialisme']],
-  ['Émile Gravelle', '1855-1920', 'eco-anarchisme', []],
-  ['Henri Zisly', '1872-1945', 'eco-anarchisme', []],
-  ['Edward Carpenter', '1844-1929', 'eco-anarchisme', []],
-  ['William Morris', '1834-1896', 'eco-anarchisme', []],
-  ['John Ruskin', '1819-1900', 'eco-anarchisme', []],
-  ['Kirkpatrick Sale', '1937-', 'eco-anarchisme', []],
-  ['Wendell Berry', '1934-', 'eco-anarchisme', []],
-  ['Kristin Ross', '1953-', 'eco-anarchisme', []],
-  ['Theodore Kaczynski', '1942-2023', 'eco-anarchisme', ['technocritique']],
-  ['Saint-Simon', '1760-1825', 'eco-anarchisme', []],
-  ['Auguste Comte', '1798-1857', 'eco-anarchisme', []],
-  ['Alberto Magnaghi', '1941-2023', 'eco-anarchisme', []],
-  ['Peter Berg', '1937-2011', 'eco-anarchisme', []],
-  ['Andreas Malm', '1977-', 'ecosocialisme', ['eco-anarchisme']],
-
-  // Écosocialisme
-  ['Karl Marx', '1818-1883', 'ecosocialisme', []],
-  ['Friedrich Engels', '1820-1895', 'ecosocialisme', []],
-  ['Rosa Luxemburg', '1871-1919', 'ecosocialisme', []],
-  ['Walter Benjamin', '1892-1940', 'ecosocialisme', []],
-  ['John Maynard Keynes', '1883-1946', 'ecosocialisme', []],
-  ['Pascal Lamy', '1947-', 'ecosocialisme', []],
-  ['Ann Pettifor', '1947-', 'ecosocialisme', []],
-  ['Holly Jean Buck', '', 'ecosocialisme', []],
-  ['Cédric Durand', '1975-', 'ecosocialisme', []],
-  ['Kim Stanley Robinson', '1952-', 'ecosocialisme', []],
-  ['André Gorz', '1923-2007', 'ecosocialisme', ['decroissance', 'technocritique']],
-  ['Kohei Saito', '1987-', 'ecosocialisme', ['decroissance']],
-  ['Razmig Keucheyan', '1975-', 'ecosocialisme', []],
-  ['Dominique Méda', '1962-', 'ecosocialisme', []],
-  ['Dominique Bourg', '1953-', 'ecosocialisme', []],
-  ['Troy Vettese', '', 'ecosocialisme', []],
-  ['Loïc Blondiaux', '1962-', 'ecosocialisme', []],
-  ['Drew Pendergrass', '', 'ecosocialisme', []],
-  ['Jason W. Moore', '', 'ecosocialisme', []],
-  ["James O'Connor", '1930-2017', 'ecosocialisme', []],
-  ['Herman Daly', '1938-2022', 'ecosocialisme', ['capitalisme-vert']],
-  ['John Bellamy Foster', '1953-', 'ecosocialisme', []],
-  ['Michael Löwy', '1938-', 'ecosocialisme', []],
-  ['Joel Kovel', '1936-2018', 'ecosocialisme', []],
-  ['Naomi Klein', '1970-', 'ecosocialisme', []],
-
-  // Technocritique
-  ['Jacques Ellul', '1912-1994', 'technocritique', []],
-  ['Bernard Charbonneau', '1910-1996', 'technocritique', []],
-  ['Lewis Mumford', '1895-1990', 'technocritique', []],
-  ['Alain Caillé', '1944-', 'technocritique', []],
-  ['Hans Jonas', '1903-1993', 'technocritique', ['ethiques-environnementales']],
-  ['Herbert Marcuse', '1898-1979', 'technocritique', []],
-  ['Günther Anders', '1902-1992', 'technocritique', []],
-  ['Pierre Fournier', '1937-1973', 'technocritique', []],
-  ['Alexandre Grothendieck', '1928-2014', 'technocritique', []],
-  ['Patrick Viveret', '1948-', 'technocritique', []],
-  ['Philippe Bihouix', '1971-', 'technocritique', []],
-  ['Jean Baudrillard', '1929-2007', 'technocritique', []],
-  ['Serge Latouche', '1940-', 'decroissance', ['technocritique']],
-  ['Ivan Illich', '1926-2002', 'technocritique', ['decroissance']],
-  ['Leopold Kohr', '1909-1994', 'technocritique', ['decroissance']],
-  ['Ernst Schumacher', '1911-1977', 'technocritique', ['decroissance']],
-  ['Nicholas Georgescu-Roegen', '1906-1994', 'decroissance', ['technocritique']],
-
-  // Écoféminismes
-  ["Françoise d'Eaubonne", '1920-2005', 'ecofeminismes', []],
-  ['Vandana Shiva', '1952-', 'ecofeminismes', ['ecologies-decoloniales']],
-  ['Starhawk', '1951-', 'ecofeminismes', []],
-  ['Ariel Salleh', '1944-', 'ecofeminismes', []],
-  ['Maria Mies', '1931-2023', 'ecofeminismes', []],
-  ['Carolyn Merchant', '1936-', 'ecofeminismes', []],
-  ['Silvia Federici', '1942-', 'ecofeminismes', []],
-  ['Val Plumwood', '1939-2008', 'ecofeminismes', []],
-  ['Susan Griffin', '1943-', 'ecofeminismes', []],
-  ['Veronika Bennholdt-Thomsen', '1944-', 'ecofeminismes', []],
-  ['Geneviève Pruvost', '1973-', 'ecofeminismes', []],
-  ['Donna Haraway', '1944-', 'ecofeminismes', ['pensees-vivant']],
-  ['Émilie Hache', '', 'ecofeminismes', []],
-  ['Joanna Macy', '1929-', 'ecofeminismes', ['ethiques-environnementales']],
-
-  // Capitalisme vert
-  ['Bill Gates', '1955-', 'capitalisme-vert', []],
-  ['Christiana Figueres', '1956-', 'capitalisme-vert', []],
-  ['Nicholas Stern', '1946-', 'capitalisme-vert', []],
-  ['Jeffrey Sachs', '1954-', 'capitalisme-vert', []],
-  ['Jared Diamond', '1937-', 'capitalisme-vert', ['decroissance']],
-  ['Jørgen Randers', '1945-', 'capitalisme-vert', ['decroissance']],
-  ['Donella Meadows', '1941-2001', 'decroissance', ['capitalisme-vert']],
-  ['Dennis Meadows', '1942-', 'decroissance', ['capitalisme-vert']],
-  ['Kate Raworth', '1970-', 'capitalisme-vert', []],
-  ['Al Gore', '1948-', 'capitalisme-vert', []],
-  ['Hal Harvey', '1960-', 'capitalisme-vert', []],
-  ['Laurence Tubiana', '1951-', 'capitalisme-vert', []],
-  ['Amory Lovins', '1947-', 'capitalisme-vert', []],
-  ['David Pearce', '1959-', 'capitalisme-vert', []],
-  ['Kerry Turner', '1948-', 'capitalisme-vert', []],
-  ['David Keith', '1963-', 'capitalisme-vert', []],
-  ['Ted Nordhaus', '1965-', 'capitalisme-vert', []],
-  ['Michael Shellenberger', '1971-', 'capitalisme-vert', []],
-  ['Pavan Sukhdev', '1960-', 'capitalisme-vert', []],
-  ['Janine Benyus', '1958-', 'capitalisme-vert', []],
-  ['Robert Costanza', '1950-', 'capitalisme-vert', []],
-  ['Peter Kareiva', '1951-', 'capitalisme-vert', []],
-  ['Michelle Marvier', '', 'capitalisme-vert', []],
-  ['Robert Lalasz', '1915-2003', 'capitalisme-vert', []],
-  ['Steward Brand', '1938-', 'capitalisme-vert', []],
-  ['Paul Crutzen', '1933-2021', 'capitalisme-vert', []],
-  ['Kenneth Boulding', '1910-1993', 'capitalisme-vert', []],
-  ['Eugene Odum', '1913-2002', 'capitalisme-vert', []],
-  ['Howard Odum', '1924-2002', 'capitalisme-vert', []],
-  ['Jean-Marc Jancovici', '1962-', 'capitalisme-vert', []],
-  ['Yves Cochet', '1946-', 'capitalisme-vert', ['decroissance']],
-  ['Pablo Servigne', '1978-', 'decroissance', ['capitalisme-vert']],
-  ['Gauthier Chapelle', '1968-', 'decroissance', ['capitalisme-vert']],
-
-  // Écologies décoloniales
-  ['Malcom Ferdinand', '1985-', 'ecologies-decoloniales', []],
-  ['Frantz Fanon', '1925-1961', 'ecologies-decoloniales', []],
-  ['Édouard Glissant', '1928-2011', 'ecologies-decoloniales', []],
-  ['Aimé Césaire', '1913-2008', 'ecologies-decoloniales', []],
-  ['Mohamad Amer Meziane', '', 'ecologies-decoloniales', []],
-  ['Chico Mendes', '1944-1988', 'ecologies-decoloniales', []],
-  ['Joan Martínez Alier', '1939-', 'ecologies-decoloniales', []],
-  ['Arturo Escobar', '1951-', 'ecologies-decoloniales', []],
-  ['Sous-commandant Marcos', '1957-', 'ecologies-decoloniales', []],
-  ['Alberto Acosta', '1948-', 'ecologies-decoloniales', []],
-  ['Jérôme Baschet', '1960-', 'ecologies-decoloniales', []],
-  ['Fatima Ouassak', '1976-', 'ecofeminismes', ['ecologies-decoloniales']],
-  ['William Acker', '1991-', 'ecologies-decoloniales', []],
-  ['Giorgos Kallis', '1972-', 'ecologies-decoloniales', ['decroissance']],
-  ['Bernard Lambert', '1931-1984', 'ecologies-decoloniales', []],
-
-  // Écofascismes
-  ['Alain de Benoist', '1943-', 'ecofascismes', []],
-  ['Paul Ralph Ehrlich', '1932-', 'ecofascismes', []],
-  ['Garrett Hardin', '1915-2003', 'ecofascismes', []],
-  ['Edward Osborne Wilson', '1929-2021', 'ecofascismes', []],
-  ['Thomas Malthus', '1803-1882', 'ecofascismes', []],
-  ['David Foreman', '1946-2022', 'ecofascismes', []],
-  ['Piero San Giorgio', '1971-', 'ecofascismes', []],
-
-  // Éthique environnementale
-  ['Arne Næss', '1912-2009', 'ethiques-environnementales', []],
-  ['Rachel Carson', '1907-1964', 'ethiques-environnementales', []],
-  ['Aldo Leopold', '1887-1948', 'ethiques-environnementales', []],
-  ['Imanishi Kinji', '1902-1992', 'ethiques-environnementales', []],
-  ['Paul Watson', '1950-', 'ethiques-environnementales', []],
-  ['John Muir', '1838-1914', 'ethiques-environnementales', []],
-  ['Edward Abbey', '1927-1989', 'ethiques-environnementales', []],
-  ['John Baird Callicott', '1941-', 'ethiques-environnementales', []],
-  ['Bill Mollison', '1928-2016', 'ethiques-environnementales', []],
-  ['David Holmgren', '1955-', 'ethiques-environnementales', []],
-  ['Peter Singer', '1946-', 'ethiques-environnementales', []],
-  ['Pierre Rabhi', '1938-2021', 'ethiques-environnementales', []],
-  ['Rob Hopkins', '1968-', 'ethiques-environnementales', []],
-  ['Cyril Dion', '1978-', 'ethiques-environnementales', []],
-  ['Gandhi', '1869-1948', 'ethiques-environnementales', []],
-  ['Gifford Pinchot', '1865-1946', 'ethiques-environnementales', []],
-  ['Lanza del Vasto', '1901-1981', 'ethiques-environnementales', []],
-  ['Jorge Mario Bergoglio', '1936-', 'ethiques-environnementales', []],
-  ['Gary Snyder', '1930-', 'ethiques-environnementales', []],
-  ['Henry David Thoreau', '1817-1862', 'ethiques-environnementales', []],
-  ['Ralph Waldo Emerson', '1803-1882', 'ethiques-environnementales', []],
-  ['José Bové', '1953-', 'ethiques-environnementales', []],
-  ['Glenn Albrecht', '1953-', 'ethiques-environnementales', []],
-
-  // Pensées du vivant
-  ['Bruno Latour', '1947-2022', 'pensees-vivant', []],
-  ['Isabelle Stengers', '1949-', 'pensees-vivant', []],
-  ['Vinciane Despret', '1959-', 'pensees-vivant', []],
-  ['Baptiste Morizot', '1983-', 'pensees-vivant', []],
-  ['Philippe Descola', '1949-', 'pensees-vivant', []],
-  ['Eduardo Viveiros de Castro', '1951-', 'pensees-vivant', []],
-  ['Anna Tsing', '1952-', 'pensees-vivant', []],
-  ['Deborah Bird Rose', '1946-2018', 'pensees-vivant', []],
-  ['Lynn Margulis', '1938-2011', 'pensees-vivant', []],
-  ['James Lovelock', '1919-2022', 'pensees-vivant', []],
-  ['Serge Moscovici', '1925-2014', 'pensees-vivant', []],
-  ['Theodore Roszak', '1933-2011', 'pensees-vivant', []],
-  ['Baruch Spinoza', '1632-1677', 'pensees-vivant', []],
-];
-
-// Special slug overrides (match v2.1 IDs + ligatures)
-const NAME_TO_SLUG_OVERRIDES = {
-  'Malcom Ferdinand': 'malcolm-ferdinand',
-  "Françoise d'Eaubonne": 'francoise-deaubonne',
-  'Donella Meadows': 'donella-meadows',
-  'Dennis Meadows': 'dennis-meadows',
-  'Arne Næss': 'arne-naess',
-  'Jørgen Randers': 'jorgen-randers',
-};
-
-function slugify(name) {
-  // Pre-process special ligatures and chars not handled by NFKD
-  let pre = name
-    .replace(/[æÆ]/g, 'ae')
-    .replace(/[øØ]/g, 'o')
-    .replace(/[œŒ]/g, 'oe')
-    .replace(/ß/g, 'ss');
-  // Remove diacritical marks
-  const noAccent = pre.normalize('NFKD').replace(/[̀-ͯ]/g, '');
-  return noAccent
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-}
-
-function getAuthorSlug(name) {
-  if (NAME_TO_SLUG_OVERRIDES[name]) return NAME_TO_SLUG_OVERRIDES[name];
-  return slugify(name);
-}
-
-function main() {
-  const raw = fs.readFileSync(JSON_PATH, 'utf-8');
-  const data = JSON.parse(raw);
-
-  const existingBySlug = {};
-  for (const a of data.auteurs) existingBySlug[a.id] = a;
-
-  const newAuthors = [];
-  const seenSlugs = new Set();
-
-  for (const [nom, dates, ecolePrincipale, ecolesSecondaires] of BONPOTE_AUTHORS) {
-    const slug = getAuthorSlug(nom);
-    if (seenSlugs.has(slug)) {
-      console.error(`DUPLICATE SKIP: ${nom} -> ${slug}`);
-      continue;
-    }
-    seenSlugs.add(slug);
-
-    const ingere = INGESTED_AUTHOR_SLUGS.has(slug);
-    const ecoles = [ecolePrincipale, ...ecolesSecondaires];
-
-    if (existingBySlug[slug]) {
-      // Preserve enriched entry
-      const entry = { ...existingBySlug[slug], ingere };
-      newAuthors.push(entry);
-    } else {
-      // New minimal entry
-      const bioProvisoire = ingere
-        ? `Auteur·ice ingéré·e dans le RAG ATIS, bio à enrichir lors de PRG-5.`
-        : `Théoricien·ne présent·e sur le poster Bonpote (${ecolePrincipale}), non ingéré·e dans le RAG ATIS.`;
-      newAuthors.push({
-        id: slug,
-        nom,
-        dates,
-        ecoles,
-        ecole_principale: ecolePrincipale,
-        livres_rag: [],
-        theses_cles_attendues: [],
-        bio_courte_provisoire: bioProvisoire,
-        ingere,
-      });
-    }
-  }
-
-  // Preserve any v2.1 author not in Bonpote list
-  for (const [slug, entry] of Object.entries(existingBySlug)) {
-    if (!seenSlugs.has(slug)) {
-      const copy = { ...entry };
-      if (!('ingere' in copy)) copy.ingere = INGESTED_AUTHOR_SLUGS.has(slug);
-      newAuthors.push(copy);
-      seenSlugs.add(slug);
-      console.error(`NOTE: preserved v2.1 author not in Bonpote canonical: ${slug}`);
-    }
-  }
-
-  const auteursCount = newAuthors.length;
-  const auteursIngeresCount = newAuthors.filter(a => a.ingere).length;
-
-  data.meta.version = '3.0';
-  data.meta.updated = '2026-05-12';
-  data.meta.auteurs_count = auteursCount;
-  data.meta.auteurs_ingeres_count = auteursIngeresCount;
-  data.meta.source = 'FRACAS Bonpote V2 oct 2024 + LightRAG corpus 12/05/2026 (v3.0 sync)';
-  data.meta.note_v3_0 = 'Phase 8.A sync corpus unifie : ~140 auteurs Bonpote integres, flag ingere:true/false selon LightRAG VPS. Auteurs non-ingeres = entrees minimales (bio provisoire, livres_rag vide), a enrichir lors de PRG-4/PRG-5.';
-
-  data.auteurs = newAuthors;
-
-  fs.writeFileSync(JSON_PATH, JSON.stringify(data, null, 2), 'utf-8');
-
-  // Validate parse-back
-  const parsedBack = JSON.parse(fs.readFileSync(JSON_PATH, 'utf-8'));
-  if (parsedBack.auteurs.length !== auteursCount) {
-    console.error('PARSE-BACK MISMATCH');
-    process.exit(1);
-  }
-
-  // Stats
-  const schoolsStats = {};
-  for (const a of newAuthors) {
-    const ep = a.ecole_principale || '?';
-    if (!schoolsStats[ep]) schoolsStats[ep] = { total: 0, ingere: 0 };
-    schoolsStats[ep].total++;
-    if (a.ingere) schoolsStats[ep].ingere++;
-  }
-
-  console.log('\n=== JSON v3.0 written ===');
-  console.log(`Total auteurs : ${auteursCount}`);
-  console.log(`Ingeres       : ${auteursIngeresCount}`);
-  console.log(`Non-ingeres   : ${auteursCount - auteursIngeresCount}`);
-  console.log(`Parse-back    : OK (${parsedBack.auteurs.length} auteurs)`);
-  console.log('\nPer school (ecole_principale):');
-  const sortedSchools = Object.entries(schoolsStats).sort((a, b) => b[1].total - a[1].total);
-  for (const [school, st] of sortedSchools) {
-    console.log(`  ${school.padEnd(30)} total=${String(st.total).padStart(3)}  ingere=${String(st.ingere).padStart(3)}  non-ing=${String(st.total - st.ingere).padStart(3)}`);
-  }
-
-  // Top 5 schools with most non-ingested
-  const nonIngStats = sortedSchools
-    .map(([k, v]) => [k, v.total - v.ingere])
-    .sort((a, b) => b[1] - a[1])
-    .slice(0, 5);
-  console.log('\nTop 5 ecoles avec le plus de non-ingeres (PRG-4 priorities):');
-  for (const [school, count] of nonIngStats) {
-    console.log(`  ${school.padEnd(30)} non-ing=${count}`);
-  }
-}
-
-main();

server/api/chatbot-pensees.post.ts

@@ -1,205 +0,0 @@
-import type { H3Event } from 'h3'
-import { readFileSync } from 'node:fs'
-import { join } from 'node:path'
-import { checkRateLimitJson } from '~/server/utils/rateLimitJson'
-
-interface ChatbotPenseesRequest {
-  query: string
-  mode?: 'hybrid' | 'local' | 'global' | 'naive' | 'mix'
-  corpus?: 'pensees' | 'projets' | 'both'
-  filter_couche?: 'fond' | 'forme' | 'structure' | null
-  filter_ecole?: string | null
-  auteur_slug?: string | null
-  history?: Array<{ role: 'user' | 'assistant'; content: string }>
-}
-
-interface LightRAGReference {
-  reference_id?: string
-  file_path?: string
-  content?: string | null
-}
-
-interface LightRAGQueryResponse {
-  response: string
-  references?: LightRAGReference[]
-}
-
-interface AuteurMini {
-  id: string
-  nom: string
-  ingere?: boolean
-}
-
-const SYSTEM_PREFACE_PENSEES = `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.`
-
-const SYSTEM_PREFACE_PROJETS = `Tu es un agent du RAG Projets de Jules Nény (architecte, collectif trans-former.fr).
-Tu réponds STRICTEMENT à partir des documents projet (fichiers butte-pinson__*.md et autres projets archi de Jules).
-N'utilise PAS le corpus FRACAS Pensées Écologiques pour répondre, sauf si l'usager te le demande explicitement.
-
-Règles :
-- Cite les sources (nom de projet, document) à chaque assertion importante.
-- Si la question dépasse le corpus projet, dis-le clairement. Pas d'hallucination.
-- Ton praticien réflexif : 1ère personne quand pertinent, narration située.
-- Réponse en français, dense, sans délayage.`
-
-const SYSTEM_PREFACE_BOTH = `Tu es un agent du RAG croisé Pensées x Projets de Jules Nény (architecte militant, collectif trans-former.fr).
-CENTRE TA RÉPONSE sur les documents PROJETS (fichiers butte-pinson__*.md et autres projets archi).
-Mobilise le corpus FRACAS Pensées (autres fichiers) UNIQUEMENT pour éclairer théoriquement les partis pris des projets, jamais l'inverse.
-
-Pondération attendue : ~70% ancrage projet concret, ~30% éclairage théorique FRACAS.
-
-Règles :
-- Cite les sources (auteur ou nom de projet, document) à chaque assertion.
-- Si un thème n'est pas couvert par les projets, dis-le clairement avant d'éventuellement étendre au corpus Pensées.
-- Pas d'hallucination, pas d'extrapolation hors corpus.
-- Ton praticien militant : direct, pas neutre, ancré dans la pratique architecturale.
-- Réponse en français, dense, sans délayage.`
-
-function buildPrefaceAuteur(nomAuteur: string, slug: string): string {
-  return `Tu réponds EXCLUSIVEMENT depuis les livres de ${nomAuteur} présents dans le RAG (fichiers commençant par "${slug}__").
-Si la question sort du périmètre de cet auteur, indique-le et propose de l'aborder sans le hashtag pour interroger la carte entière. Reste fidèle au style et à la pensée de ${nomAuteur}. Cite toujours le livre.
-
-Règles :
-- Cite les sources (titre du livre) à chaque assertion.
-- Pas d'hallucination. Si l'info n'est pas dans le corpus de cet auteur, dis-le.
-- N'introduis JAMAIS d'autres auteurs sauf si ${nomAuteur} les commente explicitement.
-- Ton politique direct, pas de neutralité fade.
-- Réponse en français, dense, sans délayage.`
-}
-
-// Chargement (et cache) de la liste des auteurs ingérés pour validation du slug
-let auteursIngeresCache: AuteurMini[] | null = null
-function loadAuteursIngeres(): AuteurMini[] {
-  if (auteursIngeresCache) return auteursIngeresCache
-  try {
-    const jsonPath = join(process.cwd(), 'public', 'data', 'auteurs-pensees.json')
-    const raw = readFileSync(jsonPath, 'utf-8')
-    const data = JSON.parse(raw)
-    const list: AuteurMini[] = (data.auteurs ?? [])
-      .filter((a: any) => a.ingere === true)
-      .map((a: any) => ({ id: String(a.id), nom: String(a.nom), ingere: true }))
-    auteursIngeresCache = list
-    return list
-  } catch {
-    auteursIngeresCache = []
-    return []
-  }
-}
-
-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 corpus = body.corpus || 'both'
-  const ragUrl = (config.ragPeUrl as string) || 'http://localhost:9621'
-
-  // Validation auteur_slug (Phase 8.E) : match contre la liste des auteurs ingérés
-  const auteurSlug = body.auteur_slug?.trim().toLowerCase() || null
-  let nomAuteurMatch: string | null = null
-  if (auteurSlug) {
-    const ingeres = loadAuteursIngeres()
-    const auteur = ingeres.find(a => a.id === auteurSlug)
-    nomAuteurMatch = auteur?.nom ?? null
-  }
-
-  // Préface adaptative : auteur prioritaire si slug matché, sinon corpus
-  let systemPreface: string
-  if (auteurSlug && nomAuteurMatch) {
-    systemPreface = buildPrefaceAuteur(nomAuteurMatch, auteurSlug)
-  } else if (corpus === 'pensees') {
-    systemPreface = SYSTEM_PREFACE_PENSEES
-  } else if (corpus === 'projets') {
-    systemPreface = SYSTEM_PREFACE_PROJETS
-  } else {
-    systemPreface = SYSTEM_PREFACE_BOTH
-  }
-
-  // 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 = `${systemPreface}\n\nQuestion : ${query}`
-
-  // Construction du body : hl_keywords + ll_keywords si auteur ciblé
-  // NB : LightRAG ne supporte ni keyword_filter ni ids ni metadata_filter (preflight OpenAPI confirmé).
-  // hl_keywords / ll_keywords sont les seuls leviers natifs de priorisation par auteur.
-  const ragBody: Record<string, unknown> = { query: ragQuery, mode }
-  if (auteurSlug && nomAuteurMatch) {
-    ragBody.hl_keywords = [nomAuteurMatch, auteurSlug]
-    ragBody.ll_keywords = [auteurSlug]
-  }
-
-  let ragResponse: LightRAGQueryResponse
-  try {
-    ragResponse = await $fetch<LightRAGQueryResponse>(`${ragUrl}/query`, {
-      method: 'POST',
-      body: ragBody,
-      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.' })
-  }
-
-  // Fallback post-process : si auteur ciblé et que les references LightRAG remontent
-  // des chunks hors slug__, on l'indique pour transparence. La préface LLM est la garde principale.
-  let chunksOffTarget = 0
-  let chunksOnTarget = 0
-  if (auteurSlug && nomAuteurMatch && Array.isArray(ragResponse.references)) {
-    const slugPrefix = `${auteurSlug}__`
-    for (const ref of ragResponse.references) {
-      const fp = (ref.file_path ?? '').toLowerCase()
-      if (!fp) continue
-      if (fp.startsWith(slugPrefix)) chunksOnTarget++
-      else chunksOffTarget++
-    }
-  }
-
-  // 5. Retour formaté
-  return {
-    response: ragResponse.response ?? '',
-    mode,
-    corpus,
-    auteur: auteurSlug && nomAuteurMatch ? { slug: auteurSlug, nom: nomAuteurMatch } : null,
-    auteur_unmatched: auteurSlug && !nomAuteurMatch ? auteurSlug : null,
-    auteur_chunks: auteurSlug && nomAuteurMatch ? { on_target: chunksOnTarget, off_target: chunksOffTarget } : null,
-    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 nebiusApiKey = config.nebiusApiKey as string
-  if (!nebiusApiKey) throw createError({ statusCode: 500, message: 'Clé API Nebius manquante.' })
-
-  let mistralRaw: string
-  try {
-    const res = await $fetch<{ choices: { message: { content: string } }[] }>(
-      'https://api.tokenfactory.nebius.com/v1/chat/completions',
-      {
-        method: 'POST',
-        headers: { Authorization: `Bearer ${nebiusApiKey}`, 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          model: 'deepseek-ai/DeepSeek-V3.2',
-          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 nebiusApiKey = config.nebiusApiKey as string
-  if (!nebiusApiKey) {
-    throw createError({ statusCode: 500, statusMessage: 'Clé API Nebius manquante.' })
-  }
-
-  let mistralRaw: string
-  try {
-    const res = await $fetch<{ choices: { message: { content: string } }[] }>(
-      'https://api.tokenfactory.nebius.com/v1/chat/completions',
-      {
-        method: 'POST',
-        headers: { Authorization: `Bearer ${nebiusApiKey}`, 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          model: 'deepseek-ai/DeepSeek-V3.2',
-          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/chatbot-v2.post.ts

@@ -145,22 +145,19 @@ export default defineEventHandler(async (event) => {
 
   const systemPrompt = SYSTEM_PROMPT_V2.replace('{{CONTEXTE_RAG}}', contextStr)
 
-  // 7. Nebius DeepSeek-V3.2 - génération réponse
-  const nebiusApiKey = config.nebiusApiKey as string
-  if (!nebiusApiKey) throw createError({ statusCode: 500, statusMessage: 'Clé API Nebius manquante.' })
-
+  // 7. Mistral Small - génération réponse
   let mistralRaw: string
   try {
-    const nebiusRes = await $fetch<{
+    const mistralRes = await $fetch<{
       choices: { message: { content: string } }[]
-    }>('https://api.tokenfactory.nebius.com/v1/chat/completions', {
+    }>('https://api.mistral.ai/v1/chat/completions', {
       method: 'POST',
       headers: {
-        Authorization: `Bearer ${nebiusApiKey}`,
+        Authorization: `Bearer ${mistralApiKey}`,
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
-        model: 'deepseek-ai/DeepSeek-V3.2',
+        model: 'mistral-small-latest',
         temperature: 0.3,
         max_tokens: 600,
         response_format: { type: 'json_object' },
@@ -170,10 +167,10 @@ export default defineEventHandler(async (event) => {
         ]
       })
     })
-    mistralRaw = nebiusRes.choices?.[0]?.message?.content ?? '{}'
+    mistralRaw = mistralRes.choices?.[0]?.message?.content ?? '{}'
   } catch (e: any) {
-    console.error('[chatbot-v2] Erreur Nebius DeepSeek :', e?.message ?? e)
-    throw createError({ statusCode: 502, statusMessage: 'Erreur appel Nebius DeepSeek.' })
+    console.error('[chatbot-v2] Erreur Mistral Small :', e?.message ?? e)
+    throw createError({ statusCode: 502, statusMessage: 'Erreur appel Mistral Small.' })
   }
 
   // 8. Parse JSON

server/api/chatbot.post.ts

@@ -247,13 +247,13 @@ export default defineEventHandler(async (event) => {
     JSON.stringify(fichesContext, null, 0),
   )
 
-  // 6. Appel Nebius DeepSeek-V3.2
-  const nebiusApiKey = config.nebiusApiKey as string
+  // 6. Appel Mistral Small
+  const mistralApiKey = config.mistralApiKey as string
 
-  if (!nebiusApiKey) {
+  if (!mistralApiKey) {
     throw createError({
       statusCode: 500,
-      statusMessage: 'Clé API Nebius manquante.',
+      statusMessage: 'Clé API Mistral manquante.',
     })
   }
 
@@ -262,17 +262,17 @@ export default defineEventHandler(async (event) => {
   let tokensOut = 0
 
   try {
-    const nebiusRes = await $fetch<{
+    const mistralRes = await $fetch<{
       choices: { message: { content: string } }[]
       usage?: { prompt_tokens: number; completion_tokens: number }
-    }>('https://api.tokenfactory.nebius.com/v1/chat/completions', {
+    }>('https://api.mistral.ai/v1/chat/completions', {
       method: 'POST',
       headers: {
-        Authorization: `Bearer ${nebiusApiKey}`,
+        Authorization: `Bearer ${mistralApiKey}`,
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        model: 'deepseek-ai/DeepSeek-V3.2',
+        model: 'mistral-small-latest',
         temperature: 0.3,
         max_tokens: 600,
         response_format: { type: 'json_object' },
@@ -283,11 +283,11 @@ export default defineEventHandler(async (event) => {
       }),
     })
 
-    mistralRaw = nebiusRes.choices?.[0]?.message?.content ?? '{}'
-    tokensIn = nebiusRes.usage?.prompt_tokens ?? 0
-    tokensOut = nebiusRes.usage?.completion_tokens ?? 0
+    mistralRaw = mistralRes.choices?.[0]?.message?.content ?? '{}'
+    tokensIn = mistralRes.usage?.prompt_tokens ?? 0
+    tokensOut = mistralRes.usage?.completion_tokens ?? 0
   } catch (e: any) {
-    console.error('[chatbot] Erreur Nebius DeepSeek:', e?.message ?? e)
+    console.error('[chatbot] Erreur Mistral Small:', e?.message ?? e)
     throw createError({
       statusCode: 502,
       statusMessage: 'Erreur appel IA — réessaie dans quelques instants.',

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