/* Champs */
.pf-c-form-control,
input[type="text"],
input[type="email"],
input[type="password"] {
  border-radius: 12px !important;
  border: 1px solid var(--form-field-border);  
  padding: 16px 16px;
  height: 54px;
  font-size: 16px;
  outline: none;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pf-c-form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border: 1px solid var(--form-field-border-on-focus);
  box-shadow: 0 0 0 4px rgba(224, 122, 95, .15);
}

/* Libellés */
#kc-form .pf-c-form__label,
#kc-form label {
  /* font-weight: 600;
  margin-bottom: 8px; */
    position: absolute;
    top: calc(20 / 16 * 1rem);
    /* left: calc(24 / 16 * 1rem); */
    font-size: calc(14 / 16 * 1rem);
    font-weight: 400;
    color: var(--form-label-txt);
    z-index: 2;
}

/* .login-pf-page .login-pf-settings {
  margin-top: 35px;
} */



/* 1. Ancrer les éléments enfants positionnés en absolu */
.form-group {
    position: relative;
    /* Assurez-vous qu'il n'y a pas de marges ou padding qui interfèrent avec le haut */
    padding-top: 0; 
}

/* 2. Cacher les conteneurs de colonne superflus pour simplifier la structure */
/* Ceci est nécessaire car vos labels et inputs sont encapsulés dans des div de colonnes. */
.form-group .col-xs-12, 
.form-group .col-sm-12 {
    padding: 0; /* Retirer le padding par défaut des colonnes */
    margin: 0;
}

/* Positionner le conteneur du label au-dessus du champ input */
.form-group .pf-c-form__label {

    position: absolute;
    top: calc(20 / 16 * 1rem);
    /* left: calc(24 / 16 * 1rem); */
    font-size: calc(14 / 16 * 1rem);
    font-weight: 400;
    color: var(--form-label-txt);
    z-index: 2;

    /* Aligner le label au début du champ input */
    left: 10px;
    padding: 0 5px;
    
    /* Assurez-vous que l'élément est un bloc ou inline-block */
    display: inline-block;
    
    /* Déplacer légèrement vers le haut pour "chevaucher" la bordure */
    transform: translateY(-50%); 
}

/* Ajuster l'input pour créer de l'espace pour le label */
.form-group .pf-c-form-control {
    /* Ajouter un padding supérieur pour pousser le texte saisi sous le label */
    padding-top: 30px !important; 
    /* Réduire le padding inférieur pour compenser si nécessaire */
    padding-bottom: 5px !important; 
    /* Assurez-vous que le padding latéral est suffisant */
    padding-left: 13px !important; 
    height: auto !important; /* Laissez la hauteur s'ajuster avec le padding */
    z-index: 1;
}

/* Changer la couleur du label lorsque le champ est en focus */
.form-group .pf-c-form-control:focus + .col-xs-12 .pf-c-form__label {
    color: var(--couleur-primaire, #313B82); /* Utilisez votre couleur primaire */
}



/* Positionnement du boutton d'affichage du mot de passe dans l'input du password */
.pf-c-input-group {
    position: relative;
}
/* L'input doit prendre l'espace restant dans le groupe */
/* Le bouton doit avoir une largeur fixe ou un padding constant */
.pf-c-input-group .pf-c-button.pf-m-control {
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
    background-color: transparent; 
    border-left: none; /* Fusionne visuellement avec la bordure de l'input */
    position: absolute;
    top: 12px;
    right: 2px;
    z-index: 3;
    color: grey;
}
.pf-c-input-group .pf-c-button.pf-m-control:after {
    border: none;
}
.pf-c-input-group .pf-c-button.pf-m-control[aria-invalid=true] {
    right: 18px;
}

/* Décalage à droite pour les icônes de feedback */
.kc-icon-offset-right {
    position: relative !important;
    right: -40px !important; 
}

#input-error,
span.pf-m-error {
    color: var(--login-text-important);
    margin: 5px 14px;
}