/* ==========================================================================
   Base, scène, effets d'ambiance, HUD, chargement
   ========================================================================== */

@font-face { font-family: "Jersey 10"; src: url("../../assets/fonts/Jersey10.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../../assets/fonts/Silkscreen-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../../assets/fonts/Silkscreen-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "VT323"; src: url("../../assets/fonts/VT323.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #f7efe6;
  --ink-dim: #bcaebb;
  --night: #07050b;
  --panel: rgba(16, 11, 22, 0.86);
  --panel-solid: #120c19;
  --line: rgba(255, 236, 214, 0.18);
  --red: #e8253f;
  --orange: #ff8a3d;
  --amber: #ffc44d;
  --violet: #9b5cff;
  --f-px: "Jersey 10", "Arial Narrow", sans-serif;
  --f-hud: "Silkscreen", "Jersey 10", ui-monospace, monospace;
  --f-mono: "VT323", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --notch: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--f-mono);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
kbd { font-family: var(--f-hud); }
:focus-visible { outline: 3px solid #fff2c8; outline-offset: 2px; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  padding: 8px 12px; background: var(--amber); color: #1a1006; font-family: var(--f-hud); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Scène ---------- */
.stage { position: fixed; inset: 0; overflow: hidden; opacity: 0; }
body.is-ready .stage { animation: stage-in 1.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes stage-in {
  from { opacity: 0; transform: scale(1.035); filter: brightness(.4); }
  to { opacity: 1; transform: none; filter: none; }
}

.backdrop { position: absolute; inset: -60px; }
.backdrop-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(34px) brightness(.42) saturate(1.25);
  opacity: 0; transition: opacity .9s ease;
}
.backdrop-img.is-active { opacity: 1; }

.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.scene {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform-origin: 0 0;
  isolation: isolate;
  backface-visibility: hidden;
}
.scene-img {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
/* Bords adoucis du gros plan pendant le travelling */
.scene.is-feather {
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  mask-composite: intersect;
}

/* ---------- Effets d'ambiance ---------- */
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx > * { position: absolute; }
.fx-glow {
  opacity: var(--min);
  animation: fx-pulse var(--dur) ease-in-out var(--delay) infinite alternate;
}
.fx-glow.is-flicker { animation: fx-flicker var(--dur) steps(1, end) var(--delay) infinite; }
@keyframes fx-pulse { from { opacity: var(--min); } to { opacity: var(--max); } }
@keyframes fx-flicker {
  0% { opacity: var(--max); }
  9% { opacity: calc(var(--min) + (var(--max) - var(--min)) * .55); }
  17% { opacity: var(--max); }
  31% { opacity: calc(var(--min) + (var(--max) - var(--min)) * .8); }
  44% { opacity: var(--min); }
  52% { opacity: calc(var(--min) + (var(--max) - var(--min)) * .9); }
  68% { opacity: calc(var(--min) + (var(--max) - var(--min)) * .65); }
  81% { opacity: var(--max); }
  90% { opacity: calc(var(--min) + (var(--max) - var(--min)) * .4); }
}

.fx-lava {
  overflow: hidden;
  border-radius: 45% 45% 30% 30% / 18% 18% 12% 12%;
  mix-blend-mode: screen;
  opacity: .75;
}
.fx-lava i {
  position: absolute; bottom: -20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 90, .95), rgba(255, 110, 30, .55) 60%, transparent);
  animation: fx-lava var(--dur) ease-in-out var(--delay) infinite alternate;
}
@keyframes fx-lava {
  0% { transform: translateY(0) scale(1, 1); }
  45% { transform: translateY(calc(var(--travel) * -.55)) scale(.88, 1.18); }
  100% { transform: translateY(calc(var(--travel) * -1.02)) scale(1.06, .9); }
}

.fx-rgb {
  background: linear-gradient(90deg, #ff2050, #ffb400, #38ff6a, #00c8ff, #8a40ff, #ff2050) 0 0 / 200% 100%;
  mix-blend-mode: color-dodge;
  opacity: .42;
  animation: fx-rgb 7s linear infinite;
}
@keyframes fx-rgb { to { background-position: -200% 0; } }

.fx-cursor { animation: fx-blink 1.1s steps(1, end) infinite; }
@keyframes fx-blink { 50% { opacity: 0; } }

.fx-dust {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  image-rendering: pixelated; pointer-events: none; mix-blend-mode: screen;
}

/* ---------- Zones cliquables du salon ---------- */
.hotspots { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hotspot { cursor: pointer; outline: none; }
.hotspot polygon {
  fill: transparent; pointer-events: all;
  stroke: transparent; stroke-width: 5; stroke-linejoin: miter;
  transition: fill .25s, stroke .25s;
}
.hotspot.is-hover polygon {
  fill: rgba(255, 240, 210, .07);
  stroke: #fff1cf; stroke-dasharray: 12 8;
  animation: hs-dash .9s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 200, 120, .9));
}
@keyframes hs-dash { to { stroke-dashoffset: -40; } }
.stage.is-moving .hotspots { display: none; }
.stage:not([data-scene="salon"]) .hotspots { display: none; }

/* ---------- Objets interactifs du salon : bougies et fantôme (voir toys.js) ---------- */
.toy-under, .toy-smokebox { position: absolute; inset: 0; pointer-events: none; }
.toy-under > *, .toy-smokebox > * { position: absolute; }

/* Tampon qui recouvre la flamme (copie du mur voisin) ; ne crée pas de contexte de fusion sur le reste */
.toy-patch { opacity: 0; transition: opacity .35s; }
.toy-patch.is-out { opacity: 1; }
.toy-clone {
  position: absolute; inset: 0;
  background-size: 1672px 941px; background-repeat: no-repeat; image-rendering: pixelated;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 24%, #000 76%, transparent),
    linear-gradient(to bottom, transparent, #000 28%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 24%, #000 76%, transparent),
    linear-gradient(to bottom, transparent, #000 28%);
  mask-composite: intersect;
}
.toy-wick { position: absolute; background: #2b140a; }

.fx-glow.is-off { opacity: 0 !important; transition: opacity .3s; }

.toy-smoke {
  background: rgba(222, 210, 200, .6);
  opacity: 0;
  animation: toy-smoke var(--dur) ease-out var(--delay) forwards;
}
@keyframes toy-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  14% { opacity: .75; }
  100% { opacity: 0; transform: translate(var(--dx), -78px) scale(2.4); }
}

/* Fantôme lumineux */
.toy-ghost-halo {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 228, .62), rgba(255, 236, 200, .22) 55%, transparent);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity .45s;
}
.toy-ghost-halo.is-on { opacity: 1; animation: ghost-pulse 3.6s ease-in-out infinite alternate; }
.toy-ghost-body {
  background: radial-gradient(circle at 50% 50%, #fffbef, #ffe9c4 80%);
  mix-blend-mode: soft-light;
  opacity: 0; transition: opacity .45s;
}
.toy-ghost-body.is-on { opacity: .95; }
@keyframes ghost-pulse { from { filter: brightness(.82); } to { filter: brightness(1.12); } }

.toys { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.toy { cursor: pointer; outline: none; }
.toy-candle-body { cursor: default; }
.toy-candle-body.is-out { cursor: pointer; }
.toy polygon { fill: transparent; stroke: transparent; stroke-width: 3; pointer-events: all; transition: stroke .2s, fill .2s; }
/* Objets cachés : aucun contour, jamais (ni au survol, ni au focus) */
.toy, .toy:focus, .toy:focus-visible, .toy polygon { outline: none; }

/* Suspension éteinte */
.toy-lampshade {
  background-size: 1672px 941px; background-repeat: no-repeat; image-rendering: pixelated;
  filter: brightness(.55) saturate(.7);
  opacity: 0; transition: opacity .35s;
}
.toy-lampshade.is-on { opacity: 1; }
.toy-lampdim {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 4, 18, .3), rgba(8, 4, 18, .16) 55%, transparent);
  opacity: 0; transition: opacity .6s;
}
.toy-lampdim.is-on { opacity: 1; }

/* Lampe à lave (voir lava.js) */
.lava-box, .lava-smokebox { position: absolute; inset: 0; pointer-events: none; }
.lava-box > *, .lava-smokebox > * { position: absolute; }
.lava-shade {
  background-size: 1672px 941px; background-repeat: no-repeat; image-rendering: pixelated;
  filter: brightness(.32) saturate(.55);
  opacity: 0; transition: opacity .25s, filter .6s;
}
.lava-shade.is-on { opacity: 1; }
.lava-shade.is-broken { filter: brightness(.2) saturate(.12); } /* cassée : verre terne et grisâtre */
.lava-dim {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 4, 18, .38), rgba(8, 4, 18, .18) 55%, transparent);
  opacity: 0; transition: opacity .4s;
}
.lava-dim.is-on { opacity: 1; }
.lava-flash {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 220, .95), rgba(255, 200, 120, .5) 40%, transparent);
  mix-blend-mode: screen; opacity: 0;
}
.lava-flash.is-pop { animation: lava-pop .35s ease-out; }
@keyframes lava-pop { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.lava-smoke {
  background: rgba(118, 110, 116, var(--a)); border-radius: 1px;
  opacity: 0; animation: lava-smoke var(--dur) ease-out forwards;
}
@keyframes lava-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(.7); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(-1 * var(--rise))) scale(3); }
}
.fx-lava { transition: opacity .3s; }
.fx-lava.is-off { opacity: 0; }
.fx-lava.is-hot i { animation-duration: 2.4s; }
/* Surchauffe : lueur qui scintille vite, plus rouge et plus vive */
.fx-glow.is-hot {
  animation: fx-flicker .3s steps(1, end) infinite !important;
  filter: saturate(1.6) hue-rotate(-14deg) brightness(1.3);
}

