/* ==========================================================================
   JANGE — Connexion (panneau illustré à gauche, OTP à droite)
   ========================================================================== */

.login-shell{ min-height:100vh; display:flex; background:var(--surface); }

/* ---------- Panneau gauche : illustration de l'établissement ---------- */
.login-side{
  flex:1 1 52%; max-width:760px; position:relative; overflow:hidden; color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:36px 40px; background-color:#2a2150;
  background-size:cover; background-position:center; transition:background-color .2s;
}
/* Voile : léger en haut (logo lisible), plus dense en bas (nom + adresse). */
.login-side::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,8,28,.38) 0%, rgba(10,8,28,0) 24%, rgba(10,8,28,0) 52%, rgba(10,8,28,.78) 100%);
}
.login-side > *{ position:relative; z-index:1; }
.login-side .login-logo{ height:40px; width:auto; display:block; }
.side-bottom{ display:flex; align-items:center; gap:16px; }
.tenant-text{ min-width:0; }
.tenant-name{ font-size:24px; font-weight:800; line-height:1.15; letter-spacing:-.01em; text-shadow:0 1px 12px rgba(0,0,0,.35); }
.tenant-address{ font-size:13.5px; opacity:.88; margin-top:4px; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.login-side .tenant-logo,
.login-side .tenant-badge{
  width:56px; height:56px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:22px; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.25); border:2px solid rgba(255,255,255,.85);
}
.login-side .tenant-logo{ object-fit:cover; background:#fff; }
.login-side [hidden]{ display:none !important; }

/* ---------- Panneau droit ---------- */
.login-main{ flex:1 1 48%; display:flex; align-items:center; justify-content:center; padding:32px 28px; }
.login-box{ width:100%; max-width:410px; }
.login-box h1{ font-size:26px; font-weight:800; letter-spacing:-.015em; margin:0 0 8px; }
.login-box p.sub{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:0 0 24px; }
.login-logo-mobile{ display:none; height:34px; margin-bottom:26px; }

.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field label, .field-label{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.hint{ font-size:12px; color:var(--ink-faint); }

.phone-input{
  display:flex; align-items:center; border:1.5px solid var(--border); border-radius:12px; background:var(--surface);
  transition:border-color .15s, box-shadow .15s;
}
.phone-input:focus-within{ border-color:var(--indigo); box-shadow:0 0 0 4px var(--indigo-soft); }
.phone-flag{
  font-size:11.5px; font-weight:800; color:var(--ink-soft); background:var(--surface-2);
  padding:0 12px; align-self:stretch; display:flex; align-items:center; border-radius:10px 0 0 10px; border-right:1px solid var(--border);
}
.phone-input input{ flex:1; min-width:0; border:0; outline:0; background:transparent; padding:14px 14px; font-size:15.5px; color:var(--ink); letter-spacing:.01em; }

/* Choix du mode de réception */
.channel-pills{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pill{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px;
  border:1.5px solid var(--border); border-radius:12px; background:var(--surface); color:var(--ink-soft);
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:border-color .15s, background .15s, color .15s;
}
.pill svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pill:hover{ border-color:var(--ink-faint); }
.pill.active{ border-color:var(--indigo); background:var(--indigo-soft); color:var(--indigo-strong); }
.pill:focus-visible{ outline:3px solid var(--indigo-soft); outline-offset:1px; }

.login-box .btn, .login-box button{ font-family:inherit; }
.btn.lg{ padding:14px 18px; font-size:15px; border-radius:12px; margin-top:4px; }
.form-error{ background:var(--red-soft); color:var(--red); border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:12px; line-height:1.45; }

.secure-row{ display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:12px; color:var(--ink-faint); line-height:1.5; }
.secure-row svg{ flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-top:1px; }

/* ---------- Étape code ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:4px; background:none; border:0; color:var(--ink-soft); font:inherit; font-size:13px; font-weight:700;
  cursor:pointer; padding:4px 8px 4px 0; margin-bottom:14px;
}
.back-link svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.back-link:hover{ color:var(--ink); }

.otp-boxes{ display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin-bottom:16px; }
.otp-boxes input{
  width:100%; aspect-ratio:1/1.12; text-align:center; font-size:24px; font-weight:800; color:var(--ink);
  border:1.5px solid var(--border); border-radius:12px; background:var(--surface); outline:0; padding:0;
  transition:border-color .15s, box-shadow .15s; caret-color:var(--indigo);
}
.otp-boxes input:focus{ border-color:var(--indigo); box-shadow:0 0 0 4px var(--indigo-soft); }
.otp-boxes input.filled{ border-color:var(--ink-faint); }
.otp-boxes.error input{ border-color:var(--red); animation:otpShake .35s; }
@keyframes otpShake{ 20%{transform:translateX(-5px)} 60%{transform:translateX(5px)} 100%{transform:none} }

.resend-row{ display:flex; justify-content:center; margin-top:16px; font-size:13px; color:var(--ink-soft); }
.link-btn{ background:none; border:0; color:var(--indigo-strong); font:inherit; font-weight:700; cursor:pointer; padding:0; }
.link-btn:hover{ text-decoration:underline; }
.alt-channels{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 10px; margin-top:8px; font-size:12.5px; color:var(--ink-faint); }
.alt-channels .link-btn{ font-size:12.5px; margin:0 5px; }

.staff-switch{ display:flex; justify-content:center; margin-top:14px; font-size:12.5px; }
.staff-switch .link-btn{ font-size:12.5px; }
.recovery-input{
  width:100%; box-sizing:border-box; text-align:center; font-size:20px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  border:1.5px solid var(--border); border-radius:12px; background:var(--surface); color:var(--ink); padding:13px 12px; outline:0;
}
.recovery-input:focus{ border-color:var(--indigo); box-shadow:0 0 0 4px var(--indigo-soft); }

.login-foot{ margin-top:22px; font-size:12px; color:var(--ink-faint); text-align:center; }
.demo-note{ margin-top:26px; padding:11px 13px; border-radius:10px; background:var(--surface-2); font-size:11.5px; color:var(--ink-soft); line-height:1.55; }
.tenant-suspended-note{ margin-bottom:18px; padding:12px 14px; border-radius:10px; background:var(--red-soft); color:var(--red); font-size:13px; line-height:1.5; }
.login-box [hidden]{ display:none !important; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .login-side{ display:none; }
  .login-main{ align-items:flex-start; padding-top:48px; }
  .login-logo-mobile{ display:block; }
}
@media (prefers-reduced-motion:reduce){ .otp-boxes.error input{ animation:none; } }