/* ============================================================
   Alb's Events — Section FAQ
   Accordéon épuré : pas de cartes, séparateurs fins, +/- net.
   Police : Satoshi. Accent : #e28e2a
   ============================================================ */

.faq {
  --faq-ink:    #15140f;
  --faq-ink-2:  #5c5950;
  --faq-line:   rgba(21,18,12,0.12);
  --faq-accent: #e28e2a;
  --faq-ease:   cubic-bezier(0.16,1,0.3,1);
  background: #fff;
  padding: clamp(4.5rem, 9vh, 7rem) clamp(1.5rem, 6vw, 2.5rem);
}
.faq-inner { max-width: 52rem; margin: 0 auto; }
.faq-head { text-align: center; margin-bottom: clamp(2.5rem, 5vh, 3.5rem); }
.faq-head .sf-kicker { color: var(--faq-accent); }
.faq-head .sf-h { color: var(--faq-ink); }

.faq-list { border-top: 1px solid var(--faq-line); }
.faq-row { border-bottom: 1px solid var(--faq-line); }

.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: none; border: none; padding: 1.4rem 0.25rem; margin: 0;
  text-align: left; cursor: pointer; font-family: inherit;
  color: var(--faq-ink);
}
.faq-q h3 { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
.faq-q:hover h3 { color: var(--faq-accent); }

.faq-toggle {
  position: relative; flex-shrink: 0; width: 1.3rem; height: 1.3rem;
}
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--faq-ink);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--faq-ease), background-color 0.2s;
}
.faq-toggle::before { width: 100%; height: 1.5px; }
.faq-toggle::after { width: 1.5px; height: 100%; }
.faq-q[aria-expanded="true"] .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-q[aria-expanded="true"] .faq-toggle::before,
.faq-q[aria-expanded="true"] .faq-toggle::after { background: var(--faq-accent); }

.faq-a {
  height: 0; overflow: hidden;
  transition: height 0.35s var(--faq-ease);
}
.faq-a-inner { padding: 0 0.25rem 1.5rem; max-width: 56ch; }
.faq-a-inner p, .faq-a-inner ol { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--faq-ink-2); }
.faq-a-inner ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; }
.faq-a-inner li::marker { color: var(--faq-accent); font-weight: 700; }

@media (max-width: 560px) {
  .faq-q h3 { font-size: 0.95rem; }
}