/* Mise en page icône historique */
.music-icon-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: transparent; /* Supprime le fond */
border: none; /* Enlève toute bordure */
width: 40px;
height: 40px;
text-align: center;
cursor: pointer;
box-shadow: none; /* Enlève l'ombre du bouton */
z-index: 1000;
transition: background-color 0.3s;
}

.music-icon-button:hover {
background-color: transparent; /* Pas de changement de fond au survol */
}

.music-icon-button img {
width: 40px; /* Ajuste la taille de l'image */
height: 40px;
border-radius: 0; /* Supprime l'arrondi */
transition: transform 0.2s ease-in-out; /* Effet de zoom */
}

.music-icon-button:hover img {
transform: scale(1.2); /* Zoom de l'image au survol */
}

/* Mise en forme pop-up historique */
.history-popup {
position: fixed;
bottom: 80px;
right: 20px;
width: 320px;
max-height: 400px;
overflow-y: auto;
background: #fff;
border: 1px solid #ccc;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
padding: 1rem;
display: none;
z-index: 1000;
font-family: sans-serif;
color: #222;
}

.history-popup h3 {
margin-top: 0;
font-size: 1.2rem;
text-align: center;
color: #111;
}

.track-list {
list-style: none;
padding: 0;
margin: 0;
}

.track-list li {
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
font-size: 0.95rem;
color: #222; 
display: flex;
align-items: center;
}

.track-list li:last-child {
border-bottom: none;
}

.track-table {
 width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}

.track-table th, .track-table td {
padding: 8px;
border-bottom: 1px solid #eee;
text-align: left;
vertical-align: middle;
color: #222;
}

.track-table th {
background-color: #f8f8f8;
font-weight: bold;
color: #222;
}

.track-table img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 4px;
}