<div class="accordion-container">
  <details class="accordion" name="faq">
    <summary class="accordion-summary">
      Quelles sont les caractéristiques de cet accordéon ?
      <span class="icon"></span>
    </summary>
    <div class="accordion-content">
      <p>Il est conçu uniquement avec les fonctionnalités standard HTML et CSS, sans utiliser JavaScript. Il est très léger et excelle en termes de SEO et d'accessibilité (y compris la prise en charge du clavier).</p>
    </div>
  </details>
  
  <details class="accordion" name="faq">
    <summary class="accordion-summary">
      Puis-je ouvrir plusieurs éléments en même temps ?
      <span class="icon"></span>
    </summary>
    <div class="accordion-content">
      <p>En définissant l'attribut name sur la même valeur, vous pouvez activer un contrôle exclusif (l'ouverture de l'un ferme l'autre).</p>
    </div>
  </details>
</div>

/* Style du conteneur */
.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* Corps de l'accordéon */
.accordion {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Style du résumé (titre) */
.accordion-summary {
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none; /* Masquer le triangle par défaut */
  color: #1e293b;
  transition: background-color 0.2s ease;
  user-select: none;
}

/* Masquer le triangle par défaut pour Safari */
.accordion-summary::-webkit-details-marker {
  display: none;
}

.accordion-summary:hover {
  background-color: #f8fafc;
}

/* Soulignement du résumé à l'état ouvert */
.accordion[open] .accordion-summary {
  border-bottom: 1px solid #e2e8f0;
}

/* Style de l'icône d'ouverture/fermeture */
.icon {
  position: relative;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 1rem;
}

/* Ligne horizontale et verticale de l'icône */
.icon::before,
.icon::after {
  content: '';
  position: absolute;
  background-color: #64748b;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

.icon::before {
  width: 16px;
  height: 2px;
}

.icon::after {
  width: 2px;
  height: 16px;
}

/* Animation à l'ouverture de l'accordéon (le + devient -) */
.accordion[open] .icon::after {
  transform: rotate(90deg) scaleY(0);
}

.accordion[open] .icon::before {
  background-color: #3b82f6;
}

/* Style du contenu */
.accordion-content {
  padding: 1.5rem;
  color: #475569;
  line-height: 1.6;
  animation: fadeDown 0.3s ease-out forwards;
}

.accordion-content p {
  margin: 0;
}

/* Animation d'apparition en douceur */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}