From 97ba6dd04c556a9cb4bd0460f81e90fb1204d2df Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Tue, 3 Mar 2026 03:49:07 +0100
Subject: [PATCH] =?UTF-8?q?Redesign=20accueil=20:=20grille=203=20axes,=20h?=
 =?UTF-8?q?ero=20fade/swipe,=20pages=20gestation=20et=20d=C3=A9cision?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero : animation fade-in/fade-out + swipe (useTypewriter composable + TypewriterText)
- 3 axes : Autonomie numérique, économique, citoyenne (AxisBlock + AxisGrid)
- Pages gestation avec présentations (wishBounty, trustWallet, Cloud libre)
- Page /decision : plateforme Décision collective (lien Glibredecision)
- Bloc événement distinct en bas des axes
- Nav : Numérique / Économique / Citoyenne / Événement
- Dark theme éclairci (bg 7→10%, surface 12→14%)
- Suppression BookSection + GrateWizardTeaser (remplacés par AxisGrid)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/app.config.ts                         |  12 +-
 app/assets/css/main.css                   |   6 +-
 app/components/home/AxisBlock.vue         | 231 ++++++++++++++++++++++
 app/components/home/AxisGrid.vue          | 145 ++++++++++++++
 app/components/home/BookSection.vue       | 135 -------------
 app/components/home/GrateWizardTeaser.vue | 110 -----------
 app/components/home/HeroSection.vue       |  64 +++---
 app/components/home/HomeMessages.vue      |  10 +-
 app/components/home/TypewriterText.vue    | 195 ++++++++++++++++++
 app/composables/useTypewriter.ts          | 108 ++++++++++
 app/pages/decision.vue                    | 104 ++++++++++
 app/pages/gestation/[slug].vue            |  94 +++++++++
 app/pages/index.vue                       |   4 +-
 site/pages/home.yml                       | 169 ++++++++++------
 14 files changed, 1028 insertions(+), 359 deletions(-)
 create mode 100644 app/components/home/AxisBlock.vue
 create mode 100644 app/components/home/AxisGrid.vue
 delete mode 100644 app/components/home/BookSection.vue
 delete mode 100644 app/components/home/GrateWizardTeaser.vue
 create mode 100644 app/components/home/TypewriterText.vue
 create mode 100644 app/composables/useTypewriter.ts
 create mode 100644 app/pages/decision.vue
 create mode 100644 app/pages/gestation/[slug].vue

