/* ------------------ Variables CSS globales (thèmes clair et sombre) ------------------ */
:root {
  --bg: #f8fafc; /* Couleur de fond principale du thème clair */
  --text: #333; /* Couleur principale du texte pour assurer la lisibilité */
  --table-bg: #f5f5f5da; /* Couleur de fond utilisée pour les tableaux et inputs */
  --table-bg-rgb: 245, 245, 245; /* 🚨 NOUVELLE VARIABLE: Format RGB pour le thème clair - modal-constant*/
  --primary: #4caf50; /* Couleur principale, utilisée pour les boutons et accents */
  --danger: #e74c3c; /* Couleur d’alerte, utilisée pour indiquer un danger ou une erreur */
  --shadow: rgba(0, 0, 0, 0.1); /* Couleur et opacité de l’ombre portée globale */
  --font: "Inter", sans-serif; /* Police principale utilisée dans l'application */
  --hover-bg: #f5f5f5da; /* Couleur de fond utilisée lors du survol d’éléments */

  /* Variables supplémentaires pour verre dépoli et flou */
  --glass-bg-light: #f5f5f590; /* Fond verre dépoli clair */
  --blur-radius: 0px; /* Rayon de flou pour arrière-plan */

  /* Déclaration des variables CSS globales pour les couleurs utilisées dans les graphiques, définies dans la racine du document */
  --color-title: var(--text);      /* Couleur utilisée pour les titres, légendes, et axes, elle reprend la variable --text définie ailleurs */
  --color-dataset: var(--primary); /* Couleur principale des jeux de données (datasets) des graphiques, reprend la variable --primary */
  --color-legend: var(--text);     /* Couleur du texte des légendes, reprend la variable --text */
  --color-axis: var(--text);       /* Couleur des axes des graphiques, reprend aussi la variable --text */
}

/* Variables CSS pour le thème sombre activé via l'attribut data-theme="dark" */
[data-theme="dark"] {
  --bg: #1e1f23; /* Couleur de fond sombre */
  --text: #eee; /* Texte clair pour lisibilité sur fond sombre */
  --table-bg: #2b2d31; /* Fond sombre pour les tables et inputs */
  --table-bg-rgb: 43, 45, 49; /* 🚨 NOUVELLE VARIABLE: Format RGB pour le thème sombre - modal-constant */
  --primary: #63c384; /* Couleur principale adaptée au thème sombre */
  --danger: #e76b6b; /* Couleur d'alerte adaptée au thème sombre */
  --shadow: rgba(255, 255, 255, 0.05); /* Ombre légère adaptée au fond sombre */
  --hover-bg: #3a3c40; /* Couleur de survol adaptée pour le thème sombre */

  /* Variables verre dépoli sombre */
  --glass-bg-light: rgba(50, 50, 55, 0.6); /* Fond verre dépoli sombre */

  /* Redéfinition des mêmes variables pour le thème sombre via l'attribut data-theme="dark" */
  --color-title: var(--text);      /* Couleur des titres, adaptée au fond sombre */
  --color-dataset: var(--primary); /* Couleur des datasets dans thème sombre */
  --color-legend: var(--text);     /* Couleur des légendes dans thème sombre */
  --color-axis: var(--text);       /* Couleur des axes dans thème sombre */
}

/* ------------------ Style global du body avec arrière-plan flouté ------------------ */
body {
  font-family: var(--font); /* Police principale de l'application */
  color: var(--text); /* Couleur texte dynamique selon thème */
  margin: 10px 30px; /* Marges autour du contenu */
  font-size: 14px; /* Taille de texte globale */
  position: relative; /* Nécessaire pour positionner le pseudo-élément */
  transition: background 0.3s ease, color 0.3s ease; /* Transitions douces thème clair/sombre */

  /* Application de l’image de fond avec voile clair */
  background:
    linear-gradient(var(--bg), var(--bg)),
    url('../picture/background2.jpg') no-repeat center center fixed; /* Image de fond fixe */
  background-size: cover; /* Image couvrant tout le viewport */
}

