merge: PC5 embeds Insta col D Behold (round 1)

merge: PC3 mindmap Carte O D3 + scrape AEP (round 1)
merge: PC2 nav latérale + manifeste + popup (round 1)
2026-05-09 01:01:11 +02:00 · 2026-05-09 01:01:07 +02:00 · 2026-05-09 01:01:02 +02:00 · 2026-05-09 00:58:19 +02:00 · 2026-05-09 00:55:01 +02:00
11 changed files with 976 additions and 37 deletions
--- a/.env.example
+++ b/.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=
--- a/docs/BEHOLD-SETUP.md
+++ b/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
--- a/src/components/astro/ColInsta.astro
+++ b/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">
-  <h2 class="text-lg font-semibold text-neutral-700">Insta</h2>
-  <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">@aep carrousel — PC5</p>
+<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>
-  <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>
--- a/src/components/astro/ColJournal.astro
+++ b/src/components/astro/ColJournal.astro
@@ -1,14 +1,104 @@
 ---
-// Placeholder Journal — PC6 remplit avec entries chrono
+// ColJournal - colonne gauche : CTA Manifeste + Hashtags accordeon + Journal skeleton
+// 7 hashtags = 7 plateformes (cf delta 15 du PILOTE-PC.md)
+const hashtags = [
+  { tag: '#manifeste',       plateforme: 'Blog trans-former.fr',   canal: 'ecriture longue' },
+  { tag: '#building-public', plateforme: 'LinkedIn',               canal: 'journal pro' },
+  { tag: '#politique',       plateforme: 'Substack',               canal: 'pensee AEP' },
+  { tag: '#aep-politique',   plateforme: 'Insta @aep.politique',   canal: 'carrousels manifeste' },
+  { tag: '#peinture',        plateforme: 'Insta @julesneny',       canal: 'art / poesie / Corse' },
+  { tag: '#podcast',         plateforme: 'Castopod',               canal: 'podcast.trans-former.fr' },
+  { tag: '#stack',           plateforme: 'GitHub',                 canal: 'open source' },
+];
 ---
-<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>
+<div class="h-full flex flex-col p-4 pt-20 md:pt-6 gap-5">
+  <!-- CTA Manifeste -->
+  <a
+    href="/manifeste"
+    class="block px-4 py-3 bg-neutral-900 text-white rounded-lg font-medium text-center hover:bg-neutral-700 transition-colors shadow-sm"
+  >
+    Lire le manifeste &rarr;
+  </a>
+
+  <!-- Hashtags accordeon -->
+  <details id="hashtags-accordion" class="border-t border-neutral-200 pt-4">
+    <summary class="font-semibold cursor-pointer select-none flex items-center justify-between">
+      <span>Hashtags</span>
+      <span class="text-xs text-neutral-400 font-normal">7 plateformes</span>
+    </summary>
+    <ul class="mt-3 space-y-2 text-sm">
+      {hashtags.map(({ tag, plateforme, canal }) => (
+        <li>
+          <label class="flex items-start gap-2 cursor-pointer hover:bg-neutral-50 rounded p-1 -m-1 transition-colors">
+            <input
+              type="checkbox"
+              data-hashtag={tag}
+              class="mt-1 accent-neutral-900"
+              checked
+            />
+            <span class="flex-1">
+              <span class="font-mono text-neutral-700 text-[13px]">{tag}</span>
+              <span class="block text-xs text-neutral-500 leading-snug">
+                {plateforme} ; {canal}
+              </span>
+            </span>
+          </label>
+        </li>
+      ))}
    </ul>
-  <p class="text-xs text-neutral-400 mt-auto">Nav latérale + manifeste CTA — PC2</p>
+  </details>
+
+  <!-- Journal chrono (skeleton, slot rempli par PC6) -->
+  <section class="border-t border-neutral-200 pt-4 flex-1 overflow-y-auto">
+    <h2 class="font-semibold mb-3 flex items-center justify-between">
+      <span>Journal</span>
+      <span class="text-xs text-neutral-400 font-normal">chrono</span>
+    </h2>
+    <div id="journal-list" class="space-y-3 text-sm">
+      <!-- PC6 remplit ce slot via <JournalList client:visible /> -->
+      <p class="text-neutral-400 italic text-xs">
+        Chargement du journal...
+      </p>
+    </div>
  </section>
