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/typography.css

@@ -3,7 +3,7 @@
   font-family: var(--font-sans);
   font-size: 1.125rem;
   line-height: 1.8;
-  color: hsl(0 0% 100% / 0.90);
+  color: hsl(var(--color-text) / 0.90);
   max-width: 65ch;
 }
 
@@ -13,11 +13,11 @@
   font-weight: 800;
   line-height: 1.25;
   letter-spacing: -0.02em;
-  color: white;
+  color: hsl(var(--color-text));
   margin-top: 0;
   margin-bottom: 1.5rem;
   padding-bottom: 0.75rem;
-  border-bottom: 2px solid hsl(12 76% 48% / 0.4);
+  border-bottom: 2px solid hsl(var(--color-primary) / 0.4);
 }
 
 .prose h2 {
@@ -26,11 +26,11 @@
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -0.01em;
-  color: white;
+  color: hsl(var(--color-text));
   margin-top: 3.5rem;
   margin-bottom: 1rem;
   padding-left: 0.75rem;
-  border-left: 3px solid hsl(12 76% 48% / 0.5);
+  border-left: 3px solid hsl(var(--color-primary) / 0.5);
 }
 
 .prose h3 {
@@ -38,7 +38,7 @@
   font-size: clamp(1.25rem, 3vw, 1.625rem);
   font-weight: 600;
   line-height: 1.4;
-  color: hsl(0 0% 100% / 0.92);
+  color: hsl(var(--color-text) / 0.92);
   margin-top: 3rem;
   margin-bottom: 0.75rem;
 }
@@ -49,7 +49,7 @@
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 50%;
-  background: hsl(36 80% 52%);
+  background: hsl(var(--color-accent));
   margin-right: 0.625rem;
   vertical-align: middle;
   position: relative;
@@ -61,7 +61,7 @@
   font-size: clamp(1.065rem, 2.5vw, 1.25rem);
   font-weight: 600;
   line-height: 1.45;
-  color: hsl(0 0% 100% / 0.85);
+  color: hsl(var(--color-text) / 0.85);
   margin-top: 2.5rem;
   margin-bottom: 0.625rem;
 }
@@ -69,7 +69,7 @@
 .prose h4::before {
   content: '//';
   font-family: var(--font-mono);
-  color: hsl(36 80% 52%);
+  color: hsl(var(--color-accent));
   margin-right: 0.5rem;
   font-weight: 500;
 }
@@ -78,7 +78,7 @@
 .prose h2 + p,
 .prose h3 + p {
   font-size: 1.175rem;
-  color: hsl(0 0% 100% / 0.75);
+  color: hsl(var(--color-text) / 0.75);
   line-height: 1.85;
 }
 
@@ -88,25 +88,25 @@
 }
 
 .prose a {
-  color: hsl(12 76% 68%);
+  color: hsl(var(--color-primary) / 0.85);
   text-decoration: underline;
-  text-decoration-color: hsl(12 76% 58% / 0.3);
+  text-decoration-color: hsl(var(--color-primary) / 0.3);
   text-underline-offset: 3px;
   transition: text-decoration-color 0.2s;
 }
 
 .prose a:hover {
-  text-decoration-color: hsl(12 76% 58%);
+  text-decoration-color: hsl(var(--color-primary));
 }
 
 .prose blockquote {
   margin: 2rem 0;
   padding: 1rem 1.5rem;
-  border-left: 3px solid hsl(12 76% 58%);
-  background: hsl(240 10% 8%);
+  border-left: 3px solid hsl(var(--color-primary));
+  background: hsl(var(--color-surface));
   border-radius: 0 0.5rem 0.5rem 0;
   font-style: italic;
-  color: hsl(0 0% 100% / 0.75);
+  color: hsl(var(--color-text) / 0.75);
 }
 
 .prose blockquote p:last-child {
@@ -116,17 +116,17 @@
 .prose code {
   font-family: var(--font-mono);
   font-size: 0.875em;
-  background: hsl(240 10% 12%);
+  background: hsl(var(--color-surface-light));
   padding: 0.2em 0.4em;
   border-radius: 0.25rem;
-  color: hsl(31 97% 66%);
+  color: hsl(var(--color-accent));
 }
 
 .prose pre {
   margin: 2rem 0;
   padding: 1.5rem;
-  background: hsl(240 10% 6%);
-  border: 1px solid hsl(0 0% 100% / 0.08);
+  background: hsl(var(--color-bg));
+  border: 1px solid hsl(var(--color-text) / 0.08);
   border-radius: 0.75rem;
   overflow-x: auto;
 }
@@ -134,7 +134,7 @@
 .prose pre code {
   background: none;
   padding: 0;
-  color: hsl(0 0% 100% / 0.87);
+  color: hsl(var(--color-text) / 0.87);
 }
 
 .prose ul,
@@ -149,22 +149,22 @@
 }
 
 .prose li::marker {
-  color: hsl(12 76% 58%);
+  color: hsl(var(--color-primary));
 }
 
 .prose hr {
   margin: 3rem 0;
   border: none;
-  border-top: 1px solid hsl(0 0% 100% / 0.1);
+  border-top: 1px solid hsl(var(--color-text) / 0.1);
 }
 
 .prose strong {
-  color: white;
+  color: hsl(var(--color-text));
   font-weight: 600;
 }
 
 .prose em {
-  color: hsl(0 0% 100% / 0.9);
+  color: hsl(var(--color-text) / 0.9);
 }
 
 .prose img {