/* Un espace symétrique garde le média au centre, au-dessus des commandes mobiles. */
html.media-viewer-open, body.media-viewer-open{ overflow:hidden; }
.media-viewer{
  position:fixed; inset:0; width:100%; height:100%; height:100dvh;
  max-width:none; max-height:none; box-sizing:border-box;
  margin:0; padding:0; border:0; overflow:hidden;
  background:rgba(25,21,18,.97); color:#f8f8f0;
}
.media-viewer::backdrop{ background:rgba(25,21,18,.97); }
.media-viewer__layout{
  display:grid; grid-template-columns:48px minmax(0,1fr) 48px;
  grid-template-rows:44px minmax(0,1fr) 44px; gap:16px;
  width:100%; height:100%; box-sizing:border-box;
  padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
}
.media-viewer__stage{
  grid-area:2 / 2; display:grid; place-items:center;
  grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr);
  width:100%; height:100%; min-width:0; min-height:0;
  touch-action:pan-y pinch-zoom;
}
.media-viewer__media{
  display:block; width:auto; height:auto; max-width:100%; max-height:100%;
  margin:0; object-fit:contain; border-radius:4px;
}
img.media-viewer__media{ user-select:none; -webkit-user-drag:none; }
.media-viewer__button{
  display:grid; place-items:center; width:44px; height:44px; padding:10px;
  box-sizing:border-box; border:1px solid rgba(248,248,240,.35); border-radius:50%;
  background:rgba(248,248,240,.08); color:#f8f8f0; cursor:pointer;
  align-self:center; justify-self:center;
}
.media-viewer__button:hover{ background:rgba(248,248,240,.18); }
.media-viewer__button:focus-visible{ outline:3px solid #d9855a; outline-offset:4px; }
.media-viewer__button svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.media-viewer__button[hidden]{ display:none; }
.media-viewer__close{ grid-area:1 / 3; }
.media-viewer__prev{ grid-area:2 / 1; }
.media-viewer__next{ grid-area:2 / 3; }
.media-viewer__counter{
  grid-area:3 / 2; align-self:center; min-width:0;
  margin:0; text-align:center; font:400 13px/1.5 Poppins,Arial,sans-serif; color:#f8f8f0;
}
.media-viewer__name{
  grid-area:1 / 1 / 2 / 3; align-self:center;
  margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:400 12px/1.5 Poppins,Arial,sans-serif; color:#f8f8f0;
}
.img_realisations [role="button"]:focus-visible{ outline:3px solid #836454; outline-offset:3px; }
@media(max-width:680px){
  .media-viewer__layout{
    grid-template-columns:44px minmax(0,1fr) 44px; gap:12px;
    padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  }
  .media-viewer__stage{ grid-area:2 / 1 / 3 / 4; }
  .media-viewer__prev{ grid-area:3 / 1; }
  .media-viewer__next{ grid-area:3 / 3; }
}