#porte{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:16px;overflow-y:auto;background:#0e0c18}
.porte{width:min(100%,460px);margin:auto;background:var(--paper);border:4px solid var(--ink);
  box-shadow:inset -4px -4px 0 var(--paper2),6px 6px 0 rgba(0,0,0,.45);padding:20px 22px 16px;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.porte-sur{font-size:16px;letter-spacing:2px;text-transform:uppercase;color:#fff;background:var(--frame);
  border:3px solid var(--ink);padding:2px 10px}
.porte-logo{font-family:var(--font-logo);margin:14px 0 4px;font-size:clamp(28px,8vw,40px);line-height:.95;color:var(--gold);letter-spacing:1px;
  text-shadow:3px 3px 0 #a03828,-3px 3px 0 #a03828,3px -3px 0 #a03828,-3px -3px 0 #a03828,0 6px 0 #401818}
.porte-logo span{font-size:clamp(38px,11vw,56px);color:#fff;
  text-shadow:4px 4px 0 #3858a0,-4px 4px 0 #3858a0,4px -4px 0 #3858a0,-4px -4px 0 #3858a0,0 8px 0 #182040}
.porte-pitch{font-size:19px;line-height:1.25;margin:16px 0 12px}
.porte-champ{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;font-size:18px;text-align:left}
.porte-champ input{font-family:var(--font);font-size:24px;padding:6px 10px;border:4px solid var(--ink);background:#fff;
  color:var(--ink);width:100%}
.porte-champ input:focus{outline:none;background:#fff8d8}
.porte-erreur{margin:8px 0 0;color:var(--bad);font-size:19px}
.porte .btn{margin-top:14px;min-width:180px}
.porte-retour{margin-top:12px;font-size:17px;color:var(--frame)}
.secoue{animation:porte-secoue .35s steps(6)}
@keyframes porte-secoue{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-8px)}
  40%,80%{transform:translateX(8px)}
}
@media (prefers-reduced-motion:reduce){.secoue{animation:none}}