/**
    * Nom de fichier : dropmenu_badges.css
    * Version : 1.0.0
    * Projet : Pégase
    * Auteur  : Samuel Bocharel
    * Contributeur : Nicolas Chevallier
    * Description : Gestion des menus déroulants, filtres et badges.
    * Date    : 05/02/2025
    */


    .dropmenu-badges .filters-container {
        display: grid;
        gap: 24px;
        background: var(--Gray-50, #F1F3F8);
        /* padding: 15px;
        /* padding-top: 32px;
        padding-bottom: 64px; */
        /* margin-bottom: 40px; */ */
    }

    .dropmenu-badges .filter-group {
        display: flex;
        flex-direction: column;
        /* flex: 1; Permet une distribution équilibrée */
    }

    .dropmenu-badges .filter-group .filter-label {
        font-family: Marianne-Medium;
        font-size: 14px;
        color: var(--Gray-800, #293056);
        margin-bottom: 8px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 142.857% */
    }

    /* adaptation pour différents nombres de groupes de de filtres */
    /* ------------------------------------------------------------------------------------------ */
    .dropmenu-badges .filters-container.four-filters {
        grid-template-columns: repeat(4, 1fr);
    }

    .dropmenu-badges .filters-container.three-filters {
        grid-template-columns: repeat(3, 1fr);
    }

    .dropmenu-badges .filters-container.two-filters {
        grid-template-columns: repeat(2, 1fr);
    }

    .dropmenu-badges .filters-container.one-filter {
        grid-template-columns: repeat(1, 1fr);
    }

    /* .dropmenu-badges .filters-container.one-filter .filter-dropdown {
        max-width: 480px;
    } */
    /* ------------------------------------------------------------------------------------------ */

    /* CUSTOMISATION DE CHECKBOXES*/
    /* ------------------------------------------------------------------------------------------ */
    .dropmenu-badges input[type="checkbox"] {
        display: none;
    }

    .dropmenu-badges label { /* Style général des labels */
        position: relative; /* Pour positionner ::before */
        padding-left: 30px; /* Espace pour la checkbox personnalisée */
        cursor: pointer; /* Indiquer que c'est cliquable */
        display: block; /* Pour que les labels occupent toute la largeur */
        margin-bottom: 5px; /* Espacement entre les labels */
    }

    .dropmenu-badges label::before {
        content: "";
        min-width: 20px;
        min-height: 20px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url('data:image/svg+xml;utf8,<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="3" width="18" height="18" rx="5" stroke="%23828AC4" stroke-width="2"/></svg>');
    }


    .dropmenu-badges label:hover::before {
        background-image: url('data:image/svg+xml;utf8,<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="3" width="18" height="18" rx="5" stroke="%236927DA" stroke-width="2"/></svg>');
    }

    .dropmenu-badges label.checked::before {
        background-image: url('data:image/svg+xml;utf8,<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="3" width="18" height="18" rx="5" fill="%23ECE9FE"/><rect x="1" y="3" width="18" height="18" rx="5" stroke="%237839EE" stroke-width="2"/><path d="M14.6668 8.5L8.25016 14.9167L5.3335 12" stroke="%236927DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    }
    /* ---------------------------------------------------------------------------------------------------------*/
    .dropmenu-badges .filter-dropdown {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .dropmenu-badges .dropdown-toggle {
        /* padding: 8px 12px; */
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 10px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        /* width: 100%; */
        text-align: left;
        border: 1px solid var(--Gray-300, #B3B8DB);
        background: var(--Base-White, #FFF);
    }

    .dropmenu-badges .dropdown-toggle:focus {
        outline: 2px solid #BCF1EB;
    }

    /* .dropmenu-badges .dropdown-toggle:hover {
        outline:none;
    } */

    .dropmenu-badges .dropdown-toggle span {
        width: 80%;
        display: inline-block;
        font-weight: normal;
        font-family: Marianne-Regular;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 150% */
        color:#747474;
    }

    /* chevron menu déroulant */
    .dropmenu-badges .dropdown-toggle::after {
        content: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%207.5L10%2012.5L15%207.5%22%20stroke%3D%22%235965A8%22%20stroke-width%3D%221.66667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
        /* content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m18%2015-6-6-6%206%22/%3E%3C/svg%3E"); */
        content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20stroke%3D%22%235965A8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.66667%22%20d%3D%22m18%2015-6-6-6%206%22/%3E%3C/svg%3E");
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;

        /* surcharges de bootstrap du portail */
        box-sizing: unset !important;
        border-top: none !important;
    }


    .dropmenu-badges .dropdown-menu {
        display: none;
        position: absolute;
        box-shadow: 0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;
        /* padding: 10px; */
        border-radius: 10px;
        z-index: 100;
        top: 45px;
        /* right: -30px; */
        /*left: 0; */
        background-color: white;
        width: max-content;
        width: 100%;
        /* min-width: 300px; */
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid var(--Gray-300, #B3B8DB);

    }

    .dropmenu-badges .dropdown-menu label {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 5px;
        font-size: 16px;
        color: #202121;
        border-radius: 6px;
        flex-shrink: 0;
        margin: 10px 18px;
    }

    .dropmenu-badges .dropdown-menu label:hover {
        background: var(--Gray-50, #F1F3F8);
    }


    .dropmenu-badges .dropdown-menu input {
        accent-color: var(--text-color-menu);
    }

    .dropmenu-badges .dropdown-menu .bold {
        font-weight: bold;
        color: var(--text-color-menu);
    }

    .dropmenu-badges .selected-filters-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin-top: 8px;
        justify-content: flex-start;
    }

    .dropmenu-badges .selected-filters {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        align-items: flex;
        /* margin-top: 8px; */
    }

    .dropmenu-badges #selected-count1::after, #selected-count2::after, #selected-count3::after, #selected-count4::after {
        content: "";
        font-size: 12px;
        color: var(--text-color-menu);
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%); /* Aligne verticalement le chevron */
    }

    .dropmenu-badges .filter-tag {
        background: var(--background-color-bold);
        color: var(--text-color-menu);
        padding: 5px 12px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        border: 1px solid var(--border-color-bold);
    }

    .dropmenu-badges #clearFilters:hover {
        background: var(--text-color-menu);;
        color: var(--background-color);
    }



    /* Media Query pour les écrans en dessous de 1080px */
    @media (max-width: 1080px) {
        .dropmenu-badges .filters-container.four-filters {
            grid-template-columns: repeat(2, 1fr); 
        }
        .dropmenu-badges .filters-container.three-filters {
            grid-template-columns: repeat(2, 1fr); 
        }

        }

    /* Media Query pour les écrans en dessous de 720px */
    @media (max-width: 720px) {
        .dropmenu-badges .filters-container.four-filters {
            grid-template-columns: 1fr; /* Les filtres s'affichent sur une seule colonne */
        }
        /* .dropmenu-badges .filters-container.four-filters .dropdown-menu {
            width: 100%; 
        } */
        .dropmenu-badges .filters-container.three-filters {
            grid-template-columns: repeat(1, 1fr); 
        }

        .dropmenu-badges .filters-container.two-filters {
            grid-template-columns: repeat(1, 1fr); 
        }
    }

    /* Media Query pour les écrans en dessous de 640px */
    @media (max-width: 640px) {

    }

    /* Media Query pour les écrans en dessous de 480px */
    @media (max-width: 480px) {
        .dropmenu-badges .filters-container body {
            margin: 10px; /* Réduit les marges sur les petits écrans */
        }   
        .dropmenu-badges .filters-container {
            margin-bottom: 10px;
            padding-top: 12px;
            padding-bottom: 12px;
        }
        .dropmenu-badges .filters-container .dropdown-toggle {
            font-size: 12px; /* Réduit la taille du texte */
            padding: 6px 10px; /* Ajuste le padding */
        }
        .dropmenu-badges .selected-filters-container .badge-generique {
            font-size: 12px;
            padding: 2px 10px 4px 10px;
        }
        .dropmenu-badges .selected-filters-container .badge-spec-filtre-choisi::after {
            margin-left: 0px;
        }
    }