/*
 * wp-content/themes/msf/assets/css/components/accordion.css
 * Composant accordeon partage par single-training.php et single-skill.php.
 *
 * Le markup repose sur <details>/<summary> natifs : l'ouverture, la
 * focalisation clavier et la restitution aux lecteurs d'ecran sont assurees
 * par le navigateur, sans JavaScript. assets/js/accordion.js n'ajoute qu'une
 * amelioration progressive (ouverture de l'element cible par l'ancre d'URL).
 *
 * Classes unifiees .accordion__* (les anciennes .training__accordion-* /
 * .skill__accordion-* dupliquaient les memes regles). Les blocs de page
 * .training__accordion / .skill__accordion ne portent plus que l'espacement.
 *
 * Mobile-first strict. S'appuie sur assets/css/base/token.css.
 */

.accordion {
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
  padding: 0 6vw 6vh;
}

.accordion__item {
  background-color: var(--surface-container);
  border: 1px solid var(--outline);
  border-radius: var(--corner-radius);
  overflow: hidden;
}

/*
 * <summary> : on retire le marqueur natif (triangle) au profit du chevron SVG,
 * en couvrant les deux implementations (::marker standard,
 * ::-webkit-details-marker pour Safari).
 */
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2vh 5vw;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary::marker {
  content: "";
}

.accordion__summary:hover {
  background-color: var(--surface-container-var);
}

/* Anneau de focus visible : le <summary> est focalisable au clavier. */
.accordion__summary:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: -2px;
}

.accordion__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.accordion__label svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  fill: var(--secondary);
  stroke: none;
}

.accordion__title {
  font-size: var(--headline-small-font-size);
  line-height: var(--headline-small-line-height);
  font-weight: var(--bold-weight);
  margin: 0;
}

.accordion__arrow {
  flex-shrink: 0;
  width: 0.6rem;
  height: 1rem;
  fill: var(--secondary);
  stroke: none;
  transform: rotateZ(90deg);
  transition: transform 0.25s ease;
}

.accordion__item[open] > .accordion__summary .accordion__arrow {
  transform: rotateZ(-90deg);
}

.accordion__body {
  padding: 0 5vw 3vh;
}

/*
 * Animation d'ouverture, uniquement si le navigateur sait interpoler
 * height: auto. Ailleurs, <details> s'ouvre instantanement : le contenu reste
 * accessible, seule la transition est absente.
 */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .accordion__item {
    interpolate-size: allow-keywords;
  }

  .accordion__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }

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

@media (prefers-reduced-motion: reduce) {

  .accordion__arrow,
  .accordion__item::details-content {
    transition: none;
  }
}

.accordion__body p,
.accordion__body li {
  font-size: var(--body-large-font-size);
  line-height: var(--body-large-line-height);
  opacity: 0.9;
}

/*
 * Les puces sont retablies localement : assets/css/base/reset.css applique
 * list-style: none globalement, ce qui rend illisibles les enumerations de
 * prerequis / objectifs / debouches.
 */
.accordion__body ul,
.accordion__body ol {
  padding-left: 1.2rem;
  margin: 0;
}

.accordion__body ul {
  list-style: disc;
}

.accordion__body ol {
  list-style: decimal;
}

.accordion__body li::marker {
  color: var(--secondary);
}

.accordion__body h3 {
  color: var(--secondary);
  font-size: var(--headline-small-font-size);
  line-height: var(--headline-small-line-height);
  margin-bottom: 0.75vh;
}

/* Contenus issus d'un champ wysiwyg : espacement vertical entre blocs. */
.accordion__body--rich> :where(p, ul, ol, h2, h3, h4, table) {
  margin-bottom: 1.5vh;
}

.accordion__body--rich> :last-child {
  margin-bottom: 0;
}

.accordion__body--rich a {
  color: var(--secondary);
  text-decoration: underline;
}

/* Grille de definitions (chiffres cles) rendue dans un corps d'accordeon. */
.accordion__stats {
  display: grid;
  gap: 1.5vh;
  margin: 0;
}

.accordion__stat dt {
  font-size: var(--body-medium-font-size);
  line-height: var(--body-medium-line-height);
  color: var(--on-surface-var);
  opacity: 0.6;
}

/*
 * La couleur est declaree explicitement : token.css ne colore que
 * h1-h6/p/a/li/span, un <dd> heriterait donc du noir par defaut du
 * navigateur et deviendrait illisible en theme sombre.
 */
.accordion__stat dd {
  color: var(--on-surface);
  font-size: var(--body-large-font-size);
  line-height: var(--body-large-line-height);
  font-weight: var(--bold-weight);
  margin: 0;
}

/* Date de communication du chiffre, sous la valeur. */
.accordion__stat-date {
  display: block;
  font-size: var(--body-medium-font-size);
  line-height: var(--body-medium-line-height);
  font-weight: normal;
  opacity: 0.6;
}

@media (min-width: 768px) {
  .accordion {
    padding: 0 8vw 6vh;
    gap: 2vh;
  }

  .accordion__summary {
    padding: 2.5vh 4vw;
  }

  .accordion__body {
    padding: 0 4vw 3vh;
  }

  .accordion__stats {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 2vh 2vw;
  }
}

@media (min-width: 1024px) {
  .accordion {
    padding: 0 10vw 8vh;
    margin: 0 auto;
  }
}