/* Chat (voir cat.js) */
.toy-catbox { position: absolute; inset: 0; pointer-events: none; }
.toy-cat { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: none; will-change: transform; }
/* Sprites agrandis x3 dans le fichier : la réduction lissée par le navigateur reste nette à toutes les tailles */
.toy-cat img, .toy-cat .cat-pose {
  position: absolute; left: 0; top: 0; display: block;
  filter: url(#pf-cat-tint);
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.toy-cat .cat-pose { background-repeat: no-repeat; }
.toy-cat-front { position: absolute; pointer-events: none; background-repeat: no-repeat; }
.toy-cat img.cat-lie { transform-origin: 50% 100%; }
.toy-cat img.cat-lie.is-lying { animation: cat-breathe 3.2s ease-in-out infinite alternate; }
@keyframes cat-breathe { from { transform: scaleY(1); } to { transform: scaleY(1.035); } }
.toy-cat-shadow {
  position: absolute; left: 0; top: 0; display: none; transform-origin: 0 0;
  width: 100px; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 6, 14, .5), rgba(14, 6, 14, .25) 60%, transparent);
}
.toy-z {
  position: absolute; font-family: var(--f-hud); font-style: normal; font-size: 16px; color: rgba(255, 241, 207, .85);
  text-shadow: 1px 1px 0 rgba(35, 25, 43, .8);
  opacity: 0; animation: cat-z 3s ease-out forwards; pointer-events: none;
}
@keyframes cat-z {
  0% { opacity: 0; transform: translate(0, 0) scale(.7); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -38px) scale(1.25); }
}
.stage.is-moving .toys, .stage:not([data-scene="salon"]) .toys { display: none; }

