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

@@ -60,10 +60,10 @@
 
 @keyframes glow-pulse {
   0%, 100% {
-    box-shadow: 0 0 8px hsl(12 76% 48% / 0.3);
+    box-shadow: 0 0 8px hsl(var(--color-primary) / 0.3);
   }
   50% {
-    box-shadow: 0 0 24px hsl(12 76% 48% / 0.6);
+    box-shadow: 0 0 24px hsl(var(--color-primary) / 0.6);
   }
 }
 

app/assets/css/fonts.css

@@ -2,11 +2,11 @@
 /* This file provides fallback and utility classes */
 
 .font-display {
-  font-family: 'Syne', system-ui, sans-serif;
+  font-family: 'Outfit', system-ui, sans-serif;
 }
 
 .font-sans {
-  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-family: 'Inter', system-ui, sans-serif;
 }
 
 .font-mono {

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 {

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 {