/* =========================================================================
   SanyasArt — « Chez vous » (V3) · room-preview.css
   Simulateur d'accrochage : pièces réalistes si assets fournis + votre mur.
   Territoire strict : ce fichier + room-preview.js. Aucune dépendance.
   ========================================================================= */

/* ---- Bouton d'entrée + rangée de secours (si #sxBar absent) ---- */
.sx-roombar{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:.9rem}
.sx-roombtn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.6rem 1.05rem;border-radius:999px;background:#fff;border:1px solid rgba(23,19,16,.16);color:var(--ink,#171310);font-family:var(--sans,'Jost',sans-serif);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .2s var(--ease,ease),box-shadow .2s var(--ease,ease),transform .2s var(--ease,ease)}
.sx-roombtn svg{width:17px;height:17px;flex:none;color:var(--gold-deep,#9C7426)}
.sx-roombtn:hover{border-color:var(--gold,#C29A45);transform:translateY(-1px);box-shadow:0 10px 26px rgba(156,116,38,.16)}

/* ---- Overlay plein écran clair ---- */
.sx-room{position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;background:rgba(252,248,240,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink,#171310);font-family:var(--sans,'Jost',sans-serif);opacity:0;pointer-events:none;transition:opacity .25s var(--ease,ease)}
.sx-room.on{opacity:1;pointer-events:auto}
.sx-room button{font-family:inherit}
.sx-room button:focus-visible,.sx-room a:focus-visible,.sx-room input:focus-visible,.sx-room [tabindex]:focus-visible{outline:2px solid var(--gold,#C29A45);outline-offset:2px}

/* En-tête */
.sx-room-head{flex:none;display:flex;align-items:flex-start;gap:.8rem;padding:.85rem 1rem .35rem 1.15rem}
.sx-room-ttl{min-width:0}
.sx-room-k{display:block;font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep,#9C7426)}
.sx-room-t{margin:.1rem 0 0;font-family:var(--serif,'Cormorant Garamond',serif);font-weight:600;font-size:1.35rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-room-d{display:block;margin-top:.12rem;font-size:.68rem;letter-spacing:.08em;color:var(--muted,#7C7264)}
.sx-room-x{flex:none;margin-left:auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#fff;border:1px solid rgba(23,19,16,.16);color:var(--ink,#171310);cursor:pointer;transition:border-color .2s var(--ease,ease),transform .2s var(--ease,ease)}
.sx-room-x svg{width:18px;height:18px}
.sx-room-x:hover{border-color:var(--gold,#C29A45);transform:rotate(90deg)}

/* Scène */
.sx-room-stage{flex:1 1 auto;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:.5rem .9rem}
.sx-rscene{position:relative;overflow:hidden;border-radius:var(--radius,14px);box-shadow:0 24px 60px rgba(23,19,16,.12);background:#F6EEDF}
.sx-rscene svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sx-rscene--photo .sx-svgwrap{display:none}
.sx-rscene--fill{width:100%;height:100%}
.sx-rscene--wall{background:#171310}
.sx-svgwrap{position:absolute;inset:0;z-index:0}
.sx-room[hidden]{display:none!important}
.sx-room [hidden]{display:none!important}
.sx-room-photo,.sx-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:0}
.sx-photo{object-fit:contain}

/* Œuvre à l'échelle */
.sx-art{position:absolute;box-sizing:border-box;background:#fff;padding:4px;box-shadow:0 0 0 1px rgba(23,19,16,.1),0 24px 60px rgba(23,19,16,.18);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;z-index:3}
.sx-art.drag{cursor:grabbing}
.sx-art--obj{padding:3px;box-shadow:0 0 0 1px rgba(23,19,16,.1),0 10px 22px rgba(23,19,16,.16)}
.sx-art--cutout{background:transparent;padding:0;box-shadow:none;filter:drop-shadow(0 18px 26px rgba(23,19,16,.24))}
.sx-art--cutout.sx-art--obj{filter:drop-shadow(0 10px 16px rgba(23,19,16,.2))}
.sx-art img{width:100%;height:100%;display:block;pointer-events:none}
.sx-art--cutout img{object-fit:contain!important;object-position:center center!important}
.sx-art-tag{position:absolute;left:50%;top:100%;transform:translate(-50%,9px);background:rgba(252,248,240,.94);border:1px solid var(--line,#E7DCC6);border-radius:999px;padding:.2rem .6rem;font-size:.6rem;letter-spacing:.12em;white-space:nowrap;color:var(--muted,#7C7264);pointer-events:none}

/* Astuce (une phrase, s'estompe) */
.sx-room-hint{margin:0;position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);max-width:92%;background:rgba(255,255,255,.94);border:1px solid var(--line,#E7DCC6);border-radius:999px;padding:.42rem .95rem;font-size:.7rem;letter-spacing:.04em;color:var(--ink-2,#2C2620);text-align:center;pointer-events:none;z-index:5;opacity:1;transition:opacity .5s var(--ease,ease)}
.sx-room-hint.off{opacity:0}

/* Panneau de calibration « Votre mur » */
.sx-calib{position:absolute;top:.55rem;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;max-width:min(96%,600px);background:rgba(255,255,255,.95);border:1px solid var(--line,#E7DCC6);border-radius:16px;padding:.5rem .65rem;box-shadow:0 14px 34px rgba(23,19,16,.12)}
.sx-ref{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.4rem .8rem;border-radius:999px;background:#fff;border:1px solid rgba(23,19,16,.16);font-size:.66rem;font-weight:500;letter-spacing:.08em;white-space:nowrap;cursor:pointer;transition:border-color .2s var(--ease,ease),background .2s var(--ease,ease),color .2s var(--ease,ease)}
.sx-ref svg{width:14px;height:14px;flex:none}
.sx-ref:hover{border-color:var(--gold,#C29A45)}
.sx-ref.on{background:linear-gradient(135deg,#C9A24B,#B08A35);border-color:transparent;color:#fff}
.sx-cm{width:64px;min-height:40px;padding:.3rem .45rem;border:1px solid rgba(23,19,16,.2);border-radius:10px;font-family:inherit;font-size:.75rem;color:inherit;background:#fff;text-align:center}
.sx-cm-u{font-size:.66rem;color:var(--muted,#7C7264);margin-left:-.1rem}
.sx-calib-hint{flex:1 1 100%;text-align:center;font-size:.66rem;letter-spacing:.03em;color:var(--muted,#7C7264);margin:.05rem 0 0}

/* Réglette verticale à 2 poignées */
.sx-ruler{position:absolute;z-index:4;width:0}
.sx-ruler-line{position:absolute;left:-13px;top:0;bottom:0;width:26px;cursor:ew-resize;touch-action:none}
.sx-ruler-line::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:var(--gold,#C29A45);box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.sx-rh{position:absolute;left:0;width:46px;height:46px;transform:translate(-50%,-50%);cursor:ns-resize;touch-action:none}
.sx-rh::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:2px;transform:translate(-50%,-50%);background:var(--gold,#C29A45)}
.sx-rh i{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:2px solid var(--gold,#C29A45);box-shadow:0 4px 12px rgba(23,19,16,.3)}
.sx-ruler-chip{position:absolute;left:0;top:50%;transform:translate(14px,-50%);background:rgba(23,19,16,.82);color:#FCF8F0;border-radius:999px;padding:.24rem .6rem;font-size:.64rem;letter-spacing:.1em;white-space:nowrap;pointer-events:none}

/* Badge confidentialité (permanent en mode « Votre mur ») */
.sx-privacy{margin:0;position:absolute;left:.75rem;bottom:.75rem;z-index:6;display:flex;align-items:center;gap:.45rem;max-width:78%;background:rgba(255,255,255,.94);border:1px solid var(--line,#E7DCC6);border-radius:999px;padding:.42rem .8rem;font-size:.64rem;line-height:1.25;letter-spacing:.03em;color:#5C5347}
.sx-privacy svg{width:15px;height:15px;flex:none;color:var(--gold-deep,#9C7426)}

/* Dock bas : vignettes + pilules + CTA */
.sx-room-dock{flex:none;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.4rem .8rem calc(.75rem + env(safe-area-inset-bottom,0px))}
.sx-try{display:flex;align-items:center;gap:.55rem;max-width:100%;min-width:0}
.sx-try-k{flex:none;font-size:.58rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep,#9C7426)}
.sx-thumbs{display:flex;gap:.4rem;overflow-x:auto;padding:.15rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sx-thumbs::-webkit-scrollbar{display:none}
.sx-thumb{flex:none;width:46px;height:46px;padding:0;border-radius:10px;overflow:hidden;background:#fff;border:2px solid rgba(23,19,16,.08);cursor:pointer;box-shadow:0 2px 8px rgba(23,19,16,.08);transition:transform .18s var(--ease,ease),border-color .18s var(--ease,ease)}
.sx-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sx-thumb:hover{transform:translateY(-2px);border-color:var(--gold-light,#E2C879)}
.sx-thumb.on{border-color:var(--gold,#C29A45)}
.sx-pills{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem;max-width:100%}
.sx-rpill{display:inline-flex;align-items:center;gap:.42rem;min-height:44px;padding:.55rem .95rem;border-radius:999px;background:#fff;border:1px solid rgba(23,19,16,.16);color:var(--ink,#171310);font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .2s var(--ease,ease),transform .2s var(--ease,ease),background .2s var(--ease,ease),color .2s var(--ease,ease)}
.sx-rpill svg{width:15px;height:15px;flex:none}
.sx-rpill:hover{border-color:var(--gold,#C29A45);transform:translateY(-1px)}
.sx-rpill.on{background:linear-gradient(135deg,#C9A24B,#B08A35);border-color:transparent;color:#fff}
.sx-cta{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem 1.15rem;border-radius:999px;background:var(--grad-gold,linear-gradient(135deg,#C9A24B,#B08A35));color:#2C2106;border:1px solid transparent;font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;text-decoration:none;box-shadow:0 14px 30px -14px rgba(156,116,38,.7);transition:transform .2s var(--ease,ease),box-shadow .2s var(--ease,ease)}
.sx-cta svg{width:15px;height:15px}
.sx-cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(156,116,38,.3)}

/* Message doux (fichier illisible…) */
.sx-room-toast{margin:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;max-width:86%;background:rgba(23,19,16,.88);color:#FCF8F0;border-radius:14px;padding:.7rem 1.1rem;font-size:.74rem;text-align:center;letter-spacing:.03em;opacity:0;pointer-events:none;transition:opacity .25s var(--ease,ease)}
.sx-room-toast.on{opacity:1}

/* ---- Mobile d'abord (≤640px) ---- */
@media (max-width:640px){
  .sx-room-head{padding:.7rem .7rem .3rem .85rem}
  .sx-room-t{font-size:1.12rem}
  .sx-room-stage{padding:.35rem .55rem}
  .sx-rpill{padding:.5rem .72rem;font-size:.6rem;letter-spacing:.09em}
  .sx-cta{flex:1 1 100%;justify-content:center}
  .sx-try{width:100%}
  .sx-try-k{max-width:74px;line-height:1.3}
  .sx-calib{top:.4rem;padding:.42rem .5rem;gap:.32rem}
  .sx-ref{padding:.34rem .6rem;font-size:.6rem}
  .sx-privacy{bottom:.55rem;left:.55rem;font-size:.58rem;max-width:88%}
}
@media (max-height:560px){
  .sx-room-d{display:none}
  .sx-try{display:none}
}

/* ---- Accessibilité mouvement ---- */
@media (prefers-reduced-motion:reduce){
  .sx-room,.sx-room *,.sx-roombtn{transition:none!important;animation:none!important}
}