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
parent 97ba6dd04c
commit 082a17d09b
9 changed files with 184 additions and 182 deletions
--- a/app/app.config.ts
+++ b/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',
+  },
 })
--- 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% 10%;
-  --color-surface: 20 10% 14%;
-  --color-surface-light: 20 8% 20%;
+  --color-bg: 220 12% 15%;
+  --color-surface: 220 10% 19%;
+  --color-surface-light: 220 8% 24%;
  --color-text: 0 0% 100%;
  --color-text-muted: 0 0% 65%;

--- a/app/components/home/AxisBlock.vue
+++ b/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 -->
-        <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>
+        <!-- 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}`">
+            <div :class="iconClass(item.icon)" class="h-5 w-5" />
          </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>
+          <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>

-          <!-- Internal link -->
-          <NuxtLink
-            v-else-if="item.to"
-            :to="item.to"
-            class="axis-link"
+          <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">
+          <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="i-lucide-arrow-right h-3.5 w-3.5" />
-          </NuxtLink>
+            <div :class="iconClass(action.icon)" class="h-3.5 w-3.5" />
+            {{ action.label }}
+          </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);
-  box-shadow: 0 4px 20px hsl(var(--color-text) / 0.05);
+  border-color: hsl(var(--color-primary) / 0.25);
+  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>
--- a/app/components/home/TypewriterText.vue
+++ b/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
-            v-else
-            class="hero-line"
-            :class="styleClass(item.style)"
-          >
+          <p 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
-          name="sentence"
-          @after-enter="onEntered"
-          @after-leave="onLeft"
+        <p
+          v-show="currentText"
+          class="hero-line hero-active"
+          :class="[styleClass(currentStyle), { 'is-visible': isVisible }]"
        >
-          <p
-            v-if="showActive && currentSentence"
-            :key="currentIndex"
-            class="hero-line"
-            :class="styleClass(currentSentence.style)"
-          >
-            {{ currentSentence.text }}
-          </p>
-        </Transition>
+          {{ currentText }}
+        </p>
      </div>
    </div>

@@ -60,13 +49,11 @@ const props = defineProps<{
 const stayingSentences = computed(() => props.sentences.filter(s => s.stays))

 const {
-  currentIndex,
-  currentSentence,
-  showActive,
+  currentText,
+  currentStyle,
+  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-size: clamp(1.4rem, 4vw, 2.4rem);
-  color: hsl(var(--color-text));
+  font-weight: 600;
+  font-size: clamp(1.3rem, 3.5vw, 2.2rem);
+  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);
-  color: hsl(var(--color-text) / 0.75);
-  max-width: 38ch;
+  font-size: clamp(1.05rem, 2.8vw, 1.5rem);
+  color: hsl(var(--color-text) / 0.7);
+  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 {
-  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 {
+.hero-active {
  opacity: 0;
-  transform: translateY(24px);
+  transition: opacity 1s ease;
 }

-.sentence-leave-to {
-  opacity: 0;
-  transform: translateY(-18px);
+.hero-active.is-visible {
+  opacity: 1;
 }

-/* ── 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 {
--- a/app/composables/useTypewriter.ts
+++ b/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 showActive = ref(false)
+  const currentText = ref('')
+  const currentStyle = ref<string>('title')
+  const isVisible = 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,
-  )
+  let currentIdx = -1
+  let timer: ReturnType<typeof setTimeout> | null = null

  function clearTimer() {
-    if (holdTimer) {
-      clearTimeout(holdTimer)
-      holdTimer = null
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
    }
  }

-  function showNext() {
-    const nextIdx = currentIndex.value + 1
-    if (nextIdx >= sentences.length) {
+  function next() {
+    currentIdx++
+    if (currentIdx >= sentences.length) {
+      currentText.value = ''
      isComplete.value = true
      return
    }

-    currentIndex.value = nextIdx
-    const sentence = sentences[nextIdx]
+    const sentence = sentences[currentIdx]

    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 */
-  function onEntered() {
-    holdTimer = setTimeout(() => {
-      showActive.value = false
-    }, holdMs)
-  }
+    // Fade in on next frame
+    requestAnimationFrame(() => {
+      isVisible.value = true
+    })

-  /** 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)
+    // After fade-in + hold → fade out
+    timer = setTimeout(() => {
+      isVisible.value = false
+
+      // After fade-out completes → lock if stays, then next
+      timer = setTimeout(() => {
+        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),
-    currentSentence,
-    showActive,
+    currentText: readonly(currentText),
+    currentStyle: readonly(currentStyle),
+    isVisible,
    lockedSentences: readonly(lockedSentences),
    isComplete: readonly(isComplete),
-    onEntered,
-    onLeft,
    start,
    skipToEnd,
  }
--- a/app/pages/gestation/[slug].vue
+++ b/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
--- 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-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' },
--- a/site/pages/home.yml
+++ b/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
--- a/site/site.yml
+++ b/site/site.yml
@@ -4,16 +4,14 @@ 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
+  - label: Numérique
+    to: /#numerique
+  - label: Économique
+    to: /#economique
+  - label: Citoyenne
+    to: /#citoyenne
+  - label: Événement
    to: /evenement
-  - label: À propos
-    to: /a-propos
 footer:
  credits: © 2026 Le librodrome — Productions collectives
  links: