diff --git a/components/SimulateurFeature.vue b/components/SimulateurFeature.vue
index b93fbe4..4610b51 100644
--- a/components/SimulateurFeature.vue
+++ b/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;
diff --git a/pages/outils.vue b/pages/outils.vue
index a58c07c..c4447c8 100644
--- a/pages/outils.vue
+++ b/pages/outils.vue
@@ -7,48 +7,74 @@
         <div class="outils-header__icon-wrap" aria-hidden="true">
           <img src="/icons/outils-wrench.svg" alt="" class="outils-header__icon" />
         </div>
-        <div>
+        <div class="outils-header__body">
           <h1 class="outils-header__title">Outils</h1>
           <EchelleTete echelle="S" :contribuer="false" />
-          <p class="outils-header__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.
-          </p>
+          <p v-if="outils?.intro" class="outils-header__intro">{{ outils.intro }}</p>
         </div>
       </div>
     </header>
 
-    <main class="outils-main">
+    <!-- ══════════════════════ SOUS-ONGLETS (toujours visibles) ══════════════════════ -->
+    <div
+      ref="tablistRef"
+      class="outils-tabs"
+      role="tablist"
+      aria-label="Rubriques de la page Outils"
+      @keydown="onTabKeydown"
+    >
+      <NuxtLink
+        v-for="t in TABS"
+        :id="`outils-tab-${t.id}`"
+        :key="t.id"
+        :to="{ query: { tab: t.id } }"
+        replace
+        role="tab"
+        class="outils-tab"
+        :class="{ 'outils-tab--actif': tab === t.id }"
+        :aria-selected="tab === t.id ? 'true' : 'false'"
+        aria-controls="outils-panneau"
+        :tabindex="tab === t.id ? 0 : -1"
+      >
+        <span class="outils-tab__long">{{ t.libelle }}</span>
+        <span class="outils-tab__court" aria-hidden="false">{{ t.court }}</span>
+      </NuxtLink>
+    </div>
 
-      <!-- ══════════════ SECTION 1 — Simulateurs métier ══════════════ -->
-      <section class="outils-section outils-section--simulateurs" aria-labelledby="sec-simulateurs">
-        <h2 id="sec-simulateurs" class="outils-section__title">
-          <span aria-hidden="true">🧮</span> Simulateurs métier
-        </h2>
-        <p class="outils-section__subtitle">Créés par AEP — outils de calcul situés.</p>
+    <main
+      id="outils-panneau"
+      class="outils-main"
+      role="tabpanel"
+      :aria-labelledby="`outils-tab-${tab}`"
+    >
+      <p v-if="!outils" class="outils-etat">Chargement…</p>
 
-        <div class="simu-grid">
-          <SimulateurFeature
-            v-for="s in outils?.simulateurs"
-            :key="s.id"
-            :icon="s.icon"
-            :titre="s.titre"
-            :url="s.url"
-            :description="s.description"
-            :cta="s.cta"
-            :tag="s.tag"
-          />
-        </div>
+      <!-- ══════════════ ONGLET 1 — Outils de conception ══════════════ -->
+      <template v-else-if="tab === 'conception'">
+        <p class="outils-intention">{{ outils.conception.intention }}</p>
 
-        <!-- Inspirations -->
-        <div v-if="outils?.simulateurs_inspirations?.length" class="simu-inspirations">
-          <p class="simu-inspirations__label">Inspiration externe</p>
+        <section class="outils-section" aria-labelledby="sec-simulateurs">
+          <h2 id="sec-simulateurs" class="outils-section__title">Simulateurs</h2>
+          <div class="simu-grid">
+            <SimulateurFeature
+              v-for="s in outils.conception.outils"
+              :key="s.id"
+              :icon="s.icon"
+              :titre="s.titre"
+              :url="s.url"
+              :description="s.description"
+              :cta="s.cta"
+              :tag="s.tag"
+              :mention="s.mention"
+            />
+          </div>
+        </section>
+
+        <section v-if="outils.conception.inspirations?.length" class="outils-section" aria-labelledby="sec-inspirations">
+          <h2 id="sec-inspirations" class="outils-section__title">Inspiration externe</h2>
           <div class="outil-cards-grid">
             <OutilCard
-              v-for="s in outils.simulateurs_inspirations"
+              v-for="s in outils.conception.inspirations"
               :key="s.id"
               :icon="s.icon"
               :titre="s.titre"
@@ -57,299 +83,187 @@
               :tag="s.tag"
             />
           </div>
-        </div>
-      </section>
+        </section>
+      </template>
 
-      <!-- ══════════════ SECTION 2 — Open source recommandés ══════════════ -->
-      <section class="outils-section outils-section--opensource" aria-labelledby="sec-opensource">
-        <h2 id="sec-opensource" class="outils-section__title">
-          <span aria-hidden="true">🔧</span> Outils tech open source
-        </h2>
-        <p class="outils-section__subtitle">Quelques recommandations directes. Le cœur de l'onglet, c'est la section FMHY plus bas.</p>
+      <!-- ══════════════ ONGLET 2 — Open source ══════════════ -->
+      <template v-else-if="tab === 'open-source'">
+        <p class="outils-intention">{{ outils.open_source.intention }}</p>
 
