feat(v12-p): preview article 3 zones + colonnes scrollables indep

- PreviewArticle.vue : nouveau composant qui ecoute journal-item-click et s'insere entre Carte O et iframe AEP
- EmbedDynamique.vue : retire le swap article (iframe AEP toujours visible en bas)
- ColCentre.astro : passe en flex-col, preview ouverte = Carte O 33vh + Preview auto + iframe 67vh, overflow-y-auto sur le container
- Bouton 'Retour a la carte' emet preview-close -> grid revient 1/3 + 2/3
- Scroll independant : Journal (gauche), Centre (preview), Insta (droite)
- Drag-resize desactive quand preview ouverte (anti-collision)

src/components/vue/EmbedDynamique.vue

@@ -1,23 +1,11 @@
 <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 wrapperRef = ref<HTMLDivElement | null>(null)
 const skeletonHidden = ref(false)
 
-// Force rendu desktop de l'iframe AEP : viewport simulée 1440px + scale dynamique
+// Force rendu desktop de l'iframe AEP : viewport simulee 1440px + scale dynamique
 const VIEWPORT_W = 1440
 const iframeScale = ref(0.42)
 let resizeObs: ResizeObserver | null = null
@@ -35,13 +23,7 @@ const iframeStyle = computed(() => ({
   transformOrigin: '0 0',
 }))
 
-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)
   if (wrapperRef.value && typeof ResizeObserver !== 'undefined') {
     updateScale()
     resizeObs = new ResizeObserver(updateScale)
@@ -49,16 +31,10 @@ onMounted(() => {
   }
 })
 onUnmounted(() => {
-  window.removeEventListener('journal-item-click', onJournalItemClick as EventListener)
   resizeObs?.disconnect()
   resizeObs = null
 })
 
-const reset = () => {
-  selectedItem.value = null
-  skeletonHidden.value = false
-}
-
 const onIframeLoad = () => {
   if (iframeRef.value) {
     iframeRef.value.classList.remove('opacity-0')
@@ -66,55 +42,11 @@ const onIframeLoad = () => {
   }
   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="h-full">
       <div ref="wrapperRef" class="relative h-full bg-neutral-100 overflow-hidden">
         <div
           v-if="!skeletonHidden"
@@ -134,75 +66,5 @@ const formatDate = (iso: string) => {
         ></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>