/* css/components/accordeon.css */
@layer components {
  .accordeon {
    border-block-end: var(--bordure);

    &:first-of-type {
      border-block-start: var(--bordure);
    }
  }

  .accordeon__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: var(--space-s);
    cursor: pointer;
    list-style: none; /* retire le triangle natif */

    &::-webkit-details-marker {
      display: none; /* idem pour Safari */
    }

    /* Chevron */
    &::after {
      content: "";
      flex-shrink: 0;
      inline-size: 0.6em;
      block-size: 0.6em;
      border-inline-end: 2px solid currentColor;
      border-block-end: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform var(--duree-rapide) var(--easing);
    }

    &:hover {
      color: var(--couleur-mundi);
    }

    &:focus-visible {
      outline: 2px solid var(--couleur-focus);
      outline-offset: 2px;
    }
  }

  .accordeon[open] > .accordeon__entete::after {
    transform: rotate(-135deg);
  }

  .accordeon__titre {
    font-size: var(--fs-l);
  }

  .accordeon__contenu {
    padding-block-end: var(--space-m);
  }

  /* Ouverture animée (navigateurs récents, ignoré ailleurs) */
  .accordeon::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--duree-normale) var(--easing),
                content-visibility var(--duree-normale) allow-discrete;
  }

  .accordeon[open]::details-content {
    block-size: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .accordeon::details-content,
    .accordeon__entete::after {
      transition: none;
    }
  }
}