// general
body {
    margin: 0;
    font-family: $oswald-font;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5;
    color: $black;

    @include mq(tablette) {
        line-height: 1.2;
    }

    @include mq(smalltab) {
        overflow-x: hidden;
    }

    &.modal-open {
        overflow: hidden;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 75px;
    color: $black;

    @include mq(smalltab) {
        overflow-x: hidden;
    }

    &.modal-open {
        overflow: hidden;
    }
}

::selection {
    color: $white;
    background: $gold;
}

.grecaptcha-badge {
    visibility: hidden;
}

.container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;

    @include mq(mlarge) {
        max-width: 90%;
    }

    @include mq(tablette) {
        max-width: 95%;
    }
}

.negresco-lettrine-gold {
    font-family: $playfair-font;
    font-size: 5rem;
    color: $gold;
    line-height: 1;
}

.hidden {
    display: none !important;
}

.text-align-center {
    text-align: center;
}

a {
    color: $black;
    text-decoration: none;

    &:focus,
    &:visited,
    &:active {
        color: inherit;
    }
}

.font-oswald {
    font-family: $oswald-font;
}

.font-playfair {
    font-family: $playfair-font;
}

.font-cellestial {
    font-family: $cellestial-font;
}

.negresco-text-bold {
    font-weight: 700;
}

.negresco-text-light {
    font-weight: 300;
}

.negresco-text-normal {
    font-weight: 400;
}

main {
    section {
        margin-top: 35px;
    }
}

// buttons
@each $color, $hex in $colors {
    .negresco-btn-#{$color} {
        color: $white;
        background-color: $hex;
        padding: 10px 15px;
        border-radius: 5px;
        text-decoration: none;

        &:hover {
            background-color: lighten($hex, 10%);
        }

        &:focus,
        &:visited,
        &:active {
            color: $white;
        }
    }

    .negresco-btn-outline-#{$color} {
        color: $hex;
        border: 1px solid $hex;
        padding: 10px 15px;
        border-radius: 5px;
        text-decoration: none;

        &:hover {
            background-color: lighten($hex, 50%);
        }

        &:focus,
        &:visited,
        &:active {
            color: $hex;
        }
    }

    .negresco-color-#{$color} {
        color: $hex;
    }

    .negresco-bg-#{$color} {
        background-color: $hex;
    }
}

.negresco-main-header__right-element,
.negresco-main-header__left-menu {
    &:hover {
        svg {
            path {
                stroke: $gold;
            }
        }
    }
}

.negresco-fil-ariane {
    .active-link {
        svg {
            path {
                stroke: $gold;
            }
        }
    }
}

.bloc-slider {
    .swiper {
        height: 680px;

        @include mq(mobile) {
            height: 500px;
        }
    }
    .swiper-slide {
        img {
            height: 80%;
        }
    }
}

.swiper-pagination {
    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        border: 2px solid $gold;
        background: $white;
        margin: 0 10px;

        &.swiper-pagination-bullet-active {
            transform: scale(1.4);
            background-color: $gold;
        }
    }
}

.bloc-storytelling-images {
    .swiper-vertical {
        .swiper-pagination {
            .swiper-pagination-bullet {
                width: 15px;
                height: 15px;
                border: 1px solid $gold;
                background: $white;
                margin: 15px 0;
                opacity: 1;
        
                &.swiper-pagination-bullet-active {
                    transform: scale(1.6);
                    background-color: $gold;
                }
            }
        }
    }
}

.bloc-accordeon__item-title.arrow-open,
.negresco-modal-menu__main-left-item.active-link,
.negresco-modal-menu__main-left-item:hover {
    svg {
        path {
            stroke: $gold;
        }
    }
}

.bloc-accordeon__item-description-colonne {
    ul {
        padding-left: 30px;

        li {
            margin-bottom: 5px;
        }
    }
}

.bloc-meme-theme__item-image,
.bloc-listing-types__item-image,
.bloc-listing-carre__item-picture,
.bloc-visuel__item-picture,
.bloc-contenu-empile__item-image,
.bloc-storytelling-images__item-image-content a,
.negresco-modal-booking__main-item-image {
    img {
        transform: scale(1);
        transition: all 0.5s ease-in-out;
    }

    &:hover {
        img {
            transform: scale(1.05);
            transform-origin: center;
            transition: all 0.5s ease-in-out;
        }
    }
}

