/****************************************************
					MISE EN PAGE
****************************************************/

.grid { 
	display: grid;
	clear: both;
	overflow: hidden;
	grid-column-gap: 2rem;
}
.grid_2		 { grid-template-columns: repeat(2, 1fr); }
.grid_2_auto { grid-template-columns: repeat(2, auto); }
.grid_3		 { grid-template-columns: repeat(3, 1fr); }
.grid_3_auto { grid-template-columns: repeat(3, auto); }
.grid_4		 { grid-template-columns: repeat(4, 1fr); }
.container {
	margin: 0 auto;
	width: var(--width-max);
	max-width: 92%;
}

/*	HEADER
----------------------------------------------------*/
header {
	display: grid; 
	grid-template-columns: 1fr 1fr 1fr; 
	grid-template-rows: 200px; 
	gap: 0px 20px; 
	grid-template-areas: 
	"map_button logo lang_selector"; 
	width: 100%;
	height: var(--height-header);
	align-items: center;
	justify-content: center;
}
#map_button { grid-area: map_button; /*display: block; width: 100%; height: 100%; align-self: center; justify-self: center;*/ }
#logo { grid-area: logo; }
#lang_selector { grid-area: lang_selector; }

header #logo {
	font-size: 1.5rem;
}
header #logo img {
	margin: 0 auto;
    max-width: 100%;
    max-height: var(--height-header);
}

#lang_selector ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#lang_selector ul li {
	display: inline-block;
	margin: 0;
	margin-right: 0.5rem;
}
#lang_selector ul li:last-child {
	border-right: none;
	margin-right: 0;
}
#lang_selector ul li a {
	display: block;
	padding: 0 0.25rem;
	border-radius: 3px;
	text-decoration: none;
	color: #a99;
	background-color: var(--color-red-dark);
}
#lang_selector ul li a.active, #lang_selector ul li a:hover {
	color: white;
}

#map_button, #lang_selector { 
}


/*	MAIN
----------------------------------------------------*/
main {
	padding: 4rem 0 2rem;
}
main h1 {
	text-align: center;
}
main p, main h2, main h3, main h4, main ul {
	margin: 0 auto 2rem;
	max-width: var(--width-max-text);
}
main img {
}

p.podcast_nav {
	display: inline-block;
	background-color: var(--color-blue-dark);
	color: var(--color-sand);
	border-radius: 2rem;
	padding: 0.4rem 1rem 0.6rem;
}
p.podcast_nav a {
	text-decoration: none;
	color: var(--color-sand);
}

audio {
	display: block;
	margin: 0 auto 3rem;
	border: 10px solid var(--color-red-light);
	border-radius: 5px;
	background-color: white;
}

div.photos {
	text-align: center;
}
div.photos img {
	width: auto;
	margin: 0 auto 2rem;
}


/*	MAP
----------------------------------------------------*/
div#map_container {
	margin: 0 auto 3rem;
	padding: 0;
	max-width: 1100px;
	aspect-ration: 11 / 18;
	outline: 10px solid var(--color-sand-dark);
	background-color: var(--color-sand-light);
}
div#map_container svg {
}


/*	IMAGE MAP
----------------------------------------------------*/
.image-mapper-shape {
    fill: rgba(0, 0, 0, 0);
}
g:hover .image-mapper-shape {
    stroke: #c02;
    stroke-width: 8px;
    opacity: 100%;
}


/*	FOOTER
----------------------------------------------------*/
footer {
	padding: 4rem 1rem;
	background-color: white;
	color: var(--color-blue);
}
footer div.container {
	max-width: 640px;
}
footer p {
	/*text-wrap: balance;*/
	text-align: left;
}
footer ul {
	list-style-type: '➺  ';
	list-style-position: outside;
	text-align: left;
	padding-left: 2rem;
}
footer ul li {
	margin-bottom: 1rem;
}

.grid_logos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
    gap: 20px;
	justify-content: center;
}



/*	DIVERS
----------------------------------------------------*/

/*	back to top	*/

a#backtotop {
	position: fixed;
	right: 10px;
	bottom: -50px;
	width: 70px;
	height: 40px;
	overflow: hidden; 
	text-indent: -999px; 
	background: url(../img/totop.png) no-repeat left top; 
	background-color: none; 
	text-decoration: none;
	transition: all .2s ease-in-out;
}
a#backtotop:hover {
	height: 50px;
	background-position: 0 0;
}
a#backtotop:active, a#backtotop:focus { outline: none; }