/* Accordéon de questions fréquentes. */

.faq-list {
    max-width: 780px;
    margin-inline: auto;
    display: grid;
    gap: 0;
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item:first-child {
    border-top: 1px solid var(--line);
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    background: none;
    border: 0;
    padding: var(--sp-5) 4px;
    text-align: left;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--text);
    cursor: pointer;
}

.faq-q .chev {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--c-green-leaf);
    transition: transform 0.25s var(--ease-editorial);
}

.faq-q[aria-expanded="true"] .chev {
    transform: rotate(180deg);
}

.faq-a-inner {
    padding: 0 4px var(--sp-5);
    color: var(--text-soft);
    max-width: 66ch;
}

/*
  Sans JavaScript, toutes les réponses restent visibles : le contenu est dans
  le HTML, et c'est la condition d'un balisage FAQPage honnête — Google doit
  lire ce que lit le visiteur.
*/
html.js .faq-a {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s var(--ease-editorial);
}

html.js .faq-item.is-open .faq-a {
    max-height: 600px;
}