:root{

--bg:#eef4fb;

--surface:#ffffff;

--surface-soft:#f8fbff;

--text:#0f172a;

--muted:#64748b;

--border:#e2e8f0;

--primary:#2563eb;

--primary-dark:#1d4ed8;

--secondary:#4f46e5;

--gold:#d4af37;

--gold-dark:#b8860b;

--success:#10b981;

--danger:#ef4444;

--warning:#f59e0b;

--sidebar:#081321;

--sidebar-hover:#112443;

--sidebar-active:#1d4ed8;

--shadow:
0 20px 45px rgba(15,23,42,.08);

--radius:24px;

--sidebar-width:300px;

}

* { box-sizing: border-box; }

body{

margin:0;

font-family:'Inter',sans-serif;

background:
linear-gradient(135deg,#f5f8fd 0%,#eef4fb 100%);

color:var(--text);

font-size:15px;

line-height:1.6;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}
a { color: inherit; text-decoration: none; }
code { background: var(--surface-soft); padding: 2px 6px; border-radius: 8px; }

.app-shell{

display:grid;

grid-template-columns:300px 1fr;

min-height:100vh;

background:transparent;

}
.sidebar{

width:300px;

background:
linear-gradient(
180deg,
#071528 0%,
#0c2340 45%,
#102d55 100%);

padding:26px 18px;

display:flex;

flex-direction:column;

gap:20px;

border-right:1px solid rgba(255,255,255,.06);

box-shadow:
0 0 45px rgba(0,0,0,.25);

position:sticky;

top:0;

height:100vh;

overflow-y:auto;

}

.brand {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.08);
    margin-bottom: 12px;
}

.brand-mark,
.brand-logo{

width:64px;

height:64px;

border-radius:18px;

object-fit:contain;

background:white;

padding:6px;

border:2px solid var(--gold);

box-shadow:
0 12px 30px rgba(0,0,0,.20);

flex:0 0 auto;

}

.brand strong { display: block; font-size: 18px; letter-spacing: .02em; }
.brand span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar nav a {
    padding: 12px 14px;
    border-radius: 12px;
    color: #6b5a2b;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    color: var(--gold-dark);
    background: var(--primary-soft);
}

.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.logout {
    display: inline-block;
    margin-top: 12px;
    color: #7f1d1d;
    font-size: 14px;
}

.content{

padding:38px;

max-width:1550px;

width:100%;

margin:auto;

}

.page-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

.page-title h1 {
    margin: 0;
    font-size: 30px;
    letter-spacing: -.04em;
}

.page-title p { margin: 6px 0 0; color: var(--muted); }

.card, .card-lite, .kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.card { padding: 22px; margin-bottom: 22px; }
.card h2 { margin: 0 0 18px; font-size: 20px; }
.card h3 { margin: 22px 0 12px; }
.card p { line-height: 1.55; }
.card-lite { padding: 14px; }
.notice-card { background: var(--warning-soft); }
.form-card { max-width: 980px; }
.narrow-card { max-width: 680px; }

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.toolbar label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}

.kpi-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:24px;

margin:35px 0;

}

.kpi-card{

background:#fff;

border-radius:24px;

padding:28px;

box-shadow:0 18px 40px rgba(15,23,42,.08);

transition:.35s;

position:relative;

overflow:hidden;

min-height:180px;

display:flex;

flex-direction:column;

justify-content:center;

}

.kpi-card strong {
    display: block;
    font-size: 34px;
    margin: 10px 0 4px;
    letter-spacing: -.04em;
}

.kpi-card small { color: var(--muted); line-height: 1.35; display: block; }
.kpi-card.finance { background: #fff8e6; border-color: #e0bd5a; }

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

th, td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-weight: 700;
    background: var(--surface-soft);
}

.simple-table td:not(:first-child),
.simple-table th:not(:first-child) { text-align: right; }

.actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.actions form { margin: 0; }
.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

