@font-face {
  font-family: "Inter Display";
  src: url("assets/fonts/InterVariable.woff2?v=4.1") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Inter Display", Inter, "Segoe UI", Arial, sans-serif;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 32;
  font-synthesis: none;
  --background: #eff9ff;
  --background-deep: #dcefff;
  --surface: #ffffff;
  --surface-soft: #f7fbfe;
  --ink: #08183f;
  --muted: #66717d;
  --line: #d5e6f0;
  --blue: #173a55;
  --blue-dark: #173a55;
  --blue-soft: #e8eef2;
  --coral: #d84b50;
  --green-rest: #e8f8f1;
  --green-active: #97f0c8;
  --green-active-deep: #2abf83;
  --focus: #d84b50;
  --shadow-soft: 0 0.75rem 2.25rem rgba(23, 58, 85, 0.12);
  --shadow-card: 0 1.2rem 3.5rem rgba(23, 58, 85, 0.18);
  --radius-large: clamp(1.5rem, 3vw, 2.25rem);
  --radius-medium: 1.25rem;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--background);
}

body {
  min-width: 20rem;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 255, 255, 0.96), transparent 25rem),
    linear-gradient(145deg, var(--background) 0%, #eaf7ff 52%, var(--background-deep) 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: 0.2rem solid var(--focus);
  outline-offset: 0.2rem;
}

[hidden] {
  display: none !important;
}

.floor-app {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

.floor-stack-view,
.floor-viewer {
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}

.floor-stack-shell,
.floor-viewer-shell {
  width: min(100%, 92rem);
  min-width: 0;
  margin-inline: auto;
}

.floor-stack-shell {
  display: grid;
  height: auto;
  min-height: calc(100vh - 2rem);
  min-height: calc(100dvh - 2rem);
  align-content: start;
  justify-items: center;
  grid-template-rows: auto auto auto;
}

.floor-stack-header {
  position: relative;
  z-index: 20;
  width: 100%;
  min-width: 0;
  padding: clamp(0.5rem, 1.5dvh, 1rem) 1rem 0;
  text-align: center;
}

.section-eyebrow {
  margin: 0 0 0.4rem;
  color: var(--blue-dark);
  font-size: clamp(0.75rem, 2vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
}

.floor-stack-header h1,
.current-floor-heading h1 {
  margin: 0;
  color: var(--ink);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.floor-stack-header h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 600;
}

.floor-stack-logo-heading {
  display: grid;
  width: clamp(16rem, 29vw, 20rem);
  max-width: 100%;
  place-items: center;
  margin-inline: auto;
  padding: clamp(0.55rem, 1vw, 0.8rem);
  border: 0.0625rem solid rgba(23, 58, 85, 0.08);
  border-radius: clamp(1.35rem, 3vw, 2rem);
  background: #ffffff;
  box-shadow: 0 1rem 3rem rgba(23, 58, 85, 0.12);
  font-size: 0;
  line-height: 0;
  transform: translateX(clamp(1rem, 2.5vw, 2rem));
}

.floor-stack-header .floor-stack-logo-heading {
  margin-inline: auto;
}

.floor-stack-logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  margin-inline: auto;
  object-fit: contain;
}

.floor-stack-intro {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.55;
}

.floor-stack-stage {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: clamp(26rem, calc(100dvh - 10rem), 36rem);
  margin-top: clamp(-3.5rem, -3.5vw, -2.5rem);
  overflow: visible;
  place-items: start center;
  perspective: 82rem;
  perspective-origin: 52% 42%;
}

.floor-stack {
  display: grid;
  width: min(80vw, 32.5rem);
  min-width: 0;
  place-items: center;
  transform: translate(-2.75rem, -5.35rem) rotateZ(12deg) rotateY(-32deg);
  transform-origin: calc(50% + 5.25rem) calc(50% + 6.75rem);
  transform-style: preserve-3d;
}

.floor-stack:empty::after {
  grid-area: 1 / 1;
  padding: 1rem 1.25rem;
  color: var(--muted);
  border: 0.0625rem solid rgba(23, 32, 42, 0.08);
  border-radius: 999rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-soft);
  content: "Préparation des plans…";
  font-size: 1rem;
}

