From 6aa5a7143a5010194491708c852cfcb26ccc541a Mon Sep 17 00:00:00 2001
From: Jules Neny <jules@trans-former.fr>
Date: Sat, 9 May 2026 01:06:02 +0200
Subject: [PATCH] feat: PC4 iframe carte AEP centre BAS + scroll articles
 Substack placeholder

- IframeCarteAEP.astro : iframe https://aep.trans-former.fr/agences avec
  skeleton loader + timeout 8s + fallback lien externe
- ScrollArticles.astro : 7 articles placeholder (V1, PC6 remplacera par
  fetch journal.json)
- ColCentre.astro : zone BAS cablee (iframe min-h 60vh mobile / 400px desktop
  + scroll articles dessous)
- Preflight headers : pas de X-Frame-Options ni frame-ancestors restrictifs
  sur /agences (200 OK), iframe cross-origin permise sans modif Caddy
---
 src/components/astro/ColCentre.astro      | 13 ++--
 src/components/astro/IframeCarteAEP.astro | 55 +++++++++++++++++
 src/components/astro/ScrollArticles.astro | 72 +++++++++++++++++++++++
 3 files changed, 136 insertions(+), 4 deletions(-)
 create mode 100644 src/components/astro/IframeCarteAEP.astro
 create mode 100644 src/components/astro/ScrollArticles.astro

diff --git a/src/components/astro/ColCentre.astro b/src/components/astro/ColCentre.astro
index 26114a5..155e6fc 100644
--- a/src/components/astro/ColCentre.astro
+++ b/src/components/astro/ColCentre.astro
@@ -1,8 +1,10 @@
 ---
 // Centre - HAUT : tabs (Carte O mindmap | Chatbot RAG placeholder PC7).
-//          BAS  : iframe carte AEP (PC4).
+//          BAS  : iframe carte AEP + scroll articles Substack (PC4).
 import CarteOWrapper from '../vue/CarteOWrapper.vue';
 import ChatbotPlaceholder from '../vue/ChatbotPlaceholder.vue';
+import IframeCarteAEP from './IframeCarteAEP.astro';
+import ScrollArticles from './ScrollArticles.astro';
 ---
 <div class="h-full grid grid-rows-2 gap-2 p-2">
   <!-- HAUT 50% : tabs Carte O / Chatbot -->
@@ -54,9 +56,12 @@ import ChatbotPlaceholder from '../vue/ChatbotPlaceholder.vue';
     </div>
   </section>
 
-  <!-- BAS 50% : iframe carte AEP (PC4) -->
-  <section class="border border-dashed border-neutral-300 rounded flex items-center justify-center">
-    <p class="text-sm text-neutral-400">Iframe carte AEP — PC4</p>
+  <!-- BAS 50% : iframe carte AEP + scroll articles Substack (PC4) -->
+  <section class="border border-neutral-200 rounded overflow-y-auto bg-white">
+    <div class="h-full min-h-[60vh] md:min-h-[400px]">
+      <IframeCarteAEP />
+    </div>
+    <ScrollArticles />
   </section>
 </div>
 
diff --git a/src/components/astro/IframeCarteAEP.astro b/src/components/astro/IframeCarteAEP.astro
new file mode 100644
index 0000000..66003a9
--- /dev/null
+++ b/src/components/astro/IframeCarteAEP.astro
@@ -0,0 +1,55 @@
+---
+// PC4 - iframe carte AEP (cartobifurcation) avec skeleton loader + fallback timeout 8s.
+// Route confirmee 200 sans X-Frame-Options ni frame-ancestors restrictifs (preflight 2026-05-08).
+const CARTE_URL = 'https://aep.trans-former.fr/agences';
+---
+<div class="relative h-full w-full bg-neutral-100">
+  <!-- Skeleton loader -->
+  <div
+    id="iframe-skeleton"
+    class="absolute inset-0 flex items-center justify-center bg-neutral-50 animate-pulse"
+  >
+    <div class="text-neutral-400 text-sm">Chargement de la carte AEP...</div>
+  </div>
+
+  <iframe
+    id="carte-aep-iframe"
+    src={CARTE_URL}
+    title="Carte des reseaux AEP - cartobifurcation"
+    class="w-full h-full border-0 opacity-0 transition-opacity duration-500"
+    loading="lazy"
+    referrerpolicy="no-referrer-when-downgrade"
+    sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+  ></iframe>
+</div>
+
+<script>
+  const iframe = document.getElementById('carte-aep-iframe') as HTMLIFrameElement | null;
+  const skeleton = document.getElementById('iframe-skeleton');
+
+  iframe?.addEventListener('load', () => {
+    iframe.classList.remove('opacity-0');
+    iframe.classList.add('opacity-100');
+    skeleton?.classList.add('hidden');
+  });
+
+  // Timeout securite : si pas charge en 8s, afficher fallback lien externe.
+  setTimeout(() => {
+    if (skeleton && !skeleton.classList.contains('hidden')) {
+      skeleton.innerHTML = `
+        <div class="text-center text-neutral-500 px-4">
+          <p class="mb-2 text-sm">La carte n'a pas pu charger.</p>
+          <a
+            href="https://aep.trans-former.fr/agences"
+            target="_blank"
+            rel="noopener"
+            class="text-blue-600 underline text-sm"
+          >
+            Ouvrir dans un nouvel onglet &rarr;
+          </a>
+        </div>
+      `;
+      skeleton.classList.remove('animate-pulse');
+    }
+  }, 8000);
+</script>
diff --git a/src/components/astro/ScrollArticles.astro b/src/components/astro/ScrollArticles.astro
new file mode 100644
index 0000000..c7b2e6d
--- /dev/null
+++ b/src/components/astro/ScrollArticles.astro
@@ -0,0 +1,72 @@
+---
+// 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>