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

.frontpage{
    width: auto;
}

/* -------------------------- VIDEO -------------------------- */

.frontpage .video{
    position: relative;
    height: 100svh;
}

.frontpage .video img{
    width: 100vw;
    height: 100svh;
}

.frontpage .video .lma{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40px;
}

.frontpage .video .lma ul{
    display: flex;
    align-items: center;
    gap: 60px;
}

.frontpage .video .lma ul li a{
    font-size: 29px;
    line-height: 43px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
    color: #000;
    background-color: #fff;
    transition: 300ms ease;
    border-radius: 36px;
    padding: 7px 33px;
    font-weight: 300;
    white-space: nowrap;
}

.frontpage .video .lma ul li a svg{
    transform: scale(1);
    transition: 300ms ease;
}

#myVideo{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.buttonMute{
    display: none;
    position: absolute;
    height: 40px;
    width: 40px;
    bottom: 20px;
    left: 20px;
    border-radius: 100%;
    background-color: #ffffff69;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.buttonMute img{
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
}

@media (min-width: 993px){
    .frontpage .video .lma ul li:hover a{
        color: #fff;
        background-color: #000;
        transition: 300ms ease;
    }
    .frontpage .video .lma ul li:hover a svg{
        transform: scale(1.2);
        transition: 300ms ease;
    }
}

@media (max-width: 880px){
    .frontpage .video .lma ul{
        gap: 13px;
    }
    .frontpage .video .lma ul li a{
        font-size: 16px;
        line-height: 25px;
        gap: 7px;
        padding: 6px 10px;
    }
    .frontpage .video .lma ul li a svg{
        max-width: 14px;
    }
}

@media (max-width: 600px){
    .buttonMute{
        bottom: 100px;
    }
}

/* -------------------------- LIGHT -------------------------- */

.frontpage .light{
    padding: 90px 15% 40px 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;
}

.frontpage .light figcaption{
    max-width: 530px;
}

.frontpage .light figcaption .titre,
.frontpage .light figcaption .paragraphe{
    margin-bottom: 30px;
}

.frontpage .light img{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='691.694' height='779.242' viewBox='0 0 691.694 779.242'%3E%3Cpath id='Tracé_19627' data-name='Tracé 19627' d='M660.007,172.232,377.032,8.858a62.36,62.36,0,0,0-62.37,0L31.684,172.232A62.366,62.366,0,0,0,.5,226.246V553a62.37,62.37,0,0,0,31.184,54.014L314.662,770.385a62.36,62.36,0,0,0,62.37,0L660.007,607.011A62.373,62.373,0,0,0,691.194,553V226.246A62.369,62.369,0,0,0,660.007,172.232Z' transform='translate(0 0)' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3C/svg%3E%0A");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='691.694' height='779.242' viewBox='0 0 691.694 779.242'%3E%3Cpath id='Tracé_19627' data-name='Tracé 19627' d='M660.007,172.232,377.032,8.858a62.36,62.36,0,0,0-62.37,0L31.684,172.232A62.366,62.366,0,0,0,.5,226.246V553a62.37,62.37,0,0,0,31.184,54.014L314.662,770.385a62.36,62.36,0,0,0,62.37,0L660.007,607.011A62.373,62.373,0,0,0,691.194,553V226.246A62.369,62.369,0,0,0,660.007,172.232Z' transform='translate(0 0)' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3C/svg%3E%0A");
}

.frontpage .light .image__container > svg{
   right: 1%;
   top: 1%;
}

@media (max-width: 1500px){
    .frontpage .light{
        padding: 90px 10% 80px 10%;
    }
    .frontpage .light .image__container{
        min-width: 40%;
    }
}

@media (max-width: 1300px){
    .frontpage .light{
        padding: 90px 7% 80px 7%;
    }
    .frontpage .light .image__container::after{
        right: -25px;
    }
}

@media (max-width: 992px){
    .frontpage .light{
        padding: 40px 80px 80px 90px;
        flex-direction: column;
        gap: 20px;
    }
    .frontpage .light .image__container{
        min-width: 0px;
        max-width: 100%;
    }
    .frontpage .light .image__container::after{
        right: -60px;
    }
}

@media (max-width: 600px){
    .frontpage .light{
        padding: 40px 36px 90px 36px;
    }
    .frontpage .light .image__container::after{
        right: -25px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='286.723' height='322.941' viewBox='0 0 286.723 322.941'%3E%3Cpath id='Tracé_19631' data-name='Tracé 19631' d='M273.322,71.542,156.262,3.958a25.8,25.8,0,0,0-25.8,0L13.4,71.542A25.8,25.8,0,0,0,.5,93.886v135.17A25.8,25.8,0,0,0,13.4,251.4l117.061,67.584a25.8,25.8,0,0,0,25.8,0L273.322,251.4a25.8,25.8,0,0,0,12.9-22.344V93.886A25.8,25.8,0,0,0,273.322,71.542Z' transform='translate(0 0)' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3C/svg%3E%0A");
    }
}


