/*//////////////////////////////////////////////////////////////////
//																						//
//						SYNTAX WEB — COLLECTION MODULES						//
//									version 3										//
//						FEUILLE DE STYLE PRINCIPALE							//
//																						//
//////////////////////////////////////////////////////////////////*/


/*********
* Titres *
*********/
h1 {
	font-size:1.6em;
	font-weight:bold;
}
h2 {
	font-size:1.4em;
	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; }

sup { font-size:0.6em;}

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

body {
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	font-family:Inter, sans-serif;
	font-size:1em;
	min-height:100vh;
}

header {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:center;
	align-content:stretch;
	margin:0;
	padding:1em;
	background-color:var(--fond-entete);
	color:var(--texte-entete);
  font-feature-settings:"cv10" 1;
	width:100%;
}
header p { margin:0 auto 1em auto;}

header h1 {
	flex-grow:2;
	flex-shrink:2;
	flex-basis:0;
}

#langues {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:0;
	display:flex;
	flex-wrap:nowrap;
	justify-content:flex-end;
	align-items:center;
	align-content:stretch;
	list-style-type:none;
	margin:0 0 0 auto;
	padding:0;
}

#langues li {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	list-style-type:none;
	display:block;
	margin:0;
	padding:0.2rem;
	border-radius:0.2rem;
}

#langues img {
	width:16px;
	height:auto;
	border-radius:0.2rem;
}

#langues .langue {
	background-color:var(--fond-entete-selection);
}

main {
	order:2;
	flex-grow:2;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	height:100%;
}

footer {
	order:3;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:center;
	align-content:center;
	margin:0 0;
	padding:0.2em;
	background-color:var(--fond-entete);
	color:var(--texte-entete);
	text-align:left;
	width:100%;
}
footer p {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	margin:0.4rem auto 0.4rem 0.4rem;
}
footer ul {
	flex:0 0 10%;
	display:block;
}
footer ul li { list-style-type:none; }
footer a, footer a:active, footer a:visited, footer a:hover {
	background-color:var(--fond-entete);
	color:var(--texte-entete);
	text-decoration:underline;
}

/****************
* Corps du site *
*****************/


main h2 {
	display:none;
}

/*************
* Partie GEO *
**************/

#geo {
	order:2;
	flex-grow:0;
	flex-shrink:1;
	flex-basis:auto;
	display:block;
	margin:1rem;
	padding:1rem;
	background-color:var(--fond-entete);
	color:var(--texte-entete);
	border-radius:1rem;
	width:100%;
}

#geo h3 {
	font-size:1.6rem;
}

#geo dl {
	display:block;
}

#geo dt {
	margin:1rem 0 0;
	font-weight:300;
}
#geo dd {
	margin:0.2rem 0 0 3rem;
	font-weight:600;
}

/*******************
* Partie METEOATMO *
********************/

#meteoatmo {
	order:1;
	flex-grow:1;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:stretch;
	align-content:stretch;
	margin:1rem;
	padding:0;
	border-radius:1rem;
}

#meteo {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	background-color:var(--meteo-fond-principal);
	color:var(--meteo-texte-principal);
	border-top-left-radius:1rem;
	border-top-right-radius:1rem;
	width:100%;
}

#meteo_illustration {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-around;
	align-items:center;
	align-content:center;
	margin:0;
	padding:0.4rem;
	background-color:var(--meteo-fond-contraste);
	color:var(--meteo-texte-contraste);
	width:100%;
	border-top-left-radius:1rem;
	border-top-right-radius:1rem;
}

#meteo_details {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:center;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:1rem 0.4rem;
}

#meteo picture {
	display:block;
}

#meteo_illustration picture img {
	display:inline-block;
	width:96px;
	height:auto;
	vertical-align:middle;
}

#meteo #temperature {
	font-size:2.4rem;
	font-weight:bold;
}

#meteo dl {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:center;
	align-content:center;
	list-style-type:none;
	margin:0.4rem;
	background-color:var(--meteo-fond-tuile);
	color:var(--meteo-texte-tuile);
	border-radius:0.4rem;
	min-width:120px;
}

#meteo dt {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	padding:1rem 0.6rem 1rem 0;
	color:var(--meteo-texte-fin);
	text-align:right;
	border-right:1px solid var(--meteo-bord-fin);
	width:40%;
}

#meteo dd {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:center;
	align-content:center;
	margin:0;
	padding:0;
	font-size:1.2rem;
	font-weight:550;
}

#meteo dd:last-child {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:0 auto;
	font-size:1.2rem;
	text-align:center;
}