+</div>
+
+<script>
+  // Hashtags accordeon : ferme par defaut mobile, ouvert desktop (>= 768px)
+  const accordion = document.getElementById('hashtags-accordion') as HTMLDetailsElement | null;
+  if (accordion) {
+    const mql = window.matchMedia('(min-width: 768px)');
+    const apply = () => {
+      accordion.open = mql.matches;
+    };
+    apply();
+    mql.addEventListener('change', apply);
+  }
+
+  // Persistence filtres hashtags (localStorage)
+  const checkboxes = document.querySelectorAll<HTMLInputElement>('[data-hashtag]');
+  const STORAGE_KEY = 'tf-hashtag-filters';
+  let stored: Record<string, boolean> = {};
+  try {
+    stored = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+  } catch {
+    stored = {};
+  }
+
+  checkboxes.forEach((cb) => {
+    const tag = cb.dataset.hashtag;
+    if (!tag) return;
+    if (tag in stored) cb.checked = stored[tag];
+    cb.addEventListener('change', () => {
+      stored[tag] = cb.checked;
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
+      } catch {
+        // mode prive : on continue silencieusement
+      }
+      window.dispatchEvent(
+        new CustomEvent('hashtag-filter-change', { detail: { ...stored } })
+      );
+    });
+  });
+</script>
--- a/src/components/astro/HamburgerMenu.astro
+++ b/src/components/astro/HamburgerMenu.astro
@@ -1,12 +1,103 @@
 ---
-// Placeholder hamburger menu — PC2 ajoute liens nav
+// HamburgerMenu - drawer slide-in left avec liens nav (PC2)
+// Astro vanilla + script inline, pas besoin d'island Vue
 ---
 <button
+  id="hamburger-trigger"
  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"
+  class="fixed top-4 left-4 z-50 p-3 bg-white/95 border border-neutral-200 rounded-lg shadow-md hover:bg-white transition-colors md:top-6 md:left-6"
+  aria-label="Ouvrir le menu"
+  aria-expanded="false"
+  aria-controls="hamburger-drawer"
 >
-  <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>
+  <span class="block w-5 h-0.5 bg-neutral-800 mb-1"></span>
+  <span class="block w-5 h-0.5 bg-neutral-800 mb-1"></span>
+  <span class="block w-5 h-0.5 bg-neutral-800"></span>
 </button>
+
+<div
+  id="hamburger-drawer"
+  class="fixed inset-0 z-40 hidden"
+  role="dialog"
+  aria-modal="true"
+  aria-label="Menu de navigation"
+>
+  <div
+    class="absolute inset-0 bg-black/30 transition-opacity"
+    data-drawer-close
+    aria-hidden="true"
+  ></div>
+  <nav
+    id="hamburger-nav"
+    class="absolute left-0 top-0 h-full w-72 max-w-[80vw] bg-white shadow-xl p-6 transform -translate-x-full transition-transform duration-200 ease-out"
+  >
+    <button
+      type="button"
+      data-drawer-close
+      class="absolute top-4 right-4 w-9 h-9 flex items-center justify-center text-neutral-500 hover:text-neutral-900 text-2xl leading-none rounded-md hover:bg-neutral-100"
+      aria-label="Fermer le menu"
+    >
+      &times;
+    </button>
+    <ul class="mt-12 space-y-1 text-base">
+      <li>
+        <a
+          href="/a-propos"
+          class="block px-3 py-2 rounded-md text-neutral-800 hover:bg-neutral-100 hover:text-neutral-900 transition-colors"
+        >
+          A propos
+        </a>
+      </li>
+      <li>
+        <a
+          href="/manifeste"
+          class="block px-3 py-2 rounded-md text-neutral-800 hover:bg-neutral-100 hover:text-neutral-900 transition-colors"
+        >
+          Manifeste
+        </a>
+      </li>
+      <li>
+        <a
+          href="/mentions-legales"
+          class="block px-3 py-2 rounded-md text-neutral-800 hover:bg-neutral-100 hover:text-neutral-900 transition-colors"
+        >
+          Mentions legales
+        </a>
+      </li>
+      <!-- TODO V2 : ajouter liens ici (newsletter, soutien Liberapay, contact) -->
+    </ul>
+  </nav>
+</div>
+
+<script>
+  const trigger = document.getElementById('hamburger-trigger');
+  const drawer = document.getElementById('hamburger-drawer');
+  const nav = document.getElementById('hamburger-nav');
+
+  const open = () => {
+    if (!drawer || !nav) return;
+    drawer.classList.remove('hidden');
+    trigger?.setAttribute('aria-expanded', 'true');
+    requestAnimationFrame(() => nav.classList.remove('-translate-x-full'));
+  };
+
+  const close = () => {
+    if (!drawer || !nav) return;
+    nav.classList.add('-translate-x-full');
+    trigger?.setAttribute('aria-expanded', 'false');
+    setTimeout(() => drawer.classList.add('hidden'), 200);
+  };
+
+  trigger?.addEventListener('click', open);
+
+  drawer?.querySelectorAll('[data-drawer-close]').forEach((el) =>
+    el.addEventListener('click', close)
+  );
+
+  // ESC pour fermer
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && drawer && !drawer.classList.contains('hidden')) {
+      close();
+    }
+  });
+</script>
--- a/src/components/astro/PopupOnboarding.astro
+++ b/src/components/astro/PopupOnboarding.astro
@@ -1,11 +1,101 @@
 ---
