/* Bouton principal */
#kc-login,
#kc-register,
.pf-c-button.pf-m-primary,
input[type="submit"] {
  width: 100%;
  border-radius: 10px !important;
  /* height: 56px; */
  /* font-weight: 700; */
  font-size: 18px;
  background: var(--button-principal-bg) !important;
  border: 1px solid var(--button-principal-bg) !important;
  color: #fff !important;
}

#kc-login:hover,
#kc-login:focus,
#kc-register:hover,
#kc-register:focus,
.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: var(--button-principal-bg-hover) !important;
  border-color: var(--button-principal-bg-hover) !important;
}

#kc-login:active,
#kc-register:active,
.pf-c-button.pf-m-primary:active,
input[type="submit"]:active {
  transform: translateY(1px);
}

/* État disabled (quand KC désactive le bouton) */
#kc-login[disabled],
.pf-c-button[disabled],
input[type="submit"][disabled] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}


#kc-form-buttons {
  margin-top: 15px;
}

#kc-form-buttons,
#kc-form-options {
  text-align: center;
}

#kc-form-buttons .pf-c-button {
  /* S'assurer qu'il se comporte comme un bloc alignable */
  display: inline-block !important;

  /* Supprimer la marge latérale auto ou la largeur qui pourrait être définie ailleurs */
  margin: 0 auto;
  width: auto !important;

  /* Appliquer le padding horizontal de 45px et un padding vertical standard */
  padding: 12px 45px !important;
  /* Ajustez le 15px pour le padding vertical si nécessaire */
}

#kc-form-options a,
#kc-form-options button,
.kc_proceed_confirmation {
  /* Rendre le lien comme un bloc pour lui donner de la hauteur et de la largeur */
  display: inline-block;

  /* Couleurs du bouton secondaire */
  background-color: var(--button-secondary-bg);
  color: #868686 !important;
  /* Gris foncé pour le texte */

  /* Espacement et Apparence */
  padding: 8px 45px;
  /* Espacement intérieur du bouton */
  margin-top: 15px;
  /* Marge au-dessus (le sépare de l'élément précédent) */
  border-radius: 10px;
  /* Coins légèrement arrondis */
  border: 1px solid var(--button-secondary-border);
  /* Bordure fine pour le délimiter */
  text-decoration: none !important;
  /* Supprimer le soulignement par défaut */
  font-weight: bold;
  font-size: 14px;

  /* Assurer que la couleur de texte est prioritaire */
  text-shadow: none;
}

/* 2. Effet de Survol (Hover) pour le rendre interactif */
#kc-form-options a:hover,
#kc-form-options a:focus,
#kc-form-options button:hover,
#kc-form-options button:focus,
.kc_proceed_confirmation:hover,
.kc_proceed_confirmation:focus {
  background-color: var(--button-secondary-bg-hover);
  border-color: var(--button-secondary-border-hover);
}

a.kc_proceed_confirmation {
  width: auto;
  color: white !important;
  background: var(--button-principal-bg) !important;
  border: 1px solid var(--button-principal-bg) !important;
}

a.kc_proceed_confirmation:hover,
a.kc_proceed_confirmation:focus {
  background: var(--button-principal-bg-hover) !important;
  border-color: var(--button-principal-bg-hover) !important;
}