body {
	margin: 0 auto;
}

@font-face {
	font-family: OrangeKid;
	src: url("../orangekid.ttf") format("truetype"),
	url("../orangekid.woff") format("woff");
}

img {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
}

:root {
	--couleur-nature: rgb(224,208,200);
	--couleur-menthe: rgb(224,240,248);
	--couleur-fraise: rgb(248,200,224);
	--couleur-banane: rgb(248,248,176);
	--couleur-cacahuete: rgb(248,216,184);
	--couleur-raisin: rgb(224,208,240);
	--couleur-melon: rgb(216,240,216);
}

@keyframes clignotement {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}

@keyframes anim_plume {
	0% {
		margin-top: -8px;
		margin-left: -8px;
	}
	50% {
		margin-top: 0px;
		margin-left: 0px;
	}
	100% {
		margin-top: -8px;
		margin-left: -8px;
	}
}

@keyframes anim_fleche_haut {
	0% {
		bottom: 8px
	}
	50% {
		bottom: 0px
	}
	100% {
		bottom: 8px
	}

}

@keyframes anim_fleche_bas {
	0% {
		top: 8px
	}
	50% {
		top: 0px
	}
	100% {
		top: 8px
	}

}

@keyframes anim_fleche_retourne {
	0% {
		margin-right: -4px
	}
	50% {
		margin-right: 4px
	}
	100% {
		margin-right: -4px
	}

}

@keyframes bouton_entree {
	0% {
		background-color: rgb(168,16,64);
	}
	70% {
		background-color: rgb(248,16,112);
	}
	100% {
		background-color: rgb(168,16,64);
	}
}

.cadre {
	background: rgb(224,208,200);
	background: var(--couleur-perso);
	font-smooth: never;
	font-smoothing: none;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: grayscale;
	font-family: OrangeKid;
	margin: 4px;
}

.bordure_simple {
	-ms-box-shadow:
		0		-4px	0	-2px	var(--couleur-perso),
		0		4px		0	-2px	var(--couleur-perso),
		
		0px		0		0	4px		white,
		-0px	-4px	0	2px		white,
		-0px	4px		0	2px		white,
		
		-2px	0		0	4px	black,
		2px		0		0	4px	black,
		0px		-2px	0	4px	black,
		0px		2px		0	4px	black,
		0px		6px		0	2px	black,
		0px		-6px	0	2px	black;
	box-shadow:
		0		-4px	0	-2px	var(--couleur-perso),
		0		4px		0	-2px	var(--couleur-perso),
		
		0px		0		0	4px	white,
		-0px	-4px	0	2px	white,
		-0px	4px		0	2px	white,
		
		-2px	0		0	4px	black,
		2px		0		0	4px	black,
		0px		-2px	0	4px	black,
		0px		2px		0	4px	black,
		0px		6px		0	2px	black,
		0px		-6px	0	2px	black;
}

.bordure_double {
	-ms-box-shadow:
		0	-4px	0	-2px	var(--couleur-perso),
		0	4px		0	-2px	var(--couleur-perso),
		
		-2px	0		0	2px	white,
		2px		0		0	2px	white,
		-0px	-6px	0	0px	white,
		-0px	6px		0	0px	white,
		0px 	-2px	0	2px	white,
		0px		2px		0	2px	white,
		
		-4px	0		0	2px	black,
		4px		0		0	2px	black,
		0px		0		0	4px	black,
		0px		-4px	0	2px	black,
		0px		4px		0	2px	black,
		0px		8px		0	0px	black,
		0px		-8px	0	0px	black;
	box-shadow:
		0		-4px	0	-2px	var(--couleur-perso),
		0		4px		0	-2px	var(--couleur-perso),
		
		-2px	0		0	2px	white,
		2px		0		0	2px	white,
		-0px	-6px	0	0px	white,
		-0px	6px		0	0px	white,
		0px 	-2px	0	2px	white,
		0px		2px		0	2px	white,
		
		-4px	0		0	2px	black,
		4px		0		0	2px	black,
		0px		0		0	4px	black,
		0px		-4px	0	2px	black,
		0px		4px		0	2px	black,
		0px		8px		0	0px	black,
		0px		-8px	0	0px	black;
}


