From dfbac7dd12c58331efc61ae1024abf271a668d1f Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Thu, 8 Oct 2026 16:56:18 +0200
Subject: [PATCH] feat(outils): Partir de soi en vue fiches, graphe des sept
 mots (B6-M2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le 3e sous-onglet de /outils remplace le rendu provisoire par VueFiches
(état Mixte : liste des mots, graphe SVG statique, fiche d'un mot avec ses
ressources). L'en-tête se compacte sur cet onglet, la vue prend la hauteur.

Co-Authored-By: Claude Sonnet <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0136n5xMLHuaBDLcPJYCDjRW
---
 components/GrapheMots.vue        | 314 +++++++++++++++++++++++++++++++
 components/OutilsPartirDeSoi.vue | 225 ++++++++++++++++++++++
 pages/outils.vue                 | 187 +++++-------------
 3 files changed, 588 insertions(+), 138 deletions(-)
 create mode 100644 components/GrapheMots.vue
 create mode 100644 components/OutilsPartirDeSoi.vue

diff --git a/components/GrapheMots.vue b/components/GrapheMots.vue
new file mode 100644
index 0000000..f4afe83
--- /dev/null
+++ b/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>
diff --git a/components/OutilsPartirDeSoi.vue b/components/OutilsPartirDeSoi.vue
new file mode 100644
index 0000000..fe93cd1
--- /dev/null
+++ b/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>
diff --git a/pages/outils.vue b/pages/outils.vue
index c4447c8..45853c6 100644
--- a/pages/outils.vue
+++ b/pages/outils.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="outils-page">
+  <div class="outils-page" :class="{ 'outils-page--vue': vueFiches }">
 
     <!-- ══════════════════════ EN-TÊTE PAGE ══════════════════════ -->
     <header class="outils-header">
@@ -9,9 +9,13 @@
         </div>
         <div class="outils-header__body">
           <h1 class="outils-header__title">Outils</h1>
-          <EchelleTete echelle="S" :contribuer="false" />
-          <p v-if="outils?.intro" class="outils-header__intro">{{ outils.intro }}</p>
+          <!-- Partir de soi : la vue fiches prend la hauteur, l'en-tête se compacte (les sept mots sont dans le graphe) -->
+          <EchelleTete v-if="!vueFiches" echelle="S" :contribuer="false" />
+          <p v-if="outils?.intro && !vueFiches" class="outils-header__intro">{{ outils.intro }}</p>
         </div>
+        <NuxtLink v-if="vueFiches && outils?.contribution" :to="outils.contribution.lien" class="outils-header__proposer">
+          {{ outils.contribution.cta }}
+        </NuxtLink>
       </div>
     </header>
 
@@ -44,6 +48,7 @@
     <main
       id="outils-panneau"
       class="outils-main"
+      :class="{ 'outils-main--vue': vueFiches }"
       role="tabpanel"
       :aria-labelledby="`outils-tab-${tab}`"
     >
@@ -159,57 +164,11 @@
         </section>
       </template>
 
-      <!-- ══════════════ ONGLET 3 — Partir de soi (rendu provisoire, M2 le remplace par VueFiches) ══════════════ -->
-      <template v-else>
-        <p class="outils-intention">{{ outils.partir_de_soi.intention }}</p>
+      <!-- ══════════════ ONGLET 3 — Partir de soi : la vue fiches (B6-M2) ══════════════ -->
+      <OutilsPartirDeSoi v-else :data="outils.partir_de_soi" />
 
-        <section
-          v-for="f in outils.partir_de_soi.fiches"
-          :id="f.id"
-          :key="f.id"
-          class="outils-section fiche-s"
-          :aria-labelledby="`titre-${f.id}`"
-        >
-          <h2 :id="`titre-${f.id}`" class="outils-section__title">{{ f.mot }}</h2>
-          <p class="fiche-s__resume">{{ f.resume }}</p>
-          <p v-if="f.vide" class="fiche-s__vide">{{ f.vide }}</p>
-          <ul v-else class="ressources">
-            <li v-for="r in ressourcesDe(f.id)" :key="r.id" class="ressource">
-              <p class="ressource__titre">
-                <a v-if="r.url" :href="r.url" target="_blank" rel="noopener noreferrer">{{ r.titre }}</a>
-                <template v-else>{{ r.titre }}</template>
-              </p>
-              <p class="ressource__meta">{{ r.format }} · {{ r.acces }}</p>
-              <p class="ressource__pourquoi">{{ r.pourquoi }}</p>
-              <p v-if="r.urls?.length" class="ressource__liens">
-                <template v-for="(u, i) in r.urls" :key="u">
-                  <span v-if="i > 0"> · </span>
-                  <a :href="u" target="_blank" rel="noopener noreferrer">{{ u.replace(/^https:\/\//, '') }}</a>
-                </template>
-              </p>
-              <p v-if="r.note" class="ressource__note">{{ r.note }}</p>
-              <ul v-if="r.episodes?.length" class="ofqa-list">
-                <li v-for="ep in r.episodes" :key="ep.ep" class="ofqa-list__item">
-                  <component
-                    :is="ep.url ? 'a' : 'span'"
-                    v-bind="ep.url ? { href: ep.url, target: '_blank', rel: 'noopener noreferrer' } : {}"
-                    class="ofqa-list__link"
-                    :class="{ 'ofqa-list__link--disabled': !ep.url }"
-                  >
-                    <span class="ofqa-list__ep">EP/{{ ep.ep }}</span>
-                    <span class="ofqa-list__titre">{{ ep.titre }}</span>
-                    <span class="ofqa-list__personnes">— {{ ep.personnes }}</span>
-                    <span v-if="ep.note" class="ofqa-list__note">({{ ep.note }})</span>
-                  </component>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </section>
-      </template>
-
-      <!-- ══════════════ CONTRIBUTION (les 3 onglets) ══════════════ -->
-      <footer v-if="outils?.contribution" class="outils-contribution">
+      <!-- ══════════════ CONTRIBUTION (onglets 1 et 2 ; sur le 3e, le lien est dans l'en-tête) ══════════════ -->
+      <footer v-if="outils?.contribution && !vueFiches" class="outils-contribution">
         <p class="outils-contribution__texte">{{ outils.contribution.texte }}</p>
         <NuxtLink :to="outils.contribution.lien" class="outils-contribution__cta">
           {{ outils.contribution.cta }}
@@ -242,8 +201,8 @@ watch(() => route.query.tab, (q) => { tab.value = lireTab(q) })
 const { data: outils } = await useFetch<any>('/data/outils.json')
 const { data: fmhyData, pending: fmhyPending, error: fmhyError } = await useFetch<any>('/data/fmhy-curated.json')
 
-const ressourcesDe = (ficheId: string) =>
-  (outils.value?.partir_de_soi?.ressources ?? []).filter((r: any) => r.fiches?.includes(ficheId))
+// Partir de soi : la vue fiches remplit la hauteur sous la barre d'onglets (pas de défilement de page).
+const vueFiches = computed(() => tab.value === 'partir-de-soi' && !!outils.value)
 
 // Flèches ← → (+ Début / Fin) : on se déplace et on active, comme un tablist à activation automatique.
 const tablistRef = ref<HTMLElement | null>(null)
@@ -559,89 +518,6 @@ useSeoMeta({
   margin: 0.5rem 0 -0.5rem;
 }
 
-/* ── Partir de soi (provisoire) ─────────────────────────────── */
-.fiche-s { gap: var(--space-sm); }
-
-.fiche-s__resume {
-  font-size: 0.88rem;
-  line-height: 1.6;
-  margin: 0;
-  max-width: 70ch;
-  color: color-mix(in srgb, var(--text) 78%, transparent);
-}
-
-.fiche-s__vide {
-  font-size: 0.86rem;
-  line-height: 1.6;
-  margin: 0;
-  padding: 0.75rem 1rem;
-  border: 1.5px dashed var(--border-strong);
-  border-radius: var(--radius-md);
-  max-width: 70ch;
-}
-
-.ressources {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-}
-
-.ressource { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.ressource p { margin: 0; overflow-wrap: anywhere; }
-.ressource__titre { font-size: 0.92rem; font-weight: var(--fw-semibold); }
-.ressource__titre a, .ressource__liens a { color: var(--nav-primary-solid); }
-.ressource__meta { font-size: 0.78rem; color: color-mix(in srgb, var(--text) 78%, transparent); }
-.ressource__pourquoi { font-size: 0.84rem; line-height: 1.5; }
-.ressource__liens { font-size: 0.82rem; }
-.ressource__note { font-size: 0.78rem; font-style: italic; color: color-mix(in srgb, var(--text) 78%, transparent); }
-
-/* ── Liste OFQA ─────────────────────────────────────────────── */
-.ofqa-list {
-  list-style: none;
-  padding: 0;
-  margin: var(--space-xs) 0 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.ofqa-list__link {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-  padding: 3px 6px;
-  border-radius: var(--radius-sm);
-  font-size: 0.84rem;
-  text-decoration: none;
-  color: var(--text);
-}
-
-.ofqa-list__link:not(.ofqa-list__link--disabled):hover {
-  background: var(--bg-alt);
-  color: var(--nav-primary-solid);
-  text-decoration: underline;
-}
-
-.ofqa-list__link--disabled { cursor: default; }
-
-.ofqa-list__ep {
-  font-family: var(--font-mono, 'JetBrains Mono', 'Courier New', monospace);
-  font-size: 0.75rem;
-  font-weight: var(--fw-semibold);
-  flex-shrink: 0;
-  min-width: 4.5rem;
-  color: color-mix(in srgb, var(--text) 78%, transparent);
-}
-
-.ofqa-list__titre { font-weight: var(--fw-medium); }
-.ofqa-list__personnes,
-.ofqa-list__note { font-size: 0.8rem; color: color-mix(in srgb, var(--text) 78%, transparent); }
-.ofqa-list__note { font-style: italic; }
-
 /* ── Logiciels pro (placeholder) ────────────────────────────── */
 .outils-section--placeholder { opacity: 0.8; }
 
@@ -714,10 +590,45 @@ useSeoMeta({
   outline-offset: 2px;
 }
 
+/* ── Partir de soi : la vue fiches remplit la hauteur du conteneur de défilement (app.vue) ── */
+.outils-page--vue {
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.outils-page--vue .outils-header {
+  flex-shrink: 0;
+  margin: 0;
+  padding: var(--space-xs) var(--space-md) 0;
+}
+.outils-page--vue .outils-header__inner { align-items: center; }
+.outils-page--vue .outils-header__icon-wrap { width: 2rem; height: 2rem; padding: 0.4rem; }
+.outils-page--vue .outils-header__title { font-size: 1.25rem; margin: 0; }
+.outils-page--vue .outils-header__body { flex: 1 1 auto; }
+.outils-page--vue .outils-tabs { flex-shrink: 0; margin: 0; padding: 0 var(--space-md); }
+.outils-main--vue { flex: 1 1 0; min-height: 0; gap: 0; }
+
+.outils-header__proposer {
+  flex-shrink: 0;
+  font-size: 0.85rem;
+  font-weight: var(--fw-semibold);
+  color: var(--nav-primary-solid);
+  text-underline-offset: 2px;
+}
+.outils-header__proposer:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
+
 /* ── Mobile ─────────────────────────────────────────────────── */
 @media (max-width: 640px) {
   .outils-page { padding: var(--space-lg) var(--space-md) 4rem; }
   .outils-header__inner { flex-direction: column; gap: var(--space-sm); }
+  .outils-page--vue { padding: 0; }
+  .outils-page--vue .outils-header__inner { flex-direction: row; gap: var(--space-sm); }
+  .outils-page--vue .outils-header__icon-wrap { display: none; }
   .outils-header__title { font-size: 1.4rem; }
   .outil-cards-grid { grid-template-columns: 1fr; }
   .outils-section--fmhy { padding: 1.25rem 1rem; }