@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dancing+Script&family=Oswald&family=Play&family=Roboto+Mono&display=swap');

/* font-family: 'Bebas Neue', cursive;
font-family: 'Play', sans-serif;
font-family: 'Roboto Mono', monospace; */
/*media vide*/
@media (min-width : 600px){

    @media (min-width : 900px){

        @media (min-width : 1000px){

            @media (min-width : 1200px){
                
            }
        }
    }

}
:root
{
    --texte-clair : #fff;
    --texte-sombre : #002a51;
    --lsr : #FFC000;
    --bleu : #133099;
    --input-fond : #f1f4f9;
    --section-grise : #F1F4F9;
    --section-orange : #ffd245;
    --modal-button : #FFC000;
    --span : #FFC000;
    /* --bleu : #4A71FF; */

    /* taille de texte */

    --title-s : 36px ;
    --title-m : 56px ;
    --title-l : 56px ;
    --title-xl : 70px ;
    --title-xxl : ;

    --sub-title-s : ;
    --sub-title-m : ;
    --sub-title-l : ;
    --sub-title-xl : ;
    --sub-title-xxl : ;

    --paragraphe-s : 22px ;
    --paragraphe-m : 26px;
    --paragraphe-l :26px ;
    --paragraphe-xl :30px ;
    --paragraphe-xxl : ;
}
html{
    scroll-behavior: smooth;
    width: 100vw;
    overflow-x: hidden;
}
body
{

 font-family: 'Bebas Neue', cursive;
  width: 100vw;
    overflow-x: hidden;

}
input , textarea
{
    font-family: 'oswald' , Arial, Helvetica, sans-serif
}
.section_divider_top
{
    width: 120%;
    object-fit: cover;
    margin-top: 100px;
    margin-bottom: 0;
        margin-left: -5px;
}
.section_divider_bottom
{
    width: 120%;
    object-fit: cover;
    margin-bottom: 100px;
        margin-left: -5px;
}
.container 
{
     display: flex;
 flex-direction: column;
}

/*scrollbar*/
/* width */
::-webkit-scrollbar {
    background: initial;
}

/* Track */
::-webkit-scrollbar-track {
    background: #00000000;
    opacity: 0;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--lsr);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--section-orange);
  }
/*fin scrollbar*/

/*Nav*/
header
{
    height: 65px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    background-color: #f1f4f9;
    top: 0;
    z-index: 10;
    box-shadow: 0px 0px 9px rgb(179, 179, 179);
}
.logo
{
    padding-left: 15px;
  
}
nav
{

    z-index: 1000;
}
.hamburger
{
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa00;
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
    padding-right: 15px;

}

.hamburger span
{
    display: block;
    width: 100%;
    height: 2px;
    background: #333;
    position: absolute;
    pointer-events: none;
    transition : opacity 0.3s 0.15s ease-out;

}
.hamburger span:nth-child(1)
{
    transform: translateY(7px);
}
.hamburger span:nth-child(3)
{
    transform: translateY(-7px);
}
.hamburger span:nth-child(1),.hamburger span:nth-child(3)
{
    transition: transform 0.3s ease-out;
}
.hamburger.open span:nth-child(1)
{
    transform: translate(0) rotate(135deg);
}
.hamburger.open span:nth-child(2)
{
    opacity: 0;
    transition : opacity 0s ease-out;
}
.hamburger.open span:nth-child(3)
{
    transform: translate(0) rotate(-135deg);
}

.nav_navlinks
{
    list-style: none;
    display: none;
    align-items: center;
    margin-right: 25px;
}
.nav_navlinks li 
{
    margin: 0 auto;
    margin-top: 15px;
    font-size: 40px;
    
}
.nav_navlinks li a 
{
    text-decoration: none;
    color: var(--texte-sombre);
    display: inline-block;
    position: relative;
}

.nav_navlinks a::after
{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    transform: scalex(0);
    transform-origin:left ;
    background-color: var(--texte-sombre);
    transition: transform 0.4s ease-out;

} 
.nav_navlinks a:hover::after
{
    transform: scalex(1);
}

