From cd8fe9e258f2392c4a973704d9bf8e2dac691d8f Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Fri, 22 May 2026 15:50:22 +0200
Subject: [PATCH] =?UTF-8?q?fix(media):=20toolbar=20remise=20entre=20carte?=
 =?UTF-8?q?=20et=20chatbot=20+=20nav=20renomm=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- fix: layout-toggle-bar à l'intérieur du layout-container (entre carte D3 et chatbot)
- fix: chatbot de nouveau visible en mode split
- feat: nav "Écosystème Entraide Architecture" → "Écosystème Entraide"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app.vue                       |   2 +-
 components/MediaTabVisuel.vue | 414 +++++++++++++++++-----------------
 2 files changed, 204 insertions(+), 212 deletions(-)

diff --git a/app.vue b/app.vue
index 098f14f..797a879 100644
--- a/app.vue
+++ b/app.vue
@@ -34,7 +34,7 @@
           class="nav-tab"
           :class="{ 'nav-tab--active': route.path === '/' }"
         >
-          Écosystème Entraide Architecture
+          Écosystème Entraide
         </NuxtLink>
         <NuxtLink
           to="/agences"
diff --git a/components/MediaTabVisuel.vue b/components/MediaTabVisuel.vue
index e758a5f..1b303bd 100644
--- a/components/MediaTabVisuel.vue
+++ b/components/MediaTabVisuel.vue
@@ -1,182 +1,179 @@
 <template>
   <div class="media-visuel">
 
-    <!-- Barre de toggle (toujours visible) -->
-    <div class="layout-toggle-bar shrink-0">
-
-      <!-- Gauche : contrôles layout (uniquement en mode carte) -->
-      <template v-if="contentView === 'carte'">
-        <button
-          @click="layoutMode = 'carte-full'"
-          :class="{ active: layoutMode === 'carte-full' }"
-          class="toggle-btn"
-          title="Carte en plein ecran"
-        >
-          <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">
-            <polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
-            <line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
-          </svg>
-          Carte plein ecran
-        </button>
-        <button
-          v-if="layoutMode !== 'split'"
-          @click="layoutMode = 'split'"
-          class="toggle-btn"
-          title="Vue partagee"
-        >
-          <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">
-            <rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="12" x2="21" y2="12"/>
-          </svg>
-          Vue partagee
-        </button>
-        <button
-          @click="layoutMode = 'chatbot-full'"
-          :class="{ active: layoutMode === 'chatbot-full' }"
-          class="toggle-btn"
-          title="Chatbot plein ecran"
-        >
-          <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">
-            <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>
-          Chatbot plein ecran
-        </button>
-      </template>
-
-      <!-- Droite : contrôles contenu (indépendants du layout) -->
-      <div style="margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
-        <!-- Slider opacité PDF (quand activé et en mode carte) -->
-        <input
-          v-if="showFracasPdf && contentView === 'carte'"
-          type="range"
-          min="0"
-          max="100"
-          v-model.number="fracasOpacity"
-          class="opacity-slider"
-          :title="`Opacité ${fracasOpacity}%`"
-        />
-
-        <!-- CARTE PRINCIPALE -->
-        <button
-          @click="showCarte"
-          :class="{ active: contentView === 'carte' }"
-          class="toggle-btn"
-          title="Vue principale : carte D3 + chatbot"
-        >
-          <svg width="13" height="13" 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="2"/><path d="M12 2a10 10 0 0 0-7.07 17.07M12 2a10 10 0 0 1 7.07 17.07M3.34 7h17.32M3.34 17h17.32"/>
-          </svg>
-          CARTE PRINCIPALE
-        </button>
-
-        <!-- Tickbox PDF + carte des pensées écologiques -->
-        <div class="carte-pensees-ctrl">
-          <input
-            type="checkbox"
-            v-model="showFracasPdf"
-            class="fracas-check"
-            title="Superposer la carte FRACAS en PDF (mode carte)"
-          />
-          <button
-            @click="contentView = 'bonpote'"
-            :class="{ active: contentView === 'bonpote' }"
-            class="toggle-btn carte-pensees-btn"
-            title="Carte des pensées écologiques — référence FRACAS Bonpote V2"
-          >
-            📗 carte des pensées écologiques
-          </button>
-        </div>
-
-        <!-- RAG backend -->
-        <button
-          @click="contentView = 'rag-backend'"
-          :class="{ active: contentView === 'rag-backend' }"
-          class="toggle-btn"
-          title="Interface LightRAG backend"
-        >
-          <svg width="13" height="13" 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="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>
-          </svg>
-          RAG backend
-        </button>
-      </div>
-    </div>
-
-    <!-- Conteneur principal -->
+    <!-- Conteneur principal : carte → toolbar → chatbot (ou bonpote/rag-backend) -->
     <div class="layout-container">
 
