design : accueil en trois variantes (console, parcours, établi) + couleur par axe

- typo : Bricolage Grotesque (titres) + Atkinson Hyperlegible (texte),
  Syne gardée pour le logo seul ; une seule source de polices (Bunny)
- palettes : teinte propre à chaque axe dans les 4 ambiances ;
  pages d'axe en axis-scope, cartes sans bordure (canon design)
- accueil : console des trois curseurs (tablist clavier), boîte à outils,
  bloc format éditorial + événement + reproduction ; ?v=a|b|c|0
- numérique : carte LPK ; bouquet rendu avec statut et légende
- messages : sans bordure, deux colonnes en grand écran

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/assets/css/fonts.css

@@ -2,13 +2,13 @@
 /* This file provides fallback and utility classes */
 
 .font-display {
-  font-family: 'Syne', system-ui, sans-serif;
+  font-family: var(--font-display);
 }
 
 .font-sans {
-  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-family: var(--font-sans);
 }
 
 .font-mono {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: var(--font-mono);
 }

app/assets/css/main.css

@@ -15,8 +15,14 @@
   --player-height: 0rem;
   --sidebar-width: 280px;
 
-  --font-display: 'Syne', sans-serif;
+  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
-  --font-sans: 'Space Grotesk', sans-serif;
+  --font-sans: 'Atkinson Hyperlegible', system-ui, sans-serif;
+  --font-logo: 'Syne', sans-serif;
+
+  /* One hue per axis — overridden by each palette (stores/palette.ts) */
+  --axis-num: 198 70% 30%;
+  --axis-eco: 24 88% 42%;
+  --axis-cit: 150 45% 28%;
   --font-mono: 'JetBrains Mono', monospace;
 
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
@@ -85,6 +91,11 @@ a {
   background: hsl(var(--color-text) / 0.25);
 }
 
