* {
  box-sizing: border-box; /* Applique à tous les éléments */
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;


}
body{
  position: relative;
  width: 100%;
  height:100%;
  color:white;
  background-color: #f1e9dc;
  padding: 0;
  margin: 0;
  font-size: 1.2vw;
  overflow-x: hidden;
}

.are_moveing{
  transition: transform 0.6s ease;
}

#mastead{
  position: relative;
  width: 100%;
  height:100svh;
  left:0;
  top:0;
}

#top_image{
  width: 35%;
  height:80vh;
  position: absolute;
  top:0;
  right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
#int_top_image{
  width: 100%;
  height:100%;
  background-image: url('/static/images/bout/a2.png');
  background-position: center;
  background-size: cover;
}
#ok{
  position: absolute;
  left:10%;
}
.image_top{
  width: 100%;
  height: auto;
}
#container_image{
  position: relative;
  width: 80%;
  height:75vh;
  margin-top: 18%;
  background-color: #a0aa86;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding-bottom: 1%;
  box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.298);

}

#logo{
  position:absolute;
  width: 15%;
  height:auto;
  z-index: 0;
  left:15%;
  top:11%;
  z-index: 0;
}
.item_titre{
  text-align: center;
}
#container_in_image{
  display: flex;
  gap:3.5%;
  align-items: center;
  justify-content: center;
  width: 100%;
  height:98%;
}
.item_image{
  width: 28%;
  height:88%;
  background-color: #e9e2d6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.582);
}
.in_contain{
  width: 80%;
  height:75%;
  margin-top: 5%;
  z-index: 1;
  position: relative;
  background-color: #e2d8c5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 8px 8px 30px rgba(255, 255, 255, 0.389);
}
.img_in_contain{
  z-index: 1;
  width: 100%;
  height:fit-content;
}

.bottom_text{
  margin-top: 2%;
}
.text{
  z-index: 1;
}


#section_titre{
  width: 80%;
  margin-left: 10%;
  margin-top: 5%;
  display: flex;
  padding-bottom: 5%;
}
#left_div{
  width: 60%;
  position: relative;
}
#right_div{
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#container_img{
  width: 100%;
  height:100%;
  background-image: url('/static/images/bout/a2.png');
  background-position: center;
  background-size: cover;
  transform: scale(1.3);
}
#plante{
  position: absolute;
  transform: rotate(180deg);
  left:67%;
}
.circle{
  width: 100px;
  height:100px;
  border-radius: 50%;
  background-color: #e1d3b8;
  position: absolute;
  z-index: 0;
}
#circle1{
  left:5%;
  top:10%;
}
#circle2{
  top:60%;
  left:35%;
  width: 150px;
  height:150px;
}
#circle3{
  top:80%;
  left:10%;
}
.text_index{
  z-index: 2;
  position: relative;
}

#circle4{
  width: 100px;
  height:100px;
  left:50%;
  top:25%;
  background-color: #d9e0c9;
}
#circle5{
  width: 250px;
  height:250px;
  left:80%;
  top:100%;
  background-color: #b8bfa7;
}
#circle6{
  width: 600px;
  height:600px;
  left:0%;
  top:25%;
  background-color: #e0e6cf;
}



.btn_conseil{
  margin-top: 2%;
  box-shadow: 8px 8px 50px #595959;

}

#text2{
  margin-top: 10%;
}

.grid {
  width: 80%;
  display: flex;
  justify-content: center;
  gap:8%;
  margin-left: 5%;
  margin-top: 5%;
}
.are_left{
  justify-content: start;
  padding-left: 3.5%;
}

.item {
  width: 25%;
  height:55svh;
  background-color: #bac59f;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.681);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 4;
  position: relative;
}
.container_picture_item{
  z-index: 0;
  background-color: #dee3d1;
  width: 85%;
  height:74%;
  margin-top: 2%;
  box-shadow: 8px 8px 30px rgba(95, 95, 95, 0.536);

}


.back{
  position: absolute;
  z-index: 1;
}
#plante_prod{
  transform: rotate(60deg);
  left:70%;
  width: 50%;
  height:auto;
  margin-top: -5%;
}
#plante_prod1{
  transform: rotate(60deg);
  left:-10%;
  width: 50%;
  margin-top:-10%;
  height:auto;
}
#plante_prod2{
  transform: rotate(90deg);
  left:0%;
  width: 50%;
  margin-top:16%;
  height:auto;
}
#plante_prod3{
  transform: rotate(-105deg);
  left:60%;
  width: 50%;
  margin-top:5%;
  height:auto;
}

#plante_prod4{
  transform: rotate(90deg);
  left:0%;
  width: 50%;
  margin-top:50%;
  height:auto;
}


#circle7{
  width: 150px;
  height:150px;
  left:85%;
  z-index: 0;
  background-color: #a0aa86;
}
#circle8{
  width: 300px;
  height:300px;
  left:70%;
  margin-top: 10%;
  z-index: 0;
  background-color: #a0aa86;
}
#circle9{
  width: 200px;
  height:200px;
  left:87%;
  margin-top: 25%;
  z-index: 0;
  background-color: #e3e8d7;
}

