@font-face {
	font-family: KlangMT;
	src: url(/fonts/KlangMT.ttf);
  }

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: rgb(208, 219, 231);
	font-family: "Arial Black", "Avenir-Black";
}

div.entete {
	max-height: 132px;
	max-width: 100%;
	height: auto;
	width: 100%;
	background-color: rgb(24, 45, 111);
	padding-bottom: 12px;
}

@media only screen and (max-width: 600px) {
	div.entete {
		padding-bottom: inherit;
	}
}

img.entete {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-height: 120px;
	max-width: 100%;
}

.entetehamburger {
	display: none;
}

@media only screen and (max-width: 600px) {
	img.entete {
		display: none;
	}
	.entetehamburger {
		display: block;
		color: white;
		font-size: 2rem;
		width: 100%;
		text-align: center;
		outline: none;
		text-decoration: none;
		background: none;
		border: none;
	}
}

.menuetcontenu {
	display: flex;
	flex-grow: 1;
}

.menugauche {
	width: 150px;
	height: auto;
	display: block;
	overflow-y: visible;
}

@media only screen and (max-width: 600px) {
	.menugauche {
		display: none;
	}
}

button {
	padding: 0;
	border: 1px solid rgb(24, 45, 111);
	cursor: pointer;
	font-size: 0.75rem;
}

.menu {
	display: block;
	background-color: rgb(208, 219, 231);
	font-family: "Arial Black", "Avenir-Black";
	font-size: 0.75rem;
	width: 150px;
}

.menu a {
	border: 1px solid black;
	background: none;
	display: block;
	text-align: left;
	outline: none;
	color: white;
	text-decoration: none;
	font-family: "Arial Black", "Avenir-Black";
	padding: 1px 8px;
	background: linear-gradient(0deg,rgba(208, 219, 231, 1) 0%, rgba(44,45,111,1) 30%, rgba(34,45,111,1) 50%, rgba(44,45,111,1) 70%, rgba(208, 219, 231, 1) 100%);
}

.menu a:hover {
	color: rgb(208, 219, 231);
	font-style: italic;
	font-family: "Arial Black", "Avenir-BlackOblique"; /* fix for iOS */
}

.menu div {
	background-color: rgb(24, 45, 111);
}

a.nobg {
	border: 0;
	background: none;
	display: block;
	text-align: center;
	outline: none;
	color: white;
	text-decoration: none;
	font-family: "Arial Black", "Avenir-Black";
	padding: 1px 8px;
	/*background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(44,45,111,1) 30%, rgba(34,45,111,1) 50%, rgba(44,45,111,1) 70%, rgba(255,255,255,1) 100%);*/
	/*background-color: rgb(24, 45, 111);*/
	background-color: rgb(208, 219, 231);
}

.sousmenu a {
	background: none;
	display: block;
	text-align: left;
	outline: none;
	color: white;
	text-decoration: none;
	white-space: nowrap;
	font-family: "Arial Black", "Avenir-Black";
	font-style: normal;
	padding: 1px 8px;
	padding-left: 12px;
	background: linear-gradient(0deg, rgba(208, 219, 231, 1) 0%, rgba(44,45,111,1) 30%, rgba(34,45,111,1) 50%, rgba(44,45,111,1) 70%, rgba(208, 219, 231, 1) 100%);
}

.sousmenu a:hover {
	color: rgb(208, 219, 231);
	font-style: italic;
	font-family: "Arial Black", "Avenir-BlackOblique"; /* fix for iOS */
}

.menuderoulant {
	border: 1px solid black;
	background: none;
	display: block;
	position: relative;
	text-align: left;
	outline: none;
	color: white;
	text-decoration: none;
	font-family: "Arial Black", "Avenir-Black";
	padding: 1px 2px 1px 8px;
	background: linear-gradient(0deg, rgba(208, 219, 231, 1) 0%, rgba(44,45,111,1) 30%, rgba(34,45,111,1) 50%, rgba(44,45,111,1) 70%, rgba(208, 219, 231, 1) 100%);
	cursor: pointer;
}

.menu div {
	color: white;
}

.menuderoulant:hover {
	color: rgb(208, 219, 231);
	font-style: italic;
	font-family: "Arial Black", "Avenir-BlackOblique"; /* fix for iOS */
}

.arrow-down {
	display: inline-block;
	width: 0; 
	height: 0; 
	border-left: 0.4em solid transparent;
	border-right: 0.4em solid transparent;
	border-top: 0.6em solid white;
	margin-right: 2px;
}

.arrow-up {
	display: inline-block;
	width: 0; 
	height: 0; 
	border-left: 0.4em solid transparent;
	border-right: 0.4em solid transparent;
	border-bottom: 0.6em solid white;
	margin-right: 2px;
}

.arrow-right {
	float: right;
	vertical-align: bottom;
	border-left: 0.6em solid white;
	border-top: 0.4em solid transparent;
	border-bottom: 0.4em solid transparent;
	margin-top: 0.3em;
}

.menuactif {
	background-color: gray;
}

.sousmenu {
	display: none;
	min-width: 150px;
	left: 149px; /* Tiens compte du border du parent */
	top: -1px; /* Tiens compte du border du parent */
	position: absolute;
}

.menuderoulant:hover .sousmenu {
	display: block;
	z-index: 1;
}

.sousmenu:hover {
	display: block;
}

/* Reste position du copyright à ajuster en petit viewport... */
.copyright {
	font-family: "Arial Narrow", "AvenirNextCondensed-Regular";
	font-size: 0.75rem;
	font-weight: bold;
	text-align: center;
}

.contenu {
	flex-grow: 1;
}

iframe {
	height: 100%;
	width: 100%;
	border: 0;
}

img.boutique {
	max-height: 30px;
}