/* ---------- Design tokens ---------------------------------------------------
   Deep dark is the default (set on <html> before first paint, see index.html); [data-theme="light"] is the clean light theme.
   Rules: docs/NEXUS-UIUX-DESIGN-SYSTEM.md */
:root {
  color-scheme: light;
  --bg: #f5f6fa;
  --bg-2: #eceef5;
  --surface: #ffffff;
  --surface-2: #eff1f6;
  --surface-3: #e5e8f0;
  --text: #0f1220;
  --muted: #5a6075;
  --line: rgb(15 18 32 / 0.08);
  --line-strong: rgb(15 18 32 / 0.16);
  --accent: #5b4cf0;
  --accent-strong: #4a3bd9;
  --accent-text: #ffffff;
  --accent-soft: #ecebfe;
  --on-accent-soft: #3b2fb8;
  --user: linear-gradient(135deg, #6d5cff, #4f46e5);
  --user-text: #ffffff;
  --ok: #128a44;
  --warn: #a35205;
  --bad: #c0261b;
  --info: #1f5ae0;
  --ok-soft: #e2f6e9;
  --warn-soft: #fdf0dd;
  --bad-soft: #fdebea;
  --info-soft: #e6eefe;
  --shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 4px 14px rgb(16 24 40 / 0.06);
  --shadow-lg: 0 18px 50px rgb(16 24 40 / 0.18);
  --skel: #e6e8ef;
  --skel-hi: #f4f5f9;
  --ring: color-mix(in srgb, var(--accent) 55%, transparent);
  --hi: inset 0 1px 0 rgb(255 255 255 / 0.7);

  /* spacing (4 px grid), radius, type */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px;
  --fs-xs: 13px; --fs-sm: 14px; --fs: 16px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 26px; --fs-display: 34px;
  --nav-h: 76px;
  --tap: 44px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* motion: short durations; « spring » = soft settle with a tiny overshoot (linear() below when supported) */
  --dur-fast: 140ms; --dur: 260ms; --dur-panel: 460ms; --dur-screen: 380ms;
  --spring: cubic-bezier(0.2, 0.9, 0.3, 1.04);
  /* signature: violet → cyan, used for the logo, the hero and the main buttons */
  --accent-2: #0891b2;
  --signature: linear-gradient(135deg, #7c5cff 0%, #4f7bff 50%, #22c3e6 100%);
  --aurora-1: rgb(124 92 255 / 0.22); --aurora-2: rgb(34 195 230 / 0.18); --aurora-3: rgb(255 120 180 / 0.12);
  /* glass: only on layers that float above content (bars, panels, toast) */
  --glass: rgb(255 255 255 / 0.72);
  --glass-strong: rgb(255 255 255 / 0.9);
  --glass-line: rgb(255 255 255 / 0.7);
  --scrim: rgb(15 18 30 / 0.36);

  /* depth (3D): one light from the top left, four planes (background, surface, floating, front), one perspective.
     Shadows fall to the bottom right; a plane changes only for a reason (touched, opened). See NEXUS-3D-MASCOTTE.md §2. */
  --persp: 900px;
  --tilt-max: 8deg;
  --press-scale: 0.96;
  --plane-surface: 0 1px 2px rgb(16 24 40 / 0.05), 3px 6px 16px -4px rgb(16 24 40 / 0.10);
  --plane-float: 0 2px 6px rgb(16 24 40 / 0.06), 6px 14px 32px -8px rgb(16 24 40 / 0.18);
  --plane-front: 0 4px 12px rgb(16 24 40 / 0.08), 10px 28px 60px -12px rgb(16 24 40 / 0.28);
  --relief-hi: inset 0 1px 0 rgb(255 255 255 / 0.8), inset 0 -1px 0 rgb(16 24 40 / 0.05);
  --relief-face: linear-gradient(160deg, color-mix(in srgb, #fff 55%, var(--surface)) 0%, var(--surface) 55%, color-mix(in srgb, #1b2140 3%, var(--surface)) 100%);
  --hollow: inset 1px 2px 4px rgb(16 24 40 / 0.10), inset 0 0 0 1px var(--line);
  --pressed: inset 1px 2px 6px rgb(16 24 40 / 0.16);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1, 1.077 30.6%, 1.006 39.1%, 0.98 45.2%, 0.982 51%, 0.999 60.3%, 1.003 69.4%, 1); }
}
/* « Taille du texte : plus grande » (Settings > Apparence) */
:root[data-text="large"] { --fs-xs: 14px; --fs-sm: 15px; --fs: 18px; --fs-md: 19px; --fs-lg: 22px; --fs-xl: 28px; --fs-display: 36px; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #060916;
  --bg-2: #0a0f20;
  --surface: #0f1530;
  --surface-2: #161d3d;
  --surface-3: #1f2850;
  --text: #f1f2f7;
  --muted: #9aa0b4;
  --line: rgb(255 255 255 / 0.07);
  --line-strong: rgb(255 255 255 / 0.14);
  --accent: #9b8cff;
  --accent-strong: #b4a8ff;
  --accent-text: #0b0920;
  --accent-soft: rgb(155 140 255 / 0.14);
  --on-accent-soft: #cfc8ff;
  --user: linear-gradient(135deg, #6d5cff, #4f46e5);
  --user-text: #ffffff;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --info: #7cb4ff;
  --ok-soft: rgb(74 222 128 / 0.12);
  --warn-soft: rgb(251 191 36 / 0.12);
  --bad-soft: rgb(248 113 113 / 0.13);
  --info-soft: rgb(124 180 255 / 0.13);
  --shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.6);
  --skel: #161925;
  --skel-hi: #22263a;
  --hi: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --accent-2: #22d3ee;
  --aurora-1: rgb(124 92 255 / 0.30); --aurora-2: rgb(34 195 230 / 0.20); --aurora-3: rgb(236 72 153 / 0.14);
  --glass: rgb(12 17 38 / 0.68);
  --glass-strong: rgb(14 19 42 / 0.92);
  --glass-line: rgb(255 255 255 / 0.08);
  --scrim: rgb(0 0 0 / 0.6);
  --plane-surface: inset 0 1px 0 rgb(255 255 255 / 0.05), 3px 8px 22px -6px rgb(0 0 0 / 0.55);
  --plane-float: inset 0 1px 0 rgb(255 255 255 / 0.06), 6px 16px 36px -10px rgb(0 0 0 / 0.65);
  --plane-front: inset 0 1px 0 rgb(255 255 255 / 0.07), 10px 30px 70px -14px rgb(0 0 0 / 0.75);
  --relief-hi: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 -1px 0 rgb(0 0 0 / 0.35);
  --relief-face: linear-gradient(160deg, color-mix(in srgb, #9fb0ff 7%, var(--surface)) 0%, var(--surface) 55%, color-mix(in srgb, #000 18%, var(--surface)) 100%);
  --hollow: inset 1px 2px 5px rgb(0 0 0 / 0.45), inset 0 0 0 1px var(--line);
  --pressed: inset 1px 2px 8px rgb(0 0 0 / 0.5);
}

/* ---------- Base ---------------------------------------------------------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow-x: hidden;
  font: var(--fs)/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { text-wrap: balance; line-height: 1.25; }
p { text-wrap: pretty; margin: var(--s2) 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--accent-soft); color: var(--text); }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }
.emoji-ico { font-size: 1.1em; line-height: 1; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Shell: top bar, segmented control, floating bottom bar --------- */
#app { display: flex; flex-direction: column; height: var(--app-h, 100dvh); position: relative; isolation: isolate; }
.topbar { display: flex; align-items: center; gap: var(--s3); position: relative; z-index: 6;
  padding: calc(var(--s2) + env(safe-area-inset-top)) var(--s2) var(--s2) var(--s4); view-transition-name: topbar;
  transition: background-color var(--dur) var(--ease); }
:root[data-scrolled] .topbar { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 1px 0 var(--line); }
.topbar > .logo { width: 34px; height: 34px; border-radius: 11px; background: var(--signature); color: #fff; flex: none;
  display: grid; place-items: center; box-shadow: 0 6px 18px color-mix(in srgb, #7c5cff 40%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.35); }
.topbar > .logo .ico { width: 20px; height: 20px; stroke-width: 2.3; }
.top-title { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; view-transition-name: top-title; }
:root[data-space="home"] .top-title { background: linear-gradient(100deg, var(--text) 30%, color-mix(in srgb, var(--accent) 70%, var(--text)));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.top-actions { display: flex; align-items: center; gap: var(--s1); }
.icon-btn { width: var(--tap); height: var(--tap); border-radius: var(--r-full); border: 0; background: transparent;
  color: var(--text); display: inline-grid; place-items: center; flex: none;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur) var(--spring); }
.icon-btn:active { background: var(--surface-2); transform: scale(0.9); }
.icon-btn .ico { width: 22px; height: 22px; }
.top-actions .icon-btn { background: var(--surface-2); box-shadow: var(--hi); }
@keyframes spin { to { transform: rotate(360deg); } }

/* segmented control of a space (« Travail » : À valider · Missions · Tableaux) */
.segments { position: relative; z-index: 5; display: flex; gap: 2px; margin: 0 var(--s4) var(--s2); padding: 4px;
  border-radius: var(--r-full); background: var(--surface-2); box-shadow: var(--hollow); view-transition-name: segments; }
.segments button { position: relative; z-index: 1; flex: 1; min-width: 0; min-height: 44px; border: 0; background: none;
  border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 650; color: var(--muted); display: inline-flex;
  align-items: center; justify-content: center; gap: 6px; transition: color var(--dur) var(--ease); }
.segments button.active { color: var(--text); }
.segments button:active .seg-label { transform: scale(0.95); }
.seg-label { transition: transform var(--dur) var(--spring); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--bad); color: #fff;
  font-size: 11px; font-weight: 750; line-height: 20px; }
.seg-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--r-full);
  background: var(--relief-face); box-shadow: var(--plane-surface), var(--relief-hi); opacity: 0; }
:root[data-theme="dark"] .seg-ind { background: linear-gradient(160deg, color-mix(in srgb, #9fb0ff 10%, var(--surface-3)), var(--surface-3) 60%, color-mix(in srgb, #000 15%, var(--surface-3))); }
.seg-ind.ready { opacity: 1; transition: transform var(--dur-panel) var(--spring), width var(--dur-panel) var(--spring); }

#views { flex: 1; min-height: 0; position: relative; view-transition-name: main; }
.view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  padding: var(--s1) var(--s4) calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--s6));
  display: none; overscroll-behavior: contain; scrollbar-width: none; }
.view::-webkit-scrollbar { display: none; }
.view.active { display: block; }
.view.chat { display: none; flex-direction: column; padding: 0 0 calc(var(--nav-h) + env(safe-area-inset-bottom)); overflow: hidden; }
.view.chat.active { display: flex; }
/* keyboard up (app.js, fitKeyboard): the bottom bar steps aside so the text box keeps its room */
:root[data-keyboard] .nav { display: none; }
:root[data-keyboard] .view.chat { padding-bottom: 0; }
:root[data-keyboard] .view { padding-bottom: var(--s5); }

/* floating glass bottom bar with a sliding highlight */
.nav { position: fixed; z-index: 30; left: var(--s3); right: var(--s3); bottom: calc(var(--s2) + env(safe-area-inset-bottom));
  display: flex; height: 64px; padding: 6px; border-radius: 24px; background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid var(--glass-line); box-shadow: var(--plane-float), var(--hi); view-transition-name: nav; max-width: 560px; margin: 0 auto; }
:root[data-space="login"] .nav, :root[data-space="login"] .topbar, :root[data-space="login"] .segments { display: none; }
.nav button { position: relative; z-index: 1; flex: 1; min-width: 0; border: 0; background: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; font-weight: 650; color: var(--muted); padding: 0;
  border-radius: 18px; transition: color var(--dur) var(--ease); }
.nav .pill { position: relative; width: 44px; height: 28px; display: grid; place-items: center; transition: transform var(--dur) var(--spring); }
.nav .pill .ico { width: 23px; height: 23px; stroke-width: 1.9; transition: stroke-width var(--dur) var(--ease); }
.nav button.active { color: var(--text); }
.nav button.active .pill { transform: translateY(-1px); }
.nav button.active .pill .ico { stroke-width: 2.3; color: var(--accent); }
.nav button:active .pill { transform: scale(0.86); }
.nav button:focus-visible { outline-offset: -4px; }
.nav .label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.nav-ind { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 18px; opacity: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 24%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface)));
  box-shadow: 2px 4px 10px -4px color-mix(in srgb, var(--accent) 45%, transparent), var(--relief-hi), inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.nav-ind.ready { opacity: 1; transition: transform var(--dur-panel) var(--spring), width var(--dur-panel) var(--spring); }
.nav .count { position: absolute; top: -5px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full);
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 750; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--glass-strong); animation: pop var(--dur-panel) var(--spring); }
.nav button.live .pill::after { content: ""; position: absolute; top: 0; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--info); box-shadow: 0 0 0 2px var(--glass-strong); }
:root[data-motion="full"] .nav button.live .pill::after { animation: breathe 1.8s ease-in-out infinite; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } }
@keyframes breathe { 50% { opacity: 0.35; transform: scale(0.8); } }

/* ---------- Page structure ------------------------------------------------ */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: var(--s2) var(--s1) 0; }
.page-head h2 { margin: 0; font-size: var(--fs-xl); letter-spacing: -0.015em; }
.page-sub { margin: var(--s1) var(--s1) var(--s3); color: var(--muted); font-size: var(--fs-sm); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4);
  margin: var(--s3) 0; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 var(--s2); font-size: var(--fs-md); font-weight: 650; display: flex; align-items: center; gap: var(--s2); }
