:root{
  --lst-login-blue:#000A2E;
  --lst-login-blue-2:#00164E;
  --lst-login-blue-3:#07327F;
  --lst-login-green:#97F02D;
  --lst-login-white:#FFFFFF;
  --lst-login-muted:#C7D5F4;
  --lst-login-border:rgba(255,255,255,.16);
  --lst-login-shadow:0 28px 80px rgba(0,0,0,.32);
  --lst-login-radius:22px;
}

body.login{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 18%, rgba(151,240,45,.20) 0 0.5%, transparent 17%),
    radial-gradient(circle at 92% 8%, rgba(0,95,230,.38) 0 0.6%, transparent 19%),
    linear-gradient(135deg,var(--lst-login-blue),var(--lst-login-blue-2) 48%,#00071F);
  font-family:Inter, Sora, Arial, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

body.login:before,
body.login:after{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  border-radius:999px;
}
body.login:before{
  width:520px;
  height:520px;
  left:-210px;
  bottom:-210px;
  background:rgba(151,240,45,.10);
  filter:blur(2px);
}
body.login:after{
  width:420px;
  height:420px;
  right:-160px;
  top:-130px;
  background:rgba(255,255,255,.08);
}

#login{
  position:relative;
  z-index:1;
  width:430px;
  max-width:calc(100vw - 36px);
  padding:0;
}

.login h1{
  margin:0 0 24px;
}

.login h1 a{
  width:360px;
  max-width:100%;
  height:108px;
  margin:0 auto;
  background-image:url('https://lst-defibrillateur.fr/wp-content/uploads/2026/06/Logo-Defibrillateur-long-vert-et-blanc-scaled.png') !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  display:block;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.22));
}

.login form{
  margin-top:0;
  padding:34px 34px 30px;
  border:1px solid var(--lst-login-border);
  border-radius:var(--lst-login-radius);
  background:rgba(255,255,255,.94);
  box-shadow:var(--lst-login-shadow);
  backdrop-filter:blur(14px);
}

.login label{
  color:var(--lst-login-blue-2);
  font-size:13px;
  font-weight:800;
  letter-spacing:.01em;
}

