:root {
  --font-size: 18px; --window:#202124; --toolbar:#292A2D; --panel:#2D2F33; --editor:#242529; --console:#25262A; --button:#34363B; --button-hover:#414349; --button-pressed:#2B2D31; --border:#55585F; --text:#F1F3F4; --muted:#B0B3B8; --accent:#36C96B; --tab:#33353A; --tab-selected:#45474D; --selection:rgba(62,95,73,.48); --line-area:#2B2D31; --line-current:#34363B; --console-height:29%;
}
body.theme-light {
  --window:#E9EAEC; --toolbar:#DEDFE2; --panel:#F4F4F5; --editor:#FAFAFA; --console:#F1F1F2; --button:#F7F7F8; --button-hover:#E7E8EA; --button-pressed:#D8D9DC; --border:#B7B9BE; --text:#25262A; --muted:#6E7177; --accent:#168A46; --tab:#D7D8DB; --tab-selected:#FAFAFA; --selection:rgba(211,232,217,.72); --line-area:#E1E2E4; --line-current:#ECEDEF;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--window);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, select, input { font: inherit; }
button { cursor: pointer; }

#app { height: 100%; display: flex; flex-direction: column; }
.toolbar {
  min-height: 61px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px;
  background: var(--toolbar);
  border-bottom: 1px solid var(--border);
}
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 9px; min-width: 0; }
.separator { width: 1px; height: 32px; background: var(--border); margin: 0 1px; }
.tool-btn, .small-btn {
  min-height: 40px;
  padding: 3px 11px;
  color: var(--text);
  background: var(--button);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}
