/*****************************************************************

FILM ARCHIVE

*****************************************************************/

.liste-affiche {

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    //align-items: end;

    &-item{

        flex: 0 0 100%;
        margin-bottom: 20px;
        margin: 0 10px 20px 10px;
        position: relative;
        background-color: #F1EFED;
        padding: 10px;
       

        a {

            text-align: center;
            display: block;
            background-color: #F1EFED;
            
            height: 290px;
           
            img {

                max-height: 280px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
               


            }

        }       

        h3 {
            

            font-family: "Poppins", sans-serif;
            font-weight: 500;
            font-size: 14px;
            margin-top: 16px;
            margin-bottom: 0;
            text-transform: lowercase;
            

            &::first-letter {

                text-transform: uppercase; 

            }

            a {

                color:$dark-color;
                text-align: left;
                display: block;
                
                padding: inherit;
                height: inherit;
                text-align: center;
                &:hover {

                    color:$primary-color;
                    text-decoration: none;

                }
                


            }


           

        }



        p {

            font-family: "Poppins", sans-serif;
            font-weight: 300;
            font-size: 12px;
            text-align: center;

        }

    }
}

@media (min-width: 768px) {

    .liste-affiche {

        flex-direction: row;
    
        &-item{
    
            flex: 0 0 30%;

            a {

 
               
                img {
    

                 //   width: 90%;
    
    
    
                }
            }

            h3 {

                

    
                &::first-letter {
    
                    text-transform: uppercase; 
    
                }
    
                a {
    
                    text-align: left;
    
                    &:hover {

    
                    }
                    
    
    
                }
    
    
               
    
            }
    
    
    
            p {
    

                text-align: left;

            }

        }
    }

}

 @media (min-width: 990px) {
   
    .liste-affiche {

      
    
        &-item{
    
            flex: 0 0 22%;
        }
    }

 }

@media (min-width: 1200px) {
   
    .liste-affiche {

      
    
        &-item{
    
            flex: 0 0 18%;
        }
    }
}

/*****************************************************************

SINGLE SPECTACLE PAGE

*****************************************************************/



