From d9f934a8b26424eaf40cad27aee3d71fe03ee82e Mon Sep 17 00:00:00 2001
From: Jules <transformationsresilientes@gmail.com>
Date: Sat, 26 Sep 2026 17:58:31 +0200
Subject: [PATCH] =?UTF-8?q?feat(aep):=20t=C3=AAtes=20d'onglet=20S=20/=20M?=
 =?UTF-8?q?=20/=20XL=20(slides=2016-18=20du=20deck=20du=2023/09)=20+=20lie?=
 =?UTF-8?q?n=20mobile=20recherche-m=C3=A9dia?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- utils/echelles.ts : texte des slides 15 à 18, mot pour mot, source unique
  (la future nav S / M / XL lira ce fichier).
- EchelleTete.vue : badge d'échelle, titre, sept mots, phrase, ligne
  « Chaque section est ouverte aux contributions » vers /proposer.
- Placée en tête du texte existant, sans le remplacer : Outils (S),
  popup Écosystème Entraide (M), page Codev (M), popup média (XL).
  Réseaux AEP et Jobs attendent les arbitrages n° 1 et 2 (table R §6).
- /proposer?categorie=<id> présélectionne l'onglet.
- Menu mobile : « recherche-média » pointait sur /rag (301), pointe sur /media,
  état actif comme les autres liens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app.vue                       |   2 +-
 components/EchelleTete.vue    | 121 ++++++++++++++++++++++++++++++++++
 components/MediaTabVisuel.vue |   1 +
 components/MissionPopup.vue   |   5 ++
 pages/codev/index.vue         |   8 +++
 pages/index.vue               |   1 +
 pages/outils.vue              |   1 +
 pages/proposer.vue            |   5 +-
 utils/echelles.ts             |  68 +++++++++++++++++++
 9 files changed, 210 insertions(+), 2 deletions(-)
 create mode 100644 components/EchelleTete.vue
 create mode 100644 utils/echelles.ts

diff --git a/app.vue b/app.vue
index e79d82b..6502e92 100644
--- a/app.vue
+++ b/app.vue
@@ -189,7 +189,7 @@
             <NuxtLink to="/" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Écosystème Entraide</NuxtLink>
             <NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/agences' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Réseaux AEP</NuxtLink>
             <NuxtLink to="/trouver-du-taf" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/trouver-du-taf' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Jobs</NuxtLink>
