/* =============================
   RESET & THEME BASE
============================= */
* { box-sizing: border-box; }
html, body { height:100%; margin:0; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; }
body {
  --bg-deep: #0d1b2e; /* bleu nuit subtil */
  --bg-panel: #14263c;
  --bg-panel-alt: #1b3552;
  --grad-accent: linear-gradient(120deg,#5ba8ff,#42f5b9 55%,#5ba8ff 100%);
  --focus: #5ba8ff;
  --radius-sm: 6px; --radius: 14px; --radius-lg: 22px;
  --text: #e2ecf5; --text-dim: #91a4b8; --danger: #ef4444; --warning:#f59e0b; --success:#10b981;
  --border: #27405a; --border-strong:#3c5d7d;
  background: radial-gradient(circle at 18% 24%, #143053 0%, #0d1b2e 55%) fixed;
  color: var(--text);
  display:flex; align-items:stretch; justify-content:center; padding: clamp(1rem,2vw,2.5rem);
  overflow:hidden;
}

/* Noise overlay for subtle texture */
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:
  repeating-linear-gradient(60deg,rgba(255,255,255,0.015)0 2px,transparent 2px 4px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,0.01)0 3px,transparent 3px 6px);
  mix-blend-mode:overlay; opacity:.3;
}

/* =============================
   LAYOUT SHELL
============================= */
.login-shell { width: min(1180px,100%); display:grid; grid-template-columns: clamp(320px,42%,520px) 1fr; gap: clamp(1.75rem,3.3vw,3.75rem); align-items:stretch; }
@media (max-width: 860px){ .login-shell { grid-template-columns: 1fr; } .brand-panel { display:none; } }

