@font-face {
  font-family: muli;
  src: url(../font/Muli-Regular.ttf);
}

body {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: muli;
}

.content{
  margin-bottom: 2vw;
  width: 84vw;
  margin-top: 10vh;

}



.btnback{
position: fixed;
display: flex;
align-items: center;
text-decoration: none;
font-family: Muli;
font-weight: bold;

margin-top: 4em;
width: auto;
left: 1.2vw;
z-index: 200001;

transition: all ease-in-out 0.3s;
padding-right: 20px;
padding-bottom: 20px;
}
.btnback:hover {
left: 1em;
}

.backbottom{
  color: #2D2A2B;
  font-weight: 200;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: Muli;
  font-weight: bold;
  height: 30px;
  z-index: 200001;
  transition: all ease-in-out 0.3s;
}

.backbottom:hover {
margin-left: -1em;
}


.retour>img {
  width: 20px;
}

.onetextimage {
  position: relative;
  display: flex;
  justify-content:  space-between;
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}

.impair {
  flex-direction: row-reverse;
}

.pair {
  flex-direction: row;
}

.illu {
  align-self: center;
  max-width:100%;
  max-height:70%;
  width: 48%;

}

.illuvideo{
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
}


.impair .illu{

}

.texte{
 display: flex;
 flex-direction: column;
 justify-content: center;


}
.texteimpair {
  position: relative;
  z-index: 4;
  background-color: rgba(244, 244, 246,0.7);
  width: 45%;
  height: auto;

}

.textepair {
  position: relative;
  z-index: 4;
  background-color: rgba(244, 244, 246,0.7);
  width: 45%;
  height: auto;

}

.texte>p {
  position: relative;

  font-weight: light;
  font-size: 0.9rem ;
}

article h1 {
  font-size: 400%;
  line-height: normal;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 9.5%;
  font-weight: 700;

}

article h2 {
  font-size: 120%;
  line-height: normal;
  font-weight: bold;
}

.infos {
  font-size: 100%;
  font-family: muli;
 margin-left: 10%;
}
.infos p{

 margin-bottom: 1em;
}

.infos a {
  margin-top: 6em;
  text-decoration: none;
  line-height: normal;
  font-size: 100%;
  align-self: flex-start;
}

p {
   display: block;
   margin-block-start: 0em;
   margin-block-end: 0em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
}
h2 {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}


}

@media screen and (max-device-width: 1500px) {
  .texte{
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .illu{
    margin-top: 20px;
    margin-bottom: 20px;

  }
  .texte>p {
    margin: 3%;
    font-weight: light;
    font-size: 1rem
  }
  .infos {
    font-size:120%;
    font-family: muli;
    margin: 0%;
  }

  h2{
    font-size: 160%;
  }

  .onetextimage {
    justify-content: space-between;
  }

}

@media screen and (max-width: 800px){
  .btnback{
display: none;
  }
  .nav{
    position: fixed;
    z-index: 20006;
    width: 100vw;
    height: 60px;
    background: rgb(247,247,247);
background: linear-gradient(0deg, rgba(247,247,247,0) 0%, rgba(247,247,247,0.7035189075630253) 40%, rgba(247,247,247,0.9475140397956058) 100%);
  }

  .btnback{
    margin-top: 2.5em;
    width: auto;
    left: 1em;
  z-index: 200001;
  opacity: 50%;
  transition: all ease-in-out 0.5s;
  padding-right: 20px;
  padding-bottom: 20px;
  }
  article h1 {
    font-size: 250%;
    line-height: normal;
    margin-top: 1rem;
    margin-left:0 ;
    font-weight: bold;
  }

  article h2 {
    font-size: 150%;
    line-height: normal;
    font-weight: bold;
}

  .infos {
    font-size: 100%;
    margin-left: 0%;
  }
  .infos p {
   margin-top: 0;
   margin-block-start: 0;
    margin-block-end: 1em;
  }

  .texteimpair {
    position: relative;
    z-index: 4;

    width: 100%;
    height: auto;
    margin-left: 0;
  }
  .textepair {
    position: relative;
    z-index: 4;

    width: 100%;
    height: auto;
    margin-left: 0;
  }
  .onetextimage {
    flex-direction: column-reverse;
  }
  .impair {
    flex-direction: column;
  }
  .pair {
    flex-direction: column-reverse;
  }
  .illu {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
  }


}