+/* ═══ Axis scopes — each axis page takes its own hue as primary ═══ */
+.axis-scope--num { --color-primary: var(--axis-num); }
+.axis-scope--eco { --color-primary: var(--axis-eco); }
+.axis-scope--cit { --color-primary: var(--axis-cit); }
+
 /* ═══ Light mode overrides ═══ */
 .palette-light {
   color-scheme: light;

app/components/book/BookPdfReader.vue

@@ -110,7 +110,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   gap: 0.625rem;
-  font-family: var(--font-display, 'Syne', sans-serif);
+  font-family: var(--font-display);
   font-size: 0.9rem;
   font-weight: 600;
   color: white;

app/components/book/BookPlayer.vue

@@ -606,7 +606,7 @@ onUnmounted(() => {
 }
 .reader-bar-title {
   flex: 1;
-  font-family: var(--font-display, 'Syne', sans-serif);
+  font-family: var(--font-display);
   font-size: clamp(0.85rem, 2.5vw, 1.1rem);
   font-weight: 600;
   color: white;
@@ -647,7 +647,7 @@ onUnmounted(() => {
   gap: 0.25rem;
 }
 .sommaire-title {
-  font-family: var(--font-display, 'Syne', sans-serif);
+  font-family: var(--font-display);
   font-size: 0.85rem;
   font-weight: 700;
   color: hsl(var(--color-text-muted));

app/components/home/HomeCitations.vue

@@ -0,0 +1,42 @@
+<template>
+  <blockquote v-if="lines?.length" class="cites">
+    <p v-for="(line, i) in lines" :key="i" class="cite" :class="{ 'cite--lead': i === 0 }">{{ line }}</p>
+  </blockquote>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  lines: string[]
+}>()
+</script>
+
+<style scoped>
+.cites {
+  margin: 0;
+  padding: 0;
+  max-width: 46rem;
+}
+
+.cite {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
+  line-height: 1.3;
+  letter-spacing: -0.015em;
+  color: hsl(var(--color-text) / 0.62);
+}
+
+.cite + .cite {
+  margin-top: 0.3rem;
+}
+
+.cite--lead {
+  font-weight: 800;
+  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  color: hsl(var(--color-text));
+  margin-bottom: 0.6rem;
+}
+</style>

app/components/home/HomeConsole.vue

@@ -0,0 +1,472 @@
+<template>
+  <div class="console" :class="{ 'console--ready': ready, 'console--compact': compact }">
+    <div class="console-board">
+      <!-- Scale: from « je subis » to « je m'affranchis » (evenement.yml) -->
+      <div class="console-scale" aria-hidden="true">
+        <span>je m'affranchis</span>
+        <span class="console-ticks"><i v-for="n in 5" :key="n" /></span>
+        <span>je subis</span>
+      </div>
+
+      <div
+        class="console-faders"
+        role="tablist"
+        aria-label="Les trois axes de l'autonomie"
+        @keydown="onKeydown"
+      >
+        <button
+          v-for="(axis, i) in axes"
+          :id="`fader-${uid}-${axis.key}`"
+          :key="axis.key"
+          ref="tabs"
+          type="button"
+          role="tab"
+          class="fader"
+          :class="{ 'fader--active': axis.key === active }"
+          :style="{ '--hue': `var(${axis.hue})`, '--level': level(axis.key), '--i': i }"
+          :aria-selected="axis.key === active"
+          :aria-controls="`panel-${uid}`"
+          :tabindex="axis.key === active ? 0 : -1"
+          @click="select(axis.key)"
+        >
+          <span class="fader-track" aria-hidden="true">
+            <span class="fader-fill" />
+            <span class="fader-cap" />
+          </span>
+          <span class="fader-name">{{ axis.short }}</span>
+          <span class="fader-lever">{{ axis.lever }}</span>
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="current"
+      :id="`panel-${uid}`"
+      role="tabpanel"
+      class="console-panel"
+      :style="{ '--hue': `var(${current.hue})` }"
+      :aria-labelledby="`fader-${uid}-${current.key}`"
+    >
+      <Transition name="panel" mode="out-in">
+        <div :key="current.key" class="panel-inner">
+          <p class="panel-upstream">
+            <span class="panel-upstream-label">{{ upstreamLabel }}</span>
+            {{ current.lever }}
+          </p>
+          <h2 class="panel-title">{{ current.title }}</h2>
+          <p v-if="current.promise" class="panel-promise">{{ current.promise }}</p>
+
+          <ul class="panel-tools">
+            <li v-for="tool in current.items" :key="tool.label">
+              <NuxtLink v-if="tool.to" :to="tool.to" class="panel-tool">
+                <span class="panel-tool-name">{{ tool.label }}</span>
+                <span v-if="tool.presentation" class="panel-tool-app">{{ tool.presentation.title }}</span>
+                <span v-if="tool.gestation" class="panel-tool-state">en gestation</span>
+              </NuxtLink>
+            </li>
+          </ul>
+
+          <p v-if="current.key === 'numerique' && stacks?.length" class="panel-stacks">
+            <span class="panel-stacks-label">{{ stacksLabel }}</span>
+            <span v-for="s in stacks.slice(0, maxStacks)" :key="s.name" class="panel-stack">{{ s.name }}</span>
+            <NuxtLink v-if="stacks.length > maxStacks && stacksTo" :to="stacksTo" class="panel-stacks-more">
+              +{{ stacks.length - maxStacks }}
+            </NuxtLink>
+          </p>
+
+          <NuxtLink :to="current.to" class="panel-more">
+            Voir l'axe {{ current.short }}
+            <span class="i-lucide-arrow-right h-4 w-4" aria-hidden="true" />
+          </NuxtLink>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AxisKey, HomeAxis, HomeStack } from '~/composables/useHomeData'
+
+const props = withDefaults(defineProps<{
+  axes: HomeAxis[]
+  upstreamLabel?: string
+  stacks?: HomeStack[]
+  stacksLabel?: string
+  stacksTo?: string
+  maxStacks?: number
+  compact?: boolean
+}>(), {
+  maxStacks: 8,
+  upstreamLabel: 'en amont',
+  stacksLabel: 'En service',
+  compact: false,
+})
+
+const active = defineModel<AxisKey>({ default: 'numerique' })
+const uid = useId()
+const tabs = ref<HTMLButtonElement[]>([])
+const ready = ref(false)
+
+const current = computed(() => props.axes.find(a => a.key === active.value) ?? props.axes[0])
+
+// Faders rise from « je subis » once mounted; the selected one is pushed to the top.
+function level(key: AxisKey) {
+  if (!ready.value) return 0
+  return key === active.value ? 0.94 : 0.3
+}
+
+function select(key: AxisKey) {
+  active.value = key
+}
+
+function onKeydown(e: KeyboardEvent) {
+  const keys = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End']
+  if (!keys.includes(e.key)) return
+  e.preventDefault()
+  const idx = props.axes.findIndex(a => a.key === active.value)
+  const last = props.axes.length - 1
+  let next = idx
+  if (e.key === 'ArrowRight' || e.key === 'ArrowUp') next = idx === last ? 0 : idx + 1
+  if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') next = idx === 0 ? last : idx - 1
+  if (e.key === 'Home') next = 0
+  if (e.key === 'End') next = last
+  active.value = props.axes[next]!.key
+  nextTick(() => tabs.value[next]?.focus())
+}
+
+onMounted(() => {
+  requestAnimationFrame(() => { ready.value = true })
+})
+</script>
+
+<style scoped>
+.console {
+  --track-h: 11rem;
+  --cap-h: 1.25rem;
+  display: grid;
+  gap: 1.25rem;
+}
+
+.console--compact {
+  --track-h: 8rem;
+}
+
+/* ── Board ── */
+.console-board {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.75rem;
+  padding: 1.25rem 1.25rem 1rem;
+  border-radius: 16px;
+  background: hsl(var(--color-surface));
+  box-shadow:
+    inset 0 1px 0 hsl(var(--color-text) / 0.04),
+    0 18px 40px -24px hsl(var(--color-text) / 0.35);
+}
+
+.console-scale {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  height: var(--track-h);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  line-height: 1.2;
+  color: hsl(var(--color-text) / 0.45);
+  text-align: right;
+  white-space: nowrap;
+}
+
+.console-ticks {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--track-h) / 9);
+  align-items: flex-end;
+}
+
+.console-ticks i {
+  display: block;
+  width: 0.5rem;
+  height: 1px;
+  background: hsl(var(--color-text) / 0.2);
+}
+
+.console-faders {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+/* ── Fader ── */
+.fader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.25rem 0.25rem;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.fader:hover {
+  background: hsl(var(--hue) / 0.06);
+}
+
+.fader:focus-visible {
+  outline: 2px solid hsl(var(--hue));
+  outline-offset: 2px;
+}
+
+.fader-track {
+  position: relative;
+  width: 0.5rem;
+  height: var(--track-h);
+  border-radius: 999px;
+  background: hsl(var(--color-text) / 0.1);
+}
+
+.fader-fill {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: calc(var(--level) * (var(--track-h) - var(--cap-h)) + var(--cap-h) / 2);
+  border-radius: inherit;
+  background: hsl(var(--hue) / 0.45);
+}
+
+.fader--active .fader-fill {
+  background: hsl(var(--hue));
+}
+
+.fader-cap {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 2.6rem;
+  height: var(--cap-h);
+  margin-left: -1.3rem;
+  border-radius: 6px;
+  background: hsl(var(--color-bg));
+  box-shadow:
+    0 1px 0 hsl(var(--color-text) / 0.08),
+    0 4px 10px -2px hsl(var(--color-text) / 0.3);
+  transform: translateY(calc(-1 * var(--level) * (var(--track-h) - var(--cap-h))));
+}
+
+/* Cap groove */
+.fader-cap::after {
+  content: '';
+  position: absolute;
+  left: 0.45rem;
+  right: 0.45rem;
+  top: 50%;
+  height: 2px;
+  margin-top: -1px;
+  border-radius: 2px;
+  background: hsl(var(--hue));
+}
+
+.console--ready .fader-fill,
+.console--ready .fader-cap {
+  transition:
+    height 0.7s var(--ease-out-expo),
+    transform 0.7s var(--ease-out-expo);
+}
+
+/* Orchestrated first rise: one fader after the other */
+.console--ready .fader-fill,
+.console--ready .fader-cap {
+  transition-delay: calc(var(--i) * 90ms);
+}
+
+.fader-name {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 0.95rem;
+  letter-spacing: -0.01em;
+  color: hsl(var(--color-text) / 0.6);
+}
+
+.fader--active .fader-name {
+  color: hsl(var(--hue));
+}
+
+.fader-lever {
+  font-family: var(--font-mono);
+  font-size: 0.64rem;
+  line-height: 1.25;
+  text-align: center;
+  color: hsl(var(--color-text) / 0.45);
+}
+
+/* ── Panel ── */
+.console-panel {
+  position: relative;
+  padding: 1.25rem 1.4rem 1.2rem;
+  border-radius: 16px;
+  background: hsl(var(--hue) / 0.08);
+}
+
+.panel-upstream {
+  margin: 0 0 0.35rem;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: hsl(var(--hue));
+}
+
+.panel-upstream-label {
+  color: hsl(var(--color-text) / 0.45);
+}
+
+.panel-upstream-label::after {
+  content: ' ↑ ';
+}
+
+.panel-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
+  letter-spacing: -0.025em;
+  line-height: 1.1;
+  color: hsl(var(--color-text));
+}
+
+.panel-promise {
+  margin: 0.5rem 0 0;
+  font-size: 0.98rem;
+  line-height: 1.5;
+  color: hsl(var(--color-text) / 0.78);
+}
+
+.panel-tools {
+  list-style: none;
+  margin: 0.9rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.panel-tool {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  padding: 0.4rem 0.8rem;
+  border-radius: 20px;
+  background: hsl(var(--color-bg) / 0.7);
+  font-size: 0.85rem;
+  color: hsl(var(--color-text));
+  transition: transform 0.1s ease, background 0.2s ease;
+}
+
+.panel-tool:hover {
+  transform: translateY(-1px);
+  background: hsl(var(--color-bg));
+}
+
+.panel-tool:active {
+  transform: translateY(0);
+}
+
+.panel-tool-name {
+  font-weight: 700;
+}
+
+.panel-tool-app {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: hsl(var(--hue));
+}
+
+.panel-tool-state {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  color: hsl(var(--color-text) / 0.45);
+}
+
+.panel-stacks {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem 0.6rem;
+  margin: 0.9rem 0 0;
+  font-size: 0.8rem;
+  color: hsl(var(--color-text) / 0.7);
+}
+
+.panel-stacks-label {
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  color: hsl(var(--color-text) / 0.45);
+}
+
+.panel-stacks-more {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: hsl(var(--hue));
+}
+
+.panel-stack::before {
+  content: '';
+  display: inline-block;
+  width: 0.4rem;
+  height: 0.4rem;
+  margin-right: 0.3rem;
+  border-radius: 50%;
+  background: hsl(var(--hue));
+  vertical-align: 0.05em;
+}
+
+.panel-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 1rem;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 0.92rem;
+  color: hsl(var(--hue));
+}
+
+.panel-more:hover span {
+  transform: translateX(2px);
+}
+
+.panel-more span {
+  transition: transform 0.12s ease;
+}
+
+.panel-enter-active,
+.panel-leave-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+
+.panel-enter-from {
+  opacity: 0;
+  transform: translateY(6px);
+}
+
+.panel-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+@media (max-width: 480px) {
+  .console { --track-h: 8.5rem; }
+  .console-board { padding: 1rem 0.75rem 0.75rem; gap: 0.4rem; }
+  .console-scale { white-space: normal; max-width: 3.4rem; font-size: 0.56rem; }
+  .fader-cap { width: 2.2rem; margin-left: -1.1rem; }
+  .fader-name { font-size: 0.85rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .console--ready .fader-fill,
+  .console--ready .fader-cap,
+  .panel-enter-active,
+  .panel-leave-active {
+    transition: none;
+  }
+}
+</style>

app/components/home/HomeFormat.vue

@@ -0,0 +1,362 @@
+<template>
+  <div class="format">
+    <header v-if="format && showHeader" class="format-head">
+      <h2 class="format-title">{{ format.title }}</h2>
+      <p class="format-text">{{ format.text }}</p>
+    </header>
+
+    <div class="format-grid">
+      <!-- Éditorial : le livre et les chansons -->
+      <article v-if="book" class="format-card format-card--book">
+        <div
+          class="format-cover"
+          role="img"
+          :aria-label="book.coverAlt"
+          :style="{ backgroundImage: `url(${book.coverImage})` }"
+        />
+        <div class="format-body">
+          <p class="format-kicker">{{ book.kicker }}</p>
+          <h3 class="format-card-title">{{ book.title }}</h3>
+          <p class="format-desc">{{ book.description }}</p>
+          <div class="format-actions">
+            <button type="button" class="fbtn fbtn--main" @click="$emit('open-player')">
+              <span class="i-lucide-play h-4 w-4" aria-hidden="true" />
+              {{ book.cta?.player }}
+            </button>
+            <button type="button" class="fbtn" @click="$emit('open-pdf')">
+              <span class="i-lucide-book-open h-4 w-4" aria-hidden="true" />
+              {{ book.cta?.pdf }}
+            </button>
+            <NuxtLink to="/economique/modele-eco" class="fbtn fbtn--quiet">
+              <span class="i-lucide-list h-4 w-4" aria-hidden="true" />
+              Présentation des chapitres
+            </NuxtLink>
+            <NuxtLink to="/economique/commande" class="fbtn fbtn--quiet">
+              <span class="i-lucide-shopping-bag h-4 w-4" aria-hidden="true" />
+              Commandez le livre
+            </NuxtLink>
+          </div>
+        </div>
+      </article>
+
+      <!-- Événementiel -->
+      <NuxtLink v-if="evenement" :to="evenement.to" class="format-card format-card--event">
+        <p class="format-kicker">
+          {{ evenement.teaser }}
+          <span v-if="evenement.gestation" class="format-state">en gestation</span>
+        </p>
+        <h3 class="format-card-title format-card-title--event">{{ evenement.subtitle }}</h3>
+        <p v-if="evenement.tagline" class="format-tagline">{{ evenement.tagline }}</p>
+        <ul v-if="evenement.config.length" class="format-config">
+          <li v-for="c in evenement.config" :key="c.label">
+            <span :class="`i-lucide-${c.icon}`" class="h-4 w-4" aria-hidden="true" />
+            <span>{{ c.label }}</span>
+          </li>
+        </ul>
+        <span class="format-more">
+          Voir l'événement
+          <span class="i-lucide-arrow-right h-4 w-4" aria-hidden="true" />
+        </span>
+      </NuxtLink>
+    </div>
+
+    <!-- Reproduction + à qui l'on s'adresse -->
+    <div v-if="evenement?.reproduction || hero?.addressees?.length" class="format-repro">
+      <p v-if="evenement?.reproduction" class="format-repro-line">
+        <span class="format-basins" aria-hidden="true"><i v-for="n in 5" :key="n" /></span>
+        {{ evenement.reproduction }}
+      </p>
+      <div v-if="hero?.addressees?.length" class="format-audience">
+        <p class="format-audience-label">{{ hero.audience }}</p>
+        <ul>
+          <li v-for="a in hero.addressees" :key="a.label">
+            <strong>{{ a.label }}</strong> {{ a.value }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  format?: { title: string, text: string }
+  book?: any
+  evenement?: any
+  hero?: any
+  showHeader?: boolean
+}>(), {
+  showHeader: true,
+})
+
+defineEmits<{
+  'open-player': []
+  'open-pdf': []
+}>()
+</script>
+
+<style scoped>
+.format {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.format-head {
+  max-width: 44rem;
+}
+
+.format-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  color: hsl(var(--color-text));
+}
+
+.format-text {
+  margin: 0.75rem 0 0;
+  font-size: 1.1rem;
+  line-height: 1.5;
+  color: hsl(var(--color-text) / 0.72);
+}
+
+.format-grid {
+  display: grid;
+  gap: 1.25rem;
+}
+
+@media (min-width: 1024px) {
+  .format-grid { grid-template-columns: 1.35fr 1fr; }
+}
+
+.format-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1.5rem;
+  border-radius: 16px;
+  background: hsl(var(--color-surface));
+}
+
+.format-card--book {
+  flex-direction: row;
+  gap: 1.5rem;
+}
+
+.format-cover {
+  flex-shrink: 0;
+  width: clamp(6.5rem, 16vw, 10rem);
+  aspect-ratio: 1756 / 2480;
+  border-radius: 6px;
+  background-size: cover;
+  background-position: center;
+  box-shadow: 0 16px 30px -18px hsl(var(--color-text) / 0.6);
+}
+
+.format-body {
+  min-width: 0;
+}
+
+.format-kicker {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: hsl(var(--axis-eco));
+}
+
+.format-card--event .format-kicker {
+  color: hsl(var(--axis-cit));
+}
+
+.format-state {
+  margin-left: 0.35rem;
+  color: hsl(var(--color-text) / 0.5);
+}
+
+.format-state::before {
+  content: '◌ ';
+}
+
+.format-card-title {
+  margin: 0.3rem 0 0;
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
+  letter-spacing: -0.02em;
+  line-height: 1.12;
+  color: hsl(var(--color-text));
+}
+
+.format-card-title--event {
+  font-weight: 700;
+}
+
+.format-desc {
+  margin: 0.5rem 0 0;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: hsl(var(--color-text) / 0.72);
+}
+
+.format-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-top: 1rem;
+}
+
+.fbtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-height: 2.5rem;
+  padding: 0.45rem 1rem;
+  border-radius: 20px;
+  font-size: 0.86rem;
+  font-weight: 700;
+  color: hsl(var(--color-text) / 0.85);
+  background: hsl(var(--color-text) / 0.07);
+  transition: transform 0.1s ease, background 0.2s ease;
+}
+
+.fbtn:hover { transform: translateY(-1px); background: hsl(var(--axis-eco) / 0.14); }
+.fbtn:active { transform: translateY(0); }
+
+.fbtn--main {
+  color: hsl(var(--color-bg));
+  background: hsl(var(--axis-eco));
+}
+
+.fbtn--main:hover { background: hsl(var(--axis-eco) / 0.88); }
+
+.fbtn--quiet {
+  font-weight: 400;
+  background: transparent;
+}
+
+.format-card--event {
+  color: hsl(var(--color-text));
+  transition: transform 0.12s ease;
+}
+
+.format-card--event:hover {
+  transform: translateY(-3px);
+}
+
+.format-tagline {
+  margin: 0.2rem 0 0;
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  color: hsl(var(--color-text) / 0.7);
+}
+
+.format-config {
+  list-style: none;
+  margin: 0.75rem 0 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: hsl(var(--color-text) / 0.78);
+}
+
+.format-config li {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.format-config li > span:first-child {
+  color: hsl(var(--axis-cit));
+  flex-shrink: 0;
+}
+
+.format-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: auto;
+  padding-top: 1rem;
+  font-family: var(--font-display);
+  font-weight: 700;
+  color: hsl(var(--axis-cit));
+}
+
+/* Reproduction */
+.format-repro {
+  display: grid;
+  gap: 1.25rem;
+  padding: 1.25rem 0 0;
+}
+
+@media (min-width: 768px) {
+  .format-repro {
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+  }
+}
+
+.format-repro-line {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
+  line-height: 1.25;
+  letter-spacing: -0.015em;
+  color: hsl(var(--color-text));
+}
+
+/* One basin, then its copies */
+.format-basins {
+  display: flex;
+  gap: 0.35rem;
+  margin-bottom: 0.6rem;
+}
+
+.format-basins i {
+  display: block;
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1.5px hsl(var(--axis-cit) / 0.6);
+}
+
+.format-basins i:first-child {
+  background: hsl(var(--axis-cit));
+  box-shadow: none;
+}
+
+.format-audience-label {
+  margin: 0 0 0.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: hsl(var(--color-text) / 0.5);
+}
+
+.format-audience ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  font-size: 0.95rem;
+  color: hsl(var(--color-text) / 0.7);
+}
+
+.format-audience strong {
+  color: hsl(var(--color-text));
+}
+
+@media (max-width: 640px) {
+  .format-card--book { flex-direction: column; }
+  .format-config { grid-template-columns: 1fr; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fbtn, .format-card--event { transition: none; }
+}
+</style>

app/components/home/HomeMessages.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="section-padding">
+  <section class="messages-section">
-    <div class="container-content mx-auto max-w-3xl">
+    <div class="container-content messages-grid">
 
     <!-- Formulaire -->
     <UiScrollReveal>
@@ -49,8 +49,8 @@
 
     <!-- 2 derniers messages publiés -->
     <UiScrollReveal v-if="messages?.length" :delay="100">
-      <div class="mt-8 space-y-4">
+      <div class="space-y-4">
-        <h3 class="font-display text-lg font-bold section-title text-center">Derniers messages</h3>
+        <h3 class="font-display text-lg font-bold section-title">Derniers messages</h3>
         <div v-for="msg in messages.slice(0, 2)" :key="msg.id" class="message-card">
           <!-- En-tête auteur -->
           <div class="flex items-center gap-2 mb-2">
@@ -72,7 +72,7 @@
             </div>
           </div>
         </div>
-        <div class="text-center">
+        <div>
           <NuxtLink to="/messages" class="btn-ghost text-sm">
             Voir tous les messages
             <div class="i-lucide-arrow-right ml-1 h-3.5 w-3.5" />
@@ -150,24 +150,39 @@ function formatDate(iso: string) {
 .reply-author     { color: hsl(var(--color-primary) / 0.8); }
 .reply-text       { color: hsl(var(--color-text) / 0.62); }
 
+/* ── Mise en page ── */
+.messages-section {
+  padding: clamp(3rem, 7vw, 5.5rem) 1rem 2rem;
+}
+
+.messages-grid {
+  display: grid;
+  gap: 2rem;
+  align-items: start;
+}
+
+@media (min-width: 1024px) {
+  .messages-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
+}
+
 /* ── Carte formulaire ── */
 .message-form-card {
   background: hsl(var(--color-surface));
-  border: 1px solid hsl(var(--color-text) / 0.1);
+  border-radius: 16px;
-  border-radius: 0.75rem;
   padding: 1.5rem;
 }
 
 .msg-input {
   width: 100%;
-  padding: 0.5rem 0.75rem;
+  min-height: 2.5rem;
-  border-radius: 0.5rem;
+  padding: 0.55rem 0.85rem;
-  border: 1px solid hsl(var(--color-text) / 0.12);
+  border-radius: 12px;
+  border: none;
   background: hsl(var(--color-bg));
   color: hsl(var(--color-text));
-  font-size: 0.875rem;
+  font-size: 0.95rem;
   font-family: inherit;
-  transition: border-color 0.2s;
+  transition: box-shadow 0.2s;
 }
 
 .msg-input--select {
@@ -181,14 +196,13 @@ function formatDate(iso: string) {
 
 .msg-input:focus {
   outline: none;
-  border-color: hsl(var(--color-primary) / 0.5);
+  box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.5);
 }
 
 /* ── Carte message ── */
 .message-card {
   background: hsl(var(--color-surface));
-  border: 1px solid hsl(var(--color-text) / 0.1);
+  border-radius: 16px;
-  border-radius: 0.75rem;
   padding: 1rem 1.25rem;
 }
 

app/components/home/HomeShadoks.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="shadoks" aria-hidden="true">
+    <!-- Shadok bird decoration -->
+    <svg class="shadok-bird" viewBox="0 0 180 260" fill="none" aria-hidden="true">
+      <ellipse cx="90" cy="100" rx="45" ry="40" fill="currentColor" opacity="0.85"/>
+      <circle cx="130" cy="60" r="22" fill="currentColor" opacity="0.8"/>
+      <path d="M110 85 Q125 70 128 63" stroke="currentColor" stroke-width="8" stroke-linecap="round" opacity="0.7" fill="none"/>
+      <circle cx="136" cy="55" r="5" fill="currentColor" opacity="0.3"/>
+      <circle cx="137" cy="54" r="2" fill="currentColor" opacity="0.6"/>
+      <polygon points="150,58 175,50 152,65" fill="currentColor" opacity="0.6"/>
+      <line x1="75" y1="138" x2="60" y2="230" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <line x1="105" y1="138" x2="115" y2="230" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <circle cx="66" cy="190" r="4" fill="currentColor" opacity="0.4"/>
+      <circle cx="111" cy="190" r="4" fill="currentColor" opacity="0.4"/>
+      <path d="M60 230 L45 233 M60 230 L55 236 M60 230 L65 235" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
+      <path d="M115 230 L100 233 M115 230 L110 236 M115 230 L120 235" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
+      <path d="M48 95 Q20 80 15 65" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.5" fill="none"/>
+      <path d="M48 100 Q22 92 10 85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4" fill="none"/>
+      <path d="M48 105 Q25 102 12 100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3" fill="none"/>
+    </svg>
+
+    <!-- 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"/>
+      <ellipse cx="120" cy="68" rx="18" ry="22" fill="currentColor" opacity="0.35"/>
+      <rect x="105" y="78" width="30" height="5" rx="1" fill="currentColor" opacity="0.4"/>
+      <path d="M110 88 Q114 84 118 88" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
+      <path d="M124 88 Q128 84 132 88" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
+      <path d="M112 102 Q120 108 128 102" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.35"/>
+      <line x1="160" y1="145" x2="190" y2="135" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <rect x="185" y="125" width="40" height="10" rx="5" fill="currentColor" opacity="0.4" transform="rotate(-15 205 130)"/>
+      <line x1="80" y1="148" x2="55" y2="175" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <line x1="105" y1="200" x2="95" y2="258" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <line x1="135" y1="200" x2="145" y2="258" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <rect x="30" y="180" width="50" height="40" rx="4" fill="currentColor" opacity="0.25"/>
+      <rect x="35" y="185" width="40" height="20" rx="2" fill="currentColor" opacity="0.15"/>
+      <ellipse cx="55" cy="195" rx="12" ry="6" fill="currentColor" opacity="0.12"/>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.shadoks {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.shadok-bird {
+  position: absolute;
+  right: 3%;
+  top: 6%;
+  width: clamp(90px, 10vw, 150px);
+  opacity: 0.22;
+  color: hsl(var(--axis-num));
+  animation: shadok-float 8s ease-in-out infinite;
+}
+
+.shadok-boulanger {
+  position: absolute;
+  left: 1.5%;
+  bottom: 4%;
+  width: clamp(80px, 9vw, 140px);
+  opacity: 0.2;
+  color: hsl(var(--axis-eco));
+  animation: shadok-float 9s ease-in-out infinite reverse;
+}
+
+@keyframes shadok-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+@media (max-width: 768px) {
+  .shadoks { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shadok-bird, .shadok-boulanger { animation: none; }
+}
+</style>

app/components/home/HomeToolItem.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="tool" :class="{ 'tool--gestation': tool.gestation }">
+    <div class="tool-main">
+      <span class="tool-icon" aria-hidden="true">
+        <span v-if="tool.icon === 'g1'" class="tool-g1">Ğ1</span>
+        <span v-else :class="`i-lucide-${tool.icon}`" class="h-4 w-4" />
+      </span>
+      <div class="tool-text">
+        <component :is="tool.to ? NuxtLink : 'span'" :to="tool.to" class="tool-name">
+          {{ tool.label }}
+        </component>
+        <span v-if="tool.gestation" class="tool-state">en gestation</span>
+        <p class="tool-desc">{{ tool.description }}</p>
+        <p v-if="tool.presentation" class="tool-app">
+          <strong>{{ tool.presentation.title }}</strong> — {{ tool.presentation.text }}
+        </p>
+      </div>
+    </div>
+
+    <div v-if="tool.actions?.length" class="tool-actions">
+      <template v-for="action in tool.actions" :key="action.label">
+        <a
+          v-if="action.href"
+          :href="action.href"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="tool-btn"
+          :class="{ 'tool-btn--main': action.highlight }"
+        >
+          <span :class="`i-lucide-${action.icon}`" class="h-3.5 w-3.5" aria-hidden="true" />
+          {{ action.label }}
+        </a>
+        <NuxtLink
+          v-else-if="action.to"
+          :to="action.to"
+          class="tool-btn"
+          :class="{ 'tool-btn--quiet': action.secondary }"
+        >
+          <span :class="`i-lucide-${action.icon}`" class="h-3.5 w-3.5" aria-hidden="true" />
+          {{ action.label }}
+        </NuxtLink>
+        <button
+          v-else
+          type="button"
+          class="tool-btn"
+          :class="{ 'tool-btn--main': action.highlight }"
+          @click="$emit('action', action.id)"
+        >
+          <span :class="`i-lucide-${action.icon}`" class="h-3.5 w-3.5" aria-hidden="true" />
+          {{ action.label }}
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HomeTool } from '~/composables/useHomeData'
+
+defineProps<{
+  tool: HomeTool
+}>()
+
+defineEmits<{
+  action: [id: string]
+}>()
+
+const NuxtLink = resolveComponent('NuxtLink')
+</script>
+
+<style scoped>
+.tool {
+  padding: 0.85rem 0.9rem;
+  border-radius: 12px;
+  background: hsl(var(--color-bg) / 0.55);
+}
+
+.tool-main {
+  display: flex;
+  gap: 0.7rem;
+}
+
+.tool-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 10px;
+  background: hsl(var(--hue) / 0.12);
+  color: hsl(var(--hue));
+}
+
+.tool-g1 {
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: 0.8rem;
+}
+
+.tool-text {
+  min-width: 0;
+}
+
+.tool-name {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1rem;
+  color: hsl(var(--color-text));
+}
+
+a.tool-name:hover {
+  color: hsl(var(--hue));
+}
+
+.tool-state {
+  margin-left: 0.4rem;
+  font-family: var(--font-mono);
+  font-size: 0.64rem;
+  color: hsl(var(--color-text) / 0.5);
+  white-space: nowrap;
+}
+
+.tool-state::before {
+  content: '◌ ';
+}
+
+.tool-desc {
+  margin: 0.2rem 0 0;
+  font-size: 0.85rem;
+  line-height: 1.45;
+  color: hsl(var(--color-text) / 0.68);
+}
+
+.tool-app {
+  margin: 0.35rem 0 0;
+  font-size: 0.78rem;
+  line-height: 1.4;
+  color: hsl(var(--color-text) / 0.6);
+}
+
+.tool-app strong {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  color: hsl(var(--hue));
+}
+
+.tool-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-top: 0.7rem;
+  padding-left: 2.7rem;
+}
+
+.tool-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 2.25rem;
+  padding: 0.3rem 0.8rem;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: hsl(var(--color-text) / 0.8);
+  background: hsl(var(--color-text) / 0.06);
+  transition: transform 0.1s ease, background 0.2s ease;
+}
+
+.tool-btn:hover {
+  transform: translateY(-1px);
+  background: hsl(var(--hue) / 0.14);
+}
+
+.tool-btn:active {
+  transform: translateY(0);
+}
+
+.tool-btn--main {
+  color: hsl(var(--color-bg));
+  background: hsl(var(--hue));
+}
+
+.tool-btn--main:hover {
+  background: hsl(var(--hue) / 0.88);
+}
+
+.tool-btn--quiet {
+  font-weight: 400;
+  background: transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tool-btn { transition: none; }
+}
+</style>

app/components/home/HomeToolbox.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="toolbox-wrap">
+    <div class="toolbox" :class="{ 'toolbox--single': axes.length === 1 }">
+      <section
+        v-for="axis in axes"
+        :id="anchors ? axis.to.slice(1) : undefined"
+        :key="axis.key"
+        class="toolbox-axis"
+        :style="{ '--hue': `var(${axis.hue})` }"
+        :aria-labelledby="`tb-${uid}-${axis.key}`"
+      >
+        <header class="toolbox-head">
+          <p class="toolbox-lever">{{ axis.lever }}</p>
+          <h3 :id="`tb-${uid}-${axis.key}`" class="toolbox-title">
+            <NuxtLink :to="axis.to">{{ axis.title }}</NuxtLink>
+          </h3>
+          <p v-if="showPromise && axis.promise" class="toolbox-promise">{{ axis.promise }}</p>
+        </header>
+
+        <ul class="toolbox-tools">
+          <li v-for="tool in axis.items" :key="tool.label">
+            <HomeToolItem :tool="tool" @action="onAction" />
+          </li>
+        </ul>
+
+        <!-- Numérique : the stacks LPK serves -->
+        <NuxtLink
+          v-if="axis.key === 'numerique' && lpk && bouquet"
+          :to="lpk.to"
+          class="toolbox-lpk"
+        >
+          <span class="toolbox-lpk-head">
+            <strong>{{ lpk.name }}</strong> <span>{{ lpk.fullName }} — {{ lpk.text }}</span>
+          </span>
+          <span class="toolbox-lpk-stacks">
+            <span v-for="s in bouquet.inService" :key="s.name" class="toolbox-lpk-stack">{{ s.name }}</span>
+          </span>
+          <span class="toolbox-lpk-more">
+            {{ bouquet.title }} · {{ bouquet.stacks.length }}
+            <span class="i-lucide-arrow-right h-3.5 w-3.5" aria-hidden="true" />
+          </span>
+        </NuxtLink>
+
+        <!-- Économique : grateWizard -->
+        <button
+          v-if="axis.key === 'economie' && gratewizard"
+          type="button"
+          class="toolbox-gw"
+          @click="launch()"
+        >
+          <span class="i-lucide-sparkles h-4 w-4" aria-hidden="true" />
+          <span class="toolbox-gw-text">
+            <strong>{{ gratewizard.title }}</strong>
+            <span>{{ gratewizard.subtitle }}</span>
+          </span>
+          <span class="i-lucide-arrow-up-right h-4 w-4" aria-hidden="true" />
+        </button>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HomeAxis } from '~/composables/useHomeData'
+
+withDefaults(defineProps<{
+  axes: HomeAxis[]
+  lpk?: { name: string, fullName: string, text: string, to: string }
+  bouquet?: { title: string, inService: { name?: string }[], stacks: unknown[] } | null
+  gratewizard?: { title: string, subtitle: string }
+  showPromise?: boolean
+  anchors?: boolean
+}>(), {
+  showPromise: true,
+  anchors: false,
+})
+
+const emit = defineEmits<{
+  'open-player': []
+  'open-pdf': []
+}>()
+
+const uid = useId()
+const { launch } = useGrateWizard()
+
+function onAction(id: string) {
+  if (id === 'open-player') emit('open-player')
+  else if (id === 'open-pdf') emit('open-pdf')
+}
+</script>
+
+<style scoped>
+.toolbox-wrap {
+  container-type: inline-size;
+}
+
+.toolbox {
+  display: grid;
+  gap: 1.25rem;
+}
+
+@container (min-width: 60rem) {
+  .toolbox:not(.toolbox--single) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    align-items: start;
+  }
+}
+
+.toolbox-axis {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1.25rem;
+  border-radius: 16px;
+  background: hsl(var(--color-surface));
+  box-shadow: inset 0 3px 0 hsl(var(--hue));
+  scroll-margin-top: calc(var(--header-height) + 1rem);
+}
+
+.toolbox-lever {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: hsl(var(--hue));
+}
+
+.toolbox-title {
+  margin: 0.15rem 0 0;
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: 1.3rem;
+  letter-spacing: -0.02em;
+  color: hsl(var(--color-text));
+}
+
+.toolbox-title a:hover {
+  color: hsl(var(--hue));
+}
+
+.toolbox-promise {
+  margin: 0.35rem 0 0;
+  font-size: 0.9rem;
+  line-height: 1.45;
+  color: hsl(var(--color-text) / 0.7);
+}
+
+.toolbox-tools {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* LPK */
+.toolbox-lpk {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.9rem;
+  border-radius: 12px;
+  background: hsl(var(--hue) / 0.1);
+  color: hsl(var(--color-text));
+  transition: transform 0.12s ease;
+}
+
+.toolbox-lpk:hover {
+  transform: translateY(-3px);
+}
+
+.toolbox-lpk-head {
+  font-size: 0.82rem;
+  line-height: 1.4;
+  color: hsl(var(--color-text) / 0.7);
+}
+
+.toolbox-lpk-head strong {
+  font-family: var(--font-display);
+  font-size: 1rem;
+  color: hsl(var(--hue));
+}
+
+.toolbox-lpk-stacks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+
+.toolbox-lpk-stack {
+  padding: 0.15rem 0.55rem;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  background: hsl(var(--color-bg) / 0.75);
+}
+
+.toolbox-lpk-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: hsl(var(--hue));
+}
+
+/* grateWizard */
+.toolbox-gw {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.85rem 0.9rem;
+  border-radius: 12px;
+  text-align: left;
+  color: hsl(var(--hue));
+  background: hsl(var(--hue) / 0.1);
+  transition: transform 0.12s ease;
+}
+
+.toolbox-gw:hover {
+  transform: translateY(-3px);
+}
+
+.toolbox-gw-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.8rem;
+  color: hsl(var(--color-text) / 0.7);
+}
+
+.toolbox-gw-text strong {
+  font-family: var(--font-display);
+  font-size: 1rem;
+  color: hsl(var(--color-text));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toolbox-lpk, .toolbox-gw { transition: none; }
+}
+</style>

