/* /assets/css/occasion.css */

/* ============ BADGE PREMIUM (mode A) ============ */
.occas-wrap {
  position: fixed;
  left: 12px;
  top: 76px;
  z-index: 9999;
  pointer-events: none;
}

.occas-badge {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 44px 10px 12px;
  /* place pour la croix */
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  backdrop-filter: blur(8px);
  max-width: min(520px, calc(100vw - 24px));
  transition: opacity .35s ease, transform .35s ease;
}

.occas-badge.is-hide {
  opacity: 0;
  transform: translateY(-10px);
}

.occas-icon {
  font-size: 20px;
  line-height: 1
}

.occas-copy {
  min-width: 0
}

.occas-title {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1
}

.occas-text {
  font-size: 13px;
  opacity: .92;
  line-height: 1.2;
  margin-top: 2px
}

.occas-link,
.occas-link:visited {
  margin-left: 6px;
  text-decoration: none;
  font-weight: 900;
  color: inherit !important;
  opacity: .95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
}

.occas-link:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .12);
}

.occas-close {
  position: absolute;
  right: 10px;
  top: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
}

.occas-close:hover {
  opacity: 1
}

@media (max-width: 520px) {
  .occas-wrap {
    left: 10px;
    top: 70px;
  }

  .occas-badge {
    padding: 9px 44px 9px 11px;
    border-radius: 13px
  }

  .occas-title {
    font-size: 13px
  }

  .occas-text {
    font-size: 12.5px
  }
}

/* ============ IMAGE ÉPHÉMÈRE (option B) ============ */
.occas-hero {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}

.occas-hero.is-on {
  opacity: 1;
  transform: translateY(0);
}

.occas-hero.is-off {
  opacity: 0;
  transform: translateY(-8px);
}

.occas-hero__img {
  width: min(var(--occas-hero-maxw, 520px), calc(100vw - 28px));
  height: auto;
  opacity: var(--occas-hero-opacity, .95);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .24));
}

.occas-hero__img--left {
  margin-right: auto;
  margin-left: 24px
}

.occas-hero__img--right {
  margin-left: auto;
  margin-right: 24px
}

/* ============ EFFETS LÉGERS ============ */
.occfx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  overflow: hidden;
}

.occfx__p {
  position: absolute;
  top: -14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: .86;
  animation-name: occfxFall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.occfx--snow_light .occfx__p {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 8px rgba(255, 255, 255, .35);
}

.occfx--confetti_light .occfx__p {
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: rgba(218, 83, 44, .9);
}

.occfx--fireworks_sparkle .occfx__p {
  background: rgba(212, 175, 55, .95);
  box-shadow: 0 0 10px rgba(212, 175, 55, .45);
}

@keyframes occfxFall {
  from {
    transform: translateY(-10px) rotate(0deg);
  }

  to {
    transform: translateY(110vh) rotate(220deg);
  }
}