feat(media): 3 sous-onglets RAG/LightRAG/Projets + titres cercles D3 + layer PDF FRACAS + onglet PFE

pages/media.vue

@@ -0,0 +1,63 @@
+<template>
+  <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'"
+      >
+        🌳 RAG visuel
+      </button>
+      <button
+        :class="['subtab-btn', { active: tab === 'backend' }]"
+        @click="tab = 'backend'"
+      >
+        ⚙ LightRAG backend
+      </button>
+      <button
+        :class="['subtab-btn', { active: tab === 'projets' }]"
+        @click="tab = 'projets'"
+      >
+        📚 Projets
+      </button>
+    </nav>
+
+    <MediaTabVisuel v-if="tab === 'visuel'" />
+    <MediaTabBackend v-else-if="tab === 'backend'" />
+    <MediaTabProjets v-else-if="tab === 'projets'" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+
+const tab = ref<'visuel' | 'backend' | 'projets'>(
+  (['visuel', 'backend', 'projets'].includes(route.query.tab as string)
+    ? route.query.tab as 'visuel' | 'backend' | 'projets'
+    : 'visuel')
+)
+
+watch(tab, (newTab) => {
+  router.replace({ query: { ...route.query, tab: newTab } })
+})
+
+useHead({ title: 'AEP - Media' })
+</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>