/* ==========================================================================
   button.css — .lba-button

   Bouton-lien du site : 16px gras, letter-spacing -0.32px, texte blanc,
   bordure 2px couleur accent.

   ⚠️ base.css style deja l'element <button> (fond rouge plein). Cette classe
   couvre le bouton-lien, qui est un <a> : les deux ne se recouvrent pas.
   ========================================================================== */

.lba-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 36px;
  border-radius: var(--lba-radius);
  color: var(--white);
  font-family: var(--lba-font-bold);
  font-size: var(--lba-size-button);
  font-weight: var(--lba-font-weight-bold);
  line-height: 1.5em;
  letter-spacing: -0.32px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lba-transition-fast),
              color var(--lba-transition-fast);
}


/* --------------------------------------------------------------------------
   Variante contour
   --------------------------------------------------------------------------
   Etat normal  : FOND ROUGE + texte blanc.
   Etat survol  : fond blanc + texte rouge, bordure inchangee.

   Meme comportement que le bouton des cartes de service (service-card.css §6),
   qui sert de reference sur tout le site.

   📌 ⚠️ NE PAS passer le texte en ROUGE au motif qu'un texte blanc serait
   illisible sur le fond clair d'une section : le raisonnement ne vaudrait que
   pour un bouton SANS fond. Ce bouton a bien un fond rouge, sur lequel le blanc
   est parfaitement lisible — contraste mesure a 4,8:1.
   -------------------------------------------------------------------------- */

.lba-button--outline {
  border: 2px solid var(--accent);
  background-color: var(--accent);
  color: var(--white);
}

.lba-button--outline:hover,
.lba-button--outline:focus {
  background-color: var(--white);
  color: var(--primary-color);
}


/* --------------------------------------------------------------------------
   Bouton annonce sans page cible — `.lba-button--inactive`
   --------------------------------------------------------------------------
   Transpose au bouton le traitement retenu pour les rubriques de menu sans page
   cible (`.menu-link--inactive`, header.css §2 bis) : le libelle reste visible,
   le lien est retire.

   Le seul usage a ce jour est le bouton « Voir plus » de la section RSE de la
   Home, dont la page cible n'existe pas encore.

   L'element reste un `<a>` SANS `href` : le style du bouton est accroche a `a`,
   et un `<a>` sans `href` n'est ni activable ni annonce comme lien par les
   lecteurs d'ecran. On neutralise donc seulement le curseur et l'etat de survol,
   qui suggereraient une action possible.
   🔓 Des que la page existera : ajouter `href` et retirer cette classe.
   -------------------------------------------------------------------------- */

.lba-button--inactive {
  cursor: default;
}

/* Le survol ne doit pas suggerer une action possible : on maintient l'etat
   normal (fond rouge, texte blanc) au lieu de l'inverser. */
.lba-button--outline.lba-button--inactive:hover,
.lba-button--outline.lba-button--inactive:focus {
  background-color: var(--accent);
  color: var(--white);
}