diff --git a/app/app.config.ts b/app/app.config.ts
index d6b85d3..287443a 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -7,11 +7,10 @@ export default defineAppConfig({
   header: {
     height: '4rem',
     nav: [
-      { label: 'Autonomie', to: '/autonomie' },
-      { label: 'Modèle éco', to: '/modele-eco' },
-      { label: 'En musique', to: '/en-musique' },
-      { label: 'Évènement', to: '/evenement' },
-      { label: 'À propos', to: '/a-propos' },
+      { label: 'Numérique', to: '/#numerique' },
+      { label: 'Économique', to: '/#economique' },
+      { label: 'Citoyenne', to: '/#citoyenne' },
+      { label: 'Événement', to: '/evenement' },
     ],
   },
   footer: {
@@ -27,4 +26,7 @@ export default defineAppConfig({
       height: 720,
     },
   },
+  libredecision: {
+    url: import.meta.dev ? 'http://localhost:3002' : 'https://decision.laplank.org',
+  },
 })
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index a120d51..595b7f9 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -5,9 +5,9 @@
 :root {
   --color-primary: 18 80% 45%;
   --color-accent: 32 85% 50%;
-  --color-bg: 20 10% 7%;
-  --color-surface: 20 10% 12%;
-  --color-surface-light: 20 8% 17%;
+  --color-bg: 20 10% 10%;
+  --color-surface: 20 10% 14%;
+  --color-surface-light: 20 8% 20%;
   --color-text: 0 0% 100%;
   --color-text-muted: 0 0% 65%;
 
diff --git a/app/components/home/AxisBlock.vue b/app/components/home/AxisBlock.vue
new file mode 100644
index 0000000..b3deee7
--- /dev/null
+++ b/app/components/home/AxisBlock.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="axis-block">
+    <!-- Header -->
+    <div class="flex items-center gap-3 mb-6">
+      <div class="axis-icon" :class="`axis-icon--${color}`">
+        <div :class="`i-lucide-${icon} h-6 w-6`" />
+      </div>
+      <h2 class="font-display text-2xl font-bold text-white">{{ title }}</h2>
+    </div>
+
+    <!-- Items grid -->
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        class="axis-item card-surface"
+        :class="{ 'axis-item--gestation': item.gestation }"
+      >
+        <!-- Item icon -->
+        <div v-if="item.icon" class="axis-item-icon mb-3" :class="`axis-item-icon--${color}`">
+          <div :class="`i-lucide-${item.icon} h-5 w-5`" />
+        </div>
+
+        <h3 class="font-display text-lg font-semibold text-white mb-2">
+          {{ item.label }}
+          <span v-if="item.gestation" class="gestation-badge">
+            <div class="i-lucide-flask-conical h-3 w-3" />
+            En gestation
+          </span>
+        </h3>
+
+        <p class="text-sm text-white/60 leading-relaxed mb-4">{{ item.description }}</p>
+
+        <!-- Actions or link -->
+        <div class="mt-auto">
+          <!-- Multiple actions (e.g., Économie du don) -->
+          <div v-if="item.actions?.length" class="flex flex-wrap gap-2">
+            <button
+              v-for="action in item.actions"
+              :key="action.id"
+              class="axis-action-btn"
+              @click="handleAction(action.id)"
+            >
+              <div :class="`i-lucide-${action.icon} h-3.5 w-3.5`" />
+              {{ action.label }}
+            </button>
+          </div>
+
+          <!-- External link -->
+          <a
+            v-else-if="item.href"
+            :href="item.href"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="axis-link"
+          >
+            Découvrir
+            <div class="i-lucide-external-link h-3.5 w-3.5" />
+          </a>
+
+          <!-- Internal link -->
+          <NuxtLink
+            v-else-if="item.to"
+            :to="item.to"
+            class="axis-link"
+          >
+            {{ item.gestation ? 'En savoir plus' : 'Découvrir' }}
+            <div class="i-lucide-arrow-right h-3.5 w-3.5" />
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface AxisAction {
+  id: string
+  label: string
+  icon: string
+}
+
+interface AxisItem {
+  label: string
+  description: string
+  to?: string
+  href?: string
+  gestation?: boolean
+  icon?: string
+  actions?: AxisAction[]
+}
+
+defineProps<{
+  title: string
+  icon: string
+  color?: 'primary' | 'accent'
+  items: AxisItem[]
+}>()
+
+const emit = defineEmits<{
+  'open-player': []
+  'open-pdf': []
+  'launch-gratewizard': []
+}>()
+
+function handleAction(id: string) {
+  if (id === 'open-player') emit('open-player')
+  else if (id === 'open-pdf') emit('open-pdf')
+  else if (id === 'launch-gratewizard') emit('launch-gratewizard')
+}
+</script>
+
+<style scoped>
+.axis-block {
+  padding: 0;
+}
+
+.axis-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.75rem;
+  flex-shrink: 0;
+}
+
+.axis-icon--primary {
+  background: hsl(var(--color-primary) / 0.12);
+  border: 1px solid hsl(var(--color-primary) / 0.2);
+  color: hsl(var(--color-primary));
+}
+
+.axis-icon--accent {
+  background: hsl(var(--color-accent) / 0.12);
+  border: 1px solid hsl(var(--color-accent) / 0.2);
+  color: hsl(var(--color-accent));
+}
+
+.axis-item {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem;
+  border-radius: 0.75rem;
+  border: 1px solid hsl(var(--color-text) / 0.08);
+  background: hsl(var(--color-surface));
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.axis-item:hover {
+  border-color: hsl(var(--color-text) / 0.15);
+  box-shadow: 0 4px 20px hsl(var(--color-text) / 0.05);
+}
+
+.axis-item--gestation {
+  opacity: 0.7;
+}
+
+.axis-item--gestation:hover {
+  opacity: 0.85;
+}
+
+.axis-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5rem;
+}
+
+.axis-item-icon--primary {
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary));
+}
+
+.axis-item-icon--accent {
+  background: hsl(var(--color-accent) / 0.1);
+  color: hsl(var(--color-accent));
+}
+
+.gestation-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-left: 0.5rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background: hsl(var(--color-accent) / 0.12);
+  color: hsl(var(--color-accent));
+  font-size: 0.7rem;
+  font-weight: 500;
+  font-family: var(--font-mono);
+  vertical-align: middle;
+}
+
+.axis-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: hsl(var(--color-text) / 0.7);
+  background: hsl(var(--color-text) / 0.05);
+  border: 1px solid hsl(var(--color-text) / 0.1);
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.axis-action-btn:hover {
+  color: hsl(var(--color-text));
+  background: hsl(var(--color-primary) / 0.12);
+  border-color: hsl(var(--color-primary) / 0.3);
+}
+
+.axis-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: hsl(var(--color-primary) / 0.8);
+  transition: color 0.2s;
+}
+
+.axis-link:hover {
+  color: hsl(var(--color-primary));
+}
+</style>
diff --git a/app/components/home/AxisGrid.vue b/app/components/home/AxisGrid.vue
new file mode 100644
index 0000000..a33322b
--- /dev/null
+++ b/app/components/home/AxisGrid.vue
@@ -0,0 +1,145 @@
+<template>
+  <section class="section-padding">
+    <div class="container-content flex flex-col gap-16">
+      <UiScrollReveal>
+        <div id="numerique">
+          <HomeAxisBlock
+            v-if="axes?.numerique"
+            :title="axes.numerique.title"
+            :icon="axes.numerique.icon"
+            color="primary"
+            :items="axes.numerique.items"
+          />
+        </div>
+      </UiScrollReveal>
+
+      <UiScrollReveal :delay="100">
+        <div id="economique">
+          <HomeAxisBlock
+            v-if="axes?.economie"
+            :title="axes.economie.title"
+            :icon="axes.economie.icon"
+            color="accent"
+            :items="axes.economie.items"
+            @open-player="$emit('open-player')"
+            @open-pdf="$emit('open-pdf')"
+            @launch-gratewizard="launchGW"
+          />
+        </div>
+      </UiScrollReveal>
+
+      <UiScrollReveal :delay="200">
+        <div id="citoyenne">
+          <HomeAxisBlock
+            v-if="axes?.politique"
+            :title="axes.politique.title"
+            :icon="axes.politique.icon"
+            color="primary"
+            :items="axes.politique.items"
+          />
+        </div>
+      </UiScrollReveal>
+
+      <!-- Bloc Événement -->
+      <UiScrollReveal v-if="evenement" :delay="300">
+        <NuxtLink :to="evenement.to" class="event-block">
+          <div class="event-content">
+            <div class="event-icon">
+              <div class="i-lucide-calendar-heart h-7 w-7" />
+            </div>
+            <div>
+              <h2 class="font-display text-2xl font-bold text-white sm:text-3xl">
+                {{ evenement.title }}
+              </h2>
+              <p class="font-display text-xl text-white/70 sm:text-2xl">
+                {{ evenement.subtitle }}
+              </p>
+            </div>
+          </div>
+          <span v-if="evenement.gestation" class="event-badge">
+            <div class="i-lucide-flask-conical h-3.5 w-3.5" />
+            En gestation
+          </span>
+        </NuxtLink>
+      </UiScrollReveal>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+defineEmits<{
+  'open-player': []
+  'open-pdf': []
+}>()
+
+const { data: content } = await usePageContent('home')
+const { launch } = useGrateWizard()
+
+const axes = computed(() => (content.value as any)?.axes)
+const evenement = computed(() => (content.value as any)?.evenement)
+
+function launchGW() {
+  launch()
+}
+</script>
+
+<style scoped>
+.event-block {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 2rem 2.5rem;
+  border-radius: 1rem;
+  border: 2px solid hsl(var(--color-accent) / 0.25);
+  background: linear-gradient(135deg, hsl(var(--color-accent) / 0.08), hsl(var(--color-primary) / 0.04));
+  transition: border-color 0.3s, box-shadow 0.3s;
+  text-decoration: none;
+}
+
+.event-block:hover {
+  border-color: hsl(var(--color-accent) / 0.45);
+  box-shadow: 0 0 40px hsl(var(--color-accent) / 0.08);
+}
+
+.event-content {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.event-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 0.75rem;
+  background: hsl(var(--color-accent) / 0.15);
+  color: hsl(var(--color-accent));
+  flex-shrink: 0;
+}
+
+.event-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  background: hsl(var(--color-accent) / 0.12);
+  color: hsl(var(--color-accent));
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family: var(--font-mono);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+@media (max-width: 640px) {
+  .event-block {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 1.5rem;
+  }
+}
+</style>
diff --git a/app/components/home/BookSection.vue b/app/components/home/BookSection.vue
deleted file mode 100644
index 5249837..0000000
--- a/app/components/home/BookSection.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <section class="section-padding">
-    <div class="container-content">
-      <div class="grid items-center gap-12 md:grid-cols-2">
-        <!-- Book cover -->
-        <UiScrollReveal>
-          <div class="book-cover-wrapper relative">
-            <!-- Shadok pumper -->
-            <svg class="shadok-pumper" viewBox="0 0 200 240" fill="none" aria-hidden="true">
-              <ellipse cx="100" cy="130" rx="55" ry="65" fill="currentColor" opacity="0.9"/>
-              <ellipse cx="100" cy="60" rx="30" ry="28" fill="currentColor" opacity="0.85"/>
-              <circle cx="88" cy="54" r="6" fill="currentColor" opacity="0.2"/>
-              <circle cx="112" cy="54" r="6" fill="currentColor" opacity="0.2"/>
-              <circle cx="90" cy="53" r="2.5" fill="currentColor" opacity="0.5"/>
-              <circle cx="114" cy="53" r="2.5" fill="currentColor" opacity="0.5"/>
-              <polygon points="100,68 115,78 85,78" fill="currentColor" opacity="0.6"/>
-              <line x1="80" y1="192" x2="70" y2="230" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.7"/>
-              <line x1="120" y1="192" x2="130" y2="230" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.7"/>
-              <line x1="70" y1="230" x2="55" y2="232" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
-              <line x1="130" y1="230" x2="145" y2="232" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
-              <line x1="155" y1="110" x2="190" y2="90" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.6"/>
-              <line x1="190" y1="90" x2="190" y2="120" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.6"/>
-              <rect x="180" y="118" width="18" height="40" rx="3" fill="currentColor" opacity="0.4"/>
-            </svg>
-            <div class="book-cover-3d">
-              <img
-                :src="content?.book.coverImage"
-                :alt="content?.book.coverAlt"
-                class="book-cover-img"
-              />
-            </div>
-          </div>
-        </UiScrollReveal>
-
-        <!-- Content + CTAs -->
-        <div>
-          <UiScrollReveal>
-            <p class="mb-2 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.book.kicker }}</p>
-            <h2 class="heading-section font-display font-bold tracking-tight text-white">
-              {{ content?.book.title }}
-            </h2>
-          </UiScrollReveal>
-
-          <UiScrollReveal :delay="100">
-            <p class="mt-4 text-lg leading-relaxed text-white/60">
-              {{ content?.book.description }}
-            </p>
-          </UiScrollReveal>
-
-          <UiScrollReveal :delay="200">
-            <div class="mt-8 flex flex-col gap-3 sm:flex-row sm:gap-4">
-              <UiBaseButton @click="$emit('open-player')">
-                <div class="i-lucide-play mr-2 h-5 w-5" />
-                {{ content?.book.cta.player }}
-              </UiBaseButton>
-              <UiBaseButton variant="accent" @click="$emit('open-pdf')">
-                <div class="i-lucide-book-open mr-2 h-5 w-5" />
-                {{ content?.book.cta.pdf }}
-              </UiBaseButton>
-            </div>
-          </UiScrollReveal>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-defineEmits<{
-  'open-player': []
-  'open-pdf': []
-}>()
-
-const { data: content } = await usePageContent('home')
-</script>
-
-<style scoped>
-.book-cover-wrapper {
-  perspective: 800px;
-  display: flex;
-  justify-content: center;
-}
-
-.book-cover-3d {
-  aspect-ratio: 3 / 4;
-  border-radius: 0.75rem;
-  overflow: hidden;
-  border: 1px solid hsl(var(--color-text) / 0.1);
-  box-shadow:
-    0 12px 40px hsl(var(--color-text) / 0.15),
-    0 0 0 1px hsl(var(--color-text) / 0.08);
-  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
-              box-shadow 0.5s ease;
-  max-width: 360px;
-}
-
-.book-cover-3d:hover {
-  transform: rotateY(-8deg) rotateX(3deg) scale(1.02);
-  box-shadow:
-    12px 16px 48px hsl(var(--color-text) / 0.2),
-    0 0 0 1px hsl(var(--color-primary) / 0.2);
-}
-
-.book-cover-img {
-  width: 200%;
-  height: 100%;
-  object-fit: cover;
-  transform: translateX(-50%);
-}
-
-.heading-section {
-  font-size: clamp(1.625rem, 4vw, 2.125rem);
-}
-
-.shadok-pumper {
-  position: absolute;
-  right: 3%;
-  bottom: 8%;
-  width: clamp(90px, 12vw, 180px);
-  opacity: 0.28;
-  pointer-events: none;
-  color: hsl(var(--color-primary));
-  animation: shadok-float 10s ease-in-out infinite;
-  z-index: 1;
-}
-
-@keyframes shadok-float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
-}
-
-@media (max-width: 768px) {
-  .shadok-pumper { display: none; }
-}
-</style>
diff --git a/app/components/home/GrateWizardTeaser.vue b/app/components/home/GrateWizardTeaser.vue
deleted file mode 100644
index 02c16d4..0000000
--- a/app/components/home/GrateWizardTeaser.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <section class="section-padding">
-    <div class="container-content">
-      <UiScrollReveal>
-        <div class="gw-card relative overflow-hidden">
-          <!-- Shadok blob -->
-          <svg class="shadok-blob" viewBox="0 0 200 180" fill="none" aria-hidden="true">
-            <path d="M60 90 Q30 50 70 30 Q110 10 140 40 Q180 60 170 100 Q165 140 130 155 Q90 170 55 145 Q25 125 60 90Z" fill="currentColor" opacity="0.12"/>
-            <path d="M60 90 Q30 50 70 30 Q110 10 140 40 Q180 60 170 100 Q165 140 130 155 Q90 170 55 145 Q25 125 60 90Z" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
-            <circle cx="100" cy="80" r="8" fill="currentColor" opacity="0.08"/>
-            <circle cx="120" cy="110" r="6" fill="currentColor" opacity="0.06"/>
-            <circle cx="80" cy="105" r="5" fill="currentColor" opacity="0.07"/>
-            <circle cx="95" cy="72" r="3" fill="currentColor" opacity="0.3"/>
-            <circle cx="108" cy="70" r="3" fill="currentColor" opacity="0.3"/>
-            <circle cx="96" cy="71" r="1.2" fill="currentColor" opacity="0.5"/>
-            <circle cx="109" cy="69" r="1.2" fill="currentColor" opacity="0.5"/>
-          </svg>
-          <div class="flex flex-col items-center text-center gap-4 md:flex-row md:text-left md:gap-8 relative z-1">
-            <!-- Icon -->
-            <div class="gw-icon-wrapper">
-              <div class="i-lucide-sparkles h-8 w-8 text-amber-400" />
-            </div>
-
-            <!-- Content -->
-            <div class="flex-1">
-              <span class="inline-block mb-2 rounded-full bg-amber-400/15 px-3 py-0.5 font-mono text-xs tracking-widest text-amber-400 uppercase">
-                {{ content?.grateWizardTeaser.kicker }}
-              </span>
-              <h3 class="heading-h3 font-display font-bold text-white">
-                {{ content?.grateWizardTeaser.title }}
-              </h3>
-              <p class="mt-2 text-sm text-white/60 md:text-base leading-relaxed">
-                {{ content?.grateWizardTeaser.description }}
-              </p>
-            </div>
-
-            <!-- CTAs -->
-            <div class="shrink-0 flex flex-col gap-2">
-              <UiBaseButton :href="url" target="_blank" @click="launch">
-                <div class="i-lucide-external-link mr-2 h-4 w-4" />
-                {{ content?.grateWizardTeaser.cta.launch }}
-              </UiBaseButton>
-              <UiBaseButton variant="ghost" :to="content?.grateWizardTeaser.cta.more.to">
-                {{ content?.grateWizardTeaser.cta.more.label }}
-                <div class="i-lucide-arrow-right ml-2 h-4 w-4" />
-              </UiBaseButton>
-            </div>
-          </div>
-        </div>
-      </UiScrollReveal>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-const { url, launch } = useGrateWizard()
-const { data: content } = await usePageContent('home')
-</script>
-
-<style scoped>
-.gw-card {
-  border: 1px solid hsl(40 80% 50% / 0.2);
-  border-radius: 1rem;
-  padding: 1.5rem 2rem;
-  background: linear-gradient(135deg, hsl(40 80% 50% / 0.05), hsl(40 80% 50% / 0.02));
-  box-shadow: 0 0 40px hsl(40 80% 50% / 0.05);
-  transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.gw-card:hover {
-  border-color: hsl(40 80% 50% / 0.35);
-  box-shadow: 0 0 60px hsl(40 80% 50% / 0.1);
-}
-
-.heading-h3 {
-  font-size: clamp(1.25rem, 3vw, 1.625rem);
-}
-
-.gw-icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 3.5rem;
-  height: 3.5rem;
-  border-radius: 0.75rem;
-  background: hsl(40 80% 50% / 0.1);
-  border: 1px solid hsl(40 80% 50% / 0.15);
-  flex-shrink: 0;
-}
-
-.shadok-blob {
-  position: absolute;
-  right: -2%;
-  top: -20%;
-  width: clamp(120px, 16vw, 220px);
-  opacity: 0.35;
-  pointer-events: none;
-  color: hsl(var(--color-accent));
-  animation: shadok-drift 12s ease-in-out infinite;
-}
-
-@keyframes shadok-drift {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-8px) rotate(3deg); }
-}
-
-@media (max-width: 768px) {
-  .shadok-blob { display: none; }
-}
-</style>
diff --git a/app/components/home/HeroSection.vue b/app/components/home/HeroSection.vue
index bd34e3a..3961021 100644
--- a/app/components/home/HeroSection.vue
+++ b/app/components/home/HeroSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="relative overflow-hidden section-padding">
+  <section class="relative overflow-hidden section-padding hero-section">
     <!-- Background gradient -->
     <div class="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-surface-bg" />
     <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,hsl(12_76%_48%/0.15),transparent_70%)]" />
