/*
 * Style par défaut de la FAQ des logements (accordéon <details>/<summary>).
 *
 * Chargé uniquement sur les fiches logements par Front\FaqAssets, et seulement
 * si le filtre `homency_schema/enqueue_faq_css` le permet (true par défaut).
 *
 * Tout est réglable via les variables CSS ci-dessous : pour adapter au thème,
 * il suffit de les redéfinir sur `.homency-faq` dans la feuille de style du
 * thème (aucune surcharge de sélecteur nécessaire). Ex. :
 *
 *     .homency-faq { --hsf-accent: #c8a15a; --hsf-border: #d8d8d8; }
 */

.homency-faq {
    --hsf-border: #e2e2e2;
    --hsf-accent: #b08d57;
    --hsf-bg: #fff;
    --hsf-gap: .75rem;
    --hsf-pad-x: 1.25rem;
    --hsf-pad-y: 1rem;

    display: flex;
    flex-direction: column;
    gap: var(--hsf-gap);
}

/* La bulle (coins carrés). */
.homency-faq__item {
    border: 1px solid var(--hsf-border);
    border-radius: 0;
    background: var(--hsf-bg);
}

/* En-tête cliquable : question à gauche, marqueur à droite, alignés au centre. */
.homency-faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    padding: var(--hsf-pad-y) var(--hsf-pad-x);
    list-style: none; /* retire le marqueur natif (Firefox). */
}

/* Retire le marqueur natif (Safari/Chrome). */
.homency-faq__summary::-webkit-details-marker {
    display: none;
}

/* La question : titre sans marge, pour rester sur la ligne du marqueur. */
.homency-faq__question {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}

/* Marqueur +/- maison, aligné verticalement, dans la couleur d'accent. */
.homency-faq__summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--hsf-accent);
}

.homency-faq__item[open] .homency-faq__summary::after {
    content: "\2212"; /* signe moins « − ». */
}
.homency-faq__summary h3.homency-faq__question::after {
    display: none !important;
}

/* La réponse. */
.homency-faq__answer {
    padding: 0 var(--hsf-pad-x) var(--hsf-pad-y);
}

.homency-faq__answer p {
    margin: 0;
}

/*
 * Animation d'ouverture / fermeture (amélioration progressive).
 *
 * Un <details> n'anime pas sa hauteur nativement. On transitionne le pseudo-
 * élément ::details-content (tout le contenu hors <summary>) vers/depuis « auto »
 * grâce à interpolate-size. Technique récente (Chrome/Edge 129+ à ce jour) :
 * encapsulée dans @supports, les autres navigateurs ouvrent/ferment
 * instantanément, sans aucune régression. Neutralisée si l'utilisateur a demandé
 * moins d'animations (prefers-reduced-motion).
 */
@media (prefers-reduced-motion: no-preference) {
    @supports (interpolate-size: allow-keywords) {
        :root {
            interpolate-size: allow-keywords;
        }

        .homency-faq__item::details-content {
            block-size: 0;
            overflow: hidden;
            transition:
                block-size .3s ease,
                content-visibility .3s ease allow-discrete;
        }

        .homency-faq__item[open]::details-content {
            block-size: auto;
        }
    }

    /* Adoucit le changement d'état du marqueur. */
    .homency-faq__summary::after {
        transition: color .2s ease;
    }
}