.single-film {

    h1 {


        font-family: $titleFont;
        font-weight: 700;
        font-style: italic;
        font-size: 50px;
        letter-spacing: 1.25px;
        text-align: center;
        line-height: 43px;
        margin-bottom: 12px;
        text-transform: lowercase;

        &::first-letter {

            text-transform: uppercase; 

        }

    }

    .auteur {

        font-weight: 300;
        font-size: 16px;
        text-align: center;



    }

    #wpv-view-layout-178 {

        .btn-primary {

            margin-bottom: 80px;

        }

    }

    &-content {

        margin-top: 20px;

        ul.date {

            list-style: none;
            margin: 0 0 35px 0;
            padding: 0;

            li {

                text-transform: uppercase;
                line-height: 18px;

                .lieu {

                    text-transform: none;

                }
            }

        }

        p {

            font-size: 14px;


        }

        .auteur-article {

            font-size: 12px;
            font-weight: 700;

        }

        .infos-pratiques-top {

            margin: 30px 0 30px 0;
            font-size: 13px;

            &::before {

                content: '';
                display: block;
                width: 45px;
                height: 1px;
                background-color: $primary-color;
                margin-bottom: 20px;
            }

            &::after {

                content: '';
                display: block;
                width: 45px;
                height: 1px;
                background-color: $primary-color;
                margin-top: 20px;
            }

        }


        .infos-pratiques-bottom {

            margin: 30px 0 30px 0;
            font-size: 13px;



            &::after {

                content: '';
                display: block;
                width: 45px;
                height: 1px;
                background-color: $primary-color;
                margin-top: 20px;
            }

        }

        .genre {

            font-weight: 700;

        }

        .realisateur {

            p {

                margin-bottom: 0px;
            }

        }

        .tarif {}

        .duree {}

        .age {}

        .distribution {

            a.btn-distribution {

                font-family: $contentFont;
                font-size: 14px;
                font-weight: 700;
                text-transform: uppercase;
                border-bottom: 1px solid #F1EFED;
                padding-bottom: 6px;
                display: block;
                position: relative;
                color: $dark-color;
                text-decoration: none;


                &:after {

                    content: '+';
                    position: absolute;
                    right: 0;
                    font-size: 14px;
                    font-weight: 700;

                }

                &:hover {

                    color: $primary-color;


                }

                &:focus {


                    outline: none;

                }


            }

            .card {

                border: none;

            }

            p {}

        }

        .actions {

            // avirer 
            //display: none;

            width: 100%;
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;

            a {

                display: inline-block;
                text-transform: uppercase;
                font-size: 14px;
                font-weight: 500;
                height: 50px;
               
                margin-right: 10px;
                padding: 8px 0 10px 0;
                line-height: 32px;

                &.btn-ico {

                    width: inherit;
                    background-color: $dark-color;
                    //padding: 10px 0 10px 0;
                    margin-bottom: 30px;

                    &::before {
                        content: url(img/pictos/picto-bande-annonce.svg);
                        width: 32px;
                        height: 33px;

                    }

                    span {

                        &.covtext {

                            vertical-align: text-bottom;

                        }

                        &.covnbannonce {}
                    }

                }

                &.btn-reservez {

                    width: inherit;


                }

            }

        }


        .partage {
            text-align: right;
            display: flex;
            flex-direction: column;
            margin-left: auto;
            width: 100%;
            margin-top: 30px;
            align-items: center;

            p {

                flex: 1 0 auto;
                margin: 0;
                text-align: center;
                font-weight: 700;
                font-size: 13px;
                margin-bottom: 8px;

            }

            ul {

                list-style: none;
                margin: 0;
                padding: 0;
                text-align: center;
                flex: 1 0 auto;




                li {

                    display: inline;
                    padding-left: 4px;

                }

            }

        }


    }


    .btn-ico-bande-annonce {

        // margin-top: 40px;
        // margin-bottom: 40px;
 

        // &::before {
        //     content: url(img/pictos/picto-bande-annonce.svg);
        //     width: 32px;
        //     height: 33px;
        //     position: relative;
        //     top: -2px;
        //     margin-right: 10px;
        //     vertical-align: middle;
        //     line-height: 2px;

        // }

    }

    .slider-single-cinema {

        .slick-dots li button:before {

            font-size: 12px;

        }

        .slick-dots li {

            margin: 0 2px;

        }

        .slick-dots li button:before {

            color: $dark-color;
            opacity: 1;

        }

        .slick-dots li.slick-active button:before {

            color: $primary-color;
            opacity: 1;

        }

    }

    .section-title {

        margin-top: 150px;

    }

    .liste-affiche {

        display: flex;
        flex-wrap: wrap;
        align-content: space-evenly;
        width: 100%;
        margin-bottom: 40px;
       

        &-item {
            flex: 1 0 31%;
           
            background-color: #F1EFED;
            
            position: relative;
            padding: 0 15px 15px 15px;
           width: 100%;

            &:first-child{
                // padding: 0 15px 0 0;

            }

            &:last-child{
                // padding: 0 0 0 15px;

            }

            a {

                text-align: center;
                display: block;
                background-color: #F1EFED;
                padding-top: 14px;
                min-height: 320px;

            img {
//                 max-height: 300px;
//     position: absolute;

// left: inherit;
//     transform: translate(-50%,-50%);
//     top: 50%;
max-height: inherit; 
     position: relative; 
     left: inherit; 
    transform: inherit;
width: 220px;
    
            }

            }

        }
    }

}

