@font-face {
	font-family:Snippet;
	src:url(https://thomas-daveluy.fr/scripts/Snippet-Regular.ttf);
	font-display:swap
}
body, html {
	padding:0;
	margin:0;
	width:100%;
	min-height:100%;
	font-family:tahoma,arial,helvetica,sans-serif;
	scroll-behavior: smooth;
}
h1,h2,h3,h4,h5,h6 {
	font-family:Snippet,tahoma,arial,helvetica,sans-serif;
	font-weight:normal;
	margin:0;
}

/*HEADER*/
header, main{
	display:block;
	width:96%;
	height:90vh;
	padding:2vh 2%;
	background-size:cover;
	color:#fff;
	position:relative;
}
h1{ font-size:clamp(72px, 5.5vw, 150px); }
header h6{ font-size:clamp(25px, 2vw, 40px); line-height:clamp(12px, 1vw, 20px);margin-left:clamp(4px, .35vw, 20px)}
header>a{
	position:absolute;
	width:max-content;
	text-transform: uppercase;
	text-decoration:none;
	z-index:5;
	color:#333;
	background:#fff;
	bottom:0;
	left:50%;
	transform: translate(-50%, 20px);
	padding:10px 5px;
	line-height:20px;
	font-size:16px;
	letter-spacing:1px;
	border-radius:50px;
	box-shadow:0 2px 10px rgba(0,0,0,.5);
}
header>a:after, header>a:before{
	content:"";
	display:inline-block;
	width:8px;
	height:8px;
	border-bottom:2px solid #555;
	border-right:2px solid #555;
	margin:0 15px;
	vertical-align: top;
	margin-top:4px;
	transform: rotate(45deg);
}
nav{
	position:absolute;
	bottom:calc(2% + 20px);
	left:2.5%;
	background:rgba(255,255,255,.75);
	color:#000;
	padding:15px 20px 20px;
	border-radius:16px;
}
nav ul{padding:0;margin:0;list-style:none;}
nav ul a{
	display:block;
	line-height:34px;
	font-size:24px;
	background:#2c81c4;
	margin-top:15px;
	padding:6px 15px 3px 50px;
	border-radius:8px;
	text-decoration:none;
	color:#fff;
	font-family:Snippet,tahoma,arial,helvetica,sans-serif;
	box-shadow:0 2px 8px rgba(0,0,0,.5);
	transition:all 0.2s;
}
nav ul .dl_windows a{background:url(https://thomas-daveluy.fr/la-galerie/img/_windows.png) no-repeat 10px center #2c81c4;background-size:30px;}
nav ul .dl_mac a{background:url(https://thomas-daveluy.fr/la-galerie/img/_mac.png) no-repeat 10px center #2c81c4;background-size:30px;}
nav ul .dl_android a{background:url(https://thomas-daveluy.fr/la-galerie/img/_android.png) no-repeat 10px center #2c81c4;background-size:30px;}
nav ul a:hover{background-color:#52a9ee;box-shadow:0 2px 8px rgba(0,0,0,.25);transform: scale(1.1);}
nav ul a em{
	font-family:tahoma,arial,helvetica,sans-serif;
	font-style:normal;
	font-size:14px;
	opacity:0.5;
	float:right;
	margin-left:15px;
}
header video{
	position:absolute;
	display:block;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100%;
	object-fit: cover;
	object-position: bottom center;
}

/*MAIN*/
main{
	background:#eee;
	color:#444;
	padding:6vh 2.5vw;
	display:flex;
	flex-wrap:wrap;
	gap:2vw;
	height:auto;
	width:calc(100% - 5vw);
}
main>section{
	width:calc(67% - 2vw);
	display:block;
	position:relative;
	font-size:16px;
	line-height:22px;
}
main>section:last-of-type{width:33%;}
main>section ul{
	padding:0;
	margin:15px 0;
	list-style:none;
	font-size:18px;
	line-height:28px;
}
main>section ul em{font-style:normal;color:#49afff;}
main>section a{color:#444;text-decoration:underline dotted #49afff;}
main>section p:last-of-type{margin-bottom:0;}
main img{max-width:100%;}
main h3{margin:40px 0 0px;}

#gallery{
	display:grid;
	grid-template-columns: repeat(3, calc(33.33% - 1.33vw));
	column-gap: 2vw;
	row-gap: 2vw;
}
#gallery a{
	border-radius:10px;
	box-shadow:0 2px 6px #ccc;
	transition:all 0.2s;
	overflow:hidden;
}
#gallery a:hover{transform: scale(1.08);}
#gallery a img{
	transition:all 0.2s;
	min-width:100%;
	min-height:100%;
	transform: scale(1.05);
}
#gallery a:hover img{transform: scale(1);}
#gallery a#xlarge{grid-row: 4 / 6;grid-column : 1 / 3;}

main>section>div{
	width:calc(100% - 4vw);
	padding:1.5vw 2vw;
	border-radius:20px;
	background:#fff;
}
main>section:first-of-type>div{width:calc(100% - 4vw);margin-bottom:2vw;}
main>section:last-of-type>div{position:sticky;top: 2vw;display:block;}
main h2{
	font-size:38px;
	border-bottom:1px solid #eee;
	padding-bottom:20px;
	line-height:30px;
}

/*DOWNLOADER*/
#downloader{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:10;
	background:rgba(255,255,255,.5);
	text-align:center;
	transition:background .5s, z-index 0s 1s;
}
#downloader.close{z-index:-1;background:rgba(255,255,255,0);}
#downloader a{text-decoration:none;color:#2c81c4;border-bottom:1px dotted #777;}
#downloader>div, #downloader:after{
	display:inline-block;
	vertical-align: middle;
	max-width:1100px;
	max-height:98%;
}
#downloader:after{height:98%;width:0;content:"";}
#downloader>div{
	background:#fff;
	text-align:left;
	border-radius:25px;
	box-shadow:0 10px 25px rgba(0,0,0,.25);
	padding:20px 25px 25px;
	width:calc(98% - 50px);
	color:#555;
	transition:transform 0.25s;
}
#downloader.close>div{transform: scale(0);}
#downloader h2{
	font-size:32px;
	padding-bottom:15px;
	padding-right:40px;
	border-bottom:1px solid #ddd;
	color:#000;
	display:block;
	position:relative;
}
#downloader h2 span{
	display:block;
	position:absolute;
	top:0;
	right:0;
	width:36px;
	height:36px;
	text-align:center;
	font-size:60px;
	line-height:32px;
	cursor:pointer;
	opacity:0.3;
	overflow:hidden;
}
#downloader h2 span:after{content:"\00D7";}
#downloader h2 span:hover{opacity:1;}
#downloader .nota{
	border:4px dotted #f00;
	border-radius:14px;
	padding:15px;
	animation:alert infinite alternate 2s;
}
@keyframes alert{from{border-color:#f00;}to{border-color:#faa;}}
#downloader .nota h3{
	color:#f00;
	font-weight:bold;
	font-size:26px;
	margin-bottom:15px;
}
#downloader .nota p{color:#000;margin:5px 0;}
#downloader .nota img{margin:15px auto 0;display:block;max-width:100%;}

@media screen and (max-width:600px){
	header, main{padding:2vh 6%;width:88%;}
	header{height:85vh;}
	header nav{left:6%;width:78%;bottom:8%;}
	main {padding: 2vh 3vw;width:calc(100% - 6vw);}
	main section{padding-top:6vh;width:100%!important;}
	main section:last-of-type{padding-top:0;}
	main section>div{padding:2vh 4vw;width:calc(100% - 8vw)!important;}
}