:root{
--wc-top: 8%;
--wc-height: 55%;
--wc-width: 60%;
--wc-left: 0%;
--wc-block-height: 20%;
--wc-block-gap: 0%;
--wc-block-count: 4;
--wc-border: 1px rgba(0,0,0,0.06);
--wc-shadow: linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0));
--wc-anim-duration: 700ms;
--wc-anim-ease: cubic-bezier(.2,.9,.3,1);
}

/* wrappers */
.white-cut-tl,
.white-cut-bl,
.white-cut-tr,
.white-cut-br {
    position: relative;
    display: block;
    overflow: hidden;
}

.white-cut-tl img,
.white-cut-bl img,
.white-cut-tr img,
.white-cut-br img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* pseudo-élément bandes */
.white-cut-tl::before,
.white-cut-bl::before,
.white-cut-tr::before,
.white-cut-br::before {
    content: "";
    position: absolute;
    top: var(--wc-top);
    left: var(--wc-left, 0);
    width: var(--wc-width);
    height: var(--wc-height);
    pointer-events: none;
    z-index: 1;

    background:
    linear-gradient(#fff 0 0) 0 0 / var(--wc-bg1-width) var(--wc-block-height) no-repeat,
    linear-gradient(#fff 0 0) 0 calc(var(--wc-block-height) + var(--wc-block-gap)) / var(--wc-bg2-width) var(--wc-block-height) no-repeat,
    linear-gradient(#fff 0 0) 0 calc((var(--wc-block-height) + var(--wc-block-gap)) * 2) / var(--wc-bg3-width) var(--wc-block-height) no-repeat,
    linear-gradient(#fff 0 0) 0 calc((var(--wc-block-height) + var(--wc-block-gap)) * 3) / var(--wc-bg4-width) var(--wc-block-height) no-repeat;

    transition: background-size var(--wc-anim-duration) var(--wc-anim-ease);
    /* box-shadow: 0 0 0 var(--wc-border) inset; */
}

/* largeurs des bandes au repos — valeurs distinctes par variante */
.white-cut-tl {
    --wc-bg1-width: 95%; --wc-bg2-width: 80%; --wc-bg3-width: 90%; --wc-bg4-width: 85%;
}
.white-cut-bl {
    --wc-bg1-width: 75%; --wc-bg2-width: 92%; --wc-bg3-width: 60%; --wc-bg4-width: 88%;
}
.white-cut-tr {
    --wc-bg1-width: 88%; --wc-bg2-width: 65%; --wc-bg3-width: 95%; --wc-bg4-width: 72%;
}
.white-cut-br {
    --wc-bg1-width: 70%; --wc-bg2-width: 88%; --wc-bg3-width: 78%; --wc-bg4-width: 95%;
}

/* hover morphing — valeurs distinctes par variante */
.white-cut-tl:hover::before {
    --wc-bg1-width: 70%; --wc-bg2-width: 90%; --wc-bg3-width: 25%; --wc-bg4-width: 45%;
}
.white-cut-bl:hover::before {
    --wc-bg1-width: 45%; --wc-bg2-width: 72%; --wc-bg3-width: 88%; --wc-bg4-width: 30%;
}
.white-cut-tr:hover::before {
    --wc-bg1-width: 60%; --wc-bg2-width: 35%; --wc-bg3-width: 80%; --wc-bg4-width: 55%;
}
.white-cut-br:hover::before {
    --wc-bg1-width: 85%; --wc-bg2-width: 50%; --wc-bg3-width: 40%; --wc-bg4-width: 78%;
}

/* ombre interne */
.white-cut-tl::after,
.white-cut-bl::after,
.white-cut-tr::after,
.white-cut-br::after {
content: "";
position: absolute;
top: var(--wc-top);
left: var(--wc-left, 0);
width: var(--wc-width);
height: var(--wc-height);
pointer-events: none;
z-index: 0;
background: var(--wc-shadow);
/* Option alternative si nécessaire :
background-image: var(--wc-shadow);
background-size: 100% 100%;
background-repeat: no-repeat;
*/
mix-blend-mode: multiply;
transition: opacity var(--wc-anim-duration) var(--wc-anim-ease);
}

/* côté droit : miroir */
.white-cut-tr,
.white-cut-br {
--wc-left: auto;
--wc-right: var(--wc-left, 0);
}

.white-cut-tr::before,
.white-cut-tr::after,
.white-cut-br::before,
.white-cut-br::after {
    left: auto;
    right: 0;
    transform-origin: center;
    transform: scaleX(-1);
    /* transform: scaleY(-1); */
}

/* positions verticales pour top/bottom */
.white-cut-tl::before,
.white-cut-tl::after,
.white-cut-tr::before,
.white-cut-tr::after {
top: var(--wc-top);
}

.white-cut-bl::before,
.white-cut-bl::after,
.white-cut-br::before,
.white-cut-br::after {
/* bottom: var(--wc-top); */
bottom: -10%;
top: auto;
}

/* responsive */
@media (max-width:720px){
.white-cut-tl,
.white-cut-bl,
.white-cut-tr,
.white-cut-br {
--wc-top:6%;
--wc-height:88%;
--wc-width:86%;
--wc-left:4%;
--wc-block-height:26%;
--wc-block-gap:2%;
--wc-bg1-width: 86%;
--wc-bg2-width: 86%;
--wc-bg3-width: 86%;
--wc-bg4-width: 86%;
}
}