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/HomeMessages.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="section-padding">
-    <div class="container-content mx-auto max-w-3xl">
+  <section class="messages-section">
+    <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">
-        <h3 class="font-display text-lg font-bold section-title text-center">Derniers messages</h3>
+      <div class="space-y-4">
+        <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: 0.75rem;
+  border-radius: 16px;
   padding: 1.5rem;
 }
 
 .msg-input {
   width: 100%;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.5rem;
-  border: 1px solid hsl(var(--color-text) / 0.12);
+  min-height: 2.5rem;
+  padding: 0.55rem 0.85rem;
+  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: 0.75rem;
+  border-radius: 16px;
   padding: 1rem 1.25rem;
 }