/*	General	et static	*/
:root {
	/* PALETTE */
	--base-neutre: 	rgb(103, 115, 168);
	--base-orange:	rgb(224, 176, 42);
	--base-rouge: 	rgb(215, 51, 106);
	--base-violet:	rgb(96, 25, 175);
	--base-bleu: 	rgb(35, 81, 163);
	--base-kaki: 	rgb(142, 168, 104);
	--base-vert:	rgba(49, 95, 70, 1);
	--base-transparent:	rgba(0, 0, 0, 0);

	--base-vert-20: 	rgba(49, 95, 70, .5);
	--base-bleu-20: 	rgba(35, 81, 163, .20);
	--base-orange-20:	rgba(224, 176, 42,.2);
	--base-violet-20:	rgba(96, 25, 175, .2);

	--light-neutre: 	rgb(236, 238, 244);
	--light-orange: 	rgb(251, 245, 229);
	--light-rouge: 		rgb(250, 230, 237);
	--light-violet: 	rgb(239, 229, 251);
	--light-bleu: 		rgb(230, 237, 250);
	--light-kaki: 		rgb(241, 244, 236);
	--light-vert:		rgba(235, 245, 240);

	--medium-neutre: rgb(185, 191, 215);
	--medium-orange: rgb(241, 220, 159);
	--medium-rouge: rgb(237, 163, 188);
	--medium-violet: rgb(198, 159, 241);
	--medium-bleu: rgb(164, 190, 236);
	--medium-vert: rgb(203, 215, 185);

	--base-blanc: #fff;
	--base-noir: #000;
	--base-gris-1: #111;
	--base-gris-3: #333;
	--base-gris-6: #666;
	--base-gris-A: #aaa;
	--base-gris-C: #ccc;
	--base-gris-E: #eee;
	--base-gris-EF: #fefefe;

	/* COULEURS STANDARD */
	--title-color: var(--base-neutre);
	--text-color: var(--base-gris-1);
	--text-color-2: var(--medium-neutre);
	--text-color-i: var(--base-blanc);
	--link-color: var(--base-bleu);
	--link-color-i: var(--base-blanc);
	--background-color-B: var(--base-blanc);
	--background-color-0: var(--base-gris-E);
	--background-color-1: var(--base-gris-FE);
	--background-color-2: var(--base-gris-A);
	--background-color-i: var(--base-gris-6);
	--background-color-dialog:  var(--light-neutre);
	--background-color-border-dialog: var(--base-neutre);
	--border-color: var(--base-neutre);
	--border-color-i: var(--base-blanc);
	--color-filtre: var(--base-violet);
	--color-filtreBG: var(--light-violet);
	--button-radius: 5px;
	--button-size:	1rem; 
	--button-min-width: 120px;
	--button-height: 35px;
	--nav1Col-width: 240px;
	--nav1Button-width: 200px;
	--nav1Button-height: 113px;

  }

body {
	background-color: var(--background-color-1); 
	color: var(--text-color); 
	font-family:system-ui, sans-serif; 
	font-size: 1rem; 
	font-style: normal; 
	font-weight: normal;
	line-height: 1.5em;
	margin:0px;
	letter-spacing: 0.1em;
	text-decoration: none;
	} 
a	{color: var(--link-color); text-decoration: none;} 
h1	{font-size: 20px; color:var(--title-color);}
h2	{font-size: 16px; color:var(--title-color);}
hr	{border: 1px solid var(--border-color);}

.c100pc		{margin: auto; width: 100%; border: none;	padding: none;	z-index: 1;}
.c80pc		{margin: auto; width: 80%; border: none;	padding: none;	z-index: 1;}
.c1000		{margin: auto; width: 1030px; border: none;	padding: none;	z-index: 1;}
.c800		{margin: auto; width: 830px; border: none;	padding: none;	z-index: 1;}
.c300		{margin: auto; width: 300px; border: none;	padding: none;}
.c500		{margin: auto; width: 500px; border: none;	padding: none;}
.c470		{margin: auto; width: 470px; border: none;	padding: none;}
.c100		{margin: auto; width: 100px; border: none;	padding: none;}
.c156		{margin: auto; width: 156px; border: none;	padding: none;}

.page{
    width:100%;
	margin:auto;
	overflow:hidden;
	min-height: 20vh;
    display: grid;
	grid-template-rows: auto 1fr auto;
}

