/* ============================================================
   Clean business app (the "logiciel métier")
   ============================================================ */
.app {
  display: flex;
  background: #fff;
  color: #16202b;
  font-family: var(--sans);
  overflow: hidden;
  /* height comes from the flex/basis context of c-app / d-app —
     an explicit 100% here can't resolve against a flex parent and
     collapses to content height, blowing the layout up. */
}

/* ---- sidebar ---- */
.app-side {
  flex: 0 0 196px;
  background: #fff;
  border-right: 1px solid #eef0f2;
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 18px;
}
.app-logo { padding: 4px 6px 10px; }
.app-logo .brand-mark { width: 44px; height: 44px; font-size: 22px; border-radius: 11px; }
.app-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 9px;
  color: #5b6675; font-size: 14.5px; font-weight: 500;
}
.nav-item .nav-ic { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.is-on { background: var(--green-soft); color: var(--deep-1); font-weight: 600; }
.nav-item.is-on .nav-ic { stroke: var(--green); }

/* ---- main ---- */
.app-main { flex: 1; min-width: 0; padding: 22px 26px; display: flex; flex-direction: column; gap: 20px; }
.app-top { display: flex; align-items: center; gap: 16px; }
.app-top h3 { font-size: 25px; font-weight: 700; letter-spacing: -.01em; }
.app-top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.app-select { border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px; color: #45505d; font-weight: 500; }
.app-range { border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px; color: #6b7682; }

/* ---- KPI cards ---- */
.kpis { display: flex; gap: 14px; }
.kpi {
  flex: 1; min-width: 0;
  border: 1px solid #eceef1; border-radius: 14px; padding: 15px 16px;
  background: #fff; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 1px 0 rgba(20,40,30,.02);
}
.kpi-lab { font-size: 12.5px; color: var(--green); font-weight: 600; }
.kpi-val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #14202b; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-sub { font-size: 11.5px; color: var(--muted-2); }
.kpi-bar { height: 7px; border-radius: 99px; background: #edf0f2; overflow: hidden; margin-top: 2px; }
.kpi-bar > i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--green), var(--green-bright)); border-radius: inherit; }

/* ---- card rows ---- */
.app-row { display: flex; gap: 16px; flex: 1; min-height: 0; }
.card {
  border: 1px solid #eceef1; border-radius: 16px; background: #fff;
  padding: 18px 18px 14px; display: flex; flex-direction: column; min-width: 0;
  box-shadow: 0 1px 0 rgba(20,40,30,.02);
}
.card.grow { flex: 1; min-width: 0; }
.card-h { margin-bottom: 12px; }
.card-h h4 { font-size: 16px; font-weight: 700; color: #1c2733; }
.alerts-card { flex: 0 0 198px; }
.donut-card { flex: 0 0 292px; }

/* ---- projets table ---- */
.p-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.p-table th {
  text-align: left; font-weight: 600; color: var(--muted);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  padding: 0 10px 9px; border-bottom: 1px solid #eef1f3;
}
.p-table td { padding: 11px 10px; border-bottom: 1px solid #f1f3f5; vertical-align: middle; white-space: nowrap; }
.p-table tbody tr:last-child td { border-bottom: 0; }
.p-table .p-nom { font-weight: 600; color: #1b2733; }
.p-table .num { text-align: right; font-variant-numeric: tabular-nums; color: #46505c; }
.p-table .p-ech { color: #6b7682; }
.p-av { width: 130px; }
.p-av .av-bar { display: inline-block; width: 70px; height: 6px; border-radius: 99px; background: #edf0f2; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.p-av .av-bar > i { display: block; height: 100%; width: var(--w); background: var(--green-bright); border-radius: inherit; }
.p-av b { font-size: 12.5px; color: #46505c; font-weight: 600; }

/* status pills */
.pill { display: inline-block; padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.p-prog { background: var(--st-progress-bg); color: var(--st-progress); }
.p-good { background: var(--st-done-bg);     color: var(--st-done); }
.p-bad  { background: var(--st-blocked-bg);  color: var(--st-blocked); }
.p-wait { background: var(--st-wait-bg);     color: var(--st-wait); }

/* ---- alerts ---- */
.alerts { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.al { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 500; }
.al-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.al-danger { background: #fdecea; color: #b23a2a; } .al-danger .al-ic { background: #f6c9c1; color: #b23a2a; }
.al-warn   { background: #fef6e7; color: #8a6516; } .al-warn .al-ic { background: #f6dfa6; color: #8a6516; }
.al-info   { background: #eaf1fb; color: #2c5694; } .al-info .al-ic { background: #c5d8f3; color: #2c5694; }

/* ---- line chart ---- */
.c-line { width: 100%; height: 100%; flex: 1 1 auto; min-height: 0; display: block; overflow: visible; }
.c-line .grid { stroke: #eef1f3; stroke-width: 1; }
.c-line .yl { fill: var(--muted-2); font-size: 11px; text-anchor: end; font-family: var(--sans); }
.c-line .xl-lab { fill: var(--muted); font-size: 12px; text-anchor: middle; font-family: var(--sans); }
.c-line .line { stroke: var(--green-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-line .dot { fill: #fff; stroke: var(--green-bright); stroke-width: 3; }

/* ---- donut ---- */
.donut-wrap { display: flex; align-items: center; gap: 14px; flex: 1; }
.donut-graphic { position: relative; flex: 0 0 auto; width: 138px; height: 138px; }
.c-donut { width: 138px; height: 138px; transform: rotate(-90deg); }
.c-donut .seg { stroke-linecap: butt; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center .donut-total { font-size: 30px; font-weight: 800; color: #16202b; line-height: 1; }
.donut-center span { font-size: 11px; color: var(--muted); }
.donut-legend { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; min-width: 0; }
.donut-legend li { display: flex; align-items: center; gap: 8px; }
.donut-legend .lg-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.donut-legend .lg-lab { color: #46505c; }
.donut-legend .lg-val { margin-left: auto; font-weight: 700; color: #1b2733; padding-left: 12px; }

/* ---- compact variant (slide C: dashboard shown as a smaller preview) ---- */
.app-table .app-side { flex-basis: 170px; padding: 14px 11px; gap: 12px; }
.app-table .app-logo { padding: 2px 4px 6px; }
.app-table .app-logo .brand-mark { width: 36px; height: 36px; font-size: 18px; border-radius: 9px; }
.app-table .nav-item { padding: 7px 10px; font-size: 12.5px; gap: 9px; border-radius: 8px; }
.app-table .nav-item .nav-ic { width: 16px; height: 16px; }
.app-table .app-main { padding: 16px 18px; gap: 13px; }
.app-table .app-top h3 { font-size: 20px; }
.app-table .app-top-right { font-size: 11px; gap: 8px; }
.app-table .app-select, .app-table .app-range { padding: 6px 9px; }
.app-table .kpis { gap: 10px; }
.app-table .kpi { padding: 10px 12px; border-radius: 11px; gap: 4px; }
.app-table .kpi-lab { font-size: 10.5px; }
.app-table .kpi-val { font-size: 24px; }
.app-table .kpi-sub { font-size: 9.5px; }
.app-table .kpi-bar { height: 6px; }
.app-table .card { padding: 13px 15px 10px; border-radius: 13px; }
.app-table .card-h { margin-bottom: 8px; }
.app-table .card-h h4 { font-size: 14.5px; }
.app-table .p-table { font-size: 12.5px; }
.app-table .p-table th { font-size: 10px; padding: 0 9px 7px; }
.app-table .p-table td { padding: 8px 9px; }
.app-table .alerts-card { flex-basis: 210px; }
.app-table .alerts { gap: 8px; }
.app-table .al { padding: 9px 11px; font-size: 12.5px; }
.app-table .al-ic { width: 22px; height: 22px; }

/* window wrapper */
.win { border-radius: var(--radius-win); overflow: hidden; box-shadow: var(--shadow-win); background: #fff; }