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=

.gitignore

@@ -136,3 +136,7 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
+# Astro
+.astro/
+dist/
+.DS_Store

astro.config.mjs

@@ -0,0 +1,12 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+import tailwindcss from '@tailwindcss/vite';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [vue()],
+  vite: {
+    plugins: [tailwindcss()],
+  },
+});

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

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "astro-site-cerveau",
+  "type": "module",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/vue": "^6.0.1",
+    "@tailwindcss/vite": "^4.2.4",
+    "astro": "^6.3.1",
+    "embla-carousel-vue": "^8.6.0",
+    "tailwindcss": "^4.2.4",
+    "vue": "^3.5.34"
+  }
+}

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/components/astro/ColCentre.astro

@@ -0,0 +1,11 @@
+---
+// Placeholder Centre : HAUT mindmap AEP (PC3) ; BAS iframe carte AEP (PC4)
+---
+<div class="h-full grid grid-rows-2 gap-2 p-2">
+  <section class="border border-dashed border-neutral-300 rounded flex items-center justify-center">
+    <p class="text-sm text-neutral-400">Mindmap AEP — PC3</p>
+  </section>
+  <section class="border border-dashed border-neutral-300 rounded flex items-center justify-center">
+    <p class="text-sm text-neutral-400">Iframe carte AEP — PC4</p>
+  </section>
+</div>

src/components/astro/ColInsta.astro

@@ -0,0 +1,24 @@
+---
+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';
+---
+<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"
+  />
+</div>

src/components/astro/ColJournal.astro

@@ -0,0 +1,14 @@
+---
+// Placeholder Journal — PC6 remplit avec entries chrono
+---
+<section class="h-full p-4 flex flex-col gap-3">
+  <h2 class="text-lg font-semibold text-neutral-700">Journal</h2>
+  <ul class="flex flex-col gap-2 text-sm text-neutral-500">
+    <li class="border border-dashed border-neutral-300 rounded p-2">Entry placeholder 1</li>
+    <li class="border border-dashed border-neutral-300 rounded p-2">Entry placeholder 2</li>
+    <li class="border border-dashed border-neutral-300 rounded p-2">Entry placeholder 3</li>
+    <li class="border border-dashed border-neutral-300 rounded p-2">Entry placeholder 4</li>
+    <li class="border border-dashed border-neutral-300 rounded p-2">Entry placeholder 5</li>
+  </ul>
+  <p class="text-xs text-neutral-400 mt-auto">Nav latérale + manifeste CTA — PC2</p>
+</section>

src/components/astro/HamburgerMenu.astro

@@ -0,0 +1,12 @@
+---
+// Placeholder hamburger menu — PC2 ajoute liens nav
+---
+<button
+  type="button"
+  class="fixed top-3 right-3 z-30 p-2 rounded bg-white/80 border border-neutral-200 shadow-sm"
+  aria-label="Menu"
+>
+  <span class="block w-5 h-0.5 bg-neutral-700 mb-1"></span>
+  <span class="block w-5 h-0.5 bg-neutral-700 mb-1"></span>
+  <span class="block w-5 h-0.5 bg-neutral-700"></span>
+</button>

src/components/astro/PopupOnboarding.astro

@@ -0,0 +1,11 @@
+---
+// Placeholder popup onboarding — PC2 fait l'animation et le contenu
+---
+<div
+  id="pc-onboarding"
+  class="hidden fixed inset-0 z-40 bg-black/30 items-center justify-center"
+>
+  <div class="bg-white p-6 rounded shadow-lg max-w-sm">
+    <p class="text-sm text-neutral-600">Pop-up onboarding — PC2</p>
+  </div>
+</div>

src/components/vue/CarteO.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// Placeholder Carte O — PC3 implémente avec D3 + GraphView porté de nav-carte
+</script>
+
+<template>
+  <div class="h-full w-full flex items-center justify-center text-sm text-neutral-400">
+    Carte O placeholder (PC3)
+  </div>
+</template>

src/components/vue/ChatbotPlaceholder.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// Placeholder chatbot — PC7 branche endpoint API
+</script>
+
+<template>
+  <div class="h-full w-full flex items-center justify-center text-sm text-neutral-400">
+    Chatbot placeholder (PC7)
+  </div>
+</template>

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>

src/components/vue/JournalList.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// Placeholder journal list — PC6 lit public/data/journal.json
+</script>
+
+<template>
+  <div class="h-full w-full flex items-center justify-center text-sm text-neutral-400">
+    Journal list placeholder (PC6)
+  </div>
+</template>

