/* === LAYOUT PRINCIPAL === */
.bloc-carte-offres {width: 100%;}
.carte-offres-ts {display: flex; flex-direction: column; gap: 6rem; position: relative;}

/* === COLONNE FILTRES === */
.carte-offres-filtres {background-color: var(--couleur-background-dark); width: 100%;}
.carte-offres-filtres #offres-count-bar {margin-bottom: 1rem;}
.carte-offres-filtres #offres-count-num {display: block; font-size: 5rem; text-align: center; color: var(--couleur-cta); font-family: var(--fontSecondaire);}
.carte-offres-filtres #offres-count-label {display: block; font-size: 1.3rem; font-weight: 300; text-align: center;}
.carte-offres-filtres .filtres-titre {font-size: 1.6rem; display: block; font-weight: 600; margin: 0 auto; text-align: center; cursor: pointer; user-select: none; border: none; padding: 2rem; background-color: var(--couleur-background-light); position: relative; width: 100%; }
.carte-offres-filtres .filtres-titre::after {content: ' ▾'; padding-left: .6rem; }
.carte-offres-filtres .filtres-titre::before {content: ''; position: absolute; top: auto; bottom: -1.8rem; left: calc(50% - 2rem); width: 0; height: 0; border-style: solid; border-width: 0 2rem 2rem 2rem; border-color: transparent transparent var(--couleur-background-light) transparent; transform: rotate(180deg);}

/* Champs de filtres */
.liste-filtres-ts {display: none; flex-direction: column; gap: 1.2rem; background-color: var(--couleur-background-light); border-radius: 0 0 var(--border-radius) var(--border-radius); position: relative; padding: 2rem;}
.liste-filtres-ts .liste-filtre input, .liste-filtres-ts .liste-filtre select {width: 100%;}
.liste-filtres-ts .liste-filtre input:focus-visible, .liste-filtres-ts .liste-filtre select:focus-visible {outline-color: var(--couleur-cta); outline-style: solid;}
.liste-filtres-ts .liste-filtre label {font-size: 1.4rem; font-weight: 600;}
.liste-filtres-ts .liste-filtre label input, .liste-filtres-ts .liste-filtre label + select {margin-top:1rem;}

.liste-filtres-ts .liste-filtre label input[type="checkbox"] {margin-top: 0;}



