@font-face
{
	font-family: "Zilla Slab";
	src: url("/static/fonts/zilla-slab/ZillaSlab-Regular.ttf") format("truetype"),
	     url("/static/fonts/zilla-slab/ZillaSlab-Light.ttf") format("truetype"),
	     url("/static/fonts/zilla-slab/ZillaSlab-Bold.ttf") format("truetype");
}

@font-face
{
	font-family: "Quicksand";
	src: url("/static/fonts/quicksand/Quicksand-Regular.ttf") format("truetype"),
	     url("/static/fonts/quicksand/Quicksand-Light.ttf") format("truetype"),
	     url("/static/fonts/quicksand/Quicksand-Bold.ttf") format("truetype");
}

:root
{
	--button-hover-background-color: rgb(25, 63, 87);
	--background-url: url("/static/images/background.jpg?2021-05-22_16-25");
	--border-radius: 0.5em;
	--font-size-s: 0.75em;
	--font-size-m: 0.9em;
	--font-size-l: 1.25em;
	--font-size-xl: 3em;
	--font-body: "Quicksand";
	--font-headings: "Zilla Slab";
	--main-background-color: rgb(0, 0, 0);
	--main-text-color: rgb(255, 255, 255);
	--nav-background-color: rgba(0, 0, 0, 1);
	--nav-text-color: rgb(255, 255, 255);
	--section-background-color: rgba(0, 0, 0, 0.5);
	--padding: 5em;
}

body
{
	background-color: var(--main-background-color);
	color: var(--main-text-color);
	font-family: var(--font-body);
	font-size: var(--font-size-m);
	padding: 0;
	margin: 0;
	margin-top: 3.5em;
}

footer
{
	padding: var(--padding);
	background-image: linear-gradient(rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 5em, rgba(0, 0, 0, 0.5)),
		var(--background-url);
	background-size: 100%;
	background-position: bottom;
	background-repeat: no-repeat;
}

h1
{
	font-family: var(--font-headings);
	font-size: var(--font-size-l);
	margin: 0;
	padding: 0;
}

nav
{
	background-color: var(--nav-background-color);
	color: var(--nav-text-color);
	margin: 0;
	padding: 1em;
	padding-left: 5em;
	padding-right: 5em;
	box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
}

nav > ul
{
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
	justify-content: flex-end;
}

nav > ul > li
{
	margin-right: 2em;
	text-align: right;
}

nav > ul > li:first-child
{
	margin-right: auto;
	font-family: var(--font-headings);
	font-size: var(--font-size-l);
	font-weight: bold;
	text-align: left;
}

nav > ul > li:last-child
{
	margin-right: 0;
}

nav > ul > li > a
{
	color: inherit;
	text-decoration: none;
}

section
{
	margin: 0;
	padding-left: 4em;
	padding-right: 4em;
	padding-top: 5em;
	padding-bottom: 5em;
}

hr
{
	margin-top: 4em;
	margin-bottom: 4em;
	height: 1px;
	background-color: rgba(0, 0, 0, 0.2);
	border: 0;
}

#intro
{
	padding-top: 10em;
	padding-bottom: 10em;
	background-image: linear-gradient(rgba(25, 25, 112, 0.3) 0, rgba(0, 0, 50, 0.7) 100%),
		var(--background-url);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

#intro .section-header
{
	margin-bottom: 0;
}

#passeur_d_ame
{
	box-shadow: 0 0 3em rgba(0, 0, 0, 0.8);
	background-color: white;
	color: black;
	padding-left: 8em;
	padding-right: 8em;
}

.theme
{
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: justify;
	border-radius: var(--border-radius);
	margin-bottom: 4em;
	color: rgb(50, 50, 50);
	background-color: rgba(0, 0, 0, 0.05);
}

.theme:last-of-type
{
	margin-bottom: 0;
}

.theme img
{
	flex: 0 0 25%;
	max-width: 25%;
	border-bottom-left-radius: inherit;
	border-top-left-radius: inherit;
}

.theme.right img
{
	border-radius: 0;
	border-bottom-right-radius: inherit;
	border-top-right-radius: inherit;
}

.text div
{
	padding-left: 3em;
	padding-right: 3em;
}

.text h1
{
	margin-bottom: 1em;
	text-align: left;
}

.text p
{
	margin: 0;
	padding: 0;
}

#seances_et_tarifs
{
	background-image: linear-gradient(rgba(0, 0, 0, 0.7) 0, rgba(25, 25, 112, 0.5) 30%, rgba(25, 25, 112, 0.1) 70%, rgba(0, 0, 0, 0.7) 100%),
		var(--background-url);
	background-size: 100% 100%;
	background-position: bottom;
	background-repeat: no-repeat;
	padding-left: 8em;
	padding-right: 8em;
}

#seances_et_tarifs .section-body
{
	display: flex;
	flex-wrap: wrap;
}

#contactez-moi
{
	background-color: white;
	color: black;
}

#contactez-moi .section-header p
{
	color: rgba(0, 0, 0, 0.9);
}

.section-header
{
	text-align: center;
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 3em;
}

.section-header h1
{
	font-size: var(--font-size-xl);
	margin: 0;
	margin-bottom: 1em;
}

.section-header p
{
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--font-size-l);
	margin: 0;
}

