/* docs/DESIGN.md #5.4 — FAQ en <details> natif, chevron pivotant. */
@layer components {
  .faq-item {
    border-bottom: 1px solid var(--cream-deep);
    padding-block: var(--space-3);
  }

  .faq-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
  }

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

  .faq-item__summary .pictogram {
    transition: transform var(--dur) var(--ease);
  }

  .faq-item[open] .faq-item__summary .pictogram {
    transform: rotate(90deg);
  }

  .faq-item__answer {
    padding-top: var(--space-3);
  }
}