/* START HERO */
.hero {
    min-height: auto;
    height: auto;
    display: flex;
    align-items: flex-end;
}

.hero .uniformSpacing .introText {
    position: relative;
    z-index: 1;
    width: 50%;
    gap: 2.5em;
}

.hero .uniformSpacing .introText .descLink {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    width: 70%;
}

.hero .uniformSpacing .introText .listing{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.hero .uniformSpacing .introText .listing .element{
    width: calc((100% - 3em * 2 ) / 3);
    display: flex;
    gap: .5em;
    align-items: center;
}

.hero .uniformSpacing .introText .listing .element span svg{
    display: flex;
}

.hero .uniformSpacing .introText .listing .element span svg{
    width: 2em;
    height: auto;
}

.hero .uniformSpacing .bgImg_hero {
    height: auto;
    width: 55%;
    position: absolute;
    bottom: 0;
    right: 0;
}

@media screen and (max-width: 1400px) {
    .hero .uniformSpacing .introText .listing{
        gap: 1em;
    }

    .hero .uniformSpacing .introText .listing .element{
        width: 100%;
    }
}

@media screen and (max-width: 1000px) {
    .hero{
        padding: 0;
    }

    .hero .uniformSpacing {
        gap: 0;
    }

    .hero .uniformSpacing .introText {
        width: 100%;
        padding: calc(var(--defaultSpacing) / 2) var(--defaultSpacing);
    }

    .hero .uniformSpacing .bgImg_hero {
        width: 100%;
        height: auto;
        opacity: .3;
    }
}

@media screen and (max-width: 700px) {
    .hero .uniformSpacing .introText {
        padding: var(--defaultSpacing) calc(var(--defaultSpacing) / 2)
    }
    .hero .uniformSpacing .introText .descLink{
        width: 100%;
    }
}
/* END hero */


/* START bigImgText */
.bigImgText .uniformSpacing .introText{
    width: 40%;
}


.bigImgText .uniformSpacing .introText .checkList{
    display: flex;
    flex-direction: column;
    gap: .25em;
}

.bigImgText .uniformSpacing .introText .checkList .element{
    display: flex;
    gap: .5em;
}

.bigImgText .uniformSpacing .introText .checkList .element svg{
    height: 1.5em;
    width: 1.5em;
}

.bigImgText .uniformSpacing .imgContainer{
    width: 60%;
    padding: 2em 2.5em;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: auto;
    aspect-ratio: 16/9;
}

.bigImgText .uniformSpacing .imgContainer > div{
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 2.5em;
    width: 45%;
    bottom: 2em;
    right: 2.5em;
}

.bigImgText .uniformSpacing .imgContainer > div svg{
    width: 1.5em;
    height: auto;
}

.bigImgText .uniformSpacing .imgContainer > div hr{
    width: 3em;
    height: auto;
}

@media screen and (max-width: 1500px) {
    .bigImgText .uniformSpacing .imgContainer > div{
        width: 100%;
    }
}

@media screen and (max-width: 1000px) {
    .bigImgText .uniformSpacing{
        flex-direction: column;
    }

    .bigImgText .uniformSpacing .introText,
    .bigImgText .uniformSpacing .imgContainer{
        width: 100%;
    }
}


/* END bigImgText */

/* START questionReponse */
.questionReponse .uniformSpacing {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
}

.questionReponse .uniformSpacing .introText {
    display: flex;
    flex-direction: row;
    gap: 2.5em;
}

.questionReponse .uniformSpacing .introText > * {
    width: 50%;
}

.questionReponse .uniformSpacing .wrapper {
    display: flex;
    gap: 2.5em;
    align-items: flex-start;
}

.questionReponse .uniformSpacing .wrapper .liste {
    display: flex;
    flex-direction: column;
    border: 1px solid #B7B7B7;
    width: 50%;
    height: fit-content;
}

.questionReponse .uniformSpacing .wrapper img {
    width: 50%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.questionReponse .uniformSpacing .wrapper .liste .element {
    padding: 1.5em;
    border-bottom: 1px solid #B7B7B7;
    cursor: pointer;
}

.questionReponse .uniformSpacing .wrapper .liste .element:last-child {
    border-bottom: none;
}

.questionReponse .uniformSpacing .wrapper .liste .element .question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}

.questionReponse .uniformSpacing .wrapper .liste .element .question .iconeContainer {
    width: 2.25em;
    min-width: 2.25em;
    height: 2.25em;
    border-radius: 100%;

}

.questionReponse .uniformSpacing .wrapper .liste .element .question .iconeContainer span {
    display: flex;
    width: 100%;
    height: 100%;
}

.questionReponse .uniformSpacing .wrapper .liste .element .question .iconeContainer svg {
    padding: .5em;
    width: 100%;
    height: 100%;
    transition: ease all .5s;
}

.questionReponse .uniformSpacing .wrapper .liste .element .question .iconeContainer .anime svg {
    background-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

.questionReponse .uniformSpacing .wrapper .liste .element.open{
    background-color: #C8DDF333;
}

.questionReponse .uniformSpacing .wrapper .liste .element.open .question .iconeContainer .anime svg {
    transform: translate(-50%, -50%) rotate(0);
}

.questionReponse .uniformSpacing .wrapper .liste .element.open .question .iconeContainer span:not(.anime) svg {
    transform: rotate(-180deg);
}

.questionReponse .uniformSpacing .wrapper .liste .element .reponse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

.questionReponse .uniformSpacing .wrapper .liste .element .reponse > p {
    overflow: hidden;
    margin: 0;
    transition: ease all .3s;
}

.questionReponse .uniformSpacing .wrapper .liste .element.open .reponse ,
#editor .questionReponse .uniformSpacing .wrapper .liste .element .reponse {
    grid-template-rows: 1fr;
}

.questionReponse .uniformSpacing .wrapper .liste .element.open .reponse > p,
#editor .questionReponse .uniformSpacing .wrapper .liste .element .reponse > p{

    padding-top: 1em;
}


@media screen and (max-width: 1000px) {
    .questionReponse .uniformSpacing .introText,
    .questionReponse .uniformSpacing .wrapper{
        flex-direction: column;
    }

    .questionReponse .uniformSpacing .introText > *,
    .questionReponse .uniformSpacing .wrapper .liste,
    .questionReponse .uniformSpacing .wrapper .imgContainer {
        width: 100%;
    }

    .questionReponse .uniformSpacing .wrapper .imgContainer{
        height: auto;
        aspect-ratio: 16/9;
    }

}

/* END questionReponse */

/* START contactList */
.contactList .uniformSpacing{
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
}

.contactList .uniformSpacing .element{
    width: calc((100% - 3em * 3) / 4);
    display: flex;
    gap: 1em;
}

.contactList .uniformSpacing .element .containerSvg{
    width: 5em;
    min-width: 5em;
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: 2px solid var(--basicColor1);
    padding: 1.5em;
}

.contactList .uniformSpacing .element .containerSvg span{
    display: flex;
}

.contactList .uniformSpacing .element .containerSvg span svg{
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1600px) {
    .contactList .uniformSpacing{
        gap: 1em;
    }

    .contactList .uniformSpacing .element {
        width: calc((100% - 1em * 3) / 4);
    }
}

@media screen and (max-width: 1500px) {
    .contactList .uniformSpacing{
        gap: 1em;
    }

    .contactList .uniformSpacing .element {
        width: calc((100% - 1em) / 2);
    }
}

@media screen and (max-width: 900px) {
    .contactList .uniformSpacing .element {
        width: 100%;
    }
}


/* END contactList */