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

html {
  scroll-behavior: smooth;
}

body{
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  height:100%;
  color: black;
  font-size: clamp(12px, 1.1vw, 30px);
  background-color: rgb(243, 241, 237);
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}





#navebarre{
  height:130px;
  width: 100%;
  background-color: rgb(236, 234, 230);
  position: fixed;
  z-index: 5;
}
#nav_top{
  height:35%;
  width: 100%;
  background-color: rgb(174, 204, 224);
  display: flex;
  justify-content: center;
  align-items: center;
}
#nav_bottom{
  width: 100%;
  height:65%;
  display: flex;
  padding-top: 0.2%;
}
.nav_section{
  position: relative;
  width: 30%;
  height: 100%;
}
#logo{
  display: flex;
  align-items: center;
  padding-left: 2%;
}
#center{
  display: flex;
  gap:3%;
  width: 40%;
  justify-content: center;
  align-items: center;
}
.container_el{
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 100%;
}
.in_nav{
  position: absolute;
  transform: translate(-50%, -50%);
  top:50%;
  left:50%;
  background-color: rgba(255, 255, 255, 0.575);
  border-radius: 35%;
  width: 0%;
  height:0%;
  margin-top: 3%;
}


.in_nav.active{
  width: 45%;
  height:42%;
}
.el_nav{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  text-align: center;
}

.scalling{
  animation: scalling 1s linear infinite;
}
@keyframes scalling {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
#devis{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(174, 204, 224);
  width: 50%;
  text-align: center;
  height:47%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  gap:3%;
  cursor: pointer;
}
.icone_devis{
  width: 25px;
  transition: transform 0.3s ease; /* Animation fluide */
  position: relative;
  transform: rotate(-90deg);
}
.shinny{
    box-shadow: 0 0 10px rgb(252, 253, 253),
              0 0 20px rgba(210, 231, 231, 0.479),
              0 0 40px rgba(252, 255, 255, 0.534);
}





#mast{
  width: 100%;
  padding-top: 130px;
  overflow: hidden;
  position: relative;
}
#stars1{
  position: absolute;
  width: 40px;
  height: 40px;
  left:0;
  top:0;
}
#mast_img{
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}
#mast_titre{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.678);
  width: 55%;
  height:15%;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:2%;
}
#vous{
  padding-top: 1%;
}
#devis_mast{
  width: 15%;
  height:6%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(174, 204, 224);
  border-radius: 20px;
  z-index: 2;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  gap:3%;
  cursor: pointer;
}
#arrow{
  transform: rotate(-90deg);
  transition: transform 0.5s ease;
}
#devis_mast:hover #arrow{
  transform: translateX(4px) rotate(-90deg);
}













#under_mast{
  position: relative;
  width: 100%;
  text-align: center;
  padding-top: 2%;
  padding-bottom: 5%;
}
#intro{
  width: 50%;
  margin-left: 25%;
  margin-top: 1%;
}
#container_icone{
  width: 80%;
  display: flex;
  margin-left: 10%;
  align-items: center;
  justify-content: center;
  gap:5%;
  margin-top: 2%;
}
#canape{
  width: 12%;
}
.mob{
  width: 10%;
}
.height_mob{
  height:120px;

}
#tapis{
  width: 8%;
}
.mob_cursor{
  cursor: pointer;
}
#container_titre1{
  position: relative;
  width: fit-content;
  margin: auto;
}
.container_stars{
  width: 45%;
  position: absolute;
  height:6vh;
  top:-2vh;
  overflow: hidden;

}
.stars_pro{
  width: 20px;
  transform: translateY(200%);
}


#ban1{
  width: 100%;
  height:50px;
  background-color: rgb(174, 204, 224);
  display: flex;
  justify-content: center;
  align-items: center;
}
.section{
  width: 100%;
  height:850px;
}
#section1{
  width: 100%;
  display: flex;
  margin-top: 5%;
}
.in_section_cut{
  width: 50%;
  height: 100%;
  padding-top: 5%;
}
.line_descrp{
  display: flex;
  gap:1%;
}



.left_section{
  padding-left: 6%;
}
.right_section{
  padding-right: 6%;
}
.image_section{
  width: 90%;
  height:95%;
  margin-left: 5%;
  border-radius: 30px;
  object-fit: cover;
}
.padd_section{
  padding-left: 2%;
}


.svg_section{
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.svg_section_reverse{
  transform:scale(-1);
  margin-top: -5px;
}


#section3{
  background-color: rgb(224, 215, 174);
  display: flex;
}
#section4{
  display: flex;
  padding-bottom: 5%;
}

#svg_section4{
  background-color: white;
}


.titre_object{
  height: 10%;
  width: 100%;
}
.resum_object{
  width: 100%;
  height: 15%;
}
.caract{
  width: 100%;
  height: 25%;
}
.line{
  width: 100%;
  display: flex;
  height: 50%;
}
.square{
  width: 50%;
  height:100%;
  display: flex;
  gap:5%;
}
.arrow_blue{
  height: 50%;
  transform: rotate(-135deg);
}