.card h3 .ico { color: var(--accent); }
.card > p:first-of-type { margin-top: 0; }
.card.tinted-bad { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: var(--bad-soft); }
.muted { color: var(--muted); font-size: var(--fs-sm); }
.row { display: flex; gap: var(--s2); align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack > * + * { margin-top: var(--s3); }
.gap { height: var(--s3); }
.center { text-align: center; }

/* ---------- Controls ------------------------------------------------------ */
.btn { border: 0; border-radius: var(--r); padding: 0 var(--s5); min-height: 48px; background: var(--accent); color: var(--accent-text);
  font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  transition: transform 120ms var(--ease), background-color 150ms var(--ease), opacity 150ms; text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn.secondary { background: var(--accent-soft); color: var(--on-accent-soft); }
.btn.outline { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.btn.danger { background: transparent; color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 55%, transparent); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.block { width: 100%; }
.btn.busy::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor;
  border-right-color: transparent; animation: spin 0.8s linear infinite; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.btn-row > .btn { flex: 1 1 140px; }
.btn-row.stack > .btn { flex-basis: 100%; }
.ghost { border: 0; background: none; color: var(--accent); padding: 0 var(--s3); min-height: var(--tap);
  display: inline-flex; align-items: center; gap: var(--s1); border-radius: var(--r-sm); font-weight: 600; text-decoration: none; }
.ghost:active { background: var(--accent-soft); }
.small { font-size: var(--fs-sm); }
input[type=text], input[type=password], input[type=number], textarea, select {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 0 var(--s3); min-height: 48px;
  background: var(--surface-2); transition: border-color 150ms; }
textarea { padding: var(--s3); line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
label.field { display: block; margin: var(--s4) 0 var(--s1); font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.field-help { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; padding: var(--s1) 0; cursor: pointer; }
.switch + .switch { border-top: 1px solid var(--line); }
.switch .txt { min-width: 0; }
.switch .txt small { display: block; color: var(--muted); font-size: var(--fs-sm); }
input.toggle { appearance: none; -webkit-appearance: none; width: 52px; height: 32px; border-radius: var(--r-full); flex: none;
  background: var(--line-strong); position: relative; margin: 0; cursor: pointer; transition: background-color 180ms var(--ease); }
input.toggle::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); transition: transform 180ms var(--ease); }
input.toggle:checked { background: var(--accent); }
input.toggle:checked::after { transform: translateX(20px); background: var(--accent-text); }
:root[data-theme="dark"] input.toggle:not(:checked)::after { background: #c9cdd8; }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); padding: var(--s1);
  background: var(--surface-2); border-radius: var(--r); border: 0; margin: var(--s2) 0 0; }
.segmented label { min-height: var(--tap); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); cursor: pointer; position: relative;
  transition: background-color 150ms, color 150ms; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
:root[data-theme="dark"] .segmented label:has(input:checked) { background: var(--accent-soft); color: var(--on-accent-soft); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--ring); }

/* ---------- Status chips ---------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; background: var(--surface-2); color: var(--muted); flex: none; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.plain::before { display: none; }
.st-proposee { background: var(--accent-soft); color: var(--on-accent-soft); }
.st-en_attente, .st-en_cours { background: var(--info-soft); color: var(--info); }
.st-terminee { background: var(--ok-soft); color: var(--ok); }
.st-a_verifier { background: var(--warn-soft); color: var(--warn); }
.st-echouee { background: var(--bad-soft); color: var(--bad); }
.st-annulee { background: var(--surface-2); color: var(--muted); }
.ok-text { color: var(--ok); } .bad-text { color: var(--bad); } .warn-text { color: var(--warn); }

/* ---------- Lists --------------------------------------------------------- */
.list { margin: 0 calc(-1 * var(--s2)); }
.list-item { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s2); min-height: 60px;
  border-bottom: 1px solid var(--line); content-visibility: auto; contain-intrinsic-size: auto 64px; }
.list-item:last-child { border-bottom: 0; }
button.list-item, .list-item.tap { width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left;
  border-radius: 0; cursor: pointer; transition: background-color 120ms; }
button.list-item:last-child { border-bottom: 0; }
button.list-item:active { background: var(--surface-2); }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .lead { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--muted);
  display: grid; place-items: center; flex: none; }
.list-item .trail { color: var(--muted); flex: none; }
.list-item .title { font-weight: 600; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* « Déposés pour vous » (files module) */
.depot-help { margin: 0 0 var(--s2); }
.depot .list + .depot-help, .depot .list + .warn-text { margin: var(--s2) 0 0; }
.depot-title { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.depot-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.depot-note { color: var(--text); margin-top: 2px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.list-item .lead.fresh { background: var(--accent-soft); color: var(--on-accent-soft); }
.icon-btn.accent { color: var(--accent); }
.section-label { margin: var(--s4) var(--s1) var(--s2); font-size: var(--fs-sm); font-weight: 650; color: var(--muted); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* ---------- Feedback: toast, banner, skeleton, empty ------------------------ */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--s3)); transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: var(--s3) var(--s4); border-radius: var(--r); width: max-content;
  max-width: calc(100vw - 32px); z-index: 60; font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--shadow-lg);
  animation: rise 200ms var(--ease); }
.update-banner { position: fixed; left: var(--s3); right: var(--s3); bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--s3));
  z-index: 55; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: rise 220ms var(--ease); }
.update-banner .grow { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.update-banner .btn { min-height: var(--tap); padding: 0 var(--s4); }
@keyframes rise { from { opacity: 0; transform: translate(var(--tx, 0), 8px); } }
.toast { --tx: -50%; }
.skel { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--skel) 25%, var(--skel-hi) 50%, var(--skel) 75%);
  background-size: 300% 100%; }
:root[data-motion="full"] .skel { animation: shimmer 1.4s ease-in-out infinite; }
.skel.line { height: 14px; margin: 10px 0; }
.skel.line.short { width: 45%; } .skel.line.mid { width: 70%; }
.skel.block { height: 64px; margin: var(--s2) 0; }
.skel.title { height: 22px; width: 55%; margin: var(--s1) 0 var(--s3); }
.skel.bubble { height: 52px; width: 70%; border-radius: 18px; }
.skel.bubble.me { align-self: flex-end; width: 55%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.empty { text-align: center; padding: var(--s6) var(--s4); }
.empty .badge { width: 64px; height: 64px; border-radius: 20px; background: var(--accent-soft); color: var(--on-accent-soft);
  display: inline-grid; place-items: center; margin-bottom: var(--s3); }
.empty .badge .ico { width: 30px; height: 30px; }
.empty h3 { display: block; margin: 0 0 var(--s1); font-size: var(--fs-md); }
.empty p { color: var(--muted); margin: 0 auto; max-width: 30ch; }
.empty .btn { margin-top: var(--s4); }

/* ---------- Chat ---------------------------------------------------------- */
.messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--s2) var(--s3) var(--s4); display: flex; flex-direction: column;
  gap: var(--s2); overscroll-behavior: contain; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 20px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.msg.user { align-self: flex-end; background: var(--user); color: var(--user-text); border-bottom-right-radius: 6px; }
.msg.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px;
  box-shadow: var(--shadow); }
.msg.pending { opacity: 0.7; }
.msg.failed { outline: 2px solid var(--bad); outline-offset: 2px; }
.msg .meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin: 2px -6px -6px 0;
  font-size: var(--fs-xs); opacity: 0.8; min-height: 28px; }
.msg .speak { border: 0; background: none; color: inherit; width: var(--tap); height: var(--tap); margin: -8px -8px -8px 0;
  border-radius: var(--r-full); display: grid; place-items: center; }
.msg .speak:active { background: var(--surface-2); }
.msg .files { margin-top: 6px; font-size: var(--fs-sm); opacity: 0.9; display: flex; flex-wrap: wrap; gap: 6px; }
.day-sep { align-self: center; font-size: var(--fs-xs); color: var(--muted); padding: var(--s1) var(--s3); }
.mission-card { align-self: flex-start; width: min(100%, 92%); margin: 0; }
.mission-card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.mission-card .head strong { min-width: 0; }
.mission-card p { margin: var(--s2) 0 0; }
.typing { align-self: flex-start; display: flex; gap: 5px; align-items: center; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 20px; border-bottom-left-radius: 6px; }
.typing > span:not(.mascot) { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: 0.6; }
:root[data-motion="full"] .typing > span:not(.mascot) { animation: blink 1.2s infinite ease-in-out; }
.typing > span:nth-child(3) { animation-delay: 0.15s; } .typing > span:nth-child(4) { animation-delay: 0.3s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.composer { border-top: 1px solid var(--line); background: var(--surface); padding: var(--s2) var(--s2) var(--s1); }
.composer .row { align-items: flex-end; gap: 6px; }
.composer textarea { resize: none; max-height: 140px; min-height: 48px; border-radius: 24px; padding: 12px 16px; }
.round { width: 48px; height: 48px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); flex: none;
  display: grid; place-items: center; transition: background-color 150ms, transform 120ms var(--ease); }
.round:active { background: var(--surface-2); transform: scale(0.94); }
.round .ico { width: 22px; height: 22px; }
.round.send { background: var(--accent); color: var(--accent-text); }
.round.send:disabled { opacity: 0.5; }
.round.listening { background: var(--bad); color: #fff; }
.composer .hint { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 0 var(--s2); }
.attachments { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 var(--s1) var(--s2); }
.attachments .chip { background: var(--surface-2); color: var(--text); padding: 2px 4px 2px 12px; font-weight: 500; max-width: 100%; }
.attachments .chip::before { display: none; }
.attachments .chip span { overflow: hidden; text-overflow: ellipsis; }
.attachments .chip button { border: 0; background: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
/* outage banner: every screen, gone by itself when the service is back */
.outage { display: flex; flex-direction: column; gap: 6px; margin: var(--s1) var(--s3) 0; position: relative; z-index: 6; }
.outage-item { display: flex; align-items: flex-start; gap: var(--s2); padding: 10px 6px 10px 12px; border-radius: var(--r-lg, 20px);
  background: color-mix(in srgb, var(--bad) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line)); box-shadow: var(--shadow); }
.outage-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bad-soft); color: var(--bad); }
.outage-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); line-height: 1.35; }
.outage-text strong { color: var(--bad); font-size: var(--fs); }
.outage-actions { margin-top: 6px; }
.outage-close { flex: none; width: 36px; height: 36px; }
/* « Tout arrêter » bar: Accueil and Travail only */
.stopbar { display: flex; align-items: center; gap: var(--s2); margin: var(--s1) var(--s3) var(--s1); padding: 8px 8px 8px 14px;
  border-radius: var(--r-lg, 20px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; z-index: 5; }
:root:not([data-space="home"]):not([data-space="work"]) #stopbar, :root[data-space="home"] #stopbar.idle { display: none; }
.stopbar.idle { box-shadow: none; background: var(--surface-2); }
.stopbar.idle .stopbar-dot { background: var(--muted); opacity: 0.5; }
.stopbar.idle strong { color: var(--muted); }
.stopbar.idle .btn:disabled { opacity: 0.55; cursor: default; }
.stop-entry { margin: 0 0 var(--s3); }
.stopbar.paused { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.stopbar-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--warn); }
.stopbar-dot.live { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
:root[data-motion="full"] .stopbar-dot.live { animation: blink 1.6s infinite ease-in-out; }
.stopbar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.stopbar-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* « Claude travaille » bar (web/work-panel.js): Travail always, Accueil as the status light; touch → full panel */
.workpanel { display: flex; align-items: center; gap: var(--s2); width: calc(100% - 2 * var(--s3)); min-height: var(--tap); margin: var(--s1) var(--s3);
  padding: 6px 10px 6px 8px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  font: inherit; text-align: left; position: relative; z-index: 5; cursor: pointer; transition: transform var(--dur-fast) var(--ease); }
.workpanel:active { transform: scale(0.985); }
.workpanel[hidden], :root:not([data-space="home"]):not([data-space="work"]) #workpanel { display: none; }
.wp-light { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.workpanel.lv-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.workpanel.lv-warn .wp-light { background: var(--warn-soft); color: var(--warn); }
.workpanel.lv-bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 6%, var(--surface)); }
.workpanel.lv-bad .wp-light { background: var(--bad-soft); color: var(--bad); }
.workpanel.busy { background: var(--surface); }
.wp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.wp-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-sub { font-variant-numeric: tabular-nums; }
.wp-more { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: 650; color: var(--accent); }
.wp-sheet .state-line .ico, .wp-section .state-line .ico { flex: none; }
.wp-section { margin: var(--s4) 0 0; }
.wp-section > h3 { margin: 0 0 var(--s2); }
.wp-why { margin: 0; }
.wp-run { margin: 0 0 var(--s2); padding: var(--s3); }
.wp-run p { margin: 4px 0 0; }
.wp-run-head { gap: var(--s2); align-items: flex-start; }
.wp-run-head .chip { flex: none; font-variant-numeric: tabular-nums; }
.wp-run-actions { margin-top: var(--s2); justify-content: flex-end; }
.wp-run-actions .btn { min-height: var(--tap); }
.wp-step { overflow-wrap: anywhere; }
.wp-row .grow { display: flex; flex-direction: column; min-width: 0; gap: 2px; overflow-wrap: anywhere; }
.wp-row .chip { flex: none; align-self: center; }
details.wp-agent > summary { align-items: flex-start; padding: var(--s3); cursor: pointer; }
details.wp-agent > summary::after { margin-top: 6px; flex: none; }
.wp-agent > summary .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wp-agent-name { display: flex; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; }
.wp-agent-name .ico { flex: none; margin-top: 2px; }
.wp-agent[open] > summary .wp-step { -webkit-line-clamp: unset; }
details.wp-agent > .wp-agent-more { padding: var(--s2) var(--s3) var(--s3); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.wp-agent-more p { margin: 4px 0 0; }
.wp-files { margin: 4px 0 0; padding-left: 1.1em; }
.wp-agents-total { margin: 0 0 var(--s2); font-variant-numeric: tabular-nums; }
.chip.wp-ok { background: var(--ok-soft); color: var(--ok); }
.chip.wp-warn { background: var(--warn-soft); color: var(--warn); }
/* Claude bubble (web/bubble.js): the Claude conversation floating over every screen; floating layer → glass */
.bubble { position: fixed; left: 0; top: 0; z-index: 45; width: min(380px, calc(100vw - 16px)); height: min(520px, 58dvh);
  max-height: var(--bub-max-h, calc(100dvh - 16px)); display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--plane-float), var(--shadow-lg);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); will-change: transform; }
