/* Global styles */
body {
  background-color: #F3ECD1;
  color: black;
  font-family: Arial, sans-serif;
  --thumb-border-color: #FFFFFF; /* Bordure noire en mode clair */
  --thumb-bg-color: #CC6633; /* Fond du bouton identique au fader (orange) */
}
body.dark-mode {
  background-color: #1C1F25;
  color: white;
  --thumb-border-color: #FFFFFF; /* Bordure blanche en mode sombre */
  --thumb-bg-color: #038F7B; /* Fond du bouton identique au fader (vert/turquoise) */
}
/* Flexbox pour l'agencement global */
.center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Conteneur pour les images */
.images-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.programme {
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

/* Réglages des images et bandeau */
.bandeau {
  width: 100%;
  max-width: 800px;
margin-bottom: 20px;
}
.image {
  width: 100%;
  max-width: 600px;
  margin-bottom: 10px;
}
.explicitcontent {
  width: 20%;
  max-width: 200px;
  margin: 10px auto;
}
.icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
/* Styles pour le canvas */
.canvas {
  display: flex;
  justify-content: center;
  /* Ajoute une couleur de fond ou supprime la ligne si inutile */
  background-color: transparent;
}
/* Style pour le bouton Play/Pause */
.boutonsombre,
.boutonclair {
  padding: 10px 20px;
  color: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
  border-radius: 20px;
}
.boutonsombre {
  background-color: #CC6633;
}
.boutonclair {
  background-color: #038F7B;
}
#volumeFader {
  -webkit-appearance: none;
  width: 100%; /* Taille du fader */
  height: 10px; /* Hauteur de la barre */
  border-radius: 5px; /* Coins arrondis */
  outline: none;
  transition: background 0.3s ease; /* Animation de transition */
  background: linear-gradient(to right, #CC6633 0%, #CC6633 100%, #FFFFFF 100%, #FFFFFF 100%);
}
body.dark-mode #volumeFader {
  background: linear-gradient(to right, #038F7B 0%, #038F7B 100%, #FFFFFF 100%, #FFFFFF 100%);
}
body.dark-mode .arrow {
  border-left-color: white;
}

.volume-fader-thumb {
}
#volumeFader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--thumb-bg-color); /* Utilise la variable pour le fond */
  border: 2px solid var(--thumb-border-color); /* Utilise la variable CSS pour la bordure */
  border-radius: 50%;
  cursor: pointer;
}
#volumeFader::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: var(--thumb-bg-color); /* Utilise la variable pour le fond */
  border: 2px solid var(--thumb-border-color); /* Utilise la variable CSS pour la bordure */
  border-radius: 50%;
  cursor: pointer;
}
/* Transitions globales */
* {
  transition: all 0.3s ease;
}
/* Responsiveness */
@media screen and (max-width: 780px) {
  .bandeau {
    width: 80%;
  }
  .image {
    width: 65%;
  }
  .explicitcontent {
    width: 25%;
  }
  #audioCanvas {
    width: 80%;
  }
  .icons {
  cursor: pointer;
  height: 47px;
  width: 47px;
}
}
@media screen and (min-width: 780px) and (max-width: 1560px) {
  .bandeau {
    width: 40%;
  }
  .image {
    width: 45%;
  }
  .explicitcontent {
    width: 20%;
  }
  #audioCanvas {
    width: 70%;
  }
  .icons {
  cursor: pointer;
  height: 35px;
  width: 35px;
}
}
@media screen and (min-width: 1560px) {
  .bandeau {
    width: 35%;
  }
  .image {
    width: 45%;
  }
  .explicitcontent {
    width: 20%;
  }
  #audioCanvas {
    width: 60%;
  }
  .icons {
  cursor: pointer;
  height: 47px;
  width: 47px;
}
}

/* Zoom */

      .image-zoomed {
        transform: scale(2.2);
        transition: transform 0.3s ease;
      }
      #dropdown {
        display: none;
        margin-top: 10px;
        padding: 10px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      .item {
        margin-bottom: 10px;
      }
      .item strong {
        color: #333;
      }
      .item em {
        color: #666;
      }

/*Programme*/

.programme {
  display: table;
  border-spacing: 5px 2px;
  width: 300px;

}
.row {
  display: table-row;
  transition: opacity 0.5s ease, transform 0.3s ease;
  
}
.label {
  display: table-cell;
}
.hour{
  display: table-cell;
  vertical-align: top;
  padding: 0px 8px;
}
.text {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap:6px;
}

/* ✅ Largeur fixe pour aligner le texte du programme en cours */
.label {
  font-weight: bold;
  white-space: nowrap;
  padding-right: 5px;
  width:0px; /* Ajuste cette valeur si nécessaire */
}

.hour {
  width: 0px;
  text-align: right;
  white-space: nowrap;
}


.text {
  white-space: nowrap;
  
}
.clickable {
  cursor: pointer;
}
.hidden {
  display: none;
}
.fade-gradient {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
/* Flèche à gauche de Programme : */
.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #000;
  margin-right: 5px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}
.arrow.down {
  transform: rotate(90deg);
}
/* Transition douce du texte du programme en cours */
#currentText {
  font-weight: normal;
  transition: opacity 0.5s ease;
}
.fade-out {
  opacity: 0;
  transform: translateY(-5px);
}
.fade-in {
  opacity: 1;
  transform: translateY(0);
}