/* Maquette 3D d'Adhika Park Lamorlaye. S'appuie sur les couleurs et les polices de style.css. Aucun arrondi. */
.m3d { margin: 8px 0 32px; }
.m3d-cadre { position: relative; border: 1px solid var(--zinc-2, #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, téléphone couché compris */
.m3d-affiche { display: block; width: 100%; height: 100%; object-fit: cover; }
.m3d-lancer { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); box-shadow: 0 6px 24px rgba(24, 24, 81, .28); }
.m3d-lancer[aria-busy="true"] { opacity: .75; cursor: progress; }
.m3d-message { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 10px 14px; background: var(--white, #fff); border-left: 4px solid var(--orange, #F4711F); font-size: .92rem; }

/* 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-scene { position: absolute; inset: 0; touch-action: none; }
.m3d-canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; outline-offset: -3px; }
.m3d-etiquettes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.m3d-etiquette {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer;
  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 var(--lime-ink, #5B8500); background: var(--white, #fff); color: var(--navy, #181851);
  box-shadow: 0 2px 8px rgba(24, 24, 81, .18); will-change: transform;
}
.m3d-etiquette::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -1px; width: 2px; height: 12px; background: var(--lime-ink, #5B8500); }
.m3d-etiquette b { font-family: var(--font-titre, inherit); font-weight: 800; font-size: .86rem; }
.m3d-etiquette.est-vendu { color: var(--muted, #5A6478); border-color: #9AA2B1; background: repeating-linear-gradient(135deg, #F4F5F7 0 6px, #DDE1E7 6px 8px); }
.m3d-etiquette.est-vendu::after { background: #9AA2B1; }
.m3d-etiquette.est-choisi { background: var(--lime, #82BE00); border-color: var(--navy, #181851); }
.m3d-etiquette.est-choisi::after { background: var(--navy, #181851); }
.m3d-etiquette.est-vendu.est-choisi { background: var(--navy, #181851); color: var(--white, #fff); }
.m3d-etiquette:hover { box-shadow: 0 0 0 2px var(--navy, #181851); }
.m3d-bas { position: absolute; left: 12px; bottom: 9px; display: grid; gap: 7px; justify-items: start; pointer-events: none; z-index: 3000; }
.m3d-option { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--navy, #181851); background: rgba(255, 255, 255, .92); border: 1.5px solid var(--navy, #181851); padding: 6px 10px; line-height: 1; }
.m3d-option input { appearance: none; -webkit-appearance: none; margin: 0; width: 15px; height: 15px; border: 2px solid var(--navy, #181851); border-radius: 0; background: var(--white, #fff); display: grid; place-content: center; cursor: pointer; }
.m3d-option input:checked { background: var(--navy, #181851); }
.m3d-option input:checked::after { content: ""; width: 7px; height: 4px; border-left: 2px solid var(--white, #fff); border-bottom: 2px solid var(--white, #fff); transform: translateY(-1px) rotate(-45deg); }
.m3d-option input:focus-visible { outline: 3px solid var(--orange, #F4711F); outline-offset: 2px; }
.m3d-legende { margin: 0; display: flex; gap: 14px; font-size: .78rem; color: var(--muted, #5A6478); }
.m3d-legende span { display: inline-flex; align-items: center; gap: 6px; }
.m3d-legende i { width: 12px; height: 12px; border: 2px solid var(--lime-ink, #5B8500); background: var(--white, #fff); }
.m3d-legende i.vendu { border-color: #9AA2B1; background: repeating-linear-gradient(135deg, #F4F5F7 0 3px, #DDE1E7 3px 5px); }

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

.m3d-fiche { border: 1px solid var(--zinc-2, #D9DEE6); border-top: 0; padding: 14px 16px; min-height: 76px; display: grid; gap: 8px; align-content: center; background: var(--white, #fff); }
.m3d-invite { margin: 0; color: var(--muted, #5A6478); font-size: .92rem; }
.m3d-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.m3d-nom { font-family: var(--font-titre, inherit); font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.m3d-surface { font-weight: 700; font-size: 1.1rem; }
.m3d-statut { font-weight: 700; font-size: .9rem; }
.m3d-statut.est-libre { color: var(--lime-ink, #5B8500); }
.m3d-statut.est-vendu { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--muted, #5A6478); border: 1.5px solid var(--muted, #5A6478); padding: 4px 8px; }
.m3d-prix { margin: 0; font-weight: 500; }
.m3d-offre { margin: 0; font-weight: 700; color: var(--orange-ink, #C94F00); }
.m3d-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.m3d-actions .btn { min-height: 42px; padding: 0 16px; font-size: .95rem; }
.m3d figcaption { color: var(--muted, #5A6478); font-size: .92rem; margin-top: 8px; }

@media (max-width: 640px) {
  .m3d-cadre { aspect-ratio: 1 / 1; }
  .m3d-etiquette { min-width: 30px; min-height: 26px; padding: 0 5px; }
  .m3d-etiquette b { font-size: .8rem; }
  .m3d-barre button { font-size: .78rem; padding: 0 9px; }
}