/* Lien CDN */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nanum+Gothic&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Mooli&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*, ::before, ::after

{

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html

{

    font-size: 62.5%;

}

body

{

    height: 100%;

    width: 100%;

    font-size: 2rem;
    font-family: 'Roboto', sans-serif;

}

a

{

    text-decoration: none;
    color: #000;

}

li

{

    list-style: none;

}

button

{

    cursor: pointer;
    border: none;
    background: none;

}

input

{

    outline: none;

    border: none;

}

/*  */


/* style header */


header
{
    position: relative;
    border-bottom: 0.4rem solid #FF8300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15%;
    height: 9rem;
    padding: 0 3rem;
    transition: all 0.3s;
}

header button#menu{
    height: 3rem;
    width: 3rem;
    border: 1px solid #9e9e9e;
    border-radius: 0.2rem;
    display: none;
}

header #logo{
    /* border: 1px solid #ff0000; */
    height: 4rem;
    width: 12.5rem;
    position: absolute;
    left: 3rem;
    background: url('../images/logo.png') no-repeat;
    background-size: cover;

}

header #login{
    /* border: 1px solid #FF8300; */
    height: 100%;
    width: fit-content;
    display: flex;
    align-content: end;
    gap: 2rem;
    align-items: center;
    position: absolute;
    right: 3rem;
}

header #login a.rgs{
    border: 1px solid #FF8300;
    border-radius: 0.5rem;
    height: fit-content;
    width: fit-content;
    padding: 1rem;
    transition: all 0.2s;
    font-weight: bold;
    color: #FF8300;
    font-size: 1.5rem;
}

header #login a.rgs:hover{
    background-color: #FF8300;
    color: white;
}

header #login a.register{
    background-color: #FF8300;
    color: white;
}

header #login a.register:hover{
    background-color: white;
    color: #FF8300;

}


/* Style nav bar */

header nav{
    display: flex;
    height: 100%;
    width: 30rem;
}

header nav ul{
    /* border: 1px solid #000; */
    height: 100%;
    width: 100%;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

header nav ul li{
    display: flex;
}

header nav ul li a{
    display: flex;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    width: 15rem;
}

header nav ul li a{
    display: flex;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

header nav ul li a:hover{
    color: #FF8300;
}


/* Style banniere */

section#banniere{
    transition: all 3.0s;
    height: 55rem;
    width: 100%;
    /* border: 1px solid #a7a1a1; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color: #524343; */
    gap: 3rem;
    /* background: url('../images/banniere.jpeg') no-repeat; */
    background: linear-gradient(#0f0601a8, #a7896656), url('../images/banniere.jpeg') center no-repeat fixed;
    background-size: cover;
}

#banniere p{
    font-size: 5.5rem;
    color: #fff;
    width: 65%;
    text-align: center;
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
    cursor: default;
}

#banniere #search_box{
    z-index: 2;
    overflow: hidden;
    position: relative;
    width: 35rem;
    height: 5rem;
    border-radius: 5rem;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    /* background-color: #00000071; */

}

#banniere #search_box::before {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    background-color: #00000071;
    border-radius: 5rem;
  }
  
  #banniere #search_box:hover::before {
    width: 100%;
  }

#search_box input{
    height: 100%;
    width: 85%;
    background-color: transparent;
    padding: 2rem;
    color: #fff;
    font-size: 2.5rem;
}

#search_box button{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    width: 4rem;
    /* border: 1px solid #000; */
    border-radius: 50%;
    position: absolute;
    right: 0.5rem;
    background-color: #FF8300;
    transition: all 0.2s;
}

#search_box button:hover{
    transform: scale(1.2);
    background-color: #e07401;
}

#search_box button::after{
    position: absolute;
    content: "";
    height: 90%;
    width: 90%;
    background: url('../images/icons/search.svg') no-repeat;
    background-size: cover;
}

#search_box input::placeholder{
    font-size: 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    
}




/* #######################    @service    ####################### */

