@keyframes turn {
    0%{transform:   skewX(0deg);}
    50%{transform:  skewX(70deg);}
    80%{transform: skewX(-70deg);}
    100%{transform: skewX(0deg);}
}
#roue {
    display: flex;
    flex-direction: column;
    align-items: center;
    --var_rotate_pointer: 0deg;
    --var_rotate_roue: -20deg;
    user-select: none;
    width: 50%;
}
.box_roue {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.img_noombre {
    z-index: 2;
}
.img_ombre {
    pointer-events: none;
    position: absolute;
    z-index: 1 !important;
    /*-ms-transform:matrix(    var(--var_scaleX),   var(--var_skewY),   var(--var_skewX),   var(--var_scaleY),   var(--var_translateX),  var(--var_translateY));
    -webkit-transform:matrix(var(--var_scaleX),   var(--var_skewY),   var(--var_skewX),   var(--var_scaleY),   var(--var_translateX),  var(--var_translateY));*/
    /*transform:matrix(1.10,0.02,-1.41,0.78,-3,24);*/
}
#box_roue_n1 {
    pointer-events: none;
    transform: translateY(12vh);
    z-index: 5;
}
#box_roue_n2 {
    transform: translateY(9vh);
    z-index: 4;
}
#box_roue_n3 {
    pointer-events: none;
}

#img_roue {
    rotate: var(--var_rotate_roue);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s rotate;
    border-radius: 123123%;
    cursor: url('../sprit/cursor_pointer.svg'), no-drop;
}
#img_pointer {
    rotate: var(--var_rotate_pointer);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s rotate;
}
#roue:has(#img_roue:hover) {
    --var_rotate_roue: 0deg;
    --var_rotate_pointer: 90deg;
}
#img_pointer_ombre {
    scale: 1;
}
#img_pointer_ombre {
    --var_scaleX: 1;
    --var_skewY: 0;
    --var_skewX: -0.7;
    --var_scaleY: 0.5;
    --var_translateX: 685;
    --var_translateY: 340;
    --var_scale: 0.7;

    transform:matrix(var(--var_scaleX),
                     var(--var_skewY),
                     var(--var_skewX),
                     var(--var_scaleY),
                     var(--var_translateX),
                     var(--var_translateY))
             scale(var(--var_scale));
}
#img_roue_ombre {
    --var_scaleX: 4.5;
    --var_skewY: -1;
    --var_skewX: 0.55;
    --var_scaleY: 2;
    --var_translateX: 547;
    --var_translateY: 195;

    transform:matrix(var(--var_scaleX),
                     var(--var_skewY),
                     var(--var_skewX),
                     var(--var_scaleY),
                     var(--var_translateX),
                     var(--var_translateY));
}
#img_trepier_ombre {
    --var_scaleX: 1.10;      /*scaleX()    */
    --var_skewY: 0.02;     /*skewY()     */
    --var_skewX: -1.71;   /*skewX()     */
    --var_scaleY: 0.88;   /*scaleY()    */
    --var_translateX: 300;   /*translateX()*/
    --var_translateY: 20;   /*translateY()*/
    transform:matrix(var(--var_scaleX),
                     var(--var_skewY),
                     var(--var_skewX),
                     var(--var_scaleY),
                     var(--var_translateX),
                     var(--var_translateY))
                     rotateY(180deg);


    /*matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())*/
    /*transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(51deg) rotateZ(63deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);*/
}




/* telephone */
@media screen and (max-width: 810px) {
    .img_ombre {
        display: none;
    }
    .img_noombre {
        width: 50%;
    }
    /*#img_trepier {
        height: 50% !important;
    }*/
    #box_roue_n1 {
        width: 40%;
    }
    #box_roue_n2 {
        width: 200%;
    }
    #box_roue_n3 {
        width: 150%;
    }
}