@charset "utf-8";
body {
	margin: 0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
#page {
	display: flex;
	min-height: 100vh;
	width: 100%;
}
main {
	background-image: url("/images/games/wazabi/fond-metal-repeat.jpg");
	background-size: 270px;
	background-position: 50%;
	flex-grow: 1;
	position: relative;
	z-index: 1;
	overflow-x: hidden;
	overflow-y: auto;
	box-shadow: inset 0px 0px 300px 40px black;
	min-height: 100vh;
}
#auteur {
	text-align: center;
	font-size: 1.3em;
}

@media (max-width: 700px){
	.page {
		background-size: 150px;
	}
}

/* ---------------------------- */
/* Header						*/
/* ---------------------------- */
#menu_princ {
	background-color: #2A2E34;
	box-shadow: -10px 0px 50px 0px black;
	position: relative;
	width: 10%;
	min-width: 140px;
	z-index: 8;
	-webkit-transition: 0.2s all;
	-o-transition: 0.2s all;
	transition: 0.2s all;
	color: white;
}
#menu_princ ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#menu_princ li {
	display: flex;
}
#menu_princ a {
	padding: 10px 0;
	flex-grow: 1;
	color: #E8E8E8;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.5em;
	cursor: pointer;
	text-align: center;
}
#menu_princ a:hover {
	background-color: #1E2126;
}
#choix_langue {
	position: absolute;
	right: -130px;
	width: 130px;
	top: 192px;
	background-color: #32373E;
	display: none;
	z-index: 1;
}
#choix_langue div {
	display: flex;
}
.drapeau_carre_langue, .drapeau_cube_langue {
	display: none;
}
#btn_menu {
	position: fixed;
	top: 0px;
	left: 0px;
	padding: 0.20cm 0.25cm;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: 0.2s all;
	-o-transition: 0.2s all;
	transition: 0.2s all;
	font-size: 1.2cm;
	color: #eee;
	background-color: #2A2E34;
	display: none;
}
#btn_menu:hover {
	background-color: #1E2126;
}
#logo_gigamic {
	position: absolute;
	bottom: 0;
	max-width: 100%;
}
@media (max-width: 700px){
	#menu_princ {
		position: fixed;
		top: 0px;
		width: 140px;
		left: -140px;
	}
	#logo_gigamic { display: none; }
	#btn_menu { display: block; }
}

/* ---------------------------- */
/* Accueil						*/
/* ---------------------------- */
.elmt_parallax_home {
	width: 100%;
	height: 100%;
	position: relative;
}
#logo_wazabi {
	position: absolute;
	width: 1000px;
	max-width: 150%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#spiral_wazabi {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -40%);
	width: 1000px;
	max-width: 150%;
	min-width: 105%;
}
#des_couv {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(0, 150%);
	width: 200px;
	max-width: 30%;
}
#perso_couv_3 {
	position: absolute;
	left: 40%;
	width: 300px;
	max-width: 40%;
	top: 50%;
	transform: translate(0, -180%);
}
#perso_couv_2 {
	position: absolute;
	width: 200px;
	max-width: 30%;
	top: 50%;
	left: 10%;
	transform: translateY(40%);
}
#perso_couv_1 {
	position: absolute;
	width: 350px;
	max-width: 50%;
	right: 5%;
	top: 50%;
	transform: translateY(30%);
}
#carte_couv_2 {
	position: absolute;
	width: 50px;
	max-width: 6%;
	top: 50%;
	right: 50%;
	transform: translate(700%, -380%);
}
#carte_couv_1 {
	position: absolute;
	width: 100px;
	top: 50%;
	left: 50%;
	max-width: 13%;
	transform: translate(-450%, -160%);
}
@media (max-width: 1100px){
	#perso_couv_1, #carte_couv_1 { display: none; }
}
@media (min-width: 1300px){
	#logo_wazabi { min-width: 100%; }
	#des_couv { min-width: 21%; }
	#perso_couv_3 { min-width: 28%; }
	#perso_couv_2 { min-width: 17%; }
	#perso_couv_1 { min-width: 33%; }
	#carte_couv_2 { min-width: 4%; }
	#carte_couv_1 { min-width: 9%; }
}

