@keyframes fade_in {
	0%	{ opacity: 0; }
	100%	{ opacity: 1; }
}
@keyframes logo_in {
	0%	{ transform: rotate(-90deg); }
	20%	{ transform: rotate(8deg); }
	40%	{ transform: rotate(-2deg); }
	60%	{ transform: rotate(0.5deg); }
	80%	{ transform: rotate(-0.125deg); }
	100%	{ transform: rotate(0deg); }
}
@keyframes logo_shake {
	0%	{ transform: rotate(0deg); }
	20%	{ transform: rotate(-16deg); }
	40%	{ transform: rotate(4deg); }
	60%	{ transform: rotate(-1deg); }
	80%	{ transform: rotate(0.25deg); }
	100%	{ transform: rotate(0deg); }
}
@keyframes icon_shake {
	0%	{ transform: scale(1); }
	25%	{ transform: scale(1.08); }
	50%	{ transform: scale(0.98); }
	75%	{ transform: scale(1.005); }
	100%	{ transform: scale(1); }
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	background: radial-gradient(farthest-corner at 50% 50%, #fff 50%, #ddd 95%, #ccc) fixed;
	font-family: Arial, sans-serif;
}
body>*:nth-last-child(2) {
	flex-grow: 1;
}
a {
	color: #888;
	text-decoration: none;
	text-shadow: #fff 0 1px 0;
	transition: 400ms;
}
a:hover {
	color: #18f;
}
header>h1 {
	margin: 0 0 32px;
	padding: 256px 0 32px;
	position: relative;
	font-size: 18px;
	font-weight: normal;
	text-transform: uppercase;
	text-indent: 18px;
	letter-spacing: 18px;
	text-align: center;
	color: #048;
	text-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 8px rgba(0,16,8,0.2), 0 0 24px rgba(0,16,8,0.2);
	animation: fade_in 3s;
	transition: 0.3s;
}
header>h1::before {
	content: '';
	width: 192px;
	height: 192px;
	margin: -96px;
	border-radius: 50%;
	position: absolute;
	top: 128px;
	left: 50%;
	display: block;
	background: url('../icons/picoTools/icon.svg');
	animation: logo_in 2s 0.1s;
	transition: 0.3s;
}
header>h1:hover::before {
	animation: logo_shake 0.5s;
}
h2 {
	margin: 16px 0 0;
	padding: 0 0 0 32px;
	border-bottom: dashed 1px #58c;
	font-size: 24px;
	color: #58c;
	text-transform: uppercase;
}
main {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 32px;
}
main>p {
	font-size: 24px;
}
main>section>p {
	font-size: 20px;
}
#valeurs {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
#valeurs>li {
	margin: 8px;
	padding: 16px 32px 32px;
	border-radius: 4px;
	flex: 1 0 0;
	background: linear-gradient(#06f, #048) fixed;
	list-style: none;
	color: #fff;
}
@keyframes load_img {
	0%	{ background-image: url('images/valeurs_a.svg'); }
	100%	{ background-image: none; }
}
#valeurs>li::before {
	width: 128px;
	height: 128px;
	margin: 8px auto;
	display: block;
	background: url('images/valeurs.svg') 0 / 256px;
	animation: load_img 0.1s;
}
#valeurs>li:hover::before {
	background: url('images/valeurs_a.svg') 0 / 256px;
}
#valeurs>#v_ergo::before {
	content: '';
	background-position: -128px 0;
}
#valeurs>#v_optim::before {
	content: '';
	background-position: 0 -128px;
}
#valeurs>#v_souv::before {
	content: '';
	background-position: -128px -128px;
}
#valeurs>li>h3 {
	margin: 16px 4px;
	padding: 0;
	border: none;
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 8px;
	text-align: center;
	color: #fff;
	transition: 0.3s;
}
#valeurs>li>p {
	margin: 4px 0;
	font-size: 15px;
	text-align: justify;
	text-indent: 8px;
	hyphens: auto;
}
#valeurs>li>p:nth-child(2) {
	margin: 0 0 12px;
	font-size: 19px;
	text-indent: 0;
}
#valeurs a {
	padding: 0 4px;
	border: solid 1px rgba(255,255,225,0.7);
	border-radius: 3px;
	color: #fff;
	text-shadow: none;
}
#valeurs a:hover {
	border: solid 1px #fff;
	background: rgba(255,255,225,0.1);
}
.items>ul {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
}
.items>ul:hover {
	position: relative;
	z-index: 1;
}
.items>ul>li {
	margin: 16px;
	padding: 16px;
	border-radius: 4px;
	position: relative;
	background: #f0f4f8 linear-gradient(#fafcff, #f0f4f8) no-repeat;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.1);
	text-align: center;
	transition: 0.3s;
}
.items>ul>li:hover {
	background-position: 0 -160px;
	animation: none;
}
.items>ul:hover>li:nth-child(1) { animation: icon_shake 0.5s; }
.items>ul:hover>li:nth-child(2) { animation: icon_shake 0.5s 0.05s backwards; }
.items>ul:hover>li:nth-child(3) { animation: icon_shake 0.5s 0.1s backwards; }
.items>ul:hover>li:nth-child(4) { animation: icon_shake 0.5s 0.15s backwards; }
.items>ul:hover>li:nth-child(5) { animation: icon_shake 0.5s 0.2s backwards; }
.items>ul:hover>li:nth-child(6) { animation: icon_shake 0.5s 0.25s backwards; }
.items>ul:hover>li:nth-child(7) { animation: icon_shake 0.5s 0.3s backwards; }
.items>ul:hover>li:nth-child(8) { animation: icon_shake 0.5s 0.35s backwards; }
.items>ul:hover>li:nth-child(9) { animation: icon_shake 0.5s 0.4s backwards; }
.items>ul:hover>li:hover { animation: none; }
.items>ul>li::before {
	content: '';
	width: 160px;
	margin: 192px 16px 16px;
	border-bottom: dotted 3px rgba(0,0,0,0.1);
	display: block;
}
#dev.items>ul>li::before {
	width: 80px;
	margin: 96px 16px 16px;
}
.items>ul>li a::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.items>ul>li>img {
	width: 160px;
	height: 160px;
	margin: -80px;
	position: absolute;
	top: 104px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
}
#dev.items>ul>li>img {
	width: 80px;
	height: 80px;
	margin: -40px;
	top: 52px;
}
.items>ul>li:hover>img {
	transform: scale(1.2);
}
.items>ul>li>h3 {
	font-size: 18px;
	font-weight: normal;
}
.items>ul>li>div {
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0 0;
	padding: 4px 16px;
	border-radius: 3px;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	background: rgba(0,0,0,0.8);
	backdrop-filter: blur(8px);
	opacity: 0;
	font-size: 14px;
	text-align: left;
	color: #fff;
	transition: 0.3s;
	pointer-events: none;
}
.items>ul>li:hover>div {
	opacity: 1;
}
.items>ul>li>div::before {
	content: '';
	width: 8px;
	height: 8px;
	margin: -4px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: rotate(45deg);
	background: #333;
}
.items>ul>li>div>ul {
	margin: 0;
	padding: 0 0 4px 8px;
	font-size: 12px;
}

