.page-login {
  min-height: 100dvh;
  background: var(--nuit);
}

.porte {
  position: relative; isolation: isolate;
  display: grid; align-content: center; justify-items: center; gap: 18px;
  min-height: 100dvh; padding: clamp(24px, 6vh, 64px) var(--gouttiere);
  overflow: hidden;
}

.porte-halo {
  position: absolute; inset: -25%; z-index: -1;
  background:
    radial-gradient(28% 32% at 38% 46%, rgba(225, 48, 108, .26), transparent 70%),
    radial-gradient(26% 30% at 62% 52%, rgba(91, 81, 216, .26), transparent 72%),
    radial-gradient(22% 26% at 50% 40%, rgba(250, 126, 30, .16), transparent 70%);
  filter: blur(18px);
  animation: respirer 14s var(--courbe) infinite alternate;
}

@keyframes respirer {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .85; }
  to { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .porte-halo { animation: none; }
}

.porte-panneau {
  display: grid; justify-items: center; gap: 6px;
  width: min(100%, 392px); padding: clamp(26px, 4vh, 38px) clamp(22px, 4vw, 34px) clamp(24px, 4vh, 32px);
  border: 1px solid var(--trait); border-radius: var(--coupe);
  background: linear-gradient(168deg, rgba(246, 243, 251, .07), rgba(246, 243, 251, 0) 46%), var(--asphalte);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.porte-logo { height: 50.25px; width: auto; margin-bottom: 14px; }
.porte-titre {
  font: italic 900 clamp(24px, 3.4vw, 31px)/1.05 var(--police-affiche); font-stretch: 120%;
  letter-spacing: -0.02em; text-align: center; color: var(--craie);
}
.porte-sous-titre { margin-bottom: 20px; font-size: 13.5px; line-height: 1.45; text-align: center; color: var(--brume); }

.porte-formulaire { display: grid; gap: 14px; width: 100%; }
.porte-champ { display: grid; gap: 6px; }
.porte-libelle { font: 500 10px var(--police-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brume); }

.porte-saisie {
  width: 100%; min-height: 46px; padding: 0 14px;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--nuit); color: var(--craie);
  font: 500 15px var(--police-texte);
}
.porte-saisie::placeholder { color: var(--brume); }
.porte-saisie:focus-visible { outline: 2px solid var(--neon); outline-offset: 1px; border-color: transparent; }

.porte-entrer {
  min-height: 48px; margin-top: 4px; border-radius: var(--rayon);
  background: var(--craie); color: var(--nuit);
  font: italic 800 14px var(--police-affiche); font-stretch: 115%;
  letter-spacing: .06em; text-transform: uppercase;
  transition: transform var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}
.porte-entrer:hover { transform: translateY(-1px); }
.porte-entrer:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.porte-entrer:disabled { opacity: .6; transform: none; cursor: progress; }

.porte-message {
  padding: 10px 12px; border-radius: var(--rayon);
  background: rgba(255, 122, 122, .12); box-shadow: inset 2px 0 0 var(--baisse);
  font-size: 13px; line-height: 1.4; color: var(--baisse);
}

.porte-note { font-size: 12px; text-align: center; color: var(--brume); }