@charset "utf-8";
/* CSS Document */
/* CSS spécifiques au aux pages utilisant un formulaire de sélection en barre 3D comme dans les Graphiques Dynamiques Evolution Mensuelle xxx*/
.CSS-Barre3D-Bleu{
	display: table;
	/*width: 1050px; --> déterminer la largeur de la div directement dans le code de la page */
	margin: 5px auto;
	padding: 0;
	background:linear-gradient(deepskyblue, dodgerblue);
	border-radius: 6px;
    border-width: 3px;
    border-style: ridge;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
	font-size: small;
}
.CSS-Barre3D-Bleu table tr td{
	display: table-cell;
	/*width: 80px; --> déterminer la largeur du td directement dans la page*/
}
.CSS-Barre3D-Bleu table tr td label{
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 3px;
    justify-content: center; 
    align-content: space-between; 
    justify-items: center; 
    align-items: center;  
    /*border-right-style: groove;*/
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
					0 -1px 0 hsl(210, 100%, 32%) inset, 
					0 -2px 0 hsl(210, 100%, 38%) inset, 
					0 -3px 0 hsl(210, 100%, 44%) inset, 
					0 -4px 0 hsl(210, 100%, 50%) inset, 
					0 -5px 0 hsl(210, 100%, 60%) inset;
    caret-color: transparent;
    color: rgba(0, 0, 0, .7); 
    padding: 8px 8px 10px 8px;
	position: relative;
    text-align: center;
    text-decoration: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
	transition: all .3s .1s;
}
.CSS-Barre3D-Bleu table tr td:first-child label{
    border-radius: 5px 0 0 5px;
}
.CSS-Barre3D-Bleu table tr td:last-child label{
    border-radius: 0 5px 5px 0;
}
.CSS-Barre3D-Bleu table tr td label:hover,
.CSS-Barre3D-Bleu table tr td label:focus{
    background: rgba(255,255,255,.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(210, 100%, 42%) inset, 
                0 -2px 0 hsl(210, 100%, 48%) inset, 
                0 -3px 0 hsl(210, 100%, 54%) inset, 
                0 -4px 0 hsl(210, 100%, 60%) inset, 
                0 -5px 0 hsl(210, 100%, 70%) inset; 
	padding: 8px 25px 10px 25px;
	transition: all .3s 0s;
}
.CSS-Barre3D-Bleu table tr td label input{
    display: none;
}
.img-checked {
	display: none;
}
.img-hover{
    display: none;
}
.CSS-Barre3D-Bleu table tr td label input:checked ~ .img-checked{
    display:inline-grid;
}
.CSS-Barre3D-Bleu table tr td label input:checked ~ .img-unchecked{
    display: none;
}
.CSS-Barre3D-Bleu table tr td label:hover input:not(:checked) ~ .img-hover{
    display: inline-grid;
}
.CSS-Barre3D-Bleu table tr td label:hover input:not(:checked) ~ .img-checked{
    display: none;
}
.CSS-Barre3D-Bleu table tr td label:hover input:not(:checked) ~ .img-unchecked{
    display: none;
}

/* Les styles ci-dessous servent à mettre un petit point bleu qui devient blanc au focus*/
/*.CSS-Barre3D-Bleu table tr td label:active{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;

}
.CSS-Barre3D-Bleu table tr td label::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    margin-left: -2px;
    width: 6px;
    height:6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
}
.CSS-Barre3D-Bleu table tr td label:hover::before,
.CSS-Barre3D-Bleu table tr td label:focus::before{
    background: white;
    box-shadow: 0 0 2px white, 
                0 -1px 0 rgba(0, 0, 0, .4);
}
.CSS-Barre3D-Bleu table tr td label input{
    display:none;
}
*/
.CSS-Barre3D-Gris{
	display: table;
	/*width: 1050px; --> déterminer la largeur de la div directement dans le code de la page */
	margin: 5px auto;
	padding: 0;
	/*background:linear-gradient(deepskyblue, dodgerblue);*/
	background:linear-gradient(lightgray, gray);
	border-radius: 6px;
    border-width: 3px;
    border-style: ridge;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
	font-size: small;
}
.CSS-Barre3D-Gris table tr td{
	display: table-cell;
	/*width: 80px; --> déterminer la largeur du td directement dans la page*/
}
.CSS-Barre3D-Gris table tr td label{
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 3px;
    justify-content: center; 
    align-content: space-between; 
    justify-items: center; 
    align-items: center;  
    /*border-right-style: groove;*/
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
					0 -1px 0 hsl(360, 0%, 32%) inset, 
					0 -2px 0 hsl(360, 0%, 38%) inset, 
					0 -3px 0 hsl(360, 0%, 44%) inset, 
					0 -4px 0 hsl(360, 0%, 50%) inset, 
					0 -5px 0 hsl(360, 0%, 60%) inset;
    caret-color: transparent;
    color: rgba(0, 0, 0, .7); 
    padding: 8px 8px 10px 8px;
	position: relative;
    text-align: center;
    text-decoration: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
	transition: all .3s .1s;
}
.CSS-Barre3D-Gris table tr td:first-child label{
    border-radius: 5px 0 0 5px;
}
.CSS-Barre3D-Gris table tr td:last-child label{
    border-radius: 0 5px 5px 0;
}
.CSS-Barre3D-Gris table tr td label:hover,
.CSS-Barre3D-Gris table tr td label:focus{
    background: rgba(255,255,255,.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(360, 0%, 42%) inset, 
                0 -2px 0 hsl(360, 0%, 48%) inset, 
                0 -3px 0 hsl(360, 0%, 54%) inset, 
                0 -4px 0 hsl(360, 0%, 60%) inset, 
                0 -5px 0 hsl(360, 0%, 70%) inset; 
	padding: 8px 25px 10px 25px;
	transition: all .3s 0s;
}
.CSS-Barre3D-Gris table tr td label input{
    display: none;
}
.img-checked {
	display: none;
}
.img-hover{
    display: none;
}
.CSS-Barre3D-Gris table tr td label input:checked ~ .img-checked{
    display:inline-grid;
}
.CSS-Barre3D-Gris table tr td label input:checked ~ .img-unchecked{
    display: none;
}
.CSS-Barre3D-Gris table tr td label:hover input:not(:checked) ~ .img-hover{
    display: inline-grid;
}
.CSS-Barre3D-Gris table tr td label:hover input:not(:checked) ~ .img-checked{
    display: none;
}
.CSS-Barre3D-Gris table tr td label:hover input:not(:checked) ~ .img-unchecked{
    display: none;
}

/* Les styles ci-dessous servent à mettre un petit point bleu qui devient blanc au focus*/
/*.CSS-Barre3D-Gris table tr td label:active{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;

}
.CSS-Barre3D-Gris table tr td label::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    margin-left: -2px;
    width: 6px;
    height:6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
}
.CSS-Barre3D-Gris table tr td label:hover::before,
.CSS-Barre3D-Gris table tr td label:focus::before{
    background: white;
    box-shadow: 0 0 2px white, 
                0 -1px 0 rgba(0, 0, 0, .4);
}
.CSS-Barre3D-Gris table tr td label input{
    display:none;
}
*/
.CSS-Barre3D-Vert{
	display: table;
	/*width: 1050px; --> déterminer la largeur de la div directement dans le code de la page */
	margin: 5px auto;
	padding: 0;
	/*background:linear-gradient(deepskyblue, dodgerblue);*/
	background:linear-gradient(lightgreen, forestgreen);
	border-radius: 6px;
    border-width: 3px;
    border-style: ridge;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
	font-size: small;
}
.CSS-Barre3D-Vert table tr td{
	display: table-cell;
	/*width: 80px; --> déterminer la largeur du td directement dans la page*/
}
.CSS-Barre3D-Vert table tr td label{
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 3px;
    justify-content: center; 
    align-content: space-between; 
    justify-items: center; 
    align-items: center;  
    /*border-right-style: groove;*/
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
					0 -1px 0 hsl(120, 100%, 32%) inset, 
					0 -2px 0 hsl(120, 100%, 38%) inset, 
					0 -3px 0 hsl(120, 100%, 44%) inset, 
					0 -4px 0 hsl(120, 100%, 50%) inset, 
					0 -5px 0 hsl(120, 100%, 60%) inset;
    caret-color: transparent;
    color: rgba(0, 0, 0, .7); 
    padding: 8px 8px 10px 8px;
	position: relative;
    text-align: center;
    text-decoration: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
	transition: all .3s .1s;
}
.CSS-Barre3D-Vert table tr td:first-child label{
    border-radius: 5px 0 0 5px;
}
.CSS-Barre3D-Vert table tr td:last-child label{
    border-radius: 0 5px 5px 0;
}
.CSS-Barre3D-Vert table tr td label:hover,
.CSS-Barre3D-Vert table tr td label:focus{
    background: rgba(255,255,255,.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(120, 100%, 42%) inset, 
                0 -2px 0 hsl(120, 100%, 48%) inset, 
                0 -3px 0 hsl(120, 100%, 54%) inset, 
                0 -4px 0 hsl(120, 100%, 60%) inset, 
                0 -5px 0 hsl(120, 100%, 70%) inset; 
	padding: 8px 25px 10px 25px;
	transition: all .3s 0s;
}
.CSS-Barre3D-Vert table tr td label input{
    display: none;
}
.img-checked {
	display: none;
}
.img-hover{
    display: none;
}
.CSS-Barre3D-Vert table tr td label input:checked ~ .img-checked{
    display:inline-grid;
}
.CSS-Barre3D-Vert table tr td label input:checked ~ .img-unchecked{
    display: none;
}
.CSS-Barre3D-Vert table tr td label:hover input:not(:checked) ~ .img-hover{
    display: inline-grid;
}
.CSS-Barre3D-Vert table tr td label:hover input:not(:checked) ~ .img-checked{
    display: none;
}
.CSS-Barre3D-Vert table tr td label:hover input:not(:checked) ~ .img-unchecked{
    display: none;
}

/* Les styles ci-dessous servent à mettre un petit point bleu qui devient blanc au focus*/
/*.CSS-Barre3D-Vert table tr td label:active{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;

}
.CSS-Barre3D-Vert table tr td label::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    margin-left: -2px;
    width: 6px;
    height:6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
}
.CSS-Barre3D-Vert table tr td label:hover::before,
.CSS-Barre3D-Vert table tr td label:focus::before{
    background: white;
    box-shadow: 0 0 2px white, 
                0 -1px 0 rgba(0, 0, 0, .4);
}
.CSS-Barre3D-Vert table tr td label input{
    display:none;
}
*/
.CSS-Barre3D-Rouge{
	display: table;
	/*width: 1050px; --> déterminer la largeur de la div directement dans le code de la page */
	margin: 5px auto;
	padding: 0;
	/*background:linear-gradient(deepskyblue, dodgerblue);*/
	background:linear-gradient(crimson, darkred);
	border-radius: 6px;
    border-width: 3px;
    border-style: ridge;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
	font-size: small;
}
.CSS-Barre3D-Rouge table tr td{
	display: table-cell;
	/*width: 80px; --> déterminer la largeur du td directement dans la page*/
}
.CSS-Barre3D-Rouge table tr td label{
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 3px;
    justify-content: center; 
    align-content: space-between; 
    justify-items: center; 
    align-items: center;  
    /*border-right-style: groove;*/
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
					0 -1px 0 hsl(0, 100%, 32%) inset, 
					0 -2px 0 hsl(0, 100%, 38%) inset, 
					0 -3px 0 hsl(0, 100%, 44%) inset, 
					0 -4px 0 hsl(0, 100%, 50%) inset, 
					0 -5px 0 hsl(0, 100%, 60%) inset;
    caret-color: transparent;
    color: rgba(0, 0, 0, .7); 
    padding: 8px 8px 10px 8px;
	position: relative;
    text-align: center;
    text-decoration: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
	transition: all .3s .1s;
}
.CSS-Barre3D-Rouge table tr td:first-child label{
    border-radius: 5px 0 0 5px;
}
.CSS-Barre3D-Rouge table tr td:last-child label{
    border-radius: 0 5px 5px 0;
}
.CSS-Barre3D-Rouge table tr td label:hover,
.CSS-Barre3D-Rouge table tr td label:focus{
    background: rgba(255,255,255,.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(0, 100%, 42%) inset, 
                0 -2px 0 hsl(0, 100%, 48%) inset, 
                0 -3px 0 hsl(0, 100%, 54%) inset, 
                0 -4px 0 hsl(0, 100%, 60%) inset, 
                0 -5px 0 hsl(0, 100%, 70%) inset; 
	padding: 8px 25px 10px 25px;
	transition: all .3s 0s;
}
.CSS-Barre3D-Rouge table tr td label input{
    display: none;
}
.img-checked {
	display: none;
}
.img-hover{
    display: none;
}
.CSS-Barre3D-Rouge table tr td label input:checked ~ .img-checked{
    display:inline-grid;
}
.CSS-Barre3D-Rouge table tr td label input:checked ~ .img-unchecked{
    display: none;
}
.CSS-Barre3D-Rouge table tr td label:hover input:not(:checked) ~ .img-hover{
    display: inline-grid;
}
.CSS-Barre3D-Rouge table tr td label:hover input:not(:checked) ~ .img-checked{
    display: none;
}
.CSS-Barre3D-Rouge table tr td label:hover input:not(:checked) ~ .img-unchecked{
    display: none;
}

/* Les styles ci-dessous servent à mettre un petit point bleu qui devient blanc au focus*/
/*.CSS-Barre3D-Rouge table tr td label:active{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;

}
.CSS-Barre3D-Rouge table tr td label::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    margin-left: -2px;
    width: 6px;
    height:6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
}
.CSS-Barre3D-Rouge table tr td label:hover::before,
.CSS-Barre3D-Rouge table tr td label:focus::before{
    background: white;
    box-shadow: 0 0 2px white, 
                0 -1px 0 rgba(0, 0, 0, .4);
}
.CSS-Barre3D-Rouge table tr td label input{
    display:none;
}
*/

/* Fin des CSS spécifiques au aux pages utilisant un formulaire de sélection en barre 3D comme dans les Graphiques Dynamiques Evolution Mensuelle xxx*/