.container{
    width:99%;
	margin:auto;
	padding: 5px;
	overflow:auto;
}

.activeImage{
    width:100%;
	margin:auto;
	position: relative;
	justify-content: center;
	text-align: center;
	cursor:pointer;
}

.floatLeft {
	float: left;
	padding: 2px;
}
.floatRight {
	float: right;
	padding: 2px;
}

#head{
	background-image: url("_icones/titre.jpg");
	background-repeat: repeat-x;
	background-repeat: repeat-y;
	min-height: 42px;
	padding-top: 10px;
	margin-top: 10px;;
}
#menus input[type=text]	{
	width: var(--button-min-width);
	min-height: var(--button-height);
	background-color: var(--color-filtreBG);
}

/*	Home page	*/
.menuHome 		{
	position:absolute;
	bottom:30px; 
	visibility:visible; 
	z-index:2;
	width:100%;
	background-color:var(--background-color-2);
	background-image: url("_icones/titre.jpg");
	background-repeat: repeat-x;
	background-repeat: repeat-y;
	text-align: center;
	}
#detailsHome 		{
	position:absolute;
	top:50px; 
	visibility:visible; 
	z-index:2;
	width:100%;
	text-align: center;
	font-size: 25px;
	color:var(--text-color-2);
	letter-spacing: 0.5em;
	}
#titreHome		{
	width:100%;
	text-align: left;
	font-size: 25px;
	color:var(--text-color-2);
	letter-spacing: 0.5em;
	padding: 10px;
	}
/*	Entete, pied et composants statiques*/
header{
	color:var(--title-color);
    background-color: var(--background-color-1);
    letter-spacing: 0.1em;
    vertical-align: top;
	margin:0px;
    padding: 5px;
    display: grid;
	grid-template-columns: auto auto 1fr 28px;
	visibility: visible;
}

header a{color:var(--link-color-i);}

#titre {
    font-size: 40px;
	color:var(--link-color-i);
    letter-spacing: 0.1em;
    vertical-align: middle;
	padding-top: 0px;
	padding-left: 10px;
	height: 100%;
  	line-height: 100%;
}

footer{
    font-size: 16px;
	color: var(--text-color-2);
    letter-spacing: 0.1em;
    padding: 5px;
    border-top: solid 1px var(--border-color);
    vertical-align: top;
    display: grid;
	grid-template-columns: auto auto;
}
dialog {
	position: absolute;
	margin: auto;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
	min-height: 30%;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	color:var(--text-color);
	background-color: var(--background-color-dialog);
	border-radius:var(--button-radius);
	border-color: var(--background-color-border-dialog);
	z-index: 1000;
	min-width: 50%;
}
dialog a {color:var(--text-color);}

#optionsX {
	position: absolute;
	width: 50%;
	margin: auto;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
	height: auto;
	color:var(--text-color-i);
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: var(--background-color-i);
	opacity: 0.9;
	visibility: hidden;
	z-index: 10;

  }
#optionsX a {color:var(--text-color-i);}

#notes textarea	{
	width: 70%;
	min-height: 80px;
	background-color: var(--base-orange-20);
	border: none;
	padding: 10px;
	font-size: 1.1rem; 
	font-style: normal; 
	font-weight: normal;
}

#lng2 {
color:var(--text-color-i);;
top: 0px;
right: 1px;
visibility: visible;
cursor:pointer;
}

#lng {
position: absolute;
color:var(--text-color-i);
top: 0px;
right: 1px;
padding: 0px;
visibility: visible;
cursor:pointer;
}

#optionButton {
color:var(--text-color-i);
visibility: visible;
cursor:pointer;
border-radius:var(--button-radius);
}

.Sclose {
	width: 100%;
	margin: auto;
	padding: 0px;
	font-size: 1.5rem;
	color: var(--base-neutre);
	text-align: left;
}
.Sclose a{
	color: var(--link-color-i); 
	text-decoration: none;
}

#sections {margin-right: 10px;}
#details2 {
	position: absolute;
	min-width: 50%;
	margin: auto;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
	min-height: 50%;
	color:var(--text-color);
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	max-height: 80%;
	overflow: scroll;
  }

#details {
	position: absolute;
	width: 50%;
	margin: auto;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
	height: 50%;
	color:var(--text-color-i);
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: var(--background-color-i);
	opacity: 0.9;
	overflow:auto;
	z-index: 7;
	visibility: hidden;
  }

