@charset "utf-8";

/* ********************
SOMMAIRE
=======================
1. Base
2. Typography
3. Structure / Layout
4. Navigation
5. Components
6. Form
7. Responsive
--- Mobile (max-width 479px)
--- Tablet / Small displays (min-width: 480px) and (max-width: 959px)
--- Medium / Large displays (min-width: 1919px)
--- HD 4K displays (min-width: 2559px)
--- Print
******************** */


/* ********************

BASE

******************** */
*, *:before, *:after {
	outline: none;
	box-sizing: inherit;
}
html {
	width: 100vw;
	height: auto;
}
body {
	padding: 0;
	margin: 5vh 3vw 5vh 3vw;
	width: 93vw;
	height:auto;
	color: #444;
	font-size: 1.1em;
	line-height: 1.8em;
	scroll-behavior: smooth; /* Un peu de douceur dans ce monde de brutes */
	overflow-x: hidden;
	font-family: 'Nunito', Verdana, sans-serif;
	display: flex;
	flex-direction: column;
	background: #d6d6d6;
}
section {
	margin: 1em auto;
	width: 70vw;
}



/* ********************

TYPOGRAPHY

******************** */
a {
	color: rgb(68, 68, 68);
	text-decoration: underline;
}
a:hover {
	color: rgb(1, 191, 178);
}
a:visited:hover {
	color: rgb(1, 191, 178);
}
a:visited {
	color: rgb(100, 100, 100);
}
a:focus, input:focus, button:focus, select:focus, textarea:focus, .btn, .btn-none { /* Focus accessibility */
	border: 1px dashed #444;
}
.material-icons.md-cyan {
	color:  rgba(24, 255, 255, 1);
}
.material-icons.md-36 {
	font-size: 36px;
}
h1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color: #FCE4EC;
}
h1#title-site {
	font-size: 10vmin;
	line-height: 12vmin;
}
h1#title-home {
	color: #00ffdb;
}
h2, h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}
#right a:visited {
	color:#FCE4EC;
}
#container-home main #intro h2 {
	color: #00ffdb;
}
#container-home main #intro h2 span {
	font-size: 70%;
	color: #fff;
}
#container-home #intro a, #container-home #intro a:visited {
	color:#fff;
}


/* ********************

LAYOUT / STRUCTURE

******************** */
/* *********************************** Page container */
body#container-home {
	margin: 0;
	width: 100vw;
	background:#333;
	color:#f1f1f1;
}
#page-container {
	box-shadow: -30px 30px 8px -18px #bbb;
	background: #fff;
	overflow-x: hidden;
}
/* *********************************** Header */
#container-home header, body #header {
	min-height: 20vh;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#container-home #intro header {
	text-align: left;
	min-height: auto;
	display: block;
	width: 90%;
	margin: 1em auto;
	padding-top: 1em;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
}
body #header {
	background:#333;
	color:#f1f1f1;
	display: flex;
	flex-direction: column;
	height: auto;
}
#header #left, #header #right {
	width: 100%;
	height: 100%;
}
#header #right {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	font-size: 1.1em;
	line-height: 1.5em;
	height: auto;
	padding: 4vh 0;
	background: linear-gradient(222deg, #6534ff, #d30fff);
	background-size: 400% 400%;
	animation: 22s ease infinite;
}
#header #left {
	background: url('../img/topo-jaune.svg'),
	url('../img/abstract.jpg'),
	linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
	background-position: left, center;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	min-height: 40vh;
}
#right > p:nth-child(1) {
	margin: 1em;
}
#left > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: auto;
	text-align: center;
	margin: 3em 0;
}
/* *********************************** Content page */
#container-home main {
	display: flex;
	flex-direction: column-reverse;
	min-height: 100vh;
	padding: 0;
}
#page-container main {
	margin-bottom: 5vh;
}
body main {
	min-height: 73vh;
	display: flex;
	flex-direction: column;
	padding: 1em;
}
.form-center {
	margin: auto;
	width: 70vw;
}
/* *********************************** Home page + Map */
#container-home main #intro {
	width: 85vw;
	background: #333;
}
#container-home main #intro article {
    width: 90%;
    margin: 2em auto;
	padding-bottom : 5em;
}
div#map, div#mapid {
	width: 100vw;
	height: 95vh;
	z-index: 0;
}
/* *********************************** Header content */
main header#header-content {
	padding: 2em 0;
	background-color: transparent;
	color:inherit;
	text-align: left;
	color: rgb(68, 68, 68);
}
#post-container #header-content h1, #post-container #header-content h2 {
	padding: 0;
	color: rgb(68, 68, 68);
	font-weight: 300;
}
/* *********************************** Post container */
#page-container #post-container {
	padding-bottom: 3em;
	width: 70vw;
}

