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