Page événement : contenu structuré axes/espaces/config depuis PDF Genèse

- evenement.yml : kicker, titre, subtitle, leitmotiv, tagline, gestation,
  description, 3 axes (numérique/économique/politique), 6 espaces, 4 config
- evenement.vue : hero complet (shadoks, logo SVG inline, badges), sections
  axes/espaces/config, styles scoped responsive
- bookplayer.config.yml → slugs 06-produire/07-echanger déjà commités
- Ajout Librodrome-Logo.png + librodrome-logo.svg (vectorisation en cours)
- Ajout PDF genèse en public/pdf/
- .gitignore, CLAUDE.md, BookSection, économique : ajustements session

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

.gitignore

@@ -25,6 +25,9 @@ public/pdfjs/pdf.worker.min.mjs
 # Sources originales (PDF, JPG — pas servies par l'appli)
 sources/
 
+# Runtime data (Docker volume — never committed)
+data/
+
 # Local env files
 .env
 .env.*

CLAUDE.md

@@ -2,81 +2,84 @@
 
 Site vitrine du projet Le Librodrome — livre + chansons sur l'économie du don.
 
+## Protocole de début de session
+
+1. `git pull --rebase origin main` (récupère les commits admin git sync YAML prod)
+2. Vérifier que `data/messages.yml` existe — si absent, signaler avant toute opération
+3. Si l'objectif de la session n'est pas précisé, le demander
+
 ## Stack
 
-- **Nuxt 4** (Vue 3, TypeScript, Nitro)
+- Nuxt 4 (Vue 3, TypeScript, Nitro) + Nuxt Content, Pinia, UnoCSS, VueUse, Nuxt Image
-- **Modules** : Nuxt Content, Pinia, UnoCSS, VueUse, Nuxt Image
+- Icônes : Lucide + Phosphor (via @iconify-json) ; Package manager : pnpm
-- **Icônes** : Lucide + Phosphor (via @iconify-json)
+- Déploiement : Docker + Traefik, CI via Woodpecker
-- **Package manager** : pnpm
-- **Déploiement** : Docker + Traefik, CI via Woodpecker
 
 ## Structure
 
 ```
 app/
   pages/
-    numerique/          # Autonomie numérique (index + [slug] détail)
+    numerique/          # index + [slug]
-    economique/         # Autonomie économique (index, monnaie-libre, commande, productions-collectives)
+    economique/         # index, monnaie-libre, commande, productions-collectives
-      modele-eco/       # Livre : sommaire + chapitres [slug]
+      modele-eco/       # sommaire + chapitres [slug]
-    citoyenne/          # Autonomie citoyenne (index + [slug] détail)
+    citoyenne/          # index + [slug]
-    en-musique/         # Player audio
+    en-musique/         # player audio
-    evenement.vue       # Événement
+    admin/              # back-office (pages/, book/, songs, messages, media)
-    admin/              # Back-office (pages/, book/, songs, messages, media)
   components/
-    book/Actions.vue    # Boutons partagés livre (player, PDF, chapitres, commande)
+    book/Actions.vue    # boutons partagés (player, PDF, chapitres, commande)
-    home/               # BookSection, AxisBlock, AxisGrid, HeroSection, Messages
+    home/               # BookSection, AxisBlock, AxisGrid, HeroSection, HomeMessages
     admin/, player/, song/, ui/
-  composables/          # useAudioPlayer, useBookData, useGrateWizard, usePageContent...
+  composables/          # useAudioPlayer, useBookData, useGrateWizard, usePageContent
   stores/palette.ts     # 4 palettes saisonnières (été par défaut, persisté localStorage)
-  assets/css/           # main.css (UnoCSS + overrides light mode)
+  assets/css/main.css   # UnoCSS + overrides light mode
 site/
-  pages/                # Contenu YAML par section (numerique/, economique/, citoyenne/)
+  pages/                # Contenu YAML administrable par section (sous-dossiers)
   site.yml              # Config globale (nav, footer, GrateWizard)
   bookplayer.config.yml # Config player/chapitres
+data/
+  messages.yml          # Runtime — volume Docker ../data:/src/data — JAMAIS dans git
 server/
-  api/content/pages/[...path].get.ts   # GET pages YAML (chemins imbriqués)
+  api/content/          # GET pages YAML (chemins imbriqués)
-  api/admin/content/pages/[...path].put.ts  # PUT pages YAML
+  api/admin/content/    # PUT pages YAML + liste
-  api/admin/content/pages.get.ts       # Liste toutes les pages
+  api/messages/         # GET (publiés) + POST (nouveau message)
-  middleware/redirects.ts              # 301 : /gestation, /modele-eco, /decision, /lire
+  api/admin/messages/   # GET tous + PUT (type, reply, published) + DELETE
+  utils/content.ts      # readDataYaml/writeDataYaml (data/) + readYaml/writeYaml (site/)
+  middleware/redirects.ts  # 301 : /gestation, /modele-eco, /decision, /lire
 docker/
   Dockerfile, docker-compose.yml, docker-compose.dev.yml
 ```
 
