/* La Promesse — page de connexion Keycloak, habillée selon la charte (tokens.css est chargé avant). */

html, body, .login-pf body { background: var(--fond) !important; }
body { color: var(--encre-2); font-family: var(--font-texte); font-size: 19px; line-height: 28px; }
.login-pf-page { padding-top: var(--espace-12); }

/* En-tête : le nom de la maison, en texte, Cinzel capitales or */
#kc-header { color: var(--or); }
#kc-header-wrapper {
  font-family: var(--font-logo);
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--or);
  padding: var(--espace-8) var(--espace-4) var(--espace-2);
  white-space: normal;
}
#kc-header-wrapper::after {
  content: "La promesse d’une vie infinie";
  display: block;
  margin-top: 0.6em;
  font-size: 0.3em;
  letter-spacing: 0.12em;
}

/* Carte : cadre double doré, angles droits */
.card-pf {
  background: var(--fond-eleve);
  border: var(--epaisseur-cadre) double var(--trait-fort);
  border-radius: var(--rayon-0);
  box-shadow: none;
  color: var(--encre-2);
}
.login-pf-page .login-pf-page-header { margin-bottom: var(--espace-6); }
#kc-page-title {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--titre);
  text-align: center;
}
.login-pf-page .card-pf header { border-bottom: var(--epaisseur-filet) solid var(--trait); }

/* Champs */
.login-pf-page label,
.pf-c-form__label, .pf-c-form__label-text {
  font-family: var(--font-titre);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.pf-c-form-control, .form-control, input[type="text"], input[type="email"], input[type="password"] {
  background: var(--fond) !important;
  color: var(--encre) !important;
  border: var(--epaisseur-filet) solid var(--trait-fort) !important;
  border-radius: var(--rayon-1);
  font-family: var(--font-texte);
  font-size: 19px;
  min-height: 44px;
}
.pf-c-form-control:focus, .form-control:focus, input:focus {
  outline: var(--epaisseur-focus) solid var(--focus);
  outline-offset: 2px;
  box-shadow: none !important;
}
.pf-c-input-group .pf-c-button.pf-m-control {
  background: var(--fond);
  border: var(--epaisseur-filet) solid var(--trait-fort);
  color: var(--encre-3);
}
#kc-form-options, #kc-form-options label, .checkbox label {
  font-family: var(--font-texte);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--encre-3);
}
.required { color: var(--encre-3); }

/* Bouton principal : or, Cinzel gras */
#kc-login, .pf-c-button.pf-m-primary, .btn-primary {
  font-family: var(--font-titre);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--espace-3) var(--espace-6);
  background: var(--or) !important;
  border: var(--epaisseur-filet) solid var(--or) !important;
  border-radius: var(--rayon-1);
  color: var(--sur-or) !important;
}
#kc-login:hover, .pf-c-button.pf-m-primary:hover, .btn-primary:hover {
  background: var(--or-vif) !important;
  border-color: var(--or-vif) !important;
}
#kc-login:focus-visible, .pf-c-button.pf-m-primary:focus-visible { outline: var(--epaisseur-focus) solid var(--focus); outline-offset: 3px; }

a, a:hover { color: var(--lien); }

/* Lien d'inscription, sous le formulaire */
#kc-registration-container { border-top: var(--epaisseur-filet) solid var(--trait); margin-top: var(--espace-6); padding-top: var(--espace-4); }
#kc-registration { text-align: center; font-size: 17px; color: var(--encre-3); }
#kc-registration a { font-family: var(--font-titre); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

/* Messages d'erreur : signal, toujours accompagné d'un mot */
.alert-error, .pf-c-alert.pf-m-danger {
  background: var(--fond);
  border: var(--epaisseur-filet) solid var(--signal);
  color: var(--encre);
}
.pf-c-alert.pf-m-danger .pf-c-alert__title { color: var(--signal); }
#input-error, .pf-c-form__helper-text.pf-m-error, [id^="input-error"] { color: var(--signal); font-size: 16px; }

/* Sélecteur de langue inutile : la maison ne parle que français */
#kc-locale { display: none; }

/* Mention finale, comme sur toute page de réservation */
#kc-form::after, #kc-register-form::after {
  content: "Aucun remboursement.\A Aucune échappatoire.";
  white-space: pre-line;
  display: block;
  margin-top: var(--espace-6);
  text-align: center;
  font-family: var(--font-titre);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Inscription : titre centré sur toute la largeur, mention des champs requis discrète en dessous */
.login-pf-header > div { display: flex; flex-direction: column-reverse; }
.login-pf-header .col-md-10 { width: 100%; float: none; }
.login-pf-header div.subtitle { float: none; width: 100%; text-align: center; }
span.subtitle { font-size: 15px; color: var(--encre-3); }

/* Zone d'information (lien d'inscription) : Keycloak lui donne un fond gris clair, on reste sur fond-eleve */
#kc-info { padding-bottom: 0; margin-bottom: 0; }
#kc-info-wrapper { background: transparent !important; }