/* resultat.css : feuille du moniteur de contrôle, design « P&L · app » (app « Moniteur », teinte indigo).
   Le moniteur suit le réglage du système (clair / sombre), comme le P&L. Régénérer le bloc design system : python3 .jetons.py */
/* @@DS-DEBUT : bloc généré par .jetons.py (jetons + classes de texte + bundle.css tel quel). Ne rien modifier entre ces repères. */
/* Jetons « P&L · app » v1 : générés par .jetons.py depuis tokens.json, ne pas modifier à la main. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --ground: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --surface-3: #e5e5ea;
  --chrome: #f9f9f9f0;
  --separator: #c6c6c8;
  --label: #000000;
  --label-2: #6d6d72;
  --label-3: #8e8e93;
  --tint-pnl: #2d7a5a;
  --on-tint-pnl: #ffffff;
  --tint-pnl-soft: #e8f4ed;
  --tint-moniteur: #4f55d2;
  --on-tint-moniteur: #ffffff;
  --tint-moniteur-soft: #ebecfb;
  --gain: var(--tint-pnl);
  --gain-soft: var(--tint-pnl-soft);
  --loss: #c23327;
  --loss-soft: #fbe9e7;
  --caution: #9e5600;
  --caution-soft: #fbefdd;
  --neutral: var(--label-2);
  --neutral-soft: var(--surface-2);
  --scrim: #00000040;
  --pay-paypal: #0070ba;
  --pay-carte: var(--tint-pnl);
  --pay-klarna: #e8749a;
  --glow-pnl: #2d7a5a24;
  --glow-moniteur: #4f55d224;
  --bar-pnl: #d6e1e1;
  --bar-moniteur: #dbdcf1;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.05), 0 0 0 0.5px rgba(0,0,0,0.04);
  --shadow-thumb: 0 3px 8px rgba(0,0,0,0.12), 0 3px 1px rgba(0,0,0,0.04);
  --shadow-float: 0 10px 30px -10px rgba(0,0,0,0.25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #15202b;
    --surface: #1e2732;
    --surface-2: #273340;
    --surface-3: #38444d;
    --chrome: #15202be6;
    --separator: #38444d;
    --label: #ffffff;
    --label-2: #a7b4c0;
    --label-3: #6e7d8c;
    --tint-pnl: #5fc28f;
    --on-tint-pnl: #07241b;
    --tint-pnl-soft: #1b3a2d;
    --tint-moniteur: #8e93ff;
    --on-tint-moniteur: #10123a;
    --tint-moniteur-soft: #262b55;
    --gain: var(--tint-pnl);
    --gain-soft: var(--tint-pnl-soft);
    --loss: #ff7a6e;
    --loss-soft: #3d2529;
    --caution: #ffb454;
    --caution-soft: #3b2e17;
    --neutral: var(--label-2);
    --neutral-soft: var(--surface-2);
    --scrim: #00000099;
    --pay-paypal: #4fa3e3;
    --pay-carte: var(--tint-pnl);
    --pay-klarna: #ffb3c7;
    --glow-pnl: #5fc28f2e;
    --glow-moniteur: #8e93ff2e;
    --bar-pnl: #223d3d;
    --bar-moniteur: #2b3551;
    --shadow-card: 0 0 0 0.5px rgba(255,255,255,0.06);
    --shadow-thumb: 0 3px 8px rgba(0,0,0,0.4);
    --shadow-float: 0 10px 30px -10px rgba(0,0,0,0.7);
  }
}
:root[data-theme="dark"], .theme-dark {
  color-scheme: dark;
  --ground: #15202b;
  --surface: #1e2732;
  --surface-2: #273340;
  --surface-3: #38444d;
  --chrome: #15202be6;
  --separator: #38444d;
  --label: #ffffff;
  --label-2: #a7b4c0;
  --label-3: #6e7d8c;
  --tint-pnl: #5fc28f;
  --on-tint-pnl: #07241b;
  --tint-pnl-soft: #1b3a2d;
  --tint-moniteur: #8e93ff;
  --on-tint-moniteur: #10123a;
  --tint-moniteur-soft: #262b55;
  --gain: var(--tint-pnl);
  --gain-soft: var(--tint-pnl-soft);
  --loss: #ff7a6e;
  --loss-soft: #3d2529;
  --caution: #ffb454;
  --caution-soft: #3b2e17;
  --neutral: var(--label-2);
  --neutral-soft: var(--surface-2);
  --scrim: #00000099;
  --pay-paypal: #4fa3e3;
  --pay-carte: var(--tint-pnl);
  --pay-klarna: #ffb3c7;
  --glow-pnl: #5fc28f2e;
  --glow-moniteur: #8e93ff2e;
  --bar-pnl: #223d3d;
  --bar-moniteur: #2b3551;
  --shadow-card: 0 0 0 0.5px rgba(255,255,255,0.06);
  --shadow-thumb: 0 3px 8px rgba(0,0,0,0.4);
  --shadow-float: 0 10px 30px -10px rgba(0,0,0,0.7);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-11: 44px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.large-title { font-family: var(--font-sans); font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -0.4px; }
.title-1 { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.3px; }
.title-2 { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.2px; }
.title-3 { font-family: var(--font-sans); font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.1px; }
.headline { font-family: var(--font-sans); font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.2px; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 22px; font-weight: 400; letter-spacing: -0.2px; }
.callout { font-family: var(--font-sans); font-size: 16px; line-height: 21px; font-weight: 400; letter-spacing: -0.1px; }
.subheadline { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 400; letter-spacing: -0.1px; }
.footnote { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: 0px; }
.caption-1 { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0px; }
.caption-2 { font-family: var(--font-sans); font-size: 11px; line-height: 13px; font-weight: 500; letter-spacing: 0.1px; }
.figure-hero { font-family: var(--font-sans); font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: -0.6px; }
.figure-lg { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.3px; }
.figure { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.2px; }
.figure-sm { font-family: var(--font-sans); font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: 0px; }

/* P&L · app — bundle.css. Charge tokens.css avant. Toute couleur, tout espace, tout rayon vient d'un jeton. */

