/* ============================================================
   ML Info Blocks — Feuille de style de base
   Bandeau de réassurance sous le slider (charte Marketliquide)
   ============================================================ */

/* Conteneur général : centré, pleine largeur du site */
.ml-infoblocks-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 25px auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* Rangée des blocs : 3 colonnes égales, espacées */
.ml-infoblocks-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

/* Un bloc : icône à gauche + texte à droite, fond gris clair */
.ml-infoblock {
  flex: 1 1 0;                       /* les 3 blocs se partagent la largeur */
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: #f2f2f2;               /* fond gris clair (comme le bandeau actuel) */
  border-radius: 4px;
  box-sizing: border-box;
}

/* Option ombre portée (activable dans le BO) */
.ml-infoblock.ml-shadow {
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Zone icône : cercle gris avec l'icône SVG au centre */
.ml-infoblock__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 50%;
}
.ml-infoblock__icon svg {
  width: 26px;
  height: 26px;
}
/* Icône personnalisée (image uploadée) */
.ml-infoblock__icon .ml-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Zone texte */
.ml-infoblock__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Titre (la taille et la couleur sont injectées dynamiquement par le module) */
.ml-infoblock__title {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Sous-titre */
.ml-infoblock__subtitle {
  margin: 4px 0 0;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.ml-infoblock__subtitle a {
  color: inherit;
  text-decoration: none;
}
.ml-infoblock__subtitle a:hover {
  text-decoration: underline;
}

/* Bannière optionnelle sous les blocs */
.ml-banner {
  margin-top: 15px;
  text-align: center;
}
.ml-banner__img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ---- Variante : textes centrés ---- */
.ml-infoblock.ml-centered {
  flex-direction: column;
  text-align: center;
  gap: 10px;
}
.ml-infoblock.ml-centered .ml-infoblock__content {
  align-items: center;
}

/* ---- Variante : sans icône (texte seul, centré) ---- */
.ml-infoblock.ml-no-icon {
  justify-content: center;
  text-align: center;
}
.ml-infoblock.ml-no-icon .ml-infoblock__content {
  align-items: center;
}

/* ---- Bloc entièrement cliquable (quand un lien est renseigné) ---- */
.ml-infoblock.ml-linked {
  cursor: pointer;
  text-decoration: none !important;
  color: inherit !important;
}
.ml-infoblock.ml-linked:hover {
  text-decoration: none !important;
}
/* Les textes gardent leur couleur configurée, pas la couleur de lien */
.ml-infoblock.ml-linked .ml-infoblock__title,
.ml-infoblock.ml-linked .ml-infoblock__subtitle {
  text-decoration: none !important;
}

/* ---- Bloc déclencheur (ex : ouvrir modale service client) : curseur cliquable ---- */
.ml-infoblock.clientservice_open-modal-btn {
  cursor: pointer;
}

/* ---- Responsive : empile les blocs sur mobile/tablette ---- */
@media (max-width: 767px) {
  .ml-infoblocks-container {
    flex-direction: column;
  }
  .ml-infoblock {
    width: 100%;
    min-width: 0;
  }
  /* Blocs marqués "ne pas afficher sur mobile" */
  .ml-infoblock.ml-hide-mobile {
    display: none !important;
  }
}