/* ================================================
   CEJM SHELL — Feuille de style partagée (refonte Cockpit)
   BTS Tertiaires — Géo
   v3.0 — 2026
   ================================================ */

/*===================== RESET =====================*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
/* Titres de carte : anciens <h4>, devenus <p class="ttl"> pour ne plus créer de
   saut de niveau dans la hiérarchie des titres. La classe reprend le rôle que la
   balise jouait dans les sélecteurs (.mc .ttl, .kb .ttl…) ; cette règle de base
   restitue la graisse que le navigateur donnait aux h4 non couverts par un
   sélecteur de conteneur. */
.ttl{font-weight:700}
body{font-family:'Inter',system-ui,sans-serif;line-height:1.72;overflow-x:hidden;transition:background .4s,color .4s}
:focus-visible{outline:3px solid var(--ac);outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit;border:none;background:none}
a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline}

/*===================== VARIABLES GLOBALES =====================*/
:root{--spd:.35s;--R:18px;--Rs:12px;--Rx:8px}

/*===================== THÈME : ACADÉMIQUE =====================*/
[data-theme="academique"]{
  --bg:#F0F2F8;--bg2:#fff;--bg3:#E8ECF4;--glass:rgba(255,255,255,.85);
  --tx:#1B1F3B;--tx2:#3D4466;--tx3:#7C84A4;
  --ac:#2E4A7A;--ac2:#B8860B;--acL:#E8EDF6;
  --ok:#1B7A4E;--okB:#E8F5EE;--ko:#C0392B;--koB:#FDEDED;--wa:#B8860B;--waB:#FFF8E7;
  --bd:#D4DAE8;--bdL:#E8ECF4;
  --sh:0 2px 12px rgba(30,40,80,.05),0 8px 24px rgba(30,40,80,.07);
  --shH:0 12px 40px rgba(46,74,122,.14);
  --sbBg:rgba(255,255,255,.92);--sbAc:#E8EDF6;--sbHov:#F4F6FB;
  --tbBg:rgba(240,242,248,.82);
  --gr:linear-gradient(135deg,#2E4A7A,#1B3A5C);--gr2:linear-gradient(135deg,#B8860B,#D4A017);
  --qB:#EDF1F8;--qBH:#DCE3F0;
  --pBg:#D4DAE8;--pF:linear-gradient(90deg,#2E4A7A,#B8860B);
  --scr:#D4DAE8;--scrT:#A0AAC0;
  --niIco:#6B7AA0;--niIcoAc:#fff;--niIcoBg:#E8ECF4;--niIcoBgAc:var(--ac);
  --secLine:#E8ECF4;
  --kbBg:#E8EDF6;--kbBd:#2E4A7A;--kbTx:#1B1F3B;--kbAc:#2E4A7A;--kbDeco:rgba(46,74,122,.06);
}

/*===================== THÈME : CHALEUREUX =====================*/
[data-theme="chaleureux"]{
  --bg:#FBF5EE;--bg2:#fff;--bg3:#F3E8DA;--glass:rgba(255,255,255,.88);
  --tx:#3A2518;--tx2:#5C3D2E;--tx3:#9A7B68;
  --ac:#C0603A;--ac2:#2D6B4F;--acL:#FDEEE6;
  --ok:#2D6B4F;--okB:#E8F5EE;--ko:#B83230;--koB:#FDEDED;--wa:#B8860B;--waB:#FFF8E7;
  --bd:#E0CEBC;--bdL:#EDE2D4;
  --sh:0 2px 12px rgba(60,38,24,.05),0 8px 24px rgba(60,38,24,.07);
  --shH:0 12px 40px rgba(192,96,58,.14);
  --sbBg:rgba(251,245,238,.92);--sbAc:#FDEEE6;--sbHov:#FDF6EF;
  --tbBg:rgba(251,245,238,.82);
  --gr:linear-gradient(135deg,#C0603A,#A04828);--gr2:linear-gradient(135deg,#2D6B4F,#1E5A3E);
  --qB:#FBF0E8;--qBH:#F4E2D2;
  --pBg:#E0CEBC;--pF:linear-gradient(90deg,#C0603A,#2D6B4F);
  --scr:#E0CEBC;--scrT:#BCA898;
  --niIco:#9A7B68;--niIcoAc:#fff;--niIcoBg:#F3E8DA;--niIcoBgAc:var(--ac);
  --secLine:#F3E8DA;
  --kbBg:#FDEEE6;--kbBd:#C0603A;--kbTx:#3A2518;--kbAc:#C0603A;--kbDeco:rgba(192,96,58,.06);
}

/*===================== THÈME : NATUREL =====================*/
[data-theme="naturel"]{
  --bg:#F0F4F0;--bg2:#fff;--bg3:#E4EDE4;--glass:rgba(255,255,255,.85);
  --tx:#1A2E1A;--tx2:#4A6050;--tx3:#7A9080;
  --ac:#2D6A4F;--ac2:#40916C;--acL:#E4EDE4;
  --ok:#2D6A4F;--okB:#E8F5EE;--ko:#C0392B;--koB:#FDEDED;--wa:#B8860B;--waB:#FFF8E7;
  --bd:#B7D5C4;--bdL:#D4E8DC;
  --sh:0 2px 12px rgba(45,106,79,.05),0 8px 24px rgba(45,106,79,.07);
  --shH:0 12px 40px rgba(45,106,79,.16);
  --sbBg:rgba(255,255,255,.92);--sbAc:#E4EDE4;--sbHov:#F0F4F0;
  --tbBg:rgba(240,244,240,.82);
  --gr:linear-gradient(135deg,#2D6A4F,#1B4D35);--gr2:linear-gradient(135deg,#40916C,#2D6A4F);
  --qB:#EAF3EE;--qBH:#D4E8DC;
  --pBg:#B7D5C4;--pF:linear-gradient(90deg,#2D6A4F,#74C69D);
  --scr:#B7D5C4;--scrT:#8AB8A0;
  --niIco:#7A9080;--niIcoAc:#fff;--niIcoBg:#E4EDE4;--niIcoBgAc:var(--ac);
  --secLine:#D4E8DC;
  --kbBg:#E4EDE4;--kbBd:#2D6A4F;--kbTx:#1A2E1A;--kbAc:#2D6A4F;--kbDeco:rgba(45,106,79,.06);
}

/*===================== THÈME : SOMBRE =====================*/
[data-theme="sombre"]{
  --bg:#0C0F1A;--bg2:#151929;--bg3:#1D2238;--glass:rgba(21,25,41,.88);
  --tx:#E4E7F0;--tx2:#A0A8C8;--tx3:#606A8C;
  --ac:#818CF8;--ac2:#F59E0B;--acL:#1E2348;
  --ok:#34D399;--okB:#0D2820;--ko:#F87171;--koB:#2A1016;--wa:#FBBF24;--waB:#2A2410;
  --bd:#262C48;--bdL:#1D2238;
  --sh:0 2px 12px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.22);
  --shH:0 12px 40px rgba(129,140,248,.16);
  --sbBg:rgba(17,21,40,.95);--sbAc:#1E2348;--sbHov:#191E36;
  --tbBg:rgba(12,15,26,.85);
  --gr:linear-gradient(135deg,#818CF8,#6366F1);--gr2:linear-gradient(135deg,#F59E0B,#D97706);
  --qB:#1E2348;--qBH:#282E56;
  --pBg:#262C48;--pF:linear-gradient(90deg,#818CF8,#F59E0B);
  --scr:#1D2238;--scrT:#3A4268;
  --niIco:#606A8C;--niIcoAc:#fff;--niIcoBg:#1D2238;--niIcoBgAc:var(--ac);
  --secLine:#262C48;
  --kbBg:#1E2348;--kbBd:#818CF8;--kbTx:#E4E7F0;--kbAc:#818CF8;--kbDeco:rgba(129,140,248,.08);
}

/*===================== SCROLLBAR =====================*/
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--scr)}
::-webkit-scrollbar-thumb{background:var(--scrT);border-radius:10px}
body{background:var(--bg);color:var(--tx)}

/*===================== LAYOUT =====================*/
.app{display:flex;min-height:100vh}

/*===================== SIDEBAR =====================*/
.side{
  width:272px;min-width:272px;
  background:var(--sbBg);
  border-right:1px solid var(--bd);
  border-radius:0 2.5rem 2.5rem 0;
  position:fixed;top:0;left:0;height:100vh;z-index:100;
  display:flex;flex-direction:column;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.06);
  transition:transform var(--spd),background var(--spd);
  overflow-y:auto;overflow-x:hidden;
}

