@charset "utf-8";body{font-family:'Arial',sans-serif;font-weight:normal;color:#666;background-color:#FFF;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-size:2vw!important}*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}a,img{border:0}#toolbox{background-color:#006070;position:fixed;left:0;top:0;height:100%;width:6.25vw;padding-top:4vh}#toolbox li{position:relative;display:block;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:3vh 0}.etiquette{position:absolute;left:90%;top:30%;max-height:3vw;z-index:100;-webkit-animation:bounce 2s infinite;animation:bounce 2s infinite}@-webkit-keyframes bounce{0,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateX(-15px);transform:translateX(-15px)}60%{-webkit-transform:translateX(-15px);transform:translateX(-15px)}}@keyframes bounce{0,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateX(-15px);transform:translateX(-15px)}60%{-webkit-transform:translateX(-15px);transform:translateX(-15px)}}#toolbox li:hover .picto{opacity:1}#toolbox .picto{max-width:4vw;max-height:6vw;opacity:.6;-webkit-transition:opacity .4s;-webkit-transition:opacity .3s;transition:opacity .3s}.pointer{cursor:pointer}#principal{position:fixed;right:8vw;width:30vw;text-align:center;font-size:1.4vw;z-index:-1;background:url('images/etoiles.png') no-repeat left 10vh;background-size:31%}#contenu{height:14vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.logo{width:60%;padding:5%;padding-top:20vh}.step,#howto>img{display:inline-block;max-width:100%}.hidden{display:none}#howto{text-align:center}#howto h2{font-size:1em;color:#b9ce0a;border-bottom:2px solid #b9ce0a;display:inline-block;padding-bottom:.4vw;margin-bottom:.8vw;text-align:center}#notice{color:#005f6f;padding-bottom:1vw}.progression{color:#b9ce0a70}.progression li{display:inline-block;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-weight:bold;font-size:1.5vw;width:2.5em;height:2.5em;border-radius:50%;border:2px solid #b9ce0a60;color:#b9ce0a988!important}.progression li.active{color:#006070;border-color:#b9ce0a}#rejouer{display:inline-block;visibility:hidden;font-size text-align:center;text-decoration:none;color:#006070;border-bottom:1px solid #006070;padding:6px 0;-webkit-transition:all .4s;transition:all .4s;margin-bottom:8vh}#rejouer:hover{color:#fff;background-color:#006070;padding:6px;border-bottom:1px solid transparent}#anim{position:fixed;top:0;left:15vw;width:40vw}@media only screen and (max-width:768px){#toolbox .picto{-webkit-transform:scale(2);transform:scale(2);margin-bottom:5vh}#toolbox{padding-top:15vh;width:12vw}#principal{position:absolute;width:80vw;left:17vw;font-size:1.5em}#anim{position:static;width:100%;margin-top:1vh}#howto{text-align:center}.logo{padding-top:5%;width:55%}.etiquette{top:12%;max-height:6vw}#principal{background:url('images/etoiles.png') no-repeat left top;background-size:31%}#rejouer{margin-bottom:0}#contenu{height:12vh}}body.debug:before{content:"";position:fixed;top:0;width:100vw;height:4px;background-color:orange;z-index:10000}body.debug:after{content:"DESKTOP";color:#fff;position:fixed;top:0;right:10px;-webkit-box-shadow:0 3px 3px #0004;box-shadow:0 3px 3px #0004;padding:5px 9px;font-size:12px;font-family:sans-serif;letter-spacing:1PX;background-color:orange;border-radius:0 0 5px 5px;text-shadow:1px 1px 2px #0009;z-index:10000}body{font-size:6vw}@media only screen and (max-width:768px){body.debug:before{background-color:red}body.debug:after{content:"TABLETTE PORTRAIT";background-color:orangered}}@media only screen and (max-width:479px){body.debug:before{background-color:red}body.debug:after{content:"MOBILE";background-color:red}}@media only screen and (min-width:960px){body.debug:before{background-color:greenyellow}body.debug:after{content:"GRANDS ECRANS";background-color:greenyellow}}@media only screen and (min-width:1400px){body.debug:before{background-color:aqua}body.debug:after{content:"TRES GRANDS ECRANS";background-color:aqua}}