/* Windy Watch — thème « Minimalism & Swiss Style ».
   Grille de 8 px, une seule famille grotesque (Inter), fond neutre, filets de 1 px au lieu des ombres,
   arrondis presque nuls, une seule couleur d'accent (le violet Windy, assombri pour le contraste).
   Clair par défaut, sombre selon le système ou le bouton (data-theme sur <html>). */
@font-face { font-family: "Inter"; src: url(/fonts/inter-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 4px; --r-sm: 2px;
  --wash: #f4f4f2;
  --side: #ffffff; --card: #ffffff; --tile: #f2f2f0; --stripe: #f8f8f7; --track: #e4e4e1;
  --badge: #111111; --badge-text: #ffffff; --toast: #111111; --toast-text: #ffffff;
  --text: #111111; --muted: #5e5e5b; --chip: #e8e8e5; --line: #e2e2df; --field: #8c8c88;
  --accent: #4a3ab0; --accent-ink: #ffffff; --accent-soft: rgba(74, 58, 176, .08); --link: #4a3ab0;
  --logo: #111111; --glow: none;
  --ok: #2d6a1c; --ok-fill: #3d8a29; --warn: #8a5100; --bad: #bf2a22; --info: #4a3ab0;
  --slot: #fafaf9; --slot-line: #dcdcd8;
  --shadow: none;
  --pop: 0 8px 24px rgba(17, 17, 17, .12);
  --scrim: rgba(17, 17, 17, .48);
  --c1: #4a3ab0; --c2: #3d8a29; --c3: #0f7f99; --c4: #c26a00; --c5: #d6336c; --c0: #9a9a96;
  --c6: #8a2be2; --c7: #b8860b; --c8: #2f6f8f;
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.4, .64, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wash: #0e0f11;
    --side: #16171a; --card: #16171a; --tile: #1f2024; --stripe: #1b1c20; --track: #2a2b30;
    --badge: #f2f2f0; --badge-text: #111111; --toast: #f2f2f0; --toast-text: #111111;
    --text: #f2f2f0; --muted: #a3a5ab; --chip: #2c2d32; --line: #2a2b30; --field: #6f7178;
    --accent: #a99cff; --accent-ink: #111111; --accent-soft: rgba(169, 156, 255, .12); --link: #b7acff;
    --logo: #f2f2f0; --glow: none;
    --ok: #93d07f; --ok-fill: #6fb85a; --warn: #f0b45a; --bad: #ff7f76; --info: #b7acff;
    --slot: #121316; --slot-line: #2c2d32;
    --shadow: none;
    --pop: 0 8px 24px rgba(0, 0, 0, .5);
    --scrim: rgba(0, 0, 0, .64);
    --c1: #a99cff; --c2: #6fb85a; --c3: #3fb3cc; --c4: #e39a3b; --c5: #f06a9a; --c0: #6f7178;
  --c6: #c792ff; --c7: #e0c35a; --c8: #6aa9c9;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --wash: #0e0f11;
  --side: #16171a; --card: #16171a; --tile: #1f2024; --stripe: #1b1c20; --track: #2a2b30;
  --badge: #f2f2f0; --badge-text: #111111; --toast: #f2f2f0; --toast-text: #111111;
  --text: #f2f2f0; --muted: #a3a5ab; --chip: #2c2d32; --line: #2a2b30; --field: #6f7178;
  --accent: #a99cff; --accent-ink: #111111; --accent-soft: rgba(169, 156, 255, .12); --link: #b7acff;
  --logo: #f2f2f0; --glow: none;
  --ok: #93d07f; --ok-fill: #6fb85a; --warn: #f0b45a; --bad: #ff7f76; --info: #b7acff;
  --slot: #121316; --slot-line: #2c2d32;
  --shadow: none;
  --pop: 0 8px 24px rgba(0, 0, 0, .5);
  --scrim: rgba(0, 0, 0, .64);
  --c1: #a99cff; --c2: #6fb85a; --c3: #3fb3cc; --c4: #e39a3b; --c5: #f06a9a; --c0: #6f7178;
  --c6: #c792ff; --c7: #e0c35a; --c8: #6aa9c9;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--wash); color: var(--text); font: 15px/1.5 var(--font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--wash); }
h1, h2, h3 { margin: 0; font-family: var(--font); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.025em; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
h3 { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
p { margin: 0 0 8px; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.ico { display: block; flex: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
* { scrollbar-width: thin; scrollbar-color: var(--chip) transparent; }

/* ------------------------------------------------------------------ cadre */
.shell { display: grid; grid-template-columns: 92px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 24px 0 16px; gap: 16px; z-index: 5; }
.side .logo { display: block; line-height: 0; border-radius: var(--r); padding: 6px 0 2px; }
/* Le logo est l'image d'origine, utilisée comme pochoir pour pouvoir prendre la teinte du thème. Il n'est jamais animé. */
.logo { filter: var(--glow); }
.mark { display: block; width: 70px; aspect-ratio: 379 / 199; background: var(--logo); -webkit-mask: none center / contain no-repeat; mask: url(/logo.png) center / contain no-repeat; }
.navs { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; scrollbar-width: none; }
.navs::-webkit-scrollbar { display: none; }
.nav { position: relative; flex: none; width: 72px; padding: 8px 2px; border: 0; background: none; border-radius: var(--r); display: grid; justify-items: center; gap: 3px; color: var(--muted); text-decoration: none; }
.nav .ic { position: relative; display: grid; place-items: center; width: 40px; height: 30px; }
.nav .lbl { font-size: 11px; font-weight: 500; line-height: 1.1; letter-spacing: .01em; white-space: nowrap; }
.nav:hover { color: var(--text); }
.nav.on { background: var(--tile); color: var(--text); }
.nav.on .ic { color: var(--accent); }
.side .nav.on::after { content: ""; position: absolute; right: -10px; top: 50%; width: 3px; height: 32px; margin-top: -16px; border-radius: 0; background: var(--accent); }
.count { position: absolute; top: -4px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-sm); background: var(--bad); color: #fff; font: 700 11px/18px var(--font); font-variant-numeric: tabular-nums; text-align: center; }
:root[data-theme="dark"] .count { color: #3a0d0b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .count { color: #3a0d0b; } }

.switch { position: relative; flex: none; width: 56px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--tile); color: var(--muted); }
.switch i { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--accent); transition: transform .18s ease; }
.switch[aria-checked="true"] i { transform: translateX(26px); }
.switch .ico { position: absolute; top: 6px; z-index: 1; }
.switch .ico:first-child { left: 6px; }
.switch .ico:last-child { right: 6px; }
.switch[aria-checked="false"] .ico:first-child, .switch[aria-checked="true"] .ico:last-child { color: var(--accent-ink); }

.tabbar { display: none; }
.main { padding: 32px 40px 64px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.head .titles { min-width: 0; }
.head .sub { color: var(--muted); margin-top: 8px; }
.head .titles { flex: 1; order: 1; }
/* les outils de la page passent sous le titre, le compte reste en haut à droite */
.head .right { order: 3; width: 100%; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.head .user { order: 2; margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; }
.bell { position: relative; width: 44px; height: 44px; border-radius: var(--r); background: var(--card); display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); }
.bell:hover { color: var(--text); }
.bell .count { top: -2px; right: -2px; }
.who { display: flex; align-items: center; gap: 12px; padding: 4px 16px 4px 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-align: left; }
.ava { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 700 15px var(--font); object-fit: cover; }
.who .id { display: grid; line-height: 1.15; }
.who .id b { font-weight: 700; }
.who .id span { font-size: 12px; color: var(--muted); }
.who > .ico { color: var(--muted); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 224px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); padding: 8px; display: grid; gap: 2px; }
.menu .mrow, .menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: var(--r-sm); text-decoration: none; text-align: left; }
.menu a:hover, .menu button:not(.switch):hover { background: var(--tile); }
.menu .mrow { justify-content: space-between; }
.menu .mrow .switch { width: 56px; padding: 0; }

/* ------------------------------------------------------------------ cartes */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; min-width: 0; }
.card > h2 { margin-bottom: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card > h2 .right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font: 400 14px var(--font); letter-spacing: 0; }
.card > h2 .right a { color: var(--link); font-weight: 600; text-decoration: none; }
.card > h2 .right a:hover { text-decoration: underline; }
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: 24px; }
.cols2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 24px; align-items: start; }
.col { display: grid; gap: 24px; min-width: 0; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kpi { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; border-radius: var(--r); }
.kpi b { flex: none; width: 64px; height: 64px; border-radius: var(--r); background: var(--badge); color: var(--badge-text); display: grid; place-items: center; font: 700 24px var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi b.long { font-size: 18px; }
.kpi span { color: var(--muted); font-size: 14px; line-height: 1.25; }
.kpi:hover span { color: var(--text); }
.kpi.hot b { box-shadow: inset 0 0 0 3px var(--bad); }
.kpi.wait b { box-shadow: inset 0 0 0 3px var(--warn); }

.donut { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ring { position: relative; flex: none; width: 150px; height: 150px; }
.ring svg { display: block; width: 100%; height: 100%; }
.ring .arc { fill: none; stroke-width: 12; transition: opacity .15s; }
.ring .hit { fill: none; stroke: transparent; stroke-width: 26; cursor: pointer; }
.ring.dim .arc:not(.hot) { opacity: .3; }
.ring .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.ring .mid b { font: 700 30px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ring .mid span { font-size: 12px; color: var(--muted); }
.legend { flex: 1; min-width: 170px; display: grid; gap: 4px; }
.legend a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); text-decoration: none; font-size: 14px; }
.legend a:hover, .legend a.hot { background: var(--tile); }
.legend .sw { flex: none; width: 10px; height: 10px; border-radius: 0; }
.legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.legend .zero { color: var(--muted); }
.legend .zero b { font-weight: 400; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { background: var(--tile); border-radius: var(--r); padding: 12px 16px; display: grid; gap: 4px; min-width: 0; }
.tile span { font-size: 12px; font-weight: 500; color: var(--muted); }
.tile b { font: 700 24px/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile em { font-style: normal; font-size: 12px; color: var(--muted); }
.meter { height: 6px; border-radius: 0; background: var(--track); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 0; background: var(--accent); }
.meter.ok i { background: var(--ok-fill); } .meter.warn i { background: var(--warn); } .meter.bad i { background: var(--bad); }
.pairs { display: grid; gap: 16px; margin-top: 16px; }
.pair { display: grid; gap: 6px; }
.pair > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.pair span { color: var(--muted); }
.pair b { font-variant-numeric: tabular-nums; text-align: right; }

.todo { display: grid; gap: 8px; }
.todo a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r); background: var(--tile); text-decoration: none; min-width: 0; }
.todo a:hover { background: var(--accent-soft); }
.todo .ic { flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--badge); color: var(--badge-text); display: grid; place-items: center; }
.todo .tx { min-width: 0; display: grid; line-height: 1.25; }
.todo .tx span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calm { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.calm .ic { flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--tile); color: var(--ok); display: grid; place-items: center; }

/* ------------------------------------------------------------------ tableaux */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px 12px; border-bottom: 1px solid var(--text); white-space: nowrap; }
td { padding: 12px; vertical-align: middle; border-bottom: 1px solid var(--line); }
tbody tr:nth-child(odd) td { background: transparent; }
td:first-child { border-radius: 0; }
td:last-child { border-radius: 0; }
tr.click { cursor: pointer; }
tr.click:hover td, tr.click:focus-visible td { background: var(--accent-soft); }
tr.click:focus-visible { outline: none; }
td a { color: var(--link); font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.scroll { overflow-x: auto; }
.empty { color: var(--muted); padding: 24px 8px; text-align: center; }

/* ------------------------------------------------------------------ boutons et champs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--tile); font-weight: 600; font-size: 14px; letter-spacing: .005em; text-decoration: none; white-space: nowrap; }
.card .btn, .modal .btn { background: var(--tile); }
.btn:hover { border-color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.1); border-color: var(--accent); }
.btn.danger { background: var(--chip); background: color-mix(in srgb, var(--bad) 10%, transparent); border-color: transparent; color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); }
.btn.small { min-height: 32px; padding: 4px 12px; border-radius: var(--r-sm); font-size: 13px; }
.btn.wide { width: 100%; padding: 12px 16px; }
.btn:disabled { opacity: .5; cursor: default; }
.head > .right > .btn:not(.primary), .head > .right input { background: var(--card); }
input[type=text], input[type=number], input[type=search], input[type=password], select, textarea { background: var(--card); border: 1px solid var(--field); border-radius: var(--r); padding: 9px 12px; min-width: 0; max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input[type=search] { min-width: 256px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
textarea { width: 100%; resize: vertical; min-height: 70px; }
label.f { display: grid; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .02em; min-width: 0; }
label.f > * { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--text); }
.check { display: flex; gap: 8px; align-items: center; }
.checks { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; padding-bottom: 9px; }
.row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.row > .grow { flex: 1; min-width: 170px; }
.acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.pill { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; letter-spacing: .01em; background: var(--chip); color: var(--text); white-space: nowrap; }
.pill.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }
.pill.bad { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); }
.pill.warn { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); }
.pill.info { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); }
.pill .sw { display: inline-block; width: 8px; height: 8px; border-radius: 0; margin-right: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chip); display: inline-block; margin-right: 8px; }
.dot.on { background: var(--ok-fill); }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; padding: 2px; margin: -2px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.on { background: none; color: var(--text); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ inventaires */
.inv { --s: 46px; --g: 5px; display: inline-grid; gap: var(--g); padding: 16px; background: var(--tile); border-radius: var(--r); max-width: 100%; }
.inv .line { display: grid; grid-template-columns: repeat(9, var(--s)); gap: var(--g); }
.inv .gap { height: 4px; }
.inv .cap { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.slot { --s: 46px; width: var(--s); height: var(--s); background: var(--slot); border: 1px solid var(--slot-line); border-radius: var(--r-sm); position: relative; display: grid; place-items: center; }
.inv .slot { --s: inherit; }
.slot.has { cursor: pointer; }
.slot.has:hover, .slot.has:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.slot img { width: calc(var(--s) * .7); height: calc(var(--s) * .7); image-rendering: pixelated; }
.slot .txt { font-size: 9px; line-height: 1.05; text-align: center; padding: 2px; overflow: hidden; max-height: calc(var(--s) - 6px); word-break: break-word; color: var(--muted); font-weight: 600; }
.slot .n { position: absolute; right: 4px; bottom: 1px; font: 700 12px var(--font); text-shadow: 0 0 2px var(--slot), 0 0 2px var(--slot), 0 0 3px var(--slot); font-variant-numeric: tabular-nums; }
.slot.special { border-color: var(--warn); }
.slot.special::after { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; border-radius: 0; background: var(--warn); }
.slot .bar { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; background: var(--track); border-radius: 0; }
.slot .bar i { display: block; height: 100%; border-radius: 0; background: var(--ok-fill); }
.slot.small, .inv .slot.small { --s: 34px; border-radius: var(--r-sm); }
.invwrap { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.invwrap h3 { margin-bottom: 8px; }
.equip { display: grid; grid-template-columns: repeat(5, var(--s)); gap: var(--g); }
.itemline { display: flex; align-items: center; gap: 10px; }
.delta { display: inline-flex; align-items: center; gap: 7px; padding: 2px 8px 2px 2px; border-radius: var(--r-sm); margin: 2px 4px 2px 0; cursor: pointer; background: var(--chip); }
.delta.plus { background: color-mix(in srgb, var(--ok) 10%, transparent); }
.delta.minus { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.delta.plus b { color: var(--ok); } .delta.minus b { color: var(--bad); }
.delta b { font-variant-numeric: tabular-nums; }

.tip { position: fixed; z-index: 70; pointer-events: none; background: #111214; color: #f2f2f0; border: 1px solid #2c2d32; border-radius: var(--r); padding: 8px 12px; max-width: min(320px, calc(100vw - 16px)); font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.tip b { display: block; } .tip .lore { color: #c9c1ff; font-style: italic; } .tip .ench { color: #a8d896; } .tip .id { color: #a3a5ab; font-size: 12px; margin-top: 4px; font-family: var(--mono); }

/* ------------------------------------------------------------------ fenêtres */
.modal-bg { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: start center; padding: 7vh 16px 16px; z-index: 40; overflow-y: auto; }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); width: min(640px, 100%); padding: 32px; display: grid; gap: 16px; }
.modal h2 { font-size: 20px; letter-spacing: -.02em; }
.modal p { margin: 0; }
.modal .foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal input[type=text], .modal input[type=search], .modal input[type=password], .modal select { width: 100%; }
.pick { display: flex; flex-wrap: wrap; gap: 5px; max-height: 200px; overflow-y: auto; padding: 8px; background: var(--tile); border-radius: var(--r); }
.chosen { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed var(--field); border-radius: var(--r); }
.sheet { display: grid; gap: 4px; }
.sheet a, .sheet button, .sheet .mrow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px; border: 0; background: none; border-radius: var(--r-sm); text-decoration: none; text-align: left; }
.sheet a.on { background: var(--tile); }
.sheet a.on .ico { color: var(--accent); }
.sheet .mrow { justify-content: space-between; }
.sheet .mrow .switch { width: 56px; padding: 0; }
.sheet hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; width: 100%; }

.toasts { position: fixed; right: 24px; bottom: 24px; display: grid; gap: 8px; z-index: 60; max-width: min(420px, calc(100vw - 48px)); }
.toast { background: var(--toast); color: var(--toast-text); padding: 12px 16px; border-radius: var(--r); box-shadow: var(--pop); border-left: 4px solid var(--accent); }
.toast.bad { border-left-color: var(--bad); }

/* ------------------------------------------------------------------ connexion */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; position: relative; }
.gate > .switch { position: absolute; top: 16px; right: 16px; background: var(--card); }
.gate-card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--r); padding: 40px 32px; width: min(420px, 100%); display: grid; gap: 16px; text-align: center; }
.gate-card .logo { display: block; }
.gate-card .mark { width: 128px; margin: 0 auto; }
.gate-card h1 { font-size: 28px; letter-spacing: -.025em; }
.gate-card p { margin: 0; color: var(--muted); }
.gate-card .fields { display: grid; gap: 8px; text-align: left; }
.gate-card .fields input:not([type=checkbox]) { width: 100%; padding: 12px 14px; }
.gate-card .check { font-size: 14px; color: var(--muted); }
.log { background: #111214; color: #e8e8e6; border-radius: var(--r); padding: 16px; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 70vh; overflow-y: auto; }
.snaplist { max-height: 560px; overflow-y: auto; }
.split { display: grid; grid-template-columns: minmax(256px, 328px) minmax(0, 1fr); gap: 24px; align-items: start; }
.noteitem { padding: 12px; border-radius: var(--r); background: var(--tile); margin-top: 8px; }
.note { color: var(--muted); font-size: 13.5px; margin: 0; }

/* ------------------------------------------------------------------ rôles et accès */
.rolelist { display: grid; gap: 8px; }
.rolerow { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: var(--r); background: var(--tile); flex-wrap: wrap; }
.rolerow .rk { flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--badge); color: var(--badge-text); display: grid; place-items: center; font: 700 16px var(--font); font-variant-numeric: tabular-nums; }
.rolerow .rn { flex: 1; min-width: 150px; display: grid; line-height: 1.3; }
.rolerow .rn span { font-size: 13px; color: var(--muted); }
.rolerow .rn b .pill { font-family: var(--font); }
.matrix th.tick, .matrix td.tick { text-align: center; width: 1%; white-space: nowrap; padding-left: 16px; padding-right: 16px; }
.matrix td.tick .v { display: grid; place-items: center; }
.matrix td.what { min-width: 230px; }
.matrix tr.sec td { background: none !important; padding: 16px 12px 4px; font: 600 12px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.matrix tbody tr:first-child.sec td { padding-top: 2px; }
.matrix input[type=checkbox] { width: 20px; height: 20px; cursor: pointer; }
.matrix input[type=checkbox]:disabled { cursor: not-allowed; opacity: .55; }
.matrix td.saved { box-shadow: inset 0 0 0 2px var(--ok-fill); border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ réglages */
.fields { display: grid; }
.field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.field:first-child { border-top: 0; padding-top: 4px; }
.field:last-child { padding-bottom: 0; }
.field.wide { grid-template-columns: minmax(0, 1fr); }
.field .lab { display: grid; gap: 2px; min-width: 0; }
.field .lab span { font-size: 13.5px; color: var(--muted); }
.field .lab em.ok { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ok); opacity: 0; height: 0; overflow: hidden; }
.field.saved .lab em.ok { animation: savedmark 1.8s ease; }
@keyframes savedmark { 0% { opacity: 0; height: 18px; } 12%, 75% { opacity: 1; height: 18px; } 100% { opacity: 0; height: 18px; } }
.field .ctl { min-width: 0; }
.field .ctl > input[type=text] { width: 100%; }
.field:not(.wide) .ctl > input[type=text] { width: min(320px, 46vw); }
input.short { width: 112px; }
input.toggle { appearance: none; -webkit-appearance: none; width: 52px; height: 30px; border-radius: var(--r); background: var(--track); position: relative; cursor: pointer; transition: background-color .18s ease; display: block; }
input.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--card); box-shadow: none; transition: transform .18s ease; }
input.toggle:checked { background: var(--accent); }
input.toggle:checked::after { transform: translateX(22px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: var(--r-sm); background: var(--tile); font-size: 14px; }
.chip button { width: 24px; height: 24px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font-size: 18px; line-height: 1; display: grid; place-items: center; }
.chip button:hover { background: var(--chip); color: var(--bad); }
.adder { display: inline-flex; gap: 6px; align-items: center; }
.adder input { width: 232px; }
.kv { display: grid; gap: 6px; max-width: 640px; }
.kvrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; align-items: center; padding: 4px 4px 4px 12px; border-radius: var(--r); background: var(--tile); }
.kvrow .k { display: grid; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.kvrow .k small { color: var(--muted); font-size: 12px; }
.kvrow.add { grid-template-columns: minmax(0, 1fr) auto auto; background: none; padding-left: 0; }
.kvrow input, .kvrow select { background: var(--card); }
.kvrow.add input, .kvrow.add select { background: var(--tile); }
.kvrow.add input[type=text] { width: 100%; }

/* ------------------------------------------------------------------ écrans moyens */
@media (max-width: 1240px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash > .aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 1000px) {
  .duo, .dash > .aside { grid-template-columns: minmax(0, 1fr); }
  /* une seule colonne : « À traiter » remonte juste sous les chiffres, l'état du serveur passe à la fin */
  .dash > .col { display: contents; }
  .dash > .col > * { order: 2; }
  .dash > .col:not(.aside) > :first-child { order: 0; }
  .dash .c-todo { order: 1; }
  .dash .c-srv { order: 3; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 860px) {
  body { font-size: 15px; }
  h1 { font-size: 24px; }
  .shell { display: block; }
  .side { display: none; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--side); border-top: 1px solid var(--line); border-radius: 0; }
  .tabbar .nav { width: auto; min-height: 52px; padding: 8px 2px 6px; }
  .tabbar .nav.on::after { content: ""; position: absolute; left: 50%; top: -5px; width: 32px; height: 3px; margin-left: -16px; border-radius: 0; background: var(--accent); }
  .main { padding: 16px 16px calc(88px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
  .head { gap: 12px; margin-bottom: 0; padding-bottom: 16px; }
  .head .right input[type=search] { flex: 1; min-width: 0; }
  .who { padding: 4px; }
  .who .id, .who > .ico { display: none; }
  .bell { width: 44px; height: 44px; }
  .card { padding: 16px; border-radius: var(--r); }
  .grid, .dash, .col, .duo { gap: 16px; }
  .cols2, .split { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
  .kpi { gap: 10px; }
  .kpi b { width: 52px; height: 52px; border-radius: var(--r); font-size: 20px; }
  .kpi b.long { font-size: 15px; }
  .kpi span { font-size: 13px; }
  .donut { justify-content: center; }
  .legend { flex-basis: 100%; }
  input[type=text], input[type=number], input[type=search], input[type=password], select, textarea { font-size: 16px; }
  label.f > * { font-size: 16px; }
  .btn { min-height: 44px; padding: 10px 16px; }
  .btn.small { min-height: 36px; padding: 6px 12px; }
  .row > .btn { flex: 1; }
  .row > .checks { flex-basis: 100%; padding-bottom: 2px; }

  .scroll { overflow: visible; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody { display: grid; gap: 0; }
  tr { background: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; }
  tbody tr:first-child { border-top: 1px solid var(--text); }
  tbody tr:nth-child(odd) td, tr.click:hover td { background: none; }
  tr.click:active { background: var(--accent-soft); }
  td, td:first-child, td:last-child { padding: 4px 0; border-radius: 0; border-bottom: 0; display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 10px; align-items: baseline; }
  td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
  td:not([data-label]) { grid-template-columns: minmax(0, 1fr); padding-top: 6px; }
  td.void { display: none; }
  td .v { min-width: 0; overflow-wrap: anywhere; }
  .num { white-space: normal; }
  .acts { justify-content: flex-start; }
  .matrix tr.sec { background: none; border: 0; padding: 8px 2px 0; }
  .matrix tr.sec td { display: block; padding: 0; }
  .matrix td.what { display: block; font-weight: 600; padding-bottom: 6px; min-width: 0; }
  .matrix td.tick { width: 100%; white-space: normal; text-align: left; padding: 4px 0; align-items: center; grid-template-columns: minmax(0, 1fr) auto; }
  .matrix td.tick .v { justify-items: end; }
  .matrix input[type=checkbox] { width: 24px; height: 24px; }
  .field { grid-template-columns: minmax(0, 1fr); }
  .field:not(.wide) { grid-template-columns: minmax(0, 1fr) auto; }
  .field:not(.wide) .ctl > input[type=text] { width: 100%; }
  .field:has(.ctl > input[type=text]) { grid-template-columns: minmax(0, 1fr); }
  .adder { display: flex; width: 100%; }
  .adder input { flex: 1; width: auto; min-width: 0; }
  .kvrow.add { grid-template-columns: minmax(0, 1fr) auto; }
  .kvrow.add .btn { grid-column: 1 / -1; }
  .rolerow .acts { width: 100%; }
  .snaplist { max-height: 300px; }

  .inv { --g: 3px; --s: clamp(24px, calc((100vw - 98px) / 9), 46px); padding: 8px; border-radius: var(--r); }
  .inv .slot { border-radius: var(--r-sm); }
  .slot .n { font-size: 11px; right: 2px; bottom: 0; }
  .invwrap { gap: 16px; }

  .modal-bg { place-items: end center; padding: 40px 0 0; }
  .modal { width: 100%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; border-radius: var(--r) var(--r) 0 0; border-width: 1px 0 0; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .modal .foot .btn { flex: 1; }
  .modal .inv { --s: clamp(22px, calc((100vw - 74px) / 9), 46px); }
  .toasts { left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); max-width: none; }
  .gate-card { padding: 32px 20px; }
  .menu { position: fixed; right: 16px; top: 72px; }
}
@media (max-width: 380px) {
  .nav .lbl { font-size: 10px; }
  td, td:first-child, td:last-child { grid-template-columns: 92px minmax(0, 1fr); }
}


/* ================================================================== mouvement
   Chargement, survol, clic, entrée des pages. Tout est coupé si l'appareil demande moins d'animations. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes sheet { from { transform: translateY(60px); opacity: .4; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@keyframes swing { 20% { transform: rotate(14deg); } 45% { transform: rotate(-11deg); } 70% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
@keyframes tabin { from { transform: scale(.2); opacity: 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- chargement : écran d'ouverture (logo fixe, seule la ligne bouge) et barre fine en haut pendant les échanges avec le serveur */
#splash { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 26px; background: var(--card); transition: opacity .3s ease, visibility .3s; }
#splash::before { content: ""; position: absolute; inset: 0; background: var(--wash); }
#splash > * { position: relative; }
#splash .mark { width: 148px; }
#splash.gone { opacity: 0; visibility: hidden; }
.loadline { display: block; width: 148px; height: 2px; border-radius: 0; background: var(--track); overflow: hidden; }
.loadline::after, #loadbar::after { content: ""; display: block; width: 40%; height: 100%; border-radius: 0; background: var(--accent); animation: slide 1.1s ease-in-out infinite; }
#loadbar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 90; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .2s; }
#loadbar::after { animation-play-state: paused; }
body.loading #loadbar { opacity: 1; }
body.loading #loadbar::after { animation-play-state: running; }
.log:empty, .skeleton { background: linear-gradient(90deg, var(--tile) 25%, var(--stripe) 45%, var(--tile) 65%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }

/* ---- bouton occupé : une roue remplace le texte le temps de l'action */
.btn, .tab { position: relative; overflow: hidden; --sp: var(--text); }
.btn.primary, .tab.on { --sp: var(--accent-ink); }
.btn.danger { --sp: var(--bad); }
.btn.busy { color: transparent !important; }
.btn.busy:disabled { opacity: .85; }
.btn.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid var(--sp); border-right-color: transparent; animation: spin .7s linear infinite; }

/* ---- clic : onde qui part du doigt, et léger enfoncement */
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); pointer-events: none; animation: ripple .55s ease-out forwards; }
.btn, .tab, .nav .ic, .kpi b, .slot, .tile, .todo a, .bell, .who, .who .ava, .legend a, .delta, .switch, .sheet a, .sheet button, .menu a, .menu button { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease; }
.btn:active:not(:disabled), .tab:active, .who:active, .bell:active, .switch:active, .delta:active { transform: scale(.96); }
.nav:active .ic, .kpi:active b, .slot.has:active, .todo a:active, .legend a:active { transform: scale(.94); }
tr.click:active td { background: var(--accent-soft); }

/* ---- survol */
@media (hover: hover) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
  .tab:hover { transform: translateY(-1px); }
  .nav:hover .ic { transform: translateY(-2px) scale(1.08); }
  .kpi:hover b { transform: translateY(-3px) rotate(-2deg); }
  .slot.has:hover { transform: scale(1.1); z-index: 1; }
  .tile:hover { transform: translateY(-2px); }
  .todo a:hover { transform: translateX(3px); }
  .legend a:hover .sw { transform: scale(1.5); }
  .bell:hover .ico { animation: swing .6s ease; transform-origin: 50% 10%; }
  .who:hover .ava { transform: scale(1.08); }
  .delta:hover { transform: translateY(-1px); }
  .card > h2 .right a, td a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .2s ease; padding-bottom: 2px; }
  .card > h2 .right a:hover, td a:hover { background-size: 100% 2px; text-decoration: none; }
}
td, .legend .sw { transition: background-color .15s ease, transform .15s ease; }
.ring .arc { transition: opacity .15s, stroke-width .15s; }
.ring .arc.hot { stroke-width: 16; }
input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
input:hover, select:hover, textarea:hover { border-color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: none; }

/* ---- ouverture des fenêtres, menus et messages */
.modal-bg { animation: fade .18s ease; }
.modal { animation: pop .24s cubic-bezier(.2, .8, .2, 1); }
.menu { animation: pop .16s ease; transform-origin: 100% 0; }
.toast { animation: rise .25s ease; }
@media (max-width: 860px) { .modal { animation-name: sheet; } }

/* ---- entrée d'une page (seulement quand on change de page, pas aux rafraîchissements) */
.shell.enter .main :is(.head, .tabs, .card, .note) { animation: rise .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.shell.enter .main > :nth-child(2):is(.tabs, .card, .note), .shell.enter .duo > :nth-child(2) { animation-delay: 70ms; }
.shell.enter .main > :nth-child(3), .shell.enter .col > :nth-child(2) { animation-delay: 130ms; }
.shell.enter .main > :nth-child(n+4), .shell.enter .col > :nth-child(3) .card { animation-delay: 190ms; }
.shell.enter .col > :nth-child(3) > :nth-child(2) { animation-delay: 250ms; }
.shell.enter .aside > :first-child { animation-delay: 110ms; }
.shell.enter .aside > :nth-child(2) { animation-delay: 220ms; }
.shell.enter .meter i { transform-origin: 0 50%; animation: grow .8s cubic-bezier(.2, .7, .2, 1) .25s backwards; }
.shell.enter .ring .arc { stroke-dasharray: 1; animation: draw .7s ease-out backwards; animation-delay: var(--d, 0ms); }
.shell.enter .side .nav.on::after, .shell.enter .tabbar .nav.on::after { animation: tabin .3s ease backwards; }
.shell.enter .kpi b { animation: pop .4s ease backwards; animation-delay: var(--d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .loadline::after, #loadbar::after { width: 100%; }
}


/* ================================================================== 1.5 : surveillance, navigation rapide, mouvement
   Mêmes règles que le reste : filets de 1 px, arrondis de 2 à 4 px, une seule couleur d'accent, grille de 8 px. */

/* ---- recherche (palette) dans l'en-tête */
.find { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--muted); font-size: 14px; }
.find:hover { color: var(--text); border-color: var(--text); }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--tile); color: var(--muted); font: 600 11px/18px var(--font); text-align: center; }
.find kbd { margin-left: 8px; }

