@charset "UTF-8";

/* - - - - - DEVELOPMENT - - - - - */

/*
PhP calculations
100/12 = 8.3333333333333
100/6 = 16.666666666667
100/3 = 33.333333333333
100-(100/3) = 66.666666666667
100-(100/6) = 83.333333333333
*/

/* - - - z-index map */

/*

.user, .edit { z-index: 5; }

.panorama { z-index: 4; }

header { z-index: 3; }

section > .video iframe, article > .video iframe { z-index: 2; }
figure img (become visible) { z-index: 2; }

#grid { z-index: 1; }
figure .ghost, .galerie figure img { z-index: 1; }

*/ 

/* - - - borders */

/* * { box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset; } */

/* - - - colors */

/*
body { color: red; }
* { border-color: blue !important; }
h1, h2 { color: lime; }
*/

/* grid */

#grid {
	display: none;
	color: red; opacity: 0.5; pointer-events: none; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; padding: 0 0.5em; box-sizing: border-box;
}
#grid div { width: 16.66%; height: 100%; float: left; border-left: 1px solid; box-sizing: border-box; }
#grid div:last-child { border-right: 1px solid; }

/* - - - - - PROGRESS BAR - - - - - */

.pace {}

.pace-inactive { display: none; }

.pace .pace-progress {
	position: fixed;
	top: 0;
	right: 100%;
	width: 100%;
	color: DodgerBlue;
	border-top: 2px solid;
}


/* - - - - - FONTS - - - - - */

/* Rubik LP */

@font-face {
    font-family: "Rubik LP";
    src: url("../fonts/rubik-lp.woff2") format("woff2"),
         url("../fonts/rubik-lp.woff") format("woff");
    font-weight: 100;
    font-style: normal;
}

/* - - - - - GENERAL - - - - - */

html {
	color: black;
	background-color: white;
	font-size: 90%;
	-webkit-text-size-adjust: 100%;
}
	@media screen and (min-width: 1281px) {
		html { font-size: 100%; }
	}

body {
	margin: 1rem auto;
	padding: 0 0.5rem;
	max-width: 1920px;
	font-family: "Rubik", helvetica, arial, sans-serif; font-size: 1rem; line-height: 1.45em; letter-spacing: 0.25px;
}

h1, h2, h3, h4, h5, h6, p, section, article, figure { margin: 1rem 0; font-weight: inherit; }

img {
	display: block;
	max-width: 100%;
}

a {
	color: DodgerBlue;
	text-decoration: inherit;
}
a:hover { color: initial; }

:focus {
	outline: none;
}

* { box-sizing: border-box; }

span.no-break { white-space: nowrap; }

strong, b {
	font-weight: inherit;
	text-shadow: 0em 0em 1.5em DodgerBlue;
	transition: text-shadow 5s;
}

/* living shadows */

.shadow-1 { text-shadow: -0.1em   .2em  .5em DodgerBlue; }
.shadow-2 { text-shadow:    0em -0.2em   1em DodgerBlue; }
.shadow-3 { text-shadow:   .1em -0.1em   2em DodgerBlue; }
.shadow-4 { text-shadow:   .2em    0em .25em DodgerBlue; }
.shadow-5 { text-shadow: -0.2em   .1em 1.5em DodgerBlue; }

/* - - - - - HEADER - - - - - */

/* header reset */
header #menu ul, header #menu ol {
	list-style: none;
	padding: 0;
	margin: 0;
}
header h1, header h2, header h3 { margin: 0; }

header {
	position: fixed;
	top: 1rem;
	left: 0;
	width: 100%;
	padding: 0 0.5rem 4rem 0.5em;
	z-index: 3;
	pointer-events: none;
}

header:hover, header.visible {
	opacity: 1 !important;
	filter: none !important;
	-webkit-filter: none !important;
}

header h1, header .hamburger, header #menu {
	pointer-events: auto;
}

header h1 {
	font-family: "Rubik LP", "Rubik", helvetica, arial, sans-serif; font-size: 5rem; font-weight: 100; line-height: 0.85em; text-transform: uppercase;
	margin-left: 0.5rem;
	float: left;
	position: relative;
	z-index: 1;
}
header h1 img { height: 5rem;}
	header a { color: black; }
	header a:hover { color: DodgerBlue; }

