/* The interactive piste map block. Plain CSS, loaded only by that block, and
   everything scoped under .piste-map so it can neither leak nor be purged. */
.piste-map-band { margin-block: 0 2.5rem; padding-inline: 1rem; }
@media (min-width: 40rem) { .piste-map-band { padding-inline: 1.5rem; } }
/* First on the page: close up the gap the article leaves above its blocks. */
article > .piste-map-band:first-child { margin-top: -1.5rem; }

.piste-map {
  --pm-pink: #ff5e93; --pm-pink-darker: #a81049; --pm-plum: #35061a; --pm-ink: #10191a;
  --pm-muted: #6b6f70; --pm-line: #e4e1dc; --pm-ground: #faf9f7;
  --pm-green: #00a651; --pm-blue: #26abe0; --pm-red: #ed1c24; --pm-black: #231f20; --pm-lift: #474d4d;
  display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; align-items: stretch;
  color: var(--pm-ink); font-size: 0.9375rem; line-height: 1.5;
  scroll-margin-top: 6rem; /* clear of the sticky header when a property links here */
}
/* Beside the map the panel is exactly as tall as the map and scrolls inside
   itself: height 0 keeps it from stretching the row, min-height fills it. */
.piste-map .pm-side { height: 0; min-height: 100%; overflow-y: auto; }
.piste-map .pm-side .pm-card:last-child { flex: 1; display: flex; flex-direction: column; min-height: 12rem; }
.piste-map .pm-side .pm-list { flex: 1; max-height: none; min-height: 0; }
@media (max-width: 64rem) {
  .piste-map { grid-template-columns: 1fr; }
  .piste-map .pm-side { height: auto; min-height: 0; overflow: visible; }
  .piste-map .pm-side .pm-list { max-height: 20rem; }
}

/* width: 100% is not decoration. Everything inside this frame is absolutely
   positioned, so it has no content to size it, and WebKit will not stretch a
   grid item that has an aspect-ratio: without a width it is 0 by 0, and the
   map is invisible in every Safari while Chrome shows it. */
.piste-map .pm-viewport { width: 100%; position: relative; overflow: hidden; border-radius: 1rem; background: #dfe8ee; aspect-ratio: 1630 / 978; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 1px 3px rgb(0 0 0 / 0.13); }
.piste-map .pm-viewport.is-dragging { cursor: grabbing; }
.piste-map .pm-slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.piste-map .pm-slide[hidden] { display: none; }
.piste-map .pm-stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.piste-map .pm-stage img, .piste-map .pm-stage svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; display: block; }
.piste-map .pm-stage img { pointer-events: none; }

