@font-face {
  font-family: 'UniversLTStd-BoldEx.otf';
  src: url(../fonts/UniversLTStd-BoldEx.woff2), format("woff2");
}

*{
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  /*background: #FFF;*/
  background-color: rgb(248, 248, 248);
  font-family: 'UniversLTStd-BoldEx.otf';
  font-size: 32px;
  line-height: 1.2;
}

/*img{
	width: 25%;
}*/

.container {
  display: flex;
  justify-content: space-between; /* Pour espacer les colonnes */
}

.column {
  flex: 1; /* Pour que chaque colonne prenne une part égale de l'espace */
  padding: 10px; /* Espacement intérieur */
}

.categories {
  display: flex;
  flex-direction: row;
  gap: 5vw;
  align-items: center;
  padding: 0 10vw;
  margin-bottom: 2em;
}

.category{
  flex: 1;
}

.category.bottom{
  margin-top: 20vh;
}

.category.top{
  margin-bottom: 20vh;
}

.icon-container {
  position: relative;
  cursor: pointer;
}

.icon-container svg {
  width: 100%;
  fill: magenta;
  overflow: visible;
}

.icon-container p{
  display: none;
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}

.icon-container:hover p{
  display: block;
}

.icon-container:hover svg{
  fill: rgba(255, 0, 255, 0.15);
  stroke: magenta;
  stroke-width: 5px;
}

/*style du header*/
header.row{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 20px;
}


.row {
  display: flex;
  gap: 20px; /* Espace entre les éléments du header */
  align-items: center; /* Pour aligner l'image et le texte verticalement */
}

.ampli {
  height: 40vh;
  width: 100vw;
}

.rectangle {
  width: 300px;       /* Largeur du rectangle */
  overflow: hidden;   /* Masque le texte hors du rectangle */
  border: 4px dotted magenta;
  position: relative;
}

/* style du titre */
header h1{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  text-transform: uppercase;
/*  font-size: 15vw;*/
  font-size: calc(90px + 10vw);
  font-style: italic;
  margin-right: 40px;
}

/* style du sous-titre */
header h2{
  /* font-family: monospace; */
  /*  font-size: 0.7em;*/
  font-size: calc(0.7em + 0.3vw);
}

main{
  margin-top: -20vh;
}

/* style de la liste des podcasts */
.podcasts-list li{
  border-top: 2px solid #000;
  padding: 20px 20px;
}

.podcasts-list h2{
    cursor: pointer;
}

.audio.selected,
.audio.selected:hover{
  background-color: magenta;
}

li.audio.hidden{
  display: none;
}

.playbttn{
  display: inline-block;
}

.pausebttn{
  display: none;
}

.playing .pausebttn{
  display: inline-block;
}

.playing .playbttn{
  display: none;
}

.icon{
  width: 1em;
}

.morebttn{
  display: inline-block;
}

.lessbttn{
  display: none;
}

.collapsed .morebttn{
  display: none;
}

.collapsed .lessbttn{
  display: inline-block;
}

/* quand on a cliqué sur un des podcast */
/* ou qu'on a survolé la ligne */
.podcasts-list li:hover{
  background-color: rgba(255, 0, 255, 0.15);  /* changement de couleur du fond*/
  /* animation de changement de couleur  */
  transition: all 0.3s ease;
}

/* quand on a cliqué sur un des podcast / affichage du player */
.podcasts-list li.active .audioplayer{
  display: flex !important;
}

.podcast{
  margin: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.description-wrapper{
  height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
}

/* quand l'élément est actif on affiche la description */
.collapsed .description-wrapper{
  height: auto !important;
  margin-top: 20px;
}

/* ----  */

/* Design spécifique pour la ligne "DIRECT" */
.podcasts-list li.live h2{
    cursor: auto;
}

/* enlever le + */
.podcasts-list li.live h2::before{
  content: none;
}

/* design et position du player */
.podcasts-list li.live .audioplayer{
  display: flex !important;
  width: auto;
  min-width: auto;
  padding-left: 40px;
}

/* position du play/pause */
.podcasts-list li.live .audioplayer .holder{
  margin-right: 40px;
}

.podcasts-list li.live .controls{
  display: none;
}

.podcasts-list li.live{
  background: #000;
  color: magenta;
}

li.live .audioplayer .holder path,
li.live .audioplayer .volume__speaker{
  fill: magenta;
}

/* ----  */

/* Design des players audio */
.audioplayer{
  flex: 1;
  background: transparent;
  box-shadow: none;
}

/* taille du bouton play / pause */
.audioplayer .holder{
  width: 25px;
  height: 25px;
  margin-top: -10px;
}

.audioplayer .holder svg{
  width: 100%;
  height: auto;
}

.audioplayer .holder path{
  fill: #fff;
}

/* style de la typo (chiffres) */
.green-audio-player .controls span{
  font-family: monospace;
}

.audioplayer .controls, .audioplayer .volume{
  color: #fff;
}
.volume__speaker{
  fill: #fff;
}

.green-audio-player .slider .gap-progress .pin{
  background: magenta;
}

/* couleur de la barre de lecture */
.green-audio-player .slider{
  background: #fff;
}

/* forme de la barre de lecture */
.green-audio-player .controls .controls__slider{
  border-radius: 0;
}

/* forme et style de la tête de lecture */
.green-audio-player .slider .gap-progress .pin{
  border-radius: 0;
  height: 20px;
  width: 4px;
  box-shadow: none;
}

.green-audio-player .controls .controls__slider .controls__progress .progress__pin{
  top: -8px;
  right: 0px;
}

/* couleur de la barre de progression */
.green-audio-player .slider .gap-progress{
  background-color: magenta;
}

.green-audio-player .volume .volume__button.open path {
  fill: magenta;
}

.green-audio-player .volume__pin{
  display: none;
}

/* -------------------------------- */
/* RESPONSIVE */

/* Mobile landscape and larger phones */
@media (max-width: 850px) {
  body{
    font-size: 20px;
  }

  .podcasts-list li{
    padding: 10px 20px;
  }

  .audioplayer{
    padding: 0;
    width: 100%;
  }

  .podcasts-list li.audio:not(.live) h2,
  .podcasts-list li.audio:not(.live) .date{
    width: 100%;
  }

}

#player-container{
  position: sticky;
    bottom: 0;
    background-image: url(../images/svg/bulle.svg);
    background-position-x: center;
    background-position-y: top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    flex-direction: row;
    display: flex;
    align-items: center;
    padding: 1em 1em 0.5em 1em;
}

.sliding-text{
  background-color: magenta;
  width: 20%;
  overflow: hidden;
  border-radius: 500px;
  display: flex;
  align-items: center;
}

.sliding-text p{
  white-space: nowrap;
  animation: defilement 3s linear infinite; /* Animation en boucle infinie */
}

.live{
  color: magenta;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.live p{
  margin: 0;
}

.live p:first-of-type{
  font-size: 2em;
  line-height: 0.5em;
}

.live p:last-of-type{
  font-size: 0.5em;
  text-transform: uppercase;
}

@keyframes defilement {
  0% {
    transform: translateX(0%); /* Le texte commence à l'extérieur du rectangle, à droite */
  }
  100% {
    transform: translateX(-100%); /* Le texte finit à l'extérieur du rectangle, à gauche */
  }
}