/* Filtre labels */
.liste-filtres-ts .liste-filtre #filtre-labels {border: none; font-weight: 600; padding: 1rem 0; background-color: transparent; width: 100%; font-size: 1.4rem; cursor: pointer; text-align: left;}
.carte-offres-filtres .liste-filtre-labels {position: relative; width: 100%;}
.carte-offres-filtres .liste-filtre-labels .liste-checkbox-labels {display: none; flex-direction: column; gap: .4rem; padding: .5rem 0; margin-top: .6rem; z-index: 2; width: 100%;}
.carte-offres-filtres .liste-filtre-labels .liste-checkbox-labels.is-open {display: flex;}
.carte-offres-filtres .liste-filtre-labels .checkbox-label {display: flex; align-items: center; gap: .5rem;}
.carte-offres-filtres .liste-filtre-labels .checkbox-label input[type="checkbox"] {margin-right: 0.5em; width: auto; flex-shrink: 0; padding: 1rem; border-color: #fff;}
.carte-offres-filtres .liste-filtre-labels .checkbox-label input[type="checkbox"]:checked {background-color: var(--couleur-principale); border-color: var(--couleur-principale);}
.carte-offres-filtres .liste-filtre-labels .checkbox-label label {display: flex; align-items: center; gap: 0.5em; width: auto; margin: 0; font-size: 1.3rem; cursor: pointer; color: var(--couleur-texte-light); font-weight: 400;}

/* Filtre équipements hébergements */
.carte-offres-filtres .liste-filtre-equipements {position: relative; width: 100%;}
.carte-offres-filtres .liste-filtre-equipements .filtre-equipements-toggle {border: none; font-weight: 600; padding: 1rem 0; background-color: transparent; width: 100%; font-size: 1.4rem; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between;}
.carte-offres-filtres .liste-filtre-equipements .filtre-equipements-toggle i {transition: transform .25s; font-size: 1.2rem;}
.carte-offres-filtres .liste-filtre-equipements .filtre-equipements-toggle.is-open i {transform: rotate(180deg);}
.carte-offres-filtres .liste-filtre-equipements .liste-checkbox-equipements {display: none; flex-direction: column; gap: .4rem; padding: .5rem 0; margin-top: .4rem; max-height: 22rem; overflow-y: auto;}
.carte-offres-filtres .liste-filtre-equipements .liste-checkbox-equipements.is-open {display: flex;}
.carte-offres-filtres .liste-filtre-equipements .checkbox-label {display: flex; align-items: center; gap: .5rem;}
.carte-offres-filtres .liste-filtre-equipements .checkbox-label input[type="checkbox"] {margin-right: 0.5em; width: auto; flex-shrink: 0; padding: 1rem; border-color: #fff;}
.carte-offres-filtres .liste-filtre-equipements .checkbox-label input[type="checkbox"]:checked {background-color: var(--couleur-principale); border-color: var(--couleur-principale);}
.carte-offres-filtres .liste-filtre-equipements .checkbox-label label {display: flex; align-items: center; gap: 0.5em; width: auto; margin: 0; font-size: 1.3rem; cursor: pointer; color: var(--couleur-texte-light); font-weight: 400;}

/* Filtres checkboxes randonnées */
.carte-offres-filtres .liste-filtre-itineraire .liste-checkbox-itineraire {flex-direction: column; gap: .4rem; padding: .5rem 0; margin-top: .6rem;}
.carte-offres-filtres .liste-filtre-difficulte .liste-checkbox-difficulte {flex-direction: column; gap: .4rem; padding: .5rem 0; margin-top: .6rem;}
.carte-offres-filtres .checkbox-filtre {display: flex; align-items: center; gap: .5rem;}
.carte-offres-filtres .checkbox-filtre label {display: flex; align-items: center; gap: 0.5em; font-size: 1.3rem; cursor: pointer; font-weight: 400; color: var(--couleur-texte-light); margin: 0; width: auto;}
.carte-offres-filtres .checkbox-filtre input[type="checkbox"] {margin-right: 0.5em; width: auto; flex-shrink: 0; padding: 1rem; border-color: #ddd;}
.carte-offres-filtres .checkbox-filtre input[type="checkbox"]:checked {background-color: var(--couleur-cta); border-color: var(--couleur-cta);}
/* Range temps disponible */
.liste-filtre-temps .dual-range-wrap-outer {padding-top: 3.5rem; padding-bottom: .5rem;}

/* Bouton Halte & Repos / Aire pique-nique */
.carte-offres-filtres .liste-filtre-halte-repos {width: 100%;}
.btn-halte-repos {display: inline-flex; align-items: center; gap: .7rem; border: 2px solid var(--couleur-cta); background: transparent; color: var(--couleur-texte); font-size: 1.3rem; font-weight: 700; padding: 1.2rem 2rem; cursor: pointer; transition: background-color 200ms, color 200ms; width: 100%;}
.btn-halte-repos i {font-size: 1.3rem; color: var(--couleur-cta); transition: color 200ms;}
.btn-halte-repos.is-active {background-color: var(--couleur-cta); color: #fff;}
.btn-halte-repos.is-active i {color: #fff;}

/* === COLONNE LISTE === */
.carte-offres-liste {display: flex; flex-direction: column; width: 100%;}
.carte-offres-liste .liste-offres {flex: 1; padding: 2rem 0;}
.carte-offres-liste .liste-offres #offres_loader {gap: 2rem; flex-wrap: wrap;}

/* === BOUTONS TOGGLE MOBILE === */
.mobile-alternate {width: 100%; display: flex;}
.mobile-alternate button {border: none; background-color: var(--couleur-cta); color: #fff; border-radius: 0; text-transform: uppercase; padding: 1.5rem; width: 50%; font-size: 1.6rem; font-weight: 600; opacity: .7; cursor: pointer;}
.mobile-alternate button.active {opacity: 1;}

/* === CARTE (mobile : cachée par défaut) === */
.carte-offres-ts .map-container {width: 100%; left: 0; top: 5rem; position: absolute; transform: translateX(-110vw); transition: transform 300ms ease; z-index: 10; overflow: hidden;}
.carte-offres-ts .map-container.active {height: calc(100vh - 10rem); transform: translateX(0);}
.carte-offres-filtres.map-active {display: none;}
.carte-offres-liste.map-active {display: none;}
.carte-offres-ts .map-expand-btn {display: none;}



/* === CARDS OFFRES === */
.carte-offres-ts .bloc-offre {overflow: hidden; flex-direction: column; transition: all 300ms ease-in-out; width: 100%;}
.carte-offres-ts .bloc-offre a {text-decoration: none; flex-direction: column; height: 100%; background-color: #fff; position: relative;}
.carte-offres-ts .bloc-offre .offre-thumb {background-size: cover; background-position: center; height: 20rem; width: 100%; background-color: var(--couleur-background-light); background-repeat: no-repeat; border-radius: var(--border-radius); overflow: hidden;}
.carte-offres-ts .bloc-offre .titre-picto {row-gap: 0.5rem; flex: 1; column-gap: 1rem; align-items: baseline; flex-wrap: wrap;}

.carte-offres-ts .bloc-offre .classements-wrapper {position: absolute; top: 1rem; right: 1.5rem; flex-direction: column; align-items: flex-end; gap: .3rem;}
.carte-offres-ts .bloc-offre .container-fa-liste-offre {margin-top: auto; }
.carte-offres-ts .offre-contenu {padding: 1rem; flex-direction: column; flex-grow: 1;}
.carte-offres-ts .bloc-offre .commune-cat {font-weight: 400; color: var(--couleur-texte-light); font-size: 1.4rem; width: 100%; margin-top: .5rem; margin-bottom: .4rem; text-align: center; line-height: normal; margin-top: 0; }
.carte-offres-ts .bloc-offre .commune-cat i {margin-right: .3rem; font-size: 1.3rem;}
.carte-offres-ts .bloc-offre .offre-titre {font-size: 1.6rem; margin: 0 0 0.5rem; font-weight: 700; text-align: center;}
.carte-offres-ts .bloc-offre .classement-etoile i, .container-fa-liste-offre i {color: #fff; vertical-align: middle; font-size: 12px; text-align: center;}





/* === VIGNETTES RANDONNÉES === */
.rando-offre .offre-thumb {position: relative;}
/* Bouton voir le tracé — toggle iOS */
.carte-offres-ts .bloc-offre .btn-voir-trace {position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.9); border: none; color: var(--couleur-texte); font-size: 1.2rem; font-weight: 700; padding: .5rem .8rem .5rem .5rem; border-radius: 10rem; cursor: pointer; z-index: 2; line-height: 1; box-shadow: var(--box-shadow);}
.btn-trace-switch {display: inline-block; width: 3rem; height: 1.6rem; background: #ccc; border-radius: 10rem; position: relative; transition: background-color 200ms; flex-shrink: 0;}
.btn-trace-thumb {position: absolute; top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform 200ms;}
.btn-voir-trace[aria-pressed="true"] .btn-trace-switch {background: var(--couleur-cta);}
.btn-voir-trace[aria-pressed="true"] .btn-trace-thumb {transform: translateX(1.4rem);}
/* Picto bas-droite sur le thumb */
.carte-offres-ts .bloc-offre .rando-thumb-picto {position: absolute; bottom: 0; right: 1.5rem; padding: 1rem 1.3rem; z-index: 1; background-color: var(--couleur-principale); border-radius: 1rem 1rem 0 0;}
.carte-offres-ts .bloc-offre .rando-thumb-picto img {width: 100%; height: 2.8rem; object-fit: contain;}
/* Méta infos (distance / durée / difficulté) */
.rando-meta {gap: .6rem 1.2rem; flex-wrap: wrap; align-items: center; margin-top: .6rem;}
.carte-offres-ts .bloc-offre .rando-meta-item {display: flex; align-items: center; justify-content: center; text-align: center; gap: .4rem; font-size: 1.3rem; flex: 1;}
.carte-offres-ts .bloc-offre .rando-meta-item + .rando-meta-item {border-left: 1px solid #000;}
.rando-meta-picto {width: 2rem; height: 2rem; object-fit: contain; flex-shrink: 0;}
/* Badge difficulté */
.carte-offres-ts .bloc-offre .rando-meta-difficulte {padding: 0 .5rem;}
.carte-offres-ts .bloc-offre .rando-meta-difficulte span {border-radius: .5rem; padding: .2rem 1rem; font-size: 1.15rem; font-weight: 700; color: #fff; }
.rando-difficulte--tres-facile span {background: #8ed252;}
.rando-difficulte--facile span {background: #4caf50;}
.rando-difficulte--moyen span {background: #ff9800;}
.rando-difficulte--difficile span {background: #f44336;}
.rando-difficulte--tres-difficile span {background: #9c27b0;}


/* === INFINITE SCROLL === */
#offres-more-loader {position: relative; margin: 10px 0; left: 50%; transform: translateX(-50%); width: 80px;}
#offres-end-msg {width: 100%; text-align: center; font-size: 1.3rem; font-weight: 600; opacity: .4; padding: 2rem 0 1rem; margin: 0;}
#loader {position: relative; margin: 20px 0; left: 50%; transform: translateX(-50%); width: 120px;}

/* === MARKERS CARTE === */
.map-marker-wrap {display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.map-marker-body {width: 36px; height: 36px; border-radius: 50%; background: var(--mc, var(--couleur-cta)); display: flex; align-items: center; justify-content: center;}
.map-marker-body i {color: #fff; font-size: 14px;}

/* === LEGENDE CARTE (sidebar) === */
#carte-legende {display: none; margin-top: 4rem;}
#carte-legende.is-visible {display: block;}
#carte-legende.is-visible::before {content: 'Légende'; display: block; font-size: 1.4rem; font-weight: 600; margin-bottom: .5rem; font-style: italic;}
#carte-legende .map-legende-item {display: flex; align-items: center; gap: .7rem; padding: .3rem 0; font-size: 1.3rem; font-style: italic;}
#carte-legende .map-legende-dot {width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
#carte-legende .map-legende-dot i {color: var(--couleur-principale); font-size: 10px;}

/* === POPUP CARTE === */
.leaflet-container {z-index: 0;}
.popup-link {display: inline-flex; align-items: center; align-self: flex-start; margin-top: .8rem; font-size: 1.15rem; font-weight: 700; color: var(--couleur-principale); background-color: rgba(255,255,255,0.92); text-decoration: none; padding: .35rem 1rem; border-radius: 10rem; z-index: 1; position: relative;}
#map:not(.map-right) .leaflet-popup .leaflet-popup-content {aspect-ratio: 1/1; width: 20rem; position: relative; border: none;}
#map:not(.map-right) .leaflet-popup.popup-has-image .leaflet-popup-content::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5);}
#map:not(.map-right) .leaflet-popup.popup-no-image .leaflet-popup-content::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.35);}
#map:not(.map-right) .leaflet-popup .popup-content {height: 100%; padding: 2rem 1.5rem; display: flex; flex-direction: column; justify-content: end; background-size: cover; background-repeat: no-repeat;}
#map:not(.map-right) .leaflet-popup .popup-content .popup-link {color: var(--couleur-principale);}
#map:not(.map-right) .leaflet-popup .leaflet-popup-content-wrapper {border-radius: var(--border-radius); overflow: hidden;}
#map:not(.map-right) .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content {margin: 0;}
#map:not(.map-right) .leaflet-popup .popup-content h4, #map .leaflet-popup .popup-content h3, #map .leaflet-popup .popup-content p {color: #fff; margin: 0; font-family: 'Lato', sans-serif; z-index: 1;}
#map:not(.map-right) .leaflet-popup .popup-content h4 {font-size: 1.1rem; font-weight: 700; background-color: var(--couleur-principale); color: #fff; width: fit-content; max-width: 55%; padding: .1rem .6rem; margin-bottom: .4rem; border-radius: .4rem; word-break: break-word; overflow-wrap: break-word;}
#map:not(.map-right) .leaflet-popup .popup-content h3 {font-size: 1.6rem; font-weight: 700; line-height: normal;}
#map:not(.map-right) .leaflet-popup .popup-content p {top: 10px; left: 10px; right: 10px; font-size: 12px;}
#map:not(.map-right) .leaflet-popup a.leaflet-popup-close-button {color: #fff !important; z-index: 2; right: 1rem; top: 1rem;}
#map:not(.map-right) .leaflet-popup .leaflet-popup-content-wrapper {padding: 0;}
#map:not(.map-right) .leaflet-popup.popup-has-image .leaflet-popup-content-wrapper {background-color: rgba(0, 0, 0, 0.5);}
#map:not(.map-right) .leaflet-popup.popup-has-image .leaflet-popup-tip {background-color: rgba(0, 0, 0, 0.5);}
#map:not(.map-right) .leaflet-popup.popup-no-image .leaflet-popup-content-wrapper {background-color: var(--couleur-principale);}
#map:not(.map-right) .leaflet-popup.popup-no-image .leaflet-popup-tip {background-color: color-mix(in srgb, var(--couleur-principale) 65%, black);}

/* === DOUBLE RANGE SLIDER === */
.liste-filtre-distance .dual-range-wrap-outer {padding-top: 3.5rem; padding-bottom: .5rem;}
.dual-range-wrap {position: relative; height: 6px; margin: 0 1rem;}
.dual-range-track {position: absolute; inset: 0; background: #ddd; border-radius: 3px;}
.dual-range-track::after {content: ''; position: absolute; left: var(--range-min, 0%); right: calc(100% - var(--range-max, 100%)); height: 100%; background: var(--couleur-cta); border-radius: 3px;}
.dual-range-bubble {position: absolute; bottom: calc(100% + 1rem); transform: translateX(-50%); background: var(--couleur-cta); color: #fff; font-size: 1.3rem; font-weight: 700; padding: .4rem .9rem; border-radius: .4rem; white-space: nowrap; pointer-events: all; cursor: ew-resize; line-height: 1; user-select: none;}
.dual-range-bubble::after {content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--couleur-cta);}
.dual-range-bounds {display: flex; justify-content: space-between; font-size: 1.2rem; color: #999; margin-top: 1rem;}
.carte-offres-filtres .liste-filtre-distance input[type="range"] {background-color: transparent !important; padding: 0 !important; border: none !important;}
.carte-offres-filtres .liste-filtre-temps input[type="range"] {background-color: transparent !important; padding: 0 !important; border: none !important;}
.dual-range-wrap input[type="range"] {position: absolute; top: 50%; transform: translateY(-50%); width: calc(100% + 1.8rem); left: -.9rem; height: 1.8rem; appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none; outline: none;}
.dual-range-wrap input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--couleur-cta); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); pointer-events: all; cursor: ew-resize;}
.dual-range-wrap input[type="range"]::-moz-range-thumb {width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--couleur-cta); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); pointer-events: all; cursor: ew-resize;}

/* === HOVER === */
@media (hover: hover) {
    .carte-offres-ts .bloc-offre:hover {transform: translateY(-0.3rem);}
    .btn-halte-repos:not(.is-active):hover {background-color: var(--couleur-background);}
    .carte-offres-ts .map-expand-btn:hover {color: var(--couleur-cta);}
}

/* === TABLETTE === */
@media (min-width: 768px) {
    .carte-offres-ts .bloc-offre {width: calc(50% - 1rem);}
}

/* === DESKTOP 3 COLONNES === */
@media (min-width: 1025px) {
    .carte-offres-ts {display: grid; grid-template-columns: 28rem 1fr 35%; align-items: start; width: auto; gap: 4rem;}
    .carte-offres-filtres {position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;}
    .carte-offres-filtres::-webkit-scrollbar {display: none;}
    .carte-offres-liste {flex: 1; min-width: 0;}
    .carte-offres-ts .map-wrapper {position: sticky; top: 0; height: 100vh; width: 100%;}
    .carte-offres-ts .map-container {display: block; position: relative; top: 0; height: 100%; width: 100%; transform: none;}
    .carte-offres-ts .map-expand-btn {display: flex; position: absolute; top: 50%; left: -0.6rem; transform: translateY(-50%); z-index: 1000; width: 6rem; height: 10rem; border: none; background: #fff; clip-path: path('M 6 18 Q 6 10 12 16 L 42 45 Q 47 51 41 57 L 12 85 Q 6 90 6 82 Z'); cursor: pointer; align-items: center; justify-content: flex-start; padding-left: 1rem; color: var(--couleur-principale); font-size: 3.4rem; font-weight: 400; line-height: 1; transition: color 200ms ease;}
    .carte-offres-ts.map-expanded .carte-offres-filtres {display: none;}
    .carte-offres-ts.map-expanded .carte-offres-liste {display: none;}
    .carte-offres-ts.map-expanded .map-wrapper {grid-column: 1 / -1;}
    .carte-offres-liste.map-active .liste-offres {display: block;}
    .mobile-alternate {display: none;}
    .carte-offres-ts .offre-contenu {padding: 1.5rem 2rem;}
    .filtres-titre {cursor: auto;}
    .liste-filtres-ts {display: flex; border-radius: var(--border-radius);}
    .carte-offres-filtres .filtres-titre {margin: 0 0 2rem; background-color: transparent; padding: 0; cursor: auto;}
    .liste-filtres-ts::before {content: ''; position: absolute; top: 0; left: calc(50% - 2rem); width: 0; height: 0; border-style: solid; border-width: 0 2rem 2rem 2rem; border-color: transparent transparent #fff transparent; transform: rotate(180deg);}
    .carte-offres-liste .liste-offres {padding: 0;}
    .carte-offres-filtres .filtres-titre::before, .carte-offres-filtres .filtres-titre::after {display: none;}
    .carte-offres-ts .bloc-offre {width: 100%;}
}

@media (min-width: 1400px) {
    .carte-offres-ts {grid-template-columns: 30rem 1fr 35%; gap: 6rem;}
    .carte-offres-ts .bloc-offre {width: calc(50% - 1rem);}
    .liste-filtres-ts {padding: 5rem 2rem;}
}

@media (min-width: 1700px) {
    .carte-offres-ts .bloc-offre {width: calc(50% - 1.4rem);}
    .carte-offres-ts {grid-template-columns: 30rem 1fr 35%;}
    .carte-offres-ts .bloc-offre .offre-thumb { height: 30rem;}
}

@media (min-width: 2300px) {
    .carte-offres-ts .bloc-offre {width: calc(33.3% - 1.4rem);}
}

@media (min-width: 3000px) {
    .carte-offres-ts .bloc-offre {width: calc(25% - 1.5rem); max-width: 48rem;}
}