@media (min-width: 768px) {
    .single-film {
 
        &-content {
            .partage {

                p {

                    text-align: left;

                }

                ul {

                    text-align: right;

                }
                
            }
       
        }

        .actions {

            flex-direction: row;

            a {

                flex: 1 0 43%;

                &.btn-ico {
                    margin-bottom: inherit;
                }
            }
        }

       

        
    .liste-affiche {
    
         
        //align-items:end;

        &-item {
            
            margin: 0 15px 0 0px;
           width: inherit;

            // &:first-child{
            //      padding: 0 60px 0 0;

            // }

            // &:last-child{
            //      padding: 0 0 0 60px;

            // }

            a {

               min-height: inherit;
               height: inherit;

            img {
                width: 190px;
    //width: 85%;
            }

            }

        }
    }
}

}
@media (min-width: 990px) {
    .single-film {
   
        &-content {
            .partage {
                text-align: right;
                display: flex;
                flex-direction: row;
                margin-left: auto;
                width: 53%;
                margin-top: 30px;
                align-items: center;
                padding-right: 5px;
    
                p {
    
                    flex: 1 0 auto;
                    margin: 0;
                    text-align: left;
                    font-weight: 700;
                    font-size: 13px;
                    margin-bottom: inherit;
    
                }
    
                ul {
    
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    text-align: right;
                    flex: 1 0 auto;
    
    
    
    
                    li {
    
                        display: inline;
                        padding-left: 4px;
    
                    }
    
                }
    
           
        }
    }


        .btn-ico-bande-annonce {

       // margin-top: 20px;
        margin-bottom: inherit;

        }

    .liste-affiche {
        
            
        //align-items:end;

        &-item {
            
        // padding: 0 30px 0 30px;
        

            // &:first-child{
            //      padding: 0 60px 0 0;

            // }

            // &:last-child{
            //      padding: 0 0 0 60px;

            // }

            a {

                min-height: inherit;

            img {
                width: 260px;
    //width: 85%;
            }

            }

        }
    }

    }
}
@media (min-width: 1200px) {
    .single-film {

        &-content {
            .partage {
                text-align: right;
                display: flex;
                flex-direction: row;
                margin-left: auto;
                width: 50%;
                margin-top: 30px;
                align-items: center;
            }}

    .liste-affiche {
        
            
        //align-items:end;

        &-item {
            
            padding: 0 15px 15px 15px;
        

            // &:first-child{
            //      padding: 0 15px 0 0;

            // }

            // &:last-child{
            //      padding: 0 0 0 15px;

            // }

            a {

                min-height: inherit;

            img {
                width: inherit;
    //width: 85%;
            }

            }

        }
    }
    }
}

/*****************************************************************

FILM HORAIRE

*****************************************************************/


.item-horaire-film {

    margin-bottom: 30px;

h2 {

    font-size: 22px;
    font-style: italic;
    font-weight: 700;
    text-transform: lowercase;

    &::first-letter {

        text-transform: uppercase; 

    }

}


}


/*****************************************************************

NAVIGATION HORAIRE

*****************************************************************/

.nav-horaires {

margin-top: 30px;
margin-bottom: 20px;
text-align: center;

    ul {

        display: flex;
        list-style: none;
        margin:0;


        li {

            flex: 1 0 50%;
            text-align: left;

            &:last-child {
                text-align: right;

            }

            a{

                text-decoration: underline;
                color:$dark-color;
                

                &:hover{

                    color:$primary-color;
                

                }

            }

        }


    }
    .btn.btn-primary {

        margin-top: 20px;
        margin-bottom: 60px;
    }

}


