.connexion {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--kl-space-6) var(--kl-space-4);
  background: var(--kl-bg-gradient);
}

.connexion__carte {
  width: min(100%, 26rem);
  padding: var(--kl-space-6);
  background: var(--kl-card-bg);
  border: 1px solid var(--kl-border);
  border-left: 4px solid var(--kl-indigo);
  border-radius: var(--kl-radius);
  box-shadow: var(--kl-shadow);
}

.connexion__logo { display: block; width: 11rem; height: auto; margin: 0 0 var(--kl-space-5); border-radius: var(--kl-radius-sm); }

.connexion__titre {
  margin: 0;
  font-size: var(--kl-fs-h1);
  font-weight: var(--kl-fw-extrabold);
  letter-spacing: -.03em;
  line-height: var(--kl-lh-tight);
}

.connexion__lead { margin: var(--kl-space-2) 0 var(--kl-space-6); color: var(--kl-text-2); }

.connexion__champ { display: grid; gap: var(--kl-space-1); margin-bottom: var(--kl-space-4); }
.connexion__champ label { font-size: var(--kl-fs-small); font-weight: var(--kl-fw-semibold); color: var(--kl-text-2); }

.connexion__champ input {
  width: 100%;
  min-height: 48px;
  padding: .7rem 1rem;
  background: var(--kl-surface);
  color: var(--kl-text-white);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-radius-sm);
  font: inherit;
  font-size: 1rem;
}
.connexion__champ input:hover { background: var(--kl-surface-2); }

.connexion__erreur {
  margin: 0 0 var(--kl-space-4);
  padding: var(--kl-space-3) var(--kl-space-4);
  background: rgba(var(--kl-amber-rgb), .12);
  border-left: 4px solid var(--kl-amber);
  border-radius: var(--kl-radius-sm);
  color: var(--kl-text);
}

.connexion .btn-kl { width: 100%; }
.connexion__signature { margin: var(--kl-space-5) 0 0; font-size: var(--kl-fs-xs); color: var(--kl-text-3); text-align: center; }