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/assets/css/main.css

@@ -3,20 +3,20 @@
 @import './typography.css';
 
 :root {
-  --color-primary: 12 76% 48%;
-  --color-accent: 36 80% 52%;
-  --color-bg: 20 8% 3.5%;
-  --color-surface: 20 8% 8%;
-  --color-surface-light: 20 8% 13%;
+  --color-primary: 18 80% 45%;
+  --color-accent: 32 85% 50%;
+  --color-bg: 16 12% 4%;
+  --color-surface: 16 12% 9%;
+  --color-surface-light: 16 10% 14%;
   --color-text: 0 0% 100%;
-  --color-text-muted: 0 0% 100% / 0.6;
+  --color-text-muted: 0 0% 60%;
 
   --header-height: 4rem;
   --player-height: 0rem;
   --sidebar-width: 280px;
 
-  --font-display: 'Syne', sans-serif;
-  --font-sans: 'Space Grotesk', sans-serif;
+  --font-display: 'Outfit', sans-serif;
+  --font-sans: 'Inter', sans-serif;
   --font-mono: 'JetBrains Mono', monospace;
 
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
@@ -43,9 +43,22 @@ body {
   min-height: 100dvh;
 }
 
+button {
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
 ::selection {
   background-color: hsl(var(--color-primary) / 0.3);
-  color: white;
+  color: hsl(var(--color-text));
 }
 
 :focus-visible {
@@ -72,6 +85,78 @@ body {
   background: hsl(var(--color-text) / 0.25);
 }
 
+/* ═══ Light mode overrides ═══ */
+.palette-light {
+  color-scheme: light;
+}
+
+.palette-light,
+.palette-light .text-white {
+  color: hsl(var(--color-text));
+}
+
+/* white with opacity → dark text with same opacity */
+.palette-light .text-white\/20 { color: hsl(var(--color-text) / 0.2); }
+.palette-light .text-white\/30 { color: hsl(var(--color-text) / 0.3); }
+.palette-light .text-white\/40 { color: hsl(var(--color-text) / 0.4); }
+.palette-light .text-white\/45 { color: hsl(var(--color-text) / 0.45); }
+.palette-light .text-white\/50 { color: hsl(var(--color-text) / 0.5); }
+.palette-light .text-white\/60 { color: hsl(var(--color-text) / 0.6); }
+.palette-light .text-white\/70 { color: hsl(var(--color-text) / 0.7); }
+.palette-light .text-white\/80 { color: hsl(var(--color-text) / 0.8); }
+.palette-light .text-white\/85 { color: hsl(var(--color-text) / 0.85); }
+
+/* white backgrounds → surface tones */
+.palette-light .bg-white\/5 { background-color: hsl(var(--color-text) / 0.04); }
+.palette-light .bg-white\/8 { background-color: hsl(var(--color-text) / 0.06); }
+.palette-light .bg-white\/10 { background-color: hsl(var(--color-text) / 0.07); }
+
+/* borders */
+.palette-light .border-white\/8 { border-color: hsl(var(--color-text) / 0.1); }
+
+/* hover overrides */
+.palette-light .hover\:text-white:hover,
+.palette-light .hover\:text-white\/70:hover,
+.palette-light .hover\:text-white\/80:hover {
+  color: hsl(var(--color-text));
+}
+.palette-light .hover\:text-white\/60:hover {
+  color: hsl(var(--color-text) / 0.6);
+}
+.palette-light .hover\:bg-white\/5:hover {
+  background-color: hsl(var(--color-text) / 0.04);
+}
+.palette-light .hover\:bg-white\/10:hover {
+  background-color: hsl(var(--color-text) / 0.07);
+}
+
+/* placeholder overrides */
+.palette-light .placeholder\:text-white\/30::placeholder {
+  color: hsl(var(--color-text) / 0.3);
+}
+
+/* Prose/content in light mode */
+.palette-light .prose { color: hsl(var(--color-text)); }
+.palette-light .prose :where(h1,h2,h3,h4,h5,h6) { color: hsl(var(--color-text)); }
+
+/* Active states */
+.palette-light .text-white\! { color: hsl(var(--color-text)) !important; }
+.palette-light .active-class .text-white\! { color: hsl(var(--color-text)) !important; }
+
+/* text-gradient in light mode */
+.palette-light .text-gradient {
+  background-image: linear-gradient(to right, hsl(var(--color-primary)), hsl(var(--color-accent)));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* card surfaces */
+.palette-light .card-surface {
+  background: hsl(var(--color-surface));
+  border-color: hsl(var(--color-text) / 0.1);
+}
+
 /* Page transitions */
 .page-enter-active,
 .page-leave-active {