/* ---------------------------- */
/* Règles						*/
/* ---------------------------- */
#bd {
	background-color: rgba(255,255,255,0.6);
	width: 90%;
	padding: 1px 5%
}
.title_section {
	background-color: darkolivegreen;
	color: white;
}
/* -- Distribution -- */
.carte {
	width: 70px;
	border: 2px solid gray;
	border-radius: 7px;
	transform: rotateX( 50deg ) translate( -50%, 0%);
	position: absolute;
	top: 50%;
	left: 50%;
}
.tas_carte {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	width: 73px;
	height: 140px;
	padding: 0 3px;
}
.carte-distribue {
	left: 150px;
	transform: rotate(-90deg);
}
#carte_pioche_19, #carte_distrib_19 { top: 19px; }
#carte_pioche_18, #carte_distrib_18 { top: 18px; }
#carte_pioche_17, #carte_distrib_17 { top: 17px; }
#carte_pioche_16, #carte_distrib_16 { top: 16px; }
#carte_pioche_15, #carte_distrib_15 { top: 15px; }
#carte_pioche_14, #carte_distrib_14 { top: 14px; }
#carte_pioche_13, #carte_distrib_13 { top: 13px; }
#carte_pioche_12, #carte_distrib_12 { top: 12px; } /* top: -60px; left: calc(150px + 3vw); transform: rotateZ(-90deg); */
#carte_pioche_11, #carte_distrib_11 { top: 11px; } /* top: calc(-140px - 3vw); left: -60px; transform: rotateZ(180deg); */
#carte_pioche_10, #carte_distrib_10 { top: 10px; } /* top: 60px; left: calc(-155px - 4vw); transform: rotateZ(90deg); */
#carte_pioche_9, #carte_distrib_9 { top: 9px; } /* top: calc(165px + 2vw); left: 60px; transform: rotate(0); */
#carte_pioche_8, #carte_distrib_8 { top: 8px; } /* top: 0px; left: calc(150px + 3vw); transform: rotateZ(-90deg); */
#carte_pioche_7, #carte_distrib_7 { top: 7px; } /* top: calc(-140px - 3vw); left: 0px; transform: rotateZ(180deg); */
#carte_pioche_6, #carte_distrib_6 { top: 6px; } /* top: 0px; left: calc(-155px - 4vw); transform: rotateZ(90deg); */
#carte_pioche_5, #carte_distrib_5 { top: 5px; } /* top: calc(165px + 2vw); left: 0px; transform: rotate(0); */
#carte_pioche_4, #carte_distrib_4 { top: 4px; } /* top: 60px; left: calc(150px + 3vw); transform: rotateZ(-90deg); */
#carte_distrib_3 { top: 3px; } /* top: calc(-140px - 3vw); left: 60px; transform: rotateZ(180deg); */
#carte_distrib_2 { top: 2px; } /* top: -60px; left: calc(-155px - 4vw); transform: rotateZ(90deg); */
#carte_distrib_1 { top: 1px; } /*top: calc(165px + 2vw); left: -60px; transform: rotate(0);*/
/* des : rotateX(90deg) rotateY(180deg) rotateZ(10deg);*/
/* carte : rotateX(0deg) rotateY(10deg) rotateZ(0deg); */
/* wazabi :  rotateX(-90deg) rotateY(0deg) rotateZ(10deg); */
.des_wazabi {
	position: absolute;
	perspective: 800px;
	perspective-origin: 50% 100px;
	/*top: -70px;*/
	height: calc(10px + 12%);
	width: calc(30px + 5%);
	top: 50%;
	left: 50%;
}
.cube {
	position: relative;
	width: 30px;
	transform-style: preserve-3d;
	transform: rotateX(-90deg) rotateY(0deg) rotateZ(10deg);
}
.cube div {
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: rgba(0,0,0,0.3);
	color: white;
	border-radius: 4px;
	overflow: hidden;
}
.right img, .left img, .top img {
	transform: rotateZ(90deg);
}
.back {
	transform: translateZ(0px) rotateY(180deg);
} 
.right {
	transform: rotateY(-270deg) translateX(0px);
	transform-origin: top right;
}
.left {
	transform: rotateY(270deg) translateX(0px);
	transform-origin: center left;
}
.top {
	transform: rotateX(90deg) translateY(0px);
	transform-origin: top center;
}
.bottom {
	transform: rotateX(90deg) translateY(30px);
	transform-origin: bottom center;
}
.front {
	transform: translateZ(30px);
}
.face_des {
	max-width: 100%;
	max-height: 100%;
}
/*
#des_distrib_1 { transform: translate(80%, 140%); }
#des_distrib_2 { transform: translate(-240%, -190%); }
#des_distrib_3 { transform: translate(80%, -270%); }
#des_distrib_4 { transform: translate(150%, -190%); }
#des_distrib_5 { transform: translate(-10%, 140%); }
#des_distrib_6 { transform: translate(-240%, -110%); }
#des_distrib_7 { transform: translate(-10%, -270%); }
#des_distrib_8 { transform: translate(150%, -110%); }
#des_distrib_9 { transform: translate(-100%, 140%); }
#des_distrib_10 { transform: translate(-240%, -30%); }
#des_distrib_11 { transform: translate(-100%, -270%); }
#des_distrib_12 { transform: translate(150%, -30%); }
#des_distrib_13 { transform: translate(-190%, 140%); }
#des_distrib_14 { transform: translate(-240%, 50%); }
#des_distrib_15 { transform: translate(-190%, -270%); }
#des_distrib_16 { transform: translate(150%, 50%); }
*/

