/* ============ MathBot — styles communs ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --sky:#0f1f3d;--star:#ffe566;--green:#3de8a0;--purple:#a78bfa;--red:#ff6b6b;
  --blue:#6ec6f5;--orange:#ff9f43;--card-border:rgba(255,255,255,.13);
  --card-solid:#162c54;--text:#f0f4ff;--muted:#7a99c2;--bubble-bg:#1e3a6e;
  --lesson-bg:#0d1e3a;--step-bg:#0f2245;
}
html,body{min-height:100vh;font-family:'Nunito',sans-serif;background:var(--sky);color:var(--text);overflow-x:hidden}
.stars-layer{position:fixed;inset:0;pointer-events:none;z-index:0}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--dur,3s) ease-in-out infinite var(--del,0s)}
@keyframes twinkle{0%,100%{opacity:var(--min,.2)}50%{opacity:.9}}
.page{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}
header.mb{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.5rem;
  background:rgba(10,20,45,.75);backdrop-filter:blur(8px);border-bottom:1px solid var(--card-border);flex-wrap:wrap}
.logo{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.5rem;color:var(--star);text-decoration:none}
.logo span{color:var(--green)}
.hdr-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{font-size:.88rem;color:var(--muted);background:rgba(255,255,255,.06);padding:5px 14px;border-radius:20px;border:1px solid var(--card-border)}
.score-pill{display:flex;align-items:center;gap:8px;background:rgba(255,229,102,.12);border:1.5px solid rgba(255,229,102,.3);
  border-radius:40px;padding:6px 18px;font-family:'Baloo 2',cursive;font-weight:800;font-size:1.05rem;color:var(--star)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:6px 14px;font-size:.8rem;cursor:pointer;font-family:'Nunito',sans-serif;text-decoration:none;transition:.2s}
.btn-ghost:hover{color:var(--red);border-color:rgba(255,107,107,.3)}
.panel{background:var(--card-solid);border:1px solid var(--card-border);border-radius:24px;padding:1.5rem;position:relative;overflow:hidden}
.panel-lesson{background:var(--lesson-bg)}
.step-box{background:var(--step-bg);border:1.5px solid rgba(110,198,245,.3);border-radius:16px;padding:1.1rem 1.2rem}
.h-baloo{font-family:'Baloo 2',cursive;font-weight:800}
.concept-box{background:rgba(110,198,245,.07);border:1px solid rgba(110,198,245,.2);border-radius:12px;padding:.9rem 1rem;font-size:.86rem;line-height:1.65;color:var(--muted)}
.concept-box strong{color:var(--blue)}
.important-note{background:rgba(255,229,102,.07);border-left:3px solid rgba(255,229,102,.5);border-radius:0 10px 10px 0;
  padding:.8rem 1rem;font-size:.85rem;line-height:1.85;color:var(--muted)}
.important-note strong{color:var(--star)}
.mb-input{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.15);border-radius:12px;padding:.7rem 1rem;
  font-family:'Nunito',sans-serif;font-size:1rem;font-weight:700;color:var(--text);outline:none;transition:border-color .2s;text-align:center}
.mb-input::placeholder{color:rgba(255,255,255,.2);font-weight:400}
.mb-input:focus{border-color:var(--star)}
.btn-main{background:var(--green);color:#001a0d;border:none;border-radius:12px;padding:.75rem 1.4rem;
  font-family:'Baloo 2',cursive;font-weight:800;font-size:1rem;cursor:pointer;transition:transform .15s,box-shadow .15s;
  box-shadow:0 3px 12px rgba(61,232,160,.3);white-space:nowrap}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(61,232,160,.4)}
.btn-main:active{transform:scale(.97)}
.btn-purple{background:var(--purple);color:#fff;box-shadow:0 3px 12px rgba(167,139,250,.35)}
.btn-gold{background:linear-gradient(135deg,#ffe566,#ff9f43);color:#1a1a00;box-shadow:0 4px 20px rgba(255,229,102,.35)}
.feedback-zone{min-height:34px;text-align:center;font-family:'Baloo 2',cursive;font-weight:800;font-size:1rem;
  display:flex;align-items:center;justify-content:center}
.feedback-zone.ok{color:var(--green)}.feedback-zone.err{color:var(--red)}.feedback-zone.warn{color:var(--star)}
.progress-row{display:flex;align-items:center;gap:10px}
.progress-bar{flex:1;height:10px;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden}
.progress-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--green),#ffe566)}
.progress-label{font-size:.8rem;color:var(--muted);white-space:nowrap}
.success-overlay{display:none;position:absolute;inset:0;z-index:20;background:rgba(10,20,45,.97);border-radius:24px;
  flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;text-align:center}
.success-overlay.show{display:flex}
.aide-zone{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.09);border-radius:12px;
  padding:.85rem 1.1rem;min-height:48px;font-size:.95rem;line-height:1.6;color:var(--muted);margin-bottom:.8rem}
.aide-zone.on{border-color:rgba(255,229,102,.4);background:rgba(255,229,102,.05)}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font-family:'Baloo 2',cursive;font-weight:800;margin:0 4px}
.fr .n{border-bottom:2.5px solid currentColor;padding:0 8px;min-width:26px;text-align:center}
.fr .d{padding:0 8px;min-width:26px;text-align:center}
.qcm-opt{display:block;width:100%;text-align:left;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.13);
  border-radius:12px;padding:.75rem 1rem;color:var(--text);font-family:'Nunito',sans-serif;font-weight:700;font-size:.95rem;
  cursor:pointer;margin-bottom:8px;transition:.15s}
.qcm-opt:hover{border-color:var(--blue);background:rgba(110,198,245,.1)}
.qcm-opt.good{border-color:var(--green);background:rgba(61,232,160,.15)}
.qcm-opt.bad{border-color:var(--red);background:rgba(255,107,107,.12)}
.stars-earned{font-size:2.2rem;letter-spacing:6px}
@media(max-width:760px){.two-col{grid-template-columns:1fr!important}}

/* ============ Responsive mobile / tablette / PC ============ */
img,svg,table{max-width:100%}
input,select,button,textarea{font-size:max(16px,1em)} /* évite le zoom auto iOS */
.btn-main,.btn-ghost,.qcm-opt,.act-btn{min-height:44px} /* cibles tactiles */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:900px){
  .wrap{padding:1rem !important}
}
@media(max-width:760px){
  .two-col{grid-template-columns:1fr!important}
  header.mb{padding:.7rem .9rem;gap:.5rem}
  .logo{font-size:1.2rem}
  .hdr-right{gap:6px}
  .pill{font-size:.72rem;padding:4px 10px}
  .score-pill{font-size:.9rem;padding:5px 12px}
  .btn-ghost{padding:6px 10px;font-size:.72rem}
  .panel{padding:1rem;border-radius:18px}
  .exo-enonce{font-size:1.02rem !important}
  .inputs-row{gap:8px !important}
  .input-group .mb-input{width:110px !important}
  .input-group .mb-input.wide{width:100% !important;max-width:260px}
  .chapters{grid-template-columns:1fr !important}
  .stats-row{grid-template-columns:repeat(2,1fr) !important}
  .sum-row{grid-template-columns:repeat(2,1fr) !important}
  .prio-banner{padding:.9rem !important}
  .mini-bar .d{font-size:.5rem}
  table.adm{font-size:.75rem}
  table.adm th,table.adm td{padding:.4rem .35rem}
  .exam-banner{flex-direction:column;text-align:center;gap:8px !important}
  .lvl-line .stt{margin-left:0;width:100%;padding-left:28px}
  .j-row .j-time,.j-row .muted[style*="margin-left"]{margin-left:0 !important;width:100%}
}
@media(max-width:420px){
  .stats-row,.sum-row{grid-template-columns:1fr 1fr !important}
  .stars-earned{font-size:1.7rem}
  .btn-main{width:100%}
  .progress-label{display:none}
}