feat(v11-e): centre BAS embed dynamique click-journal + suppression ScrollArticles

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/astro/ColCentre.astro

@@ -3,8 +3,7 @@
 //          BAS  : iframe carte AEP + scroll articles Substack (PC4).
 import CarteOWrapper from '../vue/CarteOWrapper.vue';
 import ChatbotV2 from '../vue/ChatbotV2.vue';
-import IframeCarteAEP from './IframeCarteAEP.astro';
+import EmbedDynamique from '../vue/EmbedDynamique.vue';
-import ScrollArticles from './ScrollArticles.astro';
 ---
 <div id="col-centre-grid" class="h-full grid grid-rows-2 gap-2 p-2">
   <!-- HAUT 50% : tabs Carte O / Chatbot -->
@@ -66,12 +65,11 @@ import ScrollArticles from './ScrollArticles.astro';
     <span class="block w-8 h-0.5 bg-neutral-400 rounded-full"></span>
   </button>
 
-  <!-- BAS 50% : iframe carte AEP + scroll articles Substack (PC4) -->
+  <!-- BAS 50% : embed dynamique (carte AEP default, article journal au click) -->
-  <section class="border border-neutral-200 rounded overflow-y-auto bg-white">
+  <section class="border border-neutral-200 rounded overflow-hidden bg-white">
     <div class="h-full min-h-[60vh] md:min-h-[400px]">
-      <IframeCarteAEP />
+      <EmbedDynamique client:visible />
     </div>
-    <ScrollArticles />
   </section>
 </div>
 

src/components/astro/ScrollArticles.astro

@@ -1,72 +0,0 @@
----
-// PC4 - Liste articles Substack en scroll sous l'iframe carte.
-// V1 placeholder data en dur ; PC6 (journal n8n) remplacera par fetch journal.json filtre tag #politique.
-const articles = [
-  {
-    date: '2026-04-28',
-    titre: 'Cap sur l\'autonomie : retour sur 6 mois de chantier',
-    url: 'https://transformations.substack.com/p/cap-autonomie',
-  },
-  {
-    date: '2026-04-15',
-    titre: 'Le commun comme infrastructure',
-    url: 'https://transformations.substack.com/p/commun-infrastructure',
-  },
-  {
-    date: '2026-03-30',
-    titre: 'Architecte ou operateur de bifurcation ?',
-    url: 'https://transformations.substack.com/p/architecte-bifurcation',
-  },
-  {
-    date: '2026-03-12',
-    titre: 'Reseaux AEP : pourquoi la coordination est politique',
-    url: 'https://transformations.substack.com/p/aep-coordination',
-  },
-  {
-    date: '2026-02-26',
-    titre: 'Sortir du sauveur, entrer dans le compagnon',
-    url: 'https://transformations.substack.com/p/sauveur-compagnon',
-  },
-  {
-    date: '2026-02-08',
-    titre: 'Petit manifeste contre l\'expert isole',
-    url: 'https://transformations.substack.com/p/contre-expert-isole',
-  },
-  {
-    date: '2026-01-22',
-    titre: 'Ce que la commande publique fait a la pensee',
-    url: 'https://transformations.substack.com/p/commande-publique',
-  },
-  // TODO PC6 : remplacer par fetch journal.json filtre tag #politique.
-];
----
-<section class="border-t border-neutral-200 py-6 px-4 bg-white">
-  <h3 class="text-sm font-semibold uppercase tracking-wider text-neutral-500 mb-4">
-    Derniers articles ; Substack
-  </h3>
-  <ul class="space-y-3">
-    {articles.map(({ date, titre, url }) => (
-      <li>
-        <a
-          href={url}
-          target="_blank"
-          rel="noopener"
-          class="block group"
-        >
-          <time class="text-xs text-neutral-400">{date}</time>
-          <p class="text-sm text-neutral-800 group-hover:text-neutral-600 transition-colors leading-snug">
-            {titre}
-          </p>
-        </a>
-      </li>
-    ))}
-  </ul>
-  <a
-    href="https://transformations.substack.com"
-    target="_blank"
-    rel="noopener"
-    class="inline-block mt-4 text-xs text-neutral-500 hover:text-neutral-900"
-  >
-    Voir tous les articles &rarr;
-  </a>
-</section>