/* ---------- Racine d'app ---------- */
.app{--tint:var(--tint-pnl);--on-tint:var(--on-tint-pnl);--tint-soft:var(--tint-pnl-soft);--glow:var(--glow-pnl);position:relative;isolation:isolate;box-sizing:border-box;min-height:100%;margin:0;background:var(--ground);color:var(--label);font-family:var(--font-sans);font-size:17px;line-height:22px;letter-spacing:-0.2px;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.app *,.app *::before,.app *::after{box-sizing:border-box}
.app-pnl{--tint:var(--tint-pnl);--on-tint:var(--on-tint-pnl);--tint-soft:var(--tint-pnl-soft)}
.app-moniteur{--tint:var(--tint-moniteur);--on-tint:var(--on-tint-moniteur);--tint-soft:var(--tint-moniteur-soft);--glow:var(--glow-moniteur)}
.app::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:520px;pointer-events:none;background:linear-gradient(180deg,var(--glow) 0,transparent 100%)}
.app{padding-top:env(safe-area-inset-top);touch-action:manipulation}
.app.no-glow::before{display:none}
.app :where(a){color:inherit;text-decoration:none}
.app :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
.app :where(h1,h2,h3,p,dl,dd,dt,ul){margin:0;padding:0}
.app :where(ul){list-style:none}
.app :focus-visible{outline:2px solid var(--tint);outline-offset:2px}
.app [hidden]{display:none!important}
.app svg{display:block}
.num{font-variant-numeric:tabular-nums}
.t-gain{color:var(--gain)}.t-loss{color:var(--loss)}.t-caution{color:var(--caution)}.t-2{color:var(--label-2)}.t-3{color:var(--label-3)}.t-tint{color:var(--tint)}
.rounded{font-family:var(--font-sans)}
.mono{font-family:var(--font-mono)}

/* ---------- Écran ---------- */
.screen{max-width:720px;margin:0 auto;padding:0 var(--space-4) var(--space-8)}
.screen-wide{max-width:1120px}
.is-phone .screen{max-width:none;padding-bottom:var(--space-4)}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start}
.is-phone .cols-2{grid-template-columns:1fr}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}

/* ---------- Barre d'état et indicateur (maquette téléphone) ---------- */
.statusbar{height:54px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 var(--space-6) 10px;font-size:15px;line-height:20px;font-weight:600;letter-spacing:-0.1px;font-variant-numeric:tabular-nums}
.statusbar-glyphs{display:flex;align-items:center;gap:6px}
.statusbar-glyphs svg{height:12px;width:auto}
.home-indicator{height:34px;display:grid;place-items:center}
.home-indicator::after{content:"";width:134px;height:5px;border-radius:3px;background:var(--label)}

/* ---------- Barre de titre ---------- */
.navbar{position:relative;z-index:5;margin:0 calc(-1 * var(--space-4));padding:0 var(--space-4);background:transparent}
.navbar.is-collapsed{position:sticky;top:0;background:var(--chrome);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 0.5px 0 var(--separator)}
.navbar-compact{min-height:var(--space-11);display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.navbar-compact .nav-title{flex:1;min-width:0;text-align:center;font-size:17px;line-height:22px;font-weight:600;letter-spacing:-0.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navbar-large{padding:2px 0 var(--space-2)}
.navbar-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--space-11)}
.navbar-large h1{font-size:34px;line-height:41px;font-weight:700;letter-spacing:-0.4px}
.nav-app{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--tint)}
.nav-app .app-icon{width:18px;height:18px;border-radius:5px}
.nav-app .app-icon svg{width:11px;height:11px}
.nav-side{min-width:64px;display:flex;align-items:center;gap:var(--space-2)}
.nav-side.right{justify-content:flex-end}
.nav-action{display:inline-flex;align-items:center;gap:4px;min-height:var(--space-11);padding:0 2px;border-radius:var(--radius-sm);color:var(--tint);font-size:17px;line-height:22px;letter-spacing:-0.2px;white-space:nowrap}
.nav-action.bold{font-weight:600}
.nav-action:active{opacity:.4}
.nav-action svg{width:22px;height:22px}
.nav-back{display:inline-flex;align-items:center;gap:2px;min-height:var(--space-11);margin-left:-6px;color:var(--tint);font-size:17px;line-height:22px;letter-spacing:-0.2px}
.nav-back svg{width:12px;height:20px}
.nav-back:active{opacity:.4}

/* ---------- Icône d'app ---------- */
.app-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--tint);color:var(--on-tint)}
.app-icon svg{width:24px;height:24px}
.app-icon.sm{width:30px;height:30px;border-radius:7px}
.app-icon.sm svg{width:17px;height:17px}
.app-icon.lg{width:72px;height:72px;border-radius:16px}
.app-icon.lg svg{width:40px;height:40px}
.to-pnl{--tint:var(--tint-pnl);--on-tint:var(--on-tint-pnl);--tint-soft:var(--tint-pnl-soft)}
.to-moniteur{--tint:var(--tint-moniteur);--on-tint:var(--on-tint-moniteur);--tint-soft:var(--tint-moniteur-soft)}

