@font-face {
    font-family: "BOURRASQUE REG";
    src: url(/assets/fonts/Bourrasque-Regular.woff2);
}
@font-face {
    font-family: "BOURRASQUE EST";
    src: url(/assets/fonts/Bourrasque-45Est.woff2);
}
@font-face {
    font-family: "BOURRASQUE OUEST";
    src: url(/assets/fonts/Bourrasque-45Ouest.woff2);
}

h1{
    font-family: "BOURRASQUE REG"; 
    font-weight: normal;
    font-style: normal;
    font-size: calc(var(--font-size)*2);
    margin-block: 10px;
}

h2{
    font-family: "BOURRASQUE REG";
    font-weight: normal;
    font-style: normal;
    font-size: calc(var(--font-size)*2);
    margin: 0;
    width: 90vw;
}

#ML h2{
    margin-top: 40px;
}

h3{
    font-family: "BOURRASQUE REG";
    font-weight: normal;
    font-style: normal;
    font-size: var(--font-size);
    margin: 0;
}

h4{
    display: block;
    font-family: "BOURRASQUE EST";
    font-weight: 500;
    font-size: calc(var(--font-size)*2);
    margin: 0;
    z-index: 2;
    overflow-wrap:normal;
}

@media (max-width: 710px) {
    h4{font-size: calc(var(--font-size)*1.7);}
}


p{
    font-size: calc(var(--font-size)/1);
    margin-top: 25px;
    margin-bottom: 0;
} 

li{
    margin-left: 30px;
}

a, p a, li a{
    text-decoration: underline;
    color: var(--black);
}
a:hover, p a:hover, li a:hover{
    font-family: "BOURRASQUE EST";
}

b.est{
    font-family: "BOURRASQUE EST";
    font-weight: 500;
}

b.ouest{
    font-family: "BOURRASQUE OUEST";
    font-weight: 500;
}

strong{
    font-weight: normal;
    text-decoration: underline;
}

*,*::before,*::after{box-sizing:border-box}

html{
    scroll-padding-top:calc(var(--height-header) - 20px);
    scroll-behavior:smooth
}

body{
    margin: 0;
    padding: 0;
    font-size: var(--font-size);
    font-family: "BOURRASQUE REG";
    background: var(--white);
    color: var(--black);
}

a {
    text-decoration: none;
}

section{
    padding: var(--main-padding);
    margin-top: var(--height-header);
    position: relative;
    z-index: 2;
}

.gap{
    height: var(--gap);
    max-width: 100%;
    padding: 0;
    margin: 0;
}

button {
    border: none;
    background: none; 
    cursor: pointer;
}


button span {
    display: block;
    font-family: "BOURRASQUE REG";
    font-size: var(--font-size);
    color: var(--black);

    padding: 10px;
    border: var(--border) solid var(--black);
    background: var(--white);

    transition: 0.2s;
}

button:hover span {
    font-family: "BOURRASQUE EST";
    transform: rotate(45deg);
}


/* -- APPARITION DES SECTION FADE -- */

/* État de départ : uniquement si JS actif, sinon le contenu reste visible */
.js section, .js div {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.js section.is-visible, .js div.is-visible {
    opacity: 1;
    transform: none;
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
    .js section, .js div {
        opacity: 1;
        transform: none;
        transition: none;
    }
}