/* ==========================================================
   BASE DE LA PAGE ET CONTENEUR DE CARTE
   ========================================================== */
html, body {
  height: 100%;
  margin: 0;
}

#map {
  position: relative;
  width: 100%;
  height: 100%;
}

#top-logo {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  pointer-events: none;
}

#top-logo.is-clickable {
  pointer-events: auto;
  cursor: pointer;
}

#top-logo img{
  height: 30px;   /* ✅ ajuste ici la taille */
  width: auto;
  display: block;
}
/* ----------------------------------------------------------
   COMMANDES LEAFLET — STYLE GÉNÉRAL
   ---------------------------------------------------------- */
/* ==========================================================
   GLASSMORPHISM LEAFLET
   ========================================================== */

.leaflet-bar{
  border:none !important;
  box-shadow:none !important;
  background:none !important;
}

.leaflet-bar a{

  background:rgba(255,255,255,.25) !important;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(0,0,0,.5) !important;

  border-radius:50% !important;

  color:#111 !important;

  box-shadow:
    0 8px 20px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.5);

  transition:
    transform .15s ease,
    background .2s ease,
    box-shadow .2s ease;
}

/* Survol */

.leaflet-bar a:hover{

  background:rgba(255,255,255,.35) !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* Clic */

.leaflet-bar a:active{

  transform:scale(.96);
}

/* ----------------------------------------------------------
   CONTRÔLE DES COUCHES / FONDS DE CARTE
   ---------------------------------------------------------- */
/* ==========================================================
   BOUTON FONDS DE CARTE
   ========================================================== */

.leaflet-control-layers-toggle{

  width:40px !important;
  height:40px !important;

  background:
    rgba(255,255,255,.25) !important;

  backdrop-filter: blur(12px);

  border: 0px solid rgba(1,1,1,.5) !important;

  border-radius:50%;

  box-shadow:
    0 8px 20px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.5);
  background-image: none !important;
  position: relative;
}

/* Conteneur */

.leaflet-control-layers{

  background: rgba(255,255,255,.18) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(1,1,1,.5) !important;

  box-shadow:
    0 8px 20px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.5);
}

/* Liste ouverte */

.leaflet-control-layers-expanded{

  padding:10px !important;

  border-radius:8px;
}

/* Nouvelle icône SVG */
.leaflet-control-layers-toggle::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:30px;
    height:30px;

    transform:translate(-50%,-50%);

    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23111' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 4L4 8l8 4 8-4-8-4z'/%3E%3Cpath d='M4 12l8 4 8-4'/%3E%3Cpath d='M4 16l8 4 8-4'/%3E%3C/g%3E%3C/svg%3E");
}

.leaflet-control-layers input[type="radio"]{
    accent-color: #000000;
}

.leaflet-control-layers label{
  text-shadow: 1px 1px 0 #fff;
}

.leaflet-control-layers label.osm-offline-active > span{
  display:flex;
  align-items:center;
  gap:4px;
}

.leaflet-control-layers label.osm-offline-active > span > span{
  background:var(--app-main-color);
  color:#000;
  font-weight:700;
  padding:2px 6px;
  border-radius:6px;
}

.leaflet-control-layers label.osm-offline-active > span > span::after{
  content:" ✓";
  font-weight:700;
}

 /* ----------------------------------------------------------
   PANNEAU ET PROFIL D’ALTITUDE
   ---------------------------------------------------------- */
/* ==========================================================
   Elevation panel (Leaflet elevation)
   ========================================================== */
#elevation-panel{
  position: fixed;
  display: flex;
  flex-direction: column;

  bottom: 12px;
  left: 12px;

  width: 40vw;
  max-width: 700px;
  max-height: 340px;
  height: 35vh;

  background: transparent;
  border-radius: 8px;
  padding: 0;

  z-index: 10000;
  pointer-events: none;

  /* (ancien 2e bloc fusionné ici) */
  transition: transform .25s ease, opacity .2s ease;
  transform: translateY(0);
}

/* panneau masqué */
#elevation-panel.is-hidden{
  transform: translateY(110%);
  pointer-events: none;
}

/* Mobile/tablette - EX PIXEL*/
@media (max-width: 768px){
  #elevation-panel{
    max-width: 200px;
	height: 240px;
	max-height: 240px;
    bottom: 0;
    left: 0;
    border-radius: 0;
  }
}

