@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    /* background-image: url("/images/background.jpg"); */
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : cover;
    
    font-family         : "Montserrat", sans-serif;
    font-size           : 16px;
    
}

@media screen and (max-width : 2300px) {
    body {
        font-size : 13px;
    }
}

@media screen and (max-width : 600px) {
    body {
        /* background-image: url("/images/background-mobile.jpg"); */
        background-repeat   : no-repeat;
        background-position : 40% 92%;
        background-size     : auto;
        font-family         : "Montserrat", sans-serif;
        font-size           : 12px;
    }
    
    footer {
        text-align : center;
    }
}

footer a:hover {
    color           : #FFFFFF;
    text-decoration : underline;
}

.offcanvas {
    font-size : 16px;
}

/*
footer {
    font-size: 16px;
}

@media screen and (max-width: 2300px) {
    footer {
        font-size: 13px;
    }
}

@media screen and (max-width: 600px) {
    footer {
        font-size: 12px;
    }
}

footer a:hover {
    text-decoration: underline;
    color: #FFF;
}
*/


.page-item.active .page-link {
    color            : white !important;
    border-color     : #9DCBA5 !important;
    background-color : #9DCBA5 !important;
}

.page-link {
    color : black !important;
}

.primary-color {
    color : #9DCBA5 !important;
}

.bg-primary-color {
    border-color     : #1CA14D !important;
    background-color : #1CA14D !important;
}

.text-mensuel {
    color : #9DCBA5;
}

.text-semestriel {
    color : #F59F00;
}

.text-annuel {
    color : #E96958;
}

.btn-mobile, .btn-mobile-back {
    align-content  : center;
    width          : 300px;
    height         : 60px;
    font-size      : 18px;
    text-transform : uppercase;
}

.btn-mobile:hover {
    border-color     : red !important;
    background-color : red !important;
}

.btn-mobile-back:hover {
    color            : #FFFFFF;
    border-color     : #212529 !important;
    background-color : #212529 !important;
}

#customers_form_cbFront {
    width          : 100px;
    height         : 60px;
    margin         : auto;
    font-size      : 25px;
    letter-spacing : 4px;
    text-align     : center;
}

#customers_form_cbBack {
    width          : 80px;
    height         : 60px;
    margin         : auto;
    font-size      : 25px;
    letter-spacing : 4px;
    text-align     : center;
}

#customers_form {
    display         : flex;
    justify-content : center;
}

.form-group {
    padding-right : 10px;
    padding-left  : 10px;
}

/*
label {
    display: none;
}*/


/* AIR-V */

header {
    position : absolute;
    z-index  : 999;
    width    : 100%;
}

.bg-header {
    background-image    : url("/carousel.jpg");
    background-repeat   : no-repeat; /* Do not repeat the image */
    background-position : left bottom; /* Center the image */
    background-size     : contain; /* Resize the background image to cover the entire container */
    background-size     : 30%;
}


.btn {
    color            : #FFFFFF;
    border-radius    : 30px;
    background-color : #0F2360;
}

.btn:hover {
    color            : #0F2360;
    border-color     : #0F2360;
    background-color : #FFFFFF;
}

a {
    color           : #FFFFFF;
    text-decoration : none;
}

footer {
    color            : #FFFFFF !important;
    background-color : #01174F;
}

footer > a {
    color            : #FFFFFF !important;
    background-color : #01174F;
}

.title-info {
    text-transform : uppercase;
}

.title-info::after {
    border-bottom : 4px solid #FFFFFF;
}

.title-info::after {
    content     : '';
    display     : block;
    width       : 30px;
    padding-top : 10px;
}

@media screen and (max-width : 600px) {
    .title-info::after {
        margin : auto;
    }
}


.test-info {
    position : relative;
}

@media screen and (min-width : 700px) {
    .test-info::after {
        content          : '';
        position         : absolute;
        top              : 0;
        
        right            : 0;
        width            : 0.5px;
        height           : 90px;
        
        background-color : #FFFFFF;
    }
}

.navbar-toggler:focus {
    box-shadow : none !important;
}


.game {
    border-radius : 20px;
    transition    : transform 0.3s, filter 0.3s;
    filter        : grayscale(0.5);
}

.game:hover {
    cursor    : pointer;
    transform : scale(1.05);
    filter    : grayscale(0);
}