app/components/home/HomeVariantConsole.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="va">
+    <!-- Hero : the headline, and the three cursors to push -->
+    <section class="va-hero">
+      <HomeShadoks />
+      <div class="container-content va-hero-grid">
+        <div class="va-intro">
+          <h1 class="va-h1">
+            <span class="va-h1-a">{{ heading[0] }}</span>
+            <span class="va-h1-b">{{ heading[1] }}</span>
+          </h1>
+          <p class="va-axes">{{ heading[3] }}</p>
+          <p class="va-means">{{ heading[4] }}</p>
+          <p v-if="hero.approach" class="va-approach">{{ hero.approach }}</p>
+        </div>
+
+        <div class="va-console">
+          <p class="va-console-title">{{ heading[2] }}</p>
+          <HomeConsole
+            v-model="active"
+            :axes="axes"
+            :stacks="bouquet?.inService"
+            :stacks-to="lpk?.to"
+            :stacks-label="lpk ? `En service chez ${lpk.name} :` : 'En service :'"
+          />
+        </div>
+      </div>
+    </section>
+
+    <!-- Pourquoi -->
+    <section class="va-band">
+      <div class="container-content">
+        <HomeCitations :lines="hero.citations ?? []" />
+      </div>
+    </section>
+
+    <!-- Le format -->
+    <section class="va-section">
+      <div class="container-content">
+        <HomeFormat
+          :format="format"
+          :book="book"
+          :evenement="evenement"
+          :hero="hero"
+          @open-player="$emit('open-player')"
+          @open-pdf="$emit('open-pdf')"
+        />
+      </div>
+    </section>
+
+    <!-- La boîte à outils -->
+    <section class="va-section va-section--tools">
+      <div class="container-content">
+        <h2 class="va-h2">La boîte à outils</h2>
+        <HomeToolbox
+          :axes="axes"
+          :lpk="lpk"
+          :bouquet="bouquet"
+          :gratewizard="gratewizard"
+          anchors
+          @open-player="$emit('open-player')"
+          @open-pdf="$emit('open-pdf')"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AxisKey } from '~/composables/useHomeData'
+
+defineEmits<{
+  'open-player': []
+  'open-pdf': []
+}>()
+
+const { hero, axes, lpk, bouquet, evenement, book, format, gratewizard } = await useHomeData()
+const heading = computed<string[]>(() => hero.value.heading ?? [])
+const active = ref<AxisKey>('numerique')
+</script>
+
+<style scoped>
+.va-hero {
+  position: relative;
+  overflow: hidden;
+  padding: clamp(2.5rem, 6vw, 5rem) 1rem clamp(2.5rem, 5vw, 4rem);
+}
+
+.va-hero-grid {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 2.5rem;
+  align-items: center;
+}
+
+@media (min-width: 1024px) {
+  .va-hero-grid {
+    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+    gap: 4rem;
+  }
+}
+
+.va-h1 {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-display);
+  letter-spacing: -0.035em;
+  line-height: 0.98;
+}
+
+.va-h1-a {
+  font-weight: 800;
+  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
+  color: hsl(var(--color-text));
+}
+
+.va-h1-b {
+  margin-top: 0.3rem;
+  font-weight: 400;
+  font-size: clamp(1.6rem, 3.8vw, 2.7rem);
+  letter-spacing: -0.025em;
+  color: hsl(var(--color-text) / 0.55);
+}
+
+.va-axes {
+  margin: 1.75rem 0 0;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: hsl(var(--color-text) / 0.7);
+}
+
+.va-means {
+  margin: 0.35rem 0 0;
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 1.05rem;
+  color: hsl(var(--color-text) / 0.6);
+}
+
+.va-approach {
+  margin: 1.75rem 0 0;
+  max-width: 26rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: hsl(var(--color-text) / 0.8);
+}
+
+.va-approach::after {
+  content: ' ↓';
+  color: hsl(var(--color-primary));
+}
+
+@media (min-width: 1024px) {
+  .va-approach::after { content: ' →'; }
+}
+
+.va-console-title {
+  margin: 0 0 0.75rem;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: hsl(var(--color-accent));
+}
+
+.va-band {
+  padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
+  background: hsl(var(--color-surface) / 0.55);
+}
+
+.va-section {
+  padding: clamp(3rem, 7vw, 5.5rem) 1rem 0;
+}
+
+.va-h2 {
+  margin: 0 0 1.5rem;
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  color: hsl(var(--color-text));
+}
+</style>