-        <div class="outil-cards-grid">
-          <OutilCard
-            v-for="outil in outils?.opensource"
-            :key="outil.id"
-            :icon="outil.icon"
-            :titre="outil.titre"
-            :url="outil.url"
-            :description="outil.description"
-            :tag="outil.tag"
-          />
-        </div>
-      </section>
-
-      <!-- ══════════════ SECTION 3 — Bifurcation ══════════════ -->
-      <section class="outils-section" aria-labelledby="sec-bifurcation">
-        <h2 id="sec-bifurcation" class="outils-section__title">
-          <span aria-hidden="true">🌿</span> Bifurcation post-études d'archi
-        </h2>
-        <p class="outils-section__desc">
-          {{ outils?.bifurcation?.intro }}
-        </p>
-
-        <!-- 3.1 Vidéos OFQA -->
-        <div class="bifurcation-block">
-          <h3 class="bifurcation-block__title">Série vidéo OFQA / ENSA-PB</h3>
-          <ul class="ofqa-list">
-            <li
-              v-for="ep in outils?.bifurcation?.videos_ofqa"
-              :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>
-        </div>
-
-        <!-- 3.2 Coalition -->
-        <div v-if="outils?.bifurcation?.coalition_ensa_pb" class="bifurcation-block bifurcation-block--coalition">
-          <h3 class="bifurcation-block__title">{{ outils.bifurcation.coalition_ensa_pb.titre }}</h3>
-          <p class="bifurcation-block__desc">{{ outils.bifurcation.coalition_ensa_pb.description }}</p>
-        </div>
-
-        <!-- 3.3 Ressources externes -->
-        <div v-if="outils?.bifurcation?.ressources_externes?.length" class="bifurcation-block">
-          <h3 class="bifurcation-block__title">Ressources externes</h3>
+        <section class="outils-section" aria-labelledby="sec-recommandes">
+          <h2 id="sec-recommandes" class="outils-section__title">Recommandés</h2>
           <div class="outil-cards-grid">
             <OutilCard
-              v-for="r in outils.bifurcation.ressources_externes"
-              :key="r.id"
-              :icon="r.icon"
-              :titre="r.titre"
-              :url="r.url"
-              :description="r.description"
+              v-for="outil in outils.open_source.recommandes"
+              :key="outil.id"
+              :icon="outil.icon"
+              :titre="outil.titre"
+              :url="outil.url"
+              :description="outil.description"
+              :tag="outil.tag"
             />
           </div>
-        </div>
-      </section>
+        </section>
 
-      <!-- ══════════════ SECTION 4 — FMHY (cœur de la page) ══════════════ -->
-      <section class="outils-section outils-section--fmhy" aria-labelledby="sec-fmhy">
-        <h2 id="sec-fmhy" class="outils-section__title">
-          <span aria-hidden="true">🌳</span> Annuaire du web libre — la cartographie FMHY
-        </h2>
-        <p class="outils-section__desc">
-          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 <strong>par usage</strong>, pour aller droit au but.
-        </p>
+        <section class="outils-section outils-section--fmhy" aria-labelledby="sec-fmhy">
+          <h2 id="sec-fmhy" class="outils-section__title">{{ outils.open_source.fmhy.titre }}</h2>
+          <p class="outils-section__desc">{{ outils.open_source.fmhy.texte_intro }}</p>
 
-        <!-- Note détaillée par usage -->
-        <div v-for="g in fmhyGuide" :key="g.id" class="fmhy-usage">
-          <h3 class="fmhy-usage__title">{{ g.titre }}</h3>
-          <p v-if="g.note" class="fmhy-usage__note">{{ g.note }}</p>
-          <ul class="fmhy-usage__list">
-            <li v-for="l in g.liens" :key="l.url" class="fmhy-usage__item">
-              <a
-                :href="l.url"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="fmhy-usage__link"
-              >{{ l.nom }}</a>
-              <span class="fmhy-usage__desc">— {{ l.desc }}</span>
+          <div v-for="g in outils.open_source.rubriques" :key="g.id" class="fmhy-usage">
+            <h3 class="fmhy-usage__title">{{ g.titre }}</h3>
+            <p v-if="g.note" class="fmhy-usage__note">{{ g.note }}</p>
+            <ul class="fmhy-usage__list">
+              <li v-for="l in g.liens" :key="l.url" class="fmhy-usage__item">
+                <a :href="l.url" target="_blank" rel="noopener noreferrer" class="fmhy-usage__link">{{ l.nom }}</a>
+                <span class="fmhy-usage__desc"> — {{ l.desc }}</span>
+              </li>
+            </ul>
+          </div>
+
+          <div class="fmhy-warning">
+            <h3 class="fmhy-warning__title">Avertissement</h3>
+            <p class="fmhy-warning__text">
+              {{ outils.open_source.fmhy.avertissement }}
+              <a :href="outils.open_source.fmhy.avertissement_lien" target="_blank" rel="noopener noreferrer">{{ outils.open_source.fmhy.avertissement_lien_texte }}</a>
+            </p>
+          </div>
+
+          <p class="fmhy-snapshot">
+            {{ outils.open_source.fmhy.snapshot_texte }}
+            <a :href="outils.open_source.fmhy.url" target="_blank" rel="noopener noreferrer">fmhy.net</a>.
+          </p>
+
+          <p class="fmhy-tree-label">{{ outils.open_source.fmhy.arbre_label }}</p>
+          <div class="fmhy-tree-wrap">
+            <div v-if="fmhyPending" class="outils-etat"><span>Chargement…</span></div>
+            <div v-else-if="fmhyError" class="outils-etat">
+              Impossible de charger les ressources.
+              <a :href="outils.open_source.fmhy.url" target="_blank" rel="noopener noreferrer">fmhy.net →</a>
+            </div>
+            <TreeASCII v-else-if="fmhyData" :tree="fmhyData" :depth="0" />
+          </div>
+
+          <div class="fmhy-footer">
+            <a :href="outils.open_source.fmhy.url" target="_blank" rel="noopener noreferrer" class="fmhy-footer__link">
+              {{ outils.open_source.fmhy.lien_texte }}
+            </a>
+          </div>
+        </section>
+
+        <section v-if="outils.open_source.logiciels_pro" class="outils-section outils-section--placeholder" aria-labelledby="sec-logiciels">
+          <div class="placeholder-block">
+            <span class="placeholder-block__badge">{{ outils.open_source.logiciels_pro.badge }}</span>
+            <h2 id="sec-logiciels" class="placeholder-block__title">{{ outils.open_source.logiciels_pro.titre }}</h2>
+            <p class="placeholder-block__desc">{{ outils.open_source.logiciels_pro.description }}</p>
+          </div>
+        </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>
+
+        <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>
-        </div>
+        </section>
+      </template>
 
-        <!-- Avertissement légal -->
-        <div class="fmhy-warning">
-          <h3 class="fmhy-warning__title">Avertissement</h3>
-          <p class="fmhy-warning__text">
-            Une partie des ressources indexées par FMHY relève du partage de contenus
-            protégés : la légalité dépend de ton pays et de l'usage que tu en fais.
-            Renseigne-toi avant d'utiliser ces liens. FMHY maintient une
-            <a href="https://fmhy.net/unsafe" target="_blank" rel="noopener noreferrer">liste des sites dangereux</a>
-            (malwares, arnaques) : consulte-la. En cas de doute, privilégie les sources
-            libres de droits (Project Gutenberg, Gallica, domaine public).
-          </p>
-        </div>
-
-        <p class="fmhy-snapshot">
-          Cartographie établie d'après un snapshot du 25 août 2026 — l'index fmhy
-          évolue en continu, voir
-          <a href="https://fmhy.net/" target="_blank" rel="noopener noreferrer">fmhy.net</a>.
-        </p>
-
-        <!-- Arbre curé interactif (sélection AEP) -->
-        <p class="fmhy-tree-label">Sélection interactive — clique sur les branches pour déplier</p>
-        <div class="fmhy-tree-wrap">
-          <div v-if="fmhyPending" class="fmhy-loading" aria-label="Chargement…">
-            <span>Chargement…</span>
-          </div>
-          <div v-else-if="fmhyError" class="fmhy-error">
-            Impossible de charger les ressources. <a href="https://fmhy.net/" target="_blank" rel="noopener noreferrer">Explorer fmhy.net →</a>
-          </div>
-          <TreeASCII v-else-if="fmhyData" :tree="fmhyData" :depth="0" />
-        </div>
-
-        <div class="fmhy-footer">
-          <a href="https://fmhy.net/" target="_blank" rel="noopener noreferrer" class="fmhy-footer__link">
-            Explorer tout l'arbre → fmhy.net
-          </a>
-        </div>
-      </section>
-
-      <!-- ══════════════ SECTION 5 — Placeholder login ══════════════ -->
-      <section class="outils-section outils-section--placeholder" aria-labelledby="sec-logiciels">
-        <div class="placeholder-block">
-          <span class="placeholder-block__badge">Bientôt — nécessite un compte</span>
-          <h2 id="sec-logiciels" class="placeholder-block__title">{{ outils?.section_5_placeholder?.titre }}</h2>
-          <p class="placeholder-block__desc">{{ outils?.section_5_placeholder?.description }}</p>
-        </div>
-      </section>
-
-      <!-- ══════════════ FOOTER CONTRIBUTION ══════════════ -->
-      <footer class="outils-footer">
-        <p class="outils-footer__text">
-          {{ outils?.footer_contribution }}
-        </p>
+      <!-- ══════════════ CONTRIBUTION (les 3 onglets) ══════════════ -->
+      <footer v-if="outils?.contribution" class="outils-contribution">
+        <p class="outils-contribution__texte">{{ outils.contribution.texte }}</p>
+        <NuxtLink :to="outils.contribution.lien" class="outils-contribution__cta">
+          {{ outils.contribution.cta }}
+        </NuxtLink>
       </footer>
