/*
MAIN COLOR

background-color:#099a1d;
*/
/*----- FONT -----*/
@font-face
{
	font-family: myNilland;
	font-weight:bold;
	src: url("../fonts/nilland_bold.ttf");
}
@font-face
{
	font-family: myNilland;
	font-weight:900;
	src: url("../fonts/nilland_black.ttf");
}
/*----- SHARED -----*/
*{
	margin: 0;
	padding:0;
}
html, body {
	height: 100%;
	min-height: 100vh;
	font-size: 1rem;
	font-family:Verdana, Geneva, Helvetica, Arial, sans-serif;
	line-height: 1.2;
}
h1, h2, h3, h4{
	font-family: myNilland, Nilland, Helvetica, Arial, sans-serif;
}
h3{
	font-weight:900;
	font-size: 1.5rem;
}
h4{
	font-weight:900;
	font-size:1.2rem;
}
h1, h2{
	font-weight:900;
}
.tagline{
	font-size: 1.5em;
	font-family: myNilland, Nilland, Helvetica, Arial, sans-serif;
}
header, footer, .bloc-texte{
	padding:1rem;
}
/*----- SPLASH -----*/
#splash {
	height: 100vh;
	min-height: 100vh;
	_background-color:#099a1d;
    
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	_position:fixed;
	z-index:-10;
}
#splash video {
	height:98%;
	width:100%;
	object-fit: cover;
    background:transparent;
	position:fixed;
	background-image: linear-gradient(#adc 10%, #099a1d 80%, darkgreen 100%);
	z-index:-1;
}
/*----- HEADER -----*/
header {
	z-index: 100;
	position:fixed;
	top:0;left:0;right:0;
	background-color:#099a1d;
	color:white;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
	display:flex;
	justify-content: center;
	align-items: center;
	font-size:.9rem;
	transition-duration:.5s;
	_opacity:.5;
}

header .logo{
	height:90px;
	transition-duration:.5s;
}
header .logo img{
	max-height:100%;
	height:100%;
}
header .wide{
	flex:2;
	padding:0 1rem;
}
header .contact {
	display:flex;
	flex-direction: column;
	gap:5px
}
header .contact a{
	display:flex;
	color:white;
	text-decoration:none;
	align-items: center;
}
header .contact a:hover{
	background-color:#006317;
	outline:2px solid #006317;
}
.verbose{
	display:none;
	padding:0 5px;
}

/*----- MAIN -----*/
section {
	backdrop-filter: blur(5px) saturate(0) url(#colorMatrix);
}
section p{
	margin-top:5px;
}
section .bloc-texte{
	background-color:rgba(9,154,29,.2);
	padding-top:120px;
	box-shadow: 0 5px 5px rgba(0, 0, 0, .3), 0 5px 5px rgba(0, 0, 0, .3) inset;	
		
}
#presentation .bloc-texte, #end-contact .bloc-texte{
	padding-top:1rem;
	background-color:white;
	line-height:1.3;
	text-align:justify;
}
#presentation h1, #presentation h2, #presentation h3, #presentation .tagline{
	text-align:center;
}
.texte {
	background-color:rgba(255,255,255,.8);
	padding:1rem;
}
.pics{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: .5rem;
	padding:1rem;
	justify-content:center;
	background-color:white;
}
.pic{
	background-color:silver;
	width:100%;
	height:100%;
	cursor:pointer;
}
.pic:hover{
	outline:2px solid #099a1d;
}
.pic img{
	width:100%;
	height:100%;
}
#end-contact a{
	padding:1px 5px;
	color:#099a1d;
}
#end-contact a:hover{
	color:white;
	background-color:#099a1d;
	text-decoration:none;
}
/*----- FOOTER -----*/
footer {
	background-color:#099a1d;
	text-align:center;
	color:white;
	box-shadow:0 5px 5px rgba(0, 0, 0, .3) inset;
}
footer {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	gap:5px
}
footer .links{
	vertical-align:top;
}
footer .links a{
	margin:.2rem;
}
/*----- PIC BOX -----*/
#pic_box{
	position:fixed;
	display:grid;
	grid-template-columns: 1fr;
	place-content: center center;
	top:0;
	left:0;
	right:0;
	bottom:100%;
	background-color:grey;
	transition-duration:.5s;
	overflow:hidden;
	text-align:center;
	background:grey url("../interface/load.gif") no-repeat center;
	font-style:italic;
}
#pic_box img{
	object-fit:contain;
	width:100%;
	height:100%;
	max-width:1000px;
	max-height:1000px;
	min-height:100px;
	margin:auto;
	color:silver;
	text-align:center;
}

#pic_box video{
	object-fit:contain;
	width:100%;
	height:100%;
	max-width:1000px;
	max-height:1000px;
	min-height:100px;
	margin:auto;
	color:silver;
	text-align:center;
}

.pic-box-text{
	background-color:silver;
	display:block;
	margin:.5rem auto;
	padding:.5rem 1rem;
	transition-duration:.5s;
}
/*----- MEDIA QUERIES -----*/
@media (min-width: 600px) {
	.pics{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.verbose{
		display:inline;
	}
	.texte {
		display:inline-block;
	}
}

@media (min-width: 800px) {
	.pics, .bloc-texte, header, footer{
		padding-left:10%;
		padding-right:10%;
	}
	.pic-box-text{
		width:80%;
	}
	br {
		display:none;
	}
}

@media (min-width: 1000px) {
	.pics, .bloc-texte, header, footer{
		padding-left:15%;
		padding-right:15%;
	}
	.pic-box-text{
		width:70%;
	}
}