/* Composant FAQ / Accordion
============================================================ */
.faq {
    position: relative;
    width: 875px;
    max-width: 100%;
    margin: 120px auto;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.frontpage .faq {
    margin: 120px auto 280px auto;
}

.frontpage .faq::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1910.299" height="1308.225" viewBox="0 0 1910.299 1308.225"><defs><linearGradient id="linear-gradient" y1="0.556" x2="1" y2="0.607" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="%23b5ddd5"/><stop offset="1" stop-color="%232b3b52"/></linearGradient><linearGradient id="linear-gradient-2" x1="0.934" y1="0.381" x2="-0.066" y2="0.581" xlink:href="%23linear-gradient"/></defs><g id="Groupe_17" data-name="Groupe 17" transform="matrix(-0.998, 0.07, -0.07, -0.998, 1913.006, 1179.87)" style="isolation: isolate"><path id="Tracé_47" data-name="Tracé 47" d="M201.617,995.559c419.816,307.574,647.368-231,1095.341-69.614,520.834,187.63,519.41-319.89,365.438-523.87C1282.781-100.846,501.235-64.171,245.99,145.377s-374.742,608.141-44.373,850.183" transform="translate(87.882 0)" fill-rule="evenodd" fill="url(%23linear-gradient)"/><path id="Tracé_48" data-name="Tracé 48" d="M211.146,1042.61C650.8,1364.72,889.109,800.7,1358.253,969.705,1903.7,1166.2,1902.211,634.7,1740.962,421.077,1343.406-105.613,524.923-67.2,257.616,152.247s-392.453,636.882-46.47,890.363" transform="translate(0 38.815)" fill-rule="evenodd" fill="url(%23linear-gradient-2)"/><path id="Tracé_49" data-name="Tracé 49" d="M193.258,954.283c402.41,294.822,620.528-221.419,1049.928-66.728,499.24,179.851,497.875-306.627,350.287-502.15C1229.6-96.665,480.454-61.511,235.791,139.349s-359.205,582.928-42.533,814.934" transform="translate(72.765 99.782)" fill="%23f5f7f6" fill-rule="evenodd"/></g></svg>');
    position: absolute;
    z-index: -1;
    top: -450px;
    left: calc(50% - 200px);
    translate: -50% 0;
}

.faq .title {
    font-size: 3.25rem;
    font-weight: 400;
    margin-bottom: 20px;
    max-width: 625px;
}

.faq .subtitle {
    font-weight: 700;
    margin-bottom: 20px;
    max-width: 625px;
}

.faq .btn-primary {
    margin-bottom: 20px;
}

.accordion-wrapper {
    width: 100%;
}

.accordion-item {
    background-color: #fff;
    padding: 20px 40px;
    border-radius: 20px;
    width: 100%;
}

.accordion-item + .accordion-item {
    margin-top: 30px;
}

.accordion-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    font-family: 'Catamaran', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: left;
    width: 100%;
}

.accordion-question::after {
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18.869" height="16.33" viewBox="0 0 18.869 16.33"><path id="Union_1" data-name="Union 1" d="M265.352,1987.978l5.854-5.853H256V1980.2h15.206l-5.854-5.853L266.7,1973l8.165,8.165-8.165,8.165Z" transform="translate(-256 -1973)" fill="%232b3b52"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    flex-shrink: 0;
}

.accordion-item.active .accordion-question::after {
    rotate: -90deg;
}

.accordion-answer {
    margin-top: 0;
    max-width: calc(100% - 120px);
    text-align: left;
    overflow: hidden;
    transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.accordion-item.active .accordion-answer {
    margin-top: 15px;
}

@media (max-width: 992px) {
    .frontpage .faq,
    .faq {
        margin: 80px auto;
    }

    .faq::after {
        display: none;
    }

    .faq .title {
        font-size: 2rem;
    }

    .accordion-item {
        padding: 15px 20px;
    }

    .accordion-question {
        font-size: 1rem;
    }

    .accordion-question::after {
        width: 30px;
        height: 30px;
    }

    .accordion-answer {
        max-width: calc(100% - 100px);
    }
}