/* Page Carte — préfixe .vl- (la ville), .vc- (les personnages)
   V2 : un campus vivant en isométrie SVG, plein cadre, avec un ciel de jour (thème clair) et de nuit (thème sombre).
   Les panneaux (état, zoom, équipe, légende, fiche, bulles) sont en verre posé sur la carte : ils floutent la ville.
   Toutes les couleurs de l'interface viennent des jetons ; la couleur d'un business arrive en --vl-base (draw.js)
   et devient --vl-c. Les personnages gardent leurs propres couleurs (une veste ne change pas la nuit). */

.vl {
  --vl-ground: color-mix(in srgb, var(--bg) 55%, var(--surface));
  --vl-ground-side: var(--surface-3);
  --vl-grid: rgba(var(--overlay), 0.05);
  --vl-lawn: color-mix(in srgb, #a9bf86 52%, var(--bg));
  --vl-lawn-edge: color-mix(in srgb, #8aa66b 60%, var(--bg));
  --vl-road: color-mix(in srgb, var(--wine) 80%, var(--bg));
  --vl-road-edge: color-mix(in srgb, var(--wine) 26%, var(--bg));
  --vl-road-line: rgba(var(--gold-rgb), 0.6);
  --vl-walk: color-mix(in srgb, var(--surface-3) 70%, var(--surface));
  --vl-path: color-mix(in srgb, #e9dcc2 80%, var(--surface));
  --vl-path-edge: color-mix(in srgb, #cdb994 70%, var(--bg));
  --vl-zebra: color-mix(in srgb, var(--cream) 85%, white);
  --vl-light: var(--gold-bright);
  --vl-lit: color-mix(in srgb, var(--gold) 62%, var(--cream));
  --vl-shade: rgb(var(--shade) / calc(0.4 * var(--shade-k)));
  --vl-screen-ink: color-mix(in srgb, var(--gold) 55%, var(--cream));
  --vl-accent: var(--gold);
  --vl-sky: linear-gradient(180deg, #c9dde9 0%, #e3e2d6 38%, #efe3cf 64%);
  --vl-sakura-a: #f3b6c6; --vl-sakura-b: #e898b0; --vl-sakura-c: #f8cbd7; --vl-sakura-hi: #fde6ec;
  --vl-oak-a: #9cb46f; --vl-oak-b: #7f9a59; --vl-oak-c: #b1c681; --vl-oak-hi: #d2e2a4;
  --vl-trunk: #7a5641;
  --vl-wood: #d9a26a; --vl-wood-side: #9a6640;
  --vl-entry-glass: #bcd3df;
  --vl-lamp: #3b2b2e;
  --vl-lamp-light: rgba(255, 214, 140, 0);
  --vl-sea: #7fb6cf; --vl-wave: rgba(255, 255, 255, 0.55); --vl-lagoon: #8dd0d8; --vl-foam: #ffffff;
  --vl-sand: #efdcb0; --vl-sand-wet: #e2c99a;
  --vl-room-floor: #e6d6bd; --vl-room-wall-a: #f3e9d8; --vl-room-wall-b: #e8dcc6;
  display: flex; flex-direction: column; gap: var(--s-5);
}
:root[data-theme='dark'] .vl {
  --vl-ground: color-mix(in srgb, var(--bg-raised) 80%, #1a1e2c);
  --vl-ground-side: rgb(var(--shade) / 0.55);
  --vl-grid: rgba(var(--overlay), 0.035);
  --vl-lawn: color-mix(in srgb, #31462c 70%, var(--bg));
  --vl-lawn-edge: color-mix(in srgb, #4c6a3e 60%, var(--bg));
  --vl-road: color-mix(in srgb, var(--wine-deep) 88%, var(--bg));
  --vl-road-edge: color-mix(in srgb, var(--wine) 38%, var(--bg));
  --vl-walk: color-mix(in srgb, var(--surface-3) 60%, var(--bg));
  --vl-path: color-mix(in srgb, #6b5d4b 60%, var(--bg));
  --vl-path-edge: color-mix(in srgb, #4a3f33 70%, var(--bg));
  --vl-zebra: rgba(239, 227, 207, 0.55);
  --vl-lit: #ffd98a;
  --vl-shade: rgb(var(--shade) / 0.55);
  --vl-sky: linear-gradient(180deg, #060914 0%, #10101f 36%, #1d0f18 70%, #241016 100%);
  --vl-sakura-a: #b9708a; --vl-sakura-b: #9c5873; --vl-sakura-c: #c98199; --vl-sakura-hi: #e2a5b9;
  --vl-oak-a: #4d6a3e; --vl-oak-b: #3c5531; --vl-oak-c: #5c7a49; --vl-oak-hi: #7d9a63;
  --vl-trunk: #4a3427;
  --vl-wood: #a8743f; --vl-wood-side: #6a4426;
  --vl-entry-glass: #ffd98a;
  --vl-lamp: #c9b9a4;
  --vl-lamp-light: rgba(255, 214, 140, 0.5);
  --vl-sea: #15263a; --vl-wave: rgba(200, 220, 255, 0.28); --vl-lagoon: #1f4b5a; --vl-foam: rgba(220, 240, 255, 0.7);
  --vl-sand: #7a6a4e; --vl-sand-wet: #5e5340;
  --vl-room-floor: #3a2b2a; --vl-room-wall-a: #4a3837; --vl-room-wall-b: #3f2f2e;
}

/* ───── En-tête ───── */
.vl-head { align-items: flex-end; margin-bottom: 0; }
.vl-head .page-title::after {
  content: ''; display: block; width: 72px; height: 3px; margin-top: var(--s-4); border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold) 45%, transparent);
  transform-origin: left; animation: vl-draw-x 900ms var(--ease-out) 380ms both;
}

/* ───── Le verre de la carte ───── */
.vl-glass {
  position: relative; isolation: isolate;
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset), var(--glass-shadow);
  border-radius: var(--r-lg);
}
.vl-glass::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: var(--glass-sheen), var(--glass-caustic); opacity: 0.9;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vl-glass { background-color: var(--glass-bg-strong); }
}
.vl-iconbtn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text); transition: background var(--t-fast), transform var(--t-fast);
}
.vl-iconbtn:hover { background: rgba(var(--overlay), 0.08); }
.vl-iconbtn:active { transform: scale(0.92); }
.vl-iconbtn--sm { width: 28px; height: 28px; }
.vl-zoom__minus { font: 700 1.2rem/1 var(--font-display); }

/* ───── La scène : plein cadre, le ciel derrière ───── */
.vl-map { position: relative; }
.vl-map__frame {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(540px, 76vh, 900px); height: clamp(540px, 76dvh, 900px);
  border-radius: var(--r-xl); border: 1px solid var(--glass-border);
  background: var(--vl-sky);
  box-shadow: var(--glass-inset), var(--glass-shadow);
}
:root[data-theme='dark'] .vl-map__frame::before {
  /* Les étoiles, qui scintillent doucement. */
  content: ''; position: absolute; inset: 0 0 45% 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1px 1px at 8% 12%, rgba(255, 248, 230, 0.9), transparent 70%),
    radial-gradient(1px 1px at 19% 31%, rgba(255, 248, 230, 0.6), transparent 70%),
    radial-gradient(1.4px 1.4px at 28% 8%, rgba(255, 248, 230, 0.85), transparent 70%),
    radial-gradient(1px 1px at 41% 22%, rgba(255, 248, 230, 0.55), transparent 70%),
    radial-gradient(1.2px 1.2px at 53% 6%, rgba(255, 248, 230, 0.8), transparent 70%),
    radial-gradient(1px 1px at 64% 27%, rgba(255, 248, 230, 0.6), transparent 70%),
    radial-gradient(1.5px 1.5px at 76% 14%, rgba(255, 248, 230, 0.9), transparent 70%),
    radial-gradient(1px 1px at 87% 33%, rgba(255, 248, 230, 0.5), transparent 70%),
    radial-gradient(1px 1px at 93% 9%, rgba(255, 248, 230, 0.75), transparent 70%),
    radial-gradient(1px 1px at 4% 40%, rgba(255, 248, 230, 0.5), transparent 70%),
    radial-gradient(1.2px 1.2px at 35% 45%, rgba(255, 248, 230, 0.4), transparent 70%),
    radial-gradient(1px 1px at 71% 44%, rgba(255, 248, 230, 0.45), transparent 70%);
  animation: vl-twinkle 6s ease-in-out infinite alternate;
}
.vl-map__frame.is-loading::after {
  content: ''; position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(100deg, transparent 20%, rgba(var(--overlay), 0.06) 40%, transparent 60%); background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
.vl-svg {
  position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; overflow: visible;
  user-select: none; -webkit-user-select: none; cursor: grab;
}
.vl-svg.is-dragging, .vl-svg.is-dragging .vl-node { cursor: grabbing; }
.vl-world { transform-box: view-box; transform-origin: 0 0; will-change: transform; }
.vl-error { padding: var(--s-5); }
.vl-error__action { margin-top: var(--s-4); }

/* ───── Le HUD : tout ce qui flotte sur la carte ───── */
.vl-hud {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3);
  padding: 14px; transition: padding var(--t-slow) var(--ease-out);
}
.vl-hud__top, .vl-hud__bottom { display: flex; gap: 10px; min-width: 0; }
.vl-hud__top { align-items: flex-start; }
.vl-hud__bottom { align-items: flex-end; justify-content: space-between; }
.vl-hud__top > *, .vl-hud__bottom > *, .vl-hud__legend > * { pointer-events: auto; }
.vl-hud__legend { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; pointer-events: none; }
@media (min-width: 1000px) { .vl-map__frame.has-panel .vl-hud { padding-right: 398px; } }

.vl-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0;
  padding: 9px 16px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); color: var(--text-2);
}
.vl-status__brand {
  display: inline-flex; white-space: nowrap; align-items: center; gap: 8px;
  font: 400 var(--fs-sm)/1 var(--font-varsity); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wine);
}
:root[data-theme='dark'] .vl-status__brand { color: var(--cream); }
.vl-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: pulse 2.4s ease-out infinite; }
.vl-status__dot.is-off { background: var(--st-pause); animation: none; }
.vl-status__parts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vl-status__part { font-variant-numeric: tabular-nums; }
.vl-status__sep { color: var(--muted); }