-      <!-- VUE CARTE : carte D3 + poignee + chatbot -->
-      <template v-if="contentView === 'carte'">
+      <!-- SLOT CARTE D3 (mode carte uniquement) -->
+      <div
+        v-if="contentView === 'carte'"
+        class="carte-slot"
+        :class="[
+          layoutMode === 'split' ? 'carte-split' : '',
+          layoutMode === 'carte-full' ? 'carte-full' : '',
+          layoutMode === 'chatbot-full' ? 'carte-hidden' : '',
+        ]"
+        :style="layoutMode === 'split' ? { flexBasis: carteFlexBasis } : {}"
+        style="position: relative;"
+      >
+        <ClientOnly>
+          <CartePensees
+            ref="cartePenseesRef"
+            :data="penseesData"
+            :active="true"
+            @select-auteur="onSelectAuteur"
+            @select-ecole="onSelectEcole"
+          />
+          <template #fallback>
+            <div class="w-full h-full flex items-center justify-center" style="color: var(--nav-text-muted);">
+              Chargement de la carte...
+            </div>
+          </template>
+        </ClientOnly>
 
-        <!-- Slot carte D3 -->
+        <!-- Overlay PDF FRACAS -->
         <div
-          class="carte-slot"
-          :class="[
-            layoutMode === 'split' ? 'carte-split' : '',
-            layoutMode === 'carte-full' ? 'carte-full' : '',
-            layoutMode === 'chatbot-full' ? 'carte-hidden' : '',
-          ]"
-          :style="layoutMode === 'split' ? { flexBasis: carteFlexBasis } : {}"
-          style="position: relative;"
+          v-if="showFracasPdf"
+          class="fracas-overlay"
+          :style="{ opacity: fracasOpacity / 100 }"
         >
-          <ClientOnly>
-            <CartePensees
-              ref="cartePenseesRef"
-              :data="penseesData"
-              :active="true"
-              @select-auteur="onSelectAuteur"
-              @select-ecole="onSelectEcole"
-            />
-            <template #fallback>
-              <div class="w-full h-full flex items-center justify-center" style="color: var(--nav-text-muted);">
-                Chargement de la carte...
-              </div>
-            </template>
-          </ClientOnly>
+          <embed
+            src="/cartes/carte-fracas-bonpote-v2.pdf"
+            type="application/pdf"
+            style="width: 100%; height: 100%;"
+          />
+        </div>
+      </div>
 
-          <!-- Overlay PDF FRACAS -->
-          <div
-            v-if="showFracasPdf"
-            class="fracas-overlay"
-            :style="{ opacity: fracasOpacity / 100 }"
+      <!-- BARRE DE TOGGLE (entre carte et chatbot, toujours visible) -->
+      <div class="layout-toggle-bar shrink-0">
+
+        <!-- Gauche : contrôles layout (seulement en mode carte) -->
+        <template v-if="contentView === 'carte'">
+          <button
+            @click="layoutMode = 'carte-full'"
+            :class="{ active: layoutMode === 'carte-full' }"
+            class="toggle-btn"
+            title="Carte en plein ecran"
           >