/* ---------- Contrôle segmenté ---------- */
.seg{display:flex;padding:2px;border-radius:var(--radius-sm);background:var(--surface-3)}
[data-theme="dark"] .seg{background:var(--surface-2)}
.seg-item{flex:1;min-width:0;min-height:28px;text-align:center;border-radius:7px;font-size:13px;line-height:18px;font-weight:500;letter-spacing:0;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .16s cubic-bezier(.25,1,.5,1),box-shadow .16s}
.seg-item[aria-pressed="true"]{background:var(--surface);box-shadow:var(--shadow-thumb);font-weight:600}
[data-theme="dark"] .seg-item[aria-pressed="true"]{background:var(--surface-3)}
.seg-item:active:not([aria-pressed="true"]){opacity:.5}
.seg.is-large .seg-item{min-height:36px;font-size:15px;line-height:20px}
.seg.is-compact{padding:2px}
.seg.is-compact .seg-item{min-height:24px;font-size:12px;line-height:16px;letter-spacing:0;padding:0 4px}
.seg-caption{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:6px;padding:0 2px;font-size:12px;line-height:16px;color:var(--label-2);font-variant-numeric:tabular-nums}
.seg-caption .seg-caption-action{color:var(--tint)}

/* ---------- Carte ---------- */
.card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-4) var(--space-4)}
.card-title{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-0.1px}
.card-foot{margin-top:var(--space-3);font-size:13px;line-height:18px;color:var(--label-2)}

/* Héros */
.hero-label{font-size:13px;line-height:18px;color:var(--label-2)}
.hero-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;margin-top:2px}
.hero-value{font-family:var(--font-sans);font-size:44px;line-height:50px;font-weight:700;letter-spacing:-0.6px;font-variant-numeric:tabular-nums}
.hero-meta{font-size:15px;line-height:20px;color:var(--label-2)}

/* Grille de chiffres */
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-4)}
.stat-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.is-phone .stat-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 12px;min-width:0}
.stat-label{font-size:13px;line-height:18px;color:var(--label-2);display:flex;align-items:center;gap:4px}
.stat-value{font-family:var(--font-sans);font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Fraîcheur */
.freshness{display:flex;align-items:center;gap:6px;margin-top:var(--space-3);font-size:13px;line-height:18px;color:var(--label-2)}
.freshness .dot-state{width:6px;height:6px}

/* ---------- Sections et groupes ---------- */
.section{margin-top:var(--space-6)}
.section:first-child{margin-top:0}
.section-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-2);padding:0 var(--space-4);font-size:13px;line-height:18px;letter-spacing:.4px;text-transform:uppercase;color:var(--label-2)}
.section-header .section-action{text-transform:none;letter-spacing:-0.1px;color:var(--tint);font-size:15px;line-height:20px}
.section-foot{margin:var(--space-2) 0 0;padding:0 var(--space-4);font-size:13px;line-height:18px;color:var(--label-2)}
.group{background:var(--surface);border-radius:var(--radius-md);overflow:hidden}
.group+.group{margin-top:var(--space-4)}

