fix(outils): un seul repère main, tabpanel sur le panneau ; doublons retirés de l'arbre fmhy (B6-M5)

Le repère <main> passe à la racine de la page et le panneau d'onglet devient
un <div role="tabpanel"> (Lighthouse signalait role=tabpanel sur <main>).
FreeCAD, Blender, Inkscape, GIMP, LibreOffice Draw et Joplin sortent de
fmhy-curated.json : ils sont désormais dans la sélection open source.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0136n5xMLHuaBDLcPJYCDjRW

DESIGN-SYSTEM.md

@@ -56,23 +56,58 @@ Pour une chip non cliquable (affichage seul, ex. liste de résultats) : `as="spa
 3. Choisis l'ordre de repli du résumé : `buildResume([champA, champB, ...])` prend le premier champ non vide, en garde la première phrase, tronque à 110 caractères sur un mot. Vérifie quels champs de ton type contiennent du texte descriptif avant de les ordonner.
 4. `chips` = 3 étiquettes maximum (fonctions, hashtags, ou l'équivalent pour ton type). `geoloc` = `latitude != null && longitude != null` si ton type a des coordonnées, sinon `true` (pas de fiche à masquer côté carte).
 
-`components/FicheMiniCard.vue` consomme uniquement `MiniFiche` — il n'a jamais besoin de connaître `Org` ou `StructureV2`. C'est ce découplage qui permet d'ajouter une source sans toucher au composant d'affichage.
+`components/FicheMiniCard.vue` consomme uniquement `MiniFiche` (depuis B11, `MiniFiche` porte aussi `etiquettes`, `chipsDimension`, `coords`, `date`, `ville`, `texte` : voir §Vue fiches) — il n'a jamais besoin de connaître `Org` ou `StructureV2`. C'est ce découplage qui permet d'ajouter une source sans toucher au composant d'affichage.
 
-## FichesPanel — le panneau « toutes les fiches »
+## Vue fiches (B11 02/10/2026, détail B12 03/10/2026) — `VueFiches` + `useVueFiches`
 
-`components/FichesPanel.vue` : props `fiches: MiniFiche[]` (déjà filtrée par la page appelante — le panneau ne refiltre pas, ne crée pas de second champ de recherche), `hashtags: string[]` (options de filtre), `selected: string[]`, `query: string` (sert seulement à nuancer le message d'état vide), `intention: string`. Émet `update:selected` et `open(fiche)`.
+Remplace `FichesPanel`, `NavSidebar`, `MobileSheet` et les onglets Métropolitain / Outre-mer / Toutes les fiches de `/` et `/agences` (tous retirés). Spécification : `1 PROJETS/DEV/AEP/Cadrage/SPEC-vue-fiches.md` (vault).
 
-**Le panneau ne possède pas son propre état de filtre** : ses chips pilotent la variable réactive de la page appelante via `update:selected` (ex. `fonctions` sur `/`, `selectedHashtags` sur `/agences`). C'est ce qui garantit qu'une chip cochée dans le panneau et la même chip dans la sidebar (si elle est visible) affichent toujours le même état — une seule source de vérité, jamais deux.
+**Trois fichiers, trois rôles.**
 
-**Hashtags repliés** (B3-M4) : au-delà de 14 chips (`COLLAPSE_THRESHOLD`), seules les premières s'affichent + un chip-bouton « voir les N autres » qui déplie. Les chips déjà actives restent visibles même repliées (union entre les 14 premières et les actives hors de ce lot). État déplié non persistant — `ref` locale, reset à chaque montage. `/` (10 fonctions) ne dépasse jamais le seuil ; `/agences` (~60 hashtags) se replie par défaut.
+| Fichier | Rôle | Testé par |
+|---|---|---|
+| `utils/vueFiches.ts` | logique pure : `lireQuery` / `ecrireQuery`, `filtrerFiches`, `compterEtiquettes`, `trierFiches`, `regrouper`, `ordreFiches` ; B12 : `lireFiche`, `queryAvecFiche`, `positionFiche`, `modeOuverture` / `modeFermeture`, `empreinteListe` | `node scripts/test-vue-fiches.mjs` |
+| `composables/useVueFiches.ts` | branche la logique sur la route ; rend un objet `reactive` (`vf`) | navigateur |
+| `components/VueFiches.vue` (+ `VueFichesFiltres.vue`) | barre d'outils, trois états, filtres, grille, poignée, feuille « Filtrer », panneau de détail (B12) | navigateur |
 
-**Accès** : `?vue=fiches` dans l'URL, en plus des paramètres de filtre existants. Sur `/`, `desktopMapView`/`mobileMapView` gagnent une valeur `'fiches'` à côté de `'metropole'`/`'outremer'` ; sur `/agences`, à côté de `'metropole'`/`'outremer'`/`'graphe'`. Recharger l'URL avec `?vue=fiches` doit rouvrir directement le panneau, filtres compris.
+**L'URL est la source de vérité.** L'état se lit dans `route.query` (surveillée) et s'écrit par `router.replace`. Paramètres : `vue` (`carte` · `mixte` · `fiches`, absent = défaut par largeur), `q`, un paramètre par dimension (valeurs séparées par des virgules), `adresse=sans`, `tri`, `groupe`, et celui des sous-vues de carte (`mode` sur `/`, `carte` sur `/agences`). Un paramètre inconnu ou invalide est ignoré ; un paramètre que la vue ne gère pas (`territoire`, `random`) est recopié tel quel, `fiche=` aussi (un filtre changé garde la fiche ouverte). La recherche part dans l'URL 250 ms après la dernière touche.
 
-**Mobile** : le panneau ne se monte JAMAIS dans un `MobileSheet` (le composant sheet demi-hauteur pensé pour flotter au-dessus d'une carte) — il n'y a pas de carte derrière la vue fiches, donc pas de sheet à demi-hauteur : le panneau occupe toute la zone sous la barre d'onglets, avec son propre scroll interne. Piège vécu en B3 : monter le panneau dans un `MobileSheet` par réflexe (comme les autres onglets) laisse ~45 % de l'écran vide au-dessus, puisque la sheet démarre repliée à mi-hauteur et qu'il n'y a rien à voir en dessous.
+**États.** Sans `vue=` : Mixte à partir de 1024 px, Fiches en dessous. Mixte n'existe pas sous 1024 px (il se lit Fiches). Avant le montage, la racine porte `vf--auto` et la CSS tranche seule, pour qu'un lien s'affiche sans saut. La poignée ‹ › bascule Mixte ↔ Carte ; le repli est retenu en `sessionStorage` (`aep_vue_fiches_liste_repliee`) et ne compte que si l'URL n'a pas de `vue=`. En état Fiches, la carte reste montée, invisible (Leaflet garde une taille) ; les cartes appellent `invalidateSize` par `ResizeObserver`.
+
+**Filtres : OU dans une dimension, ET entre dimensions.** Compteur d'une chip = fiches qui portent l'étiquette parmi celles que laissent passer la recherche et les AUTRES dimensions ; 0 = chip grisée (`disabled`). Repli au-delà de 14 valeurs, dans l'ordre de la dimension (stable). Les filtres sont à UN endroit : panneau de gauche (Mixte), tête de grille (Fiches, ordinateur et tablette), feuille du bas (téléphone) ; en Carte, seules les pastilles actives, dans la barre. Une chip cliquée dans une carte-fiche ajoute le filtre (`MiniFiche.chipsDimension`).
+
+**Tri** : `pertinence` (nombre d'étiquettes cochées, puis nom ; défaut dès qu'un filtre est actif), `nom` (défaut sinon), `recent` (date puis Id décroissant ; à n'offrir que si la source a une date). **Regroupement** : une fiche va sous sa PREMIÈRE étiquette de la dimension, jamais en double.
+
+**Détail et fiche à fiche (B12).** Cliquer une carte-fiche (ou une épingle : la page appelle `vf.ouvrirFiche(id)`) écrit `fiche=<id>` par `router.push` ; passer d'une fiche à l'autre (Précédente / Suivante, ← →, balayage au téléphone) par `router.replace`. Fermer (✕, « ‹ N fiches », Échap) revient en arrière si l'entrée vient de la page et que la liste n'a pas changé depuis, sinon retire `fiche=` sur place (lien partagé, filtre changé fiche ouverte) : le retour du téléphone ferme la fiche, jamais la page. La fiche est cherchée dans TOUTES les fiches : hors du résultat, le panneau dit « Hors de vos filtres » et n'a pas de Précédente / Suivante. Panneau de 380 px en troisième colonne (ordinateur, dans les trois états ; la grille Fiches passe à 2 colonnes), 340 px sur tablette, plein écran par-dessus la vue au téléphone (barre, liste et carte en `inert`, fiche à fiche en pied). Le focus entre dans le panneau à l'ouverture et revient, à la fermeture, sur la carte-fiche de la dernière fiche lue ; la position de défilement de la liste est rendue. Actions du panneau : Ouvrir la page de la fiche (prop `lien-page`), Voir sur la carte (si la fiche a une épingle dans le résultat : Mixte sur ordinateur, Carte au téléphone ; la page lit `vf.centrage` et le passe à sa carte, prop `centrage` de `NavMap` / `NavMapV2`), Copier le lien (l'URL courante dit tout). Deux écritures d'URL dans le même tick s'enchaînent (la seconde part de la query en attente), elles ne s'écrasent plus.
+
+**Contrat.**
+
+```vue
+<VueFiches :vf="vf" intention="Une ligne." libelle-recherche="Rechercher…" :pending="pending"
+           :lien-page="(f) => `/fiche/${f.id}`" @survol="…">
+  <template #carte> <!-- carte(s) de la page, une par sous-vue, v-show sur vf.etat.sousVue --> </template>
+  <template #detail="{ fiche, filtrer }"> <!-- contenu propre à la source ; filtrer(dimension, valeur) au clic d'une étiquette --> </template>
+  <template #vide> <!-- optionnel --> </template>
+</VueFiches>
+```
+
+Contenus de détail en place : `/` → `FicheDetail` (`compact`, `etiquettes-cliquables`) + commentaires, l'`Org` venant de la liste (même enregistrement NocoDB que `/api/fiche/:id`) ; `/agences` → `FicheReseauContenu` (corps de l'ancienne `FicheModalV2`, une structure liée s'ouvre dans le même panneau). `FicheModal` et `FicheModalV2` sont retirées ; la page `/fiche/:id` reste.
+
+`const vf = useVueFiches(fiches, config)` : `fiches` = `MiniFiche[]` déjà adaptées, non filtrées (ref, computed ou getter) ; `config: ConfigVueFiches` = `{ dimensions, tris, groupes, etats, sousVues? }` (types dans `utils/vueFiches.ts`). Le composant ne charge rien et ne connaît pas la carte. La page lit `vf.idsResultat` pour ne montrer sur la carte que le résultat courant, `vf.survolId` pour allumer l'épingle (et l'écrit au survol d'une épingle), `vf.ficheId` / `vf.ficheOuverte` / `vf.position` pour la fiche ouverte (B12), `vf.largeur` et `vf.vueAffichee` pour placer ses boutons flottants.
+
+**Brancher une troisième page** (Codev en B12, Outils, vue Œuvres) :
+1. Adaptateur dans `useFicheAdapter.ts` : remplir `etiquettes` avec une clé par dimension (= nom du paramètre d'URL), `chipsDimension`, `coords` si la source en a (sinon `geoloc: true`).
+2. Une `ConfigVueFiches` dans la page : dimensions (variante `fonction` pour la principale, `echelle` pour la secondaire), tris (pas de `recent` sans date), groupes, `etats` (`['carte', 'fiches']` si la page n'a pas la place pour Mixte), `sousVues` si la carte en a.
+3. Le slot `#carte`, et le slot `#detail` (contenu de la fiche ; une page sans contenu de détail affiche seulement les actions). Les épingles appellent `vf.ouvrirFiche(id)`.
+4. Ajouter des cas à `scripts/test-vue-fiches.mjs` si la page introduit une règle nouvelle.
+
+**Troisième page en place : `/outils?tab=partir-de-soi` (B6-M2)** — sept fiches, une par mot de la slide 17 (`components/OutilsPartirDeSoi.vue`, adaptateur `toMiniMot`). Trois extensions optionnelles du composant, sans effet sur `/` et `/agences` : tri `ordre` (ordre du tableau d'entrée) avec `config.triDefaut` (tri sans filtre ; la pertinence reste prioritaire dès qu'un filtre est actif) et `config.libellesTri` ; prop `libelles-vue` (`{ carte: 'Graphe' }` : le bouton, et « Voir dans le graphe » au lieu de « Voir sur la carte » ; l'URL garde `vue=carte`). Le slot `#carte` y est `GrapheMots.vue`, un SVG statique (nœud central, mots en couronne, ressources en feuilles) dans le vocabulaire du motif maillage. La page vit dans un onglet : `tab=` est un paramètre que la vue ne gère pas, donc recopié à chaque écriture.
+
+**`FicheMiniCard`** : racine `<article>`, toute la carte ouvre la fiche par un bouton étiré (`::after`) ; avec `etiquettes-cliquables`, les chips deviennent des boutons (impossible dans l'ancienne racine `<button>`). Props `actif` (liseré safran au survol d'épingle), `etiquettes-actives`. Résumé et « Sans localisation » en `color-mix(--text 78 %)` : `--text-muted` et `--text-subtle` échouaient au contraste.
 
 ## Intention d'abord
 
-Principe de design validé par Jules pour B3 : un panneau (ou une carte) s'ouvre sur **une ligne d'intention** avant l'outillage (filtres, compteur, grille). La ligne d'intention dit en une phrase ce que montre l'écran et le premier geste possible (« Toutes les structures d'entraide, y compris celles sans adresse sur la carte. Cochez une fonction pour filtrer. »). Dans `FichesPanel`, l'ordre de l'en-tête est fixe : intention → compteur → chips → grille. Ne pas remonter le compteur ou les chips au-dessus de l'intention, même pour gagner de la place.
+Principe de design validé par Jules pour B3 : un panneau (ou une carte) s'ouvre sur **une ligne d'intention** avant l'outillage (filtres, compteur, grille). La ligne d'intention dit en une phrase ce que montre l'écran et le premier geste possible (« Toutes les structures d'entraide, y compris celles sans adresse sur la carte. Cochez une fonction pour filtrer. »). Dans `VueFiches`, l'intention ouvre la liste, avant les filtres et la grille. Ne pas remonter le compteur ou les chips au-dessus de l'intention, même pour gagner de la place.
 
 ## Motif maillage (favicon)
 
@@ -82,3 +117,29 @@ Le favicon (`public/favicon.svg`, décliné en `favicon-32.png`, `favicon-16.png
 
 1. **Texte sombre sur l'accent safran, jamais blanc.** `--accent`/`--on-accent` : le blanc sur `#f5b342` échoue le contrôle AA (décision DS du 20/07/2026). `--on-accent` est toujours une couleur sombre (`#1a2238` clair, `#111520` sombre). Vérifié au pixel sur la variante `posture` de `Chip.vue`.
 2. **`--nav-text-on-primary` reste une valeur littérale**, pas un alias — voir l'explication détaillée dans la section tokens ci-dessus. Si un nouveau composant a besoin de texte de contraste sur un fond bleu nuit, vérifie d'abord si ce fond est `--nav-primary` (translucide) ou `--nav-primary-solid` (opaque) avant de choisir la variable de texte : elles n'ont pas la même réponse en mode sombre.
+
+## Navigation par échelles S / M / XL (B10, 02/10/2026)
+
+**Source unique : `utils/echelles.ts`.** Chaque échelle porte ses `onglets` (`libelle`, `to`, `actif(route)`) ; `ORDRE_ECHELLES` fixe l'ordre S → M → XL ; `echelleDeRoute(route)` rend le groupe et l'onglet courants, ou `null` hors groupe (Manifeste, À propos, Proposer, Signaler, fiche, `/rag`). Aucun libellé d'échelle ni d'onglet ne se recopie dans un composant : ajouter un onglet = une ligne dans ce fichier, et `scripts/test-echelles-nav.mjs` (une ligne de cas).
+
+| Échelle | Accroche | Onglets |
+|---|---|---|
+| S | Partir de soi | Jobs (`/trouver-du-taf`) · Outils (`/outils`) |
+| M | La communauté | Écosystème d'entraide (`/`) · Réseaux AEP (`/agences`) · Codev (`/codev*`) |
+| XL | Contribuer | Recherche média (`/media`) · Publications (`/media?tab=projets`) |
+
+**Seuils** (CSS des composants, pas de breakpoint Tailwind : 1280 et 1440 n'en sont pas) :
+
+| Largeur | En-tête | Sous l'en-tête |
+|---|---|---|
+| ≥ 1440 | logo complet · trois groupes · Manifeste · À propos · Soutenir (contour safran) · + Proposer (plein safran) · sombre | — |
+| 1280-1439 | idem, logo réduit au bloc « AEP » | — |
+| 1024-1279 | logo complet · groupe courant seul · Manifeste · + Proposer · sombre · « Menu » | — |
+| 768-1023 | logo réduit · groupe courant seul · Manifeste · + Proposer · sombre · « Menu » | — |
+| < 768 | logo complet · sombre · + (icône) · ☰ | `FilEchelle` (28 px), sauf hors groupe |
+
+**Composants** : `NavEchelles.vue` (barre ; chaque groupe est un `<ul>` étiqueté par son accroche via `aria-labelledby`, onglet courant en `aria-current="page"`), `NavTiroir.vue` (menu < 1280 : `role="dialog"`, voile, Échap, focus piégé et rendu à l'élément d'ouverture, fermeture au changement de route et au passage à ≥ 1280), `FilEchelle.vue` (< 768, monté dans `app.vue` entre `<header>` et le conteneur de page, **jamais dedans** : `/` y est en `overflow-hidden`). Le lien de don vit dans `utils/liens.ts` (`SOUTENIR_URL`).
+
+**Texte atténué** : `color-mix(in srgb, var(--text) 78 %, transparent)`, pas `--text-muted` (3,7:1 sur blanc, sous AA à 0,8 rem) ni `opacity` (qui éteindrait aussi l'anneau de focus).
+
+**Signaler** n'est plus dans la barre d'ordinateur : il reste dans le tiroir, dans chaque fiche, et en pied d'À propos.

app.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex flex-col h-screen overflow-hidden" :class="{ dark: isDark }" style="background: var(--nav-bg);">
 
-    <!-- ═══════════════════════════════════════ TOP NAV GLOBAL -->
+    <!-- ═══════════════════════════════════════ TOP NAV GLOBAL (B10 : échelles S / M / XL) -->
     <header
-      class="flex items-center justify-between px-4 py-2.5 shrink-0 relative z-[9999] shadow-sm gap-3"
+      class="app-header flex items-center px-4 shrink-0 relative z-[9999] shadow-sm gap-3"
       style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);"
     >
-      <!-- Logo -->
+      <!-- Logo : texte complet sauf 768-1023 et 1280-1439 (place des onglets) -->
       <a href="/" class="logo-link flex items-center gap-2 hover:opacity-90 transition-opacity shrink-0" title="Architecture d'Écologie Politique">
         <div
           class="h-8 px-2 rounded-lg flex items-center justify-center shrink-0"
@@ -20,112 +20,38 @@
         </div>
       </a>
 
-      <!-- ── Onglets desktop (≥1024px) — remplace la barre de recherche ── -->
+      <!-- Échelles : trois groupes ≥ 1280, groupe courant 768-1279, rien < 768 (fil d'échelle) -->
-      <nav class="hidden lg:flex flex-1 justify-center items-end gap-0 mx-6" aria-label="Navigation projets">
+      <NavEchelles />
-        <NuxtLink
+      <div class="flex-1 md:hidden" aria-hidden="true" />
-          to="/outils"
-          class="nav-tab"
-          :class="{ 'nav-tab--active': route.path === '/outils' }"
-        >
-          Outils
-        </NuxtLink>
-        <NuxtLink
-          to="/"
-          class="nav-tab"
-          :class="{ 'nav-tab--active': route.path === '/' }"
-        >
-          Écosystème Entraide
-        </NuxtLink>
-        <NuxtLink
-          to="/agences"
-          class="nav-tab"
-          :class="{ 'nav-tab--active': route.path === '/agences' }"
-        >
-          Réseaux AEP
-        </NuxtLink>
-        <NuxtLink
-          to="/trouver-du-taf"
-          class="nav-tab"
-          :class="{ 'nav-tab--active': route.path === '/trouver-du-taf' }"
-        >
-          Jobs
-        </NuxtLink>
-        <NuxtLink
-          to="/codev"
-          class="nav-tab"
-          :class="{ 'nav-tab--active': route.path.startsWith('/codev') }"
-        >
-          Codev
-        </NuxtLink>
-        <NuxtLink
-          to="/media"
-          class="nav-tab"
-          :class="{ 'nav-tab--active': route.path.startsWith('/media') }"
-        >
-          recherche-média
-        </NuxtLink>
-      </nav>
-
-      <!-- ── Barre recherche mobile (640px–1024px) — masquée < 640px car accessible dans la sheet -->
-      <div class="hidden sm:flex lg:hidden flex-1 mx-2">
-        <label class="flex items-center gap-2 w-full px-3 py-1.5 rounded-xl border" style="background: var(--nav-bg); border-color: var(--nav-bg-alt);">
-          <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="headerSearch"
-            type="search"
-            placeholder="Rechercher…"
-            class="flex-1 bg-transparent border-0 outline-none text-sm"
-            style="color: var(--nav-text); font-family: var(--nav-font);"
-            autocomplete="off"
-            @input="onHeaderSearch"
-            @keydown.enter="onHeaderSearch"
-          />
-          <button
-            v-if="headerSearch"
-            type="button"
-            @click.stop="clearHeaderSearch"
-            class="flex-shrink-0"
-            style="color: var(--nav-text-muted);"
-            aria-label="Effacer la recherche"
-          >
-            <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>
 
       <!-- Actions droite -->
       <div class="flex items-center gap-2 shrink-0">
         <NuxtLink
           to="/manifeste"
-          class="px-3 py-1.5 rounded-lg text-sm font-medium transition-all hover:opacity-80 hidden md:inline-flex items-center gap-1"
+          class="header-lien hidden md:inline-flex"
-          :style="route.path === '/manifeste' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text-muted);'"
+          :aria-current="route.path === '/manifeste' ? 'page' : undefined"
         >
           Manifeste
         </NuxtLink>
         <NuxtLink
           to="/a-propos"
-          class="px-3 py-1.5 rounded-lg text-sm font-medium transition-all hover:opacity-80 hidden md:inline-flex items-center gap-1"
+          class="header-lien header-xl"
-          style="color: var(--nav-text-muted);"
+          :aria-current="route.path === '/a-propos' ? 'page' : undefined"
         >
           À propos
         </NuxtLink>
-        <NuxtLink
+        <a
-          to="/signaler"
+          :href="SOUTENIR_URL"
-          class="px-3 py-1.5 rounded-lg text-sm font-medium transition-all hover:opacity-80 hidden lg:inline-flex items-center gap-1"
+          target="_blank"
-          style="color: var(--nav-text-muted);"
+          rel="noopener noreferrer"
+          class="header-soutenir header-xl"
         >
-          Signaler
+          Soutenir
-        </NuxtLink>
+        </a>
-        <!-- Proposer une ressource (5 onglets) -->
+        <!-- Proposer une ressource -->
         <NuxtLink
           to="/proposer"
-          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"
+          class="header-proposer hidden md:inline-flex"
-          style="background: var(--nav-accent); color: var(--nav-text);"
         >
           + Proposer
         </NuxtLink>
@@ -153,68 +79,51 @@
         <!-- Mobile : proposer icône -->
         <NuxtLink
           to="/proposer"
-          class="sm:hidden p-2 rounded-lg"
+          class="md:hidden p-2 rounded-lg"
-          style="background: var(--nav-accent); color: var(--nav-text);"
+          style="background: var(--accent); color: var(--on-accent);"
           title="Proposer une ressource"
           aria-label="Proposer"
         >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
           </svg>
         </NuxtLink>
 
-        <!-- Menu déroulant — toutes largeurs (les onglets n'y apparaissent qu'en dessous de 1024px) ; porte « Soutenir » -->
+        <!-- Menu (< 1280) : ouvre le tiroir ; le mot est écrit à partir de 768 -->
-        <div class="relative">
         <button
-            @click="hamburgerOpen = !hamburgerOpen"
+          type="button"
-            class="p-2 rounded-lg transition-all hover:opacity-80"
+          class="header-menu"
-            style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
+          aria-label="Ouvrir le menu"
-            :aria-label="hamburgerOpen ? 'Fermer le menu' : 'Menu'"
+          aria-haspopup="dialog"
-            :aria-expanded="hamburgerOpen"
+          :aria-expanded="menuOpen"
+          @click="menuOpen = true"
         >
-            <svg v-if="!hamburgerOpen" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+          <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="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
           </svg>
-            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+          <span class="header-menu__mot" aria-hidden="true">Menu</span>
-              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
         </button>
-          <div
-            v-if="hamburgerOpen"
-            class="absolute right-0 top-full mt-1 rounded-lg shadow-lg min-w-[210px] py-1"
-            style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt); z-index: 9999;"
-            @click="hamburgerOpen = false"
-          >
-            <NuxtLink to="/outils" class="lg:hidden block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/outils' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Outils</NuxtLink>
-            <NuxtLink to="/" class="lg:hidden 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</NuxtLink>
-            <NuxtLink to="/agences" class="lg:hidden 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="lg:hidden 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="lg:hidden block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path.startsWith('/media') ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">recherche-média</NuxtLink>
-            <NuxtLink to="/codev" class="lg:hidden block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path.startsWith('/codev') ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Codev</NuxtLink>
-            <div class="lg:hidden" 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 mx-3 my-2 px-4 py-2 rounded-lg text-sm font-semibold text-center transition-opacity hover:opacity-80" style="background: var(--nav-accent); color: var(--nav-text);">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>
       </div>
     </header>
 
+    <!-- Fil d'échelle (< 768) : dans le flux de la colonne, hors du conteneur de page -->
+    <FilEchelle />
+
     <!-- Contenu page (flex-1 pour remplir l'espace) -->
-    <div class="flex-1" :class="route.path === '/' ? 'overflow-hidden' : 'overflow-y-auto'">
+    <div class="flex-1 min-h-0" :class="route.path === '/' ? 'overflow-hidden' : 'overflow-y-auto'">
       <NuxtPage />
     </div>
 
+    <NavTiroir :open="menuOpen" @close="menuOpen = false" />
   </div>
 </template>
 
 <script setup lang="ts">
-const router = useRouter()
+import { SOUTENIR_URL } from '~/utils/liens'
+
 const route = useRoute()
 
-const hamburgerOpen = ref(false)
+const menuOpen = ref(false)
-watch(() => route.path, () => { hamburgerOpen.value = false })
 
 // ── Dark mode ─────────────────────────────────────────────────────────────
 const isDark = ref(false)
@@ -237,40 +146,14 @@ function toggleDark() {
     localStorage.setItem('aep_theme', 'light')
   }
 }
-
-// ── Barre de recherche header mobile ─────────────────────────────────────
-const headerSearch = ref((route.query.q as string) ?? '')
-
-// Sync depuis URL quand la route change
-watch(() => route.query.q, (v) => {
-  headerSearch.value = (v as string) ?? ''
-})
-
-function onHeaderSearch() {
-  const q = headerSearch.value.trim()
-  if (route.path === '/') {
-    router.replace({ query: q ? { ...route.query, q } : { ...route.query, q: undefined } })
-  } else if (q) {
-    router.push({ path: '/', query: { q } })
-  }
-}
-
-function clearHeaderSearch() {
-  headerSearch.value = ''
-  if (route.path === '/') {
-    const q = { ...route.query }
-    delete q.q
-    router.replace({ query: Object.keys(q).length ? q : undefined })
-  }
-}
-
-// ── Fiche aléatoire ───────────────────────────────────────────────────────
-function goRandom() {
-  router.push({ path: '/', query: { random: '1' } })
-}
 </script>
 
 <style>
+/* ── En-tête ──────────────────────────────────────────────────────────── */
+.app-header {
+  min-height: 52px;
+}
+
 /* ── Logo header (texte 2 lignes) ─────────────────────────────────────── */
 .logo-text {
   line-height: 1.05;
@@ -285,39 +168,96 @@ function goRandom() {
 @media (min-width: 1024px) {
   .logo-line-1, .logo-line-2 { font-size: 0.85rem; }
 }
+/* Le groupe courant (768-1023) et les trois groupes (1280-1439) prennent la place du texte */
+@media (min-width: 768px) and (max-width: 1023px), (min-width: 1280px) and (max-width: 1439px) {
+  .logo-text { display: none; }
+}
 
-/* ── Onglets header desktop ───────────────────────────────────────────── */
+/* ── Liens et boutons de droite ───────────────────────────────────────── */
-.nav-tab {
+.header-lien {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
   align-items: center;
-  padding: 6px 16px 8px;
+  padding: 6px 8px;
-  font-size: 0.8rem;
+  border-radius: var(--radius-md);
-  font-weight: 500;
+  font-size: var(--fs-sm);
-  color: var(--nav-text-muted);
+  font-weight: var(--fw-medium);
+  white-space: nowrap;
   text-decoration: none;
-  transition: color 0.15s;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
-  border-bottom: 2px solid transparent;
+}
-  gap: 2px;
+.header-lien:hover,
+.header-lien[aria-current="page"] {
+  color: var(--text);
+}
+.header-lien[aria-current="page"] {
+  font-weight: var(--fw-bold);
 }
 
-.nav-tab:hover {
+.header-soutenir {
-  color: var(--nav-text);
+  align-items: center;
+  padding: 5px 10px;
+  border: 1.5px solid var(--accent);
+  border-radius: var(--radius-md);
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+  white-space: nowrap;
+  text-decoration: none;
+  color: var(--text);
 }
 
-.nav-tab--active {
+.header-proposer {
-  color: var(--nav-text);
+  align-items: center;
-  border-bottom-color: var(--nav-primary-solid);
+  padding: 6px 11px;
-  font-weight: 600;
+  border-radius: var(--radius-md);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+  white-space: nowrap;
+  text-decoration: none;
 }
 
-.nav-tab-badge {
+.header-soutenir:hover,
-  font-size: 0.6rem;
+.header-proposer:hover {
-  font-weight: 600;
+  opacity: 0.85;
-  text-transform: uppercase;
+}
-  letter-spacing: 0.04em;
+
-  color: var(--nav-text-muted);
+.header-lien:focus-visible,
-  opacity: 0.65;
+.header-soutenir:focus-visible,
+.header-proposer:focus-visible,
+.header-menu:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* À propos et Soutenir : barre complète seulement (≥ 1280), sinon dans le tiroir */
+.header-xl { display: none; }
+@media (min-width: 1280px) {
+  .header-xl { display: inline-flex; }
+}
+
+.header-menu {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: var(--bg-alt);
+  color: var(--text);
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+  cursor: pointer;
+}
+.header-menu__mot { display: none; }
+@media (min-width: 768px) {
+  .header-menu {
+    padding: 5px 10px;
+    border-color: var(--border);
+    background: transparent;
+  }
+  .header-menu__mot { display: inline; }
+}
+@media (min-width: 1280px) {
+  .header-menu { display: none; }
 }
 </style>

components/EchelleFilter.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="space-y-1.5">
-    <p class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">Échelle</p>
-    <ChipGroup aria-label="Filtrer par échelle">
-      <Chip
-        v-for="option in ECHELLES"
-        :key="option"
-        :label="option"
-        variant="echelle"
-        :active="isSelected(option)"
-        @toggle="toggle(option)"
-      />
-    </ChipGroup>
-  </div>
-</template>
-
-<script setup lang="ts">
-const ECHELLES = ['National', 'Régional', 'Local'] as const
-
-const props = defineProps<{
-  modelValue: string[]
-  counts: Record<string, number>
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string[]]
-}>()
-
-function isSelected(option: string): boolean {
-  return props.modelValue.includes(option)
-}
-
-function toggle(option: string) {
-  if (isSelected(option)) {
-    emit('update:modelValue', props.modelValue.filter(v => v !== option))
-  } else {
-    emit('update:modelValue', [...props.modelValue, option])
-  }
-}
-</script>

components/FicheDetail.vue

@@ -6,12 +6,14 @@
       style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);"
     >
       <!-- Bandeau titre -->
-      <div class="px-6 pt-6 pb-4" style="border-bottom: 1px solid var(--nav-bg-alt);">
+      <div :class="compact ? 'px-4 pt-4 pb-3' : 'px-6 pt-6 pb-4'" style="border-bottom: 1px solid var(--nav-bg-alt);">
-        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-3">
+        <div class="flex flex-col gap-3 mb-3" :class="compact ? '' : 'sm:flex-row sm:items-start sm:justify-between'">
-          <h1
+          <component
-            class="text-2xl font-bold leading-snug"
+            :is="compact ? 'h2' : 'h1'"
+            class="font-bold leading-snug"
+            :class="compact ? 'text-xl' : 'text-2xl'"
             style="color: var(--nav-text);"
-          >{{ org.nom }}</h1>
+          >{{ org.nom }}</component>
 
           <a
             v-if="org.url"
@@ -33,18 +35,28 @@
         </div>
 
         <!-- Méta : échelle + ville -->
-        <div class="flex flex-wrap items-center gap-2 text-sm mb-3" style="color: var(--nav-text-muted);">
+        <div class="flex flex-wrap items-center gap-2 text-sm mb-3" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">
           <span
             v-if="org.echelle"
             class="px-2 py-0.5 rounded-full text-xs font-medium"
-            style="background: var(--nav-primary); color: var(--nav-text-on-primary);"
+            style="background: var(--nav-primary-solid); color: var(--nav-text-on-primary);"
           >{{ org.echelle }}</span>
-          <span v-if="org.territoire && org.territoire !== 'Métropole'" class="text-xs" style="color: var(--nav-text-muted);">{{ org.territoire }}</span>
+          <span v-if="org.territoire && org.territoire !== 'Métropole'" class="text-xs" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">{{ org.territoire }}</span>
-          <span v-if="org.localisation_ville" style="color: var(--nav-text-muted);">{{ org.localisation_ville }}</span>
+          <span v-if="org.localisation_ville" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">{{ org.localisation_ville }}</span>
         </div>
 
         <!-- Tags fonction -->
-        <div v-if="fonctionTags.length" class="flex flex-wrap gap-1.5">
+        <ChipGroup v-if="fonctionTags.length && etiquettesCliquables" :aria-label="`Fonctions de ${org.nom}`">
+          <Chip
+            v-for="tag in fonctionTags"
+            :key="tag"
+            variant="fonction"
+            :label="tag"
+            :aria-label="`Filtrer par ${tag}`"
+            @toggle="emit('etiquette', tag)"
+          />
+        </ChipGroup>
+        <div v-else-if="fonctionTags.length" class="flex flex-wrap gap-1.5">
           <span
             v-for="tag in fonctionTags"
             :key="tag"
@@ -55,13 +67,13 @@
       </div>
 
       <!-- Corps : description + mini-carte -->
-      <div class="p-6 flex flex-col lg:flex-row gap-6">
+      <div class="flex flex-col gap-6" :class="compact ? 'p-4' : 'p-6 lg:flex-row'">
 
         <!-- Descriptions -->
         <div class="flex-1 min-w-0">
           <!-- Description soumise par le contributeur -->
           <div v-if="descriptionUser" class="mb-4">
-            <p class="text-sm leading-relaxed" style="color: var(--nav-text-muted);">Description communauté</p>
+            <p class="text-sm leading-relaxed" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">Description communauté</p>
             <p class="mt-1 leading-relaxed" style="color: var(--nav-text);">{{ descriptionUser }}</p>
           </div>
 
@@ -70,7 +82,7 @@
 
           <!-- Description enrichie IA -->
           <div v-if="descriptionEnrichie" class="mb-4">
-            <p class="text-sm leading-relaxed flex items-center gap-1.5" style="color: var(--nav-text-muted);">
+            <p class="text-sm leading-relaxed flex items-center gap-1.5" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                 <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                 <path d="M2 17l10 5 10-5"/>
@@ -88,7 +100,7 @@
 
           <!-- Points clés -->
           <div v-if="pointsCles.length" class="mt-4">
-            <p class="text-sm font-medium mb-2" style="color: var(--nav-text-muted);">Points clés</p>
+            <p class="text-sm font-medium mb-2" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">Points clés</p>
             <ul class="space-y-1">
               <li
                 v-for="(point, i) in pointsCles"
@@ -106,15 +118,16 @@
         <!-- Mini-carte Leaflet -->
         <div
           v-if="hasCoords"
-          class="shrink-0 lg:w-56 xl:w-64 rounded-xl overflow-hidden"
+          class="shrink-0 rounded-xl overflow-hidden"
+          :class="compact ? '' : 'lg:w-56 xl:w-64'"
           style="height: 180px; border: 1px solid var(--nav-bg-alt);"
         >
           <ClientOnly>
-            <div ref="mapContainer" class="w-full h-full"></div>
+            <div ref="mapContainer" class="w-full h-full" role="img" :aria-label="`Carte : ${org.nom}${org.localisation_ville ? `, ${org.localisation_ville}` : ''}`"></div>
             <template #fallback>
               <div
                 class="w-full h-full flex items-center justify-center text-xs"
-                style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
+                style="background: var(--nav-bg-alt); color: color-mix(in srgb, var(--nav-text) 78%, transparent);"
               >Carte…</div>
             </template>
           </ClientOnly>
@@ -140,7 +153,7 @@
 
       <Transition name="report-form">
         <div v-if="reportOpen" class="report-panel">
-          <p class="text-xs mb-3" style="color: var(--nav-text-muted);">
+          <p class="text-xs mb-3" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">
             Tes suggestions seront transmises à l'équipe AEP par email.
           </p>
           <div class="flex flex-col gap-3">
@@ -171,7 +184,7 @@
             </div>
             <p v-if="reportError" class="text-xs" style="color: #e53e3e;">{{ reportError }}</p>
             <p v-if="reportSuccess" class="text-xs" style="color: #38a169;">{{ reportSuccess }}</p>
-            <p class="text-xs" style="color: var(--nav-text-muted); opacity: 0.6;">
+            <p class="text-xs" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent); opacity: 0.6;">
               {{ reportMessage.length }}/500
             </p>
           </div>
@@ -186,7 +199,15 @@
 const baseTiles = useBaseTiles()
 import type { Org } from '~/types/org'
 
-const props = defineProps<{ org: Org }>()
+const props = defineProps<{
+  org: Org
+  /** Panneau de détail de la vue fiches (B12, 380 px) : tout en colonne, titre en h2. */
+  compact?: boolean
+  /** Fonctions en chips cliquables : la vue fiches ajoute le filtre. */
+  etiquettesCliquables?: boolean
+}>()
+
+const emit = defineEmits<{ etiquette: [fonction: string] }>()
 
 // ── Champs ──────────────────────────────────────────────────────────────
 const descriptionUser = computed(() =>
@@ -264,15 +285,24 @@ async function submitReport() {
 // ── Mini-carte Leaflet ────────────────────────────────────────────────
 const mapContainer = ref<HTMLElement | null>(null)
 
-onMounted(async () => {
+// Le conteneur est dans <ClientOnly>, rendu APRÈS le onMounted de ce composant
-  if (!hasCoords.value || !mapContainer.value) return
+// quand la fiche s'ouvre côté client (panneau de la vue fiches, B12) : on
+// attend qu'il existe au lieu de le lire au montage (il valait null, la
+// mini-carte restait un cadre vide).
+let mapInit = false
+watch(mapContainer, (el) => { if (el) initMap(el) }, { flush: 'post' })
+onMounted(() => { if (mapContainer.value) initMap(mapContainer.value) })
+
+async function initMap(el: HTMLElement) {
+  if (mapInit || !hasCoords.value) return
+  mapInit = true
 
   const L = (await import('leaflet')).default
 
   const lat = props.org.latitude as number
   const lng = props.org.longitude as number
 
-  const map = L.map(mapContainer.value, {
+  const map = L.map(el, {
     center: [lat, lng],
     zoom: 10,
     zoomControl: false,
@@ -301,8 +331,9 @@ onMounted(async () => {
     iconAnchor: [7, 7],
   })
 
-  L.marker([lat, lng], { icon }).addTo(map)
+  // Épingle décorative : ni clic ni clavier (la mini-carte est une image, nommée par son conteneur)
-})
+  L.marker([lat, lng], { icon, interactive: false, keyboard: false }).addTo(map)
+}
 </script>
 
 <style scoped>
@@ -312,7 +343,7 @@ onMounted(async () => {
   align-items: center;
   gap: 6px;
   font-size: 0.78rem;
-  color: var(--nav-text-muted);
+  color: color-mix(in srgb, var(--nav-text) 78%, transparent);
   background: none;
   border: none;
   cursor: pointer;

components/FicheMiniCard.vue

@@ -1,12 +1,21 @@
+<!--
+  FicheMiniCard — B3-M2, B11-M2
+  La carte entière ouvre la fiche (bouton étiré par ::after) ; avec
+  `etiquettesCliquables`, les chips deviennent des boutons qui émettent
+  `etiquette` (la vue fiches ajoute le filtre). Un bouton ne pouvant pas en
+  contenir d'autres, la racine est un <article>, plus un <button> : apparence
+  inchangée, page /dev/fiche-mini-card comprise.
+-->
 <template>
+  <article class="fiche-mini-card" :class="{ 'fiche-mini-card--actif': actif }">
     <button
       type="button"
-    class="fiche-mini-card"
+      class="fiche-mini-card__ouvrir"
-    :aria-label="fiche.nom"
       @click="emit('open')"
     >
       <span class="fiche-mini-card__nom">{{ fiche.nom }}</span>
       <span v-if="fiche.resume" class="fiche-mini-card__resume">{{ fiche.resume }}</span>
+    </button>
 
     <ChipGroup
       v-if="fiche.chips.length || fiche.echelle"
@@ -14,11 +23,24 @@
       class="fiche-mini-card__chips"
     >
       <Chip v-if="fiche.echelle" as="span" variant="echelle" :label="fiche.echelle" />
+      <template v-if="etiquettesCliquables">
+        <Chip
+          v-for="chip in fiche.chips"
+          :key="chip"
+          variant="fonction"
+          :label="chip"
+          :active="etiquettesActives?.includes(chip)"
+          :aria-label="`Filtrer par ${chip}`"
+          @toggle="emit('etiquette', chip)"
+        />
+      </template>
+      <template v-else>
         <Chip v-for="chip in fiche.chips" :key="chip" as="span" variant="fonction" :label="chip" />
+      </template>
     </ChipGroup>
 
     <span v-if="!fiche.geoloc" class="fiche-mini-card__no-geo">Sans localisation</span>
-  </button>
+  </article>
 </template>
 
 <script setup lang="ts">
@@ -26,30 +48,37 @@ import type { MiniFiche } from '~/composables/useFicheAdapter'
 
 defineProps<{
   fiche: MiniFiche
+  etiquettesCliquables?: boolean
+  /** Libellés de chips déjà filtrés (affichés pressés). */
+  etiquettesActives?: string[]
+  /** Fiche survolée sur la carte ou sélectionnée. */
+  actif?: boolean
 }>()
 
 const emit = defineEmits<{
   open: []
+  etiquette: [label: string]
 }>()
 </script>
 
 <style scoped>
 .fiche-mini-card {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
+  min-width: 0;
   padding: var(--space-sm);
   border: 1px solid transparent;
   border-radius: var(--radius-md);
   background: var(--surface);
   color: var(--text);
   text-align: left;
-  cursor: pointer;
-  font-family: inherit;
   box-sizing: border-box;
   transition: background-color var(--dur-fast) var(--ease-out),
-              box-shadow var(--dur-fast) var(--ease-out);
+              box-shadow var(--dur-fast) var(--ease-out),
+              border-color var(--dur-fast) var(--ease-out);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -63,11 +92,42 @@ const emit = defineEmits<{
   box-shadow: var(--shadow-sm);
 }
 
-.fiche-mini-card:focus-visible {
+/* Survol d'une épingle ou fiche sélectionnée : liseré safran */
+.fiche-mini-card--actif {
+  border-color: var(--accent);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
+.fiche-mini-card:has(.fiche-mini-card__ouvrir:focus-visible) {
   outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
 
+/* Bouton étiré : toute la carte ouvre la fiche, les chips cliquables passent dessus */
+.fiche-mini-card__ouvrir {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+.fiche-mini-card__ouvrir::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.fiche-mini-card__ouvrir:focus-visible {
+  outline: none;
+}
+
 .fiche-mini-card__nom {
   width: 100%;
   font-size: var(--fs-sm);
@@ -84,7 +144,8 @@ const emit = defineEmits<{
   margin-top: var(--space-2xs);
   font-size: var(--fs-xs);
   line-height: var(--lh-base);
-  color: var(--text-muted);
+  /* --text-muted ne donne que 3,7:1 sur --surface (DESIGN-SYSTEM §Navigation) */
+  color: color-mix(in srgb, var(--text) 78%, transparent);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -92,12 +153,18 @@ const emit = defineEmits<{
 }
 
 .fiche-mini-card__chips {
+  position: relative;
+  z-index: 1;
   margin-top: var(--space-xs);
+  pointer-events: none;
+}
+.fiche-mini-card__chips :deep(button) {
+  pointer-events: auto;
 }
 
 .fiche-mini-card__no-geo {
   margin-top: var(--space-2xs);
   font-size: var(--fs-xs);
-  color: var(--text-subtle);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
 }
 </style>

components/FicheModal.vue

@@ -1,183 +0,0 @@
-<template>
-  <Teleport to="body">
-    <!-- Backdrop -->
-    <Transition name="backdrop">
-      <div
-        v-if="modelValue && orgId != null"
-        class="fixed inset-0 z-[1500]"
-        style="background: rgba(26,34,56,0.55);"
-        @click="close"
-        aria-hidden="true"
-      />
-    </Transition>
-
-    <!-- Modal centré -->
-    <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"
-        style="
-          width: min(768px, 92vw);
-          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="org?.nom ?? 'Fiche organisation'"
-        @keydown.esc="close"
-      >
-        <!-- Header modal -->
-        <div
-          class="flex items-center justify-between px-5 py-3 shrink-0 border-b"
-          style="background: var(--nav-surface); border-color: var(--nav-bg-alt);"
-        >
-          <span class="text-sm font-semibold" style="color: var(--nav-text-muted);">Fiche détaillée</span>
-          <div class="flex items-center gap-2">
-            <!-- Lien fiche complète -->
-            <a
-              v-if="orgId"
-              :href="`/fiche/${orgId}`"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-opacity hover:opacity-70"
-              style="background: var(--nav-bg-alt); color: var(--nav-text);"
-            >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
-                <polyline points="15 3 21 3 21 9"/>
-                <line x1="10" y1="14" x2="21" y2="3"/>
-              </svg>
-              Ouvrir
-            </a>
-            <!-- Fermer -->
-            <button
-              @click="close"
-              class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors"
-              style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-              aria-label="Fermer"
-            >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
-                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-
-        <!-- Contenu scrollable -->
-        <div class="flex-1 overflow-y-auto px-5 py-5">
-          <!-- Chargement -->
-          <div v-if="pending" class="py-12 text-center text-sm" style="color: var(--nav-text-muted);">
-            Chargement de la fiche…
-          </div>
-
-          <!-- Erreur -->
-          <div v-else-if="error" class="py-12 text-center">
-            <p class="text-base font-semibold mb-2" style="color: var(--nav-text);">Fiche introuvable</p>
-            <p class="text-sm" style="color: var(--nav-text-muted);">L'organisation demandée n'existe pas ou a été supprimée.</p>
-          </div>
-
-          <!-- Contenu -->
-          <template v-else-if="org">
-            <FicheDetail :org="org" />
-            <div class="mb-5" style="height: 1px; background: var(--nav-bg-alt);"></div>
-            <CommentSection :org-id="org.Id" :refresh="commentRefreshTick" />
-            <CommentForm :org-id="org.Id" @submitted="onCommentSubmitted" />
-          </template>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import type { Org } from '~/types/org'
-
-const props = defineProps<{
-  modelValue: boolean
-  orgId: number | null
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
-
-function close() {
-  emit('update:modelValue', false)
-}
-
-// Fermeture Esc globale
-onMounted(() => {
-  const handler = (e: KeyboardEvent) => {
-    if (e.key === 'Escape' && props.modelValue) close()
-  }
-  window.addEventListener('keydown', handler)
-  onUnmounted(() => window.removeEventListener('keydown', handler))
-})
-
-// Fetch fiche quand orgId change
-const org = ref<Org | null>(null)
-const pending = ref(false)
-const error = ref(false)
-
-watch(() => props.orgId, async (id) => {
-  if (id == null) return
-  pending.value = true
-  error.value = false
-  org.value = null
-  try {
-    org.value = await $fetch<Org>(`/api/fiche/${id}`)
-  } catch {
-    error.value = true
-  } finally {
-    pending.value = false
-  }
-}, { immediate: true })
-
-const commentRefreshTick = ref(0)
-
-function onCommentSubmitted() {
-  commentRefreshTick.value++
-}
-</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; }
-
-/* Modal */
-.modal-enter-active, .modal-leave-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-.modal-enter-from, .modal-leave-to {
-  opacity: 0;
-  transform: translate(-50%, -52%);
-}
-@media (max-width: 1023px) {
-  .modal-enter-from, .modal-leave-to {
-    transform: translate(-50%, calc(-2% + 76px));
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .backdrop-enter-active, .backdrop-leave-active { transition: none; }
-  .modal-enter-active, .modal-leave-active { transition: none; }
-}
-</style>

components/FicheModalV2.vue

@@ -1,360 +0,0 @@
-<template>
-  <Teleport to="body">
-    <!-- Backdrop -->
-    <Transition name="backdrop">
-      <div
-        v-if="modelValue && structureId != null"
-        class="fixed inset-0 z-[1500]"
-        style="background: rgba(26,34,56,0.55);"
-        @click="close"
-        aria-hidden="true"
-      />
-    </Transition>
-
-    <!-- Modal -->
-    <Transition name="modal">
-      <div
-        v-if="modelValue && structureId != null && structure"
-        class="fiche-modal-v2 fixed z-[1501] left-1/2 -translate-x-1/2 flex flex-col"
-        style="
-          width: min(780px, 94vw);
-          background: var(--nav-bg);
-          border-radius: 16px;
-          box-shadow: 0 16px 64px rgba(26,34,56,0.28);
-          overflow: hidden;
-        "
-        role="dialog"
-        aria-modal="true"
-        :aria-label="structure?.nom ?? 'Fiche structure'"
-        @keydown.esc="close"
-      >
-        <!-- Header modal -->
-        <div
-          class="flex items-center justify-between px-5 py-3 shrink-0"
-          :style="`border-bottom: 3px solid ${familleColor}; background: var(--nav-surface);`"
-        >
-          <div class="flex items-center gap-3">
-            <!-- Pastille famille -->
-            <div
-              class="w-3 h-3 rounded-full shrink-0"
-              :style="`background: ${familleColor};`"
-            />
-            <span class="text-sm font-semibold" style="color: var(--nav-text-muted);">
-              {{ familleLabel }}
-            </span>
-            <!-- Badges -->
-            <div class="flex gap-1.5">
-              <span
-                v-if="structure.badges.centre_ressources"
-                class="px-2 py-0.5 rounded-full text-xs font-medium"
-                style="background: #2d8a6b22; color: #2d8a6b;"
-              >Centre ressources</span>
-              <span
-                v-if="structure.badges.mouvement_manifeste"
-                class="px-2 py-0.5 rounded-full text-xs font-medium"
-                style="background: #c44a2f22; color: #c44a2f;"
-              >Manifeste</span>
-              <span
-                v-if="structure.badges.contre_pouvoir_spatial"
-                class="px-2 py-0.5 rounded-full text-xs font-medium"
-                style="background: #1a3a6b22; color: #1a3a6b;"
-              >Contre-pouvoir</span>
-              <span
-                v-if="structure.badges.f6_recherche_politique"
-                class="px-2 py-0.5 rounded-full text-xs font-medium"
-                style="background: #6b3fa022; color: #6b3fa0;"
-              >Recherche pol.</span>
-            </div>
-          </div>
-          <div class="flex items-center gap-2">
-            <a
-              v-if="structure.url"
-              :href="structure.url"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-opacity hover:opacity-70"
-              style="background: var(--nav-bg-alt); color: var(--nav-text);"
-            >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
-                <polyline points="15 3 21 3 21 9"/>
-                <line x1="10" y1="14" x2="21" y2="3"/>
-              </svg>
-              Site web
-            </a>
-            <button
-              @click="close"
-              class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors"
-              style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-              aria-label="Fermer"
-            >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
-                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-
-        <!-- Contenu scrollable -->
-        <div class="flex-1 overflow-y-auto px-5 py-5">
-          <!-- Nom + meta -->
-          <div class="mb-4">
-            <h2 class="text-xl font-bold mb-1" style="color: var(--nav-text);">{{ structure.nom }}</h2>
-            <div class="flex flex-wrap gap-2 text-sm" style="color: var(--nav-text-muted);">
-              <span>{{ structure.type_principal }}</span>
-              <span>·</span>
-              <span>{{ structure.ville }}, {{ structure.pays }}</span>
-            </div>
-          </div>
-
-          <!-- Hashtags -->
-          <div v-if="structure.hashtags.length" class="flex flex-wrap gap-1.5 mb-4">
-            <span
-              v-for="tag in structure.hashtags"
-              :key="tag"
-              class="px-2 py-0.5 rounded-full text-xs"
-              style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-            >{{ tag }}</span>
-          </div>
-
-          <!-- Description courte -->
-          <p class="text-sm leading-relaxed mb-4" style="color: var(--nav-text);">{{ structure.description_courte }}</p>
-
-          <!-- Description longue (expandable) -->
-          <div v-if="structure.description_longue" class="mb-4">
-            <div
-              class="text-sm leading-relaxed"
-              style="color: var(--nav-text); white-space: pre-wrap;"
-              :style="showFullDesc ? '' : 'max-height: 120px; overflow: hidden;'"
-            >{{ structure.description_longue }}</div>
-            <button
-              @click="showFullDesc = !showFullDesc"
-              class="mt-2 text-xs underline"
-              style="color: var(--nav-text-muted);"
-            >{{ showFullDesc ? 'Réduire' : 'Lire la suite…' }}</button>
-          </div>
-
-          <!-- Pensées rattachées -->
-          <div v-if="structure.pensees && structure.pensees.length" class="mb-4">
-            <h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Pensées rattachées</h3>
-            <div class="flex flex-wrap gap-1.5">
-              <span
-                v-for="pensee in structure.pensees"
-                :key="pensee.id"
-                class="px-2 py-0.5 rounded text-xs"
-                :style="pensee.confiance === 'ia_suggested'
-                  ? 'background: var(--nav-bg-alt); color: var(--nav-text-muted); border: 1px dashed var(--nav-bg-alt);'
-                  : 'background: var(--nav-bg-alt); color: var(--nav-text);'"
-                :title="pensee.confiance === 'ia_suggested' ? 'IA suggéré' : ''"
-              >
-                {{ pensee.label }}<span v-if="pensee.confiance === 'ia_suggested'" class="ml-1 opacity-60">~</span>
-              </span>
-            </div>
-          </div>
-
-          <!-- Projets emblématiques -->
-          <div v-if="projetsStructure.length" class="mb-4">
-            <h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Projets emblématiques</h3>
-            <div class="space-y-2">
-              <div
-                v-for="projet in projetsStructure.slice(0, 5)"
-                :key="projet.id"
-                class="rounded-lg p-3"
-                style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);"
-              >
-                <div class="flex items-start justify-between gap-2">
-                  <span class="font-medium text-sm" style="color: var(--nav-text);">{{ projet.nom }}</span>
-                  <span v-if="projet.annee" class="text-xs shrink-0" style="color: var(--nav-text-muted);">{{ projet.annee }}</span>
-                </div>
-                <div v-if="projet.lieu" class="text-xs mt-0.5" style="color: var(--nav-text-muted);">{{ projet.lieu }}</div>
-                <p class="text-xs mt-1 leading-relaxed" style="color: var(--nav-text-muted);">{{ projet.description.slice(0, 120) }}{{ projet.description.length > 120 ? '…' : '' }}</p>
-                <a
-                  v-if="projet.url"
-                  :href="projet.url"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-xs mt-1 inline-block"
-                  style="color: var(--nav-text-muted); text-decoration: underline;"
-                >En savoir plus →</a>
-              </div>
-            </div>
-          </div>
-
-          <!-- Structures voisines (graphe) -->
-          <div v-if="structuresVoisines.length" class="mb-4">
-            <h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Structures liées</h3>
-            <div class="flex flex-wrap gap-2">
-              <button
-                v-for="voisine in structuresVoisines.slice(0, 6)"
-                :key="voisine.id"
-                class="px-2 py-1 rounded text-xs transition-colors hover:opacity-70"
-                style="background: var(--nav-bg-alt); color: var(--nav-text); border: 1px solid transparent;"
-                @click="emit('update:structureId', voisine.id)"
-              >{{ voisine.nom }}</button>
-            </div>
-          </div>
-
-          <!-- Sources -->
-          <div v-if="structure.sources && structure.sources.length" class="mb-4">
-            <h3 class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">Sources</h3>
-            <div class="space-y-1">
-              <div v-for="(source, i) in structure.sources" :key="i" class="flex items-center gap-2">
-                <span
-                  class="px-1.5 py-0.5 rounded text-xs shrink-0"
-                  style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-                >{{ source.type }}</span>
-                <a
-                  v-if="source.url"
-                  :href="source.url"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-xs underline truncate"
-                  style="color: var(--nav-text);"
-                >{{ source.titre }}</a>
-                <span v-else class="text-xs" style="color: var(--nav-text);">{{ source.titre }}</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- CTAs -->
-          <div class="flex gap-3 pt-2" style="border-top: 1px solid var(--nav-bg-alt);">
-            <a
-              href="/contribuer"
-              class="text-xs underline"
-              style="color: var(--nav-text-muted);"
-            >Signaler une erreur</a>
-            <a
-              href="/contribuer"
-              class="text-xs underline"
-              style="color: var(--nav-text-muted);"
-            >Réclamer cette fiche</a>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import type { ReseauxBifurcationData, StructureV2, ProjetEmblematique } from '~/types/structure-v2'
-
-const FAMILLE_COLORS: Record<number, string> = {
-  1: '#a85d3e',
-  2: '#c4a472',
-  3: '#d4a017',
-  4: '#5a7a4a',
-  5: '#3d6a8c',
-}
-
-const FAMILLE_LABELS: Record<number, string> = {
-  1: 'Réemploi & filières',
-  2: 'Frugalité & low-tech',
-  3: 'Architecture sociale',
-  4: 'Collectifs & AMO',
-  5: 'Urbanisme de transition',
-}
-
-const props = defineProps<{
-  modelValue: boolean
-  structureId: string | null
-  data: ReseauxBifurcationData | null
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  'update:structureId': [id: string]
-}>()
-
-const showFullDesc = ref(false)
-
-function close() {
-  emit('update:modelValue', false)
-  showFullDesc.value = false
-}
-
-// Fermeture Esc globale
-onMounted(() => {
-  const handler = (e: KeyboardEvent) => {
-    if (e.key === 'Escape' && props.modelValue) close()
-  }
-  window.addEventListener('keydown', handler)
-  onUnmounted(() => window.removeEventListener('keydown', handler))
-})
-
-// Remettre showFullDesc a false a chaque changement de fiche
-watch(() => props.structureId, () => {
-  showFullDesc.value = false
-})
-
-const structure = computed<StructureV2 | null>(() => {
-  if (!props.data || !props.structureId) return null
-  return props.data.structures.find(s => s.id === props.structureId) ?? null
-})
-
-const familleColor = computed(() =>
-  FAMILLE_COLORS[structure.value?.famille_principale ?? 1] ?? '#888'
-)
-
-const familleLabel = computed(() =>
-  FAMILLE_LABELS[structure.value?.famille_principale ?? 1] ?? ''
-)
-
-const projetsStructure = computed<ProjetEmblematique[]>(() => {
-  if (!props.data || !props.structureId) return []
-  return props.data.projets?.filter(p => p.structure_parent === props.structureId) ?? []
-})
-
-const structuresVoisines = computed<StructureV2[]>(() => {
-  if (!props.data || !props.structureId) return []
-  const edges = props.data.graphe?.edges ?? []
-  const voisineIds = edges
-    .filter(e => e.source === props.structureId || e.target === props.structureId)
-    .sort((a, b) => (b.score ?? 0) - (a.score ?? 0))
-    .map(e => e.source === props.structureId ? e.target : e.source)
-    .slice(0, 8)
-
-  return voisineIds
-    .map(id => props.data!.structures.find(s => s.id === id))
-    .filter(Boolean) as StructureV2[]
-})
-</script>
-
-<style scoped>
-/* Backdrop */
-.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
-.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
-
-/* Modal positionnement : centré desktop, descendu sous le header sur mobile */
-.fiche-modal-v2 {
-  top: 50%;
-  transform: translate(-50%, -50%);
-  max-height: 90vh;
-}
-
-@media (max-width: 1023px) {
-  .fiche-modal-v2 {
-    top: 76px;
-    transform: translateX(-50%);
-    max-height: calc(100dvh - 92px);
-  }
-}
-
-/* Modal */
-.modal-enter-active, .modal-leave-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-.modal-enter-from, .modal-leave-to {
-  opacity: 0;
-  transform: translate(-50%, -52%);
-}
-@media (max-width: 1023px) {
-  .modal-enter-from, .modal-leave-to {
-    transform: translate(-50%, calc(-2% + 76px));
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .backdrop-enter-active, .backdrop-leave-active { transition: none; }
-  .modal-enter-active, .modal-leave-active { transition: none; }
-}
-</style>

components/FicheReseauContenu.vue

@@ -0,0 +1,291 @@
+<!--
+  FicheReseauContenu — B12-M4. Le corps de l'ancienne FicheModalV2 (retirée),
+  devenu un contenu : la vue fiches le pose dans son panneau de détail
+  (slot #detail de VueFiches). Badges, hashtags, descriptions, pensées,
+  projets, structures liées, sources.
+
+  Hashtag cliqué → `etiquette` (la vue fiches ajoute le filtre) ; structure
+  liée cliquée → `voisin` (la page l'ouvre dans le même panneau).
+-->
+<template>
+  <article v-if="structure" class="frc">
+    <div class="frc-famille" :style="`border-bottom-color: ${familleColor};`">
+      <span class="frc-famille__pastille" :style="`background: ${familleColor};`" aria-hidden="true" />
+      <span class="frc-famille__libelle">{{ familleLabel }}</span>
+      <span v-if="structure.badges.centre_ressources" class="frc-badge" style="background: #2d8a6b22; color: #1f6650;">Centre ressources</span>
+      <span v-if="structure.badges.mouvement_manifeste" class="frc-badge" style="background: #c44a2f22; color: #9a3520;">Manifeste</span>
+      <span v-if="structure.badges.contre_pouvoir_spatial" class="frc-badge" style="background: #1a3a6b22; color: #1a3a6b;">Contre-pouvoir</span>
+      <span v-if="structure.badges.f6_recherche_politique" class="frc-badge" style="background: #6b3fa022; color: #5a3388;">Recherche pol.</span>
+    </div>
+
+    <h2 class="frc-nom">{{ structure.nom }}</h2>
+    <p class="frc-meta">
+      <span>{{ structure.type_principal }}</span>
+      <span aria-hidden="true"> · </span>
+      <span>{{ structure.ville }}, {{ structure.pays }}</span>
+    </p>
+
+    <a
+      v-if="structure.url"
+      :href="structure.url"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="frc-site"
+    >
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+        <polyline points="15 3 21 3 21 9" />
+        <line x1="10" y1="14" x2="21" y2="3" />
+      </svg>
+      Site web<span class="frc-sr"> (nouvel onglet)</span>
+    </a>
+
+    <ChipGroup v-if="structure.hashtags.length" :aria-label="`Hashtags de ${structure.nom}`" class="frc-tags">
+      <Chip
+        v-for="tag in structure.hashtags"
+        :key="tag"
+        variant="fonction"
+        :label="tag"
+        :active="etiquettesActives?.includes(tag)"
+        :aria-label="`Filtrer par ${tag}`"
+        @toggle="emit('etiquette', tag)"
+      />
+    </ChipGroup>
+
+    <p class="frc-texte">{{ structure.description_courte }}</p>
+
+    <div v-if="structure.description_longue" class="frc-bloc">
+      <div class="frc-texte frc-long" :class="{ 'frc-long--replie': !showFullDesc }">{{ structure.description_longue }}</div>
+      <button type="button" class="frc-lien" :aria-expanded="showFullDesc" @click="showFullDesc = !showFullDesc">
+        {{ showFullDesc ? 'Réduire' : 'Lire la suite…' }}
+      </button>
+    </div>
+
+    <section v-if="structure.pensees && structure.pensees.length" class="frc-bloc">
+      <h3 class="frc-titre">Pensées rattachées</h3>
+      <div class="frc-liste-inline">
+        <span
+          v-for="pensee in structure.pensees"
+          :key="pensee.id"
+          class="frc-pensee"
+          :class="{ 'frc-pensee--ia': pensee.confiance === 'ia_suggested' }"
+          :title="pensee.confiance === 'ia_suggested' ? 'IA suggéré' : ''"
+        >{{ pensee.label }}<span v-if="pensee.confiance === 'ia_suggested'" aria-hidden="true"> ~</span><span v-if="pensee.confiance === 'ia_suggested'" class="frc-sr"> (suggéré par l'IA)</span></span>
+      </div>
+    </section>
+
+    <section v-if="projetsStructure.length" class="frc-bloc">
+      <h3 class="frc-titre">Projets emblématiques</h3>
+      <div class="frc-projets">
+        <div v-for="projet in projetsStructure.slice(0, 5)" :key="projet.id" class="frc-projet">
+          <div class="frc-projet__tete">
+            <span class="frc-projet__nom">{{ projet.nom }}</span>
+            <span v-if="projet.annee" class="frc-discret">{{ projet.annee }}</span>
+          </div>
+          <div v-if="projet.lieu" class="frc-discret">{{ projet.lieu }}</div>
+          <p class="frc-projet__desc">{{ projet.description.slice(0, 120) }}{{ projet.description.length > 120 ? '…' : '' }}</p>
+          <a v-if="projet.url" :href="projet.url" target="_blank" rel="noopener noreferrer" class="frc-lien">En savoir plus<span class="frc-sr"> sur {{ projet.nom }} (nouvel onglet)</span> →</a>
+        </div>
+      </div>
+    </section>
+
+    <section v-if="structuresVoisines.length" class="frc-bloc">
+      <h3 class="frc-titre">Structures liées</h3>
+      <div class="frc-liste-inline">
+        <button
+          v-for="voisine in structuresVoisines.slice(0, 6)"
+          :key="voisine.id"
+          type="button"
+          class="frc-voisin"
+          @click="emit('voisin', voisine.id)"
+        >{{ voisine.nom }}</button>
+      </div>
+    </section>
+
+    <section v-if="structure.sources && structure.sources.length" class="frc-bloc">
+      <h3 class="frc-titre">Sources</h3>
+      <ul class="frc-sources">
+        <li v-for="(source, i) in structure.sources" :key="i">
+          <span class="frc-source__type">{{ source.type }}</span>
+          <a v-if="source.url" :href="source.url" target="_blank" rel="noopener noreferrer" class="frc-lien">{{ source.titre }}</a>
+          <span v-else>{{ source.titre }}</span>
+        </li>
+      </ul>
+    </section>
+
+    <p class="frc-cta">
+      <NuxtLink to="/contribuer" class="frc-lien">Signaler une erreur</NuxtLink>
+      <NuxtLink to="/contribuer" class="frc-lien">Réclamer cette fiche</NuxtLink>
+    </p>
+  </article>
+</template>
+
+<script setup lang="ts">
+import type { ReseauxBifurcationData, StructureV2, ProjetEmblematique } from '~/types/structure-v2'
+
+const FAMILLE_COLORS: Record<number, string> = {
+  1: '#a85d3e',
+  2: '#c4a472',
+  3: '#d4a017',
+  4: '#5a7a4a',
+  5: '#3d6a8c',
+}
+
+const FAMILLE_LABELS: Record<number, string> = {
+  1: 'Réemploi & filières',
+  2: 'Frugalité & low-tech',
+  3: 'Architecture sociale',
+  4: 'Collectifs & AMO',
+  5: 'Urbanisme de transition',
+}
+
+const props = defineProps<{
+  structureId: string
+  data: ReseauxBifurcationData | null
+  /** Hashtags actifs dans les filtres (avec leur « # ») : la chip s'allume. */
+  etiquettesActives?: string[]
+}>()
+
+const emit = defineEmits<{
+  etiquette: [hashtag: string]
+  voisin: [id: string]
+}>()
+
+const showFullDesc = ref(false)
+watch(() => props.structureId, () => { showFullDesc.value = false })
+
+const structure = computed<StructureV2 | null>(() =>
+  props.data?.structures.find((s) => s.id === props.structureId) ?? null,
+)
+
+const familleColor = computed(() => FAMILLE_COLORS[structure.value?.famille_principale ?? 1] ?? '#888')
+const familleLabel = computed(() => FAMILLE_LABELS[structure.value?.famille_principale ?? 1] ?? '')
+
+const projetsStructure = computed<ProjetEmblematique[]>(() =>
+  props.data?.projets?.filter((p) => p.structure_parent === props.structureId) ?? [],
+)
+
+const structuresVoisines = computed<StructureV2[]>(() => {
+  if (!props.data) return []
+  const edges = props.data.graphe?.edges ?? []
+  return edges
+    .filter((e) => e.source === props.structureId || e.target === props.structureId)
+    .sort((a, b) => (b.score ?? 0) - (a.score ?? 0))
+    .map((e) => (e.source === props.structureId ? e.target : e.source))
+    .slice(0, 8)
+    .map((id) => props.data!.structures.find((s) => s.id === id))
+    .filter(Boolean) as StructureV2[]
+})
+</script>
+
+<style scoped>
+.frc { color: var(--text); font-size: var(--fs-sm); }
+.frc-sr {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+}
+
+.frc-famille {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2xs) var(--space-xs);
+  padding-bottom: var(--space-xs);
+  margin-bottom: var(--space-sm);
+  border-bottom: 3px solid;
+}
+.frc-famille__pastille { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
+.frc-famille__libelle { font-weight: var(--fw-semibold); color: color-mix(in srgb, var(--text) 78%, transparent); }
+.frc-badge {
+  padding: 2px var(--space-xs);
+  border-radius: var(--radius-full);
+  font-size: var(--fs-xs, 0.75rem);
+  font-weight: var(--fw-medium);
+}
+
+.frc-nom { margin: 0 0 var(--space-2xs); font-size: 1.25rem; font-weight: var(--fw-bold, 700); line-height: 1.25; }
+.frc-meta { margin: 0 0 var(--space-sm); color: color-mix(in srgb, var(--text) 78%, transparent); }
+
+.frc-site {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  min-height: 32px;
+  padding: 0 var(--space-sm);
+  margin-bottom: var(--space-sm);
+  border-radius: var(--radius-md);
+  background: var(--bg-alt);
+  color: var(--text);
+  font-weight: var(--fw-medium);
+  text-decoration: none;
+}
+
+.frc-tags { margin-bottom: var(--space-sm); }
+
+.frc-texte { margin: 0 0 var(--space-sm); line-height: var(--lh-base, 1.55); }
+.frc-long { white-space: pre-wrap; margin: 0; }
+.frc-long--replie { max-height: 120px; overflow: hidden; }
+
+.frc-bloc { margin-bottom: var(--space-md); }
+.frc-titre {
+  margin: 0 0 var(--space-xs);
+  font-size: var(--fs-xs, 0.75rem);
+  font-weight: var(--fw-bold, 700);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+}
+
+.frc-liste-inline { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
+.frc-pensee {
+  padding: 2px var(--space-xs);
+  border-radius: var(--radius-sm);
+  background: var(--bg-alt);
+  font-size: var(--fs-xs, 0.75rem);
+}
+.frc-pensee--ia { color: color-mix(in srgb, var(--text) 78%, transparent); border: 1px dashed var(--border); }
+
+.frc-projets { display: flex; flex-direction: column; gap: var(--space-xs); }
+.frc-projet { padding: var(--space-sm); border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--border); }
+.frc-projet__tete { display: flex; justify-content: space-between; gap: var(--space-xs); }
+.frc-projet__nom { font-weight: var(--fw-medium); }
+.frc-projet__desc { margin: var(--space-2xs) 0; font-size: var(--fs-xs, 0.75rem); line-height: 1.5; color: color-mix(in srgb, var(--text) 78%, transparent); }
+.frc-discret { font-size: var(--fs-xs, 0.75rem); color: color-mix(in srgb, var(--text) 78%, transparent); }
+
+.frc-voisin {
+  min-height: 32px;
+  padding: 0 var(--space-xs);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-alt);
+  color: var(--text);
+  font: inherit;
+  font-size: var(--fs-xs, 0.75rem);
+  cursor: pointer;
+  text-align: left;
+}
+
+.frc-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
+.frc-sources li { display: flex; align-items: baseline; gap: var(--space-xs); min-width: 0; font-size: var(--fs-xs, 0.75rem); overflow-wrap: anywhere; }
+.frc-source__type { flex-shrink: 0; padding: 1px var(--space-2xs); border-radius: var(--radius-sm); background: var(--bg-alt); }
+
+.frc-lien {
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--text);
+  font: inherit;
+  font-size: var(--fs-xs, 0.75rem);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.frc-cta { display: flex; gap: var(--space-sm); padding-top: var(--space-xs); margin: 0; border-top: 1px solid var(--border); }
+
+.frc-site:focus-visible,
+.frc-lien:focus-visible,
+.frc-voisin:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+</style>

components/FichesPanel.vue

@@ -1,168 +0,0 @@
-<!--
-  FichesPanel — B3-M3
-  Panneau « toutes les fiches » : reçoit une liste déjà filtrée (recherche +
-  filtres en cours côté page), l'affiche en grille de FicheMiniCard, et
-  expose ses propres chips de filtrage branchées sur le MÊME état que la
-  page appelante (pas un second état — voir vérification du brief).
-  Ne crée pas de second champ de recherche : `query` sert uniquement à
-  nuancer le message d'état vide.
--->
-<template>
-  <div class="fiches-panel">
-    <div class="fiches-panel__head">
-      <p class="fiches-panel__intention">{{ intention }}</p>
-
-      <div class="fiches-panel__count">
-        {{ fiches.length }} fiche{{ fiches.length > 1 ? 's' : '' }}
-      </div>
-
-      <ChipGroup v-if="hashtags.length" aria-label="Filtrer les fiches" class="fiches-panel__chips">
-        <Chip
-          v-for="tag in visibleHashtags"
-          :key="tag"
-          :label="tag"
-          variant="fonction"
-          :active="selected.includes(tag)"
-          @toggle="toggle(tag)"
-        />
-        <Chip
-          v-if="isCollapsible"
-          :label="expanded ? 'Réduire' : `Voir les ${hiddenCount} autres`"
-          variant="echelle"
-          :active="expanded"
-          @toggle="expanded = !expanded"
-        />
-      </ChipGroup>
-    </div>
-
-    <div class="fiches-panel__body">
-      <p v-if="fiches.length === 0" class="fiches-panel__empty">
-        Aucun résultat<template v-if="query"> pour « {{ query }} »</template>.
-      </p>
-
-      <div v-else class="fiches-panel__grid">
-        <FicheMiniCard
-          v-for="fiche in fiches"
-          :key="`${fiche.kind}-${fiche.id}`"
-          :fiche="fiche"
-          @open="emit('open', fiche)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { MiniFiche } from '~/composables/useFicheAdapter'
-
-const props = defineProps<{
-  fiches: MiniFiche[]
-  hashtags: string[]
-  selected: string[]
-  query: string
-  intention: string
-}>()
-
-const emit = defineEmits<{
-  'update:selected': [value: string[]]
-  open: [fiche: MiniFiche]
-}>()
-
-// Hashtags repliés (B3-M4) — au-delà de COLLAPSE_THRESHOLD chips, n'affiche
-// que les premières + un Chip-bouton « voir les N autres ». Les chips déjà
-// actives restent toujours visibles même repliées. `/` (10 fonctions) ne
-// dépasse jamais le seuil ; `/agences` (~60 hashtags) se replie. État
-// déplié non persistant (ref locale, reset à chaque montage du composant).
-const COLLAPSE_THRESHOLD = 14
-const expanded = ref(false)
-
-const isCollapsible = computed(() => props.hashtags.length > COLLAPSE_THRESHOLD)
-
-const visibleHashtags = computed(() => {
-  if (expanded.value || !isCollapsible.value) return props.hashtags
-  const head = props.hashtags.slice(0, COLLAPSE_THRESHOLD)
-  const headSet = new Set(head)
-  const activeOutsideHead = props.hashtags.filter(
-    (tag) => props.selected.includes(tag) && !headSet.has(tag)
-  )
-  return [...head, ...activeOutsideHead]
-})
-
-const hiddenCount = computed(() => props.hashtags.length - visibleHashtags.value.length)
-
-function toggle(tag: string) {
-  if (props.selected.includes(tag)) {
-    emit('update:selected', props.selected.filter((t) => t !== tag))
-  } else {
-    emit('update:selected', [...props.selected, tag])
-  }
-}
-</script>
-
-<style scoped>
-.fiches-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-}
-
-.fiches-panel__head {
-  flex-shrink: 0;
-  padding: var(--space-sm) var(--space-md);
-  border-bottom: 1px solid var(--border);
-  background: var(--surface);
-}
-
-.fiches-panel__intention {
-  margin: 0 0 var(--space-xs);
-  font-size: var(--fs-sm);
-  line-height: var(--lh-base);
-  color: var(--text-muted);
-}
-
-.fiches-panel__count {
-  margin: 0 0 var(--space-xs);
-  font-size: var(--fs-xs);
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-  color: var(--text-subtle);
-}
-
-.fiches-panel__chips {
-  margin-top: var(--space-2xs);
-}
-
-.fiches-panel__body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: var(--space-md);
-}
-
-.fiches-panel__empty {
-  margin: var(--space-xl) 0;
-  text-align: center;
-  font-size: var(--fs-sm);
-  color: var(--text-muted);
-}
-
-.fiches-panel__grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--space-sm);
-}
-
-@media (min-width: 768px) {
-  .fiches-panel__grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 1280px) {
-  .fiches-panel__grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-</style>

components/FilEchelle.vue

@@ -0,0 +1,99 @@
+<!--
+  FilEchelle — B10-M4
+  < 768 px : une ligne de 28 px sous la barre, « S · Partir de soi · Outils · Jobs » :
+  l'échelle courante, l'onglet courant, puis ses voisins du groupe (liens).
+  Absente sur les pages hors groupe (Manifeste, À propos, Proposer, Signaler, fiche).
+  Montée dans le flux de la colonne d'app.vue, AVANT le conteneur de page : la carte
+  de / perd ces 28 px à vue, jamais en dessous de la ligne de flottaison.
+-->
+<template>
+  <nav v-if="courant" class="fil-echelle" :class="{ 'fil-echelle--long': voisins.length > 1 }" aria-label="Échelle courante">
+    <span class="fil-echelle__pastille">{{ courant.echelle }}</span>
+    <span class="fil-echelle__titre">{{ ECHELLES[courant.echelle].titre }}</span>
+    <span class="fil-echelle__sep" aria-hidden="true">·</span>
+    <span class="fil-echelle__courant" aria-current="page">{{ courant.onglet.libelle }}</span>
+    <template v-for="o in voisins" :key="o.to">
+      <span class="fil-echelle__sep" aria-hidden="true">·</span>
+      <NuxtLink :to="o.to" class="fil-echelle__lien">{{ o.libelle }}</NuxtLink>
+    </template>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ECHELLES, echelleDeRoute } from '~/utils/echelles'
+
+const route = useRoute()
+const courant = computed(() => echelleDeRoute(route))
+const voisins = computed(() =>
+  courant.value ? ECHELLES[courant.value.echelle].onglets.filter((o) => o !== courant.value!.onglet) : [],
+)
+</script>
+
+<style scoped>
+.fil-echelle {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 28px;
+  padding: 0 var(--space-sm);
+  gap: 5px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  white-space: nowrap;
+  font-size: 0.72rem;
+  line-height: 1;
+  background: var(--surface);
+  border-bottom: 1px solid var(--bg-alt);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+}
+
+.fil-echelle::-webkit-scrollbar {
+  display: none;
+}
+
+.fil-echelle__pastille {
+  padding: 2px 5px;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-weight: var(--fw-bold);
+}
+
+.fil-echelle__courant {
+  font-weight: var(--fw-bold);
+  color: var(--text);
+}
+
+.fil-echelle__lien {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: var(--border);
+  text-underline-offset: 3px;
+}
+
+.fil-echelle__lien:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+/* Groupe à trois onglets (M) sous 400 px : l'accroche se replie sur sa pastille
+   (lue quand même par les lecteurs d'écran), sinon « Codev » sort de l'écran. */
+@media (max-width: 399px) {
+  .fil-echelle--long .fil-echelle__titre {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+  }
+  .fil-echelle--long .fil-echelle__titre + .fil-echelle__sep {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .fil-echelle {
+    display: none;
+  }
+}
+</style>

components/FonctionFilter.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="space-y-1.5">
-    <p class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">Fonction</p>
-    <ChipGroup aria-label="Filtrer par fonction">
-      <Chip
-        v-for="fn in FONCTIONS"
-        :key="fn"
-        :label="fn"
-        variant="fonction"
-        :active="modelValue.includes(fn)"
-        :count="modelValue.includes(fn) ? (modelValue.indexOf(fn) + 1) : (counts[fn] ?? 0)"
-        @toggle="toggle(fn)"
-      />
-    </ChipGroup>
-    <p v-if="modelValue.length" class="text-xs pt-0.5" style="color: var(--nav-text-muted);">
-      {{ modelValue.length }} actif{{ modelValue.length > 1 ? 's' : '' }}
-      <button @click="emit('update:modelValue', [])" class="ml-2 underline hover:opacity-70">Effacer</button>
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-const FONCTIONS = [
-  'Juridique',
-  'Technique',
-  'Économique',
-  'Administratif',
-  'Chantier',
-  'Comptabilité',
-  'Développement',
-  'Formation',
-  "Gestion d'agence",
-  'Santé mentale',
-] as const
-
-const props = defineProps<{
-  modelValue: string[]
-  counts: Record<string, number>
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string[]]
-}>()
-
-function toggle(fn: string) {
-  if (props.modelValue.includes(fn)) {
-    emit('update:modelValue', props.modelValue.filter(f => f !== fn))
-  } else {
-    emit('update:modelValue', [...props.modelValue, fn])
-  }
-}
-</script>

components/GrapheMots.vue

@@ -0,0 +1,314 @@
+<!--
+  GrapheMots — B6-M2. Le graphe des sept mots de « Partir de soi » : un nœud
+  central, les mots en couronne (ordre de la slide, sens horaire depuis le
+  haut), et autour de chaque mot ses ressources en petits nœuds-feuilles.
+  Vocabulaire du motif maillage (DESIGN-SYSTEM) : nœuds pleins, arêtes fines,
+  un nœud central mis en avant. Statique et déterministe : pas de simulation,
+  rien ne bouge ; la mise en page est une fonction pure de la taille mesurée.
+
+  Il vit dans le slot #carte de VueFiches et ne connaît que `vf` :
+  clic / Entrée sur un mot ouvre sa fiche (`vf.ouvrirFiche`), le mot ouvert
+  (`vf.ficheId`) et le mot survolé dans la liste (`vf.survolId`) s'allument,
+  les mots hors du résultat (`vf.idsResultat`) s'estompent sans disparaître.
+  Les feuilles ne sont pas dans l'ordre de tabulation (on y accède par leur
+  mot) ; leur libellé apparaît au survol.
+-->
+<template>
+  <div ref="racine" class="gm">
+    <svg
+      class="gm__svg"
+      :viewBox="`0 0 ${taille.w} ${taille.h}`"
+      preserveAspectRatio="xMidYMid meet"
+      role="group"
+      aria-labelledby="gm-titre"
+    >
+      <title id="gm-titre">Graphe des sept mots de « Partir de soi » et des ressources de chacun</title>
+
+      <!-- Arêtes : centre → mot, mot → feuilles -->
+      <g class="gm__aretes" aria-hidden="true">
+        <template v-for="n in noeuds" :key="`a-${n.id}`">
+          <line
+            :x1="centre.x" :y1="centre.y" :x2="n.x" :y2="n.y"
+            class="gm__arete" :class="{ 'gm__arete--vif': allume(n.id), 'gm__arete--hors': hors(n.id) }"
+          />
+          <line
+            v-for="f in n.feuilles" :key="`a-${n.id}-${f.id}`"
+            :x1="n.x" :y1="n.y" :x2="f.x" :y2="f.y"
+            class="gm__arete gm__arete--feuille" :class="{ 'gm__arete--vif': allume(n.id), 'gm__arete--hors': hors(n.id) }"
+          />
+        </template>
+      </g>
+
+      <!-- Nœud central -->
+      <g class="gm__centre" aria-hidden="true">
+        <circle :cx="centre.x" :cy="centre.y" :r="RAYON_CENTRE" class="gm__centre-rond" />
+        <text :x="centre.x" :y="centre.y - 7" class="gm__centre-texte" text-anchor="middle">Partir</text>
+        <text :x="centre.x" :y="centre.y + 8" class="gm__centre-texte" text-anchor="middle">de soi</text>
+      </g>
+
+      <!-- Feuilles (ressources) -->
+      <g v-for="n in noeuds" :key="`f-${n.id}`" class="gm__feuilles" :class="{ 'gm__feuilles--hors': hors(n.id) }">
+        <circle
+          v-for="f in n.feuilles" :key="f.id"
+          :cx="f.x" :cy="f.y" r="5.5"
+          class="gm__feuille" :class="{ 'gm__feuille--vive': allume(n.id) || survolFeuille === `${n.id}/${f.id}` }"
+          @click="vf.ouvrirFiche(n.id)"
+          @mouseenter="survolerFeuille(n.id, f.id)"
+          @mouseleave="survolerFeuille(null, null)"
+        >
+          <title>{{ f.titre }}</title>
+        </circle>
+      </g>
+
+      <!-- Mots -->
+      <g
+        v-for="n in noeuds"
+        :key="n.id"
+        class="gm__mot"
+        :class="{ 'gm__mot--actif': allume(n.id), 'gm__mot--hors': hors(n.id), 'gm__mot--vide': n.vide }"
+        role="button"
+        tabindex="0"
+        :aria-label="n.aria"
+        :aria-pressed="actif(n.id)"
+        @click="vf.ouvrirFiche(n.id)"
+        @keydown.enter.prevent="vf.ouvrirFiche(n.id)"
+        @keydown.space.prevent="vf.ouvrirFiche(n.id)"
+        @mouseenter="vf.survolId = n.id"
+        @mouseleave="vf.survolId = null"
+        @focus="vf.survolId = n.id"
+        @blur="vf.survolId = null"
+      >
+        <rect
+          :x="n.x - n.l / 2" :y="n.y - n.h / 2" :width="n.l" :height="n.h" :rx="n.h / 2"
+          class="gm__pilule"
+        />
+        <text :x="n.x" :y="n.y" text-anchor="middle" class="gm__libelle" aria-hidden="true">
+          <tspan v-for="(ligne, i) in n.lignes" :key="i" :x="n.x" :y="n.y + (i - (n.lignes.length - 1) / 2) * INTERLIGNE + 4.5">{{ ligne }}</tspan>
+        </text>
+      </g>
+
+      <!-- Libellé de la feuille survolée, au-dessus de tout -->
+      <g v-if="bulle" class="gm__bulle" aria-hidden="true">
+        <rect :x="bulle.x - bulle.l / 2" :y="bulle.y - 11" :width="bulle.l" height="22" rx="6" class="gm__bulle-fond" />
+        <text :x="bulle.x" :y="bulle.y + 4" text-anchor="middle" class="gm__bulle-texte">{{ bulle.texte }}</text>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { VueFichesEtat } from '~/composables/useVueFiches'
+
+const props = defineProps<{
+  vf: VueFichesEtat
+  mots: { id: string; mot: string; ressources: { id: string; titre: string }[]; vide?: boolean }[]
+}>()
+
+const RAYON_CENTRE = 36
+const INTERLIGNE = 15
+const CARACTERES_LIGNE = 16
+const PORTEE_FEUILLES = 46
+const MARGE = 10
+
+// ── Taille : mesurée au montage (le rendu serveur part d'une taille plausible) ──
+const racine = ref<HTMLElement | null>(null)
+const taille = reactive({ w: 720, h: 600 })
+onMounted(() => {
+  const el = racine.value
+  if (!el || typeof ResizeObserver === 'undefined') return
+  const maj = (w: number, h: number) => {
+    if (w > 40 && h > 40) { taille.w = Math.round(w); taille.h = Math.round(h) }
+  }
+  maj(el.clientWidth, el.clientHeight)
+  const ro = new ResizeObserver((entrees) => {
+    const r = entrees[0]?.contentRect
+    if (r) maj(r.width, r.height)
+  })
+  ro.observe(el)
+  onBeforeUnmount(() => ro.disconnect())
+})
+
+// ── Mise en page : fonction pure de (taille, mots) ──
+/** Une ligne si ça tient, sinon deux lignes équilibrées (« naviguer / avec soi », pas « naviguer avec / soi »). */
+function couper(texte: string): string[] {
+  if (texte.length <= CARACTERES_LIGNE) return [texte]
+  const mots = texte.split(' ')
+  let meilleur: string[] = [texte]
+  let pire = Infinity
+  for (let i = 1; i < mots.length; i++) {
+    const l = [mots.slice(0, i).join(' '), mots.slice(i).join(' ')]
+    const m = Math.max(l[0].length, l[1].length)
+    if (m < pire) { pire = m; meilleur = l }
+  }
+  return meilleur
+}
+
+function tronquer(t: string, max = 44): string {
+  return t.length > max ? `${t.slice(0, max - 1).trimEnd()}…` : t
+}
+
+const centre = computed(() => ({ x: taille.w / 2, y: taille.h / 2 }))
+
+const noeuds = computed(() => {
+  const n = props.mots.length
+  const { w, h } = taille
+  const base = props.mots.map((m) => {
+    const lignes = couper(m.mot)
+    return { m, lignes, l: Math.max(...lignes.map((x) => x.length)) * 6.9 + 24, h: lignes.length * INTERLIGNE + 11 }
+  })
+  const lMax = Math.max(...base.map((b) => b.l))
+  const hMax = Math.max(...base.map((b) => b.h))
+  const rx = Math.max(48, w / 2 - lMax / 2 - PORTEE_FEUILLES - MARGE)
+  const ry = Math.max(70, h / 2 - hMax / 2 - PORTEE_FEUILLES - MARGE)
+  const cx = centre.value.x
+  const cy = centre.value.y
+
+  // Colonne étroite : la couronne ne tient plus (les mots du bas se chevaucheraient).
+  // Les mots s'étagent alors en zigzag autour du centre, une rangée chacun, dans le
+  // même sens de lecture (haut, puis la droite en descendant, puis la gauche en remontant),
+  // et leurs ressources se rangent SOUS le mot.
+  const etroit = rx < lMax * 1.3
+  let place: { x: number; y: number }[]
+  if (etroit) {
+    const droite = Math.ceil((n - 1) / 2)
+    const rangsDroite = Array.from({ length: droite }, (_, i) => 1 + 2 * i)
+    const rangsGauche = Array.from({ length: n }, (_, i) => i).filter((r) => r > 0 && !rangsDroite.includes(r)).reverse()
+    const rang = (i: number) => (i === 0 ? 0 : i <= droite ? rangsDroite[i - 1] : rangsGauche[i - droite - 1])
+    const y0 = hMax / 2 + MARGE
+    const y1 = h - hMax / 2 - MARGE - 24 // de la place sous le dernier mot pour ses feuilles
+    const pas = n > 1 ? (y1 - y0) / (n - 1) : 0
+    const dx = Math.max(0, w / 2 - lMax / 2 - 6)
+    place = base.map((_, i) => ({ x: i === 0 ? cx : i <= droite ? cx + dx : cx - dx, y: y0 + rang(i) * pas }))
+  } else {
+    place = base.map((_, i) => {
+      const a = -Math.PI / 2 + (i * 2 * Math.PI) / n // depuis le haut, sens horaire
+      return { x: cx + rx * Math.cos(a), y: cy + ry * Math.sin(a) }
+    })
+  }
+
+  return base.map((b, i) => {
+    const { x, y } = place[i]
+    const k = b.m.ressources.length
+    let feuilles: { id: string; titre: string; x: number; y: number }[]
+    if (etroit) {
+      const ecart = k > 1 ? Math.min(17, (b.l - 20) / (k - 1)) : 0
+      feuilles = b.m.ressources.map((r, j) => ({
+        id: r.id,
+        titre: r.titre,
+        x: x + (j - (k - 1) / 2) * ecart,
+        y: y + b.h / 2 + 13 + (j % 2 ? 9 : 0),
+      }))
+    } else {
+      // direction « vers l'extérieur » réelle (l'ellipse n'est pas un cercle)
+      const dir = Math.atan2(y - cy, x - cx)
+      const pas = Math.min(0.55, 2.3 / Math.max(k, 1))
+      const dist = Math.abs(Math.cos(dir)) * (b.l / 2) + Math.abs(Math.sin(dir)) * (b.h / 2) + 20
+      feuilles = b.m.ressources.map((r, j) => {
+        const t = dir + (j - (k - 1) / 2) * pas
+        const d = dist + (j % 2 ? 12 : 0)
+        return {
+          id: r.id,
+          titre: r.titre,
+          x: Math.min(w - 8, Math.max(8, x + d * Math.cos(t))),
+          y: Math.min(h - 8, Math.max(8, y + d * Math.sin(t))),
+        }
+      })
+    }
+    return {
+      id: b.m.id,
+      x, y, l: b.l, h: b.h, lignes: b.lignes,
+      vide: !!b.m.vide || k === 0,
+      aria: `${b.m.mot}, ${k === 0 ? 'aucune ressource pour l’instant' : k === 1 ? '1 ressource' : `${k} ressources`}`,
+      feuilles,
+    }
+  })
+})
+
+// ── États (tout vient de vf) ──
+const actif = (id: string) => String(props.vf.ficheId ?? '') === id
+const survol = (id: string) => props.vf.survolId != null && String(props.vf.survolId) === id
+const allume = (id: string) => actif(id) || survol(id)
+const hors = (id: string) => !props.vf.idsResultat.has(id)
+
+const survolFeuille = ref<string | null>(null)
+function survolerFeuille(mot: string | null, feuille: string | null) {
+  survolFeuille.value = mot && feuille ? `${mot}/${feuille}` : null
+  props.vf.survolId = mot
+}
+
+const bulle = computed(() => {
+  if (!survolFeuille.value) return null
+  const [mot, feuille] = survolFeuille.value.split('/')
+  const f = noeuds.value.find((n) => n.id === mot)?.feuilles.find((x) => x.id === feuille)
+  if (!f) return null
+  const texte = tronquer(f.titre)
+  const l = texte.length * 6.3 + 16
+  const x = Math.min(taille.w - l / 2 - 4, Math.max(l / 2 + 4, f.x))
+  const y = f.y < 30 ? f.y + 24 : f.y - 18
+  return { x, y, l, texte }
+})
+</script>
+
+<style scoped>
+.gm {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--bg-alt);
+}
+.gm__svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  font-family: inherit;
+}
+
+/* Arêtes fines */
+.gm__arete { stroke: var(--nav-primary-solid); stroke-width: 1; stroke-opacity: 0.35; }
+.gm__arete--feuille { stroke-opacity: 0.28; }
+.gm__arete--vif { stroke-width: 2; stroke-opacity: 0.8; }
+.gm__arete--hors { stroke-opacity: 0.12; }
+
+/* Nœud central, mis en avant */
+.gm__centre-rond { fill: var(--nav-primary-solid); stroke: var(--accent); stroke-width: 3; }
+.gm__centre-texte { fill: var(--nav-text-on-primary); font-size: 12px; font-weight: 700; }
+
+/* Feuilles : petits nœuds pleins */
+.gm__feuille {
+  fill: var(--nav-primary-solid);
+  stroke: var(--bg-alt);
+  stroke-width: 1.5;
+  cursor: pointer;
+  transition: fill 120ms ease-out;
+}
+.gm__feuille--vive { fill: var(--accent); stroke: var(--nav-primary-solid); }
+.gm__feuilles--hors { opacity: 0.3; }
+
+/* Mots : pastilles qui portent leur libellé */
+.gm__mot { cursor: pointer; outline: none; transition: opacity 120ms ease-out; }
+.gm__pilule {
+  fill: var(--surface);
+  stroke: var(--nav-primary-solid);
+  stroke-width: 2;
+  transition: fill 120ms ease-out, stroke 120ms ease-out;
+}
+.gm__libelle { fill: var(--text); font-size: 12.5px; font-weight: 600; pointer-events: none; }
+.gm__mot--vide .gm__pilule { stroke-dasharray: 5 4; }
+.gm__mot--actif .gm__pilule { fill: var(--accent); stroke: var(--nav-primary-solid); }
+.gm__mot--actif .gm__libelle { fill: var(--on-accent); }
+.gm__mot--hors { opacity: 0.4; }
+.gm__mot:focus-visible .gm__pilule { stroke: var(--focus-ring); stroke-width: 4; }
+
+/* Libellé de feuille */
+.gm__bulle { pointer-events: none; }
+.gm__bulle-fond { fill: var(--surface); stroke: var(--nav-primary-solid); stroke-width: 1; }
+.gm__bulle-texte { fill: var(--text); font-size: 11.5px; font-weight: 500; }
+
+@media (prefers-reduced-motion: reduce) {
+  .gm__feuille, .gm__mot, .gm__pilule { transition: none; }
+}
+</style>

components/HashtagFilter.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="hashtag-filter" style="padding: 8px 12px; background: var(--nav-surface);">
-    <!-- Filtres famille — couleurs propres par famille (hors grammaire dimension Chip, non touché B3-M1) -->
-    <div style="margin-bottom: 6px;">
-      <span class="filter-label">FAMILLES</span>
-      <div class="chips-row">
-        <span
-          v-for="fam in FAMILLES"
-          :key="fam.id"
-          class="chip"
-          :style="selectedFamille === fam.id
-            ? `background: ${fam.color}; color: white; font-weight: 600; border: 2px solid ${fam.color};`
-            : `background: var(--nav-bg-alt); color: ${fam.color}; border: 2px solid ${fam.color}; font-weight: 600;`"
-          @click="toggleFamille(fam.id)"
-        >{{ fam.shortLabel }}</span>
-      </div>
-    </div>
-
-    <!-- Filtres hashtags avec toggle -->
-    <div>
-      <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;">
-        <span class="filter-label">HASHTAGS</span>
-        <button
-          @click="hashtagsVisible = !hashtagsVisible"
-          style="font-size: 0.7rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
-        >{{ hashtagsVisible ? 'Replier' : 'Afficher (' + props.allHashtags.length + ')' }}</button>
-      </div>
-      <ChipGroup v-if="hashtagsVisible" aria-label="Filtrer par hashtag">
-        <Chip
-          v-for="tag in props.allHashtags"
-          :key="tag"
-          :label="tag"
-          variant="fonction"
-          :active="selectedHashtags.includes(tag)"
-          @toggle="toggleHashtag(tag)"
-        />
-      </ChipGroup>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const FAMILLES = [
-  { id: 1, shortLabel: 'Réemploi', color: '#a85d3e' },
-  { id: 2, shortLabel: 'Frugalité', color: '#c4a472' },
-  { id: 3, shortLabel: 'Social', color: '#d4a017' },
-  { id: 4, shortLabel: 'Collectifs', color: '#5a7a4a' },
-  { id: 5, shortLabel: 'Urbanisme', color: '#3d6a8c' },
-  { id: 6, shortLabel: 'Recherche', color: '#6b3fa0' },
-]
-
-const props = defineProps<{
-  allHashtags: string[]
-  selectedHashtags: string[]
-  selectedFamille: number | null
-}>()
-
-const emit = defineEmits<{
-  'update:selectedHashtags': [v: string[]]
-  'update:selectedFamille': [v: number | null]
-}>()
-
-const hashtagsVisible = ref(false)
-
-function toggleFamille(id: number) {
-  emit('update:selectedFamille', props.selectedFamille === id ? null : id)
-}
-
-function toggleHashtag(tag: string) {
-  const current = props.selectedHashtags
-  emit('update:selectedHashtags',
-    current.includes(tag) ? current.filter(t => t !== tag) : [...current, tag]
-  )
-}
-</script>
-
-<style scoped>
-.filter-label {
-  font-size: 0.7rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: var(--nav-text-muted);
-  display: block;
-  margin-bottom: 4px;
-}
-.chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
-.chip {
-  cursor: pointer;
-  padding: 3px 10px;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  transition: all 0.15s;
-  user-select: none;
-}
-</style>

components/MediaTabProjets.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="media-tab-projets" style="padding: 1.5rem; overflow-y: auto;">
     <div style="max-width: 70ch; margin-bottom: 1.5rem;">
-      <h2 style="font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--nav-text);">PFE engagés</h2>
+      <h2 style="font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--nav-text);">Publications</h2>
       <p style="font-size: 0.9rem; line-height: 1.6; color: var(--nav-text);">
         Mutualiser le savoir. Voici les PFE engagés publiés en ligne dont nous avons connaissance.
         Partage-nous le lien de ton travail si tu veux participer à cette initiative.

components/MobileSheet.vue

@@ -1,218 +0,0 @@
-<!--
-  MobileSheet — Bottom sheet swipable 3 états (collapsed / half / full)
-  Pattern Google Maps mobile
-
-  États :
-  - collapsed : juste la poignée + compteur (~56px)
-  - half      : ~50dvh (état initial)
-  - full      : ~92dvh (plein écran)
-
-  Déclenché par touch/drag sur la poignée
--->
-<template>
-  <div
-    class="mobile-sheet"
-    :class="`mobile-sheet--${state}`"
-    :style="{ transform: `translateY(${dragOffset}px)` }"
-  >
-    <!-- Poignée drag -->
-    <div
-      class="sheet-handle-area"
-      @touchstart.passive="onTouchStart"
-      @touchmove.passive="onTouchMove"
-      @touchend="onTouchEnd"
-    >
-      <div class="sheet-handle-bar" />
-    </div>
-
-    <!-- Compteur compact (toujours visible) -->
-    <div class="sheet-header" @click="onHeaderClick">
-      <span class="sheet-counter">
-        <span v-if="pending">Chargement…</span>
-        <span v-else>{{ resultCount }} fiche{{ resultCount > 1 ? 's' : '' }}</span>
-      </span>
-      <svg
-        width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="2.5" stroke-linecap="round" aria-hidden="true"
-        class="sheet-chevron"
-        :class="{ 'sheet-chevron--up': state !== 'collapsed' }"
-        style="color: var(--nav-text-muted); flex-shrink: 0;"
-      >
-        <polyline points="18 15 12 9 6 15"/>
-      </svg>
-    </div>
-
-    <!-- Contenu scrollable (caché si collapsed) -->
-    <div
-      v-show="state !== 'collapsed'"
-      ref="contentEl"
-      class="sheet-content"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-type SheetState = 'collapsed' | 'half' | 'full'
-
-const props = defineProps<{
-  resultCount: number
-  pending?: boolean
-}>()
-
-const emit = defineEmits<{
-  'state-change': [state: SheetState]
-}>()
-
-const state = ref<SheetState>('half')
-const dragOffset = ref(0)
-const contentEl = ref<HTMLElement | null>(null)
-
-let touchStartY = 0
-let touchCurrentY = 0
-let isDragging = false
-
-// Cycle états au clic header
-function onHeaderClick() {
-  if (state.value === 'collapsed') {
-    setSheetState('half')
-  } else if (state.value === 'half') {
-    setSheetState('full')
-  } else {
-    setSheetState('collapsed')
-  }
-}
-
-function setSheetState(next: SheetState) {
-  state.value = next
-  dragOffset.value = 0
-  emit('state-change', next)
-}
-
-// Touch handlers
-function onTouchStart(e: TouchEvent) {
-  touchStartY = e.touches[0].clientY
-  touchCurrentY = touchStartY
-  isDragging = true
-  dragOffset.value = 0
-}
-
-function onTouchMove(e: TouchEvent) {
-  if (!isDragging) return
-  touchCurrentY = e.touches[0].clientY
-  const delta = touchCurrentY - touchStartY
-  // Limiter le drag visuellement (résistance)
-  dragOffset.value = delta * 0.6
-}
-
-function onTouchEnd() {
-  if (!isDragging) return
-  isDragging = false
-
-  const delta = touchCurrentY - touchStartY
-  const threshold = 60 // px minimum pour changer d'état
-
-  if (delta > threshold) {
-    // Swipe vers le bas → état inférieur
-    if (state.value === 'full') setSheetState('half')
-    else if (state.value === 'half') setSheetState('collapsed')
-    else setSheetState('collapsed')
-  } else if (delta < -threshold) {
-    // Swipe vers le haut → état supérieur
-    if (state.value === 'collapsed') setSheetState('half')
-    else if (state.value === 'half') setSheetState('full')
-    else setSheetState('full')
-  } else {
-    // Snap back
-    dragOffset.value = 0
-  }
-
-  // Transition smooth au relâchement
-  dragOffset.value = 0
-}
-</script>
-
-<style scoped>
-.mobile-sheet {
-  position: fixed;
-  inset-x: 0;
-  bottom: 0;
-  z-index: 500;
-  background: var(--nav-surface);
-  border-radius: 16px 16px 0 0;
-  box-shadow: 0 -4px 24px rgba(26, 34, 56, 0.14);
-  display: flex;
-  flex-direction: column;
-  transition: height 0.3s cubic-bezier(0.32, 0.72, 0, 1), transform 0.05s linear;
-  will-change: height, transform;
-  overflow: hidden;
-}
-
-/* ── États hauteur ───────────────────────────────────────────────────── */
-.mobile-sheet--collapsed {
-  height: 56px;
-}
-
-.mobile-sheet--half {
-  height: 50dvh;
-  min-height: 200px;
-}
-
-.mobile-sheet--full {
-  height: 92dvh;
-}
-
-/* ── Poignée ─────────────────────────────────────────────────────────── */
-.sheet-handle-area {
-  display: flex;
-  justify-content: center;
-  padding: 10px 0 4px;
-  cursor: grab;
-  flex-shrink: 0;
-}
-
-.sheet-handle-area:active {
-  cursor: grabbing;
-}
-
-.sheet-handle-bar {
-  width: 36px;
-  height: 4px;
-  border-radius: 2px;
-  background: var(--nav-bg-alt);
-}
-
-/* ── Header compteur ─────────────────────────────────────────────────── */
-.sheet-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px 8px;
-  cursor: pointer;
-  flex-shrink: 0;
-  gap: 8px;
-}
-
-.sheet-counter {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--nav-text-muted);
-}
-
-.sheet-chevron {
-  transition: transform 0.2s ease;
-}
-
-.sheet-chevron--up {
-  transform: rotate(180deg);
-}
-
-/* ── Contenu scrollable ──────────────────────────────────────────────── */
-.sheet-content {
-  flex: 1;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-}
-</style>

components/NavEchelles.vue

@@ -0,0 +1,148 @@
+<!--
+  NavEchelles — B10-M2
+  Barre des trois échelles S / M / XL, lue depuis utils/echelles.ts (source unique).
+  ≥ 1280 px : les trois groupes ; 768-1279 px : le seul groupe de la page courante ;
+  < 768 px : rien (FilEchelle + NavTiroir prennent le relais).
+  Chaque groupe = <ul> étiqueté par son accroche (pastille + titre de l'échelle).
+-->
+<template>
+  <nav class="nav-echelles" aria-label="Échelles">
+    <div
+      v-for="id in ORDRE_ECHELLES"
+      :key="id"
+      class="nav-echelles__grp"
+      :class="{ 'nav-echelles__grp--courant': courant?.echelle === id }"
+    >
+      <span :id="`nav-echelle-${id}`" class="nav-echelles__kick">
+        <span class="nav-echelles__pastille">{{ id }}</span>{{ ECHELLES[id].titre }}
+      </span>
+      <ul class="nav-echelles__tabs" :aria-labelledby="`nav-echelle-${id}`">
+        <li v-for="o in ECHELLES[id].onglets" :key="o.to">
+          <NuxtLink
+            :to="o.to"
+            class="nav-echelles__tab"
+            :class="{ 'nav-echelles__tab--actif': o.actif(route) }"
+            :aria-current="o.actif(route) ? 'page' : undefined"
+          >{{ o.libelle }}</NuxtLink>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ECHELLES, ORDRE_ECHELLES, echelleDeRoute } from '~/utils/echelles'
+
+const route = useRoute()
+const courant = computed(() => echelleDeRoute(route))
+</script>
+
+<style scoped>
+.nav-echelles {
+  display: none;
+  align-self: stretch;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: var(--space-lg);
+}
+
+.nav-echelles__grp {
+  position: relative;
+  display: none;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.nav-echelles__kick {
+  padding: 0 var(--space-xs);
+  font-size: 0.66rem;
+  font-weight: var(--fw-semibold);
+  letter-spacing: 0.04em;
+  line-height: 1.3;
+  white-space: nowrap;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+}
+
+.nav-echelles__grp--courant .nav-echelles__kick {
+  color: var(--text);
+}
+
+.nav-echelles__pastille {
+  display: inline-block;
+  margin-right: 5px;
+  padding: 0 5px;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-weight: var(--fw-bold);
+}
+
+.nav-echelles__tabs {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.nav-echelles__tab {
+  display: inline-block;
+  padding: 4px 9px 9px;
+  font-size: 0.8rem;
+  font-weight: var(--fw-medium);
+  white-space: nowrap;
+  text-decoration: none;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+  border-bottom: 2px solid transparent;
+  transition: color var(--dur-fast) var(--ease-out);
+}
+
+.nav-echelles__tab:hover {
+  color: var(--text);
+}
+
+.nav-echelles__tab:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm);
+}
+
+.nav-echelles__tab--actif {
+  color: var(--text);
+  font-weight: var(--fw-semibold);
+  border-bottom-color: var(--nav-primary-solid);
+}
+
+/* 768-1279 : le seul groupe courant, aligné à gauche après le logo */
+@media (min-width: 768px) {
+  .nav-echelles {
+    display: flex;
+    justify-content: flex-start;
+  }
+  .nav-echelles__grp--courant {
+    display: flex;
+  }
+}
+
+/* ≥ 1280 : les trois groupes, centrés, séparés par un filet */
+@media (min-width: 1280px) {
+  .nav-echelles {
+    justify-content: center;
+  }
+  .nav-echelles__grp {
+    display: flex;
+  }
+  .nav-echelles__grp + .nav-echelles__grp::before {
+    content: "";
+    position: absolute;
+    left: calc(var(--space-lg) / -2);
+    top: 10px;
+    bottom: 10px;
+    border-left: 1px solid var(--border);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nav-echelles__tab { transition: none; }
+}
+</style>

components/NavMap.vue

@@ -24,10 +24,16 @@ interface Org {
 const props = defineProps<{
   orgs: Org[]
   selectedId?: number | null
+  /** Fiche survolée dans la liste (B11) : épingle safran, sans recentrer. */
+  survolId?: number | null
+  /** « Voir sur la carte » (B12) : zoome jusqu'à l'épingle, sortie de son cluster ; `n` change à chaque demande. */
+  centrage?: { id: number; n: number } | null
 }>()
 
 const emit = defineEmits<{
   'select-org': [id: number]
+  /** Survol d'une épingle (B11) : la liste allume la carte-fiche. */
+  survol: [id: number | null]
 }>()
 
 const mapContainer = ref<HTMLElement | null>(null)
@@ -35,14 +41,15 @@ let mapInstance: Map | null = null
 let clusterGroup: any = null
 const markers = new Map<number, Marker>()
 let tileLayerInstance: any = null
+let resizeObserver: ResizeObserver | null = null
 
 // Créer une DivIcon pour les pins personnalisés
-function createPinIcon(isPrioritaire: boolean, isSelected = false): DivIcon {
+function createPinIcon(isPrioritaire: boolean, isSelected = false, isSurvol = false): DivIcon {
   const L = (window as any).L
-  const bg = isPrioritaire ? '#f5b342' : 'rgba(26, 34, 56, 0.6)'
+  const bg = isSurvol || isPrioritaire ? '#f5b342' : 'rgba(26, 34, 56, 0.6)'
-  const border = isPrioritaire ? '#1a2238' : '#ffffff'
+  const border = isPrioritaire || isSurvol ? '#1a2238' : '#ffffff'
-  const size = isSelected ? 18 : 14
+  const size = isSelected || isSurvol ? 18 : 14
-  const shadow = isSelected ? '0 0 0 4px rgba(245,179,66,0.5)' : 'none'
+  const shadow = isSelected || isSurvol ? '0 0 0 4px rgba(245,179,66,0.5)' : 'none'
 
   return L.divIcon({
     className: '',
@@ -76,6 +83,7 @@ async function initMap() {
   ;(window as any).L = L
   // @ts-ignore — étend L.MarkerClusterGroup en side effect
   await import('leaflet.markercluster')
+  if (!mapContainer.value?.isConnected) return // page quittée pendant le chargement (ex. ?random=1)
   const MarkerClusterGroup = L.MarkerClusterGroup
 
   mapInstance = L.map(mapContainer.value, {
@@ -125,6 +133,14 @@ async function initMap() {
 
   mapInstance.addLayer(clusterGroup)
   updateMarkers(L)
+
+  // B11 : la carte change de largeur sans que la fenêtre bouge (Mixte ↔ Carte ↔ Fiches)
+  resizeObserver = new ResizeObserver(() => mapInstance?.invalidateSize({ pan: false }))
+  resizeObserver.observe(mapContainer.value)
+}
+
+function iconeDe(org: Org): DivIcon {
+  return createPinIcon(!!org.prioritaire, org.Id === props.selectedId, org.Id === props.survolId)
 }
 
 function updateMarkers(L?: any) {
@@ -141,10 +157,7 @@ function updateMarkers(L?: any) {
   )
 
   orgsWithCoords.forEach((org) => {
-    const isSelected = org.Id === props.selectedId
+    const marker = leaflet.marker([org.latitude!, org.longitude!], { icon: iconeDe(org), title: org.nom })
-    const icon = createPinIcon(!!org.prioritaire, isSelected)
-
-    const marker = leaflet.marker([org.latitude!, org.longitude!], { icon })
 
     const fonctions = org.tags_fonction
       ? org.tags_fonction.split(',').map((f: string) => f.trim()).filter(Boolean).slice(0, 2).join(', ')
@@ -163,6 +176,8 @@ function updateMarkers(L?: any) {
     `, { maxWidth: 240 })
 
     marker.on('click', () => emit('select-org', org.Id))
+    marker.on('mouseover', () => emit('survol', org.Id))
+    marker.on('mouseout', () => emit('survol', null))
 
     markers.set(org.Id, marker)
     clusterGroup.addLayer(marker)
@@ -189,7 +204,7 @@ watch(
       const oldMarker = markers.get(oldId)
       const oldOrg = props.orgs.find(o => o.Id === oldId)
       if (oldMarker && oldOrg) {
-        oldMarker.setIcon(createPinIcon(!!oldOrg.prioritaire, false))
+        oldMarker.setIcon(iconeDe(oldOrg))
       }
     }
     // Mettre en avant le nouveau marker
@@ -197,7 +212,7 @@ watch(
       const newMarker = markers.get(newId)
       const newOrg = props.orgs.find(o => o.Id === newId)
       if (newMarker && newOrg) {
-        newMarker.setIcon(createPinIcon(!!newOrg.prioritaire, true))
+        newMarker.setIcon(iconeDe(newOrg))
         // Centrer si visible
         const latLng = newMarker.getLatLng()
         mapInstance.panTo(latLng, { animate: true })
@@ -206,6 +221,27 @@ watch(
   }
 )
 
+// Survol depuis la liste : épingle safran, sans recentrer la carte
+watch(
+  () => props.survolId,
+  (newId, oldId) => {
+    for (const id of [oldId, newId]) {
+      if (id == null) continue
+      const m = markers.get(id)
+      const o = props.orgs.find(x => x.Id === id)
+      if (m && o) m.setIcon(iconeDe(o))
+      allumerCluster(m, id === newId)
+    }
+  }
+)
+
+// Épingle regroupée dans un cluster : c'est le cluster visible qui s'allume
+function allumerCluster(m: Marker | undefined, on: boolean) {
+  const parent = m && clusterGroup?.getVisibleParent(m)
+  const el = parent && parent !== m ? (parent as any)._icon?.firstElementChild as HTMLElement | undefined : undefined
+  if (el) el.style.boxShadow = on ? '0 0 0 4px #f5b342' : ''
+}
+
 // Watcher dark mode — switch tuile CartoDB light_all ↔ dark_all
 function updateTileTheme(dark: boolean) {
   if (!mapInstance || !tileLayerInstance) return
@@ -235,9 +271,26 @@ onMounted(() => {
 
 onUnmounted(() => {
   themeObserver?.disconnect()
+  resizeObserver?.disconnect()
   if (mapInstance) {
     mapInstance.remove()
     mapInstance = null
   }
 })
+
+// « Voir sur la carte » (B12) : la carte vient peut-être de s'afficher (Fiches → Mixte) ;
+// on attend sa taille réelle, puis on sort l'épingle de son cluster.
+watch(
+  () => props.centrage?.n,
+  () => {
+    const c = props.centrage
+    if (!c) return
+    setTimeout(() => {
+      if (!mapInstance || !clusterGroup) return
+      mapInstance.invalidateSize({ pan: false })
+      const m = markers.get(c.id)
+      if (m) clusterGroup.zoomToShowLayer(m, () => mapInstance?.panTo(m.getLatLng(), { animate: true }))
+    }, 260)
+  },
+)
 </script>

components/NavMapV2.vue

@@ -21,10 +21,16 @@ const FAMILLE_COLORS: Record<number, string> = {
 const props = defineProps<{
   structures: StructureV2[]
   selectedId?: string | null
+  /** Fiche survolée dans la liste (B11) : épingle cerclée de safran, sans recentrer. */
+  survolId?: string | null
+  /** « Voir sur la carte » (B12) : zoome jusqu'à l'épingle, sortie de son cluster ; `n` change à chaque demande. */
+  centrage?: { id: string; n: number } | null
 }>()
 
 const emit = defineEmits<{
   'select-structure': [id: string]
+  /** Survol d'une épingle (B11) : la liste allume la carte-fiche. */
+  survol: [id: string | null]
 }>()
 
 const mapContainer = ref<HTMLElement | null>(null)
@@ -32,17 +38,18 @@ let mapInstance: Map | null = null
 let clusterGroup: any = null
 const markers = new Map<string, Marker>()
 let tileLayerInstance: any = null
+let resizeObserver: ResizeObserver | null = null
 
 function getFamilleColor(famille: number): string {
   return FAMILLE_COLORS[famille] ?? '#888888'
 }
 
-function createPinIcon(famille: number, isSelected = false): DivIcon {
+function createPinIcon(famille: number, isSelected = false, isSurvol = false): DivIcon {
   const L = (window as any).L
   const bg = getFamilleColor(famille)
-  const size = isSelected ? 20 : 14
+  const size = isSelected || isSurvol ? 20 : 14
-  const border = isSelected ? 'white' : 'rgba(255,255,255,0.7)'
+  const border = isSurvol ? '#f5b342' : isSelected ? 'white' : 'rgba(255,255,255,0.7)'
-  const shadow = isSelected ? `0 0 0 4px ${bg}55` : 'none'
+  const shadow = isSurvol ? '0 0 0 4px rgba(245,179,66,0.6)' : isSelected ? `0 0 0 4px ${bg}55` : 'none'
 
   return L.divIcon({
     className: '',
@@ -76,6 +83,7 @@ async function initMap() {
   ;(window as any).L = L
   // @ts-ignore
   await import('leaflet.markercluster')
+  if (!mapContainer.value?.isConnected) return // page quittée pendant le chargement (ex. ?random=1)
   const MarkerClusterGroup = L.MarkerClusterGroup
 
   mapInstance = L.map(mapContainer.value, {
@@ -121,6 +129,14 @@ async function initMap() {
 
   mapInstance.addLayer(clusterGroup)
   updateMarkers(L)
+
+  // B11 : la carte change de largeur sans que la fenêtre bouge (Mixte ↔ Carte ↔ Fiches)
+  resizeObserver = new ResizeObserver(() => mapInstance?.invalidateSize({ pan: false }))
+  resizeObserver.observe(mapContainer.value)
+}
+
+function iconeDe(s: StructureV2): DivIcon {
+  return createPinIcon(s.famille_principale, s.id === props.selectedId, s.id === props.survolId)
 }
 
 function updateMarkers(L?: any) {
@@ -136,10 +152,7 @@ function updateMarkers(L?: any) {
   )
 
   structuresWithCoords.forEach((structure) => {
-    const isSelected = structure.id === props.selectedId
+    const marker = leaflet.marker([structure.latitude!, structure.longitude!], { icon: iconeDe(structure), title: structure.nom })
-    const icon = createPinIcon(structure.famille_principale, isSelected)
-
-    const marker = leaflet.marker([structure.latitude!, structure.longitude!], { icon })
 
     const hashtagsHtml = structure.hashtags.slice(0, 2)
       .map(h => `<span style="font-size:10px;color:var(--nav-text-muted);">${h}</span>`)
@@ -165,6 +178,8 @@ function updateMarkers(L?: any) {
     `, { maxWidth: 260 })
 
     marker.on('click', () => emit('select-structure', structure.id))
+    marker.on('mouseover', () => emit('survol', structure.id))
+    marker.on('mouseout', () => emit('survol', null))
 
     markers.set(structure.id, marker)
     clusterGroup.addLayer(marker)
@@ -193,14 +208,14 @@ watch(
       const oldMarker = markers.get(oldId)
       const oldStructure = props.structures.find(s => s.id === oldId)
       if (oldMarker && oldStructure) {
-        oldMarker.setIcon(createPinIcon(oldStructure.famille_principale, false))
+        oldMarker.setIcon(iconeDe(oldStructure))
       }
     }
     if (newId != null) {
       const newMarker = markers.get(newId)
       const newStructure = props.structures.find(s => s.id === newId)
       if (newMarker && newStructure) {
-        newMarker.setIcon(createPinIcon(newStructure.famille_principale, true))
+        newMarker.setIcon(iconeDe(newStructure))
         const latLng = newMarker.getLatLng()
         mapInstance.panTo(latLng, { animate: true })
       }
@@ -208,6 +223,27 @@ watch(
   }
 )
 
+// Survol depuis la liste : épingle cerclée de safran, sans recentrer la carte
+watch(
+  () => props.survolId,
+  (newId, oldId) => {
+    for (const id of [oldId, newId]) {
+      if (id == null) continue
+      const m = markers.get(id)
+      const s = props.structures.find(x => x.id === id)
+      if (m && s) m.setIcon(iconeDe(s))
+      allumerCluster(m, id === newId)
+    }
+  }
+)
+
+// Épingle regroupée dans un cluster : c'est le cluster visible qui s'allume
+function allumerCluster(m: Marker | undefined, on: boolean) {
+  const parent = m && clusterGroup?.getVisibleParent(m)
+  const el = parent && parent !== m ? (parent as any)._icon?.firstElementChild as HTMLElement | undefined : undefined
+  if (el) el.style.boxShadow = on ? '0 0 0 4px #f5b342' : ''
+}
+
 function updateTileTheme(dark: boolean) {
   if (!mapInstance || !tileLayerInstance) return
   const L = (window as any).L
@@ -232,9 +268,26 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener('nav-v2-select', onNavV2Select as EventListener)
   themeObserver?.disconnect()
+  resizeObserver?.disconnect()
   if (mapInstance) {
     mapInstance.remove()
     mapInstance = null
   }
 })
+
+// « Voir sur la carte » (B12) : la carte vient peut-être de s'afficher (Fiches → Mixte) ;
+// on attend sa taille réelle, puis on sort l'épingle de son cluster.
+watch(
+  () => props.centrage?.n,
+  () => {
+    const c = props.centrage
+    if (!c) return
+    setTimeout(() => {
+      if (!mapInstance || !clusterGroup) return
+      mapInstance.invalidateSize({ pan: false })
+      const m = markers.get(c.id)
+      if (m) clusterGroup.zoomToShowLayer(m, () => mapInstance?.panTo(m.getLatLng(), { animate: true }))
+    }, 260)
+  },
+)
 </script>

components/NavSidebar.vue

@@ -1,257 +0,0 @@
-<template>
-  <aside
-    class="flex flex-col h-full overflow-hidden"
-    style="background: var(--nav-surface); border-right: 1px solid var(--nav-bg-alt);"
-  >
-
-    <!-- ═══════════════════════════════════ BARRE DE RECHERCHE (tout en haut) -->
-    <div
-      class="shrink-0 px-4 pt-4 pb-3 border-b"
-      style="border-color: var(--nav-bg-alt);"
-    >
-      <label class="sidebar-search-label" aria-label="Rechercher une organisation">
-        <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
-          ref="searchInputEl"
-          :value="search"
-          type="search"
-          placeholder="Rechercher une organisation…"
-          class="sidebar-search-input"
-          autocomplete="off"
-          @input="emit('update:search', ($event.target as HTMLInputElement).value)"
-        />
-        <button
-          v-if="search"
-          type="button"
-          class="sidebar-search-clear"
-          aria-label="Effacer la recherche"
-          @click.stop="emit('update: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>
-
-    <!-- ═══════════════════════════════════ FILTRES (haut, compact) -->
-    <div
-      class="shrink-0 px-4 pt-3 pb-3 space-y-4 border-b"
-      style="border-color: var(--nav-bg-alt);"
-    >
-      <!-- Échelle (checkbox compactes) -->
-      <EchelleFilter
-        :modelValue="echelle"
-        :counts="echelleCount"
-        @update:modelValue="emit('update:echelle', $event)"
-      />
-
-      <!-- Fonctions (checkbox compactes) -->
-      <FonctionFilter
-        :modelValue="fonctions"
-        :counts="fonctionCount"
-        @update:modelValue="emit('update:fonctions', $event)"
-      />
-    </div>
-
-    <!-- ═══════════════════════════════════ LISTE FICHES (milieu, scrollable) -->
-    <div class="flex-1 flex flex-col min-h-0">
-      <!-- Header liste -->
-      <div
-        class="shrink-0 flex items-center justify-between px-4 py-2 border-b"
-        style="border-color: var(--nav-bg-alt);"
-      >
-        <span class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">
-          {{ resultCount }} résultat{{ resultCount > 1 ? 's' : '' }}
-        </span>
-        <button
-          v-if="hasActiveFilters"
-          @click="emit('reset-filters')"
-          class="text-xs underline hover:opacity-70"
-          style="color: var(--nav-text-muted);"
-        >
-          Effacer les filtres
-        </button>
-      </div>
-
-      <!-- Liste scrollable -->
-      <div class="flex-1 overflow-y-auto 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="orgs.length === 0" class="text-center py-8">
-          <p class="text-xs" style="color: var(--nav-text-muted);">Aucun résultat</p>
-        </div>
-
-        <!-- Card fiche compacte -->
-        <div
-          v-for="org in orgs"
-          :key="org.Id"
-          class="rounded-lg px-3 py-2 cursor-pointer transition-all"
-          :style="selectedId === org.Id
-            ? 'background: var(--nav-bg-alt); border-left: 3px solid var(--nav-accent); padding-left: 9px;'
-            : 'background: var(--nav-bg); border-left: 3px solid transparent; padding-left: 9px;'"
-          @click="emit('select-org', org.Id)"
-          @mouseenter="emit('hover-org', org.Id)"
-          @mouseleave="emit('hover-org', null)"
-        >
-          <div class="flex items-start justify-between gap-1.5">
-            <span
-              class="font-semibold text-sm leading-snug"
-              style="color: var(--nav-text);"
-            >{{ org.nom }}</span>
-            <span
-              v-if="org.echelle"
-              class="shrink-0 px-1.5 py-0.5 rounded-full text-xs"
-              style="background: var(--nav-bg-alt); color: var(--nav-text-muted); margin-top: 1px;"
-            >{{ org.echelle }}</span>
-          </div>
-          <div v-if="orgFonctions(org).length" class="mt-1 flex flex-wrap gap-1">
-            <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;"
-            >{{ fn }}</span>
-          </div>
-          <div v-if="org.localisation_ville" class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">
-            {{ org.localisation_ville }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-
-  </aside>
-</template>
-
-<script setup lang="ts">
-interface Org {
-  Id: number
-  nom: string
-  echelle?: string
-  tags_fonction?: string
-  territoire?: string
-  localisation_ville?: string
-  latitude?: number | null
-  longitude?: number | null
-  prioritaire?: boolean
-}
-
-const props = defineProps<{
-  search: string
-  modeValue: string          // 'metropole' | 'outremer'
-  echelle: string[]
-  fonctions: string[]
-  territoire: string | null
-  echelleCount: Record<string, number>
-  fonctionCount: Record<string, number>
-  territoireCount: Record<string, number>
-  resultCount: number
-  orgs: Org[]                // fiches filtrées à afficher dans la liste
-  selectedId: number | null
-  hasActiveFilters: boolean
-  pending?: boolean
-}>()
-
-const emit = defineEmits<{
-  'update:search': [value: string]
-  'update:mode': [value: string]
-  'update:echelle': [value: string[]]
-  'update:fonctions': [value: string[]]
-  'update:territoire': [value: string | null]
-  'select-org': [id: number]
-  'hover-org': [id: number | null]
-  'reset-filters': []
-}>()
-
-const searchInputEl = ref<HTMLInputElement | null>(null)
-
-function orgFonctions(org: Org): string[] {
-  return (org.tags_fonction ?? '').split(',').map(f => f.trim()).filter(Boolean).slice(0, 2)
-}
-</script>
-
-<style scoped>
-.sidebar-search-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border: 1.5px solid var(--nav-bg-alt);
-  border-radius: 10px;
-  background: var(--nav-bg);
-  padding: 7px 10px;
-  cursor: text;
-  width: 100%;
-  box-sizing: border-box;
-  transition: border-color 0.2s;
-}
-
-.sidebar-search-label:focus-within {
-  border-color: var(--nav-primary);
-  background: var(--nav-surface);
-}
-
-.sidebar-search-icon {
-  color: var(--nav-text-muted);
-  flex-shrink: 0;
-  transition: color 0.2s;
-}
-
-.sidebar-search-label:focus-within .sidebar-search-icon {
-  color: var(--nav-primary-solid);
-}
-
-.sidebar-search-input {
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--nav-text);
-  font-size: 13px;
-  width: 100%;
-  min-width: 0;
-  font-family: var(--nav-font);
-}
-
-.sidebar-search-input::placeholder {
-  color: var(--nav-text-muted);
-}
-
-.sidebar-search-input::-webkit-search-cancel-button {
-  display: none;
-}
-
-.sidebar-search-clear {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--nav-text-muted);
-  flex-shrink: 0;
-  padding: 2px;
-  border-radius: 50%;
-  transition: color 0.15s, background 0.15s;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-}
-
-.sidebar-search-clear:hover {
-  color: var(--nav-text);
-  background: var(--nav-bg-alt);
-}
-</style>

components/NavTiroir.vue

@@ -0,0 +1,313 @@
+<!--
+  NavTiroir — B10-M3
+  Menu < 1280 px : tiroir pleine hauteur à droite, voile, Échap, focus piégé,
+  focus rendu à l'élément qui l'a ouvert. Les trois échelles dans l'ordre de la
+  barre (utils/echelles.ts), puis Manifeste, À propos, Signaler, et Soutenir.
+  Se ferme seul au changement de route et si la fenêtre passe à ≥ 1280 px.
+-->
+<template>
+  <Teleport to="body">
+    <Transition name="nav-tiroir">
+      <div v-if="open" class="nav-tiroir" @keydown="onKeydown">
+        <div class="nav-tiroir__voile" aria-hidden="true" @click="fermer" />
+        <div
+          ref="panneau"
+          class="nav-tiroir__panneau"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="nav-tiroir-titre"
+        >
+          <div class="nav-tiroir__tete">
+            <h2 id="nav-tiroir-titre" class="nav-tiroir__titre">Menu</h2>
+            <button type="button" class="nav-tiroir__fermer" aria-label="Fermer le menu" @click="fermer">
+              <svg width="18" height="18" 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>
+
+          <nav class="nav-tiroir__corps" aria-label="Échelles et pages">
+            <p class="nav-tiroir__cadre">{{ ECHELLES_CADRE_COURT }}</p>
+
+            <div v-for="id in ORDRE_ECHELLES" :key="id" class="nav-tiroir__grp">
+              <span :id="`nav-tiroir-echelle-${id}`" class="nav-tiroir__kick">
+                <span class="nav-tiroir__pastille">{{ id }}</span>{{ ECHELLES[id].titre }}
+              </span>
+              <ul class="nav-tiroir__liste" :aria-labelledby="`nav-tiroir-echelle-${id}`">
+                <li v-for="o in ECHELLES[id].onglets" :key="o.to">
+                  <NuxtLink
+                    :to="o.to"
+                    class="nav-tiroir__lien"
+                    :class="{ 'nav-tiroir__lien--actif': o.actif(route) }"
+                    :aria-current="o.actif(route) ? 'page' : undefined"
+                    @click="fermer"
+                  >{{ o.libelle }}</NuxtLink>
+                </li>
+              </ul>
+            </div>
+
+            <hr class="nav-tiroir__sep" />
+
+            <ul class="nav-tiroir__liste">
+              <li v-for="p in PAGES" :key="p.to">
+                <NuxtLink
+                  :to="p.to"
+                  class="nav-tiroir__second"
+                  :aria-current="route.path === p.to ? 'page' : undefined"
+                  @click="fermer"
+                >{{ p.libelle }}</NuxtLink>
+              </li>
+            </ul>
+
+            <a :href="SOUTENIR_URL" target="_blank" rel="noopener noreferrer" class="nav-tiroir__soutenir">Soutenir</a>
+          </nav>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ECHELLES, ECHELLES_CADRE_COURT, ORDRE_ECHELLES } from '~/utils/echelles'
+import { SOUTENIR_URL } from '~/utils/liens'
+
+const props = defineProps<{ open: boolean }>()
+const emit = defineEmits<{ close: [] }>()
+
+const PAGES = [
+  { libelle: 'Manifeste', to: '/manifeste' },
+  { libelle: 'À propos', to: '/a-propos' },
+  { libelle: 'Signaler', to: '/signaler' },
+]
+
+const route = useRoute()
+const panneau = ref<HTMLElement | null>(null)
+let retourFocus: HTMLElement | null = null
+
+function fermer() {
+  emit('close')
+}
+
+function focusables(): HTMLElement[] {
+  if (!panneau.value) return []
+  return [...panneau.value.querySelectorAll<HTMLElement>('a[href], button:not([disabled])')]
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    fermer()
+    return
+  }
+  if (e.key !== 'Tab') return
+  const els = focusables()
+  if (!els.length) return
+  const premier = els[0]
+  const dernier = els[els.length - 1]
+  if (e.shiftKey && document.activeElement === premier) {
+    e.preventDefault()
+    dernier.focus()
+  } else if (!e.shiftKey && document.activeElement === dernier) {
+    e.preventDefault()
+    premier.focus()
+  }
+}
+
+watch(() => props.open, async (ouvert) => {
+  if (ouvert) {
+    retourFocus = document.activeElement as HTMLElement | null
+    await nextTick()
+    focusables()[0]?.focus()
+  } else if (retourFocus) {
+    // Le bouton d'ouverture peut ne plus être visible (fenêtre élargie) : focus() est alors sans effet.
+    retourFocus.focus()
+    retourFocus = null
+  }
+})
+
+watch(() => route.fullPath, () => { if (props.open) fermer() })
+
+let mq: MediaQueryList | null = null
+function onLarge(e: MediaQueryListEvent) { if (e.matches && props.open) fermer() }
+onMounted(() => {
+  mq = window.matchMedia('(min-width: 1280px)')
+  mq.addEventListener('change', onLarge)
+})
+onBeforeUnmount(() => mq?.removeEventListener('change', onLarge))
+</script>
+
+<style scoped>
+.nav-tiroir {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+}
+
+.nav-tiroir__voile {
+  position: absolute;
+  inset: 0;
+  background: rgba(var(--nav-primary-raw), 0.35);
+}
+
+.nav-tiroir__panneau {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(320px, 88vw);
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  color: var(--text);
+  box-shadow: var(--shadow-lg);
+}
+
+.nav-tiroir__tete {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--border);
+}
+
+.nav-tiroir__titre {
+  margin: 0;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+}
+
+.nav-tiroir__fermer {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.nav-tiroir__corps {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--space-sm) var(--space-md) var(--space-lg);
+}
+
+.nav-tiroir__cadre {
+  margin: 0 0 var(--space-xs);
+  font-size: var(--fs-xs);
+  line-height: var(--lh-base);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+}
+
+.nav-tiroir__grp {
+  margin-top: var(--space-sm);
+}
+
+.nav-tiroir__kick {
+  display: block;
+  margin-bottom: var(--space-2xs);
+  font-size: 0.72rem;
+  font-weight: var(--fw-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+}
+
+.nav-tiroir__pastille {
+  display: inline-block;
+  margin-right: 6px;
+  padding: 0 5px;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--on-accent);
+}
+
+.nav-tiroir__liste {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.nav-tiroir__lien,
+.nav-tiroir__second {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 var(--space-xs);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+}
+
+.nav-tiroir__lien {
+  font-size: var(--fs-base);
+  color: var(--text);
+}
+
+.nav-tiroir__lien--actif {
+  background: var(--bg-alt);
+  font-weight: var(--fw-semibold);
+}
+
+.nav-tiroir__second {
+  font-size: var(--fs-sm);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+}
+
+.nav-tiroir__lien:focus-visible,
+.nav-tiroir__second:focus-visible,
+.nav-tiroir__soutenir:focus-visible,
+.nav-tiroir__fermer:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.nav-tiroir__sep {
+  margin: var(--space-sm) 0;
+  border: 0;
+  border-top: 1px solid var(--border);
+}
+
+.nav-tiroir__soutenir {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  margin-top: var(--space-sm);
+  border-radius: var(--radius-md);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+  text-decoration: none;
+}
+
+.nav-tiroir-enter-active,
+.nav-tiroir-leave-active {
+  transition: opacity var(--dur-base) var(--ease-out);
+}
+.nav-tiroir-enter-active .nav-tiroir__panneau,
+.nav-tiroir-leave-active .nav-tiroir__panneau {
+  transition: transform var(--dur-base) var(--ease-out);
+}
+.nav-tiroir-enter-from,
+.nav-tiroir-leave-to {
+  opacity: 0;
+}
+.nav-tiroir-enter-from .nav-tiroir__panneau,
+.nav-tiroir-leave-to .nav-tiroir__panneau {
+  transform: translateX(100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nav-tiroir-enter-active,
+  .nav-tiroir-leave-active,
+  .nav-tiroir-enter-active .nav-tiroir__panneau,
+  .nav-tiroir-leave-active .nav-tiroir__panneau {
+    transition: none;
+  }
+}
+</style>

components/OutilsPartirDeSoi.vue

@@ -0,0 +1,225 @@
+<!--
+  OutilsPartirDeSoi — B6-M2. Le sous-onglet « Partir de soi » de /outils : les
+  sept mots de la slide 17 de la conférence, un mot = une fiche, rendus par
+  la vue fiches partagée (état Mixte : liste des mots | graphe | fiche ouverte).
+  Troisième page branchée sur VueFiches (DESIGN-SYSTEM §Brancher une troisième
+  page). Les données viennent de `partir_de_soi` dans public/data/outils.json.
+
+  Monté seulement quand `?tab=partir-de-soi` : l'état de la vue (q, filtres,
+  fiche…) vit dans l'URL et disparaît avec l'onglet. `tab=` est recopié par la
+  vue à chacune de ses écritures (paramètre qu'elle ne gère pas).
+-->
+<template>
+  <div class="ops">
+    <VueFiches
+      :vf="vf"
+      intention="Sept mots de la conférence, et pour chacun des ressources libres qui m'ont aidé ou qu'on m'a confiées. Ouvre un mot."
+      libelle-recherche="Rechercher une ressource…"
+      :libelles-vue="{ carte: 'Graphe' }"
+      :lien-page="() => null"
+    >
+      <template #carte>
+        <GrapheMots :vf="vf" :mots="motsGraphe" />
+      </template>
+
+      <template #detail="{ fiche, filtrer }">
+        <article v-if="parId.get(String(fiche.id))" class="mot">
+          <h2 class="mot__titre">{{ parId.get(String(fiche.id))!.mot }}</h2>
+          <p class="mot__resume">{{ parId.get(String(fiche.id))!.resume }}</p>
+
+          <template v-if="parId.get(String(fiche.id))!.vide">
+            <p class="mot__vide">{{ parId.get(String(fiche.id))!.vide }}</p>
+            <NuxtLink to="/proposer?categorie=outils" class="mot__proposer">Proposer une ressource</NuxtLink>
+          </template>
+
+          <ul v-else class="ress" :aria-label="`Ressources pour ${parId.get(String(fiche.id))!.mot}`">
+            <li v-for="r in ressourcesDe(String(fiche.id))" :key="r.id" class="ress__carte">
+              <p class="ress__titre">
+                <a v-if="r.url" :href="r.url" target="_blank" rel="noopener noreferrer">{{ r.titre }}<span class="ress__ext" aria-hidden="true"> ↗</span><span class="vf-sr-mot"> (nouvel onglet)</span></a>
+                <template v-else>{{ r.titre }}</template>
+              </p>
+
+              <ChipGroup :aria-label="`Format et accès de ${r.titre}`" class="ress__chips">
+                <Chip
+                  :label="r.format"
+                  variant="fonction"
+                  :active="(vf.etat.filtres.format ?? []).includes(slugEtiquette(r.format))"
+                  :aria-label="`Filtrer par format : ${r.format}`"
+                  @toggle="filtrer('format', slugEtiquette(r.format))"
+                />
+                <Chip
+                  :label="r.acces"
+                  variant="echelle"
+                  :active="(vf.etat.filtres.acces ?? []).includes(slugEtiquette(r.acces))"
+                  :aria-label="`Filtrer par accès : ${r.acces}`"
+                  @toggle="filtrer('acces', slugEtiquette(r.acces))"
+                />
+              </ChipGroup>
+
+              <p v-if="r.pourquoi" class="ress__pourquoi">{{ r.pourquoi }}</p>
+              <p v-if="r.urls?.length" class="ress__liens">
+                <template v-for="(u, i) in r.urls" :key="u">
+                  <span v-if="i > 0" aria-hidden="true"> · </span>
+                  <a :href="u" target="_blank" rel="noopener noreferrer">{{ u.replace(/^https:\/\//, '') }}<span class="vf-sr-mot"> (nouvel onglet)</span></a>
+                </template>
+              </p>
+              <p v-if="r.note" class="ress__note">{{ r.note }}</p>
+
+              <ul v-if="r.episodes?.length" class="eps" :aria-label="`Épisodes de ${r.titre}`">
+                <li v-for="ep in r.episodes" :key="ep.ep" class="eps__item" :class="{ 'eps__item--muet': !ep.url }">
+                  <span class="eps__ep">EP/{{ ep.ep }}</span>
+                  <span class="eps__corps">
+                    <a v-if="ep.url" :href="ep.url" target="_blank" rel="noopener noreferrer" class="eps__titre">{{ ep.titre }}<span class="vf-sr-mot"> (nouvel onglet)</span></a>
+                    <span v-else class="eps__titre">{{ ep.titre }}</span>
+                    <span class="eps__personnes"> — {{ ep.personnes }}</span>
+                    <span v-if="ep.note" class="eps__note"> ({{ ep.note }})</span>
+                  </span>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </article>
+      </template>
+    </VueFiches>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ConfigVueFiches } from '~/utils/vueFiches'
+import { toMiniMot, valeursRessources, slugEtiquette, type FicheMot, type RessourceMot } from '~/composables/useFicheAdapter'
+
+interface RessourceComplete extends RessourceMot {
+  url?: string | null
+  urls?: string[]
+  note?: string
+  episodes?: { ep: string; titre: string; personnes: string; url?: string | null; note?: string }[]
+}
+interface DonneesPartirDeSoi {
+  fiches: (FicheMot & { vide?: string | null })[]
+  ressources: RessourceComplete[]
+}
+
+const props = defineProps<{ data: DonneesPartirDeSoi }>()
+
+const ressourcesDe = (motId: string) => props.data.ressources.filter((r) => r.fiches.includes(motId))
+const parId = computed(() => new Map(props.data.fiches.map((f) => [f.id, f])))
+
+// Étape 1 : adaptateur (un mot → une MiniFiche). L'ordre du tableau est celui de la slide.
+const fichesMini = computed(() => props.data.fiches.map((f) => toMiniMot(f, ressourcesDe(f.id))))
+
+// Étape 2 : configuration. Sept fiches, pas de groupe ; tri « ordre de la slide » par défaut.
+const config = computed<ConfigVueFiches>(() => ({
+  dimensions: [
+    { cle: 'format', libelle: 'Format', variante: 'fonction', valeurs: valeursRessources(props.data.ressources, 'format') },
+    { cle: 'acces', libelle: 'Accès', variante: 'echelle', valeurs: valeursRessources(props.data.ressources, 'acces') },
+  ],
+  tris: ['ordre', 'pertinence', 'nom'],
+  triDefaut: 'ordre',
+  libellesTri: { ordre: 'Ordre de la slide' },
+  groupes: [],
+  etats: ['carte', 'mixte', 'fiches'],
+}))
+
+const vf = useVueFiches(fichesMini, config)
+
+// Étape 3 : le graphe (slot #carte) lit les mêmes données et l'état de la vue.
+const motsGraphe = computed(() =>
+  props.data.fiches.map((f) => ({
+    id: f.id,
+    mot: f.mot,
+    vide: !!f.vide,
+    ressources: ressourcesDe(f.id).map((r) => ({ id: r.id, titre: r.titre })),
+  })),
+)
+
+// Une fiche ouverte donne son nom à l'onglet du navigateur.
+useSeoMeta({
+  title: () => (vf.ficheOuverte ? `${vf.ficheOuverte.nom} — Partir de soi — AEP` : 'Outils — AEP — Partir de soi'),
+})
+</script>
+
+<style scoped>
+.ops { height: 100%; min-height: 0; min-width: 0; }
+
+/* Lecteurs d'écran seulement */
+.vf-sr-mot {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+/* Fiche d'un mot */
+.mot__titre { margin: 0 0 var(--space-xs); font-size: 1.25rem; font-weight: var(--fw-bold); line-height: 1.25; }
+.mot__resume {
+  margin: 0 0 var(--space-md);
+  font-size: var(--fs-sm);
+  line-height: 1.55;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+}
+.mot__vide {
+  margin: 0 0 var(--space-sm);
+  padding: var(--space-sm);
+  border: 1.5px dashed var(--border-strong);
+  border-radius: var(--radius-md);
+  font-size: var(--fs-sm);
+  line-height: 1.55;
+}
+.mot__proposer {
+  display: inline-flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 var(--space-md);
+  border-radius: var(--radius-md);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+  text-decoration: none;
+}
+.mot__proposer:hover { opacity: 0.9; }
+.mot__proposer:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
+
+/* Ressources */
+.ress { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
+.ress__carte {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  min-width: 0;
+  padding: var(--space-sm);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--bg);
+}
+.ress__carte p { margin: 0; overflow-wrap: anywhere; }
+.ress__titre { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.35; }
+.ress__titre a,
+.ress__liens a { color: var(--nav-primary-solid); text-underline-offset: 2px; }
+.ress__titre a:focus-visible,
+.ress__liens a:focus-visible,
+.eps__titre:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
+.ress__pourquoi { font-size: var(--fs-sm); line-height: 1.5; }
+.ress__liens { font-size: var(--fs-xs, 0.75rem); }
+.ress__note { font-size: var(--fs-xs, 0.75rem); font-style: italic; color: color-mix(in srgb, var(--text) 78%, transparent); }
+
+/* Épisodes OFQA */
+.eps { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
+.eps__item { display: flex; gap: var(--space-xs); align-items: baseline; font-size: var(--fs-sm); line-height: 1.4; }
+.eps__ep {
+  flex: 0 0 3.6rem;
+  font-family: var(--font-mono, 'JetBrains Mono', 'Courier New', monospace);
+  font-size: var(--fs-xs, 0.75rem);
+  font-weight: var(--fw-semibold);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+}
+.eps__corps { min-width: 0; overflow-wrap: anywhere; }
+.eps__titre { font-weight: var(--fw-medium); color: var(--text); }
+a.eps__titre { color: var(--nav-primary-solid); }
+.eps__personnes,
+.eps__note { color: color-mix(in srgb, var(--text) 78%, transparent); font-size: var(--fs-xs, 0.75rem); }
+.eps__note { font-style: italic; }
+.eps__item--muet .eps__titre { color: color-mix(in srgb, var(--text) 78%, transparent); }
+</style>

components/SimulateurFeature.vue

@@ -14,6 +14,7 @@
             <span v-if="tag" :class="['simu-feature__badge', `simu-feature__badge--${tag}`]">{{ tagLabel }}</span>
           </div>
           <p class="simu-feature__desc">{{ description }}</p>
+          <p v-if="mention" class="simu-feature__mention">{{ mention }}</p>
         </div>
       </div>
       <span v-if="cta && url" class="simu-feature__cta">{{ cta }}</span>
@@ -29,6 +30,8 @@ const props = defineProps<{
   description?: string
   cta?: string
   tag?: string
+  /** Ligne de réserve datée sous la description (ex. « Ordre de grandeur — version du … »). */
+  mention?: string | null
 }>()
 
 const tagLabels: Record<string, string> = {
@@ -127,6 +130,13 @@ const tagLabel = computed(() => props.tag ? (tagLabels[props.tag] ?? props.tag)
   line-height: 1.55;
 }
 
+.simu-feature__mention {
+  font-size: 0.78rem;
+  font-style: italic;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+  margin: 0.4rem 0 0;
+}
+
 .simu-feature__cta {
   display: inline-flex;
   align-items: center;
@@ -145,6 +155,12 @@ const tagLabel = computed(() => props.tag ? (tagLabels[props.tag] ?? props.tag)
   opacity: 0.88;
 }
 
+@media (max-width: 640px) {
+  .simu-feature { padding: 1.1rem 1rem; }
+  .simu-feature__inner { flex-direction: column; align-items: stretch; gap: 1rem; }
+  .simu-feature__cta { justify-content: center; }
+}
+
 :global(.dark) .simu-feature__badge {
   background: #064e3b;
   color: #a7f3d0;

components/VueFichesFiltres.vue

@@ -0,0 +1,118 @@
+<!--
+  VueFichesFiltres — B11-M4. Les chips de filtre d'une vue fiches, par
+  dimension (Chip.vue, variante de la dimension). Monté à UN seul endroit selon
+  l'état (SPEC §3) : panneau de gauche en Mixte, tête de grille en Fiches,
+  feuille du bas sur téléphone. Compteur dans le résultat courant ; chip à 0
+  grisée et inactive ; au-delà de 14 valeurs, repli « + N » (actives toujours
+  visibles) ; « Tout effacer » dès qu'un filtre est actif.
+-->
+<template>
+  <div class="vff">
+    <ChipGroup v-if="vf.etat.sansAdresse" aria-label="Filtre de localisation">
+      <Chip as="span" removable active variant="echelle" label="Sans adresse" @remove="vf.setSansAdresse(false)" />
+    </ChipGroup>
+    <div v-for="d in vf.cfg.dimensions" :key="d.cle" class="vff__dim">
+      <p :id="`${idBase}-${d.cle}`" class="vff__titre">{{ d.libelle }}</p>
+      <ChipGroup :aria-label="`Filtrer par ${d.libelle.toLowerCase()}`" :aria-describedby="`${idBase}-${d.cle}`">
+        <Chip
+          v-for="v in visibles(d)"
+          :key="v.valeur"
+          :label="v.libelle"
+          :variant="d.variante"
+          :active="actif(d.cle, v.valeur)"
+          :count="vf.compteurs[d.cle]?.[v.valeur] ?? 0"
+          :disabled="!actif(d.cle, v.valeur) && !(vf.compteurs[d.cle]?.[v.valeur])"
+          class="vff__chip"
+          @toggle="vf.toggle(d.cle, v.valeur)"
+        />
+        <button
+          v-if="d.valeurs.length > SEUIL"
+          type="button"
+          class="vff__plus"
+          :aria-expanded="!!deplies[d.cle]"
+          @click="deplies[d.cle] = !deplies[d.cle]"
+        >{{ deplies[d.cle] ? 'Réduire' : `+ ${d.valeurs.length - visibles(d).length}` }}</button>
+      </ChipGroup>
+    </div>
+
+    <button
+      v-if="vf.nbActifs || vf.q"
+      type="button"
+      class="vff__effacer"
+      @click="vf.effacerTout()"
+    >Tout effacer</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { VueFichesEtat } from '~/composables/useVueFiches'
+import type { DimensionFiltre } from '~/utils/vueFiches'
+
+const props = defineProps<{ vf: VueFichesEtat; idBase: string }>()
+
+const SEUIL = 14
+const deplies = reactive<Record<string, boolean>>({})
+
+function actif(dim: string, valeur: string) {
+  return (props.vf.etat.filtres[dim] ?? []).includes(valeur)
+}
+
+/** Les 14 premières dans l'ordre de la dimension (stable : les chips ne bougent pas au clic) + les actives hors de ce lot. */
+function visibles(d: DimensionFiltre) {
+  if (d.valeurs.length <= SEUIL || deplies[d.cle]) return d.valeurs
+  return d.valeurs.filter((v, i) => i < SEUIL || actif(d.cle, v.valeur))
+}
+</script>
+
+<style scoped>
+.vff {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.vff__titre {
+  margin: 0 0 var(--space-2xs);
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+}
+
+.vff__chip:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.vff__plus {
+  min-height: 32px;
+  padding: var(--space-2xs) var(--space-sm);
+  border: 1.5px dashed color-mix(in srgb, var(--text) 40%, transparent);
+  border-radius: var(--radius-full);
+  background: none;
+  color: var(--text);
+  font: inherit;
+  font-size: var(--fs-xs);
+  cursor: pointer;
+}
+
+.vff__effacer {
+  align-self: flex-start;
+  padding: var(--space-2xs) 0;
+  border: none;
+  background: none;
+  color: var(--text);
+  font: inherit;
+  font-size: var(--fs-xs);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.vff__plus:focus-visible,
+.vff__effacer:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+</style>

composables/useFicheAdapter.ts

@@ -1,12 +1,18 @@
 /**
- * useFicheAdapter — B3-M2
+ * useFicheAdapter — B3-M2, étendu en B11-M2
  * Adaptateur léger Org | StructureV2 → MiniFiche, format commun consommé par
- * FicheMiniCard / FichesPanel. Aucune mutation des types sources.
+ * FicheMiniCard / VueFiches. Aucune mutation des types sources.
  *
  * Repli résumé (brief B3, le champ `resume_court` du batch B2b n'existe pas
  * encore) : première phrase du premier champ non vide parmi une liste de
  * candidats ordonnée par type, tronquée proprement à ~110 caractères sur un
  * mot (jamais au milieu).
+ *
+ * B11 : chaque fiche porte ses `etiquettes` par dimension (clé = paramètre
+ * d'URL de la dimension : `fonctions`, `echelle`, `territoire` pour l'Entraide ;
+ * `tags`, `famille`, `pays` pour Réseaux AEP). C'est ce que filtre, trie et
+ * regroupe `utils/vueFiches.ts` ; `chips` et `echelle` restent l'affichage
+ * de la carte-fiche, inchangé.
  */
 import type { Org } from '~/types/org'
 import type { StructureV2 } from '~/types/structure-v2'
@@ -15,12 +21,25 @@ export interface MiniFiche {
   id: string | number
   nom: string
   resume: string
+  /** Étiquettes affichées sur la carte-fiche (3 au plus). */
   chips: string[]
+  /** Dimension d'où viennent `chips` : les rend cliquables dans la vue fiches. */
+  chipsDimension?: string
   echelle?: string
   geoloc: boolean
-  kind: 'org' | 'structure'
+  kind: 'org' | 'structure' | 'mot'
+  /** Étiquettes complètes par dimension (valeurs telles qu'écrites dans l'URL). */
+  etiquettes?: Record<string, string[]>
+  coords?: [number, number]
+  /** Date ISO si la source en a une (tri « récent »). */
+  date?: string
+  ville?: string
+  /** Texte cherchable en plus du nom, de la ville et du résumé. */
+  texte?: string
 }
 
+export const DOM_TOM = ['Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte']
+
 const RESUME_MAX = 110
 
 /** Première phrase d'un texte (coupe sur ". "/"! "/"? " ou fin de chaîne). */
@@ -53,32 +72,127 @@ function orgFonctions(org: Org): string[] {
     .split(',')
     .map((f) => f.trim())
     .filter(Boolean)
-    .slice(0, 3)
 }
 
-export function useFicheAdapter() {
+function coordsDe(lat?: number | null, lon?: number | null): [number, number] | undefined {
-  function toMini(source: Org | StructureV2): MiniFiche {
+  return lat != null && lon != null ? [lat, lon] : undefined
+}
+
+/** Hashtag sans son « # » : c'est la forme de l'URL (`tags=reemploi-structurel`). */
+export function sansDiese(tag: string): string {
+  return tag.replace(/^#/, '')
+}
+
+/** Familles d'une structure : principale, secondaires, et 6 pour le badge recherche politique. */
+function famillesDe(s: StructureV2): string[] {
+  const ids = [s.famille_principale, ...(s.familles_secondaires ?? [])]
+  if (s.badges?.f6_recherche_politique) ids.push(6 as any)
+  return [...new Set(ids.map(String))]
+}
+
+export function toMini(source: Org | StructureV2): MiniFiche {
   if (isStructure(source)) {
+    const hashtags = source.hashtags ?? []
     return {
       id: source.id,
       nom: source.nom,
       resume: buildResume([source.description_courte, source.description_longue]),
-        chips: (source.hashtags ?? []).slice(0, 3),
+      chips: hashtags.slice(0, 3),
+      chipsDimension: 'tags',
       geoloc: source.latitude != null && source.longitude != null,
       kind: 'structure',
+      etiquettes: {
+        tags: hashtags.map(sansDiese),
+        famille: famillesDe(source),
+        pays: source.pays ? [source.pays] : [],
+      },
+      coords: coordsDe(source.latitude, source.longitude),
+      ville: source.ville,
+      // Portée de la recherche d'avant B11 sur /agences : description courte et hashtags.
+      texte: [source.description_courte, ...hashtags].filter(Boolean).join(' '),
     }
   }
 
+  const fonctions = orgFonctions(source)
   return {
     id: source.Id,
     nom: source.nom,
     resume: buildResume([source.description_enrichie, source.description]),
-      chips: orgFonctions(source),
+    chips: fonctions.slice(0, 3),
+    chipsDimension: 'fonctions',
     echelle: source.echelle,
     geoloc: source.latitude != null && source.longitude != null,
     kind: 'org',
+    etiquettes: {
+      fonctions,
+      echelle: source.echelle ? [source.echelle] : [],
+      territoire: [source.territoire && DOM_TOM.includes(source.territoire) ? source.territoire : 'Métropole'],
+    },
+    coords: coordsDe(source.latitude, source.longitude),
+    date: source.submitted_at,
+    ville: source.localisation_ville,
   }
+}
+
+// ── Partir de soi (B6-M2) : un mot de la slide 17 = une fiche ─────────────
+
+/** Une fiche de `public/data/outils.json` → `partir_de_soi.fiches[]`. */
+export interface FicheMot {
+  id: string
+  mot: string
+  resume: string
+  vide?: string | null
+}
+
+/** Une ressource de `partir_de_soi.ressources[]`, reliée à ses mots par `fiches`. */
+export interface RessourceMot {
+  id: string
+  titre: string
+  format: string
+  acces: string
+  pourquoi?: string
+  fiches: string[]
+}
+
+/** « don libre » → `don-libre` : la forme d'une valeur de filtre dans l'URL (`acces=don-libre`). */
+export function slugEtiquette(s: string): string {
+  return s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
+}
+
+/** Valeurs distinctes d'un champ des ressources, dans l'ordre de première apparition (ordre stable des chips). */
+export function valeursRessources(ressources: RessourceMot[], champ: 'format' | 'acces'): { valeur: string; libelle: string }[] {
+  const vus = new Map<string, string>()
+  for (const r of ressources) {
+    const l = r[champ]
+    if (l && !vus.has(slugEtiquette(l))) vus.set(slugEtiquette(l), l)
+  }
+  return [...vus].map(([valeur, libelle]) => ({ valeur, libelle }))
+}
+
+/**
+ * Un mot de la conférence → `MiniFiche`. `ressources` = celles qui portent ce mot.
+ * Pas de carte géographique : `geoloc: true` (aucune fiche « sans adresse »).
+ * La recherche couvre aussi les titres et les « pourquoi » des ressources.
+ */
+export function toMiniMot(fiche: FicheMot, ressources: RessourceMot[]): MiniFiche {
+  const formats = [...new Set(ressources.map((r) => r.format).filter(Boolean))]
+  const acces = [...new Set(ressources.map((r) => r.acces).filter(Boolean))]
+  return {
+    id: fiche.id,
+    nom: fiche.mot,
+    resume: buildResume([fiche.resume, fiche.vide]),
+    chips: formats.slice(0, 3),
+    chipsDimension: 'format',
+    geoloc: true,
+    kind: 'mot',
+    etiquettes: {
+      format: formats.map(slugEtiquette),
+      acces: acces.map(slugEtiquette),
+    },
+    texte: [fiche.resume, ...ressources.flatMap((r) => [r.titre, r.pourquoi])].filter(Boolean).join(' '),
   }
+}
 
-  return { toMini }
+export function useFicheAdapter() {
+  return { toMini, toMiniMot }
 }

composables/useVueFiches.ts

@@ -0,0 +1,252 @@
+/**
+ * useVueFiches — B11-M1. L'état de la vue fiches, branché sur l'URL.
+ *
+ * L'URL est la source de vérité (SPEC-vue-fiches §5) : l'état se LIT dans
+ * `route.query` (surveillée : un lien interne vers `?vue=fiches` depuis la même
+ * page change l'écran) et s'ÉCRIT par `router.replace` (pas d'entrée
+ * d'historique par clic de filtre). Seule la recherche a un tampon local, pour
+ * ne pas perdre de lettres pendant la frappe : elle part dans l'URL 250 ms
+ * après la dernière touche.
+ *
+ * La page crée l'état (elle en a besoin pour sa carte) et le passe tel quel à
+ * `<VueFiches :vf="vf">`. Logique pure et tests : `utils/vueFiches.ts`,
+ * `scripts/test-vue-fiches.mjs`.
+ */
+import type { MaybeRefOrGetter } from 'vue'
+import type { MiniFiche } from '~/composables/useFicheAdapter'
+import {
+  lireQuery, ecrireQuery, filtresValides, filtrerFiches, compterEtiquettes,
+  triEffectif, trierFiches, regrouper, ordreFiches, nbFiltresActifs,
+  lireFiche, queryAvecFiche, positionFiche, modeOuverture, modeFermeture, empreinteListe,
+  type ConfigVueFiches, type EtatFiches, type EtatVue, type TriFiches,
+} from '~/utils/vueFiches'
+
+/** Largeur d'écran ; null avant le montage (SSR) : la CSS tranche alors seule. */
+export type Largeur = 'telephone' | 'tablette' | 'ordinateur' | null
+
+const CLE_REPLI = 'aep_vue_fiches_liste_repliee'
+
+export function useVueFiches(
+  fiches: MaybeRefOrGetter<MiniFiche[]>,
+  config: MaybeRefOrGetter<ConfigVueFiches>,
+) {
+  const route = useRoute()
+  const router = useRouter()
+  const cfg = computed(() => toValue(config))
+
+  // ── Lecture ──
+  const brut = computed(() => lireQuery(route.query, cfg.value))
+
+  const q = ref(brut.value.q)
+  let qEcrit = q.value
+  let minuteurQ: ReturnType<typeof setTimeout> | null = null
+  watch(() => brut.value.q, (v) => {
+    if (v !== qEcrit) { q.value = v; qEcrit = v }
+  })
+
+  const etat = computed<EtatFiches>(() => ({
+    ...brut.value,
+    q: q.value,
+    filtres: filtresValides(brut.value.filtres, cfg.value),
+  }))
+
+  // ── Écriture ──
+  // La navigation est asynchrone : une query écrite n'est dans `route.query`
+  // qu'au tick suivant. Deux écritures du même tick (« Voir sur la carte » :
+  // Mixte, puis la sous-vue de la page) partent donc de la dernière query
+  // écrite, sinon la seconde efface la première.
+  let enAttente: Record<string, string> | null = null
+  watch(() => route.query, () => { enAttente = null })
+  const queryBase = () => enAttente ?? route.query
+  function naviguer(query: Record<string, string>, mode: 'push' | 'replace' = 'replace') {
+    enAttente = query
+    if (mode === 'push') router.push({ query })
+    else router.replace({ query })
+  }
+  function etatDepuis(base: Record<string, unknown>): EtatFiches {
+    const b = lireQuery(base, cfg.value)
+    return { ...b, q: q.value, filtres: filtresValides(b.filtres, cfg.value) }
+  }
+
+  function ecrire(partiel: Partial<EtatFiches>) {
+    const base = queryBase()
+    const nouvel = { ...etatDepuis(base), ...partiel }
+    qEcrit = nouvel.q
+    if (minuteurQ && partiel.q === undefined) { clearTimeout(minuteurQ); minuteurQ = null }
+    naviguer(ecrireQuery(nouvel, cfg.value, base))
+  }
+
+  function setQ(v: string) {
+    q.value = v
+    if (minuteurQ) clearTimeout(minuteurQ)
+    minuteurQ = setTimeout(() => { minuteurQ = null; ecrire({ q: v }) }, 250)
+  }
+
+  function avecFiltre(dim: string, valeurs: string[]) {
+    return { ...etat.value.filtres, [dim]: valeurs }
+  }
+  function toggle(dim: string, valeur: string) {
+    const vals = etat.value.filtres[dim] ?? []
+    ecrire({ filtres: avecFiltre(dim, vals.includes(valeur) ? vals.filter((v) => v !== valeur) : [...vals, valeur]) })
+  }
+  function ajouterFiltre(dim: string, valeur: string) {
+    const vals = etat.value.filtres[dim] ?? []
+    if (!vals.includes(valeur)) ecrire({ filtres: avecFiltre(dim, [...vals, valeur]) })
+  }
+  function effacerTout() {
+    q.value = ''
+    const vides: Record<string, string[]> = {}
+    for (const d of cfg.value.dimensions) vides[d.cle] = []
+    ecrire({ q: '', filtres: vides, sansAdresse: false })
+  }
+  const setTri = (tri: TriFiches) => ecrire({ tri })
+  const setGroupe = (groupe: string | null) => ecrire({ groupe })
+  const setSousVue = (sousVue: string) => ecrire({ sousVue })
+  const setSansAdresse = (sansAdresse: boolean) => ecrire({ sansAdresse })
+
+  // ── Largeur et état affiché ──
+  const largeur = ref<Largeur>(null)
+  const listeRepliee = ref(false)
+
+  onMounted(() => {
+    const mq768 = window.matchMedia('(min-width: 768px)')
+    const mq1024 = window.matchMedia('(min-width: 1024px)')
+    const maj = () => {
+      largeur.value = mq1024.matches ? 'ordinateur' : mq768.matches ? 'tablette' : 'telephone'
+    }
+    maj()
+    mq768.addEventListener('change', maj)
+    mq1024.addEventListener('change', maj)
+    onBeforeUnmount(() => {
+      mq768.removeEventListener('change', maj)
+      mq1024.removeEventListener('change', maj)
+    })
+    try { listeRepliee.value = sessionStorage.getItem(CLE_REPLI) === '1' } catch {}
+  })
+
+  /**
+   * État rendu. `auto` avant le montage quand l'URL ne tranche pas (ou dit
+   * `mixte`) : la CSS rend Mixte à partir de 1024 px et Fiches en dessous, sans
+   * saut à l'hydratation. Mixte n'existe pas sous 1024 px : il se lit Fiches.
+   */
+  const vueAffichee = computed<EtatVue | 'auto'>(() => {
+    const etats = cfg.value.etats
+    const v = etat.value.vue
+    // `auto` rend Mixte à partir de 1024 px : seulement pour une page qui a cet état
+    if (largeur.value === null) return v && v !== 'mixte' ? v : etats.includes('mixte') ? 'auto' : 'fiches'
+    const ordinateur = largeur.value === 'ordinateur'
+    if (v === 'mixte' || v === null) {
+      if (!ordinateur || !etats.includes('mixte')) return 'fiches'
+      if (v === null && listeRepliee.value) return 'carte'
+      return 'mixte'
+    }
+    return v
+  })
+
+  function setVue(v: EtatVue) {
+    if (largeur.value === 'ordinateur' && (v === 'mixte' || v === 'carte')) {
+      listeRepliee.value = v === 'carte'
+      try { sessionStorage.setItem(CLE_REPLI, listeRepliee.value ? '1' : '0') } catch {}
+    }
+    ecrire({ vue: v })
+  }
+
+  // ── Résultat ──
+  const sansAdresseIgnore = computed(() => ({ ...etat.value, sansAdresse: false }))
+  const filtrees = computed(() => filtrerFiches(toValue(fiches), etat.value, cfg.value))
+  const tri = computed(() => triEffectif(etat.value, cfg.value))
+  const resultat = computed(() => trierFiches(filtrees.value, tri.value, etat.value))
+  const groupeDef = computed(() => cfg.value.groupes.find((g) => g.cle === etat.value.groupe) ?? null)
+  const groupes = computed(() => regrouper(resultat.value, groupeDef.value, cfg.value))
+  const ordre = computed(() => ordreFiches(groupes.value))
+  const compteurs = computed(() => compterEtiquettes(toValue(fiches), etat.value, cfg.value))
+  const idsResultat = computed(() => new Set(resultat.value.map((f) => String(f.id))))
+  const nbSansAdresse = computed(() =>
+    filtrerFiches(toValue(fiches), sansAdresseIgnore.value, cfg.value).filter((f) => !f.geoloc).length,
+  )
+  const total = computed(() => toValue(fiches).length)
+  const nbActifs = computed(() => nbFiltresActifs(etat.value))
+
+  function voirSansAdresse() {
+    ecrire({ sansAdresse: true, vue: 'fiches' })
+  }
+
+  /** Fiche survolée (liste ↔ épingle) ; la carte de la page s'en sert, et peut l'écrire. */
+  const survolId = ref<string | number | null>(null)
+
+  // ── Fiche ouverte (B12) : `fiche=` dans l'URL, lu aussi au rendu serveur ──
+  const ficheId = computed(() => lireFiche(route.query))
+  /** La fiche ouverte, cherchée dans TOUTES les fiches (elle peut être hors filtres). null = pas encore chargée ou inconnue. */
+  const ficheOuverte = computed<MiniFiche | null>(() => {
+    const id = ficheId.value
+    return id == null ? null : toValue(fiches).find((f) => String(f.id) === id) ?? null
+  })
+  /** Rang dans l'ordre courant ; null = hors de vos filtres (ou pas de fiche). */
+  const position = computed(() => positionFiche(ordre.value, ficheId.value))
+  /**
+   * Empreinte de la liste au moment où CETTE page a ajouté l'entrée
+   * d'historique de la fiche ; null = fiche venue d'un lien partagé.
+   */
+  let listeALOuverture: string | null = null
+
+  function ouvrirFiche(id: string | number) {
+    if (String(id) === lireFiche(queryBase())) return
+    const base = queryBase()
+    const mode = modeOuverture(lireFiche(base))
+    if (mode === 'push') listeALOuverture = empreinteListe(base)
+    naviguer(queryAvecFiche(base, id), mode)
+  }
+
+  function fermerFiche() {
+    if (lireFiche(queryBase()) == null) return
+    const mode = modeFermeture(listeALOuverture != null, listeALOuverture === empreinteListe(queryBase()))
+    listeALOuverture = null
+    if (mode === 'back') { enAttente = null; router.back() }
+    else naviguer(queryAvecFiche(queryBase(), null))
+  }
+
+  /** Étiquette cliquée dans le détail : ajoute le filtre ; `fermer` (téléphone) referme la fiche dans le même geste. */
+  function filtrerDepuisFiche(dim: string, valeur: string, fermer: boolean) {
+    const base = queryBase()
+    const e = etatDepuis(base)
+    const vals = e.filtres[dim] ?? []
+    const filtres = vals.includes(valeur) ? e.filtres : { ...e.filtres, [dim]: [...vals, valeur] }
+    const query = ecrireQuery({ ...e, filtres }, cfg.value, base)
+    if (fermer) listeALOuverture = null
+    naviguer(fermer ? queryAvecFiche(query, null) : query)
+  }
+
+  // Retour arrière du navigateur (ou lien interne) : l'URL a perdu `fiche=`.
+  watch(ficheId, (id) => { if (id == null) listeALOuverture = null })
+
+  const fichePrecedente = () => { if (position.value?.precedente) ouvrirFiche(position.value.precedente.id) }
+  const ficheSuivante = () => { if (position.value?.suivante) ouvrirFiche(position.value.suivante.id) }
+
+  /**
+   * « Voir sur la carte » : ordinateur → Mixte, la fiche reste ouverte ;
+   * téléphone et tablette (pas de Mixte) → Carte, la fiche se ferme (elle
+   * couvrirait la carte). La page lit `centrage` et centre son épingle.
+   */
+  const centrage = ref<{ id: string; n: number } | null>(null)
+  function voirSurCarte(id: string | number) {
+    centrage.value = { id: String(id), n: (centrage.value?.n ?? 0) + 1 }
+    if (largeur.value === 'ordinateur' && cfg.value.etats.includes('mixte')) {
+      setVue('mixte')
+      return
+    }
+    listeALOuverture = null
+    const base = queryBase()
+    naviguer(queryAvecFiche(ecrireQuery({ ...etatDepuis(base), vue: 'carte' }, cfg.value, base), null))
+  }
+
+  return reactive({
+    cfg, etat, q, largeur, vueAffichee, tri, resultat, groupes, ordre, compteurs,
+    idsResultat, nbSansAdresse, total, nbActifs, survolId,
+    ficheId, ficheOuverte, position, centrage,
+    setVue, setQ, toggle, ajouterFiltre, effacerTout, setTri, setGroupe, setSousVue,
+    setSansAdresse, voirSansAdresse,
+    ouvrirFiche, fermerFiche, fichePrecedente, ficheSuivante, voirSurCarte, filtrerDepuisFiche,
+  })
+}
+
+export type VueFichesEtat = ReturnType<typeof useVueFiches>

nuxt.config.ts

@@ -3,6 +3,7 @@ export default defineNuxtConfig({
 
   app: {
     head: {
+      htmlAttrs: { lang: 'fr' },
       link: [
         { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
         { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32.png' },

pages/a-propos.vue

@@ -185,6 +185,12 @@
         </div>
       </section>
 
+      <!-- B10-M5 : Signaler a quitté la barre d'ordinateur ; il reste ici, dans le menu et dans chaque fiche -->
+      <p class="section-text apropos-pied">
+        Une fiche fausse, un lien mort, un contenu à retirer ?
+        <NuxtLink to="/signaler">Signaler un problème</NuxtLink>
+      </p>
+
     </div>
   </div>
 </template>
@@ -270,6 +276,18 @@ function copyApiUrl() {
   margin: 0 0 1rem;
 }
 
+.apropos-pied {
+  padding-top: var(--space-md);
+  border-top: 1px solid var(--border);
+}
+
+.apropos-pied a {
+  color: var(--text);
+  font-weight: var(--fw-semibold);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
 .section-intro {
   color: var(--nav-text-muted);
   margin-bottom: 1.25rem;

pages/agences.vue

@@ -1,453 +1,94 @@
 <template>
-  <div class="flex h-full overflow-hidden" style="background: var(--nav-bg);">
+  <div class="relative h-full overflow-hidden" style="background: var(--nav-bg);">
 
-    <!-- ═══════════════════════════════════════ SIDEBAR DESKTOP (>= 1024px) -->
+    <!-- IntentionBanner s'auto-affiche via Teleport (overlay plein écran) -->
-    <!-- Masquée en vue « Toutes les fiches » (B3-M3, décision Jules axe 2) :
-         le panneau EST la liste (+ ses propres chips hashtags), la sidebar
-         ferait doublon. IntentionBanner reste monté (Teleport, insensible au
-         v-show de son conteneur). -->
-    <div
-      v-show="desktopMapView !== 'fiches'"
-      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 -->
+    <!-- ═══════════════════════════════════════ VUE FICHES (B11) : Carte · Mixte · Fiches -->
-      <HashtagFilter
+    <VueFiches
-        :allHashtags="allHashtags"
+      :vf="vf"
-        :selectedHashtags="selectedHashtags"
+      intention="120 réseaux, collectifs et agences où des pensées écologiques deviennent des pratiques d'architecture."
-        :selectedFamille="selectedFamille"
+      libelle-recherche="Rechercher une structure…"
-        @update:selectedHashtags="selectedHashtags = $event"
+      :pending="pending"
-        @update:selectedFamille="selectedFamille = $event"
+      :selected-id="selectedId"
-      />
-
-      <!-- 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">
+      <template #carte>
-              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+        <!-- Métropole -->
-            </svg>
+        <div v-show="vf.etat.sousVue === 'metropole'" class="relative flex-1 min-h-0">
-          </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>
-          <ChipGroup v-if="structure.hashtags.length" class="mt-1" :aria-label="`Hashtags de ${structure.nom}`">
-            <Chip
-              v-for="tag in structure.hashtags.slice(0, 2)"
-              :key="tag"
-              as="span"
-              variant="fonction"
-              :label="tag"
-            />
-          </ChipGroup>
-        </div>
-      </div>
-
-    </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="setDesktopView('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="setDesktopView('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="setDesktopView('graphe')"
-          >Vue graphique</button>
-          <button
-            class="px-5 py-2 text-sm font-medium transition-colors"
-            :style="desktopMapView === 'fiches'
-              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
-              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
-            @click="setDesktopView('fiches')"
-          >Toutes les fiches</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"
+              :survolId="vf.survolId == null ? null : String(vf.survolId)"
+              :centrage="centrageCarte"
               @select-structure="onSelectStructure"
+              @survol="(id) => (vf.survolId = id)"
             />
             <template #fallback>
-                <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>
-                  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 -->
+        <!-- Outre-mer : pas de structure V2 en DOM-TOM pour l'instant (composant gardé vide) -->
-        <div v-show="desktopMapView === 'outremer'" class="flex-1 overflow-y-auto" style="background: var(--nav-bg);">
+        <div v-show="vf.etat.sousVue === 'outremer'" class="flex-1 min-h-0 overflow-y-auto" style="background: var(--nav-bg);">
           <ClientOnly>
-            <OutremerMap
+            <OutremerMap :orgs="[]" :selectedId="null" @select-org="() => {}" />
-              :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);">
+              <div class="flex items-center justify-center h-48 text-sm" style="color: var(--nav-text-muted);">Chargement…</div>
-                Chargement…
-              </div>
             </template>
           </ClientOnly>
         </div>
 
-        <!-- Vue graphique desktop -->
+        <!-- Vue graphique -->
-        <div v-show="desktopMapView === 'graphe'" class="flex-1 overflow-hidden flex flex-col">
+        <div v-show="vf.etat.sousVue === 'graphe'" class="relative flex-1 min-h-0 overflow-hidden">
-          <div class="flex-1 overflow-hidden relative">
           <ClientOnly>
             <GraphView
               :data="bifurcationData"
               :allHashtags="allHashtags"
-                :active="desktopMapView === 'graphe'"
+              :active="vf.etat.sousVue === 'graphe' && vf.vueAffichee !== 'fiches'"
               @select-structure="onSelectStructure"
             />
             <template #fallback>
-                <div class="flex items-center justify-center h-full" style="color: var(--nav-text-muted);">
+              <div class="flex items-center justify-center h-full" style="color: var(--nav-text-muted);">Chargement du graphe…</div>
-                  Chargement du graphe...
-                </div>
             </template>
           </ClientOnly>
         </div>
+
+        <!-- Chatbot sous la carte (ordinateur) -->
+        <div v-if="vf.etat.sousVue !== 'outremer'" class="hidden lg:block shrink-0">
           <ChatbotPlaceholder
             @highlightOrgs="() => {}"
-            @applyHashtag="(tag) => { if (!selectedHashtags.includes(tag)) selectedHashtags = [...selectedHashtags, tag] }"
+            @applyHashtag="(tag) => vf.ajouterFiltre('tags', sansDiese(tag))"
           />
         </div>
-
-        <!-- Panneau « Toutes les fiches » desktop (B3-M3) — la sidebar est
-             masquée dans cette vue (décision Jules axe 2), le panneau EST
-             la liste, avec ses propres chips hashtags sur le même état. -->
-        <div v-show="desktopMapView === 'fiches'" class="flex-1 flex flex-col overflow-hidden">
-          <FichesPanel
-            :fiches="allStructuresMini"
-            :hashtags="allHashtags"
-            :selected="selectedHashtags"
-            :query="search"
-            intention="Toutes les agences et réseaux du répertoire, filtrables par hashtag."
-            @update:selected="selectedHashtags = $event"
-            @open="(fiche) => onSelectStructure(String(fiche.id))"
-          />
-        </div>
-      </div>
-
-      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer/Graphique/Fiches + 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="setMobileView('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="setMobileView('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="setMobileView('graphe')"
-        >Graphe</button>
-        <button
-          class="flex-1 py-2 text-sm font-medium transition-colors"
-          :style="mobileMapView === 'fiches'
-            ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
-            : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
-          @click="setMobileView('fiches')"
-        >Fiches</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 -->
+      <!-- Détail (B12) : le corps de l'ancienne FicheModalV2 ; une structure liée s'ouvre dans le même panneau -->
-        <div v-show="mobileMapView === 'outremer'" class="absolute inset-0 overflow-y-auto" style="background: var(--nav-bg);">
+      <template #detail="{ fiche, filtrer }">
-          <ClientOnly>
+        <FicheReseauContenu
-            <OutremerMap
+          :structure-id="String(fiche.id)"
-              :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"
+          :etiquettes-actives="(vf.etat.filtres.tags ?? []).map((t) => `#${t}`)"
-              :active="mobileMapView === 'graphe'"
+          @etiquette="(tag) => filtrer('tags', sansDiese(tag))"
-              @select-structure="onSelectStructureMobile"
+          @voisin="(id) => vf.ouvrirFiche(id)"
         />
-            <template #fallback>
-              <div class="flex items-center justify-center h-48" style="color: var(--nav-text-muted);">
-                Chargement du graphe…
-              </div>
       </template>
-          </ClientOnly>
+    </VueFiches>
-        </div>
-
-        <!-- Zone « Fiches » mobile (B3-M3) — pleine hauteur sous la barre d'onglets,
-             pas de carte dessous donc pas de sheet demi-hauteur (même logique que
-             la vue graphe qui masque déjà le MobileSheet). Fix 2026-09-25 : la
-             version précédente empilait un second MobileSheet (état half par
-             défaut) au-dessus d'un fond neutre plein écran, laissant ~45% de
-             hauteur vide au-dessus du panneau. -->
-        <div
-          v-show="mobileMapView === 'fiches'"
-          class="absolute inset-0 flex flex-col overflow-hidden"
-          style="background: var(--nav-bg-alt);"
-        >
-          <FichesPanel
-            :fiches="allStructuresMini"
-            :hashtags="allHashtags"
-            :selected="selectedHashtags"
-            :query="search"
-            intention="Toutes les agences et réseaux du répertoire, filtrables par hashtag."
-            @update:selected="selectedHashtags = $event"
-            @open="(fiche) => onSelectStructureMobile(String(fiche.id))"
-          />
-        </div>
-
-        <!-- Bottom sheet swipable (masqué en vue graphique et en vue fiches) -->
-        <ClientOnly v-if="mobileMapView !== 'graphe' && mobileMapView !== 'fiches'">
-          <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"
+      class="lg:hidden fixed right-4 z-[1000] flex items-center gap-2 px-4 rounded-full shadow-lg"
-      style="
+      :style="`
+        bottom: ${basFlottants}px;
         height: 48px;
-        background: var(--nav-primary);
+        background: var(--nav-primary-solid);
-        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"
     >
@@ -467,6 +108,7 @@
     <button
       class="reseaux-info-btn"
       type="button"
+      :style="vf.largeur === 'telephone' ? `bottom: ${basFlottants}px;` : undefined"
       @click="missionOpen = true"
       aria-label="À propos des réseaux AEP cartographiés"
       title="À propos de cette carte"
@@ -490,7 +132,7 @@
         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>.
+        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 («&nbsp;Vue graphique&nbsp;» dans le sélecteur de carte) 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>
 
@@ -499,73 +141,8 @@
 
 <script setup lang="ts">
 import type { ReseauxBifurcationData, StructureV2 } from '~/types/structure-v2'
-
+import type { ConfigVueFiches, ValeurFiltre } from '~/utils/vueFiches'
-// ── Couleurs familles ──────────────────────────────────────────────────────
+import { sansDiese } from '~/composables/useFicheAdapter'
-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 ────────────────────────────────────────────────────────────────
-type MapView = 'metropole' | 'outremer' | 'graphe' | 'fiches'
-
-const route = useRoute()
-const router = useRouter()
-
-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<MapView>((route.query.vue as string) === 'fiches' ? 'fiches' : 'metropole')
-const desktopMapView = ref<MapView>((route.query.vue as string) === 'fiches' ? 'fiches' : 'metropole')
-const missionOpen = ref(false)
-
-// Sync URL — B3-M3 : pose/retire ?vue=fiches uniquement (agences.vue n'avait
-// aucune synchronisation URL avant B3 pour search/famille/hashtags/vue ; hors
-// périmètre de cette mission de l'étendre, seul ?vue=fiches est ajouté ici).
-function setDesktopView(v: MapView) {
-  desktopMapView.value = v
-  syncViewUrl()
-}
-function setMobileView(v: MapView) {
-  mobileMapView.value = v
-  syncViewUrl()
-}
-function syncViewUrl() {
-  const q: Record<string, string> = { ...(route.query as Record<string, string>) }
-  if (desktopMapView.value === 'fiches' || mobileMapView.value === 'fiches') {
-    q.vue = 'fiches'
-  } else {
-    delete q.vue
-  }
-  router.replace({ query: Object.keys(q).length ? q : undefined })
-}
-
-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)
@@ -583,91 +160,98 @@ onMounted(async () => {
 
 const structures = computed<StructureV2[]>(() => bifurcationData.value?.structures ?? [])
 
-// Tous les hashtags uniques triés
+// Tous les hashtags uniques triés (le graphe les attend avec leur « # »)
 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 ───────────────────────────────────────────────────────────────
+// ── Vue fiches (B11) : l'état vit dans l'URL (tags=, famille=, carte=…) ────
-const filtered = computed<StructureV2[]>(() => {
+// Familles : 1-5 = famille principale ou secondaire, 6 = badge « recherche politique »
-  let result = structures.value
+const FAMILLES: ValeurFiltre[] = [
+  { valeur: '1', libelle: 'Réemploi' },
+  { valeur: '2', libelle: 'Frugalité' },
+  { valeur: '3', libelle: 'Social' },
+  { valeur: '4', libelle: 'Collectifs' },
+  { valeur: '5', libelle: 'Urbanisme' },
+  { valeur: '6', libelle: 'Recherche' },
+]
+const PAYS: Record<string, string> = {
+  FR: 'France', BE: 'Belgique', DE: 'Allemagne', UK: 'Royaume-Uni', ES: 'Espagne', IT: 'Italie',
+  PT: 'Portugal', CH: 'Suisse', AT: 'Autriche', DK: 'Danemark', PL: 'Pologne', NL: 'Pays-Bas',
+  SE: 'Suède', USA: 'États-Unis', INT: 'International',
+}
 
-  // Filtre texte
+/** Valeurs d'une étiquette, de la plus fréquente à la plus rare (ordre stable des chips et des groupes). */
-  if (search.value.trim()) {
+function parFrequence(cle: (s: StructureV2) => string[], libelle: (v: string) => string): ValeurFiltre[] {
-    const q = search.value.toLowerCase()
+  const n = new Map<string, number>()
-    result = result.filter(
+  structures.value.forEach(s => cle(s).forEach(v => n.set(v, (n.get(v) ?? 0) + 1)))
-      s =>
+  return [...n.entries()]
-        s.nom.toLowerCase().includes(q) ||
+    .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0], 'fr'))
-        s.ville.toLowerCase().includes(q) ||
+    .map(([v]) => ({ valeur: v, libelle: libelle(v) }))
-        s.description_courte.toLowerCase().includes(q) ||
+}
-        s.hashtags.some(h => h.toLowerCase().includes(q))
-    )
-  }
 
-  // Filtre famille - F6 = badge_f6_recherche_politique, pas famille_principale
+const config = computed<ConfigVueFiches>(() => ({
-  if (selectedFamille.value !== null) {
+  dimensions: [
-    if (selectedFamille.value === 6) {
+    {
-      result = result.filter(s => (s.badges as any)?.f6_recherche_politique === true)
+      cle: 'tags', libelle: 'Hashtag', variante: 'fonction',
-    } else {
+      valeurs: parFrequence(s => s.hashtags.map(sansDiese), v => `#${v}`),
-      result = result.filter(
+    },
-        s => s.famille_principale === selectedFamille.value ||
+    { cle: 'famille', libelle: 'Famille', variante: 'echelle', valeurs: FAMILLES },
-          (s.familles_secondaires ?? []).includes(selectedFamille.value!)
+  ],
-      )
+  tris: ['pertinence', 'nom'],
-    }
+  groupes: [
-  }
+    { cle: 'famille', libelle: 'Famille', dimension: 'famille', sans: 'Sans famille' },
+    { cle: 'pays', libelle: 'Pays', dimension: 'pays', sans: 'Pays inconnu', valeurs: parFrequence(s => [s.pays], v => PAYS[v] ?? v) },
+  ],
+  etats: ['carte', 'mixte', 'fiches'],
+  sousVues: {
+    parametre: 'carte',
+    defaut: 'metropole',
+    valeurs: [
+      { valeur: 'metropole', libelle: 'Métropole' },
+      { valeur: 'outremer', libelle: 'Outre-mer' },
+      { valeur: 'graphe', libelle: 'Vue graphique' },
+    ],
+  },
+}))
 
-  // Filtre hashtags (AND logique si plusieurs)
+const { toMini } = useFicheAdapter()
-  if (selectedHashtags.value.length) {
+const fichesMini = computed(() => structures.value.map((s) => toMini(s)))
-    result = result.filter(
+const vf = useVueFiches(fichesMini, config)
-      s => selectedHashtags.value.every(h => s.hashtags.includes(h))
-    )
-  }
 
-  return result
+// La carte ne montre que le résultat courant (recherche + filtres)
+const metropoleStructures = computed<StructureV2[]>(() => structures.value.filter((s) => vf.idsResultat.has(s.id)))
+
+// ── Sélection (B12) : la fiche ouverte vit dans l'URL (`fiche=`), détail en panneau ──
+const selectedId = computed<string | null>(() => vf.ficheId)
+
+function onSelectStructure(id: string) {
+  vf.ouvrirFiche(id)
+}
+
+// « Voir sur la carte » : l'épingle est sur la carte Métropole (pas dans le graphe)
+const centrageCarte = ref<{ id: string; n: number } | null>(null)
+watch(() => vf.centrage, (c) => {
+  if (!c) return
+  if (vf.etat.sousVue !== 'metropole') vf.setSousVue('metropole')
+  centrageCarte.value = { id: c.id, n: c.n }
 })
 
-const hasActiveFilters = computed(
+// ── Boutons flottants (téléphone) : au-dessus du pied « Voir les N fiches » en état Carte ──
-  () => !!search.value || selectedFamille.value !== null || selectedHashtags.value.length > 0
+const chatbotOpen = ref(false)
-)
+const missionOpen = ref(false)
+const basFlottants = computed(() => (vf.largeur === 'telephone' && vf.vueAffichee === 'carte' ? 76 : 24))
 
-function resetFilters() {
+onMounted(() => {
-  search.value = ''
+  try {
-  selectedFamille.value = null
+    if (!localStorage.getItem('aep_reseaux_seen')) missionOpen.value = true
-  selectedHashtags.value = []
+  } catch {}
-}
+})
 
-// Structures métropole (pays != DOM-TOM, et avec coordonnées)
+// Une fiche ouverte donne son nom à l'onglet (les données arrivent après le rendu serveur ici)
-// Pour simplifier : toutes les structures (la carte gère les sans-coords)
+useHead({ title: computed(() => (vf.ficheOuverte ? `${vf.ficheOuverte.nom} — AEP` : 'AEP - Réseaux de bifurcation architecturale')) })
-const metropoleStructures = computed<StructureV2[]>(() => filtered.value)
-
-// Panneau « Toutes les fiches » (B3-M3) — mêmes structures que `filtered`,
-// sans filtrer par géolocalisation (adaptateur mutualisé avec `/`).
-const { toMini } = useFicheAdapter()
-const allStructuresMini = computed(() => filtered.value.map((s) => toMini(s)))
-
-// 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" })
 </script>
 
 <style scoped>
@@ -692,6 +276,6 @@ useHead({ title: "AEP - Réseaux de bifurcation architecturale" })
 .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; }
+  .reseaux-info-btn { bottom: 10px; left: auto; right: 52px; }
 }
 </style>

pages/index.vue

@@ -1,93 +1,44 @@
 <template>
-  <div class="flex h-full overflow-hidden" style="background: var(--nav-bg);">
+  <div class="relative 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"
-      />
-    </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"
+      class="absolute bottom-2 left-1/2 -translate-x-1/2 z-[1002] px-2 py-1 rounded text-xs pointer-events-none"
       style="background: var(--nav-accent); color: var(--nav-text);"
     >
       Mode dev — données seed
     </div>
 
-      <!-- ── VUE DESKTOP : Onglets Métropole / Outre-mer / Toutes les fiches ── -->
+    <!-- ═══════════════════════════════════════ VUE FICHES (B11) : Carte · Mixte · Fiches -->
-      <div class="hidden lg:flex lg:flex-1 lg:flex-col lg:overflow-hidden">
+    <VueFiches
-        <!-- Barre onglets desktop -->
+      :vf="vf"
-        <div class="shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
+      intention="Les structures d'entraide du métier, y compris celles sans adresse sur la carte."
-          <button
+      libelle-recherche="Rechercher une structure…"
-            class="px-5 py-2 text-sm font-medium transition-colors"
+      :pending="pending"
-            :style="desktopMapView === 'metropole'
+      :selected-id="selectedId"
-              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
+      :lien-page="(f) => `/fiche/${f.id}`"
-              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
+    >
-            @click="setDesktopView('metropole')"
+      <template #carte>
-          >Métropolitain</button>
+        <!-- Métropole -->
-          <button
+        <div v-show="vf.etat.sousVue === 'metropole'" class="relative flex-1 min-h-0">
-            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="setDesktopView('outremer')"
-          >Outre-mer</button>
-          <button
-            class="px-5 py-2 text-sm font-medium transition-colors"
-            :style="desktopMapView === 'fiches'
-              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
-              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
-            @click="setDesktopView('fiches')"
-          >Toutes les fiches</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
-                ref="navMapRef"
               :orgs="metropoleOrgs"
               :selectedId="selectedId"
+              :survolId="survolNum"
+              :centrage="centrageMetropole"
               @select-org="onSelectOrg"
+              @survol="(id) => (vf.survolId = id)"
             />
             <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="onHighlightOrgs" />
-        </div>
 
-        <!-- Carte Outre-mer desktop -->
+        <!-- Outre-mer -->
-        <div v-show="desktopMapView === 'outremer'" class="flex-1 flex flex-col overflow-hidden">
+        <div v-show="vf.etat.sousVue === 'outremer'" class="flex-1 min-h-0 overflow-y-auto" style="background: var(--nav-bg);">
-          <div class="flex-1 overflow-y-auto">
           <ClientOnly>
             <OutremerMap
               :orgs="outremerOrgs"
@@ -95,268 +46,46 @@
               @select-org="onSelectOrg"
             />
             <template #fallback>
-                <div class="flex items-center justify-center h-full text-sm" style="color: var(--nav-text-muted);">Chargement…</div>
+              <div class="flex items-center justify-center h-48 text-sm" style="color: var(--nav-text-muted);">Chargement…</div>
             </template>
           </ClientOnly>
         </div>
+
+        <!-- Chatbot sous la carte (ordinateur) -->
+        <div class="hidden lg:block shrink-0">
           <ChatbotPlaceholder @highlightOrgs="onHighlightOrgs" />
         </div>
-
-        <!-- Panneau « Toutes les fiches » desktop (B3-M3) — remplace la carte,
-             fiches sans géoloc incluses (gain principal de cette mission) -->
-        <div v-show="desktopMapView === 'fiches'" class="flex-1 flex flex-col overflow-hidden">
-          <div
-            class="shrink-0 px-4 py-2"
-            style="border-bottom: 1px solid var(--nav-bg-alt); background: var(--nav-surface);"
-          >
-            <button
-              type="button"
-              class="text-xs font-medium underline"
-              style="color: var(--nav-text-muted);"
-              @click="setDesktopView('metropole')"
-            >← Carte</button>
-          </div>
-          <FichesPanel
-            :fiches="allFichesMini"
-            :hashtags="[...FONCTIONS]"
-            :selected="fonctions"
-            :query="search"
-            intention="Toutes les structures d'entraide, y compris celles sans adresse sur la carte. Cochez une fonction pour filtrer."
-            @update:selected="onFonctions"
-            @open="(fiche) => onSelectOrg(Number(fiche.id))"
-          />
-        </div>
-      </div>
-
-      <!-- ── VUE MOBILE : Onglets Métro/Outre-mer + carte pleine hauteur + sheet swipable ── -->
-
-      <!-- Onglets Métropolitain / Outre-mer / Toutes les fiches -->
-      <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="setMobileView('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="setMobileView('outremer')"
-        >Outre-mer</button>
-        <button
-          class="flex-1 py-2 text-sm font-medium transition-colors"
-          :style="mobileMapView === 'fiches'
-            ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
-            : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
-          @click="setMobileView('fiches')"
-        >Fiches</button>
-      </div>
-
-      <div class="lg:hidden flex-1 relative overflow-hidden">
-
-        <!-- Carte Métropole -->
-        <div v-show="mobileMapView === 'metropole'" class="absolute inset-0">
-          <ClientOnly>
-            <NavMap
-              ref="navMapMobileRef"
-              :orgs="metropoleOrgs"
-              :selectedId="selectedId"
-              @select-org="onSelectOrgMobile"
-            />
-            <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 Outre-mer (scroll vertical, pleine largeur) -->
+      <!-- Détail (B12) : la fiche complète vient de la liste (même enregistrement NocoDB que /api/fiche/:id) -->
-        <div v-show="mobileMapView === 'outremer'" class="absolute inset-0 overflow-y-auto" style="background: var(--nav-bg);">
+      <template #detail="{ fiche, filtrer }">
-          <ClientOnly>
+        <template v-if="orgParId.get(String(fiche.id))">
-            <OutremerMap
+          <FicheDetail
-              :orgs="outremerOrgs"
+            :key="fiche.id"
-              :selectedId="selectedId"
+            :org="orgParId.get(String(fiche.id))!"
-              @select-org="onSelectOrgMobile"
+            compact
+            etiquettes-cliquables
+            @etiquette="(t) => filtrer('fonctions', t)"
           />
-            <template #fallback>
+          <CommentSection :key="`c-${fiche.id}`" :org-id="Number(fiche.id)" :refresh="commentaires" />
-              <div class="flex items-center justify-center h-48" style="color: var(--nav-text-muted);">
+          <CommentForm :key="`f-${fiche.id}`" :org-id="Number(fiche.id)" @submitted="commentaires++" />
-                Chargement…
-              </div>
         </template>
-          </ClientOnly>
+      </template>
-        </div>
+    </VueFiches>
-
-        <!-- Zone « Fiches » mobile (B3-M3) — pleine hauteur sous la barre d'onglets,
-             pas de carte dessous donc pas de sheet demi-hauteur (même logique que
-             la vue graphe qui masque aussi le MobileSheet). Fix 2026-09-25 : la
-             version précédente empilait un second MobileSheet (état half par
-             défaut) au-dessus d'un fond neutre plein écran, laissant ~45% de
-             hauteur vide au-dessus du panneau. -->
-        <div
-          v-show="mobileMapView === 'fiches'"
-          class="absolute inset-0 flex flex-col overflow-hidden"
-          style="background: var(--nav-bg-alt);"
-        >
-          <FichesPanel
-            :fiches="allFichesMini"
-            :hashtags="[...FONCTIONS]"
-            :selected="fonctions"
-            :query="search"
-            intention="Toutes les structures d'entraide, y compris celles sans adresse sur la carte. Cochez une fonction pour filtrer."
-            @update:selected="onFonctions"
-            @open="(fiche) => onSelectOrgMobile(Number(fiche.id))"
-          />
-        </div>
-
-        <!-- Bottom sheet swipable (Métropole et Outre-mer uniquement) -->
-        <ClientOnly v-if="mobileMapView !== 'fiches'">
-          <MobileSheet :resultCount="filtered.length" :pending="pending">
-            <!-- Barre recherche -->
-            <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">
-                <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"
-                  type="search"
-                  placeholder="Rechercher…"
-                  class="mobile-search-input"
-                  autocomplete="off"
-                  @input="onSearch(mobileSearch)"
-                />
-                <button
-                  v-if="mobileSearch"
-                  type="button"
-                  class="mobile-search-clear"
-                  aria-label="Effacer"
-                  @click.stop="mobileSearch = ''; onSearch('')"
-                >
-                  <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 — Chip variant echelle (B3-M1 : alignées sur EchelleFilter.vue,
-                   dupliquées ici car la sheet mobile ne passe pas par NavSidebar) -->
-              <div class="mt-2">
-                <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">ÉCHELLE</span>
-                <ChipGroup aria-label="Filtrer par échelle">
-                  <Chip
-                    v-for="opt in ECHELLES"
-                    :key="opt"
-                    :label="opt"
-                    variant="echelle"
-                    :active="echelle.includes(opt)"
-                    @toggle="toggleEchelle(opt)"
-                  />
-                </ChipGroup>
-              </div>
-
-              <!-- Filtres FONCTION — Chip variant fonction (B3-M1, idem) -->
-              <div class="mt-2">
-                <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">FONCTION</span>
-                <ChipGroup aria-label="Filtrer par fonction">
-                  <Chip
-                    v-for="fn in FONCTIONS"
-                    :key="fn"
-                    :label="fn"
-                    variant="fonction"
-                    :active="fonctions.includes(fn)"
-                    :count="fonctions.includes(fn) ? (fonctions.indexOf(fn) + 1) : (fonctionCount[fn] ?? 0)"
-                    @toggle="toggleFonction(fn)"
-                  />
-                </ChipGroup>
-              </div>
-
-              <button
-                v-if="hasActiveFilters"
-                @click="resetFilters"
-                class="mt-2 text-xs"
-                style="color: var(--nav-text-muted); text-decoration: underline;"
-              >✕ Effacer les filtres</button>
-            </div>
-
-            <!-- Compteur + Liste fiches -->
-            <div class="px-3 py-2">
-              <div class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">
-                {{ filtered.length }} résultat{{ filtered.length > 1 ? 's' : '' }}
-              </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="org in filtered"
-                  :key="org.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);'
-                    : 'background: var(--nav-surface); border-left: 3px solid transparent;'"
-                  @click="onSelectOrgMobile(org.Id)"
-                >
-                  <div class="flex items-start justify-between gap-2">
-                    <span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ org.nom }}</span>
-                    <span
-                      v-if="org.echelle"
-                      class="shrink-0 px-2 py-0.5 rounded-full text-xs font-medium"
-                      style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-                    >{{ org.echelle }}</span>
-                  </div>
-                  <div v-if="fonctionsList(org).length" class="mt-1 flex flex-wrap gap-1">
-                    <span
-                      v-for="fn in fonctionsList(org)"
-                      :key="fn"
-                      class="px-1.5 py-0.5 rounded text-xs"
-                      style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-                    >{{ fn }}</span>
-                  </div>
-                  <div v-if="org.localisation_ville" class="mt-1 text-xs" style="color: var(--nav-text-muted);">
-                    {{ org.localisation_ville }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </MobileSheet>
-        </ClientOnly>
-      </div>
-
-    </main>
-
-    <!-- ═══════════════════════════════════════ MODAL FICHE (desktop) -->
-    <FicheModal
-      v-model="ficheModalOpen"
-      :orgId="ficheModalId"
-    />
 
     <!-- ═══════════════════════════════════════ 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"
+      class="lg:hidden fixed right-4 z-[1000] flex items-center gap-2 px-4 rounded-full shadow-lg"
-      style="
+      :style="`
+        bottom: ${basFlottants}px;
         height: 48px;
-        background: var(--nav-primary);
+        background: var(--nav-primary-solid);
-        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"
     >
@@ -377,6 +106,7 @@
     <button
       class="mission-info-btn"
       type="button"
+      :style="vf.largeur === 'telephone' ? `bottom: ${basFlottants}px;` : undefined"
       @click="missionOpen = true"
       aria-label="À propos de cette carte d'entraide"
       title="À propos de cette carte"
@@ -399,291 +129,128 @@
 
 <script setup lang="ts">
 import type { Org } from '~/types/org'
+import type { ConfigVueFiches } from '~/utils/vueFiches'
+import { DOM_TOM } from '~/composables/useFicheAdapter'
 
-// ── URL query params sync ─────────────────────────────────────────────────
 const route = useRoute()
 const router = useRouter()
 
-const search = ref<string>((route.query.q as string) ?? '')
+// ── Données ───────────────────────────────────────────────────────────────
-const echelle = ref<string[]>(
+const { data, pending } = await useFetch<{ list: Org[]; source: string }>('/api/organisations')
-  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'
-)
 
-type MapView = 'metropole' | 'outremer' | 'fiches'
+const orgs = computed<Org[]>(() => data.value?.list ?? [])
+const dataSource = computed(() => data.value?.source ?? 'nocodb')
 
-const desktopMapView = ref<MapView>((route.query.vue as string) === 'fiches' ? 'fiches' : 'metropole')
+// `territoire=` (lien existant) : pré-filtre de page, hors de la vue fiches
-const selectedId = ref<number | null>(null)
+const orgsTerritoire = computed<Org[]>(() => {
-const chatbotOpen = ref(false)
+  const t = route.query.territoire
-const ficheModalOpen = ref(false)
+  return typeof t === 'string' && t ? orgs.value.filter((o) => o.territoire === t) : orgs.value
-const ficheModalId = ref<number | null>(null)
-const mobileMapView = ref<MapView>((route.query.vue as string) === 'fiches' ? 'fiches' : 'metropole')
-const missionOpen = ref(false)
-
-onMounted(() => {
-  try {
-    if (!localStorage.getItem('aep_mission_seen')) {
-      missionOpen.value = true
-    }
-  } catch {}
 })
-// Surlignage temporaire (5 sec) suite à une réponse chatbot
+
-// → sélectionne le premier ID recommandé sur la carte, puis remet à null
+// ── Vue fiches (B11) : l'état vit dans l'URL ──────────────────────────────
+const FONCTIONS = ['Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier', 'Comptabilité', 'Développement', 'Formation', "Gestion d'agence", 'Santé mentale']
+const ECHELLES = ['National', 'Régional', 'Local']
+const enValeurs = (l: string[]) => l.map((v) => ({ valeur: v, libelle: v }))
+
+const config: ConfigVueFiches = {
+  dimensions: [
+    { cle: 'fonctions', libelle: 'Fonction', variante: 'fonction', valeurs: enValeurs(FONCTIONS) },
+    { cle: 'echelle', libelle: 'Échelle', variante: 'echelle', valeurs: enValeurs(ECHELLES) },
+  ],
+  tris: ['pertinence', 'nom', 'recent'],
+  groupes: [
+    { cle: 'fonction', libelle: 'Fonction', dimension: 'fonctions', sans: 'Sans fonction' },
+    { cle: 'echelle', libelle: 'Échelle', dimension: 'echelle', sans: 'Sans échelle' },
+    { cle: 'territoire', libelle: 'Territoire', dimension: 'territoire', sans: 'Sans territoire', valeurs: enValeurs(['Métropole', ...DOM_TOM]) },
+  ],
+  etats: ['carte', 'mixte', 'fiches'],
+  sousVues: {
+    parametre: 'mode',
+    defaut: 'metropole',
+    valeurs: [{ valeur: 'metropole', libelle: 'Métropole' }, { valeur: 'outremer', libelle: 'Outre-mer' }],
+  },
+}
+
+const { toMini } = useFicheAdapter()
+const fichesMini = computed(() => orgsTerritoire.value.map((o) => toMini(o)))
+const vf = useVueFiches(fichesMini, config)
+
+// La carte ne montre que le résultat courant (recherche + filtres)
+const orgsFiltres = computed<Org[]>(() => orgsTerritoire.value.filter((o) => vf.idsResultat.has(String(o.Id))))
+const metropoleOrgs = computed<Org[]>(() => orgsFiltres.value.filter((o) => !o.territoire || !DOM_TOM.includes(o.territoire)))
+const outremerOrgs = computed<Org[]>(() => orgsFiltres.value.filter((o) => o.territoire && DOM_TOM.includes(o.territoire)))
+const survolNum = computed(() => (vf.survolId == null ? null : Number(vf.survolId)))
+
+// ── Sélection (B12) : la fiche ouverte vit dans l'URL (`fiche=`), détail en panneau ──
+const orgParId = computed(() => new Map(orgs.value.map((o) => [String(o.Id), o])))
+
+// Épingle et carte-fiche allumées : la fiche ouverte, ou 5 s celle que le chatbot désigne
+const surligneId = ref<number | null>(null)
+const selectedId = computed<number | null>(() => surligneId.value ?? (vf.ficheId != null ? Number(vf.ficheId) : null))
+
+const commentaires = ref(0)
+
+function onSelectOrg(id: number) {
+  vf.ouvrirFiche(id)
+}
+
+// « Voir sur la carte » : la bonne sous-vue (Métropole ou Outre-mer), puis l'épingle
+const centrageMetropole = ref<{ id: number; n: number } | null>(null)
+watch(() => vf.centrage, (c) => {
+  if (!c) return
+  const o = orgParId.value.get(c.id)
+  const dom = !!o?.territoire && DOM_TOM.includes(o.territoire)
+  if (vf.etat.sousVue !== (dom ? 'outremer' : 'metropole')) vf.setSousVue(dom ? 'outremer' : 'metropole')
+  if (!dom) centrageMetropole.value = { id: Number(c.id), n: c.n }
+})
+
+// Le bouton retour de /fiche/:id (« Ouvrir la page de la fiche ») revient à la même vue
+if (import.meta.client) {
+  watch(() => route.fullPath, () => {
+    try {
+      sessionStorage.setItem('nav_back_filters', new URLSearchParams(route.query as Record<string, string>).toString())
+    } catch {}
+  }, { immediate: true })
+}
+
+// Surlignage temporaire (5 s) suite à une réponse chatbot
 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
-
+  surligneId.value = firstId
-  // 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)
+    surligneId.value = null
-    selectedId.value = prevSelectedId.value
-    prevSelectedId.value = null
     highlightTimer = null
   }, 5000)
 }
 
-// Ref locale barre de recherche mobile (synchronisée avec search via onSearch)
+// Fiche aléatoire — ?random=1, au chargement comme en navigation interne
-const mobileSearch = ref<string>((route.query.q as string) ?? '')
+if (import.meta.client) {
-
+  watch([() => route.query.random, () => orgs.value.length], ([v, n]) => {
-// Refs vers les instances NavMap (desktop + mobile séparées via deux <ClientOnly>)
+    if (v === '1' && n > 0) {
-const navMapRef = ref<any>(null)
+      const randomOrg = orgs.value[Math.floor(Math.random() * n)]
-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'
-  if (desktopMapView.value === 'fiches' || mobileMapView.value === 'fiches') q.vue = 'fiches'
-  router.replace({ query: Object.keys(q).length ? q : undefined })
-}
-
-// Changement de vue (carte/fiches) — passe par syncUrl pour poser/retirer ?vue=fiches
-function setDesktopView(v: MapView) {
-  desktopMapView.value = v
-  syncUrl()
-}
-function setMobileView(v: MapView) {
-  mobileMapView.value = v
-  syncUrl()
-}
-
-// 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)
-}
-
-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() }
-
-function onSelectOrg(id: number) {
-  selectedId.value = selectedId.value === id ? null : id
-  // Desktop : ouvrir le modal fiche
-  if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
-    ficheModalId.value = id
-    ficheModalOpen.value = true
-  }
-}
-
-// Tap card mobile → ouvre la fiche détaillée
-function onSelectOrgMobile(id: number) {
-  selectedId.value = id
-  storeFiltersForBack()
-  router.push(`/fiche/${id}`)
-}
-
-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}` })
     }
-})
+  }, { immediate: true })
-
-// ── 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
-})
-
-// Panneau « Toutes les fiches » (B3-M3) — mêmes fiches que `filtered`, sans
-// filtrer par géolocalisation : c'est le gain principal de cette mission,
-// les fiches sans latitude/longitude (invisibles sur la carte) y apparaissent.
-const { toMini } = useFicheAdapter()
-const allFichesMini = computed(() => filtered.value.map((org) => toMini(org)))
-
-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' })
+// ── Boutons flottants (téléphone) : au-dessus du pied « Voir les N fiches » en état Carte ──
+const chatbotOpen = ref(false)
+const missionOpen = ref(false)
+const basFlottants = computed(() => (vf.largeur === 'telephone' && vf.vueAffichee === 'carte' ? 76 : 24))
+
+onMounted(() => {
+  try {
+    if (!localStorage.getItem('aep_mission_seen')) missionOpen.value = true
+  } catch {}
+})
+
+// Un lien partagé avec fiche= porte le nom de la fiche (onglet, aperçu de lien), dès le rendu serveur
+useHead({ title: computed(() => (vf.ficheOuverte ? `${vf.ficheOuverte.nom} — AEP` : 'AEP — Cartographie de l\'écologie politique architecturale')) })
 </script>
 
 <style scoped>
@@ -708,6 +275,6 @@ useHead({ title: 'AEP — Cartographie de l\'écologie politique architecturale'
 .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; }
+  .mission-info-btn { bottom: 10px; left: auto; right: 52px; }
 }
 </style>

pages/media.vue

@@ -1,56 +1,23 @@
 <template>
+  <!-- B10-M5 : plus de sous-onglets ici, la nav XL porte « Recherche média » et « Publications » (?tab=projets) -->
   <div class="media-page" style="background: var(--nav-bg);">
-    <nav class="subtabs" style="display:flex; gap:0; border-bottom: 1px solid var(--nav-bg-alt); background: var(--nav-surface); padding: 0 1rem;">
-      <button
-        :class="['subtab-btn', { active: tab === 'visuel' }]"
-        @click="tab = 'visuel'"
-      >
-        📚 bibliothèque des pensées écologiques
-      </button>
-      <button
-        :class="['subtab-btn', { active: tab === 'projets' }]"
-        @click="tab = 'projets'"
-      >
-        📐 Projets
-      </button>
-    </nav>
-
     <MediaTabVisuel v-if="tab === 'visuel'" />
-    <MediaTabProjets v-else-if="tab === 'projets'" />
+    <MediaTabProjets v-else />
   </div>
 </template>
 
 <script setup lang="ts">
 const route = useRoute()
-const router = useRouter()
 
-const tab = ref<'visuel' | 'projets'>(
+// Lu à chaque changement de ?tab= (un lien /media → /media?tab=projets ne remonte pas la page).
-  (['visuel', 'projets'].includes(route.query.tab as string)
+const tab = ref<'visuel' | 'projets'>(route.query.tab === 'projets' ? 'projets' : 'visuel')
-    ? route.query.tab as 'visuel' | 'projets'
+watch(() => route.query.tab, (t) => {
-    : 'visuel')
+  tab.value = t === 'projets' ? 'projets' : 'visuel'
-)
-
-watch(tab, (newTab) => {
-  router.replace({ query: { ...route.query, tab: newTab } })
 })
 
-useHead({ title: 'AEP - Media' })
+useHead(() => ({ title: tab.value === 'projets' ? 'AEP - Publications' : 'AEP - Recherche média' }))
 </script>
 
 <style scoped>
 .media-page { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
-.subtabs { display: flex; gap: 0; flex-shrink: 0; }
-.subtab-btn {
-  padding: 10px 18px;
-  font-size: 0.85rem;
-  font-weight: 500;
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  color: var(--nav-text-muted);
-  transition: color 0.15s, border-color 0.15s;
-}
-.subtab-btn:hover { color: var(--nav-text); }
-.subtab-btn.active { color: var(--nav-primary-solid); border-bottom-color: var(--nav-primary-solid); font-weight: 600; }
 </style>

public/data/fmhy-curated.json

@@ -1,6 +1,6 @@
 {
   "name": "FMHY — Sélection Architecte",
-  "description": "~50 ressources curées depuis FMHY (Free Media Heck Yeah) — pertinentes pour un architecte, un praticien de la transition, un créateur solo.",
+  "description": "Une quarantaine de ressources légales curées depuis FMHY (Free Media Heck Yeah) — pertinentes pour un architecte, un praticien de la transition, un créateur solo.",
   "children": [
     {
       "name": "IA & Outils cognitifs",
@@ -16,10 +16,6 @@
     {
       "name": "Lecture & Documentation",
       "children": [
-        { "name": "Anna's Archive", "url": "https://annas-archive.org/", "desc": "Bibliothèque shadow la plus complète du web. Livres, articles, thèses." },
-        { "name": "Sci-Hub", "url": "https://sci-hub.se/", "desc": "Accès libre aux articles scientifiques payants." },
-        { "name": "Library Genesis", "url": "https://libgen.is/", "desc": "Livres techniques et académiques en PDF." },
-        { "name": "Z-Library", "url": "https://z-lib.id/", "desc": "Bibliothèque numérique massive, interface soignée." },
         { "name": "OpenLibrary (Internet Archive)", "url": "https://openlibrary.org/", "desc": "Prêt numérique gratuit, millions de livres." },
         { "name": "Calibre", "url": "https://calibre-ebook.com/", "desc": "Gestion de bibliothèque numérique, convertisseur de formats." }
       ]
@@ -27,12 +23,7 @@
     {
       "name": "Dessin & Modélisation",
       "children": [
-        { "name": "FreeCAD", "url": "https://www.freecad.org/", "desc": "Modélisation 3D open source, paramétrique. Alternative à Rhino pour usage simple." },
+        { "name": "Krita", "url": "https://krita.org/", "desc": "Dessin digital et croquis. Excellent pour les concepts." }
-        { "name": "Blender", "url": "https://www.blender.org/", "desc": "3D, rendu, animation. La référence open source." },
-        { "name": "Inkscape", "url": "https://inkscape.org/", "desc": "Dessin vectoriel. Alternative à Illustrator." },
-        { "name": "GIMP", "url": "https://www.gimp.org/", "desc": "Retouche photo. Alternative à Photoshop." },
-        { "name": "Krita", "url": "https://krita.org/", "desc": "Dessin digital et croquis. Excellent pour les concepts." },
-        { "name": "LibreOffice Draw", "url": "https://www.libreoffice.org/", "desc": "Diagrammes, plans rapides, sans suite Adobe." }
       ]
     },
     {
@@ -92,7 +83,6 @@
       "name": "Divers Utiles",
       "children": [
         { "name": "Nextcloud", "url": "https://nextcloud.com/", "desc": "Cloud personnel self-hosted. Alternative à Google Drive/Dropbox." },
-        { "name": "Joplin", "url": "https://joplinapp.org/", "desc": "Notes chiffrées, sync Nextcloud, open source." },
         { "name": "draw.io / diagrams.net", "url": "https://app.diagrams.net/", "desc": "Diagrammes et schémas, gratuit, pas de compte requis." },
         { "name": "Excalidraw", "url": "https://excalidraw.com/", "desc": "Tableau blanc collaboratif, style hand-drawn, open source." },
         { "name": "Fmhy.net (complet)", "url": "https://fmhy.net/", "desc": "L'arbre complet. Des milliers de ressources organisées par thème." }

public/data/outils.json

@@ -1,5 +1,10 @@
 {
-  "simulateurs": [
+  "version": 2,
+  "maj": "2026-10-08",
+  "intro": "En tant qu'architecte, on jongle avec une multitude d'outils — simulation, dessin, calcul, recherche, partage. Les mutualiser, se conseiller dessus, savoir lequel utiliser quand : c'est une forme d'entraide concrète. Voici ceux que je propose dans un premier temps. Chacun peut contribuer pour enrichir cette boîte à outils commune.",
+  "conception": {
+    "intention": "Les outils de calcul situés d'AEP, pour cadrer un projet avant de dessiner. Ouvre un simulateur et lis le résultat comme un ordre de grandeur.",
+    "outils": [
       {
         "id": "autonomie",
         "icon": "🟢",
@@ -7,20 +12,444 @@
         "url": "https://calculs.trans-former.fr/autonomie/",
         "description": "Évaluer le degré d'autonomie d'une famille à un site donné selon les ressources locales (eau, énergie, alimentation).",
         "cta": "Lancer le simulateur →",
-      "tag": "outil-aep"
+        "tag": "outil-aep",
+        "mention": "Ordre de grandeur — version du 16/08/2026",
+        "verifie_le": "2026-10-08"
+      },
+      {
+        "id": "autoconstruction",
+        "icon": "🔨",
+        "titre": "Simulateur Autoconstruction",
+        "url": "https://calculs.trans-former.fr/autoconstruction/",
+        "description": "Cadrer un projet d'autoconstruction : quantités et coûts des matériaux, surfaces, géométrie, calculés en temps réel.",
+        "cta": "Lancer le simulateur →",
+        "tag": "outil-aep",
+        "mention": "Ordre de grandeur — version du 16/08/2026",
+        "verifie_le": "2026-10-08"
       }
     ],
-  "simulateurs_inspirations": [
+    "inspirations": [
       {
         "id": "florquin-prix-m2",
         "icon": "💡",
         "titre": "Estimation prix au m² — Florquin Studio",
         "url": "https://offre.florquinstudio.com/",
         "description": "Une agence parisienne qui a construit un système d'estimation au m² assez fin. Pas dans nos outils, mais inspirant pour qui veut industrialiser son chiffrage.",
-      "tag": "inspiration-externe"
+        "tag": "inspiration-externe",
+        "mention": null,
+        "verifie_le": null
       }
+    ]
+  },
+  "open_source": {
+    "intention": "Des outils libres choisis pour un architecte indépendant, puis nos recommandations maison et un annuaire du web libre classé par usage. Choisis un bloc dans le sommaire ou fais défiler.",
+    "selection": {
+      "intention": "Une sélection d'outils libres utiles au quotidien d'un architecte indépendant : dictée, bureautique, dessin et modélisation, cartes et données publiques. Chacun a été ouvert et vérifié le 8 octobre 2026, avec sa licence et ses plateformes.",
+      "rubriques": [
+        {
+          "id": "dictee-voix",
+          "titre": "Dictée et voix",
+          "note": "Ces outils font tourner Whisper sur ton ordinateur : rien ne part dans le cloud, ce qui compte quand tu dictes un CR de chantier ou un échange client.",
+          "liens": [
+            {
+              "nom": "Handy",
+              "url": "https://handy.computer/",
+              "desc": "Raccourci clavier, tu parles, le texte s'insère au curseur dans n'importe quelle application : dicter un mail ou une note de chantier sans quitter le logiciel ouvert, avec transcription locale.",
+              "source": "aep",
+              "licence": "MIT",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
               ],
-  "opensource": [
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-10 (v0.9.8 du 2026-10-03)"
+            },
+            {
+              "nom": "Buzz",
+              "url": "https://buzzcaptions.com/",
+              "desc": "Transcrit un enregistrement de réunion ou de visite (fichier audio ou vidéo) en texte, SRT ou TXT, hors ligne : base brute pour un compte rendu.",
+              "source": "aep",
+              "licence": "MIT",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-10 (v1.4.5 du 2026-08-23)"
+            },
+            {
+              "nom": "Vibe",
+              "url": "https://github.com/thewh1teagle/vibe",
+              "desc": "Transcription locale de fichiers audio et vidéo, interface simple : pratique pour transformer un vocal de visite en texte à retravailler.",
+              "source": "aep",
+              "licence": "MIT",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-10 (v3.2.2 du 2026-09-05)"
+            }
+          ]
+        },
+        {
+          "id": "quotidien",
+          "titre": "Le quotidien d'une agence",
+          "note": "De quoi tenir un cabinet d'architecte sans abonnement : bureautique, courrier, notes, PDF, visio, devis et factures.",
+          "liens": [
+            {
+              "nom": "LibreOffice",
+              "url": "https://www.libreoffice.org/",
+              "desc": "Rédiger CCTP, notes de calcul, tableurs de métrés et devis au format Word/Excel/PDF sans licence Microsoft.",
+              "source": "aep",
+              "licence": "MPL-2.0",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-08 (v26.8.1)"
+            },
+            {
+              "nom": "Thunderbird",
+              "url": "https://www.thunderbird.net/fr/",
+              "desc": "Client mail et agenda pour centraliser plusieurs adresses (pro, projets, associatives) hors webmail, avec filtres et signatures.",
+              "source": "aep",
+              "licence": "MPL-2.0",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux",
+                "Android"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026 (v157.0.1 sur le site le 2026-10-08)"
+            },
+            {
+              "nom": "Joplin",
+              "url": "https://joplinapp.org/",
+              "desc": "Notes en markdown synchronisées sur téléphone et ordinateur (chiffrées de bout en bout) : carnet de chantier, listes de réserves, recherche rapide.",
+              "source": "aep",
+              "licence": "AGPL-3.0",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux",
+                "Android",
+                "iOS"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-09 (v3.7.21 du 2026-09-25)"
+            },
+            {
+              "nom": "Stirling-PDF",
+              "url": "https://github.com/Stirling-Tools/Stirling-PDF",
+              "desc": "Fusionner, découper, compresser, signer ou passer en OCR un PDF (dossier de DP, pièces d'un marché) sans envoyer les plans chez un service tiers quand on l'installe en local.",
+              "source": "aep",
+              "licence": "MIT (cœur ; fonctions entreprise sous licence propriétaire, non nécessaires)",
+              "plateformes": [
+                "Web (auto-hébergé)",
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-10 (v3.1.0 du 2026-10-05)"
+            },
+            {
+              "nom": "PDF Arranger",
+              "url": "https://github.com/pdfarranger/pdfarranger",
+              "desc": "Réordonner, pivoter, extraire ou fusionner les pages d'un PDF à la souris : composer un dossier de consultation propre en deux minutes.",
+              "source": "aep",
+              "licence": "GPL-3.0",
+              "plateformes": [
+                "Linux",
+                "Windows"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-10 (v1.14.0 du 2026-05-23, dépôt actif le 2026-10-01)"
+            },
+            {
+              "nom": "Xournal++",
+              "url": "https://xournalpp.github.io/",
+              "desc": "Annoter un plan ou un PDF au stylet sur tablette ou écran tactile : markup de visite, retours sur un plan d'exécution.",
+              "source": "aep",
+              "licence": "GPL-2.0",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-09 (v1.3.8 du 2026-09-26)"
+            },
+            {
+              "nom": "Jitsi Meet",
+              "url": "https://jitsi.org/jitsi-meet/",
+              "desc": "Visioconférence sans compte, avec partage d'écran, pour une réunion de chantier à distance ou un rendez-vous client ; instance publique gratuite ou auto-hébergeable.",
+              "source": "aep",
+              "licence": "Apache-2.0",
+              "plateformes": [
+                "Web",
+                "Android",
+                "iOS"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-09 (version stable du 2026-09-14)"
+            },
+            {
+              "nom": "CryptPad",
+              "url": "https://cryptpad.org/",
+              "desc": "Documents, tableurs et tableaux partagés en ligne, chiffrés : co-éditer un CR ou un planning avec un client sans lui demander de créer un compte.",
+              "source": "aep",
+              "licence": "AGPL-3.0",
+              "plateformes": [
+                "Web"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-10 (v2026.9.0 du 2026-10-07)"
+            },
+            {
+              "nom": "Dolibarr",
+              "url": "https://www.dolibarr.org/",
+              "desc": "ERP léger auto-hébergeable : devis, factures, suivi des paiements pour une agence ou un freelance qui veut sortir du tableur.",
+              "source": "aep",
+              "licence": "GPL-3.0",
+              "plateformes": [
+                "Web (auto-hébergé)"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-09 (v24.0.1 du 2026-09-07)"
+            }
+          ]
+        },
+        {
+          "id": "dessiner-modeliser",
+          "titre": "Dessiner, modéliser, construire",
+          "note": "La chaîne libre de la CAO au BIM, de l'illustration à la maquette. FreeCAD et Bonsai sont sérieux mais demandent plusieurs semaines de prise en main.",
+          "liens": [
+            {
+              "nom": "FreeCAD",
+              "url": "https://www.freecad.org/",
+              "desc": "Modélisation paramétrique 3D avec atelier BIM, coupes et mise en plan : modéliser un projet et sortir des plans sans licence.",
+              "source": "aep",
+              "licence": "LGPL-2.1",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-10 (v1.1.4 du 2026-09-28)"
+            },
+            {
+              "nom": "Bonsai (ex BlenderBIM)",
+              "url": "https://bonsaibim.org/",
+              "desc": "Créer et lire des modèles IFC (OpenBIM) dans Blender : produire un modèle BIM échangeable avec un bureau d'études sans passer par Revit ou ArchiCAD.",
+              "source": "aep",
+              "licence": "LGPL-3.0",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-10 (build alpha du 2026-10-07, dépôt IfcOpenShell)"
+            },
+            {
+              "nom": "Blender",
+              "url": "https://www.blender.org/",
+              "desc": "Modélisation, rendu photoréaliste et animation pour illustrer un concours ou une esquisse ; socle de Bonsai.",
+              "source": "aep",
+              "licence": "GPL-3.0-or-later",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026 (v5.2 en téléchargement le 2026-10-08)"
+            },
+            {
+              "nom": "LibreCAD",
+              "url": "https://librecad.org/",
+              "desc": "Dessin 2D en DXF : reprendre un relevé, redessiner un plan de masse ou préparer un fichier pour la découpe, sans licence AutoCAD (pas de DWG natif).",
+              "source": "aep",
+              "licence": "GPL-2.0",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-05 (v2.2.1.5 du 2026-05-02, dépôt actif le 2026-10-07)"
+            },
+            {
+              "nom": "Inkscape",
+              "url": "https://inkscape.org/fr/",
+              "desc": "Dessin vectoriel : mettre au propre un schéma de principe, un plan-masse ou une planche de concours, export SVG et PDF.",
+              "source": "aep",
+              "licence": "GPL",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-10 (commits du 2026-10-08)"
+            },
+            {
+              "nom": "GIMP",
+              "url": "https://www.gimp.org/",
+              "desc": "Retouche d'image : traiter des photos de visite, détourer, préparer des photomontages et des planches.",
+              "source": "aep",
+              "licence": "GPL-3.0-or-later",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-10 (actualités du 2026-10-01)"
+            },
+            {
+              "nom": "WikiHouse Skylark",
+              "url": "https://github.com/wikihouseproject/Skylark",
+              "desc": "Système constructif open source en blocs isolants, plans de fabrication CNC publiés : référence pour étudier ou proposer une ossature bois partagée ; à faire valider par un ingénieur structure.",
+              "source": "aep",
+              "licence": "CC BY-SA 4.0",
+              "plateformes": [
+                "Web (dépôt de fichiers CAO)"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-10 (commit du 2026-10-08)"
+            }
+          ]
+        },
+        {
+          "id": "cartes-territoire",
+          "titre": "Cartes, cadastre et territoire",
+          "note": "Les données publiques utiles avant une étude de faisabilité : parcelle, urbanisme, risques, histoire du site.",
+          "liens": [
+            {
+              "nom": "QGIS",
+              "url": "https://qgis.org/",
+              "desc": "Système d'information géographique complet : croiser cadastre, PLU, relief et servitudes sur un même plan-masse, export DXF.",
+              "source": "aep",
+              "licence": "GPL-2.0",
+              "plateformes": [
+                "Windows",
+                "macOS",
+                "Linux"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "2026-09 (v3.44.15 du 2026-09-25)"
+            },
+            {
+              "nom": "Géoportail (cartes.gouv.fr)",
+              "url": "https://cartes.gouv.fr/explorer-les-cartes/",
+              "desc": "Fonds IGN, cadastre, orthophotos et relief : repérer une parcelle, mesurer, imprimer un extrait ; l'ancien géoportail.gouv.fr redirige ici.",
+              "source": "aep",
+              "licence": "Service public, gratuit",
+              "plateformes": [
+                "Web"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "service public en ligne, ouvert le 2026-10-08"
+            },
+            {
+              "nom": "Cadastre – données ouvertes",
+              "url": "https://cadastre.data.gouv.fr/",
+              "desc": "Plan cadastral vectoriel et fichiers par commune en téléchargement libre, à charger dans QGIS pour un plan de situation.",
+              "source": "aep",
+              "licence": "Service public, gratuit",
+              "plateformes": [
+                "Web"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "service public en ligne, ouvert le 2026-10-08"
+            },
+            {
+              "nom": "Géoportail de l'Urbanisme",
+              "url": "https://www.geoportail-urbanisme.gouv.fr/",
+              "desc": "PLU, PLUi, cartes communales et servitudes opposables : la source officielle pour vérifier la règle d'une parcelle avant de rédiger une étude.",
+              "source": "aep",
+              "licence": "Service public, gratuit",
+              "plateformes": [
+                "Web"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "service public en ligne, ouvert le 2026-10-08"
+            },
+            {
+              "nom": "Géorisques",
+              "url": "https://www.georisques.gouv.fr/",
+              "desc": "Inondation, argiles, radon, sismicité, sites pollués pour une adresse : le contrôle de base avant d'acheter ou de chiffrer un projet.",
+              "source": "aep",
+              "licence": "Service public, gratuit",
+              "plateformes": [
+                "Web"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "service public en ligne, ouvert le 2026-10-08"
+            },
+            {
+              "nom": "Remonter le temps (IGN)",
+              "url": "https://remonterletemps.ign.fr/",
+              "desc": "Cartes et photos aériennes anciennes d'un lieu : lire l'histoire d'un site, repérer d'anciennes constructions ou d'anciens usages.",
+              "source": "aep",
+              "licence": "Service public, gratuit",
+              "plateformes": [
+                "Web"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "service public en ligne, ouvert le 2026-10-08"
+            },
+            {
+              "nom": "API Carto (IGN)",
+              "url": "https://apicarto.ign.fr/api/doc/",
+              "desc": "Interroger parcelles, zonage et servitudes par API : base technique pour automatiser un plan de situation.",
+              "source": "aep",
+              "licence": "Service public, gratuit",
+              "plateformes": [
+                "Web"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "service public en ligne, ouvert le 2026-10-08"
+            },
+            {
+              "nom": "Demandes de valeurs foncières",
+              "url": "https://app.dvf.etalab.gouv.fr/",
+              "desc": "Prix de vente des biens par commune ou parcelle : étayer une fourchette d'estimation ou un argumentaire de réhabilitation.",
+              "source": "aep",
+              "licence": "Service public, gratuit",
+              "plateformes": [
+                "Web"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "service public en ligne, ouvert le 2026-10-08"
+            },
+            {
+              "nom": "Cartofriches (Cerema)",
+              "url": "https://cartofriches.cerema.fr/cartofriches/",
+              "desc": "Recensement national des friches : repérer des sites à reconvertir pour une approche de réhabilitation ou de renaturation.",
+              "source": "aep",
+              "licence": "Service public, gratuit",
+              "plateformes": [
+                "Web"
+              ],
+              "verifie_le": "2026-10-08",
+              "derniere_activite": "service public en ligne, ouvert le 2026-10-08"
+            }
+          ]
+        }
+      ]
+    },
+    "recommandes": [
       {
         "id": "dictee-universelle-groq",
         "icon": "🎤",
@@ -54,37 +483,511 @@
         "tag": "a-venir"
       }
     ],
-  "bifurcation": {
+    "rubriques": [
-    "intro": "Beaucoup de jeunes diplômés en archi cherchent des chemins alternatifs. Cette section rassemble des témoignages, expériences, et ressources sur ce que c'est que de bifurquer.",
+      {
-    "videos_ofqa": [
+        "id": "vie-privee",
+        "titre": "Vie privée & adblocking — les bases",
+        "note": "Le premier réflexe du guide débutant fmhy : un bon bloqueur de pubs rend la moitié du web à nouveau respirable.",
+        "liens": [
+          { "nom": "uBlock Origin", "url": "https://github.com/gorhill/uBlock", "desc": "bloqueur de pubs de référence, léger et open source", "source": "fmhy" },
+          { "nom": "SponsorBlock", "url": "https://sponsor.ajay.app/", "desc": "saute automatiquement les segments sponsorisés de YouTube", "source": "fmhy" },
+          { "nom": "LibreWolf", "url": "https://librewolf.net/", "desc": "Firefox durci vie privée, pré-configuré", "source": "fmhy" },
+          { "nom": "Proton VPN", "url": "https://protonvpn.com", "desc": "VPN suisse, offre gratuite illimitée", "source": "fmhy" },
+          { "nom": "Bitwarden", "url": "https://bitwarden.com/", "desc": "gestionnaire de mots de passe open source", "source": "fmhy" },
+          { "nom": "Cryptomator", "url": "https://cryptomator.org/", "desc": "chiffrement de tes fichiers avant envoi dans le cloud", "source": "fmhy" },
+          { "nom": "Tor Browser", "url": "https://www.torproject.org/", "desc": "navigation anonyme via le réseau Tor", "source": "fmhy" },
+          { "nom": "KeePassXC", "url": "https://keepassxc.org/", "desc": "coffre de mots de passe 100% local", "source": "fmhy" }
+        ]
+      },
+      {
+        "id": "livres",
+        "titre": "Lire : domaine public & liseuses",
+        "liens": [
+          { "nom": "Project Gutenberg", "url": "https://www.gutenberg.org/", "desc": "70 000+ classiques du domaine public, 100% légal", "source": "fmhy" },
+          { "nom": "Calibre", "url": "https://calibre-ebook.com/", "desc": "gestion et conversion de bibliothèque numérique", "source": "fmhy" },
+          { "nom": "KOReader", "url": "https://koreader.rocks/", "desc": "lecteur ebook open source pour liseuses", "source": "fmhy" }
+        ]
+      },
+      {
+        "id": "films",
+        "titre": "Films & séries en accès légal",
+        "liens": [
+          { "nom": "Tubi", "url": "https://tubitv.com", "desc": "streaming légal et gratuit (financé par la pub)", "source": "fmhy" },
+          { "nom": "Stremio", "url": "https://www.stremio.com/", "desc": "centre multimédia extensible par extensions", "source": "fmhy" },
+          { "nom": "Simkl", "url": "https://simkl.com/", "desc": "suivi de films, séries et anime déjà vus", "source": "fmhy" }
+        ]
+      },
+      {
+        "id": "musique",
+        "titre": "Radios & podcasts",
+        "liens": [
+          { "nom": "NTS Radio", "url": "https://www.nts.live/", "desc": "shows de DJ indépendants, archives immenses", "source": "fmhy" },
+          { "nom": "SomaFM", "url": "https://somafm.com/", "desc": "30+ radios internet indépendantes", "source": "fmhy" },
+          { "nom": "Radio Garden", "url": "https://radio.garden/", "desc": "explorer les radios du monde entier sur un globe", "source": "fmhy" },
+          { "nom": "Pocket Casts", "url": "https://play.pocketcasts.com/", "desc": "lecteur de podcasts libre et complet, aussi dans le navigateur", "source": "fmhy" }
+        ]
+      },
+      {
+        "id": "logiciels",
+        "titre": "Logiciels libres",
+        "liens": [
+          { "nom": "qBittorrent", "url": "https://www.qbittorrent.org/", "desc": "client BitTorrent libre, sans pub — la référence", "source": "fmhy" }
+        ]
+      },
+      {
+        "id": "mobile",
+        "titre": "Android / iOS",
+        "liens": [
+          { "nom": "Aurora Store", "url": "https://auroraoss.com/", "desc": "Google Play alternatif, sans compte Google", "source": "fmhy" },
+          { "nom": "Droid-ify", "url": "https://droidify.app/", "desc": "client F-Droid moderne — applications libres", "source": "fmhy" },
+          { "nom": "APKMirror", "url": "https://www.apkmirror.com/", "desc": "archives APK vérifiées", "source": "fmhy" },
+          { "nom": "Fossify", "url": "https://github.com/FossifyOrg", "desc": "suite d’apps Android simples et libres (galerie, agenda, fichiers…)", "source": "fmhy" },
+          { "nom": "Obtainium", "url": "https://obtainium.imranr.dev/", "desc": "installe et met à jour tes APKs depuis les sources officielles", "source": "fmhy" }
+        ]
+      },
+      {
+        "id": "education",
+        "titre": "Éducation, cours & recherche",
+        "liens": [
+          { "nom": "MIT OpenCourseWare", "url": "https://ocw.mit.edu/", "desc": "les cours du MIT en accès libre complet", "source": "fmhy" },
+          { "nom": "edX", "url": "https://www.edx.org/", "desc": "MOOCs de grandes universités", "source": "fmhy" },
+          { "nom": "Khan Academy", "url": "https://www.khanacademy.org/", "desc": "maths, sciences, économie — gratuit, du collège au supérieur", "source": "fmhy" },
+          { "nom": "Class Central", "url": "https://www.classcentral.com/", "desc": "moteur de recherche de cours en ligne", "source": "fmhy" },
+          { "nom": "WolframAlpha", "url": "https://www.wolframalpha.com/", "desc": "moteur de calcul et base de connaissances", "source": "fmhy" },
+          { "nom": "PhET", "url": "https://phet.colorado.edu/", "desc": "simulations interactives physique / chimie / maths", "source": "fmhy" }
+        ]
+      },
+      {
+        "id": "ia",
+        "titre": "Intelligence artificielle gratuite",
+        "liens": [
+          { "nom": "DeepSeek", "url": "https://chat.deepseek.com/", "desc": "modèle de pointe, usage illimité gratuit", "source": "fmhy" },
+          { "nom": "Qwen Studio", "url": "https://chat.qwen.ai/", "desc": "chat IA (Qwen) illimité gratuit", "source": "fmhy" },
+          { "nom": "Google AI Studio", "url": "https://aistudio.google.com/", "desc": "Gemini en accès généreux gratuit", "source": "fmhy" },
+          { "nom": "Mistral Le Chat", "url": "https://chat.mistral.ai/", "desc": "LLM français, gratuit", "source": "fmhy" },
+          { "nom": "LM Studio", "url": "https://lmstudio.ai/", "desc": "faire tourner des modèles en local, sans cloud", "source": "fmhy" },
+          { "nom": "Jan", "url": "https://jan.ai/", "desc": "application desktop libre pour IA locale", "source": "fmhy" },
+          { "nom": "Open WebUI", "url": "https://openwebui.com/", "desc": "interface web auto-hébergeable pour modèles locaux", "source": "fmhy" }
+        ]
+      },
+      {
+        "id": "francophone",
+        "titre": "Contenus francophones",
+        "liens": [
+          { "nom": "Gallica", "url": "https://gallica.bnf.fr/", "desc": "millions de documents numérisés de la BnF, domaine public", "source": "fmhy" },
+          { "nom": "Nos Livres", "url": "https://noslivres.net/", "desc": "classiques français du domaine public, formats propres", "source": "fmhy" },
+          { "nom": "Audiocite", "url": "https://www.audiocite.net/", "desc": "livres audio francophones du domaine public", "source": "fmhy" },
+          { "nom": "Littérature audio", "url": "https://www.litteratureaudio.com/", "desc": "autre grande bibliothèque audio francophone libre", "source": "fmhy" },
+          { "nom": "Dealabs", "url": "https://www.dealabs.com/", "desc": "bons plans et gratuités débusqués par la communauté", "source": "fmhy" }
+        ]
+      }
+    ],
+    "fmhy": {
+      "snapshot": "2026-08-25",
+      "url": "https://fmhy.net/",
+      "titre": "Annuaire du web libre — la cartographie FMHY",
+      "texte_intro": "FMHY (FreeMediaHeckYeah) est le plus grand index communautaire de ressources gratuites du web : des milliers de liens classés et vérifiés par des centaines de contributeurs bénévoles, mis à jour en continu. C'est une forme de résistance numérique — accéder librement au savoir, à la culture et aux outils, hors des catalogues marchands. J'en ai traduit et organisé les entrées phares par usage, pour aller droit au but.",
+      "avertissement": "Cette page ne relaie que des ressources légales. FMHY indexe aussi des contenus protégés, que cette page ne reprend pas. FMHY maintient une liste des sites dangereux (malwares, arnaques) : consulte-la avant de t'aventurer au-delà de cette sélection.",
+      "avertissement_lien": "https://fmhy.net/unsafe",
+      "avertissement_lien_texte": "liste des sites dangereux",
+      "snapshot_texte": "Cartographie établie d'après un snapshot du 25 août 2026 — l'index fmhy évolue en continu, voir",
+      "arbre_label": "Sélection interactive — clique sur les branches pour déplier",
+      "lien_texte": "Explorer tout l'arbre → fmhy.net"
+    },
+    "logiciels_pro": {
+      "badge": "Bientôt — nécessite un compte",
+      "titre": "Logiciels pro",
+      "description": "Logiciels lourds (Adobe, AutoCAD…) — accès mutualisé. Disponible après création de compte AEP.",
+      "status": "bientot-login"
+    }
+  },
+  "partir_de_soi": {
+    "intention": "Des ressources libres ou à porte gratuite, rangées sous les sept mots de la tête d'échelle. Cherche ton mot et ouvre ce qui te parle.",
+    "fiches": [
+      {
+        "id": "quete-de-sens",
+        "mot": "quête de sens",
+        "resume": "Bifurquer, donner du sens à son métier : un film, des témoignages d'architectes qui ont changé de voie, des podcasts.",
+        "vide": null
+      },
+      {
+        "id": "ou-habiter",
+        "mot": "où habiter, avec qui",
+        "resume": "Habiter avec d'autres : un guide pour monter un projet d'habitat participatif.",
+        "vide": null
+      },
+      {
+        "id": "gagner-sa-vie",
+        "mot": "gagner sa vie",
+        "resume": "Créer son activité et en vivre.",
+        "vide": "Rien encore : la conférence promettait des formations en accès libre (business, gestion du temps), aucune ressource libre ne les porte aujourd'hui. Si tu en connais une, propose-la."
+      },
+      {
+        "id": "sante-mentale",
+        "mot": "santé mentale",
+        "resume": "Repérer, comprendre, se faire accompagner : premiers secours en santé mentale, emprise, TDAH.",
+        "vide": null
+      },
+      {
+        "id": "mener-ses-projets",
+        "mot": "mener ses projets",
+        "resume": "Faire le bilan et se projeter, clarifier son après-diplôme. « Gérer son temps » est promis et pas encore porté.",
+        "vide": null
+      },
+      {
+        "id": "naviguer-avec-soi",
+        "mot": "naviguer avec soi",
+        "resume": "Méditation et pratiques d'introspection accessibles sans payer.",
+        "vide": null
+      },
+      {
+        "id": "competences-psychosociales",
+        "mot": "les compétences psychosociales",
+        "resume": "Le cadre de référence, la communication non violente, la facilitation, la confiance en soi.",
+        "vide": null
+      }
+    ],
+    "ressources": [
+      {
+        "id": "en-quete-de-sens",
+        "titre": "En quête de sens (Coste, de la Ménardière)",
+        "url": "https://enquetedesens-lefilm.com",
+        "format": "film",
+        "acces": "don libre",
+        "pourquoi": "Le film nommé dans le deck ; streaming à participation libre.",
+        "fiches": ["quete-de-sens"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "note": "lecteur non testé (rendu JS)"
+      },
+      {
+        "id": "ofqa",
+        "titre": "OFQA, « On fait quoi après ? »",
+        "url": null,
+        "format": "vidéo",
+        "acces": "libre",
+        "pourquoi": "Diplômés d'archi qui ont bifurqué (indépendant, artisanat, éco-construction).",
+        "fiches": ["quete-de-sens"],
+        "source": "outils.json (avant B6)",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "episodes": [
           { "ep": "01", "titre": "Architectes indépendants", "personnes": "Jules Nény & Imane Fatmi", "url": "https://youtu.be/aMreB5KdNhY" },
           { "ep": "02", "titre": "Artiste & Maçon", "personnes": "Romane Dutour & Maël Canal", "url": "https://youtu.be/9gpjokx2ndI" },
           { "ep": "03", "titre": "Social & BTP", "personnes": "Célia Berdy & Esilda Perrot", "url": null, "note": "vidéo perdue, doc PDF seulement" },
           { "ep": "04", "titre": "Menuisier & Paysagiste", "personnes": "Adel Mohamedi & Julie Bowie", "url": "https://youtu.be/yKaRQhA3Z6g" },
           { "ep": "05", "titre": "Éco-construction", "personnes": "Edouard Vermès", "url": "https://youtu.be/97bDg1BjeuQ" },
-      { "ep": "06", "titre": "Musicien & Urbaniste", "personnes": "Ruben Madar & Antoine Troccaz", "url": "https://drive.google.com/drive/folders/14g8YBn5bZAy8aIkHzQlOTrTtnWOaqRO3" },
+          { "ep": "06", "titre": "Musicien & Urbaniste", "personnes": "Ruben Madar & Antoine Troccaz", "url": null, "note": "lien en attente d'ouverture du partage" },
-      { "ep": "07", "titre": "AMO & Réemploi", "personnes": "Domitille Chaigne & Clémence Bondon", "url": "https://drive.google.com/file/d/1Q9Za81CElszmMn5n8dBsG0pJkiWmB32c/view" },
+          { "ep": "07", "titre": "AMO & Réemploi", "personnes": "Domitille Chaigne & Clémence Bondon", "url": null, "note": "lien en attente d'ouverture du partage" },
-      { "ep": "08", "titre": "Gouvernance école", "personnes": "Solenn Guével", "url": "https://drive.google.com/drive/folders/1UaLsSyQcJydkXyV71klrY1tv9KgAh-mG" },
+          { "ep": "08", "titre": "Gouvernance école", "personnes": "Solenn Guével", "url": null, "note": "lien en attente d'ouverture du partage" },
           { "ep": "bonus", "titre": "PFE — invitation à faire collectif", "personnes": "Jules Nény & Imane Fatmi", "url": "https://youtu.be/4qTEIC2Lmqw" }
-    ],
+        ]
-    "coalition_ensa_pb": {
-      "titre": "Coalition inter-asso ENSA-PB — victoire salle des enseignants",
-      "description": "Une coalition d'associations étudiantes a obtenu l'usage de la salle des enseignants pour des temps de travail collectif."
       },
-    "ressources_externes": [
       {
-        "id": "drop-the-kutch",
+        "id": "drop-the-kutsch",
-        "icon": "🎧",
+        "titre": "Drop the Kutsch (Sâm Afchar)",
-        "titre": "Podcast Drop the Kutch — Sâm Afchar",
+        "url": "https://podcasts.apple.com/fr/podcast/drop-the-kutsch/id1536280194",
-        "url": "https://podcasts-francais.fr/podcast/drop-the-kutsch",
+        "format": "podcast",
-        "description": "Témoignages de bifurcations post études d'archi. Super taf."
+        "acces": "libre",
+        "pourquoi": "Témoignages d'architectes sortis de l'agence.",
+        "fiches": ["quete-de-sens"],
+        "source": "outils.json (avant B6)",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27"
+      },
+      {
+        "id": "ca-commence-par-moi",
+        "titre": "Ça commence par moi (Julien Vidal), épisode « Mon métier aura du sens »",
+        "url": "https://cacommenceparmoi.org/blog/2024/04/07/2030-glorieuses-111-caroline-sicard-et-julien-vidal-mon-metier-aura-du-sens/",
+        "format": "podcast",
+        "acces": "libre",
+        "pourquoi": "Sens au travail et reconversion, par l'auteur du livre de la sélection.",
+        "fiches": ["quete-de-sens"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27"
+      },
+      {
+        "id": "coalition-ensa-pb",
+        "titre": "Coalition inter-asso ENSA-PB — victoire salle des enseignants",
+        "url": null,
+        "format": "récit",
+        "acces": "libre",
+        "pourquoi": "Une coalition d'associations étudiantes a obtenu l'usage de la salle des enseignants pour des temps de travail collectif.",
+        "fiches": ["quete-de-sens"],
+        "source": "outils.json (avant B6)",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-10-08"
+      },
+      {
+        "id": "regain-habitat-participatif",
+        "titre": "Guide pratique de l'habitat participatif (REGAIN)",
+        "url": "https://www.regain-hg.org/wp-content/uploads/2021/06/REGAIN-GUIDE-HABITAT-PARTICIPATIF-MD.pdf",
+        "format": "guide PDF",
+        "acces": "libre",
+        "pourquoi": "Monter un projet d'habitat participatif, débouché direct pour un architecte.",
+        "fiches": ["ou-habiter"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27"
+      },
+      {
+        "id": "pssm-france",
+        "titre": "PSSM France, premiers secours en santé mentale",
+        "url": "https://www.pssmfrance.fr/",
+        "format": "formation",
+        "acces": "financé selon région",
+        "pourquoi": "Repérer et soutenir un collègue en difficulté.",
+        "fiches": ["sante-mentale", "competences-psychosociales"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27"
+      },
+      {
+        "id": "guide-prevention-manipulation",
+        "titre": "Guide de prévention de la manipulation (Femmes autistes francophones)",
+        "url": "https://femmesautistesfrancophones.com/wp-content/uploads/2018/04/guide-prevention-manipulation.pdf",
+        "format": "guide PDF",
+        "acces": "libre",
+        "pourquoi": "Reconnaître les mécanismes d'emprise, en agence comme ailleurs.",
+        "fiches": ["sante-mentale"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27"
+      },
+      {
+        "id": "revivre-apres-l-emprise",
+        "titre": "Revivre après l'emprise",
+        "url": "https://revivre-apres-lemprise.org/",
+        "format": "association",
+        "acces": "don libre",
+        "pourquoi": "Pairs et ressources pour sortir d'une relation d'emprise ; articles en lecture libre.",
+        "fiches": ["sante-mentale"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27"
+      },
+      {
+        "id": "manuel-auto-coaching-tdah",
+        "titre": "Manuel d'auto-coaching TDAH adulte",
+        "url": "https://www.tdah-adulte.org/TDAH-Manuel-Auto-Coaching.pdf",
+        "format": "guide PDF",
+        "acces": "libre",
+        "pourquoi": "S'organiser avec un TDAH.",
+        "fiches": ["sante-mentale"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "note": "contenu non relu"
+      },
+      {
+        "id": "hypersupers-tdah-france",
+        "titre": "HyperSupers, TDAH France",
+        "url": "https://www.tdah-france.fr/",
+        "format": "association",
+        "acces": "libre",
+        "pourquoi": "Communauté de référence TDAH et haut potentiel ; fiches en lecture libre.",
+        "fiches": ["sante-mentale"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "note": "adhésion facultative, 20-40 €/an"
+      },
+      {
+        "id": "yearcompass",
+        "titre": "YearCompass",
+        "url": "https://booklet.yearcompass.com/fr-FR-YearCompass-booklet-A5-printable.pdf",
+        "format": "livret PDF",
+        "acces": "libre",
+        "pourquoi": "Faire le bilan de son année et se projeter.",
+        "fiches": ["mener-ses-projets"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "note": "licence CC BY-NC-SA 4.0"
+      },
+      {
+        "id": "fma-forum-metiers-archi",
+        "titre": "FMA, Forum des métiers de l'architecture (ENSA Paris-Belleville)",
+        "url": "https://www.paris-belleville.archi.fr/forum-des-metiers-de-larchitecture/",
+        "format": "événement",
+        "acces": "gratuit avec inscription",
+        "pourquoi": "Clarifier son projet après le diplôme.",
+        "fiches": ["mener-ses-projets"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "note": "public restreint : L3, M, jeunes diplômés"
+      },
+      {
+        "id": "vipassana",
+        "titre": "Vipassana (Dhamma.org, S. N. Goenka)",
+        "url": "https://www.dhamma.org/fr",
+        "format": "retraite",
+        "acces": "don libre",
+        "pourquoi": "Introspection longue sans barrière d'argent : aucun frais, financé par les anciens élèves.",
+        "fiches": ["naviguer-avec-soi"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "note": "retraite de 10 jours"
+      },
+      {
+        "id": "plum-village-appli",
+        "titre": "Application Plum Village (Village des Pruniers)",
+        "url": "https://plumvillage.org/mindfulness/mindful-apps",
+        "format": "appli",
+        "acces": "libre",
+        "pourquoi": "Porte gratuite du Village des Pruniers : méditations guidées, 300 enseignements audio, en français.",
+        "fiches": ["naviguer-avec-soi"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27"
+      },
+      {
+        "id": "isha-kriya",
+        "titre": "Isha Kriya (Isha Foundation)",
+        "url": "https://isha.sadhguru.org/en/wisdom/video/isha-kriya-guided-meditation",
+        "format": "vidéo",
+        "acces": "libre",
+        "pourquoi": "Porte gratuite d'« Isha yoga », sans compte.",
+        "fiches": ["naviguer-avec-soi"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "note": "méditation guidée de 12 à 18 minutes"
+      },
+      {
+        "id": "hridaya-yoga",
+        "titre": "Hridaya Yoga, lives et chaîne",
+        "url": "https://www.youtube.com/c/HridayaYoga/videos",
+        "format": "vidéo",
+        "acces": "libre",
+        "pourquoi": "Méditations hebdomadaires en direct, sans passer par les retraites (140-595 €, tarif réduit sur demande).",
+        "fiches": ["naviguer-avec-soi"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27"
+      },
+      {
+        "id": "christophe-andre-meditations",
+        "titre": "Méditations guidées de Christophe André",
+        "url": "https://www.christopheandre.com/meditation-et-spiritualite/",
+        "format": "vidéo",
+        "acces": "libre",
+        "pourquoi": "Pleine conscience en français, par un psychiatre qui a vulgarisé la pratique.",
+        "fiches": ["naviguer-avec-soi"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "note": "audio et vidéo"
+      },
+      {
+        "id": "spf-referentiel-cps",
+        "titre": "Compétences psychosociales, référentiel (Santé publique France)",
+        "url": "https://www.santepubliquefrance.fr/sites/default/files/cadic_files/documents/spf00006442_s1.pdf",
+        "format": "guide PDF",
+        "acces": "libre",
+        "pourquoi": "Le cadre public de référence des compétences psychosociales, celles que la salle du 23/09 a demandé d'apprendre.",
+        "fiches": ["competences-psychosociales", "sante-mentale"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27"
+      },
+      {
+        "id": "cercle-nonviolence-ateliers",
+        "titre": "Cercle de la NonViolence, ateliers gratuits",
+        "url": "https://cercle-nv.com/ateliers-et-webinaires-gratuits/",
+        "format": "atelier",
+        "acces": "gratuit avec inscription",
+        "pourquoi": "Porte gratuite vers la communication non violente.",
+        "fiches": ["competences-psychosociales"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "note": "ateliers en ligne"
+      },
+      {
+        "id": "formation-cnv-famille-positive",
+        "titre": "Formation CNV (La Famille Positive, 16 vidéos)",
+        "url": "https://www.lafamillepositive.com/formation-gratuite-a-la-cnv/",
+        "format": "formation",
+        "acces": "gratuit avec inscription",
+        "pourquoi": "Les fondamentaux de Rosenberg en vidéo.",
+        "fiches": ["competences-psychosociales"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27"
+      },
+      {
+        "id": "universite-du-nous",
+        "titre": "Université du Nous, ressources",
+        "url": "https://universite-du-nous.org/fr_FR/ressources",
+        "format": "fiches",
+        "acces": "libre",
+        "pourquoi": "Gouvernance partagée et intelligence collective, outils de facilitation réutilisables.",
+        "fiches": ["competences-psychosociales"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "note": "licence CC BY-SA"
+      },
+      {
+        "id": "fertiles",
+        "titre": "Fertîles, PACoo' et FACIL'",
+        "url": null,
+        "urls": ["https://fertiles.co/pacoo/", "https://fertiles.co/facilitation/"],
+        "format": "formation",
+        "acces": "prix libre",
+        "pourquoi": "Coopération et facilitation, citées par Jules le 23/09.",
+        "fiches": ["competences-psychosociales"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27",
+        "note": "une place à prix libre par session ; sinon 335-365 €"
+      },
+      {
+        "id": "fora-confiance-en-soi",
+        "titre": "Module « Confiance en soi » (Centre FORA)",
+        "url": "https://centrefora.com/wp-content/uploads/2019/05/Confiance-en-soi_VF.pdf",
+        "format": "guide PDF",
+        "acces": "libre",
+        "pourquoi": "Exercices structurés, par un organisme d'éducation publique.",
+        "fiches": ["competences-psychosociales"],
+        "source": "inventaire S 27/09",
+        "couche": "socle",
+        "statut": "vivant",
+        "verifie_le": "2026-09-27"
       }
     ]
   },
-  "section_5_placeholder": {
+  "contribution": {
-    "titre": "[V2 — Login] Logiciels pro",
+    "texte": "Tu utilises un outil ou une ressource qui mérite d'être ici ?",
-    "description": "Logiciels lourds (Adobe, AutoCAD…) — accès mutualisé. Disponible après création de compte AEP.",
+    "lien": "/proposer?categorie=outils",
-    "status": "bientot-login"
+    "cta": "Proposer une ressource"
-  },
+  }
-  "footer_contribution": "Tu utilises un outil qui mérite d'être ici ? Écris-moi : contact@trans-former.fr"
 }

scripts/check-liens-outils.mjs

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+/**
+ * Contrôle des liens de /outils (B6-M4) — outil de revue, PAS un test : ne fait jamais échouer le build.
+ * Lit public/data/outils.json (toutes les URL, y compris `urls[]` et `episodes[].url`) et
+ * public/data/fmhy-curated.json, fait un GET (redirections suivies, délai 15 s, 4 requêtes en parallèle)
+ * et liste les réponses hors 2xx/3xx.
+ *
+ * Un 403/429 d'un site qui bloque les robots n'est pas un lien mort : lire la liste avant de retirer quoi que ce soit.
+ * Usage : node scripts/check-liens-outils.mjs
+ */
+
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const lire = (nom) => JSON.parse(readFileSync(join(__dirname, '..', 'public', 'data', nom), 'utf8'))
+
+const DELAI_MS = 15000
+const PARALLELE = 4
+const UA = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36'
+
+/** url -> Set des entrées qui la portent. Toute chaîne https:// est prise, quel que soit son champ. */
+const urls = new Map()
+function ajoute(url, qui) {
+  if (!urls.has(url)) urls.set(url, new Set())
+  urls.get(url).add(qui)
+}
+
+/** Titre lisible de l'entrée courante : nom / titre / mot, sinon l'id. */
+const titreDe = (o) => o.nom ?? o.titre ?? o.name ?? o.mot ?? o.id
+
+function parcourt(valeur, fichier, contexte) {
+  if (typeof valeur === 'string') {
+    if (/^https:\/\//i.test(valeur) || /^http:\/\//i.test(valeur)) ajoute(valeur, `${fichier} › ${contexte}`)
+  } else if (Array.isArray(valeur)) {
+    for (const v of valeur) parcourt(v, fichier, contexte)
+  } else if (valeur && typeof valeur === 'object') {
+    // `lien_texte`-like chaînes ne commencent pas par https:// : seules les vraies URL sont retenues.
+    const ctx = titreDe(valeur) ? `${contexte ? contexte + ' › ' : ''}${titreDe(valeur)}` : contexte
+    for (const [, v] of Object.entries(valeur)) parcourt(v, fichier, ctx)
+  }
+}
+
+parcourt(lire('outils.json'), 'outils.json', '')
+parcourt(lire('fmhy-curated.json'), 'fmhy-curated.json', '')
+
+async function verifie(url) {
+  const ctrl = new AbortController()
+  const minuteur = setTimeout(() => ctrl.abort(), DELAI_MS)
+  try {
+    const r = await fetch(url, {
+      method: 'GET',
+      redirect: 'follow',
+      signal: ctrl.signal,
+      headers: { 'user-agent': UA, accept: 'text/html,application/xhtml+xml,*/*;q=0.8', 'accept-language': 'fr-FR,fr;q=0.9,en;q=0.7' },
+    })
+    r.body?.cancel().catch(() => {})
+    return r.status
+  } catch (e) {
+    return e?.name === 'AbortError' ? 'délai' : `erreur (${e?.cause?.code ?? e?.message ?? 'réseau'})`
+  } finally {
+    clearTimeout(minuteur)
+  }
+}
+
+const liste = [...urls.keys()]
+const resultats = new Map()
+let curseur = 0
+async function travailleur() {
+  while (curseur < liste.length) {
+    const url = liste[curseur++]
+    resultats.set(url, await verifie(url))
+  }
+}
+await Promise.all(Array.from({ length: PARALLELE }, travailleur))
+
+const ko = liste.filter((u) => {
+  const c = resultats.get(u)
+  return !(typeof c === 'number' && c >= 200 && c < 400)
+})
+
+console.log(`Contrôle de ${liste.length} URL (GET, délai ${DELAI_MS / 1000} s, ${PARALLELE} en parallèle)\n`)
+if (ko.length) {
+  console.log('code'.padEnd(18) + 'URL  ·  entrée')
+  for (const u of ko) {
+    console.log(String(resultats.get(u)).padEnd(18) + `${u}  ·  ${[...urls.get(u)].join(' | ')}`)
+  }
+}
+console.log(`\n${ko.length} réponse(s) hors 2xx/3xx sur ${liste.length} URL.`)
+// Outil de revue : toujours code de sortie 0.

scripts/test-circuit-breaker.mjs

@@ -128,6 +128,16 @@ try {
     check('journal : lignes sans date signalées', logs.some(([, t]) => t.includes('1 sans date ignorées')))
   }
 
+  // 3bis. Aucune ligne datée : jamais « 0 € vérifié »
+  {
+    const rows = [{ Id: 1, cout_eur: 30 }, { Id: 2, cout_eur: 1 }]
+    const { fetchJson } = fauxNocodb({ schema: ['Id', 'cout_eur'], rows })
+    logs.length = 0
+    const s = await checkBudget({ ...base, fetchJson })
+    check('aucune date : verified=false, pas 0 € vérifié', s.verified === false && s.lignesSansDate === 2)
+    check('aucune date : avertissement « NON vérifié »', logs.some(([niv, t]) => niv === 'warn' && t.includes('NON vérifié')))
+  }
+
   // 4. Pagination : 2 500 lignes du mois à 0,01 € → 25 € → bloqué
   {
     const rows = Array.from({ length: 2500 }, (_, i) => ({ Id: i + 1, cout_eur: 0.01, CreatedAt: '2026-09-20T00:00:00Z' }))

scripts/test-echelles-nav.mjs

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+/**
+ * Test des données de nav S / M / XL (B10-M1).
+ * Charge le VRAI fichier utils/echelles.ts via jiti (même patron que test-submit-libre.mjs) :
+ * chaque route → bon groupe et bon onglet actif, un seul onglet actif par route.
+ * Usage : node scripts/test-echelles-nav.mjs
+ */
+
+import { createJiti } from 'jiti'
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const jiti = createJiti(import.meta.url)
+
+const { ECHELLES, ORDRE_ECHELLES, ECHELLES_CADRE_COURT, echelleDeRoute } = await jiti.import(
+  join(__dirname, '..', 'utils', 'echelles.ts'),
+)
+
+const cases = [
+  // [path, query, groupe attendu, onglet attendu]
+  ['/trouver-du-taf', {}, 'S', 'Jobs'],
+  ['/outils', {}, 'S', 'Outils'],
+  ['/', {}, 'M', "Écosystème d'entraide"],
+  ['/', { vue: 'fiches' }, 'M', "Écosystème d'entraide"],
+  ['/agences', {}, 'M', 'Réseaux AEP'],
+  ['/agences', { vue: 'fiches' }, 'M', 'Réseaux AEP'],
+  ['/codev', {}, 'M', 'Codev'],
+  ['/codev/demo', {}, 'M', 'Codev'],
+  ['/codev/carto', {}, 'M', 'Codev'],
+  ['/media', {}, 'XL', 'Recherche média'],
+  ['/media', { tab: 'visuel' }, 'XL', 'Recherche média'],
+  ['/media', { tab: 'projets' }, 'XL', 'Publications'],
+  ['/manifeste', {}, null, null],
+  ['/a-propos', {}, null, null],
+  ['/proposer', {}, null, null],
+  ['/signaler', {}, null, null],
+  ['/fiche/42', {}, null, null],
+  ['/outilsXYZ', {}, null, null],
+  ['/codevelopper', {}, null, null],
+]
+
+let fail = 0
+for (const [path, query, groupe, onglet] of cases) {
+  const route = { path, query }
+  const r = echelleDeRoute(route)
+  const gotG = r?.echelle ?? null
+  const gotO = r?.onglet.libelle ?? null
+  // Un seul onglet actif sur tout le site pour une route donnée.
+  const actifs = ORDRE_ECHELLES.flatMap((id) => ECHELLES[id].onglets.filter((o) => o.actif(route)))
+  const ok = gotG === groupe && gotO === onglet && actifs.length === (groupe ? 1 : 0)
+  if (!ok) fail++
+  console.log(`${ok ? 'OK  ' : 'FAIL'} ${path}${Object.keys(query).length ? '?' + new URLSearchParams(query) : ''} → ${gotG ?? '∅'} / ${gotO ?? '∅'} (actifs : ${actifs.length})`)
+}
+
+// Ordre et contenu des groupes (directive Jules du 29/09 + arbitrage 1A).
+const attendu = {
+  S: ['Jobs', 'Outils'],
+  M: ["Écosystème d'entraide", 'Réseaux AEP', 'Codev'],
+  XL: ['Recherche média', 'Publications'],
+}
+for (const id of ORDRE_ECHELLES) {
+  const got = ECHELLES[id].onglets.map((o) => o.libelle)
+  const ok = JSON.stringify(got) === JSON.stringify(attendu[id])
+  if (!ok) fail++
+  console.log(`${ok ? 'OK  ' : 'FAIL'} groupe ${id} = ${got.join(' · ')}`)
+}
+
+const cadreOk = ECHELLES_CADRE_COURT === 'Trois échelles, imbriquées. Entrez par celle qui presse.'
+if (!cadreOk) fail++
+console.log(`${cadreOk ? 'OK  ' : 'FAIL'} cadre court = « ${ECHELLES_CADRE_COURT} »`)
+
+const total = cases.length + ORDRE_ECHELLES.length + 1
+console.log(`\n${total - fail}/${total}`)
+process.exit(fail ? 1 : 0)

scripts/test-outils-data.mjs

@@ -0,0 +1,165 @@
+#!/usr/bin/env node
+/**
+ * Test des données de /outils (B6-M1).
+ * Garde-fou pour les ajouts futurs (à la main, par M3, ou par un pipe n8n) :
+ * fiches de l'onglet « Partir de soi », ressources, purge des liens litigieux, URL en https.
+ * Charge le VRAI utils/echelles.ts via jiti (même patron que test-echelles-nav.mjs).
+ * Usage : node scripts/test-outils-data.mjs
+ */
+
+import { createJiti } from 'jiti'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const jiti = createJiti(import.meta.url)
+const { ECHELLES } = await jiti.import(join(__dirname, '..', 'utils', 'echelles.ts'))
+
+const lire = (nom) => JSON.parse(readFileSync(join(__dirname, '..', 'public', 'data', nom), 'utf8'))
+const outils = lire('outils.json')
+const fmhy = lire('fmhy-curated.json')
+
+const LISTE_NOIRE = [
+  'annas-archive', 'z-lib', 'libgen', 'sci-hub', 'mobilism', 'zone-ebook', 'rivestream', 'cineby',
+  'flixer', 'miruro', 'monochrome.tf', 'lucida', 'spotx', 'fitgirl', 'steamrip', '1337x',
+]
+const FORMATS = ['film', 'vidéo', 'podcast', 'guide PDF', 'livret PDF', 'appli', 'retraite', 'atelier', 'formation', 'association', 'fiches', 'événement', 'récit']
+const ACCES = ['libre', 'don libre', 'gratuit avec inscription', 'prix libre', 'financé selon région']
+const SOURCES = ['inventaire S 27/09', 'outils.json (avant B6)']
+
+let n = 0
+const echecs = []
+function verifie(ok, message) {
+  n++
+  if (!ok) echecs.push(message)
+}
+
+/** Parcourt un JSON à tous les niveaux : (chemin, clé, valeur) pour chaque chaîne. */
+function chaines(valeur, chemin, visiteur) {
+  if (typeof valeur === 'string') visiteur(chemin, valeur)
+  else if (Array.isArray(valeur)) valeur.forEach((v, i) => chaines(v, `${chemin}[${i}]`, visiteur))
+  else if (valeur && typeof valeur === 'object') for (const [k, v] of Object.entries(valeur)) chaines(v, `${chemin}.${k}`, visiteur)
+}
+
+// ── Fiches ────────────────────────────────────────────────────
+const p = outils.partir_de_soi
+const fiches = p?.fiches ?? []
+const mots = ECHELLES.S.mots
+verifie(outils.version === 2, 'version doit valoir 2')
+verifie(fiches.length === 7, `7 fiches attendues, ${fiches.length} trouvées`)
+verifie(new Set(fiches.map((f) => f.id)).size === fiches.length, 'ids de fiches non uniques')
+verifie(
+  JSON.stringify(fiches.map((f) => f.mot)) === JSON.stringify(mots),
+  `mots des fiches ≠ ECHELLES.S.mots (dans l'ordre) : ${JSON.stringify(fiches.map((f) => f.mot))}`,
+)
+const idsFiches = new Set(fiches.map((f) => f.id))
+
+// ── Ressources ────────────────────────────────────────────────
+const ressources = p?.ressources ?? []
+const idsRes = new Set()
+const DATE = /^\d{4}-\d{2}-\d{2}$/
+for (const r of ressources) {
+  const nom = `ressource « ${r.id ?? r.titre ?? '?'} »`
+  verifie(typeof r.id === 'string' && r.id && !idsRes.has(r.id), `${nom} : id manquant ou en double`)
+  idsRes.add(r.id)
+  verifie(typeof r.titre === 'string' && r.titre, `${nom} : titre manquant`)
+  verifie(FORMATS.includes(r.format), `${nom} : format « ${r.format} » hors liste`)
+  verifie(ACCES.includes(r.acces), `${nom} : accès « ${r.acces} » hors liste`)
+  verifie(typeof r.pourquoi === 'string' && r.pourquoi, `${nom} : pourquoi manquant`)
+  verifie(Array.isArray(r.fiches) && r.fiches.length > 0, `${nom} : fiches vide`)
+  verifie((r.fiches ?? []).every((id) => idsFiches.has(id)), `${nom} : fiche inconnue dans ${JSON.stringify(r.fiches)}`)
+  verifie(SOURCES.includes(r.source), `${nom} : source « ${r.source} » hors liste`)
+  verifie(['socle', 'actualite'].includes(r.couche), `${nom} : couche « ${r.couche} »`)
+  verifie(['vivant', 'dormant', 'archive'].includes(r.statut), `${nom} : statut « ${r.statut} »`)
+  verifie(DATE.test(r.verifie_le ?? ''), `${nom} : verifie_le « ${r.verifie_le} » n'est pas AAAA-MM-JJ`)
+}
+
+// ── Fiche vide ⇔ sans ressource ───────────────────────────────
+for (const f of fiches) {
+  const nb = ressources.filter((r) => r.fiches?.includes(f.id)).length
+  if (nb === 0) verifie(typeof f.vide === 'string' && f.vide, `fiche « ${f.id} » sans ressource : \`vide\` doit être renseigné`)
+  else verifie(f.vide == null, `fiche « ${f.id} » a ${nb} ressource(s) : \`vide\` doit être nul`)
+}
+
+// ── URL : https partout, rien de la liste noire ───────────────
+for (const [fichier, donnees] of [['outils.json', outils], ['fmhy-curated.json', fmhy]]) {
+  chaines(donnees, fichier, (chemin, s) => {
+    const cle = chemin.split('.').pop().replace(/\[\d+\]$/, '')
+    const estUrl = /^https?:\/\//i.test(s) || ['url', 'urls', 'lien', 'avertissement_lien'].includes(cle)
+    // `lien` de contribution est un chemin interne (/proposer…) : seul le préfixe http est contrôlé.
+    if (/^https?:\/\//i.test(s)) {
+      verifie(s.startsWith('https://'), `${chemin} : URL non https (${s})`)
+      const bas = s.toLowerCase()
+      const hit = LISTE_NOIRE.find((d) => bas.includes(d))
+      verifie(!hit, `${chemin} : domaine de la liste noire « ${hit} » (${s})`)
+    } else if (estUrl && cle !== 'lien' && s) {
+      verifie(false, `${chemin} : URL sans https (${s})`)
+    }
+  })
+}
+
+// Liste noire aussi dans les noms/titres (un lien retiré ne doit pas survivre en texte).
+chaines({ outils, fmhy }, 'données', (chemin, s) => {
+  const bas = s.toLowerCase()
+  verifie(!bas.includes('tantra'), `${chemin} : contient « tantra »`)
+  verifie(!bas.includes('the nest'), `${chemin} : contient « The Nest »`)
+  const hit = ['sci-hub', 'z-library', 'library genesis', "anna's archive", 'fitgirl', 'steamrip', '1337x'].find((d) => bas.includes(d))
+  verifie(!hit, `${chemin} : contient « ${hit} »`)
+})
+
+// ── Structure minimale des autres blocs ───────────────────────
+verifie(Array.isArray(outils.conception?.outils) && outils.conception.outils.length > 0, 'conception.outils vide')
+verifie(
+  (outils.conception?.outils ?? []).every((o) => o.mention && DATE.test(o.verifie_le ?? '')),
+  'conception.outils : `mention` et `verifie_le` obligatoires',
+)
+verifie(Array.isArray(outils.open_source?.rubriques) && outils.open_source.rubriques.every((r) => r.liens?.length > 0), 'open_source.rubriques : une rubrique vide doit disparaître')
+verifie(!!outils.contribution?.texte && !!outils.contribution?.lien && !!outils.contribution?.cta, 'contribution incomplète')
+
+// ── Open source : sélection (B6-M4) ───────────────────────────
+// Chaque lien de la sélection est vérifié par une personne (licence, date) ; la liste noire
+// piraterie s'applique déjà à toute chaîne d'outils.json (voir plus haut), sélection comprise.
+const sel = outils.open_source?.selection
+verifie(!!sel && typeof sel.intention === 'string' && sel.intention, 'open_source.selection : intention manquante')
+verifie(Array.isArray(sel?.rubriques) && sel.rubriques.length >= 1, 'open_source.selection : au moins une rubrique attendue')
+const idsRub = new Set()
+for (const r of sel?.rubriques ?? []) {
+  const rub = `sélection « ${r.id ?? r.titre ?? '?'} »`
+  verifie(typeof r.id === 'string' && r.id && !idsRub.has(r.id), `${rub} : id manquant ou en double`)
+  idsRub.add(r.id)
+  verifie(typeof r.titre === 'string' && r.titre, `${rub} : titre manquant`)
+  verifie(Array.isArray(r.liens) && r.liens.length > 0, `${rub} : rubrique vide`)
+  for (const l of r.liens ?? []) {
+    const nom = `${rub} › ${l.nom ?? '?'}`
+    verifie(typeof l.nom === 'string' && l.nom, `${nom} : nom manquant`)
+    verifie(typeof l.url === 'string' && l.url.startsWith('https://'), `${nom} : url https manquante (${l.url})`)
+    verifie(typeof l.desc === 'string' && l.desc, `${nom} : desc manquante`)
+    verifie(typeof l.licence === 'string' && l.licence, `${nom} : licence manquante`)
+    verifie(DATE.test(l.verifie_le ?? ''), `${nom} : verifie_le « ${l.verifie_le} » n'est pas AAAA-MM-JJ`)
+    const bas = (l.url ?? '').toLowerCase()
+    const hit = LISTE_NOIRE.find((d) => bas.includes(d))
+    verifie(!hit, `${nom} : domaine de la liste noire « ${hit} »`)
+  }
+}
+
+// Aucun doublon d'URL dans tout open_source (sélection + recommandés + rubriques fmhy), à la barre finale et à la casse près.
+const norm = (u) => u.toLowerCase().replace(/^https?:\/\//, '').replace(/^www\./, '').replace(/\/+$/, '')
+const vues = new Map()
+const urlsOS = [
+  ...(sel?.rubriques ?? []).flatMap((r) => (r.liens ?? []).map((l) => [`sélection › ${l.nom}`, l.url])),
+  ...(outils.open_source?.recommandes ?? []).filter((o) => o.url).map((o) => [`recommandé › ${o.titre}`, o.url]),
+  ...(outils.open_source?.rubriques ?? []).flatMap((r) => (r.liens ?? []).map((l) => [`fmhy › ${l.nom}`, l.url])),
+]
+for (const [qui, url] of urlsOS) {
+  const k = norm(url)
+  verifie(!vues.has(k), `open_source : URL en double « ${url} » (${vues.get(k)} et ${qui})`)
+  vues.set(k, qui)
+}
+
+if (echecs.length) {
+  for (const e of echecs) console.log(`FAIL ${e}`)
+  console.log(`\n${n - echecs.length}/${n} vérifications OK — ${echecs.length} échec(s)`)
+  process.exit(1)
+}
+console.log(`${n} vérifications OK`)

scripts/test-vue-fiches.mjs

@@ -0,0 +1,247 @@
+#!/usr/bin/env node
+/**
+ * Tests de la vue fiches (B11-M1) : logique pure de utils/vueFiches.ts et
+ * adaptateurs de composables/useFicheAdapter.ts, chargés tels quels via jiti
+ * (même patron que test-echelles-nav.mjs).
+ * Usage : node scripts/test-vue-fiches.mjs
+ */
+
+import { createJiti } from 'jiti'
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const jiti = createJiti(import.meta.url)
+const V = await jiti.import(join(__dirname, '..', 'utils', 'vueFiches.ts'))
+const A = await jiti.import(join(__dirname, '..', 'composables', 'useFicheAdapter.ts'))
+
+let n = 0
+let fail = 0
+function ok(cond, libelle, detail = '') {
+  n++
+  if (!cond) fail++
+  console.log(`${cond ? 'OK  ' : 'FAIL'} ${libelle}${!cond && detail ? `  → ${detail}` : ''}`)
+}
+const trie = (o) => (o && typeof o === "object" && !Array.isArray(o) ? Object.fromEntries(Object.keys(o).sort().map((k) => [k, trie(o[k])])) : o)
+const eq = (a, b) => JSON.stringify(trie(a)) === JSON.stringify(trie(b))
+
+// ── Données : configuration Entraide, fiches adaptées depuis de vrais Org ──
+const FONCTIONS = ['Juridique', 'Technique', 'Formation', 'Santé mentale']
+const cfg = {
+  dimensions: [
+    { cle: 'fonctions', libelle: 'Fonction', variante: 'fonction', valeurs: FONCTIONS.map((v) => ({ valeur: v, libelle: v })) },
+    { cle: 'echelle', libelle: 'Échelle', variante: 'echelle', valeurs: ['National', 'Régional', 'Local'].map((v) => ({ valeur: v, libelle: v })) },
+  ],
+  tris: ['pertinence', 'nom', 'recent'],
+  groupes: [
+    { cle: 'fonction', libelle: 'Fonction', dimension: 'fonctions', sans: 'Sans fonction' },
+    { cle: 'echelle', libelle: 'Échelle', dimension: 'echelle', sans: 'Sans échelle' },
+    { cle: 'territoire', libelle: 'Territoire', dimension: 'territoire', sans: 'Sans territoire' },
+  ],
+  etats: ['carte', 'mixte', 'fiches'],
+  sousVues: { parametre: 'mode', defaut: 'metropole', valeurs: [{ valeur: 'metropole', libelle: 'Métropole' }, { valeur: 'outremer', libelle: 'Outre-mer' }] },
+}
+
+const orgs = [
+  { Id: 1, nom: 'CNOA', echelle: 'National', tags_fonction: 'Juridique', localisation_ville: 'Paris', latitude: 48.8, longitude: 2.3, description: "Ordre des architectes. Deuxième phrase." },
+  { Id: 2, nom: 'Collectif Fil', echelle: 'Régional', tags_fonction: 'Formation,Juridique', localisation_ville: 'Nantes', latitude: 47.2, longitude: -1.5, description: 'Recherche-action en architecture.' },
+  { Id: 3, nom: 'Écoute Archi', echelle: 'Local', tags_fonction: 'Santé mentale', localisation_ville: 'Fort-de-France', territoire: 'Martinique', latitude: null, longitude: null, description: 'Soutien psychologique.' },
+  { Id: 4, nom: 'Bureau Technique', echelle: 'Régional', tags_fonction: 'Technique', localisation_ville: 'Lyon', latitude: 45.7, longitude: 4.8, submitted_at: '2026-09-01T10:00:00Z' },
+  { Id: 5, nom: 'Atelier sans tag', localisation_ville: 'Rennes', latitude: 48.1, longitude: -1.6 },
+]
+const fiches = orgs.map(A.toMini)
+
+const etat0 = (over = {}) => ({ ...V.lireQuery({}, cfg), ...over })
+const ids = (fs) => fs.map((f) => f.id)
+
+// ── Adaptateurs (M2) ──
+ok(eq(fiches[1].etiquettes, { fonctions: ['Formation', 'Juridique'], echelle: ['Régional'], territoire: ['Métropole'] }), 'org → etiquettes par dimension (fonctions complètes, échelle, territoire)')
+ok(fiches[2].etiquettes.territoire[0] === 'Martinique' && fiches[2].geoloc === false && fiches[2].coords === undefined, 'org DOM sans coordonnées → territoire Martinique, geoloc false, coords absentes')
+ok(eq(fiches[0].coords, [48.8, 2.3]) && fiches[0].resume === 'Ordre des architectes.', 'org → coords et résumé (première phrase) inchangé')
+ok(eq(fiches[1].chips, ['Formation', 'Juridique']) && fiches[1].chipsDimension === 'fonctions' && fiches[1].echelle === 'Régional', 'org → chips et echelle d’affichage inchangés')
+const structure = A.toMini({
+  id: 'f1-rotor', nom: 'Rotor', url: '', pays: 'BE', ville: 'Bruxelles', famille_principale: 1, familles_secondaires: [3],
+  hashtags: ['#reemploi-structurel', '#plateforme-materiaux'], type_principal: 'Coopérative',
+  badges: { centre_ressources: true, mouvement_manifeste: false, contre_pouvoir_spatial: false, f6_recherche_politique: true },
+  description_courte: 'Réemploi des matériaux de construction.', description_longue: '', pensees: [], sources: [], already_in_v1: false, eligible_v2: true,
+  latitude: 50.8, longitude: 4.3,
+})
+ok(eq(structure.etiquettes, { tags: ['reemploi-structurel', 'plateforme-materiaux'], famille: ['1', '3', '6'], pays: ['BE'] }), 'structure → tags sans #, familles principale + secondaires + 6 (badge), pays')
+ok(eq(structure.chips, ['#reemploi-structurel', '#plateforme-materiaux']) && structure.chipsDimension === 'tags', 'structure → chips d’affichage avec # inchangés')
+
+// ── URL ↔ état ──
+const q1 = { vue: 'fiches', q: 'ordre', fonctions: 'Juridique,Formation', echelle: 'Régional', tri: 'nom', groupe: 'fonction', mode: 'outremer', adresse: 'sans' }
+const e1 = V.lireQuery(q1, cfg)
+ok(e1.vue === 'fiches' && e1.q === 'ordre' && eq(e1.filtres, { fonctions: ['Juridique', 'Formation'], echelle: ['Régional'] }) && e1.tri === 'nom' && e1.groupe === 'fonction' && e1.sousVue === 'outremer' && e1.sansAdresse, 'lecture : tous les paramètres de la SPEC §5')
+ok(eq(V.ecrireQuery(e1, cfg), q1), 'aller-retour URL → état → URL identique')
+const e2 = etat0({ vue: 'mixte', filtres: { fonctions: ['Technique'], echelle: [] }, groupe: 'echelle' })
+ok(eq(V.lireQuery(V.ecrireQuery(e2, cfg), cfg), e2), 'aller-retour état → URL → état identique')
+ok(eq(V.ecrireQuery(etat0(), cfg), {}), 'état par défaut → URL vide (sous-vue par défaut non écrite)')
+ok(eq(V.ecrireQuery(etat0({ q: 'x' }), cfg, { territoire: 'Guyane', random: '1', vue: 'carte', q: 'ancien' }), { territoire: 'Guyane', random: '1', q: 'x' }), 'paramètres non gérés (territoire, random) conservés, gérés remplacés')
+
+// Rétrocompatibilité et paramètres invalides
+ok(V.lireQuery({ vue: 'fiches' }, cfg).vue === 'fiches', 'rétrocompat : ?vue=fiches (lien B3 diffusé) → état Fiches')
+ok(V.lireQuery({ mode: 'outremer' }, cfg).sousVue === 'outremer', 'rétrocompat : ?mode=outremer → sous-vue Outre-mer')
+ok(V.lireQuery({}, cfg).vue === null, 'sans vue= → null (défaut par largeur)')
+const inv = V.lireQuery({ vue: 'plein-ecran', tri: 'distance', groupe: 'couleur', mode: 'lune', adresse: 'oui', zzz: '1' }, cfg)
+ok(inv.vue === null && inv.tri === null && inv.groupe === null && inv.sousVue === 'metropole' && inv.sansAdresse === false, 'paramètres invalides ignorés sans erreur (vue, tri, groupe, mode, adresse)')
+ok(eq(V.filtresValides({ fonctions: ['Juridique', 'Astrologie'], echelle: ['Mondial'] }, cfg), { fonctions: ['Juridique'], echelle: [] }), 'valeurs de filtre inconnues ignorées')
+const cfgVide = { ...cfg, dimensions: [{ ...cfg.dimensions[0], valeurs: [] }] }
+ok(eq(V.filtresValides({ fonctions: ['Astrologie'] }, cfgVide), { fonctions: ['Astrologie'] }), 'dimension pas encore chargée : valeurs gardées (lien partagé non perdu)')
+ok(eq(V.lireQuery({ fonctions: ['Juridique,Formation', 'x'], q: ['a', 'b'] }, cfg).filtres.fonctions, ['Juridique', 'Formation']), 'paramètre répété : seule la première occurrence est lue')
+ok(eq(V.lireQuery({ fonctions: ' Juridique ,,Juridique' }, cfg).filtres.fonctions, ['Juridique']), 'espaces, vides et doublons nettoyés')
+
+// ── Filtrage : OU dans une dimension, ET entre ──
+const filtre = (over) => ids(V.filtrerFiches(fiches, etat0(over), cfg))
+ok(eq(filtre({ filtres: { fonctions: ['Juridique', 'Technique'], echelle: [] } }), [1, 2, 4]), 'OU dans une dimension : Juridique OU Technique')
+ok(eq(filtre({ filtres: { fonctions: ['Juridique', 'Technique'], echelle: ['Régional'] } }), [2, 4]), 'ET entre dimensions : (Juridique OU Technique) ET Régional')
+ok(eq(filtre({ filtres: { fonctions: [], echelle: ['National', 'Local'] } }), [1, 3]), 'OU sur la dimension secondaire')
+ok(eq(filtre({ q: 'ecoute' }), [3]), 'recherche insensible aux accents et à la casse (« ecoute » → Écoute)')
+ok(eq(filtre({ q: 'NANTES' }), [2]), 'recherche sur la ville')
+ok(eq(filtre({ q: 'psychologique' }), [3]), 'recherche sur le résumé')
+ok(eq(filtre({ sansAdresse: true }), [3]), 'adresse=sans → seulement les fiches non localisées')
+
+// ── Compteurs ──
+const c = V.compterEtiquettes(fiches, etat0({ filtres: { fonctions: ['Juridique'], echelle: ['Régional'] } }), cfg)
+ok(c.fonctions.Juridique === 1 && c.fonctions.Technique === 1 && c.fonctions.Formation === 1 && c.fonctions['Santé mentale'] === 0, 'compteurs fonction : dans le résultat des AUTRES dimensions (Régional)', JSON.stringify(c.fonctions))
+ok(c.echelle.National === 1 && c.echelle.Régional === 1 && c.echelle.Local === 0, 'compteurs échelle : dans le résultat des autres dimensions (Juridique)', JSON.stringify(c.echelle))
+const cq = V.compterEtiquettes(fiches, etat0({ q: 'paris' }), cfg)
+ok(cq.fonctions.Juridique === 1 && cq.fonctions.Formation === 0, 'compteurs : la recherche s’applique')
+ok(V.nbFiltresActifs(etat0({ filtres: { fonctions: ['A', 'B'], echelle: ['C'] }, sansAdresse: true })) === 4, 'nombre de filtres actifs (pour « Filtrer · n »)')
+
+// ── Tri ──
+ok(V.triEffectif(etat0(), cfg) === 'nom', 'tri par défaut sans filtre : nom')
+ok(V.triEffectif(etat0({ filtres: { fonctions: ['Juridique'], echelle: [] } }), cfg) === 'pertinence', 'tri par défaut avec filtre : pertinence')
+ok(V.triEffectif(etat0({ tri: 'recent', filtres: { fonctions: ['Juridique'], echelle: [] } }), cfg) === 'recent', 'tri explicite prioritaire')
+ok(eq(ids(V.trierFiches(fiches, 'nom', etat0())), [5, 4, 1, 2, 3]), 'tri nom A → Z (« Écoute » rangé à E)')
+const ePert = etat0({ filtres: { fonctions: ['Juridique', 'Formation'], echelle: [] } })
+ok(eq(ids(V.trierFiches(V.filtrerFiches(fiches, ePert, cfg), 'pertinence', ePert)), [2, 1]), 'pertinence : la fiche qui coche le plus d’étiquettes d’abord')
+ok(eq(ids(V.trierFiches(fiches, 'recent', etat0())), [4, 5, 3, 2, 1]), 'récent : date d’abord, puis Id décroissant')
+ok(V.triEffectif(etat0(), { ...cfg, tris: ['pertinence', 'nom'] }) === 'nom', 'Réseaux AEP (sans récent) : défaut nom')
+
+// ── Regroupement ──
+const g = V.regrouper(V.trierFiches(fiches, 'nom', etat0()), cfg.groupes[0], cfg)
+ok(eq(g.map((x) => `${x.libelle}:${ids(x.fiches).join('+')}`), ['Juridique:1', 'Technique:4', 'Formation:2', 'Santé mentale:3', 'Sans fonction:5']), 'groupe fonction : première étiquette, ordre de la dimension, « sans » en dernier', JSON.stringify(g.map((x) => x.libelle)))
+ok(g.reduce((s, x) => s + x.fiches.length, 0) === fiches.length, 'regroupement : chaque fiche une seule fois (compteurs justes)')
+const gt = V.regrouper(fiches, cfg.groupes[2], cfg)
+ok(eq(gt.map((x) => x.libelle), ['Martinique', 'Métropole']), 'groupe territoire (dimension sans chips) : ordre A → Z')
+ok(V.regrouper(fiches, null, cfg).length === 1, 'sans regroupement : un seul bloc')
+ok(eq(ids(V.ordreFiches(g)), [1, 4, 2, 3, 5]), 'ordre fiche à fiche = ordre affiché des groupes (B12)')
+
+// ── Fiche ouverte : URL, fiche à fiche, historique (B12-M2/M3) ──
+ok(V.lireFiche({ fiche: '412' }) === '412' && V.lireFiche({ fiche: 'f1-rotor' }) === 'f1-rotor', 'ouverture par URL : fiche= lu (id numérique ou texte)')
+ok(V.lireFiche({}) === null && V.lireFiche({ fiche: '' }) === null && V.lireFiche({ fiche: '  ' }) === null, 'fiche= absent ou vide → pas de fiche')
+ok(V.lireFiche({ fiche: ['7', '8'] }) === '7', 'fiche= répété → la première valeur')
+const qListe = { vue: 'fiches', fonctions: 'Juridique,Formation', tri: 'nom' }
+ok(eq(V.queryAvecFiche(qListe, 412), { ...qListe, fiche: '412' }), 'queryAvecFiche pose fiche= et garde filtres, tri, vue')
+ok(eq(V.queryAvecFiche({ ...qListe, fiche: '412' }, null), qListe), 'queryAvecFiche(null) retire fiche= et rien d’autre')
+const qEcrite = V.ecrireQuery({ ...V.lireQuery({ ...qListe, fiche: '412' }, cfg), tri: 'pertinence' }, cfg, { ...qListe, fiche: '412' })
+ok(qEcrite.fiche === '412' && qEcrite.tri === 'pertinence', 'un changement de tri garde la fiche ouverte')
+ok(V.empreinteListe({ ...qListe, fiche: '1' }) === V.empreinteListe({ fiche: '9', tri: 'nom', fonctions: 'Juridique,Formation', vue: 'fiches' }), 'empreinte de la liste : indépendante de fiche= et de l’ordre des clés')
+
+const ordre = V.ordreFiches(g) // [1, 4, 2, 3, 5]
+const p = V.positionFiche(ordre, '2')
+ok(p && p.rang === 3 && p.total === 5 && p.precedente.id === 4 && p.suivante.id === 3, '« 3 / 5 » : précédente et suivante dans l’ordre courant')
+ok(V.positionFiche(ordre, 1).precedente === null && V.positionFiche(ordre, 5).suivante === null, 'pas de bouclage aux extrémités')
+const ordreFiltre = V.ordreFiches(V.regrouper(V.filtrerFiches(fiches, etat0({ filtres: { fonctions: ['Juridique'], echelle: [] } }), cfg), null, cfg))
+ok(V.positionFiche(ordreFiltre, '4') === null, 'fiche hors filtres → position null (« hors de vos filtres », sans précédente/suivante)')
+ok(V.positionFiche(ordre, null) === null && V.positionFiche(ordre, '999') === null, 'pas de fiche ou id inconnu → null')
+
+// Historique simulé, avec les mêmes décisions que composables/useVueFiches.ts
+function navigateur(depart) {
+  const pile = [depart]
+  let i = 0
+  let liste = null // listeALOuverture
+  const cur = () => pile[i]
+  return {
+    cur,
+    longueur: () => i + 1,
+    ouvrir(id) {
+      const mode = V.modeOuverture(V.lireFiche(cur()))
+      if (mode === 'push') { liste = V.empreinteListe(cur()); pile.splice(i + 1); pile.push(V.queryAvecFiche(cur(), id)); i++ }
+      else pile[i] = V.queryAvecFiche(cur(), id)
+    },
+    filtrer(q) { pile[i] = q },
+    fermer() {
+      const mode = V.modeFermeture(liste != null, liste === V.empreinteListe(cur()))
+      liste = null
+      if (mode === 'back') i--
+      else pile[i] = V.queryAvecFiche(cur(), null)
+    },
+    retour() { i--; if (V.lireFiche(cur()) == null) liste = null },
+  }
+}
+let nav = navigateur(qListe)
+nav.ouvrir(1); nav.ouvrir(4); nav.ouvrir(2)
+ok(nav.longueur() === 2 && nav.cur().fiche === '2', 'ouvrir puis deux fois « suivante » : une seule entrée d’historique ajoutée')
+nav.retour()
+ok(nav.longueur() === 1 && V.lireFiche(nav.cur()) === null && eq(nav.cur(), qListe), 'retour arrière (téléphone) : la fiche se ferme, la liste et ses filtres restent')
+nav = navigateur(qListe)
+nav.ouvrir(1); nav.fermer()
+ok(nav.longueur() === 1 && eq(nav.cur(), qListe), 'fermer une fiche ouverte depuis la liste : retour en arrière, historique propre')
+nav = navigateur({ ...qListe, fiche: '412' })
+nav.fermer()
+ok(nav.longueur() === 1 && eq(nav.cur(), qListe), 'lien partagé : fermer retire fiche= sur place, sans quitter la page')
+nav = navigateur(qListe)
+nav.ouvrir(1); nav.filtrer({ ...nav.cur(), echelle: 'National' }); nav.fermer()
+ok(nav.cur().echelle === 'National' && V.lireFiche(nav.cur()) === null, 'filtre changé fiche ouverte : fermer garde le nouveau filtre (pas de retour arrière)')
+
+// ── Partir de soi : sept mots, ordre de la slide (B6-M2) ──
+const MOTS = [
+  { id: 'quete-de-sens', mot: 'quête de sens', resume: 'Bifurquer, donner du sens à son métier.' },
+  { id: 'gagner-sa-vie', mot: 'gagner sa vie', resume: 'Créer son activité et en vivre.', vide: 'Rien encore.' },
+  { id: 'sante-mentale', mot: 'santé mentale', resume: 'Repérer, comprendre, se faire accompagner.' },
+  { id: 'naviguer-avec-soi', mot: 'naviguer avec soi', resume: 'Méditation et pratiques d’introspection.' },
+]
+const RESS = [
+  { id: 'film', titre: 'En quête de sens', format: 'film', acces: 'don libre', pourquoi: 'Le film nommé dans le deck.', fiches: ['quete-de-sens'] },
+  { id: 'ofqa', titre: 'OFQA', format: 'vidéo', acces: 'libre', pourquoi: 'Diplômés qui ont bifurqué.', fiches: ['quete-de-sens'] },
+  { id: 'psc', titre: 'Premiers secours en santé mentale', format: 'formation', acces: 'financé selon région', pourquoi: 'Repérer les signes.', fiches: ['sante-mentale'] },
+  { id: 'vipassana', titre: 'Vipassana', format: 'retraite', acces: 'don libre', pourquoi: 'Dix jours de silence.', fiches: ['naviguer-avec-soi'] },
+  { id: 'insight', titre: 'Insight Timer', format: 'appli', acces: 'gratuit avec inscription', pourquoi: 'Méditations guidées.', fiches: ['naviguer-avec-soi', 'sante-mentale'] },
+]
+const parMot = (id) => RESS.filter((r) => r.fiches.includes(id))
+const mots = MOTS.map((m) => A.toMiniMot(m, parMot(m.id)))
+const cfgMots = {
+  dimensions: [
+    { cle: 'format', libelle: 'Format', variante: 'fonction', valeurs: A.valeursRessources(RESS, 'format') },
+    { cle: 'acces', libelle: 'Accès', variante: 'echelle', valeurs: A.valeursRessources(RESS, 'acces') },
+  ],
+  tris: ['ordre', 'pertinence', 'nom'],
+  triDefaut: 'ordre',
+  libellesTri: { ordre: 'Ordre de la slide' },
+  groupes: [],
+  etats: ['carte', 'mixte', 'fiches'],
+}
+const etatM = (query = {}, over = {}) => ({ ...V.lireQuery(query, cfgMots), ...over })
+const sansDefaut = { ...cfgMots, triDefaut: undefined, tris: ['pertinence', 'nom'] }
+
+ok(mots[0].kind === 'mot' && mots[0].nom === 'quête de sens' && eq(mots[0].chips, ['film', 'vidéo']) && mots[0].chipsDimension === 'format' && mots[0].geoloc === true, 'mot → kind mot, nom = le mot, chips = formats, geoloc true (pas de carte géographique)')
+ok(eq(mots[0].etiquettes, { format: ['film', 'video'], acces: ['don-libre', 'libre'] }), 'mot → étiquettes en slug (sans accent, sans espace) pour l’URL', JSON.stringify(mots[0].etiquettes))
+ok(eq(mots[3].etiquettes.acces, ['don-libre', 'gratuit-avec-inscription']) && mots[3].chips.length === 2, 'mot → union des formats et des accès de ses ressources')
+ok(mots[1].resume === 'Créer son activité et en vivre.' && eq(mots[1].etiquettes, { format: [], acces: [] }), 'mot sans ressource (gagner sa vie) → résumé gardé, aucune étiquette')
+ok(A.toMiniMot({ id: 'x', mot: 'x', resume: '', vide: 'Rien encore. Propose.' }, []).resume === 'Rien encore.', 'mot sans résumé → texte « vide » (première phrase)')
+ok(eq(A.valeursRessources(RESS, 'acces').map((v) => v.libelle), ['don libre', 'libre', 'financé selon région', 'gratuit avec inscription']) && A.slugEtiquette('financé selon région') === 'finance-selon-region', 'valeurs de dimension : libellé lisible, valeur en slug, ordre de première apparition')
+const idsM = (q, tri) => ids(V.trierFiches(V.filtrerFiches(mots, etatM(q), cfgMots), tri ?? V.triEffectif(etatM(q), cfgMots), etatM(q)))
+ok(eq(idsM({}), ['quete-de-sens', 'gagner-sa-vie', 'sante-mentale', 'naviguer-avec-soi']), 'tri ordre : l’ordre du tableau d’entrée, pas A → Z')
+ok(eq(ids(V.trierFiches([...mots].reverse(), 'ordre', etatM())), ['naviguer-avec-soi', 'sante-mentale', 'gagner-sa-vie', 'quete-de-sens']), 'tri ordre : stable, suit l’entrée quelle qu’elle soit')
+ok(V.triEffectif(etatM(), cfgMots) === 'ordre', 'triDefaut respecté sans filtre')
+ok(V.triEffectif(etatM({ q: 'vipassana' }), cfgMots) === 'ordre', 'triDefaut respecté avec une recherche seule (pas de filtre d’étiquette)')
+ok(V.triEffectif(etatM({ acces: 'don-libre' }), cfgMots) === 'pertinence', 'pertinence prioritaire dès qu’un filtre est actif, même avec triDefaut')
+ok(V.triEffectif(etatM({ acces: 'don-libre', tri: 'ordre' }), cfgMots) === 'ordre', 'tri explicite (tri=ordre dans l’URL) prioritaire')
+ok(V.lireQuery({ tri: 'ordre' }, cfgMots).tri === 'ordre', 'tri=ordre lu dans l’URL quand la page l’offre')
+ok(V.lireQuery({ tri: 'ordre' }, cfg).tri === null && V.lireQuery({ tri: 'ordre' }, sansDefaut).tri === null, 'tri=ordre ignoré quand la page ne l’offre pas (/ et /agences)')
+ok(V.triEffectif(etatM(), sansDefaut) === 'nom' && V.triEffectif(etat0(), cfg) === 'nom', 'sans triDefaut : comportement inchangé (nom)')
+ok(V.triEffectif(etatM(), { ...cfgMots, triDefaut: 'recent' }) === 'nom', 'triDefaut absent de tris → ignoré')
+ok(eq(idsM({ acces: 'don-libre' }), ['naviguer-avec-soi', 'quete-de-sens']), 'filtre Accès « don libre » : pertinence (ex æquo → A → Z), pas l’ordre de la slide', JSON.stringify(idsM({ acces: 'don-libre' })))
+ok(eq(idsM({ q: 'vipassana' }), ['naviguer-avec-soi']), 'recherche « Vipassana » (titre d’une ressource) → le mot « naviguer avec soi »')
+ok(eq(idsM({ q: 'VIPASSANA' }), ['naviguer-avec-soi']) && eq(idsM({ q: 'quete' }), ['quete-de-sens']), 'recherche insensible à la casse et aux accents')
+const cm = V.compterEtiquettes(mots, etatM({ acces: 'don-libre' }), cfgMots)
+ok(cm.format.film === 1 && cm.format.retraite === 1 && cm.format.formation === 0 && cm.acces['don-libre'] === 2 && cm.acces.libre === 1, 'compteurs : format dans le résultat du filtre Accès, accès dans celui des formats', JSON.stringify(cm))
+const eMot = V.lireQuery({ tab: 'partir-de-soi', acces: 'don-libre', format: 'film,retraite', fiche: 'quete-de-sens' }, cfgMots)
+const qMot = V.ecrireQuery(eMot, cfgMots, { tab: 'partir-de-soi', acces: 'don-libre', fiche: 'quete-de-sens' })
+ok(qMot.tab === 'partir-de-soi' && qMot.fiche === 'quete-de-sens' && qMot.acces === 'don-libre' && qMot.format === 'film,retraite', 'tab= et fiche= survivent à l’écriture des filtres')
+ok(V.queryAvecFiche({ tab: 'partir-de-soi', vue: 'carte' }, 'sante-mentale').tab === 'partir-de-soi' && V.queryAvecFiche({ tab: 'partir-de-soi', fiche: 'x' }, null).tab === 'partir-de-soi', 'tab= survit à l’ouverture et à la fermeture d’une fiche')
+
+console.log(`\n${n - fail}/${n}`)
+process.exit(fail ? 1 : 0)

server/api/chatbot-pensees.post.ts

@@ -89,7 +89,7 @@ export default defineEventHandler(async (event) => {
 
   const query: string = body.query.trim()
   const mode: string = body.mode || 'hybrid'
-  const corpus: string = body.corpus || 'both'
+  const corpus: string = body.corpus || 'pensees'
   const ragUrl: string = (config.ragPeUrl as string) || 'http://localhost:9621'
   const auteurSlug: string | null = body.auteur_slug?.trim().toLowerCase() || null
 

server/utils/circuitBreaker.ts

@@ -113,6 +113,15 @@ export async function checkBudget(config: {
     return { cumulEur: 0, blocked: false, warning: false, verified: false, lignesLues, lignesMois, lignesSansDate }
   }
 
+  // Des lignes, mais aucune datée : on ne sait pas ce qui relève du mois.
+  // Rendre « 0 € vérifié » reproduirait le fail-open silencieux d'avant AF5.
+  if (lignesLues > 0 && lignesSansDate === lignesLues) {
+    console.warn(
+      `[circuitBreaker] budget NON vérifié : ${lignesLues} lignes stats_usage sans timestamp, CreatedAt ni created_at`,
+    )
+    return { cumulEur: 0, blocked: false, warning: false, verified: false, lignesLues, lignesMois, lignesSansDate }
+  }
+
   const status: BudgetStatus = {
     cumulEur,
     blocked: cumulEur >= BUDGET_MAX_EUR,

utils/echelles.ts

@@ -1,10 +1,23 @@
 /**
  * Les trois échelles du deck du 23/09/2026 (conférence AEP), slides 15 à 18.
  * Texte repris mot pour mot : c'est la tête de chaque onglet (directive Jules du 25/09, point 2).
- * Source unique : la future nav S / M / XL (arbitrage n° 1, table R) lira aussi ce fichier.
+ * Source unique : la nav S / M / XL (B10 : NavEchelles, NavTiroir, FilEchelle) lit aussi ce fichier.
+ * Aucun libellé d'échelle ni d'onglet ne se recopie ailleurs.
  */
 export type EchelleId = 'S' | 'M' | 'XL'
 
+/** Ce que la nav lit d'une route : compatible avec `useRoute()` sans en dépendre (testable en node). */
+export interface RouteNav {
+  path: string
+  query?: Record<string, unknown>
+}
+
+export interface OngletNav {
+  libelle: string
+  to: string
+  actif: (route: RouteNav) => boolean
+}
+
 export interface Echelle {
   id: EchelleId
   titre: string
@@ -13,8 +26,13 @@ export interface Echelle {
   phrase: string
   /** Catégorie de /proposer présélectionnée par le lien de contribution. */
   categorieProposer: 'ecosysteme' | 'reseau' | 'jobs' | 'outils' | 'references'
+  /** Onglets du groupe, dans l'ordre de la barre, du menu et du fil d'échelle (B10, directive Jules du 29/09 + arbitrage 1A du 26/09). */
+  onglets: OngletNav[]
 }
 
+const sousChemin = (base: string) => (r: RouteNav) => r.path === base || r.path.startsWith(`${base}/`)
+const surPublications = (r: RouteNav) => r.query?.tab === 'projets'
+
 export const ECHELLES: Record<EchelleId, Echelle> = {
   S: {
     id: 'S',
@@ -31,6 +49,10 @@ export const ECHELLES: Record<EchelleId, Echelle> = {
     ],
     phrase: 'Des ressources, des méthodes, des pairs : matériel et mutualisé.',
     categorieProposer: 'outils',
+    onglets: [
+      { libelle: 'Jobs', to: '/trouver-du-taf', actif: sousChemin('/trouver-du-taf') },
+      { libelle: 'Outils', to: '/outils', actif: sousChemin('/outils') },
+    ],
   },
   M: {
     id: 'M',
@@ -46,6 +68,11 @@ export const ECHELLES: Record<EchelleId, Echelle> = {
     ],
     phrase: "C'est le groupe qui remet un individu debout. L'affinité fait tenir, la confrontation fait avancer.",
     categorieProposer: 'ecosysteme',
+    onglets: [
+      { libelle: "Écosystème d'entraide", to: '/', actif: (r) => r.path === '/' },
+      { libelle: 'Réseaux AEP', to: '/agences', actif: sousChemin('/agences') },
+      { libelle: 'Codev', to: '/codev', actif: sousChemin('/codev') },
+    ],
   },
   XL: {
     id: 'XL',
@@ -61,8 +88,30 @@ export const ECHELLES: Record<EchelleId, Echelle> = {
     ],
     phrase: 'La bibliothèque, les récits, la filiation entre projets.',
     categorieProposer: 'references',
+    onglets: [
+      { libelle: 'Recherche média', to: '/media', actif: (r) => sousChemin('/media')(r) && !surPublications(r) },
+      { libelle: 'Publications', to: '/media?tab=projets', actif: (r) => sousChemin('/media')(r) && surPublications(r) },
+    ],
   },
 }
 
+/** Ordre des groupes dans la barre et le menu. */
+export const ORDRE_ECHELLES: EchelleId[] = ['S', 'M', 'XL']
+
 /** Slide 15, commune aux trois échelles. */
 export const ECHELLES_CADRE = "Trois échelles, imbriquées. Pas un escalier : ça circule dans les deux sens. Entrez par celle qui presse."
+
+/** Version courte de la slide 15 (tête du menu) : première et dernière phrase, tirées du texte ci-dessus. */
+export const ECHELLES_CADRE_COURT = (() => {
+  const phrases = ECHELLES_CADRE.match(/[^.]+\./g) ?? [ECHELLES_CADRE]
+  return phrases.length > 1 ? `${phrases[0].trim()} ${phrases[phrases.length - 1].trim()}` : ECHELLES_CADRE
+})()
+
+/** Groupe de la page courante et son onglet actif, ou null hors groupe (Manifeste, À propos, Proposer, fiche…). */
+export function echelleDeRoute(route: RouteNav): { echelle: EchelleId; onglet: OngletNav } | null {
+  for (const id of ORDRE_ECHELLES) {
+    const onglet = ECHELLES[id].onglets.find((o) => o.actif(route))
+    if (onglet) return { echelle: id, onglet }
+  }
+  return null
+}

utils/liens.ts

@@ -0,0 +1,2 @@
+/** Lien de don (Liberapay), partagé par la barre, le tiroir et À propos. */
+export const SOUTENIR_URL = 'https://liberapay.com/trans-former.fr/donate'

utils/vueFiches.ts

@@ -0,0 +1,374 @@
+/**
+ * vueFiches — B11-M1. Logique pure de la vue fiches (SPEC-vue-fiches §2-§5) :
+ * lecture et écriture de l'URL, filtrage, compteurs, tri, regroupement.
+ * Aucune dépendance à Vue ni au routeur : `composables/useVueFiches.ts`
+ * branche ces fonctions sur la route, `scripts/test-vue-fiches.mjs` les teste.
+ *
+ * Grammaire des filtres : OU dans une dimension, ET entre dimensions.
+ * L'URL est la source de vérité ; un paramètre inconnu ou invalide est ignoré.
+ */
+import type { MiniFiche } from '../composables/useFicheAdapter'
+
+export type EtatVue = 'carte' | 'mixte' | 'fiches'
+export type TriFiches = 'pertinence' | 'nom' | 'recent' | 'ordre'
+
+export const ETATS_VUE: EtatVue[] = ['carte', 'mixte', 'fiches']
+export const LIBELLES_TRI: Record<TriFiches, string> = {
+  pertinence: 'Pertinence',
+  nom: 'A → Z',
+  recent: 'Récentes',
+  ordre: 'Ordre d’origine',
+}
+
+export interface ValeurFiltre {
+  valeur: string
+  libelle: string
+}
+
+export interface DimensionFiltre {
+  /** Paramètre d'URL ET clé de `MiniFiche.etiquettes`. */
+  cle: string
+  libelle: string
+  valeurs: ValeurFiltre[]
+  variante: 'fonction' | 'echelle' | 'posture'
+}
+
+export interface GroupeDef {
+  /** Valeur de `groupe=` dans l'URL. */
+  cle: string
+  libelle: string
+  /** Clé de `MiniFiche.etiquettes` : la fiche va sous sa PREMIÈRE étiquette. */
+  dimension: string
+  /** En-tête des fiches qui n'ont aucune étiquette dans cette dimension. */
+  sans: string
+  /** Libellés et ordre des groupes, sinon ceux de la dimension de filtre, sinon A → Z. */
+  valeurs?: ValeurFiltre[]
+}
+
+export interface SousVuesCarte {
+  /** Paramètre d'URL : `mode` sur `/` (existant), `carte` sur `/agences`. */
+  parametre: string
+  valeurs: ValeurFiltre[]
+  defaut: string
+}
+
+export interface ConfigVueFiches {
+  dimensions: DimensionFiltre[]
+  tris: TriFiches[]
+  groupes: GroupeDef[]
+  etats: EtatVue[]
+  sousVues?: SousVuesCarte
+  /** Tri sans filtre actif (défaut : `nom`). Doit figurer dans `tris`. */
+  triDefaut?: TriFiches
+  /** Libellés de tri propres à la page (sinon `LIBELLES_TRI`). */
+  libellesTri?: Partial<Record<TriFiches, string>>
+}
+
+export interface EtatFiches {
+  /** null = pas de `vue=` dans l'URL : défaut par largeur (Mixte sur ordinateur, Fiches sur téléphone). */
+  vue: EtatVue | null
+  q: string
+  filtres: Record<string, string[]>
+  /** `adresse=sans` : seulement les fiches sans coordonnées (lien « N sans adresse »). */
+  sansAdresse: boolean
+  /** null = défaut automatique (pertinence dès qu'un filtre est actif, sinon nom). */
+  tri: TriFiches | null
+  /** null = aucun regroupement. */
+  groupe: string | null
+  sousVue: string
+}
+
+export interface GroupeRendu {
+  cle: string
+  libelle: string
+  fiches: MiniFiche[]
+}
+
+type Query = Record<string, unknown>
+
+function premiere(v: unknown): string {
+  if (Array.isArray(v)) return typeof v[0] === 'string' ? v[0] : ''
+  return typeof v === 'string' ? v : ''
+}
+
+function liste(v: unknown): string[] {
+  const brut = premiere(v)
+  return [...new Set(brut.split(',').map((s) => s.trim()).filter(Boolean))]
+}
+
+/** Minuscules, sans accents : « Régional » et « regional » se valent. */
+export function normaliser(s: string): string {
+  return s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase()
+}
+
+// ── URL ↔ état ─────────────────────────────────────────────────────────────
+
+export function lireQuery(query: Query, cfg: ConfigVueFiches): EtatFiches {
+  const vueBrute = premiere(query.vue) as EtatVue
+  const triBrut = premiere(query.tri) as TriFiches
+  const groupeBrut = premiere(query.groupe)
+  const sv = cfg.sousVues
+  const svBrute = sv ? premiere(query[sv.parametre]) : ''
+
+  const filtres: Record<string, string[]> = {}
+  for (const d of cfg.dimensions) filtres[d.cle] = liste(query[d.cle])
+
+  return {
+    vue: cfg.etats.includes(vueBrute) ? vueBrute : null,
+    q: premiere(query.q),
+    filtres,
+    sansAdresse: premiere(query.adresse) === 'sans',
+    tri: cfg.tris.includes(triBrut) ? triBrut : null,
+    groupe: cfg.groupes.some((g) => g.cle === groupeBrut) ? groupeBrut : null,
+    sousVue: sv && sv.valeurs.some((v) => v.valeur === svBrute) ? svBrute : (sv?.defaut ?? ''),
+  }
+}
+
+/**
+ * Query à écrire pour un état. Les paramètres que la vue fiches ne gère pas
+ * (`territoire`, `random`…) sont recopiés depuis `base`, `fiche` aussi : un
+ * filtre changé garde la fiche ouverte (elle peut passer « hors de vos filtres »).
+ */
+export function ecrireQuery(etat: EtatFiches, cfg: ConfigVueFiches, base: Query = {}): Record<string, string> {
+  const geres = new Set(['vue', 'q', 'adresse', 'tri', 'groupe', ...cfg.dimensions.map((d) => d.cle)])
+  if (cfg.sousVues) geres.add(cfg.sousVues.parametre)
+
+  const out: Record<string, string> = {}
+  for (const [k, v] of Object.entries(base)) {
+    if (!geres.has(k) && typeof premiere(v) === 'string' && premiere(v) !== '') out[k] = premiere(v)
+  }
+  if (etat.vue) out.vue = etat.vue
+  if (etat.q.trim()) out.q = etat.q
+  for (const d of cfg.dimensions) {
+    const vals = etat.filtres[d.cle] ?? []
+    if (vals.length) out[d.cle] = vals.join(',')
+  }
+  if (etat.sansAdresse) out.adresse = 'sans'
+  if (etat.tri) out.tri = etat.tri
+  if (etat.groupe) out.groupe = etat.groupe
+  if (cfg.sousVues && etat.sousVue && etat.sousVue !== cfg.sousVues.defaut) {
+    out[cfg.sousVues.parametre] = etat.sousVue
+  }
+  return out
+}
+
+/**
+ * Ne garde que les valeurs connues de chaque dimension. Une dimension dont la
+ * liste de valeurs est encore vide (données pas chargées) garde tout : le
+ * filtre s'appliquera dès l'arrivée des données, sans perdre le lien partagé.
+ */
+export function filtresValides(filtres: Record<string, string[]>, cfg: ConfigVueFiches): Record<string, string[]> {
+  const out: Record<string, string[]> = {}
+  for (const d of cfg.dimensions) {
+    const vals = filtres[d.cle] ?? []
+    out[d.cle] = d.valeurs.length ? vals.filter((v) => d.valeurs.some((x) => x.valeur === v)) : vals
+  }
+  return out
+}
+
+export function nbFiltresActifs(etat: EtatFiches): number {
+  return Object.values(etat.filtres).reduce((n, v) => n + v.length, 0) + (etat.sansAdresse ? 1 : 0)
+}
+
+// ── Filtrage ───────────────────────────────────────────────────────────────
+
+function porte(f: MiniFiche, dimension: string, valeur: string): boolean {
+  return (f.etiquettes?.[dimension] ?? []).includes(valeur)
+}
+
+export function correspondRecherche(f: MiniFiche, q: string): boolean {
+  const n = normaliser(q.trim())
+  if (!n) return true
+  return [f.nom, f.ville, f.resume, f.texte].some((t) => !!t && normaliser(t).includes(n))
+}
+
+/**
+ * Fiches qui passent la recherche, `adresse=sans` et les filtres de toutes les
+ * dimensions sauf `ignorer` (sert aux compteurs). OU dans une dimension, ET entre.
+ */
+export function filtrerFiches(
+  fiches: MiniFiche[],
+  etat: EtatFiches,
+  cfg: ConfigVueFiches,
+  ignorer?: string,
+): MiniFiche[] {
+  return fiches.filter((f) => {
+    if (etat.sansAdresse && f.geoloc) return false
+    if (!correspondRecherche(f, etat.q)) return false
+    for (const d of cfg.dimensions) {
+      if (d.cle === ignorer) continue
+      const vals = etat.filtres[d.cle] ?? []
+      if (vals.length && !vals.some((v) => porte(f, d.cle, v))) return false
+    }
+    return true
+  })
+}
+
+/**
+ * Compteur de chaque chip : fiches qui portent cette étiquette parmi celles que
+ * laissent passer la recherche et les AUTRES dimensions. Une chip active affiche
+ * donc combien de fiches elle apporte, une chip inactive combien on en aurait
+ * en la cochant seule dans sa dimension ; 0 = chip grisée.
+ */
+export function compterEtiquettes(
+  fiches: MiniFiche[],
+  etat: EtatFiches,
+  cfg: ConfigVueFiches,
+): Record<string, Record<string, number>> {
+  const out: Record<string, Record<string, number>> = {}
+  for (const d of cfg.dimensions) {
+    const base = filtrerFiches(fiches, etat, cfg, d.cle)
+    const c: Record<string, number> = {}
+    for (const v of d.valeurs) c[v.valeur] = 0
+    for (const f of base) for (const v of f.etiquettes?.[d.cle] ?? []) if (v in c) c[v]++
+    out[d.cle] = c
+  }
+  return out
+}
+
+// ── Tri ────────────────────────────────────────────────────────────────────
+
+export function triEffectif(etat: EtatFiches, cfg: ConfigVueFiches): TriFiches {
+  if (etat.tri) return etat.tri
+  const filtreEtiquette = Object.values(etat.filtres).some((v) => v.length > 0)
+  if (filtreEtiquette && cfg.tris.includes('pertinence')) return 'pertinence'
+  if (cfg.triDefaut && cfg.tris.includes(cfg.triDefaut)) return cfg.triDefaut
+  return cfg.tris.includes('nom') ? 'nom' : cfg.tris[0] ?? 'nom'
+}
+
+/** Nombre d'étiquettes cochées que porte la fiche. */
+export function pertinence(f: MiniFiche, etat: EtatFiches): number {
+  let s = 0
+  for (const [dim, vals] of Object.entries(etat.filtres)) for (const v of vals) if (porte(f, dim, v)) s++
+  return s
+}
+
+const collator = new Intl.Collator('fr', { sensitivity: 'base', numeric: true })
+
+function parNom(a: MiniFiche, b: MiniFiche): number {
+  return collator.compare(a.nom ?? '', b.nom ?? '')
+}
+
+function idNum(f: MiniFiche): number {
+  const n = Number(f.id)
+  return Number.isFinite(n) ? n : -Infinity
+}
+
+export function trierFiches(fiches: MiniFiche[], tri: TriFiches, etat: EtatFiches): MiniFiche[] {
+  const copie = [...fiches]
+  if (tri === 'ordre') return copie // ordre du tableau d'entrée (déjà filtré, jamais réordonné)
+  if (tri === 'nom') return copie.sort(parNom)
+  if (tri === 'pertinence') {
+    const score = new Map(copie.map((f) => [f, pertinence(f, etat)]))
+    return copie.sort((a, b) => score.get(b)! - score.get(a)! || parNom(a, b))
+  }
+  // récent : date décroissante, puis Id décroissant (Entraide : Id = ordre d'arrivée)
+  return copie.sort((a, b) => {
+    if (a.date && b.date && a.date !== b.date) return a.date < b.date ? 1 : -1
+    if (!!a.date !== !!b.date) return a.date ? -1 : 1
+    return idNum(b) - idNum(a) || parNom(a, b)
+  })
+}
+
+// ── Regroupement ───────────────────────────────────────────────────────────
+
+/**
+ * Une fiche va sous sa PREMIÈRE étiquette de la dimension (sinon le compteur
+ * de groupe ment). Ordre des groupes : celui de `def.valeurs`, sinon de la
+ * dimension de filtre, sinon A → Z ; « sans » en dernier. L'ordre des fiches
+ * dans chaque groupe est celui reçu (déjà trié).
+ */
+export function regrouper(fiches: MiniFiche[], def: GroupeDef | null, cfg: ConfigVueFiches): GroupeRendu[] {
+  if (!def) return [{ cle: '', libelle: '', fiches }]
+  const ref = def.valeurs ?? cfg.dimensions.find((d) => d.cle === def.dimension)?.valeurs ?? []
+  const libelle = (v: string) => ref.find((x) => x.valeur === v)?.libelle ?? v
+
+  const parCle = new Map<string, MiniFiche[]>()
+  for (const f of fiches) {
+    const cle = f.etiquettes?.[def.dimension]?.[0] ?? ''
+    if (!parCle.has(cle)) parCle.set(cle, [])
+    parCle.get(cle)!.push(f)
+  }
+  const rang = (cle: string) => {
+    if (cle === '') return Number.MAX_SAFE_INTEGER
+    const i = ref.findIndex((x) => x.valeur === cle)
+    return i === -1 ? ref.length : i
+  }
+  return [...parCle.keys()]
+    .sort((a, b) => rang(a) - rang(b) || collator.compare(libelle(a), libelle(b)))
+    .map((cle) => ({ cle, libelle: cle === '' ? def.sans : libelle(cle), fiches: parCle.get(cle)! }))
+}
+
+/** Ordre de lecture courant (filtres + tri + regroupement) : le fiche à fiche de B12 le suit. */
+export function ordreFiches(groupes: GroupeRendu[]): MiniFiche[] {
+  return groupes.flatMap((g) => g.fiches)
+}
+
+// ── Fiche ouverte (B12) ────────────────────────────────────────────────────
+
+/** `fiche=` de l'URL ; null si absent ou vide. L'id reste une chaîne (Entraide : nombre, Réseaux : `f1-rotor`). */
+export function lireFiche(query: Query): string | null {
+  const v = premiere(query.fiche).trim()
+  return v || null
+}
+
+/** Query avec `fiche=` posé (id) ou retiré (null), tout le reste recopié tel quel. */
+export function queryAvecFiche(query: Query, id: string | number | null): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const [k, v] of Object.entries(query)) {
+    if (k !== 'fiche' && premiere(v) !== '') out[k] = premiere(v)
+  }
+  if (id != null && String(id) !== '') out.fiche = String(id)
+  return out
+}
+
+export interface PositionFiche {
+  /** Rang dans l'ordre courant, de 1 à total. */
+  rang: number
+  total: number
+  precedente: MiniFiche | null
+  suivante: MiniFiche | null
+}
+
+/**
+ * Place de la fiche dans l'ordre courant (filtres + tri + regroupement).
+ * null = fiche hors de l'ordre courant (« hors de vos filtres ») : pas de
+ * précédente ni de suivante. Pas de bouclage aux extrémités.
+ */
+export function positionFiche(ordre: MiniFiche[], id: string | number | null): PositionFiche | null {
+  if (id == null) return null
+  const i = ordre.findIndex((f) => String(f.id) === String(id))
+  if (i === -1) return null
+  return {
+    rang: i + 1,
+    total: ordre.length,
+    precedente: i > 0 ? ordre[i - 1] : null,
+    suivante: i < ordre.length - 1 ? ordre[i + 1] : null,
+  }
+}
+
+/**
+ * Historique (SPEC §5) : OUVRIR une fiche depuis la liste ajoute une entrée
+ * (le retour du téléphone la referme) ; passer d'une fiche à l'autre la
+ * remplace (le retour ne rejoue pas les vingt fiches parcourues).
+ */
+export function modeOuverture(ficheCourante: string | null): 'push' | 'replace' {
+  return ficheCourante == null ? 'push' : 'replace'
+}
+
+/**
+ * FERMER : si l'entrée a été ajoutée par cette page ET que la liste derrière
+ * n'a pas changé depuis (mêmes filtres, tri, vue), on revient en arrière :
+ * l'historique reste propre. Sinon (lien partagé, rechargement, filtre changé
+ * fiche ouverte), on retire `fiche=` sur place : un retour arrière aurait
+ * défait les filtres choisis entre-temps.
+ */
+export function modeFermeture(ouverteParLaPage: boolean, listeInchangee: boolean): 'back' | 'replace' {
+  return ouverteParLaPage && listeInchangee ? 'back' : 'replace'
+}
+
+/** Empreinte de la liste derrière la fiche : la query sans `fiche=`, clés triées. */
+export function empreinteListe(query: Query): string {
+  const q = queryAvecFiche(query, null)
+  return Object.keys(q).sort().map((k) => `${k}=${q[k]}`).join('&')
+}