/* Carousel photo dans une carte feed : scroll horizontal (swipe) + clic
   gauche/droite pour changer, et un indicateur de points (max ~3 visibles,
   le point actif allongé en pill, transitions animées). */

.feed-post__carousel {
  position: absolute;
  inset: 0;
}

.feed-post__slides {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.feed-post__slides::-webkit-scrollbar {
  display: none;
}

.feed-post__slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  scroll-snap-align: center;
}

/* ── Indicateur de points ──
   Centré en pur CSS (flex), sans translate JS ni fenêtre fixe : les points
   apparaissent dès le rendu et ne sont jamais coupés. Le max ~3 est obtenu en
   repliant (largeur 0) les points éloignés (distance ≥ 2). */
.feed-post__dots {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  pointer-events: none;
  z-index: 3;
}

.feed-post__dots-track {
  display: flex;
  align-items: center;
}

.feed-post__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin: 0 2.5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s ease,
    opacity 0.3s ease, background 0.3s ease;
}

/* Le point actif = pill allongée */
.feed-post__dot.is-active {
  width: 16px;
  background: #fff;
}

/* Points extrêmes de la fenêtre (distance 2) un peu plus petits */
.feed-post__dot.is-far {
  transform: scale(0.6);
}

/* Points au-delà repliés → garde au plus 5 points visibles, animé */
.feed-post__dot.is-hidden {
  width: 0;
  margin: 0;
  opacity: 0;
  transform: scale(0.4);
}