/* ==========================================================================
   Compta EcomSphere — habillage repris de la charte ecomsphere-labs.com
   Navy #081220 · cyan #6dd5ed · bleu #3a8bbf · or #c9a876 · Inter
   Le cyan de la charte est trop clair sur fond blanc : en thème clair l'accent
   descend sur le bleu #2f7fab, qui garde le même ton en restant lisible. Le
   cyan d'origine reprend sa place en thème sombre, où il est chez lui.
   ========================================================================== */
:root {
  --navy: #081220;
  --navy-2: #0c1a2c;
  --navy-3: #122236;
  --cyan: #6dd5ed;
  --blue: #3a8bbf;
  --gold: #c9a876;

  --bg: #f2f5f8;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --border: #e4eaf1;
  --border-strong: #cfd9e4;
  --text: #0c1a2c;
  --text-2: #55647a;
  --text-3: #8b9ab0;
  --accent: #2f7fab;
  --accent-soft: #e7f2f8;
  --pos: #0f8a5f;
  --pos-soft: #e4f5ee;
  --neg: #cc3b47;
  --neg-soft: #fdeaec;
  --warn: #9a7434;
  --warn-soft: #f8f1e3;

  --on-navy: #f1f5f9;
  --on-navy-dim: #94a3b8;

  /* Teintes des blocs passerelle : le vert de Shopify, le bleu de PayPal. */
  --sp-bg: rgba(15, 138, 95, .05);
  --sp-bg-fort: rgba(15, 138, 95, .11);
  --sp-trait: #0f8a5f;
  --pp-bg: rgba(47, 127, 171, .06);
  --pp-bg-fort: rgba(47, 127, 171, .13);
  --pp-trait: #2f7fab;

  /* ---------------------------------------------------------------------
     Palette CATÉGORIELLE — camemberts, marchés, canaux publicitaires.
     Les couleurs de la charte (accent #2f7fab et bleu #3a8bbf) ne sont
     séparées que de 11 points de teinte : côte à côte dans un camembert,
     Google et Meta se confondaient, France et Suisse aussi. Cette palette
     écarte les teintes d'au moins 40°, et fait varier la clarté en plus de
     la teinte — de quoi rester lisible même en vision des couleurs atypique
     ou sur une capture en niveaux de gris.
     --------------------------------------------------------------------- */
  --c1: #2f7fab;   /* bleu    */
  --c2: #e07b39;   /* orange  */
  --c3: #3f9e6d;   /* vert    */
  --c4: #8b5fbf;   /* violet  */
  --c5: #d4485e;   /* framboise */
  --c6: #c9a876;   /* or      */
  --c7: #3fb3c4;   /* turquoise */
  --c8: #7a8899;   /* ardoise */

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(8, 18, 32, .04), 0 6px 18px -10px rgba(8, 18, 32, .18);
  --shadow-pop: 0 10px 40px -12px rgba(8, 18, 32, .35);
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #081220;
    --surface: #0c1a2c;
    --surface-2: #122236;
    --border: rgba(255, 255, 255, .07);
    --border-strong: rgba(125, 196, 224, .22);
    --text: #f1f5f9;
    --text-2: #94a3b8;
    --text-3: #64748b;
    --accent: #6dd5ed;
    --accent-soft: rgba(109, 213, 237, .12);
    --pos: #3ecf94;
    --pos-soft: rgba(62, 207, 148, .13);
    --neg: #ff6b78;
    --neg-soft: rgba(255, 107, 120, .13);
    --warn: #c9a876;
    --warn-soft: rgba(201, 168, 118, .13);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-pop: 0 10px 40px -12px rgba(0, 0, 0, .7);
    /* Sur fond navy, les teintes catégorielles doivent être éclaircies :
       un #2f7fab sur #081220 rend un aplat sombre et terne. */
    --c1: #6dd5ed;
    --c2: #f2a05f;
    --c3: #4fd39a;
    --c4: #b592e8;
    --c5: #ff7d8d;
    --c6: #dcc08f;
    --c7: #5fd3e0;
    --c8: #9fb0c4;
    /* Sur fond navy, une teinte à 7 % ne se voit pas : on monte à 11 %. */
    --sp-bg: rgba(62, 207, 148, .11);
    --sp-bg-fort: rgba(62, 207, 148, .19);
    --sp-trait: #3ecf94;
    --pp-bg: rgba(109, 213, 237, .11);
    --pp-bg-fort: rgba(109, 213, 237, .19);
    --pp-trait: #6dd5ed;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.022em; }
.muted { color: var(--text-2); }
.tiny { font-size: 11px; }

/* ---------- barre du haut : le bandeau de marque ----------
   Le bandeau et la barre de filtres sont collés ENSEMBLE : un `top` en dur sur
   la seconde se désaccorde au moindre changement de marge du premier. */
.sticky-head { position: sticky; top: 0; z-index: 30; }
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 22px;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
  color: var(--on-navy);
  border-bottom: 1px solid rgba(109, 213, 237, .18);
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1 1 auto; }
.brand h1 {
  font-size: 15px; white-space: nowrap; font-weight: 500; color: var(--on-navy);
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.brand h1 span { color: var(--cyan); }
/* Petit histogramme : le même signe que la favicon. */
.mark {
  width: 17px; height: 17px; flex: none; border-radius: 5px;
  background:
    linear-gradient(to top, var(--cyan) 42%, transparent 42%) 0 100% / 3px 100% no-repeat,
    linear-gradient(to top, var(--cyan) 72%, transparent 72%) 5px 100% / 3px 100% no-repeat,
    linear-gradient(to top, var(--cyan) 56%, transparent 56%) 10px 100% / 3px 100% no-repeat,
    linear-gradient(to top, var(--gold) 92%, transparent 92%) 15px 100% / 3px 100% no-repeat;
}
.freshness {
  font-size: 11px; color: var(--on-navy-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.topbar-actions { display: flex; gap: 8px; align-items: center; flex: none; }

.btn {
  font: inherit; font-size: 13px; padding: 6px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); cursor: pointer; white-space: nowrap;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { color: #fff; filter: brightness(1.08); }
.btn[disabled] { opacity: .55; cursor: progress; }
/* Les boutons posés sur le bandeau navy suivent le fond, pas le thème. */
.topbar .btn {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16);
  color: var(--on-navy);
}
.topbar .btn:hover { background: rgba(109, 213, 237, .16); border-color: var(--cyan); color: var(--cyan); }

/* ---------- menu déroulant (Exporter) ---------- */
.menu { position: relative; }
.menu > summary { list-style: none; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ' ▾'; opacity: .7; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 40; width: 274px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 6px; display: grid; gap: 2px;
}
.menu-panel button {
  font: inherit; text-align: left; cursor: pointer; width: 100%;
  background: none; border: 0; border-radius: var(--radius-sm); padding: 9px 11px; color: var(--text);
  display: grid; gap: 2px;
}
.menu-panel button:hover { background: var(--accent-soft); }
.menu-panel button strong { font-size: 13px; font-weight: 600; }
.menu-panel button span { font-size: 11.5px; color: var(--text-2); line-height: 1.35; }
.menu-panel button[disabled] { opacity: .55; cursor: progress; }

/* ---------- contrôles ---------- */
.controls {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  padding: 11px 22px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.ctrl-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ctrl-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 500; }
.dates label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.dates input {
  font: inherit; font-size: 12px; padding: 4px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
}
.chip {
  font: inherit; font-size: 12px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* Flèches de navigation de période, de part et d'autre des deux champs de date :
   c'est là qu'on regarde quand on veut changer de période. */
.nav-periode {
  font: inherit; font-size: 15px; line-height: 1; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; cursor: pointer; flex: none;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  transition: all .18s var(--ease);
}
.nav-periode:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.nav-periode[disabled] { opacity: .35; cursor: default; }

/* ---------- disposition ---------- */
main { padding: 20px 22px 64px; max-width: 1560px; margin: 0 auto; }
.loading { padding: 60px; text-align: center; color: var(--text-3); }
section { margin-bottom: 24px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 11px; }
.section-head h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); font-weight: 600;
}

/* ---------- tuiles : les six indicateurs, sur une seule ligne ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; }
@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; min-width: 0; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
/* Filet de marque en haut de chaque tuile. */
.kpi::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  opacity: .55;
}
.kpi .label {
  font-size: 10.5px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600;
}
.kpi .value {
  font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums;
  margin-top: 4px; letter-spacing: -0.03em; white-space: nowrap;
}
.kpi .sub { font-size: 11px; color: var(--text-2); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.delta { font-variant-numeric: tabular-nums; font-weight: 600; }
.delta.up { color: var(--pos); } .delta.down { color: var(--neg); } .delta.flat { color: var(--text-3); }

/* ---------- tableaux ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
  font-weight: 600; background: var(--surface-2); position: sticky; top: 0;
}
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
th:first-child { background: var(--surface-2); z-index: 2; }
tbody tr:hover td, tbody tr:hover td:first-child { background: var(--surface-2); }
/* ---------- blocs par passerelle (Shopify Payments / PayPal) ----------
   Chaque passerelle est un bloc teinté, délimité par un filet vertical : sans
   cela les six colonnes se lisent comme une seule série et on ne sait plus quel
   taux appartient à quelle passerelle. */
th.grp {
  text-align: center; color: var(--text); letter-spacing: .07em;
  font-size: 11px; padding-top: 10px;
}
td.sp, th.sp { background: var(--sp-bg); }
td.pp, th.pp { background: var(--pp-bg); }
tbody tr:hover td.sp { background: var(--sp-bg-fort); }
tbody tr:hover td.pp { background: var(--pp-bg-fort); }
/* Filet à la frontière de chaque bloc, en-tête, corps et total compris. */
th.sep, td.sep { border-left: 2px solid var(--border-strong); }
th.grp.sp { border-bottom: 2px solid var(--sp-trait); }
th.grp.pp { border-bottom: 2px solid var(--pp-trait); }
tfoot td.sp { background: var(--sp-bg-fort); }
tfoot td.pp { background: var(--pp-bg-fort); }
tfoot td { font-weight: 600; background: var(--surface-2); border-top: 2px solid var(--border-strong); border-bottom: 0; }
tfoot td:first-child { background: var(--surface-2); }
td.pos { color: var(--pos); } td.neg { color: var(--neg); }
/* Part du CA, sous la valeur : c'est la lecture qui sert à arbitrer. */
.share { font-size: 11px; color: var(--text-2); font-weight: 500; }
.share.hot, .share .hot { color: var(--neg); font-weight: 600; }
/* Montant facturé par la régie, dans sa devise : repère de vérification. */
.natif { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---------- abonnement éditable, dans la cellule ---------- */
.abo-edit { display: flex; gap: 3px; justify-content: flex-end; margin-top: 3px; }
.abo-input {
  font: inherit; font-size: 11px; width: 62px; text-align: right; padding: 1px 5px;
  border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); font-variant-numeric: tabular-nums;
}
.abo-input:focus { outline: none; border-color: var(--accent); }
.abo-input::placeholder { color: var(--text-3); font-style: italic; }
.abo-cur {
  font: inherit; font-size: 10.5px; padding: 1px 3px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); cursor: pointer;
}

/* ---------- sélecteur de mode fournisseur, dans la cellule ---------- */
.mode-select {
  font: inherit; font-size: 10.5px; margin-top: 3px; padding: 1px 18px 1px 6px;
  border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text-2); cursor: pointer; text-transform: lowercase;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) calc(50% + 1px), calc(100% - 6px) calc(50% + 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.mode-select:hover { border-color: var(--accent); color: var(--accent); }
.mode-select.set { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.tag {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 5px;
  font-weight: 600; letter-spacing: .02em; vertical-align: middle;
}
.tag.reel { background: var(--pos-soft); color: var(--pos); }
.tag.extra { background: var(--warn-soft); color: var(--warn); }
.tag.indic { background: var(--accent-soft); color: var(--accent); }
.tag.alert { background: var(--neg-soft); color: var(--neg); }

/* Ligne de réconciliation sous le tableau des passerelles : le CA par passerelle
   est avant retours, le CA TTC est net. Sans cette ligne, la question revient. */
.reconcil {
  font-size: 11.5px; color: var(--text-2); padding: 10px 14px;
  border-top: 1px solid var(--border); background: var(--surface-2);
}
.reconcil strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- graphiques ---------- */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.chart-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}
.chart-card h3 { font-size: 12px; color: var(--text-2); margin-bottom: 2px; }
.chart-card .hint { font-size: 11px; color: var(--text-3); margin-bottom: 10px; }
svg { display: block; width: 100%; height: auto; overflow: visible; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-2); margin-top: 8px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* `display: block` et non flex : en flex, chaque <strong> du message devient une
   colonne à part et le texte se disloque. */
.banner {
  display: block; padding: 11px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--warn-soft); color: var(--warn);
  font-size: 12.5px; margin-bottom: 14px;
}
.banner.info { background: var(--accent-soft); color: var(--accent); }
/* Panne d'une source : le seul bandeau rouge du tableau de bord. Il ne signale
   pas une donnée imparfaite mais une donnée QUI NE BOUGE PLUS. */