/* hamburger (div.hamburger is added after header h1 with jQuery) */

header .hamburger {
	position: relative;
	float: right;
	width: 16.66%;
	border-top: 2px solid;
	cursor: pointer;
}
header .hamburger:after,
header .hamburger:before {
	content: "";
	display: block;
	margin-top: 2rem;
	border-top: 2px solid;
}
header .hamburger:hover,
header .hamburger:hover:before,
header .hamburger:hover:after {
	border-color: DodgerBlue;
}
header .hamburger span {
	font-family: "Space Mono", "times New Roman", times, serif; font-size: 1.3rem; line-height: 1.4em; letter-spacing: -0.25px; word-spacing: -1.5px;
	text-transform: uppercase;
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);
	padding-left: 0.5rem;
	background-color: white;
}
header:hover .hamburger span { opacity: 1 !important; }
header .hamburger:hover span { color: DodgerBlue; }

/* menu */

header #menu {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	padding: 1rem 0.5rem 0 0.5rem;
	overflow: auto;
}

/* menu titles */

header h2 {
	font-family: "Space Mono", "times New Roman", times, serif; font-size: 1.3rem; line-height: 1.4em; letter-spacing: -0.25px; word-spacing: -1.5px;
}
header li.active a { color: DodgerBlue; }
header li.active a:hover { color: black; }

header h3 {
	font-family: "Rubik", helvetica, arial, sans-serif; font-size: 1rem; line-height: 1.45em; letter-spacing: 0.25px;
}

/* pages and subpages */

#menu nav {
	min-height: 100%;
	display: flex;
}

#menu nav ul {
	width: 33.33%;
	margin-left: 33.33%;
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
}

#menu nav ul > li {
	flex: 1 1 auto;
	display: flex;
}
/* fix only for safari "flex-direction: column;" creates a bug */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
	#menu nav ul > li { height: auto; flex-basis: auto; }
}

#menu nav ul > li h2 {
	width: 50%;
	padding: 0.25rem 1rem 1rem 0;
	border-right: 2px solid;
}

#menu nav ul > li ol {
	width: 50%;
	padding: 0.25rem 0 1rem 1rem;
}

#menu nav ul > li ol > li {
	margin-left: 1rem;
	text-indent: -1rem;
}

#menu nav ul > li:first-child h2,
#menu nav ul > li:first-child ol { padding-top: 1rem; }

/* information pop-up + social networks & newsletter */

#menu .popup {
	position: fixed;
	top: 8rem;
	left: 0;
	width: 100%;
	padding: 0 0.5rem;
	pointer-events: none;
}

	/* information popup */

	#menu .popup p {
		width: 16.66%;
		font-family: "Rubik", helvetica, arial, sans-serif; font-size: 0.8rem; line-height: 1.5em;
	}

	.popup a { color: white; }
	.popup a:hover { color: black; }

	.popup p {
		position: relative;
		margin: 0;
		padding: 1rem;
		background-color: DodgerBlue;
		pointer-events: auto;
		border-radius: 1rem;
	}

	.popup p:after {
		content: "";
		display: block;
		position: absolute;
		left: 2rem;
	}

	#menu .popup p:after {
		bottom: 100%;
		border-style: solid;
		border-width: 1.25rem 0 0 1.25rem;
		border-color: transparent transparent transparent DodgerBlue;
	}

#menu .networks {
	position: fixed;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);
	padding: 0 0.5rem;
	pointer-events: none;
}

	/* social networks */

	#menu .social img { display: none; }

	/* newsletter*/

	#menu .networks #newsletter { margin-left: 83.33%; pointer-events: auto; }

	#newsletter h4 {
		font-family: "Rubik", helvetica, arial, sans-serif; font-size: 1rem; line-height: 1.45em; letter-spacing: 0.25px;
		text-align: center;
		margin: 0;
	}

	#newsletter .email {
		font-family: "Rubik", helvetica, arial, sans-serif; font-size: 1rem; line-height: 1.45em; letter-spacing: 0.25px;
		text-align: center;
		color: black;
		width: 100%;
		margin: 1rem 0;
		padding: 1rem 0.25rem;
		border: 2px solid;
		border-right: none; border-left: none;
		background-color: transparent;
	}
	#newsletter .email:focus { color: DodgerBlue; }

	#newsletter .subscribe {
		font-family: "Rubik", helvetica, arial, sans-serif; font-size: 1rem; line-height: 1.45em; letter-spacing: 0.25px;
		text-align: center;
		display: block;
		width: 100%;
		border: none;
		background-color: transparent;
		padding: 0;
		cursor: pointer;
	}
	#newsletter .subscribe:hover { color: DodgerBlue; }

