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/stores/palette.ts

@@ -0,0 +1,118 @@
+export type PaletteName = 'automne' | 'hiver' | 'printemps' | 'ete'
+
+interface PaletteColors {
+  primary: string
+  accent: string
+  surface: string
+  bg: string
+  surfaceLight: string
+  text: string
+  textMuted: string
+  isLight: boolean
+  label: string
+  icon: string
+}
+
+const palettes: Record<PaletteName, PaletteColors> = {
+  // ══════ DARK THEMES ══════
+
+  // Automne : cuivre chaud, feuilles mortes, terre brûlée
+  automne: {
+    primary: '18 80% 45%',       // cuivre profond
+    accent: '32 85% 50%',        // ambre doré
+    surface: '16 12% 9%',        // écorce sombre
+    bg: '16 12% 4%',             // terre noire
+    surfaceLight: '16 10% 14%',  // bois fumé
+    text: '0 0% 100%',
+    textMuted: '0 0% 60%',
+    isLight: false,
+    label: 'Automne',
+    icon: 'i-lucide-leaf',
+  },
+
+  // Hiver : bleu nuit, givre, argent lunaire
+  hiver: {
+    primary: '215 55% 52%',      // bleu nuit étoilé
+    accent: '195 40% 65%',       // givre argenté
+    surface: '220 15% 10%',      // ciel de minuit
+    bg: '225 18% 5%',            // nuit polaire
+    surfaceLight: '220 12% 15%', // brume nocturne
+    text: '0 0% 100%',
+    textMuted: '210 10% 60%',
+    isLight: false,
+    label: 'Hiver',
+    icon: 'i-lucide-snowflake',
+  },
+
+  // ══════ LIGHT THEMES ══════
+
+  // Printemps : vert tendre, rose cerisier, lumière fraîche
+  printemps: {
+    primary: '145 50% 38%',      // vert bourgeon
+    accent: '340 65% 55%',       // rose cerisier
+    surface: '120 12% 93%',      // rosée du matin
+    bg: '100 15% 96%',           // clarté verte
+    surfaceLight: '120 8% 87%',  // feuille pâle
+    text: '150 15% 12%',         // vert profond
+    textMuted: '140 8% 42%',     // mousse
+    isLight: true,
+    label: 'Printemps',
+    icon: 'i-lucide-flower-2',
+  },
+
+  // Été : doré solaire, turquoise mer, lumineux chaleureux
+  ete: {
+    primary: '25 85% 52%',       // soleil couchant
+    accent: '175 55% 42%',       // turquoise marin
+    surface: '40 25% 92%',       // sable clair
+    bg: '42 30% 96%',            // lumière dorée
+    surfaceLight: '38 18% 86%',  // dune
+    text: '30 20% 12%',          // terre chaude
+    textMuted: '30 10% 40%',     // ombre estivale
+    isLight: true,
+    label: 'Été',
+    icon: 'i-lucide-sun',
+  },
+}
+
+export const usePaletteStore = defineStore('palette', () => {
+  const currentPalette = ref<PaletteName>(
+    (import.meta.client && localStorage.getItem('palette') as PaletteName) || 'automne',
+  )
+
+  const colors = computed(() => palettes[currentPalette.value])
+  const isLight = computed(() => colors.value.isLight)
+
+  function applyToDOM() {
+    if (!import.meta.client) return
+    const c = colors.value
+    const root = document.documentElement
+    const s = root.style
+    s.setProperty('--color-primary', c.primary)
+    s.setProperty('--color-accent', c.accent)
+    s.setProperty('--color-surface', c.surface)
+    s.setProperty('--color-bg', c.bg)
+    s.setProperty('--color-surface-light', c.surfaceLight)
+    s.setProperty('--color-text', c.text)
+    s.setProperty('--color-text-muted', c.textMuted)
+    // Toggle light/dark class for CSS overrides
+    root.classList.toggle('palette-light', c.isLight)
+    root.classList.toggle('palette-dark', !c.isLight)
+    s.setProperty('color-scheme', c.isLight ? 'light' : 'dark')
+  }
+
+  function setPalette(name: PaletteName) {
+    currentPalette.value = name
+    if (import.meta.client) localStorage.setItem('palette', name)
+    applyToDOM()
+  }
+
+  return {
+    currentPalette,
+    colors,
+    palettes,
+    isLight,
+    setPalette,
+    applyToDOM,
+  }
+})