:root{
    --wheelctWidth: 480px;
    --wheelctHeight: 480px;
    
    --wheelctWidthTB: 46vw;
    --wheelctHeightTB: 46vw;

    --wheelctWidthMB: 88vw;
    --wheelctHeightMB: 88vw;

}

#wheelPopup{ 
    display: flex; flex: none; justify-content: center; align-items: center;
    position: fixed; top:0; left: 0; z-index: 250; width: 100vw; height: 100vh; 
    font-family: 'Open Sans', sans-serif; background: #0005;
    padding-left: calc( var(--wheelctWidth) / 3 );
}
#wheelPopup.recentered{ padding-left: 0; transition: all 1s linear; }
#wheelPopup ovl{ 
    display: flex; flex: none; justify-content: center; align-items: center;
	background: url(images/wheels/popback.png) no-repeat #010939; border-radius: 1vw;
    background-position: top calc( var(--wheelctWidth) * 1.68 / 4.5 * -1 ) left calc( var(--wheelctWidth) * 1.68 / 2.1 * -1 );
    background-size: calc( var(--wheelctWidth) * 1.68 ); 
    animation: ovlzoom 0.75s linear both; animation-delay: 0.4s;
}    
#wheelPopup.recentered ovl{ background-position: top calc( var(--wheelctWidth) * 1.68 / 4.5 * -1 ) left -5vw; transition: all 1s linear; }
@keyframes ovlzoom{
    from { background-size: 50%;  }
    to { background-size: calc( var(--wheelctWidth) * 1.68 );  }
}
#wheelPopup in{ 
	display: flex; flex: none; justify-content: space-between; align-items: center; width: 730px; aspect-ratio: 4/3; border-radius: 1vw;
	background: url(images/wheels/popfront.svg) no-repeat; position: relative;
    background-position: center left calc( var(--wheelctWidth) * 1.68 / 2.5 * -1 );
    background-size: calc( var(--wheelctWidth) * 1.68 ); 
    animation: inzoom 0.75s linear both; animation-delay: 0.2s;

}
#wheelPopup.recentered in{ background-position: center center; transition: all 1s linear; }
@keyframes inzoom{
    from { background-size: 50%;  }
    to { background-size: calc( var(--wheelctWidth) * 1.68 );  }
}


#wheelPopup #tools{ 
    display: flex; flex: none; align-items: center; justify-content: flex-end; width: 100%; padding: 0 1em; 
    position: absolute; top: -0.8em; left: 0; height: 1.8em;
}
#wheelPopup #tools a{ text-decoration: none; color: #fff; font-size: 2em; margin-left: 0.25em; }



#wheelPopup #sideblock{
    display: flex; flex: 1; height: 100%; align-items: flex-start; overflow: visible;
}
#wheelPopup.recentered #sideblock{ overflow: hidden; }
#wheelPopup #sideblock sbin{
    display: flex; flex: 1; width: 100%; height: 100%; flex-direction: column; justify-content: space-between; align-items: stretch; font-size: 0.9em; padding-top: 2em;
}

#wheelPopup #sideblock #middle, #wheelPopup #sideblock #middle #mfixed, #wheelPopup #sideblock #middle #infos nfoin{ 
    display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; position: relative; 
}
#wheelPopup #sideblock #middle #logo{ display: flex; flex: none; align-items: center; justify-content: center; position: relative; z-index: 10; }
#wheelPopup #sideblock #middle .mascott{ display: block; width: 12em; aspect-ratio: 1/1; background: url(images/wheels/wolf_nico_violet.png) no-repeat center bottom; background-size: contain;  }
#wheelPopup #sideblock #middle .logo{ 
    display: block; width: 13em; aspect-ratio: 2/1; margin-left: -2em;
    background: url(images/wheels/bw_logo.png) no-repeat center bottom; background-size: contain;
}
#wheelPopup #sideblock #middle #wspin{ 
    display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 7em;
    text-align: center; line-height: 0.25em; padding-top: 3em; margin-top: -3em; z-index: 5;
    background: url(images/wheels/wspin.png) no-repeat center center; background-size: contain; 
    animation: wspin 0.75s linear both; animation-delay: 0.1s;
}
@keyframes wspin{
    from { margin-top: -10em;  }
    to { margin-top: -3em;  }
}
#wheelPopup #sideblock #middle .cta{ 
    margin-top: 2em; font-size: 1.5em; background-image: linear-gradient(to top,var(--from-primary-color),var(--to-primary-color)); color: #fff; 
    box-shadow: 0 0.25em 2.5em var(--from-primary-color), 0 0.25em 1em var(--from-primary-color); padding: 0;
}
#wheelPopup #sideblock #middle .cta lab{ 
    display: flex; flex: none; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0.5em 1.5em;
    text-shadow: 0 0em 2px var(--to-primary-color); background: url() no-repeat left center;
    background: url(images/wheels/bt_reflect.png) no-repeat; background-position: center left -50%; background-size: auto 120%; 
    animation: bt_reflect 3s linear both infinite;
}
@keyframes bt_reflect{
    from { background-position: center left -800%;  }
    to { background-position: center left 800%;  }
}
#wheelPopup #sideblock #middle .mzone{ width: 100%; padding: 0 2em; }
#wheelPopup #sideblock #middle #infos{ display: none; font-size: 0.9em; }
#wheelPopup #sideblock #middle #infos img{ width: 3em; aspect-ratio: 1/1; }
#wheelPopup #sideblock #middle #infos table tr td{ padding: 0.5em; }

