/*-----------------------------------------------------------------------------------*/
/*                              css commun                                           */
/*-----------------------------------------------------------------------------------*/
html, body {
	font-size: 1em; /* Ideal: 16px */
	height: 100vh;
	width: 100%;
	margin: 0;
	padding: 0;
	background: linear-gradient(45deg, rgb(102, 104, 108), rgb(146, 148, 152), rgb(167, 165, 160));
	border: 0px solid transparent;
}
html {
 	zoom: 1.0;
}
a:link {
	color: rgb(230,230,230);
    text-align: center;
   	text-decoration: none;
}
a:visited {
   	color: #C0C0C0;
    text-align: center;
}
.nav:link{color: #FFFFFF;}
.nav:visited{color: #FFFFFF;}
.nav:active{color: #FFFFFF;}
ul {
    padding-left: 0;
}
img, object, embed, canvas, video, audio, picture {
   	max-width: 100%;
}
/*-----------------------------------------------------------------------------------*/
#content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-around;
	align-items: center;
	min-height: 0;
	min-width: 0;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	font-size: clamp(0.7rem, 1.05vw, 1.8rem);
/*	background-color: #114455;
*/}
/*-----------------------------------------------------------------------------------*/
.clear { 
  	clear: both; 
  }
.content-header {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 0;
	min-width: 0;
	height: 6vh;
	width: 95%;
	color: rgb(250,250,250);
/*	background-color: #334455;
*/}
.content-header i a {
   	color: rgb(250,250,250);
}
.touche_nav {
	color: rgb(240,240,240);
	float: left;
	font-family: Constantia;
	width: 10%
}

.touche_nav a {
	color: rgb(240,240,240);
}

/*-------------------------------------   Corps  -----------------------------------------------------------*/
.content-body {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-content: start;
	align-items: start;
	min-height: 0;
	min-width: 0;
	height: 90vh;
	width: 100%;
	/*background-color: #112233;*/
	border: 1px solid rgb(190,190,190);
}
/*-------------------------------------   Pied   -----------------------------------------------------------*/
.content-left {
	text-align: justify;
	padding-left: 1%;
	padding-right: 1%;
	overflow: auto;
	min-height: 0;
	min-width: 0;
	height: 100%;
	width: 40%;
	/*background-color: #334455;*/
	color: rgb(10,10,10);
}	
/* --------------------------------   article   -------------------------------------*/
.article {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	min-height: 0;
	min-width: 0;
	height: 100%;
	width: 60%;
	overflow: hidden;
	color: rgb(230,230,230);
}
.article-menu {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: start;
	text-align: center;
	min-height: 0;
	min-width: 0;
	height: 10%;
	width: 100%;
	/*background-color: #114422;*/
}
.article-body {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	overflow: hidden;
	margin: auto;
	height: 85%;
	width: 95%;
}
.article-body-item {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	overflow: hidden;
	margin: auto;
	height: 95%;
	width: 95%;
}

.article-body-image {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	overflow: hidden;
	margin: auto;
	width: 80%;
	/*background-color: #664422;*/
}

.article-body-texte {
	text-align: justify;
	overflow: auto;
	min-height: 0;
	min-width: 0;
	height: 40%;
	width: 80%;
	color: rgb(10,10,10);
}
.content-body-reglement {
	text-align: justify;
	overflow: auto;
	padding-right: 1%;
	min-height: 0;
	min-width: 0;
	height: 100%;
	width: 90%;
	color: rgb(10,10,10);
}

.article-footer {
	overflow: auto;
	margin: auto;
	height: 5%;
	width: 95%;
}

/*-----------------------------------------------------------------------------------*/
	figcaption {
	color: rgb(10,10,10);
	font-size: clamp(0.7rem, 1vw, 1.8rem);
}
/*-------------------------------------   Menu   -----------------------------------------------------------*/
.navigation {
	color: rgb(250,250,250);
	padding: 0;
	list-style: none;
	width: 100%;
	z-index: 99999
}
.navigation ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 99999
}
.navigation li {
	position: relative;
	display: inline-block;
	margin: 0% 0% 0% 0%;
}
.navigation li> ul {
	display: none;
}
/*-------------------------------------   Menu 1er niveau   ------------------------------------------------*/
.navigation a {
	display: block;
	width: 18vw;
	text-align: left;
	font-size: clamp(0.7rem, 1.1vw, 1.8rem);
	color: rgb(250,250,250);
}
/*-------------------------------------   Menu 2eme niveau   -----------------------------------------------*/
.navigation ul li a {
	display: block;
 	width: 15vw;
	top: 0px;
	text-align: left;
	font-size: clamp(0.7rem, 1.1vw, 1.8rem);
}
/*-------------------------------------   Décalage 2eme niveau   -------------------------------------------*/
.navigation li:hover > ul {
	display: block;
	left: 0;
}
/*----------------------------------------------------------------------------------------------------------*/
.navigation a:hover {
	color: #666;
	background: #999999;
}
/*-------------------------------------------------------------------*/
.planche-vign {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: auto;
	width: 48%
}
table {
	text-align: center;
	margin: auto;
	width: 90%;
	border-collapse: collapse;
}

td, th /* Mettre une bordure sur les td ET les th */ {
	border: 1px solid black;
}