/* HEADER */

header
{
width: 100%;
height: 100vh;
background: url(Fonds/Entete.jpg) no-repeat center / cover fixed;
}
header h1
{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
header h1 img
{
width: 90vmin;
height: 90vmin;
object-fit: contain;
filter: drop-shadow(0 0 5vw black);
}
#defile
{
--couleur: black;
--ombre: transparent;
}

/* SECTIONS */

/* Promotions */
#promos {height: 30em;}
#promos .fond
{
--masque: 0%;
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: no-repeat center / cover;
transform: scale(1.2);
/*filter: blur(50px);*/
filter: blur(50px) contrast(0.2) saturate(0) brightness(1.75);
clip-path: polygon(0% 0%, calc(110% + var(--masque)) 0%, calc(100% + var(--masque)) 100%, 0% 100%);
transition: clip-path 2s;
&.on ~ .fond {--masque: -110%;}
&.on {--masque: 0%;}
}
#promos article
{
display: grid;
position: absolute;
box-sizing: border-box;
width: 100%;
max-width: calc(60em + (var(--marges) * 2));
height: 100%;
left: 50%;
top: 0;
padding: 0 var(--marges);
grid-template-columns: 10vmin 1fr;
place-content: center;
place-items: center;
gap: 0.25em 1em;
transform: translateX(-50%);
filter: opacity(0) blur(15px);
transition: filter 1s;
pointer-events: none;
&.on
{
z-index: 1;
filter: opacity(1) blur(0px);
pointer-events: auto;
}
& img
{
display: block;
width: 100%;
height: 100%;
grid-row: span 2;
object-fit: contain;
}
& h2
{
margin-bottom: 0;
text-align: left;
}
& p {}
& .btn
{
grid-column: 2;
margin-left: auto;
}
}
#promos nav
{
z-index: 1;
display: flex;
position: absolute;
width: 100%;
left: 0;
bottom: 2em;
place-items: center;
place-content: center;
gap: 1em;
text-align: center;
& button
{
width: 2em;
height: 1em;
background: transparent;
border: none;
border-radius: 1em;
outline: 2px solid var(--noir);
outline-offset: 2px;
color: transparent;
&.on {background: var(--noir);}
}
}

/* Qui sommes nous ? */
#qui
{

}

/* Dernières parutions */
#recents {}
#recents .livres {margin-bottom: calc(var(--marges) / 2);}