.open-street-map-container {
  position: relative;
  margin-bottom: 1em;
}

#open-street-map-filter {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9999;
  background: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#osm-filters{
  position: absolute;
  padding: 2rem;
  border-top-left-radius: 25px;
  background-color: #fff;
  bottom: 0;
  right: 0;
  left: auto;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 60%;
  overflow-y: scroll;
}

#osm-filters #osm-terms-filters{
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

#osm-filters .osm-checkbox > input[type="checkbox"]{
  display: none;
}

#osm-filters .osm-checkbox > input:disabled {
    cursor: not-allowed;
}

#osm-filters .osm-checkbox > input:disabled + label {
    display: none; 
}

#osm-filters .osm-checkbox > label{
  position: relative;
  padding: .7rem 1.2rem;
  background-color: #fff;
  color: var(--color);
  border: 1px solid;
  border-color: var(--color);
  border-radius: 50px;
  transition: all .3s ease;
  font-size: .8rem;
}

#osm-filters .osm-checkbox > label:after{
  content : "";
  opacity: 0;
  transition: all .3s ease;
}

#osm-filters .osm-checkbox > input[type="checkbox"]:checked + label{
  background-color: var(--color);
  color : #fff;
  padding-right: 3rem;
}

#osm-filters .osm-checkbox > input[type="checkbox"]:checked + label:after{
  border: solid #fff;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-width: 0 0 2px 2px !important;
  height: 6px;
  width: 12px;
  margin: 17px 0 0 14px;
  top: -3px;
  opacity: 1;
}

.osm-search{
  position: relative;
}

.osm-search > .search-form{
  display: flex;
}

.osm-search input{
  outline: none;
}

#osm-city-search{
  border: 0;
  border-bottom: 1px solid #000;
  border-radius: 0;
  padding: .5rem 0;
}

.suggestions {
  position: absolute;
  background: #fff;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  width: 100%;
  border: 0px solid #ccc;
}

.suggestions.active{
  border: 1px solid #ccc;
}

.suggestions div {
  padding: 5px 10px;
  cursor: pointer;
}

.suggestions div:hover {
  background: #f0f0f0;
}

#osm-geolocate-btn{
  padding: 0;
  border: 0;
}

#osm-geolocate-btn svg{
  width : 1.2rem;
}

#osm-geolocate-btn:hover, #osm-geolocate-btn:focus{
  background-color: transparent;
}

.osm-radius{
  display: flex;
  align-items: center;
  gap: .7rem;
}

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 200px;
  background-color: #fff;
}
input[type=range]:focus {
  outline-color: #f8b195;
  background-color: #fff;
}
input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: #999;
}
input[type=range]::-moz-range-track {
  -moz-appearance: none;
  appearance: none;
  height: 3px;
  background: #999;
}
input[type=range]::-ms-track {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 3px;
  background: #999;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #444;
  background-color: #444;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: relative;
  bottom: 8px;
  background-size: 50%;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
  cursor: grab;
}
input[type=range]::-webkit-slider-thumb:active {
  cursor: grabbing;
}
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #f8b195;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: relative;
  bottom: 8px;
  background-size: 50%;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
  cursor: grab;
}
body input[type=range]::-moz-range-thumb:active {
  cursor: grabbing;
}
body input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #f8b195;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: relative;
  bottom: 8px;
  background-size: 50%;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
  cursor: grab;
}
body input[type=range]::-ms-thumb:active {
  cursor: grabbing;
}

.leaflet-popup-content-wrapper{
  font-family : var(--e-global-typography-text-font-family);
  font-size: .9rem;
}

.leaflet-popup-content-wrapper b{
  font-weight: bold;
}

.leaflet-popup-content-wrapper .title{
  font-family : var(--e-global-typography-primary-font-family);
  font-size : 1.2rem;
  color : var(--title-color);
}

