@import url(/static/polices.css);

  :root {
    --ground: #EEF2F7; --stage: #DDE4EE; --surface: #FFFFFF; --sunken: #F4F7FB;
    --ink: #0E1B2E; --muted: #5A6A82; --line: #DAE2EC;
    --accent: #0A84A8; --accent-ink: #FFFFFF; --accent-soft: #E1F3F8;
    --good: #147A42; --good-soft: #E2F4EA; --warn: #A15C07; --warn-soft: #FBEFD9; --bad: #B3261E; --bad-soft: #FBE6E4;
    --bar: #0A84A8; --bar-track: #E6ECF3; --frame: #0E1B2E; --shadow: 0 24px 60px -24px rgba(14, 27, 46, .45);
    --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
    --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #070F1C; --stage: #050B15; --surface: #101D33; --sunken: #0B1629;
      --ink: #E9EFF8; --muted: #8C9DB6; --line: #1D2D48;
      --accent: #2CC7E8; --accent-ink: #06202A; --accent-soft: #0F2E40;
      --good: #4FD98A; --good-soft: #0F2E22; --warn: #F0B34E; --warn-soft: #33260D; --bad: #FF8A80; --bad-soft: #3A1614;
      --bar: #2CC7E8; --bar-track: #18273F; --frame: #2A3A57; --shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
    }
  }
  :root[data-theme="dark"] {
    --ground: #070F1C; --stage: #050B15; --surface: #101D33; --sunken: #0B1629;
    --ink: #E9EFF8; --muted: #8C9DB6; --line: #1D2D48;
    --accent: #2CC7E8; --accent-ink: #06202A; --accent-soft: #0F2E40;
    --good: #4FD98A; --good-soft: #0F2E22; --warn: #F0B34E; --warn-soft: #33260D; --bad: #FF8A80; --bad-soft: #3A1614;
    --bar: #2CC7E8; --bar-track: #18273F; --frame: #2A3A57; --shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  body { background: var(--stage); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.45; }
  button { font: inherit; color: inherit; cursor: pointer; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .stage { height: 100%; display: flex; justify-content: center; }

  .phone { width: 480px; max-width: 100%; height: 100%; background: var(--ground); display: flex; flex-direction: column; overflow: hidden; position: relative; }

  .top { padding: 16px 16px 12px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
  .who { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .who div { display: flex; flex-direction: column; }
  .who strong { font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.2; }
  .who div span { font-size: 12px; color: var(--muted); }
  .theme { border: 1px solid var(--line); background: var(--sunken); border-radius: 999px; padding: 6px 12px 6px 10px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
  .theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .theme:hover { border-color: var(--accent); }
  .period { display: flex; align-items: center; justify-content: space-between; background: var(--sunken); border-radius: 12px; padding: 4px; }
  .period button { border: 0; background: transparent; width: 40px; height: 36px; border-radius: 9px; font-size: 18px; }
  .period button:disabled { opacity: .3; cursor: default; }
  .period button:not(:disabled):hover { background: var(--accent-soft); }
  .period b { font-weight: 600; }

  .screen { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
  .screen h2 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
  .block { display: flex; flex-direction: column; gap: 10px; }

  .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
  .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .tile { display: flex; flex-direction: column; gap: 4px; }
  .tile .l { font-size: 13px; color: var(--muted); }
  .tile .n { font-weight: 700; font-size: 34px; line-height: 1.05; }
  .delta { font-size: 12px; font-weight: 600; display: flex; gap: 4px; align-items: baseline; color: var(--muted); }
  .delta.up { color: var(--good); } .delta.down { color: var(--bad); }
  .spark { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
  .spark svg { width: 100%; height: 60px; display: block; overflow: visible; }
  .spark .base { stroke: var(--line); stroke-width: 1; }
  .spark .past { fill: none; stroke: var(--muted); stroke-opacity: .45; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .spark .now { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .spark .end { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
  .spark .pick { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
  .spark .hit { fill: transparent; cursor: pointer; }
  .spark .cap { font-size: 12px; color: var(--muted); min-height: 17px; }
  .meter { height: 6px; border-radius: 3px; background: var(--accent-soft); overflow: hidden; }
  .meter i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

  .funnel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 6px 16px; }
  .step { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 6px; padding: 11px 0; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: 0; }
  .step .name { font-weight: 500; }
  .step .val { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; text-align: right; }
  .step .track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--bar-track); overflow: hidden; }
  .step .fill { height: 100%; min-width: 3px; border-radius: 3px; background: var(--bar); }
  .step .rate { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }

  .camp { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
  .camp b { font-weight: 600; }
  .camp .nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .camp .nums strong { color: var(--ink); }

  .lead, .org { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100%; }
  button.lead:hover { border-color: var(--accent); }
  .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .row b { font-weight: 600; }
  .sub { font-size: 13px; color: var(--muted); }
  .pill { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
  .p-recu { background: var(--accent-soft); color: var(--accent); }
  .p-devis { background: var(--warn-soft); color: var(--warn); }
  .p-signe { background: var(--good-soft); color: var(--good); }
  .p-perdu, .p-rebond { background: var(--bad-soft); color: var(--bad); }
  .p-envoye { background: var(--sunken); color: var(--muted); }
  .masked { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
  .masked svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .link { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 13px; }
  .link[disabled] { color: var(--muted); cursor: default; }
  .block > .link { align-self: center; padding: 6px 0; }

  .tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 1px solid var(--line); }
  .tabs button { border: 0; background: none; padding: 10px 4px 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
  .tabs button[aria-selected="true"] { color: var(--accent); }
  .tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .badge { background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: 11px; padding: 0 6px; margin-left: 4px; }

  .sheet-back { position: absolute; inset: 0; background: rgba(5, 11, 21, .55); display: flex; align-items: flex-end; }
  .sheet { background: var(--surface); width: 100%; border-radius: 22px 22px 0 0; padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 14px; max-height: 88%; overflow-y: auto; }
  .sheet h3 { font-family: var(--display); font-size: 20px; margin: 0; }
  .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; margin: 0; }
  .kv dt { color: var(--muted); } .kv dd { margin: 0; }
  .quote { background: var(--sunken); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .btn { border: 1px solid var(--line); background: var(--sunken); border-radius: 12px; padding: 12px 10px; font-weight: 600; }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); grid-column: 1 / -1; }
  .btn.good { background: var(--good-soft); border-color: transparent; color: var(--good); }
  .btn.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
  .amount { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
  .amount input { font: inherit; font-size: 18px; color: var(--ink); background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; }
  .p-attente { background: var(--warn-soft); color: var(--warn); }
  .p-cours { background: var(--accent-soft); color: var(--accent); }
  .mail { background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 14px; display: flex; flex-direction: column; gap: 10px; }
  .accroches { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
  .accroche .quote { color: var(--ink); }
  .accroche .cite { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
  .accroche .cite a { color: var(--accent); font-weight: 600; white-space: nowrap; }
  .accroche .link.danger { color: var(--bad); }
  .accroche.retiree .quote { text-decoration: line-through; color: var(--muted); }
  .mail .emplacement { color: var(--accent); font-style: italic; }
  .mail .objet { font-weight: 600; }
  .mail p { margin: 0; }
  .mail .pied { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
  .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
  .field input, .field textarea, .field select { font: inherit; font-size: 15px; color: var(--ink); background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; resize: vertical; }
  .wide { grid-column: 1 / -1; }
  .toast { position: absolute; left: 16px; right: 16px; bottom: 84px; background: var(--ink); color: var(--ground); border-radius: 12px; padding: 10px 14px; font-size: 14px; text-align: center; }


  .demo { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--warn); background: var(--warn-soft); padding: 3px 9px; border-radius: 999px; }
  .vide { background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; padding: 18px 16px; color: var(--muted); text-align: center; }
  .pied { font-size: 12px; color: var(--muted); text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
  a.btn { text-decoration: none; text-align: center; display: block; }
  .kv a { color: var(--accent); }
  .sheet .field input[inputmode="numeric"] { letter-spacing: .3em; font-size: 20px; text-align: center; }
  .tabs { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .top { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }

  /* pages d'entrée (code, messages) */
  .porte { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
  .porte main { width: 360px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px 22px; display: flex; flex-direction: column; gap: 16px; }
  .porte h1 { font-family: var(--display); font-size: 24px; line-height: 1.15; margin: 0; text-wrap: balance; }
  .porte p { margin: 0; color: var(--muted); }
  .porte .erreur { color: var(--bad); font-weight: 600; min-height: 1.4em; }
  .porte input { font: inherit; font-size: 28px; letter-spacing: .35em; text-align: center; color: var(--ink); background: var(--sunken); border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; width: 100%; }
  .porte button { border: 0; background: var(--accent); color: var(--accent-ink); border-radius: 14px; padding: 14px; font-weight: 700; font-size: 16px; }