:root
{
--marges: 15vmin;
--clr: rgb(193, 171, 146);
}
@media (max-width: 850px) {
:root {--marges: 5vmin;}
}
html, body, p, li, button, input, textarea, select {color: white;}
h1, h2, h3, h4, h5, h6, summary {color: white;}

/* MENU */

#accueil > nav
{
z-index: 5;
position: fixed;
box-sizing: border-box;
height: 100vh;
right: 0;
top: 0;
padding: 0 5vh;
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.75));
filter: drop-shadow(0 0 15px black);
}
#accueil > nav ul
{
list-style: none;
background: white;
background-clip: text !important;
/*-webkit-text-fill-color: transparent;*/	/* Uniquement sur Firefox, voir Script.js */
}
#accueil > nav ul li
{
position: relative;
text-align: right;
animation: menuApparition 0.5s both;
}
#accueil > nav ul li span:nth-of-type(1)
{
display: inline-block;
vertical-align: top;
transition: transform 0.25s;
}
#accueil > nav ul li a:hover span:first-of-type {transform: translateX(10px);}
#accueil > nav ul li span:nth-of-type(2)
{
display: inline-block;
position: relative;
margin: -1vh;
margin-left: 3vh;
-webkit-text-stroke: 0.125vh transparent;
transform: scale(1.75)/*1.0*/ translateX(-0.4vh) translateY(-0.25vh);
}
#accueil > nav ul li span:nth-of-type(3)
{
display: inline-block;
transform: translateX(-0.95vh) translateY(2.9vh) scaleY(1.6);
}
#accueil > nav ul li:last-of-type span:nth-of-type(3) {opacity: 0;}
#accueil > nav ul li a
{
display: block;
padding: 1.5vh;
padding-right: 2vh;
color: white;
font-family: 'Cabin', Sans-Serif;
font-size: 3vh;
font-weight: 800;
text-transform: uppercase;
white-space: nowrap;
}
#accueil > nav ul li a em, #accueil > nav ul li a i {font-style: normal;}
#accueil > nav ul li a em
{
display: block;
margin-top: -0.25em;
font-size: 0.65em;
}
#accueil > nav ul li:not(:last-of-type) a em {margin-bottom: -1em;}
#accueil > nav + button {display: none;}

@keyframes menuApparition {
	0% {transform: translateX(25vw);}
	100% {transform: translateX(0vw);}
}

/* Menu mobile */
@media (max-width: 1200px) {
#accueil > nav
{
--transition: 0.75s;
width: 100vw;
right: -100vw;
background: rgba(0,0,0,0.5);
mask-image: url(Menu.svg);
mask-repeat: no-repeat;
mask-position: 100vw;
mask-size: 250vw;
transition: right 0s var(--transition), mask-position var(--transition);
}
#accueil.menu > nav
{
right: 0vw;
mask-position: -100vw;
transition: mask-position var(--transition);
}
#accueil > nav > div
{
z-index: 2;
position: absolute;
width: calc(100vw - 55vh);
height: 100%;
left: 0;
top: 0;
cursor: default;
}
#accueil > nav + button
{
z-index: 6;
display: block;
position: fixed;
width: 64px;
height: 64px;
right: 0;
top: 0;
background: transparent;
border: none;
filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)) drop-shadow(0 0 30px black);
}
#accueil > nav + button span
{
--epaisseur: 4px;
display: block;
position: absolute;
width: 50%;
height: var(--epaisseur);
left: 25%;
background: white;
border-radius: var(--epaisseur);
transition: transform 0.5s;
}
#accueil > nav + button span:nth-child(1) {top: calc(30% - (var(--epaisseur) / 2))}
#accueil > nav + button span:nth-child(2) {top: calc(50% - (var(--epaisseur) / 2))}
#accueil > nav + button span:nth-child(3) {top: calc(70% - (var(--epaisseur) / 2))}
#accueil.menu > nav + button span:nth-child(1) {transform: translateY(325%) rotate(45deg)}
#accueil.menu > nav + button span:nth-child(2) {transform: scaleX(0)}
#accueil.menu > nav + button span:nth-child(3) {transform: translateY(-325%) rotate(-45deg)}
}
@media (max-width: 1200px) {
	#social.gauche + button.social
	{
	left: 8px !important;
	top: 8px !important;
	}
}

/* FLÊCHE DE SECTION */