@@ -23,7 +23,7 @@
       <path d="M48 105 Q25 102 12 100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3" fill="none"/>
     </svg>
 
-    <!-- Shadok boulanger: character with oven and bread -->
+    <!-- Shadok boulanger -->
     <svg class="shadok-boulanger" viewBox="0 0 240 300" fill="none" aria-hidden="true">
       <ellipse cx="120" cy="155" rx="40" ry="48" fill="currentColor" opacity="0.85"/>
       <circle cx="120" cy="92" r="25" fill="currentColor" opacity="0.8"/>
@@ -44,53 +44,39 @@
 
     <!-- Content -->
     <div class="container-content relative z-10 px-4">
-      <div class="mx-auto max-w-3xl text-center">
-        <UiScrollReveal>
-          <p class="mb-3 font-mono text-sm tracking-widest text-primary uppercase">
-            {{ content?.hero.kicker }}
-          </p>
-        </UiScrollReveal>
-
-        <UiScrollReveal :delay="100">
-          <h1 class="font-display font-extrabold leading-tight tracking-tight">
-            <span class="hero-title text-gradient">{{ content?.hero.title }}</span>
-          </h1>
-        </UiScrollReveal>
-
-        <UiScrollReveal :delay="200">
-          <p class="mt-6 text-lg leading-relaxed text-white/60 md:text-xl">
-            {{ content?.hero.subtitle }}
-          </p>
-        </UiScrollReveal>
-
-        <UiScrollReveal :delay="300">
-          <p class="mt-4 text-base leading-relaxed text-white/45">
-            {{ content?.hero.footnote }}
-          </p>
-        </UiScrollReveal>
-
-        <UiScrollReveal :delay="400">
-          <div class="mt-8 flex justify-center">
-            <UiBaseButton variant="ghost" :to="content?.hero.cta.to">
-              {{ content?.hero.cta.label }}
-              <div class="i-lucide-arrow-right ml-2 h-4 w-4" />
-            </UiBaseButton>
-          </div>
-        </UiScrollReveal>
-
-        <HomeMessages />
+      <div class="mx-auto max-w-2xl">
+        <HomeTypewriterText
+          v-if="sentences.length"
+          :sentences="sentences"
+        />
       </div>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
