#playerMainDiv {
  position: relative;
}

.player {
	display: flex;
	height: 140px; /* pour occuper toute la hauteur de l'écran, ou adapte */
	gap: 10px;
	width: 420px;
	max-width: 90%;
	background: rgba(251, 249, 238, 1);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
	border: 2px solid rgba(9, 51, 93, 0.7); /* Bordure légère */
	padding: 10px;
	z-index: 1000;
	margin-left: auto;
	margin-right: auto;
}

/* Filigrane logo global - en fond du player */
    .player::before {
      content: "";
      position: absolute;
	  background: url('../../images/logo.png') no-repeat center center;
      background-size: contain;
      top: -3px;
      right: 8px;
      width: 172px;
      height: 172px;
      opacity: 0.1;
      z-index: 0;
    }

/* Couverture */
.cover {
width: 140px;
height: 140px;
position: relative;
z-index: 1;
border-radius: 12px; /* 12 avant */
flex-shrink: 0;
box-shadow: 0 4px 8px #A5A5A5;
transition: transform 0.2s ease;
overflow: hidden;
}

#cover {
border-radius: 12px;
overflow: hidden;
}

/* Zone principale à droite */
.principal {
  flex: 2;               /* ou flex:1 si tu préfères */
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Haut du contenu */
.titre_interprete {
  text-align: left;
  height: 50px;
  margin-top: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 1 auto;        /* laisse rétrécir si besoin */
  min-width: 0;          /* ← idem */
}

#title, #artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;        /* ou inline-block */
  min-width: 0;          /* ← encore indispensable */
}

.scroll-container {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-block;
  will-change: transform;
  transform: translateX(0);
}

.scroll-content.animate {
  animation: scroll-left var(--scroll-duration, 10s) linear forwards;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100%));
  }
}

/* Deux colonnes en bas */
.commandes {
  display: flex;
  flex: 1;
}

/* Colonnes */
.bouton, .mute, .controle_son {
  flex: 1;

  box-sizing: border-box;
}

.bouton {
	width: 80px;
  max-width: 80px;
}

.mute {
  display: flex;
  max-width: 40px;
  width: 40px;
}

.controle_son {
  display: flex;
  	margin-top: -3px;
      align-items: center;
      position: relative;
      z-index: 1;
	  margin-left: auto;
	  margin-right: auto;
	  width: 100%;
}

.volume-tooltip {
  position: absolute;
  top: 7px;
transform: translateX(-21px);
left: auto; right: auto;
  background: #09355A;
  color: #FAF7EE;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  width: 30px;

}

    #title {
      font-weight: 700;
      font-size: 1.1em;
      color: #0A345C;
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
	  flex: 1;
	  min-width: 0;
    }

    #artist {
      color: #555;
      font-size: 0.9em;
      margin-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
	  font-weight: bold;
    }

	.btn {
	  position: relative; 
      margin-left: auto; margin-right: auto;
	  top: 14px;
	  z-index: 9999;
	  width: 50px;
	  height: 50px;
	  background: #0A345C;
	  border-radius: 50%;
	  border: none;
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  transition: background-color 0.3s ease, transform 0.2s ease;
	  box-shadow: 0 0 7px #0A365E;
	}

	.btn:hover {
	  background-color: #083050;
	  transform: scale(1.2);
	}

    .btn svg {
      width: 32px;
      height: 32px;
      fill: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 0.3s ease;
	  pointer-events: none;
    }

/* Icône visible aura pointer-events auto */
.btn svg.visible {
  pointer-events: auto;
}

	.btn_mute {
	  position: relative;
	  z-index: 9999;
	  width: 25px;
	  height: 25px;
	  background: transparent;
	  border-radius: 50%;
	  border: none;
	  cursor: pointer;
	  display: flex;
	  transition: transform 0.2s ease;
	  margin-top: 26px;
	  margin-left: auto; margin-right: auto;
	}

    .btn_mute svg {
      width: 25px;
      height: 25px;
      fill: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 0.3s ease;
    }

    #icon-play {
      opacity: 1;
      pointer-events: none;
    }

#icon-play {
  transition: opacity 0.3s ease;
}

/* Spinner : rotation continue */
#icon-spinner circle {
  stroke: white;
  stroke-linecap: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 0;
  animation: spin 1s linear infinite;
}

/* Animation de rotation */
@keyframes spin {
  from {
    transform: rotate(0deg);
    transform-origin: center;
  }
  to {
    transform: rotate(360deg);
    transform-origin: center;
  }
}

	#muteBtn svg {
	  width: 20px;
	  height: 20px;
	  fill: white;
	}
	
    .volume-slider {
      width: 80%;
      accent-color: #0A345C;
      -webkit-appearance: none;
      height: 6px;
      border-radius: 6px;
      background: #ddd;
      cursor: pointer;
      transition: background-color 0.3s ease; 

    }

    .volume-slider:hover {
      background-color: #ccc;
    }

    .volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #0A345C;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .volume-slider::-webkit-slider-thumb:hover {
      background-color: #083050;
    }

    .volume-slider::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #0A345C;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .volume-slider::-moz-range-thumb:hover {
      background-color: #083050;
    }