.vl-map__frame.is-following .vl-status__parts { display: none; }
@media (min-width: 1000px) {
  .vl-map__frame.has-panel .vl-status__parts, .vl-map__frame.has-panel .vl-chip__what, .vl-map__frame.has-panel .vl-legend-btn__label { display: none; }
  .vl-map__frame.has-panel .vl-chip { padding-right: 12px; }
}
.vl-status { flex: 0 1 auto; }
.vl-status__parts { min-width: 0; }
.vl-zoom { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill); margin-left: auto; flex: none; }

.vl-follow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-2); animation: vl-pop 420ms var(--ease-spring) both; }
.vl-follow strong { color: var(--text); }
.vl-follow__what { color: var(--muted); }
.vl-follow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: vl-blink 1.1s ease-in-out infinite alternate; }

.vl-roster { display: flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.vl-roster::-webkit-scrollbar { display: none; }
.vl-chip {
  display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 4px 14px 4px 4px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text); text-align: left;
  transition: background var(--t-fast), box-shadow var(--t-med) var(--ease-out), transform var(--t-fast);
}
.vl-chip:hover { background: rgba(var(--overlay), 0.07); }
.vl-chip:active { transform: scale(0.97); }
.vl-chip.is-on { background: var(--wine-soft); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.vl-chip__face {
  width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #fbf3e4, #e8d6b6); border: 1.5px solid var(--gold-line);
}
.vl-chip.is-on .vl-chip__face { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.25); }
.vl-chip__face .vc-portrait { display: block; width: 100%; height: 100%; }
.vl-chip__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.vl-chip__name { font-weight: 700; font-size: var(--fs-sm); }
.vl-chip__what { font-size: var(--fs-xs); color: var(--muted); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vl-legend-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 6px; border-radius: var(--r-pill); color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.vl-legend-btn > span:first-child { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--wine); color: var(--cream); font: 400 0.9rem/1 var(--font-varsity); }
.vl-legend { position: absolute; right: 0; bottom: 50px; width: min(340px, calc(100vw - 56px)); padding: 14px 16px; animation: vl-pop 360ms var(--ease-spring) both; transform-origin: bottom right; }
.vl-legend__title { font: 400 var(--fs-xs)/1.2 var(--font-varsity); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wine); margin-bottom: 10px; }
:root[data-theme='dark'] .vl-legend__title { color: var(--gold); }
.vl-legend__list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--text-2); }
.vl-legend__item { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.vl-legend__swatch { width: 10px; height: 10px; margin-top: 2px; border-radius: 3px; flex: none; background: var(--st-pause); }
.vl-legend__swatch--scaling { background: var(--vl-lit); box-shadow: 0 0 0 1px var(--gold-line); }
.vl-legend__swatch--lancement { background: var(--wine); }
.vl-legend__swatch--developpement { background: repeating-linear-gradient(45deg, var(--gold-deep) 0 2px, transparent 2px 4px); border: 1px solid var(--gold-deep); }
.vl-legend__swatch--pause { background: var(--st-pause); opacity: 0.6; }
.vl-legend__swatch--ok { background: var(--ok); border-radius: 50%; }
.vl-legend__swatch--warn { background: var(--warn); border-radius: 50%; }
.vl-legend__swatch--unknown { background: var(--st-pause); border-radius: 50%; }
.vl-legend__swatch--gold { background: var(--gold); border-radius: 50%; box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.6); }
.vl-legend__swatch--team { background: linear-gradient(90deg, #6b1f2e 0 60%, #f1e6d2 60%); border-radius: 3px; box-shadow: 0 0 0 1px var(--gold-line); }

.vl-notice {
  position: absolute; top: 66px; left: 14px; display: inline-flex; align-items: center; gap: 6px; pointer-events: auto;
  padding: 7px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
}
.vl-notice svg { color: var(--warn); flex: none; }

.vl-tip {
  position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 1px; pointer-events: none;
  padding: 8px 12px; border-radius: var(--r-md);
  font-size: var(--fs-xs); white-space: nowrap; max-width: 280px;
  opacity: 0; transform: translate(-50%, calc(-100% - 8px)) translateY(4px);
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.vl-tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 8px)); }
.vl-tip__name { font: 600 var(--fs-xs)/1.3 var(--font-accent); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.vl-tip__figure { color: var(--text-2); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }

/* La fiche (ordinateur) : une feuille de verre qui glisse sur la droite de la carte. Sur mobile, une modale. */
.vl-panel {
  position: absolute; z-index: 5; top: 14px; right: 14px; bottom: 14px; width: 370px; display: none; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); background-color: var(--glass-bg-strong);
  transform: translateX(calc(100% + 24px)); opacity: 0; visibility: hidden;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-med), visibility 0s linear var(--t-slow);
}
.vl-panel.is-open { transform: none; opacity: 1; visibility: visible; transition: transform var(--t-slow) var(--ease-out), opacity var(--t-med); }
.vl-panel::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--vl-accent), color-mix(in srgb, var(--vl-accent) 25%, transparent) 70%, transparent);
}
.vl-panel__inner { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.vl-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-4) var(--s-3) var(--s-5); }
.vl-panel__title { font: 800 var(--fs-xl)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; outline: none; overflow-wrap: anywhere; }
.vl-panel__body { flex: 1; padding: 0 var(--s-5) var(--s-5); overflow-y: auto; scrollbar-width: thin; }
.vl-panel__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); }
.vl-panel__foot[hidden] { display: none; }
.vl-modal { position: relative; overflow: hidden; }
.vl-modal::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--vl-accent), color-mix(in srgb, var(--vl-accent) 25%, transparent) 70%, transparent);
  transform-origin: left; animation: vl-draw-x 800ms var(--ease-out) 200ms both;
}
@media (min-width: 1000px) { .vl-panel { display: flex; } }

