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/lire/index.vue

@@ -1,5 +1,54 @@
 <template>
-  <div class="section-padding">
+  <div class="relative overflow-hidden section-padding">
+    <!-- Shadok reader: character with big glasses reading a book -->
+    <svg class="shadok-reader" viewBox="0 0 240 300" fill="none" aria-hidden="true">
+      <!-- Body -->
+      <ellipse cx="120" cy="170" rx="45" ry="55" fill="currentColor" opacity="0.85"/>
+      <!-- Head -->
+      <circle cx="120" cy="100" r="28" fill="currentColor" opacity="0.8"/>
+      <!-- Big round glasses -->
+      <circle cx="107" cy="94" r="11" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.5"/>
+      <circle cx="133" cy="94" r="11" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.5"/>
+      <line x1="118" y1="94" x2="122" y2="94" stroke="currentColor" stroke-width="2" opacity="0.5"/>
+      <!-- Eyes behind glasses -->
+      <circle cx="108" cy="93" r="2.5" fill="currentColor" opacity="0.5"/>
+      <circle cx="134" cy="93" r="2.5" fill="currentColor" opacity="0.5"/>
+      <!-- Arms holding book -->
+      <line x1="78" y1="155" x2="60" y2="180" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <line x1="162" y1="155" x2="180" y2="180" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <!-- Book (open) -->
+      <rect x="55" y="175" width="55" height="40" rx="2" fill="currentColor" opacity="0.35"/>
+      <rect x="110" y="175" width="55" height="40" rx="2" fill="currentColor" opacity="0.3"/>
+      <line x1="110" y1="175" x2="110" y2="215" stroke="currentColor" stroke-width="2" opacity="0.5"/>
+      <!-- Book lines (text) -->
+      <line x1="65" y1="188" x2="100" y2="188" stroke="currentColor" stroke-width="1" opacity="0.2"/>
+      <line x1="65" y1="195" x2="95" y2="195" stroke="currentColor" stroke-width="1" opacity="0.2"/>
+      <line x1="65" y1="202" x2="98" y2="202" stroke="currentColor" stroke-width="1" opacity="0.2"/>
+      <!-- Legs -->
+      <line x1="105" y1="222" x2="95" y2="270" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <line x1="135" y1="222" x2="145" y2="270" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+    </svg>
+
+    <!-- Shadok stack: pile of books tilting -->
+    <svg class="shadok-stack" viewBox="0 0 160 220" fill="none" aria-hidden="true">
+      <!-- Bottom book -->
+      <rect x="20" y="170" width="120" height="22" rx="3" fill="currentColor" opacity="0.5" transform="rotate(-2 80 181)"/>
+      <!-- Second book -->
+      <rect x="30" y="145" width="100" height="20" rx="3" fill="currentColor" opacity="0.45" transform="rotate(3 80 155)"/>
+      <!-- Third book -->
+      <rect x="25" y="120" width="110" height="18" rx="3" fill="currentColor" opacity="0.4" transform="rotate(-4 80 129)"/>
+      <!-- Fourth book -->
+      <rect x="35" y="97" width="90" height="18" rx="3" fill="currentColor" opacity="0.35" transform="rotate(5 80 106)"/>
+      <!-- Fifth book (tilting more) -->
+      <rect x="40" y="74" width="80" height="17" rx="3" fill="currentColor" opacity="0.3" transform="rotate(-7 80 82)"/>
+      <!-- Top book (really tilting) -->
+      <rect x="45" y="52" width="70" height="16" rx="3" fill="currentColor" opacity="0.25" transform="rotate(10 80 60)"/>
+      <!-- Tiny Shadok sitting on top -->
+      <ellipse cx="85" cy="42" rx="10" ry="8" fill="currentColor" opacity="0.5"/>
+      <circle cx="85" cy="30" r="6" fill="currentColor" opacity="0.45"/>
+      <circle cx="87" cy="29" r="1.5" fill="currentColor" opacity="0.3"/>
+    </svg>
+
     <div class="container-content">
       <header class="mb-12 text-center">
         <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">{{ content?.kicker }}</p>
@@ -68,4 +117,41 @@ const { data: chapters } = await useAsyncData('book-toc', () =>
 .page-title {
   font-size: clamp(2rem, 5vw, 2.75rem);
 }
+
+.shadok-reader {
+  position: absolute;
+  right: 2%;
+  top: 5%;
+  width: clamp(90px, 13vw, 180px);
+  opacity: 0.1;
+  pointer-events: none;
+  color: hsl(var(--color-primary));
+  animation: shadok-float-reader 9s ease-in-out infinite;
+}
+
+.shadok-stack {
+  position: absolute;
+  left: 2%;
+  bottom: 5%;
+  width: clamp(80px, 11vw, 150px);
+  opacity: 0.1;
+  pointer-events: none;
+  color: hsl(var(--color-accent));
+  animation: shadok-float-stack 11s ease-in-out infinite;
+}
+
+@keyframes shadok-float-reader {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes shadok-float-stack {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-8px) rotate(-2deg); }
+}
+
+@media (max-width: 768px) {
+  .shadok-reader { display: none; }
+  .shadok-stack { display: none; }
+}
 </style>