.input_players {
    -webkit-appearance : textfield;
    -moz-appearance    : textfield;
    appearance         : textfield;
}

.input_players::-webkit-inner-spin-button,
.input_players::-webkit-outer-spin-button {
    -webkit-appearance : none;
}

.number-input {
    display : inline-flex;
    border  : 1px solid #0F2360;
}

.number-input,
.number-input * {
    box-sizing : border-box;
}

.number-input button {
    position           : relative;
    align-items        : center;
    justify-content    : center;
    width              : 3rem;
    height             : 3rem;
    margin             : 0;
    border             : none;
    outline            : none;
    background-color   : transparent;
    cursor             : pointer;
    -webkit-appearance : none;
}

.number-input button:before,
.number-input button:after {
    content          : '';
    position         : absolute;
    display          : inline-block;
    width            : 1rem;
    height           : 2px;
    background-color : #0F2360;
    transform        : translate(-50%, -50%);
}

.number-input button.plus:after {
    transform : translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
    max-width  : 5rem;
    height     : 3rem;
    padding    : .5rem;
    color      : #0F2360;
    border     : 0;
    font-size  : 2rem;
    text-align : center;
}


.carousel-control-next-icon,
.carousel-control-prev-icon {
    filter : invert(1);
}

.carousel-control-prev, .carousel-control-next {
    width : 10%;
}


/* HIDE RADIO */
[type=radio] {
    position : absolute;
    width    : 0;
    height   : 0;
    opacity  : 0;
}

/* IMAGE STYLES */
[type=radio] + img {
    cursor : pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
    transform : scale(1.05);
    filter    : grayscale(0);
}

.dateSelect {
    color         : white;
    border-radius : 50rem !important;
    background    : #031850;
}

.hour {
    border     : 1px solid transparent;
    cursor     : pointer;
    transition : border 0.3s, border-radius 0.3s;
}

.hour:hover {
    border        : solid 1px #031850;
    border-radius : 50rem !important;
}

.hourDisabled {
    border-radius : 50rem !important;
    background    : #F3F3F3;
}


.btn-inverse {
    color            : #FFFFFF;
    border-radius    : 30px;
    background-color : #0F2360;
    font-weight      : bold;
}

.btn-inverse:hover {
    color            : #0F2360;
    border-color     : #0F2360;
    background-color : #FFFFFF;
}


.btn-style903 {
    position         : relative;
    color            : #031850;
    border-color     : #031850;
    background-color : #FFFFFF;
}


.btn-style903::before {
    content          : "";
    position         : absolute;
    top              : 50%;
    left             : 0;
    width            : 15px;
    height           : 3px;
    background       : #031850;
    transition       : all 0.2s;
    transition-delay : 0.1s;
    transform        : translate(0, -50%);
}

.btn-style903:hover {
    color            : #FFFFFF;
    background-color : #031850;
    
    
}

.btn-style903:hover::before {
    left             : 100%;
    background-color : #FFFFFF;
    transform        : translate(-100%, -50%);
}


.btn-style904 {
    position         : relative;
    color            : #031850;
    border-color     : #031850;
    background-color : #FFFFFF;
}


.btn-style904::before {
    content          : "";
    position         : absolute;
    top              : 50%;
    right            : 0;
    width            : 15px;
    height           : 3px;
    background       : #031850;
    transition       : all 0.2s;
    transition-delay : 0.1s;
    transform        : translate(0, -50%);
}

.btn-style904:hover {
    color            : #FFFFFF;
    background-color : #031850;
    
    
}

.btn-style904:hover::before {
    right            : 100%;
    background-color : #FFFFFF;
    transform        : translate(-100%, -50%);
}


.btn-lang {
    color            : #FFFFFF;
    border-radius    : 30px;
    background-color : #FFFFFF00;
}

.btn-lang:hover {
    color            : #0F2360;
    border-color     : #0F2360;
    background-color : #FFFFFF;
}

.carousel {
    font-size : 16px;
}


.banner-reservation {
    height              : 400px;
    background-image    : url("/images/header-reservation.png");
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : cover;
}

@media screen and (max-width : 600px) {
    .banner-reservation {
        height           : 150px;
        background-image : url("/images/header-reservation-mobile.png");
    }
}


.banner-homepage {
    height              : 100vh;
    background-image    : url("/images/header-homepage.jpg");
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : cover;
}

