@font-face {
  font-family: "Barlow";
  src:
    local("Barlow"),
    url("../fonts/Barlow-Regular.otf") format("opentype");
}

html{
	font-size: .875rem;
}

body{
	font-family: Barlow, Arial, Helvetica, sans-serif;
	color: #17233b;
	margin: 0;
	font-size: 1em;
}

body.version-info #enTete,
body.version-info #cartouche{
  display: none;
}

.section{
	margin: 1em;
}

.espacement{
  margin-top: 2.2em;
}

a.btn{
  display: inline-block;
  position: relative;
  padding: 1em 1.4em;
  margin: .5em 0;
  background-color: #127491;
  border-radius: .2em;
  text-decoration: none;
  color: #fff;
  font-size: 1em;
  transition: background .2s ease-in-out;
  border-radius: 2.1em;
  font-weight: 700;
}
a.btn:hover{
	text-decoration: none;
	background-color: #084f64;
}

a.ndbp{
  vertical-align: text-top;
  position: relative;
  font-size: 0.8em;
  top: -5px;
  text-decoration: none;
}

/*
 * Section d'en-tête
 */

#enTete{
  margin-top: 1em;
}

#pictoService{
	width: 45px;
	height: 45px;
}

#pictoService img{
	width: 100%;
	height: 100%;
  fill: #127491;
  filter: invert(32%) sepia(100%) saturate(393%) hue-rotate(146deg) brightness(97%) contrast(95%);
}

#enTete h1{
	margin: .3em 0 0;
	font-size: 2em;
}

/*
 * Cartouche (fiche détaillée synthétique)
 */
#cartouche{
  background-color: #f1f0f5;
  border-radius: .5em;
  padding: 1em;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#cartouche .infos{
  margin-right: 1em;
  flex-grow: 1;
}

#cartouche .picto img{
	width: 45px;
	height: 45px;
}

#cartouche h1,
#cartouche h2,
#cartouche h3,
#cartouche h4,
#cartouche h5,
#cartouche h6{
  margin: .4em 0;
  font-weight: 500;
}

#cartouche h1:first-child,
#cartouche h2:first-child,
#cartouche h3:first-child,
#cartouche h4:first-child,
#cartouche h5:first-child,
#cartouche h6:first-child{
  margin-top: 0;
}

/*
 * Options d'affichage
 */
#menuOptions {
	display: flex;
	justify-content: center;
}

#menuOptions .boutonSwitchType{
  margin: .8em 0;
}

#menuOptions .boutonSwitchType a{
	display: block;
	padding: .2em .8em;
  line-height: 1.8em;
	color: #17233b;
  text-decoration: none;
  border: solid 1px #127491;
	border-right: none;
}

#menuOptions .boutonSwitchType:first-child a{
  border-radius: 1.8em 0 0 1.8em;
}

#menuOptions .boutonSwitchType:last-child a{
  border-radius: 0 1.8em 1.8em 0;
	border-right: solid 1px #127491;
}
	
.atmo .switchAtmo a,
.pollens .switchPollens a{
	background-color: #127491 !important;
	color: #fff !important;
}

/*
 * Menu sélecteur de dates
 */

#selDate ul{
	list-style: none outside none;
	padding-left: 0;
	margin: 0;
}

#selDate li{
	font-size: 1.2em;
	background-color: #f6f6f8;
	text-align: center;
	color: #17233b;
	padding: .8em 0;
}

.ariaOnly{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

#selDate .lSPrev, #selDate .lSNext{
	background-image: none;
	font-size: 2.4em;
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
  line-height: .8em;
	color: #17233b;
	opacity: 1;
	text-align: center;
  text-decoration: none;
}

/*
 * Graphique évolution
 */
.chart-container {
  position: relative;
  /*height: 300px;*/
  background: #fff;
  padding: 10px;
}

.chart-svg {
  width: 100%;
  height: 100%;
}

.point {
  /*fill: #dddddd;*/
  stroke: #fff;
  stroke-width: 3px;
}

.chart-container .etiq-abs {
  font-size: 1.9em;
  text-anchor: middle;
  fill: #333;
}

.chart-infobulle{
  position: absolute;
  padding: 8px 12px;
  /*
  background: #333;
  color: #fff;
  */
  background: #fff;
  box-shadow: 0px 0px 12px #888;
  font-size: 1.1em;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  display: none;
}
.chart-infobulle.today{
  display: block;
}

.chart-infobulle::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
}

.chart-infobulle.top::after {
  bottom: -12px;
  border-top-color: #fff;
}

.chart-infobulle.bottom::after {
  top: -12px;
  border-bottom-color: #fff;
}

/*
 * Section d'affichage du tableau des sous-indices
 */

.listeContenus h3{
  /*margin-top: 2em;*/
}

.listeContenus ul.sous-indices{
	list-style: none outside none;
	padding-left: 0;
	margin: 0;
}

.listeContenus ul.sous-indices > li{
  font-size: 1.3em;
  padding: .5em 0;
  border-bottom: 1px #b4bac6 solid;
}

#indices ul.sous-indices > li:first-child{
  font-weight: 700;
}

.grilleIndice{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.grilleIndice .label{
  margin-right: .5em;
  flex-grow: 1;
}

.grilleIndice .ind-libelle{
  margin-right: .5em;
	/*width: 1.6em;*/
}

.grilleIndice .ind-puce{
  width: 1em;
  height: 1em;
  line-height: 1em;
  border-radius: .5em;
  background-color: #DDDDDD;
}

.grilleIndice .ind-puce-0{background-color: #DDDDDD;}
.grilleIndice .ind-puce-1{background-color: #50F0E6;}
.grilleIndice .ind-puce-2{background-color: #50CCAA;}
.grilleIndice .ind-puce-3{background-color: #F0E641;}
.grilleIndice .ind-puce-4{background-color: #FF5050;}
.grilleIndice .ind-puce-5{background-color: #960032;}
.grilleIndice .ind-puce-6{background-color: #872181;}
.grilleIndice .ind-puce-7{background-color: #888888;}

.puceDetails{
  width: 1.3em;
  height: 1.3em;
}

.puceDetails a{
  display: flex;
  align-items: center;
}

.puceDetails a img{
  width: 1.3em;
  height: 1.3em;
  aspect-ratio: 1/1;
  fill: #127491;
  filter: invert(10%) sepia(32%) saturate(1620%) hue-rotate(187deg) brightness(95%) contrast(91%);
}

.listeContenus li li{
	font-size: .9em;
}

.listeContenus li .allergDetail{
	font-size: .9em;
}

p.allergDetail{
  margin: .3em 0;
}

.allerg{
  display: none;
}

/*
 * Section mentions de bas de page
 */

ul.mentions{
	font-size: 90%;
	list-style-type: none;
	margin: 0;
  padding: 0;
	list-style-position: outside;
}

ul.mentions li{
	display: flex;
}

ul.mentions li::before{
	content: "\26A0";
	margin-right: 0.4em;
}

#blocLegendes .legende{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#blocLegendes .siqoPict{
  margin-right: .5em;
	width: 2em;
  flew-grow: 1;
  flex-basis: calc(1.6em);
}

#blocLegendes .siqoPict img{
	width: 2em;
}

#blocLegendes .siqoMention{
  flex-basis: calc(100% - 2.5em);
  line-height: 2em;
}

/*
 * Section labels de restorants et collectivités
 */

ul.labelResto{
	font-size: 90%;
	list-style-type: none;
	margin: 0;
  padding: 0;
	list-style-position: outside;
}

ul.labelResto li{
	display: flex;
  align-items: center;
}

ul.labelResto img{
  width: 4em;
  height: 4em;
  margin: .2em 1.2em .2em 0;
}

/*
 * Section lien vers les allergènes compléments culinaires
 */


#boutonAction{
	text-align: center;
}

/*
 * Section pied de page
 */

#mentionPied p{
	font-size: .7em;
	text-align: center;
}

@media (max-width:340px) {
	#selDate li{
		font-size: .8em;
	}
}

@media (min-width:600px) {
	body{
		font-size: 1.1em;
	}
	#pictoService{
		width: 10em;
		height: 10em;
		margin: 0 auto 3em;
		border-width: .15em;
		border-radius: .5em;
	}
}

@media (min-width:800px) {
	body{
		font-size: 1.2em;
	}
	
}

@media (min-width:860px) {
	#enTete{
		background-size: 170% auto;
	}
	#enTete h3{
		padding-bottom: .3em;
	}
	.listeContenus, #boutonAction, #mentionPied, .section{
		width: 700px;
		margin-right: auto;
		margin-left: auto;
	}
	#enTete h3{
		font-size: 1.2em;
	}
}