@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #0f172a;
  --muted: #667085;

  --primary: #4861A5;
  --primary-2: #6A7BD1;

  --accent: #F4B23C;
  --accent-2: #F59E0B;

  --card: rgba(255,255,255,.82);
  --stroke: rgba(15,23,42,.10);

  --shadow-xl: 0 30px 80px rgba(15, 23, 42, .14);
  --shadow-md: 0 12px 30px rgba(15, 23, 42, .10);

  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;

  --ease: cubic-bezier(.2,.9,.2,1);
  --fast: 140ms;
  --med: 220ms;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ink); overflow-x:hidden; }

/* ✅ Background ciblé par .login-bg (pas besoin de body.login-page) */
.login-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 20% 12%, rgba(72,97,165,.22), transparent 60%),
    radial-gradient(900px 500px at 78% 18%, rgba(238,218,198,.55), transparent 62%),
    radial-gradient(1100px 600px at 55% 70%, rgba(106,123,209,.12), transparent 64%),
    linear-gradient(180deg, #f7f8fc 0%, #eef1f7 45%, #edf1f8 100%);
  filter: saturate(1.05);
}

.login-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("assessts/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.03);
  filter: blur(18px) brightness(.96) saturate(1.02);
  opacity: .9;
}

.login-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.72) 26%,
    rgba(255, 255, 255, 0.30) 82%
  );
}

/* Wrapper */
main.login-page{
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 18px 70px;
}

.login-page .login-wrap{
  display:grid;
  place-items:center;
  min-height: calc(100vh - 82px);
  padding: 10px 0;
}

.login-page .login-card{
  width: min(980px, 100%);
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-xl);
  position: relative;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow:hidden;
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  animation: fadeIn .55s var(--ease);
}

.login-page .login-card::before{
  content:"";
  position:absolute;
  inset:-18px;
  background: radial-gradient(closest-side, rgba(72,97,165,.06), transparent 40%);
  filter: blur(28px) saturate(.98);
  z-index:-1;
  border-radius: calc(var(--radius-xl) + 6px);
}

/* Left side */
.login-page .side{
  position: relative;
  padding: clamp(22px, 3.2vw, 34px);
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(72,97,165,.26), transparent 60%),
    radial-gradient(800px 480px at 90% 40%, rgba(238,218,198,.70), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.30));
  border-right: 1px solid rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
}

.login-page .side .side-logo{
  position:absolute;
  right: 18px;
  bottom: 18px;
  width: 160px;
  opacity: .14;
  pointer-events:none;
}

.login-page .side .badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  padding: 10px 12px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.78);
}

.login-page .side .badge .dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 18px rgba(245,158,11,.22);
}

.login-page .side h2{
  margin: 18px 0 8px;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.login-page .side p{
  margin: 0;
  color: rgba(15,23,42,.62);
  font-size: 13px;
  line-height: 1.55;
  max-width: 38ch;
}

.login-page .side .mini-cards{ margin-top: 22px; display:grid; gap: 12px; }

.login-page .mini{
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  box-shadow: 0 12px 25px rgba(15,23,42,.05);
  transition: transform var(--med) var(--ease);
}
.login-page .mini:hover{ transform: translateY(-2px); }

.login-page .mini .ic{
  width: 38px; height: 38px;
  border-radius: 14px;
  background: rgba(72,97,165,.10);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.login-page .mini .ic svg{ width:18px; height:18px; opacity:.85; }
.login-page .mini b{ display:block; font-size: 13px; letter-spacing:-0.01em; }
.login-page .mini span{ display:block; font-size:12px; color: rgba(15,23,42,.58); margin-top:4px; line-height:1.4; }

/* Form */
.login-page .form{
  padding: clamp(22px, 3.2vw, 40px);
  background: rgba(255,255,255,.76);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-page .form-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; }
.login-page .form-brand{ display:flex; align-items:center; gap:12px; }
.login-page .form-logo{
  width:56px; height:56px; border-radius:14px; object-fit:contain; padding:8px;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.62));
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.06);
}
.login-page .form-brand-text b{ display:block; font-size:16px; letter-spacing:-0.02em; }
.login-page .form-brand-text span{ display:block; font-size:12px; color: var(--muted); margin-top:3px; font-weight:700; }
.login-page .form-client-logo{ width:86px; opacity:.95; }

.login-page .form h1{ margin: 6px 0 8px; font-size: clamp(26px, 3vw, 36px); letter-spacing:-0.04em; line-height:1.05; }
.login-page .subtitle{ margin:0 0 18px; color: rgba(15,23,42,.62); font-size:13px; line-height:1.55; max-width:58ch; }

