/* Menu responsive  */
li {
	margin: 1px;
	padding: 1px;
}
body {
	font-family: Verdana, Calibri, sans-serif;
	margin: 0px;
	padding: 0px;
}


nav > ul {
	margin: 0px;
	padding: 0px;
}
nav li {
	list-style-type: none;
}
nav > ul {
	display:flex;
	flex-wrap:wrap;
	margin:0;
	padding:0;
}

nav > ul > li {
	position:relative;
}

nav input[type=checkbox] {
	display: none;
}
.submenu {
	display: none;
}
.menu-mobile {
	display: none;
}
nav{
	width: 100%;
	background-color: #424558;
}
nav > ul > li {
	float: left;
	position: relative;
}
nav > ul::after {
	content: "";
	display: table;
	clear: both;
}
nav a {
	display: inline-block;
	text-decoration: none;
}
nav > ul > li > a {
	padding: 20px 30px;
	color: #FFF;
}
nav li:hover .submenu {
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px;
	z-index: 100000;
}
.submenu li {
	border-bottom: 1px solid #CC;
}
.submenu li a {
	padding: 15px 30px;
	font-size: 13px;
	color: #222538;
	width: 270px;
}
.menu-html:hover {
	border-top: 5px solid #e44d26;
	background-color: RGBa(228, 77, 38, 0.15);
}
.menu-css:hover {
	border-top: 5px solid #0070bb;
	background-color: RGBa(000, 112, 192, 0.15);
}
.menu-js:hover {
	border-top: 5px solid #f1dc4f;
	background-color: RGBa(241, 211, 79, 0.15);
}
.menu-contact:hover {
	border-top: 5px solid #BBB;
	background-color: RGBa(220, 220, 220, 0.15);
}
nav > ul > li:hover a {
	padding: 15px 30px 20px 30px;
}
.menu-html .submenu {
	background-color: RGB(230, 100, 40);
}
.menu-css .submenu {
	background-color: RGB(000, 160, 240);
}
.menu-js .submenu {
	background-color: RGB(251, 216, 99);
}
.submenu li:hover a {
	color: #EEE;
	font-weight: bold;
}
.menu-html .submenu li:hover {
	background-color: RGB(210, 77, 60);
}
.menu-css .submenu li:hover {
	background-color: RGB(000, 115, 200);
}
.menu-js .submenu li:hover {
	background-color: RGB(200, 165, 75);
}
.menu-mobile {
	display: none;
}
nav input[type=checkbox] {
	display: none;
}
nav input[type=checkbox]:checked ~ ul {
	display: block;
}

@media screen and (max-width : 680px) {
	.menu-mobile {
		display: block;
		color: #fff;
		background-color: rgba(29, 197, 151, 0.97);
		text-align: center;
		padding: 12px 0;
	}
	nav ul{
		display: none;
	}
}
@media screen and (max-width : 680px){
	
.menu-mobile {
	display:block;
	color:#fff;
	background-color:rgba(9,197,151,0.97);
	text-align:center;
	padding:12px 0;
	cursor:pointer;
}

nav ul {
	flex-direction:column;
}

nav ul li,
nav ul li a {
	width:100%;
	text-align:center;
}

nav > ul > li {
	float:none;
}

nav ul li a,
nav ul li:hover a{
	padding:10px 0;
}

nav li:hover .submenu {
	display:block;
	position:static;
}
}
/* Menu responsive FIN */

/* Debut sections responsive */
/* Réinitialisation simple */
* {
	text-decoration: none;
	text-align: justify;
	font-size: 16px;
	font-family: Verdana, Geneva, sans-serif;
	margin-left: 20%;
	box-sizing: border-block;
}
.container {
	display: flex;
	flex-direction: row;
	gap: 20;
	width: 95%;
	margin:	auto;
	padding-right: 10%;
	padding-left: 10%;
	padding-top: 20%;
	padding-bottom: 10%;
	background-color: #CCCCCC;
	border: 1px solid #999999;
	font-style: none;
	font-size: 16;
	clear: both;
}
.bloc {
	flex: 1;
	background-color: #3498db;
	color: white;
	margin-right: 2%;
	margin-left: 10%;
	padding-left: 2%;
	padding-right: 2%;
	text-align: left;
	border-radius: 8%;
}
/* Responsive tablette */
@media (max-width: 768px) {
*container {
	flex-wrap: wrap;
}
.bloc {
	flex: column;
}
.header {
	flex-direction: column;
}
.video {
	flex-direction: column;
}
/* Responsive mobile */
@media (max-width: 480px) {
*container {
	flex-direction: column;
}
.bloc {
	flex-direction: column;
}
.header {
	flex-direction: column;
}
}
/*Fin style responsive*/

/* STYLE PAGE */
.h1 {
	text-align: center;
	line-height: 1.5em;
	padding-top: 0em;
}
.bandeau {
	margin: auto;
	text-align: center;
	padding: auto;
	display: inline-table;
}
.icone {
	width: 10%;
	vertical-align: middle;
}
#icone1 {
	position:absolute;
	top: 0px;
	left: 5%;
}
#icone2 {
	position:absolute;
	top: 0px;
	left: 90%;
}
.header2 {
	background-color: none;
	width: 100%;
	height: auto;
	line-height: 2em;
}
.header1:hover {
	background-color: RGBa(9, 197, 151, 0.97);
}
.header {
	width: 100%;
	height:auto;
	margin: auto;
	text-align: center;
	padding-right: 0%;
	padding-left: 0%;
	position: relative;
	background-color: #975321; /* Violet fonce : #775566 */
}
#header {
	margin: auto;
	text-align: center;
	}
.footer {
	display: block;
	width: 95%;
	vertical-align: bottom;
	color: #FFFFFF;
	background-color: #975321; /* Violet fonce : #775566 */
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2%;
	padding-top: 2%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom: 2%;
	border: 1px solid #999999;
}
.video {
	margin: auto;
	text-align: center;
}