/* ==========================================================================
   MASTERPLAN INTERACTIF — 117 lots SVG, états, tooltip, panneau, filtres
   ========================================================================== */

.masterplan {
  position: relative;
  background: var(--c-bg-warm);
  border-radius: var(--r-xl);
  overflow: hidden;
  perspective: 1700px;          /* profondeur pour la « Vue 3D » */
}

/* Conteneur du SVG (zoom/pan géré par JS) */
.masterplan__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  touch-action: none;          /* on gère le pan/zoom nous-mêmes */
  cursor: grab;
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-expo);
}
.masterplan__stage.is-grabbing { cursor: grabbing; }

/* --- VUE 3D (perspective aérienne « maquette ») --------------------- */
.masterplan.is-3d .masterplan__stage {
  transform: rotateX(49deg) scale(.82) translateY(-3%);
}
/* Ombre portée douce sous la maquette inclinée */
.masterplan.is-3d::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 8%;
  height: 60px;
  background: radial-gradient(ellipse at center, rgba(26,26,26,.28), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .masterplan__stage { transition: none; }
}

/* Bascule Vue plan / Vue 3D */
.mp-viewtoggle {
  position: absolute;
  top: var(--sp-md); left: var(--sp-md);
  z-index: 5;
  display: flex; gap: 4px;
  padding: 5px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
}
.mp-viewtoggle button {
  border: 0; cursor: pointer;
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.mp-viewtoggle button.is-active {
  background: var(--c-ink);
  color: #fff;
}

.masterplan__svg { width: 100%; height: 100%; display: block; }
.masterplan__bg { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* --- Les lots (paths) ---------------------------------------------- */
.lot {
  cursor: pointer;
  stroke: var(--c-white);
  stroke-width: 1.2;
  stroke-linejoin: round;
  fill-opacity: .62;
  transition: fill-opacity var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
}
/* Couleurs par statut (data-status piloté côté serveur) */
.lot[data-status="disponible"] { fill: var(--c-status-available); }
.lot[data-status="option"]     { fill: var(--c-status-option); }
.lot[data-status="reserve"]    { fill: var(--c-status-reserved); }
.lot[data-status="vendu"]      { fill: var(--c-status-sold); cursor: not-allowed; }

/* Mise en avant « disponibilité d'un coup d'œil » :
   les lots disponibles ressortent en vert lumineux, les autres reculent. */
.lot[data-status="disponible"] {
  fill-opacity: .58;
  stroke: #fff;
  stroke-width: 1.6;
}
.lot[data-status="option"],
.lot[data-status="reserve"],
.lot[data-status="vendu"] {
  fill-opacity: .42;
}
/* Au survol, la parcelle s'affirme pour bien lire le statut */
.lot:hover, .lot.is-active { fill-opacity: .9 !important; }

/* --- ÉDITEUR DE LOTS (admin) --------------------------------------- */
.mp-editor[hidden] { display: none; }
.mp-editor { margin-top: 1rem; }

/* Bouton d'activation, en haut à droite du plan */
.mp-editbtn {
  position: absolute; top: var(--sp-md); right: calc(var(--sp-md) + 56px);
  z-index: 6;
  padding: .55rem 1rem; border: 0; border-radius: var(--r-pill);
  background: var(--c-ink); color: #fff; cursor: pointer;
  font-size: var(--fs-small); font-weight: 600; box-shadow: var(--sh-sm);
}
.mp-editbtn:hover { background: var(--c-gold-dark); }
.mp-editor__bar {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  padding: .7rem 1rem; background: var(--c-ink); color: #fff;
  border-radius: 8px; font-size: .85rem;
}
.mp-editor__bar strong { letter-spacing: .04em; }
.mp-editor__bar button {
  padding: .5rem .9rem; border: 1px solid rgba(255,255,255,.3);
  background: transparent; color: #fff; border-radius: 6px; cursor: pointer; font: inherit;
}
.mp-editor__bar .btn--gold { border-color: var(--c-gold); }
.mp-editor__help { opacity: .8; }
.mp-editor__status { margin-left: auto; opacity: .95; font-weight: 600; }

.is-editing .masterplan__stage { cursor: crosshair; }
.is-editing .lot,
.is-editing .lot-label { display: none; }   /* plan vierge en mode édition (cases + n° auto masqués) */
.mp-edit-rect { fill: rgba(192,102,72,.30); stroke: var(--c-gold); stroke-width: 1.5; cursor: pointer; vector-effect: non-scaling-stroke; }
.mp-edit-rect.is-sel { fill: rgba(32,48,51,.40); stroke: #203033; stroke-width: 2.5; }
.mp-edit-temp { fill: none; stroke: var(--c-gold); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.mp-edit-pt { fill: #fff; stroke: var(--c-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mp-edit-num { fill: #fff; font-size: 11px; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .lot[data-status="disponible"] { animation: lotAvail 3.2s var(--ease-inout) infinite; }
  @keyframes lotAvail {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(111,125,85,0)); }
    50%      { filter: drop-shadow(0 0 5px rgba(111,125,85,.65)); }
  }
}

.lot:hover,
.lot.is-active {
  fill-opacity: .9;
  filter: drop-shadow(0 6px 14px rgba(26,26,26,.35));
}

/* Lots masqués par les filtres : grisés et non cliquables */
.lot.is-filtered-out { fill: #c8c2b6 !important; fill-opacity: .25; pointer-events: none; }

/* Numéro de lot affiché au centre (texte SVG, optionnel) */
.lot-label { font-family: var(--font-body); font-size: 9px; fill: #fff; pointer-events: none; opacity: .85; }

/* --- TOOLTIP (survol) ----------------------------------------------- */
.mp-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  min-width: 200px;
  background: var(--c-ink);
  color: #fff;
  border-radius: var(--r-md);
  padding: var(--sp-sm);
  box-shadow: var(--sh-lg);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -110%) scale(.96);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.mp-tooltip.is-visible { opacity: 1; transform: translate(-50%, -120%) scale(1); }
.mp-tooltip__lot { font-size: var(--fs-caption); letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--c-gold); }
.mp-tooltip__row { display: flex; justify-content: space-between; gap: var(--sp-md); font-size: var(--fs-small); margin-top: 4px; }
.mp-tooltip__row span { color: #b9b3a8; }
.mp-tooltip__price { font-family: var(--font-display); font-size: var(--fs-h4); margin-top: 6px; }
.mp-tooltip__status { margin-top: var(--sp-2xs); }

/* --- LÉGENDE -------------------------------------------------------- */
.mp-legend { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.mp-legend__item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.mp-legend__dot { width: 14px; height: 14px; border-radius: 4px; }

/* --- BARRE D'OUTILS (zoom) ----------------------------------------- */
.mp-tools { position: absolute; right: var(--sp-md); bottom: var(--sp-md); display: flex; flex-direction: column; gap: 6px; }
.mp-tools button {
  width: 42px; height: 42px; border: 0; border-radius: var(--r-md);
  background: var(--c-white); box-shadow: var(--sh-sm); cursor: pointer;
  font-size: 1.2rem; display: grid; place-content: center;
  transition: background var(--dur-fast);
}
.mp-tools button:hover { background: var(--c-sand); }

/* --- PANNEAU FICHE LOT (clic) -------------------------------------- */
.mp-panel {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(460px, 92vw);
  background: var(--c-bg); z-index: var(--z-modal);
  box-shadow: var(--sh-lg);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-expo);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mp-panel.is-open { transform: translateX(0); }
.mp-panel__media { aspect-ratio: 4/3; background: var(--c-sand); position: relative; }
.mp-panel__media img { width:100%; height:100%; object-fit: cover; }
.mp-panel__close { position: absolute; top: var(--sp-sm); right: var(--sp-sm); width:40px; height:40px; border-radius:50%; border:0; background: rgba(255,255,255,.9); cursor:pointer; }
.mp-panel__body { padding: var(--sp-lg); display:flex; flex-direction:column; gap: var(--sp-md); }
.mp-panel__specs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.mp-panel__spec strong { display:block; font-family: var(--font-display); font-size: var(--fs-h4); }
.mp-panel__spec span { font-size: var(--fs-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-soft); }
.mp-panel__actions { display: grid; gap: var(--sp-2xs); margin-top: auto; }

.mp-backdrop { position: fixed; inset: 0; background: var(--c-overlay); z-index: calc(var(--z-modal) - 1); opacity: 0; visibility: hidden; transition: opacity var(--dur-base); }
.mp-backdrop.is-open { opacity: 1; visibility: visible; }

/* --- FILTRES (ÉTAPE 5) --------------------------------------------- */
.filters { display: flex; gap: var(--sp-md); flex-wrap: wrap; align-items: flex-end; }
.filters__group { display: flex; flex-direction: column; gap: 6px; }
.filters__group label { font-size: var(--fs-caption); letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--c-ink-soft); }
.filters select, .filters input[type="range"] { min-width: 170px; padding: .7rem 1rem; border:1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-white); }
.filters__count { margin-left: auto; font-family: var(--font-display); font-size: var(--fs-h4); }
.filters__count b { color: var(--c-gold-dark); }
.filters__reset { background:none; border:0; color: var(--c-ink-soft); text-decoration: underline; cursor:pointer; font-size: var(--fs-small); }

/* Grille de résultats (vue liste alternative au plan) */
.terrains-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: var(--sp-md); }
.terrains-grid.is-loading { opacity:.5; pointer-events:none; transition: opacity var(--dur-fast); }