-
     </main>
   </div>
 </template>
 
 <script setup lang="ts">
-// Chargement des données
-const { data: outils } = await useFetch('/data/outils.json')
-const { data: fmhyData, pending: fmhyPending, error: fmhyError } = await useFetch('/data/fmhy-curated.json')
+type TabId = 'conception' | 'open-source' | 'partir-de-soi'
 
-// Note détaillée FMHY — cartographie traduite et organisée par usage
-// (entrées ★ « starred » de fmhy.net, snapshot du 25 août 2026)
-const fmhyGuide = [
-  {
-    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' },
-      { nom: 'SponsorBlock', url: 'https://sponsor.ajay.app/', desc: 'saute automatiquement les segments sponsorisés de YouTube' },
-      { nom: 'LibreWolf', url: 'https://librewolf.net/', desc: 'Firefox durci vie privée, pré-configuré' },
-      { nom: 'Proton VPN', url: 'https://protonvpn.com', desc: 'VPN suisse, offre gratuite illimitée' },
-      { nom: 'Bitwarden', url: 'https://bitwarden.com/', desc: 'gestionnaire de mots de passe open source' },
-      { nom: 'Cryptomator', url: 'https://cryptomator.org/', desc: 'chiffrement de tes fichiers avant envoi dans le cloud' },
-      { nom: 'Tor Browser', url: 'https://www.torproject.org/', desc: 'navigation anonyme via le réseau Tor' },
-      { nom: 'KeePassXC', url: 'https://keepassxc.org/', desc: 'coffre de mots de passe 100% local' }
-    ]
-  },
-  {
-    id: 'livres',
-    titre: 'Trouver un livre / ebook',
-    liens: [
-      { nom: "Anna's Archive", url: 'https://annas-archive.gl/', desc: 'la plus grosse bibliothèque du web : livres, BD, articles, thèses' },
-      { nom: 'Z-Library', url: 'https://z-lib.gd/', desc: 'catalogue immense, interface soignée' },
-      { nom: 'Library Genesis', url: 'https://libgen.li/', desc: 'référence pour les livres techniques et académiques' },
-      { nom: 'Mobilism', url: 'https://forum.mobilism.org', desc: 'ebooks, audiobooks, magazines (forum)' },
-      { nom: 'Project Gutenberg', url: 'https://www.gutenberg.org/', desc: '70 000+ classiques du domaine public, 100% légal' },
-      { nom: 'Sci-Hub', url: 'https://sci-hub.se/', desc: 'accès libre aux articles scientifiques derrière paywall' },
-      { nom: 'Calibre', url: 'https://calibre-ebook.com/', desc: 'gestion et conversion de bibliothèque numérique' },
-      { nom: 'KOReader', url: 'https://koreader.rocks/', desc: 'lecteur ebook open source pour liseuses' }
-    ]
-  },
-  {
-    id: 'films',
-    titre: 'Films, séries & anime',
-    liens: [
-      { nom: 'Rive', url: 'https://www.rivestream.app/', desc: 'streaming films / séries / anime, auto-next' },
-      { nom: 'Cineby', url: 'https://cineby.at/', desc: 'streaming films / séries / anime' },
-      { nom: 'Flixer', url: 'https://flixer.gd', desc: 'streaming films / séries / anime' },
-      { nom: 'Tubi', url: 'https://tubitv.com', desc: 'streaming légal et gratuit (financé par la pub)' },
-      { nom: 'Stremio', url: 'https://www.stremio.com/', desc: 'centre multimédia extensible par extensions' },
-      { nom: 'Miruro', url: 'https://www.miruro.com/', desc: 'anime en streaming' },
-      { nom: 'Simkl', url: 'https://simkl.com/', desc: 'suivi de films, séries et anime déjà vus' }
-    ]
-  },
-  {
-    id: 'musique',
-    titre: 'Musique & podcasts',
-    liens: [
-      { nom: 'Monochrome', url: 'https://monochrome.tf/', desc: 'streaming musique dans le navigateur' },
-      { nom: 'lucida', url: 'https://lucida.to/', desc: 'téléchargement de musiques' },
-      { nom: 'SpotX', url: 'https://github.com/SpotX-Official/SpotX', desc: 'Spotify desktop sans pub (patch client)' },
-      { nom: 'NTS Radio', url: 'https://www.nts.live/', desc: 'shows de DJ indépendants, archives immenses' },
-      { nom: 'SomaFM', url: 'https://somafm.com/', desc: '30+ radios internet indépendantes' },
-      { nom: 'Radio Garden', url: 'https://radio.garden/', desc: 'explorer les radios du monde entier sur un globe' },
-      { nom: 'Pocket Casts', url: 'https://play.pocketcasts.com/', desc: 'lecteur de podcasts libre et complet, aussi dans le navigateur' }
-    ]
-  },
-  {
-    id: 'logiciels',
-    titre: 'Logiciels & jeux vidéo',
-    liens: [
-      { nom: 'qBittorrent', url: 'https://www.qbittorrent.org/', desc: 'client torrent libre, sans pub — la référence' },
-      { nom: 'FitGirl Repacks', url: 'https://fitgirl-repacks.site/', desc: 'repacks de jeux ultra-compressés' },
-      { nom: 'SteamRIP', url: 'https://steamrip.com/', desc: 'jeux pré-installés' },
-      { nom: '1337x', url: 'https://1337x.to/', desc: 'annuaire torrents généraliste' }
-    ]
-  },
-  {
-    id: 'mobile',
-    titre: 'Android / iOS',
-    liens: [
-      { nom: 'Aurora Store', url: 'https://auroraoss.com/', desc: 'Google Play alternatif, sans compte Google' },
-      { nom: 'Droid-ify', url: 'https://droidify.app/', desc: 'client F-Droid moderne — applications libres' },
-      { nom: 'APKMirror', url: 'https://www.apkmirror.com/', desc: 'archives APK vérifiées' },
-      { nom: 'Fossify', url: 'https://github.com/FossifyOrg', desc: 'suite d’apps Android simples et libres (galerie, agenda, fichiers…)' },
-      { nom: 'Obtainium', url: 'https://obtainium.imranr.dev/', desc: 'installe et met à jour tes APKs depuis les sources officielles' }
-    ]
-  },
-  {
-    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' },
-      { nom: 'edX', url: 'https://www.edx.org/', desc: 'MOOCs de grandes universités' },
-      { nom: 'Khan Academy', url: 'https://www.khanacademy.org/', desc: 'maths, sciences, économie — gratuit, du collège au supérieur' },
-      { nom: 'Class Central', url: 'https://www.classcentral.com/', desc: 'moteur de recherche de cours en ligne' },
-      { nom: 'WolframAlpha', url: 'https://www.wolframalpha.com/', desc: 'moteur de calcul et base de connaissances' },
-      { nom: 'PhET', url: 'https://phet.colorado.edu/', desc: 'simulations interactives physique / chimie / maths' }
-    ]
-  },
-  {
-    id: 'ia',
-    titre: 'Intelligence artificielle gratuite',
-    liens: [
-      { nom: 'DeepSeek', url: 'https://chat.deepseek.com/', desc: 'modèle de pointe, usage illimité gratuit' },
-      { nom: 'Qwen Studio', url: 'https://chat.qwen.ai/', desc: 'chat IA (Qwen) illimité gratuit' },
-      { nom: 'Google AI Studio', url: 'https://aistudio.google.com/', desc: 'Gemini en accès généreux gratuit' },
-      { nom: 'Mistral Le Chat', url: 'https://chat.mistral.ai/', desc: 'LLM français, gratuit' },
-      { nom: 'LM Studio', url: 'https://lmstudio.ai/', desc: 'faire tourner des modèles en local, sans cloud' },
-      { nom: 'Jan', url: 'https://jan.ai/', desc: 'application desktop libre pour IA locale' },
-      { nom: 'Open WebUI', url: 'https://openwebui.com/', desc: 'interface web auto-hébergeable pour modèles locaux' }
-    ]
-  },
-  {
-    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' },
-      { nom: 'Nos Livres', url: 'https://noslivres.net/', desc: 'classiques français du domaine public, formats propres' },
-      { nom: 'Audiocite', url: 'https://www.audiocite.net/', desc: 'livres audio francophones du domaine public' },
-      { nom: 'Littérature audio', url: 'https://www.litteratureaudio.com/', desc: 'autre grande bibliothèque audio francophone libre' },
-      { nom: 'zone-ebook', url: 'https://zone-ebook.com/', desc: 'ebooks, magazines et journaux en français' },
-      { nom: 'Dealabs', url: 'https://www.dealabs.com/', desc: 'bons plans et gratuités débusqués par la communauté' }
-    ]
-  }
+// Libellés d'interface : `court` prend le relais sous 480 px pour que la barre tienne sur une ligne.
+const TABS: { id: TabId; libelle: string; court: string }[] = [
+  { id: 'conception', libelle: 'Outils de conception', court: 'Conception' },
+  { id: 'open-source', libelle: 'Open source', court: 'Open source' },
+  { id: 'partir-de-soi', libelle: 'Partir de soi', court: 'Partir de soi' },
 ]
