:root
{
--marges: 2em;
}
@media (max-width: 450px) {
	:root {--marges: 1.5em;}	
}

/* HEADER */

header
{
width: 100%;
height: 100vh;
background: url(Fonds/Entete.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
}
header:before
{
--marges: 2vmin;
--epaisseur: calc(4px + 1vmin);
z-index: -1;
content: '';
display: block;
position: absolute;
width: calc(100% - (var(--marges) * 2) - (var(--epaisseur) * 2));
height: calc(100% - (var(--marges) * 2) - (var(--epaisseur) * 2));
left: var(--marges);
top: var(--marges);
border: var(--epaisseur) dashed var(--sombre);
}
header h1
{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
header h1 img
{
width: 80vw;
height: 70vh;
object-fit: contain;
}
#defile
{
--couleur: var(--sombre);
--ombre: transparent;
}

/* SECTIONS */

section, footer
{
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
padding: calc(var(--marges) * 2);
text-align: center;
}
section
{
background-color: var(--sombre);
/*background-repeat: no-repeat;
background-position: center;
background-size: cover;*/
}
section > *
{
z-index: 1;
position: relative;
}
section:not(:last-of-type) {padding-bottom: calc(var(--marges) * 1.35);}
section:before
{
z-index: 0;
content: '';
display: block;
position: absolute;
width: calc(100% - (var(--marges) * 2));
height: calc(100% - (var(--marges) * 2));
left: var(--marges);
top: var(--marges);
border: 4px double var(--clair);
}
section:not(:last-of-type):before {height: calc(100% - (var(--marges) * 1.35));}
section h2, footer h2
{
margin-bottom: calc(var(--marges) / 3.5);
color: var(--clair);
line-height: 0.9em;
transform: rotate(-5deg);
}
section > p
{
color: var(--clair);
text-align: center;
}
section button
{
display: inline-block;
margin: 0.25em;
padding: 0.7em 0.8em;
background: var(--clair);
border: none;
border-radius: 4px;
color: var(--sombre);
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
}
section button:hover {background: black;}
section ul
{
list-style: none;
}
section ul li
{
display: inline-block;
width: 10em;
vertical-align: top;
margin: 0.5em;
margin-bottom: 1em;
color: var(--clair);
text-align: center;
}
section ul li img
{
display: block;
width: 10em;
height: 10em;
object-fit: cover;
margin: auto;
margin-bottom: 1em;
clip-path: circle(50%);
}
section ul li em
{
display: block;
font-size: 0.75em;
}
section ul + p
{
margin-top: 1em;
font-weight: bold;
}
section ul + p a
{
position: relative;
margin: -0.5em;
padding: 0.5em;
}
section ul + p a img
{
height: 1.25em;
margin: 0 0.15em;
vertical-align: -0.25em;
}

/* PIED */

footer
{
padding-top: var(--marges);
padding-bottom: calc(var(--marges) * 0.25);
background-color: var(--clair);
}
footer h2
{
color: var(--sombre);
font-size: 2em;
}
footer > a
{
display: inline-block;
margin: 0.25em;
padding: 0.7em 0.8em;
background: var(--sombre);
border-radius: 4px;
color: var(--clair);
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
}
footer > a:hover {background: black;}
footer > a:focus {background: var(--sombre);}

footer hr
{
margin-top: 2em;
margin-bottom: 0.5em;
}
footer hr + p
{
font-size: 15px;
font-weight: 600;
}