/* header.css - Styles spécifiques au header */

:root {
  /* Variables de base */
  --header-height: 70px;
  --header-bg-color: #ffffff;
  --header-text-color: #333333;
  --header-accent-color: #8A4FFF;
  --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  --header-transition: all 0.3s ease;
  
  --dropdown-bg: #ffffff;
  --dropdown-border-radius: 8px;
  --dropdown-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  --dropdown-item-hover: #f5f5f5;
  --dropdown-divider-color: #eeeeee;
  
  --danger-color: #e53935;
  
  /* Couleurs principales */
  --primary: #8A4FFF;
  --primary-light: #A77BFF;
  --primary-dark: #6E32DD;
  --accent: #FF7BAC;
  --white: #ffffff;
  --text-dark: #333333;
  --text-light: #666666;
  --bg-light: #f8f9fa;
  
  /* Bouton de composition */
  --compose-btn-bg: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  --compose-btn-text: var(--white);
  --compose-btn-shadow: 0 4px 12px rgba(138, 79, 255, 0.25);
  --compose-btn-hover-shadow: 0 6px 16px rgba(138, 79, 255, 0.4);
  
  /* Notifications */
  --notif-icon-bg: rgba(138, 79, 255, 0.1);
  --notif-icon-color: var(--primary);
  --notif-badge-bg: var(--accent);
  --notif-badge-color: var(--white);
  --notif-unread-bg: rgba(138, 79, 255, 0.05);
  --notif-hover-bg: #f5f7fa;
  --notif-panel-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  --notif-empty-color: #a0a0a0;
  
  /* Types d'icônes de notification */
  --notif-icon-comment: #50B5FF;
  --notif-icon-like: #FF5A87;
  --notif-icon-reply: #50CF9A;
  --notif-icon-song: #FFB443;
  
  /* Boutons */
  --button-primary-bg: #8A4FFF;
  --button-primary-color: #ffffff;
  --button-primary-hover: #6E32DD;
  --button-secondary-bg: transparent;
  --button-secondary-color: #8A4FFF;
  --button-secondary-border: #8A4FFF;
  --button-secondary-hover-bg: #8A4FFF;
  --button-secondary-hover-color: #ffffff;
}

/* Base styles pour le header */
.site-header {
  height: var(--header-height);
  background-color: var(--header-bg-color);
  box-shadow: var(--header-shadow);
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: var(--header-transition);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Logo styles */
.header-logo {
  display: flex;
  align-items: center;
}

.logo-link {
  display: block;
}

.logo-img {
  height: 40px;
  width: auto;
}

/* Navigation menu */
.header-navigation {
  display: flex;
  height: 100%;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.nav-item {
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0 15px;
}

.nav-link {
  display: flex;
  align-items: center;
  color: var(--header-text-color);
  font-weight: 500;
  text-decoration: none;
  padding: 0 5px;
  position: relative;
  transition: var(--header-transition);
}

.nav-link i {
  margin-right: 8px;
  font-size: 1rem;
}

.nav-link.active,
.nav-link:hover {
  color: var(--header-accent-color);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--header-accent-color);
  border-radius: 3px 3px 0 0;
}

/* Styles du bouton de composition (Créer) */
.compose-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--compose-btn-bg);
  color: var(--compose-btn-text);
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: var(--compose-btn-shadow);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.compose-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.compose-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--compose-btn-hover-shadow);
}

.compose-btn:hover::before {
  opacity: 1;
}

.compose-btn:active {
  transform: translateY(0);
  box-shadow: var(--compose-btn-shadow);
}

.compose-btn__icon {
  margin-right: 8px;
  position: relative;
}

.compose-btn__icon i {
  font-size: 1rem;
}

/* Animation pulsante du bouton */
.compose-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border-radius: 50px;
  background: inherit;
  opacity: 0;
  z-index: -2;
  transform: translate(-50%, -50%);
  animation: composeBtnPulse 2.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes composeBtnPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.5;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}

/* Header actions area */
.header-actions {
  display: flex;
  align-items: center;
}

/* Centre de notifications */
.notif-center {
  position: relative;
  margin-right: 15px;
}

.notif-center__toggle {
  background: none;
  border: none;
  color: var(--text-dark);
  font-size: 1.15rem;
  cursor: pointer;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
}

.notif-center__toggle:hover {
  background-color: var(--notif-icon-bg);
  color: var(--notif-icon-color);
}

