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>

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 {