/* Visite 360° — la page de visite partageable et le lecteur intégré au site (22/09/2026).
   Sombre, plein écran, une main qui glisse pour dire le geste ; rien ne bouge sous mouvement réduit. */
:root{--v-fond:#0b0d10;--v-texte:#f4f2ee;--v-voile:#0b0d10b8;--v-accent:#e8c9a5;--v-police:"Archivo",system-ui,sans-serif}
html,body{height:100%;margin:0}
body{background:var(--v-fond);color:var(--v-texte);font:400 15px/1.4 var(--v-police);-webkit-font-smoothing:antialiased;overflow:hidden}
.visite{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr auto;isolation:isolate;outline:none}
.visite canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;z-index:0}
.visite canvas:active{cursor:grabbing}
.visite[data-repli] canvas{display:none}
.visite-repli{position:absolute;inset:0;z-index:0;display:grid;place-items:center;background:var(--v-fond)}
.visite-repli[hidden]{display:none}
.visite-repli img{width:100%;height:100%;object-fit:cover;opacity:.85}
.visite-repli p{position:absolute;bottom:22%;left:50%;translate:-50% 0;margin:0;padding:12px 18px;background:var(--v-voile);border-radius:12px;max-width:min(90vw,44ch);text-align:center}
/* Haut : le lieu, la vue, les commandes. Tout est posé sur un voile qui se retire quand on regarde. */
.visite-haut,.visite-bas{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px}
.visite-haut{grid-row:1;background:linear-gradient(180deg,#0b0d10cc,#0b0d1000);pointer-events:none}
.visite-haut>*{pointer-events:auto}
.visite-lieu{display:grid;gap:2px;min-width:0;margin-right:auto}
.visite-lieu b{font-weight:650;font-size:16px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visite-lieu span{font-size:12.5px;color:#c9c4bb}
.visite-lieu span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--v-accent);margin:0 8px 1px 0}
.visite-commandes{display:flex;gap:8px}
.visite-commandes button,.visite-retour{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 13px;border:1px solid #ffffff33;border-radius:999px;background:#0b0d1099;color:var(--v-texte);font:550 13px/1 var(--v-police);text-decoration:none;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.visite-commandes button[aria-pressed=true]{background:var(--v-accent);color:#1b140c;border-color:var(--v-accent)}
.visite-commandes button[hidden]{display:none}
.visite-commandes svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.visite-commandes button span{display:none}.visite-commandes button{padding:0 11px}}
/* Bas : les vues, en vignettes à faire glisser. */
.visite-bas{grid-row:3;background:linear-gradient(0deg,#0b0d10d9,#0b0d1000);padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));overflow-x:auto;scrollbar-width:none;gap:10px;scroll-snap-type:x proximity}
.visite-bas::-webkit-scrollbar{display:none}
.visite-scene{flex:0 0 auto;display:grid;gap:6px;justify-items:start;padding:0;border:0;background:none;color:inherit;font:550 12.5px/1 var(--v-police);cursor:pointer;scroll-snap-align:start}
.visite-scene img{width:112px;height:66px;object-fit:cover;border-radius:10px;border:2px solid transparent;transition:border-color .2s,transform .25s;display:block}
.visite-scene[aria-current=true] img{border-color:var(--v-accent)}
.visite-scene:hover img{transform:translateY(-2px)}
.visite-scene span{padding-left:2px}
/* Les points de passage : un anneau qui respire et le nom de la pièce. */
.visite-points{position:absolute;inset:0;z-index:1;pointer-events:none}
.visite-point{position:absolute;left:0;top:0;pointer-events:auto;display:grid;justify-items:center;gap:8px;padding:0;border:0;background:none;color:var(--v-texte);font:600 12.5px/1 var(--v-police);cursor:pointer;will-change:transform}
.visite-point[hidden]{display:none}
.visite-point i{width:46px;height:46px;border-radius:50%;border:2px solid #fff;background:#ffffff26;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 0 0 #ffffff66;display:grid;place-items:center;position:relative}
.visite-point i::after{content:"";width:12px;height:12px;border-radius:50%;background:#fff}
.visite-point span{padding:6px 10px;border-radius:999px;background:var(--v-voile);white-space:nowrap}
.visite-point:hover i{background:#ffffff44}
/* Aide au premier regard, chargement, toast. */
.visite-aide{position:absolute;left:50%;top:50%;z-index:2;translate:-50% -50%;display:grid;justify-items:center;gap:10px;padding:16px 20px;border-radius:16px;background:var(--v-voile);text-align:center;pointer-events:none;max-width:min(80vw,30ch)}
.visite-aide[hidden]{display:none}
.visite-aide svg{width:38px;height:38px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.visite-chargement{position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:linear-gradient(90deg,transparent,var(--v-accent),transparent);background-size:40% 100%}
.visite-chargement[hidden]{display:none}
.visite-toast{position:absolute;left:50%;bottom:calc(112px + env(safe-area-inset-bottom,0px));z-index:3;translate:-50% 0;padding:10px 16px;border-radius:999px;background:#f4f2ee;color:#0b0d10;font-weight:600;font-size:13.5px;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visite-toast[hidden]{display:none}
.visite-credit{position:absolute;right:10px;bottom:calc(100px + env(safe-area-inset-bottom,0px));z-index:2;margin:0;font-size:10.5px;color:#c9c4bb99;max-width:60vw;text-align:right}
.visite-credit a{color:inherit}
@media(prefers-reduced-motion:no-preference){
 .visite-point i{animation:respire 2.4s ease-in-out infinite}
 @keyframes respire{50%{box-shadow:0 0 0 12px #ffffff00}}
 .visite-aide svg{animation:glisse 1.8s ease-in-out infinite}
 @keyframes glisse{0%,100%{translate:-10px 0}50%{translate:10px 0}}
 .visite-chargement{animation:file 1.1s linear infinite}
 @keyframes file{from{background-position:-40% 0}to{background-position:140% 0}}
 .visite-haut,.visite-bas{transition:opacity .4s}
 .visite[data-regarde] .visite-haut,.visite[data-regarde] .visite-bas{opacity:.35}
}
/* Intégré dans un site (iframe) : les vignettes restent, le crédit se tait. */
.visite[data-integre] .visite-credit,.visite[data-integre] .visite-retour{display:none}
.visite button:focus-visible,.visite a:focus-visible{outline:3px solid var(--v-accent);outline-offset:2px}