/* ═══════════════════════════════════════════════════════
   ASM IMAGE COMPARE — Premium Before/After Slider
   ═══════════════════════════════════════════════════════ */

/* Header */
.asmic-header{text-align:center;margin-bottom:24px;}
.asmic-heading{font-size:clamp(22px,3vw,32px);font-weight:800;color:#222;margin:0 0 6px;}
.asmic-sub{font-size:15px;color:#888;margin:0;}

/* Container */
.asmic-container{
    position:relative;overflow:hidden;cursor:col-resize;
    user-select:none;-webkit-user-select:none;
    margin:0 auto;border-radius:16px;
    background:#f0f0f0;
}
.asmic-vertical{cursor:row-resize;}

/* ══ FIT MODES ══ */

/* AUTO : hauteur s'adapte à l'image (photos portrait OK) */
.asmic-fit-auto{height:auto!important;}
.asmic-fit-auto .asmic-layer{position:relative;}
.asmic-fit-auto .asmic-layer.asmic-before{position:absolute;inset:0;}
.asmic-fit-auto .asmic-after img{
    width:100%!important;height:auto!important;display:block!important;
    object-fit:contain!important;
}
.asmic-fit-auto .asmic-before img{
    width:100%!important;height:100%!important;display:block!important;
    object-fit:cover!important;
}

/* COVER : remplit, coupe les bords */
.asmic-fit-cover{height:450px;}
.asmic-fit-cover .asmic-layer img{
    width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;
}

/* CONTAIN : voit toute l'image, bandes possibles */
.asmic-fit-contain{height:450px;background:#111;}
.asmic-fit-contain .asmic-layer img{
    width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;
}

/* FIXED : hauteur personnalisée via le slider Elementor */
.asmic-fit-fixed{height:450px;}
.asmic-fit-fixed .asmic-layer img{
    width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;
}

/* Layers */
.asmic-layer{position:absolute;inset:0;}

/* Before layer clipped */
.asmic-before{z-index:2;}
.asmic-after{z-index:1;}

/* Common img styles */
.asmic-layer img{pointer-events:none;user-select:none;-webkit-user-drag:none;}

/* Overlay */
.asmic-overlay{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .3s;pointer-events:none;}
.asmic-container:hover .asmic-overlay{opacity:1;}

/* ══ HANDLE ══ */
.asmic-handle{
    position:absolute;z-index:10;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
}

/* Horizontal handle positioning */
.asmic-horizontal .asmic-handle{
    top:0;bottom:0;
    transform:translateX(-50%);
}
/* Vertical handle positioning */
.asmic-vertical .asmic-handle{
    left:0;right:0;
    transform:translateY(-50%);
}

.asmic-handle-grip{
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;cursor:pointer;pointer-events:all;
    transition:transform .2s;z-index:11;
}
.asmic-handle-grip:hover{transform:scale(1.1);}
.asmic-container:active .asmic-handle-grip{transform:scale(0.95);}

.asmic-arrows{
    display:flex;gap:2px;
}
.asmic-horizontal .asmic-arrows{flex-direction:row;}
.asmic-vertical .asmic-arrows{flex-direction:column;}

/* ══ LABELS ══ */
.asmic-label{
    position:absolute;z-index:8;
    font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    opacity:0;transition:opacity .3s;
    pointer-events:none;white-space:nowrap;
}
.asmic-labels-always .asmic-label{opacity:1!important;}
.asmic-container:hover .asmic-label{opacity:1;}

/* Horizontal label positions */
.asmic-horizontal .asmic-label-before{left:16px;}
.asmic-horizontal .asmic-label-after{right:16px;}
.asmic-horizontal .asmic-label-top{top:16px;}
.asmic-horizontal .asmic-label-bottom{bottom:16px;}
.asmic-horizontal .asmic-label-middle{top:50%;transform:translateY(-50%);}

/* Vertical label positions */
.asmic-vertical .asmic-label-before{top:16px;left:50%;transform:translateX(-50%);}
.asmic-vertical .asmic-label-after{bottom:16px;left:50%;transform:translateX(-50%);}
.asmic-vertical .asmic-label-top.asmic-label-before{top:16px;}
.asmic-vertical .asmic-label-bottom.asmic-label-after{bottom:16px;}

/* ══ RESPONSIVE ══ */
@media(max-width:768px){
    .asmic-container:not(.asmic-fit-auto){height:300px!important;}
    .asmic-container{border-radius:12px;}
    .asmic-label{font-size:11px;letter-spacing:.5px;}
    .asmic-handle-grip{transform:scale(.85);}
}
@media(max-width:480px){
    .asmic-container:not(.asmic-fit-auto){height:240px!important;}
    .asmic-container{border-radius:10px;}
    .asmic-handle-grip{transform:scale(.75);}
}