/* Rangée */
.row{position:relative;display:flex;align-items:center;gap:var(--space-3);min-height:var(--space-11);padding:10px 0 10px var(--space-4);width:100%;color:inherit}
.row+.row::before,.disclosure+.row::before,.row+.disclosure>.row::before,.disclosure+.disclosure>.row::before{content:"";position:absolute;left:var(--space-4);right:0;top:0;height:1px;background:var(--separator);transform:scaleY(.5);transform-origin:top}
.row.has-leading+.row::before,.row.has-leading+.disclosure>.row::before{left:62px}
a.row:active,button.row:active,summary.row:active{background:var(--surface-2)}
.row-leading{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:7px;background:var(--tint-soft);color:var(--tint)}
.row-leading svg{width:18px;height:18px}
.row-leading.is-neutral{background:var(--neutral-soft);color:var(--label-2)}
.row-main{flex:1;min-width:0}
.row-title{font-size:17px;line-height:22px;letter-spacing:-0.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-title.bold{font-weight:600}
.row-title.wrap{white-space:normal}
.row-subtitle{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:1px;font-size:13px;line-height:18px;color:var(--label-2)}
.row-trailing{display:flex;align-items:center;gap:var(--space-2);padding-right:var(--space-4);flex:none;text-align:right}
.row-value{font-family:var(--font-sans);font-size:18px;line-height:24px;font-weight:600;letter-spacing:-0.2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.row-value.plain{font-weight:400;color:var(--label-2)}
.row-sub{font-size:13px;line-height:18px;color:var(--label-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.row-stack{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.row-chevron{width:8px;height:14px;flex:none;color:var(--label-3)}
.row.is-dim .row-title,.row.is-dim .row-value{color:var(--label-2)}
.row.is-action .row-title{color:var(--tint)}
.row.is-field{padding-right:var(--space-4)}

/* Rangée repliable (rang réductible) */
.disclosure{display:block}
.disclosure>summary{list-style:none;cursor:pointer}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary .row-chevron{transition:transform .2s cubic-bezier(.25,1,.5,1)}
.disclosure[open]>summary .row-chevron{transform:rotate(90deg)}
.disclosure-body{background:var(--surface)}
.disclosure-body .row{padding-left:var(--space-8)}
.disclosure-body .row::before{content:"";position:absolute;left:var(--space-8);right:0;top:0;height:1px;background:var(--separator);transform:scaleY(.5);transform-origin:top}
.disclosure-body .row .row-title{font-size:15px;line-height:20px}
.disclosure-body .row .row-value{font-size:16px;line-height:20px}

/* ---------- États ---------- */
.dot-state{width:8px;height:8px;flex:none;border-radius:50%;background:var(--neutral)}
.dot-state.gain{background:var(--gain)}.dot-state.loss{background:var(--loss)}.dot-state.caution{background:var(--caution)}.dot-state.tint{background:var(--tint)}
.dot-state.ring{background:transparent;box-shadow:inset 0 0 0 2px var(--caution)}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--radius-pill);background:var(--neutral-soft);color:var(--neutral);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0;white-space:nowrap}
.pill .dot-state{width:6px;height:6px;background:currentColor}
.pill-gain{background:var(--gain-soft);color:var(--gain)}
.pill-loss{background:var(--loss-soft);color:var(--loss)}
.pill-caution{background:var(--caution-soft);color:var(--caution)}
.pill-tint{background:var(--tint-soft);color:var(--tint)}
.pill-solid{background:var(--tint);color:var(--on-tint)}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--label);font-size:13px;line-height:18px;font-weight:500;white-space:nowrap}
.badge.is-gain{background:var(--gain-soft);color:var(--gain)}
.badge.is-loss{background:var(--loss-soft);color:var(--loss)}
.badge.is-caution{background:var(--caution-soft);color:var(--caution)}
.badge.is-neutral{color:var(--label-2)}
.badges{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* Anneau de progression (objectifs tenus) */
.ring{width:28px;height:28px;flex:none;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:var(--surface-3);stroke-width:3}
.ring .fill{fill:none;stroke:var(--gain);stroke-width:3;stroke-linecap:round}
.ring.is-loss .fill{stroke:var(--loss)}
.ring.is-caution .fill{stroke:var(--caution)}
.ring.lg{width:44px;height:44px}
.cell .ring{width:24px;height:24px}
.dot-state.ring{width:8px;height:8px;transform:none}

/* ---------- Carte vers l'autre app ---------- */
.applink{display:block;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-4);transition:transform .12s ease-out}
a.applink:active{transform:scale(.985)}
.applink-head{display:flex;align-items:center;gap:var(--space-3)}
.applink-title{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-0.2px}
.applink-sub{font-size:13px;line-height:18px;color:var(--label-2);margin-top:1px}
.applink-cta{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:var(--tint);font-size:15px;line-height:20px;font-weight:600;white-space:nowrap}
.applink-cta svg{width:8px;height:14px}
.applink .cells{margin-top:var(--space-3)}

/* Cases (Résultat, Créatives) */
.cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.cells.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.is-phone .cells.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.cell{display:block;min-width:0;min-height:72px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-2);color:inherit}
.cell-label{font-size:13px;line-height:18px;color:var(--label-2)}
.cell-value{display:flex;align-items:center;gap:6px;margin-top:2px;white-space:nowrap;font-family:var(--font-sans);font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;font-variant-numeric:tabular-nums}
.cell-sub{margin-top:2px;font-size:12px;line-height:16px;color:var(--label-2)}
.cell.is-gain{background:var(--gain-soft)}.cell.is-loss{background:var(--loss-soft)}.cell.is-caution{background:var(--caution-soft)}
.cell.is-gain .cell-value{color:var(--gain)}.cell.is-loss .cell-value{color:var(--loss)}.cell.is-caution .cell-value{color:var(--caution)}
.cell.is-neutral .cell-value{color:var(--label-2)}
a.cell:active{opacity:.6}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--space-11);padding:0 var(--space-5);border-radius:var(--radius-md);font-size:17px;line-height:22px;font-weight:600;letter-spacing:-0.2px;white-space:nowrap;transition:transform .12s ease-out,opacity .12s ease-out}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px}
.btn-filled{background:var(--tint);color:var(--on-tint)}
.btn-filled.btn-block{min-height:var(--space-12)}
.btn-tinted{background:var(--tint-soft);color:var(--tint)}
.btn-plain{color:var(--tint);padding:0 var(--space-2)}
.btn-plain:active{opacity:.4;transform:none}
.btn-loss{background:var(--loss-soft);color:var(--loss)}
.btn-block{display:flex;width:100%}
.btn-sm{min-height:32px;padding:0 12px;border-radius:var(--radius-sm);font-size:15px;line-height:20px}
.btn[disabled]{opacity:.4;pointer-events:none}
.icon-btn{width:var(--space-11);height:var(--space-11);display:grid;place-items:center;border-radius:50%;color:var(--tint)}
.icon-btn svg{width:22px;height:22px}
.icon-btn:active{background:var(--surface-2)}
.icon-btn.is-filled{background:var(--surface-2);color:var(--label-2);width:30px;height:30px}
.icon-btn.is-filled svg{width:16px;height:16px}

/* ---------- Interrupteur ---------- */
.toggle{position:relative;width:51px;height:31px;flex:none;border-radius:var(--radius-pill);background:var(--surface-3);transition:background .2s cubic-bezier(.25,1,.5,1)}
.toggle[aria-checked="true"]{background:var(--tint)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:var(--shadow-thumb);transition:transform .25s cubic-bezier(.25,1,.5,1)}
.toggle[aria-checked="true"]::after{transform:translateX(20px)}

/* ---------- Champs ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:13px;line-height:18px;color:var(--label-2)}
.field-input{width:100%;height:var(--space-12);padding:0 14px;border:1px solid var(--separator);border-radius:var(--radius-md);background:var(--surface);color:var(--label);font:inherit;font-size:17px;letter-spacing:-0.2px;-webkit-appearance:none;appearance:none}
.field-input::placeholder{color:var(--label-3)}
.field-input:focus{outline:none;border-color:var(--tint);box-shadow:0 0 0 3px var(--tint-soft)}
.field-note{font-size:13px;line-height:18px;color:var(--label-2)}
.field-note.is-loss{color:var(--loss)}
.row .field-input{height:auto;padding:0;border:0;border-radius:0;background:transparent;text-align:right;box-shadow:none}
.row .field-input:focus{box-shadow:none}
.field-unit{color:var(--label-2)}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:12px 0;border-radius:2px;background:linear-gradient(var(--tint),var(--tint)) 0/var(--pct,50%) 100% no-repeat var(--surface-3)}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:var(--shadow-thumb)}
.slider::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff;box-shadow:var(--shadow-thumb)}

/* ---------- Puces de choix (boutiques, produits) ---------- */
.chips{display:flex;gap:var(--space-2);overflow-x:auto;padding:2px 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--radius-pill);background:var(--surface);color:var(--label);font-size:15px;line-height:20px;font-weight:500;letter-spacing:-0.1px;box-shadow:var(--shadow-card)}
.chip[aria-pressed="true"]{background:var(--label);color:var(--ground);box-shadow:none}
.chip .chip-count{color:inherit;opacity:.6;font-variant-numeric:tabular-nums}
.chip:active{opacity:.6}

