@font-face {
    font-family: 'gs-regu';
    src: url("../fonts/GeneralSans-Regular.woff2") format("woff2");
}

@font-face {
    font-family: 'gs-exlight';
    src: url("../fonts/GeneralSans-Extralight.woff2") format("woff2");
}

@font-face {
    font-family: 'es-bdlt';
    src: url("../fonts/ESKlarheitKurrent-BdIt-TRIAL.otf") format("opentype");
}

@font-face {
    font-family: 'es-x';
    src: url("../fonts/ESKlarheitPlakat-Xblk-TRIAL.otf") format("opentype");
}

@font-face {
    font-family: 'es-trial';
    src: url("../fonts/ESKlarheitKurrent-Bd-TRIAL.otf") format("opentype");
}

@font-face {
    font-family: 'es-poster';
    src: url("../fonts/ESKlarheitPlakat-Poster-TRIAL.otf") format("opentype");
}

@font-face {
    font-family: 'gs-md';
    src: url("../fonts/GeneralSans-Medium.woff2") format("woff2");
}

@font-face {
    font-family: 'gs-light';
    src: url("../fonts/GeneralSans-Light.woff2") format("woff2");
}

@font-face {
    font-family: 'gs-light-it';
    src: url("../fonts/GeneralSans-LightItalic.woff2") format("woff2");
}

@font-face {
    font-family: 'gs-regu-it';
    src: url("../fonts/GeneralSans-Italic.woff2") format("woff2");
}

.font-regu-it {
    font-family: 'gs-regu-it', sans-serif !important;
}

.font-regu {
    font-family: 'gs-regu', sans-serif !important;
}

.font-exlight {
    font-family: 'gs-exlight', sans-serif !important;
}

.font-md {
    font-family: 'gs-md', sans-serif !important;
}

.font-esbk {
    font-family: 'es-bdlt', sans-serif !important;
}

.font-trial {
    font-family: 'es-trial', sans-serif !important;
}

.font-light {
    font-family: 'gs-light', sans-serif !important;
}

.font-light-it {
    font-family: 'gs-light-it', sans-serif !important;
}

.font-poster {
    font-family: 'es-poster', sans-serif !important;
}

.font-x {
    font-family: 'es-x', sans-serif !important;
}

.text-1 {
    margin-left: 20px;
    color: black;
    line-height: 1.2;
}

.text-2 {
    margin-left: 8vw;
    color: black;
    line-height: 1.2;
}

@media screen and (max-width: 480px) {
    .text-2 {
        margin-left: 20px;
    }
}


h2 {
    font-size: 5vh !important;
    margin-left: 42px !important;
}

@media screen and (max-width: 480px) {
    h2 {
        margin-left: 0px !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 480px) {
    #see-more {
        font-size: 3.5vw !important;
        text-align: end !important;
    }
}

img {
    width: 90%;
    /* L'image prend toute la largeur de la colonne */
    height: auto;
    /* Conserve les proportions */
}

.img-flou {
    transition: filter 0.1s ease-in-out;
}

.img-flou:hover {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

.under-2 {
    margin-top: -20px;
}

footer {
    background-color: black;
}

.nav-a:hover {
    font-family: 'es-poster', sans-serif !important;
    text-decoration: none !important;
}

.navbar-2 {
    margin-left: 18px;
    margin-right: 42px;
}

/* Les éléments masqués par défaut */
.work-item {
    display: none;
}

/* Les éléments visibles */
.work-item.show {
    display: block;
}

/* Style pour la catégorie active */
.category.active {
    font-family: 'es-poster', sans-serif !important;
    ;
}

/* Sous-catégories masquées par défaut */
.subcategories {
    display: none;
}

/* Sous-catégories visibles */
.subcategories.show {
    display: block;
}

video {
    height: auto;
    /* Conserve les proportions */
    max-width: 40%;
}

.text-start {
    margin-left: 0px !important;
}

@media screen and (max-width: 480px) {
    #text-t {
        font-size: 5vw !important;
        text-align: start !important;
        margin-left: 32px !important;
        margin-top: 25px !important;
    }
}