+const TAB_DEFAUT: TabId = 'conception'
+
+const route = useRoute()
+const router = useRouter()
+
+// Lu au SSR et à chaque changement de ?tab= (patron de media.vue).
+const lireTab = (q: unknown): TabId => TABS.find((t) => t.id === q)?.id ?? TAB_DEFAUT
+const tab = ref<TabId>(lireTab(route.query.tab))
+watch(() => route.query.tab, (q) => { tab.value = lireTab(q) })
+
+// Données : tout le contenu vient de public/data/outils.json (schéma v2).
+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))
+
+// Flèches ← → (+ Début / Fin) : on se déplace et on active, comme un tablist à activation automatique.
+const tablistRef = ref<HTMLElement | null>(null)
+function onTabKeydown(e: KeyboardEvent) {
+  const i = TABS.findIndex((t) => t.id === tab.value)
+  let j = -1
+  if (e.key === 'ArrowRight') j = (i + 1) % TABS.length
+  else if (e.key === 'ArrowLeft') j = (i - 1 + TABS.length) % TABS.length
+  else if (e.key === 'Home') j = 0
+  else if (e.key === 'End') j = TABS.length - 1
+  if (j < 0) return
+  e.preventDefault()
+  // Seul `tab` reste dans la query : les paramètres d'un autre onglet ne fuient pas.
+  router.replace({ query: { tab: TABS[j].id } })
+  nextTick(() => tablistRef.value?.querySelector<HTMLElement>(`#outils-tab-${TABS[j].id}`)?.focus())
+}
 
 useSeoMeta({
-  title: 'Outils — AEP',
-  description: 'Outils partagés entre architectes : simulateurs, open source, ressources libres FMHY, bifurcation post-études.'
+  title: () => `Outils — AEP${tab.value !== TAB_DEFAUT ? ' — ' + TABS.find((t) => t.id === tab.value)!.libelle : ''}`,
+  description: 'Outils partagés entre architectes : simulateurs, open source, ressources libres pour partir de soi.',
 })
 </script>
 