.banner.alerte {
  background: var(--neg-soft); color: var(--neg);
  border: 1px solid var(--neg); font-weight: 500;
}
.banner.done { background: var(--pos-soft); color: var(--pos); }
.banner a { text-decoration: underline; }

/* ---------- réglages ---------- */
dialog {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: var(--text); padding: 22px; max-width: 560px; width: calc(100% - 32px);
  max-height: 84vh; box-shadow: var(--shadow-pop);
}
/* La mise en page flex (corps défilant, pied fixe) doit rester conditionnée à
   l'état ouvert. Un `display` posé sur `dialog` tout court écrase le
   `display: none` que le navigateur applique à une boîte fermée — les styles
   d'auteur priment sur ceux du navigateur — et la boîte ne se ferme plus jamais. */
dialog[open] { display: flex; flex-direction: column; }
.dialog-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-right: 4px; }
dialog::backdrop { background: rgba(8, 18, 32, .55); backdrop-filter: blur(2px); }
dialog h2 { font-size: 16px; margin-bottom: 4px; }
.settings-block { margin-top: 18px; }
.settings-block h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.settings-block > p { margin: 4px 0 10px; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.setting-row:last-child { border-bottom: 0; }
.setting-row input {
  font: inherit; width: 96px; text-align: right; padding: 4px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.setting-row input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
/* ---------- frais de structure : ligne éditable ---------- */
.month-select {
  font: inherit; font-size: 11px; padding: 2px 6px; border-radius: 6px; margin-left: 6px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
#fc-note:not(:empty) {
  background: var(--warn-soft); color: var(--warn); padding: 7px 10px;
  border-radius: var(--radius-sm); margin: 0 0 10px;
}
.drag-handle {
  cursor: grab; color: var(--text-3); font-size: 13px; line-height: 1;
  padding: 2px 4px; border-radius: 5px; flex: none; user-select: none;
}
.drag-handle:hover { background: var(--accent-soft); color: var(--accent); }
.drag-handle:active { cursor: grabbing; }
.setting-row.dragging { opacity: .5; background: var(--accent-soft); border-radius: var(--radius-sm); }
.setting-row > label { flex: 1 1 auto; min-width: 0; }

.setting-row .fc-fields { display: flex; align-items: center; gap: 6px; flex: none; }
.setting-row select {
  font: inherit; font-size: 12px; padding: 4px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); cursor: pointer;
}
.setting-row .eq { font-size: 11px; color: var(--text-3); min-width: 62px; text-align: right; }
.icon-btn {
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 3px 7px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--text-3);
}
.icon-btn:hover { background: var(--neg-soft); color: var(--neg); border-color: var(--neg-soft); }
.setting-row.removed { opacity: .45; }
.setting-row.removed label { text-decoration: line-through; }
.setting-row.removed input, .setting-row.removed select { visibility: hidden; }
.add-row { display: flex; gap: 6px; align-items: center; margin-top: 12px; }
.add-row input[type="text"] { flex: 1 1 auto; min-width: 0; }
.add-row input, .add-row select {
  font: inherit; font-size: 13px; padding: 5px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
}
.add-row input[type="number"] { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }

