@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  --bg:      #f0f5f8;
  --surface: #ffffff;
  --surface2:#e8f0f6;
  --cyan:    #0082a0;
  --cyan2:   #005070;
  --green:   #00865a;
  --accent:  #c05018;
  --red:     #cc3010;
  --text:    #1a2e3a;
  --muted:   #1e4a62;
  --border:  rgba(0,130,160,0.15);
  --sidebar: 260px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);}

.portal-home-link{
  position:fixed;
  top:10px;
  right:12px;
  z-index:120;
  text-decoration:none;
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 11px;
  box-shadow:0 2px 10px rgba(0,80,120,0.08);
}
.portal-home-link:hover{color:var(--cyan);border-color:rgba(0,130,160,0.35);}

/* ── LEVEL PICKER ── */
#level-picker{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:2rem;overflow-y:auto;overflow-x:hidden;}
.lp-title{font-family:'Syne',sans-serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:800;text-align:center;color:var(--text);}
.lp-title span{color:var(--cyan);}
.lp-subtitle{color:var(--muted);font-size:0.95rem;text-align:center;}
.lp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:560px;width:100%;}
.lp-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.8rem 1.5rem;cursor:pointer;transition:all 0.25s;text-align:center;position:relative;box-shadow:0 2px 12px rgba(0,80,120,0.07);}
.lp-card.available:hover{background:#f0f8fc;border-color:var(--cyan);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,130,160,0.12);}
.lp-card.locked{opacity:0.45;cursor:not-allowed;}
.lp-card-icon{font-size:2.2rem;margin-bottom:0.7rem;}
.lp-card-title{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;color:var(--text);}
.lp-card-sub{font-size:0.75rem;color:var(--muted);margin-top:0.3rem;}
.lp-badge{position:absolute;top:10px;right:10px;font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 8px;border-radius:10px;}
.lp-badge.new{background:rgba(0,134,90,0.1);color:var(--green);border:1px solid rgba(0,134,90,0.25);}
.lp-badge.soon{background:rgba(74,122,144,0.1);color:var(--muted);border:1px solid rgba(74,122,144,0.2);}

/* ── LAYOUT ── */
#app{display:none;height:100%;flex-direction:row;}
#app.visible{display:flex;}

/* ── SIDEBAR ── */
#sidebar{width:var(--sidebar);min-width:var(--sidebar);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;box-shadow:2px 0 8px rgba(0,80,120,0.06);}
.sb-header{padding:1.2rem 1rem 0.8rem;border-bottom:1px solid var(--border);}
.sb-logo{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;color:var(--text);}
.sb-logo span{color:var(--cyan);}
.sb-level{font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:2px;}
.sb-progress-wrap{padding:0.8rem 1rem;border-bottom:1px solid var(--border);}
.sb-progress-lbl{display:flex;justify-content:space-between;font-size:0.68rem;color:var(--muted);margin-bottom:5px;}
.sb-progress-bar{height:4px;background:rgba(0,130,160,0.12);border-radius:2px;overflow:hidden;}
.sb-progress-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));border-radius:2px;transition:width 0.5s ease;}
.sb-nav{flex:1;overflow-y:auto;padding:0.5rem 0;}
.sb-nav::-webkit-scrollbar{width:4px;}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(0,130,160,0.15);border-radius:2px;}
.sb-chapter{display:flex;align-items:center;gap:0.6rem;padding:0.65rem 1rem;cursor:pointer;transition:background 0.15s;border-left:2px solid transparent;font-size:0.83rem;line-height:1.3;color:var(--text);}
.sb-chapter:hover{background:rgba(0,130,160,0.05);}
.sb-chapter.active{background:rgba(0,130,160,0.08);border-left-color:var(--cyan);color:var(--cyan);}
.sb-chapter.done .sb-ch-num{background:var(--green);color:#fff;}
.sb-ch-num{width:22px;height:22px;border-radius:50%;background:rgba(0,130,160,0.1);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;flex-shrink:0;transition:all 0.2s;color:var(--muted);}
.sb-chapter.active .sb-ch-num{background:var(--cyan);color:#fff;}
.sb-ch-label{flex:1;}
.sb-quiz-btn{margin:0.8rem;padding:10px;background:linear-gradient(135deg,var(--cyan2),var(--cyan));border:none;border-radius:10px;color:#fff;font-family:'Syne',sans-serif;font-size:0.78rem;font-weight:700;letter-spacing:0.06em;cursor:pointer;transition:opacity 0.2s;text-transform:uppercase;}
.sb-quiz-btn:hover{opacity:0.85;}
.sb-back{margin:0 0.8rem 0.8rem;padding:8px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:0.75rem;cursor:pointer;transition:all 0.2s;}
.sb-back:hover{color:var(--text);border-color:rgba(0,130,160,0.4);}

/* ── CONTENT ── */
#content{flex:1;overflow-y:auto;overflow-x:hidden;padding:1.5rem 2rem;scroll-behavior:smooth;background:var(--bg);}
#content::-webkit-scrollbar{width:5px;}
#content::-webkit-scrollbar-thumb{background:rgba(0,130,160,0.15);border-radius:3px;}
#chapters-wrap{max-width:800px;margin:0 auto;}

.ch-header{margin-bottom:1.5rem;position:sticky;top:-1px;z-index:10;background:var(--bg);padding:0.8rem 0 0.6rem;border-bottom:1px solid var(--border);margin-left:-0.5rem;margin-right:-0.5rem;padding-left:0.5rem;padding-right:0.5rem;}
.ch-eyebrow{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:0.3rem;opacity:0.85;}
/* Titre chapitre : éviter l’effet « étiré » (Syne ultra-bold + tracking implicite) */
.ch-title{font-family:'Syne',sans-serif;font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:700;line-height:1.22;margin-bottom:0.45rem;color:var(--text);letter-spacing:-0.02em;font-stretch:100%;font-synthesis:none;}
.ch-title span{color:var(--cyan);}
.ch-intro{font-size:0.88rem;color:#1a3040;line-height:1.7;max-width:680px;}

.ch-section{margin-bottom:1.8rem;}
/* Sous-titres de section : plus lisibles que le corps (0.88rem) */
.ch-section-title{font-family:'Syne',sans-serif;font-size:clamp(0.82rem,1.35vw,0.95rem);font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan2);margin-bottom:0.75rem;padding-bottom:0.4rem;border-bottom:1px solid var(--border);line-height:1.35;}
.ch-text{font-size:0.88rem;line-height:1.8;color:#1a2e3a;max-width:700px;}
.ch-text strong{color:var(--text);font-weight:500;}
.ch-text em{color:var(--accent);font-style:normal;}

.info-box{background:rgba(0,130,160,0.06);border:1px solid rgba(0,130,160,0.18);border-left:3px solid var(--cyan);border-radius:0 10px 10px 0;padding:1rem 1.2rem;margin:1rem 0;font-size:0.88rem;line-height:1.7;color:#1a2e3a;}
.warn-box{background:rgba(192,80,24,0.06);border:1px solid rgba(192,80,24,0.2);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:1rem 1.2rem;margin:1rem 0;font-size:0.88rem;line-height:1.7;color:#4a2a10;}
.danger-box{background:rgba(204,48,16,0.06);border:1px solid rgba(204,48,16,0.2);border-left:3px solid var(--red);border-radius:0 10px 10px 0;padding:1rem 1.2rem;margin:1rem 0;font-size:0.88rem;line-height:1.7;color:#5a1a0a;}

.formula-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.25rem 1.35rem;margin:1rem 0;text-align:left;font-family:'Syne',sans-serif;font-size:1.05rem;color:var(--cyan);box-shadow:0 2px 8px rgba(0,80,120,0.06);}
.formula-box small{display:block;font-family:'DM Sans',sans-serif;font-size:0.72rem;color:var(--muted);margin-top:4px;font-style:italic;}
/* Blocs sans liste : une seule ligne centrée (ex. PMU, formules courtes) */
.formula-box:not(:has(ul)){text-align:center;}
/* Bloc avec liste : titre + formule centrés, définitions alignées à gauche sous le bloc */
.formula-box:has(ul) h4{margin:0 0 0.5rem;font-size:0.9rem;font-weight:700;text-align:center;letter-spacing:0.04em;color:var(--cyan);}
.formula-box:has(ul) > p{text-align:center;margin:0.4rem 0 0.85rem;}
.formula-box:has(ul) > p strong{font-weight:700;}
.formula-box:has(ul) ul{max-width:36rem;margin:0.65rem auto 1rem;padding-left:1.35rem;text-align:left;list-style-position:outside;}
.formula-box:has(ul) li{margin-bottom:0.45rem;padding-left:0.2em;line-height:1.6;text-align:left;font-family:'DM Sans',sans-serif;font-size:0.89rem;color:#1e3a4a;}
.formula-box:has(ul) li strong{color:var(--cyan2);}
.formula-box:has(ul) > p:last-of-type{margin-top:0.85rem;margin-bottom:0;text-align:center;font-family:'DM Sans',sans-serif;font-size:0.84rem;color:#1a3040;}
.formula-box:has(ul) > p:last-of-type em{font-style:italic;color:var(--cyan);}

.concepts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.8rem;margin:1rem 0;}
.concept-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem;box-shadow:0 1px 6px rgba(0,80,120,0.05);}
.concept-card-icon{font-size:1.4rem;margin-bottom:0.5rem;}
.concept-card-title{font-family:'Syne',sans-serif;font-size:0.82rem;font-weight:700;color:var(--text);margin-bottom:0.3rem;}
.concept-card-text{font-size:0.78rem;color:#1a3040;line-height:1.55;}

.depth-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:0.82rem;}
.depth-table th{background:rgba(0,130,160,0.08);padding:8px 12px;text-align:left;font-family:'Syne',sans-serif;font-weight:700;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan);border-bottom:1px solid var(--border);}
.depth-table td{padding:7px 12px;border-bottom:1px solid rgba(0,130,160,0.07);color:#1a2e3a;}
.depth-table tr:last-child td{border-bottom:none;}
.depth-table tr:hover td{background:rgba(0,130,160,0.04);}

.video-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:1rem 0;max-width:480px;box-shadow:0 2px 8px rgba(0,80,120,0.06);}
.video-thumb{width:100%;aspect-ratio:16/9;background:#d8e8f0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;}
.video-play{width:52px;height:52px;background:rgba(255,0,0,0.8);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.video-play::after{content:'';border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:4px;}
.video-card-info{padding:0.8rem 1rem;}
.video-card-title{font-size:0.85rem;font-weight:500;color:var(--text);}
.video-card-sub{font-size:0.72rem;color:var(--muted);margin-top:2px;}

.doc-image{width:100%;max-width:420px;border-radius:10px;border:1px solid var(--border);margin:0.8rem 0;cursor:pointer;transition:transform 0.2s;box-shadow:0 2px 8px rgba(0,80,120,0.07);}
.doc-image:hover{transform:scale(1.02);}
.mdk-zoom-wrap{
  position:relative;
  display:inline-block;
  max-width:100%;
  vertical-align:middle;
}
.mdk-zoom-btn{
  position:absolute;
  right:8px;
  bottom:8px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,130,160,0.38);
  background:rgba(255,255,255,0.92);
  color:var(--cyan2);
  box-shadow:0 4px 12px rgba(0,40,60,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:0.95rem;
  line-height:1;
  z-index:4;
}
.mdk-zoom-btn:hover{background:#fff;transform:scale(1.04);}

.accordion{margin:0.6rem 0;}
.accordion-header{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0.8rem 1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:0.88rem;font-weight:500;transition:background 0.2s;color:var(--text);}
.accordion-header:hover{background:#e8f2f8;}
.accordion-header.open{border-radius:8px 8px 0 0;border-bottom-color:transparent;background:#e8f2f8;}
.accordion-body{display:none;background:rgba(0,130,160,0.03);border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;padding:1rem;font-size:0.85rem;line-height:1.75;color:#1a2e3a;}
.accordion-body.open{display:block;}
.accordion-arrow{transition:transform 0.2s;color:var(--muted);}
.accordion-header.open .accordion-arrow{transform:rotate(180deg);}

.ch-nav{display:flex;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border);}
.ch-nav-btn{padding:10px 20px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.85rem;font-weight:500;cursor:pointer;transition:all 0.2s;}
.ch-nav-prev{background:transparent;border:1px solid var(--border);color:var(--muted);}
.ch-nav-prev:hover{color:var(--text);border-color:rgba(0,130,160,0.4);}
.ch-nav-next{background:var(--cyan2);border:none;color:#fff;padding:10px 24px;}
.ch-nav-next:hover{background:var(--cyan);}
.ch-done-check{display:flex;align-items:center;gap:0.5rem;font-size:0.78rem;color:var(--green);}

/* ── QUIZ ── */
#quiz-panel{display:none;flex-direction:column;gap:1.5rem;}
#quiz-panel.visible{display:flex;}
.quiz-header{margin-bottom:0.5rem;}
.quiz-q{font-size:1rem;font-weight:500;line-height:1.6;margin-bottom:1rem;color:var(--text);}
.quiz-q-num{font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--cyan);margin-bottom:0.5rem;}
.quiz-options{display:flex;flex-direction:column;gap:0.6rem;}
.quiz-opt{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0.8rem 1rem;cursor:pointer;font-size:0.88rem;transition:all 0.2s;display:flex;align-items:center;gap:0.8rem;color:var(--text);box-shadow:0 1px 4px rgba(0,80,120,0.04);}
.quiz-opt:hover:not(.selected):not(.correct):not(.wrong){background:#e8f4f8;border-color:rgba(0,130,160,0.3);}
.quiz-opt.selected{border-color:var(--cyan);background:rgba(0,130,160,0.07);}
.quiz-opt.correct{border-color:var(--green);background:rgba(0,134,90,0.08);color:var(--green);}
.quiz-opt.wrong{border-color:var(--red);background:rgba(204,48,16,0.06);color:var(--red);opacity:0.8;}
.quiz-letter{width:26px;height:26px;border-radius:50%;background:rgba(0,130,160,0.1);display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;flex-shrink:0;transition:all 0.2s;color:var(--cyan);}
.quiz-opt.correct .quiz-letter{background:var(--green);color:#fff;}
.quiz-opt.wrong   .quiz-letter{background:var(--red);color:#fff;}
.quiz-expl{background:rgba(0,134,90,0.06);border:1px solid rgba(0,134,90,0.18);border-radius:8px;padding:0.8rem 1rem;font-size:0.82rem;line-height:1.6;color:#1a3a2a;display:none;margin-top:0.5rem;}
.quiz-expl.wrong-expl{background:rgba(204,48,16,0.05);border-color:rgba(204,48,16,0.15);color:#4a1a0a;}
.quiz-expl.visible{display:block;}
.quiz-progress{display:flex;gap:0.3rem;flex-wrap:wrap;margin-bottom:0.5rem;}
.quiz-dot{width:8px;height:8px;border-radius:50%;background:rgba(0,130,160,0.15);transition:all 0.3s;}
.quiz-dot.done-ok{background:var(--green);}
.quiz-dot.done-ko{background:var(--red);}
.quiz-dot.current{background:var(--cyan);transform:scale(1.4);}
.quiz-next-btn{padding:10px 24px;background:var(--cyan2);border:none;border-radius:8px;color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:0.82rem;cursor:pointer;align-self:flex-start;display:none;margin-top:0.5rem;}
.quiz-next-btn.visible{display:block;}
.quiz-score-panel{text-align:center;padding:2rem 0;}
.quiz-score-num{font-family:'Syne',sans-serif;font-size:4rem;font-weight:800;color:var(--cyan);}
.quiz-score-label{font-size:1rem;color:#1a3040;margin-top:0.5rem;}
.quiz-score-msg{margin-top:1rem;font-size:0.9rem;line-height:1.7;color:#1a3040;}
.quiz-restart-btn{margin-top:1.5rem;padding:12px 28px;background:linear-gradient(135deg,var(--cyan2),var(--cyan));border:none;border-radius:10px;color:#fff;font-family:'Syne',sans-serif;font-weight:700;cursor:pointer;font-size:0.88rem;}
.battle-btn{margin:0 0.8rem 0.8rem;padding:10px;background:linear-gradient(135deg,#4f46e5,#7c3aed);border:none;border-radius:10px;color:#fff;font-family:'Syne',sans-serif;font-size:0.78rem;font-weight:700;letter-spacing:0.06em;cursor:pointer;transition:opacity 0.2s;text-transform:uppercase;}
.battle-btn:hover{opacity:0.9;}
.battle-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;box-shadow:0 2px 10px rgba(0,80,120,0.06);}
.battle-row{display:flex;gap:0.6rem;flex-wrap:wrap;align-items:center;}
.battle-input{flex:1;min-width:120px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);font-size:0.88rem;}
.battle-action{padding:9px 14px;border:none;border-radius:9px;background:var(--cyan2);color:#fff;font-family:'Syne',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;}
.battle-action.alt{background:#4f46e5;}
.battle-code{font-family:'Syne',sans-serif;font-size:2rem;letter-spacing:0.2em;color:var(--cyan);margin:0.3rem 0 0.15rem;}
.battle-note{font-size:0.8rem;color:var(--muted);line-height:1.5;}
.battle-scoreboard{display:flex;justify-content:space-between;gap:0.6rem;margin-bottom:0.8rem;}
.battle-player{flex:1;border:1px solid var(--border);border-radius:10px;padding:0.55rem 0.65rem;background:var(--bg);}
.battle-player .name{font-size:0.75rem;color:var(--muted);}
.battle-player .score{font-size:1.1rem;font-weight:700;color:var(--text);}
.battle-player.me{border-color:rgba(0,130,160,0.38);}
.battle-timer{height:8px;background:rgba(0,130,160,0.13);border-radius:99px;overflow:hidden;margin:0.65rem 0;}
.battle-timer-fill{height:100%;background:linear-gradient(90deg,#06b6d4,#6366f1);width:100%;transition:width .25s linear;}
.battle-status{font-size:0.82rem;color:var(--muted);}
.battle-question-figure{margin:0.25rem 0 0.65rem;}
.battle-question-image{display:block;max-width:min(100%,480px);max-height:260px;border:1px solid var(--border);border-radius:10px;object-fit:cover;background:var(--surface);}
.battle-option-content{display:flex;align-items:center;gap:0.7rem;min-width:0;}
.battle-option-content.with-image > div:last-child{line-height:1.35;}
.battle-option-image{width:74px;height:50px;border-radius:8px;border:1px solid var(--border);object-fit:cover;background:var(--surface2);flex-shrink:0;}

/* Video embed responsive */
.video-wrap{position:relative;width:100%;max-width:480px;padding-bottom:min(270px,56.25%);margin:0.8rem 0;border-radius:10px;overflow:hidden;background:#000;}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:10px;}

@media(max-width:900px){
  #content{padding:1.2rem 1.5rem;}
  .ch-header{position:relative;top:auto;background:transparent;border-bottom:none;margin:0 0 1rem;padding:0;}
  .pp-fig{max-width:100%;}
  .video-wrap{max-width:100%;}
}
@media(max-width:700px){
  #sidebar{display:none;}
  #content{padding:1rem;}
  .ch-title{font-size:1.2rem;}
  .concepts-grid{grid-template-columns:1fr;}
  .assoc-columns{grid-template-columns:1fr;}
  .seq-items{flex-direction:column;}
}

/* ── PICKER TRACKS ── */
.picker-track-bar{display:flex;gap:0.6rem;margin-bottom:2rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:5px;}
.picker-track-btn{flex:1;padding:10px 20px;border:none;border-radius:10px;font-family:'Syne',sans-serif;font-size:0.9rem;font-weight:700;cursor:pointer;transition:all 0.25s;color:var(--muted);background:transparent;letter-spacing:0.04em;}
.picker-track-btn.active{background:var(--cyan);color:#fff;box-shadow:0 4px 16px rgba(0,130,160,0.25);}
.picker-track-btn.active-apnee{background:linear-gradient(135deg,#005070,#0082a0);}

.lp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:620px;width:100%;}
@media(max-width:500px){.lp-grid{grid-template-columns:1fr;}}

.lp-card-level{font-size:0.62rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:0.3rem;}
.lp-card-icon{font-size:2rem;margin-bottom:0.5rem;}
.lp-card-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;color:var(--text);line-height:1.2;}
.lp-card-sub{font-size:0.75rem;color:var(--muted);margin-top:0.4rem;line-height:1.4;}
.lp-progress-bar-wrap{height:3px;background:rgba(0,130,160,0.1);border-radius:2px;margin-top:0.8rem;overflow:hidden;}
.lp-progress-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--green));width:0;transition:width 0.5s ease;}

/* ── INTERACTIVE ELEMENTS ── */
/* Vrai / Faux */
.vf-box{background:var(--surface);border:2px solid var(--border);border-radius:12px;padding:1rem 1.2rem;margin:1.2rem 0;}
.vf-tag{font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:0.6rem;}
.vf-stmt{font-size:0.9rem;font-weight:500;color:var(--text);margin-bottom:0.9rem;line-height:1.5;}
.vf-btns{display:flex;gap:0.6rem;}
.vf-btn{flex:1;padding:8px 0;border:2px solid var(--border);border-radius:8px;background:var(--surface);font-family:'Syne',sans-serif;font-size:0.82rem;font-weight:700;cursor:pointer;transition:all 0.18s;color:var(--muted);}
.vf-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.vf-box.vf-ok{border-color:var(--green);}
.vf-box.vf-ko{border-color:var(--red);}
.vf-box.vf-ok .vf-btn-vrai{background:var(--green);border-color:var(--green);color:#fff;}
.vf-box.vf-ko .vf-btn-faux{background:var(--red);border-color:var(--red);color:#fff;}
.vf-reveal{display:none;margin-top:0.8rem;padding:0.7rem 0.9rem;border-radius:8px;font-size:0.83rem;line-height:1.6;}
.vf-box.vf-ok .vf-reveal{background:rgba(0,134,90,0.07);border:1px solid rgba(0,134,90,0.2);color:#1a3a2a;display:block;}
.vf-box.vf-ko .vf-reveal{background:rgba(204,48,16,0.06);border:1px solid rgba(204,48,16,0.18);color:#4a1a0a;display:block;}

/* Inline MCQ */
.imcq{background:var(--surface);border:2px solid var(--border);border-radius:12px;padding:1rem 1.2rem;margin:1.2rem 0;}
.imcq-tag{font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#c05018;margin-bottom:0.6rem;}
.imcq-q{font-size:0.9rem;font-weight:500;color:var(--text);margin-bottom:0.8rem;line-height:1.5;}
.imcq-opts{display:flex;flex-direction:column;gap:0.45rem;}
.imcq-opt{padding:9px 14px;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:0.85rem;color:var(--text);transition:all 0.18s;background:var(--bg);}
.imcq-opt:hover{border-color:var(--cyan);background:#e8f4f8;}
.imcq-opt.imcq-correct{border-color:var(--green);background:rgba(0,134,90,0.08);color:var(--green);font-weight:500;}
.imcq-opt.imcq-wrong{border-color:var(--red);background:rgba(204,48,16,0.07);color:var(--red);opacity:0.8;}
.imcq-expl{display:none;margin-top:0.8rem;padding:0.7rem 0.9rem;border-radius:8px;font-size:0.82rem;line-height:1.6;background:rgba(0,130,160,0.05);border:1px solid rgba(0,130,160,0.15);color:#2a4a5a;}

/* Calc challenge */
.calc-box{background:var(--surface);border:2px dashed rgba(0,130,160,0.25);border-radius:12px;padding:1rem 1.2rem;margin:1.2rem 0;}
.calc-tag{font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#c05018;margin-bottom:0.5rem;}
.calc-box-q{font-size:0.88rem;font-weight:500;color:var(--text);margin-bottom:0.5rem;line-height:1.5;}
.calc-hint-txt{font-size:0.78rem;color:var(--muted);margin-bottom:0.8rem;font-style:italic;}
.calc-inp-row{display:flex;gap:0.6rem;align-items:center;}
.calc-inp{flex:1;max-width:140px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:0.95rem;color:var(--text);background:var(--bg);outline:none;transition:border-color 0.2s;}
.calc-inp:focus{border-color:var(--cyan);}
.calc-check-btn{padding:8px 16px;background:var(--cyan);border:none;border-radius:8px;color:#fff;font-family:'Syne',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;transition:opacity 0.2s;}
.calc-check-btn:hover{opacity:0.85;}
.calc-res{display:none;margin-top:0.7rem;font-size:0.82rem;padding:0.6rem 0.9rem;border-radius:8px;line-height:1.5;}
.calc-res.ok{background:rgba(0,134,90,0.07);border:1px solid rgba(0,134,90,0.2);color:#1a3a2a;display:block;}
.calc-res.ko{background:rgba(204,48,16,0.06);border:1px solid rgba(204,48,16,0.18);color:#4a1a0a;display:block;}

/* Aliases for data-file class names */
.imcq-question{font-size:0.9rem;font-weight:500;color:var(--text);margin-bottom:0.8rem;line-height:1.5;}
.imcq-options{display:flex;flex-direction:column;gap:0.45rem;}
.imcq-expl-ok{background:rgba(0,134,90,0.07);border:1px solid rgba(0,134,90,0.2);color:#1a3a2a;}
.imcq-expl-ko{background:rgba(204,48,16,0.06);border:1px solid rgba(204,48,16,0.18);color:#4a1a0a;}
.calc-title{font-size:0.85rem;font-weight:700;color:var(--cyan);margin-bottom:0.4rem;font-family:'Syne',sans-serif;}
.calc-prompt{font-size:0.88rem;font-weight:500;color:var(--text);margin-bottom:0.5rem;line-height:1.5;}
.calc-btn{padding:8px 16px;background:var(--cyan);border:none;border-radius:8px;color:#fff;font-family:'Syne',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;transition:opacity 0.2s;}
.calc-btn:hover{opacity:0.85;}
.calc-res{margin-top:0.7rem;font-size:0.82rem;padding:0.6rem 0.9rem;border-radius:8px;line-height:1.5;}
.calc-ok{background:rgba(0,134,90,0.07);border:1px solid rgba(0,134,90,0.2);color:#1a3a2a;}
.calc-ko{background:rgba(204,48,16,0.06);border:1px solid rgba(204,48,16,0.18);color:#4a1a0a;}
.calc-warn{background:rgba(192,80,24,0.07);border:1px solid rgba(192,80,24,0.2);color:#7a3808;}
/* Picker hero */
.lp-hero{text-align:center;}
.lp-tagline{color:var(--muted);font-size:0.95rem;margin-top:0.4rem;}
.lp-disclaimer{color:var(--muted);font-size:0.75rem;margin-top:0.8rem;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.6;opacity:0.65;}
.lp-card-meta{font-size:0.68rem;color:var(--muted);margin-top:0.5rem;letter-spacing:0.04em;}

@media(max-width:700px){
  #level-picker{
    align-items:stretch;
    justify-content:flex-start;
    gap:1rem;
    padding:4.2rem 1rem 1.2rem;
  }
  .lp-hero{
    max-width:100%;
  }
  .picker-track-bar{
    width:100%;
    max-width:620px;
    margin:0 auto 1rem;
    flex-wrap:wrap;
    justify-content:center;
  }
  .picker-track-btn{
    flex:1 1 calc(50% - 0.6rem);
    min-width:140px;
    font-size:0.82rem;
    padding:8px 10px;
  }
  .lp-grid{
    max-width:620px;
    margin:0 auto;
    gap:0.8rem;
  }
  .lp-card{
    padding:1.2rem 1rem;
  }
}

/* Biologie species media */
.bio-imgs{margin:.45rem 0 .7rem;}
.bio-imgs{
  width:100%;
}
.bio-thumb{
  width:100%;
  max-width:420px;
  margin:0 auto;
  border:none;
  border-radius:10px;
  overflow:hidden;
  background:rgba(0,130,160,.05);
  border:1px solid rgba(0,130,160,.15);
  cursor:pointer;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3;
  min-height:140px;
  position:relative;
}
.bio-thumb:hover{border-color:rgba(0,130,160,.35);}
.bio-thumb.is-empty,
.bio-thumb.is-missing{
  gap:.45rem;
  color:var(--muted);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
}
.bio-thumb-placeholder{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:62px;
  height:62px;
  border-radius:999px;
  background:rgba(0,130,160,.08);
  color:var(--cyan);
  font-family:'Syne',sans-serif;
  font-size:.82rem;
}
.bio-thumb-label{font-size:.76rem;}
.bio-photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

@media(max-width:700px){
  .bio-thumb{
    max-width:100%;
    min-height:110px;
    aspect-ratio:16/10;
  }
  .bio-photo{
    object-fit:contain;
    background:rgba(0,130,160,.04);
  }
}

/* ── SÉQUENCE (ordonner les cartes) ── */
.seq-box{background:var(--surface);border:2px solid var(--border);border-radius:12px;padding:1rem 1.2rem;margin:1.2rem 0;}
.seq-tag{font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#7050c8;margin-bottom:0.5rem;}
.seq-question{font-size:0.9rem;font-weight:500;color:var(--text);margin-bottom:0.9rem;line-height:1.5;}
.seq-items{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.8rem;}
.seq-item{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:8px 14px;cursor:pointer;font-size:0.83rem;color:var(--text);transition:all 0.18s;position:relative;user-select:none;}
.seq-item:hover:not([data-clicked-at]){border-color:var(--cyan);background:#e8f4f8;}
.seq-item[data-clicked-at]{background:rgba(112,80,200,0.08);border-color:rgba(112,80,200,0.4);cursor:default;}
.seq-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#7050c8;color:#fff;border-radius:50%;font-size:0.62rem;font-weight:700;margin-right:6px;vertical-align:middle;}
.seq-item.seq-correct{border-color:var(--green);background:rgba(0,134,90,0.08);}
.seq-item.seq-wrong{border-color:var(--red);background:rgba(204,48,16,0.07);}
.seq-res{display:none;margin-top:0.6rem;padding:0.6rem 0.9rem;border-radius:8px;font-size:0.83rem;line-height:1.5;}
.seq-res.seq-ok{background:rgba(0,134,90,0.07);border:1px solid rgba(0,134,90,0.2);color:#1a3a2a;display:block;}
.seq-res.seq-ko{background:rgba(204,48,16,0.06);border:1px solid rgba(204,48,16,0.18);color:#4a1a0a;display:block;}

/* ── ASSOCIATION (relier images/termes) ── */
.assoc-box{background:var(--surface);border:2px solid var(--border);border-radius:12px;padding:1rem 1.2rem;margin:1.2rem 0;}
.assoc-tag{font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#0082a0;margin-bottom:0.5rem;}
.assoc-question{font-size:0.9rem;font-weight:500;color:var(--text);margin-bottom:0.9rem;line-height:1.5;}
.assoc-columns{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;margin-bottom:0.8rem;}
.assoc-col{display:flex;flex-direction:column;gap:0.45rem;}
.assoc-col-lbl{font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:0.2rem;}
.assoc-item{padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;font-size:0.82rem;color:var(--text);transition:all 0.18s;background:var(--bg);line-height:1.4;}
.assoc-item:hover:not(.assoc-matched):not(.assoc-disabled){border-color:var(--cyan);background:#e8f4f8;}
.assoc-item.assoc-selected{border-color:#7050c8;background:rgba(112,80,200,0.09);box-shadow:0 0 0 2px rgba(112,80,200,0.2);}
.assoc-item.assoc-matched{border-color:var(--green);background:rgba(0,134,90,0.08);color:var(--green);cursor:default;}
.assoc-item.assoc-wrong{border-color:var(--red);background:rgba(204,48,16,0.07);animation:assoc-shake 0.35s ease;}
.assoc-item.assoc-disabled{opacity:0.5;cursor:default;}
.assoc-score{font-size:0.82rem;color:var(--muted);margin-top:0.5rem;}
.assoc-score.assoc-complete{color:var(--green);font-weight:500;}
@keyframes assoc-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* Source image */
.pp-fig{margin:1rem 0;max-width:440px;}
.pp-fig img{display:block;width:100%;border-radius:10px;border:1px solid var(--border);cursor:zoom-in;transition:transform 0.2s;}
.pp-fig img:hover{transform:scale(1.02);}
.pp-fig figcaption{font-size:0.62rem;color:var(--muted);font-style:italic;margin-top:0.3rem;}
.img-cite{display:block;max-width:100%;border-radius:10px;border:1px solid var(--border);margin:0.8rem 0 0.3rem;cursor:zoom-in;}
.img-source{font-size:0.62rem;color:var(--muted);font-style:italic;margin-bottom:0.8rem;display:block;}

/* Back to top button */
.btt-btn{position:fixed;bottom:1.5rem;right:1.5rem;width:40px;height:40px;border-radius:50%;background:var(--cyan);color:#fff;border:none;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 16px rgba(0,80,120,0.25);opacity:0;pointer-events:none;transition:opacity 0.3s,transform 0.3s;z-index:40;display:flex;align-items:center;justify-content:center;}
.btt-btn.show{opacity:1;pointer-events:auto;}
.btt-btn:hover{transform:scale(1.1);}

/* Section mini-nav (floating progress on right) */
.section-dots{position:fixed;right:0.6rem;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:6px;}
.section-dot{width:6px;height:6px;border-radius:50%;background:rgba(0,130,160,0.2);transition:all 0.2s;}
.section-dot.active{background:var(--cyan);transform:scale(1.5);}

/* Video ref */
.video-ref{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:0.9rem 1rem;margin:1rem 0;display:flex;align-items:center;gap:0.9rem;cursor:pointer;text-decoration:none;transition:border-color 0.2s;}
.video-ref:hover{border-color:var(--cyan);}
.video-ref-icon{width:40px;height:40px;background:rgba(255,0,0,0.85);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.video-ref-icon::after{content:'';border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px;}
.video-ref-title{font-size:0.85rem;font-weight:500;color:var(--text);}
.video-ref-sub{font-size:0.72rem;color:var(--muted);margin-top:2px;}

/* ── ILLUSTRATIONS SÉLECTIONNÉES ─────────────────────────── */
.illus-figure {
  margin: 1.4rem 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,130,160,0.2);
  background: rgba(255,255,255,0.04);
  cursor: zoom-in;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.illus-figure:hover {
  border-color: rgba(0,130,160,0.45);
  box-shadow: 0 4px 20px rgba(0,100,150,0.12);
}
.illus-figure img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  display: block;
  background: #fff;
  padding: 4px 0;
}
.illus-zoom-hint {
  padding: 3px 10px 4px;
  font-size: 0.67rem;
  color: rgba(0,130,160,0.65);
  text-align: right;
  background: rgba(0,130,160,0.04);
}
.illus-caption {
  padding: 6px 12px;
  font-size: 0.67rem;
  color: var(--muted);
  font-style: italic;
  border-top: 1px solid rgba(0,130,160,0.1);
}

/* ── LIGHTBOX ────────────────────────────────────────────── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 64px rgba(0,0,0,0.6);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s;
  z-index: 10000;
}
.lightbox-close:hover { opacity: 1; }

/* ── VIDEO THUMBNAIL LINKS (remplace les iframes) ─────────── */
.video-embed { margin: 1rem 0; }

.video-thumb-link {
  display: block;
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0,80,120,0.12);
  transition: transform 0.2s, box-shadow 0.2s;
}
.video-thumb-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,80,120,0.18); }

.video-thumb-img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #d0e4ef;
}

.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: rgba(200, 0, 0, 0.88);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: #fff;
  padding-left: 4px;
  transition: background 0.2s, transform 0.2s;
  pointer-events: none;
}
.video-thumb-link:hover .video-play-btn {
  background: rgba(220, 0, 0, 1);
  transform: translate(-50%, -50%) scale(1.1);
}

.video-caption {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   REFONTE TYPOGRAPHIE & LAYOUT  — override ciblé
   ═══════════════════════════════════════════════════════════ */

/* ── Texte courant : aération et lisibilité ── */
.ch-text {
  font-size: 0.91rem;
  line-height: 1.92;
  color: #253e4e;
  max-width: 680px;
}
.ch-text p {
  margin-bottom: 1rem;
}
.ch-text p:last-child { margin-bottom: 0; }

/* ── Listes : alignement correct des puces ── */
.ch-text ul,
.ch-text ol,
.ch-section ul,
.ch-section ol,
.info-box ul,
.info-box ol,
.warn-box ul,
.warn-box ol,
.danger-box ul,
.danger-box ol {
  padding-left: 1.5em;
  margin: 0.5rem 0 0.9rem;
  list-style-position: outside;
}
.ch-text li,
.ch-section li,
.info-box li,
.warn-box li,
.danger-box li {
  margin-bottom: 0.45rem;
  padding-left: 0.15em;
  line-height: 1.65;
}
.ch-text ul li  { list-style-type: disc; }
.ch-text ol li  { list-style-type: decimal; }

/* ── Espacement entre sections ── */
.ch-section { margin-bottom: 2.2rem; }
.ch-section-title { margin-bottom: 1rem; }

/* ── Header chapitre : statique, scroll avec le contenu ── */
.ch-header {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 0.7rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.8rem;
}

/* ═══════════════════════════════════════════════════════════
   ÉLÉMENTS INTERACTIFS — refonte visuelle
   ═══════════════════════════════════════════════════════════ */

/* Bande couleur en haut de chaque encart interactif */
.vf-box,
.imcq,
.calc-box,
.seq-box,
.assoc-box {
  position: relative;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  padding: 1.2rem 1.4rem 1.1rem;
  margin: 1.6rem 0;
  box-shadow: 0 2px 12px rgba(0,80,120,0.06);
  overflow: hidden;
}
.vf-box::before,
.imcq::before,
.calc-box::before,
.seq-box::before,
.assoc-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.vf-box::before   { background: linear-gradient(90deg, #00865a, #00a876); }
.imcq::before     { background: linear-gradient(90deg, #c05018, #e07030); }
.calc-box::before { background: linear-gradient(90deg, #0082a0, #00aacb); }
.seq-box::before  { background: linear-gradient(90deg, #7050c8, #9070e0); }
.assoc-box::before{ background: linear-gradient(90deg, #0082a0, #00aacb); }

/* Label type en tête */
.vf-tag   { color: var(--green);  }
.imcq-tag { color: var(--accent); }
.calc-tag { color: var(--cyan);   }
.seq-tag  { color: #7050c8;       }
.assoc-tag{ color: var(--cyan);   }

/* Enoncé de la question */
.vf-box > p,
.vf-stmt {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 1rem !important;
}

/* ── Boutons Vrai / Faux (raw <button> & .vf-btn) ── */
.vf-box button,
.vf-box .vf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 9px 22px;
  border: 2px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  font-family: 'Syne', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  color: #4a7a90;
  margin-right: 0.5rem;
  margin-top: 0.1rem;
}
.vf-box button:hover:not(:disabled),
.vf-box .vf-btn:hover:not(:disabled) {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0,130,160,0.05);
}
.vf-box button:disabled { opacity: 0.65; cursor: default; }
/* Feedback couleur après réponse */
.vf-box.vf-ok button[onclick*=", true"],
.vf-box.vf-ok button[onclick*=",true"] {
  background: var(--green); border-color: var(--green); color: #fff;
}
.vf-box.vf-ko button[onclick*=", false"],
.vf-box.vf-ko button[onclick*=",false"] {
  background: var(--red); border-color: var(--red); color: #fff;
}

/* ── IMCQ : labels radio stylisés ── */
.imcq label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.87rem;
  color: var(--text);
  background: var(--bg);
  transition: all 0.18s;
  margin-bottom: 0.45rem;
  line-height: 1.45;
}
.imcq label:hover { border-color: var(--accent); background: rgba(192,80,24,0.04); }
.imcq label input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--accent);
  width: 15px; height: 15px;
}

/* Bouton Vérifier (dans imcq, calc-box, seq-box) */
.imcq > button,
.calc-box > button,
.seq-box > button {
  margin-top: 0.8rem;
  padding: 9px 22px;
  background: var(--cyan2);
  border: none;
  border-radius: 9px;
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: opacity 0.18s;
}
.imcq > button:hover,
.calc-box > button:hover,
.seq-box > button:hover { opacity: 0.85; }

/* Réponse affichée après vérification */
.imcq-answer,
.calc-answer {
  margin-top: 0.8rem;
  padding: 0.65rem 1rem;
  border-radius: 9px;
  font-size: 0.84rem;
  line-height: 1.55;
  background: rgba(0,130,160,0.06);
  border: 1px solid rgba(0,130,160,0.18);
  color: #1a4a5a;
}

/* ── Calc box ── */
.calc-box {
  border-style: solid;
  border-color: rgba(0,130,160,0.2);
}
.calc-box input[type="number"] {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  max-width: 140px;
  outline: none;
  transition: border-color 0.18s;
}
.calc-box input[type="number"]:focus { border-color: var(--cyan); }


/* ── DISCLAIMER SCREEN ── */
#disclaimer {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.disc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.8rem 2.4rem 2.4rem;
  max-width: 540px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,80,120,0.10);
  gap: 1rem;
}
.disc-icon {
  font-size: 2.6rem; line-height: 1;
  margin-bottom: 0.2rem;
}
.disc-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.disc-title span { color: var(--cyan); }
.disc-tagline {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.disc-body {
  display: flex; flex-direction: column; gap: 0.85rem;
  background: rgba(0,130,160,0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin-top: 0.4rem;
  text-align: left;
}
.disc-body p {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.72;
  font-style: italic;
  opacity: 0.82;
}
.disc-body p + p {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.disc-btn {
  margin-top: 0.6rem;
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--cyan2), var(--cyan));
  border: none; border-radius: 12px;
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.disc-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* ── PLACEHOLDER ILLUSTRATION À VENIR ── */
.illus-placeholder {
  width: 100%;
  margin: 1.2rem 0;
  border: 2px dashed rgba(0,130,160,0.30);
  border-radius: 12px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,130,160,0.03) 0px,
    rgba(0,130,160,0.03) 8px,
    transparent 8px,
    transparent 16px
  );
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
}
.illus-placeholder-icon {
  font-size: 2rem;
  opacity: 0.45;
  line-height: 1;
}
.illus-placeholder-label {
  font-family: 'Syne', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.illus-placeholder-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 440px;
  opacity: 0.75;
  font-style: italic;
}

/* ── Admin : remplacement d’images (session portail) ── */
.elearning-img-admin-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}
.elearning-img-edit-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,130,160,0.45);
  background: rgba(255,255,255,0.95);
  color: var(--cyan);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,40,60,0.15);
  z-index: 5;
  padding: 0;
  transition: transform 0.15s, background 0.15s;
}
.elearning-img-edit-btn:hover {
  background: #fff;
  transform: scale(1.05);
}
.elearning-img-edit-ico {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 700;
}
.elearning-img-trash-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(180, 60, 60, 0.45);
  background: rgba(255, 255, 255, 0.95);
  color: #b91c1c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 40, 60, 0.15);
  z-index: 5;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.15s, background 0.15s;
}
.elearning-img-trash-btn:hover {
  background: #fff;
  transform: scale(1.05);
}
.elearning-img-trash-ico {
  font-size: 1rem;
  line-height: 1;
}
.illus-placeholder-admin {
  position: relative;
}

.illus-placeholder-filled .illus-slot-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.mdk-eimg-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(4,16,29,0.72);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mdk-eimg-overlay.open {
  display: flex;
  pointer-events: auto;
}
.mdk-eimg-dialog {
  pointer-events: auto;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  max-width: 420px;
  width: 100%;
  padding: 1.4rem 1.5rem 1.2rem;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,40,60,0.2);
}
.mdk-eimg-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--muted);
}
.mdk-eimg-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.6rem;
  padding-right: 2rem;
}
.mdk-eimg-path {
  font-size: 0.72rem;
  color: var(--muted);
  word-break: break-all;
  margin-bottom: 0.85rem;
  font-family: ui-monospace, monospace;
}
.mdk-eimg-server {
  font-size: 0.74rem;
  line-height: 1.45;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: rgba(0, 130, 160, 0.06);
  border: 1px solid rgba(0, 130, 160, 0.12);
}
.mdk-eimg-server-ok {
  color: #0d5c3d;
}
.mdk-eimg-server-bad {
  color: #9a1c0a;
}
.mdk-eimg-server-warn {
  color: #8a5a00;
}
.mdk-eimg-server-path {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  word-break: break-all;
  margin-top: 0.35rem;
  font-family: ui-monospace, monospace;
}
.mdk-eimg-preview-wrap {
  margin-bottom: 0.75rem;
  min-height: 2rem;
}
.mdk-eimg-preview-img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 10px;
  border: 1px solid var(--border);
  object-fit: contain;
  background: rgba(0, 80, 120, 0.04);
}
.mdk-eimg-preview-missing {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}
.mdk-eimg-dialog input[type="file"] {
  width: 100%;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.mdk-eimg-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.mdk-eimg-err {
  color: var(--red);
  font-size: 0.8rem;
  min-height: 1.2em;
  margin-bottom: 0.6rem;
}
.mdk-eimg-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.mdk-eimg-btn {
  padding: 0.55rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}
.mdk-eimg-btn-primary {
  background: linear-gradient(135deg, var(--cyan2), var(--cyan));
  color: #fff;
  border-color: transparent;
}
.mdk-eimg-btn-danger {
  border-color: rgba(180, 60, 60, 0.45);
  color: #b91c1c;
  background: rgba(255, 245, 245, 0.95);
}
.mdk-eimg-btn-danger:hover {
  background: #fff0f0;
}