/* ---- petit interrupteur (notifications) */
.switch.mini { width: 44px; height: 26px; }
.switch.mini i { width: 20px; height: 20px; background: var(--muted); }
.switch.mini[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch.mini[aria-checked="true"] i { transform: translateX(18px); background: var(--accent-ink); }

/* ---- « En direct » : un point qui respire */
.live { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ok); }
.live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-fill); flex: none; }
.live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok-fill); animation: breathe 2s var(--ease) infinite; }
.live.paused { color: var(--muted); }
.live.paused i, .live.paused i::after { background: var(--muted); animation: none; }
.card > h2 .live { font-size: 17px; color: var(--text); }
@keyframes breathe { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3); opacity: 0; } }

/* ---- coordonnées cliquables */
.pos { display: inline; padding: 0; border: 0; background: none; font: inherit; font-variant-numeric: tabular-nums; color: inherit; text-align: left; border-bottom: 1px dashed var(--field); }
.pos:hover { color: var(--link); border-bottom-color: var(--link); }
.pos .w { color: var(--muted); }
.ping.ok { color: var(--ok); } .ping.warn { color: var(--warn); } .ping.bad { color: var(--bad); }

/* ---- tri des tableaux */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th .arrow { display: inline-block; width: 8px; height: 8px; margin-left: 6px; vertical-align: 1px; opacity: 0; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s var(--ease), opacity .2s; }
th.sortable:hover .arrow { opacity: .4; }
th[aria-sort="ascending"] .arrow { opacity: 1; transform: rotate(-135deg) translate(-2px, -2px); }
th[aria-sort="descending"] .arrow { opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--text); }

