Refonte UI complète : palettes saisonnières, typo moderne, paroles nettoyées, Shadoks

- Nettoyage paroles : suppression instructions Suno AI, corrections prononciation (11 fichiers)
- 4 palettes saisonnières (Automne/Hiver dark, Printemps/Été light) avec sélecteur
- Typographie modernisée : Outfit (display) + Inter (sans) remplacent Syne + Space Grotesk
- Styles adaptatifs : CSS vars pour couleurs, overrides light mode complets
- Mini-player : bouton Next ajouté, flèche expand plus visible
- BookPlayer : fix scroll mode paginé, croix de fermeture visible
- Illustrations Shadoks inline SVG dans 11 composants/pages
- Suppression soulignés navigation, reset boutons, bordures propres

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

app/pages/gratewizard.vue

@@ -1,6 +1,48 @@
 <template>
   <NuxtLayout>
-    <div class="section-padding">
+    <div class="relative overflow-hidden section-padding">
+      <!-- Shadok alchemist: character stirring a cauldron with sparkles -->
+      <svg class="shadok-alchemist" viewBox="0 0 240 320" fill="none" aria-hidden="true">
+        <!-- Body -->
+        <ellipse cx="120" cy="145" rx="40" ry="48" fill="currentColor" opacity="0.85"/>
+        <!-- Head -->
+        <circle cx="120" cy="82" r="24" fill="currentColor" opacity="0.8"/>
+        <!-- Wizard hat -->
+        <polygon points="120,30 100,80 140,80" fill="currentColor" opacity="0.5"/>
+        <line x1="100" y1="80" x2="140" y2="80" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.45"/>
+        <!-- Hat star -->
+        <circle cx="118" cy="55" r="3" fill="currentColor" opacity="0.25"/>
+        <!-- Eyes (mischievous) -->
+        <circle cx="111" cy="78" r="4.5" fill="currentColor" opacity="0.2"/>
+        <circle cx="129" cy="78" r="4.5" fill="currentColor" opacity="0.2"/>
+        <circle cx="112" cy="77" r="2" fill="currentColor" opacity="0.5"/>
+        <circle cx="130" cy="77" r="2" fill="currentColor" opacity="0.5"/>
+        <!-- Grin -->
+        <path d="M112 92 Q120 98 128 92" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.35"/>
+        <!-- Arm holding spoon/stick -->
+        <line x1="158" y1="140" x2="175" y2="210" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+        <!-- Other arm -->
+        <path d="M82 145 Q65 165 70 185" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none" opacity="0.6"/>
+        <!-- Cauldron -->
+        <path d="M60 220 Q60 260 120 260 Q180 260 180 220" fill="currentColor" opacity="0.4"/>
+        <ellipse cx="120" cy="220" rx="60" ry="15" fill="currentColor" opacity="0.3"/>
+        <ellipse cx="120" cy="220" rx="60" ry="15" stroke="currentColor" stroke-width="2" fill="none" opacity="0.4"/>
+        <!-- Cauldron legs -->
+        <line x1="80" y1="258" x2="75" y2="280" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
+        <line x1="160" y1="258" x2="165" y2="280" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
+        <!-- Bubbles from cauldron -->
+        <circle cx="100" cy="210" r="5" fill="currentColor" opacity="0.2"/>
+        <circle cx="135" cy="205" r="4" fill="currentColor" opacity="0.18"/>
+        <circle cx="115" cy="198" r="3" fill="currentColor" opacity="0.15"/>
+        <!-- Sparkles -->
+        <circle cx="90" cy="190" r="2" fill="currentColor" opacity="0.25"/>
+        <circle cx="150" cy="195" r="2.5" fill="currentColor" opacity="0.2"/>
+        <circle cx="105" cy="185" r="1.5" fill="currentColor" opacity="0.2"/>
+        <!-- Character legs -->
+        <line x1="105" y1="190" x2="95" y2="225" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.5"/>
+        <line x1="135" y1="190" x2="145" y2="225" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.5"/>
+      </svg>
+
       <div class="container-content max-w-3xl mx-auto">
         <!-- Back link -->
         <UiScrollReveal>
@@ -77,14 +119,14 @@ const { url, launch } = useGrateWizard()
 .gw-feature-card {
   padding: 1.5rem;
   border-radius: 0.75rem;
-  border: 1px solid hsl(20 8% 18%);
-  background: hsl(20 8% 8% / 0.5);
+  border: 1px solid hsl(var(--color-text) / 0.1);
+  background: hsl(var(--color-surface) / 0.5);
   transition: border-color 0.3s ease, background 0.3s ease;
 }
 
 .gw-feature-card:hover {
   border-color: hsl(40 80% 50% / 0.25);
-  background: hsl(20 8% 10% / 0.5);
+  background: hsl(var(--color-surface-light) / 0.5);
 }
 
 code {
@@ -94,4 +136,24 @@ code {
   border-radius: 0.25em;
   background: hsl(40 80% 50% / 0.1);
 }
+
+.shadok-alchemist {
+  position: absolute;
+  right: 2%;
+  top: 15%;
+  width: clamp(100px, 14vw, 190px);
+  opacity: 0.1;
+  pointer-events: none;
+  color: hsl(var(--color-accent));
+  animation: shadok-float-alchemist 10s ease-in-out infinite;
+}
+
+@keyframes shadok-float-alchemist {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-10px) rotate(1deg); }
+}
+
+@media (max-width: 768px) {
+  .shadok-alchemist { display: none; }
+}
 </style>