///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

/* GLOBAL */
.carre-vip-container {
    @include outer-container;

}

.carre-vip-title {
    font-family: "lucien-light";
    text-transform: uppercase;
    font-size: 2.4rem;
    padding: 0;
    text-align: center;
    margin: 60px 0 80px 0;
    padding: 0 10px 0 10px;
}

/* JOIN */
.carre-vip-join {
    @include span-columns(5);
    @include shift(1);
    text-align: center;
    .separator-line {
        display: none;
    }
}

.carre-vip-join-title-member {
    font-family: "lucien-bold";
    text-transform: uppercase;
    font-size: 1.5rem;
    color: $color-golden;
    padding: 0;
    text-align: center;
    margin-bottom: 40px;
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.carre-vip-bottom-to-top-club .carre-vip-join-title-member {
    width: 80%;
}

.carre-vip-join-image {
    img {
        width: 100%;
    }
}

.carre-vip-join-txt-member {
    font-size: 1em;
    font-family: "Lucien-bold";
    margin: 60px 0 80px 0;
}

.carre-vip-join-title-carre {
    font-family: "lucien-light";
    text-transform: uppercase;
    font-size: 1.5rem;
    margin: 50px 0 80px 0;
}

.carre-vip-join-list {
    font-family: "Georgia";
    text-align: left;
    margin-left: 20px;
    margin-bottom: 75px;
}

.carre-vip-join-list-item {
    margin-bottom: 20px;
}

.carre-vip-join-preregistration {
    font-family: "lucien-regular";
    text-transform: uppercase;
    font-size: 1em;
    color: $color-golden;
    margin-bottom: 16px;
}

/* ACCOUNT */
.carre-vip-account {
    @include span-columns(5);
}

.carre-vip-account-login {
    text-align: center;
    border: 1px solid $color-grey-light;
    padding: 40px;
    margin-top: 98px;
    .practical-information-first-visit-button {
        margin-bottom: 7px;
    }
    div p {
        font-family: "lucien-regular";
        text-transform: uppercase;
        font-size: 1.2em; 
        span {
            color: $color-golden; 
        }
    }
    
}

.carre-vip-account-login-subtitle {
    margin: 50px 0 50px 0;
    p {
        display: inline-block;
        font-family: "lucien-bold";
        text-transform: uppercase;
    }
}

.carre-vip-account-login-subtitle-picto {
    display: inline-block;
    margin-right: 10px;
    span {
        height: 20px;
        width: 28px;
        display: block;
    }
}

.carre-vip-form {
    text-align: center;
    .form-required {
        &:after {
            display: none;
        }
    }
    input {
        margin: 0 auto;
        width: 60%;
        text-align: center;
        color: $color-grey-light;
    }
}

.carre-vip-form-links {
    display: block;
    margin: 0 auto;
    width: 60%;
    margin-bottom: 40px;
}

.carre-vip-form-forgotten-passwd,
.carre-vip-form-activate-account {
    display: block;
    text-decoration: underline;
    text-align: left;
    color: $color-grey-light;
    font-size: 0.8em;
    text-transform: upopercase;
}

.carre-vip-account-points {
    margin-top: 50px;
    position: relative;
    background-color: $color-grey-ultra-light;
    padding: 20px;
    margin-bottom: 80px;
}

.carre-vip-account-points-background {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.carre-vip-account-points-wrapper {
    border: 5px solid white;
    padding: 20px;
    text-align: center;

    div {
        width: 32%;
        display: inline-block;

        h5 {
            font-family: "lucien-bold";
            text-transform: uppercase;
            font-size: 1.5em;
            margin-bottom: 20px;
        }
        p {
            font-size: 0.9em;
            margin-bottom: 20px;
        }
    }

    .icon-more {
        background: url('../img/skin/btnplus.png') no-repeat;
        height: 65px;
        width: 65px;
        margin: 40px 20px 0 20px;
        vertical-align: top;
    }
}

.carre-vip-account-points-title {
    font-family: "lucien-regular";
    text-transform: uppercase;
    font-size: 1.5em;
    color: $color-golden;
    margin: 55% 0 40px 0;
}

///////////////////////////////////////////////////////////////
// Device: Desktop XL
///////////////////////////////////////////////////////////////

@include desktop-xl {
    .carre-vip-join {
        .separator-line {
            display: block;
            margin-top: 45px;
        }
    }
}

///////////////////////////////////////////////////////////////
// Device: Tablet :: LANDSCAPE
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {
    .carre-vip-join {
        @include span-columns(10);
    }
    .carre-vip-account {
        @include span-columns(10);
        @include shift(1);
    }
    .carre-vip-account-login {
        margin-top: 0;
    }
    .carre-vip-join {
        margin-bottom: 0;
    }
}

///////////////////////////////////////////////////////////////
// Device: Tablet :: PORTRAIT
///////////////////////////////////////////////////////////////

@include tablet-portrait-and-below {

}

///////////////////////////////////////////////////////////////
// Device: Mobile
///////////////////////////////////////////////////////////////

@include mobile-landscape-and-below {
    .carre-vip-title {
        margin: 60px 0 60px 0;
    }
    .carre-vip-account-login {
        padding: 40px 20px 40px 20px;
    }
    .carre-vip-form {
        input {
            width: 100%;
        }
    }
    .carre-vip-form-links {
        width: 100%;
    }
    .practical-information-first-visit-button {
        margin: 0;
    }
    .carre-vip-join-txt-member {
        margin: 20px 0 40px 0;
    }
    .carre-vip-join-title-carre {
        margin: 40px 0 50px 0;
    }
    .carre-vip-join-list {
        margin-bottom: 60px;
    }
    .carre-vip-account-points-wrapper {
        div {
            width: 100%;
        }
        .icon-more {
            margin: 20px 20px 40px 20px;
        }
    }
}