.dialog-actions {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); flex: none;
}
.dialog-actions #settings-msg { margin-right: auto; }


/* ==========================================================================
   Colonnes redimensionnables
   Le tableau passe en `table-layout: fixed` une fois les largeurs mesurées :
   sans cela, une largeur posée sur une colonne n'est qu'une indication que le
   navigateur peut ignorer. Les largeurs sont mémorisées dans le navigateur.
   ========================================================================== */
table.resizable { table-layout: fixed; }
table.resizable th, table.resizable td {
  overflow: hidden; text-overflow: ellipsis;
}
th { position: relative; }
.col-resizer {
  position: absolute; top: 0; right: -5px; width: 11px; height: 100%;
  cursor: col-resize; touch-action: none; z-index: 3;
}
.col-resizer::after {
  content: ''; position: absolute; top: 20%; left: 5px; width: 1px; height: 60%;
  background: var(--border-strong); opacity: 0;
}
th:hover .col-resizer::after, .col-resizer.on::after { opacity: 1; background: var(--accent); width: 2px; }
.table-wrap.resizing { cursor: col-resize; user-select: none; }

/* Déplacement des colonnes.
   La pastille reste discrète tant qu'on ne survole pas l'en-tête : elle occupe
   sa place dans le flux (les largeurs sont mesurées avec elle) mais ne doit pas
   entrer en concurrence avec le libellé de la colonne. */