.leaflet-popup-content-wrapper .social-networks{
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.leaflet-popup-content-wrapper .websites a{
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  color : var(--title-color);
}

.leaflet-popup-content-wrapper .websites,
.leaflet-popup-content-wrapper .social-networks{
  margin-top : 1rem;
}

.leaflet-popup-content-wrapper .websites svg{
  width : 0.8rem;
}

.leaflet-popup-content-wrapper .websites svg path{
  fill : inherit;
}

.leaflet-popup-content-wrapper .social-networks svg{
  width : 1.5rem;
}

.leaflet-popup-content-wrapper .websites svg:focus path,
.leaflet-popup-content-wrapper .social-networks svg:hover path,
.leaflet-popup-content-wrapper .social-networks svg:focus path{
  fill : var(--title-color, --e-global-color-accent);
}

.leaflet-popup-content-wrapper .address{
  font-size: .9rem;
  text-transform: uppercase;
}


/* Le Switch */

.osm-view-switch {
  position: absolute;
  top : 2rem;
  right: 2rem;
  z-index: 5999;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.osm-view-switch button {
  cursor: pointer;
  border: 1px solid var(--e-global-color-primary);
  background: #fff;
  border-radius: 8px;
  padding: 0.7rem 1rem 0.6rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--e-global-color-primary);
}

.osm-view-switch button.active {
  background: var(--e-global-color-primary);
  color: #fff;
  border-color: var(--e-global-color-primary);
  display: none;
}

.osm-view-switch button.active,
.osm-view-switch button:hover,
.osm-view-switch button:active {
  background: var(--e-global-color-primary);
  color: #fff;
  border-color: var(--e-global-color-primary);
}

.osm-view-switch button svg{
  fill: var(--e-global-color-primary);
}

.osm-view-switch button.active svg,
.osm-view-switch button:hover svg,
.osm-view-switch button:active svg{
  fill: #fff;
}

/* La Grille de liste */
#osm-list-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  background-color: #eee;
  padding: 7rem 2rem 2rem;
  position: relative;
  z-index: 5500;
}

.osm-list-card {
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-radius: 4px;
  height: 100%;
}

.osm-list-card .view-on-map {
  margin-top: 15px;
  color: var(--title-color);
  border : 1px solid var(--title-color);
  padding: 5px 10px;
  font-size: 0.8em;
  cursor: pointer;
}

.osm-list-card .view-on-map:hover,
.osm-list-card .view-on-map:focus{
  background-color: var(--title-color);
  color : #fff;
}

.osm-list-card b{
  font-weight: bold;
}

.osm-list-card .title{
  font-family : var(--e-global-typography-primary-font-family);
  font-size : 1.2rem;
  color : var(--title-color);
}

.osm-list-card .description{
  margin-top: 1rem;
}


.osm-list-card .social-networks{
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.osm-list-card .websites a{
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  color : var(--title-color);
}

.osm-list-card .websites,
.osm-list-card .social-networks{
  margin-top : 1rem;
}

.osm-list-card .websites svg{
  width : 0.8rem;
}

.osm-list-card .websites svg path{
  fill : inherit;
}

.osm-list-card .social-networks svg{
  width : 1.5rem;
}

.osm-list-card .websites svg:focus path,
.osm-list-card .social-networks svg:hover path,
.osm-list-card .social-networks svg:focus path{
  fill : var(--title-color, --e-global-color-accent);
}

.osm-list-card .address{
  font-size: .9rem;
  text-transform: uppercase;
}

.mobile-only {
    display: none!important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: inherit!important;
    }

    .mobile-hidden {
        display: none;
    }

    #osm-filters {
        position: fixed;
        top: auto;
        bottom: 0;
        left: auto; /* Caché à gauche */
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100%;
        background: #fff;
        z-index: 9999;
        padding: 20px;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        transition: right 0.3s ease;
        overflow-y: auto;
        max-height: 90%;
    }

    /* Classe pour afficher les filtres */
    #osm-filters.active {
        right: 0;
    }

    /* Bouton fermer à l'intérieur du panneau */
    #osm-close-filters {
        position: absolute;
        right: 10px;
        top: 10px;
        background: none;
        border: none;
        font-size: 20px;
        font-weight: bold;
    }

    /* Overlay pour griser la carte quand les filtres sont ouverts (optionnel) */
    .osm-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 9998;
        display: none;
    }
    .osm-overlay.active {
        display: block;
    }
}