/* Apex Drive 3D — styles v1 */
:root{
  --bg:#0b1622; --panel:#12202f; --panel2:#0e1a28; --line:#1f3349;
  --txt:#e8f1fa; --muted:#9db2c7; --accent:#2f81f7; --green:#3fb950;
  --amber:#d29922; --red:#f85149; --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
header{
  padding:10px 14px; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; z-index:20;
}
header h1{font-size:17px; margin:0; letter-spacing:.3px}
header .ver{font-size:11px; color:var(--muted); border:1px solid var(--line);
  border-radius:20px; padding:2px 9px; white-space:nowrap}
header .sub{font-size:11px; color:var(--muted); margin-left:auto; text-align:right; line-height:1.35}
#stage{position:relative; flex:1; min-height:0}
#map{position:absolute; inset:0}
.banner{
  position:absolute; left:10px; right:10px; z-index:10;
  background:rgba(14,26,40,.94); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 12px; font-size:15px; line-height:1.4; display:none;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
}
.banner.show{display:block}
#examinerBanner{top:10px; border-left:5px solid var(--accent)}
#examinerBanner .qui{font-size:11px; color:var(--accent); font-weight:700;
  text-transform:uppercase; letter-spacing:.8px; margin-bottom:3px}
#guidanceBanner{top:10px; margin-top:0; border-left:5px solid var(--green); transform:translateY(0)}
#examinerBanner.show ~ #guidanceBanner{top:auto}
#guidanceBanner.show{top:118px}
#speedWidget{
  position:absolute; right:10px; bottom:118px; z-index:10; text-align:center;
  background:rgba(14,26,40,.94); border:1px solid var(--line); border-radius:var(--radius);
  padding:8px 12px; min-width:96px;
}
#speedWidget .v{font-size:30px; font-weight:800}
#speedWidget .u{font-size:11px; color:var(--muted)}
#speedWidget .lim{font-size:11px; margin-top:4px; color:var(--amber); line-height:1.3}
#checksPanel{
  position:absolute; left:10px; bottom:118px; z-index:10; display:none;
  flex-direction:column; gap:8px; max-width:62%;
}
#checksPanel.show{display:flex}
.checkBtn{
  border:1px solid var(--accent); background:rgba(47,129,247,.16); color:var(--txt);
  border-radius:12px; padding:12px 14px; font-size:15px; font-weight:700; text-align:left;
}
.checkBtn .cd{color:var(--amber); font-weight:800}
.checkBtn:active{background:rgba(47,129,247,.35)}
#controls{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:10;
  display:flex; gap:8px; flex-wrap:wrap;
}
.btn{
  flex:1 1 auto; border:none; border-radius:12px; padding:14px 10px;
  font-size:15px; font-weight:800; color:#fff; background:var(--accent);
}
.btn.second{background:#1c3a5e}
.btn.warn{background:#7a2e2e}
.btn:disabled{opacity:.45}
#progress{position:absolute; left:0; right:0; bottom:0; height:5px; background:#1a2c42; z-index:11}
#progress i{display:block; height:100%; width:0; background:var(--green)}
#reportPanel{
  position:absolute; inset:0; z-index:30; background:rgba(7,13,20,.97);
  overflow-y:auto; padding:16px; display:none;
}
#reportPanel.show{display:block}
#reportPanel h2{margin:4px 0 10px; font-size:20px}
.verdict{
  font-size:19px; font-weight:900; border-radius:12px; padding:12px; text-align:center; margin:10px 0;
}
.verdict.ok{background:rgba(63,185,80,.16); border:1px solid var(--green); color:var(--green)}
.verdict.mid{background:rgba(210,153,34,.14); border:1px solid var(--amber); color:var(--amber)}
.verdict.ko{background:rgba(248,81,73,.14); border:1px solid var(--red); color:var(--red)}
.fault{border:1px solid var(--line); border-left:5px solid var(--amber); border-radius:10px;
  padding:9px 11px; margin:8px 0; font-size:14px; background:var(--panel2)}
.fault.majeure{border-left-color:var(--red)}
.fault.echec{border-left-color:var(--red); background:rgba(248,81,73,.08)}
.fault .g{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px}
.fault .t{color:var(--muted); font-size:12px}
.stats{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.stat{flex:1 1 30%; background:var(--panel2); border:1px solid var(--line);
  border-radius:10px; padding:8px; text-align:center; font-size:13px}
.stat b{display:block; font-size:18px}
.mention{font-size:12px; color:var(--muted); line-height:1.5; margin:10px 0}
footer{
  background:var(--panel); border-top:1px solid var(--line); z-index:20;
  font-size:11px; color:var(--muted); line-height:1.5; padding:8px 14px;
  max-height:96px; overflow-y:auto;
}
footer b{color:var(--amber)}
#toast{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:40;
  background:rgba(14,26,40,.96); border:1px solid var(--red); color:var(--txt);
  border-radius:12px; padding:14px 18px; font-size:15px; display:none; max-width:86%;
  text-align:center;
}
#toast.show{display:block}
/* (v1 : l'ancien marqueur triangle+point a été remplacé par la voiture 3D .car3d) */
@media (min-width:760px){
  #checksPanel{max-width:320px}
  #controls{justify-content:flex-start}
  .btn{flex:0 1 auto; padding:14px 22px}
}

/* ===== Apex Drive 3D — styles v2 (ajouts : verrous, HUD, cibles, voiture 3D) ===== */
#deviceGate:not([hidden]){
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:24px;
}
.gateCard{max-width:420px; text-align:center; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:28px 22px}
.gateCard h1{margin:0 0 12px; font-size:24px}
.gateCard p{font-size:16px; line-height:1.6; color:var(--txt)}
#safetyScreen:not([hidden]){
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(7,13,20,.98); padding:20px;
}
.safetyCard{max-width:440px; background:var(--panel); border:2px solid var(--amber);
  border-radius:var(--radius); padding:22px}
