<template>
  <div class="media-page" style="background: var(--nav-bg);">

    <!-- ZONE PRINCIPALE (pleine largeur, pas de sidebar) -->
    <main class="media-main">

      <!-- Header onglet -->
      <div class="shrink-0 px-5 py-3"
        style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt); display:flex; align-items:center; justify-content:space-between; gap:12px;">
        <div>
          <h1 class="font-bold text-base" style="color: var(--nav-text);">ATIS Media</h1>
          <p class="text-xs mt-0.5" style="color: var(--nav-text-muted);">
            {{ corpusCount }} auteurs / {{ livresCount }} livres ingeres dans le RAG -
            <a href="https://bonpote.com/la-carte-des-pensees-ecologiques/"
              target="_blank" rel="noopener"
              style="color: var(--nav-primary, #3b6ea5); text-decoration: underline; text-underline-offset: 2px;">
              carte FRACAS Bonpote V2
            </a>
          </p>
        </div>
        <button
          @click="ragInfoOpen = true"
          title="A propos du RAG FRACAS"
          style="width:26px;height:26px;border-radius:50%;border:1.5px solid var(--nav-text-muted);color:var(--nav-text-muted);font-size:0.72rem;font-weight:700;cursor:pointer;flex-shrink:0;background:var(--nav-bg-alt);display:flex;align-items:center;justify-content:center;"
          aria-label="A propos du RAG">
          i
        </button>
      </div>

      <!-- Conteneur split / plein ecran -->
      <div class="layout-container">

        <!-- Slot carte D3 -->
        <div
          class="carte-slot"
          :class="[
            layoutMode === 'split' ? 'carte-split' : '',
            layoutMode === 'carte-full' ? 'carte-full' : '',
            layoutMode === 'chatbot-full' ? 'carte-hidden' : '',
          ]"
          :style="layoutMode === 'split' ? { flexBasis: carteFlexBasis } : {}"
        >
          <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>
        </div>

        <!-- Barre de toggle -->
        <div class="layout-toggle-bar shrink-0">
          <button
            @click="setLayoutMode('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="setLayoutMode('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="setLayoutMode('chatbot-full')"
            :class="{ active: layoutMode === 'chatbot-full' }"
            class="toggle-btn"
            title="Chatbot 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">
              <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>
          <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) -->
        <div
          v-if="layoutMode === 'split'"
          class="split-handle"
          @mousedown.prevent="onHandleMousedown"
          title="Redimensionner"
        >
          <span class="split-handle-grip"></span>
        </div>

        <!-- Slot chatbot inline -->
        <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>

        <!-- 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>

    <!-- Fiche auteur modal -->
    <FicheAuteur
      :open="ficheOpen"
      :auteurId="ficheAuteurId"
      :data="penseesData"
      @close="ficheOpen = false"
      @interroger-rag="onInterrogerRag"
    />

    <!-- Fiche ecole modal -->
    <FicheEcole
      :open="ficheEcoleOpen"
      :ecoleId="ficheEcoleId"
      :data="penseesData"
      @close="ficheEcoleOpen = false"
      @select-auteur="onSelectAuteurFromEcole"
      @interroger-ecole="onInterrogerEcole"
    />

    <!-- Modal info RAG -->
    <Teleport to="body">
      <Transition name="backdrop">
        <div v-if="ragInfoOpen" class="fixed inset-0 z-[2000]" style="background:rgba(26,34,56,0.55);" @click="ragInfoOpen = false" aria-hidden="true" />
      </Transition>
      <Transition name="modal">
        <div v-if="ragInfoOpen" class="fixed z-[2001] left-1/2 flex flex-col"
          style="top:50%;transform:translate(-50%,-50%);width:min(580px,94vw);max-height:85vh;background:var(--nav-bg);border-radius:14px;box-shadow:0 16px 64px rgba(26,34,56,0.28);overflow:hidden;"
          role="dialog" aria-modal="true" aria-label="A propos du RAG FRACAS">
          <div class="flex items-center justify-between px-5 py-4 shrink-0"
            style="border-bottom:2px solid var(--nav-bg-alt);background:var(--nav-surface);">
            <h2 class="font-bold text-base" style="color:var(--nav-text);">FRACAS - Bibliotheque des pensees ecologiques</h2>
            <button @click="ragInfoOpen = false" class="ml-3 shrink-0 flex items-center justify-center w-8 h-8 rounded-full hover:opacity-70"
              style="background:var(--nav-bg-alt);color:var(--nav-text-muted);" aria-label="Fermer">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            </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;">
            <p class="mb-3">Une bibliotheque parlante politisee - des pensees ecologiques de gauche, organisees pour aider a creer une pensee complexe et nuancee, critiquer le recit dominant et soutenir des alternatives concretes et des projets collectifs.</p>
            <p class="mb-4" style="color:var(--nav-text-muted);font-size:0.8rem;">Projet open source, ouvert a toutes et a 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">
              <div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
                <p class="font-semibold mb-1" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Ce qu'est un RAG</p>
                <p>Les textes sont vectorises dans un espace de 662 dimensions - chaque livre devient un nuage de points semantiques. La proximite entre les points capture la proximite entre les idees, pas les mots.</p>
              </div>
              <div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
                <p class="font-semibold mb-1" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Chunking intelligent</p>
                <p>Lors de l'ingestion, nous selectionnons les entites cles (concepts, auteurs, relations entre idees) plutot que de decouper mecaniquement les textes.</p>
              </div>
              <div class="p-3 rounded-lg" style="background:var(--nav-bg-alt);">
                <p class="font-semibold mb-2" style="font-size:0.8rem;color:var(--nav-text-muted);text-transform:uppercase;letter-spacing:0.05em;">Trois couches d'analyse</p>
                <div class="flex flex-col gap-1.5">
                  <div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Fond</span><span>Les idees, les theses, les arguments - ce qu'on interroge directement.</span></div>
                  <div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Forme</span><span>Les modeles narratifs, la rhetorique, la construction argumentative.</span></div>
                  <div class="flex gap-2"><span class="font-semibold" style="min-width:70px;">Structure</span><span>L'architecture des livres - comment les auteurs construisent leur pensee.</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Transition>
    </Teleport>

  </div>
