/*
 * PersonnalDB, theme console retro-futuriste.
 * Toutes les couleurs sont des variables. Contraste AA verifie par tests/js/theme.test.js.
 */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

:root {
  --bg: #181a1f;
  --surface: #1f2228;
  --surface-2: #262a31;
  --border: #3a3f4a;
  --fg: #e6e8eb;
  --muted: #9aa1ac;
  --cyan-light: #7fe7f2;
  --cyan-dark: #1fa9b8;
  --violet: #b48cff;
  --orange: #ffa94d;
  --red: #ff6b6b;
  --select-bg: #2e2747;
  --focus: var(--cyan-light);
  --font-mono: "JetBrains Mono", ui-monospace, "Fira Code", Menlo, Consolas, monospace;
  color-scheme: dark;
}

/* Theme alternatif a fort contraste (commande `theme` au jalon 7). */
:root[data-theme="contrast"] {
  --bg: #0e0f12;
  --surface: #15171b;
  --surface-2: #1c1f24;
  --border: #6b7280;
  --fg: #ffffff;
  --muted: #c7ccd4;
  --cyan-light: #9ff3fb;
  --cyan-dark: #3cc7d6;
  --violet: #cdb2ff;
  --orange: #ffc078;
  --red: #ff8787;
  --select-bg: #3b2f63;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--font-mono);
}

::selection { background: var(--select-bg); color: var(--fg); }

main { max-width: 34rem; margin: 10vh auto 0; padding: 0 1rem; }
main.shell-host { max-width: none; margin: 0; padding: 0; height: 100%; }
/* Ecrans centres hors espace de travail seulement: sinon la vue Users (panel.wide) reduisait tout le shell. */
main:not(.shell-host):has(.panel.wide) { max-width: 64rem; }

.panel { background: var(--surface); border: 1px solid var(--border); padding: 1.25rem 1.5rem; }
.panel.wide { max-width: 64rem; }

h1 { margin: 0 0 1rem; font-size: 1.05rem; color: var(--cyan-light); font-weight: 700; }
h1::before { content: "> "; color: var(--cyan-dark); }
h1::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  margin-left: 0.25em;
  vertical-align: text-bottom;
  background: var(--cyan-light);
  animation: blink 1.1s steps(1) infinite;
}
h2 { font-size: 0.95rem; color: var(--violet); margin: 1.25rem 0 0.5rem; font-weight: 700; }

@keyframes blink { 50% { opacity: 0; } }

label { display: block; margin: 0.75rem 0 0.25rem; color: var(--muted); }

input, textarea, select {
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
}
input, textarea { width: 100%; padding: 0.45rem 0.6rem; }
textarea { resize: vertical; }
input[type="file"] { padding: 0.35rem; }
input[type="checkbox"] { width: auto; margin: 0.2rem 0.6rem 0 0; accent-color: var(--cyan-dark); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
input:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; }

button, select, label.button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.4rem 0.9rem;
  background: transparent;
  color: var(--cyan-light);
  border: 1px solid var(--cyan-dark);
  font: inherit;
  cursor: pointer;
}
button:hover, label.button:hover { background: var(--cyan-dark); color: var(--bg); }
button[disabled] { opacity: 0.5; cursor: wait; }
button.danger { color: var(--red); border-color: var(--red); }
button.danger:hover { background: var(--red); color: var(--bg); }
button.link { margin: 0; padding: 0; border: 0; color: var(--violet); text-decoration: underline; }
button.link:hover { background: transparent; color: var(--cyan-light); }

