@font-face {
    font-family: 'Trenda Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Regular'), url('../font/Latinotype  Trenda Regular.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Regular It';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Regular It'), url('../font/Latinotype  Trenda Regular It.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Thin'), url('../font/Latinotype  Trenda Thin.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda ExtraLight It';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda ExtraLight It'), url('../font/Latinotype  Trenda ExtraLight It.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Thin It';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Thin It'), url('../font/Latinotype  Trenda Thin It.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda ExtraLight'), url('../font/Latinotype  Trenda ExtraLight.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Light';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Light'), url('../font/Latinotype  Trenda Light.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Light It';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Light It'), url('../font/Latinotype  Trenda Light It.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Semibold'), url('../font/Latinotype  Trenda Semibold.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Semibold It';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Semibold It'), url('../font/Latinotype  Trenda Semibold It.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Bold'), url('../font/Latinotype  Trenda Bold.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Bold It';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Bold It'), url('../font/Latinotype  Trenda Bold It.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Black';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Black'), url('../font/Latinotype  Trenda Black.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Heavy'), url('../font/Latinotype  Trenda Heavy.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Black It';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Black It'), url('../font/Latinotype  Trenda Black It.woff') format('woff');
}
    
@font-face {
    font-family: 'Trenda Heavy It';
    font-style: normal;
    font-weight: normal;
    src: local('Trenda Heavy It'), url('../font/Latinotype  Trenda Heavy It.woff') format('woff');
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Trenda Regular', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    position: relative;
}

/* Fond parallaxe fixe */
#parallax-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 250vh;
    background-image: url('../images/Cercles_fond.svg');
    background-size: 160%;
    background-position: -100% 50%;
    background-repeat: no-repeat;
    z-index: -2;
    will-change: transform;
}

#fixed-background {
    background-image: url('../images/E_en_blanc.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: var(--color-background);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -3;
}

html {
    overflow-y: auto;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: inherit;
}

#filtre-gris {
    background-color: #40404066;
    width: 100%;
    height: 100%;
}

/* Conteneur pour masquer les éléments qui sortent */
.animation-container {
    width: 100%;
}

/* Assure que le contenu reste au-dessus du fond parallaxe */
#a-propos, #activite, #realisations, #actualite, #modal-contact {
    position: relative;
    z-index: 1;
}

.arrived-by-bottom {
    transform: translateY(100vh);
    opacity: 0;
    transition: transform 0.8s ease-out 0.2s;
}

.arrived-by-right {
    transform: translateX(100vw);
    opacity: 0;
    transition: transform 0.8s ease-out 0.2s;
}

.arrived-by-bottom-arrived {
    transform: translateY(0);
    opacity: 1;
}

.fondu-spawn {
    opacity: 0;
    transition: opacity 1s ease-out 0.2s;
}