app/components/home/HomeVariantEtabli.vue

@@ -0,0 +1,492 @@
+<template>
+  <div class="vc">
+    <section class="vc-hero">
+      <HomeShadoks />
+      <div class="container-content vc-hero-inner">
+        <h1 class="vc-h1">
+          {{ heading[0] }} <span>{{ heading[1] }}</span>
+        </h1>
+        <p v-if="format" class="vc-lede">{{ format.text }}</p>
+      </div>
+    </section>
+
+    <section class="container-content vc-bench" aria-label="La boîte à outils">
+      <!-- Filters -->
+      <div class="vc-filters">
+        <div class="vc-chips" role="group" aria-label="Filtrer par axe">
+          <button
+            type="button"
+            class="vc-chip"
+            :class="{ 'vc-chip--on': filter === 'all' }"
+            :aria-pressed="filter === 'all'"
+            @click="filter = 'all'"
+          >
+            Tout
+          </button>
+          <button
+            v-for="axis in axes"
+            :key="axis.key"
+            type="button"
+            class="vc-chip"
+            :class="{ 'vc-chip--on': filter === axis.key }"
+            :style="{ '--hue': `var(${axis.hue})` }"
+            :aria-pressed="filter === axis.key"
+            @click="filter = axis.key"
+          >
+            <span class="vc-chip-dot" aria-hidden="true" />
+            {{ axis.short }}
+          </button>
+        </div>
+        <label class="vc-toggle">
+          <input v-model="onlyService" type="checkbox">
+          <span>{{ bouquet?.statuses?.service ?? 'En service' }} seulement</span>
+        </label>
+      </div>
+
+      <!-- Axis by axis -->
+      <div v-for="axis in visibleAxes" :key="axis.key" class="vc-axis" :style="{ '--hue': `var(${axis.hue})` }">
+        <header class="vc-axis-head">
+          <p class="vc-axis-lever">{{ axis.lever }}</p>
+          <h2 class="vc-axis-title">
+            <NuxtLink :to="axis.to">{{ axis.title }}</NuxtLink>
+          </h2>
+          <p v-if="axis.promise" class="vc-axis-promise">{{ axis.promise }}</p>
+        </header>
+
+        <div class="vc-grid">
+          <HomeToolItem
+            v-for="tool in toolsOf(axis)"
+            :key="tool.label"
+            :tool="tool"
+            class="vc-card"
+            @action="onAction"
+          />
+          <button
+            v-if="axis.key === 'economie' && gratewizard"
+            type="button"
+            class="vc-card vc-gw"
+            @click="launch()"
+          >
+            <span class="i-lucide-sparkles h-5 w-5" aria-hidden="true" />
+            <strong>{{ gratewizard.title }}</strong>
+            <span>{{ gratewizard.subtitle }}</span>
+          </button>
+          <p v-if="!toolsOf(axis).length" class="vc-empty">
+            Tout est en gestation sur cet axe —
+            <button type="button" class="vc-link" @click="onlyService = false">afficher aussi les outils en gestation</button>.
+          </p>
+        </div>
+
+        <!-- LPK bouquet, category by category -->
+        <div v-if="axis.key === 'numerique' && bouquet && lpk" class="vc-bouquet">
+          <p class="vc-bouquet-head">
+            <strong>{{ lpk.name }}</strong> {{ lpk.fullName }} — {{ lpk.text }}
+          </p>
+          <ul class="vc-legend" aria-label="Légende des statuts">
+            <li v-for="(label, key) in bouquet.statuses" :key="key">
+              <span class="vc-dot" :class="`vc-dot--${key}`" aria-hidden="true" />{{ label }}
+            </li>
+          </ul>
+          <div class="vc-cats">
+            <div v-for="cat in bouquet.categories" v-show="stacksOf(cat).length" :key="cat.label" class="vc-cat">
+              <p class="vc-cat-label">
+                <span :class="`i-lucide-${cat.icon}`" class="h-3.5 w-3.5" aria-hidden="true" />
+                {{ cat.label }}
+              </p>
+              <ul>
+                <li v-for="s in stacksOf(cat)" :key="s.role + s.name">
+                  <span class="vc-dot" :class="`vc-dot--${s.status}`" :title="bouquet.statuses[s.status]" />
+                  <span class="vc-stack-role">{{ s.role }}</span>
+                  <a v-if="s.url && s.name" :href="s.url" target="_blank" rel="noopener" class="vc-stack-name">{{ s.name }}</a>
+                  <span v-else-if="s.name" class="vc-stack-name">{{ s.name }}</span>
+                  <span class="sr-only">— {{ bouquet.statuses[s.status] }}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <NuxtLink :to="lpk.to" class="vc-more">
+            {{ bouquet.title }}
+            <span class="i-lucide-arrow-right h-4 w-4" aria-hidden="true" />
+          </NuxtLink>
+        </div>
+      </div>
+    </section>
+
+    <section class="vc-section">
+      <div class="container-content">
+        <HomeCitations :lines="hero.citations ?? []" class="vc-cites" />
+        <HomeFormat
+          :format="format"
+          :book="book"
+          :evenement="evenement"
+          :hero="hero"
+          :show-header="false"
+          @open-player="$emit('open-player')"
+          @open-pdf="$emit('open-pdf')"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AxisKey, HomeAxis, HomeStack } from '~/composables/useHomeData'
+
+const emit = defineEmits<{
+  'open-player': []
+  'open-pdf': []
+}>()
+
+const { hero, axes, lpk, bouquet, evenement, book, format, gratewizard } = await useHomeData()
+const heading = computed<string[]>(() => hero.value.heading ?? [])
+const { launch } = useGrateWizard()
+
+const filter = ref<'all' | AxisKey>('all')
+const onlyService = ref(false)
+
+const visibleAxes = computed(() =>
+  filter.value === 'all' ? axes.value : axes.value.filter(a => a.key === filter.value))
+
+function toolsOf(axis: HomeAxis) {
+  return onlyService.value ? axis.items.filter(t => !t.gestation) : axis.items
+}
+
+function stacksOf(cat: { items: (HomeStack | string)[] }) {
+  const items = cat.items.filter((i): i is HomeStack => typeof i !== 'string')
+  return onlyService.value ? items.filter(i => i.status === 'service') : items
+}
+
+function onAction(id: string) {
+  if (id === 'open-player') emit('open-player')
+  else if (id === 'open-pdf') emit('open-pdf')
+}
+</script>
+
+<style scoped>
+.vc-hero {
+  position: relative;
+  overflow: hidden;
+  padding: clamp(2.5rem, 6vw, 4.5rem) 1rem clamp(1.5rem, 3vw, 2.5rem);
+}
+
+.vc-hero-inner {
+  position: relative;
+  z-index: 1;
+}
+
+.vc-h1 {
+  margin: 0;
+  max-width: 20ch;
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: clamp(2.2rem, 5.6vw, 4rem);
+  letter-spacing: -0.035em;
+  line-height: 1;
+  color: hsl(var(--color-text));
+}
+
+.vc-h1 span {
+  font-weight: 400;
+  color: hsl(var(--color-text) / 0.55);
+}
+
+.vc-lede {
+  margin: 1.25rem 0 0;
+  max-width: 40rem;
+  font-size: 1.1rem;
+  line-height: 1.5;
+  color: hsl(var(--color-text) / 0.75);
+}
+
+.vc-bench {
+  padding: 0 1rem;
+}
+
+/* Filters */
+.vc-filters {
+  position: sticky;
+  top: var(--header-height);
+  z-index: 5;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin: 0 -1rem 1.5rem;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--color-bg) / 0.92);
+  backdrop-filter: blur(10px);
+}
+
+.vc-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.vc-chip {
+  --hue: var(--color-text);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-height: 2.25rem;
+  padding: 0.35rem 0.95rem;
+  border-radius: 20px;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 0.9rem;
+  color: hsl(var(--color-text) / 0.75);
+  background: hsl(var(--color-surface));
+  transition: transform 0.1s ease, background 0.2s ease;
+}
+
+.vc-chip:hover { transform: translateY(-1px); }
+.vc-chip:active { transform: translateY(0); }
+
+.vc-chip--on {
+  color: hsl(var(--color-bg));
+  background: hsl(var(--hue));
+}
+
+.vc-chip-dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  background: hsl(var(--hue));
+}
+
+.vc-chip--on .vc-chip-dot {
+  background: hsl(var(--color-bg));
+}
+
+.vc-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.25rem;
+  font-size: 0.85rem;
+  color: hsl(var(--color-text) / 0.75);
+  cursor: pointer;
+}
+
+.vc-toggle input {
+  width: 1.1rem;
+  height: 1.1rem;
+  accent-color: hsl(var(--color-primary));
+}
+
+/* Axis */
+.vc-axis + .vc-axis {
+  margin-top: 3rem;
+}
+
+.vc-axis-head {
+  display: grid;
+  gap: 0.2rem;
+  margin-bottom: 1rem;
+  padding-left: 0.9rem;
+  box-shadow: inset 3px 0 0 hsl(var(--hue));
+}
+
+.vc-axis-lever {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: hsl(var(--hue));
+}
+
+.vc-axis-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: clamp(1.4rem, 3vw, 1.9rem);
+  letter-spacing: -0.025em;
+  color: hsl(var(--color-text));
+}
+
+.vc-axis-title a:hover { color: hsl(var(--hue)); }
+
+.vc-axis-promise {
+  margin: 0.2rem 0 0;
+  max-width: 44rem;
+  font-size: 0.98rem;
+  line-height: 1.45;
+  color: hsl(var(--color-text) / 0.72);
+}
+
+.vc-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+@media (min-width: 768px) {
+  .vc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (min-width: 1024px) {
+  .vc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+.vc-grid > .vc-card {
+  background: hsl(var(--color-surface));
+  border-radius: 16px;
+  padding: 1.1rem;
+}
+
+.vc-gw {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.3rem;
+  text-align: left;
+  font-size: 0.85rem;
+  color: hsl(var(--color-text) / 0.7);
+  background: hsl(var(--hue) / 0.1);
+  transition: transform 0.12s ease;
+}
+
+.vc-gw:hover { transform: translateY(-3px); }
+
+.vc-gw > span:first-child { color: hsl(var(--hue)); }
+
+.vc-gw strong {
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  color: hsl(var(--color-text));
+}
+
+.vc-empty {
+  margin: 0;
+  font-size: 0.9rem;
+  color: hsl(var(--color-text) / 0.6);
+}
+
+.vc-link {
+  color: hsl(var(--hue));
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Bouquet */
+.vc-bouquet {
+  margin-top: 1rem;
+  padding: 1.25rem;
+  border-radius: 16px;
+  background: hsl(var(--hue) / 0.08);
+}
+
+.vc-bouquet-head {
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.45;
+  color: hsl(var(--color-text) / 0.75);
+}
+
+.vc-bouquet-head strong {
+  font-family: var(--font-display);
+  font-size: 1.1rem;
+  color: hsl(var(--hue));
+}
+
+.vc-legend {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem 1rem;
+  margin: 0.75rem 0 1rem;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: hsl(var(--color-text) / 0.6);
+}
+
+.vc-legend li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.vc-cats {
+  columns: 16rem;
+  column-gap: 1.5rem;
+}
+
+.vc-cat {
+  break-inside: avoid;
+  margin-bottom: 1.1rem;
+}
+
+.vc-cat-label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0 0 0.4rem;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 0.9rem;
+  color: hsl(var(--color-text));
+}
+
+.vc-cat ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.2rem;
+}
+
+.vc-cat li {
+  display: grid;
+  grid-template-columns: 0.5rem minmax(0, 1fr);
+  column-gap: 0.45rem;
+  align-items: baseline;
+  font-size: 0.82rem;
+  line-height: 1.4;
+}
+
+.vc-dot {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  align-self: center;
+}
+
+.vc-dot--service { background: hsl(var(--hue)); }
+.vc-dot--catalogue { box-shadow: inset 0 0 0 1.5px hsl(var(--hue)); }
+.vc-dot--avenir { box-shadow: inset 0 0 0 1px hsl(var(--color-text) / 0.3); }
+
+.vc-cat li > .vc-dot { grid-row: 1; }
+.vc-cat li > :not(.vc-dot) { grid-column: 2; }
+
+.vc-stack-role { color: hsl(var(--color-text) / 0.6); }
+
+.vc-stack-name {
+  font-weight: 700;
+  color: hsl(var(--color-text));
+}
+
+a.vc-stack-name:hover { color: hsl(var(--hue)); }
+
+.vc-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-family: var(--font-display);
+  font-weight: 700;
+  color: hsl(var(--hue));
+}
+
+.vc-section {
+  padding: clamp(3rem, 7vw, 5rem) 1rem 0;
+}
+
+.vc-cites {
+  margin-bottom: 2.5rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vc-chip, .vc-gw { transition: none; }
+}
+</style>