/* -------------------------- DÉCORS -------------------------- */

.frontpage .swiper .titre{
    padding: 0px 13% 36px 13%;
}

.frontpage .swiper figure{
    position: relative;
}

.frontpage .swiper figure img{
    border: solid var(--gold);
    border-width: 15px 0px;
}

.frontpage .swiper figure figcaption{
    position: absolute;
    bottom: 25px;
    left: 0px;
    background-color: #fff;
    padding: 43px;
    max-width: 35%;
}

.frontpage .swiper figure figcaption .paragraphe{
    margin-bottom: 22px;
}

@media (max-width: 1600px){
    .frontpage .swiper figure figcaption{
        max-width: 45%;
        padding: 33px;
    }
}

@media (max-width: 1300px){
    .frontpage .swiper figure figcaption{
        position: relative;
        width: 100%;
        max-width: none;
        padding: 22px 36px;
        bottom: 0px;
    }
    .frontpage .swiper figure figcaption .paragraphe{
        margin-bottom: 30px;
    }
    .frontpage .swiper .titre{
        padding: 0px 80px c 80px;
    }
}

@media (max-width: 992px){
    .frontpage .swiper figure img{
        min-height: 270px;
    }
}

@media (max-width: 600px){
    .frontpage .swiper figure img{
        border-width: 10px 0px;
    }
    .frontpage .swiper .titre{
        padding: 0px 36px 36px 36px;
    }
    .frontpage .swiper .goldenTitle,
    .frontpage .swiper .goldenTitle p{
        font-size: 40px;
        line-height: 40px;
    }
}

/* -------------------------- DERNIER FILM TOURNÉ EN CHARENTE -------------------------- */

.frontpage .dernierFilm{
    padding: 150px 15% 120px 15%;
    display: grid;
    grid-template-columns: 1fr 170px 1fr;
    grid-row: auto;
}

.frontpage .dernierFilm .image__container{

    z-index: -1;
    height: fit-content;
}