-// Placeholder popup onboarding — PC2 fait l'animation et le contenu
+// PopupOnboarding - micro-resume premier visit, localStorage flag tf-onboarded
+// Le micro-resume est une PROPOSITION Opus a iterer avec Jules.
+// Stocke en constante en tete pour iteration facile.
+const microResume = `Architecture, ecologie, politique : un commun a construire ensemble.
+Reapproprions-nous nos infrastructures vitales en repartant de l'existant.
+Ce site, c'est le journal vivant de cette bifurcation.`;
 ---
 <div
-  id="pc-onboarding"
-  class="hidden fixed inset-0 z-40 bg-black/30 items-center justify-center"
+  id="onboarding-popup"
+  class="fixed inset-0 z-[60] hidden bg-black/50 backdrop-blur-sm items-center justify-center p-4"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="onboarding-text"
 >
-  <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 class="bg-white rounded-xl max-w-md w-full p-6 md:p-7 shadow-2xl relative animate-fade-in">
+    <button
+      id="onboarding-close"
+      type="button"
+      class="absolute top-3 right-3 w-8 h-8 flex items-center justify-center text-neutral-400 hover:text-neutral-800 text-2xl leading-none rounded-md hover:bg-neutral-100 transition-colors"
+      aria-label="Fermer"
+    >
+      &times;
+    </button>
+    <p
+      id="onboarding-text"
+      class="text-base md:text-lg leading-relaxed text-neutral-800 whitespace-pre-line pr-6"
+    >{microResume}</p>
+    <button
+      id="onboarding-cta"
+      type="button"
+      class="mt-5 px-4 py-2.5 bg-neutral-900 text-white rounded-lg w-full font-medium hover:bg-neutral-700 transition-colors"
+    >
+      Entrer
+    </button>
  </div>
 </div>