.bubble.dragging { opacity: 0.94; }
.bubble-head { display: flex; align-items: center; gap: var(--s1); padding: 2px var(--s1) 0 var(--s3); touch-action: none; cursor: grab; user-select: none; position: relative; }
.bubble.dragging .bubble-head { cursor: grabbing; }
.bubble-grip { position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: var(--r-full); background: var(--line); }
.bubble-title { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.bubble-tools { display: flex; gap: var(--s2); padding: 0 var(--s3) var(--s2); }
.bubble-tools .btn { flex: 1; min-width: 0; min-height: var(--tap); gap: 6px; padding: 0 var(--s2); }
.bubble-tools .btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble-body { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.bubble .view.chat.in-bubble { display: flex; position: relative; inset: auto; flex: 1; min-height: 0; padding: 0; }
.bubble .in-bubble .messages { padding-top: var(--s2); }
.bubble .in-bubble .cl-shared { display: none; }
.bubble-mini { display: none; }
.bubble.min { width: auto; height: auto; border-radius: var(--r-full); background: transparent; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
.bubble.min > :not(.bubble-mini) { display: none; }
.bubble.min .bubble-mini { display: inline-flex; align-items: center; gap: var(--s2); min-height: 52px; padding: 0 var(--s4) 0 var(--s3); border: 0;
  border-radius: var(--r-full); background: var(--signature); color: #fff; font: inherit; font-weight: 700; box-shadow: var(--plane-float), var(--shadow-lg);
  touch-action: none; cursor: grab; transition: transform var(--dur-fast) var(--ease); }
.bubble.min .bubble-mini:active { transform: scale(0.96); }
/* mission detail: files changed by the mission, « Annuler les changements » */
.change-list { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.change-row { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; }
.change-row.kept { opacity: .75; }
.change-kind { flex: none; font-size: var(--fs-sm); font-weight: 600; padding: 1px 8px; border-radius: 999px; min-width: 72px; text-align: center; }
.ck-add { background: var(--ok-soft); color: var(--ok); }
.ck-mod { background: var(--accent-soft); color: var(--accent); }
.ck-del { background: var(--bad-soft); color: var(--bad); }
.change-path { flex: 1; min-width: 0; display: flex; flex-direction: column; font-family: ui-monospace, monospace; font-size: var(--fs-sm); line-height: 1.5; }
.change-path .muted { font-family: system-ui, sans-serif; }
.stopbar .btn { min-height: 44px; padding: 0 var(--s3); flex: none; gap: 6px; }

/* « Discuter → Claude »: live reply, stop button, files Claude prepared, reply type */
.cl-live { min-width: 60%; }
.cl-head { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); }
.cl-head .ico { color: var(--signature, var(--accent)); flex: none; }
.cl-step { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-dots { display: inline-flex; gap: 4px; margin-left: 2px; }
.cl-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: 0.6; }
:root[data-motion="full"] .cl-dots span { animation: blink 1.2s infinite ease-in-out; }
.cl-dots span:nth-child(2) { animation-delay: 0.15s; } .cl-dots span:nth-child(3) { animation-delay: 0.3s; }
.cl-text { margin-top: 6px; }
.msg.note { background: var(--surface-2); box-shadow: none; color: var(--muted); }
.cl-depot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cl-file { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; text-decoration: none;
  background: var(--surface-2); color: var(--text); font-weight: 600; max-width: 100%; }
.cl-file::before { display: none; }
.cl-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round.stop { background: var(--bad); color: #fff; }
.composer .cl-hint { flex-direction: column; align-items: stretch; gap: 2px; padding: var(--s1) var(--s1) 0; }
.cl-modes { display: flex; gap: 4px; }
.cl-modes label { position: relative; flex: 1; min-height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.cl-modes label:has(input:checked) { background: var(--surface-2); color: var(--text); }
.cl-modes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cl-hint > .muted { text-align: center; padding-bottom: 2px; }
.cl-hint-row { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.cl-hint-row > .muted { flex: 1; min-width: 0; padding-bottom: 2px; }
.cl-follow { flex: none; min-height: 36px; gap: 4px; padding: 0 10px; }
.bubble .cl-follow { display: none; }
.setup { margin: var(--s2) var(--s3) 0; }
.setup ol { padding-left: 20px; margin: var(--s2) 0; }
.call { position: fixed; inset: 0; background: var(--bg); z-index: 40; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px; padding: 24px; text-align: center; }
.call .orb { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--accent-strong), var(--accent));
  opacity: 0.9; }
:root[data-motion="full"] .call .orb { animation: pulse 1.6s ease-in-out infinite; }
:root[data-motion="full"] .call .orb.thinking { animation-duration: 0.7s; }
.call .orb.speaking { background: var(--ok); }
@keyframes pulse { 50% { transform: scale(0.88); opacity: 0.6; } }
.call .said { color: var(--muted); max-width: min(90vw, 560px); min-height: 3em; max-height: 30vh; overflow-y: auto;
  overflow-wrap: anywhere; margin: 0; }
.call .said.user { color: var(--text); font-size: var(--fs-lg, 1.125rem); }
.call h2 { margin: 0; }
.call .call-step { min-height: 1.4em; margin: -16px 0 0; }
.call .call-hint { max-width: min(90vw, 420px); margin: 0; }
.call .call-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); width: min(100%, 420px); }
.call .call-actions .btn { flex: 1 1 150px; }

/* ---------- Voice player under a message ----------------------------------- */
.msg.playing { border-color: var(--accent); }
.vplayer { display: flex; align-items: center; gap: 4px; margin: var(--s2) -6px -4px; padding-top: var(--s2);
  border-top: 1px solid var(--line); white-space: normal; }
.msg.user .vplayer { border-top-color: color-mix(in srgb, currentColor 25%, transparent); }
.vp-btn { width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: var(--r-full); background: transparent;
  color: inherit; display: grid; place-items: center; }
.vp-btn:active { background: var(--surface-2); }
.vp-btn.main { background: var(--accent); color: var(--accent-text); }
.vp-btn.main:active { background: var(--accent-strong); }
.vp-track { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.vp-track input[type=range] { width: 100%; height: 28px; margin: 0; accent-color: var(--accent); background: transparent; }
.vp-time { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1; }
.vplayer.browser .vp-time::after { content: " · voix du téléphone"; }
.vp-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.8s linear infinite; }
.segmented.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segmented.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmented label { text-align: center; padding: 0 var(--s1); }
@media (max-width: 420px) { .segmented:not(.cols-2) label .ico { display: none; } }
.field-label { margin: var(--s4) 0 0; font-size: var(--fs-sm); font-weight: 600; }
.segmented.cols-4 label { text-align: center; line-height: 1.15; padding: 0 2px; }

/* ---------- Missions ------------------------------------------------------ */
.journal { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.journal li { display: flex; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere;
  white-space: pre-wrap; content-visibility: auto; contain-intrinsic-size: auto 40px; }
.journal li:last-child { border-bottom: 0; }
.journal .t { color: var(--muted); font-size: var(--fs-xs); flex: none; min-width: 42px; padding-top: 1px; }
.journal .k { flex: none; color: var(--muted); }
.journal .k .ico { width: 16px; height: 16px; vertical-align: -3px; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.detail-head h2 { margin: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); color: var(--muted); font-size: var(--fs-sm); margin-top: var(--s2); }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; }
.foot-note { color: var(--muted); font-size: var(--fs-sm); text-align: center; margin: var(--s4) var(--s2); }

/* ---------- Dashboard ----------------------------------------------------- */
.dash .help { margin: 0 0 var(--s2); }
.dash .note { margin: var(--s3) 0 0; }
.gauge { margin: var(--s3) 0; }
.gauge.stale { opacity: 0.6; }
.bar { height: 10px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; margin: 6px 0 4px; }
.bar > span { display: block; height: 100%; width: calc(var(--w, 0) * 100%); border-radius: inherit; background: var(--accent); transition: width 400ms var(--ease); }
.bar.high > span { background: var(--warn); } .bar.full > span { background: var(--bad); }
.bar.good > span { background: var(--ok); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.stat { background: var(--surface-2); border-radius: var(--r); padding: var(--s3); min-width: 0; }
.stat .l { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.stat .v { font-weight: 700; font-size: var(--fs-md); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat .hint { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; margin-top: 2px; }
.stat.tone-ok .v { color: var(--ok); } .stat.tone-warn .v { color: var(--warn); }
.stat.tone-bad .v { color: var(--bad); } .stat.tone-info .v { color: var(--info); }
details.card { padding: 0; }
details.card > summary { list-style: none; display: flex; align-items: center; gap: var(--s2); min-height: 56px; padding: 0 var(--s4);
  font-weight: 650; cursor: pointer; border-radius: var(--r-lg); }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary .ico:first-child { color: var(--accent); }
details.card > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 200ms var(--ease); }
details.card[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.card > .body { padding: 0 var(--s4) var(--s4); }
.spark { width: 100%; height: 56px; color: var(--accent); display: block; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
td, th { padding: var(--s2) var(--s1); border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); }
td.num, th.num { text-align: right; }

/* ---------- Settings ------------------------------------------------------ */
.provider { border-top: 1px solid var(--line); padding: var(--s3) 0; }
.provider:first-of-type { border-top: 0; padding-top: 0; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s3); font-size: var(--fs-sm); margin: var(--s2) 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.state-line { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); font-weight: 600; margin: var(--s2) 0; }
.state-line .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.state-line.ok .dot { background: var(--ok); } .state-line.warn .dot { background: var(--warn); } .state-line.bad .dot { background: var(--bad); }

/* ---------- Login --------------------------------------------------------- */
.login { max-width: 420px; margin: 0 auto; padding: 14vh var(--s5) var(--s5); }
.login .logo { width: 64px; height: 64px; border-radius: 20px; background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; margin: 0 auto var(--s4); }
.login .logo .ico { width: 34px; height: 34px; }
.login h1 { font-size: 28px; margin: 0 0 var(--s2); letter-spacing: -0.02em; }
.login .error { color: var(--bad); min-height: 1.5em; }
.login .login-or { margin: var(--s3) 0 0; font-size: 14px; }

/* ---------- Motion ---------------------------------------------------------
   Animations are ON by default, even if the phone asks for fewer: the choice in Settings > Apparence wins
   (« Complètes » / « Réduites » / « Aucune », data-motion on <html>). Settings says so when the phone asks. */
::view-transition-group(*) { animation-duration: var(--dur-screen); animation-timing-function: var(--ease-out); }
::view-transition-old(main) { animation: 200ms var(--ease) both vt-fade-out; }
::view-transition-new(main) { animation: var(--dur-screen) var(--ease-out) both vt-rise; }
:root[data-vt="forward"]::view-transition-old(main) { animation: var(--dur-screen) var(--ease-out) both vt-out-left; }
:root[data-vt="forward"]::view-transition-new(main) { animation: var(--dur-screen) var(--ease-out) both vt-in-right; }
:root[data-vt="back"]::view-transition-old(main) { animation: var(--dur-screen) var(--ease-out) both vt-out-right; }
:root[data-vt="back"]::view-transition-new(main) { animation: var(--dur-screen) var(--ease-out) both vt-in-left; }
::view-transition-group(mission-hero) { animation-duration: 440ms; animation-timing-function: var(--spring); }
::view-transition-old(mission-hero), ::view-transition-new(mission-hero) { height: 100%; }
::view-transition-group(top-title) { animation-duration: 300ms; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise { from { opacity: 0; transform: perspective(var(--persp)) translate3d(0, 14px, -40px); } }
/* depth: forward = the old screen steps back to the left, the new one arrives from behind on the right; back = the reverse */
@keyframes vt-out-left { to { opacity: 0; transform: perspective(var(--persp)) translate3d(-10%, 0, -90px) rotateY(5deg); } }
@keyframes vt-in-right { from { opacity: 0; transform: perspective(var(--persp)) translate3d(14%, 0, -60px) rotateY(-5deg); } }
@keyframes vt-out-right { to { opacity: 0; transform: perspective(var(--persp)) translate3d(14%, 0, -60px) rotateY(-5deg); } }
@keyframes vt-in-left { from { opacity: 0; transform: perspective(var(--persp)) translate3d(-10%, 0, -90px) rotateY(5deg); } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* entrance cascade: the blocks of a screen rise one after the other, only on arrival */
@keyframes enter-up { from { opacity: 0; transform: var(--enter-from, translateY(18px) scale(0.98)); } }
.view.enter > *, .view.enter .home > *, .view.enter .cats > *, .view.enter .group, .view.enter .messages > * {
  animation: enter-up 560ms var(--ease-out) both; }
.view.enter .home > *:nth-child(2), .view.enter .cats > *:nth-child(1), .view.enter > *:nth-child(2), .view.enter .group:nth-of-type(1) { animation-delay: 40ms; }
.view.enter .home > *:nth-child(3), .view.enter .cats > *:nth-child(2), .view.enter > *:nth-child(3), .view.enter .group:nth-of-type(2) { animation-delay: 90ms; }
.view.enter .home > *:nth-child(4), .view.enter .cats > *:nth-child(3), .view.enter > *:nth-child(4), .view.enter .group:nth-of-type(3) { animation-delay: 140ms; }
.view.enter .home > *:nth-child(5), .view.enter .cats > *:nth-child(4), .view.enter > *:nth-child(5), .view.enter .group:nth-of-type(4) { animation-delay: 190ms; }
.view.enter .home > *:nth-child(6), .view.enter .cats > *:nth-child(5), .view.enter > *:nth-child(6) { animation-delay: 240ms; }
.view.enter .home > *:nth-child(7), .view.enter .cats > *:nth-child(6), .view.enter > *:nth-child(7) { animation-delay: 290ms; }
.view.enter .home > *:nth-child(n+8), .view.enter .cats > *:nth-child(n+7), .view.enter > *:nth-child(n+8) { animation-delay: 340ms; }
.view.enter .home > .aurora { animation: none; }
.view.enter .arc > .arc-tile { animation: vt-fade-in 480ms var(--ease-out) both; }
.view.enter .arc > .arc-tile:nth-child(2) { animation-delay: 120ms; } .view.enter .arc > .arc-tile:nth-child(3) { animation-delay: 170ms; }
.view.enter .arc > .arc-tile:nth-child(4) { animation-delay: 220ms; }

/* « Réduites »: only short fades (no slide, no rotation, no loop). « Aucune »: nothing moves. */
:root[data-motion="reduced"]::view-transition-group(*) { animation-duration: 120ms; }
:root[data-motion="reduced"]::view-transition-old(main) { animation: 120ms var(--ease) both vt-fade-out !important; }
:root[data-motion="reduced"]::view-transition-new(main) { animation: 120ms var(--ease) both vt-fade-in !important; }
:root[data-motion="reduced"] { --enter-from: none; }
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  animation-duration: 120ms !important; animation-delay: 0ms !important; transition-duration: 120ms !important; scroll-behavior: auto !important; }
:root[data-motion="reduced"] .skel { animation: none !important; }
:root[data-motion="none"] *, :root[data-motion="none"] *::before, :root[data-motion="none"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="none"] ::view-transition-group(*), :root[data-motion="none"] ::view-transition-old(*),
:root[data-motion="none"] ::view-transition-new(*) { animation: none !important; }
:root[data-motion="none"] .skel { background: var(--skel); }
:root[data-motion="reduced"] .btn.busy::before, :root[data-motion="none"] .btn.busy::before,
:root[data-motion="reduced"] .vp-spin, :root[data-motion="none"] .vp-spin {
  animation: spin 1.6s linear infinite !important; }
/* the app in the background: every loop pauses (battery) */
:root[data-hidden] *, :root[data-hidden] *::before, :root[data-hidden] *::after { animation-play-state: paused !important; }

/* ---------- Learning: rating a reply, rules learnt ------------------------- */
.msg .meta-actions { display: inline-flex; align-items: center; gap: 2px; }
.msg .rates { display: inline-flex; gap: 2px; }
.msg .rate { border: 0; background: none; color: inherit; width: 44px; height: 44px; margin: -8px -4px; border-radius: var(--r-full);
  display: grid; place-items: center; opacity: 0.75; transition: background-color 150ms var(--ease), color 150ms, opacity 150ms; }
.msg .rate:active { background: var(--surface-2); }
.msg .rate[aria-pressed="true"] { opacity: 1; color: var(--accent); }
.msg .rate[aria-pressed="true"] .ico { fill: color-mix(in srgb, currentColor 22%, transparent); }
.msg .why { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--line); }
.msg .why-q { width: 100%; font-size: var(--fs-sm); color: var(--muted); }
.msg .why-chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: var(--r-full);
  min-height: var(--tap); padding: 0 var(--s4); font-size: var(--fs-sm); font-weight: 600; }
.msg .why-chip:active { background: var(--accent-soft); }
.lessons { margin: var(--s3) calc(-1 * var(--s2)) 0; }
.lesson { border-bottom: 1px solid var(--line); }
.lesson:last-child { border-bottom: 0; }
.lesson-head { width: 100%; display: flex; align-items: flex-start; gap: var(--s3); background: none; border: 0; text-align: left;
  color: var(--text); padding: var(--s3) var(--s2); min-height: 60px; border-radius: var(--r-sm); cursor: pointer; }
.lesson-head:active { background: var(--surface-2); }
.lesson-text { display: block; font-size: var(--fs); line-height: 1.4; overflow-wrap: anywhere; }
.lesson-meta { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.lesson-edit { padding: var(--s3) var(--s2); }
.ghost.danger-text { color: var(--bad); }
.ghost.danger-text:active { background: var(--bad-soft); }

/* ---------- « À valider » ------------------------------------------------------ */
.hub-item.risky { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.hub-item .hub-title { margin: var(--s3) 0 var(--s1); display: block; overflow-wrap: anywhere; }
.hub-item p { margin: 0 0 var(--s2); overflow-wrap: anywhere; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hub-warning { display: flex; gap: var(--s2); align-items: flex-start; background: var(--warn-soft); color: var(--warn);
  border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: var(--fs-sm); font-weight: 600; }
.hub-warning .ico { flex: none; margin-top: 1px; }
.hub-if { display: grid; gap: 2px; margin: var(--s2) 0 var(--s3); font-size: var(--fs-sm); }
.hub-if dt { color: var(--muted); font-weight: 600; margin-top: var(--s1); }
.hub-if dd { margin: 0; overflow-wrap: anywhere; }
.hub-foot { margin-top: var(--s2); flex-wrap: wrap; gap: var(--s2); }
.hub-foot select.later { width: auto; flex: 0 1 auto; min-width: 150px; }
.wf-item .btn { margin-top: var(--s2); }
.wf-last { margin-top: var(--s1); }
.wf-last p { margin: var(--s1) 0 0; }
.bk-section { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s3); }
.bk-section h4 { margin: 0 0 var(--s2); font-size: var(--fs-md); font-weight: 650; display: flex; align-items: center; gap: var(--s2); }
.bk-section h4 .ico { color: var(--accent); }
.bk-pw { display: grid; gap: var(--s2); margin-top: var(--s2); }
.bk-steps { padding-left: 22px; margin: var(--s2) 0 var(--s3); display: grid; gap: var(--s2); }
.bk-steps a.btn { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; }
.bk-paste { display: flex; gap: var(--s2); margin-top: var(--s2); }
.bk-paste input { flex: 1 1 auto; min-width: 0; }
.bk-paste .btn { flex: none; padding: 0 var(--s4); }
.bk-phrase { font-family: ui-monospace, monospace; font-size: var(--fs-md); letter-spacing: 0.04em; line-height: 1.7; word-spacing: 0.3em;
  background: var(--accent-soft); color: var(--on-accent-soft); border-radius: var(--r); padding: var(--s3); margin-top: var(--s2); overflow-wrap: anywhere; user-select: all; }
.bk-more { margin-top: var(--s2); }
.pk-list { display: grid; gap: var(--s2); margin-top: var(--s2); }
.pk-item { border: 1px solid var(--line); border-radius: 14px; padding: var(--s3); }
.pk-head { display: flex; gap: var(--s3); align-items: flex-start; }
.pk-head > .ico { color: var(--accent); flex: none; margin-top: 2px; }
.pk-head strong { display: block; overflow-wrap: anywhere; }
.pk-head small { display: block; font-size: var(--fs-sm); }
.bk-more > summary { min-height: 44px; display: flex; align-items: center; color: var(--muted); cursor: pointer; }

/* ---------- Panels sliding up (« feuilles »): overview, search ---------------- */
dialog.sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: min(100%, 640px); max-width: 100%;
  max-height: min(88dvh, 820px); padding: 0 0 env(safe-area-inset-bottom); border: 1px solid var(--glass-line); border-bottom: 0;
  border-radius: 24px 24px 0 0; background: var(--glass); color: var(--text); box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  display: flex; flex-direction: column; overflow: hidden; animation: sheet-in var(--dur-panel) var(--spring); }
dialog.sheet:not([open]) { display: none; }
dialog.sheet::backdrop { background: var(--scrim); animation: fade-in var(--dur) var(--ease); }
dialog.sheet.dragging { animation: none; transition: none; }
dialog.sheet:not(.dragging) { transition: transform var(--dur) var(--spring); }
dialog.sheet.still { animation: none; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
.sheet-handle { flex: none; height: 28px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.sheet-handle span { width: 40px; height: 5px; border-radius: var(--r-full); background: var(--line-strong); }
.sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 0 var(--s2) var(--s2) var(--s4); }
.sheet-head h2 { margin: 0; font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--s2); }
.sheet-head h2 .ico { color: var(--accent); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s3) var(--s5); }
.sheet-block .section-label { margin: var(--s3) var(--s1) var(--s1); }
.sheet-block .list { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.sheet .list-item { padding: var(--s2) var(--s3); min-height: 56px; }
.sheet .list-item .grow > span { display: block; }
.list-item.compact { min-height: 48px; font-size: var(--fs-sm); }
.list-item .lead.ok { background: var(--ok-soft); color: var(--ok); }
.cmd #cmd-input { position: sticky; top: 0; z-index: 1; margin-bottom: var(--s1); }
input[type=search] { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 0 var(--s3); min-height: 48px;
  background: var(--surface); -webkit-appearance: none; appearance: none; }
dialog.sheet.cmd { height: min(88dvh, 820px); }
@media (min-width: 720px) {
  dialog.sheet { inset: 10dvh 0 auto 0; border-radius: 24px; border-bottom: 1px solid var(--glass-line); }
  dialog.sheet .sheet-handle { display: none; }
  dialog.sheet .sheet-head { padding-top: var(--s3); }
  dialog.sheet.cmd { height: auto; max-height: 75dvh; }
}
/* No transparency when the phone asks for it, or when blur is not supported: plain surface. */
@media (prefers-reduced-transparency: reduce) {
  dialog.sheet, .backbar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  dialog.sheet, .backbar { background: var(--surface); }
}

/* ---------- Mission steps (real states only) --------------------------------------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); padding: 0; margin: var(--s3) 0 0; }
.step { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: var(--fs-xs);
  color: var(--muted); position: relative; min-width: 0; }
.step + .step::before { content: ""; position: absolute; top: 11px; right: calc(50% + 14px); width: calc(100% - 28px + var(--s1));
  height: 2px; border-radius: 2px; background: var(--line-strong); }
.step.done + .step::before { background: var(--accent); }
.step-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-strong);
  background: var(--surface); color: var(--accent-text); flex: none; }
.step-dot .ico { width: 14px; height: 14px; stroke-width: 3; }
.step-name { max-width: 100%; overflow-wrap: break-word; hyphens: auto; line-height: 1.2; }
.step.done .step-dot { background: var(--accent); border-color: var(--accent); }
.step.current .step-dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.step.current .step-name { color: var(--text); font-weight: 700; }
.step.current:not([class*="tone-"]) .step-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.step.skip .step-dot { border-style: dashed; }
.step.skip .step-name { text-decoration: line-through; }
.step.tone-ok .step-dot { background: var(--ok); border-color: var(--ok); color: var(--surface); box-shadow: 0 0 0 4px var(--ok-soft); }
.step.tone-warn .step-dot { background: var(--warn); border-color: var(--warn); color: var(--surface); box-shadow: 0 0 0 4px var(--warn-soft); }
.step.tone-bad .step-dot { background: var(--bad); border-color: var(--bad); color: var(--surface); box-shadow: 0 0 0 4px var(--bad-soft); }
.step.tone-muted .step-dot { background: var(--muted); border-color: var(--muted); color: var(--surface); }
.mission-card .steps { margin-top: var(--s3); }

/* ---------- Missions: groups and sticky back bar ------------------------------------- */
.group .section-label { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); }
.count-pill { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-full); background: var(--surface-2); color: var(--text);
  font-size: var(--fs-xs); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.group-help { margin: 0 var(--s1) var(--s2); }
.card.flush { padding: var(--s1) var(--s3); margin-top: var(--s1); }
.card.flush .list { margin: 0 calc(-1 * var(--s1)); }
.backbar { position: sticky; top: calc(-1 * var(--s1)); z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin: calc(-1 * var(--s1)) calc(-1 * var(--s3)) 0; padding: var(--s1) var(--s4) var(--s1) var(--s1);
  background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line); }
.backbar .muted { flex: none; }

/* ---------- Small shared bits ---------------------------------------------------------- */
.risk { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 650; }
.card.flash { animation: flash 1.4s var(--ease); }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--ring); } }
.btn:active:not(:disabled), .round:active { transition-timing-function: var(--spring); }