#circle10{
  width: 250px;
  height:250px;
  left:5%;
  margin-top: 30%;
  z-index: 0;
}

#circle11{
  width: 100px;
  height:100px;
  left:0%;
  margin-top: 45%;
  z-index: 0;
  background-color: #d0d5c4;
}
#circle12{
  width: 300px;
  height:300px;
  left:6%;
  margin-top: 56%;
  z-index: -1;
  background-color: #eef3e0;
}

#circle13{
  width: 200px;
  height:200px;
  left:70%;
  margin-top: 70%;
  z-index: -1;
  background-color: #cad0bb;
}
#circle14{
  width: 300px;
  height:300px;
  left:80%;
  margin-top: 80%;
  z-index: -1;
  background-color: #c0d293;
}

.container_titre_top{
  height: fit-content; 
  overflow: hidden;
  position: relative;
}
.first_div{
  position: relative;
  transition: transform 0.3s ease;
}
.under_div{
  position: absolute;
  transition: transform 0.5s ease;
  transform: translateY(50%);
  width: 100%;
  text-align: center;
}

#footer{
  width: 100%;
  height:50svh;
  display: flex;
  margin-top: 20svh;
  position: relative;
  overflow: hidden;
}


#resp{
  display: none;
  color:black;
  font-size: 5vw;
}


#footer{
  width: 100%;
  display: flex;
  background-color:#bac59f;
  padding-top:3%;
}
#right_footer{
  width: 40%;
  height: 100%;
  text-align: center;
  margin-left: 10%;
  z-index: 1;
  position: relative;
}
#left_footer{
  width: 40%;
  height: 100%;
  text-align: center;
  margin-right: 10%;
  z-index: 1;
  position: relative;
}
.border_bot{
  border-bottom: 1px solid rgba(0, 0, 0, 0.233);
  width: fit-content;
  margin: auto;
}
.second_line_left{
  margin-top: 6%;
}
#news{
  width: 70%;
  text-align: center;
  margin: auto;
}
#new_input{
  width: 80%;
  display: flex;
  margin: auto;
  margin-top: 2%;
}
input{
  outline: none;
  height:5%;
  margin: auto;
  width: 80%;
}
.margin_under{
  margin-top: 1%;
}
#admin{
  margin-top: 5%;
}
#plante_footer{
  position: absolute;
  z-index: 0;
  width: 25%;
}
#plante_footer2{
  position: absolute;
  z-index: 0;
  width: 25%;
  top:0;
  right: 0;
  transform: rotate(-180deg);
}
#plante_footer3{
  position: absolute;
  z-index: 0;
  width: 30%;
  top:0;
  left: 40%;
  z-index: 0;
}






@media (max-width: 1280px) {
  #container_image{
    height: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
  }
  .item{
    height: fit-content;
  }
  #container_img{
    background-image: url('/static/images/bout/a3.png')!important;
    transform: scale(1);
    background-size: contain;
    background-repeat: no-repeat;
    height:100%;
  }
  #footer{
    height: fit-content;
    padding-bottom: 2%;
  }
}




@media (max-width: 800px) {
  #nav{
    flex-wrap: wrap;
    background-color:#bac59f;
    height:12svh!important;
  }
  #brand{
    width: 100%;
    position: relative!important;
    left:0!important;
    text-align: center;
  }
}

@media (max-width: 500px) {
  #container_img{
    background-image: url('/static/images/bout/a2.png')!important;
    transform: scale(1);
    background-size: cover;
    background-repeat: no-repeat;
    height:100%;
  }
  .resp_img{
    display: none;
  }
  #container_image{
    height: fit-content;
    background-color: transparent;
    width: 95%;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.298);
  }
  .item_image{
    width: 100%;
    height: fit-content;
  }

  .container_picture_item{
    overflow: hidden;
  }
  .item_image{
    width: 80%;
  }
  .img_in_contain{
    width: 100%;
    margin-top: 0%;
  }
  .resp_img_contain{
    margin-top: -10%;
  }
  #section_titre{
    margin-top: 10%;
    margin-left: 5%;
  }
  #right_div{
    height:60svh;
  }
  .grid{
    width: 95%;
    margin-left: 2.5%;
    gap:3%;
  }
  .item{
    width: 100%;
    text-align: center;
  }
  .resp{
    display: none;
  }
  #section_titre{
    width: 100%;
  }
  .are_left{
    padding-left: 0;
  }
  #cotainer_product{
    position: relative;
    z-index: 2;
  }
  #footer{
    flex-direction: column;
  }
  #right_footer{
    width: 100%;
    margin-left: 0;
  }
  #left_footer{
    width: 100%;
    margin-left: 0;
  }
  #plante_footer, #plante_footer2,
  #plante_footer3{
    display: none;
  }
  #news{
    margin-top: 5%;
  }
  .border_bot{
    color:white!important;
  }
}