/* ============================================================
   SECTION POINTS MARQUANTS  (mobile-first)
============================================================ */
.section-points {
  padding-bottom: 40px;
  background-color: #efece9;
}

.points-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  overflow: hidden;
}

.points-card .heading-m {
  text-align: center;
  width: 100%;
}

/* Desktop grid (hidden on mobile via .desktop-only) */
.points-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.point-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 200px;
}

.point-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid #9f9a7c;
  border-radius: 30.076px;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #9f9a7c;
  flex-shrink: 0;
}

/* ============================================================
   Mobile carousel – 1 point at a time + arrows
============================================================ */
.points-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.point-item--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: center;
}

.points-carousel-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
}

/* ============================================================
   POINTS  – Desktop
============================================================ */
@media (min-width: 769px) {
  .section-points {
    padding-bottom: 60px;
  }

  .points-card {
    gap: 30px;
    align-items: flex-start;
  }

  .points-card .heading-m {
    text-align: left;
  }
}

.mobile-only  { display: block !important; }
.desktop-only { display: none !important; }

@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }

  .desktop-only {
    display: block !important;
  }
}