/*
 * Section F.A.Q. — Figma node 2644:68367.
 *
 * Cadrage de la maquette : padding vertical 96, gap 48 entre l'en-tête et la liste, en-tête
 * bridé à 877 et centré, entrées de la largeur de contenu séparées de 32. Chaque entrée est
 * un cadre de 1px en secondary-500, rayon 2, padding 32, et 40 entre la question et sa
 * réponse une fois ouverte.
 */

.section-faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    padding-block: var(--section-space);
}

.section-faq__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    /* 877px dans la maquette. */
    width: min(877px, 100% - 2 * var(--container-gutter));
    text-align: center;
}

.section-faq__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    /* 61px sur 49px */
    line-height: 1.245;
    color: var(--color-primary);
}

.section-faq__intro {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-950);
}

.section-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-bloc);
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Trois états au composant (node 2259:4020) : Base sans fond, Hover et Open avec le même fond
 * neutral-alpha-10. Le survol donne donc déjà à voir ce que l'ouverture confirmera.
 */
.section-faq__entry {
    /*
     * AUCUN PADDING ICI : il est porté par le <summary> et par la réponse.
     *
     * Posé sur le <details>, les 32px de la maquette formaient un anneau mort autour de la
     * question : le cadre entier avait l'air cliquable, mais seule la ligne de texte
     * basculait l'entrée. C'est exactement le défaut constaté. Le <summary> occupe
     * maintenant le cadre d'un bord à l'autre.
     */
    border: 1px solid var(--color-secondary-500);
    border-radius: var(--radius-xxxs);
    transition: background-color 200ms ease-out;
}

.section-faq__entry:hover,
.section-faq__entry[open] {
    background-color: var(--color-neutral-alpha-10);
}

/* ---- Question ---- */

.section-faq__question {
    display: flex;
    gap: var(--space-list);
    align-items: center;
    justify-content: space-between;
    /* Les 32 de la maquette, sur la zone cliquable elle-même. */
    padding: var(--space-bloc);
    cursor: pointer;
    /* Le chevron par défaut du navigateur est retiré : la maquette dessine son propre « + ».
       Les deux formes sont nécessaires, list-style ne suffit pas encore partout. */
    list-style: none;
}

.section-faq__question::-webkit-details-marker {
    display: none;
}

.section-faq__question-text {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    /* Regular et non Bold, contrairement au titre de la section. */
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-neutral-900);
}

/*
 * L'anneau de focus se pose sur toute l'entrée et non sur la seule ligne de question : c'est
 * l'entrée entière qui bascule, la cible perçue est donc le cadre.
 */
.section-faq__question:focus-visible {
    outline: none;
}

.section-faq__entry:has(.section-faq__question:focus-visible) {
    outline: 2px solid var(--color-secondary-800);
    outline-offset: 2px;
}

/* ---- Le « + » qui devient « × » ---- */

.section-faq__icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 200ms ease-out;
}

.section-faq__icon::before,
.section-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    margin-top: -0.5px;
    background-color: var(--color-neutral-900);
}

.section-faq__icon::after {
    transform: rotate(90deg);
}

/* Le « + » de la maquette devient un « × » à l'ouverture : un quart de tour sur les deux
   traits suffit, aucune icône à échanger. */
.section-faq__entry[open] .section-faq__icon {
    transform: rotate(45deg);
}

/* ---- Réponse ---- */

.section-faq__answer {
    /*
     * 40 entre la question et la réponse dans la maquette : le <summary> en donne déjà 32 par
     * son padding bas, il en reste 8 à ajouter ici. Les 32 latéraux et du bas alignent la
     * réponse sur la question.
     */
    padding: var(--space-compact) var(--space-bloc) var(--space-bloc);
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    /* neutral-800, plus doux que le neutral-900 de la question : la hiérarchie tient à ça
       autant qu'à la taille. */
    color: var(--color-neutral-800);
}

.section-faq__answer > :first-child {
    margin-block-start: 0;
}

.section-faq__answer > :last-child {
    margin-block-end: 0;
}

.section-faq__answer p + p,
.section-faq__answer ul,
.section-faq__answer ol {
    margin-block-start: var(--space-m);
}

.section-faq__answer ul,
.section-faq__answer ol {
    padding-inline-start: var(--space-list);
}

.section-faq__answer a {
    color: var(--color-primary-600);
    text-decoration: underline;
}

/*
 * Dépliage animé, entièrement en CSS.
 *
 * <details> ne s'animait pas : la hauteur passait de 0 à auto d'un coup. interpolate-size
 * autorise l'interpolation vers auto, et ::details-content donne prise sur le contenu replié.
 * Là où ces deux propriétés manquent encore, l'entrée s'ouvre instantanément — le
 * comportement d'avant, sans rien de cassé. Aucun script n'est chargé pour autant.
 */
@supports (interpolate-size: allow-keywords) {
    .section-faq__entry {
        interpolate-size: allow-keywords;
    }

    .section-faq__entry::details-content {
        height: 0;
        overflow: hidden;
        opacity: 0;
        transition: height 260ms ease-out, opacity 200ms ease-out, content-visibility 260ms;
        /* Sans allow-discrete, content-visibility saute à sa valeur finale dès le début et la
           réponse apparaît d'un bloc avant même que la hauteur ait bougé. */
        transition-behavior: allow-discrete;
    }

    .section-faq__entry[open]::details-content {
        height: auto;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-faq__entry,
    .section-faq__icon {
        transition: none;
    }

    .section-faq__entry::details-content {
        transition: none;
    }
}

/* ---- Adaptations ---- */

@media (max-width: 1200px) {
    .section-faq {
        --container-gutter: var(--space-bloc);
        gap: var(--space-large);
        padding-block: var(--section-space);
    }

    .section-faq__list {
        gap: var(--space-m);
    }
}

@media (max-width: 768px) {
    .section-faq {
        --container-gutter: var(--space-m);
    }

    .section-faq__question {
        padding: var(--space-l);
        gap: var(--space-m);
        /* Une question longue se lit sur plusieurs lignes, le « + » reste en haut à droite
           plutôt que de flotter au milieu du bloc. */
        align-items: flex-start;
    }

    .section-faq__answer {
        /* 24 au total entre question et réponse : 20 viennent du padding bas du <summary>. */
        padding: var(--space-micro) var(--space-l) var(--space-l);
    }
}