/* =====================================================================================
   2026 identity layer: deep backgrounds, depth, measured glass, display type, home screen, settings categories.
   Placed last on purpose: it refines the components above without touching their logic.
   ===================================================================================== */
body { background: var(--bg); }
:root[data-theme="dark"] body { background: radial-gradient(120% 60% at 50% -10%, #12142a 0%, var(--bg) 55%) fixed, var(--bg); }
html, body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3 { letter-spacing: -0.02em; }
.view.enter > .home, .view.enter > .cats { animation: none; }

/* page titles now live in the top bar: the in-page h2 stays for screen readers only */
.page-head { margin: 0; min-height: 0; justify-content: flex-end; }
.page-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-head:not(:has(> :not(h2))) { display: none; }
.page-sub { margin: var(--s1) var(--s1) var(--s3); font-size: var(--fs-sm); }

/* cards with depth */
.card { background: var(--relief-face); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px;
  box-shadow: var(--plane-surface), var(--relief-hi); }
.card h3 { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.015em; }
.card h3 .ico { color: var(--accent); width: 20px; height: 20px; }
button.card { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; display: block;
  transition: transform var(--dur) var(--spring); }
button.card:active { transform: scale(0.98); }
.card.flush { padding: var(--s1) var(--s2); }
.section-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

/* lists: rounded rows that press */
.list-item { border-bottom-color: var(--line); }
button.list-item { transition: background-color var(--dur-fast) var(--ease), transform var(--dur) var(--spring); border-radius: var(--r); }
button.list-item:active { background: var(--surface-2); transform: scale(0.985); }
.list-item .lead { width: 40px; height: 40px; border-radius: 13px; background: var(--surface-2); box-shadow: var(--hi); }
.list-item .lead.accent { background: var(--accent-soft); color: var(--on-accent-soft); }
.list-item .lead.live { background: var(--info-soft); color: var(--info); }
.list-item .lead.warn { background: var(--warn-soft); color: var(--warn); }
.list-item .lead.bad { background: var(--bad-soft); color: var(--bad); }
.list-item .title { font-weight: 650; letter-spacing: -0.01em; }
.list-item .grow > span { display: block; }
.chip { padding: 4px 10px; font-weight: 700; letter-spacing: 0.01em; }

/* buttons: the main action carries the signature gradient */
.btn { border-radius: var(--r); min-height: 50px; font-weight: 700; letter-spacing: -0.01em;
  background: var(--signature); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, #6d5cff 32%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25);
  transition: transform var(--dur) var(--spring), opacity var(--dur-fast); }
.btn:active:not(:disabled) { transform: scale(0.96); box-shadow: 0 3px 10px color-mix(in srgb, #6d5cff 25%, transparent); }
.btn.secondary { background: var(--accent-soft); color: var(--on-accent-soft); box-shadow: none; }
.btn.outline { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); box-shadow: var(--hi); }
.btn.danger { background: var(--bad-soft); color: var(--bad); border: 0; box-shadow: none; }
.ghost { border-radius: var(--r-full); }
.link-btn { border: 0; background: none; color: var(--accent); font-weight: 650; font-size: var(--fs-sm); min-height: var(--tap);
  display: inline-flex; align-items: center; gap: 2px; padding: 0 var(--s2); border-radius: var(--r-full); }
.link-btn:active { background: var(--accent-soft); }

/* fields */
input[type=text], input[type=password], input[type=number], input[type=search], textarea, select {
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface-2); min-height: 50px; }
:root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=password], :root[data-theme="dark"] input[type=number],
:root[data-theme="dark"] input[type=search], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--bg-2); }

/* switches: 44 px tall touch target, 56×32 track drawn inside */
input.toggle { width: 60px; height: 44px; padding: 6px 2px; background-clip: content-box; border-radius: var(--r-full);
  background-color: var(--surface-3); transition: background-color var(--dur) var(--ease); }
