/* Page QG — NBA City, préfixe .vi- (la ville en images).
   Une grande image façon jeu (3072 × 4608 : la ville, la campagne au-dessus, la mer en dessous) qu'on fait glisser et zoomer, le
   ciel qui suit l'heure de Bangkok, des points chauds posés sur l'image, des étiquettes de verre qui ne grossissent
   pas avec le zoom (réduites à une pastille quand on voit toute la ville : .is-far), trois personnages qui marchent
   sur les routes, une feuille de verre pour les fiches (en bas sur mobile, à droite sur ordinateur). Le verre et
   les fiches reprennent les recettes de carte.css (.vl-glass, .vl-detail…) : le cadre porte aussi la classe .vl
   pour que l'intérieur des bâtiments (interior.js) retrouve ses variables. Seules couleurs en dur : le fond du
   cadre, un dégradé ciel → mer relevé sur l'image, pour que les marges ne se voient pas. */

.vi { display: flex; flex-direction: column; gap: var(--s-4); min-height: calc(100dvh - var(--s-6) - var(--s-8)); }
.vi-head { align-items: flex-end; margin-bottom: 0; }
.vi-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);
}
/* La carte d'explication : ce que montre la ville, juste au-dessus d'elle. */
.vi-intro {
  flex: 1 1 320px; max-width: 560px; padding: 12px 16px 13px; border-radius: var(--r-md);
  background: var(--glass-bg-strong); border: 1px solid rgba(var(--gold-rgb), 0.45);
  box-shadow: var(--glass-inset), 0 8px 24px rgba(var(--wine-rgb), 0.08);
}
.vi-intro__title { margin: 0 0 4px; font: 500 var(--fs-md)/1.2 var(--font-varsity); letter-spacing: 0.01em; color: var(--wine); }
:root[data-theme='dark'] .vi-intro__title { color: var(--gold-bright); }
.vi-intro__text { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); }
.vi-intro__hint { margin: 6px 0 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--gold-bright); }
.vi-map { position: relative; flex: 1; min-height: 0; display: flex; }

