:root{--bg:#141a16;--ink:#f2ead8;--red:#c1442e;--green:#6fcf6a;--panel:#1f2a23}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:ui-monospace,"Courier New",monospace}
body{display:grid;place-items:center;overflow:hidden}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#stage{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden;background:#000;flex:none}
#c{width:100%;height:100%;display:block;image-rendering:crisp-edges;image-rendering:pixelated}
#c:focus-visible{outline-offset:-4px}
#intro{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;gap:.7em;background:rgba(20,26,22,.97);text-align:center;padding:1em;overflow:auto}
#intro>:first-child{margin-top:auto}
#intro>:last-child{margin-bottom:auto}
#intro h1{margin:0;font-size:clamp(1.4rem,5vw,3rem);letter-spacing:.04em;text-shadow:3px 3px 0 var(--red)}
#intro p{margin:0;max-width:38em;font-size:clamp(.8rem,1.8vw,1rem);line-height:1.5}
.btn,#lk,#vx,#vo{font:inherit;color:var(--bg);background:var(--ink);border:0;padding:.7em 1.4em;cursor:pointer;box-shadow:3px 3px 0 var(--red);text-decoration:none;min-height:2.6em}
.btn{font-size:clamp(.85rem,2vw,1.1rem)}
.btn:disabled{opacity:.7;cursor:wait}
.btn:hover,.btn:focus-visible,#lk:hover,#vx:hover,#vo:hover,#opts button:hover{background:var(--green)}
#intro a{color:var(--ink);font-size:clamp(.75rem,1.5vw,.9rem)}
#stat{color:var(--green)}
#map{max-width:40em;width:100%;font-size:clamp(.75rem,1.5vw,.9rem);text-align:left}
#map summary{cursor:pointer;text-align:center;padding:.4em}
#sm{max-height:36vh;overflow:auto;columns:14em;gap:1em;padding:.4em .8em;border:2px solid var(--ink);background:var(--panel)}
#sm h2{font-size:1em;margin:.5em 0 .2em;color:var(--green);break-after:avoid}
#sm ul{margin:0;padding-left:1.1em}
#sm li{margin:.15em 0;break-inside:avoid}
#dlg{position:absolute;left:3%;right:3%;bottom:4%;display:none;background:var(--panel);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--red);padding:.7em 1em;font-size:clamp(.7rem,1.9vw,1.05rem);line-height:1.45}
#dlg b{color:var(--green)}
#dlg p{margin:.3em 0 0;min-height:2.9em}
#lk{display:none;padding:.3em .8em;font-size:inherit;margin-top:.3em;min-height:2.2em}
#dlg small{float:right;opacity:.85;animation:bl 1.2s steps(2) infinite}
@keyframes bl{50%{opacity:.4}}
#vw{position:fixed;inset:2vh 2vw;z-index:15;display:none;flex-direction:column;background:var(--panel);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--red)}
#vb{display:flex;justify-content:space-between;align-items:center;gap:.5em;padding:.4em .6em;font-size:clamp(.7rem,1.6vw,.95rem)}
#vb b{color:var(--green);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vb span{display:flex;gap:.5em;flex:none}
#vx,#vo{padding:.3em .7em;font-size:inherit;min-height:2.2em;display:inline-flex;align-items:center}
#vf{flex:1;width:100%;border:0;background:#fff}
#pad{position:absolute;inset:auto 0 2% 0;display:none;justify-content:space-between;padding:0 3%;pointer-events:none}
#pad div{display:flex;gap:.6em;pointer-events:auto}
#cust{display:flex;gap:.8em;align-items:center;background:var(--panel);border:2px solid var(--ink);padding:.5em .7em;margin:0;min-width:0}
#pv{width:clamp(48px,9vw,90px);image-rendering:pixelated;background:linear-gradient(#6ea8e0,#fadcaa 70%,#7ec850 70%);border:2px solid var(--ink)}
#opts{display:grid;grid-template-columns:auto auto auto auto;gap:.2em .5em;align-items:center;font-size:clamp(.7rem,1.4vw,.85rem);text-align:left}
#opts button{font:inherit;background:var(--ink);color:var(--bg);border:0;min-width:2.4em;min-height:2.2em;cursor:pointer}
#rnd{margin-top:.5em;padding:.3em 1em;font-size:clamp(.7rem,1.5vw,.9rem);min-height:2.4em}
#pad button{width:clamp(3rem,10vw,4.4rem);height:clamp(3rem,10vw,4.4rem);font:inherit;font-size:1.3rem;background:rgba(242,234,216,.3);color:var(--ink);border:2px solid var(--ink);touch-action:none}
@media (pointer:coarse){#pad.on{display:flex}#opts button{min-width:44px;min-height:44px}}
@media (prefers-reduced-motion:reduce){#dlg small{animation:none}}

/* messages plus discrets */
#dlg{left:6%;right:6%;max-width:60%;margin:0 auto;bottom:3%;border-width:2px;box-shadow:3px 3px 0 var(--red);padding:.35em .7em;font-size:clamp(.55rem,1.2vw,.78rem);line-height:1.35}
#dlg p{min-height:2.4em}
@media (max-width:700px){#dlg{max-width:none}}

/* menu Échap */
a.btn{display:inline-flex;align-items:center}
#menu{position:fixed;inset:0;z-index:25;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.8em;background:rgba(20,26,22,.92)}
#menu h2{margin:0 0 .3em;font-size:clamp(1.2rem,4vw,2rem);text-shadow:3px 3px 0 var(--red)}
#bm{position:absolute;top:2%;right:2%;display:none;width:2.6rem;height:2.6rem;font:inherit;font-size:1.2rem;background:rgba(242,234,216,.3);color:var(--ink);border:2px solid var(--ink)}
@media (pointer:coarse){#bm{display:block}}

/* ouverture douce des pages */
@keyframes vin{from{opacity:0}to{opacity:1}}
#vw{animation:vin .35s ease}
#vf{position:relative;z-index:1;opacity:0;filter:brightness(.75);background:var(--panel)}
#vf.on{opacity:1;filter:none;transition:opacity .8s ease,filter 1s ease}
#vl{position:absolute;left:0;right:0;top:48%;text-align:center;opacity:.8;animation:bl 1.2s steps(2) infinite;pointer-events:none}
#jr{margin:0 0 .6em;max-width:30em;text-align:center;line-height:1.6;font-size:clamp(.7rem,1.6vw,.9rem)}
@media (prefers-reduced-motion:reduce){#vw{animation:none}#vf.on{transition:none}#vl{animation:none}}

/* entrée : plus soignée, aux couleurs du blog */
#intro{background:radial-gradient(ellipse at 50% 0,#27382d 0,#141a16 68%)}
#logo{image-rendering:pixelated;width:64px;height:64px;animation:fl 3s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-6px)}}
#intro h1{font-size:clamp(1.8rem,7vw,3.6rem)}
#cust{border-radius:0;box-shadow:5px 5px 0 var(--red);padding:.8em 1em}
#pv{width:clamp(64px,12vw,120px);background:linear-gradient(#2f5a46,#8fb38a 70%,#4a7a3a 70%)}
#skinfr{grid-column:1/-1;margin:.4em 0 0;min-height:1.3em;font-size:clamp(.65rem,1.3vw,.8rem);color:var(--green)}
kbd{display:inline-block;background:var(--panel);border:1px solid var(--ink);border-bottom-width:3px;padding:.05em .45em;margin:0 .2em 0 .7em;font:inherit;font-size:.9em}
#go{font-size:clamp(1rem,2.6vw,1.4rem);padding:.8em 2.4em;animation:pu 1.6s ease-in-out infinite}
@keyframes pu{50%{box-shadow:3px 3px 0 var(--red),0 0 18px #6fcf6a66}}
#skinw{position:fixed;inset:0;z-index:26;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.8em;background:rgba(20,26,22,.96)}
#skinw h2{margin:0}
#dlg{max-height:60%;overflow:auto}
@media (prefers-reduced-motion:reduce){#logo,#go{animation:none}}

/* carnet et gare */
#cnw,#trw{position:fixed;inset:0;z-index:26;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.8em;background:rgba(20,26,22,.96);padding:1em}
#cnw h2,#trw h2{margin:0}
#cl{list-style:none;padding:0;margin:0;columns:2;column-gap:2em;max-width:34em;max-height:60vh;overflow:auto;font-size:clamp(.7rem,1.5vw,.9rem)}
#cl li{display:flex;justify-content:space-between;gap:1em;padding:.15em 0;break-inside:avoid}
#cl .ok{color:var(--green)}#cl .no{opacity:.5}#cl .hd{margin-top:.6em;color:var(--green);column-span:all}
#tl{display:flex;flex-wrap:wrap;gap:.5em;justify-content:center;max-width:44em;max-height:55vh;overflow:auto;padding:.3em}
#tl .btn{font-size:clamp(.65rem,1.4vw,.85rem);padding:.4em .8em;min-height:2em}

/* carte de lecture, accessibilité */
#cl{max-height:32vh}
#cmap{max-width:44em;width:100%;max-height:28vh;overflow:auto;font-size:.7rem}
#cmap div{display:flex;flex-wrap:wrap;gap:2px;align-items:center;margin:.2em 0}
#cmap span{margin-right:.6em;min-width:9em}
#cmap i{width:8px;height:8px;background:#2a3a30;border:1px solid #4a5a50}
#cmap i.r{background:var(--green)}#cmap i.n{background:var(--red)}
#mvl{display:flex;gap:.6em;align-items:center}
body.red *{animation:none!important;transition:none!important}