/* WebIDE — styles */
:root {
  --bg: #1e2127;
  --bg-2: #252a33;
  --bg-3: #2d333f;
  --border: #3a4150;
  --text: #d7dce5;
  --muted: #8b93a3;
  --accent: #4c9aff;
  --accent-2: #2f6fd6;
  --danger: #e5534b;
  --ok: #46b978;
  --shadow: 0 2px 8px rgba(0,0,0,.3);
}
:root[data-theme="light"] {
  --bg: #f5f6f8;
  --bg-2: #ffffff;
  --bg-3: #eceef2;
  --border: #d3d8e0;
  --text: #1e2530;
  --muted: #6b7280;
  --accent: #2f6fd6;
  --accent-2: #2f6fd6;
  --danger: #d13b34;
  --ok: #2f9e63;
  --shadow: 0 2px 8px rgba(0,0,0,.12);
}
* { box-sizing: border-box; }
/* L'attribut hidden doit toujours l'emporter, meme sur display:flex. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.err { color: var(--danger); }

/* Barre du haut */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.brand a { font-weight: 700; color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.whoami { color: var(--muted); font-size: 13px; }

/* Boutons */
button, .btn-ghost, .btn-primary, .btn-danger {
  font: inherit; cursor: pointer; border-radius: 6px; padding: 6px 12px;
  border: 1px solid var(--border); background: var(--bg-3); color: var(--text);
}
button:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent); }
.btn-ghost { background: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--bg-3); }
.btn-ghost.on { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn-danger { background: transparent; border-color: #5a3033; color: var(--danger); }
.btn-danger:hover { background: #3a2426; }

/* Pages simples (auth / admin) : defilent a l'interieur */
.page { padding: 22px; max-width: 1100px; margin: 0 auto; width: 100%; flex: 1; min-height: 0; overflow-y: auto; }
/* Page editeur : plein cadre, pas de defilement page (scroll interne aux panneaux) */
.full { flex: 1; min-height: 0; display: flex; }
.card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow);
}
.card.auth { max-width: 380px; margin: 8vh auto; }
.card h1 { margin-top: 0; }
form label { display: block; margin: 10px 0; }
form input, form select {
  width: 100%; padding: 9px 10px; margin-top: 4px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
}
form.inline, form.form-inline { display: inline; }
.alert { background: #4a2b2b; border: 1px solid #703c3c; color: #ffd7d3; padding: 10px 12px; border-radius: 6px; margin: 12px 0; }
.alert.ok { background: #1f3d2e; border-color: #2f6b4c; color: #c9f4dd; }

/* Tableaux admin */
.grid { width: 100%; border-collapse: collapse; margin-top: 10px; }
.grid th, .grid td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid th { color: var(--muted); font-weight: 600; font-size: 13px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; margin-top: 12px; }
.form-grid button { grid-column: 1 / -1; }
.form-grid label.check { display: flex; align-items: center; gap: 8px; }
.form-grid label.check input { width: auto; }
.add-block { margin-top: 14px; }
.add-block > summary { cursor: pointer; color: var(--accent); padding: 6px 0; }
.form-inline input, .form-inline select { width: auto; display: inline-block; margin: 4px 6px 4px 0; }
.pw-form { display: flex; gap: 6px; margin-top: 8px; }
.pw-form input { width: auto; }
details.inline { display: inline-block; }
details.inline > summary { list-style: none; display: inline-block; }

/* Autorisations */
.perm-server { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.perm-server h3 { margin: 4px 0 10px; }
.perm-rows { display: flex; flex-direction: column; gap: 6px; }
.perm-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); }
.perm-row.on { background: #1f3d2e; border-color: #2c5742; color: #fff; }
.perm-row.on .perm-name { color: #fff; }
.perm-row.on .seg { color: #cfe6d8; }
.perm-name { min-width: 160px; font-weight: 600; }
.perm-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #2c5742; color: #cfe6d8; white-space: nowrap; }
.perm-row .inline { margin-left: 0; }
.perm-row form:last-child { margin-left: auto; }
.seg { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }

/* Mes serveurs */
.srv-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.srv-title h2 { margin: 0; }
.diag-out { margin-top: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.share-block { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.share-block h3 { margin: 0 0 10px; }
.share-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.share-add input[name="share_username"] { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); color: var(--text); min-width: 220px; font: inherit; }
.section-h { margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
.shared-srv .srv-title h3 { margin: 0; }

/* Tuiles serveurs : 2 par ligne (1 sur mobile) */
.srv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.srv-grid > .card { margin: 0; }
@media (max-width: 820px) { .srv-grid { grid-template-columns: 1fr; } }

/* Partage repliable : le titre devient un lien */
details.share-block > summary.share-summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; display: inline-block; padding: 2px 0; }
details.share-block > summary.share-summary::-webkit-details-marker { display: none; }
details.share-block > summary.share-summary::before { content: "▸ "; }
details.share-block[open] > summary.share-summary::before { content: "▾ "; }

/* Bouton copier */
.copy-btn { font-size: 12px; padding: 4px 10px; margin: 4px 0; }

/* ---------- IDE ---------- */
.ide { display: flex; flex: 1; min-height: 0; }
.splitter { flex: 0 0 5px; cursor: col-resize; background: transparent; transition: background .12s; z-index: 5; }
.splitter:hover, .splitter.dragging { background: var(--accent); }
.filler { flex: 0 0 0; background: var(--bg); }
.sidebar { width: 300px; background: var(--bg-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.sidebar-head { padding: 10px; border-bottom: 1px solid var(--border); }
.srv-label { font-size: 12px; color: var(--muted); }
#serverSelect { width: 100%; padding: 7px; margin-top: 4px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.sidebar-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.sidebar-tools button { flex: 0 0 auto; padding: 5px 10px; }
.tree { flex: 1; overflow: auto; padding: 6px 0; }
.tree-empty { color: var(--muted); padding: 12px; }
.tree-info { color: var(--muted); padding: 3px 8px; font-size: 12px; font-style: italic; list-style: none; }
.tree-err { color: var(--danger); padding: 4px 8px; font-size: 12px; list-style: none; white-space: normal; }
.tree-loading { list-style: none; color: var(--muted); padding: 4px 8px; font-size: 12px; }
.mini-spin { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; margin-right: 4px; }
.tree-list { list-style: none; margin: 0; padding-left: 14px; }
.node-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.node-row:hover { background: var(--bg-3); }
.node-row.active { background: var(--accent-2); color: #fff; }
.caret { display: inline-block; width: 12px; text-align: center; color: var(--muted); flex: 0 0 auto; font-size: 10px; }
.node.dir > .node-row .caret::before { content: "▸"; }
.node.dir.open > .node-row .caret::before { content: "▾"; }
.node .ico { font-size: 13px; width: 18px; text-align: center; flex: 0 0 auto; }
/* Lignes de guidage encadrant le contenu des dossiers */
.tree-list .tree-list { margin-left: 9px; padding-left: 8px; border-left: 1px solid var(--border); }
.node.dir.open > .node-row { color: var(--text); }

.workspace { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.tabbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.current-file { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar { display: flex; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.editor-wrap { position: relative; flex: 1; min-height: 0; background: var(--bg); }
.editor-wrap > textarea#editor { display: none; }
/* Vue image + aperçu SVG (fond damier pour voir la transparence) */
.image-view, .preview-pane { z-index: 4;
  background-color: var(--bg);
  background-image: linear-gradient(45deg, rgba(128,128,128,.14) 25%, transparent 25%), linear-gradient(-45deg, rgba(128,128,128,.14) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(128,128,128,.14) 75%), linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.14) 75%);
  background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.image-view { position: absolute; inset: 0; overflow: auto; display: flex; align-items: safe center; justify-content: safe center; cursor: zoom-in; }
.image-view img { display: block; }
/* SVG : split horizontal — apercu en haut, code en dessous */
.preview-pane { position: absolute; top: 0; left: 0; right: 0; height: 50%; border-bottom: 1px solid var(--border); overflow: auto; display: flex; align-items: center; justify-content: center; padding: 12px; }
.preview-pane img { max-width: 100%; max-height: 100%; object-fit: contain; }
.editor-wrap.split > .CodeMirror { position: absolute; left: 0; right: 0; bottom: 0; top: 50%; height: 50% !important; width: auto !important; }
.editor-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); pointer-events: none; background: var(--bg); }
.loading-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0,0,0,.28); z-index: 6; }
:root[data-theme="light"] .loading-overlay { background: rgba(255,255,255,.55); }
.spinner { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 13px; color: var(--text); }
.tab.lazy { font-style: italic; opacity: .75; }
.node-row.loading { opacity: .7; }
.node-row.loading::after { content: ''; width: 12px; height: 12px; margin-left: 6px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; flex: 0 0 auto; }
.CodeMirror { height: 100% !important; font-family: ui-monospace, Consolas, "SF Mono", monospace; font-size: 13px; }
.statusbar { display: flex; align-items: center; justify-content: space-between; padding: 5px 12px; background: var(--bg-2); border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.dirty { color: #f0b429; }

/* Panneau droit */
.panel { width: 380px; background: var(--bg-2); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600; }
.panel-body { flex: 1; overflow: auto; padding: 12px; }
.rev-item { border: 1px solid var(--border); border-radius: 7px; padding: 10px; margin-bottom: 8px; }
.rev-meta { margin-bottom: 8px; }
.search-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.search-form input { padding: 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.sres-row { padding: 8px; border-bottom: 1px solid var(--border); cursor: pointer; }
.sres-row:hover { background: var(--bg-3); }
.sres-path { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent); }
.sres-line { color: var(--muted); font-size: 12px; }
.sres-text { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text); margin-top: 3px; white-space: pre-wrap; word-break: break-all; }

/* ---------- Onglets ---------- */
.tabs { display: flex; gap: 2px; background: var(--bg-2); border-bottom: 1px solid var(--border); overflow-x: auto; min-height: 0; }
.tabs:empty { display: none; }
.tab { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 10px; border-right: 1px solid var(--border); cursor: pointer; white-space: nowrap; color: var(--muted); font-size: 13px; }
.tab.active { background: var(--bg); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.tab:hover { background: var(--bg-3); }
.tab-ico { font-size: 12px; }
.tab-spin { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.tab-close { opacity: .5; padding: 0 3px; border-radius: 4px; }
.tab-close:hover { opacity: 1; background: var(--border); }

/* ---------- Fil d'Ariane + position curseur ---------- */
.breadcrumb { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; flex: 1 1 120px; min-width: 0; }
.breadcrumb { cursor: pointer; }
.breadcrumb:hover .crumb.last { text-decoration: underline dotted; }
.crumb-srv { color: var(--accent); font-weight: 600; }
.crumb-root { color: var(--muted); }
.crumb.last { color: var(--text); font-weight: 600; }
.crumb-sep { color: var(--muted); opacity: .6; }
.status-right { display: flex; align-items: center; gap: 14px; }
#cursorPos { font-family: ui-monospace, monospace; }
.zoom-pct { cursor: pointer; text-decoration: underline dotted; user-select: none; }
.zoom-pct:hover { color: var(--accent); }

.tree.drop-hover, .node-row.drop-hover { outline: 2px dashed var(--accent); outline-offset: -2px; background: rgba(76,154,255,.08); }

/* ---------- Menu contextuel ---------- */
.ctxmenu { position: fixed; z-index: 1000; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; min-width: 180px; }
.ctx-item { padding: 7px 12px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.ctx-item:hover { background: var(--accent-2); color: #fff; }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* ---------- Modale ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
.modal-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 20px; width: min(460px, 92vw); box-shadow: var(--shadow); }
.modal-box h3 { margin: 0 0 12px; }
.modal-box .mlbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.modal-box input { width: 100%; padding: 9px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.help-table { width: 100%; border-collapse: collapse; }
.help-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 13px; }
.help-table td:first-child { font-family: ui-monospace, monospace; color: var(--accent); white-space: nowrap; }
.chmod-tbl { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
.chmod-tbl th, .chmod-tbl td { padding: 6px 8px; text-align: center; font-size: 13px; }
.chmod-tbl th:first-child, .chmod-tbl td:first-child { text-align: left; color: var(--muted); }
.chmod-tbl input[type=checkbox] { width: auto; }

/* ---------- Recherche : progression + actions ---------- */
.search-actions { display: flex; gap: 8px; }
.search-actions button { flex: 1; }
.progress { height: 4px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.progress-in { height: 100%; width: 40%; background: var(--accent); animation: indet 1.1s infinite ease-in-out; }
@keyframes indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.sres-count { margin-bottom: 8px; }

/* ---------- Revisions / diff ---------- */
/* Autocompletion (popup show-hint) */
.CodeMirror-hints { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); font-family: ui-monospace, Consolas, monospace; font-size: 12px; z-index: 1200; max-height: 22em; }
.CodeMirror-hint { color: var(--text); padding: 3px 8px; }
li.CodeMirror-hint-active { background: var(--accent-2); color: #fff; }

/* Onglets de recherche */
.search-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.stab { flex: 1; padding: 8px 6px; border: 1px solid var(--border); background: var(--bg-3); color: var(--muted); border-radius: 6px; cursor: pointer; font: inherit; }
.stab.active { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }

/* Champs de recherche */
.fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.fld > span { font-size: 12px; color: var(--muted); }
.fld input { padding: 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.search-opts { margin: 4px 0 8px; }
.search-opts > summary { cursor: pointer; color: var(--accent); font-size: 13px; padding: 4px 0; }

/* Entete du diff */
.diff-head { display: flex; margin-bottom: 6px; gap: 0; }
.diff-h { flex: 1; font-size: 12px; font-weight: 600; padding: 5px 8px; background: var(--bg-3); border: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-h.left { border-right: none; color: var(--muted); }
.diff-h.right { color: var(--text); }

.rev-tools { margin-bottom: 10px; }
.rev-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.diff-zone { margin-top: 12px; }
.diff-zone .CodeMirror { height: 320px !important; }
.diff-zone .CodeMirror-merge, .diff-zone .CodeMirror-merge-pane { border: 1px solid var(--border); }

/* ---------- Bandeaux (toasts) ---------- */
.toasts { position: fixed; top: 14px; right: 14px; z-index: 1300; display: flex; flex-direction: column; gap: 8px; max-width: min(440px, 92vw); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 8px; box-shadow: var(--shadow); font-size: 13px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); animation: toastIn .2s ease; }
.toast-msg { flex: 1; line-height: 1.45; }
.toast-x { background: transparent; border: none; color: inherit; opacity: .6; cursor: pointer; padding: 0 2px; font-size: 13px; }
.toast-x:hover { opacity: 1; }
.toast-error { background: #4a2b2b; border-color: #7a3d3d; color: #ffdad6; }
.toast-success { background: #1f3d2e; border-color: #2f6b4c; color: #c9f4dd; }
.toast-warn { background: #4a3a1f; border-color: #7a5c2e; color: #ffe8c2; }
.toast-act { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 6px; padding: 3px 10px; cursor: pointer; font: inherit; flex: 0 0 auto; }
.toast-act:hover { background: rgba(255,255,255,.12); }
.toast.leaving { opacity: 0; transform: translateX(20px); transition: all .25s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ---------- Vue tableur (CSV) ---------- */
.grid-area { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.grid-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--bg-2); flex-wrap: wrap; }
.grid-toolbar button { padding: 4px 10px; }
.grid-toolbar button.on { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.grid-hint { font-size: 11px; }
.grid-wrap { flex: 1; overflow: auto; }
.grid-content { position: relative; }
.grid-head { display: flex; height: 26px; position: sticky; top: 0; z-index: 3; }
.grid-corner { flex: 0 0 52px; position: sticky; left: 0; z-index: 4; background: var(--bg-3); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.grid-colh { flex: 0 0 160px; width: 160px; display: flex; align-items: center; gap: 4px; padding: 0 4px 0 8px; background: var(--bg-3); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; }
.grid-colh.sorted { color: var(--accent); }
.colh-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.colh-menu { flex: 0 0 auto; background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 12px; }
.colh-menu:hover { color: var(--text); }
.grid-sizer { position: relative; }
.grid-view { position: absolute; top: 0; left: 0; }
.grid-row { display: flex; height: 26px; }
.grid-rn { flex: 0 0 52px; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; background: var(--bg-2); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; font-family: ui-monospace, monospace; position: sticky; left: 0; z-index: 2; cursor: context-menu; }
.grid-cell { flex: 0 0 160px; width: 160px; display: flex; align-items: center; padding: 0 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 13px; font-family: ui-monospace, Consolas, monospace; white-space: nowrap; overflow: hidden; outline: none; }
.grid-cell:focus { background: rgba(76,154,255,.14); box-shadow: inset 0 0 0 2px var(--accent); overflow: visible; }
.modal-actions { flex-wrap: wrap; }

/* Presence (bas de la barre laterale) */
.presence { border-top: 1px solid var(--border); padding: 8px 10px; max-height: 32%; overflow: auto; flex: 0 0 auto; }
.presence-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.presence-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; }
.presence-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(70,185,120,.25); }
.presence-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Indicateur fin de ligne (barre de statut) */
.eol-info { font-family: ui-monospace, monospace; cursor: pointer; padding: 0 5px; border-radius: 4px; }
.eol-info:hover { background: var(--bg-3); color: var(--text); }

/* Usage disque */
.du-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 8px 9px; border-bottom: 1px solid var(--border); font-size: 12px; }
.du-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-size { font-family: ui-monospace, monospace; color: var(--muted); flex: 0 0 auto; }
.du-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); }

/* Journal d'activite */
.act-row { padding: 8px; border-bottom: 1px solid var(--border); cursor: pointer; }
.act-row:hover { background: var(--bg-3); }
.act-path { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent); margin-top: 2px; word-break: break-all; }

@media (max-width: 780px) {
  .ide { flex-direction: column; }
  .sidebar { width: 100% !important; height: 40vh; flex: 0 0 auto !important; }
  .workspace { flex: 1 1 auto !important; max-width: none !important; }
  .panel { width: 100%; }
  .splitter, .filler { display: none; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Prise de photos (upload-photo) ---------- */
.up { max-width: 680px; margin: 0 auto; padding-bottom: 40px; }
.up-title { margin: 4px 0 6px; }
.up-intro { margin: 0 0 16px; }
.up-config { margin-bottom: 16px; }
.up-grid { display: flex; flex-direction: column; gap: 14px; }
.up-grid > label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.up-grid input, .up-grid select { font: inherit; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); color: var(--text); }
.up-mini { font-weight: 400; font-size: 12px; }
.up-mini code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; }
.up-opt { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.up-opt .check { font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.up-inline { font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.up-inline select { padding: 6px 8px; }

.cam-stage {
  position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 70vh;
  margin: 0 auto 10px; background: #000; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cam-stage video { width: 100%; height: 100%; object-fit: cover; display: none; }
.cam-stage.live video { display: block; }
.cam-msg { color: #cfd6e2; padding: 20px; text-align: center; font-size: 15px; }
.cam-stage.live .cam-msg { display: none; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .08s; }
.cam-flash.on { opacity: .85; transition: none; }
.shutter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 74px; border-radius: 50%; background: #fff;
  border: 5px solid rgba(255,255,255,.55); box-shadow: 0 0 0 3px rgba(0,0,0,.35);
  cursor: pointer; transition: transform .08s;
}
.shutter:not(:disabled):active { transform: translateX(-50%) scale(.92); }
.shutter:disabled { opacity: .35; cursor: default; }
.cam-flip {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; border: none; font-size: 20px; cursor: pointer;
}
.cam-controls { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; }
.cam-controls .btn-primary, .cam-controls .btn-ghost { padding: 10px 18px; font-size: 15px; }

.up-counters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 10px; }
.up-counters .c-fail b { color: var(--danger); }
.up-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.thumb { position: relative; width: 58px; height: 58px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-badge { position: absolute; bottom: 1px; right: 1px; font-size: 11px; background: rgba(0,0,0,.5); border-radius: 4px; padding: 0 2px; }
.thumb.pending { opacity: .7; }
.thumb.ok { border-color: var(--ok); }
.thumb.fail { border-color: var(--danger); }

/* ---------- Bloc « Connecter un assistant » (jetons MCP) ---------- */
.mcp-connect { margin: 12px 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.mcp-connect h3 { margin: 0 0 8px; }
.mcp-connect details { margin-top: 8px; }
.mcp-connect summary { cursor: pointer; color: var(--accent); }
.mcp-cmd { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.5; background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; resize: vertical; margin: 4px 0; white-space: pre; }

/* Formulaire de modification d'un jeton, dans la cellule du tableau */
.form-grid.one-col { grid-template-columns: 1fr; min-width: 260px; gap: 8px; }
.grid td.row-actions { white-space: normal; vertical-align: top; }
.grid td.row-actions > .inline { display: block; margin-bottom: 8px; }