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/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>