:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --brand:#2563eb;
  --sidebar:#375451;
  --sidebar-2:#375451;
  --shadow:0 2px 8px rgba(15,23,42,.06);
  --good:#16a34a; --warn:#d97706; --bad:#e11d48;

  /* Layout fixe */
  --sbw:260px; /* largeur sidebar (tu peux remettre 240 si tu préfères) */
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow: hidden; /* on scrolle uniquement .main en desktop */
}

/* ===== Layout fixe: sidebar à gauche, contenu scrollable ===== */
.app{ display:block; }

/* Sidebar */
.sidebar{
  position: fixed; top: 0; left: 0;
  width: var(--sbw);
  height: 100dvh;
  overflow-y: auto;
  background: linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
  color:#cbd5e1;
  display:flex; flex-direction:column;
  border-right:1px solid rgba(255,255,255,.06);
  z-index: 100;
  scrollbar-gutter: stable;
}
.sidebar::-webkit-scrollbar{ width: 10px; }
.sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius: 8px; }

/* Contenu droit */
.main{
  position: relative;
  margin-left: var(--sbw);
  height: 100dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-width:0;
  background:var(--bg);
}

/* ===== Topbar sticky (reste visible au scroll) ===== */
.topbar{
  position: sticky; top: 0;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 24px 10px;
  background: var(--bg);
  z-index: 2;
  /* Légère séparation visuelle */
  border-bottom: 1px solid rgba(0,0,0,0.03);
  backdrop-filter: saturate(1.2) blur(2px);
}

h1{margin:0 0 6px; font-size:26px}
.muted{color:var(--muted)}
.small{font-size:12px}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px; text-decoration:none;
  border:1px solid var(--line); color:var(--text); background:#fff;
  box-shadow:var(--shadow); cursor:pointer;
  transition: transform .04s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover{box-shadow:0 6px 16px rgba(15,23,42,.12)}
.btn:active{transform: translateY(1px)}
.btn:focus-visible{outline:2px solid rgba(37,99,235,.5); outline-offset:2px}
.btn--brand{background:var(--brand); border-color:var(--brand); color:#fff}
.btn--light{background:#f8fafc}

/* ===== Contenu ===== */
.content{padding:0 24px 24px; max-width:1160px; margin:0 auto}

/* ===== Sidebar content ===== */
.sidebar__brand{padding:18px 18px 12px}
.sidebar__brand img{
  width:150px;height:auto;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
  max-width:190px; margin: 10px auto 16px;
}
.sidebar__nav{padding:8px}
.sidebar__sep{height:1px;background:rgba(255,255,255,.08);margin:8px 0}

/* Nav items */
.navItem{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; text-decoration:none; color:#cbd5e1;
  transition:.15s ease; border:1px solid transparent;
}
.navItem:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1)}
.navItem__icon{width:22px;text-align:center;opacity:.9}
.navItem.is-active{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); color:#fff}

/* Sous-menu */
.sidebar__sub {
  margin: 6px 0 0 12px;
  padding-left: 10px;
  border-left: 1px dashed rgba(255,255,255,0.2);
}
.navItem--sub { font-size: 14px; opacity: .95; }
.navItem--sub .navItem__icon { transform: scale(.9); opacity: .85; }

/* Footer sidebar */
.sidebar__footer{
  margin-top:auto; padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.08)
}

/* ===== Cards & grids ===== */
.grid{display:grid; gap:14px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.grid--2-1{display:grid; grid-template-columns:minmax(560px, 2fr) minmax(340px, 1fr); gap:16px}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:18px;
}
.card--table{padding:0}
.card__head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 8px}
.card__head h2{margin:0;font-size:18px}

/* KPIs */
.kpi{font-size:34px;font-weight:800;margin-top:4px}
.kpi--good{color:var(--good)} .kpi--warn{color:var(--warn)} .kpi--bad{color:var(--bad)}
.subtle{font-size:12px;color:var(--muted)}
.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid var(--line); border-radius:20px; background:#f8fafc
}
.tag{margin-left:8px; display:inline-block; padding:2px 8px; font-size:12px; border-radius:999px; background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff}

/* Tables */
table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border-top:1px solid var(--line)}
th,td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:left}
th{background:#f8fafc; color:#334155; font-weight:600}
tr:last-child td{border-bottom:none}
.right{text-align:right}

/* Table canaux — UX améliorée */
.table--channels .rowTitle{ display:grid; grid-template-rows:auto 6px; gap:6px }
.table--channels .rowTitle__name{ display:flex; align-items:center; gap:8px; font-weight:600 }
.table--channels .bar{ width:100%; height:6px; background:#eef2f7; border-radius:999px; overflow:hidden }
.table--channels .bar__fill{ display:block; height:100%; background:var(--brand); opacity:.65 }

/* Chip pour % CA */
.chip{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:#edf3ff; color:#1e40af; font-weight:600; font-size:12px;
}

/* Compact */
.card--compact table td, .card--compact table th { padding-top:10px; padding-bottom:10px }
.card--compact .card__head h2 { font-size:18px }

/* Footnote */
.footnote{padding:8px 24px 20px; color:var(--muted); font-size:12px; max-width:1160px; margin:0 auto}

/* Scrollbar main (discret) */
.main::-webkit-scrollbar{ width: 10px; }
.main::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 8px; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  body{ overflow:auto; }          /* la page redevient scrollable */
  .sidebar{
    position: sticky; top:0; height: auto; width: 100%;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,.12);
    z-index: 5;
  }
  .main{ margin-left: 0; height: auto; overflow: visible; }
  .topbar{ padding:18px 16px 8px; }
  .content{ padding:0 16px 16px; }
}