/* Petit mobile */
@media (max-width: 480px){
  #elevation-panel{
    width: 100vw;
    height: 240px;
    max-height: 240px;
    left: 0;
    bottom: 0;
    max-width: none;
    border-radius: 0;
  }
}



/* ==========================================================
   ✅ ELEVATION – CORRECTION FLEX (profil = 100% du panel)
   ========================================================== */



    /* ----------------------------------------------------------
   CROIX CENTRALE ET CONTRÔLES PERSONNALISÉS
   ---------------------------------------------------------- */
/* Croix au centre */
    #crosshair{
      position: absolute;
      left: 50%;
      top: 50%;
      width: 60px;
      height: 60px;
      transform: translate(-50%, -50%);
      z-index: 500;
      pointer-events: none;
    }

    #crosshair::before{
      content:"";
      position:absolute;
      inset:0;

      --thickness: 2px;
      --gap-base: 28px;
      --arm-base: 12px;
      --gap: var(--gap-base);
      --arm: var(--arm-base);

      background:
        linear-gradient(#000 0 0) 50% calc(50% - (var(--gap)/2 + var(--arm)/2)) /
          var(--thickness) var(--arm) no-repeat,
        linear-gradient(#000 0 0) 50% calc(50% + (var(--gap)/2 + var(--arm)/2)) /
          var(--thickness) var(--arm) no-repeat,
        linear-gradient(#000 0 0) calc(50% - (var(--gap)/2 + var(--arm)/2)) 50% /
          var(--arm) var(--thickness) no-repeat,
        linear-gradient(#000 0 0) calc(50% + (var(--gap)/2 + var(--arm)/2)) 50% /
          var(--arm) var(--thickness) no-repeat;

      filter:
        drop-shadow(0 0 0 #fff)
        drop-shadow(0 0 0.8px #fff)
        drop-shadow(0 0 1.6px #fff);

      border-radius: 2px;
    }

    /* Bouton dossier */
    .leaflet-control-folder a{
      width:34px;height:34px;
      display:flex;align-items:center;justify-content:center;
      text-decoration:none;
    }
    .leaflet-control-folder svg{ width:24px;height:24px; fill:#111; }

    /* Bouton recentrer */
    .leaflet-control-recenter a{
      width:36px;height:36px;
      display:flex;align-items:center;justify-content:center;
      text-decoration:none;
    }
    .leaflet-control-recenter svg{ width:22px !important ;height:22px !important; fill:#111; }

    /* Fenêtre liste */
	.leaflet-control-tracklist {
	  position: absolute;
	  z-index: 3000;
	  display: none;

	  background: rgba(255,255,255,.18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

border: 1px solid rgba(1,1,1,.5);

box-shadow:
  0 8px 20px rgba(0,0,0,.15),
  inset 0 1px 0 rgba(255,255,255,.5);

border-radius:0px;

	  min-width: 240px;
	  max-width: calc(100vw - 70px);
height:40vh;
	  max-height: 40vh;

	  display: flex;
	  flex-direction: column;

	  overflow: hidden;

	  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	  font-size: 14px;
	}

.track-list-scroll{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.track-list-scroll::-webkit-scrollbar{
  width:8px;
}

.track-list-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.track-list-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.35);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(0,0,0,.2);
  border-radius:20px;
}

.track-list-scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.5);
}




/* ==========================================================
   FENETRE INFO
   ========================================================== */

.leaflet-control-infolist{
  position:absolute;

  background:rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(1,1,1,.5);

  box-shadow:
    0 8px 20px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.5);

  overflow:hidden;

  display:flex;
  flex-direction:column;

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:14px;

  width:min(380px, calc(100vw - 70px));
  height:50vh;
  max-height:50vh;

  z-index:5000 !important;
}

.info-list-scroll{
    flex:1;
    min-height:0;

    overflow-y:auto;
    overflow-x:hidden;

    padding:12px;

    box-sizing:border-box;
}

/* Même scrollbar que la liste des circuits */

.info-list-scroll::-webkit-scrollbar{
    width:8px;
}

.info-list-scroll::-webkit-scrollbar-track{
    background:transparent;
}

.info-list-scroll::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.35);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(0,0,0,.2);
    border-radius:20px;
}

.info-list-scroll::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.5);
}



	/* ==========================================================
   Recherche dans la liste des circuits
   ========================================================== */

.track-search-wrap{
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  gap: 8px;

    background:transparent;
  padding: 8px;

  border-bottom: 0px solid #000;

  z-index: 10;
}

.track-search{
  flex:1;
  box-sizing:border-box;
  padding:8px 10px;

  border:1px solid rgba(0,0,0,.35);
  border-radius:8px;

  background:rgba(255,255,255,.25);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  font-size:14px;
  outline:none;
}

.track-start-btn{
  width:38px;
  height:38px;
  flex:0 0 38px;

  border:1px solid rgba(0,0,0,.35);
  border-radius:8px;

  background:rgba(255,255,255,.25);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  color:#111;
  font-weight:700;
  cursor:pointer;
}

.track-start-btn.active{
  background: var(--app-main-color);
}

    .leaflet-control-tracklist .track-item{
      display:flex;
      width:100%;
      padding:8px 10px;
      border-radius:0px;
      cursor:pointer;
      user-select:none;
      color:#111;
      min-width: 0;
      box-sizing: border-box;
    }
    .leaflet-control-tracklist .track-item:hover{ background:#f0f0f0; }
    .leaflet-control-tracklist .track-item.active{ background:var(--app-main-color); }

    .leaflet-control-tracklist .track-title{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      min-width: 0;
      flex: 1 1 auto;
    }

.leaflet-control-tracklist .track-heading{
  padding: 8px 10px 4px;
  font-weight: 700;
  font-size: 18px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: default;
  user-select: none;
  margin-top: 15px;
}

.leaflet-control-tracklist .track-separator{
  height: 6px;
}

/* Contrôles Leaflet */
.leaflet-top,
.leaflet-bottom{
    z-index:2000;
}

/* Colonne de boutons à droite */
.leaflet-top.leaflet-right{
    z-index:1000 !important;
}

/* Fenêtres flottantes */
.leaflet-control-tracklist,
.leaflet-control-layerlist,
.leaflet-control-infolist{
    z-index:25000 !important;
}


    /* ----------------------------------------------------------
   POSITIONNEMENT DES CONTRÔLES ET REPÈRES KILOMÉTRIQUES
   ---------------------------------------------------------- */

    /* pastilles km */
    .km-badge{
      width:28px;
      height:28px;
      border-radius:50%;
      background:#ffffff;
      border:1px solid #555;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:14px;
      box-shadow:0 2px 6px rgba(0,0,0,.25);
      position: relative; /* nécessaire au halo ::after */
    }

    /* km inversé : jaune */
    .km-badge-inv{
      background:var(--app-main-color);
      border-color:#111;
    }

    /* km inversé : rouge (km 1 uniquement) */
    .km-badge-inv-last{
      background:#e53935;
      border-color:#111;
      color:#fff;
    }

    /* Pastille sélectionnée : pulsation (reste utile si tu sélectionnes plus tard par clic, etc.) */
    .km-badge.is-selected::after{
      content:"";
      position:absolute;
      inset:-6px;
      border-radius:50%;
      background: red;
      animation: kmPulse 1.1s ease-out infinite;
      pointer-events: none;
    }

    @keyframes kmPulse{
      0%{ transform: scale(0.6); opacity: 0.8; }
      60%{ transform: scale(1.4); opacity: 0.2; }
      100%{ transform: scale(1.8); opacity: 0; }
    }

    /* ----------------------------------------------------------
   ÉTATS DES BOUTONS DE PARCOURS
   ---------------------------------------------------------- */
/* Bouton inversion km actif */
    .leaflet-control-reversekm.is-active a{
      background-color: var(--app-main-color);
    }
    .leaflet-control-reversekm.is-active svg{
      fill:#111;
    }

	.leaflet-control-reversekm.is-disabled {
  opacity: 0.4;
  filter: grayscale(1);
}

.leaflet-control-reversekm.is-disabled a {
  cursor: default;
  background: #eeeeee;
}

.leaflet-control-reversekm.is-disabled svg {
  fill: #777777;
}

    /* Bouton ghost track */
    .leaflet-control-ghosttrack a{
      width:34px;height:34px;
      display:flex;align-items:center;justify-content:center;
    }
    .leaflet-control-ghosttrack svg{
      width:24px;height:24px;
      fill:#111;
    }
    .leaflet-control-ghosttrack.is-on a{
      background:var(--app-main-color);
    }

	.leaflet-control-ghosttrack.is-disabled {
  opacity: 0.4;
  filter: grayscale(1);
}

.leaflet-control-ghosttrack.is-disabled a {
  cursor: default;
  background: #eeeeee;
}

.leaflet-control-ghosttrack.is-disabled svg {
  opacity: 0.6;
}

    /* Bouton dossier actif */
    .leaflet-control-folder.is-active a{
      background-color:var(--app-main-color);
    }
    .leaflet-control-folder.is-active svg{
      fill:#111;
    }

    /* bouton profil actif */
    .leaflet-control-elevation-toggle.is-active a{
      background-color:var(--app-main-color);
    }

	.leaflet-control-elevation-toggle.is-disabled {
  opacity: 0.4;
  filter: grayscale(1);
}

.leaflet-control-elevation-toggle.is-disabled a {
  cursor: default;
  background: #eeeeee;
}

.leaflet-control-elevation-toggle.is-disabled svg {
  fill: #777777;
}

    .leaflet-control-elevation-toggle.is-active svg{
      fill:#111;
    }

    /* Bandeau résumé sous le profil */
    #track-summary{
      flex: 0 0 auto;
      pointer-events: none;
      background: #000;
      color: #ffffff;
      font-size: 16px;
      line-height: 1.2;
      padding: 6px 8px;
      border-radius: 0 0 0px 0px;
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (max-width: 768px){
      #track-summary{ border-radius: 0; font-size: 12px; text-align: center;}
    }

/* ✅ Bouton géolocalisation */
.leaflet-control-geolocate a{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.leaflet-control-geolocate svg{
  width:22px !important; height:22px !important;
  fill:#111;
}

/* État ON (watch actif) : liseré jaune */
.leaflet-control-geolocate.is-on a{
  box-shadow: inset 0 0 0 2px var(--app-main-color);
}

/* État ON + FOLLOW : fond jaune plein (comme tes autres boutons actifs) */
.leaflet-control-geolocate.is-on.is-follow a{
  background-color: var(--app-main-color);
  box-shadow: none;
}

/* ==========================================================
   ✅ Géolocalisation : pastille rouge pulsante (HTML)
   ========================================================== */

.loc-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e53935;
  border: 1px solid #000;
  position: relative;
  box-sizing: border-box;
}

.loc-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(229, 57, 53, 0.75);
  animation: locPulse 1.35s ease-out infinite;
  pointer-events: none;
}

@keyframes locPulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  70%  { transform: scale(1.7); opacity: 0.2; }
  100% { transform: scale(2.1); opacity: 0; }
}

