/* -------------------Template 1-------------------*/

section {
    position: relative;
    padding-top: 50px;
    padding-bottom: 70px;
    background-color: var(--bg-color);
}

.template-1-row,
.template-2-row,
.template-3-row,
.template-4-row,
.container {
    row-gap: 30px;
}

.month-container {
    display: flex;
    flex-direction: column;
}

.backMonth-text {
    font-family: 'Arges', sans-serif;
    font-size: var(--backMonth-fontSize);
    color: var(--backMonth-color);
    font-variation-settings:
        'wght' var(--backMonth-weight),
        'wdth' var(--backMonth-width),
        'slnt' var(--backMonth-slant);
    text-transform: uppercase;
    z-index: 0;
}

.frontMonth-text {
    position: absolute;
    font-family: 'NewIcon', serif;
    font-size: var(--frontMonth-fontSize);
    color: var(--frontMonth-color);
    transform: translateY(27px);
    z-index: 100;
}

.frontMonth-text div[aria-hidden="true"] {
    overflow-x: visible !important;
    z-index: 100 !important;
}

.frontMonth-text::first-letter,
.frontMonth-text div:first-child div {
    font-family: 'NewIconScript', serif !important;
    text-transform: uppercase;
}

.frontMonth-text div:first-child {
    overflow-x: visible !important;
}

.text-info-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    /*transform: translateX(-20px);*/
}

.content-text-container,
.container-description {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    justify-content: center;
}




.text-info-container span,
span.description-info-text,
.credit-info-text {
    font-family: 'DmMono', 'mono-space';
    font-weight: 500;
    color: var(--accent-color);
    outline-color: var(--accent-color);
    outline-width: 1.8px;
    outline-style: solid;
    padding: 0px 12px;
    padding-top: 1px;
    border-radius: 3px;
    font-size: var(--text-info-fontSize);
    text-transform: capitalize;
    text-transform: uppercase;
}

.text-stmt-container p.text-stmt,
.description-text p {
    font-family: "NeueMontreal", "sans-serif";
    font-weight: 400;
    font-size: var(--text-stmt-fontSize);
    line-height: var(--text-stmt-lineHeight);
}

.text-stmt-container p.text-stmt {
    color: var(--text-color);
}

.description-text p {
    color: var(--popup-text-color);
}

.text-stmt span.name {
    text-transform: capitalize;
}

.text-stmt span.italic {
    font-style: italic;
}

.text-link-container {
    display: inline;
    padding: 0px;
    align-self: flex-end;
    z-index: 1;
    transition: transform 0.2s;
}



.text-link-container a.text-link {
    background-color: rgba(0, 0, 0, 0);
    color: var(--accent-color);
}

.template-4-col.video-container {
    transform: translateY(-5%);
}

.template-4-col.video-container {
    margin-top: 40px;
}

.content-video-container {
    width: 100%;
    aspect-ratio: var(--film-format-phone);
    border-radius: var(--border-radius);
    padding: 0px;
}

.film-title-container {
    width: 100%;
    display: flex;
    justify-content: end;
}

h2.film-title {
    font-family: 'Arges', sans-serif;
    font-size: var(--film-title-fontSize);
    color: var(--accent-color);
    font-variation-settings:
        'wght' var(--film-title-weight),
        'wdth' var(--film-title-width),
        'slnt' var(--film-title-slant);
    text-transform: uppercase;
}

.video-src {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
    background-color: var(--accent-color);
    pointer-events: none;
}



/* --------------------Popup-------------------- */
.container-fluid.popup {
    margin-top: 50px;
    overflow: hidden;
}

.popup-row {
    row-gap: 40px;

}

.popup-button-container {
    display: flex;
    justify-content: center;
}

.popup-button {
    color: var(--popup-text-color);
    padding: 7px 0px;
    padding-top: 8px;
    word-break: keep-all;
    cursor: pointer;
}

.popup-background {
    border-radius: var(--border-radius);
    background-color: var(--popup-bg-color);
    max-height: 100% !important;
}

span.description-info-text,
.credit-info-text {
    color: var(--popup-accent-color);
    outline-color: var(--popup-accent-color);
}

