/* ╔═══════════════════════════════════════════════════════════╗
   ║ LTC IMAGE COMPARE v3.0.0 — 8 presets visuels              ║
   ║ Chaque preset combine un container ET un handle cohérents  ║
   ╚═══════════════════════════════════════════════════════════╝ */

.wic-wrap{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

/* ──────────────── EN-TÊTE ──────────────── */
.wic-header{
    text-align:center;
    margin-bottom:32px;
}
.wic-wrap--align-left .wic-header{text-align:left;}
.wic-wrap--align-right .wic-header{text-align:right;}

.wic-eyebrow{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#1679BE;
    margin-bottom:14px;
    padding:6px 14px;
    border:1px solid currentColor;
    border-radius:999px;
    background:rgba(22,121,190,0.04);
}
.wic-heading{
    font-size:clamp(22px, 2.6vw, 30px);
    font-weight:700;
    margin:0 0 12px;
    color:#0f0f10;
    letter-spacing:-0.02em;
    line-height:1.2;
}
.wic-subheading{
    font-size:15.5px;
    color:#5a5a60;
    line-height:1.7;
    margin:0;
    max-width:600px;
}
.wic-wrap--align-center .wic-subheading{margin:0 auto;}
.wic-wrap--align-right .wic-subheading{margin:0 0 0 auto;}

/* ──────────────── CONTAINER COMMUN ──────────────── */
.wic-container{
    --ltc-primary:#1679BE;
    --ltc-secondary:#000000;
    position:relative;
    overflow:hidden;
    user-select:none;
    cursor:ew-resize;
    margin:0 auto;
    width:100%;
    border-radius:16px;
    transition:transform .55s cubic-bezier(.25,.8,.25,1);
}
.wic-container.wic-orient-vertical{cursor:ns-resize;}

/* Mode auto : pas de hauteur fixe */
.wic-container.wic-fit-auto{height:auto;}
.wic-container.wic-fit-auto .wic-after{position:relative;}
.wic-container.wic-fit-auto .wic-after img{
    width:100%;
    height:auto;
    display:block;
    user-select:none;
    pointer-events:none;
}
.wic-container.wic-fit-auto .wic-before{
    position:absolute;
    inset:0;
}
.wic-container.wic-fit-auto .wic-before img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    user-select:none;
    pointer-events:none;
}

/* Modes hauteur fixe */
.wic-container.wic-fit-cover img{object-fit:cover;}
.wic-container.wic-fit-contain img{object-fit:contain;}
.wic-container.wic-fit-fixed img{object-fit:cover;}
.wic-container.wic-fit-cover,
.wic-container.wic-fit-contain,
.wic-container.wic-fit-fixed{
    min-height:300px;
}
.wic-container.wic-fit-cover .wic-after,
.wic-container.wic-fit-contain .wic-after,
.wic-container.wic-fit-fixed .wic-after,
.wic-container.wic-fit-cover .wic-before,
.wic-container.wic-fit-contain .wic-before,
.wic-container.wic-fit-fixed .wic-before{
    position:absolute;
    inset:0;
}
.wic-container.wic-fit-cover .wic-after img,
.wic-container.wic-fit-cover .wic-before img,
.wic-container.wic-fit-contain .wic-after img,
.wic-container.wic-fit-contain .wic-before img,
.wic-container.wic-fit-fixed .wic-after img,
.wic-container.wic-fit-fixed .wic-before img{
    width:100%;
    height:100%;
    display:block;
    user-select:none;
    pointer-events:none;
}

.wic-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.wic-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:2;
}

/* Animation à l'apparition */
.wic-animate.wic-container{
    opacity:0;
    transform:translateY(20px) scale(0.98);
    animation:wicFadeIn .8s cubic-bezier(.25,.8,.25,1) forwards;
}
@keyframes wicFadeIn{
    to{opacity:1; transform:translateY(0) scale(1);}
}