.resizable th { cursor: grab; }
.resizable th:active { cursor: grabbing; }
.col-move {
  display: inline-block; width: 11px; margin-right: 4px; vertical-align: baseline;
  color: var(--text-3, var(--text-2)); opacity: 0; transition: opacity .12s;
  cursor: grab; user-select: none;
}
th:hover .col-move { opacity: .65; }
.resizable th.dragging {
  opacity: .55; background: var(--accent-soft, rgba(109, 213, 237, .12));
  outline: 1px dashed var(--accent); outline-offset: -1px;
}
.resizable th.dragging .col-move { opacity: 1; color: var(--accent); }
/* Le glissé de colonne ne doit pas déclencher la sélection de texte de l'en-tête. */
.resizable thead { user-select: none; }

.table-tools {
  display: flex; gap: 6px; align-items: center;
}
.table-tools button {
  font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
}
.table-tools button:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   Mobile : densité et anti-chevauchement
   ========================================================================== */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .brand { flex: 1 1 100%; }
  .brand h1 { font-size: 14px; }
  .topbar-actions { flex: 1 1 100%; }
  .topbar-actions .btn, .topbar-actions .menu { flex: 1 1 0; }
  .topbar .btn { text-align: center; padding: 7px 8px; }
  .menu-panel { width: min(300px, calc(100vw - 28px)); }

  .controls { padding: 9px 14px; gap: 8px 12px; }
  main { padding: 14px 12px 60px; }
  .kpis { gap: 8px; }
  .kpi { padding: 10px 11px; }
  .kpi .value { font-size: 19px; }

  /* Le tableau : on resserre tout, et le nom de boutique se tronque plutôt
     que de manger l'écran. Voir mieux vaut que lire en entier. */
  th, td { padding: 7px 8px; font-size: 12px; }
  th { font-size: 9.5px; }
  .share { font-size: 10px; }
  .tag { font-size: 9px; padding: 1px 4px; }
  .mode-select, .abo-input, .abo-cur { font-size: 10px; }
  .abo-input { width: 52px; }

  .section-head { flex-wrap: wrap; }
  dialog { padding: 16px; }
  .setting-row { flex-wrap: wrap; }
  .add-row { flex-wrap: wrap; }
  .add-row input[type="text"] { flex: 1 1 100%; }
}

