/* ==========================================================================
   1. FILTRES : STRUCTURE & LABELS
   ========================================================================== */
.mlg-filter-group { margin-bottom: 20px; }
.mlg-filter-title { font-weight: bold; margin-bottom: 8px; display: block; font-size: 14px; color: #333; }
.mlg-labels-container { display: flex; gap: 8px; flex-wrap: wrap; max-height: 95px; overflow-y: auto; overflow-x: hidden; padding-right: 5px; scrollbar-width: thin; scrollbar-color: var(--wpf-main-color) #f1f1f1; }
.mlg-labels-container::-webkit-scrollbar { width: 6px; }
.mlg-labels-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.mlg-labels-container::-webkit-scrollbar-thumb { background: var(--wpf-main-color); border-radius: 10px; }
.mlg-labels-container.collapsed { max-height: none !important; overflow: visible !important; }
.mlg-labels-container.collapsed .mlg-label:nth-child(n+6) { display: none !important; }
.mlg-label { padding: 6px 12px; border: 1px solid #ddd; border-radius: 20px; cursor: pointer; font-size: 13px; background: #fff; transition: all 0.2s; user-select: none; color: #444; }
.mlg-label:hover { border-color: var(--wpf-main-color) !important; color: var(--wpf-main-color) !important; }
.mlg-label.active { background: var(--wpf-main-color) !important; color: #fff !important; border-color: var(--wpf-main-color) !important; opacity: 1 !important; }
.mlg-label.no-results { opacity: 0.3; pointer-events: none; background: #f0f0f0 !important; cursor: not-allowed; }
.mlg-count { font-size: 10px; margin-left: 5px; opacity: 0.8; }
.mlg-show-more { color: var(--wpf-main-color); cursor: pointer; font-size: 12px; font-weight: bold; margin-top: 8px; display: inline-block; text-decoration: underline; }
/* --- 1bis. MODE LIGNE (CORRIGÉ SANS COLUMN FORCE) --- */
.mlg-filter-group.layout-line { position: relative; margin-bottom: 30px !important; }
.mlg-filter-group.layout-line::after { content: ""; position: absolute; bottom: -15px; left: 0; width: 100%; height: 1px; background: #e0e0e0; }
.mlg-filter-group.layout-line:last-of-type::after { display: none; }
.mlg-filter-group.layout-line .mlg-labels-container { display: flex !important; flex-wrap: wrap !important; gap: 2px !important; background: transparent !important; border: none !important; max-height: 250px; }
.mlg-filter-group.layout-line .mlg-label { width: 100% !important; border: none !important; border-radius: 6px !important; margin: 0 !important; padding: 8px 12px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; box-sizing: border-box; transition: 0.2s; background: transparent !important; color: #444; }
.mlg-filter-group.layout-line .mlg-label.active:first-child { background-color: transparent !important; color: var(--wpf-main-color) !important; font-weight: bold; }
.mlg-filter-group.layout-line .mlg-label.active:not(:first-child) { background-color: var(--wpf-main-color) !important; color: #fff !important; font-weight: bold; border-radius: 6px; }
.mlg-filter-group.layout-line .mlg-label:hover { background: #f9f9f9 !important; color: var(--wpf-main-color) !important; }
.mlg-filter-group.layout-line .mlg-count { opacity: 0.6; font-weight: normal; font-size: 12px; }
@media screen and (max-width: 768px) { .mlg-labels-container { max-height: 120px; } .mlg-label { padding: 8px 14px; font-size: 14px; } }
/* ==========================================================================
   2. LOADER STICKY & TRI RANDOM
   ========================================================================== */
/* Positionnement de la grille pour le loader */
#my-loop-grid { position: relative; min-height: 400px; }
/* Overlay du loader */
.mlg-loader-overlay {     position: absolute; top: 0; left: 0; width: 100%; height: 100%;     background: rgba(255, 255, 255, 0.7); z-index: 1000; display: none; pointer-events: none; }
/* Icône Sticky qui suit le scroll dans la grille */
.mlg-loader-icon {     position: sticky; top: 50vh; left: 50%; transform: translate(-50%, -50%);     width: 60px; height: 60px; border: 6px solid #f3f3f3;     border-top: 6px solid var(--wpf-main-color); border-radius: 50%;     animation: mlg-spin 1s linear infinite; margin: 0 auto;}
@keyframes mlg-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
/* Style pour un éventuel bouton de tri Random */
.mlg-tri-random-wrapper { margin-top: 10px; }
.mlg-btn-random { background: #fff; border: 1px solid var(--wpf-main-color); color: var(--wpf-main-color); padding: 5px 12px; border-radius: 15px; font-size: 12px; cursor: pointer; transition: 0.2s; }
.mlg-btn-random:hover { background: var(--wpf-main-color); color: #fff; }
/* ==========================================================================
   3. RESET, CALENDRIER & UI
   ========================================================================== */
.mlg-reset-wrapper { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
#mlg-reset-all { background: #f4f4f4; color: #666; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; transition: 0.2s; }
#mlg-reset-all:hover { background: var(--wpf-main-color) !important; color: #fff !important; }

#datepicker-container { margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px; min-height: 200px; }
#datepicker-container .ui-datepicker { display: block !important; width: 100% !important; background: #fff !important; border: none !important; }
#datepicker-container .ui-datepicker-header { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 0; background: none !important; border: none !important; }
#datepicker-container .ui-datepicker-title { order: 2; font-weight: bold; color: #333; }
#datepicker-container .ui-datepicker-prev, #datepicker-container .ui-datepicker-next { cursor: pointer; color: var(--wpf-main-color) !important; }
#datepicker-container .ui-datepicker-calendar td { padding: 4px 0 !important; position: relative !important; text-align: center; border: none !important; }
#datepicker-container .ui-datepicker-calendar td a { display: inline-block !important; width: 32px; height: 32px; line-height: 32px !important; color: #ccc !important; text-decoration: none; background: #fff !important; border-radius: 4px; border: none !important; }
#datepicker-container .ui-datepicker-calendar td.has-events a { color: var(--wpf-main-color) !important; font-weight: bold; border: none !important; }
#datepicker-container .ui-datepicker-calendar td.has-events a:hover, #datepicker-container .ui-state-active { background: var(--wpf-main-color) !important; color: #fff !important; opacity: 1 !important; border: none !important; outline: none !important; }
#datepicker-container .ui-datepicker-calendar td.selected-range { background-color: var(--wpf-main-color) !important; opacity: 0.2 !important; border: none !important; }
#datepicker-container .ui-datepicker-calendar td.selected-range a { color: #fff !important; background: transparent !important; font-weight: bold; opacity: 1 !important; border: none !important; }
#datepicker-container .start-date, #datepicker-container .end-date { background-color: var(--wpf-main-color) !important; opacity: 1 !important; border: none !important; }
#datepicker-container .start-date { border-radius: 16px 0 0 16px !important; }
#datepicker-container .end-date { border-radius: 0 16px 16px 0 !important; }
#datepicker-container .start-date.end-date { border-radius: 16px !important; }
#datepicker-container .start-date a, #datepicker-container .end-date a { color: #fff !important; border: none !important; }
.date-indicator { position: absolute; top: -2px; right: 0; font-size: 9px !important; font-weight: bold; color: var(--wpf-main-color) !important; background: #fff !important; border: 1px solid var(--wpf-main-color); border-radius: 50%; width: 16px; height: 16px; display: flex !important; align-items: center; justify-content: center; z-index: 10; pointer-events: none; }

#weekend-btn { border: 3px solid var(--wpf-main-color) !important; background: #fff; border-radius: 2em; position: relative; width: 4em; height: 2em; cursor: pointer; display: inline-block; transition: all 0.3s ease; }
#weekend-btn::before { content: ""; position: absolute; top: 50%; left: 8%; transform: translateY(-50%); width: 40%; height: 75%; background: var(--wpf-main-color); border-radius: 1em; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
#weekend-btn.checked::before { left: 52%; }

/* ==========================================================================
   4. MODULE ÉTOILES
   ========================================================================== */
.stars-container { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; }
.mlg-label[class*="CAT"] { border: none !important; background: transparent !important; padding: 2px 0 !important; color: #666 !important; display: inline-flex !important; align-items: center !important; width: auto !important; }
.mlg-label[class*="CAT"]:hover { color: var(--wpf-main-color) !important; opacity: 0.8; }
.mlg-label[class*="CAT"].active { font-weight: bold; color: #000 !important; background: transparent !important; }
.mlg-label[class*="CAT"]::before { color: #F3C717 !important; font-size: 20px; letter-spacing: 2px; margin-right: 10px; display: inline-block !important; visibility: visible !important; }
.CAT5::before, .CATCAT5::before { content: "★★★★★" !important; }
.CAT4::before, .CATCAT4::before { content: "★★★★☆" !important; }
.CAT3::before, .CATCAT3::before { content: "★★★☆☆" !important; }
.CAT2::before, .CATCAT2::before { content: "★★☆☆☆" !important; }
.CAT1::before, .CATCAT1::before { content: "★☆☆☆☆" !important; }
.CATNOCLA::before, .CATCATNOCLA::before { content: "non classé" !important; font-size: 14px !important; letter-spacing: 0 !important; color: #777 !important; }
.CATNOCLA span:first-child { display: none !important; }
.mlg-label[class*="CAT"].active::after { content: "✓"; margin-left: 10px; color: var(--wpf-main-color); }

/* ==========================================================================
   5. GRID SYSTEM & RESPONSIVE
   ========================================================================== */
#my-loop-grid { display: grid !important; gap: 20px !important; width: 100% !important; grid-template-columns: 1fr !important; }
#my-loop-grid > style { display: none !important; }
#my-loop-grid div.e-loop-item { display: flex !important; flex-direction: column !important; width: 100% !important; box-sizing: border-box !important; }

@media screen and (min-width:768px) { #my-loop-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media screen and (min-width:1540px) { #my-loop-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media screen and (min-width:1921px) {
    .container_related #my-loop-grid { grid-template-columns: repeat(3, 1fr) !important; } 
    #my-loop-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

@media screen and (max-width: 1024px) { 
    .butfiltersrwd, .butmaprwd { display: block !important; } 
    .sidemap.active-rwd { display: block !important; position: fixed !important; top: 0; left: 0; width: 100% !important; height: 100vh !important; z-index: 10000 !important; background: #fff; } 
    .containerfilter.active-rwd { display: flex !important; position: fixed !important; bottom: 0; left: 0; width: 100% !important; max-height: 80vh; overflow-y: auto; z-index: 10001 !important; background: #fff; padding: 20px; box-shadow: 0 -5px 15px rgba(0,0,0,0.2); flex-direction: column; } 
}

/* ==========================================================================
   6. CARTOGRAPHIE & POPUPS (MAPLIBRE)
   ========================================================================== */
#map { width: 100%; height: 100vh; min-height: 500px; }
.maplibregl-marker svg { transition: transform 0.2s ease-out; cursor: pointer; }
.marker-hovered svg { transform: scale(1.5); filter: drop-shadow(0 0 5px rgba(0,0,0,0.3)); }
.maplibregl-popup { max-width: 400px !important; }
.maplibregl-popup-content { border-radius: 6px; padding: 12px; box-shadow: 0 3px 14px rgba(0,0,0,0.2); }
.maplibregl-popup-content h4 { margin: 5px 0; font-size: 12px !important; text-transform: uppercase; color: var(--wpf-main-color) !important; font-weight: 600; }
.maplibregl-popup-content p { margin: 0; font-size: 11px; line-height: 1.3; color: #666; }
.maplibregl-popup-close-button { width: 24px !important; height: 24px !important; background: white !important; border-radius: 50% !important; border: none !important; color: var(--wpf-main-color) !important; font-size: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; cursor: pointer !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
.btn-voir-plus, .btn-geo-voir-plus { display: block; text-align: center; margin-top: 8px; padding: 8px 10px; background: var(--wpf-main-color) !important; color: #fff !important; text-decoration: none !important; border: none !important; border-radius: 4px; font-size: 11px; font-weight: bold; }

/* ==========================================================================
   7. DIVERS & BOUTONS ACTION
   ========================================================================== */
#load-more-btn { background-color: var(--wpf-main-color); color: #fff; border: none; padding: 12px 30px; border-radius: 25px; cursor: pointer; font-weight: 600; margin: 20px auto; display: inline-block; transition: 0.2s; }
#load-more-btn:hover { transform: scale(1.05); }
#map-container { position: relative; overflow: hidden; }
#map-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); color: white; display: none; align-items: center; justify-content: center; z-index: 9999 !important; pointer-events: none; }
#map-overlay.visible { display: flex !important; }
/* Désactive le loader spécifiquement dans l'éditeur Elementor */
.elementor-editor-active .mlg-loader-overlay { display: none !important; }
/* L'overlay couvre toute la grille */
.mlg-loader-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); z-index: 10; display: none; flex-direction: column; justify-content: center; align-items: center; }
.mlg-spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--wpf-main-color); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
.mlg-loader-text { font-weight: bold; color: #333; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* ==========================================================================
   8. RWD boutons filtres & map
   ========================================================================== */
#bloc_buts_rwd {    opacity: 0;    visibility: hidden;    transition: opacity 0.5s ease-in-out;}
#bloc_buts_rwd.is-visible {    opacity: 1;    visibility: visible;}