.piste-map .pm-hit { fill: none; stroke: transparent; stroke-width: 9; stroke-linecap: round; cursor: pointer; pointer-events: stroke; }
.piste-map .pm-glow { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.piste-map .pm-halo { stroke: #fff; stroke-width: 6; }
.piste-map .pm-core { stroke-width: 3; }
.piste-map g.is-on .pm-glow { opacity: 1; }
.piste-map g.is-dim .pm-hit { pointer-events: none; }
.piste-map .pm-veil { fill: #fff; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.piste-map svg.is-focused .pm-veil { opacity: 0.45; }

@supports not (aspect-ratio: 1) {
  .piste-map .pm-viewport::before { content: ""; display: block; padding-top: 60%; }
}

/* A lift runs uphill; the runs from its top draw themselves down. */
.piste-map g.is-riding .pm-core { stroke-dasharray: 5 4; animation: pm-ride 0.7s linear infinite; }
@keyframes pm-ride { to { stroke-dashoffset: -9; } }
.piste-map g.is-pouring .pm-glow { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pm-pour 1.1s ease-out forwards; animation-delay: var(--pm-delay, 0s); }
.piste-map g.is-pouring.is-beyond .pm-core { stroke-width: 2; }
.piste-map g.is-pouring.is-beyond .pm-halo { stroke-width: 4; }
@keyframes pm-pour { to { stroke-dashoffset: 0; } }
.piste-map g.is-hot .pm-core { stroke-width: 4.5; }
.piste-map .pm-summit { fill: var(--pm-pink); stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.piste-map .pm-summit-ring { fill: none; stroke: var(--pm-pink); stroke-width: 1.2; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .piste-map g.is-riding .pm-core { animation: none; }
  .piste-map g.is-pouring .pm-glow { animation: none; stroke-dasharray: none; }
}

.piste-map .pm-pin { cursor: pointer; }
.piste-map .pm-pin .pm-dot { fill: var(--pm-pink); stroke: #fff; stroke-width: 1.5; }
.piste-map .pm-pin .pm-pulse { fill: var(--pm-pink); opacity: 0.3; }
.piste-map .pm-pin text { font: 700 6px Inter, system-ui, sans-serif; fill: var(--pm-plum); text-anchor: middle; pointer-events: none; }

.piste-map .pm-controls { position: absolute; right: 0.75rem; top: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; }
.piste-map .pm-controls button { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 0.625rem; background: #fff; font-size: 1.125rem; font-weight: 600; cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); color: var(--pm-ink); }
.piste-map .pm-controls button:hover { background: var(--pm-pink); color: var(--pm-plum); }
.piste-map .pm-tip { position: absolute; pointer-events: none; background: var(--pm-ink); color: #fff; font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.625rem; border-radius: 999px; transform: translate(-50%, -140%); white-space: nowrap; display: none; align-items: center; gap: 0.375rem; z-index: 5; }
.piste-map .pm-chip { width: 0.56rem; height: 0.56rem; border-radius: 50%; display: inline-block; flex: none; }
.piste-map .pm-tip .pm-chip { outline: 1.5px solid #fff; }
.piste-map .pm-popover { position: absolute; z-index: 6; background: #fff; border-radius: 0.875rem; box-shadow: 0 8px 30px rgb(0 0 0 / 0.27); padding: 0.875rem 1rem; width: 15.5rem; display: none; transform: translate(-50%, calc(-100% - 16px)); }
.piste-map .pm-popover h3 { margin: 0 0 0.375rem; font-size: 0.875rem; font-weight: 600; }
.piste-map .pm-popover a { display: block; color: var(--pm-pink-darker); font-weight: 600; font-size: 0.85rem; text-decoration: none; padding: 0.2rem 0; }
.piste-map .pm-popover a:hover { color: var(--pm-pink); }
.piste-map .pm-popover a.is-here { background: #fff0f5; margin: 0 -0.5rem; padding: 0.3rem 0.5rem; border-radius: 0.5rem; }

.piste-map .pm-side { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.piste-map .pm-card { background: #fff; border: 1px solid var(--pm-line); border-radius: 1rem; padding: 1rem; }
.piste-map .pm-detail h3 { margin: 0; font-size: 1.19rem; font-weight: 600; }
.piste-map .pm-detail p { margin: 0.625rem 0 0; font-size: 0.85rem; color: var(--pm-muted); }
.piste-map .pm-kind { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8rem; font-weight: 600; color: var(--pm-muted); margin-top: 0.125rem; }
.piste-map .pm-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
.piste-map .pm-fact { background: var(--pm-ground); border-radius: 0.625rem; padding: 0.5rem 0.625rem; }
.piste-map .pm-fact b { display: block; font-size: 1rem; }
.piste-map .pm-fact span { font-size: 0.7rem; color: var(--pm-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.piste-map .pm-mix { display: flex; height: 0.5rem; margin-top: 0.875rem; gap: 2px; }
.piste-map .pm-mix i { display: block; height: 100%; border-radius: 99px; }
.piste-map .pm-detail h4 { margin: 1rem 0 0.25rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pm-muted); }
.piste-map .pm-links, .piste-map .pm-list { list-style: none; margin: 0; padding: 0; }
.piste-map .pm-links button, .piste-map .pm-list button { width: 100%; border: 0; background: none; font: inherit; text-align: left; padding: 0.375rem 0.5rem; border-radius: 0.5rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; color: inherit; }
.piste-map .pm-links button { font-weight: 600; }
.piste-map .pm-links button:hover, .piste-map .pm-list button:hover, .piste-map .pm-list button.is-selected { background: #fff0f5; color: var(--pm-pink-darker); }
.piste-map .pm-len { margin-left: auto; font-weight: 500; font-size: 0.78rem; color: var(--pm-muted); white-space: nowrap; }
.piste-map .pm-back { border: 0; background: none; font: inherit; font-size: 0.78rem; color: var(--pm-pink-darker); font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 0.375rem; }
.piste-map .pm-filters { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.piste-map .pm-filters button { border: 1px solid var(--pm-line); background: #fff; border-radius: 999px; padding: 0.3rem 0.7rem; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; color: inherit; }
.piste-map .pm-filters button[aria-pressed="false"] { opacity: 0.4; }
.piste-map .pm-filters .pm-count { color: var(--pm-muted); font-weight: 500; font-size: 0.75rem; }
.piste-map input[type="search"] { width: 100%; border: 1px solid var(--pm-line); border-radius: 0.625rem; padding: 0.55rem 0.75rem; font: inherit; margin-top: 0.75rem; background: #fff; color: inherit; }
.piste-map input[type="search"]:focus { outline: 2px solid var(--pm-pink); border-color: transparent; }
.piste-map .pm-list { margin-top: 0.625rem; max-height: 20rem; overflow-y: auto; }
.piste-map .pm-empty { padding: 0.5rem; color: var(--pm-muted); font-size: 0.8rem; }

/* Somewhere to eat: a ring over the resort's own fork-and-knife icon. */
.piste-map .pm-spot { cursor: pointer; }
.piste-map .pm-spot circle { fill: transparent; stroke: transparent; stroke-width: 1.6; transition: stroke 0.12s, fill 0.12s; pointer-events: all; }
.piste-map .pm-spot:hover circle, .piste-map .pm-spot.is-on circle { stroke: var(--pm-pink); fill: rgb(255 94 147 / 0.25); }
.piste-map .pm-spot.is-dim { display: none; }
.piste-map .pm-via { display: block; font-size: 0.74rem; font-weight: 500; color: var(--pm-muted); }
.piste-map .pm-list button { align-items: flex-start; }
.piste-map .pm-list .pm-chip { margin-top: 0.45em; }
.piste-map .pm-chip-food { background: #97005a; }
.piste-map .pm-chip-apres { background: #f7941d; }

/* margin and inset spelled out: the site's reset removes a dialog's own centring. */
.piste-map .pm-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: fit-content; border: 0; border-radius: 1rem; padding: 1.5rem; width: min(30rem, calc(100vw - 2rem)); max-height: min(85vh, 40rem); overflow-y: auto; box-shadow: 0 20px 60px rgb(0 0 0 / 0.35); color: var(--pm-ink); }
.piste-map .pm-modal::backdrop { background: rgb(16 25 26 / 0.45); backdrop-filter: blur(3px); }
.piste-map .pm-modal-close { position: absolute; right: 0.75rem; top: 0.6rem; border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--pm-muted); }
.piste-map .pm-modal-close:hover { color: var(--pm-pink-darker); }
.piste-map .pm-place + .pm-place { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--pm-line); }
.piste-map .pm-place h3 { margin: 0; font-size: 1.15rem; font-weight: 600; padding-right: 1.5rem; }
.piste-map .pm-place dl { margin: 0.6rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.875rem; font-size: 0.85rem; }
.piste-map .pm-place dt { color: var(--pm-muted); }
.piste-map .pm-place dd { margin: 0; overflow-wrap: anywhere; }
.piste-map .pm-place a { color: var(--pm-pink-darker); font-weight: 600; }
.piste-map .pm-modal h4 { margin: 1.25rem 0 0.3rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pm-muted); }
.piste-map .pm-modal .pm-links button { padding-left: 0; }
.piste-map .pm-modal .pm-note { margin: 1rem 0 0; font-size: 0.74rem; color: var(--pm-muted); }

/* The Vanoise Express: the way to the other map, so it is never not lit. */
.piste-map g.is-crossing .pm-glow { opacity: 1; }
.piste-map g.is-crossing .pm-core { stroke: var(--pm-pink); stroke-width: 2.6; stroke-dasharray: 5 4; animation: pm-ride 0.9s linear infinite; }
.piste-map g.is-crossing .pm-halo { stroke-width: 5; }
.piste-map .pm-crossing-tag { cursor: pointer; }
.piste-map .pm-crossing-tag rect { fill: var(--pm-pink); stroke: #fff; stroke-width: 0.8; }
.piste-map .pm-crossing-tag text { font: 700 5.6px Inter, system-ui, sans-serif; fill: var(--pm-plum); pointer-events: none; }
.piste-map g.is-crossing:hover .pm-crossing-tag rect { fill: #ff85ae; }

.piste-map .pm-viewport.is-crossing { cursor: progress; }
.piste-map .pm-viewport.is-crossing .pm-controls { opacity: 0; }
.piste-map .pm-cabin { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.piste-map .pm-cabin[hidden] { display: none; }
.piste-map .pm-cabin-cable { position: absolute; left: -5%; right: -5%; top: 34%; height: 3px; background: #10191a; opacity: 0.8; transform: rotate(-2deg); box-shadow: 0 1px 0 rgb(255 255 255 / 0.5); }
.piste-map .pm-cabin-car { position: absolute; top: 34%; left: 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; animation: pm-cross-east 2.8s cubic-bezier(.6,.05,.35,1) both; /* the script sets the duration, to match the slide */ filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.35)); }
.piste-map .pm-cabin.is-west .pm-cabin-car { animation-name: pm-cross-west; }
.piste-map .pm-cabin-car svg { animation: pm-sway 0.75s ease-in-out infinite alternate; transform-origin: 50% 0; }
.piste-map .pm-cabin-car span { background: var(--pm-ink); color: #fff; font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px; white-space: nowrap; }
@keyframes pm-cross-west { from { left: 100%; transform: translate(0, 10px); } to { left: 0; transform: translate(-100%, -22px); } }
@keyframes pm-cross-east { from { left: 0; transform: translate(-100%, -22px); } to { left: 100%; transform: translate(0, 10px); } }
@keyframes pm-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

.pm-crossing-line { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; margin: -0.25rem 0 0; font-size: 0.9rem; color: #10191a; }
.pm-crossing-line svg { color: #a81049; flex: none; }
.pm-crossing-line button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: #a81049; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pm-crossing-line button:hover { color: #ff5e93; }