/* Réglage du % fournisseur indicatif, dans la colonne Fournisseur elle-même :
   il commande le chiffre affiché juste au-dessus, il doit donc se lire au même
   endroit. Il n'apparaît qu'en mode indicatif, seul cas où il sert. Même
   habillage que le champ Abos, qui est le motif déjà établi pour une saisie
   posée dans une cellule du tableau. */
.pct-edit {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 5px;
  font-size: 11px; color: var(--text-2);
}
.pct-input {
  font: inherit; font-size: 11px; width: 46px; text-align: right; padding: 1px 4px;
  border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); font-variant-numeric: tabular-nums;
}
.pct-input:focus { outline: none; border-color: var(--accent); }
.pct-input::placeholder { color: var(--text-3); font-style: italic; }

/* Équivalent tous comptes sur la ligne TOTAL : c'est le chiffre que la régie
   affiche dans son compte parent. Discret — il sert au rapprochement, pas au
   pilotage — mais lisible, sinon il ne servirait à rien. */
.natif.tout { font-style: italic; opacity: .8; }

/* ---------- lisibilité sans redimensionner ----------
   Le tableau était en `white-space: nowrap` de bout en bout, avec
   `text-overflow: ellipsis` : dès qu'une colonne était un peu étroite, la
   sous-ligne était coupée en silence. Robin ne voyait donc jamais l'équivalent
   tous comptes ni les montants natifs sans élargir la colonne à la main.

   On autorise le retour à la ligne là où il ne coûte rien — en-têtes,
   sous-lignes, nom de boutique — et on le refuse là où il tromperait :
   un montant ne doit JAMAIS se couper entre son nombre et son symbole. */
