html, body {
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

.wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ===================== PANNEAU GAUCHE ===================== */
.panel-left {
    flex: 0 0 58%;
    height: 100vh;
    background: linear-gradient(145deg, #0a0f1e 0%, #0f172a 30%, #1e1b4b 65%, #312e81 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 2rem 1.2rem;
}

.dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(129,140,248,.1) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}
.geo-c1 { position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(129,140,248,.06);top:-180px;right:-180px;pointer-events:none; }
.geo-c2 { position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(99,102,241,.05);bottom:-120px;left:-100px;pointer-events:none; }
.geo-r1 { position:absolute;width:700px;height:700px;border-radius:50%;border:1px solid rgba(129,140,248,.08);top:-280px;right:-250px;pointer-events:none; }

/* Header */
.left-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-shrink: 0;
}
.left-logo-box {
    width: 38px; height: 38px;
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: .95rem;
    box-shadow: 0 6px 16px rgba(99,102,241,.4);
    flex-shrink: 0;
}
.left-brand-name { font-size:.95rem;font-weight:800;color:white;letter-spacing:-.3px;line-height:1; }
.left-brand-tag  { font-size:.58rem;font-weight:500;color:rgba(165,180,252,.65);text-transform:uppercase;letter-spacing:.1em; }

/* Hero */
.left-hero {
    position: relative;
    z-index: 2;
    margin-top: .9rem;
    flex-shrink: 0;
}
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(99,102,241,.18);
    border: 1px solid rgba(129,140,248,.22);
    border-radius: 100px;
    padding: .22rem .75rem;
    font-size: .63rem;
    font-weight: 600;
    color: #a5b4fc;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .6rem;
}
.hero-pill span { width:5px;height:5px;background:#4ade80;border-radius:50%;animation:pulse 2s infinite;flex-shrink:0; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }

.left-hero h1 {
    font-size: 1.55rem;
    font-weight: 900;
    color: white;
    line-height: 1.2;
    letter-spacing: -.4px;
    margin-bottom: .4rem;
}
.left-hero h1 em { font-style:normal;color:#818cf8; }
.left-hero p { font-size:.78rem;color:rgba(148,163,184,.8);line-height:1.55;max-width:400px; }

/* Dashboard window */
.dashboard-window {
    position: relative;
    z-index: 2;
    margin-top: .9rem;
    flex: 1;
    min-height: 0;
    background: #1e293b;
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.window-bar {
    background: #0f172a;
    padding: .38rem .8rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    flex-shrink: 0;
}
.wd { width:9px;height:9px;border-radius:50%; }
.wd-r{background:#ef4444;} .wd-y{background:#f59e0b;} .wd-g{background:#22c55e;}
.window-label { color:rgba(148,163,184,.4);font-size:.58rem;margin-left:.5rem;font-weight:500; }

.window-body { display:flex;flex:1;min-height:0;overflow:hidden; }

/* Sidebar mockup */
.mock-sb {
    width: 44px;
    background: #0f172a;
    border-right: 1px solid rgba(255,255,255,.05);
    padding: .55rem .35rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex-shrink: 0;
}
.mock-icon {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem;
    color: rgba(148,163,184,.4);
}
.mock-icon.on { background:rgba(99,102,241,.25);color:#818cf8; }

/* Content mockup */
.mock-cnt {
    flex: 1;
    background: #f1f5f9;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    overflow: hidden;
    min-height: 0;
}

/* Topbar */
.mock-top {
    background:white;border-radius:6px;height:24px;
    display:flex;align-items:center;padding:0 .6rem;gap:.4rem;
    box-shadow:0 1px 3px rgba(0,0,0,.06);flex-shrink:0;
}
.mock-top-title { font-size:.5rem;font-weight:700;color:#334155;flex:1; }
.mock-av { width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#4f46e5);flex-shrink:0; }

/* KPIs */
.mock-kpis { display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;flex-shrink:0; }
.mock-kpi { background:white;border-radius:6px;padding:.4rem .45rem;box-shadow:0 1px 2px rgba(0,0,0,.05); }
.mk-v { font-size:.65rem;font-weight:800;color:#1e293b;line-height:1; }
.mk-l { font-size:.46rem;color:#94a3b8;margin-top:1px;font-weight:500; }
.mk-b { height:3px;border-radius:2px;margin-top:4px; }
.b-ind { background:linear-gradient(90deg,#6366f1,#818cf8);width:70%; }
.b-grn { background:linear-gradient(90deg,#22c55e,#4ade80);width:55%; }
.b-amb { background:linear-gradient(90deg,#f59e0b,#fbbf24);width:80%; }
.b-red { background:linear-gradient(90deg,#ef4444,#f87171);width:40%; }

/* Bottom row */
.mock-bot { display:flex;gap:.35rem;flex:1;min-height:0;overflow:hidden; }

/* Chart */
.mock-chart {
    flex:0 0 58%;background:white;border-radius:6px;
    padding:.45rem;box-shadow:0 1px 2px rgba(0,0,0,.05);
    display:flex;flex-direction:column;overflow:hidden;
}
.mc-title { font-size:.5rem;font-weight:700;color:#334155;margin-bottom:.3rem;flex-shrink:0; }
.mc-bars {
    display:flex;align-items:flex-end;gap:.2rem;flex:1;
    padding-bottom:.2rem;border-bottom:1px solid #f1f5f9;
}
.mc-col { display:flex;flex-direction:column;align-items:center;gap:2px;flex:1; }
.mc-bar { border-radius:3px 3px 0 0;width:100%; }
.mc-lbl { font-size:.4rem;color:#94a3b8;font-weight:500; }

/* Table */
.mock-tbl {
    flex:1;background:white;border-radius:6px;
    padding:.45rem;box-shadow:0 1px 2px rgba(0,0,0,.05);
    overflow:hidden;display:flex;flex-direction:column;
}
.mt-title { font-size:.5rem;font-weight:700;color:#334155;margin-bottom:.3rem;flex-shrink:0; }
.mt-row { display:flex;align-items:center;gap:.25rem;padding:.18rem .1rem;border-bottom:1px solid #f8fafc;flex-shrink:0; }
.mt-row:last-child { border-bottom:none; }
.mt-av  { width:12px;height:12px;border-radius:3px;flex-shrink:0; }
.mt-cel { flex:1;height:4px;border-radius:2px;background:#f1f5f9; }
.mt-dot { width:5px;height:5px;border-radius:50%;flex-shrink:0; }

/* Feature pills */
.left-pills {
    position: relative;
    z-index: 2;
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    flex-shrink: 0;
}
.feat-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 100px;
    padding: .28rem .7rem;
    font-size: .64rem;
    font-weight: 600;
    color: rgba(203,213,225,.8);
}
.feat-pill i { color:#818cf8;font-size:.62rem; }

/* ===================== PANNEAU DROIT ===================== */
.panel-right {
    flex: 0 0 42%;
    height: 100vh;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2.8rem;
    position: relative;
    overflow: hidden;
}
.panel-right::before {
    content:'';position:absolute;top:-100px;right:-100px;
    width:280px;height:280px;
    background:radial-gradient(circle,rgba(99,102,241,.06),transparent 70%);
    border-radius:50%;pointer-events:none;
}
.panel-right::after {
    content:'';position:absolute;bottom:-80px;left:-80px;
    width:220px;height:220px;
    background:radial-gradient(circle,rgba(99,102,241,.05),transparent 70%);
    border-radius:50%;pointer-events:none;
}

.form-wrapper {
    width: 100%;
    max-width: 360px;
    position: relative;
    z-index: 1;
}

/* Logo */
.right-logo { display:flex;align-items:center;gap:.65rem;margin-bottom:1.6rem; }
.right-logo-box {
    width:38px;height:38px;
    background:linear-gradient(135deg,#6366f1,#4f46e5);
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    color:white;font-size:.95rem;
    box-shadow:0 6px 14px rgba(99,102,241,.35);
    flex-shrink:0;
}
.rl-name { font-size:.88rem;font-weight:800;color:#0f172a;letter-spacing:-.3px;line-height:1; }
.rl-sub  { font-size:.6rem;color:#94a3b8;font-weight:500; }

/* Heading */
.form-heading { margin-bottom:1.4rem; }
.form-heading h2 { font-size:1.5rem;font-weight:900;color:#0f172a;letter-spacing:-.4px;margin-bottom:.3rem; }
.form-heading p  { font-size:.8rem;color:#64748b; }

/* Alerts */
.alert-mod {
    border-radius:10px;border:none;font-size:.78rem;font-weight:500;
    padding:.65rem .9rem;margin-bottom:1rem;
    display:flex;align-items:center;gap:.5rem;
    animation:fadein .3s ease;
}
.alert-mod.err { background:#fef2f2;color:#b91c1c;border:1px solid #fecaca; }
.alert-mod.suc { background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0; }
@keyframes fadein { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }

/* Field */
.field-lbl { font-size:.74rem;font-weight:700;color:#475569;display:block;margin-bottom:.38rem;letter-spacing:.01em; }
.field-wrap { position:relative;margin-bottom:.9rem; }
.field-wrap .ficon { position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:#cbd5e1;font-size:.8rem;pointer-events:none;transition:color .2s; }
.field-ctrl {
    width:100%;height:46px;
    border:1.5px solid #e2e8f0;border-radius:11px;
    padding:0 .9rem 0 2.6rem;
    font-size:.86rem;font-weight:500;color:#1e293b;
    background:#f8fafc;
    transition:all .2s;outline:none;
    font-family:'Inter',sans-serif;
}
.field-ctrl:focus { background:white;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.field-ctrl:focus ~ .ficon { color:#6366f1; }
.eye-btn { position:absolute;right:.9rem;top:50%;transform:translateY(-50%);color:#94a3b8;cursor:pointer;font-size:.78rem;transition:color .2s; }
.eye-btn:hover { color:#6366f1; }

/* Row options */
.opts-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem; }
.rem-chk { display:flex;align-items:center;gap:.4rem;cursor:pointer; }
.rem-chk input { width:15px;height:15px;accent-color:#6366f1;cursor:pointer; }
.rem-chk label { font-size:.76rem;color:#64748b;cursor:pointer;font-weight:500; }
.forgot { font-size:.76rem;color:#6366f1;font-weight:600;text-decoration:none;transition:color .2s; }
.forgot:hover { color:#4f46e5; }

/* Submit */
.btn-sub {
    width:100%;height:47px;
    background:linear-gradient(135deg,#6366f1,#4f46e5);
    border:none;border-radius:11px;
    color:white;font-size:.88rem;font-weight:700;
    cursor:pointer;transition:all .22s;
    display:flex;align-items:center;justify-content:center;gap:.45rem;
    font-family:'Inter',sans-serif;letter-spacing:-.1px;
    box-shadow:0 6px 18px rgba(99,102,241,.3);
    position:relative;overflow:hidden;
}
.btn-sub::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);opacity:0;transition:opacity .2s; }
.btn-sub:hover { transform:translateY(-1px);box-shadow:0 12px 25px rgba(99,102,241,.38); }
.btn-sub:hover::before { opacity:1; }
.btn-sub:disabled { opacity:.7;cursor:not-allowed;transform:none; }

/* Divider */
.div-line { display:flex;align-items:center;gap:.6rem;margin:.9rem 0; }
.div-line::before,.div-line::after { content:'';flex:1;height:1px;background:#e2e8f0; }
.div-line span { font-size:.68rem;color:#94a3b8;font-weight:500;white-space:nowrap; }

/* Feature badges */
.f-badges { display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem; }
.f-b {
    display:inline-flex;align-items:center;gap:.3rem;
    background:#f8fafc;border:1px solid #e2e8f0;
    border-radius:7px;padding:.25rem .55rem;
    font-size:.66rem;font-weight:600;color:#475569;
}
.f-b i { font-size:.62rem;color:#6366f1; }

/* Footer */
.form-ft { text-align:center;font-size:.68rem;color:#94a3b8;line-height:1.6; }
.form-ft strong { color:#475569; }

@media(max-width:860px){
    .panel-left { display:none; }
    .panel-right { flex:0 0 100%; }
}