#wheelPopup #sideblock #middle #wins{ display: none; }
#wheelPopup #sideblock #middle #wins article{ display: flex; flex: none; align-items: center; padding: 0.25em 0; }
#wheelPopup #sideblock #middle #wins article span{ display: flex; flex: 1; align-items: center; }
#wheelPopup #sideblock #middle #wins article cell{ display: flex; flex: none; align-items: center; justify-content: flex-end; }
#wheelPopup #sideblock #middle #wins article icon{ height: 2em; aspect-ratio: 1/1; margin-left: 0.5em; }
#wheelPopup #sideblock #middle #wins .closeMzone{ margin-top: 2em; }

#wheelPopup #sideblock #winners{ padding: 1em; }
#wheelPopup #sideblock #winnersList{ 
    display: flex; flex: none; align-items: center; justify-content: flex-end; overflow: hidden;
    width: calc( 380px + ( var(--wheelctWidth) - ( var(--wheelctWidth) / 3 ) ) );
    margin-left: calc( ( var(--wheelctWidth) - ( var(--wheelctWidth) / 3 ) ) * -1 );
    mask-image: linear-gradient(to right,transparent 0 22%, black 80% 100% );
}
#wheelPopup #sideblock #winnersList article{ display: flex; flex: none; align-items: center; padding: 0.25em 1em; margin-left: 0.5em; background: #4268ff47; border-radius: 1em; }
#wheelPopup #sideblock #winnersList article icon{ width: 1em; aspect-ratio: 1/1; margin-left: 0.5em; }

#wheelPopup #sideblock .closeMzone{ 
    display: flex; flex: none; align-items: center; justify-content: center;
    text-decoration: none; color: var(--to-primary-color); padding: 0.5em 1em; margin-top: -0.5em; font-size: 1.1em; 
}
#wheelPopup #sideblock .closeMzone i{ margin: 0 0.33em; }







#wheelsView{ 
    display: flex; flex: none; justify-content: flex-end; align-items: center; position: relative; /*width: 100%;*/ height: var(--wheelctHeight); 
    width: calc( var(--wheelctWidth) - ( var(--wheelctWidth) / 3 ) );
}
#wheelPopup.recentered #wheelsView{ justify-content: center; transition: all 1s linear; /*voir wheel responsive*/ }

#wheelscontenaire{ 
    display: flex; flex: none; flex-direction: column; justify-content: center; align-items: center; width: var(--wheelctWidth); height: var(--wheelctHeight); position: relative; 
    animation: wheelroll 0.75s linear both; transform-origin: center center;
}
@keyframes wheelroll{
    from { transform: translate(-15vw, 0) rotate(-45deg); opacity: 0; }
    to { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
#wheelsView.resShow #wheelscontenaire{ animation: wheelfadeout 1.25s linear both!important; }
@keyframes wheelfadeout{
    from { opacity: 1; }
    to { opacity: 0; }
}

#wheelscontenaire .overlay{ 
    display: flex; flex: none; justify-content: space-between; align-items: center; width: var(--wheelctWidth); height: var(--wheelctHeight); 
    position: absolute; top: 0; left: 0;
}
#wheelscontenaire canvas{ 
    width: 77%; aspect-ratio: 1 / 1;
    background-image: linear-gradient(to bottom,var(--from-primary-color),var(--to-primary-color)); border-radius: 100%; 
}
#wheelscontenaire .overlay pic{ background-size: contain; }

