/*---------------------------- tabs -----------------------*/

.selTab {
	background-color: rgba(149, 165, 166, 0.5);
	}
.selUnselTab {
	border-top:1px solid silver;
	border-bottom:1px solid silver;
	border-right:1px solid silver;
	}
.leftTabClass {
	border-left:1px solid silver;
	}
.seBackground {
		background-color: rgba(149, 165, 166, 0.5);
		height:100%; 
		width:100%; 
		}
.inputLowPaddingClass {
	padding-top:8px!important;
	padding-bottom:8px!important;
	}
.rowSeparatorClassX {
	border-top:1px solid silver;
	padding-top:8px;
	}

@media (min-width: 992px) {
    .selUnselTab {
        height: 60px; /* ou la hauteur souhaitée */
        min-height: 60px;
    }
	}

/*---------------------------- buttons -----------------------*/
.buttonGroupClass {
	border:1px solid silver;
	}
.buttonGroupSelClass {
	background-color:#26a65b;
	}
.buttonGroupIconClass {
	font-size:14px;
	}
.buttonGroupClass {
	font-weight:300!important; 
	font-size:12px;
	padding:8px;
	
	}
	
.multi-item {
	background-color:#95a5a6!important;
	}
	
.investInputClass {
	width:180px!important;
	}
	

/*---------------------------- dropdown menus -----------------------*/
.custom-checkbox-dropdown {
    min-width: 200px;
}

.checkbox-item {
    display: flex !important;
    align-items: center;
    padding: 0.25rem 1rem !important; /* Réduit le padding vertical */
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    color: #212529 !important;
    margin: 0 !important; /* Supprime les marges */
}

.checkbox-item:hover {
    background-color: #f8f9fa;
    color: #212529 !important;
    text-decoration: none;
}

.checkbox-item:focus {
    color: #212529 !important;
    text-decoration: none;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 0.75rem;
    cursor: pointer;
}

.checkbox-item:active {
    background-color: #e9ecef;
    color: #212529 !important;
}


