/* ============================================================
   login.css — habillage dédié de la page de connexion (login.html)
   Tout est scopé sous #login-screen pour ne rien impacter ailleurs.
   ============================================================ */

/* ----- Décor d'arrière-plan : aurore + grille tactique ----- */
#login-screen{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(900px 500px at 85% 110%, rgba(34,197,94,0.06), transparent 55%),
    var(--bg);
  overflow:hidden;
}
#login-screen::before{
  /* halo central animé */
  content:'';
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(40% 40% at 50% 42%, rgba(59,130,246,0.18), transparent 70%);
  filter:blur(30px);
  animation:lg-aurora 14s ease-in-out infinite alternate;
  pointer-events:none;
}
#login-screen::after{
  /* grille fine façon écran tactique */
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(99,160,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,160,255,0.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 45%, #000 30%, transparent 80%);
          mask-image:radial-gradient(ellipse 60% 55% at 50% 45%, #000 30%, transparent 80%);
  opacity:.6;
  pointer-events:none;
}
@keyframes lg-aurora{
  0%   { transform:translate(-3%,-2%) scale(1);   opacity:.8; }
  100% { transform:translate(3%,2%)   scale(1.08); opacity:1; }
}

/* ----- La carte ----- */
#login-screen .login-box{
  position:relative;
  width:392px;
  max-width:calc(100vw - 36px);
  padding:38px 40px 30px;
  text-align:center;
  border-radius:22px;
  border:1px solid rgba(99,160,255,0.18);
  background:
    linear-gradient(180deg, rgba(17,27,50,0.92), rgba(9,15,30,0.92));
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 80px -20px rgba(2,6,20,0.9),
    0 0 70px -30px rgba(37,99,235,0.45);
  animation:lg-rise .5s cubic-bezier(.22,1,.36,1) both;
}
/* liseré dégradé en haut de carte */
#login-screen .login-box::before{
  content:'';
  position:absolute;
  left:24px; right:24px; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--blue3), transparent);
  opacity:.7;
}
@keyframes lg-rise{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to  { opacity:1; transform:translateY(0)    scale(1); }
}

/* ----- Logo + anneau lumineux ----- */
#login-screen .login-logo-wrap{
  position:relative;
  width:64px; height:64px;
  margin:0 auto 6px;
  display:grid; place-items:center;
}
#login-screen .login-logo-wrap::before{
  content:'';
  position:absolute; inset:-7px;
  border-radius:18px;
  background:conic-gradient(from 140deg, var(--blue2), var(--blue3), var(--cyan), var(--blue2));
  filter:blur(7px);
  opacity:.55;
  animation:lg-spin 6s linear infinite;
}
#login-screen .login-logo{
  position:relative;
  border-radius:15px;
  box-shadow:0 6px 18px rgba(2,6,20,0.6);
}
@keyframes lg-spin{ to{ transform:rotate(360deg); } }

/* ----- Marque ----- */
#login-screen .brand-name{
  font-size:25px; font-weight:800; letter-spacing:.5px;
  color:#fff; margin:10px 0 4px;
}
#login-screen .brand-sub{
  font-size:10.5px; letter-spacing:3.5px; text-transform:uppercase;
  color:var(--blue4); opacity:.85; margin-bottom:26px; font-weight:600;
}

/* ----- Champs avec icône ----- */
#login-screen .login-field{ text-align:left; margin-bottom:14px; }
#login-screen .lbl{
  font-size:10.5px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--text2); font-weight:600; margin-bottom:7px; display:block;
}
#login-screen .login-input-wrap{ position:relative; }
#login-screen .login-ico{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--text3);
  pointer-events:none; transition:color .2s;
}
#login-screen .linput{
  width:100%; box-sizing:border-box;
  padding:12px 14px 12px 40px;
  margin:0;
  background:rgba(255,255,255,0.035);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text); font-size:13.5px; font-family:'Inter',sans-serif;
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
#login-screen .linput::placeholder{ color:var(--text3); }
#login-screen .linput:focus{
  border-color:var(--blue);
  background:rgba(59,130,246,0.07);
  box-shadow:0 0 0 4px rgba(59,130,246,0.12);
}
#login-screen .login-input-wrap:focus-within .login-ico{ color:var(--blue3); }

/* ----- Bouton ----- */
#login-screen .login-btn{
  position:relative; overflow:hidden;
  width:100%; margin-top:6px; padding:13px;
  border:none; border-radius:12px; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700; letter-spacing:.3px;
  color:#fff;
  background:linear-gradient(135deg, #1d4ed8, #3b82f6);
  box-shadow:0 8px 22px -6px rgba(37,99,235,0.55);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s;
}
#login-screen .login-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px -8px rgba(37,99,235,0.7);
  filter:brightness(1.05);
}
#login-screen .login-btn:active{ transform:translateY(0); }
/* reflet qui balaie au survol */
#login-screen .login-btn::after{
  content:'';
  position:absolute; top:0; left:-130%;
  width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-18deg);
  transition:left .55s ease;
}
#login-screen .login-btn:hover::after{ left:140%; }

/* ----- Erreur ----- */
#login-screen .login-error{
  font-size:12px; color:var(--red); margin-top:12px; display:none;
  background:rgba(248,113,113,0.08);
  border:1px solid rgba(248,113,113,0.25);
  border-radius:9px; padding:9px 12px;
  animation:lg-shake .35s ease;
}
@keyframes lg-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
}

/* ----- Pied de carte ----- */
#login-screen .login-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:22px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.06);
}
#login-screen .login-secure{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--text3); font-weight:500;
}
#login-screen .login-secure svg{ width:13px; height:13px; color:var(--accent2); }
#login-screen .public-link-header{
  font-size:12px; color:var(--text3); text-decoration:none;
  display:inline-flex; align-items:center; gap:5px; transition:color .15s;
}
#login-screen .public-link-header:hover{ color:var(--blue3); }

/* ----- Responsive ----- */
@media (max-width:440px){
  #login-screen .login-box{ padding:30px 24px 24px; border-radius:18px; }
  #login-screen .brand-name{ font-size:22px; }
}

/* ----- Respecte les préférences de réduction de mouvement ----- */
@media (prefers-reduced-motion:reduce){
  #login-screen::before,
  #login-screen .login-box,
  #login-screen .login-logo-wrap::before,
  #login-screen .login-error{ animation:none; }
  #login-screen .login-btn::after{ transition:none; }
}