Décision : picto gavel titre + parchemin docs, GrateWizard embed sans double scroll

- Page décision : icône gavel pour le titre, scroll-text pour Documents de référence - GrateWizard : ouverture en mode embed (?embed=true&hideTabBar=true) avec scrollbars=no pour supprimer le double scroll Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Refonte accueil : hero typo statique, axes icônes, menu italic, page numérique
2026-03-03 06:48:52 +01:00 · 2026-03-03 06:34:30 +01:00 · 2026-03-03 04:08:47 +01:00 · 2026-03-03 03:49:07 +01:00
22 changed files with 1203 additions and 250 deletions
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -6,13 +6,6 @@ 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' },
-    ],
  },
  footer: {
    credits: '© 2026 Le Librodrome — Productions collectives',
@@ -23,8 +16,14 @@ export default defineAppConfig({
  gratewizard: {
    url: import.meta.dev ? 'http://localhost:3001' : 'https://gratewizard.axiom-team.fr',
    popup: {
-      width: 420,
-      height: 720,
+      width: 480,
+      height: 860,
    },
  },
+  libredecision: {
+    url: import.meta.dev ? 'http://localhost:3002' : 'https://decision.laplank.org',
+  },
+  sejeteral0: {
+    url: import.meta.dev ? 'http://localhost:3009' : 'https://collectivites.librodrome.org',
+  },
 })
--- a/app/assets/css/fonts.css
+++ b/app/assets/css/fonts.css
@@ -2,11 +2,11 @@
 /* This file provides fallback and utility classes */

 .font-display {
-  font-family: 'Outfit', system-ui, sans-serif;
+  font-family: 'Syne', system-ui, sans-serif;
 }

 .font-sans {
-  font-family: 'Inter', system-ui, sans-serif;
+  font-family: 'Space Grotesk', system-ui, sans-serif;
 }

 .font-mono {
--- 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: 215 8% 22%;
+  --color-surface: 213 7% 27%;
+  --color-surface-light: 210 6% 32%;
  --color-text: 0 0% 100%;
  --color-text-muted: 0 0% 65%;

@@ -15,8 +15,8 @@
  --player-height: 0rem;
  --sidebar-width: 280px;

-  --font-display: 'Outfit', sans-serif;
-  --font-sans: 'Inter', sans-serif;
+  --font-display: 'Syne', sans-serif;
+  --font-sans: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--- a/app/components/home/AxisBlock.vue
+++ b/app/components/home/AxisBlock.vue
@@ -0,0 +1,309 @@
+<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="iconClass(icon)" class="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 }"
+      >
+        <!-- Clickable card body -->
+        <component
+          :is="itemTag(item)"
+          v-bind="itemAttrs(item)"
+          class="axis-item-body"
+        >
+          <!-- Item icon -->
+          <div v-if="item.icon" class="axis-item-icon" :class="`axis-item-icon--${color}`">
+            <span v-if="item.icon === 'g1'" class="axis-item-icon-g1">Ğ1</span>
+            <div v-else :class="iconClass(item.icon)" class="h-5 w-5" />
+          </div>
+
+          <h3 class="font-display text-lg font-semibold text-white mb-1">
+            {{ 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">{{ item.description }}</p>
+        </component>
+
+        <!-- Actions zone (separate from card link) -->
+        <div v-if="item.actions?.length" class="axis-actions">
+          <!-- Primary row -->
+          <div class="axis-actions-row">
+            <button
+              v-for="action in primaryActions(item.actions)"
+              :key="action.id"
+              class="axis-action-btn"
+              :class="{ 'axis-action-btn--highlight': action.highlight }"
+              @click.stop="handleAction(action.id)"
+            >
+              <div :class="iconClass(action.icon)" class="h-3.5 w-3.5" />
+              {{ action.label }}
+            </button>
+          </div>
+          <!-- Secondary row -->
+          <div v-if="secondaryActions(item.actions).length" class="axis-actions-secondary">
+            <button
+              v-for="action in secondaryActions(item.actions)"
+              :key="action.id"
+              class="axis-action-btn axis-action-btn--secondary"
+              @click.stop="handleAction(action.id)"
+            >
+              <div :class="iconClass(action.icon)" class="h-3.5 w-3.5" />
+              {{ action.label }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface AxisAction {
+  id: string
+  label: string
+  icon: string
+  highlight?: boolean
+  secondary?: boolean
+}
+
+interface AxisItem {
+  label: string
+  description: string
+  to?: string
+  href?: string
+  gestation?: boolean
+  icon?: string
+  actions?: AxisAction[]
+  presentation?: { title: string; text: string }
+}
+
+defineProps<{
+  title: string
+  icon: string
+  color?: 'primary' | 'accent'
+  items: AxisItem[]
+}>()
+
+const emit = defineEmits<{
+  'open-player': []
+  'open-pdf': []
+  'launch-gratewizard': []
+}>()
+
+function primaryActions(actions: AxisAction[]) {
+  return actions.filter(a => !a.secondary)
+}
+
+function secondaryActions(actions: AxisAction[]) {
+  return actions.filter(a => a.secondary)
+}
+
+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')
+}
+
+function iconClass(name: string) {
+  return `i-lucide-${name}`
+}
+
+function itemTag(item: AxisItem) {
+  if (item.href) return 'a'
+  if (item.to) return resolveComponent('NuxtLink')
+  return 'div'
+}
+
+function itemAttrs(item: AxisItem) {
+  if (item.href) return { href: item.href, target: '_blank', rel: 'noopener noreferrer' }
+  if (item.to) return { to: item.to }
+  return {}
+}
+</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;
+  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;
+  overflow: hidden;
+}
+
+.axis-item:hover {
+  border-color: hsl(var(--color-primary) / 0.25);
+  box-shadow: 0 4px 24px hsl(var(--color-primary) / 0.06);
+}
+
+.axis-item--gestation {
+  opacity: 0.75;
+}
+
+.axis-item--gestation:hover {
+  opacity: 0.9;
+}
+
+.axis-item-body {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem;
+  flex: 1;
+  text-decoration: none;
+  color: inherit;
+}
+
+.axis-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.axis-item-icon--primary {
+  background: hsl(var(--color-primary) / 0.18);
+  color: hsl(var(--color-primary));
+  box-shadow: 0 0 14px hsl(var(--color-primary) / 0.15);
+}
+
+.axis-item-icon--accent {
+  background: hsl(var(--color-accent) / 0.18);
+  color: hsl(var(--color-accent));
+  box-shadow: 0 0 14px hsl(var(--color-accent) / 0.15);
+}
+
+.axis-item-icon-g1 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.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-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border-top: 1px solid hsl(var(--color-text) / 0.06);
+  background: hsl(var(--color-bg) / 0.4);
+}
+
+.axis-actions-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  padding: 0.75rem 1.25rem;
+}
+
+.axis-actions-secondary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  padding: 0.5rem 1.25rem 0.75rem;
+  border-top: 1px solid hsl(var(--color-text) / 0.04);
+}
+
+.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-action-btn--highlight {
+  color: hsl(var(--color-primary));
+  background: hsl(var(--color-primary) / 0.12);
+  border-color: hsl(var(--color-primary) / 0.25);
+}
+
+.axis-action-btn--highlight:hover {
+  background: hsl(var(--color-primary) / 0.2);
+  border-color: hsl(var(--color-primary) / 0.4);
+}
+
+.axis-action-btn--secondary {
+  color: hsl(var(--color-text) / 0.45);
+  background: transparent;
+  border-color: hsl(var(--color-text) / 0.06);
+  font-size: 0.75rem;
+}
+
+.axis-action-btn--secondary:hover {
+  color: hsl(var(--color-accent));
+  background: hsl(var(--color-accent) / 0.08);
+  border-color: hsl(var(--color-accent) / 0.2);
+}
+</style>
--- a/app/components/home/AxisGrid.vue
+++ 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>
--- a/app/components/home/GrateWizardTeaser.vue
+++ b/app/components/home/GrateWizardTeaser.vue
@@ -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>
--- a/app/components/home/HeroSection.vue
+++ b/app/components/home/HeroSection.vue
@@ -1,8 +1,8 @@
 <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%)]" />