input.toggle::after { top: 10px; left: 6px; width: 24px; height: 24px; transition: transform var(--dur) var(--spring); }
input.toggle:checked { background-color: var(--accent); }
input.toggle:checked::after { transform: translateX(24px); background: #fff; }
input.toggle:active::after { width: 28px; }

/* segmented choices (Settings) */
.segmented { border-radius: var(--r); background: var(--surface-2); box-shadow: var(--hi); }
.segmented label { border-radius: 12px; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--spring); }
.segmented label:active { transform: scale(0.96); }
.segmented label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgb(0 0 0 / 0.1), var(--hi); }
:root[data-theme="dark"] .segmented label:has(input:checked) { background: var(--surface-3); color: var(--text); }
.segmented.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* toast: glass pill above the bottom bar */
.toast { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--s3)); display: flex; align-items: center; gap: var(--s3);
  background: var(--glass-strong); color: var(--text); border: 1px solid var(--glass-line); border-radius: 18px;
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--shadow-lg); padding: var(--s2) var(--s2) var(--s2) var(--s4); min-height: 48px;
  animation: toast-in var(--dur-panel) var(--spring); }
.toast-action { border: 0; background: var(--accent-soft); color: var(--on-accent-soft); font-weight: 700; border-radius: var(--r-full);
  min-height: 36px; padding: 0 var(--s3); flex: none; }
.toast:not(:has(.toast-action)) { padding-right: var(--s4); }
/* a message never takes a tap meant for what lies under it (only its own button does);
   in Discuter it sits at the top so the text box stays visible */
.toast { pointer-events: none; }
.toast-action { pointer-events: auto; }
:root[data-space="chat"] .toast, :root[data-keyboard] .toast { bottom: auto; top: calc(env(safe-area-inset-top) + var(--s3)); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(0.94); } }

/* empty states */
.empty .badge { border-radius: 22px; background: var(--signature); color: #fff; box-shadow: 0 10px 30px color-mix(in srgb, #6d5cff 35%, transparent); }

/* bottom panels: spring entrance, glass, larger radius */
dialog.sheet { border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--glass-strong);
  -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7);
  animation: sheet-in var(--dur-panel) var(--spring); }
dialog.sheet:not(.dragging) { transition: transform var(--dur-panel) var(--spring); }
.sheet-head { touch-action: none; cursor: grab; }
.sheet-head h2 { font-size: var(--fs-lg); font-weight: 750; }
.sheet-block .list { background: var(--surface); border-color: var(--line); }
@keyframes sheet-in { from { transform: translateY(100%); } }

/* ---------- Living background (« aurora »): three soft blurred lights drifting slowly ---------- */
.aurora { position: absolute; inset: -40px -20px auto; height: 420px; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.aurora span { position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(60px); opacity: 1; }
.aurora span:nth-child(1) { background: var(--aurora-1); left: -60px; top: -40px; }
.aurora span:nth-child(2) { background: var(--aurora-2); right: -80px; top: 20px; }
.aurora span:nth-child(3) { background: var(--aurora-3); left: 30%; top: 140px; width: 220px; height: 220px; }
/* background plane: while the home screen scrolls, the lights step back (smaller, dimmer). Tied to the scroll position
   of the visible screen (.view.active scrolls, not the page), so nothing runs when it is still; ignored by browsers
   without scroll timelines. */
@supports (animation-timeline: scroll()) {
  :root { timeline-scope: --view-scroll; }
  .view.active { scroll-timeline: --view-scroll block; }
  :root[data-motion="full"][data-space="home"] .app-aurora { animation: aurora-back linear both; animation-timeline: --view-scroll; animation-range: 0 480px; }
}
@keyframes aurora-back { to { transform: translate3d(0, -60px, 0) scale(0.86); opacity: 0.45; } }

/* ---------- Home screen ------------------------------------------------------------------- */
.home { position: relative; isolation: isolate; padding-top: var(--s1); }
.hero { padding: var(--s2) var(--s1) var(--s3); }
.hero-hello { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em; }
.hero-title { margin: 6px 0 var(--s4); font-size: var(--fs-display); line-height: 1.06; font-weight: 800; letter-spacing: -0.045em;
  display: flex; align-items: center; gap: 12px; }
.hero.tone-ask .hero-title { background: linear-gradient(100deg, var(--text), color-mix(in srgb, var(--accent) 85%, var(--text)));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.live-dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--info); flex: none; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--info) 60%, transparent); opacity: 0; }
:root[data-motion="full"] .live-dot::after { animation: ping 1.8s var(--ease-out) infinite; }
@keyframes ping { 0% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3); } }
/* Arc carousel (home.js arc()). Default (animations « Réduites » / « Aucune », or no 3D): flat 2 × 2 grid. */
.arc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.arc-turn { display: none; }
.tile.arc-tile { -webkit-backdrop-filter: none; backdrop-filter: none; }
.tile.arc-tile:not(.hot) { background: var(--relief-face); }
.tile.arc-tile { box-shadow: var(--plane-surface), var(--relief-hi); }
/* « Complètes »: the tiles stand on an arc. JS gives each one --sx (sine), --cy ((cos − 1) / 2), --sc (scale), --op. */
:root[data-motion="full"] .arc { display: block; position: relative; height: 256px; container-type: inline-size; touch-action: pan-y;
  margin: 0 calc(-1 * var(--s1)); user-select: none; -webkit-user-select: none; }
:root[data-motion="full"] .arc-tile { position: absolute; left: 50%; top: 118px; width: 148px; height: 136px; margin-left: -74px;
  grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; align-content: center; row-gap: 4px; text-align: center; padding: 10px;
  opacity: var(--op, 1);
  transform: translate3d(calc(var(--sx, 0) * min(118px, 30cqw)), calc(var(--cy, 0) * 118px), 0) rotateY(calc(var(--sx, 0) * -8deg)) scale(calc(var(--sc, 1) * var(--press, 1)));
  transition: transform 460ms var(--spring), opacity 300ms var(--ease); }
:root[data-motion="full"] .arc-tile:active { --press: var(--press-scale); transform: translate3d(calc(var(--sx, 0) * min(118px, 30cqw)), calc(var(--cy, 0) * 118px + 1px), 0) rotateY(calc(var(--sx, 0) * -8deg)) scale(calc(var(--sc, 1) * var(--press, 1))); }
:root[data-motion="full"] .arc.dragging .arc-tile { transition: none; }
:root[data-motion="full"] .arc-tile .tile-ico { grid-row: auto; }
:root[data-motion="full"] .arc-tile .tile-n { grid-row: auto; justify-self: center; font-size: 40px; }
:root[data-motion="full"] .arc-tile .tile-label { grid-column: auto; margin-top: 0; }
:root[data-motion="full"] .arc-tile.front { box-shadow: var(--plane-float), var(--relief-hi); }
:root[data-motion="full"] .arc-turn { display: grid; place-items: center; position: absolute; bottom: 0; z-index: 30; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--relief-face); color: var(--text); box-shadow: var(--plane-surface), var(--relief-hi); }
:root[data-motion="full"] .arc-turn.prev { left: var(--s1); } :root[data-motion="full"] .arc-turn.next { right: var(--s1); }
@supports not (transform-style: preserve-3d) { :root[data-motion="full"] .arc-tile { transform: translate(calc(var(--sx, 0) * min(118px, 30cqw)), calc(var(--cy, 0) * 118px)) scale(var(--sc, 1)); } }
.tile { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center;
  column-gap: 10px; text-align: left; padding: 14px; min-height: 84px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--text); box-shadow: var(--shadow), var(--hi); transition: transform var(--dur) var(--spring); }