#content {
	margin: 2em auto;
	width: 70vw;
}

article.post {
	margin-bottom: 4em;
	display: block;
	margin-right: 0;
	width: auto;
	vertical-align: top;
	overflow-wrap: break-word;
}
article.post > h3 {
	border-top: 4px solid #6534FF;
	padding-top: .8em;
}
.meta-data {
	color: #6534FF;
	font-weight: 600;
}



/* ********************

NAVIGATION

******************** */
/* *********************************** Main navigation */
nav#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	width: 100%;
	font-size: .9em;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
}
nav#nav li a {
	display: block;
	color: white;
	text-align: center;
	padding: 1em;
	text-decoration: none;
}
nav#nav li a:hover:not(.active) {
	background-color: #111;
}
nav#nav li a i, nav#nav li a span {
	font-size: 28px;
	position: relative;
	vertical-align: bottom;
}
nav#nav li span {
	display:inline-block;
}
nav#nav .active {
	background: linear-gradient(222deg, #fc6a56, #ee35be, #ff9400);
	background-size: 600% 600%;
	animation: 3s ease infinite;
}

/* *********************************** Dropdown - Main navigation */
#container-home #nav {
	padding-top: 2em;
}
#container-home #nav ul li, #page-container #nav ul li {
	position: relative;
}
#container-home #nav ul::after, #page-container #nav ul::after {
	content: "";
	display: table;
	clear: both;
}
#container-home #nav span.label_menu, #page-container #nav span.label_menu {
	display: block;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding: 10px 0px;
}
#nav .sous {
	display: none;
	position: relative;
	width: 100vw;
	z-index: 9999;
}
#page-container #nav .sous {
	width: 93vw;
}
#nav > ul li:hover .sous {
	display: block;
}
.sous li {
	float: none;
	width: 100%;
	text-align: left;
}
.sous a {
	border-bottom: none;
}
.sous a:hover {
	border-bottom: none;
	background-color: RGBa(200,200,200,0.1);
}
.deroulant > span.label_menu::after {
	content:" ▼";
	font-size: 12px;
}

/* *********************************** Top navigation for connect and register */
#nav-connexion {
	background: #6534FF;
	width: 93vw;
	color: #fff;
	z-index: 9999999;
}
#nav-connexion ul {
	list-style: none;
	padding-left: 1em;
	margin: .5em;
	display: flex;
	justify-content: space-around;
}
#nav-connexion ul li {
	padding-right: 1em;
}
#container-home #nav-connexion {
	background: #9700ff;
	width: 100vw;
	color: #fff;
	position: static;
	font-weight: bold;
}
#nav-connexion a:visited {
	color: #e1e1e1;
}
#nav-connexion a {
	color: #fff;
}

/* *********************************** Bottom toolbar for map (home) */
nav#toolbar ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	font-size: .6em;
	font-weight: 600;
	justify-content: space-between;
}
nav#toolbar li {
	width: 35%;
}
nav#toolbar li a, nav#toolbar li#find-me {
	color: #00ffdb;
	text-align: center;
	padding: 2em 1em;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	cursor: pointer;
}
nav#toolbar li a:hover:not(.active), nav#toolbar li:hover:not(.active) {
	background-color: #111;
}
nav#toolbar .active {
	background-color: #01bfb2;
	color: #ffffff;
}

/* *********************************** Footer navigation */
#page-container > footer {
	padding: 1em 2em 1em 1em;
	background: #6534FF;
	color: #ffffff;
}
#page-container > footer a {
	color: #ffffff;
}
#page-container > footer a:visited {
	color: #e1e1e1;
}
#page-container nav#legal ul {
	list-style: none;
	padding-left: 1em;
	line-height: 2.3em;
}

/* *********************************** Breadcrumb */
#breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding-left: 0;
}
#breadcrumb li::before {
	content: ">";
	margin-right: .8em;
}
#breadcrumb li {
	margin-right: .8em;
}
#breadcrumb li:first-child::before {
	content: "";
	margin:0;
}
#breadcrumb .breadcrumb-item a, #breadcrumb .breadcrumb-item {
	color: #a4a4a4;
	font-size: .9em;
}
li.breadcrumb-item:last-child {
	display: none;
}

