/*
 * RISAER — Page « Questions fréquentes » (FAQ-01)
 *
 * Feuille DÉDIÉE, chargée par la seule page /faq (templates/faq/index.html.twig,
 * bloc head_extra) : risaer.css n'est pas modifiée, les autres pages gardent
 * exactement leur rendu. Elle complète les classes du gabarit des pages d'axe
 * (detail-hero, detail-article, detail-cta-wrap…) par l'accordéon.
 *
 * L'accordéon est un <details>/<summary> natif : ouverture au clavier (Entrée,
 * Espace) et sans JavaScript. Le triangle natif est masqué et remplacé par un
 * « + » / « − » dessiné en CSS (pas d'image). Zone cliquable d'au moins 44 px,
 * anneau de focus visible, mouvement coupé si l'utilisateur le demande.
 * Couleurs de la charte (variables de risaer.css) ; aucun style en ligne (CSP).
 */

/* Liste des questions : filets fins entre les éléments */
.faq-list {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Ligne de question : toute la ligne se clique, 44 px minimum */
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  color: #fff;
  transition: color 0.2s ease;
}
/* Retire le triangle natif (Chromium, Firefox, Safari) */
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { content: ""; }
.faq-item__question:hover { color: var(--green-line); }

/* Anneau de focus visible au clavier */
.faq-item__question:focus-visible {
  outline: 2px solid var(--green-line);
  outline-offset: 2px;
}

.faq-item__text { flex: 1 1 auto; min-width: 0; }

/* Icône « + » (barres croisées en pseudo-éléments), « − » une fois ouvert */
.faq-item__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: var(--green-line);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-item__icon::after { transform: rotate(0deg); opacity: 0; }

/* Réponse : mêmes paragraphes que le corps des pages d'axe */
.faq-item__answer { padding: 0 4px 8px; }
.detail-article .faq-item__answer p { margin-bottom: 14px; }

@media (max-width: 680px) {
  .faq-item__question { font-size: 18px; padding: 16px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__question,
  .faq-item__icon::before,
  .faq-item__icon::after { transition: none; }
}

/* Bandeau compact : la page FAQ n'a pas de photo d'en-tête, le bandeau des pages
   d'axe (40vh) y laisserait un grand vide au-dessus du titre. */
.faq-hero {
  height: auto;
  min-height: 0;
  padding-top: calc(var(--nav-h) + 56px);
}