html{
    scroll-behavior: smooth;
}

body{
    margin : 0;
    color : #08111E;
    font-family: "Manrope", sans-serif;
    overflow-x: hidden;
}

p, h1, h2, h3, h4, h5, h6{
    font-weight: 400;
}

p{
    font-size : 18px;
    margin : 0;
}

h1{
    font-size: 55px;
}

h2{
    font-size: 50px;
}

h3{
    font-size : 24px;
}

.ft-40{
    font-size : 40px;
}

header{
 background-image: url("../img/bg-header.jpg");
 background-size : cover;
}

.bg-gradient-green{
    background: linear-gradient(90deg, #01AEB5, #00976D)!important;
}

.bg-gradient-revert{
    background: linear-gradient(-90deg, #01AEB5, #00976D)!important;
}

.bold{
    font-weight : 700;
}

.bg-transparent{
    background-color: rgba(255, 255, 255, 0.4)!important;
    font-size : 10px;
}

.bg-blue{
    background-color: #050628!important;
    width : fit-content;
}

.rounded-5{
    border-radius : 5px;
}

.rounded-10{
    border-radius : 10px;
}

.rounded-20{
    border-radius: 20px;
}

.btn-primary{
    border : none;
    transition : all 0.2s;
}

.btn-primary:hover{
    box-shadow: 0 0 10px rgb(0, 151, 109, 0.80)!important;
}

input{
    border : none!important;
    border-bottom : 1px solid rgba(0, 0, 0, 0.5)!important;
    border-radius: 0!important;
}

.green-card{
    border-radius: 16px;
    box-shadow: 0 0 14px rgb(0, 151, 109, 0.20);
}

.notice{
    font-size : 14px;
}

.text-green{
    color : #00976D;
}

.num{
    color : rgba(0, 0, 0, 0.06);
    font-size : 160px;
    font-weight: 700;
    margin-bottom :-57px;
}

.bg-pale-blue{
    background-color: rgba(1, 174, 181, 0.2);
}

.bg-pale-green{
    background-color: rgba(0, 151, 109, 0.2);
}

.plus-bubble{
    height : 75px;
    min-width : 75px;
    line-height: 75px;
    text-align : center;
    font-size : 42px;
    z-index : 100;
    position: relative;
}

.picto-infinity{
    margin-top : 60px!important;
}

.bloc-left{
    margin-right : -25px;
}

.bloc-right{
    margin-left : -25px;
}

.bg-grey{
    background-color: #f5f6f7;
    background-image : url("../img/gradient-bg.png");
    background-repeat: no-repeat;
    background-position: 75% top;
    background-size : 30%;
}

.w-31{
    width : 31%;
}

.card{
    border : none;
}

.fs-10{
    font-size: 10px;
}

.fs-44{
    font-size : 44px;
}

.fs-14{
    font-size : 14px;
}

.overflow-picto{
    width : 20%;
    margin-top : -60px;
}

.btn-primary{
    padding : 10px 20px
}

.picto-google{
    font-size : 30px;
    color : white;
    background-color: #4295a5;
    width : fit-content;
    border-radius : 50%;
    width : 40px;
    height : 40px;
    line-height : 40px;
    margin : 0 auto;
}

.slider-google{
    background-color : #f3f3f3;
}

.slider-google .slick-dots{
    display : none!important;
}

.slider-google .slick-prev{
    left : 5px;
}

.slider-google .slick-next{
    right : 25px;
}

.slider-google .slick-prev:before{
    font-size : 40px;
    color : #828282;
}

.slider-google .slick-next:before{
    font-size : 40px;
    color : #828282;
}

.banner-car{
    background-image: url("../img/car-banner.jpg");
    height : 500px;
    background-size: cover;
    background-position: center;
}

.logo-cars-holder{
    padding : 10px 0;
}

.logo-cars{
    height : 20px;
    margin : 0 10px;
}

.logo-cars img{
    height : 100%;
}

.logo-cars-holder .slick-arrow:before{
    color : #00976D!important;
    font-size : 14px!important;
}

.logo-cars-holder .slick-prev:before{
   margin-left : 5px;
}

.logo-cars-holder .slick-next:before{
    margin-right : 5px;
 }


 input.btn-primary{
    border : none!important;
     word-break: break-word;
     white-space: pre-wrap;
 }

 .map{
     min-height: 500px;
     border-radius : 30px;
 }

@media (max-width: 992px) {

    .slick-dots{
        left : 0;
    }

    :before{
        color : #00976D!important;
        font-size : 12px!important;
    }

    h1{
        font-size: 28px;
    }

    h2{
        font-size: 28px;
    }

    h3{
        font-size : 20px;
    }

    .ft-40{
        font-size : 20px;
    }

    p{
        font-size : 16px;
    }

    .bandeau {
        width: 100%;
        overflow: hidden;
        position: relative;
        height : 38px;
    }

    .bandeau p {
        position: absolute;
        display : block;
        white-space: nowrap;
        width: fit-content;
        margin: 0;
        text-align: center;
        animation: scroll-left 30s linear infinite;
    }

    /* Définition de l'animation */
    @keyframes scroll-left {
        0% {
            transform: translateX(10%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

    .slider-top .slick-track{
        top : -10px!important;
    }

    .slick-arrow{
        display : none!important;
    }

    .bloc-left{
        margin-right : 0;
        margin-bottom : -25px;
    }

    .bloc-right{
        margin-left : 0;
        margin-top : -25px;
    }

    .car-slider .card{
        min-height : 470px;
    }

    .slider-google .slick-prev{
        left : 0px;
        display : inline-block!important;
    }

    .slider-google .slick-next{
        right : 12px;
        display : inline-block!important;
    }

    .slider-google .slick-prev:before{
        font-size : 30px!important;
        color : #b7b4b4!important;
    }

    .slider-google .slick-next:before{
        font-size : 30px!important;
        color : #b7b4b4!important;
    }

    .fs-10{
        font-size: 12px;
    }

    .banner-car{
        background-image: url("../img/car-card.jpg");
        height : 350px;
    }

    .bg-grey{
        background-image: none;
    }

}

@media (min-width: 1200px) and (max-width: 1500px) {
    .col-xl-4{
        flex : 0 0 40%;
        max-width : 40%
    }
}

.tables-container{
    background: rgb(0,181,204);
    background: -moz-linear-gradient(90deg, rgba(0,181,204,1) 0%, rgba(0,151,109,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0,181,204,1) 0%, rgba(0,151,109,1) 100%);
    background: linear-gradient(90deg, rgba(0,181,204,1) 0%, rgba(0,151,109,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00b5cc",endColorstr="#00976d",GradientType=1);
}

span.mleft-5{
    margin-left: 5px;
}

.tables{
    display: flex;
    padding: 80px 0px;
    align-items: flex-end;
    gap: 1rem;

    &.scrollable{
        @media (max-width: 992px) {
            overflow-x: auto;  /* Permet le défilement horizontal */
            white-space: nowrap; /* Empêche les éléments de se mettre à la ligne */
            -webkit-overflow-scrolling: touch; /* Optimisation pour le défilement sur iOS */
            gap: 0px;

            .colum{
                flex-direction: column;
            }

            .table-loa, .table-ldd{
                min-width: 450px;
                overflow: hidden;
                z-index: 0;
                border-radius: 0px;
                .label{
                    min-height: 85px;
                    border-radius: 0px;
                    justify-content: center !important;
                    &.one{
                        border-radius: 0px;
                    }
                }
            }
            .table-labels{
                min-width: 145px;
                position: sticky;
                left: 0;
                background-color: #fff;
                z-index: 1;
                box-shadow: none;
                border-radius: 0px;

                .label{
                    min-height: 75px;
                    padding: 10px;
                    font-size: 14px;
                    background-color: white;
                    border-right: 1px solid lightgrey;
                    justify-content: center;
                    border-radius: 0px;

                    &:nth-child(even) {
                        background-color: white;
                    }
                }
            }
            .table-e-lutecia{
                min-width: 200px;
                overflow: hidden;
                .label{
                    min-height: 75px;
                    padding: 10px;
                    word-wrap: break-word; /* Permet de couper les mots trop longs */
                    max-width: 300px; /* Limite la largeur de la cellule pour forcer le passage à la ligne */
                    white-space: normal;
                    font-size: 14px;
                    &.one{
                        border-radius: 0px;
                    }
                }
            }
            .table-loa, .table-ldd{
                min-width: 200px;
                .label{
                    min-height: 75px;
                    padding: 10px;
                    word-wrap: break-word; /* Permet de couper les mots trop longs */
                    max-width: 300px; /* Limite la largeur de la cellule pour forcer le passage à la ligne */
                    white-space: normal;
                    font-size: 14px;
                }
            }
            .big-label{
                word-wrap: break-word; /* Permet de couper les mots trop longs */
                max-width: 300px; /* Limite la largeur de la cellule pour forcer le passage à la ligne */
                white-space: normal;
                font-size: 16px;
            }
        }
    }

    .big-label{
        color: transparent;
        font-weight: bold;
        background-color: transparent;
        padding: 20px 30px;
        font-size: 25px;
        box-shadow: none;
    }
    .table-labels{
        border-radius: 20px;
        overflow: hidden;
        flex: 1;
        .label{
            padding: 20px 30px;
            color: black;
            min-height: 80px;
            font-weight: bolder;
            display: flex;
            height: 85px;
            font-size: 16px;
            align-items: center;
            background-color: white;
            border-bottom: 1px solid #80808036;
            &:nth-child(even){
                background-color: #e5f4f0;
            }
        }
    }

    .table-loa, .table-ldd{
        text-align: center;
        overflow: hidden;
        border-radius: 20px;
        flex: 1;

        .big-label{
            color: black;
            font-weight: bold;
            background-color: white;
            padding: 20px 30px;
            position: relative;
            font-size: 20px;
            margin-bottom: 20px;
            border-radius: 20px;
        }
        .label{
            padding: 20px 10px;
            background-color: white;
            border-bottom: 1px solid #80808036;
            color: black;
            height: 85px;
            display: flex;
            font-size: 15px;
            align-items: center;
            justify-content: center;
            &.one{
                border-radius: 20px 20px 0px 0px;
            }
            &:nth-child(odd){
                background-color: #e5f4f0;
            }

        }
    }
    .table-e-lutecia{
        text-align: center;
        border-radius: 20px;
        overflow: hidden;
        flex: 1;

        .big-label{
            color: white;
            padding: 20px 20px;
            font-size: 20px;
            margin-bottom: 20px;
            border-radius: 20px;
            background-color: #050628;
            overflow: auto;
        }
        .label{
            -webkit-box-shadow: 1px 1px 12px 0px #030303;
            padding: 20px 20px;
            color: white;
            font-size: 15px;
            height: 85px;
            background-color: #050628;
            border-bottom: 1px solid #80808036;
            display: flex;
            justify-content: center;
            align-items: center;

            &.one{
                border-radius: 20px 20px 0px 0px;
                overflow: auto;
            }

            &.gris{
                position: relative;
                &::before{
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.1);
                    pointer-events: none;
                }
            }
            &:nth-child(odd){
                background-color: #050628;
            }
        }
    }
}
.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}