/* closing icon */
#menu nav .close {
	position: fixed;
	top: 1rem;
	right: 1rem;
	width: 5rem;
	height: 5rem;
	cursor: pointer;

	/* svg properties */
	fill: none;
	stroke: black;
	stroke-width: 8.5;
}
#menu nav .close:hover { stroke: DodgerBlue; }

/* - - - - - MAIN - - - - - */

.main.transparent { opacity: 0.2 !important; }
.main.blurry {
	opacity: 0.5 !important;
	filter: blur(2.5px) !important;
	-webkit-filter: blur(2.5px) !important;
}

/* information pop-up */

	/* part of .main > .popup is defined above with .popup p */

	body > .popup {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		padding: 1rem 0.5rem;
		pointer-events: none;
		z-index: 4;
	}

	body > .popup p {
		font-family: "Space Mono", "times New Roman", times, serif; font-size: 1rem; line-height: 1.4em; letter-spacing: -0.25px; word-spacing: -1.5px;
		width: 33.33%;
	}

	body > .popup p:after {
		top: 100%;
		border-style: solid;
		border-width: 1.25rem 1.25rem 0 0;
		border-color: DodgerBlue transparent transparent transparent;
	}

/* titles */

.main > h1 {
	font-family: "Rubik LP", "Rubik", helvetica, arial, sans-serif; font-size: 5rem; font-weight: 100; line-height: 0.85em; text-transform: uppercase;
	text-align: center;
}

/* gallery panorama */

.panorama {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	padding: 1rem 7rem;
	z-index: 4;
	background-color: rgba(255,255,255,0.75);
	filter: blur(0px);
	-webkit-filter: blur(0px);
}
/* targets only Chrome and Safari, because they have some blur as well */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.panorama { background-color: rgba(255,255,255,0.5); }
}
.panorama .image {
	height: 100%;
	width: 100%;
	position: relative;
	background: center center no-repeat;
	background-size: contain;
}

.panorama .previous,
.panorama .next,
.panorama .close {
	display: block;
	width: 5rem;
	height: 5rem;
	position: absolute;
	cursor: pointer;

	/* svg properties */
	fill: none;
	stroke: black;
	stroke-width: 8.5;
	/*
	stroke-linecap:round;
	stroke-linejoin:round;
	*/
}
.panorama .previous {
	display: none;
	top: 50%; left: -6rem;
	transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);
}
.panorama .next {
	display: none;
	top: 50%; right: -6rem;
	transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);
}
.panorama .close {
	top: 0; right: -6rem;
}
.panorama .previous:hover,
.panorama .next:hover,
.panorama .close:hover {
	stroke: DodgerBlue;
}

/* figure */

.main > figure,
section > figure,
.article-simple > figure,
.bloc-image figure {
	position: relative;
	height: 0; /* height = width; defined with jQuery */
	border: 2px solid;
	border-radius: 50%;
	overflow: hidden;
}
.main > figure {
	width: 50%;
	margin: 0 25% 1rem 25%;
}
section > figure {
	width: 33.33%;
	margin: 0 33.33% 1rem 33.33%;
}

figure.zoom { cursor: pointer; }
figure.zoom:hover { color: DodgerBlue; }

/* common to all figures */

figure .ghost,
.galerie figure img {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	opacity: 1; /* post defined in jQuery */
	pointer-events: none;
	z-index: 1;
}

/* targets only Chrome and Safari, because Firefox and IE are slow with the blur */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	figure .ghost,
	.galerie figure img {
		-webkit-filter: blur(0px); /* post defined in jQuery */
	}
}

