@font-face {
    font-family: 'Frunchysage';
    src: url('../assets/font/Frunchy_Sage/Frunchy_Sage/Frunchy.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lora';
    src: url('../assets/font/Lora/Lora/Lora-VariableFont_wght.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    --title-font : 'Frunchysage',  sans-serif;
    --body-font : 'Lora', sans-serif;

    --green-color: #6C8350;
    --beige-color: #E0E0D5;

    -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

*::-webkit-scrollbar {
  display: none;
}



body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;

    box-sizing: border-box;
}









/*SECTION HEADER ORDI*/
.header_bigo {
    display: none;
}
.header_ordi {
    display: flex;
    position: relative;
    top: 10;
    width: 100%;
    height: 12vh;

    font-family: var(--body-font);
}

.header_logo {
    width: 30vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #E0E0D5;
}

.header_logo img{
    width: 120px;
    display: flex;
    
}
.header_logo img  > img  {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.header_nav nav {
    position: relative;
  width: 70vw;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color:  #6C8350;
 
  

 
}
.header_nav ul {
    position: relative;
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: space-around;
    
    gap: 150px;
   
    padding: 0;
    margin: 2rem 0;

    

}

.header_nav a,
.header_nav li  {
    text-decoration: none;
    color: #E0E0D5;

    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 1px;
   

}

.header_nav a:hover {
    border-bottom: 5px solid #6C8350; /* ou la couleur de ton choix */
    transition: border-bottom 1.2s;
}


@media screen and (max-width:1250px){
    br {
        display: none;
    }
    .header_nav ul {  
    gap: 75px;
}

.header_nav a,
.header_nav li  {
    font-size: 1.2rem;
}

}
/*NAV BIGO*/

@media screen and (max-width:895px) {


     section {
        padding-top: 12vh;
        width: 100%;
        box-sizing: border-box;
     }
    .header_ordi {
        display: none;
    }
.header_bigo {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 80px;
        z-index: 4000;
        background: #fff;
        box-sizing: border-box;

    }

    .header_logo_bigo {
        display: flex;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: 0rem;
        margin-bottom: 0rem;
        
    }
    .header_logo_bigo img{
        
        width: 90px;
        height: 90px;

    }
    .drawer-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        cursor: pointer;
        z-index: 3100;
        position: relative;
        top: 0rem;
        left: 1rem;
        background: rgba(255,255,255,0.85);
        border-radius: 50%;
        box-shadow: 0 2px 12px rgba(108,131,80,0.10);
        transition: background 0.2s;
    }
    .drawer-hamburger span {
        display: block;
        width: 28px;
        height: 4px;
        margin: 4px 0;
        background: #6C8350;
        border-radius: 2px;
        transition: all 0.3s;
    }
  .drawer-leaf {
  
  
    opacity: 0;
    transform: scale(0.7) rotate(-20deg);
    transition: opacity 0.4s, transform 0.4s;
    position: absolute;
    left: 1rem;
    width: 58px;   /* même taille que le hamburger */
    height: 50px;
    z-index: 3200;
    cursor: pointer;
    object-fit: fill;

    background: rgba(255,255,255,0.85);
        border-radius: 50%;
        box-shadow: 0 2px 12px rgba(108,131,80,0.10);
}
.drawer-leaf.visible {
    display: block;
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.drawer-leaf img,
.drawer-leaf svg {
    width: 100%;
    height: 100%;
    object-fit: contain; /* ou cover selon le rendu souhaité */
    display: block;
}



    .drawer-menu {
        display: none;
       flex-direction: row;
       
        top: 100%;
        left: 0;
        width: 100%;
       
        height: 80px;
       
        position: absolute;
        background-color: #6c8350;
        
        z-index: 3000;
        animation: drawerIn 0.4s cubic-bezier(.77,0,.18,1);
    }

     .drawer-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        z-index: 5;
    }
    .drawer-menu li {
        flex: 1 1 0;
        margin: 0;
        padding: 5px 15px;
        text-align: center;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
       
    }
    .drawer-menu li a {
        width: 100%;
        display: block;
        color: #FFF;
        font-size: 1rem;
        
        font-weight: 700;
        text-decoration: none;
        padding: 5px 0;
        box-sizing: border-box;
        border-bottom: 4px solid #A8C66C; /* vert vif et épais */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(168,198,108,0.25);
    background: linear-gradient(90deg, rgba(168,198,108,0.15) 0%, rgba(108,131,80,0.10) 100%);
    letter-spacing: 1px;

    }
}

    




    @keyframes drawerIn {
        from { transform: translateX(-100%);}
        to { transform: translateX(0);}
    }
   

/*ACCUEIL*/

.accueil {
  position: relative;
    height:100vh;
  
}

.img-accueil {
    position: relative;
    width: 100%;
    height: 100%;

    margin-bottom: 3rem;
   
}
.img-accueil > img  {
    width: 100%;
    height: 100%;

     object-fit: cover;

    margin-bottom: 3rem;

}



.slogan {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
}

.slogan p {

    color: white;
    font-family: var(--body-font);
    font-size: 2.5rem;
    font-weight: 900; 

    padding: 5rem 15px;
    border-radius: 15px;
    border: transparent solid 0px;
    background-color: rgba(224, 224, 213, 0.44);
     text-shadow: 1px 1px 1px black; 
     text-align: center;
    
}

@media  screen and (max-width:1250px) {
    .slogan p{
        font-size: 2rem;
    }
}


@media  screen and (max-width:525px) {
    .accueil {
        position: relative;
        display: flex;
        justify-content: center;
        justify-content: center;
        height: 100vh;
        margin-top: 1rem;
    }
    .img-accueil {
        width: 100%;
       
        height: 80vh;
        z-index: 0;
        position: relative;
    }
    .img-accueil > img  {
    width: 100%;
    height: 100%;

     object-fit: cover;

    margin-bottom: 3rem;

}

    
   .slogan {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        max-width: 95vw;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 4;
    }
    .slogan p {
        font-size: 1.3rem;
        text-align: center;
        padding: 2rem 10px;
        word-break: break-word;
    }
}

.header_logo_section {

    width: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.header_logo_section img{
    width: 120px;
    display: flex;
    
}
.header_logo img  > img  {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:1300px) {
    .header_logo_section {
        width:12vw;
    }
    .header_logo_section img{
    width: 100px;
   
}
}



@media  screen and (max-width:525px) {
    .header_logo_section {

    width: 10vw;
    display: flex;
    justify-content: start;
    align-items: start;
   
}

.header_logo_section img{
    width: 80px;
   
}


}

/*SECTION SERVICES*/


.services_1, 
.services_2,
.services_3 {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
    height: 100vh;
}
.services_1-corpus, 
.services_2-corpus,
.services_3-corpus {
    position: relative;
  display: flex;
  justify-content: space-between;
}

.services h1 {
        margin-left: 4rem;
        font-size: 3.2rem;
        font-weight: 900;
        font-family: var(--title-font);
        color: #5c7b35;
        letter-spacing: 4px;
}




.services_1-text,
.services_2-text,
.services_3-text {
    margin-top: 5rem;
    margin-left: 2.5rem;
    width: 40vw;
    height: fit-content;
    font-size: 1.3rem;
    text-align: start;

    padding: 15px 15px;
    border: solid black 7px;
    border-radius: 10px;
   
}
.services_1-text p,
.services_2-text p,
.services_3-text p {
    margin-bottom: 40px;
}

.devis_button {
    position: absolute;
    bottom: 0;
    right: 3rem;
   
    padding: 15px 50px;
    border-radius: 14px;
    border: solid 0px #6C8350;
   
   background: linear-gradient(90deg, #6C8350 50%,  var(--beige-color) 50%); /* Couleur initiale */
    background-size: 200% 100%; /* Double la largeur pour permettre l'animation */
    background-position: 0% 0%; /* Position initiale */
    transition: background-position 0.4s ease-in-out;
}

.devis_button a {
     
    width: 100%;
    text-decoration: none;
    color: black;
    font-weight: 900;
    font-size: 20px;
}

.services_1-img,
.services_2-img,
.services_3-img {
    margin-right: 5rem;
}

/*SERVICES1*/

.services_1-img {
    position: absolute;
    right: 0%;
    display: flex;
    width: 595px;
    height: 490px;

}

.services_1-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*SERVICES2*/

.services_2-img {
        position: absolute;
        right: 0%;

        display: flex;
        width: 620px;
        height: 471px;

}

.services_2-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}
/*SERVICES3*/

.services_3-img {
        position: absolute;
        right: 0%;
        top: 12%;

        display: flex;
        width: 620px;
        height: 471px;
      

}

.services_3-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}

@media screen and (max-width:1300px){

.services_1, 
.services_2,
.services_3 {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
    height: 80vh;
}


.services_1-img,
.services_2-img,
.services_3-img {
    margin-right: 1rem;
}

/*SERVICES1*/

.services_1-img {
    position: absolute;
    right: 2%;
    top: 22%;
    display: flex;
    width: 370px;
    height: 300px;

}

.services_1-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*SERVICES2*/

.services_2-img {
        position: absolute;
        right: 0%;

        display: flex;
        width: 500px;
        height: auto;

}

.services_2-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}
/*SERVICES3*/

.services_3-img {
        position: absolute;
        right: 0%;
        top: 12%;

        display: flex;
        width: 500px;
        height: auto;
      

}

.services_3-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}
}
@media screen and (max-width:1050px){
 .services_1-text,
.services_2-text,
.services_3-text {
    width: 30vw;
    font-size: 1rem;
 
   
}
.services_1-text p,
.services_2-text p,
.services_3-text p {
    margin-bottom: 20px;
}

/*SERVICES1*/

.services_1-img {
    position: absolute;
    right: 2%;
    top: 25%;
    display: flex;
    width: 350px;
    height: 300px;

}

.services_1-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*SERVICES2*/

.services_2-img {
        position: absolute;
        right: 0%;
        top: 25%;

        display: flex;
        width: 400px;
        height: auto;

}

.services_2-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}
/*SERVICES3*/