/*------------------------------ jQuery UI auto-complete ------------------------*/

   /* Version ultra-simple pour éviter les conflits */
    .input-container {
        border: 1px solid #ccc;
        border-radius: 4px;
        background: white;
        padding: 2px;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    
    .tag {
        display: inline-block;
        background: #007cba;
        color: white;
        padding: 3px 6px;
        margin: 2px;
        border-radius: 3px;
        font-size: 11px;
        vertical-align: middle;
    }
    
    .tag .remove {
        margin-left: 4px;
        cursor: pointer;
        font-weight: bold;
    }
    
    .searchInputClass {
        border: none;
        outline: none;
        padding: 6px;
        font-size: 14px;
        background: transparent;
        vertical-align: middle;
        width: 100%;
        display: inline-block;
    }
   
/* Forcer le fond blanc pour le dropdown d'autocomplétion */
/* Limiter la largeur du dropdown */
.ui-autocomplete {
    background-color: white !important;
    border: 1px solid #ccc !important;
    z-index: 9999 !important;
    max-width: 300px !important; /* Largeur maximale */
    width: auto !important; /* Largeur automatique selon le contenu */
}

.ui-autocomplete .ui-menu-item {
    background-color: white !important;
    white-space: nowrap !important; /* Évite les retours à la ligne */
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* ... si trop long */
}

.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-menu-item.ui-state-focus {
    background-color: #f0f0f0 !important;
    color: #333 !important;
}

/*------------------------------ slider -------------------------*/

/* ===== RESET CSS MINIMAL ===== */
        .slider-widget {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
            box-sizing: border-box;
        }
        
        .slider-widget *,
        .slider-widget *::before,
        .slider-widget *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        /* ===== SLIDER WIDGET - STYLES COMPLETS ===== */
        .slider-widget {
            position: relative;
            width: 100%;
            max-width: 500px;
            margin: 0px auto;
            padding: 0px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: transparent;
            clear: both;
        }
        
        .slider-widget .dual-range-slider {
            position: relative;
            height: 50px;
            margin: 0px 0;
            padding: 0;
            background: transparent;
        }
        
        /* Piste de fond */
        .slider-widget .slider-track {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            width: 100%;
            height: 8px;
            background: #e9ecef;
            border-radius: 4px;
            z-index: 1;
            border: none;
            outline: none;
        }
        
        /* Piste active (entre les deux curseurs) */
        .slider-widget .slider-range {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 8px;
            background: linear-gradient(90deg, #788487, #26a65b);
            border-radius: 4px;
            transition: all 0.3s ease;
            z-index: 1;
            border: none;
            outline: none;
        }
        
        /* Reset complet pour les inputs range */
        .slider-widget .range-input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            width: 100%;
            height: 8px;
            margin: 0;
            padding: 0;
            background: transparent;
            outline: none;
            border: none;
            cursor: pointer;
            pointer-events: none;
            z-index: 2;
        }
        
        .slider-widget .range-input:focus {
            outline: none;
            box-shadow: none;
            border: none;
        }
        
        /* Curseurs pour Webkit (Chrome, Safari, Edge) */
        .slider-widget .range-input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #788487;
            cursor: pointer;
            border: 3px solid white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            pointer-events: all;
            position: relative;
            z-index: 3;
            margin: 0;
        }
        
        .slider-widget .range-input::-webkit-slider-thumb:hover {
            transform: scale(1.15);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        
        .slider-widget .range-input::-webkit-slider-thumb:active {
            transform: scale(1.2);
            box-shadow: 0 0 0 8px rgba(120, 132, 135, 0.1);
        }
        
        /* Curseur max différent */
        .slider-widget .range-input.range-max::-webkit-slider-thumb {
            background: #26a65b;
        }
        
        .slider-widget .range-input.range-max::-webkit-slider-thumb:active {
            box-shadow: 0 0 0 8px rgba(38, 166, 91, 0.1);
        }
        
        /* Curseurs pour Firefox */
        .slider-widget .range-input::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #788487;
            cursor: pointer;
            border: 3px solid white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            pointer-events: all;
            position: relative;
            z-index: 3;
            margin: 0;
        }
        
        .slider-widget .range-input.range-max::-moz-range-thumb {
            background: #26a65b;
        }
        
        .slider-widget .range-input::-moz-range-track {
            width: 100%;
            height: 8px;
            cursor: pointer;
            background: transparent;
            border-radius: 4px;
            border: none;
            margin: 0;
            padding: 0;
        }
        
        .slider-widget .range-input::-moz-focus-outer {
            border: 0;
        }
        
        /* Suppression des styles par défaut pour IE/Edge */
        .slider-widget .range-input::-ms-thumb {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #788487;
            cursor: pointer;
            border: 3px solid white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        
        .slider-widget .range-input.range-max::-ms-thumb {
            background: #26a65b;
        }
        
        .slider-widget .range-input::-ms-track {
            background: transparent;
            border: none;
            color: transparent;
            height: 8px;
        }
        
        .slider-widget .range-input::-ms-fill-lower,
        .slider-widget .range-input::-ms-fill-upper {
            background: transparent;
            border: none;
        }
        
        /* Indicateurs de valeurs */
        .slider-widget .value-indicator {
            position: absolute;
            top: -15px;
            background: #788487;
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: 600;
            line-height: 1;
            transform: translateX(-50%);
            white-space: nowrap;
            opacity: 1;
            transition: all 0.3s ease;
            pointer-events: none;
            z-index: 4;
            margin: 0;
            border: none;
            box-shadow: none;
            text-decoration: none;
            font-family: inherit;
        }
        
        .slider-widget .value-indicator::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -2px;
            border: 2px solid transparent;
            border-top-color: #788487;
            width: 0;
            height: 0;
        }
        
        .slider-widget .value-indicator.max {
            background: #26a65b;
        }
        
        .slider-widget .value-indicator.max::after {
            border-top-color: #26a65b;
        }
        
        /* Labels des sliders */
        .slider-widget .slider-label {
            font-weight: 600;
            color: #495057;
            margin: 0 0 10px 0;
            padding: 0;
            font-size: 14px;
            line-height: 1.2;
            text-decoration: none;
            border: none;
            background: transparent;
            font-family: inherit;
            display: block;
        }
        
        /* Conteneur principal responsive */
        .slider-container {
            width: 85%!important;
           /* max-width: 400px;*/
            margin: 0 auto;
            padding: 0px;
        }
        
        /* Responsive */
        @media (max-width: 576px) {
            .slider-widget {
                margin: 15px auto;
                padding: 8px;
            }
            
            .slider-widget .range-input::-webkit-slider-thumb {
                width: 28px;
                height: 28px;
            }
            
            .slider-widget .range-input::-moz-range-thumb {
                width: 24px;
                height: 24px;
            }
            
            .slider-widget .value-indicator {
                font-size: 10px;
                padding: 1px 4px;
            }
            
            .slider-widget .slider-label {
                font-size: 13px;
            }
            
            .slider-container {
                padding: 15px;
            }
        }
        
        /* Styles pour les inputs hidden */
        .slider-widget input[type="hidden"] {
            display: none;
        }
        
        /* Protection finale contre les interférences */
        .slider-widget input[type="range"] {
            background: transparent;
            border: none;
            outline: none;
            box-shadow: none;
        }
        
        .slider-widget div {
            background: transparent;
        }
        
        .slider-widget .dual-range-slider::before,
        .slider-widget .dual-range-slider::after {
            display: none;
        }
    
