:is(.button, .button-secondary, .historical-pill, .button--primary, .button--secondary, .button--outline, .button--compact, .academy-link) {
  transition:
    transform var(--motion-duration) var(--motion-easing),
    background-color var(--motion-duration) var(--motion-easing),
    border-color var(--motion-duration) var(--motion-easing),
    color var(--motion-duration) var(--motion-easing),
    box-shadow var(--motion-duration) var(--motion-easing);
}

:is(.button, .button-secondary, .historical-pill, .button--primary, .button--secondary, .button--outline, .button--compact):is(:hover, :focus-visible) {
  transform: translateY(-2px);
}

:is(.button, .button-secondary, .historical-pill, .button--primary, .button--secondary, .button--outline, .button--compact) {
  position: relative;
  overflow: hidden;
}

:is(.button, .historical-pill, .button--primary, .button--secondary, .button--outline, .button--compact)::before {
  position: absolute;
  top: -60%;
  left: -45%;
  width: 28%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 58%), transparent);
  content: "";
  opacity: 0;
  transform: rotate(25deg);
}

:is(.button, .historical-pill, .button--primary, .button--secondary, .button--outline, .button--compact):is(:hover, :focus-visible)::before {
  opacity: 1;
  animation: archi-shimmer 1.25s ease forwards;
}

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

/* ───────────── Les paires de boutons : transparent à gauche, terracotta à droite

   Le site posait trois combinaisons différentes selon les pages : deux
   dégradés côte à côte, un dégradé et un gris plein, ou un dégradé et un
   cerclé mais dans l'ordre inverse. Deux dégradés voisins ne hiérarchisent
   rien — l'œil ne sait plus lequel est l'appel principal.

   LA RÈGLE EST POSITIONNELLE, donc elle s'écrit une fois pour tout le site :
   dans un groupe qui porte plus d'un bouton, le PREMIER prend le cerclé
   transparent, le DERNIER le dégradé. Les gabarits ne changent pas : les
   boutons gardent leur classe, c'est la position qui décide. Léon, le
   29 août 2026.

   Le bandeau de consentement et la fenêtre de la lettre d'information en sont
   exclus : leurs boutons répondent à d'autres règles — un refus doit rester
   aussi visible qu'une acceptation — et les restyler serait une faute.

   Contraste vérifié : l'encre #2b2d2f donne 5,16 sur l'extrémité foncée du
   dégradé et 12,6 sur le papier du site. */
:is(.analysis-actions,.bespoke-actions,.color-actions,.final-actions,.formations-actions,
.housing-actions,.neuro-actions,.services-actions,.sessions-actions,
.formation-card__actions,.sessions-callout__actions,.ann-devenir__actions,
.product-card__actions,.unavailable-training__actions,.historical-contact)
  > :is(.button, .button-secondary):first-child:not(:only-child) {
  background: transparent;
  background-image: none;
  border: 1px solid #2b2d2f;
  color: #2b2d2f;
  box-shadow: none;
}
:is(.analysis-actions,.bespoke-actions,.color-actions,.final-actions,.formations-actions,
.housing-actions,.neuro-actions,.services-actions,.sessions-actions,
.formation-card__actions,.sessions-callout__actions,.ann-devenir__actions,
.product-card__actions,.unavailable-training__actions,.historical-contact)
  > :is(.button, .button-secondary):first-child:not(:only-child):hover {
  background: rgb(207 143 117 / 12%);
}
:is(.analysis-actions,.bespoke-actions,.color-actions,.final-actions,.formations-actions,
.housing-actions,.neuro-actions,.services-actions,.sessions-actions,
.formation-card__actions,.sessions-callout__actions,.ann-devenir__actions,
.product-card__actions,.unavailable-training__actions,.historical-contact)
  > :is(.button, .button-secondary):last-child:not(:only-child) {
  background-image: linear-gradient(90deg, #cf8f75, #f0d1c1);
  border: 0;
  color: #2b2d2f;
}

/* La paire de l'accueil a été remise dans l'ordre le 29 août 2026 : « Parler de
   ton projet » vient d'abord et prend le cerclé, « Découvrir les formations »
   ferme la ligne et prend le dégradé. Une exception de style avait été posée
   ici pour inverser les couleurs sur place ; elle est retirée, la règle
   générale suffit maintenant que l'ordre est juste. */

/* ─────────── Les paires centrées : deux boutons de même largeur

   « Se former » paraissait ridicule à côté d'« Être accompagné » — Léon, le
   29 août 2026 — simplement parce que son libellé est plus court. Deux appels
   de même rang qui n'ont pas la même largeur donnent l'impression que l'un
   compte moins que l'autre, alors que le choix est précisément d'égale valeur.

   La grille à colonnes égales règle ça sans largeur figée : les deux pistes
   partagent la place, et l'ensemble se dimensionne sur le plus long des deux
   libellés. Traduire la page ne casse rien.

   Seules les paires CENTRÉES sont visées : ce sont les choix autonomes, en fin
   de section. Les paires alignées à gauche, sous un texte, gardent leur largeur
   naturelle — les égaliser y créerait des blocs sans rapport avec la colonne. */
:is(.analysis-actions,.bespoke-actions,.color-actions,.final-actions,.formations-actions,
.housing-actions,.neuro-actions,.services-actions,.sessions-actions)[class*="--center"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: fit-content;
  margin-inline: auto;
}
@media (max-width: 560px) {
  :is(.analysis-actions,.bespoke-actions,.color-actions,.final-actions,.formations-actions,
  .housing-actions,.neuro-actions,.services-actions,.sessions-actions)[class*="--center"] {
    grid-auto-flow: row;
    width: 100%;
  }
}