/* Pseudo-élément pour appliquer le flou sur le fond sans impacter le contenu */
body::before {
  content: ""; /* Nécessaire pour afficher */
  position: fixed; /* Fixé sur toute la zone visible */
  top: 0; left: 0; right: 0; bottom: 0; /* Plein écran */
  background: url('../picture/background2.jpg') no-repeat center center fixed; /* Même image que body */
  background-size: cover; /* Taille adaptée */
  filter: blur(var(--blur-radius)); /* Application du flou */
  opacity: 0.8; /* Opacité relativement faible */
  z-index: -1; /* Derrière tout le contenu */
  transition: opacity 0.3s ease; /* Opacité animée au changement de thème */
}

/* Adaptation du pseudo-élément flou au thème sombre */
[data-theme="dark"] body::before {
  opacity: 0.35; /* Opacité plus faible pour moins éblouir */
}

/* ------------------ Effet verre dépoli sur sections principales ------------------ */
section,
#alertConfig,
#budgetInputsContainer {
  background-color: var(--glass-bg-light); /* Fond translucide */
  backdrop-filter: blur(10px); /* Flou derrière la zone */
  -webkit-backdrop-filter: blur(10px); /* Compatibilité Safari */
  border-radius: 12px; /* Bords arrondis */
  box-shadow: 0 4px 12px var(--shadow); /* Ombre discrète */
  padding: 15px; /* Espacement interne */
  color: var(--text); /* Couleur de texte dynamique */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transitions douces */
  /* 🚨 AJOUT : Permettre au conteneur des inputs de grandir et de défiler si besoin */
    flex-grow: 1; 
    overflow-y: auto; /* Ajoute une barre de défilement si le contenu est trop long */
}

/* Version sombre des fonds verre dépoli */
[data-theme="dark"] section,
[data-theme="dark"] #alertConfig,
[data-theme="dark"] #budgetInputsContainer {
  background-color: var(--glass-bg-light); /* Utilise variable adaptée au thème sombre */
  box-shadow: 0 4px 12px var(--shadow); /* Ombre adaptée */
  color: var(--text); /* Texte clair */
}

/* ------------------ Titres principaux ------------------ */

/* Styles pour les titres principaux centré, gras et espacé */
h1, h2, legend, axis {
  text-align: center; /* Centre horizontal */
  font-weight: 600; /* Gras medium */
  margin-bottom: 12px; /* Espacement */
  font-size: 1.3rem; /* Taille */
  background-color: #018d167e; /* Fond semi-transparent vert clair */
  color: var(--color-title); /* Attribue la couleur de titre dynamique à ces éléments */
}

/* ------------------ Alerte solde visible ------------------ */
#alerte-solde {
  position: fixed; /* Positionnement fixe à l’écran */
  bottom: 20px; /* Distance au bas de la fenêtre */
  right: 20px; /* Distance à droite */
  background-color: var(--danger); /* Rouge alerte dynamique */
  color: white; /* Texte blanc contrasté */
  padding: 15px 25px; /* Contenu interne */
  border-radius: 8px; /* Bords arrondis */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Ombres portées */
  font-weight: 700; /* Texte en gras */
  z-index: 9999; /* Au premier plan */
  display: none; /* Masquée par défaut */
  max-width: 300px; /* Largeur maximale */
}

/* ------------------ Modale et overlay ------------------ */
.modal {
  position: fixed; /* Occupation totale de l’écran */
  z-index: 1000; /* Devant la majorité du contenu */
  text-align: center; /* Centrage texte */
  font-weight: bold; /* Texte en gras */
  left: 0; /* Position en haut à gauche */
  top: 0;
  width: 100%; /* Pleine largeur */
  height: 100%; /* Pleine hauteur */
  overflow: auto; /* Barre si dépassement */
  background-color: rgba(68, 227, 113, 0.244); /* Fond semi-transparent vert clair */
  display: none; /* Masquée par défaut */

  /* 🚀 CORRECTION CENTRAGE AVEC FLEXBOX */
  display: flex; 
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
}

