/* Affichage global */
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


body > main {
    padding-top: 50px;
}



.btn-croix {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: flex-end;
}

.closeBtn {
    position: relative;
    right: 30px;
}

.closeBtn > img {
    width: 50px;
}


/* Mise en page du header */
header {
    width: 100%;
    height: 80px;
    background-color:  black;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
}

header .logo {
    width: 160px;
    margin: 70px;
}

header .house {
    width: 50px;
    margin: 130px;
}

h1 {
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    margin: 0 280px 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
}




/* mise en page du contenu */
.subTitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.subTitle img {
    width: 22vw;
    margin: 50px 0 15px 0;
}

/* Texte */
main .subTitle div p {
    display: inline-block;
    
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 2vw;
    margin: 0 0 25px 0;
}

main .subTitle div p:nth-child(0n+1) {
    color: #F18E04;
}


.cases {
    display: flex;
    justify-content: space-evenly;
}

.cases div {
    width: 24vw;
    height: 47vh;
    border: 1.5px solid #F18E04;
    border-radius: 40px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 27px;
}

.cases img {
    margin: -40px 20px 0 20px;
}

#svg1 {
    width: 12vw;
    padding-bottom: 2vh;
}


#svg2 {
    width: 11vw;
    padding: 20px 0 3.5vh 0;
}


#svg3 {
    width: 15vw;
    padding: 0 0 -2vh 0;
}

.cases div p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2vw;
    color: black;
    text-align: center;
    padding: 0 5px 0 5px;
    margin: 0 0 70px 0;
}

.cases div p:nth-child(even) {
    font-family: 'Roboto condensed', sans-serif;
    text-transform: uppercase; 
    color: #F18E04;
    font-weight: 700;
    font-size: 1.6vw;
    margin: 10px 0 10px 0;
}

span {
    width: 120px;
    height: 8px;
    background-color: #F18E04;
    border-radius: 10px;
}

.text-noir {
    color: black;
    background-color:unset;
    border: none;
}

.titre-leads-habit {
    padding: 140px 0 0px 0;
}

.images-form {
    display: flex;
    justify-content: space-evenly;
    height: 100%;
}

.images-form-last {
    display: flex;
    justify-content: center !important;
}

.images-form-last > div > img {
    width: 36vw;
    border: 1px solid black;
    border-radius: 40px;
    max-width: 610px;
}

.images-form > div > img {
    width: 30.6vw;
    max-width: 630px;
}

.text-bas {
    margin: 80px 0 0 0;
}

.images-form-last > div:nth-child(2) > img:nth-child(1) {
    margin: 0 0px 0 20px;
}
   

.images-form-last > div:nth-child(1) > img:nth-child(1) {
margin: 0 20px 0 0;
}




@media screen and (max-height:890px) and (max-width:1490px) {
    
    .cases div {
        height: 330px;
    }
    
    #svg3 {
        width: 10vw;
        padding: 0 0 -2vh 0;
        max-width: 220px;
    }

    #svg2 {
        width: 8vw;
        padding: 20px 0 3.5vh 0;
        max-width: 160px;
    }

}

@media screen and (max-height:890px) {

    body {
        overflow-x: hidden;
        overflow-y: scroll !important;
    }

}


@media screen and (max-width:1630px), (max-height:1045px) {

    #svg2 {
        width: 11vw;
        padding: 20px 0 3.5vh 0;
        max-width: 130px;
    }

    #svg3 {
        width: 17vw;
        padding: 0 0 -2vh 0;
        max-width: 170px;
    }

    .cases div p:nth-child(even) {
        font-size: 1.4vw;
    }

    .cases div p {
        font-size: 1vw;
        margin: 0 0 40px 0;
    }
    
}