/* Palette & polices = design system Devoirati (devoirati-design-system.css) */
:root{
  --brand:#667eea; --brand2:#764ba2; --deep:#4a3570; --accent:#f093fb;
  --bg:#f8f9fa; --card:#ffffff; --ink:#333333; --strong:#2c3e50; --muted:#666666;
  --ok:#28a745; --okbg:#d4edda; --oktx:#155724;
  --bad:#dc3545; --badbg:#f8d7da; --badtx:#721c24;
  --amber:#856404; --amberbg:#fff3cd; --amberbd:#ffe69a;
  --line:#e0e0e0; --lav:#eef0fd;
  --grad:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --font-ar:'Cairo','Tajawal','Segoe UI',Tahoma,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-ar);background:var(--bg);color:var(--ink);line-height:1.65;
  -webkit-font-smoothing:antialiased;padding:0 0 60px}
.wrap{max-width:1040px;margin:0 auto;padding:16px}
.top{background:var(--grad);color:#fff;border-radius:20px;padding:20px 22px;
  box-shadow:0 10px 30px rgba(118,75,162,.25);margin-bottom:18px}
.top .kick{font-size:12.5px;opacity:.9;font-weight:700;letter-spacing:.3px}
.top h1{margin:4px 0 2px;font-size:23px;font-weight:800}
.top p{margin:0;opacity:.92;font-size:14px}
.badge{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);
  border-radius:99px;padding:3px 11px;font-size:12px;font-weight:700;margin-top:10px}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:18px 20px;margin-bottom:16px;
  box-shadow:0 2px 10px rgba(118,75,162,.05)}