#details a {color:var(--text-color-i);	font-size: 1rem; text-decoration: none;}

#login2 {
	position: absolute;
	width: 50%;
	margin: auto;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
	height: 50%;
	color:var(--text-color-i);
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: var(--background-color-i);
	opacity: 0.9;
	overflow:auto;
	z-index: 7;
  }

#login2 a {color:var(--text-color-i);	font-size: 1rem; text-decoration: none;}

#login {
	position: absolute;
	width: 40%;
	height: 200px;
	margin: auto;
	padding: 15px;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	color:var(--text-color-i);
	background-color: var(--background-color-i);
	opacity: 0.9;
	overflow:auto;
	z-index: 7;
	visibility: visible;
  }
#login a {color:var(--text-color-i);	font-size: 1rem; text-decoration: none;}

.bh{
	position: relative;
	margin: 0px;
	background-color: transparent;
	border: none;
	cursor:pointer;
	text-align: right;
	justify-content: right;
	align-items: right;
}

.menu{
	position: relative;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 5px;
	border-bottom: dotted 1px var(--border-color);
	font-size: var(--button-size); 
	color:var(--text-color);
	vertical-align: baseline;
	min-height: 35px;
}

.contextuel{
	position: absolute;
	margin: 0px;
	padding-top: 10px;
	padding: 5px;
	border: dotted 1px var(--border-color);
	background-color: var(--background-color-i);
	color:var(--text-color-i);
	vertical-align: top;
	visibility: hidden;
	font-size: 0.7rem;

}

.searchKey {
    background-color: #999;
	width:75px;
	border: none;
}

/*	colones	*/

.colonne{
    border-right: dotted 1px var(--border-color);
	border-bottom: dotted 1px var(--border-color);
    text-align: center;
}
.col-span-2 {grid-column: span 2;}
.cols-1e{
	display: grid;
	grid-template-columns: auto;
}
.cols-2e{
	display: grid;
	grid-template-columns: auto auto;
}
.cols-2-auto{
	display: grid;
	grid-template-columns: auto auto;
}
.cols-2-15{
	display: grid;
	grid-template-columns: 20% auto;
}
.cols-2g{
	display: grid;
	grid-template-columns: 100px auto;
}
.cols-2-nav1{
	display: grid;
	grid-template-columns: var(--nav1Col-width) auto;
}
.cols-2e-50{
	display: grid;
	grid-template-columns: 50% 50%;
}
@media (orientation: portrait){
	.cols-2e-50{
		display: grid;
		grid-template-columns: 1fr;
	}
}
.cols-2-l250{
	display: grid;
	grid-template-columns: 300px 1fr;
}
@media (orientation: portrait){
	.cols-2-l250{
		display: grid;
		grid-template-columns: 1fr;
	}
}
.cols-3g{
    display: grid;
	grid-template-columns: 70px 1fr 70px;
}
.cols-3-l250{
	display: grid;
	grid-template-columns: 250px auto auto;
}
.cols-3-autoStable{
	display: grid;
	grid-template-columns: auto auto auto;
}
.cols-3-auto{
	width: 100%;
	margin:auto;
	display: grid;
	grid-template-columns: auto auto auto;
}
@media (orientation: portrait){
	.cols-3-auto{
		display: grid;
		grid-template-columns: 1fr;
	}
}

.cols-3a{
	display: grid;
	grid-template-columns: 10% auto auto;
}
.cols-3e{
	display: grid;
	grid-template-columns: auto 33% auto;
}
.cols-3-f{
	display: grid;
	grid-template-columns: 33% 33% 33%;
}
.cols-3-f-0{
	display: grid;
	justify-content: center;
	align-content: center;
	grid-template-columns: repeat(3, 156px);
	grid-template-rows: repeat(3, 156px);
	padding: 1px;
}
.cols-3-f-1{
	display: grid;
	justify-content: center;
	align-content: center;
	grid-template-columns: repeat(3, 50px);
	grid-template-rows: repeat(3, 50px);
	border: solid 1px var(--base-bleu);
}
.cols-4-auto{
	display: grid;
	grid-template-columns: auto auto auto auto;
}
.cols-4e{
	display: grid;
	grid-template-columns: auto auto auto auto;
}
.cols-4g{
	display: grid;
	grid-template-columns: 130px auto 150px auto;
}
@media (orientation: portrait){
	.cols-4g{
		display: grid;
		grid-template-columns: 130px auto;
		}
	}
