﻿/*
    Created By DAGO
    Created At 04.11.2025
    Update by 
    Description: Responsive - mobile 769 for cs online
*/


/*Element de boutons*/
/* Container principal */
.fab-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /*z-index: 1000;*/
    z-index: 9999;
}
/* Container principal for filter*/
.fab-container-filter {
    position: fixed;
    bottom: 510px;
    right: 20px;
    /*z-index: 1000;*/
    z-index: 9999;
}
/* Bouton principal */
.fab-main {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    /*background-color: #007bff;*/
    background-color: #0a0695;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
}
/* Bouton principal for filter*/
.fab-main-filter {
    /*width: 50px;*/
    height: 35px;
    /*border-radius: 50%;*/
    border: none;
    /*background-color: #007bff;*/
    background-color: #0a0695;
    color: white;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
}
/* Menu caché par défaut */
.fab-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    bottom: 70px;
    right: 0;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Boutons secondaires */
.fab-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: #28a745;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background 0.2s ease;
}

    .fab-item:hover {
        background-color: #218838;
        transform: scale(1.1);
    }

/* État ouvert */
.fab-container.open .fab-menu {
    opacity: 1;
    pointer-events: auto;
}

/* Rotation du bouton principal quand le menu est ouvert */
.fab-container.open .fab-main {
    transform: rotate(45deg);
}
/* Rotation du bouton principal quand le menu est ouvert pour le filtre */
.fab-container-filter.open .fab-main-filter {
    /*transform: rotate(45deg);*/
}

