/* #################################### */
/* ########### LOGIN SCREEN ########### */
/* #################################### */

:root{
  --bg-1: #0f1724;          /* arrière-plan sombre */
  --bg-2: #0b2545;          /* variation pour gradient */
  --card-bg: rgba(255,255,255,0.06); /* glass card */
  --accent: #4f46e5;        /* couleur principale (boutons, focus) */
  --accent-2: #06b6d4;      /* couleur secondaire, si besoin */
  --text: #e6eef8;
  --muted: #9fb0cc;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(2,6,23,0.6);
}

/* ----- LAYOUT ----- */
html,body{
  height:100%;
  background: linear-gradient(135deg,var(--bg-1) 0%, var(--bg-2) 100%);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.page-wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 3rem 1rem;
}

/* ----- CARD ----- */
.auth-card{
  width:100%;
  max-width: 940px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1fr 420px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.04);
}

/* left panel: brand / illustration */
.auth-left{
  padding: 2.4rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%),
    linear-gradient(90deg, rgba(255,255,255,0.01), transparent 60%);
  display:flex;
  flex-direction:column;
  gap:1rem;
  justify-content:center;
  align-items:flex-start;
}
.brand{
  display:flex;
  gap:.9rem;
  align-items:center;
}
.brand .logo{
  width:56px;
  height:56px;
  border-radius:12px;
  display:inline-grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  font-weight:700;
  color:var(--text);
  font-size:1.1rem;
  border: 1px solid rgba(255,255,255,0.03);
}
.brand h1{
  font-size:1.15rem;
  margin:0;
  letter-spacing: -0.01em;
}
.brand p{ margin:0; color:var(--muted); font-size:.92rem; }

.left-note{
  margin-top: .6rem;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.5;
  max-width: 32rem;
}

/* right panel: form */
.auth-right{
  padding: 2.4rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-form{
  width:100%;
  max-width: 340px;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1.6rem;
  border: 1px solid rgba(255,255,255,0.04);
}

.form-title{
  font-weight:600;
  margin-bottom:.25rem;
  font-size:1.05rem;
  color: white;
}
.form-sub{
  color:var(--muted);
  font-size:.88rem;
  margin-bottom:1.15rem;
}

/* floating-like inputs (Bootstrap form-control works) */
.form-control:focus{
  box-shadow: 0 0 0 .15rem rgba(79,70,229,0.12);
  border-color: var(--accent);
}

.btn-primary{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border: none;
  padding: .62rem .9rem;
  border-radius:10px;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(79,70,229,0.12);
}

.small-muted{ color:var(--muted); font-size:.88rem; }

/* subtle divider with text */
.divider {
  display:flex;
  gap:.8rem;
  align-items:center;
  margin: .9rem 0;
}
.divider::before, .divider::after{
  content:"";
  flex:1;
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06));
  border-radius:2px;
}
.divider span{ color:var(--muted); font-size:.82rem; }

/* responsive: stack on smaller screens */
@media (max-width: 880px){
  .auth-card{ grid-template-columns: 1fr; }
  .auth-left{ order:1; text-align:center; align-items:center; padding:1.6rem 1.6rem; }
  .auth-right{ order:2; padding:1.2rem 1.2rem;}
  .left-note{ max-width: 100%; }
  .auth-form{ margin-top:0; }
  .text_desc{display: none;}
}