@@ -358,26 +272,30 @@ useSeoMeta({
 .outils-page {
   max-width: 860px;
   margin: 0 auto;
-  padding: 2rem 1.5rem 4rem;
-  color: var(--nav-text);
+  padding: var(--space-xl) var(--space-lg) 4rem;
+  color: var(--text);
 }
 
 /* ── Header ─────────────────────────────────────────────────── */
 .outils-header {
-  margin-bottom: 2.5rem;
+  margin-bottom: var(--space-lg);
 }
 
 .outils-header__inner {
   display: flex;
   align-items: flex-start;
-  gap: 1.25rem;
+  gap: var(--space-md);
+}
+
+.outils-header__body {
+  min-width: 0;
 }
 
 .outils-header__icon-wrap {
   width: 3rem;
   height: 3rem;
-  border-radius: 10px;
-  background: var(--nav-bg-alt);
+  border-radius: var(--radius-md);
+  background: var(--bg-alt);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -394,298 +312,159 @@ useSeoMeta({
 
 .outils-header__title {
   font-size: 1.75rem;
-  font-weight: 700;
-  margin: 0 0 0.5rem;
-  color: var(--nav-text);
+  font-weight: var(--fw-bold);
+  margin: 0 0 var(--space-xs);
+  color: var(--text);
 }
 
 .outils-header__intro {
   font-size: 0.9rem;
-  color: var(--nav-text-muted);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
   line-height: 1.65;
-  margin: 0;
+  margin: var(--space-sm) 0 0;
   max-width: 70ch;
 }
 
-/* ── Sections ───────────────────────────────────────────────── */
+/* ── Sous-onglets ───────────────────────────────────────────── */
+.outils-tabs {
+  display: flex;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-xl);
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto;           /* défilement interne à la barre, jamais de débordement de la page */
+  overscroll-behavior-x: contain;
+  scrollbar-width: thin;
+}
+
+.outils-tab {
+  flex: 0 0 auto;
+  padding: var(--space-xs) var(--space-md) var(--space-sm);
+  font-size: 0.92rem;
+  font-weight: var(--fw-medium);
+  white-space: nowrap;
+  text-decoration: none;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+  border-bottom: 3px solid transparent;
+  margin-bottom: -1px;
+  transition: color var(--dur-fast) var(--ease-out);
+}
+
+.outils-tab:hover {
+  color: var(--text);
+}
+
+.outils-tab:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm);
+}
+
+.outils-tab--actif {
+  color: var(--text);
+  font-weight: var(--fw-semibold);
+  border-bottom-color: var(--nav-primary-solid);
+}
+
+.outils-tab__court { display: none; }
+
+@media (max-width: 480px) {
+  .outils-tab { padding: var(--space-xs) var(--space-sm) var(--space-sm); font-size: 0.85rem; }
+  .outils-tab__long { display: none; }
+  .outils-tab__court { display: inline; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .outils-tab { transition: none; }
+}
+
+/* ── Panneau ────────────────────────────────────────────────── */
 .outils-main {
   display: flex;
   flex-direction: column;
-  gap: 3rem;
+  gap: 2.5rem;
+  min-width: 0;
+}
+
+.outils-etat {
+  font-size: 0.85rem;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+  margin: 0;
+}
+
+.outils-etat a { color: var(--nav-primary-solid); }
+
+.outils-intention {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--text);
+  margin: 0;
+  max-width: 70ch;
 }
 
 .outils-section {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--space-md);
+  min-width: 0;
 }
 
 .outils-section__title {
   font-size: 1.15rem;
-  font-weight: 700;
+  font-weight: var(--fw-bold);
   margin: 0;
-  color: var(--nav-text);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1.5px solid var(--nav-bg-alt);
-}
-
-.outils-section__subtitle {
-  font-size: 0.82rem;
-  color: var(--nav-text-muted);
-  margin: -0.5rem 0 0;
-  font-style: italic;
+  color: var(--text);
+  padding-bottom: var(--space-xs);
+  border-bottom: 1.5px solid var(--bg-alt);
 }
 
 .outils-section__desc {
   font-size: 0.88rem;
-  color: var(--nav-text-muted);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
   line-height: 1.65;
   margin: 0;
   max-width: 72ch;
 }
 
-/* ── Simulateurs ────────────────────────────────────────────── */
-.outils-section--simulateurs {
-  gap: 1.25rem;
-}
-
+/* ── Simulateurs & cartes ───────────────────────────────────── */
 .simu-grid {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--space-md);
 }
 
