/* ================================================================
   Rhazael Upgrade – FAQ Frontend
   CSS minimaliste – personnalisez librement les variables ci-dessous
   ================================================================ */

/* ── Variables ──────────────────────────────────────────────────
   Modifiez ces valeurs pour adapter le style à votre thème.
   ─────────────────────────────────────────────────────────────── */
.rhz-faq {
    --faq-font-family:       inherit;
    --faq-max-width:         800px;

    /* Couleurs */
    --faq-color-text:        #1e293b;
    --faq-color-text-light:  #64748b;
    --faq-color-bg:          #ffffff;
    --faq-color-bg-hover:    #f8fafc;
    --faq-color-border:      #e2e8f0;
    --faq-color-icon:        #2563eb;
    --faq-color-icon-open:   #2563eb;

    /* Typographie */
    --faq-question-size:     1rem;
    --faq-question-weight:   600;
    --faq-answer-size:       0.9375rem;
    --faq-answer-line-height:1.7;

    /* Espacements */
    --faq-item-gap:          0;         /* Espace entre les items */
    --faq-padding-h:         1.25rem;   /* Padding horizontal */
    --faq-padding-v:         1rem;      /* Padding vertical question */
    --faq-answer-padding-b:  1rem;      /* Padding bas réponse */

    /* Bordures */
    --faq-border-width:      1px;
    --faq-border-radius:     8px;       /* Rayon du conteneur global */
    --faq-item-radius:       0;         /* Rayon de chaque item */

    /* Icône */
    --faq-icon-size:         1.25rem;
    --faq-icon-weight:       300;

    /* Transition */
    --faq-transition:        0.2s ease;
}

/* ── Conteneur ─────────────────────────────────────────────── */
.rhz-faq {
    font-family: var(--faq-font-family);
    max-width: var(--faq-max-width);
    width: 100%;
    border: var(--faq-border-width) solid var(--faq-color-border);
    border-radius: var(--faq-border-radius);
    overflow: hidden;
}

/* ── Item ──────────────────────────────────────────────────── */
.rhz-faq__item {
    border-bottom: var(--faq-border-width) solid var(--faq-color-border);
    border-radius: var(--faq-item-radius);
    margin-bottom: var(--faq-item-gap);
    background: var(--faq-color-bg);
}

.rhz-faq__item:last-child {
    border-bottom: none;
}

/* ── Bouton question ───────────────────────────────────────── */
.rhz-faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--faq-padding-v) var(--faq-padding-h);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--faq-color-text);
    transition: background var(--faq-transition);
    gap: 1rem;
}

.rhz-faq__question:hover {
    background: var(--faq-color-bg-hover);
}

.rhz-faq__question[aria-expanded="true"] {
    background: var(--faq-color-bg-hover);
}

.rhz-faq__question-text {
    font-size: var(--faq-question-size);
    font-weight: var(--faq-question-weight);
    line-height: 1.4;
    flex: 1;
}

/* ── Icône +/− ─────────────────────────────────────────────── */
.rhz-faq__icon {
    font-size: var(--faq-icon-size);
    font-weight: var(--faq-icon-weight);
    color: var(--faq-color-icon);
    flex-shrink: 0;
    line-height: 1;
    transition: transform var(--faq-transition), color var(--faq-transition);
    user-select: none;
}

.rhz-faq__question[aria-expanded="true"] .rhz-faq__icon {
    color: var(--faq-color-icon-open);
}

/* ── Réponse ───────────────────────────────────────────────── */
.rhz-faq__answer {
    overflow: hidden;
}

.rhz-faq__answer[hidden] {
    display: none;
}

.rhz-faq__answer-inner {
    padding: 0 var(--faq-padding-h) var(--faq-answer-padding-b);
    font-size: var(--faq-answer-size);
    line-height: var(--faq-answer-line-height);
    color: var(--faq-color-text-light);
}

.rhz-faq__answer-inner p:first-child { margin-top: 0; }
.rhz-faq__answer-inner p:last-child  { margin-bottom: 0; }

/* ── Responsive ────────────────────────────────────────────── */
@media ( max-width: 600px ) {
    .rhz-faq {
        --faq-question-size: 0.9375rem;
        --faq-padding-h:     1rem;
        --faq-padding-v:     0.875rem;
    }
}