.tempo{
  width: 100%;
  height: 14%;
}
.process{
  height: 25%;
}
.price{
  height: 10%;
}
.descrp{

}
.devis_btn_container{
  position: relative;
}
.devis_btn{
  background-color: rgb(174, 204, 224);
  width: 30%;
  text-align: center;
  height:35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 2%;
  z-index: 2;
  position: relative;
  gap:2%;
}

.devis_btn:hover .icone_devis{
  transform: translateX(4px) rotate(-90deg);
}

#last_section{
  background-color: white;
  padding: 5%;
  height:fit-content!important;
  padding-bottom: 20%;
}
#container_stars_confiance{
  right: 0;
  position: absolute;
  width: 35%;
}
.grid-container {
  margin-top: 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 2 colonnes égales */
  gap: 10px; /* espace entre les items */
  height:380px;
}

.item {
  text-align: center;
  font-weight: bold;
  position: relative;
}
.testi{
  background-color: rgb(243, 241, 237);;
  border-radius: 15px;
  text-align: left;
  padding: 3%;
}
.text_testi{
  margin-top: 2%;
}
.testi_litt{
  width: 70%;

}
.testi_med{
  width: 80%;
  height:68%;
}
.testi_med1{
  width: 85%;

}
#testi2{
  position: absolute;
  bottom: 20%;
}
#testi3{
  position: absolute;
  width: 100%;
  left:-5%;
}
#testi4{
  position: absolute;
  top:-5%;
  right: 5%;
}
#testi5{
  position: absolute;
  left: 10%;
  width: 100%;
  top:5%;
}
#testi6{
  position: absolute;
  right:5%;
}
.guillemet{
  width: 30px;
  position: absolute;
  left:-2%;
  top:-5%;
  opacity: 0.5;
}
.name{
  margin-left: 10%;
}

#footer{
  height:auto;
  position: relative;
}
#footer_main{
  height:90%;
  width: 100%;
  display: flex;
  justify-content: center;
  gap:5%;
  padding-top: 5%;
}
.footer_square{
  width: 20%;
  padding-top: 2%;
  position: relative;
  padding-bottom: 5%;
}
#footer_bootom{
  height:10%;
  width: 100%;
  background-color: rgb(174, 204, 224);
  display: flex;
  justify-content: center;
  align-items: center;
}

#creer{
  cursor: pointer;
}
.titre_footer{
  width: 100%;
  margin-top: 5%;
}
.in_footer_square{
  width: 100%;
}
.first_el{
  margin-top: 2%;
}
.el_footer{
  cursor: pointer;
}
.in_footer_icone{
  position: absolute;
  width: 35px;
  top:-2%;
}
#nav_icone{
  width: 30px;
}
#circle_footer{
  position: absolute;
  top:-10%;
  left:50%;
  transform: translateX(-50%);
  background-color: rgb(243, 241, 237);
  width: 10%;
  border-radius: 50%;
  height:40%;
  display: flex;
  justify-content: center;
  padding-top: 1%;
}

#service_footer{
  padding-left: 4%;
}
#container_stars_footer{
  width: fit-content;
  padding: 2%;
  margin-top: 2%;
}






.is_bold{
  font-weight: bold;
}





.is_white{
  color:white;
}

.is_titre1{
    font-size: clamp(20px, 3vw, 3vw);
}
.is_titre2{
    font-size: clamp(20px, 2.2vw, 2.2vw);
}
.is_titre3{
  font-size: clamp(15px, 1.4vw, 1.4vw);
}
.is_titre4{
    font-size: clamp(13px, 1.2vw, 1.2vw);
}
.is_text{
    font-size: clamp(13px, 1vw, 1vw);
}



.lobster-regular {
  font-family: "Lobster", sans-serif;
  font-weight: 400;
  font-style: normal;
}




.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.resp{
  display: none;
}



@media (max-width: 1500px) {
  .height_mob{
    height:100px;
  }
}

@media (max-width: 1366px) {

  .icone_devis{
    width: 20px;
  }
  .section{
    height:650px;
  }
  #navebarre{
    height:100px;
  }
  #mast{
    padding-top: 100px;
  }
}

@media (max-width: 1176px) {
  #devis_mast{
      width: 18%;
  }
  .height_mob{
    height:90px;
  }
  #devis{
    width: 55%;
  }
}


@media (max-height: 900px) {
  .devis_btn{
    width: 35%;
  }


}
@media (max-height: 800px) {
  .devis_btn{
    width: 40%;
  }
}


