/* BADGE POSITION - Positionner le badge sur l'image */

/* Le conteneur de l'image doit être en position relative et permettre le débordement */
section[bk="lightblue"] .split-img-wrap {
  position: relative !important;
  overflow: visible !important;
}

/* L'image doit avoir un z-index inférieur au badge */
section[bk="lightblue"] .split-img-wrap .split-img {
  position: relative !important;
  z-index: 1 !important;
}

/* S'assurer que le conteneur parent n'a pas d'overflow hidden */
section[bk="lightblue"] .split-content-cd6 {
  overflow: visible !important;
}

/* Badge positionné en absolu sur l'image, aligné à gauche EN BAS - OVERRIDE des anciennes règles */
section[bk="lightblue"] .split-img-wrap .badge-wrap {
  position: absolute !important;
  top: auto !important;
  left: 5rem !important;
  bottom: 5rem !important;
  right: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  width: 20rem !important;
  height: 20rem !important;
  display: block !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Contrôler le badge */
section[bk="lightblue"] .split-img-wrap .badge-wrap .badge {
  position: relative !important;
  z-index: 6 !important;
  width: 20rem !important;
  height: 20rem !important;
  transform: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-color: #329B98 !important;
}

/* Texte SVG en couleur crème */
section[bk="lightblue"] .split-img-wrap .badge-wrap .badge-txt {
  filter: brightness(0) saturate(100%) invert(96%) sepia(13%) saturate(384%) hue-rotate(325deg) brightness(104%) contrast(101%) !important;
}

/* Alternative : forcer la couleur via fill si le SVG le permet */
section[bk="lightblue"] .split-img-wrap .badge-wrap .badge-txt svg,
section[bk="lightblue"] .split-img-wrap .badge-wrap .badge-txt svg path,
section[bk="lightblue"] .split-img-wrap .badge-wrap .badge-txt svg text {
  fill: #FFFBE3 !important;
  color: #FFFBE3 !important;
}

/* Logo de la main en couleur crème */
section[bk="lightblue"] .split-img-wrap .badge-wrap .badge-img {
  filter: brightness(0) saturate(100%) invert(96%) sepia(13%) saturate(384%) hue-rotate(325deg) brightness(104%) contrast(101%) !important;
}

section[bk="lightblue"] .split-img-wrap .badge-wrap .badge-img svg,
section[bk="lightblue"] .split-img-wrap .badge-wrap .badge-img svg path {
  fill: #FFFBE3 !important;
}

/* Responsive - ajuster les marges sur tablette et mobile */
@media (max-width: 991px) {

  /* Padding seulement à gauche, pas à droite */
  section[bk="lightblue"] .global-padding {
    padding-right: 0 !important;
  }

  /* Image en pleine largeur, format carré, sans marge à droite */
  section[bk="lightblue"] .split-grid-gd1-cd12 {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  section[bk="lightblue"] .split-content-cd6.align-left-mobile {
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  /* Aligner tous les textes à gauche */
  section[bk="lightblue"] .split-content-cd6.is-centered-txt-tac {
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 48px !important;
  }

  section[bk="lightblue"] .max-ch-1 {
    max-width: none !important;
    width: 100% !important;
  }

  /* Aligner le bouton à gauche */
  section[bk="lightblue"] .button {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  section[bk="lightblue"] .split-img-wrap {
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    aspect-ratio: 1/1 !important;
    overflow: visible !important;
  }

  section[bk="lightblue"] .split-img-wrap .split-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  section[bk="lightblue"] .split-img-wrap .badge-wrap {
    bottom: 3rem !important;
    left: 3rem !important;
    width: 16rem !important;
    height: 16rem !important;
  }

  section[bk="lightblue"] .split-img-wrap .badge-wrap .badge {
    width: 16rem !important;
    height: 16rem !important;
  }
}

@media (max-width: 767px) {

  /* Padding seulement à gauche, pas à droite */
  section[bk="lightblue"] .global-padding {
    padding-right: 0 !important;
  }

  /* Image en pleine largeur, format carré, sans marge à droite */
  section[bk="lightblue"] .split-grid-gd1-cd12 {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  section[bk="lightblue"] .split-content-cd6.align-left-mobile {
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  /* Aligner tous les textes à gauche */
  section[bk="lightblue"] .split-content-cd6.is-centered-txt-tac {
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 48px !important;
  }

  section[bk="lightblue"] .max-ch-1 {
    max-width: none !important;
    width: 100% !important;
  }

  /* Aligner le bouton à gauche */
  section[bk="lightblue"] .button {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  section[bk="lightblue"] .split-img-wrap {
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    aspect-ratio: 1/1 !important;
    overflow: visible !important;
  }

  section[bk="lightblue"] .split-img-wrap .split-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  section[bk="lightblue"] .split-img-wrap .badge-wrap {
    bottom: 2.5rem !important;
    left: 2.5rem !important;
    width: 14rem !important;
    height: 14rem !important;
  }

  section[bk="lightblue"] .split-img-wrap .badge-wrap .badge {
    width: 14rem !important;
    height: 14rem !important;
  }
}

@media (max-width: 479px) {

  /* Padding seulement à gauche, pas à droite */
  section[bk="lightblue"] .global-padding {
    padding-right: 0 !important;
  }

  /* Image en pleine largeur, format carré, sans marge à droite */
  section[bk="lightblue"] .split-grid-gd1-cd12 {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  section[bk="lightblue"] .split-content-cd6.align-left-mobile {
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  /* Aligner tous les textes à gauche */
  section[bk="lightblue"] .split-content-cd6.is-centered-txt-tac {
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 48px !important;
  }

  section[bk="lightblue"] .max-ch-1 {
    max-width: none !important;
    width: 100% !important;
  }

  /* Aligner le bouton à gauche */
  section[bk="lightblue"] .button {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  section[bk="lightblue"] .split-img-wrap {
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    aspect-ratio: 1/1 !important;
    overflow: visible !important;
  }

  section[bk="lightblue"] .split-img-wrap .split-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  section[bk="lightblue"] .split-img-wrap .badge-wrap {
    bottom: 2rem !important;
    left: 2rem !important;
    width: 12rem !important;
    height: 12rem !important;
  }

  section[bk="lightblue"] .split-img-wrap .badge-wrap .badge {
    width: 12rem !important;
    height: 12rem !important;
  }
}