/* Conteneur */
.accordion-container {
  width: 100%;
  max-width: 800px;
  margin: 1rem auto;
  font-family: Arial, sans-serif;
}

.accordion-item {
  margin-bottom: 1rem;
}

.accordion-header {
  padding-bottom: 0;
}

/* En-tête bouton */
.accordion-trigger {
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 1rem;
  width: 100%;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Icône “+ / −” */
.accordion-trigger .icon {
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

/* État ouvert */
.accordion-trigger[aria-expanded="true"] {
  background: #e0e0e0;
}

.accordion-trigger[aria-expanded="true"] .icon {
  transform: rotate(45deg); /* + devient − */
}

/* Contenu des panneaux */
.accordion-panel {
  padding: 1rem;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #fff;
}

/* Focus clavier visible sur les boutons */
.accordion-trigger:focus-visible {
  outline: 3px solid #005fcc;      /* couleur bien contrastée */
  outline-offset: 2px;
  background: #e8f0fe;             /* léger fond pour renforcer la lisibilité */
}

/* Fallback navigateurs sans :focus-visible */
.accordion-trigger:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* Focus + état ouvert (cohérence visuelle) */
.accordion-trigger[aria-expanded="true"]:focus-visible {
  background: #dbe7f5;
}

/* Option recommandée : focus visible sur le panneau actif - Utile pour les lecteurs d’écran + navigation Tab logique. */
.accordion-panel:focus-within {
  box-shadow: inset 0 0 0 2px #005fcc;
}

/* Animation focus douce */
.accordion-trigger {
  transition: background 0.2s ease, outline-color 0.2s ease;
}

/* Couleur focus liée au thème */
:root {
  --focus-color: #005fcc;
}

.accordion-trigger:focus-visible {
  outline-color: var(--focus-color);
}