/* ============================================================
   MesLacets — Bandeaux footer (module mlfooterblocks)
   Ordre : témoignages, hr, réassurance, hr.
   Carrousel : flèches + points + auto-play, pages de 4/2/1.
   Polices Lato & Sarala : déjà auto-hébergées par le thème.
   Couleurs : marque #fd0065, cercle réassurance #f72455, hr #DADADA.
   ============================================================ */

/* ---- Séparateurs ---- */
.ml-sep {
  border: 0; border-top: 1px solid #DADADA;
  max-width: 1140px; margin: 8px auto; width: 100%;
}
/* dernier séparateur (après la réassurance) : plus d'air avant la newsletter */
.ml-reassurance + .ml-sep { margin-top: 0; margin-bottom: 28px; }

/* ---- Bandeau réassurance ---- */
.ml-reassurance { padding: 20px 16px 32px; }
.ml-reassurance__inner {
  max-width: 1140px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between;
}
.ml-reassurance__item {
  flex: 1 1 260px; display: flex; align-items: center; gap: 12px;
}
.ml-reassurance__icon {
  flex: 0 0 auto; width: 45px; height: 45px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f72455; color: #fff;
}
.ml-reassurance__icon svg { display: block; }
.ml-reassurance__title {
  font-family: "Lato", sans-serif; font-size: 20px; font-weight: 700;
  color: #222; margin: 0 0 2px; line-height: 1.15;
}
.ml-reassurance__desc {
  font-family: "Lato", sans-serif; font-size: 15px; color: #7a7a7a;
  line-height: 1.35; margin: 0;
}

/* ---- Bandeau témoignages (calé sur le carrousel natif de la home .ml-temoins) ---- */
.ml-avis { padding: 24px 16px; max-width: 1110px; margin: 0 auto; }
.ml-avis__heading {
  font-family: "Sarala", sans-serif; font-size: 27px; font-weight: 500;
  color: #fd0065; margin: 0 0 24px; text-align: left;
}

/* Carrousel : viewport masque le débordement, track translate par page */
.ml-avis__viewport { overflow: hidden; }
.ml-avis__track {
  display: flex;
  transition: transform .5s ease;
}
/* 3 cartes par page sur desktop : chaque slide = 33.333% du viewport */
.ml-avis__slide {
  flex: 0 0 33.3333%; box-sizing: border-box; padding: 0 10px;
}
.ml-avis__card {
  border: 1px solid #DADADA; border-radius: 6px; background: #fff;
  padding: 20px; height: 194px; box-sizing: border-box; overflow: hidden;
}
.ml-avis__stars { color: #fd0065; font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; }
.ml-avis__text {
  font-family: "Sarala", sans-serif; font-size: 15px; color: #232323;
  line-height: 1.5; margin: 0 0 12px;
}
.ml-avis__author {
  font-family: "Sarala", sans-serif; font-size: 14px; font-weight: 700;
  color: #232323; margin: 0;
}

/* Navigation groupée sous le carrousel : flèche – points – flèche */
.ml-avis__nav {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 18px;
}
.ml-avis__arrow {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.05); color: #fd0065; font-size: 26px;
  line-height: 26px; cursor: pointer; padding: 0; transition: background .2s;
}
.ml-avis__arrow:hover { background: rgba(0,0,0,.1); }

/* Points de pagination */
.ml-avis__dots { display: flex; gap: 8px; }
.ml-avis__dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
  background: #cfcfcf; cursor: pointer; transition: background .2s;
}
.ml-avis__dot.is-active { background: #fd0065; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .ml-avis__slide { flex-basis: 50%; }   /* 2 par page */
}
@media (max-width: 600px) {
  .ml-reassurance__inner { gap: 16px; }
  .ml-reassurance__item { flex: 1 1 100%; }
  .ml-avis__slide { flex-basis: 100%; }  /* 1 par page */
  .ml-avis__heading { font-size: 23px; }
}