/* ───── Le cadre et le monde ───── */
.vi-frame {
  position: relative; flex: 1; min-height: 520px; overflow: hidden; isolation: isolate; display: block; gap: 0;
  border-radius: var(--r-xl); border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, #c9dcec 0%, #4a98b6 42%, #3f84a7 100%);
  box-shadow: var(--glass-inset), var(--glass-shadow);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline-offset: -2px;
}
.vi-frame.is-dragging, .vi-frame.is-dragging .vi-spot { cursor: grabbing; }
.vi-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; --vi-inv: 1; --vi-boost: 1; }
.vi-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
.vi-layer__mini, .vi-layer__full { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* Pas de flou sur la mini : un filtre sur un calque de 3072 px fait exploser la mémoire graphique sur iPhone. */
.vi-layer__mini { image-rendering: auto; }
.vi-layer__full { opacity: 0; transition: opacity 500ms ease; }
.vi-layer__full.is-ready { opacity: 1; }

/* ───── Les points chauds ───── */
.vi-spots { position: absolute; inset: 0; z-index: 4; }
.vi-spot {
  position: absolute; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer;
  border-radius: calc(18px * var(--vi-inv)); outline: none;
  box-shadow: 0 0 0 calc(1.5px * var(--vi-inv)) transparent;
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
.vi-spot.is-hover, .vi-spot:focus-visible, .vi-spot.is-active {
  box-shadow: 0 0 0 calc(1.5px * var(--vi-inv)) var(--gold-bright), 0 0 calc(24px * var(--vi-inv)) rgba(var(--gold-rgb), 0.35);
  background: rgba(var(--gold-rgb), 0.06);
}
.vi-spot:focus-visible { box-shadow: 0 0 0 calc(2.5px * var(--vi-inv)) var(--gold-bright); }
/* Les étiquettes : un calque à la taille de l'écran, hors du monde. Chacune est posée par la caméra en (--vi-x,
   --vi-y), le milieu du haut (ou du bas) de son bâtiment : elle garde donc sa taille quel que soit le zoom, sur
   tous les navigateurs. Couleurs NBA : papier crème, lettrage bordeaux, liseré or. */
.vi-labels { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.vi-frame.is-inside .vi-labels { visibility: hidden; }
.vi-lab {
  --vi-ink: var(--wine); --vi-paper: rgba(255, 249, 238, 0.9); --vi-gap: 8px;
  position: absolute; left: 0; top: 0; margin: 0; pointer-events: auto; cursor: pointer; font: inherit; color: var(--vi-ink);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 5px 11px 6px; border-radius: var(--r-md); white-space: nowrap; text-align: left;
  border: 1px solid rgba(var(--gold-rgb), 0.6); background: var(--vi-paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px rgba(var(--wine-rgb), 0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transform: translate3d(var(--vi-x, -999px), var(--vi-y, -999px), 0) translate(-50%, calc(-100% - var(--vi-gap)));
  will-change: transform; transition: box-shadow var(--t-fast);
}
:root[data-theme='dark'] .vi-lab { --vi-ink: var(--gold-bright); --vi-paper: rgba(42, 13, 19, 0.86); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
/* Les voisins serrés accrochent leur étiquette sous le bâtiment plutôt qu'au-dessus. */
.vi-lab--bottom { transform: translate3d(var(--vi-x, -999px), var(--vi-y, -999px), 0) translate(-50%, var(--vi-gap)); }
.vi-lab.is-hover, .vi-lab.is-active { box-shadow: var(--glow-gold); z-index: 2; }
.vi-lab--qg { --vi-gap: 14px; }
/* Entre la vue d'ensemble et l'approche, l'étiquette ne dit que le nom : le chiffre et les badges s'ouvrent de près,
   au survol ou quand le lieu est actif. C'est ce qui évite que les étiquettes des voisins se marchent dessus. */
.vi-frame:not(.is-near) .vi-lab:not(.is-hover):not(.is-active) .vi-spot__line,
.vi-frame:not(.is-near) .vi-lab:not(.is-hover):not(.is-active) .vi-spot__badges { display: none; }
.vi-frame:not(.is-near):not(.is-far) .vi-lab:not(.is-hover):not(.is-active) { padding: 4px 10px 5px; }
.vi-spot__head { display: inline-flex; align-items: center; gap: 7px; }
.vi-spot__name, .vi-spot__short { font: 500 11.5px/1.2 var(--font-varsity); letter-spacing: 0.01em; color: var(--vi-ink); }
.vi-spot__short { display: none; font-size: 10px; }
/* Vue d'ensemble : une pastille par bâtiment (nom court), un point pour les villas et l'annexe, rien pour les lieux d'ambiance. */
.vi-frame.is-far .vi-spot__name, .vi-frame.is-far .vi-spot__line, .vi-frame.is-far .vi-spot__badges { display: none; }
.vi-frame.is-far .vi-spot__short { display: inline; }
.vi-frame.is-far .vi-lab { --vi-gap: 4px; padding: 3px 8px 3px 7px; gap: 0; border-radius: var(--r-pill); }
.vi-frame.is-far .vi-lab--qg { --vi-gap: 6px; }
.vi-frame.is-far .vi-spot__head { gap: 5px; }
.vi-frame.is-far .vi-spot__dot { width: 7px; height: 7px; }
.vi-frame.is-far .vi-lab--place { display: none; }
.vi-frame.is-far .vi-lab--villa .vi-spot__short, .vi-frame.is-far .vi-lab--annex .vi-spot__short { display: none; }
.vi-frame.is-far .vi-lab--villa, .vi-frame.is-far .vi-lab--annex { padding: 4px; }
.vi-frame.is-far .vi-lab--villa.is-hover .vi-spot__short, .vi-frame.is-far .vi-lab--villa.is-active .vi-spot__short,
.vi-frame.is-far .vi-lab--annex.is-hover .vi-spot__short, .vi-frame.is-far .vi-lab--annex.is-active .vi-spot__short { display: inline; }
.vi-frame.is-far .vi-lab--villa.is-hover, .vi-frame.is-far .vi-lab--villa.is-active,
.vi-frame.is-far .vi-lab--annex.is-hover, .vi-frame.is-far .vi-lab--annex.is-active { padding: 3px 8px 3px 7px; }
.vi-spot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vi-c, var(--gold)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vi-c, var(--gold)) 30%, transparent); flex: none; }
.vi-spot__dot[data-status='pause'] { background: transparent; box-shadow: inset 0 0 0 2px var(--vi-c, var(--gold)); }
.vi-spot__dot[data-status='scaling'] { animation: vi-breathe 2.4s ease-in-out infinite alternate; }
.vi-spot__line { font-size: 11px; line-height: 1.2; color: var(--text-2); font-variant-numeric: tabular-nums; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.vi-spot__badges { position: absolute; right: -14px; top: -14px; display: flex; gap: 2px; }
.vi-spot__badges[hidden], .vi-spot__line[hidden], .vi-spot__dot[hidden] { display: none; }
.vi-lab--place { padding: 4px 10px 5px; --vi-paper: rgba(255, 249, 238, 0.74); border-color: rgba(var(--gold-rgb), 0.35); }
:root[data-theme='dark'] .vi-lab--place { --vi-paper: rgba(42, 13, 19, 0.7); }
.vi-lab--place .vi-spot__name { font-size: 10px; opacity: 0.85; }
.vi-lab--qg { border-color: var(--gold); }

/* ───── Les personnages ─────
   Posés sur le monde (ils suivent zoom et déplacement), pieds en (x, y). --vi-boost les grossit quand on dézoome
   pour qu'ils restent visibles sur la vue d'ensemble ; la bulle compense les deux échelles pour rester lisible. */
.vi-people { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.vi-person {
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: transparent;
  transform-origin: 0 0; pointer-events: auto; cursor: pointer; outline: none; --vi-lane: 0px;
}
.vi-person__svg { position: absolute; display: block; overflow: visible; transform-origin: 50% 50%; filter: drop-shadow(0 3px 2px rgb(0 0 0 / 0.25)); }
.vi-person .vc-shadow { fill: rgb(0 0 0 / 0.28); }
.vi-person .vc-letter { font: 500 7.4px var(--font-varsity); }
.vi-person .vc-letter--back { font-size: 10px; }
.vi-person .vc-name-back { font: 600 3px var(--font-body); letter-spacing: 0.5px; }
.vi-person .vc-cap-text { font: 500 1.6px var(--font-varsity); }
.vi-person:focus-visible .vc-shadow, .vi-person.is-followed .vc-shadow { fill: var(--gold); opacity: 0.8; }
.vi-bubble {
  position: absolute; left: 0; top: calc(-150px - 10px); z-index: 1;
  max-width: 220px; padding: 5px 10px 6px; border-radius: var(--r-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 11.5px/1.25 var(--font-body); color: var(--text); text-align: center;
  background-color: var(--glass-bg-strong);
  transform: translate(-50%, -100%) scale(calc(var(--vi-inv) / var(--vi-boost))); transform-origin: 50% 100%;
}
.vi-bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); background: inherit; border-radius: 1px; }
.vi-bubble[hidden] { display: none; }
.vi-frame.is-inside .vi-people { visibility: hidden; }
.vi-follow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border: 0; border-radius: var(--r-pill); color: var(--text); font: 600 var(--fs-xs)/1.3 var(--font-body); cursor: pointer; }
.vi-follow[hidden] { display: none; }
.vi-follow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.3); animation: vi-breathe 1.6s ease-in-out infinite alternate; }
.vi-follow__name { letter-spacing: 0.01em; font-family: var(--font-varsity); font-weight: 400; }
.vi-follow__stop { color: var(--text-2); }
.vi-follow:hover .vi-follow__stop { color: var(--text); }
.vi-badge {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none;
  background: radial-gradient(circle at 50% 30%, var(--surface), var(--surface-3));
  border: 2px solid var(--gold); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.35), 0 4px 12px rgb(var(--shade) / calc(0.5 * var(--shade-k)));
}
.vi-badge .vc-portrait { display: block; width: 100%; height: 100%; }
.vi-badge--lg { width: 48px; height: 48px; }

