/* Pages de connexion Keycloak aux couleurs des portails MCP Énergie
   (mêmes teintes que crates/server/static/portal.css et le site vitrine). */
:root {
  --mcpe-bg: #f4f6f9;
  --mcpe-panel: #ffffff;
  --mcpe-text: #0b1b2b;
  --mcpe-muted: #64748b;
  --mcpe-line: #e3e8ee;
  --mcpe-accent: #087a54;
  --mcpe-accent-hover: #06603f;
  --mcpe-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --keycloak-card-top-color: transparent;
  --pf-v5-global--FontFamily--text: var(--mcpe-font);
  --pf-v5-global--FontFamily--heading: var(--mcpe-font);
  --pf-v5-global--primary-color--100: var(--mcpe-accent);
  --pf-v5-global--primary-color--200: var(--mcpe-accent-hover);
  --pf-v5-global--link--Color: var(--mcpe-accent);
  --pf-v5-global--link--Color--hover: var(--mcpe-accent-hover);
  --pf-v5-global--active-color--100: var(--mcpe-accent);
  --pf-v5-global--BorderRadius--sm: 9px;
}
.pf-v5-theme-dark {
  --mcpe-bg: #0a1118;
  --mcpe-panel: #111a24;
  --mcpe-text: #e6edf3;
  --mcpe-muted: #8b9aab;
  --mcpe-line: #213041;
  --mcpe-accent: #34d399;
  --mcpe-accent-hover: #6ee7b7;
  --pf-v5-global--primary-color--100: var(--mcpe-accent);
  --pf-v5-global--primary-color--200: var(--mcpe-accent-hover);
  --pf-v5-global--link--Color: var(--mcpe-accent);
  --pf-v5-global--link--Color--hover: var(--mcpe-accent-hover);
  --pf-v5-global--active-color--100: var(--mcpe-accent);
}

/* Fond uni, sans l'image de Keycloak. */
.login-pf body, body {
  background: var(--mcpe-bg);
  font-family: var(--mcpe-font);
}
.pf-v5-c-login {
  background: var(--mcpe-bg);
}

/* En-tête : logo puis nom du service (realm displayNameHtml, voir kc.sh). */
#kc-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--mcpe-text) !important;
  font-family: var(--mcpe-font);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}
#kc-header-wrapper::before {
  content: "";
  flex: none;
  width: 44px;
  height: 44px;
  background: url("../img/logo.svg") center / contain no-repeat;
}
#kc-header-wrapper b {
  color: var(--mcpe-accent);
  font-weight: 700;
}

/* Carte : même panneau que les sections du portail. */
.pf-v5-c-login__main {
  background: var(--mcpe-panel);
  border: 1px solid var(--mcpe-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11, 27, 43, 0.04), 0 8px 30px rgba(11, 27, 43, 0.06);
}
.pf-v5-c-login__main-header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  color: var(--mcpe-text);
}
#kc-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Boutons : couleur et arrondi du portail. */
.pf-v5-c-button {
  border-radius: 9px;
  font-weight: 600;
}
.pf-v5-c-button.pf-m-primary {
  background-color: var(--mcpe-accent);
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background-color: var(--mcpe-accent-hover);
}
.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
  color: #052016;
}

/* Passkey en premier : bouton principal, puis séparateur « ou ». */
#mcpe-passkey {
  margin-bottom: 4px;
}
#mcpe-passkey .pf-v5-c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 1.05rem;
}
#mcpe-passkey .pf-v5-c-button::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../img/passkey.svg") center / contain no-repeat;
  mask: url("../img/passkey.svg") center / contain no-repeat;
}
.mcpe-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--mcpe-muted);
}
.mcpe-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
  font-size: 0.875rem;
  color: var(--mcpe-muted);
}
.mcpe-or::before,
.mcpe-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mcpe-line);
}