/* Tableau des dépôts : même design que le CRM. Clair par défaut, sombre au choix. Lisible de loin, correct sur téléphone. */
@font-face { font-family: 'Inter'; src: url(/fonts/inter-latin-500-normal.woff2) format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/fonts/inter-latin-600-normal.woff2) format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(/fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); font-weight: 400 600; font-display: swap; }
:root { --bg: #f3f5f4; --panel: #fff; --panel2: #f2f5f4; --panel3: #e6ece9; --line: #e2e8e5; --text: #0f1613; --text2: #3d4944; --muted: #6b7772;
  --card: linear-gradient(180deg, #fff, #fbfcfc); --shadow: 0 1px 2px rgba(16,24,20,.05), 0 6px 20px rgba(16,24,20,.05);
  --ok: #16a34a; --ok-bg: #e8f7ee; color-scheme: light; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
:root[data-brand='aipf'] { --brand: #14c9b9; --brand-ink: #032a26; --brand-text: #0a857a; --brand-soft: rgba(20,201,185,.12); }
:root[data-brand='cryp'] { --brand: #d4a843; --brand-ink: #2a1c02; --brand-text: #8b5e10; --brand-soft: rgba(212,168,67,.16); }
:root[data-theme='dark'] { --bg: #0a0d0c; --panel: #111614; --panel2: #161c19; --panel3: #1f2723; --line: #222a26; --text: #e8eeeb; --text2: #b9c4bf; --muted: #84908a;
  --card: linear-gradient(180deg, #131a17, #0f1412); --shadow: 0 10px 30px rgba(0,0,0,.3); --ok: #3fd47a; --ok-bg: rgba(63,212,122,.12); color-scheme: dark; }
:root[data-theme='dark'][data-brand='aipf'] { --brand-text: #3fe6d6; }
:root[data-theme='dark'][data-brand='cryp'] { --brand-text: #e2bf6a; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
#board { padding: clamp(16px, 2.4vw, 40px); display: grid; gap: clamp(14px, 1.6vw, 24px); font-size: clamp(14px, 1.05vw, 21px); max-width: 2200px; margin: 0 auto; }
header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.logo .mark { width: 2.4em; height: 2.4em; border-radius: .7em; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font: 700 1em 'Space Grotesk', sans-serif; }
.logo b { display: block; font: 700 1.5em/1.1 'Space Grotesk', sans-serif; letter-spacing: -.01em; }
.logo span { font-size: .8em; color: var(--muted); }
.logo .mark-img { width: 2.6em; height: 2.6em; flex: none; }
:root[data-brand='aipf'] .logo .mark-img { padding: .2em; border-radius: .7em; background: var(--panel2); border: 1px solid var(--line); }
.logo .wm span { font-size: 1em; }
.wm-ai { background: linear-gradient(90deg, #19E3D2, #7B5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .wm-gold { color: var(--brand-text); }
.live { display: inline-flex; align-items: center; gap: .5em; padding: .4em .8em; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: .8em; color: var(--text2); }
.live i { width: .5em; height: .5em; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 .2em var(--ok-bg); }
.seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { background: transparent; border: 0; padding: .4em .9em; border-radius: 9px; font: inherit; font-size: .85em; font-weight: 500; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.icon-btn { width: 2.3em; height: 2.3em; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text2); display: grid; place-items: center; cursor: pointer; }
.ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: .9em 1.1em; box-shadow: var(--shadow); min-width: 0; }
.kpi span { display: block; font: 500 .7em 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi b { display: block; font: 700 2em/1.15 'Space Grotesk', sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.lead { background: linear-gradient(135deg, var(--brand-soft), transparent 70%), var(--card); }
.kpi.lead b { color: var(--brand-text); }
main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 24px); align-items: start; }
section { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(14px, 1.4vw, 24px); box-shadow: var(--shadow); min-width: 0; }
h2 { margin: 0 0 .8em; font: 500 .72em 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
ol.ranking, ul.latest { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.ranking li { display: grid; grid-template-columns: 2em 2.3em minmax(0, 1fr) auto; gap: .8em; align-items: center; padding: .6em .8em; border-radius: 14px; background: var(--panel2); border: 1px solid transparent; }
.ranking li.r1 { background: linear-gradient(90deg, rgba(244,197,66,.18), transparent 70%), var(--panel2); border-color: rgba(244,197,66,.45); }
.rank { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .6em; background: var(--panel); border: 1px solid var(--line); font: 700 .9em 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.r1 .rank { background: #f4c542; color: #3b2b00; border-color: transparent; } .r2 .rank { background: #c9d1d9; color: #1d252c; border-color: transparent; } .r3 .rank { background: #d99a63; color: #3a1d06; border-color: transparent; }
.av { width: 2.3em; height: 2.3em; border-radius: .7em; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); font-weight: 600; font-size: .8em; }
.av.sm { width: 2em; height: 2em; font-size: .7em; background: var(--panel3); color: var(--text2); }
.mid { min-width: 0; }
.mid .top { display: flex; align-items: baseline; gap: .6em; }
.name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { color: var(--muted); font-size: .78em; white-space: nowrap; }
.track { height: .4em; border-radius: 99px; background: var(--panel3); overflow: hidden; margin-top: .45em; }
.fill { height: 100%; border-radius: 99px; background: var(--brand); transition: width .6s ease; }
.sum, .amount { font: 700 1.05em 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; color: var(--ok); white-space: nowrap; }
.latest li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; gap: .7em; align-items: center; padding: .55em .8em; border-radius: 14px; background: var(--panel2); }
.latest li.new { animation: flash 2.6s ease-out; }
@keyframes flash { 0% { background: color-mix(in srgb, var(--ok) 35%, var(--panel2)); } 100% { background: var(--panel2); } }
.agent { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time { color: var(--muted); font: 500 .75em 'JetBrains Mono', monospace; }
.tag { font-size: .68em; font-weight: 600; color: var(--brand-text); background: var(--brand-soft); border-radius: 999px; padding: .2em .7em; white-space: nowrap; }
.flag { width: 1.6em; height: 1.2em; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.flag.none { display: inline-block; background: var(--line); }
.empty { color: var(--muted); padding: 1em; text-align: center; grid-template-columns: 1fr !important; }
.empty.big { font-size: 1.3em; padding: 3em; }
.status { color: #b7791f; font-size: .8em; min-height: 1em; }
@media (prefers-reduced-motion: reduce) { .latest li.new { animation: none; } .fill { transition: none; } }
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live { display: none; } .seg { order: 3; width: 100%; } .seg button { flex: 1; }
  .ranking li { grid-template-columns: 2em minmax(0, 1fr) auto; } .ranking .av { display: none; } .count { display: none; }
  .latest li { grid-template-columns: auto minmax(0, 1fr) auto; } .latest .av, .latest .time, .latest .tag { display: none; }
}