/**::selection {}*/
:root
{
background: white;
color: rgb(200,200,200);
font-family: 'Cabin', Sans-Serif;
font-weight: 500;
font-size: 20px;
}
h1, h2, h3, h4, h5, h6, summary
{
color: inherit;
font-family: 'Akbaal', Serif;
font-weight: 400;
font-size: 3em;
}
p {}
ul {list-style: none;}
a {color: inherit;}
hr
{
width: 50%;
height: 2em;
margin: calc(var(--marges) / 1.5) auto;
background: url(Separateur.svg) no-repeat center / contain;
}
.infobulle:before
{
--fond: rgba(0,0,0,0.9)/*white*/;
--texte: white/*rgb(50,50,50)*/;
}

/* Markdown */
p.md, .md p
{
& a:not([class]) {text-decoration: underline;}
& img {display: block; max-width: 100%; margin: 1em 0;}
}

/* 404 */
#erreur404
{
width: 320px;
margin: auto;
text-align: center;
}
#erreur404 strong
{
font-size: 1.5em;
font-weight: 800;
line-height: 1.5em;
}
#erreur404 strong span
{
display: block;
font-size: 2em;
}
#erreur404 p {margin: 1em 0;}
#erreur404 a
{
display: inline-block;
padding: 0.25em;
border-radius: 0.25em;
font-size: 0.9em;
}

/* Bouton */
.btn, .btn:active
{
--ombreY: 0.225em;
display: inline-block;
margin: 1em;
padding: 1.25em 2.5em;
background-image: url(BoutonG.webp), url(BoutonD.webp), url(BoutonC.webp);
background-size: auto 100%, auto 100%, 100% 100%;
background-position: left, right, center;
background-repeat: no-repeat;
box-shadow: 0 var(--ombreY) 0.55em rgba(0,0,0,0.75);
color: white;
font-family: 'Akbaal', Serif;
font-size: 0.6em;
font-weight: 400;
text-transform: uppercase;
text-shadow: 0 0.125em 0 black;
&:hover, &:focus, &:active {--ombreY: 0.1em; color: var(--couleur); transform: translateY(5%);}
}

/* SECTIONS */

main > section
{
--peintureHauteur: 5vw;
position: relative;
box-sizing: border-box;
width: 100%;
margin-top: calc(var(--peintureHauteur) * -1);
padding-top: calc(var(--marges) + (var(--peintureHauteur) / 2));
padding-left: var(--marges);
padding-right: var(--marges);
padding-bottom: calc(var(--marges) + var(--peintureHauteur));
background: no-repeat center / cover;
text-align: center;
mask-image: var(--peintureImage), linear-gradient(black, black);
mask-repeat: no-repeat, repeat;
mask-position: top;
mask-size: 100% var(--peintureHauteur);
mask-composite: exclude;
&:nth-of-type(odd) {--peintureImage: url(Transition1.webp); background-color: black;}
&:nth-of-type(odd) h2 {color: var(--couleur);}
&:nth-of-type(even) {--peintureImage: url(Transition2.webp); background-color: var(--couleur); color: black;}
&:nth-of-type(even) h2 {color: white;}
&:first-of-type {margin-top: 50vh;}
}
@property --degrade {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
main > section > *
{
mask: linear-gradient(to right bottom, black calc(var(--degrade) - 100%), transparent var(--degrade));
transition: --degrade 2s;
&.visible {--degrade: 200%;}/* MASQUE VISIBLE EMPECHE OMBRE DERRIERE ELEMENTS RACINE SECTION */
}
main > section > :is(h1, h2)
{
width: fit-content;
max-width: 15em;
margin: auto;
margin-bottom: calc(var(--marges) / 2);
text-align: center;
text-wrap: balance;
& em
{
display: block;
margin-top: -0.5em;
font-family: 'LTFunk', Serif;
font-size: 0.55em;
font-style: normal;
}
}
main > section > h2
{
/*background: url(Titres/Spectacles.png) no-repeat center 0.36em / contain;
color: transparent;*/
}
main > section > p
{
max-width: var(--largeur);
margin: auto;
text-align: justify;
&:first-letter
{
float: left;
margin-right: 0.05em;
margin-bottom: -0.15em;
font-family: 'Zallman', Serif;
font-size: 3em;
font-weight: 400;
}
& > a {text-decoration: underline;}
}
main > section > ul
{
display: flex;
padding: 2em;
place-content: center;
place-items: center;
gap: 3em;
}
main > section > ul li {text-align: center;}