Messages : types, réponses, sauts de ligne, data volume

- HomeMessages : type pill (Réaction/Question/Suggestion/Retour) + sélecteur dans le formulaire (sans Réaction)
- HomeMessages : white-space: pre-line sur les messages
- Page /messages : type pill + white-space: pre-line (idem home)
- Admin : badge type coloré + sélecteur d'édition + formulaire réponse
- API : type et reply dans PUT ; readDataYaml/writeDataYaml (data/ volume Docker)
- main.css : overrides light mode text-white/55, /75, /90

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/components/home/HomeMessages.vue

@@ -1,10 +1,11 @@
 <template>
   <section class="section-padding">
     <div class="container-content mx-auto max-w-3xl">
+
     <!-- Formulaire -->
     <UiScrollReveal>
       <div class="message-form-card">
-        <h3 class="font-display text-lg font-bold text-white mb-4">Laisser un message</h3>
+        <h3 class="font-display text-lg font-bold form-title mb-4">Laisser un message</h3>
 
         <form v-if="!submitted" class="space-y-3" @submit.prevent="send">
           <input
@@ -13,7 +14,12 @@
             placeholder="Votre nom"
             class="msg-input"
           />
-          <p class="text-white/30 text-xs -mt-1 px-1">Pour recevoir une réponse, laissez votre e-mail dans le message.</p>
+          <p class="hint-text text-xs -mt-1 px-1">Pour recevoir une réponse, laissez votre e-mail dans le message.</p>
+          <select v-model="form.type" class="msg-input msg-input--select">
+            <option value="question">Question</option>
+            <option value="suggestion">Suggestion</option>
+            <option value="retour">Retour d'expérience</option>
+          </select>
           <textarea
             v-model="form.text"
             placeholder="Votre message"
@@ -30,11 +36,11 @@
 
         <div v-else class="text-center py-6">
           <div class="i-lucide-heart-handshake h-10 w-10 text-primary mx-auto mb-3" />
-          <p class="text-white/90 font-display text-lg font-semibold">Merci pour votre message !</p>
-          <p class="text-white/55 text-sm mt-2 max-w-md mx-auto leading-relaxed">
+          <p class="msg-confirm-title font-display text-lg font-semibold">Merci pour votre message !</p>
+          <p class="msg-confirm-sub text-sm mt-2 max-w-md mx-auto leading-relaxed">
             Il sera lu et traité dans un délai... humainement raisonnable.
           </p>
-          <p class="text-primary/60 text-xs mt-4 italic">
+          <p class="msg-confirm-note text-xs mt-4 italic">
             Chaque message est un premier pas dans l'aventure.
           </p>
         </div>
@@ -44,13 +50,26 @@
     <!-- 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 text-white/80 text-center">Derniers messages</h3>
+        <h3 class="font-display text-lg font-bold section-title text-center">Derniers messages</h3>
         <div v-for="msg in messages.slice(0, 2)" :key="msg.id" class="message-card">
-          <p class="text-white/80 text-sm leading-relaxed">{{ msg.text }}</p>
-          <div class="mt-2 flex items-center gap-2 text-xs text-white/40">
-            <span class="font-semibold text-white/60">{{ msg.author }}</span>
-            <span>&middot;</span>
-            <span>{{ formatDate(msg.createdAt) }}</span>
+          <!-- En-tête auteur -->
+          <div class="flex items-center gap-2 mb-2">
+            <span class="msg-author font-semibold text-sm">{{ msg.author }}</span>
+            <span class="type-pill">{{ typeLabel(msg.type) }}</span>
+            <span class="msg-date text-xs ml-auto">{{ formatDate(msg.createdAt) }}</span>
+          </div>
+          <!-- Texte du message -->
+          <p class="msg-text text-sm leading-relaxed">{{ msg.text }}</p>
+          <!-- Réponse -->
+          <div v-if="msg.reply?.text" class="reply-thread">
+            <div class="reply-connector" aria-hidden="true" />
+            <div class="reply-block">
+              <div class="flex items-center gap-1.5 mb-1">
+                <div class="i-lucide-corner-down-right h-3 w-3 reply-icon" />
+                <span class="reply-author text-xs font-semibold">Le Librodrome</span>
+              </div>
+              <p class="reply-text text-sm leading-relaxed italic">{{ msg.reply.text }}</p>
+            </div>
           </div>
         </div>
         <div class="text-center">
