/**
 * WS Booster - Bouton Magnetique : effet de survol "Reflet balayant" +
 * transitions hover (bg / couleur / bordure / ombre).
 *
 * Variables (posees par les controles Elementor sur .ws-magnetic-btn) :
 *   --ws-mb-fx-color    : couleur du reflet
 *   --ws-mb-fx-speed    : duree du reflet
 *   --ws-mb-hover-speed : duree des transitions de survol (Style > Survol)
 */

.ws-magnetic-btn {
    --ws-mb-fx-color: #ffffff;
    --ws-mb-fx-speed: 0.4s;
    --ws-mb-hover-speed: 0.3s;
    /* Transitions de survol sur les proprietes Style. La base
       ws-booster-widgets.css force `transition: none` (pour preserver le
       transform GSAP du magnetique) ; on re-active uniquement les
       proprietes non-transform via une regle plus specifique. */
    transition:
        background-color var(--ws-mb-hover-speed, 0.3s) ease,
        color            var(--ws-mb-hover-speed, 0.3s) ease,
        border-color     var(--ws-mb-hover-speed, 0.3s) ease,
        box-shadow       var(--ws-mb-hover-speed, 0.3s) ease;
}

/* Effet actif : le bouton devient le repere du pseudo-element. */
.ws-mb-fx-shine .ws-magnetic-btn {
    position: relative;
}

/* ============================================================
   REFLET BALAYANT — un eclat de lumiere traverse le bouton au survol.
   ============================================================ */
.ws-mb-fx-shine .ws-magnetic-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(
        105deg,
        transparent 38%,
        color-mix(in srgb, var(--ws-mb-fx-color) 70%, transparent) 50%,
        transparent 62%
    );
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 150% 0;
    transition: background-position var(--ws-mb-fx-speed) ease;
}
.ws-mb-fx-shine .ws-magnetic-btn:hover::before {
    background-position: -50% 0;
}

@media (prefers-reduced-motion: reduce) {
    .ws-magnetic-btn,
    .ws-mb-fx-shine .ws-magnetic-btn::before {
        transition: none !important;
    }
}

/* ============================================================
   WS FONDU SUR LES BORDS - override pour Bouton Magnetique
   ============================================================
   Le mask CSS est pose par defaut sur le widget wrapper (.elementor-element)
   qui prend toute la largeur du conteneur parent. Le .ws-magnetic-btn etant
   plus petit + aligne (gauche / centre / droite), le fondu du wrapper tombe
   souvent sur le vide d'un cote. On NEUTRALISE le mask au niveau wrapper et
   on le re-applique directement sur le .ws-magnetic-btn (vraie taille du
   bouton). Les CSS variables --_efc-* et --_efs-* sont inheritees du wrapper
   donc accessibles ici sans redefinition. */

.elementor-widget-ws-magnetic-button[data-ws-edge-fade] {
    -webkit-mask-image: none !important;
            mask-image: none !important;
}

/* === Direction "outside" (defaut) : bords transparents === */
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="all"]:not([data-ws-edge-fade-direction="inside"]) .ws-magnetic-btn {
    -webkit-mask-image:
        linear-gradient(to right, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), var(--_efc-edge) 100%),
        linear-gradient(to bottom, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), var(--_efc-edge) 100%);
            mask-image:
        linear-gradient(to right, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), var(--_efc-edge) 100%),
        linear-gradient(to bottom, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), var(--_efc-edge) 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="horizontal"]:not([data-ws-edge-fade-direction="inside"]) .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to right, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), var(--_efc-edge) 100%);
            mask-image: linear-gradient(to right, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), var(--_efc-edge) 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="vertical"]:not([data-ws-edge-fade-direction="inside"]) .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to bottom, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), var(--_efc-edge) 100%);
            mask-image: linear-gradient(to bottom, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), var(--_efc-edge) 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="top"]:not([data-ws-edge-fade-direction="inside"]) .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to bottom, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black 100%);
            mask-image: linear-gradient(to bottom, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="bottom"]:not([data-ws-edge-fade-direction="inside"]) .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to top, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black 100%);
            mask-image: linear-gradient(to top, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="left"]:not([data-ws-edge-fade-direction="inside"]) .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to right, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black 100%);
            mask-image: linear-gradient(to right, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="right"]:not([data-ws-edge-fade-direction="inside"]) .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to left, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black 100%);
            mask-image: linear-gradient(to left, var(--_efc-edge) 0, var(--_efc-mid) var(--_efs-mid), black var(--ws-edge-fade-size), black 100%);
}

/* === Direction "inside" : centre transparent, bords visibles === */
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="all"][data-ws-edge-fade-direction="inside"] .ws-magnetic-btn {
    -webkit-mask-image:
        linear-gradient(to right, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), var(--_efc-edge) calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), black 100%),
        linear-gradient(to bottom, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), var(--_efc-edge) calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), black 100%);
            mask-image:
        linear-gradient(to right, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), var(--_efc-edge) calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), black 100%),
        linear-gradient(to bottom, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), var(--_efc-edge) calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), black 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="horizontal"][data-ws-edge-fade-direction="inside"] .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to right, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), var(--_efc-edge) calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), black 100%);
            mask-image: linear-gradient(to right, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), var(--_efc-edge) calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), black 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="vertical"][data-ws-edge-fade-direction="inside"] .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to bottom, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), var(--_efc-edge) calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), black 100%);
            mask-image: linear-gradient(to bottom, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), var(--_efc-edge) calc(100% - var(--ws-edge-fade-size)), var(--_efc-mid) var(--_efs-mid-far), black 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="top"][data-ws-edge-fade-direction="inside"] .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to bottom, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), black 100%);
            mask-image: linear-gradient(to bottom, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), black 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="bottom"][data-ws-edge-fade-direction="inside"] .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to top, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), black 100%);
            mask-image: linear-gradient(to top, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), black 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="left"][data-ws-edge-fade-direction="inside"] .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to right, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), black 100%);
            mask-image: linear-gradient(to right, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), black 100%);
}
.elementor-widget-ws-magnetic-button[data-ws-edge-fade="right"][data-ws-edge-fade-direction="inside"] .ws-magnetic-btn {
    -webkit-mask-image: linear-gradient(to left, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), black 100%);
            mask-image: linear-gradient(to left, black 0, var(--_efc-mid) var(--_efs-mid), var(--_efc-edge) var(--ws-edge-fade-size), black 100%);
}