fix(insta): feed remplit toute la hauteur de colonne, Boutique collée en bas

La zone de scroll avait une max-height fixe (420px) alors que la colonne
fait toute la hauteur de la page -> gros bandeau blanc entre le feed et
le footer. Passe en flex-col (header shrink-0, feed flex-1 scrollable,
Boutique shrink-0 collée en bas), le feed occupe maintenant tout
l'espace disponible.

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

src/components/astro/ColInsta.astro

@@ -1,24 +1,18 @@
 ---
 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';
+const JULESNENY_FEED = Array.from(
+  { length: 13 },
+  (_, i) => `/images/instagram/feed/feed-${String(i + 1).padStart(2, '0')}.jpg`
+);
 ---
-<div class="h-full overflow-y-auto">
+<div class="h-full overflow-hidden">
   <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"
+    account="Jules Neny"
     accountUrl="https://www.instagram.com/julesneny/"
-    fallbackBio="Peinture, poesie, Corse ; archives visuelles personnelles"
+    secondAccount="AEP"
+    secondAccountUrl="https://www.instagram.com/aep.politique/"
+    feedImages={JULESNENY_FEED}
   />
 </div>

src/components/vue/InstaFeed.vue

@@ -1,57 +1,16 @@
 <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;
+defineProps<{
   account: string;
   accountUrl: string;
-  fallbackBio?: string;
+  secondAccount: string;
+  secondAccountUrl: string;
+  feedImages: string[]; // ordonné du plus récent (haut) au plus ancien (bas)
 }>();
-
-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">
+  <section class="h-full flex flex-col border-b border-neutral-200 last:border-b-0">
+    <header class="shrink-0 px-4 py-2 flex items-center justify-between gap-3">
       <a
         :href="accountUrl"
         target="_blank"
@@ -60,48 +19,62 @@ 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"
+        :href="secondAccountUrl"
         target="_blank"
         rel="noopener"
-        class="block aspect-square overflow-hidden group"
+        class="font-medium text-sm text-neutral-500 hover:underline hover:text-neutral-800"
       >
-        <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"
-        />
+        {{ secondAccount }}
       </a>
-    </div>
+    </header>
 
-    <div v-else class="p-4 text-sm text-neutral-600">
-      <p v-if="fallbackBio" class="mb-3">{{ fallbackBio }}</p>
+    <div class="insta-feed-scroll flex-1 min-h-0">
       <a
         :href="accountUrl"
         target="_blank"
         rel="noopener"
-        class="inline-block px-3 py-2 bg-neutral-900 text-white rounded-lg text-sm"
+        :aria-label="`Voir le compte Instagram ${account}`"
       >
-        Voir sur Instagram &rarr;
+        <img
+          v-for="(src, i) in feedImages"
+          :key="i"
+          :src="src"
+          alt=""
+          loading="lazy"
+          class="block w-full feed-img"
+        />
       </a>
     </div>
+
+    <div class="shrink-0 px-2 py-1">
+      <span
+        class="block text-center px-3 py-1 bg-neutral-200 text-neutral-400 rounded text-xs cursor-not-allowed"
+        aria-disabled="true"
+        title="Boutique — bientôt disponible"
+      >
+        Boutique
+      </span>
+    </div>
   </section>
 </template>
+
+<style scoped>
+.insta-feed-scroll {
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+.insta-feed-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.insta-feed-scroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 3px;
+}
+.insta-feed-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.feed-img + .feed-img {
+  margin-top: 2px;
+}
+</style>