body {
  margin: 0;
  background: #111;
  color: white;
  font-family: Arial;
  text-align: center;
}

.screen {
  display: none;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.screen.active {
  display: flex;
}

button {
  padding: 15px 30px;
  font-size: 18px;
  margin: 10px;
  
}

/* ===== SKIP ===== */
#skipBtn {
  position: absolute;
  background: url(Assets/UI/skipBtn.png) no-repeat center;
  background-size: contain;
  border: none;
  width: 140px;
  height: 80px;
  bottom: 2rem;
  right: 6rem;
  z-index: 10;
}

#skipBtn:hover {
  position: absolute;
  background: url(Assets/UI/skipBtn.png) no-repeat center;
  background-size: contain;
  border: none;
  transform: scale(0.9);
  bottom: 2rem;
  right: 6rem;
  z-index: 10;
}

/* ===== PARAMÈTRES ===== */
#settingsBtn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 20;

  width: 60px;
  height: 60px;

  background: url("Assets/UI/settings.png") no-repeat center;
  background-size: contain;

  border: none;
}

#settingsBtn:hover {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 20;

  width: 50px;
  height: 50px;

  background: url("Assets/UI/settings.png") no-repeat center;
  background-size: contain;

  border: none;
}

#settingsMenu {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
}

#settingsPanel {
  background: url("Assets/UI/fond_settings.png") no-repeat center;
  background-size: contain;
  color: #fff;
  padding: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 280px;
  
  
}



#parametres {
  background: url("Assets/UI/settings-title.png") no-repeat center;
  background-size: contain;
  height: 50px;
  text-indent: -9999px; /* cache le texte */
  overflow: hidden;
}

#volumelabel {
  background: url("Assets/UI/volume-title.png") no-repeat center;
  background-size: contain;
  height: 50px;
  text-indent: -9999px; /* cache le texte */
  overflow: hidden;
  cursor: url("Assets/UI/cursor.png"), pointer;
}

/* ===== WRAPPER ===== */
#sliderWrapper {
  position: relative;
  width: 220px;
  height: 20px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== TRACK (image complète) ===== */
#sliderWrapper::before {
  content: "";
  position: absolute;
  inset: 0;

  background: url("Assets/UI/empty-bar.png") no-repeat center;
  background-size: contain;

  z-index: 0;
}

/* ===== FILL (progression) ===== */
#sliderFill {
  position: absolute;
  height: 100%;
  width: 80%; /* valeur initiale */
  max-width: 80%;
  margin-left: 10px;
  margin-right: 10px;
  background: url("Assets/UI/full-bar.png") no-repeat left center;
  background-size: cover;

  z-index: 1;
  pointer-events: none;
}

/* ===== SLIDER INVISIBLE ===== */
#volumeSlider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

 cursor: url("Assets/UI/cursor-hover.png"), pointer;
  background: transparent;

  z-index: 2;
}

/* ===== THUMB ===== */
#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
cursor: url("Assets/UI/cursor-hover.png"), pointer;
  background: url("Assets/UI/thumb.png") no-repeat center;
  background-size: contain;
}

#volumeSlider::-moz-range-thumb {
  width: 30px;
  height: 30px;

  background: url("Assets/UI/thumb.png") no-repeat center;
  background-size: contain;
cursor: url("Assets/UI/cursor-hover.png"), pointer;
  border: none;
}

#fullscreenBtn {
  background: url("Assets/UI/fullscreen-btn.png") no-repeat center;
  background-size: contain;
  height: 100px;
  overflow: hidden;
  border: none;
}

#settingsClose {
  background: url("Assets/UI/close-btn.png") no-repeat center;
  background-size: contain;
  height: 100px;
  overflow: hidden;
  border: none;
}

#settingsClose:hover {
  background: url("Assets/UI/close-btn.png") no-repeat center;
  background-size: contain;
  overflow: hidden;
  border: none;
  transform: scale(0.9);
}

#fullscreenBtn:hover {
  background: url("Assets/UI/fullscreen-btn.png") no-repeat center;
  background-size: contain;
    transform: scale(0.9);

  overflow: hidden;
  border: none;
}

/* ===== UTILITAIRE ===== */
.hidden {
  display: none !important;
}

#homeScreen {
  position: relative;
  overflow: hidden;
}

#choiceScreen, #endScreen {
  position: relative;
  overflow: hidden;
}

