:root{

    --un:#222222;
    --deux:#FF6D1F;
    --trois:#FAF3E1;
    --quatre:#F5E7C6;
}

@keyframes slideUp{
    0%{
        transform:translateY(50px);
        opacity: 0;
    }
    100%{
        transform:translateY(0);
        opacity:1;
    }
}

*{
    margin-right:0;
    margin-left: 0;
    
}


.header-navbar-pc{
    display:block;
}
.header-navbar-mobile{
    display:none;
}

@media (max-width:768px){

    .header-navbar-pc{
        display:none;
    }
    .header-navbar-mobile{
        display:block;
    }
}


header{
    
    color:var(--trois);
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    position:fixed;
    top:0;
    background-color: var(--un);
    width:100%;
    height:5em;
    text-align: center;
    box-shadow: 1px 2px 3px var(--deux);
    z-index:1000;
}   

.header-navbar-mobile ul{
    display: flex;
    text-align: center;
    justify-content: space-between;
}

.header-navbar-mobile li{
    display: inline-block;

    
}
.header-navbar-mobile .header-mobile-img-logo,.header-mobile-img-menu{
    height:auto;
}

.header-mobile-img-logo{
    margin-left: -1em;
    margin-top:-0.65em;
    width:125px;
}

.header-mobile-img-menu{
    margin-right: 2em;
    margin-top:0.75em;
    width:50px;
}





.navbar-mobile-menu{
    position:absolute;
    background-color: var(--un);
    right:0;
    top:5.1em;
    padding:1em;
    font-size: 1em;
    display:flex;
    flex-direction: column;
    overflow: hidden;
    transition: right 0.4s ease;
}

.navbar-mobile-menu a{
    color:var(--trois);
    text-decoration: none;
    padding:1em;
    border-top: 1px solid var(--deux);
}

.navbar-mobile-menu a:hover{
    background-color: var(--trois);
    color:var(--un)
}
.navbar-mobile-menu{
    opacity:0;
    pointer-events: none;
}

.navbar-mobile-menu.open{
    opacity: 1;
    pointer-events: auto;
}








#hero{
    display:flex;
    flex-direction: column;
    text-align: center;
    margin-top:3em;
    color:var(--trois);
    height:35em;
    width:100%;
    
    
    background: linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.73)), url("img/image_acceuil.webp");
    background-size: cover;
    background-repeat: no-repeat;
    
}

#hero h1,#hero h3,#hero a{
    opacity:0;
}

#hero h1{
    margin-top: 4em;
    animation:slideUp 1s ease-out forwards;
}



#hero h3{
    animation:slideUp 1s ease-out forwards;
    animation-delay: 0.5s;
    font-weight: 500;
    
}


#hero h4{
    margin-top:7em;
    font-size:20px;
}
#hero a{
    font-weight: 100;
    animation:slideUp 1s ease-out forwards;
    animation-delay:2s;
    text-decoration: none;
    color:inherit;
    cursor:pointer;
}






#services,#services-contact{

    font-size:2em;
    display:flex;
    text-align: center;
    flex-direction: column;
    margin-top:0;
    color:var(--deux);
    height:4.5em;
    width:100%;

    background-image: url("img/services-image.jpg");
    background-size: cover;
    background-repeat: no-repeat;

}

#services h2,#services-contact h2{
    animation:slideUp 1s ease-out forwards;

}








#liste-services{
    background-color:white;
    color:var(--un);
    margin-top:-2.8em;
}

#liste-services h2{
    font-size:2em;
    margin-top:2.5em;
}


#liste-services hr{
    width:50%;
    margin:20px auto;
    margin-top:-5px;
    height:2px;
    background-color: var(--quatre);
}

#liste-services .Toiture hr{
    background-color: var(--un);
}

#liste-services .Peinture hr{
    background-color: var(--trois);
}

#liste-services .Nettoyage hr{
    background-color: var(--quatre);
}

#liste-services .Agricole hr{
    background-color: var(--un);
}



#liste-services p{
    font-weight: 200;
}
#liste-services .Toiture{
    display:flex;
    flex-direction: column;
    text-align: center;

    margin-top:3em;
    color:var(--un);
    width:100%;
    height:30em;
    background: linear-gradient(rgba(250,243,225,0.60), rgba(250,243,225,0.73)), url("img/image-liste-services.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

#liste-services .Toiture .Toiture-para{
    margin-right:1em;
    margin-left:1em;
    font-size:1.2em;
}