@media screen and (max-width : 600px) {
    .banner-homepage {
        height           : 350px;
        background-image : url("/images/header-reservation-mobile.png");
    }
    
    .btnPink {
        font-size : 12px;
    }
}


.btnPink {
    color            : #FFFFFF;
    border-radius    : 30px;
    background-color : #E10234 !important;
}

.btnPink:hover {
    color            : #E10234 !important;
    border-color     : #E10234 !important;
    background-color : #FFFFFF;
    background-color : #FFFFFF !important;
}


.bottom-reservation {
    display             : flex;
    align-items         : flex-end;
    min-height          : 76vw;
    
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : cover;
}

.bastogne {
    position      : relative;
    z-index       : 9;
    margin-bottom : 8rem;
    
    @media screen and (min-width : 992px) {
        margin-bottom : 30rem;
    }
}

.bottom-reservation-home {
    position     : relative;
    display      : flex;
    align-items  : center;
    padding-top  : 8rem;
    aspect-ratio : 64/55;
}

.bottom-reservation-home .btnPink {
    position : relative;
    z-index  : 9;
}

.bottom-reservation-home .carousel-item .game-container {
    aspect-ratio : 3/4;
}

.bottom-reservation-home .image-container {
    position : absolute;
    top      : 0;
    left     : 0;
    display  : flex;
    width    : 100%;
    height   : 100%;
    
    @media screen and (max-width : 992px) {
        display : none;
    }
}

.bottom-reservation-home .image-container img {
    width           : 100%;
    height          : auto;
    object-fit      : cover;
    object-position : bottom;
}

.underline-white::after {
    content       : '';
    display       : block;
    width         : 30px;
    padding-top   : 10px;
    border-bottom : 4px solid #FFFFFF;
}

.underline-primary::after {
    content       : '';
    display       : block;
    width         : 30px;
    padding-top   : 10px;
    border-bottom : 4px solid #01174F;;
}

.underline-pink::after {
    content       : '';
    display       : block;
    width         : 30px;
    padding-top   : 10px;
    border-bottom : 4px solid #E10234;;
}


.air-v {
    position            : fixed;
    top                 : 0;
    bottom              : 0;
    z-index             : -1;
    width               : 100%;
    height              : 32vw;
    margin              : auto 0;
    background-image    : url("/images/air-v.png");
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : cover;
}


@media screen and (max-width : 767px) {
    .underline-white::after {
        margin : auto;
    }
    
    .underline-primary::after {
        margin : auto;
    }
    
    .underline-pink::after {
        margin : auto;
    }
    
    .bottom-reservation {
        height : 100%;
    }
    
    .air-v {
        height : 130px;
    }
}

@media screen and (max-width : 1100px) {
    .bottom-reservation-home {
        height : 100%;
    }
}


a:hover {
    color : #E10234 !important;
}

.game-hover:hover {
    cursor : pointer;
    
    > div {
        visibility : visible !important;
    }
}

.p-absolute {
    position : absolute;
}


@media screen and (max-width : 900px) {
    .p-absolute {
        position : initial;
    }
}


.list-group-item.active {
    border-color     : #01174F;
    background-color : #01174F;
}


.game-container {
    position : relative;
    cursor   : pointer;
    
}

.image {
    display : block;
    width   : 100%;
    
}

.overlay-gaming {
    position         : absolute;
    top              : 0;
    right            : 0;
    bottom           : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    opacity          : 0;
    background-color : #021757E0;
    transition       : .5s ease;
}

.overlay-cultural {
    position         : absolute;
    top              : 0;
    right            : 0;
    bottom           : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    opacity          : 0;
    background-color : #F3E3A1B3;
    transition       : .5s ease;
}

.game-container:hover .overlay-gaming {
    opacity : 1;
}

.game-container:hover .overlay-cultural {
    opacity : 1;
}

.game-text {
    position          : absolute;
    top               : 50%;
    left              : 50%;
    color             : white;
    font-size         : 20px;
    text-align        : center;
    -ms-transform     : translate(-50%, -50%);
    -webkit-transform : translate(-50%, -50%);
    transform         : translate(-50%, -50%);
}


.game-text-2 {
    position          : absolute;
    /*top: 57%;*/
    bottom            : 8%;
    left              : 58%;
    -ms-transform     : translate(-60%, 0%);
    -webkit-transform : translate(-60%, 0%);
    transform         : translate(-60%, 0%);
}