/* Style de contenu dans la modale */
.modal-content {
  background: var(--glass-bg-light), url('../picture/background2.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  margin: 0; /* 🚀 CORRECTION: Enlève le margin pour laisser Flexbox centrer */
  padding: 20px; /* Espacement interne */
  border-radius: 8px; /* Bords arrondis */
  width: 400px; /* Largeur fixe */
  max-width: 90%; /* Responsive */
  position: relative; /* Pour positionner la croix */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Ombre */
 /* 🚨 AJOUT DE LA POSITION FIXE ET CENTRAGE EN CSS */
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) !important; /* Centrage réel */
}

/* Bouton fermeture modale */
#closeBudgetModal {
  position: absolute; /* Absolu par rapport modal-content */
  top: 10px; right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  user-select: none; /* Empêche sélection */
}

/* Conteneur du toggle SON ALERTE(texte + interrupteur) */
.sound-toggle-container {
    display: flex;              /* aligne en ligne */
    align-items: center;        /* centre verticalement */
    gap: 10px;                  /* espace entre switch et label */
    font-size: 16px;
    margin: 10px 0;
}

/* Boîtier général du switch */
.switch {
    position: relative;
    display: inline-block;
    width: 44px !important;  /* Largeur fixe impérative */
    height: 22px !important; /* Hauteur fixe impérative */
    flex-shrink: 0;          /* Empêche le flexbox de l'écraser */
}

/* L’input checkbox réel (caché) */
.switch input {
    opacity: 0;  /* invisible */
    width: 0;
    height: 0;
}

/* Fond du slider (le bouton ON/OFF) */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: #ccc;     /* OFF = gris */
    transition: .3s;
    border-radius: 34px;        /* forme arrondie */
}

/* Le cercle blanc à l’intérieur */
.slider:before {
    position: absolute;
    content: "";
    height: 16px; /* Taille fixe */
    width: 16px;
    left: 3px;    /* Marge de 3px à gauche */  
    top: 3px;     
    background-color: white;
    transition: .3s;
    border-radius: 50%;         /* rond */
}

/* Quand le toggle est activé (ON) */
input:checked + .slider {
    background-color: #4CAF50;  /* vert */
}

/* Déplacement du cercle en mode ON */
/* On déplace de 24px car il a déjà un 'left' de 3px */
input:checked + .slider:before {
    transform: translateX(22px);
}

/* Label texte compatible thème dark/light */
.toggle-label {
    white-space: nowrap; /* Force le texte sur une seule ligne */
    font-size: 14px;
    margin-left: 5px; /* Espace entre le switch et le texte */
}

/* ------------------ Filtres (container) ------------------ */

/* Conteneur des filtres en flexbox centré et avec espacement */
.filters-container {
  display: flex; /* Flexbox pour alignement horizontal */
  justify-content: center; /* Centré horizontalement */
  flex-wrap: wrap; /* Passage à la ligne si trop étroit */
  gap: 12px 16px; /* Espacement entre éléments */
  margin-bottom: 15px;
  background-color: #5ca769; /* Fond vert clair pour la zone */
  transition: background-color 0.3s ease;
}

/* Adaptation thème sombre filtres */
[data-theme="dark"] .filters-container {
  background-color: #4a8f52; /* Vert foncé */
}

/* ------------------ Inputs et selects ------------------ */

/* Style des champs select et input */
select,
input[type="number"],
input[type="date"],
input[type="text"] {
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  /* 🚨 CORRECTION : Utiliser rgba pour la transparence */
  background: rgba(var(--table-bg-rgb), 0.1);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: border-color 0.3s ease;
}

/* 🚨 AJOUT DE LA RÈGLE SPÉCIFIQUE EN MODE SOMBRE POUR GARANTIR LE CONTRASTE */
/* Règle hyper-spécifique pour les inputs dans les cellules de tableau en mode sombre */
/* Ceci devrait écraser le fond blanc par défaut du navigateur */
[data-theme="dark"] td input,
[data-theme="dark"] td select {
  /* Forcer la couleur de fond spécifique du thème sombre */
  background-color: rgba(var(--table-bg-rgb), 0.7) !important; 
  color: var(--text) !important;
  border-color: #555 !important;
  color-scheme: dark; 
}

