/* ==========================================================================
   DISCIPLINE — /faq · Questions fréquentes
   Préfixe « fq- ». Complète service.css et main.css.
   SOMMAIRE
    1. Héros & recherche
    2. Barre de rubriques
    3. Rubriques & questions
    4. État vide
   ========================================================================== */

/* ---------- 1. HÉROS & RECHERCHE ---------- */
.fq-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.fq-hero .sv-hero__title { max-width: 15em; }
.fq-hero__body { display: grid; gap: clamp(20px, 2.4vw, 32px); max-width: 60rem; }
@media (min-width: 1000px) { .fq-hero__body { padding-right: clamp(110px, 12vw, 190px); max-width: none; } }
.fq-hero .sv-hero__title em { color: var(--accent); }
.fq-search { position: relative; display: flex; align-items: center; max-width: 52rem; margin-top: clamp(8px, 1.6vw, 20px); border-bottom: 1px solid var(--rule-strong); transition: border-color var(--dur-2) var(--ease); }
.fq-search:focus-within { border-color: var(--accent); }
.fq-search::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease); }
.fq-search:focus-within::after { transform: scaleX(1); }
.fq-search__icon { flex: none; width: 28px; height: 28px; color: var(--accent); }
.fq-search__input {
  flex: 1; min-width: 0; padding: 18px 14px; background: transparent; border: 0; border-radius: 0; color: var(--fg);
  font: 900 clamp(1.125rem, 0.62rem + 1.1vw, 1.5rem)/1.2 var(--font-sans); letter-spacing: var(--brut-track-s); text-transform: uppercase; -webkit-appearance: none; appearance: none;
}
.fq-search__input:focus { outline: none; }
/* L'indication (6 mots) reste en casse normale 600 droite : en capitales Black, elle ne tiendrait pas sur une ligne à 390 */
.fq-search__input::placeholder { color: var(--fg-muted); opacity: 0.8; font-weight: 600; font-size: clamp(1rem, 0.62rem + 1.1vw, 1.5rem); letter-spacing: 0; text-transform: none; }
.fq-search__input::-webkit-search-cancel-button { display: none; }
.fq-search__clear { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--fg-muted); transition: color var(--dur-1), transform var(--dur-2) var(--ease); }
.fq-search__clear:hover { color: var(--accent); transform: rotate(90deg); }
.fq-search__clear svg { width: 20px; height: 20px; }

/* ---------- 2. BARRE DE RUBRIQUES ---------- */
.fq-bar { position: sticky; top: var(--header-h); z-index: 40; background: rgba(243, 239, 231, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); transition: top 600ms var(--ease); }
body:has(.site-header.is-hidden) .fq-bar { top: 0; }
.fq-bar__list { list-style: none; padding: 12px 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.fq-bar__list::-webkit-scrollbar { display: none; }
.fq-bar__list li { flex: none; }
.fq-bar .chip { min-height: 38px; font-size: 0.74rem; white-space: nowrap; }
@media (max-width: 900px), (pointer: coarse) { .fq-bar .chip { min-height: 44px; } }
.fq-bar .chip[aria-current='true'] { border-color: var(--fg); }
/* Rubrique courante : un seul indicateur doré glisse d'une rubrique à l'autre (posé par faq.js) */
.fq-bar__list { position: relative; }
.fq-bar__ind { position: absolute; left: 0; bottom: 0; width: 100px; height: 3px; background: var(--accent-line); transform-origin: 0 50%; opacity: 0; pointer-events: none; transition: transform 640ms var(--ease-in-out), opacity 320ms var(--ease); }

.fq-main { padding-top: clamp(24px, 3.5vw, 48px); }
.fq-status { min-height: 1.6em; margin-bottom: 8px; font: 600 0.875rem/1.3 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--accent); }
.fq-layout { max-width: 60rem; }

/* ---------- 3. RUBRIQUES & QUESTIONS ---------- */
.fq-results { display: grid; gap: clamp(40px, 5vw, 72px); }
.fq-cat__head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: clamp(16px, 3vw, 40px); margin-bottom: clamp(16px, 2.4vw, 32px); }
.fq-cat__num::before { content: attr(data-num); }
.fq-cat__num { font: 900 clamp(2.75rem, 4.68vw, 4.1875rem)/0.78 var(--font-sans); letter-spacing: var(--brut-track-xl); color: var(--decor-soft); min-width: 1.4ch; }
.fq-cat__title { font-size: clamp(1.35rem, 1rem + 1.6vw, 2.3rem); }
@media (max-width: 560px) { .fq-cat__head { grid-template-columns: 1fr; gap: 10px; } .fq-cat__num { font-size: 2.1875rem; } }

.fq-cat__list > .accordion:first-of-type { border-top: 1px solid var(--rule); }
.fq-q > summary { gap: 28px; padding: clamp(18px, 2vw, 26px) 0; font: 700 clamp(1rem, 0.82rem + 0.55vw, 1.3125rem)/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; text-wrap: balance; }
.fq-q > summary::after { width: 14px; height: 14px; color: var(--accent); }
.fq-q .accordion__content { max-width: 44rem; padding-bottom: clamp(22px, 2.6vw, 34px); color: var(--fg); }
.fq-q .accordion__content p { color: var(--fg-muted); font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem); }
.fq-q .accordion__content a { color: var(--accent); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.fq-q .accordion__content a:hover { background-size: 100% 2px; }
.fq-q .accordion__content strong { color: var(--fg); }
.fq-q mark { background: rgba(184, 151, 90, 0.34); color: inherit; padding: 0 2px; border-radius: 1px; }
.fq-q:target > summary { color: var(--accent); }
.fq-q[hidden], .fq-cat[hidden] { display: none; }

/* La recherche : l'état vide se pose, les réponses restantes glissent à leur place (faq.js) */
.fq-status { transition: opacity 320ms var(--ease); }
.fq-empty:not([hidden]) { animation: fade-up 520ms var(--ease-out) both; }

/* ---------- 4. ÉTAT VIDE ---------- */
.fq-empty[hidden] { display: none; }
.fq-empty { border: 1px solid var(--rule); background: var(--bg-alt); }
.fq-empty .empty-state__title em { color: var(--accent); }