/*GÉNÉRALITÉS*/
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/




/*
.abril-fatface-regular {
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  font-style: normal;
}
*/


html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

:root {
    --primary-color: #B21C72;
    --secondary-color: #FED27A;
    --gray-color: #7A7A7A;
    --box-shadow: 0px 4px 8px 1px #7472724b;
}

/*GÉNÉRALITÉS*/

h1, h2, h3, h4, h5, h6, p{
  font-family: "Crimson Text", serif;
  font-weight: 400;
}



a{
  text-decoration: none;
  color: var(--primary-color);
}
.btn-contacter-nous{
    display: inline-block;
    padding: 10px 15px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-size: 0.9em;
    text-align: center;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease; 
}
.btn-contacter-nous:active {
  -webkit-transform: translateY(4px);
      -ms-transform: translateY(4px);
          transform: translateY(4px);
}
.btn-decouvrir{
  display: inline-block;
  padding: 10px 19px;
  background-color: var(--primary-color);
  border-radius: 15px;
  border: none;
  color: var(--secondary-color);
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  cursor: pointer;
  -webkit-box-shadow: var(--box-shadow);
          box-shadow: var(--box-shadow);
}
.btn-open{
  display: inline-block;
  padding: 10px 19px;
  background-color: white;
  border-radius: 15px;
  border: none;
  color: var(--primary-color);
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  cursor: pointer;
  -webkit-box-shadow: var(--box-shadow);
          box-shadow: var(--box-shadow);
}


.primary-content{
  margin-top: 3em;

}

.third-contact{
  margin-top: 2em;
  margin-bottom: 2em;


}



.button-content{
  text-align: center;
  margin-top:2em;
}
/*animation*/

[class*="hidden-"]{
  opacity: 0;
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
          transform: translateY(-20px);
  -webkit-transition: all 1.3s;
  -o-transition: all 1.3s;
  transition: all 1.3s;
}

.hidden-2{
  -webkit-transition-delay: 200ms;
       -o-transition-delay: 200ms;
          transition-delay: 200ms;
}
.hidden-3{
  -webkit-transition-delay: 400ms;
       -o-transition-delay: 400ms;
          transition-delay: 400ms;
}
.hidden-4{
  -webkit-transition-delay: 600ms;
       -o-transition-delay: 600ms;
          transition-delay: 600ms;
}
.hidden-5{
  -webkit-transition-delay: 800ms;
       -o-transition-delay: 800ms;
          transition-delay: 800ms;
}
.hidden-6{
  -webkit-transition-delay: 1s;
       -o-transition-delay: 1s;
          transition-delay: 1s;
}
@media(prefer-reduce-motion){
  .hidden-1, .hidden-2, .hidden-3{
    opacity: 1;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}
.show{
  opacity: 1;
  -webkit-filter: blur(0);
          filter: blur(0);
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);
}