.contacts
{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.contacts a
{
	font-size: var(--font-size-l);
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	padding: 2em;
	margin: 1em;
	color: rgb(50, 50, 50);
	background-color: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
}

.contacts a:hover
{
	background-color: var(--button-hover-background-color);
	color: white;
}

.plan
{
	padding: 0;
	margin: 1em;
	background-color: white;
	border-radius: var(--border-radius);
	color: rgb(0, 0, 0);
	box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
}

.plan-header
{
	text-align: left;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

.plan-header img
{
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	width: 100%;
	display: block;
	padding: 0;
}

.plan-body
{
	padding: 1.25em;
	padding-top: 2em;
	padding-bottom: 2em;
	text-align: justify;
}

.plan-body h1
{
	margin-bottom: 0.5em;
	text-align: left;
}

.plan-body h1 span
{
	font-size: var(--font-size-s);
	color: gray;
	font-weight: normal;
}

.plan-body p
{
	padding: 0;
	margin: 0;
}

.action
{
	text-align: center;
	margin-top: 2em;
}

.button
{
	background-color: gray;
	color: white;
	color: rgb(50, 50, 50);
	background-color: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--border-radius);
	padding: 0.75em;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}

.button:hover
{
	background-color: var(--button-hover-background-color);
	color: white;
}

.tags
{
	list-style-type: none;
	margin: 0;
	margin-bottom: 2em;
	padding: 0;
}

.tags li
{
	display: inline-block;
	font-size: 0.8em;
	color: rgb(25, 63, 87);
	background-color: rgb(200, 220, 232);
	padding: 0.4em;
	padding-left: 0.75em;
	padding-right: 0.75em;
	border-radius: 0.25em;
	text-align: left;
}


@media only screen and (max-width: 800px)
{
	nav > ul > li:first-child
	{
		width: 100%;
		text-align: center;
	}

	nav > ul > :not(li:first-child)
	{
		display: none;
	}

	section
	{
		padding-left: 2em;
		padding-right: 2em;
		padding-top: 2em;
		padding-bottom: 2em;
	}

	.section-header h1
	{
		font-size: 2em;
	}

	#intro
	{
		padding-top: 4em;
		padding-bottom: 4em;
	}

	#passeur_d_ame
	{
		padding-left: 2em;
		padding-right: 2em;
	}

	.theme
	{
		margin-bottom: 2em;
	}

	.theme img
	{
		display: none;
	}

	.text div
	{
		padding: 2em;
	}

	#seances_et_tarifs
	{
		padding-left: 2em;
		padding-right: 2em;
	}

	.contacts
	{
		display: block;
	}

	.contacts a
	{
		display: block;
		font-size: var(--font-size-m);
	}

	footer
	{
		text-align: center;
	}
}

@media only screen and (min-width: 1024px)
{
	.small
	{
		display: none;
	}

	nav
	{
		padding-left: 20%;
		padding-right: 20%;
	}

	#intro .section-header
	{
		padding: 0;
	}

	#intro
	{
		padding-left: 20%;
		padding-right: 20%;
	}

	#passeur_d_ame
	{
		padding-left: 20%;
		padding-right: 20%;
	}

	.plan
	{
		flex: 1 0 30%;
	}
}