.cadre ul {
	margin: 0px;
	padding-left: 0px;
}

.cadre li {
	font-size: 27px;
	white-space: nowrap;
	list-style-type: none;
	font-smooth: never;
	font-smoothing: none;
	-webkit-font-smoothing:none;
	-moz-osx-font-smoothing: grayscale;
	padding-left: 6px;
	/*padding-top: 18px;
	margin-top: -18px;*/
	margin-bottom: 1px;
	overflow: visible;
}

.cadre li:last-child {
	margin-bottom: 0px;
}

.cadre li a {
	color: black;
	display: inline-block;
	width: 100%;
	text-decoration: none;
	margin-left: 20px;
	cursor: pointer;
}

#bestiaire {
	visibility: hidden;
}

#bestiaire.complet {
	visibility: visible;
	background-color: black;
	overflow: visible;
	width: 480px;
	height: 320px;
	position: relative;
}

#bestiaire.reduit {
	visibility: visible;
	display: inline-block;
	padding-top: 4px;
	padding-left: 2px;
	width: 254px;
	height: 272px;
}

#conteneur_ogv {
	display: none;
}

#surcouche_options {
	z-index: 20;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#bestiaire.reduit #surcouche_options {
	display: none;
}

#cadre_options {
	margin: auto;
	position: relative;
	padding-top: 5px;
}

#liste_options {
	width: 210px;
	padding-bottom: 8px;
	padding-right: 50px;
}
#liste_options.liste_couleurs {
	width: 140px;
}

#div_en-tete {
	height: 38px;
	padding: 0px;
	padding-top: 6px;
	padding-bottom: 6px;
}
#bestiaire.reduit #div_en-tete {
	display: none;
}

#cadre_bouton_options {
	width: fit-content;
	height: 20px;
	float: left;
	margin-left: 8px;
	position: relative;
	cursor: pointer;
}

#bouton_options, #bouton_entree {
	vertical-align: top;
}
#bouton_entree {
	height: 12px;
	margin-left: 2px;
	top: 0px;
	padding: 2px 4px 6px 4px;
	animation-name: bouton_entree;
	animation-duration: 1.5s;
	animation-timing-function: steps(1,start);
	animation-iteration-count: infinite;
	box-shadow:		
		2px		0		0	0		rgb(32,32,32),
		-2px	0		0	0		rgb(32,32,32),
		0px		-2px	0	0		rgb(32,32,32),
		0px		2px		0	0		rgb(32,32,32);
	-ms-box-shadow:		
		2px		0		0	0		rgb(32,32,32),
		-2px	0		0	0		rgb(32,32,32),
		0px		-2px	0	0		rgb(32,32,32),
		0px		2px		0	0		rgb(32,32,32);

}
#bouton_options {
	height: 10px;
	top: 0;
	padding: 4px;
}

#div_joueur {
	max-width: 144px;
	height: 32px;
	position: relative;
	display: inline-block;
	margin-left: 12px;
	white-space: nowrap;
}
#div_temps {
	height: 10px;
	margin-left: 2px;
}
#div_temps img {
	height: 10px;
	vertical-align: top;
}
#valeur_temps {
	white-space: nowrap;
}
.clignote {
	animation: clignotement 1s steps(1, start) infinite;
}
#etoiles {
	transform: scale(2);
	transform-origin: top left;
}

#bestiaire.reduit #div_joueur {
	display: none;
}

#cadre_titre {
	width: 160px;
	position: relative;
	float: right;
	text-align: center;
	margin-right: 8px;
}

.texte_defaut {
	margin-top: -7px;
	margin-bottom: -3px;
	font-size: 27px;
}

#cadre_liste {
	float: left;
	width: 205px;
	height: 256px;
	overflow: visible;
	display: inline-block;
	margin-left: 8px;
	margin-right: 13px;
	position: relative;
}
#bestiaire.reduit #cadre_liste {
	display: none;
}

#fleche_haut, #fleche_bas, #fleche_retourne {
	position: absolute;
	display: block;
}

#fleche_haut img, #fleche_bas img, #fleche_retourne img {
	cursor: pointer;
	position: absolute;
	transform: scale(2);
}

#fleche_haut, #fleche_bas {
	right: 16px;
	width: 14px;
	height: 14px;
}