#flecheSection
{
z-index: 6;
display: block;
position: fixed;
width: 100%;
height: 13vmin;
left: 0;
bottom: 0;
background: transparent;
border: none;
transition: background-size 0.5s;
cursor: pointer;
}
#flecheSection:before
{
content: '';
display: block;
position: absolute;
width: 5vmin;
height: 5vmin;
left: 47.5vw;
bottom: 7vh;
border: none;
border-right: 8px solid white;
border-bottom: 8px solid white;
transform: rotate(45deg);
filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)) drop-shadow(0 0 30px black);
transition: border-color 0.5s;
animation: flecheSection 0.5s infinite alternate;
}
#flecheSection:hover:before {border-color: var(--clr);}
@keyframes flecheSection {
	from {transform: translateY(0px) rotate(45deg);}
	to {transform: translateY(16px) rotate(45deg);}
}
@media not (pointer: fine) {
	#flecheSection {z-index: 4;}
	#accueil.menu #flecheSection {display: none;}
}

/* COMMUN */

/* Contenu */
header, section {position: relative;}
header > div, section > div
{
position: fixed;
box-sizing: border-box;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: var(--marges);
padding-right: calc(var(--marges) + 45vh);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
transition: filter 0.5s;
}
#accueil.menu header > div, #accueil.menu section > div {filter: blur(5px);}
header article, section article
{
width: 100%;
/*padding: 1em;
background: rgba(0,0,0,0.35);
box-shadow: 0 0 0 0.75em rgba(0,0,0,0.35);
border: 32px solid;
border-image: url(Bordures.svg) 33.3%;
border-radius: 8px;*/
text-align: left;
text-shadow: 0 0 7px black;
}
header article p {animation: headerApparition 1s 1s both;}
@keyframes headerApparition {
	0% {opacity: 0; transform: translateY(10px);}
	100% {opacity: 100; transform: translateY(0px);}
}
header p, section p
{
margin-bottom: 0.5em;
text-align: justify;
line-height: 1.5em;
}
header p:first-letter, section p:first-letter
{
position: relative;
float: left;
margin-top: 0.2em;
margin-right: 0.1em;
font-family: 'Noto Serif', Serif;
font-size: 2.9em;
font-weight: 400;
}

/* Ombre fond */
header > div:before, section > div:before
{
content: '';
z-index: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: radial-gradient(farthest-side circle at 35%, rgba(0,0,0,0.65), rgba(0,0,0,0));
}

