:root {}
main {}

/* HEADER */

header
{
width: 100%;
height: 100vh;
background: url(Fonds/Entete.webp) no-repeat center / cover fixed;
}
header h1
{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
filter: drop-shadow(0 0 5vw black);
}
header h1 img
{
width: 90vmin;
height: 90vmin;
object-fit: contain;
animation: logo 2s 1 both;
}
@keyframes logo
{
0%
{
filter: brightness(0);
transform: scale(0.75);
clip-path: circle(0% at 0% 0%);
}
100%
{
filter: brightness(1);
transform: scale(1.01);
clip-path: circle(130% at 0% 0%);
}
}
#defile
{
--couleur: white;
--ombre: transparent;
}

/* MENU (nav) */

main > nav
{
position: absolute;
box-sizing: border-box;
left: 0;
bottom: 9em;
width: 100%;
padding: 1em;
color: white;
font-weight: 600;
text-align: center;
}
main > nav ul
{
display: flex;
flex-wrap: wrap;
place-content: center;
place-items: center;
align-items: stretch;
gap: 2em;
}
main > nav ul li
{
background: radial-gradient(white 58%, transparent 59%) no-repeat -3em / 0em 0em;
border-radius: 1em;
backdrop-filter: blur(30px);
outline: 1px solid white;
outline-offset: -6px;
text-wrap: balance;
transition: background-size 0.35s, color 0.35s;
& em {display: none;}
& i {}
&:hover
{
background-size: 15em 15em;
color: black;
}
transform-origin: top;
animation: menu 0.5s var(--apparitionDelai) 1 both;
&:nth-child(1) {--apparitionDelai: 1s}
&:nth-child(2) {--apparitionDelai: 1.15s}
&:nth-child(3) {--apparitionDelai: 1.3s}
&:nth-child(4) {--apparitionDelai: 1.4s}
&:nth-child(5) {--apparitionDelai: 1.55s}
}
@keyframes menu
{
0% {transform: scale(0);}
100% {transform: scale(1.01);}
}
main > nav ul li a
{
display: flex;
width: 100%;
max-width: 8em;
padding: 1em;
place-items: center;
}
@media (max-width: 1000px) {
main > nav {bottom: 6em;}
main > nav ul {gap: 0.5em;}
main > nav ul li a {padding: 0.75em;}
}
@media (max-width: 550px) {
main > nav {font-size: 0.8em;}
}
@media (orientation: portrait) {
main > nav ul {
max-width: 20em;
margin: auto;
}
}

/* SECTIONS */

main > section
{
overflow: hidden;
background: no-repeat center / cover fixed;
&:nth-of-type(odd) {background-image: url(Fonds/FondW.webp);}
}
main > section:nth-of-type(odd) :is(h2, h3, h4, h5, h6) {color: var(--bleu);}
main > section:nth-of-type(odd):not(:first-of-type) :is(h2, h3, h4, h5, h6) {text-shadow: none;}
main > section:nth-of-type(odd) ul li a:after {background: var(--bleu);}

/* Présentation */
#presentation
{
background-image: url(Fonds/EnteteF.webp);
color: white;
}
#presentation .bouton
{
display: block;
position: relative;
width: fit-content;
margin: 3em auto 0 auto;
padding: 1em 1.5em;
background: var(--bleu);
border-radius: 3em;
outline: 2px solid var(--bleu);
outline-offset: 3px;
color: rgba(0,0,0,0.75);
font-size: 0.9em;
font-weight: 600;
text-transform: uppercase;
text-wrap: balance;
transition: outline 0.35s;
&:hover
{
background: white;
outline-color: white;
outline-offset: 0px;
}
& + .bouton {margin-top: 1em;}
}

/* SAP */
#sap {}
#sap img
{
height: 7em;
outline: none;
}
#sap_bandeau
{
--blanc: rgba(255,255,255,0.75);
--bleuSAP: #2e497f;
z-index: 5;
display: flex;
position: fixed;
overflow: hidden;
right: 0.5em;
bottom: 0.5em;
width: 7em;
padding: 1em;
flex-direction: column;
place-content: center;
place-items: center;
gap: 0.5em;
background: var(--bleuSAP);
box-shadow: 0 0 5em black;
border-radius: 1.5em;
color: var(--blanc);
font-size: 0.8em;
transition: transform 2s;
& img
{
display: block;
height: 4.5em;
filter: drop-shadow(0 0 3em white);
}
& p
{
font-weight: 600;
text-align: center;
text-wrap: balance;
& strong
{
color: white;
font-weight: inherit;
}
}
& button
{
box-sizing: border-box;
width: 100%;
padding: 0.4em;
border: 2px solid var(--blanc);
border-radius: 4px;
font-weight: 700;
&:first-of-type {background: var(--blanc); border-color: transparent; color: var(--bleuSAP);}
}
&.off {transform: translateX(100vw);}
}