/* *********************************** Paginate */
ul.pagination {
	list-style: none;
	display: flex;
	justify-content: center;
	padding-left: 0;
	align-items: center;
	font-size: 1em;
}
ul.pagination li {
	margin: 0;
	padding: .5em 1em;
	background: transparent;
	color:#444;
}
ul.pagination li:hover {
	background: transparent;
}
ul.pagination li.active {
	background-color: #01bfb2;
	color:#444;
}
ul.pagination li a {
	padding: 1em;
}
ul.pagination li a:visited {
	color:#444;
}
li.page-item:last-child, li.page-item:first-child {
	font-size: 1.5em;
	line-height: 2em;
}




/* ********************

COMPONENTS

******************** */
/* *********************************** Controls for post */
ul.list-meta {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
}
ul.list-meta li {
	margin-right: 1em;
}

/* *********************************** Buttons */
form .btn-inline {
	padding: 0;
	background: none;
	color: rgb(68, 68, 68);
	text-align: left;
	margin-bottom: 0;
	border: 0;
	font-family: inherit;
	text-decoration: underline;
	width: auto;
	display: inline-block;
}
#header-content form .btn-inline:visited {
	color: rgb(100, 100, 100);
}
/* *********************************** Notification */
.notification {
	width: 100%;
	padding: .5em 1em;
	border-left: 4px solid #F86A53;
}
.is-success {
	background: #9C21FF;
	color: #fff;
}

/* *********************************** Custom Leaflet */
.custom .leaflet-popup-content-wrapper {
	background: #444;
	color: #fff;
	border-radius: 0;
	font-size: 1.1em;
	width: auto;
	max-width: 70vw;
	padding: .8em;
}
.custom .leaflet-popup-tip {
	background: #444;
}
.custom .leaflet-popup-content-wrapper a {
	color:  #00ffdb;
}
.custom .leaflet-popup-content-wrapper a:hover {
	text-decoration: none;
}
.custom .leaflet-popup-content-wrapper a:visited {
	color:  #00ffdb;
}


/* ********************

FORMS

******************** */
input, button, input[type="file"] {
	outline: none;
}
input[type="submit"], input[type="file"] {
	cursor: pointer;
}
input[type="submit"]:hover, input[type="file"]:hover {
	background: #01bfb2;
	color: #fff;
}
form .btn-danger:hover {
	background: red;
	color: #fff;
}
input {
	border: none;
}
textarea {
	border: 1px solid #ccc;
}
input, textarea {
	border-bottom: 2px solid #01bfb2;
	width: 100%;
	font-family: 'Nunito Sans', Verdana, sans-serif;
	color: #333;
	font-size: 1em;
	margin-bottom: 2em;
	padding: 1em 0;
}
.hidden {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	width: 1px;
}
.checkbox label {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: baseline;
	align-items: baseline;
}
.checkbox input {
	width: auto;
}
#header-content form {
	display:inline-block;
}



