body {
	background-color: #00FF74;
	color: #00C1FF;
}

#logodiv {
	background-color: rgba(0, 255, 116, 0.88);
}

#menujs {
	background-color: rgba(0, 255, 116, 0.88);
}

.aligndroite {
	text-align: right;
	display: block;
}

.aligngauche {
	text-align: left;
	display: block;
}

.aligncentre {
	text-align: center;
	display: block;
}

@media (min-width: 1300px) {
			#photop, #photop2 {
				width: 34%;
			}

			#photoimg {
				margin-right: 2%;
				width: 720px;
			}
}

@media (min-width: 1160px) and (max-width: 1299px) {
			#photop, #photop2 {
				width: 30%;
			}
}

@media (min-width: 1160px) {
	h1 {
		margin-left: 68px;
		margin-right: 48px;
		margin-bottom: 10px;
	}

	p {
		line-height: 26px;
		margin-left: 68px;
		margin-right: 48px;
	}

	.cutopt {
	}

		#photo {
			position: relative;
			margin-right: 0px;
			height: 588px;
			text-align: right;
		}

			#photoh1 {
				padding-top: 18px;
				text-align: left;
			}

			#photop {
				text-align: left;
			}

			#photop2 {
				padding-top: 36px;
				text-align: left;
			}

			#photoimgdiv {
				position: absolute;
				top: 178px;
				right: 38px;
				width: 60%;
				max-width: 720px;
				height: auto;
				z-index: 0;
			}

				#slack {
					width: 100%;
					height: auto;
				}

				.photoimg {
					width: 100%;
				}

				#prec {
					position: absolute;
					top: 69%;
					left: 4%;
					height: 22%;
					width: auto;
				}

				#suiv {
					position: absolute;
					top: 69%;
					right: 4%;
					height: 22%;
					width: auto;
				}

		#champs {
			position: relative;
			margin-left: 48px;
			background-image: url(images/regle.jpg);
			background-size: 30%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#champsh1 {
				text-align: right;
				padding-top: 10%;
				margin-left: 0;
				margin-right: 88px;
				padding-left: 0;
			}

			#rghelp {
				width: 30%;
			}

		#minusculep {
			display: block;
			margin-top: -28px;
			margin-left: 36%;
			width: 60%;
		}


		#immersif {
			margin: 4px 0px 0px 0px;
			width: 100%;
			background-image: url(images/Charleville.jpg);
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#immersifimg {
				width: 100%;
				height: auto;
			}
}

@media (min-width: 960px) and (max-width: 1159px) {
		h1 {
		margin-left: 48px;
		margin-right: 68px;
		margin-bottom: 10px;
	}

	p {
		line-height: 26px;
		margin-left: 48px;
		margin-right: 48px;
	}

	.cutopt {
	}

		#photo {
			position: relative;
			margin-right: 0px;
			height: 588px;
			text-align: right;
		}

			#photoh1 {
				padding-top: 18px;
				text-align: left;
			}

			#photop {
				text-align: left;
				width: 30%;
			}

			#photop2 {
				padding-top: 36px;
				text-align: left;
				width: 30%;
			}

			#photoimgdiv {
				position: absolute;
				top: 178px;
				right: 38px;
				width: 60%;
				height: auto;
				z-index: 0;
			}

				#slack {
					width: 100%;
					height: auto;
				}

				.photoimg {
					width: 100%;
				}

				#prec {
					position: absolute;
					top: 69%;
					left: 4%;
					height: 22%;
					width: auto;
				}

				#suiv {
					position: absolute;
					top: 69%;
					right: 4%;
					height: 22%;
					width: auto;
				}

		#champs {
			position: relative;
			margin-left: 48px;
			background-image: url(images/regle.jpg);
			background-size: 30%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#champsh1 {
				text-align: right;
				padding-top: 7%;
				margin-left: 0;
				padding-left: 0;
			}

			#rghelp {
				width: 30%;
			}

		#minusculep {
			display: block;
			margin-top: -28px;
			margin-left: 36%;
			width: 60%;
		}


		#immersif {
			margin: 4px 0px 0px 0px;
			width: 100%;
			background-image: url(images/Charleville.jpg);
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#immersifimg {
				width: 100%;
				height: auto;
			}
}

