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>

app/app.config.ts

@@ -6,12 +6,6 @@ export default defineAppConfig({
   },
   header: {
     height: '4rem',
-    nav: [
-      { label: 'Numérique', to: '/#numerique' },
-      { label: 'Économique', to: '/#economique' },
-      { label: 'Citoyenne', to: '/#citoyenne' },
-      { label: 'Événement', to: '/evenement' },
-    ],
   },
   footer: {
     credits: '© 2026 Le Librodrome — Productions collectives',
@@ -29,4 +23,7 @@ export default defineAppConfig({
   libredecision: {
     url: import.meta.dev ? 'http://localhost:3002' : 'https://decision.laplank.org',
   },
+  sejeteral0: {
+    url: import.meta.dev ? 'http://localhost:3009' : 'https://collectivites.librodrome.org',
+  },
 })

app/assets/css/main.css

@@ -5,9 +5,9 @@
 :root {
   --color-primary: 18 80% 45%;
   --color-accent: 32 85% 50%;
-  --color-bg: 20 10% 10%;
+  --color-bg: 220 12% 15%;
-  --color-surface: 20 10% 14%;
+  --color-surface: 220 10% 19%;
-  --color-surface-light: 20 8% 20%;
+  --color-surface-light: 220 8% 24%;
   --color-text: 0 0% 100%;
   --color-text-muted: 0 0% 65%;
 

app/components/home/AxisBlock.vue

@@ -3,7 +3,7 @@
     <!-- 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 :class="iconClass(icon)" class="h-6 w-6" />
       </div>
       <h2 class="font-display text-2xl font-bold text-white">{{ title }}</h2>
     </div>
@@ -16,57 +16,39 @@
         class="axis-item card-surface"
         :class="{ 'axis-item--gestation': item.gestation }"
       >
-        <!-- Item icon -->
+        <!-- Clickable card body -->
-        <div v-if="item.icon" class="axis-item-icon mb-3" :class="`axis-item-icon--${color}`">
+        <component
-          <div :class="`i-lucide-${item.icon} h-5 w-5`" />
+          :is="itemTag(item)"
-        </div>
+          v-bind="itemAttrs(item)"
-
+          class="axis-item-body"
-        <h3 class="font-display text-lg font-semibold text-white mb-2">
+        >
-          {{ item.label }}
+          <!-- Item icon -->
-          <span v-if="item.gestation" class="gestation-badge">
+          <div v-if="item.icon" class="axis-item-icon" :class="`axis-item-icon--${color}`">
-            <div class="i-lucide-flask-conical h-3 w-3" />
+            <div :class="iconClass(item.icon)" class="h-5 w-5" />
-            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 -->
+          <h3 class="font-display text-lg font-semibold text-white mb-1">
-          <a
+            {{ item.label }}
-            v-else-if="item.href"
+            <span v-if="item.gestation" class="gestation-badge">
-            :href="item.href"
+              <div class="i-lucide-flask-conical h-3 w-3" />
-            target="_blank"
+              En gestation
-            rel="noopener noreferrer"
+            </span>
-            class="axis-link"
+          </h3>
-          >
-            Découvrir
-            <div class="i-lucide-external-link h-3.5 w-3.5" />
-          </a>
 
-          <!-- Internal link -->
+          <p class="text-sm text-white/60 leading-relaxed">{{ item.description }}</p>
-          <NuxtLink
+        </component>
-            v-else-if="item.to"
+
-            :to="item.to"
+        <!-- Actions zone (separate from card link) -->
-            class="axis-link"
+        <div v-if="item.actions?.length" class="axis-actions">
+          <button
+            v-for="action in item.actions"
+            :key="action.id"
+            class="axis-action-btn"
+            @click.stop="handleAction(action.id)"
           >
-            {{ item.gestation ? 'En savoir plus' : 'Découvrir' }}
+            <div :class="iconClass(action.icon)" class="h-3.5 w-3.5" />
-            <div class="i-lucide-arrow-right h-3.5 w-3.5" />
+            {{ action.label }}
-          </NuxtLink>
+          </button>
         </div>
       </div>
     </div>
@@ -88,6 +70,7 @@ interface AxisItem {
   gestation?: boolean
   icon?: string
   actions?: AxisAction[]
+  presentation?: { title: string; text: string }
 }
 
 defineProps<{
@@ -108,6 +91,22 @@ function handleAction(id: string) {
   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>
@@ -140,24 +139,33 @@ function handleAction(id: string) {
 .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;
+  overflow: hidden;
 }
 
 .axis-item:hover {
-  border-color: hsl(var(--color-text) / 0.15);
+  border-color: hsl(var(--color-primary) / 0.25);
-  box-shadow: 0 4px 20px hsl(var(--color-text) / 0.05);
+  box-shadow: 0 4px 24px hsl(var(--color-primary) / 0.06);
 }
 
 .axis-item--gestation {
-  opacity: 0.7;
+  opacity: 0.75;
 }
 
 .axis-item--gestation:hover {
-  opacity: 0.85;
+  opacity: 0.9;
+}
+
+.axis-item-body {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem;
+  flex: 1;
+  text-decoration: none;
+  color: inherit;
 }
 
 .axis-item-icon {
@@ -167,6 +175,7 @@ function handleAction(id: string) {
   width: 2.25rem;
   height: 2.25rem;
   border-radius: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .axis-item-icon--primary {
@@ -194,6 +203,15 @@ function handleAction(id: string) {
   vertical-align: middle;
 }
 
+.axis-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  padding: 0.75rem 1.25rem;
+  border-top: 1px solid hsl(var(--color-text) / 0.06);
+  background: hsl(var(--color-bg) / 0.4);
+}
+
 .axis-action-btn {
   display: inline-flex;
   align-items: center;
@@ -214,18 +232,4 @@ function handleAction(id: string) {
   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>

app/components/home/TypewriterText.vue

@@ -1,36 +1,25 @@
 <template>
   <ClientOnly>
     <div class="hero-text" @click="handleClick">
-      <!-- Locked sentences (stays: true, already shown) -->
+      <!-- Locked sentences (stays: true, already revealed) -->
       <TransitionGroup name="lock">
         <div v-for="(item, i) in lockedSentences" :key="`lock-${i}`">
           <div v-if="item.separator" class="hero-separator" />
-          <p
+          <p v-else class="hero-line" :class="styleClass(item.style)">
-            v-else
-            class="hero-line"
-            :class="styleClass(item.style)"
-          >
             {{ item.text }}
           </p>
         </div>
       </TransitionGroup>
 
-      <!-- Active sentence — fade + swipe -->
+      <!-- Active sentence — pure CSS opacity fade -->
       <div class="hero-active-zone">
-        <Transition
+        <p
-          name="sentence"
+          v-show="currentText"
-          @after-enter="onEntered"
+          class="hero-line hero-active"
-          @after-leave="onLeft"
+          :class="[styleClass(currentStyle), { 'is-visible': isVisible }]"
         >
-          <p
+          {{ currentText }}
-            v-if="showActive && currentSentence"
+        </p>
-            :key="currentIndex"
-            class="hero-line"
-            :class="styleClass(currentSentence.style)"
-          >
-            {{ currentSentence.text }}
-          </p>
-        </Transition>
       </div>
     </div>
 
@@ -60,13 +49,11 @@ const props = defineProps<{
 const stayingSentences = computed(() => props.sentences.filter(s => s.stays))
 
 const {
-  currentIndex,
+  currentText,
-  currentSentence,
+  currentStyle,
-  showActive,
+  isVisible,
   lockedSentences,
   isComplete,
-  onEntered,
-  onLeft,
   start,
   skipToEnd,
 } = useTypewriter(props.sentences)
@@ -91,7 +78,7 @@ function styleClass(style?: string) {
 <style scoped>
 .hero-text {
   text-align: center;
-  min-height: 14rem;
+  min-height: 16rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -104,30 +91,30 @@ function styleClass(style?: string) {
   margin: 0;
   padding: 0.3em 0;
   font-family: var(--font-display);
-  line-height: 1.35;
+  line-height: 1.4;
 }
 
 .hero-line--title {
-  font-weight: 700;
+  font-weight: 600;
-  font-size: clamp(1.4rem, 4vw, 2.4rem);
+  font-size: clamp(1.3rem, 3.5vw, 2.2rem);
-  color: hsl(var(--color-text));
+  color: hsl(var(--color-text) / 0.95);
   letter-spacing: -0.01em;
 }
 
 .hero-line--citation {
   font-style: italic;
   font-weight: 400;
-  font-size: clamp(1.1rem, 3vw, 1.6rem);
+  font-size: clamp(1.05rem, 2.8vw, 1.5rem);
-  color: hsl(var(--color-text) / 0.75);
+  color: hsl(var(--color-text) / 0.7);
-  max-width: 38ch;
+  max-width: 40ch;
   margin-inline: auto;
 }
 
 .hero-line--body {
   font-weight: 400;
-  font-size: clamp(1rem, 2.5vw, 1.35rem);
+  font-size: clamp(1rem, 2.5vw, 1.3rem);
   color: hsl(var(--color-text) / 0.6);
-  max-width: 44ch;
+  max-width: 46ch;
   margin-inline: auto;
 }
 
@@ -140,7 +127,7 @@ function styleClass(style?: string) {
   background: linear-gradient(
     to right,
     transparent,
-    hsl(var(--color-primary) / 0.5),
+    hsl(var(--color-primary) / 0.45),
     transparent
   );
   border-radius: 1px;
@@ -149,44 +136,33 @@ function styleClass(style?: string) {
 /* ── Active zone ── */
 
 .hero-active-zone {
-  min-height: 4.5rem;
+  min-height: 5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }
 
-/* ── Active sentence transition (fade + swipe) ── */
+/* ── Active sentence — opacity fade ── */
 
-.sentence-enter-active {
+.hero-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);
+  transition: opacity 1s ease;
 }
 
-.sentence-leave-to {
+.hero-active.is-visible {
-  opacity: 0;
+  opacity: 1;
-  transform: translateY(-18px);
 }
 
-/* ── Locked sentences transition ── */
+/* ── Locked sentences entrance ── */
 
 .lock-enter-active {
-  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
 }
 
 .lock-enter-from {
   opacity: 0;
-  transform: translateY(12px);
+  transform: translateY(8px);
 }
 
 .lock-move {

app/composables/useTypewriter.ts

@@ -6,76 +6,79 @@ export interface TypewriterSentence {
 }
 
 interface SequenceOptions {
+  fadeMs?: number
   holdMs?: number
   gapMs?: number
 }
 
 export function useTypewriter(sentences: TypewriterSentence[], options: SequenceOptions = {}) {
   const {
-    holdMs = 2400,
+    fadeMs = 1000,
+    holdMs = 2800,
     gapMs = 300,
   } = options
 
-  const currentIndex = ref(-1)
+  const currentText = ref('')
-  const showActive = ref(false)
+  const currentStyle = ref<string>('title')
+  const isVisible = ref(false)
   const lockedSentences = ref<TypewriterSentence[]>([])
   const isComplete = ref(false)
 
-  let holdTimer: ReturnType<typeof setTimeout> | null = null
+  let currentIdx = -1
-
+  let timer: ReturnType<typeof setTimeout> | null = null
-  const currentSentence = computed(() =>
-    currentIndex.value >= 0 && currentIndex.value < sentences.length
-      ? sentences[currentIndex.value]
-      : null,
-  )
 
   function clearTimer() {
-    if (holdTimer) {
+    if (timer) {
-      clearTimeout(holdTimer)
+      clearTimeout(timer)
-      holdTimer = null
+      timer = null
     }
   }
 
-  function showNext() {
+  function next() {
-    const nextIdx = currentIndex.value + 1
+    currentIdx++
-    if (nextIdx >= sentences.length) {
+    if (currentIdx >= sentences.length) {
+      currentText.value = ''
       isComplete.value = true
       return
     }
 
-    currentIndex.value = nextIdx
+    const sentence = sentences[currentIdx]
-    const sentence = sentences[nextIdx]
 
     if (sentence.separator) {
       lockedSentences.value = [...lockedSentences.value, { text: '', separator: true }]
     }
 
-    showActive.value = true
+    // Set text while invisible
-  }
+    currentText.value = sentence.text
+    currentStyle.value = sentence.style || 'title'
 
-  /** Called by component via @after-enter on Transition */
+    // Fade in on next frame
-  function onEntered() {
+    requestAnimationFrame(() => {
-    holdTimer = setTimeout(() => {
+      isVisible.value = true
-      showActive.value = false
+    })
-    }, holdMs)
-  }
 
-  /** Called by component via @after-leave on Transition */
+    // After fade-in + hold → fade out
-  function onLeft() {
+    timer = setTimeout(() => {
-    const sentence = sentences[currentIndex.value]
+      isVisible.value = false
-    if (sentence?.stays) {
+
-      lockedSentences.value = [...lockedSentences.value, { ...sentence }]
+      // After fade-out completes → lock if stays, then next
-    }
+      timer = setTimeout(() => {
-    setTimeout(showNext, gapMs)
+        if (sentence.stays) {
+          lockedSentences.value = [...lockedSentences.value, { ...sentence }]
+        }
+        timer = setTimeout(next, gapMs)
+      }, fadeMs)
+    }, fadeMs + holdMs)
   }
 
   function start() {
-    showNext()
+    next()
   }
 
   function skipToEnd() {
     clearTimer()
-    showActive.value = false
+    isVisible.value = false
+    currentText.value = ''
 
     const locked: TypewriterSentence[] = []
     for (const sentence of sentences) {
@@ -88,20 +91,18 @@ export function useTypewriter(sentences: TypewriterSentence[], options: Sequence
     }
 
     lockedSentences.value = locked
-    currentIndex.value = sentences.length - 1
+    currentIdx = sentences.length - 1
     isComplete.value = true
   }
 
   onUnmounted(clearTimer)
 
   return {
-    currentIndex: readonly(currentIndex),
+    currentText: readonly(currentText),
-    currentSentence,
+    currentStyle: readonly(currentStyle),
-    showActive,
+    isVisible,
     lockedSentences: readonly(lockedSentences),
     isComplete: readonly(isComplete),
-    onEntered,
-    onLeft,
     start,
     skipToEnd,
   }

app/pages/gestation/[slug].vue

@@ -28,6 +28,14 @@
           <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" />
@@ -45,6 +53,9 @@ 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

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-fingerprint', 'i-lucide-cloud',
+      'i-lucide-circle-dollar-sign', 'i-lucide-heart-handshake', 'i-lucide-users',
+      'i-lucide-scale', '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' },

site/pages/home.yml

@@ -72,6 +72,7 @@ axes:
         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.
+        to: /modele-eco
         icon: heart-handshake
         actions:
           - id: open-player

site/site.yml

@@ -4,16 +4,14 @@ identity:
     racontent, autrement.
   url: https://librodrome.org
 navigation:
-  - label: Autonomie
+  - label: Numérique
-    to: /autonomie
+    to: /#numerique
-  - label: Modèle éco
+  - label: Économique
-    to: /modele-eco
+    to: /#economique
-  - label: En musique
+  - label: Citoyenne
-    to: /en-musique
+    to: /#citoyenne
-  - label: Évènement
+  - label: Événement
     to: /evenement
-  - label: À propos
-    to: /a-propos
 footer:
   credits: © 2026 Le librodrome — Productions collectives
   links: