/* TYPO
************************************************************************************************************************/


@font-face {
	font-family: 'QuentinRegular';
	src:         url('fonts/QuentinRegular.eot?#iefix') format('embedded-opentype'), url('fonts/QuentinRegular.otf') format('opentype'),
	             url('fonts/QuentinRegular.woff') format('woff'), url('fonts/QuentinRegular.ttf') format('truetype'), url('fonts/QuentinRegular.svg#QuentinRegular') format('svg');
	font-weight: normal;
	font-style:  normal;
	}

body {
	font-family: 'Roboto', sans-serif;
	
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	html {
		width:      100vw;
		overflow-x: hidden;
		}
	}

/* EN-TÈTE */
#header {
	padding:         1vw;
	display:         flex;
	justify-content: space-between;
	width:           80vw;
	margin:          3vh auto 0;
	}

#header #logo {
	color: #222;
	}

#header #logo:hover {
	color: #222;
	text-decoration: none;
	}

#header h1 {
	font-family: 'QuentinRegular';
	font-size:   4vw;
	margin:0;
	}

#header h2 {
	font-size: 2vw;
	margin: 0;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	#header {
		width: 95vw;
		}
	
	#header h1 {
		font-size: 8vw;
		}
	
	#header h2 {
		font-size: 3vw;
		margin-bottom: 20px;
		}
		
		
	}


/* NAVIGATION
************************************************************************************************************************/

nav {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

nav a {
	color:       #444;
	margin-left: 1em;
	}

nav a.active {
	font-weight: 900;
	color:       black;
	}

nav a:hover {
	color: black;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	#btn-mobile-menu {
		position:  fixed;
		font-size: 6vw;
		padding:   .5em;
		margin:    0;
		width:     10vw;
		top:       20px;
		right:     3vw;
		z-index:   99900000;
		display:   block;
		color:     #333;

		}
	
	#btn-mobile-menu:before {
		content:     "\f0c9";
		font-family: "Font Awesome 5\ Free";
		font-weight: 900;
		color:       #333;
		}
	
	.nav-on #btn-mobile-menu:before {
		
		content:     "\f00d";
		font-family: "Font Awesome 5\ Free";
		font-weight: 900;
		color:       white;
		}
	
	#accueil #btn-mobile-menu:before {
		color: #312783;
		}
	
	#accueil.nav-on #btn-mobile-menu:before {
		color: white;
		}
	
	.nav-on {
		overflow: hidden;
		
		}
	
	#header nav {
		position:        fixed;
		top:             0;
		left:            0;
		width:           100vw;
		height:          100vh;
		display:         none;
		flex-direction:  column;
		justify-content: flex-start;
		padding-top:     10vh;
		}
	
	#header nav div {
		display: block;
		margin:  0;
		padding: 0;
		width:   100%;
		}
	
	#header nav a {
		font-size:   24px;
		text-align:  center;
		padding:     .6em;
		text-align:  center;
		width:       100%;
		display:     block;
		color:       white;
		margin:      0;
		font-family: 'QuentinRegular';
		}
	
	#accueil #header nav a {
		color: white;
		
		}
	
	.nav-on #header nav {
		display:                 flex;
		background-color:              rgba(0, 0, 0, 0.7);
		-webkit-backdrop-filter: blur(10px);
		z-index:                 10000;
		background-image: url(../img/bg-menu-mobile.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		}
		
	}

/* FILTRE
************************************************************************************************************************/
#filters {
	
	display:         flex;
	flex-direction:  column;
	border-collapse: collapse;
	margin:          0 auto 5vh;
	justify-content: space-between;
	width:           80vw;
	font-family:     'QuentinRegular';
	font-size:       1vw
	}

#filters .filter-row {
	display:         flex;
	justify-content: space-between;
	
	}

#filters .filter {
	display:         flex;
	overflow:        hidden;
	width:           100%;
	justify-content: space-between;
	margin:          1px;
	}

#filters .filter a {
	padding:          1em;
	width:            auto;
	cursor:           pointer;
	transform-origin: center center;
	transition:       .2s box-shadow ease;
	flex-grow:        1;
	text-align:       center;
	}

#filters .filter a.main {
	flex: 0 0 12vw
	}

#filters .filter a:hover {
	z-index:    100;
	/*transform: scale(1.1);*/
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	}

#filters .filter .picto {
	width:        2em;
	height:       2em;
	justify-self: center;
	align-self:   center;
	margin:       -.2em .2em 0 0;
	}

#filters .filter a.selected {
	background: rgba(0, 0, 0, .5);
	color:      white;
	}

#filter-ressources_durees .label {
	display: none;
	}

.search {
	margin:          1px;
	/*margin: .5vw;*/
	background:      silver;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

#search {
	border:  1px solid silver;
	/*border-radius: 100px;*/
	/*padding: 1em;*/
	margin:  1vh;
	padding: .2em;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	#filters {
		width:     100vw;
		margin:    0 0 5vh 0;
		padding:   0;
		font-size: 3.4vw
		}
	
	#filters .filter-row {
		display: block;
		}
	
	#filters .filter {
		flex-wrap: wrap;
		}
	
	#filters .filter a {
		text-align: center;
		padding:    1.3em .1em;
		}
	
	#filters .filter a.main {
		flex: 0 0 33%;
		
		}
	
	#filter-ressources_categories a {
		flex: 0 0 33%
		}
	
	.search {
		padding: .8em 0;
		}
		
	}

/* RESSOURCES */
#rsrc-container {
	display:        flex;
	flex-wrap:      wrap;
	flex-direction: row;
	width:          100%;
	padding-bottom: 10vh;
	}

.rsrc-item {
	/*width: 22.7vw;*/
	/*height: 22.7vw;*/
	/*margin: 1vw;*/
	transition:    .2s transform ease;
	/*border-radius: 10px;*/
	/*text-decoration: none;*/
	padding:       1vh;
	width:         79vw;
	margin:        0 auto 1vh;
	display:       flex;
	border-bottom: 1px dotted grey;
	}

.rsrc-item:hover {
	text-decoration: none;
	transform:       scale(1.05);
	box-shadow:      0 4px 8px rgba(0, 0, 0, .2);
	border:          0
	}

.rsrc-item .thumb {
	min-height: 100%;
	width:      100%;
	flex:       0 0 30%;
	}

.rsrc-item .legende {
	/*opacity: 0;*/
	flex:            0 0 60%;
	width:           100%;
	height:          100%;
	color:           #333;
	text-decoration: none;
	padding:         1.7em;
	border-radius:   10px;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	transition:      .6s opacity ease;
	font-size:       1.5vw;
	}

.rsrc-item .legende h3 {
	font-weight:   900;
	/*font-size: 120%;*/
	border-bottom: 2px solid white;
	font-family:   'QuentinRegular';
	font-size:     1.3vw;
	}

.rsrc-item .legende h6 {
	font-weight: 300;
	
	font-size:   1.1vw;
	}

.rsrc-item:hover .legende {
	/*opacity: 1;*/
	/*background: rgba(0,0,0,.3);*/
	/*-webkit-backdrop-filter: blur(20px);*/
	/*text-decoration: none;*/
	}

.rsrc-item .details {
	flex:            0 0 10%;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-align:      right;
	}

.rsrc-item .details div {
	margin: 5px 0;
	}

.rsrc-item .lien {
	color:     silver;
	font-size: 1vw;
	}


@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	#rsrc-container {
		display: block;
		width:   100vw;
		}
	
	.rsrc-item {
		width:          95vw;
		display:        flex;
		flex-direction: column;
		margin-bottom:  5vh;
		padding-bottom: 5vh;
		border-bottom:  1px dotted grey;

		}
	
	.rsrc-item .thumb {
		height: 25vh;
		flex:   none;
		/*order:1;*/
		}
	
	.rsrc-item .legende {
		display: block;
		flex:    none;
		/*order:2;*/
		}
	
	.rsrc-item .legende h3 {
		font-size: 4vw;
		height:    auto;
		
		}
	
	.rsrc-item .legende h6 {
		font-size: 4vw;
		}
	
	.rsrc-item .details {
		flex:            none;
		/*flex-wrap: wrap;*/
		position:        absolute;
		/*order:0;*/
		width:           available;
		flex-direction:  row;
		justify-content: space-between;
		/*margin-top: -2em;*/
		background:      rgba(255, 255, 255, .6);
		text-align:      center;
		
		}
	
	.rsrc-item .details div {
		
		/*margin: 0 1em;*/
		}
	
	.rsrc-item .details div.left {
		margin-right: 1em;
		
		}
	
	.rsrc-item .details div.right {
		margin-left: 1em;
		
		}
	
	.rsrc-item .lien {
		font-size: 12px;
		}
		
	}


.empty {
	width: 40vw;
	margin: 10vh auto;
	text-align: center;
	font-size: 150%;
}

.empty a {
	color:#97C2F4
}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	.empty {
		width: 90vw;
		font-size: 100%;
	}
}

/* CONTENU
************************************************************************************************************************/
#a-propos, #edito {
	background: url(../img/bg-a-propos.png) no-repeat;
	background-position: center bottom;
	background-size: contain;
	min-height: 100vh;
	}

#proposer {
	background: url(../img/bg-proposer.png) no-repeat;
	background-position: center bottom;
	background-size: contain;
	min-height: 100vh;
	}

#content {
	width:     50vw;
	margin:     0 auto 7vh;
	font-size: 120%;
	padding:   2vh 0 ;
	background: rgba(255,255,255,.9);

	}

#content h3 {
	font-family: QuentinRegular;
	margin:      2em 0 .5em;
	}

#partenaires {
	display:   flex;
	flex-wrap: wrap;
	}

.partenaire {
	display: block;
	width:   15vw;
	height:  7.5vw;
	}

#esp-form {
	padding-top: 5vh;
	
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	#content {
		width: 90vw;
		margin-bottom: 20vh;
		}
	
	.partenaire {
		display: block;
		width:   40vw;
		height:  20vw;
		}
	}

/* FORMULAIRES
************************************************************************************************************************/


small.error {
	display: none;
	}


.success-message {
	color:         white;
	background:    rgb(143, 210, 115);
	padding:       1em 1em;
	text-align:    center;
	margin-top:    5em;
	border-radius: 8px;
	}

.success-message img, .error-message img {
	width: 20vw;
	}

.error-message {
	color:         white;
	background:    rgba(210, 82, 86, 1);
	padding:       1em 1em;
	text-align:    center;
	margin-top:    5em;
	border-radius: 8px;
	}

#esp-form {
	width:  90%;
	margin: 0 auto;
	}

#esp-form label {
	width:          100%;
	padding-bottom: 1em;
	}

#esp-form label span {
	font-weight: bold;
	display:     block;
	}

#esp-form img {
	margin-right: 1em;
	}

#esp-form textarea {
	width:         100%;
	height:        8em;
	border:        1px solid #ddd;
	border-radius: 4px;
	}

.btn-grey {
	background: rgba(0, 0, 0, .2);
	color:      black;
	}

.btn-grey:hover {
	color: black;
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	
	}

/* PIED DE PAGE
************************************************************************************************************************/
#footer {
	background: url(../img/loader.gif) no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	padding: 8em;
  display: none;
	}

#footer.show {
	display: block;
	}