@use "../abstracts/mixins";
@use "../abstracts/variables";

.page-template-tpl-actualites{
    .header_behind::after{
        background-color: #222;
    }

    .sectionTitle_content{
        @include mixins.respondTo('xs'){
            padding-top: 3vh;
        }
    }

    .actus_list{
        padding-bottom: 10vh;

        @include mixins.respondTo('xs'){
            padding-bottom: 0;
        }

        .sectionTitle_content{
            padding: 0;
        }

        .sectionTitle_footer{
            min-height: auto;
        }

        .colYear{
            padding-top: 20vh;
            margin-right: 4.85vw;
            
            &--prev{
                margin-left: 4.85vw;
                margin-right: 0;

                .sectionTitle_header_content{
                    text-align: right;

                    &_title::before{
                        display: none;
                    }

                    a{
                        display: inline-block;
                        @include mixins.fontSize(20,40);
                        font-family: variables.$ffLF;
                        font-weight: 300;
                        opacity: 0.3;
                        transition: opacity 0.15s linear;

                        @include mixins.respondTo('md'){
                            @include mixins.fontSize(14,28,variables.$baseFontSizeMd);
                        }

                        &, &:visited{
                            color: variables.$cDark;
                            text-decoration: none;
                        }

                        & + a{
                            margin-left: 0.85vw;
                        }

                        &.active{
                            opacity: 1;
                        }

                        @include mixins.hover{
                            opacity: 1;
                        }
                    }
                }

                .sectionTitle_content{
                    text-align: right;
                    opacity: 0.3;
                }
            }
        }

        &_content{
            padding-top: 20vh;

            @include mixins.respondTo('xs'){
                padding-top: 0;
            }
        }

        .yearsList_container{
            height: calc(9vh + 70px);
            overflow: hidden;
        }

        .yearsList{
            transition: transform 1s variables.$CircEaseInOut;

            > li{
                a{
                    display: block;
                    padding: 4.5vh 0;
                    text-decoration: none;
                    
                    @include mixins.hover{
                        text-decoration: none;
                    }
                }
            }
        }
    }

    .actus_year{
        @include mixins.respondTo('xs'){
            opacity: 0;
            display: none;
        }
    }

    .actus_navMobile{
        position: relative;
        margin-bottom: 10vh;

        &_categories{
            padding-top: 10vh;
            padding-bottom: 3vh;
            display: flex;
            justify-content: space-between;

            a{
                display: inline-block;
                @include mixins.fontSize(14,20,variables.$baseFontSizeXs);
                font-family: variables.$ffLF;
                font-weight: 400;
                opacity: 0.3;

                &, &:visited{
                    color: variables.$cDark;
                    text-decoration: none;
                }

                & + a{
                    margin-left: 2vw;
                }

                &.active{
                    opacity: 1;
                }
            }
        }

        &_carousel{
            border-top: 2px solid variables.$cDark;
            border-bottom: 2px solid variables.$cDark;
        }

        .swiper-slide{
            > div{
                @include mixins.fontSize(60,70,variables.$baseFontSizeXs);
                padding-top: 4vh;
                padding-bottom: 4vh;
                color: variables.$cDark;
            }
        }

        &_next{
            position: absolute;
            z-index: 5;
            top: 50%; right: -40px;
            width: 88px; height: 38px;
            margin-top: -19px;

            > svg{
                width: 88px; height: 38px;
                stroke-width: 3px;
                stroke: variables.$cDark !important;
            }
        }
    }

    .popin_box{
        margin-left: 25.425%;

        @include mixins.respondTo('md'){
            margin-left: 16.95%;
        }
        
        @include mixins.respondTo('sm'){
            margin-left: 10%;
        }

        @include mixins.respondTo('xs'){
            margin-left: 0;
        }
    }

}