diff --git a/components/ChatbotPensees.vue b/components/ChatbotPensees.vue
new file mode 100644
index 0000000..4f7006d
--- /dev/null
+++ b/components/ChatbotPensees.vue
@@ -0,0 +1 @@
+<template>   <!-- Mode overlay : bouton flottant bottom-right (legacy) -->   <template v-if="!inline">     <button v-if="!open" @click="open = true"       class="fixed bottom-6 right-6 z-[1000] flex items-center gap-2 px-4 rounded-full shadow-lg"       style="height:48px;background:var(--nav-primary);color:var(--nav-text-on-primary);font-size:0.875rem;font-weight:600;"       aria-label="Chatbot Pensees Ecologiques">       <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>       <span>Pensees ?</span>     </button>      <Transition name="cpanel">       <div v-if="open" class="fixed bottom-6 right-6 z-[1000] flex flex-col"         style="width:min(360px,calc(100vw - 24px));max-height:60vh;background:var(--nav-surface);border-radius:14px;box-shadow:0 8px 32px rgba(26,34,56,0.22);overflow:hidden;border:1px solid var(--nav-bg-alt);"         role="dialog" aria-modal="true" aria-label="RAG Pensees Ecologiques">          <!-- Header overlay -->         <div class="flex items-center justify-between px-4 py-3 shrink-0" style="border-bottom:1px solid var(--nav-bg-alt);background:var(--nav-bg);">           <div>             <p class="text-sm font-bold" style="color:var(--nav-text);">RAG Pensees Ecologiques</p>           </div>           <button @click="open = false" class="flex items-center justify-center w-7 h-7 rounded-full hover:opacity-70"             style="background:var(--nav-bg-alt);color:var(--nav-text-muted);" aria-label="Fermer">             <svg width="12" height="12" 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>          <!-- Corpus toggle overlay -->         <div class="shrink-0 px-3 pt-2 pb-1" style="background:var(--nav-bg);border-bottom:1px solid var(--nav-bg-alt);">           <div class="flex gap-1" role="group" aria-label="Choisir le corpus">             <button v-for="opt in corpusOptions" :key="opt.value" @click="setCorpus(opt.value)" :title="opt.tooltip"               class="flex-1 px-2 py-1 rounded text-xs font-medium transition-colors"               :style="corpus === opt.value ? 'background:var(--nav-primary);color:var(--nav-text-on-primary);' : 'background:var(--nav-bg-alt);color:var(--nav-text-muted);'"               :aria-pressed="corpus === opt.value">{{ opt.label }}</button>           </div>         </div>          <!-- Messages overlay -->         <div ref="msgElOverlay" class="flex-1 overflow-y-auto px-4 py-3 flex flex-col gap-3" style="min-height:0;">           <div v-if="messages.length === 0" style="font-size:0.8rem;color:var(--nav-text-muted);line-height:1.5;">             <template v-if="corpus === 'pensees'">Pose une question sur les pensees ecologiques...</template>             <template v-else-if="corpus === 'projets'">Pose une question sur les projets d'architecture de Jules...</template>             <template v-else>Pose une question sur les pensees ecologiques ancrees dans les projets archi de Jules.</template>           </div>           <template v-for="(msg, i) in messages" :key="i">             <div v-if="msg.role === 'user'" class="self-end max-w-[85%] px-3 py-2 rounded-xl text-sm"               style="background:var(--nav-primary);color:var(--nav-text-on-primary);font-weight:500;">{{ msg.content }}</div>             <div v-else class="self-start max-w-full">               <div class="px-3 py-2 rounded-xl text-sm leading-relaxed" style="background:var(--nav-bg-alt);color:var(--nav-text);"                 v-html="renderMd(stripSrc(msg.content))" />               <div v-if="filteredSources(msg.content).length" class="mt-1.5">                 <button @click="toggled[i] = !toggled[i]" class="flex items-center gap-1 text-xs hover:opacity-70" style="color:var(--nav-text-muted);">                   <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"                     :style="`transform:rotate(${toggled[i] ? 90 : 0}deg);transition:transform 0.15s`"><polyline points="9 18 15 12 9 6"/></svg>                   Sources ({{ filteredSources(msg.content).length }})                 </button>                 <div v-if="toggled[i]" class="mt-1 flex flex-col gap-1">                   <div v-for="(s, si) in filteredSources(msg.content)" :key="si" class="px-2 py-1 rounded text-xs"                     style="background:var(--nav-bg-alt);color:var(--nav-text-muted);border-left:2px solid var(--nav-primary-solid);">                     <span style="font-weight:600;color:var(--nav-text);">[{{ si + 1 }}]</span> {{ s }}                   </div>                 </div>               </div>             </div>           </template>           <div v-if="loading" class="self-start px-3 py-2 rounded-xl" style="background:var(--nav-bg-alt);">             <span class="dots"><span/><span style="animation-delay:150ms"/><span style="animation-delay:300ms"/></span>           </div>           <div v-if="err" class="text-xs px-3 py-2 rounded-xl" style="background:#fee;color:#c0392b;">{{ err }}</div>         </div>          <!-- Input overlay -->         <div class="shrink-0 px-3 py-3" style="border-top:1px solid var(--nav-bg-alt);">           <div class="flex items-center gap-2" style="position:relative;">             <!-- Hashtag autocomplete dropdown (Slack/Discord pattern, au-dessus de l'input) -->             <div v-if="hashtagDropdownOpen && hashtagSuggestions.length"               class="hashtag-dropdown"               style="position:absolute;bottom:100%;left:0;right:0;margin-bottom:6px;max-height:220px;overflow-y:auto;background:var(--nav-surface);border:1px solid var(--nav-bg-alt);border-radius:8px;box-shadow:0 -4px 12px rgba(0,0,0,0.12);z-index:50;">               <div v-for="(auteur, idx) in hashtagSuggestions" :key="auteur.id"                 @mousedown.prevent="applyHashtagSuggestion(auteur)"                 @mouseenter="hashtagSelectedIndex = idx"                 class="px-3 py-2 cursor-pointer text-sm"                 :style="idx === hashtagSelectedIndex ? 'background:var(--nav-primary);color:var(--nav-text-on-primary);' : 'color:var(--nav-text);'">                 <span style="font-weight:600;">#{{ auteur.id }}</span>                 <span :style="idx === hashtagSelectedIndex ? 'opacity:0.85;margin-left:8px;font-size:0.78rem;' : 'opacity:0.65;margin-left:8px;font-size:0.78rem;color:var(--nav-text-muted);'">{{ auteur.nom }}</span>               </div>             </div>             <input ref="inputElOverlay" v-model="q" type="text" placeholder="Ta question, tape #auteur pour cibler" maxlength="500"               class="flex-1 px-3 py-2 rounded-lg text-sm outline-none"               style="background:var(--nav-bg);color:var(--nav-text);border:1px solid var(--nav-bg-alt);"               @keydown="onInputKeydown" />             <button @click="send" :disabled="loading || !q.trim()"               class="flex items-center justify-center w-9 h-9 rounded-lg"               :style="loading||!q.trim() ? 'background:var(--nav-bg-alt);opacity:0.5;cursor:not-allowed;' : 'background:var(--nav-primary);cursor:pointer;'"               aria-label="Envoyer">               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="color:white;">                 <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>               </svg>             </button>           </div>         </div>        </div>     </Transition>   </template>    <!-- Mode inline : remplit 100% de son parent slot -->   <div v-else     class="flex flex-col w-full h-full"     style="background:var(--nav-surface);overflow:hidden;"     role="region" aria-label="RAG Pensees Ecologiques">      <!-- Header inline -->     <div class="flex items-center justify-between px-4 py-2 shrink-0" style="border-bottom:1px solid var(--nav-bg-alt);background:var(--nav-bg);">       <div>         <p class="text-sm font-bold" style="color:var(--nav-text);">RAG Pensees Ecologiques</p>       </div>     </div>      <!-- Corpus toggle inline -->     <div class="shrink-0 px-3 pt-2 pb-1" style="background:var(--nav-bg);border-bottom:1px solid var(--nav-bg-alt);">       <div class="flex gap-1" role="group" aria-label="Choisir le corpus">         <button v-for="opt in corpusOptions" :key="opt.value" @click="setCorpus(opt.value)" :title="opt.tooltip"           class="flex-1 px-2 py-1 rounded text-xs font-medium transition-colors"           :style="corpus === opt.value ? 'background:var(--nav-primary);color:var(--nav-text-on-primary);' : 'background:var(--nav-bg-alt);color:var(--nav-text-muted);'"           :aria-pressed="corpus === opt.value">{{ opt.label }}</button>       </div>     </div>      <!-- Messages inline -->     <div ref="msgElInline" class="flex-1 overflow-y-auto px-4 py-3 flex flex-col gap-3" style="min-height:0;">       <div v-if="messages.length === 0" style="font-size:0.8rem;color:var(--nav-text-muted);line-height:1.5;">         <template v-if="corpus === 'pensees'">Pose une question sur les pensees ecologiques : ecosocialisme, decroissance, ecofeminismes, technocritique, deep ecology...</template>         <template v-else-if="corpus === 'projets'">Pose une question sur les projets d'architecture de Jules : Butte Pinson, strategie thermique, partis pris constructifs...</template>         <template v-else>Pose une question sur les pensees ecologiques ancrees dans les projets archi de Jules (corpus croise, defaut).</template>       </div>       <template v-for="(msg, i) in messages" :key="i">         <div v-if="msg.role === 'user'" class="self-end max-w-[85%] px-3 py-2 rounded-xl text-sm"           style="background:var(--nav-primary);color:var(--nav-text-on-primary);font-weight:500;">{{ msg.content }}</div>         <div v-else class="self-start max-w-full">           <div class="px-3 py-2 rounded-xl text-sm leading-relaxed" style="background:var(--nav-bg-alt);color:var(--nav-text);"             v-html="renderMd(stripSrc(msg.content))" />           <div v-if="filteredSources(msg.content).length" class="mt-1.5">             <button @click="toggled[i] = !toggled[i]" class="flex items-center gap-1 text-xs hover:opacity-70" style="color:var(--nav-text-muted);">               <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"                 :style="`transform:rotate(${toggled[i] ? 90 : 0}deg);transition:transform 0.15s`"><polyline points="9 18 15 12 9 6"/></svg>               Sources ({{ filteredSources(msg.content).length }})             </button>             <div v-if="toggled[i]" class="mt-1 flex flex-col gap-1">               <div v-for="(s, si) in filteredSources(msg.content)" :key="si" class="px-2 py-1 rounded text-xs"                 style="background:var(--nav-bg-alt);color:var(--nav-text-muted);border-left:2px solid var(--nav-primary-solid);">                 <span style="font-weight:600;color:var(--nav-text);">[{{ si + 1 }}]</span> {{ s }}               </div>             </div>           </div>         </div>       </template>       <div v-if="loading" class="self-start px-3 py-2 rounded-xl" style="background:var(--nav-bg-alt);">         <span class="dots"><span/><span style="animation-delay:150ms"/><span style="animation-delay:300ms"/></span>       </div>       <div v-if="err" class="text-xs px-3 py-2 rounded-xl" style="background:#fee;color:#c0392b;">{{ err }}</div>     </div>      <!-- Input inline -->     <div class="shrink-0 px-3 py-3" style="border-top:1px solid var(--nav-bg-alt);">       <div class="flex items-center gap-2" style="position:relative;">         <!-- Hashtag autocomplete dropdown (Slack/Discord pattern, au-dessus de l'input) -->         <div v-if="hashtagDropdownOpen && hashtagSuggestions.length"           class="hashtag-dropdown"           style="position:absolute;bottom:100%;left:0;right:0;margin-bottom:6px;max-height:220px;overflow-y:auto;background:var(--nav-surface);border:1px solid var(--nav-bg-alt);border-radius:8px;box-shadow:0 -4px 12px rgba(0,0,0,0.12);z-index:50;">           <div v-for="(auteur, idx) in hashtagSuggestions" :key="auteur.id"             @mousedown.prevent="applyHashtagSuggestion(auteur)"             @mouseenter="hashtagSelectedIndex = idx"             class="px-3 py-2 cursor-pointer text-sm"             :style="idx === hashtagSelectedIndex ? 'background:var(--nav-primary);color:var(--nav-text-on-primary);' : 'color:var(--nav-text);'">             <span style="font-weight:600;">#{{ auteur.id }}</span>             <span :style="idx === hashtagSelectedIndex ? 'opacity:0.85;margin-left:8px;font-size:0.78rem;' : 'opacity:0.65;margin-left:8px;font-size:0.78rem;color:var(--nav-text-muted);'">{{ auteur.nom }}</span>           </div>         </div>         <input ref="inputElInline" v-model="q" type="text" placeholder="Ta question, tape #auteur pour cibler" maxlength="500"           class="flex-1 px-3 py-2 rounded-lg text-sm outline-none"           style="background:var(--nav-bg);color:var(--nav-text);border:1px solid var(--nav-bg-alt);"           @keydown="onInputKeydown" />         <button @click="send" :disabled="loading || !q.trim()"           class="flex items-center justify-center w-9 h-9 rounded-lg"           :style="loading||!q.trim() ? 'background:var(--nav-bg-alt);opacity:0.5;cursor:not-allowed;' : 'background:var(--nav-primary);cursor:pointer;'"           aria-label="Envoyer">           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="color:white;">             <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>           </svg>         </button>       </div>     </div>    </div> </template>  <script setup lang="ts"> interface Message { role: 'user' | 'assistant'; content: string } interface AuteurMini { id: string; nom: string }  type CorpusMode = 'pensees' | 'projets' | 'both'  const CORPUS_STORAGE_KEY = 'chatbot-pensees-corpus'  const PROJECT_SOURCE_PATTERNS = [/butte.?pinson/i, /butte_pinson/i]  function isProjectSource(s: string): boolean {   return PROJECT_SOURCE_PATTERNS.some(p => p.test(s)) }  const corpusOptions: { value: CorpusMode; label: string; tooltip: string }[] = [   { value: 'pensees', label: 'Pensees', tooltip: 'Corpus FRACAS uniquement (auteurs ecologie politique)' },   { value: 'projets', label: 'Projets', tooltip: 'Projets archi de Jules uniquement' },   { value: 'both',    label: 'Croise*', tooltip: 'Projets ancres + pensees en eclairage (defaut)' }, ]  const props = defineProps<{   auteurContext?: string | null   inline?: boolean }>()  const open = ref(false) const q = ref('') const messages = ref<Message[]>([]) const loading = ref(false) const err = ref('') const toggled = ref<Record<number, boolean>>({}) const msgElOverlay = ref<HTMLElement | null>(null) const msgElInline = ref<HTMLElement | null>(null) const inputElOverlay = ref<HTMLInputElement | null>(null) const inputElInline = ref<HTMLInputElement | null>(null) const corpusCount = 18  const corpus = ref<CorpusMode>('pensees')  // Phase 8.E : hashtag mentions const auteursIngeres = ref<AuteurMini[]>([]) const hashtagSuggestions = ref<AuteurMini[]>([]) const hashtagDropdownOpen = ref(false) const hashtagSelectedIndex = ref(0)  function getActiveInput(): HTMLInputElement | null {   return props.inline ? inputElInline.value : inputElOverlay.value }  function detectHashtagAtCursor(input: string, cursorPos: number): { start: number; partial: string } | null {   const before = input.slice(0, cursorPos)   const m = before.match(/#([a-z0-9-]*)$/i)   if (!m) return null   return { start: m.index ?? 0, partial: (m[1] || '').toLowerCase() } }  function updateHashtagSuggestions() {   const el = getActiveInput()   const cursorPos = el?.selectionStart ?? q.value.length   const detection = detectHashtagAtCursor(q.value, cursorPos)   // Ouvrir dès que le # est présent (partial vide accepté pour afficher la liste)   if (!detection) {     hashtagDropdownOpen.value = false     return   }   const partial = detection.partial   const list = partial.length === 0     ? auteursIngeres.value.slice(0, 8)     : auteursIngeres.value         .filter(a => a.id.toLowerCase().includes(partial) || a.nom.toLowerCase().includes(partial))         .slice(0, 8)   hashtagSuggestions.value = list   hashtagDropdownOpen.value = list.length > 0   hashtagSelectedIndex.value = 0 }  function applyHashtagSuggestion(auteur: AuteurMini) {   const el = getActiveInput()   const cursorPos = el?.selectionStart ?? q.value.length   const detection = detectHashtagAtCursor(q.value, cursorPos)   if (!detection) return   const before = q.value.slice(0, detection.start)   const after = q.value.slice(cursorPos)   const insert = '#' + auteur.id + ' '   q.value = before + insert + after   hashtagDropdownOpen.value = false   nextTick(() => {     const focusEl = getActiveInput()     if (!focusEl) return     focusEl.focus()     const newPos = before.length + insert.length     focusEl.setSelectionRange(newPos, newPos)   }) }  function onInputKeydown(e: KeyboardEvent) {   if (hashtagDropdownOpen.value && hashtagSuggestions.value.length > 0) {     if (e.key === 'ArrowDown') {       e.preventDefault()       hashtagSelectedIndex.value = (hashtagSelectedIndex.value + 1) % hashtagSuggestions.value.length       return     }     if (e.key === 'ArrowUp') {       e.preventDefault()       hashtagSelectedIndex.value = (hashtagSelectedIndex.value - 1 + hashtagSuggestions.value.length) % hashtagSuggestions.value.length       return     }     if (e.key === 'Enter' || e.key === 'Tab') {       e.preventDefault()       applyHashtagSuggestion(hashtagSuggestions.value[hashtagSelectedIndex.value])       return     }     if (e.key === 'Escape') {       e.preventDefault()       hashtagDropdownOpen.value = false       return     }   }   if (e.key === 'Enter') {     e.preventDefault()     send()   } }  watch(q, () => {   updateHashtagSuggestions() })  onMounted(async () => {   const saved = window.localStorage.getItem(CORPUS_STORAGE_KEY) as CorpusMode | null   if (saved && ['pensees', 'projets', 'both'].includes(saved)) {     corpus.value = saved   }   // Chargement liste auteurs ingérés pour autocomplete hashtag   try {     const data = await $fetch<any>('/data/auteurs-pensees.json')     auteursIngeres.value = (data?.auteurs ?? [])       .filter((a: any) => a.ingere === true)       .map((a: any) => ({ id: String(a.id), nom: String(a.nom) }))   } catch (e) {     console.error('Erreur chargement auteurs-pensees.json pour hashtag', e)   } })  function setCorpus(val: CorpusMode) {   corpus.value = val   window.localStorage.setItem(CORPUS_STORAGE_KEY, val) }  watch(open, (val) => {   if (!val) return   nextTick(() => inputElOverlay.value?.focus())   if (props.auteurContext && messages.value.length === 0)     q.value = `Quelles sont les theses centrales de ${props.auteurContext} ?` }) watch(() => props.auteurContext, (ctx) => {   if (!ctx) return   if (!props.inline && !open.value) open.value = true   if (messages.value.length === 0) q.value = `Quelles sont les theses centrales de ${ctx} ?` })  async function send() {   const query = q.value.trim()   if (!query || loading.value) return    // Extraire le premier hashtag matchant un auteur ingéré   let auteurSlug: string | null = null   const matches = [...query.matchAll(/#([a-z0-9-]+)/gi)]   for (const m of matches) {     const slug = m[1].toLowerCase()     if (auteursIngeres.value.find(a => a.id === slug)) {       auteurSlug = slug       break     }   }   // Premier hashtag non-matché (pour info utilisateur si jamais ne match aucun)   let auteurSlugUnmatched: string | null = null   if (!auteurSlug && matches.length > 0) {     auteurSlugUnmatched = matches[0][1].toLowerCase()   }    err.value = ''   messages.value.push({ role: 'user', content: query })   q.value = ''   hashtagDropdownOpen.value = false   loading.value = true   await nextTick()   scrollBottom()   try {     const res = await $fetch<any>('/api/chatbot-pensees', {       method: 'POST',       body: {         query,         mode: 'hybrid',         corpus: corpus.value,         auteur_slug: auteurSlug ?? auteurSlugUnmatched,       },     })     let responseText = res.response ?? ''     if (res.auteur_unmatched) {       responseText = `*(Aucun livre de #${res.auteur_unmatched} n'est ingéré dans le RAG. Je réponds depuis la carte entière.)*\n\n` + responseText     }     messages.value.push({ role: 'assistant', content: responseText })   } catch (e: any) {     const s = e?.response?.status ?? e?.statusCode     err.value = s === 429 ? 'Limite atteinte.' : s === 503 ? 'RAG indisponible.' : 'Erreur, reessaie.'   } finally {     loading.value = false     await nextTick()     scrollBottom()   } }  function scrollBottom() {   const el = props.inline ? msgElInline.value : msgElOverlay.value   if (el) el.scrollTop = el.scrollHeight }  function renderMd(t: string) {   return '<p>' + t.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>').replace(/\*(.+?)\*/g, '<em>$1</em>').replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>') + '</p>' } function stripSrc(t: string) { return t.replace(/\n*(?:Sources?|References?)\s*:[\s\S]*$/i, '').trim() }  function parseSrc(t: string): string[] {   const bloc = t.match(/\n*(?:Sources?|References?)\s*:\n?([\s\S]+?)$/i)   if (bloc) return bloc[1].split('\n').map(l => l.replace(/^[-*\d.[\]]+\s*/, '').trim()).filter(l => l.length > 3)   return [...new Set([...t.matchAll(/\[([^\]]{5,80})\]/g)].filter(m => m[1].includes(' - ')).map(m => m[1]))] }  function filteredSources(t: string): string[] {   const all = parseSrc(t)   if (corpus.value === 'both') return all   if (corpus.value === 'projets') return all.filter(s => isProjectSource(s))   return all.filter(s => !isProjectSource(s)) } </script>  <style scoped> .cpanel-enter-active { transition: opacity 0.2s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); } .cpanel-leave-active { transition: opacity 0.18s, transform 0.15s ease-in; } .cpanel-enter-from { opacity: 0; transform: translateY(12px) scale(0.95); } .cpanel-leave-to { opacity: 0; transform: translateY(8px) scale(0.97); } .dots span { display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--nav-text-muted);margin:0 2px;animation:bounce 1s infinite; } @keyframes bounce { 0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)} } </style>
\ No newline at end of file
diff --git a/components/FicheAuteur.vue b/components/FicheAuteur.vue
new file mode 100644
index 0000000..7de9855
--- /dev/null
+++ b/components/FicheAuteur.vue
@@ -0,0 +1 @@
+<template>   <Teleport to="body">     <Transition name="backdrop">       <div v-if="open && auteur" class="fixed inset-0 z-[1500]" style="background: rgba(26,34,56,0.55);" @click="emit('close')" aria-hidden="true" />     </Transition>     <Transition name="modal">       <div v-if="open && auteur" class="fixed z-[1501] left-1/2 flex flex-col"         style="top:50%;transform:translate(-50%,-50%);width:min(520px,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">         <!-- Header -->         <div class="flex items-start justify-between px-5 py-4 shrink-0"           :style="`border-bottom: 3px solid ${ecoleColor}; background: var(--nav-surface);`">           <div class="flex-1 min-w-0">             <div class="flex items-center gap-2 flex-wrap">               <span class="px-2 py-0.5 rounded-full text-xs font-semibold" :style="`background:${ecoleColor}22;color:${ecoleColor};`">{{ ecoleLabel }}</span>               <span v-for="eid in auteur.ecoles.filter(e => e !== auteur.ecole_principale)" :key="eid"                 class="px-2 py-0.5 rounded-full text-xs" :style="`background:${getEcoleColor(eid)}22;color:${getEcoleColor(eid)};`">{{ getEcoleLabel(eid) }}</span>             </div>             <h2 class="mt-2 font-bold text-lg leading-tight" style="color:var(--nav-text);">{{ auteur.nom }}</h2>             <p class="text-sm" style="color:var(--nav-text-muted);">{{ auteur.dates }}</p>           </div>           <button @click="emit('close')" 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>         <!-- Body -->         <div class="flex-1 overflow-y-auto px-5 py-4 flex flex-col gap-4">           <p class="text-sm leading-relaxed" style="color:var(--nav-text);">{{ auteur.bio_courte }}</p>           <div v-if="auteur.theses_cles.length">             <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:var(--nav-text-muted);">Theses cles</p>             <ul class="flex flex-col gap-1.5">               <li v-for="t in auteur.theses_cles" :key="t" class="flex items-start gap-2 text-sm" style="color:var(--nav-text);">                 <span class="mt-1.5 w-1.5 h-1.5 rounded-full shrink-0" :style="`background:${ecoleColor};`"></span>                 <span>{{ t }}</span>               </li>             </ul>           </div>           <div v-if="auteur.livres_rag.length">             <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:var(--nav-text-muted);">Livres dans le RAG</p>             <div class="flex flex-col gap-2">               <div v-for="l in auteur.livres_rag" :key="l.slug" class="flex items-start gap-3 p-3 rounded-lg" style="background:var(--nav-bg-alt);">                 <div class="flex-1 min-w-0">                   <p class="text-sm font-semibold leading-snug" style="color:var(--nav-text);">{{ l.titre }}</p>                   <p class="text-xs mt-0.5" style="color:var(--nav-text-muted);">{{ l.annee }}</p>                 </div>                 <div class="flex gap-1 shrink-0">                   <span v-for="c in l.couches" :key="c" class="px-1.5 py-0.5 rounded text-xs" style="background:var(--nav-surface);color:var(--nav-text-muted);">{{ c }}</span>                 </div>               </div>             </div>           </div>         </div>         <!-- Footer -->         <div class="shrink-0 px-5 py-3 border-t" style="border-color:var(--nav-bg-alt);">           <button @click="emit('interroger-rag', auteurId!)" class="w-full py-2.5 rounded-lg text-sm font-semibold hover:opacity-80"             :style="`background:${ecoleColor};color:white;`">             Interroger le RAG sur {{ auteur.nom.split(' ').pop() }}           </button>         </div>       </div>     </Transition>   </Teleport> </template>  <script setup lang="ts"> 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 EcoleData { id: string; label: string; color: string } interface PenseesData { ecoles: EcoleData[]; auteurs: AuteurData[] }  const props = defineProps<{ open: boolean; auteurId: string | null; data: PenseesData | null }>() const emit = defineEmits<{ close: []; 'interroger-rag': [auteurId: string] }>()  const auteur = computed<AuteurData | null>(() => {   if (!props.auteurId || !props.data) return null   return props.data.auteurs.find(a => a.id === props.auteurId) ?? null }) const ecoleColor = computed(() => props.data?.ecoles.find(e => e.id === auteur.value?.ecole_principale)?.color ?? '#888') const ecoleLabel = computed(() => props.data?.ecoles.find(e => e.id === auteur.value?.ecole_principale)?.label ?? '') function getEcoleColor(id: string) { return props.data?.ecoles.find(e => e.id === id)?.color ?? '#888' } function getEcoleLabel(id: string) { return props.data?.ecoles.find(e => e.id === id)?.label ?? id }  function onKey(e: KeyboardEvent) { if (e.key === 'Escape' && props.open) emit('close') } onMounted(() => window.addEventListener('keydown', onKey)) onUnmounted(() => window.removeEventListener('keydown', onKey)) </script>  <style scoped> .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); } </style>
\ No newline at end of file
diff --git a/components/FicheEcole.vue b/components/FicheEcole.vue
new file mode 100644
index 0000000..8ce20bf
--- /dev/null
+++ b/components/FicheEcole.vue
@@ -0,0 +1 @@
+<template>   <Teleport to="body">     <Transition name="backdrop">       <div v-if="open && ecole" class="fixed inset-0 z-[1500]" style="background: rgba(26,34,56,0.55);" @click="emit('close')" aria-hidden="true" />     </Transition>     <Transition name="modal">       <div v-if="open && ecole" class="fixed z-[1501] left-1/2 flex flex-col"         style="top:50%;transform:translate(-50%,-50%);width:min(540px,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">         <!-- Header -->         <div class="flex items-start justify-between px-5 py-4 shrink-0"           :style="`border-bottom: 3px solid ${ecole.color}; background: var(--nav-surface);`">           <div class="flex-1 min-w-0">             <span class="px-2 py-0.5 rounded-full text-xs font-semibold" :style="`background:${ecole.color}22;color:${ecole.color};`">Ecole de pensee</span>             <h2 class="mt-2 font-bold text-lg leading-tight" style="color:var(--nav-text);">{{ ecole.label }}</h2>             <p class="text-sm mt-1 leading-relaxed" style="color:var(--nav-text-muted);">{{ ecole.description }}</p>           </div>           <button @click="emit('close')" 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>         <!-- Body -->         <div class="flex-1 overflow-y-auto px-5 py-4 flex flex-col gap-4">           <div v-if="auteursIngeres.length">             <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:var(--nav-text-muted);">Dans le RAG ({{ auteursIngeres.length }})</p>             <div class="flex flex-wrap gap-2">               <button v-for="a in auteursIngeres" :key="a.id"                 class="px-2.5 py-1 rounded-full text-xs font-medium hover:opacity-80 transition-opacity"                 :style="`background:${ecole.color}22;color:${ecole.color};border:1px solid ${ecole.color}44;cursor:pointer;`"                 @click="onSelectAuteur(a.id)">                 {{ a.nom }}               </button>             </div>           </div>           <div v-if="auteursNonIngeres.length">             <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:var(--nav-text-muted);">Presents dans Bonpote, pas encore dans le RAG ({{ auteursNonIngeres.length }})</p>             <div class="flex flex-wrap gap-2">               <span v-for="a in auteursNonIngeres" :key="a.id"                 class="px-2.5 py-1 rounded-full text-xs"                 style="background:var(--nav-bg-alt);color:var(--nav-text-muted);">                 {{ a.nom }}               </span>             </div>           </div>         </div>         <!-- Footer -->         <div class="shrink-0 px-5 py-3 border-t" style="border-color:var(--nav-bg-alt);">           <button @click="emit('interroger-ecole', ecoleId!)" class="w-full py-2.5 rounded-lg text-sm font-semibold hover:opacity-80"             :style="`background:${ecole.color};color:white;`">             Interroger le RAG sur {{ ecole.label }}           </button>         </div>       </div>     </Transition>   </Teleport> </template>  <script setup lang="ts"> interface AuteurData { id: string; nom: string; ecoles: string[]; ecole_principale: string; ingere: boolean } interface EcoleData { id: string; label: string; description: string; color: string } interface PenseesData { ecoles: EcoleData[]; auteurs: AuteurData[] }  const props = defineProps<{ open: boolean; ecoleId: string | null; data: PenseesData | null }>() const emit = defineEmits<{ close: []; 'select-auteur': [auteurId: string]; 'interroger-ecole': [ecoleId: string] }>()  const ecole = computed<EcoleData | null>(() => {   if (!props.ecoleId || !props.data) return null   return props.data.ecoles.find(e => e.id === props.ecoleId) ?? null })  const auteursIngeres = computed(() => {   if (!props.ecoleId || !props.data) return []   return props.data.auteurs.filter(a => a.ecole_principale === props.ecoleId && (a as any).ingere) })  const auteursNonIngeres = computed(() => {   if (!props.ecoleId || !props.data) return []   return props.data.auteurs.filter(a => a.ecole_principale === props.ecoleId && !(a as any).ingere) })  function onSelectAuteur(id: string) {   emit('close')   emit('select-auteur', id) }  function onKey(e: KeyboardEvent) { if (e.key === 'Escape' && props.open) emit('close') } onMounted(() => window.addEventListener('keydown', onKey)) onUnmounted(() => window.removeEventListener('keydown', onKey)) </script>  <style scoped> .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); } </style>
\ No newline at end of file
diff --git a/public/data/auteurs-pensees.json b/public/data/auteurs-pensees.json
new file mode 100644
index 0000000..0ab526c
Binary files /dev/null and b/public/data/auteurs-pensees.json differ