/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;1,100;1,200;1,300&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Roboto:ital,wght@0,100;0,300;0,400;0,500&family=Poppins:ital,wght@0,200;0,300;1,100;1,200;1,300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root{
   --purple:#873b7c;
   --peru:#cd853f;
   --black:#222;
   --white:#fff;
   --light-black:rgb(49, 46, 49);
   --light-white:#beb9b9;
   --light-bg:#f5f5f5;
   --dark-bg:rgba(44, 43, 43, 0.7);
   --border:.1rem solid rgb(201, 179, 179);
   --box-shadow: 0 .5 1rem rgba(0, 1, 0, .1);

}
/*******SCREEN WIDTH DE BASE ASUS: 1366PX x 768PX******/
/******FONT-SIZE BASE MIN 1359PX*/
*{
    font-family: "Open Sans", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(.43,1.1,.62,1.08);
    text-transform: capitalize;
    /* scroll-behavior: smooth;*/
}
html{
      font-size: 62.5%;
      overflow-x: hidden;
      scroll-behavior: smooth;
      scroll-snap-type: y mandatory;
     /* scroll-snap-type:none ;*/
      scroll-padding-top: 9rem;
 }
html::-webkit-scrollbar{
      width: 1.6rem; 
 }
html::-webkit-scrollbar-track{  
      background: #222;
 }
html::-webkit-scrollbar-thumb{
      background: var(--peru);
 }
.heading{
      text-align: center;
      margin: 0 6rem;
      font-size: 4.2rem;
      padding: 1rem;
      border-bottom: .1rem solid #fff4;
      color: #fff;
} 
.heading span{
      font-size: 1.8rem;
      color: var(--purple);
 }   
.heading h3{
      font-size: 2.8rem;
      color: var(--purple);
 }
.btn{
      margin-top: 1rem;
      display: inline-block;
      background: var(--peru);
      color: var(--white);
      font-size: 2rem;
      cursor: pointer;
      padding: 1rem 3rem;  
  }
.btn:hover{
      letter-spacing: .2rem;
  }
section .title{
      font-family:"Montserrat", sans-serif;
      font-weight:300;
      font-size:4.2rem;
  }
h3{
      font-family:"Open Sans", sans-serif;
      font-size:3.2rem;
  }
p{
      font-family:"Open Sans", sans-serif;
      font-weight:300;
      font-size:1.8rem;
  }
section{
      /* width: 100%;
      height: 100vh; */   
      padding: 5rem 10%;
      scroll-snap-align: start;
      /*border-top: 1px solid lightgrey;*/
  }
/****************************************FORMULAIRE CONNEXION*****************************/
.login-form-container{
      position: fixed;
      top: -120%;
      left: 0;
      min-height: 100vh;
      width:100%;
      background: var(--dark-bg);
      display: flex;
      
      align-items: center;
      justify-content: center;
      z-index: 10000;
}
.login-form-container.active{
      top: 0;
}
.login-form-container form{
      margin: 2rem;
      padding: 1.5rem 2rem;
      border-radius: .5rem;
      background: #fff;
      width: 50rem;

}
.login-form-container form h3{
      font-size: 3rem;
      color: var(--light-black);
      text-align: center;
      text-transform: uppercase;
      padding: 1rem 0;
}
.login-form-container form .box{
      width: 100%;
      padding: 1rem;
      font-size: 1.7rem;
      color: #333;
      margin: 6rem 0;
      border: .1rem solid var(--dark-bg);
      text-transform: none;
}
.login-form-container form .box:focus{
      border-color: var(--peru);

}
.login-form-container form #remember{
      margin: 2rem 0;

}
.login-form-container form label{
      font-size: 1.5rem;
}
.login-form-container form .btn{
      display: block;
      width: 100%;
      }
.login-form-container form p{
      padding:.5rem 0;
      font-size: 1.5rem;
      color:#667;
}
.login-form-container form p a{
      color: var(--peru);
}
.login-form-container form p a:hover{
      color: var(--black);
      text-decoration:underline;
}
.login-form-container #form-close{
      position: absolute;
      top: 3rem;
      right: 2rem;
      font-size: 5rem;
      color: #fff;
      cursor: pointer;  
}
 /****************************************FORMULAIRE d'enregistrement*****************************/
.register-form-container{
  position: fixed;
  top: -120%;
  left: 0;
  min-height: 100vh;
  width:100%;
  background: var(--dark-bg);
  display: flex;
   
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.register-form-container.active{
  top: 0;
}


.register-form-container form{
  margin: 2rem;
  padding: 1.5rem 2rem;
  border-radius: .5rem;
  background: #fff;
  width: 50rem;

}
.register-form-container form h3{
  font-size: 3rem;
  color: var(--light-black);
  text-align: center;
  text-transform: uppercase;
  padding: 1rem 0;
}
.register-form-container form .box{
  width: 100%;
  padding: 1rem;
  font-size: 1.7rem;
  color: #333;
  margin: 4rem 0;
  border: .1rem solid var(--dark-bg);
  text-transform: none;
}
.register-form-container form .box:focus{
  border-color: green;

}
.register-form-container form #remember{
  margin: 2rem 0;

}
.register-form-container form label{
  font-size: 1.5rem;
}
.register-form-container form .btn{
  display: block;
  width: 100%;
  background-color: green;
}
.register-form-container form p{
  padding:.5rem 0;
  font-size: 1.5rem;
  color:#667;
}
.register-form-container form p a{
  color: var(--peru);
}
.register-form-container form p a:hover{
  color:var(--light-black);
  text-decoration:underline;
}
.register-form-container #register-form-close{
  position: absolute;
  top: 3rem;
  right: 2rem;
  font-size: 5rem;
  color: #fff;
  cursor: pointer;  
} 
#loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
}

#logo-loader {
      width: 100px;
      height: 100px;
      animation: spin 2s linear infinite;
}

@keyframes spin {
to {
      transform: rotate(360deg);
  }
}

/*****header-index****/
.header-index{
    /* height: 8rem;*/
    
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: 2rem;
      padding-bottom: 2rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--box-shadow);
      /*background: var(--white);*/
     /* background:transparent;*/
      /*background:rgb(86, 85, 85);*/
      background:#222;
      /*background: linear-gradient(to right, rgba(51, 50, 49, 2), rgba(107, 99, 93, 0.9), rgba(42, 36, 41, 0.9));*/
      position: fixed;
      /*border-bottom: rgba(0, 0, 0,.1) ;*/
      box-shadow:0 1rem 3rem rgba(0, 0, 0,.1) ;
      top:0;
      left: 0; 
      right: 0;
      z-index: 1000;
 }
 /***** changement de style au scroll******/
 .navbar.scrolled {
      background: var(--white);
 }
 .navbar.scrolled a{
      color: var(--light-black);
 }
 .navbar.scrolled .logo{
      color: var(--light-black);
 }


.header-index .logo {
      opacity:1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      /*color: var(--black);*/
      color: #fff;
      padding: 0 5px;
      margin-left: .5rem;  
 }
.header-index .logo img{
      color:var(--purple);
      padding-right: .1rem;
      width:60px;
      height: 30px;    
      font-weight: bolder;    
 }
.header-index .logo h1{/*h1 base min-1359PX*/
      font-size: 4.2rem;
      padding-left: 2rem;
      /*color:var(--black);*/
      /*color:#fff;*/
       color: var(--peru);
      /*color:var(--white);*/
      font-weight: 700;  
      font-family:"Dancing Script", sans-serif;       
 }
.header-index .logo h1 span{/*h3 base min-1359PX*/
      font-size:2.8rem;
      /*color: var(--light-black);*/
      /*color: #fff;*/
       color: var(--peru);
      /*color: var(--white);*/
      /*font-weight: 200;*/ 
      font-family:"Dancing Script", sans-serif; 
      transition: color 0.3s ease;      
 }
.header-index .logo h1 span1{/*h1 moins 1 rem (virgule)*/
      font-size:4.2rem;
     /* color: var(--black);*/
      /*color: #fff; */
       color: var(--peru);
      font-family:"Dancing Script", sans-serif; 
      transition: color 0.3s ease;     
 }