/* Alerts */
.login-page .alert{
  display:flex; gap:12px; align-items:flex-start;
  border-radius: 14px; padding: 12px 14px; margin: 12px 0 6px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.70);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
}
.login-page .alert-icon{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center; flex:0 0 auto;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.75);
}
.login-page .alert-icon svg{ width:18px; height:18px; opacity:.9; }
.login-page .alert-text{ font-size:12.5px; line-height:1.45; font-weight:800; color: rgba(15,23,42,.85); }

.login-page .alert-danger{ border-color: rgba(220, 38, 38, .18); }
.login-page .alert-danger .alert-icon{ background: rgba(220, 38, 38, .08); }
.login-page .alert-success{ border-color: rgba(22, 163, 74, .18); }
.login-page .alert-success .alert-icon{ background: rgba(22, 163, 74, .08); }

/* Fields */
.login-page .field{ margin-top:14px; }
.login-page label{ display:block; font-size:12px; font-weight:800; color: rgba(15,23,42,.70); margin:0 0 8px; }

.login-page .control{ position:relative; }
.login-page .control .icon{
  position:absolute; left:12px; top:50%; transform: translateY(-50%);
  width:18px; height:18px; opacity:.55; pointer-events:none;
  display:grid; place-items:center;
}
.login-page .control .icon svg{ width:18px; height:18px; }

.login-page input[type="text"],
.login-page input[type="password"]{
  width:100%;
  padding: 12px 44px 12px 40px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(250,250,252,.94);
  color: rgba(15,23,42,.90);
  font-weight: 650;
  outline:none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.login-page input:focus{
  border-color: rgba(106,123,209,.85);
  box-shadow: 0 0 0 5px rgba(106,123,209,.16);
  transform: translateY(-1px);
}

/* Toggle password */
.login-page .toggle-password{
  position:absolute; right:10px; top:50%; transform: translateY(-50%);
  width:34px; height:34px; border-radius:12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.80);
  cursor:pointer;
  display:grid; place-items:center;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.login-page .toggle-password:hover{
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}
.login-page .toggle-password .eye{ width:18px; height:18px; opacity:.75; }
.login-page .toggle-password .eye-closed{ display:none; }
.login-page .toggle-password.is-revealed .eye-open{ display:none; }
.login-page .toggle-password.is-revealed .eye-closed{ display:block; }

/* Row + links */
.login-page .row{ margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.login-page .check{ display:flex; align-items:center; gap:10px; font-size:12px; font-weight:800; color: rgba(15,23,42,.62); }
.login-page .check input{ width:16px; height:16px; accent-color: var(--accent-2); }

.login-page .link{
  font-size:12px; font-weight:900; color: rgba(72,97,165,.95);
  text-decoration:none; padding: 8px 10px; border-radius:12px;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.login-page .link:hover{ background: rgba(72,97,165,.08); transform: translateY(-1px); }

/* Buttons */
.login-page .cta{ margin-top:18px; display:flex; gap:12px; align-items:center; }
.login-page .btn{
  appearance:none; border:none; cursor:pointer; border-radius:14px;
  padding:12px 14px; font-weight:900; letter-spacing:-0.01em;
  transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease), filter var(--med) var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px;
}

.login-page .btn-primary{
  flex:1;
  color:#fff;
  background: linear-gradient(90deg, #FFB43A 0%, #FF9424 100%);
  box-shadow: 0 18px 40px rgba(255,148,36,.14), 0 6px 18px rgba(72,97,165,.06);
}
.login-page .btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(255,148,36,.18), 0 8px 22px rgba(72,97,165,.08);
  filter: saturate(1.06);
}
.login-page .btn-primary:disabled{ opacity:.75; cursor:not-allowed; transform:none; }

.login-page .btn-ghost{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.76);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.login-page .btn-ghost:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(15,23,42,.10); }

/* Loader */
.login-page .btn-loader,
.login-page .btn-loading-text{ display:none; }
.login-page .btn.is-loading .btn-text{ display:none; }
.login-page .btn.is-loading .btn-loading-text{ display:inline; }
.login-page .btn.is-loading .btn-loader{
  display:inline-block; width:14px; height:14px;
  border-radius:50%;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: rgba(255,255,255,1);
  animation: spin .9s linear infinite;
}

.login-page .meta{
  margin-top:18px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color: rgba(15,23,42,.45);
  font-size: 11px;
  font-weight: 800;
}

.login-page .sr-live{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; border:0;
}

@keyframes fadeIn{ from{opacity:0; transform: translateY(16px);} to{opacity:1; transform: translateY(0);} }
@keyframes spin{ to{ transform: rotate(360deg);} }

@media (max-width: 860px){
  .login-page .login-card{ grid-template-columns: 1fr; }
  .login-page .side{ border-right:none; border-bottom: 1px solid rgba(15,23,42,.08); }
}

@media (max-width: 576px){
  main.login-page{ padding: 18px 12px 46px; }
}