/* css/style.css — scoping dans .maquette-root, rien d’invasif pour le site */

/* Conteneur racine de la maquette (toujours présent dans index.html/building.html) */
.maquette-root { position: relative; width: 100%; height: 100%; }

/* Viewport (cadre responsif) : défini dans l’HTML par aspect-ratio */
/* Conteneur visible de la maquette (donne une hauteur via aspect-ratio) */
.maquette-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 16/9);
  background: #0b1220;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  min-height: 300px; /* garde-fou si le navigateur ignore aspect-ratio */
}

/* Pile principale */
#main-container { position: relative; inset: 0; width: 100%; height: 100%; }
#image-container, #threejs-container { position: absolute; inset: 0; }
#image { width: 100%; height: 100%; object-fit: contain; display: block; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#threejs-container canvas { display: block; }

/* Logo fixe (désactivé en embed par le script) */
#logo-container {
  position: fixed; top: 20px; left: 20px; z-index: 1100;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.95); padding: 6px 10px; border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
#logo-container img { height: 90px; max-width: 140px; }

/* Menu étages (si utilisé plus tard) */
#floor-menu {
  position: fixed; left: 20px; top: 50%; transform: translateY(-50%);
  z-index: 1000; display: flex; flex-direction: column; gap: 10px;
  background: #fff; padding: 10px; border: 1px solid #ddd; border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.menu-icon {
  background: #f7f7f7; color:#333; border:1px solid #ccc; border-radius:4px;
  padding: 8px 12px; font-size:14px; cursor:pointer; transition: .2s;
}
.menu-icon:hover { background:#eaeaea; transform: scale(1.02); }

/* Loader */
.loader {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(255,255,255,.8); padding: 10px 20px; border-radius: 5px;
  font-size: 16px; color: #333; z-index: 2000; display: none;
}

/* Tooltips */
#tooltip-container { position: absolute; inset: 0; z-index: 1000; pointer-events: none; }
.tooltip-single, .tooltip-bubble { pointer-events: auto; }
.tooltip-single {
  position: fixed; background:#fff; border:1px solid #ccc; border-radius: 8px;
  padding: 10px; max-width: 320px; box-shadow: 0 4px 16px rgba(0,0,0,.2);
  opacity: 0; transform: scale(.95); transition: opacity .18s, transform .18s;
}
.close-tooltip {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  display:flex; align-items:center; justify-content:center;
  font-size: 17px; color:#222; background: rgba(0,0,0,.06);
  border-radius: 50%; cursor: pointer;
}
.tooltip-content { margin-top: 18px; }
.plan-link-container { margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; }
.plan-link { color:#0b6bff; text-decoration:none; font-weight:600; }
.plan-link:hover { text-decoration: underline; }
.status-overlay {
  position:absolute; background:rgba(0,0,0,.8); color:#fff; padding:8px 12px;
  border-radius:4px; font: 14px/1.2 Arial, sans-serif; z-index:1000; pointer-events:none;
}

/* Popup (PDF / plan 3D) */
.popup-modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(9,13,23,.55); backdrop-filter: blur(6px) saturate(120%); z-index: 9999;
}
.popup-content{
  width: min(96vw, 1100px); height: min(90vh, 760px);
  background: #0b1220; border: 1px solid #263245; border-radius: 12px;
  box-shadow: 0 25px 70px rgba(0,0,0,.5); overflow:hidden; display:grid; grid-template-rows:auto 1fr;
}
.popup-head{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background: #0a1120; border-bottom: 1px solid #1e293b;
}
.popup-title{ color:#e5e7eb; font-weight:600; font-size:14px; }
.popup-actions{ margin-left:auto; }
.popup-actions a{ color:#93c5fd; text-decoration:none; font-size:13px; }
.popup-actions a:hover{ text-decoration:underline; }
.popup-close{
  margin-left:8px; width:32px; height:32px; border:0; border-radius:8px;
  background:#111827; color:#cbd5e1; cursor:pointer; font-size:18px; line-height:32px;
}
.popup-close:hover{ background:#1f2937; }
.popup-body{ position:relative; width:100%; height:100%; }
#popup-frame{ width:100%; height:100%; display:block; background:#0b1220; border:0; }
.popup-loading{ position:absolute; inset:0; display:grid; place-items:center; gap:10px; color:#cbd5e1; pointer-events:none; }
.spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:#93c5fd; animation: spin .9s linear infinite;
}
@keyframes spin { to{ transform: rotate(360deg) } }

/* Splash minimal (même rendu standalone & embed : le JS le retire en iframe) */
/* === Splash: layout robuste (logo + image + bouton visibles) === */
#splash-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;            /* laisse de la marge interne */
  box-sizing: border-box;
  overflow: hidden;         /* pas de scroll du body pendant le splash */
}

#splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                /* espace entre logo / image / bouton */
  width: 100%;
  max-width: 1000px;        /* largeur max du bloc splash */
  max-height: 100%;
}

#splash-content .splash-title-logo {
  max-height: 100px;        /* logo raisonnable */
  width: auto;
  height: auto;
  object-fit: contain;
}

#splash-content .splash-big-image {
  width: 100%;
  height: auto;
  /* réserve de la place pour logo + bouton afin qu’ils restent visibles */
  max-height: calc(100vh - 220px); 
  object-fit: contain;
  border-radius: 10px;
  margin: 0;                /* évite d’ajouter de la hauteur superflue */
  animation: imageZoom 3s ease-out forwards;
}

.splash-button {
  padding: 10px 20px;
  font-size: 1.1em;
  border: none;
  border-radius: 6px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}

.splash-button:hover {
  background: #0056b3;
}

/* Sur petits écrans: resserre un peu l’ensemble */
@media (max-width: 480px) {
  #splash-content .splash-title-logo { max-height: 72px; }
  #splash-content .splash-big-image { max-height: calc(100vh - 180px); }
}