.header-index .logo h1 span2{/*h1 moins 1 rem (virgule)*/
      font-size:4.2rem;
      /*color: var(--black);*/ 
      /*color: #fff;*/
      color: purple;
      font-family:"Dancing Script", sans-serif; 
      transition: color 0.3s ease;
      display: none;      
 }
.header-index .coordo{
      opacity:1;
      display: flex;
      flex-direction: row;
      align-items: center;
      /*color: var(--black);*/
      /*color: #f9efd4;*/
      color: #f9efd4;
      gap: 5px;
      padding:  5px;
      
 }
.header-index .coordo i{
      color: var(--peru);
      font-size: 1.4rem;  
 }
.header-index .coordo h1{/*p 1024PX*/
     /* color: var(--light-black);*/  
      /*color: #faf2cc; */ 
      color: #d2cfc18c;  
      font-size: 1.6rem;
      font-weight: 400;
      font-family:"Open Sans", sans-serif;
      text-transform: lowercase; 
 }
.header-index .navbar a{/*p*/
      opacity:1;
      font-size: 1.8rem;
      margin-left: 2rem;
      /*color:var(--light-black);*/
      /*color: #faf2cc;*/ 
      color: #d2cfc18c;   
      cursor: pointer;
 }

.header-index .navbar a:hover{
      color: var(--peru);
 }

 /****** *********************header-index**sous-liste***************************/
.header-index .navbar .list-links{
      display: flex;
      align-items: center;
      flex-direction: row;
      width: 100%;
      list-style: none;
      flex-shrink: 0;
 }
 .header-index .navbar .list-links .link{
      font-size: 1.8rem;
      margin-left: 1.5rem;
      /*color:var(--light-black);*/
      /*color: #faf2cc;*/
      color: #d2cfc18c;  
      cursor: pointer;
      flex-shrink: 0;
 }
 .header-index .navbar .list-links .link .sous-liste{
      width: 20rem;
      padding: 5px ;
 } 
.header-index .navbar .list-links .link:nth-child(2){
      margin-left: .4rem;  
      /*margin-right: rem;*/  
 }
.header-index .navbar .list-links .link:nth-child(3){
      margin-left: 2.3rem;  
      /*margin-right: rem;*/  
 }
.header-index .navbar .list-links .link:nth-child(4){
      margin-left: 0;   
 }
.header-index .navbar .list-links .link:nth-child(5){
      margin: 0;  
 }

.header-index .navbar .list-links .link span{
      font-size: 1rem;  
 }
.header-index .navbar .list-links .link:hover > ul{
      display:block;   
 }
.header-index .navbar .link .sous-liste .link-sous-liste{/*p base min-1359px*/   
      color:#fff;
      font-size: 1.8rem;
      margin: 0 ;
      padding: 5px;
      text-align: left;
      list-style-type: none;
      background: #686665;
      border-bottom: 0.4px solid white;
}
.header-index .navbar .link .sous-liste .link-sous-liste:hover{
      background-color: #222;
}
.header-index .navbar .link .sous-liste .link-sous-liste a:hover{
      color:#fff;
} 

.header-index .navbar .list-links .sous-liste{
      top: 10;/* on aligne le haut de la sous-liste avec le bord de la nav*/
      position: absolute;
      display: none;/*on fait disparaitre le sous-menu avec display:none*/
}
.link:hover > ul{
      display:block;/* au survol du lien contenant un ul(ici il s'agit du lien matériel) la sous-liste mise en display: none réapparaitra avec display: block.*/   
}
.header-index .sideBar{
      display: flex;
      justify-content:center;
      text-align: center;
      position:fixed;
      top:0;
      right:-320px;
      width:320px;
      height:80vh;
      background: #222;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      padding-top: 60px;
      transition: all 0.5s ease-out;
 }
.header-index .sideBar ul {
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content:flex-start;
      text-align: center;
      gap: 10;
}

/***SIDEBAR***/
.sideBar ul li {/*p base min-1359px*/
      padding: 1rem;
      margin-bottom: 1rem;
      font-size: 1.8rem;
}

.sideBar ul li a {
      color: #fff;
      /*text-decoration: underline;*/
      transition: all 2s ease ;
}
.sideBar ul li a:hover {
      color: var(--peru);
      text-decoration: underline;
}
.sideBar.open {
      right: 0;
}

.hamburger{
  margin-right:1.5rem;
}
#menu-btn{
      font-size: 2.2rem;
      cursor: pointer; 
      color: #d2cfc18c; 
      display: none;
 }
#scrollToTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 10px 15px;
      font-size: 1.6rem;
      background-color: #333;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      z-index: 1000;
}

#scrollToTop:hover {
      background-color: #555;
}
#scrollToTop {
      display: none;
}



/***banner***/
.banner{
      height:30rem;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      /*padding-top: 8rem;*/
      padding-left: 0;
      padding-right: 0;
      margin-top: 0;
      margin-bottom: 0;
      padding-bottom: 0;
}
.banner .window-blur{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: #222;
      opacity:0.1;
      /*filter:blur(1px);*/
      z-index: 2;
      
      
}
.banner .window-blur h1{
      font-size:7rem;
      letter-spacing: 20px;
      position: absolute;
      display: flex;
      align-items: center;
      text-align: left;
      margin-left: 10px;
      /*margin-top: 150px;*/
      bottom: 0;
      /*top: 0;
      left: 0;*/
      color: #9e8b8b;
      
}
.banner .banner-img{
      position:relative;
      width: 100%;
      height: 100%;
      overflow:hidden;
      object-fit: cover;
      display: flex;
      align-items: center;
      justify-content:center ;
      
      z-index: 1;   
}
.banner .banner-img::before{
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /*background-color: #263221;*/
      background-color: #222;
      opacity: .6;
      z-index: 2;
}
.banner .banner-img img{
      width: 100%;
      overflow-y: hidden;
      }
.banner .banner-img .content-banner{
      /*margin-top: 5%;*/
      position: absolute;
      text-align: center;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 40rem;
      z-index: 2;  
    }
.banner .banner-img .content-banner span{/*h1 base min-1359PX*/
      font-size: 4.2rem;
      color: #fff;
      width: 100%; 
 }
.banner .banner-img .content-banner span a{/*p base min-1359px*/
      font-size: 1.8rem;
      margin-left: 3rem;
      color: #fff;
      cursor: pointer;
      text-decoration: underline;
      cursor: pointer;
      
 }  
.banner .banner-img .content-banner .btn-accueil:hover{
      color: #cd853f;
 }


 /*********************HOME*slide*********************************/
.home{
      padding-top: 8rem;
      padding:0;
      margin: 0;
      /*background-color: rgb(174, 171, 171);*/
     /* background-color: transparent;*/
  }           
.home-slide{
     /* padding-top: 8rem;*/
      width: 100%;
      height: 100vh;                            
     }     
