body{
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  height:100%;
  color: white;
  font-size: 1.1vw;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  background-color: #ffffff;
}

#masthead{
  position:relative;
  width: 100%;
  height:100%;
  padding-bottom: 5%;
  margin-top: 3%;
}
#titre_container{
  margin-left: 5%;
}
#text_athl{
  text-align: justify;
  width: 60%;
  height: fit-content;
  margin-top: 1%;
}
#last_new_sep{
  background-color: #DA6416;
  width: 38%;
  height:2px;
  margin-top: 0%;
}
.clicker{
  cursor: pointer;
  margin-top: 0.5%;
  width: 100%;
  padding-bottom: 1%;


  transition: transform 0.5s ease, 
  opacity 1s ease;
  overflow: hidden;
}
.container_name{
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 105%;
  
}
.name_ath{
  width: 30%;
  opacity: 1!important;
  transform: translateY(0%)!important;
}
.info_container{
  overflow: hidden;
  width: 100%;
}
.infos{
  transform: translateX(-100%);
  transition: transform 1s ease;
  margin-left: 1.5%;
  width: 100%;
}
.barre{
  position: relative;
  width: 0.2%; /* Largeur de la ligne */
  height: 0px; /* Taille initiale */
  background: #DA6416;
  transform: translateX(-50%);
  margin-left: 1%;
  margin-top:0.5%;
  align-self: flex-start;
}
.moveDown{
  animation: moveDown 0.5s linear forwards;
}

@keyframes moveDown {
  0% {
      height: 0;
  }
  100% {
      height: 2.7vh;
  }
}

#first_cat{
  margin-top: 5%;
}
.athlete_tranche{
  margin-top: 1%;
}


@media (orientation: landscape) and (max-width: 768px) {
  #text_athl{
    width:95%;
  }  
  #last_new_sep{
    width:72%;
  }
  #first_cat{
    margin-top: 15%;
  }
  .name_ath{
    width:100%;
  }
  .container_name{
    display: block;
  }
  .barre{
    display: none;
  }
  .infos{
    width:100%;
    margin-left:0;
  }
}