/* ───── Les bulles et les prénoms, posés sur la carte ───── */
.vl-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.vl-tag { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.vl-tag.is-away { display: none; }
.vl-name {
  position: absolute; left: 0; bottom: 4px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 3px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter-soft); backdrop-filter: var(--glass-filter-soft);
  box-shadow: var(--glass-inset), 0 4px 14px rgb(var(--shade) / 0.18);
  font: 700 11px/1.5 var(--font-body); color: var(--text);
}
.vl-name__letter { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #6b1f2e; color: #f1e6d2; font: 400 9px/1 var(--font-varsity); box-shadow: inset 0 0 0 1px #c19a52; }
.vl-bubble {
  position: absolute; left: 0; bottom: 32px; width: max-content; max-width: 240px;
  padding: 8px 12px; border-radius: 16px;
  background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-inset), var(--glass-shadow);
  font: 600 12px/1.35 var(--font-body); color: var(--text);
  opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), 6px) scale(0.86); transform-origin: 50% 100%;
  transition: opacity 220ms ease, transform 360ms var(--ease-spring);
}
.vl-bubble::after {
  content: ''; position: absolute; left: calc(50% - var(--dx, 0px)); bottom: -6px; width: 12px; height: 12px; margin-left: -6px;
  background: inherit; -webkit-backdrop-filter: none; backdrop-filter: none; transform: rotate(45deg); border-radius: 0 0 3px 0;
  box-shadow: 1px 1px 0 var(--glass-border);
}
.vl-bubble.is-on { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px)), 0) scale(1); }
.vl-bubble__text { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; }
.vl-bubble.is-rec { font: 700 11px/1.2 var(--font-display); letter-spacing: 0.14em; color: var(--danger); }
.vl-bubble__rec { width: 8px; height: 8px; border-radius: 50%; background: #e8364f; animation: vl-blink 0.9s ease-in-out infinite alternate; }
.vl-map__frame.is-following .vl-tag { transition: opacity var(--t-med); }

/* Les pétales de cerisier (le jour), les lucioles (la nuit). */
.vl-petals { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.vl-petal {
  position: absolute; top: -12px; left: var(--x); width: 8px; height: 6px; border-radius: 70% 0 70% 0;
  background: linear-gradient(135deg, #fde3ea, #f2a9bd); opacity: 0.9;
  animation: vl-petal var(--p) linear var(--d) infinite;
}
:root[data-theme='dark'] .vl-petal {
  top: auto; bottom: calc(10% + (var(--i) * 3.7%)); width: 4px; height: 4px; border-radius: 50%;
  background: #ffe39a; box-shadow: 0 0 8px 2px rgba(255, 220, 130, 0.65);
  animation: vl-firefly calc(var(--p) * 0.8) ease-in-out var(--d) infinite alternate;
}

/* ───── La ville : sol, pelouses, quadrillage, quartiers ───── */
.vl-ground { transform-box: fill-box; transform-origin: 50% 50%; }
.vl-ground__top { fill: var(--vl-ground); stroke: var(--line-strong); stroke-width: 0.6; }
.vl-ground__side { fill: var(--vl-ground-side); }
.vl-ground__side--l { fill: color-mix(in srgb, var(--vl-ground-side) 82%, var(--wine-deep)); }
.vl-edge-band__stripe { fill: var(--wine); opacity: 0.85; }
.vl-edge-band__stripe--gold { fill: var(--gold); }
.vl-lawn { fill: var(--vl-lawn); }
.vl-lawn__edge { fill: none; stroke: var(--vl-lawn-edge); stroke-width: 0.7; stroke-dasharray: 1.5 3; }
.vl-grid__lines { fill: none; stroke: var(--vl-grid); stroke-width: 0.5; }
.vl-quarter { font: 400 10px var(--font-varsity); letter-spacing: 0.24em; text-transform: uppercase; fill: var(--wine); opacity: 0.34; pointer-events: none; }
:root[data-theme='dark'] .vl-quarter { fill: var(--gold); opacity: 0.32; }

/* ───── Les rues, les allées, les lumières ───── */
.vl-road__walk { fill: none; stroke: var(--vl-walk); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.vl-road__base { fill: none; stroke: var(--vl-road-edge); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.vl-road__body { fill: none; stroke: var(--vl-road); stroke-width: 6.4; stroke-linecap: round; stroke-linejoin: round; }
.vl-road__line { fill: none; stroke: var(--vl-road-line); stroke-width: 0.7; stroke-dasharray: 4 6; stroke-linecap: round; }
.vl-path__edge { fill: none; stroke: var(--vl-path-edge); stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.vl-path__body { fill: none; stroke: var(--vl-path); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.vl-zebra { fill: none; stroke: var(--vl-zebra); stroke-width: 1.5; stroke-linecap: butt; pointer-events: none; }
.vl-lights { pointer-events: none; }
.vl-light__halo { fill: var(--gold); opacity: 0.28; }
.vl-light__core { fill: var(--vl-light); }
:root[data-theme='dark'] .vl-light__halo { opacity: 0.45; }

/* ───── Les bâtiments ───── */
.vl-node { --vl-c: var(--gold); cursor: pointer; outline: none; }
.vl-node:not(.vl-person) { transform-box: fill-box; transform-origin: 50% 100%; transition: transform var(--t-med) var(--ease-out); }
.vl-bld { --vl-c: var(--vl-base, var(--gold)); transform-box: fill-box; transform-origin: 50% 100%; }
.vl-bld--pause { --vl-c: color-mix(in srgb, var(--vl-base, var(--gold)) 28%, var(--st-pause)); }
.vl-tower { --vl-c: var(--wine-deep); }
.vl-repo { --vl-c: var(--text-2); }
.vl-repo--main { --vl-c: var(--wine); }
.vl-poste { --vl-c: var(--gold); }
.vl-st-ok { --vl-c: var(--ok); }
.vl-st-warn { --vl-c: var(--warn); }
.vl-st-unknown { --vl-c: var(--st-pause); }
.vl-tower.vl-st-unknown { --vl-c: var(--st-pause); }

.vl-face--top { fill: color-mix(in srgb, var(--vl-c) 62%, var(--cream)); }
.vl-face--right { fill: var(--vl-c); }
.vl-face--left { fill: color-mix(in srgb, var(--vl-c) 66%, var(--wine-deep)); }
:root[data-theme='dark'] .vl-face--top { fill: color-mix(in srgb, var(--vl-c) 70%, var(--cream)); }
:root[data-theme='dark'] .vl-face--right { fill: color-mix(in srgb, var(--vl-c) 72%, #0b0d18); }
:root[data-theme='dark'] .vl-face--left { fill: color-mix(in srgb, var(--vl-c) 45%, #0b0d18); }
.vl-edge { fill: none; stroke: color-mix(in srgb, var(--cream) 60%, transparent); stroke-width: 0.8; stroke-linejoin: round; stroke-linecap: round; }
.vl-edge--corner { stroke: color-mix(in srgb, var(--wine-deep) 35%, transparent); }
.vl-shadow { fill: var(--vl-shade); }
.vl-glow { fill: var(--gold); opacity: 0; transition: opacity var(--t-fast); }
.vl-ring { fill: none; stroke: var(--gold-bright); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; transition: opacity var(--t-fast); }
.vl-node:focus-visible .vl-glow, .vl-node.is-active .vl-glow { opacity: 0.55; }
.vl-node:focus-visible .vl-ring { opacity: 1; }
.vl-node.is-active:not(.vl-person) { transform: translateY(-3px); }
@media (hover: hover) {
  .vl-node:not(.vl-person):hover { transform: translateY(-3px); }
  .vl-node:hover .vl-glow { opacity: 0.55; }
}
.vl-roofbox { --vl-c: color-mix(in srgb, var(--st-pause) 60%, var(--cream)); }

/* Les portes et les auvents. */
.vl-entry { fill: color-mix(in srgb, var(--wine-deep) 80%, var(--vl-c)); }
.vl-entry__glass { fill: var(--vl-entry-glass); opacity: 0.75; }
.vl-entry__split { stroke: color-mix(in srgb, var(--wine-deep) 70%, transparent); stroke-width: 0.5; }
.vl-awning { fill: color-mix(in srgb, var(--vl-c) 78%, var(--cream)); stroke: color-mix(in srgb, var(--vl-c) 50%, var(--wine-deep)); stroke-width: 0.4; }
.vl-awning__scallop { fill: none; stroke: color-mix(in srgb, var(--vl-c) 50%, var(--wine-deep)); stroke-width: 0.5; }
:root[data-theme='dark'] .vl-entry__glass { opacity: 0.95; }
/* Les fenêtres : éteintes, allumées, vivantes (scaling), volets (pause). */
.vl-win { fill: color-mix(in srgb, var(--vl-c) 28%, var(--wine-deep)); }
:root[data-theme='dark'] .vl-win { fill: color-mix(in srgb, var(--vl-c) 22%, var(--bg)); }
.vl-win.is-lit, :root[data-theme='dark'] .vl-win.is-lit { fill: var(--vl-lit); }
.vl-win.is-live { animation: vl-blink var(--p, 4s) ease-in-out var(--d, 0s) infinite alternate; }
.vl-win--shut { fill: color-mix(in srgb, var(--st-pause) 55%, var(--surface)); }
.vl-win__slat { stroke: color-mix(in srgb, var(--st-pause) 70%, var(--wine-deep)); stroke-width: 0.6; }

/* Les enseignes : grue, banderole, échafaudage, pastille. */
.vl-crane__mast { stroke: var(--gold-deep); stroke-width: 1.2; }
.vl-crane__cap { fill: var(--gold-bright); }
.vl-crane__arm { stroke: var(--gold); stroke-width: 1.1; }
.vl-crane__weight { fill: var(--gold-deep); }
.vl-crane__hook { fill: var(--gold-bright); }
.vl-crane__jib { transform-box: fill-box; transform-origin: 24.6% 50%; animation: vl-turn 28s linear infinite; }
.vl-banderole__cloth { fill: var(--wine); }
:root[data-theme='dark'] .vl-banderole__cloth { fill: var(--gold-fill-to); }
.vl-banderole__text { font: 700 6.4px var(--font-accent); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--cream); }
:root[data-theme='dark'] .vl-banderole__text { fill: var(--on-gold); }
.vl-pennant { fill: var(--gold); }
.vl-pennant__pole { stroke: var(--gold-deep); stroke-width: 0.8; }
.vl-scaffold__lines { fill: none; stroke: var(--gold-deep); stroke-width: 0.7; stroke-linecap: round; opacity: 0.85; }
:root[data-theme='dark'] .vl-scaffold__lines { stroke: var(--gold); }
.vl-stale__dot { fill: var(--danger); stroke: var(--cream); stroke-width: 0.8; }
.vl-stale__halo { fill: var(--danger); opacity: 0.4; transform-box: fill-box; transform-origin: 50% 50%; animation: vl-pulse 2.4s ease-out infinite; }

/* Les étiquettes au pied. */
.vl-label { pointer-events: none; }
.vl-label__main { font: 600 7.4px var(--font-accent); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--text); }
.vl-label__sub { font: 500 6.4px var(--font-body); fill: var(--muted); }

/* La tour du serveur : l'écran, le monogramme, l'antenne. */
.vl-screen__glass { fill: var(--wine-deep); stroke: color-mix(in srgb, var(--gold) 55%, transparent); stroke-width: 0.6; }
:root[data-theme='dark'] .vl-screen__glass { fill: var(--bg); }
.vl-st-unknown .vl-screen__glass { fill: color-mix(in srgb, var(--st-pause) 60%, var(--bg)); stroke: var(--line-strong); }
.vl-screen__h { font: 400 5.6px var(--font-varsity); letter-spacing: 0.16em; text-transform: uppercase; fill: var(--vl-screen-ink); }
.vl-screen__k { font: 500 5.4px var(--font-body); letter-spacing: 0.04em; fill: color-mix(in srgb, var(--cream) 70%, transparent); }
.vl-screen__v { font: 700 5.8px var(--font-display); fill: var(--cream); }
.vl-screen__bar { fill: color-mix(in srgb, var(--cream) 14%, transparent); }
.vl-screen__bar-fill { fill: var(--vl-screen-ink); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 900ms var(--ease-out); }
.vl-screen__led { fill: var(--ok); animation: vl-blink 2.2s ease-in-out infinite alternate; }
.vl-st-unknown .vl-screen__led { fill: var(--st-pause); animation: none; }
.vl-screen__sweep { animation: vl-sweep 4.6s linear infinite; }
.vl-st-unknown .vl-screen__sweep { display: none; }
.vl-sweep-stop--a { stop-color: var(--gold-bright); stop-opacity: 0; }
.vl-sweep-stop--b { stop-color: var(--gold-bright); stop-opacity: 0.24; }
.vl-antenna__pole { stroke: var(--gold-deep); stroke-width: 1; }
.vl-antenna__light { fill: var(--danger); animation: vl-blink 1.6s ease-in-out infinite alternate; }
.vl-st-unknown .vl-antenna__light { fill: var(--st-pause); animation: none; }

/* Les annexes : la base, la Storage Box, Caddy. */
.vl-lamp { fill: var(--vl-c); stroke: var(--cream); stroke-width: 0.6; }
.vl-st-warn .vl-lamp { animation: vl-blink 1.1s ease-in-out infinite alternate; }
.vl-disk__line { fill: none; stroke: color-mix(in srgb, var(--cream) 45%, transparent); stroke-width: 0.7; }
.vl-fill { fill: rgba(var(--gold-rgb), 0.5); }
.vl-door { fill: color-mix(in srgb, var(--wine-deep) 72%, var(--vl-c)); }
.vl-face-text { font: 700 5.4px var(--font-accent); letter-spacing: 0.14em; fill: var(--cream); pointer-events: none; }
.vl-face-text--code { font: 600 8px ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0; }

/* Les domaines et la poste. */
.vl-signpost { stroke: var(--text-2); stroke-width: 1; }
.vl-board { fill: var(--surface); stroke: var(--line-strong); stroke-width: 0.7; }
.vl-domain.is-warn .vl-board { stroke: var(--warn); stroke-width: 1.4; }
.vl-board__name { font: 700 5.6px var(--font-body); fill: var(--text); pointer-events: none; }
.vl-board__date { font: 500 4.8px var(--font-body); fill: var(--muted); pointer-events: none; }
.vl-domain.is-warn .vl-board__date { fill: var(--warn); }
.vl-envelope__body { fill: var(--cream); }
.vl-envelope__flap { fill: none; stroke: var(--wine); stroke-width: 0.9; stroke-linejoin: round; }

.vl-gate__arch { fill: var(--wine); }
.vl-gate__opening { fill: var(--vl-ground); }
.vl-gate__text { font: 400 4.2px var(--font-varsity); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--cream); }


/* ───── Le décor ───── */
.vl-tree, .vl-lamp-post, .vl-bench, .vl-hoop, .vl-flag { pointer-events: none; transform-box: fill-box; transform-origin: 50% 100%; }
.vl-tree__shadow { fill: var(--vl-shade); opacity: 0.7; }
.vl-tree__trunk { fill: var(--vl-trunk); }
.vl-canopy { transform-box: fill-box; transform-origin: 50% 100%; animation: vl-sway var(--p, 6s) ease-in-out var(--d, 0s) infinite alternate; }
.vl-leaf { stroke: rgb(var(--shade) / 0.12); stroke-width: 0.4; }
.vl-tree--sakura .vl-leaf--a { fill: var(--vl-sakura-a); }
.vl-tree--sakura .vl-leaf--b { fill: var(--vl-sakura-b); }
.vl-tree--sakura .vl-leaf--c { fill: var(--vl-sakura-c); }
.vl-tree--sakura .vl-leaf--hi { fill: var(--vl-sakura-hi); stroke: none; }
.vl-tree--oak .vl-leaf--a { fill: var(--vl-oak-a); }
.vl-tree--oak .vl-leaf--b { fill: var(--vl-oak-b); }
.vl-tree--oak .vl-leaf--c { fill: var(--vl-oak-c); }
.vl-tree--oak .vl-leaf--hi { fill: var(--vl-oak-hi); stroke: none; }

.vl-lamp-post__pole, .vl-lamp-post__arm { fill: none; stroke: var(--vl-lamp); stroke-width: 1; stroke-linecap: round; }
.vl-lamp-post__head { fill: var(--vl-lamp); }
:root[data-theme='dark'] .vl-lamp-post__head { fill: #ffe7a8; }
.vl-lamp-post__halo { fill: var(--vl-lamp-light); }
.vl-lamp-post__pool { fill: var(--vl-lamp-light); opacity: 0.4; }

.vl-bench__seat { fill: var(--vl-wood); }
.vl-bench__back { fill: color-mix(in srgb, var(--vl-wood) 80%, var(--cream)); }
.vl-bench__legs { stroke: var(--vl-lamp); stroke-width: 0.8; }

.vl-court__base { fill: var(--vl-wood-side); }
.vl-court__base--r { fill: color-mix(in srgb, var(--vl-wood-side) 80%, black); }
.vl-court__wood { fill: var(--vl-wood); }
.vl-plank { fill: rgba(255, 255, 255, 0.07); }
.vl-plank__seam { stroke: rgba(70, 35, 10, 0.12); stroke-width: 0.4; }
.vl-court__key { fill: var(--wine); opacity: 0.85; }
.vl-court__line { fill: none; stroke: var(--cream); stroke-width: 1.3; opacity: 0.92; }
.vl-court__circle { fill: color-mix(in srgb, var(--wine) 30%, transparent); }
.vl-court__logo { opacity: 0.95; }
.vl-hoop__pole { stroke: #2d2a30; stroke-width: 1.4; stroke-linecap: round; }
.vl-hoop__board { fill: var(--cream); stroke: var(--wine); stroke-width: 0.7; }
.vl-hoop__square { fill: none; stroke: var(--wine); stroke-width: 0.6; }
.vl-hoop__rim { fill: none; stroke: #e0782f; stroke-width: 1.2; }
.vl-hoop__net { fill: none; stroke: var(--cream); stroke-width: 0.5; opacity: 0.9; }
.vl-ballfx__ball { fill: #e0782f; stroke: #5a2a12; stroke-width: 0.3; }
.vl-ballfx__seam { stroke: #5a2a12; stroke-width: 0.25; fill: none; }
.vl-score { font: 400 7px var(--font-varsity); fill: var(--gold-bright); stroke: var(--wine-deep); stroke-width: 0.6; paint-order: stroke; pointer-events: none; }

.vl-flag__pole { stroke: var(--vl-lamp); stroke-width: 1; }
.vl-flag__cap { fill: var(--gold); }
.vl-flag__cloth { transform-box: fill-box; transform-origin: 0 50%; animation: vl-wave 2.6s ease-in-out var(--d, 0s) infinite alternate; }
.vl-flag__fabric { fill: var(--wine); stroke: var(--gold); stroke-width: 0.4; }
.vl-flag__text { font: 400 3.2px var(--font-varsity); fill: var(--cream); }

/* Le ciel : soleil et nuages le jour, lune la nuit, oiseaux. */
.vl-sky, .vl-birds, .vl-cloud-shadows { pointer-events: none; }
.vl-sun { fill: rgba(255, 221, 160, 0.45); }
.vl-cloud { fill: rgba(255, 255, 255, 0.82); animation: vl-drift var(--p, 140s) linear var(--d, 0s) infinite; }
.vl-cloud-shadow { fill: rgb(var(--shade) / 0.035); animation: vl-drift-ground var(--p, 160s) linear var(--d, 0s) infinite; }
.vl-moon { display: none; }
.vl-moon__halo { fill: rgba(243, 233, 210, 0.07); }
.vl-moon__disc { fill: #f3e9d2; }
.vl-moon__shade { fill: #0a0d1a; }
.vl-birds { animation: vl-birds 46s linear infinite; }
.vl-bird { fill: none; stroke: #4a3a3c; stroke-width: 0.9; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: vl-flap 0.5s ease-in-out var(--d, 0s) infinite alternate; }
:root[data-theme='dark'] .vl-sun, :root[data-theme='dark'] .vl-cloud, :root[data-theme='dark'] .vl-cloud-shadows, :root[data-theme='dark'] .vl-birds { display: none; }
:root[data-theme='dark'] .vl-moon { display: inline; }

/* ───── Les personnages ───── */
.vc { cursor: pointer; }
.vc-hit { fill: transparent; }
.vc-shadow { fill: rgb(var(--shade) / 0.26); }
.vc-letter { font: 400 7.4px var(--font-varsity); }
.vc-letter--back { font-size: 10px; }
.vc-name-back { font: 700 3px var(--font-body); letter-spacing: 0.5px; }
.vc-cap-text { font: 400 1.6px var(--font-varsity); }
.vl-person:focus-visible .vc-shadow, .vl-person.is-active .vc-shadow { fill: var(--gold); opacity: 0.7; }
.vc-rec { animation: vl-blink 0.8s ease-in-out infinite alternate; }
.vc-code-lines { animation: vl-blink 0.7s steps(2) infinite alternate; }
.vc-portrait { display: block; }
.vc-portrait .vc-shadow { display: none; }

/* La fiche d'une personne. */
.vl-person-hero {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: end;
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-2); border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(circle at 25% 15%, rgba(var(--gold-rgb), 0.26), transparent 60%), var(--glass-tint-wine);
  box-shadow: inset 0 0 0 1px var(--glass-border);
}
.vl-person-hero__art .vc-portrait { width: 112px; height: 208px; filter: drop-shadow(0 10px 18px rgb(var(--shade) / 0.25)); }
.vl-person-hero__text { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-2); }
.vl-person-hero__letter { font: 400 3.4rem/0.9 var(--font-varsity); color: #6b1f2e; -webkit-text-stroke: 1.5px #c19a52; text-shadow: 3px 3px 0 #f1e6d2; }
.vl-person-hero__role { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.4; }
.vl-now { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.vl-now__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 2.4s ease-out infinite; flex: none; }

/* ───── Les fiches (bâtiments) ───── */
.vl-detail { display: flex; flex-direction: column; gap: var(--s-4); }
.vl-detail__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vl-detail__tagline { color: var(--text-2); font-size: var(--fs-sm); }
.vl-detail__section { display: flex; flex-direction: column; gap: var(--s-2); }
.vl-detail__title { font: 400 var(--fs-xs)/1.2 var(--font-varsity); letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--vl-accent) var(--tint), var(--mix)); }
.vl-detail__quiet { font-size: var(--fs-sm); color: var(--muted); }
.vl-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.vl-metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px; border-radius: var(--r-md); background: rgba(var(--overlay), 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.vl-metric--main { grid-column: 1 / -1; }
.vl-metric__label { font: 400 0.64rem/1.3 var(--font-varsity); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.vl-metric__value { font: 800 var(--fs-lg)/1.15 var(--font-display); overflow-wrap: anywhere; }
.vl-metric--main .vl-metric__value { font-size: var(--fs-2xl); letter-spacing: -0.02em; color: color-mix(in srgb, var(--vl-accent) var(--tint), var(--mix)); }
.vl-metric__value .tag { font-family: var(--font-body); }
.vl-metric__hint { font-size: var(--fs-xs); color: var(--muted); }
.vl-kvs { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.vl-kv { display: grid; grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.4fr); gap: var(--s-3); align-items: baseline; font-size: var(--fs-sm); }
.vl-kv dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.vl-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.vl-services { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vl-service { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border-radius: var(--r-md); background: rgba(var(--overlay), 0.04); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); }
.vl-service__name { font-weight: 600; }
.vl-service__detail { flex: 1 1 100%; font-size: var(--fs-xs); color: var(--muted); }
.vl-step { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); background: rgba(var(--overlay), 0.04); box-shadow: inset 0 0 0 1px var(--line); border-left: 3px solid var(--vl-accent); }
.vl-step.is-late { background: var(--danger-soft); border-left-color: var(--danger); }
.vl-step__label { font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; }
.vl-step__when { font-size: var(--fs-xs); color: var(--muted); }
.vl-worry { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 34%, transparent); font-size: var(--fs-sm); line-height: 1.45; }
.vl-worry svg { flex: none; margin-top: 2px; color: var(--warn); }
.vl-code { padding: 2px 6px; border-radius: 5px; background: rgba(var(--overlay), 0.06); font: 500 0.78rem/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; overflow-wrap: anywhere; }

/* ───── La mer, la plage, les palmiers ───── */
.vl-sea__water { fill: var(--vl-sea); }
.vl-sea__waves { pointer-events: none; }
.vl-wave { fill: none; stroke: var(--vl-wave); stroke-width: 1.2; opacity: 0.55; animation: vl-wave-drift 9s ease-in-out var(--d, 0s) infinite alternate; }
.vl-sand { fill: var(--vl-sand); }
.vl-sand__wet { fill: var(--vl-sand-wet); }
.vl-inlet { fill: var(--vl-lagoon); }
.vl-foam { fill: none; stroke: var(--vl-foam); stroke-width: 1.8; stroke-linecap: round; opacity: 0.85; animation: vl-foam 4s ease-in-out infinite alternate; }
.vl-ripple { transform-box: fill-box; transform-origin: 50% 50%; fill: none; stroke: var(--vl-foam); stroke-width: 0.6; opacity: 0.5; animation: vl-ripple 5s ease-in-out var(--d, 0s) infinite; }
.vl-pier__plank { fill: var(--vl-wood); stroke: var(--vl-wood-side); stroke-width: 0.3; }
.vl-pier__pile { stroke: var(--vl-wood-side); stroke-width: 1.4; stroke-linecap: round; }
.vl-parasol__pole { stroke: var(--vl-lamp); stroke-width: 0.9; }
.vl-parasol__top { fill: var(--cream); stroke: var(--wine); stroke-width: 0.5; }
.vl-parasol__top--wine { fill: var(--wine); stroke: var(--gold); }
.vl-parasol__stripe { fill: none; stroke: var(--wine); stroke-width: 1.2; }
.vl-towel { fill: var(--wine); opacity: 0.9; }
.vl-beachball { fill: #e0782f; stroke: var(--cream); stroke-width: 0.8; }
.vl-palm { pointer-events: none; }
.vl-palm__trunk { fill: #8b6646; stroke: #5a4030; stroke-width: 0.4; }
.vl-palm__crown { transform-box: fill-box; transform-origin: 50% 80%; }
.vl-frond { fill: none; stroke-width: 2.6; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 0; animation: vl-frond 4.6s ease-in-out var(--d, 0s) infinite alternate; }
.vl-frond--a { stroke: var(--vl-oak-b); }
.vl-frond--b { stroke: var(--vl-oak-c); }
.vl-coconut { fill: #6b4a2b; }

/* ───── Le bureau NBA ───── */
.vl-office__band { fill: var(--wine); }
.vl-office__text { font: 400 3px var(--font-varsity); letter-spacing: 0.18em; fill: var(--cream); }
.vl-office__stripe { fill: var(--gold); }
.vl-office__banner { fill: var(--wine); stroke: var(--gold); stroke-width: 0.4; }
.vl-office__banner-text { font: 400 3.6px var(--font-varsity); fill: var(--cream); writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0; }
.vl-office__terrace { fill: color-mix(in srgb, var(--vl-wood) 60%, var(--cream)); stroke: var(--vl-wood-side); stroke-width: 0.4; }

/* ───── L'intérieur d'un bâtiment ───── */
.vl-map__frame.is-inside .vl-overlay, .vl-map__frame.is-inside .vl-petals, .vl-map__frame.is-inside .vl-hud, .vl-map__frame.is-inside .vl-tip { visibility: hidden; }
.vl-interior {
  position: absolute; inset: 0; z-index: 7; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 12px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  opacity: 0; transition: opacity 320ms var(--ease-out);
}
.vl-interior.is-in { opacity: 1; }
.vl-interior.is-out { opacity: 0; }
.vl-crumbs { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-2); }
.vl-crumbs__btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px 6px 8px; border: 0; border-radius: var(--r-pill); background: var(--wine); color: var(--cream); font-weight: 700; font-size: var(--fs-sm); }
.vl-crumbs__btn:hover { background: var(--gold-fill-hover); }
.vl-crumbs__sep { color: var(--muted); }
.vl-crumbs__here { font-weight: 700; color: var(--text); }
.vl-interior__stage { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.vl-room { width: 100%; height: 100%; max-height: 100%; filter: drop-shadow(0 24px 40px rgb(var(--shade) / 0.25)); animation: vl-room-in 600ms var(--ease-out) both; }
.vl-interior.is-in .vl-room { animation-play-state: running; }
.vl-room__floor { fill: var(--vl-room-floor); stroke: var(--line-strong); stroke-width: 0.5; }
.vl-room__grid { fill: none; stroke: rgb(var(--shade) / 0.08); stroke-width: 0.35; }
.vl-room__wall--a { fill: var(--vl-room-wall-a); }
.vl-room__wall--b { fill: var(--vl-room-wall-b); }
.vl-room--server .vl-room__wall--a, .vl-room--server .vl-room__wall--b { fill: #22262f; }
.vl-room--server .vl-room__floor { fill: #2b3039; }
.vl-room__skirting { fill: none; stroke: rgb(var(--shade) / 0.25); stroke-width: 1.2; }
.vl-room__corner { stroke: rgba(255, 255, 255, 0.35); stroke-width: 0.8; }
.vl-room__window { fill: var(--vl-entry-glass); stroke: var(--cream); stroke-width: 0.8; }
.vl-room__window-bar { stroke: var(--cream); stroke-width: 0.6; }
.vl-room__name { font: 700 6px var(--font-body); fill: var(--text); }
.vl-plaque__bg { fill: var(--surface); stroke: rgb(var(--shade) / 0.2); stroke-width: 0.5; }
.vl-plaque__edge { fill: none; stroke: var(--gold-line); stroke-width: 0.4; }
.vl-plaque--board .vl-plaque__bg { fill: #f7f3ea; }
.vl-plaque--dark .vl-plaque__bg { fill: var(--wine-deep); }
.vl-plaque--dark .vl-plaque__title, .vl-plaque--dark .vl-plaque__line { fill: var(--cream); }
.vl-plaque--gold .vl-plaque__bg { fill: var(--gold); }
.vl-plaque--gold .vl-plaque__title, .vl-plaque--gold .vl-plaque__line { fill: var(--wine-deep); }
.vl-plaque__title { font: 400 4.6px var(--font-varsity); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--wine); }
.vl-plaque__line { font: 500 4.2px var(--font-body); fill: var(--text); }
.vl-desk__top { --vl-c: #c99a63; }
.vl-desk__leg { --vl-c: #5b4030; }
.vl-desk__foot { --vl-c: #3a3a42; }
.vl-monitor { --vl-c: #2a2a33; }
.vl-monitor__screen { fill: #1f2433; }
.vl-monitor__lines { stroke: #8fd3a8; stroke-width: 0.7; animation: vl-blink 1.2s steps(2) infinite alternate; }
.vl-laptop { --vl-c: #c9ccd3; }
.vl-papers { --vl-c: #fbf7ee; }
.vl-chair__seat { --vl-c: var(--wine); }
.vl-chair__back { --vl-c: var(--wine-deep); }
.vl-pot { --vl-c: #b4603c; }
.vl-plant__leaf { fill: none; stroke: var(--vl-oak-b); stroke-width: 2.2; stroke-linecap: round; }
.vl-rug__base { fill: color-mix(in srgb, var(--wine) 70%, var(--bg)); }
.vl-rug__inner { fill: none; stroke: var(--gold); stroke-width: 0.8; stroke-dasharray: 2 2; }
.vl-sofa__seat { --vl-c: #6d5a7a; }
.vl-sofa__back, .vl-sofa__arm { --vl-c: #5a4866; }
.vl-counter { --vl-c: #e9dcc2; }
.vl-machine { --vl-c: #2f2f36; }
.vl-steam { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 0.8; animation: vl-steam 2.2s ease-in-out infinite; }
.vl-pennant-wall__cloth { fill: var(--wine); stroke: var(--gold); stroke-width: 0.4; }
.vl-pennant-wall__text { font: 400 4px var(--font-varsity); fill: var(--cream); }
.vl-rack__body { --vl-c: #353a45; }
.vl-rack__slot { fill: #1b1f27; }
.vl-rack__led { fill: var(--vl-c, var(--ok)); }
.vl-rack.vl-st-ok { --vl-c: var(--ok); } .vl-rack.vl-st-warn { --vl-c: var(--warn); } .vl-rack.vl-st-unknown { --vl-c: var(--st-pause); }
.vl-rack .vl-face--top, .vl-rack .vl-face--right, .vl-rack .vl-face--left { fill: #353a45; }
.vl-rack .vl-face--left { fill: #2b2f38; } .vl-rack .vl-face--top { fill: #454b58; }
.vl-rack__label { font: 700 3.4px var(--font-body); fill: #cfd5e2; }
.vl-cable { fill: none; stroke: #ffb347; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.8; animation: vl-cable 1.4s linear infinite; }
.vl-terminal__body { --vl-c: #2a2a33; }
.vl-terminal__screen { fill: #0f141c; }
.vl-terminal__line { font: 500 3.2px ui-monospace, Menlo, monospace; fill: #8fd3a8; }
.vl-terminal__cursor { fill: #8fd3a8; animation: vl-blink 0.9s steps(2) infinite alternate; }
.vl-turnstile__post { --vl-c: #8a8f9a; }
.vl-turnstile__bar { --vl-c: var(--gold); }
.vl-turnstile__text { font: 400 5px var(--font-varsity); fill: var(--wine); letter-spacing: 0.12em; }
.vl-safe__body { --vl-c: #4a4f5a; }
.vl-safe__dial { fill: #d6d9e0; stroke: #2a2d33; stroke-width: 0.6; }
.vl-safe__dial-mark { stroke: #2a2d33; stroke-width: 0.6; }
.vl-shelf__board { --vl-c: #b48a5c; }
.vl-shelf__side { --vl-c: #8c6a44; }
.vl-folder--timour { --vl-c: #6b1f2e; } .vl-folder--theo { --vl-c: #c19a52; } .vl-folder--zied { --vl-c: #3d6cb3; } .vl-folder--inconnu { --vl-c: #8a8f9a; }
.vl-tank { --vl-c: #cfd7df; }
.vl-tank .vl-face--left, .vl-tank .vl-face--right, .vl-tank .vl-face--top { fill-opacity: 0.45; }
.vl-tank__fill { --vl-c: var(--gold); }
.vl-mailbox { fill: #d9d0bd; stroke: #7a6a52; stroke-width: 0.4; }
.vl-mailbox.is-used { fill: var(--gold); }
.vl-mailbox__slot { fill: #3a3025; }
.vl-branches__line { fill: none; stroke: var(--gold); stroke-width: 1; }
.vl-branches__dot { fill: var(--wine); stroke: var(--cream); stroke-width: 0.6; }
.vl-worker .vc-shadow { fill: rgb(var(--shade) / 0.3); }
.vl-worker .vc-bob { animation: vl-breathe 3.2s ease-in-out var(--d, 0s) infinite alternate; }

.vl-interior__panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background-color: var(--glass-bg-strong); }
.vl-interior__head { display: flex; flex-direction: column; gap: 10px; padding: var(--s-4) var(--s-5) var(--s-3); }
.vl-interior__title { font: 800 var(--fs-xl)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; outline: none; }
.vl-room-tabs { align-self: flex-start; }
.vl-interior__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s-5) var(--s-5); scrollbar-width: thin; }
.vl-interior__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); }
.vl-guide { font-size: var(--fs-sm); line-height: 1.55; color: var(--text); }
.vl-team { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-team__chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: var(--r-pill); background: rgba(var(--overlay), 0.05); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); font-weight: 600; }
.vl-team__face { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #fbf3e4, #e8d6b6); border: 1px solid var(--gold-line); display: grid; place-items: center; font: 700 12px/1 var(--font-display); color: var(--wine); }
.vl-team__face .vc-portrait { width: 100%; height: 100%; }
.vl-team__role { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.vl-links { display: flex; flex-direction: column; gap: 6px; }
.vl-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-md); text-align: left; background: rgba(var(--overlay), 0.04); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.vl-link--go { cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
.vl-link--go:hover { background: var(--wine-soft); }
.vl-link--go:active { transform: scale(0.98); }
.vl-link__to { font-weight: 700; white-space: nowrap; }
.vl-link__how { color: var(--text-2); }
.vl-link svg { color: var(--gold-bright); }

@media (max-width: 999px) {
  .vl-interior { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 46%) minmax(0, 1fr); gap: 8px; padding: 8px; }
  .vl-interior__panel { border-radius: var(--r-lg); }
  .vl-interior__head { padding: var(--s-3) var(--s-4) var(--s-2); }
  .vl-interior__title { font-size: var(--fs-lg); }
  .vl-interior__body { padding: 0 var(--s-4) var(--s-4); }
}

/* ───── Mobile ───── */
@media (max-width: 860px) {
  .vl { gap: var(--s-4); }
  .vl-head .page-sub { display: none; }
  .vl-map { margin: 0 calc(-1 * var(--s-2)); }
  .vl-map__frame { height: 72vh; height: 72dvh; min-height: 460px; border-radius: var(--r-lg); }
  .vl-hud { padding: 10px; }
  .vl-hud__top { flex-wrap: wrap; }
  .vl-status { flex-wrap: nowrap; max-width: calc(100% - 132px); padding: 8px 12px; font-size: var(--fs-xs); overflow: hidden; }
  .vl-status__parts { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; mask-image: linear-gradient(90deg, black 80%, transparent); }
  .vl-follow { order: 3; flex: 1 1 100%; justify-content: space-between; }
  .vl-hud__bottom { flex-direction: column-reverse; align-items: stretch; }
  .vl-hud__legend { align-self: flex-end; }
  .vl-chip { padding-right: 10px; }
  .vl-chip__what { display: none; }
  .vl-chip__face { width: 34px; height: 34px; }
  .vl-legend-btn__label { display: none; }
  .vl-legend-btn { padding: 0 6px; }
  .vl-name { font-size: 10px; }
  .vl-bubble { max-width: 190px; font-size: 11px; }
}

/* ───── Mouvement ───── */
@keyframes vl-draw-x { from { transform: scaleX(0); } }
@keyframes vl-wave-drift { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
@keyframes vl-foam { from { opacity: 0.5; stroke-width: 1.2; } to { opacity: 0.95; stroke-width: 2.4; } }
@keyframes vl-ripple { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes vl-frond { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes vl-room-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
@keyframes vl-breathe { from { transform: translateY(0); } to { transform: translateY(-0.7px); } }
@keyframes vl-steam { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes vl-cable { to { stroke-dashoffset: -6; } }
@keyframes vl-blink { 0%, 50% { opacity: 1; } 100% { opacity: 0.3; } }
@keyframes vl-turn { to { transform: rotate(360deg); } }
@keyframes vl-sweep { to { transform: translateY(124px); } }
@keyframes vl-pulse { 0% { transform: scale(0.6); opacity: 0.5; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes vl-pop { from { opacity: 0; transform: scale(0.9) translateY(6px); } }
@keyframes vl-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
@keyframes vl-wave { from { transform: skewY(-5deg) scaleX(0.9); } to { transform: skewY(4deg) scaleX(1); } }
@keyframes vl-drift { from { transform: translateX(-260px); } to { transform: translateX(1460px); } }
@keyframes vl-drift-ground { from { transform: translate(-200px, -60px); } to { transform: translate(1400px, 120px); } }
@keyframes vl-birds { 0% { transform: translate(-80px, 150px); } 60% { transform: translate(1300px, 40px); } 100% { transform: translate(1300px, 40px); } }
@keyframes vl-flap { from { transform: scaleY(1); } to { transform: scaleY(-0.5); } }
@keyframes vl-twinkle { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes vl-petal {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.9; }
  50% { transform: translate(-40px, 380px) rotate(220deg); }
  100% { transform: translate(-110px, 900px) rotate(520deg); opacity: 0.7; }
}
@keyframes vl-firefly {
  0% { transform: translate(0, 0); opacity: 0.1; }
  40% { opacity: 1; }
  100% { transform: translate(28px, -36px); opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .vl-win.is-live, .vl-crane__jib, .vl-screen__sweep, .vl-stale__halo, .vl-screen__led, .vl-antenna__light, .vl-lamp, .vl-status__dot,
  .vl-canopy, .vl-flag__cloth, .vl-cloud, .vl-cloud-shadow, .vl-birds, .vl-bird, .vl-petal, .vc-rec, .vc-code-lines, .vl-follow__dot, .vl-now__dot,
  .vl-wave, .vl-foam, .vl-ripple, .vl-frond, .vl-room, .vl-worker .vc-bob, .vl-steam, .vl-cable, .vl-monitor__lines, .vl-terminal__cursor { animation: none; }
  .vl-petals, .vl-birds { display: none; }
  .vl-stale__halo { opacity: 0.25; transform: scale(1.4); }
  .vl-node, .vl-tip, .vl-screen__bar-fill, .vl-panel, .vl-bubble { transition: none; }
}

/* L'attribut hidden doit gagner sur tout display: posé plus haut. */
.vl-notice[hidden], .vl-panel__foot[hidden], [class^='vl-'][hidden], [class*=' vl-'][hidden] { display: none !important; }

/* ───── Le Studio Atlas, étage par étage (studio.js, 17/10/2026) ───── */
.vl-interior__stage--floors { grid-template-rows: minmax(0, 1fr) auto; place-items: stretch; gap: 6px; }
.vl-interior__stage--floors .vl-room { min-height: 0; }
.vl-floors { margin: 0 10px 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 10px 6px 8px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-2); }
.vl-floors__icon { display: inline-flex; color: var(--gold); margin-right: 2px; }
.vl-floors__btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 6px; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: background 160ms, color 160ms; }
.vl-floors__btn:hover { background: rgb(var(--shade) / 0.06); color: var(--text); }
.vl-floors__btn[aria-current="page"] { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.vl-floors__num { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: rgb(var(--shade) / 0.1); font: 700 10px var(--font-body); color: var(--text); }
.vl-floors__btn[aria-current="page"] .vl-floors__num { background: rgba(255, 255, 255, 0.2); color: var(--cream); }
.vl-floors__cap { flex: 1 1 100%; padding: 2px 4px 0; font-size: 11.5px; color: var(--text-2); }
.vl-floors__cap strong { color: var(--text); }
@media (min-width: 900px) { .vl-floors__cap { flex: 1 1 auto; padding: 0 0 0 8px; border-left: 1px solid var(--line); margin-left: 4px; } }

/* La pièce du studio : fenêtres teintées par l'heure de Bangkok. */
.vl-studio-window { fill: #bfe3ff; transition: fill 600ms; }
.vl-studio-window__sill { fill: var(--cream); }
.vl-room.is-soir .vl-studio-window { fill: #ffb27a; }
.vl-room.is-nuit .vl-studio-window { fill: #1d2a4a; }
.vl-room.is-nuit .vl-room__wall--a, .vl-room.is-nuit .vl-room__wall--b { filter: brightness(0.9); }
.vl-room--espace .vl-room__wall--a { fill: #d9e4f2; }
.vl-room--espace .vl-room__wall--b { fill: #c8d6e8; }
.vl-room--espace .vl-room__floor { fill: #c5d2e3; }
[data-theme="dark"] .vl-room--espace .vl-room__wall--a { fill: #2a3448; }
[data-theme="dark"] .vl-room--espace .vl-room__wall--b { fill: #232c3e; }
[data-theme="dark"] .vl-room--espace .vl-room__floor { fill: #1f2737; }

/* L'écran au mur. */
.vl-screen-big__frame { fill: #2a2a30; }
.vl-screen-big__bg { fill: #0f1320; }
.vl-screen-big__title { font: 400 3.8px var(--font-varsity); letter-spacing: 0.12em; fill: #8fa3c7; }
.vl-screen-big__value { font: 800 11px var(--font-display); fill: #ffffff; }
.vl-screen-big__line { font: 500 3.8px var(--font-body); fill: #b8c4da; }
.vl-screen-big--wine .vl-screen-big__bg { fill: var(--wine-deep); }
.vl-screen-big--wine .vl-screen-big__value { fill: var(--cream); }
.vl-screen-big--wine .vl-screen-big__title { fill: var(--gold); }

/* L'ascenseur. */
.vl-lift { cursor: pointer; }
.vl-lift__body { --vl-c: #9aa3b2; }
.vl-lift__door { fill: #cdd4df; stroke: #7d8696; stroke-width: 0.5; transition: transform 300ms; }
.vl-lift:hover .vl-lift__door:first-of-type { transform: translateX(-2px); }
.vl-lift:hover .vl-lift__door:nth-of-type(2) { transform: translateX(2px); }
.vl-lift__panel { fill: #1b1f2a; }
.vl-lift__text { font: 700 4px var(--font-body); fill: var(--gold); }
.vl-lift__label { font: 700 5px var(--font-body); fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 2px; }
.vl-lift:focus-visible .vl-lift__body .vl-face { stroke: var(--gold); stroke-width: 1; }

/* La salle des process : le circuit, les stations, les pions. */
.vl-track__base { fill: rgb(var(--shade) / 0.12); }
.vl-track__line { fill: none; stroke: var(--gold); stroke-width: 0.9; stroke-dasharray: 3 3; animation: vl-track-flow 1.6s linear infinite; }
@keyframes vl-track-flow { to { stroke-dashoffset: -6; } }
.vl-station__pad { --vl-c: #e9dfd0; }
.vl-station--prod .vl-station__pad { --vl-c: #c9a45c; }
.vl-station--livre .vl-station__pad { --vl-c: #9fc58b; }
.vl-station--suivi .vl-station__pad { --vl-c: #8fb4e0; }
.vl-station--soon { opacity: 0.55; }
.vl-station__label { font: 700 5.2px var(--font-body); fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 2px; }
.vl-station__badge circle { fill: var(--wine); stroke: var(--cream); stroke-width: 0.8; }
.vl-station__badge text { font: 700 5px var(--font-body); fill: var(--cream); }
.vl-station__more { font: 700 4.6px var(--font-body); fill: var(--wine); }
.vl-puck__disc { --vl-c: var(--vl-c, #c9a45c); }
.vl-puck { animation: vl-puck-float 2.8s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes vl-puck-float { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }
.vl-puck__text { font: 800 3.6px var(--font-body); fill: #fff; paint-order: stroke; stroke: rgb(0 0 0 / 0.35); stroke-width: 0.6px; }
.vl-soon-sign__post { --vl-c: #6b5d55; }
.vl-soon-sign__board { fill: var(--surface); stroke: var(--gold-line); stroke-width: 0.6; }
.vl-soon-sign__text { font: 700 4.6px var(--font-body); fill: var(--text); }
.vl-soon-sign__sub { font: 500 3.4px var(--font-body); fill: var(--text-2); }

/* L'Espace Atlas : la mappemonde, le globe, les trophées. */
.vl-map__frame { fill: #2a2a30; }
.vl-map__sea { fill: #0f1a33; }
.vl-map__land { fill: #2f4a73; stroke: #4a6a9c; stroke-width: 0.3; stroke-linejoin: round; }
.vl-map__title { font: 400 3.6px var(--font-varsity); letter-spacing: 0.14em; fill: #8fa3c7; }
.vl-map__arc { fill: none; stroke: #e2c27a; stroke-width: 0.5; stroke-dasharray: 60; stroke-dashoffset: 60; animation: vl-map-draw 1.6s ease-out var(--d, 0s) forwards; }
@keyframes vl-map-draw { to { stroke-dashoffset: 0; } }
.vl-map__base circle { fill: #e2c27a; }
.vl-map__client circle { fill: var(--cream); }
.vl-map__pulse { fill: none !important; stroke: currentColor; stroke-width: 0.5; color: #e2c27a; opacity: 0; animation: vl-map-pulse 2.4s ease-out var(--d, 0s) infinite; }
.vl-map__client .vl-map__pulse { color: var(--cream); }
@keyframes vl-map-pulse { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.6); } }
.vl-map__pulse { transform-box: fill-box; transform-origin: center; }
.vl-map__label { font: 700 3.6px var(--font-body); fill: var(--cream); }
.vl-dais { --vl-c: #d8cbb6; }
.vl-trophy__base { --vl-c: #3a3038; }
/* De l'or pour de vrai : dans la direction « Givre », var(--gold) est le bleu de l'app. */
.vl-trophy__cup, .vl-trophy__stem { fill: #d6ad55; }
.vl-trophy__handles { fill: none; stroke: #d6ad55; stroke-width: 0.9; }
.vl-globe__plinth { --vl-c: #e3ded6; }
.vl-globe__stem { --vl-c: #d6ad55; }
.vl-globe__sea { fill: #3f7fc4; }
.vl-globe__land { fill: #7fb66a; }
.vl-globe__shine { fill: rgba(255, 255, 255, 0.35); }
.vl-globe__ring { fill: none; stroke: #d6ad55; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: vl-globe-ring 7s linear infinite; }
@keyframes vl-globe-ring { from { transform: rotate(-18deg) scaleY(1); } 50% { transform: rotate(-18deg) scaleY(0.35); } to { transform: rotate(-18deg) scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .vl-track__line, .vl-puck, .vl-map__arc, .vl-map__pulse, .vl-globe__ring { animation: none; } .vl-map__arc { stroke-dashoffset: 0; } .vl-map__pulse { display: none; } }

/* Le mode tournage dans un intérieur : ni chiffres ni noms de clients. */
.vl-room.is-tournage .vl-plaque__line, .vl-room.is-tournage .vl-puck__text, .vl-room.is-tournage .vl-screen-big__line, .vl-room.is-tournage .vl-screen-big__value, .vl-room.is-tournage .vl-station__badge, .vl-room.is-tournage .vl-station__more { display: none; }
.vl-puck--scene .vl-puck__disc { filter: drop-shadow(0 0 4px #ffe08a); }
.vl-room.is-tournage .vl-puck--scene .vl-puck__text { display: block; }