Palette dynamique dans BookPlayer et admin

- BookPlayer : toutes les couleurs HSL en dur remplacées par variables CSS palette
- Admin (sidebar, formulaires, pages, book, songs, messages, media, login) : idem
- L'ambiance graphique suit maintenant la palette active partout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/components/admin/AdminSidebar.vue

@@ -91,8 +91,8 @@ async function logout() {
 
 <style scoped>
 .admin-sidebar {
-  background: hsl(20 8% 5%);
-  border-right: 1px solid hsl(20 8% 14%);
+  background: hsl(var(--color-bg));
+  border-right: 1px solid hsl(var(--color-surface-light));
   display: flex;
   flex-direction: column;
   height: 100dvh;
@@ -102,7 +102,7 @@ async function logout() {
 
 .sidebar-header {
   padding: 1.25rem 1rem;
-  border-bottom: 1px solid hsl(20 8% 14%);
+  border-bottom: 1px solid hsl(var(--color-surface-light));
 }
 
 .sidebar-nav {
@@ -116,7 +116,7 @@ async function logout() {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: hsl(20 8% 40%);
+  color: hsl(var(--color-text-muted));
   padding: 1rem 0.75rem 0.375rem;
   margin: 0;
 }
@@ -128,7 +128,7 @@ async function logout() {
   padding: 0.5rem 0.75rem;
   border-radius: 0.5rem;
   font-size: 0.85rem;
-  color: hsl(20 8% 60%);
+  color: hsl(var(--color-text-muted));
   text-decoration: none;
   transition: all 0.2s;
   border: none;
@@ -138,18 +138,18 @@ async function logout() {
 }
 
 .sidebar-link:hover {
-  background: hsl(20 8% 10%);
+  background: hsl(var(--color-surface));
   color: white;
 }
 
 .sidebar-link--active {
-  background: hsl(12 76% 48% / 0.12);
-  color: hsl(12 76% 68%);
+  background: hsl(var(--color-primary) / 0.12);
+  color: hsl(var(--color-primary));
 }
 
 .sidebar-footer {
   padding: 0.5rem;
-  border-top: 1px solid hsl(20 8% 14%);
+  border-top: 1px solid hsl(var(--color-surface-light));
 }
 
 @media (max-width: 768px) {