/* Boîte à messages · Mathémagique */
.msg{position:relative;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--k,var(--blue));border-radius:14px;padding:16px 18px;margin:12px 0;box-shadow:0 1px 0 rgba(22,33,58,.04),0 8px 22px -14px rgba(22,33,58,.2)}
.msg.feat{border:2px solid var(--k,var(--blue));border-left-width:6px;box-shadow:0 0 0 6px rgba(232,119,46,.12),0 18px 40px -18px rgba(22,33,58,.35);animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.msg .top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.msg .type{font:700 11px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--k,var(--blue));padding:5px 8px;border-radius:6px}
.msg .when{font:600 12.5px/1 Inter,sans-serif;color:var(--ink2)}
.msg .new{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(232,119,46,.6);animation:ping 1.6s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(232,119,46,0)}100%{box-shadow:0 0 0 0 rgba(232,119,46,0)}}
.msg h3{margin:4px 0 6px;font:400 28px/1.05 "Bebas Neue",Impact,sans-serif;color:var(--navy);letter-spacing:.02em}
.msg .body{font-size:16.5px;line-height:1.65;overflow-x:auto}
.msg .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.msg .acts a,.msg .acts button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);border-radius:9px;padding:9px 12px;font:600 14px/1 Inter,sans-serif;cursor:pointer;text-decoration:none}
.msg .acts .pri{background:var(--navy);color:#fff}
.msg .arch{position:absolute;top:12px;right:12px;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:999px;padding:5px 10px;font:600 12px/1 Inter,sans-serif;cursor:pointer}
.msg .arch:hover{color:var(--navy);border-color:var(--navy)}
.msg:has(.arch) .top{padding-right:96px}
.answer{margin-top:10px;background:#EAF5EE;border:1.5px solid var(--green);border-radius:10px;padding:12px 14px;font-size:16px;line-height:1.65;animation:pop .35s ease}
.answer b.l{display:block;font:700 11px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.cd{margin-top:10px;display:inline-flex;align-items:center;gap:8px;background:#FFF4E8;border:1.5px dashed var(--orange);border-radius:10px;padding:8px 12px;font:600 14px/1.2 Inter,sans-serif;color:var(--orangeD)}
.video{margin-top:12px;position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.filters button{border:1.5px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;padding:8px 13px;font:600 13px/1 Inter,sans-serif;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.empty{padding:30px 0;color:var(--ink2);text-align:center;line-height:1.6}
.sec{font:400 30px/1 "Bebas Neue",Impact,sans-serif;color:var(--blue);margin:28px 0 6px;letter-spacing:.03em}
.katex{font-size:1.06em}
/* générateur */
.form{display:grid;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:18px 0}
.form label{display:grid;gap:5px;font:600 13.5px/1.2 Inter,sans-serif;color:var(--navy)}
.form small{font-weight:400;color:var(--ink2)}
.form input,.form textarea,.form select{font:400 16px/1.4 Inter,sans-serif;border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;background:#fff;color:var(--ink);width:100%;box-sizing:border-box}
.form textarea{min-height:90px;resize:vertical}
.types{display:flex;flex-wrap:wrap;gap:8px}
.types button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font:600 14px/1 Inter,sans-serif;cursor:pointer;color:var(--navy)}
.types button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.out{background:var(--navy);color:#fff;border-radius:14px;padding:16px 18px;margin:16px 0}
.out .row{display:grid;gap:6px;margin:10px 0}
.out b{font:700 11px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
.out code{display:block;background:rgba(255,255,255,.1);border-radius:8px;padding:10px;font:13px/1.45 ui-monospace,Menlo,monospace;word-break:break-all;white-space:pre-wrap}
.out button{justify-self:start;border:0;background:var(--orange);color:#fff;border-radius:8px;padding:9px 13px;font:600 14px/1 Inter,sans-serif;cursor:pointer}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.two{grid-template-columns:1fr}.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.filters button{flex:0 0 auto}}

/* défis : QCM et exercice */
.qcm{display:grid;gap:8px;margin-top:12px}
.opt{display:flex;align-items:center;gap:10px;text-align:left;width:100%;border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:11px 12px;font:500 15.5px/1.45 Inter,sans-serif;color:var(--ink);cursor:pointer;transition:transform .12s,border-color .12s}
.opt:hover:not(:disabled){border-color:#7B3FB5;transform:translateX(2px)}
.opt > b{flex:0 0 28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#F1EAF8;color:#7B3FB5;font:800 13px/1 Inter,sans-serif}
.opt > span{flex:1;min-width:0;overflow-x:auto}
.opt:disabled{cursor:default}
.opt.good{border-color:var(--green);background:#EAF5EE}.opt.good > b{background:var(--green);color:#fff}
.opt.bad{border-color:var(--red);background:#FDECEC}.opt.bad > b{background:var(--red);color:#fff}
.qcm.done .opt:not(.good):not(.bad){opacity:.55}
.verdict{margin-top:10px;font-size:15.5px;line-height:1.6;background:var(--paper);border-radius:10px;padding:10px 12px;animation:pop .35s ease}
.verdict b{display:block;margin-bottom:4px}.verdict b.ok{color:var(--green)}.verdict b.ko{color:var(--red)}
.steps{list-style:none;counter-reset:st;margin:12px 0 0;padding:0;display:grid;gap:8px}
.steps:empty{display:none}
.steps li{counter-increment:st;position:relative;background:var(--paper);border-radius:9px;padding:10px 12px 10px 44px;font-size:15.5px;line-height:1.65;overflow-x:auto;animation:pop .35s ease}
.steps li:before{content:counter(st);position:absolute;left:10px;top:10px;width:24px;height:24px;border-radius:50%;background:#7B3FB5;color:#fff;font:700 13px/24px Inter,sans-serif;text-align:center}

/* L'Jadid : rouge pastel qui clignote */
.jadid{display:inline-block;font:800 11px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#E57373;padding:5px 9px;border-radius:6px;animation:jadid 1.1s ease-in-out infinite;box-shadow:0 0 0 0 rgba(229,115,115,.55)}
.jadid.big{font-size:14px;padding:6px 11px;vertical-align:middle;margin-left:6px;position:relative;top:-4px;letter-spacing:.04em}
@keyframes jadid{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(229,115,115,.55)}50%{opacity:.4;box-shadow:0 0 0 8px rgba(229,115,115,0)}}
@media (prefers-reduced-motion:reduce){.jadid{animation:none}}
.msg .acts .reset{border-color:#7B3FB5;color:#7B3FB5}
.reset-help{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink2);background:#F6F1FB;border-radius:9px;padding:8px 11px}
.reset-help b{color:#7B3FB5}

/* menu toujours en haut */
.bar-top{position:sticky;top:0;z-index:20;background:var(--paper);margin:18px -16px 0;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;border-bottom:1px solid var(--line);box-shadow:0 8px 16px -14px rgba(22,33,58,.35)}
.reset-all{margin-top:9px;display:grid;gap:4px}
.reset-all button{justify-self:start;border:1.5px solid #7B3FB5;background:#fff;color:#7B3FB5;border-radius:999px;padding:8px 13px;font:700 13px/1 Inter,sans-serif;cursor:pointer}
.reset-all button.armed{background:#7B3FB5;color:#fff;animation:jadid 1s ease-in-out infinite}
.reset-all small{font-size:12px;color:var(--ink2);line-height:1.4}
/* défis repliés : titre seul */
.fold-h{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:2px 0;margin:0;text-align:left;cursor:pointer;color:inherit}
.fold-h h3{flex:1;margin:4px 0}
.fold-h i{font-style:normal;color:#7B3FB5;font-size:18px;transition:transform .2s}
.fold-h[aria-expanded="true"] i{transform:rotate(180deg)}
.st{font:700 11px/1 Inter,sans-serif;border-radius:6px;padding:5px 8px;white-space:nowrap}
.st.ok{background:#EAF5EE;color:var(--green)}.st.ko{background:#FDECEC;color:var(--red)}.st.todo{background:#F1EAF8;color:#7B3FB5}
.dbody{animation:pop .3s ease}