html, body {
	margin: 0;
	padding: 0;
	background: #844738;            /* même teinte que le bois dans le sketch */
	height: 100%;
	overscroll-behavior: none;       /* évite le rebond qui expose le fond */
	font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


#canvasDiv {
	position: relative;
	width: 100%;
	height: 100vh;                  /* iOS-friendly: hauteur “small viewport” */
	overflow: hidden;
}

#title {
	font-size: 1.2em;
	color:white;
	text-align: center;
	font-weight: bold;
	margin : 0px 0px 15px 0px;
	/* pour enlever la sélection de texte agaçante : */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	cursor: pointer;
}

#chksDiv{
	display: flex;
	flex-direction: column;
	margin: 0px 0px 0px 0px;
}

/* pour enlever la sélection de texte agaçante : */
#chksDiv label {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}

#controlsAndTitle {
	/* display: flex; */
	flex-direction: column;
	position: absolute;
	/* top: 5%;
	left: 5%; */
	width: auto;
	height: auto;
	border-radius: 30px;
	border: 1px solid;
	border-color: rgb(black);
	background-color: #af8348;
	justify-content: space-evenly;
	padding: 25px;
	margin: 10px 0px 0px 10px;
	z-index: 5;
	/* box-shadow: 1px 1px 3px black; */
	box-shadow:inset 3px 3px 10px 0px black;
}

#slidersDiv{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0px 0px 8px 0px;
}


.sliderSetting{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	margin: 4px 0px 2px 0px;
}

.sliderValue {
	margin: 0px 0px 0px 10px;
	color: white;
	font-size: 0.8em;
	/* pour enlever la sélection de texte agaçante : */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	cursor: pointer;
}

.checkbox{
	display: flex;
	color: white;
	font-size: 0.8em;
	margin: 4px 0px 2px 0px;
}

.hidden {
	/* display: none; */
	visibility:hidden; 
	pointer-events:none;
}


/* **************************************************** */
/* HIDE CONTROLS BUTT ********************************* */
/* **************************************************** */

#hideButtContainer {
	display: flex;
	/* position: relative; */
	position: absolute;
	/* width:auto; */
	/* height:auto; */
	width: 100%;
	flex-direction: row;
	justify-content: flex-end;
	/* justify-content: center; */
	margin: 0px 0px 0px 0px;
	z-index: 100;
}

#hideControlsButtDiv {
	display: flex;
	position: relative;
	align-items: flex-start;
	margin: 0.5% 1% 0px 0px;
	/* top: 3%; */
	/* left: 5%; */
}

#hideControlsButt {
	position: relative;
	pointer-events: auto;
	touch-action: manipulation;
	z-index: 10000;
}


/* **************************************************** */
/* INFO BULLE ***************************************** */
/* **************************************************** */



.tooltiptext {
	display: inline-block;
	white-space: normal;
	max-width: 100px;
	word-wrap: break-word;
}

.tooltip {
	position: absolute;
	cursor: pointer; 
	pointer-events: none;
}

.tooltip .tooltiptext {
	visibility: hidden;
	position: relative;
	background-color: #faeed1;
	color: black;
	text-align: center;
	border-radius: 8px;
	padding: 5px 12px;
	z-index: 20;
	top:12px;
	left:7px;
	opacity: 0;
	transition: opacity 0.4s;
	font-size: 0.8em;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	pointer-events: none; 
}



.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

/* Sur appareils tactiles: pas de :hover fantôme */
@media (hover: none) and (pointer: coarse) {
	.tooltip .tooltiptext { 
		display: none !important;   /* masque le ballon en mobile */
	}
	.tooltip { cursor: default; } /* évite le double-tap nécessaire à cause de :hover */
}

/* Le bouton doit être toujours tappable */
#hideControlsButt, #showControlsButt {
	position: relative;
	pointer-events: auto;
	touch-action: manipulation;   /* iOS: pas de zoom/scroll parasite */
	/* -webkit-tap-highlight-color: transparent; */
	z-index: 10000;               /* au-dessus du canvas et du panel */
}


/* **************************************************** */
/* BUTTONS ***************************************** */
/* **************************************************** */

#buttonsDiv {
	display: flex;
	flex-direction: column;
	margin: 4px 0px 4px 0px;
}

.gvgButton{
	background: rgb(192, 192, 192);
	color: black;
	font-family: 'Arial', sans-serif;
	font-size: 12px;
	padding: 3px 15px 3px 15px;
	border-radius: 8px;
	border: 1px solid black;
	box-shadow: 1px 1px 3px black;
	transition: all 0.05s ease;
	margin: 2px 3px 3px 3px;
	cursor: pointer;
}

.gvgButton:active:hover {
	transform: translateY(1px);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}

.gvgButton:hover {
	transform: scale(.99);
	box-shadow: 1px 1px 3px black, 1px 1px 8px rgba(192, 188, 188, 0.3);

}

:disabled {
	opacity: 0.5;
	filter: saturate(.2) contrast(.9);
	cursor: not-allowed !important;
	pointer-events: none;           /* optionnel : rend inactif */
}

/* Au cas où le navigateur ne grise pas nativement les inputs disabled */
input[disabled] { opacity: .45; cursor: not-allowed; }


/* pour mettre en colonnes à partir d'une taille mini de la fenetre */
@media (max-width: 700px) { 
/* @media screen and (min-width: 30em) { */
/* @media screen and (-webkit-min-device-pixel-ratio: 1),
		and (min-device-width: 1000px), 
		and (max-device-width: 1600px) { */

/* iOS tap highlight off sur la zone du bouton */
#hideButtContainer,
#hideControlsButtDiv,
.tooltip,
#hideControlsButt {
  -webkit-tap-highlight-color: transparent;
}

#bu†tonsDiv {
	display: flex;
	flex-direction: row;
	margin: 4px 0px 14px 0px;
}

#controlsAndTitle {
	flex-direction: column;
	top: auto;
	left: auto;
}

/* #hideControlsButtDiv {
	position: absolute;
	top: 3%;
	left: 28%;
	z-index: 10;
	white-space: nowrap;
} */

#settingsCont {
	display: flex;
	flex-direction: column;
}


/* .tooltip .tooltiptext {
	top: 18px;
	left: 12 px;
} */

}

/* ********************************************************
******************************************************** */