/* Page /faq — complète content-page.css déjà chargé (hgroup/eyebrow,
   ul[data-faq] accordéons, ul[data-cards]/article/a[data-cta] : déjà
   couverts, vérifiés avant d'écrire ce fichier). Vocabulaire propre à cette
   page : sommaire à onglets (bascule JS des 7 sections thématiques, pas un
   simple ancrage), listes imbriquées dans les réponses, statistique géante
   dans une carte, liste de comparatif à tirets (au lieu des coches
   génériques). Repris de moltow-08-2026/faq/index.html. */

body { margin: 0; line-height: 1.6; }

/* Sommaire à onglets (pilules) */
nav[aria-label="Sommaire de la FAQ"] > ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--measure);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
nav[aria-label="Sommaire de la FAQ"] a {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 700;
  background: var(--card);
}
nav[aria-label="Sommaire de la FAQ"] a:hover {
  border-color: var(--terra);
  color: var(--terra);
}
nav[aria-label="Sommaire de la FAQ"] a.actif,
nav[aria-label="Sommaire de la FAQ"] a.actif:hover {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}

/* Une seule section thématique visible à la fois (basculée par le script
   inline en fin de page — pas un simple lien d'ancrage/scroll). */
main > section[hidden] {
  display: none !important;
}

/* Titre de section thématique gardé dans le DOM pour l'accessibilité/SEO
   (h2 par thème) mais masqué visuellement : le sommaire ci-dessus fait déjà
   office de titre visible. */
.faq-h2-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sections FAQ resserrées (pas le rythme "section pleine hauteur" générique
   de content-page.css — plusieurs thèmes s'enchaînent sans coupure visuelle
   marquée, un seul est visible à la fois de toute façon). */
main > section:has(ul[data-faq]) {
  padding-block: 1.6rem;
  background: var(--bg) !important;
}
main > section:first-of-type {
  padding-bottom: 1.6rem;
}

/* Listes imbriquées dans une réponse d'accordéon (pas dans le vocabulaire
   générique — les FAQ précédentes n'avaient que du texte simple) */
main section > ul[data-faq] details > ul,
main section > ul[data-faq] details > ol {
  margin: 0 1.3rem 1.2rem;
  padding-inline-start: 1.2rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
main section > ul[data-faq] details li {
  margin-bottom: 0.25em;
}

/* Carte "pourquoi nous choisir" : statistique géante */
main section > ul[data-cards] article > p > strong[data-stat] {
  display: block;
  font-size: var(--step-2);
  font-weight: 900;
  color: var(--terra);
  line-height: 1.1;
}

/* Carte comparatif : liste à tirets avec ✓/✗ déjà dans le texte source —
   annule la coche générique de content-page.css (article > ul > li::before)
   pour ne pas superposer une 2e coche, remplace par un séparateur pointillé. */
main section > ul[data-cards] article > ul {
  margin: 0 1.3rem 1.3rem;
  padding: 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
main section > ul[data-cards] article > ul > li {
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--line);
}
main section > ul[data-cards] article > ul > li::before {
  content: none;
}
main section > ul[data-cards] article > ul > li:last-child {
  border-bottom: none;
}