/* ============================================================
   SECTION 8 — FAQ (accordéon)
   L'ouverture utilise grid-template-rows 0fr → 1fr : c'est ce
   qui permet d'animer une hauteur inconnue sans JS de mesure.
   ============================================================ */

.faq{
  padding:70px 46px 66px;
  background:#ffffff;
  --grain-opacity:.1;
}

.faq__head{ max-width:620px; margin:0 auto; text-align:center }
.faq__eyebrow{
  display:inline-block; margin-bottom:14px;
  font-size:10.5px; font-weight:800; letter-spacing:.16em; color:var(--brand);
}
.faq__head h2{
  font-size:clamp(24px, 3vw, 34px);
  font-weight:700; line-height:1.16; letter-spacing:-.032em;
}
.faq__head h2 em{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  color:var(--brand); font-size:1.05em; letter-spacing:-.005em;
}
.faq__head p{
  margin-top:14px;
  font-size:12.5px; line-height:1.75; font-weight:500; color:var(--ink-soft);
}

.faq__list{ max-width:760px; margin:46px auto 0; display:grid; gap:10px }

.faq-item{
  border-radius:16px;
  background:#FBFAF7;
  box-shadow:0 0 0 1px #E9E7E1 inset;
  transition:box-shadow .4s ease, background .4s ease;
}
.faq-item:hover{ box-shadow:0 0 0 1px #D5D2C9 inset }
.faq-item.open{
  background:#fff;
  box-shadow:0 0 0 1px rgba(9,73,47,.3) inset, 0 16px 34px -24px rgba(9,73,47,.4);
}

.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 22px;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:650; letter-spacing:-.015em;
  color:var(--ink); text-align:left;
  transition:color .3s ease;
}
.faq-item.open .faq-q{ color:var(--brand) }

.faq-sign{
  position:relative; flex:0 0 22px;
  width:22px; height:22px; border-radius:50%;
  background:#EDEBE5;
  transition:background .35s ease, transform .45s var(--ease-spring);
}
.faq-item.open .faq-sign{ background:var(--brand); transform:rotate(90deg) }
.faq-sign::before, .faq-sign::after{
  content:""; position:absolute; left:50%; top:50%;
  width:9px; height:1.8px; border-radius:2px;
  background:#5B625D;
  transform:translate(-50%,-50%);
  transition:background .35s ease, transform .45s var(--ease-spring), opacity .3s ease;
}
.faq-sign::after{ transform:translate(-50%,-50%) rotate(90deg) }
.faq-item.open .faq-sign::before,
.faq-item.open .faq-sign::after{ background:#fff }
.faq-item.open .faq-sign::after{ opacity:0 }

/* animation de hauteur sans JS de mesure */
.faq-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease-out);
}
.faq-item.open .faq-a{ grid-template-rows:1fr }
.faq-a > div{ overflow:hidden }
.faq-a p{
  padding:0 22px 20px;
  font-size:12.5px; line-height:1.78; font-weight:500; color:#5B625D;
  opacity:0; transform:translateY(-4px);
  transition:opacity .3s ease, transform .35s ease;
}
.faq-item.open .faq-a p{ opacity:1; transform:none; transition-delay:.12s }
.faq-a b{ color:var(--brand); font-weight:700 }

.faq__cta{
  margin-top:34px; text-align:center;
  font-size:12.5px; font-weight:500; color:var(--ink-soft);
}
.faq__cta a{ color:var(--brand); font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--brand-soft) }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .faq{ padding:56px 26px 52px; border-radius:24px }
  .faq__list{ margin-top:38px }
}
@media (max-width:640px){
  .faq{ padding:44px 16px 42px; border-radius:22px }
  .faq__head p{ font-size:11.5px }
  .faq-q{ padding:17px 16px; font-size:12.5px }
  .faq-a p{ padding:0 16px 18px; font-size:12px }
}