h2.titre{
    position: relative;
    margin: 3.5rem auto;
    padding: 3rem;
    display: flex;
    justify-content: start;
    align-items: center;
    font-family: "Comfortaa", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 2.8rem;
    color: #572d00;
    width: 75rem;
    cursor: default;
}

h2.titre::before{
    position: absolute;
    content: '';
    left: 3rem;
    height: 0.5rem;
    width: 25%;
    background-color: #c46806;
    bottom: 2rem;
}

#service{
    display: flex;
    padding: 4rem;
    grid-gap: 5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, 35rem);
    justify-content: center;
    background-color: #6d655313;
}

#service .card{
    position: relative;
    height: 40rem;
    width: 35rem;
    border: 1px solid #9a97a873;
    border-radius: 2rem;
    box-shadow: 0 0 0.3rem 0.2rem #25252523;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 0.3s;
}

#service .card .view_more{
    position: absolute;
    top: 25%;
    transform: translateY(-20rem);
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 0.7rem;
    border: 1px solid #ffffff9d;
    border-radius: 5rem;
    background-color: #c468068f;
    color: #ffffffbb;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.6rem;
}

#service .card:hover .view_more{
    transform: translateY(0);
}

#service .card .view_more:hover {
    transform: scale(0.9);
    background-color: #c46806;
}

#service div.card > div {
    height: 50%;
    width: 100%;
    /* border: 1px solid #000000; */
    background-color: #ffffff;
}


#service div.card div.img{
    height: 60%;
    padding: 0.5rem;
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    overflow: hidden;
}

#service div.card div.text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.3rem 0.3rem 0 0.3rem;
}

.card img {
    height: 100%;
    width: 100%;
    object-fit: cover;

}
.title-price {
    /* border: 1px solid #d34242; */
    height: 20%;
    width: 100%;
    display: flex;
    color: rgb(15, 1, 24);
    justify-content: space-between;
    padding: 0.8rem 1rem;
    font-size: 1.6rem;
    align-items: center;
    /* padding: 0 1.5rem; */
}
.title-price h1 {

    font-family: "Mooli", sans-serif;
    font-weight: 500;
    font-size: 2rem;
    font-style: normal;
    color: #e07401;
    display: inline-block;
    max-width: 15ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;


}

.title-price span {
    padding: 0.6rem;
    border-radius: 1rem;
    background-color: #cf700b27;
    color: #201101a1;
    font-weight: bold;

}

p.description {
    height: 45%;
    padding: 0.8rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    font-style: normal;
    color: #464747;
}
.entreprise {
    /* border: 1px solid #000; */
    width: 100%;
    height: 22%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
}

.entreprise strong{
    position: relative;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.6rem;
    padding-left: 3rem;
}

.entreprise strong::before{
    position: absolute;
    left: 0;
    content: "";
    height: 2.5rem;
    width: 2.5rem;
    background: url('../images/icons/apartment.svg') no-repeat;
    background-size: cover;
}

.entreprise span{
    position: relative;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.4rem;
    color: #464747;
    padding-left: 3rem;

}

.entreprise span::before{
    position: absolute;
    left: 0;
    content: "";
    height: 2.5rem;
    width: 2.5rem;
    background: url('../images/icons/location.svg') no-repeat;
    background-size: cover;
}


/* #######################    @service    ####################### */

#valeur_ajoutee{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem;
    grid-gap: 5rem;
    height: 40rem;
    background-color: #6b5147;
}

#valeur_ajoutee p{
    font-weight: 300;
    color: #fff;
    font-family: "Poppins", serif;
    width: 60%;
}


#valeur_ajoutee div{
    height: 45rem;
    width: 50rem;
    overflow: hidden;
    border-radius: 2rem;
}

#valeur_ajoutee div img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
 





/* #######################  section @artisan    ####################### */



#artisans{
    display: flex;
    padding: 4rem;
    grid-gap: 5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, 28rem);
    justify-content: center;
    background-color: #24455f3d;
}

#artisans .card2{
    position: relative;
    height: 28rem;
    width: 28rem;
    background-color: #fff;
    box-shadow: 0 0 0.3rem 0.2rem #25252523;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2.5rem;
    transition: all 0.3s;
}

