/* -------------------------- ALL -------------------------- */

.singleFilm{
    padding: 200px 19% 130px 19%
}

@media (max-width: 1600px){
    .singleFilm{
        padding: 200px 13% 130px 13%;
    } 
}

@media (max-width: 992px){
    .singleFilm{
        padding: 110px 80px 85px 80px;
    } 
}

@media (max-width: 600px){
    .singleFilm{
        padding: 110px 36px 85px 36px;
    } 
}

/* -------------------------- HEADER -------------------------- */

.singleFilm .headerPage a{
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 45px;
    color: #000;
}

.singleFilm .headerPage a p{
    font-size: 40px;
    line-height: 60px;
    text-transform: uppercase;
    font-weight: 100;
}

.singleFilm .headerPage .titre{
    font-size: 52px;
    line-height: 52px;
    text-transform: uppercase;
    font-weight: 100;
}

.singleFilm .headerPage .real{
    font-size: 25px;
    line-height: 47px;
}

@media (max-width: 992px){
    .singleFilm .headerPage a p{
        font-size: 30px;
        line-height: 46px;
    }
    .singleFilm .headerPage .titre{
        font-size: 37px;
        line-height: 37px;
        margin-bottom: 11px;
    }
    .singleFilm .headerPage .real{
        font-size: 13px;
        line-height: 24px;
        margin-bottom: 22px;
    }
}

/* -------------------------- VISUELS -------------------------- */

.singleFilm .visuels{
    display: flex;
    align-items: center;
    gap: 100px;
    margin-top: -40px;
}

.singleFilm .visuels .affiche{
    max-width: 35%;
}

.singleFilm .visuels .image__container img{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='672.174' height='726.693' viewBox='0 0 672.174 726.693'%3E%3Cpath id='Tracé_19624' data-name='Tracé 19624' d='M558.284,725.688A113,113,0,0,0,671.161,612.812V112.878a112.751,112.751,0,0,0-168.382-98.2L57.3,266.753a112.836,112.836,0,0,0-8.348,191.2c2.747,1.9,5.84,3.823,9.03,5.6l445.5,247.836a113,113,0,0,0,54.8,14.3' transform='translate(0.513 0.505)' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E%0A");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='672.174' height='726.693' viewBox='0 0 672.174 726.693'%3E%3Cpath id='Tracé_19624' data-name='Tracé 19624' d='M558.284,725.688A113,113,0,0,0,671.161,612.812V112.878a112.751,112.751,0,0,0-168.382-98.2L57.3,266.753a112.836,112.836,0,0,0-8.348,191.2c2.747,1.9,5.84,3.823,9.03,5.6l445.5,247.836a113,113,0,0,0,54.8,14.3' transform='translate(0.513 0.505)' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E%0A");
}

.singleFilm .visuels .image__container > svg{
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
}

@media (max-width: 1600px){
    .singleFilm .visuels{
        margin-top: -30px;
    } 
}

@media (max-width: 1300px){
    .singleFilm .visuels{
        margin-top: -10px;
    } 
}

@media (max-width: 992px){
    .singleFilm .visuels{
        margin-top: 0px;
        flex-direction: column;
        align-items: end;
        gap: 20px;
    }
    .singleFilm .visuels .affiche{
        width: 100%;
        max-width: 100%;
    }
    .singleFilm .visuels .image__container{
        max-width: 80%;
    }
    
}

/* -------------------------- INFOS -------------------------- */

.singleFilm .infos{
    display: flex;
    gap: 150px;
    padding-top: 85px;
}

.singleFilm .infos .left{
    width: 60%;
}

.singleFilm .infos .right{
    display: flex;
    flex-direction: column;
    width: 40%;
}

.singleFilm .infos .sousTitre{
    font-size: 25px;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 13px;
    margin-top: 34px;
    font-weight: 800;
}

@media (max-width: 992px){
    .singleFilm .infos{
        flex-direction: column;
        gap: 0px;
        padding-top: 0px;
    }
    .singleFilm .infos .sousTitre{
        margin-top: 38px;
        font-size: 22px;
    }
    .singleFilm .infos .left,
    .singleFilm .infos .right{
        width: 100%;
    }
}

/* -------------------------- BANDE ANNONCE -------------------------- */

.singleFilm .bandeannonce{
    padding-top: 170px;
    position: relative;
    margin-top: 100px;
}

.singleFilm .bandeannonce svg{
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translateX(-40%);
    z-index: -1;
}

.singleFilm .bandeannonce iframe{
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
}

@media (max-width: 1600px){
    .singleFilm .bandeannonce svg{
        top: 40px;
        transform: translateX(-30%);
        width: 500px;
    } 
}

@media (max-width: 992px){
    .singleFilm .bandeannonce{
        padding-top: 60px;
        margin-top: 0px;
    }
}