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>

public/images/shadoks/shadok-pattern.svg

@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 80" fill="none">
+  <!-- Repeating mini-shadok pattern -->
+  <!-- Shadok 1 -->
+  <g transform="translate(20,10)">
+    <ellipse cx="15" cy="25" rx="12" ry="14" fill="currentColor" opacity="0.08"/>
+    <circle cx="15" cy="10" r="7" fill="currentColor" opacity="0.06"/>
+    <line x1="10" y1="38" x2="8" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.06"/>
+    <line x1="20" y1="38" x2="22" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.06"/>
+  </g>
+  <!-- Shadok 2 -->
+  <g transform="translate(80,15)">
+    <ellipse cx="15" cy="22" rx="10" ry="12" fill="currentColor" opacity="0.06"/>
+    <circle cx="15" cy="8" r="6" fill="currentColor" opacity="0.05"/>
+    <line x1="10" y1="33" x2="8" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.05"/>
+    <line x1="20" y1="33" x2="22" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.05"/>
+  </g>
+  <!-- Shadok 3 -->
+  <g transform="translate(140,8)">
+    <ellipse cx="15" cy="25" rx="11" ry="13" fill="currentColor" opacity="0.07"/>
+    <circle cx="15" cy="10" r="6.5" fill="currentColor" opacity="0.06"/>
+    <line x1="10" y1="37" x2="7" y2="54" stroke="currentColor" stroke-width="1.5" opacity="0.06"/>
+    <line x1="20" y1="37" x2="23" y2="54" stroke="currentColor" stroke-width="1.5" opacity="0.06"/>
+  </g>
+  <!-- Shadok 4 -->
+  <g transform="translate(210,18)">
+    <ellipse cx="15" cy="20" rx="10" ry="11" fill="currentColor" opacity="0.05"/>
+    <circle cx="15" cy="7" r="5.5" fill="currentColor" opacity="0.04"/>
+    <line x1="10" y1="30" x2="9" y2="44" stroke="currentColor" stroke-width="1.5" opacity="0.04"/>
+    <line x1="20" y1="30" x2="21" y2="44" stroke="currentColor" stroke-width="1.5" opacity="0.04"/>
+  </g>
+  <!-- Shadok 5 -->
+  <g transform="translate(270,12)">
+    <ellipse cx="15" cy="24" rx="12" ry="14" fill="currentColor" opacity="0.07"/>
+    <circle cx="15" cy="9" r="7" fill="currentColor" opacity="0.06"/>
+    <line x1="10" y1="37" x2="7" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.06"/>
+    <line x1="20" y1="37" x2="23" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.06"/>
+  </g>
+  <!-- Shadok 6 -->
+  <g transform="translate(340,16)">
+    <ellipse cx="15" cy="22" rx="10" ry="12" fill="currentColor" opacity="0.06"/>
+    <circle cx="15" cy="8" r="6" fill="currentColor" opacity="0.05"/>
+    <line x1="10" y1="33" x2="8" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.05"/>
+    <line x1="20" y1="33" x2="22" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.05"/>
+  </g>
+</svg>