/* Zoom au hover */
.wic-zoom .wic-after img,
.wic-zoom .wic-before img{
    transition:transform .8s cubic-bezier(.25,.8,.25,1);
}
.wic-zoom:hover .wic-after img,
.wic-zoom:hover .wic-before img{
    transform:scale(1.04);
}

/* ──────────────── HANDLE COMMUN ──────────────── */
.wic-handle{
    position:absolute;
    z-index:3;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .25s ease;
}

/* Horizontal */
.wic-orient-horizontal .wic-handle{
    top:0; bottom:0;
    left:var(--wic-pos, 50%);
    width:0;
    flex-direction:column;
}
.wic-orient-horizontal .wic-handle-line{
    position:absolute;
    top:0; bottom:0;
    left:50%;
    width:2px;
    background:#fff;
    transform:translateX(-50%);
    box-shadow:0 0 12px rgba(0,0,0,0.30);
}

/* Vertical */
.wic-orient-vertical .wic-handle{
    left:0; right:0;
    top:var(--wic-pos, 50%);
    height:0;
    flex-direction:row;
}
.wic-orient-vertical .wic-handle-line{
    position:absolute;
    left:0; right:0;
    top:50%;
    height:2px;
    background:#fff;
    transform:translateY(-50%);
    box-shadow:0 0 12px rgba(0,0,0,0.30);
}

.wic-handle-grip{
    position:relative;
    z-index:2;
    pointer-events:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .25s ease, box-shadow .25s ease;
    cursor:grab;
}
.wic-container:active .wic-handle-grip{cursor:grabbing;}
.wic-container:hover .wic-handle-grip{transform:scale(1.08);}

