:root{ 
  --h:72vh; 
  --persp:1600px;
  --reflection-intensity: 0.3;
  --reflection-color: #ffffff;
  --spacing: 1.2;
  --angle: 60deg;
  --depth: 260px;
  --falloff: 0.12;
  --card-w: clamp(180px, 22vw, 320px);
  --card-h: clamp(240px, 30vw, 400px);
  --radius: 12px;
}

/* Styles communs - GARDER object-fit: cover pour le coverflow */
.cflow{ position:relative; width:100%; height:var(--h); overflow:hidden; background:#111; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; perspective:var(--persp); }
.carousel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotateY(0deg); transform-style:preserve-3d; will-change:transform; }
.card{ position:absolute; border-radius:20px; overflow:hidden; box-shadow:0 18px 42px rgba(0,0,0,.55); background:#000; display:flex; align-items:center; justify-content:center; transform-style:preserve-3d; opacity:1 !important; cursor: pointer; }

/* IMPORTANT: Garder object-fit: cover pour le coverflow */
.media{ 
  width: 100%;
  height: 100%;
  object-fit: cover; /* RESTE EN COVER pour le coverflow */
  display: block;
}

.embed{ width:100%; height:100%; position:relative; }
.embed iframe{ width:100%; height:100%; border:none; position:absolute; top:0; left:0; }
.titles{ position:absolute; inset:0; z-index:10; pointer-events:none; }
.title{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; color:#fff; text-transform:uppercase; font-weight:900; letter-spacing:.04em; text-shadow:0 8px 24px rgba(0,0,0,.55); font-size:clamp(2.6rem,8vw,7rem); opacity:0; cursor: pointer; }
.title.show{ opacity:1; }
.title-link{ pointer-events:auto; text-decoration:none; display:block; }
.title-link .title{ transition: all 0.3s ease; cursor:pointer; }
.title-link:hover .title{ color:#4facfe; text-shadow:0 8px 24px rgba(79, 172, 254, 0.4); transform:translate(-50%,-50%) scale(1.05); }

/* Style CoverFlow 3D Circulaire */
.cflow-coverflow .carousel{ width:min(78vw,1100px); height:min(64vh,680px); }
.cflow-coverflow .card{ width:46%; height:62%; left:27%; top:19%; }

/* Style iTunes amélioré avec effet 3D centré */
.cflow-itunes .stage {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.cflow-itunes .carousel{ 
  width: min(1200px, 96vw);
  height: min(75vh, 600px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  user-select: none;
  touch-action: pan-y;
}

.cflow-itunes .card{
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--radius);
  overflow: hidden;
  backface-visibility: hidden;
  transform-origin: center center;
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
  will-change: transform, filter;
  transition: all 0.45s cubic-bezier(.22,.61,.36,1);
  /* Taille par défaut pour les cartes latérales - format rectangle */
  --card-w: clamp(180px, 22vw, 320px);
  --card-h: clamp(240px, 30vw, 400px);
}

/* Carte centrale plus grande et rectangulaire */
.cflow-itunes .card.is-center {
  --card-w: clamp(280px, 35vw, 500px);
  --card-h: clamp(360px, 45vw, 650px);
  z-index: 10;
}

/* IMPORTANT: Garder object-fit: cover pour le coverflow iTunes */
.cflow-itunes .card .media,
.cflow-itunes .card .embed,
.cflow-itunes .card .embed iframe {
  width: 100%;
  height: 100%;
  object-fit: cover; /* RESTE EN COVER pour le coverflow */
  display: block;
}

/* Effet de reflet pour iTunes */
.cflow-itunes .card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -100%;
  height: 100%;
  background: inherit;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,.45), rgba(255,255,255,0));
  mask-image: linear-gradient(to bottom, rgba(255,255,255,.45), rgba(255,255,255,0));
  opacity: var(--reflection-intensity);
  pointer-events: none;
  border-radius: var(--radius);
}

/* Titre superposé sur la carte centrale */
.cflow-itunes .card-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 2rem);
  text-shadow: 0 6px 20px rgba(0,0,0,.65);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  color: #fff;
  z-index: 2;
  width: 100%;
  padding: 0 20px;
}

