From 22a7a422068fc6e157d86f1805ec1efed897656a Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Fri, 15 May 2026 03:20:27 +0200
Subject: [PATCH] feat(media): onglet Bonpote V2 + suppression lien Media
 parasite dans agences

---
 pages/agences.vue | 11 --------
 pages/media.vue   | 71 +++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 69 insertions(+), 13 deletions(-)

diff --git a/pages/agences.vue b/pages/agences.vue
index fa9e178..a2d72f5 100644
--- a/pages/agences.vue
+++ b/pages/agences.vue
@@ -128,12 +128,6 @@
               : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
             @click="desktopMapView = 'graphe'"
           >Vue graphique</button>
-          <NuxtLink
-            to="/media"
-            class="px-5 py-2 text-sm font-medium transition-colors"
-            style="color: var(--nav-text-muted); border-bottom: 2px solid transparent;"
-            active-class="!color-nav-text"
-          >Média</NuxtLink>
         </div>
 
         <!-- Carte Métropole desktop -->
@@ -225,11 +219,6 @@
             : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
           @click="mobileMapView = 'graphe'"
         >Graphe</button>
-        <NuxtLink
-          to="/media"
-          class="flex-1 py-2 text-sm font-medium transition-colors text-center"
-          style="color: var(--nav-text-muted); border-bottom: 2px solid transparent;"
-        >Média</NuxtLink>
       </div>
 
       <div class="lg:hidden flex-1 relative overflow-hidden">
diff --git a/pages/media.vue b/pages/media.vue
index 60367eb..f43c3a7 100644
--- a/pages/media.vue
+++ b/pages/media.vue
@@ -92,6 +92,18 @@
             </svg>
             Chatbot plein ecran
           </button>
+          <button
+            @click="setLayoutMode('bonpote')"
+            :class="{ active: layoutMode === 'bonpote' }"
+            class="toggle-btn"
+            title="A propos de la carte FRACAS Bonpote V2"
+            style="margin-left: auto;"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="10"/><polyline points="12 8 12 12 14 14"/>
+            </svg>
+            Bonpote V2
+          </button>
         </div>
 
         <!-- Poignee draggable (visible uniquement en mode split, pas sur mobile) -->
@@ -119,6 +131,61 @@
           </ClientOnly>
         </div>
 
+        <!-- Vue Bonpote V2 -->
+        <div
+          v-if="layoutMode === 'bonpote'"
+          class="flex-1 overflow-y-auto px-6 py-8"
+          style="max-width: 680px; margin: 0 auto;"
+        >
+          <div class="mb-6">
+            <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color: var(--nav-text-muted);">Reference editoriale</p>
+            <h2 class="text-xl font-bold mb-3" style="color: var(--nav-text);">Carte FRACAS des pensees ecologiques</h2>
+            <p class="text-sm leading-relaxed mb-4" style="color: var(--nav-text);">
+              FRACAS (Familles, Racines et Arpentages des Courants et Alternatives Solidaires) est une carte des ecoles de pensee ecologique publiee par Bonpote en octobre 2024. Elle reference ~140 auteurs et autrices reparti-es en 10 ecoles de pensee, depuis l'ecosocialisme jusqu'a l'ethique environnementale.
+            </p>
+            <p class="text-sm leading-relaxed mb-6" style="color: var(--nav-text);">
+              Le RAG ATIS est construit sur cette reference : chaque auteur ingere dans la bibliotheque correspond a une entree de la carte FRACAS. Les ecoles de pensee, les positions et les couleurs de notre carte sont transposees 1:1 depuis Bonpote V2.
+            </p>
+            <div class="flex flex-col gap-3">
+              <a href="https://bonpote.com/la-carte-des-pensees-ecologiques/"
+                target="_blank" rel="noopener"
+                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity"
+                style="background: var(--nav-primary, #3b6ea5); color: white; font-size: 0.875rem; font-weight: 600; text-decoration: none;">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+                Lire l'article Bonpote + carte interactive
+              </a>
+              <a href="https://bonpote.com/wp-content/uploads/2024/10/FRACAS_BONPOTE_CARTE_VERSO_V2-OCT2024.pdf"
+                target="_blank" rel="noopener"
+                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity"
+                style="background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; font-weight: 500; text-decoration: none;">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                Telecharger le poster PDF (recto/verso)
+              </a>
+              <button
+                @click="setLayoutMode('split')"
+                class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity text-left"
+                style="background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer;">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+                Interroger le RAG ATIS sur ces pensees
+              </button>
+            </div>
+          </div>
+          <div>
+            <p class="text-xs font-bold uppercase tracking-widest mb-3" style="color: var(--nav-text-muted);">Les 10 ecoles de pensee (FRACAS V2)</p>
+            <div class="flex flex-col gap-2">
+              <div v-for="ecole in (penseesData?.ecoles ?? [])" :key="ecole.id"
+                class="flex items-start gap-3 px-3 py-2 rounded-lg"
+                style="background: var(--nav-bg-alt);">
+                <span class="w-3 h-3 rounded-full shrink-0 mt-1" :style="`background:${ecole.color};`"></span>
+                <div>
+                  <p class="text-sm font-semibold" style="color: var(--nav-text);">{{ ecole.label }}</p>
+                  <p class="text-xs mt-0.5 leading-relaxed" style="color: var(--nav-text-muted);">{{ ecole.description }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
       </div>
     </main>
 
@@ -195,7 +262,7 @@ interface LivreRag { slug: string; titre: string; annee: number; couches: string
 interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string }
 interface PenseesData { meta: any; ecoles: EcoleData[]; auteurs: AuteurData[] }
 
-type LayoutMode = 'split' | 'carte-full' | 'chatbot-full'
+type LayoutMode = 'split' | 'carte-full' | 'chatbot-full' | 'bonpote'
 
 const STORAGE_KEY = 'media-layout-mode'
 const SPLIT_RATIO_KEY = 'media-split-ratio'
@@ -261,7 +328,7 @@ function onHandleMouseup() {
 onMounted(async () => {
   if (typeof window !== 'undefined') {
     const saved = localStorage.getItem(STORAGE_KEY) as LayoutMode | null
-    if (saved && ['split', 'carte-full', 'chatbot-full'].includes(saved)) {
+    if (saved && ['split', 'carte-full', 'chatbot-full', 'bonpote'].includes(saved)) {
       layoutMode.value = saved
     }
     const savedRatio = parseFloat(localStorage.getItem(SPLIT_RATIO_KEY) ?? '')