/* /-----\ */
/* | FAQ | */
/* \-----/ */

.grfk-faq-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--mainColor1);
    margin: 0 var(--gaps1);
    padding: var(--gaps2) 10vw var(--gaps2) 10vw;
    gap: var(--gaps1);
}

.grfk-faq-container-question {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-radius: var(--borderRadius1);
    background-color: transparent;
    padding: var(--gaps05);
    /* background-color: var(--mainColor2); */
    transition: 0.5s;
}

.grfk-faq-container-question .title-line {
    margin: 0 var(--gaps05)
}

.grfk-faq-container-question:focus {
    background-color: transparent;
}

.grfk-faq-container-question:hover {
    background-color: var(--mainColor2);
}

.grfk-faq-question-titre {
    margin-right: auto;
    align-content: center;
    text-wrap: nowrap;
}

.grfk-faq-question-arrow {
    /* margin-left: auto; */
    min-height: 30px;
    height: 30px;
    min-width: 30px;
    width: 30px;
    justify-content: center;
    transform: rotate(180deg);
    background-color: var(--mainColor4);
    padding: 2px;
    border-radius: var(--borderRadius1);
    transition: 0.5s;
}

.grfk-faq-question-arrow-opened {
    transform: rotate(360deg);
}

/* .grfk-faq-response-closed {
    text-indent: 10%;
    padding: 0 var(--gaps1);
    height: 0px;
    overflow: hidden;
    transition: 0.5s;
} */

.grfk-faq-response {
    max-height: 0;
    overflow: hidden;
    text-indent: var(--gaps1);
    /* transition: 1s; */
}

.grfk-faq-response-opened {
    max-height: 500px;
}

























/*
.containerFAQ {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--mainColor1);
    margin: 0 var(--gaps1);
    padding: var(--gaps2) 10vw var(--gaps2) 10vw;
}

details {
    margin: 1em 0;
}


summary:focus, summary:active {
    background: var(--mainColor2);
}

details>p {
    background-color: var(--mainColor4);
    color: var(--mainColor2);
    padding: var(--padding1);
}

summary>h3 {
    align-self: center;
}

summary {
    background-color: var(--mainColor2);
    color: var(--mainColor4);
    padding: var(--padding1);
    display: flex;
    justify-content: space-between;
}

details summary {
    list-style: none;

    &::after {
        content: "^";
        color: var(--mainColor4);
        padding: var(--padding1);
    }

    [open] &::after {
        content: "v";
    }
}

*/