/* Hover et focus sur champs : changement de bordure */
select:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="text"]:hover,
select:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="text"]:focus {
  border-color: var(--primary);
  outline: none; 
}

/* Style boîte modale blanche */
.modal-content {
/* 🚨 NE LAISSEZ QUE LA COULEUR TRANSLUCIDE DYNAMIQUE (effet verre dépoli sans le blur) */
    background-color: var(--glass-bg-light); /* Laisse l'image du body passer */

    /* 🚨 AJOUT : Rendre le conteneur FLEXIBLE pour gérer la hauteur interne */
    display: flex; 
    flex-direction: column; /* Organiser les enfants verticalement */

    /* 🚨 AJOUT : Forcer le conteneur à occuper la hauteur maximale disponible */
    height: auto; 
    max-height: 90vh; /* Limite la hauteur à 90% du viewport */
    margin: 0; 
    padding: 20px; 
    border-radius: 8px; 
    width: 400px; 
    max-width: 90%; 
    position: relative; 
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); 
}

/* Bouton fermer modale en croix, position absolue */
#closeBudgetModal {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

/* ------------------ Formulaire budget ------------------ */

/* Conteneur du formulaire des budgets: marges entre items */
#budgetInputsContainer div {
  margin-bottom: 8px;
}

/* Labels alignés, largeur fixe, gras */
#budgetInputsContainer label {
  display: inline-block;
  width: 120px;
  font-weight: 600;
}

/* Style des inputs numériques dans la modale budget */
#budgetInputsContainer input[type="number"] {
  width: 100px;
  padding: 4px;
  font-size: 0.9rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  /* 🚨 CORRECTION : Utiliser rgba pour la transparence */
  background: rgba(var(--table-bg-rgb), 0.3); /* Rendre l'input 70% opaque */
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: border-color 0.3s ease;
}

/* Hover et focus sur champs numériques: changement bordure */
#budgetInputsContainer input[type="number"]:hover,
#budgetInputsContainer input[type="number"]:focus {
  border-color: var(--primary);
  outline: none;
}

/* ------------------ Input texte seuil alertes ------------------ */

/* Style input texte pour seuil alertes dans configuration */
#alertConfig input[type="text"]#revenueThresholds {
  width: 100%;
  padding: 8px;
  margin: 8px 0;
  font-size: 0.9rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: var(--table-bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: border-color 0.3s ease;
}

/* Hover et focus sur cet input */
#alertConfig input[type="text"]#revenueThresholds:hover,
#alertConfig input[type="text"]#revenueThresholds:focus {
  border-color: var(--primary);
  outline: none;
}

/* ------------------ Boutons communs ------------------ */

/* Style commun bouton sauvegarde & boutons alertes configuration */
#saveBudgetBtn,
#alertConfig button.btn,
#alertConfig button#applyAlertsConfig {
  margin: 10px 0;
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border-radius: 9px;
  border: none;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 7px rgba(76, 175, 80, 0.32);
  transition: background 0.3s ease, transform 0.25s ease;
}

/* Effet hover sur ces boutons */
#saveBudgetBtn:hover,
#alertConfig button.btn:hover,
#alertConfig button#applyAlertsConfig:hover {
  background: #45a049;
  transform: translateY(-2px);
}

/* ------------------ Totaux affichés sous forme de badges ------------------ */
#totaux {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 15px 0 30px;
}

/* Style des badges de totaux */
#totaux span {
  background: var(--table-bg);
  padding: 8px 16px;
  margin: 0 8px;
  border-radius: 14px;
  box-shadow: 0 3px 10px var(--shadow);
  display: inline-block;
}

/* ------------------ Tables et ligne posées ------------------ */
table {
  width: 100%;
  border-collapse: separate; /* Pour gérer espacements entre lignes */
  border-spacing: 0 6px; /* Espacement vertical entre lignes */
  font-size: 0.9rem;
  background: transparent;
  margin-bottom: 25px;
}

