:root{
  /* Mode Clair — l'éditeur de code (Monaco/CodeMirror) reste sombre volontairement,
     seule l'interface autour (topbar, panneaux, modales) change. */
  --crust:#eeece7;--base:#f5f3ee;--surface:#ffffff;--card:#ffffff;--card2:#f6f3ed;
  --editor-bg:#1a1815;
  --ember:#a8460f;--ember-dim:rgba(168,70,15,.08);--ember-border:rgba(168,70,15,.24);
  --sand:#2a2015;--sand2:#5c4a38;--fog:#6b5a44;--muted:#8a7358;
  --green:#2f9e63;--blue:#2f6fd6;--red:#c93f3f;--yellow:#b8860b;--purple:#7c5cbf;
  --border:rgba(168,70,15,.14);--border2:rgba(168,70,15,.24);
  --topbar-bg:rgba(238,236,231,.97);--overlay-bg:rgba(238,236,231,.82);--modal-overlay:rgba(0,0,0,.4);
  --font:'DM Sans',system-ui,sans-serif;
  --head:'Syne',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --r:12px;--r-sm:8px;--r-xs:5px;
  --ease:cubic-bezier(.4,0,.2,1);
  --topbar-h:52px;--sidebar-w:52px;--statusbar-h:24px;
}
[data-theme="dark"]{
  /* Dark Marron — comportement historique */
  --crust:#0c0a08;--base:#111009;--surface:#161310;--card:#1c1814;--card2:#231e19;
  --editor-bg:#1a1815;
  --ember:#e07b35;--ember-dim:rgba(224,123,53,.1);--ember-border:rgba(224,123,53,.22);
  --sand:#ede0cc;--sand2:#c4b49e;--fog:#9c8a76;--muted:#8f7c68;
  --green:#3ecf6e;--blue:#4a9eff;--red:#e05252;--yellow:#f5c842;--purple:#a78bfa;
  --border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.11);
  --topbar-bg:rgba(12,10,8,.97);--overlay-bg:rgba(12,10,8,.82);--modal-overlay:rgba(12,10,8,.8);
}
[data-theme="pure"]{
  /* Dark Pur — fonds neutres, sans teinte brune, accent ember conservé */
  --crust:#18181a;--base:#1d1d20;--surface:#1f1f22;--card:#26262a;--card2:#2c2c30;
  --editor-bg:#1a1815;
  --ember:#e07b35;--ember-dim:rgba(224,123,53,.1);--ember-border:rgba(224,123,53,.28);
  --sand:#ededee;--sand2:#c9c9cc;--fog:#a3a3a8;--muted:#8f8f94;
  --green:#3ecf6e;--blue:#4a9eff;--red:#e05252;--yellow:#f5c842;--purple:#a78bfa;
  --border:#38383d;--border2:#46464c;
  --topbar-bg:rgba(24,24,26,.97);--overlay-bg:rgba(24,24,26,.82);--modal-overlay:rgba(0,0,0,.8);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:var(--font);background:var(--crust);color:var(--sand);display:flex;flex-direction:column;}

/* TOPBAR */
.topbar{height:var(--topbar-h);flex-shrink:0;background:var(--topbar-bg);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 14px;position:relative;z-index:50;}
.topbar-back{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--border);background:transparent;
  color:var(--fog);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;
  text-decoration:none;font-size:.82rem;flex-shrink:0;}
.topbar-back:hover{border-color:var(--ember-border);color:var(--ember);}
.topbar-sep{width:1px;height:20px;background:var(--border);flex-shrink:0;}
.topbar-info{flex:1;min-width:0;display:flex;align-items:center;gap:10px;}
.topbar-title{font-family:var(--head);font-size:.86rem;font-weight:700;color:var(--sand);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;}
.diff-chip{display:inline-flex;align-items:center;font-size:.58rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;padding:2px 8px;border-radius:20px;font-family:var(--mono);flex-shrink:0;}
.diff-chip.beginner{background:rgba(62,207,110,.1);color:var(--green);border:1px solid rgba(62,207,110,.2);}
.diff-chip.intermediate{background:rgba(74,158,255,.1);color:var(--blue);border:1px solid rgba(74,158,255,.2);}
.diff-chip.advanced{background:rgba(224,123,53,.1);color:var(--ember);border:1px solid var(--ember-border);}
.diff-chip.expert{background:rgba(224,82,82,.1);color:var(--red);border:1px solid rgba(224,82,82,.2);}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.timer{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-sm);
  border:1px solid var(--border);font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--sand2);transition:all .3s;}
