/**::selection {}*/
:root
{
--clr: rgb(2,70,150);
background: url(Fonds/Fond.jpg) no-repeat center / cover fixed;
color: black;
font-family: 'Source Sans Pro 3', Sans-Serif;
font-weight: 400;
font-size: 15px;
&.magie {font-family: 'Alpmagi', Sans-Serif;}
}
h1, h2, h3, h4, h5, h6, summary
{
color: inherit;
font-family: 'Crimson Pro', Serif;
font-weight: 300;
font-size: 1.5em;
}
:root.magie :is(h1, h2, h3, h4, h5, h6, summary) {font-family: 'Alpmagi', Sans-Serif;}
p {}
li {list-style: none;}
a {color: inherit;}
hr
{
width: 50%;
margin: 2em auto;
background: grey;
}
.infobulle:before
{
--fond: rgba(0,0,0,0.9)/*white*/;
--texte: white/*rgb(50,50,50)*/;
}
body > div
{
max-width: 1024px;
margin: auto;
background: white;
box-shadow: 0 0 5em rgba(0,0,0,0.5);
}

/* ENTETE */

header
{
position: relative;
background: var(--clr);
}
header h1 {}
header h1 img
{
height: 4em;
margin: 0.5em 0 0 1em;
filter: invert(1);
}
header h2
{
position: absolute;
right: 1em;
top: 1.25em;
color: white;
font-size: 2em;
font-style: italic;
}
@media (max-width: 700px) {
header
{
z-index: 3;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
header h2
{
width: 10em;
top: 0.65em;
text-align: right;
}
main {margin-top: 9em;}
}
@media (max-width: 500px) {
header h1 img
{
height: 2em;
margin-left: 0.5em;
}
header h2 {font-size: 1.25em;}
main {margin-top: 6.5em;}
}

/* Menu */
header nav {padding: 0 0.5em;}
header nav > button {display: none;}
header nav ul {display: flex;}
header nav ul li {}
header nav ul li:last-of-type
{
position: absolute;
right: 0.5em;
background: orange;
clip-path: inset(0.25em round 0.5em);
}
header nav ul li a
{
display: block;
padding: 0.75em 0.75em;
color: white;
font-weight: 600;
text-shadow: 0 0.1em 0.1em rgba(0,0,0,0.25);
}
header nav ul li a:hover, header nav ul li a.on
{
background: white;
border-radius: 0.5em 0.5em 0 0;
color: black;
}
header nav:hover ul li a.on:not(:hover) {background: rgba(255,255,255,0.5);}
@media (max-width: 700px) {
header nav
{
position: relative;
overflow: hidden;
max-height: 2.5em;
transition: max-height 0.5s;
}
header nav.on
{
max-height: 20em;
}
header nav > button
{
display: block;
padding: 0 0.5em;
background: white;
border: none;
border-radius: 4px;
color: var(--clr);
font-size: 1.5em;
}
header nav > button span
{
display: inline-block;
margin: 0 -0.25em;
font-weight: bold;
transform: scale(0.75);
}
header nav ul
{
flex-direction: column;
gap: 0.25em;
padding: 0.5em 0;
}
header nav ul li:last-of-type {top: -0.35em;}
header nav ul li a:hover, header nav ul li a.on {border-radius: 0.5em;}
}

/* PAGE */

main
{
padding: 2em;
background: white;
}
main h2 {}
main h2:not(:first-child) {margin-top: 1em;}
main h2:not(:last-child) {margin-bottom: 0.5em;}
main p {text-align: justify;}
main p.important
{
padding: 0.5em;
background: orange;
text-align: center;
}
main p.important:not(:first-child) {margin-top: 2em;}
main p.important:not(:last-child) {margin-bottom: 2em;}
main p a
{
font-weight: 600;
text-decoration: underline;
}
main > img, main section > img
{
display: block;
max-width: 100%;
}

/* PIED */

footer
{
padding: 1em;
border-top: 1px solid lightgrey;
clip-path: inset(0 1em);
}
footer > img
{
position: relative;
float: left;
height: 2em;
margin-top: -0.5em;
}
footer ul
{
display: flex;
place-content: flex-end;
gap: 1em;
}
footer ul li
{
color: grey;
font-size: 0.9em;
}
footer ul li a {}
footer ul li a:hover {text-decoration: underline;}