.floor-stack-card {
  --stack-lift: 0rem;
  --stack-pop: 0rem;
  --stack-rotate: 64deg;
  --stack-turn: 0deg;
  --stack-scale: 1;
  --stack-x: 0rem;
  --stack-y: 0rem;
  --stack-z: 0rem;
  position: relative;
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0.125rem solid rgba(255, 255, 255, 0.94);
  border-radius: 0.65rem;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  isolation: isolate;
  transform:
    translate3d(
      var(--stack-x),
      calc(var(--stack-y) + var(--stack-lift)),
      calc(var(--stack-z) + var(--stack-pop))
    )
    rotateX(var(--stack-rotate))
    rotateZ(var(--stack-turn))
    scale(var(--stack-scale));
  transform-origin: center;
  transition:
    border-color 220ms ease,
    box-shadow 360ms var(--ease-out),
    transform 420ms var(--ease-out);
}

.floor-stack-card:nth-child(1) {
  --stack-scale: 1;
  --stack-x: 10.5rem;
  --stack-y: 12.75rem;
  --stack-z: 0rem;
  z-index: 1;
}

.floor-stack-card:nth-child(2) {
  --stack-scale: 1;
  --stack-x: 7rem;
  --stack-y: 8.5rem;
  --stack-z: 0rem;
  z-index: 2;
}

.floor-stack-card:nth-child(3) {
  --stack-scale: 1;
  --stack-x: 3.5rem;
  --stack-y: 4.25rem;
  --stack-z: 0rem;
  z-index: 3;
}

.floor-stack-card:nth-child(4) {
  --stack-scale: 1;
  --stack-y: 0rem;
  --stack-z: 0rem;
  z-index: 4;
}

.floor-stack-card:hover,
.floor-stack-card:focus-visible {
  --stack-lift: -1.1rem;
  --stack-pop: 1.4rem;
  --stack-rotate: 64deg;
  --stack-turn: 0deg;
  z-index: 10;
  border-color: rgba(216, 75, 80, 0.72);
  box-shadow: 0 1.75rem 4.5rem rgba(23, 58, 85, 0.22);
}

.floor-stack-card__preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1374 / 1400;
  overflow: hidden;
  background: #f2f0eb;
}

.floor-stack-card__preview::after {
  position: absolute;
  inset: auto 0 0;
  height: clamp(2.5rem, 7vw, 3.5rem);
  background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 8%, rgba(255, 255, 255, 0.86) 40%, transparent);
  content: "";
  pointer-events: none;
}

.floor-stack-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) saturate(0.2) contrast(0.94);
  opacity: 0.78;
  transition: opacity 160ms ease, transform 420ms var(--ease-out);
}

.floor-stack-card:hover .floor-stack-card__image,
.floor-stack-card:focus-visible .floor-stack-card__image {
  filter: grayscale(0) saturate(1) contrast(1);
  opacity: 1;
  transform: scale(1.012);
}

.floor-stack-card__label {
  position: absolute;
  z-index: 2;
  inset-inline: clamp(1rem, 3vw, 1.6rem);
  display: block;
  text-align: right;
}

