body
{
	background-color: #b3a178;
}

.sectionLeft
{
	float : left;
	width : 75%;
	
}
	
.sectionRight 
{
	float : right;
	width : 25%;
}

.pied
{
	
}
	
.scoreContainer 
{
	background-color: #9c603f;
	width : 30%;
	padding : 10px;
	border-radius: 10px;
	font-family: Berlin sans FB;
	font-size: 30px;
}
.urgence
{
	float : center;
	position : absolute;
	top : 100px;
	left : 50px;
	height : 150px;
	width : 150px;
}
.urgence:hover
{
	transform : scale(1.1);
}

#clicker
{
	background-image: url("./images/saucisson.jpg");
	background-size: contain;
	position : relative;
	transition: all .1s ease-in-out;
	height: 500px;
	width: 435px;
  	cursor : pointer;
}

#clicker:hover
{
	transform : scale(1.02);
}

#clicker:active
{
	transform : scale(0.99);
}

#clicker > .number {
	z-index: 99;
	font-size: 60px;
	color: #381309;
	position: absolute;
}

.shop 
{
	background-color : #9c603f;
	transition: all .2s ease-in-out;
	border-radius: 10px;
    border: 2px groove grey;
	width : 100%;
	margin : 10px 0px 10px 0px;
	font-family: Berlin sans FB;
}

.shop_non
{
	background-color : grey;
	transition: all .2s ease-in-out;
	border-radius: 10px;
    border: 2px groove grey;
	width : 100%;
	margin : 10px 0px 10px 0px;
	font-family: Berlin sans FB;
}
.shop_non #image 
{
	width : 25%;
}
	
.shop_non img 
{
	height : 64px;
	width : 64px;
}

.shop_non #nameandcost p {
	margin : 0px;
	width : 60%;
}
	
.shop_non #nameandcost p:first-of-type {
	font-size : 24px;
}

.shop_non #amount {
	font-size : 48px;
	color: #595959;
	width : 15%;
}
	
.shop:hover 
{
	background-color : #c7c7c7;
	transition: all .2s ease-in-out;
}
	
.shop #image 
{
	width : 25%;
}
	
.shop img 
{
	height : 64px;
	width : 64px;
}
	
.shop #nameandcost p {
	margin : 0px;
	width : 60%;
}
	
.shop #nameandcost p:first-of-type {
	font-size : 24px;
}
	
.shop #amount {
	font-size : 48px;
	color: #595959;
	width : 15%;
}
	
.unselectable {
	-webkit-user-select: none;
	-moze-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#upgradeContainer
{
	background-color : #9c603f;
	width : 95%;
	padding : 10px;
	border-radius: 10px;
	font-family: Berlin sans FB;
	font-size: 30px;
}

#upgradeContainer img {
	border:2px solid #000;
	border-radius: 5px;
	margin : 7px 0px 7px 0px;
	padding : 7px;
	height : 64px;
	width : 84px;
}

.amelio, .construct
{
	font-family: Berlin sans FB;
	font-size: 30px;
}

#phrase
{
	background: #B79A9A;
	width: 100%;
	top: 0;
	left: 0;
	text-align: center;
	position: absolute;
	font-size: 30px;
	font-family: Berlin sans FB;
	margin : 1px 0px 10px 0px;
	border-radius : 5px;
}
.nombreclics
{
	background: ##F090D9;
	width: 100%;
	font-size: 20px;
	font-family: Berlin sans FB;
	margin : 1px 0px 10px 0px;
	border-radius : 5px;
}

#achievementContainer img
{
	border:2px solid #000;
	border-radius: 5px;
	margin : 7px 0px 7px 0px;
	padding : 7px;
	height : 80px;
	width : 85px;
}

.succes
{
	font-family: Berlin sans FB;
	font-size: 30px;
}
.infobulle {
  position: relative;  /* les .infobulle deviennent référents */
  cursor: pointer;
  }

/* on génère un élément :after lors du survol et du focus :*/

.infobulle:hover::after,
.infobulle:focus::after {
  display:block;
  height: 120px;
  width: 400px;
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: 1%;
  left: 1%;
  transform: translateX(-120%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  padding: 5px 14px;
  background: #C9C5C5;
  color: black;
  border-radius: 4px;
  font-size: 1.5rem;
  border:3px ridge black;
  font-family: Arial;
}
.infobulle2 {
  position: relative;  /* les .infobulle deviennent référents */
  cursor: pointer;
  }

/* on génère un élément :after lors du survol et du focus :*/

.infobulle2:hover::after,
.infobulle2:focus::after {
  display:block;
  height: 100px;
  width: 400px;
  position: absolute;
  top : -50px;
  left: 200px;
  content: attr(aria-label);  /* on affiche aria-label */
  transform: translateX(-120%); /* on centre horizontalement  */
  z-index: 999; /* pour s'afficher au dessus des éléments en position relative */
  padding: 5px 14px;
  background: grey;
  color: black;
  border-radius: 4px;
  font-size: 1.5rem;
  border:3px ridge black;
  font-family: Arial;
}