html,body{margin:0;padding:0;background:#0d0e11;color:#e8e2d6;overscroll-behavior:none}
body{min-height:100%}
/* The engine (gallery-engine.js + gallery-engine.css) draws the room and its
   overlay UI on top of this. Everything below is page chrome around it. */
.no-webgl{position:fixed;inset:0;display:grid;place-content:center;gap:12px;padding:32px;
  text-align:center;font:400 16px/1.5 ui-sans-serif,system-ui,sans-serif}
.no-webgl a{color:inherit}
.fallback-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:20px;padding:32px;max-width:1200px;margin:0 auto}
.fallback-grid figure{margin:0}
.fallback-grid img{width:100%;height:auto;display:block;border-radius:4px}
.fallback-grid figcaption{font:400 13px/1.4 ui-sans-serif,system-ui,sans-serif;
  opacity:.7;margin-top:8px}

@media (max-width:640px){
  body .gal-hint{white-space:normal;text-align:center;line-height:1.35;
    max-width:calc(100vw - 28px);font-size:12px;padding:9px 14px;
    bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  body .gal-title{top:calc(16px + env(safe-area-inset-top,0px));
    max-width:calc(100vw - 36px)}
  body .gal-title h1{font-size:17px}
  body .gal-title p{font-size:12px}
  body .gal-panel{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .fallback-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:14px;padding:18px}
}

.tour{position:fixed;inset:0;z-index:11;pointer-events:none;
  font:400 14px/1.4 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.tour-nav{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(16,18,22,.72);color:#ece6da;font-size:30px;line-height:1;
  backdrop-filter:blur(10px);transition:background .2s,opacity .2s;
  display:grid;place-content:center;padding:0 0 4px}
.tour-nav:hover{background:rgba(201,168,106,.9);color:#12140f}
.tour-nav:focus-visible{outline:2px solid #c9a86a;outline-offset:3px}
.tour-nav:disabled{opacity:.25;cursor:default}
.tour-nav.prev{left:22px}
.tour-nav.next{right:22px}
.tour-count{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(18px + env(safe-area-inset-top,0px));
  max-width:min(60vw,420px);text-align:center;color:#ece6da;opacity:.72;
  font-size:12.5px;text-shadow:0 1px 6px rgba(0,0,0,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){
  .tour-nav{width:46px;height:46px;font-size:26px;
    top:auto;bottom:calc(74px + env(safe-area-inset-bottom,0px));transform:none}
  .tour-nav.prev{left:14px}
  .tour-nav.next{right:14px}
  .tour-count{top:auto;bottom:calc(88px + env(safe-area-inset-bottom,0px));
    max-width:calc(100vw - 140px);font-size:12px}

  /* On phones the artwork detail panel (bottom-right, near full width) and
     the prev/next arrows + "Toutes les œuvres" button (also bottom-anchored
     here, unlike their vertically-centered desktop position) occupy the same
     screen region. Hide the nav chrome while a piece is focused instead of
     letting them visually collide — release() already lets prev/next and the
     map work again the moment the panel closes. */
  body.artwork-open .tour-nav,
  body.artwork-open .map-btn,
  body.artwork-open .tour-count{
    opacity:0;pointer-events:none;transition:opacity .2s}
}
@media (prefers-reduced-motion:reduce){.tour-nav{transition:none}}

.gal-back{position:fixed;z-index:12;top:calc(20px + env(safe-area-inset-top,0px));
  right:22px;padding:10px 18px;border-radius:999px;text-decoration:none;
  background:rgba(247,245,241,.94);color:#12263F;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  font:600 13.5px/1.2 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .2s,transform .2s,box-shadow .2s}
.gal-back span{font-size:17px;line-height:1;transition:transform .2s}
.gal-back:hover{background:#fff;transform:translateY(-1px);
  box-shadow:0 8px 26px rgba(0,0,0,.55)}
.gal-back:hover span{transform:translateX(-3px)}
.gal-back:focus-visible{outline:3px solid #0A7A88;outline-offset:3px}
@media (max-width:640px){
  .gal-back{right:14px;top:calc(14px + env(safe-area-inset-top,0px));
    padding:9px 14px;font-size:12.5px}
}
.gal-veil{position:fixed;inset:0;z-index:60;background:#FAF7F2;opacity:0;
  pointer-events:none;transition:opacity .4s ease}
.gal-veil.is-on{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .gal-back,.gal-veil{transition:none}
}

.map-btn{position:fixed;z-index:12;top:calc(84px + env(safe-area-inset-top,0px));
  left:28px;padding:9px 16px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(16,18,22,.72);color:#ece6da;backdrop-filter:blur(10px);
  font:500 13px/1.2 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s}
.map-btn:hover{background:rgba(201,168,106,.92);color:#12140f}
.map-btn:focus-visible{outline:2px solid #c9a86a;outline-offset:3px}

@media (max-width:640px){
  .map-btn{left:14px;top:auto;bottom:calc(126px + env(safe-area-inset-bottom,0px));
    padding:8px 13px;font-size:12px}
}

.map{position:fixed;inset:0;z-index:40;background:rgba(8,9,12,.97);
  backdrop-filter:blur(6px);overflow-y:auto;overscroll-behavior:contain;
  color:#ece6da;
  font:400 14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.map[hidden]{display:none}
body.map-open{overflow:hidden}
.map-bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:18px 26px;
  background:linear-gradient(rgba(8,9,12,.98),rgba(8,9,12,.86));
  backdrop-filter:blur(8px)}
.map-bar h2{margin:0;font:600 17px/1.2 Georgia,"Times New Roman",serif;
  letter-spacing:.01em}
.map-close{border:0;background:rgba(255,255,255,.08);color:#ece6da;cursor:pointer;
  width:38px;height:38px;border-radius:50%;font-size:15px;line-height:1;
  transition:background .2s}
.map-close:hover{background:rgba(201,168,106,.9);color:#12140f}
.map-close:focus-visible{outline:2px solid #c9a86a;outline-offset:3px}

.map-grid{display:grid;gap:16px;padding:8px 26px 40px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.map-cell{position:relative;border:0;padding:0;background:none;cursor:pointer;
  color:inherit;text-align:left;font:inherit;border-radius:6px;
  transition:transform .18s}
.map-cell img{width:100%;height:190px;object-fit:cover;display:block;
  border-radius:4px;background:#15171c}
.map-cell:hover{transform:translateY(-3px)}
.map-cell:hover img{outline:2px solid #c9a86a;outline-offset:2px}
.map-cell:focus-visible{outline:2px solid #c9a86a;outline-offset:4px}
.map-cap:empty{display:none}
.gal-panel h2:empty{display:none}
.map-cap{display:block;margin-top:7px;font-size:12.5px;opacity:.74;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .map-btn,.map-cell,.map-close{transition:none}
}

.no-webgl-note{max-width:760px;margin:0 auto;padding:48px 26px 8px;
  text-align:center;
  font:400 15px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.no-webgl-note strong{font-size:17px}
.no-webgl-note p{margin:0 0 10px}
.no-webgl-note a{color:#c9a86a}