/*
 * Aligné sur Bootstrap 5.3 (importmap) : bannière Hub = bg-primary, arbre = primary / info.
 * Dégradé body : bleu profond → plus clair, en diagonal (charte Hub).
 */
 :root {
  --oct-primary: #0d6efd;
  --oct-primary-dark: #052c65;
  --oct-primary-hover: #0a58ca;
  /* Bootstrap 5.3 --bs-info (#0dcaf0), adouci pour une grande surface */
  --oct-info-soft: #5eb8d4;
}

body.login-page {
  min-height: 100vh;
  /* Diagonal (~haut-gauche → bas-droite) : même progression qu’en horizontal */
  background: linear-gradient(
    135deg,
    var(--oct-primary-dark) 0%,
    #084298 22%,
    var(--oct-primary) 42%,
    var(--oct-info-soft) 72%,
    #b8cad9 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.login-page .login-card {
  width: 100%;
  max-width: 360px;
  --bs-card-bg: var(--oct-primary);
  background-color: var(--oct-primary);
  border: none !important;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(5, 44, 101, 0.38);
  overflow: hidden;
}

.login-page .login-header {
  background: var(--oct-primary);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}

.login-page .login-header img {
  height: 72px;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.login-page .login-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0;
}

.login-page .login-body {
  padding: 1.5rem 2rem 2rem;
}

.login-page .login-body .form-control {
  font-size: 0.85rem;
  padding: 0.45rem 0.75rem;
}

.login-page .login-body .form-control:focus {
  border-color: var(--oct-primary);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.login-page .login-body .form-label {
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
}

.login-page .btn-login {
  background: var(--oct-primary);
  border: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 0.5rem;
  transition: background 0.2s;
}

.login-page .btn-login:hover {
  background: var(--oct-primary-hover);
}

.login-page .version-badge {
  font-size: 0.7rem;
  vertical-align: middle;
  margin-left: 0.5rem;
  opacity: 0.6;
}