/* Masquer complètement l'encart d'itinéraire textuel par défaut en haut à droite */
.leaflet-routing-container {
    display: none !important;
}

/* Conteneur global du Profil Altimétrique */
#profil-topo-container {
    display: none; /* Masqué par défaut */
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 1000;
    background: #1e293b; /* Optionnel : tu peux mettre 'white' ou l'accorder au thème sombre de ta légende */
    color: #cbd5e1;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    font-family: Arial, sans-serif;
    border: 1px solid #475569;
}

/* En-tête du profil (Titre et Statistiques) */
.profil-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #475569;
    padding-bottom: 5px;
}

.profil-header h4 {
    margin: 0;
    font-size: 14px;
    color: #fff;
}

.profil-stats {
    font-size: 13px;
    color: #94a3b8;
}

.profil-stats span {
    font-weight: bold;
}

/* Zone réceptive pour Chart.js */
#zone-touch-profil {
    position: relative;
    height: 180px;
    width: 100%;
}

/* Style des boutons personnalisés Leaflet (Traceur et Téléchargement) */
.btn-icone-traceur {
    background-color: white;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    color: #1e2648;
    font-size: 22px;
}

.btn-icone-traceur:hover {
    background-color: #f4f4f4;
}

/* ==========================================================================
   BANDEAU DES SOUS-OUTILS DE ROUTING (EXTENSIBLE)
   ========================================================================== */
#gpx-download-floating-btn {
    position: absolute;
    /* 🎯 Alignement parfait à côté de ta barre d'outils (sous l'outil de tracé) */
    top: 248px;    
    left: 50px;   
    z-index: 1010;
    gap: 6px;
}

/* Style commun à tous les sous-boutons de cette barre */
#gpx-download-floating-btn {
    width: 30px;
    height: 30px;
    background-color: #f9e2c0;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#gpx-download-floating-btn:hover {
    background-color: #f4c582;
    transform: scale(1.05);
}

/* ==========================================================================
   BANDEAU D'AIDE AU TRACÉ (POSITION HAUT / ADAPTATIF)
   ========================================================================== */
#routing-help-toast {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;                   /* 📱 Prend la majorité de l'écran sur mobile */
    max-width: 500px;             /* 💻 Limite la largeur sur grand écran */
    background: rgba(30, 41, 59, 0.95); /* Thème sombre assorti */
    color: #cbd5e1;
    padding: 10px 16px;
    border-radius: 8px;           /* Coins légèrement arrondis */
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    z-index: 3000;                /* Passe au-dessus de tout */
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    border: 1px solid #475569;
    display: none;                /* Piloté par le JS */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Texte à l'intérieur du bandeau */
.help-toast-content {
    flex: 1;
}

/* Bouton de fermeture (petite croix) */
#close-help-toast {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

#close-help-toast:hover {
    color: #ffffff;
}