/* === Overlay === */
.wf-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    z-index:999998;
    display:none;
    opacity:0;
    transition:opacity .35s ease;
}

.wf-popup-overlay.is-open{
    display:block;
    opacity:1;
}

.wf-popup-overlay.is-closing{
    display:block;
    opacity:0;
}

/* === Stage (conteneur positionné) === */
.wf-popup-stage{
    position:fixed;
    z-index:999999;
    display:none;
    pointer-events:none;
}

.wf-popup-stage.is-open,
.wf-popup-stage.is-closing{
    display:flex;
    pointer-events:auto;
}

/* === Variantes de position === */
.wf-popup-stage.wf-popup-pos-center{
    inset:0;
    align-items:center;
    justify-content:center;
}

.wf-popup-stage.wf-popup-pos-leftpanel{
    top:0;
    left:0;
    bottom:0;
}

.wf-popup-stage.wf-popup-pos-leftpanel .wf-popup{
    height:100vh !important;
    max-height:100vh;
}

.wf-popup-stage.wf-popup-pos-rightpanel{
    top:0;
    right:0;
    bottom:0;
}

.wf-popup-stage.wf-popup-pos-rightpanel .wf-popup{
    height:100vh !important;
    max-height:100vh;
}

.wf-popup-stage.wf-popup-pos-topbar{
    top:0;
    left:0;
    right:0;
}

.wf-popup-stage.wf-popup-pos-topbar .wf-popup{
    width:100% !important;
    max-width:100%;
}

.wf-popup-stage.wf-popup-pos-bottombar{
    bottom:0;
    left:0;
    right:0;
}

.wf-popup-stage.wf-popup-pos-bottombar .wf-popup{
    width:100% !important;
    max-width:100%;
}

.wf-popup-stage.wf-popup-pos-fullscreen{
    inset:0;
}

.wf-popup-stage.wf-popup-pos-fullscreen .wf-popup{
    width:100vw !important;
    height:100vh !important;
    max-width:100vw;
    max-height:100vh;
}

/* === Popup === */
.wf-popup{
    position:relative;
    background:#fff;
    max-width:95vw;
    max-height:95vh;
    overflow:auto;
    box-shadow:0 0 30px rgba(0,0,0,.4);
    opacity:0;
}

.wf-popup-stage.is-open .wf-popup,
.wf-popup-stage.is-closing .wf-popup{
    opacity:1;
}

.wf-popup-close{
    position:absolute;
    top:10px;
    right:10px;
    z-index:10;
    width:32px;
    height:32px;
    border:none;
    background:rgba(0,0,0,.5);
    color:#fff;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    border-radius:50%;
    padding:0;
}

.wf-popup-close:hover{
    background:rgba(0,0,0,.75);
}

/* === Animations === */

/* FADE */
.wf-popup-stage[data-animation="fade"].is-open .wf-popup{
    animation:wfFadeIn .35s ease forwards;
}
.wf-popup-stage[data-animation="fade"].is-closing .wf-popup{
    animation:wfFadeOut .35s ease forwards;
}
@keyframes wfFadeIn{
    from{opacity:0;}
    to{opacity:1;}
}
@keyframes wfFadeOut{
    from{opacity:1;}
    to{opacity:0;}
}

/* ZOOM */
.wf-popup-stage[data-animation="zoom"].is-open .wf-popup{
    animation:wfZoomIn .35s ease forwards;
}
.wf-popup-stage[data-animation="zoom"].is-closing .wf-popup{
    animation:wfZoomOut .35s ease forwards;
}
@keyframes wfZoomIn{
    from{opacity:0;transform:scale(.8);}
    to{opacity:1;transform:scale(1);}
}
@keyframes wfZoomOut{
    from{opacity:1;transform:scale(1);}
    to{opacity:0;transform:scale(.8);}
}

/* SLIDE LEFT */
.wf-popup-stage[data-animation="slide-left"].is-open .wf-popup{
    animation:wfSlideLeftIn .35s ease forwards;
}
.wf-popup-stage[data-animation="slide-left"].is-closing .wf-popup{
    animation:wfSlideLeftOut .35s ease forwards;
}
@keyframes wfSlideLeftIn{
    from{opacity:0;transform:translateX(-100%);}
    to{opacity:1;transform:translateX(0);}
}
@keyframes wfSlideLeftOut{
    from{opacity:1;transform:translateX(0);}
    to{opacity:0;transform:translateX(-100%);}
}

/* SLIDE RIGHT */
.wf-popup-stage[data-animation="slide-right"].is-open .wf-popup{
    animation:wfSlideRightIn .35s ease forwards;
}
.wf-popup-stage[data-animation="slide-right"].is-closing .wf-popup{
    animation:wfSlideRightOut .35s ease forwards;
}
@keyframes wfSlideRightIn{
    from{opacity:0;transform:translateX(100%);}
    to{opacity:1;transform:translateX(0);}
}
@keyframes wfSlideRightOut{
    from{opacity:1;transform:translateX(0);}
    to{opacity:0;transform:translateX(100%);}
}

/* SLIDE TOP */
.wf-popup-stage[data-animation="slide-top"].is-open .wf-popup{
    animation:wfSlideTopIn .35s ease forwards;
}
.wf-popup-stage[data-animation="slide-top"].is-closing .wf-popup{
    animation:wfSlideTopOut .35s ease forwards;
}
@keyframes wfSlideTopIn{
    from{opacity:0;transform:translateY(-100%);}
    to{opacity:1;transform:translateY(0);}
}
@keyframes wfSlideTopOut{
    from{opacity:1;transform:translateY(0);}
    to{opacity:0;transform:translateY(-100%);}
}

/* SLIDE BOTTOM */
.wf-popup-stage[data-animation="slide-bottom"].is-open .wf-popup{
    animation:wfSlideBottomIn .35s ease forwards;
}
.wf-popup-stage[data-animation="slide-bottom"].is-closing .wf-popup{
    animation:wfSlideBottomOut .35s ease forwards;
}
@keyframes wfSlideBottomIn{
    from{opacity:0;transform:translateY(100%);}
    to{opacity:1;transform:translateY(0);}
}
@keyframes wfSlideBottomOut{
    from{opacity:1;transform:translateY(0);}
    to{opacity:0;transform:translateY(100%);}
}

/* === Accessibilité === */
.wf-popup:focus{
    outline:2px solid #2196f3;
    outline-offset:-2px;
}

@media (prefers-reduced-motion: reduce){
    .wf-popup-stage .wf-popup,
    .wf-popup-overlay{
        animation-duration:0.01ms !important;
        transition-duration:0.01ms !important;
    }
}