.controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  display: flex;
  width: 50%;
  align-items: center;
  justify-content: space-around;
  background: transparent;
  padding: 10px;
  border-radius: 5px;
}

.control-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.control-btn img {
  width: 30px;
  height: 30px;
  background: none !important;
  background-color: transparent !important;
}

.control-btn:hover img {
  transform: scale(1.2);
  opacity: 0.8;
}

/* --- STYLE DE LA BARRE DE PROGRESSION --- */
input[type="range"].progressBar {
  -webkit-appearance: none;
  width: 50%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #888 0%, #333 100%);
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 10px;
}

/* --- BARRE DE FOND (non remplie) --- */
input[type="range"].progressBar::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background-color: #222;
}
input[type="range"].progressBar::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background-color: #222;
}

/* --- BARRE DE REMPLISSAGE (partie gauche du thumb) --- */
input[type="range"].progressBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0; /* cache le thumb */
  height: 0;
  background: none;
  box-shadow: none;
  border: none;
}
input[type="range"].progressBar::-moz-range-progress {
  background-color: #e0d8b0; /* couleur d'avancement */
  height: 4px;
  border-radius: 2px;
}

/* Pour WebKit (Chrome, Safari) : remplissage coloré */
input[type="range"].progressBar::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #e0d8b0 var(--progress, 0%), #333 var(--progress, 0%));
}

/* --- AU SURVOL : légère lueur --- */
input[type="range"].progressBar:hover {
  background: linear-gradient(90deg, #e0d8b0 0%, #444 100%);
}

/* --- OPTION : style plus "pro" du thumb si tu veux un point discret --- */
input[type="range"].progressBar.show-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e0d8b0;
  box-shadow: 0 0 6px rgba(224, 216, 176, 0.5);
}


@media screen and (max-width:750px){
  /* The overarching video-container style is specific to the page layout but keeping controls specific here makes sense */
  .controls {
    width: 85%;
    padding: 5px;
  }

  .control-btn img {
    width: 25px;
    height: 25px;
    background: none !important;
    background-color: transparent !important;
  }

  input[type="range"].progressBar {
    width: 40%;
    margin: 0 5px;
  }

  .currentTime,
  .timeTotal {
    font-size: .7rem;
  }
}