/* Poloroid — Voyage immersif v3 (film plein écran sur carte, bulles, polaroids, planisphère, mini-carte).
   Le film est lancé volontairement : aucune règle prefers-reduced-motion ne le coupe ; « Effets réduits » = .vy-soft. */
:root {
  --vy-ink: #1c1511; --vy-ink2: #4a3a2b; --vy-paper: #f1e5c8; --vy-paper2: #e6d6b0; --vy-edge: #b89a63;
  --vy-gold: #d4a84b; --vy-red: #b3261e; --vy-sea: #9db6b8; --vy-sea2: #7f9ea4; --vy-land: #e7d5a9; --vy-coast: #6e4b2a;
  --vy-night: #0d0a08; --vy-serif: var(--ff-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif);
  --vy-sans: var(--ff-sans, system-ui, -apple-system, "Segoe UI", sans-serif); --vh: 100vh;
  --vy-pop: cubic-bezier(.2, 1.25, .3, 1); --vy-out: cubic-bezier(.4, 0, .8, .4); --vy-t: 1;
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vy-ic { width: 1.25em; height: 1.25em; fill: currentColor; vertical-align: -0.3em; }
.vy-back { color: inherit; text-decoration: none; opacity: .8; }
.vy-back:hover { opacity: 1; }
.vy-hero-cta { margin-top: 1.5rem; }
.vy-hero-btn { display: inline-flex; align-items: center; gap: .5rem; }
html.vy-lock, html.vy-lock body { overflow: hidden; }

/* ---------- carte : fond, grille, terres ---------- */
.vy-map-wrap { position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--vy-sea) 0%, var(--vy-sea2) 70%, #5e7c84 100%); }
/* vol d'approche (planisphère) joué avant l'étape 1 */
.vy-prelude { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; opacity: 0; visibility: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--vy-sea) 0%, var(--vy-sea2) 70%, #5e7c84 100%); transition: opacity 1.1s ease, visibility 0s 1.1s; }
.vy-prelude.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.vy-prelude svg { display: block; width: 100%; height: 100%; }
.vy-map-wrap svg { display: block; width: 100%; height: 100%; transition: filter 1.4s; }
.vy-sea { fill: var(--vy-sea); fill-opacity: .55; }
.vy-grid-line { stroke: #2d3b3d; stroke-opacity: .16; stroke-width: 1; }
.vy-land, svg .vy-land path { fill: var(--vy-land); fill-opacity: .94; stroke: var(--vy-coast); stroke-width: 1.3; stroke-linejoin: round; }
.vy-route-full { stroke: none; }
.vy-route { stroke: #c4241a; stroke-linecap: round; filter: drop-shadow(0 0 1px rgba(60, 0, 0, .5)); }
.vy-flight { stroke: var(--vy-ink2); opacity: 0; transition: opacity .6s; }
.vy-flight.is-on { opacity: .75; }
.vy-mk-halo { fill: var(--vy-red); fill-opacity: 0; transform-box: fill-box; transform-origin: center; }
.vy-mk-dot { fill: var(--vy-ink); stroke: var(--vy-paper); stroke-width: 1.5; }
.vy-mk-ground { fill: rgba(28, 21, 17, .55); stroke: none; }
.vy-mk-lbl { font: 700 9px/1 var(--vy-sans); fill: var(--vy-paper); pointer-events: none; }
.vy-mk-pin { fill: #6b5a44; stroke: var(--vy-paper); stroke-width: 1.4; paint-order: stroke; filter: drop-shadow(0 2px 1px rgba(0,0,0,.35)); transition: fill .5s; }
.vy-mk-stop .vy-mk-lbl { fill: var(--vy-paper); }
.vy-mk-stop.is-done .vy-mk-pin { fill: var(--vy-red); }
.vy-mk-stop.is-cur .vy-mk-pin { fill: #e0352a; stroke: #fff8e8; stroke-width: 2; }
.vy-mk-stop.is-cur .vy-mk-lbl { fill: #fff; }
.vy-mk-stop.is-cur .vy-mk-halo { fill-opacity: .35; animation: vy-halo 2.2s ease-out infinite; }
.vy-mk-stop.is-drop .vy-mk-in { animation: vy-drop calc(1.1s * var(--vy-t)) both; }
@keyframes vy-drop {
  0% { transform: translateY(-52px) scale(1.2); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, .9, .6); }
  36% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; }
  48% { transform: translateY(1.5px) scale(1.07, .88); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  68% { transform: translateY(-6px) scale(.98, 1.03); animation-timing-function: ease-in; }
  84% { transform: translateY(.6px) scale(1.01, .99); animation-timing-function: ease-out; }
  100% { transform: none; opacity: 1; }
}
.vy-mk-ring { fill: none; stroke: var(--vy-red); stroke-width: 1.8; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.vy-mk-stop.is-drop .vy-mk-ring { animation: vy-ring calc(1.4s * var(--vy-t)) calc(.38s * var(--vy-t)) cubic-bezier(.2, .6, .3, 1) both; }
@keyframes vy-ring { 0% { opacity: 0; transform: scale(.25, .11); } 14% { opacity: .9; } 100% { opacity: 0; transform: scale(3, 1.3); } }
@keyframes vy-halo { 0% { transform: scale(.4); fill-opacity: .5; } 100% { transform: scale(2.2); fill-opacity: 0; } }
.vy-veh { opacity: 0; transition: opacity .4s; pointer-events: none; }
.vy-veh.is-on { opacity: 1; }
.vy-veh path { fill: #1a1411; stroke: var(--vy-gold); stroke-width: .9; paint-order: stroke; }
.vy-veh[data-kind="plane"] path { fill: #2a2420; }

/* ---------- film : écran ---------- */
.vy-film { position: relative; background: var(--vy-night); color: var(--vy-paper); isolation: isolate; }
.vy-screen { position: relative; height: 72vh; min-height: 440px; overflow: hidden; background: var(--vy-night); }
.vy-js .vy-screen { height: var(--vh); }
.vy-film.is-started .vy-screen { position: fixed; inset: 0; height: auto; z-index: 3000; }
.vy-grain, .vy-vignette, .vy-clouds { position: absolute; inset: 0; pointer-events: none; }
.vy-vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(20, 12, 6, .45) 100%);
  box-shadow: inset 0 0 120px rgba(40, 24, 8, .55); mix-blend-mode: multiply; z-index: 2; }
.vy-grain { mix-blend-mode: multiply; z-index: 2; background-image:
  repeating-linear-gradient(37deg, rgba(0,0,0,.4) 0 1px, transparent 1px 5px),
  repeating-linear-gradient(-56deg, rgba(0,0,0,.3) 0 1px, transparent 1px 7px); background-size: 190px 190px, 260px 260px; opacity: .06; }
.vy-film.is-started .vy-grain { animation: vy-grain .9s steps(6) infinite; will-change: transform; }
@keyframes vy-grain { 0% { transform: translate(0,0); } 20% { transform: translate(-6px,4px); } 40% { transform: translate(4px,-7px); } 60% { transform: translate(-3px,-3px); } 80% { transform: translate(6px,5px); } 100% { transform: translate(0,0); } }
/* nuages qui dérivent (parallaxe très douce) */
.vy-clouds { inset: -15%; z-index: 1; mix-blend-mode: screen; opacity: .32; overflow: hidden; }
.vy-clouds span { position: absolute; inset: 0; filter: blur(16px); will-change: transform; background:
  radial-gradient(ellipse 26% 14% at 18% 28%, rgba(255,255,255,.55), transparent 70%),
  radial-gradient(ellipse 20% 12% at 62% 64%, rgba(255,255,255,.45), transparent 70%),
  radial-gradient(ellipse 30% 15% at 88% 18%, rgba(255,255,255,.4), transparent 70%);
  animation: vy-drift 110s linear infinite alternate; }
.vy-clouds span:nth-child(2) { animation-duration: 160s; animation-direction: alternate-reverse; opacity: .7; background:
  radial-gradient(ellipse 24% 13% at 40% 80%, rgba(255,255,255,.5), transparent 70%),
  radial-gradient(ellipse 18% 10% at 78% 40%, rgba(255,255,255,.45), transparent 70%); }
.vy-clouds span:nth-child(3) { animation-duration: 230s; opacity: .5; background:
  radial-gradient(ellipse 34% 12% at 10% 70%, rgba(255,255,255,.45), transparent 70%),
  radial-gradient(ellipse 22% 11% at 55% 15%, rgba(255,255,255,.4), transparent 70%); }
@keyframes vy-drift { from { transform: translate3d(-5%, -1%, 0); } to { transform: translate3d(5%, 1.5%, 0); } }
.vy-map-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(13,10,8,.5), transparent 20%, transparent 72%, rgba(13,10,8,.65)); opacity: 0; transition: opacity .8s; }
.vy-film.is-started .vy-map-wrap::after { opacity: 1; }
.vy-film[data-state="read"] .vy-map-wrap svg { filter: saturate(.85) brightness(.92); }
.vy-film[data-state="end"] .vy-map-wrap svg { filter: saturate(.6) brightness(.6); }
.vy-rose-film { position: absolute; right: 2.2rem; top: 8.5vh; width: 86px; height: 86px; color: var(--vy-ink2); opacity: 0; pointer-events: none; z-index: 2; transition: opacity .6s;
  animation: vy-roll 9s ease-in-out infinite alternate; }
.vy-film.is-started:not([data-state="end"]) .vy-rose-film { opacity: .8; }
@keyframes vy-roll { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.vy-bars { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.vy-bar { position: absolute; left: 0; right: 0; height: 6vh; background: #000; transition: transform 1.1s cubic-bezier(.7,0,.3,1), height .9s; }
.vy-bar-top { top: 0; transform: translateY(-100%); }
.vy-bar-bot { bottom: 0; transform: translateY(100%); }
.vy-film.is-started .vy-bar { transform: none; }
.vy-film[data-state="read"] .vy-bar, .vy-film[data-state="end"] .vy-bar { height: 3.5vh; }

/* carton-titre */
.vy-card { position: absolute; left: 7vw; right: 7vw; top: 50%; transform: translateY(-50%); z-index: 4; pointer-events: none; opacity: 0; text-align: left; transition: opacity .5s; }
.vy-card.is-on { opacity: 1; }
.vy-card-kicker { display: inline-block; font: 600 .8rem/1 var(--vy-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--vy-gold);
  padding-bottom: .7rem; border-bottom: 1px solid rgba(212,168,75,.55); margin-bottom: 1.1rem; opacity: 0; }
.vy-card-title { font: 400 clamp(2.3rem, 6.5vw, 5.4rem)/1.02 var(--vy-serif); letter-spacing: .01em; color: #fff8e8; margin: 0 0 1rem;
  text-shadow: 0 2px 30px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.9); max-width: 18ch; opacity: 0; }
.vy-card-meta { font: italic 1.05rem/1.3 var(--vy-serif); color: rgba(241,229,200,.9); margin: 0; opacity: 0; letter-spacing: .02em; }
.vy-card::before { content: ""; position: absolute; inset: -14vh -8vw; background: radial-gradient(ellipse at 25% 50%, rgba(10,6,4,.66), transparent 68%); z-index: -1; opacity: 0; transition: opacity .8s; }
.vy-card.is-on::before { opacity: 1; }
.vy-card.is-off { opacity: 1; }
.vy-card.is-on, .vy-card.is-off { animation: vy-card-zoom calc(9s * var(--vy-t)) cubic-bezier(.2, .6, .2, 1) both; }
@keyframes vy-card-zoom { from { scale: 1.035; } to { scale: 1; } }
.vy-card.is-on .vy-card-kicker { animation: vy-in-k calc(1s * var(--vy-t)) calc(80ms * var(--vy-t)) cubic-bezier(.2, .8, .2, 1) both; }
.vy-card.is-on .vy-card-title { animation: vy-in-t calc(1.25s * var(--vy-t)) calc(330ms * var(--vy-t)) cubic-bezier(.2, .8, .2, 1) both; }
.vy-card.is-on .vy-card-meta { animation: vy-in-m calc(1s * var(--vy-t)) calc(700ms * var(--vy-t)) cubic-bezier(.2, .8, .2, 1) both; }
.vy-card.is-off .vy-card-kicker { animation: vy-out-k calc(.55s * var(--vy-t)) cubic-bezier(.5, 0, .8, .4) both; }
.vy-card.is-off .vy-card-title { animation: vy-out-k calc(.65s * var(--vy-t)) calc(70ms * var(--vy-t)) cubic-bezier(.5, 0, .8, .4) both; }
.vy-card.is-off .vy-card-meta { animation: vy-out-k calc(.55s * var(--vy-t)) calc(140ms * var(--vy-t)) cubic-bezier(.5, 0, .8, .4) both; }
@keyframes vy-in-k {
  from { opacity: 0; letter-spacing: .62em; clip-path: inset(0 100% 0 0); transform: translateY(8px); }
  55% { opacity: 1; }
  to { opacity: 1; clip-path: inset(-30% -6% -30% -6%); transform: none; }
}
@keyframes vy-in-t {
  from { opacity: 0; transform: translateY(34px) scale(1.03); filter: blur(10px); }
  60% { opacity: 1; filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes vy-in-m { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes vy-out-k { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: translate(-26px, -14px); filter: blur(5px); } }
@keyframes vy-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vy-fade-out { from { opacity: 1; } to { opacity: 0; } }
.vy-counter { display: inline-block; }
.vy-counter.is-tick { animation: vy-tick .55s cubic-bezier(.2, .9, .3, 1.25) backwards; }
@keyframes vy-tick { from { opacity: 0; transform: translateY(9px) scale(.9); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* badge vitesse, indice */
.vy-speed { position: absolute; top: 9vh; left: 50%; transform: translateX(-50%); z-index: 6; font: 600 1rem/1 var(--vy-sans); letter-spacing: .08em; color: var(--vy-paper);
  background: rgba(13,10,8,.75); border: 1px solid rgba(212,168,75,.5); padding: .6rem 1rem; border-radius: 3px; pointer-events: none; }
.vy-speed.is-on { animation: vy-pop .25s ease-out both; }
@keyframes vy-pop { from { opacity: 0; transform: translate(-50%, -6px) scale(.96); } to { opacity: 1; transform: translateX(-50%); } }
.vy-hint { position: absolute; top: 9vh; left: 50%; transform: translateX(-50%); z-index: 6; margin: 0; font: .8rem/1.4 var(--vy-sans); letter-spacing: .05em; color: rgba(241,229,200,.85);
  background: rgba(13,10,8,.6); padding: .45rem .9rem; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity .6s; white-space: nowrap; }
.vy-hint.is-on { opacity: 1; }
.vy-hint kbd, .vy-keys kbd { display: inline-block; border: 1px solid rgba(241,229,200,.35); border-radius: 3px; padding: 0 .4em; margin: 0 .15em; font: inherit; font-size: .7rem; color: rgba(241,229,200,.85); }

/* ---------- scène : colonnes bulles / photos ---------- */
.vy-stage { position: absolute; left: 0; right: 0; top: 8vh; bottom: 15vh; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; padding: 0 4vw; cursor: pointer; }
.vy-film:not(.is-started) .vy-stage, .vy-film[data-state="end"] .vy-stage { display: none; }
.vy-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.vy-col-bub { justify-content: flex-end; gap: 1.4rem; overflow: visible; padding: 1rem .6rem .6rem; }
.vy-col-pic { justify-content: flex-start; align-items: center; padding-top: 1.5vh; }
.vy-film[data-side="right"] .vy-col-bub { order: 2; }
.vy-film[data-side="right"] .vy-col-pic { order: 1; }
.vy-film[data-side="left"] .vy-col-bub { order: 1; }
.vy-film[data-side="left"] .vy-col-pic { order: 2; }

/* bulle nuage / parchemin */
.vy-bub { position: relative; flex: 0 0 auto; font: 1.22rem/1.55 var(--vy-serif); color: var(--vy-ink); background: rgba(246,236,210,.95); padding: 2.1rem 3.4rem 2.2rem;
  border-radius: 30% 34% 31% 33% / 42% 36% 40% 37%; box-shadow: 0 12px 34px rgba(0,0,0,.34), inset 0 0 0 1px rgba(110,75,42,.22), inset 0 0 44px rgba(120,90,40,.14);
  opacity: 0; max-width: 46rem; text-wrap: pretty; z-index: 1; }
.vy-bub-v1 { border-radius: 33% 29% 34% 30% / 38% 42% 36% 41%; }
.vy-bub-v2 { border-radius: 29% 33% 30% 34% / 41% 37% 43% 36%; }
.vy-bub::before, .vy-bub::after { content: ""; position: absolute; background: inherit; border-radius: 50%; z-index: -1; box-shadow: inset 0 0 0 1px rgba(110,75,42,.12); }
.vy-bub::before { width: 42%; height: 62%; left: 6%; top: -14%; }
.vy-bub::after { width: 30%; height: 48%; right: 4%; bottom: -12%; }
/* queue vers le lieu (côté opposé à la colonne) */
.vy-film[data-side="right"] .vy-bub::after { right: auto; left: -4%; bottom: 12%; width: 14%; height: 26%; }
.vy-film[data-side="left"] .vy-bub::after { right: -4%; bottom: 12%; width: 14%; height: 26%; }
.vy-bub-v1 { --fl: 8.5s; --fd: 1.6s; }
.vy-bub-v2 { --fl: 6.4s; --fd: 2s; }
.vy-film[data-side="right"] { --vy-sx: 44px; }
.vy-film[data-side="left"] { --vy-sx: -44px; }
.vy-bub.is-in { opacity: 1; animation: vy-bub-in calc(.95s * var(--vy-t)) cubic-bezier(.2, .8, .25, 1) backwards, vy-float var(--fl, 7s) ease-in-out var(--fd, 1.2s) infinite alternate; }
.vy-bub.is-fast.is-in { animation: vy-float var(--fl, 7s) ease-in-out var(--fd, 1.2s) infinite alternate; }
.vy-film.is-paused .vy-bub.is-in { animation-play-state: running, paused; }
.vy-film.is-paused .vy-bub.is-fast.is-in { animation-play-state: paused; }
@keyframes vy-float { from { transform: translateY(0) rotate(0); } to { transform: translateY(-7px) rotate(.35deg); } }
@keyframes vy-bub-in {
  0% { opacity: 0; translate: var(--vy-sx, 0px) 30px; scale: .85; filter: blur(6px); animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  50% { opacity: 1; translate: calc(var(--vy-sx, 0px) * -.05) -4px; scale: 1.05; filter: blur(0); animation-timing-function: ease-in-out; }
  76% { translate: 0 1px; scale: .985; animation-timing-function: ease-out; }
  100% { translate: 0 0; scale: 1; filter: none; }
}
.vy-bub.is-out { position: absolute; margin: 0; opacity: 0; pointer-events: none;
  animation: vy-bub-out calc(.55s * var(--vy-t)) cubic-bezier(.5, 0, .8, .4) forwards, vy-float var(--fl, 7s) ease-in-out var(--fd, 1.2s) infinite alternate; }
@keyframes vy-bub-out {
  from { opacity: 1; translate: 0 0; scale: 1; filter: none; }
  to { opacity: 0; translate: calc(var(--vy-sx, 0px) * .6) -34px; scale: .94; filter: blur(5px); }
}
.vy-bub-h { font: 400 1.7rem/1.15 var(--vy-serif); text-align: center; color: var(--vy-ink); padding: 1.1rem 1.6rem; }
.vy-bub-h .vy-s::before { content: "— "; color: var(--vy-red); }
.vy-bub-h .vy-s::after { content: " —"; color: var(--vy-red); }
.vy-bub-list .vy-s { display: block; padding-left: 1.1em; text-indent: -1.1em; }
.vy-bub-list .vy-s::before { content: "— "; color: var(--vy-red); }
.vy-s { transition: color .35s, background-color .4s; border-radius: 2px; }
.vy-s.is-said { color: var(--vy-ink2); }
.vy-s.is-say { background: linear-gradient(transparent 58%, rgba(212,168,75,.5) 58%); color: #000; }
.vy-s a { color: var(--vy-red); }

/* polaroids épinglés */
.vy-pola-grp { position: relative; width: min(34vw, 400px, 46vh); aspect-ratio: 1 / 1.34; flex: 0 0 auto; }
.vy-pola-n1 { aspect-ratio: 1 / .85; }
.vy-pola-n2 { aspect-ratio: 1 / 1.05; }
.vy-pola-grp.is-out { position: absolute; margin: 0; pointer-events: none; animation: vy-pola-out calc(.7s * var(--vy-t)) cubic-bezier(.5, 0, .75, .4) forwards; }
.vy-pola { position: absolute; left: 4%; right: 4%; top: 0; cursor: pointer; transition: scale .45s cubic-bezier(.2,.8,.25,1); margin: 0; background: #fdfbf4; padding: 4.5% 4.5% 13%; box-shadow: 0 2px 4px rgba(0,0,0,.3);
  opacity: 0; isolation: isolate; transform: rotate(-3deg); }
.vy-pola img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #2a211a; filter: sepia(.95) contrast(1.05) brightness(.95); transition: filter 2.8s ease .5s; }
.vy-pola.is-in { opacity: 1; animation: vy-pola-in calc(1.3s * var(--vy-t)) calc((120ms + var(--pd, 0ms)) * var(--vy-t)) backwards; }
.vy-pola.is-in img { filter: sepia(0) contrast(1) brightness(1); }
.vy-pola-0 { left: 0; right: 34%; top: 0; transform: rotate(-4deg); }
.vy-pola-1 { left: 34%; right: 0; top: 31%; transform: rotate(3.5deg); --pd: 450ms; }
.vy-pola-2 { left: 4%; right: 30%; top: 62%; transform: rotate(-2deg); --pd: 900ms; }
.vy-pola-n2 .vy-pola-1 { top: 42%; }
.vy-pola-n1 .vy-pola-0 { left: 8%; right: 8%; transform: rotate(-3deg); }
.vy-pola.is-top { z-index: 5; }
.vy-pola.is-zoom { z-index: 6; scale: 1.38; }
.vy-pola:hover { filter: brightness(1.04); }
.vy-pola::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: 0 22px 50px rgba(0,0,0,.55); }
.vy-pola.is-in::after { animation: vy-pola-shadow calc(1.3s * var(--vy-t)) calc((120ms + var(--pd, 0ms)) * var(--vy-t)) backwards; }
@keyframes vy-pola-in {
  0% { opacity: 0; translate: 38% -135%; rotate: 26deg; scale: 1.2; filter: blur(4px); animation-timing-function: cubic-bezier(.45, .05, .75, .5); }
  46% { opacity: 1; translate: 2% 5%; rotate: -5deg; scale: 1.01; filter: blur(0); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  64% { translate: 0 -3.5%; rotate: 2deg; scale: .995; animation-timing-function: ease-in-out; }
  82% { translate: 0 1%; rotate: -.8deg; scale: 1; animation-timing-function: ease-out; }
  100% { translate: 0 0; rotate: 0deg; scale: 1; filter: none; }
}
@keyframes vy-pola-shadow {
  0% { opacity: .2; translate: 24px 64px; scale: 1.2; animation-timing-function: cubic-bezier(.45, .05, .75, .5); }
  46% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes vy-pola-out {
  from { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; filter: none; }
  to { opacity: 0; translate: -24% -34%; rotate: -17deg; scale: .86; filter: blur(3px); }
}
.vy-pola::before { content: ""; position: absolute; top: -7px; left: 50%; width: 15px; height: 15px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ee6c60, #8d1d15 70%); box-shadow: 0 3px 5px rgba(0,0,0,.45), inset 0 -1px 2px rgba(0,0,0,.3); }
.vy-pola.is-broken { display: none; }
.vy-pola-cap { position: absolute; left: 0; right: 0; bottom: 3%; text-align: center; font: italic clamp(.8rem, 1.1vw, 1rem)/1.3 var(--vy-serif); color: #3a2c1e; padding: 0 6%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- HUD ---------- */
.vy-hud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 0 clamp(.8rem, 3vw, 2.4rem) max(1rem, env(safe-area-inset-bottom)); opacity: 0; transform: translateY(12px); transition: opacity .6s, transform .6s; pointer-events: none; }
.vy-film.is-started .vy-hud { opacity: 1; transform: none; pointer-events: auto; }
.vy-chapters { display: flex; gap: 5px; list-style: none; margin: 0 0 .7rem; padding: 0; }
.vy-chapters li { flex: 1; }
.vy-chapters a { display: block; height: 3px; background: rgba(241,229,200,.3); border-radius: 2px; position: relative; transition: background .4s, height .2s; }
.vy-chapters a::after { content: ""; position: absolute; inset: -9px 0; }
.vy-chapters a:hover, .vy-chapters a:focus-visible { height: 5px; background: rgba(241,229,200,.7); outline: none; }
.vy-chapters a.is-done { background: var(--vy-gold); }
.vy-chapters a.is-cur { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.6); }
.vy-hud-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; }
.vy-hud-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.vy-counter { font: 600 .78rem/1 var(--vy-sans); letter-spacing: .25em; color: rgba(241,229,200,.85); text-transform: uppercase; white-space: nowrap; }
.vy-hud-link { font: 500 .78rem/1 var(--vy-sans); letter-spacing: .06em; color: rgba(241,229,200,.75); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.vy-hud-link:hover { color: #fff; }
.vy-hud-ctl, .vy-hud-aux { display: flex; align-items: center; gap: .35rem; }
.vy-hud-aux { justify-content: flex-end; }
.vy-hud button { appearance: none; border: 1px solid rgba(241,229,200,.3); background: rgba(13,10,8,.6); color: var(--vy-paper); width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .25s, border-color .25s, transform .15s; backdrop-filter: blur(6px); }
.vy-hud button:hover, .vy-hud button:focus-visible { background: rgba(212,168,75,.25); border-color: var(--vy-gold); outline: none; }
.vy-hud button:active { transform: scale(.94); }
.vy-hud button[aria-pressed="false"] .vy-ic { opacity: .45; }
.vy-hud [data-vy-soft][aria-pressed="true"] { border-color: var(--vy-gold); background: rgba(212,168,75,.2); }
.vy-hud .vy-hud-play { width: 3.3rem; height: 3.3rem; border-color: var(--vy-gold); background: rgba(212,168,75,.18); }
.vy-hud .vy-hud-play .vy-ic { opacity: 1; width: 1.6em; height: 1.6em; }
.vy-hud-play .vy-ic + .vy-ic { display: none; }
.vy-hud-play[aria-pressed="true"] .vy-ic:first-child { display: none; }
.vy-hud-play[aria-pressed="true"] .vy-ic + .vy-ic { display: inline; }

/* ---------- ouverture ---------- */
.vy-start { display: none; position: absolute; inset: 0; z-index: 7; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem;
  background: radial-gradient(ellipse at 50% 55%, rgba(13,10,8,.35), rgba(13,10,8,.85) 80%); transition: opacity .9s, visibility .9s; }
.vy-js .vy-start { display: flex; }
.vy-start.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.vy-start-kicker { font: 600 .78rem/1 var(--vy-sans); letter-spacing: .4em; text-transform: uppercase; color: var(--vy-gold); margin: 0 0 1.1rem; }
.vy-start-title { font: 400 clamp(2.6rem, 8vw, 6rem)/1 var(--vy-serif); color: #fff8e8; margin: 0 0 .6rem; text-shadow: 0 2px 30px rgba(0,0,0,.8); }
.vy-start-sub { font: italic 1.05rem var(--vy-serif); color: rgba(241,229,200,.8); margin: 0 0 2.2rem; }
.vy-start-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: .8rem; border: 2px solid var(--vy-gold); background: rgba(212,168,75,.12); color: #fff8e8;
  font: 600 1rem/1 var(--vy-sans); letter-spacing: .22em; text-transform: uppercase; padding: 1.1rem 2rem 1.1rem 1.4rem; border-radius: 999px; transition: background .3s, transform .3s, box-shadow .3s;
  animation: vy-pulse 2.6s ease-in-out infinite; }
.vy-start-btn .vy-ic { width: 2em; height: 2em; }
.vy-start-btn:hover, .vy-start-btn:focus-visible { background: rgba(212,168,75,.3); transform: translateY(-2px); box-shadow: 0 10px 40px rgba(212,168,75,.25); outline: none; }
@keyframes vy-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,75,.45); } 60% { box-shadow: 0 0 0 18px rgba(212,168,75,0); } }
.vy-keys { margin: 1.6rem 0 0; font: .75rem/1.8 var(--vy-sans); color: rgba(241,229,200,.6); letter-spacing: .04em; }
.vy-start-more { margin-top: .6rem; font: .78rem var(--vy-sans); color: rgba(241,229,200,.55); }
.vy-start-more summary { cursor: pointer; list-style: none; text-decoration: underline dotted; }
.vy-start-more label { display: block; margin-top: .4rem; }

/* ---------- générique ---------- */
.vy-credits { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10vh 1.5rem; color: var(--vy-paper);
  background: radial-gradient(ellipse at 50% 50%, rgba(13,10,8,.3), rgba(13,10,8,.88) 85%); opacity: 0; visibility: hidden; transition: opacity 1.2s, visibility 1.2s; }
.vy-film[data-state="end"] .vy-credits { opacity: 1; visibility: visible; }
.vy-credits-k { font: 600 .8rem/1 var(--vy-sans); letter-spacing: .5em; text-transform: uppercase; color: var(--vy-gold); margin: 0 0 1rem; }
.vy-credits h2 { font: 400 clamp(2.2rem, 6vw, 4.5rem)/1 var(--vy-serif); color: #fff8e8; margin: 0 0 1rem; }
.vy-credits p { font: italic 1.05rem var(--vy-serif); color: rgba(241,229,200,.8); }
.vy-credits .btn { margin: .3rem; }
.vy-film .vy-credits .btn-ghost { color: var(--vy-paper); border-color: rgba(241,229,200,.4); display: inline-flex; align-items: center; gap: .4rem; }
.vy-film[data-state="end"] .vy-credits-k { animation: vy-in-k 1s .3s both; }
.vy-film[data-state="end"] .vy-credits h2 { animation: vy-in-t 1.2s .6s both; }

/* ---------- récit complet (repli sans JS / lecteurs d'écran) ---------- */
.vy-steps { list-style: none; margin: 0; padding: 2rem clamp(.6rem, 3vw, 2rem) 4rem; position: relative; z-index: 2; background: #2a211a; }
.vy-js .vy-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; margin: 0; }
.vy-step { margin: 0; }
.vy-panel { position: relative; max-width: 52rem; margin: 0 auto 3rem; background: var(--vy-paper) linear-gradient(180deg, rgba(255,250,235,.6), transparent 12%, transparent 88%, rgba(120,90,40,.08));
  color: var(--vy-ink); border: 1px solid var(--vy-edge); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 60px rgba(120,90,40,.12); border-radius: 3px; padding: clamp(1.4rem, 4vw, 3.2rem) clamp(1.1rem, 5vw, 3.6rem) clamp(1.6rem, 4vw, 3rem); }
.vy-seq-head { text-align: center; margin-bottom: 1.6rem; }
.vy-step-num { display: inline-block; font: 700 .72rem/1 var(--vy-sans); letter-spacing: .34em; text-transform: uppercase; color: var(--vy-red); border: 1.5px solid var(--vy-red); padding: .45rem .8rem .4rem; transform: rotate(-2deg); margin-bottom: 1.1rem; }
.vy-step-title { font: 400 clamp(1.9rem, 4.4vw, 3rem)/1.08 var(--vy-serif); margin: 0 0 .6rem; color: var(--vy-ink); }
.vy-step-lieu { font: italic 1rem/1.4 var(--vy-serif); color: var(--vy-ink2); margin: 0; }
.vy-dot { color: var(--vy-red); margin: 0 .2em; }
.vy-cover { margin: 0 0 2rem; overflow: hidden; aspect-ratio: 16 / 10; background: #2a211a; border-radius: 2px; }
.vy-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vy-story { font: 1.12rem/1.75 var(--vy-serif); color: var(--vy-ink); }
.vy-story p, .vy-story ul, .vy-story ol { margin: 0 0 1.35rem; }
.vy-story img { display: block; max-width: 100%; height: auto; margin: 1.8rem auto; border: 6px solid #fff; box-shadow: 0 8px 24px rgba(60,40,10,.25); }
.vy-story a { color: var(--vy-red); }
.vy-seq-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 1.5rem; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(110,75,42,.3); font: .85rem var(--vy-sans); }
.vy-seq-link { color: var(--vy-ink2); }
.vy-seq-next { color: var(--vy-red); text-decoration: none; font-weight: 600; }
.vy-fin { color: var(--vy-ink2); font-style: italic; font-weight: 400; }

/* ---------- effets réduits (bouton explicite, jamais imposé par l'OS) ---------- */
.vy-soft .vy-grain, .vy-soft .vy-clouds span, .vy-soft .vy-rose-film, .vy-soft .vy-start-btn, .vy-soft .vy-mk-halo { animation: none !important; }
.vy-soft .vy-bub.is-in, .vy-soft .vy-bub.is-fast.is-in { animation: vy-fade calc(.45s * var(--vy-t)) ease-out backwards; }
.vy-soft .vy-bub.is-out { animation: vy-fade-out .35s ease-in forwards; }
.vy-soft .vy-pola.is-in { animation: vy-fade .5s ease-out backwards; }
.vy-soft .vy-pola.is-in::after { animation: none; }
.vy-soft .vy-pola-grp.is-out { animation: vy-fade-out .35s ease-in forwards; }
.vy-soft .vy-card.is-on, .vy-soft .vy-card.is-off { animation: none; }
.vy-soft .vy-card.is-on .vy-card-kicker { animation: vy-fade .6s ease-out both; }
.vy-soft .vy-card.is-on .vy-card-title { animation: vy-fade .7s .15s ease-out both; }
.vy-soft .vy-card.is-on .vy-card-meta { animation: vy-fade .7s .3s ease-out both; }
.vy-soft .vy-card.is-off .vy-card-kicker, .vy-soft .vy-card.is-off .vy-card-title, .vy-soft .vy-card.is-off .vy-card-meta { animation: vy-fade-out .4s ease-in both; }
.vy-soft .vy-mk-ring { display: none; }
.vy-soft .vy-mk-stop.is-drop .vy-mk-in { animation-duration: .4s; animation-timing-function: ease-out; }
.vy-soft .vy-counter.is-tick { animation-duration: .25s; }

/* ---------- planisphère ---------- */
.vy-atlas { padding: 0 clamp(.6rem, 3vw, 2.5rem) 2rem; background: linear-gradient(#f7f1e2, #ece1c6); }
.vy-atlas-frame { position: relative; max-width: 1280px; margin: 0 auto; padding: 2.6rem 1.2rem 1.4rem; background: var(--vy-paper2);
  border: 1px solid var(--vy-edge); box-shadow: 0 25px 60px rgba(60,40,10,.25), inset 0 0 0 10px var(--vy-paper), inset 0 0 0 11px var(--vy-edge); border-radius: 3px; }
.vy-atlas-corner { position: absolute; width: 34px; height: 34px; border: 2px solid var(--vy-coast); opacity: .7; }
.vy-atlas-corner.c1 { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.vy-atlas-corner.c2 { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.vy-atlas-corner.c3 { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.vy-atlas-corner.c4 { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.vy-atlas-title { position: absolute; top: -.1rem; left: 50%; transform: translateX(-50%); margin: 0; padding: .55rem 1.4rem; background: var(--vy-paper); border: 1px solid var(--vy-edge);
  font: 600 .78rem/1.3 var(--vy-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--vy-ink2); white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.vy-atlas-title span { font-weight: 400; letter-spacing: .12em; }
.vy-world { position: relative; aspect-ratio: 2.3 / 1; min-height: 300px; overflow: hidden; border: 1px solid var(--vy-coast); border-radius: 2px;
  background: radial-gradient(ellipse at 50% 40%, var(--vy-sea) 0%, var(--vy-sea2) 75%, #6a8890 100%); box-shadow: inset 0 0 80px rgba(60,40,10,.35); transition: opacity 1.2s; }
.vy-world svg { display: block; width: 100%; height: 100%; }
.vy-world.is-leaving { opacity: .2; }
.vy-world .vy-land, .vy-world svg .vy-land path { stroke-width: 1; }
.vy-rose { position: absolute; }
.vy-rose-atlas { left: 2.2rem; bottom: 3.4rem; width: 110px; height: 110px; opacity: .55; color: var(--vy-ink); pointer-events: none; }
.vy-legend { position: absolute; right: 2rem; bottom: 2.8rem; list-style: none; margin: 0; padding: .6rem .9rem; background: rgba(241,229,200,.92); border: 1px solid var(--vy-edge); font: .75rem/1.9 var(--vy-sans); color: var(--vy-ink2); letter-spacing: .04em; }
.vy-legend li { display: flex; align-items: center; gap: .6rem; }
.vy-lg-home, .vy-lg-stop { width: 10px; height: 10px; border-radius: 50%; background: var(--vy-ink); border: 2px solid var(--vy-paper); box-shadow: 0 0 0 1px var(--vy-ink); }
.vy-lg-stop { background: var(--vy-red); }
.vy-lg-route { width: 26px; height: 0; border-top: 3px dotted var(--vy-red); }
.vy-arc { stroke: var(--vy-red); stroke-linecap: round; opacity: .85; transition: opacity .4s; }
.vy-w { cursor: pointer; }
.vy-w-link { text-decoration: none; }
.vy-w .vy-mk-dest .vy-mk-dot { fill: var(--vy-red); r: 6; stroke-width: 2; }
.vy-w .vy-mk-dest .vy-mk-halo { fill-opacity: .25; animation: vy-halo 3s ease-out infinite; }
.vy-w-plane path { fill: #1a1411; stroke: var(--vy-paper); stroke-width: 1; }
.vy-stamp-bg { fill: rgba(241,229,200,.94); stroke: var(--vy-red); stroke-width: 1.5; }
.vy-stamp-t1 { font: 700 11px/1 var(--vy-sans); letter-spacing: 1.5px; fill: var(--vy-red); }
.vy-stamp-t2 { font: italic 10px/1 var(--vy-serif); fill: var(--vy-ink2); }
.vy-stamp { transition: transform .3s; }
.vy-mk-home .vy-mk-dot { fill: var(--vy-ink); r: 5; }
.vy-mk-home .vy-mk-lbl { fill: var(--vy-ink); font: italic 700 12px/1 var(--vy-serif); paint-order: stroke; stroke: var(--vy-paper); stroke-width: 3px; }
.vy-world.has-hot .vy-w:not(.is-hot) { opacity: .35; }
.vy-w.is-hot .vy-arc { opacity: 1; }
.vy-w.is-hot .vy-stamp-bg { fill: #fff8e8; stroke-width: 2.2; }
.vy-w, .vy-world .vy-arc { transition: opacity .4s; }

/* affiches */
.vy-posters-wrap { background: #ece1c6; }
.vy-posters-k { text-align: center; font: 600 .8rem/1 var(--vy-sans); letter-spacing: .5em; text-transform: uppercase; color: var(--vy-red); margin: 0 0 2rem; }
.vy-posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.4rem); }
.vy-poster { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 4px; background: #1a1411; color: var(--vy-paper); text-decoration: none;
  box-shadow: 0 20px 50px rgba(40,25,5,.35); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; border: 6px solid #fff8e8; }
.vy-poster:hover, .vy-poster:focus-visible, .vy-poster.is-hot { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 35px 70px rgba(40,25,5,.45); outline: none; }
.vy-poster-img { position: absolute; inset: 0; }
.vy-poster-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.7) contrast(1.05) brightness(.85); transform: scale(1.04); transition: filter 1s, transform 6s linear; }
.vy-poster:hover img, .vy-poster.is-hot img, .vy-poster:focus-visible img { filter: sepia(.05) contrast(1.05); transform: scale(1.12); }
.vy-poster-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,10,8,.95) 0%, rgba(13,10,8,.55) 45%, transparent 75%); }
.vy-poster-year { position: absolute; top: 1rem; right: 1rem; font: 700 .85rem/1 var(--vy-sans); letter-spacing: .2em; color: var(--vy-paper); border: 2px solid var(--vy-red); background: rgba(179,38,30,.85); padding: .45rem .6rem .4rem; transform: rotate(6deg); }
.vy-poster-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .45rem; }
.vy-poster-k { font: 600 .66rem/1 var(--vy-sans); letter-spacing: .36em; text-transform: uppercase; color: var(--vy-gold); }
.vy-poster-title { font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.05 var(--vy-serif); color: #fff8e8; }
.vy-poster-desc { font: .86rem/1.5 var(--vy-sans); color: rgba(241,229,200,.85); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vy-poster-cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; font: 600 .74rem/1 var(--vy-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--vy-paper); }
.vy-poster-cta .vy-ic { border: 1.5px solid var(--vy-gold); border-radius: 50%; padding: .25em; width: 1.9em; height: 1.9em; }

/* ---------- page article : nav + mini-carte ---------- */
.vy-article-nav { margin-top: 3rem; }
.vy-mini { position: relative; margin: 1.5rem 0 2.5rem; border: 1px solid var(--vy-edge); border-radius: 3px; overflow: hidden; background: var(--vy-sea2); max-height: 420px; box-shadow: inset 0 0 40px rgba(60,40,10,.25); }
.vy-mini img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.vy-mini-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vy-mini-svg .vy-sea { fill: transparent; }
.vy-mini-svg .vy-route { stroke-width: 2.4; }
.vy-mini-svg a { cursor: pointer; }
.vy-mini-svg .vy-mk-stop.is-cur .vy-mk-halo { animation: vy-halo 2.2s ease-out infinite; }

/* ---------- mobile / portrait ---------- */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px) {
  .vy-card { left: 6vw; right: 6vw; top: 46%; }
  .vy-card-title { font-size: clamp(2rem, 10vw, 3rem); }
  .vy-rose-film { width: 56px; height: 56px; right: 1rem; top: 7vh; }
  .vy-bar { height: 4.5vh; }
  .vy-film[data-state="read"] .vy-bar { height: 2.5vh; }
  .vy-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 36vh) 1fr; gap: 1vh; padding: 0 3vw; top: 6vh; bottom: 16vh; }
  .vy-film .vy-col-pic { order: 1; padding-top: 1vh; }
  .vy-film .vy-col-bub { order: 2; padding: .5rem .2rem .3rem; }
  .vy-pola-grp { width: min(66vw, 32vh); }
  .vy-pola-cap { font-size: .78rem; }
  .vy-bub { font-size: 1.06rem; line-height: 1.5; padding: 1rem 1.25rem 1.05rem; border-radius: 34px 40px 30px 44px / 44px 30px 40px 34px; max-width: none; }
  .vy-bub::before { width: 34%; height: 50%; left: 8%; top: -10%; }
  .vy-film .vy-bub::after { right: auto; left: 46%; bottom: auto; top: -8%; width: 12%; height: 24%; }
  .vy-bub-h { font-size: 1.35rem; }
  .vy-speed, .vy-hint { top: 6.5vh; }
  .vy-hint { font-size: .7rem; max-width: 92vw; white-space: normal; text-align: center; }
  .vy-hud-row { grid-template-columns: auto 1fr auto; }
  .vy-hud-link { display: none; }
  .vy-counter { font-size: .68rem; letter-spacing: .15em; }
  .vy-hud button { width: 2.3rem; height: 2.3rem; }
  .vy-hud .vy-hud-play { width: 2.9rem; height: 2.9rem; }
  .vy-hud-aux [data-vy-full], .vy-hud-aux [data-vy-voice], .vy-hud-aux [data-vy-soft] { display: none; }
  .vy-hud-ctl, .vy-hud-aux { gap: .2rem; }
  .vy-hud-row { gap: .4rem; }
  .vy-grain { animation: none !important; }
  .vy-clouds span { filter: blur(10px); }
  .vy-world { aspect-ratio: 1 / 1.05; }
  .vy-atlas-frame { padding: 2.2rem .6rem 1rem; }
  .vy-atlas-title { font-size: .62rem; letter-spacing: .18em; padding: .45rem .8rem; }
  .vy-atlas-title span { display: none; }
  .vy-rose-atlas { width: 64px; height: 64px; left: 1rem; bottom: 1.5rem; }
  .vy-legend { right: 1rem; bottom: 1.5rem; font-size: .68rem; padding: .4rem .6rem; }
  .vy-posters { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
@media (hover: none) { .vy-poster img { filter: sepia(.35) contrast(1.05); } }

/* ---- v4 : fond « carte d'aventure » (niveaux de détail selon le zoom caméra) + chorégraphie des bulles ---- */
.vy-fond-v4 > .vy-sea { display: none; }
.vy-fond-v4 .vy-lbl, .vy-fond-v4 .vy-vign { pointer-events: none; }
.vy-fond-v4 .vy-land { fill: #dfcba0; fill-opacity: 1; stroke: #6b4a2b; stroke-width: 1.1; }
.vy-fond-v4 .vy-lod-b, .vy-fond-v4 .vy-lod-c, .vy-fond-v4 .vy-lbl-state, .vy-fond-v4 .vy-lbl-sea { transition: opacity 1.1s ease; }
.vy-map-wrap[data-zoom="far"] .vy-lod-c { opacity: 0; }
.vy-map-wrap[data-zoom="far"] .vy-lod-b { opacity: .6; }
.vy-map-wrap[data-zoom="near"] .vy-lbl-state, .vy-map-wrap[data-zoom="near"] .vy-lbl-sea { opacity: .3; }
.vy-world .vy-grid-line { stroke-opacity: .16; }
.vy-fond-v4 ~ .vy-grid { opacity: .55; }
/* un seul geste : sortie des anciennes bulles sur la même courbe/durée que le glissement et l'entrée */
.vy-film .vy-bub.is-out { animation-duration: calc(.6s * var(--vy-t)); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.vy-bub, .vy-pola-grp { will-change: transform, opacity; }
.vy-hud-day .vy-ic { opacity: .72; transform: scale(.86); }
.vy-counter { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* étiquettes du fond v4 : contre-échelle selon le zoom caméra (--vy-ts posé par voyage.js) */
.vy-fond-v4 .vy-fs-a { font-size: calc(6.5px * var(--vy-ts, 1)); }
.vy-fond-v4 .vy-fs-b { font-size: calc(7.5px * var(--vy-ts, 1)); }
.vy-fond-v4 .vy-fs-c { font-size: calc(9px * var(--vy-ts, 1)); }
.vy-fond-v4 .vy-fs-d { font-size: calc(11px * var(--vy-ts, 1)); }
.vy-fond-v4 .vy-fs-e { font-size: calc(15px * var(--vy-ts, 1)); }
.vy-fond-v4 .vy-fs-f { font-size: calc(26px * var(--vy-ts, 1)); }