#porte { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 20%, #2a1a5a, #05050f 70%); }
.porte { width: min(100%, 420px); margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 22px 16px;
  background: linear-gradient(#1c2460, #0e1234); border: 2px solid var(--bord); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .7); }
.porte-sur { font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--or); border: 1px solid var(--bord-doux); border-radius: 99px; padding: 3px 12px; }
.porte-logo { display: flex; flex-direction: column; align-items: center; margin: 14px 0 4px; font-family: var(--titre); font-weight: 800; font-size: clamp(54px, 16vw, 76px); line-height: 1; letter-spacing: 6px;
  background: linear-gradient(#fff6d0 20%, #ffd36a 50%, #a8741e 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.porte-logo span { font-size: clamp(14px, 4.4vw, 19px); letter-spacing: 5px; text-transform: uppercase; margin-top: 4px; background: none; -webkit-text-fill-color: #dfe6ff; color: #dfe6ff; }
.porte-pitch { font-size: 14px; line-height: 1.4; color: var(--doux); margin: 14px 0 12px; }
.porte-champ { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; font-size: 13px; font-weight: 800; text-align: left; }
.porte-champ input { font-size: 18px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--bord-doux); background: #0a0e2a; color: var(--texte); width: 100%; }
.porte-champ input:focus { outline: none; border-color: var(--or); }
.porte-erreur { margin: 8px 0 0; color: var(--danger); font-size: 14px; font-weight: 800; }
.porte .btn { margin-top: 14px; min-width: 180px; }
.porte-retour { margin-top: 12px; font-size: 13px; color: var(--doux); }
.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; } }