:root{
  --red:#E2173D; --red-dark:#B5102E; --red-light:#FDEBEE;
  --ink:#1F2328; --ink-soft:#4A5058; --line:#E4E6EA;
  --bg:#F4F5F7; --card:#FFFFFF;
  --green:#1E8E5A; --green-light:#E8F6EF;
  --amber:#B4740E; --amber-light:#FDF3E3; --amber-dark:#7A4E09;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,20,30,.06), 0 8px 24px rgba(20,20,30,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5; min-height:100vh;
}
#app{min-height:100vh; display:flex; flex-direction:column}
a{color:var(--red-dark)}
button{font-family:inherit}
.hidden{display:none !important}

/* ---- layout shells ---- */
.topbar{
  background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px; position:sticky; top:0; z-index:20; gap:12px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand img{height:30px; display:block}
.brand .divider{width:1px; height:24px; background:var(--line)}
.brand .title{font-weight:700; font-size:15px; white-space:nowrap}
.brand .subtitle{font-size:12px; color:var(--ink-soft)}
.topbar-right{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft)}
.topbar-right b{color:var(--ink)}
.topbar .btn-link{background:none;border:none;color:var(--red-dark);cursor:pointer;font-size:13px;padding:4px 6px}

main{flex:1; width:100%; max-width:980px; margin:0 auto; padding:24px 20px 60px}
.page-narrow{max-width:520px; margin:0 auto}

footer{text-align:center; font-size:12px; color:var(--ink-soft); padding:20px; border-top:1px solid var(--line); background:var(--card)}

/* ---- hero / auth ---- */
.hero{
  background:linear-gradient(135deg,#18181C 0%, #2B1218 60%, var(--red-dark) 140%);
  color:#fff; border-radius:var(--radius); padding:36px 28px; margin-bottom:24px;
}
.hero h1{margin:0 0 8px; font-size:26px}
.hero p{margin:0; color:#E9D9DC; max-width:640px; font-size:15px}
.hero .badge{display:inline-block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:3px 12px; font-size:12px; margin-bottom:14px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
.card + .card{margin-top:16px}

.tabs{display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--line)}
.tabs button{background:none; border:none; padding:10px 14px; font-size:14px; cursor:pointer; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs button.active{color:var(--red-dark); border-bottom-color:var(--red)}

.field{margin-bottom:14px}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:var(--ink-soft)}
.field input,.field select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:15px; background:#fff; color:var(--ink);
}
.field input:focus,.field select:focus{outline:2px solid var(--red); outline-offset:1px; border-color:var(--red)}
.field-row{display:flex; gap:12px}
.field-row .field{flex:1}
.hint{font-size:12px; color:var(--ink-soft); margin-top:4px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--red); color:#fff; border:none; border-radius:8px; padding:11px 20px;
  font-size:14px; font-weight:600; cursor:pointer; transition:background .15s;
}
.btn:hover{background:var(--red-dark)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.secondary{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn.secondary:hover{background:var(--bg)}
.btn.ghost{background:none; color:var(--red-dark); padding:8px 10px}
.btn.wide{width:100%}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}

.msg{border-radius:8px; padding:10px 14px; font-size:13.5px; margin-bottom:14px}
.msg.error{background:var(--red-light); color:var(--red-dark)}
.msg.ok{background:var(--green-light); color:var(--green)}
.msg.warn{background:var(--amber-light); color:var(--amber-dark)}

/* ---- module grid ---- */
.section-title{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:28px 0 12px}
.section-title:first-child{margin-top:0}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.mod-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow);
}
.mod-card:hover{border-color:var(--red)}
.mod-card .ico{font-size:22px}
.mod-card h3{margin:0; font-size:15px}
.mod-card p{margin:0; font-size:13px; color:var(--ink-soft); flex:1}
.mod-card .status{font-size:12px; font-weight:600}
.mod-card .status.done{color:var(--green)}
.mod-card .status.todo{color:var(--ink-soft)}
.progress-bar{height:8px; background:var(--line); border-radius:999px; overflow:hidden; margin:10px 0 4px}
.progress-bar > div{height:100%; background:var(--red)}

