/*THIS TEMPLATE IS DESIGNED MOBILE-FIRST*/
@font-face{
	font-family:"Font Awesome 5 Pro";
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url(./ressources/pro-fa-solid-900-5.0.0.eot);
	src: url(./ressources/pro-fa-solid-900-5.0.0.eot?#iefix) format("embedded-opentype"),
		 url(./ressources/pro-fa-solid-900-5.0.0.woff2) format("woff2"),
		 url(./ressources/pro-fa-solid-900-5.0.0.woff) format("woff"),
		 url(./ressources/pro-fa-solid-900-5.0.0.ttf) format("truetype"),
		 url(./ressources/pro-fa-solid-900-5.0.0.svg#fontawesome) format("svg");
	unicode-range:U+f002,U+f008-f009,U+f00b-f00c,U+f00e,U+f011,U+f013,U+f019,U+f01c,U+f022-f025,U+f02a-f02b,U+f02d,U+f030,U+f041,U+f044,U+f049-f04a,U+f04e,U+f050,U+f052-f055,U+f057-f05b,U+f05e,U+f060-f066,U+f068-f06a,U+f074,U+f077-f07a,U+f07c,U+f085,U+f089,U+f093-f094,U+f098,U+f09c-f09e,U+f0a4-f0ab,U+f0b2,U+f0c1,U+f0c3,U+f0c6,U+f0c9,U+f0ce,U+f0d7-f0db,U+f0e2-f0e3,U+f0e9-f0ea,U+f0f4,U+f0f8,U+f0fa-f0fe,U+f100-f103,U+f106-f108,U+f10a-f10b,U+f11c,U+f120-f122,U+f124,U+f126-f128,U+f12e,U+f134,U+f137-f13a,U+f13e,U+f141-f143,U+f146,U+f14a-f14b,U+f14d,U+f150-f154,U+f156-f159,U+f182-f183,U+f191-f192,U+f195,U+f199,U+f1ad-f1ae,U+f1b0,U+f1b2-f1b3,U+f1b8,U+f1bb,U+f1c0,U+f1cd,U+f1d8,U+f1da,U+f1e0-f1e2,U+f1ea,U+f1fa,U+f1fd-f1fe,U+f204-f206,U+f20b,U+f217-f218,U+f21c,U+f222,U+f224,U+f226-f229,U+f233,U+f238-f239,U+f240-f244,U+f246,U+f255-f258,U+f25a-f25c,U+f28b,U+f28d,U+f290-f292,U+f295,U+f2a1-f2a4,U+f2a8,U+f2c7-f2cb,U+f2ce,U+f2d0,U+f2d2,U+f2db,U+f2e7,U+f2ea,U+f2f1,U+f2f5-f2f6,U+f2f9,U+f303,U+f309-f30c,U+f328,U+f337,U+f358-f35b,U+f360,U+f362,U+f3be-f3bf,U+f3c5,U+f3cd,U+f3e5,U+f3ed,U+f3fa,U+f410
}
@font-face {
    font-family: "montserrat";
    font-style: normal;
    font-weight: normal;
    src: local("montserrat"), url("./resources/montserrat.ttf") format("truetype"), url("./ressources/montserrat.woff") format("woff");
    font-display: swap;
}
/*######### Fontawesome-light classes #########*/
.fa,.fab,.fad,.fal,.far,.fas{
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
	display:inline-block;
	font-style:normal;
	font-variant:normal;
	text-rendering:auto;
	line-height:1
}
.fas{
	font-family:"Font Awesome 5 Pro";
	font-weight:900
}
.fa-download:before{
	content:"\f019";
}
/*######### Common classes #########*/
html{
	--font-size-small: 0.8rem;
	font-family: montserrat;
	--color-box: #000000;
	--color-btn: #000000;
	--color-grey: #888888;
	font-size: 18px;
	text-align: center;
	box-sizing: border-box;
}
body{
	display: flex;
	flex-direction: column;
	height: 100vh;
}
a{
	text-decoration: unset;
	color: var(--color-btn, #000000);
}
/*******classe: "imgBackground"*******/
.imgBackgroundContainer{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-grow: 1;
	flex-shrink: 1;
	margin: 0.5em;
}
.imgBackground{
	--imgWidth: 0;
	--imgHeight: 1;
	background-image: url();
	width: 100%;
	height: 0;
	padding-top: calc(var(--imgHeight) / var(--imgWidth) * 100%);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: contain;
}
.imgClick{
	position: absolute;
	left:0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/*######### Header #########*/
header{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	border-bottom: 2px solid var(--color-box, #000000);
}
header .content{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}
.logoList{
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	flex-shrink: 1;
	max-width: 100%;
}
.headerLogo_2{
	display: none;
}
.logoList.end{
	display: none;
}
#navigation{
	display: flex;
	flex-grow: 1;
	margin-left: 0.5em;
	font-size: 1.1rem;
}
#navigation ul{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}
#navigation li{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 1.3em;
	padding: 0;
	list-style-type: none;
	border-top: 6px solid transparent;
}
#navigation li:hover,#navigation .active {
	border-top-color: var(--color-btn,#000000);
} 
#navigation a{
	padding: 0.5em;
	color: unset;
	font-weight: bold;
}
#slogan{
	font-size: var(--font-size-small, 0.8rem);
	font-style: italic;
}
/*######### Content #########*/
#pages{
	--max-content-width: 1650px;
	display: flex;
	flex-direction: column;
	flex-grow:1;
	margin-top: 0.5em;
	overflow: auto;
	min-height: 300px;
}
#content{
	display: flex;
	flex-grow:1;
	flex-direction: column;
	align-items: center;
}
.description{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0.5em;
	max-width: var(--max-content-width, 1400px);
}
.description li{
	text-align: left;
}
.page_links{
	display: flex;
	margin: 0 0.5em;
	max-width: var(--max-content-width, 1400px);
	justify-content: center;
	flex-wrap: wrap;
}
.links{
	display: flex;
	flex-direction: column;
	flex-grow: 1;	
	margin: 0.5em;
	border-bottom: 2px solid var(--color-box, #000000);
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.links_title{
	padding: 1em;
	background-color: var(--color-box, #000000);
	color: #FFFFFF;	
	font-weight: bold;
}
.links_description{
	flex-grow:1;
	padding: 1em;
	font-size: var(--font-size-small, 0.8rem);
}
.links_description ul{
	padding-inline-start: 1em;
}
.links_description li{
	text-align: left;
}
.links_btn{
	display: flex;
	justify-content: center;
	font-weight: bold;
}
.links_btn a{
	display: flex;
	align-items: center;
	margin: 0.5em;
	padding: 0.5rem 1rem 0.5rem 1rem;
	border: 1px solid var(--color-btn, #000000);
	background-color: var(--color-btn, #000000);
	color: #FFFFFF;
	font-size: var(--font-size-small, 0.8rem);
	-webkit-animation: fadein 0.5s;
	-moz-animation: fadein 0.5s;
	-ms-animation: fadein 0.5s;
	-o-animation: fadein 0.5s;
	animation: fadein 0.5s;
	transition: background-color 0.3s linear;
}
.links_btn a:hover
{
	color: var(--color-btn, #000000);
	background-color: #FFFFFF;
}
.after_links{
	margin: 0 0.5em;
}
.after_links ul{
	padding: 0;
}
.after_links li {
    list-style-type: none;
}
.list_files{
	margin: 1em 0.5em;
	width: 100%;
	max-width: var(--max-content-width, 1400px);
}
.list_files ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
}
.list_files li {
	margin: 0.5em;
	padding: 0;
	display: flex;
	flex-grow: 1;
	text-align: start;
	border: 1px solid var(--color-box, #000000);
}
.list_files a {
	display: flex;
	flex-direction: column;
	padding: 0.5em;
	color: #000000;
}
.files_title{
	font-weight: bold;
}
.files_content_container{
	display: flex;
	flex-grow: 1;
	font-size: var(--font-size-small, 0.9rem);
}
.files_content{
	display: flex;
	flex-direction: column;
}
.files_description{
	display: flex;
	flex-grow: 1;
	font-size: 0.75rem;
	color: var(--color-grey, #888888);
}
.files_btn{
	text-align: center;
}
.files_icon{
	display: flex;
	align-items: flex-end;
	margin-left: 0.25em;
	font-size: 1.5em;
	color: var(--color-btn, #000000);
}
/*######### Footer #########*/
#footer{
	font-size: var(--font-size-small, 0.8rem);
	text-align: left;
	padding: 0.6em;
	border-top: 2px solid var(--color-box, #000000);
}
@media (min-width: 860px){
	html{
		--font-size-small: 0.9rem;
	}
	.description{
		margin: 0 1em;
	}
	.links{
		margin: 1em;
		width: 45%;
		max-width: 45%;
	}
	.after_links{
		margin: 0 1em;
	}
	.list_files li{
		max-width: 30%;
	}
}