.frontpage .dernierFilm > div{
    grid-column: 1/3;
    grid-row: 1/2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.frontpage .dernierFilm .image__container > img{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='742.675' height='802.922' viewBox='0 0 742.675 802.922'%3E%3Cpath id='Tracé_19624' data-name='Tracé 19624' d='M124.734,801.917A124.87,124.87,0,0,1,0,677.184V124.735A124.595,124.595,0,0,1,186.071,16.217L678.348,294.774a124.688,124.688,0,0,1-.754,217.471l-492.3,273.869a124.872,124.872,0,0,1-60.56,15.8' transform='translate(0.499 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='742.675' height='802.922' viewBox='0 0 742.675 802.922'%3E%3Cpath id='Tracé_19624' data-name='Tracé 19624' d='M124.734,801.917A124.87,124.87,0,0,1,0,677.184V124.735A124.595,124.595,0,0,1,186.071,16.217L678.348,294.774a124.688,124.688,0,0,1-.754,217.471l-492.3,273.869a124.872,124.872,0,0,1-60.56,15.8' transform='translate(0.499 0.505)' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E%0A");
}

.frontpage .dernierFilm .image__container > svg{
    right: -50%;
    top: 48%;
    transform: translate(-50%, -50%);
}

.frontpage .dernierFilm figcaption{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-column: 2/4;
    grid-row: 1/2;
}

.frontpage .dernierFilm figcaption .titre{
    text-align: center;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    font-size: 76px;
    line-height: 80px;
    font-weight: 100;
    text-transform: uppercase;
}

.frontpage .dernierFilm figcaption .titre strong{
    color: var(--gold);
    font-weight: 700;
}

.frontpage .dernierFilm figcaption > img{
    max-height: 500px;
}

.frontpage .dernierFilm figcaption .nomFilm,
.frontpage .dernierFilm figcaption .nomFilm p,
.frontpage .dernierFilm figcaption .nomFilm span,
.frontpage .dernierFilm figcaption .nomFilm strong,
.frontpage .dernierFilm figcaption .nomFilm a{
    font-size: 44px;
    line-height: 44px;
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: center;
}

.frontpage .dernierFilm figcaption .realFilm{
    font-size: 25px;
    line-height: 30px;
    margin-bottom: 25px;
}

.frontpage .dernierFilm figcaption .separation{
    background-color: #000;
    width: 1px;
    height: 40px;
    margin: 22px 0px;
}

@media (max-width: 1600px){
    .frontpage .dernierFilm{
        padding: 150px 8% 120px 8%;
    }
    .frontpage .dernierFilm figcaption > img{
        max-height: 380px;
    }
    .frontpage .dernierFilm figcaption .titre{
        font-size: 60px;
        line-height: 60px;
    }
    .frontpage .dernierFilm figcaption .nomFilm{
        font-size: 35px;
        line-height: 30px;
    }
    .frontpage .dernierFilm figcaption .realFilm{
        font-size: 22px;
        line-height: 26px;
    }
}

@media (max-width: 992px){
    .frontpage .dernierFilm{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding-top: 60px;
        gap: 20px;
    }
    .frontpage .dernierFilm > div{
        grid-column: 1/2;
        grid-row: 1/2;
        width: 100%;
        justify-content: start;
    }
    .frontpage .dernierFilm > figcaption{
        grid-column: 1/2;
        grid-row: 2/3;
        width: 100%;
    }
    .frontpage .dernierFilm .image__container{
        width: 80%;
    }
    .frontpage .dernierFilm .image__container::after{
        transform: translate(-10%, -51%);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='203.642' height='220.018' viewBox='0 0 203.642 220.018'%3E%3Cpath id='Tracé_19634' data-name='Tracé 19634' d='M34.068,219.013A34.1,34.1,0,0,1,0,184.947V34.063A34.029,34.029,0,0,1,50.82,4.425L185.269,80.5a34.054,34.054,0,0,1-.206,59.395L50.607,214.7a34.1,34.1,0,0,1-16.54,4.316' transform='translate(0.499 0.505)' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E%0A");
    }
    .frontpage .dernierFilm figcaption .titre{
        font-size: 46px;
        line-height: 46px;
        white-space: normal;
    }
    .frontpage .dernierFilm figcaption .separation{
        height: 24px;
        margin: 10px 0px;
    }
    .frontpage .dernierFilm figcaption .nomFilm{
        font-size: 29px;
        line-height: 34px;
        text-align: center;
    }
    .frontpage .dernierFilm figcaption .realFilm{
        font-size: 18px;
        line-height: 22px;
    }
}

@media (max-width: 600px){
    .frontpage .dernierFilm{
        padding-left: 36px;
        padding-right: 36px;
    }
    .frontpage .dernierFilm .image__container{
        width: 90%;
    }
    .frontpage .dernierFilm .image__container::after{
        transform: translate(5%, -51%);
    }
}


/* -------------------------- LES DERNIERS FILMS -------------------------- */

.frontpage .films{
    padding: 0px 11% 120px 11%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.frontpage .films > .titre{
    font-size: 76px;
    line-height: 80px;
    font-weight: 100;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    margin-left: 50px;
}

.frontpage .films > .titre strong{
    font-weight: 700;
    color: var(--gold);
}

.frontpage .films .films__container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 70px;
}

@media (max-width: 1600px){
    .frontpage .films > .titre{
        font-size: 60px;
        line-height: 60px;
    }
}

@media (max-width: 1300px){
    .frontpage .films .films__container{
        gap: 40px;
    } 
    .frontpage .films{
        padding: 0px 8% 120px 8%;
    }
}

@media (min-width: 993px){
    .frontpage .films .films__container > a:nth-child(4){
        display: none;
    }
}

@media (max-width: 992px){
    .frontpage .films .films__container{
        grid-template-columns: 1fr 1fr;
        gap: 66px 40px;
    }
    .frontpage .films > .titre{
        font-size: 46px;
        line-height: 46px;
        margin-left: 0px;
    }
}

@media (max-width: 600px){
    .frontpage .films .films__container{
        grid-template-columns: 1fr;
        gap: 66px 40px;
    }
    .frontpage .films .films__container > a:nth-child(4){
        display: none;
    }
    .frontpage .films{
        padding: 0px 36px 120px 36px;
    }
}

/* -------------------------- FACEBOOK -------------------------- */

.frontpage .facebook{
    padding: 0px 13% 100px 13%;
}

.frontpage .facebook .titre{
    margin-left: 60px;
    margin-bottom: 60px;
}

@media (max-width: 1600px){
    .frontpage .facebook{
        padding: 0px 8% 100px 8%;
    }
}

@media (max-width: 1200px){
    .frontpage .facebook{
        padding: 0px 80px 100px 80px;
    }
}

@media (max-width: 992px){
    .Grid__GridContainer-sc-1agzqrd-0{
        grid-template-columns: 1fr !important;
    }
    .frontpage .facebook .titre{
        margin-left: 0px;
        margin-bottom: 20px;
    }
    .eapps-widget-toolbar{
        display: none !important;
    }
}

@media (max-width: 600px){
    .frontpage .facebook{
        padding: 0px 36px 70px 36px;
    }
}