.home-slide .slide-home{
      height: 100%;
      width: 100%;
      background-size: cover;/*METTRE COVER!!!!!!*/ 
      background-position: center;/*METTRE CENTER!!!!!!*/
      background-repeat: no-repeat;
      object-fit: cover;
      position: relative;
      z-index: -1;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    /*opacity:0;*/
    } 
    .home-slide .slide-home .img-container1 .window-blur-index{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: #222;
      opacity:0.1;
      /*filter:blur(1px);*/
      /*filter: contrast(1.75);*/
      z-index: 2;
      
      
}
    .home-slide .slide-home .img-container1 .window-blur-index h1{
      font-size:10rem;
      letter-spacing: 20px;
      position: absolute;
      display: flex;
      align-items: center;
      text-align: center;
      /*margin-left: 30%;*/
      
      /*margin-top: 150px;*/
      bottom: 0;
      /*top: 0;
      left: 0;*/
      /*color: #9e8b8b;*/
      color: #dad7d7;
}
    .home-slide .slide-home .img-container2 .window-blur-index{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /*background-color: #423d3d;*/
      background-color: #222;
      opacity:0.1;
      /* filter:blur(1px);*/
      /*filter:blur(2px);*/
      z-index: 2;
      
      
}
    .home-slide .slide-home .img-container2 .window-blur-index h1{
      font-size:10rem;
      letter-spacing: 20px;
      position: absolute;
      display: flex;
      align-items: center;
      text-align: center;
      /*margin-left: 30%;*/
      /*margin-top: 150px;*/
      bottom: 0;
      /*top: 0;
      left: 0;*/
      color: #dad7d7;
      
}
    .home-slide .slide-home .img-container3 .window-blur-index{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /*background-color: #423d3d;*/
      background-color: #222;
      opacity:0.1;
      /* filter:blur(1px);*/
      /*filter:blur(2px);*/
      z-index: 2;
      
      
}
    .home-slide .slide-home .img-container3 .window-blur-index h1{
      font-size:10rem;
      letter-spacing: 20px;
      position: absolute;
      display: flex;
      align-items: center;
      text-align: center;
      /*margin-left: 30%;*/
      /*margin-top: 150px;*/
      bottom: 0;
      /*top: 0;
      left: 0;*/
      /*color: #d4cece;*/
      color: #dad7d7;
}
    .home-slide .slide-home .img-container4 .window-blur-index{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /*background-color: #423d3d;*/
      background-color: #222;
      opacity:0.1;
       /*filter:blur(1px);*/
      /*filter:blur(2px);*/
      z-index: 2;
      
      
}
    .home-slide .slide-home .img-container4 .window-blur-index h1{
      font-size:10rem;
      letter-spacing: 20px;
      position: absolute;
      display: flex;
      align-items: center;
      text-align: center;
      /*margin-left: 30%;*/
      /*margin-top: 150px;*/
      bottom: 0;
      /*top: 0;
      left: 0;*/
      /*color: #a2a0a0;*/
      color: #dad7d7;
}
/*.home-slide .slide-home::before{
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: var(--dark-bg);
      z-index: -1;      
}*/       
  


/*.home-slide .slide-home .content{
      width:100rem;
      text-align: center;
      
      align-items: center;       
  }*/
.home-slide .slide-home .img-container1{
      height: 100%;
      width: 100%;
      background: url("/images/bg1.jpg");
      background-size: cover;/*METTRE COVER!!!!!!*/ 
      background-position: center;/*METTRE CENTER!!!!!!*/
      background-repeat: no-repeat;
      object-fit: contain;
      position: relative;
      z-index: -1;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
}
.home-slide .slide-home .img-container1::before{
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /*background: var(--dark-bg);*/
       background: #222;
      opacity: 0.8;
      z-index: -1;      
}
.home-slide .slide-home .img-container2{
      height: 100%;
      width: 100%;
      background: url("/images/bg2.jpg");
      background-size: cover;/*METTRE COVER!!!!!!*/ 
      background-position: center;/*METTRE CENTER!!!!!!*/
      background-repeat: no-repeat;
      object-fit: contain;
      position: relative;
      z-index: -1;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
}
.home-slide .slide-home .img-container2::before{
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /*background: var(--dark-bg);*/
       background: #222;
      opacity:0.8;
      z-index: -1;      
}
.home-slide .slide-home .img-container3{
       height: 100%;
      width: 100%;
      background: url("/images/bg3.jpg");
      background-size: cover;/*METTRE COVER!!!!!!*/ 
      background-position: center;/*METTRE CENTER!!!!!!*/
      background-repeat: no-repeat;
      object-fit: contain;
      position: relative;
      z-index: -1;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
}
.home-slide .slide-home .img-container3::before{
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
     /* background: var(--dark-bg);*/
      background: #222;
      opacity:0.8;
      z-index: -1;      
}
.home-slide .slide-home .img-container4{
       height: 100%;
      width: 100%;
      background: url("/images/bg6.jpg");
      background-size: cover;/*METTRE COVER!!!!!!*/ 
      background-position: center;/*METTRE CENTER!!!!!!*/
      background-repeat: no-repeat;
      object-fit: contain;
      position: relative;
      z-index: -1;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
}
.home-slide .slide-home .img-container4::before{
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
     /* background: var(--dark-bg);*/
      background: #222;
      opacity:0.8;
      z-index: -1;      
}

.home-slide .slide-home .img-container1 .content{
      width:100rem;
      text-align: center;
      /*border: 1px solid white;*/
      /*margin-left: 20%;
      margin-right: 20%;*/
      align-items: center;
      position:relative;
      z-index: 3;       
  }
.home-slide .slide-home .img-container2 .content{
      width:100rem;
      text-align: center;
      /*border: 1px solid white;*/
      /*margin-left: 20%;
      margin-right: 20%;*/
      align-items: center;
      position:relative;
       z-index: 3;        
  }
.home-slide .slide-home .img-container3 .content{
      width:100rem;
      text-align: center;
      /*border: 1px solid white;*/
      /*margin-left: 20%;
      margin-right: 20%;*/
      align-items: center;
      position:relative; 
        z-index: 3;      
  }
.home-slide .slide-home .img-container4 .content{
      width:100rem;
      text-align: center;
      /*border: 1px solid white;*/
      /*margin-left: 20%;
      margin-right: 20%;*/
      align-items: center;
      position:relative;
       z-index: 3;        
  }
.home-slide .slide-home .content .homespan{/*h1 du breakpoint supérieur*/
      font-size: 4.8rem;
      text-transform: uppercase;
      /*letter-spacing: .1rem;*/
      display: block;
      padding-bottom: .5rem;
      color:var(--white);        
  }

.home-slide .slide-home .content .homeh3 {
      display: flex;
      align-items: center;
      justify-content: center;     
  }

.home-slide .slide-home .content .homeh3 .boxline{
      width:15%;
      /*border:1px solid white;*/
      height: 1rem;     
      display: flex;
      align-items: center;    
  }

.home-slide .slide-home .content .homeh3 .boxline span{
      width:100%;
      height: 1px;
      background-color:var(--peru);
     opacity: .7;
      margin: 0 5px;      
      }

.home-slide .slide-home .content .homeh3{/*2 rem en moins du homespam*/
      font-size: 2.4rem;
      text-transform: uppercase;
      letter-spacing: .3rem;
      color:var(--white);
      text-shadow: 0 .5rem 1rem rgba(0, 0, 0, .7);
      line-height: 1;
      padding: 2rem 0;
  }

.home-slide .slide-home .content .homep{
      color :rgb(238, 234, 234);
      font-size: 1.8rem;
  }

.homebtn{
      margin-top: 1rem;
      display: inline-block;
      border-radius: 20px;
      /*background: var(--purple);*/
      background-color:var(--peru);
      color: var(--white);
      font-size: 2.2rem;
      cursor: pointer;
      padding: 1rem 3rem;  
  }

.homebtn:hover{
      letter-spacing: .2rem;
  }

/***swiper***/      
.swiper-button-next,
.swiper-button-prev{/*h1*/
      height: 6rem;
      width: 6rem;
      padding:.8rem;
      line-height: 5rem;
      color: var(--black);
      background:var(--peru);
      opacity: .7;
      border-radius: .5rem;
      transition:all .2s ease;
       z-index: 3;   
}
.swiper-button-next:hover,
.swiper-button-prev:hover{
      opacity:1;
      background:var(--white);
      color:var(--peru);     
}
.swiper-button-next::after,
.swiper-button-prev::after{  
     font-size: 1rem;         
}
 .swiper-button-next,
  .swiper-button-prev{
      margin-top: -30rem;     
}
.swiper-pagination{
      padding-bottom: 50px;
}
    
/********************************************animation css originale*home******************/
/* État initial : invisible */
.fade-element {
      opacity: 0;
      visibility: hidden;
      /*transform: translateY(20px);*/
      transition: opacity 1s ease, visibility 0s linear 1s, transform 1s ease;
}
/* État visible : fade-in */
.fade-element.visible {
      opacity: 1;
      visibility: visible;
    /* transform: translateY(0);*/
      transition: opacity 1s ease, visibility 0s linear 0s, transform 1s ease;
}
/***SLIDE HOME*****/
.slide-home {
     /* opacity: 0;*/
      /*visibility: hidden;*/
      /*transition: opacity 1s ease-in, visibility 2s linear 2s transform 3s ease-in;*/
     animation: fadeIn 2s ease forwrds;
      transform: scale(1);
      /*filter: blur(5px);*/
      /*transition: all 2s ease;*/
}
.slide-home.visible{
      /*opacity: 1;
      /*visibility: visible;*/
      transition: opacity 1s ease, visibility .5s linear 0s, transform 5s ease-in;
      /*transform: scale(1.04)*/
      /*filter: blur(0);*/
  }
