/**::selection {}*/
/*@property --nom {
syntax: "<angle><color><length><number><percentage>";
inherits: true;
initial-value: 0%;
}*/
:root
{
--bleu: #48c1e4;
background: var(--bleu) url(Fonds/Ciel.webp) no-repeat center / cover fixed;
color: black;
font-family: 'Inter', Sans-Serif;
font-weight: 400;
font-size: 20px;
@media (max-width: 600px) {font-size: 16px;}
}
h1, h2, h3, h4, h5, h6, summary
{
--font-size-ratio: 2;
color: inherit;
font-family: 'Cipitillo', 'Comic Sans MS', Fantasy;
font-weight: 400;
font-size: calc(2em * var(--font-size-ratio));
text-transform: uppercase;
text-wrap: balance;
line-height: 0.8em;
& > em {display: none;}
}
h2 {--font-size-ratio: 1.9; @media (max-width: 600px) {--font-size-ratio: 1.5;}}
h3 {--font-size-ratio: 1.8;}
h4 {--font-size-ratio: 1.7;}
h5 {--font-size-ratio: 1.6;}
h6 {--font-size-ratio: 1.5;}
p {}
ul {list-style: none;}
a {color: inherit;}
hr
{
width: 50%;
margin: 1em auto;
background: black;
}
.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
{
display: block;
width: fit-content;
margin: 1em auto;
padding: 1em;
background: #edbeb8;
box-shadow: inset 0 -0.35em 0 #db9789;
border-radius: 1em;
color: rgba(0,0,0,0.5);
font-weight: 800;
text-transform: uppercase;
&:hover, &:focus {filter: brightness(1.05);}
&:active {transform: translateY(5%);}
}

/* Pied */
footer
{
padding: 2em;
box-shadow: inset 0 1em 3em rgba(0,0,0,0.15);
font-size: 0.9em;
font-style: italic;
text-align: center;
text-wrap: balance;
line-height: 1.2em;
filter: drop-shadow(0 0 0.25em rgba(0,0,0,0.4));
}
footer img[alt="Sospel.info"]
{
height: 4em;
margin: 0.5em auto 0.75em;
}