/* ============================================================
   Questions fréquentes.

   Editorial Sport Contrast : le titre de page, les titres de thème et
   l'appel final restent francs et anguleux. Ce qu'on manipule vient de
   instrument.css : la recherche est un champ en capsule, les thèmes des
   capsules, les questions des accordéons souples. Ce fichier ne pose que
   la mise en page et la géométrie propre à la page.
   ============================================================ */

.faq-page {
  /* Hauteur de l'en-tête collant (ui-header.css) : la rangée de thèmes
     se pose dessous et remonte avec lui quand il se retire. */
  --faq-header: 69px;
  padding-block: clamp(28px, 4vw, 56px) var(--space-section);
  background: var(--surface-sunken);
}

.faq-page__header {
  max-width: 900px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.faq-page__header h1 { margin: 0 0 16px; }

.faq-page__header > p:last-child {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-70);
  font-size: 1.1rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---------- Disposition ---------- */

.faq-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

/* Sur téléphone et tablette, les outils suivent le titre : la recherche,
   puis les thèmes en capsules, dans le flux. */
.faq-page__tools { display: grid; gap: 16px; }

.faq-page__list { min-width: 0; }

/* ---------- Recherche ---------- */

.faq-search__label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-70);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Champ en capsule (instrument.css), un peu plus serré : l'icône loupe
   ouvre la capsule, l'effacement la ferme. */
.faq-search__field { gap: 4px; padding-left: 18px; }
.faq-search__input { padding: 0 8px; font-size: 1.05rem; }

.faq-search__status {
  margin: 8px 0 0 18px;
  color: var(--ink-70);
  font-size: .95rem;
}

.faq-search__status:empty { display: none; }

/* Sans résultat, la carte sous la recherche le dit déjà : le message
   n'est plus lu qu'à voix haute. */
.faq-search[data-none] .faq-search__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Thèmes ----------

   Sur téléphone et tablette, les thèmes sont des capsules qui passent à la
   ligne, dans le flux, sous la recherche : jamais de défilement latéral.
   Ils ne collent pas : trois rangées de capsules mangeraient l'écran. Sur
   grand écran, ils forment une colonne qui suit la lecture. */

.faq-themes { margin: 0; }

.faq-themes__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-themes__list > li[hidden] { display: none; }

/* Capsules (instrument.css) ; le thème lu passe à l'encre. */
.faq-themes__link {
  min-height: 44px;
  padding: 0 16px;
  font-size: .95rem;
  white-space: nowrap;
}

/* ---------- Questions ---------- */

.faq-page__group {
  /* En-tête et rangée de thèmes au-dessus du titre visé. */
  scroll-margin-top: calc(var(--faq-header) + 84px);
}

.faq-page__group[hidden] { display: none; }
.faq-page__group + .faq-page__group { margin-top: clamp(36px, 4vw, 56px); }

.faq-page__group-title {
  margin: 0 0 14px;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.faq-page__entries {
  display: grid;
  gap: 10px;
}

/* Chaque question est un accordéon souple (instrument.css) : une carte
   souple au repos, une feuille blanche ouverte, comme le modèle déplié de
   l'outil de mesure. */
.faq-entry { scroll-margin-top: calc(var(--faq-header) + 84px); }
.faq-entry[hidden] { display: none; }


/* Aucun résultat : la question passe directement à l'équipe. */
.faq-page__empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 22px 20px;
}

.faq-page__empty[hidden] { display: none; }
.faq-page__empty p { margin: 0; color: var(--ink-70); }
.faq-page__empty .faq-page__empty-title { color: var(--ink); font-weight: 800; font-size: 1.1rem; }
.faq-page__empty .button { margin-top: 8px; }

.faq-page__extra { max-width: 900px; margin-top: 40px; }

/* ---------- Appel final ---------- */

/* Porte vers l'équipe : un aplat d'encre franc, angle net, un seul bouton. */
.faq-page__cta {
  display: grid;
  gap: 22px;
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(26px, 4vw, 48px);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
}

.faq-page__cta h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.faq-page__cta-text p {
  max-width: 44ch;
  margin: 12px 0 0;
  color: rgba(246, 247, 244, .82);
  font-size: 1.05rem;
}

.faq-page__cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.faq-page__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.faq-page__cta .faq-page__link { color: var(--paper); }
.faq-page__cta :focus-visible { outline-color: var(--accent); }

/* ---------- Bureau ---------- */

@media (min-width: 951px) {
  .faq-page { --faq-header: 79px; }

  .faq-page__layout {
    grid-template-columns: minmax(230px, 280px) minmax(0, 860px);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }

  /* Recherche et thèmes forment une colonne qui suit la lecture. */
  .faq-page__tools {
    position: sticky;
    top: calc(var(--faq-header) + 24px);
    display: grid;
    gap: 22px;
  }

  body:has(.site-header[data-hidden="true"]) .faq-page__tools {
    transform: translateY(calc(-1 * var(--faq-header)));
  }

  .faq-themes__list { display: grid; gap: 6px; }

  .faq-themes__link { display: flex; width: 100%; }

  .faq-page__group { scroll-margin-top: calc(var(--faq-header) + 24px); }

  .faq-page__cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .faq-page__cta-actions { justify-content: flex-end; }
}

@media (prefers-reduced-motion: no-preference) {
  .faq-page__tools { transition: transform var(--dur) var(--ease-out-quint); }
}