/**
 * S2i Evolution - Encart newsletter
 *
 * Volontairement minimal : la structure et les espacements sont portes par les
 * utilitaires Bootstrap directement dans le template. Ne restent ici que les
 * quelques regles que Bootstrap ne sait pas exprimer (dimensions fixes), plus
 * la couleur de fond de la section, isolee dans une custom property.
 *
 * CSS natif hors du pipeline SCSS du theme : pas de build a relancer, et la
 * feuille n'est plus chargee si le module est desactive ou l'encart masque
 * (voir hookActionFrontControllerSetMedia).
 */

.s2i-newsletter {
  --s2i-nl-bg: #efeffd;
  --s2i-nl-picto-size: 50px;
}

/* Scope sur --desktop : l'image mobile porte la meme classe plus w-100, une
   regle non scopee lui imposerait aussi une largeur fixe (d'ou le !important
   qui devient inutile ici). */
.s2i-newsletter__media--desktop .s2i-newsletter__image {
  width: 510px;
  height: fit-content;
}

/* sous le breakpoint xxl de Bootstrap (1400px) */
@media (max-width: 1399.98px) {
  .s2i-newsletter__media--desktop .s2i-newsletter__image {
    width: 460px;
  }
}

.s2i-newsletter__picto-wrap img {
  width: 25px;
  height: 25px;
}

@media (max-width: 500px) {
  .s2i-newsletter__picto-wrap img {
    width: 20px;
    height: 20px;
  }
}

.s2i-newsletter__reassurance {
  min-width: 0;
}

.s2i-newsletter__badge {
  background-color: var(--s2i-nl-bg)!important;
}

.s2i-newsletter__picto-wrap {
  background-color: var(--s2i-nl-bg);
}

.s2i-newsletter__reassurance-text {
  min-width: 0;
  overflow-wrap: break-word;
}

/* breakpoint xl de Bootstrap : bascule mobile (tout en colonne) / desktop */
@media (min-width: 1200px) {
  .s2i-newsletter {
    --s2i-nl-picto-size: 48px;
  }

  .s2i-newsletter__media--desktop {
    min-height: 420px;
  }
}