.bloc-listing-types {
    .swiper {
        height: 100%;
    }
}

.negresco-modal-booking__main-single-left {
    .swiper {
        width: 950px;
        height: 100%;

        @include mq(mobile) {
            width: 100%;
        }
    }
}

.negresco-modal-booking__main-single-left {
    .swiper-pagination-bullets.swiper-pagination-horizontal {
        position: absolute;
        left: calc(50% / 2);
        bottom: 20px;
        width: auto;

        @include mq(mobile) {
            left: 38%;
        }

        .swiper-pagination-bullet {
            background-color: transparent;
            border: 1px solid $white;
            opacity: 1;
            &.swiper-pagination-bullet-active {
                transform: scale(1);
                background-color: $white;
                border: 1px solid $white;
            }
        }
    }
}

.negresco-modal-booking__main-single-right-description-content {
    ul {
        margin: 0;
        padding-left: 15px;
    }
}

body .bloc-mosaique-entete__modal-image {
    img {
        height: 95%;
        object-fit: contain;
    }
}

.bloc-personnalise-listing__elements {
    .swiper-pagination-bullets.swiper-pagination-horizontal {
        position: absolute;
        left: 70px;
        bottom: 83px;
        width: auto;

        @include mq(mlarge) {
            left: 40px;
            bottom: 54px;
        }

        @include mq(normal) {
            bottom: 50px;
        }

        @include mq(mobile) {
            top: 370px;
        }

        .swiper-pagination-bullet {
            &.swiper-pagination-bullet-active {
                transform: scale(1);
            }
        }
    }
}

.bloc-storytelling-images__items {
    .swiper-pagination.swiper-pagination-bullets {
        @include mq(smalltab) {
            position: absolute;
            bottom: -75px;
            left: 150px;
            text-align: left;
        }

        @include mq(mobile) {
            left: 0;
            bottom: -70px;
        }
    }
}

.negresco-main-header.home-header {
    svg {
        path {
            stroke: $white;
        }
    }

    .negresco-main-header__logo,
    .negresco-main-header__right-element:last-child {
        svg {
            path {
                fill: $white;
                stroke: none;
            }
        }
    }

    &.sticky-header {
        svg {
            path {
                stroke: $black;
            }
        }

        .negresco-main-header__logo {
            svg {
                path {
                    fill: $gold;
                    stroke: none;
                }
            }
        }

        .negresco-main-header__right-element:last-child {
            svg {
                path {
                    fill: $black;
                    stroke: none;
                }
            }
        }
    }
}

.bloc-storytelling-images__item-content-title {
    p {
        margin: 0;
    }
}
.bloc-storytelling-images__item-image-content {
    &-link {
        display: block;
        color: $white;

        &:after {
            content: "";
            background: linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.6) 0%,
                rgba(0, 0, 0, 0.3) 40%,
                rgba(255, 255, 255, 0) 60%
            );
            height: 150px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;

            @include mq(smalltab) {
                background: none;
            }
        }
    }
}

.negresco-home-header-video__modal,
.bloc-video__modal {
    iframe {
        width: 100%;
        height: 100%;
    }
}

.bloc-mosaique-entete__modal .swiper {
    .swiper-pagination {
        @include mq(large) {
            bottom: 0;
        }
    }
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.bounce-long-enter-active {
    animation: bounce-in-long 0.8s;
    transition: opacity 0.5s ease;
}
.bounce-long-leave-active {
    animation: bounce-in-long 0.6s reverse;
    transition: opacity 0.5s ease;
}
.bounce-long-enter-from,
.bounce-long-leave-to {
    opacity: 0;
}
@keyframes bounce-in-long {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.bounce-enter-active {
    animation: bounce-in 0.6s;
}
.bounce-leave-active {
    animation: bounce-in 0.4s reverse;
    transition: opacity 0.5s ease;
}
.bounce-leave-to {
    opacity: 0;
}
@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}