/* ================================================================
   login.css — Connexion VYZYOSCHOOL (mockup, thème bleu marque)
   ================================================================ */
:root{
  --brand:#2a4ba3; --brand-2:#1b3576; --brand-3:#162b5e; --accent:#7ea6ff;
  --ink:#1f2738; --muted:#6b7280; --border:#e4e8f0; --page:#eef1f7;
}
*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body{ font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif; color:var(--ink);
  background:var(--page); display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:100vh; padding:28px 16px; }

/* coquille (les deux panneaux dans une grande carte arrondie) */
.lgn-shell{ width:100%; max-width:1160px; display:flex; background:#fff; border-radius:26px;
  overflow:hidden; box-shadow:0 24px 70px rgba(20,40,90,.16); min-height:640px; }

/* ── Panneau marque (gauche) ── */
.lgn-brand{ flex:1; position:relative; overflow:hidden; padding:44px 46px; color:#fff;
  display:flex; flex-direction:column;
  background:linear-gradient(150deg,var(--brand) 0%,var(--brand-2) 60%,var(--brand-3) 100%); }
.lgn-brand-deco{ position:absolute; border-radius:50%; pointer-events:none; }
.lgn-d1{ width:480px; height:480px; right:-180px; top:-160px; background:rgba(255,255,255,.05); }
.lgn-d2{ width:340px; height:340px; left:-120px; bottom:-120px; background:rgba(126,166,255,.10); }
.lgn-dots{ position:absolute; top:60px; right:54px; width:120px; height:60px; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.55) 1.6px, transparent 1.6px);
  background-size:14px 14px; }

.lgn-logo{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; margin-bottom:34px; }
.lgn-logo svg{ width:42px; height:46px; flex-shrink:0; }
.lgn-logo-word{ font-weight:800; font-size:22px; letter-spacing:.5px; line-height:1; }
.lgn-logo-word small{ display:block; font-size:11px; font-weight:500; letter-spacing:.3px; opacity:.8; margin-top:4px; }

.lgn-headline{ position:relative; z-index:1; font-size:30px; font-weight:800; line-height:1.25; margin:0 0 30px; max-width:420px; }
.lgn-points{ position:relative; z-index:1; list-style:none; padding:0; margin:0 0 auto; display:flex; flex-direction:column; gap:18px; }
.lgn-points li{ display:flex; align-items:center; gap:14px; }
.lgn-pt-ic{ width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.lgn-pt-t{ font-weight:700; font-size:15px; }
.lgn-pt-s{ font-size:13px; opacity:.78; }
.lgn-hero{ position:relative; z-index:1; max-width:100%; margin:20px auto 0; }
.lgn-secure{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; margin-top:24px; font-size:13px; }
.lgn-secure i{ font-size:20px; color:var(--accent); }
.lgn-secure b{ display:block; }
.lgn-secure span{ opacity:.75; }

/* ── Panneau formulaire (droite) ── */
.lgn-side{ flex:1; background:#fff; padding:40px 48px; display:flex; flex-direction:column; position:relative; }
.lgn-lang{ position:absolute; top:28px; right:40px; display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--border); border-radius:10px; padding:7px 12px; font-size:13px; color:var(--ink);
  background:#fff; cursor:pointer; }
.lgn-lang i.bi-globe{ color:var(--muted); }

.lgn-form-wrap{ margin:auto 0; width:100%; max-width:380px; align-self:center; }
.lgn-h1{ font-size:30px; font-weight:800; margin:0 0 6px; }
.lgn-sub{ font-size:14.5px; color:var(--muted); margin:0 0 26px; }

.lgn-error{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca; border-radius:11px;
  padding:11px 14px; font-size:14px; margin-bottom:20px; display:flex; align-items:center; gap:9px; }

.lgn-field{ margin-bottom:18px; }
.lgn-field label{ display:block; font-size:13.5px; font-weight:600; color:#374151; margin-bottom:8px; }
.lgn-input{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--border);
  border-radius:13px; padding:0 14px; transition:border-color .15s, box-shadow .15s; }
.lgn-input:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(42,75,163,.12); }
.lgn-input > i{ color:#9aa6bc; font-size:18px; }
.lgn-input input{ flex:1; border:none; outline:none; padding:14px 0; font-size:15px; background:transparent; }
.lgn-eye{ border:none; background:none; color:#9aa6bc; cursor:pointer; font-size:18px; padding:4px; }
.lgn-eye:hover{ color:var(--brand); }

.lgn-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.lgn-check{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:#374151; cursor:pointer; }
.lgn-check input{ width:17px; height:17px; accent-color:var(--brand); }
.lgn-forgot{ font-size:13.5px; color:var(--brand); text-decoration:none; font-weight:600; }
.lgn-forgot:hover{ text-decoration:underline; }

.lgn-btn{ width:100%; border:none; border-radius:13px; cursor:pointer; background:var(--brand); color:#fff;
  font-size:15.5px; font-weight:700; padding:15px; display:flex; align-items:center; justify-content:center; gap:9px;
  transition:background .2s; }
.lgn-btn:hover{ background:var(--brand-2); }
.lgn-btn:disabled{ opacity:.85; cursor:default; }
.lgn-btn-spin{ display:none; } .lgn-btn-spin i{ display:inline-block; animation:lgn-spin .8s linear infinite; }
.lgn-btn.is-loading .lgn-btn-label{ display:none; } .lgn-btn.is-loading .lgn-btn-spin{ display:inline-block; }
@keyframes lgn-spin{ to{ transform:rotate(360deg); } }

.lgn-or{ display:flex; align-items:center; gap:14px; color:var(--muted); font-size:13px; margin:20px 0; }
.lgn-or::before,.lgn-or::after{ content:''; flex:1; height:1px; background:var(--border); }
.lgn-sso{ width:100%; border:1.5px solid var(--border); border-radius:13px; cursor:pointer; background:#fff;
  color:var(--brand); font-size:15px; font-weight:700; padding:14px; display:flex; align-items:center;
  justify-content:center; gap:9px; transition:all .15s; }
.lgn-sso:hover{ border-color:var(--brand); background:#f5f8ff; }

.lgn-powered{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:22px; display:flex;
  align-items:center; justify-content:center; gap:7px; }
.lgn-powered svg{ width:18px; height:20px; }
.lgn-powered b{ color:var(--brand); font-weight:800; }

.lgn-foot{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:18px; }
.lgn-foot b{ color:var(--ink); }

/* ── Responsive ── */
@media (max-width:920px){
  .lgn-brand{ display:none; }
  .lgn-shell{ max-width:460px; min-height:auto; }
  .lgn-side{ padding:40px 30px; }
}