</template>

<script setup lang="ts">
interface EcoleData { id: string; label: string; description: string; color: string; x_hint: number; y_hint: number }
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' | 'bonpote'

const STORAGE_KEY = 'media-layout-mode'
const SPLIT_RATIO_KEY = 'media-split-ratio'
const DEFAULT_SPLIT_RATIO = 0.66

const ficheOpen = ref(false)
const ficheAuteurId = ref<string | null>(null)
const ficheEcoleOpen = ref(false)
const ficheEcoleId = ref<string | null>(null)
const ragInfoOpen = ref(false)
const chatbotAuteur = ref<string | null>(null)
const penseesData = ref<PenseesData | null>(null)
const layoutMode = ref<LayoutMode>('split')
const cartePenseesRef = ref<{ triggerResize: () => void } | null>(null)

// Ratio de la carte vs chatbot en mode split (0.2 a 0.8)
const splitRatio = ref(DEFAULT_SPLIT_RATIO)
const carteFlexBasis = computed(() => `${splitRatio.value * 100}%`)
const chatbotFlexBasis = computed(() => `${(1 - splitRatio.value) * 100}%`)

const corpusCount = computed(() => penseesData.value?.auteurs.filter((a: any) => a.ingere).length ?? 0)
const livresCount = computed(() => {
  if (!penseesData.value) return 0
  const slugs = new Set<string>()
  penseesData.value.auteurs
    .filter((a: any) => a.ingere)
    .forEach((a: any) => (a.livres_rag ?? []).forEach((l: any) => slugs.add(l.slug)))
  return slugs.size
})

// Logique poignee draggable
let dragStartY = 0
let dragStartRatio = DEFAULT_SPLIT_RATIO
let containerHeight = 0

function onHandleMousedown(e: MouseEvent) {
  dragStartY = e.clientY
  dragStartRatio = splitRatio.value
  // Hauteur du layout-container (carte + handle + chatbot)
  const container = (e.target as HTMLElement)?.closest('.layout-container') as HTMLElement | null
  containerHeight = container ? container.clientHeight : window.innerHeight

  window.addEventListener('mousemove', onHandleMousemove)
  window.addEventListener('mouseup', onHandleMouseup)
}

function onHandleMousemove(e: MouseEvent) {
  const delta = e.clientY - dragStartY
  const newRatio = dragStartRatio + delta / containerHeight
  splitRatio.value = Math.min(0.80, Math.max(0.20, newRatio))
}

function onHandleMouseup() {
  window.removeEventListener('mousemove', onHandleMousemove)
  window.removeEventListener('mouseup', onHandleMouseup)
  if (typeof window !== 'undefined') {
    localStorage.setItem(SPLIT_RATIO_KEY, String(splitRatio.value))
  }
  // Notifier D3 du resize apres relachement
  cartePenseesRef.value?.triggerResize()
}

onMounted(async () => {
  if (typeof window !== 'undefined') {
    const saved = localStorage.getItem(STORAGE_KEY) as LayoutMode | null
    if (saved && ['split', 'carte-full', 'chatbot-full', 'bonpote'].includes(saved)) {
      layoutMode.value = saved
    }
    const savedRatio = parseFloat(localStorage.getItem(SPLIT_RATIO_KEY) ?? '')
    if (!isNaN(savedRatio) && savedRatio >= 0.20 && savedRatio <= 0.80) {
      splitRatio.value = savedRatio
    }
    // Afficher le popup info RAG a la premiere visite
    if (!localStorage.getItem('rag-fracas-info-seen')) {
      ragInfoOpen.value = true
      localStorage.setItem('rag-fracas-info-seen', '1')
    }
  }
  try {
    penseesData.value = await $fetch<PenseesData>('/data/auteurs-pensees.json?v=4.2')
  } catch (e) {
    console.error('Erreur chargement auteurs-pensees.json', e)
  }
})