-            <NuxtLink to="/rag" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">recherche-média</NuxtLink>
+            <NuxtLink to="/media" class="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="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 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>
diff --git a/components/EchelleTete.vue b/components/EchelleTete.vue
new file mode 100644
index 0000000..34f7b74
--- /dev/null
+++ b/components/EchelleTete.vue
@@ -0,0 +1,121 @@
+<template>
+  <section class="echelle-tete" :class="{ 'echelle-tete--compact': compact }" :aria-label="`Échelle ${e.id} : ${e.titre}`">
+    <p class="echelle-tete__kicker">
+      <span class="echelle-tete__badge" aria-hidden="true">{{ e.id }}</span>
+      <span class="echelle-tete__titre">{{ e.titre }}<span v-if="e.sousTitre" class="echelle-tete__sous-titre">{{ ' ' + e.sousTitre }}</span></span>
+    </p>
+    <ul class="echelle-tete__mots">
+      <li v-for="m in e.mots" :key="m">{{ m }}</li>
+    </ul>
+    <p class="echelle-tete__phrase">{{ e.phrase }}</p>
+    <slot />
+    <p v-if="contribuer" class="echelle-tete__contribuer">
+      <span>{{ ECHELLES_CADRE_COURT }}</span>
+      <NuxtLink :to="`/proposer?categorie=${e.categorieProposer}`" @click="$emit('navigate')">Proposer une ressource →</NuxtLink>
+    </p>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ECHELLES, type EchelleId } from '~/utils/echelles'
+
+const props = withDefaults(defineProps<{
+  echelle: EchelleId
+  /** Variante resserrée, pour une popup ou un en-tête centré. */
+  compact?: boolean
+  /** Affiche la ligne « on pose l'infrastructure, le collectif nourrit ». */
+  contribuer?: boolean
+}>(), { compact: false, contribuer: true })
+
+defineEmits<{ navigate: [] }>()
+
+const e = computed(() => ECHELLES[props.echelle])
+const ECHELLES_CADRE_COURT = 'Chaque section est ouverte aux contributions.'
+</script>
+
+<style scoped>
+.echelle-tete {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  margin: 0 0 var(--space-md);
+}
+
+.echelle-tete__kicker {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-sm);
+  margin: 0;
+}
+
+.echelle-tete__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  padding: 0.1rem 0.5rem;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-weight: var(--fw-bold);
+  font-size: var(--fs-sm);
+  letter-spacing: 0.04em;
+  line-height: 1.4;
+}
+
+.echelle-tete__titre {
+  font-size: var(--fs-lg);
+  font-weight: var(--fw-bold);
+  color: var(--text);
+  line-height: var(--lh-tight);
+}
+
+.echelle-tete__sous-titre {
+  font-weight: var(--fw-regular);
+  color: var(--text-muted);
+}
+
+.echelle-tete__mots {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.15rem 0;
+  font-size: var(--fs-sm);
+  color: var(--text);
+  line-height: var(--lh-base);
+}
+.echelle-tete__mots li:not(:last-child)::after {
+  content: '·';
+  margin: 0 0.5rem;
+  color: var(--accent);
+  font-weight: var(--fw-bold);
+}
+
+.echelle-tete__phrase {
+  margin: 0;
+  font-size: var(--fs-sm);
+  font-style: italic;
+  color: var(--text-muted);
+  line-height: var(--lh-base);
+}
+
+.echelle-tete__contribuer {
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.75rem;
+  font-size: var(--fs-xs);
+  color: var(--text-muted);
+}
+.echelle-tete__contribuer a {
+  color: var(--link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.echelle-tete__contribuer a:hover { color: var(--link-hover); }
+
+.echelle-tete--compact { text-align: left; }
+.echelle-tete--compact .echelle-tete__titre { font-size: var(--fs-base); }
+</style>
diff --git a/components/MediaTabVisuel.vue b/components/MediaTabVisuel.vue
index e631d5d..a2b1686 100644
--- a/components/MediaTabVisuel.vue
+++ b/components/MediaTabVisuel.vue
@@ -275,6 +275,7 @@
             </button>
           </div>
           <div class="flex-1 overflow-y-auto px-5 py-4" style="color:var(--nav-text);font-size:0.875rem;line-height:1.6;">
+            <EchelleTete echelle="XL" compact @navigate="ragInfoOpen = false" />
             <p class="mb-3">Une bibliothèque parlante des pensées écologiques, organisée pour aider à créer une pensée complexe et nuancée, à soutenir l'écriture de nouveaux récits, des alternatives concrètes et des projets collectifs.</p>
             <p class="mb-4" style="color:var(--nav-text-muted);font-size:0.8rem;">Projet open source, ouvert à toutes et à tous - <a href="https://bonpote.com/la-carte-des-pensees-ecologiques/" target="_blank" rel="noopener" style="text-decoration:underline;">article + carte FRACAS Bonpote V2</a>.</p>
             <div class="flex flex-col gap-3">
diff --git a/components/MissionPopup.vue b/components/MissionPopup.vue
index 787d5d9..a7c5283 100644
--- a/components/MissionPopup.vue
+++ b/components/MissionPopup.vue
@@ -32,6 +32,7 @@
 
         <div class="mission-body">
           <h2 id="mission-title" class="mission-title">{{ title }}</h2>
+          <EchelleTete v-if="echelle" :echelle="echelle" compact @navigate="close" />
           <slot>
             <p class="mission-text">
               L'architecture est l'une des professions les plus complexes qui soit ; elle croise droit, technique, esthétique, économie, social, écologie — tout à la fois, tout simultanément, souvent sans filet. Paradoxalement, c'est aussi l'une des moins structurées sur le plan de l'entraide&nbsp;: peu de transmission horizontale, beaucoup d'isolement, une culture du chacun-pour-soi héritée d'une formation qui prépare à la compétition plus qu'à la coopération. On sort de l'école seul·e. On s'installe seul·e. On réinvente ce que d'autres ont déjà traversé.
@@ -52,11 +53,15 @@
 </template>
 
 <script setup lang="ts">
+import type { EchelleId } from '~/utils/echelles'
+
 const props = withDefaults(defineProps<{
   modelValue: boolean
   title?: string
   ctaLabel?: string
   storageKey?: string
+  /** Tête d'échelle du deck (S / M / XL) affichée sous le titre. Absente sur /agences tant que l'arbitrage n° 1 n'est pas rendu. */
+  echelle?: EchelleId
 }>(), {
   title: "L'écosystème d'entraide architecte",
   ctaLabel: 'Explorer la carte',
diff --git a/pages/codev/index.vue b/pages/codev/index.vue
index cb8e4b3..03fd0c0 100644
--- a/pages/codev/index.vue
+++ b/pages/codev/index.vue
@@ -5,6 +5,7 @@
       <div class="lock-header">
         <h1>Co-développement</h1>
         <p class="lock-subtitle">Entraide entre pairs</p>
+        <EchelleTete echelle="M" compact :contribuer="false" class="lock-echelle" />
         <p class="lock-intro">Cet espace est un cercle. Pour entrer, il y a un mot.</p>
       </div>
 
@@ -104,6 +105,13 @@ async function submit() {
   margin: 0 0 1rem;
 }
 
+.lock-echelle {
+  text-align: left;
+  padding: var(--space-md);
+  border-radius: var(--radius-md);
+  background: var(--bg-alt);
+}
+
 .lock-intro {
   font-size: 0.9rem;
   color: var(--nav-text-muted, #6b7280);
diff --git a/pages/index.vue b/pages/index.vue
index 875407d..16ca759 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -391,6 +391,7 @@
     <MissionPopup
       :modelValue="missionOpen"
       @update:modelValue="missionOpen = $event"
+      echelle="M"
     />
 
   </div>
diff --git a/pages/outils.vue b/pages/outils.vue
index 964a6a1..c90dde1 100644
--- a/pages/outils.vue
+++ b/pages/outils.vue
@@ -9,6 +9,7 @@
         </div>
         <div>
           <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
diff --git a/pages/proposer.vue b/pages/proposer.vue
index 7c8be3a..ac311ca 100644
--- a/pages/proposer.vue
+++ b/pages/proposer.vue
@@ -52,7 +52,10 @@ const TABS = [
   { id: 'references', label: 'Références (bibliothèque)' },
 ] as const
 
-const activeTab = ref<string>('ecosysteme')
+// ?categorie=outils (lien « Proposer une ressource » des têtes d'échelle) présélectionne l'onglet
+const route = useRoute()
+const categorie = String(route.query.categorie ?? '')
+const activeTab = ref<string>(TABS.some(t => t.id === categorie) ? categorie : 'ecosysteme')
 const success = ref(false)
 
 function onSuccess() {
diff --git a/utils/echelles.ts b/utils/echelles.ts
new file mode 100644
index 0000000..7651ba5
--- /dev/null
+++ b/utils/echelles.ts
@@ -0,0 +1,68 @@
+/**
+ * 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.
+ */
+export type EchelleId = 'S' | 'M' | 'XL'
+
+export interface Echelle {
+  id: EchelleId
+  titre: string
+  sousTitre?: string
+  mots: string[]
+  phrase: string
+  /** Catégorie de /proposer présélectionnée par le lien de contribution. */
+  categorieProposer: 'ecosysteme' | 'reseau' | 'jobs' | 'outils' | 'references'
+}
+
+export const ECHELLES: Record<EchelleId, Echelle> = {
+  S: {
+    id: 'S',
+    titre: 'Partir de soi',
+    sousTitre: "pour s'émanciper",
+    mots: [
+      'quête de sens',
+      'où habiter, avec qui',
+      'gagner sa vie',
+      'santé mentale',
+      'mener ses projets',
+      'naviguer avec soi',
+      'les compétences psychosociales',
+    ],
+    phrase: 'Des ressources, des méthodes, des pairs : matériel et mutualisé.',
+    categorieProposer: 'outils',
+  },
+  M: {
+    id: 'M',
+    titre: 'La communauté',
+    mots: [
+      'entraide',
+      'mutualisation',
+      'appartenance',
+      'être vu, soutenu',
+      'traverser les creux',
+      'accomplissement',
+      'le codev',
+    ],
+    phrase: "C'est le groupe qui remet un individu debout. L'affinité fait tenir, la confrontation fait avancer.",
+    categorieProposer: 'ecosysteme',
+  },
+  XL: {
+    id: 'XL',
+    titre: 'Contribuer',
+    mots: [
+      'contribution',
+      'affiliation, filiation',
+      'identité',
+      'sens',
+      'de nouveaux récits',
+      'un nouveau contrat social',
+      'la médecine du corps social',
+    ],
+    phrase: 'La bibliothèque, les récits, la filiation entre projets.',
+    categorieProposer: 'references',
+  },
+}
+
+/** 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."