/*
  Studio 36 — Accordeons (design.md §5.6). Hauteur animee via
  grid-template-rows (0fr -> 1fr) pour eviter le jump de height:auto.
  Comportement strict (FAQ, un seul panneau ouvert) vs multi-ouvert (options)
  gere par accordion.js, pas par ce CSS.
*/

.accordion-item {
  border-bottom: 1px solid var(--border-hairline);
}

.accordion-item:first-child {
  border-top: 1px solid var(--border-hairline);
}

.accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line);
  color: var(--text-primary);
  transition: color var(--duration-standard) var(--ease-out);
}

/* Survol = teinte or (intention), ouverture = rouge (etat actif) : meme
   logique bicolore que les boutons, appliquee ici au chevron ET au titre. */
.accordion__header:hover {
  color: var(--accent-warm);
}

.accordion__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform var(--duration-standard) var(--ease-out), color var(--duration-standard) var(--ease-out);
}

.accordion__header:hover .accordion__chevron {
  color: var(--accent-warm);
}

.accordion__header[aria-expanded="true"] .accordion__chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.accordion__header[aria-expanded="true"]:hover .accordion__chevron {
  color: var(--accent);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-in-out;
}

.accordion__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.accordion__panel-inner {
  overflow: hidden;
}

.accordion__content {
  padding-bottom: var(--space-5);
  color: var(--text-secondary);
  max-width: 75ch;
}

@media (prefers-reduced-motion: reduce) {
  .accordion__panel {
    transition: none;
  }

  .accordion__chevron {
    transition: none;
  }
}