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

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;
}

/*
 * 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;
}
	
.maintenant .switchMaintenant a,
.calendrier .switchCalendrier 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;
}

/*
 * Tableaux
 */

table{
	border-collapse : collapse;
}

table, th, tr, td{
	/*border: solid 1px #17233b;*/
}

table.grilleMaree{
	width: 100%;
}

table.grilleMaree caption{
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;  
  color: #777;
  font-size: 1.2em;
  line-height: 1.2em;
  margin: 1em 0;
}

table.grilleMaree th,
table.grilleMaree tr td{
  padding: .6em 0;
  line-height: 1.8em;
}

table.grilleMaree tr:nth-child(even) td{
	padding-top: 0;
	border-bottom: solid 1px #ddd;
}

table.grilleMaree tr:nth-child(odd) td{
	padding-bottom: 0;
}

table.grilleMaree td{
	text-align: center;
	padding: .1em;
}

#calendrier table.grilleMaree{
  background-color: #f6f6f8;
}

/*
 * Section d'affichage du menu
 */

.listeContenus h3{
	text-transform: uppercase;
	color: #777;
}

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

.listeContenus ul.menu > li{
	margin-top: .3em;
}

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

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

#calendrier .jour{
  border-bottom: solid 1px #ddd;
  margin: 0;
  /*padding: .8em 0;*/
}

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

.enTeteMaree h3{
  margin: .8em .5em .8em 0;
  flex-grow: 1;
  cursor: pointer;
}

.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%);
}

/*
#calendrier h3 .taquet{
  display: inline-block;
  margin-left: auto;
  transition: transform .8s;
}

#calendrier h3.ouvert .taquet{
  transform: rotate(-90deg);
}
*/

/* Indicateurs de marées */



span.maree{
	display: inline-block;
	background-color: #299bd2;
	padding: .2em;
	width: 2em;
  text-align: center;
	border-radius: .2em;
	color: #fff;
  transition: opacity .8s;
  line-height: 1.2em;
}

.enTeteMaree span.maree{
  margin-right: 10%;
}

span.maree-grande{
	background-color: #df7b26;
}

span.maree-tres-grande{
	background-color: #e81949;
}

h3.ouvert span.maree{
  opacity: 0;
}

#calendrier span.maree{
  font-weight: 500;
}

#calendrier h3 span.maree{
  font-size: .9em;
}

/* Mentions labels et origines */
.listeContenus li span.logoMent{
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-left: .3em;
	background-repeat: no-repeat;
	background-size: 1.2em auto;
}

/*
 * 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 ul{
  list-style-type: none;
	margin: 0;
  padding: 0;
	list-style-position: outside;	margin: 0;
  padding: 0;
	list-style-position: outside;
}

#blocLegendes ul > li{
  
}

/*
 * 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;
	}
}