@media (min-width: 768px) and (max-width: 959px) {
	h1 {
		margin-left: 24px;
		margin-right: 10%;
		margin-bottom: 10px;
	}

	p {
		line-height: 26px;
		margin-left: 24px;
		margin-right: 38px;
	}

		#photo {
			position: relative;
			margin-right: 0px;
			height: 448px;
			text-align: right;
		}

			#photoh1 {
				padding-top: 18px;
				text-align: left;
			}

			#photop {
				text-align: left;
				width: 30%;
			}

			#photop2 {
				padding-top: 36px;
				text-align: left;
				width: 30%;
			}

			#photoimgdiv {
				position: absolute;
				top: 136px;
				right: 24px;
				width: 60%;
				height: auto;
				z-index: 0;
			}

				#slack {
					width: 100%;
					height: auto;
				}

				.photoimg {
					width: 100%;
				}

				#prec {
					position: absolute;
					top: 69%;
					left: 4%;
					height: 22%;
					width: auto;
				}

				#suiv {
					position: absolute;
					top: 69%;
					right: 4%;
					height: 22%;
					width: auto;
				}

		#champs {
			position: relative;
			margin-left: 48px;
			background-image: url(images/regle.jpg);
			background-size: 30%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#champsh1 {
				text-align: right;
				padding-top: 10%;
				margin-left: 0;
				padding-left: 0;
			}
			#rghelp {
				width: 30%;
			}

		#minusculep {
			display: block;
			margin-top: -28px;
			margin-left: 36%;
			width: 60%;
		}


		#immersif {
			margin: 4px 0px 0px 0px;
			width: 100%;
			background-image: url(images/Charleville.jpg);
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#immersifimg {
				width: 100%;
				height: auto;
			}
}

@media (min-width: 841px) and (max-width: 959px) {
	.cutopt {
	}
}

@media (min-width: 768px) and (max-width: 840px) {
	.cutopt {
		display: block;
	}
}

@media (min-width: 480px) and (max-width: 767px) {
	h1 {
		margin-left: 21px;
		margin-right: 28px;
		margin-bottom: 10px;
	}

	p {
		line-height: 26px;
		margin-left: 21px;
		margin-right: 28px;
	}

	.cutopt {
		display: block;
	}

		#photo {
			position: relative;
			margin-right: 0px;
			height: auto;
			text-align: right;
		}

			#photoh1 {
				padding-top: 18px;
				text-align: left;
			}

			#photop {
				text-align: left;
				width: 30%;
				float: left;
				margin: 0px 0px 0px 21px;
			}

			#photop2 {
				text-align: right;
				width: 60%;
				margin: 0px 21px 0px 0px;
				float: right;
			}

			#photoimgdiv {
				clear: both;
				position: relative;
				top: 21px;
				width: 100%;
				height: auto;
				z-index: 0;
			}

				#slack {
					width: 100%;
					height: auto;
				}

				.photoimg {
					width: 100%;
				}

				#prec {
					position: absolute;
					top: 69%;
					left: 4%;
					height: 22%;
					width: auto;
				}

				#suiv {
					position: absolute;
					top: 69%;
					right: 4%;
					height: 22%;
					width: auto;
				}

		#champs {
			position: relative;
			top: 36px;
			margin-left: 21px;
			background-image: url(images/regle.jpg);
			background-size: 30%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#champsh1 {
				text-align: right;
				padding-top: 5%;
				margin-left: 0;
				padding-left: 0;
			}
			#rghelp {
				width: 30%;
			}

		#minusculep {
			display: block;
			margin-top: 14px;
			margin-left: 36%;
			width: 60%;
		}


		#immersif {
			margin: 4px 0px 0px 0px;
			width: 100%;
			background-image: url(images/Charleville.jpg);
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#immersifimg {
				width: 100%;
				height: auto;
			}
}

