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/components/player/PlayerPersistent.vue

@@ -99,13 +99,18 @@
           <div :class="store.isPlaying ? 'i-lucide-pause' : 'i-lucide-play'" class="h-4 w-4" />
         </button>
 
+        <!-- Next -->
+        <button class="pill-next" aria-label="Suivant" @click.stop="playNext" :disabled="!store.hasNext">
+          <div class="i-lucide-skip-forward h-3.5 w-3.5" />
+        </button>
+
         <!-- Expand -->
         <button
           class="pill-expand"
           :aria-label="isExpanded ? 'Réduire' : 'Développer'"
           @click.stop="toggleExpanded"
         >
-          <div :class="isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-3.5 w-3.5" />
+          <div :class="isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-4 w-4" />
         </button>
       </div>
     </div>
@@ -116,7 +121,7 @@
 import { onClickOutside } from '@vueuse/core'
 
 const store = usePlayerStore()
-const { setVolume, togglePlayPause } = useAudioPlayer()
+const { setVolume, togglePlayPause, playNext } = useAudioPlayer()
 
 useMediaSession()
 
@@ -235,22 +240,40 @@ onClickOutside(widgetRef, () => {
 .pill-play:hover { transform: scale(1.08); }
 .pill-play:active { transform: scale(0.94); }
 
+/* Next */
+.pill-next {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  background: transparent;
+  border: none;
+  color: hsl(0 0% 100% / 0.6);
+  cursor: pointer;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+.pill-next:hover { color: white; }
+.pill-next:disabled { opacity: 0.3; cursor: default; }
+
 /* Expand chevron */
 .pill-expand {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
   border-radius: 50%;
-  background: transparent;
+  background: hsl(0 0% 100% / 0.08);
   border: none;
-  color: hsl(0 0% 100% / 0.3);
+  color: hsl(0 0% 100% / 0.5);
   cursor: pointer;
-  transition: color 0.2s;
+  transition: all 0.2s;
   flex-shrink: 0;
 }
-.pill-expand:hover { color: hsl(0 0% 100% / 0.7); }
+.pill-expand:hover { color: hsl(0 0% 100% / 0.9); background: hsl(0 0% 100% / 0.15); }
 
 /* ═══════════════════════════════════════
    PANEL