*{box-sizing:border-box}
:root{--navy:#0b2554;--blue:#1769aa;--light:#f3f6fb;--border:#dce5f1;--text:#13213a;--muted:#65728a;--success:#148044}
body{margin:0;min-height:100vh;font-family:Arial,sans-serif;background:var(--light);color:var(--text)}
body:has(.card),body:has(.auth-card){display:grid;place-items:center}
.card,.auth-card{width:min(760px,calc(100% - 32px));padding:40px;background:#fff;border-radius:18px;box-shadow:0 16px 45px rgba(16,35,77,.12)}
.auth-card{max-width:520px}
.eyebrow{margin:0;color:var(--muted)}
h1{font-size:clamp(2rem,4vw,3rem);margin:.5rem 0 1rem;color:var(--navy)}
h2{margin:0;color:var(--navy)}
.status,.form{display:grid;gap:12px;margin-top:28px}
.item{display:flex;justify-content:space-between;gap:20px;padding:14px 16px;border:1px solid var(--border);border-radius:10px}
.ok{color:var(--success);font-weight:700}.ko{color:#b42318;font-weight:700}
label{display:grid;gap:8px;font-weight:700}
input{width:100%;padding:13px 14px;border:1px solid #cbd5e1;border-radius:9px;font:inherit}
button{border:0;border-radius:9px;padding:13px 18px;background:var(--navy);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.button-secondary{width:100%;margin-top:10px;background:#fff;color:var(--navy);border:1px solid rgba(255,255,255,.4)}
.alert{padding:12px 14px;border-radius:9px;background:#fff1f2;color:#9f1239}
a{color:var(--blue)}

.crm-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.crm-sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:24px 18px;background:var(--navy);color:#fff}
.crm-brand{display:flex;align-items:baseline;gap:8px;padding:4px 10px 24px;font-size:1.1rem}
.crm-brand strong{font-size:1.75rem}
.crm-nav{display:grid;gap:5px}
.crm-nav a{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:9px;color:#dbe8fb;text-decoration:none}
.crm-nav a:hover,.crm-nav a.active{background:rgba(255,255,255,.13);color:#fff}
.crm-nav span{min-width:24px;padding:2px 7px;border-radius:999px;background:#fff;color:var(--navy);text-align:center;font-size:.8rem;font-weight:700}
.crm-user{margin-top:auto;padding:18px 10px 0;border-top:1px solid rgba(255,255,255,.18)}
.crm-user strong,.crm-user span{display:block}
.crm-user span{margin-top:4px;color:#cbd8ed;font-size:.85rem}

.crm-main{padding:32px}
.crm-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:24px}
.crm-header h1{margin:.35rem 0 0}
.header-meta{text-align:right}
.header-meta span,.header-meta strong{display:block}
.header-meta span{color:var(--muted);font-size:.9rem}

.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.metric-card{padding:20px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 22px rgba(18,42,78,.05)}
.metric-card span,.metric-card small{display:block}
.metric-card span{color:var(--muted)}
.metric-card strong{display:block;margin:12px 0 7px;font-size:2rem;color:var(--navy)}
.metric-card small{color:#7c8799}

.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:18px}
.panel{padding:22px;background:#fff;border:1px solid var(--border);border-radius:14px}
.panel-chart{grid-row:span 2}
.panel-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:22px}
.panel-heading p{margin:5px 0 0;color:var(--muted)}

.bar-chart{height:290px;display:flex;align-items:flex-end;gap:14px;padding-top:20px}
.bar-column{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px}
.bar-track{width:min(52px,70%);height:220px;display:flex;align-items:flex-end;border-radius:9px;background:#edf2f8;overflow:hidden}
.bar-fill{width:100%;min-height:4px;border-radius:9px 9px 0 0;background:linear-gradient(180deg,#2386cf,#0b4f8a)}
.bar-value{font-weight:700;color:var(--navy)}
.bar-column small{color:var(--muted)}

.list{display:grid}
.list-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #edf1f6}
.list-row:last-child{border-bottom:0}
.list-row strong,.list-row small{display:block}
.list-row small,.list-row time{margin-top:4px;color:var(--muted);font-size:.82rem}
.badge{align-self:flex-start;padding:4px 8px;border-radius:999px;background:#edf3fb;color:var(--navy);font-size:.75rem;font-weight:700}
.empty-state{padding:18px;border-radius:10px;background:#f7f9fc;color:var(--muted)}

@media(max-width:1100px){
.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-grid{grid-template-columns:1fr}
.panel-chart{grid-row:auto}
}
@media(max-width:760px){
.crm-shell{grid-template-columns:1fr}
.crm-sidebar{position:relative;height:auto}
.crm-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
.crm-main{padding:20px}
.crm-header{display:block}
.header-meta{text-align:left;margin-top:12px}
.metric-grid{grid-template-columns:1fr}
}

/* DBM Core v1.8 — Navigation unifiée */
.crm-nav-separator{
    display:block;
    height:1px;
    margin:9px 10px;
    background:rgba(255,255,255,.16);
}
.crm-nav-shortcut{
    min-width:auto!important;
    padding:2px 6px!important;
    background:rgba(255,255,255,.16)!important;
    color:#fff!important;
    font-size:.65rem!important;
    letter-spacing:.02em;
}
@media(max-width:760px){
    .crm-nav-separator{
        grid-column:1/-1;
        margin:5px 8px;
    }
}