/*
[M]								m        a        p
*/

#map {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 20vh;   /* ou 20% si tu veux vraiment relatif au viewport */
}






@media screen and (max-device-width: 1023px) {
.leaflet-container .leaflet-control-mouseposition {
	background-color: rgba(75, 200, 175, 1);
	border-style:solid;
	border-color:white;
	border-width:2px;
	padding: 2px 5px 2px 5px;
	margin:0;
	color: #FFF;
	font-family: 'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
	font-size: 1em;
	border-radius: 5px;
}
}
@media screen and (min-device-width: 1024px) {
.leaflet-container .leaflet-control-mouseposition {
	background-color: rgba(75, 200, 175, 1);
	border-style:solid;
	border-color:white;
	border-width:2px;
	padding: 0 5px;
	margin:0;
	color: #FFF;
	font-family: 'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
	font-size: 2em;
	border-radius: 5px;
}
}


.leaflet-control-zoom {
	top:60px;
}


.leaflet-control-zoom-display {
    background-color:#4BC8AF;
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: block;
    text-align: center;
	vertical-align:middle;
    text-decoration: none;
    color: white;
	font-size: 2em;
	font-family: 'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
	border-radius:6px;
	border-width:2px;
	border-style:solid;
	border-color:white;
}





.leaflet-marker-icon.is-highlight {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
  z-index: 999999 !important;
}
.leaflet-marker-shadow.is-highlight {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}




/* 1) Nettoyage padding/margin Leaflet (comme tu faisais déjà) */
.leaflet-popup.ma-popup .leaflet-popup-content-wrapper{
  padding: 0 !important;
  border-radius: 18px !important;
}
.leaflet-popup.ma-popup .leaflet-popup-content{
  margin: 0 !important;
}

/* 2) IMPORTANT mobile: ne pas bloquer le drag de la carte */
.leaflet-popup.ma-popup{
  pointer-events: none;           /* le conteneur ne capte pas les gestures */
}
.leaflet-popup.ma-popup *{
  pointer-events: auto;           /* mais l'intérieur reste cliquable si besoin */
}

/* 3) S'assurer qu'il est au-dessus des tuiles/markers */
.leaflet-pane .leaflet-popup-pane .leaflet-popup.ma-popup{
  z-index: 2000;
}



.leaflet-marker-icon.ma-marker-pulse::after{
  z-index: 1; /* ou 1 selon rendu */
}






#mapSheet{
 
position: fixed;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom));
left: auto;
  
max-height: 55vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* scroll fluide iOS */

transform: translateY(140%); /* cachée */
transition: transform .22s ease;
z-index: 999999;

border: 3px solid white;
border-radius: 18px;

pointer-events: none;
max-width: calc(100vw - 20px);

}





#mapSheet.is-open{
transform: translateY(0);   /* visible */
pointer-events: auto;
max-height: 55vh;
overflow: visible;
-webkit-overflow-scrolling: touch; /* scroll fluide iOS */
}




#mapSheetContent::-webkit-scrollbar{
  width: 6px;
}

#mapSheetContent::-webkit-scrollbar-track{
  background: transparent;
}

#mapSheetContent::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.35);
  border-radius: 10px;
}

#mapSheetContent::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.55);
}

#mapSheetContent{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.45) transparent;
}





#mapSheetContent{
max-height: 55vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}


#sheetWrap{
  position: fixed;
  overflow:visible;
  right: 10px;
  z-index:1000;
}



#mapSheet .map-sheet__close{
  position: absolute;
  left: 0px;
  top: -30px;
  width: 24px;
  height: 24px;
  border: transparent;
  background: none;
  cursor: pointer;
  z-index: 10;
}







.ma-zoom-display{
background-color:#4BC8AF;
width: 24px;
height: 24px;
line-height: 24px;
display: block;
text-align: center;
text-decoration: none;
color: white;
font-size: 2em;
font-family: 'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
border-radius:6px;
border:2px solid white;
pointer-events: none;
}




.ma-mousepos{
pointer-events: none;
background-color:#4BC8AF;
border:2px solid white;
padding: 2px 5px 0px 5px;
margin:0;
color: #FFF;
font-family: 'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
font-size: clamp(1.5em, 1vw, 2em);
border-radius: 6px;
}









.walk-gpx-cursor {
  background: transparent !important;
  border: 0 !important;
}

.walk-gpx-cursor__img {
  width: 24px;
  height: 24px;
  background: url("/pictOpat/picture/walker.svg") center/contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}









.leaflet-control.elevation-control .elev-toggle {
  width: 60px;
  height: 60px;
  border:none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.leaflet-control.elevation-control .elev-toggle .elev-icon {
  display: block;
  width: 100%;
  height: 100%;
  background: url("/pictOpat/terrain/object/terrain.svg") center/60% no-repeat;
  border:none;
  margin-top:12px;
  margin-left:12px;
}

.leaflet-control.elevation-control .elev-widget {
  background:#00647D;
  padding:12px;
  border-radius:16px;
  border:3px solid #fff;
  box-shadow:0 8px 18px rgba(0,0,0,.3);
  overflow:hidden;
  display:none;
  
      position: fixed;
    right: 10px;
    bottom: 22vh;              /* ✅ ce que tu veux */
}
.leaflet-control.elevation-control.is-open .elev-widget {
  display:block;
}



  .leaflet-control.elevation-control .elev-widget {

    width: 560px;              /* ou min(...) si tu préfères */
    max-width: calc(100vw - 24px);
    max-height: 240px;
    z-index: 2000;             /* au-dessus des controls */
  }
  
  
    /* Le bouton reste au-dessus du panneau (évite qu'il soit "mangé") */
  .leaflet-control.elevation-control {
    z-index: 2000;
  }

  /* attribution reste tout en bas, mais passe sous le panneau */
  .leaflet-control-attribution {
    z-index: 500;
  }
  
  





.leaflet-control.elevation-control {
  position: relative;
}



/* ouvert */
.leaflet-control.elevation-control.is-open .elev-widget {
  display: block;
}




/* MOBILE: panneau en bas, plein écran, ne monte plus vers le haut */
@media (max-width: 768px) {
  .leaflet-control.elevation-control .elev-widget {

    left: 10px;
    right: 10px;


    /* taille */
    width: auto;
    max-width: none;
    max-height: 34vh;      /* ajuste si tu veux plus/moins */
    overflow: hidden;

    /* neutralise les trucs d’alignement */
    top: auto;
    transform: none;
  }


}