.rc-faq {
    /* Autorise la transition de block-size: 0 → auto sur ::details-content. */
    interpolate-size: allow-keywords;

    /* Couleurs par défaut d'une bascule fermée (override par pôle plus bas). */
    --rc-faq-bg:      var(--color-primary);
    --rc-faq-fg:      #fff;
    --rc-faq-open-bg: #f2f2f2;
    --rc-faq-open-fg: var(--color-body);

    width: 100%;

    /* Couleurs par pôle — sélecteurs par sous-chaîne du titre slugifié, donc
       tolérants aux variantes ("Piscine et spas", "Piscines & spas", …). */
    .rc-faq__section[data-faq-section*="construction"] {
        --rc-faq-bg: var(--gcid-secondary-color, var(--color-secondary));
        --rc-faq-fg: var(--gcid-body-color, var(--color-body));
    }

    .rc-faq__section[data-faq-section*="renovation"] {
        --rc-faq-bg: var(--gcid-p273xa217w, var(--color-renovation));
        --rc-faq-fg: var(--gcid-body-color, var(--color-body));
    }

    .rc-faq__section[data-faq-section*="piscine"] {
        --rc-faq-bg: var(--gcid-link-color, var(--color-piscine));
        --rc-faq-fg: var(--gcid-body-color, var(--color-body));
    }

    .rc-faq__section[data-faq-section*="architect"] {
        --rc-faq-bg: var(--gcid-d84w4f0l28, var(--color-archi));
        --rc-faq-fg: var(--gcid-body-color, var(--color-body));
    }

    .rc-faq__section {
        margin-top: 4rem;
    }

    .rc-faq__section-title {
        margin: 0 0 var(--s-large);
        font-family: var(--font-heading);
        font-size: var(--fs-h3);
        color: var(--color-heading);
    }

    .rc-faq__items {
        display: flex;
        flex-direction: column;
        gap: var(--s-xl);
    }

    .rc-faq__item {
        background-color: var(--rc-faq-bg);
        color: var(--rc-faq-fg);
        transition: background-color 0.3s ease, color 0.3s ease;
        padding: 1rem;

        /* Ouverture/fermeture animées, 100 % natif. Navigateurs sans
           ::details-content : bascule instantanée (dégradation sans casse). */
        &::details-content {
            block-size: 0;
            overflow: hidden;
            transition: block-size 0.35s ease, content-visibility 0.35s;
            transition-behavior: allow-discrete;
        }

        &[open] {
            background-color: var(--rc-faq-open-bg);
            color: var(--rc-faq-open-fg);

            &::details-content {
                block-size: auto;
            }
        }
    }

    .rc-faq__question {
        position: relative;
        display: flex;
        align-items: center;
        padding: var(--s-medium) calc(var(--s-large) + 1.5em) var(--s-medium) var(--s-large);
        cursor: pointer;
        list-style: none;
        font-family: var(--font-heading);
        font-size: var(--fs-h5);

        /* Masque le triangle natif WebKit. */
        &::-webkit-details-marker {
            display: none;
        }

        /* Icône + / − : deux barres superposées, la verticale pivote et
           s'efface à l'ouverture (morph organique plutôt qu'un swap de glyphe). */
        &::before,
        &::after {
            content: "";
            position: absolute;
            right: var(--s-large);
            top: 50%;
            width: 0.75em;
            height: 2px;
            background-color: currentColor;
            translate: 0 -50%;
            transition: rotate 0.3s ease, opacity 0.3s ease;
        }

        &::after {
            rotate: 90deg;
        }

        &:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: -4px;
        }
    }

    .rc-faq__item[open] .rc-faq__question::after {
        rotate: 0deg;
        opacity: 0;
    }

    .rc-faq__answer {
        padding: 0 var(--s-large) var(--s-large);
        font-family: var(--font-body);
        font-size: var(--fs-body);

        > *:first-child {
            margin-top: 0;
        }

        > *:last-child {
            margin-bottom: 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .rc-faq__item,
        .rc-faq__item::details-content,
        .rc-faq__question::before,
        .rc-faq__question::after {
            transition-duration: 0s;
        }
    }
}