+import type { TypewriterSentence } from '~/composables/useTypewriter'
+
 const { data: content } = await usePageContent('home')
+
+const sentences = computed<TypewriterSentence[]>(() => {
+  const raw = (content.value as any)?.hero?.typewriter?.sentences
+  if (!Array.isArray(raw)) return []
+  return raw.map((s: any) => ({
+    text: s.text,
+    style: s.style || 'title',
+    stays: !!s.stays,
+    separator: !!s.separator,
+  }))
+})
 </script>
 
 <style scoped>
-.hero-title {
-  font-size: clamp(2.25rem, 7vw, 4rem);
+.hero-section {
+  min-height: 70vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .shadok-bird {
diff --git a/app/components/home/HomeMessages.vue b/app/components/home/HomeMessages.vue
index 800ab7b..b412509 100644
--- a/app/components/home/HomeMessages.vue
+++ b/app/components/home/HomeMessages.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="mt-16">
+  <section class="section-padding">
+    <div class="container-content mx-auto max-w-3xl">
     <!-- Formulaire -->
-    <UiScrollReveal :delay="500">
+    <UiScrollReveal>
       <div class="message-form-card">
         <h3 class="font-display text-lg font-bold text-white mb-4">Laisser un message</h3>
 
@@ -45,7 +46,7 @@
     </UiScrollReveal>
 
     <!-- 2 derniers messages publiés -->
-    <UiScrollReveal v-if="messages?.length" :delay="600">
+    <UiScrollReveal v-if="messages?.length" :delay="100">
       <div class="mt-8 space-y-4">
         <h3 class="font-display text-lg font-bold text-white/80 text-center">Derniers messages</h3>
         <div v-for="msg in messages.slice(0, 2)" :key="msg.id" class="message-card">
@@ -64,7 +65,8 @@
         </div>
       </div>
     </UiScrollReveal>
-  </div>
+    </div>
+  </section>
 </template>
 
 <script setup lang="ts">
diff --git a/app/components/home/TypewriterText.vue b/app/components/home/TypewriterText.vue
new file mode 100644
index 0000000..bcb2496
--- /dev/null
+++ b/app/components/home/TypewriterText.vue
@@ -0,0 +1,195 @@
+<template>
+  <ClientOnly>
+    <div class="hero-text" @click="handleClick">
+      <!-- Locked sentences (stays: true, already shown) -->
+      <TransitionGroup name="lock">
+        <div v-for="(item, i) in lockedSentences" :key="`lock-${i}`">
+          <div v-if="item.separator" class="hero-separator" />
+          <p
+            v-else
+            class="hero-line"
+            :class="styleClass(item.style)"
+          >
+            {{ item.text }}
+          </p>
+        </div>
+      </TransitionGroup>
+
+      <!-- Active sentence — fade + swipe -->
+      <div class="hero-active-zone">
+        <Transition
+          name="sentence"
+          @after-enter="onEntered"
+          @after-leave="onLeft"
+        >
+          <p
+            v-if="showActive && currentSentence"
+            :key="currentIndex"
+            class="hero-line"
+            :class="styleClass(currentSentence.style)"
+          >
+            {{ currentSentence.text }}
+          </p>
+        </Transition>
+      </div>
+    </div>
+
+    <!-- SEO / no-JS fallback -->
+    <template #fallback>
+      <div class="hero-text">
+        <p
+          v-for="(sentence, i) in stayingSentences"
+          :key="i"
+          class="hero-line"
+          :class="styleClass(sentence.style)"
+        >
+          {{ sentence.text }}
+        </p>
+      </div>
+    </template>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import type { TypewriterSentence } from '~/composables/useTypewriter'
+
+const props = defineProps<{
+  sentences: TypewriterSentence[]
+}>()
+
+const stayingSentences = computed(() => props.sentences.filter(s => s.stays))
+
+const {
+  currentIndex,
+  currentSentence,
+  showActive,
+  lockedSentences,
+  isComplete,
+  onEntered,
+  onLeft,
+  start,
+  skipToEnd,
+} = useTypewriter(props.sentences)
+
+onMounted(() => {
+  start()
+})
+
+function handleClick() {
+  if (!isComplete.value) {
+    skipToEnd()
+  }
+}
+
+function styleClass(style?: string) {
+  if (style === 'citation') return 'hero-line--citation'
+  if (style === 'text') return 'hero-line--body'
+  return 'hero-line--title'
+}
+</script>
+
+<style scoped>
+.hero-text {
+  text-align: center;
+  min-height: 14rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: pointer;
+}
+
+/* ── Lines ── */
+
+.hero-line {
+  margin: 0;
+  padding: 0.3em 0;
+  font-family: var(--font-display);
+  line-height: 1.35;
+}
+
+.hero-line--title {
+  font-weight: 700;
+  font-size: clamp(1.4rem, 4vw, 2.4rem);
+  color: hsl(var(--color-text));
+  letter-spacing: -0.01em;
+}
+
+.hero-line--citation {
+  font-style: italic;
+  font-weight: 400;
+  font-size: clamp(1.1rem, 3vw, 1.6rem);
+  color: hsl(var(--color-text) / 0.75);
+  max-width: 38ch;
+  margin-inline: auto;
+}
+
+.hero-line--body {
+  font-weight: 400;
+  font-size: clamp(1rem, 2.5vw, 1.35rem);
+  color: hsl(var(--color-text) / 0.6);
+  max-width: 44ch;
+  margin-inline: auto;
+}
+
+/* ── Separator ── */
+
+.hero-separator {
+  width: 4rem;
+  height: 2px;
+  margin: 1.25rem auto;
+  background: linear-gradient(
+    to right,
+    transparent,
+    hsl(var(--color-primary) / 0.5),
+    transparent
+  );
+  border-radius: 1px;
+}
+
+/* ── Active zone ── */
+
+.hero-active-zone {
+  min-height: 4.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+/* ── Active sentence transition (fade + swipe) ── */
+
+.sentence-enter-active {
+  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.sentence-leave-active {
+  transition: opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0),
+              transform 0.6s cubic-bezier(0.7, 0, 0.84, 0);
+}
+
+.sentence-enter-from {
+  opacity: 0;
+  transform: translateY(24px);
+}
+
+.sentence-leave-to {
+  opacity: 0;
+  transform: translateY(-18px);
+}
+
+/* ── Locked sentences transition ── */
+
+.lock-enter-active {
+  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+}
+
+.lock-enter-from {
+  opacity: 0;
+  transform: translateY(12px);
+}
+
+.lock-move {
+  transition: transform 0.5s ease;
+}
+</style>
diff --git a/app/composables/useTypewriter.ts b/app/composables/useTypewriter.ts
new file mode 100644
index 0000000..117f659
--- /dev/null
+++ b/app/composables/useTypewriter.ts
@@ -0,0 +1,108 @@
+export interface TypewriterSentence {
+  text: string
+  style?: 'title' | 'citation' | 'text'
+  stays?: boolean
+  separator?: boolean
+}
+
+interface SequenceOptions {
+  holdMs?: number
+  gapMs?: number
+}
+
+export function useTypewriter(sentences: TypewriterSentence[], options: SequenceOptions = {}) {
+  const {
+    holdMs = 2400,
+    gapMs = 300,
+  } = options
+
+  const currentIndex = ref(-1)
+  const showActive = ref(false)
+  const lockedSentences = ref<TypewriterSentence[]>([])
+  const isComplete = ref(false)
+
+  let holdTimer: ReturnType<typeof setTimeout> | null = null
+
+  const currentSentence = computed(() =>
+    currentIndex.value >= 0 && currentIndex.value < sentences.length
+      ? sentences[currentIndex.value]
+      : null,
+  )
+
+  function clearTimer() {
+    if (holdTimer) {
+      clearTimeout(holdTimer)
+      holdTimer = null
+    }
+  }
+
+  function showNext() {
+    const nextIdx = currentIndex.value + 1
+    if (nextIdx >= sentences.length) {
+      isComplete.value = true
+      return
+    }
+
+    currentIndex.value = nextIdx
+    const sentence = sentences[nextIdx]
+
+    if (sentence.separator) {
+      lockedSentences.value = [...lockedSentences.value, { text: '', separator: true }]
+    }
+
+    showActive.value = true
+  }
+
+  /** Called by component via @after-enter on Transition */
+  function onEntered() {
+    holdTimer = setTimeout(() => {
+      showActive.value = false
+    }, holdMs)
+  }
+
+  /** Called by component via @after-leave on Transition */
+  function onLeft() {
+    const sentence = sentences[currentIndex.value]
+    if (sentence?.stays) {
+      lockedSentences.value = [...lockedSentences.value, { ...sentence }]
+    }
+    setTimeout(showNext, gapMs)
+  }
+
+  function start() {
+    showNext()
+  }
+
+  function skipToEnd() {
+    clearTimer()
+    showActive.value = false
+
+    const locked: TypewriterSentence[] = []
+    for (const sentence of sentences) {
+      if (sentence.separator) {
+        locked.push({ text: '', separator: true })
+      }
+      if (sentence.stays) {
+        locked.push({ ...sentence })
+      }
+    }
+
+    lockedSentences.value = locked
+    currentIndex.value = sentences.length - 1
+    isComplete.value = true
+  }
+
+  onUnmounted(clearTimer)
+
+  return {
+    currentIndex: readonly(currentIndex),
+    currentSentence,
+    showActive,
+    lockedSentences: readonly(lockedSentences),
+    isComplete: readonly(isComplete),
+    onEntered,
+    onLeft,
+    start,
+    skipToEnd,
+  }
+}
diff --git a/app/pages/decision.vue b/app/pages/decision.vue
new file mode 100644
index 0000000..3a96de3
--- /dev/null
+++ b/app/pages/decision.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="section-padding">
+    <div class="container-content">
+      <div class="mx-auto max-w-3xl">
+        <!-- Header -->
+        <div class="text-center mb-12">
+          <div class="decision-icon mx-auto mb-6">
+            <div class="i-lucide-scale h-10 w-10" />
+          </div>
+          <h1 class="font-display text-4xl font-bold text-white mb-4">Plateforme Décision</h1>
+          <p class="text-lg text-white/60 leading-relaxed">
+            Se donner les moyens de la décision collective.
+          </p>
+        </div>
+
+        <!-- Features -->
+        <div class="grid gap-4 sm:grid-cols-2 mb-12">
+          <div v-for="feature in features" :key="feature.title" class="feature-card">
+            <div class="feature-icon">
+              <div :class="`i-lucide-${feature.icon} h-5 w-5`" />
+            </div>
+            <h3 class="font-display font-semibold text-white mb-1">{{ feature.title }}</h3>
+            <p class="text-sm text-white/50 leading-relaxed">{{ feature.text }}</p>
+          </div>
+        </div>
+
+        <!-- CTA -->
+        <div class="text-center flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
+          <UiBaseButton :href="decisionUrl" target="_blank">
+            <div class="i-lucide-external-link mr-2 h-4 w-4" />
+            Ouvrir Glibredecision
+          </UiBaseButton>
+          <UiBaseButton variant="ghost" to="/">
+            <div class="i-lucide-arrow-left mr-2 h-4 w-4" />
+            Retour à l'accueil
+          </UiBaseButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+useHead({ title: 'Décision collective' })
+
+const appConfig = useAppConfig()
+const decisionUrl = (appConfig.libredecision as { url: string }).url
+
+const features = [
+  {
+    icon: 'vote',
+    title: 'Décisions on-chain',
+    text: 'Des décisions transparentes et vérifiables, inscrites sur la blockchain.',
+  },
+  {
+    icon: 'scroll-text',
+    title: 'Les Mandats',
+    text: 'Formaliser et suivre les mandats confiés aux personnes désignées.',
+  },
+  {
+    icon: 'file-text',
+    title: 'Documents de référence',
+    text: 'Les textes fondateurs et documents qui encadrent la prise de décision.',
+  },
+  {
+    icon: 'git-branch',
+    title: 'Les Protocoles',
+    text: 'Les règles et processus qui structurent la décision collective.',
+  },
+]
+</script>
+
+<style scoped>
+.decision-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 1rem;
+  background: hsl(var(--color-primary) / 0.1);
+  border: 1px solid hsl(var(--color-primary) / 0.2);
+  color: hsl(var(--color-primary));
+}
+
+.feature-card {
+  padding: 1.25rem;
+  border-radius: 0.75rem;
+  border: 1px solid hsl(var(--color-text) / 0.08);
+  background: hsl(var(--color-surface));
+}
+
+.feature-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary));
+  margin-bottom: 0.75rem;
+}
+</style>
diff --git a/app/pages/gestation/[slug].vue b/app/pages/gestation/[slug].vue
new file mode 100644
index 0000000..2b65003
--- /dev/null
+++ b/app/pages/gestation/[slug].vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="section-padding">
+    <div class="container-content">
+      <div class="mx-auto max-w-2xl">
+        <div class="gestation-icon mx-auto mb-6">
+          <div class="i-lucide-flask-conical h-12 w-12 text-accent" />
+        </div>
+
+        <h1 class="font-display text-3xl font-bold text-white mb-4 text-center">
+          {{ item?.label ?? 'En gestation' }}
+        </h1>
+
+        <p class="text-lg text-white/60 leading-relaxed mb-8 text-center">
+          {{ item?.description ?? 'Cette initiative est en cours de préparation.' }}
+        </p>
+
+        <!-- Présentation spécifique -->
+        <div v-if="item?.presentation" class="presentation-card mb-10">
+          <div class="presentation-icon">
+            <div class="i-lucide-rocket h-5 w-5" />
+          </div>
+          <h2 class="font-display text-xl font-semibold text-white mb-2">
+            {{ item.presentation.title }}
+          </h2>
+          <p class="text-white/60 leading-relaxed">
+            {{ item.presentation.text }}
+          </p>
+          <p class="mt-4 text-sm text-white/30 italic">En cours de développement.</p>
+        </div>
+
+        <div class="text-center">
+          <UiBaseButton variant="ghost" to="/">
+            <div class="i-lucide-arrow-left mr-2 h-4 w-4" />
+            Retour à l'accueil
+          </UiBaseButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const slug = route.params.slug as string
+
+const { data: content } = await usePageContent('home')
+
+const item = computed(() => {
+  const axes = (content.value as any)?.axes
+  if (!axes) return null
+  for (const axis of Object.values(axes) as any[]) {
+    for (const it of axis.items ?? []) {
+      if (it.to === `/gestation/${slug}`) return it
+    }
+  }
+  return null
+})
+
+useHead({
+  title: item.value?.label ?? `En gestation — ${slug}`,
+})
+</script>
+
+<style scoped>
+.gestation-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 1rem;
+  background: hsl(var(--color-accent) / 0.1);
+  border: 1px solid hsl(var(--color-accent) / 0.2);
+}
+
+.presentation-card {
+  padding: 1.5rem;
+  border-radius: 0.75rem;
+  border: 1px solid hsl(var(--color-primary) / 0.15);
+  background: hsl(var(--color-surface));
+}
+
+.presentation-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary));
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 503ed5b..06eaeec 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <HomeHeroSection />
-    <HomeBookSection @open-player="showBookPlayer = true" @open-pdf="showPdfReader = true" />
-    <HomeGrateWizardTeaser />
+    <HomeAxisGrid @open-player="showBookPlayer = true" @open-pdf="showPdfReader = true" />
+    <HomeMessages />
     <BookPlayer v-model="showBookPlayer" />
     <BookPdfReader v-model="showPdfReader" />
   </div>
