/* =====================================================
   ALIMAGE.COM - serie.css v8
   Photos = 100vh - header - credits - footer
   ===================================================== */
   

/* ----- LAYOUT ----- */
.serie-wrapper {
  display: flex;
  flex-direction: column;
}

.serie-photos-row {
  display: flex;
  position: relative;
  height: min(550px, calc(100vh - var(--header-h) - 20px - var(--credits-h) - var(--footer-h) - 8px));
  overflow: hidden;
  gap: 0;
}

/* ----- SIDEBAR wrapper (pour deco_raye) ----- */
#sidebar-wrapper {
  position: relative;
  flex-shrink: 0;
  display: flex;

}



/* ----- SIDEBAR ----- */
#sidebar-series {
  width: 122px;
  min-width: 122px;
  background-color: #0e0e0e;
  border-right: none;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(2, 60px);
  gap: 0;
  padding: 1px 0 1px 1px;
  height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#sidebar-series::-webkit-scrollbar { display: none; }

#sidebar-series a { display: block; flex-shrink: 0; }

#sidebar-series img {
  width: 60px; height: 60px;
  object-fit: cover;
  opacity: 0.55;
  border: 1px solid transparent;
  transition: opacity var(--transition), border-color var(--transition);
}

#sidebar-series a:hover img,
#sidebar-series a.actif img { opacity: 1; border-color: var(--gold-clair); }

/* ----- ZONE PHOTOS : navigation par flèches ----- */
#zone-photos {
  flex: 1;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  align-items: flex-start;
  background: var(--noir);
  gap: 1px;
  height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
}

#zone-photos::-webkit-scrollbar { display: none; }

.photo-serie {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  cursor: default;
  transition: opacity var(--transition);
}

.photo-serie:hover { opacity: 1; }

/* ----- FLÈCHES DE NAVIGATION ----- */
.fleche-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--blanc);
  font-size: 64px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.25s ease;
  padding: 0 16px;
  z-index: 20;
  text-shadow: 0 0 20px rgba(0,0,0,0.8);
  pointer-events: all;
  -moz-appearance: none;
  appearance: none;
}

#fleche-gauche { left: var(--sidebar-w); }
#fleche-droite { right: 0; }

.fleche-nav:hover { opacity: 1; }

/* ----- CREDITS ----- */
#credits-serie {
  height: var(--credits-h);
 background: /*url('/alimage_refonte/images/deco/deco_raye.gif') no-repeat 83px center,*/
            url('../images/deco/bg_bas.png') repeat-x left top;
  background-color: #0e0e0e;
  border-top: 1px solid var(--gris-sombre);
  padding: 0 14px 0 calc(var(--sidebar-w) + 14px);
  display: flex;
  align-items: center;
  font-family: var(--font);
  font-size: 12px;
  color: var(--gris-clair);
  letter-spacing: 1px;
  gap: 4px;
  /* s'étend sur toute la largeur, sidebar incluse */
  margin-left: 0;
  width: 100%;

}

#credits-serie .credits-fleche {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--gold);
  margin-right: 5px;
  flex-shrink: 0;
  align-self: center;
}

#credits-serie strong {
  color: var(--gold-clair);
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 11px;
  margin-right: 8px;
}

#credits-serie .puce {
  display: inline-block;
  align-self: center;
  width: 5px;
  min-width: 5px;
  height: 5px;
  min-height: 5px;
  background: var(--gold);
  border-radius: 50%;
  margin: 0 3px;
  flex-shrink: 0;
}

#credits-serie .credit-item {
  display: inline-flex;
  align-items: center;
}

#credits-serie .puce {
  margin: 0 8px;
}

/* ----- TIROIR SERIES (mobile) ----- */
#btn-series {
  display: none;
  position: fixed;
  bottom: 20px; right: 16px;
  z-index: 50;
  background: var(--noir-2);
  border: 1px solid var(--gold-clair);
  color: var(--gold-clair);
  font-family: var(--font);
  font-size: 11px; letter-spacing: 1.5px;
  padding: 10px 16px; cursor: pointer;
}

#btn-series:hover { background: var(--gold-sombre); }

#tiroir-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.75); z-index: 60;
}
#tiroir-overlay.visible { display: block; }

#tiroir-series {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 70;
  background: var(--noir-2);
  border-top: 1px solid var(--gris-sombre);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 65vh; overflow-y: auto;
  padding: 16px;
}

#tiroir-series.ouvert { transform: translateY(0); }

#tiroir-series h2 {
  font-size: 10px; letter-spacing: 2px;
  color: var(--gold-clair);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--gris-sombre);
}

#tiroir-series .grille-series {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 4px;
}

#tiroir-series .grille-series a { display: block; }

#tiroir-series .grille-series img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  opacity: 0.6; border: 1px solid transparent;
  transition: opacity var(--transition), border-color var(--transition);
}

#tiroir-series .grille-series a:hover img,
#tiroir-series .grille-series a.actif img { opacity: 1; border-color: var(--gold-clair); }

/* ----- LIGHTBOX ----- */
#lightbox {
  display: none; position: fixed; inset: 0;
  z-index: 200; background: rgba(0,0,0,0.96);
  align-items: center; justify-content: center;
}
#lightbox.visible { display: flex; }
#lightbox-img { max-width: 92vw; max-height: 92vh; object-fit: contain; }

#lightbox-close {
  position: absolute; top: 20px; right: 28px;
  background: none; border: none;
  color: var(--gold-clair); font-size: 32px;
  cursor: pointer; opacity: 0.8; line-height: 1;
}
#lightbox-close:hover { opacity: 1; }

#lightbox-prev, #lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: var(--gold-clair); font-size: 48px;
  cursor: pointer; padding: 20px; opacity: 0.7; line-height: 1;
}
#lightbox-prev:hover, #lightbox-next:hover { opacity: 1; }
#lightbox-prev { left: 10px; }
#lightbox-next { right: 10px; }

/* ----- RESPONSIVE ----- */
@media (max-width: 900px) {
  .serie-wrapper { flex-direction: column; height: auto; overflow: visible; }
  .serie-photos-row { flex-direction: column; height: auto; overflow: visible; }
  #sidebar-series { display: none; }
  #sidebar-wrapper { display: none; }

  #zone-photos {
    flex-direction: column;
    overflow-x: hidden; overflow-y: visible;
    height: auto; align-items: stretch;
    gap: 3px;
  }

  .photo-serie { width: 100%; height: auto; cursor: default; }
  #credits-serie { 
    margin-left: 0; 
    font-size: 11px; 
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 10px;
    height: auto;
    background: var(--noir-2);
  }
  #credits-serie .puce { display: none; }
  #credits-serie strong,
  #credits-serie span:not(.credits-fleche):not(.puce) { display: block; }
  #credits-serie .credit-item { display: block; }
  .fleche-nav { display: none; }
  #btn-series { display: block; }
}

/* ----- Message de chargement AJAX ----- */
.photos-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--gris-mid);
  font-size: 11px;
  letter-spacing: 2px;
  font-family: var(--font);
}