@media (max-width: 960px) {
  #center{
    width: 50%;
  }
  .is_text{
    font-size: clamp(10px, 1vw, 1vw);
  }
  body{
      font-size: clamp(11px, 1.1vw, 1.1vw);
  }
  #devis{
    width: 65%;
  }
  .is_titre4{
      font-size: clamp(12px, 1.2vw, 1.2vw);
  }
  .height_mob{
    height:70px;
  }
  .testi{
    height: fit-content;
    padding-bottom: 5%;
  }
}

@media (max-width: 800px) {
  .devis_btn{
    width: 45%;
    height:25px;
  }
  .is_titre1{
    font-size: clamp(20px, 3vw, 3vw);
  }
  .is_titre2{
      font-size: clamp(20px, 2.2vw, 2.2vw);
  }
  .is_titre3{
    font-size: clamp(12px, 1.4vw, 1.4vw);
  }
  .is_titre4{
      font-size: clamp(10px, 1.2vw, 1.2vw);
  }
  .is_text{
      font-size: clamp(10px, 1vw, 1vw);
  }
  body{
      font-size: clamp(10px, 1.1vw, 1.1vw);
  }
  .section{
      height:600px;
  }
  #navebarre{
    height:80px;
  }
  #mast{
    padding-top: 80px;
    height:400px;
  }
  .height_mob{
    height:60px;
  }
  #stars1{
    width: 30px;
    height:30px;
  }
  .stars_pro{
    width: 15px;
  }
  .guillemet{
    width: 20px; 
  }
  .in_section_cut{
    padding-bottom: 5%;
  }
  .icone_devis{
    width: 15px;
  }
  .in_footer_icone{
    width: 30px;
  }
  .titre_footer{
    margin-top: 10%;
  }
  .grid-container{
    height: 100%;
  }
}



@media (max-width: 750px) {
  .el_nav, #devis{
    display: none;
  }
  #mast_titre{
    width: 70%;
  }
  #devis_mast{
    width: 25%;
    height:8%;
  }
  #intro{
    width: 70%;
    margin-left: 15%;
  }
  .height_mob{
    height:50px;
  }
  .is_titre1{
    font-size: clamp(20px, 3vw, 3vw);
  }
  .is_titre2{
      font-size: clamp(20px, 2.2vw, 2.2vw);
  }
  .is_titre3{
    font-size: clamp(12px, 1.4vw, 1.4vw);
  }
  .is_titre4{
      font-size: clamp(10px, 1.2vw, 1.2vw);
  }
  .is_text{
      font-size: clamp(11px, 1vw, 1vw);
  }
  body{
      font-size: clamp(12px, 1.1vw, 1.1vw);
  }
  #ban1{
    padding: 5%;
  }
  .devis_btn{
    width: 55%;
  }
  .section{    
    height: auto;
  }
  #section1, #section4{
    flex-direction: column-reverse;
  }
  #section3{
    flex-direction: column;
  }
  .right_section{
    padding-left: 5%;
    padding-right: 5%;
  }
  .arrow_blue{
    width: 25px;
  }
  .in_section_cut{
    width: 100%;
    padding-right: 5%;
  }
  .image_section{
    width: 95%;
  }
  .descrp{
    margin-top: 2%;
  }
  .devis_btn{
    width: 30%;
  }
  .resp{
    display: block;
  }
  .no_resp{
    display: none;
  }
  .container_el{
    display: none;
  }
  .in_section_cut{
    padding-top: 0;
  }
  .image_section{
    height:250px;
    margin-top: 3%;
  }
  .grid-container{
    grid-template-columns: repeat(1, 1fr);

  }
  .testi{
    height:fit-content!important;
    position: relative!important;
    left:0!important;
    top:0!important;
  }
  #circle_footer{
    width: 15%;
  }
}

@media (max-width: 600px) {
  .height_mob{
    height:40px;
  }
}
@media (max-width: 650px) {
  #footer_main{
    flex-direction: column;
  }
  .footer_square{
    margin-top: 2%;
    text-align: center;
    width: 100%;
  }
    .in_footer_icone{
    top:0!important;
    position: relative!important;
    margin: auto!important;
  }
  .titre_footer{
    margin-top: 0;
  }
  #service_footer{
    padding-left: 0;
    padding-bottom: 5%;
  }
  #circle_footer{
    width: 150px;
    padding-top: 5%;
  }
}

@media (max-width: 460px) {
  .height_mob{
    height:35px;
  }
  #intro{
    width: 80%;
    margin-left: 10%;
  }
}

@media (max-width: 510px) {
  .devis_btn{
    width: 90%;
  }
  .devis_btn_container{
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
  }
  #mast_titre{
    flex-direction: column;
    width: 90%;
    flex-wrap: wrap;
    text-align: center;
  }
  #devis_mast{
    width: 60%;
  }
  #nav_top{
    text-align: center;
    padding: 5%;
  }
}

@media (max-width: 400px) {
  #ban1{
    height:70px;
  }
  #canape{
    width: 18%;
  }
  .height_mob{
    height:40px;
  }
  .mob{
    width: 13%;
  }
}