-.simu-inspirations {
-  margin-top: 0.5rem;
-}
-
-.simu-inspirations__label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--nav-text-muted);
-  margin-bottom: 0.5rem;
-}
-
-/* ── Cards grid ─────────────────────────────────────────────── */
 .outil-cards-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 0.75rem;
+  gap: var(--space-md);
 }
 
 /* ── Section FMHY ───────────────────────────────────────────── */
 .outils-section--fmhy {
-  background: var(--nav-bg-alt);
-  border-radius: 14px;
+  background: var(--bg-alt);
+  border-radius: var(--radius-lg);
   padding: 1.75rem;
   gap: 1.25rem;
-  margin: 0 -0.25rem;
 }
 
 .fmhy-tree-wrap {
-  background: var(--nav-surface);
-  border: 1px solid var(--nav-bg-alt);
-  border-radius: 10px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
   padding: 1.25rem 1.5rem;
   overflow-x: auto;
 }
 
-.fmhy-loading,
-.fmhy-error {
-  font-size: 0.85rem;
-  color: var(--nav-text-muted);
-  padding: 0.5rem 0;
-}
-
-.fmhy-error a {
-  color: var(--nav-primary-solid);
-}
-
-.fmhy-footer {
-  text-align: right;
-}
+.fmhy-footer { text-align: right; }
 
 .fmhy-footer__link {
   font-size: 0.82rem;
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
   color: var(--nav-primary-solid);
   text-decoration: none;
-  transition: opacity 0.15s;
 }
 
-.fmhy-footer__link:hover {
-  opacity: 0.75;
-  text-decoration: underline;
-}
+.fmhy-footer__link:hover { text-decoration: underline; }
 