@keyframes spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

/* Bouton orientation (N / rotation) */
.leaflet-control-rotatebtn a{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;        /* ✅ taille du “N” */
  font-weight:700;      /* optionnel, rend le N plus lisible */
  line-height:1;
}

/* Icône rotation */
.leaflet-control-rotatebtn svg{
  width:22px !important;           /* ✅ icône plus grande */
  height:22px !important;
  display:block;
  fill: currentColor;   /* conserve la coloration active */
}

/* état actif (rotation auto) : fond jaune comme tes autres boutons */
.leaflet-control-rotatebtn.is-active a{
  background-color: var(--app-main-color);
  color:#111;                 /* ✅ icône noire sur fond jaune */
}

.leaflet-popup-content button{
  width:32px;
  height:32px;
  border:none;
  border-radius:6px;
  background:#eee;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
}

.leaflet-popup-content button:hover{
  background:var(--app-main-color);
}

.leaflet-popup-content-wrapper{
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(2px);
}

.leaflet-popup-tip{
  background: rgba(255,255,255,0.5);
}


/* ----------------------------------------------------------
   LISTE DES PARCOURS, FAVORIS ET MODE HORS LIGNE
   ---------------------------------------------------------- */
/* favoris */
.track-item{
  gap:8px;
}

.track-fav{
  width:20px;
  min-width:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  user-select:none;

  color:transparent;
  -webkit-text-stroke:1px #000;

  font-size:16px;
}