.timer.warning{color:var(--yellow);border-color:rgba(245,200,66,.3);}
.timer.danger{color:var(--red);border-color:rgba(224,82,82,.3);animation:timerPulse .8s ease infinite;}
@keyframes timerPulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.xp-badge{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--r-sm);
  background:var(--ember-dim);border:1px solid var(--ember-border);font-family:var(--mono);font-size:.75rem;font-weight:700;color:var(--ember);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-sm);
  border:1px solid transparent;font-family:var(--font);font-size:.8rem;font-weight:600;cursor:pointer;
  transition:all .18s;user-select:none;white-space:nowrap;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--sand2);}
.btn-ghost:hover:not(:disabled){border-color:var(--border2);color:var(--sand);}
.btn-primary{background:linear-gradient(135deg,#c96820,var(--ember));color:#0c0a08;border:none;box-shadow:0 2px 12px rgba(224,123,53,.25);}
.btn-primary:hover:not(:disabled){filter:brightness(1.1);}
.btn-success{background:linear-gradient(135deg,#2da85a,var(--green));color:#0c0a08;border:none;}
.btn-success:hover:not(:disabled){filter:brightness(1.1);}
.btn-danger{background:transparent;border-color:rgba(224,82,82,.3);color:var(--red);}
.btn-danger:hover:not(:disabled){background:rgba(224,82,82,.08);}

/* WORKSPACE */
.workspace{flex:1;display:flex;overflow:hidden;position:relative;}

/* ICON SIDEBAR */
.icon-sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--base);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:2px;}
.sb-btn{width:36px;height:36px;border-radius:var(--r-sm);background:transparent;border:none;
  color:var(--fog);display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;position:relative;font-size:.75rem;gap:2px;padding:0;}
.sb-btn:hover{color:var(--sand);background:rgba(255,255,255,.05);}
.sb-btn.active{color:var(--ember);background:var(--ember-dim);}
.sb-btn .lbl{font-size:.43rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono);}
.sb-btn .dot{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;
  background:var(--green);border:1px solid var(--base);display:none;}
.sb-sep{width:26px;height:1px;background:var(--border);margin:4px 0;}
.sb-bottom{margin-top:auto;}

/* LEFT PANEL */
.panel-left{width:330px;min-width:220px;max-width:50%;display:flex;flex-direction:column;
  overflow:hidden;border-right:1px solid var(--border);background:var(--surface);
  transition:width .25s var(--ease),opacity .2s;}
.panel-left.collapsed{width:0;min-width:0;opacity:0;pointer-events:none;}
.desc-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--base);flex-shrink:0;height:36px;}
.desc-tab{padding:0 14px;font-size:.72rem;font-weight:600;cursor:pointer;
  border-bottom:2px solid transparent;color:var(--fog);transition:all .2s;
  display:flex;align-items:center;gap:5px;}
.desc-tab.active{color:var(--ember);border-bottom-color:var(--ember);}
.desc-tab:hover:not(.active){color:var(--sand2);}
.desc-body{flex:1;overflow-y:auto;padding:16px;}
.desc-body::-webkit-scrollbar{width:3px;}
.desc-body::-webkit-scrollbar-thumb{background:var(--muted);border-radius:2px;}
.ch-title{font-family:var(--head);font-size:1.05rem;font-weight:700;margin-bottom:8px;}
.ch-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.ch-stat{display:flex;align-items:center;gap:4px;font-size:.68rem;color:var(--fog);font-family:var(--mono);}
.sec-label{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--fog);
  margin-bottom:7px;display:flex;align-items:center;gap:5px;font-family:var(--mono);}
.desc-text{font-size:.79rem;line-height:1.7;color:var(--sand2);}
.tag{font-size:.63rem;padding:2px 8px;border-radius:20px;background:var(--ember-dim);
  color:var(--ember);border:1px solid var(--ember-border);font-family:var(--mono);}