.homeh3 {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}
.homeh3.visible{
      opacity: 1;
      transform: translateY(0); 
}
.homespan{
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.6s ease-in, transform 0.6s ease-in; 
}
.homespan.visible{
      opacity: 1;
      transform: translateY(0); 
}
.homep{
      opacity: 0;
      transform: translateY(50px);
      transition: opacity .9s ease-in, transform .9s ease-in;
}  
.homep.visible{
      opacity: 1;
      transform: translateY(0); 
}
.homebtn{
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 1.2s ease-in, transform 1.2s ease-in;
 
}
.homebtn.visible{
      opacity: 1;
      transform: translateY(0); 
}
  @keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(50px);  
  }
  to {
      opacity: 1;
      transform: translateY(0);      
      }
  }
.swiper-pagination .swiper-pagination-clickable .swiper-pagination-bullets .swiper-pagination-horizontal{
      bottom:0; 
}

.swiper-pagination-bullet-active{
      background:var(--peru);    
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullets .swiper-pagination-horizontal{
      bottom: 0;  
}
/************************CSS SECTION ABoUt, A PROPOS****************/
.à-propos{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap:2rem;
      width: 100%;
      height: auto;
          
}  
.à-propos .image-about {
      flex: 1 1 41rem; 
      position: relative;     
}
.à-propos .image-about img{
      width:100%;
      border-right:2px solid var(--peru) ;  
      border-bottom:2px solid var(--peru) ;  
}
.à-propos .image-about::after{
      content: "";
      width: 100%;
      height:100%;
      background-color: rgb(146, 144, 144);  
      position: absolute;
      top: 20px;
      right: -20px;
      z-index: -1;       
}
.à-propos .contenu{
      flex: 1 1 41rem;
      z-index: 2;  
}
.à-propos .contenu .title{
      font-size: 4.2rem;
      color:var(--peru); 
}
.à-propos .contenu p{
      font-size: 1.8rem;
      color: var(--light-black);
      padding: 1rem 0;
      line-height: 2; 
}
.à-propos .contenu p span{
      color:rgb(141, 132, 11);
      font-weight: 700;
      font-family: "Dancing Script",sans-serif;
      font-size: 2.2rem;
}
.contenu .btn{/*p du breakpopint inférieur*/
      margin-top: 1rem;
      display: inline-block;
      background: var(--peru);
      color: var(--white);
      font-size: 1.6rem;
      cursor: pointer;
      padding: 1rem 3rem;
      margin-bottom: 2rem;
 }
 .contenu .btn:hover{
      letter-spacing: .2rem;
      color:purp
 } 
 
 /***********************************SERVICES***********************************/
.services{
      background: url("/images/img-bg-section-tarifs.png")no-repeat center center fixed;
      background-size: cover;
      position: relative; 
      height:auto;
      
}
.services::before{
      content:"";
      position: absolute;
      inset: 0;
      background-color:var(--dark-bg);
      z-index: 1;
}
.services .content-services{
      display: flex;
      align-items: center;
      flex-direction:column;
      gap:2rem; 
  }
.services .content-services .contenu{
      display: flex;
      flex-direction:column;
      z-index: 2;
  }
.services .content-services .contenu h1{
      font-family:"Montserrat",sans-serif;
      font-weight:300;
      font-size:4.2rem;
  }
.services .content-services .contenu .conclusion{/*h" base min-1359px*/
      margin-top:2rem;
      font-size: 2.8rem;
      color: #f8f8f8;
      text-shadow:
      -1px -1px 0 black,
      1px -1px 0 black,
      -1px  1px 0 black,
      1px  1px 0 black;
  }

.services .content-services .contenu .title{
      width : 100%;
      object-fit: contain;
      display: flex;
      align-items: center;
      flex-direction: column;
      padding: 20px 8px;
  }

.services .content-services .contenu .title p{
      font-size: 2rem;
      color: #f8f8f8;
      text-shadow:
      -1px -1px 0 black,
      1px -1px 0 black,
      -1px  1px 0 black,
      1px  1px 0 black;
  }

.services .content-services .contenu .title h1{
      font-size: 4.2rem;
      color: var(--peru);
      text-shadow:
      -1px -1px 0 rgb(189, 174, 174),
      1px -1px 0 rgb(189, 174, 174),
      -1px  1px 0 rgb(189, 174, 174),
      1px  1px 0 rgb(189, 174, 174);
      margin-bottom: 2rem; 
  }
.services .content-services .contenu h3{
      font-size: 2.8rem;
      color: var(--light-black);
      margin-top: 2rem; 
  }
.services .content-services .contenu p{
      font-size: 1.8rem;
      color: var(--light-black);
      padding: .5rem 0;
      line-height: 2; 
    }
.services .content-services .box-container{
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      gap: 1.5rem;
      background-color:#ffff;
    
  }
.services .content-services .box-container .box{
      flex: 1 1 30rem;
      border-radius: .5rem;
      padding: 1rem;
      text-align: center;
  }
.services .content-services .box-container .box i{/*h2 base 1359PX*/
      padding: 1rem;
      font-size: 3.2rem;
      color: var(--peru);
  }
.services .content-services .box-container .box h3{/*h3 base 1359PX*/
      font-size: 2.6rem;
      color:#667 ;
      font-weight: 600;
  }
.services .content-services .box-container .box P{/*P*/
      font-size: 1.8rem;
      color:#667 ;
      padding: 1rem 0;
  }
.services .content-services .box-container .box:hover{
      box-shadow: 0 1rem 2rem rgba(0, 0, 0,.1) ;
      background-color: #fff;
  }
/************************CSS SECTION tarifs****************/
.tarifs{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap:2rem;
}  
 .tarifs .image-about {
      flex: 1 1 41rem;
      position: relative;     
}
.tarifs .image-about::after{
      content: "";
      width: 100%;
      height:100%;
      background-color: rgb(216, 237, 216);     
      position: absolute;
      top: 20px;
      left: -20px;
      z-index: -1;
}
.tarifs .image-about img{
      width:100%;
      border-left:2px solid var(--peru) ;  
      border-bottom:2px solid var(--peru) ;     
}
.tarifs .contenu{
      flex: 1 1 41rem; 
}
.tarifs .contenu .title{
      font-size: 4.2rem;
      font-family:"Montserrat", sans-serif;
      font-weight:300;
      color: var(--peru); 
}
.tarifs .contenu p{
      font-size: 1.8rem;
      color:#667;
      padding: 1rem 0;
      line-height: 2;
       
}
.tarifs .contenu .icons-container p span{
      color:rgb(141, 132, 11);
      font-weight: 700;
      font-family: "Dancing Script",sans-serif;
      font-size: 2.1rem;
}
.tarifs .contenu  .icons-container{
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin-top: 3rem; 
}

.tarifs .contenu .icons-container .icons {   
      flex: 1 1 16rem;
      background-color: var(--light-bg);
      text-align: center;
      padding: 2rem 3rem;
      position:relative
}
.tarifs .contenu .icons-container .icons img{
      position: absolute;
      top: 0;
      left:0;
}
.tarifs .contenu .icons-container .icons h4{/*h4 base 1359px*/ 
      /*color: var(--light-black);*/
      color: var(--peru);
      font-weight: 300;
      font-size: 2.4rem;
      padding-top: 1rem;
}
.tarifs .contenu h3{/*h3 bsae 1359px*/
      font-size: 2.8rem;
      padding-top: 1rem;
      color:#667;    
      font-weight: 500;    
 }
.tarifs .contenu .btn4{
      /*margin-top: 1rem;*/
      display: inline-block;
      background: var(--peru);
      color: var(--white);
      font-size: 1.8rem;
      cursor: pointer;
      padding: 1rem 3rem;
 }
.tarifs .contenu .btn4:hover{
      letter-spacing: .2rem;
      /*color:purple;*/
 } 
 
  
  /***********************Portfolio gallery******************************/
.gallery {
      display:flex;
      align-items:center;
      flex-direction: column;
      text-align: center;
 }
.gallery .box-container{
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;    
 }
.gallery .title {
      font-size: 4.2rem;
      color: var(--peru);
      margin-bottom: 2rem; 
 }
.gallery .box-container .box-gallery{
      flex: 1 1 30rem;
      overflow: hidden;
      height: 25rem;
      box-shadow: 0 1rem 2rem rgba(0, 0, 0,.1) ;
      border: 1rem solid #fff;
      border-radius: .5rem;
      position: relative;
  }
.gallery .box-container .box-gallery img{
      height: 100%;
      width: 100%;
      object-fit: cover;  
 }
.gallery .box-container .box-gallery .content-box{
      position: absolute;
      top: -100%;
      left: 0;
      height: 100%;
      width: 100%;
      text-align: center;
      background: rgba(0, 0, 0,.7);
      padding: 2rem;
      padding-top: 5rem;   
 }
.gallery .box-container .box-gallery:hover .content-box{
      top: 0; 
 }
.gallery .box-container .box-gallery .content-box h3{/*h3 base min 1359PX*/
      font-size: 2.8rem;
      color:#fff;
 }
.gallery .box-container .box-gallery .content-box p{/*p base min 1359PX*/
      font-size: 1.8rem;
      color: #fff;
      padding: .5rem 0; 
 }
.gallery .box-container .box-gallery .content-box .btn{
      color: #fff;
      background-color: var(--peru); 
 }
.gallery .box-container .box-gallery .content-box .btn a{
      color: #fff; 
 }

 /*******************************section team*debut****************************/


.team{
      background: var(--light-bg);
      height: 100vh;
      display:flex;
      align-items:center;
      flex-direction: column;
      text-align: center;
}
.team .title {
      text-align: center;
      color:var(--peru) ;
      font-size: 4.2rem;
      margin-bottom: 2rem;
}
.team .team-phrase{  
      color:rgb(85, 90, 95);
      font-size: 1.8rem;
      padding-bottom:1rem ;
}
.team .team-slider .slide{
      width:35rem;
      height: 50rem;
      margin-top: 1.5rem;   
}
.team .team-slider .slide .image{
      height: 25rem;
    /* padding-top: 2rem;*/
    /* overflow: hidden;*/
      position: relative;
      display:flex;
      align-items:center;
      justify-content: center;
      background-color: #fff;
      border: 1px solid black; 
} 
.team .team-slider .slide .image .medaille{
      height: 25rem;
      width: 100%;
      /*padding-top: 2rem;*/
      overflow: hidden;
      position: absolute;
    /* border-radius: 50%;*/
      z-index: 1;
      display:flex;
      align-items:center;
      justify-content: center;
    /* background-color: #fff;*/
      border: 1px solid rgb(84, 82, 82); 
  }
.team .team-slider .slide .image .medaille .socials-icons {
      /*border: 1px solid white;*/
      position: absolute;
      z-index: 1;
      width: 50%;
      display: flex;
      justify-content: space-between;
      transition: all 4s ease-out;
}
.team .team-slider .slide .image .medaille .socials-icons i{/*p du breakpts inférieur*/
      font-size: 1.8rem;
      color: #fff;
      transform: translateY(-700%);
}
.team .team-slider .slide .image .medaille:hover .socials-icons i{
      top: 0;
      transform: translateY(0%);
}
.team .team-slider .slide .image .medaille:hover {
      background-color: var(--dark-bg);
}
.team .team-slider .slide .image  img{
      height: 100%;
      width: 100%;
    /* border-radius: 50%;*/
      object-fit: cover;
} 
.team .team-slider .slide .image span{
      position: absolute;
      bottom:-10rem;
      left: 50%;
      transform: translateX(-50%);
      padding: .5rem 1.5rem;
      font-size: 1.8rem;
      color: var(--white);
      background: var(--black);
} 
.team .team-slider .slide:hover .image span{
      bottom: 1rem;
}
.team .team-slider .slide .content{
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border:var(--border);
      margin-bottom: 4rem;
}
.team .team-slider .slide .content .inform{
      background: rgb(67, 27, 27);
      width: 100%;
      color: #ccc;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
}
.team .team-slider .swiper-pagination{  
      top:37rem;
}


/***********************************BLOGS***********************/
.blog{
      background: var(--light-bg);
      height: auto;
  }
.blog .heading h1{
      color: var(--peru);
      font-size: 4.2rem;
      font-family: "Montserrat",sans-serif;
      font-weight: 300;
      margin-bottom: 1rem;
}
.blog .box-container{
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
}
.blog .box-container .surbox{
      flex: 1 1 25rem;
      background: #fff;
      padding: 8px;
      border: 1px solid white;
      border-radius: 5px;
}
.blog .box-container .box{
      flex: 1 1 25rem;
      border-radius: .5rem;
      overflow: hidden;
      /*box-shadow: 0 1rem 2rem rgba(0, 0, 0,.1);*/
      background-color: #fff;
      position: relative;
}
.blog .box-container .surbox:nth-child(4),
.blog .box-container .box:nth-child(4){
      display: none;
}

/*.blog .box-container .box .ecusson{
    position: absolute;
    border: 1px solid rgb(225, 208, 18) ;
    text-align: center;
    color:rgb(225, 208, 18) ;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 5px 2px;
    text-transform: uppercase;
    background: rgb(211, 17, 17);
    border-radius: .5rem 0 .5rem 0;
    width: 100px;
}*/

.blog .box-container .box img{
      height: 25rem;
      width: 100%;
      object-fit: cover;
}

.blog .box-container .box .content{
      padding: 1.8rem; 
      text-align: center; 
}
.blog .box-container .box .content h3{/*h4 du breakpts inférieur*/
      font-size: 2.2rem;
      color:#333 ;
}
.blog .box-container .box .content h3 i{
      color: var(--peru);
}

.blog .box-container .box .content p{
      font-size: 1.8rem;
      color: #667 ;
      padding: 1rem 0;
}
.blog .box-container .box .content .infos {
      width: 100%;
      padding:5px 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    /* border: 1px solid black;*/
}

.blog .box-container .box .content .infos i{/*p du breakpts inférieur*/
      font-size: 1.2rem;
      color: var(--peru);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      /*border: 1px solid black;*/
  }

.blog .box-container .box .content .infos p{
      font-size: 1.4rem;
      font-family: "Poppins",sans-serif;
      font-weight: 600;
    
}
.blog .box-container .box .content .btn-more{/*p du breakpts inférieur*/
      margin-top: 1rem;
      display: inline-block;
      background: var(--peru);
      color: var(--white);
      font-size: 1.8rem;
      cursor: pointer;
      padding: 1rem 3rem;  
      
}
/************page traitement.php********/
.message{
     /*padding: 20px;*/
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
     /* flex-wrap: wrap;*/
      gap:2rem;
      width: 100%;
      height: 100vh;   
      background-color: #fff;
     /*border: 1px solid #2e8b57;*/
      color: #1d201f;
      font-family:"Open San", sans-serif;
      /*margin: 30px auto;
      max-width: 500px;
      border-radius: 6px; */
}


/******************************section footer********************************/
.footer{
      background-color:#333 ;
   /* height:50rem;*/
}
.footer .box-container{
      display: flex;  
      flex-wrap: wrap; 
      gap: 1.5rem;
  }
.footer .box-container .box1{
      padding: 1rem 0;
      flex: 1 1 25rem;
  }
.footer .box-container .box1 h3{/*h3 1024PX*/
      font-size: 2.4rem;
      padding: .7rem 0;
      color:#fff;
      font-weight: 400;  
  }
.footer .box-container .box1 h3 span{
      /*font-size: 2.4rem;*/  
      color:#ab1e38;
      font-weight: 400;  
  }
.footer .box-container .box1 p{/*p 1024PX*/
      font-size: 1.6rem;
      padding: .7rem 0;
      color: #fff;
  }
.footer .box-container .box1 a{/*p 1024PX*/
      display: block;
      font-size: 1.6rem;
      padding: .7rem 0;
      color: #c4bebe;;
  }
.footer .box-container .box1 a:hover{
      /*color: var(--peru);*/
      color: #dde01b;
      text-decoration: underline;
  }
.footer .credit{/*p 1024PX*/
      text-align: center;
      padding: 2rem 1rem;
      margin-top:2rem ;
      font-size:1.6rem ;
      color: #fff;
      font-weight: bold;
}
.footer .credit span{
      color: var(--peru);
}


/*******************************MAX-WIDTH 2559PX**************************************************/ 
@media(max-width:2559px){
/*****BANNER********/
.banner{
      height: 32rem;
      padding-top: 7rem;
}
}

/******************************MIN-WIDTH 1920PX******************************/
@media(min-width:1920px){
section{
      padding: 5rem 15%;
  }
/***banner***/
.banner{
      height: 32rem;
      padding-top: 7rem;
}
/***footer****/
.footer .box-container {
      gap:2.2rem;
  }
.footer .box-container .box1{
      padding: 1rem 0;
      flex: 1 1 28rem;
  }
.footer .box-container .box1 h3{
      font-size: 3.6rem;
      padding: .7rem 0;
      color:#fff;
      font-weight: 400; 
  }
.footer .box-container .box1 p{
      font-size: 2.2rem;
      padding: .7rem 0;
      color: #fff;
  }
.footer .box-container .box1 a{
      display: block;
      font-size: 2rem;
      padding: .7rem 0;
      color: #c4bebe;;
  }
  }


/******************************RESPONSIVE 1200PX START******************************/

@media(max-width:1200px)  {
section{
      padding: 3rem 5%;
    }

/*****BANNER********/
.banner{
      height: 30rem;
      padding-top: 7rem;
}
/***à-propos****/
.à-propos{
      height: 100vh;
  }
/***services***/
.services{
      height: auto;
  }
/***tarifs***/
.tarifs{
      height:auto
  }
/***footer****/
.footer .box-container .box1{
      padding: 1rem 0;
      flex: 1 1 20rem;
  }
}


/******************************RESPONSIVE 1180PX START******************************/
@media(max-width:1180px){

/***blog***/
.blog .box-container .surbox:nth-child(4),
.blog .box-container .box:nth-child(4){
      display: flex;
}
}

/******************************RESPONSIVE 1024PX ********************************/
@media(max-width:1024px) {
.header-index .navbar{
      display:none;
  }
#menu-btn{
      display:inline-block;
  } 
.fa-times{
      transform: rotate(180deg);
  }  
.sidebar.open {
      right: 0;
} 
.menu .slide .box-container .box{
      flex-flow: column;
      text-align: center;
  }
  /***header-index***/
.header-index .logo h1{/*h1*/
      font-size: 3.6rem;        
 }
.header-index .logo h1 span{/*h2*/
      font-size: 2.4rem;
}  
.header-index .topBar .coordo i{ /*p du breakpoint inférieur*/
      font-size: 1.4rem;  
 }
.header-index .topBar .coordo h1{/*p*/
      font-size: 1.6rem;   
 }     
 
section .title{
      font-size: 3.6rem;
 }
section p{
      font-size: 1.6rem;
 }

/***à-propos****/
.à-propos{
      height: auto;
  }
/***services***/
.services{
      height: auto;
  }
/***tarifs***/
.tarifs{
      height: auto;
  }
/***BANNER**/
.banner{
      height: 30rem;
      padding-top: 7rem;
}

/**header-index***/

.header-index .navbar .list-links .link{
      font-size: 1.6rem;
  }
.header-index .navbar .list-links .link .sous-liste{
      width: 25rem;
      padding: .5rem ;
 }
.header-index .navbar .link .sous-liste .link-sous-liste{   
      font-size: 1.6rem;
      margin: 0 ;
      padding: .5rem;  
}
/*bouton scrolltop*/
 #scrollToTop { /*p*/
      font-size:1.6rem;
 }


 /**********HOME SLIDER***/
  .home-slide .slide-home .img-container1 .window-blur-index h1{
      font-size:9rem;
  }
  .home-slide .slide-home .img-container2 .window-blur-index h1{
      font-size:9rem;
  }
  .home-slide .slide-home .img-container3 .window-blur-index h1{
      font-size:9rem;
  }
  .home-slide .slide-home .img-container4 .window-blur-index h1{
      font-size:9rem;
  }
 .home-slide .slide-home .content .homespan{/*h1 du breakpoint inférieur*/
      font-size: 3.6rem;    
}
.home-slide .slide-home .content .homeh3 .boxline{
      width:10%;
     /* height: 2.5rem;*/      
}
.home-slide .slide-home .content .homeh3 .boxline span{
      width:100%;
      height: 1px; 
}
.home-slide .slide-home .content .homeh3{/*h3*/
      font-size: 2.6rem;
}
.home-slide .slide-home .content .homep{/*p breakpoints inférieur*/
      font-size: 1.6rem;
}
.homebtn{  /*p*/ 
      font-size: 1.6rem;   
}
.homebtn:hover{
      letter-spacing: .3rem;/*padding du p*/
}

