*{box-sizing:border-box}
.skip-link{position:fixed;z-index:100;left:16px;top:12px;padding:12px 16px;background:#fff;color:#111;transform:translateY(-160%)}.skip-link:focus{transform:none}a:focus-visible,button:focus-visible{outline:3px solid #1769ff;outline-offset:4px}.demo-fallback{padding:20px;font-weight:700}
:root{--paper:#f4f2ec;--ink:#111;--line:#d4d0c7}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.demo-header{height:68px;padding:0 clamp(20px,4vw,68px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand img{display:block;width:190px;height:auto;max-height:38px}
.back{color:#111;text-decoration:none;font-size:13px;font-weight:700}
.demo-intro{padding:55px clamp(20px,6vw,85px) 35px}
.kicker{font-size:11px;letter-spacing:.14em;font-weight:800;margin:0 0 14px}
.demo-intro h1{font-size:clamp(40px,6vw,82px);line-height:.98;letter-spacing:-.055em;margin:0 0 18px}
.demo-intro>p:not(.kicker):not(.headphones){font-size:18px;line-height:1.5;max-width:760px;margin:0}
.headphones{font-size:13px;font-weight:700;margin:18px 0 0}
.sim-shell{padding:0 clamp(20px,6vw,85px) 70px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:30px;align-items:start}
/* La carte est volontairement sans cadre ni fond intermédiaire : le parchemin s'intègre directement à la page. */
.map-wrap{position:relative;overflow:hidden;border:0;background:transparent;touch-action:none;user-select:none;line-height:0}
.map-wrap>img{display:block;width:100%;height:auto;pointer-events:none;margin:0;padding:0}
.walker{position:absolute;left:10%;top:84%;width:20px;height:20px;border-radius:50%;border:3px solid #fff;background:#111;box-shadow:0 0 0 2px #111,0 0 0 13px rgba(255,255,255,.23);transform:translate(-50%,-50%);z-index:5;transition:box-shadow .15s ease;pointer-events:none}
.start-hint{position:absolute;left:4%;bottom:4%;background:rgba(244,242,236,.93);padding:8px 11px;font-size:12px;font-weight:700;border:1px solid rgba(17,17,17,.18);transition:opacity .4s ease;line-height:1.2}
.start-hint.hidden{opacity:0;pointer-events:none}
.controls{position:sticky;top:20px}
.primary{width:100%;border:0;border-radius:999px;padding:15px 17px;font-weight:800;font-size:14px;cursor:pointer;background:#111;color:#fff}
.dpad{width:162px;margin:34px auto 14px;display:grid;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px);gap:6px}
.dpad button,.dpad-dot{border:1px solid #999;background:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;touch-action:none;user-select:none}
.dpad button{cursor:pointer}
.dpad button:active{background:#ddd9cf}
.dpad-dot{font-size:13px;background:#111;color:#fff}
.keyboard-note{font-size:12px;line-height:1.3;color:#666;text-align:center;white-space:nowrap;margin:0 auto}
.heard{border-top:1px solid var(--line);margin-top:26px;padding-top:20px}
.heard-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin-bottom:7px}
.heard strong{font-size:17px;line-height:1.3}
.explain{background:#111;color:#f4f2ec;padding:55px clamp(20px,6vw,85px)}
.explain p{font-size:clamp(23px,3.4vw,44px);line-height:1.15;letter-spacing:-.035em;max-width:1000px;margin:0}
@media(max-width:800px){
 .demo-header{height:60px}.brand img{width:150px}.back{font-size:12px}
 .demo-intro{padding-top:38px}.demo-intro h1{font-size:44px}
 .sim-shell{grid-template-columns:1fr;padding-bottom:50px}
 .controls{position:static}
 .map-wrap{width:100%}
 .primary{max-width:420px;display:block;margin-left:auto;margin-right:auto}
 .keyboard-note{display:none}
 .dpad{margin-top:25px}
}
/* V12.4 | incrustation directe de la carte */
.map-wrap{border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important;padding:0!important;margin:0!important}
.map-wrap>img{border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important;margin:0!important;padding:0!important}
.start-hint{border:0}

/* V12.6 | commande unique d'expérience */
#startAudio{display:flex;align-items:center;justify-content:center;gap:9px;line-height:1}
#startAudio .control-icon{display:inline-block;flex:0 0 auto}
#startAudio .play-icon{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor;margin-left:2px}
#startAudio .stop-icon{width:11px;height:11px;background:currentColor;border-radius:1px}

.desktop-move-note{
  margin:34px auto 18px;
  max-width:310px;
  text-align:center;
  line-height:1.45;
  font-size:15px;
}

/* V12.20 : aucune consigne flottante sur la carte */
.map-hint,.map-instruction,.click-hint{display:none!important}
#startBtn{font-size:22px;line-height:1}