#uv dd:last-child {
	padding:0.2rem 0.4rem;
	border-radius:0.2rem;
}

#meteo dd picture {
	display:block;
	margin:0 1.2rem;
	width:36px;
}
#meteo dd picture img {
	display:inline-block;
	width:36px;
	height:auto;
	vertical-align:middle;
}

#vent dd:not(:last-child) {
	margin:0 1.2rem;
	padding:0;
	font-size:2.2rem;
	width:36px;
}

.uv_indice_1 {
	background-color:var(--uv-1-fond);
	color:var(--uv-1-texte);
}
.uv_indice_2 {
	background-color:var(--uv-2-fond);
	color:var(--uv-2-texte);
}
.uv_indice_3 {
	background-color:var(--uv-3-fond);
	color:var(--uv-3-texte);
}
.uv_indice_4 {
	background-color:var(--uv-4-fond);
	color:var(--uv-4-texte);
}
.uv_indice_5 {
	background-color:var(--uv-5-fond);
	color:var(--uv-5-texte);
}
.uv_indice_6 {
	background-color:var(--uv-6-fond);
	color:var(--uv-6-texte);
}
.uv_indice_7 {
	background-color:var(--uv-7-fond);
	color:var(--uv-7-texte);
}
.uv_indice_8 {
	background-color:var(--uv-8-fond);
	color:var(--uv-8-texte);
}
.uv_indice_9 {
	background-color:var(--uv-9-fond);
	color:var(--uv-9-texte);
}
.uv_indice_10 {
	background-color:var(--uv-10-fond);
	color:var(--uv-10-texte);
}
.uv_indice_11 {
	background-color:var(--uv-11-fond);
	color:var(--uv-11-texte);
}

.unite {
	font-weight:350;
}

#atmo {
	order:2;
	flex-grow:1;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	align-content:center;
	margin:0;
	padding:0 1rem;
	width:100%;
	border-bottom-left-radius:1rem;
	border-bottom-right-radius:1rem;
}

#atmo_indice {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:1rem auto;
	padding:0.2rem 1.2rem;
	font-size:2rem;
	font-weight:bold;
	border-radius:0.4em;
	border-width:1px;
	border-style:solid;
}

.atmo_indice_0 {
	background-color:var(--atmo-0-fond);
	color:var(--atmo-0-texte);
	border-color:var(--atmo-0-texte);
}
.atmo_indice_1 {
	background-color:var(--atmo-1-fond);
	color:var(--atmo-1-texte);
	border-color:var(--atmo-1-texte);
}
.atmo_indice_2 {
	background-color:var(--atmo-2-fond);
	color:var(--atmo-2-texte);
	border-color:var(--atmo-2-texte);
}
.atmo_indice_3 {
	background-color:var(--atmo-3-fond);
	color:var(--atmo-3-texte);
	border-color:var(--atmo-3-texte);
}
.atmo_indice_4 {
	background-color:var(--atmo-4-fond);
	color:var(--atmo-4-texte);
	border-color:var(--atmo-4-texte);
}
.atmo_indice_5 {
	background-color:var(--atmo-5-fond);
	color:var(--atmo-5-texte);
	border-color:var(--atmo-5-texte);
}
.atmo_indice_6 {
	background-color:var(--atmo-6-fond);
	color:var(--atmo-6-texte);
	border-color:var(--atmo-6-texte);
}

#atmo_qualite {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:0 auto;
	padding:0;
	font-size:1.2rem;
	font-weight:normal;
	white-space:break-spaces;
	text-align:center;
	width:35%;
}

#atmo_titre {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:0 auto;
	padding:0;
	font-size:1rem;
	font-weight:normal;
	width:35%;
}
#atmo_titre span {
	display:block;
	font-variant-caps:small-caps;
}


/**************************************
* Formulaire de changement de commune *
***************************************/

#credits {
	order:2;
}

#changer {
	order:1;
	display:block;
	margin:0.4rem auto;
}
#changer input[type=text] {
	text-align:center;
}


/**********************************/
/* Messages erreur et information */
/**********************************/

#messages {
	flex-grow:1;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:0.2rem auto;
	padding:0;
	width:100%;
}
#messages p {
	margin:0 auto 1rem auto;
	padding:0.5rem;
	border-radius:0.6rem;
	text-align:center;
	width:100%;
}

#messages .erreur {
	background-color:var(--fond-erreur);
	color:var(--texte-erreur);
}
#messages .info {
	background-color:var(--fond-info);
	color:var(--texte-info);
}