-/* ── Bifurcation ────────────────────────────────────────────── */
-.bifurcation-block {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-
-.bifurcation-block__title {
-  font-size: 0.92rem;
-  font-weight: 600;
-  color: var(--nav-text);
-  margin: 0;
-}
-
-.bifurcation-block__desc {
-  font-size: 0.84rem;
-  color: var(--nav-text-muted);
-  margin: 0;
-  line-height: 1.55;
-}
-
-.bifurcation-block--coalition {
-  background: var(--nav-bg-alt);
-  border-radius: 8px;
-  padding: 0.875rem 1rem;
-}
-
-/* ── Liste OFQA ─────────────────────────────────────────────── */
-.ofqa-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.ofqa-list__item {
-  display: flex;
-}
-
-.ofqa-list__link {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-  padding: 3px 6px;
-  border-radius: 5px;
-  font-size: 0.84rem;
-  text-decoration: none;
-  color: var(--nav-text);
-  transition: background 0.1s;
-}
-
-.ofqa-list__link:not(.ofqa-list__link--disabled):hover {
-  background: var(--nav-bg-alt);
-  color: var(--nav-primary-solid);
-  text-decoration: underline;
-}
-
-.ofqa-list__link--disabled {
-  color: var(--nav-text-muted);
-  cursor: default;
-}
-
-.ofqa-list__ep {
-  font-family: 'JetBrains Mono', 'Courier New', monospace;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--nav-text-muted);
-  flex-shrink: 0;
-  min-width: 4.5rem;
-}
-
-.ofqa-list__titre {
-  font-weight: 500;
-}
-
-.ofqa-list__personnes {
-  color: var(--nav-text-muted);
-  font-size: 0.82rem;
-}
-
-.ofqa-list__note {
-  color: var(--nav-text-muted);
-  font-size: 0.78rem;
-  font-style: italic;
-}
-
-/* ── Section 5 placeholder ──────────────────────────────────── */
-.outils-section--placeholder {
-  opacity: 0.6;
-}
-
-.placeholder-block {
-  border: 1.5px dashed var(--nav-bg-alt);
-  border-radius: 12px;
-  padding: 1.25rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-
-.placeholder-block__badge {
-  font-size: 0.68rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--nav-text-muted);
-}
-
-.placeholder-block__title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--nav-text);
-  margin: 0;
-}
-
-.placeholder-block__desc {
-  font-size: 0.84rem;
-  color: var(--nav-text-muted);
-  margin: 0;
-  line-height: 1.5;
-}
-
-/* ── Footer ─────────────────────────────────────────────────── */
-.outils-footer {
-  padding-top: 1rem;
-  border-top: 1px solid var(--nav-bg-alt);
-  text-align: center;
-}
-
-.outils-footer__text {
-  font-size: 0.84rem;
-  color: var(--nav-text-muted);
-  margin: 0;
-}
-
-/* ── Mobile ─────────────────────────────────────────────────── */
-@media (max-width: 640px) {
-  .outils-page {
-    padding: 1.25rem 1rem 4rem;
-  }
-
-  .outils-header__inner {
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .outils-header__title {
-    font-size: 1.4rem;
-  }
-
-  .outil-cards-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .outils-section--fmhy {
-    padding: 1.25rem 1rem;
-    margin: 0 -0.5rem;
-  }
-
-/* ── Note FMHY détaillée (par usage) ────────────────────────── */
 .fmhy-usage {
   display: flex;
   flex-direction: column;
@@ -694,14 +473,14 @@ useSeoMeta({
 
 .fmhy-usage__title {
   font-size: 0.92rem;
-  font-weight: 650;
-  color: var(--nav-text);
+  font-weight: var(--fw-semibold);
+  color: var(--text);
   margin: 0;
 }
 
 .fmhy-usage__note {
   font-size: 0.8rem;
-  color: var(--nav-text-muted);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
   font-style: italic;
   margin: 0;
   line-height: 1.5;
@@ -720,32 +499,27 @@ useSeoMeta({
   font-size: 0.84rem;
   line-height: 1.5;
   padding: 2px 6px;
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
+  overflow-wrap: anywhere;
 }
 
-.fmhy-usage__item:hover {
-  background: var(--nav-surface);
-}
+.fmhy-usage__item:hover { background: var(--surface); }
 
 .fmhy-usage__link {
   color: var(--nav-primary-solid);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
   text-decoration: none;
 }
 
-.fmhy-usage__link:hover {
-  text-decoration: underline;
-}
+.fmhy-usage__link:hover { text-decoration: underline; }
 
-.fmhy-usage__desc {
-  color: var(--nav-text-muted);
-}
+.fmhy-usage__desc { color: color-mix(in srgb, var(--text) 78%, transparent); }
 
 .fmhy-warning {
-  background: var(--nav-surface);
-  border: 1px solid var(--nav-bg-alt);
+  background: var(--surface);
+  border: 1px solid var(--border);
   border-left: 3px solid var(--nav-primary-solid);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 0.875rem 1rem;
   display: flex;
   flex-direction: column;
@@ -754,44 +528,199 @@ useSeoMeta({
 
 .fmhy-warning__title {
   font-size: 0.85rem;
-  font-weight: 650;
-  color: var(--nav-text);
+  font-weight: var(--fw-semibold);
+  color: var(--text);
   margin: 0;
 }
 
 .fmhy-warning__text {
   font-size: 0.82rem;
-  color: var(--nav-text-muted);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
   line-height: 1.6;
   margin: 0;
 }
 
-.fmhy-warning__text a {
-  color: var(--nav-primary-solid);
-}
+.fmhy-warning__text a,
+.fmhy-snapshot a { color: var(--nav-primary-solid); }
 
 .fmhy-snapshot {
   font-size: 0.78rem;
-  color: var(--nav-text-muted);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
   font-style: italic;
   margin: 0;
 }
 
-.fmhy-snapshot a {
-  color: var(--nav-primary-solid);
-}
-
 .fmhy-tree-label {
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--nav-text-muted);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
   margin: 0.5rem 0 -0.5rem;
 }
 
-.fmhy-tree-wrap {
-    padding: 0.875rem 0.75rem;
-  }
+/* ── 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; }
+
+.placeholder-block {
+  border: 1.5px dashed var(--border-strong);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.placeholder-block__badge {
+  font-size: 0.68rem;
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+}
+
+.placeholder-block__title {
+  font-size: 0.95rem;
+  font-weight: var(--fw-semibold);
+  color: var(--text);
+  margin: 0;
+}
+
+.placeholder-block__desc {
+  font-size: 0.84rem;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ── Contribution (pied des 3 onglets) ──────────────────────── */
+.outils-contribution {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+}
+
+.outils-contribution__texte {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--text);
+}
+
+.outils-contribution__cta {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.6rem 1.25rem;
+  border-radius: var(--radius-md);
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+  font-size: 0.85rem;
+  font-weight: var(--fw-semibold);
+  text-decoration: none;
+}
+
+.outils-contribution__cta:hover { opacity: 0.88; }
+
+.outils-contribution__cta:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* ── 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-header__title { font-size: 1.4rem; }
+  .outil-cards-grid { grid-template-columns: 1fr; }
+  .outils-section--fmhy { padding: 1.25rem 1rem; }
+  .fmhy-tree-wrap { padding: 0.875rem 0.75rem; }
 }
 </style>