-## Ports dev (CRITIQUE)
+## Données runtime (CRITIQUE)
 
-| Projet | Port | Config |
+- `data/messages.yml` : volume Docker monté `../data:/src/data` (relatif à `docker/`)
-|--------|------|--------|
+- Persisté entre les rebuilds — **jamais écrasé par les commits ni par le déploiement**
-| **librodrome** | **3000** | `nuxt.config.ts` → `devServer.port: 3000` |
+- Structure message : `{ id, author, email, text, type, published, createdAt, reply: { text, publishedAt } | null }`
-| **GrateWizard** | **3001** | `package.json` → `next dev --port 3001` |
+- Types : `reaction` (ancien, affiché "Réaction", plus proposé dans les formulaires) | `question` | `suggestion` | `retour`
-| **SejeteralO frontend** | **3009** | `frontend/nuxt.config.ts` → `devServer.port: 3009` |
+- En dev local : `<racine>/data/messages.yml`
-| **SejeteralO backend** | **8000** | Makefile → `uvicorn --port 8000` |
+- **Avant toute migration de chemin ou écriture sur data/ : demander confirmation**
-
-**Ne jamais changer ces ports.**
 
 ## Intégration GrateWizard
 
 - URL dev : `app/app.config.ts` → `localhost:3001`
 - URL prod : `https://gratewizard.axiom-team.fr`
-- Bloc GrateWizard dans la section économique de la home
 
 ## Contenu administrable
 
-- YAML dans `site/pages/` organisé par section (sous-dossiers)
+- YAML dans `site/pages/` par section ; API supporte les chemins imbriqués
-- API supporte les chemins imbriqués (`numerique/logiciel-libre`)
+- Admin : `/admin/pages` liste, `/admin/pages/{path}` édite en YAML
-- Admin : `/admin/pages` liste toutes les pages, `/admin/pages/{path}` édite en YAML
+- Git sync auto en prod (`ADMIN_GIT_SYNC=true`) → d'où le `git pull --rebase` obligatoire en début de session
-- Git sync auto en prod (ADMIN_GIT_SYNC=true)
 
 ## Commandes
 
 ```bash
-pnpm dev          # Dev server sur :3000
+pnpm dev                                 # Dev server :3000
-pnpm build        # Build production
+pnpm build                               # Build production
+PORT=3099 node .output/server/index.mjs  # Test build prod (toujours avant commit)
 ```
 
 ## Conventions
 
