body {
    font-family: 'Saira Extra Condensed', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #be2166;
    background: linear-gradient(135deg, #de4c4c, #be2166, #8423d5);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color: #fff;
    max-width: 100vw;
}
@keyframes gradient {
	0% {		background-position: 0% 50%;	}
	50% {		background-position: 100% 50%;	}
	100% {		background-position: 0% 50%;	}
}

.music-player {
    display: flex;
    justify-content: center;
    width: 80%;
    max-width: 1200px;
    background: transparent; /* Fond transparent */
    border-radius: 10px;
    position: relative;
    max-height: 520px;
}

.current-track {
  position: relative;
    width: 50%;
    padding: 20px;
    text-align: center;
    background: linear-gradient(135deg, #2a2c43, #0d0f25); /* Nouveau dégradé */
    border-radius: 10px; /* Ajout pour arrondir les coins */
    box-shadow: 0 0 50px #1e1a2b; /* Ajout du box-shadow */
}

.current-track img {
    width: 100%;
    border-radius: 5px;
    max-width: 250px;
}

.album-art {
    position: relative;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
}

.album-art img {
    width: 100%;
    border-radius: 5px 0 0 5px;
    display: block;
}

#track-image {
    position: relative;
    z-index: 1; /* Assure que la pochette est au-dessus */
    box-shadow: 0 0 25px #10062b; /* Ajout du box-shadow */
    transform: translateX(0);
    transition:0.4s;
}
#track-image.playing {
  transform: translateX(-25px);
}
#vinyl-image {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0; /* Assure que le disque vinyle est en dessous */
    transition: right 0.4s ease-in-out; /* Ajout d'une transition pour l'effet de déplacement */
    animation: spin 5s linear infinite; /* Animation de rotation */
    filter: drop-shadow(0 0 3px #00000080);
}

#vinyl-image.playing {
  right: -55px; /* Déplacement vers la droite lors de la lecture */
  left: auto;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


.controls {
    display: flex; /* Ajout de display flex */
    justify-content: center; /* Centrer les éléments */
    margin: 20px 0;
}

.controls button {
    width: 50px; /* Largeur par défaut */
    height: 50px; /* Hauteur par défaut */
    font-size: 2em; /* Taille de police par défaut */
    background: transparent; /* Fond transparent par défaut */
    border: none;
    color: #de4c4c; /* Couleur du texte */
    cursor: pointer;
    border-radius: 50%; /* Cercle */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: auto 5px; /* Ajout de la marge */
}

.controls button:hover {
  background-color: #be2166;
  background: linear-gradient(135deg, #de4c4c, #be2166, #8423d5);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
    color: #fff;
}



#shuffle-btn, #edit-btn, #menu-toggle, .close-btn  {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: 0.4s;
}

#shuffle-btn:hover, #menu-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}
#edit-btn:hover, .close-btn:hover {
   background: rgba(0, 0, 0, 0.9);
}

#menu-toggle{top:10px;right:10px;}

#shuffle-btn {top: 10px;left: 10px;}

a#edit-btn {bottom: 10px;left: 10px; font-size: 1em;text-decoration: none;}

.close-btn {position: fixed;top: 10px;right: 425px;}


.controls button#play-pause-btn {
    font-size: 3em;
    width: 75px;
    height: 75px;
    color: #fff;
    background-color: #be2166;
    background: linear-gradient(135deg, #de4c4c, #be2166, #8423d5);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite; /* Fond dégradé pour le bouton play/pause */
}

.fa-play {
  padding-right: 5px;
}

.controls button#play-pause-btn:hover {
    color: #de4c4c; /* Changer la couleur du texte au survol */
    background: #fff; /* Changer le fond au survol */
}

.track-list {
    display: none;
    transition: 0.3s;
    width: 0;
    padding: 20px;
    max-height: calc(100vh - 40px);
    background: linear-gradient(135deg, #1b1d37, #454977); /* Nouveau dégradé */
    box-shadow: 0 0 50px #1e1a2b; /* Ajout du box-shadow */
    scrollbar-color: #454976 #313459;
    scrollbar-width: thin;
    max-width: 375px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    height: 100%;
}

.track-list.active {
    display: flex;
    flex-direction: column;
    padding: 20px;
    width: 50%;
}

.track-list.fullscreen {
    width: 100%;
    height: 100%;
    z-index: 999;
}

.track-list h3 {
  margin: 0; /* Suppression des marges */
  border-left: 8px solid #454976; /* Ajout de la bordure à gauche */
  padding: 5px; /* Ajout du padding */
  margin-bottom: 8px; /* Ajout de la marge inférieure */
  background: #3e406842;
  width: calc(100% - 20px);
}

h3 i {margin-right:5px;font-size:0.8em;}

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

.track-list li {
    border-left: 4px solid #d03957; /* Bordure à gauche */
    padding: 0 10px; /* Espacement interne */
    margin-bottom: 3px; /* Espacement entre les éléments de la liste */
    font-weight: 600;
    transition: 0.2s;
    cursor: pointer;
    text-transform: capitalize;
}

.track-list li:hover {
  border-left: 8px solid #d03957;
    background: #b0334f5e; /* Couleur de fond au survol */
}
.track-list li.playing-track {
    border-left: 1px solid #b0337f;
    background: #b0337f5e; /* Fond semi-transparent pour la musique en cours */
    padding: 0 10px 0 5px;
}
.track-list li.playing-track .fa-music {
  color: #b0337f;margin-right: 5px;
  animation: play 2s ease infinite;
}
@keyframes play {
	0% {transform: translateY(-2px);;}
	50% {transform: translateY(2px);;}
	100% {transform: translateY(-2px);;}
}

#track-list-ul {
  margin-top: 0;
  margin-bottom: 0;
  overflow-y: auto;
  scrollbar-color: #454976 #313459;
  scrollbar-width: thin;
}

