/* Variables et composants communs au site (index.html) et aux deux visites (visite360.html, visite.html) :
   carte blanche pleine, bouton rond, pilule des pièces avec lecture, repères du plan. */
:root {
  --ink: #25282d;
  --ink-2: #464a51;
  --muted: #646972;
  --faint: #6a6f78;
  --line: #e3e5e8;
  --line-2: #cdd1d6;
  --soft: #f4f5f6;
  --bg: #ffffff;
  --action: #14223a;
  --action-hover: #0a1526;
  --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gutter: clamp(20px, 4.4vw, 64px);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 20, 28, 0.07), 0 8px 28px rgba(16, 20, 28, 0.15);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Rubrique : petites capitales étroites, espacées */
.eyebrow {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  font-stretch: 75%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Composants de la visite (aussi dans la visite intégrée à l'annonce) ---------- */
/* Carte blanche pleine, sans flou */
.card-ui { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Bouton rond */
.round {
  width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; flex: none;
  border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow);
  cursor: pointer; text-decoration: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.round:hover { background: var(--soft); }
.round:active { transform: scale(0.96); }
.round[aria-expanded="true"] { background: var(--action); color: #fff; }
.round.sm { width: 34px; height: 34px; box-shadow: none; background: var(--soft); }
.round.sm:hover { background: #e9ebed; }
.round svg { display: block; }

/* Pilule des pièces : lecture, onglets icône + nom, vignettes */
.dock {
  position: relative; display: flex; align-items: center; gap: 6px; height: 60px; padding: 8px; width: max-content;
  background: #fff; border-radius: 999px; box-shadow: var(--shadow); font-family: var(--font);
}
.dock .sep { flex: none; width: 1px; height: 24px; background: var(--line); margin: 0 2px; }
.dock svg { display: block; }
.play {
  position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer; transition: background-color 0.3s var(--ease);
}
.play:hover { background: #e9ebed; }
.play .ic { position: relative; display: grid; place-items: center; }
.play .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.play .ring circle { fill: none; stroke-width: 2; }
.play .ring .trk { stroke: transparent; transition: stroke 0.3s; }
.play .ring .val { stroke: var(--action); stroke-linecap: round; stroke-dasharray: 125.7; stroke-dashoffset: 125.7; }
.play.playing .ring .trk { stroke: var(--line); }
.play.playing { background: #fff; }
.rooms {
  display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  padding: 0 14px; margin: 0 -8px;
}
.rooms::-webkit-scrollbar { display: none; }
.room {
  flex: none; display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font: 500 13px/1 var(--font); letter-spacing: 0.005em; white-space: nowrap; cursor: pointer;
  scroll-snap-align: center; transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.room:hover { color: var(--ink); background: var(--soft); }
.room.active { background: var(--action); color: #fff; }
.dock-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color 0.3s var(--ease); }
.dock-btn:hover, .dock-btn[aria-expanded="true"] { background: var(--soft); }
.dock-progress { position: absolute; left: 34px; right: 34px; bottom: 2px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.dock-progress b { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--action); border-radius: 2px; }
.dock.playing .dock-progress { opacity: 0.55; }
/* Pilule compacte : seule la pièce active garde son nom */
.dock.compact .room:not(.active) .rn { display: none; }
.dock.compact .room:not(.active) { padding: 0 13px; }

/* Mini-plan : carte blanche, en-tête avec le nom de la pièce */
.minimap { width: 200px; padding: 0 8px 8px; }
.mm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 2px 0 6px; }
.mm-room { min-width: 0; font: 500 13px/1.2 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-room small { display: block; margin-bottom: 1px; font-size: 10px; line-height: 1.3; font-weight: 500; font-stretch: 75%; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.mm-expand { width: 32px; height: 32px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer; transition: background-color 0.3s var(--ease); }
.mm-expand:hover { background: #e9ebed; }
.mm-body { border-radius: 9px; overflow: hidden; background: #fff; }
.mm-body.dark { background: #1d1f23; }

/* Plan avec repères des prises de vue, position et cône de vision */
.plan-host { position: relative; --cone: 78px; }
.plan-wrap { position: relative; }
.plan-wrap > svg, .plan-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-room { transition: fill 0.3s var(--ease); }
.pl-room.on { fill: rgba(20, 34, 58, 0.1); }
.plan-host.mini .pl-lbl, .plan-host.mini .pl-dim, .plan-host.mini .pl-north { display: none; }
.pm-layer { position: absolute; inset: 0; }
.pm {
  position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; padding: 0;
  border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; cursor: pointer; z-index: 1;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.dark .pm { border-color: #fff; background: rgba(255, 255, 255, 0.25); }
.pm::after { content: ""; position: absolute; inset: -9px; }
.pm:hover, .pm.hl { transform: scale(1.35); background: var(--action); }
.pm.on { opacity: 0; pointer-events: none; }
.pm span { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); padding: 4px 9px; border-radius: 8px; background: var(--action); color: #fff; font: 500 11.5px/1.2 var(--font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.pm:hover span, .pm:focus-visible span, .pm.hl span { opacity: 1; transform: translate(-50%, 0); }
.plan-host.mini .pm span { display: none; }
.pm.num { width: 20px; height: 20px; margin: -10px 0 0 -10px; display: grid; place-items: center; font: 500 10px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.pm.num.hl, .pm.num:hover { color: #fff; transform: scale(1.15); }
.pcur { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; transition: left 1.1s var(--ease), top 1.1s var(--ease); }
.pcone { position: absolute; left: calc(var(--cone) / -2); top: calc(var(--cone) / -2); width: var(--cone); height: var(--cone); transform: rotate(var(--yaw, 0deg)); }
.pcone svg { width: 100%; height: 100%; display: block; }
.pdot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px rgba(20, 34, 58, 0.25); }
.plan-host.big { --cone: 120px; }
.plan-host.big .pm:not(.num) { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.plan-host.big .pdot { left: -8px; top: -8px; width: 16px; height: 16px; }

/* Transition entre pages : fondu (API View Transitions, ignorée si non gérée) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.26s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.5s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.dark .pcone svg { filter: invert(1) brightness(1.6); }
/* Zone de toucher d'au moins 40 px autour des petits boutons */
.mm-expand { position: relative; }
.mm-expand::after { content: ""; position: absolute; inset: -6px; }