#fleche_haut {
	top: -9px;
}
#fleche_bas {
	bottom: -9px;
	overflow: hidden;
}
#fleche_retourne {
	right: 28px;
	top: 8px;
	z-index: 5;
	animation-name: anim_fleche_retourne;
	animation-duration: 1s;
	animation-timing-function: steps(4,start);
	animation-iteration-count: infinite;
}

#fleche_haut img {
	transform-origin: bottom left;
	animation-name: anim_fleche_haut;
	animation-duration: 1s;
	animation-timing-function: steps(4,start);
	animation-iteration-count: infinite;
}
#fleche_bas img {
	transform-origin: top left;
	animation-name: anim_fleche_bas;
	animation-duration: 1s;
	animation-timing-function: steps(4,start);
	animation-iteration-count: infinite;
}
#fleche_retourne img {
	transform-origin: center right;
}

#liste_ennemis {
	overflow-x: hidden;
	overflow-y: scroll;
	height: 254px;
	margin-right: -4px;
	padding-right: 22px;
	margin-bottom: -10px;
}

@-moz-document url-prefix() {
    #liste_ennemis {
        margin-right: -30px;
    }
}

#liste_ennemis::-webkit-scrollbar {
	width: 4px;
}
#liste_ennemis::-webkit-scrollbar-thumb {
	background: black;
}
#liste_ennemis::-webkit-scrollbar * {
	background:transparent;
	left:10px;
}

#liste_ennemis a {
	overflow: hidden;
	margin-top: -4px;
	margin-bottom: -4px;
	cursor: pointer;
}
#liste_ennemis a.texte_long {
	letter-spacing: -0.3px;
}
#liste_ennemis li {
	height: 31px;
}
#liste_ennemis li:last-child {
	height: 30px;
	overflow: hidden;
}
.plume_selection {
	left: -8px;
	animation-name: anim_plume;
	animation-duration: 1s;
	animation-timing-function: steps(4,start);
	animation-iteration-count: infinite;
}

.plume_survol {
	left: -8px;
	margin-left: -8px;
	margin-top: -8px;
}

#cadre_ennemi {
	width: 242px;
	height: 256px;
	overflow: visible;
	display: inline-block;
	position: relative;
}

#div_illustration {
	text-align: center;
	height: 160px;
	position: relative;
	overflow: visible;
}
#lien_illustration {
	cursor: inherit;
}
#lien_illustration.clickable {
	cursor: pointer;
}
#illustration {
	transform: scale(2);
	overflow: visible;
	transform-origin: center;
	position: absolute;
	/*top: 0;*/
	bottom: 45%;
	left: -500px;
	right: -500px;
	margin: auto;
	margin-bottom: -20px;
}

#description {
	font-smooth: never;
	font-smoothing: none;
	-webkit-font-smoothing:none;
	-moz-osx-font-smoothing: grayscale;
	font-family: OrangeKid;
	font-size: 27px;
	white-space: nowrap;
	margin: 0;
	margin-left: 3px;
	position: absolute;
	top: 136px;
	padding-bottom: 2px;
	padding-top: 1px;
	line-height: 24px;
	width: 100%;
	height: 120px;
	overflow: hidden;
}

#cadre_bouton_tout {
	z-index: 5;
	width: fit-content;
	float: left;
	position: relative;
	cursor: pointer;
	display: none;
	margin: 2px 4px;
	animation-name: bouton_entree;
	animation-duration: 1.5s;
	animation-timing-function: steps(1,start);
	animation-iteration-count: infinite;
	box-shadow:		
		2px		0		0	0		rgb(32,32,32),
		-2px	0		0	0		rgb(32,32,32),
		0px		-2px	0	0		rgb(32,32,32),
		0px		2px		0	0		rgb(32,32,32);
	-ms-box-shadow:		
		2px		0		0	0		rgb(32,32,32),
		-2px	0		0	0		rgb(32,32,32),
		0px		-2px	0	0		rgb(32,32,32),
		0px		2px		0	0		rgb(32,32,32);
}
#bestiaire.reduit #cadre_bouton_tout {
	display: flex;
}
#lien_bouton_tout {
	display: flex;
}
#lien_bouton_tout img {
	height: 10px;
	margin: 2px 3px;
}