/* public/assets/css/faq.css
   ==========================================================================
   Corvus — FAQ (faq.php)
   --------------------------------------------------------------------------
   DÉPEND DE, ET DOIT ÊTRE CHARGÉ APRÈS : tokens.css, components.css, style.css.
   Chargé UNIQUEMENT par faq.php (même logique que home.css pour index.php).

   Remplace l'ancien tableau défilant : quatre catégories, un filtre, un
   accordéon. La FAQ doit se lire d'un coup d'œil et donner immédiatement une
   impression de produit soigné — c'est la première pièce qu'un visiteur
   hésitant regarde avant de se décider.
   ========================================================================== */

/* ==========================================================================
   1. FILTRES DE CATÉGORIE
   ========================================================================== */

.faq-filters {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.faq-filter {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4); min-height: 40px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background-color: var(--surface); color: var(--text-2);
    font-family: var(--f-display); font-weight: 500; font-size: var(--fs-xs);
    cursor: pointer; touch-action: manipulation;
    transition:
        color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        background-color var(--t-fast) var(--ease);
}
.faq-filter .ico { width: 15px; height: 15px; color: var(--muted); transition: color var(--t-fast) var(--ease) }
.faq-filter:hover { color: var(--text); border-color: var(--muted) }
.faq-filter:focus-visible { outline: none; box-shadow: var(--ring) }

.faq-filter.is-active {
    background-color: var(--accent-ghost); border-color: var(--accent-line); color: var(--accent-2);
}
.faq-filter.is-active .ico { color: var(--accent-2) }

.faq-filter-count {
    font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--muted);
    background-color: var(--surface-2); border-radius: var(--r-pill);
    padding: .1em .55em; line-height: 1.5;
}
.faq-filter.is-active .faq-filter-count { background-color: var(--accent-ghost-strong); color: var(--accent-2) }

/* ==========================================================================
   2. GROUPES / CATÉGORIES
   ========================================================================== */

.faq-group { margin-bottom: var(--space-9) }
.faq-group:last-of-type { margin-bottom: 0 }

.faq-group-title {
    display: flex; align-items: center; gap: var(--space-3);
    font-family: var(--f-display); font-weight: 600; font-size: var(--fs-md);
    color: var(--text); margin-bottom: var(--space-4);
}
.faq-group-ico {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: var(--r-ctl);
    background-color: var(--accent-ghost); color: var(--accent-2);
}
.faq-group-ico .ico { width: 18px; height: 18px }

/* ==========================================================================
   3. ACCORDÉON
   ========================================================================== */

.faq-list { display: flex; flex-direction: column; gap: var(--space-3) }

.faq-item {
    background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.faq-item:hover { border-color: var(--accent-line-weak) }
.faq-item.is-open { border-color: var(--accent-line); box-shadow: var(--shadow-card) }

.faq-item-h { margin: 0; font-weight: inherit }

.faq-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-4) var(--space-5); min-height: 40px;
    background: none; border: 0; cursor: pointer; text-align: left;
    font-family: var(--f-display); font-weight: 500; font-size: var(--fs-base); color: var(--text);
    transition: color var(--t-fast) var(--ease);
}
.faq-trigger:hover { color: var(--accent-2) }
.faq-trigger:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r) }

.faq-q-text { line-height: var(--lh-snug) }

.faq-chevron {
    flex-shrink: 0; width: 20px; height: 20px; color: var(--muted);
    transition: transform var(--t-slow) var(--ease), color var(--t-fast) var(--ease);
}
.faq-item.is-open .faq-chevron { transform: rotate(180deg); color: var(--accent-2) }

/* Grille à une ligne animée 0fr -> 1fr : anime une hauteur "auto" sans JS ni
   mesure de scrollHeight, et sans jamais tronquer une réponse plus longue
   que prévu (contrairement à un max-height fixe). */
.faq-panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-slow) var(--ease);
}
.faq-item.is-open .faq-panel { grid-template-rows: 1fr }
.faq-panel-in { overflow: hidden; min-height: 0 }

.faq-panel p {
    margin: 0; padding: 0 var(--space-5) var(--space-5);
    color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-body);
    max-width: var(--measure);
}

.faq-empty {
    text-align: center; color: var(--muted);
    font-family: var(--f-mono); font-size: var(--fs-sm);
    padding: var(--space-8) 0;
}

/* ==========================================================================
   4. MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .faq-chevron, .faq-panel { transition: none }
}