/* ============ Étincelle Savante — thème clair « papier & encre » ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Fond & encre */
  --paper:#f4f7fd;         /* fond papier */
  --paper2:#eef3fb;        /* fond alt */
  --grid:#e4ecf8;          /* lignes du quadrillage */
  --navy:#0e2350;          /* bleu nuit du logo (bandeaux) */
  --ink:#14295a;           /* texte principal */
  --text:#14295a;
  --muted:#5c6f92;         /* texte secondaire */
  /* Accents */
  --star:#e0930c;          /* or lisible (texte) */
  --gold1:#ffd873;--gold2:#f2b21a;--gold3:#e0930c; /* dégradé or */
  --blue:#2f7fe0;--green:#12a877;--red:#e5484d;--purple:#7c5cff;--orange:#ef7d18;
  /* Surfaces */
  --card-solid:#ffffff;
  --card-border:#e2e9f5;
  --card-shadow:0 8px 26px rgba(20,45,100,.08);
  --bubble-bg:#eef3fb;
  --lesson-bg:#ffffff;
  --step-bg:#f1f6ff;
  --sky:var(--paper);
}
html,body{min-height:100vh;font-family:'Nunito',sans-serif;color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  overflow-x:hidden}

/* Couche décor : symboles maths flottants très discrets (remplace les étoiles) */
.stars-layer{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.star{position:absolute;background:transparent;color:#c3d2ee;font-family:'Baloo 2',cursive;font-weight:800;
  border-radius:0;opacity:var(--min,.18);animation:floaty var(--dur,7s) ease-in-out infinite var(--del,0s)}
@keyframes floaty{0%,100%{transform:translateY(0);opacity:var(--min,.12)}50%{transform:translateY(-12px);opacity:.28}}

.page{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}

/* ===== En-tête : bandeau bleu nuit (logo blanc + or) ===== */
header.mb{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.5rem;
  background:linear-gradient(180deg,#12285a,#0b1a40);border-bottom:3px solid var(--gold2);flex-wrap:wrap;
  box-shadow:0 4px 20px rgba(14,35,80,.18)}
.logo{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:1.7rem;
  color:#ffffff;text-decoration:none;letter-spacing:.5px;line-height:1}
.logo span{color:var(--gold2);font-style:italic}
.logo img,img.logo-img{height:44px;width:auto;display:block}
.hdr-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
header.mb .pill{color:#dbe5f8;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
header.mb .btn-ghost{background:rgba(255,255,255,.08);color:#eef4ff;border-color:rgba(255,255,255,.38)}
header.mb .btn-ghost:hover{color:#0e2350;border-color:var(--gold2);background:var(--gold2)}
header.mb .score-pill{background:rgba(255,255,255,.12);border-color:rgba(242,207,122,.6);color:#ffe9b0}

.pill{font-size:.88rem;color:var(--muted);background:#fff;padding:5px 14px;border-radius:20px;border:1px solid var(--card-border)}
.score-pill{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#fff6df,#ffedbf);
  border:1.5px solid #f2cf7a;border-radius:40px;padding:6px 18px;font-family:'Baloo 2',cursive;font-weight:800;
  font-size:1.05rem;color:#a86a00}
.btn-ghost{background:#fff;color:var(--navy);border:1px solid var(--card-border);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(--blue);border-color:#b9d2f5;background:#f3f8ff}

/* ===== Cartes / panneaux ===== */
.panel{background:var(--card-solid);border:1px solid var(--card-border);border-radius:22px;padding:1.5rem;
  position:relative;overflow:hidden;box-shadow:var(--card-shadow)}
.panel-lesson{background:var(--lesson-bg)}
.step-box{background:var(--step-bg);border:1.5px solid #cfe0fb;border-radius:16px;padding:1.1rem 1.2rem}
.h-baloo{font-family:'Baloo 2',cursive;font-weight:800}

.concept-box{background:#eef4ff;border:1px solid #d3e3fb;border-radius:12px;padding:.9rem 1rem;
  font-size:.9rem;line-height:1.65;color:#3f5378}
.concept-box strong{color:var(--blue)}
.important-note{background:#fff8e8;border-left:4px solid var(--gold2);border-radius:0 10px 10px 0;
  padding:.8rem 1rem;font-size:.88rem;line-height:1.8;color:#5a5230}
.important-note strong{color:#b5790a}

.mb-input{background:#fff;border:1.6px solid #d5deee;border-radius:12px;padding:.7rem 1rem;
  font-family:'Nunito',sans-serif;font-size:1rem;font-weight:700;color:var(--ink);outline:none;
  transition:border-color .2s,box-shadow .2s;text-align:center}
.mb-input::placeholder{color:#a9b6cf;font-weight:400}
.mb-input:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(242,178,26,.18)}

.btn-main{background:linear-gradient(135deg,#19c088,#12a877);color:#04321f;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 4px 14px rgba(18,168,119,.28);white-space:nowrap}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(18,168,119,.36)}
.btn-main:active{transform:scale(.97)}
.btn-purple{background:linear-gradient(135deg,#8f74ff,#7c5cff);color:#fff;box-shadow:0 4px 14px rgba(124,92,255,.32)}
.btn-gold{background:linear-gradient(135deg,var(--gold1),var(--gold2));color:#3a2600;
  box-shadow:0 5px 20px rgba(242,178,26,.4)}

.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:#e6ecf7;overflow:hidden}
.progress-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--blue),var(--gold2))}
.progress-label{font-size:.8rem;color:var(--muted);white-space:nowrap}

.success-overlay{display:none;position:absolute;inset:0;z-index:20;background:rgba(244,247,253,.97);
  border-radius:22px;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;text-align:center}
.success-overlay.show{display:flex}

.aide-zone{background:#f5f8fd;border:2px solid #e0e8f4;border-radius:12px;padding:.85rem 1.1rem;min-height:48px;
  font-size:.95rem;line-height:1.6;color:#4a5c7e;margin-bottom:.8rem}
.aide-zone.on{border-color:#f2cf7a;background:#fff8e8}

.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:#fff;border:1.6px solid #dce4f1;
  border-radius:12px;padding:.75rem 1rem;color:var(--ink);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:#f1f7ff}
.qcm-opt.good{border-color:var(--green);background:#e7faf3}
.qcm-opt.bad{border-color:var(--red);background:#fdeded}
.stars-earned{font-size:2.2rem;letter-spacing:6px}

@media(max-width:760px){.two-col{grid-template-columns:1fr!important}}

/* ============ Responsive ============ */
img,svg,table{max-width:100%}
input,select,button,textarea{font-size:max(16px,1em)}
.btn-main,.btn-ghost,.qcm-opt,.act-btn{min-height:44px}
.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:.6rem .9rem;gap:.5rem}
  .logo{font-size:1.35rem}.logo img,img.logo-img{height:36px}
  .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:16px}
  .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}
}