/*------------------------------ list-----------------------*/
.adContainerClass {
	display:inline-block;
	max-width:22%;
	border-radius:12px;
	margin-right:18px;
	margin-bottom:18px;
	border:1px solid silver;	
	font-size:15px;
	background-color:#FFFFFF;
	min-height: 400px;
   background-color: #FFFFFF;
	}

/* Fond noir UNIQUEMENT sur la zone du carousel */
.adContainerClass .carousel-inner {
    aspect-ratio: 4/3;
    height: auto;
    background-color: #95a5a6; /* Fond noir uniquement ici */
    border-radius: 12px 12px 0 0; /* Arrondi en haut seulement */
}

.adContainerClass .carousel-item {
    aspect-ratio: 4/3;
    background-color: #95a5a6; /* Fond noir uniquement ici */
}

.adContainerClass .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center;
}

/* La zone de texte reste blanche */
.adContainerClass > div:not(.carousel) {
    background-color: #FFFFFF;
}

/* Classe pour images "presque" 4/3 */
.adContainerClass .carousel-item img.near-ratio {
    object-fit: cover !important; /* Étire légèrement */
}

.img-cover {
    object-fit: cover !important;
}

/* Tablettes (2 vignettes par ligne) */
@media (max-width: 992px) {
	.adContainerClass {
		max-width: 48%;
		margin-right: 10px;
	}
}

/* Smartphones (1 vignette par ligne) */
@media (max-width: 576px) {
	.adContainerClass {
		max-width: 100%;
		margin-right: 0;
		margin-left: 10px;
		margin-right: 10px;
	}
}
	
.adImageClass {
	border-radius:12px;
	overflow:hidden;
	padding:4px;
	}

/*------------- Title, subTitle, etc. -------------------*/
.titleClass {
	font-size:32px;
	}

/* Tablettes et mobiles (< 992px) */
@media (max-width: 991px) {
    .titleClass {
        font-size: 24px;
    }
}

/* Smartphones (< 768px) */
@media (max-width: 767px) {
    .titleClass {
        font-size: 20px;
        padding: 15px 10px;
    }
}

/* Très petits smartphones (< 576px) */
@media (max-width: 575px) {
    /* Réduire encore le titre */
    .titleClass {
        font-size: 18px;
    }
}

.subTitleClassXXX {
	color:#26a65b;
	font-size:18px;
	background-color:#ECF0F1;
	}	

.titleListClass {
    margin-top: 80px; /* En desktop */
	line-height: 1.2;
}

@media (max-width: 576px) {
    .titleListClass {
        margin-top: 0px; /* Réduit en mobile */
    }
}



