/* =============================================================
   Maquette 360 Muato — interface inspirée de visionOS (Apple Vision Pro)
   Verre sombre, texte blanc, ornement de navigation flottant, sans framework.
   Icônes : Lucide (ISC). Police : système Apple (SF Pro), sinon Inter locale (OFL).
   ============================================================= */

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --police: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Verre sombre */
  --verre: rgba(28, 28, 30, 0.42);
  --verre-fort: rgba(28, 28, 30, 0.72);          /* sans flou (navigateurs non compatibles) */
  --flou: blur(24px) saturate(180%);
  --lisere: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --ombre: 0 6px 18px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);

  /* Texte et états */
  --texte: #ffffff;
  --texte-2: rgba(255, 255, 255, 0.62);
  --survol: rgba(255, 255, 255, 0.12);
  --actif: rgba(255, 255, 255, 0.28);

  /* Formes et mouvement */
  --rayon-panneau: 32px;
  --rayon-bouton: 999px;
  --marge: 20px;

  /* Fenêtre du projet (réf. fenêtre visionOS) et environnement autour */
  --marge-fenetre: clamp(16px, 4vw, 64px);
  --rayon-fenetre: 0px;   /* bord extérieur de la maquette : coins droits */
  --ombre-fenetre: 0 40px 120px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.3);

  /* Taille de la fenêtre : format des images de la maquette (2560x1440 = 16:9),
     la plus grande possible dans l'écran moins les marges */
  --ratio-l: 16;
  --ratio-h: 9;
  --largeur-fenetre: min(calc(100vw - 2 * var(--marge-fenetre)), calc((100vh - 2 * var(--marge-fenetre)) * var(--ratio-l) / var(--ratio-h)));
  --hauteur-fenetre: min(calc(100vh - 2 * var(--marge-fenetre)), calc((100vw - 2 * var(--marge-fenetre)) * var(--ratio-h) / var(--ratio-l)));
  /* Position du bord de la fenêtre (fenêtre centrée) */
  --bord-gauche: calc((100vw - var(--largeur-fenetre)) / 2);
  --bord-haut: calc((100vh - var(--hauteur-fenetre)) / 2);

  /* Largeur du panneau de navigation (utilisée aussi par la mini barre et les fenêtres) */
  --largeur-nav: 200px;

  /* Bordure lumineuse visionOS (fenêtres d'images, infobulles) : épaisseur max */
  --arete: 3px;
  --ressort: cubic-bezier(0.34, 1.4, 0.64, 1);

  interpolate-size: allow-keywords;
}

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

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  font-family: var(--police);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.icone { width: 18px; height: 18px; flex: none; }

/* ---------- Mise en page ---------- */
.app { position: relative; width: 100%; height: 100%; }

/* Cadre extérieur : filet fin sur les quatre bords de la fenêtre du navigateur,
   posé au-dessus de tout et non cliquable */
.app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  border: 1px solid rgba(28, 27, 25, 0.15);
  pointer-events: none;
}

/* Bordure de la fenêtre 3D, au-dessus des barres latérales */
.app::after {
  content: '';
  position: absolute;
  top: var(--bord-haut);
  left: var(--bord-gauche);
  width: var(--largeur-fenetre);
  height: var(--hauteur-fenetre);
  z-index: 101;
  border: 1px solid rgba(28, 27, 25, 0.15);
  pointer-events: none;
}

/* En plein écran : la scène occupe tout l'écran, plus de marge, plus de cadre.
   Le fond passe en blanc, sinon le navigateur peint en noir ce qui dépasse. */
.app:fullscreen,
.app:-webkit-full-screen {
  background: #ffffff;
  --marge-fenetre: 0px;
  --largeur-fenetre: 100vw;
  --hauteur-fenetre: 100vh;
  --bord-gauche: 0px;
  --bord-haut: 0px;
}
.app:fullscreen::before,
.app:-webkit-full-screen::before { display: none; }
.app:fullscreen::backdrop,
.app:-webkit-full-screen::backdrop { background: #ffffff; }

/* Scène 3D : fenêtre aux coins arrondis au format des images, centrée, fixe ;
   ce qui dépasse au zoom est coupé */
.scene {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--largeur-fenetre);
  height: var(--hauteur-fenetre);
  overflow: hidden;
  border-radius: var(--rayon-fenetre);
  background: #ffffff;
  isolation: isolate;          /* garantit la découpe du lecteur, zoom compris */
}
/* Bordure de la fenêtre 3D : dessinée en surcouche (voir .app::after),
   pour passer au-dessus des barres latérales */
