/**
 * Page FAQ (template-faq.php) — storefront-child.
 * Accordéon accessible <details>/<summary>, DA Luxury (tokens du thème).
 * Chargé conditionnellement sur is_page_template('templates/template-faq.php').
 */

.sfc-faq {
    max-width: 820px;
    margin: 0 auto;
}

.sfc-faq__item {
    border: 1px solid rgba(201, 169, 97, 0.28);
    border-radius: var(--radius-ui);
    background: var(--color-white);
    margin-bottom: 14px;
    overflow: hidden;
    transition: var(--transition-base);
}

.sfc-faq__item[open] {
    border-color: var(--color-gold);
    box-shadow: 0 14px 34px -24px rgba(26, 38, 64, 0.3);
}

.sfc-faq__q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    font-family: var(--font-heading);
    font-size: clamp(16px, 1.8vw, 19px);
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.3;
}

.sfc-faq__q::-webkit-details-marker { display: none; }

.sfc-faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.sfc-faq__icon::before,
.sfc-faq__icon::after {
    content: "";
    position: absolute;
    background: var(--color-gold);
    transition: var(--transition-base);
}

/* trait horizontal */
.sfc-faq__icon::before {
    top: 50%;
    left: 0;
    width: 18px;
    height: 2px;
    transform: translateY(-50%);
}

/* trait vertical (disparaît à l'ouverture → passe de + à −) */
.sfc-faq__icon::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 18px;
    transform: translateX(-50%);
}

.sfc-faq__item[open] .sfc-faq__icon::after {
    transform: translateX(-50%) scaleY(0);
}

.sfc-faq__a {
    padding: 0 24px 22px;
}

.sfc-faq__a p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.sfc-faq__q:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .sfc-faq__item,
    .sfc-faq__icon::before,
    .sfc-faq__icon::after { transition: none; }
}