feat(media): ?tab= suivi par watch, sous-onglets retirés, Publications ; Signaler en pied d'À propos

La nav XL porte Recherche média / Publications ; /media relit route.query.tab à
chaque changement (un lien /media → /media?tab=projets changeait l'URL sans
changer la page). B10 M5.

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

components/MediaTabProjets.vue

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

pages/a-propos.vue

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

pages/media.vue

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