.notif-center__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: var(--notif-badge-bg);
  color: var(--notif-badge-color);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(255, 123, 172, 0.3);
  border: 2px solid var(--white);
  transform-origin: center;
  animation: notifBadgePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes notifBadgePop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Panel de notifications */
.notif-panel {
  position: absolute;
  top: calc(100% + 15px);
  right: -10px;
  width: 340px;
  background-color: var(--white);
  border-radius: 12px;
  box-shadow: var(--notif-panel-shadow);
  overflow: hidden;
  z-index: 1001;
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.notif-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.notif-panel::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 25px;
  width: 16px;
  height: 16px;
  background-color: var(--white);
  transform: rotate(45deg);
  box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.04);
  z-index: -1;
}

.notif-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.notif-panel__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-dark);
}

.notif-panel__action {
  font-size: 0.8rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.notif-panel__action:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.notif-panel__body {
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.notif-panel__body::-webkit-scrollbar {
  width: 5px;
}

.notif-panel__body::-webkit-scrollbar-track {
  background: transparent;
}

.notif-panel__body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

/* Items de notification */
.notif-item {
  display: flex;
  align-items: flex-start;
  padding: 15px 20px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background-color 0.2s ease;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item:hover {
  background-color: var(--notif-hover-bg);
}

.notif-item--unread {
  background-color: var(--notif-unread-bg);
  position: relative;
}

.notif-item--unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--primary);
  border-radius: 0 3px 3px 0;
}

.notif-item__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: var(--notif-icon-bg);
  color: var(--notif-icon-color);
  margin-right: 15px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.notif-item:hover .notif-item__icon {
  transform: scale(1.05);
}

/* Couleurs spécifiques selon le type de notification */
.notif-item__icon--comment {
  background-color: rgba(80, 181, 255, 0.1);
  color: var(--notif-icon-comment);
}

.notif-item__icon--like {
  background-color: rgba(255, 90, 135, 0.1);
  color: var(--notif-icon-like);
}

.notif-item__icon--comment_reply {
  background-color: rgba(80, 207, 154, 0.1);
  color: var(--notif-icon-reply);
}

.notif-item__icon--song_completed {
  background-color: rgba(255, 180, 67, 0.1);
  color: var(--notif-icon-song);
}

.notif-item__content {
  flex-grow: 1;
}

.notif-item__message {
  font-size: 0.9rem;
  margin: 0 0 5px;
  line-height: 1.4;
  color: var(--text-dark);
}

.notif-item__time {
  font-size: 0.75rem;
  color: var(--text-light);
  display: block;
}

/* État vide */
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px 20px;
  text-align: center;
}

.notif-empty__icon {
  width: 60px;
  height: 60px;
  background-color: var(--bg-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.notif-empty__icon i {
  font-size: 1.5rem;
  color: var(--notif-empty-color);
}

.notif-empty__message {
  font-size: 0.95rem;
  color: var(--text-light);
  margin: 0;
}

/* Pied de panel */
.notif-panel__footer {
  padding: 12px 0;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.notif-panel__link {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.notif-panel__link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* User menu styles */
.user-wrapper {
  position: relative;
}

.user-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 30px;
  transition: var(--header-transition);
}

.user-toggle:hover {
  background-color: var(--dropdown-item-hover);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--header-accent-color);
  margin-right: 8px;
}

.user-name {
  font-size: 0.9rem;
  font-weight: 500;
  margin-right: 5px;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background-color: var(--dropdown-bg);
  border-radius: var(--dropdown-border-radius);
  width: 220px;
  box-shadow: var(--dropdown-shadow);
  display: none;
  z-index: 1001;
  overflow: hidden;
}

.user-dropdown.active {
  display: block;
  animation: fadeInDown 0.3s ease;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  color: var(--header-text-color);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--header-transition);
}

.dropdown-item:hover {
  background-color: var(--dropdown-item-hover);
  color: var(--header-accent-color);
}

.dropdown-item i {
  width: 20px;
  margin-right: 12px;
  text-align: center;
}

.dropdown-divider {
  height: 1px;
  background-color: var(--dropdown-divider-color);
  margin: 5px 0;
}

.danger-item {
  color: var(--danger-color);
}

.danger-item:hover {
  background-color: rgba(229, 57, 53, 0.1);
  color: var(--danger-color);
}

/* Login/Register buttons */
.login-button, .register-button {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--header-transition);
}