-- Langue du site : français
+- CSS via UnoCSS + variables CSS palettes ; composants Vue SFC `<script setup lang="ts">`
-- Commits en français, style concis
+- Shadoks SVG inline thématiques sur chaque page (hidden mobile, opacity 0.18–0.28)
-- CSS via UnoCSS (utility-first) + variables CSS palettes
+- Hexagramme 益 (#42 Yi, Augmentation) dans `layouts/default.vue`
-- Composants Vue SFC avec `<script setup lang="ts">`
+- Signature § (logo calligraphique SVG gradient) dans `TheHeader.vue` — ne pas modifier sans demander
-- Shadoks SVG inline thématiques sur chaque page (hidden mobile)

app/components/home/BookSection.vue

@@ -1,11 +1,11 @@
 <template>
-  <section class="section-padding">
+  <section :class="compact ? 'section-book-compact' : 'section-padding'">
     <div class="container-content">
-      <div class="grid items-center gap-12 md:grid-cols-2">
+      <div :class="['grid items-center', compact ? 'gap-5 md:grid-cols-[auto_1fr]' : 'gap-12 md:grid-cols-2']">
         <!-- Book cover -->
         <UiScrollReveal>
           <div class="book-cover-wrapper relative">
-            <div class="book-cover-3d">
+            <div :class="['book-cover-3d', compact && 'book-cover-3d--compact']">
               <img
                 :src="content?.book.coverImage"
                 :alt="content?.book.coverAlt"
@@ -18,14 +18,21 @@
         <!-- Content + CTAs -->
         <div>
           <UiScrollReveal>
-            <p class="mb-2 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.book.kicker }}</p>
+            <p :class="['font-mono tracking-widest text-accent uppercase', compact ? 'text-xs mb-1' : 'text-sm mb-2']">
-            <h2 class="heading-section font-display font-bold tracking-tight text-white">
+              {{ content?.book.kicker }}
-              {{ content?.book.title }}
+            </p>
+            <h2 :class="['book-heading font-display font-bold tracking-tight text-white', compact && 'book-heading--compact']">
+              <template v-if="compact">
+                <span class="block">{{ titleLine1 }}</span>
+                <span class="block" style="color: hsl(var(--color-text) / 0.55)">{{ titleLine2 }}</span>
+              </template>
+              <template v-else>{{ content?.book.title }}</template>
             </h2>
           </UiScrollReveal>
 
           <UiScrollReveal :delay="100">
-            <p class="mt-4 text-lg leading-relaxed text-white/60">
+            <p :class="['leading-relaxed', compact ? 'mt-2 text-sm' : 'mt-4 text-lg text-white/60']"
+               :style="compact ? 'color: hsl(var(--color-text-muted)); font-size: 0.85rem' : ''">
               {{ content?.book.description }}
             </p>
           </UiScrollReveal>
@@ -46,8 +53,10 @@
 <script setup lang="ts">
 withDefaults(defineProps<{
   showChapters?: boolean
+  compact?: boolean
 }>(), {
   showChapters: true,
+  compact: false,
 })
 
 defineEmits<{
@@ -56,9 +65,22 @@ defineEmits<{
 }>()
 
 const { data: content } = await usePageContent('home')
+
+const titleParts = computed(() => {
+  const title = content.value?.book.title ?? ''
+  const idx = title.indexOf('—')
+  if (idx === -1) return [title, '']
+  return [title.slice(0, idx).trim(), '— ' + title.slice(idx + 1).trim()]
+})
+const titleLine1 = computed(() => titleParts.value[0])
+const titleLine2 = computed(() => titleParts.value[1])
 </script>
 
 <style scoped>
+.section-book-compact {
+  padding: 0;
+}
+
 .book-cover-wrapper {
   perspective: 800px;
   display: flex;
@@ -78,6 +100,10 @@ const { data: content } = await usePageContent('home')
   max-width: 360px;
 }
 
+.book-cover-3d--compact {
+  max-width: 120px;
+}
+
 .book-cover-3d:hover {
   transform: rotateY(-8deg) rotateX(3deg) scale(1.02);
   box-shadow:
@@ -92,7 +118,12 @@ const { data: content } = await usePageContent('home')
   transform: translateX(-50%);
 }
 
-.heading-section {
+.book-heading {
   font-size: clamp(1.625rem, 4vw, 2.125rem);
 }
+
+.book-heading--compact {
+  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
+  line-height: 1.35;
+}
 </style>

app/pages/economique/index.vue

@@ -387,7 +387,8 @@
 
       <div class="mx-auto max-w-3xl flex flex-col gap-8">
         <!-- Monnaie libre -->
-        <NuxtLink to="/economique/monnaie-libre" class="item-card group">
+        <NuxtLink to="/economique/monnaie-libre" class="item-card g1-card group">
+          <span class="g1-watermark" aria-hidden="true">Ğ1</span>
           <div class="item-header">
             <div class="item-icon">
               <span class="g1-icon">Ğ1</span>
@@ -408,6 +409,7 @@
         <!-- Modèle économique — bloc livre -->
         <div class="book-block">
           <HomeBookSection
+            compact
             @open-player="showBookPlayer = true"
             @open-pdf="showPdfReader = true"
           />
@@ -520,12 +522,48 @@ const showPdfReader = ref(false)
 }
 
 .book-block {
-  padding: 1.5rem;
+  padding: 1.25rem;
   border-radius: 0.75rem;
   border: 1px solid hsl(var(--color-text) / 0.08);
   background: hsl(var(--color-surface));
 }
 
+/* Monnaie libre card */
+.g1-card {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(
+    135deg,
+    hsl(var(--color-surface)) 60%,
+    hsl(var(--color-primary) / 0.06) 100%
+  );
+  border-color: hsl(var(--color-primary) / 0.14);
+}
+
+.g1-card:hover {
+  border-color: hsl(var(--color-primary) / 0.3);
+}
+
+.g1-watermark {
+  position: absolute;
+  right: -0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-family: var(--font-display);
+  font-weight: 900;
+  font-size: 5.5rem;
+  line-height: 1;
+  color: hsl(var(--color-primary) / 0.07);
+  pointer-events: none;
+  user-select: none;
+  letter-spacing: -0.02em;
+  transition: color 0.2s;
+}
+
+.g1-card:hover .g1-watermark {
+  color: hsl(var(--color-primary) / 0.11);
+}
+
 /* Shadok illustrations */
 .shadok {
   position: absolute;

app/pages/economique/monnaie-libre.vue

@@ -1,33 +1,79 @@
 <template>
   <div class="section-padding">
     <div class="container-content">
-      <div class="mx-auto max-w-2xl">
+
+      <!-- Header -->
+      <div class="mx-auto max-w-2xl text-center mb-8">
         <div class="section-icon mx-auto mb-6">
           <span v-if="content?.icon === 'g1'" class="g1-icon">Ğ1</span>
           <div v-else :class="`i-lucide-${content?.icon ?? 'coins'}`" class="h-12 w-12" />
         </div>
-
+        <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">
-        <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase text-center">
           {{ content?.kicker }}
         </p>
-
+        <h1 class="font-display text-3xl font-bold mb-4" style="color: hsl(var(--color-text))">
-        <h1 class="font-display text-3xl font-bold mb-4 text-center" style="color: hsl(var(--color-text))">
           {{ content?.title }}
         </h1>
-
+        <p class="text-lg leading-relaxed" style="color: hsl(var(--color-text-muted))">
-        <p class="text-lg leading-relaxed mb-8 text-center" style="color: hsl(var(--color-text-muted))">
           {{ content?.description }}
         </p>
+      </div>
+
+      <!-- Navigation prev / index / next -->
+      <nav class="ctx-nav mx-auto max-w-2xl mb-10">
+        <NuxtLink v-if="prevItem?.to" :to="prevItem.to" class="ctx-nav-btn ctx-nav-prev">
+          <div class="i-lucide-arrow-left h-4 w-4 shrink-0" />
+          <span>{{ prevItem.label }}</span>
+        </NuxtLink>
+        <div v-else class="ctx-nav-spacer" />
+
+        <NuxtLink to="/economique" class="ctx-nav-btn ctx-nav-index">
+          <div class="i-lucide-layout-grid h-4 w-4" />
+          <span>Économique</span>
+        </NuxtLink>
+
+        <NuxtLink v-if="nextItem?.to" :to="nextItem.to" class="ctx-nav-btn ctx-nav-next">
+          <span>{{ nextItem.label }}</span>
+          <div class="i-lucide-arrow-right h-4 w-4 shrink-0" />
+        </NuxtLink>
+        <div v-else class="ctx-nav-spacer" />
+      </nav>
+
+      <!-- Zone sections — relative pour ancrer le sidebar -->
+      <div class="sections-area">
+
+        <!-- Sidebar sommaire -->
+        <aside v-if="sommaire.length > 1" class="page-sidebar">
+          <nav class="sommaire-sidebar">
+            <p class="sommaire-sidebar-title">Sur cette page</p>
+            <ol class="sommaire-sidebar-list">
+              <li v-for="(entry, ei) in sommaire" :key="ei">
+                <a :href="`#${entry.id}`" class="sommaire-sidebar-link">
+                  <span class="sommaire-n">{{ ei + 1 }}</span>
+                  <span>{{ entry.title }}</span>
+                </a>
+              </li>
+            </ol>
+          </nav>
+        </aside>
 
         <!-- Content -->
-        <div v-if="content?.content" class="prose-block mb-8">
+        <div
+          v-if="content?.content"
+          id="section-content"
+          class="prose-block mb-8 max-w-2xl mx-auto section-anchor"
+        >
           <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
             {{ content.content }}
           </p>
         </div>
 
         <!-- External links -->
-        <div v-if="content?.links" class="flex flex-col gap-3 mb-10">
+        <div
+          v-if="content?.links"
+          id="section-links"
+          class="flex flex-col gap-3 mb-10 max-w-2xl mx-auto section-anchor"
+        >
           <a
             v-for="link in content.links"
             :key="link.href"
@@ -44,23 +90,37 @@
           </a>
         </div>
 
-        <div class="text-center">
+      </div><!-- /sections-area -->
-          <UiBaseButton variant="ghost" to="/economique">
+
-            <div class="i-lucide-arrow-left mr-2 h-4 w-4" />
-            Autonomie économique
-          </UiBaseButton>
-        </div>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-const { data: content } = await usePageContent('economique/monnaie-libre')
+const [{ data: content }, { data: homeData }] = await Promise.all([
+  usePageContent('economique/monnaie-libre'),
+  usePageContent('home'),
+])
 
-useHead({
+// Sommaire
-  title: content.value?.meta?.title ?? 'Monnaie libre',
+const sommaire = computed(() => {
+  const entries: { title: string; id: string }[] = []
+  if (content.value?.content) entries.push({ title: 'La théorie', id: 'section-content' })
+  if ((content.value?.links as unknown[])?.length) entries.push({ title: 'Ressources', id: 'section-links' })
+  return entries
 })
+
+// Prev / next dans la section économique
+interface AxisItem { label: string; to?: string; icon?: string }
+const economieItems = computed<AxisItem[]>(
+  () => (homeData.value as Record<string, unknown> | null)?.axes?.economie?.items as AxisItem[] ?? [],
+)
+const currentPath = '/economique/monnaie-libre'
+const currentIdx = computed(() => economieItems.value.findIndex(i => i.to === currentPath))
+const prevItem = computed(() => currentIdx.value > 0 ? economieItems.value[currentIdx.value - 1] : null)
+const nextItem = computed(() => currentIdx.value < economieItems.value.length - 1 ? economieItems.value[currentIdx.value + 1] : null)
+
+useHead({ title: content.value?.meta?.title ?? 'Monnaie libre' })
 </script>
 
 <style scoped>
@@ -116,4 +176,149 @@ useHead({
   color: hsl(var(--color-primary));
   flex-shrink: 0;
 }
+
+.section-anchor {
+  scroll-margin-top: 5.5rem;
+}
+
+/* ── Navigation prev/next ── */
+.ctx-nav {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.ctx-nav-spacer { min-width: 0; }
+
+.ctx-nav-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.5rem 0.875rem;
+  border-radius: 20px;
+  text-decoration: none;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: hsl(var(--color-text-muted));
+  background: hsl(var(--color-surface));
+  border: 1px solid hsl(var(--color-text) / 0.08);
+  transition: all 0.15s;
+  min-width: 0;
+}
+
+.ctx-nav-btn:hover {
+  color: hsl(var(--color-primary));
+  border-color: hsl(var(--color-primary) / 0.25);
+  background: hsl(var(--color-primary) / 0.05);
+}
+
+.ctx-nav-prev { justify-content: flex-start; }
+.ctx-nav-next { justify-content: flex-end; }
+
+.ctx-nav-prev span,
+.ctx-nav-next span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctx-nav-index {
+  justify-content: center;
+  background: hsl(var(--color-primary) / 0.08);
+  border-color: hsl(var(--color-primary) / 0.15);
+  color: hsl(var(--color-primary));
+  font-size: 0.75rem;
+  padding: 0.45rem 0.75rem;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.ctx-nav-index:hover { background: hsl(var(--color-primary) / 0.15); }
+
+@media (max-width: 480px) {
+  .ctx-nav { grid-template-columns: auto 1fr auto; }
+  .ctx-nav-prev span, .ctx-nav-next span { display: none; }
+  .ctx-nav-prev, .ctx-nav-next { padding: 0.5rem; }
+}
+
+/* ── Zone sections ── */
+.sections-area {
+  position: relative;
+}
+
+/* ── Sidebar sommaire ── */
+.page-sidebar {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10.5rem;
+  height: 100%;
+}
+
+@media (min-width: 1300px) {
+  .page-sidebar { display: block; }
+}
+
+.sommaire-sidebar {
+  position: sticky;
+  top: 5.5rem;
+  padding: 0.875rem;
+  border-radius: 14px;
+  background: hsl(var(--color-surface));
+  border: 1px solid hsl(var(--color-text) / 0.07);
+}
+
+.sommaire-sidebar-title {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: hsl(var(--color-text-muted));
+  margin: 0 0 0.6rem;
+}
+
+.sommaire-sidebar-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.sommaire-sidebar-link {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  padding: 0.28rem 0.4rem;
+  border-radius: 8px;
+  text-decoration: none;
+  font-size: 0.75rem;
+  color: hsl(var(--color-text-muted));
+  line-height: 1.4;
+  transition: color 0.12s, background 0.12s;
+}
+
+.sommaire-sidebar-link:hover {
+  color: hsl(var(--color-primary));
+  background: hsl(var(--color-primary) / 0.06);
+}
+
+.sommaire-n {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.2rem;
+  height: 1.2rem;
+  border-radius: 50%;
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary));
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
 </style>

app/pages/evenement.vue

@@ -330,15 +330,106 @@
     </svg>
 
     <div class="container-content relative z-10 text-center">
+      <!-- Logo SVG vectoriel — inline pour currentColor -->
+      <div class="evt-logo-wrap mx-auto mb-6" aria-hidden="true">
+        <svg viewBox="0 0 64 80" fill="none" class="evt-logo">
+          <path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
+                stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" opacity="0.12"/>
+          <path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
+                stroke="currentColor" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" opacity="0.38"/>
+          <path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
+                stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.92"/>
+        </svg>
+      </div>
+
       <p class="mb-3 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
       <h1 class="page-title font-display font-extrabold tracking-tight" style="color: hsl(var(--color-text))">
         {{ content?.title }}
       </h1>
-      <p class="mt-4 text-lg" style="color: hsl(var(--color-text-muted))">
+      <p v-if="evtContent?.subtitle" class="mt-2 text-base italic" style="color: hsl(var(--color-text-muted))">
+        {{ evtContent.subtitle }}
+      </p>
+      <p class="mt-4 text-lg leading-relaxed max-w-xl mx-auto" style="color: hsl(var(--color-text-muted))">
         {{ content?.description }}
       </p>
+
+      <!-- Leitmotiv -->
+      <div v-if="evtContent?.leitmotiv" class="mt-8 flex flex-col items-center gap-3">
+        <p class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
+          « {{ evtContent.leitmotiv }} »
+        </p>
+        <p v-if="evtContent?.tagline" class="font-mono text-sm tracking-widest uppercase" style="color: hsl(var(--color-primary))">
+          {{ evtContent.tagline }}
+        </p>
+        <span v-if="evtContent?.gestation" class="evt-gestation-badge">
+          <div class="i-lucide-flask-conical h-3.5 w-3.5" />
+          En gestation
+        </span>
+      </div>
     </div>
   </div>
+
+  <!-- ══ Contenu événement ══ -->
+  <section v-if="evtContent?.axes || evtContent?.espaces || evtContent?.config" class="evt-content section-padding">
+    <div class="container-content flex flex-col gap-14">
+
+      <!-- 3 axes -->
+      <div v-if="evtContent?.axes">
+        <h2 class="evt-section-title">Trois axes d'émancipation</h2>
+        <p class="evt-section-sub">« je subis — ou je m'affranchis »</p>
+        <div class="axes-grid">
+          <div v-for="(axe, i) in evtContent.axes" :key="i" class="axe-card">
+            <div class="axe-icon">
+              <div :class="`i-lucide-${axe.icon} h-5 w-5`" />
+            </div>
+            <h3 class="font-display text-lg font-bold mb-3" style="color: hsl(var(--color-text))">
+              {{ axe.label }}
+            </h3>
+            <ul class="axe-list">
+              <li v-for="(item, j) in axe.items" :key="j">
+                <div class="i-lucide-arrow-right h-3.5 w-3.5 shrink-0 mt-0.5" style="color: hsl(var(--color-primary))" />
+                <span>{{ item }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!-- Espaces permanents -->
+      <div v-if="evtContent?.espaces">
+        <h2 class="evt-section-title">Espaces & programme</h2>
+        <p class="evt-section-sub">Chorégraphie séquencée de plénières, ateliers et espaces permanents</p>
+        <div class="espaces-grid">
+          <div v-for="(esp, i) in evtContent.espaces" :key="i" class="espace-card">
+            <div class="espace-icon">
+              <div :class="`i-lucide-${esp.icon} h-4 w-4`" />
+            </div>
+            <div>
+              <p class="font-semibold text-sm" style="color: hsl(var(--color-text))">{{ esp.label }}</p>
+              <p class="text-xs mt-0.5 leading-relaxed" style="color: hsl(var(--color-text-muted))">{{ esp.desc }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Config -->
+      <div v-if="evtContent?.config">
+        <h2 class="evt-section-title">Format & lieu</h2>
+        <div class="config-grid">
+          <div v-for="(cfg, i) in evtContent.config" :key="i" class="config-card">
+            <div class="config-icon">
+              <div :class="`i-lucide-${cfg.icon} h-4 w-4`" />
+            </div>
+            <div>
+              <p class="font-semibold text-sm" style="color: hsl(var(--color-text))">{{ cfg.label }}</p>
+              <p class="text-xs mt-0.5" style="color: hsl(var(--color-text-muted))">{{ cfg.detail }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
 </template>
 
 <script setup lang="ts">
@@ -347,9 +438,10 @@ definePageMeta({
 })
 
 const { data: content } = await usePageContent('evenement')
+const evtContent = computed(() => content.value as Record<string, any> | null)
 
 useHead({
-  title: content.value?.meta?.title ?? 'Évènement',
+  title: evtContent.value?.meta?.title ?? 'Évènement',
 })
 </script>
 
@@ -555,4 +647,187 @@ useHead({
     display: none;
   }
 }
+
+/* ── Logo SVG ── */
+.evt-logo-wrap {
+  width: 4.5rem;
+  height: 4.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--color-primary));
+  filter: drop-shadow(0 0 14px hsl(var(--color-primary) / 0.25));
+}
+
+.evt-logo {
+  width: 100%;
+  height: 100%;
+}
+
+/* ── Badge gestation hero ── */
+.evt-gestation-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  background: hsl(var(--color-accent) / 0.12);
+  border: 1px solid hsl(var(--color-accent) / 0.25);
+  color: hsl(var(--color-accent));
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  letter-spacing: 0.04em;
+}
+
+/* ── Section contenus événement ── */
+.evt-content {
+  background: hsl(var(--color-bg));
+}
+
+.evt-section-title {
+  font-family: var(--font-display);
+  font-size: clamp(1.25rem, 3vw, 1.75rem);
+  font-weight: 800;
+  color: hsl(var(--color-text));
+  margin-bottom: 0.25rem;
+}
+
+.evt-section-sub {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: hsl(var(--color-primary));
+  margin-bottom: 1.5rem;
+}
+
+/* ── Axes ── */
+.axes-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .axes-grid { grid-template-columns: repeat(3, 1fr); }
+}
+
+.axe-card {
+  padding: 1.5rem;
+  border-radius: 16px;
+  background: hsl(var(--color-surface));
+  border: 1px solid hsl(var(--color-text) / 0.07);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.axe-card:hover {
+  border-color: hsl(var(--color-primary) / 0.25);
+  box-shadow: 0 4px 24px hsl(var(--color-primary) / 0.06);
+}
+
+.axe-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.625rem;
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary));
+  margin-bottom: 1rem;
+}
+
+.axe-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.axe-list li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  font-size: 0.82rem;
+  line-height: 1.5;
+  color: hsl(var(--color-text-muted));
+}
+
+/* ── Espaces ── */
+.espaces-grid {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .espaces-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (min-width: 1024px) {
+  .espaces-grid { grid-template-columns: repeat(3, 1fr); }
+}
+
+.espace-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  padding: 1rem 1.25rem;
+  border-radius: 12px;
+  background: hsl(var(--color-surface));
+  border: 1px solid hsl(var(--color-text) / 0.06);
+  transition: border-color 0.15s;
+}
+
+.espace-card:hover {
+  border-color: hsl(var(--color-accent) / 0.25);
+}
+
+.espace-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--color-accent) / 0.1);
+  color: hsl(var(--color-accent));
+  flex-shrink: 0;
+}
+
+/* ── Config ── */
+.config-grid {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+@media (min-width: 640px) {
+  .config-grid { grid-template-columns: repeat(4, 1fr); }
+}
+
+.config-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: 12px;
+  background: hsl(var(--color-surface));
+  border: 1px solid hsl(var(--color-text) / 0.06);
+}
+
+.config-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary));
+  flex-shrink: 0;
+}
 </style>