diff --git a/site/pages/home.yml b/site/pages/home.yml
index 0c9e65a..8dfc4ca 100644
--- a/site/pages/home.yml
+++ b/site/pages/home.yml
@@ -1,62 +1,109 @@
 hero:
-  kicker: Autonomie collective des bassins de vie
-  title: Le librodrome
-  subtitle: Créer une économie ? Couvrir nos besoins pour vivre et nourrir nos plaisirs vivre. Ouverture d'une plateforme
-    de productions collectives, pour facilier la création d'équipes, la préparation et la réalisation de ces
-    productions.
-  footnote: Ce projet est ouvert. Chaque personne qui souhaite se mobiliser pour participer à une production est invitée à
-    laisser un message. Pour poser des questions ou laisser un mail.
-  cta:
-    label: En savoir plus sur le projet
-    to: /a-propos
-book:
-  kicker: Modèle économique
-  title: Une économie du don — enfin concevable
-  description: Un livre et quelques chansons pour une proposition de modèle économique fondé sur le don. Le livre est
-    accompagné de chansons qui le racontent, un peu autrement.
-  coverImage: /images/book-cover-spread.jpg
-  coverAlt: Couverture — Une économie du don, enfin concevable
-  cta:
-    player: Présentation musicale
-    pdf: Lecture du livre
-bookPresentation:
-  kicker: Le livre
-  title: Une économie du don — enfin concevable
-  description:
-    - Ce livre explore les fondements d'une économie fondée sur le don.
-    - Les chansons prolongent le propos en suivant le cours des chapitres, pour le rendre plus accessible. Elles créent
-      une invitation inédite et immersive à la lecture.
-  cta:
-    label: Sommaire
-    to: /modele-eco
-songs:
-  kicker: Les chansons
-  title: Des chansons qui racontent le livre, du moins une partie
-  description: Chaque chanson est un prolongement musical d'un ou deux chapitres. Naturellement, les chansons ne
-    restituent pas l'intégralité du livre.
-  cta:
-    label: Voir toutes les chansons
-    to: /en-musique
-cooperative:
-  icon: users
-  kicker: Vision
-  title: Une plateforme coopérative
-  description:
-    - L'ouverture de cette page librodrome est le premier pas vers une plateforme de productions collectives. Un espace
-      où les créateurs, producteurs et toute personne mobilisée, contribuent ensemble à faire émerger des projets de
-      productions. La plateforme sera utile pour leur réalisation effective, le suivi et le retour d'expérience.
-    - Ce projet est ouvert. Chaque contribution enrichit l'ensemble. Rejoignez-nous pour construire une autonomie
-      collective à l'échelle des bassins de vie.
-  cta:
-    label: En savoir plus
-    to: /a-propos
-grateWizardTeaser:
-  kicker: Estimer les valeurs en DU - Les coefficients relatifs
-  title: grateWizard
-  description: Une webapp pour calculer des coefficients relatifs et estimer les valeurs dans une économie du don.
-    Relatifs à la moyenne, à l'ancienneté, au solde net, au volume disponible.
-  cta:
-    launch: Lancer l'appli
-    more:
-      label: En savoir plus
-      to: /gratewizard
+  typewriter:
+    sentences:
+      - text: "Construire une autonomie collective"
+        style: title
+        stays: false
+      - text: "à l'échelle des bassins de vie."
+        style: title
+        stays: false
+      - text: "Pousser les curseurs de l'autonomie numérique, économique et politique — et s'en donner les moyens"
+        style: title
+        stays: true
+      - text: "Il s'agit d'émancipation"
+        style: citation
+        stays: false
+      - text: "Les trois dimensions qui nous émancipent sont le numérique, l'économie et le politique"
+        style: citation
+        stays: false
+      - text: "Ce sont les 3 axes de l'espace dans lequel nous naviguons"
+        style: citation
+        stays: true
+        separator: true
+      - text: "Dans chaque dimension, nous adressons ce qui est le plus en amont"
+        style: text
+        stays: false
+      - text: "Pour le numérique, c'est le code source"
+        style: text
+        stays: false
+      - text: "Pour l'économie, c'est la création monétaire"
+        style: text
+        stays: false
+      - text: "Pour le politique, c'est la prise de décision — comment on choisit, comment on décide"
+        style: text
+        stays: true
+
+axes:
+  numerique:
+    title: Autonomie numérique
+    icon: monitor
+    items:
+      - label: Logiciel libre
+        description: Maîtriser le code source, c'est maîtriser l'outil. Le logiciel libre est la base de l'autonomie numérique.
+        to: /gestation/logiciel-libre
+        gestation: true
+        icon: code-2
+        presentation:
+          title: wishBounty
+          text: Application pour le financement fléché des développements.
+      - label: Authentification — WoT
+        description: Une toile de confiance décentralisée, sans autorité centrale. Chaque identité est certifiée par ses pairs.
+        to: /gestation/authentification-wot
+        gestation: true
+        icon: fingerprint
+        presentation:
+          title: trustWallet
+          text: Gestionnaire de confiances.
+      - label: Cloud libre
+        description: Héberger ses propres services pour ne dépendre de personne. Serveurs, noms de domaine, infrastructure.
+        to: /gestation/cloud-libre
+        gestation: true
+        icon: cloud
+        presentation:
+          title: Bouquet de services
+          text: "Un bouquet de services complet : Drive, Visio, Forum, Wiki, CMS. IA frugale localisée."
+  economie:
+    title: Autonomie économique
+    icon: coins
+    items:
+      - label: Monnaie libre
+        description: "La Ğ1 (June) : une monnaie co-créée par ses membres, sans dette ni intérêt. Le dividende universel comme base."
+        href: https://monnaie-libre.fr
+        icon: circle-dollar-sign
+      - label: Économie du don
+        description: Un livre et des chansons pour une proposition de modèle économique fondé sur le don.
+        icon: heart-handshake
+        actions:
+          - id: open-player
+            label: Présentation musicale
+            icon: play
+          - id: open-pdf
+            label: Lecture du livre
+            icon: book-open
+          - id: launch-gratewizard
+            label: grateWizard
+            icon: sparkles
+      - label: Productions collectives
+        description: Une plateforme pour faciliter la création d'équipes et la réalisation de productions à l'échelle des bassins de vie.
+        to: /gestation/productions-collectives
+        gestation: true
+        icon: users
+  politique:
+    title: Autonomie citoyenne
+    icon: landmark
+    items:
+      - label: Décision collective
+        description: Se donner les moyens de la décision collective.
+        to: /decision
+        icon: scale
+      - label: Tarifs de l'eau
+        description: Application pour obtenir justice sociale et incitation dynamique à la réduction. Permet de confier la décision à la population des communes.
+        to: /gestation/tarifs-eau
+        gestation: true
+        icon: droplets
+
+evenement:
+  title: Le librodrome,
+  subtitle: c'est également un événement.
+  to: /evenement
+  gestation: true