/**
 * WS Booster - Bouton Etendu (Expand Menu)
 */
.ws-em {
    --ws-em-gap: 8px;
    --ws-em-fan: 90deg;
    --ws-em-radius: 140px;
    /* Par defaut le widget est COMPACT (taille du trigger seulement).
       Au clic OPEN, le JS ajoute width/height/padding pour reserver
       l'espace englobant -> la section parent s'agrandit naturellement
       pour accueillir le deploiement. Au CLOSE, on retire pour redevenir
       compact. */
    position: relative;
    display: inline-block;
    isolation: isolate;
    /* border-box pour que width/height = total visible.
       Elementor force border-box partout par defaut, on s'aligne. */
    box-sizing: border-box;
    vertical-align: middle;
    /* PAS de transition CSS sur width/height/padding : ces proprietes ne
       transitionnent pas bien vers/depuis 'auto', et la transition bloque
       le shrink au close (computed style reste fige sur les anciennes valeurs).
       Le shrink/expand est instantane visuellement, mais les pills animent
       via GSAP donc l'effet reste smooth visuellement. */
}

.ws-em__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 100px;
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
    font-weight: 500;
    line-height: 1;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.ws-em__trigger {
    z-index: 100;
    /* Position RELATIVE = flux normal. Le widget compact = taille du trigger.
       Quand le widget s'ouvre, le JS pose padding-left/top pour pousser le
       trigger a sa position cible dans la boite agrandie. */
    position: relative;
    font-family: inherit;
    font-size: inherit;
    will-change: transform;
}

.ws-em__item {
    /* Position absolute par rapport au widget (qui est position:relative).
       Au close : top:0 left:0 = top-left de la padding-box = coin du widget
       compact = position trigger. Au open : le JS pose width/padding sur le
       widget, le trigger est decale par le padding, ET les pills sont
       translatees via transform vers leurs positions finales calculees. */
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--ws-em-z, 1);
    will-change: transform;
    pointer-events: none;
    opacity: 0;
}

.ws-em.is-open .ws-em__item {
    pointer-events: auto;
    opacity: 1;
}

/* === TRIGGER : 2 etats (ferme + ouvert) overlay === */
.ws-em__state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.25s ease;
}
.ws-em__state--open {
    position: absolute;
    inset: 0;
    justify-content: center;
    opacity: 0;
}
.ws-em.is-open .ws-em__state--closed { opacity: 0; }
.ws-em.is-open .ws-em__state--open { opacity: 1; }

/* === ICON === */
.ws-em__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}
.ws-em__icon svg, .ws-em__icon i {
    width: 100%;
    height: 100%;
}

/* === FAN MODE : transform-origin sur le trigger === */
.ws-em-fan-yes .ws-em__item {
    transform-origin: 50% 50%;
}

/* === MOBILE FORCE VERTICAL === */
@media (max-width: 767px) {
    .ws-em-mvert-yes.ws-em-dir-right .ws-em__item,
    .ws-em-mvert-yes.ws-em-dir-left .ws-em__item,
    .ws-em-mvert-yes.ws-em-dir-center .ws-em__item {
        /* Le JS detecte ws-em-mvert-yes + viewport mobile et force direction "down" runtime */
    }
}

/* === REDUCE MOTION === */
@media (prefers-reduced-motion: reduce) {
    .ws-em__pill { transition: none !important; }
    .ws-em__item { transition: none !important; }
}