/* html & body */
html,
body {
	height:100vh;
	margin:0;
	overflow:hidden;
	font-family:'Open Sans', sans-serif;
	box-sizing:content-box;
	font-weight:400;
	color:#333;
	font-size:14px;
	/* Permalink - use to edit and share this gradient:https://colorzilla.com/gradient-editor/#ffffff+0,ccd2df+54,9292a9+100 */
	background:rgb(255,255,255); /* Old browsers */
	background:-moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(204,210,223,1) 54%, rgba(146,146,169,1) 100%); /* FF3.6-15 */
	background:-webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(204,210,223,1) 54%,rgba(146,146,169,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background:radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(204,210,223,1) 54%,rgba(146,146,169,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9292a9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	user-select:none;
}

	/* Polices */
	.text-extrabold {
		font-weight:800;
	}
	.text-bold {
		font-weight:700;
	}
	.text-semibold {
		font-weight:600;
	}
	.text-regular {
		font-weight:400;
	}
	.text-light {
		font-weight:300;
	}
	h1, h2, h3, h4, h5 {
		color:#000;
	}

	/* Logo */
	#logo-conteneur {
		position:fixed;
		z-index:2;
		width:300px;
		height:80px;
		left:calc(50vw - 150px);
		top:20px;
		transform:translateY(-100px);
	}
	#logo-conteneur-accueil {
		width:300px;
		height:80px;
		margin:0 auto 20px auto;
	}
	#logo-conteneur.visible {
		transform:translateY(0);
		transition:transform .5s;
	}
		#logo-conteneur img,
		#logo-conteneur-accueil img {
			width:100%;
		}

	/* Parties */
	#parties {
		position:absolute;
		width:100vw;
		left:50vw;
		top:50vh;
		transform:translateX(-50%) translateY(-50%);
		text-align:center;
	}
		#parties .partie {
			color:#000;
			text-decoration:none;
		}

	/* Préchargement */
	#prechargement {
		display:none;
		position:absolute;
		z-index:5;
		width:100vw;
		left:50vw;
		top:50vh;
		transform:translateX(-50%) translateY(-50%);
		text-align:center;
	}
		#prechargement #texte-prechargement {
			margin:0 0 10px 0;
		}
		#prechargement #barre-progression-conteneur {
			position:relative;
			width:150px;
			height:10px;
			margin:0 auto;
			background:#fff;
			border:1px solid rgba(0,0,0,.15);
			border-radius:5px;
		}
			#prechargement #barre-progression-conteneur #barre-progression {
				position:absolute;
				background:#71AED1;
				height:100%;
				border-radius:5px;
				transition:width 250ms;
			}

	/* Fenêtre modale */
	#fenetre-modale {
		position:absolute;
		z-index:4;
		width:90vw;
		left:5vw;
		height:75vh;
		border-radius:10px;
		overflow:hidden;
		background:#fff;
		box-shadow:0 0px 20px 0px rgba(0, 0, 0, 0.45);
		transform:translateY(100vh);
		opacity:0;
	}
	#fenetre-modale.chargee {
		transition:transform .5s, opacity .5s ease-out;
	}
	#fenetre-modale.visible {
		opacity:1;
		transform:translateY(12.5vh);
		transition:transform .5s, opacity .5s ease-in;
	}
		#fenetre-modale .corps {
			height:100%;
		}
			#fenetre-modale .corps .en-tete {
				height:24px;
				padding:15px;
				/* Permalink - use to edit and share this gradient:https://colorzilla.com/gradient-editor/#575b70+0,2c2b38+100 */
				background:rgb(87,91,112); /* Old browsers */
				background:-moz-linear-gradient(left,  rgba(87,91,112,1) 0%, rgba(44,43,56,1) 100%); /* FF3.6-15 */
				background:-webkit-linear-gradient(left,  rgba(87,91,112,1) 0%,rgba(44,43,56,1) 100%); /* Chrome10-25,Safari5.1-6 */
				background:linear-gradient(to right,  rgba(87,91,112,1) 0%,rgba(44,43,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#575b70', endColorstr='#2c2b38',GradientType=1 ); /* IE6-9 */
			}
				#fenetre-modale .corps .en-tete .titre {
					color:#fff;
					margin:0;
				}
					#fenetre-modale .corps .en-tete .titre i {
						margin-right:12px;
						color:#b1b4c5;
					}
				#fenetre-modale .corps .en-tete .fermer {
					position:absolute;
					top:14px;
					right:15px;
					color:#ff6c6c;
					cursor:pointer;
				}
				#fenetre-modale .corps .en-tete .fermer:hover {
					color:#fff;
				}
			#fenetre-modale .corps .contenu {
				padding:20px;
				height:calc(100% - 93px);
				overflow:auto;
			}
				#fenetre-modale .corps .contenu a:not(.bouton) {
					font-weight:800;
					color:#ff6c6c;
					text-decoration:none;
				}
				#fenetre-modale .corps .contenu a:not(.bouton):hover {
					color:#000;
				}
				#fenetre-modale .corps .contenu h2:first-of-type {
					margin:0 0 5px 0;
				}
				#fenetre-modale .corps .contenu p + h2,
				#fenetre-modale .corps .contenu ul + h2,
				#fenetre-modale .corps .contenu div + h2 {
					margin:35px 0 5px 0 !important;
				}
				#fenetre-modale .corps .contenu ul,
				#fenetre-modale .corps .contenu p {
					margin:0 0 10px 0;
				}
				#fenetre-modale .corps .contenu #colonne-equipes {
					position:fixed;
					float:left;
					width:46px;
				}
					#fenetre-modale .corps .contenu #colonne-equipes .equipe {
						width:40px;
						height:40px;
						border:3px solid #fff;
						border-radius:15%;
						padding:0;
						margin-bottom:2px;
						overflow:hidden;
						cursor:pointer;
						opacity:.25;
					}
					#fenetre-modale .corps .contenu #colonne-equipes .equipe:hover,
					#fenetre-modale .corps .contenu #colonne-equipes .equipe.reset,
					#fenetre-modale .corps .contenu #colonne-equipes .equipe.actif {
						opacity:1;
					}
						#fenetre-modale .corps .contenu #colonne-equipes .equipe .avatar-equipe {
							width:100%;
							height:100%;
						}
				#fenetre-modale .corps .contenu #colonnes-cartes {
					width:calc(100% - 60px);
					background-color:#fff;
					background-image:url("../images/texte-selection-equipe.png");
					background-position:center center;
					background-repeat:no-repeat;
					background-size:60%;
					height:100%;
					float:right;
				}
				#fenetre-modale .corps .contenu #colonnes-cartes.visible::before {
					content:" ";
					position:absolute;
					background:#fff;
					display:block;
					width:100%;
					height:100%;
				}
					#fenetre-modale .corps .contenu #colonnes-cartes .colonne-cartes {
						display:none;
						position:relative;
						float:left;
						width:calc(33.333333334% - 12px);
						margin:0 6px;
						background:#e7ebf3;
						height:100%;
						overflow:hidden;
						padding:10px;
						border-radius:8px;
						box-sizing:border-box;
					}
					#fenetre-modale .corps .contenu #colonnes-cartes.visible .colonne-cartes {
						display:block;
					}
						#fenetre-modale .corps .contenu #colonnes-cartes .colonne-cartes h3 {
							margin:0;
							height:35px;
						}
							#fenetre-modale .corps .contenu #colonnes-cartes .colonne-cartes .bloc {
								height:calc(100% - 35px);
								border-radius:8px;
								border:1px solid #fff;
								box-sizing:border-box;
								overflow-y:scroll;
							}
							#fenetre-modale .corps .contenu #colonnes-cartes .colonne-cartes .bloc.bloc-drop {
								background-image:url("../images/icone-drag-and-drop.png");
								background-position:center center;
								background-repeat:no-repeat;
								background-size:60%;
							}
								.carte {
									position:relative;
									display:inline-block;
									background:#fff;
									margin:4px;
									width:calc(33.33333334% - 8px);
									border-radius:7px;
									overflow:hidden;
									cursor:grab;
								}
								#fenetre-modale .corps .contenu #colonnes-cartes .colonne-cartes .bloc#cartes_en_main .carte.invisible {
									background:#000;
								}
									#fenetre-modale .corps .contenu #colonnes-cartes .colonne-cartes .bloc#cartes_en_main .carte.invisible img {
										opacity:.65;
									}
									.carte img {
										display:block;
										width:100%;
										height:100%;
									}
									.carte .bouton-invisible {
										display:none;
										position:absolute;
										top:.65em;
										left:.65em;
										text-align:center;
										width:30px;
										height:30px;
										background:#fff;
										cursor:pointer;
										border-radius:50%;
										z-index:1;
									}
									.carte .bouton-invisible:hover {
										background:#000;
									}
									#fenetre-modale .corps .contenu #colonnes-cartes .colonne-cartes .bloc#cartes_en_main .carte .bouton-invisible {
										display:block;
									}
										.carte .bouton-invisible i {
											margin-top:8px;
										}
										.carte .bouton-invisible:hover i {
											color:#fff;
										}
						#fenetre-modale .corps .contenu #colonnes-cartes #onglets-cartes {
							position:absolute;
							top:8px;
							right:10px;
						}
							#fenetre-modale .corps .contenu #colonnes-cartes #onglets-cartes .onglet {
								display:inline-block;
								width:24px;
								height:24px;
								border:2px solid #fff;
								border-radius:50%;
								cursor:pointer;
							}
							#fenetre-modale .corps .contenu #colonnes-cartes #onglets-cartes .onglet[rel=risque] {
								background:#e51816;
							}
							#fenetre-modale .corps .contenu #colonnes-cartes #onglets-cartes .onglet[rel=prevention] {
								background:#84c070;
							}
							#fenetre-modale .corps .contenu #colonnes-cartes #onglets-cartes .onglet[rel=diagnostic] {
								background:#12ace0;
							}
							#fenetre-modale .corps .contenu #colonnes-cartes #onglets-cartes .onglet:hover {
								border-color:#000;
							}

	/* Boutons */
	.bouton {
		display:inline-block;
		text-decoration:none;
		border:2px solid #878a95;
		background:rgba(255,255,255,.85);
		color:inherit;
		border-radius:20px;
		margin:3px;
		padding:0 14px;
		height:40px;
		line-height:36px;
		text-align:center;
		cursor:pointer;
		box-sizing:border-box;
		pointer-events:auto;
	}
	.bouton:not(.actif):hover {
		border:2px solid #000;
		background:rgba(255,255,255,1);
		color:#000;
	}
	.bouton.actif {
		border:2px solid #878a95 !important;
		background:#000 !important;
		color:#fff !important;
	}
	.bouton.rouge {
		border:2px solid #ffa5a5;
		background:#ff6c6c;
		color:#fff;
	}
	.bouton.rouge:hover {
		border:2px solid #FFD7D7;
		background:#F03636;
		color:#fff;
	}
	.bouton.orange {
		border:2px solid #f5d9a1;
		background:#ffb13c;
		color:#fff;
	}
	.bouton.orange:hover {
		border:2px solid #FFEECD;
		background:#ed940f;
		color:#fff;
	}
	.bouton.bleu {
		border:2px solid #b1d1e4;
		background:#71AED1;
		color:#fff;
	}
	.bouton.bleu:hover {
		border:2px solid #CDECFF;
		background:#3B94C7;
		color:#fff;
	}
		.bouton i {
			margin-right:5px;
		}
	#boutons {
		position:fixed;
		bottom:0;
		width:100vw;
		padding:20px 10px;
		box-sizing:border-box;
		text-align:center;
		z-index:2;
		/* Permalink - use to edit and share this gradient:https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
		background:-moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
		background:-webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
		background:linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
		transform:translateY(100%);
		pointer-events:none;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		align-items:center;
	}
	#boutons.visible {
		transform:translateY(0);
		transition:transform .5s;
	}
		#boutons .flex {
			flex:1;
		}
		#boutons .flex.gauche {
			text-align:left;
		}
		#boutons .flex.centre {
			text-align:center;
		}
		#boutons .flex.droite {
			text-align:right;
		}

	/* Tooltip des pions */
	#tooltip {
		position:absolute;
		z-index:3;
		display:none;
		width:540px;
		height:330px;
		background:rgba(255,255,255,1);
		border:2px solid rgba(255,255,255,1);
		border-radius:6px;
		padding:12px;
		box-sizing:border-box;
		box-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.2);
		pointer-events:none;
	}
	#tooltip.anime {
		transition:top .075s;
	}
	#tooltip.defaite {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f03636+0,991313+100 */
		background: rgb(240,54,54); /* Old browsers */
		background: -moz-radial-gradient(center, ellipse cover,  rgba(240,54,54,1) 0%, rgba(153,19,19,1) 100%); /* FF3.6-15 */
		background: -webkit-radial-gradient(center, ellipse cover,  rgba(240,54,54,1) 0%,rgba(153,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: radial-gradient(ellipse at center,  rgba(240,54,54,1) 0%,rgba(153,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f03636', endColorstr='#991313',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		border:2px solid rgba(153,19,19,1);
	}
	#tooltip.victoire {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3b94c7+0,1c537c+100 */
		background: rgb(59,148,199); /* Old browsers */
		background: -moz-radial-gradient(center, ellipse cover,  rgba(59,148,199,1) 0%, rgba(28,83,124,1) 100%); /* FF3.6-15 */
		background: -webkit-radial-gradient(center, ellipse cover,  rgba(59,148,199,1) 0%,rgba(28,83,124,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: radial-gradient(ellipse at center,  rgba(59,148,199,1) 0%,rgba(28,83,124,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b94c7', endColorstr='#1c537c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		border:2px solid rgba(28,83,124,1);
	}
		#tooltip.defaite *,
		#tooltip.victoire * {
			color:#fff !important;
		}
		#tooltip #infos_equipe {
			display:-ms-inline-flexbox;
			display:inline-flex;
		}
			#tooltip #avatar_equipe {
				-ms-flex-item-align:center;
				align-self:center;
				-ms-flex-negative:0;
				flex-shrink:0;
				width:60px;
				height:60px;
				border-radius:10%;
				border:3px solid #fff;
			}
			#tooltip.defaite  #avatar_equipe,
			#tooltip.victoire  #avatar_equipe {
				border:3px solid #fff !important;
			}
			#tooltip #textes_equipe {
				-ms-flex-item-align:center;
				align-self:center;
				padding-left:15px;
			}
				#tooltip #textes_equipe #nom_equipe {
					margin:0;
					line-height:1;
				}
				#tooltip #textes_equipe #donnees {
					padding-top:5px;
				}
					#tooltip #textes_equipe #donnees label {
						float:left;
					}
					#tooltip #textes_equipe #donnees label:last-child {
						margin-left:30px;
					}
						#tooltip #textes_equipe #donnees label input {
							border-radius:3px;
							padding:2px 5px;
							border:1px solid #000;
							background:#000;
							color:#fff;
							text-align:right;
							-webkit-appearance:none;
							-moz-appearance:none;
							-ms-appearance:none;
							appearance:none;
							pointer-events:visible;
						}
						#tooltip #textes_equipe #donnees label input[type=text]::-ms-clear {
							display:none;
						}
						#tooltip #textes_equipe #donnees label input:focus {
							outline: none !important;
							box-shadow:0px 0px 10px #000;
						}
						:-webkit-autofill,
						:-webkit-autofill,
						:-webkit-autofill:hover,
						:-webkit-autofill:focus,
						:-webkit-autofill:active {
							transition:none;
							-webkit-box-shadow:0 0 0px 1000px #000 inset !important;
							box-shadow:0 0 0px 1000px #000 inset !important;
						}
			#tooltip #cartes_equipe {
				text-align:left;
			}
				#tooltip #cartes_equipe #visibles,
				#tooltip #cartes_equipe #jouees {
					height:102px;
					margin-top:8px;
					padding:3px 3px 3px 85px;
					border-radius:6px;
					background:#dadde7;
					background-repeat:no-repeat;
					background-position:10px center;
					background-size:contain;
				}
				#tooltip #cartes_equipe #visibles {
					background-image:url("../images/cartes-visibles.png");
				}
				#tooltip #cartes_equipe #jouees {
					background-image:url("../images/cartes-jouees.png");
				}
					#tooltip #cartes_equipe img {
						width:64px;
						margin:3px;
					}
			#tooltip .messages_fin {
				text-align:center !important;
				display:none;
			}
				#tooltip .messages_fin .fas {
					margin:15px 0 0 0;
				}
				#tooltip .messages_fin .titre {
					margin:10px 0 0 0;
				}
				#tooltip .messages_fin .texte {
					margin:0;
				}

	/* Plateau */
	#plateau {
		position:absolute;
		z-index:1;
		left:0;
		width:100vw;
		height:100vh;
		opacity:0;
		visibility:hidden;
		transform:scale(1.25);
	}
	#plateau.visible {
		opacity:1;
		visibility:visible;
		transform:scale(1);
		transition:opacity .75s, transform .75s;
	}
		#plateau canvas {
			width:100vw;
			height:100vh;
			cursor:grab;
			cursor:-webkit-grab;
			cursor:-moz-grab;
		}
		#plateau canvas:active{
			cursor:grabbing;
			cursor:-webkit-grabbing;
			cursor:-moz-grabbing;
		}

	/* Infos jeu */
	#infos-jeu {
		position:fixed;
		bottom:0;
		width:100vw;
		font-size:85%;
		color:#000;
		box-sizing:border-box;
		text-align:center;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		align-items:center;
	}
		#infos-jeu .flex {
			flex:1;
			padding:10px;
		}
		#infos-jeu .flex.gauche {
			text-align:left;
		}
		#infos-jeu .flex.centre {
			text-align:center;
		}
		#infos-jeu .flex.droite {
			text-align:right;
		}
		#infos-jeu a {
			display:inline-block;
			text-decoration:none;
			color:#fff;
			background:#525667;
			margin:2px 0;
			padding:2px 8px 4px 8px;
			border-radius:12px;
			white-space:nowrap;
		}
		#infos-jeu a:hover {
			background:#000;
		}