/* =============================================================
   Socle · Accordéon (.sc-accordion)
   Bâti sur <details> et <summary> natifs : pli, clavier et ARIA
   viennent du navigateur, comme le dialogue les prend de <dialog>.
   Aucun JavaScript.
   Anatomie : .sc-accordion (<details>) > __summary > __title,
              __meta, puis __body.
   Variante : --plain · Groupe : .sc-accordion-group
   Un attribut name partagé n'en laisse qu'un ouvert.
   ============================================================= */

.sc-accordion {
  /* Tokens de composant : la variante et le groupe ne font que
     réassigner ceci. */
  --_accordion-bg: var(--color-bg-surface);
  --_accordion-border: var(--color-border);
  --_accordion-border-width: var(--border-hairline);
  --_accordion-radius: var(--radius-surface);

  background: var(--_accordion-bg);
  border: var(--_accordion-border-width) solid var(--_accordion-border);
  border-radius: var(--_accordion-radius);
  color: var(--color-text);
}

/* ---- Sommaire ----
   Les tokens privés vivent sur le sommaire, donc une ligne repliée
   reste stylée hors de son .sc-accordion. Coins pilotés haut et bas
   séparément : le fond de survol épouse le cadre sur un bord, et
   reste droit quand le corps continue dessous. */

.sc-accordion__summary {
  --_summary-padding: var(--padding-m) var(--padding-l);
  --_summary-text: var(--color-text);
  --_summary-bg: transparent;
  --_summary-bg-hover: var(--color-bg-hover);
  --_summary-bg-active: var(--color-bg-active);
  --_summary-chevron: var(--color-text-muted);
  --_summary-chevron-rotate: 45deg;   /* fermé : la pointe descend */
  --_summary-chevron-size: var(--space-8);  /* dimension structurelle */
  --_summary-radius-start: var(--radius-surface);
  --_summary-radius-end: 0;

  display: flex;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--_summary-padding);
  background: var(--_summary-bg);
  border-start-start-radius: var(--_summary-radius-start);
  border-start-end-radius: var(--_summary-radius-start);
  border-end-start-radius: var(--_summary-radius-end);
  border-end-end-radius: var(--_summary-radius-end);
  color: var(--_summary-text);
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--leading-snug);
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--motion-fast),
    color var(--motion-fast);
}

/* Le triangle du navigateur laisse la place au chevron maison. */
.sc-accordion__summary::-webkit-details-marker {
  display: none;
}

/* Replié, le sommaire occupe toute la boîte et ses coins suivent le
   rayon du cadre. La variante dépouillée et le groupe remettent
   --_accordion-radius à zéro, le sommaire suit. */
.sc-accordion:not([open]) > .sc-accordion__summary {
  --_summary-radius-end: var(--_accordion-radius);
}

/* Icône de tête optionnelle, discrète comme dans un menu. */
.sc-accordion__summary svg {
  flex: none;
  color: var(--color-text-muted);
}

.sc-accordion__title {
  flex: 1;
}

/* Complément de droite (« 3 éléments »), avant le chevron. */
.sc-accordion__meta {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  font-weight: var(--text-body-weight);
}

/* ---- Chevron ----
   Deux bordures et une rotation, en currentColor : pas d'image,
   et le pivot devient une simple réassignation d'angle. */

.sc-accordion__summary::after {
  content: "";
  flex: none;
  width: var(--_summary-chevron-size);
  height: var(--_summary-chevron-size);
  border-inline-end: var(--icon-stroke-width) solid currentColor;
  border-block-end: var(--icon-stroke-width) solid currentColor;
  color: var(--_summary-chevron);
  transform: rotate(var(--_summary-chevron-rotate));
  transition:
    transform var(--motion-fast),
    color var(--motion-fast);
}

.sc-accordion[open] > .sc-accordion__summary {
  --_summary-chevron-rotate: -135deg;   /* ouvert : la pointe monte */
}

/* ---- États ----
   Le survol renforce le chevron : la variante dépouillée n'a pas de
   surface à teindre. La garde couvre les deux emplacements de
   data-disabled, le parent et le sommaire. */

.sc-accordion:not([data-disabled]) > .sc-accordion__summary:is(:hover, [data-state="hover"]):not([data-disabled]) {
  --_summary-chevron: var(--color-text);
  background: var(--_summary-bg-hover);
}

.sc-accordion:not([data-disabled]) > .sc-accordion__summary:is(:active, [data-state="active"]):not([data-disabled]) {
  --_summary-chevron: var(--color-text);
  background: var(--_summary-bg-active);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-accordion__summary[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* <summary> n'accepte pas l'attribut disabled : l'état passe par
   data-disabled, à doubler d'un tabindex="-1" pour le sortir de
   l'ordre de tabulation. */
.sc-accordion[data-disabled] > .sc-accordion__summary,
.sc-accordion__summary[data-disabled] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Corps ----
   Il prolonge le sommaire, donc il n'en répète pas la
   respiration haute. */

.sc-accordion__body {
  padding: var(--padding-s) var(--padding-l) var(--padding-l);
  font-size: var(--text-body-s-size);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.sc-accordion__body > * + * {
  margin-block-start: var(--gap-m);
}

/* Le dépli se lit : le corps arrive en fondu, décalé d'un cran.
   base.css annule l'animation sous prefers-reduced-motion. */
.sc-accordion[open] > .sc-accordion__body {
  animation: sc-accordion-reveal var(--motion-base);
}

@keyframes sc-accordion-reveal {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-4) * -1));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Variante dépouillée ----
   Ni cadre ni fond : une liste de questions posée à même la
   page. Deux items qui se suivent partagent un filet. */

.sc-accordion--plain {
  --_accordion-bg: transparent;
  --_accordion-border-width: 0;
  --_accordion-radius: 0;
}

.sc-accordion--plain > .sc-accordion__summary {
  --_summary-padding: var(--padding-m) 0;
  --_summary-bg-hover: transparent;
  --_summary-bg-active: transparent;
  --_summary-radius-start: 0;
  --_summary-radius-end: 0;
}

.sc-accordion--plain > .sc-accordion__body {
  padding-inline: 0;
}

.sc-accordion--plain + .sc-accordion--plain {
  border-block-start: var(--border-hairline) solid var(--color-border);
}

/* ---- Groupe ----
   Un cadre pour la pile, un filet partagé. Pas de rognage : l'anneau
   de focus du premier sommaire y serait coupé. */

.sc-accordion-group {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-surface);
}

.sc-accordion-group > .sc-accordion {
  --_accordion-bg: transparent;
  --_accordion-border-width: 0;
  --_accordion-radius: 0;
}

.sc-accordion-group > .sc-accordion > .sc-accordion__summary {
  --_summary-radius-start: 0;
  --_summary-radius-end: 0;
}

.sc-accordion-group > .sc-accordion + .sc-accordion {
  border-block-start: var(--border-hairline) solid var(--color-border);
}

/* Seuls les items des extrémités épousent les angles du cadre. */
.sc-accordion-group > .sc-accordion:first-of-type > .sc-accordion__summary {
  --_summary-radius-start: var(--radius-surface);
}

.sc-accordion-group > .sc-accordion:last-of-type:not([open]) > .sc-accordion__summary {
  --_summary-radius-end: var(--radius-surface);
}