#menuBtn{
    position:absolute;
    top:15px;
    left:13px;

    width:50px;
    height:52px;

    display:flex;
    flex-direction:column;   /* icône au-dessus, texte dessous */
    justify-content:center;
    align-items:center;
    gap:2px;

    padding:4px;

    border:none;
    border-radius:12px;

    background:#1f2937;
    color:white;
    z-index:10001;
}

#menuBtn span{
    font-size:10px;
    font-weight:600;
    line-height:1;
}

#menuBtn svg{
    width:22px;
    height:22px;
}



#clearMapBtn{
  position:absolute;

  width:32px;
  height:32px;

  border-radius:50%;

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

  padding:0;

  font-size:16px;
  line-height:1;
}


#compass{
    position:absolute;
    top:57px;
    right:10px;
    width:45px;
    height:45px;
    z-index:9999;
    border-radius:50%;
    overflow:hidden;
    background:rgba(0,0,0,0.35);
    backdrop-filter:blur(3px);
    transform-origin:center center;
}

/* 📱 Version mobile */
@media (max-width:768px){

    #compass{
        top:90px !important;      /* remonte la boussole */
        right:11px !important;     /* décale vers la droite si besoin */
        width:38px !important;    /* taille mobile */
        height:38px !important;
    }

}

#compass img{

  width:100%;

  height:100%;

  object-fit:contain;

}

#compass{

  transition:
    transform 0.2s ease;

}


#gpsLabel{
    position:absolute;
    top:283px;
    left:20px;

    color:black;
    font-size:11px;
    font-weight:bold;
    padding:4px;
    z-index:900;
}

/* Mobile */
@media (max-width:768px){

    #gpsLabel{
        top:310px;
        left:18px;
    }

}
/* Bouton STOP - Android */

body.android #stopBtn{
    left:25px !important;   /* à ajuster */
    top:200px !important;   /* à ajuster */
    width:20px !important;  /* si besoin */
    height:20px !important; /* si besoin */
}
/* GPS Label - Android */

body.android #gpsLabel{
    left:19px !important;   /* à ajuster */
    top:220px !important;    /* à ajuster */
}


#mapLayerMenu{

    display:none;

    position:absolute;

    top:20px;
    left:15px;

    width:190px;

    background:#1f4f63;

    border-radius:12px;

    overflow:hidden;

    z-index:10002;

    box-shadow:0 5px 15px rgba(0,0,0,.35);

}

#mapLayerMenu button{

    display:flex;
    align-items:center;

    gap:12px;

    width:100%;

    height:42px;

    padding:0 14px;

    border:none;

    background:#1f4f63;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    text-align:left;

}

#mapLayerMenu button:hover{

    background:#2c6e87;

}
#layerBtn img{
    width:25px;
    height:25px;
    top:150px;
}


#layerBtn{

    position:absolute;

    top:200px;
    left:18px;

    width:25px;
    height:25px;

    border:none;
    border-radius:50%;

    background:rgba(186, 189, 180, 0.7);

    backdrop-filter:blur(4px);

    color:white;

    font-size:200px;

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

    cursor:pointer;

    z-index:10001;

    transition:.2s;

}

#layerBtn:hover{

    background:#2d6c85;
    transform:scale(1.08);

}
/* =========================================================
   🧱 PANEL SECONDAIRE
   ========================================================= */

/*
  Cadres contenant :

  - boutons GPS
  - partage
  - traces
*/

.panel-frame{

  background:#3c6e71;

  padding:5px;

  border-radius:20px;

  margin-top:10px;

  box-shadow:0 8px 25px rgba(0,0,0,0.4);
}


/* =========================================================
   📱 VERSION COMPACTE PANEL
   ========================================================= */

/*
  Réduction taille panneaux
  pour mobile compact.
*/

.panel-frame{

  padding:3px !important;

  margin-top:4px !important;

  border-radius:10px !important;
}


/* =========================================================
   🔘 BOUTONS COMPACTS PANEL
   ========================================================= */

/*
  Boutons plus petits
  dans les panneaux UI.
*/

.panel-frame button{
  padding:6px 6px !important;
  font-size:12px !important;
  line-height:1.2 !important;
}
/* =========================================================
   ↔️ ESPACEMENT RÉDUIT
   ========================================================= */

/*
  Réduction espaces entre boutons.
*/

.panel-frame .btn-row{

  gap:4px !important;

  margin-bottom:3px !important;
}

.btn-row{

  display:grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:10px;
}