/* ---------- Bandeau ---------- */
.banner{display:flex;align-items:flex-start;gap:var(--space-3);padding:12px 14px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card);font-size:15px;line-height:20px;letter-spacing:-0.1px}
.banner svg{width:20px;height:20px;flex:none;color:var(--label-2)}
.banner-title{font-weight:600}
.banner-text{color:var(--label-2)}
.banner-caution .banner-text,.banner-loss .banner-text{color:var(--label)}
.banner-caution{background:var(--caution-soft);box-shadow:none}.banner-caution svg{color:var(--caution)}
.banner-loss{background:var(--loss-soft);box-shadow:none}.banner-loss svg{color:var(--loss)}
.banner-tint{background:var(--tint-soft);box-shadow:none}.banner-tint svg{color:var(--tint)}
.banner-tint .banner-text{color:var(--label)}
.banner .banner-action{margin-left:auto;align-self:center;color:var(--tint);font-weight:600;white-space:nowrap}

/* ---------- Feuille et fenêtre ---------- */
.sheet{background:var(--surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-float);padding:8px var(--space-4) var(--space-6)}
.sheet-grabber{width:36px;height:5px;margin:0 auto 14px;border-radius:var(--radius-pill);background:var(--surface-3)}
.sheet-title{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-0.2px;margin-bottom:var(--space-3)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-float);padding:var(--space-5);max-width:420px;width:100%}
.scrim{background:var(--scrim)}
.overlay{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:flex-end;background:var(--scrim)}
.overlay .sheet{width:100%}
.sheet-section{margin-top:var(--space-4)}
.sheet .group{background:var(--surface-2)}
.sheet .cal-day.in-range{background:var(--tint-soft)}

/* ---------- Infobulle ---------- */
.info-btn{width:22px;height:22px;display:inline-grid;place-items:center;border-radius:50%;color:var(--label-3);vertical-align:middle}
.info-btn svg{width:16px;height:16px}
.popover{max-width:260px;padding:10px 12px;border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-float);color:var(--label);font-size:13px;line-height:18px;letter-spacing:0}
.popover .formula{font-family:var(--font-mono);font-size:12px;color:var(--label-2);margin-top:4px}

/* ---------- Tableau ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-md);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:15px;line-height:20px;letter-spacing:-0.1px}
.table th{padding:8px var(--space-4);font-size:12px;line-height:16px;font-weight:400;letter-spacing:.3px;text-transform:uppercase;text-align:right;color:var(--label-2);white-space:nowrap}
.table th:first-child,.table td:first-child{text-align:left}
.table td{padding:11px var(--space-4);text-align:right;border-top:0.5px solid var(--separator);font-variant-numeric:tabular-nums;white-space:nowrap}
.table td:first-child{font-variant-numeric:normal}
.table tr.is-gain td{background:var(--gain-soft)}
.table tr.is-loss td{background:var(--loss-soft)}
.table tr.is-total td{font-weight:600;border-top-width:1px}
.table tr.is-dim td{color:var(--label-2)}
.table.is-compact td,.table.is-compact th{padding-top:7px;padding-bottom:7px}
.table-hint{padding:6px var(--space-4) 8px;font-size:12px;line-height:16px;color:var(--label-2)}

/* ---------- Graphique ---------- */
.chart{width:100%;height:auto}
.chart .line{fill:none;stroke:var(--tint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .line.is-2{stroke:var(--label-3)}
.chart .area{fill:var(--tint);opacity:.12}
.chart .axis{stroke:var(--separator);stroke-width:1}
.chart .zero{stroke:var(--label-3);stroke-width:1;stroke-dasharray:2 3}
.chart .pt{fill:var(--tint)}
.chart .lbl{fill:var(--label-2);font-family:var(--font-sans);font-size:11px}
.chart-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:var(--space-2);font-size:12px;line-height:16px;color:var(--label-2)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{width:10px;height:2px;border-radius:1px;background:var(--tint)}
.chart-legend i.is-2{background:var(--label-3)}

/* Répartition des paiements */
.split{display:flex;height:8px;border-radius:var(--radius-pill);overflow:hidden;background:var(--surface-2)}
.split span{display:block;height:100%}
.split .paypal{background:var(--pay-paypal)}.split .carte{background:var(--pay-carte)}.split .klarna{background:var(--pay-klarna)}
.split-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:var(--space-2);font-size:13px;line-height:18px;color:var(--label-2)}
.split-legend span{display:inline-flex;align-items:center;gap:6px}
.split-legend i{width:8px;height:8px;border-radius:50%}
.split-legend .paypal{background:var(--pay-paypal)}.split-legend .carte{background:var(--pay-carte)}.split-legend .klarna{background:var(--pay-klarna)}

/* ---------- Calendrier ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0;text-align:center;font-size:15px;line-height:20px}
.cal-head{padding:6px 0;font-size:12px;line-height:16px;text-transform:uppercase;color:var(--label-2)}
.cal-day{height:40px;display:grid;place-items:center;border-radius:50%;font-variant-numeric:tabular-nums}
.cal-day.is-out{color:var(--label-3)}
.cal-day.is-today{color:var(--tint);font-weight:600}
.cal-day.in-range{background:var(--tint-soft);border-radius:0}
.cal-day.is-sel{background:var(--tint);color:var(--on-tint);font-weight:600;border-radius:50%}
.cal-day.in-range.is-start{border-radius:50% 0 0 50%}.cal-day.in-range.is-end{border-radius:0 50% 50% 0}
.cal-month{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2);font-size:17px;line-height:22px;font-weight:600}

/* ---------- Bande des jours (moniteur) ---------- */
.days{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:46px;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-card);font-size:13px;line-height:18px;transition:transform .12s ease-out}
.day .d{font-weight:600;font-variant-numeric:tabular-nums}
.day .m{font-size:11px;line-height:13px;color:var(--label-2)}
.day:active{transform:scale(.94)}
.day[aria-pressed="true"]{background:var(--tint-soft);color:var(--tint);box-shadow:inset 0 0 0 1.5px var(--tint)}
.day[aria-pressed="true"] .m{color:var(--tint)}
.days-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:var(--space-2);font-size:12px;line-height:16px;color:var(--label-2)}
.days-legend span{display:inline-flex;align-items:center;gap:6px}

