/* Maquette 3D d'Adhika Park Ballainvilliers, sur la page à l'ancien design (projet-ballainvilliers.html).
   Toutes les tailles sont en pixels : sur cette page, 1rem vaut 10 pixels (font-size de 62,5 % sur la racine).
   Les règles sont préfixées par .m3d pour ne rien changer au reste de la page. */
.m3d { margin: 0 auto 48px; width: 100%; max-width: 1060px; font-family: Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.4; color: #181851; flex-shrink: 0; }
.m3d *, .m3d *::before, .m3d *::after { box-sizing: border-box; }
.m3d .m3d-cadre { position: relative; border: 1px solid #D9DEE6; background: linear-gradient(#F6F7F9, #E9ECF0); aspect-ratio: 16 / 10; max-height: 80vh; overflow: hidden; }   /* max-height : il reste toujours une bande de page à saisir pour faire défiler */
.m3d .m3d-affiche { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.m3d .m3d-lancer {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1; min-height: 48px; padding: 0 24px; white-space: nowrap;
  border: 0; border-radius: 0; background: #181851; color: #fff; box-shadow: 0 6px 24px rgba(24, 24, 81, .28);
}
.m3d .m3d-lancer:hover { background: #2A2B8C; }
.m3d .m3d-lancer:focus-visible, .m3d button:focus-visible, .m3d .m3d-bouton:focus-visible, .m3d .m3d-canvas:focus-visible { outline: 3px solid #82BE00; outline-offset: 2px; }
.m3d .m3d-canvas:focus-visible { outline-offset: -3px; }
.m3d .m3d-lancer[aria-busy="true"] { opacity: .75; cursor: progress; }
.m3d .m3d-message { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 10px 14px; background: #fff; border-left: 4px solid #82BE00; font-size: 14px; }

/* touch-action: none : au doigt, un geste commencé sur la maquette la fait tourner, basculer ou zoomer, et ne fait pas défiler la page. */
.m3d .m3d-scene { position: absolute; inset: 0; touch-action: none; }
.m3d .m3d-canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.m3d .m3d-etiquettes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.m3d .m3d-etiquette {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 28px;
  font: inherit; line-height: 1; padding: 0 7px; border-radius: 0;
  border: 2px solid #5B8500; background: #fff; color: #181851;
  box-shadow: 0 2px 8px rgba(24, 24, 81, .18); will-change: transform;
}
.m3d .m3d-etiquette::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -1px; width: 2px; height: 12px; background: #5B8500; }
.m3d .m3d-etiquette.est-haut::after { height: 44px; }      /* une étiquette sur deux monte d'un rang quand elles se chevaucheraient */
.m3d .m3d-etiquette b { font-weight: 900; font-size: 14px; }
.m3d .m3d-etiquette.est-vendu { color: #5A6478; border-color: #9AA2B1; background: repeating-linear-gradient(135deg, #F4F5F7 0 6px, #DDE1E7 6px 8px); }
.m3d .m3d-etiquette.est-vendu::after { background: #9AA2B1; }
.m3d .m3d-etiquette.est-choisi { background: #82BE00; border-color: #181851; }
.m3d .m3d-etiquette.est-choisi::after { background: #181851; }
.m3d .m3d-etiquette.est-vendu.est-choisi { background: #181851; color: #fff; }
.m3d .m3d-etiquette:hover { box-shadow: 0 0 0 2px #181851; }

/* Repère de la route nationale : il suit la route quand la vue tourne. Il ne se clique pas. */
.m3d .m3d-repere {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 5px 10px 5px 5px; background: rgba(255, 255, 255, .94); border: 1.5px solid #181851; box-shadow: 0 2px 10px rgba(24, 24, 81, .2);
  font-size: 13px; font-weight: 500; line-height: 1; color: #181851; will-change: transform;
}
.m3d .m3d-repere::before { content: ""; position: absolute; left: var(--trait, 50%); bottom: 100%; margin-left: -1px; width: 2px; height: 14px; background: #181851; }
.m3d .m3d-repere.est-dessus::before { bottom: auto; top: 100%; }
.m3d .m3d-repere b { display: inline-block; padding: 4px 6px; background: #D4142A; color: #fff; font-weight: 900; font-size: 13px; letter-spacing: .02em; }

.m3d .m3d-bas { position: absolute; left: 12px; bottom: 9px; display: grid; gap: 7px; justify-items: start; pointer-events: none; z-index: 3000; }
.m3d .m3d-legende { margin: 0; display: flex; gap: 14px; padding: 5px 8px; background: rgba(255, 255, 255, .88); font-size: 12.5px; color: #5A6478; }
.m3d .m3d-legende:empty { display: none; }
.m3d .m3d-legende span { display: inline-flex; align-items: center; gap: 6px; }
.m3d .m3d-legende i { width: 12px; height: 12px; border: 2px solid #5B8500; background: #fff; }
.m3d .m3d-legende i.vendu { border-color: #9AA2B1; background: repeating-linear-gradient(135deg, #F4F5F7 0 3px, #DDE1E7 3px 5px); }

.m3d .m3d-barre { position: absolute; left: 10px; top: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; z-index: 3000; }
.m3d .m3d-zooms { position: absolute; right: 10px; bottom: 10px; display: grid; gap: 6px; z-index: 3000; }
.m3d .m3d-barre button, .m3d .m3d-zooms button {
  pointer-events: auto; cursor: pointer; margin: 0; font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  min-height: 34px; padding: 0 11px; border-radius: 0; border: 1.5px solid #181851;
  background: rgba(255, 255, 255, .92); color: #181851;
}
.m3d .m3d-barre button:hover, .m3d .m3d-zooms button:hover { background: #EEF0F3; }
.m3d .m3d-barre button[aria-pressed="true"] { background: #181851; color: #fff; }
.m3d .m3d-zooms button { width: 36px; min-height: 36px; padding: 0; font-size: 19px; }

.m3d .m3d-fiche { border: 1px solid #D9DEE6; border-top: 0; padding: 14px 16px; min-height: 76px; display: grid; gap: 8px; align-content: center; background: #fff; text-align: left; }
.m3d .m3d-invite { margin: 0; color: #5A6478; font-size: 14.5px; }
.m3d .m3d-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.m3d .m3d-nom { font-weight: 900; font-size: 21px; line-height: 1.1; }
.m3d .m3d-surface { font-weight: 700; font-size: 18px; }
.m3d .m3d-statut { font-weight: 700; font-size: 14.5px; }
.m3d .m3d-statut.est-libre { color: #5B8500; }
.m3d .m3d-statut.est-vendu { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: #5A6478; border: 1.5px solid #5A6478; padding: 4px 8px; }
.m3d .m3d-detail { margin: 0; font-size: 14.5px; }
.m3d .m3d-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.m3d .m3d-bouton { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; background: #181851; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; }
.m3d .m3d-bouton:hover { background: #2A2B8C; color: #fff; }
.m3d figcaption { margin: 8px 0 0; color: #5A6478; font-size: 14px; text-align: left; }

@media (max-width: 1100px) { .m3d { width: auto; margin-left: 16px; margin-right: 16px; } }
@media (max-width: 640px) {
  .m3d .m3d-cadre { aspect-ratio: 1 / 1; }
  .m3d .m3d-etiquette { min-width: 30px; min-height: 26px; padding: 0 5px; }
  .m3d .m3d-etiquette b { font-size: 13px; }
  .m3d .m3d-etiquette.est-haut::after { height: 42px; }
  .m3d .m3d-barre { gap: 5px; left: 8px; right: 8px; top: 8px; }
  .m3d .m3d-barre button { font-size: 12px; padding: 0 7px; min-height: 32px; }
  .m3d .m3d-repere { font-size: 12px; gap: 6px; padding: 4px 8px 4px 4px; }
  .m3d .m3d-repere b { font-size: 12px; }
  .m3d .m3d-lancer { font-size: 15px; padding: 0 18px; }
}