*{margin:0;padding:0;box-sizing:border-box}
:root{--bl:#2563EB;--bl2:#3B82F6;--bl3:#1E3A8A;--blL:#DBEAFE;--blLL:#EFF6FF;--rs:#EC4899;--rs2:#F472B6;--rs3:#BE185D;--rsL:#FCE7F3;--jn:#F59E0B;--jn2:#FBBF24;--jn3:#92400E;--jnL:#FEF3C7;--ok:#10B981;--err:#EF4444;--noir:#1E293B;--gri:#64748B}
body{font-family:Poppins,sans-serif;color:var(--noir);overflow-x:hidden;background:var(--blLL)}
h1,h2,h3,h4{font-family:Fredoka,sans-serif;line-height:1.2}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none}
.hd{position:fixed;top:0;left:0;right:0;z-index:999;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--bl3);border-bottom:3px solid var(--rs)}
.logo{display:flex;align-items:center;gap:8px;cursor:pointer;color:#fff;font-family:Fredoka,sans-serif;font-size:20px;margin-left:1cm}
.logo b{color:var(--jn2)}
.logoI{width:34px;height:34px;background:linear-gradient(135deg,var(--bl2),var(--rs));border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;margin-right:2px}
.nv{display:flex;gap:4px}
.nb{padding:6px 12px;border-radius:7px;font-size:12px;font-weight:600;color:rgba(255,255,255,.7);background:0;transition:.3s}
.nb:hover,.nb.on{background:var(--rs);color:#fff}
.brg{display:none;background:0;color:#fff;font-size:20px}
@media(max-width:700px){.nv{display:none;position:absolute;top:56px;left:0;right:0;background:var(--bl3);flex-direction:column;padding:8px;border-bottom:3px solid var(--rs)}.nv.op{display:flex}.brg{display:block}}
.pbr{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--bl2),var(--rs),var(--jn2));z-index:1001;transition:width .4s}
.page{display:none;animation:fi .4s ease}
.page.act{display:block}
@keyframes fi{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.homeH{background:linear-gradient(135deg,var(--bl3),var(--bl),#4f46e5);min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 16px 40px;position:relative;overflow:hidden}
.homeH::before{content:"";position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(236,72,153,.18),transparent 70%);top:-80px;right:-80px;border-radius:50%}
.homeH::after{content:"";position:absolute;width:350px;height:350px;background:radial-gradient(circle,rgba(251,191,36,.12),transparent 70%);bottom:-60px;left:-60px;border-radius:50%}
.homeH h1{font-size:clamp(28px,7vw,60px);color:#fff;margin-bottom:8px;position:relative;z-index:1}
.homeH h1 .rc{color:var(--rs2)}.homeH h1 .jc{color:var(--jn2)}
.homeP{max-width:580px;font-size:15px;color:rgba(255,255,255,.85);line-height:1.7;margin-bottom:28px;position:relative;z-index:1}
.home_no_commit{max-width:640px;margin:32px auto 0;padding:18px 22px;font-size:13px;line-height:1.7;color:#fff;background:var(--bl);border:1px solid rgba(255,255,255,.35);border-radius:14px;text-align:center;position:relative;z-index:1;box-shadow:inset 0 1px 3px rgba(30,58,138,.15)}
.home_no_commit b{color:var(--jn2);font-size:14px}
.home_video_wrap{width:100%;max-width:800px;margin:0 auto 40px;position:relative;z-index:1}
.home_video_ratio{position:relative;width:100%;padding-bottom:56.25%;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.home_video_ratio iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
#home_video_sound{
position:absolute; bottom:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:50%;
border:none; cursor:pointer; background:rgba(0,0,0,.55); color:#fff; font-size:16px;
display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
#home_video_sound:hover{background:rgba(0,0,0,.75)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;max-width:900px;width:100%;position:relative;z-index:1}
.ccard{border-radius:18px;padding:24px 16px;text-align:center;cursor:pointer;transition:.35s;color:#fff}
.ccard:nth-child(1){background:linear-gradient(135deg,var(--bl2),#6366f1)}
.ccard:nth-child(2){background:linear-gradient(135deg,var(--rs),#e879f9)}
.ccard:nth-child(3){background:linear-gradient(135deg,var(--jn),#f97316)}
.ccard:nth-child(4){background:linear-gradient(135deg,var(--rs3),var(--bl3))}
.ccard:nth-child(5){background:linear-gradient(135deg,#7C3AED,#EC4899)}
.ccard:nth-child(6){background:linear-gradient(135deg,#92400E,var(--jn))}
.ccard:nth-child(7){background:linear-gradient(135deg,#0EA5E9,#1E293B)}
.ccard:nth-child(8){background:linear-gradient(135deg,#065f46,#000000)}
.chH.c7{background:linear-gradient(135deg,#065f46,#000000)}
body.graphilaser-active{background:#000000}
#gl_title{color:#00ff88!important}
.ccard:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 32px rgba(0,0,0,.25)}
.cnum{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-family:Fredoka,sans-serif;font-size:18px;font-weight:700;margin:0 auto 8px}
.ccard h3{font-size:16px;margin-bottom:3px}.ccard p{font-size:12px;opacity:.7}
.carr{margin-top:8px;color:var(--jn2);font-size:14px;transition:.3s}.ccard:hover .carr{transform:translateX(5px)}
.featS{background:var(--jnL);padding:40px 16px}
.featS h2{text-align:center;font-size:24px;margin-bottom:24px;color:var(--jn3)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;max-width:900px;margin:0 auto}
.fi{text-align:center;padding:16px 10px;background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.05);transition:.3s}
.fi:hover{transform:translateY(-3px)}
.fic{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;margin:0 auto 6px}
.fi:nth-child(1) .fic{background:var(--bl2)}.fi:nth-child(2) .fic{background:var(--rs)}.fi:nth-child(3) .fic{background:var(--jn)}.fi:nth-child(4) .fic{background:var(--ok)}.fi:nth-child(5) .fic{background:linear-gradient(135deg,var(--bl2),var(--rs))}
.fi h4{font-size:13px;margin-bottom:2px}.fi p{font-size:11px;color:var(--gri)}
.chH{padding:96px 16px 24px;text-align:center;color:#fff}
.chH.c1{background:linear-gradient(135deg,var(--bl3),var(--bl2))}
.chH.c2{background:linear-gradient(135deg,var(--rs3),var(--rs))}
.chH.c3{background:linear-gradient(135deg,var(--jn3),var(--jn))}
.chH.c4{background:linear-gradient(135deg,var(--bl3),var(--rs3))}
.chH.c6{background:linear-gradient(135deg,#92400E,var(--jn))}
.chH h1{font-size:clamp(22px,5vw,36px);margin-bottom:4px}
#chap5-title,#chap5-sub{transition:color .8s ease}
.chH p{font-size:14px;opacity:.8}
.snv{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;padding:10px 12px;background:var(--rsL);border-bottom:2px solid var(--rs2);position:sticky;top:56px;z-index:50}
.snb{padding:6px 14px;border-radius:50px;font-size:11px;font-weight:600;background:#fff;color:var(--gri);border:2px solid transparent;transition:.25s}
.snb:hover{background:var(--blL);color:var(--bl);border-color:var(--bl2)}
.snb.on{background:var(--bl2);color:#fff;border-color:var(--bl2)}
.snb.dn{background:var(--ok);color:#fff;border-color:var(--ok)}
.lesc{max-width:840px;margin:0 auto;padding:24px 14px 60px}
.lc{border-radius:16px;padding:20px;margin-bottom:14px;box-shadow:0 2px 14px rgba(0,0,0,.06);border-left:4px solid var(--bl2);background:#fff}
.lc.tip{border-left-color:var(--jn);background:linear-gradient(135deg,var(--jnL),#fff)}
.lc.ill{border-left-color:var(--rs);background:linear-gradient(135deg,var(--rsL),#fff)}
.lc.qz{border-left-color:var(--ok)}
.lc.ex{border-left-color:var(--bl3);background:linear-gradient(135deg,var(--blL),#fff)}
.clb{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:50px;font-size:10px;font-weight:700;color:#fff;margin-bottom:8px}
.clb.lc{background:var(--bl2)}.clb.li{background:var(--rs)}.clb.lt{background:var(--jn)}.clb.lq{background:var(--ok)}.clb.le{background:var(--bl3)}
.lc h3{font-size:16px;margin-bottom:8px}
.lc p,.lc li{font-size:13px;line-height:1.7;color:#334155}
.lc ul,.lc ol{padding-left:16px;margin:4px 0}.lc li{margin-bottom:2px}
.ebox{background:var(--blLL);border-radius:10px;padding:14px;margin:8px 0;font-size:12px}
.ebox h4{margin-bottom:4px;color:var(--bl3)}
.qq{font-size:14px;font-weight:600;margin-bottom:10px}
.qos{display:flex;flex-direction:column;gap:6px}
.qo{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:var(--blLL);cursor:pointer;transition:.25s;font-size:13px;border:2px solid transparent}
.qo:hover{background:var(--blL);border-color:var(--bl2)}
.qo.ok{background:#d1fae5;border-color:var(--ok);color:#065f46}
.qo.ko{background:#fee2e2;border-color:var(--err);color:#991b1b}
.qo .ql{width:26px;height:26px;border-radius:50%;background:var(--bl2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}
.qo.ok .ql{background:var(--ok)}.qo.ko .ql{background:var(--err)}
.qfb{margin-top:10px;padding:10px;border-radius:10px;font-size:12px;display:none}.qfb.sh{display:block;animation:fi .3s}
.qfb.g{background:#d1fae5;color:#065f46}.qfb.b{background:#fee2e2;color:#991b1b}
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border-radius:10px;font-size:12px;font-weight:600;transition:.3s}
.bbl{background:var(--bl2);color:#fff}.bbl:hover{background:var(--bl3)}
.brs{background:var(--rs);color:#fff}.bok{background:var(--ok);color:#fff}
.bol{background:0;border:2px solid var(--bl2);color:var(--bl2)}.bol:hover{background:var(--bl2);color:#fff}
.ccbtn{border:2px solid transparent;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:.2s}
.ccbtn:hover{transform:scale(1.06)}
.dit.ccchip{border-style:solid;border-color:rgba(255,255,255,.5);font-weight:700}
.dit.ccchip:hover{border-color:rgba(255,255,255,.9)}
.scr{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:50px;background:var(--jnL);color:var(--jn3);font-weight:700;font-size:12px}
.exa{background:var(--blLL);border-radius:10px;padding:14px;margin-top:10px;min-height:80px}
.exa p{margin-bottom:6px;font-weight:500}
.dit{padding:6px 12px;border-radius:7px;background:#fff;border:2px dashed var(--bl2);cursor:pointer;font-size:12px;font-weight:500;transition:.2s;user-select:none;display:inline-block;margin:3px}
.dit:hover{border-color:var(--rs);background:var(--rsL)}
.dit.pl{opacity:.35;pointer-events:none}
.dit.csel{border-color:var(--rs);background:var(--rsL);box-shadow:0 0 0 2px var(--rs2)}
.dz{min-height:40px;border:2px dashed var(--gri);border-radius:10px;display:flex;flex-wrap:wrap;gap:5px;padding:8px;align-items:center;justify-content:center;margin:6px 0;transition:.3s}
.dz .pi{padding:4px 10px;border-radius:7px;background:var(--bl2);color:#fff;font-size:11px;font-weight:500}
.sim{width:80px;height:80px;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;text-align:center;padding:5px;cursor:pointer;border:3px solid var(--blL);transition:.25s}
.sim:hover{border-color:var(--bl2);transform:scale(1.04)}.sim.sg{border-color:var(--ok);background:#d1fae5}.sim.sb{border-color:var(--err);background:#fee2e2}
.sim i{font-size:22px;margin-bottom:2px;display:block}
.ts{padding:10px;background:var(--blLL);border-radius:7px;margin:4px 0;cursor:pointer;border:2px solid transparent;transition:.25s;font-size:12px}
.ts:hover{border-color:var(--bl2)}.ts.ch{border-color:var(--ok);background:#d1fae5}
.ei{padding:8px 12px;background:#fff;border-radius:7px;margin:3px 0;cursor:pointer;border:2px solid var(--blL);transition:.25s;font-size:12px}
.ei:hover{border-color:var(--err)}.ei.fn{border-color:var(--ok);background:#d1fae5;text-decoration:line-through;opacity:.5}
.circ{width:40px;height:40px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:.25s;display:inline-block;margin:2px}
.circ:hover{transform:scale(1.12)}.circ.sl{border-color:var(--noir);transform:scale(1.15);box-shadow:0 0 0 2px var(--ok)}
.tint{position:absolute;width:16px;height:16px;border-radius:50%;background:#DC2626;border:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.3);pointer-events:none}
.tobj{display:flex;align-items:center;justify-content:center;padding:8px;background:#fff;border-radius:10px;border:2px solid #e2e8f0;cursor:grab;touch-action:none;transition:.2s}
.tobj:hover{border-color:var(--bl2);transform:scale(1.06)}
.tobj:active{cursor:grabbing}
.msurf{touch-action:none}
.msw{width:24px;height:24px;border-radius:6px;cursor:pointer;border:2px solid transparent;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.2s}
.msw:hover{transform:scale(1.12)}
.msw.on{box-shadow:0 0 0 3px var(--bl2)}
.msw-w{border-color:#cbd5e1}
.mplaced{position:absolute}
.mrh{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;background:#2563EB;border:2px solid #fff;border-radius:4px;cursor:se-resize;box-shadow:0 1px 4px rgba(0,0,0,.3);z-index:5}
.lks{display:flex;justify-content:center;gap:7px;margin:10px 0}
.lk{width:30px;height:30px;border-radius:50%;border:3px solid #94a3b8;display:flex;align-items:center;justify-content:center;font-size:13px;color:#94a3b8;transition:.3s}
.lk.op{border-color:var(--ok);color:var(--ok);background:#d1fae5}
.einp{display:flex;gap:5px;justify-content:center;margin:6px 0}
.einp input{padding:6px 12px;border-radius:7px;border:2px solid #cbd5e1;font-size:13px;font-family:inherit;text-align:center;min-width:140px}
.einp input:focus{border-color:var(--bl2);outline:none}
.dipl{background:linear-gradient(135deg,var(--jnL),#fff,var(--rsL));border:3px solid var(--jn);border-radius:16px;padding:24px;text-align:center;margin:12px 0}
.dipl h2{color:var(--bl3);font-size:22px;margin-bottom:4px}
.dseal{width:60px;height:60px;background:linear-gradient(135deg,var(--jn),var(--rs));border-radius:50%;margin:10px auto;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff}
/* ===== STYLES ATELIER PAINT 1.1 ===== */
.paint-workshop{background:#fff;border-radius:16px;padding:16px;margin-top:16px;border:2px solid #e2e8f0;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.paint-workshop .consigne{font-size:13px;background:#FCE7F3;padding:10px 14px;border-radius:8px;margin-bottom:12px;border-left:4px solid #EC4899}
.paint-workshop .consigne i{color:#EC4899;margin-right:6px}
.paint-shape-btn{padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;border:2px solid #e2e8f0;background:#fff;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:4px}
.paint-shape-btn:hover{background:#f0f0f0;border-color:#3B82F6}
.paint-shape-btn.active{background:#3B82F6;color:#fff;border-color:#3B82F6}
.paint-shape-btn.calme{background:#DBEAFE;border-color:#3B82F6}
.paint-shape-btn.danger{background:#FEF3C7;border-color:#F59E0B}
.paint-color-swatch{width:32px;height:32px;border-radius:50%;border:2px solid #e2e8f0;cursor:pointer;transition:.2s}
.paint-color-swatch:hover{transform:scale(1.12)}
.paint-color-swatch.active{border-color:#1E293B;transform:scale(1.15);box-shadow:0 0 0 2px #10B981}
.paint-actions{display:flex;gap:8px;justify-content:center;margin:8px 0}
.paint-actions button{padding:4px 14px;border-radius:6px;font-size:12px;font-weight:600;border:1px solid #e2e8f0;background:#fff;cursor:pointer}
.paint-actions .btn-clear{background:#fee2e2;color:#ef4444;border-color:#fecaca}
.paint-actions .btn-export{background:#3B82F6;color:#fff;border-color:#3B82F6}
.paint-canvas-wrap{display:flex;justify-content:center}
.paint-canvas-wrap canvas{border:2px solid #cbd5e1;border-radius:10px;background:#fff;max-width:100%;cursor:crosshair}
/* ===== STYLES ATELIER AVANCÉ 4.5 ===== */
.paint-advanced{background:#fff;border-radius:16px;padding:16px;margin-top:20px;border:2px solid #e2e8f0;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.paint-advanced .consigne{font-size:13px;background:#FCE7F3;padding:10px 14px;border-radius:8px;margin-bottom:12px;border-left:4px solid #EC4899}
.paint-advanced .toolbar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px}
.paint-advanced .toolbar button{padding:4px 12px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;font-size:12px;cursor:pointer;transition:.2s}
.paint-advanced .toolbar button:hover{background:#f0f0f0}
.paint-advanced .toolbar button.active{background:#3B82F6;color:#fff;border-color:#3B82F6}
.paint-advanced .palette{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:10px}
.paint-advanced .palette .swatch{width:28px;height:28px;border-radius:50%;border:2px solid #e2e8f0;cursor:pointer;transition:.2s}
.paint-advanced .palette .swatch:hover{transform:scale(1.1)}
.paint-advanced .palette .swatch.active{border-color:#1E293B;transform:scale(1.15)}
.paint-advanced .canvas-wrap{display:flex;justify-content:center}
.paint-advanced .canvas-wrap canvas{border:2px solid #cbd5e1;border-radius:10px;background:#fff;max-width:100%;cursor:crosshair}
.paint-advanced .actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.paint-advanced .actions button{padding:4px 14px;border-radius:6px;font-size:12px;font-weight:600;border:1px solid #e2e8f0;background:#fff;cursor:pointer}
.paint-advanced .actions .btn-clear{background:#fee2e2;color:#ef4444;border-color:#fecaca}
.paint-advanced .actions .btn-export{background:#3B82F6;color:#fff;border-color:#3B82F6}
.paint-advanced .actions .btn-import{background:#10B981;color:#fff;border-color:#10B981}
.paint-advanced .size-control{display:flex;align-items:center;gap:6px;font-size:12px}
.paint-advanced .size-control input[type="range"]{width:80px}
.paint-advanced .text-options{display:flex;gap:4px;align-items:center;justify-content:center;margin-bottom:6px}
.paint-advanced .text-options input{width:50px;padding:2px 4px;font-size:12px;border:1px solid #e2e8f0;border-radius:4px}
.paint-advanced .text-options button{font-weight:600;padding:2px 8px;border-radius:4px;border:1px solid #e2e8f0;background:#fff;font-size:12px}
.ft{background:var(--bl3);color:rgba(255,255,255,.6);padding:24px 14px;text-align:center;border-top:3px solid var(--jn2)}
.ft a{color:rgba(255,255,255,.6);transition:.3s;font-size:12px}.ft a:hover{color:var(--jn2)}
.ftc{font-size:11px;opacity:.5;margin-top:6px}
.tst{position:fixed;bottom:16px;right:16px;padding:10px 18px;border-radius:10px;color:#fff;font-weight:600;font-size:12px;z-index:1100;transform:translateY(80px);opacity:0;transition:.4s;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.tst.sh{transform:translateY(0);opacity:1}
.tst.suc{background:var(--ok)}.tst.err{background:var(--err)}.tst.inf{background:var(--bl2)}
.anx{max-width:700px;margin:0 auto;padding:94px 14px 60px}
.anx h1{font-size:24px;margin-bottom:16px;color:var(--bl3)}
@media(max-width:600px){.cgrid{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.cgrid{grid-template-columns:1fr}}
/* ============ MOTEUR ATELIER (nouveaux exercices interactifs) ============ */
.atl{margin-top:14px;padding-top:14px;border-top:2px dashed #cbd5e1}
.atl-title{font-size:11px;font-weight:700;color:var(--gri);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.atl-instr{font-size:13px;font-weight:600;background:var(--blLL);border-left:4px solid var(--bl2);padding:12px 14px;border-radius:10px;margin-bottom:12px;line-height:1.6}
.atl-badges{display:flex;gap:8px;margin-bottom:10px}
.atl-badge{padding:8px 18px;border-radius:20px;font-weight:700;font-family:'Fredoka',sans-serif;font-size:13px}
.atl-infobar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.atl-info-item{flex:1;min-width:90px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:6px 10px;text-align:center}
.atl-info-lbl{display:block;font-size:9px;color:var(--gri);text-transform:uppercase;letter-spacing:.5px}
.atl-info-val{display:block;font-size:12px;font-weight:700;color:var(--noir)}
.atl-wrap{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.atl-tray{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;max-width:90px;justify-content:center}
.atl-tray:has(button.txtbtn){max-width:190px}
.atl-tray button{width:38px;height:38px;border-radius:8px;background:#fff;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;padding:2px}
.atl-tray button.txtbtn{width:84px;height:36px}
.atl-tray button:hover{background:var(--blLL)}
.atl-swwrap{display:flex;flex-direction:column;align-items:center;gap:2px}
.atl-swlbl{font-size:8px;color:var(--gri);font-weight:600;text-transform:uppercase}
.atl-canvas-box{position:relative;border:2px solid #1E293B;border-radius:4px;touch-action:none;max-width:100%}
.atl-canvas-box canvas{display:block;cursor:crosshair;max-width:100%;height:auto;touch-action:none}
.atl-toolbar{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.atl-toolbar button{padding:5px 8px;border-radius:6px;background:#fff;border:1px solid #e2e8f0;font-size:11px;display:flex;align-items:center;gap:4px}
.atl-toolbar button.on{background:var(--bl2);color:#fff;border-color:var(--bl2)}
.atl-opts{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center;margin:6px 0;font-size:10px}
.atl-opts input[type=range]{width:70px}
.atl-opts select{font-size:10px;padding:2px 4px;border-radius:4px;border:1px solid #e2e8f0}
.atl-pal{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-top:8px;padding:8px;background:var(--blLL);border-radius:8px}
.atl-sw{width:24px;height:24px;border-radius:5px;border:2px solid #fff;box-shadow:0 0 0 1px #cbd5e1;cursor:pointer}
.atl-sw.on{box-shadow:0 0 0 2px var(--bl2)}
.atl-mini{width:60px;height:60px;border:2px solid #1E293B;border-radius:4px;margin-left:8px}
.atl-actions{display:flex;gap:4px;justify-content:center;margin-top:6px}
.atl-actions button{padding:5px 10px;border-radius:6px;font-size:11px;background:var(--ok);color:#fff}
.atl-actions button.del{background:var(--err)}

/* ============ CHAPITRE 5 : STUDIO DE JEU (thème néon noir) ============ */
body.chap5-active{background:#000000}
body.chap5-active .chH.c4{background:#000000;border-bottom:2px solid #1E293B}
body.chap5-active .lesc{max-width:840px}
#game-canvas-arena .atl{border-top-color:#1E293B}
#game-canvas-arena .atl-title{color:#94A3B8}
#game-canvas-arena .atl-instr{background:#0F172A!important;border-left-color:#334155!important;font-weight:700;font-size:14px;transition:color .6s ease,text-shadow .6s ease}
#game-canvas-arena .atl-canvas-box{border:3px solid #FFFFFF!important;box-shadow:0 0 22px rgba(255,255,255,.15)}
#game-canvas-arena .atl-toolbar button{border-radius:20px;font-weight:700;border:none;color:#1E293B}
#game-canvas-arena .atl-toolbar button:nth-child(4n+1){background:#FBBF24}
#game-canvas-arena .atl-toolbar button:nth-child(4n+2){background:#EC4899;color:#fff}
#game-canvas-arena .atl-toolbar button:nth-child(4n+3){background:#F97316;color:#fff}
#game-canvas-arena .atl-toolbar button:nth-child(4n){background:#8B5CF6;color:#fff}
#game-canvas-arena .atl-toolbar button.on{outline:3px solid #3B82F6}
#game-canvas-arena .atl-opts{gap:6px}
#game-canvas-arena .opt-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;font-weight:700;color:#1E293B}
#game-canvas-arena .opt-pill:nth-child(4n+1){background:#FBBF24}
#game-canvas-arena .opt-pill:nth-child(4n+2){background:#EC4899;color:#fff}
#game-canvas-arena .opt-pill:nth-child(4n+3){background:#F97316;color:#fff}
#game-canvas-arena .opt-pill:nth-child(4n){background:#8B5CF6;color:#fff}
#game-canvas-arena .opt-pill select,
#game-canvas-arena .opt-pill button{border-radius:10px;border:none;background:rgba(255,255,255,.85);color:#1E293B}
#game-canvas-arena .atl-actions button.verifybtn{background:linear-gradient(135deg,#10B981,#3B82F6);color:#fff;font-weight:700}
#game-canvas-arena .atl-pal{background:#0F172A}
#game-canvas-arena .atl-swlbl{color:#94A3B8}
#game-canvas-arena .atl-tray button{background:#0F172A;border-color:#334155}
#game-canvas-arena .tobj{background:#0F172A;border-color:#334155}

/* Overlay de réussite : message qui s'écrase en 3D */
.success-overlay{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;pointer-events:none;perspective:900px;background:rgba(0,0,0,.35);animation:successFade .6s ease forwards}
.success-overlay.slam-out .success-slam{animation:slamOut .55s cubic-bezier(.55,0,1,.45) forwards}
.success-overlay.slam-out{animation:successFadeOut .6s ease forwards}
.success-slam{font-family:Fredoka,sans-serif;font-size:clamp(28px,7vw,54px);font-weight:700;color:#fff;text-shadow:0 0 20px #FBBF24,0 0 40px #EC4899,0 6px 0 rgba(0,0,0,.4);text-align:center;padding:0 20px;transform:translateZ(-1600px) scale(2.6) rotateX(12deg);opacity:0;animation:slamIn .55s cubic-bezier(.17,.84,.44,1) forwards}
@keyframes slamIn{0%{transform:translateZ(-1600px) scale(2.6) rotateX(12deg);opacity:0}70%{transform:translateZ(40px) scale(1.06) rotateX(0deg);opacity:1}100%{transform:translateZ(0) scale(1) rotateX(0deg);opacity:1}}
@keyframes slamOut{0%{transform:translateZ(0) scale(1);opacity:1}100%{transform:translateZ(-1400px) scale(2.2);opacity:0}}
@keyframes successFade{from{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.35)}}
@keyframes successFadeOut{from{background:rgba(0,0,0,.35)}to{background:rgba(0,0,0,0)}}

/* Confettis */
.confetti-wrap{position:fixed;inset:0;z-index:4999;pointer-events:none;overflow:hidden}
.confetti-piece{position:absolute;top:-20px;width:9px;height:14px;opacity:.95;animation-name:confettiFall;animation-timing-function:ease-in;animation-fill-mode:forwards;transform:rotate(var(--rot))}
@keyframes confettiFall{0%{transform:translateY(-40px) rotate(var(--rot));opacity:1}100%{transform:translateY(108vh) rotate(calc(var(--rot) + 500deg));opacity:0}}

/* ============ GRAPHIKART (page bonus, fond noir + titre animé) ============ */
body.graphikart-active{background:#000000}
body.graphikart-active .chH.c1{background:#000000;border-bottom:2px solid #1E293B}
#gk_title{animation:gkHue 5s linear infinite}
@keyframes gkHue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
.gk-shard{position:fixed;width:16px;height:22px;background:#ef4444;pointer-events:none;z-index:5001;animation:gkShardFly 1.1s ease-out forwards}
@keyframes gkShardFly{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(var(--sx),var(--sy)) rotate(var(--srot));opacity:0}}
.gk-streamer{position:fixed;top:50%;left:50%;width:7px;height:64px;border-radius:4px;pointer-events:none;animation:gkStreamerBurst 1.9s cubic-bezier(.15,.75,.3,1) forwards}
@keyframes gkStreamerBurst{0%{transform:translate(-50%,-50%) rotate(var(--srot)) translate(0,0) scale(.4);opacity:1}65%{opacity:1}100%{transform:translate(-50%,-50%) rotate(calc(var(--srot) + 180deg)) translate(var(--sx),var(--sy)) scale(1);opacity:0}}
/* ============================================================
   BOUTONS CONNEXION / CRÉER COMPTE DANS LA BANNIÈRE
   ============================================================ */
.nb-login,.nb-register{border-radius:20px;padding:6px 16px;color:#fff;font-weight:700;margin-right:4px}
.nb-login{background:linear-gradient(90deg,var(--bl2),#6366f1)}
.nb-register{background:linear-gradient(90deg,var(--rs2),var(--rs))}
.nb-login:hover,.nb-login.on{background:linear-gradient(90deg,#6366f1,var(--bl2));color:#fff}
.nb-register:hover,.nb-register.on{background:linear-gradient(90deg,var(--rs),var(--rs2));color:#fff}
/* ============================================================
   PAGE CONNEXION / INSCRIPTION / PAIEMENT (accès au site)
   ============================================================ */
.gf_page{background:linear-gradient(135deg,var(--bl3),var(--bl),#4f46e5);min-height:92vh;display:flex;flex-direction:column;align-items:center;padding:100px 16px 60px}
.gf_logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px}
.gf_logo .logoI{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--bl2),var(--rs));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:17px}
.gf_logo span{font-size:26px;font-weight:700;color:#fff;font-family:Fredoka,sans-serif}
.gf_logo span b{color:var(--rs2)}
.gf_page h1{font-size:clamp(22px,4vw,32px);color:#fff;text-align:center;margin:0 0 36px;line-height:1.35;font-family:Fredoka,sans-serif;max-width:700px}
.gf_card{display:flex;flex-wrap:wrap;width:100%;max-width:820px;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35)}
.gf_col{flex:1;min-width:280px;background:rgba(255,255,255,0.08);backdrop-filter:blur(6px);padding:0 0 28px}
.gf_col_head{padding:16px;text-align:center;color:#fff;font-weight:800;font-size:15px;letter-spacing:1px}
.gf_col.login .gf_col_head{background:linear-gradient(90deg,var(--rs3),var(--rs))}
.gf_col.register .gf_col_head{background:linear-gradient(90deg,#6366f1,#4f46e5)}
.gf_form{display:flex;flex-direction:column;gap:12px;padding:22px 26px 0}
.gf_form label{position:relative;display:block}
.gf_form label i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#cbd5e1;font-size:13px}
.gf_form input{width:100%;padding:13px 14px 13px 40px;border-radius:10px;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.1);color:#fff;font-size:14px;box-sizing:border-box}
.gf_form input::placeholder{color:#cbd5e1}
.gf_form input:focus{outline:none;border-color:var(--rs2)}
.gf_btn{margin-top:6px;padding:13px;border:none;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;color:#fff;background:linear-gradient(90deg,var(--bl2),var(--rs))}
.gf_col.login .gf_btn{background:linear-gradient(90deg,var(--bl2),var(--rs))}
.gf_col.register .gf_btn{background:linear-gradient(90deg,#6366f1,var(--rs))}
.gf_btn:hover{filter:brightness(1.08)}
.gf_forgot{display:block;text-align:center;margin-top:12px;color:#e2e8f0;font-size:12px;text-decoration:underline}
.gf_err{color:#fca5a5;font-size:13px;min-height:18px;text-align:center;margin:16px 0 0}
.gf_pay_box{width:100%;max-width:420px;background:rgba(255,255,255,0.08);backdrop-filter:blur(6px);border-radius:20px;padding:30px 26px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.35)}
.gf_pay_intro{color:#e2e8f0;font-size:14px;line-height:1.6;margin-bottom:16px}
.gf_btn_pay{display:inline-flex;align-items:center;gap:8px;justify-content:center;width:100%;background:linear-gradient(90deg,var(--ok),#059669)}
.gf_gate_logout{margin-top:14px;background:none;border:none;color:#cbd5e1;font-size:12px;text-decoration:underline;cursor:pointer}
/* ============================================================
   POPUP "CONNECTE-TOI" (contenu verrouillé sans compte)
   ============================================================ */
.gf_modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.7);opacity:0;pointer-events:none;transition:.25s}
.gf_modal.op{opacity:1;pointer-events:auto}
.gf_modal_card{background:#fff;border-radius:18px;padding:32px 28px;max-width:360px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.gf_modal_card .gf_form input{color:#1e293b;background:#f1f5f9;border-color:#cbd5e1}
.gf_modal_card .gf_form input::placeholder{color:#94a3b8}
.gf_modal_card .gf_form label i{color:#64748b}
.gf_modal_card i{font-size:34px;color:var(--rs);margin-bottom:12px;display:block}
.gf_modal_card h3{font-family:Fredoka,sans-serif;font-size:19px;color:var(--noir);margin:0 0 10px}
.gf_modal_card p{font-size:13px;color:var(--gri);line-height:1.6;margin:0 0 20px}
.gf_modal_card .gf_btn{width:100%;background:linear-gradient(90deg,var(--bl2),var(--rs));border:none;padding:12px;border-radius:10px;color:#fff;font-weight:700;cursor:pointer;font-size:14px}
.gf_modal_close{margin-top:10px;background:none;border:none;color:var(--gri);font-size:12px;text-decoration:underline;cursor:pointer}
/* Bouton profil (connecté) + bouton déconnexion */
.nb-logout{border-radius:20px;padding:6px 14px;margin-left:4px;background:rgba(255,255,255,0.12);color:#e2e8f0;font-size:12px}
.nb-logout:hover{background:rgba(255,255,255,0.22)}
.gf_profile_card{width:100%;max-width:420px;background:rgba(255,255,255,0.08);backdrop-filter:blur(6px);border-radius:20px;padding:30px 28px;box-shadow:0 20px 60px rgba(0,0,0,0.35)}
.gf_profile_row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.12);color:#fff;font-size:14px}
.gf_profile_row:last-of-type{border-bottom:none}
.gf_profile_row span:first-child{color:#cbd5e1}
.gf_profile_row span:last-child{font-weight:700}
.gf_sub_badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:800}
.gf_sub_badge.on{background:var(--ok);color:#fff}
.gf_sub_badge.off{background:#ef4444;color:#fff}
/* Le bouton "prénom" et "Déconnexion" doivent rester alignés sur une seule ligne, juste après le logo */
#gf_nav_auth{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
/* Bouton Admin dans la bannière (réservé aux comptes administrateurs) */
.nb-admin{border-radius:20px;padding:6px 14px;margin-right:4px;background:linear-gradient(90deg,#f59e0b,#d97706);color:#fff;font-weight:700}
.nb-admin:hover{filter:brightness(1.08)}
/* Bouton Admin repositionné sous le logo, aligné avec sa marge gauche, juste sous la ligne rose */
.nb-admin{position:fixed;top:63px;left:calc(16px + 1cm);z-index:998;margin:0}
/* Badge rouge sur le bouton Admin (nombre de demandes de paiement PayPal en attente) */
.gf_admin_badge{background:#ef4444;color:#fff;border-radius:50%;font-size:10px;padding:2px 7px;margin-left:6px;font-weight:800}
/* Les 6 cases pour créer/saisir le code à 6 chiffres */
.gf_code_row{display:flex;gap:8px;justify-content:center}
.gf_code_box{width:42px;height:52px;text-align:center;font-size:22px;font-weight:800;border-radius:10px;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.1);color:#fff}
.gf_code_box:focus{outline:none;border-color:var(--rs2)}
/* Boutons du flux PayPal : texte rouge pour "Suivant", vert pour "Valider" le code (au lieu du
   blanc sur blanc hérité de .gf_btn, qui ne colore le fond que dans les colonnes Connexion/Créer compte) */
#gf_paypal_form button.gf_btn{background:#fff;color:#dc2626;border:2px solid #dc2626}
#gf_code_submit{background:#fff;color:#16a34a;border:2px solid #16a34a}

/* ============================================================
   GRAPHIKART / GRAPHILASER SUR MOBILE — mode paysage plein écran
   N'affecte jamais le PC : tout est conditionné à un écran étroit (max-width) en plus de
   l'orientation, pour ne cibler que les téléphones/tablettes, jamais une fenêtre de bureau.
   ============================================================ */
.gf_rotate_prompt{display:none}

/* Téléphone tenu à la verticale sur ces deux jeux : on bloque avec l'invite à tourner. */
@media (max-width: 926px) and (orientation: portrait){
body.graphikart-active .gf_rotate_prompt,
body.graphilaser-active .gf_rotate_prompt{
display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
position:fixed; inset:0; z-index:20000; background:#0f172a; color:#fff; padding:32px;
}
.gf_rotate_icon{font-size:52px; color:#38bdf8; margin-bottom:18px; animation:gfRotateSpin 1.8s ease-in-out infinite}
@keyframes gfRotateSpin{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}
body.graphikart-active .hd, body.graphikart-active .pbr, body.graphikart-active .ft,
body.graphilaser-active .hd, body.graphilaser-active .pbr, body.graphilaser-active .ft{
visibility:hidden;
}
}

/* Téléphone tourné en paysage sur ces deux jeux : le jeu prend tout l'écran. */
@media (max-width: 926px) and (orientation: landscape){
body.graphikart-active .hd, body.graphikart-active .pbr, body.graphikart-active .ft, body.graphikart-active .chH,
body.graphilaser-active .hd, body.graphilaser-active .pbr, body.graphilaser-active .ft, body.graphilaser-active .chH{
display:none;
}
body.graphikart-active #pg_chap, body.graphilaser-active #pg_chap{ padding:0; margin:0 }
body.graphikart-active .lesc, body.graphilaser-active .lesc{
max-width:none; margin:0; padding:0;
}
body.graphikart-active #gk_canvasbox, body.graphilaser-active #gl_canvasbox{
position:fixed; inset:0; z-index:9999; width:100vw; height:100vh; height:100dvh;
border:none; border-radius:0; box-shadow:none;
display:flex; align-items:center; justify-content:center; background:#000;
}
body.graphilaser-active #gl_canvas{
width:auto !important; height:auto !important; max-width:100vw; max-height:100vh; max-height:100dvh;
}
/* GraphiKart : l'image (700×500, proportions très différentes d'un écran de téléphone) est
   étirée pour remplir tout l'écran sans bande noire, plutôt que gardée à ses proportions
   d'origine (ce qui laissait de larges bandes noires à gauche/droite).
   100dvh (au lieu de 100vh) : s'ajuste à l'espace réellement visible, que la barre d'adresse du
   navigateur soit affichée ou cachée — sinon le bas de l'image (ex. la voiture) reste caché
   derrière la barre tant qu'on n'a pas scrollé pour la faire disparaître. */
body.graphikart-active #gk_canvas{
width:100vw !important; height:100vh !important; height:100dvh !important;
}
/* GraphiKart : HUD (score/vies/biome) épinglé en haut, discret, jamais caché par une encoche. */
body.graphikart-active #gk_hud{
position:fixed !important; top:0; left:0; right:0; z-index:10001;
border-radius:0; font-size:11px; padding-top:max(6px, env(safe-area-inset-top));
padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right));
}
/* Les flèches groupées à droite, PIQUER seul à gauche — jamais collés aux bords grâce aux marges
   de sécurité (env(safe-area-inset-*)), qui évitent l'encoche et les coins arrondis du téléphone. */
body.graphikart-active #gk_controls{
position:fixed !important; inset:0; z-index:10001; bottom:0;
padding-bottom:max(22px, env(safe-area-inset-bottom));
padding-left:max(26px, env(safe-area-inset-left));
padding-right:max(26px, env(safe-area-inset-right));
align-items:flex-end;
}
body.graphikart-active #gk_arrows{ order:2; gap:16px }
body.graphikart-active #gk_pick{ order:1 }
body.graphikart-active #gk_left, body.graphikart-active #gk_right{ width:66px; height:66px; font-size:26px }
body.graphikart-active #gk_pick{ height:66px; padding:0 26px; font-size:15px }
/* La légende PC/Mobile disparaît (plus utile en plein écran), et le bouton retour devient un
   petit rond flottant en haut à gauche — jamais caché, pour ne jamais laisser coincé dans le jeu. */
body.graphikart-active .lesc > div:last-of-type{ display:none; }
body.graphikart-active #gk_back, body.graphilaser-active #gl_back{
position:fixed !important; top:max(10px, env(safe-area-inset-top)); left:max(10px, env(safe-area-inset-left));
z-index:10002; width:40px; height:40px; padding:0; border-radius:50%;
display:flex; align-items:center; justify-content:center; font-size:0;
}
body.graphikart-active #gk_back i, body.graphilaser-active #gl_back i{ font-size:16px; margin:0; }
}

/* Empêche le menu "Copier / Partager / Sélectionner" du téléphone de s'ouvrir quand on touche
   l'écran pour jouer (appui un peu long sur le canevas ou les boutons de jeu). */
body.graphikart-active, body.graphilaser-active{
-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}