.safetyCard h2{margin:0 0 10px; font-size:21px; color:var(--amber)}
.safetyCard p{font-size:14px; line-height:1.55; color:var(--txt)}
.safetyCard b{color:var(--amber)}
.safetyCheck{display:flex; gap:10px; align-items:flex-start; margin:16px 0;
  font-size:15px; font-weight:700; cursor:pointer}
.safetyCheck input{width:24px; height:24px; margin:0; flex:0 0 auto; accent-color:var(--green)}
.safetyCard .btn{width:100%; margin-top:6px}
#hud:not([hidden]){
  position:absolute; left:10px; top:10px; z-index:12; display:flex; gap:12px; align-items:center;
  background:rgba(7,13,20,.92); border:2px solid var(--green); border-radius:var(--radius);
  padding:10px 14px; max-width:min(92%, 430px);
  box-shadow:0 4px 18px rgba(0,0,0,.5);
}
#hudArrow{font-size:56px; font-weight:900; color:var(--green); line-height:1;
  text-shadow:0 0 14px rgba(63,185,80,.7)}
#hudMain{display:flex; flex-direction:column; gap:2px}
#hudDist{font-size:26px; font-weight:900; color:#fff}
#hudNext{font-size:14px; font-weight:700; color:var(--green)}
#hudStreet{font-size:12px; color:var(--muted)}
#hudProg{font-size:12px; color:var(--muted)}
#mapBadge:not([hidden]){
  position:absolute; left:50%; bottom:64px; transform:translateX(-50%); z-index:12;
  background:rgba(14,26,40,.95); border:1px solid var(--amber); color:var(--txt);
  border-radius:12px; padding:10px 14px; font-size:13px; max-width:88%; text-align:center;
}
.target{
  width:34px; height:34px; border-radius:50%;
  background:rgba(210,153,34,.9); border:3px solid #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 10px rgba(0,0,0,.6);
}
.target span{font-size:9px; font-weight:800; color:#0b1622; text-align:center; line-height:1.1;
  padding:0 2px; overflow:hidden}
.target.active{background:var(--green); border-color:#fff; width:44px; height:44px;
  box-shadow:0 0 18px rgba(63,185,80,.95)}
.target.active span{font-size:10px}
.target.done{background:rgba(157,178,199,.55); border-color:#9db2c7}
.wpDot{width:14px; height:14px; border-radius:50%; background:#d29922; border:2px solid #fff}
.maneuverDot{width:22px; height:22px; border-radius:50%; background:#f85149;
  border:3px solid #fff; box-shadow:0 0 14px rgba(248,81,73,.9)}
.customDot{width:28px; height:28px; border-radius:50%; background:var(--accent);
  border:2px solid #fff; color:#fff; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center}
.car3d{width:44px; height:68px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.car3d .carRot{width:100%; height:100%; transform-origin:50% 50%}
#moreMenu:not([hidden]){
  position:absolute; left:10px; right:10px; bottom:76px; z-index:14;
  display:flex; flex-direction:column; gap:8px;
  background:rgba(14,26,40,.97); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px;
}
#moreMenu .btn{flex:none}
.parcoursLabel{font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:6px}
#routeSelect{background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  border-radius:10px; padding:12px; font-size:15px}
.linkbtn{text-decoration:none; display:block; text-align:center}
#customBar:not([hidden]){
  position:absolute; left:10px; right:10px; bottom:76px; z-index:14;
  display:flex; gap:8px; align-items:center;
  background:rgba(14,26,40,.97); border:1px solid var(--accent); border-radius:var(--radius);
  padding:10px 12px;
}
#customHint{font-size:13px; color:var(--txt); flex:1}
#customBar .btn{flex:0 0 auto; padding:12px 14px}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--muted)}
.scoreLine{font-size:17px; text-align:center; margin:6px 0; color:var(--txt)}
.scoreLine b{font-size:26px; color:var(--green)}
#securityPanel{
  position:absolute; inset:0; z-index:30; background:rgba(7,13,20,.97);
  overflow-y:auto; padding:16px; display:none;
}
#securityPanel.show{display:block}
#securityPanel h2{margin:4px 0 10px; font-size:20px; color:var(--amber)}
#securityBody p{font-size:14px; line-height:1.6}
#reportPanel .btn{margin-top:8px}
#examinerBanner.show ~ #hud{top:132px}
@media (min-width:760px){
  #hud{max-width:430px}
}

/* ===== v3 : écran allégé pendant la navigation ===== */
/* Seuls « Terminer » (et « Consigne suivante » quand elle s'applique)
   restent visibles : fini les 5 gros boutons sur la carte en roulant. */
#btnNext{display:none}
#btnNext.on{display:block}
#stage.in-session #controls .btn{display:none}
#stage.in-session #controls #btnStop{display:block}
#stage.in-session #controls #btnNext.on{display:block}