th {
  white-space: normal;
  line-height: 1.25;
  vertical-align: bottom;
}
.share {
  white-space: normal;
  line-height: 1.35;
  /* Le séparateur « · » est un point d'accroche naturel pour la coupure. */
  word-break: normal;
  overflow-wrap: anywhere;
}
/* Chaque montant natif reste d'un seul tenant : « 5 041 $ » ne se coupe pas. */
.natif { white-space: nowrap; display: inline-block; }
/* Le nom de boutique peut tenir sur deux lignes plutôt que d'être tronqué. */
tbody td:first-child { white-space: normal; line-height: 1.3; }
/* `overflow: hidden` est CONSERVÉ : avec le retour à la ligne, le contenu tient
   désormais en hauteur et n'est plus rogné, tandis que le garde-fou continue
   d'empêcher un montant anormalement long de déborder sur la colonne voisine.
   Le passer à `visible` ferait se chevaucher les colonnes dès qu'on en rétrécit
   une — l'inverse de ce qu'on cherche. */

/* Bascule globale du mode fournisseur, dans l'en-tête du tableau. Segmenté
   plutôt que deux boutons séparés : les deux choix sont exclusifs, et aucun
   des deux allumé signale un panachage entre boutiques — une information
   utile avant un export, qu'on perdrait avec un simple bouton d'action. */
.mode-global { display: inline-flex; }
.mode-global button { border-radius: 0; margin-left: -1px; }
.mode-global button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.mode-global button:last-child { border-radius: 0 999px 999px 0; }
.mode-global button.on {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 600; z-index: 1;
}

/* Ligne « hors Orders » quand elle n'est PAS comptée dans le montant affiché
   (mode indicatif) : lisible mais visiblement à part du chiffre retenu. */
.share.muet { opacity: .6; font-style: italic; }

/* ==========================================================================
   Graphiques interactifs — survol façon régie publicitaire
   Le SVG est tracé en coordonnées 0→720 et s'étire à la largeur disponible :
   la couche de survol se superpose exactement, et les positions sont
   converties au moment du survol, jamais figées en pixels.
   ========================================================================== */
.chart-i { position: relative; }
.chart-i svg { display: block; width: 100%; height: auto; }
.hover-layer { position: absolute; inset: 0; }
.chart-tip {
  position: absolute; top: 4px; z-index: 4; pointer-events: none;
  min-width: 148px; max-width: 260px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
  padding: 8px 10px; font-size: 11px; color: var(--text);
}
.chart-tip strong { display: block; font-size: 11.5px; margin-bottom: 5px; text-transform: capitalize; }
.tip-row { display: flex; align-items: center; gap: 6px; line-height: 1.7; white-space: nowrap; }
.tip-row i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.tip-row span { color: var(--text-2); }
.tip-row b { margin-left: auto; font-variant-numeric: tabular-nums; }
.tip-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }

/* ==========================================================================
   Fiche boutique
   ========================================================================== */
.lien-boutique { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--border-strong); }
.lien-boutique:hover { color: var(--accent); border-bottom-color: var(--accent); }

.fiche-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.fiche-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.2px; }
.fiche-head .retour { text-decoration: none; white-space: nowrap; }
.fiche-kpis { margin-bottom: 22px; }

