feat: PC5 col D embeds Insta via Behold (avec fallback profil statique)

- InstaFeed.vue (Vue island) : consomme feeds.behold.so/{feedId}, skeleton loading, grid 2x3 thumbnails, fallback profil si placeholder ou erreur
- ColInsta.astro enrichi : 2 sections @aep.politique + @julesneny, hydratation client:visible (lazy)
- .env.example committe (PUBLIC_BEHOLD_AEP/JULESNENY vides) ; .env.local deja gitignore
- docs/BEHOLD-SETUP.md : procedure inscription + recup feed IDs + alternatives + note CSP PC8

Action Jules requise (async) : inscription Behold + connexion 2 comptes Insta + remplir .env.local.

.env.example

@@ -0,0 +1,6 @@
+# Behold.so feed IDs (voir docs/BEHOLD-SETUP.md)
+# 1) Inscris-toi sur https://behold.so/dashboard
+# 2) Connecte les 2 comptes Insta (@aep.politique + @julesneny)
+# 3) Recupere les feed IDs et copie ce fichier vers .env.local puis remplis ci-dessous
+PUBLIC_BEHOLD_AEP=
+PUBLIC_BEHOLD_JULESNENY=

docs/BEHOLD-SETUP.md

@@ -0,0 +1,49 @@
+# Setup Behold pour embeds Insta
+
+Page cerveau col D (`ColInsta.astro`) consomme 2 feeds Insta via [Behold.so](https://behold.so) (gratuit, 2 feeds, sync 1h, sans login user).
+
+## Etapes
+
+1. Creer compte sur https://behold.so (gratuit jusqu'a 2 feeds)
+2. Connecter `@aep.politique` (Login Instagram via Facebook Business)
+3. Connecter `@julesneny` (idem)
+4. Recuperer les 2 feed IDs depuis le dashboard Behold
+5. Copier `.env.example` vers `.env.local` (a la racine du repo)
+6. Remplir `.env.local` :
+
+   ```bash
+   PUBLIC_BEHOLD_AEP=xxxxxxxxxxxx
+   PUBLIC_BEHOLD_JULESNENY=yyyyyyyyyyyy
+   ```
+
+7. Relancer `npm run dev` ou rebuild + redeploy (PC8)
+
+## Comportement par defaut
+
+Sans feed IDs valides (placeholder), le composant `InstaFeed.vue` affiche un fallback gracieux :
+- Titre du compte (lien direct vers Instagram)
+- Bio courte
+- Bouton "Voir sur Instagram"
+
+C'est OK pour un V1 visuel "complet". UX degradee mais pas casse.
+
+## Ressources techniques
+
+- API Behold : `https://feeds.behold.so/{feedId}` -> JSON array de posts
+- Sync : 1h (Behold rafraichit depuis Insta automatiquement)
+- CDN : images servies depuis Behold (pas de hot-link Insta direct)
+
+## CSP (PC8 deploy)
+
+Si une CSP est ajoutee au deploy Caddy, prevoir :
+
+```
+connect-src 'self' https://feeds.behold.so;
+img-src 'self' data: https://feeds.behold.so https://*.cdninstagram.com;
+```
+
+## Alternatives si Behold ne convient pas
+
+- **EmbedSocial** (~$8/mois) : https://embedsocial.com
+- **Scrape n8n nocturne** (V1.5) : Insta Graph API via compte Business + Page Facebook ; coherent avec PC6 journal-aggregate
+- **Posts manuels oEmbed** (V2) : Jules selectionne 6-10 URLs, oEmbed post-by-post

src/components/astro/ColInsta.astro

@@ -1,12 +1,24 @@
 ---
-// Placeholder Insta : 2 carrousels @aep + @julesneny — PC5 oEmbed
+import InstaFeed from '../vue/InstaFeed.vue';
+
+// Feed IDs Behold a remplir apres inscription Behold (voir docs/BEHOLD-SETUP.md)
+const FEED_AEP = import.meta.env.PUBLIC_BEHOLD_AEP || 'PLACEHOLDER_AEP';
+const FEED_JULESNENY = import.meta.env.PUBLIC_BEHOLD_JULESNENY || 'PLACEHOLDER_JULESNENY';
 ---
-<section class="h-full p-4 flex flex-col gap-4">
+<div class="h-full overflow-y-auto">
-  <h2 class="text-lg font-semibold text-neutral-700">Insta</h2>
+  <InstaFeed
-  <div class="border border-dashed border-neutral-300 rounded p-3 flex-1 flex items-center justify-center">
+    client:visible
-    <p class="text-sm text-neutral-400">@aep carrousel — PC5</p>
+    feedId={FEED_AEP}
+    account="@aep.politique"
+    accountUrl="https://www.instagram.com/aep.politique/"
+    fallbackBio="Carrousels manifeste AEP ; pensee politique eco-architecture"
+  />
+
+  <InstaFeed
+    client:visible
+    feedId={FEED_JULESNENY}
+    account="@julesneny"
+    accountUrl="https://www.instagram.com/julesneny/"
+    fallbackBio="Peinture, poesie, Corse ; archives visuelles personnelles"
+  />
 </div>
-  <div class="border border-dashed border-neutral-300 rounded p-3 flex-1 flex items-center justify-center">
-    <p class="text-sm text-neutral-400">@julesneny carrousel — PC5</p>
-  </div>
-</section>

src/components/vue/InstaFeed.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+interface BeholdPost {
+  id: string;
+  permalink: string;
+  mediaUrl: string;
+  thumbnailUrl?: string;
+  caption?: string;
+  mediaType: 'IMAGE' | 'VIDEO' | 'CAROUSEL_ALBUM';
+  timestamp: string;
+}
+
+const props = defineProps<{
+  feedId: string;
+  account: string;
+  accountUrl: string;
+  fallbackBio?: string;
+}>();
+
+const posts = ref<BeholdPost[]>([]);
+const loading = ref(true);
+const error = ref<string | null>(null);
+
+const isPlaceholder = (id: string) => !id || id.startsWith('PLACEHOLDER_');
+
+onMounted(async () => {
+  if (isPlaceholder(props.feedId)) {
+    loading.value = false;
+    error.value = 'no-feed-id';
+    return;
+  }
+  try {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 5000);
+    const res = await fetch(`https://feeds.behold.so/${props.feedId}`, {
+      signal: controller.signal,
+    });
+    clearTimeout(timeoutId);
+    if (!res.ok) throw new Error(`Behold returned ${res.status}`);
+    const data = await res.json();
+    const items: BeholdPost[] = Array.isArray(data) ? data : (data.posts ?? []);
+    posts.value = items.slice(0, 6);
+  } catch (e) {
+    error.value = (e as Error).message || 'fetch-error';
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <section class="border-b border-neutral-200 last:border-b-0">
+    <header class="px-4 py-3 flex items-center justify-between">
+      <a
+        :href="accountUrl"
+        target="_blank"
+        rel="noopener"
+        class="font-medium text-sm hover:underline"
+      >
+        {{ account }}
+      </a>
+      <span v-if="loading" class="text-xs text-neutral-400">...</span>
+    </header>
+
+    <div v-if="loading" class="grid grid-cols-2 gap-1 p-1">
+      <div
+        v-for="i in 4"
+        :key="i"
+        class="aspect-square bg-neutral-100 animate-pulse"
+      />
+    </div>
+
+    <div
+      v-else-if="posts.length"
+      class="grid grid-cols-2 gap-1 p-1"
+    >
+      <a
+        v-for="post in posts"
+        :key="post.id"
+        :href="post.permalink"
+        target="_blank"
+        rel="noopener"
+        class="block aspect-square overflow-hidden group"
+      >
+        <img
+          :src="post.thumbnailUrl || post.mediaUrl"
+          :alt="post.caption?.slice(0, 80) || account"
+          loading="lazy"
+          class="w-full h-full object-cover group-hover:scale-105 transition-transform"
+        />
+      </a>
+    </div>
+
+    <div v-else class="p-4 text-sm text-neutral-600">
+      <p v-if="fallbackBio" class="mb-3">{{ fallbackBio }}</p>
+      <a
+        :href="accountUrl"
+        target="_blank"
+        rel="noopener"
+        class="inline-block px-3 py-2 bg-neutral-900 text-white rounded-lg text-sm"
+      >
+        Voir sur Instagram &rarr;
+      </a>
+    </div>
+  </section>
+</template>