/*
 * La page Questions fréquentes (page-questions-frequentes.php).
 *
 * Une LISTE qu'on parcourt, pas des cartes : une seule colonne, une question
 * par ligne entre deux filets, qui court jusqu'au bord droit de la page comme
 * l'en-tête et l'appel final ; seules les réponses gardent la largeur d'un
 * texte. Sur ordinateur, les
 * rubriques à gauche, qui restent sous les yeux en défilant ; sur téléphone,
 * elles passent en tête, en liste à filets comme le sommaire des parcours.
 * Les réponses gardent le corps des volets de FAQ (.faq__reponse, parcours.css).
 */

.faq-page {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  margin-bottom: 56px;
}

.faq-page__sommaire {
  position: sticky;
  top: var(--cnpr-decalage-haut, 110px);
}
.faq-page__sommaire ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--soleil-eau-2);
}
.faq-page__sommaire a {
  display: block;
  margin-left: -2px;
  padding: 9px 0 9px 16px;
  border-left: 2px solid transparent;
  font-weight: 700;
  line-height: 1.35;
  color: var(--soleil-marine);
  text-decoration: none;
}
/* La rubrique lue en ce moment (posé par js/questions-frequentes.js). */
.faq-page__sommaire a[aria-current="true"] { border-left-color: var(--soleil-piscine); color: var(--soleil-piscine); }
@media (hover: hover) {
  .faq-page__sommaire a:hover { border-left-color: var(--soleil-jaune); }
}

.faq-rubrique + .faq-rubrique { margin-top: 56px; }
.faq-rubrique h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
}
.faq-rubrique__intro { margin: 10px 0 18px; font-size: 17px; color: var(--soleil-gris); }

.faq-liste { border-top: 1px solid var(--soleil-eau-2); }
.faq-liste__item { border-bottom: 1px solid var(--soleil-eau-2); }
.faq-liste__item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 18px 40px 18px 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--soleil-marine);
}
.faq-liste__item summary::-webkit-details-marker { display: none; }
.faq-liste__item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 14px;
  font-family: var(--soleil-titre);
  font-size: 22px;
  color: var(--soleil-piscine);
}
.faq-liste__item[open] summary::after { content: "–"; }
@media (hover: hover) {
  .faq-liste__item summary:hover { color: var(--soleil-piscine); }
}
.faq-liste__item .faq__reponse { max-width: 64ch; }
/* Arrivé par un lien vers la réponse : un rappel d'eau claire, le temps de
   la repérer. */
.faq-liste__item:target { background: var(--soleil-eau); box-shadow: -12px 0 0 var(--soleil-eau), 12px 0 0 var(--soleil-eau); }

@media (max-width: 960px) {
  .faq-page { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faq-page__sommaire { position: static; }
  .faq-page__sommaire ul { border-left: 0; border-top: 2px solid var(--soleil-eau-2); }
  .faq-page__sommaire li { border-bottom: 2px solid var(--soleil-eau-2); }
  .faq-page__sommaire a {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-left: 0;
    padding: 14px 2px;
    border-left: 0;
  }
  .faq-page__sommaire a::after { content: "↓"; font-weight: 400; color: var(--soleil-piscine); }
  .faq-page__sommaire a[aria-current="true"] { color: var(--soleil-marine); }
}