:root
{
--marges: 0;
}

/* HEADER */

body {overflow: hidden;}
header
{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background: url(Fonds/Entete.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
filter: drop-shadow(0 0 2vmin rgba(0,0,0,0.75));
}
header > div
{
display: flex;
position: relative;
right: -15vw;
flex-direction: column;
align-items: center;
justify-content: center;
mask: linear-gradient(transparent, white) no-repeat bottom;
animation: apparitionTitre 1.75s both;
}
@keyframes apparitionTitre {
	0% {
	transform: scale(0.7);
	mask-size: 100% 25%;
	filter: opacity(0.5);
	}
	75% {
	transform: scale(1);
	mask-size: 100% 400%;
	filter: opacity(1);
	}
	100% {
	mask-size: 100% 1000%;
	}
}
header h1 {}
header h1 img {height: 40vmin;}
header h2
{
font-size: calc(10px + 10vmin);
padding-top: 0.1em;
}
#defile
{
display: none;
--couleur: white;
--ombre: transparent;
}
header div
{
z-index: 3;
padding: 0 1em;
white-space: wrap;
text-align: center;
}
header div a
{
overflow: hidden;
display: inline-block;
position: relative;
margin: 1em;
padding: 1em;
border: 1px solid white;
border-radius: 2em;
font-size: calc(10px + 1.5vmin);
font-weight: 800;
text-transform: uppercase;
}
header div a:before
{
z-index: -1;
content: '';
display: block;
position: absolute;
width: 1em;
height: 1em;
left: -1em;
top: -5em;
background: white;
border-radius: 100%;
filter: blur(10em);
transition: transform 0.75s;
}
header div a:hover:before {transform: scale(20);}
@media (max-width: 1300px) {
	header h1 img {height: calc(30vmin * 0.85);}
	header h2 {font-size: calc((10px + 10vmin) * 0.85);}
	header div a {font-size: calc((10px + 1.5vmin) * 0.85);}
}
@media (max-width: 1000px) and (orientation: portrait) {
	header h1 img {height: calc(30vmin * 0.75);}
	header h2 {font-size: calc((10px + 10vmin) * 0.75);}
	header div a {font-size: calc((10px + 1.5vmin) * 0.75);}
}
@media (max-width: 750px) {
	header > div {right: 0;}
}

/* Menu piano */
header nav menu
{
display: grid;
position: absolute;
perspective: 500px;
height: 100%;
left: 0;
bottom: 0;
grid-template-rows: repeat(7, 1fr);
list-style: none;
transform: rotate(-5deg) scale(1.15);
user-select: none;
}
header nav menu li
{
position: relative;
transform-origin: left;
transition: transform 0.25s;
animation: apparitionTouches 0.75s backwards;
}
header nav menu li:nth-child(1) {animation-delay: 0ms;}
header nav menu li:nth-child(2) {animation-delay: 50ms;}
header nav menu li:nth-child(3) {animation-delay: 100ms;}
header nav menu li:nth-child(4) {animation-delay: 150ms;}
header nav menu li:nth-child(5) {animation-delay: 200ms;}
header nav menu li:nth-child(6) {animation-delay: 250ms;}
header nav menu li:nth-child(7) {animation-delay: 300ms;}
header nav menu li:nth-child(8) {animation-delay: 350ms;}
header nav menu li:nth-child(9) {animation-delay: 400ms;}
header nav menu li:nth-child(10) {animation-delay: 450ms;}
header nav menu li:nth-child(11) {animation-delay: 500ms;}
header nav menu li:nth-child(12) {animation-delay: 550ms;}
@keyframes apparitionTouches {
	0% {
	transform: translateX(-100%);
	}
	100% {
	transform: translateX(0%);
	}
}
header nav menu li:hover {transform: rotateY(2deg);}
header nav menu li:before
{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
header nav menu li.blanche
{
width: 30vw;
left: -20vw;
grid-row: span 1;
grid-column: 2;
background: rgb(200,200,200);
clip-path: inset(0.15em 0 round 0 2vh 2vh 0);
}
header nav menu li.blanche:before
{
background: white;
clip-path: inset(0 1.25vh 2.5vh 0 round 0 1.5vh 1.5vh 0);
}
header nav menu li.noire
{
z-index: 1;
width: 20vw;
height: 80%;
top: -45%;
grid-column: 1;
background: black;
border-radius: 0 2vh 2vh 0;
box-shadow: 0.35em 0.5em 1em rgba(0,0,0,0.5);
}
header nav menu li.noire:before
{
width: 95%;
height: 4%;
top: 7%;
background: rgb(225,225,225);
border-radius: 1em;
}
header nav menu li a, header nav menu li a:visited
{
display: flex;
position: absolute;
flex: 2;
width: 10vw;
height: 100%;
right: 0;
top: 0;
padding-left: 20vw;
align-items: center;
justify-content: center;
color: rgb(80,90,75);
font-size: 1vw;
font-weight: 800;
text-transform: uppercase;
text-align: center;
transition: filter 0.25s;
}
header nav menu li a:hover {filter: brightness(1.75);}
header nav menu li.noire a, header nav menu li.noire a:visited {visibility: hidden;}
@media (max-width: 1300px) {
	header nav menu li.blanche {left: -20vw;}
	header nav menu li.noire
	{
	left: -5vw;
	width: 15vw;
	}
	header nav menu li a, header nav menu li a:visited
	{
	width: 15vw;
	font-size: 1.5vw;
	}
}
@media (max-width: 750px) {
	#defile {display: block;}
	header div div a {display: none;}
	header nav menu
	{
	filter: blur(5px) brightness(0.1);
	pointer-events: none;
	}
	header nav menu li.blanche
	{
	width: 90vw;
	left: -50vw;
	}
	header nav menu li.noire {width: 40vw;}
	header nav menu li.blanche a, header nav menu li.blanche a:visited
	{
	width: 45vw;
	font-size: 5vw;
	}
	header nav menu li.noire a, header nav menu li.noire a:visited
	{
	visibility: visible;
	width: 29vw;
	color: white;
	font-size: 0.7em;
	transform: scale(0.9);
	}
	footer {display: none;}
}

/* Voir menu (mobile) */
header > div {clip-path: inset(0 0 0% 0);}
header.voirMenu > div
{
clip-path: inset(0 0 100% 0);
transition: clip-path 0.75s;
}
header.voirMenu #defile {display: none;}
header.voirMenu nav menu
{
filter: blur(0px) brightness(1);
pointer-events: initial;
transition: filter 2s;
}

/* Transition page */
body:before
{
content: '';
z-index: 10;
display: block;
position: fixed;
width: 150%;
height: 100%;
left: -150%;
top: 0;
background: white;
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}
body.transition:before
{
transform: translateX(100%);
transition: transform 1s;
}
body.transition > *
{
transform: scale(0.9);
filter: blur(20px);
transition: transform 1s, filter 1s;
}

/* SECTIONS */

/*section
{
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
padding: var(--marges);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
}
section h2
{
margin-bottom: calc(var(--marges) / 2);
}
section > p
{
text-align: justify;
}*/

/* CONTACT */

a.contact {cursor: pointer;}
aside#contact
{
z-index: 5;
display: flex;
flex-direction: column;
position: fixed;
box-sizing: border-box;
width: 100%;
height: 100%;
left: 0;
top: 0;
justify-content: center;
align-items: center;
background: white;
clip-path: inset(100% 0 0 0);
transition: clip-path 1s;
}
aside#contact.on {clip-path: inset(0% 0 0 0);}
aside#contact > * {color: black;}
aside#contact > a
{
padding: 0.25em;
font-size: 2em;
transition: transform 0.25s;
}
aside#contact > a:hover {transform: translateY(-0.25em);}
aside#contact h2 {font-size: 3em;}
aside#contact div {text-align: center;}
aside#contact div a, aside#contact div a:visited
{
display: inline-block;
padding: 0.75em;
color: rgb(50,50,50);
font-size: 1em;
text-align: center;
transition: transform 0.25s;
}
aside#contact div a:hover {transform: scale(1.1);}
aside#contact div a i
{
display: block;
font-size: 3em;
font-style: normal;
}

/* FOOTER */

footer
{
position: fixed;
right: 0.5em;
bottom: 0.5em;
font-size: 13px;
font-weight: 500;
text-align: right;
opacity: 0.5;
}