.login-button {
  color: var(--button-secondary-color);
  background-color: var(--button-secondary-bg);
  border: 2px solid var(--button-secondary-border);
  margin-right: 10px;
}

.login-button:hover {
  background-color: var(--button-secondary-hover-bg);
  color: var(--button-secondary-hover-color);
}

.register-button {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-color);
  border: 2px solid var(--button-primary-bg);
}

.register-button:hover {
  background-color: var(--button-primary-hover);
  border-color: var(--button-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(138, 79, 255, 0.2);
}

.login-button i, .register-button i {
  margin-right: 8px;
}

/* Mobile menu toggle */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.toggle-bar {
  width: 100%;
  height: 3px;
  background-color: var(--header-text-color);
  border-radius: 3px;
  transition: var(--header-transition);
}

/* Animation for fadeIn effect */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation de la cloche */
@keyframes bellRing {
  0% { transform: rotate(0); }
  15% { transform: rotate(15deg); }
  30% { transform: rotate(-15deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-10deg); }
  75% { transform: rotate(5deg); }
  85% { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}

.bell-ring i {
  animation: bellRing 0.8s cubic-bezier(.36,.07,.19,.97) both;
  transform-origin: top center;
}

/* Responsive styles */
@media (max-width: 992px) {
  .user-name {
    display: none;
  }
  
  .login-button span, .register-button span {
    display: none;
  }
  
  .login-button, .register-button {
    padding: 8px;
    width: 40px;
    height: 40px;
    justify-content: center;
  }
  
  .login-button i, .register-button i {
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  .header-navigation {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--header-bg-color);
    box-shadow: var(--header-shadow);
    height: auto;
    z-index: 999;
  }
  
  .header-navigation.active {
    display: block;
  }
  
  .nav-menu {
    flex-direction: column;
    height: auto;
    padding: 20px 0;
  }
  
  .nav-item {
    width: 100%;
    height: auto;
    margin: 0;
  }
  
  .nav-link {
    width: 100%;
    padding: 15px 20px;
  }
  
  .nav-link.active::after {
    display: none;
  }
  
  .mobile-toggle {
    display: flex;
    margin-left: 15px;
  }
  
  .mobile-toggle.active .toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  
  .mobile-toggle.active .toggle-bar:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-toggle.active .toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  
  .notif-panel, .user-dropdown {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - var(--header-height));
    border-radius: 0;
  }
  
  .notif-panel::before, .user-dropdown::before {
    display: none;
  }
  
  .notif-panel__body {
    max-height: calc(100vh - var(--header-height) - 120px);
  }
}

/* Transparent header styles for home page */
body.home-page .site-header {
  background-color: rgba(255, 255, 255, 0.95); /* Légère transparence au lieu de complètement transparent */
  box-shadow: var(--header-shadow);
}

body.home-page.header-scrolled .site-header {
  background-color: var(--header-bg-color);
  box-shadow: var(--header-shadow);
}

/* Supprimer ou remplacer ces règles qui rendent le texte blanc */
/* Ces lignes causaient le problème */
body.home-page .nav-link {
  color: var(--header-text-color); /* Au lieu de white */
}

body.home-page .nav-link.active,
body.home-page .nav-link:hover {
  color: var(--header-accent-color); /* Au lieu de var(--badge-bg) */
}

body.home-page .login-button {
  border-color: var(--button-secondary-border); /* Au lieu de white */
  color: var(--button-secondary-color); /* Au lieu de white */
}

body.home-page .notif-center__toggle,
body.home-page .user-toggle {
  color: var(--header-text-color); /* Au lieu de white */
}

body.home-page .toggle-bar {
  background-color: var(--header-text-color); /* Au lieu de white */
}

/* Ces règles ne sont plus nécessaires car nous ne passons plus du blanc au texte foncé */
body.home-page.header-scrolled .nav-link,
body.home-page.header-scrolled .notif-center__toggle,
body.home-page.header-scrolled .user-toggle {
  color: var(--header-text-color);
}

body.home-page.header-scrolled .toggle-bar {
  background-color: var(--header-text-color);
}

body.home-page.header-scrolled .login-button {
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-color);
}
/**
 * Styles pour les notifications de messages dans le header
 * Ajoutez ce code à votre fichier header.css existant
 */

