/* Otoolia — Éditeur LaTeX */
.el {
  --el-fs: 14px; --el-lh: 1.55;
  --c-cmd: #1d4ed8; --c-kw: #7c3aed; --c-env: #b45309; --c-sec: #0f766e; --c-math: #0e7490; --c-mcmd: #0369a1; --c-mdel: #be185d; --c-com: #6b7280; --c-br: #64748b; --c-sp: #be185d; --c-verb: #4b5563; --c-esc: #9333ea;
  --el-err: #dc2626; --el-warn: #d97706; --el-sel: color-mix(in srgb, var(--ot-brand) 22%, transparent);
  position: relative; display: flex; flex-direction: column; height: calc(100vh - 140px); min-height: 560px;
  border: 1px solid var(--ot-border); border-radius: var(--ot-radius); background: var(--ot-surface); overflow: hidden;
}
:root[data-theme="dark"] .el { --c-cmd: #93c5fd; --c-kw: #c4b5fd; --c-env: #fbbf24; --c-sec: #5eead4; --c-math: #67e8f9; --c-mcmd: #7dd3fc; --c-mdel: #f9a8d4; --c-com: #8b93a7; --c-br: #94a3b8; --c-sp: #f9a8d4; --c-verb: #a8b0c0; --c-esc: #d8b4fe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .el { --c-cmd: #93c5fd; --c-kw: #c4b5fd; --c-env: #fbbf24; --c-sec: #5eead4; --c-math: #67e8f9; --c-mcmd: #7dd3fc; --c-mdel: #f9a8d4; --c-com: #8b93a7; --c-br: #94a3b8; --c-sp: #f9a8d4; --c-verb: #a8b0c0; --c-esc: #d8b4fe; } }
.el:fullscreen { height: 100vh; border-radius: 0; }
.el button { font: inherit; }
.el-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--ot-border); border-radius: 8px; background: var(--ot-surface); color: var(--ot-text); cursor: pointer; font-size: .9rem; white-space: nowrap; }
.el-btn:hover { border-color: var(--ot-brand); }
.el-btn--main { background: var(--ot-brand); color: var(--ot-brand-ink); border-color: var(--ot-brand); font-weight: 600; }
.el-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--ot-brand) 15%, transparent); border-color: var(--ot-brand); }
.el-ic { padding: 5px 8px; }
.el-sel { padding: 5px 6px; border: 1px solid var(--ot-border); border-radius: 8px; background: var(--ot-surface); color: var(--ot-text); font: inherit; font-size: .88rem; }
.el-badge { background: var(--el-warn); color: #fff; border-radius: 999px; padding: 0 6px; font-size: .75rem; }
.el-muted { color: var(--ot-text-soft); } .el-small { font-size: .85rem; } .el-err { color: var(--el-err); font-weight: 600; } .el-sp { flex: 1; }

.el-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--ot-border); background: var(--ot-surface-2); flex-wrap: wrap; }
.el-bar-l, .el-bar-c, .el-bar-r { display: flex; align-items: center; gap: 6px; }
.el-bar-l { flex: 1; min-width: 0; } .el-bar-r { flex: 1; justify-content: flex-end; }
.el-proj { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ot-text-soft); }
.el-menu { position: absolute; top: 44px; left: 8px; z-index: 30; display: flex; flex-direction: column; min-width: 280px; padding: 6px; background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: 12px; box-shadow: var(--ot-shadow-h); }
.el-menu button { text-align: left; padding: 8px 10px; border: 0; background: none; color: var(--ot-text); border-radius: 8px; cursor: pointer; }
.el-menu button:hover { background: var(--ot-surface-2); }

