/* ════════════════════════════════════════════════════════════════
   Nos Souvenirs — visuel commun « nuit étoilée »
   Une seule source pour les couleurs, les polices, les boutons et le ciel.
   Toutes les pages de l'application s'y brancheront au fil des étapes.
   ════════════════════════════════════════════════════════════════ */
:root{
  --ns-deep:#070B13;
  --ns-night:#0E1520;
  --ns-night2:#162133;
  --ns-ivory:#F3EDDD;
  --ns-ivory-soft:rgba(244,239,224,.9);
  --ns-ivory-dim:rgba(241,235,218,.74);
  --ns-gold:#D4AF6B;
  --ns-gold-l:#F4DEA0;
  --ns-gold-d:#8B6F3A;
  --ns-ink:#1A1206;
  --ns-line:rgba(212,175,107,.3);
  --ns-line2:rgba(232,200,130,.6);
  --ns-halo:0 0 0 1px rgba(244,222,160,.12),0 0 18px rgba(212,175,107,.2);
  --ns-error:#F0B4AC;
  --ns-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --ns-ui:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* Fond nuit avec lueur dorée */
.ns-night{
  position:relative;isolation:isolate;
  background:
    radial-gradient(ellipse 80% 40% at 50% 12%,rgba(232,196,120,.2) 0%,transparent 70%),
    linear-gradient(180deg,var(--ns-night2) 0%,var(--ns-night) 50%,var(--ns-deep) 100%) !important;
}
.ns-night::before,.ns-night::after{display:none !important;}
.ns-night > *:not(.ns-stars){position:relative;z-index:1;}

/* Ciel de poussière d'étoiles (dessiné par ns-stars.js) */
.ns-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}

/* Boutons */
@keyframes ns-halo{
  0%,100%{box-shadow:0 0 0 1px rgba(255,240,198,.4),0 0 12px rgba(244,222,160,.3);}
  50%{box-shadow:0 0 0 1px rgba(255,240,198,.85),0 0 30px rgba(244,222,160,.6);}
}
@keyframes ns-halo-soft{
  0%,100%{box-shadow:0 0 0 1px rgba(244,222,160,.08),0 0 10px rgba(212,175,107,.12);}
  50%{box-shadow:0 0 0 1px rgba(244,222,160,.3),0 0 24px rgba(232,196,120,.32);}
}

/* ── Écran de connexion (portail salons et super admin) ── */
#screen-login .login-card{
  background:linear-gradient(180deg,rgba(24,33,48,.86),rgba(10,15,24,.92));
  border:1px solid var(--ns-line);
  border-radius:20px;
  animation:ns-halo-soft 5s ease-in-out infinite;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
#screen-login .login-title{color:var(--ns-ivory);font-size:28px;}
#screen-login .login-sub{color:var(--ns-ivory-dim);font-size:13px;}
#screen-login .login-logo-text{color:var(--ns-ivory);}
#screen-login .f-lbl{color:var(--ns-ivory-dim);}
#screen-login .f-inp-dark{
  border:1px solid rgba(212,175,107,.34);background:rgba(0,0,0,.3);color:var(--ns-ivory);min-height:48px;
}
#screen-login .f-inp-dark:focus{border-color:var(--ns-gold);box-shadow:0 0 0 3px rgba(212,175,107,.18);}
#screen-login .f-inp-dark::placeholder{color:rgba(241,235,218,.4);}
#screen-login .login-tabs{border:1px solid var(--ns-line);box-shadow:var(--ns-halo);}
#screen-login .login-tab{color:var(--ns-ivory-dim);min-height:38px;}
#screen-login .login-tab.active{background:var(--ns-gold);color:var(--ns-ink);}
#screen-login .btn-login-submit{
  min-height:50px;
  background:linear-gradient(135deg,#FFF0C6,var(--ns-gold-l) 45%,var(--ns-gold));
  color:var(--ns-ink);
  animation:ns-halo 3.6s ease-in-out infinite;
}
#screen-login .btn-login-submit:disabled{animation:none;}
#screen-login .err-box{background:rgba(192,57,43,.14);border-color:rgba(240,180,172,.35);color:var(--ns-error);}
.login-forgot{
  display:block;width:100%;margin-top:14px;padding:10px;min-height:44px;
  background:none;border:none;cursor:pointer;
  font-family:var(--ns-ui);font-size:12px;letter-spacing:.04em;
  color:var(--ns-gold-l);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(244,222,160,.4);
}
.login-forgot:hover{color:#fff;}
#screen-login [hidden]{display:none !important;}

:focus-visible{outline:2px solid var(--ns-gold-l);outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  #screen-login .login-card,#screen-login .btn-login-submit{animation:none;}
}