.shell {
  position: relative;
  width: 100%;
  max-width: 100%;        /* ✅ obéit au parent */
  aspect-ratio: 4 / 3;   /* ✅ paysage, institutionnel */
  border-radius: 20px;
  overflow: hidden;
  background: #0b1220;
}

 /* IMPORTANT : les frames doivent être superposées et masquées par défaut */
.frame{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.6s ease-in-out;
  will-change: opacity;
}

/* ✅ Frame visible (slide active) */
.frameActive{
  opacity:1;
  pointer-events:auto;
  z-index:1;
}

.carousel {
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #0f172a;
}

.track {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}

.slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.img{
  object-fit: cover;
  transform: scale(1.01);
  width:100%;
  height:100%;
  display:block;
}

.overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:space-between;
  padding:12px;
  background: linear-gradient(to top, rgba(2,6,23,.55), rgba(2,6,23,.05) 42%, rgba(2,6,23,.65));
}

.topRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

.badge, .metric{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
  font-size:12px; letter-spacing:.2px;
  backdrop-filter: blur(10px);
}

.controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

.navBtn{
  width:38px; height:38px; border-radius:999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.95);
  font-size:22px; line-height:1;
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.navBtn:hover{ background: rgba(255,255,255,0.16); }

.dots{ display:flex; align-items:center; justify-content:center; gap:7px; flex:1; }

.dot{
  width:8px; height:8px; border-radius:999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.18);
  cursor:pointer;
}

.dotActive{
  width:22px;
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.85);
}

.empty{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:18px; text-align:center;
  color: rgba(255,255,255,0.92);
}
.emptyTitle{ font-weight:700; font-size:16px; margin-bottom:8px; }
.emptyText{ font-size:13px; color: rgba(255,255,255,0.78); max-width: 46ch; }