.track-fav.is-fav{
  color:#000;
  -webkit-text-stroke:1px #000;
}


.track-fav svg{
  color:#000;
  width:18px;
  height:18px;
  display:block;
}

.track-offline{
  color:#000;
  -webkit-text-stroke:0;
}

.offline-btn-row{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:15px;
}

.offline-btn{
  min-width:90px;
  height:34px;

  border:none;
  border-radius:8px;

  background:#eee;
  color:#111;

  cursor:pointer;
  font-weight:600;
}

.offline-btn:hover{
  background:#ddd;
}

.offline-btn-primary{
  background:var(--app-main-color);
}

.offline-btn-primary:hover{
  filter:brightness(.95);
}

/* ----------------------------------------------------------
   FENÊTRE MODALE
   ---------------------------------------------------------- */
#app-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:50000;

  justify-content:center;
  align-items:center;

  background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);

  overflow:hidden;
}

#app-modal-content{
  width:min(600px,90vw);
  background:#fff;

  display:flex;
  flex-direction:column;

  max-height:85vh;

  box-shadow:
    0 10px 30px rgba(0,0,0,.35);
}

#app-modal-scroll{
  flex:1;
  overflow-y:auto;

  padding:24px;
  box-sizing:border-box;
}

#app-modal-footer{
  padding:12px;
  border-top:0px solid #ddd;
  background:#fff;
  display:none;
  text-align:center;
}

