/* ==========================================================================
   Tandem Carousel + Lightbox — tokens CSS du thème (--tc-*)
   ========================================================================== */

/* ---- Carousel ---------------------------------------------------------- */
.tc-carousel {
  position: relative;
  margin-top: var(--tc-s5);
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
  border: var(--tc-border);
}

.tc-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tc-carousel__track::-webkit-scrollbar { display: none; }

.tc-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
}

/* Bouton trigger lightbox — recouvre toute la slide */
.tc-carousel__trigger {
  display: block; width: 100%;
  background: none; border: 0; padding: 0;
  cursor: zoom-in;
}
.tc-carousel__trigger:focus-visible {
  outline: 3px solid var(--tc-teal);
  outline-offset: -3px;
}

.tc-carousel__img {
  width: 100%; display: block;
  height: 280px; object-fit: cover;
}
@media (min-width: 48em) { .tc-carousel__img { height: 440px; } }
@media (min-width: 64em) { .tc-carousel__img { height: 520px; } }

/* Flèches carousel */
.tc-carousel__btn {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,248,245,.88);
  color: var(--tc-ink);
  border: var(--tc-border); border-radius: var(--tc-radius);
  font-size: 1.1rem; cursor: pointer;
  transition: background .12s;
}
.tc-carousel__btn:hover  { background: var(--tc-paper); }
.tc-carousel__btn:active { opacity: .7; }
.tc-carousel__btn--prev  { left: var(--tc-s3); }
.tc-carousel__btn--next  { right: var(--tc-s3); }

/* Dots */
.tc-carousel__dots {
  display: flex; justify-content: center; align-items: center;
  gap: var(--tc-s2); padding: var(--tc-s3);
  background: var(--tc-paper); border-top: var(--tc-border);
}
.tc-carousel__dot {
  width: 10px; height: 10px; padding: 0;
  border-radius: 50%;
  border: 2px solid var(--tc-ink);
  background: transparent;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.tc-carousel__dot.is-active             { background: var(--tc-ink); transform: scale(1.25); }
.tc-carousel__dot:hover:not(.is-active) { background: var(--tc-ink-soft); }

/* =========================================================================
   LIGHTBOX
   ======================================================================= */
.tc-lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  align-items: center; justify-content: center;
}
.tc-lightbox.is-open { display: flex; }

/* Backdrop */
.tc-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(22,21,26,.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: tc-lb-fade .2s ease;
}

/* Cadre image */
.tc-lightbox__frame {
  position: relative; z-index: 1;
  max-width: 92vw; max-height: 88vh;
  display: flex; align-items: center; justify-content: center;
  animation: tc-lb-scale .22s ease;
}
.tc-lightbox__frame.is-loading::after {
  content: "";
  display: block; width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tc-lb-spin .7s linear infinite;
}

.tc-lightbox__img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain; display: block;
  border-radius: var(--tc-radius-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}

/* Bouton fermer */
.tc-lightbox__close {
  position: absolute; top: var(--tc-s4); right: var(--tc-s4); z-index: 2;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,248,245,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--tc-radius);
  cursor: pointer; transition: background .15s;
}
.tc-lightbox__close:hover { background: rgba(251,248,245,.25); }

/* Flèches lightbox */
.tc-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,248,245,.12);
  color: #fff; font-size: 1.3rem;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--tc-radius);
  cursor: pointer; transition: background .15s;
}
.tc-lightbox__nav:hover         { background: rgba(251,248,245,.25); }
.tc-lightbox__nav--prev         { left: var(--tc-s4); }
.tc-lightbox__nav--next         { right: var(--tc-s4); }
@media (max-width: 47.99em) {
  .tc-lightbox__nav--prev { left: var(--tc-s2); }
  .tc-lightbox__nav--next { right: var(--tc-s2); }
}

/* Compteur */
.tc-lightbox__counter {
  position: absolute; bottom: var(--tc-s4); left: 50%;
  transform: translateX(-50%); z-index: 2;
  color: rgba(255,255,255,.75);
  font-size: var(--tc-step--1); font-family: var(--tc-font-body);
  background: rgba(22,21,26,.4); padding: .2em .7em;
  border-radius: 999px; margin: 0;
}

/* Bloquer le scroll du body quand lightbox ouverte */
body.tc-lightbox-open { overflow: hidden; }

/* Animations */
@keyframes tc-lb-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tc-lb-scale { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes tc-lb-spin  { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .tc-lightbox__backdrop,
  .tc-lightbox__frame { animation: none; }
}