:root{
  --orange:#c46d5e;
  --blue:#2978a0;
  --blue-light:#EAF1F5;
  --yellow:#e6af2e;
  --green:#44af69;

  --bg:var(--blue-light);
  --panel:#FFFFFF;
  --border:#D3E1E8;
  --text:#1B2B33;
  --text-2:#4E6570;
  --text-muted:#8AA0AA;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ background:var(--bg); color:var(--text); font-family:var(--sans); min-height:100vh; }
.wrap{ max-width:640px; margin:0 auto; padding:20px 16px 60px; }
.wrap-wide{ max-width:760px; }

.crumb{ font-size:13px; color:var(--blue); margin-bottom:18px; }
.crumb span{ color:var(--text-muted); margin:0 6px; }
.crumb a{ color:var(--blue); text-decoration:none; }

.headline{ display:flex; gap:14px; align-items:center; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--border); }
.headline img.logo{ height:34px; flex-shrink:0; }
.headline .eyebrow{ font-size:11px; font-weight:600; letter-spacing:0.06em; color:var(--text-muted); margin-bottom:2px; }
.headline h1{ font-size:21px; font-weight:600; color:var(--blue); }

.brand-strip{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 20px; display:flex; align-items:center; justify-content:center; gap:32px; margin-bottom:20px; flex-wrap:wrap; }
.brand-strip img{ height:28px; width:auto; }
.brand-strip.brand-strip-footer{ margin-top:20px; margin-bottom:0; }

