body{
  display: flex;
  justify-content: center;
}

#sec1{
  position: relative;
  
  z-index: 1;

  background-color: bisque;

  margin: 10% 2% 2% 2%;
  border-radius: 1.2rem;

  overflow: hidden;

  box-shadow: 0 0 0.6rem black;
}


iframe{
  max-width: 30%;
  max-height: 30%;
}

#projectstabs{

  display: flex;
  flex-wrap: wrap;
}

#projectstabs input[type='radio']{
  display: none;
}

.affiche{
  position: absolute;
  top: 6%;
  right: 3%;
  z-index: 10;
  
}

#promeneaff{
  position: absolute;
  top: 14%;
}

.affiche img{
  max-width: 50vw;
  max-height: 50vh;
  object-fit: cover;
  border: 1vh solid white;
  border-radius: 0.8rem;
}

.text{
  text-align: justify;

  font-family: 'Trebuchet MS', Arial, sans-serif;
  padding: 2vh;

  background-color: antiquewhite;

  width: 100%;
 
  order: 1;

  display: none;
}

.description{
  font-size: clamp(1rem, 2vh, 3rem);
}

#projectstabs label{
  font-family: 'Raleway', 'Arial', sans-serif;
  font-size: clamp(1rem, 3vh, 3rem);

  background-color: bisque;
  padding: 2vh;

  transition: background-color 0.2s;

  cursor: pointer;
}

#projectstabs label:hover{
  background-color: rgba(211, 211, 211, 0.5);
}

#projectstabs input[type='radio']:checked + label + .text{
  display: block;
}

#projectstabs input[type='radio']:checked + label{
  background-color: antiquewhite;
}

@media only screen and (max-width: 1680px) and (min-width: 1100px){
  #sec1{
    margin-top: 17%;
  }

}
@media only screen and (max-width: 1300px){
  .affiche{
    display: none;
  }
}

@media only screen and (max-width: 1100px) and (min-width: 860px){
  #sec1{
    margin-top: 22%;
  }
  #projectstabs label{

    font-size: clamp(0.6rem, 2.4vh, 2.6rem);
  }
}

@media only screen and (max-width: 860px) and (min-width: 480px){
  #sec1{
    margin-top: 40%;
  }
  #projectstabs label{

    font-size: clamp(0.3rem, 1.8vh, 2rem);
  }
  h3{
    font-size: clamp(2rem, 2.5vh, 3rem);
  }
  h2{
    font-size: clamp(1.8rem, 2.3vh, 2.7rem);
  }
}

@media only screen and (max-width: 480px){
  #sec1{
    margin-top: 60%;
  }
  #projectstabs label{

    font-size: clamp(0.1rem, 1.5vh, 1.5rem);
  }
  h3{
    font-size: clamp(1.3rem, 1.8vh, 2.5rem);
  }
  h2{
    font-size: clamp(1rem, 1.3vh, 2rem);
  }
  .description{
    font-size: clamp(0.2rem, 0.6vh, 1.4rem);
  }
}