@media screen and (max-width : 1400px) {
    .game-text-2 {
        position          : absolute;
        bottom            : 8%;
        left              : 58%;
        -ms-transform     : translate(-60%, 0%);
        -webkit-transform : translate(-60%, 0%);
        transform         : translate(-60%, 0%);
    }
}

@media screen and (max-width : 991px) {
    .game-text-2 {
        position          : absolute;
        bottom            : 9%;
        left              : 58%;
        -ms-transform     : translate(-60%, 0%);
        -webkit-transform : translate(-60%, 0%);
        transform         : translate(-60%, 0%);
    }
}

@media screen and (max-width : 760px) {
    .game-text-2 {
        position          : absolute;
        bottom            : 11%;
        left              : 58%;
        -ms-transform     : translate(-60%, 0%);
        -webkit-transform : translate(-60%, 0%);
        transform         : translate(-60%, 0%);
    }
}


@media screen and (max-width : 400px) {
    .game-text-2 {
        position          : absolute;
        bottom            : 9%;
        left              : 58%;
        -ms-transform     : translate(-60%, 0%);
        -webkit-transform : translate(-60%, 0%);
        transform         : translate(-60%, 0%);
    }
}

@media screen and (max-width : 350px) {
    .game-text-2 {
        position          : absolute;
        bottom            : 9%;
        left              : 58%;
        -ms-transform     : translate(-60%, 0%);
        -webkit-transform : translate(-60%, 0%);
        transform         : translate(-60%, 0%);
    }
}


.nav-link {
    color          : #FFFFFF;
    text-transform : uppercase;
    text-align     : center;
}

.nav-link:hover, .nav-link:focus {
    color  : #E10234 !important;
    cursor : pointer;
}


@media screen and (min-width : 700px) {
    .carousel-control-prev, .carousel-control-next {
        top    : 50%;
        width  : 5%;
        height : max-content;
    }
    
    #hoursTarifs {
        display : none;
    }
    
    .navbar {
        padding-top    : 1.5rem;
        padding-bottom : 1.5rem;
    }
}

@media screen and (max-width : 1200px) {
    .bottom-reservation-home {
        height : max-content;
    }
    
    #hoursTarifs {
        display : block;
    }
}


.bottom-reservation .game-container {
    aspect-ratio : 3/4;
}

.bottom-reservation .game-container .image {
    width      : 100%;
    height     : 100%;
    object-fit : contain;
}

.bottom-reservation .game-container .overlay-gaming {
    color : #FFFFFF;
}

.games-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .games-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .games-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}



.carousel-control-next-icon, .carousel-control-prev-icon {
    filter : invert(0);
}


@media screen and (max-width : 1400px) {
    #textSlider1 {
        display : none;
    }
    
    #textHome {
        display : block !important;
    }
    
    .banner-homepage {
        background-image : url("/images/header-homepage-mobile.jpg");
    }
}


.privacypolicies-com---nb-simple {
    right            : 15px !important;
    bottom           : 15px !important;
    max-width        : 20% !important;
    border-radius    : 30px;
    background-color : #FFFFFF !important;
    box-shadow       : 1px 0px 5px black;
}

.privacypolicies-com---palette-light .cc-nb-title {
    color : #01174F !important;
}

.privacypolicies-com---palette-light .cc-nb-okagree {
    background-color : #01174F !important;
}

.cc-nb-main-container {
    padding : 2rem;
}

/* RGPD */

.rgpd {
    position      : fixed;
    right         : -370px;
    bottom        : 50px;
    z-index       : 999;
    width         : 100%;
    max-width     : 345px;
    padding       : 20px 25px 22px;
    border-radius : 8px;
    background    : #FFFFFF;
    box-shadow    : 0 5px 10px rgba(0, 0, 0, 0.1);
    transition    : right 0.3s ease;
}

.rgpd.show {
    right : 20px;
}

.rgpd header {
    display     : flex;
    align-items : center;
    column-gap  : 15px;
}

header i {
    color     : #4070F4;
    font-size : 32px;
}

header h2 {
    color       : #4070F4;
    font-weight : 500;
}

.rgpd .data {
    margin-top : 16px;
}

.rgpd .data p {
    color     : #333333;
    font-size : 16px;
}