/* Message notification */
.message-notification {
    position: relative;
    margin-right: 15px;
}

.message-notification-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.message-notification-btn:hover {
    background-color: rgba(var(--primary-rgb), 0.2);
}

.message-notification-btn i {
    font-size: 1.2rem;
}

.message-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background-color: var(--error);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0 5px;
}

Création du mode sombre pour vos fichiers CSS
Je vais créer une version dark mode pour chacun de vos fichiers CSS. Je vais les traiter un par un comme demandé.
1. main.css
Je vois que votre fichier main.css contient déjà des variables pour le mode sombre, mais on peut les améliorer et rendre la compatibilité plus complète:
css/* Mode sombre */
[data-theme="dark"] {
    /* Palette de couleurs - version sombre */
    --color-primary: #A77DFF;       /* Mauve principal plus clair pour contraste */
    --color-primary-light: #BEA0FF; /* Mauve clair */
    --color-primary-dark: #8A4FFF;  /* Notre mauve initial devient le foncé */
    --color-secondary: #FF9BBF;     /* Rose/Fuchsia légèrement plus clair */
    --color-text: #E0E0E0;          /* Texte principal clair */
    --color-text-light: #AAAAAA;    /* Texte secondaire gris clair */
    --color-background: #121212;    /* Fond principal (gris très foncé) */
    --color-background-alt: #1E1E1E; /* Fond alternatif (gris foncé) */
    --color-border: #333333;        /* Bordure standard plus foncée */
    --color-success: #50B5AA;       /* Vert validations adapté */
    --color-warning: #FFBE33;       /* Jaune avertissements adapté */
    --color-danger: #FF5A80;        /* Rouge erreurs adapté */
    --color-info: #30A0C8;          /* Bleu informations adapté */
    
    /* Ombres plus prononcées pour le mode sombre */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.6);
}

/* Éléments spécifiques qui nécessitent des ajustements en mode sombre */
[data-theme="dark"] .site-header {
    background-color: #1A1A1A;
    border-bottom-color: #333333;
}

[data-theme="dark"] .footer-bottom {
    background-color: #1A1A1A;
}