#liste-services .Toiture .Toiture-para{
    opacity:0;
    transform:translateY(20px);
    transition: all 0.5s ease;
}
#liste-services .Toiture .Toiture-para a{
    border:1px solid var(--un);
}

#liste-services .Toiture:hover .Toiture-para{
    
    opacity:1;
    transform:translateY(0);
}

#liste-services .Peinture{
    display:flex;
    flex-direction: column;
    text-align: center;

    color:var(--trois);
    width:100%;
    height:30em;
    background: linear-gradient(rgba(34,34,34,0.60), rgba(34,34,34,0.73)), url("img/image-liste-services.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#liste-services .Peinture .Peinture-para{
    margin-right:1em;
    margin-left:1em;
    font-size:1.2em;
}

#liste-services .Peinture .Peinture-para{
    opacity:0;
    transform:translateY(20px);
    transition: all 0.5s ease;
}

#liste-services .Peinture .Peinture-para a{
    border:1px solid var(--trois);
}
#liste-services .Peinture:hover .Peinture-para{
    
    opacity:1;
    transform:translateY(0);
}


#liste-services .Nettoyage{
    display:flex;
    flex-direction: column;
    text-align: center;
    color:var(--quatre);
    margin-top :-1.1em;
    height:30em;
    background: linear-gradient(rgba(255,109,31,0.60), rgba(255,109,31,0.73)), url("img/image-liste-services.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#liste-services .Nettoyage .Nettoyage-para{
    margin-right:1em;
    margin-left:1em;
    font-size:1.2em;

}

#liste-services .Nettoyage .Nettoyage-para{
    opacity:0;
    transform:translateY(20px);
    transition: all 0.5s ease;
}
#liste-services .Nettoyage .Nettoyage-para a{
    border:1px solid var(--quatre);
}
#liste-services .Nettoyage:hover .Nettoyage-para{
    
    opacity:1;
    transform:translateY(0);
}

#liste-services .Agricole{
    display:flex;
    flex-direction: column;
    text-align: center;

    margin-top :-1.1em;
    color:var(--un);
    height:30em;
    background: linear-gradient(rgba(241, 250, 225, 0.6), rgba(238, 250, 225, 0.73)), url("img/image-liste-services.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;

}

#liste-services .Agricole .Agricole-para{
    margin-right:1em;
    margin-left:1em;
    font-size:1.2em;

}

#liste-services .Agricole .Agricole-para{
    opacity:0;
    transform:translateY(20px);
    transition: all 0.5s ease;
}
#liste-services .Agricole .Agricole-para a{
    border:1px solid var(--un);

}
#liste-services .Agricole:hover .Agricole-para{
    
    opacity:1;
    transform:translateY(0);
}

#liste-services a{

    color:inherit;
    text-decoration: none;
    font-weight: 1000;
    padding:0.5em;
    width:10em;
    text-align: center;
   
    margin-top: 3em;
    margin-bottom:1.25em;
}




#contact{
    display:flex;
    flex-direction: column;
    background-color: var(--un);

}

#contact #title-fin{
    color:whitesmoke;
    font-size:2em;
    margin-left:1em;
    margin-bottom: -0.5em;
}

#contact .contact-card,#contact .form-card{
    width:75%;
    padding:1em;
    margin:2em ;
    border-radius: 10px;
}
.form-card{
    opacity: 0;
}

.form-card{
    animation:slideUp 1s ease-out forwards;
    display:flex;
    flex-direction: column;
}

.form-card h2{
    text-align: left;
    color:var(--trois);
    font-size:1.7em;
}

.form-card .form-card-nomprenom{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:4em;
}

.form-card label{
    display:block;
    margin-top: 0.7em;
    color:var(--trois);
    font-size:1.5em;
}

.form-card input,.form-card textarea{
    width:100%;
    padding:0.7em 1em;
    font-size:1em;
    border-radius:8px;
    border:1px solid var(--deux);
    resize: vertical;
}

.form-card textarea{
    min-height: 4.5em;
}

.form-card button{
    text-align: center;
    margin-top: 2em;
    background-color: var(--un);
    color:var(--trois);
    padding:0.7em;
    font-size:1em;
    border: 1px solid var(--trois);
    cursor: pointer;
}

