.cpt {
    position: relative;
    text-align: center;

    &[data-color="#006aaf"] {
        .container {
            position: unset;

            .realisations__title {
                .cta {
                    &:before {
                        background: var(--white);
                    }
                }
            }
        }
    }

    &[data-color="#000000"] {
        &:has(>.container.realisation) {
            &:after {
                background: rgba(255, 255, 255, 0.08);
            }
        }
    }

    &:not(.c_white) {
        .splide__pagination {
            li {
                button {
                    &.splide__pagination__page {
                        background: rgba(255, 255, 255, 0.33) !important;

                        &.is-active {
                            background: var(--white) !important;
                        }
                    }
                }
            }

            .splide__arrow {
                border-color: var(--white) !important;

                &:after {
                    filter: brightness(100) grayscale(1) !important;
                }
            }
        }
    }

    &:has(>.container.realisation) {
        &:after {
            content: '';
            position: absolute;
            top: -50px;
            right: -160px;
            width: 320px;
            height: 320px;
            background: rgba(0, 0, 0, 0.08);
            z-index: -20;
            border-radius: 50%;
        }
    }

    h2:has(+ .cpt_realisation),
    h2:has(+ .cpt_post) {
        margin-bottom: 40px;
    }

    &:has(.container .teaser__list .teaser .wp-pagenavi) {
        margin-bottom: 50px;

        @media (max-width: 991px) {
            margin-bottom: 80px;
        }

        .wp-pagenavi {
            position: absolute;
            bottom: -90px;
            width: 100%;

            @media (max-width: 991px) {
                bottom: -115px;
            }

            a {
                margin: 2px 5px !important;
                transition: var(--transition);
                border-radius: 0px;

                &.larger, &.smaller {
                    &:hover {
                        background-color: var(--blue);
                        color: var(--white);
                    }
                }
                
                &.nextpostslink, &.previouspostslink {
                    &:hover {
                        color: var(--blue);
                    }
                }
            }

            .current {
                transition: var(--transition);
                background-color: var(--blue);
                border-radius: 0px;
            }
        }
    }

    .cpt_realisation,
    .cpt_post {

        .teaser.type_realisation,
        .teaser.type_post {
            justify-content: center;
            position: relative;

            &:before {
                content: '';
                position: absolute;
                bottom: -50px;
                left: 0px;
                width: 320px;
                height: 320px;
                background: var(--blue-rgba-16);
                z-index: -20;
                border-radius: 50%;
            }

            &:after {
                content: '';
                position: absolute;
                top: -50px;
                right: 0px;
                width: 320px;
                height: 320px;
                background: rgba(0, 0, 0, 0.08);
                z-index: -20;
                border-radius: 50%;
            }

            .teaser__item {
                width: 320px;
                min-height: 520px;
                opacity: 1;
                transition: var(--transition);

                article {
                    height: 100%;
                }

                .teaser__link {
                    background: rgba(255, 255, 255, 0.6);
                    backdrop-filter: blur(6.5px);
                    display: flex;
                    padding: 10px;

                    .teaser__image {
                        height: 300px;

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

                    .teaser__text {
                        padding: 20px 25px;
                        justify-content: space-between;

                        .article_date {
                            border: 1px solid var(--dark);
                            background: transparent;
                            color: var(--dark);
                            font-size: 14px;
                            padding: 4px 10px;
                            width: fit-content;
                            transition: var(--transition);
                        }

                        .teaser__title {
                            color: var(--dark);
                            text-transform: uppercase;
                            font-weight: var(--bold);
                            margin-bottom: 12px;
                            transition: var(--transition);
                        }

                        .localisation,
                        .domaine {
                            font-size: 14px;
                            padding: 8px 12px;
                            width: fit-content;
                        }

                        .localisation {
                            border: 1px solid var(--dark);
                            background: transparent;
                            margin-bottom: 5px;
                            color: var(--dark);
                            margin-top: auto;
                        }

                        .domaine {
                            background: var(--dark);
                            color: var(--white);
                        }

                        .teaser_arrow {
                            display: flex;
                            justify-content: space-between;
                            width: 100%;
                            align-items: center;

                            .arrow_blue {
                                opacity: 1;
                                transform: translateX(0px);
                                transition: all 0.15s ease;
                            }

                            .fat_arrow_blue {
                                opacity: 0;
                                transform: translateX(-150px);
                                transition: all 0.15s ease;
                            }
                        }
                    }
                }

                &:hover {
                    .teaser__text {
                        .article_date {
                            border: 1px solid var(--blue);
                            color: var(--blue);
                        }

                        .teaser__title {
                            color: var(--blue);
                        }

                        .teaser_arrow {
                            .arrow_blue {
                                transform: translateX(150px) !important;
                                opacity: 0 !important;
                            }

                            .fat_arrow_blue {
                                opacity: 1 !important;
                                transform: translateX(0px) !important;
                            }
                        }
                    }
                }
            }
        }

        .teaser.type_post {
            .teaser__item {
                .teaser__text {
                    .teaser__title {
                        margin: 12px 0;
                    }
                }
            }
        }
    }

    .container.realisation {
        &:not(.slider) {
            .realisations__grid_wrapper {
                .teaser.type_realisation {
                    display: grid;
                    gap: 30px;
                    margin: 25px 0;

                    @media (min-width: 500px) {
                        grid-template-columns: repeat(auto-fill, minmax(333px, 1fr));
                    }

                    .teaser__item {
                        list-style: none;
                        opacity: 1;
                        transition: var(--transition);
                        padding-left: 0;
                        height: 100%;

                        article {
                            height: 100%;
                        }

                        .teaser__link {
                            background: rgba(255, 255, 255, 0.6);
                            backdrop-filter: blur(6.5px);
                            display: flex;
                            padding: 10px;
                            height: 100%;

                            .teaser__image {
                                height: 300px;

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

                            .teaser__text {
                                padding: 20px 25px;

                                .teaser__title {
                                    color: var(--dark);
                                    text-transform: uppercase;
                                    font-weight: var(--bold);
                                    margin-bottom: 12px;
                                    transition: var(--transition);
                                }

                                .localisation,
                                .domaine {
                                    font-size: 14px;
                                    padding: 0px 12px;
                                    width: fit-content;
                                }

                                .localisation {
                                    border: 1px solid var(--dark);
                                    background: transparent;
                                    margin-bottom: 5px;
                                    color: var(--dark);
                                    margin-top: auto;
                                    transition: var(--transition);
                                }

                                .domaine {
                                    background: var(--dark);
                                    color: var(--white);
                                    transition: var(--transition);
                                }
                            }
                        }

                        &:hover {
                            .teaser__text {
                                .teaser__title {
                                    color: var(--blue);
                                }

                                .localisation {
                                    border: 1px solid var(--blue);
                                    color: var(--blue);
                                }

                                .domaine {
                                    background: var(--blue);
                                }
                            }
                        }
                    }
                }
            }
        }

        &.slider {
            display: flex;
            gap: 50px;
            justify-content: space-between;
            padding-bottom: 150px;
            z-index: -4;
            flex-direction: column;

            @media (min-width: 992px) {
                flex-direction: row;
            }

            .realisations__title {
                text-align: left;

                @media (min-width: 992px) {
                    width: 32%;
                }

                p:not(.cta) {
                    margin-bottom: 30px;
                    opacity: 0.6;
                }
            }

            .realisations__slider_wrapper {
                max-width: 1030px;
                position: relative;
                min-height: 530px;

                @media (min-width: 992px) {
                    width: 65%;
                }

                &:after {
                    content: '';
                    position: absolute;
                    bottom: -50px;
                    left: -150px;
                    width: 320px;
                    height: 320px;
                    background: var(--blue-rgba-16);
                    z-index: -20;
                    border-radius: 50%;
                }

                .splide__pagination {
                    bottom: -100px;
                    z-index: 10;
                    pointer-events: all;
                    padding: 0;

                    @media (min-width: 992px) {
                        left: -40px;
                    }

                    li {
                        margin-bottom: 0px;
                        width: 9%;

                        @media (min-width: 992px) {
                            width: 7%;
                        }

                        .splide__pagination__page {
                            background: rgba(0, 106, 175, 0.33);
                            border: 0;
                            border-radius: 0px;
                            display: inline-block;
                            height: 1.5px;
                            margin: 0px;
                            padding: 0;
                            position: relative;
                            transition: var(--transition);
                            width: 100%;

                            &.is-active {
                                background: var(--blue);
                                transform: unset;
                            }
                        }
                    }

                    .splide__arrow {
                        position: unset !important;
                        transform: unset !important;
                        background: transparent;
                        border: 1.5px solid var(--blue);
                        width: 45px;
                        height: 45px;
                        display: grid;
                        place-items: center;
                        transition: var(--transition);

                        @media (min-width: 992px) {
                            width: 60px;
                            height: 60px;
                        }

                        &:after {
                            content: '';
                            display: inline-block;
                            background-image: url('../../img/arrow_blue.svg');
                            background-size: contain;
                            background-repeat: no-repeat;
                            width: 20px;
                            height: 12px;
                            transform: scale(1.1);
                        }

                        &.splide__arrow--prev {
                            margin-left: auto;
                            margin-right: 15px;

                            &:after {
                                transform: rotate(180deg);
                            }
                        }

                        @media (max-width: 991px) {

                            &.splide__arrow--prev,
                            &.splide__arrow--next {
                                margin-top: 20px;
                            }

                            &.splide__arrow--next {
                                margin-right: auto;
                            }
                        }

                        &:hover {
                            opacity: 1;
                            background: rgba(0, 106, 175, 0.05);
                        }

                        svg {
                            display: none;
                        }
                    }
                }

                .teaser.type_realisation {
                    .splide__track {
                        @media (min-width: 500px) {
                            position: absolute;
                        }

                        .teaser__item {
                            width: 320px;
                            height: 520px;
                            opacity: 1;
                            transition: var(--transition);
                            padding-left: 0;

                            &:not(.is-active, .is-next) {
                                opacity: 0.33;
                            }

                            article {
                                height: 100%;
                            }

                            .teaser__link {
                                background: rgba(255, 255, 255, 0.6);
                                backdrop-filter: blur(6.5px);
                                display: flex;
                                padding: 10px;

                                .teaser__image {
                                    height: 300px;

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

                                .teaser__text {
                                    padding: 20px 25px;

                                    .teaser__title {
                                        color: var(--dark);
                                        text-transform: uppercase;
                                        font-weight: var(--bold);
                                        margin-bottom: 12px;
                                        transition: var(--transition);
                                    }

                                    .localisation,
                                    .domaine {
                                        font-size: 14px;
                                        padding: 0px 12px;
                                        width: fit-content;
                                    }

                                    .localisation {
                                        border: 1px solid var(--dark);
                                        background: transparent;
                                        margin-bottom: 5px;
                                        color: var(--dark);
                                        margin-top: auto;
                                        transition: var(--transition);
                                    }

                                    .domaine {
                                        background: var(--dark);
                                        color: var(--white);
                                        transition: var(--transition);
                                    }
                                }
                            }

                            &:hover {
                                .teaser__text {
                                    .teaser__title {
                                        color: var(--blue);
                                    }

                                    .localisation {
                                        border: 1px solid var(--blue);
                                        color: var(--blue);
                                    }

                                    .domaine {
                                        background: var(--blue);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.cpt .teaser {
    padding: 0;
    position: relative;
    z-index: 2;
}

.cpt .teaser-slider .slick-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.cpt .teaser-slider .slick-slide {
    float: none;
    height: auto;
}

.cpt .teaser-slider .teaser__item {
    padding: 15px;
}

.cpt[data-color="#50a0f0"] h4 {
    color: #141c2d;
}

.teaser {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px;
}

.teaser__item {
    position: relative;
    text-align: left;
    z-index: 2;
}

.teaser__item.nopostsfound {
    justify-self: center;
    text-align: center;
    width: 100%;
}

.teaser__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.teaser__image {
    overflow: hidden;
}

.teaser__image img {
    aspect-ratio: 16/9;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    width: 100%;
}

.teaser__link:hover .teaser__image img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.teaser__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 12px 0;
}

.teaser__text p {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.notfound {
    text-align: center;
}

@media (min-width: 992px) {

    .teaser.type_realisation {
        .splide__track {
            margin: 0 -40px;

            .teaser__item {
                margin: 0 40px 0 0px;
            }
        }
    }
}