.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.row.tight { gap: 0.35rem; }
.row.tight button, .row.tight select { margin-top: 0; padding: 0.15rem 0.55rem; }
.row label { margin: 0; }
.row input { width: auto; flex: 1 1 14rem; }
/* Champ et bouton sur une ligne: meme hauteur, alignes au pixel. */
.row.inline { align-items: stretch; flex-wrap: nowrap; }
.row.inline > label { align-self: center; white-space: nowrap; }
.row.inline > button, .row.inline > input { margin: 0; }
.row.inline > button { flex: none; white-space: nowrap; }
.settings-grid { display: grid; grid-template-columns: max-content minmax(10rem, 18rem) 1fr; gap: 0.5rem 1rem; align-items: center; }
.settings-grid label { margin: 0; }
.settings-grid .hint { margin: 0; font-size: 0.85rem; }
.settings-grid input { text-align: right; }
.unit { align-self: center; color: var(--muted); }
table .num { text-align: right; font-variant-numeric: tabular-nums; }
table tfoot td { border-top: 1px solid var(--border); color: var(--cyan-light); }
.gauge { display: inline-block; width: 6rem; height: 0.55rem; border: 1px solid var(--border); vertical-align: middle; }
.gauge > span { display: block; height: 100%; background: var(--cyan-dark); }
.error { color: var(--red); min-height: 1.5em; margin: 0.6rem 0 0; }
.muted { color: var(--muted); }
.warn { color: var(--orange); }
.check { display: flex; align-items: flex-start; }
.check label { margin: 0; color: var(--fg); }
.dialog select { display: block; width: 100%; margin-top: 0; padding: 0.45rem 0.6rem; color: var(--fg); border-color: var(--border); }
.dialog label.check { display: flex; align-items: center; gap: 0.2rem; color: var(--fg); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
th, td { text-align: left; padding: 0.25rem 0.5rem 0.25rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--violet); font-weight: normal; }
caption { text-align: left; color: var(--muted); }

.qr { display: block; margin: 1rem 0; image-rendering: pixelated; max-width: 100%; }
.mono-break { word-break: break-all; color: var(--cyan-light); }
.codes { columns: 2; padding-left: 1.2rem; color: var(--cyan-light); }
.status-pending { color: var(--orange); }
.status-disabled { color: var(--red); }
.status-active { color: var(--cyan-light); }

/* ---- Shell: explorateur, panneau principal, barre de statut ---- */
.shell {
  display: grid;
  grid-template-columns: var(--side-w, 20rem) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top top" "side main" "status status";
  height: 100vh;
}
.topbar {
  grid-area: top;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.topbar .brand { color: var(--cyan-light); font-weight: 700; margin-right: 1rem; }
.topbar .brand::before { content: "\2588 "; color: var(--cyan-dark); }
.topbar button { margin: 0; padding: 0.15rem 0.6rem; }
.topbar .spacer { flex: 1; }
.topbar select { margin: 0; padding: 0.1rem 0.3rem; }

.pane {
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  margin: 0.5rem;
  position: relative;
}
.pane > .pane-title {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.2rem 0.6rem;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.pane > .pane-title::before { content: "\2500\2500 "; color: var(--cyan-dark); }
.pane-side { grid-area: side; margin-right: 0; }
.pane-main { grid-area: main; }
.pane-main > .content { padding: 1rem 1.25rem; }
.pane-main .panel { border: 0; padding: 0; background: transparent; }
.pane-main .panel.wide { max-width: none; }
/* Explorateur: cadre discret sur toute la zone tant qu'elle a le focus (clic ou Alt+1). */
.pane-side { cursor: default; }
.pane-side:focus-within { border-color: var(--cyan-dark); box-shadow: inset 0 0 0 1px var(--cyan-dark); }
.pane.dragging, .tree [aria-selected="true"].drop-target, .tree .drop-target { outline: 2px dashed var(--orange); outline-offset: -3px; }

.statusbar {
  grid-area: status;
  display: flex;
  gap: 0;
  font-size: 0.85rem;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}
.statusbar > span { padding: 0.15rem 0.7rem; border-right: 1px solid var(--border); }
.statusbar .mode { background: var(--cyan-dark); color: var(--bg); font-weight: 700; }
.statusbar .mode.insert { background: var(--violet); }
.statusbar .mode.trash { background: var(--orange); }
.statusbar .path { flex: 1; overflow: hidden; text-overflow: ellipsis; color: var(--cyan-light); }
.statusbar .lock-on { color: var(--orange); }
.statusbar .lock-off { color: var(--cyan-light); }

/* ---- Arbre ---- */
.tree { list-style: none; margin: 0; padding: 0.25rem 0; }
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree .item {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.05rem 0.6rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tree .item:hover { background: var(--surface-2); }
.tree [aria-selected="true"] > .item { background: var(--select-bg); color: var(--fg); }
.tree li:focus { outline: none; }
.tree li:focus-visible > .item { outline: 2px solid var(--focus); outline-offset: -2px; }
.tree .twisty { width: 1ch; color: var(--cyan-dark); }
.tree .folder > .item .name { color: var(--violet); }
.tree .broken > .item .name { color: var(--red); }
.tree .incomplete > .item .name { color: var(--orange); }
.tree .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tree .meta { flex: none; margin-left: auto; padding-left: 0.6rem; color: var(--muted); font-size: 0.8rem; }
.tree input { padding: 0 0.3rem; margin: 0; }
.tree-empty { padding: 0.5rem 0.75rem; color: var(--muted); }

/* ---- Menus et dialogues ---- */
.menu {
  position: fixed;
  z-index: 20;
  min-width: 14rem;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--cyan-dark);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.menu [role="menuitem"] { padding: 0.25rem 0.9rem; cursor: pointer; }
.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus { background: var(--select-bg); outline: none; }
.menu [role="menuitem"].danger { color: var(--red); }
.menu .kbd { float: right; color: var(--muted); margin-left: 1.5rem; }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 0.25rem 0; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(10, 11, 14, 0.7);
}
.dialog {
  width: min(36rem, calc(100vw - 2rem));
  max-height: 80vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--cyan-dark);
  padding: 1.1rem 1.25rem;
}
.dialog .list { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 40vh; overflow: auto; border: 1px solid var(--border); }
.dialog .list li { padding: 0.15rem 0.6rem; cursor: pointer; }
.dialog .list li[aria-selected="true"] { background: var(--select-bg); }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.35em;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  color: var(--cyan-light);
  text-align: center;
  font: inherit;
  font-size: 0.85em;
}
.keys td:first-child { white-space: nowrap; padding-right: 1.5rem; }