/* ********************

RESPONSIVE

******************** */
@media (orientation: landscape) and (min-width: 960px) {
	/* Tablet */
	body {
		margin: 5vh auto;
		font-size: 1em;
		line-height: 1.6em;
	}
	body #header {
		flex-direction: row;
		min-height: 40vh;
	}
	h1#title-home {
		color: #00ffdb;
	}
	h1#title-site {
    font-size: 8vmin;
    line-height: 10vmin;
	}
	#page-container #post-container {
		width: 60vw;
	}
	#container-home main {
		flex-direction: row;
	}
	#container-home main #intro {
		width: 20vw;
		background: url('../img/abstract.jpg'), linear-gradient(to right,rgba(30, 75, 115, 1),rgba(255, 255, 255, 0));
		background-position-x: 0%, 0%, 0%;
		background-position-y: 0%, 0%, 0%;
		background-repeat: repeat, repeat, repeat;
		background-size: auto, auto, auto;
		background-position-x: 0%, 0%, 0%;
		background-position-y: 0%, 0%, 0%;
		background-repeat: repeat, repeat, repeat;
		background-size: auto, auto, auto;
		background-position: center;
		background-repeat: no-repeat, no-repeat;
		background-size: cover, cover;
		margin-top: 0;
	}
	div#map, div#mapid {
		width: 75vw;
	}
	article.post {
		line-height: 1.8em;
		font-size: initial;
	}
	/* Top bar for connect and register */
	#nav-connexion {
		background: #d6d6d6;
	}
	#container-home #nav-connexion {
		background: transparent;
		width: 100vw;
		color: #fff;
		position: absolute;
		font-weight: inherit;
	}
	#nav-connexion ul {
		display: flex;
		justify-content: flex-start;
	}
	#container-home #nav-connexion a:visited {
		color: #e1e1e1;
	}
	#container-home #nav-connexion a {
		color: #fff;
	}
	#nav-connexion a:visited {
		color: #444;
	}
	#nav-connexion a {
		color: #444;
	}

	/* Menu deroulant */
	#page-container #nav .sous {
		width: 60vw;
	}
	nav#nav li a i, nav#nav li a span {
		vertical-align: middle;
	}
	#header #left {
		width: 60vw;
		min-height: 40vh;
	}
	#header #right {
		width: 40vw;
		padding: 1em;
		font-size: 3vmin;
		line-height: 5vmin;
	}
	nav#nav ul {
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
	}
	nav#nav li {
		width: 25%;
	}
	nav#nav li span {
		display:inline-block;
	}
	/* Main navigation */
	#nav .sous {
		display: flex;
	}
	#nav > ul li:hover .sous {
		display: flex;
	}
	#container-home #nav span.label_menu, #page-container #nav span.label_menu {
		display: none;
	}
	/* Navigation footer - mentions légales */
	#page-container > footer {
		padding: 1em 2em 1em 1em;
	}
	#page-container nav#legal {
		width: 70vw;
		margin: auto;
	}
	#page-container nav#legal ul {
		padding-left: 0;
		line-height: inherit;
	}
	.custom .leaflet-popup-content-wrapper {
		background: #444;
		color: #fff;
		border-radius: 0;
		font-size: 1.2em;
		width: auto;
	}
	.custom .leaflet-popup-tip {
		background: #444;
	}
	.custom .leaflet-popup-content-wrapper a {
		color:  #00ffdb;
	}
	.custom .leaflet-popup-content-wrapper a:hover {
		text-decoration: none;
	}
	.custom .leaflet-popup-content-wrapper a:visited {
		color:  #00ffdb;
	}

	/* Posts style */
	article.post {
		width: 25%;
		display: inline-block;
		margin-right: 4em;
	}

	li.breadcrumb-item:last-child {
		display: block;
	}

	ul.pagination {
		align-items: center;
		font-size: inherit;
	}
	ul.pagination li {
		margin: 0;
		padding: 1em 2em;
		background: #6534FF;
		color:#fff;
	}
	ul.pagination li.active {
		color:#fff;
	}
	ul.pagination li a:visited {
		color:#fff;
	}
	ul.pagination li:hover {
		background: #333;
	}
	li.page-item:last-child, li.page-item:first-child {
	    font-size: inherit;
	    line-height: inherit;
	}
}



@media (orientation: landscape) and (min-width: 480px) and (max-width: 959px) {
	/* Tablet */
	body {
		font-size: 1em;
		line-height: 2em;
		margin: 5vh auto;
	}
	#header #right {
		font-size: 3.5vmin;
		line-height: 6vmin;
	}
	h1#title-site {
		font-size: 6vmin;
		line-height: 9vmin;
	}
	#container-home #nav-connexion {
		background: #9700ff;
		width: 100vw;
		color: #fff;
		position: static;
		font-weight: bold;
	}
	#nav-connexion a:visited {
		color: #e1e1e1;
	}
	#nav-connexion a {
		color: #fff;
	}

	#container-home nav#nav li a {
		padding: 1em 1em 1em 1em;
	}
	nav#nav ul {
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
	}
	nav#nav li {
		width: 25%;
	}
	nav#nav li span {
		display:none;
	}
	/* Main navigation */
	#nav .sous {
		display: flex;
	}
	#nav > ul li:hover .sous {
		display: flex;
	}
	#container-home #nav span.label_menu, #page-container #nav span.label_menu {
		display: none;
	}
	.custom .leaflet-popup-content-wrapper {
		font-size: 1.2em;
		width: auto;
		max-width: 50vw;
	}

	#page-container > footer {
		padding: 1em 0;
	}
	#page-container nav#legal {
		width: 70vw;
		margin: auto;
	}
	#page-container nav#legal ul {
		padding-left: 0;
		line-height: inherit;
	}

	/* Posts style */
	article.post {
		width: 45%;
		display: inline-block;
		margin-right: 1em;
	}

	li.breadcrumb-item:last-child {
		display: block;
	}

	ul.pagination {
		align-items: center;
		font-size: inherit;
	}
	ul.pagination li {
		margin: 0;
		padding: 1em 2em;
		background: #6534FF;
		color:#fff;
	}
	ul.pagination li.active {
		color:#fff;
	}
	ul.pagination li a:visited {
		color:#fff;
	}
	ul.pagination li:hover {
		background: #333;
	}
	li.page-item:last-child, li.page-item:first-child {
	    font-size: inherit;
	    line-height: inherit;
	}
}


