@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
:root{
  /* MINDTECH brand (échantillonné depuis le logo) */
  --brand:#C4162A; --brand-strong:#9E1120; --maroon:#7A1420; --ink:#17181A;
  --brand-tint:#FCEBED;
  /* tokens historiques repointés vers les rôles de marque */
  --navy:#17181A; --navy-2:#C4162A; --teal:#C4162A;
  --bg:#F6F6F7; --card:#FFFFFF;
  --border:#E5E5E8; --text:#1A1B1E; --muted:#6B6F76; --good:#1E8E5A; --bad:#C0182A; --warn:#B7791F;
  --amber-bg:#FFF7E8; --good-bg:#EAF7EF; --bad-bg:#FDECEA; --radius:4px;
  --serif: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased;}
.wrap{max-width:820px; margin:0 auto; padding:24px 20px 120px;}
h1,h2,h3{font-family:var(--serif); font-weight:700; margin:0;}

.start-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:40px 36px; margin-top:48px; box-shadow:0 1px 2px rgba(23,24,26,0.05);}
.brand-logo{display:block; width:180px; max-width:60%; height:auto; margin:0 auto 20px;}
.start-card h1{font-size:28px; color:var(--navy); margin-bottom:6px;}
.start-sub{color:var(--muted); font-size:15px; margin-bottom:24px;}
.rule-list{list-style:none; margin:0 0 26px; padding:0;}
.rule-list li{padding:10px 0 10px 28px; border-bottom:1px solid var(--border); font-size:14.5px; position:relative;}
.rule-list li:last-child{border-bottom:none;}
.rule-list li svg{position:absolute; left:0; top:12px;}
label.field-label{display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em;}
input[type=text]{width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:4px; font-size:15px; font-family:var(--sans); margin-bottom:22px;}
input[type=text]:focus{outline:2px solid var(--navy-2); outline-offset:1px;}
.btn{appearance:none; border:none; border-radius:4px; padding:13px 24px; font-size:14.5px; font-weight:600; cursor:pointer; font-family:var(--sans); transition:background .2s ease, border-color .2s ease, color .2s ease;}
.btn:focus-visible, .option:focus-within, input:focus-visible, textarea:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-strong);}
.btn-primary:disabled{background:#B7C1C9; cursor:not-allowed;}
.btn-ghost{background:transparent; color:var(--navy); border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--navy-2); color:var(--navy-2);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap;}

