.titre_index h2{
  margin-left: 5px;
  font-family: verdana;
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px
}

.titre_index span{
  color: #ff3300;
}
/* la main de service */
.main{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}
.main_conteneur img{
  width: 90px;
  height: 90px;
  margin-top: 30px;
}
.main_conteneur{
  width: 250px;
  text-align: center;
}
.main_conteneur h2{
  font-size: 23px;
  margin-bottom:0;
  margin-top: 0;
  color: #ff471a;
  font-weight: bold
}
.sous_services p{
  margin-top: 0;
}

.avatar img:hover{
  opacity: .5;
}
/*la section de ma page*/
.section{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.aside{
  width: 300px;
  background-color: #fff;
  height: 100%;
}
.contains_image{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #fff;
  
}
/*c est le debut de la partie slide carrousel*/
.slide-container{
  flex: 1;
  flex-direction: row;
  position: relative;
  height: 450px;
  border: 3px solid #ede6d6;

}
.slide-container .slides{
  width: 100%;
  height: calc(100% - 40px);
  position: relative;
  overflow: hidden;
}
.slide-container .slides img{
  width:100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}
.slide-container .slides img:not(.active){
  top: 0;
  left: -100%;
}
span.next, span.prev{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 14px;
  color: #eee;
  font-size: 24px;
  font-weight: bold;
  transition: 0.5s;
  border-radius: 3px;
  user-select: none;
  cursor: pointer;
  z-index: 1;
}
span.next{
  right: 20px;
}
span.prev{
  left: 20px;
}
span.next:hover, span.prev:hover{
  background-color: #ede6d6;
  opacity: 0.8;
  color: #222;
} 
.dotsContainer{
  position: absolute;
  bottom: 5px;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
}
.dotsContainer .dot{
  width: 15px;
  height: 15px;
  margin: 0px 2px;
  border: 3px solid #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.6s ease;
}
.dotsContainer .active{
  background-color: #555;
}

@keyframes next1{
  from{
    left: 0%
  }
  to{
    left: -100%;
  }
}
@keyframes next2{
  from{
    left: 100%
  }
  to{
    left: 0%;
  }
}

@keyframes prev1{
  from{
    left: 0%
  }
  to{
    left: 100%;
  }
}
@keyframes prev2{
  from{
    left: -100%
  }
  to{
    left: 0%;
  }
}
/* la fin de la mise forme de slides */

/* mise en forme de categorie */
.img_categorie{
  width: 80px;
  height: 50px;
}
.detail li{
  font-size: 15px;
}
.detail li>span{
  color:  #e62e00;
  display: block;
}
.souscat h2{
  display: inline-block;
  font-family: verdana,'sans-serif';
  font-size: 18px;
  color: #000;
  margin-left: 5px;
}
.souscat a{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  background-color:  #e6e6e6;
  margin-bottom: 2px;
}
.souscat a:hover{
  opacity: .6;
}
.categorie{
  text-align: center;
}
.categorie h1{
  margin-left: 15px;
  font-size: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.souscat{
  margin-left: 15px;
}
.sous_categ{
  margin-left: 15px;
  background-color: #e6e6e6;
  padding-bottom: 15px;
  margin-top: 15px;
}
.notre_but{
  background-color: #e62e00;
  color: #fff;
  border-radius: 5px;
}
.sous_categ .contac{
  background-color:#ff471a;
  display: inline-block;
   border-radius: 5px;
}
.sous_categ .contac a{
  color: #fff;
  padding: 3px 10px;
  display: inline-block;
}
.sous_categ .contac a:hover{
  text-decoration: underline;
}
.notre_but h2{
  margin-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 20px;
}
.notre_but1{
  padding-left: 10px;
}
.notre_but1 p{
  margin: 2px;
  font-size: 16px; 
}
.sous_include{
  display: none;
}
/*banniere de ma page*/
#conteneur_banniere{
  position: relative;
}

.banniere_general img{
  width: 100%;
  height: 350px;
}
.banniere_mobile{
  display: none;
}
.text_banniere{
  position: absolute;
  width: 270px;
  text-align: center;
  top: 10px;
  left: 5px;
  font-size: 20px;
  font-family: verdana;
  color: #fff;
  font-weight: bold;
}
.myblink{
  color:blue;
}
.myblink:hover{
  color: #ff471a;
}
.text_link a{
  color: #ff471a;
}
/*mise en page article*/
.article{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 15px;
}
.sous_article{
 background-color: #fff;
 padding: 10px;
 margin-bottom: 10px;
 width: 300px;
  border-radius: 5px;
  margin-right: 2px;
}
.avatar img{
  width: 100%;
 height: 150px;
  border-radius: 5px;
}
.style_etat{
  background-color: yellow;
  color: #000;
  padding: 0px  5px;
  border-radius: 4px;
}
.detail h2{
 margin-top: 10px;
 margin-bottom: 2px;
 margin-left: 5px;
 font-size: 18px;
  color:#007BFF;
}
.detail h2 span{
  font-weight: normal;
}
.banniere_prix h3{
  color:red;
  margin-top: 0;
  margin-left: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}
/*C est la fin de mise en page*/
.article ul{
  padding: 0;
  margin: 0;
  margin-left: 5px;
}
.article li{
  display: flex;
  flex-direction: row;
  margin-bottom: 5px;
  font-size: 16px
}
.article li span{
  margin-right: 5px;
}
.lien_detail{
  background-color:#ff471a;
  display: inline-block;
  border-radius: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
}
.lien_detail a{
  padding: 4px 10px;
  display: block;
  color: #fff;
  font-family: verdana,sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.lien_detail a:hover{
  text-decoration: underline;
}
.lien_detail:hover{
  background-color: #e62e00;
}

/* la pagination */
.pagination{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 15px;
}
.sous_pagination li{
  list-style: none;
  display: inline-block;
}
.sous_pagination a{
  text-decoration: none;
  font-size: 16px;
  padding: 7px 10px;
  transition: .5s;
  color:#000;  
  border-radius: 5px;
}
.sous_pagination a:hover{
  background-color: #bfbfbf;
}
.page_active{
  font-size: 16px;
  color: #fff;
  background-color: #39ac39;
  padding: 7px 10px;
   border-radius: 5px;
}
/*pour le responsive de l ecran -900px  */
@media screen and (max-width: 900px){
   #bloc_page{
   width: 100%;
  }
   .slide-container{
      height: 400px;
    }
  .sous_article{
    width: 280px;
    margin-right: 10px;
    margin-left: 10px;
  }
  .aside{
    display: none;
  }
.banniere_prix h3{
  padding-top: 8px;
  font-size: 18px;
}
  .sous_include{
    display: block;
    margin-left: 10px;
  }
  
}
/*pour le responsive de l ecran -700px  */
@media screen and (max-width: 750px){
   .slide-container{
      height: 350px;
    }
    .slide-container .slides img{
      object-fit: initial;
    }
   span.next{
      right: 0;
    }
    span.prev{
      left: 0;
    }
  span.next{
   border-radius: 5px 0 0 5px; 
  } 
  span.prev{
    border-radius: 0px 5px 5px 0px; 
  }
  .titre_index h2{
  font-weight: normal;
}
  .main{
   flex-direction: column
  }
  .main_conteneur{
   width: 100%;
  }
   .slides_btn>img{
    height: 70px;
  }
  .sous_services p{
    width: 300px;
    display: inline-block;
  }
  .article{
    justify-content: space-around;
  }
   .sous_article{
    width: 260px;
  }
  .lien_detail a{
    padding: 5px 10px;
  }
  .aside{
    width: 200px;
  }
  .aside h1{
    font-size: 20px;
  }
 
.section_img img{
  width: 100%;
  height: 250px;
}
 
  .banniere_prix{
    width: 80%;
  }
}
@media screen and (max-width: 600px){
  .avatar img{
    height: 130px;
  }
  
  .banniere_general{
    display: none;
  }
  .banniere_mobile{
    display: block;
  }
  .banniere_mobile img{
    width: 100%;
  }
  .text_banniere{
  width: 220px;
  top: 5px;
  left: 5px;
  font-size: 18px;
}
  .aside{
    width: 200px;
  }
  .sous_article{
    width: 250px;
  }
  .banniere_prix{
    width: 90%;
  }
 
}

@media screen and (max-width: 560px){
  .slide-container{
      height: 300px;
    }
    
  .avatar img{
    height: 130px;
  }
  .titre_index{
    font-size: 14px;
  }
  .detail li>span{
  display: inline;
}
  .article{
    justify-content:space-around;
  }
  .article h2,h3{
    font-size: 17px;
  }
  .article h3{
    font-size: 15px;
}
  .aside{
    width: 200px;
  }
  .sous_article{
    width: 220px
  }
  .section_img img{
  width: 100%;
  height: 220px;
}
  .slides_btn>img{
    height: 50px;
  }
  .img_categorie{
  width: 80px;
  height: 40px;
}
.souscat h2{
  display: inline-block;
  font-family: verdana,'sans-serif';
  font-size: 18px;
  color: #000;
  margin: 0;
}
  .banniere_prix{
    width: 100%;
  }
  .banniere_prix h3{
    letter-spacing: 0px;
    font-size:17px;
  }
 
}
/*pour le mobile   */
@media screen and (max-width: 500px){
    .titre_index h2{
  font-size: 18px;
}
  .aside{
    display: none;
  }
  .sous_article{
    width: 100%;
  }
  .avatar img{
    height: 200px;
  }
}
/* pour les mobiles */
@media screen and (max-width: 450px){
  .slide-container{
      height: 250px;
    }
  .article{
    flex-direction: column;
  }
  .sous_article{
    padding: 0;
    margin-left: 5px;
  }
  .main_conteneur img{
    width: 80px;
    height: 80px;
  }
  .main_conteneur h2{
    font-size: 20px
  }
  .avatar img{
    margin: 5px;
    height: 170px;
    border-radius: 5px;
  }
  .avatar{
    flex: 1;
    margin-right: 15px;
  }
  .detail{
    width: 190px;
  }
  .detail h2{
    margin-left: 2px;
    margin-top: 0;
  }
  .lien_detail{
    
  }
  .lien_detail a{
    font-size: 15px;
    padding: 5px 20px;
    padding-left: 5px;
  }
  .sous_article{
    width: 97%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .sous_article h2,h3{
    font-size: 16px;
  }
  .sous_article li{
    font-size: 15px;
    margin-bottom: 0;
  }
  .sous_pagination a{
  font-size: 14px;
  padding: 5px 8px;
}
.page_active{
  font-size: 14px;
  padding: 5px 8px;
}
  
}
@media screen and (max-width: 330px){
  .titre_index{
    font-size: 12px;
  }
  .main_conteneur h2{
    font-size: 18px;
}
  .sous_services p{
    width: 100%;
  }
  .detail h2,h3{
    margin-left: 5px;
  }
  .detail h2{
    font-size: 20px;
  }
  .favatar img{
    height: 100%; 
  }
  .sous_article{
    flex-direction: column;
  }
  .detail{
    width: 100%;
  }
  .banniere_prix{
    width: 70%;
  }
  .banniere_prix h3{
    padding-left: 0;
  }
  .avatar{
    margin-right: 0;
  }
  .detail li>span{
  display: block;
  letter-spacing: 1px;
}
  
}