.floor-stack-card__label {
  bottom: clamp(1rem, 2.6vw, 1.45rem);
  color: var(--ink);
  font-size: clamp(1.05rem, 3vw, 1.48rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.floor-stack-help {
  position: relative;
  z-index: 20;
  width: min(100%, 34rem);
  min-width: 0;
  margin: 0;
  padding: 0.8rem 1.15rem;
  color: var(--muted);
  border: 0.0625rem solid rgba(23, 32, 42, 0.07);
  border-radius: 999rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0.5rem 1.5rem rgba(65, 53, 39, 0.08);
  font-size: 0.925rem;
  line-height: 1.45;
  text-align: center;
}

.legal-footer {
  position: relative;
  z-index: 30;
  display: flex;
  width: min(100%, 68rem);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem 1.1rem;
  margin-top: clamp(4.25rem, calc(7vw + 1.25rem), 6.25rem);
  padding: 1rem 0 0.25rem;
  color: #42526b;
  border-top: 0.0625rem solid #d8e2f0;
  font-size: 0.82rem;
}

.legal-footer-brand {
  color: var(--blue-dark);
  font-weight: 800;
}

.legal-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  line-height: 1.45;
}

.legal-footer-link {
  color: var(--blue-dark);
  font-weight: 700;
  text-decoration: none;
}

.legal-footer-link:hover,
.legal-footer-link:focus-visible {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 0.16rem;
}

.floor-viewer-shell {
  display: grid;
  height: calc(100vh - 2rem);
  height: calc(100dvh - 2rem);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
}

.floor-viewer-topline {
  --safety-overhang: 0rem;
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns:
    clamp(0.25rem, 0.6vw, 0.75rem)
    minmax(0, 1fr)
    30rem;
  align-items: center;
  gap: clamp(0.5rem, 1.1vw, 1rem);
}

.floor-viewer-toolbar {
  display: grid;
  width: min(100%, 49rem);
  grid-template-columns:
    clamp(4.75rem, 6vw, 6rem)
    minmax(0, 36rem)
    clamp(4.75rem, 6vw, 6rem);
  align-items: center;
  grid-column: 2;
  justify-content: center;
  gap: clamp(0.25rem, 0.8vw, 0.6rem);
  justify-self: center;
  transform: none;
}

.floor-viewer-header {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.05rem 1rem;
  padding: clamp(0.45rem, 0.8vw, 0.6rem) clamp(0.75rem, 1.6vw, 1rem);
  border: 0.0625rem solid rgba(23, 32, 42, 0.07);
  border-radius: clamp(1rem, 2vw, 1.4rem);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
  justify-content: center;
  justify-self: stretch;
}

.route-point-button {
  display: grid;
  width: 100%;
  grid-template-rows: auto 2.5em;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.control-icon-frame {
  display: block;
  width: 100%;
  aspect-ratio: 512 / 400;
  overflow: hidden;
}

.control-label {
  align-self: start;
  display: block;
  width: 100%;
  padding-inline: 0.15rem;
  color: var(--blue-dark);
  font-size: 0.88rem;
  font-weight: 560;
  line-height: 1.22;
  text-align: center;
  overflow-wrap: normal;
  hyphens: manual;
}

.route-point-button__image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.26;
  filter: grayscale(1) saturate(0);
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}

.route-point-button:hover .route-point-button__image,
.route-point-button:focus-visible .route-point-button__image {
  opacity: 1;
  filter: none;
  transform: translateY(-2px) scale(1.04);
}

.route-point-button.is-active .route-point-button__image,
.route-point-button[data-state="active"] .route-point-button__image,
.route-point-button[aria-pressed="true"] .route-point-button__image {
  opacity: 1;
  filter: none;
}

.back-to-stack {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  grid-column: 1;
  grid-row: 2;
  padding: 0.2rem 0.7rem;
  color: var(--blue-dark);
  border: 0;
  border-radius: 999rem;
  background: var(--blue-soft);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  justify-self: end;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.back-to-stack:hover {
  color: #ffffff;
  background: var(--blue);
  transform: translateY(-0.125rem);
}

.back-to-stack__icon {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}

.current-floor-heading {
  display: contents;
}

.current-floor-heading .section-eyebrow {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  margin-bottom: 0.1rem;
}

.current-floor-heading h1 {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  overflow: hidden;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-floor-position {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  grid-column: 3;
  grid-row: 2;
  justify-self: start;
  margin: 0;
  padding: 0.2rem 0.7rem;
  color: var(--blue-dark);
  border-radius: 999rem;
  background: var(--blue-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.2;
}

.floor-viewer-content {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns:
    clamp(0.25rem, 0.6vw, 0.75rem)
    minmax(0, 1fr)
    30rem;
  gap: clamp(0.5rem, 1.1vw, 1rem);
  align-items: center;
  /* The centred instruction can sit in the gap above this grid. Individual
     carousel and directory viewports retain their own clipping. */
  overflow: visible;
}

.floor-plan-column {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-column: 2;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  justify-self: center;
  transform: none;
}

.floor-trip-hint {
  margin: 0 0 0.7rem;
  color: var(--blue-dark);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  font-weight: 550;
  line-height: 1.4;
  text-align: center;
}

.floor-carousel {
  --nav-gap: clamp(0.4rem, 0.8vw, 0.75rem);
  --nav-size: clamp(3rem, 4vw, 3.25rem);
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  justify-self: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  isolation: isolate;
  overscroll-behavior-x: contain;
  touch-action: pan-y pinch-zoom;
}

.floor-carousel::before {
  content: none;
}

.floor-carousel:focus-visible {
  outline: none;
}

.floor-carousel:focus-visible .floor-navigation:not(:disabled) {
  outline: 0.2rem solid var(--focus);
  outline-offset: 0.15rem;
}

.floor-carousel__viewport {
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
}

.floor-track {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: inherit;
  align-items: stretch;
  will-change: transform;
  transition: transform 280ms var(--ease-out);
}

.floor-track.is-transitioning,
.floor-carousel.is-transitioning .floor-track {
  pointer-events: none;
}

.floor-carousel.is-dragging .floor-track {
  transition: none;
}

.floor-slide {
  display: grid;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 clamp(3.25rem, 4.6vw, 3.5rem);
  place-items: center;
  opacity: 0.55;
  transform: scale(0.97);
  transition: opacity 300ms ease, transform 420ms var(--ease-out);
}

.floor-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.floor-slide__image-wrap {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  overflow: visible;
  place-items: center;
}

.floor-slide__image {
  --plan-card-radius: clamp(1.25rem, 2.2vw, 1.8rem);
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  border: 0;
  border-radius: var(--plan-card-radius);
  background: #ffffff;
  clip-path: inset(0 round var(--plan-card-radius));
  box-shadow: none;
  user-select: none;
  -webkit-user-drag: none;
}

.floor-safety-actions {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  box-sizing: border-box;
  width: calc(100% + var(--safety-overhang, 0rem));
  max-width: none;
  flex: 0 0 auto;
  align-items: start;
  grid-column: 3;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0;
  justify-self: end;
}

.floor-safety-actions .control-label {
  white-space: nowrap;
}

.floor-safety-button {
  display: grid;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  grid-template-rows: auto 2.5em;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.floor-safety-button__image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.26;
  filter: grayscale(1) saturate(0);
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}

.floor-safety-button .control-icon-frame {
  /* Keep all five original SVGs equally large, independently of label width. */
  width: 4.75rem;
}

#safety-defibrillateur .control-label {
  white-space: nowrap;
}

.floor-safety-button:hover .floor-safety-button__image,
.floor-safety-button:focus-visible .floor-safety-button__image {
  opacity: 1;
  filter: none;
  transform: translateY(-2px) scale(1.04);
}

.floor-safety-button.is-active .floor-safety-button__image,
.floor-safety-button[data-state="active"] .floor-safety-button__image,
.floor-safety-button[aria-pressed="true"] .floor-safety-button__image {
  opacity: 1;
  filter: none;
}

.floor-safety-button.is-available .floor-safety-button__image,
.floor-safety-button[data-state="available"] .floor-safety-button__image {
  opacity: 1;
  filter: none;
}

.floor-safety-button[aria-disabled="true"] {
  cursor: not-allowed;
}

.floor-safety-button[aria-disabled="true"]:hover .floor-safety-button__image,
.floor-safety-button[aria-disabled="true"]:focus-visible .floor-safety-button__image {
  opacity: 0.26;
  filter: grayscale(1) saturate(0);
  transform: none;
}

.floor-area-overlay {
  position: absolute;
  z-index: 2;
  display: block;
  overflow: visible;
  pointer-events: none;
  touch-action: pan-y pinch-zoom;
}

.floor-area-target {
  fill: rgba(151, 240, 200, 0.001);
  stroke: transparent;
  stroke-width: 0.55;
  cursor: pointer;
  pointer-events: all;
  touch-action: pan-y pinch-zoom;
  transition: fill 150ms ease, filter 180ms ease, stroke 150ms ease;
  vector-effect: non-scaling-stroke;
  /* Browser SVG focus rings are drawn in map units and become huge on screen.
     Keyboard focus remains visible through the room's own red wall outline. */
  outline: none;
}

.floor-area-target.is-highlighted,
.floor-area-target.is-selected {
  /* Multiplied over #E8F8F1, this reproduces the former #97F0C8 green. */
  fill: #a6f7d4;
  stroke: var(--coral);
  stroke-width: 0.9;
  filter: none;
  mix-blend-mode: multiply;
  outline: none;
}

.floor-area-target:focus-visible {
  stroke: var(--coral);
  stroke-width: 1;
}

.floor-area-label {
  fill: var(--ink);
  font-family: "Inter Display", Inter, "Segoe UI", Arial, sans-serif;
  /* Overlay coordinates are millimetres; 2.82 units match the 8 pt labels in
     the underlying vector plan instead of covering the room with a huge 7 mm glyph. */
  font-size: 2.82px;
  font-weight: 650;
  dominant-baseline: central;
  opacity: 0;
  pointer-events: none;
  text-anchor: middle;
}

.floor-area-label.is-highlighted,
.floor-area-label.is-selected {
  opacity: 1;
}

/* Exact SVG copies keep the source baseline, size and position, including
   both room-10 markers and the two-line Salle des séances label. */
.floor-area-source-label {
  opacity: 0;
  pointer-events: none;
}
.floor-area-source-label.is-highlighted,
.floor-area-source-label.is-selected {
  opacity: 1;
}

.floor-poi-overlay {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.floor-poi-target {
  position: absolute;
  display: block;
  width: clamp(1rem, 1.8vw, 1.45rem);
  height: clamp(1rem, 1.8vw, 1.45rem);
  padding: 0;
  border: 0.125rem solid transparent;
  border-radius: 0.28rem;
  background: transparent;
  cursor: pointer;
  left: var(--poi-left);
  opacity: 0;
  pointer-events: auto;
  top: var(--poi-top);
  transform: translate(-50%, -50%) scale(0.82);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease,
    transform 180ms var(--ease-out);
}

.floor-poi-target.is-highlighted,
.floor-poi-target.is-selected {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  outline: none;
  transform: translate(-50%, -50%) scale(0.82);
}

.floor-slide:not(.is-active) .floor-poi-overlay,
.floor-slide:not(.is-active) .floor-area-overlay {
  pointer-events: none;
  visibility: hidden;
}

.floor-directory {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  height: fit-content;
  max-height: calc(100% - 1rem);
  grid-column: 3;
  align-self: center;
  justify-self: end;
  overflow: hidden;
  border: 0.0625rem solid rgba(23, 58, 85, 0.1);
  border-radius: clamp(1rem, 2vw, 1.4rem);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1.25rem);
}

.floor-safety-actions,
.floor-directory__legend,
.floor-directory__header {
  flex-shrink: 0;
}

.floor-directory__legend {
  display: grid;
  gap: 0.35rem;
  margin: 0.75rem 0.75rem 0;
  padding: 0.7rem 0.8rem;
  border: 0.0625rem solid rgba(23, 58, 85, 0.1);
  border-radius: 0.85rem;
  background: var(--surface-soft);
}

.floor-directory__legend-item {
  display: grid;
  min-width: 0;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 550;
  line-height: 1.18;
}

.floor-directory__legend-item--accessible {
  color: #195ee8;
}

.floor-directory__legend-item--accessible span {
  color: var(--ink);
}

.floor-directory__legend-icon {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--blue-dark);
}

.floor-directory__legend-item--accessible .floor-directory__legend-icon {
  color: #195ee8;
}

.floor-directory__header {
  padding: 0.75rem 1rem 0.65rem;
  border-bottom: 0.0625rem solid rgba(23, 58, 85, 0.08);
}

.floor-directory__header h2 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.floor-directory__list {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0.45rem 0.5rem 0.55rem;
  overflow: auto;
  list-style: none;
  scrollbar-color: rgba(23, 58, 85, 0.3) transparent;
}

.floor-directory__item {
  min-width: 0;
}

.floor-directory__button {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.45rem;
  color: var(--ink);
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 180ms var(--ease-out);
}

.floor-directory__item.has-description .floor-directory__button {
  align-items: start;
}

.floor-directory__button.is-highlighted,
.floor-directory__button.is-selected,
.floor-directory__item.is-highlighted .floor-directory__button {
  background: #dceefa;
  box-shadow: inset 0.2rem 0 #76b6df;
  outline: none;
  transform: translateX(0.12rem);
}

.floor-directory__code {
  display: grid;
  min-width: 1.7rem;
  min-height: 1.7rem;
  padding: 0.12rem 0.2rem;
  color: #ffffff;
  border-radius: 0.42rem;
  background: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  place-items: center;
}

.floor-directory__button.is-highlighted .floor-directory__code,
.floor-directory__button.is-selected .floor-directory__code,
.floor-directory__item.is-highlighted .floor-directory__code {
  background: #a9d5ef;
  color: var(--blue-dark);
}

.floor-directory__button.is-route-departure,
.floor-directory__button.is-selected.is-route-departure,
.floor-directory__button.is-highlighted.is-route-departure {
  background: rgba(39, 174, 120, 0.16);
  box-shadow: inset 0.2rem 0 #1d9d70;
  transform: translateX(0.12rem);
}

.floor-directory__item .floor-directory__button.is-route-departure .floor-directory__code {
  background: #16845f;
  color: #fff;
}

.floor-directory__button.is-route-arrival,
.floor-directory__button.is-selected.is-route-arrival,
.floor-directory__button.is-highlighted.is-route-arrival {
  background: rgba(216, 75, 80, 0.15);
  box-shadow: inset 0.2rem 0 var(--coral);
  transform: translateX(0.12rem);
}

.floor-directory__item .floor-directory__button.is-route-arrival .floor-directory__code {
  background: var(--coral);
  color: #fff;
}

.floor-directory__button:focus-visible {
  outline: 0.125rem solid var(--focus);
  outline-offset: -0.125rem;
}

.floor-directory__copy {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.floor-directory__name {
  font-size: 0.88rem;
  font-weight: 560;
  line-height: 1.18;
}

.floor-directory__description {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 450;
  line-height: 1.18;
}

.floor-directory__status {
  padding: 1rem 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.feature-notice {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  grid-column: 1 / 4;
  width: auto;
  max-width: none;
  padding: 0.75rem 1rem;
  color: var(--blue-dark);
  border: 0.0625rem solid rgba(23, 58, 85, 0.12);
  border-radius: 999rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0.75rem 2rem rgba(23, 58, 85, 0.14);
  font-size: 0.9rem;
  font-weight: 650;
  text-align: center;
  transform: none;
  pointer-events: none;
}

.floor-navigation {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  width: var(--nav-size);
  height: var(--nav-size);
  padding: 0;
  color: #ffffff;
  border: 0;
  border-radius: 999rem;
  background: var(--blue);
  box-shadow: 0 0.85rem 1.8rem rgba(23, 58, 85, 0.3);
  cursor: pointer;
  font-size: clamp(2rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  place-items: center;
  transform: translateY(-50%);
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.floor-navigation--previous {
  left: max(0.3rem, calc(var(--plan-left-inset, 4rem) - var(--nav-size) - var(--nav-gap)));
}

.floor-navigation--next {
  right: max(0.3rem, calc(var(--plan-right-inset, 4rem) - var(--nav-size) - var(--nav-gap)));
}

.floor-navigation:hover:not(:disabled) {
  background: var(--blue-dark);
  box-shadow: 0 1rem 2.2rem rgba(23, 58, 85, 0.38);
  transform: translateY(-50%) scale(1.06);
}

.floor-navigation:active:not(:disabled) {
  transform: translateY(-50%) scale(0.96);
}

.floor-navigation:disabled {
  color: #8d98a3;
  background: #e5e9ed;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.82;
}

.visually-hidden {
  position: absolute !important;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
}

.noscript-message {
  position: fixed;
  z-index: 100;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  max-width: 38rem;
  margin: auto;
  padding: 1rem 1.25rem;
  color: var(--ink);
  border: 0.0625rem solid #f0c15d;
  border-radius: 1rem;
  background: #fff7df;
  box-shadow: var(--shadow-soft);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 48.0625rem) and (min-height: 57rem) {
  .floor-stack {
    transform: translate(-2.75rem, -4.85rem) rotateZ(12deg) rotateY(-32deg);
  }
}

@media (min-width: 80.0625rem) {
  .floor-directory {
    /* Stable, dedicated space for the development notice above the legend. */
    margin-top: 3rem;
    max-height: calc(100% - 3rem);
    transform: none;
  }

  .floor-viewer-toolbar {
    /* Leave a real gap before the safety row's left overhang. */
    width: min(calc(100% - 3.25rem), 49rem);
  }
}

@media (max-width: 80rem) {
  .floor-safety-button .control-icon-frame {
    width: clamp(4rem, 10vw, 4.75rem);
  }

  .floor-viewer-shell {
    height: auto;
    min-height: calc(100vh - 2rem);
    min-height: calc(100dvh - 2rem);
    grid-template-rows: auto auto;
  }

  .floor-viewer-content {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    overflow: visible;
  }

  .floor-viewer-topline {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0.4rem;
  }

  .floor-viewer-toolbar {
    grid-column: 1;
    grid-row: 1;
    transform: none;
  }

  .floor-safety-actions {
    width: min(100%, 38rem);
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  .floor-plan-column,
  .floor-directory {
    grid-column: 1;
    transform: none;
  }

  .floor-plan-column {
    grid-row: 1;
    height: clamp(18rem, calc((100vw - 9rem) * 1400 / 1374), 46rem);
  }

  .floor-directory {
    grid-row: 2;
    width: min(100%, 38rem);
    height: auto;
    max-height: none;
    justify-self: center;
  }

  .floor-directory__list {
    overflow: visible;
  }

  .floor-directory__button {
    padding-block: 0.42rem;
  }

  .floor-safety-button {
    width: 100%;
  }
}

@media (max-width: 48rem) {
  .floor-stack-logo-heading {
    transform: translateX(1.5rem);
  }

  .floor-stack {
    width: min(97.5vw, 31.25rem);
    transform: translate(0.0625rem, -4.75rem) rotateZ(10deg) rotateY(-28deg);
    transform-origin: calc(50% + 3rem) calc(50% + 5.25rem);
  }

  .floor-stack-card:nth-child(1) {
    --stack-x: 0rem;
    --stack-y: 8.25rem;
    --stack-z: -4.5rem;
  }

  .floor-stack-card:nth-child(2) {
    --stack-x: 0rem;
    --stack-y: 5.5rem;
    --stack-z: -3rem;
  }

  .floor-stack-card:nth-child(3) {
    --stack-x: 0rem;
    --stack-y: 2.75rem;
    --stack-z: -1.5rem;
  }

  .floor-viewer-header {
    align-items: center;
  }

  .current-floor-heading {
    padding-inline-end: clamp(1rem, 2.25vw, 1.65rem);
    text-align: center;
  }

  .floor-slide {
    padding-inline: clamp(2.55rem, 7vw, 3rem);
  }

}

@media (max-width: 40rem) {
  .floor-viewer-header {
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
    column-gap: 0.75rem;
    padding-inline: 0.65rem;
  }

  .back-to-stack,
  .current-floor-position {
    padding-inline: 0.5rem;
    font-size: 0.74rem;
  }

  .current-floor-heading h1 {
    font-size: clamp(1.55rem, 5.2vw, 1.8rem);
  }
}

@media (max-width: 30rem) {
  .floor-stack-view,
  .floor-viewer {
    padding:
      max(0.625rem, env(safe-area-inset-top))
      max(0.625rem, env(safe-area-inset-right))
      max(0.625rem, env(safe-area-inset-bottom))
      max(0.625rem, env(safe-area-inset-left));
  }

  .floor-stack-header {
    padding-top: 0.65rem;
  }

  .floor-stack-logo-heading {
    width: min(72vw, 17.5rem);
    transform: none;
  }

  .floor-stack {
    width: min(81.25vw, 21.25rem);
    transform: translate3d(-0.5rem, -2.5rem, -12rem) rotateZ(8deg) rotateY(-24deg);
    transform-origin: calc(50% + 2.25rem) calc(50% + 6rem);
  }

  .floor-stack-card {
    --stack-rotate: 66deg;
    --stack-turn: 0deg;
  }

  .floor-stack-card:nth-child(1) {
    --stack-x: 0rem;
    --stack-y: 9.75rem;
  }

  .floor-stack-card:nth-child(2) {
    --stack-x: 0rem;
    --stack-y: 6.5rem;
  }

  .floor-stack-card:nth-child(3) {
    --stack-x: 0rem;
    --stack-y: 3.25rem;
  }

  .floor-viewer-shell {
    height: auto;
    min-height: calc(100vh - 1.25rem);
    min-height: calc(100dvh - 1.25rem);
    gap: 0.625rem;
  }

  .floor-viewer-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem;
  }

  .route-point-button {
    width: 4.5rem;
    grid-row: 2;
    justify-self: center;
  }

  .floor-viewer-header {
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
    gap: 0.15rem 0.6rem;
    padding: 0.55rem 0.65rem;
  }

  .back-to-stack {
    width: auto;
    padding: 0.2rem 0.55rem;
  }

  .back-to-stack__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .current-floor-heading {
    max-width: calc(100vw - 8.5rem);
    padding: 0.55rem 0.8rem;
  }

  .current-floor-heading .section-eyebrow {
    font-size: 0.7rem;
  }

  .current-floor-heading h1 {
    font-size: 1.3rem;
  }

  .current-floor-position {
    min-height: 1.5rem;
    margin-top: 0;
    font-size: 0.75rem;
  }

  .floor-plan-column {
    min-height: 0;
  }

  .floor-carousel {
    min-height: 0;
    border-radius: 1.35rem;
  }

  .floor-navigation {
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
  }

  .floor-navigation--previous {
    left: 0.45rem;
  }

  .floor-navigation--next {
    right: 0.45rem;
  }

  .floor-slide {
    padding: 0.35rem clamp(2.55rem, 9vw, 3rem);
  }

  .floor-safety-actions {
    gap: 0.25rem;
    padding-inline: 0.1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.7rem 0.25rem;
  }

  .floor-safety-button { grid-column: span 2; }
  .floor-safety-button:nth-of-type(4) { grid-column: 2 / 4; }
  .floor-safety-button:nth-of-type(5) { grid-column: 4 / 6; }
  .feature-notice { grid-column: 1 / -1; }

  .floor-safety-button {
    width: 100%;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .floor-stack-card:hover,
  .floor-stack-card:focus-visible,
  .floor-stack-card.is-active {
    --stack-lift: 0rem;
  }

  .route-point-button__image,
  .floor-safety-button__image {
    transition: none;
    transform: none !important;
  }
}

.pacman-launch {
  position: absolute;
  z-index: 9;
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: 7rem;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: manipulation;
}

.pacman-launch__face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: .125rem solid #ffabb0;
  border-radius: 50%;
  color: white;
  background: linear-gradient(155deg, #ff7279 0%, #ed465b 45%, #d33147 100%);
  box-shadow: 0 .5rem 0 #9e2940, 0 .75rem 0 .05rem #173a55, 0 1.2rem 1.5rem #173a5540, inset 0 .18rem .15rem #ffffff75;
  font-size: 2.7rem;
  font-weight: 850;
  letter-spacing: -.045em;
  transform: rotate(-6deg);
  animation: pacman-bob 2.2s ease-in-out infinite;
}

.pacman-launch__face > span { font-size: 2rem; }
.pacman-launch:hover .pacman-launch__face { filter: brightness(1.08); }
.pacman-launch:active .pacman-launch__face { translate: 0 .25rem; }
.pacman-launch:disabled { cursor: progress; }
.pacman-launch__caption {
  padding: .3rem .75rem;
  border: 1px solid #ffffff;
  border-radius: 999px;
  color: #173a55;
  background: #fffffff2;
  box-shadow: 0 .2rem .75rem #173a5520;
  font-size: .82rem;
  font-weight: 650;
  white-space: nowrap;
}
.pacman-flight {
  position: fixed;
  z-index: 100;
  margin: 0;
  transform: none;
  pointer-events: none;
}
.pacman-flight .pacman-launch__face { animation: none; }
.pacman-dock {
  position: fixed;
  z-index: 25;
  display: grid;
  width: 4.75rem;
  grid-template-rows: auto 2.5em;
  justify-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
}
.pacman-dock__disc {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 180ms ease;
}
.pacman-dock__disc circle { fill: #dcf5e7; }
.pacman-dock__stop { fill: #16845f; }
.pacman-dock__play { display: none; fill: #d84b50; }
.pacman-dock:hover .pacman-dock__disc { transform: translateY(-.18rem); }
.pacman-dock[data-state="docking"] .pacman-dock__disc { opacity: .4; }
.pacman-dock.is-replay .pacman-dock__disc circle { fill: #ffe5e9; }
.pacman-dock.is-replay .pacman-dock__stop { display: none; }
.pacman-dock.is-replay .pacman-dock__play { display: block; }
.pacman-stage,.pacman-trail { position: absolute; z-index: 7; pointer-events: none; overflow: visible; }
.pacman-trail { z-index: 6; }
.pacman-sprite {
  position: absolute;
  z-index: 2;
  aspect-ratio: 1;
  transform-origin: center;
  filter: drop-shadow(0 2px 2px #173a5560);
  will-change: left, top;
  transition: none;
}
.pacman-sprite svg { display: block; width: 100%; height: 100%; }
.pacman-dot {
  position: absolute;
  display: block;
  width: 1.1%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #173a55;
  border: 1px solid #08183f;
  transform: translate(-50%,-50%);
}
.pacman-dot[data-state="eaten"] {
  background: #ffd43b;
  border-color: #d5a727;
  box-shadow: none;
}
.pacman-sprite.is-arriving { animation: pacman-pop .36s ease-in forwards; }
.pacman-puff { position: absolute; width: 2.5rem; height: 2.5rem; transform: translate(-50%,-50%); }
.pacman-puff i {
  position: absolute;
  left: 50%; top: 50%;
  width: 1rem; height: 1rem;
  margin: -.5rem;
  border: 1px solid #d7e3ec;
  border-radius: 50%;
  background: #fffef5;
  box-shadow: 0 0 .3rem #cddce780;
  animation: pacman-smoke .65s ease-out forwards;
}
@keyframes pacman-bob {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -.45rem; }
}
@keyframes pacman-pop {
  0% { scale: 1; opacity: 1; }
  35% { scale: 1.3; opacity: 1; }
  100% { scale: .05; opacity: 0; }
}
@keyframes pacman-smoke {
  0% { transform: rotate(var(--puff-angle)) translateX(0) scale(.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: rotate(var(--puff-angle)) translateX(1.5rem) scale(1.5); opacity: 0; }
}
@media (max-width: 80rem) {
  .has-demo-trip .floor-viewer-toolbar { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .has-demo-trip .floor-viewer-header { grid-column: 1 / -1; grid-row: 1; }
  .has-demo-trip .route-point-button { grid-row: 2; width: 4.75rem; justify-self: center; }
  .pacman-dock { position: static; grid-column: 3; grid-row: 2; justify-self: center; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pacman-launch__face { animation: none; transform: none; }
  .pacman-dock__disc { transition: none; }
}

@media (forced-colors: active) {
  .floor-stack-card,
  .floor-viewer-header,
  .floor-carousel,
  .floor-slide__image {
    border: 0.125rem solid CanvasText;
  }

  .floor-navigation,
  .back-to-stack,
  .route-point-button,
  .floor-safety-button {
    border: 0.125rem solid ButtonText;
  }
}