app/components/home/HomeVariantParcours.vue

@@ -0,0 +1,321 @@
+<template>
+  <div class="vb">
+    <section class="vb-hero">
+      <HomeShadoks />
+      <div class="container-content vb-hero-inner">
+        <h1 class="vb-h1">
+          <span class="vb-h1-a">{{ heading[0] }}</span>
+          <span class="vb-h1-b">{{ heading[1] }}</span>
+        </h1>
+        <p class="vb-axes">{{ heading[3] }}</p>
+        <a :href="`#${steps[0]?.id}`" class="vb-start">
+          {{ heading[2] }}
+          <span class="i-lucide-arrow-down h-4 w-4" aria-hidden="true" />
+        </a>
+      </div>
+    </section>
+
+    <div class="container-content vb-layout">
+      <!-- Step rail: the onboarding is a real sequence, hence the numbers -->
+      <nav class="vb-rail" aria-label="Parcours">
+        <ol>
+          <li v-for="(step, i) in steps" :key="step.id">
+            <a
+              :href="`#${step.id}`"
+              class="vb-rail-link"
+              :class="{ 'vb-rail-link--on': current === step.id, 'vb-rail-link--done': i < currentIndex }"
+              :aria-current="current === step.id ? 'step' : undefined"
+            >
+              <span class="vb-rail-n">{{ i + 1 }}</span>
+              <span class="vb-rail-label">{{ step.label }}</span>
+            </a>
+          </li>
+        </ol>
+      </nav>
+
+      <div ref="stepsEl" class="vb-steps">
+        <section :id="steps[0]!.id" class="vb-step">
+          <p class="vb-step-n">1 / {{ steps.length }}</p>
+          <HomeCitations :lines="hero.citations ?? []" />
+        </section>
+
+        <section :id="steps[1]!.id" class="vb-step">
+          <p class="vb-step-n">2 / {{ steps.length }}</p>
+          <h2 class="vb-h2">{{ steps[1]!.label }}</h2>
+          <HomeConsole
+            v-model="active"
+            :axes="axes"
+            :stacks="bouquet?.inService"
+            :stacks-to="lpk?.to"
+            :stacks-label="lpk ? `En service chez ${lpk.name} :` : 'En service :'"
+            compact
+          />
+        </section>
+
+        <section :id="steps[2]!.id" class="vb-step">
+          <p class="vb-step-n">3 / {{ steps.length }}</p>
+          <h2 class="vb-h2">{{ steps[2]!.label }}</h2>
+          <HomeToolbox
+            :axes="axes"
+            :lpk="lpk"
+            :bouquet="bouquet"
+            :gratewizard="gratewizard"
+            anchors
+            @open-player="$emit('open-player')"
+            @open-pdf="$emit('open-pdf')"
+          />
+        </section>
+
+        <section :id="steps[3]!.id" class="vb-step">
+          <p class="vb-step-n">4 / {{ steps.length }}</p>
+          <HomeFormat
+            :format="format"
+            :book="book"
+            :evenement="evenement"
+            :hero="hero"
+            @open-player="$emit('open-player')"
+            @open-pdf="$emit('open-pdf')"
+          />
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AxisKey } from '~/composables/useHomeData'
+
+defineEmits<{
+  'open-player': []
+  'open-pdf': []
+}>()
+
+const { hero, axes, lpk, bouquet, evenement, book, format, gratewizard } = await useHomeData()
+const heading = computed<string[]>(() => hero.value.heading ?? [])
+const active = ref<AxisKey>('numerique')
+
+// Step labels are existing sentences of home.yml
+function tidy(s = '') {
+  const t = s.replace(/^[—\s]+|[—\s.]+$/g, '')
+  return t.charAt(0).toUpperCase() + t.slice(1)
+}
+
+const steps = computed(() => [
+  { id: 'emancipation', label: tidy(hero.value.citations?.[0]) },
+  { id: 'en-amont', label: tidy(hero.value.approach) },
+  { id: 'les-moyens', label: tidy(heading.value[4]) },
+  { id: 'le-format', label: tidy(format.value?.title) },
+])
+
+const stepsEl = ref<HTMLElement | null>(null)
+const current = ref('emancipation')
+const currentIndex = computed(() => steps.value.findIndex(s => s.id === current.value))
+
+onMounted(() => {
+  const observer = new IntersectionObserver((entries) => {
+    for (const e of entries) {
+      if (e.isIntersecting) current.value = e.target.id
+      // Scrolling back up past a step: the previous one becomes current
+      else if (e.target.id === current.value && e.boundingClientRect.top > 0) {
+        const i = steps.value.findIndex(s => s.id === e.target.id)
+        current.value = steps.value[Math.max(0, i - 1)]!.id
+      }
+    }
+  }, { rootMargin: '-45% 0px -50% 0px' })
+  stepsEl.value?.querySelectorAll('.vb-step').forEach(el => observer.observe(el))
+  onUnmounted(() => observer.disconnect())
+})
+</script>
+
+<style scoped>
+.vb-hero {
+  position: relative;
+  overflow: hidden;
+  padding: clamp(3rem, 8vw, 6rem) 1rem clamp(2rem, 5vw, 3.5rem);
+}
+
+.vb-hero-inner {
+  position: relative;
+  z-index: 1;
+}
+
+.vb-h1 {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-display);
+  letter-spacing: -0.035em;
+  line-height: 0.98;
+}
+
+.vb-h1-a {
+  font-weight: 800;
+  font-size: clamp(2.4rem, 7vw, 5.2rem);
+  color: hsl(var(--color-text));
+  max-width: 14ch;
+}
+
+.vb-h1-b {
+  margin-top: 0.4rem;
+  font-weight: 400;
+  font-size: clamp(1.6rem, 4vw, 2.8rem);
+  color: hsl(var(--color-text) / 0.55);
+}
+
+.vb-axes {
+  margin: 1.5rem 0 0;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: hsl(var(--color-text) / 0.7);
+}
+
+.vb-start {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+  margin-top: 1.75rem;
+  padding: 0.6rem 1.3rem;
+  border-radius: 20px;
+  font-family: var(--font-display);
+  font-weight: 700;
+  color: hsl(var(--color-bg));
+  background: hsl(var(--color-text));
+  transition: transform 0.1s ease;
+}
+
+.vb-start:hover { transform: translateY(-1px); }
+.vb-start:active { transform: translateY(0); }
+
+.vb-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1.5rem;
+  padding: 0 1rem;
+}
+
+@media (min-width: 1024px) {
+  .vb-layout {
+    grid-template-columns: 15rem minmax(0, 1fr);
+    gap: 3rem;
+  }
+}
+
+/* Rail */
+.vb-rail {
+  position: sticky;
+  top: var(--header-height);
+  z-index: 5;
+  align-self: start;
+  margin: 0 -1rem;
+  padding: 0.5rem 1rem;
+  background: hsl(var(--color-bg) / 0.92);
+  backdrop-filter: blur(10px);
+}
+
+.vb-rail ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.25rem;
+  overflow-x: auto;
+}
+
+@media (min-width: 1024px) {
+  .vb-rail {
+    top: calc(var(--header-height) + 2rem);
+    margin: 0;
+    padding: 0;
+    background: none;
+    backdrop-filter: none;
+  }
+
+  .vb-rail ol {
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+}
+
+.vb-rail-link {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 2.25rem;
+  padding: 0.35rem 0.7rem 0.35rem 0.35rem;
+  border-radius: 20px;
+  white-space: nowrap;
+  font-size: 0.85rem;
+  color: hsl(var(--color-text) / 0.55);
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+@media (min-width: 1024px) {
+  .vb-rail-link { white-space: normal; line-height: 1.3; }
+}
+
+.vb-rail-link:hover {
+  background: hsl(var(--color-text) / 0.05);
+}
+
+.vb-rail-n {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 50%;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  box-shadow: inset 0 0 0 1.5px hsl(var(--color-text) / 0.25);
+}
+
+.vb-rail-link--done .vb-rail-n {
+  box-shadow: none;
+  background: hsl(var(--color-text) / 0.12);
+}
+
+.vb-rail-link--on {
+  color: hsl(var(--color-text));
+  font-weight: 700;
+}
+
+.vb-rail-link--on .vb-rail-n {
+  box-shadow: none;
+  color: hsl(var(--color-bg));
+  background: hsl(var(--color-primary));
+}
+
+/* Steps */
+.vb-step {
+  padding: clamp(2rem, 5vw, 3.5rem) 0;
+  scroll-margin-top: calc(var(--header-height) + 3.5rem);
+}
+
+.vb-step + .vb-step {
+  box-shadow: 0 -1px 0 hsl(var(--color-text) / 0.07);
+}
+
+.vb-step-n {
+  margin: 0 0 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: hsl(var(--color-primary));
+}
+
+.vb-h2 {
+  margin: 0 0 1.5rem;
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  color: hsl(var(--color-text));
+  max-width: 22ch;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vb-start, .vb-rail-link { transition: none; }
+}
+</style>

app/components/home/HomeVariantSwitch.vue

@@ -0,0 +1,71 @@
+<template>
+  <nav class="vswitch" aria-label="Variantes de l'accueil">
+    <span class="vswitch-label">Variante</span>
+    <NuxtLink
+      v-for="v in variants"
+      :key="v.id"
+      :to="{ path: '/', query: { v: v.id } }"
+      class="vswitch-item"
+      :class="{ 'vswitch-item--on': current === v.id }"
+      :aria-current="current === v.id ? 'page' : undefined"
+    >
+      {{ v.label }}
+    </NuxtLink>
+  </nav>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  current: string
+}>()
+
+const variants = [
+  { id: 'a', label: 'A · Console' },
+  { id: 'b', label: 'B · Parcours' },
+  { id: 'c', label: 'C · Établi' },
+  { id: '0', label: 'Actuelle' },
+]
+</script>
+
+<style scoped>
+.vswitch {
+  position: fixed;
+  left: 50%;
+  bottom: 1rem;
+  z-index: 60;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.3rem;
+  border-radius: 20px;
+  background: hsl(var(--color-text));
+  box-shadow: 0 10px 30px -10px hsl(0 0% 0% / 0.5);
+  font-size: 0.78rem;
+  max-width: calc(100vw - 1rem);
+  overflow-x: auto;
+}
+
+.vswitch-label {
+  padding: 0 0.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  color: hsl(var(--color-bg) / 0.6);
+}
+
+.vswitch-item {
+  padding: 0.35rem 0.75rem;
+  border-radius: 20px;
+  white-space: nowrap;
+  color: hsl(var(--color-bg) / 0.85);
+}
+
+.vswitch-item:hover {
+  background: hsl(var(--color-bg) / 0.12);
+}
+
+.vswitch-item--on {
+  color: hsl(var(--color-text));
+  background: hsl(var(--color-bg));
+}
+</style>

app/components/layout/TheHeader.vue

@@ -27,10 +27,11 @@
         <!-- Autonomie : prefix + axis buttons -->
         <span class="nav-prefix">Autonomie&thinsp;:</span>
         <NuxtLink
-          v-for="item in axes"
+          v-for="(item, i) in axes"
           :key="item.to"
           :to="item.to"
-          class="btn-ghost text-sm"
+          class="btn-ghost text-sm nav-axis"
+          :style="{ '--hue': `var(${AXIS_HUES[i] ?? '--color-primary'})` }"
           active-class="!text-[hsl(var(--color-text))] bg-[hsl(var(--color-text)/0.06)]"
         >
           {{ item.label }}
@@ -73,6 +74,9 @@ 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])
+
+// Same order as navigation.axes in site.yml: numérique, économique, citoyenne
+const AXIS_HUES = ['--axis-num', '--axis-eco', '--axis-cit']
 </script>
 
 <style scoped>