.main > figure .ghost,
section > figure .ghost,
.article-simple > figure .ghost,
.bloc-image figure .ghost {
	border-radius: 50%;
}

figure figcaption {
	font-family: "Rubik", helvetica, arial, sans-serif; font-size: 0.8rem; line-height: 1.5em;
	position: absolute;
	top: 50%; left: 50%;
	width: 80%;
	text-align: center;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

/* textes */

.main > .introduction, section > .texte {
	padding: 0.25rem 1rem;
	border-left: 2px solid;
	border-right: 2px solid;

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.main > .introduction {
	text-align: justify;
}

.introduction p,
.texte p { margin: 1em 0; }

.texte ul, .texte ol {
	margin: 1em 0;
	padding: 0;
	list-style-position: inside;
}

.introduction > *:first-child,
.texte > *:first-child  { margin-top: 0; }

.introduction > *:last-child,
.texte > *:last-child { margin-bottom: 0; }

/* introduction */

.main .introduction {
	width: 66.66%;
	margin: 0 auto 1rem auto;

	font-family: "Space Mono", "times New Roman", times, serif; font-size: 1.3rem; line-height: 1.4em; letter-spacing: -0.25px; word-spacing: -1.5px;
}

/* - - - - - SECTIONS - - - - - */

section {
	margin: 4rem 0;
}

/* titles */

section > h2 {
	font-family: "Rubik LP", "Rubik", helvetica, arial, sans-serif; font-size: 5rem; font-weight: 100; line-height: 0.85em;
}

/* figures */

	/* section > figure is defined above, with main > figure */

/* subtitles */

section > .sous-titre {
	font-family: "Space Mono", "times New Roman", times, serif; font-size: 1.3rem; line-height: 1.4em; letter-spacing: -0.25px; word-spacing: -1.5px;

	width: 66.66%;
	margin: 1rem 0 1rem 16.66%;

	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 2px solid;
}

	/* margins between titles and content when there's no subtitle */

	section > h2 + .texte,
	section > h2 + .calendrier,
	section > h2 + .events,
	section > h2 + .galerie,
	section > h2 + .video { margin-top: 4rem; }

/* text */

	/* part of section > .texte is defined above, with main > .introduction */

section > .texte {
	width: 66.66%;
	margin: 0rem 16.66%;

	column-count: 2;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-gap: 1rem;
	-moz-column-gap: 1rem;
	-webkit-column-gap: 1rem;
}

/* section calendrier */

section > .calendrier {
	display: block;
	border: none;
	width: 100%;
	height: 800px; /* is defined as 100% with jQuery */
}

/* section events */

section > .events {
	display: flex;
	text-align: center;
	margin: 1rem 0;
	padding: 0;
}

.events > .event {
	color: black;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 16.66%;
	padding: 0.25rem 1rem;
	border-left: 2px solid;
}

.events > .event:hover { color: DodgerBlue; }

	.events > .event h3 {
		font-family: "Space Mono", "times New Roman", times, serif; font-size: 1.3rem; line-height: 1.4em; letter-spacing: -0.25px; word-spacing: -1.5px;
		margin: 0;
	}
	.events > .event .date, .events > .event .infos { margin: 0; }
	.events > .event .date { margin-bottom: 0.5rem; }
	.events > .event .infos { margin-top: 0.5rem; }


/* .galerie figure */

@media screen and (min-width: 701px) {
	.galerie figure {
		border-left: 2px solid;
	}
}

/* section galerie */

section > .galerie {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 1rem auto -1rem auto; /* balance section > .galerie figure { padding-bottom: 1rem; } */
}

section > .galerie-5 { margin-left: 16.66%; }
section > .galerie-7 { justify-content: flex-start; margin: 1rem 16.66% -1rem 16.66%; }
section > .galerie-8 { margin: 1rem 16.66% -1rem 16.66%; }

section > .galerie figure {
	position: relative;
	margin: 0;
	margin: 0 1rem 1rem 0;
}

section > .galerie-2 figure { width: calc(33.33% - 1rem); }
section > .galerie-3 figure { width: calc(33.33% - 1rem); }
section > .galerie-4 figure { width: calc(16.66% - 1rem); }
section > .galerie-5 figure { width: calc(20% - 1rem); }
section > .galerie-6 figure { width: calc(16.66% - 1rem); }
section > .galerie-7 figure { width: calc(25% - 1rem); }
section > .galerie-8 figure { width: calc(25% - 1rem); }

/* webkit calc() */
section > .galerie-2 figure { width: -webkit-calc(33.33% - 1rem); }
section > .galerie-3 figure { width: -webkit-calc(33.33% - 1rem); }
section > .galerie-4 figure { width: -webkit-calc(16.66% - 1rem); }
section > .galerie-5 figure { width: -webkit-calc(20% - 1rem); }
section > .galerie-6 figure { width: -webkit-calc(16.66% - 1rem); }
section > .galerie-7 figure { width: -webkit-calc(25% - 1rem); }
section > .galerie-8 figure { width: -webkit-calc(25% - 1rem); }

/* section video */

section > .video {
	width: 66.66%;
	margin: 0 16.66%;
}

/* common to all videos */

section > .video,
article > .video {
	display: inline-block;
	position: relative;
	border-right: 2px solid;
	border-left: 2px solid;
	cursor: pointer;
}

section > .video:after,
article > .video:after {
	content: "";
	display: inline-block;
	margin-top: 56.26%; /* 9 x 100 / 16 = 56.26 = 16/9 ratio */
}

section > .video iframe,
article > .video iframe {
	border: none;
	position: absolute;
	z-index: 2;
	top: 0;
	height: 100%;
	width: 100%;
}

.video .triangle {
	height: 6rem;
	width: 6rem;
    position: absolute;
    top: 50%; left: 50%;
	transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);
	fill: none;
	stroke: black;
	stroke-width: 7.5;
}

.video:hover { border-color: DodgerBlue; }
.video:hover .triangle { stroke: DodgerBlue; }

.video.playing { background-color: black; }
.video.playing:hover { border-color: black; }
.video.playing .triangle { display: none; }

/* - - - - - SECTION À ARTICLE - - - - - */

article { margin: 4rem 0; }

/* titres */

article h3 {
	font-family: "Space Mono", "times New Roman", times, serif; font-size: 1.3rem; line-height: 1.4em; letter-spacing: -0.25px; word-spacing: -1.5px;
}

/* blocs titres */

article h4 {
	font-family: "Rubik", helvetica, arial, sans-serif; text-transform: uppercase;
}

article > .bloc-titre {
	width: 25%;
	padding: 0.25rem 1rem 0.25rem 0;
}

article > .bloc-titre h3 { margin: 0; margin-bottom: 1rem; }

article > .bloc-titre .sous-titre {
	margin: 0;
	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 2px solid;
}

/* article simple */

.article-simple {
	width: 100%;
	margin: 4rem 0;
	display: flex;
}

	/* flexbox order */
	.article-simple > .bloc-titre { order: 1; }
	.article-simple > .texte { order: 2; }
	.article-simple > figure { order: 3; }

	/* 1. bloc-titre */

		/* part of .article-simple > .bloc-titre is defined above as article > .bloc-titre */
		.article-simple > .bloc-titre {
			width: 16.66%;
			margin-left: 16.66%;
		}

	/* 2. texte */

	/* part of article > .texte is defined above, with main > .introduction */

	.article-simple > .texte {
		align-self: center;
		width: 33.33%;
		padding: 0.25rem 0 0.25rem 1rem;
		border-left: 2px solid;
	}

	/* 3. figure */

		/* part of .article-simple > figure is defined above in the main figure section */
		.article-simple > figure {
			align-self: center;
			width: 16.66%;
			margin: -1rem 0 -1rem 8.33%;
		}

	/* article simple sans-titre */

	.article-simple.sans-titre > .bloc-titre { display: none; }
	.article-simple.sans-titre > .texte { order: 2; }
	.article-simple.sans-titre > figure { order: 1; }

	.article-simple.sans-titre > figure { margin: -1rem 8.33%; }

/* article lien */

.article-lien {
	width: 66.66%;
	margin: 4rem 16.66%;
	display: flex;
}

.article-lien .description {
	width: 50%;
	margin: 0;
	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 2px solid;
}

.article-lien .lien {
	text-align: center;
	width: 25%;
	border-top: 2px solid;
	border-bottom: 2px solid;
	cursor: pointer;
	align-self: center;

	transform: translateX(50%);
	-ms-transform: translateX(50%);
	-webkit-transform: translateX(50%);
}
.article-lien .lien:hover {
	color: DodgerBlue;
}
.article-lien .lien a {
	display: block;
	color: inherit;
	padding: 1rem 0.25rem;
}

	.article-lien.sans-titre > .bloc-titre { display: none; }
	.article-lien.sans-titre > .description { order: 2; }
	.article-lien.sans-titre > .lien { order: 1; }

	.article-lien.sans-titre .lien {
		transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
	}

/* article galerie */

.article-galerie {
	width: 83.33%;
	margin: 4rem 0 4rem 16.66%;
	display: flex;
}

.article-galerie > .bloc-titre { width: 20%; }

.article-galerie > .galerie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: -1rem;  /* balance .article-galerie > .galerie figure { padding-bottom: 1rem; } */
}

