/* --------- FOND & BOKEH --------- */
#bokeh-bg{position:fixed;inset:0;z-index:-2}
body{
  margin:0;font-family:'Montserrat',sans-serif;
  background:linear-gradient(130deg,#a1c4fd 0%,#c2e9fb 100%);
}

/* --------- CONTENEUR --------- */
.login-container{
  min-height:100vh;display:flex;justify-content:center;align-items:center;
  padding:20px;
}

/* --------- CARTE --------- */
.login-card{
  width:100%;max-width:460px;padding:46px 44px;
  background:rgba(255,255,255,0.90);          /* OPAQUE ➜ texte lisible */
  backdrop-filter:blur(14px);
  border-radius:24px;border:1px solid rgba(255,255,255,.6);
  box-shadow:0 15px 45px rgba(0,0,0,.28);
  animation:slideDown .7s cubic-bezier(.23,1,.32,1);
}
@keyframes slideDown{from{opacity:0;transform:translateY(-35px)}to{opacity:1;transform:none}}

/* --------- TITRE & SOUS‑TITRE --------- */
.login-title{
  text-align:center;font-size:2.3rem;font-weight:800;color:#004d66;
  margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,.15);
}
.login-subtitle{
  text-align:center;color:#006f91;font-size:17px;margin-bottom:34px;
}

/* --------- FORMULAIRE --------- */
.form-group{margin-bottom:22px}
label{display:block;font-weight:600;color:#004d66;margin-bottom:6px}

.form-control{
  width:100%;padding:13px 15px;font-size:15px;
  border-radius:12px;border:1px solid #b0c9d6;
  background:#f9fdff;color:#004d66;
  transition:border .25s,box-shadow .25s;
}
.form-control::placeholder{color:#90a4ae}
.form-control:focus{
  border-color:#0091ea;outline:none;
  box-shadow:0 0 0 3px rgba(0,145,234,.18);
}

/* --------- INPUT GROUP (œil) --------- */
.input-group{display:flex;align-items:center}
.input-group .form-control{border-right:none;border-radius:12px 0 0 12px}
.togglePassword{
  flex:0 0 52px;height:48px;border:1px solid #b0c9d6;border-left:none;
  border-radius:0 12px 12px 0;background:#e3f2fd;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.togglePassword:hover{background:#bbdefb}
.togglePassword i{color:#004d66;font-size:18px}

/* --------- CTA --------- */
.btn-block{
  display:block;width:100%;padding:15px;font-size:17px;font-weight:700;
  color:#fff;border:none;border-radius:12px;
  background:linear-gradient(135deg,#0084ff,#00bcd4);
  transition:transform .2s,box-shadow .25s;
}
.btn-block:hover{
  transform:scale(1.04);
  box-shadow:0 10px 26px rgba(0,188,212,.45);
}

/* --------- LIEN --------- */
.text-center a{color:#0084ff;text-decoration:none;font-weight:600}
.text-center a:hover{text-decoration:underline}