#wheelscontenaire .overlay #wheels_back{ 
    display: block; width: 100%; border-radius: 100%; aspect-ratio: 1 / 1; /*box-shadow: 0.15em 0.33em 1em #0007;*/ background-image: url(images/wheels/wheels_back.svg)
}
#wheelscontenaire .overlay #wheels_back2{ 
    display: block; width: 100%; border-radius: 100%; aspect-ratio: 1 / 1; box-shadow: 0.15em 0.33em 1em #0007; background-image: linear-gradient(270deg,#010958,#1108bf);
}
#wheelscontenaire .overlay #wheels_cache{ 
    display: flex; flex: none; align-items: center; justify-content: center; width: 18%; aspect-ratio: 1 / 1; text-align: center;
    border-radius: 100%; box-shadow: 0.15em 0.33em 1em #0007; background-image: url(images/wheels/wheels_cache.svg);

}
#wheelscontenaire .overlay #wheels_cache h4{ font-size: 0.88em; font-weight: bolder; line-height: 1em; color: #FFBD20; text-shadow: 0 1px 1px #fff, 0 -1px 1px #FD6E02; }
#wheelscontenaire .overlay #wheels_arrow{ 
    display: block; width: 11%; aspect-ratio: 0.6 / 1; margin-right: 3.5%; background: url(images/wheels/wheels_arrow.svg) no-repeat right center; background-size: contain;
    filter: drop-shadow( -0.5em 0 0.2em #000b );
}





#wheelscontenaire .overlay.lightshow{ overflow: hidden; }
#wheelscontenaire .overlay.lightshow, #wheelscontenaire .overlay.light{
    align-items: flex-start; transform-origin: center center;
}
#wheelscontenaire .overlay #wheels_ampoules{
    display: block; width: 8%; aspect-ratio: 1 / 6;  margin-top: 2.5%; background: url(images/wheels/wheels_ampoules_off.svg) no-repeat top center; background-size: contain;
}




#wheelscontenaire .overlay.lightsegshow{ overflow: hidden; }
#wheelscontenaire .overlay.lightsegshow, #wheelscontenaire .overlay.light{
    align-items: flex-start; transform-origin: center center;
}
#wheelscontenaire .overlay #wheels_lightseg{
    display: block; width: 11.05%; aspect-ratio: 1 / 8; background: no-repeat top center; background-size: contain;
}
#wheelscontenaire .overlay #wheels_lightseg.lightseg_off{ background-image: url(images/wheels/wheels_lightseg_off.svg); }
#wheelscontenaire .overlay #wheels_lightseg.lightseg_on img{ /*background-image: url(images/wheels/wheels_lightseg_on.svg);*/ display: flex; width: 100%;  }
#wheelscontenaire .overlay.lightsegshow.lss_on .lightseg{ opacity: 0; }
#wheelscontenaire .overlay.lightsegshow.lss_on .lightseg:first-child{ opacity: 1; }




#wheelscontenaire .overlay.sflightshow{ overflow: hidden; }
#wheelscontenaire .overlay.sflightshow, #wheelscontenaire .overlay.sflight{
    align-items: center; transform-origin: center center;
}
#wheelscontenaire .overlay.sflight pic{
    display: block; width: 94%; aspect-ratio: 1 / 1; background: no-repeat top center; background-size: contain; transform-origin: center center;
}
#wheelscontenaire .overlay.sflightshow .sflInpair{ animation: rotating_icw 12s linear infinite; }
#wheelscontenaire .overlay.sflightshow .sflPair{ animation: rotating_cw 12s linear infinite; }
@keyframes rotating_cw {
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}
@keyframes rotating_icw {
    from{ transform: rotate(360deg); }
    to{ transform: rotate(0deg); }
}

/*
.click{ 
    animation: clickanim 0.25s linear infinite; 
}
@keyframes clickanim{
    0%   { transform: rotate(-20deg); }
    100% { transform: rotate(0deg); }
}
*/