.scene .wr360_player { width: 100%; height: 100%; background: #ffffff; }

/* ---------- Ornement de navigation ---------- */
.ornement {
  /* Panneau latéral de la fenêtre, toute la hauteur (réf. visionOS) */
  position: absolute;
  top: var(--bord-haut);
  left: var(--bord-gauche);
  z-index: 10;
  width: var(--largeur-nav);
  height: var(--hauteur-fenetre);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 12px 16px;
  border-radius: var(--rayon-fenetre) 0 0 var(--rayon-fenetre);   /* suit les coins gauches de la fenêtre */
  /* Verre poli blanc, texte noir : couleurs redéfinies ici pour tout le contenu de la barre */
  --texte: #1c1b19;
  --texte-2: rgba(28, 27, 25, 0.55);
  --survol: rgba(28, 27, 25, 0.08);
  --actif: rgba(28, 27, 25, 0.14);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(5px) saturate(160%);
  backdrop-filter: blur(5px) saturate(160%);
  box-shadow: inset -1px 0 0 rgba(28, 27, 25, 0.12);              /* séparation fine avec la 3D */
  color: var(--texte);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ornement::-webkit-scrollbar { display: none; }
.ornement.est-pret { opacity: 1; }   /* apparaît quand la 3D est prête */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ornement, .chargement, .fermer-plein-ecran { background: var(--verre-fort); }
}

/* Logo clair à l'origine : passé en noir pour le verre blanc */
/* Logo en haut, le reste de la barre poussé vers le bas */
.ornement-logo { display: block; width: 100%; height: auto; margin: 0 auto auto; }

/* Groupes repliables (details / summary natifs) */
.groupe summary { list-style: none; }
.groupe summary::-webkit-details-marker { display: none; }

.groupe-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  color: var(--texte);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.groupe-titre span { flex: 1; }

.chevron { width: 16px; height: 16px; transition: transform 0.3s ease; }
.groupe[open] .chevron { transform: rotate(180deg); }

/* Ouverture / fermeture animée (Chrome, Edge ; instantanée ailleurs) */
.groupe::details-content {
  height: 0;
  opacity: 0;
  overflow: clip;
  transition: height 0.3s ease, opacity 0.3s ease, content-visibility 0.3s allow-discrete;
}
.groupe[open]::details-content { height: auto; opacity: 1; }

.groupe-contenu { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 10px; }
.groupe-pilules { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 4px 6px 12px; }

/* Choix : étages et outils (un seul sélectionné à la fois) */
.choix {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--rayon-bouton);
  background: transparent;
  color: var(--texte);
  font-size: 15px;
  font-weight: 300;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s var(--ressort);
}
.choix:hover { background: var(--survol); }
.choix:active { transform: scale(0.97); }
.choix[aria-pressed="true"] {
  background: var(--actif);
  font-weight: 400;
}

/* Pilules de filtre par typologie (pastille = couleur des infobulles du type) */
.pilule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 10px;
  border: 0;
  border-radius: var(--rayon-bouton);
  background: rgba(28, 27, 25, 0.06);
  color: var(--texte);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease, transform 0.25s var(--ressort);
}
.pilule:hover { background: rgba(28, 27, 25, 0.13); }
.pilule:active { transform: scale(0.95); }
.pilule[aria-pressed="false"] { opacity: 0.45; }

.pastille {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--couleur, #ffffff);
  box-shadow: 0 0 0 2px rgba(28, 27, 25, 0.1);
}
/* Surface : réglette à deux poignées (min et max) */
.surface { padding: 4px 8px 14px; }
.surface-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte);
  white-space: nowrap;   /* « 102 – 164 m² » sur une seule ligne */
}
.surface-valeurs { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texte-2); }

