/** Shopify CDN: Minification failed

Line 106:0 Unexpected "}"

**/
/* Style pour les bannières Desktop et Mobile */
.banner {
    display: flex;
    position: relative;
    flex-direction: column;
}

.banner-desktop {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.banner-mobile {
  display: none !important;
}

.banner-desktop img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover;
}

/* Correction pour le centrage */
.banner__content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.banner__box {
    max-width: 800px;
    width: 90%;
    background: white;
    border-radius: 0px;
    padding: 3rem;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    height: auto;
    word-wrap: break-word;
    z-index: 1;
}


@media screen and (max-width: 749px) {
  .banner__content {
      width: 100%;
      height: 100%;
      padding: 0 1rem;
  }

  .banner__box {
      padding: 2rem;
      width: 95%;
      max-width: 600px;
  }
}

@media screen and (max-width: 749px) {
  /* Assurer que l'image mobile s'affiche correctement */
  .banner-desktop {
      display: none !important;
  }
  .banner-mobile {
      display: block !important;
  }
  

  .banner-mobile img {
      width: 100% !important;
      height: auto !important;
      max-height: 650px !important; /* Ajuste selon ton besoin */
      object-fit: cover !important; /* Change "cover" en "contain" si l'image est coupée */
  }

  /* Ajustement du conteneur */
.banner__content {
      display: none !important;
  }
}

  .banner-mobile img {
    width: 100% !important;
    height: auto !important;
    max-height: 650px !important; /* Ajuste cette valeur selon ton besoin */
    object-fit: cover !important; /* Change "cover" en "contain" si l'image est coupée */
  }
}

/* Desktop responsive */
@media screen and (min-width: 750px) {
  .banner-desktop {
    display: block !important;
  }
  .banner-mobile {
    display: none !important;
  }
}