body {
	background: url("../img/fond.png") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin: 0;
	top:10px;
}
		



#slide-counter {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 998;
	font-size: 18px;
	color: #595959;
}


.slide-navigation {
	position: absolute;
	bottom: 0px;
	right: 0px;
	transform: translateY(0%);
	z-index: 999;
}	

.slide-navigation-left {
	position: absolute;
	bottom: 0px;
	left: 0px;
	transform: translateY(0%);
	z-index: 999;
}	

.slide-navigation button {
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 44px;
	padding: 8px 16px;
	border: none;
	cursor: pointer;
}

.slide-navigation button:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.slide-navigation-left button {
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 44px;
	padding: 8px 16px;
	border: none;
	cursor: pointer;
}

.slide-navigation-left button:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.correct {
	background-color: #c8f7c5;
	border: 5px solid #c8f7c5;
}

.progress-bar {
	width: 100%;
	height: 10px;
	background-color: #f0f0f0;
}

.progress-bar-fill {
	height: 100%;
	background-color: #4caf50;
}

.start-container {
	top:50px;
	margin-top:50px;
	padding:35px;
	width: auto;
	max-width: 80%;
	margin: 0 auto 0 auto;
	background-color: #fff;
	border-radius: 30px;
	text-align: center;
}

ul {
	list-style: none;
	line-height: 200%;
	list-style-type:none;
 }



.slide-container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 9999;
}

.quiz-container {
	top:50px;
	padding:35px;
	width: 65%;
	min-height:75%;
	margin: 0 auto 0 auto;
	background-color: #fff;
	border-radius: 30px;
	text-align: center;
}

.question-container {
	display: none;
	top:50px;
	padding:35px;
	width: 65%;
	margin: 0 auto 0 auto;
	background-color: #fff;
	border-radius: 30px;
	text-align: center;
	font-size: 1.5rem;
}

.question-container ul {
	top:50px;
	text-align: left;
	border: 1px solid #fff;
	margin: 0 auto 0 auto;
}

.question-container img {
	margin: 0 auto;
	width: 50%;
	height: auto;
}



.slide-image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
}

.quiz-navigation {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
}

.quiz-navigation button {
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 24px;
	padding: 8px 16px;
	border: none;
	cursor: pointer;
}

.quiz-navigation button:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

#prev-button {
	left: 20px;
}

#next-button {
	right: 20px;
}

.eac-sugg {
  background-color: rgba(128,128,128,0.175);
  color: rgba(128,128,128,0.85);
  
}

#signature-container {
  display: flex;
  flex-direction: column;
  width: fit-content;
  position: static;/*
  min-width: 440px;
  max-width: 80%;*/
  margin: 0 auto 0 auto;


}

#signature-container label.text {
  font-size: 1.5rem;
  text-align: left;
  color: #818CF8;
  font-weight: 700;
  position: relative;
  top: 0.5rem;
  margin: 0 0 0 7px;
  padding: 0 3px;
  background: #fff;
  width: fit-content;
}

#signature-canvas {
	display: flex;
	flex-direction: column;
	width: fit-content; 
	position: static;
	font-size: 1.5rem;
	border: 2px #818CF8 solid;
	border-radius: 5px;
	background: #fff;
	width: 100%;
	/*height: auto;
	max-width: 80%;
	dth: 80%;
	max-width: 80%;*/
	margin: 0 auto 0 auto;
}

.signature-canvas {
	
  width: 440px;
  height: 320px;
  /*max-width: 80%; */
	
}


.coolinput {
  display: flex;
  flex-direction: column;
  width: fit-content;
  position: static;
  min-width: 440px;
  max-width: 80%;
  margin: 0 auto 0 auto;
}

.coolinput label.text {
  font-size: 1.5rem;
  color: #818CF8;
  font-weight: 700;
  position: relative;
  top: 0.5rem;
  margin: 0 0 0 7px;
  padding: 0 3px;
  background: #fff;
  width: fit-content;
}