.form-card button:hover{
    background-color: var(--deux);
    color:var(--quatre);
}






.contact-card{
    display: grid;

    gap:1.5em;
}

.contact-card-one,.social-card{
    background-color: whitesmoke;
    padding:1em;
    border-radius: 10px;
}

.contact-card-one:hover,.social-card:hover{
    box-shadow: 1px 1px 4px var(--trois);
}

.contact-card-one h3,.social-card h3{
    text-align: center;
    
}
.contact-card-one hr,.social-card hr{

    width:75%;
    margin:20px auto;
    margin-top:-5px;
    height:2px;
    background-color: var(--un);
}

.contact-card-group{
    margin-top:2em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:1em;
}

#hero-toiture{
    display:flex;
    flex-direction: column;
    text-align: center;
    margin-top:3em;
    color:var(--trois);
    height:100%;
    width:100%;
     
    
    background: linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.73)), url("img/fond.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    
}

#hero-toiture-card{
    color:var(--un);
    background-color: var(--trois);
    margin:4em auto;
    font-size:1.25em;
    font-weight:300;
    margin-right:2em;
    margin-left:2em;
    padding:1em;

}

#services-contact{
    height:10em;
    
}

#services-contact h2{
    margin-top:2.5em;
}


.grille-exemple{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap:15px;
    margin:20px 0;
}

.grille-exemple img{
    width: 100%;
    height:200px;
    object-fit:cover;
    border-radius: 10px;
    cursor:pointer;
    transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.grille-exemple img:hover{

    transform: scale(1.10);
    box-shadow:0 10px 25px var(--un);
}
#hero-toiture-card-two{
    background-color: var(--un);
    color:var(--trois)
}



strong{

    font-weight: 550;

}

.assurance{
    background-color: var(--un);
    color:var(--trois);
    font-size:1em;
    margin-top: 1em;
    text-align: center;
    padding:1em 0;
}


.assurance img{
    width:1.5em;
    height:1.5em;
    display: block;
    margin:0 auto;
}

#localisation{
    display:grid;
    grid-template-rows: 1fr 1fr;
    background-color: var(--un);

}

#carte img{
    margin-top: -3em;
    width:100%;
}


#info-carte{
    text-align: center;
    margin-top:-1em;
    font-size:1.5em;
    color:var(--trois);
    margin-left:1em;
}

#info-carte ul{
    text-decoration: none;
    list-style:square;

}

@media (min-width:768px){
    .header-navbar-pc{
        display: flex;
        align-items: center;
    }
    .header-navbar-pc ul{
        list-style: none;
        margin-left:2em;
    }

    .header-navbar-pc li{
        font-size:1em;
        margin-right: 1.5em;
        margin-left: 1.5em;    
        display: inline-block;
        cursor:pointer
    }
    .header-navbar-pc li:hover{
        color:var(--deux);
    }
    header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height:5em;
        justify-content: center;
        
    }
    header a{
        color:inherit;

    }
    header img{
        position: absolute;
        left:3em;
        height: 75px;
        width:auto;
        
    }

    

    #hero{
        height:60em;
    }

    #hero h1{
        font-size:4.5em;
    }
    #hero h3{
        font-size:2.5em;
    }
    #hero h4{
        margin-top: 0.10em;
        font-size:2em;
    }
    #services,#services-contact{
        height:10em;
    }
    #services h2,#services-contact h2{
        margin-top:2.5em;
    }
    #liste-services p{
        font-size:1.3em;
        margin-right:2em;
        margin-left:2em;
    }
    #contact{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .contact-card{
        display: grid;
        grid-template-columns: 1fr;
    }
    .contact-card-group{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap:1em;
    }
    .assurance{
        background-color: var(--un);
        color:var(--trois);
        font-size:1.5em;
        margin-bottom: 1em;
        text-align: center;
    }

    .assurance img{
        width:2em;
        height:2em;
    }
    #localisation{
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        background-color: var(--un);
        margin-bottom: -70em;
    }

    #carte{
    }

    #carte img{
        width:100%;
   
    }


    #info-carte{
        margin-top:3em;
        
        font-size:1.5em;
        color:var(--trois);
        margin-left:1em;
    }
    #info-carte h4{
        margin-top: 7em;;
    }

    #info-carte li{
        margin-top:0.6em;
    }

}