FAQ (accordéon)

<style>
.faq-accordion {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem;
  font-family: sans-serif;
}

.faq-accordion__item {
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
}

.faq-accordion__item summary {
  cursor: pointer;
  font-weight: 600;
  color: #111;

  /* Enlève la petite flèche par défaut du navigateur pour
     un rendu plus propre et cohérent entre navigateurs */
  list-style: none;
}

.faq-accordion__item summary::-webkit-details-marker {
  display: none;
}

/* Petit "+" qui devient "-" quand la question est ouverte */
.faq-accordion__item summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: #888;
}

.faq-accordion__item[open] summary::after {
  content: "–";
}

.faq-accordion__item p {
  margin-top: 0.75rem;
  color: #555;
  line-height: 1.6;
}

</style>

<div class="faq-accordion">
  <!-- <details>/<summary> est une balise HTML native : le
       dépliage/repliage marche tout seul, sans une ligne de JS,
       et c'est nativement accessible au clavier et aux lecteurs
       d'écran. -->
  <details class="faq-accordion__item">
    <summary>Combien de temps prend un projet ?</summary>
    <p>En moyenne 4 à 6 semaines selon la complexité du site.</p>
  </details>
  <details class="faq-accordion__item">
    <summary>Proposez-vous la maintenance ?</summary>
    <p>Oui, nous proposons des forfaits de maintenance mensuels adaptés à vos besoins.</p>
  </details>
  <details class="faq-accordion__item">
    <summary>Quels sont vos tarifs ?</summary>
    <p>Nos tarifs dépendent du périmètre du projet. Contactez-nous pour un devis personnalisé.</p>
  </details>
</div>