:root{--primary:#4f8cff;--secondary:#6c5ce7}

/* ================= BACKGROUND ANIMÉ ================= */
body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Segoe UI',system-ui,Arial;
  overflow:hidden;
  position:relative;
  background:linear-gradient(-45deg,#4f8cff,#6c5ce7,#00c9a7,#1f2d3d);
  background-size:400% 400%;
  animation:gradientMove 18s ease infinite;
}

@keyframes gradientMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Bulles */
.bg-bubbles{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  overflow:hidden;
  z-index:0;
}
.bg-bubbles span{
  position:absolute;
  display:block;
  width:25px;
  height:25px;
  background:rgba(255,255,255,0.15);
  animation:float 25s linear infinite;
  bottom:-150px;
  border-radius:50%;
  backdrop-filter:blur(2px);
}
@keyframes float{
  0%{transform:translateY(0) scale(0.7) rotate(0deg);opacity:0}
  20%{opacity:.5}
  100%{transform:translateY(-1200px) scale(1.2) rotate(360deg);opacity:0}
}
.bg-bubbles span:nth-child(1){left:5%;animation-duration:22s;width:18px;height:18px}
.bg-bubbles span:nth-child(2){left:15%;animation-duration:28s}
.bg-bubbles span:nth-child(3){left:25%;animation-duration:18s;width:12px;height:12px}
.bg-bubbles span:nth-child(4){left:40%;animation-duration:30s}
.bg-bubbles span:nth-child(5){left:55%;animation-duration:26s;width:20px;height:20px}
.bg-bubbles span:nth-child(6){left:70%;animation-duration:24s}
.bg-bubbles span:nth-child(7){left:80%;animation-duration:32s;width:15px;height:15px}
.bg-bubbles span:nth-child(8){left:90%;animation-duration:20s}

/* ================= CARTE ================= */
.auth-container{
  position:relative;
  z-index:2;
  width:100%;
  max-width:950px;
  height:560px;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 35px 80px rgba(0,0,0,.25);
}

/* IMAGE */
.auth-image{
  position:relative;
  background:url('pages/assets/img/pexels-rdne-7362953.jpg') center/cover no-repeat;
}
.auth-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(75,119,178,0.75),rgba(0,0,0,.65));
}

.branding{
  position:absolute;
  bottom:40px;
  left:40px;
  color:#fff;
  z-index:2;
}
.branding h1{font-weight:700;font-size:28px}
.branding p{opacity:.9;font-size:14px}

/* FORM */
.login-side{
  padding:50px 45px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.login-side h2{
  text-align:center;
  font-weight:700;
  margin-bottom:1.8rem;
  color:#1f2d3d;
}

.form-control{
  background:#c5d2e4;
  border:none;
  border-radius:10px;
  padding:.8rem .9rem;
}
.form-control:focus{
  background:#fff;
  box-shadow:0 0 0 .15rem rgba(79,140,255,.25);
}

.input-group-text{
  background:#c5d2e4;
  border:none;
  border-radius:0 10px 10px 0;
}

.btn-login{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border:none;
  border-radius:12px;
  padding:.8rem;
  font-weight:600;
  color:#fff;
  transition:.25s;
}
.btn-login:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.error-box{
  background:#ffe5e5;
  color:#b30000;
  border-radius:10px;
  padding:.6rem;
  margin-top:.8rem;
}

/* Responsive */
@media(max-width:900px){
  .auth-container{grid-template-columns:1fr;height:auto}
  .auth-image{display:none;}
}