.coolinput label.email {
  font-size: 1.5rem;
  color: #818CF8;
  font-weight: 700;
  position: relative;
  top: 0.5rem;
  margin: 0 0 0 7px;
  padding: 0 3px;
  background: #fff;
  width: fit-content;
}

.coolinput input[type=text].input {
  padding: 11px 10px;
  font-size: 1.5rem;
  border: 2px #818CF8 solid;
  border-radius: 5px;
  background: #fff;
}

.coolinput input[type=text].input:focus {
  outline: none;
}

.coolinput input[type=email].input {
  padding: 11px 10px;
  font-size: 1.5rem;
  border: 2px #818CF8 solid;
  border-radius: 5px;
  background: #fff;
}

.coolinput input[type=email].input:focus {
  outline: none;
}

.coolselect {
  display: flex;
  flex-direction: column;
  width: fit-content;
  position: static;
  min-width: 440px;
  max-width: 80%;
  margin: 0 auto 0 auto;
}


.coolselect label.text {
  font-size: 1.5rem;
  color: #818CF8;
  font-weight: 700;
  position: relative;
  top: 0.5rem;
  margin: 0 0 0 7px;
  padding: 0 3px;
  background: #fff;
  width: fit-content;
}

.coolselect select {
  padding: 11px 10px;
  font-size: 1.5rem;
  border: 2px #818CF8 solid;
  border-radius: 5px;
  background: #fff;
}

.coolselect select:focus {
  outline: none;
}

.fullscreen {
 position: fixed;
 top: 10px;
 right: 10px;
}

#fullscreen-button {
  background: none;
  border: none;
  cursor: pointer;
}

#col {
  display: flex;
  width: 80%;
  max-width: 440px;
  margin: 0 auto 0 auto;
  text-justify: auto;
  
}
#col1 {
	flex: 0 0 85%;
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
}
#col2 {
	flex: 1;
}


/* Basic styling */

[type=checkbox] {
  width: 3rem;
  height: 3rem;
  color: dodgerblue;
  vertical-align: middle;
  -webkit-appearance: none;
  background: none;
  border: 0;
  outline: 0;
  flex-grow: 0;
  border-radius: 50%;
  background-color: #FFFFFF;
  transition: background 300ms;
  cursor: pointer;
}


/* Pseudo element for check styling */

[type=checkbox]::before {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #CCD3D8;
}


/* Checked */

[type=checkbox]:checked {
  background-color: currentcolor;
}

[type=checkbox]:checked::before {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}


/* Disabled */

[type=checkbox]:disabled {
  background-color: #CCD3D8;
  opacity: 0.84;
  cursor: not-allowed;
}


/* IE */

[type=checkbox]::-ms-check {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #CCD3D8;
}

[type=checkbox]:checked::-ms-check {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}


		
/* Exemple : Réorganisez les éléments en utilisant Flexbox pour les écrans étroits 
@media screen and (max-width: 600px) {
	body {
		overflow: auto;
	}

	.start-container {
		width: 100%;
		min-width: auto;
		max-width: auto;
		padding: 15px;
	}
	
	
	
	
	
	.quiz-container,
	.question-container {
		width: 100%;
		min-width: auto;
		max-width: auto;
		padding: 15px;
	}

	.start-container,
	.quiz-container,
	.question-container,
	#signature-container,
	#signature-canvas {
		margin: 0;
	}
	
	.coolinput,
	.coolselect {
		min-width: auto;
		max-width: auto;
	}

	.fullscreen {
		top: 10px;
		right: 10px;
	}

	.quiz-navigation,
	.question-container .quiz-navigation {
		position: relative;
		top: 0;
		transform: none;
	}

	.slide-navigation,
	.slide-container .slide-navigation {
		position: relative;
		top: 0;
		transform: none;
	}

	/* Styles spécifiques pour les écrans étroits... */
}