/**
 * faq.css — Section FAQ
 */

/* -------------------------
   Section
------------------------- */
.section-faq {
    position: relative;
    background-color: var(--color-bg);
    padding-block: var(--section-padding-y);
}

/* -------------------------
   Inner — colonne
------------------------- */
.section-faq__inner {
    position: relative;
    z-index: var(--z-base);
    max-width: var(--container-max-width-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding-inline: var(--section-padding-x);
}

/* -------------------------
   Titre
------------------------- */
.section-faq__title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-10xl);
    line-height: var(--line-height-snug);
    color: var(--color-black);
}

/* -------------------------
   Liste
------------------------- */
.section-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}

/* -------------------------
   Item — supprime le marqueur natif
------------------------- */
.section-faq__item {
    list-style: none;
}

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

/* -------------------------
   Bouton — même esthétique que outils
------------------------- */
.section-faq__tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-bg);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-md);
    color: var(--color-blue);
    font-family: var(--font-secondary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    list-style: none;
}

.section-faq__tab:hover {
    background-color: var(--color-bg);
}

.section-faq__item[open] > .section-faq__tab {
    border-bottom-color: transparent;
}

/* Ouvert — fond lime, coins bas carrés */
.section-faq__item[open] .section-faq__tab {
    background-color: var(--color-lime);
    color: var(--color-black);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* -------------------------
   Flèche — pivote vers le bas à l'ouverture
------------------------- */
.section-faq__tab-arrow {
    font-size: 2rem;
    line-height: 0;
    flex-shrink: 0;
    display: inline-block;
}

/* -------------------------
   Panel
------------------------- */
.section-faq__panel {
    padding: var(--space-md);
    border: 1px solid var(--color-black);
    border-top: none;
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* -------------------------
   Réponse
------------------------- */
.section-faq__answer {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-black);
    margin: 0;
}

/* -------------------------
   Tablette 768px
------------------------- */
@media (min-width: 768px) {
    .section-faq__title {
    }

    .section-faq__tab {
        font-size: var(--font-size-xl);
    }
}

/* -------------------------
   Desktop 1024px
------------------------- */
@media (min-width: 1024px) {
    .section-faq__inner {
    flex-direction: row;
}
}