/* ───── Le HUD ───── */
.vi-hud { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; pointer-events: none; }
.vi-hud__top, .vi-hud__bottom { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.vi-hud__bottom { align-items: flex-end; justify-content: flex-end; }
.vi-hud > * > * { pointer-events: auto; }
.vi-frame.is-inside .vi-hud, .vi-frame.is-inside .vi-spots { visibility: hidden; }
.vi-clock { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; max-width: 100%; }
.vi-clock__icon { display: inline-grid; place-items: center; color: var(--gold-bright); }
.vi-clock[data-phase='soir'] .vi-clock__icon { color: var(--warn); }
.vi-clock[data-phase='nuit'] .vi-clock__icon { color: var(--info); }
.vi-clock__lead, .vi-clock__text { white-space: nowrap; }
.vi-clock__text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (min-width: 1000px) { .vi-frame.has-sheet .vi-hud { padding-right: 408px; } }
.vi-clock__preview { display: inline-flex; gap: 2px; padding: 2px; margin-left: 4px; border-radius: var(--r-pill); background: rgba(var(--overlay), 0.06); }
.vi-clock__btn { padding: 3px 9px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2); font: 600 var(--fs-xs)/1.3 var(--font-body); letter-spacing: 0.01em; transition: background var(--t-fast), color var(--t-fast); }
.vi-clock__btn:hover { background: rgba(var(--overlay), 0.08); color: var(--text); }
.vi-clock__btn[aria-pressed='true'] { background: var(--wine); color: var(--cream); }
.vi-zoom { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill); flex: none; }
.vi-zoom__minus { font: 600 1.2rem/1 var(--font-display); }
.vi-notice { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; margin-right: auto; border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--text-2); max-width: min(100%, 420px); }
.vi-notice svg { color: var(--warn); flex: none; }
.vi-notice[hidden] { display: none; }

