/* ==========================================================================
   Anagramme 2 — style pixel art
   Thèmes : nuit (défaut), jour, Game Boy, écran ambré
   ========================================================================== */
:root {
  --bg: #07070b;
  --bg2: #0e0e16;
  --panel: #12121c;
  --fg: #ecebf4;
  --muted: #8a89a0;
  --line: #2c2b3d;
  --edge: #ecebf4;
  --shadow: #000;
  --accent: #ffd23f;
  --accent-ink: #1a1400;
  --leaf: #3ddc97;
  --pink: #ff5c8a;
  --blue: #8fb8ff;
  --violet: #c39bff;
  --code-bg: #0b0b12;
  --sel: #ffd23f33;
  --grid: #ffffff08;
  /* boutons et tuiles (varient selon le thème) */
  --btn-edge: var(--accent);
  --btn-shadow: #3a2e00;
  --tile-edge: #fff4c2;
  --tile-shadow: #6b5400;
  --dlg-edge: var(--accent);
  --glow: none;
  --px: 3px;
  --font-px: 'Press Start 2P', monospace;
  --font-vt: 'VT323', monospace;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  color-scheme: dark;
}
/* Jour (suit le système si aucun thème n'est choisi) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f3eddc; --bg2: #ebe3cc; --panel: #fffaee; --fg: #1d1b26; --muted: #6d6a7c;
    --line: #d6ccb0; --edge: #1d1b26; --shadow: #1d1b26; --accent: #f2a900; --accent-ink: #1d1b26;
    --leaf: #179b62; --pink: #d6336c; --blue: #2f6fd6; --violet: #7a4fd1; --code-bg: #f6f0df; --sel: #f2a90033; --grid: #1d1b2609;
    --btn-edge: var(--edge); --btn-shadow: var(--shadow); --tile-edge: var(--edge); --tile-shadow: var(--shadow); --dlg-edge: var(--edge);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f3eddc; --bg2: #ebe3cc; --panel: #fffaee; --fg: #1d1b26; --muted: #6d6a7c;
  --line: #d6ccb0; --edge: #1d1b26; --shadow: #1d1b26; --accent: #f2a900; --accent-ink: #1d1b26;
  --leaf: #179b62; --pink: #d6336c; --blue: #2f6fd6; --violet: #7a4fd1; --code-bg: #f6f0df; --sel: #f2a90033; --grid: #1d1b2609;
  --btn-edge: var(--edge); --btn-shadow: var(--shadow); --tile-edge: var(--edge); --tile-shadow: var(--shadow); --dlg-edge: var(--edge);
  color-scheme: light;
}
/* Game Boy : 4 nuances de vert */
:root[data-theme="gameboy"] {
  --bg: #9bbc0f; --bg2: #8bac0f; --panel: #a7c41f; --fg: #0f380f; --muted: #306230;
  --line: #6f8f0f; --edge: #0f380f; --shadow: #306230; --accent: #306230; --accent-ink: #c4dc5a;
  --leaf: #0f380f; --pink: #0f380f; --blue: #306230; --violet: #306230; --code-bg: #8bac0f; --sel: #30623055; --grid: #0f380f12;
  --btn-edge: #0f380f; --btn-shadow: #0f380f; --tile-edge: #0f380f; --tile-shadow: #0f380f; --dlg-edge: #0f380f;
  color-scheme: light;
}
/* Écran ambré façon terminal des années 80 */
:root[data-theme="amber"] {
  --bg: #0c0700; --bg2: #140c00; --panel: #110a00; --fg: #ffb000; --muted: #9a6a00;
  --line: #3d2900; --edge: #ffb000; --shadow: #000; --accent: #ffcc33; --accent-ink: #140c00;
  --leaf: #ffd27a; --pink: #ff7a1a; --blue: #ffc24d; --violet: #ffa64d; --code-bg: #0a0600; --sel: #ffb00033; --grid: #ffb00008;
  --btn-edge: #ffcc33; --btn-shadow: #4a3000; --tile-edge: #ffe199; --tile-shadow: #4a3000; --dlg-edge: #ffb000;
  --glow: 0 0 6px #ffb00055;
  color-scheme: dark;
}
:root[data-theme="amber"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 200;
  background: repeating-linear-gradient(0deg, #0000 0 2px, #00000033 2px 3px);
}
:root[data-theme="amber"] body { text-shadow: var(--glow); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink); }
button, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------- briques pixel */
.px-btn {
  font-family: var(--font-vt);
  font-size: 22px;
  line-height: 1;
  padding: 7px 12px 8px;
  background: var(--accent);
  color: var(--accent-ink);
  border: var(--px) solid var(--btn-edge);
  box-shadow: 3px 3px 0 var(--btn-shadow);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .05s, box-shadow .05s;
  position: relative;
}
.px-btn:hover { filter: brightness(1.08); }
.px-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.px-btn:disabled { opacity: .5; cursor: not-allowed; }
.px-btn:focus-visible, .seg button:focus-visible, .me:focus-visible, .tb:focus-visible, .tpl:focus-visible { outline: 3px dashed var(--leaf); outline-offset: 3px; }
.px-btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); box-shadow: none; }
.px-btn.ghost:hover { border-color: var(--fg); }
.px-btn.danger { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 3px 3px 0 var(--shadow); }
.px-btn.icon { padding: 6px 9px 7px; min-width: 40px; }
.px-btn.big { font-size: 30px; padding: 12px 22px 14px; }