.surface-reglette { position: relative; height: 26px; }
.surface-piste,
.surface-plage {
  position: absolute;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 999px;
  pointer-events: none;
}
.surface-piste { left: 0; right: 0; background: rgba(28, 27, 25, 0.12); }
.surface-plage { background: rgba(28, 27, 25, 0.45); }

.surface-reglette input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Poignées façon Apple : pastille blanche, ombre douce, léger grossissement au clic */
/* poignées : flèche du système, pas de main d'attrape */
.surface-reglette input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.surface-reglette input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.surface-reglette input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  cursor: grabbing;
}
.surface-reglette input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  cursor: grabbing;
}
.surface-reglette input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid rgba(28, 27, 25, 0.7); outline-offset: 2px; }

.pilule[aria-pressed="false"] .pastille {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(28, 27, 25, 0.35);
}

.groupe-titre:focus-visible,
.choix:focus-visible,
.pilule:focus-visible {
  outline: 2px solid rgba(28, 27, 25, 0.7);
  outline-offset: 2px;
}
.fermer-plein-ecran:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  :root { --largeur-nav: 160px; }
  .choix { padding: 8px 12px; font-size: 14px; }
}

/* ---------- TEST RDC : barre du lot, à droite ---------- */
.ornement-droite {
  left: auto;
  right: var(--bord-gauche);
  width: var(--largeur-nav);   /* même largeur que la barre de gauche */
  border-radius: 0 var(--rayon-fenetre) var(--rayon-fenetre) 0;
  box-shadow: inset 1px 0 0 rgba(28, 27, 25, 0.12);
  opacity: 1;
}

/* Croix de fermeture */
/* Lot, type et surface */
.panneau-infos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 4px 0;
}
.panneau-lot-nom { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.panneau-lot-type { font-size: 15px; }
.panneau-lot-surface { font-size: 13px; color: var(--texte-2); }

/* Bouton Ouvrir */
.panneau-ouvrir {
  margin: 16px 4px 0;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--rayon-bouton);
  background: var(--actif);
  color: var(--texte);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s var(--ressort);
}
.panneau-ouvrir:hover { background: rgba(28, 27, 25, 0.2); }
.panneau-ouvrir:active { transform: scale(0.97); }
.panneau-ouvrir:focus-visible { outline: 2px solid rgba(28, 27, 25, 0.7); outline-offset: 2px; }

/* Plan de vente : reste dans la fenêtre de la maquette, du bord gauche
   jusqu'à la barre de droite (qu'il ne recouvre pas) */
.pdf-plein {
  position: absolute;
  top: var(--bord-haut);
  /* à droite de la navigation, et jusqu'au bord droit de la 3D :
     il n'y a plus de barre à droite */
  left: calc(var(--bord-gauche) + var(--largeur-nav));
  right: var(--bord-gauche);
  height: var(--hauteur-fenetre);
  z-index: 90;
  background: #ffffff;
  overflow: hidden;
}
.pdf-plein img {
  position: absolute;
  top: 56px;                      /* sous la barre du haut */
  left: 0;
  width: 100%;
  height: calc(100% - 56px);
  object-fit: contain;
}

/* Barre du haut du plan : croix, Plan 2D, Plan 3D */
.plan-barre {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 14px;
}
.plan-barre .panneau-fermer { position: static; margin-right: 6px; }

.plan-onglet {
  padding: 8px 14px;
  border: 0;
  border-radius: var(--rayon-bouton);
  background: rgba(28, 27, 25, 0.06);
  color: #1c1b19;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s var(--ressort);
}
.plan-onglet:hover:not(:disabled) { background: rgba(28, 27, 25, 0.13); }
.plan-onglet:active:not(:disabled) { transform: scale(0.97); }
.plan-onglet.is-actif { background: rgba(28, 27, 25, 0.18); }
.plan-onglet:disabled { opacity: 0.35; cursor: default; }
.plan-onglet:focus-visible { outline: 2px solid rgba(28, 27, 25, 0.7); outline-offset: 2px; }