.nav_navlinks
{
    opacity: 0;
    transition: transform 1.6s ease-out,opacity 0.6s ease-in-out;
    transform: translateY(100%);
    
    display: flex;
    flex-direction: column;
    position: absolute;
    height: 100vh;
    width: 100vw;
    background:var(--lsr);
    z-index: 2;
    top : 100%;
    right: 0;
    /* transform: translate(0%,0%); */
    margin: 0;
    
}
.nav_navlinks.open
{
    opacity: 1;
    transform: translateY(0%);
    transition: transform 0.5s ease-out, opacity 0.6s ease-out;
} 

@media (max-width : 350px){
    .camion
    {
        height: 80px;
        padding-left: 20px;
        
    }
}
@media (min-width : 600px){
    .hamburger 
    {
        display: none;

    }
    .nav_navlinks
    {
        opacity: 1;
        display: flex;
        flex-direction: row;
        background: none;
        position: relative;
        height: initial;
        width: initial;
        top : initial;
        right: initial;
        transform: initial;
        padding-right: 25px;
        
    }
    .nav_navlinks li 
    {
    margin-left: 10px;
    font-size: 18px;
    margin-bottom: 9px;
    
    }
    
    @media (min-width : 900px){
        .header_tel
        {
            text-decoration: none !important;
            display: flex;
            align-content: flex-start;
            justify-content: flex-start;
            align-items: center;
        }
        .header_tel::after
        {
            content: "  07 83 51 31 18";
            text-decoration: none !important;
            color: var(--texte-sombre);
            font-size: 25px;
            margin-left : 10px;
        }


        @media (min-width : 1000px){


            @media (min-width : 1200px){

            }
        }
    }

}
/*fin de la nav*/

/*body*/
.temoin 
{
    width: 360px;
    background: #000;
}


/*hero*/
.hero
{
    width: 100%;
    position: relative;
    height: 90vh;
    margin: 0 auto;
    background: url("images/bannière3.svg") no-repeat;
    background-size:  cover;
    background-position: left bottom;
    color: var(--texte-clair);
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;

}
.wave{
    margin-top: -50px;
    fill: #000;
}
.hero-text
{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    padding-left: 4vw;
    position: relative;
    z-index: 1;

    
}
.hero-text h1 
{
    font-size: 36px;
    margin-bottom: 0;
}
.hero_sub_text
{
    font-family: 'oswald' , Arial, Helvetica, sans-serif;
    font-size: 20px;
    max-width: 600px;
}
.avis
{
    margin: 0;
    font-size: 40px;
}
.etoiles
{
    filter: drop-shadow(0 0 0.25rem rgb(255, 255, 255));}
.offre-box 
{
    display: none;
    margin: 0 auto;
}
.offre-box a 
{
    display: block;
    text-decoration: none;
    color:var(--texte-clair);
    padding: 10px;
    max-width: 390px;
    

    
}

.offre-box a h2
{
    
    width: 90%;
    max-width: 350px;
    text-align: center;
    padding: 15px 5px;
    background: var(--bleu);
    border: var(--texte-clair) 3px solid;
    /* box-sizing: border-box; */
    border-radius: 25px;
    /* box-shadow: 0px 20px 21px 7px rgba(0,0,0,0.1); */
    filter: drop-shadow(0 0 0.5rem rgb(255, 255, 255));

}
.offre-box a h2:hover
{
    background-color: var(--texte-sombre);
}
.offre-box div h2:hover
{
    background-color: var(--lsr);
}
.camion{
    /* filter: drop-shadow(0 24px 0.9rem rgb(135, 60, -43)); */
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-top: -20vh;
    position: relative;


}

.dark-layer
{
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter:brightness(0.4) blur(2px);
    -webkit-backdrop-filter: brightness(0.4) blur(2px);
  
}
.hero-wave
    {
        
    margin-top: -1.5px;
    position: relative;
    }