.tile:active { transform: scale(0.96); }
.tile-ico { grid-row: 1; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.tile-n { grid-row: 1; justify-self: end; font-size: 30px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.tile-label { grid-column: 1 / -1; margin-top: 10px; font-size: var(--fs-sm); font-weight: 650; color: var(--muted); }
.tile.hot { background: linear-gradient(140deg, color-mix(in srgb, #7c5cff 26%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.tile.hot .tile-ico { background: var(--signature); color: #fff; }
.tile.live .tile-ico { background: var(--info-soft); color: var(--info); }
.tile.warn .tile-ico { background: var(--warn-soft); color: var(--warn); }
.tile.live .tile-n { color: var(--info); } .tile.warn .tile-n { color: var(--warn); }

.home-composer { display: flex; align-items: center; gap: 4px; margin: var(--s2) 0 var(--s1); padding: 4px 4px 4px 14px; border-radius: var(--r-full);
  background: var(--relief-face); border: 1px solid var(--line); box-shadow: var(--plane-surface), var(--relief-hi);
  transition: border-color var(--dur) var(--ease); }
.home-composer:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 4px var(--accent-soft), var(--plane-surface), var(--relief-hi); }
.home-composer input[type=text] { flex: 1; min-width: 0; border: 0; background: transparent !important; min-height: 48px; padding: 0 6px; box-shadow: none; }
.home-composer input:focus { box-shadow: none; }
.composer-ico { color: var(--accent); display: grid; }
.send-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--signature); color: #fff; display: grid; place-items: center; flex: none;
  box-shadow: 0 6px 16px color-mix(in srgb, #6d5cff 35%, transparent); transition: transform var(--dur) var(--spring); }
.send-btn:active { transform: scale(0.88); }
.home-block { margin-top: var(--s5); }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.block-head .section-label { margin: 0 var(--s1) var(--s2); }
.home-block > .list, .home-block > .list-item, .home-block > .decision { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow), var(--hi); margin: 0 0 var(--s2); padding: 2px 6px; }
.home-block > .decision { padding: 6px 10px; border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.home-block .list { overflow: hidden; }
.run-card { margin: 0 0 var(--s2); }
.run-card strong { min-width: 0; }
.quicks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.quick { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; color: var(--text);
  font-size: 12.5px; font-weight: 650; padding: 4px 0; min-height: 76px; border-radius: var(--r); transition: transform var(--dur) var(--spring); }
.quick:active { transform: scale(0.92); }
.quick-ico { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--hi); color: var(--accent); }
.quick-ico .ico { width: 24px; height: 24px; }
.empty-card { text-align: center; margin-top: var(--s5); }
.empty-card .badge { width: 56px; height: 56px; border-radius: 18px; margin: var(--s2) auto var(--s3); display: grid; place-items: center;
  background: var(--signature); color: #fff; }
.empty-card h3 { justify-content: center; }
.nowrap { white-space: nowrap; flex: none; }

/* ---------- Settings: search and foldable categories --------------------------------------- */
.search-field { position: relative; margin: var(--s2) 0 var(--s3); }
.search-field > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-field input[type=search] { padding-left: 42px; border-radius: var(--r-full); }
.cats { display: grid; gap: 10px; }
details.cat > summary { min-height: 68px; padding: 10px 14px; }
.cat-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #fff; background: var(--signature);
  box-shadow: 0 6px 14px color-mix(in srgb, #6d5cff 28%, transparent); }
details.cat[data-cat="appearance"] .cat-ico { background: linear-gradient(135deg, #f59e0b, #f43f5e); }
details.cat[data-cat="talk"] .cat-ico { background: linear-gradient(135deg, #7c5cff, #4f7bff); }
details.cat[data-cat="missions"] .cat-ico { background: linear-gradient(135deg, #10b981, #0ea5e9); }
details.cat[data-cat="notify"] .cat-ico { background: linear-gradient(135deg, #f43f5e, #fb923c); }
details.cat[data-cat="security"] .cat-ico { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
details.cat[data-cat="advanced"] .cat-ico { background: linear-gradient(135deg, #64748b, #334155); }
details.cat[data-cat="about"] .cat-ico { background: linear-gradient(135deg, #a855f7, #ec4899); }
.cat-title { display: block; font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.015em; }
.cat-sub { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.35; }
.cat-body > .card { margin: 10px 0 0; box-shadow: none; background: var(--bg-2); border-color: var(--line); }
:root[data-theme="light"] .cat-body > .card { background: var(--surface-2); }
.cat-body > .card:first-child { margin-top: 0; }
.note.warn-note { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3); border-radius: var(--r); background: var(--warn-soft);
  color: var(--text); font-size: var(--fs-sm); margin: var(--s2) 0 0; }
.note.warn-note .ico { color: var(--warn); flex: none; margin-top: 2px; }

/* ---------- Missions detail, pins ------------------------------------------------------------ */
.backbar { background: var(--glass); border-bottom: 1px solid var(--line); margin-left: calc(-1 * var(--s4)); margin-right: calc(-1 * var(--s4)); }
.backbar .muted { flex: 1; text-align: right; }
.pin-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.pin-btn[aria-pressed="true"] .ico { fill: color-mix(in srgb, currentColor 30%, transparent); }
.mission-hero .detail-head h2 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.03em; }
.step.done .step-dot { background: var(--signature); border-color: transparent; }
.step.done + .step::before { background: linear-gradient(90deg, #7c5cff, #4f7bff); }

/* ---------- Chat ----------------------------------------------------------------------------- */
.msg { border-radius: 22px; padding: 11px 15px; }
.msg.user { background: var(--user); box-shadow: 0 6px 18px color-mix(in srgb, #6d5cff 28%, transparent); }
.msg.assistant { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow), var(--hi); }
.composer { border-top: 0; background: var(--glass-strong); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  margin: 0 var(--s3) var(--s3); border-radius: 26px; border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.composer textarea { background: color-mix(in srgb, var(--text) 5%, transparent) !important; border: 0; }
.composer textarea:focus { background: color-mix(in srgb, var(--text) 7%, transparent) !important; box-shadow: 0 0 0 2px var(--ring); }
.composer { cursor: text; }
.composer button, .composer label { cursor: pointer; }
.round.mic.listening { position: relative; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 35%, transparent); }
.round.mic.listening::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--bad) 40%, transparent); opacity: 0; }
:root[data-motion="full"] .round.mic.listening::after { animation: mic-pulse 1.4s infinite ease-out; }
@keyframes mic-pulse { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.round.send { background: var(--signature); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, #6d5cff 35%, transparent); }
.round:active { transform: scale(0.88); }
.typing { background: var(--surface); border-color: var(--line); }

/* ---------- Login ---------------------------------------------------------------------------- */
.login-wrap { position: relative; isolation: isolate; min-height: 100dvh; display: grid; place-items: center; padding: var(--s5) var(--s4); overflow: hidden; }
.login-wrap .aurora { inset: 0; height: auto; -webkit-mask-image: none; mask-image: none; }
.login-wrap .aurora span { width: 380px; height: 380px; }
.login { width: min(100%, 400px); padding: 0; margin: 0; }
.login-mark { width: 76px; height: 76px; border-radius: 24px; margin: 0 auto var(--s4); display: grid; place-items: center; color: #fff;
  background: var(--signature); box-shadow: 0 18px 50px color-mix(in srgb, #6d5cff 45%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.35);
  animation: enter-up 700ms var(--ease-out) both; }
.login-mark .ico { width: 40px; height: 40px; stroke-width: 2; }
.login h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.05em; margin: 0; animation: enter-up 700ms 80ms var(--ease-out) both; }
.login-tag { color: var(--muted); margin: 4px 0 var(--s5); font-weight: 600; animation: enter-up 700ms 140ms var(--ease-out) both; }
.login-card { padding: var(--s5) var(--s4) var(--s4); border-radius: var(--r-xl); background: var(--glass-strong); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: var(--shadow-lg);
  animation: enter-up 700ms 200ms var(--ease-out) both; }
.login-intro { margin: 0 0 var(--s4); color: var(--muted); font-size: var(--fs-sm); }
.login .error { margin: var(--s3) 0 0; }

@media (min-width: 720px) {
  .view { padding-left: max(var(--s4), calc(50% - 340px)); padding-right: max(var(--s4), calc(50% - 340px)); }
  :root:not([data-motion="full"]) .arc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .toast, .composer, .login-card, .tile:not(.arc-tile), :root[data-scrolled] .topbar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
details.cat > summary .grow { flex: 1; min-width: 0; }
/* the living background sits behind the whole home screen, top bar included */
.app-aurora { position: fixed; inset: 0 0 auto; height: 520px; z-index: -1; opacity: 0; transition: opacity 700ms var(--ease); }
:root[data-space="home"] .app-aurora { opacity: 1; }

/* ---------- 2.1: pictograms everywhere, structured home, dashboards, softer motion ---------- */
/* Emoji before a title (one per concept, see CONCEPTS in icons.js). */
.emo { display: inline-block; margin-right: 0.4em; font-size: 1.05em; line-height: 1; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
h3 > .emo, summary > .emo { margin-right: 0.35em; }
/* concept colors for pictogram tiles (same family as the Settings categories) */
.c-missions, .c-toLaunch { background: linear-gradient(135deg, #10b981, #0ea5e9) !important; }
.c-coordinator { background: linear-gradient(135deg, #7c5cff, #4f7bff) !important; }
.c-memory, .c-learning { background: linear-gradient(135deg, #8b5cf6, #ec4899) !important; }
.c-files, .c-depot { background: linear-gradient(135deg, #f59e0b, #f97316) !important; }
.c-backup, .c-security { background: linear-gradient(135deg, #0ea5e9, #6366f1) !important; }
.c-voice { background: linear-gradient(135deg, #f43f5e, #ec4899) !important; }
.c-workflows { background: linear-gradient(135deg, #14b8a6, #22c55e) !important; }
.c-server, .c-quota { background: linear-gradient(135deg, #64748b, #334155) !important; }
.c-activity { background: linear-gradient(135deg, #a855f7, #6366f1) !important; }
.c-dashboards { background: var(--signature) !important; }
[class*=" c-"], [class^="c-"] { color: #fff !important; border: 0 !important; }

/* Home: named blocks */
.home-block { margin-top: var(--s5); }
.block-title { display: flex; align-items: center; gap: 8px; margin: 0 var(--s1); font-size: var(--fs-lg, 20px); font-weight: 750; letter-spacing: -0.02em; }
.block-head { margin-bottom: 2px; }
.block-sub { margin: 2px var(--s1) var(--s2); color: var(--muted); font-size: var(--fs-sm); }
.block-head + .list, .block-head + .card, .block-head + .quicks { margin-top: var(--s2); }
.block-empty { display: flex; align-items: center; gap: 8px; margin: var(--s2) 0 0; padding: 14px var(--s4); border-radius: var(--r-lg);
  background: var(--surface); border: 1px dashed var(--line); color: var(--muted); font-size: var(--fs-sm); }
.block-empty .ico { color: var(--ok); flex: none; }
.home-block .list-item .trail, .dash .list-item .trail { color: var(--muted); margin-left: auto; flex: none; }
.quicks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick { flex-direction: row; align-items: center; gap: 10px; padding: 10px; min-height: 64px; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow), var(--hi); }
.quick-ico { width: 40px; height: 40px; border-radius: 13px; flex: none; box-shadow: none; }
.quick-ico .ico { width: 20px; height: 20px; }
.quick-text { display: flex; flex-direction: column; min-width: 0; }
.quick-label { font-size: var(--fs-sm); font-weight: 700; }
.quick-hint { font-size: 12px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .lead.small { width: 32px; height: 32px; border-radius: 10px; }
.skel.card-skel { height: 96px; border-radius: var(--r-lg); margin-top: var(--s4); }

/* Dashboards */
.dash-head { display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s2) 0 var(--s1); }
.dash-h { display: flex; align-items: center; gap: 10px; margin: 0 var(--s1); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.dash-head .page-sub { margin-top: 2px; }
.dash-card { margin: 0 0 var(--s3); }
.dash-title { display: flex; align-items: center; margin: 0; font-size: var(--fs-md); font-weight: 750; }
.dash-sub { margin: 4px 0 var(--s3); color: var(--muted); font-size: var(--fs-sm); }
.card-list { background: var(--relief-face); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--plane-surface), var(--relief-hi);
  padding: 2px 6px; margin: 0 0 var(--s3); }
.status-row .title, .stat-line .title { font-weight: 650; }
.status-val { display: inline-flex; align-items: center; gap: 4px; flex: none; max-width: 48%; text-align: right; font-weight: 700;
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.status-val.tone-ok { color: var(--ok); } .status-val.tone-warn { color: var(--warn); }
.status-val.tone-bad { color: var(--bad); } .status-val.tone-info { color: var(--info); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 var(--s3); }
.dash-card .kpis { margin: 0; }
.kpi { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; padding: 12px; text-align: left; color: var(--text);
  background: var(--relief-face); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--plane-surface), var(--relief-hi); min-height: 84px; font: inherit;
  transition: transform var(--dur) var(--spring); }
.dash-card .kpi { background: var(--surface-2); box-shadow: var(--relief-hi), 2px 4px 10px -6px rgb(0 0 0 / 0.35); }
button.kpi { cursor: pointer; } button.kpi:active { transform: scale(0.96); }
.kpi-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.dash-card .kpi-ico { background: var(--surface); }
.kpi-n { justify-self: end; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1;
  overflow-wrap: anywhere; text-align: right; }
.kpi-label { grid-column: 1 / -1; font-size: 12.5px; font-weight: 650; color: var(--muted); line-height: 1.25; }
.kpi.tone-live .kpi-ico { background: var(--info-soft); color: var(--info); } .kpi.tone-live .kpi-n { color: var(--info); }
.kpi.tone-ok .kpi-ico { background: var(--ok-soft); color: var(--ok); }
.kpi.tone-warn .kpi-ico { background: var(--warn-soft); color: var(--warn); } .kpi.tone-warn .kpi-n { color: var(--warn); }
.kpi.tone-bad .kpi-ico { background: var(--bad-soft); color: var(--bad); } .kpi.tone-bad .kpi-n { color: var(--bad); }
.kpi.tone-accent .kpi-ico { background: var(--signature); color: #fff; }
/* column chart (one series, one hue) */
.chart { margin-top: var(--s1); }
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 3px; height: 150px; }
.col { position: relative; display: grid; grid-template-rows: 18px 1fr 18px; height: 100%; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--muted); font: inherit; cursor: pointer; }
.col-val { font-size: 11px; font-weight: 700; color: var(--text); text-align: center; white-space: nowrap; align-self: end; }
.col-bar { align-self: end; justify-self: center; width: min(100%, 18px); height: calc(var(--h) * 100%); min-height: 2px; border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--accent) 55%, var(--surface-2)); transform-origin: bottom; transition: background var(--dur) var(--ease); }
.col.last .col-bar, .col.picked .col-bar { background: var(--accent); }
.col-day { font-size: 11px; text-align: center; align-self: center; font-variant-numeric: tabular-nums; }
.cols { border-bottom: 1px solid var(--line); }
.chart-caption { margin: var(--s2) 0 0; font-size: var(--fs-sm); font-weight: 650; text-align: center; }
.chart-empty { display: flex; align-items: center; gap: 8px; justify-content: center; margin: var(--s2) 0; padding: var(--s4); color: var(--muted);
  font-size: var(--fs-sm); background: var(--surface-2); border-radius: var(--r); text-align: center; }
/* horizontal bars */
.hbars { display: grid; gap: 12px; }
.hbar { display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; min-height: 44px; }
button.hbar { cursor: pointer; } button.hbar:active { transform: scale(0.98); }
.hbar-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 650; }
.hbar-head strong { font-variant-numeric: tabular-nums; }
.hbar-ico { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex: none; }
.hbar-track { display: block; height: 8px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.hbar-fill { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--muted); transform-origin: left; }
.hbar-ico.ok { background: var(--ok-soft); color: var(--ok); } .hbar-fill.ok { background: var(--ok); }
.hbar-ico.warn { background: var(--warn-soft); color: var(--warn); } .hbar-fill.warn { background: var(--warn); }
.hbar-ico.bad { background: var(--bad-soft); color: var(--bad); } .hbar-fill.bad { background: var(--bad); }
.hbar-ico.live { background: var(--info-soft); color: var(--info); } .hbar-fill.live { background: var(--info); }
.hbar-ico.accent { background: var(--accent-soft); color: var(--on-accent-soft); } .hbar-fill.accent { background: var(--accent); }
/* line chart */
.line-chart { margin: var(--s2) 0 var(--s3); }
.line-chart .spark { height: 64px; margin: 6px 0 2px; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.spark-area { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: none; }
/* board grid */
.boards { margin-top: var(--s5); }
.board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--s2); }
.board-tile { display: grid; gap: 6px; align-content: start; padding: 14px; min-height: 112px; text-align: left; color: var(--text); font: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow), var(--hi); cursor: pointer;
  transition: transform var(--dur) var(--spring); }
.board-tile:active { transform: scale(0.96); }
.board-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; }
.board-name { font-weight: 750; font-size: var(--fs-sm); line-height: 1.25; }
.board-head { color: var(--muted); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-more { margin: 0 0 var(--s3); }
.dash-more > summary .ico { color: var(--muted) !important; }
.dash .btn.block { width: 100%; margin: var(--s2) 0 var(--s4); }
.day-group .section-label { margin-top: var(--s3); }
.day-group .list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2px 6px; }
.center { text-align: center; }

/* Motion 2.1 (Complètes only; Réduites keeps short fades, Aucune nothing — see the Motion section) */
@keyframes soft-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
:root[data-motion="full"] .soft-in > * { animation: soft-in 420ms var(--ease-out) both; }
:root[data-motion="full"] .soft-in > *:nth-child(2) { animation-delay: 50ms; }
:root[data-motion="full"] .soft-in > *:nth-child(3) { animation-delay: 100ms; }
:root[data-motion="full"] .soft-in > *:nth-child(4) { animation-delay: 150ms; }
:root[data-motion="full"] .soft-in > *:nth-child(n+5) { animation-delay: 200ms; }
:root[data-motion="full"] :is(.soft-in, .view.enter, .dash-fresh) .col-bar { animation: grow-y 620ms var(--ease-out) both; }
:root[data-motion="full"] :is(.soft-in, .view.enter, .dash-fresh) :is(.hbar-fill, .bar > span) { animation: grow-x 620ms var(--ease-out) both; }
:root[data-motion="full"] .col:nth-child(n+5) .col-bar { animation-delay: 60ms; }
:root[data-motion="full"] .col:nth-child(n+10) .col-bar { animation-delay: 120ms; }
/* folding sections open and close smoothly where the browser can */
@supports (interpolate-size: allow-keywords) {
  :root[data-motion="full"] { interpolate-size: allow-keywords; }
  :root[data-motion="full"] details::details-content { transition: height 260ms var(--ease-out), content-visibility 260ms allow-discrete; height: 0; overflow: clip; }
  :root[data-motion="full"] details[open]::details-content { height: auto; }
}
/* touch feedback on every tappable row */
.list-item, .quick, .kpi, .board-tile, .hbar { -webkit-tap-highlight-color: transparent; }
:root[data-motion="full"] button.list-item { transition: transform 160ms var(--spring), background 160ms var(--ease); }
.block-title > .emo, .dash-h > .emo, .dash-title > .emo { margin-right: 0; }
.block-title .emo { font-size: 0.95em; }
.dash-h > .emo, .block-title > .emo { margin-right: 0; }

/* ---------- Brand: the Nexus « N » on its night tile (same as the app icon) ---------- */
:root { --brand-tile: radial-gradient(120% 90% at 20% 10%, #2a2470 0%, #15153a 55%, #090a18 100%); }
.brand-mark { display: block; width: 62%; height: 62%; overflow: visible; }
.brand-mark .bm-beam { filter: drop-shadow(0 0 3px rgb(160 140 255 / 0.55)); }
.brand-tile, .topbar > .logo, .login-mark { background: var(--brand-tile) !important; color: #fff;
  box-shadow: 0 6px 18px rgb(20 16 70 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.14) !important; }
.login-mark { box-shadow: 0 18px 50px color-mix(in srgb, #6d5cff 40%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.14) !important; }
.brand-tile { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.about-brand { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s3); }
.about-brand strong { font-size: var(--fs-md); letter-spacing: -0.02em; }
.about-brand p { margin: 2px 0 0; }

/* ---------- Opening (cold start only, « Complètes » only, a tap skips it; the app loads underneath) ---------- */
#intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #07080d; overflow: hidden;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
:root[data-intro="off"] #intro, #intro[hidden] { display: none; }
#intro .in-halo { position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(124 92 255 / 0.55), rgb(79 123 255 / 0.22) 38%, rgb(34 211 238 / 0.08) 60%, transparent 72%);
  opacity: 0; transform: scale(0.25); animation: in-halo 1500ms cubic-bezier(.2,.7,.2,1) 120ms forwards; }
#intro .in-stage { position: relative; display: grid; justify-items: center; gap: 22px; }
/* the N is built in 3D (step 7): it turns to face the user while the pillars rise; a darker side (.bm-side, offset
   toward the bottom right like every shadow) gives it thickness; text never turns */
#intro .in-mark { width: 112px; height: 112px; animation: in-turn 1050ms cubic-bezier(.2,.7,.2,1) 80ms both; }
#intro .in-mark .brand-mark { width: 100%; height: 100%; }
#intro .bm-pillar { transform-box: fill-box; transform: scaleY(0); }
#intro .bm-pillar:first-child { transform-origin: 50% 100%; animation: in-grow 520ms cubic-bezier(.3,.9,.2,1) 180ms forwards; }
#intro .bm-pillar:last-child { transform-origin: 50% 0%; animation: in-grow 520ms cubic-bezier(.3,.9,.2,1) 300ms forwards; }
#intro .bm-beam { stroke-dasharray: 48 100; stroke-dashoffset: 50; animation: in-beam 460ms cubic-bezier(.6,0,.2,1) 640ms forwards;
  filter: drop-shadow(0 0 6px rgb(190 170 255 / 0.9)) drop-shadow(0 0 18px rgb(124 92 255 / 0.7)); }
#intro .in-flare { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.85), rgb(170 150 255 / 0.25) 45%, transparent 70%); opacity: 0; transform: scale(0.2);
  animation: in-flare 700ms ease-out 980ms forwards; mix-blend-mode: screen; }
#intro .in-word { margin: 0; color: #fff; font-size: 34px; font-weight: 800; letter-spacing: 0.3em; opacity: 0; transform: translateY(8px);
  animation: in-word 640ms cubic-bezier(.2,.7,.2,1) 1050ms forwards; }
#intro .in-skip { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center;
  color: rgb(255 255 255 / 0.45); font-size: 13px; opacity: 0; animation: in-word 400ms ease 700ms forwards; }
#intro .in-mascot { height: 60px; display: grid; place-items: center; opacity: 0; transform: translateY(14px) scale(0.6);
  animation: in-mascot 440ms cubic-bezier(.2,.9,.3,1.2) 920ms forwards; }
#intro .in-mascot:empty { display: none; }
#intro.out { animation: in-out 420ms cubic-bezier(.4,0,.2,1) forwards; pointer-events: none; }
#intro.out .in-stage { animation: in-stage-out 420ms cubic-bezier(.4,0,.2,1) forwards; }
@keyframes in-turn { from { transform: perspective(var(--persp)) rotateY(-42deg) rotateX(16deg) scale(0.86); } }
@keyframes in-mascot { to { opacity: 1; transform: none; } }
@keyframes in-halo { 60% { opacity: 1; } to { opacity: 0.85; transform: scale(1); } }
@keyframes in-grow { to { transform: scaleY(1); } }
@keyframes in-beam { to { stroke-dashoffset: 0; } }
@keyframes in-flare { 35% { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
@keyframes in-word { to { opacity: 1; transform: none; letter-spacing: -0.02em; } }
@keyframes in-out { to { opacity: 0; visibility: hidden; } }
@keyframes in-stage-out { to { transform: scale(1.18); opacity: 0; } }

/* Home: drawers + target switch (Coordinateur / Claude) */
.home-composer { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 10px 10px 14px; border-radius: var(--r-lg); }
.home-composer .composer-row { display: flex; align-items: center; gap: 4px; }
.home-composer .target-choice { padding: 3px; }
.home-composer .composer-row.hollow { border-radius: var(--r-full); padding: 2px 2px 2px 10px; background: color-mix(in srgb, var(--bg) 40%, var(--surface-2)); }
/* Drawer: one component for the home blocks and the Settings categories (details.drawer > summary + .drawer-body).
   Raised surface; the body unfolds downward from its top edge, like a lid (rotation only with « Complètes »). */
.drawer { background: var(--relief-face); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--plane-surface), var(--relief-hi); overflow: clip; }
.drawer > summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 12px; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary:active { background: var(--surface-2); }
.drawer-chevron { display: grid; flex: none; margin-left: auto; color: var(--muted); transition: transform var(--dur) var(--spring); }
.drawer[open] .drawer-chevron { transform: rotate(90deg); }
.drawer-body { padding: 0 12px 12px; }
.drawer[open] > .drawer-body { animation: drawer-open var(--dur-panel) var(--ease-out); transform-origin: 50% 0; }
:root[data-motion="reduced"] .drawer[open] > .drawer-body { animation-name: vt-fade-in; }
@keyframes drawer-open { from { opacity: 0; transform: perspective(var(--persp)) rotateX(-10deg) translateY(-6px); } }
.drawer-action { display: flex; justify-content: flex-end; }
.drawer .block-head + .list { margin-top: 0; }
.home-block.drawer > .drawer-body > .list { border: 0; box-shadow: none; padding: 0; margin: 0 0 var(--s2); background: none; }

/* ---------- Depth (3D) foundation -------------------------------------------------------------
   Shared by every screen (NEXUS-3D-MASCOTTE.md §2). Only transform and opacity move; a shadow that changes is a
   layer already drawn whose opacity changes. Text faces the user at rest; tilt only while a finger is down.
   .relief  : a slightly domed surface (face gradient + top highlight + surface-plane shadow).
   .hollow  : a dug-in field (inner shadow), for text fields.
   .pressable / buttons below : sink when pressed (smaller, inner shadow fades in).
   .tilt    : leans toward the finger, up to --tilt-max, back to flat on release (web/depth.js, « Complètes » only).
   .plane-float / .plane-front : the shadow of the floating and front planes. */
.relief { background: var(--relief-face); box-shadow: var(--plane-surface), var(--relief-hi); }
.hollow { box-shadow: var(--hollow); }
.plane-float { box-shadow: var(--plane-float); }
.plane-front { box-shadow: var(--plane-front); }
.pressable { position: relative; transition: transform var(--dur-fast) var(--spring); }
.pressable:active:not(:disabled) { transform: translateY(1px) scale(var(--press-scale)); }
:is(.pressable, .btn, button.card, .tile, .send-btn, .round.send) { position: relative; }
:is(.pressable, .btn, button.card, .tile, .send-btn, .round.send)::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: var(--pressed); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); }
:is(.pressable, .btn, button.card, .tile, .send-btn, .round.send):active:not(:disabled)::after { opacity: 1; transition-duration: 40ms; }
.btn:active:not(:disabled), .tile:active, button.card:active { transform: translateY(1px) scale(var(--press-scale)); }
.tilt { transform: perspective(var(--persp)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.tilt.tilting { transition: transform 120ms linear; will-change: transform; }
.tilt:not(.tilting) { transition: transform var(--dur) var(--spring); }
@supports not (transform-style: preserve-3d) { .tilt { transform: none !important; } }

/* ---------- Mascot « Nexus » (web/mascot.js; drawings in web/mascots/, each with its own small CSS) ------------------
   Layers: .mascot (button, data-mood, data-moment) > .m-move (key moments) > .m-pose (mood) > svg (drawing).
   Still when calm. The only loop is « Claude travaille », with animations « Complètes ». Key moments play once
   (≤ 1.2 s, data-moment is removed afterwards). « Réduites »: poses change by a 120 ms fade, never move. « Aucune »: fixed. */
.mascot { --m-size: 88px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--m-size); height: var(--m-size);
  min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.mascot[hidden] { display: none; }
.mascot .m-move, .mascot .m-pose { display: block; width: 100%; height: 100%; transform-origin: 50% 80%; }
.mascot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mascot .m-pose { transition: transform 420ms var(--spring), opacity 300ms var(--ease); }
:root:not([data-motion="full"]) .mascot .m-pose { transition: none; }
.mascot[data-mood="ask"] .m-pose { transform: rotate(-9deg) translateX(-3%); }
.mascot[data-mood="busy"] .m-pose { transform: perspective(var(--persp)) rotateY(-18deg); }
.mascot[data-mood="look"] .m-pose { transform: rotate(7deg); }
.mascot[data-mood="down"] .m-pose { transform: translateY(5%) scaleY(0.92); opacity: 0.55; filter: grayscale(1); }
:root[data-motion="full"]:not([data-mascot="discreet"]) .mascot[data-mood="busy"]:not([data-moment]) .m-pose { animation: m-busy 3.2s ease-in-out infinite alternate; }
.mascot .m-pose.m-fade { animation: vt-fade-in 120ms var(--ease); }
@keyframes m-busy { from { transform: perspective(var(--persp)) rotateY(-28deg); } to { transform: perspective(var(--persp)) rotateY(28deg); } }
:root[data-motion="full"] .mascot[data-moment="arrive"] .m-move { animation: m-arrive 1000ms var(--ease-out) both; }
:root[data-motion="full"] .mascot[data-moment="decision"] .m-move { animation: m-decision 1100ms var(--ease) both; }
:root[data-motion="full"] .mascot[data-moment="done"] .m-move { animation: m-done 1150ms var(--ease) both; }
:root[data-motion="full"] .mascot[data-moment="failed"] .m-move { animation: m-failed 1000ms var(--ease) both; }
:root[data-motion="full"] .mascot[data-moment="sent"] .m-move { animation: m-sent 600ms var(--ease) both; }
:root[data-motion="full"] .mascot[data-moment="stop"] .m-move { animation: m-stop 260ms steps(2, end) both; }
:root[data-motion="full"] .mascot[data-moment="back"] .m-move { animation: m-back 800ms var(--ease) both; }
:root[data-motion="full"] .mascot[data-moment="file"] .m-move { animation: m-file 1100ms var(--ease) both; }
@keyframes m-arrive { 0% { opacity: 0; transform: perspective(var(--persp)) translateY(-40%) rotateY(-200deg) scale(0.6); }
  70% { opacity: 1; transform: perspective(var(--persp)) translateY(4%) rotateY(8deg) scale(1.02); } 85% { transform: scaleY(0.95); } 100% { transform: none; } }
@keyframes m-decision { 0%, 100% { transform: none; } 14% { transform: translateY(-16%); } 28% { transform: scaleY(0.94); } 40% { transform: translateY(-11%); }
  52% { transform: none; } 64% { transform: rotate(-9deg); } 76% { transform: rotate(8deg); } 88% { transform: rotate(-4deg); } }
@keyframes m-done { 0%, 100% { transform: none; } 35% { transform: perspective(var(--persp)) translateY(-26%) rotateY(180deg); }
  65% { transform: perspective(var(--persp)) translateY(-26%) rotateY(360deg); } 85% { transform: scaleY(0.93); } }
@keyframes m-failed { 0%, 100% { transform: none; } 35%, 80% { transform: translateY(8%) scaleY(0.84) rotate(-6deg); } }
@keyframes m-sent { 0%, 100% { transform: none; } 45% { transform: perspective(var(--persp)) rotateX(28deg); } }
@keyframes m-stop { from { transform: scale(1.06); } to { transform: none; } }
@keyframes m-back { 0%, 100% { transform: none; } 35% { transform: translateY(-18%) scaleY(1.05); } 60% { transform: scaleY(0.9); } 80% { transform: translateY(-5%); } }
@keyframes m-file { 0%, 100% { transform: none; } 30%, 75% { transform: perspective(var(--persp)) translate(8%, 4%) rotate(12deg) rotateY(-25deg); } }
/* home: next to the state sentence */
.home > .mascot { position: absolute; top: calc(var(--s2) + 2px); right: 0; z-index: 2; }
.home:has(> .mascot:not([hidden])) .hero-hello, .home:has(> .mascot:not([hidden])) .hero-title { padding-right: 96px; }
/* elsewhere (step 5): minis (28 px, a picture next to « réfléchit… » and in the outage banner), empty states, À propos */
.mascot.mini { min-width: 0; min-height: 0; cursor: default; }
.typing > .mascot { margin: -6px 4px -6px -4px; }
.cl-head > .mascot { margin-left: auto; }
.outage-item > .mascot { margin: 0 -4px 0 -2px; }
.outage-item:has(> .mascot:not([hidden])) > .outage-icon { display: none; }
.empty > .mascot:not([hidden]) { display: grid; margin: 0 auto var(--s3); }
.empty:has(> .mascot:not([hidden])) > .badge { display: none; }
.about-brand > .mascot { margin-left: auto; }

/* ---------- Depth on the other screens (step 6): same light, same planes everywhere ---------------------------------
   Cards, lists and key figures are domed surfaces (above); here: the pile of « À valider », the steps of a mission as
   stairs, bars with a face and a side, the files as small documents, and the screen that steps back under a sheet. */
/* « À valider »: the most urgent decision in front, the edges of the next ones behind it (drawn only) */
.pile { position: relative; margin: var(--s3) 0 0; }
.pile.behind-1 { padding-bottom: 8px; } .pile.behind-2 { padding-bottom: 16px; }
.pile > .hub-item { position: relative; z-index: 3; margin: 0; box-shadow: var(--plane-float), var(--relief-hi); }
.pile-back { position: absolute; left: 0; right: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--relief-face); box-shadow: var(--plane-surface), var(--relief-hi); pointer-events: none; }
.pile-back.b1 { top: 8px; bottom: 0; z-index: 2; transform: scaleX(0.95); }
.pile.behind-2 > .pile-back.b1 { bottom: 8px; }
.pile-back.b2 { top: 16px; bottom: 0; z-index: 1; transform: scaleX(0.9); opacity: 0.8; }
.pile-more { margin: var(--s2) 0 0; text-align: center; font-size: var(--fs-sm); }
:root[data-motion="full"] .pile > .hub-item.leaving { animation: pile-leave 280ms var(--ease) both; pointer-events: none; }
:root[data-motion="full"] .pile > .hub-item.arriving { animation: pile-arrive 320ms var(--ease-out) both; }
:root[data-motion="reduced"] .pile > .hub-item.leaving { animation: fade-out-short 120ms linear both; pointer-events: none; }
:root[data-motion="reduced"] .pile > .hub-item.arriving { animation: fade-in 120ms linear both; }
@keyframes pile-leave { to { opacity: 0; transform: perspective(var(--persp)) translate3d(0, -12px, -120px) rotateX(8deg); } }
@keyframes pile-arrive { from { opacity: 0.6; transform: translateY(12px) scale(0.95); } }
@keyframes fade-out-short { to { opacity: 0; } }
/* mission steps as stairs: the real step stands out in relief */
.step-dot { box-shadow: var(--relief-hi); }
.step.done .step-dot { box-shadow: var(--relief-hi), 1px 2px 4px -1px rgb(0 0 0 / 0.3); }
.step.current .step-dot { transform: translateY(-3px); }
.step.current:not([class*="tone-"]) .step-dot { box-shadow: 0 0 0 4px var(--accent-soft), 2px 5px 10px -3px rgb(0 0 0 / 0.35); }
/* bars: a dug-in track, a fill with a lit face and a darker side (drawn, no real rotation); they grow on arrival (above) */
.bar, .hbar-track { box-shadow: var(--hollow); }
.bar > span, .hbar-fill { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 -3px 0 rgb(0 0 0 / 0.18); }
/* files: small documents in relief; « Déposés pour vous » lands like a card put down */
.card.depot .list { margin: 0; display: grid; gap: var(--s2); }
.card.depot .list-item { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3);
  background: var(--relief-face); box-shadow: var(--plane-surface), var(--relief-hi); }
.card.depot .list-item:last-child { border-bottom: 1px solid var(--line); }
:root[data-motion="full"] .view.enter .card.depot { animation: put-down 420ms var(--ease-out) both; }
@keyframes put-down { from { opacity: 0; transform: perspective(var(--persp)) translate3d(0, -10px, 40px) rotateX(-6deg); } }
/* a sheet or « Chercher » comes to the front plane: the screen behind steps back a little (its scrim darkens it) */
:root[data-motion="full"] #views { transition: transform var(--dur-panel) var(--spring); }
:root[data-motion="full"]:has(dialog.sheet[open]) #views { transform: scale(0.97); }
/* the blur behind a sheet would be computed again on every frame while the screen steps back (measured: about a third
   of the frames lost, scripts/check-fluidity.py); the scrim already dims the screen, so the sheet is a plain surface */
:root[data-motion="full"] dialog.sheet { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the logo in À propos turns to face the user once, when the drawer is opened by a tap (« Complètes » only) */
:root[data-motion="full"] .brand-tile.turning { animation: logo-turn 900ms var(--ease-out) both; }
@keyframes logo-turn { from { transform: perspective(var(--persp)) rotateY(-70deg) rotateX(12deg) scale(0.9); } }

/* ---------- Mes listes (web/modules/lists.js): the same card for every list ---------- */
.lists-search-wrap { position: relative; margin: 0 0 var(--s3); }
.lists-search-wrap > svg { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.lists-search-wrap input[type=search] { padding-left: 40px; font-size: var(--fs); }
.lists-seg { margin: 0 0 var(--s3); }
.lists-grid { display: grid; gap: var(--s3); }
@media (min-width: 720px) { .lists-grid { grid-template-columns: 1fr 1fr; } }
button.lists-card { display: flex; align-items: center; gap: var(--s3); width: 100%; margin: 0; text-align: left; cursor: pointer;
  font: inherit; color: var(--text); border: 1px solid var(--line); min-height: 76px; transition: transform 120ms var(--ease-out), background-color 120ms; }
button.lists-card:active { transform: scale(0.985); background: var(--surface-2); }
.lists-card:disabled { opacity: 0.6; cursor: default; }
.lists-card .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lists-card .title { font-weight: 650; font-size: var(--fs-md); }
.lists-card .lead { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--on-accent-soft, var(--accent));
  display: grid; place-items: center; flex: none; }
.lists-card .lead.hot { background: var(--bad-soft); color: var(--bad); }
.lists-card .trail { color: var(--muted); flex: none; }
.lists-count { color: var(--muted); font-weight: 600; }
.lists-count.hot { color: var(--bad); }
.lists-item .grow { display: grid; gap: 4px; }
.lists-text { line-height: 1.4; }
.lists-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.chip.lv-1 { background: var(--bad-soft); color: var(--bad); }
.chip.lv-2 { background: var(--warn-soft); color: var(--warn); }
.lists-group { margin: 0 0 var(--s4); }
.lists-group-title { margin: var(--s4) var(--s1) var(--s2); }
.lists-back { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--tap, 44px); margin: 0 0 var(--s1); }
.lists-title { display: flex; align-items: center; gap: var(--s2); margin: var(--s1) var(--s1) 0; font-size: var(--fs-xl);
  letter-spacing: -0.015em; line-height: 1.2; }
.lists-h-ico { display: inline-grid; place-items: center; color: var(--accent); flex: none; }
.lists-note { margin: 0 var(--s1) var(--s3); }
.lists-foot { margin: var(--s4) var(--s1) var(--s5); text-align: center; }
.lists-detail { display: grid; gap: var(--s3); padding-bottom: var(--s4); }
.lists-detail-title { margin: 0; font-size: var(--fs-lg); line-height: 1.3; }
.lists-detail-text { margin: 0; font-size: var(--fs); line-height: 1.55; white-space: pre-line; }
.lists-doc { font-size: var(--fs); line-height: 1.55; padding-bottom: var(--s5); }
.lists-doc h3 { margin: var(--s5) 0 var(--s2); font-size: var(--fs-lg); }
.lists-doc h4 { margin: var(--s4) 0 var(--s1); font-size: var(--fs-md); }
.lists-doc p { margin: 0 0 var(--s3); }
.lists-doc ul { margin: 0 0 var(--s3); padding-left: var(--s5); }
.lists-doc li { margin: 0 0 var(--s1); }
.lists-row { display: grid; gap: 2px; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }

/* ---------- Bibliothèque (web/library.js): doors, project page, reader, downloads ---------- */
.lib-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 0 0 var(--s1); font-size: var(--fs-sm); }
.lib-crumb { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 650; min-height: var(--tap); padding: 0 6px;
  border-radius: var(--r-sm); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-crumb:first-child { padding-left: var(--s1); }
.lib-crumb.here { color: var(--muted); cursor: default; display: inline-flex; align-items: center; max-width: 60vw; }
.lib-sep { color: var(--muted); }
.lib-tile { margin: var(--s3) 0; }
.lib-door.hot { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.lib-center { margin: var(--s2) 0 var(--s4); }
.lib-note { margin: 0 var(--s1) var(--s2); }
.lib-new { background: var(--info-soft); color: var(--info); }
.lib-row .grow { display: grid; gap: 4px; min-width: 0; }
label.lib-row { cursor: pointer; }
.lib-check { width: 24px; height: 24px; flex: none; accent-color: var(--accent); margin: 0 var(--s1); }
.lib-static { cursor: default; }
.lib-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.lib-actions > * { flex: 1 1 150px; }
a.btn, a.lib-dl { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); text-decoration: none; }
.lib-preset .grow { display: grid; gap: 2px; min-width: 0; }
.lib-preset .lead { flex: none; color: var(--accent); }
.small-btn { min-height: var(--tap) !important; padding: 0 var(--s3) !important; font-size: var(--fs-sm); flex: none; }
.lib-bar { position: sticky; bottom: var(--s2); z-index: 5; display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0;
  padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: var(--r-lg); background: var(--glass-strong, var(--surface));
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); }
.lib-bar[hidden] { display: none; }
.lib-bar .btn { flex: none; }
/* À toi de jouer */
.lib-asks { display: grid; gap: var(--s3); margin: 0 0 var(--s4); }
.lib-ask { display: grid; gap: var(--s2); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.lib-ask.lib-gone { opacity: 0; transform: translateX(16px); }
.lib-ask-title { margin: 0; font-size: var(--fs-md); line-height: 1.35; }
.lib-ask-text { margin: 0; font-size: var(--fs); line-height: 1.5; color: var(--text); }
.lib-rank { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
  color: var(--accent-text); font-weight: 750; font-size: var(--fs-sm); }
.lib-answers { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: var(--s2); margin-top: var(--s1); }
.lib-answers .btn { padding: 0 var(--s2); min-width: 0; }
/* project page */
.lib-proj-meta { margin: var(--s2) var(--s1); }
.lib-about { margin-top: 0; font-size: var(--fs); color: var(--text); line-height: 1.5; }
.lib-open { margin: 0 0 var(--s3); }
/* reader */
.lib-toolbar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: var(--s1); margin: 0 calc(-1 * var(--s1)) var(--s2);
  padding: var(--s1); border-radius: var(--r); background: var(--glass-strong, var(--surface)); backdrop-filter: blur(14px);
  border: 1px solid var(--line); }
.lib-toolbar .grow { flex: 1; }
.lib-tool { width: var(--tap); height: var(--tap); color: var(--text); }
.lib-a { font-weight: 750; font-size: 17px; }
.lib-a.small { font-size: 14px; }
.lib-dl-small { min-height: var(--tap) !important; padding: 0 var(--s3) !important; font-size: var(--fs-sm); }
.lib-updated { margin: 0 var(--s1) var(--s2); }
.lib-up { display: inline-flex; align-items: center; gap: var(--s1); margin: 0 0 var(--s2); }
.lib-toc { margin: 0 0 var(--s3); padding: 0; }
.lib-toc summary { display: flex; align-items: center; gap: var(--s2); min-height: 52px; padding: 0 var(--s4); font-weight: 700; cursor: pointer; list-style: none; }
.lib-toc summary::-webkit-details-marker { display: none; }
.lib-toc ol { margin: 0; padding: 0 var(--s4) var(--s3) calc(var(--s4) + 18px); }
.lib-toc li { margin: 0; }
.lib-toc .link-btn { text-align: left; font-size: var(--fs); padding: 0; }
.lib-fold { margin: 0 0 var(--s2); }
.lib-reader { --reader-size: 17px; font-size: var(--reader-size); line-height: 1.62; color: var(--text); overflow-wrap: anywhere; padding-bottom: var(--s4); }
.lib-reader p { margin: 0 0 0.8em; }
.lib-doc-title { font-size: 1.35em; line-height: 1.25; margin: var(--s2) 0 0.7em; letter-spacing: -0.01em; }
.lib-sec { border-top: 1px solid var(--line); }
.lib-sec > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 52px; padding: var(--s2) 0;
  cursor: pointer; list-style: none; font-weight: 750; font-size: 1.12em; line-height: 1.3; }
.lib-sec > summary::-webkit-details-marker { display: none; }
.lib-sec > summary .ico { flex: none; color: var(--muted); transition: transform 160ms var(--ease); }
.lib-sec[open] > summary .ico { transform: rotate(90deg); }
.lib-sec[open] { padding-bottom: var(--s2); }
.lib-sub { font-size: 1.02em; margin: 1em 0 0.4em; line-height: 1.35; }
h5.lib-sub { font-size: 0.95em; color: var(--muted); }
.lib-list { margin: 0 0 0.8em; padding-left: 1.3em; }
.lib-list li { margin: 0 0 0.35em; }
.lib-list .lib-list { margin: 0.35em 0 0; }
.lib-task { list-style: none; margin-left: -1.3em; display: flex; gap: 0.5em; align-items: baseline; }
.lib-task.done { color: var(--muted); }
.lib-box { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border: 2px solid var(--line-strong); border-radius: 5px;
  font-size: 0.75em; flex: none; color: var(--ok); }
.lib-reader code { font-size: 0.88em; background: var(--surface-2); border-radius: 6px; padding: 1px 5px; }
.lib-code { white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s3);
  font-size: 0.85em; line-height: 1.5; margin: 0 0 0.8em; }
.lib-code code { background: none; padding: 0; }
.lib-quote { margin: 0 0 0.8em; padding: var(--s1) var(--s3); border-left: 3px solid var(--accent); color: var(--muted); }
.lib-reader hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.lib-reader a, .lib-ref { color: var(--accent); font-weight: 600; }
.lib-ref { border: 0; background: none; padding: 0 2px; font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lib-file { font-weight: 600; }
.lib-table { display: grid; gap: var(--s2); margin: 0 0 0.9em; }
.lib-trow { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s3); background: var(--surface); display: grid; gap: 4px; }
.lib-tmain { font-weight: 700; }
.lib-tcell { font-size: 0.92em; }
.lib-tlabel { color: var(--muted); font-size: 0.9em; margin-right: 6px; }
.lib-tlabel::after { content: ' :'; }
.lib-end { margin-top: var(--s3); }
:root[data-motion="none"] .lib-ask, :root[data-motion="none"] .lib-sec > summary .ico { transition: none; }
.lib-proj-meta .chip { white-space: normal; max-width: 100%; line-height: 1.35; }
.lib-read-title { margin-bottom: var(--s2); font-size: var(--fs-lg); }
/* « Discuter → Terminal » (web/modules/terminal.js): the tmux session of the server; the screen itself always dark */
.view.tm { --tm-bg: #0b1020; }
.tm-term { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tm-top { display: flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2) var(--s1) var(--s3); min-height: var(--tap); }
.tm-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.tm-dot.ok { background: var(--ok); } .tm-dot.warn { background: var(--warn); } .tm-dot.bad { background: var(--bad); }
:root[data-motion="full"] .tm-dot.wait { animation: breathe 1.4s ease-in-out infinite; }
.tm-state { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-top .btn.small { min-height: 36px; padding: 0 var(--s3); flex: none; }
.tm-pick { flex: 0 1 140px; min-width: 0; min-height: 36px; padding: 0 var(--s2); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.tm-zoom { font-size: var(--fs-sm); font-weight: 700; width: 40px; }
.tm-screen { flex: 1; min-height: 120px; margin: 0 var(--s2); padding: 6px 4px 4px 6px; border-radius: var(--r); background: var(--tm-bg, #0b1020);
  overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.tm-screen .xterm { height: 100%; }
.tm-screen .xterm-viewport { background: transparent !important; }
[data-state="paused"] .tm-screen, [data-state="retry"] .tm-screen, [data-state="down"] .tm-screen { opacity: 0.55; }
.tm-composer { padding-top: var(--s1); }
.tm-keys { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px var(--s2); scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.tm-keys::-webkit-scrollbar { display: none; }
.tm-key { flex: none; min-width: var(--tap); min-height: var(--tap); padding: 0 var(--s3); border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs); font-weight: 650; touch-action: manipulation; }
.tm-key:active { background: var(--surface-3); transform: scale(0.95); }
.tm-composer textarea { font-family: ui-monospace, "Roboto Mono", monospace; }
.tm-card { margin: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.tm-card h3 { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.tm-card p { margin: 0; }
.tm-lock { margin-top: var(--s5); }
.tm-error { color: var(--bad); font-size: var(--fs-sm); min-height: 1em; }
.tm-error:empty { display: none; }
.bubble .view.tm.in-bubble .tm-zoom, .bubble .view.tm.in-bubble .tm-corner { display: none; }
.bubble .view.tm.in-bubble .tm-screen { margin: 0 var(--s1); }
.bubble[data-view="terminal"] { width: min(420px, calc(100vw - 16px)); }