.services_3-img {
        position: absolute;
        right: 2%;
        top: 25%;

        display: flex;
        width: 400px;
        height: auto;
      

}

.services_3-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;

}

}

/*SERVICES VERSION TEL*/

@media screen and (max-width:625px) {
.services_1, 
.services_2,
.services_3 {
    position: relative;
   
    margin-bottom: 2rem;
    height: 100%;
    width: 100%;
}
.services_1-corpus, 
.services_2-corpus,
.services_3-corpus {
    position: relative;
     display: flex;
     flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 90vh;
    width: 100%;
}


.services h1 {
        margin-left: 2rem;
        font-size: 1.8rem;
        font-family: var(--title-font);
        color: #6C8350;
        letter-spacing: 4px;
}

.services_1-text,
.services_2-text,
.services_3-text {
   margin: 1rem;
    width: auto;
    height: fit-content;
    font-size: 1rem;
    text-align: start;

    padding: 5px 15px;
    border: solid black 3px;
    border-radius: 10px;
   
}
.services_1-text p,
.services_2-text p,
.services_3-text p {
    margin-bottom: 20px;
}

.devis_button {
    position: absolute;
    bottom: 0;
    right: 3rem;
   
    padding: 15px 50px;
    border-radius: 14px;
    border: solid 0px #6C8350;
   
   background: linear-gradient(90deg, #6C8350 50%,  var(--beige-color) 50%); /* Couleur initiale */
    background-size: 200% 100%; /* Double la largeur pour permettre l'animation */
    background-position: 0% 0%; /* Position initiale */
    transition: background-position 0.4s ease-in-out;
}

.devis_button a {
     
    width: 100%;
    text-decoration: none;
    color: black;
    font-weight: 900;
    font-size: 20px;
}

.services_1-img,
.services_2-img,
.services_3-img {
    margin-right: 0rem;
    margin-bottom: 2rem;
}

/*SERVICES1*/

.services_1-img {
    position: relative;
   
    top: 5%;
   
    width: 350px;
    height: 270px;

}

.services_1-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*SERVICES2*/

.services_2-img {
    position: relative;
   
    top: 5%;
   
    width: 350px;
    height: 270px;
}

.services_2-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}
/*SERVICES3*/

.services_3-img {
          position: relative;
   
    top: 5%;
   
    width: 350px;
    height: 270px;
      

}

.services_3-img > img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}
}