.login form .input,
.login input[type="text"],
.login input[type="password"]{
  min-height:52px;
  margin-top:8px;
  padding:0 15px;
  border:1px solid #D7E2F5;
  border-radius:14px;
  background:#F7FAFF;
  color:var(--lst-login-blue-2);
  font-size:18px;
  box-shadow:none;
  outline:none;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus{
  border-color:var(--lst-login-green);
  box-shadow:0 0 0 4px rgba(151,240,45,.22);
  background:#fff;
}

.login .forgetmenot{
  display:flex;
  align-items:center;
  min-height:42px;
}

.login .forgetmenot label{
  font-weight:700;
  color:#53627D;
}

.wp-core-ui .button-primary{
  min-height:46px;
  padding:0 24px;
  border:0;
  border-radius:14px;
  background:var(--lst-login-green);
  color:var(--lst-login-blue);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
  box-shadow:0 13px 28px rgba(151,240,45,.30);
  text-shadow:none;
  transition:.2s ease;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus{
  background:#A7FF3F;
  color:var(--lst-login-blue);
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(151,240,45,.36);
}

.login #backtoblog,
.login #nav{
  text-align:center;
  margin:18px 0 0;
}

.login #backtoblog a,
.login #nav a,
.login .privacy-policy-page-link a{
  color:rgba(255,255,255,.82) !important;
  font-weight:700;
  text-decoration:none;
}

.login #backtoblog a:hover,
.login #nav a:hover,
.login .privacy-policy-page-link a:hover{
  color:var(--lst-login-green) !important;
}

.login .message,
.login .notice,
.login .success{
  border-left:4px solid var(--lst-login-green);
  border-radius:14px;
  box-shadow:none;
}

.login .privacy-policy-page-link{
  margin:22px 0 0;
}

.login .language-switcher{display:none;}

body.login .lst-login-group-signature{
  position:fixed;
  z-index:1;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  width:310px;
  max-width:70vw;
  opacity:.95;
  filter:drop-shadow(0 10px 25px rgba(0,0,0,.18));
}

body.login .lst-login-group-signature img{
  width:100%;
  height:auto;
  display:block;
}

@media(max-height:760px){
  body.login{align-items:flex-start;padding-top:42px;overflow:auto;}
  body.login .lst-login-group-signature{position:relative;bottom:auto;left:auto;transform:none;margin:22px auto 0;}
}

@media(max-width:520px){
  .login h1 a{height:90px;width:310px;}
  .login form{padding:28px 24px;}
}


/* ======================================================
   Correctif captcha / équation de connexion
   Certains plugins de sécurité injectent un input type=number
   très étroit. On force un vrai champ lisible.
====================================================== */
.login input[type="number"],
.login input[name*="captcha"],
.login input[id*="captcha"],
.login input[name*="math"],
.login input[id*="math"],
.login input[name*="answer"],
.login input[id*="answer"],
.login .aiowps-captcha-equation input,
.login .jetpack-sso-captcha input{
  width:86px !important;
  min-width:86px !important;
  max-width:110px !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 10px !important;
  margin-left:10px !important;
  border:1px solid #D7E2F5 !important;
  border-radius:14px !important;
  background:#F7FAFF !important;
  color:var(--lst-login-blue-2) !important;
  font-size:20px !important;
  font-weight:800 !important;
  text-align:center !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
}

.login input[type="number"]:focus,
.login input[name*="captcha"]:focus,
.login input[id*="captcha"]:focus,
.login input[name*="math"]:focus,
.login input[id*="math"]:focus,
.login input[name*="answer"]:focus,
.login input[id*="answer"]:focus{
  border-color:var(--lst-login-green) !important;
  box-shadow:0 0 0 4px rgba(151,240,45,.22) !important;
  background:#fff !important;
}

.login input[type="number"]::-webkit-outer-spin-button,
.login input[type="number"]::-webkit-inner-spin-button{
  margin:0;
}


/* ======================================================
   Correctif responsive login WordPress - mobile/tablette
   Objectif : centrage parfait logo / formulaire / signature.
====================================================== */
html body.login{
  width:100%;
  min-width:0;
}

body.login{
  box-sizing:border-box;
  flex-direction:column;
  align-items:center!important;
  justify-content:center!important;
  padding:28px 18px 34px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

#login{
  width:430px;
  max-width:min(430px, calc(100vw - 36px));
  margin:0 auto!important;
  padding:0!important;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.login h1{
  width:100%;
  margin:0 auto 22px!important;
  text-align:center;
}

.login h1 a{
  width:min(360px, 86vw)!important;
  height:96px!important;
  margin:0 auto!important;
  background-position:center center!important;
}

.login form{
  width:100%;
  max-width:430px;
  margin:0 auto!important;
  box-sizing:border-box;
}

.login .message,
.login .notice,
.login .success{
  width:100%;
  max-width:430px;
  margin:0 auto 18px!important;
  box-sizing:border-box;
}

body.login .lst-login-group-signature{
  position:relative!important;
  z-index:2;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  top:auto!important;
  transform:none!important;
  width:min(285px, 70vw)!important;
  max-width:70vw!important;
  margin:28px auto 0!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  opacity:.95;
}

body.login .lst-login-group-signature img{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  display:block!important;
  margin:0 auto!important;
}

/* Liens bas de page WordPress centrés */
.login #backtoblog,
.login #nav,
.login .privacy-policy-page-link{
  width:100%;
  max-width:430px;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

/* Responsive iPhone / petits écrans */
@media(max-width:520px){
  body.login{
    min-height:100svh;
    padding:22px 18px 26px!important;
    justify-content:flex-start!important;
  }

  #login{
    max-width:100%;
    margin-top:0!important;
  }

  .login h1 a{
    width:min(330px, 84vw)!important;
    height:86px!important;
  }

  .login form{
    padding:26px 22px!important;
    border-radius:20px!important;
  }

  body.login .lst-login-group-signature{
    width:min(250px, 68vw)!important;
    margin-top:24px!important;
  }

  .login #backtoblog,
  .login #nav,
  .login .privacy-policy-page-link{
    font-size:13px;
  }
}

/* Très petits écrans / paysage */
@media(max-width:380px){
  body.login{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  .login h1 a{
    height:78px!important;
  }

  .login form{
    padding:22px 18px!important;
  }
}

/* Hauteurs faibles : on conserve le centrage horizontal et on évite les éléments en fixed */
@media(max-height:760px){
  body.login{
    align-items:center!important;
    justify-content:flex-start!important;
    padding-top:24px!important;
    overflow-y:auto!important;
  }

  body.login .lst-login-group-signature{
    position:relative!important;
    left:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin:22px auto 0!important;
  }
}