/* -- Premier joueur -- */
#des_prem_joueur_1 { transform: translate(10%, 250%); }
#des_prem_joueur_2 { transform: translate(-300%, -120%); }
#des_prem_joueur_3 { transform: translate(60%, -300%); }
#des_prem_joueur_4 { transform: translate(210%, -120%); }
#des_prem_joueur_5 { transform: translate(-10%, 150%); }
#des_prem_joueur_6 { transform: translate(-200%, -110%); }
#des_prem_joueur_7 { transform: translate(0%, -200%); }
#des_prem_joueur_8 { transform: translate(130%, -110%); }
#des_prem_joueur_9 { transform: translate(-100%, 190%); }
#des_prem_joueur_10 { transform: translate(-310%, -30%); }
#des_prem_joueur_11 { transform: translate(-20%, -330%); }
#des_prem_joueur_12 { transform: translate(230%, -10%); }
#des_prem_joueur_13 { transform: translate(-80%, 280%); }
#des_prem_joueur_14 { transform: translate(-200%, 0%); }
#des_prem_joueur_15 { transform: translate(-90%, -240%); }
#des_prem_joueur_16 { transform: translate(150%, 10%); }
/*#des_prem_joueur_1 .cube { transform: rotateX(90deg) rotateY(180deg) rotateZ(10deg);}
#des_prem_joueur_2 .cube { transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);}
#des_prem_joueur_3 .cube { transform: rotateX(90deg) rotateY(180deg) rotateZ(10deg);}
#des_prem_joueur_4 .cube { transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);}
#des_prem_joueur_5 .cube { transform: rotateX(-90deg) rotateY(0deg) rotateZ(10deg);}
#des_prem_joueur_6 .cube { transform: rotateX(-90deg) rotateY(0deg) rotateZ(10deg);}
#des_prem_joueur_7 .cube { transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);}
#des_prem_joueur_8 .cube { transform: rotateX(-90deg) rotateY(0deg) rotateZ(10deg);}
#des_prem_joueur_9 .cube { transform: rotateX(-90deg) rotateY(0deg) rotateZ(10deg);}
#des_prem_joueur_10 .cube { transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);}
#des_prem_joueur_11 .cube { transform: rotateX(-90deg) rotateY(0deg) rotateZ(10deg);}
#des_prem_joueur_12 .cube { transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);}
#des_prem_joueur_13 .cube { transform: rotateX(-90deg) rotateY(0deg) rotateZ(10deg);}
#des_prem_joueur_14 .cube { transform: rotateX(90deg) rotateY(180deg) rotateZ(10deg);}
#des_prem_joueur_15 .cube { transform: rotateX(-90deg) rotateY(0deg) rotateZ(10deg);}
#des_prem_joueur_16 .cube { transform: rotateX(-90deg) rotateY(0deg) rotateZ(10deg);}*/
.nbr_des {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 3em;
	font-weight: bold;
	color: #556B2F;
	opacity: 0;
}
.des_grise div img { filter: contrast(30%); }