.search-bar {
    margin-bottom: 12px;
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
}

#search-input {
  font-weight: 600;
    padding: 10px 0 10px 10px;
    font-size: 1em;
    width: calc(100% - 45px);
    border: 2px solid #3e4068;
    border-right: 0;
    border-radius: 5px 0 0 5px;
    background-color: #2d2d2d;
    color: #fff;
    background: linear-gradient(135deg, #2a2c43, #0d0f25);
}

#search-input:focus-visible {
  border: 2px solid #cf3758;
  border-right: 0;
  outline: 0;
}

#search-btn {
    background: transparent;
    border: 2px solid #cf3758;
    border-left: 0;
    color: #fff;
    font-size: 1em;
    padding: 10px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    background-color: #be2166;
    background: linear-gradient(135deg, #de4c4c, #be2166, #8423d5);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    transition:0.4s;
}
#search-btn:hover {
border: 2px solid #fff;
border-left: 0;
background: #fff;
color: #be2166;
}

.genres label {
    margin-right: 10px;
    display: block;
}

.genres {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 10px; /* Ajout de la marge inférieure */
}

.genre-button.selected {
  background-color: #8423d5;
  background: linear-gradient(135deg, #8423d5, #be2166, #8423d5);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite; /* Couleur lorsque le genre est sélectionné */
}

.genre-button.obligatory {
  background-color: #de4c4c;
  background: linear-gradient(135deg, #de4c4c, #be2166, #de4c4c);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite; /* Couleur lorsque le genre est sélectionné */
}

.genre-button.obligatory i, .genre-button.selected i{margin-right: 5px;font-size: 0.8em;}

.genre-button, #show-more-btn, #remove-genres {
    background: #414572;
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 15px;
}

.genre-button:hover {
    background: #be2166; /* Couleur au survol */
}
.genres h4 {
  width: 35px;
}

#genre-buttons-container {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  max-width: calc(100% - 110px);
}

#show-more-btn, #remove-genres {
  background-color: #be2166;
  background: linear-gradient(135deg, #de4c4c, #be2166, #8423d5);
  font-size: 20px;
  line-height: 25px;
  background-size: auto;
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  width: 20px;
  padding: 0 5px;
  order: 90;
  text-align: center;
}

#remove-genres {
  order: 0;
  font-size: 0.9em;
}

#show-more-btn:hover {
    background:#fff;
    color: #be2166;
}

#track-title {
  display: flex;
  flex-direction: column;
    text-align: center;
    margin-top: 10px;
    text-transform: capitalize;
}

#track-artist {
    font-weight: bold;
    color: #de4c4c; /* Couleur pour le nom de l'artiste */
    font-size: 25px; /* Taille de police pour le nom de l'artiste */
    display: block; /* Assure que l'élément prend toute la largeur disponible */
    line-height: 30px;
    cursor:pointer;
    margin: auto;
    transition:0.4s;
}
#track-artist:hover {color:#be2166;}

#track-title-text {
    color: #fff; /* Couleur pour le titre de la musique */
    font-size: 22px; /* Taille de police pour le titre de la musique */
    display: block; /* Assure que l'élément prend toute la largeur disponible */
    line-height: 25px;
}

/* Styles for audio element */
audio {
    width: 100%;
    margin: 5px auto;
    display: block;
    background: transparent; /* Fond transparent */
    border-radius: 10px;
}

audio::-webkit-media-controls-panel {
    background-color: transparent !important;
    border-radius: 10px !important;
}

audio::-webkit-media-controls-play-button {
    color: #fff !important;
    display: none; /* Masquer le bouton play intégré */
}

audio::-webkit-media-controls-mute-button {
    color: #be2166 !important;
}

audio::-webkit-media-controls-volume-slider {
    background-color: transparent !important;
    border-radius: 5px !important;
}

audio::-webkit-media-controls-timeline {
    background-color: transparent !important;
    border-radius: 5px !important;
}

audio::-internal-media-controls-overflow-button {
    display: none;
}

audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display, audio::-webkit-media-controls-volume-control-hover-background {
    color: #2a2c43;
}

input[pseudo="-webkit-media-controls-timeline" i]::-internal-media-controls-segmented-track {
    background: #fff;
}

input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-after {
    background: linear-gradient(135deg, #2a2c43, #0d0f25);
}

@media (max-width: 768px) {
    .close-btn {
      display:block;
        right: 10px;
    }
    .search-bar {
      width: calc(100% - 40px);
    }
    .current-track {
        width: 100%;
    }

    .track-list {
        width: 100%;
        max-width: 100%;
        transform: translateX(100%);
        display: none; /* Cacher la liste par défaut sur mobile */
    }

    .track-list.active {
        transform: translateX(0);
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        z-index: 999;
        border-radius: 0;
        display: flex; /* Afficher la liste lorsqu'elle est active */
        flex-direction: column;
        max-width: calc(100% - 40px);
    }
    .current-track img, .album-art {
      max-width: 175px;
    }
    #vinyl-image.playing {
      right: -30px;
    }
    #track-image.playing {
      transform: translateX(-25px);
    }
}
@media (max-width: 600px) {
  .music-player {width: 90%;}
}