/* ───── La feuille : la fiche d'un bâtiment ───── */
.vi-sheet {
  --vl-accent: var(--gold);
  position: absolute; z-index: 8; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); background-color: var(--glass-bg-strong);
  top: 14px; right: 14px; bottom: 14px; width: 380px;
  transform: translateX(calc(100% + 28px)); opacity: 0;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-med);
}
.vi-sheet.is-open { transform: none; opacity: 1; }
.vi-sheet[hidden] { display: none; }
.vi-sheet::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); }
.vi-sheet__grip { display: none; }
.vi-sheet__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); }
.vi-sheet__heading { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vi-sheet__title { font: 600 var(--fs-lg)/1.15 var(--font-varsity); letter-spacing: -0.025em; outline: none; overflow-wrap: anywhere; }
.vi-sheet__sub { display: flex; flex-wrap: wrap; gap: 6px; }
.vi-sheet__sub:empty { display: none; }
.vi-sheet__body { flex: 1; min-height: 0; padding: 0 var(--s-5) var(--s-4); overflow-y: auto; scrollbar-width: thin; }
.vi-sheet__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); }
.vi-sheet__foot[hidden] { display: none; }
.vi-brief .vl-metrics { margin-top: var(--s-2); }
.vi-member { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(var(--overlay), 0.04); box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--vl-accent); }
.vi-member__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vi-member__name { font: 500 var(--fs-md)/1.2 var(--font-varsity); letter-spacing: 0.01em; }
.vi-member__line { font-size: var(--fs-sm); color: var(--text-2); }
.vi-member__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vi-team { display: flex; flex-direction: column; gap: 10px; }
.vi-team--row { flex-direction: row; flex-wrap: wrap; }
.vi-team__person { display: flex; align-items: center; gap: 10px; }
.vi-team__text { display: flex; flex-direction: column; line-height: 1.25; font-size: var(--fs-sm); }
.vi-team__role { color: var(--muted); font-size: var(--fs-xs); }
.vi-place { font-size: var(--fs-md); line-height: 1.5; color: var(--text); }