.card h2{margin:0 0 4px;font-size:17px;color:var(--strong);display:flex;align-items:center;gap:8px}
.chip{background:var(--grad);color:#fff;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:14px;font-weight:800;flex:0 0 26px}
.sub{color:var(--muted);font-size:13px;margin:0 0 12px}
.enonce{background:var(--lav);border-radius:12px;padding:12px 15px;font-size:14.5px}
.enonce b{color:var(--strong)}
.enonce ol{margin:6px 20px 0 0;padding:0}
.enonce li{margin:3px 0}
.tag{font-size:11px;font-weight:800;color:var(--brand);background:#eef0fd;border-radius:6px;padding:1px 7px;margin-inline-start:4px}
m{font-family:'Amiri','Scheherazade New','Cambria Math','Times New Roman',serif;font-style:normal;white-space:nowrap;font-weight:700;font-size:1.02em}

/* ─── Accordéon par question ─── */
.qpanel{background:var(--card);border:1.5px solid var(--line);border-radius:18px;margin-bottom:14px;overflow:hidden;
  box-shadow:0 2px 10px rgba(118,75,162,.05)}
.qhead{width:100%;display:flex;align-items:center;gap:12px;padding:15px 18px;background:#fbfbff;border:0;cursor:pointer;
  font-family:inherit;text-align:right;transition:background .15s}
.qhead:hover{background:#f4f5ff}
.qpanel.open .qhead{background:var(--grad);color:#fff}
.qhead .qtitle{flex:1;font-size:16px;font-weight:800;color:var(--strong)}
.qpanel.open .qhead .qtitle{color:#fff}
.qhead .qstate{font-size:12px;font-weight:800;color:var(--ok);background:#fff;border-radius:99px;padding:2px 10px;opacity:0;transition:opacity .2s}
.qhead .qstate.on{opacity:1}
.qhead .chev{font-size:16px;transition:transform .2s;opacity:.8}
.qpanel.open .qhead .chev{transform:rotate(180deg)}
.qbody{display:none;padding:16px 18px 20px}
.qpanel.open .qbody{display:block}

/* ─── Zone de travail : démonstration (droite) + bibliothèque (gauche visuelle) ─── */
.work{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}
.demo-col{min-width:0}
.line{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:12px;margin:7px 0;
  background:#fafbff;border:1.5px solid #eef0fd}
.role{flex:0 0 60px;font-size:11px;font-weight:800;color:var(--muted);text-align:center;
  border-radius:7px;padding:3px 0;background:#fff;border:1px solid var(--line);margin-top:1px}
.frags{flex:1;font-size:15.5px;min-width:0}
.frag{cursor:pointer;border-radius:6px;padding:1px 4px;transition:background .12s;border-bottom:2px dotted #b9c0f2}
.frag:hover{background:#e7eafc}
.frag.ok-clicked{background:var(--okbg);border-bottom-color:var(--ok);cursor:default}
.frag.wrong{background:var(--badbg);color:var(--badtx);text-decoration:line-through;
  text-decoration-color:var(--bad);text-decoration-thickness:2px;border-bottom:none;cursor:default;font-weight:700}
.slot{display:inline-block;min-width:180px;min-height:28px;border:2px dashed var(--brand);border-radius:9px;
  background:#f3f5ff;vertical-align:middle;margin:2px 0;padding:3px 8px;font-size:14px;color:var(--brand);text-align:center}
.slot.filled{border-style:solid;border-color:var(--ok);background:var(--okbg);color:var(--ink);font-weight:600;text-align:right}
.hintline{font-size:13px;color:var(--muted);margin-top:10px}

.lib-col{background:#f6f7ff;border:1.5px solid #dfe3fb;border-radius:14px;padding:13px;position:sticky;top:12px}
.lib-col.dim{opacity:.5}
.lib-col.dim .biblio{pointer-events:none;filter:grayscale(.4)}
.lib-head{font-size:13.5px;font-weight:800;color:var(--brand2);margin-bottom:4px}
.lib-note{font-size:12px;color:var(--muted);margin-bottom:10px}
.lib-note.armed{color:var(--brand);font-weight:700}
.biblio{display:grid;gap:9px}
.aff{text-align:right;background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;
  font-size:13.5px;cursor:pointer;transition:all .12s;font-family:inherit;color:var(--ink);line-height:1.5}
.aff:hover{border-color:var(--brand);background:#f7f8ff;transform:translateY(-1px)}
.aff:disabled{cursor:default;transform:none}
.aff.tried{opacity:.5;background:#f6f7f9;border-style:dashed}
.aff.tried:hover{transform:none;border-color:var(--line);background:#f6f7f9}
.aff.correct{border-color:var(--ok);background:var(--okbg)}

/* ─── Fahmi ─── */
.fahmi{display:flex;gap:11px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:14px;
  background:var(--amberbg);border:1.5px solid var(--amberbd);opacity:0;height:0;overflow:hidden;transition:opacity .25s}
.fahmi.show{opacity:1;height:auto;overflow:visible}
.fahmi .ava{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;font-size:21px;box-shadow:0 3px 8px rgba(118,75,162,.3)}
.fahmi .msg{font-size:13.5px}
.fahmi .msg .who{font-weight:800;color:var(--amber);font-size:12px;display:block;margin-bottom:2px}

/* ─── Sections révélées (4→7) ─── */
.sect{border-top:1.5px solid var(--line);margin-top:18px;padding-top:15px}
.sect.locked{display:none}   /* masqué (pas seulement grisé) tant que non révélé → aucun vide */
.sect h3{margin:0 0 8px;font-size:15.5px;color:var(--strong);display:flex;align-items:center;gap:8px}
.locked{opacity:.4;filter:grayscale(.3);pointer-events:none}
.reveal{opacity:0;transform:translateY(8px);transition:all .35s}
.reveal.in{opacity:1;transform:none}
.exp{display:grid;gap:10px}
.exp .row{border-radius:12px;padding:11px 14px;font-size:14px;border:1.5px solid}
.exp .good{background:var(--okbg);border-color:#a3d9b1}
.exp .bad{background:var(--badbg);border-color:#f1b6bd}
.exp .why{background:#f6f7f9;border-color:var(--line)}
.exp .why b{color:var(--strong)}
.exp .fam{font-size:11px;font-weight:800;border-radius:6px;padding:1px 7px;margin-inline-start:5px;background:#eef0fd;color:var(--brand2)}
.d2dbox{background:#fbfbfe;border:1.5px solid var(--line);border-radius:14px;padding:12px}
.d2dbox svg{width:100%;height:auto;display:block;touch-action:none;user-select:none;border-radius:10px;background:#fff}
.verdict{margin-top:10px;padding:10px 14px;border-radius:11px;font-weight:800;text-align:center;font-size:14.5px}
.verdict.no{background:var(--badbg);color:var(--badtx);border:1.5px solid #f1b6bd}
.verdict.yes{background:var(--okbg);color:var(--oktx);border:1.5px solid #a3d9b1}
.d2dhint{font-size:13px;color:var(--muted);text-align:center;margin:8px 0 2px}
.d2dnote{background:var(--amberbg);border:1.5px solid var(--amberbd);border-radius:12px;padding:13px 15px;font-size:14px;color:#6b5411}
.clean ol{margin:4px 20px 0 0;padding:0}
.clean li{margin:8px 0;padding:9px 13px;background:#f5f6fe;border-radius:11px;border:1px solid var(--line);font-size:15px}
.clean li b{color:var(--strong)}
.names{display:grid;gap:9px}
.name{text-align:right;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;
  font-size:14.5px;cursor:pointer;transition:all .12s;font-family:inherit;color:var(--ink)}
.name:hover{border-color:var(--brand);background:#f7f8ff}
.name.good{border-color:var(--ok);background:var(--okbg);font-weight:700}
.name.no{border-color:var(--bad);background:var(--badbg);opacity:.7}
.name:disabled{cursor:default}
.doneMsg{text-align:center;background:var(--grad);color:#fff;border-radius:14px;padding:14px;font-size:15px;font-weight:800;
  margin-top:12px;opacity:0;height:0;overflow:hidden;transition:opacity .3s}
.doneMsg.show{opacity:1;height:auto;overflow:visible}

@media(max-width:760px){
  .work{grid-template-columns:1fr}
  .lib-col{position:static}
  .role{flex-basis:52px;font-size:10px}
}