/* L'accordéon de TABULA (mission « page abonnements »).

   AUCUNE VALEUR EN DUR : jetons avec valeur de repli. Un seul comportement
   pour tous les encadrés repliables : le triangle à GAUCHE du titre, toute la
   barre de titre cliquable, la même rotation. Le corps est `hidden` (jamais
   un `<details>` : voir abonnements.css). */

.accordeon__titre { margin: 0; }
.accordeon__bouton {
  display: flex;
  align-items: center;
  gap: var(--tab-espace-1, 8px);
  width: 100%;
  min-height: var(--tab-cible, 44px);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: start;
  cursor: pointer;
  border-radius: var(--tab-rayon, 10px);
}
.accordeon__bouton:hover { color: var(--tab-accent, #3F6FA9); }
.accordeon__bouton:focus-visible {
  outline: 2px solid var(--tab-accent, #3F6FA9);
  outline-offset: 4px;
}
/* Le triangle : dessiné en CSS, même taille partout, tourne à l'ouverture. */
.accordeon__triangle {
  display: inline-block;
  flex: none;
  width: 0;
  height: 0;
  border-block: 0.4em solid transparent;
  border-inline-start: 0.6em solid var(--tab-texte-secondaire, #666666);
  transition: transform 0.15s ease;
  margin-inline-end: var(--tab-espace-1, 8px);
}
.accordeon--ouvert .accordeon__triangle,
.accordeon:target .accordeon__triangle { transform: rotate(90deg); }
.accordeon__compte {
  font-weight: 400;
  font-size: var(--tab-taille-petite, 0.8125rem);
  color: var(--tab-texte-secondaire, #666666);
}
.accordeon__corps { margin-block-start: var(--tab-espace-2, 16px); }
/* Sans script : l'ancre ouvre. */
.accordeon:target .accordeon__corps { display: block; }