/**
 * Bloc FAQ — Styles frontend
 * Compatible <details>/<summary> avec animation CSS pure.
 */

/* ── Conteneur ─────────────────────────────────────────────────────────────── */
.dolita-faq {
    --faq-border        : #e2e8f0;
    --faq-bg-hover      : #f8fafc;
    --faq-question-color: #1a202c;
    --faq-answer-color  : #4a5568;
    --faq-icon-color    : #718096;
    --faq-accent        : currentColor;
    --faq-radius        : 0.5rem;
    --faq-gap           : 0.5rem;

    display       : flex;
    flex-direction: column;
    gap           : var(--faq-gap);
    margin        : 1.5rem 0;
}

/* ── Item ───────────────────────────────────────────────────────────────────── */
.dolita-faq__item {
    border       : 1px solid var(--faq-border);
    border-radius: var(--faq-radius);
    overflow     : hidden;
    transition   : box-shadow 0.2s ease;
}

.dolita-faq__item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── <details> ──────────────────────────────────────────────────────────────── */
.dolita-faq__details {
    display: block;
}

/* ── Question (<summary>) ───────────────────────────────────────────────────── */
.dolita-faq__question {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    gap            : 1rem;
    padding        : 1rem 1.25rem;
    cursor         : pointer;
    font-weight    : 600;
    font-size      : 1rem;
    line-height    : 1.5;
    color          : var(--faq-question-color);
    list-style     : none;           /* cache le marqueur natif Chrome/Safari */
    background     : transparent;
    transition     : background 0.15s ease;
}

.dolita-faq__question::-webkit-details-marker { display: none; } /* Safari */

.dolita-faq__details[open] .dolita-faq__question,
.dolita-faq__question:hover {
    background: var(--faq-bg-hover);
}

.dolita-faq__question-text {
    flex: 1;
}

/* ── Icône +/× ──────────────────────────────────────────────────────────────── */
.dolita-faq__icon {
    flex-shrink : 0;
    width       : 1.25rem;
    height      : 1.25rem;
    position    : relative;
    color       : var(--faq-icon-color);
}

.dolita-faq__icon::before,
.dolita-faq__icon::after {
    content         : '';
    position        : absolute;
    top             : 50%;
    left            : 50%;
    background      : currentColor;
    border-radius   : 2px;
    transition      : transform 0.25s ease, opacity 0.25s ease;
}

/* barre horizontale */
.dolita-faq__icon::before {
    width    : 12px;
    height   : 2px;
    transform: translate(-50%, -50%);
}

/* barre verticale (= signe +) */
.dolita-faq__icon::after {
    width    : 2px;
    height   : 12px;
    transform: translate(-50%, -50%);
}

/* état ouvert → croix rotée = ✕ */
.dolita-faq__details[open] .dolita-faq__icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.dolita-faq__details[open] .dolita-faq__icon::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* ── Réponse ────────────────────────────────────────────────────────────────── */
.dolita-faq__answer {
    padding   : 0 1.25rem 1.25rem;
    color     : var(--faq-answer-color);
    font-size : 0.9375rem;
    line-height: 1.7;
    border-top: 1px solid var(--faq-border);
}

.dolita-faq__answer > *:first-child { margin-top: 0.75rem; }
.dolita-faq__answer > *:last-child  { margin-bottom: 0; }

.dolita-faq__answer a {
    color          : inherit;
    text-decoration: underline;
}

/* ── Accessibilité : focus visible ─────────────────────────────────────────── */
.dolita-faq__question:focus-visible {
    outline       : 2px solid var(--faq-accent);
    outline-offset: -2px;
}