.article-galerie > .galerie-2 { width: 80%; }
.article-galerie > .galerie-3 { width: 60%; }
.article-galerie > .galerie-4 { width: 80%; }
.article-galerie > .galerie-5,
.article-galerie > .galerie-6 { width: 60%; }

.article-galerie > .galerie figure {
	position: relative;
	margin: 0 1rem 1rem 0;
}

.article-galerie > .galerie-2 figure { width: calc(50% - 1rem); }
.article-galerie > .galerie-3 figure { width: calc(33.33% - 1rem); }
.article-galerie > .galerie-4 figure { width: calc(25% - 1rem); }
.article-galerie > .galerie-5 figure,
.article-galerie > .galerie-6 figure { width: calc(33.33% - 1rem); }

/* webkit calc() */
.article-galerie > .galerie-2 figure { width: -webkit-calc(50% - 1rem); }
.article-galerie > .galerie-3 figure { width: -webkit-calc(33.33% - 1rem); }
.article-galerie > .galerie-4 figure { width: -webkit-calc(25% - 1rem); }
.article-galerie > .galerie-5 figure,
.article-galerie > .galerie-6 figure { width: -webkit-calc(33.33% - 1rem); }

/* article video */

/* part of .article-video is defined above as .section-video */

.article-video {
	width: 66.66%;
	margin: 4rem 16.66%;
	display: flex;
}

