.kpopup {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 3.5rem 2rem 1rem; /* espace pour la croix et l'ombre décalée */
}

.kpopup[hidden] {
  display: none;
}

.kpopup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 27, 44, 0.55);
}

.kpopup__wrap {
  position: relative;
  z-index: 1;
  max-width: 520px;
  width: 100%;
  animation: kpopup-in 0.25s ease;
}

/* Forme bleue décalée derrière la popup, pour donner du volume */
.kpopup__wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px);
  background: var(--color-primary, #091b2c);
  border-radius: 1rem;
  z-index: -1;
}

.kpopup__dialog {
  position: relative;
  background: var(--color-white, #fff);
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(9, 27, 44, 0.35);
  width: 100%;
  max-width: 520px; /* filet de sécurité si le tpl en cache n'a pas le wrapper */
  margin: 0 auto;
  max-height: 85vh;
  overflow: auto;
}

/* Liseré dégradé aux couleurs du site en haut de la popup */
.kpopup__dialog::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--color-gradient, linear-gradient(90deg, #f97902 0%, #ff9736 100%));
  border-radius: 1rem 1rem 0 0;
}

@keyframes kpopup-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.kpopup__close {
  position: absolute;
  top: -2.9rem;
  right: -2.9rem;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-white, #fff);
  color: var(--color-primary, #091b2c);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(9, 27, 44, 0.25);
}

.kpopup__close:hover {
  color: var(--color-secondary, #f97902);
}

.kpopup__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem 1rem 0 0;
}

.kpopup__body {
  padding: 1.5rem 1.75rem 1.75rem;
  text-align: center;
}

.kpopup__title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-color, #091b2c);
  margin: 0 0 0.5rem;
}

/* Petit trait accent sous le titre */
.kpopup__title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin: 0.6rem auto 0;
  border-radius: 999px;
  background: var(--color-secondary, #f97902);
}

.kpopup__text {
  margin-bottom: 1.25rem;
  color: var(--text-color, #091b2c);
  line-height: 1.6;
}

/* Le WYSIWYG du BO peut enregistrer du texte en blanc (invisible sur fond
   blanc) : on neutralise uniquement les couleurs blanches inline. */
.kpopup__text [style*="color:#fff"],
.kpopup__text [style*="color: #fff"],
.kpopup__text [style*="color:#ffffff"],
.kpopup__text [style*="color: #ffffff"],
.kpopup__text [style*="color:white"],
.kpopup__text [style*="color: white"],
.kpopup__text [style*="rgb(255, 255, 255)"],
.kpopup__text [style*="rgb(255,255,255)"] {
  color: var(--text-color, #091b2c) !important;
}

.kpopup__btn {
  margin-top: 0.25rem;
}

@media (max-width: 767px) {
  .kpopup--no-mobile {
    display: none !important;
  }

  /* Mobile : popup pleine largeur, centrée, croix alignée dans la popup */
  .kpopup {
    padding: 1rem;
  }

  .kpopup__wrap,
  .kpopup__dialog {
    max-width: 100%;
  }

  /* Ombre décalée réduite pour ne pas déborder de l'écran */
  .kpopup__wrap::before {
    transform: translate(6px, 6px);
  }

  /* Croix repositionnée à l'intérieur, en haut à droite de la popup */
  .kpopup__close {
    top: 0.75rem;
    right: 0.75rem;
  }
}