/* ---- module page ---- */
.breadcrumb{font-size:13px; color:var(--ink-soft); margin-bottom:14px}
.breadcrumb button{background:none;border:none;color:var(--red-dark);cursor:pointer;font-size:13px;padding:0}
.mod-header{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.mod-header .ico{font-size:30px}
.mod-header h2{margin:0; font-size:21px}
.mod-header .kicker{font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em}

.callout{background:var(--red-light); border-left:4px solid var(--red); border-radius:0 8px 8px 0; padding:14px 16px; margin:16px 0; font-size:14px}
.callout.green{background:var(--green-light); border-left-color:var(--green)}
.callout.amber{background:var(--amber-light); border-left-color:var(--amber)}
.callout b{display:block; margin-bottom:4px}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.chip{background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; user-select:none}
.chip.selected{background:var(--red); color:#fff; border-color:var(--red)}
.chip.correct{background:var(--green-light); border-color:var(--green); color:var(--green)}
.chip.wrong{background:var(--red-light); border-color:var(--red); color:var(--red-dark); text-decoration:line-through}

/* simulated message mock-ups */
.mock{border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:14px 0; background:#fafafa}
.mock-head{background:#EDEEF1; padding:9px 14px; font-size:12.5px; color:var(--ink-soft); border-bottom:1px solid var(--line); display:flex; justify-content:space-between}
.mock-body{padding:16px; font-size:14px; white-space:pre-wrap}
.mock.sms .mock-body{font-family:ui-monospace,Menlo,Consolas,monospace; background:#fff}
.mock .flagmark{background:#FFF1C2; border-bottom:2px solid var(--amber); cursor:pointer; padding:0 1px; border-radius:2px}
.mock .flagmark.picked{background:var(--amber); color:#fff; border-bottom-color:var(--amber-dark); font-weight:600}

.order-list{list-style:none; padding:0; margin:14px 0; display:flex; flex-direction:column; gap:8px}
.order-list li{
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 14px; font-size:14px;
  display:flex; align-items:center; gap:10px; cursor:grab;
}
.order-list li .num{background:var(--bg); border-radius:6px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--ink-soft); flex-shrink:0}
.order-list li.correct{border-color:var(--green); background:var(--green-light)}
.order-list li.wrong{border-color:var(--red); background:var(--red-light)}
.order-list .move-btns{margin-left:auto; display:flex; gap:4px}
.order-list .move-btns button{border:1px solid var(--line); background:#fff; border-radius:6px; width:26px; height:26px; cursor:pointer}

/* scenario stepper */
.scenario{background:#18181C; color:#fff; border-radius:var(--radius); padding:24px; margin:16px 0}
.scenario .step-tag{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#F2A7B6; margin-bottom:8px}
.scenario h4{margin:0 0 10px; font-size:17px}
.scenario p{color:#D8D8DC; font-size:14.5px; margin:0 0 10px}
.scenario .dots{display:flex; gap:5px; margin-bottom:16px}
.scenario .dots span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25)}
.scenario .dots span.on{background:var(--red)}
.scenario .choice-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.scenario .choice{
  flex:1; min-width:200px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:#fff;
  border-radius:8px; padding:12px 14px; text-align:left; cursor:pointer; font-size:14px;
}
.scenario .choice:hover{border-color:var(--red)}
.scenario .nav-row{display:flex; justify-content:space-between; margin-top:18px}
.scenario .nav-row button{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:9px 16px; cursor:pointer; font-size:13px}
.scenario .nav-row button:disabled{opacity:.3; cursor:default}
.scenario .outcome-bad{color:#FFB4C1; font-weight:700}
.scenario .outcome-good{color:#8FE2B8; font-weight:700}

.recap-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:14px 0}
.recap-grid .item{border:1px solid var(--line); border-radius:10px; padding:14px}
.recap-grid .item h5{margin:0 0 6px; font-size:13.5px}
.recap-grid .item p{margin:0; font-size:12.5px; color:var(--ink-soft)}

/* QCM */
.qcm-q{border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:14px}
.qcm-q .qn{font-size:13px; color:var(--ink-soft); margin-bottom:6px}
.qcm-q .qt{font-weight:600; margin-bottom:10px; font-size:14.5px}
.qcm-opt{display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:14px}
.qcm-opt:hover{background:var(--bg)}
.qcm-opt input{margin-top:3px}
.qcm-opt.correct{background:var(--green-light)}
.qcm-opt.wrong{background:var(--red-light)}

.score-circle{
  width:120px; height:120px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:conic-gradient(var(--red) calc(var(--pct,0)*1%), var(--line) 0); margin:0 auto 18px;
}
.score-circle .inner{width:96px; height:96px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center}
.score-circle .inner b{font-size:22px}
.score-circle .inner span{font-size:11px; color:var(--ink-soft)}

/* admin */
.table{width:100%; border-collapse:collapse; font-size:13.5px}
.table th,.table td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
.table th{color:var(--ink-soft); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em}
.table tr:hover td{background:var(--bg)}
.pill{display:inline-block; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:600}
.pill.green{background:var(--green-light); color:var(--green)}
.pill.grey{background:var(--bg); color:var(--ink-soft)}
.session-block{margin-bottom:22px}
.live-split{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.mock .flagmark.correct{background:var(--green-light); border-bottom-color:var(--green); color:var(--green)}

/* ---- questionnaire : tuiles de réponse façon quiz ---- */
.quiz-progress{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.quiz-progress .bar{flex:1; height:8px; background:var(--line); border-radius:999px; overflow:hidden}
.quiz-progress .bar > div{height:100%; background:var(--red); transition:width .3s ease}
.quiz-progress .count{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; font-weight:600}
.live-timer{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-soft); font-size:12.5px; white-space:nowrap}

.tilegrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0}
.tile{
  display:flex; align-items:center; gap:10px; border:none; border-radius:10px; padding:16px 14px;
  color:#fff; font-size:14.5px; font-weight:600; text-align:left; cursor:pointer; min-height:52px; line-height:1.25;
  transition:transform .15s ease, opacity .3s ease, box-shadow .15s ease; box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.tile:hover{transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.2)}
.tile:disabled{cursor:default}
.tile .shape{font-size:17px; opacity:.85; flex-shrink:0}
.tile .mark{margin-left:auto; font-size:17px; flex-shrink:0}
.tile-a{background:#E21B3C}
.tile-b{background:#1368CE}
.tile-c{background:#CC9400}
.tile-d{background:#26890C}
.tile{-webkit-print-color-adjust:exact; print-color-adjust:exact}
.tile.selected{box-shadow:0 0 0 3px #fff inset, 0 0 0 5px var(--ink) inset}
.tile.dim{opacity:.32; transform:none; box-shadow:none}
.tile.reveal-correct{animation:tilePulse .6s ease; box-shadow:0 0 0 3px #fff inset, 0 4px 16px rgba(0,0,0,.25)}
@keyframes tilePulse{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
@media (max-width:480px){.tilegrid{grid-template-columns:1fr}}
.session-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; gap:8px}
.session-head h3{margin:0; font-size:15px}
.code-pill{font-family:ui-monospace,Menlo,Consolas,monospace; background:var(--ink); color:#fff; padding:3px 10px; border-radius:6px; font-size:13px; letter-spacing:.03em}

@media (max-width:640px){
  .hero{padding:24px 18px}
  .hero h1{font-size:21px}
  .card{padding:16px}
  main{padding:16px 14px 48px}
  .live-split{grid-template-columns:1fr}
}