/* ============================================================
   rs1/faq — questions fréquentes en accordéon
   Suréligne et bouton : mp-tokens.css
   Grille : 1 colonne → en-tête | questions dès 961px
   ============================================================ */

.mp-faq{
  padding-block: var(--mp-section-sm);
  color: var(--mp-texte);
}
.mp-faq--blanc{ background: var(--mp-blanc) }
.mp-faq--brume{ background: var(--mp-bleu-brume) }

.mp-faq__in{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.mp-faq__titre{
  margin: 0 0 1rem;
  font-size: var(--mp-t-h2);
  font-weight: 800;
  color: var(--mp-encre);
}
.mp-faq__intro{
  margin: 0 0 1.75rem;
  font-size: var(--mp-t-lg);
  line-height: var(--mp-lh-texte);
}

.mp-faq__liste{ display: grid; gap: .85rem }

.mp-faq__item{
  border: 1px solid var(--mp-trait);
  border-radius: var(--mp-r-sm);
  background: var(--mp-blanc);
  transition: box-shadow var(--mp-dur) ease, border-color var(--mp-dur) ease;
}
.mp-faq__item[open]{
  border-color: var(--mp-bleu-voile);
  box-shadow: var(--mp-sh-1);
}

.mp-faq__question{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--mp-r-sm);
  list-style: none;
  cursor: pointer;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-base);
  font-weight: 700;
  line-height: 1.4;
  color: var(--mp-encre);
}
.mp-faq__question::-webkit-details-marker{ display: none }
.mp-faq__question::marker{ content: "" }
.mp-faq__question:hover{ color: var(--mp-bleu) }
.mp-faq__question:focus-visible{
  outline: 3px solid var(--mp-bleu);
  outline-offset: 2px;
}

.mp-faq__chevron{
  flex: none;
  color: var(--mp-bleu);
  transition: transform var(--mp-dur) ease;
}
.mp-faq__item[open] .mp-faq__chevron{ transform: rotate(180deg) }

.mp-faq__reponse{
  padding: 0 1.35rem 1.3rem;
  font-size: var(--mp-t-base);
  line-height: var(--mp-lh-texte);
}
.mp-faq__reponse p{ margin: 0 0 .75rem }
.mp-faq__reponse p:last-child{ margin-bottom: 0 }

@media (min-width: 961px){
  .mp-faq__in{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) }
  .mp-faq__entete{
    position: sticky;
    top: calc(var(--header-height, 76px) + 5rem);
  }
}

@media (prefers-reduced-motion: reduce){
  .mp-faq__item,
  .mp-faq__chevron{ transition: none }
}