.el-main { --side: 240px; --right: 46%; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--side) 5px minmax(240px, 1fr) 5px var(--right); }
.el-main.is-off { visibility: hidden; }
.el-split { cursor: col-resize; background: var(--ot-border); }
.el-split:hover, .el-split:focus-visible { background: var(--ot-brand); outline: none; }
.el-side { display: flex; flex-direction: column; min-height: 0; background: var(--ot-surface-2); }
.el-stabs { display: flex; border-bottom: 1px solid var(--ot-border); }
.el-stabs button { flex: 1; padding: 7px; border: 0; background: none; color: var(--ot-text-soft); cursor: pointer; font-weight: 600; font-size: .88rem; }
.el-stabs button[aria-selected="true"] { color: var(--ot-text); box-shadow: inset 0 -2px var(--ot-brand); }
.el-sfiles, .el-soutline { flex: 1; min-height: 0; overflow: auto; }
.el-sfiles { display: flex; flex-direction: column; }
.el-ftools { display: flex; gap: 4px; padding: 6px; }
.el-ftools button { flex: 1; padding: 4px; border: 1px solid var(--ot-border); border-radius: 6px; background: var(--ot-surface); cursor: pointer; color: var(--ot-text); font-size: .85rem; }
.el-tree { flex: 1; overflow: auto; padding-bottom: 20px; }
.el-ti { position: relative; padding: 3px 8px 3px calc(8px + var(--d) * 14px); font-size: .88rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ot-text); }
.el-ti:hover { background: color-mix(in srgb, var(--ot-brand) 8%, transparent); }
.el-file.is-cur { background: color-mix(in srgb, var(--ot-brand) 16%, transparent); font-weight: 600; }
.el-file.is-dirty::after { content: "●"; color: var(--el-warn); margin-left: 4px; font-size: .7rem; }
.el-tag { font-size: .7rem; color: var(--ot-text-soft); border: 1px solid var(--ot-border); border-radius: 4px; padding: 0 3px; }
.el-tact { position: absolute; right: 4px; top: 1px; display: none; }
.el-ti:hover .el-tact { display: inline-flex; }
.el-tact button { border: 0; background: var(--ot-surface); cursor: pointer; padding: 1px 4px; border-radius: 4px; font-size: .8rem; }
.el-ofile { padding: 8px 8px 2px; font-size: .75rem; color: var(--ot-text-soft); text-transform: none; font-weight: 600; }
.el-oi { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ot-text); cursor: pointer; padding: 3px 8px 3px calc(8px + var(--l) * 10px); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-oi:hover { background: color-mix(in srgb, var(--ot-brand) 8%, transparent); }
.el-oi--section, .el-oi--chapter, .el-oi--part { font-weight: 600; }
.el-oi--env { color: var(--ot-text-soft); font-size: .8rem; }
.el-oi--frame::before { content: "▭ "; color: var(--ot-text-soft); }

