@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

:root {
	--color-texte : #404040;
	--color-gris-fond : #EAEAEA;
	--color-gris-footer : gray;
	--color-bleu-clair : lightblue;
	--color-bleu-fonce : steelblue;
	--color-rose-pale : #FFF3F3;
	--color-rose-fonce : #F5C5C5
}

body { 
	min-height: 100%;
	margin:0;
	background-color: var(--color-gris-fond);
	color: var(--color-texte);
	font-family: Roboto,Arial,Helvetica,sans-serif;
	font-size: 15px;
	line-height: 1.3;
	}

header { 
	font-family: Montserrat,Arial,Helvetica,sans-serif;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	border-top: 3px solid var(--color-bleu-fonce);
	background-color: var(--color-bleu-clair);
	height: 47px; 
	font-size:25px; 
	color: steelblue;
	
	}
nav {
	font-family: Montserrat,Arial,Helvetica,sans-serif;
	position: fixed;
	top: 50px;
	left: 0;
	width: 100%;
	z-index: 3;
	background-color: var(--color-bleu-fonce);
	color: white;
	height: 50px; 
	line-height:50px;
	text-align:center;
	font-size:0px;
}
	/*Premier niveau*/
	#menu { padding:0; margin:0px auto; height: 50px; text-align:center;  }
	#menu li {  margin: 0px 1px; height: 50px; width:200px; list-style-type: none; display:inline-block;}
	#menu li a {width: 100%; height: 100%; display: block; line-height: 50px; text-decoration: none; text-align: center; font-weight: bold; background-color: #d9deea;opacity: 0.6; color: steelblue; font-size:16px; text-transform: uppercase; }
	#menu li a:hover { opacity: 0.9; color: dodgerblue;}
	/*Deuxième niveau*/
	#menu li ul { display: none; padding: 0; float: left; position: relative; }
	#menu li ul li { margin: 0px 0px 0px -2px; display: block; float: none; position: relative;  }
	#menu li:hover ul { display: block; }
	#menu li:hover ul li a { border-left: 2px solid steelblue; border-right: 2px solid steelblue; width: 200px; background-color: #d9deea; font-weight: normal; opacity: 0.9; text-transform: none;}
	#menu li:hover ul li a:hover { color: dodgerblue; }
	#menu li:hover ul li:last-child { border-bottom: 2px solid steelblue}


main {
	max-width: 1050px; 
	width: 100%;
	z-index: 1;
	min-height: 100%;
	margin-top: 100px;
	margin-right: auto; 
	margin-left: auto; 
	background-color: white;
	position:relative;
	padding: 10px 20px 30px 20px;
	}

footer {
	position: fixed;
	left:0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	background-color: var(--color-gris-footer);
	opacity: 80%;
	color: white;
	padding: 8px;
	text-align:center;
}
	
/* BOUTONS */
	input[type=submit], input[type=button], button {
		width:150px; 
		cursor:pointer;
		border-radius:5px ;
		background: aliceblue;
		border:1px solid steelblue; 
		color:steelblue;
		font-size: 14px;
		padding:6px;
		margin:10px 3px;
		transition: 0.3s;
		outline:none;
	}
	input[type=submit]:hover, input[type=button]:hover, button:hover {
		background-color: steelblue; 
		color: white;
	}	
	.large {width:300px; }
	.etroit {width:50px; }
	.petit {width:80px; height:20px; margin:0px; font-size: 12px; padding:1px;}
	.rectangle {width:60px; height:30px; margin:5px; font-size: 13px; color:black; border-radius:0px; background: var(--color-rose-pale); border:1px solid var(--color-rose-fonce); }
	.postlabel {margin-left:270px}
	.nombre {width:40px; text-align:right}

/* FORMULAIRES */
	label {
		width:250px; display: inline-block; text-align: right; margin: 10px;
	}
	label.connexion {
		display: block; text-align: center; padding: 10px;
	}
	input, textarea, select, option {
		background-color:var(--color-rose-pale);
	}
	input, textarea, select {
		padding:3px;
		border:1px solid var(--color-rose-fonce);
		border-radius:5px;
		box-sizing: border-box;
		width:200px;
	}
	textarea.wide {
		width: 400px;
	}
	input[type=checkbox], input[type=radio] {
		width:20px;
	}
	input[type=date] {
		width:140px;
	}
	input:focus, textarea:focus {
		border : 1px solid lightblue;
		background-color: transparent;
		outline : none;
	}

/* BOUTONS CLICABLES DE TYPE TABLEAU */
	.boutongold {background-color: white; text-align:center; font-size:18px; border:1px solid darkgray;width:180px; height:100px; display:table;}
	.boutongold:hover{background-color: gold; cursor: pointer;}
	.boutongold span {vertical-align:middle; display: table-cell;}
	.boutonred {background-color: peachpuff; text-align:center; font-size: 20px;}
	.boutonred:hover{background-color: red; cursor: pointer;}


