/* Bannière sticky centrée */
/* Banner fixed and centered horizontally */
.wpsb-banner {
  position: fixed;
  bottom: 32px;
  left: 50%;                       /* center horizontally */
  transform: translate(-50%, 100%); /* initially off-screen below */
  display: flex;
  justify-content: center;          /* center inner container */
  width: 100%;                      /* full width to contain inner */
  z-index: 9999;
  transition: transform 0.3s ease-in-out;
}

/* Banner active (slide up into view) */
.wpsb-banner.active {
  transform: translate(-50%, -32px);
}

/* Banner hide (slide down out of view) */
.wpsb-banner.hide {
  transform: translate(-50%, 100%);
}

/* Inner container keeps fixed width */
.wpsb-banner {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  display: flex;
  justify-content: center; /* centers inner container */
  z-index: 9999;
  transition: transform 0.5s ease-in-out;
}

/* Inner container */
.wpsb-banner-inner {
  width: 88%;
  height: 198px;
  background: #FFD2D0;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-radius: 16px;
}

/* Gradient at bottom (~10% of height) */
.wpsb-banner-inner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 98%;
    height: 10%; /* adjust as needed */
    background: linear-gradient(
          to top,
          rgba(255, 133, 133, 0.6), /* 60% opacity */
          rgba(255, 133, 133, 0)    /* fully transparent */
      );    pointer-events: none; /* don’t block clicks */
    z-index: 0; /* behind all columns and images */
    border-radius: 16px;
}


/* Close button positioned relative to banner, outside inner */
.wpsb-close-banner {
  position: absolute;
  top: calc(-52px / 2); /* half button height */
  right: calc((100% - 88%)/2 - 26px);
  width: 52px;
  height: 52px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}


.wpsb-close-banner svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Colonnes */
.wpsb-col {
  height: 100%;
  width: 100%;
}

/* Colonnes et images au-dessus du gradient */
.wpsb-col,
.wpsb-col img {
  position: relative; /* permet de créer un contexte z-index */
  z-index: 1;         /* au-dessus du gradient */
}

.wpsb-col.center {
  display: flex;
  flex-direction: column;   /* stack text and button vertically */
  justify-content: center;  /* vertical centering */
  align-items: center;      /* horizontal centering */
  text-align: center;
  height: 100%;
  gap: 12px;

}

.wpsb-col.right .masked-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    -webkit-mask-image: var(--mask-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-size: cover;

    mask-image: var(--mask-url);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-size: cover;

    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
}


/* Images */
.wpsb-col.left img,
.wpsb-col.right img {
  object-fit: cover;
  display: block;
}

.wpsb-col.left img {
  border-radius: 16px 0 0 16px;
}


.wpsb-col.right {
  margin-left: auto; /* pousse la colonne complètement à droite */
  display: flex;
  justify-content: flex-end;
  z-index: 1;
  overflow: hidden;
  border-radius: 16px;
}

.wpsb-col.right img {
  border-radius:0 16px 16px 16px;
  width: 100%;
  max-width: 310px;
  left: 38px;
}

/* Texte secondaire */
.wpsb-text-secondary {
  font-size: 14px;
  color: #4D575A;
  margin-top: 5px;
}

/* Bouton */
.wpsb-button {
  padding: 10px 32px!important;

}

.wpsb-col.left,  .wpsb-col.right{
  max-width: 300px;
}

.wpsb-text p, .wpsb-text-secondary, .wpsb-button a {
    font-family: "Bricolage Grotesque", sans-serif;
}

.wpsb-text p {
  color: #000;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 500;
}

.wpsb-button a {
  font-weight: 600;
}

.wpsb-banner-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}




/* MOBILE */
@media (max-width: 768px) {

  .wpsb-col.left {
    display: none;
  }

  .wpsb-col.right {
    position: absolute;
    width: 100%;
  }

  .wpsb-col.right img {
    width: 100%;
    border-radius: 0;
  }

  .wpsb-banner-inner {
    flex-direction: column;
    align-items: center;
  }

  /* Background overlay si besoin */
  .wpsb-banner {
    background-image: var(--banner-bg);
    background-size: cover;
    background-position: center;
    color: #fff;
    position: fixed;
  }

  .wpsb-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 2;
  }

  .wpsb-col.center {
    display: flex;
    flex-direction: column;
    justify-content: center; /* centre verticalement */
    align-items: center;     /* centre horizontalement */
    text-align: center;
    height: 100%;
    z-index: 2;
  }

  .wpsb-text p, .wpsb-text-secondary {
    color: white;
  }
}