.image-top>div>img
/*

    Fichier de style pour la page d'accueil

*/





.image-top{

    height: 650px;

    width: 100%;

    position: relative;

}

.image-top:after{

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.83) 66.5%);


}

.image-top>div> picture img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    height: 650px;

}

.image-top>div>div{

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 85%;

    height: 100%;

    display: flex;

    align-items: start;

    justify-content: center;

    flex-direction: column;

    gap: 24px;

    color: white;

    z-index: 9;

}

.image-top>div>div>h1{

  font-family: 'Outfit';

    font-weight: 400;

    line-height: 49.92px;

    letter-spacing: -0.02em;

}

.image-top>div>div>h1>span{

    color: var(--blanc);

    font-size: 67px;

    font-weight: 600;

    line-height: 70px;

    letter-spacing: -0.02em;

    text-align: left;

}

.image-top p{

    color: var(--blanc);

}

.intro_service{

    text-align: center;

    margin-top: 3rem;

}



h2{

  font-family: 'Outfit';

    font-weight: 900;

    font-size: 30px;

    line-height: 33px;

    letter-spacing: -0.02em;

    text-align: center;


}

h2>span{

    font-weight: 900;

    color: var(--bleu-logo);

}

.intro_service>div>p{

    line-height: 24px;

    text-align: center;

}

.ctn-tit{

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-direction: row;

    flex-wrap: wrap;

}

.ctn-tit > img{

    width: 20%;

    max-width: 74px;

    max-height: 74px;

}

.ctn-tit>div{

    width: 80%;

}

h3{

    color: var(--bleu-logo);

  font-family: 'Outfit';

    font-weight: 700;

    font-size: 32px;

    line-height: 38.4px;

    letter-spacing: 0.02em;

}

.service:nth-child(2) h3, .service:nth-child(2) h4{

    color: var(--orange);

}

.service:nth-child(3) h3, .service:nth-child(3) h4{

    color: var(--vert-logo);

}

.cont-tit{

    display: flex;

    flex-direction: column;

    gap: 10px;

    width: 82%;

    margin: 0 auto;

}

.cont-tit h4{

    text-align: left;

}

h4{

  font-family: 'Outfit';

    font-weight: 600;

    font-size: 24px;

    line-height: 33.6px;

    color: var(--bleu-h4);

}

.cont-tit p{

    text-align: left;

}

.presentation{

    width: 85%;

    margin: 0 auto;

}

.service > img{

    border-radius: 8px;

}

.container-service, .service, .parti-text-service{

    display: flex;

    row-gap: 40px;

    flex-wrap: wrap;

    flex-direction: column;

}

.parti-text-service{

    row-gap: 24px;

}

.service{

    row-gap: 32px;

}



.expertises{

    background-color: var(--bleu-biz);

    padding: 180px 16px 200px 16px;

}



h2.span-orange>span{

    color: #000000;

}

h2.span-orange{

    color: var(--blanc);

    text-align: left;

}

.expertises>div>div p {

    color: var(--blanc);

    line-height: 19.2px;

}

.expertises>div>div>div{

    margin-bottom: 1.5rem;

}

.equipe{

    padding: 64px 32px 64px 32px;

}	

.equipe>div{

    display: flex;

    flex-direction: column;

    row-gap: 40px;

}

.equipe>div>div{

    width: 66%;

    margin: 0 auto;    

}

.equipe>div>div{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    row-gap: 32px;

}

.equipe>div>div>div{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    row-gap: 6px;

}

.equipe p {

    text-align: center;

    margin: 0;

}

.equipe p:nth-child(2), .equipe p:nth-child(3){

  font-family: 'Outfit';

    font-size: 20px;

    font-weight: 500;

    line-height: 24px;

    letter-spacing: 0em;

    text-align: center;

    color: var(--noir);

}

.equipe p:nth-child(3){

    color: var(--bleu-logo);

}

.equipe p:nth-child(4){

    line-height: 19.2px;

    color: var(--noir);

}

.competences{

    padding: 85px 16px 85px 16px;

    background-color: var(--bleu-biz);

}

.competences>div{

    display: flex;

    flex-direction: column;

    row-gap: 32px;

}   