@media screen and (max-width: 480px) {
    #text-z {
        font-size: 4vw !important;
        text-align: start !important;
        margin-left: 32px !important;
        margin-top: -5px !important;
    }
}

@media screen and (max-width: 480px) {
    #text-intro {
        font-size: 3.2vw !important;
    }
}

h3 {
    margin-top: -10px !important;
}

body {
    cursor: url('../images/photos/cursor2.png'), auto;
}

a {
    cursor: url('../images/photos/cursor3.png'), auto;
}

.text-details {
    font-size: 1.4vw !important;
}

@media screen and (max-width: 480px) {
    .text-details {
        font-size: 3.5vw !important;
        text-align: start !important;
        margin-left: 32px;
        margin-top: -20px !important;
        margin-bottom: 50px !important;
    }
}

.sticky-navbar {
    position: fixed !important;
    top: -10px;
    z-index: 1000 !important;
    background-color: white;
    width: 100%;
}

.fixed-element {
    position: fixed !important;
    left: 0 !important;
    width: 97%;
    z-index: 999 !important;
    /* Juste en dessous de la navbar */
    background-color: white !important;
    /* Exemple de couleur */
    top: 0;
    /* Ajuste cette valeur pour placer sous la navbar */
    margin-right: 42px !important;
}

.fixed-text {
    position: fixed;
    /* 🔥 Fixe l'élément dès le départ */
    right: 0;
    /* Garde l'alignement à droite */
    width: 50%;
    /* Ajuste la largeur du texte (modifiable selon ton design) */
    overflow-y: auto;
    /* Permet le scroll interne si le texte est long */
    max-height: calc(100vh - var(--total-height, 0px));
    /* Ajuste dynamiquement la hauteur */
}

.nav-1 {
    top: -10px;
}


html {
    scroll-behavior: auto !important;
}

.video-p {
    height: auto;
    /* Conserve les proportions */
    max-width: 90%;
}

.subcategories {
    margin-top: -32px;
}

.download {
    text-decoration: none;
    margin-bottom: 30px !important;
}

@media screen and (max-width: 480px) {
    .navbar-2 {
        display: none !important;
    }
}

#video-a {
    align-items: center !important;
    align-content: center !important;
    max-width: 35% !important;
    margin-left: 35% !important;
}

@media screen and (max-width: 480px) {
    #video-a {
        align-items: center !important;
        align-content: center !important;
        max-width: 50% !important;
        margin-left: 25% !important;
        margin-top: 5%;
        margin-bottom: 5%;
    }
}

html,
body {
    overflow-x: hidden;
}

@media screen and (max-width: 480px) {
    .selected {
        font-size: 5vw !important;
        text-align: left !important;
        margin-left: 20px !important;
    }
}

@media screen and (max-width: 480px) {
    #text-start {
        font-size: 3.2vw !important;
    }
}

@media screen and (max-width: 480px) {
    .image-sub {
        align-items: start;
        width: 82% !important;
    }
}

@media screen and (max-width: 480px) {
    #text-about {
        text-align: start !important;
        font-size: 3.5vw !important;
        margin-left: 20px !important;
        margin-top: -5px;
    }
}

@media screen and (max-width: 480px) {
    #text-about-2 {
        text-align: start !important;
        font-size: 4vw !important;
        margin-left: 20px !important;
    }
}

@media screen and (max-width: 480px) {
    #download {
        text-align: start !important;
        font-size: 4vw !important;
        margin-left: 20px !important;
        margin-top: -70px !important;
    }
}

@media screen and (max-width: 480px) {
    #title-about {
        text-align: start !important;
        font-size: 5vw !important;
        margin-left: 20px !important;
    }
}