main {}

/* HEADER */

header
{
width: 100%;
height: 100vh;
background: url(Fonds/Entete.webp) no-repeat bottom / 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: white;
--ombre: black;
}

/* SECTIONS */

main > section
{
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
padding: var(--marges);
background: no-repeat center / cover;
text-align: justify;
text-align-last: center;
filter: drop-shadow(0 0.1em 0.2em black);
& + section {padding-top: 0;}
&:after
{
content: url(Separateur.svg);
display: block;
width: 6em;
margin: 2em auto 0;
}
}
main > section h2
{
display: flex;
margin-bottom: calc(var(--marges) / 3);
justify-content: center;
align-items: center;
gap: 0.35em;
text-align: center;
line-height: 1em;
&:before, &:after
{
content: url(Titre.svg);
display: inline-block;
width: 1.4em;
}
&:before {}
&:after {transform: scaleX(-1);}
@media (max-width: 500px) {
font-size: 2em;
}
}
main > section > :is(h2, p, img)
{
max-width: 40em;
margin-left: auto;
margin-right: auto;
}

/* Images avec coins */
main > section > img.coins
{
display: block;
box-sizing: border-box;
width: 100%;
height: 15em;
margin-top: calc(var(--marges) / 3);
border: 6px solid var(--or);
border-radius: 2em;
object-fit: cover;
}