.px-box {
  background: var(--panel);
  border: var(--px) solid var(--line);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 20px;
}
.px-box.warn { border-color: var(--pink); color: var(--pink); font-family: var(--font-vt); font-size: 22px; }

.field { display: grid; gap: 6px; font-family: var(--font-vt); font-size: 20px; color: var(--muted); }
.field small { font-size: 16px; opacity: .85; }
input[type=text], input[type=password], input:not([type]), select, textarea, .field input {
  font: 15px var(--font-mono);
  color: var(--fg);
  background: var(--bg);
  border: var(--px) solid var(--line);
  padding: 9px 10px;
  width: 100%;
  outline: none;
  border-radius: 0;
}
textarea { resize: vertical; font-family: var(--font-body); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.check { display: flex; gap: 8px; align-items: center; font-family: var(--font-vt); font-size: 20px; cursor: pointer; }
.check input, .pcheck input { width: 16px; height: 16px; accent-color: var(--accent); }
.hint { font-family: var(--font-vt); font-size: 19px; color: var(--muted); margin: 0 0 12px; line-height: 1.15; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dot { position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; background: var(--pink); border: 2px solid var(--bg2); }

/* tuiles de lettres (logo) */
.tile {
  display: inline-grid;
  place-items: center;
  font-family: var(--font-px);
  color: var(--accent-ink);
  background: var(--accent);
  border: var(--px) solid var(--tile-edge);
  box-shadow: 4px 4px 0 var(--tile-shadow);
}

/* --------------------------------------------------------------- accueil */
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: pixelated; }
.home {
  position: relative; z-index: 1;
  min-height: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 16px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.theme-btn { position: fixed; top: 16px; right: 16px; z-index: 2; }
.tiles { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; margin: 0; }
.tiles .tile {
  width: min(64px, calc((100vw - 32px - 64px) / 9)); height: min(64px, calc((100vw - 32px - 64px) / 9));
  font-size: min(30px, calc((100vw - 96px) / 20));
  transition: transform .45s cubic-bezier(.5, -0.4, .3, 1.4);
  animation: drop .5s calc(var(--i) * 60ms) both steps(5);
}
.tiles .tile:nth-child(3n) { background: var(--leaf); }
@keyframes drop { from { transform: translateY(-40px); opacity: 0; } }
.tagline { font-family: var(--font-vt); font-size: 26px; color: var(--muted); margin: -6px 0 0; text-align: center; }
.create { display: grid; gap: 16px; width: min(100%, 680px); }
.create .label { font-family: var(--font-px); font-size: 11px; font-weight: 400; color: var(--muted); margin: 0; letter-spacing: 1px; }
.create > .px-btn.big { width: 100%; }
.tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tpl {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  background: var(--bg); border: var(--px) solid var(--line); padding: 10px 10px 9px;
}
.tpl i { font-style: normal; font-size: 22px; line-height: 1; color: var(--accent); }
.tpl b { font-family: var(--font-vt); font-size: 21px; font-weight: 400; line-height: 1; }
.tpl small { color: var(--muted); font-size: 12.5px; line-height: 1.25; }
.tpl:hover { border-color: var(--fg); }
.tpl[aria-pressed="true"] { border-color: var(--accent); box-shadow: 4px 4px 0 var(--btn-shadow); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.opt { width: 100%; font-family: var(--font-vt); font-size: 20px; }
.opt summary { cursor: pointer; color: var(--muted); }
.opt .field { margin-top: 10px; }

.recent { width: min(100%, 680px); }
.recent h2 { font-family: var(--font-px); font-size: 12px; letter-spacing: 1px; color: var(--muted); font-weight: 400; }
.recent h2 small { font-family: var(--font-vt); font-size: 18px; letter-spacing: 0; }
.recent ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.recent li { display: flex; align-items: center; gap: 10px; background: var(--panel); border: var(--px) solid var(--line); padding: 8px 10px; }
.recent li:hover { border-color: var(--accent); }
.recent li a { flex: 1; color: var(--fg); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent li time { font-family: var(--font-vt); font-size: 18px; color: var(--muted); }
.recent li button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; }
.recent li button:hover { color: var(--pink); }
.foot { margin-top: auto; font-family: var(--font-vt); font-size: 19px; color: var(--muted); text-align: center; }
.foot .ok { color: var(--leaf); font-weight: 400; }
.foot .off { color: var(--muted); font-weight: 400; }
.burst { position: fixed; width: 6px; height: 6px; pointer-events: none; z-index: 99; }

/* --------------------------------------------------------------- barre du haut */
body.mode-edit, body.mode-read { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg2);
  border-bottom: var(--px) solid var(--line);
  min-height: 60px;
  position: relative; z-index: 20;
}
.mini-logo { text-decoration: none; }
.mini-logo .tile { width: 36px; height: 36px; font-size: 15px; box-shadow: 3px 3px 0 var(--tile-shadow); }
.doc-title {
  font-family: var(--font-vt); font-size: 26px; line-height: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28vw; padding-left: 4px;
}
.spacer { flex: 1; }
.status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-vt); font-size: 18px; color: var(--muted); white-space: nowrap; }
.status i { width: 10px; height: 10px; background: var(--muted); display: inline-block; }
.status.live i { background: var(--leaf); box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px color-mix(in srgb, var(--leaf) 40%, transparent); }
.status.poll i { background: var(--accent); }
.status.offline i { background: var(--pink); animation: blink 1s steps(2) infinite; }
.status.saving b::after { content: ' ·'; animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.badge { font-family: var(--font-px); font-size: 10px; padding: 6px 8px; border: 2px solid var(--leaf); color: var(--leaf); white-space: nowrap; }

.seg { display: inline-flex; border: var(--px) solid var(--line); }
.seg button { font-family: var(--font-vt); font-size: 20px; line-height: 1; background: transparent; border: 0; padding: 7px 10px 8px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.seg button + button { border-left: var(--px) solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

.users { display: flex; }
.users .u {
  width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--font-px); font-size: 11px; color: #111;
  border: 2px solid var(--bg2); margin-left: -6px; position: relative; cursor: default;
  animation: pop .3s steps(3);
}
.users .u:first-child { margin-left: 0; }
.users .u.more { background: var(--line); color: var(--fg); }
@keyframes pop { from { transform: scale(.4); } }
.me {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: var(--px) solid var(--line); padding: 5px 10px 6px;
  font-family: var(--font-vt); font-size: 20px; line-height: 1; max-width: 160px;
}
.me:hover { border-color: var(--fg); }
.me i { width: 14px; height: 14px; flex: none; }
.me span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* menu ⋯ */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 250px;
  background: var(--panel); border: var(--px) solid var(--dlg-edge); box-shadow: 6px 6px 0 var(--shadow);
  padding: 6px; display: grid;
}
.menu button {
  text-align: left; background: none; border: 0; padding: 7px 10px; cursor: pointer;
  font-family: var(--font-vt); font-size: 20px; line-height: 1.1; color: var(--fg);
}
.menu button:hover, .menu button:focus-visible { background: var(--accent); color: var(--accent-ink); outline: none; }
.menu button[aria-checked]::after { content: ' ○'; float: right; color: var(--muted); }
.menu button[aria-checked="true"]::after { content: ' ●'; color: var(--leaf); }
.menu button:hover::after { color: inherit; }
.menu-label { font-family: var(--font-px); font-size: 9px; color: var(--muted); padding: 8px 10px 4px; letter-spacing: 1px; }
.menu-sep { height: 3px; background: var(--line); margin: 6px 0; }

.banner {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 6px 12px; background: color-mix(in srgb, var(--blue) 18%, var(--bg2));
  border-bottom: var(--px) solid var(--line); font-family: var(--font-vt); font-size: 20px;
}

/* --------------------------------------------------------------- zone de travail */
.workspace { flex: 1; display: flex; min-height: 0; }
.panes { flex: 1; display: flex; min-height: 0; min-width: 0; }
.pane { flex: 1; min-width: 0; overflow: auto; position: relative; }
.pane.editor { border-right: var(--px) solid var(--line); background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
.cm-wrap { flex: 1; min-height: 0; }
.pane.preview {
  background: var(--panel);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.view-edit .preview, .view-view .editor { display: none; }
.view-view .preview .md { max-width: 820px; }

/* barre de mise en forme */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  padding: 5px 8px; border-bottom: var(--px) solid var(--line); background: var(--bg2);
}
.tb {
  min-width: 32px; height: 32px; padding: 0 7px; cursor: pointer;
  background: transparent; border: 2px solid transparent; color: var(--fg);
  font-family: var(--font-vt); font-size: 21px; line-height: 1;
}
.tb:hover { border-color: var(--line); background: var(--panel); }
.tb:active { background: var(--accent); color: var(--accent-ink); }
.tb.b { font-weight: 700; font-family: var(--font-body); font-size: 15px; }
.tb.i { font-style: italic; font-family: var(--font-body); font-size: 15px; }
.tb.s { text-decoration: line-through; font-family: var(--font-body); font-size: 15px; }
.tb-sep { width: 3px; height: 22px; background: var(--line); margin: 0 4px; }
.tb.hl { color: var(--accent); }

/* légende des auteurs */
.legend {
  display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 6px 10px;
  border-top: var(--px) solid var(--line); background: var(--bg2);
  font-family: var(--font-vt); font-size: 18px;
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; display: inline-block; }

/* CodeMirror */
.CodeMirror { height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.65 var(--font-mono); }
.CodeMirror-lines { padding: 22px 0 40vh; }
.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { padding: 0 24px; }
.CodeMirror-cursor { border-left: 3px solid var(--accent) !important; }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: var(--sel) !important; }
.CodeMirror-activeline-background { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.CodeMirror-placeholder { color: var(--muted) !important; }
.cm-s-default .cm-header { color: var(--accent); font-weight: 600; }
.cm-s-default .cm-header-1 { font-size: 1.25em; }
.cm-s-default .cm-header-2 { font-size: 1.12em; }
.cm-s-default .cm-strong { font-weight: 700; }
.cm-s-default .cm-em { font-style: italic; }
.cm-s-default .cm-link, .cm-s-default .cm-url { color: var(--leaf); }
.cm-s-default .cm-quote { color: var(--muted); font-style: italic; }
.cm-s-default .cm-comment { color: var(--pink); }
.cm-s-default .cm-variable-2, .cm-s-default .cm-variable-3 { color: var(--blue); }
.cm-s-default .cm-keyword { color: var(--pink); }
.cm-s-default .cm-string { color: var(--leaf); }
.cm-s-default .cm-number, .cm-s-default .cm-atom { color: var(--violet); }
.cm-s-default .cm-tag { color: var(--pink); }
.cm-s-default .cm-attribute { color: var(--blue); }
.cm-s-default .cm-formatting { opacity: .55; }
.cm-s-default .cm-hr { color: var(--muted); }
.CodeMirror.frozen { opacity: .75; }

/* curseurs distants */
.rc { position: relative; border-left: 2px solid var(--c); margin-left: -1px; margin-right: -1px; }
.rc::before { content: ''; position: absolute; top: -3px; left: -4px; width: 6px; height: 6px; background: var(--c); }
.rc .flag {
  position: absolute; bottom: 100%; left: -2px; z-index: 5;
  font: 15px/1 var(--font-vt); color: #111; background: var(--c);
  padding: 2px 5px 3px; white-space: nowrap; pointer-events: none; transition: opacity .4s; text-shadow: none;
}
.rc.idle .flag { opacity: 0; }
/* passages commentés */
.cmt { background: color-mix(in srgb, var(--accent) 22%, transparent); border-bottom: 2px dotted var(--accent); cursor: pointer; }
.cmt.active { background: color-mix(in srgb, var(--accent) 45%, transparent); }

/* --------------------------------------------------------------- rendu markdown */
.md { max-width: 760px; margin: 0 auto; padding: 32px 32px 30vh; font-size: 16.5px; line-height: 1.7; overflow-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4 { font-family: var(--font-vt); font-weight: 400; line-height: 1.1; margin: 1.6em 0 .5em; }
.md h1 { font-size: 46px; border-bottom: var(--px) solid var(--line); padding-bottom: 10px; }
.md h2 { font-size: 36px; }
.md h3 { font-size: 29px; }
.md h4 { font-size: 24px; color: var(--muted); }
.md h1::before, .md h2::before { content: ''; display: inline-block; width: .32em; height: .32em; background: var(--accent); margin-right: .35em; vertical-align: .12em; }
.md a { color: var(--leaf); text-underline-offset: 3px; }
.md code { font: .88em var(--font-mono); background: var(--code-bg); border: 1px solid var(--line); padding: 1px 5px; }
.md pre { background: var(--code-bg); border: var(--px) solid var(--line); padding: 14px 16px; overflow: auto; box-shadow: 4px 4px 0 var(--shadow); }
.md pre code { background: none; border: 0; padding: 0; font-size: 14px; line-height: 1.55; }
.md blockquote { margin: 1em 0; padding: 4px 16px; border-left: 6px solid var(--accent); color: var(--muted); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.md table { border-collapse: collapse; width: 100%; display: block; overflow: auto; }
.md th, .md td { border: 2px solid var(--line); padding: 6px 10px; text-align: left; }
.md th { background: var(--bg2); font-family: var(--font-vt); font-size: 20px; font-weight: 400; }
.md img { max-width: 100%; border: var(--px) solid var(--line); }
.md hr { border: 0; height: 6px; margin: 2em 0; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.md mark { background: var(--accent); color: var(--accent-ink); padding: 0 3px; }
.md ul.contains-task-list { list-style: none; padding-left: 4px; }
.md .task-list-item input { appearance: none; width: 16px; height: 16px; border: 3px solid var(--fg); vertical-align: -2px; margin: 0 8px 0 0; cursor: pointer; }
.md .task-list-item input:checked { background: var(--leaf); border-color: var(--leaf); box-shadow: inset 0 0 0 2px var(--panel); }
.md .task-list-item input:disabled { cursor: default; }
.md .mermaid { text-align: center; }
.md .mermaid svg { max-width: 100%; height: auto; }
.md .flash { animation: flash 1.4s steps(6); }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 35%, transparent); } }

.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: var(--pink); }
.hljs-string, .hljs-attr, .hljs-template-variable { color: var(--leaf); }
.hljs-number, .hljs-literal { color: var(--violet); }
.hljs-comment, .hljs-quote { color: var(--muted); font-style: italic; }
.hljs-title, .hljs-section, .hljs-function .hljs-title { color: var(--accent); }
.hljs-type, .hljs-class .hljs-title, .hljs-variable { color: var(--blue); }
.hljs-meta, .hljs-tag { color: var(--muted); }

/* --------------------------------------------------------------- panneau latéral */
.drawer {
  width: 360px; flex: none; display: flex; flex-direction: column; min-height: 0;
  border-left: var(--px) solid var(--line); background: var(--bg2);
}
.tabs { display: flex; border-bottom: var(--px) solid var(--line); }
.tabs button {
  flex: 1; background: none; border: 0; cursor: pointer; padding: 9px 4px; position: relative;
  font-family: var(--font-vt); font-size: 19px; line-height: 1; color: var(--muted);
}
.tabs button span { display: none; }
.tabs button[aria-selected="true"] { background: var(--panel); color: var(--fg); box-shadow: inset 0 -3px 0 var(--accent); }
.tabs button[aria-selected="true"] span { display: inline; }
.tabs .close { flex: 0 0 40px; }
.tabs .dot { top: 4px; right: 6px; }
.tab { display: none; flex: 1; min-height: 0; overflow: auto; padding: 14px; flex-direction: column; gap: 10px; }
.tab.on { display: flex; }

.toc { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 4px 8px; color: var(--fg); text-decoration: none; font-family: var(--font-vt); font-size: 20px; line-height: 1.1; border-left: 3px solid transparent; }
.toc a:hover { border-left-color: var(--accent); background: var(--panel); }
.toc .l2 a { padding-left: 22px; } .toc .l3 a { padding-left: 36px; color: var(--muted); } .toc .l4 a { padding-left: 50px; color: var(--muted); font-size: 18px; }
.empty { color: var(--muted); font-family: var(--font-vt); font-size: 19px; text-align: center; padding: 20px 0; }

.chat { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; align-content: start; flex: 1; overflow: auto; }
.chat li { display: grid; gap: 2px; }
.chat .who { font-family: var(--font-vt); font-size: 18px; line-height: 1; display: flex; gap: 8px; align-items: center; }
.chat .who i { width: 10px; height: 10px; display: inline-block; }
.chat .who time { color: var(--muted); font-size: 16px; }
.chat .txt { background: var(--panel); border: 2px solid var(--line); padding: 6px 9px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.chat li.mine .txt { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.chat-form { display: flex; gap: 6px; align-items: stretch; flex: none; }
.chat-form textarea { font-size: 14.5px; resize: none; }

.threads { display: grid; gap: 10px; align-content: start; }
.thread { background: var(--panel); border: var(--px) solid var(--line); padding: 10px; display: grid; gap: 8px; cursor: pointer; }
.thread.active { border-color: var(--accent); }
.thread.resolved { opacity: .6; }
.thread.orphan .quote { text-decoration: line-through; }
.thread .quote, .px-dialog .quote { margin: 0; padding: 2px 8px; border-left: 4px solid var(--accent); color: var(--muted); font-size: 13.5px; font-style: italic; max-height: 4.5em; overflow: hidden; }
.thread .msg { display: grid; gap: 1px; }
.thread .msg + .msg { border-top: 2px dashed var(--line); padding-top: 6px; }
.thread .msg p { margin: 0; font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.thread .who { font-family: var(--font-vt); font-size: 17px; display: flex; gap: 6px; align-items: center; }
.thread .who i { width: 9px; height: 9px; display: inline-block; }
.thread .who time { color: var(--muted); }
.thread .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.thread .acts button { background: none; border: 2px solid var(--line); cursor: pointer; font-family: var(--font-vt); font-size: 17px; padding: 2px 8px; }
.thread .acts button:hover { border-color: var(--fg); }
.thread .reply { display: flex; gap: 6px; }
.thread .reply input { font-size: 13px; padding: 6px 8px; }

.versions { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.versions li { background: var(--panel); border: 2px solid var(--line); padding: 8px 10px; display: grid; gap: 3px; cursor: pointer; }
.versions li:hover { border-color: var(--accent); }
.versions b { font-family: var(--font-vt); font-size: 20px; font-weight: 400; line-height: 1; }
.versions small { color: var(--muted); font-size: 12.5px; }
.versions .lab { color: var(--accent); }

/* --------------------------------------------------------------- présentation */
.present {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; flex-direction: column;
}
.slide-frame { flex: 1; min-height: 0; display: grid; place-items: center; padding: 3vmin; overflow: hidden; }
.md.slide {
  width: min(100%, calc((100dvh - 110px) * 16 / 9)); aspect-ratio: 16 / 9; max-height: 100%; overflow: auto; margin: 0;
  padding: 5vmin 6vmin; font-size: clamp(18px, 2.6vmin + 6px, 34px);
  background: var(--panel); border: var(--px) solid var(--line); box-shadow: 10px 10px 0 var(--shadow);
  animation: slide-in .25s steps(4);
}
.md.slide h1 { font-size: 2.8em; border: 0; }
.md.slide h2 { font-size: 2.2em; }
.md.slide h3 { font-size: 1.7em; }
.md.slide pre code { font-size: .7em; }
.md.slide.title-slide { text-align: center; display: grid; place-content: center; }
.md.slide.title-slide h1 { border: 0; }
@keyframes slide-in { from { transform: translateX(14px); opacity: 0; } }
.present-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-top: var(--px) solid var(--line); background: var(--bg2);
  font-family: var(--font-vt); font-size: 20px; transition: opacity .3s;
}
.present.idle .present-bar { opacity: 0; }
.present.idle { cursor: none; }
.pbtn { background: none; border: 2px solid var(--line); cursor: pointer; min-width: 38px; height: 34px; font-family: var(--font-vt); font-size: 20px; color: var(--fg); }
.pbtn:hover { border-color: var(--fg); }
.count { min-width: 64px; text-align: center; }
.pprog { flex: 1; height: 10px; background: var(--line); }
.pprog i { display: block; height: 100%; background: var(--accent); transition: width .2s steps(4); }
.pcheck { display: flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; }

/* --------------------------------------------------------------- verrou */
.lock-screen { flex: 1; display: grid; place-items: center; padding: 16px; }
.lock-form { display: grid; gap: 14px; width: min(100%, 360px); text-align: center; margin: 0 auto; }
.lock-form h2 { font-family: var(--font-px); font-size: 14px; font-weight: 400; margin: 0; }
.lock-form p { margin: 0; color: var(--muted); }
.lock-form .err { color: var(--pink); font-family: var(--font-vt); font-size: 20px; }
.lock-ico {
  width: 48px; height: 48px; margin: 0 auto; background: var(--accent);
  clip-path: polygon(25% 0,75% 0,75% 8%,83% 8%,83% 42%,100% 42%,100% 100%,0 100%,0 42%,17% 42%,17% 8%,25% 8%,25% 0,
                     33% 17%,33% 42%,67% 42%,67% 17%,33% 17%);
}
.gone { flex: 1; display: grid; place-items: center; text-align: center; font-family: var(--font-vt); font-size: 26px; padding: 20px; }

/* --------------------------------------------------------------- dialogues */
.px-dialog {
  background: var(--panel); color: var(--fg);
  border: var(--px) solid var(--dlg-edge); box-shadow: 8px 8px 0 var(--shadow);
  padding: 22px; width: min(92vw, 500px);
}
.px-dialog.wide { width: min(94vw, 860px); }
.px-dialog::backdrop { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(2px); }
.px-dialog h3 { font-family: var(--font-px); font-size: 14px; font-weight: 400; margin: 0 0 18px; color: var(--accent); line-height: 1.4; }
.px-dialog .field, .px-dialog .check { margin-bottom: 16px; }
.px-dialog p { margin: 0 0 14px; }
.px-dialog form[method=dialog] { margin-top: 14px; }
.px-dialog textarea { margin-bottom: 14px; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; font-size: 13px; }
.owner-box { border-top: var(--px) dashed var(--line); padding-top: 14px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { width: 34px; height: 34px; border: 3px solid transparent; cursor: pointer; padding: 0; }
.swatches button[aria-pressed="true"] { border-color: var(--fg); box-shadow: 0 0 0 3px var(--panel) inset; }
.qr-dlg { text-align: center; width: auto; max-width: 96vw; }
.qr-dlg canvas { width: min(70vh, 80vw); height: auto; image-rendering: pixelated; border: var(--px) solid var(--edge); }
.qr-url { font: 14px var(--font-mono); overflow-wrap: anywhere; color: var(--muted); max-width: min(70vh, 80vw); margin: 12px auto 0 !important; }
.version-view { max-height: 60vh; overflow: auto; padding: 18px; border: var(--px) solid var(--line); background: var(--bg); margin-bottom: 14px; }

/* --------------------------------------------------------------- admin */
.admin { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; display: grid; gap: 20px; }
.admin-head { display: flex; align-items: center; gap: 14px; }
.admin-head h1 { font-family: var(--font-px); font-size: 16px; font-weight: 400; flex: 1; margin: 0; }
.admin h2 { font-family: var(--font-vt); font-size: 30px; font-weight: 400; margin: 0 0 12px; }
.admin h3 { font-family: var(--font-vt); font-size: 22px; font-weight: 400; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.stat { display: grid; gap: 4px; padding: 14px; }
.stat b { font-family: var(--font-vt); font-size: 38px; font-weight: 400; color: var(--accent); line-height: 1; }
.stat span { color: var(--muted); }
.table-wrap { overflow: auto; margin-bottom: 12px; }
.admin-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.admin-table th, .admin-table td { border: 2px solid var(--line); padding: 6px 8px; text-align: left; white-space: nowrap; }
.admin-table th { font-family: var(--font-vt); font-size: 19px; font-weight: 400; background: var(--bg2); }
.admin-table td.t { white-space: normal; min-width: 180px; font-weight: 600; }
.backups { padding-left: 20px; }
.flash { border-color: var(--leaf); font-family: var(--font-vt); font-size: 22px; }

/* --------------------------------------------------------------- toasts */
.toasts { position: fixed; left: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 150; }
.toast {
  font-family: var(--font-vt); font-size: 20px; line-height: 1.1;
  background: var(--fg); color: var(--bg); padding: 8px 12px 9px; max-width: 380px;
  box-shadow: 4px 4px 0 var(--accent); animation: toast-in .25s steps(4) both; text-shadow: none;
}
.toast button { background: var(--accent); color: var(--accent-ink); border: 0; font: inherit; padding: 1px 8px; cursor: pointer; margin-left: 4px; }
.toast.err { box-shadow: 4px 4px 0 var(--pink); }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1440px) {
  .seg span { display: none; }
  .doc-title { max-width: 20vw; }
}
@media (max-width: 1100px) {
  .drawer { position: fixed; right: 0; top: 63px; bottom: 0; z-index: 25; width: min(380px, 92vw); box-shadow: -6px 0 0 var(--shadow); }
  .seg span, #share-btn span, #present-btn span { display: none; }
}
@media (max-width: 860px) {
  .doc-title { max-width: 22vw; font-size: 22px; }
  .status b { display: none; }
  .me span { display: none; }
  .view-both .preview { display: none; }
  .view-both .editor { border-right: 0; }
  .users { display: none; }
}
@media (max-width: 560px) {
  .bar { gap: 5px; padding: 8px; }
  .doc-title { display: none; }
  .seg button { padding: 7px 7px 8px; }
  .md { padding: 22px 16px 30vh; }
  .md h1 { font-size: 38px; }
  .CodeMirror pre.CodeMirror-line { padding: 0 14px; }
  .present-bar { flex-wrap: wrap; }
  .pprog { flex-basis: 100%; order: 10; }
}

@media print {
  .bar, .toasts, .editor, .drawer, .banner, .present { display: none !important; }
  body { height: auto !important; overflow: visible !important; display: block !important; background: #fff !important; }
  .workspace, .panes { display: block !important; }
  .pane.preview { display: block !important; background: #fff !important; overflow: visible; }
  .md { color: #000; padding: 0; max-width: none; }
  .md pre { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}