@@ -90,7 +94,7 @@ const allNav = computed(() => [...axes.value, ...extra.value])
 }
 
 .logo-text {
-  font-family: var(--font-display);
+  font-family: var(--font-logo);
   font-weight: 400;
   font-size: 1.25rem;
   letter-spacing: 0.04em;
@@ -110,6 +114,15 @@ const allNav = computed(() => [...axes.value, ...extra.value])
   margin-right: 0.125rem;
 }
 
+.nav-axis::before {
+  content: '';
+  width: 0.45rem;
+  height: 0.45rem;
+  margin-right: 0.45rem;
+  border-radius: 50%;
+  background: hsl(var(--hue));
+}
+
 .nav-sep {
   display: block;
   width: 1px;

app/composables/useHomeData.ts

@@ -0,0 +1,144 @@
+// Normalised view of the home content, shared by the three home variants.
+// Everything comes from YAML (site/pages/home.yml, site/site.yml,
+// site/pages/evenement.yml, site/pages/numerique/cloud-libre.yml) — no copy here.
+
+export type AxisKey = 'numerique' | 'economie' | 'politique'
+export type StackStatus = 'service' | 'catalogue' | 'avenir'
+
+export interface HomeAction {
+  id: string
+  label: string
+  icon: string
+  highlight?: boolean
+  secondary?: boolean
+  to?: string
+  href?: string
+}
+
+export interface HomeTool {
+  label: string
+  description: string
+  to?: string
+  href?: string
+  gestation?: boolean
+  icon?: string
+  presentation?: { title: string, text: string }
+  actions?: HomeAction[]
+}
+
+export interface HomeStack {
+  role: string
+  name?: string
+  status: StackStatus
+  url?: string
+}
+
+export interface HomeAxis {
+  key: AxisKey
+  /** Short label as used in the navigation ("numérique", "économique", "citoyenne") */
+  short: string
+  title: string
+  icon: string
+  to: string
+  /** What is "le plus en amont" on this axis (hero.axes) */
+  lever: string
+  promise: string
+  /** CSS custom property holding the axis hue */
+  hue: string
+  items: HomeTool[]
+}
+
+const AXIS_META: Record<AxisKey, { heroLabel: string, to: string, hue: string, short: string }> = {
+  numerique: { heroLabel: 'numérique', to: '/numerique', hue: '--axis-num', short: 'numérique' },
+  economie: { heroLabel: 'économie', to: '/economique', hue: '--axis-eco', short: 'économique' },
+  politique: { heroLabel: 'citoyenne', to: '/citoyenne', hue: '--axis-cit', short: 'citoyenne' },
+}
+
+export const AXIS_ORDER: AxisKey[] = ['numerique', 'economie', 'politique']
+
+export async function useHomeData() {
+  const [{ data: home }, { data: site }, { data: event }, { data: cloud }] = await Promise.all([
+    usePageContent('home'),
+    useSiteContent(),
+    usePageContent('evenement'),
+    usePageContent('numerique/cloud-libre'),
+  ])
+
+  const hero = computed(() => (home.value as any)?.hero ?? {})
+
+  const axes = computed<HomeAxis[]>(() => {
+    const raw = (home.value as any)?.axes ?? {}
+    const levers: { label: string, value: string }[] = hero.value.axes ?? []
+    return AXIS_ORDER.filter(k => raw[k]).map((key) => {
+      const meta = AXIS_META[key]
+      return {
+        key,
+        short: meta.short,
+        title: raw[key].title,
+        icon: raw[key].icon,
+        to: meta.to,
+        lever: levers.find(l => l.label === meta.heroLabel)?.value ?? '',
+        promise: raw[key].promise ?? '',
+        hue: meta.hue,
+        items: raw[key].items ?? [],
+      }
+    })
+  })
+
+  const lpk = computed(() => (site.value as any)?.lpk as
+    { name: string, fullName: string, text: string, role: string, to: string } | undefined)
+
+  /** Bouquet sweethomeCloud, flattened — the stacks served by LPK */
+  const bouquet = computed(() => {
+    const section = ((cloud.value as any)?.sections ?? []).find((s: any) => s.type === 'territoire')
+    const b = section?.bouquet
+    if (!b) return null
+    const stacks: (HomeStack & { category: string })[] = []
+    for (const cat of b.categories ?? []) {
+      for (const item of cat.items ?? []) {
+        if (typeof item === 'string') continue
+        stacks.push({ ...item, category: cat.label })
+      }
+    }
+    return {
+      title: b.title as string,
+      statuses: (b.statuses ?? {}) as Record<StackStatus, string>,
+      categories: (b.categories ?? []) as { label: string, icon: string, items: HomeStack[] }[],
+      stacks,
+      inService: stacks.filter(s => s.status === 'service' && s.name),
+    }
+  })
+
+  const evenement = computed(() => {
+    const e = event.value as any
+    const teaser = (home.value as any)?.evenement
+    if (!e && !teaser) return null
+    const politique = (e?.axes ?? []).find((a: any) => a.label === 'Politique')
+    return {
+      to: teaser?.to ?? '/evenement',
+      title: e?.title ?? teaser?.title,
+      teaser: teaser ? `${teaser.title} ${teaser.subtitle}` : '',
+      subtitle: e?.subtitle ?? '',
+      tagline: e?.tagline ?? '',
+      leitmotiv: e?.leitmotiv ?? '',
+      description: e?.description ?? '',
+      gestation: e?.gestation ?? teaser?.gestation,
+      config: (e?.config ?? []) as { icon: string, label: string, detail: string }[],
+      espaces: (e?.espaces ?? []) as { icon: string, label: string, desc: string }[],
+      /** "Autonomie d'un bassin de vie — accessible et reproductible" */
+      reproduction: (politique?.items?.[0] as string) ?? '',
+    }
+  })
+
+  return {
+    home,
+    hero,
+    axes,
+    lpk,
+    bouquet,
+    evenement,
+    book: computed(() => (home.value as any)?.book),
+    format: computed(() => (home.value as any)?.format as { title: string, text: string } | undefined),
+    gratewizard: computed(() => (home.value as any)?.gratewizard),
+  }
+}

app/composables/useSiteContent.ts

@@ -14,6 +14,13 @@ interface SiteContent {
     credits: string
     links: NavItem[]
   }
+  lpk?: {
+    name: string
+    fullName: string
+    text: string
+    role: string
+    to: string
+  }
   gratewizard: {
     url: string
     popup: {

app/pages/citoyenne/[slug].vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section-padding">
+  <div class="axis-scope axis-scope--cit section-padding">
     <div class="container-content">
 
       <!-- Header -->

app/pages/citoyenne/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative overflow-hidden section-padding">
+  <div class="axis-scope axis-scope--cit relative overflow-hidden section-padding">
     <!-- 1. Shadok Capitaine (top-left, profile — at ship's wheel, telescope) -->
     <svg class="shadok shadok-capitaine" viewBox="0 0 170 210" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g>
@@ -421,8 +421,8 @@ useSeoPage({
 }
 
 .item-card {
-  border-radius: 0.75rem;
+  border-radius: 16px;
-  border: 1px solid hsl(var(--color-text) / 0.08);
+  border: none;
   background: hsl(var(--color-surface));
   transition: border-color 0.2s;
   overflow: hidden;

app/pages/economique/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative overflow-hidden section-padding">
+  <div class="axis-scope axis-scope--eco relative overflow-hidden section-padding">
     <!-- Shadok boulangère (top-left, walking profile, carrying bread tray) -->
     <svg class="shadok shadok-boulangere" viewBox="0 0 160 200" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -469,8 +469,8 @@ const showPdfReader = ref(false)
 .item-card {
   display: block;
   padding: 1.5rem;
-  border-radius: 0.75rem;
+  border-radius: 16px;
-  border: 1px solid hsl(var(--color-text) / 0.08);
+  border: none;
   background: hsl(var(--color-surface));
   transition: border-color 0.2s, transform 0.12s ease;
   text-decoration: none;
@@ -524,8 +524,8 @@ const showPdfReader = ref(false)
 
 .book-block {
   padding: 1.25rem;
-  border-radius: 0.75rem;
+  border-radius: 16px;
-  border: 1px solid hsl(var(--color-text) / 0.08);
+  border: none;
   background: hsl(var(--color-surface));
 }
 

app/pages/economique/monnaie-libre.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section-padding">
+  <div class="axis-scope axis-scope--eco section-padding">
     <div class="container-content">
 
       <!-- Header -->

app/pages/economique/productions-collectives.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section-padding">
+  <div class="axis-scope axis-scope--eco section-padding">
     <div class="container-content">
       <div class="mx-auto max-w-2xl">
         <div class="section-icon mx-auto mb-6">

app/pages/index.vue

@@ -1,8 +1,27 @@
 <template>
   <div>
+    <HomeVariantParcours
+      v-if="variant === 'b'"
+      @open-player="showBookPlayer = true"
+      @open-pdf="showPdfReader = true"
+    />
+    <HomeVariantEtabli
+      v-else-if="variant === 'c'"
+      @open-player="showBookPlayer = true"
+      @open-pdf="showPdfReader = true"
+    />
+    <template v-else-if="variant === '0'">
       <HomeHeroSection />
       <HomeAxisGrid @open-player="showBookPlayer = true" @open-pdf="showPdfReader = true" />
+    </template>
+    <HomeVariantConsole
+      v-else
+      @open-player="showBookPlayer = true"
+      @open-pdf="showPdfReader = true"
+    />
+
     <HomeMessages />
+    <HomeVariantSwitch v-if="showSwitch" :current="variant" />
     <BookPlayer v-model="showBookPlayer" />
     <BookPdfReader v-model="showPdfReader" />
   </div>
@@ -14,6 +33,15 @@ useSeoPage({
   description: 'Construire une autonomie collective à l\'échelle des bassins de vie. Un livre, des chansons et des outils pour l\'émancipation.',
 })
 
+// Home variants under review: ?v=a (console, default) · ?v=b (parcours) · ?v=c (établi) · ?v=0 (previous home)
+const route = useRoute()
+const VARIANTS = ['a', 'b', 'c', '0'] as const
+const variant = computed(() => {
+  const v = String(route.query.v ?? 'a')
+  return (VARIANTS as readonly string[]).includes(v) ? v : 'a'
+})
+const showSwitch = computed(() => route.query.v !== undefined)
+
 const showBookPlayer = ref(false)
 const showPdfReader = ref(false)
 </script>

app/pages/numerique/[slug].vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-outer section-padding">
+  <div class="axis-scope axis-scope--num page-outer section-padding">
 
     <!-- Shadok pinguin — tenant une clé USB, petit Tux à ses pieds -->
     <svg class="shadok-dl shadok-dl-pinguin" viewBox="0 0 170 210" fill="none" aria-hidden="true">
@@ -483,6 +483,12 @@
                   <div class="i-lucide-package h-4 w-4" />
                   {{ section.bouquet.title }}
                 </h3>
+                <p v-if="section.bouquet.provider" class="territoire-bouquet-provider">{{ section.bouquet.provider }}</p>
+                <ul v-if="section.bouquet.statuses" class="bouquet-legend" aria-label="Légende des statuts">
+                  <li v-for="(label, key) in section.bouquet.statuses" :key="key">
+                    <span class="bouquet-dot" :class="`bouquet-dot--${key}`" aria-hidden="true" />{{ label }}
+                  </li>
+                </ul>
                 <div class="territoire-bouquet-grid">
                   <div
                     v-for="(cat, ci) in section.bouquet.categories"
@@ -494,8 +500,24 @@
                       <span>{{ cat.label }}</span>
                     </div>
                     <ul class="territoire-bouquet-items">
-                      <li v-for="(item, ii) in cat.items" :key="ii">{{ item }}</li>
+                      <template v-for="(item, ii) in cat.items" :key="ii">
+                        <li v-if="typeof item === 'string'">{{ item }}</li>
+                        <li v-else class="bouquet-item">
+                          <span
+                            class="bouquet-dot"
+                            :class="`bouquet-dot--${item.status}`"
+                            :title="section.bouquet.statuses?.[item.status]"
+                          />
+                          <span class="bouquet-role">{{ item.role }}</span>
+                          <template v-if="item.name">
+                            <a v-if="item.url" :href="item.url" target="_blank" rel="noopener" class="bouquet-name">{{ item.name }}</a>
+                            <span v-else class="bouquet-name">{{ item.name }}</span>
+                          </template>
+                          <span class="sr-only">— {{ section.bouquet.statuses?.[item.status] }}</span>
+                        </li>
+                      </template>
                     </ul>
+                    <p v-if="cat.note" class="bouquet-note">{{ cat.note }}</p>
                   </div>
                 </div>
               </div>
@@ -1628,6 +1650,74 @@ useSeoPage({
   color: hsl(var(--color-primary) / 0.5);
 }
 
+/* Bouquet — status of each stack */
+.territoire-bouquet-provider {
+  font-size: 0.8rem;
+  color: hsl(var(--color-text-muted));
+  margin: -0.25rem 0 0.75rem;
+}
+
+.bouquet-legend {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 1rem;
+  padding: 0;
+  margin: 0 0 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: hsl(var(--color-text-muted));
+}
+
+.bouquet-legend li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.territoire-bouquet-items li.bouquet-item {
+  padding-left: 0;
+  display: grid;
+  grid-template-columns: 0.5rem minmax(0, 1fr);
+  column-gap: 0.45rem;
+  align-items: baseline;
+}
+
+.bouquet-item > .bouquet-dot { grid-row: 1; align-self: center; }
+.bouquet-item > .bouquet-role { grid-column: 2; }
+.bouquet-item > .bouquet-name { grid-column: 2; }
+
+.territoire-bouquet-items li.bouquet-item::before { content: none; }
+
+.bouquet-dot {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  align-self: center;
+}
+
+.bouquet-dot--service { background: hsl(var(--axis-num)); }
+.bouquet-dot--catalogue { box-shadow: inset 0 0 0 1.5px hsl(var(--axis-num)); }
+.bouquet-dot--avenir { box-shadow: inset 0 0 0 1px hsl(var(--color-text) / 0.3); }
+
+.bouquet-role { color: hsl(var(--color-text-muted)); }
+
+.bouquet-name {
+  color: hsl(var(--color-text));
+  font-weight: 600;
+}
+
+a.bouquet-name:hover { color: hsl(var(--axis-num)); }
+
+.bouquet-note {
+  margin: 0.4rem 0 0;
+  font-size: 0.72rem;
+  font-style: italic;
+  color: hsl(var(--color-text-muted));
+}
+
 /* Estimation toggled */
 .territoire-estimate {
   border-top: 1px solid hsl(var(--color-text) / 0.06);

app/pages/numerique/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative overflow-hidden section-padding">
+  <div class="axis-scope axis-scope--num relative overflow-hidden section-padding">
     <!-- Shadok codeuse — sitting at desk, typing on laptop, glasses -->
     <svg class="shadok-codeuse" viewBox="0 0 170 200" fill="none" aria-hidden="true">
       <!-- Desk -->
@@ -315,6 +315,16 @@
       </header>
 
       <div class="mx-auto max-w-3xl flex flex-col gap-6">
+        <!-- LPK sert l'axe numérique -->
+        <NuxtLink v-if="lpk" :to="lpk.to" class="lpk-card">
+          <span class="lpk-name">{{ lpk.name }}</span>
+          <span class="lpk-body">
+            <span class="lpk-full">{{ lpk.fullName }} — {{ lpk.text }}</span>
+            <span class="lpk-role">{{ lpk.role }}</span>
+          </span>
+          <span class="i-lucide-arrow-right h-5 w-5 lpk-arrow" aria-hidden="true" />
+        </NuxtLink>
+
         <div
           v-for="pillar in content?.pillars"
           :key="pillar.id"
@@ -379,6 +389,8 @@ definePageMeta({
 })
 
 const { data: content } = await usePageContent('numerique')
+const { data: site } = await useSiteContent()
+const lpk = computed(() => site.value?.lpk)
 
 useSeoPage({
   title: content.value?.meta?.title ?? 'Autonomie numérique',
@@ -387,13 +399,59 @@ useSeoPage({
 </script>
 
 <style scoped>
+.lpk-card {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 1.25rem 1.5rem;
+  border-radius: 16px;
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-text));
+  transition: transform 0.12s ease;
+}
+
+.lpk-card:hover { transform: translateY(-3px); }
+.lpk-card:active { transform: translateY(0); }
+
+.lpk-name {
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: 2rem;
+  letter-spacing: -0.03em;
+  color: hsl(var(--color-primary));
+}
+
+.lpk-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.lpk-full {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: hsl(var(--color-text-muted));
+}
+
+.lpk-role {
+  font-size: 1.02rem;
+  line-height: 1.45;
+}
+
+.lpk-arrow { color: hsl(var(--color-primary)); flex-shrink: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .lpk-card { transition: none; }
+}
+
 .page-title {
   font-size: clamp(2rem, 5vw, 2.75rem);
 }
 
 .pillar-card {
-  border-radius: 0.75rem;
+  border-radius: 16px;
-  border: 1px solid hsl(var(--color-text) / 0.08);
+  border: none;
   background: hsl(var(--color-surface));
   transition: border-color 0.2s;
   position: relative;

app/stores/palette.ts

@@ -8,6 +8,10 @@ interface PaletteColors {
   surfaceLight: string
   text: string
   textMuted: string
+  // One hue per axis: numérique (cool) · économique (warm) · citoyenne (green)
+  axisNum: string
+  axisEco: string
+  axisCit: string
   isLight: boolean
   label: string
   icon: string
@@ -25,6 +29,9 @@ const palettes: Record<PaletteName, PaletteColors> = {
     surfaceLight: '20 8% 17%',   // bois fumé
     text: '0 0% 100%',
     textMuted: '0 0% 65%',
+    axisNum: '195 55% 60%',
+    axisEco: '32 85% 55%',
+    axisCit: '95 35% 55%',
     isLight: false,
     label: 'Automne',
     icon: 'i-lucide-leaf',
@@ -39,6 +46,9 @@ const palettes: Record<PaletteName, PaletteColors> = {
     surfaceLight: '220 12% 18%', // brume nocturne
     text: '0 0% 100%',
     textMuted: '210 10% 65%',
+    axisNum: '205 70% 66%',
+    axisEco: '36 80% 62%',
+    axisCit: '160 40% 58%',
     isLight: false,
     label: 'Hiver',
     icon: 'i-lucide-snowflake',
@@ -55,6 +65,9 @@ const palettes: Record<PaletteName, PaletteColors> = {
     surfaceLight: '148 22% 77%', // feuillage vif
     text: '155 50% 6%',          // encre noire-verte
     textMuted: '150 22% 28%',    // sous-bois dense
+    axisNum: '212 65% 34%',
+    axisEco: '338 80% 42%',
+    axisCit: '152 80% 22%',
     isLight: true,
     label: 'Printemps',
     icon: 'i-lucide-flower-2',
@@ -69,6 +82,9 @@ const palettes: Record<PaletteName, PaletteColors> = {
     surfaceLight: '30 32% 78%',  // argile chaude
     text: '20 45% 8%',           // brun profond
     textMuted: '22 22% 30%',     // ombre terracotta
+    axisNum: '198 70% 30%',
+    axisEco: '24 88% 42%',
+    axisCit: '150 45% 28%',
     isLight: true,
     label: 'Été',
     icon: 'i-lucide-sun',
@@ -90,6 +106,9 @@ const paletteMoods = (Object.entries(palettes) as [PaletteName, PaletteColors][]
       '--color-surface-light': c.surfaceLight,
       '--color-text': c.text,
       '--color-text-muted': c.textMuted,
+      '--axis-num': c.axisNum,
+      '--axis-eco': c.axisEco,
+      '--axis-cit': c.axisCit,
     },
   }),
 )

nuxt.config.ts

@@ -83,7 +83,7 @@ export default defineNuxtConfig({
       'i-lucide-message-circle', 'i-lucide-bot', 'i-lucide-globe-2',
       'i-lucide-map-pin', 'i-lucide-euro', 'i-lucide-package',
       'i-lucide-settings', 'i-lucide-layout-grid', 'i-lucide-server',
-      'i-lucide-chevron-down', 'i-lucide-info',
+      'i-lucide-chevron-down', 'i-lucide-info', 'i-lucide-briefcase', 'i-lucide-key', 'i-lucide-shield',
     ],
   },
 
@@ -94,7 +94,7 @@ export default defineNuxtConfig({
         { rel: 'preconnect', href: 'https://fonts.bunny.net' },
         {
           rel: 'stylesheet',
-          href: 'https://fonts.bunny.net/css?family=syne:400,500,600,700,800|space-grotesk:300,400,500,600,700|jetbrains-mono:400,500,700',
+          href: 'https://fonts.bunny.net/css?family=bricolage-grotesque:400,500,600,700,800|atkinson-hyperlegible:400,400i,700,700i|jetbrains-mono:400,500,700|syne:400',
         },
       ],
       meta: [

uno.config.ts

@@ -2,7 +2,6 @@ import {
   defineConfig,
   presetIcons,
   presetUno,
-  presetWebFonts,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
@@ -17,21 +16,18 @@ export default defineConfig({
         ph: () => import('@iconify-json/ph/icons.json').then(i => i.default),
       },
     }),
-    presetWebFonts({
-      provider: 'bunny',
-      fonts: {
-        display: 'Outfit:400,500,600,700,800',
-        sans: 'Inter:300,400,500,600,700',
-        mono: 'JetBrains Mono:400,500,700',
-        calligraphy: 'Playfair Display:400,700',
-      },
-    }),
   ],
   transformers: [
     transformerDirectives(),
     transformerVariantGroup(),
   ],
   theme: {
+    // Font files are loaded once, from Bunny Fonts, in nuxt.config.ts (app.head.link).
+    fontFamily: {
+      display: 'var(--font-display)',
+      sans: 'var(--font-sans)',
+      mono: 'var(--font-mono)',
+    },
     colors: {
       primary: {
         DEFAULT: 'hsl(var(--color-primary))',