:root
{
--marges: 15vmin;
}
main {}

/* HEADER */

header
{
display: flex;
width: 100%;
height: 100vh;
flex-direction: column;
place-content: center;
place-items: center;
gap: 1em;
}
header #village
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(Fonds/Village.webp) no-repeat top / cover fixed;
}
header h1
{
display: flex;
flex-direction: column;
z-index: 1;
width: 90vmin;
height: 90vmin;
place-content: center;
place-items: center;
color: white;
text-align: center;
filter: drop-shadow(0 0 5vw black);
}
header h1 img
{
width: 100%;
object-fit: contain;
}
header h1 em
{
display: block;
margin-top: 0.2em;
font-size: 8vmin;
font-style: normal;
line-height: 0.75em;
}
#defile
{
--couleur: white;
--ombre: transparent;
}

/* SECTIONS */

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

/* Visite */
#visite
{
width: 100%;
height: 100vh;
}
#visite .pnlm-scene
{
box-sizing: border-box;
width: 3em;
height: 3em;
padding: 0.5em;
background: white url(Aller.gif) no-repeat center / contain;
background-origin: content-box;
outline: 4px solid white;
outline-offset: 4px;
border-radius: 100%;
mix-blend-mode: overlay;
transition: padding 0.15s;
&:hover
{
padding: 0.35em;
mix-blend-mode: initial;
}
}
#visite .pnlm-info
{
box-sizing: border-box;
width: 1.75em;
height: 1.75em;
padding: 0.25em;
background: rgba(255,255,255,255.75) url(Voir.png) no-repeat center / contain;
background-origin: content-box;
backdrop-filter: blur(10px);
border-radius: 100%;
outline: 1px solid black;
outline-offset: -2px;
filter: drop-shadow(0 0 0.3em black);
&:hover {filter: invert(1);}
}

/* Photo */
#photo
{
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
backdrop-filter: blur(10px) brightness(0.5);
clip-path: circle(0vmax);
transition: clip-path 1s;
cursor: pointer;
&.on {clip-path: circle(100vmax);}
&:not(:has(img.chargee)):before
{
content: '🔷';
display: flex;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
place-content: center;
place-items: center;
color: white;
font-size: 2em;
animation: tourne 0.5s infinite;
}
& img
{
display: block;
opacity: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.5s;
}
& img.chargee {opacity: 1;}
}