/* Visible uniquement sur mobile */
/*@media (max-width: 768px) {*/
@media (max-width: 1262px) {
    .info{
        display:none;
    }
    .legende-box{
       display: none;
    }
    .fab-container {
        display: block;
    }
    .fab-container-filter {
        display: block;
    }
    .ui-search-by-criteas-area {
        display: none;
    }
    #checkboxNode {
        font-size: 8px !important;
        max-width: 220px !important;
        max-height: 250px !important;
        padding: 3px !important;
        top: 200px !important;
        left: 8px !important;
        overflow-y: auto !important; /* scroll vertical */
    }
    #checkboxNode h4 {
        font-size: 12px; /* titre plus petit */
        /*margin-top:12px;*/
    }
    #Close_mono {
        height: 30px;
        width: 30px !important;
        font-size: 14px;
        margin-left: 80% !important;
        /*bottom:40px;*/
        /*margin-right: 3%;*/
        /*margin-bottom: 3%;*/
    }
    .ferme_filtre {
        display: block;
    }
    .navbar-header{
        display:none;
    }
    #btn_close_filter_ets {
        display: block !important;
    }
}
@media screen and (max-width: 1262px) {
    .legende-box {
        width: 150px !important;
        height: 200px !important;
        overflow:auto;
        /*top: 100px;*/
        margin-right: 7.5em;
        /*right:5px;*/
        font-size: 11px;
    }
    .legende-box img {
       width: 13px;
    }

    .legende-box .form-check {
        margin-bottom: 4px;
     }
        .legende-box .panel-heading {
            font-size: 13px;
            padding: 6px 8px;
            margin-top: 22px;
        }
}
@media screen and (max-width: 1262px) {
    .info.search-area {
        width: 170px !important;
        right: 15px !important;
        top: 15px !important;
        font-size: 11px !important;
        padding: 8px 4px !important;
    }

        .info.search-area .collapsible {
            font-size: 13px;
            padding: 7px 9px;
        }

        .info.search-area select,
        .info.search-area button {
            font-size: 11px;
        }
}
@media screen and (max-width: 1262px) {
    .my-popup {
        width: 260px;
        font-size: 13px;
    }

        .my-popup .popup-header h5 {
            font-size: 15px;
        }

        .my-popup .popup-header .btn {
            font-size: 12px;
            padding: 5px 8px;
        }
}
@media (max-width: 991px) {
    .ui-search-by-criteas-area {
        width: 81%;
        max-width: initial;
        padding: 10px 15px;
    }
    .ui-search-by-criteas-area .col-xs-12 {
        padding-right: 2px;
        padding-left: 2px;
        padding-top: 2px;
    }
}
@media (max-width: 839px) {
    .fab-container {
        right: 125px;
    }.fab-container-filter {
        /*right: 125px;*/
        right: 25px !important;
    }
} @media (max-width: 589px) {
    .fab-container {
        right: 35px;
    }
    /*.fab-container-filter {
        right: 35px;
    }*/
}@media (max-width: 575px) {
    .fab-container {
        right: 44px;
    }
    /*.fab-container-filter {
        right: 44px;
    }*/
}@media (max-width: 557px) {
    .fab-container {
        right: 65px;
    }
    /*.fab-container-filter {
        right: 65px;
    }*/
}@media (max-width: 541px) {
    .fab-container {
        right: 85px;
    }
    /*.fab-container-filter {
        right: 85px;
    }*/
}@media (max-width: 515px) {
    .fab-container {
        right: 105px;
    }
    /*.fab-container-filter {
        right: 105px;
    }*/
}@media (max-width: 495px) {
    .fab-container {
        right: 125px;
    }
    /*.fab-container-filter {
        right: 125px;
    }*/
}@media (max-width: 477px) {
    .fab-container {
        right: 145px;
    }
    /*.fab-container-filter {
        right: 145px;
    }*/
    .ui-search-by-criteas-area {
        margin: 10px 10px auto;
    }
}@media (max-width: 459px) {
    .fab-container {
        right: 165px;
    }
    /*.fab-container-filter {
        right: 165px;
    }*/
}@media (max-width: 437px) {
    .fab-container {
        right: 205px;
    }
    /*.fab-container-filter {
        right: 205px;
    }*/
}@media (max-width: 393px) {
    .fab-container {
        right: 225px;
    }
    /*.fab-container-filter {
        right: 225px;
    }*/
    .ui-search-by-criteas-area {
        margin: 10px 14px auto;
    }
}@media (max-width: 377px) {
    .fab-container {
        right: 245px;
    }
    /*.fab-container-filter {
        right: 245px;
    }*/
    /*.ui-search-by-criteas-area {
        margin: 10px 14px auto;
    }*/
}@media (max-width: 351px) {
    .fab-container {
        right: 165px;
    }
    /*.fab-container-filter {
        right: 165px;
    }*/
    .ui-search-by-criteas-area {
        margin: 10px 17px auto;
    }
}@media (max-width: 320px) {
    .fab-container {
        right: 305px;
    }
    /*.fab-container-filter {
        right: 305px;
    }*/
    .ui-search-by-criteas-area {
        margin: 10px 19px auto;
    }
}@media (max-width: 321px) {
    .fab-container {
        right: 325px;
    }
    /*.fab-container-filter {
        right: 325px;
    }*/
    .ui-search-by-criteas-area {
        margin: 10px 19px auto;
    }
}@media (max-width: 322px) {
    .fab-container {
        right: 325px;
    }
    /*.fab-container-filter {
        right: 325px;
    }*/
    .ui-search-by-criteas-area {
        margin: 10px 19px auto;
    }
}@media (max-width: 323px) {
    .fab-container {
        right: 325px;
    }
    /*.fab-container-filter {
        right: 325px;
    }*/
    .ui-search-by-criteas-area {
        margin: 10px 19px auto;
    }
}@media (max-width: 324px) {
    .fab-container {
        right: 325px;
    }
    /*.fab-container-filter {
        right: 325px;
    }*/
    .ui-search-by-criteas-area {
        margin: 10px 19px auto;
    }
}@media (max-width: 325px) {
    .fab-container {
        right: 305px;
    }
    /*.fab-container-filter {
        right: 305px;
    }*/
    .ui-search-by-criteas-area {
        margin: 10px 19px auto;
    }
}@media (max-width: 329px) {
    .fab-container {
        right: 170px;
    }
    /*.fab-container-filter {
        right: 170px;
    }*/
    .ui-search-by-criteas-area {
        margin: 10px 19px auto;
    }
}
/* Caché sur écran large */
/*@media (min-width: 769px) {*/
@media (min-width: 1263px) {
    .info {
        display: block;
    }

    .legende-box {
        display: block;
    }

    .fab-container {
        display: none;
    }
    .fab-container-filter {
        display: none;
    }
    #btn_close_filter_ets {
        display: none !important;
    }
}

/*@media (max-width: 767px) {
    .legende-box {
        right: initial;
        left: 71%;
        transform: translateX(-50%);
        width: 90%;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
}*/
/* Sur tablette */
/*@media (max-width: 1024px) {
    #online-map {
        height: 400px;
    }
}*/

/* Sur mobile */
/*@media (max-width: 767px) {
    #online-map {
        height: 50vh;
    }
}
@media (max-width: 767px) {
    .leaflet-popup-content {
        font-size: 12px;
    }

    .leaflet-control-zoom {
        transform: scale(0.9);
    }
}*/

/*Fermer les elements*/

/*Fermer les elements*/
