/* #################################################################################################################################### */ /* --------------------------------------------------------- page vallée -------------------------------------------------------------- */ /* #################################################################################################################################### */ .vallee{background-color: #92C653 ; position: relative; background-image: url('https://valperdor.fr/jeux/gazon.jpg'); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} .fond_int{background-color: #cdc7bb ; position: relative; background-image: url('https://valperdor.fr/jeux/fond_int2.png'); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} .fond_bat{background-color: #cdc7bb ; position: relative; background-image: url('https://valperdor.fr/jeux/fond_bat.png'); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} .fond_bank{background-color: #cdc7bb ; position: relative; background-image: url('https://valperdor.fr/jeux/maison/fond_bank_vide.png'); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} .fond_bank_ban{background-color: #cdc7bb ; position: relative; background-image: url('https://valperdor.fr/jeux/maison/fond_bank.png'); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} .vallee1{background-color: #92C653 ; position: relative; background-image: url('https://valperdor.fr/jeux/vallee_fond.png'); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} .jligne1{ position: absolute; height: 150px; width: 100%; top: 0px; left: 0px; } .jligne2{ position: absolute; height: 150px; width: 100%; top: 150px; left: 0px;} .jligne3{ position: absolute; height: 150px; width: 100%; top: 300px; left: 0px;} .jligne4{ position: absolute; height: 150px; width: 100%; top: 450px; left: 0px;} .jligne5{ position: absolute; height: 150px; width: 100%; top: 600px; left: 0px;} .jcase1{ position: absolute; height: 100%; width: 150px; top: 0px; left: 0px; z-index: 1; } .jcase2{ position: absolute; height: 100%; width: 150px; top: 0px; left: 150px; z-index: 1; } .jcase3{ position: absolute; height: 100%; width: 150px; top: 0px; left: 300px; z-index: 1; } .jcase4{ position: absolute; height: 100%; width: 150px; top: 0px; left: 450px; z-index: 1; } .jcase5{ position: absolute; height: 100%; width: 150px; top: 0px; left: 600px; z-index: 1; } .jcase6{ position: absolute; height: 100%; width: 150px; top: 0px; left: 750px; z-index: 1; } .jcase7{ position: absolute; height: 100%; width: 150px; top: 0px; left: 900px; z-index: 1; } .jcase8{ position: absolute; height: 100%; width: 150px; top: 0px; left: 1050px; z-index: 1; } .gazon{height: 150%; width: 150px;} .fondjeux{ position: relative; background: url("https://valperdor.fr/themes/onthemix/images/fond_ban.png"); background-repeat: repeat; width: 100%; text-align: center; } .framejeux{overflow: hidden; position: absolute; background: url("https://valperdor.fr/themes/onthemix/images/fond_ban.png"); background-repeat: repeat; height: 750px; width: 1200px; top: 150px; left: 90px; border-radius:0px 25px 0px 25px; z-index: 6; padding: -2px; border-width:8px 8px 8px 8px; border-style: double; border-color: #B87333; } .val_chat{overflow:hidden; position: absolute; height: 750px; background: url("https://valperdor.fr/themes/onthemix/images/fond_ban.png"); background-repeat: repeat; width: 350px; top: 150px; left: 1310px; border-width:8px 8px 8px 8px; border-style: double; border-color: #B87333; border-radius:0px 25px 0px 25px; z-index: 6; padding: -2px; overflow-x: hidden; } /* La shoot elle même */ .v_shoot{position: absolute; width: 100%; height: 100%; background: url("https://valperdor.fr/themes/onthemix/images/fond_ban.png"); background-repeat: repeat; color: white; overflow-y: auto; overflow-x: hidden;} .v_msgbox{position: relative; color: white; width: 100%; z-index: 6; padding: 2px; margin-bottom: 10px;} .v_msginput{color: white; background-color: #A4A4A4; color:#0404B4; width:95%; margin: 10px} .v_msg{ position: relative; background-color: #1F2021; color: white; display: inline-block; float: left; min-width: 170px; max-width: 310px; left: 5px; border: 1px outset black; border-radius:0px 15px 15px 15px; z-index: 6; padding: 10px; margin-bottom: 10px; margin-right: 10px;} .v_msg1{position: relative; background-color: #424242; color: white; display: inline-block; float: right; min-width: 170px; max-width: 310px; right: 5px; border: 1px outset black; border-radius:15px 0px 15px 15px; z-index: 6; padding: 10px; margin-bottom: 10px; margin-left: 10px;} .v_quand{position: absolute; top: 2px; right: 5px; font-size: 10px; color: lime; } .intro_jeux{ position: absolute; top: 20px; color: black; left: 400px; font-size: 1.762em; text-align: center; font-family: 'Metamorphous'; background: url("https://valperdor.fr/themes/onthemix/images/fond_ban.png"); background-repeat: repeat; border-width:8px 8px 8px 8px; border-style: double; border-color: #B87333; padding: 1.563em; -moz-border-radius:0 50px; -webkit-border-radius:0 50px; border-radius:0 50px; } /* Cadre de la création du perso */ .intro{ position: absolute; top: 20px; color: #FFFFFF; font-size: 1.562em; text-align: center; background-color: #1F2021; border: 0.312em solid red; padding: 1.563em; -moz-border-radius:0 50px; -webkit-border-radius:0 50px; border-radius:0 50px; } /* Cadre de la création du perso */ .manage{ position: absolute; top: 0px; left: 15px; z-index: 3;} .text_edit{ position: absolute; top: 0px; left: 0px; z-index: 3; width: 200px;} .text_ajout{ position: absolute; top: 0px; left: 220px; z-index: 3; width: 220px;} .align_gauche{text-align: left; padding-left: 20px;} /* bouton */ .home{ position: absolute; top: 150px; left: 80px; height: 0px; width: 0px; z-index: 10; animation: vallee 2s 1 linear;animation-fill-mode: forwards; } @keyframes vallee { 0% {transform: translate3d( 0px, 0px, 0px) ; height: 0px; width: 0px} 25% {transform: translate3d( -50px, 5px, 0px) ; height: 20px; width: 20px} 50% {transform: translate3d( -60px, 10px, 0px) ; height: 60px; width: 60px} 75% {transform: translate3d( -50px, 20px, 0px) ; height: 40px; width: 40px} 100% {transform: translate3d( -60px, 15px, 0px) ; height: 60px; width: 60px} } .plainebt{ position: absolute; top: 165px; left: 20px; height: 60px; width: 60px; opacity: 0; z-index: 9; animation: plainebt 3s 1 linear; animation-fill-mode: forwards; } @keyframes plainebt { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 75% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 76% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1;} 100% {transform: translate3d( 0px, 70px, 0px) ; opacity: 1;} } .tableau{ position: absolute; top: 165px; left: 20px; height: 60px; width: 60px; opacity: 0; z-index: 9; animation: tableau 3s 1 linear; animation-fill-mode: forwards; } @keyframes tableau { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 75% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 76% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1;} 100% {transform: translate3d( 0px, 140px, 0px) ; opacity: 1;} } .b_achat{ position: absolute; top: 165px; left: 20px; height: 60px; width: 60px; opacity: 0; z-index: 8; animation: b_achat 3s 1 linear; animation-fill-mode: forwards; } @keyframes b_achat { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 75% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 76% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1;} 100% {transform: translate3d( 0px, 210px, 0px) ; opacity: 1;} } .stand{ position: absolute; top: 165px; left: 20px; height: 60px; width: 60px; opacity: 0; z-index: 7; animation: stand 3s 1 linear; animation-fill-mode: forwards; } @keyframes stand { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 75% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 76% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1;} 100% {transform: translate3d( 0px, 280px, 0px) ; opacity: 1;} } .contacts{ position: absolute; display:block; top: 165px; left: 20px; height: 60px; width: 60px; opacity: 0; z-index: 1; animation: contacts 3s 1 linear; animation-fill-mode: forwards; } @keyframes contacts { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 75% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 76% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1;} 100% {transform: translate3d( 0px, 535px, 0px) ; opacity: 1;} } .optionb{ position: absolute; display:block; top: 165px; left: 20px; height: 60px; width: 60px; opacity: 0; z-index: 1; animation: optionb 3s 1 linear; animation-fill-mode: forwards; } @keyframes optionb { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 75% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 76% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1;} 100% {transform: translate3d( 0px, 605px, 0px) ; opacity: 1;} } .faq{ position: absolute; display:block; top: 165px; left: 20px; height: 60px; width: 60px; opacity: 0; z-index: 1; animation: faq 3s 1 linear; animation-fill-mode: forwards; } @keyframes faq { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 75% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 76% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1;} 100% {transform: translate3d( 0px, 675px, 0px) ; opacity: 1;} } .triche{ color: white ; background-color: #666; position: absolute; padding: 20px ; display:block; top: 10%; left: 10%; height: 40%; width: 80%; border-width: 8px 8px 8px 8px; border-style: double; border-color: #B87333; border-radius: 0px 25px 0px 25px; font-size: 30px } /* les nouveau boutons */ .normal { border-radius: 12px 0 12px 0; background: #f5f5f5; border:none; color:#555; font:bold 12px Verdana; padding:6px 10px 6px 10px; box-shadow: 1px 1px 3px #999; cursor:pointer; } .normal:hover { color: #FFF; text-shadow: 0px 1px 2px #000; } .rouge { border-radius: 12px 0 12px 0; background: red; border:none; color:white; font:bold 12px Verdana; padding:6px 10px 6px 10px; box-shadow: 1px 1px 3px #999; cursor:pointer; } .rouge:hover { color: #FFF; text-shadow: 0px 1px 2px #000; } .vert { border-radius: 12px 0 12px 0; background: #99ff99; border:none; color:#555; font:bold 12px Verdana; padding:6px 10px 6px 10px; box-shadow: 1px 1px 3px #999; cursor:pointer; } .vert:hover { color: #FFF; text-shadow: 0px 1px 2px #000; } .jaune { border-radius: 12px 0 12px 0; background: #ffff00; border:none; color:#555; font:bold 12px Verdana; padding:6px 10px 6px 10px; box-shadow: 1px 1px 3px #999; cursor:pointer; } .jaune:hover { color: #FFF; text-shadow: 0px 1px 2px #000; } .bleu { border-radius: 12px 0 12px 0; background: #33ccff; border:none; color:#555; font:bold 12px Verdana; padding:6px 10px 6px 10px; box-shadow: 1px 1px 3px #999; cursor:pointer; } .bleu:hover { color: #FFF; text-shadow: 0px 1px 2px #000; } .violet { border-radius: 12px 0 12px 0; background: #9933ff; border:none; color:white; font:bold 12px Verdana; padding:6px 10px 6px 10px; box-shadow: 1px 1px 3px #999; cursor:pointer; } .violet:hover { color: #FFF; text-shadow: 0px 1px 2px #555; } .ciel { border-radius: 12px 0 12px 0; background: #66ffff; border:none; color:#555; font:bold 12px Verdana; padding:6px 10px 6px 10px; box-shadow: 1px 1px 3px #999; cursor:pointer; } .ciel:hover { color: #FFF; text-shadow: 0px 1px 2px #000; } .fond_noir{ display:block; position: absolute; background-color: #4a2401; width: 100%; height: 100%; z-index: 2; opacity:0; animation: fond_noir 2s 1 linear; } @keyframes fond_noir { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 50% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1;} 100% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1;} } .nuage{position: absolute; width: 100px; height: 50px; background-image: url(https://valperdor.fr/jeux/nuages.png); top: 0px; left: 0px; z-index: 10; animation: nuage 500s infinite linear; } @keyframes nuage { 0% {transform: translate3d( 0px, 0px, 0px) ;} 20% {transform: translate3d( 1200px, 350px, 0px) ;} 40% {transform: translate3d( 10px, 550px, 0px) ;} 60% {transform: translate3d( 1200px, 450px, 0px) ;} 80% {transform: translate3d( 90px, 750px, 0px) ;} 100% {transform: translate3d( 0px, 0px, 0px) ;} } .aigle{position: absolute; height: 50px; top: 0px; left: 1250px; z-index: 10; animation: aigle 500s infinite linear; } @keyframes aigle { 0% {transform: translate3d( 0px, 0px, 0px) rotateY(180deg);} 10% {transform: translate3d( -1320px, 350px, 0px) rotateY(180deg);} 20% {transform: translate3d( -1320px, 350px, 0px) rotateY(0deg);} 30% {transform: translate3d( 0px, 550px, 0px) rotateY(0deg) ;} 30.1% {transform: translate3d( 0px, 550px, 0px) rotateY(180deg) ;} 40% {transform: translate3d( -1320px, 450px, 0px) rotateY(180deg) ;} 40.1% {transform: translate3d( -1320px, 450px, 0px) rotateY(0deg) ;} 50% {transform: translate3d( 0px, 750px, 0px) rotateY(0deg);} 100% {transform: translate3d( 0px, 0px, 0px)rotateY(0deg) ;} } /*.poissonavril{position: absolute; height: 50px; top: 0px; left: 1250px; z-index: 10; animation: poissonavril 500s infinite linear; } @keyframes poissonavril { 0% {transform: translate3d( 0px, 0px, 0px) rotateY(180deg);} 10% {transform: translate3d( -1320px, 350px, 0px) rotateY(180deg);} 20% {transform: translate3d( -1320px, 350px, 0px) rotateY(0deg);} 30% {transform: translate3d( 0px, 550px, 0px) rotateY(0deg) ;} 30.1% {transform: translate3d( 0px, 550px, 0px) rotateY(180deg) ;} 40% {transform: translate3d( -1320px, 450px, 0px) rotateY(180deg) ;} 40.1% {transform: translate3d( -1320px, 450px, 0px) rotateY(0deg) ;} 50% {transform: translate3d( 0px, 750px, 0px) rotateY(0deg);} 100% {transform: translate3d( 0px, 0px, 0px)rotateY(0deg) ;} }*/ .valleede{ position: absolute; top: 10px;left: 10px; background-color: #1F2021; color: white; width: 220px; height: 30px; z-index: 20; border: 8px double #B87333; border-radius:0px 25px 0px 25px; z-index: 6; padding: -2px; } .pointer{cursor:pointer;} /* #################################################################################################################################### */ /* --------------------------------------------------------- Boutique Générale -------------------------------------------------------- */ /* #################################################################################################################################### */ .machine{ position: relative; top: 100px; width: 1220px; margin: auto; height: 960px; z-index: 2;} .shelf_top_perspective { position: relative; perspective: 600px; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; z-index: 2;} .shelf_top { z-index: 2;background-color: #666; width: 90.3%; margin: 0 auto; height: 125px; -webkit-transform: rotateX(70deg); -moz-transform: rotateX(70deg); -o-transform: rotateX(70deg); -ms-transform: rotateX(70deg); transform: rotateX(70deg); } .machine-frame-container { position: relative; padding-right: 19%; height: 100%; background-color: #666; top: 0px; z-index: 2;} .machine-frame { position: relative; height: 100%; background-color: #2e2d2d; width: 100%; top: -40px; z-index: 2;} .machine-view { position: relative; background-color: #666; height: 98.5%; width: 98.5%; left: 10px; top: 10px;z-index: 2; } .ligne1{ position: absolute; height: 180px; width: 100%; top: 100px; left: 0px; border-bottom-style: solid; border-color: #2e2d2d; border-bottom-width: 1em; } .ligne2{ position: absolute; height: 180px; width: 100%; top: 290px; left: 0px; border-bottom-style: solid; border-color: #2e2d2d; border-bottom-width: 1em; } .ligne3{ position: absolute; height: 180px; width: 100%; top: 480px; left: 0px; border-bottom-style: solid; border-color: #2e2d2d; border-bottom-width: 1em; } .ligne4{ position: absolute; height: 180px; width: 100%; top: 670px; left: 0px; border-bottom-style: solid; border-color: #2e2d2d; border-bottom-width: 1em; } .ligne5{ position: absolute; height: 180px; width: 100%; top: 860px; left: 0px; border-bottom-style: solid; border-color: #2e2d2d; border-bottom-width: 1em; } .casier1{ position: absolute; height: 100%; width: 150px; top: 0px; left: 0px; border-right-style: solid; border-color: #2e2d2d; border-right-width: 0.5em; } .casier2{ position: absolute; height: 100%; width: 150px; top: 0px; left: 150px; border-right-style: solid; border-color: #2e2d2d; border-right-width: 0.5em; } .casier3{ position: absolute; height: 100%; width: 150px; top: 0px; left: 300px; border-right-style: solid; border-color: #2e2d2d; border-right-width: 0.5em; } .casier4{ position: absolute; height: 100%; width: 150px; top: 0px; left: 450px; border-right-style: solid; border-color: #2e2d2d; border-right-width: 0.5em; } .casier5{ position: absolute; height: 100%; width: 150px; top: 0px; left: 600px; border-right-style: solid; border-color: #2e2d2d; border-right-width: 0.5em; } .casier6{ position: absolute; height: 100%; width: 150px; top: 0px; left: 750px; border-right-style: solid; border-color: #2e2d2d; border-right-width: 0.5em; } .casier7{ position: absolute; height: 100%; width: 150px; top: 0px; left: 900px; border-right-style: solid; border-color: #2e2d2d; border-right-width: 0.5em; } .casier8{ position: absolute; height: 100%; width: 150px; top: 0px; left: 1050px; border-right-style: solid; border-color: #2e2d2d; border-right-width: 0.5em; } .object{ position: absolute; height: 100px; width: 100px; top: 30px; left: 15%; border: 2px solid #582900; border-radius:0px 15px 0px 15px; cursor: pointer; z-index: 4; } .object img{background: #130E0A; z-index: 2; border-radius:0px 15px 0px 15px} .objectV{ position: absolute; height: 100px; width: 100px; top: 30px; left: 25px; border: 5px outset #582900; border-radius: 0px 15px 0px 15px; } .vente{position: relative; top:15px; } .texte{ position: absolute; top: 5px; width: 100%; color: #FFFFFF; font-size: 1.4em; text-align: center; z-index: 5; } .achat{ position: absolute; bottom: 0px; width: 100%; color: #FFFFFF; font-size: 1.4em; text-align: center; } .edit{ position: absolute; bottom: -15px; left: 110px; z-index: 5; } .cross{ background: #582900; position: absolute; display:block; content:''; width: 70px; height: 2%; top: 47%; left: 15%; transform: rotate(0deg); } .cross1{ background: #582900; position: absolute; display:block; content:''; width: 2%; height: 70px; left: 47%; top: 15%; transform: rotate(180deg); } .aide{ position: absolute; visibility: hidden; font-size: 15px; text-align: center; width: 120px; top: 110px; left: 0px; color: #FFFFFF; background-color: #2e2d2d; opacity: 1; border: 2px outset red; border-radius:0px 15px 0px 15px; z-index: 6; padding: 15px; } .ba_home{ position: absolute; top: 100px; left: -80px; z-index: 5; height: 60px; width: 60px;} .A_menudroit{ position: absolute; color: white; background-color: #3A3C3E; height: 750px; width: 200px; top: 230px; left: 20px; border: 8px double #B87333; border-radius: 25px 25px 0px 25px; z-index: 1; padding: -2px; z-index: 1; animation: menudroit 1s 1 linear; animation-fill-mode: forwards; } /* --------------------------------------------------------- Boutique Achat V2 -------------------------------------------------------------- */ /* --------------------------------------------------------- Boutique Achat V2 -------------------------------------------------------------- */ /* --------------------------------------------------------- Boutique Achat V2 -------------------------------------------------------------- */ .boutique_frame{position: relative; background-color: #666; font-size: 12px; font-style: bold; width: 1200px; height: 750px; overflow-x: hidden; overflow-y: auto;} .boutique_titre{position: absolute; color: white; background-color: #666; font-size: 20px; font-style: bold; width: 1200px; height: 90px; border-bottom-style: solid; border-color: #2e2d2d; border-bottom-width: 0.6em; } /* #################################################################################################################################### */ /* --------------------------------------------------------- page Maison -------------------------------------------------------------- */ /* #################################################################################################################################### */ .maison{ position: absolute; height: 400px; width: 400px top: 5px; left: 400px; } .case_maison{ position: absolute; background-image: url(https://valperdor.fr/jeux/maison/fond_maison.png); background-size: cover; z-index: 1; height: 0px; width: 0px; top: 370px; left: 480px; border: 6px outset green; border-radius: 0px 25px 25px 25px; opacity: 0; transition: width 5s, height 5s, top 5s, left 5s; } .case_maison1{ position: absolute; height: 0px; width: 0px; top: 0px; left: 0px; z-index: 3; opacity: 0; transition: width 5s, height 5s, top 5s, left 5s; } .case_maison_fermer{ position: relative; background-image: url(https://valperdor.fr/jeux/bt_ferme.png); background-size: cover; height: 0px; width: 0px; top: 8px; left: 8px; z-index: 10; cursor: pointer; transition: width 5s, height 5s, top 5s, left 5s; opacity: 0; } .case_maison_succes{ position: absolute; background-image: url(https://valperdor.fr/jeux/bt_graf.png); background-size: cover; height: 0px; width: 0px; top: 8px; right: 10px; z-index: 10; cursor: pointer; transition: width 5s, height 5s, top 5s, left 5s; opacity: 0; } .click_maison{ position: absolute; height: 0px; width: 0px; top: 100px; left: 20px; z-index: 3; cursor: pointer; opacity: 0;} .menugauche{ color: white; background-color: #3A3C3E; position: absolute; height: 750px; width: 200px; top: -7px; left: -203px; border: 8px double #B87333; border-radius: 0px 25px 25px 25px; padding: -2px; z-index: 5; animation: menugauche 1s 1 linear; animation-fill-mode: forwards; transition: left 2s , transform 2s; } @keyframes menugauche { 0% {transform: translate3d( 0px, 0px, 0px) ;} 25% {transform: translate3d( 0px, 0px, 0px) ;} 100% {transform: translate3d( 195px, 0px, 0px) ;} } .menu_barre{ overflow-x : hidden; overflow-y : auto; background: #1F2021; position: absolute; display:block; left: 15px; padding-top: 10px; top:12px; width: 170px; height: 315px; border-radius: 0px 15px 0px 15px; z-index: 2} .menu_barre1{overflow-x : hidden; overflow-y : auto; background: #1F2021; position: absolute; display:block; left: 15px; padding-top: 10px; top:15px; width: 170px; height: 50px; border-radius: 0px 15px 0px 0px; z-index: 2} .menu_barre2{overflow-x : hidden; overflow-y : auto; background: #1F2021; position: absolute; display:block; left: 15px; padding-top: 3px; top: 68px; width: 170px; height: 75px; border-radius: 0px 0px 0px 0px; z-index: 2} .menu_barre3{overflow-x : hidden; overflow-y : auto; background: #1F2021; position: absolute; display:block; left: 15px; padding-top: 3px; top: 146px; width: 170px; height: 75px; border-radius: 0px 0px 0px 15px; z-index: 2} .menu_barre4{overflow-x : hidden; overflow-y : auto; background: #1F2021; position: absolute; display:block; left: 15px; padding-top: 3px; top: 230px; width: 170px; height: 100px; border-radius: 0px 15px 0px 15px; z-index: 2} /* menu droite Matériaux */ .menudroit{ position: absolute; color: white; background-color: #3A3C3E; height: 750px; width: 200px; top: -7px; left: 1200px; border: 8px double #B87333; border-radius: 25px 25px 0px 25px; z-index: 1; padding: -2px; z-index: 5; animation: menudroit 1s 1 linear; animation-fill-mode: forwards; transition: left 2s , transform 2s; } @keyframes menudroit { 0% {transform: translate3d( 0px, 0px, 0px) ;} 25% {transform: translate3d( 0px, 0px, 0px) ;} 100% {transform: translate3d( -200px, 0px, 0px) ;} } .menu_barreD1{ background: #1F2021; position: absolute; display:block; left: 10px; padding-top: 10px; top:10px; overflow-y: auto; width: 180px; height: 720px; border-radius: 15px 15px 0px 15px; z-index: 2} .imgL{position: relative; left: 10px; height: 100px; width: 150px; top: 0px; font-size: 12px; } .imgC1{position: absolute; left: -10px; height: 100px; width: 70px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .imgC2{position: absolute; left: 70px; height: 100px; width: 70px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .imgV{ position: relative; top: 10px; left: 0px; height: 60px; width: 60px; z-index: 2} .aideM{ position: absolute; visibility: hidden; font-size: 15px; text-align: center; width: 70px; top: 100px; left: -15px; color: #FFFFFF; background-color: #2e2d2d; opacity: 1; border: 2px outset red; border-radius:0px 15px 0px 15px; padding: 15px; z-index: 20;} .imgok{ position: absolute; text-align: center; width: 60px; height: 60px; top: 10px; left: 5px; z-index: 19} .trait{ position: relative; border-top: 2px solid #3A3C3E; left: 10%; top: 2px; width: 80%; height: 8px; } /* Cadre bas */ .menu_bas{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; padding: -2px; z-index: 5; animation: menu_bas 2s 1 linear; animation-fill-mode: forwards; } @keyframes menu_bas { 0% {transform: translate3d( 0px, 0px, 0px) ;} 25% {transform: translate3d( 0px, 0px, 0px) ;} 100% {transform: translate3d( 0px, -385px, 0px) ;} } .menu_barreB1{ overflow-y: auto; position: absolute; text-align: left; background-color: #1F2021; padding: 15px; height: 290px; left: 5px; top: 5px; width: 710px; border-radius: 0px 20px 0px 20px; z-index: 2; font-size: 16px;} .bravo { color: white; position: absolute; background-color: #1F2021; padding: 15px; height: 180px; left: 15%; top: 410px; width: 70%; border: 8px double #B87333; border-radius: 0px 15px 0px 15px; z-index: 6; box-sizing: border-box; /* Plus de flex — le texte reste fluide et centré naturellement */ text-align: center; line-height: 1.3; font-size: clamp(12px, 2.5vw, 26px); word-wrap: break-word; white-space: normal; } .m_membres{ position: absolute; text-align: left; display:block; left: 15px; color: white; font-size: 14px; background: #1F2021; top: 338px; height: 395px; width: 170px; overflow : auto; padding-top: 5px; border-radius: 0px 10px 10px 10px;} .m_membres img{height: 20px; width: 20px; vertical-align: middle; left: 5px } .maison_noir{ position: absolute; background-color: #4a2401; width: 1200px; height: 750px; opacity:1; z-index: 50; animation: maison_noir 2s 1 linear; animation-fill-mode: forwards; } @keyframes maison_noir { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1;} 75% {transform: translate3d( 1400px, 850px, 0px) ; opacity: 0.8;}100% {transform: translate3d( 1400px, 850px, 0px) ; opacity: 0;} } .ferme_noir{ position: absolute; background-color: #4a2401; width: 1200px; height: 750px; opacity:1; z-index: 50; animation: ferme_noir 3s 1 linear; animation-fill-mode: forwards; } .ferme_noir2{ position: absolute; background-color: #4a2401; width: 1200px; height: 750px; opacity:1; z-index: 50; animation: ferme_noir 6s 1 linear; animation-fill-mode: forwards; } @keyframes ferme_noir { 0% {transform: translate3d( -1400px, -850px, 0px) ; opacity: 0;} 75% {transform: translate3d( -1400px, -850px, 0px) ; opacity: 1;}100% {transform: translate3d( 00px, 0px, 0px) ; opacity: 1;} } .m_etoile{ position: absolute; left: 480px; top: 220px; height: 1px; width: 1px; z-index: 19; animation: m_etoile 3s 1 linear; animation-fill-mode: forwards; } .m_etoile_font {position: absolute; left: 385px; top: 395px; z-index: 19; font-weight: bold; font-size: 0px; animation: m_etoile 3s 1 linear; animation-fill-mode: forwards; } @keyframes m_etoile { 0% {transform: translate3d( 0px, 0px, 0px) ; height: 0px; width: 0px; font-size: 0px;} 30% {transform: translate3d( -55px, -55px, 0px) ; height: 110px; width: 110px; font-size: 45px;} 40% {transform: translate3d( -50px, -50px, 0px) ; height: 100px; width: 100px; font-size: 40px; } 50% {transform: translate3d( -55px, -55px, 0px) ; height: 110px; width: 110px; font-size: 45px; } 60% {transform: translate3d( -50px, -50px, 0px) ; height: 100px; width: 100px; font-size: 40px; } 70% {transform: translate3d( -55px, -55px, 0px) ; height: 110px; width: 110px; font-size: 45px; } 80% {transform: translate3d( -800px, -400px, 0px) ; height: 0px; width: 0px; font-size: 0px;} 100% {transform: translate3d( -800px, -400px, 0px) ; height: 0px; width: 0px; font-size: 0px;} } /* --------------------------------------------------------- page Stand -------------------------------------------------------------- */ /* --------------------------------------------------------- page Stand -------------------------------------------------------------- */ /* --------------------------------------------------------- page Stand -------------------------------------------------------------- */ .menudroit_stand{ position: absolute; color: white; background-color: #3A3C3E; height: 750px; width: 390px; top: -27px; left: 1215px; border: 8px double #B87333; border-radius: 25px 25px 0px 25px; z-index: 1; padding: -2px; animation: menudroit_stand 2s 1 linear; animation-fill-mode: forwards; } @keyframes menudroit_stand { 0% {transform: translate3d( 0px, 0px, 0px) ;} 25% {transform: translate3d( 0px, 0px, 0px) ;} 100% {transform: translate3d( -400px, 0px, 0px) ;} } .menu_barre_stand{ position: absolute; background: #1F2021; display:block; left: 10px; padding-top: 10px; top:10px; width: 360px; height: 725px; border-radius: 15px 15px 0px 15px; z-index: 2} .img_stand{ position: relative; left: 15px; height: 100px; width: 290px; top: 0px; font-size: 12px; } .img_vente{ position: relative; left: 15px; height: 80px; width: 300px; top: 0px; font-size: 12px; } .imgC3{ position: absolute; left: 150px; height: 100px; width: 70px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .imgC4{ position: absolute; left: 235px; height: 100px; width: 70px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .stand_vide{ position: absolute; left: 15px; height: 800px; width: 800px; top: 20px;} .stand_titre{ position: absolute; left: 0px; height: 100px; width: 800px; top: 4px; text-align: center; font-weight: bold; font-size: 1.1em; } .stand_text{ position: absolute; background-color: #fdf1b8; left: 100px; height: 120px; width: 600px; top: 490px; text-align: center; vertical-align: middle; font-weight: bold; font-size: 0.75em; border: 2px solid #3A3C3E; border-radius: 0px 15px 0px 15px; } .s_ligne1{ position: absolute; height: 100px; width: 400px; top: 205px; left: 200px; } .s_ligne2{ position: absolute; height: 100px; width: 400px; top: 317px; left: 200px; } .s_imgC1{position: absolute; font-size: 10px; background: #1F2021; left: -220px; height: 100px; color: white; width: 125px; padding-top: 5px; top: -5px; border: 2px solid red; border-radius: 0px 10px 0px 10px; opacity: 0; z-index: 3; animation: s_imgC1 3s 1 linear; animation-fill-mode: forwards; } @keyframes s_imgC1 { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0; left: -200px;} 90% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0; left: -200px;} 91% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1; left: -200px;} 100% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1; left: 0px;} } .s_imgC2{position: absolute; font-size: 10px; background: #1F2021; left: 0px; height: 100px; color: white; width: 125px; top: -5px; padding-top: 5px; border: 2px solid red; border-radius: 0px 10px 0px 10px; opacity: 0; z-index: 2; animation: s_imgC2 3.5s 1 linear; animation-fill-mode: forwards; } @keyframes s_imgC2 { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0; } 90% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0; } 91% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1; left: 0px;} 100% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1; left: 135px;} } .s_imgC3{position: absolute; font-size: 10px; background: #1F2021; left: 270px; height: 100px; color: white; width: 125px; top: -5px; padding-top: 5px; border: 2px solid red; border-radius: 0px 10px 0px 10px; opacity: 0; z-index: 1;animation: s_imgC3 4s 1 linear;animation-fill-mode: forwards;} @keyframes s_imgC3 { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0; } 90% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0; } 91% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1; left: 135px;} 100% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1; left: 270px;} } .s_imgV{ position: relative; top: 10px; left: 0px; height: 60px; width: 60px; z-index: 2 ;cursor: pointer;} .s_txtprix{position: absolute; width: 90%; top: 480px; left: 5%; font-size: 14px; } .s_prix{position: absolute; top: 500px; left: 120px;} .s_qte{position: absolute; top: 530px; left: 120px;} .s_inptext{font-size: 14px; width: 100px;} .s_txtcase{position: absolute; width: 90%; top: 570px; left: 5%; font-size: 14px; } .s_case{position: absolute; top: 590px; left: 120px;} .s_caseimg{ position: relative; height: 80px; width: 80px;} .s_valid{position: absolute; width: 80px; top: 610px; left: 130px; } .s_rempl{position: absolute; width: 90%; top: 695px; left: 5%; font-size: 0.65em; text-align: left; } .s_vente{position: absolute; color: white; background: #1F2021; width: 80%; top: 205px; height: 60%; left: 10%; font-size: 30px; text-align: center; border: 2px solid red; border-radius: 25px 0px 25px 0px; } .s_achat_img{ position: absolute; top: 5px;left: 0px; height: 60px; width: 60px;} .s_achat{ position: absolute; top: 5px;left: 80px; font-size: 17px;} .s_liste_joueur{ position: absolute; text-align: left; color: white; font-size: 15px; background: #1F2021; top: 200px; left: -200px; height: 225px; width: 140px; overflow : auto; padding: 5px; border: 2px solid red; border-radius: 0px 10px 0px 10px; z-index: 4; animation: s_liste_joueur 1s 1 linear; animation-fill-mode: forwards; } @keyframes s_liste_joueur { 0% {transform: translate3d( 0px, 0px, 0px) ; left: -200px; } 25% {transform: translate3d( 0px, 0px, 0px) ; left: -200px; } 100% {transform: translate3d( 0px, 0px, 0px) ; left: 0px; } } .s_liste_joueur img{height: 30px; width: 30px; vertical-align: middle; } .s_href{ color: white; } .s_achat_lvl{ position: absolute; color: white; font-size: 15px; background: #1F2021; top: 225px; left: 650px; height: 150px; width: 140px; overflow : auto; padding: 5px; border: 2px solid red; border-radius: 0px 10px 0px 10px;} .stand_finance{ position: absolute; background-color: #fdf1b8; left: 150px; height: 30px; width: 500px; top: 610px; text-align: center; padding-top: 3px; font-weight: bold; font-size: 0.69em; border: 2px solid #3A3C3E; border-radius: 0px 15px 0px 15px; } .pieces{ height: 350px; width: 350px; overflow-y: auto; /* auto plutôt que scroll */ overflow-x: hidden; -webkit-overflow-scrolling: touch; /* scroll fluide sur iPhone/iPad */ } .pieces::-webkit-scrollbar { width: 10px; } .pieces::-webkit-scrollbar-thumb { background-color: red; border-radius: 3px; } .pieces::-webkit-scrollbar-track { background: orange; } /* Style pour les titres (Prix / Quantité) */ .stand_label { width: 100%; text-align: center; margin-top: 10px; margin-bottom: 5px; font-weight: bold; color: #fff; /* À ajuster selon ton thème */ } /* Conteneur horizontal pour boutons + input */ .stand_control_group { display: flex; justify-content: center; align-items: center; gap: 3px; margin-bottom: 10px; width: 100%; } /* Les boutons */ .stand_btn { background: #333; border: 1px solid #555; border-radius: 4px; color: white; padding: 4px 8px; cursor: pointer; font-size: 12px; min-width: 15px; } .stand_btn:hover { background: #555; } /* L'input au milieu */ .stand_input { width: 90px !important; height: 25px; text-align: center; border-radius: 4px; border: 1px solid #ccc; } /* --------------------------------------------------------- page Tableau -------------------------------------------------------------- */ /* --------------------------------------------------------- page Tableau -------------------------------------------------------------- */ /* --------------------------------------------------------- page Tableau -------------------------------------------------------------- */ .menudroit_Tableau{ position: absolute; color: white; font-size:25px; background-color: #3A3C3E; height: 750px; width: 380px; top: -3px; left: 838px; border: 8px double #B87333; border-radius: 25px 25px 0px 25px; z-index: 1; padding: -2px; } .menu_barre_Tableau{ position: absolute; background: #1F2021; display:block; left: 10px; padding-top: 10px; top:10px; width: 340px; height: 722px; border-radius: 15px 15px 0px 15px; z-index: 2} .tableau_vide{position: absolute; left: 15px; height: 800px; width: 800px; top: 20px; } .t_case_img{height: 100px; width: 210px;} .t_case1{ position: absolute; left: 70px; top: 155px; } .t_case2{ position: absolute; left: 280px; top: 155px; } .t_case3{ position: absolute; left: 490px; top: 155px; } .t_case4{ position: absolute; left: 70px; top: 255px; } .t_case5{ position: absolute; left: 280px; top: 255px; } .t_case6{ position: absolute; left: 490px; top: 255px; } .t_case7{ position: absolute; left: 70px; top: 355px; } .t_case8{ position: absolute; left: 280px; top: 355px; } .t_case9{ position: absolute; left: 490px; top: 355px; } .inv {background: transparent; border: none !important; font-size:0; } .t_gagne{ position: absolute; left: 70px; top: 155px; height: 400px; width: 580px; font-size:40px; font-weight: bold;} .t_gagne img{ position: absolute; left: 260px; top: 190px; height: 80px; width: 120px;} .t_final{ position: relative; top: 50px; height: 150px; transform: rotate(0deg); animation: coffreok 5s infinite linear; } .t_final img{height: 95px; } .coffreok{ position: absolute; top: 5px; left: 20px; width: 95px; z-index: 19; transform: rotate(0deg); animation: coffreok 5s infinite linear; } @keyframes coffreok { 0% {transform: translateY(0px) rotate(-5deg);} 25% {transform: translateY(5px) rotate(5deg);} 50% {transform: translateY(-5px) rotate(-5deg);} 75% {transform: translateY(5px) rotate(5deg);} 100% {transform: translateY(0px) rotate(-5deg);} } .t_deniersor{ position: absolute; left: 385px; top: 375px; height: 1px; width: 1px; z-index: 19; animation: t_deniersor 8s 1 linear; animation-fill-mode: forwards; } .t_deniersor2{ position: absolute; left: 485px; top: 375px; height: 1px; width: 1px; z-index: 19; animation: t_deniersor 8s 1 linear; animation-fill-mode: forwards; } .t_deniersor_font {position: absolute; left: 385px; top: 395px; z-index: 19; font-weight: bold; font-size: 0px; animation: t_deniersor 8s 1 linear; animation-fill-mode: forwards; } @keyframes t_deniersor { 20% {transform: translate3d( 0px, 0px, 0px) ; height: 0px; width: 0px; font-size: 0px;} 40% {transform: translate3d( -55px, -55px, 0px) ; height: 110px; width: 110px; font-size: 45px;} 44% {transform: translate3d( -50px, -50px, 0px) ; height: 100px; width: 100px; font-size: 40px; } 48% {transform: translate3d( -55px, -55px, 0px) ; height: 110px; width: 110px; font-size: 45px; } 52% {transform: translate3d( -50px, -50px, 0px) ; height: 100px; width: 100px; font-size: 40px; } 56% {transform: translate3d( -55px, -55px, 0px) ; height: 110px; width: 110px; font-size: 45px; } 65% {transform: translate3d( 800px, -400px, 0px) ; height: 0px; width: 0px; font-size: 0px;} 100% {transform: translate3d( 800px, -400px, 0px) ; height: 0px; width: 0px; font-size: 0px;} } /* --------------------------------------------------------- page Banque -------------------------------------------------------------- */ /* --------------------------------------------------------- page Banque -------------------------------------------------------------- */ /* --------------------------------------------------------- page Banque -------------------------------------------------------------- */ .banque{ position: absolute; height: 400px; width: 400px top: 5px; left: 280px; } .b_bulle{ background-color:#fff; border:solid 2px #000; border-radius:12px; display:inline-block; margin:.5em; padding:.5em 1em; position:absolute; left: 530px; top: 30px ; text-align: left; width: 390px; height: 95px; opacity: 0; font-size: 15px; animation: b_bulle 5s 1 linear; animation-fill-mode: forwards; } @keyframes b_bulle { 50% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} 100% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1;} } .b_bulle:before { border:solid 12px transparent; border-left:solid 12px #000; border-top:solid 12px #000; bottom:-24px; content:""; height:0; left:5px; position:absolute; transform:skew(-15deg); width:0; } .b_bulle:after { border:solid 10px transparent; border-left:solid 10px #fff; border-top:solid 10px #fff; bottom:-19px; content:""; height:0; left:7px; position:absolute; transform:skew(-15deg); width:0; } .transaction{ position: relative; top:90px;} .livret{ position: relative; top: 30px;} .menu_barre_B1{ font-size: 16px; background: #1F2021; position: absolute; display:block; left: 5px; padding-right: 10px; padding-top: 10px; top:5px; overflow : auto; width: 180px; height: 730px; border-radius: 15px 15px 0px 15px; z-index: 2; transition: left 2s , transform 2s;} .menu_barre_B2{ font-size: 16px; background: #1F2021; position: absolute; display:block; left: 300px; padding-top: 10px; top:10px; overflow : auto; width: 190px; height: 720px; border-radius: 15px 15px 0px 15px; z-index: 2; transition: left 2s , transform 2s;} .fleche { position: absolute; top: 5px; left: 5px; width: 0; height: 0; border-top: 10px solid transparent; border-left: 20px solid yellow; border-bottom: 10px solid transparent; z-index: 10; cursor: pointer; } /* --------------------------------------------------------- Verger -------------------------------------------------------------- */ /* --------------------------------------------------------- Verger -------------------------------------------------------------- */ /* --------------------------------------------------------- Verger -------------------------------------------------------------- */ .verger0{position: absolute; height: 390px; top: 5px; left: 245px; overflow: hidden;} .labour{position: absolute; left: 205px; overflow: hidden;} .tracteur{position: absolute; left: -280px; top: 100px; animation: tracteur 12s infinite linear; } @keyframes tracteur { 0% {transform: translate3d( 0, 0, 0) ;} 29% {transform: translate3d( 90vw, 0, 0) } 30% {transform: translate3d( 90vw, 20px, 0) rotateY(180deg);} 59% {transform: translate3d( 0, 50px, 0) rotateY(180deg);} 100% {transform: translate3d( 0, 0, 0) rotateY(0);}} .cheval{position: absolute; left: -280px; top: 35px; height: 400px; animation: cheval 30s infinite linear; transform: rotateY(180deg); z-index: 2; } @keyframes cheval { 0% {transform: translate3d( 0, 0, 0) rotateY(180deg) ;} 29% {transform: translate3d( 90vw, 0, 0) rotateY(180deg) } 30% {transform: translate3d( 90vw, 0, 0) rotateY(0deg);} 59% {transform: translate3d( 0, 0, 0) rotateY(0deg);} 100% {transform: translate3d( 0, 0, 0) rotateY(180deg);}} .labour2{position: absolute; left: 0px; overflow: hidden; z-index: 5;} .cerf{position: absolute; left: 850px; top: 180px; animation: cerf 20s infinite linear; } @keyframes cerf { 0% {transform: translate3d( 0, 0, 0) ;} 10% {transform: translate3d( 0, 0, 0) ;} 29% {transform: translate3d( -100vw, 0, 0) } 70% {transform: translate3d( -100vw, 20px, 0) rotateY(180deg);} 99% {transform: translate3d( 0, 50px, 0) rotateY(180deg);} 100% {transform: translate3d( 0, 0, 0) rotateY(0);}} .verger_bas{ display: block; color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; z-index: 1; padding: -2px; z-index: 5; animation: menu_bas 2s 1 linear; animation-fill-mode: forwards; transition: top 2s , transform 2s;} @keyframes menu_bas { 0% {transform: translate3d( 0px, 0px, 0px) ;} 25% {transform: translate3d( 0px, 0px, 0px) ;} 100% {transform: translate3d( 0px, -385px, 0px) ;} } .verger_bas1{ display: none; color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; z-index: 1; padding: -2px; z-index: 5; animation: menu_bas 2s 1 linear; animation-fill-mode: forwards; transition: top 2s , transform 2s;} .txtV{ position: relative; top: -40px; left: 68px; height: 60px; width: 80px; z-index: 2;} .txtL{ position: relative; left: 10px; height: 80px; width: 150px; top: 0px; font-size: 16px; } .planter{position: absolute; top: -400px; left: 220px; z-index: 2; animation: planter 9s 1 linear; animation-fill-mode: forwards; } @keyframes planter { 0% {transform: translate3d( 0, 0, 0) ;} 70% {transform: translate3d( 0, 0, 0) ;} 85% {transform: translate3d( 0, 450px, 0) ;} 85.5% {transform: translate3d( 0, 420px, 0) ;} 86% {transform: translate3d( 0, 450px, 0) ;} 100% {transform: translate3d( 0, 450px, 0) ;}} .trou{position: absolute; top: 300px; left: 330px; z-index: 1; opacity: 0; animation: trou 9s 1 linear; animation-fill-mode: forwards; } @keyframes trou { 0%{opacity: 0; } 30%{opacity: 0; } 60%{opacity: 1; } 96%{opacity: 1; } 100%{opacity: 0; } } .pelle{ position: absolute; top: -20px; left: 860px; z-index: 2; transform: rotate(-25deg) ; animation: pelle 9s 1 linear; animation-fill-mode: forwards; } @keyframes pelle { 0% {transform: translate3d( 0, 0, 0) ;} 10% {transform: translate3d( 0, 0, 0) ;} 30% {transform: translate3d( -440px, 210px, 0) rotate(-25deg) ;} 30% {transform: translate3d( -440px, 210px, 0) rotate(-25deg) ;} 35% {transform: translate3d( -350px, 150px, 0) rotate(30deg);} 40% {transform: translate3d( -450px, 215px, 0) rotate(-25deg) ;} 45% {transform: translate3d( -350px, 150px, 0) rotate(30deg);} 50% {transform: translate3d( -455px, 220px, 0) rotate(-25deg) ;} 55% {transform: translate3d( -350px, 150px, 0) rotate(30deg);} 60% {transform: translate3d( -465px, 225px, 0) rotate(-25deg) ;} 65% {transform: translate3d( -350px, 150px, 0) rotate(30deg);} 70% {transform: translate3d( 0, 0px, 0) ;} 80% {transform: translate3d( 0, 0px, 0) ;}90% {transform: translate3d( -465px, 225px, 0) rotate(-25deg) ;} 95% {transform: translate3d( -350px, 150px, 0) rotate(30deg);} 100% {transform: translate3d( 0, 00px, 0) ;} } .ferme_noir10{ position: absolute; background-color: #4a2401; width: 1200px; height: 750px; opacity:1; z-index: 50; animation: ferme_noir 11s 1 linear; animation-fill-mode: forwards; } .oranger_sec{ position: absolute; left: 155px; top: 75px; width: 400px;height: 300px;} .herisson{position: absolute; left: -50px; top: 345px; animation: herisson 40s infinite linear; } @keyframes herisson { 0% {transform: translate3d( 0, 0, 0) ;} 15% {transform: translate3d( 350px, 0, 0) ;} 25% {transform: translate3d( 350px, 0, 0) ;} 35% {transform: translate3d( 800px, 0, 0);} 65% {transform: translate3d( 800px, 0, 0) rotateY(180deg);} 75% {transform: translate3d( 405px, 0, 0) rotateY(180deg);} 85% {transform: translate3d( 405px, 0, 0) rotateY(180deg);} 99.9% {transform: translate3d( 0, 0, 0) rotateY(180deg);} 100% {transform: translate3d( 0, 0, 0) rotateY(0);}} .vergersec{position: absolute; height: 390px; width: 701px; background-image: url(https://valperdor.fr/jeux/verger/v_verger1.jpg); top: 5px; left: 245px; overflow: hidden; animation: vergersec 5s 1 linear; animation-fill-mode: forwards; } @keyframes vergersec { 0% {background-image: url(https://valperdor.fr/jeux/verger/v_verger1.jpg);} 50% {background-image: url(https://valperdor.fr/jeux/verger/v_verger1.jpg);} 100% {background-image: url(https://valperdor.fr/jeux/verger/v_verger2.jpg);}} .arbresec{position: absolute; height: 300px; width: 400px; background-image: url(https://valperdor.fr/jeux/verger/v_oranger_sec.png); top: 75px; left: 196px; overflow: hidden; animation: arbresec 5s 1 linear; animation-fill-mode: forwards; } @keyframes arbresec { 0% {background-image: url(https://valperdor.fr/jeux/verger/v_oranger_sec.png);} 50% {background-image: url(https://valperdor.fr/jeux/verger/v_oranger_sec.png);} 100% {background-image: url(https://valperdor.fr/jeux/verger/v_oranger_vert.png);}} .vergerert{position: absolute; height: 390px; width: 701px; background-image: url(https://valperdor.fr/jeux/verger/v_verger2.jpg); top: 5px; left: 245px; overflow: hidden; } .arbrevert{position: absolute; height: 300px; width: 400px; background-image: url(https://valperdor.fr/jeux/verger/v_oranger_vert.png); top: 75px; left: 196px; overflow: hidden; } .arrose{position: absolute; height: 95px; width: 132px; background-image: url(https://valperdor.fr/jeux/verger/v_arrose.gif); top: 275px; left: 416px;} .aideV{ color: white ; background-color: #666; position: absolute; padding: 20px ; display:block; top: 430px; left: 10%; height: 40%; width: 80%; border: 5px outset red; border-radius:0px 25px 0px 25px; font-size: 30px } .fleur1{ position: absolute; left: 350px; top: 100px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur2{ position: absolute; left: 315px; top: 110px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur3{ position: absolute; left: 380px; top: 120px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur4{ position: absolute; left: 280px; top: 131px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur5{ position: absolute; left: 345px; top: 135px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur6{ position: absolute; left: 395px; top: 150px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur7{ position: absolute; left: 260px; top: 152px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur8{ position: absolute; left: 310px; top: 135px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur9{ position: absolute; left: 410px; top: 131px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur10{ position: absolute; left: 290px; top: 159px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur11{ position: absolute; left: 320px; top: 161px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur12{ position: absolute; left: 242px; top: 175px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur13{ position: absolute; left: 360px; top: 165px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur14{ position: absolute; left: 410px; top: 251px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur15{ position: absolute; left: 345px; top: 185px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur16{ position: absolute; left: 395px; top: 190px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur17{ position: absolute; left: 260px; top: 195px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur18{ position: absolute; left: 310px; top: 195px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur19{ position: absolute; left: 428px; top: 191px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur20{ position: absolute; left: 290px; top: 229px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur21{ position: absolute; left: 320px; top: 221px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur22{ position: absolute; left: 242px; top: 225px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur23{ position: absolute; left: 360px; top: 225px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur24{ position: absolute; left: 390px; top: 221px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } .fleur25{ position: absolute; left: 435px; top: 225px; height: 0px; width: 0px; animation: fleur 5s 1 linear; animation-fill-mode: forwards; } @keyframes fleur { from {height: 0px; width: 0px; } to {height: 25px; width: 25px;} } .fleur{position: absolute; left: 47px; } .poule{position: absolute; left: -75px; top: 325px; height: 32px; animation: poule 40s infinite linear; transform: rotateY(180deg); } @keyframes poule { 0% {transform: translate3d( 0, -100px, 0) rotateY(180deg) rotate(-20deg);} 15% {transform: translate3d( 325px, 30px, 0) rotateY(180deg);} 35% {transform: translate3d( 800px, 0, 0) rotateY(180deg) ;} 50% {transform: translate3d( 800px, 0, 0) rotateY(0) ;} 70% {transform: translate3d( 325px, 30px, 0) rotateY(0) ;} 95% {transform: translate3d( 0px, -100px, 0) rotateY(0) rotate(20deg);} 100% {transform: translate3d( 0, -100px, 0) rotateY(0);}} /* --------------------------------------------------------- Usine -------------------------------------------------------------- */ /* --------------------------------------------------------- Usine -------------------------------------------------------------- */ /* --------------------------------------------------------- Usine -------------------------------------------------------------- */ .usine{position: absolute; left: 250px; overflow: hidden;} .sourie{position: absolute; left: -50px; top: 345px; animation: sourie 40s infinite linear; } @keyframes sourie { 0% {transform: translate3d( 0, 0, 0) ;} 25% {transform: translate3d( 800px, -80px, 0);} 65% {transform: translate3d( 800px, 0, 0) rotateY(180deg);} 85% {transform: translate3d( 0px, -50px, 0) rotateY(180deg);} 99.9% {transform: translate3d( 0, 0, 0) rotateY(180deg);} 100% {transform: translate3d( 0, 0, 0) rotateY(0);}} .usine_repare{position: relative; left: 0px; top: 0px; width: 701px; height: 390px; animation: usine_repare 5s 1 linear; animation-fill-mode: forwards; } @keyframes usine_repare { 0% {background-image: url(https://valperdor.fr/jeux/maison/usine_kc.png); } 90% {background-image: url(https://valperdor.fr/jeux/maison/usine_stop.png);} 100% {background-image: url(https://valperdor.fr/jeux/maison/usine_stop.png);} } .usine_brosse{position: absolute; left: -50px; top: 55px; animation: usine_brosse 5s 1 linear; animation-fill-mode: forwards; } @keyframes usine_brosse { 0% {transform: translate3d( 0, 0, 0) ;} 49% {transform: translate3d( 800px, 0px, 0);} 50% {transform: translate3d( 800px, 180px, 0)rotateY(180deg);} 99.99% {transform: translate3d( 0, 200px, 0) rotateY(180deg);opacity: 1;} 100% {transform: translate3d( 0, 200px, 0) rotateY(0); opacity: 0;} } .usine_balais{position: absolute; left: 700px; top: 190px; animation: usine_balais 5s 1 linear; animation-fill-mode: forwards; } @keyframes usine_balais { 0% {transform: translate3d( 0, 0, 0) ;} 49% {transform: translate3d( -950px, 10px, 0);} 50% {transform: translate3d( -950px, -180px, 0)rotateY(180deg);} 99.99% {transform: translate3d( 0, -200px, 0) rotateY(180deg);opacity: 1;} 100% {transform: translate3d( 0, 200px, 0) rotateY(0); opacity: 0;} } .usine_marche{position: relative; left: 0px; top: 0px; width: 701px; height: 390px; animation: usine_repare 5s 1 linear; animation-fill-mode: forwards; } @keyframes usine_repare { 0% {background-image: url(https://valperdor.fr/jeux/maison/usine_stop.png); } 90% {background-image: url(https://valperdor.fr/jeux/maison/usine_on.png);} 100% {background-image: url(https://valperdor.fr/jeux/maison/usine_on.png);} } .bt_or1{position: absolute;left: 260px; top: 165px; z-index: 3; opacity: 0; animation: bt_or 15s infinite linear;} .bt_or2{position: absolute;left: 260px; top: 165px; z-index: 3; opacity: 0; animation: bt_or 15s infinite linear; animation-delay: 3s;} .bt_or3{position: absolute;left: 260px; top: 165px; z-index: 3; opacity: 0; animation: bt_or 15s infinite linear; animation-delay: 6s;} .bt_or4{position: absolute;left: 260px; top: 165px; z-index: 3; opacity: 0; animation: bt_or 15s infinite linear; animation-delay: 9s;} .bt_or5{position: absolute;left: 260px; top: 165px; z-index: 3; opacity: 0; animation: bt_or 15s infinite linear; animation-delay: 12s;} @keyframes bt_or { 0% {transform: translate3d( 0, 0, 0) ;} 5% {transform: translate3d( 10px, 0px, 0);opacity: 1;} 50% {transform: translate3d( 290px, 0px, 0);opacity: 1;} 53% {transform: translate3d( 335px, 30px, 0) rotate(90deg) ;opacity: 1;height: 55px;} 55% {transform: translate3d( 340px, 50px, 0) rotate(90deg) ;opacity: 1; } 57% {opacity: 0; height: 40px;} 58% {transform: translate3d( 340px, 70px, 0) rotate(90deg) ;opacity: 0;} 99.99% {transform: translate3d( 340px, 70px, 0) rotate(90deg) ;opacity: 0;} 100% {transform: translate3d( 300px, 50px, 0) rotateY(0); opacity: 0;} } .txtU{ position: relative; top: -60px; left: 68px; height: 60px; width: 80px; z-index: 2;} /* --------------------------------------------------------- Promo -------------------------------------------------------------- */ /* --------------------------------------------------------- Promo -------------------------------------------------------------- */ /* --------------------------------------------------------- Promo -------------------------------------------------------------- */ .un{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; transition: top 2s , transform 2s;} .cinq{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; transition: top 2s , transform 2s;} .dix{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; transition: top 2s , transform 2s;} .vingt{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; transition: top 2s , transform 2s;} .trente{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; transition: top 2s , transform 2s;} .quarante{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; transition: top 2s , transform 2s;} .cinquante{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; transition: top 2s , transform 2s;} .diam{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; transition: top 2s , transform 2s;} .special1{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; transition: top 2s , transform 2s;} .special2{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; transition: top 2s , transform 2s;} .special{ position: absolute; text-align: left; display:block; left: 15px; color: white; font-size: 14px; background: #1F2021; top: 338px; height: 395px; width: 170px; overflow : auto; padding-top: 5px; border-radius: 0px 10px 10px 10px;} .paypal_bouton{ position: absolute; text-align: left; display:block; right: 50px; top: 50px; } .promo5{ position: absolute; top: 20px; left: 80px; height: 120px; animation: promo 10s infinite linear; } .promo10{position: absolute; top: 20px; left: 210px; height: 120px; animation: promo 13s infinite linear; } @keyframes promo { 0% {transform: rotate(0deg); } 25% {transform: rotate(10deg); } 75% {transform: rotate(-10deg); } 100% {transform: rotate(0deg); } } /* --------------------------------------------------------- Arène Stadium -------------------------------------------------------------- */ /* --------------------------------------------------------- Arène Stadium -------------------------------------------------------------- */ /* --------------------------------------------------------- Arène Stadium -------------------------------------------------------------- */ .stadium{background: linear-gradient( #3f87a6,#f69d3c); position: relative; background-image: url(https://valperdor.fr/jeux/colisum.png); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} .ar_achat{color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: -340px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; animation: ar_achat 2s 1 linear; animation-fill-mode: forwards; } @keyframes ar_achat { 0% {transform: translate3d( 0px, -340px, 0px) ;} 25% {transform: translate3d( 0px, -340px, 0px) ;} 100% {transform: translate3d( 0px, 0px, 0px) ;} } .ar_H{position: absolute; height: 270px; width: 180px; background-color: #757678; left: 50px; text-align: center; vertical-align: middle; color: black; cursor: pointer;} .ar_M{position: absolute; height: 270px; width: 180px; background-color: #757678; left: 270px; text-align: center; vertical-align: middle; color: black; cursor: pointer;} .ar_F{position: absolute; height: 270px; width: 180px; background-color: #757678; left: 490px; text-align: center; vertical-align: middle; color: black; cursor: pointer;} .ar_ligne{ position: absolute; top: 10px; left: 2%; height: 120px; width: 96%} .flecheD{ position: absolute; top: 10px; left: 5px; width: 0; height: 0; border-top: 10px solid transparent; border-left: 20px solid lime; border-bottom: 10px solid transparent; z-index: 3; opacity: 1; transition: opacity 2s , transform 2s;} .flecheD2{ position: absolute; top: -30px; left: -25px; width: 0; height: 0; border-top: 10px solid transparent; border-right: 20px solid lime; border-bottom: 10px solid transparent; z-index: 3; opacity: 0; transition: opacity 2s , transform 2s;} .ar_echange{position: absolute; top: 320px; left: 277px;} .flecheG{ position: absolute; top: 10px; left: 175px; width: 0; height: 0; border-top: 10px solid transparent; border-right: 20px solid lime; border-bottom: 10px solid transparent; z-index: 3; opacity: 1; transition: opacity 2s , transform 2s;} .flecheG2{ position: absolute; top: 10px; left: 205px; width: 0; height: 0; border-top: 10px solid transparent; border-left: 20px solid lime; border-bottom: 10px solid transparent; z-index: 3; opacity: 0; transition: opacity 2s , transform 2s;} .flecheB{ position: absolute; top: 0px; left: 0px; width: 0; height: 0; border-left: 10px solid transparent; border-top: 20px solid lime; border-right: 10px solid transparent; z-index: 10; opacity: 1; transition: opacity 2s , transform 2s;} .flecheB2{ position: absolute; top: -30px; left: -30px; width: 0; height: 0; border-left: 10px solid transparent; border-bottom: 20px solid lime; border-right: 10px solid transparent; z-index: 10; opacity: 0; transition: opacity 2s , transform 2s;} .hero_choix{position: absolute; height: 0px; left: 600px; top: 50px; animation: hero_choix 4s 1 linear; animation-fill-mode: forwards; } @keyframes hero_choix { 0% { height: 0px; } 20% { height: 0px; } 100% { height: 500px; left: 450px; } } .ar_manage{position: relative; background-color: #3A3C3E; color: white; height: 200px; width: 140px; margin-left: auto; margin-right: auto; cursor: pointer;} .inscription{color: white; background-color: #3A3C3E; position: absolute; height: 380px; width: 750px; top: -380px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; ; padding: -2px; animation: inscription 2s 1 linear; animation-fill-mode: forwards; } @keyframes inscription { 0% {transform: translate3d( 0px, 0px, 0px) ;} 25% {transform: translate3d( 0px, 0px, 0px) ;} 100% {transform: translate3d( 0px, 376px, 0px) ;} } .menu_inscription{ overflow-y: auto; overflow-x: hidden; position: absolute; text-align: left; background-color: #1F2021; padding: 15px; font-size: 18px; height: 340px; left: 5px; top: 5px; width: 710px; border-radius: 0px 20px 0px 20px; z-index: 2} .menu_stadium{ position: absolute; text-align: left; background-color: #1F2021; padding: 15px; font-size: 18px; height: 290px; left: 5px; top: 5px; width: 710px; border-radius: 0px 20px 0px 20px; z-index: 2} .bp_inscription{position: absolute; top: 340px; left: 277px;} .imgLA{position: relative; left: 0px; height: 100px; width: 710px; top: 0px; font-size: 12px; } .imgVA{ position: relative; top: 10px; left: 0px; max-height: 60px; max-width: 60px; z-index: 2} .texteVA{ position: absolute; width: 85px; top: 70px; height: 15px; left: 2px; overflow: hidden; } .imgCA1{ position: absolute; background-color: #EFEFEF; left: 10px; height: 90px; width: 90px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .imgCA2{ position: absolute; background-color: #EFEFEF; left: 110px; height: 90px; width: 90px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .imgCA3{ position: absolute; background-color: #EFEFEF; left: 210px; height: 90px; width: 90px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .imgCA4{ position: absolute; background-color: #EFEFEF; left: 310px; height: 90px; width: 90px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .imgCA5{ position: absolute; background-color: #EFEFEF; left: 410px; height: 90px; width: 90px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .imgCA6{ position: absolute; background-color: #EFEFEF; left: 510px; height: 90px; width: 90px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .imgCA7{ position: absolute; background-color: #EFEFEF; left: 610px; height: 90px; width: 90px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .imgCA8{ position: absolute; background-color: #EFEFEF; left: 570px; height: 90px; width: 90px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .imgCA9{ position: absolute; background-color: #EFEFEF; left: 650px; height: 90px; width: 90px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } /* --------------------------------------------------------- Page Succès -------------------------------------------------------------- */ /* --------------------------------------------------------- Page Succès -------------------------------------------------------------- */ /* --------------------------------------------------------- Page Succès -------------------------------------------------------------- */ .succes{background-color: #92C653 ; position: relative; background-image: url(https://valperdor.fr/jeux/maison/fond_succes.png); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} .menu_bas_succes{color: white; background-color: #3A3C3E; position: absolute; height: 720px; width: 750px; top: 790px; left: 225px; border-width: 8px 8px 8px 8px; border-style: double; border-color: #B87333; border-radius: 0px 25px 0px 25px; z-index: 1; padding: -2px; z-index: 5; animation: menu_bas_succes 4s 1 linear; animation-fill-mode: forwards; } @keyframes menu_bas_succes { 0% {transform: translate3d( 0px, 0px, 0px) ;} 25% {transform: translate3d( 0px, 0px, 0px) ;} 100% {transform: translate3d( 0px, -770px, 0px) ;} } .menu_barreB1_succes{ position: absolute; text-align: left; background-color: #3A3C3E; padding: 5px; font-size: 18px; left: 5px; top: 25px; width: 730px; overflow-x : hidden; overflow-y : auto; height: 680px; border-radius: 0px 20px 0px 20px; z-index: 2} .succes_cadre{ position: relative; text-align: center; margin-bottom: 15px; background-color: #1F2021; padding: 0px; font-size: 20px; left: 0px; top: 0px; height: 120px; width: 720px; border-width: 8px 8px 8px 8px; border-style: double; border-color: #B87333; border-radius: 0px 10px 0px 10px; z-index: 2;} .succes_titre{ position: absolute; text-align: center; padding: 5px; font-size: 20px; font-family: 'Morpheus'; font-weight: bold; left: 100px; top: -30px; width: 550px; background: url(https://valperdor.fr/themes/onthemix/images/fond_ban.png); color: black; background-repeat: repeat; border-width: 8px 8px 8px 8px; border-style: double; border-color: #B87333; border-radius: 10px 10px 10px 10px; z-index: 3; } .succes_sous_titre{ position: absolute; text-align: left; color: white; top: 5px; left: 7px; font-size: 20px; font-style: bold;} .succes_barre{ position: absolute; text-align: left; background-color: #3A3C3E; top: 45px; left: 20px; height: 25px; width: 675px;} .succes_barre_couleur{ position: absolute; text-align: left; background-color: orange; top: 0px; left: 0px; height: 25px; width: 0px; } .succes_barre_text{ position: absolute; text-align: center; background-color: none; top: 0px; left: 0px; width: 675px; z-index: 2;} .objet{ position: absolute; left: 900px; top: 350px; height: 0px; width: 0px; z-index: 2; animation: objet 4s 1 linear; animation-fill-mode: forwards; } @keyframes objet { 0% {transform: translate3d( 0px, 0px, 0px) ; height: 0px; width: 0px;} 50% {transform: translate3d( -100px, -100px, 0px) rotate(-25deg) ; height: 150px; width: 150px;} 60% {transform: translate3d( -100px, -100px, 0px) rotate(-15deg) ; height: 150px; width: 150px;} 100% {transform: translate3d( -1300px, -750px, 0px) rotate(25deg) ;height: 0px; width: 0px;} } /* ---------------------------------------------------- Page Mine Diamant --------------------------------------------------------- */ /* ---------------------------------------------------- Page Mine Diamant --------------------------------------------------------- */ /* ---------------------------------------------------- Page Mine Diamant --------------------------------------------------------- */ .mine{position: absolute; height: 400px; width: 400px top: 5px; left: 240px; } .imgM{position: relative; left: 20px; height: 100px; width: 150px; top: 0px; font-size: 12px; } .menu_barre_G2{ background: #1F2021; overflow : auto; position: absolute; display:block; left: 8px; padding-top: 10px; top: 8px; width: 185px; height: 726px; border-radius: 0px 15px 15px 15px; z-index: 2} .mineur_pelle{ position: absolute; top: 125px; left: 600px; height: 250px;} .mineur_pioche{ position: absolute; top: 125px; left: 400px; height: 250px;} /* ---------------------------------------------------- Page Diamantaire --------------------------------------------------------- */ /* ---------------------------------------------------- Page Diamantaire --------------------------------------------------------- */ /* ---------------------------------------------------- Page Diamantaire --------------------------------------------------------- */ .camera{ position: absolute; top: 25px; left: 850px; height: 50px;} .chien{ position: absolute; top: 275px; left: 225px; height: 100px;} /*######################################################################################################################################################## ####################################################################### Page Plaine ###################################################################### ########################################################################################################################################################*/ .plaine{background-color: #92C653 ; position: relative; background-image: url('https://valperdor.fr/jeux/plaine/plaine.png'); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} .btn{cursor: pointer; border: transparent; background-color: transparent;} .edit_text{ position: absolute; z-index: 99; top: 10px; left: 10px;} .edit_text2{ position: absolute; z-index: 99; top: 45px; left: 10px;} .intro_plaine{ position: absolute; top: 30px; height: 600px; width: 1000px; color: #FFFFFF; left: 50px; font-size: 1.562em; text-align: center; background-color: #1F2021; border: 0.312em solid red; padding: 1.563em; -moz-border-radius:0 50px; -webkit-border-radius:0 50px; border-radius:0 50px; } /* Cadre de la création du perso */ .ouvcase{position: absolute; overflow: hidden; top: 10px; height: 400px; left: 400px; width: 400px; border: 0.312em solid red; background-color: #1F2021; padding: 1.563em; -moz-border-radius:0 50px; -webkit-border-radius:0 50px; border-radius:0 50px; } .ouvtext{color: white; position: absolute; text-align: center; font-size: 30px; top: 480px; height: 100px; left: 200px; width: 800px; border: 0.312em solid red; background-color: #1F2021; padding: 1.563em; -moz-border-radius:0 50px; -webkit-border-radius:0 50px; border-radius:0 50px; } .disp { position: relative; top: 0px; left: 18px; width: 500px; height: 500px; z-index: 99; opacity: 1; animation: disparaitre 5s 1 linear ; animation-fill-mode: forwards; } @keyframes disparaitre { 0% { opacity: 1;} 30% { opacity: 1;} 100% { opacity: 0;} } .cloudplaine { position: absolute; top: -15px; left: -15px; background-image: url(https://valperdor.fr/jeux/nuage2.png);background-repeat: no-repeat; width: 180px; height: 180px; z-index: 20; animation: cloudplaine 10s 0s infinite ; } @keyframes cloudplaine { 50% { transform: translateY(-5px) translateX(5px) ; } } .mouette{position: absolute; height: 50px; top: 0px; left: 1250px; z-index: 12; animation: mouette 500s infinite linear; } @keyframes mouette { 0% {transform: translate3d( 0px, 0px, 0px) rotateY(0deg);} 10% {transform: translate3d( -1320px, 350px, 0px) rotateY(0deg);} 20% {transform: translate3d( -1320px, 350px, 0px) rotateY(180deg);} 30% {transform: translate3d( 0px, 550px, 0px) rotateY(180deg) ;} 30.1% {transform: translate3d( 0px, 550px, 0px) rotateY(0deg) ;} 40% {transform: translate3d( -1320px, 450px, 0px) rotateY(0deg) ;} 40.1% {transform: translate3d( -1320px, 450px, 0px) rotateY(180deg) ;} 50% {transform: translate3d( 0px, 750px, 0px) rotateY(180deg);} 100% {transform: translate3d( 0px, 0px, 0px)rotateY(180deg) ;} } .voilier{position: absolute; height: 75px; top: 310px; left: -100px; z-index: 8; animation: voilier 100s infinite linear; } @keyframes voilier { 0% {transform: translate3d( 0px, 0px, 0px) , rotate(0deg);} 11% {transform: translate3d( 210px, 185px, 0px) rotateY(0deg) ;} 15% {transform: translate3d( 300px, 215px, 0px) rotateY(0deg) ;} 20% {transform: translate3d( 450px, 305px, 0px) rotateY(0deg) ;} 30% {transform: translate3d( 700px, 500px, 0px) rotateY(0deg) ;} 59% {transform: translate3d( 800px, 500px, 0px) rotateY(180deg) rotateZ(-60deg) ;} 70% {transform: translate3d( 800px, 500px, 0px) rotateY(180deg) rotateZ(-60deg) ;} 80% {transform: translate3d( 450px, 305px, 0px) rotateY(180deg) rotateZ(-60deg) ;} 90% {transform: translate3d( 300px, 215px, 0px) rotateY(180deg) rotateZ(-60deg) ;} 93% {transform: translate3d( 210px, 185px, 0px) rotateY(180deg) rotateZ(-60deg) ;} 100% {transform: translate3d( 0px, 0px, 0px) rotateY(180deg) rotateZ(-60deg) ;} } .Chalutier{position: absolute; height: 45px; top: 335px; left: 50px; z-index: 8; animation: Chalutier 50s infinite linear; } @keyframes Chalutier { 0% {transform: translate3d( 0px, 0px, 0px) , rotate(0deg);} 10% {transform: translate3d( 10px, 10px, 0px) rotate(5deg) ;} 20% {transform: translate3d( 0px, 0px, 0px) rotate(0deg) ;} 30% {transform: translate3d( -10px, -10px, 0px) rotate(-5deg) ;} 40% {transform: translate3d( 0px, 0px, 0px) rotate(0deg) ;} 50% {transform: translate3d( 10px, 10px, 0px) rotate(5deg) ;} 60% {transform: translate3d( 10px, 10px, 0px) rotate(0deg) ;} 70% {transform: translate3d( 10px, 15px, 0px) rotate(-5deg) ;} 80% {transform: translate3d( 10px, 10px, 0px) rotate(0deg) ;} 90% {transform: translate3d( 10px, 10px, 0px) rotate(5deg) ;} 100% {transform: translate3d( 0px, 0px, 0px) rotate(0deg) ;} } .Chalutiee{position: absolute; height: 45px; top: 690px; left: 640px; z-index: 8; transform: scaleX(-1); animation: Chalutiee 5s infinite linear; } /* Ton animation principale (si déjà existante) */ @keyframes Chalutiee { 0% { left: 630px; } 50% { left: 640px; } /* exemple */ 100% { left: 630px; } /* exemple */ } /* Animation de léger mouvement vertical */ @keyframes Flotte { 0%, 100% { transform: translateY(0) scaleX(-1); } 50% { transform: translateY(-8px) scaleX(-1); } /* monte un peu */ } .plaine_nom{ position: absolute; text-align: center;color: white; background-color: #1F2021; padding: 5px; font-size: 20px; left: 250px; top: 0px; width: 380px; border: 3px solid red; border-radius: 10px 10px 10px 10px; z-index: 3} .dmdaide{position: absolute; left: 1050px; top: 650px; z-index: 99;} .voilier_am{position: absolute; height: 75px; top: 455px; left: 185px; z-index: 8; } .voilier_in{position: absolute; height: 75px; top: 350px; left: -100px; z-index: 7; width: 87px; height: 75px; background-image: url(https://valperdor.fr/jeux/plaine/voilier_prt.png); background-size: 87px 75px; animation: voilier_in 25s 1 linear; animation-delay: 4s; animation-fill-mode: forwards; } @keyframes voilier_in { 0% {transform: translate3d( 0px, 0px, 0px) ;} 69.9% {transform: translate3d( 250px, 145px, 0px) ;} 70% {transform: translate3d( 250px, 145px, 0px) ;} 100% {transform: translate3d( 285px, 105px, 0px) ;} } .voilier_out{position: absolute; height: 75px; top: 465px; left: 185px; z-index: 7; width: 87px; height: 75px; animation: voilier_out 25s 1 linear; animation-delay: 1.5s; animation-fill-mode: forwards; } @keyframes voilier_out { 0% {transform: translate3d( 0px, 0px, 0px) ;} 30% {transform: translate3d( 75px, 75px, 0px) ;} 60% {transform: translate3d( 170px, 230px, 0px) ;} 100% {transform: translate3d( 500px, 400px, 0px) ;} } .text_compteur{position: absolute; height: 18px; width: 185px; top: 5px; right: 5px; z-index: 7; text-align: left; color: white; background-color: #1F2021; } .compteur{position: absolute; height: 30px; width: 200px; top: -16px; right: 5px; z-index: 7; text-align: right;color: yellow;} /*######################################################################################################################################################## ########################################################################### Champ ####################################################################### #########################################################################################################################################################*/ .champ{position: absolute; width: 790px; height: 395px; top: 5px; left: 205px; overflow: hidden;} .barriere{position: absolute; width: 200px; top: 100px; left: 355px; } .paysan{position: absolute; height: 200px; top: 195px; left: 880px; } .barriere{position: absolute; height: 200px; width: 790px; top: -200px; left: 205px; animation: barriere 2s 1 linear; animation-fill-mode: forwards; } @keyframes barriere { 0% {transform: translate3d( 0px, 0px, 0px) ; } 100% {transform: translate3d( 0px, 305px, 0px) }} .germaine{position: absolute; height: 200px; top: 120px; left: -150px; animation: germaine 15s 1 linear; animation-fill-mode: forwards; } @keyframes germaine { 0% {transform: translate3d( 0px, 0px, 0px) rotateY(180deg); } 100% {transform: translate3d( 1200px, 0px, 0px) rotateY(180deg)}} .champ_pousse{position: absolute; width: 780px; top: 0px; left: 0px; opacity: 0; animation: champ_pousse 10s 1 linear; animation-fill-mode: forwards } @keyframes champ_pousse { 0% {opacity: 0%; } 100% {opacity: 1;}} .taupe{position: absolute; width: 70px; top: 297px; left: 395px; opacity: 1; animation: taupe 40s infinite linear;} @keyframes taupe { 0% {opacity: 1%; } 11% {opacity: 1;} 12% {opacity: 0;} 49% {opacity: 0;} 50% {opacity: 1;} 62% {opacity: 1;} 63% {opacity: 0;} 100% {opacity: 0;}} /*######################################################################################################################################################## ######################################################################## Grange Berger #################################################################### #########################################################################################################################################################*/ .grange{ position: absolute; height: 400px; width: 800px ;top: 0px; left: 200px; overflow: hidden;} .grange0{ position: absolute; display:block; height: 400px; width: 800px ;top: 0px; left: 200px; background-image: url(https://valperdor.fr/jeux/grange/grange_berger0.png); background-size: 800px 400px; background-repeat: no-repeat; animation: grange 3s 1 linear; animation-fill-mode: forwards } @keyframes grange { 0% {background-image: url(https://valperdor.fr/jeux/grange/grange_berger0.png); background-size: 800px 400px;} 100% {background-image: url(https://valperdor.fr/jeux/grange/grange_berger1.png); background-size: 800px 400px;}} .gframe{ position: absolute; height: 400px; width: 800px ;top: 5px; left: 200px; } .marteau1{position: absolute; left: 850px; top: 190px; animation: marteau1 5s 1 linear; animation-fill-mode: forwards; } .marteau2{position: absolute; left: -50px; top: 55px; animation: marteau2 5s 1 linear; animation-fill-mode: forwards; } @keyframes marteau1 { 0% {transform: translate3d( 0, 0, 0)rotateY(180deg) ;} 49% {transform: translate3d( -950px, 10px, 0)rotateY(180deg);} 50% {transform: translate3d( -950px, -180px, 0)rotateY(0deg);} 99.99% {transform: translate3d( 0, -200px, 0) rotateY(0deg);opacity: 1;} 100% {transform: translate3d( 0, 200px, 0) rotateY(180deg); opacity: 0;} } @keyframes marteau2 { 0% {transform: translate3d( 0, 0, 0) ;} 49% {transform: translate3d( 800px, 0px, 0);} 50% {transform: translate3d( 800px, 180px, 0)rotateY(180deg);} 99.99% {transform: translate3d( 0, 200px, 0) rotateY(180deg);opacity: 1;} 100% {transform: translate3d( 0, 200px, 0) rotateY(0); opacity: 0;} } /*######################################################################################################################################################## ######################################################################## enclos Brebis ################################################################### #########################################################################################################################################################*/ .paysan1{position: absolute; height: 200px; top: 195px; left: 345px; } .barriere1{position: absolute; top: 70px; left: -700px; animation: barriere1 2s 1 linear; animation-fill-mode: forwards; } @keyframes barriere1 { 0% {transform: translate3d( 0px, 0px, 0px) ; } 100% {transform: translate3d( 700px, 0px, 0px) }} .barriere2{position: absolute; top: 70px; left: 600px; animation: barriere2 2s 1 linear; animation-fill-mode: forwards; } @keyframes barriere2 { 0% {transform: translate3d( 0px, 0px, 0px) ; } 100% {transform: translate3d( -600px, 0px, 0px) }} .abreuvoir{position: absolute; top: -100px; left: 730px; animation: abreuvoir 2s 1 linear; animation-fill-mode: forwards; } @keyframes abreuvoir { 0% {transform: translate3d( 0px, 0px, 0px) ; } 100% {transform: translate3d( 0px, 400px, 0px) }} .abreuvoirok{position: absolute; top: 300px; left: 730px; } .ratelierok{position: absolute; top: 200px; left: -10px; } .ratelier{position: absolute; top: -100px; left: -10px; animation: ratelier 2s 1 linear; animation-fill-mode: forwards; } @keyframes ratelier { 0% {transform: translate3d( 0px, 0px, 0px) ; } 100% {transform: translate3d( 0px, 300px, 0px) }} .mouton1{position: absolute; top: 230px; left: 100px; transform: rotateY(180deg); } .mouton2{position: absolute; top: 180px; left: 250px; } .mouton3{position: absolute; top: 300px; left: 270px; transform: rotateY(180deg); } .mouton4{position: absolute; top: 230px; left: 470px; } .mouton5{position: absolute; top: 200px; left: 650px; transform: rotateY(180deg); } .mouton_ajout{position: absolute; top: -100px; left: 450px; animation: mouton_ajout 2s 1 linear; animation-fill-mode: forwards; } @keyframes mouton_ajout { 0% {transform: translate3d( 0px, 0px, 0px) ; } 100% {transform: translate3d( 0px, 300px, 0px) }} .Nratelier{position: absolute; display:block; top: 200px; left: -10px; height: 111px; width: 120px; background-image: url(https://valperdor.fr/jeux/enclos/ratelier0.png); background-size: 111px 120px; background-repeat: no-repeat; animation: Nratelier 3s 1 linear; animation-fill-mode: forwards; } @keyframes Nratelier { 0% { background-image: url(https://valperdor.fr/jeux/enclos/ratelier0.png); } 100% { background-image: url(https://valperdor.fr/jeux/enclos/ratelier.png); } } .nourrir1{position: absolute; top: -50px; left: 22px; height: 50px; animation: nourrir 1s 1 linear; animation-fill-mode: forwards; } .nourrir2{position: absolute; top: -50px; left: 22px; height: 50px; animation: nourrir 1s 1 linear; animation-delay: 0.8s; animation-fill-mode: forwards; } .nourrir3{position: absolute; top: -50px; left: 22px; height: 50px; animation: nourrir 1s 1 linear; animation-delay: 1.6s; animation-fill-mode: forwards; } .nourrir4{position: absolute; top: -50px; left: 22px; height: 50px; animation: nourrir 1s 1 linear; animation-delay: 2.4s; animation-fill-mode: forwards; } .nourrir5{position: absolute; top: -50px; left: 22px; height: 50px; animation: nourrir 1s 1 linear; animation-delay: 3.2s; animation-fill-mode: forwards; } @keyframes nourrir { 0% {transform: translate3d( 0px, 0px, 0px) ; } 95% {transform: translate3d( 0px, 300px, 0px); opacity: 1; } 100% {transform: translate3d( 0px, 300px, 0px); opacity: 0;} } .Babreuvoir{position: absolute; top: 300px; left: 730px; height: 71px; width: 71px; background-image: url(https://valperdor.fr/jeux/enclos/abreuvoir0.png); background-size: 71px 50px; background-repeat: no-repeat; animation: Babreuvoir 3s 1 linear; animation-fill-mode: forwards; } @keyframes Babreuvoir { 0% { background-image: url(https://valperdor.fr/jeux/enclos/abreuvoir0.png); } 100% { background-image: url(https://valperdor.fr/jeux/enclos/abreuvoir.png); } } .seau{position: absolute; top: 240px; left: 690px; } .seau2{position: absolute; top: 136px; left: 660px; } .b_droit{position: absolute; bottom: 0px; right: 0px; } /*######################################################################################################################################################## ##################################################################### Puit des Souhait ################################################################### #########################################################################################################################################################*/ .puit{position: absolute; top: 0px; left: 200px; } .puiteau{position: absolute; top: 0px; left: 200px; } .puitvoeu{position: absolute; top: 0px; left: 200px; animation: puitvoeu 0.3s infinite linear; } @keyframes puitvoeu { 0% { transform: skewY(2deg); } 25% { transform: skewY(-2deg); } 50% { transform: skewY(2deg); } 75% { transform: skewY(-2deg); } 100% { transform: skewY(2deg); }} .puitvoeu2{position: absolute; top: 0px; left: 200px; animation: puitvoeu 0.3s infinite linear; } /*######################################################################################################################################################## ########################################################################## Bateau ######################################################################## #########################################################################################################################################################*/ .B_ligne1{position: absolute; top: 30px; left: 20px; height: 150px; width: 1300px; } .B_ligne2{position: absolute; top: 170px; left: 20px; height: 150px; width: 1300px; } .B_post4{position: absolute; top: 0px; left: 20px; height: 130px; width: 130px; } .B_post3{position: absolute; top: 0px; left: 167.5px; height: 130px; width: 130px; } .B_post1{position: absolute; top: 0px; left: 315px; height: 130px; width: 130px; } .B_post2{position: absolute; top: 0px; left: 462.5px; height: 130px; width: 130px; } .B_post5{position: absolute; top: 0px; left: 610px; height: 130px; width: 130px; } .B_txt{position: absolute; top: 10px; left: 10px; height: 30px; width: 30px; cursor: pointer; font-weight: bolder; transform: rotate(-5deg);} /* 147.5 */ .B_de{position: absolute; top: 100px; left: 15px; height: 30px; width: 130px; cursor: pointer; font-weight: bolder; text-align: left; transform: rotate(-5deg);} /* 147.5 */ .B_xp{position: absolute; top: 10px; right: 20px; height: 30px; width: 130px; cursor: pointer; font-weight: bolder; text-align: right; transform: rotate(-5deg);} /* 147.5 */ .B_img{position: absolute; top: 0px; left: 0px; height: 130px; width: 130px; cursor: pointer;} /* 147.5 */ .B_img:hover{animation: shaking 0.5s 2 linear; transform-origin: top ; } @keyframes shaking { 0% {transform: rotate(0deg);} 20% {transform: rotate(-4deg);} 50% {transform: rotate(0deg);} 70% {transform: rotate(4deg);} 100% {transform: rotate(0deg);} } .menu_bateau{ overflow: hidden; position: absolute; text-align: left; background-color: #1F2021; padding: 0px; font-size: 18px; height: 370px; left: 5px; top: 5px; width: 740px; border-radius: 0px 20px 0px 20px; z-index: 2} .bateau_bulle{ position:absolute; left: 280px; top: 10px; width: 370px; height: 75px; background-color:#fff; border:solid 2px #000; border-radius:12px; margin:.5em; padding:.5em 1em; text-align: left; color: blue; opacity: 0; font-size: 15px; animation: b_bulle 3s 1 linear; animation-fill-mode: forwards; } .bateau_bulle:before { border:solid 12px transparent; border-right:solid 29px #000; border-left:solid 0px #000; bottom:17px; content:""; height:0; left:-29px; position:absolute; width:0; } .bateau_bulle:after { border:solid 10px transparent; border-right:solid 25px #fff; border-left:solid 0px #fff; bottom:19px; content:""; height:0; left:-24px; position:absolute; width:0; } .bateau_globe{position: absolute; top: 163px; left: 565px; z-index: 2; } .bateau_globe1{position: absolute; top: 161px; left: 557px; z-index: 3; opacity: 0; color: transparent; background-color: transparent; border-color: transparent; transition: opacity .2s; } .bateau_globe1:hover{ opacity: 1; cursor: pointer;} .bateau_vide{position: absolute; top: 170px; left: 595px; z-index: 2; height: 100px; width: 100px; color: transparent; background-color: transparent; border-color: transparent; border-radius: 50%;} .produit-bateau { color: white; background-color: #3A3C3E; position: absolute; height: 330px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; padding: -2px; transition: top 2s, transform 2s; } .chargement{ position: absolute; top: 0px; left: 0px; } .porteur1{position: absolute; top: 220px; left: 740px; opacity: 1; animation: porteur 5s infinite linear; } .porteur3{position: absolute; top: 220px; left: 740px; opacity: 1; animation: porteur 5s infinite linear; animation-delay: 2.4s;} @keyframes porteur { 0% {transform: translate3d( 0px, 0px, 0px) rotateY(180deg) ; opacity: 1; } 80% {transform: translate3d( -500px, -100px, 0px) rotateY(180deg); opacity: 1; } 85% {transform: translate3d( -540px, -90px, 0px) rotateY(180deg); opacity: 1; } 95% {transform: translate3d( -600px, -65px, 0px) rotateY(180deg); opacity: 0; } 100% {transform: translate3d( 0px, 0px, 0px) rotateY(180deg); opacity: 0;} } .porteur2{position: absolute; top: 195px; left: 750px; opacity: 1; animation: porteur2 5s infinite linear; animation-delay: 1.2s; } .porteur4{position: absolute; top: 195px; left: 750px; opacity: 1; animation: porteur2 5s infinite linear; animation-delay: 3.6s; } @keyframes porteur2 { 0% {transform: translate3d( 0px, 0px, 0px) ; opacity: 1; } 80% {transform: translate3d( -500px, -100px, 0px) ; opacity: 1; } 85% {transform: translate3d( -540px, -90px, 0px) ; opacity: 1; } 95% {transform: translate3d( -600px, -65px, 0px) ; opacity: 0; } 100% {transform: translate3d( 0px, 0px, 0px) ; opacity: 0;} } /* --------------------------------------------------------- Divers -------------------------------------------------------------- */ .millieu { position: absolute; width: 800px; height: 400px; top: 5px; left: 50%; transform: translateX(-50%); overflow: hidden; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #381c02; border: 0px none #ffffff; border-radius: 50px; } ::-webkit-scrollbar-thumb:hover { background: #B87333; } ::-webkit-scrollbar-thumb:active { background: #73471e; } ::-webkit-scrollbar-track { background: #592d04; border: 0px solid #ffffff; border-radius: 50px; } ::-webkit-scrollbar-track:hover { background: #994b03; } ::-webkit-scrollbar-track:active { background: #B87333; } ::-webkit-scrollbar-corner { background: transparent; } .v_noir{ position: relative; height: 100%; width: 100%; color: white; z-index: 11; } .cloud { position: absolute; top: 0; left: 0; background-image: url(https://valperdor.fr/jeux/nuage1.png);background-repeat: no-repeat; width: 150px; height: 150px; z-index: 99; animation: cloud 20s 0s infinite ; } @keyframes cloud { 50% { transform: translateY(15px) translateX(15px) ; } } .trait_gris{height: 6px; background: #3A3C3E; border: 0; margin-bottom: 5px; margin-top: 5px;} .ligne{ position: relative; height: 6px; display:block;} .marge { margin-bottom:4px; } .fond_option{background-color: #92C653 ; position: relative; background-image: url(https://valperdor.fr/jeux/maison/fond_option.png); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} /* ######################################################################################################################################################################################### */ /* ###################################################################################### Confrerie ####################################################################################### */ /* ######################################################################################################################################################################################### */ .confrerie{background: linear-gradient( #3f87a6,#f69d3c); position: relative; background-image: url(https://valperdor.fr/jeux/confrerie.png); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} .conf_cadre{ position: relative; width: 100%;} .conf_g{ position: absolute; top: -5px; left: 10px; width: 325px; height: 160px; border: 8px double #B87333; border-radius: 0px 15px 0px 15px;} .conf_d{ position: absolute; top: -5px; right: 10px; width: 325px; height: 160px; border: 8px double #B87333; border-radius: 0px 15px 0px 15px;} .conf_b{ position: absolute; top: 185px; width: 100%; height: 30px; } .conf_img{ width: 50px; } .conf_img1{ width: 130px; } .conf_line{position: relative ; width: 100%; top: 10px } .conf_line2{position: relative ; width: 100%; top: 75px;} .img_con1{position: absolute; top: 0px; width: 50px; left: -5px; } .img_con2{position: absolute; top: 0px; width: 50px; left: 50px; } .img_con3{position: absolute; top: 0px; width: 50px; left: 105px; } .img_con4{position: absolute; top: 0px; width: 50px; left: 160px; } .img_con5{position: absolute; top: 0px; width: 50px; left: 215px; } .img_con6{position: absolute; top: 0px; width: 50px; left: 270px; } .conf_select{position: absolute; bottom: 2px; right: 2px;} .cadre_mid{position: relative; width: 850px; } .conf_bshoot{position: absolute; top: 125px; left: 1325px; } .imgconf{position: relative; left: 2px; height: 60px; width: 150px; top: 0px; } .img1conf{position: absolute; left: 4px; height: 50px; width: 50px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .img2conf{position: absolute; left: 62px; height: 50px; width: 50px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .img3conf{position: absolute; left: 120px; height: 50px; width: 50px; top: 0px; border: 2px solid #3A3C3E; border-radius: 10px 10px 10px 10px; } .img_conf{ position: relative; top: 5px; left: 0px; height: 40px; width: 40px; z-index: 2; cursor : pointer; } .v_conf_shoot{position: absolute; width: 100%; max-width: 350px; height: 100%; background: url("https://valperdor.fr/jeux/fondconf.png"); background-repeat: repeat; color: white; overflow-y: auto; overflow-x: hidden;} .conf_nom_cadre{position: relative; height:15px; text-align: center; width: 100%;} .conf_nom{position: absolute; top: 0px; left: 40px; margin: 0 auto;} .conf_up{position: absolute; width: 15px; top: 0px; left: 5px;} .conf_sup{position: absolute; width: 15px; top: 0px; right: 10px;} .conf_down{position: absolute; width: 15px; top: 0px; right: 30px; rotate: 180deg;} .menu_barre_conf{ overflow-y: auto; position: absolute; text-align: left; background-color: #1F2021; padding: 15px; font-size: 18px; height: 160px; left: 5px; top: 5px; width: 710px; border-radius: 0px 20px 0px 20px; z-index: 2;} .menu_bas_conf { color: white; background-color: #3A3C3E; position: absolute; height: 200px; width: 750px; top: 790px; left: 225px; border: 8px double #B87333; border-radius: 0px 25px 0px 25px; z-index: 5; transition: top 1.5s ease-in-out; /* Animation fluide */ } .menu_bas_conf.default-visible { top: 540px; } .conf_popup { position: absolute; top: 790px; left: 225px; width: 750px; } .conf_visible { top: 540px; } .conf_descente { top: 790px !important; transition: top 1.5s ease-in-out; } /* ######################################################################################################################################################################################### */ /* #################################################################################### Top Confrerie ###################################################################################### */ /* ######################################################################################################################################################################################### */ .top_conf{background: linear-gradient( #3f87a6,#f69d3c); position: relative; background-image: url(https://valperdor.fr/jeux/confrerie/top_conf.png); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} @media screen and (max-width:1000px){ .menu_barreB1, .menu_barre_B1, .menu_barre_B2 { font-size: 10px !important; } } /* ######################################################################################################################################################################################### */ /* ##################################################################################### Carte Trésor ###################################################################################### */ /* ######################################################################################################################################################################################### */ .tresor_user{ border-width: 8px 8px 8px 8px; border-style: double; border-color: #B87333; border-radius: 0px 25px 0px 25px; background: url(https://valperdor.fr/themes/onthemix/images/fond_ban.png); background-repeat: repeat; height: 1100px; width: 250px; padding: 10px; left: 10px; } .tresor_chat{ border-width: 8px 8px 8px 8px; border-style: double; border-color: #B87333; border-radius: 0px 25px 0px 25px; background: url(https://valperdor.fr/themes/onthemix/images/fond_ban.png); background-repeat: repeat; height: 1120px; width: 350px; padding-right: 10px; overflow-x: hidden } .tresor_bshoot{ position: absolute; top: 32px; left: 1325px; } .tresor_fond{ position: relative; display:block; border-width: 8px 8px 8px 8px; border-style: double; border-color: #B87333; border-radius: 0px 25px 0px 25px; background: url(https://valperdor.fr/themes/onthemix/images/fond_ban.png); background-repeat: repeat; width: 1000px; height: 600px; overflow: hidden; } /* ######################################################################################################################################################################################### */ /* ######################################################################################## Corderie ####################################################################################### */ /* ######################################################################################################################################################################################### */ .cordier{ position: absolute; display:block; left: 350px; top: 150px;} /* ######################################################################################################################################################################################### */ /* ######################################################################################## Centrale ####################################################################################### */ /* ######################################################################################################################################################################################### */ .hangar { position: absolute; top: 0px; left: 208px; pointer-events: none; } .centrale{background-color: #92C653 ; position: relative; background-image: url('https://valperdor.fr/jeux/mur1.png'); background-repeat: repeat; display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} .phare{background-color: #92C653 ; position: relative; background-image: url('https://valperdor.fr/jeux/phare.png'); display:block; width: 1200px; height: 750px; text-align: center; overflow: hidden;} /* ######################################################################################################################################################################################### */ /* ######################################################################################## Auberge ######################################################################################## */ /* ######################################################################################################################################################################################### */ .secret_button { position: absolute; top: 90px; left: 20px; width: 20px; height: 250px; background: transparent; border: none; cursor: default; z-index: 20; opacity: 0; outline: none; user-select: none;} .secret_button:hover,.secret_button:focus { background: transparent; } /* ######################################################################################################################################################################################### */ /* ######################################################################################## Druide ######################################################################################## */ /* ######################################################################################################################################################################################### */ .imgD{position: relative; left: 20px; height: 100px; width: 150px; top: 0px; font-size: 12px; display: flex; justify-content: center; align-items: center;} .imgD1 { position: absolute; height: 100px; width: 70px; border: 2px solid #3A3C3E; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .druide-barre-fond { width: 100%; background-color: #000; /* Fond noir par défaut */ border-radius: 10px; height: 25px; overflow: hidden; border: 2px solid #3A3C3E; position: relative; } .druide-barre-remplissage { height: 100%; transition: width 0.5s ease, background-color 0.5s ease; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: bold; } .onglet { display:inline-block; padding:3px; border:1px solid black; cursor:pointer; } .inactive { color : blue; font:bold 14px 'Metamorphous' ; background-image:linear-gradient(#B87333, #F5DEB3); padding:3px; border-bottom:1px solid black; border-top-left-radius: 10px; border-top-right-radius: 0px; } .active { font:bold 14px 'Metamorphous' ; background-image:linear-gradient(#F5DEB3, #B87333); padding:3px; border-bottom:0px solid black; border-top-left-radius: 0px; border-top-right-radius: 10px; padding-bottom:4px; }