.wic-arrows{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
}
.wic-orient-horizontal .wic-arrows{flex-direction:row;}
.wic-orient-vertical .wic-arrows{flex-direction:column;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 1 — CLASSIC (cercle blanc + ligne fine)            ║
   ╚══════════════════════════════════════════════════════════╝ */
.wic-preset-classic{
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
.wic-preset-classic .wic-handle-grip{
    width:48px; height:48px;
    border-radius:50%;
    background:#fff;
    border:3px solid var(--ltc-primary);
    color:var(--ltc-primary);
    box-shadow:0 4px 14px rgba(0,0,0,0.20);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 2 — MODERN (cercle gradient rouge → gris)          ║
   ╚══════════════════════════════════════════════════════════╝ */
.wic-preset-modern{
    box-shadow:0 8px 28px rgba(22,121,190,0.18), 0 16px 40px rgba(0,0,0,0.06);
}
.wic-preset-modern .wic-handle-grip{
    width:52px; height:52px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--ltc-primary) 0%, var(--ltc-secondary) 100%);
    background-size:200% 200%;
    color:#fff;
    box-shadow:0 6px 18px rgba(22,121,190,0.45);
    animation:wicGradientShift 5s ease infinite;
    border:3px solid #fff;
}
@keyframes wicGradientShift{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 3 — MINIMAL (juste la ligne, pas de bouton)        ║
   ╚══════════════════════════════════════════════════════════╝ */
.wic-preset-minimal{
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
.wic-preset-minimal .wic-handle-line{
    width:3px;
    background:#fff;
    box-shadow:0 0 16px rgba(22,121,190,0.50), 0 0 32px rgba(22,121,190,0.30);
}
.wic-orient-vertical .wic-preset-minimal .wic-handle-line{
    height:3px;
    width:auto;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 4 — BADGE (pilule "⇆ GLISSER")                     ║
   ╚══════════════════════════════════════════════════════════╝ */
.wic-preset-badge{
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
.wic-preset-badge .wic-handle-grip{
    padding:10px 18px;
    background:linear-gradient(135deg, var(--ltc-primary) 0%, var(--ltc-secondary) 100%);
    background-size:200% 200%;
    color:#fff;
    border-radius:999px;
    box-shadow:0 6px 20px rgba(22,121,190,0.45);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.8px;
    text-transform:uppercase;
    animation:wicGradientShift 5s ease infinite;
    white-space:nowrap;
}
.wic-preset-badge .wic-handle-text{display:inline-block;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 5 — FRAME (cadre rouge avec halo blanc)            ║
   ╚══════════════════════════════════════════════════════════╝ */
.wic-preset-frame{
    padding:8px;
    background:#fff;
    border:3px solid var(--ltc-primary);
    box-shadow:0 0 0 8px #fff, 0 8px 24px rgba(22,121,190,0.20), 0 16px 40px rgba(0,0,0,0.06);
    border-radius:6px;
}
.wic-preset-frame .wic-layer{
    border-radius:2px;
    overflow:hidden;
}
.wic-preset-frame .wic-handle-grip{
    width:46px; height:46px;
    border-radius:8px;
    background:#fff;
    border:2px solid var(--ltc-primary);
    color:var(--ltc-primary);
    box-shadow:0 4px 14px rgba(0,0,0,0.20);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 6 — POLAROID (cadre photo blanc incliné)           ║
   ╚══════════════════════════════════════════════════════════╝ */
.wic-preset-polaroid{
    background:#fff;
    padding:14px 14px 56px;
    border-radius:6px;
    box-shadow:0 6px 18px rgba(0,0,0,0.12), 0 24px 48px rgba(0,0,0,0.08);
    transform:rotate(-1deg);
    transition:transform .55s cubic-bezier(.25,.8,.25,1);
}
.wic-preset-polaroid:hover{transform:rotate(0);}
.wic-preset-polaroid .wic-layer{
    border-radius:2px;
    overflow:hidden;
}
.wic-preset-polaroid .wic-handle-grip{
    width:44px; height:44px;
    border-radius:50%;
    background:#fff;
    border:2px solid var(--ltc-primary);
    color:var(--ltc-primary);
    box-shadow:0 4px 14px rgba(0,0,0,0.20);
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 7 — FLOATING (halos rouges/gris animés)            ║
   ╚══════════════════════════════════════════════════════════╝ */
.wic-preset-floating{
    box-shadow:0 4px 20px rgba(0,0,0,0.06), 0 24px 56px rgba(22,121,190,0.12);
    position:relative;
}
.wic-preset-floating::before{
    content:'';
    position:absolute;
    top:-40px; right:-40px;
    width:180px; height:180px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(22,121,190,0.25) 0%, transparent 70%);
    z-index:-1;
    animation:wicHaloFloat 14s ease-in-out infinite;
    pointer-events:none;
}
.wic-preset-floating::after{
    content:'';
    position:absolute;
    bottom:-30px; left:-30px;
    width:140px; height:140px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,0,0,0.30) 0%, transparent 70%);
    z-index:-1;
    animation:wicHaloFloat 16s ease-in-out infinite reverse;
    pointer-events:none;
}
@keyframes wicHaloFloat{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-15px, 15px) scale(1.08);}
}
.wic-preset-floating .wic-handle-grip{
    width:50px; height:50px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--ltc-primary) 0%, var(--ltc-secondary) 100%);
    background-size:200% 200%;
    color:#fff;
    box-shadow:0 6px 18px rgba(22,121,190,0.45), 0 0 0 4px rgba(255,255,255,0.30);
    animation:wicGradientShift 5s ease infinite;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ PRESET 8 — BRUTALIST (bordure noire + ombre carrée)       ║
   ╚══════════════════════════════════════════════════════════╝ */
.wic-preset-brutalist{
    border:3px solid #000;
    box-shadow:5px 5px 0 0 #000, 10px 10px 24px rgba(0,0,0,0.10);
    border-radius:0 !important;
}
.wic-preset-brutalist .wic-handle-grip{
    width:44px; height:44px;
    border-radius:0;
    background:#fff;
    border:3px solid #000;
    color:#000;
    box-shadow:3px 3px 0 0 #000;
    font-weight:800;
}
.wic-preset-brutalist .wic-handle-line{
    background:#000 !important;
    width:3px;
    box-shadow:none;
}
.wic-orient-vertical .wic-preset-brutalist .wic-handle-line{
    height:3px;
    width:auto;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ LABELS                                                    ║
   ╚══════════════════════════════════════════════════════════╝ */
.wic-label{
    position:absolute;
    z-index:4;
    background:rgba(15,15,16,0.85);
    color:#fff;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.5px;
    text-transform:uppercase;
    padding:8px 14px;
    border-radius:999px;
    pointer-events:none;
    transition:opacity .35s ease;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    display:inline-flex;
    align-items:center;
    gap:6px;
    line-height:1;
}
.wic-label i{font-size:11px;}

/* Style label : SQUARE */
.wic-label-square .wic-label{
    border-radius:6px;
}

/* Style label : MINIMAL (juste texte avec ombre) */
.wic-label-minimal .wic-label{
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    text-shadow:0 2px 8px rgba(0,0,0,0.80);
    padding:0;
    color:#fff;
    font-size:13px;
}

/* Style label : BADGE (icône + texte, fond blanc) */
.wic-label-badge .wic-label{
    background:#fff;
    color:#0f0f10;
    border:1px solid rgba(15,15,16,0.10);
    box-shadow:0 4px 12px rgba(0,0,0,0.10);
    backdrop-filter:none;
}
.wic-label-badge .wic-label--before i{color:#5a5a60;}
.wic-label-badge .wic-label--after i{color:var(--ltc-primary);}

/* Positions */
.wic-orient-horizontal .wic-label--before{left:16px;}
.wic-orient-horizontal .wic-label--after{right:16px;}
.wic-label--pos-top.wic-label--before,
.wic-label--pos-top.wic-label--after{top:16px;}
.wic-label--pos-bottom.wic-label--before,
.wic-label--pos-bottom.wic-label--after{bottom:16px;}
.wic-label--pos-middle.wic-label--before,
.wic-label--pos-middle.wic-label--after{top:50%; transform:translateY(-50%);}

/* Position CORNERS */
.wic-label--pos-corners.wic-label--before{top:16px; left:16px; bottom:auto; right:auto;}
.wic-label--pos-corners.wic-label--after{bottom:16px; right:16px; top:auto; left:auto;}

/* Vertical : labels en haut/bas */
.wic-orient-vertical .wic-label--before{top:16px; left:50%; transform:translateX(-50%);}
.wic-orient-vertical .wic-label--after{bottom:16px; left:50%; transform:translateX(-50%);}
.wic-orient-vertical .wic-label--pos-corners.wic-label--before{top:16px; left:16px; transform:none;}
.wic-orient-vertical .wic-label--pos-corners.wic-label--after{bottom:16px; right:16px; left:auto; transform:none;}

/* Mode "labels au hover only" */
.wic-labels-hover .wic-label{opacity:0;}
.wic-labels-hover:hover .wic-label{opacity:1;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ RESPONSIVE                                                ║
   ╚══════════════════════════════════════════════════════════╝ */
@media(max-width:768px){
    .wic-header{margin-bottom:24px;}
    .wic-preset-frame,
    .wic-preset-polaroid{padding:6px;}
    .wic-preset-polaroid{padding-bottom:36px;}
    .wic-preset-classic .wic-handle-grip{width:40px; height:40px;}
    .wic-preset-modern .wic-handle-grip{width:44px; height:44px;}
    .wic-preset-frame .wic-handle-grip{width:38px; height:38px;}
    .wic-preset-polaroid .wic-handle-grip{width:38px; height:38px;}
    .wic-preset-floating .wic-handle-grip{width:42px; height:42px;}
    .wic-preset-brutalist .wic-handle-grip{width:38px; height:38px;}
    .wic-preset-badge .wic-handle-grip{padding:8px 14px; font-size:11px;}
    .wic-label{font-size:11px; padding:6px 12px;}
    .wic-label-minimal .wic-label{font-size:12px;}
    .wic-orient-horizontal .wic-label--before,
    .wic-orient-horizontal .wic-label--after{
        max-width:calc(50% - 18px);
    }
}