/* Style des en-têtes de tableau */
th {
  background: var(--primary);
  color: white;
  padding: 10px 12px;
  border-radius: 12px 12px 0 0;
  font-weight: 600;
}

/* Style des cellules */
td {
  background: var(--table-bg);
  padding: 10px 12px;
  text-align: center;
  color: var(--text);
  border-bottom: 6px solid transparent;
  transition: background 0.3s ease;
}

/* Effet hover sur les lignes */
tbody tr:hover td {
  background: var(--hover-bg);
}

/* Lignes paires en style alterné */
tbody tr:nth-child(even) td {
  background-color: var(--table-bg); /* ✅ Utilise le fond de table dynamique (sombre en mode sombre) */
}

/* ------------------ Boutons globaux ------------------ */
.btn {
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  border-radius: 9px;
  border: none;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 7px rgba(76, 175, 80, 0.32);
  transition: background 0.3s ease, transform 0.25s ease;
  margin: 5px 6px;
}
.btn-danger {
  background: var(--danger);
  box-shadow: 0 4px 8px rgba(231, 76, 60, 0.35);
}

/* Hover boutons normal */
.btn:hover {
  background: #45a049;
  transform: translateY(-2px);
}

/* Hover boutons danger */
.btn-danger:hover {
  background: #d94a39;
  transform: translateY(-2px);
}

/* ------------------ Barre de progression stylisée ------------------ */
.progress-bar {
  height: 18px;
  background: var(--primary);
  border-radius: 14px;
  color: var(--text); /* CORRECTION : Utilise la couleur de texte dynamique */
  text-align: center;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 18px;
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.6);
  transition: width 0.3s ease, background-color 0.3s ease;
}
[data-theme="dark"] .progress-bar {
  background: var(--primary-dark);
  color: var(--text); /* S'assure que le texte est clair */
  box-shadow: 0 2px 6px rgba(99, 195, 132, 0.6);
}

/* ------------------ Grille pour les graphiques ------------------ */
.charts-grid {
  display: grid; /* Mise en grille moderne */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Colonnes flexibles */
  gap: 20px; /* Espacement entre graphiques */
  margin-bottom: 30px;
}

/* Style des containers de graphiques */
.chart-container {
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  background: var(--table-bg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 320px;
  transition: box-shadow 0.3s ease;
}
/* Effet hover sur les containers graphiques */
.chart-container:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}
/* Règle spécifique pour rendre le texte du titre de la modale plus foncé en mode sombre */
[data-theme="dark"] .modal-content h3,
[data-theme="dark"] .modal-content h2,
[data-theme="dark"] .modal-content h1 {
    /* Utilise une couleur très foncée (presque noir) pour contraster avec le fond gris de la modale */
    color: #000; 
}

/* Ajout d'une apparence explicite pour garantir la cohérence */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select {
    /* Couleur du texte : doit être claire */
    color: #f1f1f1 !important; 
    
    /* Couleur de fond : doit être sombre et différente du texte */
    background-color: #333333 !important; 
    
    /* Couleur des bordures (pour contraste) */
    border-color: #555555 !important;
}

/* Assurez-vous que l'affichage de l'option sélectionnée dans les filtres est aussi correct */
[data-theme="dark"] select option {
    background-color: #333333;
    color: #f1f1f1;
}

/* ------------------ Fond de l'intérieur de la modale (budgetInputsContainer) ------------------ */

#budgetInputsContainer {
    /* Utiliser le background-color du thème pour la semi-transparence */
    background-color: var(--glass-bg-light); 
    
    /* Définir l'image et la taille, mais SANS background-attachment: fixed */
    background-image: url('../picture/background2.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Forcer le thème sombre */
[data-theme="dark"] #budgetInputsContainer {
    background-color: var(--glass-bg-light); /* Version sombre de la couleur translucide */
}
/* ------------------ Amélioration de la Lisibilité de la Modale ------------------ */