#artisans .card2 div.photo{
    height: 40%;
    width: 40%;
    /* box-shadow: 0 0 0.5rem 0.6rem #696b6b5b; */
    border-radius: 50%;
    overflow: hidden;
}

#artisans .card2 div.photo img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#artisans .card2 .info{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-transform: capitalize;
}

#artisans .card2 .info p{
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #4a505a;
    /* border: 1px solid #000; */
}

#artisans .card2 .info p.metier{
font-weight: bold;
color: #FF8300;
}

#artisans .card2 .info p.tel{
    font-weight: bold;
    color: #FF8300;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.7rem;
}

#artisans .card2 .info p.tel span{
    transform: translateY(0.8rem);
}

#artisans .card2 .info p.tel em{
    color: #7e3d08;
}


#artisans .card2 .info h3.name{
    transform: translateY(-1rem);
    font-weight: 400;
    font-family: 'Poppins', serif;
    color: #32373d;
}














footer{
    font-family: "Libre Baskerville", serif;
    font-size: 1.5rem;
    padding: 3.5rem;
}

footer p{
    display: flex;
    justify-content: center;
    align-items: center;
}

footer .logo_v2{
    background: url('../images/logo_v2.png') no-repeat;
    background-size: cover;
}


footer .contacts{
    /* border: 1px solid #000; */
    width: 45%;
    margin: auto;
}
footer .contacts p{
    justify-content: end;
}

footer h4{
    color: #FF8300;
    font-size: 2.5rem;
    padding: 0.8rem;
}

footer .copy{
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    margin-top: 0.8rem;
}








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

    html{
        font-size: 55%;
    }

}



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

    html{
        font-size: 55%;
    }
   
    header
    {
        gap: 1.5rem;
    }

    #banniere p{
        font-size: 5rem;
    }


        /* Style nav bar */

    header nav{
        display: flex;
        height: 100%;
        width: 30rem;
    }

    header nav ul{

        gap: 0.5rem;
    }


    header nav ul li a{
        width: 13rem;
        font-size: 1.8rem;
    }


}


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

    html{
        font-size: 45%;
    }

    #banniere p{
        font-size: 4.5rem;
    }
    
    #valeur_ajoutee p{
        font-size: 1.8rem;
    }
    
    
    #valeur_ajoutee div{
        height: 35rem;
        width: 40rem;

    }

    footer > :first-child{
        flex-direction: column;
        align-items: center;
    }

}


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

    header nav{
        position: absolute;
        bottom: -28.3rem;
        height: fit-content;
        width: 100%;

    }
    header button#menu{
        display: block;
    }
    .menu_active
    {
        display: none;
    }
    header nav ul
    {
        flex-direction: column;
        display: block;
        gap: 0rem;
        height: 100%;
        padding: 2rem;
        width: 100%;
        backdrop-filter: blur(2px);
        border-bottom: #262f3575 solid 0.5rem;
        background: linear-gradient(to right, #25211c69, #44210481, #1d1100e1);

    }
    header nav ul li
    {
        border-bottom: 1px solid #c9dde427;
        height: 6rem;
        display: flex;
        align-items: center;
        width: 100%;
        color: #fff;
    }
}



@media screen and (max-width: 525px)
{
    #banniere p{
        font-size: 3rem;
    }

    #valeur_ajoutee{
        flex-direction: column;
        height: fit-content;
    }

    #valeur_ajoutee p{
        width: 95%;
    }
}

@media screen and (max-width: 460px)
{
    h2.titre{
        font-size: 1.8rem;
    }

    h2.titre::before{

        height: 0.3rem;
        width: 25%;
    }


}


@media screen and (max-width: 365px)
{
    header{
        flex-direction: column;
        padding: 2rem;
        height: fit-content;
    }
    header #logo{
        position: static;
    }
    
    header #login{
        position: relative;
        position: static;
        width: 100%;
        justify-content: end;
    }

    header #login #menu{
        position: absolute;
        left: 5%;
    }

}