/* ===================================================================
   Composant Accordion — animation générique (grid trick)

   Structure injectée par window.Accordion :
     .accordion-panel        = grid container (0fr → 1fr via .is-open)
     .accordion-panel__inner = grid item, overflow:hidden SANS padding
                               (le padding sur cet élément empêcherait
                               0fr d'atteindre 0 px)
     .accordion-panel__body  = wrapper de contenu : padding, fond, etc.
                               (styles définis par le CSS page/composant
                               consommateur)

   L'accessibilité (aria-expanded, aria-controls, role, tabindex) et
   le toggle .is-open sont pilotés par window.Accordion.
   =================================================================== */

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-accordion);
}

.accordion-panel.is-open {
    grid-template-rows: 1fr;
}

/* Aucun padding — overflow:hidden seul donne min-height 0 au grid item */
.accordion-panel__inner {
    overflow: hidden;
}

/* .accordion-panel__body : pas de styles ici — chaque page définit
   padding, fond, border-radius, etc. en surchargeant ce sélecteur
   dans son propre fichier CSS. */

/* ===================================================================
   Trigger — style partagé (+/− icône, focus, hover), commun à tous les
   accordéons du site (FAQ .faq__trigger/.faq-header, formulaires
   .form__accordion-trigger…). Un contexte au visuel encadré (boîte
   bordée) peut surcharger le padding horizontal dans son propre CSS
   page (ex. form.css, .form__data-protection .form__accordion-trigger).
   =================================================================== */

.faq__trigger,
.faq-header,
.form__accordion-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm3) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-base);
    line-height: var(--line-height-snug);
    background: transparent;
    border: none;
    text-align: left;
    margin: 0;
    cursor: pointer;
    user-select: none;
    color: var(--color-heading);

    &::before {
        content: "+";
        flex-shrink: 0;
        width: 1.6rem;
        font-size: 1.8rem;
        font-weight: var(--font-weight-normal);
        line-height: 1;
        text-align: center;
        transition: color var(--transition-fast);
    }

    &[aria-expanded="true"]::before {
        content: "\2212"; /* signe moins (U+2212) en échappement CSS : évite la corruption d'encodage */
    }

    &:hover {
        color: var(--color-primary);

        &::before { color: var(--color-primary-hover); }
    }

    /* Anneau : règle globale :focus-visible (Default/base/utilities.css) ; seul le rayon est spécifique */
    &:focus-visible {
        border-radius: var(--border-radius-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .accordion-panel {
        transition: none;
    }
}