/* Brand */
.s-brand{
  padding:24px 20px 18px;
  display:flex;align-items:center;gap:14px;flex-shrink:0;
  border-bottom:1px solid var(--bd);
}
.b-logo{
  width:44px;height:44px;border-radius:14px;
  background:var(--gr);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:18px;box-shadow:0 4px 14px rgba(0,0,0,.12)
}
.b-txt h2{
  font-size:15px;font-weight:800;color:var(--tx);
  line-height:1.3;letter-spacing:-.3px;font-family:'Inter',sans-serif;
}
.b-txt p:not(.ttl){font-size:10.5px;color:var(--tx3);font-weight:500;margin-top:1px}

/* Retour dashboard */
.s-back{padding:12px 16px}
.s-back a{
  display:flex;align-items:center;gap:9px;padding:9px 14px;
  border-radius:var(--Rs);color:var(--tx2);font-size:.8rem;font-weight:600;
  opacity:.8;transition:all var(--spd);text-decoration:none;
  background:var(--bg3);border:1px solid var(--bd);
}
.s-back a:hover{opacity:1;background:var(--ac);color:#fff;border-color:var(--ac);text-decoration:none}
.s-back-ico{color:var(--ac2);font-size:.85rem;transition:color var(--spd)}
.s-back a:hover .s-back-ico{color:#fff}

/* Recherche */
.s-search{margin:8px 16px 12px;position:relative}
.s-search input{
  width:100%;padding:9px 12px 9px 36px;border-radius:var(--Rs);
  border:1px solid var(--bd);background:var(--bg3);
  font-size:12px;font-family:inherit;color:var(--tx);
  transition:all .2s;outline:none;
}
.s-search input:focus{border-color:var(--ac);background:var(--bg2);box-shadow:0 0 0 3px var(--acL)}
.s-search input::placeholder{color:var(--tx3)}
.s-search .s-search-ico{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--tx3);pointer-events:none
}

/* Section labels */
.s-sec{
  display:flex;align-items:center;gap:8px;padding:14px 20px 6px;
  font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.4px;color:var(--tx3);user-select:none
}
.s-sec::after{content:"";flex:1;height:1px;background:var(--secLine)}

/* Nav items */
.ni{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;margin:2px 10px;
  border-radius:var(--Rs);font-size:13px;font-weight:500;
  color:var(--tx2);cursor:pointer;transition:all .22s;position:relative;
}
.ni:hover{background:var(--sbHov);color:var(--tx)}
.ni.active{background:var(--sbAc);color:var(--ac);font-weight:650}
.n-ico{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
  background:var(--niIcoBg);color:var(--niIco);transition:all .25s;
}
.ni:hover .n-ico{color:var(--ac);background:var(--acL)}
.ni.active .n-ico{background:var(--niIcoBgAc);color:var(--niIcoAc);box-shadow:0 3px 10px rgba(0,0,0,.1)}
.n-txt{flex:1;min-width:0}
.n-title{font-size:12.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-sub{font-size:9.5px;color:var(--tx3);font-weight:400;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni.active .n-sub{color:var(--ac);opacity:.7}
.ni .n-bdg{
  font-size:9px;font-weight:700;padding:2px 8px;border-radius:16px;
  background:var(--acL);color:var(--ac);white-space:nowrap;flex-shrink:0
}
.ni .n-bm{color:var(--ac2);font-size:.78rem;flex-shrink:0;opacity:0;transition:opacity .3s;cursor:pointer}
.ni .n-bm.vis{opacity:1}
.ni .n-bm:hover{transform:scale(1.15)}
.ni .n-check{
  width:18px;height:18px;border-radius:50%;border:2px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:9px;color:transparent;transition:all .3s
}
.ni.visited .n-check{background:var(--ok);border-color:var(--ok);color:#fff}

/* Footer sidebar */
.s-ft{
  padding:16px 18px;border-top:1px solid var(--bd);flex-shrink:0;
  background:var(--sbBg);
}
.p-stats{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.p-lbl{font-size:11px;font-weight:600;color:var(--tx2)}
.p-pct{font-size:22px;font-weight:800;color:var(--ac);font-variant-numeric:tabular-nums}
.p-bar{height:7px;background:var(--pBg);border-radius:10px;overflow:hidden}
.p-fill{height:100%;background:var(--pF);border-radius:10px;transition:width .6s cubic-bezier(.4,0,.2,1);width:0%}
.p-detail{font-size:10px;color:var(--tx3);margin-top:6px}
.s-best{margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.s-best-lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--tx3);margin-bottom:5px}
.s-best-val{font-size:.85rem;font-weight:700;color:var(--ac2)}

/* Hamburger + overlay */
.ham{
  display:none;position:fixed;top:12px;left:12px;z-index:200;
  width:42px;height:42px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--bd);
  align-items:center;justify-content:center;
  font-size:18px;color:var(--tx);box-shadow:var(--sh)
}
.s-ov{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);
  z-index:90;opacity:0;transition:opacity .3s
}

/*===================== MAIN =====================*/
.main{flex:1;margin-left:272px;display:flex;flex-direction:column;min-height:100vh}

/*===================== TOPBAR =====================*/
.topbar{
  position:sticky;top:0;z-index:80;
  background:var(--tbBg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bd);
  padding:0 28px;height:58px;
  display:flex;align-items:center;justify-content:space-between;
  transition:background var(--spd);
}
.t-title{
  font-size:13.5px;font-weight:700;color:var(--tx);
  font-family:'Inter',sans-serif;
}
.t-title span{color:var(--ac)}
.t-act{display:flex;align-items:center;gap:10px}

/* Bouton Dashboard topbar */
.tbtn-dash{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  border:1px solid var(--bd);border-radius:var(--Rs);color:var(--tx2);
  font-size:.78rem;font-weight:600;cursor:pointer;transition:all var(--spd);
  text-decoration:none;flex-shrink:0;background:var(--bg3);
}
.tbtn-dash:hover{background:var(--ac);color:#fff;border-color:var(--ac);text-decoration:none}

/* Sélecteur de thème — pastilles Cockpit */
.th-ctrl{
  display:flex;align-items:center;gap:8px;
  background:var(--bg3);border:1px solid var(--bd);
  border-radius:28px;padding:5px 14px;
  transition:background var(--spd),border var(--spd);
}
.th-dots{display:flex;gap:5px;align-items:center}
.th-dot{
  width:13px;height:13px;border-radius:50%;
  border:2px solid var(--bd);
  transition:all .25s;cursor:pointer;flex-shrink:0;
}
.th-dot:hover{transform:scale(1.2)}
.th-dot.active{border-color:var(--ac);transform:scale(1.32);box-shadow:0 0 0 3px var(--acL)}
.th-range{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:90px;height:6px;border-radius:10px;background:var(--pBg);
  outline:none;cursor:pointer;margin:0 4px;transition:background .3s
}
.th-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--ac);border:3px solid var(--bg2);
  box-shadow:0 2px 6px rgba(0,0,0,.18);cursor:pointer;transition:transform .2s,background .3s
}
.th-range::-webkit-slider-thumb:hover{transform:scale(1.2)}
.th-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ac);border:3px solid var(--bg2);box-shadow:0 2px 6px rgba(0,0,0,.18);cursor:pointer}
.th-range::-moz-range-track{height:6px;border-radius:10px;background:var(--pBg);border:none}
.th-lbl{font-size:10.5px;font-weight:600;color:var(--tx3);white-space:nowrap;min-width:70px;text-align:center}

