/* LORE&GO — Connexion (charte LORE&GO, inspirée du formulaire Déliroom). */

.lg-login{
  --lg-acc:#df2073;
  --lg-acc-2:#8B3FB0;
  font-family:'Nunito Sans',system-ui,sans-serif;
  color:#f5f2fb;
  width:100%;
  max-width:440px;
  margin:0 auto;
  background:linear-gradient(180deg,rgba(30,23,48,.96),rgba(19,14,31,.98));
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  padding:26px 24px 22px;
  position:relative;
  overflow:hidden;
}
.lg-login::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(95deg,#F5871F,#df2073 32%,#8B3FB0 55%,#2E7BD6 78%,#16B98A);
}
.lg-login__logo{width:150px;margin:2px auto 14px}
.lg-login__title{
  font-family:'Fredoka',system-ui,sans-serif;font-size:26px;line-height:1.1;
  text-align:center;color:#fff;margin:0 0 6px;
}
.lg-login__sub{text-align:center;font-size:14px;color:#c8c1d8;margin:0 0 18px}
.lg-login__notice{
  font-size:13.5px;line-height:1.45;border-radius:12px;padding:10px 12px;margin:0 0 14px;
  background:rgba(223,32,115,.14);border:1px solid rgba(223,32,115,.4);color:#ffd9e8;
}
.lg-login__notice--info{background:rgba(46,123,214,.14);border-color:rgba(46,123,214,.4);color:#d6e7ff}
.lg-login label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#a89fb8;margin:0 0 6px}
.lg-login input[type=text],
.lg-login input[type=password]{
  width:100%;padding:13px 14px;margin:0 0 14px;font-size:15px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;
  transition:border-color .2s,box-shadow .2s;
}
.lg-login input[type=text]:focus,
.lg-login input[type=password]:focus{
  outline:none;border-color:var(--lg-acc);box-shadow:0 0 0 3px rgba(223,32,115,.25);
}
.lg-login__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 16px}
.lg-login__row label{margin:0;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:#c8c1d8;display:flex;align-items:center;gap:8px}
.lg-login__btn{
  display:block;width:100%;border:0;cursor:pointer;
  padding:14px 18px;border-radius:999px;
  font-family:'Fredoka',system-ui,sans-serif;font-size:17px;color:#fff;
  background:linear-gradient(95deg,var(--lg-acc),var(--lg-acc-2));
  box-shadow:0 14px 30px -14px rgba(223,32,115,.8);
  transition:transform .18s,box-shadow .18s;
}
.lg-login__btn:hover{transform:translateY(-2px);box-shadow:0 20px 38px -16px rgba(223,32,115,.9)}
.lg-login__links{display:flex;justify-content:space-between;gap:12px;margin:14px 2px 0;font-size:13px}
.lg-login__links a{color:#c8c1d8;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.3)}
.lg-login__links a:hover{color:#fff}
.lg-login__hp{position:absolute;left:-9999px}

/* Écran plein page (surface restreinte) */
.lg-login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:36px 18px;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(139,63,176,.35),transparent 60%),#0d0a16;
}

/* Pastille + modale de connexion sur les pages LORE&GO */
.lg-login-fab{
  position:fixed;left:var(--lg-fab-x,17px);bottom:18px;z-index:9998;
  height:46px;min-width:46px;padding:0 14px 0 13px;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  background:linear-gradient(95deg,#df2073,#8B3FB0);color:#fff;
  font-family:'Fredoka',system-ui,sans-serif;font-size:15px;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8);
  max-width:46px;overflow:hidden;white-space:nowrap;
  transition:max-width .32s ease,padding .32s ease;
}
.lg-login-fab span{opacity:0;transition:opacity .22s ease .08s}
.lg-login-fab:hover,.lg-login-fab:focus-visible{max-width:230px}
.lg-login-fab:hover span,.lg-login-fab:focus-visible span{opacity:1}
.lg-login-fab svg{width:20px;height:20px;flex:0 0 20px}

.lg-login-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px 16px;background:rgba(7,5,12,.78);backdrop-filter:blur(4px)}
.lg-login-modal.is-open{display:flex}
.lg-login-modal__close{
  position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;
  font-size:20px;line-height:1;cursor:pointer;
}
@media (max-width:480px){
  .lg-login{padding:22px 18px 18px;border-radius:20px}
  .lg-login__title{font-size:23px}
}