+    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,hsl(12_76%_48%/0.12),transparent_70%)]" />

    <!-- Shadok bird decoration -->
    <svg class="shadok-bird" viewBox="0 0 180 260" fill="none" aria-hidden="true">
@@ -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,41 +44,11 @@

    <!-- 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="hero"
+          :hero="hero"
+        />
      </div>
    </div>
  </section>
@@ -86,11 +56,25 @@

 <script setup lang="ts">
 const { data: content } = await usePageContent('home')
+
+const hero = computed(() => {
+  const raw = (content.value as any)?.hero
+  if (!raw) return null
+  return {
+    heading: Array.isArray(raw.heading) ? raw.heading : [],
+    citations: Array.isArray(raw.citations) ? raw.citations : [],
+    approach: raw.approach || '',
+    axes: Array.isArray(raw.axes) ? raw.axes : [],
+  }
+})
 </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 {
--- 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">
--- a/app/components/home/TypewriterText.vue
+++ b/app/components/home/TypewriterText.vue
@@ -0,0 +1,260 @@
+<template>
+  <div class="hero-content">
+    <!-- 5-line heading with alternating typography -->
+    <div class="hero-heading">
+      <h1 v-if="hero.heading?.length" class="hero-lines">
+        <span
+          v-for="(line, i) in hero.heading"
+          :key="i"
+          class="hero-line"
+          :class="`hero-line--${i + 1}`"
+        >{{ line }}</span>
+      </h1>
+    </div>
+
+    <!-- Discrete aside block -->
+    <details class="hero-aside">
+      <summary class="hero-aside-toggle">En savoir plus</summary>
+
+      <div class="hero-aside-body">
+        <!-- Citations -->
+        <blockquote v-if="hero.citations?.length" class="hero-citations">
+          <p v-for="(cite, i) in hero.citations" :key="i" class="hero-cite">
+            {{ cite }}
+          </p>
+        </blockquote>
+
+        <!-- Approach + Axes -->
+        <div v-if="hero.approach" class="hero-approach">
+          <p class="hero-approach-text">{{ hero.approach }}</p>
+          <dl v-if="hero.axes?.length" class="hero-axes">
+            <div v-for="(axis, i) in hero.axes" :key="i" class="hero-axis">
+              <dt>{{ axis.label }}</dt>
+              <dd>{{ axis.value }}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </details>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface HeroAxis {
+  label: string
+  value: string
+}
+
+interface HeroData {
+  heading: string[]
+  citations: string[]
+  approach: string
+  axes: HeroAxis[]
+}
+
+defineProps<{
+  hero: HeroData
+}>()
+</script>
+
+<style scoped>
+.hero-content {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+}
+
+/* ── Heading — 5 lines ── */
+
+.hero-heading {
+  margin-bottom: 1.5rem;
+}
+
+.hero-lines {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.1em;
+}
+
+.hero-line {
+  display: block;
+  font-family: var(--font-display);
+  line-height: 1.3;
+}
+
+/* l1: Construire une autonomie collective. — bold, large */
+.hero-line--1 {
+  font-weight: 700;
+  font-size: clamp(1.45rem, 3.8vw, 2.5rem);
+  color: hsl(var(--color-text) / 0.95);
+  letter-spacing: -0.02em;
+}
+
+/* l2: à l'échelle des bassins de vie — light, same size, softer */
+.hero-line--2 {
+  font-weight: 300;
+  font-size: clamp(1.3rem, 3.2vw, 2.1rem);
+  color: hsl(var(--color-text) / 0.55);
+  letter-spacing: -0.01em;
+}
+
+/* l3: Pousser les curseurs — accent color, medium */
+.hero-line--3 {
+  font-weight: 600;
+  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
+  color: hsl(var(--color-accent));
+  margin-top: 0.5em;
+  letter-spacing: 0.02em;
+}
+
+/* l4: Autonomie numérique, économique, citoyenne. — small-caps feel */
+.hero-line--4 {
+  font-family: var(--font-sans);
+  font-weight: 500;
+  font-size: clamp(0.9rem, 2vw, 1.15rem);
+  color: hsl(var(--color-text) / 0.65);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-top: 0.15em;
+}
+
+/* l5: — s'en donner les moyens — — italic, same tone as l4 */
+.hero-line--5 {
+  font-style: italic;
+  font-weight: 400;
+  font-size: clamp(0.95rem, 2.2vw, 1.2rem);
+  color: hsl(var(--color-text) / 0.65);
+  margin-top: 0.3em;
+}
+
+/* ── Discrete aside block ── */
+
+.hero-aside {
+  width: 100%;
+  max-width: 36em;
+}
+
+.hero-aside-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0 auto;
+  padding: 0.35rem 0.85rem;
+  border-radius: 9999px;
+  font-family: var(--font-sans);
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: hsl(var(--color-text) / 0.35);
+  border: 1px solid hsl(var(--color-text) / 0.08);
+  cursor: pointer;
+  transition: all 0.2s;
+  list-style: none;
+}
+
+.hero-aside-toggle::-webkit-details-marker {
+  display: none;
+}
+
+.hero-aside-toggle::before {
+  content: '▸';
+  font-size: 0.65em;
+  transition: transform 0.2s;
+}
+
+.hero-aside[open] .hero-aside-toggle::before {
+  transform: rotate(90deg);
+}
+
+.hero-aside-toggle:hover {
+  color: hsl(var(--color-text) / 0.55);
+  border-color: hsl(var(--color-text) / 0.15);
+}
+
+.hero-aside-body {
+  margin-top: 1.25rem;
+  animation: aside-reveal 0.3s ease;
+}
+
+@keyframes aside-reveal {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Citations ── */
+
+.hero-citations {
+  margin: 0 0 1.25rem;
+  padding: 0.6rem 0 0.6rem 1rem;
+  border-left: 2px solid hsl(var(--color-accent) / 0.3);
+  text-align: left;
+}
+
+.hero-cite {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 400;
+  font-size: 0.92rem;
+  line-height: 1.55;
+  color: hsl(var(--color-text) / 0.45);
+  margin: 0;
+}
+
+.hero-cite + .hero-cite {
+  margin-top: 0.25rem;
+}
+
+/* ── Approach + Axes ── */
+
+.hero-approach {
+  text-align: center;
+}
+
+.hero-approach-text {
+  font-family: var(--font-sans);
+  font-size: 0.82rem;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: hsl(var(--color-text) / 0.35);
+  margin: 0 0 0.6rem;
+}
+
+.hero-axes {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2rem;
+  margin: 0;
+}
+
+.hero-axis {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  justify-content: center;
+}
+
+.hero-axis dt {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: hsl(var(--color-primary));
+}
+
+.hero-axis dt::after {
+  content: ' →';
+  color: hsl(var(--color-text) / 0.2);
+  font-weight: 400;
+}
+
+.hero-axis dd {
+  font-family: var(--font-sans);
+  font-size: 0.88rem;
+  color: hsl(var(--color-text) / 0.5);
+  margin: 0;
+}
+</style>
--- a/app/components/layout/TheHeader.vue
+++ b/app/components/layout/TheHeader.vue
@@ -16,8 +16,10 @@

      <!-- Desktop navigation -->
      <nav class="hidden md:flex items-center gap-1" aria-label="Navigation principale">
+        <!-- Autonomie : prefix + axis buttons -->
+        <span class="nav-prefix">Autonomie&thinsp;:</span>
        <NuxtLink
-          v-for="item in site?.navigation"
+          v-for="item in axes"
          :key="item.to"
          :to="item.to"
          class="btn-ghost text-sm"
@@ -25,6 +27,19 @@
        >
          {{ item.label }}
        </NuxtLink>
+
+        <!-- Separator + extra nav -->
+        <span class="nav-sep" />
+        <NuxtLink
+          v-for="item in extra"
+          :key="item.to"
+          :to="item.to"
+          class="btn-ghost btn-ghost--muted text-sm"
+          active-class="!text-[hsl(var(--color-text))] bg-[hsl(var(--color-text)/0.06)]"
+        >
+          {{ item.label }}
+        </NuxtLink>
+
        <UiPaletteSelector />
      </nav>

@@ -39,13 +54,17 @@
    </div>

    <!-- Mobile menu -->
-    <LayoutNavMobile v-model:open="isMobileMenuOpen" :nav="site?.navigation ?? []" />
+    <LayoutNavMobile v-model:open="isMobileMenuOpen" :nav="allNav" />
  </header>
 </template>

 <script setup lang="ts">
 const { data: site } = await useSiteContent()
 const isMobileMenuOpen = ref(false)
+
+const axes = computed(() => (site.value as any)?.navigation?.axes ?? [])
+const extra = computed(() => (site.value as any)?.navigation?.extra ?? [])
+const allNav = computed(() => [...axes.value, ...extra.value])
 </script>

 <style scoped>
@@ -65,9 +84,34 @@ const isMobileMenuOpen = ref(false)

 .logo-text {
  font-family: var(--font-display);
-  font-weight: 600;
-  font-size: 1.15rem;
-  letter-spacing: 0.02em;
-  color: hsl(var(--color-primary));
+  font-weight: 400;
+  font-size: 1.25rem;
+  letter-spacing: 0.04em;
+  background-image: linear-gradient(to right, hsl(var(--color-primary)), hsl(var(--color-accent)));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.nav-prefix {
+  font-family: var(--font-display);
+  font-size: 0.92rem;
+  font-weight: 500;
+  font-style: italic;
+  letter-spacing: 0.03em;
+  color: hsl(var(--color-text) / 0.4);
+  margin-right: 0.125rem;
+}
+
+.nav-sep {
+  display: block;
+  width: 1px;
+  height: 1.25rem;
+  background: hsl(var(--color-text) / 0.12);
+  margin: 0 0.375rem;
+}
+
+.btn-ghost--muted {
+  color: hsl(var(--color-text) / 0.45);
 }
 </style>
--- a/app/composables/useGrateWizard.ts
+++ b/app/composables/useGrateWizard.ts
@@ -3,12 +3,15 @@ export function useGrateWizard() {
  const { url, popup } = appConfig.gratewizard as { url: string; popup: { width: number; height: number } }

  function launch(e?: Event) {
-    const left = Math.round((window.screen.width - popup.width) / 2)
-    const top = Math.round((window.screen.height - popup.height) / 2)
+    const w = popup.width
+    const h = popup.height
+    const left = Math.round((window.screen.width - w) / 2)
+    const top = Math.round((window.screen.height - h) / 2)
+    const embedUrl = `${url}?embed=true&hideTabBar=true&tab=mn`
    const win = window.open(
-      url,
+      embedUrl,
      'grateWizard',
-      `width=${popup.width},height=${popup.height},left=${left},top=${top},menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes`,
+      `width=${w},height=${h},left=${left},top=${top},menubar=no,toolbar=no,location=no,status=no,scrollbars=no,resizable=yes`,
    )
    if (win) e?.preventDefault()
  }
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,8 +1,27 @@
 <template>
  <div class="app-layout grid grid-cols-1 min-h-dvh">
    <LayoutTheHeader />
-    <main>
+    <main class="app-main">
      <slot />
+
+      <!-- 益 Yì (Increase, #42) — sceau hexagramme -->
+      <svg class="app-seal" viewBox="0 0 130 100" fill="currentColor" aria-hidden="true">
+        <!-- Line 6 (top) — yang -->
+        <rect x="5" y="5" width="120" height="5" rx="1"/>
+        <!-- Line 5 — yang -->
+        <rect x="5" y="22" width="120" height="5" rx="1"/>
+        <!-- Line 4 — yin -->
+        <rect x="5" y="39" width="49" height="5" rx="1"/>
+        <rect x="76" y="39" width="49" height="5" rx="1"/>
+        <!-- Line 3 — yin -->
+        <rect x="5" y="56" width="49" height="5" rx="1"/>
+        <rect x="76" y="56" width="49" height="5" rx="1"/>
+        <!-- Line 2 — yin -->
+        <rect x="5" y="73" width="49" height="5" rx="1"/>
+        <rect x="76" y="73" width="49" height="5" rx="1"/>
+        <!-- Line 1 (bottom) — yang -->
+        <rect x="5" y="90" width="120" height="5" rx="1"/>
+      </svg>
    </main>
    <LayoutTheFooter />
  </div>
@@ -12,4 +31,15 @@
 .app-layout {
  grid-template-rows: auto 1fr auto;
 }
+
+/* === Seal — 益 Yì (Increase) === */
+.app-seal {
+  display: block;
+  width: 44px;
+  margin: 2rem 1.5rem 1rem auto;
+  color: hsl(var(--color-accent));
+  opacity: 0.28;
+  filter: drop-shadow(1px 1px 0.5px rgba(0,0,0,0.25))
+          drop-shadow(-0.5px -0.5px 0.5px rgba(255,255,255,0.15));
+}
 </style>
--- a/app/pages/decision.vue
+++ 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-gavel 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: 'scroll-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>
--- a/app/pages/gestation/[slug].vue
+++ b/app/pages/gestation/[slug].vue
@@ -0,0 +1,105 @@
+<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>
+
+        <!-- Bouton SejeteralO pour tarifs-eau -->
+        <div v-if="slug === 'tarifs-eau'" class="text-center mb-10">
+          <UiBaseButton :href="sejeteral0Url" target="_blank">
+            <div class="i-lucide-external-link mr-2 h-4 w-4" />
+            Lancer SejeteralO
+          </UiBaseButton>
+        </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 appConfig = useAppConfig()
+const sejeteral0Url = (appConfig.sejeteral0 as { url: string }).url
+
+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>
--- 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>
--- a/app/pages/modele-eco/index.vue
+++ b/app/pages/modele-eco/index.vue
@@ -74,6 +74,13 @@
    </svg>

    <div class="container-content">
+      <!-- Page de couverture du livre -->
+      <HomeBookSection
+        class="mb-16"
+        @open-player="showBookPlayer = true"
+        @open-pdf="showPdfReader = true"
+      />
+
      <header class="mb-12 text-center">
        <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">{{ content?.kicker }}</p>
        <h1 class="page-title font-display font-bold tracking-tight text-white">
@@ -118,6 +125,9 @@
        </ul>
      </div>
    </div>
+
+    <BookPlayer v-model="showBookPlayer" />
+    <BookPdfReader v-model="showPdfReader" />
  </div>
 </template>

@@ -135,6 +145,9 @@ useHead({
 const { data: chapters } = await useAsyncData('book-toc', () =>
  queryCollection('book').order('order', 'ASC').all(),
 )
+
+const showBookPlayer = ref(false)
+const showPdfReader = ref(false)
 </script>

 <style scoped>
--- a/app/pages/numerique.vue
+++ b/app/pages/numerique.vue
@@ -117,10 +117,10 @@ definePageMeta({
  layout: 'default',
 })

-const { data: content } = await usePageContent('autonomie')
+const { data: content } = await usePageContent('numerique')

 useHead({
-  title: content.value?.meta?.title ?? 'Autonomie',
+  title: content.value?.meta?.title ?? 'Autonomie numérique',
 })
 </script>

--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,6 +16,20 @@ export default defineNuxtConfig({
    '@nuxt/image',
  ],

+  unocss: {
+    safelist: [
+      // Axis block icons (dynamic from YAML)
+      'i-lucide-monitor', 'i-lucide-coins', 'i-lucide-landmark',
+      'i-lucide-code-2', 'i-lucide-share-2', 'i-lucide-cloud',
+      'i-lucide-scale', 'i-lucide-gavel', 'i-lucide-users',
+      'i-lucide-droplets', 'i-lucide-calendar-heart',
+      // Action icons
+      'i-lucide-play', 'i-lucide-book-open', 'i-lucide-sparkles',
+      // Decision page
+      'i-lucide-vote', 'i-lucide-scroll-text', 'i-lucide-git-branch',
+    ],
+  },
+
  app: {
    head: {
      htmlAttrs: { lang: 'fr' },
--- a/server/middleware/redirects.ts
+++ b/server/middleware/redirects.ts
@@ -10,4 +10,8 @@ export default defineEventHandler((event) => {
    const rest = path.slice(8) // remove '/ecouter'
    return sendRedirect(event, `/en-musique${rest || '/'}`, 301)
  }
+
+  if (path === '/autonomie' || path === '/autonomie/') {
+    return sendRedirect(event, '/numerique', 301)
+  }
 })
--- a/site/pages/home.yml
+++ b/site/pages/home.yml
@@ -1,14 +1,24 @@
 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
+  heading:
+    - "Construire une autonomie collective."
+    - "à l'échelle des bassins de vie"
+    - "Pousser les curseurs"
+    - "Autonomie numérique, économique, citoyenne."
+    - "— s'en donner les moyens —"
+  citations:
+    - "Il s'agit d'émancipation."
+    - "Les trois dimensions qui nous émancipent sont le numérique, l'économie et le politique."
+    - "Elles peuvent nous asservir tout autant."
+    - "Ce sont les 3 axes de l'espace dans lequel nous naviguons."
+  approach: "Dans chaque dimension, nous adressons ce qui est le plus en amont"
+  axes:
+    - label: numérique
+      value: le code source
+    - label: économie
+      value: la création monétaire
+    - label: citoyenne
+      value: la décision
+
 book:
  kicker: Modèle économique
  title: Une économie du don — enfin concevable
@@ -19,44 +29,81 @@ book:
  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
+
+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: share-2
+        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: g1
+      - label: Économie du don
+        description: Un livre et des chansons pour une proposition de modèle économique fondé sur le don.
+        to: /modele-eco
+        icon: scale
+        actions:
+          - id: open-player
+            label: Présentation musicale
+            icon: play
+            highlight: true
+          - id: open-pdf
+            label: Lecture du livre
+            icon: book-open
+          - id: launch-gratewizard
+            label: grateWizard
+            icon: sparkles
+            secondary: true
+      - 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: gavel
+      - 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
--- a/site/pages/numerique.yml
+++ b/site/pages/numerique.yml
@@ -1,8 +1,8 @@
-kicker: Pourquoi l'autonomie
-title: Autonomie
-description: Des passages du livre qui éclairent la démarche d'autonomie collective — le fil rouge du projet.
+kicker: Autonomie numérique
+title: Le code source
+description: Des passages du livre qui éclairent la démarche d'autonomie numérique — maîtriser le code source, c'est maîtriser l'outil.
 meta:
-  title: Autonomie
+  title: Autonomie numérique
 extracts:
  - chapter: Introduction
    chapterSlug: 01-introduction
--- a/site/site.yml
+++ b/site/site.yml
@@ -4,16 +4,16 @@ identity:
    racontent, autrement.
  url: https://librodrome.org
 navigation:
-  - 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
+  axes:
+    - label: numérique
+      to: /numerique
+    - label: économique
+      to: /modele-eco
+    - label: citoyenne
+      to: /decision
+  extra:
+    - label: Événement
+      to: /evenement
 footer:
  credits: © 2026 Le librodrome — Productions collectives
  links:
Author	SHA1	Message	Date
Yvv	3a5c40a886	Décision : picto gavel titre + parchemin docs, GrateWizard embed sans double scroll All checks were successful ci/woodpecker/push/woodpecker Pipeline was successful Details - Page décision : icône gavel pour le titre, scroll-text pour Documents de référence - GrateWizard : ouverture en mode embed (?embed=true&hideTabBar=true) avec scrollbars=no pour supprimer le double scroll Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 06:48:52 +01:00
Yvv	fbc2867163	Refonte accueil : hero typo statique, axes icônes, menu italic, page numérique - Hero : 5 lignes typographiques alternées (bold/light/accent/caps/italic), citations et axes dans un bloc discret dépliable - Icônes axes : Ğ1 custom, balance (éco don), graphe (WoT), marteau (décision), pictos plus lumineux (glow) - Menu : Autonomie en italique + grand, Événement majuscule - Page /autonomie renommée /numerique avec redirect 301 - Sceau hexagramme 益 Yì dans le layout, BookSection dans /modele-eco - Fonts Syne + Space Grotesk, dark theme éclairci - Popup GrateWizard agrandie (480×860) - Actions AxisBlock : primary côte à côte, secondary séparé dessous Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 06:34:30 +01:00
Yvv	082a17d09b	Fix accueil : hero fade doux, icônes safelist, blocs cliquables, menu, dark fort - Hero : réécriture composable timeout pur (plus de Transition callbacks) Animation fade opacity 1s très douce, lisible - Icônes : safelist UnoCSS dans nuxt.config.ts (résout pastilles vides) - Menu : mis à jour site.yml (Numérique/Économique/Citoyenne/Événement) - Blocs : card entière cliquable, zone actions séparée (border-top) - Économie du don : lié à /modele-eco (page chapitres préservée) - Tarifs de l'eau : bouton SejeteralO (localhost:3009 / collectivites.librodrome.org) - Dark theme fort : bg 220 12% 15%, surface 19%, surface-light 24% - Config SejeteralO + Glibredecision dans app.config.ts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 04:08:47 +01:00
Yvv	97ba6dd04c	Redesign accueil : grille 3 axes, hero fade/swipe, pages gestation et décision - 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>	2026-03-03 03:49:07 +01:00