.el-center { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.el-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--ot-border); background: var(--ot-surface-2); min-height: 33px; }
.el-tab { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 12px; font-size: .85rem; border-right: 1px solid var(--ot-border); cursor: pointer; white-space: nowrap; color: var(--ot-text-soft); }
.el-tab.is-cur { background: var(--ot-surface); color: var(--ot-text); box-shadow: inset 0 2px var(--ot-brand); }
.el-tab button { border: 0; background: none; cursor: pointer; color: inherit; padding: 0 4px; border-radius: 4px; }
.el-tab button:hover { background: var(--ot-surface-2); }
.el-dot { color: var(--el-warn); font-size: .7rem; }
.el-edhost { flex: 1; min-height: 0; position: relative; }
.el-imgview { flex: 1; overflow: auto; padding: 16px; text-align: center; }
.el-imgview img { max-width: 100%; background: #fff; border: 1px solid var(--ot-border); }
.el-status { display: flex; gap: 12px; align-items: center; padding: 3px 10px; font-size: .8rem; border-top: 1px solid var(--ot-border); background: var(--ot-surface-2); color: var(--ot-text-soft); min-height: 24px; }
#el-pos { white-space: nowrap; }
.el-gramst { white-space: nowrap; color: var(--ot-text-soft); }
.el-gramst:empty { display: none; }
.el-diagmsg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-diagmsg.is-err { color: var(--el-err); } .el-diagmsg.is-warn { color: var(--el-warn); }
.el-statr { white-space: nowrap; } .el-statr.is-ok { color: var(--ot-success); } .el-statr.is-err { color: var(--el-err); } .el-statr.is-warn { color: var(--el-warn); }
.el-mathpv { position: absolute; z-index: 15; max-width: 90%; padding: 6px 12px; background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: 10px; box-shadow: var(--ot-shadow-h); overflow-x: auto; pointer-events: none; color: var(--ot-text); }

/* zone de saisie : la textarea transparente recouvre exactement la couche colorée */
.el-ed { position: absolute; inset: 0; display: flex; flex-direction: column; }
.el-scroll { flex: 1; overflow: auto; position: relative; background: var(--ot-surface); }
.el-layer { position: relative; min-height: 100%; }
.el-hl, .el-ta, .el-mirror, .el-marks {
  font-family: var(--ot-mono); font-size: var(--el-fs); line-height: var(--el-lh); tab-size: 4; -moz-tab-size: 4;
  white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; word-break: normal; letter-spacing: 0; font-variant-ligatures: none; font-kerning: none;
  padding: 10px 14px 45vh 58px; margin: 0; border: 0; box-sizing: border-box; width: 100%;
}
.el-hl { counter-reset: ln; color: var(--ot-text); pointer-events: none; }
.el-l { position: relative; min-height: calc(var(--el-fs) * var(--el-lh)); counter-increment: ln; }
.el-l::before { content: counter(ln); position: absolute; left: -54px; width: 40px; text-align: right; color: var(--ot-text-soft); opacity: .6; font-size: .85em; user-select: none; }
.el-l--err::before { color: var(--el-err); opacity: 1; font-weight: 700; content: "● " counter(ln); }
.el-l--warn::before { color: var(--el-warn); opacity: 1; content: "● " counter(ln); }
.el-l--err { background: color-mix(in srgb, var(--el-err) 7%, transparent); }
.el-l--warn { background: color-mix(in srgb, var(--el-warn) 6%, transparent); }
.el-ta { position: absolute; inset: 0; height: 100%; resize: none; overflow: hidden; background: transparent; color: transparent; caret-color: var(--ot-text); outline: none; z-index: 1; }
.el-ta::selection { background: var(--el-sel); color: transparent; }
.el-marks { position: absolute; left: 0; top: 0; color: transparent; pointer-events: none; z-index: 2; }
.el-ml { min-height: calc(var(--el-fs) * var(--el-lh)); }
.el-m-s { text-decoration: underline wavy #e5484d; text-decoration-skip-ink: none; text-underline-offset: 3px; }
.el-m-g { text-decoration: underline wavy #3e7bfa; text-decoration-skip-ink: none; text-underline-offset: 3px; }
.el-gbub { position: fixed; z-index: 50; max-width: 360px; background: var(--ot-surface); color: var(--ot-text); border: 1px solid var(--ot-border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); padding: 8px 10px; font-size: .85rem; }
.el-gbub p { margin: 0 0 6px; }
.el-gbub .el-gsug { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.el-gbub button { border: 1px solid var(--ot-border); background: var(--ot-surface-2); color: var(--ot-text); border-radius: 6px; cursor: pointer; padding: 2px 8px; font: inherit; }
.el-gbub .el-gsug button { font-weight: 600; }
.el-gbub small { color: var(--ot-text-soft); }
.el-mirror { position: absolute; left: 0; visibility: hidden; padding-top: 0; padding-bottom: 0; pointer-events: none; }
.t-cmd { color: var(--c-cmd); } .t-kw { color: var(--c-kw); font-weight: 600; } .t-env { color: var(--c-env); } .t-sec { color: var(--c-sec); font-weight: 700; }
.t-math { color: var(--c-math); } .t-mcmd { color: var(--c-mcmd); } .t-mdel { color: var(--c-mdel); font-weight: 700; } .t-com { color: var(--c-com); font-style: italic; }
.t-br { color: var(--c-br); } .t-sp { color: var(--c-sp); } .t-verb { color: var(--c-verb); } .t-esc { color: var(--c-esc); }

/* autocomplétion, recherche */
.el-ac { position: absolute; z-index: 20; width: 330px; max-height: 260px; overflow-y: auto; background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: 10px; box-shadow: var(--ot-shadow-h); font-size: .86rem; }
.el-aci { display: flex; gap: 10px; justify-content: space-between; padding: 4px 10px; cursor: pointer; }
.el-aci.is-sel { background: color-mix(in srgb, var(--ot-brand) 18%, transparent); }
.el-acl { font-family: var(--ot-mono); white-space: nowrap; }
.el-acd { color: var(--ot-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.el-find { position: absolute; top: 6px; right: 18px; z-index: 20; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: 10px; box-shadow: var(--ot-shadow-h); font-size: .85rem; max-width: calc(100% - 30px); }
.el-find input[type="search"], .el-find input[type="text"] { width: 170px; padding: 4px 6px; border: 1px solid var(--ot-border); border-radius: 6px; background: var(--ot-surface); color: var(--ot-text); font: inherit; }
.el-find .el-frep { display: none; } .el-find.is-rep .el-frep { display: inline-block; }
.el-find [data-f="rep"], .el-find [data-f="all"] { display: none; } .el-find.is-rep [data-f="rep"], .el-find.is-rep [data-f="all"] { display: inline-block; }
.el-find button { border: 1px solid var(--ot-border); background: var(--ot-surface); color: var(--ot-text); border-radius: 6px; cursor: pointer; padding: 3px 7px; }
.el-fcount { color: var(--ot-text-soft); font-size: .8rem; }

/* aperçu, journal */
.el-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ot-surface-2); }
.el-pvbar { display: flex; gap: 4px; align-items: center; padding: 4px 6px; border-bottom: 1px solid var(--ot-border); font-size: .85rem; color: var(--ot-text-soft); }
.el-pvbar button { border: 1px solid var(--ot-border); background: var(--ot-surface); color: var(--ot-text); border-radius: 6px; cursor: pointer; padding: 2px 8px; }
.el-pv { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.el-pv-pages { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; outline: none; position: relative; }
.el-pv-page { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); flex: none; position: relative; }
.el-pv-mark { position: absolute; background: rgba(255, 200, 0, .35); outline: 2px solid rgba(230, 150, 0, .9); border-radius: 3px; pointer-events: none; transition: opacity 1s; }
.el-pv-mark.is-out { opacity: 0; }
.el-pv-page canvas { display: block; }
.el-pv-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.el-pvmsg { max-width: 380px; color: var(--ot-text-soft); }
.el-noeng { margin-top: 12px; padding: 12px; border: 1px dashed var(--ot-border); border-radius: 10px; background: var(--ot-surface); color: var(--ot-text); text-align: left; }
.el-log { max-height: 38%; display: flex; flex-direction: column; border-top: 1px solid var(--ot-border); background: var(--ot-surface); }
.el-log.is-min .el-logl { display: none; }
.el-logh { display: flex; gap: 6px; align-items: center; padding: 5px 8px; font-size: .85rem; border-bottom: 1px solid var(--ot-border); }
.el-logh button { border: 1px solid var(--ot-border); background: var(--ot-surface); color: var(--ot-text); border-radius: 6px; cursor: pointer; padding: 1px 7px; font-size: .8rem; }
.el-logl { overflow: auto; }
.el-logi { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid transparent; border-bottom: 1px solid var(--ot-border); background: none; color: var(--ot-text); cursor: pointer; padding: 5px 8px; font-size: .84rem; }
.el-logi span { font-family: var(--ot-mono); color: var(--ot-text-soft); }
.el-logi small { display: block; color: var(--ot-text-soft); margin-top: 2px; }
.el-logi.is-err { border-left-color: var(--el-err); } .el-logi.is-warn { border-left-color: var(--el-warn); } .el-logi.is-box { border-left-color: var(--ot-border); color: var(--ot-text-soft); }
.el-logi:hover { background: var(--ot-surface-2); }

/* accueil, dialogues */
.el-welcome { position: absolute; inset: 46px 0 0 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--ot-surface); }
.el-welcome[hidden] { display: none; }
.el-wcard { max-width: 480px; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.el-wcard h2 { margin: 0; }
.el-wbig { justify-content: center; padding: 10px 14px; font-size: 1rem; }
.el-dlg { border: 1px solid var(--ot-border); border-radius: 14px; padding: 0; background: var(--ot-surface); color: var(--ot-text); width: min(620px, calc(100vw - 32px)); max-height: 86vh; box-shadow: var(--ot-shadow-h); }
.el-dlg::backdrop { background: rgba(10,10,20,.45); }
.el-dlg-in { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; max-height: 86vh; overflow: auto; }
.el-dlg-in h3 { margin: 0 0 4px; }
.el-dlg-in label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600; }
.el-dlg-in label.el-ck { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; }
.el-dlg-f { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.el-row { display: flex; gap: 6px; } .el-row input { flex: 1; }
.el-chl { margin: 0; padding-left: 18px; max-height: 180px; overflow: auto; font-family: var(--ot-mono); font-size: .85rem; }
.el-cf { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px; border: 1px solid var(--ot-border); border-radius: 8px; }
.el-cf b { width: 100%; font-family: var(--ot-mono); font-size: .85rem; }
.el-cf label { flex-direction: row !important; font-weight: 400 !important; align-items: center; }
.el-hist, .el-qol { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; }
.el-hi { display: flex; flex-direction: column; text-align: left; padding: 6px 8px; border: 1px solid var(--ot-border); border-radius: 8px; background: var(--ot-surface); color: var(--ot-text); cursor: pointer; font-size: .86rem; }
.el-hi.is-sel, .el-hi:hover { border-color: var(--ot-brand); }
.el-hi small { color: var(--ot-text-soft); }
.el-raw { max-height: 55vh; overflow: auto; font-size: .78rem; background: var(--ot-surface-2); padding: 8px; border-radius: 8px; white-space: pre-wrap; }
.el-pkl { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; }
.el-pki { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; align-items: center; padding: 5px 4px; border-bottom: 1px solid var(--ot-border); font-size: .86rem; }
.el-keys td { padding: 3px 10px 3px 0; font-size: .9rem; }
.el-keys kbd { font-family: var(--ot-mono); background: var(--ot-surface-2); border: 1px solid var(--ot-border); border-radius: 5px; padding: 1px 5px; font-size: .82rem; }

/* tablette et téléphone : une zone à la fois */
.el-mob { display: none; }
@media (max-width: 900px) {
  .el-mob { display: inline-flex; }
  .el { height: calc(100vh - 110px); }
  .el-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .el-split, .el-side { display: none; }
  .el-right { position: absolute; inset: 46px 0 0 0; z-index: 12; display: none; }
  .el.show-pdf .el-right { display: flex; }
  .el-bar-r .el-btn:not([data-a="keys"]):not([data-a="settings"]) { display: none; }
}