/************************************************
*									 			*
*Document CSS -- NEX LIME 2 - Screen*
*   	*
************************************************/

/******************
* Polices *
******************/
@font-face {
	font-family:'Aller';
	src: url('fonts/Aller_Rg.eot?#iefix')  format('embedded-opentype'),
		url('fonts/Aller_Rg.woff')  format('woff'),
		url('fonts/Aller_Rg.woff2')  format('woff2'),
		url('fonts/Aller_Rg.ttf')  format('truetype');
	font-weight:normal;
	font-variant:normal;
}
@font-face {
	font-family:'Aller';
	src: url('fonts/Aller_Bd.eot?#iefix')  format('embedded-opentype'),
		url('fonts/Aller_Bd.woff')  format('woff'),
		url('fonts/Aller_Bd.woff2')  format('woff2'),
		url('fonts/Aller_Bd.ttf')  format('truetype');
	font-weight:bold;
	font-variant:normal;
}

/************
* Variables *
************/

:root {
	--bg-body:#dedede;
	--bg-principal:#fff;
	--bg-secondaire:#dedede;
	--bg-ternaire:#eaeaea;
	--bg-contraste:#333;
	--bg-inverse:#000;
	--texte-principal:#000;
	--texte-contraste:#fff;
	--texte-inverse:#fff;
}

/* Pour thème sombre */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-body:#111;
		--bg-principal:#333;
		--bg-secondaire:#111;
		--bg-ternaire:#222;
		--bg-contraste:#ccc;
		--bg-inverse:#000;
		--texte-principal:#ccc;
		--texte-contraste:#000;
		--texte-inverse:#ccc;	
	}
}

/*********
* Titres *
*********/
h1 {
	font-size:1.2em;
	font-weight:bold;
}
h2 {
	font-size:1em;
	font-weight:bold;
}

/********************
* Balises générales *
********************/
a, a:hover, a:active, a:visited {
	background-color:transparent;
	color:var(--texte-principal);
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}

.hs { display:none; }

/************************
* Conteneurs principaux *
************************/

body {
	display:flex;
	flex-flow:column nowrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	background-color:var(--bg-body);
	color:var(--texte-principal);
	font-family:Aller, sans-serif;
	font-size:1em;
}

header, footer {
	flex:0 0 auto;
	margin:0;
	padding:0.4em;
	background-color:var(--bg-secondaire);
	color:var(--texte-principal);
}
footer p { margin:0.2em; }

main {
	flex:1 1 auto;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:flex-start;
	height:100%;
}

figcaption {
	font-style:italic;
	text-align:center;
}

/*************************
* Conteneurs secondaires *
*************************/

#accueil {
	flex:1 1 70%;
	display:block;
	order:2;
	margin:0;
	padding:1em;
	background-color:var(--bg-principal);
	color:var(--texte-principal);
}
#accueil header {
	margin:0;
	padding:0.4em;
	background-color:var(--bg-principal);
	color:var(--texte-principal);
	text-align:center;
	font-size:2em;
}
#accueil figure {
	display:block;
	margin:1em auto 3em auto;
	width:15%;
}
#accueil figure svg {
	fill:var(--texte-principal);
	width:100%;
	height:100%;
}

#cycles {
	flex:0 0 20%;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:flex-start;
	order:1;
	margin:0;
	padding:0.4em;
	background-color:var(--bg-ternaire);
	color:var(--texte-principal);
	font-size:1em;
}
#cycles header {
	flex:1 0 100%;
	margin:0;
	padding:0;
	background-color:var(--bg-ternaire);
	color:var(--texte-principal);
	text-align:center;
}
#cycles figure {
	display:block;
	margin:0.4em auto;
	text-align:center;
}

#voitures {
	order:3;
}


#comptages {
	flex:1 1 70%;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:flex-start;
	order:2;
	margin:0;
	padding:0.4em 0;
	background-color:var(--bg-principal);
	color:var(--texte-principal);
}
#comptages header {
	flex:1 1 100%;
	order:2;
	margin:0;
	padding:0.4em;
	background-color:var(--bg-ternaire);
	color:var(--texte-principal);
	text-align:center;
}
#comptages figure {
	flex:1 0 auto;
	order:1;
	margin:1em 0.4em;
	text-align:center;
}
#comptages table {
	flex:0 0 auto;
	order:3;
	margin:1em auto;
	font-size:0.8em;
	text-align:center;
}
#comptages table thead {
	background-color:var(--bg-ternaire);
	color:var(--texte-principal);
}
#comptages table tbody th {
	padding:0;
}

#bandeau {
	z-index:70;
	display:block;
	position:absolute;
	top:0; right:0;
	margin:0;
	padding:0.2em 0.6em;
	background-color:var(--bg-inverse);
	color:var(--texte-inverse);
	font-family:'Aller',sans-serif;
	border:1px solid #000;
	border-bottom-left-radius:0.4em;
	
}
#bandeau p {
	margin:0;
	padding:0;
}

/**********************************
* Différents éléments par couleur *
**********************************/
.brique {
	margin:0.4em 0;
	padding:0.2em 0.6em;
	background-color:var(--bg-secondaire);
	color:var(--texte-principal);
	font-size:0.8em;
	border-radius:1em;
	min-width:320px;
}

.brique summary {
	margin:0.6em;
	font-weight:normal;
}
.brique p {
	margin-top:1em;
	padding:0.4em;
}
.bmapic {
	width:320px;
	height:320px;
}
.ptcpic {
	width:320px;
	height:180px;
}

.brouge {
	background-color:#f00;
	color:#fff;
}
.bacier {
	background-color:#4682b4;
	color:#fff;
}
.bviolet {
	background-color:#8400a3;
	color:#fff;
}
.borange {
	background-color:#ff9200;
	color:#000;
}

/***********
* Tableaux *
************/

table {
	display:table;
	border-collapse:collapse;
	border:1px solid #000;
}

tfoot {
	font-weight:bold;
}

th,td {
	display:table-cell;
	padding:0.2em 1em;
	border:1px solid #000;
}

td {
	text-align:right;
}

td:first-child {
	text-align:left;
}

/**************
* Formulaires *
**************/

form {
	display:block;
	margin-bottom:0.6em;
}

input[type="text"] {

}


optgroup {
	font-style:normal;
}

.selock { display:block; }
.seline { display:inline; }

form p, form input {
	margin:0 1em;
}

/************************
* Spécifique météo/atmo *
************************/

.atmo {
	order:4;
	flex:0 0 auto;
	margin:0;
	font-family:"Aller", sans-serif;
	font-size:0.8em;
}
.atmo_indice {
	display:inline-block;
	padding:0 0.4em;
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
	border-radius:0.4em;
}
.atmo_indice_1 {
	background-color:#50f0e6;
	color:#000;
}
.atmo_indice_2 {
	background-color:#50ccaa;
	color:#000;
}
.atmo_indice_3 {
	background-color:#f0e641;
	color:#000;
}
.atmo_indice_4 {
	background-color:#ff5050;
	color:#fff;
}
.atmo_indice_5 {
	background-color:#960032;
	color:#fff;
}
.atmo_indice_6 {
	background-color:#7d2181;
	color:#fff;
}

.ecowatt {
	order:5;
	flex:0 0 auto;
	margin:0;
	font-family:"Aller", sans-serif;
	font-size:0.8em;
}
.ecowatt img {
	width:20px; height:20px;
	vertical-align:-0.3em;
}