/* ============================================================================
   faq.css - pages FAQ (faq-professionnels.php, et faq-mamans.php a sa refonte)
   Cree le 08/10/2026. Charge par $donneesSupplementairesHeader, donc emis
   AVANT custom.css (B1) : chaque regle porte le prefixe .main pour passer
   devant les regles de meme sujet (.main ul, .main a).
   Jetons de vm-tokens.css seuls, aucun repli dans var(), aucun !important.
   Mobile-first, bascule a 577 px.
   ============================================================================ */

/* Sommaire : pastilles a ancres */
.main ul.vm-faq-sommaire {
    list-style: none;
    padding-left: 0;
    margin: var(--vm-space-5) 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--vm-space-2);
}
.main .vm-faq-sommaire a {
    display: inline-block;
    padding: var(--vm-space-2) var(--vm-space-4);
    border: 1px solid var(--vm-border);
    border-radius: var(--vm-radius-pill);
    background: var(--vm-surface);
    color: var(--vm-bleu);
    font-size: var(--vm-fs-sm);
    font-weight: var(--vm-fw-semi);
    line-height: 1.3;
    transition: background-color var(--vm-transition-fast), border-color var(--vm-transition-fast);
}
.main .vm-faq-sommaire a:hover {
    background: var(--vm-bleu-pale);
    border-color: var(--vm-bleu);
}
.main .vm-faq-sommaire a:focus-visible {
    outline: 2px solid var(--vm-bleu);
    outline-offset: 2px;
}

/* Categories : ancre sous le header collant */
.main .vm-faq-cat {
    scroll-margin-top: var(--vm-header-offset);
    margin-top: var(--vm-space-7);
}
.main .vm-faq-cat:first-child {
    margin-top: 0;
}
.main .vm-faq-cat .grosTitre {
    text-align: left;
    margin-bottom: var(--vm-space-3);
}

/* Reponses : listes et paragraphes resserres */
.main .vm-faq-cat .vm-toggle-body p:last-child,
.main .vm-faq-cat .vm-toggle-body ul:last-child {
    margin-bottom: 0;
}

.main .vm-faq-retour {
    text-align: right;
    font-size: var(--vm-fs-sm);
    margin: var(--vm-space-3) 0 0;
}

@media (min-width: 577px) {
    .main ul.vm-faq-sommaire {
        gap: var(--vm-space-3);
    }
}