.cols-4{
    display: grid;
	grid-template-columns: 5% 25% 1fr 25px;
}
.cols-4-vignettes{
	display: grid;
	grid-template-columns: 240px 30% auto auto;
}
@media (orientation: portrait){
	.cols-4-vignettes{
		display: grid;
		grid-template-columns: 240px auto;
	}
}
.cols-5{
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20% ;
}
.cols-2-l200{
	display: grid;
	grid-template-columns: 200px 1fr;
}
.cols-5e{
	display: grid;
	grid-template-columns: auto auto auto auto auto;
}
.cols-6e{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto;
}
.cols-7e{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto;
}
.cols-8e{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto auto;
}
.cols-9e{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto auto auto;
}
.cols-10e{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
}
.span2 {
	grid-column: span 2;
}

/*	Decoration */

.radio {
	margin: auto;
	background-color: var(--background-color-0);
	padding-block: 1px;
	padding-inline: 6px;
	margin: 2px;
	border-radius: var(--button-radius);
	vertical-align: middle;

}

.radio input[type=radio].radio {
	padding: 3px;
	width: 1em;
	height:1em;
	background-color: var(--base-noir);
	border-color: var(--base-rouge);
	accent-color: var(--color-neutre);
}

.radio input[type=checkbox].toggle {
	opacity:0%;
	position: absolute;
	left:-9000px;
	top:-9000px
}

.radio input[type=checkbox].toggle + label {
	color: var(--color-neutre);
	display:flex;
	align-items: center;
	position: relative;
	cursor: pointer;
}
.radio input[type=checkbox].toggle + label::before {
	content: "";
	width: 2em;
	height: 1em;
	background-color: var(--background-color-0);
	border-radius: 1em;
	margin-right: .25em;
	transition: 200ms ease-in-out;
}
.radio input[type=checkbox].toggle:focus + label::before {
	background-color: var(--background-color-2);
}
.radio input[type=checkbox].toggle + label::after {
	position: absolute;
	left:.1em;
	content: "";
	width: .9em;
	height: .9em;
	background-color: var(--base-rouge);
	border-radius: 1em;
	transition: 200ms ease-in-out;
}

.radio input[type=checkbox].toggle:checked + label::after {
	left:1em;
	background-color: var(--base-vert);
}

.centreBox{
	margin: auto;
	width: 50%;
	border: 1px solid var(--base-bleu);
	background-color: var(--background-color-0);
	padding: 10px;
}

input[type=textarea]	{
	padding: 5px;
	margin: 5px 0;
	box-sizing: border-box;
	border: none;
	background-color: var(--base-grisE);
}
input[type=text]	{
	width: 300px;
}
input[type=number]	{
	width: 50px;
}
input[type=url]{width: 300px;}
.input{width: 150px;}


.item{
	margin: 2px;
	border-radius: 0px;
	border-color:  var(--base-vert);
	background-color:  var(--base-vert);
	color:var(--text-color-i);
	font-size: 10px;
	padding: 2px;
}

.itemRouge{	/*		UNIQUEMENT DANS RECETTE JS */
	margin: 2px;
	border-radius: 0px;
	border-color:  var(--base-rouge);
	background-color:  var(--base-rouge);
	color:var(--text-color-i);
	font-size: 10px;
	padding: 2px;
}

.pseudoButton{
/*	implicit button features	*/
	appearance: auto;
	text-rendering: auto;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: center;
	align-items: flex-start;
	box-sizing: border-box;
	padding-block: 1px;
	padding-inline: 6px;
/*	specific features	*/
	margin: 2px;
	position: relative;
	/*background-color: #fff;*/
	border: none;
	border-top: none;
	border-left: none;
	border-right: none;
	font-family:system-ui, sans-serif;  
	font-size: var(--button-size); 
	font-style: normal; 
	font-weight: normal;
	cursor:pointer;
	min-width: var(--button-min-width);
	min-height: var(--button-height);
	padding-top: 5px;
	border-radius:var(--button-radius);
	background-color: var(--base-neutre);
	color:var(--text-color-i);
}
.pseudoButton:hover {
	/*
	background-color: var(--color-filtre);
	color:var(--text-color-i);*/
	font-weight: bold;
  }

