/* Mobile Cards Carousel - v1.1.1 front styles */

.mcc-carousel {
  --mcc-gap: 16px;
  --mcc-peek: 56px; /* portion visible de la carte suivante */
  position: relative;
}

/* Structure générée */
.mcc-carousel .mcc-viewport {
  overflow: hidden;
  width: 100%;
}

.mcc-carousel .mcc-track {
  display: flex;
  gap: var(--mcc-gap);
  align-items: stretch;
  min-width: 100%;
}

/* Cartes */
.mcc-carousel .mcc-card {
  box-sizing: border-box;
  width: calc(100% - var(--mcc-peek));
  min-width: calc(100% - var(--mcc-peek));
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Points */
.mcc-carousel .mcc-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  user-select: none;
}
.mcc-carousel .mcc-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #8aa19a;
  opacity: .6;
  border: 0;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}
.mcc-carousel .mcc-dot.is-active {
  background: #30AF5E;
  opacity: 1;
  transform: scale(1.25);
}

/* Mobile uniquement */
@media (max-width: 768px) {
  .mcc-carousel .mcc-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-left: 12px;
    padding-right: 12px;
    margin-right: calc(-1 * 12px); /* permet le peek contre le padding du parent */
  }
  .mcc-carousel .mcc-dots { display: flex; }
}

/* Desktop/tablette: reste en grille normale */
@media (min-width: 769px) {
  .mcc-carousel .mcc-viewport { overflow: visible; }
  .mcc-carousel .mcc-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--mcc-gap);
  }
  .mcc-carousel .mcc-card {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* Scrollbar optionnelle */
.mcc-carousel .mcc-viewport::-webkit-scrollbar{ height: 8px; }
.mcc-carousel .mcc-viewport::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 4px; }