.article-video > .video {
	display: inline-block;
	position: relative;
	width: 75%;
	margin: 0;
}

/* article audio */

.article-audio {
	width: 66.66%;
	margin: 4rem 16.66%;
	display: flex;
	flex-wrap: wrap;
}

.article-audio .description {
	width: 50%;
	margin: 0;
	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 2px solid;
}

.article-audio .controls {
	align-self: center;
	width: 25%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	transform: translateX(50%); -ms-transform: translateX(50%); -webkit-transform: translateX(50%);
}
	.controls .timer {
		font-family: "Space Mono", "times New Roman", times, serif; font-size: 1.3rem; line-height: 1.4em; letter-spacing: -0.25px; word-spacing: -1.5px;
		text-align: center;
		margin: 0;
		width: 100%;
	}
	.controls div {
		font-family: "Space Mono", "times New Roman", times, serif; font-size: 1.3rem; line-height: 1.4em; letter-spacing: -0.25px; word-spacing: -1.5px;
	}
	.controls.working div { cursor: pointer; }
	.controls.working div:hover { color: DodgerBlue; }

.article-audio .audio {
	width: 137.5%;
	margin: 4rem -25% 0 -12.5%;
}

.article-audio .progress {
	height: 2px;
	cursor: pointer;
	background-color: black;
}

.article-audio .current {
	height: 100%;
	width: 0;
	background-color: DodgerBlue;
}

	.article-audio.sans-titre > .bloc-titre { display: none; }
	.article-audio.sans-titre > .controls { order: 1; }
	.article-audio.sans-titre > .description { order: 2; }
	.article-audio.sans-titre > .audio { order: 3; }

	.article-audio.sans-titre .controls {
		transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
	}

	.article-audio.sans-texte .audio { margin-top: 2rem; }

/* article liste & article prix */