.card{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:16px; }
.card p{ color:var(--text-2); font-size:14px; line-height:1.7; margin-bottom:18px; }
.card p.intro{ font-size:16px; color:var(--text); font-weight:500; line-height:1.6; }
.card label{ font-size:12px; font-weight:600; color:var(--text-muted); display:block; margin-bottom:6px; }
.card label .optional{ font-weight:400; text-transform:none; letter-spacing:0; }
.card input[type=text], .card input[type=email], .card select{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:8px; font-size:15px; font-family:var(--sans); margin-bottom:18px; background:#fff; }

button.primary{ width:100%; background:var(--blue); color:#fff; border:none; border-radius:8px; padding:14px; font-size:14px; font-weight:600; cursor:pointer; }
button.primary:disabled{ opacity:0.5; cursor:default; }
button.ghost{ width:100%; background:transparent; border:1px solid var(--border); border-radius:8px; padding:14px; font-size:14px; font-weight:600; cursor:pointer; color:var(--text); }

/* ---- Mise en page du quiz ---- */

/* ---- Barre compacte au-dessus des questions : chrono + navigation ---- */
.quiz-topbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }

.timer-box{ display:flex; align-items:baseline; gap:6px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:6px 12px; flex-shrink:0; }
.timer-label{ font-size:10px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.timer-value{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--blue); }

.navgrid{ display:flex; flex-wrap:wrap; gap:4px; }
.navgrid button{ width:28px; height:28px; border-radius:5px; border:1px solid var(--border); background:var(--panel); font-family:var(--mono); font-size:12px; color:var(--text-muted); cursor:pointer; padding:0; }
.navgrid button.current{ background:var(--blue); color:#fff; border-color:var(--blue); font-weight:600; }
.navgrid button.done{ background:#fff; color:var(--blue); border-color:var(--blue); }

.qmeta{ font-size:12px; color:var(--text-muted); margin-bottom:8px; }
.qtext{ font-size:19px; font-weight:600; line-height:1.5; margin-bottom:20px; color:var(--text); }
.opt{ display:flex; align-items:flex-start; gap:10px; padding:14px; border:1px solid var(--border); border-radius:8px; margin-bottom:10px; cursor:pointer; background:var(--panel); }
.opt:hover{ border-color:var(--blue); }
.opt.selected{ border-color:var(--orange); background:#FBEFEC; }
.opt input{ margin-top:3px; }
.opt span{ font-size:15px; line-height:1.5; }

.quiz-warning{ margin-top:12px; padding:10px 14px; border-radius:8px; background:#FBEFEC; color:#8A4030; font-size:13px; font-weight:600; }

.navrow{ display:flex; justify-content:space-between; gap:12px; margin-top:16px; }
.navrow button{ flex:1; background:var(--panel); border:1px solid var(--border); border-radius:8px; color:var(--blue); font-size:15px; font-weight:600; cursor:pointer; padding:14px; }
.navrow button:hover{ border-color:var(--blue); }
.navrow button:disabled{ color:var(--text-muted); border-color:var(--border); cursor:default; background:var(--bg); }
.navrow button#nextBtn{ background:var(--blue); color:#fff; border-color:var(--blue); }

@media (max-width: 480px){
  .navgrid button{ width:24px; height:24px; font-size:11px; }
}

.rtable{ background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:20px; }
.rrow{ display:flex; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); font-size:14px; }
.rrow:last-child{ border-bottom:none; }
.rrow .k{ color:var(--text-2); }
.rrow .v{ font-weight:600; text-align:right; }
.feedback-pill{ display:inline-block; padding:3px 10px; border-radius:6px; font-size:13px; font-weight:600; }
.feedback-pill.pass{ background:#E3F3E9; color:#1F7A45; }
.feedback-pill.fail{ background:#FBEFEC; color:#8A4030; }

.actions{ display:flex; flex-direction:column; gap:10px; }
.status-line{ font-size:13px; color:var(--text-muted); text-align:center; margin-top:8px; min-height:18px; }
.status-line.error{ color:#8A4030; font-weight:600; }

.locked-note{ text-align:center; font-size:14px; color:var(--text-2); background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:14px; }

.lb-inline-header{ font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin:24px 0 10px; }
.lb-scroll{ max-height:420px; overflow-y:auto; border-radius:10px; }
.lb-preview-footer{ text-align:center; margin-top:10px; }
.lb-preview-footer a{ font-size:13px; color:var(--blue); text-decoration:none; font-weight:600; }
.lb-preview-footer a:hover{ text-decoration:underline; }

table.scoreboard{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; font-size:14px; }
table.scoreboard th{ text-align:left; background:var(--bg); font-size:12px; color:var(--text-muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border); }
table.scoreboard td{ padding:10px 12px; border-bottom:1px solid var(--border); }
table.scoreboard tr:last-child td{ border-bottom:none; }
.rank-pass{ color:#1F7A45; font-weight:600; }
.rank-fail{ color:var(--text-muted); }
.flag{ width:20px; height:15px; object-fit:cover; border-radius:2px; vertical-align:middle; margin-right:4px; border:1px solid var(--border); }

footer{ text-align:center; margin-top:26px; }
footer p{ font-family:var(--mono); font-size:11px; color:var(--text-muted); }
footer a{ color:var(--blue); text-decoration:none; }
footer a:hover{ text-decoration:underline; }
footer .copyright{ margin-top:6px; font-size:10px; color:var(--text-muted); opacity:0.8; }
.headline a{ display:flex; line-height:0; }

/* ---- Certificat ---- */
.cert-page{ display:flex; justify-content:center; padding:40px 16px; }
.cert{
  width:100%; max-width:800px; background:#fff; border:10px solid var(--blue);
  padding:50px 40px; text-align:center; position:relative;
}
.cert::before{
  content:""; position:absolute; inset:14px; border:2px solid var(--yellow);
  pointer-events:none;
}
.cert .eyebrow{ font-family:var(--mono); font-size:12px; color:var(--text-muted); letter-spacing:0.08em; margin-bottom:20px; }
.cert img.logo{ height:44px; margin-bottom:24px; }
.cert h1{ font-size:38px; color:var(--blue); margin-bottom:6px; }
.cert h2{ font-size:16px; font-weight:500; color:var(--text-2); margin-bottom:30px; }
.cert .name{ font-size:32px; font-weight:700; color:var(--orange); margin:18px 0; }
.cert .score{ font-family:var(--mono); font-size:26px; margin:14px 0; }
.cert .result{ display:inline-block; padding:6px 18px; border-radius:6px; font-weight:700; font-size:16px; margin-top:10px; }
.cert .result.pass{ background:#E3F3E9; color:#1F7A45; }
.cert .result.fail{ background:#FBEFEC; color:#8A4030; }
.cert .date{ margin-top:30px; font-family:var(--mono); font-size:13px; color:var(--text-muted); }
.cert .footer-brand{ margin-top:10px; font-size:12px; color:var(--text-muted); }
.cert .footer-brand a{ color:var(--text-muted); text-decoration:underline; }

.print-actions{ max-width:800px; margin:20px auto 0; display:flex; flex-wrap:wrap; gap:10px; }
.print-actions button{ flex:1; min-width:140px; }

@media print{
  body{ background:#fff; }
  .print-actions, .crumb, footer{ display:none; }
  .cert-page{ padding:0; }
  .cert{ border-width:6px; box-shadow:none; }
}