/* Lightbox des réalisations */
body.lightbox-open { overflow: hidden; }
[data-lightbox] { cursor: zoom-in; }
[data-lightbox]:after { background: var(--clay); bottom: 1rem; color: #fff; content: '+'; font-family: Arial, sans-serif; font-size: 1.5rem; height: 2.35rem; line-height: 2.2rem; position: absolute; right: 1rem; text-align: center; transform: translateY(.5rem); transition: opacity .25s ease, transform .25s ease; width: 2.35rem; z-index: 3; }
[data-lightbox]:hover:after, [data-lightbox]:focus:after { transform: translateY(0); }
[data-lightbox]:focus-visible { outline: 3px solid var(--clay); outline-offset: -3px; }

.lightbox-overlay { align-items: center; background: rgba(10, 18, 22, .94); display: flex; inset: 0; justify-content: center; opacity: 0; padding: 4rem 6rem; pointer-events: none; position: fixed; transition: opacity .25s ease, visibility .25s ease; visibility: hidden; z-index: 12000; }
.lightbox-overlay[aria-hidden="false"] { opacity: 1; pointer-events: auto; visibility: visible; }
.lightbox-frame { max-height: 100%; max-width: min(84vw, 110rem); position: relative; transform: translateY(.75rem) scale(.985); transition: transform .3s ease; }
.lightbox-overlay[aria-hidden="false"] .lightbox-frame { transform: translateY(0) scale(1); }
.lightbox-image { box-shadow: 0 1.5rem 5rem rgba(0,0,0,.45); display: block; max-height: calc(100vh - 8rem); max-width: 100%; object-fit: contain; }
.lightbox-caption { color: rgba(255,255,255,.78); font-family: "Raleway", Helvetica, sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .1em; line-height: 1.5; margin: 1rem 0 0; text-align: center; text-transform: uppercase; }
.lightbox-close, .lightbox-nav { background: transparent; border: 0; color: #fff; cursor: pointer; padding: 0; position: absolute; }
.lightbox-close { font-family: Arial, sans-serif; font-size: 3rem; font-weight: 200; line-height: 1; right: 1.7rem; top: 1.2rem; }
.lightbox-nav { font-size: 2.4rem; height: 4rem; line-height: 1; top: calc(50% - 2rem); transition: color .2s ease, transform .2s ease; width: 3rem; }
.lightbox-nav:hover, .lightbox-nav:focus-visible, .lightbox-close:hover, .lightbox-close:focus-visible { color: var(--clay); }
.lightbox-previous { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-previous:hover { transform: translateX(-.2rem); }
.lightbox-next:hover { transform: translateX(.2rem); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid var(--clay); outline-offset: .3rem; }

@media screen and (max-width: 736px) {
  .lightbox-overlay { padding: 3.5rem 1rem 2rem; }
  .lightbox-frame { max-width: 100%; }
  .lightbox-image { max-height: calc(100vh - 7rem); }
  .lightbox-nav { background: rgba(10,18,22,.6); font-size: 1.8rem; height: 3rem; top: calc(50% - 1.5rem); width: 2.4rem; }
  .lightbox-previous { left: .25rem; }
  .lightbox-next { right: .25rem; }
  .lightbox-close { font-size: 2.5rem; right: 1rem; top: .65rem; }
}