/* ============================================================================
   SENDRAISE · ACE — Base commune des illustrations de blocs
   Fondation partagée par toutes les mini-interfaces (chrome, tokens, typo,
   en-tête de panneau, onglets, indicateurs, dropdown, états vides).
   Reprend à l'identique les tokens de src/theme (palette.ts / typography.ts).
   Chaque bloc charge ce fichier PUIS son CSS spécifique.
   ============================================================================ */

@font-face{font-family:'dm-sans';src:url('/assets/ace/app-fonts/DMSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'dm-sans';src:url('/assets/ace/app-fonts/DMSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'dm-sans';src:url('/assets/ace/app-fonts/DMSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'dm-mono';src:url('/assets/ace/app-fonts/DMMonoCustom-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'dm-mono';src:url('/assets/ace/app-fonts/DMMonoCustom-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}

:root{
  --inverted:#1C2F3F;
  --paper:#FBFBF9;
  --default:#F4F4F1;
  --bg02:#E4E3DD;
  --text-primary:#262522;
  --text-secondary:#7a796e;
  --text-tertiary:#b3b1a1;
  --divider:rgb(218,217,208);
  --primary:#3081db;
  --primary-contrast:#F1F7FE;
  --secondary-main:#3f505e;
  --secondary-contrast:#F1F2F3;
  --warning:#BC5F06;
  --warning-light:#F6E5D5;
  --success:#297c40;
  --error:#A40D00;
  --grey-50:rgb(248,248,246);
  --grey-100:rgb(228,227,221);
  --grey-300:rgb(208,207,195);
  --grey-500:rgb(179,177,161);
  --grey-700:rgb(122,121,110);
  --neutral-light:#FBFBF9;
  --neutral-light-contrast:#262522;
  --gold:#A37A00;
  /* évolution KPI (HeaderSummaryCard) */
  --evo-success:#4CAF50;
  --evo-error:#F44336;
  /* palette graphes OKLCH (Analytics.helpers chartPalette) */
  --chart-midnight:#2B5A7A;
  --chart-gold:#8B6B3B;
  --chart-teal:#3B7A6B;
  --chart-olive:#5B7A3B;
  --chart-rust:#8B5B3B;
  --r:4px;
  --elev2:0px 1px 5px rgba(28,47,63,0.08),0px 3px 18px rgba(28,47,63,0.04),0px 15px 80px rgba(28,47,63,0.03);
  --elev1:0px 0px 1px rgba(0,0,0,0.02),0px 0px 4px rgba(0,0,0,0.04),0px 0px 18px rgba(0,0,0,0.06);
  --shadow-tertiary:inset 0px 0px 0px 1px rgba(66,65,59,0.20),0px 1px 3px rgba(66,65,59,0.1),inset 0px -1px 0px rgba(0,0,0,0.1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'dm-sans','Helvetica Neue',Arial,sans-serif;
  color:var(--text-primary);
  background:transparent;
  -webkit-font-smoothing:antialiased;
}

/* ── Typographie (variants MUI repris) ─────────────────────────────────── */
.t-h2{font-size:24px;line-height:32px;font-weight:500;}
.t-h3{font-size:18px;line-height:24px;font-weight:500;}
.t-sectionHeading{font-size:10px;line-height:18px;letter-spacing:2.4px;text-transform:uppercase;font-weight:700;}
.t-sectionHeading12{font-size:12px;line-height:18px;letter-spacing:2.4px;text-transform:uppercase;font-weight:700;}
.t-subtitle1{font-size:14px;line-height:20px;}
.t-subtitle1_m{font-size:14px;line-height:20px;font-weight:500;}
.t-subtitle2{font-size:12px;line-height:16px;}
.t-subtitle2_m{font-size:12px;line-height:16px;font-weight:500;}
.t-body2_m{font-size:16px;line-height:24px;font-weight:500;}
.t-buttonLarge{font-size:18px;line-height:28px;}
.t-caption{font-size:12px;line-height:16px;}
.mono{font-family:'dm-mono','Helvetica Neue',Arial,monospace;}
.t-number0{font-family:'dm-mono';font-size:16px;line-height:24px;}
.t-number1{font-family:'dm-mono';font-size:14px;line-height:20px;text-align:right;}
.t-number1_m{font-family:'dm-mono';font-size:14px;line-height:20px;text-align:right;font-weight:500;}
.t-number2{font-family:'dm-mono';font-size:12px;line-height:16px;text-align:right;}
.t-number2_m{font-family:'dm-mono';font-size:12px;line-height:16px;text-align:right;font-weight:500;}
.t-numberTitle{font-family:'dm-mono';font-size:48px;line-height:40px;}
.t-cardNumber{font-family:'dm-mono';font-size:32px;line-height:40px;}

/* ── Fenêtre / chrome discret ──────────────────────────────────────────── */
.app-window{
  width:920px;height:640px;
  background:var(--paper);
  border:1px solid var(--divider);
  border-radius:10px;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--elev2);
}
.app-topbar{
  height:38px;flex:0 0 38px;
  display:flex;align-items:center;gap:14px;
  padding:0 14px;
  background:#fff;
  border-bottom:1px solid var(--divider);
}
.win-dots{display:flex;gap:7px;}
.win-dots i{width:10px;height:10px;border-radius:50%;background:var(--grey-300);display:block;}
.app-breadcrumb{
  display:flex;align-items:center;gap:7px;
  color:var(--text-secondary);font-size:12px;font-weight:500;
}
.app-breadcrumb .mark{width:14px;height:14px;color:var(--inverted);}
.app-breadcrumb .sep{opacity:.4;}
.app-breadcrumb .cur{color:var(--text-primary);}
.app-topbar .spacer{margin-left:auto;}

/* ── Panneau / page ────────────────────────────────────────────────────── */
.panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);}
.panel-header{background:var(--inverted);flex:0 0 auto;}
.panel-header-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 28px 18px;
}
.panel-header-top .client-name{color:var(--primary-contrast);display:flex;align-items:center;gap:12px;}
.client-ico{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.08);display:inline-flex;align-items:center;justify-content:center;color:var(--primary-contrast);}
.client-ico svg{width:18px;height:18px;}
.beta-tag{display:inline-flex;align-items:center;font-family:'dm-sans';font-size:11px;font-weight:600;line-height:1;padding:3px 8px;border-radius:999px;background:var(--warning-light);color:var(--warning);text-transform:none;letter-spacing:0;}
.header-sub{color:var(--primary-contrast);opacity:.7;margin:6px 0 0;font-size:14px;line-height:20px;}
.icon-btn{
  width:30px;height:30px;border:none;background:transparent;cursor:pointer;
  border-radius:var(--r);color:var(--secondary-contrast);
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.icon-btn:hover{background:rgba(255,255,255,0.08);}
.icon-btn svg{width:18px;height:18px;}

/* indicateurs (en-tête sombre) */
.indicators{display:flex;flex-wrap:wrap;align-items:flex-start;padding:0 28px 18px;gap:0;}
.indicator{margin-right:40px;}
.indicator:last-child{margin-right:0;}
.indicator .lbl{color:var(--secondary-contrast);opacity:.7;margin-bottom:4px;}
.indicator .val{color:var(--secondary-contrast);font-family:'dm-mono';font-size:16px;line-height:24px;font-weight:500;display:flex;align-items:center;gap:4px;}
.indicator .lblrow{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.indicator .lblrow svg{width:14px;height:14px;color:var(--primary);opacity:.85;}
.logos{display:flex;align-items:center;gap:4px;}
.logos img{width:24px;height:24px;border-radius:3px;object-fit:contain;}

/* onglets */
.tabs{display:flex;gap:0;padding:0 28px;}
.tab{
  position:relative;background:none;border:none;cursor:pointer;
  font-family:'dm-sans';font-size:14px;font-weight:500;line-height:20px;
  color:var(--secondary-contrast);opacity:.7;
  padding:12px 16px;display:flex;align-items:center;gap:8px;
  transition:opacity .15s;white-space:nowrap;
}
.tab:first-child{padding-left:0;}
.tab:hover{opacity:.9;}
.tab.active{opacity:1;}
.tab.active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--primary);border-radius:2px 2px 0 0;
}
.tab:first-child.active::after{left:0;right:16px;}
.tab .chip{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--secondary-contrast);color:var(--inverted);
  border-radius:999px;font-size:11px;font-weight:600;padding:1px 7px;
}
.tab .chip svg{width:11px;height:11px;}
.tab .warn{width:15px;height:15px;color:var(--warning);}