-            <embed
-              src="/cartes/carte-fracas-bonpote-v2.pdf"
-              type="application/pdf"
-              style="width: 100%; height: 100%;"
+            <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">
+              <polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
+              <line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
+            </svg>
+            Carte plein ecran
+          </button>
+          <button
+            v-if="layoutMode !== 'split'"
+            @click="layoutMode = 'split'"
+            class="toggle-btn"
+            title="Vue partagee"
+          >
+            <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">
+              <rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="12" x2="21" y2="12"/>
+            </svg>
+            Vue partagee
+          </button>
+          <button
+            @click="layoutMode = 'chatbot-full'"
+            :class="{ active: layoutMode === 'chatbot-full' }"
+            class="toggle-btn"
+            title="Chatbot plein ecran"
+          >
+            <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">
+              <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>
+            Chatbot plein ecran
+          </button>
+        </template>
+
+        <!-- Droite : contrôles contenu (toujours, indépendants du layoutMode) -->
+        <div style="margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
+          <!-- Slider opacité PDF -->
+          <input
+            v-if="showFracasPdf && contentView === 'carte'"
+            type="range"
+            min="0"
+            max="100"
+            v-model.number="fracasOpacity"
+            class="opacity-slider"
+            :title="`Opacité ${fracasOpacity}%`"
+          />
+
+          <!-- CARTE PRINCIPALE -->
+          <button
+            @click="showCarte"
+            :class="{ active: contentView === 'carte' }"
+            class="toggle-btn"
+            title="Vue principale : carte D3 + chatbot"
+          >
+            <svg width="13" height="13" 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="2"/><path d="M12 2a10 10 0 0 0-7.07 17.07M12 2a10 10 0 0 1 7.07 17.07M3.34 7h17.32M3.34 17h17.32"/>
+            </svg>
+            CARTE PRINCIPALE
+          </button>
+
+          <!-- Tickbox PDF + carte des pensées -->
+          <div class="carte-pensees-ctrl">
+            <input
+              type="checkbox"
+              v-model="showFracasPdf"
+              class="fracas-check"
+              title="Superposer la carte FRACAS en PDF"
             />
+            <button
+              @click="contentView = 'bonpote'"
+              :class="{ active: contentView === 'bonpote' }"
+              class="toggle-btn carte-pensees-btn"
+              title="Carte des pensées écologiques — référence FRACAS Bonpote V2"
+            >
+              📗 carte des pensées écologiques
+            </button>
           </div>
-        </div>
 
-        <!-- Poignee draggable (split uniquement) -->
-        <div
-          v-if="layoutMode === 'split'"
-          class="split-handle"
-          @mousedown.prevent="onHandleMousedown"
-          title="Redimensionner"
-        >
-          <span class="split-handle-grip"></span>
+          <!-- RAG backend -->
+          <button
+            @click="contentView = 'rag-backend'"
+            :class="{ active: contentView === 'rag-backend' }"
+            class="toggle-btn"
+            title="Interface LightRAG backend"
+          >
+            <svg width="13" height="13" 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="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>
+            </svg>
+            RAG backend
+          </button>
         </div>
+      </div>
 
-        <!-- Slot chatbot -->
-        <div
-          class="chatbot-slot"
-          :class="[
-            layoutMode === 'split' ? 'chatbot-split' : '',
-            layoutMode === 'chatbot-full' ? 'chatbot-full-mode' : '',
-            layoutMode === 'carte-full' ? 'chatbot-hidden' : '',
-          ]"
-          :style="layoutMode === 'split' ? { flexBasis: chatbotFlexBasis } : {}"
-        >
-          <ClientOnly>
-            <ChatbotPensees :auteurContext="chatbotAuteur" :inline="true" />
-          </ClientOnly>
-        </div>
+      <!-- POIGNEE DRAGGABLE (split uniquement) -->
+      <div
+        v-if="contentView === 'carte' && layoutMode === 'split'"
+        class="split-handle"
+        @mousedown.prevent="onHandleMousedown"
+        title="Redimensionner"
+      >
+        <span class="split-handle-grip"></span>
+      </div>
 
