@font-face {
    src: url(../../fonts/Luciole-Regular.ttf);
    font-family: "Luciole-Regular";
}
	
html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: Luciole-Regular, Tahoma, Verdana, sans-serif;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    line-height: 1.5;
}

main {
    flex: 1 1 auto;
    padding: 0 15%;
    overflow-y: auto;
}

header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 1%;
	box-shadow: 0px 10px 9px -9px rgba(153,156,153,0.37); 
}

footer {
    flex: 0 0 auto;
    padding: 1%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #76a5af;
    color: #fff;
}

.liens {
    padding: 0 1%;
}

section {
    text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

article {
	text-align: left;
	padding-top: 0;
	padding-bottom: 20px;
	padding: 0 15px 20px 0;
	width: 80%;
}

@media screen and (min-width: 992px) {
	article {
		width: 45%;
	}
}
@media screen and (min-width: 1330px) {
	article {
		width: 30%;
	}
}

h1, h2, h3 {
    color: #35747f;
}

a {
	color: #76a5af;
	text-decoration: underline;
	transition: color .3s;
}
	a:hover {
        background-color: #76a5af;
		color: #fff;
        border-radius: 0.3em;
    }

.credits-photos > a {
    background-color: #76a5af;
    color: #fff;
}
    .credits-photos > a:hover {
        background-color: #fff;
        color: #76a5af;
    }

.bt {
	background-color: #fff;
	color: #35747f;
	border: 1px solid #35747f;
    border-radius: 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 0 10px 4px;
    height: auto !important;
    overflow: hidden;
    transition: all .3s;
}

	.bt:hover {
		background-color: #35747f;
		color: #fff;
        text-decoration: none;
        box-shadow: none;        
    }

	/* BOUTON BURGER & Animation */
	header nav .burger {
		display: none;
		position: absolute;
		overflow: hidden;
		float: right;
		top: 10px;
		right: 0;
		margin: 0 1rem;
		padding: 0;
		width: 30px;
		height: 30px !important;
		font-size: 0;
		text-indent: -9999px;
		appearance: none;
		box-shadow: none;
		border-radius: 3px;
		border: none;
		cursor: pointer;
		transition: background 0.3s;

		background-color: #35747f;
	}
		.burger span {
			position: absolute;
			top: 14px;
			left: 6px;
			right: 6px;
			height: 2px;
			background: white;

			transition: background 0.3s;
		}

			.burger span::before,
			.burger span::after {
				position: absolute;
				display: block;
				left: 0;
				width: 100%;
				height: 2px;
				background-color: #fff;
				content: "";

				transition-duration: 0.3s, 0.3s;
				transition-delay: 0.3s, 0s;
			}

			.burger span::before { top: -6px; transition-property: top, transform; }
			.burger span::after { bottom: -6px; transition-property: bottom, transform; }

		/* active state, i.e. menu open */
		.burger.active { background-color: #cb0032; }
			.burger.active span { background: none; }
				.burger.active span::before { top: 0; transform: rotate(45deg);	}
				.burger.active span::after { bottom: 0; transform: rotate(-45deg); }
				.burger.active span::before,
				.burger.active span::after { transition-delay: 0s, 0.3s; }



/* RESPONSIVE big */
@media (max-width: 850px)
{
	header nav .burger {
		display: block;
	    z-index: 12;
	}

	header nav > ul {
		background-color: #fff;

		display: block;
		visibility: hidden;

		/* position: fixed !important; */
		position: absolute !important;

		left: 0;
		top: 0;
		/* bottom: 0; */

		overflow-y: auto;
		-webkit-overflow-scrolling: touch;

		width: 300px;

		margin: 0;
		padding-top: 0.5rem;

		z-index: 10;

		text-align: center;

		transition-duration: 0.3s;
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
	}
		header nav li {
			float: none;
			padding: 0;
			margin-left: 0 !important;
			border-radius: 5px;
			transition: background 0.3s;
		}
			header nav li:hover { background-color: #dfdfdf; }
			header nav li a {
				display: block;
				padding: 0.5rem;
			}

	/* Raz du header */
	.responsive-nav header { position: inherit; }
	/* Ouvertur du menu */
	.responsive-nav header nav ul {
		visibility: visible;
		transform: translateX(0);
		-webkit-transform: translateX(0);
	}
	/* Overlay menu */
	/* .responsive-nav .responsive-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
	} */
	/* Fixe le burger*/
	.responsive-nav .burger {
		/* position: fixed; */
		position: absolute;
	}

	/* mode edition : menu d'ajout invisible */
	.dragger { display: none !important; }
	#add-nav { display: none !important; }
}

/* RESPONSIVE medium */
@media (max-width: 480px)
{
	.w10, .w20, .w25, .w30, .w33, .w40, .w50,
	.w60, .w66, .w70, .w75, .w80, .w90 {
		width: auto;
		float: none;
	}

	/* @todo revoir les trailles */
	.plm, .pll { padding-left: 0; }
	.prm, .prl { padding-right: 0; }

	/* @todo revoir les trailles */
	.mrl { margin-right: 0; }
	.mll { margin-left: 0; }

	.tr, .tl { text-align: center !important; }

	article {
		/*display: inline-block; Crée un bug collateral avec l'editeur de menu ... utile ?*/
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}
		
	.editable img.fl, .editable img.fr {
		float: none;
		display: block;
		margin: 0 auto 0.5rem;
	}
	.editable img {
		max-width: 100%;
		height: auto;
	}
}

/* RESPONSIVE small */
@media (min-width: 321px) and (max-width: 640px) {
	/* quick reset in small resolution and less */
	/* .w600p, Pas utilisé 06/01/2021
	.w700p,
	.w800p,
	.w960p, */
	.mw960p {
		width: auto;
		float: none;
	}	
}

/* RESPONSIVE tiny */
@media (max-width: 320px) {
	/* quick tiny resolution reset */
	.mod {
		/* display: block !important; empèche les toggle js */
		float: none !important;
		clear: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border: 0;
	}
	.w300p {
		width: auto;
		float: none;
	}
	/* .row {  Pas utilisé 06/01/2021
		display: block !important;
		width: 100% !important;
	} */

	th,
	td {
		display: block;
		width: auto;
		text-align: left;
	}
}


/* PRINT RESET */
@media print {
	* {
		background: transparent !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	/* @todo voir pour passer les textes en noir et les images en grayscale pour plus d'écoconception */
	body {
		width: auto;
		margin: auto;
		font-family: Luciole-Regular, serif;
		font-size: 12pt;
	}
	p, .p-like,
	h1, .h1-like,
	h2, .h2-like,
	h3, .h3-like,
	h4, .h4-like,
	h5, .h5-like,
	h6, .h6-like,
	blockquote,
	ul,
	ol {
		color: #000;
		margin: auto;
	}
	.print { display: block; }
	.no-print { display: none; }
	/* no orphans, no widows */
	p,
	.p-like,
	blockquote {
		orphans: 3;
		widows: 3;
	}
	/* no breaks inside these elements */
	blockquote,
	ul,
	ol {
		page-break-inside: avoid;
	}
	/* no breaks after these elements */
	h1, .h1-like,
	h2, .h2-like,
	h3, .h3-like,
	caption {
		page-break-after: avoid;
	}
	a {	color: #000; }
	/* displaying URLs
	a[href]::after {
	content: " (" attr(href) ")";
	}
	*/
	a[href^="javascript:"]::after,
	a[href^="#"]::after {
		content: "";
	}
}