/* ───── Les cartes qu'on fait glisser ───── */
.vi-cards { display: flex; flex-direction: column; gap: 10px; margin: 0 calc(-1 * var(--s-5)); }
.vi-cards__track {
  display: flex; gap: 12px; padding: 4px var(--s-5) 8px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--s-5); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  outline-offset: -2px;
}
.vi-cards__track::-webkit-scrollbar { display: none; }
.vi-card {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4);
  border-radius: var(--r-lg); background: rgba(var(--overlay), 0.045);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 var(--vl-accent);
}
.vi-card__title { font: 500 var(--fs-md)/1.2 var(--font-varsity); letter-spacing: 0.01em; color: var(--text); }
.vi-card__body { gap: var(--s-3); }
.vi-card__body .vl-detail__section { display: contents; }
.vi-cards--single .vi-card { flex-basis: 100%; }
.vi-cards__nav { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 var(--s-5); }
.vi-cards__dots { display: flex; gap: 6px; }
.vi-cards__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--overlay), 0.22); transition: transform var(--t-fast), background var(--t-fast); }
.vi-cards__dot[aria-current='true'] { background: var(--gold-bright); transform: scale(1.3); }
.vi-cards__count { font-size: var(--fs-xs); color: var(--muted); min-width: 36px; text-align: center; }
.vi-cards__arrow { width: 30px; height: 30px; }
.vi-cards__arrow:disabled { opacity: 0.3; cursor: default; }
.vi-iconbtn:focus-visible { outline: 2px solid var(--gold-bright); }

