feat(insta): remplace la grille 3x3 par un feed scrollable (13 captures)

Empile les 13 captures d'écran du feed réel (IMG_5439..5451, plus récent
en haut, plus ancien en bas) dans une colonne overflow-y:auto avec
scrollbar fine, pour permettre de naviguer dans le feed sans quitter le
site. Petit gap 2px entre chaque capture (façon séparation Instagram).

Dédoublonnage pixel des zones de chevauchement tenté (corrélation de
luminance par ligne) mais abandonné : signal pas assez discriminant sur
ce contenu (fonds crème uniformes). Chevauchement naturel accepté.

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

src/components/astro/ColInsta.astro

@@ -1,23 +1,16 @@
 ---
 import InstaFeed from '../vue/InstaFeed.vue';
 
-const JULESNENY_POSTS = [
-  '/images/instagram/post-1.jpg',
-  '/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',
-];
+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">
   <InstaFeed
     client:visible
     account="@julesneny"
     accountUrl="https://www.instagram.com/julesneny/"
-    posts={JULESNENY_POSTS}
+    feedImages={JULESNENY_FEED}
   />
 </div>

src/components/vue/InstaFeed.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   account: string;
   accountUrl: string;
-  posts: string[];
+  feedImages: string[]; // ordonné du plus récent (haut) au plus ancien (bas)
 }>();
 </script>
 
@@ -19,28 +19,25 @@ const props = defineProps<{
       </a>
     </header>
 
-    <a
-      :href="accountUrl"
-      target="_blank"
-      rel="noopener"
-      class="grid grid-cols-3 gap-0.5 p-1 group"
-      :aria-label="`Voir le compte Instagram ${account}`"
-    >
-      <span
-        v-for="(src, i) in posts"
-        :key="i"
-        class="block aspect-square overflow-hidden"
+    <div class="insta-feed-scroll">
+      <a
+        :href="accountUrl"
+        target="_blank"
+        rel="noopener"
+        :aria-label="`Voir le compte Instagram ${account}`"
       >
         <img
+          v-for="(src, i) in feedImages"
+          :key="i"
           :src="src"
           alt=""
           loading="lazy"
-          class="w-full h-full object-cover group-hover:scale-105 transition-transform"
+          class="block w-full feed-img"
         />
-      </span>
-    </a>
+      </a>
+    </div>
 
-    <div class="flex gap-1.5 px-4 pb-3">
+    <div class="flex gap-1.5 px-4 py-3">
       <a
         :href="accountUrl"
         target="_blank"
@@ -59,3 +56,24 @@ const props = defineProps<{
     </div>
   </section>
 </template>
+
+<style scoped>
+.insta-feed-scroll {
+  max-height: 420px;
+  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>