/* ------- 
PAGE INFOS
-------
structure 
------- */


/* scrollbar */

#infoText {
    --sb-track-color: #ffffff00;
    --sb-thumb-color: #ffffff00;
    --sb-size: 0px;
}

#infoText::-webkit-scrollbar {
    width: var(--sb-size)
}

#infoText::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 0px;
}

#infoText::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 0px;

}

@supports not selector(::-webkit-scrollbar) {
    #infoText {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

/* Style for the overall grid */
.infoGrid {
    /* background-color: #efefef; */
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: 100dvh;
    padding: var(--marge-top) 25px var(--marge-bas) 25px;
    box-sizing: border-box;
    font-family: 'Arial Narrow';
}

/* Style for the text column */
#infoText {
    flex: 1;
    max-width: 30vw;
    margin-right: 50px;
    overflow-y: auto;
    padding-bottom: 20px;
}

#infoText p {
    font-size: 20pt;
}

#infoText a {
    color: var(--noir);
    text-decoration: none;
}

#infoText a:hover {
    background-color: var(--bleu);
}

#instaInfo {
    display: none;
}

#infoCarousel {
    flex: 1;
}

/* Carousel container */
.carousel-containerInfo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Carousel images */
.carouselInfo {
    position: relative;
    height: 100%;
}

.carouselInfo img {
    position: absolute;
    top: 0;
    /* left: 50%; */
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.carouselInfo img.active {
    opacity: 1;
    /* Fully visible for the active image */
}


@media (max-width: 900px) {
    #corpsGrid {
        height: 100dvh;
        position: fixed;
        top: 0;
        left: 0;

    }

    .infoGrid {
        flex-direction: column;
        padding: 60px 15px 50px 15px;
        width: 100vw;
    }

    #infoText {
        max-width: 100%;
        margin-right: 0;
        flex: 2;
        padding-bottom: 10px;
        margin-bottom: 10px;
        margin-top: 5px;
    }

    #infoText p {
        font-size: 13.5pt;
    }

    #instaInfo {
        display: block;
    }
}