/* corps + panes */
.panel-body{flex:1;overflow-y:auto;background:var(--paper);}
.panel-body::-webkit-scrollbar{width:8px;}
.panel-body::-webkit-scrollbar-thumb{background:var(--grey-300);border-radius:4px;}
.tabpane{display:none;}
.tabpane.active{display:block;}
.pad{padding:24px 28px;}
.section-title{color:var(--text-primary);margin:0 0 18px;}

/* sous-barre + dropdown (filtres) */
.subbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.subbar .sp{margin-left:auto;}
.dropdown{
  height:32px;border:none;border-radius:var(--r);background:#fff;
  box-shadow:var(--shadow-tertiary);padding:0 28px 0 10px;
  font-family:'dm-sans';font-size:13px;font-weight:500;color:var(--text-primary);
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a796e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;
}
.dropdown.on-dark{background-color:rgba(255,255,255,0.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3);color:var(--primary-contrast);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F1F7FE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");}

/* état vide */
.empty{text-align:center;padding:36px 24px;color:var(--text-secondary);}
.empty svg{width:64px;height:64px;color:var(--grey-300);margin-bottom:14px;}
.empty .et{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:6px;}
.empty .ed{font-size:13px;max-width:420px;margin:0 auto;line-height:1.5;}

/* tooltip générique (hover hints) */
.hint{position:relative;}