-      </template>
+      <!-- SLOT CHATBOT (mode carte uniquement) -->
+      <div
+        v-if="contentView === 'carte'"
+        class="chatbot-slot"
+        :class="[
+          layoutMode === 'split' ? 'chatbot-split' : '',
+          layoutMode === 'chatbot-full' ? 'chatbot-full-mode' : '',
+          layoutMode === 'carte-full' ? 'chatbot-hidden' : '',
+        ]"
+        :style="layoutMode === 'split' ? { flexBasis: chatbotFlexBasis } : {}"
+      >
+        <ClientOnly>
+          <ChatbotPensees :auteurContext="chatbotAuteur" :inline="true" />
+        </ClientOnly>
+      </div>
 
       <!-- VUE BONPOTE -->
       <div
-        v-else-if="contentView === 'bonpote'"
+        v-if="contentView === 'bonpote'"
         class="flex-1 overflow-y-auto px-6 py-8"
         style="max-width: 680px; margin: 0 auto;"
       >
@@ -231,7 +228,7 @@
 
       <!-- VUE RAG BACKEND -->
       <div
-        v-else-if="contentView === 'rag-backend'"
+        v-if="contentView === 'rag-backend'"
         style="flex: 1; overflow: hidden; display: flex; flex-direction: column;"
       >
         <MediaTabBackend />
@@ -351,9 +348,7 @@ function showCarte() {
     localStorage.setItem(CONTENT_KEY, 'carte')
     localStorage.setItem(LAYOUT_KEY, 'split')
   }
-  nextTick(() => {
-    cartePenseesRef.value?.triggerResize()
-  })
+  nextTick(() => cartePenseesRef.value?.triggerResize())
 }
 
 function onHandleMousedown(e: MouseEvent) {
@@ -374,9 +369,7 @@ function onHandleMousemove(e: MouseEvent) {
 function onHandleMouseup() {
   window.removeEventListener('mousemove', onHandleMousemove)
   window.removeEventListener('mouseup', onHandleMouseup)
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(SPLIT_RATIO_KEY, String(splitRatio.value))
-  }
+  if (typeof window !== 'undefined') localStorage.setItem(SPLIT_RATIO_KEY, String(splitRatio.value))
   cartePenseesRef.value?.triggerResize()
 }
 
@@ -459,7 +452,49 @@ function onInterrogerRag(auteurId: string) {
   min-height: 0;
 }
 
-/* --- Barre de toggle --- */
+.layout-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* --- Slot carte --- */
+.carte-slot {
+  overflow: hidden;
+  position: relative;
+  transition: opacity 0.2s ease;
+}
+
+.carte-split {
+  flex: 0 0 66%;
+  min-height: 0;
+  opacity: 1;
+}
+
+.carte-full {
+  flex: 1 1 100%;
+  min-height: 0;
+  opacity: 1;
+}
+
+.carte-hidden {
+  flex: 0 0 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+/* --- Overlay PDF FRACAS --- */
+.fracas-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 50;
+  pointer-events: none;
+}
+
+/* --- Barre de toggle (entre carte et chatbot) --- */
 .layout-toggle-bar {
   flex-shrink: 0;
   display: flex;
@@ -526,49 +561,6 @@ function onInterrogerRag(auteurId: string) {
   accent-color: var(--nav-primary, #3b6ea5);
 }
 
-/* --- Conteneur principal --- */
-.layout-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
-}
-
-/* --- Slot carte --- */
-.carte-slot {
-  overflow: hidden;
-  position: relative;
-  transition: opacity 0.2s ease;
-}
-
-.carte-split {
-  flex: 0 0 66%;
-  min-height: 0;
-  opacity: 1;
-}
-
-.carte-full {
-  flex: 1 1 100%;
-  min-height: 0;
-  opacity: 1;
-}
-
-.carte-hidden {
-  flex: 0 0 0;
-  height: 0;
-  opacity: 0;
-  overflow: hidden;
-}
-
-/* --- Overlay PDF FRACAS --- */
-.fracas-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 50;
-  pointer-events: none;
-}
-
 /* --- Poignee draggable --- */
 .split-handle {
   flex-shrink: 0;