/****************************************
 * COULEURS
 ***************************************/
	/*
	Couleurs
		#32CD32; Vert Lime
		#dc143c; Rouge d'Alizarine
		#FFA500; Orange Tangerine
		#318CE7; Bleu Roi
		#FFE436; Jaune Mimosa
		#d820ca; Violet Violine B666D2
		#56575b;
		#213e97; Sarcelle:008080   2953bb 
	*/

	:root {
		/*--bg-color-hover: #dfe0e2;*/
		--bg-color-hover:#318CE7;
		--bg-color-hover-valide:#32CD32;
		--bg-color-hover-cancel:gray;
		--bg-color-hover-delete:#dc143c;
		--bg-color-enteteTab:#75D7FD;
		--bg-color-EndOrClose: orangered;
		--bg-color-valider:#A5DC71;
		--color-border:gray;
	}

/****************************************
 * FONTS
 ***************************************/

	@font-face {
		font-family: Montserrat;
		src: url('../font/Montserrat-Regular.ttf') format('truetype');
	}

	html, body { height: 100%; }		/*flexbox compatibilité*/

	body{
		font-family:'Montserrat';
		/*font-family: Dejavu Sans, Arial, Verdana, sans-serif;*/
	}

/****************************************
 * COMPORTEMENT GLOBAUX
 ***************************************/

	.lienHover:hover{cursor:pointer; background-color: var(--bg-color-hover); border-radius: 5px; }


/****************************************
 * CONNEXION/DECONNEXION
 ***************************************/
	#blocConnexion{
		display:grid; grid-template-columns:auto 300px auto; margin-top:150px;
	}

		#zoneConnexion{
			padding:30px; background-color:beige; border-radius:10px;
		}

			form.formConnexion{
				text-align:center;
				font-size:1.3em;
				/*background-color: beige;*/
				font-weight: bold;
			}

				form.formConnexion input.identifiant{
					margin-top:0.5em;
					height:1.9em;
					font-size:1em;
					width:10em;
					border:1px solid #000000;
					border-radius:5px;
					padding:0.3em;
					/*background-color: beige;*/
				}
				
				form.formConnexion input.btValider{
					margin-top:1em;
					height:1.5em;
					font-size:1em;
					width:7em;
					/*font-variant-caps: small-caps;*/
					font-weight:bold;
					background-color:var(--bg-color-valider);
					border:none;
					color:black;
					border-radius:5px;
				}

					form.formConnexion input.btValider:hover{
						background-color: var(--bg-color-hover-valide);
					}

					#divResultatConnexionClient{
						width:100%; text-align:center; margin-top:10px; font-size:0.9em; height:30px; margin:10px; color:red;
					}

/****************************************
 * INTERFACE GLOBALE
 ***************************************/
	
 	body{
		margin: 0px;
		padding: 0px;
	}

	#bodyInterface.classGeneralOne{
		/*background-color:#EFEFEF; /*#FAF0E6;*/
		/*max-width:500px;			/* TODO : à revoir : afficher les blocs en float par exemple pour occuper tout l'écran au lieu de scroll */
	}

		div.bandeauPage{
			position:fixed; 
			top:0px;
			left:0px;
			width:100%;
			height:60px;
			border-bottom:0px solid #2222EE;
			background-color:#FFFFFF; /*#F5DEB3; /*#318CE7; /*#EFEFEF;*/
			color:black;		
			z-index:999;
			font-weight:bold;
		}
		
			div.contenuBandeauPage{
				/*padding:0.2em;*/
				position: relative;
				color: #ffffff;  
				font-size: 1em;
				line-height: 0.9;
				text-align: center;
				height:inherit;
				overflow:hidden;
			}
			
				div.titrePage{
					float:left;
					font-variant-caps: small-caps;
					margin:5px;
					font-size:1.5em;
				}

	img.imgLienDoc{
		width:25px;
		cursor: pointer;
	}

/****************************************
 * PIED DE PAGE
 ***************************************/

	#footer{
		position:fixed;
		bottom:0px;
		left:0px;
		width:100%;
		height:20px;
		border-bottom:0px solid #2222EE;
		background-color:#EFEFEF;
		padding-top:0.4em;
		display:block;
		background-color:black; 
		color:white;
		padding:5px;	
	}



/****************************************
 * TABLEAUX
 ***************************************/

	.divTable{
		display: table;
	}
	.divTableRow {
		display: table-row;
	}
	.divTableCell, .divTableHead {
		border: 1px solid var(--color-border);
		display: table-cell;
		padding: 3px 10px;
		vertical-align: middle;
	}
	.divTableRowForm .divTableCell{
		border: none;
		vertical-align: top;
	}
	.divTableCell{
		border-top: none;
		overflow: hidden;
	}

	.divTableHeading {
		background-color:var(--bg-color-enteteTab);
		display: table-header-group;
		font-weight: bold;
		height:20px;
	}
	.divTableFoot {
		background-color: #EEE;
		display: table-footer-group;
		font-weight: bold;
	}
	.divTableBody {
		display: table-row-group;
	}

	.divTableRow .colFirst{border-right:none;}
	.divTableRow .colMiddle{border-right:none;}	

	
/****************************************
 * SLIDER (Formulaires)
 ***************************************/
	
	.sliderFormulaire {
		-webkit-appearance: none;
		width: 100%;
		height: 15px;
		background: #e0e0e071;
		outline: none;
		opacity: 0.7;
		-webkit-transition: .2s;
		transition: opacity .2s;
		border: 1px solid gray;
		border-radius: 5px;
		margin-left:5px;
	}

	.sliderFormulaire:hover {
		opacity: 1;
	}

	.sliderFormulaire::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 25px;
		height: 25px;
		background: var(--bg-color-hover);
		cursor: pointer;
	}

	.sliderFormulaire::-moz-range-thumb {
		width: 25px;
		height: 25px;
		background: var(--bg-color-hover);
		cursor: pointer;
	}


	
/****************************************
 * MEDIAS
 ***************************************/	

/*
@media screen and (max-width:750px) {

}

@media (orientation: portrait) and (max-width:1400px){
	body{

	}	
}

@media (orientation: landscape) and (max-device-width : 1040px){	
	body{

	}
}
*/