/* ═══ LOGIN PAGE ═══ */
.login-body { background:#f0f4f8; min-height:100vh; padding:0; }

.login-back {
  position:fixed; top:1.2rem; left:1.5rem; z-index:100;
  display:flex; align-items:center; gap:0.4rem;
  color:var(--text-soft); text-decoration:none; font-size:0.85rem;
  background:rgba(255,255,255,0.8); backdrop-filter:blur(10px);
  padding:0.4rem 1rem; border-radius:100px;
  border:1px solid rgba(0,0,0,0.08); transition:all 0.2s;
}
.login-back:hover { color:var(--green); border-color:rgba(0,200,83,0.3); }

.login-page {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100vh;
}

/* GAUCHE */
.login-brand {
  background: linear-gradient(135deg, #0a1a0a, #0f2a0f);
  display:flex; align-items:center; justify-content:center;
  padding:3rem 4rem; position:relative; overflow:hidden;
}
.login-brand::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 50%, rgba(0,200,83,0.12), transparent 60%);
}
.brand-content { position:relative; z-index:1; }
.brand-logo {
  width:80px; height:80px; object-fit:contain;
  margin-bottom:1.5rem;
  filter:drop-shadow(0 0 20px rgba(0,200,83,0.3));
  animation:float 4s ease-in-out infinite;
}
.login-brand h1 {
  font-family:'Cinzel Decorative',serif;
  font-size:1.8rem; color:#fff; margin-bottom:1rem;
  letter-spacing:1px;
}
.login-brand p {
  color:rgba(255,255,255,0.6); font-size:0.95rem;
  line-height:1.8; margin-bottom:2rem; max-width:320px;
}
.brand-features { display:flex; flex-direction:column; gap:0.8rem; }
.brand-feat {
  display:flex; align-items:center; gap:0.8rem;
  color:rgba(255,255,255,0.8); font-size:0.9rem;
}
.brand-feat svg { color:var(--green); flex-shrink:0; }

/* DROITE */
.login-form-side {
  display:flex; align-items:center; justify-content:center;
  padding:3rem 2rem; background:#f0f4f8;
}
.login-box {
  width:100%; max-width:420px;
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.9);
  border-radius:24px; padding:2.5rem;
  box-shadow:0 8px 40px rgba(0,0,0,0.08);
}

/* TABS */
.login-tabs {
  display:flex; background:rgba(0,0,0,0.05);
  border-radius:12px; padding:4px;
  margin-bottom:2rem;
}
.login-tab {
  flex:1; padding:0.6rem; border:none; background:none;
  font-family:'Outfit',sans-serif; font-size:0.9rem;
  font-weight:500; color:var(--text-soft);
  border-radius:9px; cursor:pointer; transition:all 0.2s;
}
.login-tab.active {
  background:#fff; color:var(--text);
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.login-box h2 {
  font-family:'Playfair Display',serif;
  font-size:1.6rem; font-weight:800; margin-bottom:0.3rem;
}
.login-sub { color:var(--text-soft); font-size:0.88rem; margin-bottom:1.8rem; }

.field-group { margin-bottom:1.1rem; }
.field-group label {
  display:block; font-size:0.8rem; font-weight:600;
  color:var(--text-soft); margin-bottom:0.4rem;
}
.field-group input {
  width:100%; padding:0.8rem 1rem;
  background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.1);
  border-radius:12px; font-family:'Outfit',sans-serif;
  font-size:0.95rem; color:var(--text); outline:none;
  transition:border-color 0.2s;
}
.field-group input:focus { border-color:var(--green); background:#fff; }

.pwd-wrap { position:relative; }
.pwd-wrap input { padding-right:2.8rem; }
.pwd-eye {
  position:absolute; right:0.8rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--text-soft);
  padding:0.2rem; transition:color 0.2s;
}
.pwd-eye:hover { color:var(--green); }

.form-error {
  color:#e74c3c; font-size:0.82rem;
  margin-bottom:0.8rem; min-height:1.2rem;
}

.btn-login {
  width:100%; padding:0.9rem;
  background:var(--green); color:#fff;
  border:none; border-radius:12px;
  font-family:'Outfit',sans-serif; font-weight:700;
  font-size:1rem; cursor:pointer; transition:all 0.2s;
  box-shadow:0 4px 16px rgba(0,200,83,0.3);
  margin-top:0.5rem;
}
.btn-login:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,200,83,0.4); }

.form-switch {
  text-align:center; margin-top:1.2rem;
  font-size:0.85rem; color:var(--text-soft);
}
.form-switch a { color:var(--green); cursor:pointer; font-weight:600; }

/* MOBILE */
@media (max-width:768px) {
  .login-page { grid-template-columns:1fr; }
  .login-brand { display:none; }
  .login-form-side { padding:5rem 1.2rem 2rem; }
  .login-box { padding:1.8rem; }
  .login-back { top:1rem; left:1rem; font-size:0.8rem; }
}