.faq-container {
    display: flex;
    padding: 2rem;
    gap    : 4rem;
}

.left-section {
    flex : 0 0 300px;
    color: rgb(var(--dark));
}

.right-section {
    flex: 1;
}

.description {
    color        : rgb(var(--dark));
    margin-bottom: 2rem;
}

.buttons-container {
    display      : flex;
    gap          : 1rem;
    margin-bottom: 2rem;
    /* Ajout d'une marge en bas des boutons */
}

.see-all-btn {
    background : none;
    border     : none;
    padding    : .5rem 0;
    display    : flex;
    align-items: center;
    color      : rgb(var(--dark));
    font-size  : 1.1rem;
    text-align : left;
}

.see-all-btn:hover {
    color: rgb(var(--secondary));
}

.see-all-btn::after {
    content    : "→";
    margin-left: .5rem;
}

.faq-category-nav {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    margin-top    : 2rem;
    /* Ajout d'une marge en haut de la navigation des catégories */
}

.faq-category-btn {
    padding      : 10px 15px;
    background   : #f5f5f5;
    border       : 1px solid #ddd;
    border-radius: 5px;
    text-align   : left;
    cursor       : pointer;
    transition   : all 0.3s ease;
}

.faq-category-btn:hover,
.faq-category-btn.active {
    background  : #007bff;
    color       : white;
    border-color: #007bff;
}

.question-block {
    border-bottom: 1px solid rgb(var(--dark));
    padding      : 24px 0;
}

.question-header {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    cursor         : pointer;
    width          : 100%;
    background     : none;
    border         : none;
    text-align     : left;
    padding        : 0;
    margin         : 0;
    color          : rgb(var(--dark));
}

.question-header h6 {
    color    : rgb(var(--dark));
    font-size: 1.25rem;
}

.question-header::after {
    display    : inline-block;
    font-family: "Font Awesome 5 Free";
    font-size  : 80%;
    font-weight: 900;
    content    : "\f107";
    margin-left: .5rem;
    border-top : none;
}

.question-block.active .question-header::after {
    transform: rotate(180deg);
}

.question-content,
.question-content p,
.question-content span {
    margin-top: 1rem;
    color     : rgb(var(--dark));
    display   : none;
}

.question-block.active .question-content,
.question-block.active .question-content p {
    display: block;
}

.arrow {
    transition: transform 0.3s;
}

.faq-category-nav {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    margin-bottom : 20px;
}

.faq-category-btn {
    padding      : 10px 15px;
    background   : #f5f5f5;
    border       : 1px solid #ddd;
    border-radius: 5px;
    text-align   : left;
    cursor       : pointer;
    transition   : all 0.3s ease;
}

.faq-category-btn:hover,
.faq-category-btn.active {
    background  : #007bff;
    color       : white;
    border-color: #007bff;
}

.faq-category-section {
    display: none;
}

.faq-category-section.active {
    display: block;
}

.category-title {
    margin-bottom : 20px;
    padding-bottom: 10px;
    border-bottom : 2px solid #007bff;
}

.faq-resp,
.mobile-menu-icon {
    display: none;
}

@media (max-width: 76.5rem) {
    .faq-container {
        flex-direction: column;
        padding       : 1rem;
    }

    .left-section {
        flex : none;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {

    .buttons-container {
        display: none;
    }

    .categories-dropdown {
        display   : none;
        position  : relative;
        top       : 100%;
        left      : 0;
        width     : 100%;
        z-index   : 1000;
        margin-top: 0rem;
        padding   : 0rem;
        box-sizing: border-box;
    }

    .categories-dropdown.active {
        display: block;
    }

    .see-all-btn::after {
        display: none;
    }

    .categories-dropdown .see-all-btn {
        display   : block;
        width     : 100%;
        text-align: center;
        margin    : 5px 0;
    }

    .menu-burger {
        display: block;
    }

    .faq-resp {
        display: block;
        color  : rgb(var(--dark));
    }

    .faq-title::after {

        font-size : 140%;
        content   : "☰";
        margin-top: -0.3rem;
        float     : right;

    }

    .faq-title {
        display    : block;
        align-items: center;
    }

    .faq-categories {
        display         : none;
        flex-direction  : column;
        position        : absolute;
        top             : 100%;
        left            : 0;
        width           : 100%;
        background-color: white;
        box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index         : 10;
    }

    .faq-categories.show {
        display: flex;
    }

    .see-all-btn {
        width        : 100%;
        text-align   : left;
        padding      : 15px;
        border-bottom: 1px solid #eee;
    }
}