.btn:hover { background: var(--surface-soft); }
.btn.primary { background: linear-gradient(135deg, #d4af37, #b8860b); border-color: var(--primary); color: #fff; }
.btn.danger { background: var(--danger-soft); border-color: #7f1d1d; color: var(--danger); }
.btn.small { padding: 7px 10px; min-height: 32px; font-size: 12px; }
.btn.full { width: 100%; }

input, select, textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 12px;
    margin-top: 7px;
    font: inherit;
    background: var(--surface);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(212, 175, 55, .25);
    border-color: var(--gold);
}

textarea { resize: vertical; }
label { font-weight: 700; font-size: 14px; }

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.compact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.span-2 { grid-column: span 2; }

.alert {
    padding: 13px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
}

.alert.success { color: var(--success); background: var(--success-soft); border-color: #bbf7d0; }
.alert.danger { color: var(--danger); background: var(--danger-soft); border-color: #7f1d1d; }
.alert.info { color: var(--info); background: var(--info-soft); border-color: #bfdbfe; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.empty { color: var(--muted); margin: 0; }

.status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 800;
}
.status.ok { color: var(--success); background: var(--success-soft); }
.status.off { color: var(--danger); background: var(--danger-soft); }

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.report-header h2 { margin-bottom: 4px; }
.report-header p { margin: 0; color: var(--muted); }
.report-total { text-align: right; }
.report-total span { display: block; color: var(--muted); font-size: 13px; }
.report-total strong { font-size: 40px; letter-spacing: -.05em; }

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.summary-grid div {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    background: var(--surface-soft);
}

.summary-grid strong {
    display: block;
    font-size: 22px;
    margin-top: 6px;
}

.login-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
    background: radial-gradient(circle at top, #fff8dc 0%, #ffffff 50%, #fffaf0 100%);
}

.login-card {
    width: min(440px, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--shadow);
}

.login-card h1 {
    margin: 24px 0 6px;
    font-size: 30px;
    letter-spacing: -.04em;
}

.brand-login .brand-mark, .brand-login .brand-logo { background: #fff; border-color: var(--gold); }
.brand-login strong { color: var(--text); }
.brand-login span { color: var(--muted); }

.demo-box {
    margin-top: 18px;
    padding: 14px;
    border-radius: 16px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}
.demo-box strong { color: var(--text); }

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: static;
        height: auto;
        padding: 18px;
    }
    .sidebar nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .content { padding: 20px; }
    .kpi-grid, .grid-2, .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .content { padding: 16px; }
    .page-title h1 { font-size: 26px; }
    .kpi-grid, .grid-2, .summary-grid, .form-grid, .compact-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: span 1; }
    .toolbar label { width: 100%; display: block; }
    .toolbar .btn, .inline-actions .btn { width: 100%; }
    .sidebar nav { grid-template-columns: 1fr; }
    .report-header { flex-direction: column; }
    .report-total { text-align: left; }
}

@media print {
    body { background: var(--surface); }
    .sidebar, .no-print, .page-title, .alert { display: none !important; }
    .app-shell { display: block; }
    .content { padding: 0; max-width: none; }
    .card { box-shadow: none; border: none; padding: 0; }
    a { text-decoration: none; }
}
.dashboard-hero{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    align-items:center;
    padding:45px;
    margin-bottom:30px;

    background:linear-gradient(135deg,#0b1f3d,#1d4ed8) !important;

    border-radius:30px;
    color:#fff !important;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(13,52,120,.25);
}
.dashboard-hero h1,
.dashboard-hero h2,
.dashboard-hero p,
.dashboard-hero span,
.dashboard-hero strong{
    color:#fff !important;
}
.hero-label{
    display:inline-block;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-weight:700;
    margin-bottom:15px;
}

.dashboard-hero h1{

font-size:28px;

margin:0;

}

.dashboard-hero h2{

font-size:50px;

line-height:1.05;

margin:18px 0;

font-weight:900;

}

.dashboard-hero p{

font-size:18px;

opacity:.92;

line-height:1.8;

}

.hero-buttons{

display:flex;

gap:15px;

margin-top:25px;

flex-wrap:wrap;

}

.hero-right{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}

.hero-powered{

margin-top:20px;

font-size:14px;

opacity:.9;

text-align:center;

}
.kpi-card{

background:#fff;

border-radius:24px;

padding:26px;

box-shadow:0 18px 40px rgba(15,23,42,.08);

transition:.35s;

position:relative;

overflow:hidden;

}

.kpi-card:hover{

transform:translateY(-8px);

box-shadow:0 30px 60px rgba(37,99,235,.15);

}

.kpi-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:7px;

height:100%;

background:linear-gradient(#2563eb,#4f46e5);

}

.kpi-content strong{

font-size:48px;

font-weight:900;

display:block;

margin-top:8px;

margin-bottom:6px;

}

.kpi-content span{

font-size:13px;

font-weight:700;

letter-spacing:.08em;

text-transform:uppercase;

color:#64748b;

}

.kpi-content small{

color:#94a3b8;

font-size:13px;

}

.kpi-icon{

width:72px;

height:72px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

background:linear-gradient(135deg,#2563eb,#4f46e5);

color:#fff;

margin-bottom:18px;

box-shadow:0 12px 25px rgba(37,99,235,.25);

}
@keyframes floatLogo{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0);
}

}
.dashboard-toolbar{

display:grid;

grid-template-columns:320px 1fr;

gap:24px;

margin:28px 0;

align-items:start;

}

.dashboard-quick-actions{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

}

.action-card{

background:white;

border-radius:22px;

padding:22px;

text-align:center;

text-decoration:none;

color:#0f172a;

box-shadow:0 15px 35px rgba(15,23,42,.08);

transition:.3s;

}

.action-card:hover{

transform:translateY(-6px);

}

.action-card span{

display:block;

font-size:34px;

margin-bottom:10px;

}

.action-card strong{

font-size:15px;

}.sidebar-nav{

display:flex;

flex-direction:column;

gap:8px;

margin-top:24px;

}

.nav-title{

font-size:12px;

font-weight:800;

letter-spacing:.18em;

text-transform:uppercase;

color:#8fb4ff;

margin:20px 14px 10px;

}

.sidebar-divider{

height:1px;

border:none;

background:rgba(255,255,255,.12);

margin:20px 0;

}
.sidebar-nav a{

display:flex;

align-items:center;

gap:14px;

padding:14px 18px;

border-radius:16px;

color:#f1f5f9;

font-weight:600;

font-size:15px;

text-decoration:none;

transition:.25s;

}

.sidebar-nav a:hover{

background:rgba(255,255,255,.08);

transform:translateX(5px);

}

.sidebar-nav a.active{

background:linear-gradient(135deg,#2563eb,#4f46e5);

color:#fff;

box-shadow:0 12px 30px rgba(37,99,235,.35);

}
.sidebar-user-card{

display:flex;

align-items:center;

gap:14px;

padding:16px;

border-radius:20px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.08);

margin-top:20px;

}

.sidebar-avatar{

width:54px;

height:54px;

border-radius:50%;

background:linear-gradient(135deg,#2563eb,#4f46e5);

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:800;

color:#fff;

}

.sidebar-user-info strong{

display:block;

color:#fff;

font-size:15px;

}

.sidebar-user-info span{

display:block;

font-size:12px;

color:#8fb4ff;

margin-top:2px;

}

.sidebar-user-info small{

display:block;

margin-top:6px;

font-size:11px;

color:#94a3b8;

}

.logout{

display:block;

margin-top:18px;

padding:14px;

border-radius:14px;

background:#dc2626;

color:white;

text-align:center;

font-weight:700;

text-decoration:none;

transition:.25s;

}

.logout:hover{

background:#b91c1c;

transform:translateY(-2px);

}
/* ===== VERSION MOBILE ===== */
@media (max-width: 900px) {

    body {
        overflow-x: hidden;
    }

    .app-layout,
    .dashboard-layout {
        display: block;
    }

    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        min-height: auto;
        padding: 18px;
    }

    .sidebar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .nav-title,
    .sidebar-divider {
        grid-column: 1 / -1;
    }

    .sidebar-footer {
        margin-top: 20px;
    }

    .main-content,
    main {
        width: 100%;
        margin-left: 0;
        padding: 18px;
    }

    .dashboard-hero {
        grid-template-columns: 1fr;
        padding: 28px 22px;
        border-radius: 22px;
        text-align: left;
    }

    .dashboard-hero h1 {
        font-size: 21px;
    }

    .dashboard-hero h2 {
        font-size: 34px;
        line-height: 1.08;
    }

    .dashboard-hero p {
        font-size: 15px;
        line-height: 1.6;
    }

    .hero-right {
        margin-top: 20px;
    }

    .hero-right img {
        width: 160px !important;
        max-width: 100%;
    }

    .hero-buttons,
    .dashboard-actions,
    .inline-actions,
    .toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hero-buttons .btn,
    .dashboard-actions .btn,
    .toolbar .btn,
    .toolbar button,
    .toolbar input,
    .toolbar select {
        width: 100%;
    }

    .kpi-grid,
    .dashboard-kpis {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .kpi-card {
        min-height: auto;
        padding: 22px;
    }

    .dashboard-main-grid,
    .grid-2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .card {
        padding: 20px;
        border-radius: 20px;
    }

    .dashboard-chart-wrap,
    .card div[style*="height:340px"],
    .card div[style*="height:350px"] {
        height: 280px !important;
    }

    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 700px;
    }
}

@media (max-width: 520px) {

    .sidebar-nav {
        grid-template-columns: 1fr;
    }

    .dashboard-hero h2 {
        font-size: 29px;
    }

    .dashboard-hero {
        padding: 24px 18px;
    }

    .main-content,
    main {
        padding: 12px;
    }

    .card {
        padding: 16px;
    }

    .dashboard-chart-wrap,
    .card div[style*="height:340px"],
    .card div[style*="height:350px"] {
        height: 240px !important;
    }
}
/* ===== MENU MOBILE ===== */

.mobile-menu-btn{

display:none;

position:fixed;

top:15px;

left:15px;

width:52px;

height:52px;

border:none;

border-radius:14px;

background:#2563eb;

color:#fff;

font-size:28px;

font-weight:bold;

cursor:pointer;

z-index:9999;

box-shadow:0 12px 30px rgba(37,99,235,.35);

}

@media (max-width:900px){

.mobile-menu-btn{

display:flex;

align-items:center;

justify-content:center;

}

.sidebar{

position:fixed;

top:0;

left:-320px;

width:300px;

height:100vh;

transition:left .35s ease;

z-index:9998;

}

.sidebar.open{

left:0;

}

}
/* ===== HERO MOBILE ===== */

@media (max-width:980px){

.dashboard-hero{

display:grid !important;

grid-template-columns:1fr !important;

gap:25px;

padding:25px !important;

background:linear-gradient(135deg,#0b1f3d,#1d4ed8)!important;

color:white!important;

overflow:visible!important;

}

.dashboard-hero-content{

display:block!important;

}

.dashboard-hero h1{

font-size:28px!important;

line-height:1.2;

}

.dashboard-hero h2{

font-size:18px!important;

line-height:1.5;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:12px;

}

.hero-buttons .btn{

width:100%;

}

.hero-right{

display:flex!important;

justify-content:center;

margin-top:20px;

}

.hero-right img{

width:160px!important;

height:auto;

}
/* Correction finale du Hero sur mobile */
.dashboard-hero{
    background:linear-gradient(135deg,#0b1f3d,#1d4ed8) !important;
    color:#fff !important;
    border-radius:30px !important;
}

.dashboard-hero h1,
.dashboard-hero h2,
.dashboard-hero p,
.dashboard-hero span,
.dashboard-hero strong,
.dashboard-hero .hero-powered{
    color:#fff !important;
}

@media (max-width:980px){
    .dashboard-hero{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:24px !important;
        padding:24px !important;
        background:linear-gradient(135deg,#0b1f3d,#1d4ed8) !important;
    }

    .dashboard-hero-visual,
    .hero-right{
        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

    .dashboard-hero img{
        width:150px !important;
        max-width:100%;
        height:auto;
    }
}/* Correction finale du Hero sur mobile */
.dashboard-hero{
    background:linear-gradient(135deg,#0b1f3d,#1d4ed8) !important;
    color:#fff !important;
    border-radius:30px !important;
}

.dashboard-hero h1,
.dashboard-hero h2,
.dashboard-hero p,
.dashboard-hero span,
.dashboard-hero strong,
.dashboard-hero .hero-powered{
    color:#fff !important;
}

@media (max-width:980px){
    .dashboard-hero{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:24px !important;
        padding:24px !important;
        background:linear-gradient(135deg,#0b1f3d,#1d4ed8) !important;
    }

    .dashboard-hero-visual,
    .hero-right{
        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

    .dashboard-hero img{
        width:150px !important;
        max-width:100%;
        height:auto;
    }
}
}