@media (min-width: 620px) and (max-width: 767px) {
		#champsh1 {
			font-size: 48px;
		}
}

@media (min-width: 400px) and (max-width: 479px) {
	h1 {
		margin-left: 21px;
		margin-right: 28px;
		margin-bottom: 10px;
	}

	p {
		line-height: 21px;
		margin-left: 21px;
		margin-right: 28px;
	}

	.cutopt {
		display: block;
	}

		#photo {
			position: relative;
			margin-right: 0px;
			height: auto;
			text-align: right;
		}

			#photoh1 {
				padding-top: 18px;
				text-align: left;
			}

			#photop {
				text-align: left;
				width: 30%;
				float: left;
				margin: 0px 0px 0px 21px;
			}

			#photop2 {
				text-align: right;
				width: 58%;
				margin: 0px 21px 0px 0px;
				float: right;
			}

			#photoimgdiv {
				clear: both;
				position: relative;
				top: 21px;
				width: 100%;
				height: auto;
				z-index: 0;
			}

				#slack {
					width: 100%;
					height: auto;
				}

				.photoimg {
					width: 100%;
				}

				#prec {
					position: absolute;
					bottom: 6%;
					left: 4%;
					height: 21%;
					width: auto;
				}

				#suiv {
					position: absolute;
					bottom: 6%;
					right: 4%;
					height: 21%;
					width: auto;
				}

		#champs {
			position: relative;
			top: 36px;
			margin-left: 21px;
			background-image: url(images/regle.jpg);
			background-size: 30%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#champsh1 {
				text-align: right;
				padding-top: 5%;
				margin-left: 0;
				padding-left: 0;
			}
			#rghelp {
				width: 30%;
			}

		#minusculep {
			display: block;
			margin-top: 14px;
			margin-left: 36%;
			width: 60%;
		}


		#immersif {
			margin: 4px 0px 0px 0px;
			width: 100%;
			background-image: url(images/Charleville.jpg);
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#immersifimg {
				width: 100%;
				height: auto;
			}
}

@media (max-width: 399px) {
	h1 {
		margin-left: 12px;
		margin-right: 16px;
		margin-bottom: 10px;
	}

	p {
		line-height: 21px;
		margin-left: 12px;
		margin-right: 16px;
	}

	.cutopt {
		display: block;
	}

		#photo {
			position: relative;
			margin-right: 0px;
			height: auto;
			text-align: right;
		}

			#photoh1 {
				padding-top: 18px;
				text-align: left;
			}

			#photop {
				text-align: left;
				width: 30%;
				float: left;
				margin: 0px 0px 0px 12px;
			}

			#photop2 {
				text-align: right;
				width: 58%;
				margin: 0px 12px 0px 0px;
				float: right;
			}

			#photoimgdiv {
				clear: both;
				position: relative;
				top: 21px;
				width: 100%;
				height: auto;
				z-index: 0;
			}

				#slack {
					width: 100%;
					height: auto;
				}

				.photoimg {
					width: 100%;
				}

				#prec {
					position: absolute;
					bottom: 6%;
					left: 4%;
					height: 18%;
					width: auto;
				}

				#suiv {
					position: absolute;
					bottom: 6%;
					right: 4%;
					height: 18%;
					width: auto;
				}

		#champs {
			position: relative;
			top: 36px;
			margin-left: 12px;
			background-image: url(images/regle.jpg);
			background-size: 30%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#champsh1 {
				text-align: right;
				padding-top: 5%;
				margin-left: 0;
				padding-left: 0;
			}
			#rghelp {
				width: 30%;
			}

		#minusculep {
			display: block;
			margin-top: 14px;
			margin-left: 36%;
			width: 60%;
		}


		#immersif {
			margin: 4px 0px 0px 0px;
			width: 100%;
			background-image: url(images/Charleville.jpg);
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

			#immersifimg {
				width: 100%;
				height: auto;
			}
}