/* START hero */
.hero {
    display: flex;
    align-items: center;
    min-height: 60vh;
    height: auto;
}

.hero .uniformSpacing {
    width: 100%;
}

.hero .stars{
    position: absolute;
    bottom: 2.5em;
    right: 5em;
    z-index: 9;
    display: flex;
}


@media screen and (max-width: 1100px) {
    .hero .stars{
        opacity: .5;
    }

}

/* END hero */


/* START imgText */
.imgText .uniformSpacing{
    display: flex;
    gap: 2.5em;
}

.imgText .uniformSpacing > div {
    width: 50%;
}

.imgText.bigtext .uniformSpacing .introText{
    width: 70%;
    padding: 1.5em;
}

.imgText.bigtext .uniformSpacing .imgContainer{
    width: 30%;
}

.imgText.bigtext .uniformSpacing .introText > *{
    position: relative;
    z-index: 1;
}

.imgText.bigtext .uniformSpacing .introText.bgLightBlue {
    background-color: rgb(200 221 243 / 0.2);
}

.imgText.bigtext .uniformSpacing .introText .bgSvg{
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    max-height: 100%;
}

.imgText.bigtext .uniformSpacing .introText .bgSvg svg{
    width: 100%;
    height: auto;

}

.imgText.svgContainer .uniformSpacing .containerImg span {
    display: flex;
    width: 100%;
}

.imgText.svgContainer .uniformSpacing .containerImg svg {
    width: 100%;
    height: auto;
}



@keyframes circleAnim {
    from {
        opacity: 1;
        r: 1
    }
    to {
        opacity: 0;
        r: 100
    }
}

.imgText.svgContainer .uniformSpacing .containerImg svg #Ellipse_9,
.imgText.svgContainer .uniformSpacing .containerImg svg #Ellipse_8,
.imgText.svgContainer .uniformSpacing .containerImg svg #Ellipse_7{
    opacity: 0;
    r: 0;
    animation-name: circleAnim;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

.imgText.svgContainer .uniformSpacing .containerImg svg #Ellipse_9 {
    animation-delay: 1s
}

.imgText.svgContainer .uniformSpacing .containerImg svg #Ellipse_8 {
    animation-delay: 2s
}

.imgText.svgContainer .uniformSpacing .containerImg svg #Ellipse_7 {
    animation-delay: 3s
}

.imgText .bgSvg{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: auto;
    display: flex;
}

.imgText .bgSvg svg{
    width: 100%;
    height: auto;
}

.imgText.bigImg .uniformSpacing .introText .bgSvg svg {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1100px) {
    .intro .uniformSpacing .introText,
    .imgText.bigImg .uniformSpacing,
    .imgText .uniformSpacing {
        flex-direction: column;
    }

    .intro .uniformSpacing .introText div,
    .intro .uniformSpacing .introText p,
    .imgText.bigImg .uniformSpacing .imgContainer,
    .imgText.bigImg .uniformSpacing .introText,
    .imgText .uniformSpacing > div,
    .imgText.bigtext .uniformSpacing .imgContainer,
    .imgText.bigtext .uniformSpacing .introText.bgLightBlue{
        width: 100%;
    }

    .imgText.bigImg .uniformSpacing .imgContainer,
    .imgText.bigtext .uniformSpacing .imgContainer{
        height: auto;
        aspect-ratio: 16/9;
    }

}

/* END imgText */

/* START listingPrestation */
.listingPrestation .uniformSpacing{
    display: flex;
    gap: 2.5em;
    align-items: flex-start;
}

.listingPrestation .uniformSpacing > div{
    width: 50%;
}

.listingPrestation .uniformSpacing .introText{
    gap: 2.5em;
}

.listingPrestation .uniformSpacing .introText img{
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.listingPrestation .uniformSpacing .introText .timeText{
    line-height: 1;
}


.listingPrestation .uniformSpacing .introText .link{
    display: flex;
    flex-direction: column;
    gap: 1em;
}


.listingPrestation .uniformSpacing .listing{
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.listingPrestation .uniformSpacing .listing .element{
    display: flex;
    gap: 1.5em;
    align-items: center;
    position: relative;
    z-index: 1;
}

.listingPrestation .uniformSpacing .listing .element svg{
    width: 2.5em;
    height: 2.5em;
    min-height: 2.5em;
    min-width: 2.5em;
}

.listingPrestation .uniformSpacing .listing .element svg circle{
    fill: var(--basicColor2);
}


.listingPrestation .uniformSpacing .listing .element div{
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.listingPrestation .uniformSpacing .listing .line{
    position: absolute;
    left: calc(1.25em - 1px);
    top: 0;
    height: 100%;
    width: 1px;
    background-color: #707070;
    z-index: 0;
}

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

    .listingPrestation .uniformSpacing > div{
        width: 100%;
    }

    .listingPrestation .uniformSpacing .introText{
        gap: 1em;
    }
}


/* END listingPrestation */

/* 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;
}

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

.questionReponse .uniformSpacing .wrapper .imgContainer {
    width: 50%;
}

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

.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: 2em;
}


.questionReponse .uniformSpacing .wrapper .liste .element .question h4 {
    font-weight: bold;
    font-size: 1em;
}

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

.questionReponse .uniformSpacing .wrapper .liste .element .question .iconeContainer {
    cursor: pointer;
}

.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: ease all .3s;
}

.questionReponse .uniformSpacing .wrapper .liste .element .reponse > p {
    overflow: hidden;
    margin: 0;
}

.questionReponse .uniformSpacing .wrapper .liste .element.open .reponse,
body#editor .questionReponse .uniformSpacing .wrapper .liste .element .reponse {
    grid-template-rows: 1fr;
    padding-top: 1.5em;

}

@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 */