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>