button{
	position: relative;
	margin: 1px;
	/*background-color: #fff;*/
	border: none;
	border-top: none;
	border-left: none;
	border-right: none;
	font-family:system-ui, sans-serif; 
	font-size:  var(--button-size); 
	font-style: normal; 
	font-weight: normal;
	color:var(--text-color-i);
	background-color:var(--base-neutre);
	cursor:pointer;
	min-width: 35px;
	min-height: 35px;
	border-radius:var(--button-radius);
}
button:hover {
		/*
	background-color: var(--base-kaki);
	color:var(--text-color-i);
	*/
	font-weight: bold;
  }

.buttonMin{
	min-width: var(--button-min-width);
	min-height: var(--button-height);
}

.cible {
	margin: 5px;
	min-height: 35px;
	width:150px;
	background-color:var(--color-filtreBG);
	border: 1px solid var(--color-filtre);
	border-top: none;
	border-left: none;
	color:var(--color-filtre);
	cursor:pointer;
	border-radius:var(--button-radius);
	font-size: var(--button-size); 
}

.dataPlus{
	position: relative;
	margin: 5px;
	min-width: var(--button-min-width);
	min-height: var(--button-height);
	border: 1px solid var(--color-filtre);
	border-top: none;
	border-left: none;
	color:var(--color-filtre);
	cursor:pointer;
}
.dataPlus::before {
	content: attr(data-count);
	font-size:  0.8rem;
	position: absolute;
	top: -0.75em;
	right: -0.75em;
	width: 1.5em;
	height: 1.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0%;
	border: 1px solid var(--color-filtre);
	background-color: var(--text-color-i);
	color:var(--color-filtre);
}
.dataPlus:hover {
	background-color: var(--base-violet);
	color:var(--text-color-i);
  }
.tableCells 		{
	text-align: left;
	border: 1px dotted var(--border-color);
	padding: 0px;
	padding-left: 2px;
	padding-right: 2px;
	margin:0px;
}
.gridCells 		{
	text-align: left;
	font-size: 1 rem;
	border: none;
	padding: 0px;
	padding-left: 5px;
	padding-right: 5px;
	margin:0px;
}
.quantite{
	width: 55px;
	border-style: none;
	background-color: var(--base-gris-C);
	text-align: right;
}

.overlayTR	{
	position: absolute;
	top: 10px;
	right: -80px;
	text-align: center;
	padding: 5px;
	height: 70px;

	background-color: var(--base-gris-6);
	color: var(--text-color-i);
	opacity: 1;	
	z-index: 10;
	border-radius: 10%;
}

/* Sudoku */
/**********/
.cols-3-Sudoku{
	display: grid;
	grid-template-columns: 500px 180px auto;
}
@media (orientation: portrait){
	.cols-3-Sudoku{
		display: grid;
		grid-template-columns: 1fr;
		}
}
.cols-3-f-D{
	display: grid;
	align-content: center;
	grid-template-columns: repeat(3, 50px);
	grid-template-rows: repeat(5, 50px);
}
@media (orientation: portrait){
	.cols-3-f-D{
		display: grid;
		justify-content: center;
		align-content: center;
		grid-template-columns: repeat(6, 50px);
		grid-template-rows: repeat(2, 50px);
		}
}

.cols-3-33{
	display: grid;
	justify-content: center;
	align-content: center;
	grid-template-columns: 33% 33% 33%;
}
.sudCell1 {
	cursor: pointer;
	font-size: 1.5rem;
	border: solid 1px var(--base-bleu);
	outline: none;
	align-content: center;
	text-align: center;
	vertical-align: middle;
	color: var(--base-bleu);
	padding-top: 10px;
}

.sudCell2 {
	cursor: pointer;
	font-size: 1.5rem;
	background-color: var(--background-color-1);
	border: solid 1px var(--base-bleu);
	outline: none;
	align-content: center;
	text-align: center;
	vertical-align: middle;
	color: var(--base-bleu);
}

.miniGrid {
	cursor: pointer;
	font-size: 0.7rem;
	background-color: var(--background-color-1);
	border: dotted 1px var(--base-bleu);
	outline: none;
	align-content: center;
	text-align: center;
	vertical-align: middle;
	color: var(--base-bleu);
	line-height: 0.9rem;
}