.code-block{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px;font-family:var(--mono);font-size:.71rem;color:var(--sand2);white-space:pre-wrap;overflow-x:auto;line-height:1.6;}
.tc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px;margin-bottom:6px;}
.tc-head{display:flex;align-items:center;gap:7px;margin-bottom:7px;}
.tc-num{font-family:var(--mono);font-size:.67rem;font-weight:700;color:var(--fog);}
.tc-badge{font-size:.59rem;padding:1px 6px;border-radius:20px;font-family:var(--mono);font-weight:700;}
.tc-badge.pub{background:rgba(62,207,110,.1);color:var(--green);border:1px solid rgba(62,207,110,.2);}
.tc-badge.hid{background:var(--ember-dim);color:var(--ember);border:1px solid var(--ember-border);}
.tc-io{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.tc-lbl{font-size:.59rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--fog);margin-bottom:3px;font-family:var(--mono);}
.tc-val{font-family:var(--mono);font-size:.69rem;color:var(--sand2);background:var(--card2);padding:5px 7px;border-radius:var(--r-xs);white-space:pre-wrap;}
.hist-item{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:5px;transition:border-color .2s;}
.hist-item:hover{border-color:var(--border2);}

/* RESIZER */
.resizer{width:3px;background:var(--border);cursor:col-resize;flex-shrink:0;transition:background .2s;}
.resizer:hover,.resizer.active{background:var(--ember);}

/* EDITOR PANEL */
.panel-right{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:280px;background:var(--editor-bg);}

/* Editor header */
.ed-header{height:36px;flex-shrink:0;background:var(--base);border-bottom:1px solid var(--border);
  display:flex;align-items:stretch;}
.ed-tabs{display:flex;height:100%;}
.ed-tab{display:flex;align-items:center;gap:6px;padding:0 14px;font-size:.73rem;color:var(--fog);
  border-right:1px solid var(--border);border-bottom:2px solid transparent;
  background:var(--editor-bg);}
.ed-tab.active{color:var(--sand);border-bottom-color:var(--ember);}
.ed-dot{width:6px;height:6px;border-radius:50%;background:var(--ember);opacity:0;transition:opacity .2s;flex-shrink:0;}
.ed-tab.modified .ed-dot{opacity:1;}
.ed-header-right{margin-left:auto;display:flex;align-items:center;gap:4px;padding-right:8px;}
.icon-btn{width:28px;height:28px;border-radius:var(--r-xs);border:1px solid var(--border);background:transparent;
  color:var(--fog);display:flex;align-items:center;justify-content:center;font-size:.72rem;cursor:pointer;transition:all .18s;}
.icon-btn:hover{border-color:var(--border2);color:var(--sand);}
.icon-btn.on{border-color:var(--ember-border);color:var(--ember);background:var(--ember-dim);}

/* Toolbar */
.ed-toolbar{height:34px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:6px;padding:0 8px;}
.ed-toolbar-scroll{display:flex;align-items:center;gap:3px;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0;}
.ed-toolbar-scroll::-webkit-scrollbar{display:none;}
.lang-sel{background:var(--card);border:1px solid var(--border);color:var(--sand2);font-family:var(--mono);
  font-size:.7rem;padding:3px 7px;border-radius:var(--r-xs);cursor:pointer;outline:none;transition:border-color .2s;}
.lang-sel:hover{border-color:var(--border2);}
.ed-sep{width:1px;height:16px;background:var(--border);flex-shrink:0;margin:0 2px;}
.tb{height:24px;min-width:24px;padding:0 6px;border-radius:var(--r-xs);background:transparent;border:none;
  color:var(--fog);display:flex;align-items:center;gap:4px;font-size:.7rem;cursor:pointer;
  transition:all .18s;white-space:nowrap;flex-shrink:0;font-family:var(--font);}
.tb:hover{color:var(--sand);background:rgba(255,255,255,.06);}
.tb.on{color:var(--ember);}
.tb:disabled{opacity:.35;cursor:not-allowed;}
.tb-run{background:rgba(62,207,110,.1);border:1px solid rgba(62,207,110,.2);color:var(--green);padding:0 10px;flex-shrink:0;}
.tb-run:hover:not(:disabled){background:rgba(62,207,110,.18);border-color:rgba(62,207,110,.35);}

