:root{
  --cyan:#38bdc9; --cyan-d:#1f97a3; --ink:#16212b; --muted:#5f7080;
  --line:#dde5ea; --bg:#eef3f6; --card:#fff;
  --ok:#0f7b52; --warn:#b26a00; --ko:#b3261e;
}
*{box-sizing:border-box}
/* Garde-fou : aucune règle d'auteur ne doit ré-afficher un élément masqué. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
.wrap{max-width:860px;margin:0 auto;padding:26px 16px 70px}
.wrap.narrow{max-width:640px;padding-top:48px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:26px 24px;margin-bottom:18px;box-shadow:0 1px 3px rgba(20,40,60,.05)}
.card.center{text-align:center}
.eyebrow{color:var(--cyan-d);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:11.5px}
h1{margin:8px 0 14px;font-size:25px;letter-spacing:-.01em;line-height:1.25}
h2.sub{margin:26px 0 10px;font-size:17px;border-left:4px solid var(--cyan);
  padding-left:10px;text-align:left}
.muted{color:var(--muted);font-size:14.5px}
.hello{font-size:17px;margin:0 0 16px}
.end{margin-top:22px}

ul.rules{text-align:left;margin:0 0 18px;padding-left:20px}
ul.rules li{margin:8px 0}
.tip{background:#eaf7f8;border-left:3px solid var(--cyan);border-radius:0 6px 6px 0;
  padding:11px 14px;margin:16px 0;text-align:left;font-size:14.5px}
.tip.warn{background:#fdf4e6;border-color:var(--warn)}
.hint{color:var(--muted);font-size:13.5px;margin-bottom:8px}

.btn{display:inline-block;background:var(--cyan);color:#fff;border:0;
  border-radius:8px;padding:12px 22px;font-size:16px;font-weight:600;
  cursor:pointer;font-family:inherit}
.btn:hover{background:var(--cyan-d)}
.btn.big{width:100%;padding:15px;font-size:17px;margin-top:6px}
.btn.danger{background:var(--ko)}
.btn.danger:hover{background:#8f1e18}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#f2f6f8}
.btn[disabled]{opacity:.55;cursor:default}

/* ---- barre fixe de l'épreuve ---- */
.bar{position:sticky;top:0;z-index:20;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 2px 6px rgba(20,40,60,.07)}
.bar-in{max-width:860px;margin:0 auto;padding:10px 16px;display:flex;
  align-items:center;gap:14px;flex-wrap:wrap}
.who{font-weight:600;flex:1;min-width:120px}
.chrono{font-variant-numeric:tabular-nums;font-weight:700;font-size:21px;
  background:#eaf7f8;color:var(--cyan-d);border-radius:8px;padding:3px 12px}
.chrono.warn{background:#fdf1e3;color:var(--warn)}
.chrono.crit{background:#fdeceb;color:var(--ko);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.progress{font-size:13.5px;color:var(--muted)}
.saved{margin-left:8px;font-weight:600}
.saved.ok{color:var(--ok)}
.saved.ko{color:var(--ko)}
.jauge{height:3px;background:#e3ebef}
#jauge-in{height:3px;width:0;background:var(--cyan);transition:width .3s}

/* ---- questions ---- */
.q{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;margin:14px 0}
.q.touched{border-color:#bfe3e7}
.qhead{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.qnum{background:var(--cyan);color:#fff;border-radius:6px;padding:2px 10px;
  font-weight:700;font-size:13.5px}
.tag{color:var(--muted);font-size:12px;border:1px solid var(--line);
  border-radius:4px;padding:1px 7px}
.qtext{font-weight:600;margin-bottom:13px;line-height:1.5}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);
  border-radius:8px;padding:10px 13px;cursor:pointer;background:#fcfdfe}
.opt:hover{border-color:var(--cyan);background:#f6fcfd}
.opt input{margin:3px 0 0;flex:none;width:17px;height:17px;accent-color:var(--cyan)}
.opt span{flex:1}
input.saisie{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:8px;font:16px inherit;font-family:ui-monospace,Menlo,Consolas,monospace}
input.saisie:focus{outline:2px solid var(--cyan);border-color:var(--cyan)}
.pairs{display:flex;flex-direction:column;gap:10px}
.pair{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pair .left{flex:1;min-width:180px;font-weight:600}
.pair select{flex:2;min-width:220px;padding:10px;border:1px solid var(--line);
  border-radius:8px;font:15px inherit;background:#fcfdfe}

/* ---- résultat ---- */
.note-box{margin:22px 0}
.note{font-size:56px;font-weight:800;color:var(--cyan-d);line-height:1}
.note span{font-size:24px;color:var(--muted);font-weight:600}
table.recap{width:100%;border-collapse:collapse;margin:12px 0;font-size:14.5px;
  text-align:left}
table.recap th,table.recap td{border:1px solid var(--line);padding:8px 11px;
  vertical-align:top}
table.recap th{background:#f2f7f9;font-weight:600}
.minibar{display:inline-block;width:110px;height:8px;background:#e6edf1;
  border-radius:5px;overflow:hidden;vertical-align:middle}
.minibar div{height:8px;background:var(--cyan)}
.pct{margin-left:8px;font-variant-numeric:tabular-nums}
.badge{background:#eef3f6;border-radius:20px;padding:2px 10px;font-size:12.5px}
.badge.live{background:#eaf7f8;color:var(--cyan-d);font-weight:600}
.badge.done{background:#eaf6f0;color:var(--ok);font-weight:600}
table.detail tr.ok td{background:#f4fbf7}
table.detail tr.partiel td{background:#fdf8ec}
table.detail tr.ko td{background:#fdf3f2}
table.detail td.num{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
a{color:var(--cyan-d)}

/* ---- modale ---- */
/* Masquée par défaut : elle ne s'ouvre que par l'ajout de la classe « open ». */
.modal{display:none;position:fixed;inset:0;background:rgba(16,28,38,.55);
  align-items:center;justify-content:center;padding:20px;z-index:50}
.modal.open{display:flex}
.modal-in{background:#fff;border-radius:12px;padding:26px;max-width:430px;width:100%}
.modal-in h2{margin:0 0 10px;font-size:20px}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
@media (max-width:520px){
  .modal-btns{flex-direction:column-reverse}
  .modal-btns .btn{width:100%}
  .chrono{font-size:19px}
}

/* ---- salle d'attente (avant l'ouverture de l'epreuve) ---- */
.attente-bloc{background:#eaf7f8;border:1px solid #bfe3e7;border-radius:12px;
  padding:18px 16px;margin:20px 0}
.attente-label{color:var(--cyan-d);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:11.5px;margin-bottom:6px}
.attente-chrono{font-variant-numeric:tabular-nums;font-weight:700;
  font-size:40px;line-height:1.1;color:var(--cyan-d);
  font-family:ui-monospace,Menlo,Consolas,monospace}
@media (max-width:520px){
  .attente-chrono{font-size:32px}
}