/* -- Lancer les dés -- */
#des_lancer_1 { transform: translate(-110%, -60%); }
#des_lancer_2 { transform: translate(110%, 10%); }
#des_lancer_3 { transform: translate(70%, -130%); }
#des_lancer_4 { transform: translate(-50%, 90%); }
/*#des_lancer_1 .cube, */#des_pioche_1 .cube, #des_donner_1 .cube { transform: rotateX(90deg) rotateY(180deg) rotateZ(10deg);}
/*#des_lancer_2 .cube, */#des_pioche_2 .cube, #des_donner_2 .cube { transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);}
/*#des_lancer_3 .cube, */#des_pioche_3 .cube, #des_donner_3 .cube { transform: rotateX(-90deg) rotateY(0deg) rotateZ(10deg);}
/*#des_lancer_4 .cube, */#des_pioche_4 .cube, #des_donner_4 .cube { transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);}

/* -- Piocher les cartes -- */
/*#carte_pioche_5 { top: calc(185px + 2vw); left: 60px; transform: rotate(0); }
#carte_pioche_4 { top: calc(185px + 2vw); left: 30px; transform: rotate(0); }*/
#carte_pioche_3 { top: calc(185px + 2vw); left: 0px; transform: rotate(0); }
#carte_pioche_2 { top: calc(185px + 2vw); left: -30px; transform: rotate(0); }
#carte_pioche_1 { top: calc(185px + 2vw); left: -60px; transform: rotate(0);}
#des_pioche_1 { transform: translate(100%, 40%); filter: grayscale(100%);}
#des_pioche_4 { transform: translate(-200%, 40%) ; }
#des_pioche_3 { transform: translate(-90%, 40%) ; }
#des_pioche_2 { transform: translate(0%, 40%) ; }

/* -- Donner un dé -- */
#des_donner_1 { transform: translate(140%, 250%); /*transform: translate(-250%, -270%);*/ }
#des_donner_2 { transform: translate(40%, 250%); }
#des_donner_3 { transform: translate(-40%, 240%); }
#des_donner_4 { transform: translate(-150%, 250%); }
#des_donner_5{ transform: translate(-240%, -190%); }
#des_donner_6{ transform: translate(-240%, -110%); }
#des_donner_7 { transform: translate(-240%, -30%); }
#des_donner_8 { transform: translate(-240%, 50%); }

/* -- Jouer une carte -- */
#carte_jouer_1 { transform: translate(-150%, 50%); }
#carte_jouer_5 { transform: translate(50%, 50%); /*transform: translate(-50%, -100%)*/;}
#carte_jouer_4 { transform: translate(0%, 50%); }
#carte_jouer_3 { transform: translate(-50%, 50%); }
#carte_jouer_2 { transform: translate(-100%, 50%);}


/* ---------------------------- */
/* Video						*/
/* ---------------------------- */
#video {
	text-align: center;
	margin-top: 10px;
	width: 100%!important;
	min-height: 31vw;
}
#video > * {
	max-width: 100%;
	border: 0;
	width: 55.1vw;
	height: 31vw;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
@media only screen and (max-width: 920px) {
	#video > *
	{
		width: 97vw;
		height: 54vw;
	}
	#video
	{
		min-height: 54vw;
	}
}

/* ---------------------------- */
/* Footer						*/
/* ---------------------------- */
footer 
{
	width: 100%;
	color: white;
	background-color: #2C2C2C;
	position: relative;
	z-index: 2
}
.conteneur_cols
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.titre_col_footer
{
	font-size: 1.1em;
}
footer a
{
	font-weight: bold;
	color: white;
    text-decoration: none;
}
footer a:hover
{
	color: #ddd;
} 
.mentionslegales {
	text-align: center;
	padding: 5px 0 5px 0;
	color: white;
}
.footer_col 
{
	margin: 5px 0 10px 0;
	min-width: 209px;
}
#footer_sites, #footer_reseaux, #footer_adresse
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
footer p, footer a {
	margin: 1px 0;
}
.reseaux_footer {
	width: 70px;
}
.reseaux_footer:hover {
	-webkit-box-shadow: 0px 0px 5px white;
	        box-shadow: 0px 0px 5px white;
}
#bouton_point_vente {
	color: white;
	background-color: #adb614;
	border: none;
	margin: 15px 0 0 0;
	padding: 15px 10px;
	font-size: 1.1em;
	cursor: pointer;
	display: block; 
}
#bouton_point_vente:hover {
	background-color: #909810;
}