src/components/vue/EmbedDynamique.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+interface JournalItem {
+  id: string
+  platform: 'substack' | 'gitea' | 'github' | 'instagram' | 'castopod' | 'blog' | 'linkedin'
+  hashtag: string
+  date: string
+  titre: string
+  extrait: string
+  url: string
+  thumbnail: string | null
+}
+
+const selectedItem = ref<JournalItem | null>(null)
+const iframeRef = ref<HTMLIFrameElement | null>(null)
+const skeletonHidden = ref(false)
+
+const onJournalItemClick = (e: Event) => {
+  const ce = e as CustomEvent
+  if (ce.detail?.item) selectedItem.value = ce.detail.item
+}
+
+onMounted(() => {
+  window.addEventListener('journal-item-click', onJournalItemClick as EventListener)
+})
+onUnmounted(() => {
+  window.removeEventListener('journal-item-click', onJournalItemClick as EventListener)
+})
+
+const reset = () => {
+  selectedItem.value = null
+  skeletonHidden.value = false
+}
+
+const onIframeLoad = () => {
+  if (iframeRef.value) {
+    iframeRef.value.classList.remove('opacity-0')
+    iframeRef.value.classList.add('opacity-100')
+  }
+  skeletonHidden.value = true
+}
+
+const extractInstaShortcode = (url: string): string | null => {
+  const m = url.match(/\/(p|reel)\/([^\/\?#]+)/)
+  return m ? m[2] : null
+}
+
+const embedUrl = computed(() => {
+  if (!selectedItem.value) return null
+  const item = selectedItem.value
+  if (item.platform === 'substack') {
+    return item.url.includes('?') ? item.url + '&embed=1' : item.url + '?embed=1'
+  }
+  if (item.platform === 'instagram') {
+    const sc = extractInstaShortcode(item.url)
+    return sc ? `https://www.instagram.com/p/${sc}/embed/` : null
+  }
+  return null
+})
+
+const platformLabel = (p: string) => {
+  const labels: Record<string, string> = {
+    substack: 'Substack',
+    instagram: 'Instagram',
+    gitea: 'Gitea',
+    github: 'GitHub',
+    castopod: 'Podcast',
+    blog: 'Blog',
+    linkedin: 'LinkedIn',
+  }
+  return labels[p] || p
+}
+
+const formatDate = (iso: string) => {
+  try {
+    const d = new Date(iso)
+    return isNaN(d.getTime())
+      ? ''
+      : `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}`
+  } catch {
+    return ''
+  }
+}
+</script>
+
+<template>
+  <div class="embed-dynamique h-full flex flex-col relative">
+
+    <!-- DEFAULT : iframe AEP (aucun item selectionne) -->
+    <div v-if="!selectedItem" class="h-full">
+      <div class="relative h-full bg-neutral-100">
+        <div
+          v-if="!skeletonHidden"
+          id="embed-skeleton"
+          class="absolute inset-0 flex items-center justify-center bg-neutral-50 animate-pulse"
+        >
+          <span class="text-neutral-400 text-sm">Chargement de la carte AEP...</span>
+        </div>
+        <iframe
+          src="https://aep.trans-former.fr/agences"
+          title="Carte AEP"
+          class="w-full h-full border-0 opacity-0 transition-opacity duration-500"
+          sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+          @load="onIframeLoad"
+          ref="iframeRef"
+        ></iframe>
+      </div>
+    </div>
+
+    <!-- EMBED MODE : teaser + embed live ou carte incitative -->
+    <div v-else class="h-full flex flex-col overflow-y-auto">
+
+      <!-- Header : reset + hashtag -->
+      <div class="flex items-center justify-between px-4 py-2 border-b border-neutral-200 bg-white sticky top-0 z-10">
+        <button
+          class="text-xs text-neutral-500 hover:text-neutral-900 flex items-center gap-1"
+          @click="reset"
+          type="button"
+        >
+          - Retour a la carte
+        </button>
+        <span class="text-xs text-neutral-400" style="font-family: 'Courier New', Courier, monospace;">
+          {{ selectedItem.hashtag }}
+        </span>
+      </div>
+
+      <!-- Teaser -->
+      <div class="px-4 py-3 border-b border-neutral-100 bg-neutral-50">
+        <p class="text-[11px] text-neutral-500 mb-1">{{ formatDate(selectedItem.date) }} - {{ selectedItem.platform }}</p>
+        <h3 class="text-sm font-semibold text-neutral-900 leading-snug mb-1">{{ selectedItem.titre }}</h3>
+        <p v-if="selectedItem.extrait" class="text-xs text-neutral-600 leading-relaxed line-clamp-3">
+          {{ selectedItem.extrait }}
+        </p>
+        <img
+          v-if="selectedItem.thumbnail"
+          :src="selectedItem.thumbnail"
+          :alt="selectedItem.titre"
+          class="mt-2 w-full max-h-28 object-cover rounded"
+          loading="lazy"
+        />
+      </div>
+
+      <!-- Embed live (Substack ou Instagram) -->
+      <div v-if="embedUrl" class="flex-1 min-h-[200px] bg-white">
+        <iframe
+          :src="embedUrl"
+          class="w-full h-full border-0 min-h-[300px]"
+          :title="selectedItem.titre"
+          loading="lazy"
+          sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation"
+        ></iframe>
+      </div>
+
+      <!-- Carte incitative (autres plateformes) -->
+      <div v-else class="flex-1 flex flex-col items-start justify-center px-4 py-6">
+        <p class="text-xs text-neutral-500 mb-3 italic">Embed non disponible pour cette plateforme.</p>
+        <a
+          :href="selectedItem.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-block px-4 py-2 bg-neutral-900 text-white text-sm rounded-lg hover:bg-neutral-700 transition-colors"
+        >
+          Voir sur {{ platformLabel(selectedItem.platform) }} ->
+        </a>
+      </div>
+
+      <!-- CTA propagation universel -->
+      <div class="px-4 py-3 border-t border-neutral-100">
+        <a
+          :href="selectedItem.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-xs text-neutral-500 hover:text-neutral-900 underline"
+        >
+          Continuer sur {{ platformLabel(selectedItem.platform) }} - commenter, partager
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

src/components/vue/JournalList.vue

@@ -77,6 +77,15 @@ onUnmounted(() => {
   window.removeEventListener('platform-filter-change', onPlatformChange as EventListener)
 })
 
+const onItemClick = (item: JournalItem, e: MouseEvent) => {
+  if (e.metaKey || e.ctrlKey) {
+    window.open(item.url, '_blank', 'noopener')
+    return
+  }
+  e.preventDefault()
+  window.dispatchEvent(new CustomEvent('journal-item-click', { detail: { item } }))
+}
+
 const visibleItems = computed(() => {
   const keys = Object.keys(filters.value)
   let filtered: JournalItem[]
@@ -156,6 +165,7 @@ const platformLabel = (p: string) => {
         target="_blank"
         rel="noopener noreferrer"
         class="block group"
+        @click="onItemClick(item, $event)"
       >
         <div class="flex items-baseline gap-2 text-[11px] text-neutral-500 mb-1">
           <time>{{ formatDate(item.date) }}</time>