/* ---- Animation de demarrage ---- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 40;
  padding: 2rem;
  background: var(--bg);
  color: var(--cyan-light);
  white-space: pre;
}
.boot .line { opacity: 0; animation: bootline 0.12s forwards; }
@keyframes bootline { to { opacity: 1; } }

/* Poignee de redimensionnement de l'explorateur, a cheval sur sa bordure droite. */
.side-resizer {
  grid-area: side;
  justify-self: end;
  width: 0.6rem;
  margin: 0.5rem -0.55rem 0.5rem 0;
  z-index: 3;
  cursor: col-resize;
  touch-action: none;
}
.side-resizer:hover, .side-resizer:focus-visible, .shell.resizing .side-resizer { background: linear-gradient(90deg, transparent 40%, var(--cyan-dark) 40% 60%, transparent 60%); outline: none; }
.shell.resizing { cursor: col-resize; user-select: none; }

@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 40vh 1fr auto; grid-template-areas: "top" "side" "main" "status"; }
  .pane-side { margin-right: 0.5rem; }
  .side-resizer { display: none; }
}

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

/* ---- Editeur ---- */
.pane-main > .content:has(.editor) { padding: 0; height: calc(100% - 1.8rem); }

/* ---- Visionneuse ---- */
.pane-main > .content:has(.viewer) { padding: 0; height: calc(100% - 1.8rem); }
.viewer { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.view-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.4rem 0.9rem; border-bottom: 1px solid var(--border); }
button.back { margin: 0; padding: 0.15rem 0.6rem; white-space: nowrap; }
button.back[hidden] { display: none; }
.details-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
.details-head h1 { flex: 1 1 auto; min-width: 0; }
.view-bar h1 { margin: 0; font-size: 1rem; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-bar button { margin: 0; padding: 0.15rem 0.6rem; }
.view-bar .spacer { flex: 1; }
.view-status { margin: 0; padding: 0 0.9rem; min-height: 0; }
.view-status:empty { display: none; }
.view-body { flex: 1; min-height: 0; overflow: auto; padding: 0.75rem; }
.view-image, .view-video, .view-audio { display: flex; align-items: center; justify-content: center; }
.view-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; image-rendering: auto; }
.view-img.actual { max-width: none; max-height: none; cursor: zoom-out; }
.view-image:has(.view-img.actual) { display: block; }
.view-video-el { max-width: 100%; max-height: 100%; background: #000; }
.view-audio-el { width: min(40rem, 100%); }
.view-pdf { background: var(--surface-2); }
.pdf-page { display: flex; justify-content: center; margin: 0 auto 0.75rem; }
.pdf-page canvas { background: #fff; box-shadow: 0 0 0 1px var(--border); }
.code-view { margin: 0; padding: 0.5rem 0.75rem; tab-size: 4; font-size: 0.9rem; line-height: 1.55; background: var(--bg); border: 1px solid var(--border); }
.code-view code.hljs { padding: 0; background: transparent; }
/* Jamais d'ascenseur horizontal: le texte trop long passe a la ligne, partout (apercus, editeur, Markdown). */
.code-view, .code-view code, .markdown pre, .markdown pre code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.view-body, .ed-preview-wrap, .markdown { overflow-x: hidden; }
.view-image:has(.view-img.actual) { overflow-x: auto; }
.markdown table { max-width: 100%; }
.markdown td, .markdown th, .office-table td, .office-table th { overflow-wrap: anywhere; }
/* Une cellule courte ne se fait pas ecraser par sa voisine: largeur minimale avant tout retour a la ligne. */
.markdown td, .markdown th { min-width: 6ch; }
.office-table.grid { width: 100%; table-layout: fixed; }
.office-table.grid th:first-child { width: 3.5rem; }
/* PDF en mode sombre: couleurs inversees, teintes conservees. */
.pdf-dark { background: #111317; }
.pdf-dark canvas { filter: invert(1) hue-rotate(180deg); }
.view-note { margin-top: 1rem; font-size: 0.85rem; }
.office { line-height: 1.6; max-width: 60rem; }
.office img.office-img { max-width: 100%; height: auto; display: block; margin: 0.5rem 0; }
.office-table { border-collapse: collapse; margin: 0.5rem 0; }
.office-table td, .office-table th { border: 1px solid var(--border); padding: 0.2rem 0.5rem; vertical-align: top; }
.office-table.grid th { color: var(--muted); background: var(--surface-2); font-weight: 400; text-align: center; position: sticky; top: 0; }
.office-table.grid tbody th { position: static; }
.office-xlsx, .office-ods { max-width: none; }
.sheet-tabs { margin-bottom: 0.5rem; }
.sheet-tabs [aria-selected="true"] { background: var(--cyan-dark); color: var(--bg); }
.slide { border: 1px solid var(--border); background: var(--surface); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.slide-no { margin: 0 0 0.3rem; color: var(--muted); font-size: 0.8rem; }

/* ---- Contenu d'un dossier en vignettes ---- */
.folder-content { margin-top: 1.5rem; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.tile { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.4rem; border: 1px solid var(--border); background: var(--surface); cursor: pointer; min-width: 0; user-select: none; }
.tile:hover { border-color: var(--cyan-dark); }
.tile.selected, .tile:focus-visible { border-color: var(--cyan-light); outline: none; background: var(--select-bg); }
.tile-visual { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--bg); overflow: hidden; }
.tile-thumb { width: 100%; height: 100%; object-fit: cover; }
.tile-thumb.contain { object-fit: contain; padding: 0.4rem; }
.tile-icon { font-size: 1.1rem; font-weight: 700; color: var(--muted); letter-spacing: 0.05em; }
.tile-folder .tile-icon { font-size: 2.6rem; color: var(--violet); }
.tile-image .tile-icon, .tile-video .tile-icon { color: var(--cyan-dark); }
.tile-audio .tile-icon { color: var(--orange); }
.tile-badge { position: absolute; right: 0.3rem; bottom: 0.2rem; padding: 0 0.35rem; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.8rem; }
.tile-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; background: var(--surface); font-size: 1.1rem; line-height: 1; }
.tile-play:hover { background: var(--cyan-dark); color: var(--bg); }
.tile-audio .tile-icon { position: absolute; top: 0.4rem; left: 0.5rem; font-size: 0.75rem; }
.tile.playing .tile-play, .tile-play[data-state="paused"] { background: var(--orange); color: var(--bg); border-color: var(--orange); }
.tile-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--progress, 0) * 100%); background: var(--orange); }
.tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.tile-folder .tile-name { color: var(--violet); }
.tile-meta { color: var(--muted); font-size: 0.75rem; }
.tile.tile-error .tile-icon { color: var(--red); }
.editor { display: flex; flex-direction: column; height: 100%; }
.ed-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); }
.ed-bar h1 { margin: 0; }
.ed-bar button[aria-pressed="true"] { background: var(--cyan-dark); color: var(--bg); }
.ed-status { color: var(--muted); font-size: 0.85rem; }
.ed-status[data-state="editor.unsaved"], .ed-status[data-state="editor.saving"] { color: var(--orange); }
.ed-status[data-state="editor.conflict"], .ed-status[data-state="editor.error"] { color: var(--red); }
.md-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; padding: 0.3rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.editor[data-mode="preview"] .md-toolbar { display: none; }
.tb-group { display: flex; gap: 2px; padding-right: 0.5rem; border-right: 1px solid var(--border); }
.tb-group:last-child { border-right: 0; }
.md-toolbar button.tb { margin: 0; min-width: 1.9rem; height: 1.9rem; padding: 0 0.35rem; display: inline-flex; align-items: center; justify-content: center; border-color: transparent; color: var(--fg); font-size: 0.85rem; line-height: 1; }
.md-toolbar button.tb:hover { background: var(--surface-2); color: var(--cyan-light); border-color: var(--border); }
.md-toolbar button.tb:active { background: var(--cyan-dark); color: var(--bg); }
.md-toolbar select.tb-heading { margin: 0; height: 1.9rem; padding: 0 0.4rem; color: var(--fg); border-color: var(--border); font-size: 0.85rem; }
.md-toolbar select.tb-size { margin: 0; height: 1.9rem; padding: 0 0.4rem; color: var(--fg); border-color: var(--border); font-size: 0.85rem; }
.tb-group { position: relative; }
.md-toolbar button.tb-color, .md-toolbar button.tb-background { flex-direction: column; gap: 1px; }
.tb-letter { font-weight: 700; line-height: 1; padding: 0 0.15em; }
.tb-background .tb-letter { background: rgba(255, 212, 59, 0.35); }
.tb-bar { display: block; width: 1rem; height: 3px; }
.tb-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; padding: 0.5rem; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.tb-swatches { display: grid; grid-template-columns: repeat(5, 1.6rem); gap: 0.35rem; }
.md-toolbar button.tb-swatch { margin: 0; width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid var(--border); }
.md-toolbar button.tb-swatch:hover, .md-toolbar button.tb-swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tb-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.md-toolbar button.tb-none { margin: 0; padding: 0.1rem 0.5rem; font-size: 0.8rem; }
.tb-custom { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.8rem; color: var(--muted); }
.tb-custom input[type="color"] { width: 1.8rem; height: 1.5rem; padding: 0; border: 1px solid var(--border); background: transparent; cursor: pointer; }
/* Panneau de dessin: barre secondaire sous la barre Markdown, zone de dessin a la place du texte. */
.editor.drawing-open .ed-body { display: none; }
.editor.drawing-open .md-toolbar, .editor.drawing-open .ed-bar { opacity: 0.45; }
.draw-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.draw-bar { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; padding: 0.3rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.draw-bar .spacer { flex: 1; }
.draw-bar button.tb { margin: 0; min-width: 1.9rem; height: 1.9rem; padding: 0 0.35rem; display: inline-flex; align-items: center; justify-content: center; border-color: transparent; color: var(--fg); font-size: 0.8rem; line-height: 1; }
.draw-bar button.tb:hover { background: var(--surface); color: var(--cyan-light); border-color: var(--border); }
.draw-bar button.tb[aria-pressed="true"] { background: var(--cyan-dark); color: var(--bg); border-color: var(--cyan-dark); }
.draw-bar button.tb[disabled] { opacity: 0.35; cursor: default; }
.draw-bar button.draw-swatch { min-width: 1.35rem; width: 1.35rem; height: 1.35rem; padding: 0; border: 1px solid var(--border); }
.draw-bar button.draw-swatch[aria-pressed="true"] { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--bg); }
.draw-bar button.draw-neon { padding: 0 0.5rem; letter-spacing: 0.05em; }
.draw-bar button.draw-neon[aria-pressed="true"] { background: transparent; color: #fff; border-color: var(--cyan-light); text-shadow: 0 0 4px var(--cyan-light), 0 0 10px var(--cyan-dark); box-shadow: 0 0 8px var(--cyan-dark); }
.draw-custom { width: 1.9rem; height: 1.6rem; padding: 0; border: 1px solid var(--border); background: transparent; cursor: pointer; }
.draw-bar select.draw-bg { margin: 0; height: 1.9rem; padding: 0 0.4rem; color: var(--fg); border-color: var(--border); font-size: 0.8rem; }
.draw-bar > button { margin: 0; padding: 0.2rem 0.8rem; }
.draw-bar .draw-save { background: var(--cyan-dark); color: var(--bg); }
.draw-status { color: var(--muted); font-size: 0.8rem; }
.draw-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0.75rem; overflow: hidden; background: var(--bg); }
.draw-canvas { display: block; flex: none; touch-action: none; cursor: crosshair; box-shadow: 0 0 0 1px var(--border); user-select: none; }
.draw-canvas[data-tool="eraser"] { cursor: cell; }
.draw-canvas.transparent { background: repeating-conic-gradient(#2a2d34 0 25%, #22252b 0 50%) 0 0 / 20px 20px; }
.tb-icon .fill { fill: currentColor; stroke: none; }
.markdown.drawing-armed img.drawing { cursor: pointer; }
.markdown.drawing-armed img.drawing:hover { outline: 2px solid var(--cyan-dark); outline-offset: 2px; }
.tb-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tb-icon .dot { stroke-width: 2.4; }
.tb-bold { font-weight: 700; }
.tb-italic { font-style: italic; }
.tb-strike { text-decoration: line-through; }
.tb-underline { text-decoration: underline; }
.tb-mark { background: rgba(255, 169, 77, 0.25); }
.tb-pdf { font-size: 0.7rem !important; font-weight: 700; letter-spacing: 0.03em; }
.ed-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.editor[data-mode="edit"] .ed-body { grid-template-columns: minmax(0, 1fr); }
.editor[data-mode="edit"] .ed-preview-wrap { display: none; }
.editor[data-mode="preview"] .ed-body { grid-template-columns: minmax(0, 1fr); }
.ed-preview .code-view { border: 0; padding: 0; background: transparent; }
.editor[data-mode="preview"] .ed-text { display: none; }
.ed-text {
  height: 100%;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--border);
  padding: 0.9rem 1rem;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.6 var(--font-mono);
  resize: none;
  tab-size: 2;
  caret-color: var(--cyan-light);
}
.ed-text:focus { outline: none; box-shadow: inset 0 0 0 1px var(--cyan-dark); }
.ed-preview-wrap { overflow: auto; padding: 0.9rem 1.25rem; }
.ed-toc ul { list-style: none; margin: 0 0 1rem; padding: 0 0 0.5rem; border-bottom: 1px dashed var(--border); }
.ed-toc li { margin: 0.1rem 0; }
.ed-toc .toc-2 { padding-left: 1rem; }
.ed-toc .toc-3, .ed-toc .toc-4, .ed-toc .toc-5, .ed-toc .toc-6 { padding-left: 2rem; }
.ed-front table.front { margin: 0 0 1rem; font-size: 0.85rem; }

/* ---- Rendu Markdown ---- */
.markdown { font-family: var(--font-mono); line-height: 1.65; overflow-wrap: anywhere; position: relative; contain: paint; }
/* contain: paint enferme aussi les position: fixed d'un document piege dans l'apercu. */
.markdown:focus { outline: none; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { color: var(--cyan-light); margin: 1.4em 0 0.5em; line-height: 1.3; }
.markdown h1 { font-size: 1.4rem; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
.markdown h1::before, .markdown h1::after { content: none; }
.markdown h2 { font-size: 1.2rem; color: var(--cyan-light); }
.markdown h3 { font-size: 1.05rem; color: var(--violet); }
.markdown a { color: var(--violet); }
.markdown a:hover { color: var(--cyan-light); }
.markdown code { background: var(--surface-2); padding: 0.05em 0.3em; }
.markdown pre { position: relative; background: #1b1d22; border: 1px solid var(--border); padding: 0.8rem 1rem; overflow: hidden; }
.markdown pre code { background: transparent; padding: 0; }
.markdown pre .copy { margin: 0; padding: 0.05rem 0.5rem; font-size: 0.75rem; }
/* Bloc de code: bandeau (langage, copier) puis le code, qui passe a la ligne et reste entier dans le cadre. */
.markdown pre.code { padding: 0; tab-size: 4; line-height: 1.55; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.9rem; padding: 0.2rem 0.4rem 0.2rem 0.9rem; border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 0.75rem; white-space: normal; user-select: none; }
.code-lang { letter-spacing: 0.04em; }
.markdown pre.code > code { display: block; padding: 0.75rem 1rem; }
.markdown pre.numbered > code { counter-reset: ln; padding-left: 0.6rem; }
.markdown pre.numbered .ln { display: block; position: relative; min-height: 1lh; padding-left: calc(var(--digits, 2) * 1ch + 1.8ch); }
.markdown pre.numbered .ln::before {
  counter-increment: ln;
  content: counter(ln);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--digits, 2) * 1ch + 0.6ch);
  padding-right: 0.6ch;
  border-right: 1px solid var(--border);
  text-align: right;
  color: var(--muted);
  opacity: 0.7;
  user-select: none;
}
.markdown video.embed-video { display: block; max-width: 100%; max-height: 70vh; margin: 0.5rem 0; background: #000; }
.markdown audio.embed-audio { display: block; width: min(100%, 32rem); margin: 0.5rem 0; }
.markdown .yt-embed { display: block; position: relative; width: min(100%, 48rem); aspect-ratio: 16 / 9; margin: 0.5rem 0; background: #000; border: 1px solid var(--border); }
.markdown .yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.markdown .yt-play { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; border: 0; background: #0b0c0f; color: var(--fg); }
.markdown .yt-play:hover { background: #121419; color: var(--fg); }
.yt-icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 2.8rem; border-radius: 0.7rem; background: #e5271f; color: #fff; font-size: 1.3rem; }
.yt-play:hover .yt-icon, .yt-play:focus-visible .yt-icon { background: #ff3b30; }
.yt-title { max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-note { color: var(--muted); font-size: 0.75rem; }
.markdown a.embed-file { display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%; margin: 0.25rem 0; padding: 0.4rem 0.8rem 0.4rem 0.4rem; border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--fg); }
.markdown a.embed-file:hover { border-color: var(--cyan-dark); color: var(--cyan-light); }
.embed-file-ext { padding: 0.35rem 0.45rem; background: var(--red); color: var(--bg); font-size: 0.7rem; font-weight: 700; }
.embed-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.markdown mark { background: rgba(255, 169, 77, 0.3); color: inherit; }
.markdown details { margin: 1em 0; padding: 0.3em 0.8em; border: 1px solid var(--border); }
.markdown summary { cursor: pointer; color: var(--cyan-light); }
.markdown blockquote { margin: 1em 0; padding: 0.3em 1em; border-left: 3px solid var(--cyan-dark); color: var(--muted); }
.markdown table { width: auto; }
.markdown th, .markdown td { padding: 0.25rem 0.75rem; border: 1px solid var(--border); }
.markdown img { max-width: 100%; }
.markdown img.diagram { background: var(--surface-2); padding: 0.5rem; }
.markdown hr { border: 0; border-top: 1px solid var(--border); }
.markdown .task-item { list-style: none; margin-left: -1.3em; }
.markdown input.task { margin: 0 0.4em 0 0; }
.markdown .callout { margin: 1em 0; padding: 0.5em 1em; border: 1px solid var(--cyan-dark); border-left-width: 4px; color: var(--fg); }
.markdown .callout-title { margin: 0 0 0.3em; font-weight: 700; color: var(--cyan-light); }
.markdown .callout-tip, .markdown .callout-info { border-color: var(--cyan-dark); }
.markdown .callout-important { border-color: var(--violet); }
.markdown .callout-important .callout-title { color: var(--violet); }
.markdown .callout-warning { border-color: var(--orange); }
.markdown .callout-warning .callout-title { color: var(--orange); }
.markdown .callout-caution, .markdown .callout-danger { border-color: var(--red); }
.markdown .callout-caution .callout-title, .markdown .callout-danger .callout-title { color: var(--red); }
.markdown .toc { border: 1px dashed var(--border); padding: 0.5rem 1rem; }
.markdown .toc ul { margin: 0; padding-left: 1rem; }
.markdown .wikilink { color: var(--cyan-light); }
.markdown .wikilink.broken { color: var(--red); text-decoration: line-through; }
.markdown .img-blocked, .markdown .img-missing { color: var(--orange); }
.markdown .diagram-error { border-color: var(--red); }
.markdown .footnotes { font-size: 0.85rem; color: var(--muted); }
.markdown .math-block { overflow-x: hidden; }
.markdown .katex-display { overflow-wrap: anywhere; }
.markdown pre.plain { white-space: pre-wrap; border: 0; background: transparent; padding: 0; }

/* ---- Console ---- */
.console {
  position: fixed;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 1.9rem;
  height: 45vh;
  z-index: 15;
  display: flex;
  flex-direction: column;
  background: rgba(17, 19, 23, 0.97);
  border: 1px solid var(--cyan-dark);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.55);
}
.console[hidden] { display: none; }
.console .pane-title { display: flex; align-items: center; margin: 0; padding: 0.2rem 0.6rem; background: var(--surface-2); color: var(--muted); font-size: 0.85rem; border-bottom: 1px solid var(--border); }
.console .pane-title .con-close { margin: 0 0 0 auto; padding: 0 0.45rem; line-height: 1.3; border-color: transparent; background: transparent; color: var(--muted); }
.console .pane-title .con-close:hover, .console .pane-title .con-close:focus-visible { color: var(--fg); border-color: var(--border); }
.console .pane-title::before { content: "\2500\2500 "; color: var(--cyan-dark); }
.con-out { flex: 1; overflow: auto; padding: 0.4rem 0.75rem; white-space: pre-wrap; }
.con-row { min-height: 1.5em; }
.con-row .pre { white-space: pre; }
.con-echo { color: var(--muted); }
.con-row .err { color: var(--red); }
.con-row .dim { color: var(--muted); }
.con-row .warn { color: var(--orange); }
.con-row .accent { color: var(--cyan-light); word-break: break-all; }
.con-row .dir, .con-table .dir { color: var(--violet); }
.con-row mark { background: var(--select-bg); color: var(--orange); }
.con-table { width: auto; margin: 0.2rem 0; }
.con-table td { border: 0; padding: 0 1.2rem 0 0; white-space: nowrap; }
.con-line { display: flex; align-items: center; padding: 0.3rem 0.75rem; border-top: 1px solid var(--border); }
.con-prompt { color: var(--cyan-light); white-space: pre; }
.con-in { flex: 1; border: 0; padding: 0.2rem 0; background: transparent; caret-color: var(--cyan-light); }
.con-in:focus { outline: none; }
.statusbar .mode.command { background: var(--orange); }