/* Monaco */
.monaco-wrap{flex:1;position:relative;overflow:hidden;}
#monacoEditor{width:100%;height:100%;}
.ed-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;background:var(--editor-bg);z-index:5;}
.spinner{width:24px;height:24px;border-radius:50%;border:2px solid var(--border2);
  border-top-color:var(--ember);animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-text{font-size:.76rem;color:var(--fog);}

/* Output panel */
.h-resizer{height:3px;background:var(--border);cursor:row-resize;flex-shrink:0;transition:background .2s;}
.h-resizer:hover,.h-resizer.active{background:var(--ember);}
.output-panel{height:200px;flex-shrink:0;background:var(--base);border-top:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;transition:height .25s var(--ease);}
.output-panel.collapsed{height:34px;}
.out-header{height:34px;flex-shrink:0;display:flex;align-items:stretch;border-bottom:1px solid var(--border);background:var(--surface);}
.out-tabs{display:flex;height:100%;}
.out-tab{display:flex;align-items:center;gap:5px;padding:0 13px;font-size:.71rem;font-weight:600;
  color:var(--fog);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;}
.out-tab.active{color:var(--ember);border-bottom-color:var(--ember);}
.out-tab:hover:not(.active){color:var(--sand2);}
.out-count{font-size:.58rem;padding:1px 5px;border-radius:8px;background:var(--card2);font-family:var(--mono);}
.out-header-right{margin-left:auto;display:flex;align-items:center;padding-right:8px;}
.out-toggle{width:24px;height:24px;border-radius:var(--r-xs);background:transparent;border:none;
  color:var(--fog);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:.7rem;}
.out-toggle:hover{color:var(--sand);}
.out-body{flex:1;overflow-y:auto;padding:10px 12px;font-size:.75rem;line-height:1.6;}
.out-body::-webkit-scrollbar{width:3px;}
.out-body::-webkit-scrollbar-thumb{background:var(--muted);border-radius:2px;}
#outputConsole{font-family:var(--mono);font-size:.71rem;color:var(--sand2);white-space:pre-wrap;}

/* STATUS BAR */
.statusbar{height:var(--statusbar-h);flex-shrink:0;background:var(--ember);display:flex;
  align-items:center;padding:0 12px;gap:16px;font-family:var(--mono);font-size:.63rem;font-weight:600;color:#0c0a08;}
.sb-item{display:flex;align-items:center;gap:4px;opacity:.8;cursor:default;}
.sb-item:hover{opacity:1;}
.sb-right{margin-left:auto;display:flex;align-items:center;gap:14px;}

/* ════ RESULT SHEET ════════════════════════════════════════ */
.r-overlay{position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(14px);
  display:flex;align-items:flex-end;justify-content:center;z-index:200;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);}
.r-overlay.open{opacity:1;pointer-events:all;}
.r-sheet{width:100%;max-width:780px;background:var(--card);border:1px solid var(--border2);
  border-radius:22px 22px 0 0;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .35s var(--ease);
  max-height:90vh;overflow:hidden;box-shadow:0 -24px 80px rgba(0,0,0,.7);}
.r-overlay.open .r-sheet{transform:translateY(0);}
.r-sheet.expanded{border-radius:16px;max-height:96vh;margin:12px;width:calc(100% - 24px);max-width:840px;}
.sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--muted);margin:11px auto 0;cursor:ns-resize;flex-shrink:0;}
.sheet-top{display:flex;align-items:center;gap:10px;padding:14px 18px 0;flex-shrink:0;}
.sheet-verdict{font-family:var(--head);font-size:1.08rem;font-weight:800;flex:1;}
.sheet-verdict.pass{color:var(--green);}
.sheet-verdict.fail{color:var(--red);}
.sheet-action{width:28px;height:28px;border-radius:50%;background:var(--card2);border:none;
  color:var(--fog);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:all .2s;}
.sheet-action:hover{background:var(--muted);color:var(--sand);}

/* Score row */
.score-row{display:flex;align-items:center;gap:16px;margin:14px 18px 0;
  padding:14px;background:var(--card2);border-radius:var(--r);border:1px solid var(--border);}
.score-ring{position:relative;width:76px;height:76px;flex-shrink:0;}
.score-ring svg{transform:rotate(-90deg);}
.score-ring circle.track{fill:none;stroke:var(--muted);stroke-width:6;}
.score-ring circle.fill{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dasharray .8s var(--ease);}
.score-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:1.25rem;font-weight:700;}
.score-num.pass{color:var(--green);}
.score-num.fail{color:var(--red);}
.score-info{flex:1;}
.score-label{font-family:var(--head);font-size:.92rem;font-weight:700;margin-bottom:3px;}
.score-breakdown{font-size:.69rem;color:var(--fog);font-family:var(--mono);margin-bottom:8px;}
.score-xp{display:inline-flex;align-items:center;gap:5px;background:var(--ember-dim);
  border:1px solid var(--ember-border);color:var(--ember);font-family:var(--mono);
  font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:20px;}