/*A PROPOS*/



.apropos {
    min-height: 95vh;
    background-color: #E0E0D5;
    position: relative;
}
.header-apropos {
    display: flex;
 }
.apropos h1 {

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: var(--title-font);
    font-weight: 700;
    font-size: 4rem;
    letter-spacing: 3px;
    padding: 15px;
    
}

.apropos-corpus {
    display: flex;
    flex-direction: column;
    position: relative;
    margin:  1rem 1rem;

    font-size: 1.3rem;
     font-weight: 100;
     

    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;

    gap: 16px; /* ou moins */
    padding: 0 8px; /* optionnel, pour éviter que le contenu touche les bords */
   
}


 .apropos-text  p{
  
   
    width: 50vw;
    margin-bottom: 30px;
}

span {
    font-weight: 900;
}
.apropos-paragraphe {
    margin: 1rem 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.transi {
    text-align: center;
    font-style: italic;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.apropos-paragraphe1 {
    width: 80vw;
}

.apropos-paragraphe1 {
    width: 80vw;
}






.apropos-img1 {
  width: 221px; 

}

.apropos-img1 > img {
    width: 100%;
    height: 100%;
    display: block;
   
    border-radius: 20px;
   
     
}

.apropos-paragraphe2 {
    width: 70vw;
    margin-bottom: 1rem;
}

.apropos-img2 {
  width: 221px; 
    
}

.apropos-img2 > img {
    width: 100%;
    height: 100%;
    display: block;
   

    border-radius: 20px; 
     
}

.apropos-paragraphe3 {
   display: flex;
   justify-content: center;
   align-items: center;
    margin: 2rem 0rem;
    gap: 2rem;
    width: 100%;
}


.apropos-img3 {
  width: 221px; 
    
}


.apropos-img3 > img {
    width: 100%;
    height: 100%;
    display: block;

    border-radius: 20px;
     
}

.apropos-paragraphe4 {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    font-style: italic;
    letter-spacing: 2px;
    font-weight: 900;
}



.apropos-footer {
   
    width: 100%;
  
     display: flex;
    justify-content: center;
    align-items: center;
}
.Mdevis_button {
   
    margin: 3rem 0;
    width: fit-content;
     padding:20px 5rem;
     background-color: #6C8350;
     border-radius: 10px;
     border: solid white 5px;
     text-align: center;

}

.Mdevis_button a{
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 2rem;


   
}
@media screen  and (max-width:1300px ){
    .apropos-corpus {
 

    font-size: 1.2rem;

   
   
}
.apropos-paragraphe2 {
    width: 90vw;
  
   

}
}
@media screen  and (max-width:1050px ){
    .apropos-corpus {
 

    font-size: 1.1rem;

   
   
}

}

/*A PROPOS VERSION TEL*/

@media screen and (max-width:625px) {
    .apropos {
    padding-top: 3vh;
    width: 100%;
    background-color: #E0E0D5;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 80vh;
   
}
.header-apropos {
    justify-content: center;
}
.apropos h1 {

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: var(--title-font);
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: 3px;

    margin-left: 1rem;
   
    
}



.apropos-corpus {
    display: flex;
    flex-direction: column;
    position: relative;
    margin:  1rem 0rem;

    font-size: 15px;
     font-weight: 300;
     

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    display: flex;
    gap: 16px; /* ou moins */
   
   
}


  .apropos-paragraphe .apropos-text  p{

  
    width: 50vw;
    margin-bottom: 10px;
    margin-left: 10px;
}


.apropos-paragraphe {
    margin: 0.5rem 0rem;
    display: flex;
    justify-content: space-around;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

.transi {
    text-align: center;
    font-style: italic;
    font-size: 16px;
    letter-spacing: 2px;
}



.apropos-paragraphe1 {
    width: 100%;
}
.apropos-paragraphe1 p:nth-child(2){
display: none;
}

.apropos-paragraphe1 {
    width: 100%;
    max-width: 100%;
}



.apropos-img1 {
  width: 131px; 
  margin-top: 20px;

}

.apropos-img1 > img {
    width: 100%;
    height: 100%;
    display: block;
   
    border-radius: 20px;
   
     
}

.apropos-paragraphe2 {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.apropos-paragraphe2 .apropos-text{
    width: 80vw;
    margin-bottom: 1rem;
}

.apropos-img2 {
  width: 181px; 
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.apropos-img2 > img {
    width: 100%;
    height: 100%;
    display: block;
   

    border-radius: 20px; 
     
}

.apropos-paragraphe3 {
   display: flex;
   justify-content: center;
   align-items: center;
    margin: 2rem 0rem;
    gap: 2rem;
    width: 100%;
}


.apropos-img3 {
  width: 201px; 
    
}


.apropos-img3 > img {
    width: 100%;
    height: 100%;
    display: block;

    border-radius: 20px;
     
}

.apropos-paragraphe4 {
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    font-style: italic;
    letter-spacing: 2px;
}



.apropos-footer {
   
    width: 100%;
  
     display: flex;
    justify-content: center;
    align-items: center;
     text-align: center;
}
.Mdevis_button {
   
    margin: 3rem 0;
    width: fit-content;
     padding:20px 5rem;
     background-color: #6C8350;
     border-radius: 10px;
     border: solid white 5px;

}

.Mdevis_button a{
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 1.5rem;
   


   
}}



    /*FOOTER*/

footer {
    position: relative;
    background-color: var(--green-color);
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    max-width: 100vw;
    margin: 0; 
    padding: 1rem 2vw; 
    
    box-sizing: border-box;
}

    .icone-reseaux {
        display: flex;
        gap: 30px;
    }
    .icone-reseaux img {
        width: 55px;
        height: auto;
    }

    .cgv {
         display: flex;
        gap: 5rem;
    

    }

    .cgv a {
        text-decoration: none;
        color: #E0E0D5;
        font-weight: 500;
        font-size: 1.2rem;
      
    }

    @media  screen and (max-width:625px) {
        footer {
            flex-direction: column;
            gap: 20px;
            padding-top: 1rem;
       
        }

         .icone-reseaux img {
        width: 40px;
        height: auto;
    }
.cgv {
    width: 100%;
    justify-content: space-between;
    align-items: center;
     gap: 0;
    
}
     .cgv a {
       
        font-size: 15px;
      
    }

    }