.faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    position: relative;
    padding-top: 2rem;
}

.faq__questions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq__question {
    padding: 1.5rem 4rem 1.5rem 1.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    color: var(--c-text);
    /* font-size: var(--fs-18); */
}

/* Ligne de séparation entre les questions */
.faq__question:not(:first-child):before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background-color: var(--c-light-grey);
}

/* Supprimer la ligne au-dessus d'une question active et de la question qui la suit */
.faq__question.active:before,
.faq__question.active + .faq__question:before {
    display: none;
}

.faq__question:hover {
    background: var(--c-light-grey);
}

.faq__question_inner {
    position: relative;
    overflow: hidden;
}

.faq__question .faq__question_inner::after {
    display: none;
}

.faq__question.active {
    background: var(--c-background-dark);
    color: var(--c-background-light);
}

.faq__question.active .faq__question_inner::after {
    display: none;
}

.faq__answers {
    position: relative;
}

.faq__answer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.5s, opacity 0.5s ease;
}

.faq__answer_p_mask {
    position: relative;
    overflow: hidden;
}

.faq__answer_content {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* État actif */
.faq__answer.active {
    position: relative;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.faq__answer.active .faq__answer_content {
    transform: translateY(0);
    opacity: 1;
}

/* Animation de sortie */
.faq__answer.leaving {
    visibility: visible;
    opacity: 1;
}

.faq__answer.leaving .faq__answer_content {
    transform: translateY(100%);
    opacity: 0;
}

/* Animation d'entrée */
.faq__answer.entering {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.faq__answer.entering .faq__answer_content {
    transform: translateY(100%);
    opacity: 0;
}

/* Ligne de connexion simple */
.faq__question .faq__connector {
    content: '';
    position: absolute;
    top: 50%;
    right: -3rem; /* Moitié du gap */
    width: 6rem; /* Largeur égale au gap */
    height: 2px;
    background-color: var(--c-background-dark);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0s ease 0s;
    z-index: -1;
}

.faq__question.active .faq__connector {
    transform: scaleX(1);
    transition: transform 0.5s ease 0.5s;
}

/* Supprimer l'ancien connecteur global */
.faq > .faq__connector {
    display: none;
}

.faq__cta {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    font-weight: 200;
}

.faq__cta_icon-open,
.faq__cta_icon-close {
    width: 1ch; /* Largeur fixe pour le symbole */
    text-align: center;
    width: 1.2rem;
}

.faq__question.active .faq__cta_icon-close,
.faq__question:not(.active) .faq__cta_icon-open {
    display: block;
}

.faq__question:not(.active) .faq__cta_icon-close,
.faq__question.active .faq__cta_icon-open {
    display: none;
}

.faq__connector_losange {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0.25rem, -50%) rotate(45deg);
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--c-background-dark);
}

.faq__select-container {
    display: none; /* Masquer par défaut */
}

.faq__select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--c-grey);
    border-radius: 0.3rem;
    background-color: var(--c-background-light);
    font-size: var(--fs-16);
}

.faq__dropdown {
    position: relative;
    cursor: pointer;
}

.faq__dropdown-selected {
    padding: 0.5rem;
    border: 1px solid var(--c-grey);
    border-radius: 0.3rem;
    background-color: var(--c-background-light);
    font-size: var(--fs-16);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 2rem;
}

.faq__dropdown-arrow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.faq__dropdown-arrow span {
    transition: transform 0.3s ease;
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.faq__dropdown.open .faq__dropdown-arrow span:first-child {
    transform: rotate(180deg);
}

.faq__dropdown-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--c-background-light);
    border: 1px solid var(--c-grey);
    border-radius: 0.3rem;
    z-index: 1000;
}

.faq__dropdown-option {
    padding: 0.5rem;
    cursor: pointer;
}

.faq__dropdown-option:hover {
    background-color: var(--c-light-grey);
}

/* Afficher les options lors du clic */
.faq__dropdown.open .faq__dropdown-options {
    display: block;
}

/* ---------------------------------------------------------------------------------------
                                    RESPONSIVE
--------------------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .faq {
        grid-template-columns: 1fr; /* Une seule colonne */
        gap:2rem;
    }

    .faq__select-container {
        display: block; /* Afficher le conteneur du sélecteur */
        width: 100%; /* Prendre toute la largeur */
        margin-bottom: 1rem; /* Espacement en bas */
    }

    .faq__select {
        width: 100%; /* Prendre toute la largeur */
    }

    .faq__questions {
        display: none; /* Masquer les questions en mode responsive */
    }

    .faq__answer {
        width: 100%; /* Prendre toute la largeur */
    }
}