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/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: 1px solid hsl(var(--color-text) / 0.08);
+  border-radius: 16px;
+  border: none;
   background: hsl(var(--color-surface));
   transition: border-color 0.2s;
   position: relative;