.description-text p {
    color: var(--popup-text-color);
    font-size: var(--text-description-fontSize);
    line-height: var(--text-stmt-lineHeight);

}

/* gallery */

.gallery-container {
    width: 130vw;
    height: 700px;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-left: -20vw;
    margin-top: -200px;
    scale: 80%;
}

.gallery-container:active {
    cursor: grabbing;
}

/* cacher la scrollbar */
.gallery-container::-webkit-scrollbar {
    display: none;
}

.gallery {
    position: relative;
    height: 100%;
    scale: 1;
}

.gallery img {
    position: absolute;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
    width: 100%;
    height: 100%;
    /* évite les conflits avec le drag */
    border-radius: 8px;
    /* optionnel, comme sur le screenshot */

    /* optionnel, pour un effet de profondeur */
}


.gallery-img-src {
    background-color: var(--accent-color);
    max-width: 420px;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--border-radius);
}


/* credits */


.credit-list {
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    margin-top: 10px;
}

.credit-item {
    display: flex;
    flex-direction: column;
}



.credit-item-title {
    font-family: "NewIcon";
    color: var(--popup-text-color);
    font-size: var(--credit-title-fontSize);
    font-weight: 100;
}

.credit-item-title::first-letter {
    font-family: "NewIconScript";
}

.credit-item-text {
    font-family: "Arges";
    color: var(--popup-text-color);
    font-size: var(--credit-text-fontSize);
    font-variation-settings:
        'wght' calc(var(--backMonth-weight) - 300),
        'wdth' var(--backMonth-width),
        'slnt' var(--backMonth-slant);
    text-transform: capitalize;
    transform: translateY(-18px);
}

/* pour telephone */
@media only screen and (max-width: 990px) {

    .template-1-row div div:not(.content-video-container),
    .template-2-row div div:not(.content-video-container),
    .template-3-row div div:not(.content-video-container),
    .template-4-row div div:not(.content-video-container) {
        padding-left: 10px;
        padding-right: 10px;
    }

    .template-1.text-link-container {
        transform: translateY(-20) scale(1);
    }

    .template-1.text-link-container:hover {
        transform: translateY(-20px) scale(1.1);
    }

    .template-3-col {
        gap: 0px !important;
    }

    .template-4-col.video-container {
        transform: translateY(0%);
    }

    .film-title-container {
        display: none;
    }
}

/* PC */
@media only screen and (min-width:960px) {
    section {
        position: relative;
        padding-top: 90px;
        padding-bottom: 70px;
        background-color: var(--bg-color);
    }

    .template-3-row {
        row-gap: 75px;
    }

    .content-text-container.template-2 {
        padding-left: 20px;
    }

    .frontMonth-text {
        transform: translateY(33px);
    }

    .content-video-container.template-3,
    .content-video-container.template-4 {
        aspect-ratio: var(--film-format-template-3-4);
    }

    .content-video-container {
        aspect-ratio: var(--film-format-template-1-2);
    }


    .credit-list {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center;
    }


    .text-link-container.template-1 {
        transform: translateY(-50px) scale(1);
    }

    .text-link-container.template-1:hover {
        transform: translateY(-50px) scale(1.1);
    }

    .text-link-container.template-2 {
        transform: translateY(-50px) translateX(-100px) scale(1);
    }

    .text-link-container.template-2:hover {
        transform: translateY(-50px) translateX(-100px) scale(1.1);
    }

    .text-link-container.template-3 {
        transform: translateY(-50px) translateX(40px) scale(1);
    }

    .text-link-container.template-3:hover {
        transform: translateY(-50px) translateX(40px)scale(1.1);
    }

    .text-link-container.template-4 {
        transform: translateY(-100px) translateX(-100px) scale(1);
    }

    .text-link-container.template-4:hover {
        transform: translateY(-100px) translateX(-100px) scale(1.1);
    }

    .gallery-container {
        width: 110vw;
        height: 700px;
        /* ou la hauteur que tu veux */
        overflow-x: scroll;
        overflow-y: hidden;
        margin-left: -10vw;
        margin-top: -100px;
        scale: 100%;
    }
}