#auteur {
	margin: 16px 0 0;
	padding: 16px 32px;
	border-radius: 4px;
	overflow: auto;
	background: linear-gradient(#444, #222) fixed;
	color: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 8px rgba(0,0,0,0.2);
}
#auteur>h3 {
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: dotted 1px #fff;
	border-left: none;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	text-transform: uppercase;
}
#auteur>.portrait {
	display: block;
	transition: 0.3s;
}
#auteur>.portrait:hover {
	transform: scale(1.05);
}
#auteur>.portrait>picture>img {
	margin: 0 auto;
	border-radius: 3px;
	display: block;
	text-align: center;
	color: rgba(255,255,255,0.5);
}
#auteur>p {
	margin: 16px 0 0;
	font-size: 16px;
	text-align: justify;
	hyphens: auto;
}
#auteur a {
	color: #def;
	text-shadow: none;
	transition: 0.2s;
}
#auteur a:hover {
	color: #fff;
	text-shadow: 0 0 2px rgba(255,255,255,0.8), 0 0 8px rgba(224,240,255,0.8);
}
footer {
	box-sizing: border-box;
	width: 100%;
	margin: 32px 0 0;
	padding: 16px;
	background: #222;
	font-size: 14px;
	text-align: center;
	color: #ddd;
}
footer>p {
	font-size: 12px;
	color: rgba(255,255,255,0.5);
}
footer a {
	color: #bcd;
	text-decoration: none;
	text-shadow: none;
	transition: 0.2s;
}
footer a:hover {
	color: #fff;
	text-shadow: 0 0 2px rgba(255,255,255,0.8), 0 0 8px rgba(224,240,255,0.8);
}

@media screen and (min-width: 512px) {
	header>h1 {
		padding: 320px 0 32px;
		font-size: 24px;
		text-indent: 24px;
		letter-spacing: 24px;
	}
	header>h1::before {
		width: 256px;
		height: 256px;
		margin: -128px;
		top: 160px;
	}
	#valeurs>li>h3 {
		font-size: 18px;
		letter-spacing: 12px;
	}
	#auteur>.portrait {
		display: inline-block;
		margin: 0 12px 8px 0;
		float: left;
	}
}