/* Granvo · « Promenez-vous dans la maison » — styles génériques v0.2 (2026-10-11 : unités, revêtements, vue 3D)
   Aucune donnée de maison ici (moteur : immeuble/visite.js). Couleurs : variables de la page (--ink, --paper, --line, --acc…)
   avec repli. Mobile d'abord : plan puis photos ; à partir de 900 px, plan à gauche et photos à droite. Cibles ≥ 44 px. */
.vm{--vm-ink:var(--ink,#141414);--vm-paper:var(--paper,#F6F4F0);--vm-line:var(--line,#DAD6CE);--vm-muted:var(--muted,#6A665F);--vm-acc:var(--acc,#B08D57);--vm-room:#FFFFFF;--vm-sel:var(--acc-soft,#EFE3CF)}
.vm-bar{display:flex;align-items:center;gap:8px;margin:0 -20px 14px;padding:0 20px}
.vm-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.vm-unit{flex:0 0 auto;display:inline-flex;min-height:44px;padding:4px;border:1px solid var(--vm-line);border-radius:999px;background:#fff;cursor:pointer;font:600 .78rem/1 var(--sans,system-ui,sans-serif)}
.vm-unit span{display:grid;place-items:center;min-width:30px;border-radius:999px;color:var(--vm-muted)}
.vm-unit span.on{background:var(--vm-ink);color:#fff}
.vm-tabs::-webkit-scrollbar{display:none}
.vm-tab{flex:0 0 auto;min-height:44px;padding:0 12px;border:1px solid var(--vm-line);border-radius:999px;background:transparent;color:var(--vm-ink);font:600 .86rem/1 var(--sans,system-ui,sans-serif);cursor:pointer}
.vm-tab[aria-selected=true]{background:var(--vm-ink);border-color:var(--vm-ink);color:#fff}
.vm-grid{display:grid;gap:16px}
.vm-plan{margin:0;background:var(--vm-paper);border:1px solid var(--vm-line);border-radius:14px;padding:10px}
.vm-svg{display:block;width:100%;height:auto;max-height:62vh}
.vm-cap{font-size:12px;line-height:1.45;color:var(--vm-muted);margin-top:8px}
/* plan */
.vm-svg .vm-out{fill:#EFEAE1;stroke:var(--vm-ink);stroke-width:.7;stroke-linejoin:miter}
.vm-svg .vm-f.lot{fill:#E4E8DC;stroke:#B9C0AE;stroke-width:.4;stroke-dasharray:1.2 .8}
.vm-svg .vm-f.allee{fill:#D3D1CC}
.vm-room{cursor:pointer;outline:none}
.vm-room rect{fill:var(--vm-room);stroke:var(--vm-ink);stroke-width:.32;transition:fill .2s}
.vm-room.t-garage rect,.vm-room.t-service rect{fill:#ECEAE6}
.vm-room.t-escalier rect{fill:#F1EEE8}
.vm-room.t-cour rect{fill:#CFD8C2;stroke:none}
.vm-room.t-piscine rect{fill:#9CC8DB;stroke:#5E95AE}
.vm-room.t-remise rect,.vm-room.t-maison rect{fill:#D9D6D0}
.vm-room.t-zone rect{fill:rgba(255,255,255,.55);stroke-dasharray:1 .7}
.vm-room .vm-st{stroke:var(--vm-ink);stroke-width:.12;opacity:.5}
.vm-room:hover rect{fill:var(--vm-sel)!important}
.vm-room.on rect{fill:var(--vm-acc);stroke:var(--vm-ink)}
.vm-room.t-cour.on rect{fill:#A9BE8F}
.vm-room.t-piscine.on rect{fill:#5FA8C6}
.vm-room:focus-visible rect{stroke:var(--vm-acc);stroke-width:.8}
.vm-lbl,.vm-dim{text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-family:var(--sans,system-ui,sans-serif);fill:var(--vm-ink)}
.vm-lbl{font-weight:600}
.vm-dim{fill:var(--vm-muted)}

/* visionneuse */
.vm-view{min-width:0}
.vm-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:14px;background:#E9E6E0;aspect-ratio:3/2;scrollbar-width:none;outline:none}
.vm-strip::-webkit-scrollbar{display:none}
.vm-strip:focus-visible{box-shadow:0 0 0 3px var(--vm-acc)}
.vm-ph{flex:0 0 100%;margin:0;scroll-snap-align:start;position:relative}
.vm-ph img{width:100%;height:100%;object-fit:cover;display:block}
.vm-none{margin:auto;padding:20px;text-align:center;color:var(--vm-muted);font-size:.9rem}
.vm-ctrl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.vm-ctrl[hidden]{display:none}
.vm-pp,.vm-np{width:44px;height:44px;border:1px solid var(--vm-line);border-radius:50%;background:#fff;color:var(--vm-ink);font-size:1.4rem;line-height:1;cursor:pointer}
.vm-pp:disabled,.vm-np:disabled{opacity:.35;cursor:default}
.vm-count{font-size:.8rem;color:var(--vm-muted)}
.vm-info{margin-top:10px}
.vm-name{font-family:var(--display,inherit);font-size:1.5rem;line-height:1.15;margin:0}
.vm-meta{font-size:.9rem;color:var(--vm-muted);margin-top:4px}
.vm-walk{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.vm-walk button{min-height:48px;padding:8px 12px;border:1px solid var(--vm-ink);border-radius:12px;background:transparent;color:var(--vm-ink);font:600 .86rem/1.2 var(--sans,system-ui,sans-serif);cursor:pointer;text-align:left}
.vm-walk .vm-next{background:var(--vm-ink);color:#fff;text-align:right}
.vm-walk button:disabled{opacity:.35;cursor:default}
@media(min-width:900px){
  .vm-bar{margin:0 0 18px;padding:0}
  .vm-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:start}
  .vm-view{position:sticky;top:calc(var(--nav-h,64px) + 20px)}
}
@media(prefers-reduced-motion:reduce){.vm-strip{scroll-behavior:auto}}
/* légende des revêtements */
.vm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.vm-leg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--vm-muted)}
.vm-leg span{display:inline-flex;align-items:center;gap:6px}
.vm-leg i{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.15)}
/* vue 3D : niveaux empilés (maison de poupée) */
.vm-3d{position:relative;height:min(92vw,470px);overflow:hidden}
.vm-3d[hidden]{display:none}
.vm-iso{position:absolute;inset:0;perspective:1400px;transform-style:preserve-3d}
.vm-lvl{position:absolute;left:60%;top:55%;width:54%;padding:0;border:0;background:#fff;cursor:pointer;transform-style:preserve-3d;
  box-shadow:0 18px 30px rgba(0,0,0,.18);transition:transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .3s;
  transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-40deg) translateZ(calc(var(--i) * 10px))}
.vm-3d.ouvert .vm-lvl{transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-40deg) translateZ(calc(var(--i) * min(19vw,92px)))}
.vm-lvl .vm-svg{max-height:none}
.vm-lvl:hover,.vm-lvl:focus-visible{box-shadow:0 0 0 3px var(--vm-acc),0 18px 30px rgba(0,0,0,.2)}
.vm-iso-lbl{position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-around;gap:6px}
.vm-iso-lbl button{min-height:44px;padding:0 14px;align-self:flex-start;border:1px solid var(--vm-line);border-radius:999px;background:rgba(255,255,255,.9);font:600 .8rem/1 var(--sans,system-ui,sans-serif);color:var(--vm-ink);cursor:pointer;text-align:left}
@media(prefers-reduced-motion:reduce){.vm-lvl{transition:none}}
.vm-room.entre rect{stroke-width:.6}
.vm-room.entre:hover rect{fill:var(--vm-acc)!important}
.vm-room.entre:hover .vm-lbl,.vm-room.entre:hover .vm-dim{fill:#fff}
.vm-svg .vm-go{font-weight:700;fill:var(--vm-ink)}
/* circulation (couloir, palier) : le fond du contour, sans mur */
.vm-room.t-circulation rect{fill:transparent!important;stroke:none}
.vm-room.t-circulation .vm-lbl{font-weight:500;fill:var(--vm-muted);font-style:italic}
.vm-room.t-circulation.on rect{fill:rgba(176,141,87,.35)!important}
.vm-room.t-circulation.on .vm-lbl{fill:var(--vm-ink)}
.vm-room.t-circulation:not(.has-ph){cursor:default}
/* v0.3 : rendu de plan d'architecte */
.vm-room rect{stroke:none}
.vm-room.t-cour rect,.vm-room.t-zone rect{stroke-dasharray:none}
.vm-svg .vm-murs{pointer-events:none}
.vm-svg .vm-cl{fill:none;stroke:#2A2826;stroke-width:.32}
.vm-svg .vm-ext{fill:none;stroke:#1E1C1A;stroke-width:.85;stroke-linejoin:miter}
.vm-svg .vm-trou{stroke:#EFEAE1;stroke-width:1.05;stroke-linecap:butt}
.vm-svg .vm-fen{stroke:#1E1C1A;stroke-width:.14;stroke-dasharray:none}
.vm-svg .vm-gar{stroke:#1E1C1A;stroke-width:.2;stroke-dasharray:.8 .5}
.vm-svg .vm-batt{stroke:#1E1C1A;stroke-width:.16}
.vm-svg .vm-arc{fill:none;stroke:#1E1C1A;stroke-width:.1;stroke-dasharray:.35 .25}
.vm-svg .vm-fl{fill:none;stroke:var(--vm-ink);stroke-width:.16;stroke-linecap:round;stroke-linejoin:round}
.vm-svg .vm-meuble rect,.vm-svg .vm-meuble circle,.vm-svg .vm-meuble ellipse{fill:rgba(255,255,255,.7);stroke:#8E877C;stroke-width:.09}
.vm-svg .vm-meuble line{stroke:#8E877C;stroke-width:.09}
.vm-room.on .vm-meuble rect,.vm-room.on .vm-meuble circle,.vm-room.on .vm-meuble ellipse{fill:rgba(255,255,255,.35);stroke:#fff}
.vm-room.on .vm-meuble line{stroke:#fff}
.vm-lbl,.vm-dim{paint-order:stroke;stroke:rgba(255,255,255,.8);stroke-width:.25px;stroke-linejoin:round}
