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

/* HEADER */

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

/* SECTIONS */

:is(section, footer)
{
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
padding: var(--marges);
background: no-repeat center / cover;
box-shadow: inset 0 0 50vmin rgba(0,0,0,0.5);
text-align: justify;
}
section:nth-of-type(odd) {background-image: url(Fonds/Mosaique.webp);}
:is(section, footer) h2
{
margin-bottom: calc(var(--marges) / 2);
text-align: center;
text-shadow: 0 0.125em 0 rgba(0,0,0,0.5);
}
:is(section, footer) h2 em
{
display: block;
font-size: 0.75em;
font-style: normal;
}
:is(section, footer) p
{
max-width: 40em;
margin: auto;
text-align: justify;
text-shadow: 0 0 1em rgba(0,0,0,0.5);
}
:is(section, footer) p img
{
display: block;
width: calc(100% - 10px);
margin: 5px;
margin-top: calc(5px + 1.5em);
outline: 1px solid white;
outline-offset: 4px;
}

/* Important */
:is(section, footer) > strong
{
display: block;
box-sizing: border-box;
width: fit-content;
max-width: 40em;
margin: auto;
padding: calc(var(--marges) / 2);
background: var(--beige);
color: var(--violet);
text-align: center;
text-wrap: balance;
}
:is(section, footer) > * + strong, :is(section, footer) > strong + * {margin-top: 3em;}

/* Listes */
:is(section, footer) :is(ul, ol)
{
display: flex;
margin: auto;
gap: 3em 2em;
place-content: center;
place-items: top;
filter: drop-shadow(0 0 1em rgba(0,0,0,0.5));
}
:is(section, footer) :is(ul, ol) li {text-align: justify;}
:is(section, footer) :is(ul, ol) li h3
{
margin-bottom: 0.5em;
font-size: 1em;
text-align: center;
}

/* Listes désordonnées (blocs) */
:is(section, footer) ul
{
max-width: 70em;
flex-wrap: wrap;
}
:is(section, footer) ul li img
{
display: block;
height: 5em;
margin: auto;
margin-bottom: 0.5em;
}
@media (min-width: 800px) {
:is(section, footer) ul li {width: 15em;}
}

/* Listes ordonnées (flêche) */
:is(section, footer) ol
{
flex-direction: column;
max-width: 40em;
}
:is(section, footer) ol li {}
:is(section, footer) ol li + li:before
{
content: '↓';
display: block;
position: relative;
margin-top: -1em;
margin-bottom: 0.5em;
color: transparent;
font-size: 2em;
text-align: center;
opacity: 0.25;
background: url(Fleche.svg) no-repeat center / contain;
}

/* PLANTES */

#plantes {}

/* HUILES */

#huiles
{
background-image: url(Fonds/Huiles.webp);
background-attachment: fixed;
}

/* SEANCE */

#seance {}

/* CONTACT */

footer
{
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.5), transparent 50%), url(Fonds/Entete2.webp) no-repeat center / cover fixed;
}
footer > h2 {display: none;}

/* Carte de visite */
footer adress
{
display: grid;
position: absolute;
width: 26em;
left: 0.5em;
top: 0.5em;
padding: 1.25em;
grid-template-rows: auto auto;
grid-template-columns: 8em auto;
gap: 1em;
background: url(Fonds/Contact.webp) no-repeat center / cover;
box-shadow: inset 0 0 10em rgba(0,0,0,0.5);
border-radius: 1.5em;
}
footer adress > img
{
grid-row: 1 / 3;
width: 100%;
margin-right: 1em;
}
footer adress > div:first-of-type {}
footer adress > div:last-of-type {place-self: end start;}
footer adress h2
{
margin-top: -0.25em;
margin-bottom: -0.2em;
color: white;
font-family: 'YoureInvited', Serif;
font-size: 2.7em;
text-align: left;
text-transform: none;
text-shadow: none;
white-space: nowrap;
}
footer adress h3
{
padding-top: 0.5em;
border-top: 0.1em solid var(--beige);
color: var(--beige);
font-family: 'MinionPro', Serif;
font-size: 1.5em;
line-height: 0.8em;
}
footer adress h3 em
{
display: block;
font-size: 0.8em;
font-style: normal;
}
footer adress a
{
display: block;
font-family: 'Lemon Days', Fantasy;
font-size: 1.15em;
letter-spacing: 0.015em;
white-space: nowrap;
}
footer adress a img
{
height: 1em;
vertical-align: -0.15em;
}
footer adress a em
{
color: var(--beige);
font-style: normal;
}
footer adress a em + span
{
font-size: 0.8em;
letter-spacing: 0em;
}
@media (max-width: 600px) {
footer adress a {padding: 0.2em 0;}
}

/* Enveloppe */
footer > div
{
--taille: 1;
position: fixed;
width: 29.5em;
height: 19.5em;
left: calc(50% - (29.5em / 2));
bottom: calc(50% - (19.5em / 2));
background: url(Enveloppe/Arriere.png) no-repeat center / 100% 100%;
perspective: 1000px;
transform-style: preserve-3d;
transform: scale(var(--taille));
}
footer > div > div
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: white;
}
footer > div > div:first-of-type {background: url(Enveloppe/Avant.png) no-repeat center / 100% 100%;}
footer > div > div:last-of-type
{
background: url(Enveloppe/Rabat.png) no-repeat center / 100% 100%;
transform-origin: top;
}
@media (max-width: 600px) {
footer > div {--taille: 0.6;}
}

/* Mentions légales */
footer > aside
{
position: fixed;
width: 100%;
left: 0;
bottom: 1.5em;
color: black;
font-family: Sans-Serif;
font-size: 11px;
text-align: center;
text-wrap: balance;
filter: drop-shadow(0 0 0.5em white);
}
footer > aside img
{
margin-top: -0.2em;
height: 1.2em;
}