.cflow-itunes .card.is-center .card-title {
  opacity: 1;
}

/* Effet de surbrillance au survol */
.cflow-itunes .card:hover {
  transform: scale(1.15) !important;
  z-index: 20;
  box-shadow: 
    0 25px 60px rgba(0,0,0,0.7),
    0 2px 0 rgba(255,255,255,0.3) inset;
}

/* Focus pour accessibilité */
.cflow-itunes .stage:focus {
  outline: 2px solid #3ea6ff;
  outline-offset: 6px;
  border-radius: 10px;
}

/* Lightbox / Plein écran - UNIQUEMENT ICI object-fit: contain */
.cflow-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.98);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.cflow-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.cflow-lightbox-content {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8);
  transform: scale(0.7) translateY(20px);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.cflow-lightbox.active .cflow-lightbox-content {
  transform: scale(1) translateY(0);
}

.cflow-lightbox-media-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px;
}

/* IMPORTANT: UNIQUEMENT dans la lightbox - taille réelle avec contain */
.cflow-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* SEULEMENT ICI pour la lightbox */
  display: block;
}

.cflow-lightbox-video {
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain; /* SEULEMENT ICI pour la lightbox */
}

.cflow-lightbox-iframe {
  width: 80vw;
  height: 80vh;
  max-width: 1200px;
  max-height: 800px;
  border: none;
}

.cflow-lightbox-close {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: white;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.cflow-lightbox-close:hover {
  background: rgba(255, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.1) rotate(90deg);
}

.cflow-lightbox-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  color: white;
  padding: 80px 30px 30px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* Contrôles pour la navigation lightbox */
.cflow-lightbox-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  transform: translateY(-50%);
  z-index: 1000;
}

.cflow-lightbox-prev,
.cflow-lightbox-next {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.cflow-lightbox-prev:hover,
.cflow-lightbox-next:hover {
  background: rgba(79, 172, 254, 0.8);
  border-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}

/* Animation de pulse pour indiquer que c'est cliquable */
@keyframes pulse-gentle {
  0% { box-shadow: 0 18px 42px rgba(0,0,0,.55); }
  50% { box-shadow: 0 18px 42px rgba(79, 172, 254, 0.3); }
  100% { box-shadow: 0 18px 42px rgba(0,0,0,.55); }
}

.cflow .card {
  animation: pulse-gentle 3s infinite;
}

.cflow .card:hover {
  animation: none;
}

/* Indicateur de chargement */
.cflow-lightbox-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #4facfe;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 1000;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 768px){
  .cflow-coverflow .carousel{ width:92vw; height:62vh; }
  .cflow-coverflow .card{ width:82%; left:9%; height:58%; top:21%; }
  
  .cflow-itunes .carousel{ 
    width: 95vw;
    height: 60vh;
  }
  
  .cflow-itunes .card{
    --card-w: clamp(140px, 25vw, 240px);
    --card-h: clamp(180px, 33vw, 320px);
  }
  
  .cflow-itunes .card.is-center {
    --card-w: clamp(200px, 40vw, 360px);
    --card-h: clamp(260px, 52vw, 480px);
  }
  
  .cflow-lightbox-content {
    max-width: 98vw;
    max-height: 98vh;
    border-radius: 4px;
  }
  
  .cflow-lightbox-close {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .cflow-lightbox-title {
    padding: 60px 20px 20px;
    font-size: 1.4rem;
  }
  
  .cflow-lightbox-nav {
    padding: 0 15px;
  }
  
  .cflow-lightbox-prev,
  .cflow-lightbox-next {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
  
  .cflow-lightbox-image {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .cflow-lightbox-media-container {
    padding: 10px;
  }
}

@media (max-width: 480px){
  .cflow-itunes .card{
    --card-w: clamp(120px, 28vw, 200px);
    --card-h: clamp(160px, 37vw, 260px);
  }
  
  .cflow-itunes .card.is-center {
    --card-w: clamp(160px, 45vw, 280px);
    --card-h: clamp(200px, 58vw, 360px);
  }
}