/* ══════════════════════════════════════════════════════════
   Aurore Énergies · Gabarit F, FAQ (/faq)
   Spécification : design_handoff_site_aurore/Page FAQ.dc.html.
   Mobile d'abord, puis paliers 768 et 1024 px. L'accordéon lui-même
   (faq_list() : .faq-list, .faq__item…) et ses animations sont dans
   style.css et main.js.
   ══════════════════════════════════════════════════════════ */

/* Jetons propres à la page (valeurs du handoff : mobile / 768 / 1024 → 1440).
   Rythme et H2 de thème un cran plus serrés que le reste du site. */
.is-faq {
  --faq-page-py: var(--py);      /* 48 / 72 / 72 → 96 */
  --faq-page-h2: var(--h2);      /* 32 / 40 / 36 → 44 */
}

/* ── En-tête de page : fil d'Ariane, H1, chapô, ancres ──── */
.faq-page-hero {
  display: flex; flex-direction: column; gap: 20px;
  padding-top: 8px; padding-bottom: 48px;
}
.faq-page-hero__title { max-width: 860px; }
.faq-page-hero__lead { max-width: 640px; }

.faq-page-ancres { padding-top: 8px; }
.faq-page-ancres__list { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-page-ancres__link {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 2px solid var(--ink); border-radius: var(--pill);
  background: var(--white); color: var(--ink);
  font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  transition: background-color .15s ease-out;
}
.faq-page-ancres__link:hover { background: var(--yellow); color: var(--ink); }
.faq-page-ancres__count { font-size: 13px; font-weight: 600; color: var(--muted); }

/* ── Une section par thème : H2 puis accordéon ──────────── */
.faq-page-theme {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 20px var(--gap);
  padding-block: var(--faq-page-py);
}
.faq-page-theme__title { font-size: var(--faq-page-h2); }
.faq-page-theme .faq-list { min-width: 0; }

/* ── Relance « Poser une autre question » ───────────────── */
.faq-page-autre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px;
  padding-block: var(--faq-page-py);
}
/* text-wrap: balance, écart assumé avec le handoff : sous 400 px, la phrase
   se coupe « Votre question n’est / pas dans la liste ? » au lieu de laisser
   « liste ? » seul en seconde ligne. Même nombre de lignes, même hauteur. */
.faq-page-autre__text {
  max-width: 560px;
  font-size: 22px; font-weight: 700; line-height: 1.3; text-wrap: balance;
}
/* Handoff : « Poser une autre question → » d'un seul tenant, la flèche
   séparée par une espace (0,24 em en Urbanist, 4 px) et non par l'écart de
   10 px du composant .btn. */
.faq-page-autre__btn { gap: .24em; padding: 0 30px; }

/* ══════════════════════════════════════════════════════════
   Desktop : ≥ 1024 px (progression linéaire jusqu'à 1440 px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* H2 : 36 → 44 px comme le handoff, avec un garde-fou de 1024 à 1077 px.
     Mesuré : « Autoconsommation » vaut 8,489 fois la taille du corps (approche
     −.02em) ; la colonne d'un tiers fait 31,41vw − 49,64 px et la gouttière
     5,77vw − 11,08 px. Le handoff laisse le mot mordre de 34 px sur les 48 px
     de gouttière à 1024 (14 px de blanc avant les questions). Ici, il peut en
     prendre la moitié au plus : (colonne + gouttière / 2) / 8,489, soit
     4,04vw − 6,5 px. À 1024 : 34,9 px au lieu de 36 et 24 px de blanc ; dès
     1077 px, la taille est celle du handoff. */
  .is-faq {
    --faq-page-py: clamp(72px, 5.77vw + 12.92px, 96px);
    --faq-page-h2: min(clamp(36px, 1.923vw + 16.31px, 44px), 4.04vw - 6.5px);
  }
  /* Titre sur 1/3, questions sur 2/3. */
  .faq-page-theme { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
  /* Le mot long déborde dans la gouttière au lieu d'être coupé
     (overflow-wrap: break-word de .h2, utile seulement sur mobile). */
  .faq-page-theme__title { overflow-wrap: normal; }
}