.data p a {
    color           : #01174F;
    text-decoration : none;
}

.data p a:hover {
    text-decoration : underline;
}

.rgpd .buttons {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    width           : 100%;
    margin-top      : 16px;
}

.buttons .button {
    width         : calc(100% / 2 - 10px);
    padding       : 8px 0;
    color         : #FFFFFF;
    border        : none;
    border-radius : 4px;
    background    : #01174F;
    cursor        : pointer;
    transition    : all 0.2s ease;
}

.buttons #acceptBtn:hover {
    background-color : #2E50A6;
}

#declineBtn {
    color            : #01174F;
    border           : 2px solid #01174F;
    background-color : #FFFFFF;
}

#declineBtn:hover {
    color            : #FFFFFF;
    background-color : #01174F;
}

/* END RGPD */


#flash_messages {
    
    position : absolute;
    top      : 65px;
    width    : 100%;
}


.carousel-control-prev-icon {
    background-image : url("/images/left5.svg");
}

.carousel-control-next-icon {
    background-image : url("/images/right5.svg");
}

/*
@media screen and (max-width: 600px) {
    .navbar {
        padding-top: 1.5rem;
    }
}
*/

.grecaptcha-badge {
    visibility : hidden;
}

.alert-succcess {
    color            : #3C763D !important;
    border-color     : #D6E9C6 !important;
    background-color : #DFF0D8 !important;
}

.alert-succcess hr {
    background-color : #C9E2B3;
}

.alert-succcess .alert-link {
    color : #2B542C;
}

#toast-container {
    position : fixed;
    right    : 1rem;
    bottom   : 1rem;
    z-index  : 1055;
}

.badge.tag-filter.active {
    color            : #FFFFFF !important;
    background-color : #E10234 !important;
}

.game-item {
    /* on part d’une opacité à 1 */
    opacity    : 1;
    /* on indique une transition sur l’opacité */
    transition : opacity 0.3s ease;
}

.horaires-section {
    padding-top    : 4rem;
    padding-bottom : 4rem;
    color          : #01174F;
    background     : #FFFFFF;
}

.hours-pricing__title {
    color : #01174F;
}

/* Schedule */
.schedule {
    display : flex;
    gap     : 2rem;
}

.schedule__col {
    display        : flex;
    flex-direction : column;
    min-width      : 240px;
    gap            : 0.5rem;
}

.schedule__row {
    display        : flex;
    align-items    : baseline;
    padding-bottom : 0.5rem;
    gap            : 18px;
}

.schedule__col .schedule__row:not(:last-child) {
    border-bottom : 1px solid #E0E0E0;
}

.schedule__day {
    min-width   : 120px;
    font-size   : 18px;
    font-weight : 600;
}

.schedule__time {
    font-size   : 18px;
    font-weight : 700;
}

.schedule__time.closed {
    color       : #444444;
    font-weight : 500;
}

.schedule__vline {
    width      : 2px;
    background : #01174F;
}

.schedule__bar {
    display       : block;
    width         : 30px;
    margin-bottom : 2rem;
    padding-top   : 2rem;
    border-bottom : 4px solid #01174F;
}

/* Pricing */
.pricing {
    display        : flex;
    flex-direction : column;
    gap            : 1.5rem;
}

.pricing__item {
    display        : flex;
    flex-direction : column;
}

.pricing__headline {
    margin      : 0 0 6px;
    color       : #01174F;
    font-size   : 20px;
    line-height : 1.35;
}

.pricing__headline--single {
    font-weight : 700;
}

.pricing__strong {
    font-weight : 700;
}

.pricing__aside {
    color       : #01174F;
    font-size   : 18px;
    font-weight : 500;
    font-style  : italic;
}

.pricing__note {
    margin      : 0;
    color       : #01174F;
    font-size   : 14px;
    line-height : 1.45;
}

.pricing__note--plain {
    margin-top : 2px;
}

/* Responsive */
@media (max-width : 760px) {
    .schedule {
        flex-direction : column;
        gap            : 14px;
    }
    
    .schedule__col:first-child .schedule__row {
        border-bottom : 1px solid #E0E0E0;
    }
    
    .schedule__vline {
        display : none;
    }
    
    .schedule__col {
        width     : 100%;
        min-width : 0;
    }
    
    .schedule__row {
        padding-right : 0;
        padding-left  : 0;
    }
}