/* ==========================================================
   BLOOPIN — CLOSE CONTROLS
   Croix seules, sans badge / contour, animation uniforme.
   ========================================================== */

/* Contrôles Bloopin + fermeture LatePoint + fallback sémantique
   pour les composants tiers rendus dans le DOM de la page. */
:is(
  #bloopin-header .menu-close,
  .bp-modal__close,
  .bp-highlights__close,
  .latepoint-lightbox-i .latepoint-lightbox-close,
  button[aria-label^="Fermer" i],
  a[aria-label^="Fermer" i],
  [role="button"][aria-label^="Fermer" i],
  button[aria-label^="Close" i],
  a[aria-label^="Close" i],
  [role="button"][aria-label^="Close" i]
){
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer;
  transform-origin: 50% 50%;
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    color .2s ease,
    opacity .2s ease !important;
}

:is(
  #bloopin-header .menu-close,
  .bp-modal__close,
  .bp-highlights__close,
  .latepoint-lightbox-i .latepoint-lightbox-close,
  button[aria-label^="Fermer" i],
  a[aria-label^="Fermer" i],
  [role="button"][aria-label^="Fermer" i],
  button[aria-label^="Close" i],
  a[aria-label^="Close" i],
  [role="button"][aria-label^="Close" i]
):hover{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: rotate(90deg) scale(1.08) !important;
}

:is(
  #bloopin-header .menu-close,
  .bp-modal__close,
  .bp-highlights__close,
  .latepoint-lightbox-i .latepoint-lightbox-close,
  button[aria-label^="Fermer" i],
  a[aria-label^="Fermer" i],
  [role="button"][aria-label^="Fermer" i],
  button[aria-label^="Close" i],
  a[aria-label^="Close" i],
  [role="button"][aria-label^="Close" i]
):active{
  background: transparent !important;
  box-shadow: none !important;
  transform: rotate(135deg) scale(.88) !important;
  transition-duration: .1s !important;
}

/* Focus clavier visible sans recréer de badge autour de la croix. */
:is(
  #bloopin-header .menu-close,
  .bp-modal__close,
  .bp-highlights__close,
  .latepoint-lightbox-i .latepoint-lightbox-close,
  button[aria-label^="Fermer" i],
  a[aria-label^="Fermer" i],
  [role="button"][aria-label^="Fermer" i],
  button[aria-label^="Close" i],
  a[aria-label^="Close" i],
  [role="button"][aria-label^="Close" i]
):focus-visible{
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--primary, #22A1EE) !important;
  transform: rotate(90deg) scale(1.08) !important;
}

/* Les SVG doivent suivre la couleur du contrôle, sans fond propre. */
:is(.bp-modal__close, .bp-highlights__close) svg{
  stroke: currentColor !important;
  transition: none !important;
}

/* Header : conserve la croix construite avec deux traits. */
#bloopin-header .menu-close span{
  transition: background-color .2s ease !important;
}

/* Certains plugins dessinent eux-mêmes un disque via pseudo-élément. */
:is(
  .latepoint-lightbox-i .latepoint-lightbox-close,
  button[aria-label^="Fermer" i],
  a[aria-label^="Fermer" i],
  [role="button"][aria-label^="Fermer" i],
  button[aria-label^="Close" i],
  a[aria-label^="Close" i],
  [role="button"][aria-label^="Close" i]
)::before,
:is(
  .latepoint-lightbox-i .latepoint-lightbox-close,
  button[aria-label^="Fermer" i],
  a[aria-label^="Fermer" i],
  [role="button"][aria-label^="Fermer" i],
  button[aria-label^="Close" i],
  a[aria-label^="Close" i],
  [role="button"][aria-label^="Close" i]
)::after{
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce){
  :is(
    #bloopin-header .menu-close,
    .bp-modal__close,
    .bp-highlights__close,
    .latepoint-lightbox-i .latepoint-lightbox-close,
    button[aria-label^="Fermer" i],
    a[aria-label^="Fermer" i],
    [role="button"][aria-label^="Fermer" i],
    button[aria-label^="Close" i],
    a[aria-label^="Close" i],
    [role="button"][aria-label^="Close" i]
  ){
    transition: none !important;
  }

  :is(
    #bloopin-header .menu-close,
    .bp-modal__close,
    .bp-highlights__close,
    .latepoint-lightbox-i .latepoint-lightbox-close,
    button[aria-label^="Fermer" i],
    a[aria-label^="Fermer" i],
    [role="button"][aria-label^="Fermer" i],
    button[aria-label^="Close" i],
    a[aria-label^="Close" i],
    [role="button"][aria-label^="Close" i]
  ):hover,
  :is(
    #bloopin-header .menu-close,
    .bp-modal__close,
    .bp-highlights__close,
    .latepoint-lightbox-i .latepoint-lightbox-close,
    button[aria-label^="Fermer" i],
    a[aria-label^="Fermer" i],
    [role="button"][aria-label^="Fermer" i],
    button[aria-label^="Close" i],
    a[aria-label^="Close" i],
    [role="button"][aria-label^="Close" i]
  ):active,
  :is(
    #bloopin-header .menu-close,
    .bp-modal__close,
    .bp-highlights__close,
    .latepoint-lightbox-i .latepoint-lightbox-close,
    button[aria-label^="Fermer" i],
    a[aria-label^="Fermer" i],
    [role="button"][aria-label^="Fermer" i],
    button[aria-label^="Close" i],
    a[aria-label^="Close" i],
    [role="button"][aria-label^="Close" i]
  ):focus-visible{
    transform: none !important;
  }
}