@@ -68,12 +87,23 @@
 <script setup lang="ts">
 const { data: messages } = await useFetch('/api/messages')
 
-const form = reactive({ author: '', text: '' })
+const form = reactive({ author: '', text: '', type: 'question' })
 const sending = ref(false)
 const submitted = ref(false)
 
 const canSend = computed(() => form.text.trim().length > 0)
 
+const TYPE_LABELS: Record<string, string> = {
+  reaction: 'Réaction',
+  question: 'Question',
+  suggestion: 'Suggestion',
+  retour: 'Retour',
+}
+
+function typeLabel(type: string) {
+  return TYPE_LABELS[type] ?? type
+}
+
 async function send() {
   if (!canSend.value) return
   sending.value = true
@@ -106,6 +136,21 @@ function formatDate(iso: string) {
 </script>
 
 <style scoped>
+/* ── Couleurs adaptatives (dark + light) ── */
+.form-title       { color: hsl(var(--color-text)); }
+.hint-text        { color: hsl(var(--color-text) / 0.35); }
+.section-title    { color: hsl(var(--color-text) / 0.85); }
+.msg-author       { color: hsl(var(--color-text) / 0.75); }
+.msg-date         { color: hsl(var(--color-text) / 0.38); }
+.msg-text         { color: hsl(var(--color-text) / 0.78); white-space: pre-line; }
+.msg-confirm-title { color: hsl(var(--color-text) / 0.95); }
+.msg-confirm-sub  { color: hsl(var(--color-text) / 0.6); }
+.msg-confirm-note { color: hsl(var(--color-primary) / 0.65); }
+.reply-icon       { color: hsl(var(--color-primary) / 0.5); }
+.reply-author     { color: hsl(var(--color-primary) / 0.8); }
+.reply-text       { color: hsl(var(--color-text) / 0.62); }
+
+/* ── Carte formulaire ── */
 .message-form-card {
   background: hsl(var(--color-surface));
   border: 1px solid hsl(var(--color-text) / 0.1);
@@ -121,9 +166,15 @@ function formatDate(iso: string) {
   background: hsl(var(--color-bg));
   color: hsl(var(--color-text));
   font-size: 0.875rem;
+  font-family: inherit;
   transition: border-color 0.2s;
 }
 
+.msg-input--select {
+  width: auto;
+  cursor: pointer;
+}
+
 .msg-input::placeholder {
   color: hsl(var(--color-text) / 0.35);
 }
@@ -133,10 +184,53 @@ function formatDate(iso: string) {
   border-color: 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;
   padding: 1rem 1.25rem;
 }
+
+.type-pill {
+  font-size: 0.6rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.45rem;
+  border-radius: 9999px;
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary) / 0.7);
+}
+
+/* ── Réponse avec liaison graphique ── */
+.reply-thread {
+  position: relative;
+  display: flex;
+  gap: 0;
+  margin-top: 0.75rem;
+  padding-left: 1.25rem;
+}
+
+.reply-connector {
+  position: absolute;
+  left: 0.5rem;
+  top: -0.5rem;
+  bottom: 0.5rem;
+  width: 2px;
+  background: linear-gradient(
+    to bottom,
+    hsl(var(--color-primary) / 0.35),
+    hsl(var(--color-primary) / 0.15)
+  );
+  border-radius: 2px;
+}
+
+.reply-block {
+  flex: 1;
+  background: hsl(var(--color-primary) / 0.05);
+  border-left: 2px solid hsl(var(--color-primary) / 0.25);
+  border-radius: 0 0.5rem 0.5rem 0;
+  padding: 0.6rem 0.875rem;
+}
 </style>