[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.button, .button-secondary, .historical-pill, .button--primary, .button--secondary, .button--outline, .button--compact, .academy-link) {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LE REPLI DES LONGUES PAGES, SUR TÉLÉPHONE

   Le volet lui-même est construit par site.js, jamais par cette feuille. C'est
   voulu : une règle « display:none » posée ici cacherait le contenu même quand
   le script n'a pas tourné, et personne ne pourrait plus le rouvrir. Le style
   ne fait qu'habiller ce que le script a monté — d'où le fait que tout dépende
   de la classe .est-replie, que seul le script pose.

   Cette feuille est chargée en dernier : les règles s'appliquent sans avoir à
   lutter contre la cascade des sept feuilles de module.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

  .repli-bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    /* 44 px de haut au minimum : c'est la taille d'un doigt, pas d'un curseur. */
    min-height: 44px;
    padding: 0.75rem 0;
    margin: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--filet, #ded8ce);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

  /* LE TITRE CHANGE DE RÔLE, DONC DE TAILLE. En tête de chapitre il fait 37,5 px,
     ce qui donne cinq lignes et 197 px de haut sur un écran de 375 — mesuré. Un
     en-tête de volet qui pèse un quart d'écran ne raccourcit rien : il déplace le
     défilement. Ici le h2 n'annonce plus un chapitre, il désigne une ligne d'une
     liste, et se dimensionne comme telle. Le niveau de titre, lui, ne bouge pas :
     le plan du document reste le même pour un lecteur d'écran. */
  .repli-bouton > h2 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.35;
    letter-spacing: 0;
  }

  /* Le chevron. En ::after plutôt qu'en image : il tourne, il suit la couleur
     du texte, et il ne coûte aucune requête. */
  .repli-bouton::after {
    content: '';
    flex: 0 0 auto;
    width: 0.6em; height: 0.6em;
    border-right: 2px solid var(--terra-text, #a35839);
    border-bottom: 2px solid var(--terra-text, #a35839);
    transform: rotate(45deg) translate(-0.15em, -0.15em);
    transition: transform 0.2s ease;
  }
  .repli-bouton[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-0.15em, -0.15em);
  }

  .est-replie .repli-corps { display: none; }
  .est-replie.est-ouvert .repli-corps { display: block; }

  /* Une section repliée n'a plus besoin de son grand espacement : c'est une
     ligne dans une liste, plus un chapitre. */
  .est-replie { padding-top: 0; padding-bottom: 0; }
  .est-replie.est-ouvert .repli-corps { padding-bottom: 1.5rem; }

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