@media (min-width: 961px) and (max-width: 1279px) {
	/* Tablet and small screen */
	#container-home main {
		flex-direction: row;
	}
	#container-home main #intro {
		width: 20vw;
	}
	div#map, div#mapid {
		width: 75vw;
	}
	/* Top bar for connect and register */
	#container-home #nav-connexion {
		background: transparent;
		width: 100vw;
		color: #fff;
		position: absolute;
	}
	/* navigation */
	nav#nav ul {
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
	}
	nav#nav li span {
		display:inline-block;
	}
	/* Main navigation */
	#nav .sous {
		display: flex;
	}
	#nav > ul li:hover .sous {
		display: flex;
	}
	#container-home #nav span.label_menu, #page-container #nav span.label_menu {
		display: none;
	}
	.custom .leaflet-popup-content-wrapper {
		background: #444;
		color: #fff;
		border-radius: 0;
		font-size: 1.2em;
		width: auto;
		max-width: 30vw;
	}

	/* Posts style */
	article.post {
		width: 25%;
		display: inline-block;
		margin-right: 2em;
	}
}


@media (min-width: 1280px) and (max-width: 2559px) {
	/* Medium and large screen */
	body {
		font-size: 1.1em;
		line-height: 1.8em;
	}

	#container-home main {
		flex-direction: row;
	}
	#container-home main #intro {
		width: 25vw;
		background: url('../img/abstract.jpg'), linear-gradient(to right,rgba(30, 75, 115, 1),rgba(255, 255, 255, 0));
		background-position-x: 0%, 0%, 0%;
		background-position-y: 0%, 0%, 0%;
		background-repeat: repeat, repeat, repeat;
		background-size: auto, auto, auto;
		background-position-x: 0%, 0%, 0%;
		background-position-y: 0%, 0%, 0%;
		background-repeat: repeat, repeat, repeat;
		background-size: auto, auto, auto;
		background-position: center;
		background-repeat: no-repeat, no-repeat;
		background-size: cover, cover;
		margin: 0;
	}
	#container-home main #intro article {
	    width: 80%;
	    margin: 1em auto;
	    padding: 1em 0;
	}
	#container-home #intro header {
		width: 80%;
	}
	div#map, div#mapid {
		width: 75vw;
	}

	.custom .leaflet-popup-content-wrapper {
		font-size: 1.2em;
		width: auto;
		max-width: 20vw;
	}

	/* Posts style */
	article.post {
		width: 21%;
		display: inline-block;
		margin-right: 2em;
		line-height: 1.8em;
	}
}


@media (min-width: 2560px) {
	/* HD 4K device */
	body {
		font-size: 2.5em;
	    line-height: 2.2em;
	}
	body #header {
		min-height: 40vh;
	}
	#header #left {
		min-height: 40vh;
	}
	nav#nav li a i, nav#nav li a span {
    	font-size: 1.5em;
	}
	.material-icons {
	   font-size: 1vmax;
	}
	#container-home main {
		flex-direction: row;
	}
	#container-home main #intro {
		width: 25vw;
	}
	div#map, div#mapid {
		width: 75vw;
	}
	.custom .leaflet-popup-content-wrapper {
		font-size: .7vmax;
		width: auto;
		max-width: 30vw;
	}
	article.post {
		line-height: 1.8em;
		font-size: 1.2em;
		margin-right: 3em;
	}
	article.post > h3 {
		border-top: 10px solid #6534FF;
	}
	input, textarea {
		font-size: inherit;
	}
}


@media print {
	/* Print */
	body, h1, h2, h1#title-home, #container-home main #intro h2 {
		color: #333;
	}
	body {
	    font-size: 1.2em;
	}
	.custom .leaflet-popup-content-wrapper a:visited, .custom .leaflet-popup-content-wrapper a {
	    color: #333;
	}
	nav, div.arrow {
		display: none;
	}
	#container-home main {
		flex-direction: column;
	}
	#container-home main #intro {
		width: 100vw;
		background: none;
	}
	div#map, div#mapid {
		width: 100vw;
	}
	#header #left {
		background: none;
		width: 100vw;
	}
	body #header {
		background:none;
		color:#333;
	}
	#header #right {
		background: none;
		width: 100vw;
		padding: 0;
		justify-content: flex-start;
		align-content: flex-start;
	}
	#left > div, #container-home header, body #header {
		justify-content: flex-start;
		align-items: flex-start;
		text-align: left;
		margin: 0;
	}
	section, #page-container #post-container {
		width: 100vw;
	}
}