/* Boutons façon surlignage, validés par Lilian le 30/09/2026 (pistes 3 et 4).
   Planche : https://claude.ai/artifact/37RGnzLuff2g9uX3gProhy

   Piste 3, "le bouton qui se penche" : la pilule actuelle au repos ; au survol,
   au clavier et au toucher, elle devient le bandeau penché du site (coins de
   3 px, -2,2 degrés). Au repos, le seul bandeau de l'écran reste celui du titre.
   Piste 4, "le lien bandeau" : les liens secondaires ("Voir le cas", "Voir
   l'offre") portent un trait rouge penché sous le texte, qui devient bandeau
   au survol.

   A charger APRES onglets.css. Utilise les jetons de tokens.css.
   Contrastes (contraste.py) : nuit sur rouge 5,07:1, sur rouge vif 6,45:1 (rouge adouci du 30/09/2026) ;
   crème sur vert 8,72:1 ; nuit sur vert moyen 11,51:1. */

/* ----- Piste 3 : boutons pleins (action et message positif) ----- */
.btn-action,
.btn-positif{
  transition:
    border-radius var(--duree-secondaire) var(--courbe),
    transform var(--duree-secondaire) var(--courbe-ressort),
    background-color var(--duree-action) var(--courbe);
}
.btn-action:hover,.btn-action:focus-visible,.btn-action:active,
.btn-positif:hover,.btn-positif:focus-visible,.btn-positif:active{
  border-radius:3px;
  transform:rotate(-2.2deg);
}
/* L'enfoncement au clic garde l'inclinaison */
.btn-action:active,.btn-positif:active{transform:rotate(-2.2deg) scale(.97)}

/* ----- Piste 4 : liens secondaires ----- */
.lien-bandeau{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  gap:var(--e-2);
  min-height:44px;
  padding:var(--e-2) 2px;
  font-weight:800;
  color:inherit;
  text-decoration:none;
  transition:color var(--duree-secondaire) var(--courbe);
}
.lien-bandeau::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-4px;right:-4px;
  bottom:9px;
  height:4px;
  border-radius:2px;
  background:var(--rouge);
  transform:rotate(-2.2deg);
  transition:height var(--duree-secondaire) var(--courbe),bottom var(--duree-secondaire) var(--courbe);
}
/* Sur le bandeau rouge, l'encre est toujours nuit (4,87:1), quel que soit le fond de la section : une règle de page plus
   précise (le lien d'une fenêtre posée sur la scène, en thème sombre) laissait le texte clair sur le rouge, 3,34:1. */
.lien-bandeau:hover,.lien-bandeau:focus-visible,.lien-bandeau:active{color:var(--sur-action)!important}
.lien-bandeau:hover::before,.lien-bandeau:focus-visible::before,.lien-bandeau:active::before{
  height:calc(100% - 14px);
  bottom:7px;
}

/* Un bouton désactivé (le configurateur de Système de revenus avant le premier constat coché) ne se penche pas :
   il ne mène nulle part, le bandeau promettrait une action. */
.btn-action[aria-disabled="true"]:hover,.btn-action[aria-disabled="true"]:focus-visible,.btn-action[aria-disabled="true"]:active{border-radius:var(--pilule);transform:none}

/* Mouvement réduit : la forme change, sans transition */
@media (prefers-reduced-motion: reduce){
  .btn-action,.btn-positif,.lien-bandeau,.lien-bandeau::before{transition:none}
}