#app-modal-scroll::-webkit-scrollbar{
  width:8px;
}

#app-modal-scroll::-webkit-scrollbar-track{
  background:transparent;
}

#app-modal-scroll::-webkit-scrollbar-thumb{
  background:#c8c8c8;
  border-radius:20px;
}

#app-modal-scroll::-webkit-scrollbar-thumb:hover{
  background:#999;
}


#app-modal-content::-webkit-scrollbar{
  width:8px;
}

#app-modal-content::-webkit-scrollbar-track{
  background:transparent;
}

#app-modal-content::-webkit-scrollbar-thumb{
  background:#c8c8c8;
  border-radius:20px;
}

#app-modal-content::-webkit-scrollbar-thumb:hover{
  background:#999;
}

/* ----------------------------------------------------------
   PROFIL D’ALTITUDE PERSONNALISÉ
   ---------------------------------------------------------- */
/* ==========================================================
   PROFIL D'ALTITUDE MAISON
   ========================================================== */

#homemade-profile{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  pointer-events:auto;

  background:rgba(255,255,255,.25);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(0,0,0,.5);

  border-radius:0px 0px 0px 0px;

  box-shadow:
    0 8px 20px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.5);
}

/* SVG responsive */
#homemade-profile svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

/* Surface sous le profil */
.homemade-profile-area{
  fill:var(--app-main-color);
  fill-opacity:0.8;
  stroke:none;
}

/* Courbe principale */
.homemade-profile-line{
  fill:none;
  stroke:#000;
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

/* Ligne de base */
.homemade-profile-baseline{
  stroke:#111;
  stroke-width:1;
  stroke-opacity:0.55;
  vector-effect:non-scaling-stroke;
}

/* Repères horizontaux d'altitude */
.homemade-profile-grid{
  stroke:#111;
  stroke-width:1;
  stroke-opacity:0.12;
  vector-effect:non-scaling-stroke;
}

/* Textes */
.homemade-profile-label{
  fill:#111;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  font-weight:600;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:3px;
  stroke-linejoin:round;
}



/* Ligne verticale synchronisée dans le profil maison */
.homemade-profile-position{
  stroke:#111;
  stroke-width:3;
  stroke-dasharray:7 5;
  opacity:0.95;
  pointer-events:none;
  vector-effect:non-scaling-stroke;
}

/* Rouge lorsque le suivi GPS avec centrage est actif */
.homemade-profile-position.is-follow{
  stroke:#e53935;
}

/* ----------------------------------------------------------
   TÉLÉCHARGEMENT GPX ET ÉTATS DÉSACTIVÉS
   ---------------------------------------------------------- */
.leaflet-control-downloadgpx a{
  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:11px;
  font-weight:700;

  color:#111;
  text-decoration:none;
}

.leaflet-control-downloadgpx.is-disabled {
  opacity: 0.4;
  filter: grayscale(1);
}

.leaflet-control-downloadgpx.is-disabled a {
  position: relative;
  color: #777777;
  background: #eeeeee;
  cursor: default;
}

/* ----------------------------------------------------------
   APPARENCE DES ÉTATS ACTIFS
   ---------------------------------------------------------- */
/* ==========================================================
   GLASSMORPHISM : ETATS ACTIFS
   ========================================================== */

.leaflet-control-folder.is-active a,
.leaflet-control-ghosttrack.is-on a,
.leaflet-control-reversekm.is-active a,
.leaflet-control-elevation-toggle.is-active a,
.leaflet-control-geolocate.is-on.is-follow a,
.leaflet-control-info.is-active a,
.leaflet-control-rotatebtn.is-active a {
    background: var(--app-main-color) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,.5) !important;
    box-shadow:
        0 8px 20px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.35);
}


