:root
{
--marges: 10vmin;
--largeur: 60em;
--couleur: #eeb914;
}
main {padding-top: 100vh;}

/* HEADER */

header
{
position: fixed;
width: 100%;
height: 100vh;
left: 0;
top: 0;
background: url(Fonds/Entete2.webp) no-repeat center / cover;
user-select: none;
}
header > :is(div, video)
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
header .riviere {mix-blend-mode: color-dodge;}
header .effets
{
--masque: none;
overflow: hidden;
mask: var(--masque) no-repeat center / cover;
mask-mode: luminance;
}
header .effets > *
{
display: block;
position: absolute;
width: var(--taille);
height: calc(var(--taille) * var(--ratio));
left: var(--x);
top: var(--y);
/*background: radial-gradient(blue 10%, transparent 10%);*/
}
header .effets lueur
{
backdrop-filter: brightness(1.12) saturate(1.12);
mask: radial-gradient(black, transparent 75%);
animation: clignote 0.45s var(--desync) infinite;
}
header .effets fee
{
animation: tournoie 1.5s var(--desync) infinite;
&:after
{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background: var(--image) no-repeat center / contain;
animation: tremble10 0.1s linear infinite;
}
}
@keyframes tournoie {
	0% {transform: translateX(0%) translateY(0%);}
	25% {transform: translateX(10%) translateY(10%);}
	50% {transform: translateX(20%) translateY(0%);}
	75% {transform: translateX(10%) translateY(10%);}
	100% {transform: translateX(0%) translateY(0%);}
}
header .effets oiseau
{
--taille: calc(2% / var(--distance));
--x: 25%;
background: url(Fonds/Oiseau.gif) no-repeat center / contain;
animation: vole calc(15s * var(--distance)) var(--desync) linear 1 both;
}
@keyframes vole {
	0% {left: var(--x);}
	100% {left: 75%;}
}
header .arbres {background: url(Fonds/Arbres.webp) no-repeat center / cover;}
header h1
{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
filter: drop-shadow(0 0 5vw black);
mask: linear-gradient(to right bottom, black calc(var(--degrade) - 100%), transparent var(--degrade));
transition: --degrade 2s;
&.visible {--degrade: 200%;}
}
header h1 img
{
display: block;
position: absolute;
width: 90vmin;
height: 90vmin;
object-fit: contain;
}
#defile {--ombre: transparent;}

/* Veille */
header.veille :is(.riviere, .effets, .arbres, h1) {display: none;}

/* SPECTACLES */

#spectacles {}
#spectacles .spectacle
{
display: inline-block;
position: relative;
margin: 1.5em;
padding: 1.5em;
text-align: center;
&:after
{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(Spectacles/Cadre.png) no-repeat center / 100% 100%;
}
& img:first-of-type
{
display: block;
height: 20em;
margin: auto;
transform: scale(1.05);
}
& img:last-of-type
{
z-index: 2;
display: block;
position: absolute;
width: 90%;
left: 5%;
bottom: 5%;
filter: drop-shadow(0 0 0.25em black);
}
& img {transition: transform 0.25s;}
}
#spectacles .spectacle:hover
{
& img:first-of-type {transform: scale(1.01);}
& img:last-of-type {transform: scale(1.1) rotate(5deg);}
}

/* CONCEPT */

#concept
{
background-image: url(Fonds/Concept.webp);
background-attachment: fixed;
box-shadow: inset 0 calc(var(--marges) * -0.5) calc(var(--marges) * 2) black;
}
#concept ul li span
{
display: block;
margin-bottom: -0.5em;
padding: 0.75em 1em;
background: white;
box-shadow: inset -0.5em -0.5em 1em rgba(0,0,0,0.15);
border-radius: 2em;
font-weight: 600;
}
#concept ul li strong
{
display: block;
font-size: 2em;
}
#concept ul li em
{
display: block;
font-size: 0.75em;
}
#concept ul li img
{
display: block;
height: 8em;
margin: auto;
}

/* QUI */

@property --arbre {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
#qui {background-image: url(Arbre/Parchemin.webp);}
#qui h2 {color: black;}
#qui #arbre
{
--taille: 100vh;
position: relative;
transition: --arbre 1.5s;
&.details {--arbre: 200%;}
}
#qui #arbre > div
{
display: grid;
box-sizing: border-box;
width: calc(var(--taille) * 0.75);
height: var(--taille);
margin: auto;
padding-bottom: calc(var(--taille) * 0.375);
grid-template-columns: repeat(5, 1fr);
gap: calc(var(--taille) * 0.025);
background: url(Arbre/Arbre.webp) no-repeat center / contain;
mask: radial-gradient(transparent calc(var(--arbre) - 25%), black var(--arbre));
}
#qui #arbre article
{
display: flex;
position: relative;
box-sizing: border-box;
height: calc(var(--taille) * 0.175);
place-content: center;
place-items: center;
flex-direction: column;
background: url(Arbre/Cadre.webp) no-repeat center / contain;
border-radius: 100%;
padding: calc(var(--taille) * 0.015);
color: black;
font-size: calc(var(--taille) * 0.014);
font-weight: 600;
text-transform: uppercase;
word-break: break-all;
cursor: pointer;
& img
{
display: block;
width: 95%;
height: 80%;
object-fit: cover;
filter: grayscale(1);
mix-blend-mode: luminosity;
border-radius: 100%;
}
&:hover img {filter: grayscale(1) brightness(1.5);}
&:after
{
content: attr(data-nom);
display: block;
position: absolute;
box-sizing: border-box;
width: 100%;
height: calc(var(--taille) * 0.035);
bottom: calc(var(--taille) * 0.015);
padding-top: calc(var(--taille) * 0.001);
background: url(Arbre/Banniere.webp) no-repeat center / 100% 100%;
}
}
#qui #arbre aside
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(Arbre/Cadre.webp) no-repeat center / contain;
transform: scale(calc((var(--arbre) * 0.1) + 80%));
mask: radial-gradient(black calc(var(--arbre) - 25%), transparent var(--arbre));
pointer-events: none;
}