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