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>
This commit is contained in:
Yvv
2026-02-23 03:35:45 +01:00
parent 6f422a7369
commit ac4aff4985
43 changed files with 1362 additions and 302 deletions

View File

@@ -20,9 +20,10 @@ export default defineConfig({
presetWebFonts({
provider: 'bunny',
fonts: {
display: 'Syne:400,500,600,700,800',
sans: 'Space Grotesk:300,400,500,600,700',
display: 'Outfit:400,500,600,700,800',
sans: 'Inter:300,400,500,600,700',
mono: 'JetBrains Mono:400,500,700',
calligraphy: 'Playfair Display:400,700',
},
}),
],
@@ -33,47 +34,47 @@ export default defineConfig({
theme: {
colors: {
primary: {
DEFAULT: 'hsl(12, 76%, 48%)',
50: 'hsl(12, 76%, 95%)',
100: 'hsl(12, 76%, 88%)',
200: 'hsl(12, 76%, 76%)',
300: 'hsl(12, 76%, 64%)',
400: 'hsl(12, 76%, 56%)',
500: 'hsl(12, 76%, 48%)',
600: 'hsl(12, 76%, 40%)',
700: 'hsl(12, 76%, 33%)',
800: 'hsl(12, 76%, 26%)',
900: 'hsl(12, 76%, 18%)',
DEFAULT: 'hsl(var(--color-primary))',
50: 'hsl(18, 80%, 95%)',
100: 'hsl(18, 80%, 88%)',
200: 'hsl(18, 80%, 76%)',
300: 'hsl(18, 80%, 64%)',
400: 'hsl(18, 80%, 56%)',
500: 'hsl(var(--color-primary))',
600: 'hsl(18, 80%, 38%)',
700: 'hsl(18, 80%, 30%)',
800: 'hsl(18, 80%, 24%)',
900: 'hsl(18, 80%, 16%)',
},
accent: {
DEFAULT: 'hsl(36, 80%, 52%)',
50: 'hsl(36, 80%, 95%)',
100: 'hsl(36, 80%, 88%)',
200: 'hsl(36, 80%, 76%)',
300: 'hsl(36, 80%, 66%)',
400: 'hsl(36, 80%, 58%)',
500: 'hsl(36, 80%, 52%)',
600: 'hsl(36, 80%, 44%)',
700: 'hsl(36, 80%, 36%)',
800: 'hsl(36, 80%, 28%)',
900: 'hsl(36, 80%, 20%)',
DEFAULT: 'hsl(var(--color-accent))',
50: 'hsl(32, 85%, 95%)',
100: 'hsl(32, 85%, 88%)',
200: 'hsl(32, 85%, 76%)',
300: 'hsl(32, 85%, 66%)',
400: 'hsl(32, 85%, 58%)',
500: 'hsl(var(--color-accent))',
600: 'hsl(32, 85%, 42%)',
700: 'hsl(32, 85%, 34%)',
800: 'hsl(32, 85%, 26%)',
900: 'hsl(32, 85%, 18%)',
},
surface: {
DEFAULT: 'hsl(20, 8%, 8%)',
50: 'hsl(20, 8%, 22%)',
100: 'hsl(20, 8%, 18%)',
200: 'hsl(20, 8%, 13%)',
300: 'hsl(20, 8%, 10%)',
400: 'hsl(20, 8%, 8%)',
500: 'hsl(20, 8%, 6%)',
600: 'hsl(20, 8%, 4%)',
bg: 'hsl(20, 8%, 3.5%)',
DEFAULT: 'hsl(var(--color-surface))',
50: 'hsl(16, 12%, 22%)',
100: 'hsl(16, 12%, 18%)',
200: 'hsl(16, 12%, 13%)',
300: 'hsl(16, 12%, 10%)',
400: 'hsl(var(--color-surface))',
500: 'hsl(16, 12%, 6%)',
600: 'hsl(16, 12%, 4%)',
bg: 'hsl(var(--color-bg))',
},
},
},
shortcuts: {
'btn-primary': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-primary text-white font-display font-semibold tracking-wide transition-all duration-200 hover:bg-primary-600 hover:scale-105 active:scale-95',
'btn-accent': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-accent text-surface-bg font-display font-semibold tracking-wide transition-all duration-200 hover:bg-accent-600 hover:scale-105 active:scale-95',
'btn-primary': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-primary text-white font-display font-semibold tracking-wide border-none transition-all duration-200 hover:bg-primary-600 hover:scale-105 active:scale-95',
'btn-accent': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-accent text-surface-bg font-display font-semibold tracking-wide border-none transition-all duration-200 hover:bg-accent-600 hover:scale-105 active:scale-95',
'btn-ghost': 'inline-flex items-center justify-center px-4 py-2 rounded-lg border-none text-white/70 font-sans transition-all duration-200 hover:bg-white/10 hover:text-white',
'card-surface': 'rounded-xl bg-surface border border-white/8 p-6 transition-all duration-300 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5',
'text-gradient': 'bg-gradient-to-r from-primary-300 to-accent bg-clip-text text-transparent',