.article-liste,
.article-prix {
        width: 66.66%;
        margin: 4rem 16.66%;
        display: flex;
}

	/* .article-simple > .bloc-titre & .article-prix > .bloc-titre are defined above as article > .bloc-titre */

.article-liste ul,
.article-prix ul {
	width: 75%;
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid;
	border-right: 2px solid;
}

.bloc-item,
.bloc-prix {
	display: flex;
	margin-bottom: 1rem;
}
.bloc-prix {
	width: 100%;
	justify-content: space-between;
}
.bloc-item:last-child,
.bloc-prix:last-child { margin: 0; }

.bloc-item .item-titre {
	width: 33.33%;
	padding: 0.25rem 1rem;
	border-right: 2px solid;
}
	.bloc-item .item-titre h4,
	.bloc-item .item-titre .sous-titre {
		margin: 0;
	}

.bloc-item .description {
	width: 66.66%;
	margin: 0;
	padding: 0.25rem 1rem;
}

.bloc-prix h4,
.bloc-prix .description,
.bloc-prix .prix {
	width: 33.33%;
	margin: 0;
	padding: 0.25rem 1rem;
	border-right: 2px solid;
}

.bloc-item .description,
.bloc-prix .prix {
	border: none;
	flex-grow: 1;
}
.bloc-prix .prix {
	text-align: center;
	align-self: center;
}

/* bloc image */

	.bloc-image { margin: 1rem 0; }
	.bloc-image:first-child { margin-top: 0; }
	.bloc-image:last-child { margin-bottom: 0; }

	/* part of .bloc-image figure is defined above in the main figure section */

	.bloc-image figure {
		width: 33.33%;
		margin: 0;
		margin-left: 16.66%;
	}

/* - - - - - FOOTER - - - - - */

footer {
	width: 100%;
	margin: 4rem 0 1rem 0;
	display: flex;
}

footer.transparent { opacity: 0.2 !important; }
footer.blurry {
	opacity: 0.5 !important;
	filter: blur(2.5px) !important;
	-webkit-filter: blur(2.5px) !important;
}

footer h5, footer h6 {
	margin: 0;
}
footer h5 {
	font-family: "Space Mono", "times New Roman", times, serif; font-size: 1rem; line-height: 1.4em; letter-spacing: -0.25px; word-spacing: -1.5px;
}
footer h6, footer .acces p {
	font-family: "Rubik", helvetica, arial, sans-serif; font-size: 0.8rem; line-height: 1.5em;
}

/* accès/contact */

footer .acces {
	width: 16.66%;
	padding-right: 1rem;
}

footer .acces p {
	margin: 0.5rem 0;
	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 2px solid;
}

footer .acces .carte {
	border-radius: 50%;
	overflow: hidden;
}

footer .acces .carte img { width: 100%; }

/* plan du site */

footer nav { width: 83.33%; }

footer nav ul {
	display: flex;
	flex-wrap: wrap;
	margin: -0.5rem 0; /* balance footer nav ul > li { margin: 0.5rem 0; }; */
}

footer ul, footer ol {
	list-style: none;
	padding: 0;
	margin: 0;
}
footer nav {
	margin: 0;
}

footer nav a { color: initial; }
footer nav a:hover { color: DodgerBlue; }

footer nav ul > li {
	width: 20%;
	margin: 0.5rem 0;
}

footer nav ol {
	margin-top: 0.5rem;
	padding: 0.25rem 1rem;
	border-left: 2px solid;
}

footer nav ol > li {
	margin-left: 1rem;
	text-indent: -1rem;
}

/* - - - - - USER & EDIT - - - - - */

.user, .edit {
	font-family: "Space Mono", "times New Roman", times, serif; font-size: 1rem; line-height: 1.4em; letter-spacing: -0.25px; word-spacing: -1.5px;
	z-index: 5;
}

.user {
	color: DodgerBlue;
	position: fixed;
	top: 0.5rem;
	right: 0.5rem;
}

.edit {
	text-transform: lowercase;
	vertical-align: top;
}
.user:before, .edit:before { content: "["; color: black; vertical-align: top; }
.user:after, .edit:after { content: "]"; color: black; vertical-align: top; }