[data-theme="dark"] .card,
[data-theme="dark"] .song-card {
    background-color: #1E1E1E;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #2D2D2D;
    border-color: #444444;
    color: var(--color-text);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(167, 125, 255, 0.2);
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .compose-btn {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .compose-btn:hover {
    background-color: var(--color-primary-dark);
}

/* Mode sombre pour le player audio */
[data-theme="dark"] #persistent-player {
    background-color: #1A1A1A;
    border-top-color: #333333;
}

[data-theme="dark"] .player-controls .control-button {
    color: var(--color-text);
    background-color: #2D2D2D;
}

[data-theme="dark"] .player-controls .control-main {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

[data-theme="dark"] .progress-bar {
    background-color: #444444;
}

[data-theme="dark"] .progress-current {
    background-color: var(--color-primary);
}

/* Notifications en mode sombre */
[data-theme="dark"] .notif-panel,
[data-theme="dark"] .user-dropdown {
    background-color: #1E1E1E;
    box-shadow: var(--shadow-md);
    border-color: #333333;
}

[data-theme="dark"] .notif-item:hover,
[data-theme="dark"] .dropdown-item:hover {
    background-color: #2A2A2A;
}

[data-theme="dark"] .notif-item--unread {
    background-color: rgba(167, 125, 255, 0.1);
}

/* Ajout de styles pour le dropdown */
[data-theme="dark"] .dropdown-menu {
    background-color: #1E1E1E;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid #333333;
}

[data-theme="dark"] .dropdown-item {
    color: var(--color-text);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: #2A2A2A;
}

[data-theme="dark"] .dropdown-divider {
    background-color: #333333;
}

/* Ajouts pour les formulaires */
[data-theme="dark"] .form-control {
    background-color: #2D2D2D;
    border-color: #444444;
    color: var(--color-text);
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(167, 125, 255, 0.25);
}

[data-theme="dark"] .form-text {
    color: #AAAAAA;
}

/* Ajustements pour les cartes */
[data-theme="dark"] .card-header {
    background-color: #242424;
    border-bottom-color: #333333;
}

[data-theme="dark"] .card-footer {
    background-color: #242424;
    border-top-color: #333333;
}

/* Toast notifications */
[data-theme="dark"] .toast-notification {
    background-color: #1E1E1E;
    color: var(--color-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Transitions douces pour le changement de thème */
body,
.site-header,
.footer,
.card,
.song-card,
input,
textarea,
select,
button,
.notif-panel,
.user-dropdown,
#persistent-player {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
2. header.css
css/* Mode sombre pour header.css */
[data-theme="dark"] {
    --header-bg-color: #181818;
    --header-text-color: #E0E0E0;
    --header-accent-color: #A77DFF;
    --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    
    --dropdown-bg: #242424;
    --dropdown-border-radius: 8px;
    --dropdown-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    --dropdown-item-hover: #2A2A2A;
    --dropdown-divider-color: #333333;
    
    --danger-color: #FF5A80;
    
    /* Couleurs principales */
    --primary: #A77DFF;
    --primary-light: #BEA0FF;
    --primary-dark: #8A4FFF;
    --accent: #FF9BBF;
    --white: #121212;
    --text-dark: #E0E0E0;
    --text-light: #AAAAAA;
    --bg-light: #1E1E1E;
    
    /* Bouton de composition */
    --compose-btn-shadow: 0 4px 12px rgba(138, 79, 255, 0.4);
    --compose-btn-hover-shadow: 0 6px 16px rgba(138, 79, 255, 0.5);
    
    /* Notifications */
    --notif-icon-bg: rgba(167, 125, 255, 0.2);
    --notif-unread-bg: rgba(167, 125, 255, 0.15);
    --notif-hover-bg: #2A2A2A;
    --notif-panel-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    --notif-empty-color: #777777;
}

/* Styles spécifiques pour l'en-tête en mode sombre */
[data-theme="dark"] .site-header {
    background-color: var(--header-bg-color);
    box-shadow: var(--header-shadow);
}

[data-theme="dark"] .nav-link {
    color: var(--header-text-color);
}

[data-theme="dark"] .nav-link:hover {
    background-color: rgba(167, 125, 255, 0.15);
}

[data-theme="dark"] .compose-btn {
    box-shadow: var(--compose-btn-shadow);
}

[data-theme="dark"] .compose-btn:hover {
    box-shadow: var(--compose-btn-hover-shadow);
}

[data-theme="dark"] .notification-btn,
[data-theme="dark"] .user-toggle {
    background-color: #2D2D2D;
    color: var(--header-text-color);
}

[data-theme="dark"] .notification-btn:hover,
[data-theme="dark"] .user-toggle:hover {
    background-color: #3A3A3A;
}

[data-theme="dark"] .user-avatar {
    border-color: var(--header-accent-color);
}

[data-theme="dark"] .notification-menu,
[data-theme="dark"] .user-dropdown {
    background-color: var(--dropdown-bg);
    box-shadow: var(--dropdown-shadow);
}

[data-theme="dark"] .notification-header,
[data-theme="dark"] .dropdown-header {
    border-bottom-color: #333333;
}

[data-theme="dark"] .notification-item,
[data-theme="dark"] .dropdown-item {
    border-bottom-color: #333333;
}

[data-theme="dark"] .notification-item:hover,
[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--dropdown-item-hover);
}

[data-theme="dark"] .notification-text {
    color: var(--header-text-color);
}

[data-theme="dark"] .notification-time {
    color: var(--text-light);
}

[data-theme="dark"] .notification-footer,
[data-theme="dark"] .dropdown-footer {
    border-top-color: #333333;
}

[data-theme="dark"] .notif-empty__icon {
    background-color: #2D2D2D;
}

[data-theme="dark"] .dropdown-divider {
    background-color: var(--dropdown-divider-color);
}

[data-theme="dark"] .login-button {
    border-color: var(--header-accent-color);
    color: var(--header-accent-color);
}

[data-theme="dark"] .login-button:hover {
    background-color: var(--header-accent-color);
    color: #121212;
}

[data-theme="dark"] .toggle-bar {
    background-color: var(--header-text-color);
}

/* Message notification badge */
[data-theme="dark"] .message-notification-btn {
    background-color: rgba(167, 125, 255, 0.2);
}

[data-theme="dark"] .theme-switch .slider {
    background-color: #2D2D2D;
    border-color: #444444;
}

[data-theme="dark"] .slider-icon.sun {
    color: #FFC107;
}

[data-theme="dark"] .slider-icon.moon {
    color: #E0E0E0;
}