/* santePython — Dark theme, base partagée avec santeSQL */
/* Couleur d'accentuation : #f0a500 (orange Python) au lieu du vert SQL */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#0d1117;color:#e6edf3;font-family:'Segoe UI',system-ui,sans-serif;overflow:hidden}
#app{display:flex;flex-direction:column;height:100vh}

/* ── Topbar ───────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:10px;padding:0 16px;height:46px;border-bottom:1px solid #30363d;background:#161b22;flex-shrink:0}
.logo{font-size:16px;font-weight:700;letter-spacing:-.3px}.logo em{color:#f0a500;font-style:normal}
.lvl-tabs{display:flex;gap:3px;margin-left:auto}
.lvl-btn{font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;border:1px solid #30363d;background:transparent;color:#8b949e;cursor:pointer;transition:all .15s}
.lvl-btn:hover{color:#e6edf3;border-color:#8b949e}
.lvl-btn.active{background:#f0a500;color:#000;border-color:#f0a500}
.sidebar-toggle{font-size:16px;background:transparent;color:#8b949e;border:none;cursor:pointer;padding:3px 7px;border-radius:4px;line-height:1;transition:color .15s}
.sidebar-toggle:hover{color:#e6edf3}
.stats-btn{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;border:1px solid #30363d;background:transparent;color:#8b949e;cursor:pointer;transition:all .15s}
.stats-btn:hover{background:#21262d;color:#e6edf3}

/* ── Domain badge ─────────────────────────────── */
.domain-badge{position:relative;font-size:11px;font-weight:600;padding:3px 9px;border-radius:5px;background:#2a1f00;color:#f0a500;border:1px solid #4a3500;cursor:pointer;white-space:nowrap;user-select:none;transition:background .15s}
.domain-badge:hover{background:#3a2d00}
.domain-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:#161b22;border:1px solid #30363d;border-radius:8px;z-index:200;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.domain-menu.open{display:block}
.domain-item{display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;transition:background .12s;font-size:12px;color:#8b949e}
.domain-item:hover{background:#21262d;color:#e6edf3}
.domain-item.active{background:#1a1200;color:#f0a500;cursor:default}

/* ── Progress bar ─────────────────────────────── */
.progbar{height:2px;background:#21262d;flex-shrink:0}
.progfill{height:100%;background:#f0a500;transition:width .4s}

/* ── Layout ───────────────────────────────────── */
.main{display:flex;flex:1;min-height:0}

/* ── Sidebar ──────────────────────────────────── */
.sidebar{width:210px;min-width:210px;border-right:1px solid #30363d;background:#161b22;overflow-y:auto;flex-shrink:0;transition:width .2s}
.sidebar.hidden{width:0;min-width:0;overflow:hidden}
.sidebar::-webkit-scrollbar{width:3px}.sidebar::-webkit-scrollbar-thumb{background:#30363d;border-radius:2px}
.sb-item{display:flex;align-items:center;gap:7px;padding:7px 12px;font-size:12px;color:#8b949e;cursor:pointer;border-left:2px solid transparent;transition:all .12s}
.sb-item:hover{background:#21262d;color:#e6edf3}
.sb-item.active{color:#f0a500;border-left-color:#f0a500;background:#1a1200;font-weight:600}
.sb-item.done .sb-icon{color:#f0a500}
.sb-item.locked{opacity:.4;cursor:not-allowed}
.sb-icon{font-size:11px;flex-shrink:0;width:14px}
.sb-title{font-size:12px;line-height:1.3}

/* ── Content wrap ─────────────────────────────── */
.contentwrap{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.lhead{padding:11px 18px 9px;border-bottom:1px solid #30363d;background:#161b22;flex-shrink:0}
.ltitle{font-size:15px;font-weight:700;margin-bottom:2px}
.ldesc{font-size:12px;color:#8b949e;line-height:1.4}
.lbody{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:14px}
.lbody::-webkit-scrollbar{width:3px}.lbody::-webkit-scrollbar-thumb{background:#30363d;border-radius:2px}

/* ── Concept block ────────────────────────────── */
.concept{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:14px 16px;font-size:13px;line-height:1.7;color:#c9d1d9}
.concept code{background:#21262d;padding:1px 5px;border-radius:3px;font-family:'Courier New',monospace;font-size:12px;color:#f0a500}
.concept pre.code-block{background:#010409;border:1px solid #30363d;border-radius:6px;padding:12px;font-family:'Courier New',monospace;font-size:12.5px;line-height:1.7;overflow-x:auto;color:#c9d1d9;white-space:pre-wrap;margin:8px 0}
.concept strong{color:#e6edf3}

/* ── Exercise tabs ────────────────────────────── */
.ex-tabs{display:flex;gap:5px}
.ex-tab{font-size:11px;font-weight:600;padding:4px 12px;border-radius:6px;border:1px solid #30363d;background:transparent;color:#8b949e;cursor:pointer;transition:all .15s}
.ex-tab:hover{background:#21262d;color:#e6edf3}
.ex-tab.active{background:#f0a500;color:#000;border-color:#f0a500}
.ex-tab.done{border-color:#f0a500;color:#f0a500}
.ex-tab.active.done{background:#f0a500;color:#000}

/* ── Exercise task ────────────────────────────── */
.ex-task{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.5;position:relative}
.ex-task.done{border-color:#f0a500;background:#1a1200}
.check-badge{display:inline-block;background:#f0a500;color:#000;font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px;margin-right:6px}

/* ── Code editor ──────────────────────────────── */
.editor-wrap{background:#010409;border:1px solid #30363d;border-radius:8px;overflow:hidden}
.code-editor{width:100%;min-height:120px;max-height:300px;resize:vertical;font-family:'Courier New',monospace;font-size:13px;line-height:1.65;padding:12px 14px;background:#010409;color:#c9d1d9;border:none;outline:none;display:block;tab-size:4}
.code-editor::placeholder{color:#484f58;font-style:italic}
.editor-actions{display:flex;align-items:center;gap:6px;padding:7px 12px;background:#161b22;border-top:1px solid #30363d}
.run-btn{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 14px;background:#f0a500;color:#000;border:none;border-radius:6px;cursor:pointer;transition:background .15s}
.run-btn:hover{background:#ffb833}.run-btn:disabled{opacity:.5;cursor:not-allowed}
.hint-btn,.reset-btn{font-size:11px;font-weight:600;padding:5px 10px;background:transparent;color:#8b949e;border:1px solid #30363d;border-radius:6px;cursor:pointer;transition:all .15s}
.hint-btn:hover:not(:disabled){background:#3d2e0a;color:#f0c060;border-color:#5a420d}
.hint-btn:disabled{opacity:.35;cursor:not-allowed}
.reset-btn:hover{background:#21262d;color:#e6edf3}

/* ── Output ───────────────────────────────────── */
.output-wrap{border:1px solid #30363d;border-radius:8px;overflow:hidden}
.output-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#484f58;padding:7px 12px;background:#21262d;border-bottom:1px solid #30363d}
.output-body{font-family:'Courier New',monospace;font-size:12.5px;line-height:1.6;padding:11px 14px;white-space:pre-wrap;min-height:40px;color:#c9d1d9}
.output-body.error{background:#1a0505;color:#ff9492;border-top:2px solid #f85149}
.output-body.success{background:#0a1a0a;color:#a5d6a7;border-top:2px solid #f0a500}

/* ── Hint box ─────────────────────────────────── */
.hint-box{background:#3d2e0a;border:1px solid #5a420d;border-radius:6px;padding:10px 13px;font-size:12px;color:#f0c060;line-height:1.5}
.hint-box pre{font-family:'Courier New',monospace;margin-top:6px;white-space:pre-wrap}

/* ── Nav footer ───────────────────────────────── */
.navfoot{display:flex;align-items:center;gap:8px;padding:10px 18px;border-top:1px solid #30363d;background:#161b22;flex-shrink:0}
.nbtn{font-size:12px;font-weight:600;padding:6px 14px;border-radius:6px;border:1px solid #30363d;background:transparent;color:#8b949e;cursor:pointer;transition:all .15s}
.nbtn:hover:not(:disabled){background:#21262d;color:#e6edf3}
.nbtn:disabled{opacity:.3;cursor:not-allowed}
.nbtn.pri{background:#f0a500;color:#000;border-color:#f0a500}
.nbtn.pri:hover:not(:disabled){background:#ffb833}
.pinfo{font-size:11px;color:#484f58;margin-left:auto}

/* ── Schema panel ─────────────────────────────── */
.spanel{width:0;min-width:0;border-left:1px solid #30363d;background:#161b22;overflow:hidden;flex-shrink:0;display:flex;flex-direction:column;transition:width .25s}
.spanel.open{width:220px;min-width:220px}
.sph{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid #30363d;font-size:11px;font-weight:700;background:#21262d;flex-shrink:0}
.spc{font-size:11px;background:transparent;color:#8b949e;border:none;cursor:pointer}
.sbody{flex:1;overflow-y:auto;padding:10px 12px;font-family:'Courier New',monospace;font-size:11.5px;line-height:1.7;color:#c9d1d9}

/* ── Loading overlay ──────────────────────────── */
.loading-overlay{position:fixed;inset:0;background:#0d1117;display:flex;align-items:center;justify-content:center;z-index:9999}
.loading-box{text-align:center;padding:32px;background:#161b22;border:1px solid #30363d;border-radius:12px}
.loading-spinner{width:36px;height:36px;border:3px solid #30363d;border-top-color:#f0a500;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-title{font-size:15px;font-weight:700;margin-bottom:6px}
.loading-sub{font-size:12px;color:#8b949e;line-height:1.6}

/* ── Sortie image matplotlib ──────────────────── */
.output-img{display:block;max-width:100%;border-radius:6px;margin:8px 0;border:1px solid #30363d}
.output-iframe{display:block;width:100%;height:420px;border:1px solid #30363d;border-radius:6px;margin:8px 0;background:#fff}
.output-text{font-family:'Courier New',monospace;font-size:12.5px;line-height:1.6;white-space:pre-wrap;margin:4px 0;color:#c9d1d9}
/* Quand la sortie contient une image, on enlève le padding du pre par défaut */
.output-body:has(.output-img){padding:8px}
.success-badge{margin-top:10px;padding:6px 12px;background:#f0a500;color:#000;font-size:12px;font-weight:700;border-radius:5px;display:inline-block}

/* ── Cartes lexique ───────────────────────────── */
.lex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;align-content:start}
.lex-card{background:#21262d;border:1px solid #30363d;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:5px}
.lex-card-head{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.lex-kw{font-family:'Courier New',monospace;font-size:13px;font-weight:700;color:#f0a500;background:transparent}
.lex-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
.lex-desc{font-size:12px;color:#c9d1d9;line-height:1.45}
.lex-ex{font-family:'Courier New',monospace;font-size:11px;color:#8b949e;background:#010409;border:1px solid #30363d;border-radius:4px;padding:7px 9px;margin:0;white-space:pre-wrap;overflow-x:auto;line-height:1.6}
.lex-empty{grid-column:1/-1;text-align:center;color:#484f58;padding:32px;font-size:13px}

/* ── Modals (Lexique, Stats) ──────────────────── */
.lex-overlay,.stats-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);align-items:center;justify-content:center;z-index:500}
.lex-panel,.stats-panel{background:#161b22;border:1px solid #30363d;border-radius:12px;width:min(90vw,640px);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.lex-header,.stats-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #30363d;font-weight:700}
.lex-close,.stats-close{background:transparent;color:#8b949e;border:none;font-size:16px;cursor:pointer;padding:2px 6px}
.lex-search{padding:10px 16px;border-bottom:1px solid #30363d}
.lex-search input{width:100%;background:#21262d;border:1px solid #30363d;border-radius:6px;padding:7px 10px;color:#e6edf3;font-size:13px;outline:none}
.lex-grid,.stats-body{padding:14px 16px;overflow-y:auto;flex:1}
.stats-body{display:flex;flex-direction:column;gap:16px}

/* ── Radar de compétences ─────────────────────────────── */
.stats-radar-wrap{display:flex;justify-content:center;padding:12px 0 20px;overflow:visible}
.comp-domain{margin-bottom:14px}
.comp-domain:last-child{margin-bottom:0}
.comp-domain-title{font-size:12px;font-weight:700;color:#e6edf3;margin-bottom:7px}
.comp-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.comp-level-label{font-size:11px;color:#8b949e;width:72px;flex-shrink:0;text-align:right}
.comp-bar-track{flex:1;height:5px;background:#21262d;border-radius:3px;overflow:hidden}
.comp-bar-fill{height:100%;border-radius:3px;transition:width .5s ease}
.comp-bar-pct{font-size:10px;color:#484f58;width:32px;text-align:right;flex-shrink:0}

/* ── Responsive (mobile / écran < 760px) ──────── */
@media (max-width: 760px){
  .topbar{padding:0 8px;gap:6px;overflow-x:auto}
  .topbar::-webkit-scrollbar{display:none}
  .logo{font-size:14px;flex-shrink:0}
  .lvl-btn{padding:4px 7px;font-size:10px;flex-shrink:0}
  .stats-btn{padding:4px 7px;font-size:10px;flex-shrink:0;white-space:nowrap}
  .domain-badge{flex-shrink:0}

  /* Sidebar et panneau de référence deviennent des tiroirs superposés (overlay) au lieu de colonnes fixes */
  .sidebar{position:fixed;top:48px;bottom:0;left:0;width:78vw;max-width:280px;z-index:150;box-shadow:2px 0 16px rgba(0,0,0,.6)}
  .sidebar.hidden{width:0;min-width:0;box-shadow:none}

  .spanel{position:fixed;top:48px;bottom:0;right:0;width:0;min-width:0;z-index:150;box-shadow:none}
  .spanel.open{width:85vw;max-width:320px;min-width:0;box-shadow:-2px 0 16px rgba(0,0,0,.6)}

  .navfoot{padding:8px 10px;gap:6px}
  .nbtn{padding:5px 10px;font-size:11px}
  .pinfo{font-size:10px}
}