.content-container {
    position: relative;
    z-index: 10;
	padding: 65px 0px 0px 0px;
	margin: 0px!important;
	}
	
/* État quand le contenu est dans le header */
.content-container.in-header {
    background: transparent;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
    padding: 0px!important;
	margin: 0px!important;
    border-radius: 10px;
    max-width: none;
	}
	
.fixed-header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
	}
	
	
/* ====================================
   RESPONSIVE MOBILE & TABLETTE
   ==================================== */

/* Tablettes et mobiles (< 992px) */
@media (max-width: 991px) {
    /* Formulaire de recherche - passer en colonnes empilées */
    .seBackground .row .col-md-4 {
        max-width: 100%;
        flex: 0 0 100%;
        margin-bottom: 15px;
    }
    
    /* Dropdowns en pleine largeur */
    .dropdown-toggle {
        width: 100%;
    }
    
    /* Sliders - augmenter la largeur */
    .slider-container {
        width: 95%!important;
    }
    
    /* Réduire taille du titre principal */
	 .selUnselTab {
        font-size: 13px;
	}
	
	.content-container {
		padding: 10px 0px 0px 0px!important;
	}
	
	#heroID {
        padding-top: 10px !important; /* Réduire le padding du hero */
    }

}

/* Smartphones (< 768px) */
@media (max-width: 767px) {
    /* Container avec padding réduit */
    .containerWithPaddingClass {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Hero section - réduire padding */
    #heroID .col-md-12 {
        padding-top: 20px!important;
    }
    
    /* Formulaire de recherche */
    
    /* Onglets du formulaire */
    .selUnselTab {
        font-size: 13px;
        padding: 10px 5px!important;
        line-height: 1.2;
    }
    
    /* Lignes du formulaire */
    .seBackground .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .seBackground .col-md-4 {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Labels des champs */
    .seBackground .row {
        font-size: 16px;
        font-weight: 600;
    }
    
    /* Inputs et dropdowns */
    .input-container {
        width: 100%;
    }
    
    .searchInputClass {
        font-size: 14px;
        padding: 10px;
    }
    
    .dropdown-menu {
        width: 100%!important;
        max-width: 100%!important;
    }
    
    /* Bouton de recherche */
    .ButtonMediumClass {
        width: 100%!important;
        max-width: 350px;
        font-size: 16px;
    }
    
    
    /* Sliders */
    .slider-container {
        width: 100%!important;
        padding: 0 5px;
    }
    
    .slider-widget {
        padding: 5px;
        margin: 10px 0;
    }
    
    .value-indicator {
        font-size: 10px!important;
        padding: 2px 4px!important;
    }
    
    /* Tags de l'autocomplete */
    .tag {
        font-size: 10px;
        padding: 2px 4px;
        margin: 1px;
    }
}

/* Très petits smartphones (< 576px) */
@media (max-width: 575px) {
   
    /* Onglets encore plus compacts */
    .selUnselTab {
        font-size: 12px;
        padding: 8px 3px!important;
    }
    
    /* Formulaire très compact */
    .seBackground {
        padding: 10px 5px!important;
    }
    
    .seBackground .row.text-left {
        font-size: 13px;
        padding-top: 8px!important;
    }
    
    /* Dropdowns et inputs */
    .btn-secondary {
        font-size: 13px;
        padding: 8px 10px;
    }
    
    .searchInputClass {
        font-size: 13px;
        padding: 8px;
    }
    
    /* Bouton de recherche plus petit */
    .ButtonMediumClass {
        font-size: 14px;
        padding: 10px 20px;
    }
    
    /* Logo du header */
    .inner-brand img {
        width: 140px!important;
    }
    
    /* Slider encore plus compact */
    .slider-widget .dual-range-slider {
        height: 40px;
    }
    
    .slider-widget .range-input::-webkit-slider-thumb {
        width: 20px!important;
        height: 20px!important;
    }
}

/* Corrections pour éviter débordements horizontaux */
@media (max-width: 991px) {
    .container-fluid {
        overflow-x: hidden;
    }
    
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/*-------------------------- SE --------------------*/
#listContainerID {
	
	}