/* Style général */
body {
    font-family: Arial, sans-serif;
}

/* Conteneur principal qui va aligner le lecteur et la liste côte à côte */
.main-container {
    display: flex; /* Active Flexbox */
    gap: 20px; /* Ajoute un espace entre les deux colonnes */
    max-width: 1000px;
    margin: 20px auto;
}

/* Style du conteneur du lecteur */
.player-container {
    flex: 1; /* Permet au lecteur de prendre une part de l'espace disponible */
    border: 2px solid #6cd900;
    border-radius: 18px;
    padding: 20px;
    text-align: center;
}

/* Style du conteneur de la liste de lecture */
.playlist-container {
    flex: 1; /* Permet à la liste de prendre une autre part de l'espace */
    border: 2px solid #6cd900;
    border-radius: 18px;
    padding: 20px;
    overflow-y: auto; /* Permet le défilement vertical pour les longues listes */
    max-height: 450px; /* Hauteur maximale pour la liste pour éviter qu'elle soit trop longue */
}

/* Styles pour les autres éléments */
.controls button {
    margin: 0 5px;
    padding: 10px 15px;
    cursor: pointer;
}

#playlist-list {
    list-style: none;
    padding: 0;
}

#playlist-list li {
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #b9f1c6;
    white-space: nowrap; /* Empêche le texte du titre de passer à la ligne */
    overflow: hidden; /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Affiche "..." pour les titres trop longs */
}

#playlist-list li.active {
    font-weight: bold;
    background-color: #a6ff4c;
}

/* Ajoute cette section à la fin de votre fichier style.css */
#audio-player {
    width: 100%; /* S'adapte à la largeur de son conteneur parent */
    max-width: 500px; /* Largeur maximale pour éviter qu'il ne devienne trop grand */
    height: 50px; /* Augmente la hauteur des contrôles si nécessaire */
}