/* Marqueurs (en coordonnées écran, toujours lisibles) */
.markers { position: absolute; inset: 0; pointer-events: none; }
.marker {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  pointer-events: auto;
  transition: opacity .3s;
}
.stage:not([data-scene="salon"]) .marker,
.stage.is-moving .marker { opacity: 0; pointer-events: none; }
body:not(.is-ready) .marker { opacity: 0; }
.marker-label {
  order: -1;
  display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px;
  padding: 6px 10px 7px;
  background: var(--panel); border: 2px solid var(--line);
  clip-path: var(--notch);
  font-family: var(--f-px); font-size: 22px; line-height: 1; text-align: left; white-space: nowrap;
  transition: transform .2s, border-color .2s, background .2s;
}
.marker-label b { font-weight: 400; color: #fff; grid-column: 1; }
.marker-label small { grid-column: 1; font-family: var(--f-mono); color: var(--amber); font-size: 17px; max-height: 0; overflow: hidden; transition: max-height .25s; }
.marker-label kbd {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center; width: 20px; height: 20px;
  background: #fff1cf; color: #1a1006; font-family: var(--f-mono); font-size: 17px;
}
.marker.is-hover .marker-label { border-color: #fff1cf; background: rgba(28, 18, 34, .95); transform: translateY(-3px); }
.marker.is-hover .marker-label small { max-height: 24px; }
.marker-arrow {
  width: 14px; height: 10px; background: #fff1cf;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 71% 40%, 71% 70%, 57% 70%, 57% 100%, 43% 100%, 43% 70%, 29% 70%, 29% 40%, 0 40%);
  animation: bob 1.2s steps(2, jump-none) infinite alternate;
  filter: drop-shadow(0 0 4px rgba(255, 200, 120, .9));
}
@keyframes bob { from { transform: translateY(-4px); } to { transform: translateY(2px); } }

/* ---------- Écrans (hôtes des applis) ---------- */
.screen-host { position: absolute; overflow: hidden; pointer-events: none; }
.screen-host > *, .fs-host > * { pointer-events: auto; }
.fs-host { display: none; position: fixed; inset: 0; z-index: 20; pointer-events: none; }
body.fs-tele[data-scene="tele"] #fullscreen-tele,
body.fs-bureau[data-scene="bureau"] #fullscreen-bureau { display: block; }

/* Allumage / extinction façon tube cathodique */
.tvapp, .termapp { visibility: hidden; }
.tvapp.is-on, .termapp.is-on { visibility: visible; }
.tvapp.is-on { animation: crt-on .62s cubic-bezier(.3, .7, .2, 1) both; }
.tvapp.is-off { visibility: visible; animation: crt-off .42s ease-in both; }
@keyframes crt-on {
  0% { clip-path: inset(50% 50% 50% 50%); filter: brightness(5) saturate(0); }
  28% { clip-path: inset(49.4% 0 49.4% 0); filter: brightness(4) saturate(0); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes crt-off {
  0% { clip-path: inset(0 0 0 0); filter: none; }
  60% { clip-path: inset(49.4% 0 49.4% 0); filter: brightness(4) saturate(0); }
  100% { clip-path: inset(50% 50% 50% 50%); filter: brightness(5) saturate(0); visibility: hidden; }
}
/* Le terminal se « réécrit » par bandes, de haut en bas */
.termapp.is-on { animation: wipe-on .55s steps(14, end) both; }
.termapp.is-off { visibility: visible; animation: wipe-off .36s steps(10, end) both; }
@keyframes wipe-on { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wipe-off { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); visibility: hidden; } }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; font-family: var(--f-hud); }
#hud > * { pointer-events: auto; }
body:not(.is-ready) #hud { opacity: 0; }
#hud { transition: opacity .6s .6s; }

.pxpanel {
  background: var(--panel);
  border: 2px solid var(--line);
  clip-path: var(--notch);
  backdrop-filter: blur(6px);
}

.plate {
  position: absolute; left: 16px; top: 14px;
  display: flex; align-items: stretch; gap: 0;
}
.plate-id { padding: 8px 12px 9px; display: flex; flex-direction: column; gap: 3px; }
.plate-id b { font-size: 15px; letter-spacing: .02em; color: #fff; }
.plate-sub { display: flex; align-items: center; gap: 8px; }
.plate-id .plate-sub span { font-family: var(--f-mono); font-size: 19px; line-height: 1; color: var(--amber); }
.plate-ico {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  color: var(--ink-dim); transition: color .2s, transform .15s;
}
.plate-ico .px-icon { width: 14px; height: 14px; fill: currentColor; }
.plate-ico:hover { color: #fff1cf; transform: translateY(-1px); }
.plate-crumb {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; margin-left: -2px;
  font-family: var(--f-mono); font-size: 19px; color: var(--ink-dim);
}
.plate-crumb::before { content: "▸"; color: var(--orange); }

.hud-nav { position: absolute; right: 16px; top: 14px; display: flex; gap: 8px; }
.hud-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 9px;
  border: 2px solid var(--line); background: var(--panel);
  clip-path: var(--notch);
  font-family: var(--f-mono); font-size: 19px; line-height: 1; color: var(--ink); text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.hud-btn:hover { border-color: #fff1cf; background: rgba(40, 26, 44, .95); }
.hud-btn:active { transform: translateY(1px); }
.hud-btn[aria-current="page"] { border-color: var(--orange); color: #fff; box-shadow: inset 0 -3px 0 var(--orange); }
.hud-btn .px-icon { width: 14px; height: 14px; fill: currentColor; }
.hud-btn kbd { font-family: var(--f-mono); color: var(--amber); font-size: 17px; }
#sound-btn[aria-pressed="false"] { color: var(--ink-dim); }
#sound-btn .icon-sound-off, #sound-btn[aria-pressed="false"] .icon-sound-on { display: none; }
#sound-btn[aria-pressed="false"] .icon-sound-off { display: block; }

/* Trouvailles : compteur sans cadre, juste sous l'icône de son */
.hud-sound { position: relative; display: flex; }
.finds {
  position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px; white-space: nowrap; pointer-events: none;
  font-family: var(--f-mono); font-size: 17px; line-height: 1; color: var(--ink-dim); opacity: .75;
  text-shadow: 0 1px 0 rgba(7, 5, 11, .9), 0 0 4px rgba(7, 5, 11, .8);
  transition: color .4s, opacity .4s;
}
.finds .px-icon { width: 9px; height: 9px; fill: currentColor; }
.finds:empty { display: none; }
.finds.is-complete { color: var(--amber); opacity: 1; }
.finds.is-new { animation: finds-new 1.6s ease-out; }
@keyframes finds-new {
  0% { color: #fff1cf; opacity: 1; transform: translateX(-50%) scale(1.3); }
  25% { transform: translateX(-50%) scale(1); }
  70% { color: var(--amber); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); }
}

#back {
  position: absolute; left: 16px; bottom: 16px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .35s, transform .35s;
}
body:not([data-scene="salon"]) #back { opacity: 1; transform: none; pointer-events: auto; }
#hud.is-moving #back { opacity: 0; pointer-events: none; }

.hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  margin: 0; padding: 9px 14px 10px;
  font-family: var(--f-mono); font-size: 20px; line-height: 1.1; color: var(--ink); text-align: center; white-space: nowrap;
  transition: opacity .4s;
}
.hint b { color: var(--amber); font-weight: 400; }
.hint kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; background: #fff1cf; color: #1a1006; font-family: var(--f-mono); font-size: 16px; margin: 0 2px; }
body:not([data-scene="salon"]) .hint, #hud.is-moving .hint { opacity: 0; pointer-events: none; }

/* ---------- Chargement ---------- */
#loader {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--night);
  font-family: var(--f-hud);
  transition: opacity .7s ease .25s, visibility 0s linear 1s;
}
body.is-ready #loader { opacity: 0; visibility: hidden; }
.loader-box { display: grid; justify-items: center; gap: 14px; width: min(340px, 80vw); }
.loader-logo {
  font-size: 34px; color: #fff; letter-spacing: .04em;
  text-shadow: 3px 3px 0 var(--red), 6px 6px 0 rgba(155, 92, 255, .6);
}
.loader-text { font-family: var(--f-mono); font-size: 20px; color: var(--ink-dim); }
.loader-track { width: 100%; height: 16px; padding: 3px; border: 2px solid var(--line); clip-path: var(--notch); }
#loader-bar {
  display: block; width: 0; height: 100%;
  background: repeating-linear-gradient(90deg, var(--orange) 0 8px, transparent 8px 10px);
  transition: width .3s steps(6, end);
}
#loader-pct { font-family: var(--f-mono); font-size: 18px; color: var(--amber); }

/* ---------- Petits écrans ---------- */
@media (max-width: 760px) {
  .plate { left: 10px; top: 10px; }
  .plate-id b { font-size: 12px; }
  .plate-id .plate-sub span { font-size: 11px; }
  .plate-sub { gap: 6px; }
  .plate-ico { width: 18px; height: 18px; }
  .plate-crumb { display: none; }
  .hud-nav { right: 10px; top: 10px; gap: 6px; }
  .hud-btn { padding: 7px 8px; }
  .hud-btn span, .hud-btn kbd { display: none; }
  .hint { white-space: normal; width: calc(100% - 32px); font-size: 18px; bottom: 14px; }
  .marker-label { font-size: 18px; padding: 4px 7px; }
  .marker-label kbd { display: none; }
  #back { left: 10px; bottom: 10px; }
}

/* Le glisser horizontal du salon ne doit pas être capté par le navigateur */
.stage[data-scene="salon"] { touch-action: none; }