/* Sheet tabs */
.sheet-tabs{display:flex;padding:12px 18px 0;flex-shrink:0;border-bottom:1px solid var(--border);gap:0;}
.s-tab{padding:7px 14px;font-size:.72rem;font-weight:600;cursor:pointer;
  border-bottom:2px solid transparent;color:var(--fog);transition:all .2s;display:flex;align-items:center;gap:5px;}
.s-tab.active{color:var(--ember);border-bottom-color:var(--ember);}
.s-tab:hover:not(.active){color:var(--sand2);}
.s-tab i{font-size:.68rem;}

/* Sheet body */
.sheet-body{flex:1;overflow-y:auto;padding:18px;}
.sheet-body::-webkit-scrollbar{width:3px;}
.sheet-body::-webkit-scrollbar-thumb{background:var(--muted);border-radius:2px;}
.s-section{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--fog);font-family:var(--mono);margin-bottom:9px;display:flex;align-items:center;gap:6px;}
.s-section::after{content:'';flex:1;height:1px;background:var(--border);}

/* Score bars */
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.bar-lbl{font-size:.69rem;color:var(--fog);flex:0 0 110px;font-family:var(--mono);white-space:nowrap;}
.bar-track{flex:1;height:4px;background:var(--card2);border-radius:2px;overflow:hidden;}
.bar-fill{height:100%;border-radius:2px;transition:width .6s var(--ease);}
.bar-val{font-family:var(--mono);font-size:.66rem;font-weight:700;flex:0 0 30px;text-align:right;}

/* Test items */
.t-item{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;margin-bottom:5px;
  border-radius:var(--r-sm);border-left:3px solid;}
.t-item.pass{background:rgba(62,207,110,.055);border-left-color:var(--green);}
.t-item.fail{background:rgba(224,82,82,.055);border-left-color:var(--red);}
.t-icon{font-size:.85rem;flex-shrink:0;margin-top:1px;}
.t-info{flex:1;min-width:0;}
.t-name{font-size:.73rem;font-weight:600;margin-bottom:2px;}
.t-detail{font-family:var(--mono);font-size:.66rem;color:var(--fog);word-break:break-all;margin-bottom:2px;}
.t-detail.ok{color:var(--green);}
.t-detail.ko{color:var(--red);}

/* Feedback cards */
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
@media(max-width:460px){.fb-grid{grid-template-columns:1fr;}}
.fb-card{border-radius:var(--r-sm);padding:12px;border:1px solid;}
.fb-card.ok{background:rgba(62,207,110,.05);border-color:rgba(62,207,110,.18);}
.fb-card.warn{background:rgba(224,123,53,.05);border-color:rgba(224,123,53,.18);}
.fb-card-title{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-family:var(--mono);margin-bottom:8px;}
.fb-card.ok .fb-card-title{color:var(--green);}
.fb-card.warn .fb-card-title{color:var(--ember);}
.fb-item{font-size:.73rem;color:var(--sand2);margin-bottom:4px;line-height:1.5;display:flex;gap:5px;}
.fb-item::before{content:'•';opacity:.45;flex-shrink:0;}
.ai-summary{font-size:.77rem;line-height:1.7;color:var(--sand2);padding:12px;
  background:var(--card2);border-radius:var(--r-sm);border:1px solid var(--border);margin-bottom:14px;}
.ai-summary strong{color:var(--sand);}
.ai-summary code{background:var(--muted);padding:1px 5px;border-radius:3px;font-family:var(--mono);font-size:.8em;}
.console-out{background:var(--base);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px;font-family:var(--mono);font-size:.7rem;color:var(--sand2);white-space:pre-wrap;
  word-break:break-all;max-height:320px;overflow-y:auto;line-height:1.6;}
.console-out::-webkit-scrollbar{width:3px;}
.console-out::-webkit-scrollbar-thumb{background:var(--muted);}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:var(--modal-overlay);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;z-index:300;}
.modal{background:var(--card);border:1px solid var(--border2);border-radius:var(--r);
  padding:22px;width:min(90vw,390px);box-shadow:0 20px 60px rgba(0,0,0,.6);}
