body > :is(nav, footer) {display: none;}
main {padding-top: 0;}
main h1 {display: none;}
main #fond
{
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
transform: scale(1.2);
/*filter: blur(50px) contrast(0.75) saturate(0.75) brightness(1.5);*/
filter: blur(50px) contrast(0.2) saturate(0) brightness(1.75);
object-fit: cover;
}
main > a#retour
{
z-index: 6;
display: block;
position: fixed;
left: 0;
top: 0;
padding: 0.25em 1.75em 1.75em 0.25em;
background: linear-gradient(128deg, white 40%, grey 56%);
font-family: Icones;
font-size: 1.75em;
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
&:hover {color: firebrick;}
}

/* MENU */

nav
{
z-index: 5;
display: flex;
position: fixed;
left: 50%;
bottom: 1em;
padding: 0.5em;
place-content: center;
place-items: center;
gap: 0.25em;
background: rgba(255,255,255,0.5);
box-shadow: 0 0 2em rgba(0,0,0,0.25);
backdrop-filter: blur(20px);
border-radius: 0.5em;
font-size: 1.25em;
transform: translateX(-50%);
}
nav button
{
display: flex;
width: 2em;
height: 2em;
border: none;
place-content: center;
place-items: center;
background: no-repeat center / contain;
border: 2px solid transparent;
border-radius: 4px;
color: transparent;
&:nth-of-type(1) {background-image: url(Commandes/Debut.svg);}
&:nth-of-type(2) {background-image: url(Commandes/Precedent10.svg);}
&:nth-of-type(3) {background-image: url(Commandes/Precedent.svg);}
&:nth-of-type(4) {background-image: url(Commandes/Suivant.svg);}
&:nth-of-type(5) {background-image: url(Commandes/Suivant10.svg);}
&:nth-of-type(6) {background-image: url(Commandes/Fin.svg);}
&:hover {border-color: tomato;}
}
nav input
{
width: 1.5em;
background: transparent;
border: none;
text-align: right;
appearance: textfield;
&:hover, &:focus {color: firebrick;}
}
nav span {}

/* LIVRE */

.livre
{
--hauteur: 90%;
position: relative;
width: 100%;
height: 100vh;
perspective: 2500px;
transform-style: preserve-3d;
transition: transform 2s;
}
.livre .page
{
position: absolute;
height: var(--hauteur);
width: 50%;
left: 50%;
top: calc((100% - var(--hauteur)) / 2);
transform-origin: left;
transform-style: preserve-3d;
transition: transform 2s;
user-select: none;
pointer-events: none;
}
.livre .page img
{
display: block;
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
backface-visibility: hidden;
filter: brightness(1);
transition: filter 2s;
&:first-child {object-position: left;}
&:last-child
{
object-position: right;
transform: rotateY(180deg) translateZ(1px);
filter: brightness(0.4);
}
}

/* Page actuelle */
.livre .page:not(.actuelle):not(.actuelle ~ .page)
{
transform: rotateY(-180deg);
& img:first-child {filter: brightness(0.4);}
& img:last-child {filter: brightness(1);}
}
.livre .page.actuelle ~ .page {transform: translateZ(-1px);}

/* Boutons */
.bouton-page
{
z-index: 3;
display: block;
position: absolute;
width: 50%;
height: 100%;
top: 0;
background: transparent;
border: none;
&:first-of-type {left: 0;}
&:last-of-type {right: 0;}
}

/* TACTILE */

@media (orientation: portrait) {
.livre {transform: translateX(-45%);}
.livre.verso {transform: translateX(45%);}
.livre .page {width: 90%;}
}