GrateWizard bloc dédié, messagerie libre, page numérique 3 piliers

- GrateWizard : lancement URL simple (plus de popup embed), bloc
  dédié violet sur la home entre axes et événement
- Messagerie : plus de champs obligatoires, plus de champ email
  séparé, hint email dans le message, remerciement onboarding
- Page /numerique : 3 piliers (Logiciel libre, WoT, Cloud libre)
  avec projets associés, remplace les extraits livre hors-sujet
- Admin : carte Messages ajoutée au dashboard
- Safelist icônes complétée

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

app/components/home/AxisGrid.vue

@@ -40,8 +40,28 @@
         </div>
       </UiScrollReveal>
 
+      <!-- Bloc GrateWizard -->
+      <UiScrollReveal v-if="gw" :delay="250">
+        <button class="gw-block" @click="launchGW">
+          <div class="gw-icon">
+            <div class="i-lucide-sparkles h-7 w-7" />
+          </div>
+          <div class="gw-text">
+            <h2 class="font-display text-xl font-bold text-white sm:text-2xl">
+              {{ gw.title }}
+            </h2>
+            <p class="text-white/55 text-sm sm:text-base mt-0.5">
+              {{ gw.subtitle }}
+            </p>
+          </div>
+          <div class="gw-arrow">
+            <div class="i-lucide-arrow-up-right h-5 w-5" />
+          </div>
+        </button>
+      </UiScrollReveal>
+
       <!-- Bloc Événement -->
-      <UiScrollReveal v-if="evenement" :delay="300">
+      <UiScrollReveal v-if="evenement" :delay="350">
         <NuxtLink :to="evenement.to" class="event-block">
           <div class="event-content">
             <div class="event-icon">
@@ -76,6 +96,7 @@ const { data: content } = await usePageContent('home')
 const { launch } = useGrateWizard()
 
 const axes = computed(() => (content.value as any)?.axes)
+const gw = computed(() => (content.value as any)?.gratewizard)
 const evenement = computed(() => (content.value as any)?.evenement)
 
 function launchGW() {
@@ -135,11 +156,84 @@ function launchGW() {
   flex-shrink: 0;
 }
 
+/* GrateWizard block */
+.gw-block {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  width: 100%;
+  padding: 1.75rem 2rem;
+  border-radius: 1rem;
+  border: none;
+  background: linear-gradient(135deg, hsl(280 50% 20% / 0.35), hsl(260 40% 15% / 0.25));
+  box-shadow: 0 0 40px hsl(280 60% 50% / 0.06), inset 0 1px 0 hsl(280 60% 70% / 0.08);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: left;
+  color: inherit;
+}
+
+.gw-block:hover {
+  background: linear-gradient(135deg, hsl(280 50% 24% / 0.45), hsl(260 40% 18% / 0.35));
+  box-shadow: 0 0 60px hsl(280 60% 50% / 0.12), inset 0 1px 0 hsl(280 60% 70% / 0.12);
+  transform: translateY(-2px);
+}
+
+.gw-block:active {
+  transform: translateY(0);
+}
+
+.gw-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 0.875rem;
+  background: hsl(280 60% 55% / 0.18);
+  color: hsl(280 60% 72%);
+  flex-shrink: 0;
+  box-shadow: 0 0 20px hsl(280 60% 50% / 0.15);
+}
+
+.gw-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.gw-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background: hsl(280 60% 55% / 0.1);
+  color: hsl(280 60% 65%);
+  flex-shrink: 0;
+  transition: all 0.2s;
+}
+
+.gw-block:hover .gw-arrow {
+  background: hsl(280 60% 55% / 0.2);
+  color: hsl(280 60% 80%);
+  transform: translate(2px, -2px);
+}
+
 @media (max-width: 640px) {
   .event-block {
     flex-direction: column;
     align-items: flex-start;
     padding: 1.5rem;
   }
+
+  .gw-block {
+    padding: 1.25rem;
+    gap: 1rem;
+  }
+
+  .gw-arrow {
+    display: none;
+  }
 }
 </style>

app/components/home/HomeMessages.vue

@@ -7,40 +7,36 @@
         <h3 class="font-display text-lg font-bold text-white mb-4">Laisser un message</h3>
 
         <form v-if="!submitted" class="space-y-3" @submit.prevent="send">
-          <div class="grid gap-3 sm:grid-cols-2">
-            <input
-              v-model="form.author"
-              type="text"
-              placeholder="Votre nom *"
-              required
-              class="msg-input"
-            />
-            <input
-              v-model="form.email"
-              type="email"
-              placeholder="Email (optionnel)"
-              class="msg-input"
-            />
-          </div>
+          <input
+            v-model="form.author"
+            type="text"
+            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>
           <textarea
             v-model="form.text"
-            placeholder="Votre message *"
-            required
+            placeholder="Votre message"
             rows="3"
             class="msg-input resize-none"
           />
           <div class="flex justify-end">
-            <button type="submit" class="btn-primary text-sm" :disabled="sending">
+            <button type="submit" class="btn-primary text-sm" :disabled="sending || !canSend">
               <div v-if="sending" class="i-lucide-loader-2 h-4 w-4 animate-spin mr-2" />
               Envoyer
             </button>
           </div>
         </form>
 
-        <div v-else class="text-center py-4">
-          <div class="i-lucide-check-circle h-8 w-8 text-green-400 mx-auto mb-2" />
-          <p class="text-white/80">Merci pour votre message !</p>
-          <p class="text-white/40 text-sm mt-1">Il sera visible après modération.</p>
+        <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">
+            Il sera lu et traité dans un délai... humainement raisonnable.
+          </p>
+          <p class="text-primary/60 text-xs mt-4 italic">
+            Chaque message est un premier pas dans l'aventure.
+          </p>
         </div>
       </div>
     </UiScrollReveal>
@@ -72,11 +68,14 @@
 <script setup lang="ts">
 const { data: messages } = await useFetch('/api/messages')
 
-const form = reactive({ author: '', email: '', text: '' })
+const form = reactive({ author: '', text: '' })
 const sending = ref(false)
 const submitted = ref(false)
 
+const canSend = computed(() => form.text.trim().length > 0)
+
 async function send() {
+  if (!canSend.value) return
   sending.value = true
   try {
     await $fetch('/api/messages', { method: 'POST', body: form })