.modal-title{font-family:var(--head);font-size:.98rem;font-weight:700;margin-bottom:7px;}
.modal-sub{font-size:.78rem;color:var(--sand2);line-height:1.6;margin-bottom:18px;}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;}
.modal-meta{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px;margin-bottom:16px;display:flex;gap:12px;font-size:.73rem;font-family:var(--mono);color:var(--sand2);}
.modal-meta span{display:flex;align-items:center;gap:5px;}
.eval-ring{width:52px;height:52px;border-radius:50%;border:3px solid var(--border2);
  border-top-color:var(--ember);animation:spin .7s linear infinite;margin:0 auto 18px;}

/* ════════════════════════════════════════════════════════════
   MOBILE — refonte complète : 3 vues plein écran (Défi / Code / Résultat)
   pilotées en CSS pur via [data-mview] sur <body>, sans manipulation
   du DOM en JS. Chaque vue utilise 100% de l'écran disponible.
   ════════════════════════════════════════════════════════════ */

/* Amélioration lisibilité description — s'applique aussi au desktop */
.ch-title{line-height:1.35;}
.desc-text{font-size:.86rem;line-height:1.85;color:var(--sand2);}
.desc-text p{margin-bottom:.9em;}
.desc-text:last-child p:last-child{margin-bottom:0;}
.sec-label{margin-top:18px;margin-bottom:9px;}
.sec-label:first-child{margin-top:0;}
.code-block{font-size:.76rem;line-height:1.7;padding:12px 14px;}
.m-editor-accessory{display:none;} /* visible uniquement en mobile, voir media query plus bas */

.m-tabbar{display:none;height:58px;flex-shrink:0;background:var(--base);border-top:1px solid var(--border);
  position:fixed;bottom:0;left:0;right:0;z-index:150;padding-bottom:env(safe-area-inset-bottom,0);}
.m-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;font-size:.63rem;font-weight:700;color:var(--fog);cursor:pointer;transition:all .2s;
  border-top:2px solid transparent;position:relative;}
.m-tab i{font-size:1rem;}
.m-tab.active{color:var(--ember);border-top-color:var(--ember);}
.m-tab .dot{position:absolute;top:8px;right:calc(50% - 20px);width:7px;height:7px;border-radius:50%;background:var(--green);}

.m-pow-strip{display:none;align-items:center;justify-content:center;gap:6px;height:24px;flex-shrink:0;
  background:var(--ember-dim);border-top:1px solid var(--ember-border);font-family:var(--mono);
  font-size:.6rem;font-weight:700;color:var(--ember);letter-spacing:.4px;
  position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0));z-index:145;}
.m-pow-strip .dot{width:6px;height:6px;border-radius:50%;background:var(--fog);flex-shrink:0;}
.m-pow-strip.active .dot{background:var(--green);box-shadow:0 0 6px var(--green);}

