/* WamPay — système visuel.
   Jetons de marque : bleu nuit #081321, turquoise #43F4C4, bleu électrique #487CF8, blanc cassé #F6F8FA,
   ardoise #0B1726. Le turquoise vif ne porte du texte que sur fond sombre ; en mode clair il est remplacé
   par un sarcelle foncé pour tenir le contraste AA. Aucune police distante : pile système, chiffres tabulaires. */
:root {
  --night: #081321; --slate: #0B1726; --mint: #43F4C4; --electric: #487CF8; --paper: #F6F8FA;
  --font: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --r-s: 6px; --r-m: 12px; --r-l: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
[data-theme="dark"] {
  --bg: var(--night); --surface: var(--slate); --raised: #10203396; --line: #1d3147; --line-strong: #2b4662;
  --ink: #F6F8FA; --ink-2: #b5c3d2; --ink-3: #8597ab;
  --accent: var(--mint); --accent-ink: #062019; --link: #8fb0ff; --series: #5b8bfa; --series-2: #18ad85;
  --good: #43F4C4; --warn: #f5c453; --bad: #ff8f8f; --info: #8fb0ff;
  --good-bg: #0d3a30; --warn-bg: #3d3110; --bad-bg: #431d22; --info-bg: #16284f; --mute-bg: #162739;
  --glow: radial-gradient(900px 420px at 88% -10%, #487cf826, transparent 70%), radial-gradient(700px 380px at -5% 0%, #43f4c414, transparent 70%);
}
[data-theme="light"] {
  --bg: var(--paper); --surface: #ffffff; --raised: #ffffff; --line: #dde4ec; --line-strong: #c2cedb;
  --ink: #081321; --ink-2: #3c4f63; --ink-3: #5c6f84;
  --accent: #087a5e; --accent-ink: #ffffff; --link: #2a5bd7; --series: #3a6cf0; --series-2: #087a5e;
  --good: #05553f; --warn: #6e4700; --bad: #9a1c25; --info: #1f47b0;
  --good-bg: #dff7ef; --warn-bg: #fbefcf; --bad-bg: #fde4e4; --info-bg: #e3ebff; --mute-bg: #edf1f5;
  --glow: radial-gradient(900px 420px at 88% -10%, #487cf814, transparent 70%);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); background-image: var(--glow); background-attachment: fixed; color: var(--ink); font: 400 15px/1.5 var(--font); font-variant-numeric: tabular-nums; min-height: 100vh; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 650; line-height: 1.15; }
h2 { font-size: 1.05rem; font-weight: 650; }
h3 { font-size: .95rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--link); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: var(--r-s); z-index: 20; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); grid-template-areas: "top top" "rail view" "foot foot"; max-width: 1360px; margin: 0 auto; padding: 0 20px 48px; column-gap: 28px; }
.top { grid-area: top; display: flex; align-items: center; gap: 16px; padding: 16px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 1.2rem var(--display); letter-spacing: -.02em; }
.brand-bg { fill: var(--night); stroke: var(--line-strong); stroke-width: 1.5; }
.wm-a { stop-color: var(--electric); } .wm-b { stop-color: var(--mint); } .wm-dot { fill: var(--mint); }
[data-theme="light"] .brand-bg { fill: #fff; stroke: var(--line); }
[data-theme="light"] .wm-a { stop-color: #3565EA; } [data-theme="light"] .wm-b { stop-color: #0FB48A; } [data-theme="light"] .wm-dot { fill: #0FB48A; }
.org select { min-width: 220px; }
.top-actions { margin-left: auto; display: flex; gap: 8px; }
.rail { grid-area: rail; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; align-self: start; }
.rail a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; font-weight: 550; transition: background .15s var(--ease), color .15s var(--ease); }
.rail a:hover { background: var(--mute-bg); color: var(--ink); }
.rail a[aria-current="page"] { background: var(--mute-bg); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.rail svg { width: 18px; height: 18px; flex: none; }
#view { grid-area: view; min-width: 0; display: grid; gap: 22px; align-content: start; }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; }
.head p { color: var(--ink-2); max-width: 62ch; margin-top: 6px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Contrôles */
button, .btn, select, input { font: inherit; }
button, .btn { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 9px 14px; border-radius: var(--r-s); font-weight: 600; cursor: pointer; min-height: 40px; transition: transform .12s var(--ease), background .15s var(--ease), border-color .15s var(--ease); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
button:hover, .btn:hover { border-color: var(--ink-3); }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
button.primary:hover { filter: brightness(1.06); }
button.ghost { background: transparent; }
button.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
button.small { min-height: 32px; padding: 4px 10px; font-size: .85rem; }
button[disabled] { opacity: .55; cursor: not-allowed; }
input, select { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-s); padding: 8px 10px; min-height: 40px; width: 100%; }
input::placeholder { color: var(--ink-3); }
label.f { display: grid; gap: 5px; font-size: .84rem; color: var(--ink-2); font-weight: 550; min-width: 0; }
label.check { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-weight: 550; font-size: .9rem; }
label.check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.hint { color: var(--ink-3); font-size: .84rem; }

/* Surfaces */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px; min-width: 0; }
.panel > * + * { margin-top: 12px; }
.dlg h3 { margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }

dl { margin: 0; }
.neg { color: var(--bad); }

/* Tableaux */
.scroll { overflow-x: auto; margin: 0 -18px -18px; padding: 0 18px 12px; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
caption { text-align: left; color: var(--ink-3); font-size: .82rem; padding-bottom: 8px; caption-side: top; }
th { text-align: left; color: var(--ink-2); font-weight: 600; font-size: .8rem; padding: 8px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td:first-child { white-space: nowrap; }
td.mono:first-child { white-space: normal; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; white-space: nowrap; }
tbody tr.click { cursor: pointer; transition: background .12s var(--ease); }
tbody tr.click:hover, tbody tr.click:focus-visible { background: var(--mute-bg); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .82rem; color: var(--ink-2); overflow-wrap: anywhere; }
.empty { color: var(--ink-2); padding: 22px 4px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 650; white-space: nowrap; background: var(--mute-bg); color: var(--ink-2); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.good { background: var(--good-bg); color: var(--good); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.bad::before { border-radius: 1px; transform: rotate(45deg); }
.badge.warn::before { border-radius: 1px; }

/* Graphiques */
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .bar { fill: var(--series); transition: opacity .12s; }
.chart .bar.alt { fill: var(--series-2); }
.chart .bar.negbar { fill: var(--bad); }
.chart .hit { fill: transparent; }
.chart .hit:hover + .bar, .chart .hit:focus + .bar { opacity: .7; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart text { fill: var(--ink-3); font: 500 12px var(--font); }
.chart .grid.base { stroke: var(--line-strong); }
.chart-wrap { position: relative; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); padding: 6px 9px; border-radius: var(--r-s); font-size: .8rem; font-weight: 600; transform: translate(-50%, -110%); white-space: nowrap; opacity: 0; transition: opacity .1s; z-index: 3; }
.tip.on { opacity: 1; }
details.data summary { cursor: pointer; color: var(--ink-2); font-size: .84rem; font-weight: 550; margin-top: 10px; }
.cmp { display: grid; gap: 10px; }
.cmp div { display: grid; grid-template-columns: minmax(110px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.cmp svg { height: 14px; }

/* Détail, listes */
.lines { display: grid; gap: 0; }
.lines div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lines div:last-child { border-bottom: 0; }
.lines .total { font-weight: 700; }
.lines span:first-child { color: var(--ink-2); }
.steps { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; list-style: none; padding: 0; margin: 0; font-size: .85rem; color: var(--ink-2); }

pre { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; overflow-x: auto; font: 500 .8rem/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; margin: 0; color: var(--ink); }
.secret { background: var(--good-bg); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); border-radius: var(--r-s); padding: 12px; display: grid; gap: 8px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button[aria-pressed="true"] { background: var(--mute-bg); border-color: var(--accent); }

/* Accueil */

dialog { border: 1px solid var(--line-strong); border-radius: var(--r-l); background: var(--surface); color: var(--ink); padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
dialog::backdrop { background: #040a12b3; backdrop-filter: blur(3px); }
dialog[open] { animation: rise .18s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.dlg { padding: 22px; display: grid; gap: 16px; }
.dlg-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 30; width: min(480px, calc(100vw - 24px)); }
#toast div { background: var(--ink); color: var(--bg); padding: 11px 14px; border-radius: var(--r-s); font-weight: 600; box-shadow: 0 10px 30px #0006; animation: rise .18s var(--ease); }
#toast div.err { background: var(--bad); color: #1b0507; }

/* En-tête : le rappel « données fictives » reste visible partout, sans occuper une ligne entière. */
.top { padding: 16px 0 22px; }
.pill { margin-left: auto; background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.pill + .top-actions { margin-left: 0; }
.notice { background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--r-s); padding: 8px 12px; font-size: .86rem; font-weight: 550; }
.foot { grid-area: foot; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .82rem; }
.lbl { display: block; color: var(--ink-2); font-size: .86rem; font-weight: 550; }
.count { display: inline-block; min-width: 1.5em; padding: 0 6px; border-radius: 999px; background: var(--mute-bg); color: var(--ink-2); font-size: .76rem; text-align: center; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.row.center { justify-content: center; }
button.big { min-height: 48px; padding: 12px 22px; font-size: 1.02rem; }

/* Le parcours de l'argent : trois étapes dans l'ordre, reliées par un chevron. Ce qui est perdu sort du parcours. */
.money { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 14px; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.flow li { position: relative; padding: 20px 22px 18px 30px; min-width: 0; }
.flow li:first-child { padding-left: 22px; }
.flow li + li { border-left: 1px solid var(--line); }
.flow li + li::before { content: ""; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--surface); border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); transform: rotate(45deg); }
.flow li::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.flow li + li::after { left: 30px; }
.flow li.wait::after { background: var(--warn); }
.flow strong, .aside strong { display: block; margin-top: 4px; font: 650 clamp(1.3rem, 1rem + 1.3vw, 2rem)/1.15 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.flow small, .aside small, .earn small { display: block; color: var(--ink-3); font-size: .82rem; margin-top: 4px; }
.aside { background: transparent; border: 1px dashed var(--line-strong); border-radius: var(--r-l); padding: 20px 22px 18px; min-width: 0; }
.aside strong { color: var(--bad); }

.earn-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr); gap: 8px 18px; align-items: end; }
.earn strong { display: block; font: 650 1.4rem var(--display); letter-spacing: -.015em; margin-top: 2px; }
.earn .result strong { font-size: 1.75rem; }
.earn .op { color: var(--ink-3); font: 500 1.4rem var(--display); padding-bottom: 22px; }
.earn-bar { display: block; width: 100%; height: 8px; }
.seg.s1, .sw.s1 { fill: var(--series); background: var(--series); }
.seg.s2, .sw.s2 { fill: var(--series-2); background: var(--series-2); }
.seg.s3, .sw.s3 { fill: var(--ink-3); background: var(--ink-3); }
.split svg { display: block; width: 100%; height: 12px; }
.legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .9rem; }
.legend span { color: var(--ink-2); }
.sw { width: 12px; height: 12px; border-radius: 3px; }

/* États d'un paiement : une frise, parce que c'est réellement une séquence. */
.steps { display: flex; flex-wrap: wrap; gap: 8px 0; list-style: none; padding: 0; margin: 0; font-size: .85rem; color: var(--ink-2); }
.steps li { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.steps li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.steps li.lost::before { background: var(--bad); border-radius: 2px; }
.steps li + li { margin-left: 8px; }
.steps li + li::before { box-shadow: -22px 0 0 -3px var(--line-strong), -14px 0 0 -3px var(--line-strong); margin-left: 22px; }
.steps .hint { font-weight: 500; }

/* Accueil */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px 44px; align-items: center; padding: clamp(12px, 4vw, 48px) 0 0; }
.hero-text { display: grid; gap: 20px; }
.hero h1 { font-size: clamp(2.3rem, 1.3rem + 4vw, 4.4rem); line-height: 1; letter-spacing: -.04em; font-weight: 700; }
.hero h1 span { display: block; }
.hero h1 span + span { color: var(--accent); }
.hero .lead { color: var(--ink-2); font-size: 1.1rem; max-width: 52ch; }
.example { display: grid; gap: 16px; margin: 0; padding: 22px; border-radius: var(--r-l); }
.example > * + * { margin-top: 0; }
.example figcaption { display: grid; gap: 8px; justify-items: start; }
.example h2 { font-size: 1.2rem; }
.keyform { grid-column: 1; max-width: 560px; }
.inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }

/* Filtres des paiements */
.filters { display: grid; gap: 12px; }
.filters > * + * { margin-top: 0; }
.filter-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.filters .search { flex: 1 1 220px; max-width: 340px; }
.filters details summary { cursor: pointer; color: var(--ink-2); font-size: .88rem; font-weight: 600; width: fit-content; }
.filters details .form { margin-top: 12px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "view" "foot"; padding: 0 14px 96px; }
  .rail { position: fixed; inset: auto 0 0 0; flex-direction: row; background: var(--surface); border-top: 1px solid var(--line-strong); padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)); z-index: 10; justify-content: space-around; top: auto; }
  .rail a { flex-direction: column; gap: 2px; font-size: .68rem; padding: 6px 4px; min-width: 52px; text-align: center; }
  .rail a[aria-current="page"] { box-shadow: inset 0 3px 0 var(--accent); }
  .top { flex-wrap: wrap; gap: 10px; padding-bottom: 16px; }
  .pill { order: 5; margin-left: 0; }
  .top-actions { margin-left: auto; }
  .org select { min-width: 0; max-width: 44vw; }
  .money { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li, .flow li:first-child { padding: 16px 18px 16px 22px; }
  .flow li + li { border-left: 0; border-top: 1px solid var(--line); }
  .flow li + li::before { left: 50%; top: -9px; margin: 0 0 0 -8px; transform: rotate(135deg); }
  .flow li::after, .flow li + li::after { left: 0; right: auto; top: 14px; bottom: 14px; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .earn-grid { grid-template-columns: minmax(0, 1fr); }
  .earn .op { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .keyform { grid-column: auto; }
  #toast { bottom: 84px; }
}
/* Sur petit écran, une ligne de paiement devient une carte : référence et montant d'abord, date et état dessous. */
@media (max-width: 640px) {
  table.pay thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.pay, table.pay tbody { display: block; }
  table.pay caption { display: block; }
  table.pay tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref amount" "date status"; gap: 4px 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
  table.pay tr:last-child { border-bottom: 0; }
  table.pay td { padding: 0; border: 0; }
  table.pay .c-ref { grid-area: ref; font-weight: 650; }
  table.pay .c-amount { grid-area: amount; font-weight: 650; }
  table.pay .c-date { grid-area: date; color: var(--ink-2); font-size: .84rem; }
  table.pay .c-status { grid-area: status; justify-self: end; }
  table.pay .c-method, table.pay .c-fee, table.pay .c-margin { display: none; }
  .inline { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .badge, .flow div::before, .chart .bar { forced-color-adjust: auto; } .chart .bar { fill: CanvasText; } }
@media print { .rail, .top-actions, .sandbox, #toast { display: none; } .shell { display: block; } body { background: #fff; color: #000; } }