.competences>div>div:nth-child(1){

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}   

.competences>div>div>div{

    display: flex;

    flex-direction: column;

    row-gap: 8px;

}

.competences p{

    color: var(--blanc);

    line-height: 19.2px;

}

.competences>div>div>div:nth-child(1){

    margin-bottom: 1.5rem;

}

.expertise img,
.competences img{

    border-radius: 8px;

}



.competences h3, .expertise h3{

    color: var(--blanc);

}



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

    .presentation{

        margin-top: 3rem;

    }

    .image-top>div>div{

        width: 45%;

        left: 10%;

        max-width: 555px;

        transform: translateX(-10%);

    }

    .service{

        flex-direction: row;

        justify-content: space-between;

    }

    .parti-text-service{

        width: 48%;

    }

    .service > img{

        width: 48%;

        object-fit: cover;

    }

    .service:nth-child(even){

        flex-direction: row-reverse;

    }

    .intro_service, .service{

        margin-bottom: 40px;

    }

    .expertises, .competences{

        position: relative;

        background-color: unset;

    }

    .expertises::after, .competences::after{

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: var(--bleu-biz);

        z-index: -1;

        transform: matrix(1, 0.71, -15, 1, 0, 0);

    }

    .expertise>div{

        flex-direction: row;

        justify-content: space-between;

        align-items: center;

    }

    .expertise>div>img, .expertise>div>div{

        max-width: 48%;

    }

    .equipe>div>div>div{

        max-width: 243px;

    }

    .equipe>div>div {

        flex-direction: row;

        column-gap: 32px;

    }

    .conteneur-image-par-quattre, .competences>div>div:nth-child(1){

        max-width: 48%;

    }

    .competences>div {

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: space-between;

        align-items: center;

    }

    .competences::after{

        transform: matrix(1, 0.632, 15, 1, 0, 0);

    }

    .conteneur-image-par-quattre{

        max-height: 527px;

        max-width: 412px;

        margin: 0 auto;

    }

    .conteneur-image-par-quattre>img {

        max-height: 226px;

        max-width: 197px;

        object-fit: cover;

    }

    .competences, .expertises{

        overflow: hidden;

    }

    .expertise>div>img,
    .competences div>img{

        width: 100%;

        max-height: 477px;

        object-fit: cover;

    }

    .presentation > div, .aussi>div, .expertise>div, .equipe>div, .competences>div{

        max-width: 1350px;

        margin: 0 auto;

    }

    .intro_service div{

        margin-bottom: 2rem;

    }

}



@media screen and (min-width:1440px){

    .expertises::after{

        transform: matrix(1, 0.41, -15, 1, 0, 0);

    }

    .competences::after {

        transform: matrix(1, 0.42, 20, 1, 0, 0);

    }

    .image-top>div>div {

        width: 45%;

        left: 16%;

        transform: translateX(-16%);

    }

    .cont-tit{

        flex-direction: row;

        width: 80%;

        flex-wrap: wrap;

        justify-content: space-between;

        margin-left: 20%;

    }

    .cont-tit>div{

        max-width: 250px;

    }

    .service:nth-child(2) .cont-tit>div:last-child{

        max-width: 100%;

    }

    

    .service:nth-child(1)>div>div.cont-tit>div{

        max-width: 100%;

    }

}

@media screen and (min-width:1920px) {

    .competences::after {

        transform: matrix(1, 0.34, 20, 1, 0, 0);

    }

    .expertise::after {

        transform: matrix(1, 0.31, -20, 1, 0, 0);

    }

    .image-top>div>div{

        width: 45%;

        left: 22%;

        transform: translateX(-22%);

    }

}

.btn-custom a {
    display:inline-block
}


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

.image-top>div>div>h1 {
       font-size: 30px;
       line-height:normal
}

.image-top>div>div>h1>span {
    font-size:40px;
        line-height: 30px;
}
   } 


.header-home-center .link-location {
    min-height: 315px;
    border-radius: 20px 20px 20px 20px;
}

.header-home-center .link-vente {
     min-height: 425px;
    border-radius: 20px 20px 20px 20px;
}