src/components/vue/SwipeContainer.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import emblaCarouselVue from 'embla-carousel-vue';
+import { ref, onMounted } from 'vue';
+
+const [emblaRef, emblaApi] = emblaCarouselVue({
+  loop: false,
+  align: 'center',
+  containScroll: 'trimSnaps',
+  startIndex: 1,
+  dragFree: false,
+});
+
+const selectedIndex = ref(1);
+const handlesVisible = ref(true);
+let fadeTimer: ReturnType<typeof setTimeout> | null = null;
+
+const resetFade = () => {
+  handlesVisible.value = true;
+  if (fadeTimer) clearTimeout(fadeTimer);
+  fadeTimer = setTimeout(() => {
+    handlesVisible.value = false;
+  }, 3000);
+};
+
+onMounted(() => {
+  if (!emblaApi.value) return;
+  emblaApi.value.on('select', () => {
+    if (!emblaApi.value) return;
+    selectedIndex.value = emblaApi.value.selectedScrollSnap();
+    sessionStorage.setItem('pc-position', String(selectedIndex.value));
+    resetFade();
+  });
+  const saved = sessionStorage.getItem('pc-position');
+  if (saved !== null) {
+    const idx = Number(saved);
+    if (!Number.isNaN(idx)) emblaApi.value.scrollTo(idx, false);
+  }
+  resetFade();
+});
+
+const scrollTo = (idx: number) => {
+  emblaApi.value?.scrollTo(idx);
+  resetFade();
+};
+</script>
+
+<template>
+  <div class="relative h-full" @pointerdown="resetFade" @touchstart="resetFade">
+    <div ref="emblaRef" class="embla h-full overflow-hidden">
+      <div class="embla__container flex h-full">
+        <div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
+          <slot name="left" />
+        </div>
+        <div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
+          <slot name="center" />
+        </div>
+        <div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
+          <slot name="right" />
+        </div>
+      </div>
+    </div>
+
+    <button
+      v-if="selectedIndex !== 0"
+      type="button"
+      :class="[
+        'absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-white/70 rounded-full shadow transition-opacity duration-300',
+        handlesVisible ? 'opacity-100' : 'opacity-0',
+      ]"
+      aria-label="Panneau gauche"
+      @click="scrollTo(selectedIndex - 1)"
+    >
+      &larr;
+    </button>
+    <button
+      v-if="selectedIndex !== 2"
+      type="button"
+      :class="[
+        'absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-white/70 rounded-full shadow transition-opacity duration-300',
+        handlesVisible ? 'opacity-100' : 'opacity-0',
+      ]"
+      aria-label="Panneau droit"
+      @click="scrollTo(selectedIndex + 1)"
+    >
+      &rarr;
+    </button>
+
+    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10">
+      <button
+        v-for="i in 3"
+        :key="i"
+        type="button"
+        :class="[
+          'w-2 h-2 rounded-full transition-colors',
+          selectedIndex === i - 1 ? 'bg-neutral-900' : 'bg-neutral-400',
+        ]"
+        :aria-label="`Position ${i}`"
+        @click="scrollTo(i - 1)"
+      />
+    </div>
+  </div>
+</template>

src/layouts/BaseLayout.astro

@@ -0,0 +1,33 @@
+---
+import '../styles/global.css';
+
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const {
+  title = 'trans-former.fr',
+  description = 'Page-cerveau : journal, mindmap AEP, Insta',
+} = Astro.props;
+---
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+  </head>
+  <body class="m-0 bg-white text-neutral-900 antialiased">
+    <slot />
+  </body>
+</html>

src/pages/index.astro

@@ -0,0 +1,29 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import ColJournal from '../components/astro/ColJournal.astro';
+import ColCentre from '../components/astro/ColCentre.astro';
+import ColInsta from '../components/astro/ColInsta.astro';
+import SwipeContainer from '../components/vue/SwipeContainer.vue';
+import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
+import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
+---
+<BaseLayout title="trans-former.fr">
+  <HamburgerMenu />
+  <PopupOnboarding />
+
+  <!-- Desktop : grid 3 colonnes -->
+  <div class="hidden md:grid md:grid-cols-[320px_1fr_320px] h-screen overflow-hidden">
+    <aside class="border-r border-neutral-200 overflow-y-auto"><ColJournal /></aside>
+    <main class="overflow-hidden"><ColCentre /></main>
+    <aside class="border-l border-neutral-200 overflow-y-auto"><ColInsta /></aside>
+  </div>
+
+  <!-- Mobile : SwipeContainer Vue island -->
+  <div class="md:hidden h-screen overflow-hidden">
+    <SwipeContainer client:load>
+      <ColJournal slot="left" />
+      <ColCentre slot="center" />
+      <ColInsta slot="right" />
+    </SwipeContainer>
+  </div>
+</BaseLayout>

src/pages/manifeste.astro

@@ -0,0 +1,9 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+<BaseLayout title="Manifeste — trans-former.fr">
+  <main class="max-w-2xl mx-auto p-6">
+    <h1 class="text-2xl font-semibold mb-4">Manifeste</h1>
+    <p class="text-sm text-neutral-500">Placeholder — PC2 importe le contenu manifeste depuis astro-site existant.</p>
+  </main>
+</BaseLayout>

src/styles/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";

tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
+}