@media(max-width:768px){
  .hide-mobile{display:none!important;}
  .icon-sidebar{display:none;}
  .resizer,.h-resizer{display:none;}

  html,body{overflow:hidden;height:100%;}
  .m-tabbar{display:flex;}
  .m-pow-strip{display:flex;}

  .topbar{padding:0 8px;gap:6px;height:50px;}
  .topbar-title{max-width:32vw;font-size:.82rem;}
  .diff-chip{display:none;}
  #topLang{display:none;}
  .topbar-right{gap:5px;}
  .topbar-right .btn span{display:none;}
  .btn{padding:9px 11px;}
  .timer,.xp-badge{padding:7px 10px;}

  /* ── Le workspace devient un simple conteneur plein écran : c'est
     l'attribut [data-mview] sur <body> qui décide quelle vue est visible. ── */
  .workspace{position:fixed;top:50px;left:0;right:0;
    bottom:calc(58px + 24px + env(safe-area-inset-bottom,0));
    padding:0;display:block;}

  /* Vue "Défi" (description/tests/historique) — plein écran par défaut */
  .panel-left{display:none;width:100%!important;max-width:100%;min-width:0;
    position:absolute;inset:0;border-right:none;}
  body[data-mview="desc"] .panel-left{display:flex;flex-direction:column;}
  .desc-tabs{height:44px;}
  .desc-tab{padding:0 16px;font-size:.78rem;flex:1;justify-content:center;}
  .desc-body{padding:18px 16px 32px;-webkit-overflow-scrolling:touch;}

  /* Vue "Code" (éditeur) — plein écran, cachée sauf si active */
  .panel-right{display:none;position:absolute;inset:0;}
  body[data-mview="editor"] .panel-right{display:flex;}

  .ed-header{height:42px;}
  .ed-tab{padding:0 12px;font-size:.76rem;}
  .ed-toolbar{height:40px;}
  .lang-sel{font-size:.74rem;padding:5px 9px;}
  .tb{height:30px;min-width:30px;font-size:.76rem;}
  .tb-run{padding:0 14px;font-weight:700;}

  .output-panel{height:180px;}
  .output-panel.collapsed{height:38px;}
  .out-header{height:38px;}
  .out-tab{padding:0 14px;font-size:.75rem;}

  /* ── Barre d'accessoires clavier : symboles difficiles à taper sur
     mobile, toujours visible juste au-dessus du clavier virtuel. ── */
  .m-editor-accessory{display:flex;align-items:center;gap:2px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;flex-shrink:0;height:42px;background:var(--surface);
    border-top:1px solid var(--border);padding:0 4px;scrollbar-width:none;}
  .m-editor-accessory::-webkit-scrollbar{display:none;}
  .m-editor-accessory button{flex-shrink:0;min-width:38px;height:34px;border-radius:var(--r-xs);
    background:var(--card);border:1px solid var(--border);color:var(--sand);
    font-family:var(--mono);font-size:.88rem;font-weight:600;display:flex;
    align-items:center;justify-content:center;padding:0 8px;}
  .m-editor-accessory button:active{background:var(--ember-dim);border-color:var(--ember-border);color:var(--ember);}
  .m-editor-accessory .sep{width:1px;height:20px;background:var(--border);flex-shrink:0;margin:0 4px;}

  /* Vue "Résultat" : le sheet devient la vue plutôt qu'une modale par-dessus */
  .score-row{gap:12px;padding:14px;margin:14px;}
  .score-ring{width:64px;height:64px;}
  .score-ring svg{width:64px;height:64px;}
  .score-num{font-size:1.1rem;}
  .score-label{font-size:.88rem;}
  .sheet-tabs{padding:10px 16px 0;overflow-x:auto;scrollbar-width:none;}
  .sheet-tabs::-webkit-scrollbar{display:none;}
  .s-tab{font-size:.76rem;padding:8px 13px;}
  .sheet-body{padding:16px;}
  .r-sheet{max-height:100vh;border-radius:0;}
  .r-overlay{align-items:stretch;}
  .bar-lbl{flex:0 0 90px;font-size:.66rem;}

  .modal{width:calc(100vw - 32px);padding:20px;}

  /* Statusbar masquée sur mobile : remplacée par le m-pow-strip */
  .statusbar{display:none;}
}
/* UTILS */
.skeleton{background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r);}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@keyframes slideUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.toast{position:fixed;bottom:66px;right:14px;padding:9px 14px;border-radius:var(--r-sm);
  font-size:.76rem;font-weight:600;z-index:600;pointer-events:none;
  animation:slideUp .22s ease;max-width:260px;line-height:1.4;}
.cheat-overlay{position:fixed;inset:0;background:var(--topbar-bg);backdrop-filter:blur(24px);
  z-index:500;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:40px;
  border:3px solid var(--red);animation:cheatPulse 1.1s ease infinite;}
@keyframes cheatPulse{0%,100%{border-color:rgba(224,82,82,.35);}50%{border-color:rgba(224,82,82,.9);}}
.cheat-count{font-family:var(--mono);font-size:.68rem;color:var(--fog);letter-spacing:.5px;margin-top:2px;}
.panel-right.fullscreen{position:fixed;inset:var(--topbar-h) 0 var(--statusbar-h);z-index:80;}

@keyframes snapPulse{0%{opacity:.4;transform:scale(.85);}100%{opacity:1;transform:scale(1.15);}}
.pow-snap-widget{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 0;gap:2px;width:100%;cursor:default;}
.pow-snap-dot{width:8px;height:8px;border-radius:50%;background:var(--fog);transition:background .3s;flex-shrink:0;}
.pow-snap-lbl{font-size:.42rem;font-family:var(--mono);color:var(--fog);letter-spacing:.5px;max-width:44px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.pow-snap-cnt{font-size:.5rem;font-family:var(--mono);color:var(--fog);font-weight:700;}