/* yt-24 · styles des scènes animées (DA B1 : noir labo, une seule couleur ambre, le reste en gris) */

/* ---- éléments communs ---- */
.tok{position:absolute;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 3px #0b0c0f,0 0 0 5px #2b3038,0 10px 30px rgba(0,0,0,.5)}
.tok.amb{box-shadow:0 0 0 3px #0b0c0f,0 0 0 6px var(--amber),0 0 40px rgba(255,200,87,.35)}
.cap{position:absolute;color:var(--g1);font-weight:700;line-height:1.2}
.cap.w{color:#fff} .cap.a{color:var(--amber)}
.side{position:absolute;left:1440px;top:150px;width:400px}
.side .k{font-size:30px;font-weight:800;color:#fff;line-height:1.15;margin-bottom:14px}
.side .k .a{color:var(--amber)}
.side .t{font-size:24px;font-weight:600;color:var(--g1);line-height:1.3;margin-bottom:12px}
.hero{font-weight:900;letter-spacing:-.04em;line-height:.95}
.legend{position:absolute;display:flex;align-items:center;gap:14px;font-size:24px;font-weight:700;color:var(--g1)}
.legend i{display:inline-block;width:44px;height:8px;border-radius:4px}

/* ---- preuve : capture d'étude + traduction ---- */
.proof{position:absolute;left:80px;top:70px;width:1290px;height:900px}
.proof .doc{position:absolute;left:0;top:0;width:1290px;height:auto;max-height:900px;object-fit:cover;object-position:center top;border-radius:14px;background:#fff;
  box-shadow:0 0 0 1px #2b3038,0 30px 70px rgba(0,0,0,.55)}
.proof .tr{position:absolute;left:40px;right:40px;bottom:40px;border-radius:14px;background:rgba(10,11,14,.95);border:2px solid var(--amber);
  padding:26px 32px;color:#fff;font-size:34px;font-weight:700;line-height:1.3;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.proof .tr small{display:block;margin-top:12px;font-size:20px;color:var(--g2);font-weight:600}
.proof .hl{position:absolute;border-radius:6px;background:rgba(255,200,87,.28);box-shadow:0 0 0 3px var(--amber)}

/* ---- RÈGLES ---- */
.rg-tabs{position:absolute;left:80px;top:46px;width:1760px;display:flex;gap:18px}
.rg-tab{flex:1;height:92px;border-radius:16px;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;gap:18px;
  padding:0 24px;font-size:33px;font-weight:800;color:var(--g2);letter-spacing:-.01em;transition:color .3s,border-color .3s,background .3s,opacity .45s,transform .6s var(--ease)}
.rg-tab b{flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:#262a31;color:var(--g1);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900}
.rg-tab.act{color:#fff;border-color:var(--amber);background:#15161a}
.rg-tab.act b{background:var(--amber);color:#1a1408}
.rg-col{position:absolute;top:0;width:220px;height:1080px}
.rg-bar{position:absolute;left:20px;bottom:300px;width:180px;height:0;border-radius:12px 12px 4px 4px;
  background:linear-gradient(180deg,#5d636e,#2c3038);transition:height 1s var(--ease),background .4s,box-shadow .4s}
.rg-bar.max{background:linear-gradient(180deg,#FFD678,#D8922E);box-shadow:0 0 50px rgba(255,200,87,.35)}
.rg-val{position:absolute;left:-40px;right:-40px;bottom:100%;margin-bottom:12px;text-align:center;font-size:56px;font-weight:900;letter-spacing:-.03em;color:#fff;
  transition:opacity .3s}
.rg-bar.max .rg-val{color:var(--amber)}
.rg-col .tok{left:50px;top:800px;width:120px;height:120px}
.rg-nm{position:absolute;left:-30px;right:-30px;top:936px;text-align:center;font-size:30px;font-weight:800;color:#fff}
.rg-po{position:absolute;left:-40px;right:-40px;top:975px;text-align:center;font-size:23px;font-weight:600;color:var(--g1)}
.rg-base{position:absolute;left:110px;width:1290px;top:780px;height:3px;background:#3a3f49;border-radius:2px}
.rg-mode{position:absolute;left:1440px;top:250px;width:400px;height:64px;border-radius:32px;background:var(--panel);border:1px solid var(--line2);display:flex;padding:5px}
.rg-mode span{flex:1;display:flex;align-items:center;justify-content:center;border-radius:28px;font-size:23px;font-weight:800;color:var(--g2);transition:background .35s,color .35s}
.rg-mode span.on{background:#fff;color:#111}
.rg-mode.por span.m2{background:var(--amber);color:#1a1408} .rg-mode.por span.m1{background:transparent;color:var(--g2)}
.rg-q-row{position:absolute;left:110px;width:1300px;height:76px}
.rg-q-row .tok{left:0;top:4px;width:68px;height:68px}
.rg-q-row .nm{position:absolute;left:88px;top:18px;width:230px;font-size:29px;font-weight:800;color:#fff;white-space:nowrap}
.rg-q-bar{position:absolute;left:330px;top:24px;height:28px;width:0;border-radius:14px;background:#3a3f49;transition:width 1.1s var(--ease)}
.rg-q-bar.mid{background:#8b93a1} .rg-q-bar.top{background:linear-gradient(90deg,#D8922E,#FFC857);box-shadow:0 0 30px rgba(255,200,87,.3)}
.rg-q-val{position:absolute;top:14px;font-size:36px;font-weight:900;color:#fff;letter-spacing:-.02em;transition:left 1.1s var(--ease)}
.rg-q-line{position:absolute;top:196px;width:0;height:590px;border-left:3px dashed #5a606b}
.rg-q-line.top{border-left-color:var(--amber)}
.rg-q-line em{position:absolute;top:-40px;left:-60px;width:120px;text-align:center;font-style:normal;font-size:24px;font-weight:800;color:var(--g1)}
.rg-q-line.top em{color:var(--amber)}
.rg-g-col{position:absolute;top:0;width:240px;height:1080px}
.rg-g-col .tok{left:60px;top:800px;width:120px;height:120px}
.rg-g-col .rg-nm{left:-20px;right:-20px}
.rg-g-col .rg-po{left:-30px;right:-30px}
.blk{position:absolute;width:40px;height:40px;border-radius:7px;background:#e9e4da;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);
  opacity:0;transform:translateY(-30px) scale(.7);transition:opacity .25s,transform .4s var(--ease)}
.blk.on{opacity:1;transform:none}
.rg-g-val{position:absolute;left:-30px;right:-30px;text-align:center;font-size:52px;font-weight:900;color:#fff;letter-spacing:-.03em}
.rg-g-val small{font-size:26px;font-weight:800;color:var(--g1);margin-left:4px}

/* ---- CUILLÈRES (balance) ---- */
#cu-svg{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:visible}
.cu-res{position:absolute;left:1440px;top:170px;width:420px}
.cu-res .l1{font-size:44px;font-weight:800;color:#fff;line-height:1.1}
.cu-res .eq{font-size:44px;font-weight:800;color:var(--g2);margin:6px 0}
.cu-res .l2{font-size:84px;font-weight:900;color:var(--amber);letter-spacing:-.04em;line-height:1}
.cu-res .l3{font-size:36px;font-weight:800;color:var(--amber);margin-top:4px}
.cu-leg{position:absolute;left:1440px;top:600px;display:flex;align-items:center;gap:16px;font-size:24px;font-weight:700;color:var(--g1)}

/* ---- graphiques (insuline, sucre, faim) ---- */
.chart{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:visible}
.chart .ax{stroke:#3a3f49;stroke-width:2.5;fill:none}
.chart .gr{stroke:#1d2026;stroke-width:1.5;fill:none}
.chart .tk{fill:var(--g2);font-size:22px;font-weight:600}
.chart .tl{fill:var(--g1);font-size:26px;font-weight:800}
.chart .c-a{stroke:var(--amber);stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(255,200,87,.35))}
.chart .c-w{stroke:#e9e4da;stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart .c-g{stroke:#8b93a1;stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart .c-d{stroke-dasharray:4 14}
.chart .zone{fill:rgba(255,200,87,.08)}
.chart .base{stroke:#5a606b;stroke-width:2.5;stroke-dasharray:10 10;fill:none}
.chart .pk{font-size:44px;font-weight:900;letter-spacing:-.03em}
.chart .pk.a{fill:var(--amber)} .chart .pk.w{fill:#fff} .chart .pk.g{fill:var(--g1)}
.chart .lb{font-size:26px;font-weight:800}
.chart .lb.a{fill:var(--amber)} .chart .lb.w{fill:#fff} .chart .lb.g{fill:var(--g1)}

/* ---- FAIM : schéma messagers ---- */
.org{position:absolute;border-radius:24px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:16px}
.org img{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);max-width:82%;max-height:70%;pointer-events:none}
.org span{position:relative;font-size:28px;font-weight:800;color:#fff}
.msg{position:absolute;padding:10px 20px 11px;border-radius:999px;font-size:26px;font-weight:800;white-space:nowrap}
.msg.g{background:#e9e4da;color:#121212}
.msg.a{background:var(--amber);color:#1a1408}
.big-num{position:absolute;font-weight:900;letter-spacing:-.045em;line-height:.9;color:var(--amber)}

/* ---- ŒSTROGÈNE ---- */
.mol{position:absolute;width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:900;letter-spacing:-.02em}
.mol.t{background:var(--amber);color:#1a1408;box-shadow:0 0 24px rgba(255,200,87,.4)}
.mol.e{background:#e9e4da;color:#121212}
.cell{position:absolute;border-radius:50%;background:radial-gradient(circle at 42% 38%,#fff4cf 0,#f2d48a 38%,#c9a44f 70%,#7a5f25 100%);
  box-shadow:0 0 0 6px rgba(255,200,87,.12),0 0 80px rgba(255,200,87,.18);transition:all 1.2s var(--ease)}
.cell .nu{position:absolute;right:16%;bottom:14%;width:16%;height:16%;border-radius:50%;background:#7a5f25;opacity:.8}
.enz{position:absolute;padding:12px 22px 13px;border-radius:14px;background:#0d0e11;border:2px solid var(--amber);color:var(--amber);font-size:28px;font-weight:900}

/* correctifs relecture du 14/11 */
.side .legend{position:static}

/* ---- MÉCANISMES ANIMÉS (15/11) ---- */
.vessel{border-radius:75px;background:linear-gradient(180deg,#2a0a0d 0,#5a1519 30%,#6b1a1f 50%,#5a1519 70%,#2a0a0d 100%);
  box-shadow:inset 0 0 0 3px #7a2228,inset 0 0 40px rgba(0,0,0,.6),0 0 70px rgba(170,30,40,.22)}
.org.mech{justify-content:center;padding:0 18px;text-align:center;gap:8px}
.org.mech span{font-size:32px}
.org.mech em{position:relative;font-style:normal;font-size:22px;font-weight:700;color:var(--g1)}
.msg.d{background:#1d2026;color:#e9e4da;box-shadow:0 0 0 2px #8b93a1}