@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400&display=swap');

/* Cible le titre principal de la page de login */
#kc-header-wrapper h1,
.login-pf-header {
  /* Taille et Poids */
  font-weight: 400 !important;
  /* Regular correspond à 400 */
  font-size: 56px !important;

  /* Assurez un alignement et une couleur appropriés */
  text-align: center;
  color: #333;
  /* Ou votre couleur de titre */
}

/* ====== ENPC Ediser – Kréno 2 : LOGIN (desktop-first) ======
   Posez ce fichier dans: theme/<theme>/login/resources/css/login-desktop.css
   Compatible Keycloak "legacy" (login-pf) et KC v2 (kc-*) sans modifier le FTL.
   Couleurs approximées depuis la maquette.
   ----------------------------------------------------------- */

/* --- Mise en page en 2 colonnes ---------------------------------------- */

html,
body,
.login-pf body,
#page,
.login-page {
  height: 100%;
  background: #fff !important;
  color: var(--login-text);
  font-family: 'Manrope', sans-serif !important;
}

/* Racine de la page (legacy + v2) */
.login-pf-page,
.login-main,
#page {
  padding-top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(520px, 48vw) 1fr;
  /* gauche visuel / droite formulaire */
}


/* Bloc DROITE – conteneur du formulaire (on force fond blanc) */
#kc-content,
#kc-content-wrapper,
.login-main .card-pf,
.login-main .pf-c-card,
.login-pf-page .card-pf {
  background: #fff !important;
  box-shadow: none;
}

#kc-logout-confirm,
#kc-info-message {
  text-align: center;
}

/* On fait du côté droit une colonne centrée */
/* #kc-page-title, */
#kc-header {
  display: none;
  /* on masque le titre Keycloak par défaut */
}

#kc-locale {
  display: none !important;
}

/* #kc-form,
#kc-content,
#kc-content-wrapper, */
.login-main .pf-c-card,
.login-pf-page .card-pf {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 132px 64px 64px;
}

.login-pf-page .login-pf-signup {
  margin: 10px auto 15px;
  color: var(--login-text-important);
  max-width: 435px;
}

/* Bloc "Connectez-vous" */
#kc-form .kcFormGroup,
#kc-form form,
#kc-content form,
#kc-register-form,
#kc-reset-password-form,
#kc-update-email-form,
#kc-update-profile-form {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.kc-title,
#kc-page-title,
#kc-content h1,
.login-main h1 {
  font-weight: 400;
  font-size: clamp(28px, 2.2vw, 44px);
  margin: 0 0 8px 0;
  line-height: 1.1;
}

.kc-subtitle,
.login-subtitle {
  font-size: 18px;
  color: #6b7280;
  margin-bottom: 28px;
}

.kc-subtitle-info {
  font-size: 15px;
  color: var(--login-text-info);
  margin-top: 5px;
  margin-bottom: 25px;
  text-align: center;
}

/* Alertr box */
.pf-c-alert.pf-m-inline {
  margin: 10px 40px 30px;
}

/* Aide / liens */
#kc-form .form-help-text,
#kc-reset-password-form .instruction,
#kc-content a {
  color: var(--login-link);
  text-decoration: none;
}

#kc-content a:hover,
#kc-content a:focus {
  color: var(--login-link-hover);
  text-decoration: underline;
}

.kc-do-forgot-password {
  text-align: center;
  margin-top: 25px;
}

/* Petites pastilles de pagination des slides (décor) – optionnel */
.kc-dots {
  display: flex;
  gap: 6px;
  margin-top: 16px;
}

.kc-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e6e6f2;
}

.kc-dots span.is-active {
  background: var(--login-link);
}

/* Liens bas de formulaire */
.kc-bottom-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  max-width: 520px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: var(--login-text-info);
}

.kc-bottom-links a {
  color: var(--login-link);
}

/* Petites retouches PatternFly/Keycloak */
.pf-c-form__group {
  margin-bottom: 18px !important;
}

.pf-c-alert {
  border-radius: 12px;
}

/* Masque les bordures et cartes par défaut KC */
.card-pf {
  border: none;
  box-shadow: none;
  background: transparent;
}


/* --- Hauteurs faibles (laptop 768px) : resserrer ------------------------ */
/* @media (max-height: 820px) {
  #kc-form,
  #kc-content,
  #kc-content-wrapper { padding: 56px 48px; }
} */