docker/docker-compose.yml

@@ -14,7 +14,7 @@ services:
     ports:
       - 3000
     volumes:
-      - ./data:/src/data
+      - ../data:/src/data
       - ./public:/src/public
     restart: always
     labels:

public/images/librodrome-logo.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 80" fill="none" role="img" aria-label="Librodrome">
+  <!--
+    Logotype calligraphique Librodrome — § (section sign) brush-stroke.
+    Vectorisé depuis le PNG source (analyse pixel, 200×200 px).
+    Tracé S calligraphique : crochet haut-droit → arc gauche → arc droit → fin centre.
+    3 couches opacité : effet pinceau naturaliste.
+    currentColor → s'adapte automatiquement aux 4 palettes.
+  -->
+
+  <!-- Halo — diffusion pinceau -->
+  <path
+    d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
+    stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" opacity="0.12"
+  />
+  <!-- Corps — épaisseur principale -->
+  <path
+    d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
+    stroke="currentColor" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" opacity="0.38"
+  />
+  <!-- Trait vif — ligne calligraphique -->
+  <path
+    d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
+    stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.92"
+  />
+</svg>

site/pages/evenement.yml

@@ -1,5 +1,69 @@
-kicker: Bientôt
-title: En gestation
-description: Cette rubrique est en cours de préparation.
 meta:
-  title: Évènement
+  title: Le Librodrome — L'événement
+
+kicker: Performance d'émancipation civile
+title: Le Librodrome
+subtitle: "Une paece — performance artistique d'émancipation civile et économique"
+leitmotiv: Construire une autonomie collective.
+tagline: Rendre possible. Passer la seconde.
+gestation: true
+
+description: >
+  Synergies entre collectifs, associations et coopératives — autour de trois axes :
+  numérique, économique, politique. « Je subis ou je m'affranchis. »
+
+axes:
+  - icon: cpu
+    label: Numérique
+    items:
+      - Affranchissement GAFAM — logiciels libres, Linux, migration
+      - Cloud local décentralisé — Nextcloud, IPFS, Matrix, PeerTube
+      - IA collective locale — Mistral, UPlanet
+
+  - icon: coins
+    label: Économique
+    items:
+      - Monnaie libre (June Ğ1) vs monnaie-dette
+      - Économie du don — amorcer les filières, couvrir besoins et plaisirs
+      - Productions versatiles — énergie, alimentaire, agricole
+
+  - icon: landmark
+    label: Politique
+    items:
+      - Autonomie d'un bassin de vie — accessible et reproductible
+      - "Pragmatique : on parle chiffres, terrain, zéro étiquette"
+      - Feuilles de route et graphe des synergies
+
+espaces:
+  - icon: cpu
+    label: Salle des machines
+    desc: Install Linux, on-boarding June Ğ1 et cryptos, FabLab ouvert, visios
+  - icon: shopping-bag
+    label: "Ğ(marché)"
+    desc: Expérience laboratoire in vivo — liberté de choisir sa monnaie, construction collective d'échelles de valeurs relatives
+  - icon: users
+    label: Ateliers & feuilles de route
+    desc: Animateurs initiés, préparés en amont — cartographies, synergies, restitutions collectives
+  - icon: music-2
+    label: Scène musicale & théâtrale
+    desc: Performances, concerts, lectures — chill out en préau
+  - icon: utensils
+    label: Buvette & restauration
+    desc: Lié au Ğ(marché) — expérience de l'économie du don en direct
+  - icon: gamepad-2
+    label: Géconomicus
+    desc: "Jeu économique — 3 parties dont 1 sans monnaie, 15 joueurs, 3 animateurs, spectateurs"
+
+config:
+  - icon: calendar
+    label: Ven → Sam → Dim
+    detail: "5 jours, 4 nuits (+ jeudi install & répétitions + lundi after)"
+  - icon: users
+    label: 100 à 200 personnes
+    detail: Public 2 jours — junistes 3 jours
+  - icon: map-pin
+    label: Lieu privé — Drôme
+    detail: Événement sur invitation, lieu en cours de négociation
+  - icon: wifi
+    label: Fibre + LAN wifi
+    detail: Salle des machines, salle de conf, salles de production, campement 40-60 tentes