/* FAQ — lignes réglées, un seul volet ouvert à la fois. */

.faq-liste { border-top: 1px solid var(--trait); max-width: 82ch; }
.faq-item { border-bottom: 1px solid var(--trait); }

.faq-question {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 18px;
  gap: var(--sp-4);
  align-items: center;
  padding-block: var(--sp-4);
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-sous-titre), "wght" var(--wght-sous-titre);
  font-size: var(--fs-h3);
  letter-spacing: -0.012em;
  color: var(--texte);
  transition: color var(--dur-1) var(--ease-sortie);
}
.faq-question:hover { color: var(--orange-texte); }

.faq-signe { position: relative; width: 14px; height: 14px; justify-self: end; }
.faq-signe::before,
.faq-signe::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-sortie);
}
.faq-signe::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-signe::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq-item.est-ouvert .faq-signe::after { transform: translateX(-50%) scaleY(0); }
.faq-item.est-ouvert .faq-question { color: var(--orange-texte); }

.faq-reponse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-sortie); }
.faq-item.est-ouvert .faq-reponse { grid-template-rows: 1fr; }
.faq-reponse-inner { overflow: hidden; }
.faq-reponse p {
  padding-bottom: var(--sp-4);
  padding-right: var(--sp-7);
  color: var(--texte-doux);
  line-height: 1.65;
  max-width: 68ch;
}
@media (max-width: 600px) { .faq-reponse p { padding-right: 0; } }
.faq-item[hidden] { display: none; }