.chiffre{
	color: var(--base-violet);
	border: solid 1px var(--base-bleu);
}
.suggestionO {
	font-size: 1rem;
	text-align:center;
	background-color: var(--base-orange);
}
.suggestion {
	font-size: 1rem;
	text-align:center;
	color: var(--text-color-i);
	background-color: var(--base-YYY);
}  

.sudCellNeutre {
	background-color: var(--background-color-1);
	color: var(--base-bleu);
}

.sudCellNeutre:hover {background-color: var(--base-bleu-20);}

.sudCellBleu {
	background-color: var(--base-bleu);
	color: var(--text-color-i);
}
.sudCellvert {
	background-color: var(--base-YYY);
	color: var(--text-color-i);
}
.initial{
	cursor: not-allowed;
	font-weight: bold;
	text-decoration: underline;
	border: solid 1px var(--base-bleu);
	background-color:  var(--base-bleu-20);
}
.impossible{
	cursor: not-allowed;
	background-color:  var(--base-orange-20);
	border: solid 1px var(--base-bleu);
}
.occupe{
	background-color: #edefef;
	border: solid 1px var(--base-bleu);
}
.itemList {font-size: 1rem;}
@media (orientation: portrait){
	.itemList{
		line-height: 2.5em;
		font-size: 2rem; 
	}
}

/*	Media */
/**********/








@media (orientation: portrait){
	.cols-3-auto{
		display: grid;
		grid-template-columns: 1fr;
	}
}

@media (orientation: portrait){
	.cols-2e-50{
		display: grid;
		grid-template-columns: 1fr;
	}
}
@media (orientation: portrait){
	.cols-4g{
		display: grid;
		grid-template-columns: 130px auto;
		}
}

@media (orientation: portrait){
	.cible {
		margin: 5px;
		min-width: var(--button-min-width);
		min-height: var(--button-height);
		max-width:250px;
		background-color:var(--color-filtreBG);
		border: 1px solid var(--color-filtre);
		border-top: none;
		border-left: none;
		color:var(--color-filtre);
		cursor:pointer;
		border-radius:var(--button-radius);
		font-size: 1.5rem; 
	}
}

/*
.pad18	{padding-top: 18px;}
.pad5	{padding-right: 5px;padding-left: 5px;padding-top: 0px;padding-bottom:0px;vertical-align: top;margin: 0;}
.middle {margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);}
.nobox		{clear: both;}
.marge0		{margin: 0px;padding:0px}
.marge10	{margin: 10px;}
.marge05	{margin: 5px;}
*/
.vignettex2 {
	cursor: pointer;
	font-size: 0.7rem;
	background-color: #fff;
	border-bottom: dotted 1px var(--base-bleu);
	outline: none;
	align-content: center;
	text-align: left;
	vertical-align: middle;
	color: var(--base-bleu);
	line-height: 0.9rem;
}

.calendrier{
	position: relative;
	margin: 0px;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 0px;
	padding-bottom: 0px;
	border: dotted 1px var(--base-gris-A);
	color:var(--text-color);
	min-height: 50px;
	text-align:center;

}

.gridBase	{padding: 2px; background-color: var(--background-color-1);}
.vignette0  {padding:5px;border-bottom: solid 1px var(--base-bleu-20);}
.vignette1  {padding:5px;border-bottom: solid 1px var(--base-bleu-20);}
.vignette2  {padding:5px;border-bottom: solid 1px var(--border-color-i);align-content: center;background-color: var(--base-bleu-20);font-size: 0.8rem;font-style: italic;}
.iconeBase  {padding:0px;border: none;min-width: 0px;}
.icone0     {padding:0px;border: none;vertical-align: middle; background-color: var(--base-gris-C);min-width: 0;width: 25px;height: 25px;border-radius:var(--button-radius)}
.iconeG     {padding:0px;border: none;vertical-align: middle; min-width: 0;width: 25px;height: 25px;border-radius:var(--button-radius)}
.icone      {padding-left:3px;padding-right:3px;border-right: solid 1px var(--border-color-i);vertical-align: bottom;}
.icone3     {padding:0; border: 0px;vertical-align: bottom;margin: auto; margin-right: 1px;text-align: center;}
.illustration{width:300px; height:225px; float:left; margin-top: 0px; margin-bottom: 0px;margin-right: 20px;margin-left: -100px;}
.iconeSize  {width:70px; height:37px}
.iconeSizeS {width:12px; height:12px}
.iconeSize0 {width:990px; height:530px}
.iconeSize1 {display: block; margin-left: auto; margin-right: auto; width: 100%;}
.iconeSize2 {width:490px; height:265px}
.iconeSize3 {width:323px; height:176px}
.iconeSize4 {width:240px; height:132px}
.iconeSize5 {width:190px; height:106px}
.iconeSize6 {width:156px; height:88px}
.iconeSize7 {width:132px; height:75px}
.iconeSize8 {width:115px; height:66px}
.iconeSize9 {width:101px; height:58px}
.iconeSize10 {width:90px; height:53px}
.iconeSize11 {width:80px; height:48px}
.iconeSize12 {width:73px; height:44px}
.iconeSize13 {width:66px; height:40px}
.iconeSize14 {width:61px; height:37px}
.iconeSize15 {width:56px; height:35px}
.iconeSize16 {width:52px; height:33px}
.iconeNav1	{width:var(--nav1Button-width); height:var(--nav1Button-height);}

