/* ===========================================================
   Carrousel photo en 3D — cylindre d'images qu'on fait tourner à la souris
   ou au doigt, avec inertie au relâchement, et agrandissement au clic.
   Portage en JS/CSS natifs d'un composant React/Framer Motion : même
   mécanique (cylindre de cartes en rotateY + translateZ, glisser pour
   tourner, vitesse de relâchement prolongée puis amortie), sans dépendance.
   =========================================================== */

.carousel3d { position: relative; }

.carousel3d-stage {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1000px;
  touch-action: pan-y;
  cursor: grab;
  border-radius: 18px;
}
.carousel3d-stage.is-dragging { cursor: grabbing; }

.carousel3d-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 16, 28, 0.7);
  border: 1px solid var(--edge);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.carousel3d-nav:hover { background: rgba(255,255,255,0.14); border-color: var(--edge-strong, var(--edge)); transform: translateY(-50%) scale(1.06); }
.carousel3d-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carousel3d-prev { left: 0.6rem; }
.carousel3d-next { right: 0.6rem; }
@media (max-width: 640px) {
  .carousel3d-nav { width: 40px; height: 40px; }
  .carousel3d-prev { left: 0.3rem; }
  .carousel3d-next { right: 0.3rem; }
}

.carousel3d-track {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.carousel3d-card {
  /* Carte carrée (comme le composant de référence, aspect-square) : la
     largeur ET la hauteur sont posées en JS (toutes deux = faceWidth), et
     top/left centrent la carte sur le milieu de la scène avant que la
     rotation ne l'écarte. Padding uniforme sur les 4 côtés (p-2 dans le
     composant d'origine) — pas seulement horizontal. */
  position: absolute;
  top: 50%; left: 50%;
  padding: 8px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-user-drag: none;
}
.carousel3d-card-inner {
  /* Ni bordure ni ombre : le composant de référence pose juste un fond
     neutre (visible pendant le chargement) derrière une image aux coins
     arrondis, à plat — pas de relief ajouté. */
  position: relative;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
}
.carousel3d-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: 14px;
  transition: filter 0.3s ease;
}
/* La légende n'apparaît pas sur la vignette (photo nue, comme l'original) ;
   elle reste accessible aux lecteurs d'écran et s'affiche dans la
   visionneuse plein écran une fois la photo agrandie. */
.carousel3d-card .carousel3d-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.carousel3d-hint {
  text-align: center; margin-top: 0.9rem;
  font-size: 0.76rem; color: var(--ink-faint);
}

/* --- Visionneuse plein écran --- */
.carousel3d-lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.5rem;
  background: rgba(2,8,15,0.88);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.carousel3d-lightbox.is-open { opacity: 1; visibility: visible; }
.carousel3d-lightbox img {
  max-width: min(92vw, 1000px); max-height: 85vh;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), opacity 0.3s ease;
}
.carousel3d-lightbox.is-open img { transform: scale(1); opacity: 1; }
.carousel3d-lightbox-cap {
  position: absolute; left: 0; right: 0; bottom: 1.4rem;
  text-align: center;
  font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.82);
}
.carousel3d-lightbox-close {
  position: absolute; top: 1.2rem; right: 1.4rem;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--edge); background: rgba(255,255,255,0.08); color: #fff;
  font-size: 1.3rem; line-height: 1;
}
.carousel3d-lightbox-close:hover { background: rgba(255,255,255,0.16); }

@media (max-width: 640px) {
  .carousel3d-stage { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel3d-card img, .carousel3d-lightbox, .carousel3d-lightbox img { transition: none; }
}