/****banner***/ 

.banner .banner-img .content-banner span{/*h1 du breakpoint inférieur*/
      font-size: 3rem;
}
.banner .banner-img .content-banner .btn-accueil{/*p du braekpoint inférieur*/
      font-size: 1.4rem;
}
.banner .window-blur h1{
      font-size: 6rem;
}
/***swiper****/
.swiper-button-next,
.swiper-button-prev{/*h1*/
      height: 4rem;
      width: 4rem;
      line-height: 5rem;
      color: var(--black);
      background:var(--peru);
      opacity: .7;
      border-radius: .5rem;   
  }
.swiper-button-next::after,
.swiper-button-prev::after{/*p*/
      font-size: 1.8rem;         
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active{
      width: 1rem;
      height: 1rem;
}
span.swiper-pagination-bullet{
      width: 1rem;
      height: 1rem;
}

  /******** A PROPOS********/
.à-propos{
      height: auto;
}
.à-propos .contenu .title{
      font-size: 3.6rem; 
}
.à-propos .contenu p{
      font-size: 1.6rem;   
}
.à-propos .contenu p span{
      font-size: 1.6rem;
}
.à-propos .contenu .icons-container .icons img{
      height: 4rem;  
      width: 4rem;  
}
.à-propos .contenu .icons-container .icons h4{
      font-size: 2rem;
}
.contenu h3{
      font-size: 2.4rem;
}
.contenu .btn{  
      font-size: 1.6rem;    
}
.contenu .btn:hover{
      letter-spacing: .2rem;
      color:purple;
}

  /**************SERVICES*******/

.services .content-services .contenu .conclusion h4{/*h4 */
      font-size: 2rem;
}
.services .content-services .contenu .title p{
      font-size: 1.6rem;
   
}
.services .content-services .contenu .title h1{
      font-size: 3.6rem; 
}
.services .content-services .contenu .box h3{/*h3 du breakpoint inférieur*/
    font-size: 2rem;
}
.services .content-services .contenu p{
      font-size: 1.6rem;    
}
.services .content-services .box-container .box i{
      width: 3.5rem;
      height: 3.5rem;
}
.services .content-services .box-container .box h3{/*h3 du breakpts inférieur*/
      font-size: 2rem;
}
.services .content-services .box-container .box P{
      font-size: 1.6rem;
}

  /************CSS SECTION tarifs**********/

.tarifs .contenu .title{
      font-size: 3.6rem;   
}
.tarifs .contenu p{
      font-size: 1.6rem;
}
.tarifs .contenu p span{
      font-size: 1.6rem;
}
.tarifs .contenu .icons-container .icons h4{ /*h4 du breakpts inférieur*/   
      font-size: 1.6rem;  
}
.tarifs .contenu h4{
      font-size: 2rem;  
}
 .tarifs .contenu .btn4{
      font-size: 1.6rem;
 }
 .tarifs .contenu .btn4:hover{
      letter-spacing: .3rem;
      color:purple;
 } 

 /*******GALLERIE PORTFOLIO****/ 
  
.gallery .title {
      font-size: 3.6rem;
  }
.gallery .box-container .box-gallery .content-box h3{/*h3 du breakpoint inférieur*/
      font-size: 2rem;
  }
 .gallery .box-container .box-gallery .content-box p{/*p du breakpts inférieur*/
      font-size: 1.4rem;
  }

/**********section team*****/

.team .title {    
      font-size: 3.6rem;
}
.team .team-phrase{
      font-size: 1.6rem;
}
.team .team-slider .slide .image{
      height: 30rem;
} 
.team .team-slider .slide .image .medaille{
      height: 30rem;
}
.team .team-slider .slide .image .medaille .socials-icons i{/*p*/
      font-size: 1.6rem;    
}
.team .team-slider .slide .image span{
      font-size: 1.6rem;
} 
.team .team-slider .swiper-pagination{  
      top:37rem;
}


/***contact***/
.contact .row form .box .message{
      height: 20rem;
      /*resize: none;*/
}
.contact .row .content .title{/*h3 du breakpts inférieur*/    
      font-size: 2rem;
}
.contact .row .content .info h4{/*h4 du breakpts inférieur*/
      font-size:1.6rem ;

}
.top{
      font-size: 2.8rem;
      display: none;
}
/***********BLOGS*************/

.blog .heading h1{
      font-size: 3.6rem;
}
.blog .box-container .box .ecusson{    
      font-size: 1.6rem;
}
.blog .box-container .box img{
      height: 30rem;
}
.blog .box-container .box .content h4{
      font-size: 2rem;    
}
.blog .box-container .box .content p{
      font-size: 1.6rem;
}
.blog .box-container .box .content .infos i{
      font-size: 1.6rem;
}
.blog .box-container .box .content .infos p{
      font-size: 1.6rem;    
}
.blog .box-container .box .content .btn-more{   
      font-size: 1.6rem;    
}

/***footer***/
.footer .box-container{
      gap: 1.8rem;
  }
.footer .box-container .box1 h3{
      font-size:2.4rem;  
  }
.footer .box-container .box1 p{
      font-size: 1.6rem;
  }
.footer .box-container .box1 a{
      font-size: 1.6rem;
  }
.footer .credit{
      font-size:1.6rem ;
}
}


