#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:fixed;
    top:72px;
    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;
    transition:transform 0.2s ease;
}

/* 📱 MOBILE */
@media (max-width:768px){
    #compass{
        top: 73px !important;
        right:12px !important;
        width:38px !important;
        height:38px !important;
    }
}
#compass img{

  width:100%;

  height:100%;

  object-fit:contain;

}

#compass{

  transition:
    transform 0.2s ease;

}


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

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

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

    #gpsLabel{
        top:305px;
        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;
}

/* CROIX RETOUR A COTE DU MENU SUR PC */
@media (min-width:769px){
    #btnRetour{
        display:flex !important;
        position:fixed !important;
        top:70px !important;
        left:auto !important;
        right:120px !important;
        left:auto !important;
        width:44px !important;
        height:44px !important;
        padding:0 !important;
        align-items:center !important;
        justify-content:center !important;
        background:#d9494a !important;
        color:white !important;
        border:1px solid rgba(151,211,119,.85) !important;
        border-radius:12px !important;
        font-size:24px !important;
        font-weight:700 !important;
        z-index:2147483647 !important;
        text-decoration:none !important;
    }
}
/* =======================================================
   CROIX RETOUR — MOBILE
======================================================= */

@media (max-width:768px){
    #btnRetour{
        display:flex !important;
        position:absolute !important;
        top:10px !important;
        left:10px !important;
        right:auto !important;
        left:auto !important;
        bottom:auto !important;

        width:44px !important;
        height:44px !important;
        padding:0 !important;

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

        background:#d9494a !important;
        color:#fff !important;

        border:1px solid #d9494a !important;
        border-radius:12px !important;

        font-size:24px !important;
        font-weight:700 !important;

        z-index:2147483647 !important;
        text-decoration:none !important;
        box-sizing:border-box !important;
    }
}
.header{
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}
@media (max-width:768px){
    .pageInscription{
        position:relative !important;
        top:30px !important;
    }
}
/* ===== POPUP BÉNÉVOLE ===== */

.leaflet-popup.benevole-popup .leaflet-popup-content-wrapper {
    background: #f7f7f7 !important;
    color: #222 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.25) !important;
    width: 320px !important;
}

.leaflet-popup.benevole-popup .leaflet-popup-tip {
    background: #f7f7f7 !important;
}

.leaflet-popup.benevole-popup .leaflet-popup-content {
    width: 284px !important;
    margin: 16px 18px !important;
    color: #222 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

.leaflet-popup.benevole-popup .leaflet-popup-close-button {
    color: #555 !important;
    font-size: 22px !important;
    padding: 8px 10px !important;
}

.benevolePopupTitle {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}
/* =========================================================
   POPUP BÉNÉVOLE — fond clair
   ========================================================= */

.leaflet-popup.benevole-popup,
.leaflet-popup.benevole-popup .leaflet-popup-content-wrapper,
.leaflet-popup.benevole-popup .leaflet-popup-content,
.leaflet-popup.benevole-popup .benevolePopupContent {
    background: #f7f7f7 !important;
    color: #222 !important;
}

.leaflet-popup.benevole-popup .leaflet-popup-content-wrapper {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;

    border-radius: 18px !important;

    box-shadow: 0 4px 18px rgba(0,0,0,.25) !important;

    padding: 0 !important;
}

.leaflet-popup.benevole-popup .leaflet-popup-content {
    width: 284px !important;
    margin: 16px 18px !important;

    font-size: 15px !important;
    line-height: 1.45 !important;
}

.leaflet-popup.benevole-popup .leaflet-popup-tip {
    background: #f7f7f7 !important;
}

.leaflet-popup.benevole-popup .leaflet-popup-close-button {
    background: transparent !important;
    color: #555 !important;
    font-size: 22px !important;
}

.benevolePopupContent {
    background: #9acc9e !important;
    color: #222 !important;
}

.benevolePopupTitle {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}
#pointBtn,
#shareBtn {
    display: none !important;
}
#clearBtn,
#pointBtn,
#journalBtn,
#shareBtn {
    display: none !important;
}
#sharePopup {
    display: none !important;
}
/* ===== CARTE AGRANDIE ===== */

#map{
    height:calc(100vh - 55px) !important;
}

@media (max-width:768px){
    #map{
        height:calc(100vh - 55px) !important;
    }
}
#clearMapBtn {
    opacity:0 !important;
    pointer-events:none !important;
    width:0 !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
}
/* =====================================================
   📱 BANDEAU TRACES — MOBILE
   ===================================================== */
/* =====================================================
   📱 BANDEAU TRACES MOBILE
   ===================================================== */
@media (max-width:700px){

    #tracePanel{
        position:fixed !important;
        top:72px !important;
        left:51% !important;
        right:auto !important;

        width:300px !important;
        max-width:calc(100% - 20px) !important;

        height:29px !important;
        min-height:29px !important;
        line-height:29px !important;

        transform:translateX(-50%) !important;

        padding:2px !important;
        margin:0 !important;

        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;

        z-index:2147483647 !important;
        box-sizing:border-box !important;

        border-radius:9px !important;
    }

    #tracePanel .btn-row{
        display:flex !important;
        flex-wrap:nowrap !important;
        width:100% !important;
        height:100% !important;
        gap:2px !important;
        margin:0 !important;
        padding:0 !important;
    }

    #tracePanel .btn-row button{
        flex:1 1 0 !important;
        width:0 !important;
        min-width:0 !important;

        height:32px !important;
        min-height:32px !important;

        margin:0 !important;
        padding:0 2px !important;

        font-size:9px !important;
        line-height:32px !important;

        white-space:nowrap !important;
        overflow:hidden !important;

        box-sizing:border-box !important;
        border-radius:8px !important;
    }
}
@media (min-width:701px){

    #tracePanel{
        top:68px !important;
    }

}