.tool-btn { min-width: 88px; }
.tool-btn.compact { min-width: 54px; }
.small-btn { min-height: 34px; font-size: 13px; }
.tool-btn:hover, .small-btn:hover { background: var(--button-hover); border-color: var(--accent); }
.tool-btn:active, .small-btn:active { background: var(--button-pressed); }
.tool-btn:disabled { opacity: .55; cursor: default; }
.language-select, .mode-select {
  min-height: 34px;
  padding: 2px 7px;
  color: var(--muted);
  background: var(--button);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
}
.runtime-status {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.runtime-status.ready { color: var(--accent); }
.runtime-status.error { color: #ff9b9b; }

.workspace { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px; }
.editor-panel { flex: 1 1 auto; min-height: 120px; border: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; }
.tabs { display: flex; align-items: end; min-height: 43px; overflow-x: auto; overflow-y: hidden; padding: 0 0 0 0; background: var(--window); }
.tab {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 8px 7px 14px;
  margin-right: 3px;
  color: var(--muted);
  background: var(--tab);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  font-size: 15px;
  font-weight: 600;
}
.tab.active { color: var(--text); background: var(--tab-selected); }
.tab:hover { color: var(--text); background: var(--button-hover); }
.tab-close { border: 0; background: transparent; color: var(--muted); font-size: 21px; line-height: 20px; padding: 0 2px; }
.tab-close:hover { color: var(--accent); }

.editor-shell { flex: 1; min-height: 0; display: flex; background: var(--editor); overflow: hidden; }
.line-numbers {
  width: 64px;
  flex: 0 0 64px;
  margin: 0;
  padding: 10px 10px 10px 0;
  overflow: hidden;
  text-align: right;
  user-select: none;
  color: var(--muted);
  background: var(--line-area);
  font: var(--font-size)/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.code-editor { flex: 1; min-width: 0; min-height: 0; position: relative; overflow: hidden; background: var(--editor); }
.highlight, .editor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  font: var(--font-size)/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  tab-size: 4;
  white-space: pre;
}
.highlight { z-index: 0; overflow: visible; pointer-events: none; color: var(--text); background: var(--editor); }
.editor {
  z-index: 1;
  flex: 1;
  min-width: 0;
  resize: none;
  outline: none;
  border: 0;
  padding: 10px 12px;
  tab-size: 4;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: transparent;
  caret-color: var(--accent);
  font: var(--font-size)/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre;
  overflow: auto;
}
/* V0.2.12 — selection translucide : la coloration syntaxique reste lisible.
   Le textarea contient du texte transparent au-dessus du calque de coloration ;
   une selection opaque masquerait donc visuellement le code. */
.editor::selection {
  background: var(--selection);
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.editor::-moz-selection {
  background: var(--selection);
  color: transparent;
}

.splitter { flex: 0 0 6px; cursor: row-resize; background: transparent; position: relative; }
.splitter::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: var(--border); transition: background-color .15s ease, height .15s ease; }
.splitter:hover::after, .splitter:focus-visible::after, .splitter.dragging::after { background: var(--accent); height: 3px; }
.console-panel { flex: 0 0 var(--console-height); min-height: 105px; border: 1px solid var(--border); background: var(--console); display: flex; flex-direction: column; }
.console-label { font-size: 12px; font-weight: 700; color: var(--muted); padding: 5px 9px; border-bottom: 1px solid var(--border); background: var(--panel); }
.console-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.console {
  position: absolute; inset: 0;
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
  outline: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  background: transparent;
  font: var(--font-size)/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  z-index: 1;
}
/* V3.50 — only answers typed into Python input() are highlighted. */
.console .user-input-value { color: var(--accent); font-weight: 700; }
.watermark { position: absolute; right: 14px; bottom: 14px; width: 125px; max-height: 80%; object-fit: contain; opacity: .20; pointer-events: none; z-index: 0; }
body.theme-light .watermark { opacity: .13; }

.input-dialog { border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--panel); min-width: min(440px, calc(100vw - 32px)); }
.input-dialog::backdrop { background: rgba(0,0,0,.42); }
.input-dialog form { display: grid; gap: 12px; }
.input-dialog input { width: 100%; padding: 9px 10px; color: var(--text); background: var(--editor); border: 1px solid var(--border); border-radius: 7px; outline: none; }
.input-dialog input:focus { border-color: var(--accent); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-actions button { padding: 7px 13px; color: var(--text); background: var(--button); border: 1px solid var(--border); border-radius: 7px; }
.dialog-actions .primary { border-color: var(--accent); }
.dialog-actions button:hover { background: var(--button-hover); border-color: var(--accent); }
.dialog-actions button:active { background: var(--button-pressed); }
.dialog-title { margin: 0; font-size: 18px; color: var(--text); }
.dialog-help { margin-top: 0; color: var(--muted); }
.zip-picker-form { min-width: min(420px, calc(100vw - 48px)); }
.crocode-zip-picker-dialog strong { color: var(--text); }

@media (max-width: 820px) {
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-left, .toolbar-right { overflow-x: auto; }
  .toolbar-right { justify-content: flex-end; }
  .runtime-status { margin-left: auto; }
  .tool-btn { min-width: 76px; font-size: 14px; }
  .workspace { padding-top: 4px; }
}

/* Python syntax highlighting — exact SerpyCode desktop V1.3 palette */
.tok-keyword { color: #66c7ff; font-weight: 700; }
.tok-builtin { color: #c7a0ff; }
.tok-string { color: #8ee6a4; }
.tok-comment { color: #7f98b8; }
.tok-number { color: #ff9b9b; }
body.theme-light .tok-keyword { color: #006fb9; font-weight: 700; }
body.theme-light .tok-builtin { color: #7048a8; }
body.theme-light .tok-string { color: #16793a; }
body.theme-light .tok-comment { color: #68778d; }
body.theme-light .tok-number { color: #b52a38; }


/* Pygame Web window — SerpyCode Online V0.2 */
.pygame-window {
  position: fixed;
  z-index: 50;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(860px, calc(100vw - 28px));
  height: min(680px, calc(100vh - 90px));
  min-width: 320px;
  min-height: 260px;
  resize: both;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 70px rgba(0,0,0,.5);
  background: #111820;
  display: flex;
  flex-direction: column;
}
.pygame-window[hidden] { display: none; }
.pygame-titlebar {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 0 12px;
  color: var(--text);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  user-select: none;
}
.pygame-actions { display: flex; align-items: center; gap: 10px; }
.pygame-status { color: var(--muted); font-weight: 600; font-size: 12px; }
.pygame-status.ready { color: #65d58a; }
.pygame-status.error { color: #ff8585; }
.pygame-close {
  width: 30px; height: 28px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); background: var(--button);
  font-size: 22px; line-height: 22px;
}
.pygame-close:hover { background: #b23a48; color: white; }
.pygame-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #0b0f14; }
.pygame-frame { width: 100%; height: 100%; border: 0; display: block; background: #0b0f14; }
.pygame-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 520px; padding: 12px 16px; text-align: center;
  color: #b9c9dd; font-size: 13px; line-height: 1.45; pointer-events: none;
}
body.theme-light .pygame-window { box-shadow: 0 20px 60px rgba(20,30,45,.28); }
@media (max-width: 700px) {
  .pygame-window { width: calc(100vw - 12px); height: calc(100vh - 74px); }
  .pygame-status { display: none; }
}

/* Project explorer — SerpyCode Online V0.2.3 */
.editor-body { flex: 1; min-height: 0; display: flex; }
.project-panel {
  flex: 0 0 var(--project-width, 190px);
  width: var(--project-width, 190px);
  min-width: 150px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
}
.project-header {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px 5px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.project-add {
  width: 28px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--button);
  line-height: 22px;
}
.project-add:hover { background: var(--button-hover); border-color: var(--accent); }
.project-files { flex: 1; min-height: 0; overflow: auto; padding: 5px; }
.project-file {
  width: 100%;
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 5px;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  font-size: 13px;
}
button.project-file:hover, .project-file.active { color: var(--text); background: var(--button-hover); }
.project-file.resource { cursor: default; }
.project-icon { flex: 0 0 19px; text-align: center; font-size: 14px; }
.project-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-remove { flex: 0 0 23px; width: 23px; height: 23px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 17px; border-radius: 4px; }
.project-remove:hover { color: var(--accent); background: var(--button-hover); }
.editor-body > .editor-shell { flex: 1; min-width: 0; }

@media (max-width: 720px) {
  .project-panel { flex-basis: 145px; min-width: 120px; }
}

/* V0.2.6 — collapsible project explorer and tabs limited to code area */
.code-area {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--editor);
}
.code-area > .tabs { flex: 0 0 auto; width: 100%; }
.code-area > .editor-shell { flex: 1 1 auto; min-width: 0; min-height: 0; }
.project-actions { display: flex; align-items: center; gap: 5px; }
.project-toggle {
  width: 28px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--button);
  line-height: 22px;
  font-size: 14px;
}
.project-toggle:hover { background: var(--button-hover); border-color: var(--accent); }
.project-panel.collapsed {
  flex: 0 0 38px;
  min-width: 38px;
  max-width: 38px;
}
.project-panel.collapsed .project-header {
  padding: 5px;
  justify-content: center;
  border-bottom: 0;
}
.project-panel.collapsed #projectLabel,
.project-panel.collapsed #projectAddBtn,
.project-panel.collapsed .project-files { display: none; }
.project-panel.collapsed .project-actions { gap: 0; }
.project-panel.collapsed .project-toggle { width: 28px; }

@media (max-width: 720px) {
  .project-panel.collapsed { flex-basis: 38px; min-width: 38px; }
}


/* V0.2.11 — responsive smartphone/tablet layout */
.tool-btn, .small-btn, .language-select, .mode-select {
  max-width: 100%;
  white-space: nowrap;
}

@supports (height: 100dvh) {
  html, body { height: 100dvh; }
  #app { height: 100dvh; }
}

@media (max-width: 820px) {
  .toolbar {
    min-height: 0;
    padding: 6px;
    gap: 6px;
    align-items: stretch;
    flex-direction: column;
  }
  .toolbar-left,
  .toolbar-right {
    width: 100%;
    min-width: 0;
    overflow: visible;
    flex-wrap: wrap;
    gap: 6px;
  }
  .toolbar-left { justify-content: flex-start; }
  .toolbar-right { justify-content: flex-end; }
  .separator { display: none; }
  .tool-btn {
    min-width: max-content;
    min-height: 36px;
    padding: 5px 9px;
    font-size: 13px;
    line-height: 1.15;
  }
  .tool-btn.compact {
    min-width: 42px;
    padding-inline: 8px;
  }
  .small-btn,
  .language-select, .mode-select {
    min-height: 32px;
    padding: 4px 8px;
    font-size: 12px;
  }
  .runtime-status {
    margin-left: 0;
    margin-right: auto;
    align-self: center;
    font-size: 11px;
  }
  .workspace {
    padding: 4px;
  }
  .tabs {
    min-height: 38px;
  }
  .tab {
    min-height: 37px;
    padding: 5px 7px 5px 10px;
    font-size: 13px;
  }
  .tab-close {
    font-size: 19px;
  }
  .line-numbers {
    width: 48px;
    flex-basis: 48px;
    padding-right: 7px;
  }
}

@media (max-width: 560px) {
  .toolbar-left {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
  }
  .toolbar-left .tool-btn {
    width: 100%;
    min-width: 0;
    padding: 5px 4px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .toolbar-left #newBtn,
  .toolbar-left #openBtn,
  .toolbar-left #saveBtn,
  .toolbar-left #runBtn {
    grid-column: span 2;
  }
  .toolbar-left #zoomInBtn,
  .toolbar-left #zoomOutBtn {
    grid-column: span 1;
    min-width: 0;
  }
  .toolbar-right {
    gap: 5px;
  }
  .runtime-status {
    flex: 1 1 auto;
    min-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .editor-panel { min-height: 96px; }
  .console-panel { min-height: 90px; }
  .project-panel.collapsed {
    flex: 0 0 34px;
    min-width: 34px;
    max-width: 34px;
  }
  .project-panel.collapsed .project-toggle {
    width: 25px;
  }
  .project-panel:not(.collapsed) {
    flex-basis: min(42vw, 170px);
    min-width: 118px;
    max-width: 170px;
  }
  .project-header {
    padding-inline: 6px;
  }
  .project-file {
    font-size: 12px;
  }
  .watermark {
    width: 90px;
    right: 8px;
    bottom: 8px;
  }
  .pygame-window {
    width: calc(100vw - 8px);
    height: calc(100dvh - 8px);
    min-width: 0;
    min-height: 0;
    resize: none;
    border-radius: 7px;
  }
}

@media (max-width: 390px) {
  .toolbar-left .tool-btn {
    font-size: 11px;
    padding-inline: 3px;
  }
  .small-btn, .language-select, .mode-select { font-size: 11px; }
  .line-numbers {
    width: 42px;
    flex-basis: 42px;
    padding-right: 5px;
  }
}

.mode-select { min-height:40px; padding:3px 10px; color:var(--text); background:var(--button); border:1px solid var(--border); border-radius:8px; font-size:15px; font-weight:700; }
.web-preview-window { width:min(1000px,92vw); height:min(760px,88vh); }
/* HTML/CSS syntax highlighting — exact Crocode Editor V1.25 palette */
.tok-tag, .tok-cssprop { color:#66c7ff; }
.tok-tag, .tok-selector, .tok-doctype { font-weight:700; }
.tok-attr, .tok-selector { color:#c7a0ff; }
.tok-doctype { color:#ffcf70; }
body.theme-light .tok-tag, body.theme-light .tok-cssprop { color:#006fb9; }
body.theme-light .tok-attr, body.theme-light .tok-selector { color:#7048a8; }
body.theme-light .tok-doctype { color:#9a6500; }
.project-icon { width:22px; min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.project-icon img { width:19px; height:19px; object-fit:contain; display:block; }
.project-generic-icon { font-size:16px; line-height:1; }

/* Crocode V1.11 — sélecteur de langage avec les icônes officielles du projet desktop */
.mode-picker{position:relative;flex:0 0 auto}
.mode-select-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.mode-button{min-height:40px;padding:4px 10px;display:flex;align-items:center;gap:8px;color:var(--text);background:var(--button);border:1px solid var(--border);border-radius:8px;font-size:15px;font-weight:700;white-space:nowrap}
.mode-button:hover,.mode-menu-item:hover{background:var(--button-hover);border-color:var(--accent)}
.mode-button img,.mode-menu-item img{width:22px;height:22px;object-fit:contain;flex:0 0 22px}
.mode-caret{margin-left:2px;color:var(--muted)}
.mode-menu{position:absolute;z-index:1000;left:0;top:calc(100% + 5px);min-width:170px;padding:5px;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.mode-menu-item{width:100%;display:flex;align-items:center;gap:9px;padding:8px 10px;color:var(--text);background:transparent;border:1px solid transparent;border-radius:6px;font-weight:650;text-align:left;white-space:nowrap}
@media(max-width:600px){.mode-button{min-height:36px;font-size:13px;padding:3px 7px}.mode-button img,.mode-menu-item img{width:20px;height:20px;flex-basis:20px}.mode-menu{min-width:150px}}

/* Crocode Online V1.25 — menu Projet et dossiers */
.floating-menu{position:fixed;z-index:120;width:220px;padding:5px;background:var(--panel);border:1px solid var(--border);border-radius:7px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.floating-menu[hidden]{display:none}.floating-menu button{display:block;width:100%;padding:8px 10px;text-align:left;color:var(--text);background:transparent;border:0;border-radius:5px}.floating-menu button:hover{background:var(--button-hover)}.floating-menu hr{border:0;border-top:1px solid var(--border);margin:4px}
.project-folder{font-weight:650;color:var(--muted)}

/* Crocode Online V1.65 — two explicit file drag & drop zones */
.project-panel.file-drag-project,
.code-area.file-drag-independent {
  position: relative;
  outline: 2px dashed var(--accent, #55d5ff);
  outline-offset: -4px;
}
.project-panel.file-drag-project::after,
.code-area.file-drag-independent::after {
  content: attr(data-drop-label);
  position: absolute;
  z-index: 80;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 14px;
  border: 1px solid var(--accent, #55d5ff);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Crocode Online V1.30 — icônes de barre identiques au dessin Mac/PC V1.25 */
#newBtn, #openBtn, #saveBtn { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.toolbar-icon { width:22px; height:22px; flex:0 0 22px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width: 620px) {
  #newBtn, #openBtn, #saveBtn { gap:5px; }
  .toolbar-icon { width:19px; height:19px; flex-basis:19px; }
}

/* V1.35 — Accueil et état inactif, alignés sur Crocode Editor desktop. */
.tool-btn:disabled,
.mode-button:disabled {
  color: #777A80;
  background: #2A2B2F;
  border-color: #3B3D42;
  opacity: 1;
  cursor: default;
}
.tool-btn:disabled:hover,
.mode-button:disabled:hover {
  color: #777A80;
  background: #2A2B2F;
  border-color: #3B3D42;
}
body.theme-light .tool-btn:disabled,
body.theme-light .mode-button:disabled,
body.theme-light .tool-btn:disabled:hover,
body.theme-light .mode-button:disabled:hover {
  color: #9A9CA1;
  background: #E1E2E4;
  border-color: #C9CACE;
}
.mode-button:disabled img { opacity: .45; filter: grayscale(.75); }

.welcome-page {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--editor);
  color: var(--text);
  padding: 60px 70px;
}
.welcome-page[hidden] { display: none !important; }
.welcome-content { width: min(760px, 100%); text-align: center; transform: translateY(-5%); }
.welcome-content h1 { margin: 0 0 10px; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; font-weight: 800; }
.welcome-content p { margin: 0 0 28px; color: var(--muted); font-size: 18px; }
.welcome-choices { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.welcome-choice {
  min-width: 225px;
  min-height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 18px;
  text-align: center;
  color: var(--text);
  background: var(--button);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
}
.welcome-choice:hover { background: var(--button-hover); border-color: var(--accent); }
.welcome-choice img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 34px; }

/* Public edition: neutral in-app language/file icons; no third-party logo artwork. */
.lang-icon, .file-type-icon { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:800; line-height:1; border:1px solid currentColor; border-radius:6px; color:var(--accent); background:transparent; }
.lang-icon { width:22px; height:22px; flex:0 0 22px; font-size:10px; letter-spacing:-.5px; }
.lang-web { font-size:9px; }
.welcome-lang-icon { width:34px; height:34px; flex-basis:34px; font-size:13px; border-radius:8px; }
.welcome-lang-icon.lang-web { font-size:11px; }
.file-type-icon { width:19px; height:19px; font-size:8px; border-radius:4px; }
.file-type-css { font-size:6.5px; letter-spacing:-.4px; }
.welcome-tab { cursor: default; padding-right: 14px; }
@media (max-width: 600px) {
  .welcome-page { padding: 30px 18px; }
  .welcome-content p { font-size: 16px; }
  .welcome-choice { width: 100%; min-width: 0; }
}

/* V1.35 Public — centrage complet du contenu de l’accueil. */
.welcome-content h1, .welcome-content p { text-align: center; }
.welcome-choice > span:last-child { text-align: center; }

/* V1.35 Public — correctif Accueil : occupe toute la zone d'édition.
   .code-editor restait flex:1 même lorsque textarea/highlight étaient masqués,
   ce qui repoussait l'Accueil dans seulement la moitié gauche de l'éditeur. */
.editor-shell:has(.welcome-page:not([hidden])) .code-editor { display: none; }
.editor-shell:has(.welcome-page:not([hidden])) .welcome-page { flex: 1 1 100%; width: 100%; }

/* V1.36 Public — Accueil centré sur la fenêtre complète, comme l'éditeur desktop.
   Le panneau d'accueil garde son fond dans la zone d'édition, mais son contenu
   est positionné par rapport au viewport plutôt qu'au seul panneau éditeur. */
/* V2.21 — Accueil réellement dépendant de la zone de code.
   Le contenu n'est plus positionné par rapport au viewport : il reste centré
   dans #welcomePage, donc dans .editor-shell de la partie haute droite. */
.welcome-page:not([hidden]) .welcome-content {
  position: static;
  left: auto;
  top: auto;
  width: min(760px, 100%);
  transform: translateY(-5%);
  z-index: auto;
}
@media (max-width: 600px) {
  .welcome-page:not([hidden]) .welcome-content {
    width: min(760px, 100%);
  }
}

/* V1.37 — Mobile : boutons Nouveau fichier plus lisibles sans agrandir les icônes. */
@media (max-width: 600px) {
  .welcome-choices {
    width: min(340px, 100%);
    margin: 0 auto;
    gap: 10px;
  }
  .welcome-choice {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 10px 14px;
    gap: 10px;
    justify-content: flex-start;
    font-size: 15px;
  }
  .welcome-choice img {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }
  .welcome-choice > span:last-child {
    flex: 1 1 auto;
    text-align: left;
  }
}

/* V1.38 — Mobile : boutons d'accueil plus petits et moins larges. */
@media (max-width: 600px) {
  .welcome-choices {
    width: auto;
    max-width: none;
    gap: 8px;
    align-items: center;
  }
  .welcome-choice {
    width: auto;
    min-width: 0;
    min-height: 42px;
    padding: 7px 11px;
    gap: 7px;
    font-size: 13px;
    justify-content: center;
    align-self: center;
  }
  .welcome-choice img {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  .welcome-choice > span:last-child {
    flex: 0 1 auto;
    text-align: center;
    white-space: nowrap;
  }
}

/* V1.39 — Mobile : accueil plus compact et remonté, barre principale moins large. */
@media (max-width: 600px) {
  .welcome-page:not([hidden]) .welcome-content {
    top: 43vh;
    width: calc(100vw - 28px);
  }
  .welcome-content h1 {
    font-size: 26px;
    margin-bottom: 7px;
  }
  .welcome-content p {
    font-size: 14px;
    margin-bottom: 18px;
  }

  .toolbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }
  .toolbar-left .tool-btn,
  .toolbar-left #newBtn,
  .toolbar-left #openBtn,
  .toolbar-left #saveBtn,
  .toolbar-left #runBtn,
  .toolbar-left #zoomInBtn,
  .toolbar-left #zoomOutBtn {
    width: auto;
    min-width: 0;
    grid-column: auto;
    min-height: 32px;
    padding: 4px 7px;
    font-size: 11px;
    flex: 0 0 auto;
  }
  .toolbar-left .toolbar-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
  .mode-button {
    min-height: 32px;
    padding: 3px 6px;
    font-size: 11px;
  }
}

/* V1.40 — Mobile : barre supérieure strictement organisée sur 2 lignes. */
@media (max-width: 600px) {
  .toolbar {
    padding: 4px 5px;
    gap: 4px;
  }
  .toolbar-left {
    width: 100%;
    flex-wrap: nowrap;
    gap: 2px;
    justify-content: center;
    overflow: hidden;
  }
  .toolbar-left .separator { display: none; }
  .toolbar-left .tool-btn,
  .toolbar-left #newBtn,
  .toolbar-left #openBtn,
  .toolbar-left #saveBtn,
  .toolbar-left #runBtn,
  .toolbar-left #zoomInBtn,
  .toolbar-left #zoomOutBtn {
    min-height: 29px;
    padding: 2px 3px;
    font-size: 9px;
    gap: 2px;
    flex: 0 1 auto;
    white-space: nowrap;
  }
  .toolbar-left #zoomInBtn,
  .toolbar-left #zoomOutBtn { min-width: 27px; }
  .toolbar-left .toolbar-icon {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }
  .mode-picker { flex: 0 1 auto; min-width: 0; }
  .mode-button {
    min-height: 29px;
    padding: 2px 3px;
    font-size: 9px;
    gap: 2px;
    white-space: nowrap;
  }
  .mode-button img {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }
  .mode-caret { font-size: 8px; }

  .toolbar-right {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
  }
  .runtime-status {
    margin: 0;
    flex: 0 1 auto;
    font-size: 10px;
  }
  .toolbar-right .small-btn,
  .toolbar-right .language-select {
    min-height: 28px;
    padding: 2px 6px;
    font-size: 10px;
    flex: 0 0 auto;
  }
}

/* V1.41 — vraies icônes dans le menu des langages */
.mode-menu-item .lang-icon { border:0; background:transparent; overflow:hidden; }
.mode-menu-item .lang-icon img { width:100%; height:100%; object-fit:contain; display:block; }

/* V1.42 — icônes de langages sans contour vert */
.lang-icon,
.mode-menu-item .lang-icon,
.mode-menu-item .lang-icon:hover,
.mode-menu-item:hover .lang-icon {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.project-image-thumb img{width:22px;height:22px;object-fit:cover;border-radius:3px;display:block}


/* V1.70 — Accueil : logo Crocode officiel à la place du titre texte. */
.welcome-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 12px;
}
.welcome-logo img {
  display: block;
  width: min(360px, 72vw);
  max-height: 120px;
  object-fit: contain;
}
.welcome-logo-light { display: none !important; }
body.theme-light .welcome-logo-dark { display: none !important; }
body.theme-light .welcome-logo-light { display: block !important; }
body.theme-dark .welcome-logo-dark { display: block !important; }
body.theme-dark .welcome-logo-light { display: none !important; }
@media (max-width: 640px) {
  .welcome-logo { margin-bottom: 8px; }
  .welcome-logo img { width: min(260px, 68vw); max-height: 82px; }
}

/* V1.81 — Mobile : barre d'outils résumée aux icônes. */
@media (max-width: 600px) {
  /* Le sélecteur de langage de programmation conserve uniquement son pictogramme. */
  #modeButtonText, .mode-caret { display: none; }
  .mode-button { width: 34px; min-width: 34px; justify-content: center; padding: 3px; }
  .mode-button img { width: 20px; height: 20px; flex-basis: 20px; }

  /* Nouveau / Charger / Enregistrer : icône seule. */
  #newBtn > span, #openBtn > span, #saveBtn > span { display: none; }
  #newBtn, #openBtn, #saveBtn {
    width: 34px !important;
    min-width: 34px !important;
    height: 32px;
    padding: 3px !important;
  }
  .toolbar-left #newBtn .toolbar-icon,
  .toolbar-left #openBtn .toolbar-icon,
  .toolbar-left #saveBtn .toolbar-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  /* Lancer / Aperçu / Arrêter : symbole seul, tout en gardant le texte traduit dans le DOM. */
  #runBtn {
    width: 34px !important;
    min-width: 34px !important;
    height: 32px;
    padding: 0 !important;
    font-size: 0 !important;
  }
  #runBtn::before { content: "▶"; font-size: 17px; line-height: 1; }
  #runBtn.stop::before { content: "■"; font-size: 15px; }

  /* Zoom reste lisible comme pictogramme typographique. */
  #zoomInBtn, #zoomOutBtn {
    width: 34px !important;
    min-width: 34px !important;
    height: 32px;
    padding: 0 !important;
    font-size: 12px !important;
  }

  /* Thème : soleil/lune uniquement. */
  #themeBtn {
    width: 34px;
    min-width: 34px;
    padding: 0 !important;
    font-size: 0 !important;
  }
  body.theme-dark #themeBtn::before { content: "☀"; font-size: 17px; }
  body.theme-light #themeBtn::before { content: "☾"; font-size: 17px; }

  /* La première ligne tient désormais réellement sur une seule rangée. */
  .toolbar-left { justify-content: center; gap: 5px; }
}

/* V1.82 — Mobile : toute la barre principale sur UNE seule ligne. */
@media (max-width: 600px) {
  .toolbar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    padding: 4px 5px !important;
    min-height: 40px;
    overflow: visible !important;
  }
  .toolbar-left,
  .toolbar-right {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  .toolbar-left { flex: 1 1 auto; justify-content: flex-start !important; }
  .toolbar-right { flex: 0 0 auto; justify-content: flex-end !important; }
  .toolbar .separator { display: none !important; }

  #modeButton,
  #newBtn, #openBtn, #saveBtn, #runBtn,
  #zoomInBtn, #zoomOutBtn,
  #themeBtn {
    width: clamp(25px, 8vw, 31px) !important;
    min-width: clamp(25px, 8vw, 31px) !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px !important;
    border-radius: 6px !important;
  }
  #modeButton img { width: 18px !important; height: 18px !important; flex-basis: 18px !important; }
  .toolbar-left .toolbar-icon { width: 18px !important; height: 18px !important; flex-basis: 18px !important; }
  #runBtn::before { font-size: 15px !important; }
  #runBtn.stop::before { font-size: 13px !important; }
  #zoomInBtn, #zoomOutBtn { font-size: 10px !important; }
  body.theme-dark #themeBtn::before,
  body.theme-light #themeBtn::before { font-size: 15px !important; }

  /* Python prêt reste visible, mais compact. */
  .toolbar #runtimeStatus {
    display: block !important;
    white-space: nowrap !important;
    font-size: clamp(8px, 2.45vw, 10px) !important;
    line-height: 1 !important;
    margin: 0 1px !important;
    max-width: 62px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Langue sur la même ligne. */
  #languageSelect {
    display: block !important;
    width: 37px !important;
    min-width: 37px !important;
    height: 30px !important;
    padding: 1px 2px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }
}

@media (max-width: 360px) {
  .toolbar { padding-left: 2px !important; padding-right: 2px !important; gap: 1px !important; }
  .toolbar-left, .toolbar-right { gap: 1px !important; }
  #modeButton,
  #newBtn, #openBtn, #saveBtn, #runBtn,
  #zoomInBtn, #zoomOutBtn,
  #themeBtn {
    width: 25px !important;
    min-width: 25px !important;
  }
  .toolbar #runtimeStatus { max-width: 48px; font-size: 8px !important; }
  #languageSelect { width: 34px !important; min-width: 34px !important; }
}

/* V1.83 — Mobile : une seule ligne, mais zones tactiles confortables. */
@media (max-width: 600px) {
  .toolbar {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 5px 7px !important;
    min-height: 50px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar-left,
  .toolbar-right {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    gap: 5px !important;
    overflow: visible !important;
  }
  #modeButton,
  #newBtn, #openBtn, #saveBtn, #runBtn,
  #zoomInBtn, #zoomOutBtn,
  #themeBtn {
    width: 42px !important;
    min-width: 42px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 6px !important;
    border-radius: 8px !important;
    flex: 0 0 42px !important;
    touch-action: manipulation;
  }
  #modeButton img,
  .toolbar-left .toolbar-icon {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
  }
  #runBtn::before { font-size: 19px !important; }
  #runBtn.stop::before { font-size: 17px !important; }
  #zoomInBtn, #zoomOutBtn { font-size: 13px !important; }
  body.theme-dark #themeBtn::before,
  body.theme-light #themeBtn::before { font-size: 20px !important; }
  .toolbar #runtimeStatus {
    flex: 0 0 auto !important;
    max-width: none !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    margin: 0 3px !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  #languageSelect {
    width: 48px !important;
    min-width: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 4px 5px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    flex: 0 0 48px !important;
    touch-action: manipulation;
  }
}

@media (max-width: 360px) {
  .toolbar { gap: 5px !important; padding-left: 6px !important; padding-right: 6px !important; }
  .toolbar-left, .toolbar-right { gap: 4px !important; }
  #modeButton,
  #newBtn, #openBtn, #saveBtn, #runBtn,
  #zoomInBtn, #zoomOutBtn,
  #themeBtn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }
  .toolbar #runtimeStatus { max-width: none !important; font-size: 10px !important; }
  #languageSelect { width: 46px !important; min-width: 46px !important; }
}

/* V1.89 — état réseau visible mais distinct de « Python prêt » */
.network-status{position:relative;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;border:1px solid var(--border,#526070);border-radius:9px;opacity:.9;color:var(--muted,#9aa8b8);background:rgba(127,140,155,.08);transition:background .15s,color .15s,border-color .15s}.network-status svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}.network-status.offline{opacity:1;color:#e4a63a;border-color:rgba(228,166,58,.6);background:rgba(228,166,58,.13)}.network-status.offline::after{content:"";position:absolute;width:19px;height:2px;border-radius:2px;background:currentColor;transform:rotate(-45deg)}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pwa-update-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10050;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:9px 10px 9px 14px;border:1px solid var(--border,#3b4655);border-radius:12px;background:var(--panel,#20262f);color:var(--text,#eef3f7);box-shadow:0 8px 30px rgba(0,0,0,.28);font-size:13px}.pwa-update-bar[hidden]{display:none}.pwa-update-bar button{border:1px solid var(--border,#526070);border-radius:8px;padding:6px 10px;background:var(--accent,#22a866);color:white;font:inherit;cursor:pointer}.pwa-update-bar .pwa-update-close{background:transparent;color:inherit;border:0;font-size:20px;line-height:1;padding:3px 5px}.recovery-toast{position:fixed;right:14px;bottom:14px;z-index:10040;max-width:min(360px,calc(100vw - 28px));padding:9px 12px;border:1px solid var(--border,#3b4655);border-radius:10px;background:var(--panel,#20262f);color:var(--text,#eef3f7);box-shadow:0 6px 24px rgba(0,0,0,.22);font-size:12px}.recovery-toast[hidden]{display:none}
@media(max-width:600px){.network-status{width:40px;height:40px;flex-basis:40px}.network-status svg{width:19px;height:19px}.pwa-update-bar{bottom:10px;font-size:12px}.pwa-update-bar span{max-width:48vw}.pwa-update-bar button{padding:7px 9px}.recovery-toast{right:10px;bottom:10px}}


/* V1.95 — statuts sur la même barre que le titre Console Python. */
.console-header{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;width:100%;box-sizing:border-box;min-height:29px;padding:0 8px 0 0;border-bottom:1px solid var(--border);background:var(--panel)}
.console-header .console-label{flex:1 1 auto;min-width:0;margin:0;border:0!important;background:transparent!important;white-space:nowrap}
.console-statuses{position:static!important;float:none!important;margin:0 0 0 auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:7px;flex:0 0 auto;align-self:center!important}
.console-statuses .network-status{width:25px;height:25px;flex:0 0 25px;border-radius:50%;border:1px solid rgba(70,190,105,.55);background:rgba(70,190,105,.10);color:#49c96d;opacity:1;font-size:15px;line-height:1}
.console-statuses .network-status .network-globe{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.console-statuses .network-status.offline{color:#e25555;border-color:rgba(226,85,85,.65);background:rgba(226,85,85,.12)}
.console-statuses .network-status.offline::after{content:"";position:absolute;width:17px;height:2px;border-radius:2px;background:#e25555;transform:rotate(-45deg)}
.console-statuses .python-badge{display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;min-width:29px;height:25px;padding:0 5px;border:1px solid var(--border);border-radius:7px;background:rgba(127,140,155,.08);color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.1px;margin:0!important}
.console-statuses .python-badge.loading{color:var(--muted)}
.console-statuses .python-badge.ready{color:#49c96d;border-color:rgba(70,190,105,.55);background:rgba(70,190,105,.10)}
.console-statuses .python-badge.error{color:#e25555;border-color:rgba(226,85,85,.65);background:rgba(226,85,85,.12)}
.console-statuses .python-badge[hidden]{display:none!important}
@media(max-width:600px){.console-header{min-height:31px;padding-right:6px}.console-statuses{gap:5px}.console-statuses .network-status{width:27px;height:27px;flex-basis:27px}.console-statuses .python-badge{height:27px;min-width:31px}}
/* V1.95 — ordre permanent : Py, réseau, version. */
.console-statuses .crocode-version{display:inline-flex;align-items:center;height:25px;padding:0 2px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.15px;white-space:nowrap;opacity:.82}
@media(max-width:600px){.console-statuses .crocode-version{height:27px;font-size:9px}}


/* V1.96 — largeur du panneau Projet réglable sur ordinateur. */
.project-resizer{flex:0 0 7px;width:7px;margin-left:-4px;margin-right:-3px;position:relative;z-index:8;cursor:col-resize;touch-action:none;background:transparent}
.project-resizer::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:1px;background:transparent;transition:background .12s}
.project-resizer:hover::after,.project-resizer.dragging::after{background:var(--accent)}
.project-panel.collapsed + .project-resizer{display:none}
body.project-resizing,body.project-resizing *{cursor:col-resize!important;user-select:none!important}
@media(max-width:720px){.project-resizer{display:none!important}.project-panel:not(.collapsed){width:auto!important;max-width:170px}}


/* Crocode V2.00 — real nested Project tree */
.project-file { padding-left: calc(5px + (var(--tree-depth, 0) * 16px)); }
.project-tree-folder { width: 100%; }
.project-tree-children { width: 100%; }
.project-tree-folder.collapsed > .project-tree-children { display: none; }
.project-folder { cursor: pointer !important; }
.project-folder-caret { font-size: 12px; }


/* Crocode V2.01 — disponibilité hors ligne + mise à jour. */
.offline-ready-status{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;flex:0 0 25px;font-size:18px;font-weight:900;line-height:1;border:1px solid currentColor;border-radius:50%;box-sizing:border-box;transition:color .15s,border-color .15s,background .15s}
.offline-ready-status.ready{color:#49c96d;background:rgba(70,190,105,.10)}
.offline-ready-status.partial,.offline-ready-status.pending{color:#e4a63a;background:rgba(228,166,58,.10)}
.offline-ready-status.error{color:#e25555;background:rgba(226,85,85,.10)}
.crocode-version.update-available{color:#e4a63a!important;opacity:1!important;cursor:pointer}
@media(max-width:600px){.offline-ready-status{width:27px;height:27px;flex-basis:27px;font-size:19px}}


/* Crocode V2.02 — hierarchical Project indentation and folding */
.project-tree-folder { display:block; width:100%; }
.project-tree-children { display:block; width:100%; }
.project-tree-folder.collapsed > .project-tree-children { display:none !important; }
.project-file { padding-left: calc(7px + (var(--tree-depth, 0) * 20px)) !important; }
.project-folder { cursor:pointer !important; }
.project-folder-caret { width:19px; min-width:19px; font-size:12px; transition:transform .1s ease; }


/* V2.04 — authoritative status placement. No legacy status may appear in the main toolbar. */
.toolbar #runtimeStatus,.toolbar #networkStatus,.toolbar .runtime-status,.toolbar .network-status{display:none!important}
.console-header .console-statuses #runtimeStatus{display:inline-flex!important}
.console-header .console-statuses #runtimeStatus[hidden]{display:none!important}
.console-header .console-statuses #networkStatus{display:inline-flex!important}

/* V2.13 — fenêtre Crocode de disponibilité hors ligne */
.offline-modal-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.42);backdrop-filter:blur(3px)}
.offline-modal{width:min(430px,calc(100vw - 32px));background:var(--panel,#fff);color:var(--text,#202124);border:1px solid rgba(127,127,127,.24);border-radius:14px;box-shadow:0 18px 55px rgba(0,0,0,.28);padding:22px}
.offline-modal h2{margin:0 0 6px;font-size:20px}.offline-modal-subtitle{margin:0 0 18px;opacity:.72;font-size:14px}
.offline-modal-status{display:grid;gap:9px;margin:0 0 18px}.offline-modal-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:9px;background:rgba(127,127,127,.08)}
.offline-modal-state{font-weight:600}.offline-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}.offline-dot.ready{background:#2e9d50}.offline-dot.error{background:#d64a4a}
.offline-modal-details{margin:0 0 16px;padding:11px 12px;border-radius:9px;background:rgba(127,127,127,.08);font-size:12px;white-space:pre-wrap;max-height:170px;overflow:auto}
.offline-modal-actions{display:flex;justify-content:flex-end}.offline-modal-close{border:0;border-radius:8px;padding:8px 16px;cursor:pointer;font:inherit;font-weight:600;background:#3478f6;color:#fff}

/* V2.14 — installation et mise à jour PWA */
.pwa-toast{position:fixed;right:18px;bottom:18px;z-index:10020;width:min(390px,calc(100vw - 36px));padding:14px 15px;background:var(--panel,#fff);color:var(--text,#202124);border:1px solid rgba(127,127,127,.25);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.25)}
.pwa-toast-title{font-weight:700;margin-bottom:4px}.pwa-toast-text{font-size:13px;opacity:.78;margin-bottom:11px}.pwa-toast-actions{display:flex;justify-content:flex-end;gap:8px}
.pwa-btn{border:0;border-radius:8px;padding:7px 12px;font:inherit;font-weight:600;cursor:pointer}.pwa-btn-primary{background:#3478f6;color:#fff}.pwa-btn-secondary{background:rgba(127,127,127,.14);color:inherit}

/* V2.15 — accolades */
.tok-brace { color:#ffcf70; font-weight:700; }
body.theme-light .tok-brace { color:#9a6500; }

/* V2.16 — expression complète entre accolades dans les f-strings */
.tok-fexpr { color:#66d9ef; font-weight:600; }
body.theme-light .tok-fexpr { color:#007c91; font-weight:600; }

/* V2.20 — l'accueil appartient strictement à la zone éditeur (haut droite). */
.editor-panel, .editor-body, .code-area, .editor-shell { min-height:0; }
.editor-shell { overflow:hidden; }
#welcomePage { overflow:hidden; }

/* V2.21 — le panneau Accueil occupe exclusivement la surface de l'éditeur. */
#welcomePage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* V2.23 — identité commune des fenêtres Crocode */
.crocode-modal-brand{
  display:flex;align-items:center;gap:9px;margin:0 0 15px;
  font-size:15px;line-height:1;color:var(--text,#202124)
}
.offline-modal,.pwa-toast,
[class*="modal-box"],[class*="modal-content"],[class*="modal-card"],
[class*="dialog-box"],[class*="dialog-content"],[class*="dialog-card"]{
  border-radius:14px!important;
  border:1px solid rgba(127,127,127,.24)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.28)!important
}
.offline-modal-close,.pwa-btn-primary,
[class*="modal"] button.primary,[class*="dialog"] button.primary{
  background:var(--accent,#2aa86b)!important;color:#fff!important;
  border-radius:8px!important;font-weight:600
}
.pwa-toast .crocode-modal-brand{margin-bottom:10px}

.crocode-unified-overlay{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.44);backdrop-filter:blur(3px)}
.crocode-unified-card{width:min(440px,calc(100vw - 32px));box-sizing:border-box;padding:22px;background:var(--panel,#fff);color:var(--text,#202124);border:1px solid rgba(127,127,127,.24);border-radius:14px;box-shadow:0 18px 55px rgba(0,0,0,.28)}
.crocode-unified-card h2{margin:0 0 8px;font-size:20px}.crocode-unified-message{font-size:14px;line-height:1.5;opacity:.82;margin-bottom:18px}.crocode-unified-actions{display:flex;justify-content:flex-end;gap:8px}.crocode-unified-actions button{border:0;border-radius:8px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;background:rgba(127,127,127,.14);color:inherit}.crocode-unified-actions button.primary{background:var(--accent,#2aa86b);color:#fff}

/* V2.24 — vrai logo Crocode Editor dans les dialogues */
.crocode-modal-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 16px;
}
.crocode-modal-logo{
  display:block;
  width:auto;
  height:38px;
  max-width:min(240px,80%);
  object-fit:contain;
}
.crocode-modal-logo-light{display:none}
body.theme-light .crocode-modal-logo-dark{display:none}
body.theme-light .crocode-modal-logo-light{display:block}

/* V2.25 — vrai logo également dans les dialogs HTML Nouveau fichier / HTML-CSS. */
.input-dialog .crocode-native-dialog-brand {
  display:flex;
  justify-content:center;
  margin:0 0 16px;
}
.input-dialog .crocode-native-dialog-brand .crocode-modal-logo {
  height:42px;
  width:auto;
  max-width:min(250px,82%);
}

/* V2.27 — la version orange devient une vraie action de mise à jour. */
#crocodeVersion.update-available { cursor:pointer; }
#crocodeVersion.update-available:hover { text-decoration:underline; }
#crocodeVersion.update-available:focus-visible { outline:2px solid var(--accent,#2aa86b); outline-offset:3px; border-radius:4px; }


/* V2.34 — alignement Projet / onglets, reconstruit depuis V2.31.
   Aucun changement du padding gauche ni du margin-right des onglets. */
@media (min-width: 601px) {
  body:not(.theme-light) .tabs {
    height: 43px;
    min-height: 43px;
    box-sizing: border-box;
    align-items: stretch;
    background: #202124;
  }

  body:not(.theme-light) .tab {
    height: 43px;
    min-height: 43px;
    box-sizing: border-box;
  }

  body:not(.theme-light) .tab:not(.active) {
    background: #303136;
  }

  body:not(.theme-light) .tab:not(.active):hover {
    background: #3a3b40;
  }

  body:not(.theme-light) .tab.active {
    background: var(--editor, var(--editor-bg, #1e1e1e));
    color: var(--text);
  }
}


/* V2.35 — micro-alignement des onglets desktop.
   Conserve les couleurs V2.34. */
@media (min-width: 601px) {
  .code-area > .tabs {
    padding-left: 1px;
  }

  body:not(.theme-light) .tabs {
    align-items: flex-start;
  }

  body:not(.theme-light) .tab {
    height: 41px;
    min-height: 41px;
  }
}


/* V2.36 — alignement exact de la ligne Projet / onglets.
   On annule uniquement la réduction verticale V2.35.
   Le +1 px horizontal entre Projet et le premier onglet est conservé. */
@media (min-width: 601px) {
  .code-area > .tabs {
    padding-left: 1px;
  }

  body:not(.theme-light) .tabs {
    height: 43px;
    min-height: 43px;
    align-items: flex-end;
  }

  body:not(.theme-light) .tab {
    height: 43px;
    min-height: 43px;
  }
}


/* V2.37 — micro-alignement final des onglets desktop.
   1 px d'air au-dessus, bas conservé sur la ligne sous PROJET,
   et 1 px de moins entre les onglets. */
@media (min-width: 601px) {
  body:not(.theme-light) .tabs {
    height: 43px;
    min-height: 43px;
    align-items: flex-end;
  }

  body:not(.theme-light) .tab {
    height: 42px;
    min-height: 42px;
    margin-right: 2px;
  }
}


/* V2.38 — correction uniquement du bas des onglets desktop.
   Le bord supérieur reste exactement à la position V2.37.
   Le bord inférieur remonte de 3 px. */
@media (min-width: 601px) {
  body:not(.theme-light) .tabs {
    height: 43px;
    min-height: 43px;
    align-items: flex-start;
    padding-top: 1px;
    box-sizing: border-box;
  }

  body:not(.theme-light) .tab {
    height: 39px;
    min-height: 39px;
    margin-right: 2px;
  }
}


/* V2.39 — ajustements verticaux demandés.
   Haut des onglets inchangé par rapport à V2.38 ; seul le bas remonte encore de 2 px.
   Le bloc éditeur (gouttière numéros + zone de code) remonte ensemble de 5 px. */
@media (min-width: 601px) {
  body:not(.theme-light) .tab {
    height: 37px;
    min-height: 37px;
    margin-right: 2px;
  }

  .editor-shell {
    transform: translateY(-5px);
    height: calc(100% + 5px);
  }
}


/* V2.40 — même espacement entre PROJET et le premier onglet
   qu'entre deux onglets : 2 px. Aucun autre ajustement. */
@media (min-width: 601px) {
  .code-area > .tabs {
    padding-left: 2px;
  }
}


/* V2.42 — mobile uniquement : rapprocher les commandes thème + langue.
   Déplacement horizontal demandé : 200 px vers la gauche.
   Taille et hauteur des commandes inchangées. */


/* V2.43 — couleurs mobile alignées sur la version web/desktop.
   Couleurs uniquement, aucune géométrie modifiée. */
@media (max-width: 600px) {
  body:not(.theme-light) .tabs { background:#202124; }
  body:not(.theme-light) .tab:not(.active) { background:#303136; }
  body:not(.theme-light) .tab:not(.active):hover { background:#3a3b40; }
  body:not(.theme-light) .tab.active {
    background:var(--editor, var(--editor-bg, #1e1e1e));
    color:var(--text);
  }
  body:not(.theme-light) .editor-shell,
  body:not(.theme-light) .code-editor,
  body:not(.theme-light) .highlight { background:var(--editor); }
  body:not(.theme-light) .line-numbers {
    color:var(--muted);
    background:var(--line-area);
  }
  body:not(.theme-light) .project-header,
  body:not(.theme-light) .project-panel,
  body:not(.theme-light) .editor-shell,
  body:not(.theme-light) .code-editor,
  body:not(.theme-light) .highlight,
  body:not(.theme-light) .console-header,
  body:not(.theme-light) .console-output,
  body:not(.theme-light) .tool-btn,
  body:not(.theme-light) .small-btn,
  body:not(.theme-light) .language-select { border-color:var(--border); }
  body:not(.theme-light) .tool-btn,
  body:not(.theme-light) .small-btn,
  body:not(.theme-light) .language-select { color:var(--text); }
}

/* V2.47 — PC uniquement : hauteur supplémentaire pour l'ascenseur des onglets.
   La zone titre PROJET est adaptée à la même hauteur. */
@media (min-width: 1024px) {
  .tabs {
    height: 50px;
    min-height: 50px;
    box-sizing: border-box;
  }
  .project-header {
    height: 50px;
    min-height: 50px;
    box-sizing: border-box;
  }
  .tab {
    height: 37px;
    min-height: 37px;
  }
}

/* V2.48 — PC uniquement : agrandissement réel des onglets.
   PROJET et la zone d'onglets restent à 50 px ; onglets à 43 px. */
@media (min-width: 1024px) {
  .project-header,
  .tabs {
    height: 50px;
    min-height: 50px;
    box-sizing: border-box;
  }

  body:not(.theme-light) .tab,
  body.theme-light .tab,
  .tab {
    height: 43px;
    min-height: 43px;
    box-sizing: border-box;
    align-items: center;
  }
}


/* V2.49 — PC : correction effective onglets + ascenseur.
   Une scrollbar Windows standard peut prendre ~15–17 px DANS les 50 px de .tabs :
   elle rognait donc l'onglet de 43 px. On réserve explicitement 7 px à une
   scrollbar fine et on force la hauteur utile des onglets à 43 px. */
@media (min-width: 1024px) {
  .project-header,
  .code-area > .tabs {
    height: 50px !important;
    min-height: 50px !important;
    box-sizing: border-box;
  }

  .code-area > .tabs {
    align-items: flex-start !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  .code-area > .tabs > .tab {
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto;
    align-self: flex-start;
    align-items: center;
  }

  .code-area > .tabs::-webkit-scrollbar {
    height: 7px;
  }

  .code-area > .tabs::-webkit-scrollbar-track {
    background: var(--window);
  }

  .code-area > .tabs::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
  }
}


/* V2.50 — PC uniquement : marge réelle sous l'ascenseur horizontal.
   Onglets conservés à 43 px ; ligne PROJET + onglets portée à 55 px
   pour que les 7 px de scrollbar soient entièrement visibles. */
@media (min-width: 1024px) {
  .project-header,
  .code-area > .tabs {
    height: 55px !important;
    min-height: 55px !important;
    box-sizing: border-box;
  }

  .code-area > .tabs > .tab {
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
  }

  .code-area > .tabs::-webkit-scrollbar {
    height: 7px;
  }
}


/* V2.51 — PC : l'éditeur ne remonte plus de 5 px sur l'ascenseur des onglets.
   La remontée V2.39 reste conservée sous 1024 px ; sur PC elle est annulée. */
@media (min-width: 1024px) {
  .editor-shell {
    transform: none !important;
    height: 100% !important;
  }
}


/* V2.52 — PC : onglets plus compacts et suppression de la réserve noire.
   La correction V2.51 est conservée : l'éditeur ne chevauche plus la scrollbar.
   Sans débordement, la ligne reste compacte ; la scrollbar apparaît seulement si nécessaire. */
@media (min-width: 1024px) {
  .project-header,
  .code-area > .tabs {
    height: 43px !important;
    min-height: 43px !important;
    box-sizing: border-box;
  }

  .code-area > .tabs {
    scrollbar-gutter: auto !important;
  }

  .code-area > .tabs > .tab {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
  }

  .editor-shell {
    transform: none !important;
    height: 100% !important;
  }
}


/* V2.53 — PC uniquement : alignement fin du bas de PROJET avec les onglets.
   Les dimensions/scrollbar de V2.52 restent inchangées. */
@media (min-width: 1024px) {
  .project-header {
    height: 40px !important;
    min-height: 40px !important;
  }
}


/* V2.54 — PC uniquement : onglets descendus de 3 px.
   Petit vide volontaire en haut ; le bas des onglets rejoint la zone d'édition.
   Hauteur des onglets et comportement de la scrollbar inchangés. */
@media (min-width: 1024px) {
  .code-area > .tabs {
    padding-top: 3px !important;
    box-sizing: border-box;
  }

  .code-area > .tabs > .tab {
    transform: translateY(0) !important;
  }
}


/* V2.55 — PC uniquement : même réglage que V2.54, remonté de 2 px.
   Décalage final des onglets : 1 px vers le bas au lieu de 3 px. */
@media (min-width: 1024px) {
  .code-area > .tabs {
    padding-top: 1px !important;
  }
}


/* V2.56 — PC, mode clair uniquement :
   retirer 2 px au BAS de la zone gris clair derrière les onglets.
   Les onglets eux-mêmes restent inchangés. */
@media (min-width: 1024px) {
  body.theme-light .code-area > .tabs {
    height: 41px !important;
    min-height: 41px !important;
  }
}


/* V2.57 — PC uniquement : remonter de 2 px le contenu des onglets.
   La position et la hauteur des onglets restent inchangées. */
@media (min-width: 1024px) {
  .code-area > .tabs > .tab {
    padding-bottom: 4px;
  }
}


/* V2.59 — correction de V2.58.
   PC uniquement :
   - texte/contenu des onglets remonté de 3 px supplémentaires ;
   - aucune modification de la hauteur des lignes ;
   - seulement 2 px de zone supplémentaire EN HAUT derrière les numéros. */
@media (min-width: 1024px) {
  .code-area > .tabs > .tab {
    padding-bottom: 10px !important;
  }

  .line-numbers {
    padding-top: 12px !important;
  }
}


/* V2.60 — PC uniquement :
   encore +2 px de zone vide EN HAUT derrière les numéros de lignes.
   Aucun changement de l'interligne ni des lignes de code. */
@media (min-width: 1024px) {
  .line-numbers {
    padding-top: 14px !important;
  }
}


/* V2.61 — PC : supprimer la bande sombre sous les onglets.
   Onglet 40 px + espace supérieur 1 px = zone d'onglets 41 px.
   La zone derrière les numéros commence donc directement sous les onglets. */
@media (min-width: 1024px) {
  .code-area > .tabs {
    height: 41px !important;
    min-height: 41px !important;
  }
}


/* V2.67 — PC : insertion ENTRE les onglets pendant le glisser-déposer. */
@media (min-width: 1024px) {
  .code-area > .tabs > .tab[draggable="true"] {
    cursor: grab;
    position: relative;
  }

  .code-area > .tabs > .tab[draggable="true"]:active {
    cursor: grabbing;
  }

  .code-area > .tabs > .tab.tab-dragging {
    opacity: .55;
  }

  .code-area > .tabs > .tab.tab-drop-before::before,
  .code-area > .tabs > .tab.tab-drop-after::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: currentColor;
    border-radius: 2px;
    z-index: 20;
    pointer-events: none;
  }

  .code-area > .tabs > .tab.tab-drop-before::before {
    left: -2px;
  }

  .code-area > .tabs > .tab.tab-drop-after::after {
    right: -2px;
  }
}








/* V2.73 — mobile : correction des zones tactiles du menu principal.
   Le conteneur de droite ne doit jamais recouvrir/intercepter les boutons de gauche. */
@media (max-width: 600px) {
  .toolbar-right {
    transform: translateX(-300px) !important;
    position: relative !important;
    z-index: 100 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .toolbar-right > * {
    pointer-events: auto !important;
  }

  .toolbar-left,
  .toolbar-left > * {
    position: relative;
    z-index: 101 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #themeBtn,
  #languageSelect {
    transform: none !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* Même soleil/lune monochrome que le web. */
  body.theme-dark #themeBtn::before { content: "☀" !important; }
  body.theme-light #themeBtn::before { content: "☾" !important; }
}


/* V2.81 — desktop sombre calé sur les couleurs PIXELS de la capture mobile.
   Valeurs relevées directement dans IMG_5296.png, sans compensation ni ancienne version.
   Aucun changement de géométrie ou d'icônes. */
@media (min-width: 601px) {
  body.theme-dark {
    --window:#202124;
    --toolbar:#292A2D;
    --panel:#2D2F33;
    --editor:#242529;
    --console:#25262A;
    --button:#34363B;
    --button-hover:#414349;
    --button-pressed:#2B2D31;
    --border:#55585F;
    --text:#F1F3F4;
    --muted:#B0B3B8;
    --accent:#36C96B;
    --tab:#33353A;
    --tab-selected:#45474D;
    --selection:rgba(62,95,73,.48);
    --line-area:#2B2D31;
    --line-current:#34363B;
  }

  body.theme-dark { background:#202124 !important; color:#F1F3F4 !important; }
  body.theme-dark .toolbar { background:#292A2D !important; border-color:#55585F !important; }
  body.theme-dark .project-panel,
  body.theme-dark .project-header,
  body.theme-dark .editor-panel { background:#2D2F33 !important; }

  body.theme-dark .editor-shell,
  body.theme-dark .code-editor,
  body.theme-dark .highlight { background:#242529 !important; }

  body.theme-dark .console-output { background:#25262A !important; }
  body.theme-dark .line-numbers { background:#2B2D31 !important; color:#B0B3B8 !important; }

  body.theme-dark .tool-btn,
  body.theme-dark .small-btn,
  body.theme-dark .mode-button,
  body.theme-dark .language-select {
    background:#34363B !important;
    color:#F1F3F4 !important;
    border-color:#55585F !important;
  }

  body.theme-dark .tabs { background:#202124 !important; }
  body.theme-dark .tab:not(.active) { background:#303136 !important; color:#B0B3B8 !important; }
  body.theme-dark .tab:not(.active):hover { background:#3A3B40 !important; color:#F1F3F4 !important; }
  body.theme-dark .tab.active,
  body.theme-dark .tab.active:hover { background:#242529 !important; color:#F1F3F4 !important; }
}


/* V2.83 — survols cohérents + bordures vertes.
   Le fond de survol reste celui du thème et les contrôles avec bordure
   prennent l'accent vert au survol, comme prévu par le design Crocode. */
@media (min-width: 601px) {
  body.theme-dark .tab:not(.active):hover,
  body.theme-light .tab:not(.active):hover {
    background:var(--button-hover) !important;
    color:var(--text) !important;
  }

  .toolbar .tool-btn:hover,
  .toolbar .small-btn:hover,
  .toolbar .mode-button:hover,
  .toolbar .language-select:hover,
  .toolbar .mode-menu-item:hover {
    border-color:var(--accent) !important;
  }
}


/* V2.84 — ajustements PC demandés.
   1) Texte des onglets remonté de 3 px supplémentaires.
   2) Ascenseur horizontal de la barre d'onglets calé tout en bas de la barre.
   Mobile inchangé. */
@media (min-width: 1024px) {
  .code-area > .tabs > .tab {
    position:relative !important;
    top:-3px !important;
  }

  .code-area > .tabs {
    box-sizing:border-box !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:0 !important;
    scrollbar-gutter:stable !important;
  }

  .code-area > .tabs::-webkit-scrollbar {
    height:7px !important;
  }

  .code-area > .tabs::-webkit-scrollbar-track,
  .code-area > .tabs::-webkit-scrollbar-thumb {
    margin-block:0 !important;
  }
}

/* V2.85 — ascenseur horizontal des onglets à 5 px sur ordinateur. */
@media (min-width: 1024px) {
  .code-area > .tabs::-webkit-scrollbar {
    height:5px !important;
  }
  .code-area > .tabs {
    scrollbar-width:thin;
  }
}

/* V2.86 — correction position des onglets.
   Annule les 3 px de remontée ajoutés en V2.84.
   L'ascenseur reste à 5 px comme en V2.85. */
@media (min-width: 1024px) {
  .code-area > .tabs > .tab {
    top:0 !important;
  }
}

/* V2.87 — onglet à sa position normale, contenu 3 px plus haut.
   L'ascenseur reste à 5 px. */
@media (min-width: 1024px) {
  .code-area > .tabs > .tab {
    top:0 !important;
  }

  /* On déplace uniquement le contenu visuel de l'onglet,
     sans déplacer la boîte de l'onglet elle-même. */
  .code-area > .tabs > .tab > * {
    position:relative;
    top:-3px;
  }
}


/* V2.88 — évite l'apparition de la gouttière des numéros au chargement.
   Tant que l'écran d'accueil est visible, ni l'éditeur ni la zone des
   numéros de ligne ne doivent occuper d'espace. Dès qu'un fichier est
   ouvert, le comportement normal reprend automatiquement. */
.editor-shell:has(.welcome-page:not([hidden])) .line-numbers {
  display:none !important;
}


/* V2.95 — définition canonique du bouton de thème.
   Une seule source de vérité pour le pictogramme clair/sombre,
   indépendante de la largeur d’écran. Les dimensions tactiles du bouton
   restent gérées par les règles responsive existantes. */
#themeBtn {
  font-size: 0 !important;
  font-family: inherit !important;
}

#themeBtn::before {
  display: inline-block !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

body.theme-dark #themeBtn::before { content: "☀" !important; }
body.theme-light #themeBtn::before { content: "☾" !important; }


/* V2.95 — Desktop >1024 px : mêmes icônes emoji colorées que les versions mobile/intermédiaire. */
@media (min-width: 1025px) {
  #themeBtn::before {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 20px !important;
  }
  body.theme-dark #themeBtn::before { content: "☀️" !important; }
  body.theme-light #themeBtn::before { content: "🌙" !important; }
}

/* V2.96 — bouton thème homogène sur TOUS les breakpoints.
   Cette règle finale neutralise les anciennes variantes responsive :
   même emoji couleur, même police, même taille et même centrage partout. */
#themeBtn {
  font-size: 0 !important;
}
#themeBtn::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
  vertical-align: middle !important;
}
body.theme-dark #themeBtn::before { content: "☀️" !important; }
body.theme-light #themeBtn::before { content: "🌙" !important; }

/* V2.97 — icônes de thème monochromes et strictement homogènes.
   Une seule définition finale pour mobile, intermédiaire et desktop. */
#themeBtn {
  font-size: 0 !important;
}
#themeBtn::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
  vertical-align: middle !important;
  color: currentColor !important;
}
body.theme-dark #themeBtn::before { content: "☀\FE0E" !important; }
body.theme-light #themeBtn::before { content: "☾\FE0E" !important; }

/* V3.50 — contour drag & drop complet dans la zone d’édition indépendante. */
.code-area.file-drag-independent {
  outline: none;
}
.code-area.file-drag-independent::before {
  content: "";
  position: absolute;
  z-index: 79;
  inset: 3px;
  box-sizing: border-box;
  border: 2px dashed var(--accent, #55d5ff);
  pointer-events: none;
}

/* V3.50 — console clear control and brief visual reset on Python launch. */
.console-heading{display:flex;align-items:center;flex:1 1 auto;min-width:0}
.console-heading .console-label{flex:0 1 auto!important}
.console-clear-btn{margin-left:4px;padding:2px 8px;border:1px solid var(--border);border-radius:5px;background:transparent;color:var(--muted);font:inherit;font-size:11px;line-height:18px;cursor:pointer}
.console-clear-btn:hover,.console-clear-btn:focus-visible{color:var(--text);background:var(--hover,rgba(127,127,127,.12));outline:none}
.console.console-run-flash{animation:crocodeConsoleRestart 200ms ease-out}
@keyframes crocodeConsoleRestart{0%{opacity:.18}100%{opacity:1}}


/* V3.50 — HTML/CSS keeps Crocode status/logo but hides the Python-only console UI. */
body.web-programming-mode .console-heading{display:none!important}
body.web-programming-mode #console{display:none!important}
body.web-programming-mode .console-header{justify-content:flex-end!important}
body.web-programming-mode .console-wrap{display:flex;align-items:center;justify-content:center}
body.web-programming-mode .console-wrap .watermark{display:block}

/* V3.50 — HTML/CSS: full editor height, bottom status line only.
   The Crocode watermark now uses the logo natural aspect ratio at a true 125px width, matching Python. */
body.web-programming-mode .splitter{display:none!important}
body.web-programming-mode .console-panel{flex:0 0 auto!important;min-height:0!important;border:1px solid var(--border)}
body.web-programming-mode .console-header{min-height:29px!important;border-bottom:0!important;padding-left:0!important}
body.web-programming-mode .console-wrap{display:none!important}
body.web-programming-mode .code-editor::after{
  content:"";position:absolute;right:14px;bottom:14px;width:125px;aspect-ratio:1381/1139;
  background:url('../assets/logos/crocode_editor_logo_dark.png') no-repeat right bottom/contain;
  opacity:.20;pointer-events:none;z-index:0;
}
body.theme-light.web-programming-mode .code-editor::after{
  background-image:url('../assets/logos/crocode_editor_logo_light.png');opacity:.13;
}
body.web-programming-mode .highlight{background:transparent!important;z-index:1}
body.web-programming-mode .editor{z-index:2}
@media(max-width:600px){body.web-programming-mode .console-header{min-height:31px!important}}


/* V3.50 — aide pédagogique après le traceback Python/Pygame utile. */
.crocode-error-help-line { color: #22c55e; font-weight: 700; white-space: pre-wrap; }
.crocode-error-help-text { color: var(--text); font-weight: 700; white-space: pre-wrap; }

/* V3.50 — clickable Crocode error location + green editor line highlight. */
.crocode-error-help-link { cursor:pointer; text-decoration:none; transition:color 120ms ease; }
@media (hover:hover) and (pointer:fine){
  .crocode-error-help-link:hover { color:#86efac; }
}
.crocode-error-help-link:focus-visible { color:#86efac; outline:1px solid currentColor; outline-offset:2px; border-radius:2px; }
.crocode-error-help-link:hover { filter:brightness(1.15); }
.crocode-editor-error-line { position:absolute; left:0; right:0; height:calc(var(--font-size) * 1.45); background:rgba(34,197,94,.18); border-left:3px solid #22c55e; pointer-events:none; z-index:0; }
body.theme-light .crocode-editor-error-line { background:rgba(22,163,74,.14); }


/* V3.50 — Project tree: persistent folders and a clear active-file marker. */
.project-file.active:not(.project-folder){
  box-shadow: inset 3px 0 0 #49c96d;
  font-weight: 650;
}
.project-folder[aria-expanded="false"] .project-folder-caret{opacity:.85}