+
+<style>
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .animate-fade-in {
+    animation: fadeIn 0.25s ease-out;
+  }
+</style>
+
+<script>
+  const STORAGE_KEY = 'tf-onboarded';
+  const popup = document.getElementById('onboarding-popup');
+  const closeBtn = document.getElementById('onboarding-close');
+  const ctaBtn = document.getElementById('onboarding-cta');
+
+  let alreadyOnboarded = false;
+  try {
+    alreadyOnboarded = !!localStorage.getItem(STORAGE_KEY);
+  } catch {
+    // mode prive : on affiche quand meme, sans persistence
+    alreadyOnboarded = false;
+  }
+
+  if (!alreadyOnboarded && popup) {
+    requestAnimationFrame(() => {
+      popup.classList.remove('hidden');
+      popup.classList.add('flex');
+    });
+  }
+
+  const dismiss = () => {
+    if (!popup) return;
+    popup.classList.remove('flex');
+    popup.classList.add('hidden');
+    try {
+      localStorage.setItem(STORAGE_KEY, '1');
+    } catch {
+      // mode prive : pas de persistence
+    }
+    window.removeEventListener('scroll', onScroll);
+  };
+
+  closeBtn?.addEventListener('click', dismiss);
+  ctaBtn?.addEventListener('click', dismiss);
+
+  // Dismiss implicite au scroll 200px (engagement implicite)
+  const onScroll = () => {
+    if (window.scrollY > 200) {
+      dismiss();
+    }
+  };
+  if (!alreadyOnboarded) {
+    window.addEventListener('scroll', onScroll, { passive: true });
+  }
+
+  // ESC pour fermer
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && popup && !popup.classList.contains('hidden')) {
+      dismiss();
+    }
+  });
+</script>
--- a/src/components/vue/InstaFeed.vue
+++ b/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>
--- a/src/pages/a-propos.astro
+++ b/src/pages/a-propos.astro
@@ -0,0 +1,79 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
+---
+<BaseLayout
+  title="A propos - Jules Neny"
+  description="Architecte HMONP, ecrivain politique, facilitateur. Bagneres-de-Bigorre, Pyrenees."
+>
+  <HamburgerMenu />
+
+  <main class="min-h-screen bg-white">
+    <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">
+
+      <header class="mb-10">
+        <p class="text-sm uppercase tracking-widest text-neutral-500 mb-3">
+          A propos
+        </p>
+        <h1 class="text-3xl md:text-4xl font-semibold text-neutral-900 leading-tight">
+          Jules Neny
+        </h1>
+        <p class="mt-3 text-neutral-600 text-base md:text-lg">
+          Architecte HMONP. Ecrivain politique. Facilitateur. Bagneres-de-Bigorre, Pyrenees.
+        </p>
+      </header>
+
+      <div class="text-neutral-800 text-[17px] leading-[1.75] space-y-6">
+
+        <p>
+          Je suis architecte, forme a l'ENSAPB (Paris-Belleville), avec un passage par Oxford Brookes et un bootcamp Perspectives. Je travaille en independant sous le nom <em>Transformations resilientes</em>, basee dans les Pyrenees. Mon metier de base : audit energetique (MAR), maitrise d'oeuvre en renovation et construction ecologique, accompagnement a l'autonomie (eau, energie, jardin).
+        </p>
+
+        <p>
+          Mais l'architecture, pour moi, deborde du bati. C'est aussi une lecture des systemes ; un outil de diagnostic du corps social. La ou l'eau, l'energie, la justice, l'education, la sante, le logement et l'agriculture defaillent ; il y a des reconfigurations a inventer, situees, par territoire. Reprendre le pouvoir par la base. Ecrire, lentement, un nouveau contrat social.
+        </p>
+
+        <p>
+          Trois fils tissent mon travail :
+        </p>
+
+        <ul class="list-disc list-outside pl-6 space-y-2">
+          <li>
+            <strong>Architecte</strong> ; reveler les problematiques complexes des systemes (diagnostic systemique, pratique de terrain).
+          </li>
+          <li>
+            <strong>Ecrivain politique</strong> ; transmettre et problematiser via le manifeste <em>Architecture d'Ecologie Politique</em>, le blog trans-former.fr, et bientot Substack.
+          </li>
+          <li>
+            <strong>Facilitateur</strong> ; accompagner la transformation democratique (intelligence collective, formations).
+          </li>
+        </ul>
+
+        <p>
+          Ma boussole : <em>me transformer pour contribuer a la transformation du monde</em>. Mes valeurs : emancipation, liens, amour. Mes pratiques quotidiennes : ecriture du matin, yoga Isha, marche en montagne, peinture a l'huile, cuisine.
+        </p>
+
+        <p>
+          Ce site est un journal vivant. Il agrege ce que je publie sur plusieurs plateformes (blog, Substack, LinkedIn, Instagram, Castopod, GitHub) ; et tente de rendre lisible une demarche qui se fait dans le temps long.
+        </p>
+
+        <p>
+          Pour me joindre :
+          <a
+            href="mailto:julesneny8@gmail.com"
+            class="underline underline-offset-2 hover:text-neutral-900"
+          >julesneny8@gmail.com</a>.
+        </p>
+      </div>
+
+      <footer class="mt-12 pt-8 border-t border-neutral-200 text-sm text-neutral-500">
+        <p>
+          <a href="/" class="underline underline-offset-2 hover:text-neutral-900">
+            &larr; Retour au journal
+          </a>
+        </p>
+      </footer>
+
+    </article>
+  </main>
+</BaseLayout>
--- a/src/pages/manifeste.astro
+++ b/src/pages/manifeste.astro
@@ -1,9 +1,220 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
+import HamburgerMenu from '../components/astro/HamburgerMenu.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>
+<BaseLayout
+  title="Manifeste - Architecture d'Ecologie Politique"
+  description="Manifeste AEP : un commun vivant pour une architecture d'ecologie politique. Architectes, allie-es, habitant-es."
+>
+  <HamburgerMenu />
+
+  <main class="min-h-screen bg-white">
+    <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">
+
+      <!-- En-tete -->
+      <header class="mb-12 md:mb-16">
+        <p class="text-sm uppercase tracking-widest text-neutral-500 mb-3">
+          Manifeste
+        </p>
+        <h1 class="text-3xl md:text-4xl font-semibold text-neutral-900 leading-tight">
+          Architecture d'Ecologie Politique
+        </h1>
+        <p class="mt-4 text-neutral-600 text-base md:text-lg leading-relaxed">
+          Un commun vivant pour bifurquer ; ensemble, lentement, par accumulation de petits gestes situes.
+        </p>
+        <div class="mt-8">
+          <a
+            href="/manifeste/commander"
+            class="inline-block px-5 py-2.5 border border-neutral-900 text-neutral-900 rounded-lg font-medium hover:bg-neutral-900 hover:text-white transition-colors"
+          >
+            Commander la version imprimee
+          </a>
+        </div>
+      </header>
+
+      <!-- Corps du manifeste -->
+      <div class="text-neutral-800 text-[17px] md:text-[18px] leading-[1.75] space-y-6">
+
+        <p class="italic text-neutral-700">
+          Un quart des architectes vivent sous le seuil de pauvrete. La moitie de nos heures, non facturees. Nos cotisations, parmi les plus lourdes des professions reglementees. Et le secteur du batiment, a lui seul, pese 34% des emissions mondiales de gaz a effet de serre.
+        </p>
+
+        <p>
+          Quelque chose s'est rompu ; pas dans nos vies, dans les cadres qui les contiennent.
+        </p>
+
+        <p>
+          Notre profession ne traverse pas une simple crise. Elle reflete l'effondrement d'un monde qui confond performance et destruction, signature et silence, expertise et soumission.
+        </p>
+
+        <hr class="border-neutral-200 my-8" />
+
+        <h2 class="text-xl md:text-2xl font-semibold text-neutral-900 mt-12 mb-4">
+          Ce que nous voyons.
+        </h2>
+
+        <p>
+          A l'echelle du metier, une profession structurellement sous l'eau, qui absorbe les tensions d'un systeme extractiviste ; et porte la responsabilite quand d'autres captent la valeur.
+        </p>
+
+        <p>
+          A l'echelle des corps, une culture qui rend l'exploitation desirable : metier-passion, modele starchitecte, isolement liberal, moteur critique delegitimant. Nous tenons. Nous payons.
+        </p>
+
+        <p>
+          A l'echelle du monde, l'effondrement ecologique et social qui avance, pendant que notre voix s'efface du debat public. Notre silence le sert.
+        </p>
+
+        <hr class="border-neutral-200 my-8" />
+
+        <h2 class="text-xl md:text-2xl font-semibold text-neutral-900 mt-12 mb-4">
+          Ce que nous refusons.
+        </h2>
+
+        <p>
+          Nous ne signerons plus pour des projets qui detruisent.<br />
+          Nous n'isolerons plus celles et ceux qui doutent.<br />
+          Nous ne porterons plus seul-es ce qui doit se penser, se faire ; et se soigner ; ensemble.
+        </p>
+
+        <hr class="border-neutral-200 my-8" />
+
+        <!-- Pivot : centre emotionnel du texte (italique + retrait) -->
+        <blockquote class="my-12 md:my-16 px-6 md:px-10 py-6 border-l-4 border-neutral-900 italic text-neutral-800 text-lg md:text-xl leading-relaxed">
+          <p class="font-medium not-italic mb-3 text-neutral-900">
+            Et pourtant, quelque chose tient.
+          </p>
+          <p>
+            Pas l'espoir naif, ni la promesse heroique. Quelque chose de plus humble : la fatigue commune reconnue, et l'envie qui revient de ne plus economiser sa vie.
+          </p>
+        </blockquote>
+
+        <hr class="border-neutral-200 my-8" />
+
+        <h2 class="text-xl md:text-2xl font-semibold text-neutral-900 mt-12 mb-4">
+          Ce que nous tentons.
+        </h2>
+
+        <p>
+          <em class="font-semibold not-italic">Partager.</em> Nos parcours, nos doutes, nos bifurcations. Se former les un-es les autres. Se tendre la main. Documenter ce qui marche, ce qui rate. Le personnel devient politique quand il se met en commun.
+        </p>
+
+        <p>
+          <em class="font-semibold not-italic">Construire.</em> L'infrastructure collective qui nous a manque. Cartes d'entraide, communs documentes, gouvernance horizontale, financement transparent, infra souveraine. <strong>Architecture d'Ecologie Politique</strong> : un commun vivant, ouvert, bioregional, ancre.
+        </p>
+
+        <p>
+          <em class="font-semibold not-italic">Pratiquer une medecine du corps social.</em> Diagnostiquer les infrastructures qui defaillent ; l'education, la justice, la securite, l'energie, la sante, le logement, l'agriculture. Proposer des reconfigurations situees, territoire par territoire. Reprendre le pouvoir par la base. Ecrire, lentement, un nouveau contrat social.
+        </p>
+
+        <p>
+          <em class="font-semibold not-italic">Commencer par les marges.</em> La ou le corps social souffre le plus, la ou il est le plus pret a changer. Ne pas decider a la place ; faire emerger. Transparence totale, sur le process et sur l'argent. Tendresse militante : la lucidite sans le mepris, l'engagement sans la durete.
+        </p>
+
+        <hr class="border-neutral-200 my-8" />
+
+        <h2 class="text-xl md:text-2xl font-semibold text-neutral-900 mt-12 mb-4">
+          Architectes, allie-es, habitant-es.
+        </h2>
+
+        <p>
+          Nous avons un travail a faire ensemble. Lentement, patiemment, par accumulation de petits gestes situes. Pas pour fuir ; pour bifurquer.
+        </p>
+
+        <!-- Chute : italique, separee -->
+        <p class="mt-10 md:mt-12 italic text-neutral-900 text-lg md:text-xl leading-relaxed">
+          Nos metiers sont des medecines. Reprenons-en le pouls ; a mains nues, ensemble.
+        </p>
+      </div>
+
+      <!-- Diagramme ASCII : recap des mouvements -->
+      <section class="mt-16 md:mt-20 pt-10 border-t border-neutral-200">
+        <h2 class="text-xl md:text-2xl font-semibold text-neutral-900 mb-6">
+          Les mouvements
+        </h2>
+
+        <div class="space-y-6 text-sm">
+          <div class="border border-neutral-200 rounded-lg p-5 bg-neutral-50">
+            <h3 class="font-mono text-xs uppercase tracking-wider text-neutral-500 mb-3">
+              M / Profession
+            </h3>
+            <ul class="space-y-2">
+              <li>
+                <a href="https://trans-former.fr/aep-m1-echm/" class="text-neutral-800 hover:text-neutral-900 underline underline-offset-2 decoration-neutral-300 hover:decoration-neutral-900 transition-colors">
+                  Anatomie d'une profession sous l'eau
+                </a>
+              </li>
+              <li>
+                <a href="https://trans-former.fr/aep-m4-echxl/" class="text-neutral-800 hover:text-neutral-900 underline underline-offset-2 decoration-neutral-300 hover:decoration-neutral-900 transition-colors">
+                  La filiere beton, dispositif d'extraction
+                </a>
+              </li>
+              <li>
+                <a href="https://aep.trans-former.fr" class="text-neutral-800 hover:text-neutral-900 underline underline-offset-2 decoration-neutral-300 hover:decoration-neutral-900 transition-colors">
+                  Pratiques regeneratives (carto vivante)
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="border border-neutral-200 rounded-lg p-5 bg-neutral-50">
+            <h3 class="font-mono text-xs uppercase tracking-wider text-neutral-500 mb-3">
+              S / Individu
+            </h3>
+            <ul class="space-y-2">
+              <li>
+                <a href="https://trans-former.fr/aep-m2-echs/" class="text-neutral-800 hover:text-neutral-900 underline underline-offset-2 decoration-neutral-300 hover:decoration-neutral-900 transition-colors">
+                  Ce qui nous maintient sous l'eau
+                </a>
+              </li>
+              <li>
+                <a href="https://trans-former.fr/aep-m6-pivot/" class="text-neutral-800 hover:text-neutral-900 underline underline-offset-2 decoration-neutral-300 hover:decoration-neutral-900 transition-colors">
+                  Resistance et regeneration (M6)
+                </a>
+              </li>
+              <li>
+                <a href="https://trans-former.fr/aep-m8-action/" class="text-neutral-800 hover:text-neutral-900 underline underline-offset-2 decoration-neutral-300 hover:decoration-neutral-900 transition-colors">
+                  Action et poeme (M8)
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="border border-neutral-200 rounded-lg p-5 bg-neutral-50">
+            <h3 class="font-mono text-xs uppercase tracking-wider text-neutral-500 mb-3">
+              XL / Corps social
+            </h3>
+            <ul class="space-y-2">
+              <li>
+                <a href="https://trans-former.fr/aep-m4-echxl/" class="text-neutral-800 hover:text-neutral-900 underline underline-offset-2 decoration-neutral-300 hover:decoration-neutral-900 transition-colors">
+                  Polycrise et logiciel patriarcal-imperial
+                </a>
+              </li>
+              <li class="text-neutral-400 italic">
+                Medecine du corps social ; esquisse [a venir, ete 2026]
+              </li>
+              <li class="text-neutral-400 italic">
+                Le nouveau contrat social ; Le Livre [horizon 10 ans]
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <!-- En lire plus -->
+      <footer class="mt-16 pt-10 border-t border-neutral-200 text-center">
+        <p class="text-neutral-600 mb-4">En lire plus</p>
+        <a
+          href="https://www.trans-former.fr/"
+          class="inline-block px-5 py-2.5 bg-neutral-900 text-white rounded-lg font-medium hover:bg-neutral-700 transition-colors"
+        >
+          Blog trans-former.fr &rarr;
+        </a>
+        <p class="mt-4 text-xs text-neutral-400">
+          bientot sur Substack
+        </p>
+      </footer>
+
+    </article>
  </main>
 </BaseLayout>
