:root { --mlg-viewer-panel: min(27rem, 34vw); }

.mlg-photo-gallery { margin: 0 0 clamp(4rem, 8vw, 8rem); }
.mlg-photo-gallery .mlg-native-gallery {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px !important;
  margin: 0 !important;
  padding: 1px;
  background: var(--jsj-ink, #090909);
}
.mlg-photo-gallery [data-mlg-gallery-item] {
  position: relative;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  background: #111;
  cursor: zoom-in;
}
.mlg-photo-gallery [data-mlg-gallery-item]:focus-visible { outline: 2px solid var(--jsj-red, #b4474d); outline-offset: -3px; }
.mlg-photo-gallery [data-mlg-gallery-item] img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .25s ease, transform .35s ease, opacity .25s ease;
}
.mlg-photo-gallery [data-mlg-gallery-item]:hover img,
.mlg-photo-gallery [data-mlg-gallery-item]:focus img { filter: grayscale(0); transform: scale(1.025); }
.mlg-photo-gallery [data-mlg-gallery-item] figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 1.4rem .75rem .55rem;
  color: #eeeae2;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  font-size: .62rem;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .2s ease;
}
.mlg-photo-gallery [data-mlg-gallery-item]:hover figcaption,
.mlg-photo-gallery [data-mlg-gallery-item]:focus figcaption { opacity: 1; }

.mlg-gallery-pagination { display: flex; justify-content: center; gap: .5rem; margin: 2.5rem 0 0; }
.mlg-gallery-pagination a,
.mlg-gallery-pagination span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--jsj-line, #393939);
  color: var(--jsj-muted, #aaa69f);
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
}
.mlg-gallery-pagination a:hover,
.mlg-gallery-pagination .is-current { border-color: var(--jsj-red, #b4474d); color: var(--jsj-paper, #eeeae2); }

.mlg-viewer[hidden] { display: none !important; }
.mlg-viewer { position: fixed; z-index: 99999; inset: 0; color: #eeeae2; }
.mlg-viewer__backdrop { position: absolute; inset: 0; background: rgba(2, 2, 2, .96); backdrop-filter: blur(8px); }
.mlg-viewer__dialog { position: absolute; display: grid; inset: 0; grid-template-rows: 4rem minmax(0, 1fr); background: #090909; }
.mlg-viewer__toolbar {
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.25rem;
  border-bottom: 1px solid #393939;
  background: #0b0b0b;
}
.mlg-viewer__counter { margin: 0; color: #aaa69f; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mlg-viewer button { border: 1px solid #4a4a4a; border-radius: 0; color: #eeeae2; background: #111; font: inherit; cursor: pointer; }
.mlg-viewer button:hover,
.mlg-viewer button:focus { border-color: #b4474d; color: #fff; }
.mlg-viewer__zoom-controls { display: flex; gap: .35rem; }
.mlg-viewer__zoom-controls button { min-width: 2.5rem; height: 2.25rem; padding: 0 .7rem; font-size: .76rem; }
.mlg-viewer__close { justify-self: end; width: 2.5rem; height: 2.5rem; padding: 0; font-size: 1.65rem !important; line-height: 1; }
.mlg-viewer__body { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) var(--mlg-viewer-panel); }
.mlg-viewer__stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #050505; }
.mlg-viewer__canvas { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.mlg-viewer__image {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: calc(100% - 8rem);
  max-height: calc(100% - 5rem);
  user-select: none;
  transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  will-change: transform;
  cursor: zoom-in;
}
.mlg-viewer__image.is-zoomed { cursor: grab; }
.mlg-viewer__image.is-dragging { cursor: grabbing; }
.mlg-viewer__arrow { position: absolute; z-index: 2; top: 50%; width: 3rem; height: 3rem; padding: 0; transform: translateY(-50%); }
.mlg-viewer__arrow--previous { left: 1rem; }
.mlg-viewer__arrow--next { right: 1rem; }
.mlg-viewer__hint { position: absolute; z-index: 2; bottom: .8rem; left: 50%; margin: 0; color: #777; font-size: .64rem; letter-spacing: .08em; transform: translateX(-50%); }
.mlg-viewer__panel { min-height: 0; padding: 2rem; overflow: auto; border-left: 1px solid #393939; background: #0d0d0d; }
.mlg-viewer__concert { margin: 0 0 2rem; padding: 0 0 1.4rem; border-bottom: 1px solid #393939; }
.mlg-viewer__artist { margin: 0 0 .3rem; color: #eeeae2; font-family: Georgia, 'Times New Roman', serif; font-size: 1.45rem; }
.mlg-viewer__concert-meta { margin: 0; color: #b4474d; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mlg-viewer__title { margin: 0 0 1rem !important; color: #eeeae2; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.8rem, 3vw, 2.6rem) !important; font-weight: 400; line-height: 1; }
.mlg-viewer__description { color: #c4c0b8; font-size: .92rem; }
.mlg-viewer__description:empty::before { content: 'Description à venir.'; color: #777; font-style: italic; }

.mlg-editor-panel { margin: 2.5rem -2rem -2rem; padding: 2rem; border-top: 1px solid #493033; background: #130e0f; }
.mlg-editor-panel__eyebrow { margin: 0 0 .35rem; color: #b4474d; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.mlg-editor-panel h3 { margin: 0 0 1.25rem; color: #eeeae2; font-family: Georgia, 'Times New Roman', serif; font-size: 1.5rem; font-weight: 400; }
.mlg-editor-panel__list { max-height: 15rem; overflow: auto; }
.mlg-editor-panel__list ol { margin: 0; padding: 0; list-style: none; }
.mlg-editor-panel__list li { padding: 1rem 0; border-top: 1px solid #392b2d; }
.mlg-editor-panel__text p { margin: 0 0 .4rem; color: #ddd9d1; font-size: .85rem; }
.mlg-editor-panel__meta,
.mlg-editor-panel__empty { margin: 0; color: #8e8982; font-size: .67rem; letter-spacing: .05em; }
.mlg-editor-panel form { margin: 1.25rem 0 0; }
.mlg-editor-panel label { display: block; margin: 0 0 .45rem; color: #aaa69f; font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mlg-editor-panel textarea { display: block; box-sizing: border-box; width: 100%; padding: .75rem; resize: vertical; border: 1px solid #493a3c; border-radius: 0; color: #eeeae2; background: #0b0b0b; font: inherit; font-size: .85rem; }
.mlg-editor-panel textarea:focus { border-color: #b4474d; outline: none; }
.mlg-editor-panel__actions { display: flex; align-items: center; gap: .8rem; margin-top: .65rem; }
.mlg-editor-panel__actions button { padding: .65rem .85rem; border-color: #7d363a; color: #d75b63; font-size: .72rem; }
.mlg-editor-panel__status { color: #aaa69f; font-size: .7rem; }
.mlg-description-form { padding-top: 1.25rem; border-top: 1px solid #392b2d; }

body.mlg-viewer-open { overflow: hidden; }

@media screen and (max-width: 1020px) {
  .mlg-photo-gallery .mlg-native-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root { --mlg-viewer-panel: min(24rem, 38vw); }
}

@media screen and (max-width: 760px) {
  .mlg-photo-gallery .mlg-native-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mlg-viewer__dialog { grid-template-rows: 3.6rem minmax(0, 1fr); }
  .mlg-viewer__toolbar { padding: 0 .65rem; }
  .mlg-viewer__counter { font-size: .6rem; }
  .mlg-viewer__zoom-controls button { min-width: 2.15rem; height: 2.1rem; padding: 0 .45rem; }
  .mlg-viewer__body { display: block; overflow: auto; }
  .mlg-viewer__stage { height: 60vh; min-height: 22rem; }
  .mlg-viewer__panel { overflow: visible; border-top: 1px solid #393939; border-left: 0; }
  .mlg-viewer__image { max-width: calc(100% - 4rem); max-height: calc(100% - 4rem); }
  .mlg-viewer__arrow { width: 2.5rem; height: 2.5rem; }
  .mlg-viewer__arrow--previous { left: .35rem; }
  .mlg-viewer__arrow--next { right: .35rem; }
  .mlg-viewer__hint { display: none; }
}