:root {
  --primary: #4e54c8;
  --secondary: #8f94fb;
  --accent: #ff3b30;
  --bg-card: #ffffff;
}

body {
  margin:0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding-top:70px;
}

.login-page {
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
}

.login-card {
  display:flex;
  width: 900px;
  max-width: 95%;
  border-radius: 20px;
  overflow:hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.login-left {
  width: 50%;
  background: var(--bg-card);
  padding: 50px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position: relative;
}

.login-left h2 {
  font-size: 28px;
  color: var(--primary);
  margin-bottom: 10px;
}

.login-left h2 span { color: var(--secondary); }

.login-left p {
  color: #666;
  margin-bottom: 30px;
}

.input-group {
  position: relative;
  margin-bottom: 30px;
}

.input-group input {
  width: 100%;
  padding: 14px 10px;
  border:none;
  border-bottom: 2px solid #ccc;
  outline:none;
  font-size:16px;
  transition: 0.3s;
  background: transparent;
}

.input-group label {
  position: absolute;
  top:14px;
  left:10px;
  pointer-events:none;
  color: #999;
  transition: 0.3s;
}

.input-group input:focus + label,
.input-group input:valid + label {
  top:-10px;
  left:0px;
  font-size:12px;
  color: var(--primary);
}

.focus-border {
  position: absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background: var(--primary);
  transition:0.4s;
}

.input-group input:focus ~ .focus-border {
  width:100%;
}

/* Mot de passe avec œil */
.password-group {
  position: relative;
}

.password-group .toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
  font-size: 18px;
  z-index: 2;
}

.password-group .toggle-password:hover {
  color: var(--primary);
}

.forgot-link {
  text-align:right;
  margin-bottom:20px;
}

.forgot-link a {
  color: var(--accent);
  font-weight:600;
  text-decoration:none;
}

.forgot-link a:hover {
  text-decoration: underline;
}

.btn-login {
  width:100%;
  padding:14px;
  background: linear-gradient(90deg,var(--primary),var(--secondary));
  color:white;
  font-weight:700;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:0.3s;
}

.btn-login:hover {
  transform: scale(1.03);
}

.small { 
  text-align:center; 
  margin-top:12px; 
  color:#666;
}

.small a { color: var(--primary); font-weight:600; text-decoration:none; }
.small a:hover { text-decoration:underline; }

.login-right {
  width: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px;
}

.login-right h3 {
  font-size:24px;
  margin-bottom:10px;
  line-height:1.3;
}

.login-right p {
  font-size:14px;
  color: rgba(255,255,255,0.85);
}

.alert {
  padding:10px 14px;
  border-radius:8px;
  margin-bottom:12px;
  text-align:center;
}
.alert.success{ background:#e6ffef; color:#0a6b3a; border:1px solid #b8f0d0; }
.alert.danger{ background:#ffecec; color:#8a1f1f; border:1px solid #f1c8c8; }

/* responsive */
@media(max-width:900px){
  .login-card{ flex-direction:column; border-radius:15px; }
  .login-left, .login-right{ width:100%; padding:30px; }
  .login-right{ text-align:center; }
}