/* ---- bandeau de chiffres */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); border-top: 1px solid var(--line); margin-top: 16px; }
.strip > div { display: grid; gap: 2px; padding: 16px 16px 0 0; }
.strip > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.card > .strip:first-child, .card > h2 + .strip { margin-top: 0; border-top: 0; }
.card > h2 + .strip > div { padding-top: 0; }
.strip b { font: 700 28px/1.1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.strip span { font-size: 12px; color: var(--muted); }

/* ---- courbes */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.chart-card { min-width: 0; }
.charts > .chart-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px 16px; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chart-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.chart-label .sw { width: 10px; height: 10px; }
.chart-now { font: 700 22px/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chart { position: relative; }
.plot { position: relative; height: 140px; touch-action: pan-y; cursor: crosshair; }
.plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.plot .grid-l { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plot .limit { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .7; }
.plot .area { opacity: .1; stroke: none; }
.plot .stroke { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.plot .cursor { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: var(--text); opacity: .35; pointer-events: none; }
.plot .dot-c { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--card); pointer-events: none; transition: left .08s linear, top .08s linear; }
.plot .ylab { position: absolute; left: 0; font-size: 11px; color: var(--muted); background: var(--card); padding: 0 4px 0 0; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; }
.plot .ylab.top { top: -2px; } .plot .ylab.bottom { bottom: -2px; }
.xlab { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-empty { display: grid; place-items: center; height: 140px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--muted); font-size: 13px; text-align: center; padding: 16px; }
.c-trend .chart-card { margin-top: 4px; }
.c-trend .chart-head { display: none; }
.spark { display: block; width: 100%; height: 32px; }
.spark .area { opacity: .12; } .spark .stroke { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ---- barres par jour */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; border-bottom: 1px solid var(--text); }
.bars.short { height: 96px; }
.bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.bar-col:hover { background: var(--accent-soft); }
.bar-stack { width: 100%; min-height: 0; display: flex; flex-direction: column-reverse; transform-origin: 50% 100%; }
.bar-stack i { display: block; min-height: 2px; }

/* ---- filtres en pastilles */
.fchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--muted); font-size: 13px; font-weight: 600; }
.fchip:hover { color: var(--text); border-color: var(--text); }
.fchip.on { background: var(--text); border-color: var(--text); color: var(--card); }
.fchip .n { font-weight: 500; font-variant-numeric: tabular-nums; opacity: .75; }
.fchip .sw { width: 8px; height: 8px; display: inline-block; }
.fcheck { margin-left: auto; font-size: 13px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 2px; }
.seg button { min-height: 36px; padding: 4px 14px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font-weight: 600; font-size: 13px; transition: background-color .2s var(--ease), color .2s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--text); color: var(--card); }
.tiles6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---- fil d'activité */
.feed { list-style: none; margin: 0; padding: 0; }
.feed .day { position: sticky; top: 0; z-index: 1; padding: 12px 0 8px; background: var(--card); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--text); }
.feed .day:first-child { padding-top: 0; }
.ev { display: grid; grid-template-columns: 64px 28px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ev time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ev-ic { align-self: center; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--tile); color: var(--muted); }
.ev.ok .ev-ic { color: var(--ok); } .ev.info .ev-ic { color: var(--info); } .ev.warn .ev-ic { color: var(--warn); } .ev.bad .ev-ic { color: var(--bad); }
.ev-body { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; overflow-wrap: anywhere; }
.ev-body > b a { color: var(--text); }
.said { quotes: "« " " »"; }
.cmd { font: 13px/1.4 var(--mono); padding: 1px 6px; border-radius: var(--r-sm); background: var(--tile); }
.said.blocked, .cmd.blocked { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--bad); }
.pill.tiny { padding: 0 6px; font-size: 11px; }
.ev .pos { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ev.new { animation: evin .6s var(--ease) both; }
@keyframes evin { from { opacity: 0; transform: translateY(-8px); background: var(--accent-soft); } 40% { opacity: 1; transform: none; background: var(--accent-soft); } to { background: transparent; } }
.c-feed .feed { max-height: 420px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
/* colonne étroite : l'icône à gauche, le texte, puis l'heure dessous */
.c-feed .ev, .ev.narrow { grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; }
.c-feed .ev-ic { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.c-feed .ev-body { grid-column: 2; grid-row: 1; }
.c-feed .ev time { grid-column: 2; grid-row: 2; }
.c-feed .ev > :last-child:not(.ev-body) { display: none; }
.tile { padding: 12px; }
.newer { display: block; width: 100%; min-height: 40px; margin: -4px 0 12px; border: 1px solid var(--accent); border-radius: var(--r); background: var(--accent-soft); color: var(--link); font-weight: 600; animation: pop .25s var(--ease); }
.feed-box + .btn.wide { margin-top: 16px; }

/* ---- journal du serveur */
.logbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.logbar .fchips { margin: 0; }
.logbar input[type=search] { min-width: 0; flex: 1; max-width: 320px; }
.log { min-height: 200px; }
.log .ln { padding: 0 8px; margin: 0 -8px; white-space: pre-wrap; }
.log .ln.warn { color: #f0c36a; background: rgba(240, 180, 90, .08); }
.log .ln.err { color: #ff9a92; background: rgba(255, 127, 118, .1); }

/* ---- palette de commandes */
.palette-bg { position: fixed; inset: 0; z-index: 80; background: var(--scrim); display: grid; place-items: start center; padding: 12vh 16px 16px; animation: fade .15s ease; }
.palette { width: min(600px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); overflow: hidden; animation: pop .22s var(--ease); }
.palette-in { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette-in input[type=search] { flex: 1; min-width: 0; height: 56px; border: 0; background: none; padding: 0; font-size: 17px; outline: none; box-shadow: none; }
.palette-in input:focus { outline: none; box-shadow: none; }
.palette-in input::-webkit-search-cancel-button { display: none; }
.palette-list { list-style: none; margin: 0; padding: 8px; max-height: min(420px, 55vh); overflow-y: auto; }
.palette-list .pg { padding: 12px 8px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.palette-list .empty-p { text-transform: none; letter-spacing: 0; font-size: 14px; padding: 16px 8px; }
.pi { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--r-sm); cursor: pointer; }
.pi.on { background: var(--text); color: var(--card); }
.pi-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--tile); color: var(--muted); flex: none; }
.pi.on .pi-ic { background: transparent; color: inherit; }
.pi-tx { display: grid; line-height: 1.25; }
.pi-tx small { font-size: 12px; opacity: .7; }
.palette-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.palette-foot kbd { margin-right: 2px; }

/* ---- messages : barre de vie, sortie, alerte entrante */
.toast { position: relative; overflow: hidden; cursor: pointer; }
.toast .life { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .35; transform-origin: 0 50%; animation: life var(--life, 4500ms) linear forwards; }
.toast.out { animation: toastout .22s var(--ease) forwards; }
.toast-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.toast-alert b { width: 100%; }
.toast-alert span { flex: 1; min-width: 0; }
.toast-alert .btn { background: transparent; color: inherit; border-color: currentColor; }
@keyframes life { to { transform: scaleX(0); } }
@keyframes toastout { to { opacity: 0; transform: translateX(24px); } }

/* ---- fenêtres : sortie douce ; poignée de la feuille sur téléphone */
.modal-bg.out { animation: fade .2s ease reverse forwards; }
.modal-bg.out .modal { animation: pop .2s ease reverse forwards; }
.modal .grab { display: none; }

/* ---- badges et chiffres qui changent */
.count.bump { animation: bump .45s var(--spring); }
b.bump { animation: flash 1.2s var(--ease); }
@keyframes bump { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
@keyframes flash { 0%, 30% { color: var(--link); } }
.unread { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }

/* ---- squelette pendant le chargement */
.skel-head { display: grid; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.skel-head i, .card.skel i { display: block; height: 14px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--tile) 25%, var(--stripe) 45%, var(--tile) 65%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
.skel-head i:first-child { height: 32px; }
.card.skel { display: grid; gap: 16px; min-height: 160px; animation: fade .3s ease; }

/* ---- connexion perdue */
#offline { position: fixed; left: 50%; top: 12px; z-index: 95; transform: translate(-50%, -150%); padding: 8px 16px; border-radius: var(--r); background: var(--bad); color: #fff; font-weight: 600; font-size: 13px; box-shadow: var(--pop); transition: transform .3s var(--ease), visibility .3s; visibility: hidden; pointer-events: none; }
:root[data-theme="dark"] #offline { color: #3a0d0b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #offline { color: #3a0d0b; } }
body.offline #offline { transform: translate(-50%, 0); visibility: visible; }

/* ---- thème : révélation en cercle depuis le bouton */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: reveal .55s var(--ease); }
@keyframes reveal { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 0)); } to { clip-path: circle(var(--vr, 150vmax) at var(--vx, 50%) var(--vy, 0)); } }

/* ---- entrées des nouveaux éléments */
.chart.fresh .stroke { stroke-dasharray: 1; animation: draw 1s var(--ease) backwards; }
.chart.fresh .area { animation: fadeArea .9s ease .3s backwards; }
.spark.fresh .stroke { stroke-dasharray: 1; animation: draw .9s var(--ease) backwards; }
@keyframes fadeArea { from { opacity: 0; } }
.bars.fresh .bar-stack { animation: rise-y .6s var(--ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes rise-y { from { transform: scaleY(0); } }
.shell.enter .main :is(.charts > .chart-card) { animation: rise .45s var(--ease) backwards; }
.shell.enter .charts > :nth-child(2) { animation-delay: 60ms; } .shell.enter .charts > :nth-child(3) { animation-delay: 120ms; }
.shell.enter .charts > :nth-child(4) { animation-delay: 180ms; } .shell.enter .charts > :nth-child(n+5) { animation-delay: 240ms; }
.shell.enter .strip > div { animation: rise .5s var(--ease) backwards; }
.shell.enter .strip > :nth-child(2) { animation-delay: 50ms; } .shell.enter .strip > :nth-child(3) { animation-delay: 100ms; }
.shell.enter .strip > :nth-child(4) { animation-delay: 150ms; } .shell.enter .strip > :nth-child(n+5) { animation-delay: 200ms; }
.shell.enter .feed .ev { animation: rise .4s var(--ease) backwards; }
.shell.enter .feed .ev:nth-child(-n+4) { animation-delay: 80ms; } .shell.enter .feed .ev:nth-child(n+5) { animation-delay: 160ms; }
.tab { position: relative; }
.tab.on { border-bottom-color: transparent; }
.tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: 50% 50%; animation: grow .35s var(--ease); }

/* ---- survol des cartes sur ordinateur */
@media (hover: hover) {
  .card, .charts > .chart-card { transition: border-color .2s ease; }
  .card:hover, .charts > .chart-card:hover { border-color: color-mix(in srgb, var(--line) 50%, var(--muted)); }
  .fchip:hover, .seg button:hover { transform: translateY(-1px); }
  .ev:hover { background: var(--stripe); }
  .pos:hover .w { color: var(--link); }
}
.fchip, .seg button, .find, .pos, .pi { transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease; }
.fchip:active, .seg button:active, .find:active { transform: scale(.96); }

/* ---- écrans moyens et téléphone */
@media (max-width: 1240px) { .find span, .find kbd { display: none; } .find { width: 44px; justify-content: center; padding: 0; } }
@media (max-width: 860px) {
  .head .user { gap: 8px; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip > div { padding: 12px 8px 12px 0; }
  .strip > div + div { padding-left: 12px; }
  .strip > :nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .strip > :nth-child(n+4) { border-top: 1px solid var(--line); }
  .strip b { font-size: 22px; }
  .charts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .charts > .chart-card { padding: 16px; }
  .plot { height: 120px; }
  .ev { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 12px; }
  .ev-ic { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .ev-body { grid-column: 2 / span 2; grid-row: 1; }
  .ev time { grid-column: 2; grid-row: 2; }
  .ev > :last-child:not(.ev-body) { grid-column: 3; grid-row: 2; justify-self: end; }
  .fchips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px; scrollbar-width: none; }
  .fchips::-webkit-scrollbar { display: none; }
  .fchip { flex: none; min-height: 36px; }
  .fcheck { flex: none; margin-left: 0; }
  .logbar input[type=search] { max-width: none; flex-basis: 100%; }
  .head .right .seg { width: 100%; }
  .seg button { flex: 1; min-height: 40px; }
  .bars { gap: 2px; }
  .palette-bg { padding: 8px; place-items: start stretch; }
  .palette { width: 100%; }
  .palette-foot { display: none; }
  .modal .grab { display: block; width: 40px; height: 4px; margin: -12px auto 4px; border-radius: 2px; background: var(--line); }
  .head .right > .btn { flex: 1 1 auto; }
  .head .right input[type=search] { flex-basis: 100%; }
}