{{--
    Habillage des cartes Leaflet dans l'esprit des cartes Google : contrôles
    blancs arrondis, infobulles en fiche flottante, typographie et teintes de
    gris correspondantes.

    Purement visuel : aucune logique de carte ici. Partagé par la carte des
    transporteurs, le suivi de course et le tableau de bord, pour que les trois
    se ressemblent.
--}}
{{-- Roboto, la police des cartes Google. Deux graisses suffisent à l'habillage
     (texte des infobulles, symboles de zoom, mention des sources). --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">

<style>
    /* Google compose ses cartes en Roboto ; on retombe sur les polices système
       si elle n'est pas disponible. */
    .leaflet-container {
        font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    /* Contrôles de zoom : deux carrés blancs, ombre portée douce et pas de
       bordure, là où Leaflet dessine par défaut un bloc bordé de gris. */
    .leaflet-bar {
        border: none;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
        overflow: hidden;
    }
    .leaflet-bar a,
    .leaflet-touch .leaflet-bar a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        border: none;
        background: #fff;
        color: #666;
        font-size: 22px;
        font-weight: 400;
    }
    .leaflet-bar a:first-child { border-bottom: 1px solid #e6e6e6; }
    .leaflet-bar a:hover { background: #f5f5f5; color: #111; }
    .leaflet-bar a.leaflet-disabled { background: #fff; color: #cacaca; }

    /* Le thème tactile de Leaflet arrondit chaque bouton séparément, ce qui
       casse le bloc : l'arrondi appartient au conteneur. */
    .leaflet-touch .leaflet-bar a:first-child,
    .leaflet-touch .leaflet-bar a:last-child { border-radius: 0; }

    /* Infobulles : fiche blanche à coins arrondis, détachée du fond par son
       ombre, comme les fenêtres d'information de Google. */
    .leaflet-popup-content-wrapper {
        border-radius: 8px;
        box-shadow: 0 2px 7px 1px rgba(0, 0, 0, .3);
        padding: 1px;
    }
    .leaflet-popup-content {
        margin: 13px 15px;
        font-size: 13px;
        line-height: 1.5;
        color: #3c4043;
    }
    .leaflet-popup-content strong { color: #202124; }
    .leaflet-popup-tip { box-shadow: none; }

    .leaflet-container a.leaflet-popup-close-button {
        top: 5px;
        right: 5px;
        width: 28px;
        height: 28px;
        color: #7b7b7b;
        font: 300 20px/28px Roboto, Arial, sans-serif;
    }
    .leaflet-container a.leaflet-popup-close-button:hover {
        background: transparent;
        color: #202124;
    }

    /* Mention des sources : obligatoire, mais discrète comme chez Google. */
    .leaflet-control-attribution {
        background: rgba(255, 255, 255, .75);
        padding: 1px 6px;
        font-size: 10px;
        color: #5f6368;
    }
    .leaflet-control-attribution a { color: #5f6368; }
</style>