/* Fond semi-opaque derrière chaque ligne de budget pour améliorer le contraste */
#budgetInputsContainer div {
    /* Utilise le fond de table (blanc ou sombre) mais le rend légèrement transparent */
    background-color: rgba(var(--table-bg-rgb), 0.5); 
    padding: 5px;
    border-radius: 4px;
    margin-bottom: 8px; /* Maintient l'espacement original */
}

/* AJOUT POUR NEUTRALISER LA MARGE HORIZONTALE CONFLICTUELLE DE .btn DANS LA BARRE DE CONTRÔLE */
/* Permet au Flexbox de centrer le groupe correctement. */
#accountControls .btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ajustement du sound-toggle-container pour supprimer la marge verticale inutile */
.sound-toggle-container {
    /* Supprime la marge verticale qui peut perturber l'alignement Flexbox */
    margin: 0; 
    /* Assure que l'affichage est en ligne pour l'alignement */
    display: flex;
    align-items: center;
}

/* 🚨 NOTE IMPORTANTE: Pour que le code ci-dessus fonctionne, 
   vous devez définir les variables --table-bg-rgb dans :root et [data-theme="dark"]. 
   Cela permet d'utiliser une couleur dynamique avec une opacité. */

/* ------------------ OVERLAY MODAL POUR ALIGNEMENT HAUT (CHOIX DE COMPTE) ------------------ */

/* Le .modal est déjà défini plus haut dans votre CSS. Nous réutilisons sa structure 
   (position: fixed, fond sombre, z-index), mais le .modal-content (le contenu visible) 
   est modifié pour ne pas centrer à 50%/50% verticalement. 
*/

/* La classe .modal-overlay est ajoutée au div#accountTypeModal pour réutiliser la définition 
   de l'overlay semi-transparent.
*/
.modal-overlay {
    position: fixed; 
    z-index: 1001; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(68, 227, 113, 0.244); 
    display: none; /* ⬅️ On s'assure que l'overlay est caché par défaut */
    /* La propriété display: flex; sera appliquée par le JS (window.addAccount)
       UNIQUEMENT quand on clique sur le bouton pour l'afficher. */
    justify-content: center; 
}

/* Style spécifique au contenu de la modale de type de compte (reste inchangé) */
.account-type-content {
    position: absolute; 
    top: 100px; /* Ajustez au besoin */
    left: 50%; 
    transform: translateX(-50%); 
    
    width: 300px; 
    padding: 20px;
    background: var(--glass-bg-light), url('../picture/background2.jpg');
    background-attachment: fixed;
    background-size: cover;
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--shadow);
    z-index: 1002; 
}

/* ------------------ Modale et overlay (FIX DE CIBLAGE) ------------------ */

/* Ciblage de la modale de connexion UNIQUEMENT */
#loginModal {
  position: fixed;
  z-index: 9999; /* Très haut pour être devant tout */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent SÉCURISÉ */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Style spécifique pour le CONTENU de la modale de connexion */
.login-content {
    /* Utilise l'apparence verre dépoli pour le contenu interne */
    width: 350px;
    max-width: 90%;
    background-color: var(--glass-bg-light); /* Fond semi-transparent */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px var(--shadow);
    color: var(--text);
    text-align: center;
}

/* ------------------ Alignement des boutons et toggles à droite ------------------ */

#soundToggleContainer, .top-controls-container {
    display: flex;
    justify-content: flex-end; /* Pousse les éléments vers la droite */
    align-items: center;      /* Aligne verticalement au centre */
    gap: 15px;                 /* Espace entre le toggle, logout et delete */
    padding: 10px;
    width: 100%;
    box-sizing: border-box;    /* Évite que le padding ne dépasse de l'écran */
}

#logoutBtn, #deleteUserBtn {
    margin-left: 5px;
    padding: 8px 15px;
    border-radius: 20px;       /* Style arrondi pour matcher les toggles */
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Effet au survol pour ces boutons spécifiques */
#logoutBtn:hover, #deleteUserBtn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}