/* ───── Mobile : toute la hauteur, la feuille monte du bas ───── */
@media (max-width: 999px) {
  .vi-sheet {
    top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 58%;
    border-radius: var(--r-xl);
    transform: translateY(calc(100% + 24px));
  }
  .vi-sheet__grip { display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: rgba(var(--overlay), 0.25); }
  .vi-sheet__head { padding: var(--s-3) var(--s-3) var(--s-2) var(--s-4); }
  .vi-sheet__body { padding: 0 var(--s-4) var(--s-3); }
  .vi-sheet__foot { padding: var(--s-2) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .vi-cards { margin: 0 calc(-1 * var(--s-4)); }
  .vi-cards__track { padding: 4px var(--s-4) 8px; scroll-padding: 0 var(--s-4); }
  .vi-card { flex-basis: 86%; }
  .vi-cards__arrow { display: none; }
  .vi-cards__nav { padding: 0 var(--s-4); }
}
@media (max-width: 860px) {
  .vi { gap: var(--s-3); min-height: 0; height: calc(100dvh - var(--s-5) - var(--tabbar-h) - var(--s-7)); }
  .vi-head { gap: var(--s-3); }
  .vi-head .page-title { font-size: var(--fs-2xl); }
  .vi-intro { flex-basis: 100%; max-width: none; padding: 9px 12px 10px; }
  .vi-intro__title { font-size: var(--fs-sm); margin-bottom: 3px; }
  .vi-intro__text { font-size: 12px; line-height: 1.4; }
  .vi-intro__hint { display: none; }
  /* Sur téléphone, des étiquettes plus fines : elles ne doivent jamais cacher le bâtiment qu'elles nomment. */
  .vi-lab { padding: 4px 9px 5px; border-radius: 12px; }
  .vi-spot__name { font-size: 10.5px; }
  .vi-spot__short { font-size: 9.5px; }
  .vi-frame.is-far .vi-lab { padding: 2px 7px 2px 6px; }
  .vi-spot__line { font-size: 10.5px; }
  .vi-head .page-title::after { margin-top: var(--s-2); }
  .vi-map { margin: 0 calc(-1 * var(--s-2)); }
  .vi-frame { min-height: 380px; border-radius: var(--r-lg); }
  .vi-hud { padding: 10px; }
  .vi-clock { padding: 6px 6px 6px 10px; font-size: var(--fs-xs); max-width: 100%; }
  .vi-clock__btn { padding: 3px 7px; }
  .vi-clock__lead { display: none; }
  .vi-iconbtn { width: 36px; height: 36px; }
  .vi-notice { font-size: 11px; }
  .vi-badge { width: 36px; height: 36px; }
  .vi-spot__line { max-width: 190px; }
}
@media (display-mode: standalone) and (max-width: 860px) {
  .vi { height: calc(100dvh - var(--s-5) - env(safe-area-inset-top) - var(--tabbar-h) - var(--s-7)); }
  .vi-sheet { bottom: max(10px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
}

/* ───── Mouvement ───── */
@keyframes vi-breathe { from { transform: scale(0.9); } to { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .vi-layer, .vi-layer__full, .vi-sheet, .vi-spot, .vi-lab, .vi-cards__dot { transition: none; }
  .vi-spot__dot, .vi-follow__dot { animation: none; }
  .vi-cards__track { scroll-behavior: auto; }
}
/* Vue d'ensemble : les bulles se taisent (elles se chevaucheraient), sauf celle du personnage qu'on suit. */
.vi-frame.is-far .vi-person:not(.is-followed) .vi-bubble { display: none; }

/* ───── La ville vivante (17/10/2026) ───── */
/* Le trafic : des voitures posées dans le monde, orientées par la route, grossies quand on dézoome. */
.vi-traffic { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* Pas de will-change ici : huit couches GPU de plus et le navigateur cesse de peindre les trois images de 3072 px. */
.vi-car { position: absolute; left: -17px; top: -9px; width: 34px; height: 18px; transform-origin: 50% 50%; }
.vi-car__body { position: absolute; inset: 0; border-radius: 5px 7px 7px 5px; background: var(--vi-c, #e8364f); box-shadow: 0 3px 4px rgb(0 0 0 / 0.35), inset 0 -3px 0 rgb(0 0 0 / 0.25); }
.vi-car__glass { position: absolute; left: 9px; top: 3px; width: 15px; height: 12px; border-radius: 4px; background: #c9e8ff; opacity: 0.85; }
.vi-car__lights { position: absolute; right: -1px; top: 3px; width: 3px; height: 12px; border-radius: 2px; background: #fff6c8; box-shadow: 0 0 6px 2px rgb(255 240 180 / 0.6); opacity: 0; transition: opacity 600ms; }
.vi-frame[data-phase='soir'] .vi-car__lights, .vi-frame[data-phase='nuit'] .vi-car__lights { opacity: 1; }
.vi-frame.is-inside .vi-traffic { visibility: hidden; }

/* Les bâtiments réagissent à leurs chiffres : une couronne en scaling, le sommeil en pause. */
.vi-spot[data-status='scaling']::before { content: ''; position: absolute; inset: -4%; border-radius: inherit; box-shadow: 0 0 calc(40px * var(--vi-inv)) calc(10px * var(--vi-inv)) rgba(var(--gold-rgb), 0.28); animation: vi-crown 3.2s ease-in-out infinite alternate; pointer-events: none; }
@keyframes vi-crown { from { opacity: 0.55; } to { opacity: 1; } }
.vi-spot[data-status='pause'] { background: rgb(10 12 30 / 0.22); }
.vi-spot[data-status='pause']::after { content: 'zzz'; position: absolute; right: 8%; top: 4%; font: 700 calc(26px * var(--vi-inv)) var(--font-body); color: #cfd8ff; opacity: 0.9; text-shadow: 0 2px 6px rgb(0 0 0 / 0.5); animation: vi-zzz 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes vi-zzz { 0% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-12%); opacity: 1; } 100% { transform: translateY(-24%); opacity: 0; } }
.vi-spot__level { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--vi-ink); color: var(--vi-paper); font: 700 10px var(--font-body); letter-spacing: 0.02em; vertical-align: 1px; }
.vi-spot__level[hidden] { display: none; }
.vi-spot__quest { display: inline-grid; place-items: center; margin-left: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--warn); color: #1a1200; font: 800 11px/1 var(--font-body); vertical-align: -2px; animation: vi-quest 1.4s ease-in-out infinite alternate; }
.vi-spot__quest.is-late { background: var(--danger); color: #fff; }
.vi-spot__quest[hidden] { display: none; }
@keyframes vi-quest { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.vi-frame.is-far .vi-spot__level, .vi-frame.is-far .vi-spot__quest { display: none; }

/* Le HUD du groupe : encaissé ce mois sur prévu (barre d'XP), MRR déclaré, clients. */
.vi-group { display: inline-flex; align-items: stretch; gap: 14px; padding: 7px 14px; border-radius: var(--r-lg); font-size: var(--fs-sm); max-width: 100%; }
.vi-group__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); }
.vi-group__cell:first-child { padding-left: 0; border-left: 0; }
.vi-group__cell--xp { min-width: 170px; }
.vi-group__label { font: 600 10px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.vi-group__value { font: 800 15px/1.1 var(--font-display); color: var(--text); white-space: nowrap; }
.vi-group__sub { font-size: 10.5px; color: var(--text-2); white-space: nowrap; }
.vi-group__bar { display: block; height: 5px; border-radius: 3px; background: rgb(var(--shade) / 0.14); overflow: hidden; }
.vi-group__fill { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width 900ms var(--ease-out); }
.vi-tournage-btn[hidden] { display: none; }
.vi-hud__top { flex-wrap: wrap; }
@media (max-width: 999px) { .vi-group { display: none; } }

/* Le mode tournage : rien que la ville. */
.vi-tournage { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; }
.vi-tournage[hidden] { display: none; }
.vi-tournage__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: vl-blink 1s ease-in-out infinite alternate; }
.vi-tournage__phases { display: inline-flex; gap: 2px; }
.vi-frame.is-tournage .vi-labels .vi-spot__line, .vi-frame.is-tournage .vi-spot__level, .vi-frame.is-tournage .vi-spot__quest, .vi-frame.is-tournage .vi-spot__badges,
.vi-frame.is-tournage .vi-clock, .vi-frame.is-tournage .vi-group, .vi-frame.is-tournage .vi-zoom, .vi-frame.is-tournage .vi-notice, .vi-frame.is-tournage .vi-follow, .vi-frame.is-tournage .vi-spot[data-status='scaling']::before { display: none; }
.vi-frame.is-tournage .vi-spot[data-status='pause']::after { display: none; }
.vi-frame.is-tournage.is-rolling .vi-tournage, .vi-frame.is-tournage.is-rolling .vi-labels { opacity: 0; transition: opacity 400ms; }
.vi.is-tournage .vi-head { display: none; }
.vi.is-tournage .vi-map { height: 100%; }
body.is-tournage .sidebar { display: none; }
body.is-tournage .shell { grid-template-columns: minmax(0, 1fr); }
body.is-tournage .shell__main { padding: 0; }
body.is-tournage .shell__inner { max-width: none; }
.vi.is-tournage { height: 100dvh; }
.vi.is-tournage .vi-frame { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .vi-spot[data-status='scaling']::before, .vi-spot[data-status='pause']::after, .vi-spot__quest, .vi-tournage__dot { animation: none; } }

/* La scène « Studio Atlas » : les titres par-dessus la ville. */
.vi-captions { position: absolute; inset: 0; z-index: 8; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 24px 11%; text-align: center; }
.vi-caption { display: flex; flex-direction: column; gap: 6px; max-width: 86%; color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / 0.55), 0 0 2px rgb(0 0 0 / 0.6); }
.vi-caption--center { position: absolute; top: 44%; left: 0; right: 0; }
.vi-caption__title { font: 800 clamp(26px, 5.2vw, 56px)/1.05 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.vi-caption__line { font: 600 clamp(13px, 2.1vw, 22px)/1.3 var(--font-body); color: #f3e6c8; letter-spacing: 0.02em; }
.vi-frame.is-scene .vi-tournage { opacity: 0; }
/* Dans la scène, un intérieur prend tout le cadre, sans panneau ni barre. */
.vi-frame.is-tournage .vl-interior { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: 0; gap: 0; }
.vi-frame.is-tournage .vl-interior__panel, .vi-frame.is-tournage .vl-crumbs, .vi-frame.is-tournage .vl-floors { display: none; }
.vi-frame.is-tournage .vl-interior__stage { place-items: center; }
.vi-frame.is-tournage .vl-room { width: 100%; height: auto; max-height: none; transform: scale(1.08); }
@media (orientation: portrait) { .vi-frame.is-tournage .vl-room { transform: scale(1.5); } }
.vi-frame.is-tournage .vl-interior { background: color-mix(in srgb, var(--bg) 70%, transparent); }