/*
    ========================================
    SECTION-FAQ.CSS
    Auteur                : Renaud
    Création              : 23 novembre 2025
    Dernière modification : 12 décembre 2025
    ========================================
*/
/**
*   @project   DEVENIR-ARTISAN.NET
*   Style de l'accordéon FAQ (balises details/summary).
*
*   @file  css/section-faq.css
*
*   @see   includes/section-faq.php
*/

/* --- ELEMENT : List (Wrapper) --- */
.section-faq__list {
    /* PLACEMENT */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

/* --- BLOCK : FAQ Item --- */
.faq-item {
    /* PLACEMENT */
    overflow: hidden;

    /* VISUEL */
    background-color: var(--color-white);
    border: 1px solid var(--color-card-border);
    border-radius: 8px;

    /* EFFET */
    transition: all 0.3s ease;
}

/* ÉTAT : Ouvert (Attribut HTML [open]) */
.faq-item[open] {
    /* VISUEL */
    border-color: var(--color-blue-060); /* Bordure bleue */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- ELEMENT : Summary (Question) --- */
.faq-item__summary {
    /* PLACEMENT */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;

    /* VISUEL */
    list-style: none; /* Cache la flèche native */

    /* TEXTE */
    font-family: var(--font-heading-sub);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-headings);

    /* EFFET */
    cursor: pointer;
}

/* Hack pour cacher la flèche native sur Safari/Chrome */
.faq-item__summary::-webkit-details-marker {
    display: none;
}

/* --- ELEMENT : Icon (+ / -) --- */
.faq-item__icon {
    /* TEXTE */
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-orange-120);

    /* EFFET */
    transition: transform 0.3s ease;
}

/* Rotation de l'icône quand ouvert */
.faq-item[open] .faq-item__icon {
    /* TEXTE */
    color: var(--color-red-120); /* Devient rouge */

    /* EFFET */
    transform: rotate(45deg); /* Le + devient x */
}

/* --- ELEMENT : Content (Réponse) --- */
.faq-item__content {
    /* PLACEMENT */
    padding: 0 1.5rem 1.5rem 1.5rem;

    /* VISUEL */
    border-top: 1px solid transparent;

    /* TEXTE */
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Ajout d'une petite séparation visuelle quand ouvert */
.faq-item[open] .faq-item__content {
    /* PLACEMENT */
    padding-top: 1rem;

    /* VISUEL */
    border-top-color: var(--color-grey-220);
}

/* DEBUG */
/*
.faq-item { border: 1px solid lime; }
*/