#examTopbar{position:sticky; top:0; z-index:20; background:rgba(246,246,247,0.96); backdrop-filter:blur(4px); border-bottom:1px solid var(--border); padding:10px 0;}
.topbar-inner{max-width:820px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:18px;}
.clock{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:20px; font-weight:700; color:var(--navy); background:#fff; border:1px solid var(--border); border-radius:8px; padding:6px 12px; min-width:104px; justify-content:center;}
.clock.low{color:var(--bad); border-color:var(--bad);}
.progress-segments{display:flex; gap:4px; flex:1;}
.seg{flex:1; height:8px; border-radius:4px; background:var(--border);}
.seg.done{background:var(--teal);}
.segs-col{flex:1;}
.violation-pill{font-family:var(--mono); font-size:12px; padding:5px 10px; border-radius:20px; background:var(--amber-bg); color:var(--warn); border:1px solid #F0C36D; white-space:nowrap;}
.violation-pill.zero{background:#fff; color:var(--muted); border-color:var(--border);}

.section-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin:26px 0; overflow:hidden;}
.section-head{background:var(--ink); color:#fff; padding:13px 20px; display:flex; align-items:baseline; gap:12px;}
.section-head .badge{font-family:var(--mono); font-weight:700; font-size:13px; background:transparent; color:#fff; padding:0; opacity:.85;}
.section-head h2{font-size:18px; color:#fff;}
.section-head .time{margin-left:auto; font-size:13px; opacity:.85; font-family:var(--mono);}
.section-body{padding:6px 20px 18px;}

.question{padding:18px 0; border-bottom:1px solid var(--border);}
.question:last-child{border-bottom:none;}
.q-text{font-size:15.5px; font-weight:600; margin-bottom:12px; line-height:1.45;}
.q-text .qnum{color:var(--navy-2); margin-right:6px;}
.options{display:flex; flex-direction:column; gap:8px;}
.option{display:flex; align-items:flex-start; gap:11px; border:1px solid var(--border); border-radius:4px; padding:11px 14px; cursor:pointer; font-size:14.5px; transition:border-color .12s;}
.option:hover{border-color:#B7B7BC;}
.option.selected{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand);}
.option input{margin-top:3px; accent-color:var(--brand);}
.option .letter{font-weight:700; color:var(--brand); min-width:16px;}

.open-q{font-size:14px; color:var(--muted); font-style:italic; margin-bottom:8px;}
textarea{width:100%; border:1px solid var(--border); border-radius:4px; padding:12px; font-family:var(--mono); font-size:13.5px; resize:vertical; background:#FAFAFA;}
textarea.answer-code{min-height:150px;}
textarea.answer-line{min-height:60px;}
.field-row{margin-bottom:16px;}
.field-row label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--navy);}
.code-block{background:#FAFAFA; border:1px solid var(--border); border-radius:4px; padding:14px 16px; margin:10px 0 16px; font-family:var(--mono); font-size:13px; white-space:pre; overflow-x:auto; line-height:1.55;}
.lang-choice{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.lang-choice label{border:1px solid var(--border); border-radius:4px; padding:7px 14px; font-size:14px; cursor:pointer;}
.lang-choice input{margin-right:6px; accent-color:var(--brand);}
.lang-choice label.selected{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand);}

#submitBar{position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--border); padding:14px 20px; display:flex; justify-content:center; gap:14px; align-items:center; z-index:20; box-shadow:0 -1px 6px rgba(23,24,26,0.05);}
#submitBar .status{font-size:13px; color:var(--muted); font-family:var(--mono);}

.score-hero{background:none; color:var(--ink); border-top:2px solid var(--ink); border-bottom:1px solid var(--border); border-radius:0; padding:18px 0; margin:24px 0 18px; display:flex; align-items:baseline; gap:24px; flex-wrap:wrap;}
.score-big{font-family:var(--sans); font-size:44px; font-weight:700; line-height:1; color:var(--ink); letter-spacing:-.015em;}
.score-big span{font-size:18px; font-weight:400; opacity:.55;}
.score-hero .hero-txt{max-width:420px; font-size:13px; color:var(--muted);}
.result-table{width:100%; border-collapse:collapse; margin:14px 0 8px;}
.result-table td, .result-table th{padding:9px 10px; border-bottom:1px solid var(--border); font-size:14px; text-align:left;}
.result-table th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
.tag{display:inline-block; font-family:var(--mono); font-size:10px; font-weight:600; padding:2px 6px; border:1px solid currentColor; border-radius:2px; text-transform:uppercase; letter-spacing:.05em; background:none; vertical-align:middle;}
.tag-good{color:var(--good);}
.tag-bad{color:var(--brand);}
.tag-manual{color:var(--warn);}

.review-item{padding:15px 0; border-bottom:1px solid var(--border);}
.review-item:last-child{border-bottom:none;}
.review-item .rq{font-weight:600; font-size:14px; margin-bottom:6px; line-height:1.45; position:relative; padding-right:74px;}
.review-item .rq::after{position:absolute; right:0; top:2px; font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:600;}
.review-item.correct .rq::after{content:"Juste"; color:var(--muted);}
.review-item.wrong .rq::after{content:"À revoir"; color:var(--brand);}
.review-item .ra{font-size:13px; color:var(--muted); margin-bottom:2px;}
.review-item.wrong .ra:last-child{color:var(--ink);}
.practical-block{border:none; border-top:1px solid var(--border); border-radius:0; padding:18px 0 6px; margin-bottom:0;}
.practical-block:first-of-type{border-top:none; padding-top:4px;}
.practical-block h3{font-size:15px; color:var(--ink); margin-bottom:8px;}
.candidate-answer{background:#FAFAFA; border:1px solid var(--border); border-radius:3px; padding:11px 13px; font-family:var(--mono); font-size:12.5px; white-space:pre-wrap; margin-top:8px; color:#2A2A2A; overflow-x:auto;}
.test-line{display:flex; align-items:center; gap:8px; font-size:13.5px; margin:4px 0; font-family:var(--mono);}

footer.note{font-size:12.5px; color:var(--muted); text-align:center; margin-top:40px;}
.hidden{display:none !important;}

.modal-overlay{position:fixed; inset:0; background:rgba(23,24,26,0.82); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;}
.modal-card{background:#fff; border-radius:var(--radius); padding:32px; max-width:440px; text-align:center;}
.modal-card.warn{border-top:5px solid var(--warn);}
.modal-card.danger{border-top:5px solid var(--bad);}
.modal-card h2{font-size:20px; margin-bottom:12px;}
.modal-card p{font-size:14.5px; color:var(--muted); line-height:1.5; margin-bottom:22px;}

/* ===== Résultats : rapport d'évaluation (aspect document, moins "dashboard") ===== */
.report-head{display:flex; align-items:center; gap:20px; padding:4px 0 16px; border-bottom:2px solid var(--ink); margin-top:6px;}
.report-head .rh-logo{width:108px; height:auto; flex:none;}
.report-head .rh-title{font-family:var(--serif); font-weight:700; font-size:19px; color:var(--ink); line-height:1.2; letter-spacing:-.01em;}
.report-head .rh-sub{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-top:6px;}
.report-head .rh-right{margin-left:auto; text-align:right; font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.8;}
.report-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 28px; margin:22px 0 6px;}
.report-meta .cell{padding:11px 0; border-top:1px solid var(--border);}
.report-meta .k{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:5px;}
.report-meta .v{font-size:15px; font-weight:600; color:var(--ink);}
.summary-card{display:flex; align-items:baseline; gap:22px; border-top:2px solid var(--ink); border-bottom:1px solid var(--border); border-radius:0; padding:16px 0; margin:22px 0; flex-wrap:wrap;}
.summary-card .score{font-family:var(--sans); font-size:42px; font-weight:700; color:var(--ink); line-height:1; letter-spacing:-.015em;}
.summary-card .score span{font-size:17px; color:var(--muted); font-weight:400;}
.summary-card .sc-note{font-size:12.5px; color:var(--muted); max-width:380px; line-height:1.5;}
.report-h{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink); font-weight:600; margin:30px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--ink);}
.report-callout{border-top:1px solid var(--ink); padding:9px 0 0; margin:16px 0; font-size:13px; color:var(--text); line-height:1.5;}
.report-callout::before{content:"À noter"; display:block; font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; font-weight:600;}
.report-callout.bad{border-top-color:var(--brand);}
.report-callout.bad::before{content:"Alerte"; color:var(--brand);}

.review-item .ra-exp{color:var(--ink); margin-top:5px;}

/* G4 — remise en ordre des étapes (candidat) */
.g4-order{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.g4-step{display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:4px; padding:9px 12px;}
.g4-pos{width:56px; padding:7px; border:1px solid var(--border); border-radius:4px; font-family:var(--sans); font-size:14px; background:#fff;}
.g4-pos:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand);}
.g4-text{font-size:14px; line-height:1.4;}

/* Guide de correction & entretien (admin) */
.guide-block{border-top:1px solid var(--border); padding:16px 0;}
.guide-block h4{font-size:14.5px; color:var(--ink); margin:0 0 10px;}
.guide-block .guide-row{font-size:13.5px; color:var(--text); margin-bottom:10px; line-height:1.5;}
.guide-block .lbl{display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:4px;}
.guide-block .guide-oral ul{margin:6px 0 0; padding-left:18px;}
.guide-block .guide-oral li{font-size:13.5px; margin-bottom:6px; line-height:1.45;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
}