.miniature  {width:200px; height:106px;padding:1px;border-right: solid 1px var(--border-color-i);vertical-align: bottom;}
/*
.series  	{width:330px; height:175px;padding:1px;border-right: solid 1px #fff;vertical-align: bottom;}
.menuSize   {width:140px; height:74px}
.menuWidth5 {width:725px;}
.grilleSize {width:98%; height:170px}
.iTitre		{background: #555;font-size: 18px; color:var(--text-color-i); 	opacity: 0.7;}
.circle		{height:15px; width:15px; border-radius: 15px;border: solid 1px #000;background-color: #fff;color:#000; text-align: center;}
.disque		{height:15px; width:15px; border-radius: 15px;border: solid 1px #000;background-color: #000;color:#fff; text-align: center;}
.action		{position:absolute; top:10px; right:10px; padding:10px; text-align: right; background-color: #000; color:fff; opacity: 0.5;}
*/
.left		{text-align: left;}
.centre		{text-align: center;}
.right		{text-align: right;}
.bottom		{vertical-align: bottom;}
.top		{vertical-align: top;align-content: top;}
.bold		{font-weight: bold;}
.boldB		{font-weight: bold; color:var(--base-bleu);}
.boldG		{font-weight: bold; color:var(--base-vert);}
.cell1		{font-weight: bold; color:var(--base-bleu);text-align:center;margin-top: 10px;}
.cell2		{font-weight: normal;text-align:left;margin-top: 10px;}
.homeSize 	{width:150px; height:85px; text-align: center;}
.italics	{font-style: italic; color:var(--base-bleu);}
.greyBand	{text-align: left; background: var(--base-gris-C); font-size: 18px; color:var(--base-gris-3); min-height:25px;}
.error		{font-weight: bold; color: var(--base-rouge)}
.w100		{width:100%;}
.border		{border-style: dotted; border-color: var(--border-color);}
.w200  		{width: 45%; height: 3rem;	font-size: 1.5rem; margin-top: 10px; border-radius: 10px;--button-size:	1rem; }

