feat(insta): remplace Behold (jamais configuré) par galerie statique @julesneny

ColInsta n'affichait que le fallback bio depuis PC5 (feed IDs Behold jamais
renseignés, login Facebook Business trop lourd). Retire le bloc @aep.politique
(jugé insatisfaisant) et remplace InstaFeed par une galerie 3x3 statique de
9 vignettes réelles (croppées depuis le dernier screenshot du feed), avec
boutons Compte Insta + Boutique (placeholder désactivé, en attente d'URL).

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

src/components/astro/ColInsta.astro

@@ -1,24 +1,23 @@
 ---
 import InstaFeed from '../vue/InstaFeed.vue';
 
-// Feed IDs Behold a remplir apres inscription Behold (voir docs/BEHOLD-SETUP.md)
+const JULESNENY_POSTS = [
-const FEED_AEP = import.meta.env.PUBLIC_BEHOLD_AEP || 'PLACEHOLDER_AEP';
+  '/images/instagram/post-1.jpg',
-const FEED_JULESNENY = import.meta.env.PUBLIC_BEHOLD_JULESNENY || 'PLACEHOLDER_JULESNENY';
+  '/images/instagram/post-2.jpg',
+  '/images/instagram/post-3.jpg',
+  '/images/instagram/post-4.jpg',
+  '/images/instagram/post-5.jpg',
+  '/images/instagram/post-6.jpg',
+  '/images/instagram/post-7.jpg',
+  '/images/instagram/post-8.jpg',
+  '/images/instagram/post-9.jpg',
+];
 ---
 <div class="h-full overflow-y-auto">
   <InstaFeed
     client:visible
-    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"
+    posts={JULESNENY_POSTS}
   />
 </div>

src/components/vue/InstaFeed.vue

@@ -1,52 +1,9 @@
 <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;
+  posts: 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>
@@ -60,48 +17,45 @@ onMounted(async () => {
       >
         {{ 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"
+      class="grid grid-cols-3 gap-0.5 p-1 group"
+      :aria-label="`Voir le compte Instagram ${account}`"
     >
-        Voir sur Instagram &rarr;
+      <span
+        v-for="(src, i) in posts"
+        :key="i"
+        class="block aspect-square overflow-hidden"
+      >
+        <img
+          :src="src"
+          alt=""
+          loading="lazy"
+          class="w-full h-full object-cover group-hover:scale-105 transition-transform"
+        />
+      </span>
     </a>
+
+    <div class="flex gap-1.5 px-4 pb-3">
+      <a
+        :href="accountUrl"
+        target="_blank"
+        rel="noopener"
+        class="flex-1 text-center px-3 py-1.5 bg-neutral-900 text-white rounded-lg text-xs"
+      >
+        Compte Insta
+      </a>
+      <span
+        class="flex-1 text-center px-3 py-1.5 bg-neutral-200 text-neutral-400 rounded-lg text-xs cursor-not-allowed"
+        aria-disabled="true"
+        title="Boutique — bientôt disponible"
+      >
+        Boutique
+      </span>
     </div>
   </section>
 </template>