/* TEXTES ET TITRES */
	h2, legend{
		font-family: Montserrat,Arial,Helvetica,sans-serif;
		font-weight: 500;
		font-size: 20px;
		border-bottom: 2px solid steelblue;
		margin-top: 20px;
		margin-bottom: 20px;
		padding-bottom: 5px;
		color: steelblue;
	}
	h3 {
		text-align:center;
	}
	h4 {
		font-family: Montserrat,Arial,Helvetica,sans-serif;
		color: steelblue;
		font-size: 16px;
		margin-bottom: 4px;
	}
	h4::before {
		content: "\25BA \0020"; /* unicode triangle suivi d'un espace */
	}
	h5::before {
		content: "WEBMASTER:\0020\0020";
	}
	h5 {
		font-family: monospace;
		color: darkorange;
		border: 1px solid darkorange;
		font-size: 14px;
		margin-left: 100px;
		margin-right: 100px;
		padding:5px;
		font-weight: normal;
		
		
	}
	.small {font-size: 10px;}
	.red {color:red}
	.green {color:#20C720;}
	
	pre.pre12 {
		font-size:12px; 
		margin:0px;
		white-space: pre-wrap;
		white-space: -moz-pre-wrap;
		white-space: -pre-wrap;
		white-space: -o-pre-wrap;
	}
	

.cadre_rouge {margin:4px 4px 14px 4px; border:1px solid red; background-color: antiquewhite; border-radius:4px; color:red; font-size:15px; font-style: italic; padding:8px; text-align:justify;box-shadow: 4px 4px 4px lightgray;}
.cadre_bleu {text-align:justify; margin:20px 0px 20px 30px; border-left:3px solid royalblue; padding:5px; background-color: rgb(215,222,245); color:royalblue; }
.cadre2_rouge {text-align:justify; margin:5px 5px 14px 0px; border-left:3px solid red; padding:5px; background-color: rgb(255,200,200); color:black; }

/* TABLES */
	table.hover-act {margin:10px auto;}
	table.hover-act td.blanc{background-color: white; text-align:center;}
	table.hover-act td.blanc:hover{background-color: gold; cursor: pointer;}
	table.hover-act td.rouge{background-color: lightsalmon; text-align:center;}
	table.hover-act td.rouge:hover{background-color: gold; cursor: pointer;}
	table.hover-act td.vert{background-color: lightgreen; text-align:center;}
	table.hover-act td.vert:hover{background-color: gold; cursor: pointer;}
	table.hover-act td.bleu{background-color: lightblue; text-align:center;}
	table.hover-act td.bleu:hover{background-color: gold; cursor: pointer;}
	table.hover-act td.gris{background-color: lightgray; text-align:center;border: 1px solid lightgray;}
	table.hover-act td.gris:hover{background-color: gold; cursor: pointer;}
	table.hover-act td {background-color: white;border: 1px solid lightgray;}
	td.fondblanc {background-color: white;border: 1px solid lightgray;}
	table.bc {border-collapse:collapse}
	td.tabsmall {font-size: 12px;}

/* LIGHT-BOX */
	.lb-container { 
		  display: none; 
		  position: fixed; 
		  z-index: 1; 
		  left: 0;
		  top: 0;
		  width: 100%; 
		  height: 100%; 
		  overflow: auto; 
		  background-color: rgba(0,0,0,0.7);  /*Black w/ opacity */
	}
	.lb-content {
		  background-color: white;
		  margin: 120px auto 10px auto; /* 15% ou 30px from the top and centered */
		  padding: 20px;
		  border: 1px solid #888;
		  width: 90%; /* Could be more or less, depending on screen size */
		  height: 80%;
	}
	.close {color: #aaa; float: right; font-size: 28px; font-weight: bold;}
	.close:hover, .close:focus {color: black; text-decoration: none; cursor: pointer;}

/* --------------ancien css------------------ */
	
.bouton_menu_titre {
	width:200px; 
	border-radius:15px ;
	background: #555;
	border:none;
	color:#f5f5f5;
	font: 13px Verdana;
	padding:6px 0 6px 0;
	box-shadow:1px 1px 3px #999;
}
.bouton_menu {
	width:200px; 
	cursor:pointer;
	border-radius:15px ;
	background: #f5f5f5;
	border:none;
	color:#555;
	font: 13px Verdana;
	padding:6px 0 6px 0;
	box-shadow:1px 1px 3px #999;
	transition: 0.3s;
	outline:none;
}
.bouton_menu:hover {
  background-color: lightblue;
}

.boutonout {background-color: white; text-align:center; font-size: 13pt; border:1px solid darkgray;}
.boutonout:hover{background-color: gold; cursor: pointer;}

.boutonannulout {background-color: peachpuff; text-align:center; font-size: 12pt;}
.boutonannulover{background-color: red; text-align:center; font-size: 12pt; cursor: pointer;}

table.fondblanc {border-spacing: 3px}
table.fondblanc th {background: #CCC; padding:5px; color: black; font-weight: normal} 
table.fondblanc td {background: #FFF; padding:5px; border: 1px solid lightgray;}