.page-id-1503 .site-content {
    margin-top: -2rem;
}

/* 1) wrapper en full-width */
.banniere-pleine-largeur {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  height: 620px;
  overflow: hidden;
  margin-bottom: 2rem;
}

/* 2) assombrir un peu les images */
.banniere-pleine-largeur .spectra-image-gallery__media-thumbnail {
  filter: brightness(0.6) contrast(1) !important;
}

/* 3) titre en ::before — centré exact */
.banniere-pleine-largeur::before {
  content: "Des enveloppes qui marquent les occasions";
  font-family: var(--font-primary);
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -90%); /* 60% pour légèrement remonter */
  z-index: 5;
  width: 90%;6
  max-width: 800px;
  text-align: center;
  font-size: 3rem;
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  white-space: pre-wrap;
  line-height: 1.2;
  pointer-events: none;
  padding: 0 1rem;
}

/* 4) paragraphe en ::after — centré exact mais un peu plus bas */
.banniere-pleine-largeur::after {
  content: "Chaque Envoi Premium est préparé avec soin : un bon imprimé sur beau papier, une enveloppe décorée, des attentions choisies pour faire plaisir. Un cadeau qui se vit dès l’ouverture.";
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, 10%); /* 10% pour placer le paragraphe sous le titre */
  z-index: 5;
  width: 85%;
  max-width: 980px;
  text-align: center;
  font-size: 1.25rem;
  color: var(--background-white);
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
  white-space: pre-wrap;
  line-height: 1.8;
  pointer-events: none;
  padding: 0 1rem;
}

/* 5) Ajustements mobile */
/* 1. Hauteur responsive du wrapper principal */
@media (max-width: 768px) {
  .banniere-pleine-largeur {
    height: 800px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .banniere-pleine-largeur {
    height: 800px !important;
  }
}

/* 2. Forcer chaque élément du carousel à hériter la hauteur */
.banniere-pleine-largeur,
.banniere-pleine-largeur .spectra-image-gallery,
.banniere-pleine-largeur .uagb-slick-carousel,
.banniere-pleine-largeur .slick-list,
.banniere-pleine-largeur .slick-track,
.banniere-pleine-largeur .slick-slide,
.banniere-pleine-largeur .spectra-image-gallery__media-wrapper,
.banniere-pleine-largeur .spectra-image-gallery__media {
    height: 800px !important;
}

/* 3. Forcer les images à remplir le slide */
.banniere-pleine-largeur img.spectra-image-gallery__media-thumbnail {
  height: 800px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
}

/* FAQ ANIMATION */ 
/* état initial : invisible et décalé */
.faq-envoi-premium .uagb-faq-child__outer-wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* état “visible” : on remet à 1 et on annule le décalage */
.faq-envoi-premium .uagb-faq-child__outer-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- ANIMATION APPARITION BANNIÈRE --- */

/* État initial */
.banniere-pleine-largeur {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* État après chargement */
.banniere-pleine-largeur.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- ANIMATION DU TITRE ET TEXTE BANNIERE --- */

.banniere-pleine-largeur::before,
.banniere-pleine-largeur::after {
  opacity: 0;
  transform: translate(-50%, 20%);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Quand la classe est visible */
.banniere-pleine-largeur.is-visible::before {
  opacity: 1;
  transform: translate(-50%, -90%);
  transition-delay: 0.3s;
}

.banniere-pleine-largeur.is-visible::after {
  opacity: 1;
  transform: translate(-50%, 10%);
  transition-delay: 1s;
}


/* CAROUSSEL */ 

.carousel-envelop .spectra-image-gallery__control-arrows {
  background: var(--primary-color);
  transition: var(--transition);
}

.carousel-envelop .spectra-image-gallery__control-arrows:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.carousel-envelop .spectra-image-gallery__control-arrows svg {
  fill: var(--background-white);
  transition: var(--transition);
}

.carousel-envelop .spectra-image-gallery__control-arrows:hover svg {
  fill: var(--background-white);
}


.carousel-envelop .slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 0 0;
  padding: 0;
  list-style: none;
}

.carousel-envelop .slick-dots li {
  margin: 0;
}

.carousel-envelop .slick-dots button {
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0;
  padding: 0;
}


.carousel-envelop .slick-dots .slick-active button {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

/* Override du style par défaut bleu */
.carousel-envelop .spectra-image-gallery__layout--carousel ul.slick-dots li button:before {
  color: var(--text-color);
}

.carousel-envelop .uagb-slick-carousel ul.slick-dots li button:before {
  color: var(--text-color);
}

.test-envoi-premium {
    row-gap: 1rem !important;
    margin-bottom: 2rem;
}

.test-envoi-premium-title {
    margin-bottom: 0 !important;
}

.test-envoi-premium-p {
    margin-bottom: 1rem !important;
}