.scene { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }

.carte-connexion {
  width: min(420px, 100%); display: grid; gap: 20px; padding: 36px 32px 26px;
  --rayon: 34px;
  animation: entree .9s cubic-bezier(.2,.9,.25,1.15) both;
}
@keyframes entree { from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(6px); } }

.tete { display: grid; justify-items: center; gap: 10px; text-align: center; margin-bottom: 6px; }
.pastille-logo {
  display: grid; place-items: center; width: 78px; height: 78px; border-radius: 24px; margin-bottom: 6px;
  background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 30px -8px rgba(227,6,19,.55);
}
.pastille-logo img { width: 46px; filter: drop-shadow(0 2px 6px rgba(227,6,19,.6)); }
.tete h1 { font-size: 38px; letter-spacing: .04em; }
.tete h1 span { color: var(--rouge-vif); }
.tete .muet { font-size: 15px; }

.avec-bouton { position: relative; display: block; }
.avec-bouton .saisie { padding-right: 52px; }
.voir {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: transparent; color: var(--gris); cursor: pointer;
}
.voir:hover, .voir[aria-pressed="true"] { color: var(--texte); background: rgba(255,255,255,.08); }
.voir svg { width: 19px; height: 19px; }

.entrer { min-height: 52px; font-size: 14px; margin-top: 4px; }
.entrer svg { transition: transform .25s; }
.entrer:hover svg { transform: translateX(3px); }
.entrer.charge { pointer-events: none; }
.entrer.charge span::after { content: "…"; }

.erreur {
  padding: 11px 14px; border-radius: 12px; font-size: 14px; color: #ffd9db;
  background: rgba(255,43,56,.14); box-shadow: inset 0 0 0 1px rgba(255,90,95,.35);
}
.carte-connexion.secoue { animation: secoue .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes secoue { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.pied { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--gris-2); padding-top: 4px; }
.pied .point { width: 7px; height: 7px; }

@media (max-width: 420px) { .carte-connexion { padding: 30px 20px 22px; } .tete h1 { font-size: 32px; } }