/* Mobile */
@media (max-width: 1200px) {
header > div, section > div {padding-right: var(--marges);}
}
@media not (pointer: fine) {
header, section {height: initial !important;}
header > div, section > div
{
position: initial;
width: initial;
height: initial;
padding-top: calc(var(--marges) + 5vh);
padding-bottom: calc(var(--marges) + 5vh);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
header article, section article
{
position: initial !important;
width: initial !important;
top: initial !important;
}
header > div:before, section > div:before
{
z-index: 0;
position: absolute;
background: radial-gradient(farthest-corner circle at center, rgba(0,0,0,0.65), rgba(0,0,0,0.2));
box-shadow: inset 0 10px 50px black;
}
header article > *, section article > *
{
position: relative;
z-index: 1;
}
}

/* Fausse transition vers page */
#accueil:before, #accueil:after
{
z-index: 10;
content: '';
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
clip-path: polygon(0 0, 0% 0, 0 0%);
}
#accueil:before {background: rgba(0,0,0,0.75); transition: clip-path 0.5s;}
#accueil:after {background: var(--pagesFond); transition: clip-path 1s;}
#accueil.transition:before, #accueil.transition:after {clip-path: polygon(0 0, 200% 0, 0 200%);}

/* Boutons*/
header p ~ a, section p ~ a
{
display: inline-block;
margin-top: 0.5em;
margin-right: 0.5em;
padding: 0.5em 0.75em;
vertical-align: middle;
background: url(Fond.svg) no-repeat 125% 125%;
background-size: 300%;
box-shadow: 0 4px 0 rgba(0,0,0,0.5);
border: 2px solid white;
border-radius: 0 12px 0 12px;
text-align: left;
text-transform: uppercase;
transition: background-position 0.5s ease-out, color 0.5s ease-out, transform 0.5s;
}
header p ~ a:hover, section p ~ a:hover
{
background-position: 50% 50%;
color: rgb(50,50,50);
transform: scale(1.075);
}
header p ~ a em, section p ~ a em
{
display: block;
margin-top: 0.6em;
font-size: 0.5em;
font-style: normal;
line-height: 70%;
}
header p ~ a em:before, section p ~ a em:before
{
content: '▸  ';
vertical-align: 0.1em;
margin-left: 0.1em;
}

/* Vidéos fond */
video
{
z-index: -1;
position: absolute;
width: 100vw;
height: 100vh;
left: 0;
bottom: 0;
object-fit: cover;
}

/* ENTETE */

body
{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
header
{
box-sizing: border-box;
width: 100%;
height: 100vh;
min-height: 100vh;
padding: var(--marges);
padding-right: calc(var(--marges) + 45vh);
}
header article {text-align: center;}
header h1 img
{
display: block;
width: 20vw;
margin: auto;
margin-bottom: 0.5em;
filter: drop-shadow(0 0 5vw black) drop-shadow(0 0 10vw black);
}
header p:first-letter {margin-top: 0.125em;}

@media not (pointer: fine) {
header {padding: 0;}
header article
{
box-sizing: border-box;
height: 100%;
padding-top: 25vh;
}
header p {padding-top: 5vh;}
}
header p ~ a, header p ~ a:visited
{
background-color: var(--clr);
border: none;
color: rgb(50,50,50);
text-shadow: none;
}

/* SECTIONS */

section
{
width: 100vw;
height: 100vh;
}
section h2
{
margin-bottom: 0.5em;
text-align: center;
text-shadow: 0 0 20px black;
line-height: 65%;
transform: rotate(-3.5deg);
}
section h2 em
{
display: block;
font-size: 0.6em;
font-style: normal;
}

/* PIED */

footer
{
height: 100vh;
}
footer > div
{
--fond: rgb(70,65,60);
--text: rgba(255,255,255, 0.75);
z-index: 6;
display: flex;
position: fixed;
box-sizing: border-box;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
padding: var(--marges);
justify-content: center;
flex-direction: column;
align-items: center;
background: var(--fond);
font-size: 17px;
text-align: center;
clip-path: polygon(0% 150%, 100% 100%, 100% 100%, 0% 100%);
}
footer > div nav
{
display: flex;
white-space: nowrap;
filter: drop-shadow(0 0 2em rgba(0,0,0,0.5));
}
footer > div nav a
{
padding: 4em;
background: var(--fond);
color: var(--text);
font-size: 1em;
font-weight: 800;
text-shadow: 0 0 5em rgba(255,255,255,0.15);
}
footer > div nav a:first-child
{
padding-right: 4em;
border-radius: 1.5em 0 0 1.5em;
clip-path: polygon(0% 0%, 100% 0%, calc(100% - 2em) 100%, 0% 100%);
}
footer > div nav a:last-child
{
padding-left: 4em;
border-radius: 0 1.5em 1.5em 0;
clip-path: polygon(2em 0%, 100% 0%, 100% 100%, 0% 100%);
}
footer > div nav a:hover
{
color: var(--text);
animation: secoue2 0.5s infinite;
}
footer > div nav a i
{
display: block;
font-size: 5em;
font-style: normal;
filter: grayscale(90%) brightness(1.25);
}
footer > div p
{
margin-top: 4em;
color: var(--text);
font-size: 1em;
}
footer > div p a, footer > div p a:visited
{
display: inline-block;
padding: 0.15em;
border-radius: 4px;
color: var(--text);
}
footer > div p a:hover {background: rgba(255,255,255,0.1);}
footer > div p em
{
display: block;
margin-top: 0.25em;
font-size: 0.8em;
}
@media not (pointer: fine) {
	footer, footer > div {height: auto;}
	footer > div
	{
	position: static;
	clip-path: none;
	}
}
@media (max-width: 650px) {
	footer > div {font-size: 15px;}
	footer > div nav a
	{
	padding: 1em;
	font-weight: 700;
	}
	footer > div nav a:first-child
	{
	padding-right: 2em;
	clip-path: polygon(0% 0%, 100% 0%, calc(100% - 1em) 100%, 0% 100%);
	}
	footer > div nav a:last-child
	{
	padding-left: 1em;
	clip-path: polygon(1em 0%, 100% 0%, 100% 100%, 0% 100%);
	}
	footer > div nav a i {font-size: 2em;}
	footer > div p {margin-top: 1.5em;}
}