/******************************RESPONSIVE 991PX START******************************/

@media(max-width:991px)  {
section{
      padding: 3rem 2rem;
    }*/

html{
      font-size: 55%;
    }
.swiper-button-next,
.swiper-button-prev{
      display:none;
}    
.blogs .slide .content .icon {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
.team{
      flex-direction:row-reverse;
    }
}
@media(max-width:853px)  {

/*****BANNER********/
.banner{
      height: 25rem;
      padding-top: 7rem;
}
}

/***************************max-width 790px*******************/
@media(max-width:790px){
 /***header-index***/
.header-index .logo h1{
        font-size: 3rem;        
 }
.header-index .logo h1 span{
        font-size: 2rem;       
 }
.header-index .topBar .coordo i{     
        font-size: 1.2rem;   
 }
.header-index .topBar .coordo h1{      
        font-size: 1.4rem;   
 }

/***footer***/
.footer .box-container{
      gap:1.3rem;
  }
.footer .box-container .box1 p{
      font-size:1.6rem;
  }
}
/******************************max-width 768px************************/
@media(max-width:768px){
 
/*****BANNER********/
.banner{
      height: 25rem;
      padding-top: 7rem;
}
 .home-slide .slide-home .img-container1 .window-blur-index h1{
      font-size:8rem;
}
 .home-slide .slide-home .img-container2 .window-blur-index h1{
      font-size:8rem;
}
 .home-slide .slide-home .img-container3 .window-blur-index h1{
      font-size:8rem;
}
 .home-slide .slide-home .img-container4 .window-blur-index h1{
      font-size:8rem;
}
/***footer***/
.footer .box-container{
      gap:1rem;
  }
.footer .box-container .box1{
      padding: 1rem 0;
      flex: 1 1 18rem;
  }
.footer .box-container .box1 p{
      font-size:1.4rem;
  }
}
/******************************max width 699PX**********************/
@media(max-width:699px){
  html{
      scroll-padding-top:8rem;
  }
/***header-index****/
.header-index .topBar{
      display: none;
  }

  /*****BANNER********/

.banner{
      height: 19rem;
      padding-top: 7rem;
}
 .home-slide .slide-home .img-container1 .window-blur-index h1{
      font-size:7rem;
}
 .home-slide .slide-home .img-container2 .window-blur-index h1{
      font-size:7rem;
}
 .home-slide .slide-home .img-container3 .window-blur-index h1{
      font-size:7rem;
}
 .home-slide .slide-home .img-container4 .window-blur-index h1{
      font-size:7rem;
}
.home-slide .slide .content{
      width: 70rem;
      border:1px solid white;
}

/***footer***/
.footer{
      height: auto;
  }
.footer .box-container{
      gap:1rem;
  }
.footer .box-container .box1{
      padding: 1rem 0;
      flex: 1 1 15rem;
  }
}

/********************************MAX WIDTH 550P****************/
@media(max-width:550px){
 /*****BANNER********/
.banner{
      height: 17rem;
      padding-top: 7rem;
}
/******homeslide*****/
 .home-slide .slide-home .img-container1 .window-blur-index h1{
      font-size:6rem;
}
 .home-slide .slide-home .img-container2 .window-blur-index h1{
      font-size:6rem;
}
 .home-slide .slide-home .img-container3 .window-blur-index h1{
      font-size:6rem;
}
 .home-slide .slide-home .img-container4 .window-blur-index h1{
      font-size:6rem;
}
/***blog***/
.blog .box-container .surbox:nth-child(4),
.blog .box-container .box:nth-child(4){
      display: none;
}
/***FOOTER***/
.footer .box-container{
      display: flex;   
      flex-wrap: wrap; 
      gap: 1.5rem;
  }
.footer .box-container .box1{
      padding: 1rem 0;
      flex: 1 1 20rem;
  }
.footer .box-container .box1 h3{
      font-size: 2rem;
  }
.footer .box-container .box1 p{
      font-size: 1.4rem;
      padding: .9rem 0;
      color: #fff;
  }
.footer .box-container .box1 a{   
      font-size: 1.4rem;
      padding: .9rem 0;
      color: #c4bebe;;
  }
.footer .credit{
      text-align: center;
      padding: 2.5rem 1.5rem;
      margin-top:1.5rem ;
      font-size:1.4rem ;
      color: #fff;
      font-weight: bold;
}
}

/******************************RESPONSIVE SURFACE DUO******************************/

@media(max-width:540px)  {
 /*****BANNER********/
.banner{
        height: 19rem;
        padding-top: 7rem;
}
.banner .window-blur h1{
      font-size: 4rem;
      letter-spacing: 10px;
}
.header-index .topBar .logo h1{
      font-size: 3rem;        
 }
  .header-index .topBar .logo h1 span{
      font-size: 2rem;
 }
 

.tarifs .contenu .icons-container .icons img{
      width:4rem;
      height:4rem;
}
/***blog***/
 .blog .heading h1{
    font-size: 4rem;
}

}
/********************************MAX WIDTH 530PX********************/
@media(max-width:530px)  {

/***blog***/
.blog .box-container .surbox{
      flex: 1 1 35rem;
      background: #fff;
      padding: 8px;
      border: 1px solid white;
      border-radius: 5px;
}
.blog .box-container .box{
      flex: 1 1 35rem;
      border-radius: .5rem;
      overflow: hidden;
      /*box-shadow: 0 1rem 2rem rgba(0, 0, 0,.1);*/
      background-color: #fff;
      position: relative;
}
.blog .box-container .box img{
      height:30rem;
}
}


/********************************MAX-WIDTh 510PX*******************/
@media(max-width:510px){
.banner .window-blur h1{
      font-size: 4rem;
}
 .home-slide .slide-home .img-container1 .window-blur-index h1{
      font-size:6rem;
}
 .home-slide .slide-home .img-container2 .window-blur-index h1{
      font-size:6rem;
}
 .home-slide .slide-home .img-container3 .window-blur-index h1{
      font-size:6rem;
}
 .home-slide .slide-home .img-container4 .window-blur-index h1{
      font-size:6rem;
}
  /*à-propos***/
.à-propos .contenu .title{
      font-size: 3rem;
}
.à-propos .contenu p{
      font-size: 1.6rem;
}
.à-propos .contenu p span{
      color:rgb(141, 132, 11);
      font-weight: 700;
      font-family: "Dancing Script",sans-serif;
      font-size: 1.8rem;
}
/****SERVICES******/
.services .content-services .contenu h1{
      font-size:3rem;
  }
.services .content-services .contenu .conclusion{/*h4 du breakpoints inférieur*/
      margin-top:2rem;
      font-size: 2rem;
  }
.services .content-services .contenu .title p{
      font-size: 1.8rem;
  }
.services .content-services .contenu .title h1{
      font-size: 3rem;
  }
.services .content-services .contenu h3{
      font-size: 2.4rem;
}
.services .content-services .contenu p{
      font-size: 1.6rem; 
}
.services .content-services .box-container .box{
      flex: 1 1 23rem;
      border-radius: .5rem;
      padding: 1rem;
      text-align: center;
  }
.services .content-services .box-container .box i{
      font-size: 3rem;
      color: var(--peru);
    }
.services .content-services .box-container .box h3{/*h3 du breakpts inférieur*/
      font-size: 2.4rem;
  }
.services .content-services .box-container .box P{
      font-size: 1.6rem;
  }
  /****TARIFS***/

.tarifs .contenu .title{
      font-size: 3rem;
}
.tarifs .contenu p{
      font-size: 1.6rem;
}
.tarifs .contenu .icons-container p span{
      font-size: 1.8rem;
}
.tarifs .contenu .icons-container .icons {   
      flex: 1 1 16rem;
      background-color: var(--light-bg);
      text-align: center;
      padding: 2rem 3rem;
      position:relative
}
.tarifs .contenu .icons-container .icons img{
      position: absolute;
      top: 0;
      left:0;
}
.tarifs .contenu .icons-container .icons h4{/*h4 du breakpts inférieur*/ 
      color: var(--peru);
      font-size: 2rem;
}
.tarifs .contenu h3{
      font-size: 2rem;
      padding-top: 1rem;
      color:#667;      
      font-weight: 500;    
 }
.tarifs .contenu .btn4{
      font-size: 1.4rem;
 }
.tarifs .contenu .btn4:hover{
      letter-spacing: .2rem;
      color:purple;
 }
 /****BLOG***/
.blog .heading h1{
      color: var(--peru);
      font-size: 3rem;
}
.blog .box-container .surbox{
      flex: 1 1 20rem;
}
.blog .box-container .box{
      flex: 1 1 20rem;
}
.blog .box-container .surbox:nth-child(4),
.blog .box-container .box:nth-child(4){
      display: none;
}
.blog .box-container .box img{
      height: 25rem;
      width: 100%;
      object-fit: cover;
}
.blog .box-container .box .content h3{/*h4 du breakpts inférieur*/
      font-size: 2rem;
      color:#333 ;
}
.blog .box-container .box .content h3 i{
      color: var(--peru);
}
.blog .box-container .box .content p{
      font-size: 1.6rem;
      color: #667 ;
      padding: 1rem 0;
}
.blog .box-container .box .content .infos {
      width: 100%;
      padding:5px 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
}
.blog .box-container .box .content .infos i{/*p du breakpts inférieur*/
      font-size: 1.2rem;
      color: var(--peru);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
}
.blog .box-container .box .content .infos p{
      font-size: 1.4rem;
      font-family: "Poppins",sans-serif;
      font-weight: 600;   
}
.blog .box-container .box .content .btn-more{/*p du breakpts inférieur*/
      margin-top: 1rem;
      display: inline-block;
      background: var(--peru);
      color: var(--white);
      font-size: 1.6rem;
      cursor: pointer;
      padding: 1rem 3rem;      
}
.footer .box-container{
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
  }
}

/**********************************MAX WIDTH 450PX*****************/

@media(max-width:450px){
html{
      font-size: 50%;
      scroll-snap-type:none ;     
  }
/*.header-index .logo{
      transform: translateX(-55%);
  }*/
/*****BANNER********/
.banner{
      height: 18rem;
      padding-top: 7rem;
}
}


/***************I PHONE 14 PRO MAX 430px x 932px*********/
@media(max-width:430px){
html{
      scroll-padding-top: 4rem;
}
.banner .window-blur h1{
      font-size: 3rem;
}
 .home-slide .slide-home .img-container1 .window-blur-index h1{
      font-size:7rem;
      letter-spacing: 16px;
}
 .home-slide .slide-home .img-container2 .window-blur-index h1{
      font-size:7rem;
      letter-spacing: 16px;
}
 .home-slide .slide-home .img-container3 .window-blur-index h1{
      font-size:7rem;
      letter-spacing: 16px;
}
 .home-slide .slide-home .img-container4 .window-blur-index h1{
      font-size:7rem;
      letter-spacing: 16px;
}
.services{
      height:auto;
}
.tarifs .contenu .title{
      margin-top: 2rem;
}
  
}

/***********************************MAX-WIDTH 425PX************************/
  @media(max-width:425px){
    /*.header-index .logo{
      transform: translateX(-50%);
  }*/

}
/********************PIXEL 7****412px x 915px*******************/
/**************SAMSUNG GALAXY S 20 ULTRA****412px x 915px*******/
/********************I PHONE XR***414px x 896px*****************/
@media(max-width:414px){

.à-propos{
      padding-top: 6rem;
 }
 .home-slide .slide-home .img-container1 .window-blur-index h1{
      font-size:6rem;
      letter-spacing: 16px;
}
 .home-slide .slide-home .img-container2 .window-blur-index h1{
      font-size:6rem;
      letter-spacing: 16px;
}
 .home-slide .slide-home .img-container3 .window-blur-index h1{
      font-size:6rem;
      letter-spacing: 16px;
}
 .home-slide .slide-home .img-container4 .window-blur-index h1{
      font-size:6rem;
      letter-spacing: 16px;
}
}
@media(max-width:390px){
/*****BANNER********/
.banner{
        height: 16rem;
        padding-top: 7rem;
}
.header-index .topBar .logo h1{
      font-size: 2.4rem;   
  } 
.header-index .topBar .logo h1 span{
      font-size:1.4rem
 }
}
/*******************************MAX-WIDTH 375PX***************/
@media(max-width:375px){
 
.à-propos .contenu .title{
      font-size:2.4rem;
      padding-top: 2rem;
    }
.à-propos .image-about::after{
      content: "";
      width: 100%;
      height:100%;
      background-color: rgb(146, 144, 144);  
      position: absolute;
      top: 10px;
      right: -10px;
      z-index: -1;       
}    
.services .content-services .contenu .title h1{
      font-size:2.4rem;
 }
.tarifs .contenu .title{
      font-size:2.4rem;
      margin-top: 2rem;
 }
.tarifs .image-about::after{
      content: "";
      width: 100%;
      height:100%;
      background-color: rgb(216, 237, 216);     
      position: absolute;
      top: 10px;
      left: -10px;
      z-index: -1;
}
.blog .heading h1{
      font-size: 2.4rem;
}
}

/*******************************MAX-WIDTH 320PX***************/
@media(max-width:320px){
  html{
      scroll-padding-top: 6rem;
}
 .home-slide .slide-home .img-container1 .window-blur-index h1{
      font-size:6rem;
      letter-spacing: 8px;
}
 .home-slide .slide-home .img-container2 .window-blur-index h1{
      font-size:6rem;
      letter-spacing: 8px;
}
 .home-slide .slide-home .img-container3 .window-blur-index h1{
      font-size:6rem;
      letter-spacing: 8px;
}
 .home-slide .slide-home .img-container4 .window-blur-index h1{
      font-size:6rem;
      letter-spacing: 8px;
}
.à-propos{
      padding-top:4rem;
  }

.tarifs .image-about {
  margin-top: 4rem;
 }
.footer{
      height:100%;
 }
}