/* ----------------------------------------------------------
   ATTRIBUTION ET BOUTON D’INFORMATION
   ---------------------------------------------------------- */
/* ==========================================================
   BOUTON ATTRIBUTIONS
   ========================================================== */

.leaflet-control-attribution{
    display:none !important;
}


.leaflet-control-info a{
    width:22px;
    height:22px;

    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.leaflet-control-info svg{
    width:20px;
    height:20px;
    fill:#111;
}

.leaflet-touch .leaflet-bar a {
    width: 36px;
    height: 36px;
    line-height: 36px;
}

/* ----------------------------------------------------------
   ÉCHELLE VERTICALE
   ---------------------------------------------------------- */
/* ==========================================================
   Échelle verticale
   ========================================================== */

#vertical-scale{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);

    z-index:1500;

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    pointer-events:none;
}

#vertical-scale-label{
    position:absolute;

    right:-16px;   /* distance par rapport au crochet */
    top:50%;

    transform:
        translateY(-50%)
        rotate(90deg);

    transform-origin:center center;

    width:50px;

    text-align:center;

    font-size:12px;
    font-weight:600;

    color:#333;

    padding:2px 6px;

	text-shadow:
    1px 0 0 #fff,
   -1px 0 0 #fff,
    0 1px 0 #fff,
    0 -1px 0 #fff,
    1px 1px 0 #fff,
   -1px -1px 0 #fff,
    1px -1px 0 #fff,
   -1px 1px 0 #fff;
}

#vertical-scale-bar{
    position:relative;

    width:16px;
    height:80px;

    border-right:3px solid #333;
	    filter:
        drop-shadow(2px 0 0 #fff)
        drop-shadow(-2px 0 0 #fff)
        drop-shadow(0 2px 0 #fff)
        drop-shadow(0 -2px 0 #fff);

}

/* ----------------------------------------------------------
   QR CODE ET CONTENU DES MODALES
   ---------------------------------------------------------- */
.qr-container{
    text-align:center;
}

.qr-code{
    display:block;
    margin:0 auto;
    max-width:200px;
    height:auto;
}

.modal-standard{
    text-align:center;
}

.modal-standard .offline-btn-row{
    justify-content:center;
}

/* ----------------------------------------------------------
   ÉCHELLE DES PENTES
   ---------------------------------------------------------- */
#slope-scale{
    position:absolute;

    right:8px;
    bottom:60px;

    display:none;

    z-index:1500;
    pointer-events:none;

    width:40px;
    height:130px;
}

.slope-segment{
    width:4px;
    margin-left:auto;

    border-left:2px solid white;
    border-right:2px solid white;
}

.slope-black{
    height:30px;
    background:#000;
    border-bottom:2px solid white;
	border-top:2px solid white;
}

.slope-red{
    height:30px;
    background:#e53935;
    border-bottom:2px solid white;
}

.slope-blue{
    height:30px;
    background:#1976d2;
    border-bottom:2px solid white;
}

.slope-green{
    height:30px;
    background:#2e7d32;
	border-bottom:2px solid white;
}

.slope-label{
    position:absolute;

    right:10px;

    transform:
        translateY(-50%)
        rotate(90deg);

    transform-origin:center center;

    font-size:12px;
    font-weight:600;
    color:#333;

    text-shadow:
        1px 0 0 #fff,
       -1px 0 0 #fff,
        0 1px 0 #fff,
        0 -1px 0 #fff,
        1px 1px 0 #fff,
       -1px -1px 0 #fff,
        1px -1px 0 #fff,
       -1px 1px 0 #fff;
}

.slope-9{ top:30px; }
.slope-6{ top:62px; }
.slope-3{ top:94px; }
.slope-0{ top:126px; }

/* ----------------------------------------------------------
   LISTE DES COUCHES HORS LIGNE ET ZONES TACTILES
   ---------------------------------------------------------- */
.leaflet-control-layerlist{
    min-width:200px;
    width:200px;
    height:auto;
    max-height:none;
}

.leaflet-control-layerbutton.is-active a{
    background: var(--app-main-color) !important;
}

.leaflet-control-layerlist .track-item.osm-offline-active{
    font-weight: 700;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.leaflet-bar a,
.track-item,
.track-start-btn,
button{
    -webkit-tap-highlight-color: transparent;
}