/* ============================================================
   memoireproducts — Slider produits homepage
   ============================================================ */

.mp-section {
  padding: 20px 0;
}

/* ── Tabs ────────────────────────────────────────────────── */
.mp-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.mp-tab {
  padding: 0.5rem 1.25rem;
  border-radius: 5px;
  border: 2px solid var(--c-primary, #002450);
  color: var(--c-primary, #002450);
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-body, 'Merriweather', Georgia, serif);
  cursor: pointer;
  background: none;
  transition: background-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.mp-tab:hover,
.mp-tab.active {
  background-color: var(--c-primary, #002450);
  color: #fff;
}

/* ── Slider wrapper ──────────────────────────────────────── */
.mp-slider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mp-track-wrapper {
  flex: 1;
  overflow: hidden;
}

.mp-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* ── Flèches ─────────────────────────────────────────────── */
.mp-arrow {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid #002450;
  background: #fff;
  color: #002450;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}

.mp-arrow:hover {
  background-color: #002450;
  color: #fff;
}

.mp-arrow:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* ── Dots ────────────────────────────────────────────────── */
.mp-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.mp-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s;
}

.mp-dot.active {
  background-color: #002450;
}

/* ── Cartes produits ─────────────────────────────────────── */
.mp-card {
  flex: 0 0 calc(25% - 1.125rem); /* 4 colonnes par défaut */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 36, 80, 0.12);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.mp-card:hover {
  box-shadow: 0 4px 20px rgba(0, 36, 80, 0.12);
}

.mp-card-img-link {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f8f7f5;
}

.mp-card-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.mp-card:hover .mp-card-img-link img {
  transform: scale(1.04);
}

.mp-card-body {
  padding: 8px;
  flex: 1 1 auto; /* absorbe la hauteur en trop (cartes étirées) → le bouton reste collé en bas, plus de vide sous le CTA */
}

.mp-card-title {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
  color: #002450;
  line-height: 1.4;
  text-align: center;
}

.mp-card-title a {
  color: inherit;
  text-decoration: none;
}

.mp-card-title a:hover {
  color: #b69c42;
}

.mp-card-price {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: #b69c42;
  text-align: center;
}
.mp-card-delivery {
  text-align: center;
  font-size: 0.72rem;
  color: #555;
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mp-card-delivery i { color: var(--c-btn-main, #b69c42); margin-right: 0.25rem; }

/* Grille pour la page recherche (réutilise les cartes du slider) */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 1rem 0 2rem;
}
.mp-grid .mp-card { flex: none; }
.mp-search .products-count { color: #666; margin: 0 0 1rem; }
.mp-search-empty { text-align: center; padding: 2.5rem 1rem; }
.mp-search-empty p { color: #666; margin-bottom: 1.2rem; font-size: 1.05rem; }
@media (max-width: 900px) { .mp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .mp-grid { grid-template-columns: 1fr; } }

.mp-search-more { text-align: center; margin: 1rem 0 2rem; }
.mp-search-pager { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin: 1rem 0 2.5rem; }
.mp-search-pager .mp-page {
  min-width: 38px; height: 38px; border: 1px solid #cfcfcf; background: #fff;
  border-radius: 6px; cursor: pointer; font-family: 'Merriweather', Georgia, serif;
  color: var(--c-primary, #002450);
}
.mp-search-pager .mp-page:hover { border-color: var(--c-btn-main, #c8a45a); }
.mp-search-pager .mp-page.is-active { background: var(--c-primary, #002450); color: #fff; border-color: var(--c-primary, #002450); }

.mp-card-stars {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: #b69c42;
  width: fit-content;   /* largeur = 5 étoiles seules (le compteur est hors flux) */
  margin: 0 auto;        /* → 5 étoiles toujours centrées, avec ou sans avis */
  position: relative;
}
.mp-card-stars i {
  width: 1em;
  text-align: center;
  display: inline-block;
}

.mp-card-stars-nb {
  position: absolute;
  left: 100%;
  margin-left: 0.25rem;
  white-space: nowrap;
  font-size: 0.75rem;
  color: #666;
}

.mp-card-actions {
  padding: 0 1rem 1rem;
}

.mp-card-actions .btn {
  width: 100%;
  text-align: center;
}

.mp-empty {
  padding: 2rem;
  text-align: center;
  color: #666;
  font-style: italic;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1199px) {
  .mp-card { flex-basis: calc(33.333% - 1rem); }
}

@media (max-width: 899px) {
  .mp-card { flex-basis: calc(50% - 0.75rem); }
}

@media (max-width: 559px) {
  .mp-card { flex-basis: calc(100% - 0rem); }
  /* Flèches gardées sur mobile (le swipe seul déroutait → retour au 1er) : plus petites, collées aux bords */
  .mp-slider { gap: 0.3rem; }
  .mp-arrow { display: flex; width: 2rem; height: 2rem; font-size: 1.2rem; border-width: 1px; }
  /* Image plafonnée en hauteur SANS recadrage (image entière, centrée) */
  .mp-card-img-link { aspect-ratio: auto; height: auto; text-align: center; }
  .mp-card-img-link img { width: auto; height: auto; max-width: 100%; max-height: 40vh; object-fit: contain; display: inline-block; }
}

/* Resserre titre ↔ filtres */
.mp-section .section-title { margin-bottom: 1rem; }
.mp-tabs { margin-top: 0; }

/* ── Bandeau de stock (haut-droite de l'image) ── */
.mp-card-img-link { position: relative; display: block; }
.mp-stock-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: 0.72rem; font-weight: 700; line-height: 1;
  padding: 5px 9px; border-radius: 5px; color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); white-space: nowrap;
}
.mp-stock-low { background: #b69c42; }              /* doré : derniers exemplaires */
.mp-stock-out { background: #b23b3b; }              /* rouge : rupture */
.mp-btn-disabled {
  background: #c4c4c4 !important; border-color: #c4c4c4 !important;
  cursor: not-allowed; pointer-events: none; opacity: .9;
}