/* Barre de droite opaque tant que le plan est ouvert */
.ornement-droite.est-opaque {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ornement-droite { transition: background 0.3s ease; }

/* Croix noire sur le plan (fond blanc) */
.pdf-plein .panneau-fermer { color: #1c1b19; }

/* Ouverture : monte depuis le bas en fondu */
.pdf-plein.est-ouverture { animation: plan-entree 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes plan-entree {
  from { opacity: 0; transform: translateY(100%); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fermeture : repart vers le bas en fondu */
.pdf-plein.est-fermeture { animation: plan-sortie 0.4s cubic-bezier(0.55, 0, 0.55, 0.2) both; }
@keyframes plan-sortie {
  from { opacity: 1; transform: translateY(0); }
  40%  { opacity: 1; }
  to   { opacity: 0; transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-plein.est-ouverture { animation: none; }
  .pdf-plein.est-fermeture { animation-duration: 0.01s; }
}

/* Croix simple, comme celle du lecteur d'origine : juste l'icône, sans fond ni ombre */
.panneau-fermer {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texte);
  opacity: 0.7;
  cursor: pointer;
}
.panneau-fermer:hover { opacity: 1; }
.panneau-fermer .icone { width: 22px; height: 22px; stroke-width: 1.5; }

/* Ouverture : glisse depuis la droite, dépasse et revient (effet gelée) */
.ornement-droite.est-ouverture {
  animation: panneau-entree 0.6s cubic-bezier(0.34, 1.5, 0.64, 1) both;
  animation-timing-function: linear(0, 0.063 3.1%, 0.25 6.6%, 0.557 11.2%, 0.886 16.9%, 1.026 20.7%, 1.069 23.6%, 1.08 26.4%, 1.068 29.6%, 1.034 34%, 0.994 40.4%, 0.985 44.7%, 0.987 51.4%, 1.002 64.2%, 1);
}
@keyframes panneau-entree {
  from { opacity: 0; transform: translateX(100%) scaleX(1.04); }
  to { opacity: 1; transform: translateX(0) scaleX(1); }
}

/* Fermeture : repart vers la droite */
.ornement-droite.est-fermeture {
  animation: panneau-sortie 0.26s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes panneau-sortie {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  /* ouverture sans mouvement ; la fermeture garde une animation très courte,
     sinon la barre ne se cacherait jamais (c'est sa fin qui déclenche le masquage) */
  .ornement-droite.est-ouverture { animation: none; }
  .ornement-droite.est-fermeture { animation-duration: 0.01s; }
}


/* ---------- Exposition : horloge et tirette, en haut à gauche de la 3D ---------- */
.expo {
  position: absolute;
  top: calc(var(--bord-haut) + 20px);
  left: calc(var(--bord-gauche) + var(--largeur-nav) + 20px);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 16px;
  border-radius: var(--rayon-bouton);
  background: var(--verre);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  box-shadow: var(--lisere), var(--ombre);
  color: var(--texte);
}

.expo-heure {
  min-width: 52px;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.expo-reglette { position: relative; width: 190px; height: 26px; }
.expo-piste,
.expo-plage {
  position: absolute;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 999px;
  pointer-events: none;
}
.expo-piste { left: 0; right: 0; background: rgba(255, 255, 255, 0.25); }
.expo-plage { left: 0; background: rgba(255, 255, 255, 0.75); }

.expo-reglette input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}
.expo-reglette input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: grab;
  transition: transform 0.15s ease;
}
.expo-reglette input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: grab;
}
.expo-reglette input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); cursor: grabbing; }

/* ---------- Chargement ---------- */
.chargement {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--verre);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  box-shadow: var(--lisere), var(--ombre);
  color: var(--texte);
}
.chargement svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); transform: rotate(-90deg); }
.chargement-fond { stroke: rgba(255, 255, 255, 0.18); }
.chargement-barre { stroke: #ffffff; stroke-linecap: round; transition: stroke-dashoffset 0.3s linear; }
.chargement-texte { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Quitter le plein écran ---------- */
.fermer-plein-ecran {
  position: absolute;
  top: calc(var(--bord-haut) + var(--marge));       /* dans la fenêtre */
  right: calc(var(--bord-gauche) + var(--marge));
  z-index: 20;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--verre);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  box-shadow: var(--lisere), var(--ombre);
  color: var(--texte);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s var(--ressort);
}
.fermer-plein-ecran:hover { background: var(--verre-fort); }
.fermer-plein-ecran:active { transform: scale(0.94); }

/* ---------- Infobulles au survol des punaises : même verre que le reste ---------- */
.spot_indicator_custom {
  --finesse: 2;                /* bordure deux fois plus fine que sur les fenêtres d'images */
  position: absolute;
  left: 44px;
  top: 50%;
  display: none;
  width: max-content;
  max-width: 240px;
  padding: 10px 14px 11px;
  border-radius: 18px;
  background: var(--verre);    /* remplacé par la couleur de la typologie (posée en JS) */
  -webkit-backdrop-filter: blur(6px) saturate(140%);   /* flou léger */
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: var(--ombre);   /* bordure : même code que les fenêtres d'images (::before / ::after) */
  color: var(--texte);
  font-family: var(--police);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(1);
  transform-origin: left center;
}

/* Apparition : la bulle se déploie depuis la punaise en s'étirant, puis se remet d'aplomb.
   La déformation n'est pas uniforme : la largeur dépasse quand la hauteur se tasse, et inversement. */
.spot_indicator_custom.est-visible { animation: bulle-entree 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
@keyframes bulle-entree {
  0%   { opacity: 0; transform: translateY(-50%) translateX(-6px) scale(0.8, 0.8); }
  55%  { opacity: 1; transform: translateY(-50%) translateX(0)    scale(1.04, 0.98); }
  75%  {              transform: translateY(-50%) translateX(0)    scale(0.99, 1.02); }
  100% { opacity: 1; transform: translateY(-50%) translateX(0)    scale(1, 1); }
}

/* Disparition : courte, elle se rétracte vers la punaise en s'aplatissant */
.spot_indicator_custom:not(.est-visible) { animation: bulle-sortie 0.16s ease-in both; }
@keyframes bulle-sortie {
  from { opacity: 1; transform: translateY(-50%) translateX(0) scale(1, 1); }
  to   { opacity: 0; transform: translateY(-50%) translateX(-4px) scale(0.9, 0.9); }
}

.hspot_type {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hspot_lot,
.hspot_surface,
.hspot_niveaux { color: var(--texte-2); }
.hspot_lot { margin-top: 2px; }
.hspot_niveaux { margin-top: 2px; }
.hspot_surface_nb { color: var(--texte); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .spot_indicator_custom { transition: none; }
}

/* ---------- Disponibilité des lots ----------
   La classe est posée par vision/statuts.js, d'après le fichier statuts.json
   qu'écrit OrbitalHub. Sans ce fichier, aucune de ces règles ne s'applique et
   les punaises restent telles qu'elles sont aujourd'hui.

   La pastille est un ::after sur la punaise elle-même, en haut à droite de
   l'icône. Le liseré blanc la détache aussi bien d'un ciel clair que d'une
   façade sombre, sans avoir à connaître le rendu derrière. */
[data-statut]::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92),
              0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;   /* ne vole pas le clic destiné à la punaise */
  z-index: 3;
}

[data-statut="disponible"]::after { background: #1fa463; }
[data-statut="reserve"]::after    { background: #e0a21a; }
[data-statut="vendu"]::after      { background: #d0453a; }

/* Un lot vendu ou réservé se repère aussi dans son infobulle, où la mention
   se pose à côté de la typologie. */
[data-statut="reserve"] .hspot_type::after,
[data-statut="vendu"] .hspot_type::after {
  content: attr(data-mention);
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  vertical-align: middle;
}
[data-statut="reserve"] .hspot_type::after {
  content: 'Réservé';
  background: rgba(224, 162, 26, 0.22);
  color: #f2c25c;
}
[data-statut="vendu"] .hspot_type::after {
  content: 'Vendu';
  background: rgba(208, 69, 58, 0.22);
  color: #f08b82;
}


/* ---------- Fenêtre des punaises (images et plans de lots) ----------
   Style visionOS : fenêtre de verre sombre, texte blanc, boutons en verre sans bordure.
   Elle s'ouvre dans la zone de la 3D, sans recouvrir la navigation. */
.popup-image {
  position: absolute;
  top: var(--bord-haut);
  left: calc(var(--bord-gauche) + var(--largeur-nav));
  width: calc(var(--largeur-fenetre) - var(--largeur-nav));
  height: var(--hauteur-fenetre);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 var(--rayon-fenetre) var(--rayon-fenetre) 0;   /* suit les coins droits de la fenêtre */
  background: rgba(255, 255, 255, 0.45);   /* voile blanc à opacité réduite, sans flou */
}

/* La fenêtre = l'image seule ; les boutons flottent dessus */
.popup-image-carte {
  --bordure-popup: 0px;                      /* pas de bande autour de l'image */
  position: relative;
  border-radius: calc(22px + var(--bordure-popup));
  box-shadow: var(--ombre);
  color: var(--texte);
  font-family: var(--police);
}

/* Carte cachée tant que l'image n'est pas chargée : elle apparaît directement au bon format */
.popup-image-carte.est-en-attente { visibility: hidden; }

/* Voile : fondu doux à l'ouverture */
.popup-image { animation: popup-voile 0.25s ease-out both; }
@keyframes popup-voile { from { opacity: 0; } }

/* Ouverture effet gelée : un seul mouvement d'échelle piloté par une courbe de ressort
   (léger dépassement puis retour), fondu séparé et plus court. Seuls transform et opacity
   sont animés, sur une couche GPU dédiée, pour rester fluide. */
.popup-image-carte { will-change: transform, opacity; }
.popup-image-carte.est-ouverte {
  /* repli pour navigateurs sans linear() */
  animation: popup-fondu 0.2s ease-out both, popup-ressort 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) both;
  /* ressort (Chrome, Edge, Firefox, Safari récents) */
  animation: popup-fondu 0.2s ease-out both, popup-ressort 0.7s linear(0, 0.063 3.1%, 0.25 6.6%, 0.557 11.2%, 0.886 16.9%, 1.026 20.7%, 1.069 23.6%, 1.08 26.4%, 1.068 29.6%, 1.034 34%, 0.994 40.4%, 0.985 44.7%, 0.987 51.4%, 1.002 64.2%, 1) both;
}
@keyframes popup-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes popup-ressort { from { transform: scale(0.86); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .popup-image, .popup-image-carte.est-ouverte { animation: none; }
}

/* Bordure style visionOS, commune aux fenêtres d'images et aux infobulles, posée sur le bord
   (aucune bande) : blanche et transparente, plus lumineuse en haut à gauche et en bas à droite (reflet) */
.popup-image-carte::before,
.spot_indicator_custom::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: calc(var(--arete) / var(--finesse, 1));   /* --finesse : 2 = bordure deux fois plus fine */
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.45) 20%,
    rgba(255, 255, 255, 0.12) 48%,
    rgba(255, 255, 255, 0.22) 75%,
    rgba(255, 255, 255, 0.7) 100%);
  /* ne garde que l'anneau de la bordure */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Arête lumineuse d'épaisseur variable : plus marquée en haut à gauche, fine en bas à droite */
.popup-image-carte::after,
.spot_indicator_custom::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow:
    inset calc(1.5px / var(--finesse, 1)) calc(1.5px / var(--finesse, 1)) 0 rgba(255, 255, 255, 0.8),
    inset calc(-1px / var(--finesse, 1)) calc(-1px / var(--finesse, 1)) 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 calc(1px / var(--finesse, 1)) rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

/* Boutons du haut, posés sur l'image */
.popup-image-entete {
  position: absolute;
  top: calc(var(--bordure-popup) + 12px);
  right: calc(var(--bordure-popup) + 12px);
  z-index: 4;
}
/* Titre et surface : lus par les lecteurs d'écran, pas affichés */
.popup-image-titres {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.popup-image-actions { display: flex; align-items: center; gap: 8px; }

/* Niveaux : sélecteur segmenté en verre */
.popup-image-niveaux:not(:empty) {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--rayon-bouton);
  background: var(--verre);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  box-shadow: var(--lisere);
}
.popup-image-niveau {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--rayon-bouton);
  background: transparent;
  color: var(--texte);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
.popup-image-niveau:hover:not(:disabled) { background: var(--survol); }
.popup-image-niveau.is-actif { background: var(--actif); font-weight: 600; cursor: default; }

/* Boutons ronds en verre : fermer, flèches */
.popup-image-fermer,
.popup-image-fleche {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texte);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s var(--ressort);
}
.popup-image-fermer {
  background: var(--verre);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  box-shadow: var(--lisere);
}
.popup-image-fermer:hover { background: var(--verre-fort); }
.popup-image-fermer:active,
.popup-image-fleche:active { transform: scale(0.94); }

.popup-image-fermer:focus-visible,
.popup-image-niveau:focus-visible,
.popup-image-fleche:focus-visible,
.popup-image-point:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

/* Image : coins très arrondis, liseré clair type Apple, taille réduite par rapport à la zone de la 3D */
.popup-image-cadre {
  position: relative;
  overflow: hidden;
  box-sizing: content-box;                   /* la bordure s'ajoute autour de l'image, sans la rogner */
  border: 0;
  border-radius: calc(22px + var(--bordure-popup));
  aspect-ratio: var(--ratio, 1);
  width: min(
    calc((var(--largeur-fenetre) - var(--largeur-nav)) * 0.7),
    calc(var(--hauteur-fenetre) * 0.78 * var(--ratio, 1))
  );
}
.popup-image-cadre img { position: absolute; max-width: none; height: auto; }

/* Perspectives (punaises « Images ») : hauteur fixe selon l'orientation de l'image,
   largeur au format de l'image, réduite seulement si elle dépasse la zone de la 3D */
.popup-image-carte.est-paysage { --part-hauteur: 0.75; }
.popup-image-carte.est-portrait { --part-hauteur: 0.86; }
.popup-image-carte.est-photo .popup-image-cadre {
  width: min(
    calc((var(--largeur-fenetre) - var(--largeur-nav)) * 0.9),
    calc(var(--hauteur-fenetre) * var(--part-hauteur) * var(--ratio, 1))
  );
}

.popup-image-fleche {
  position: absolute;
  top: 50%;
  z-index: 1;
  translate: 0 -50%;
  background: var(--verre);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  box-shadow: var(--lisere);
}
.popup-image-fleche:hover { background: var(--verre-fort); }
.popup-image-fleche-gauche { left: 10px; }
.popup-image-fleche-droite { right: 10px; }

/* Points et lien, posés en bas de l'image */
.popup-image-pied {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--bordure-popup) + 12px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.popup-image-points:not(:empty),
.popup-image-lien:not([hidden]) {
  pointer-events: auto;
  border-radius: var(--rayon-bouton);
  background: var(--verre);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  box-shadow: var(--lisere);
}
.popup-image-points { display: flex; gap: 6px; }
.popup-image-points:not(:empty) { padding: 8px 10px; }
.popup-image-lien { padding: 6px 12px; }
.popup-image-point {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.popup-image-point.is-actif { opacity: 1; }
.popup-image-lien { font-size: 13px; font-weight: 600; color: var(--texte); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Curseur sur la 3D : main d'attrape ----------
   WebRotate impose « cursor:pointer » sur son conteneur et ses images. La vue
   se fait tourner par glissement, pas par clic : on met la main ouverte, qui
   se ferme pendant la rotation. Les curseurs de zoom (loupe) sont conservés. */
.scene .wr360_player,
.scene .wr360_player .container,
.scene .wr360_player .container > img {
  cursor: grab !important;
}
.scene .wr360_player .container:active,
.scene .wr360_player .container:active > img {
  cursor: grabbing !important;
}

/* ---------- Mini barre du bas : zoom et plein écran ----------
   Ce sont les boutons natifs de WebRotate (fonctionnement d'origine conservé),
   rhabillés en capsule de verre avec des icônes Lucide (masques SVG). */
.scene .wr360_player .container .theme_panel_back { display: none !important; }

.scene .wr360_player .container .theme_panel {
  left: var(--largeur-nav) !important;      /* centrée sur la 3D, à droite de la navigation */
  width: calc(100% - var(--largeur-nav)) !important;
  bottom: 20px !important;
  height: auto !important;
  background: none !important;
  cursor: default !important;
  pointer-events: none;
}

.scene .wr360_player .container .theme_panel .toolbar {
  display: flex !important;
  gap: 4px;
  width: max-content !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 6px !important;
  border-radius: var(--rayon-bouton);
  background: var(--verre) !important;
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  box-shadow: var(--lisere), var(--ombre);
  pointer-events: auto;
}

.scene .wr360_player .container .theme_panel .toolbar > a {
  position: relative;
  float: none !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 50%;
  background: transparent none !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.25s var(--ressort) !important;
}
.scene .wr360_player .container .theme_panel .toolbar > a:hover { background-color: var(--survol) !important; }
.scene .wr360_player .container .theme_panel .toolbar > a:active { transform: scale(0.94); }

/* Icône blanche dessinée par un masque SVG */
.scene .wr360_player .container .theme_panel .toolbar > a::before {
  content: '';
  position: absolute;
  inset: 11px;
  background-color: #ffffff;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}

/* Lucide zoom-in */
.scene .wr360_player .container .theme_panel .toolbar a.zoomin_button {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' x2='16.65' y1='21' y2='16.65'/%3E%3Cline x1='11' x2='11' y1='8' y2='14'/%3E%3Cline x1='8' x2='14' y1='11' y2='11'/%3E%3C/svg%3E");
}
/* Lucide zoom-out */
.scene .wr360_player .container .theme_panel .toolbar a.zoomout_button {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' x2='16.65' y1='21' y2='16.65'/%3E%3Cline x1='8' x2='14' y1='11' y2='11'/%3E%3C/svg%3E");
}
/* Lucide maximize */
.scene .wr360_player .container .theme_panel .toolbar a.fullscreenon_button {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
}

/* Flèches haut / bas : masquées, le changement de rangée se fait par la navigation */
.scene .wr360_player .container .theme_panel .toolbar a.up_button,
.scene .wr360_player .container .theme_panel .toolbar a.down_button { display: none !important; }

/* Lucide chevron-left */
.scene .wr360_player .container .theme_panel .toolbar a.left_button {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
/* Lucide chevron-right */
.scene .wr360_player .container .theme_panel .toolbar a.right_button {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
/* Lucide play */
.scene .wr360_player .container .theme_panel .toolbar a.play_button {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/svg%3E");
}
/* Lucide pause */
.scene .wr360_player .container .theme_panel .toolbar a.pause_button {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='3' width='5' height='18' rx='1'/%3E%3Crect x='5' y='3' width='5' height='18' rx='1'/%3E%3C/svg%3E");
}
/* Lucide map-pin */
.scene .wr360_player .container .theme_panel .toolbar a.hotspotson_button {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* Lucide map-pin-off */
.scene .wr360_player .container .theme_panel .toolbar a.hotspotsoff_button {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.75 7.09a3 3 0 0 1 2.16 2.16'/%3E%3Cpath d='M17.072 17.072c-1.634 2.17-3.527 3.912-4.471 4.727a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 1.432-4.568'/%3E%3Cpath d='m2 2 20 20'/%3E%3Cpath d='M8.475 2.818A8 8 0 0 1 20 10c0 1.183-.31 2.377-.81 3.533'/%3E%3Cpath d='M9.13 9.13a3 3 0 0 0 3.74 3.74'/%3E%3C/svg%3E");
}

/* Zoom indisponible (état géré par WebRotate) */
.scene .wr360_player .container_zoomoff .theme_panel .toolbar a.zoomin_button { opacity: 0.4 !important; cursor: default; }