feat: PC1 scaffolding Astro 6 + Vue islands + Tailwind 4 + Embla swipe

Initial structure for page-cerveau:
- Astro 6.3.1 + @astrojs/vue 6.0.1 + Vue 3.5
- Tailwind 4 via @tailwindcss/vite (vs Tailwind 3.4 in prompt; @astrojs/tailwind incompatible with Astro 6 peer deps)
- Embla Carousel Vue for mobile swipe (3 strict positions)
- src/components/astro/ : 5 placeholder components (Col*, HamburgerMenu, PopupOnboarding)
- src/components/vue/ : SwipeContainer + 3 placeholder islands
- src/layouts/BaseLayout.astro
- src/pages/index.astro (3 cols desktop ; SwipeContainer mobile) + manifeste.astro placeholder
- public/data/ ready for PC3 (carte-o.json) + PC6 (journal.json)

Build OK (0 errors, 0 warnings); dev server tested localhost:4321 with all components rendering.

Note: Astro version is 6.3.1 (latest stable) instead of 5.x specified in prompt; 6.x is current LTS.

.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()],
+  },
+});

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,12 @@
+---
+// Placeholder Insta : 2 carrousels @aep + @julesneny — PC5 oEmbed
+---
+<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>
+  <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>

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/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"
+  }
+}