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