/*
  accordion.css — blocs pliables (FAQ produit, filtres catégorie sur mobile...).
*/
.accordion__item {
  border-bottom: 1px solid var(--color-line);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding-block: var(--space-4);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-brown-dark);
}

.accordion__trigger svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-terracotta-dark);
  transition: transform var(--transition-base);
}

.accordion__trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/*
  Le panneau replié utilise l'attribut HTML natif [hidden] (display: none), pour rester
  correctement exclu de l'arbre d'accessibilité — pas de détournement en CSS ici.
*/
.accordion__panel-inner {
  padding-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}