/**
 * Questions fréquentes — voir inc/seo.php (ln_faq_shortcode)
 *
 * Comme carte.css : aucune valeur d'apparence en dur, tout vient des jetons
 * --ln-* déclarés en tête du CSS Divi (cf. docs/ui-ux.md § Système de couleurs).
 *
 * ⚠️ Spécificité — même piège que pour l'encart carte. Le CSS du site pose
 *   h2, .et_pb_module h2 { font-size: clamp(2rem, 4.4vw, 3.125rem) !important }
 * et `!important` seul ne tranche pas : entre deux déclarations !important, c'est
 * la spécificité qui gagne. Les sélecteurs ci-dessous s'appuient donc sur les id
 * que les éléments portent déjà (#ln-faq-titre sert à aria-labelledby, #creations
 * et #booking sont les ancres du menu) pour passer devant.
 */

/*
 * La section est ajoutée à la suite du contenu Divi, donc hors de ses colonnes :
 * elle n'hérite d'aucune largeur. 1080px est la largeur de rangée par défaut de
 * Divi — la FAQ s'aligne ainsi sur le reste de la page au lieu de filer d'un
 * bord à l'autre.
 */
.ln-faq {
  box-sizing: border-box;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--ln-s7, 48px) var(--ln-s4, 16px);
}

#ln-faq-titre.ln-faq__titre {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
  line-height: 1.15 !important;
  margin: 0 0 var(--ln-s5, 24px) !important;
}

.ln-faq__liste {
  border-top: 1px solid var(--ln-line, #ECE3DF);
}

.ln-faq__item {
  border-bottom: 1px solid var(--ln-line, #ECE3DF);
}

/*
 * Le marqueur natif du <details> est retiré au profit d'un chevron dessiné en
 * CSS : les deux implémentations natives (triangle WebKit, flèche Firefox) ne se
 * ressemblent pas et aucune ne suit la couleur du site.
 */
.ln-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ln-s3, 12px);
  /* Cible tactile : WCAG 2.5.5 demande 44px, et une question se tape au pouce. */
  min-height: 44px;
  padding: var(--ln-s3, 12px) 0;
  cursor: pointer;
  list-style: none;
}

.ln-faq__question::-webkit-details-marker { display: none; }

/*
 * (0,3,1) : passe devant `.et_pb_module h3` (0,1,1) comme devant un `h3` nu.
 * La famille et la couleur héritées de Divi sont les bonnes — on n'y touche pas,
 * seule la taille est ramenée à celle d'une question de liste.
 */
.ln-faq .ln-faq__question h3 {
  font-size: 1.0625rem !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 500;
}

.ln-faq__question::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 2px;
  border-right: 2px solid var(--ln-rose-700, #A8443C);
  border-bottom: 2px solid var(--ln-rose-700, #A8443C);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--ln-dur, 220ms) var(--ln-ease, cubic-bezier(.22,.61,.36,1));
}

.ln-faq__item[open] > .ln-faq__question::after {
  transform: rotate(-135deg);
}

.ln-faq__question:hover h3,
.ln-faq__question:focus-visible h3 {
  color: var(--ln-rose-700, #A8443C);
}

.ln-faq__reponse {
  padding: 0 0 var(--ln-s4, 16px);
  /* Une ligne de réponse plus courte que la largeur de la section : au-delà de
     ~75 caractères l'œil perd la ligne suivante. */
  max-width: 62ch;
}

.ln-faq__reponse p {
  margin: 0;
  line-height: 1.6;
  color: var(--ln-ink-soft, #4A4653);
}

.ln-faq__reponse a {
  color: var(--ln-rose-700, #A8443C);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ln-faq__reponse a:hover,
.ln-faq__reponse a:focus-visible { color: var(--ln-rose-800, #8C3A34); }

/* --- titres rendus aux sections qui n'en avaient pas ---------------------- */

/*
 * « Créations » et « Prendre rendez-vous », insérés par ln_seo_titres_de_section().
 * Les deux sélecteurs valent (1,1,0) et passent donc devant `.et_pb_module h2`.
 *
 * #creations porte un fond d'image : le titre y est centré, comme le reste de la
 * section. #booking est un module de code au fil du texte : titre aligné à
 * gauche, marge basse pour ne pas coller au tunnel de réservation.
 */
#creations > .ln-titre-section,
#booking > .ln-titre-section {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
  line-height: 1.15 !important;
}

#creations > .ln-titre-section {
  text-align: center;
  margin: 0 0 var(--ln-s5, 24px) !important;
  padding: var(--ln-s6, 32px) var(--ln-s4, 16px) 0 !important;
}

#booking > .ln-titre-section {
  margin: 0 0 var(--ln-s5, 24px) !important;
}

/*
 * Ligne de présentation sous « Créations ». Centrée sous le titre, largeur de
 * lecture bornée : elle donne aux moteurs et aux IA la description que la
 * galerie d'images ne porte pas.
 */
#creations > .ln-intro-section {
  max-width: 60ch;
  margin: calc(-1 * var(--ln-s3, 12px)) auto var(--ln-s5, 24px) !important;
  padding: 0 var(--ln-s4, 16px);
  text-align: center;
  line-height: 1.6;
  color: var(--ln-ink-soft, #4A4653);
}

@media (prefers-reduced-motion: reduce) {
  .ln-faq__question::after { transition: none; }
}