/* Boutons topbar */
.help-b{
  width:36px;height:36px;border-radius:var(--Rs);
  background:var(--bg3);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--tx2);transition:all .2s;
}
.help-b:hover{border-color:var(--ac);color:var(--ac);background:var(--acL)}

/*===================== FULLSCREEN =====================*/
.fs-toggle{
  width:36px;height:36px;border-radius:var(--Rs);
  background:var(--bg3);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--tx2);transition:all .2s;cursor:pointer;
}
.fs-toggle:hover{border-color:var(--ac);color:var(--ac)}
.fs-toggle.active{background:var(--ac);color:#fff;border-color:var(--ac)}
.fs-toggle.active .fs-ico-expand{display:none}
.fs-toggle:not(.active) .fs-ico-compress{display:none}

/* Marque-page section */
.sec-bookmark{
  position:absolute;top:0;right:0;background:none;
  border:1px solid var(--bd);border-radius:var(--Rs);
  color:var(--tx2);cursor:pointer;padding:8px 12px;
  font-size:.9rem;transition:all var(--spd);
}
.sec-bookmark:hover{background:var(--ac);color:#fff;border-color:var(--ac)}
.sec-bookmark.bookmarked{background:var(--ac2);color:#fff;border-color:var(--ac2)}

/*===================== FIREWORKS =====================*/
#fireworksCanvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2000;pointer-events:none;display:none}
#fireworksCanvas.active{display:block}

/*===================== CONTENT =====================*/
.cnt{flex:1;padding:28px 32px 40px;max-width:900px;width:100%;margin:0 auto}
.pnl{display:none;animation:fdIn .38s ease}
.pnl.act{display:block}
@keyframes fdIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* Header section */
.s-hdr{margin-bottom:24px;position:relative}
.eye{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.9px;color:var(--ac);
  background:var(--acL);padding:4px 12px;border-radius:20px;margin-bottom:10px;
}
.s-tl{
  /* Manrope pour coller au Cockpit */
  font-family:'Manrope','Playfair Display',sans-serif;
  font-size:clamp(22px,3vw,30px);font-weight:800;
  color:var(--tx);line-height:1.22;margin-bottom:6px;letter-spacing:-.4px;
}
.s-sub{font-size:14px;color:var(--tx2);max-width:600px;line-height:1.7}

/*===================== CARDS =====================*/
.cd{
  background:var(--bg2);border:1px solid var(--bd);
  border-radius:var(--R);padding:26px;margin-bottom:18px;
  box-shadow:var(--sh);transition:all .25s;
}
.cd:hover{box-shadow:var(--shH);transform:translateY(-2px)}
.cd h3{font-size:16px;font-weight:700;color:var(--tx);margin-bottom:10px;display:flex;align-items:center;gap:8px;font-family:'Manrope',sans-serif}
.ci{
  width:34px;height:34px;border-radius:10px;
  background:var(--gr);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.1);
}
.cd p:not(.ttl),.cd li{font-size:13.5px;color:var(--tx2);line-height:1.78}
.cd ul{padding-left:0;margin-top:8px;list-style:none}
.cd li{margin-bottom:5px;padding-left:16px;position:relative}
.cd li::before{content:"▸";position:absolute;left:0;color:var(--ac);font-weight:700;font-size:10px;top:4px}

/* Mini cards grid */
.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:14px}
.mc{
  background:var(--bg3);border-radius:var(--Rs);
  padding:18px;border:1px solid var(--bd);transition:all .22s;
}
.mc:hover{border-color:var(--ac);background:var(--acL);transform:translateY(-2px);box-shadow:var(--sh)}
.mc .ttl{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:5px;display:flex;align-items:center;gap:6px;font-family:'Manrope',sans-serif}
.mc .ttl span{font-size:16px}
.mc p:not(.ttl){font-size:12px;color:var(--tx2);line-height:1.65}

/* Highlight box */
.hb{
  border-left:4px solid var(--ac);background:var(--acL);
  border-radius:0 var(--Rs) var(--Rs) 0;
  padding:16px 20px;margin:16px 0;
  font-size:13px;color:var(--tx);line-height:1.75;
}
.hb strong{color:var(--ac)}

/* Key box */
.kb{
  background:var(--kbBg);border-left:4px solid var(--kbBd);
  border-radius:0 var(--R) var(--R) 0;
  padding:22px 26px;margin:20px 0;position:relative;overflow:hidden;
}
.kb::after{content:"";position:absolute;top:-40%;right:-10%;width:160px;height:160px;background:var(--kbDeco);border-radius:50%;}
.kb .ttl{font-size:14px;font-weight:700;margin-bottom:5px;position:relative;z-index:1;color:var(--kbAc);font-family:'Manrope',sans-serif}
.kb p:not(.ttl){font-size:13px;line-height:1.75;position:relative;z-index:1;color:var(--kbTx)}
.kb strong{color:var(--kbAc)}

/* Flow */
.fl{
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;margin:18px 0;
  padding:22px;background:var(--bg3);
  border-radius:var(--R);border:1px solid var(--bd);
}
.fb-flow{
  background:var(--bg2);border:2px solid var(--ac);
  border-radius:var(--Rs);padding:12px 20px;
  text-align:center;font-weight:700;font-size:12.5px;
  color:var(--ac);min-width:110px;box-shadow:var(--sh);
}
.fa-arrow{font-size:18px;color:var(--ac);font-weight:700}
.fll{font-size:9.5px;color:var(--tx3);text-align:center;font-weight:600;display:block}
.tc{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/*===================== VIDEO =====================*/
.vw{
  position:relative;border-radius:var(--R);overflow:hidden;
  background:#000;aspect-ratio:16/9;margin-bottom:18px;
  border:1px solid var(--bd);box-shadow:var(--sh);
}
.vw video{width:100%;height:100%;object-fit:contain;display:block}
.vw-portrait{
  position:relative;max-width:820px;margin:18px auto;
  aspect-ratio:16/9;border-radius:var(--R);overflow:hidden;
  background:#000;border:1px solid var(--bd);box-shadow:var(--sh);
}
.vw-portrait .bg-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(24px) brightness(.42);z-index:0}
.vw-portrait .main-vid{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}

/*===================== AUDIO / PPTX =====================*/
.ap{
  background:var(--bg2);border:1px solid var(--bd);border-radius:var(--R);
  padding:22px;display:flex;align-items:center;gap:18px;
  box-shadow:var(--sh);margin-bottom:14px;transition:all .22s;
}
.ap:hover{box-shadow:var(--shH);transform:translateY(-1px)}
.ai{
  width:50px;height:50px;border-radius:50%;
  background:var(--gr);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.ainf{flex:1;min-width:0}
.ainf .ttl{font-size:13.5px;font-weight:700;color:var(--tx);margin-bottom:3px;font-family:'Manrope',sans-serif}
.ainf p:not(.ttl){font-size:11px;color:var(--tx3)}
.media-audio{width:100%;margin-top:10px;border-radius:var(--Rs)}
.pptx-wrap{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--R);padding:26px;margin-bottom:14px;box-shadow:var(--sh)}
.pptx-wrap .ttl{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:5px;font-family:'Manrope',sans-serif}
.pptx-wrap p:not(.ttl){font-size:12px;color:var(--tx3);margin-bottom:14px}
.pptx-wrap video{width:100%;border-radius:var(--Rs)}

/*===================== SYNTHÈSE =====================*/
.synth-tabs{display:flex;gap:8px;margin:18px 0 10px}
.synth-tabs button{
  padding:9px 20px;border-radius:var(--Rs);
  border:1px solid var(--bd);background:var(--bg3);
  color:var(--tx2);font-weight:600;font-size:13px;transition:all .2s;
  font-family:'Manrope',sans-serif;
}
.synth-tabs button.active{background:var(--ac);color:#fff;border-color:var(--ac);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.synth-tabs button:hover:not(.active){border-color:var(--ac);color:var(--ac)}
.synth-pane{display:none;text-align:center;margin:14px 0}
.synth-pane.active{display:block}
.synth-pane img{max-width:100%;border-radius:var(--Rs);cursor:zoom-in;box-shadow:var(--sh);transition:box-shadow .2s}
.synth-pane img:hover{box-shadow:var(--shH)}

/*===================== QUIZ =====================*/
.qq{
  background:var(--bg2);border:1px solid var(--bd);border-radius:var(--R);
  padding:22px 26px;margin-bottom:14px;box-shadow:var(--sh);
}
.qqh{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.qqn{
  width:30px;height:30px;border-radius:8px;background:var(--gr);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex-shrink:0;
}
.qqt{font-size:14px;font-weight:600;color:var(--tx);line-height:1.5;flex:1}
.qtg{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 9px;border-radius:12px;white-space:nowrap;flex-shrink:0}
.tqcm{background:#EEF2FF;color:#4338CA}
.tvf{background:#FEF3C7;color:#92400E}
.ttr{background:#E0F2FE;color:#0369A1}
.tdnd{background:#FCE7F3;color:#9D174D}
[data-theme="sombre"] .tqcm{background:#1E2348;color:#818CF8}
[data-theme="sombre"] .tvf{background:#2A2410;color:#FBBF24}
[data-theme="sombre"] .ttr{background:#0C2A3E;color:#38BDF8}
[data-theme="sombre"] .tdnd{background:#2A1028;color:#F472B6}
.qo{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.qop{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-radius:var(--Rs);background:var(--qB);border:2px solid transparent;
  font-size:13px;color:var(--tx2);font-weight:500;cursor:pointer;transition:all .2s;
}
.qop:hover{border-color:var(--ac);background:var(--qBH);color:var(--tx)}
.qop.sel{border-color:var(--ac);background:var(--acL);color:var(--ac);font-weight:600}
.qop.ok{border-color:var(--ok)!important;background:var(--okB)!important;color:var(--ok)!important}
.qop.no{border-color:var(--ko)!important;background:var(--koB)!important;color:var(--ko)!important}
.ol{
  width:26px;height:26px;border-radius:7px;background:var(--bg3);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;transition:all .2s;
}
.qop.sel .ol{background:var(--ac);color:#fff}
.qop.ok .ol{background:var(--ok);color:#fff}
.qop.no .ol{background:var(--ko);color:#fff}
.vfo{display:flex;gap:10px;margin-top:12px}
.vfb{
  flex:1;padding:13px;border-radius:var(--Rs);background:var(--qB);
  border:2px solid transparent;font-size:13.5px;font-weight:700;
  text-align:center;cursor:pointer;transition:all .2s;color:var(--tx2);
}
.vfb:hover{border-color:var(--ac);background:var(--qBH)}
.vfb.sel{border-color:var(--ac);background:var(--acL);color:var(--ac)}
.vfb.ok{border-color:var(--ok)!important;background:var(--okB)!important;color:var(--ok)!important}
.vfb.no{border-color:var(--ko)!important;background:var(--koB)!important;color:var(--ko)!important}
.gpt{font-size:13.5px;line-height:2.4;color:var(--tx2);margin-top:10px}
.gin{
  display:inline-block;border:none;border-bottom:2px dashed var(--ac);
  background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--ac);width:130px;padding:2px 4px;text-align:center;outline:none;transition:border-color .2s;
}
.gin:focus{border-bottom-style:solid;border-color:var(--ac2)}
.gin.ok{border-color:var(--ok)!important;color:var(--ok)!important;border-bottom-style:solid}
.gin.no{border-color:var(--ko)!important;color:var(--ko)!important;border-bottom-style:solid}
.ddc{margin-top:12px}
.dds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;min-height:40px;padding:10px;background:var(--bg3);border-radius:var(--Rs);border:1px dashed var(--bd)}
.ddi{
  padding:7px 14px;background:var(--bg2);border:2px solid var(--bd);
  border-radius:var(--Rx);font-size:12.5px;font-weight:600;color:var(--tx);
  cursor:grab;user-select:none;transition:all .2s;touch-action:none;
}
.ddi:hover{border-color:var(--ac);background:var(--acL)}
.ddi.dragging{opacity:.4;transform:scale(.95)}
.ddi.placed{background:var(--acL);border-color:var(--ac);color:var(--ac);cursor:pointer}
.ddi.dok{background:var(--okB)!important;border-color:var(--ok)!important;color:var(--ok)!important}
.ddi.dno{background:var(--koB)!important;border-color:var(--ko)!important;color:var(--ko)!important}
.ddi.picked{outline:3px solid var(--ac);outline-offset:2px}
.ddt{display:flex;flex-direction:column;gap:8px}
.ddr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ddl{font-size:12.5px;color:var(--tx2);font-weight:500;min-width:130px}
.ddz{
  min-width:120px;min-height:38px;padding:6px 10px;background:var(--bg3);
  border:2px dashed var(--bd);border-radius:var(--Rx);
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;font-size:11px;color:var(--tx3);
}
.ddz.over{border-color:var(--ac);background:var(--acL);border-style:solid}
.ddz.has{border-style:solid;border-color:var(--ac)}
.qfb{margin-top:10px;padding:10px 14px;border-radius:var(--Rs);font-size:12px;font-weight:500;display:none;line-height:1.6}
.qfb.show{display:block}
.qfb.ofb{background:var(--okB);color:var(--ok);border:1px solid var(--ok)}
.qfb.kfb{background:var(--koB);color:var(--ko);border:1px solid var(--ko)}

/*===================== BOUTONS =====================*/
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  border-radius:var(--Rs);font-size:13px;font-weight:700;
  transition:all .2s;border:2px solid transparent;
  font-family:'Manrope',sans-serif;
}
.bp{
  background:var(--gr);color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.bp:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.bs{background:var(--bg3);color:var(--tx);border-color:var(--bd)}
.bs:hover{border-color:var(--ac);color:var(--ac);background:var(--acL)}
.qa{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

/* Score box */
.sb{
  text-align:center;padding:28px;background:var(--bg2);
  border:1px solid var(--bd);border-radius:var(--R);
  box-shadow:var(--sh);margin-top:14px;
}
.sv{
  font-size:42px;font-weight:900;
  background:var(--gr);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  font-family:'Manrope',sans-serif;
}
.sl{font-size:12px;color:var(--tx3);margin-top:2px}
.sm{font-size:13.5px;color:var(--tx2);margin-top:9px;font-weight:500}

/* Score final */
.fsc{
  text-align:center;padding:36px;background:var(--gr);color:#fff;
  border-radius:var(--R);margin-top:20px;position:relative;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.16);
}
.fsc::before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.04),transparent,rgba(255,255,255,.04),transparent);animation:rot 12s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.fsv{font-size:52px;font-weight:900;position:relative;font-family:'Manrope',sans-serif}
.fsn{font-size:28px;font-weight:800;position:relative;margin-top:4px;font-family:'Manrope',sans-serif}
.fsl{font-size:13px;opacity:.85;position:relative}
.fss{font-size:24px;margin-top:8px;position:relative;letter-spacing:3px}
.fsm{font-size:14px;font-weight:600;margin-top:14px;position:relative;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.65}
.fsd{margin-top:20px;text-align:left;position:relative}
.fsd p{font-size:13px;font-weight:700;margin-bottom:9px}
.fcat{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:12.5px}

/* Navigation inter-chapitres — deux rangées (B27)
   Rangée 1, l'axe des chapitres : précédent à gauche, suivant à droite.
   Rangée 2, les sorties : reprendre le cours et retour au module, centrées
   et discrètes.
   Les 46 pages de cours portent cinq structures HTML différentes dans
   .nav-chap ; c'est normaliserFinChapitre() (cejm-shell.js) qui range chaque
   bouton dans la bonne rangée, ce CSS ne fait que les disposer. */
.nav-chap{display:flex;flex-direction:column;gap:16px;margin-top:30px;padding-top:24px;border-top:2px solid var(--bd)}
.nav-chap-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* Pousse la progression à droite même quand la rangée n'a qu'un bouton. */
.nav-chap-row>.nav-chap-next{margin-left:auto}
.nav-chap-esc{display:flex;gap:8px 22px;align-items:center;justify-content:center;flex-wrap:wrap}
.nav-chap-esc:empty{display:none}
.nav-chap-lien{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:var(--Rs);
  font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:600;
  color:var(--tx3);background:transparent;border:1px solid transparent;
  cursor:pointer;transition:color .2s,background .2s,border-color .2s;
}
.nav-chap-lien:hover{color:var(--ac);background:var(--acL);border-color:var(--bd)}

/* Navigation de fin de section — une rangée (B27-bis)
   Même grammaire que .nav-chap, à l'échelle d'une section : le retour à
   gauche, l'action de progression à droite. Sous le Test Final, la rangée
   d'actions du quiz (.qa) reste au-dessus, calée à gauche — « Obtenir ma
   note » en primaire, « Recommencer » en secondaire.
   Cette rangée était portée par cinq conteneurs selon les modules (.nav-b,
   .nav-btn, .nav-act, un style en ligne, et .qa sur CEJM 07 à 13), dont trois
   sans aucune règle CSS : les boutons y restaient collés en flux inline.
   C'est normaliserNavSection() (cejm-shell.js) qui pose .nav-sec sur chacun
   d'eux ; ce CSS ne fait que les disposer. */
.nav-sec{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.nav-sec>.nav-sec-next{margin-left:auto}
/* Retour : le poids le plus faible de la zone. Il ramène en arrière, alors que
   « Recommencer », en secondaire juste au-dessus, agit sur le quiz en cours —
   les deux portaient jusqu'ici le même habillage .bs. */
.nav-sec>.nav-sec-back{background:transparent;color:var(--tx2);border-color:var(--bd)}
.nav-sec>.nav-sec-back:hover{background:var(--acL);border-color:var(--ac);color:var(--ac)}

/*===================== ZOOM IMAGE =====================*/
.zm{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;cursor:zoom-out;opacity:0;transition:opacity .3s}
.zm.open{display:flex;opacity:1}
.zm img{max-width:92vw;max-height:90vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.zc{position:absolute;top:16px;right:20px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;border:1px solid rgba(255,255,255,.2);transition:all .2s}
.zc:hover{background:rgba(255,255,255,.22)}

/*===================== MODALE AIDE =====================*/
.mov{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .3s}
.mov.open{display:flex;opacity:1}
.mbx{background:var(--bg2);border-radius:var(--R);padding:28px;max-width:520px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.2);border:1px solid var(--bd)}
.mbx h2{font-size:17px;font-weight:800;margin-bottom:14px;color:var(--tx);font-family:'Manrope',sans-serif}
.mbx p:not(.ttl){font-size:13px;color:var(--tx2);line-height:1.7;margin-bottom:9px}
.mbx kbd{display:inline-block;padding:2px 7px;background:var(--bg3);border:1px solid var(--bd);border-radius:5px;font-size:11px;font-weight:600;color:var(--tx2)}
.mcl{float:right;width:34px;height:34px;border-radius:8px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--tx2);border:1px solid var(--bd);transition:all .2s}
.mcl:hover{background:var(--koB);color:var(--ko);border-color:var(--ko)}
.divr{height:1px;background:var(--bd);margin:16px 0}
.aide-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--bd);font-size:.87rem}
.aide-row:last-child{border-bottom:none}
.aide-row span{color:var(--tx2)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:3px 9px;border-radius:14px;background:var(--acL);color:var(--ac)}
.tag-ok{background:var(--okB);color:var(--ok)}

/*===================== SPEED BADGE =====================*/
.speed-badge{position:absolute;top:12px;right:12px;z-index:50;background:rgba(0,0,0,.75);color:#fff;font-weight:700;font-size:14px;padding:4px 10px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .15s;font-family:'Inter',system-ui,sans-serif}

/*===================== RESPONSIVE =====================*/
@media(max-width:900px){
  .side{transform:translateX(-100%)}
  .side.open{transform:translateX(0)}
  .s-ov.open{display:block;opacity:1}
  .ham{display:flex}
  .main{margin-left:0}
  .topbar{padding:0 14px 0 60px}
  .cnt{padding:18px 14px 28px}
  .cd{padding:18px}
  .fl{flex-direction:column}
  .cg{grid-template-columns:1fr}
  .tc{grid-template-columns:1fr}
  .th-ctrl{padding:4px 8px}
  .th-range{width:60px}
  .th-lbl{font-size:9px;min-width:52px}
  .tbtn-dash{display:none!important}
}
@media(max-width:480px){
  .s-tl{font-size:20px}
  .qop{padding:8px 10px;font-size:12px}
  .ap{flex-direction:column;text-align:center}
  .vfo{flex-direction:column}
  .ddr{flex-direction:column;align-items:flex-start}
}
/* Fin de chapitre sur mobile : une colonne, la progression en tête et en
   pleine largeur — côte à côte, les deux boutons deviennent illisibles dès
   qu'un titre de chapitre est long. */
@media(max-width:600px){
  .nav-chap-row{flex-direction:column;align-items:stretch}
  .nav-chap-row>.btn{width:100%;justify-content:center;text-align:center}
  .nav-chap-row>.nav-chap-next{margin-left:0;order:-1}
  .nav-chap-esc{flex-direction:column;gap:4px}
  .nav-chap-lien{width:100%;justify-content:center}
}
@media print{
  .side,.topbar,.ham,.s-ov,.qa,.th-ctrl,.help-b,.fs-toggle,.s-back,.nav-chap,.tbtn-dash{display:none!important}
  .main{margin-left:0}
  .pnl{display:block!important;animation:none;page-break-inside:avoid}
  body{background:#fff;color:#000}
  .cd{box-shadow:none;border:1px solid #ccc}
}

/* ── TTS — icône lecture ──────────────────────────────────────── */
.tts-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 9999px; border: none;
  background: transparent; cursor: pointer; opacity: .45;
  color: inherit; font-size: .7rem; margin-left: 5px;
  vertical-align: middle; transition: opacity .18s, transform .15s;
  flex-shrink: 0; padding: 0; line-height: 1;
}
.tts-btn:hover { opacity: 1; transform: scale(1.18); }
.tts-btn.tts-on {
  opacity: 1; color: var(--ac);
  animation: tts-pulse .9s ease-in-out infinite;
}
@keyframes tts-pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* Le contenu du chapitre doit pouvoir retrecir autour des tableaux. */
@media (max-width: 1023px) {
  .app > .main.main-repli-mobile { min-width: 0; }
  .main-repli-mobile .dl-btn { white-space: normal; }
}