.brand-panel { position:relative; background: linear-gradient(160deg,#18314d,#122538 55%,#18314d); border:1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.6rem,4vh,2.6rem) clamp(1.4rem,2.4vw,2.4rem); box-shadow: 0 12px 40px -8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden; isolation:isolate;
}
.brand-panel::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 15%,rgba(94,215,255,.12),transparent 60%), radial-gradient(circle at 22% 75%,rgba(74,255,200,.12),transparent 65%); opacity:.9; }
.brand-inner { position:relative; z-index:2; display:flex; flex-direction:column; gap:1.1rem; }
.brand-header { display:flex; align-items:center; gap:.9rem; }
.brand-logo { width:66px; height:66px; flex:0 0 66px; border-radius:50%; background:#0f2234; display:grid; place-items:center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 10px 24px -10px rgba(0,0,0,.6); overflow:hidden; }
.brand-header { display:flex; align-items:center; gap:1rem; }
.brand-logo-img { width: 80%; height: 80%; object-fit: contain; display:block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.brand-title { font-size: clamp(2rem,3vw,2.8rem); margin:0; font-weight:800; letter-spacing:.8px; background:linear-gradient(90deg,#e4f1ff,#a4fbe2); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 18px rgba(0,0,0,.35)); }
.brand-tagline { margin:.15rem 0 0; color: var(--text-dim); font-weight:500; font-size: clamp(.92rem,1.2vw,1rem); }
.brand-text { display:flex; flex-direction:column; }
.feature-list { margin: .5rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.65rem; font-size:.95rem; }
.feature-list li { display:flex; gap:.55rem; align-items:center; background:rgba(255,255,255,.04); padding:.55rem .75rem; border:1px solid rgba(255,255,255,.07); border-radius: var(--radius-sm); position:relative; backdrop-filter: blur(3px); }
.feature-list li span { font-size:1.05rem; }

/* =============================
   FORM PANEL
============================= */
.form-panel { background: linear-gradient(155deg,#102033 0%,#132b43 55%,#12273c 100%); border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 14px 42px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04); padding: clamp(1.6rem,3.5vh,2.6rem) clamp(1.4rem,2.2vw,2.2rem); display:flex; flex-direction:column; position:relative; overflow:hidden; }
.form-panel::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 22%,rgba(91,168,255,.18),transparent 60%), radial-gradient(circle at 18% 85%,rgba(66,245,185,.18),transparent 55%); pointer-events:none; }
.form-logo-mobile { display:none; align-items:center; justify-content:center; margin-bottom: .75rem; }
.form-logo-mobile .brand-logo { width:64px; height:64px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 8px 18px -10px rgba(0,0,0,.6); }
.form-logo-mobile img { width: 80%; height: 80%; display:block; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }

.form-title { margin:0 0 1.75rem; font-size: clamp(1.55rem,2.3vw,2.1rem); font-weight:700; letter-spacing:.5px; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fields { display:flex; flex-direction:column; gap:1.4rem; }

/* Field wrapper */
.field { position:relative; display:flex; flex-direction:column; }
.field input { background: #0f2234; border:1.5px solid var(--border); padding: 1.1rem .95rem .55rem; font-size:.95rem; border-radius: var(--radius-sm); color: var(--text); font-family: inherit; transition: border-color .35s, background .35s, box-shadow .35s; caret-color: var(--focus); letter-spacing:.4px; }
.field input::placeholder { color:transparent; }
.field input:focus { outline:none; border-color: var(--focus); background:#112d45; box-shadow:0 0 0 3px rgba(91,168,255,.25); }
.field input:focus + label, .field input:not(:placeholder-shown)+label { transform: translateY(-55%) scale(.82); color: var(--focus); background:#112d45; padding:0 .35rem; letter-spacing:.5px; }
.field label { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); font-size:.9rem; color: var(--text-dim); pointer-events:none; transition: transform .35s ease, color .35s, background .35s; border-radius:4px; }
.field-help { margin:.35rem 0 0; font-size:.7rem; letter-spacing:.5px; color: var(--text-dim); opacity:.75; }
.field-msg { margin:.35rem 0 0; font-size:.72rem; min-height:.9rem; font-weight:600; letter-spacing:.3px; }
.field-msg.error { color: var(--danger); }
.field-msg.success { color: var(--success); }

/* Password reveal */
/* .password-field wrapper intentionally kept for future variants (removed empty rule) */
.password-field .icon-btn.reveal { position:absolute; top:50%; right:.75rem; transform:translateY(-50%); background:none; border:1px solid transparent; color: var(--text-dim); cursor:pointer; padding:.35rem .55rem; border-radius: var(--radius-sm); font-size:.9rem; display:flex; align-items:center; justify-content:center; transition: color .3s, border-color .3s, background .3s; }
.password-field .icon-btn.reveal:hover, .password-field .icon-btn.reveal:focus { color: var(--focus); border-color: var(--border-strong); background:#13314d; outline:none; }
.password-field .icon-btn.reveal .icon-eye-off { display:none; }
.password-field .icon-btn.reveal[aria-pressed="true"] .icon-eye { display:none; }
.password-field .icon-btn.reveal[aria-pressed="true"] .icon-eye-off { display:block; }
.capslock-hint { margin:.35rem 0 0; font-size:.65rem; font-weight:600; color: var(--warning); letter-spacing:.6px; }

/* Actions */
.actions { margin: 2.2rem 0 1.3rem; }
.btn-primary { position:relative; width:100%; border:1.5px solid #3d6e99; color: #e6f4ff; font-weight:700; font-size:.98rem; padding: .95rem 1rem; border-radius: var(--radius-sm); letter-spacing:.8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.65rem; overflow:hidden; background-image: var(--grad-accent), linear-gradient(90deg,#14324f,#123049); background-size: 0% 100%, 100% 100%; background-position: left top, left top; background-repeat:no-repeat; transition: border-color .4s, color .4s, background-size .45s ease, transform .25s; }
.btn-primary::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(91,168,255,.15),rgba(66,245,185,.15)); opacity:0; transition:opacity .5s; }
.btn-primary:hover { border-color:#5ba8ff; color:#fff; background-size:100% 100%,100% 100%; }
.btn-primary:hover::before { opacity:1; }
.btn-primary:active { transform:translateY(2px); }
.btn-primary:focus { outline:2px solid #5ba8ff; outline-offset:2px; }
.btn-primary.loading { color:transparent !important; pointer-events:none; }
.btn-primary .btn-label { position:relative; z-index:2; }
.btn-spinner { position:absolute; width:32px; height:32px; border-radius:50%; inset:0; margin:auto; background: conic-gradient(from 0deg,var(--focus),#42f5b9,var(--focus)); -webkit-mask: radial-gradient(circle at center, transparent 48%, #000 49%); mask: radial-gradient(circle at center, transparent 48%, #000 49%); animation: spin 1s linear infinite, pulse 3s ease-in-out infinite; opacity:0; transform:scale(.6); transition: opacity .35s, transform .45s; }
.btn-primary.loading .btn-spinner { opacity:1; transform:scale(1); }
@keyframes pulse { 0%,100% { filter:brightness(1);} 50%{ filter:brightness(1.3);} }

/* Messages globaux */
.global-message { font-size:.78rem; letter-spacing:.5px; font-weight:600; min-height:1.1rem; margin-top:.25rem; }
.global-message.error { color: var(--danger); }
.global-message.success { color: var(--success); }

.legal-note { margin-top:1.6rem; font-size:.6rem; line-height:1.4; letter-spacing:.6px; text-transform:uppercase; color: var(--text-dim); opacity:.7; }

.login-footer { margin-top:2.8rem; font-size:.65rem; letter-spacing:.6px; color: var(--text-dim); text-align:center; opacity:.7; }
.login-footer p { margin:0; }

/* Scrollbar subtle (webkit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0d1b2e; }
::-webkit-scrollbar-thumb { background:#2a4864; border-radius:20px; border:2px solid #0d1b2e; }
::-webkit-scrollbar-thumb:hover { background:#356082; }

/* Animations micro-interaction */
@keyframes shake { 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-6px);} 40%{ transform:translateX(6px);} 60%{ transform:translateX(-4px);} 80%{ transform:translateX(4px);} }
.anim-shake { animation: shake .55s ease; }

/* Accessibility helpers */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }

/* Responsive tweaks */
@media (max-width:560px){
  .form-panel { padding: 1.6rem 1.15rem 2rem; }
  .actions { margin: 1.6rem 0 1.1rem; }
  .btn-primary { font-size:.9rem; }
  .field input { font-size:.9rem; }
  .form-logo-mobile { display:flex; }
}