/* ── Tokens : source unique. Sombre = les mêmes, redéfinis. ── */
:root {
  color-scheme: light;
  --bg: #f5f5f7; --surface: #ffffff; --ink: #1d1d1f; --ink-2: #6e6e73; --line: #e2e2e6;
  --accent-fill: #e8b923; --accent: color-mix(in srgb, var(--accent-fill) 65%, #000000); --on-accent: #1d1d1f; --bubble: #e9e9eb; --on-bubble: #1d1d1f; --bubble-wait: .62; /* ta bulle : gris clair et encre noire en clair (14:1) ; en sombre, plus bas */
  --ok: #248a3d; --warn: #b25000; --err: #d70015; --err-fill: #d70015; --on-err: #ffffff; --switch-off: #86868b; /* blanc sur le rouge : 5,4:1 ; l'encre de l'accent y faisait 3,1:1 */
  --hover: rgba(0, 0, 0, .05); --current: color-mix(in srgb, var(--accent-fill) 14%, transparent); --mono-bg: #e8e8ed;
  --thumb: rgba(0, 0, 0, .42); --thumb-hover: rgba(0, 0, 0, .62); --mark: #ffe58a; --desk-wall: #dbe4ee; --desk-bar: #c2cedb;
  /* Avatars (ANALYSE §8) : 11 couleurs vives, les mêmes en clair et en sombre ; yeux foncés à ≥ 5:1 sur chacune (noir : yeux blancs). */
  --wa: #11803d; --wa-ink: #ffffff; /* non lus : vert WhatsApp foncé d'un cran (blanc dessus : 5,0:1 ; sur la colonne : 4,6:1) */
  --av-black: #262626; --av-brown: #d08a3e; --av-red: #ff4b3a; --av-orange: #ff8c00; --av-yellow: #ffd600; --av-green: #00d65f; --av-cyan: #00d0f0; --av-blue: #3f8cff; --av-violet: #b46cff; --av-magenta: #ff3fae; --av-gray: #a3aab3; --av-ink: #1d1d1f; --av-edge: #1d1d1f;
  /* Le serpent des cartes en cours (repris du tableau des cles fournisseur) : les memes en clair et en sombre. */
  --snake-ciel: #92e7ff; --snake-violet: #6c34f2; --snake-rose: #ff5fb0; --snake-jaune: #ffc72c;
  --shadow: 0 8px 24px rgba(0, 0, 0, .12);
  --scrim: rgba(0, 0, 0, .4);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --r1: 6px; --r2: 8px; --r3: 12px; --r4: 18px; --r-pastille: 999px; /* entierement arrondi : les deux bouts en demi-cercle */
  --t-label: 11px; --t-meta: 12px; --t-code: 13px; --t-body: 14px; --t-read: 15px; --t-h1: 17px; --t-big: 22px; --t-hero: clamp(34px, 4.6vw, 56px); /* le nom de l'app sur son accueil, seul usage */
  --bar: 52px; --nav-min: 264px; --nav-max: 50vw; --nav: clamp(var(--nav-min), var(--nav-user, var(--nav-min)), var(--nav-max)); --nav-c: 92px; --nav-pad: 16px; --mono-w: 36px; --row: 40px; --field: 32px; --mini: 24px;
  --omni-w: 560px; --omni-edge: var(--settings-w); --bar-tools: 124px; --bar-tools-grow: 0px; /* what the touch rules add to the left tools of the bar (responsive.css) */
  --rail: 52px; --side: round(down, max(320px, 24vw), 1px);
  --hit: 44px; /* smallest touch box (Apple HIG) */ --t-field-touch: 16px; /* iOS zooms on focus into any field under 16 px */
  --settings-w: 280px; --read: 760px; --move: 150ms; --hop: 300ms; --hop-ease: cubic-bezier(.32, .72, 0, 1);
  --ring: inset 0 0 0 1px var(--line);
  --ring-focus: inset 0 0 0 1px var(--accent), 0 0 0 1px var(--accent);
  --thumb-w: 6px; --thumb-inset: 4px; --thumb-min: 32px; --thumb-hold: 1000; /* ms avant l'effacement du curseur */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #161617; --surface: #1f1f21; --ink: #f5f5f7; --ink-2: #a1a1a6; --line: #333336; --bubble: #48484a; --on-bubble: #ffffff; /* ta bulle en sombre : un gris qui se detache du fond (9:1) */
    --accent: color-mix(in srgb, var(--accent-fill) 92%, #ffffff); --ok: #30d158; --warn: #ffd60a; --err: #ff453a; --switch-off: #76767b;
    --hover: rgba(255, 255, 255, .06); --current: color-mix(in srgb, var(--accent-fill) 18%, transparent); --mono-bg: #2c2c2e; --shadow: 0 8px 24px rgba(0, 0, 0, .5);
    --thumb: rgba(255, 255, 255, .40); --thumb-hover: rgba(255, 255, 255, .62); --mark: #6b5a00; --desk-wall: #26303c; --desk-bar: #3a4654;
    --wa: #25d366; --wa-ink: #0b141a;
    --av-black: #48484a; --av-edge: #f5f5f7; --av-brown: #d08a3e; --av-red: #ff4b3a; --av-orange: #ff8c00; --av-yellow: #ffd600; --av-green: #00d65f; --av-cyan: #00d0f0; --av-blue: #3f8cff; --av-violet: #b46cff; --av-magenta: #ff3fae; --av-gray: #a3aab3;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161617; --surface: #1f1f21; --ink: #f5f5f7; --ink-2: #a1a1a6; --line: #333336; --bubble: #48484a; --on-bubble: #ffffff;
  --accent: color-mix(in srgb, var(--accent-fill) 92%, #ffffff); --ok: #30d158; --warn: #ffd60a; --err: #ff453a; --switch-off: #76767b;
  --hover: rgba(255, 255, 255, .06); --current: color-mix(in srgb, var(--accent-fill) 18%, transparent); --mono-bg: #2c2c2e; --shadow: 0 8px 24px rgba(0, 0, 0, .5);
  --thumb: rgba(255, 255, 255, .40); --thumb-hover: rgba(255, 255, 255, .62); --mark: #6b5a00; --desk-wall: #26303c; --desk-bar: #3a4654;
  --wa: #25d366; --wa-ink: #0b141a;
  --av-black: #48484a; --av-edge: #f5f5f7; --av-brown: #d08a3e; --av-red: #ff4b3a; --av-orange: #ff8c00; --av-yellow: #ffd600; --av-green: #00d65f; --av-cyan: #00d0f0; --av-blue: #3f8cff; --av-violet: #b46cff; --av-magenta: #ff3fae; --av-gray: #a3aab3;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }
html { background: var(--bg); color: var(--ink); }
body { margin: 0; background: transparent; font: var(--t-body)/1.45 var(--sans); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.iconbtn { position: relative; width: var(--mono-w); height: var(--mono-w); border-radius: var(--r2); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ink); }
.iconbtn:hover { background: var(--hover); }
.iconbtn[aria-pressed="true"] { color: var(--accent); background: var(--current); }
.mini { width: var(--mini); height: var(--mini); border-radius: var(--r1); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ink-2); }
.mini:hover { background: var(--hover); color: var(--ink); }
.mini .icon { width: 16px; height: 16px; }
.btn { height: var(--field); padding: 0 14px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: var(--t-body); white-space: nowrap; }
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn.danger { background: var(--err-fill); border-color: var(--err-fill); color: var(--on-err); }
.btn:disabled { opacity: .45; cursor: default; }
.field:disabled, select:disabled { opacity: .45; cursor: default; }
.field { width: 100%; min-width: 0; height: var(--field); padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); color: var(--ink); font: var(--t-body) var(--sans); }
.field::placeholder { color: var(--ink-2); }
.spacer { flex: 1; }
mark { background: var(--mark); color: var(--ink); border-radius: 2px; padding: 0 1px; }