/*
 * Copyright (c) EDF 2020.
 */
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background-color: #555555;
font-family: sans-serif
}
div, p {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#container {
width: 900px;
height: 560px;
margin: auto;
background: url('../images/fond.png') no-repeat;
text-align: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
overflow: hidden;
}
#close {
width: 34px;
height: 34px;
background: url('../images/fermer.png') no-repeat;
position: absolute;
top: 10px;
right: 10px;
z-index: 500;
cursor: pointer;
display: block;
}
#chrono {
width: 58px;
height: 74px;
background: url('../images/chrono.png') no-repeat;
position: absolute;
top: 10px;
left: 10px;
z-index: 500;
cursor: default;
}
#chrono.blink {
-webkit-animation: blinkChrono 0.8s linear infinite;
-moz-animation: blinkChrono 0.8s linear infinite;
-ms-animation: blinkChrono 0.8s linear infinite;
animation: blinkChrono 0.8s linear infinite;
}
#chrono.blinkFast {
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
-ms-animation-duration: 0.4s;
animation-duration: 0.4s;
}
#chrono canvas {
position: absolute;
top: 24px;
left: 7px;
}
#score {
width: 100px;
height: 30px;
line-height: 30px;
padding: 5px 0 5px 20px;
border-radius: 3px;
background: rgba(199, 178, 153, 0.9);
position: absolute;
top: 40px;
left: 50px;
z-index: 400;
text-align: left;
color: #40312f;
font-weight: bold;
cursor: default;
}
#startMessage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5000;
cursor: default;
}
#startMessage div {
width: 80%;
min-height: 82px;
max-height: 40%;
padding: 30px 10%;
background: #e16d62;
position: absolute;
top: 132px;
left: 0;
font-size: 23px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
}
#gameContainer, #gameContainer div, .frigo img {position: absolute;}
#gameContainer, .frigoContainer {
width: 900px;
height: 560px;
}
.firstFrigoInfo {
width: 100%;
height: 65px;
background: url('../images/arrow.png') no-repeat center 20px;
top: 40px;
color: #ffd418;
font-weight: bold;
text-transform: uppercase;
-webkit-animation: firstFrigoInfoAnim 1s infinite linear;
-moz-animation: firstFrigoInfoAnim 1s infinite linear;
-ms-animation: firstFrigoInfoAnim 1s infinite linear;
animation: firstFrigoInfoAnim 1s infinite linear;
}
.frigo {
width: 122px;
height: 318px;
background: url('../images/i18n/fr/sprite_combi_blanc.png') no-repeat;
top: 105px;
left: 380px;
z-index: 100;
cursor: pointer;
-webkit-transition: left 1.2s linear;
-moz-transition: left 1.2s linear;
-ms-transition: left 1.2s linear;
transition: left 1.2s linear;
}
.frigo.old {left: -122px; cursor: default;}
.frigo.new {left: 900px; cursor: default;}
.frigo.open {width: 210px; background-position: 0 -318px;}
.frigo.open.frontJoint {background-position: 0 -636px;}
.frigo.open.frontThermometre {background-position: 0 -954px;}
.frigo.back {width: 122px; background-position: 0 -1272px !important; cursor: default;}
.frigo.back.backWrong {background-position: 0 -1590px !important;}
.frigo .congelateur, .frigo.back .congelateur, .frigo.open.back .congelateur {
width: 106px;
height: 49px;
top: 24px;
left: 7px;
display: none;
}
.frigo.open .congelateur {display: block;}
.infoFrigo {
width: 21px;
height: 21px;
background: url('../images/croix.png') no-repeat;
z-index: 100;
display: none;
}
.infoFrigo.ok {background: url('../images/ok.png') no-repeat;}
.infoFrigo.joint {top: 140px; left: 195px;}
.infoFrigo.brosse {top: 115px; left: 50px;}
.infoFrigo.spatule {top: 35px; left: 30px;}
.infoFrigo.thermometre {top: 15px; left: 100px;}
.frigo.combi .infoFrigo.thermometre {top: 90px; left: 100px;}
.message {
width: 220px;
padding: 10px;
border-radius: 3px;
background: rgba(255, 212, 24, 0.9);
z-index: 100;
font-size: 16px;
text-align: center;
color: #40312f;
display: none;
cursor: default;
}
.message.joint {top: 130px; left: 220px;}
.message.brosse {top: 105px; left: 125px;}
.message.spatule {top: 25px; left: -245px;}
.message.thermometre {top: 70px; left: 130px;}
.frigo.open .infoFrigo, .frigo.open .message {display: block;}
.frigo.back .infoFrigo, .frigo.back .message {display: none;}
.frigo.open .infoFrigo.brosse, .frigo.open .message.brosse {display: none;}
.frigo.back .infoFrigo.brosse, .frigo.back .message.brosse {display: block;}
.levier {
width: 235px;
height: 152px;
background: url('../images/support_levier.png') no-repeat;
bottom: 0;
right: 40px;
z-index: 200;
cursor: pointer;
}
.levier div {
width: 171px;
height: 26px;
background: url('../images/sprite_levier.png') no-repeat 0 -26px;
top: 20px;
left: 40px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.levier.active div {
background-position: 0 0;
-webkit-transform: rotate(160deg);
-moz-transform: rotate(160deg);
-ms-transform: rotate(160deg);
transform: rotate(160deg);
-webkit-animation: none !important;
-moz-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
.levier.blink div {
-webkit-animation: blink 0.8s steps(1, end) infinite;
-moz-animation: blink 0.8s steps(1, end) infinite;
-ms-animation: blink 0.8s steps(1, end) infinite;
animation: blink 0.8s steps(1, end) infinite;
}
.validPoints {
width: 80%;
padding: 0 10%;
color: #555555;
font-size: 40px;
position: absolute;
top: 60px;
left: 0;
z-index: 500;
text-align: center;
}
.validPoints.brosse {
color: #ffffff;
text-shadow: 1px 2px 6px #000;
}
.validPoints.joint {top: 170px; text-align: right;}
.validPoints.spatule {top: 40px; text-align: left;}
.tapisRoulant {
width: 100%;
height: 56px;
border: 8px solid #40312f;
border-left: 0;
border-right: 0;
background: #9e9483;
top: 414px;
left: 0;
}
.tapisRoulant .roue {
width: 50px;
height: 50px;
background: url('../images/roue_tapis.png') no-repeat;
top: 3px;
}
.tapisRoulant .roue.active {
-webkit-animation: rotation 0.5s infinite linear;
-moz-animation: rotation 0.5s infinite linear;
-ms-animation: rotation 0.5s infinite linear;
animation: rotation 0.5s infinite linear;
}
.support {
width: 410px;
height: 31px;
background: #e64332;
top: 529px;
left: 245px;
z-index: 300;
}
.support .infoSupport {
width: 370px;
height: 15px;
padding: 5px 10px;
border-radius: 3px;
background: rgba(255, 212, 24, 0.9);
top: 3px;
left: 10px;
z-index: 500;
font-size: 16px;
text-align: center;
color: #40312f;
display: none;
cursor: default;
}
.support .tool {
bottom: 7px;
z-index: 200;
transition: left 0.2s linear;
cursor: pointer;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.support .tool.brosse {
width: 58px;
height: 91px;
background: url('../images/outil_brosse.png') no-repeat;
}
.support .tool.joint {
width: 31px;
height: 112px;
background: url('../images/outil_joint.png') no-repeat;
}
.support .tool.spatule {
width: 66px;
height: 145px;
background: url('../images/outil_spatule.png') no-repeat;
}
.support .tool.thermometre {
width: 40px;
height: 139px;
background: url('../images/outil_thermometre.png') no-repeat;
}
.support .tool.brosse.useTool {
-webkit-animation: useBrosse 2.5s linear;
-moz-animation: useBrosse 2.5s linear;
-ms-animation: useBrosse 2.5s linear;
animation: useBrosse 2.5s linear;
}
.support .tool.joint.useTool {
-webkit-animation: useJoint 2.5s linear;
-moz-animation: useJoint 2.5s linear;
-ms-animation: useJoint 2.5s linear;
animation: useJoint 2.5s linear;
}
.support .tool.joint.useTool.useToolCombi {
-webkit-animation: useJointCombi 2.5s linear;
-moz-animation: useJointCombi 2.5s linear;
-ms-animation: useJointCombi 2.5s linear;
animation: useJointCombi 2.5s linear;
}
.support .tool.spatule.useTool {
-webkit-animation: useSpatule 3.5s linear;
-moz-animation: useSpatule 3.5s linear;
-ms-animation: useSpatule 3.5s linear;
animation: useSpatule 3.5s linear;
}
.support .tool.thermometre.useTool {
-webkit-animation: useThermometre 2s linear;
-moz-animation: useThermometre 2s linear;
-ms-animation: useThermometre 2s linear;
animation: useThermometre 2s linear;
}
.support .tool.thermometre.useTool.useToolCombi {
-webkit-animation: useThermometreCombi 2.5s linear;
-moz-animation: useThermometreCombi 2.5s linear;
-ms-animation: useThermometreCombi 2.5s linear;
 animation: useThermometreCombi 2.5s linear;
}
.support .tool.wrongTool {
-webkit-animation: wrongTool 0.3s linear;
-moz-animation: wrongTool 0.3s linear;
-ms-animation: wrongTool 0.3s linear;
animation: wrongTool 0.3s linear;
}
.tool.useTool+.ombre {opacity: 0;}
.ombre {
height: 31px;
-webkit-transition: left 0.2s linear, opacity  0.2s linear;
-moz-transition: left 0.2s linear, opacity  0.2s linear;
-ms-transition: left 0.2s linear, opacity  0.2s linear;
transition: left 0.2s linear, opacity  0.2s linear;
}
.tool.brosse+.ombre, .tool.thermometre+.ombre {
width: 71px;
background: url('../images/ombre_thermometre_brosse.png') no-repeat;
}
.tool.joint+.ombre, .tool.spatule+.ombre {
width: 59px;
background: url('../images/ombre_spatule_joint.png') no-repeat;
}
#endContainer {
width: 100%;
height: 100%;
display: none;
position: absolute;
z-index: 1000;
font-weight: bold;
}
#endContainer div {
background: url('../images/glacon.png') no-repeat;
background-size: 100%;
display: none;
position: absolute;
z-index: 1000;
}
#endContainer .restart, #endContainer .quitter {cursor: pointer;}
#endContainer .score {font-size: 40px;}
#endContainer .score p {padding-top: 5px;}
#endContainer .score span {font-size: 16px;}
#endContainer .restart p, #endContainer .quitter p {
padding-top: 65px;
}
#endContainer .legal {
position: absolute;
bottom: 5px;
right: 5px;
z-index: 2000;
background: none;
display: block;
font-weight: normal;
font-size: 12px;
color: #aaaaaa;
}
@-webkit-keyframes blinkChrono {
    50% {opacity: 0.85;}
}
@-moz-keyframes blinkChrono {
    50% {opacity: 0.85;}
}
@-ms-keyframes blinkChrono {
    50% {opacity: 0.85;}
}
@keyframes blinkChrono {
    50% {opacity: 0.85;}
}
@-webkit-keyframes rotation {
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes rotation {
    100% {-moz-transform: rotate(-360deg);}
}
@-ms-keyframes rotation {
    100% {-ms-transform: rotate(-360deg);}
}
@keyframes rotation {
    100% {-ms-transform: rotate(-360deg);}
}
@-webkit-keyframes blink {
    0% {background-position: 0 0px;}
    50% {background-position: 0 -28px;}
}
@-moz-keyframes blink {
    0% {background-position: 0 0px;}
    50% {background-position: 0 -28px;}
}
@-ms-keyframes blink {
    0% {background-position: 0 0px;}
    50% {background-position: 0 -28px;}
}
@keyframes blink {
    0% {background-position: 0 0px;}
    50% {background-position: 0 -28px;}
}
@-webkit-keyframes firstFrigoInfoAnim {
    0% {background-position: center 20px;}
    50% {background-position: center 25px;}
}
@-moz-keyframes firstFrigoInfoAnim {
    0% {background-position: center 20px;}
    50% {background-position: center 25px;}
}
@-ms-keyframes firstFrigoInfoAnim {
    0% {background-position: center 20px;}
    50% {background-position: center 25px;}
}
@keyframes firstFrigoInfoAnim {
    0% {background-position: center 20px;}
    50% {background-position: center 25px;}
}
@-webkit-keyframes useBrosse {
    
    15% {bottom: 375px; left: 150px; -webkit-transform: scale(0.5) rotate(-45deg);}
    25% {bottom: 310px; left: 200px; -webkit-transform: scale(0.5) rotate(-50deg);}
    35% {bottom: 375px; left: 150px; -webkit-transform: scale(0.5) rotate(-45deg);}
    44% {bottom: 310px; left: 200px; -webkit-transform: scale(0.5) rotate(-50deg);}
    
    55% {bottom: 170px; left: 200px; -webkit-transform: scale(0.5) rotate(-50deg);}
    65% {bottom: 245px; left: 150px; -webkit-transform: scale(0.5) rotate(-45deg);}
    75% {bottom: 170px; left: 200px; -webkit-transform: scale(0.5) rotate(-50deg);}
    85% {bottom: 245px; left: 150px; -webkit-transform: scale(0.5) rotate(-45deg);}
}
@-webkit-keyframes useJoint {
    20% {bottom: 360px; left: 345px; -webkit-transform: scale(0.5) rotate(-50deg);}
    80% {bottom: 80px; left: 345px; -webkit-transform: scale(0.5) rotate(-40deg);}
}
@-webkit-keyframes useJointCombi {
    20% {bottom: 290px; left: 345px; -webkit-transform: scale(0.5) rotate(-50deg);}
    80% {bottom: 80px; left: 345px; -webkit-transform: scale(0.5) rotate(-40deg);}
}
@-webkit-keyframes useSpatule {
    
    9% {bottom: 280px; left: 140px; -webkit-transform: scale(0.5) rotate(-10deg);}
    18% {bottom: 320px; left: 140px; -webkit-transform: scale(0.5) rotate(-10deg);}
    27% {bottom: 280px; left: 140px; -webkit-transform: scale(0.5) rotate(-10deg);}
    28% {bottom: 280px; left: 140px; -webkit-transform: scale(0.5) rotate(10deg);}
    37% {bottom: 320px; left: 150px; -webkit-transform: scale(0.5) rotate(10deg);}
    46% {bottom: 280px; left: 150px; -webkit-transform: scale(0.5) rotate(10deg);}
    
    55% {bottom: 280px; left: 180px; -webkit-transform: scale(0.5) rotate(-10deg);}
    64% {bottom: 320px; left: 180px; -webkit-transform: scale(0.5) rotate(-10deg);}
    73% {bottom: 280px; left: 180px; -webkit-transform: scale(0.5) rotate(-10deg);}
    74% {bottom: 280px; left: 180px; -webkit-transform: scale(0.5) rotate(10deg);}
    83% {bottom: 320px; left: 190px; -webkit-transform: scale(0.5) rotate(10deg);}
    91% {bottom: 280px; left: 190px; -webkit-transform: scale(0.5) rotate(10deg);}
}
@-webkit-keyframes useThermometre {
    30% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-20deg);}
    34% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-24deg);}
    38% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-16deg);}
    42% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-24deg);}
    46% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-16deg);}
    50% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-24deg);}
    54% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-16deg);}
    58% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-24deg);}
    62% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-16deg);}
}
@-webkit-keyframes useThermometreCombi {
    
    20% {bottom: 235px; left: 240px; -webkit-transform: scale(0.5) rotate(-20deg);}
    24% {bottom: 235px; left: 240px; -webkit-transform: scale(0.5) rotate(-24deg);}
    28% {bottom: 235px; left: 240px; -webkit-transform: scale(0.5) rotate(-16deg);}
    32% {bottom: 235px; left: 240px; -webkit-transform: scale(0.5) rotate(-24deg);}
    36% {bottom: 235px; left: 240px; -webkit-transform: scale(0.5) rotate(-16deg);}
    40% {bottom: 235px; left: 240px; -webkit-transform: scale(0.5) rotate(-24deg);}
    44% {bottom: 235px; left: 240px; -webkit-transform: scale(0.5) rotate(-16deg);}
    
    60% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-20deg);}
    64% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-24deg);}
    68% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-16deg);}
    72% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-24deg);}
    76% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-16deg);}
    80% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-24deg);}
    84% {bottom: 315px; left: 240px; -webkit-transform: scale(0.5) rotate(-16deg);}
}
@-webkit-keyframes wrongTool {
    50% {bottom: 20px;}
    100% {bottom: 7px;}
}
@keyframes rotation {
    100% {transform: rotate(-360deg);}
}
@keyframes useBrosse {
    
    15% {bottom: 375px; left: 150px; transform: scale(0.5) rotate(-45deg);}
    25% {bottom: 310px; left: 200px; transform: scale(0.5) rotate(-50deg);}
    35% {bottom: 375px; left: 150px; transform: scale(0.5) rotate(-45deg);}
    44% {bottom: 310px; left: 200px; transform: scale(0.5) rotate(-50deg);}
    
    55% {bottom: 170px; left: 200px; transform: scale(0.5) rotate(-50deg);}
    65% {bottom: 245px; left: 150px; transform: scale(0.5) rotate(-45deg);}
    75% {bottom: 170px; left: 200px; transform: scale(0.5) rotate(-50deg);}
    85% {bottom: 245px; left: 150px; transform: scale(0.5) rotate(-45deg);}
}
@keyframes useJoint {
    20% {bottom: 360px; left: 345px; transform: scale(0.5) rotate(-50deg);}
    80% {bottom: 80px; left: 345px; transform: scale(0.5) rotate(-40deg);}
}
@keyframes useJointCombi {
    20% {bottom: 290px; left: 345px; transform: scale(0.5) rotate(-50deg);}
    80% {bottom: 80px; left: 345px; transform: scale(0.5) rotate(-40deg);}
}
@keyframes useSpatule {
    
    9% {bottom: 280px; left: 140px; transform: scale(0.5) rotate(-10deg);}
    18% {bottom: 320px; left: 140px; transform: scale(0.5) rotate(-10deg);}
    27% {bottom: 280px; left: 140px; transform: scale(0.5) rotate(-10deg);}
    28% {bottom: 280px; left: 140px; transform: scale(0.5) rotate(10deg);}
    37% {bottom: 320px; left: 150px; transform: scale(0.5) rotate(10deg);}
    46% {bottom: 280px; left: 150px; transform: scale(0.5) rotate(10deg);}
    
    55% {bottom: 280px; left: 180px; transform: scale(0.5) rotate(-10deg);}
    64% {bottom: 320px; left: 180px; transform: scale(0.5) rotate(-10deg);}
    73% {bottom: 280px; left: 180px; transform: scale(0.5) rotate(-10deg);}
    74% {bottom: 280px; left: 180px; transform: scale(0.5) rotate(10deg);}
    83% {bottom: 320px; left: 190px; transform: scale(0.5) rotate(10deg);}
    91% {bottom: 280px; left: 190px; transform: scale(0.5) rotate(10deg);}
}
@keyframes useThermometre {
    30% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-20deg);}
    34% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-24deg);}
    38% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-16deg);}
    42% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-24deg);}
    46% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-16deg);}
    50% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-24deg);}
    54% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-16deg);}
    58% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-24deg);}
    62% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-16deg);}
}
@keyframes useThermometreCombi {
    
    20% {bottom: 235px; left: 240px; transform: scale(0.5) rotate(-20deg);}
    24% {bottom: 235px; left: 240px; transform: scale(0.5) rotate(-24deg);}
    28% {bottom: 235px; left: 240px; transform: scale(0.5) rotate(-16deg);}
    32% {bottom: 235px; left: 240px; transform: scale(0.5) rotate(-24deg);}
    36% {bottom: 235px; left: 240px; transform: scale(0.5) rotate(-16deg);}
    40% {bottom: 235px; left: 240px; transform: scale(0.5) rotate(-24deg);}
    44% {bottom: 235px; left: 240px; transform: scale(0.5) rotate(-16deg);}
    
    60% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-20deg);}
    64% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-24deg);}
    68% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-16deg);}
    72% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-24deg);}
    76% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-16deg);}
    80% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-24deg);}
    84% {bottom: 315px; left: 240px; transform: scale(0.5) rotate(-16deg);}
}
@keyframes wrongTool {
    50% {bottom: 20px;}
    100% {bottom: 7px;}
}