// Persister + reset D3 apres transition
function setLayoutMode(mode: LayoutMode) {
  layoutMode.value = mode
  if (typeof window !== 'undefined') {
    localStorage.setItem(STORAGE_KEY, mode)
  }
  // Restart simulation D3 apres la fin de la transition CSS (300ms)
  if (mode !== 'chatbot-full') {
    setTimeout(() => {
      cartePenseesRef.value?.triggerResize()
    }, 350)
  }
}

watch(layoutMode, (v) => {
  if (typeof window !== 'undefined') {
    localStorage.setItem(STORAGE_KEY, v)
  }
})

function onSelectAuteur(id: string) {
  ficheAuteurId.value = id
  ficheOpen.value = true
  chatbotAuteur.value = null
}

function onSelectEcole(id: string) {
  ficheEcoleId.value = id
  ficheEcoleOpen.value = true
}

function onSelectAuteurFromEcole(auteurId: string) {
  ficheEcoleOpen.value = false
  onSelectAuteur(auteurId)
}

function onInterrogerEcole(ecoleId: string) {
  ficheEcoleOpen.value = false
  const ecole = penseesData.value?.ecoles.find(e => e.id === ecoleId)
  chatbotAuteur.value = ecole?.label ?? null
  if (layoutMode.value === 'carte-full') setLayoutMode('split')
}

function onInterrogerRag(auteurId: string) {
  ficheOpen.value = false
  const auteur = penseesData.value?.auteurs.find(a => a.id === auteurId)
  chatbotAuteur.value = auteur?.nom ?? null
  // Basculer en split pour que le chatbot soit visible
  if (layoutMode.value === 'carte-full') {
    setLayoutMode('split')
  }
}

useHead({ title: 'AEP - Media - Carte FRACAS Bonpote' })
</script>

<style scoped>
/* Page container : flex column, prend toute la hauteur viewport */
.media-page {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.media-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Conteneur des slots carte + toggle + chatbot */
.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;
}

/* --- Barre de toggle --- */
.layout-toggle-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--nav-bg);
  border-top: 1px solid rgba(180, 170, 160, 0.22);
  border-bottom: 1px solid rgba(180, 170, 160, 0.22);
  min-height: 38px;
}

.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--nav-bg-alt);
  color: var(--nav-text-muted);
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.toggle-btn:hover {
  background: var(--nav-surface);
  color: var(--nav-text);
}

.toggle-btn.active {
  background: var(--nav-primary);
  color: var(--nav-text-on-primary);
  border-color: var(--nav-primary);
}

/* --- Poignee draggable entre carte et chatbot --- */
.split-handle {
  flex-shrink: 0;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  background: transparent;
  position: relative;
  z-index: 10;
  user-select: none;
}

.split-handle:hover {
  background: rgba(180, 170, 160, 0.18);
}

.split-handle-grip {
  display: block;
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(160, 150, 140, 0.55) 0px,
    rgba(160, 150, 140, 0.55) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Masquer la poignee sur mobile (ratio fixe) */
@media (max-width: 767px) {
  .split-handle {
    display: none;
  }
}

/* --- Slot chatbot --- */
.chatbot-slot {
  overflow: hidden;
  position: relative;
  transition: opacity 0.2s ease;
  border-top: 1px solid rgba(180, 170, 160, 0.28);
}

.chatbot-split {
  flex: 0 0 34%;
  min-height: 0;
  opacity: 1;
}

.chatbot-full-mode {
  flex: 1 1 100%;
  min-height: 0;
  opacity: 1;
}

.chatbot-hidden {
  flex: 0 0 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

/* --- Transitions modal RAG info --- */
.backdrop-enter-active,.backdrop-leave-active { transition: opacity 0.2s; }
.backdrop-enter-from,.backdrop-leave-to { opacity: 0; }
.modal-enter-active { transition: opacity 0.2s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
.modal-leave-active { transition: opacity 0.18s, transform 0.18s ease-in; }
.modal-enter-from { opacity: 0; transform: translate(-50%,-48%) scale(0.94); }
.modal-leave-to { opacity: 0; transform: translate(-50%,-48%) scale(0.96); }

/* --- Responsive mobile (<768px) --- */
/* Stack vertical : carte 60vh + chatbot 40vh en mode split */
@media (max-width: 767px) {
  .carte-split {
    flex: 0 0 60vh;
    height: 60vh;
  }

  .chatbot-split {
    flex: 0 0 calc(40vh - 38px);
    height: calc(40vh - 38px);
  }

  .toggle-btn span,
  .toggle-btn {
    font-size: 0.7rem;
    padding: 3px 7px;
  }
}
</style>