.filtre {

    font-weight: 500;
    font-size: 14px;
    text-align: right;

    span {

        vertical-align: middle;
    }

.box {

    display: inline-block;


.custom-select {

    display: inline-block;
    width: 100px; 
    height: calc(2.25rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    //background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E')"" no-repeat right .75rem center;
    background-size: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 0rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
}
}


/*****************************************************************

HORAIRE JOUR FILM

*****************************************************************/


.horaire-jour {

    
    color: $dark-color;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    &-date {

        flex:0 0 33%;
        padding: 20px;

        .date {
            color: #ffffff;
            background-color: $dark-color;
            font-family: $contentFont;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            padding: 10px 20px 10px 20px;
            display: inline-block;
    min-width: 55%;
    &::first-letter {
    
        text-transform: uppercase; 

    }

        }

        &-container-horaires {


            flex: 1 0 35%;
    text-align: right;

        }

        &-item {

           
            border-top: 1px solid #F1EFED;
            border-left: 1px solid #F1EFED;
            border-right: 1px solid #F1EFED;
            display: flex;
            align-items: baseline;
            line-height: 30px;
            padding: 0 14px 0 10px;
            

            &:last-child{
                border-bottom: 1px solid #F1EFED;

            }

            &-title {
                font-family: $contentFont;
                font-size: 14px;
                font-weight: 300;
                flex: 1 0 65%;
                text-transform: lowercase;
                line-height: 18px;
                &::first-letter {
    
                    text-transform: uppercase; 
    
                }
    
                

                a {
                    font-family: $contentFont;
                    color: $dark-color;

                    &:hover {

                        color: $dark-color;
                        

                    }
                }

            }


            &-horaire {
                font-family: $contentFont;
                font-size: 14px;
                font-weight: 300;
                flex: 1 0 35%;

            }

        }


    }


}


@media (min-width: 768px) {

    .horaire-jour {

        flex-direction: row;

        &-date {

            flex:0 0 50%;
            padding: 20px;

        }
    }

}

@media (min-width: 990px) {
   
    .horaire-jour {

        flex-direction: row;

        &-date {

            flex:0 0 50%;
            padding: 20px;

        }
    }

 }

@media (min-width: 1200px) {
   
    
    .horaire-jour {

      

        &-date {

            flex:0 0 33%;
            padding: 20px;

        }
    } 
}


.table-responsive {

    .table th {

        padding: 0.75rem 0 0.75rem 0;   
        font-size:12px;
        font-weight: 700;

    }  
    
    .table td {

        padding: 0.75rem 0 0.75rem 0;   
        font-size:12px;
        font-weight: 400;
    } 
}




.date-desktop {

display:none;

}

// .taille-desktop {

//     display: none;
    
//     }

.date-mobile {

display: block;

}

// .taille-mobile {
   
//     display: block;   

// }


@media (min-width: 990px) {

    .table-responsive {

        .table th {
    
            padding: inherit;   
            font-size: inherit;
            font-weight:inherit;
    
        }   

        .table td {
    
            padding: inherit;   
            font-size: inherit;
            font-weight:inherit;
    
        } 
    }

    .date-desktop {

        display:block;
        
        }
        
        .date-mobile {
        
        display: none;
        
        }

        // .taille-mobile {

        //     display: none;
            
        //     }
            
        //     .taille-desktop {

        //         display: block;
                
        //         }


}



.film-prochainement {

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    &.film-prochainement-home {

        a {

            
            width: 50%;
            margin: 0 1em 1em 1em;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }
    }

    a {

        display: inline-block;
        margin: 1em;
        background-color: black;
        width: 50%;
        transition: all 0.3s ease;
        //box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
        //border-radius: 6px;
        overflow: hidden;
        text-decoration: none;
        text-align: center;
        margin-left: auto;
        margin-right: auto;


        .container-affiche {

            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: space-between; 

            &-img {

                position: relative;

                &-mask {

                    position: absolute;
                    height: 101%;
                    width: 100%;
                    top: 0;
                    left: 0;
                    background: linear-gradient(transparent 71%, #000000);
                }

                img {
                width: 100%;
                object-fit: cover;
            }         

            }

            &-text {

                padding: 0 20px 0 20px;

                h3 {
            

                    font-family: "Poppins", sans-serif;
                    font-weight: 500;
                    font-size: 14px;
                    margin-top: 16px;
                    margin-bottom: 0;
                    text-transform: lowercase;
                    color:#ffffff;
                    
                    
        
                    &::first-letter {
        
                        text-transform: uppercase; 
        
                    }


                }
                .realisateur{

                    color:#ffffff;

                }

            }

        }

    }

}

@media (min-width: 768px) {

    .film-prochainement {

   
        flex-direction: row;
    
        &.film-prochainement-home {
    
            a {
    
                
                width: calc((100% - 6em) / 3);
                margin: 0 1em 1em 1em;
                text-align: left;
                margin-left: 1em;
                margin-right: 1em;
               
            }
        }
    
        a {
    
 
            width: calc((100% - 7em) / 3);
            text-align: left;
            margin-left: 1em;
            margin-right: 1em;
  
        }
    }
    

}


@media (min-width: 990px) {

    .film-prochainement {

   
        flex-direction: row;
    
        &.film-prochainement-home {
    
            a {
    
                
                width: calc((100% - 6em) / 3);
                margin: 0 1em 1em 1em;
    
            }
        }
    
        a {
    
 
            width: calc((100% - 9em) / 4);
  
        }
    }

}

@media (min-width: 1200px) {

    .film-prochainement {

   
        flex-direction: row;
    
        &.film-prochainement-home {
    
            a {
    
                
                width: calc((100% - 6em) / 3);
                margin: 0 1em 1em 1em;
    
            }
        }
    
        a {
    
 
            width: calc((100% - 10em) / 5);
  
        }
    }

}