/* ---------- Objectif (moniteur) ---------- */
.why{margin-top:2px;font-size:13px;line-height:18px;color:var(--label-2)}
.why.is-loss{color:var(--loss)}

/* ---------- Connexion ---------- */
.login{min-height:100%;display:grid;place-items:center;padding:var(--space-6) var(--space-4)}
.login-card{width:100%;max-width:360px;display:flex;flex-direction:column;gap:var(--space-4)}
.login-mark{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:var(--space-2);text-align:center}
.login-mark h1{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-0.3px}
.login-mark p{font-size:15px;line-height:20px;color:var(--label-2)}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){.app *,.app *::before,.app *::after{transition:none!important;animation:none!important}}
/* @@DS-FIN */

/* @@PG : mise en page propre au moniteur (préfixe pg-). Aucune couleur en dur : tout vient des jetons du bloc ci-dessus. */

/* ---------- Page, écran, barres ---------- */
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);overflow-x:hidden}
.app{min-height:100vh;min-height:100dvh;padding-top:env(safe-area-inset-top)}
.app .screen{padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right));padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom))}
.app .navbar{margin-left:calc(-1 * max(var(--space-4),env(safe-area-inset-left)));margin-right:calc(-1 * max(var(--space-4),env(safe-area-inset-right)));padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}
.app code{font-family:var(--font-mono);font-size:.92em}
.app .muted{color:var(--label-2)}
.app .small{font-size:13px;line-height:18px}
.pg-chargement{margin-top:var(--space-6)}
.pg-head{display:block}
.pg-head .pg-period{margin-top:var(--space-2)}
.pg-sub{margin-top:2px}
.pg-age{margin-top:var(--space-2);padding:0 2px}
.pg-age.vieux{color:var(--caution)}
.freshness.pg-age + .freshness.pg-age{margin-top:2px}
.navbar + .section,.navbar + .pg-corps,.navbar + nav{margin-top:var(--space-4)}
.pg-age + .section,.pg-age + .cols-2,.pg-ban + .section{margin-top:var(--space-4)}
.pg-ban + .pg-ban{margin-top:var(--space-2)}
.pg-age + .pg-age + .section{margin-top:var(--space-4)}
.navbar + .section-foot.pg-lead,.navbar + .res-indispo{margin-top:var(--space-4)}
.section-foot.pg-lead{margin:0 0 var(--space-2)}
.section-foot.pg-loss{color:var(--loss)}
.section > .section-foot:first-child{margin-top:0}
.pg-h2s{text-transform:none;letter-spacing:0}
.pg-gap{margin-top:var(--space-4)}
.pg-gap-s{margin-top:var(--space-2)}
.pg-day{margin:var(--space-4) 0 var(--space-2);padding:0 var(--space-4)}
.pg-day:first-child{margin-top:0}
.pg-corps > .section:first-child{margin-top:var(--space-4)}
.pg-corps > .section-foot:first-child{margin-top:var(--space-4)}
.pg-cols{margin-top:var(--space-6)}
/* Cause du débordement à 30 jours : une colonne de grille « 1fr » a pour minimum le contenu le plus large (la bande des 14 jours, 740 px) ;
   avec minmax(0,1fr) la colonne reste à la largeur de l'écran et seule la bande défile. Les enfants d'une grille ne doivent jamais imposer leur largeur. */
.pg-cols > *{min-width:0}
.days{min-width:0;max-width:100%}
.cells.pg-cells-1{grid-template-columns:minmax(0,1fr)}
.cells.pg-cells-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cell-label code{font-size:12px}