/* ajout de lsr  */

.box
{
    
    background-color: #f1f1f1;
    
    border-radius: 50px;
    border: 3px solid ;
    cursor: pointer;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    padding: 9px 16px;
    height: 40px;

}
.hero-box
{
z-index: 2;
max-width: 400px;
display: block;
margin: 0 auto;

}
.hero-box p
{
font-size: 18px;
color: #fff;
text-align: center;
}

.hero-box :nth-child(1)
{
border-color: #4e8fff;

}
.hero-box :nth-child(3)
{
border-color: #f3ff4e;
}
.hero-box :nth-child(5)
{
border-color: #4eff69;
}

.logo-choice
{
width: 30px;
height: 30px;

}
.box:hover
{
background: rgb(47, 37, 85);
}
.hero-box :nth-child(3):hover 
{
background: rgb(76, 76, 18);

}
.hero-box :nth-child(5):hover 
{
background: rgb(10, 84, 34);


}
.hero-box :first-child:hover h3
{
color: #fff;

}
.hero-box :nth-child(3):hover h3 
{
color: #fff;
}
.hero-box :nth-child(5):hover h3 
{
color: #fff;   
}
.choice-box
{
margin-right: 15px;
margin-left: 15px;
text-align: center;
width: 100%;
color: var(--texte-sombre);
}
.hero-box p 
{
text-shadow: 0px 0px 15px #fff;
}
/* Animation des icon */
.box:hover .logo-choice {
animation: shake 0.6s;

animation-iteration-count: infinite;
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* fin ajout de lsr  */


/* media de hero */
@media (min-width : 400px) {
    .hero
    {
        display: flex;
        flex-direction: column;
    }
    /* .camion 
    {
        height: 200px;
        bottom: 30px;
    } */
    .hero-text h1 
    {
        font-size: 38px;
    }
    .hero_sub_text
    {
        margin-top: 0;
        font-size: 20px;
    }
    .avis
    {
        font-size: 60px;
    }
    .etoiles
    {
        height: 40px;
        width: auto;
    }
    .offre-box
    {
        display: none;
    }
    .offre-box a h2
    {
        /* font-size:19px; */
        color: #f1f1f1;
    }
    @media (min-width : 600px){
        .hero{
        }
        .hero_sub_text
            {
                font-size: 30px;
            }
    
    .hero-text h1 
    {
        font-size: 50px;
    }
    .hero_sub_text
    {
        margin-top: 0;
        font-size: 24px;
    }
    .avis
    {
        font-size: 80px;
    }
    .etoiles
    {
        height: 50px;
        width: auto;
    }
    .offre a h2
    {
        font-size:30px;
    }
    
    



    @media (min-width : 900px){
        .hero{
            flex-direction: column;
            position: relative;
        }
        .hero-text h1 
        {
            font-size: 45px;
        }
        
        @media (min-width : 1000px){
            .hero{
                flex-direction: row;
                position: relative;
            }
            .hero_sub_text
            {
                font-size: 30px;
            }

            
            .offre-box
           {
           display: block;
           }
           .hero-box{
            width: 50%;
            display: block;
            margin: auto 0;
            margin-right: 10%;
           }
           .choice-box
           {
            font-size: 22px;
           }
           .camion
           {
            height: 60vh;
            margin-top: -30vh;
           }

            @media (min-width : 1200px)
        {
            .hero-text h1 
            {
                font-size: 70px;
            }
            .hero_sub_text
            {
                font-size: 30px;
            }
            .camion
           {
            margin-top: -40vh;
           }
            
           
        }
        }

    }

    }
}
/* Fin de hero */

/* recontact */
.recontact
{
    display: block;
    /* background: rgb(192, 233, 247); */
    width: 90%;
    border-radius: 9px;
    display: block;
    height: auto;
    padding: 10px 0;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: 'oswald', cursive;
    color:var(--texte-sombre);
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.recontact form input 
{
    border-radius: 15px;
    border: 2px solid var(--texte-sombre) ;
    padding: 5px ;
    background:var(--input-fond);
    margin-right: 5px;
}
.recontact form input:nth-child(4){
    padding-right: 50px;
    margin-top: 5px;
}
.recontact form button
{
    margin-top: 5px;
    color: var(--texte-clair);
    background-color: var(--lsr);
    border-radius: 9px;
    border: none;
    padding: 5px 25px;
    box-shadow: 3px 3px 5px rgb(156, 155, 155);
    cursor: pointer;
}
.recontact form button:hover
{
    background: var(--texte-sombre);
}
@media (min-width : 600px){
    
    .recontact form h3
    {
        font-size: 30px;
    }
    @media (min-width : 900px){
        .recontact form h3
    {
        font-size: 35px;
    }
    .recontact form input , .recontact form button
    {
        font-size: 25px;
    }


        @media (min-width : 1000px){


            @media (min-width : 1200px){

            }
        }
    }

}

/* fin de recontact */

/* scroll num  */
.scroll-num
{
    display: flex;
    align-items: center; 
    justify-content: center;
    width: 80%;
    height: 100px;
    margin: auto;
    background:var(--texte-sombre);
    border-radius: 15px;
    color: var(--texte-clair);
    opacity: 0;
    transform: translatex(-100%);
    transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
    margin-top: 120px;
    padding: 10px;
} 
.scroll-num img
{
    margin-left: 15px;
    width: 60px;
}  
.scroll-num h3
{
    margin-left: 15px;
    font-size: 26px ;
    color: var(--texte-clair);
    text-decoration: none;
    
    color: inherit; /* Inherit text color of parent element. */
    text-decoration: none; /* Remove underline. */
    /* Additional css `propery: value;` pairs here */
}
.scroll-num.active
{
    opacity: 1;
    transform: translate(0);
    
}



@media (min-width : 600px){
    .scroll-num h3
    {
    font-size: var(--title-s);
    }
    
    @media (min-width : 900px){
        .scroll-num h3
    {
    font-size: var(--title-m);
    }
    .scroll-num img
    {
    width: 90px;
    }   


        @media (min-width : 1000px){
            .scroll-num h3
    {
    font-size: var(--title-l);
    }


            @media (min-width : 1200px){
                .scroll-num h3
    {
    font-size: var(--title-xl);
    }
    .scroll-num img
    {
    width: 120px;
    }   


            }
        }
    }

}

/*fin de  scroll num  */

/*Debut de services*/

 .services
 {
    width: 100%;
    height: auto;
    background:var(--section-grise);
    color: var(--texte-sombre);
 }      
 .services_title 
 {
    font-size: 35px;
    padding: 15px 8%;
 }  
 .services_container
 {
    padding: 15px 8%;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: space-around;
    box-sizing: border-box;
 }
 .services_container_article
 {
    background:var(--texte-clair);
    /* background: #000; */
    min-width: 160px;
    max-width: 200px;
    width: 40%;
    min-height: 225px;
    margin: 5px;
    border-radius: 9px;
    text-decoration: none;
    margin-top: 25px;

 }
 .services_container_article p
 {
    color: var(--texte-sombre);
    line-height: 1;
    text-align: center;
    font-size: 19px;
 }
.services_container_images
{
    box-sizing: border-box;
    object-fit: cover;
    display: block;
    width: 100%;
    /* height: 80%; */
    /* object-position: top  left; */
    margin:auto ;
    text-align: center;
    border-radius: 9px 9px 0px 0px;
}

/* Fin de service */

/* Modal contact */
.modal_contact_trigger_button
{
    /* font-size: 30px; */
    border: none;
    background: var(--modal-button);
    border-radius: 9px;
    color: var(--texte-clair);
    box-shadow: 3px 3px 6px rgb(156, 155, 155);
    min-width: 250px;
    padding: 10px 15px;
    width: 90%;
    max-width: 400px;
    display: block;
    margin: 150px auto;
    cursor: pointer;
    font-size: 24px;

}
.modal_contact_trigger_button:hover
{
    background: var(--texte-sombre);
}
@media (min-width : 600px){
    .modal_contact_trigger_button
    {
        font-size: 30px;
        max-width: 500px;
    }
    
    @media (min-width : 900px){
        .modal_contact_trigger_button
    {
        font-size: 40px;
        max-width: 600px;
    }


        @media (min-width : 1000px){
            
            @media (min-width : 1200px){

            }
        }
    }

}

.modal1-container 
  {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    visibility: hidden;

    
}
.modal1-container.active
{
    visibility: visible;

  }

.overlay-modal
  {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333333d3;
    backdrop-filter: blur(7px);
    transition: opacity 0.4s 0.2s ease-out;
}
.modal1-container.active .overlay-modal
{
    opacity: 1;
    transition: opacity 0.4s ease-out;
}
.first-modal
{
    opacity: 0;
   width: 90%;
   min-width: 300px;
   border-radius: 5px;
   background-color: #f1f1f1;
   top: 40%;
   left: 50%;
   position: absolute;
   transform: translate(-50%, calc(-50% + 50px));
   transition: opacity 0.4s 0.2s ease-out,
   transform 0.4s ease-out;
}
.modal1-container.active .first-modal
{
    opacity: 1;
    transform: translate(-50%,-30% );
    transition: opacity 0.4s 0.2s ease-out, 
    transform 0.4s 0.2s ease-out;
}
.close-modal 
{
    background: crimson ;
    padding: 10px;
    border: none;
    color: #fff;
    border-radius: 5px;
    cursor:pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
}

.first-modal
{
    width: 90%;
    border-radius: 9px;
    display: block;
    height: auto;
    padding: 10px 0;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: 'oswald', cursive;
    color:var(--texte-sombre);
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.first-modal form
{
    margin-top: 40px;
}
.first-modal form input 
{
    border-radius: 15px;
    border: 2px solid var(--texte-sombre) ;
    padding: 5px ;
    background:var(--input-fond);
    width: 50%;
    margin: 15px auto;
}
.first-modal form input:nth-child(4){
    
    
}
.first-modal form button
{
    margin-top: 15px;
    margin-bottom: 15px;
    color: var(--texte-clair);
    background-color: var(--lsr);
    border-radius: 9px;
    border: none;
    padding: 5px 25px;
    box-shadow: 3px 3px 5px rgb(156, 155, 155);
    cursor: pointer;
}
@media (min-width : 600px){
    .first-modal form 
    {
        padding: 25px;
    }
    
    @media (min-width : 900px){
        .first-modal
        {
            font-size: 30px;
        }


        @media (min-width : 1000px){


            @media (min-width : 1200px){

            }
        }
    }

}
/* Fin de Modal contact */

/* qui sommes nous ?*/

.qui
{
    background: var(--section-grise);
    color: var(--texte-sombre);
}
.qui_introduction
{
    padding: 10px 15px;
}
.qui_introduction h3
{
    text-align: center;
    font-size: 26px;
    font-size: clamp(26px,5vw,70px);
    margin-top: 0;
}
.qui_introduction p
{
    font-family: 'oswald';
    font-size: 18px;
    font-weight: 800;
}
.qui_introduction p span 
{
    color: var(--span);
}

.qui_services
{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.qui_services > div h3
{
    text-align: center;
    font-size: 23px;
}
.qui_services > div p
{
    font-family: 'oswald';
    font-size: 18px;
    font-weight: 800;
}
.qui_services > div p span 
{
    color: var(--span);
}
@media (min-width : 600px){
    .qui div h3
    {
    font-size: var(--title-s);
    }
    .qui div p 
    {
        font-size: var(--paragraphe-s);
    }
    
    @media (min-width : 900px){
        .qui div h3
    {
    font-size: var(--title-m);
    }
    .qui div p 
    {
        font-size: var(--paragraphe-m);
    }


        @media (min-width : 1000px){
            .qui div h3
    {
    font-size: var(--title-l);
    }
    .qui div p 
    {
        font-size: var(--paragraphe-l);
    }


            @media (min-width : 1200px){
                .qui_introduction h3
    {
    font-size: var(--title-xl);
    }
    .qui div p 
    {
        font-size: var(--paragraphe-xl);
    }

            }
        }
    }

}

/* fin de services */

/* offre  */

.offre
{
    /* padding: 10px 15px; */
    color: var(--texte-sombre);
    width: 100%;
    box-sizing: border-box;
}
.offre h3
{
    text-align: center;
    font-size: 26px;
    margin-top: 0;
    padding-inline: 15px;
}
.offre p
{
    font-family: 'oswald';
    font-size: 18px;
    font-weight: 800;
    padding-inline: 15px;

}
.offre p span 
{
    color: var(--span);
}

.offre_container
 {
    padding: 15px 8%;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: space-around;
    box-sizing: border-box;
    background: var(--texte-sombre);
    margin-top: 0px;
 }
 .offre_container_article
 {
    color: var(--texte-clair); 
    min-width: 160px;
    max-width: 300px;
    width: 80%;
    min-height: 225px;
    margin: 5px;
    border-radius: 9px;
    text-decoration: none;
    margin-top: 25px;
    background: var(--texte-sombre);
    border: 5px solid #fff;
    filter: drop-shadow(0px 17px 19px #000);
    padding: 15px;

 }
 .offre_container_article p
 {
    /* color: var(--texte-sombre); */
    line-height: 1;
    text-align: center;
    font-size: 19px;
 }

.offre_container_images
{
    box-sizing: border-box;
    object-fit: cover;
    display: block;
    width: 80%;
    margin:auto ;
    text-align: center;
    border-radius: 50%;
}
.offre_container_article h5
{
 font-size: clamp(26px,2.5vw,56px);
 text-align: center;
 color: var(--texte-clair);

}
.offre_container_article h6
{
font-size: clamp(20px,2.2vw,26px);
font-family: 'oswald';
color: var(--texte-clair);

}


@media (min-width : 600px){
    .offre h3
    {
    font-size: var(--title-s);
    }
    .offre p 
    {
        font-size: var(--paragraphe-s);
    }
    
    @media (min-width : 900px){
        .offre h3
    {
    font-size: var(--title-m);
    }
    .offre p 
    {
        font-size: var(--paragraphe-m);
    }


        @media (min-width : 1000px){
            .offre h3
    {
    font-size: var(--title-l);
    }
    .offre p 
    {
        font-size: var(--paragraphe-l);
    }


            @media (min-width : 1200px){
                .offre h3
    {
    font-size: var(--title-xl);
    }
    .offre p 
    {
        font-size: var(--paragraphe-xl);
    }

            }
        }
    }

}

.offre_container_article_text
{
font-size: 10px;
}
.offre_container_article_title
{
   font-family: 'Bebas Neue', cursive;
} 
/* fin de offre */

/* devis */
.devis

.devis
{
    /* padding: 10px 15px; */
    color: var(--texte-sombre);
    width: 100%;
    box-sizing: border-box;
}
.devis h3
{
    color: var(--texte-sombre);

    text-align: center;
    font-size: 26px;
    margin-top: 0;
    padding-inline: 15px;
}
.devis p
{
    color: var(--texte-sombre);

    font-family: 'oswald';
    font-size: 18px;
    font-weight: 800;
    padding-inline: 15px;

}

.devis p span 
{
    color: var(--span);
}
@media (min-width : 600px){
    .devis h3
    {
    font-size: var(--title-s);
    }
    .devis p 
    {
        font-size: var(--paragraphe-s);
    }
    
    @media (min-width : 900px){
        .devis h3
    {
    font-size: var(--title-m);
    }
    .devis p 
    {
        font-size: var(--paragraphe-m);
    }


        @media (min-width : 1000px){
            .devis h3
    {
    font-size: var(--title-l);
    }
    .devis p 
    {
        font-size: var(--paragraphe-l);
    }


            @media (min-width : 1200px){
                .devis h3
    {
    font-size: var(--title-xl);
    }
    .devis p 
    {
        font-size: var(--paragraphe-xl);
    }

            }
        }
    }

}





.devis_container 
{
    background: var(--section-orange);
    display: flex;
    flex-wrap: wrap;
    

    
}
.devis_container form
{
    min-width: 220px;
    max-width: 400px;
    margin: 50px auto;
    background-color: var(--texte-sombre);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 20px;


}
.devis_container form h4
{
    margin-top: 5px;
    font-size: 28px;
    margin-bottom: 0;
}
.devis_container form p
{
    font-size: 22px;
}
.devis_container form h4 , .devis_container form p
{
  color:var(--texte-clair);
  text-align: center;
}
.devis_container form img
{
    box-sizing: border-box;
    object-fit: cover;
    display: block;
    width: 40%;
    margin:10px auto ;
    text-align: center;
    /* border-radius: 50%; */
    filter: drop-shadow(0px 2px 10px #000);
    
}

.devis_container form button
{
    margin-top: 5px;
    color: var(--texte-clair);
    background-color: var(--lsr);
    border-radius: 9px;
    border: 3px solid #fff;
    padding: 5px 25px;
    cursor: pointer;
    margin: 10px auto;
    width: 50%;
}
.devis_container form input , .devis_container form textarea
{
    border-radius: 15px;
    border: 2px solid var(--texte-sombre) ;
    padding: 5px ;
    background:var(--input-fond);
    margin-right: 5px;
    resize: none;
    margin-top: 5px;
}

@media (min-width : 600px){
    .devis_container form h4
    {
    font-size: var(--title-s);
    }
    .devis_container form p 
    {
        font-size: var(--paragraphe-s);
    }
    
    @media (min-width : 900px){
        .devis_container form h4
    {
    font-size: var(--title-m);
    }
    .devis_container form p 
    {
        font-size: var(--paragraphe-m);
    }
    .devis_container form input , .devis_container form textarea,.devis_container form button
    {
        font-size: 26px;
    }



        @media (min-width : 1000px){
            .devis_container form h4
    {
    font-size: var(--title-l);
    }
    .devis_container form p 
    {
        font-size: var(--paragraphe-l);
    }


            @media (min-width : 1200px){
                .devis_container form h4
    {
    font-size: var(--title-m);
    }
    .devis_container form p 
    {
        font-size: var(--paragraphe-m);
    }

            }
        }
    }

}

/* Fin de devis */


/* contact */

.contact
{
    background: var(--texte-sombre);
    color: var(--texte-clair);
}
.contact p
{
    font-family: 'oswald';
    font-size: 18px;
    font-weight: 800;
    padding-inline: 15px;
}
.contact h3 
{
    text-align: center;
    font-size: 26px;
    margin-top: 0;
    padding-inline: 15px;
}
.contact p ,.contact h3 
{
}
.contact p a 
{
    color: var(--span);
}
.contact p span 
{
    color: var(--span);
}


.contact_tel , .contact_email
{
    display: flex;
    
    width: 100%;
    margin: 10px auto;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}
.contact_tel h3 , .contact_email h3
{
    margin-bottom: 0px;
    font-size: 20px;
    font-family: 'oswald' , Arial, Helvetica, sans-serif
}

.contact_email a 
{
    /* text-decoration: none; */
    color: var(--texte-clair);
    cursor: pointer;
}
.contact_tel img , .contact_email img 
{
width: 40px;
}
@media (min-width : 600px){
    .contact h3 ,.contact_tel h3
    {
    font-size: var(--title-s);
    }
    .contact p ,.contact_tel p 
    {
        font-size: var(--paragraphe-s);
    }
    
    @media (min-width : 900px){
        .contact h3
    {
    font-size: var(--title-m);
    }
    .contact p ,.contact_tel p 
    {
        font-size: var(--paragraphe-m);
    }
    .contact_tel img, .contact_email img
    {
    width: 90px;
    } 


        @media (min-width : 1000px){
            .contact h3
    {
    font-size: var(--title-l);
    }
    .contact p ,.contact_tel p 
    {
        font-size: var(--paragraphe-l);
    }


            @media (min-width : 1200px){
                .contact h3
    {
    font-size: var(--title-xl);
    }
    .contact p ,.contact_tel p 
    {
        font-size: var(--paragraphe-xl);
    }
    .contact_tel img, .contact_email img
    {
    width: 120px;
    }  

            }
        }
    }

}
/* Fin de contact */

/* footer */
footer
{
    width: 100%;
    
    background: var(--texte-sombre);
    box-sizing: border-box;
    color: var(--texte-clair);
    padding: 20px 10px;
}
.footer 
{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.footer_section
{
    width: 100%;
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
}
.footer_section_title
{
    text-align: center;
    font-size: 26px;
}
/* (a propos) navlinks */
.footer_section_navlinks
{
    text-decoration: none ;
    list-style: none;
    text-align: center;
    padding-left: 0;
}
.footer_section_navlinks li 
{
    padding-top: 10px;
    
}
.footer_section_navlinks li a
{
    color: var(--texte-clair);
    font-size: 22px;
}
.footer_section_navlinks li p
{
    color: var(--texte-clair);
    font-size: 22px;
    margin: 0;
}
.footer_section_contact_email ,.footer_section_contact_tel
{
    color: var(--texte-clair);
    display: flex;
    justify-content: center;

}
.footer_section_contact_email h3 ,.footer_section_contact_tel h3
{
    font-size: 16px;
    color: var(--texte-clair);
    font-family: 'oswald' , Arial, Helvetica, sans-serif

}
.footer_section_contact_email img ,.footer_section_contact_tel img
{
    width: 20px;
    padding-right: 5px;

}

/* subsection de footer */
.footer_subsection
{
    width: 200px;
    text-align: center;
    /* display: block; */
    margin: 20px auto;
}
.footer_subsection a 
{
    color: var(--texte-clair);
}
/* fin de footer */


/* Mentions légales */

.mentions
{
    width: 100%;
    height: auto;
    padding-left: 20px;
    box-sizing: border-box;
}
.mentions_title
{
    color: var(--texte-sombre);
    text-align: center;
    font-size: clamp(36px,7vw,90px);
    margin-top: 0;

}
.mentions_subtitle
{
    font-size: clamp(20px,5vw,50px);
    margin-bottom: 0px;
    color: var(--texte-sombre);

}
.mentions_paragraphs 
{
    font-family: 'oswald';
    font-size: clamp(16px,3.5vw,30px);
    font-weight: 800;
    color: var(--texte-sombre);

}

/* fin de mentions légales */


.tel-modal{
    position: fixed;
    left: 51%;
    top: 53%;
    transform: translate(-50%,80%);
    width: 90%;
    height: 69%;
    background: var(--texte-sombre);
    z-index: 1000;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;

   
    
}
.tel-modal.active{
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    transition-delay: 0.6s;

   
}
.tel-modal h3
{
    color: var(--texte-clair);
    padding-inline: 4vw;
    font-size: clamp(20px,5vw,60px);
}
.tel-modal h3 span
{
    color: var(--span);
}
.tel-modal a
{
    font-size: clamp(20px,10vw,80px);
    text-align: center;
    text-decoration: none;
    color: var(--texte-clair);
    width: 100%;
    display: block;
    margin: 0 auto;
}
   @media (width < 1000px){
    .tel-modal{
        height: 68%;
    }
    @media (width < 900px){
        .tel-modal{
            height: 50%;
        }
        @media (width < 600px){
            .tel-modal{
                height: 30%;
            }
            
        }
    }
   }
   
   a[href^=tel] {
    color: var(--texte-clair); /* Inherit text color of parent element. */
    text-decoration: none; /* Remove underline. */
  }