/*HEADER*/
header{
  height: 15vh;
  position: fixed;
  top: 0;
  left:0;
  background-color: white;
  z-index: 99;
  width: 100%;
}
.header{
    width: 100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1.7em 1em;
    background-color: white;
}
.scroll-watcher{
  width: 100%;
  top:0;
  position: fixed;
  height: 5px;
  background-color: var(--primary-color);
  z-index: 3;
  scale: 0 1;
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
  -webkit-animation: scroll-watcher linear;
          animation: scroll-watcher linear;
  animation-timeline: scroll();
   
}
@-webkit-keyframes scroll-watcher{
  to{ scale: 1 1;}
}
@keyframes scroll-watcher{
  to{ scale: 1 1;}
}
.menu-burger{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: transparent;
    width: 2.5em;
    height: 2.5em;
    cursor: pointer;
}
.bar{
    display: block;
    position: relative;
    width: 2em;
    height: 0.3em;
    background: var(--primary-color);
    border-radius: 3px;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
   
}
.bar.close{
-webkit-transform: translateX(0.5em);
    -ms-transform: translateX(0.5em);
        transform: translateX(0.5em);
}
.bar::after, .bar::before{
    content:"";
    position: absolute;
    left: 0;
    height: 0.3em;
    background: var(--primary-color);
    border-radius: 5px;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.bar::before{
  -webkit-transform: translateY(-0.5em);
      -ms-transform: translateY(-0.5em);
          transform: translateY(-0.5em);
  width: 2.5em;
}
.bar.close::before{
  -webkit-transform: translate(-0.5em, -0.5em);
      -ms-transform: translate(-0.5em, -0.5em);
          transform: translate(-0.5em, -0.5em);
}

.bar::after{
  -webkit-transform: translateY(0.5em);
      -ms-transform: translateY(0.5em);
          transform: translateY(0.5em);
  width: 1em;
}
.bar.close::after{
  -webkit-transform: translate(1em, 0.5em);
      -ms-transform: translate(1em, 0.5em);
          transform: translate(1em, 0.5em);
}
.logo{
    width: 10%;
    margin-left: -4em;
    margin-top: 0.4em;
   
}
.navigation-link{
  opacity: 0;
  overflow: hidden;
  width: 100%;
  height: 0;
  position: absolute;
  top : 15vh;
  right: 0;
  z-index: 2;
  background-color: var(--secondary-color);
  padding: 1em;
  -webkit-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
  

}

.navigation-link ul{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  
}
.navigation-link ul li {
  margin-bottom: 1.5em;
} 

.navigation-link a{
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: italic; 
  text-transform: uppercase;
  font-size: 1.5em;
  letter-spacing: 0.1em;
  cursor: pointer;
  color: var(--primary-color);
}
.show-nav{
  opacity: 1;
  height: 300vh;
  position: fixed;
}





/*INDEX*/

/*MAIN PRINCIPAL*/
.main-principal{
  position: relative;
  top:16vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;


}
/*section primary*/
.primary-content{
  z-index: 1;
}
.primary-content >div{
  margin-top: 1.5em  ;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  row-gap: 1em;
}
.primary-content h1{
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7em;
  margin-left: 1em;
  color: var(--primary-color);
  
  
}
.primary-content h2{
text-transform: uppercase;
text-align: center;
font-size: 0.8em;
letter-spacing: 0.1em;
margin-left: 0.7em;
color: var(--primary-color);
}
.logo-titre{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.logo-titre img{
  width: 80%;
  

}
.img-primary{
  width: 100%;
  height: 41vh;
  background-image: url(images/background-primary.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.img-illustration-responsive{
  display: none;
}
.primary-content p {
  font-size: 1em;
  text-align: center;
  padding: 0 1.5em;
}


/*section second*/

.second-content{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 2em 1.5em;
  row-gap: 0.5em;
  
}
.second-content p{
  font-size: 1em;
  text-align: center;
}
.second-content .portrait{
  border-radius: 50%;
  width: 50%;
}
/*SECTION THIRD*/
.section-third-content{
  z-index: 2;
  margin-top: -1em;
}
/*section third*/
.third-content{
  width: 100%;
  padding: 0 0.7em;
  padding-top: 1em;
  padding-bottom: 4em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-radius: 20px 20px 20px 20px  ;
  }
  h3{
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    text-align: center;
    
  }
  .title{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    padding: 1em;
  
  }
  .title p {
    font-family: "Abril Fatface", serif;
    font-weight: 400;
    font-size: 1.5em;
    letter-spacing: 0.2em;
    text-align: center;
   
  }
  #first-retreat{
    background-color: var(--secondary-color);
    color:white;
  }
  #second-retreat{
    background-color: #F3EED9;
    color: var(--primary-color);
    margin-top: -2em;
  }


.images-flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;

}



.third-content .avenir{
  cursor:none;
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  color: var(--primary-color);
}


/*section fourth*/
.fourth-content{
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  row-gap: 2em;
  padding-bottom: 2em;
  background-color: var(--secondary-color);
  padding-top: 1.5em;
}
.yoga-cours{
  background-color: #F3EED9;
}
.open{
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.div-flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.content{
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  row-gap: 0.5em;
  padding: 0.5em 1em;
}
h4{
  font-size: 0.8em;
  text-transform: uppercase;
  text-align: center;
  color: var(--primary-color);
}
.content p{
  font-size: 0.9em;
  text-align:justify;
  color: white;
  /*padding: 0 1em;*/
}
.yoga-cours .content > p{
  color: var(--primary-color);
}
.img-flex{
  width:70%;
}
.img-flex-responsive{
 display: none;
}
.img-flex img{
  border-radius: 50%;
  -webkit-box-shadow: var(--box-shadow);
          box-shadow: var(--box-shadow);
}
/*FOOTER*/
.footer-index{
  width: 100%;
  height: 37vh;
  background-image: url(images/background-footer.svg);
  background-color: #F3EED9;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
  padding-top: 2em;
  position: relative;
}
.title-footer-flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  row-gap: 0.9em;
  margin-top: 1em;
}
.title-footer-flex .full-logo{
  width: 30%;
}

.word-footer .insta{
  width: 2em;
  height: 2em;
  
}
.word-footer{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-left: 1.5em;
  padding-right: 2em;
  position: absolute;
  bottom: 1em;
  width: 100%;
}

.word-footer >p {
  font-size: 0.8em;
  color: var(--primary-color);
  text-align: center;
}
.img-responsive{
  display: none;
}


/*CONTACT*/
/*section primary*/
.primary-contact{
  width: 100%;
  padding: 1.5em 1em;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  
}
.primary-contact h1{
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-top: 2em;
  color: var(--primary-color);
}
.primary-contact p , a{
  color:var(--primary-color);
  font-size: 0.9em;
  text-align: center;
}
.underline{
  text-decoration: underline;
  margin-top: 0.5em;
}
/*section second*/
.second-contact{
  width: 100%;
  height: 25vh;
  background-image: url(images/background-contact.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.img-background-responsive{
  display: none;
}
/*section third*/

.content.contact{
  width: 100%;
}
.contact >p{
  color: black;
}

/*A PROPOS*/
.main-apropos{
  background-color: white;
  position: relative;
  top: 15vh;
}
.section-apropos{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-align: center;
  row-gap: 1.5em;
  margin-top: 2em;
  margin-bottom: 2em;
}
.section-apropos h1{
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-top: 2em;
  color: var(--primary-color);
}
.section-apropos h2{
  font-size: 0.8em;
  color: var(--primary-color);
}
.img-apropos{
  width: 100%;
  margin-top: 2em;
}
.section-apropos p{
  font-size: 0.9em;
  padding: 0 1em;
  color: black;
}

/*FOOTER GENERAL*/
.general-footer{
  width: 100%;
  background-color: #F3EED9; 
  background-image: none; 
}
.general-footer .background-footer{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1em ;
  background-image: url(images/background-general-footer.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.general-footer .full-logo{
  width: 30%;
}
.general-footer a{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.general-footer .insta{
  width: 2em;
  height: 2em;
}
.general-footer .copyright{
  font-size: 0.8em;
  color: var(--primary-color);
  background-color: #F3EED9;
  width: 100%;
  padding: 1em;
 
}


/*RESPONSIVE*/

@media screen and (min-width: 390px){

  /*HEADER*/
  .logo{
   margin-left: -6em;
  }
  /*INDEX*/
  .logo-titre img {
  width: 70%;
  }
  .img-flex {
  width: 65%;
}
.arrow{
  margin: 0.5em 0;
}
  .title-footer-flex{
    margin-top: 0em;
  }
  .word-footer{
    bottom: 0.6em;
  }
  
  /*FOOTER*/
  .footer-index{
    height: 37vh;
    background-size: 85%;
  }
}
 
@media screen and (min-width: 500px){

  /*GENERALITES*/
  .btn-decouvrir{
    font-size: 1em;
  }
  .btn-contacter-nous{
    font-size: 1em;
  }
  /*HEADER*/
  .logo{
    width: 8%;
    margin-left: -11em;
  }
  
  /*INDEX*/
  .logo-titre img {
    width: 60%;
  }
  .second-content{
    padding: 2em 4.5em;

  }
  h3 {
    font-size: 1em;
  }
  .title p {
    font-size: 2em;
  }
  .img-flex {
    width: 55%;
  }
  .content{
    padding: 1em 3.5em;
  }
  /*FOOTER*/
  .footer-index {
    height: 32vh;
    background-size: 62%;
    background-position-y: 5em;
  }
  .title-footer-flex {
    margin-top: 1em;
    margin-left: 1em;
  }
  .title-footer-flex .full-logo {
    width: 25%;
  }
  .word-footer > p{
    font-size: 0.9em;
  }
  .word-footer {
    bottom: 11em;
    padding-left: 1.5em;
    padding-right: 4em;

  }
  .word-footer .insta {
    width: 2.3em;
    height: 2.3em;
  }
  
  /*A PROPOS*/
  .section-apropos{
    margin-bottom: 4em;
  }
  .section-apropos h1{
    font-size: 1em;
  }
  .section-apropos h2{
    font-size: 0.9em;
  }
  .section-apropos p {
    font-size: 1em;
    padding: 0 4em;
  }


  /*CONTACT*/
  .second-contact{
    height: 28vh;
  }
  .content p{
    font-size: 1em;
  }
  .primary-contact p{
    font-size: 1em;
  }

}



@media screen and (min-width: 600px){
  /*GENERALITES*/

 
  /*HEADER*/
  .logo {
    margin-left: -15em;

  }
  /*GENERAL FOOTER*/
  .general-footer .background-footer{
    background-size: 80%;
  }
  .general-footer .full-logo {
    width: 25%;
  }

  
  /*INDEX*/
   .logo-titre img {
    width: 50%;
  }
  .primary-content h1{
    font-size: 0.9em;
  }
  .primary-content h2{
    font-size: 0.9em;
  }
  
  .content p{
    padding: 0 2em;
  }
 
 
  .img-flex {
    width: 52%;
  }
  
  /*FOOTER*/
  .footer-index{
    background-size: 55%;
    background-position-y: 4em;
  }
  .title-footer-flex {
    margin-top: 0em;
    margin-left: 1.5em;
  }
  .title-footer-flex .full-logo {
    width: 22%;
  }

  /*CONTACT*/
  .primary-contact p {
    font-size: 1.1em;
  }
  .primary-contact a{
    font-size: 1em;
  }
  .second-contact {
    height: 32vh;
  }

}



@media screen and (min-width: 744px) {

  /*GENERALITES*/
  .btn-contacter-nous {
    font-size: 1.1em;
  }
  .btn-decouvrir{
    margin-top: 1em;
  }
  /*HEADER*/
  .header{
    padding: 1.7em 1.7em;
  }
  .logo{
    width: 6%;
   margin-left: -11em;
  }

  /*INDEX*/
  .logo-titre img {
    width: 40%;
  }
  .img-primary{
    background-image: none;
  }
  .img-illustration-responsive{
    display: block;
    text-align: center;
    background-color: #F3EED9;
    width: 100%;
    padding: 2em 0;
  }
  .img-illustration-responsive :nth-child(2){
    display: none;
  }
  
  /*SECTION SECOND*/
  .second-content {
    padding: 3em 7em;
  }
  .second-content p{
    padding: 0 4em;
    margin: 1em 0;
  }
  .second-content .portrait{
    width: 40%;
  }
  /*SECTION THIRD*/
  .third-content h3{
    padding-top: 1em;
  }
  .title p {
    font-size: 2em;
  }
  /*SECTION FOURTH*/
  .img-flex-responsive{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 50%;
   }
   .img-flex-responsive img{
    border-radius: 5%;
    width: 100%;
   }

  .img-flex {
    display: none;
  }
  .content p {
    padding: 0 5em;
  }
  /*FOOTER*/
  .footer-index{
    background-image: none;
    height: 28vh;
  }
  .title-footer-flex {
    margin-left: 0em;
    margin-top: 1em;

  }
  .title-footer-flex .full-logo {
    width: 20%;
  }
  .img-responsive{
    display: block;
  }
  .img-responsive img {
    width: 30%;
    position: absolute;
  }
  .img-right, .img-left{
    bottom: 1em;
  }
  .img-right{
    right: 1em;
  }
  .img-left{
    left: 2em;
  }
  .word-footer{
    padding-left: 2em;
   bottom: 10em;
  
  }
  /*A PROPOS*/
  .img-apropos {
    width: 100%;
    margin-top: 2em;
    display: block;
    text-align: center;
  }
  .section-apropos p {
    padding: 0 7em;
  }
  .img-apropos img{
    width: 90%;
    border-radius: 15px;
  }
  /*GENERAL FOOTER*/
  .general-footer{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 2em;
  }
  .general-footer .background-footer{
    background-image: none;
    width: 30%;
  }
  .general-footer .full-logo {
    width: 50%;
  }
  .general-footer .copyright{
    width: 100%;
  }
  
  
  /*CONTACT*/
  .second-contact {
    margin-bottom: 2em;
    background-image: none;
    position: relative;
  }
  .img-background-responsive{
    display: block;
    text-align: center;
    background-color: #F3EED9;
    width: 100%;
    padding: 2em 0;
  }
  .img-contact-resposive :nth-child(2){
    display: none;
  
  }
  

}



@media screen and (min-width: 834px){

  /*HEADER*/
   .logo {
    margin-left: -12.5em;
  }
 /*INDEX*/
 .img-primary{
  height: 42vh;
}
.img-three {
  right: 19em;
}
.content p {
  padding: 0 10em;
}
.second-content {
  padding: 3em 9em;
}
.second-content p {
  padding: 0 5em;
}
.btn-decouvrir {
  font-size: 1em;
}


/*A PROPOS*/
.section-apropos h1 {
  font-size: 1.2em;
}
.section-apropos h2 {
  font-size: 1em;
}
.section-apropos p {
  padding: 0 9em;
}


.title-footer-flex {
  margin-top: 0em;
}
/*CONTACT*/
.img-contact-one {
  width: 15%;
}
.img-contact-two {
  width: 45%;
}
 
}




@media screen and (min-width: 1024px){

  /*HEADER*/
  .logo {
    width: 4%;
    margin-left: -10em;
  }

  /*INDEX*/
   .logo-titre img {
    width: 35%;
  }
  .img-primary {
    height: 45vh;
  }
  .img-illustration-responsive{
    padding: 2em 1em;
  }
  .img-illustration-responsive :nth-child(2){
    display: block;
    width: 100%;
  }
  .img-illustration-responsive :nth-child(1){
    display: none;
  }

  .second-content p {
    font-size: 1.1em;
    padding: 0 6em;
  }
  .second-content .portrait {
    width: 30%;
    margin-bottom: 1em;
  }
  .fourth-content{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .div-flex {
    width: 43%;
  }
  .img-flex-responsive{
    width: 80%;
  }
  h3 {
    font-size: 1em;
  }
  .content p {
    font-size: 1.2em;
    padding: 0 ;
  }
  .button-fourth-content{
    margin: auto;
    width: 100%;
  
  }
  /*FOOTER*/
  .footer-index{
    height: 22vh;
  
  }
  .title-footer-flex .full-logo {
    width: 10%;
  }
  .img-responsive img {
    width: 20%;
  }
  .word-footer .insta {
    width: 1.7em;
    height: 1.7em;
  }
  .word-footer{
    bottom: 7em;
  }
  .img-right, .img-left {
    bottom: 0em;
  }
  .img-left {
    left: 13.5em;
  }
  .img-right {
    right: 13em;
  }
  /*A PROPOS*/
  .img-apropos img {
    width: 70%;
  }
  .section-apropos p {
    font-size: 1.2em;
    padding: 0 10em;
  }

  /*GENERAL FOOTER*/
  .general-footer .full-logo {
    width: 45%;
  }
  .general-footer .background-footer{
    width: 25%;
  }
  
  /*CONTACT*/
 
  .arrow{
    margin: 1em 0;
  }
  .primary-contact h1{
    font-size: 1em;
  }
  .primary-contact p, a {
    font-size: 1.3em;
  }
  .content .content-contact-responsive{
    padding: 0 10em;
  }
  .img-flex {
   width: 45%;
  }
  .img-flex img {
  border-radius: 20%;
  }
  
  .img-contact-responsive{
    width: 60%;
    
  }

}

@media screen and (min-width: 1280px){
  /*HEADER*/
  .logo {
    width: 3.5%;
  }
  /*INDEX*/
   .img-primary {
    height: 56vh;
  }
  
  .fourth-content{
    -webkit-column-gap: 1em;
       -moz-column-gap: 1em;
            column-gap: 1em;
  }
  .div-flex {
    width: 43%;
  }
  .second-content {
    padding: 3em 20em;
  }
  /*FOOTER*/
  .title-footer-flex{
    margin-top: 0em;
  }
  .img-right, .img-left {
    bottom: 0.1em;
  }
  /*A PROPOS*/
  .section-apropos p {
    padding: 0 15em;
  }
   /*CONTACT*/
   .second-contact {
    height: 32vh;
  }
   .img-contact-one {
    width: 11%;
    left: 34em;
  }
  .img-contact-two {
    width: 33%;
    right: 4em;
   
  }
  .img-contact-three {
    width: 33%;
    left: 1em;
  }
  .img-contact-responsive {
    width: 50%;
  }
  .content .content-contact-responsive {
    padding: 0 15em;
  }
  /*GENERAL FOOTER*/
  .general-footer .full-logo {
    width: 50%;
  }
  .general-footer .background-footer {
    background-image: none;
    width: 20%;
  }
  
}


@media screen and (min-width: 1440px){
  /*HEADER*/
  .logo {
    width: 3%;
    margin-left: -9.7em;
  }
  /*INDEX*/
  .title p {
    font-size: 2.4em;
  }
  .img-primary {
    height: 61vh;
  }
 
  /*FOOTER*/
  .footer-index {
    height: 23vh;
  }
  /*A PROPOS*/
  .section-apropos p {
    padding: 0 20em;
  }
  /*CONTACT*/
  .img-contact-one{
    left: 38.5em;
  }
  .content .content-contact-responsive {
    padding: 0 20em;
  }
  /*GENERAL FOOTER*/
  .general-footer .full-logo {
    width: 55%;
  }
  
  

}