.filtreBG	{background-color: var(--color-filtreBG)}
.none 		{border: none; color:var(--text-color-i)}
.blanc		{background-color: var(--background-color-0);cursor:pointer;}
.grisC		{border: none; background-color: var(--background-color-0); color:var(--text-color);padding: 5px;}
.floatRight	{float:right;}
.readonly   {color:var(--base-gris-6); background-color: #eee}
.faded		{color:var(--base-gris-C);}
.NONfaded	{color:var(--text-color);}
.cache		{visibility: hidden;width:10px;}
.pointer	{cursor:pointer;}
.assign		{margin-left: 2px; padding-left: 2px; padding-right: 2px; background-color: var(--base-orange); color:var(--text-color-i);cursor:pointer;}
.padding5	{padding: 5px;}
.alpha		{color:var(--base-orange);border-bottom: solid 1px var(--base-orange);width:100%;}
.selection	{background-color: var(--background-color-0); color:var(--text-color);cursor:pointer;}
.selected	{border: none; background-color: var(--color-filtreBG); color:var(--color-filtre); font-weight: bold;}
.titre1		{color:var(--base-bleu);border-bottom: solid 1px var(--base-bleu);width:100%;	font-size: 1.6rem; ;}
.titre2		{color:var(--base-bleu);width:100%;	font-size: 1.4rem;}
.titre3		{color:var(--base-bleu);width:100%;	font-size: 1.2rem;}
.big		{font-size: 25px; color:var(--base-bleu); text-align: center;border-bottom: solid 1px var(--base-bleu);padding: 20px;}
.T1			{font-size: 22px; color:var(--title-color);padding-top: 5px;padding-bottom: 5px;vertical-align: middle;}
.T2			{font-size: 20px; color:var(--title-color);padding-top: 5px;padding-bottom: 5px;vertical-align: baseline;}
.frame		{padding: 2px; border: solid 1px var(--background-color-1)}
.bleft		{margin-left: 5px; padding-left: 5px; border-left: solid 1px var(--background-color-1)}
.noMinWidth {min-width: 0px;}
.small		{font-size: 0.8em; line-height: 1em;}
.small2		{font-size: 0.75rem;}
.hide		{display:none;}
.msg		{border: none; background-color: var(--base-bleu-20); width:100%; margin-top:20px;margin-bottom:20px;font-size: 22px;text-align: center;padding:10px}
.border1	{border: 1px solid var(--color-filtre);}
.preview	{border: 1px solid var(--color-filtre);max-height: 50px;overflow: scroll;font-size: 0.6rem;	line-height: 1em;}
.guide		{color: var(--text-color); font-size: 0.8rem; font-style: normal; font-weight: normal; line-height: 0.9em;}
.keyButons	{width: 200px; height: 100px; margin: 10px; font-size: 1.4rem; background-color: var(--base-vert);}
.margesV	{margin-right: 20px; margin-left: 20px;}
.bandeau	{
	border: none; 
	background-color: var(--background-color-0); 
	font-size: 1.5em; 
	color:var(--title-color);
	vertical-align: middle;
	padding: 5px;
}


.fieldName	{color: var(--base-neutre);font-weight: bold;}
.Tgreen		{color: var(--base-vert);}
.Tgreen-50	{color: var(--base-YYY);}
.Tgreen-2	{color: var(--base-kaki);}
.Tblue		{color: var(--base-bleu);}
.Torange	{color: var(--base-orange);}
.Tviolet	{color: var(--base-violet);}
.Trouge		{color: var(--base-rouge);}
.Tneutre	{color: var(--base-neutre);}


.Mneutre	{border: none; background-color: var(--medium-neutre); color:var(--text-color)}
.Morange	{border: none; background-color: var(--medium-orange); color:var(--text-color)}
.Mrouge		{border: none; background-color: var(--medium-rouge); color:var(--text-color)}
.Mviolet	{border: none; background-color: var(--medium-violet); color:var(--text-color-i)}
.Mbleu		{border: none; background-color: var(--medium-bleu); color:var(--text-color)}
.Mvert		{border: none; background-color: var(--medium-vert); color:var(--text-color)}
.Mgris		{border: none; background-color: var(var(--base-gris-C)); color:var(--text-color-i)}

.rouge		{border: none; background-color: var(--base-rouge); color:var(--text-color-i)}
.vert		{border: none; background-color: var(--base-vert); color:var(--text-color-i)}
.vert50		{border: none; background-color: var(--medium-vert); color:var(--text-color)}		
.bleu		{border: none; background-color: var(--base-bleu); color:var(--text-color-i)}
.kaki		{border: none; background-color: var(--base-kaki); color:var(--text-color-i)}
.neutre		{border: none; background-color: var(--base-neutre); color:var(--text-color-i)}
.violet		{border: none; background-color: var(--base-violet); color:var(--text-color-i)}
.bleu20		{border: none; background-color: var(--base-bleu-20)}
.orange		{border: none; background-color: var(--base-orange); color:var(--text-color-i)}
.gris		{border: none; background-color: var(--base-gris-A); color:var(--text-color-i)}
.grisD		{border: none; background-color: var(--base-gris-D); color:var(--text-color)}
.transparent{border: none; background-color: var(--base-transparent); color:var(--text-color)}
/*	Formes	
.triangle {
	position: relative;
	width: 0px;
	height: 0px;
	border-top: 17px solid var(--base-gris-A);
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	cursor:pointer;
}

.disque {
	position: relative;
	min-width: 20px;
	min-height: 20px;
	background-color:  var(--base-gris-A);
	border: none;
	border-radius: 100%;
}

.carre {
	position: relative;
	min-width: 20px;
	min-height: 20px;
	background-color:  var(--base-gris-A);
	border: none;
}
*/