:root {
    --fc-faq-border-search: #e8e8e8;
    --fc-faq-radius-search: 100px;
    --fc-faq-border-faq: #4b4b4d;
    --fc-faq-couleur-secondaire: #C2C600;
    --fc-faq-texte: #4b4b4d;
    --fc-faq-question: #4b4b4d;
    --fc-faq-svg: #C2C600;
}

.faq {
    margin: 2rem 0 4rem;
}

.faq__searchbar {
    position: relative;
    display: inline-block
}
.faq__searchbar input {
    color: var(--gris);
    font-size: 1rem;
    border: 1px solid var(--fc-faq-border-search);
    border-radius: var(--fc-faq-radius-search);
    padding: .75rem 2rem .75rem 1rem;
    box-sizing: border-box;
    width: 20rem;
    max-width: 100%;
    transition: border-color .3s ease;
    font-family: inherit;
}
.faq__searchbar input::placeholder {
    color: var(--gris);
    font-size: 1rem;
}
.faq__searchbar input:focus-within {
    outline: none;
    border-color:var(--vert);
}
.faq__searchbar:before {
    content: '';
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none' fill='%23000000'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none' fill='%23000000'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    background-color: var(--gris);
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: .5rem;
    vertical-align: middle;
    opacity: .25;
}
.faq__searchbar__reset {
    position: absolute;
    width: 1rem;
    height: 1rem;
    fill: rgba(0,0,0,.25);
    top: 0;
    right: .5rem;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}

.faq__filtres {
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid var(--fc-faq-border-search);
    margin: 1.5rem 0;
    overflow-x: auto;
}
.faq__filtres__item input {
    display: none;
}
.faq__filtres__item label {
    color: var(--gris);
    border-bottom: 3px solid transparent;
    padding-bottom: .5rem;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    transition: border-color .3s ease;
    white-space: nowrap;
}
.faq__filtres__item input:checked + label {
    border-color: var(--vert);
}

.faq__item {
    color: var(--gris);
    /* border-bottom: 1px solid var(--gris); */
    padding: .25rem 0;
    box-sizing: border-box;
    cursor: pointer;
    /* transition: border-color .3s ease; */
}
/* @media screen and (min-width: 1024px) {
    .faq__item {
        padding: 1.5rem 0;
    }
} */
/* .faq__item:hover {
    border-color: var(--vert);
} */
.faq__item__question *:first-child,
.faq__item__reponse *:first-child {
    margin-top: 0;
}
.faq__item__question *:last-child,
.faq__item__reponse *:last-child {
    margin-bottom: 0;
}
.faq__item__question * {
    font-weight: bold;
    margin: 0;
    line-height: initial;
    color: var(--gris);
}
.faq__item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem;
    background-color: var(--fond);
    border-radius: 7px;
}
.faq__item__question:after {
    content: '';
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' preserveAspectRatio='none'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' preserveAspectRatio='none'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    background-color: var(--noir);
    width: .85rem;
    height: 1rem;
    display: block;
    transition: transform .3s ease;
}
.faq__item__question.ouvert:after {
    transform: rotate(45deg);
}

.faq__item__reponse {
    display: none;
    margin-top: .5rem;
}