/* Vidéo en fond */
#homeBgVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.cs-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Bouton au-dessus */
#startBtn {
  position: relative;
  z-index: 2;
  width: 300px;
  height: 120px;

  background: url("Assets/UI/start-button.png") no-repeat center;
  background-size: contain;

  border: none;

}

#startBtn:hover {
  background: url("Assets/UI/start_hover.png") no-repeat center;
  background-size: contain;
  width: 250px;
  height: 120px;
}

#choiceButtons, #liveButtons{
  position: relative;
  z-index: 2;
  border: none;
}

#choiceQuestion{
  position: relative;
  z-index: 2;
  border: none;
  
  width: 400px;
  height: 100px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  text-indent: -9999px; /* cache le texte */
}

#choiceLive{
  position: relative;
  z-index: 2;
  border: none;
  
  width: 400px;
  height: 100px;

  background-repeat: no-repeat;
  background-position: center;
  background:url();
  background-size: contain;


}

.choice {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent; /* enlève le fond blanc */
  border: none;
  height: 100px;
  width: 300px;
}

.choice:hover{
  transform: scale(0.9);
}

/* ===== Curseur ===== */

body {
  cursor: url("Assets/UI/cursor.png"), auto;
}

button, .choice {
  cursor: url("Assets/UI/cursor-hover.png"), pointer;
}

/* ===== Image titre ===== */

#titleImg {
  position: relative;
  z-index: 1;
  height: 50%;
  background-size: contain;

  border: none;
} 

/* ===== ANIMATIONS FLOTTANTES — HOME SCREEN ===== */

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

#titleImg {
  animation: float 4s ease-in-out infinite;
  animation-range: 200px;
}

#startBtn {
  animation: float 4s ease-in-out infinite;
  animation-delay: 1s; /* léger décalage pour que titre et bouton ne bougent pas ensemble */
}

#startBtn:hover {
  animation: float 4s ease-in-out infinite;
  animation-delay: 1s;
}

/* ===== PREVIEW BOUTONS ===== */
.choiceGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#choiceButtons {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.preview {
  padding: 32px 64px;
  background: url("Assets/UI/headset.png") no-repeat center;
  background-size: contain;
  border:none;
}

.preview.playing {
  background: url("Assets/UI/headset-on.png") no-repeat center;  
  background-size: contain;
  border: none;
  transform: scale(0.9);
}


.endUI {
  position: relative;
  z-index: 2;
  border: none;
}

#liveDownload{
  background: url("Assets/UI/dl.png") no-repeat center;
  background-size: contain;
  border: none;
  width: 270px;
  height: 90px;
}

#liveModify{
  background: url("Assets/UI/modify.png") no-repeat center;
  background-size: contain;
  border: none;
  width: 270px;
  height: 80px;
}

#liveEnd{
  background: url("Assets/UI/end.png") no-repeat center;
  background-size: contain;
  border: none;
  width: 270px;
  height: 90px;
}

#liveDownload:hover {
  transform: scale(0.9);
}

#liveModify:hover {
  transform: scale(0.9);
}

#liveEnd:hover {
  transform: scale(0.9);
}

#endSentence {
  background: url("Assets/UI/endSentence.png") no-repeat center;
  background-size: contain;
  border: none;
  width: 700px;
  height: 100px;
  z-index: 10;
  text-indent: -9999px; /* cache le texte */
}

/* ===== BARRE DE PROGRESSION ===== */
#progressBar {
  position: fixed;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;          /* ajuste selon ton rendu */
  height: 50px;        /* hauteur raisonnable */
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
}

#pbTrack {
  position: absolute;
  margin-top: 5px;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
}

#pbTrackEmpty {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

#pbTrackFull {
  position: absolute;
  margin-top: 5px;
  top: 0;
  left: 0;
  width: 0%;
  height: 80%;
  overflow: hidden;
  transition: width 0.5s ease;
}

#pbTrackFull img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 600px;    /* largeur fixe = largeur naturelle de ton image top_fullbar */
  object-fit: fill;
  max-width: none;
}

/* Conteneur des bulles */
#pbBubbles {
  position: absolute;
  top: 50%;
 
  transform: translateY(-50%);
  width: 120%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.pb-bubble {
  height: 120%;
  width: 120%;
  object-fit: contain;
  /* fallback si l'image ne charge pas */
  min-width: 40px;
}