@import url('font.css');

body.isab-no-scroll { overflow: hidden; }

.isab-lightbox {
  position: fixed;
  width: 100%;
  inset: 0;
  z-index: 9999;
  display: flex;
  overflow: hidden;
  background: rgba(20,10,30, 0.85);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .5s ease, visibility 0s linear .5s;
  will-change: opacity;
}



.isab-lightbox__content {
  width: 100%;
  box-shadow: 0 0 5vw rgb(255,255,100);
  background: var(--second);
  background-image:
    linear-gradient(to right, var(--grid-color) var(--grid-stroke), transparent var(--grid-stroke)),
    linear-gradient(to bottom, var(--grid-color) var(--grid-stroke), transparent var(--grid-stroke));
  background-size: var(--grid-size) var(--grid-size);
  background-position: 0 0;
  
  padding: var(--gap);
  overflow-y: scroll;
}

.isab-lightbox img,
.isab-lightbox video{
 width: 100%;
    object-fit: contain;
    max-height: calc(80dvh - (2 * var(--gap)));
}

.isab-lightbox__txtContent{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap) 0;
  max-width: 680px;
  margin: 0 auto;
}

.isab-lightbox__txtCredit{
  font-size: 0.8em;
  display: flex;
  gap: 1em;
  flex-direction: column;
  text-align: center;
}

.isab-lightbox__taxos{
display: flex;
  gap: 1em;
  flex-direction: column;
}

.isab-lightbox__txtContent .isab-lightbox__description{
  grid-column: span 3;
}

.isab-lightbox__txtContent .isab-lightbox__description p{
  margin-bottom: 0.75em;
}

.isab-lightbox__txtContent .isab-lightbox__description p:first-child{
  text-indent: inherit;
}



.isab-lightbox__taxos a{
  padding: 2px 4px;
  font-size: 0.9em;
  background: white;
  border-radius: 100em;
}


.isab-lightbox__loading {
  text-align: center;
  padding: 3rem 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.title{
  background: rgb(240, 240, 240);
  padding: 4px 8px;
  border-radius: 100em;
  position: relative;
}

.isab-lightbox__inner--skeleton .isab-lightbox__description--skeleton {
  opacity: .7;
}

.isab-lightbox__close {
  position: absolute; right:1rem;
  background: transparent; border: 0; font-size: 2em; line-height: 1;
  cursor: pointer;
  background: rgb(240, 200, 255);
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 100em;
}

.isab-lightbox__title {
  font-size: 3.5vw;
  margin: 0 auto;
  width: fit-content;
  padding: 0.5em 0 0;
  max-width: 680px;
  text-align: center;
  line-height: 0.9em;
} 

.isab-lightbox__description {
  grid-column: span 6;
}
.isab-lightbox__credits { 
  grid-column: span 2;
}

.isab-lightbox__taxos .isab-tax-row { 
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  justify-content: center;
}

.isab-lightbox__taxos header,
.isab-lightbox__credits header{
  width: 100%;
  opacity: 0.5;
}

.isab-lightbox__credits p strong {
    text-decoration: underline;
}

.isab-lightbox__grid {
  display: grid; gap: var(--gap);
}

.isab-media-card__img, .isab-media-card__video { width: 100%; height: auto; display:block; }
.isab-front-lightbox__loading { padding: 40px; text-align: center; color: #666; }

/* Empêche l’UI native sur WebKit si jamais elle apparaît */
video::-webkit-media-controls { display: none !important; }
.media-card__video,
.isab-media-card__video {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  /* evite un saut de layout si poster absent */
  object-fit: contain;
}

@media (max-width: 640px) {
  .isab-lightbox img, 
  .isab-lightbox video{
    max-height: 80vh;
  }
}

.isab-lightbox__head{
  position: sticky;
  z-index: 999;
  width: 100%;
  top: 0;
}

/* =========================
   FADE-IN LIGHTBOX (override safe)
   ========================= */

.isab-lightbox__inner{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

.isab-lightbox__inner.is-ready{
  opacity: 1;
  transform: translateY(0);
}

/* médias injectés */
.isab-lightbox__inner .isab-media-card img,
.isab-lightbox__inner .isab-media-card video,
.isab-lightbox__inner iframe{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

/* media ready */
.isab-lightbox__inner .isab-media-card.is-media-ready img,
.isab-lightbox__inner .isab-media-card.is-media-ready video,
.isab-lightbox__inner iframe.is-media-ready{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   FADE GLOBAL LIGHTBOX
   ========================= */

.isab-lightbox.is-open{
  visibility: visible;
  pointer-events: auto;

  transition: opacity .5s ease, visibility 0s; /* visible immédiat */
  opacity: 1;
}

.isab-lightbox__box{
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

.isab-lightbox.is-open .isab-lightbox__box{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .5s; 
  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.2,.9,.2,1);
}