.diag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 860px) { .diag { grid-template-columns: 1fr; } }
.diag-item {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px; box-shadow: var(--shadow);
}
.diag-item .tag { flex: 0 0 auto; margin-top: 1px; }
.diag-item strong { display: block; font-size: 12.5px; margin-bottom: 2px; }
.diag-item p { font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.diag-item.alerte { border-left: 3px solid var(--neg); }
.diag-item.attention { border-left: 3px solid var(--warn); }
.diag-item.info { border-left: 3px solid var(--accent); }
.diag-item.bon { border-left: 3px solid var(--pos); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
tr.tot td { border-top: 1px solid var(--border-strong); }

/* Camembert (anneau) — répartition budgétaire, peu de parts, lecture immédiate. */
.donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut svg { width: 170px; height: 170px; flex: 0 0 170px; }
.donut-legend { flex: 1 1 200px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; }
.donut-legend i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.donut-legend span { color: var(--text-2); }
.donut-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.donut-legend em { font-style: normal; color: var(--text-3); width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

/* Camembert à gauche, tableau à droite — et l'un sous l'autre quand c'est étroit. */
.split { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 12px; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
.card.pad { padding: 16px; }

.fiche-head .fiche-mode { margin-left: auto; font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.warn-txt { color: var(--warn); }

/* Barre de période de la fiche : une seule base de temps pour toute la page. */
.fiche-barre {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.bloc-titre { font-size: 12px; color: var(--text-2); margin-bottom: 7px; font-weight: 600; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .split-2 { grid-template-columns: 1fr; } }

/* Tableaux groupés : une famille de colonnes se lit d'un coup d'œil, sans
   avoir à relire l'en-tête pour savoir où l'une finit et l'autre commence. */
table.chrono th.grp, table.chrono td.grp { border-left: 1px solid var(--border-strong); }
table.chrono th.grp:first-child, table.chrono td.grp:first-child { border-left: 0; }
tr.grp-head th {
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; padding-bottom: 2px; border-bottom: 0;
  text-align: left;
}
table.chrono tfoot td { border-top: 2px solid var(--border-strong); font-weight: 600; }
.share.hot { color: var(--neg); font-weight: 600; }

/* Légende cliquable : une courbe se masque d'un clic, et reste listée en grisé
   pour qu'on sache qu'elle existe encore. */
.legend .leg {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 2px 6px; border-radius: 20px;
  font: inherit; font-size: 11px; color: var(--text-2); cursor: pointer;
  transition: background .12s var(--ease), opacity .12s var(--ease);
}
.legend .leg:hover { background: var(--surface-2); color: var(--text); }
.legend .leg.off { opacity: .4; }
.legend .leg.off i { background: var(--text-3) !important; }
.legend .leg .axe {
  font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--border); border-radius: 3px; padding: 0 3px;
}

/* Carte PayPal du bloc trésorerie : même rangée, mais visuellement à part —
   ce n'est pas un « reste à recevoir », c'est de l'argent déjà acquis. */
.kpi.paypal::before { background: var(--pp-trait); }
.kpi.paypal { border-style: dashed; }

/* Ligne TOTAL du bloc trésorerie, même traitement que les autres pieds de tableau. */
.card.table-wrap tfoot td { border-top: 2px solid var(--border-strong); }

/* ---------------------------------------------------------------- marchés repliés
 * Les marchés sont des lignes du MÊME tableau que les boutiques : mêmes
 * colonnes, mêmes largeurs, chiffres alignés verticalement. Elles se
 * distinguent par un fond légèrement creusé et un retrait sur la première
 * colonne, pas par une mise en page différente. */
.chevron {
  /* Zone cliquable volontairement plus large que le glyphe : à 11 px, la cible
     se manque une fois sur deux — constaté en testant. */
  background: none; border: 0; cursor: pointer;
  padding: 6px 8px 6px 2px; margin: -6px 0 -6px -2px;
  color: var(--text-2); font-size: 13px; line-height: 1;
  transition: transform .15s ease, color .15s ease;
  display: inline-block; transform-origin: 50% 50%;
}
.chevron:hover { color: var(--text); }
.chevron.ouvert { transform: rotate(90deg); color: var(--text); }

.marches-row.repliee { display: none; }
.marches-row > td { background: var(--surface-2); font-size: 12px; }
tbody tr.marches-row:hover > td { background: var(--surface-2); }
.marches-row .marche-nom { padding-left: 30px; font-weight: 600; }
.marches-row .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: baseline;
}
.marches-row.marches-note > td {
  padding-top: 2px; padding-bottom: 10px; padding-left: 30px;
  font-size: 11px; color: var(--text-2);
}
.marches-vide { padding-left: 30px !important; color: var(--text-2); font-size: 12px; }