/* Barre de période : l'aire de toucher fait 44 px sans changer l'aspect d'un segment de 24 px. */
.seg-item{position:relative}
.seg.is-compact .seg-item::after{content:"";position:absolute;left:-1px;right:-1px;top:-10px;bottom:-10px}
.seg-caption-action{font:inherit;min-height:var(--space-11);margin:calc(-1 * var(--space-3)) 0;padding:0 2px}
/* Le segmenté suit le thème du système sans attribut data-theme (bundle.css ne le fait que pour [data-theme="dark"]). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .seg{background:var(--surface-2)}
  :root:not([data-theme="light"]) .seg-item[aria-pressed="true"]{background:var(--surface-3)}
}

/* ---------- Objectifs, jours, produits ---------- */
.pg-obj{position:relative}
.pg-obj + .pg-obj::before{content:"";position:absolute;left:var(--space-4);right:0;top:0;height:1px;background:var(--separator);transform:scaleY(.5);transform-origin:top}
.pg-obj .row{align-items:flex-start;padding-top:12px}
.pg-obj .ring{margin-top:0}
.pg-why{display:flex;flex-direction:column;gap:6px;padding:0 var(--space-4) var(--space-3) 56px}
.pg-why .why{margin-top:0}
.row-title.wrap{white-space:normal}
.day{font-family:inherit;color:inherit}
.day .dot-state{flex:none}
.days{margin:0 calc(-1 * var(--space-4));padding:2px var(--space-4) 4px}
.days-legend{padding:0 2px}
.row-subtitle .t-loss,.row-subtitle .t-caution,.row-subtitle .t-gain,.row-subtitle .t-tint{font-weight:500}
.pg-crea .row-subtitle{flex-wrap:nowrap;align-items:flex-start;gap:6px}
.pg-crea .row-subtitle > .dot-state{margin-top:5px}
.pg-crea .row-title{overflow-wrap:anywhere;white-space:normal}
.pg-crea .row-title .ouvre{font-weight:inherit}
/* Le volet d'une créa (page produit) : vignette à toucher, puis la fiche label / valeur ; la rangée reste la poignée. */
.pg-crea-d > summary{-webkit-tap-highlight-color:transparent}
.pg-volet{padding:var(--space-2) var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.pg-apercu{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2);border-radius:var(--radius-lg);background:var(--surface-2);color:inherit;text-align:left;font:inherit;cursor:pointer}
.pg-apercu:active{background:var(--surface-3)}
.pg-apercu .row-chevron{margin-left:auto;flex:none}
.pg-vignette{position:relative;flex:none;width:72px;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-3);display:block}
.pg-vignette > img,.pg-vignette > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pg-vignette > video::-webkit-media-controls,.pg-vignette > video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.pg-play{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center}
.pg-play svg{width:18px;height:18px}
.pg-apercu-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pg-apercu-t{font-size:16px;line-height:21px;font-weight:600;color:var(--tint)}
.pg-apercu-s{font-size:13px;line-height:18px;color:var(--label-2)}
.pg-infos{margin:0;display:flex;flex-direction:column}
.pg-info{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);padding:7px 0;position:relative}
.pg-info + .pg-info::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--separator);transform:scaleY(.5);transform-origin:top}
.pg-info dt{flex:none;font-size:14px;line-height:19px;color:var(--label-2)}
.pg-info dd{margin:0;min-width:0;font-size:14px;line-height:19px;text-align:right;overflow-wrap:anywhere}
.pg-info dd.num{font-variant-numeric:tabular-nums}
.pg-info-col{flex-direction:column;align-items:flex-start;gap:3px}
.pg-info-col dd{text-align:left}
.pg-info-col .pg-sub{text-align:left}
.pg-info dd .dot-state{display:inline-block;vertical-align:middle;margin-right:4px;transform:translateY(-1px)}
/* Les blocs de la fiche d'une créa (famille, source, qualité, textes, performance, coût), les filtres et la galerie. */
.pg-bloc{padding-top:var(--space-2);border-top:1px solid var(--separator)}
.pg-bloc-t{margin:0 0 6px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--label-2)}
.pg-note{margin:6px 0 0;font-size:14px;line-height:19px;color:var(--label-2)}
.pg-note b{color:var(--label);font-weight:600}
.pg-sub{display:block;margin-top:2px;font-size:12.5px;line-height:17px;color:var(--label-3);font-weight:400;text-align:inherit}
.pg-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--label);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.chip.is-current{background:var(--tint);color:var(--on-tint);cursor:default}
.chip:active:not(.is-current){opacity:.6}
.pg-liens{display:flex;flex-direction:column}
.pg-lien{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:38px;padding:6px 0;color:var(--tint);font-size:15px;line-height:20px;text-decoration:none;position:relative}
.pg-lien + .pg-lien::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--separator);transform:scaleY(.5)}
.pg-lien .pg-ext{flex:none;width:8px;height:14px;color:var(--label-3)}
.pg-info dd .pg-lien{min-height:0;padding:0;justify-content:flex-end;font-size:14px;overflow-wrap:anywhere}
.pg-msgs{margin:4px 0 0;padding-left:16px;font-size:12.5px;line-height:17px;color:var(--label-3);text-align:left}
.pg-msgs li{margin-top:2px}
.pg-info dd .pg-msgs{text-align:left}
.pg-sous{display:block;border-top:1px solid var(--separator);padding:0}
.pg-sous > summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:40px;font-size:15px;line-height:20px;color:var(--label);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pg-sous > summary::-webkit-details-marker{display:none}
.pg-sous > summary .row-chevron{margin-left:auto;transition:transform .2s cubic-bezier(.25,1,.5,1)}
.pg-sous[open] > summary .row-chevron{transform:rotate(90deg)}
.pg-script{margin:0 0 var(--space-3);padding-left:22px;font-size:14px;line-height:20px;color:var(--label)}
.pg-script li{padding:2px 0}
.pg-trad{width:100%;border-collapse:collapse;margin:0 0 var(--space-3);font-size:13px;line-height:17px}
.pg-trad td{padding:5px 6px 5px 0;vertical-align:top;border-top:1px solid var(--separator);overflow-wrap:anywhere}
.pg-trad .pg-zone{color:var(--label-3);width:28%}
.pg-trad .pg-cible{color:var(--label);font-weight:500}
.pg-cells-perf{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-subrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;font-size:13px;line-height:18px;color:var(--label-2)}
.pg-cout > summary .pg-cout-l{flex:1;min-width:0}
.pg-cout-total{font-size:18px;font-weight:700;letter-spacing:-.2px;color:var(--label)}
.pg-cout-corps{padding:4px 0 var(--space-3)}
.pg-barre{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--surface-3)}
.pg-barseg{display:block;height:100%;min-width:2px}
.pg-legende{list-style:none;margin:10px 0 0;padding:0;font-size:14px;line-height:19px}
.pg-legende li{display:grid;grid-template-columns:10px minmax(0,1fr) 44px 72px;align-items:center;gap:8px;padding:5px 0}
.pg-pastille{display:block;width:10px;height:10px;border-radius:50%}
.pg-leg-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-leg-p{text-align:right;color:var(--label-2)}
.pg-leg-e{text-align:right;font-weight:600}
.c-claude{background:var(--tint)}.c-kie{background:var(--gain)}.c-heygen{background:var(--caution)}.c-vmake{background:#8e8e93}.c-autres{background:var(--loss)}
.pg-notes{margin:6px 0 0;padding-left:16px;font-size:12.5px;line-height:17px;color:var(--label-3)}
.pg-partage{padding-top:var(--space-2);border-top:1px solid var(--separator)}
.pg-outils{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.pg-outils .seg{flex:1;min-width:0}
.pg-filtres .seg-item{padding:0 4px}
.pg-filtres .seg-item[disabled]{opacity:.4}
.pg-nb{font-weight:400;color:var(--label-3);margin-left:2px}
.pg-vue{flex:none}
.pg-galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pg-tuile{display:flex;flex-direction:column;gap:5px;padding:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pg-tuile .pg-vignette{width:100%}
.pg-tuile.is-dim{opacity:.5;cursor:default}
.pg-tuile-l{display:flex;flex-direction:column;gap:1px;min-width:0}
.pg-tuile-n{font-size:13px;line-height:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-tuile-e{display:flex;align-items:center;gap:4px;font-size:11.5px;line-height:15px;color:var(--label-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-tuile-e .dot-state{flex:none;width:6px;height:6px}
@media (min-width:700px){.pg-galerie{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pg-nom{cursor:pointer;color:var(--label);text-align:left;text-decoration:underline;text-decoration-color:var(--separator);text-underline-offset:3px}
.pg-nom:hover{text-decoration-color:var(--tint)}
.table td.num,.table th + th{font-variant-numeric:tabular-nums}
tr.pg-jc.is-dim td{color:var(--label-3)}
.row.ouvre{cursor:pointer}
.row.is-current .row-title{color:var(--tint)}
@media (hover:hover){a.row:hover,button.row:hover{background:var(--surface-2)}}

/* ---------- Barres de progression (vagues, routines) ---------- */
.pg-bar{margin-top:var(--space-2)}
.pg-fill{background:var(--tint)}
.pg-fill.is-caution{background:var(--caution)}.pg-fill.is-loss{background:var(--loss)}.pg-fill.is-gain{background:var(--gain)}
.vague.en_cours .pg-fill{background:var(--caution)}
.vague.atteint .pg-fill{background:var(--gain)}

/* ---------- Graphique en barres (SVG en ligne) ---------- */
.chart .hit{fill:transparent}
.chart .lbl{font-variant-numeric:tabular-nums}
.card .days-legend{margin-top:var(--space-3);padding:0}

/* ---------- Arbitrage, actions, niveaux ---------- */
.pg-row-end{padding-right:var(--space-4)}
.pg-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.arb-toggle{color:var(--tint)}
.arb-r{align-items:flex-start}
.adv{display:none}
body.avance span.adv,body.avance code.adv{display:inline}
body.avance div.adv,body.avance p.adv,body.avance section.adv{display:block}
.niv{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;font-size:12px;font-weight:700;margin-left:6px;vertical-align:middle;cursor:help;font-variant-numeric:tabular-nums;background:var(--neutral-soft);color:var(--label-2)}
.niv.n1{background:var(--gain-soft);color:var(--gain)}.niv.n2{background:var(--tint-soft);color:var(--tint)}.niv.n3{background:var(--caution-soft);color:var(--caution)}.niv.n4{background:var(--loss-soft);color:var(--loss)}
.legende-niv{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:center;font-size:12px;line-height:16px;color:var(--label-2);margin:0 0 var(--space-3);padding:0 var(--space-4)}
.legende-niv span{display:inline-flex;align-items:center;gap:6px}
.legende-niv .niv{margin-left:0}

/* ---------- Onglets d'un produit, filtres ---------- */
.pg-tabs{margin:0 calc(-1 * var(--space-4));padding:2px var(--space-4)}
.chip[aria-current="page"]{background:var(--label);color:var(--ground);box-shadow:none}
.pg-corps .section:first-child{margin-top:var(--space-4)}
.pg-sel{text-align:right;text-align-last:right;color:var(--tint);min-width:0;max-width:62%;text-overflow:ellipsis}
.row.is-field input.field-input{min-width:0;flex:1;text-align:right}
.pg-date{color:var(--tint);text-align:right;min-width:0;font-variant-numeric:tabular-nums}
.pg-check{width:22px;height:22px;margin:0 var(--space-4) 0 0;accent-color:var(--tint)}
.row.is-field{padding-right:var(--space-4)}
.row.is-field .row-main{flex:none}

/* ---------- Feuille « période » ---------- */
html.pg-feuille,html.pg-feuille body{overflow:hidden}
.pg-overlay{position:fixed;inset:0;z-index:40;justify-content:flex-end;align-items:center;overscroll-behavior:contain}
.pg-overlay .sheet{width:100%;max-width:480px;max-height:92vh;max-height:92dvh;overflow-y:auto;padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom))}
@media (min-width:720px){.pg-overlay{justify-content:center}.pg-overlay .sheet{border-radius:var(--radius-xl)}}
.cal-day{font:inherit;color:inherit}
.cal-day:disabled{color:var(--label-3);opacity:.45;cursor:default}
.cal-day.in-range.is-sel{background:var(--tint);color:var(--on-tint)}
.sheet .field-input{background:transparent}
.pg-sheet:focus{outline:none}

/* ---------- Écran de téléphone / de bureau ---------- */
@media (max-width:719px){
  .app .cells.cols-4,.app .stat-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app .cols-2{grid-template-columns:minmax(0,1fr)}
  .app .pg-cols{gap:var(--space-6)}
}
@media (min-width:720px){
  .app .navbar{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .navbar-compact:not(:has(a)){display:none}
  .pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0 var(--space-3)}
  .pg-head .navbar-large{padding:0;min-width:0}
  .pg-head .navbar-large h1{font-size:40px;line-height:48px;letter-spacing:-0.6px}
  .pg-head .pg-period{flex:none;width:360px;margin-top:0;padding-bottom:var(--space-1)}
  .app .pg-cols{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .app .pg-cols > *{align-self:stretch}
}
@media (min-width:720px) and (max-width:1000px){.app .pg-cols{grid-template-columns:minmax(0,1fr)}}