--- a/src/pages/manifeste/commander.astro
+++ b/src/pages/manifeste/commander.astro
@@ -0,0 +1,112 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import HamburgerMenu from '../../components/astro/HamburgerMenu.astro';
+---
+<BaseLayout
+  title="Commander la version imprimee - Manifeste AEP"
+  description="Pre-inscription pour la version imprimee du manifeste Architecture d'Ecologie Politique."
+>
+  <HamburgerMenu />
+
+  <main class="min-h-screen bg-white">
+    <article class="max-w-xl mx-auto px-6 py-16 md:py-24">
+
+      <header class="mb-10">
+        <p class="text-sm uppercase tracking-widest text-neutral-500 mb-3">
+          Manifeste imprime
+        </p>
+        <h1 class="text-3xl md:text-4xl font-semibold text-neutral-900 leading-tight">
+          Commander la version imprimee
+        </h1>
+      </header>
+
+      <div class="text-neutral-700 text-base md:text-lg leading-relaxed space-y-5">
+        <p>
+          La version imprimee du manifeste sera disponible prochainement ; tirage limite, papier recycle, format A5.
+        </p>
+        <p>
+          Inscrivez-vous pour etre averti-e de la mise en vente. Vous serez prevenu-e en priorite, sans engagement.
+        </p>
+      </div>
+
+      <!-- Form pre-inscription (V1 stub, V1.1 cable Listmonk) -->
+      <form
+        id="manifeste-preinscription"
+        class="mt-10 flex flex-col gap-3"
+        novalidate
+      >
+        <label for="email" class="text-sm font-medium text-neutral-700">
+          Votre email
+        </label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          required
+          autocomplete="email"
+          placeholder="prenom@exemple.fr"
+          class="px-4 py-3 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:border-neutral-900"
+        />
+        <button
+          type="submit"
+          class="mt-2 px-5 py-3 bg-neutral-900 text-white rounded-lg font-medium hover:bg-neutral-700 transition-colors"
+        >
+          Etre averti-e
+        </button>
+        <p
+          id="form-feedback"
+          class="text-sm text-neutral-600 hidden"
+          aria-live="polite"
+        ></p>
+      </form>
+
+      <p class="mt-8 text-sm text-neutral-500">
+        <a
+          href="/manifeste"
+          class="underline underline-offset-2 hover:text-neutral-900 transition-colors"
+        >
+          &larr; Retour au manifeste
+        </a>
+      </p>
+
+    </article>
+  </main>
+</BaseLayout>
+
+<script>
+  // V1 stub : capture email en localStorage, V1.1 = POST Listmonk
+  const form = document.getElementById('manifeste-preinscription') as HTMLFormElement | null;
+  const feedback = document.getElementById('form-feedback');
+
+  form?.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const data = new FormData(form);
+    const email = String(data.get('email') || '').trim();
+    if (!email || !email.includes('@')) {
+      if (feedback) {
+        feedback.textContent = 'Merci de saisir un email valide.';
+        feedback.classList.remove('hidden');
+        feedback.classList.add('text-red-600');
+      }
+      return;
+    }
+
+    // Stockage local en attendant le cable Listmonk (V1.1)
+    try {
+      const existing = JSON.parse(
+        localStorage.getItem('tf-manifeste-preinscriptions') || '[]'
+      );
+      existing.push({ email, ts: Date.now() });
+      localStorage.setItem('tf-manifeste-preinscriptions', JSON.stringify(existing));
+    } catch {
+      // mode prive : on ignore
+    }
+
+    if (feedback) {
+      feedback.textContent = 'Merci ; vous serez prevenu-e des sa disponibilite.';
+      feedback.classList.remove('hidden', 'text-red-600');
+      feedback.classList.add('text-green-700');
+    }
+    form.reset();
+  });
+</script>
--- a/src/pages/mentions-legales.astro
+++ b/src/pages/mentions-legales.astro
@@ -0,0 +1,92 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
+---
+<BaseLayout
+  title="Mentions legales - trans-former.fr"
+  description="Mentions legales du site trans-former.fr."
+>
+  <HamburgerMenu />
+
+  <main class="min-h-screen bg-white">
+    <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">
+
+      <header class="mb-10">
+        <p class="text-sm uppercase tracking-widest text-neutral-500 mb-3">
+          Mentions
+        </p>
+        <h1 class="text-3xl md:text-4xl font-semibold text-neutral-900 leading-tight">
+          Mentions legales
+        </h1>
+      </header>
+
+      <div class="text-neutral-800 text-[16px] leading-[1.7] space-y-8">
+
+        <section>
+          <h2 class="text-lg font-semibold text-neutral-900 mb-2">Editeur</h2>
+          <p>
+            Jules Neny, architecte HMONP.<br />
+            <em>Transformations resilientes</em><br />
+            Bagneres-de-Bigorre, Pyrenees, France.<br />
+            SIRET : 888 668 860 00016.<br />
+            TVA : non applicable, art. 293B du CGI.<br />
+            Inscription : Ordre des Architectes, CROA Occitanie.<br />
+            RC Pro : MAF n 71183.
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-lg font-semibold text-neutral-900 mb-2">Contact</h2>
+          <p>
+            <a
+              href="mailto:julesneny8@gmail.com"
+              class="underline underline-offset-2 hover:text-neutral-900"
+            >julesneny8@gmail.com</a>
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-lg font-semibold text-neutral-900 mb-2">Hebergement</h2>
+          <p>
+            Hetzner Online GmbH<br />
+            Industriestr. 25, 91710 Gunzenhausen, Allemagne.<br />
+            <a
+              href="https://www.hetzner.com/"
+              class="underline underline-offset-2 hover:text-neutral-900"
+            >hetzner.com</a>
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-lg font-semibold text-neutral-900 mb-2">Donnees personnelles</h2>
+          <p>
+            Ce site n'utilise pas de cookies analytiques ni de traceurs publicitaires. Les donnees techniques de connexion (logs serveur) sont conservees a des fins de securite et de diagnostic, conformement aux obligations legales.
+          </p>
+          <p class="mt-3">
+            Les emails collectes via les formulaires de pre-inscription (manifeste imprime, newsletter) ne sont pas cedes a des tiers et servent uniquement aux finalites annoncees.
+          </p>
+        </section>
+
+        <section>
+          <h2 class="text-lg font-semibold text-neutral-900 mb-2">Propriete intellectuelle</h2>
+          <p>
+            Les contenus publies (textes, images, code) sont, sauf mention contraire, la propriete de Jules Neny. Reutilisation autorisee a des fins non commerciales avec attribution. Pour tout autre usage, contact prealable.
+          </p>
+        </section>
+
+        <p class="text-xs text-neutral-400 italic pt-4">
+          Page V1 ; les details (statut juridique a confirmer, politique cookies si ajoute, mediateur consommation) seront completes en V1.1.
+        </p>
+      </div>
+
+      <footer class="mt-12 pt-8 border-t border-neutral-200 text-sm text-neutral-500">
+        <p>
+          <a href="/" class="underline underline-offset-2 hover:text-neutral-900">
+            &larr; Retour au journal
+          </a>
+        </p>
+      </footer>
+
+    </article>
+  </main>
+</BaseLayout>
Author	SHA1	Message	Date
Jules Neny	68e511be7a	merge: PC5 embeds Insta col D Behold (round 1)	2026-05-09 01:01:11 +02:00
Jules Neny	0c53f450c3	merge: PC3 mindmap Carte O D3 + scrape AEP (round 1)	2026-05-09 01:01:07 +02:00
Jules Neny	64a3cc7147	merge: PC2 nav latérale + manifeste + popup (round 1)	2026-05-09 01:01:02 +02:00
Jules Neny	712ed0eefa	feat(pc2): hamburger nav + manifeste V1 + popup onboarding - HamburgerMenu drawer slide-in left avec liens A propos, Manifeste, Mentions legales (ESC + clic overlay pour fermer) - ColJournal enrichi : CTA Manifeste, accordeon Hashtags (7 plateformes, ferme mobile / ouvert desktop, persistence localStorage), skeleton Journal pour PC6 - Page /manifeste : V1 redige integre (em-dashes remplaces par tirets/points-virgules), pivot stylise blockquote, diagramme mouvements en 3 sections boites - Page /manifeste/commander : stub form pre-inscription (V1 localStorage, V1.1 cable Listmonk) - Page /a-propos : extrait de Contexte Global, 3-4 paragraphes Jules - Page /mentions-legales : placeholder court (editeur, hebergeur Hetzner, pas de cookies) - PopupOnboarding : micro-resume 3 lignes proposees, dismiss X / CTA / scroll 200px / ESC, flag tf-onboarded	2026-05-09 00:58:19 +02:00
Jules Neny	71053ec9a6	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.	2026-05-09 00:55:01 +02:00