{#- Morceaux de HTML de la carte globale (genere_carte_globale.py).
    Les liens visent target="_top" : la carte est affichée dans un cadre
    de la page d'accueil, c'est toute la page qui doit changer. -#}

{% macro popup_voyage(titre, periode, km, lien) -%}
<div style="font-family:sans-serif; text-align:center; min-width:160px">
  <b style="font-size:14px; text-transform:capitalize">{{ titre }}</b><br>
  <span style="color:#777; font-size:12px">{{ periode }}{% if km %} · {{ "%.0f"|format(km) }} km{% endif %}</span><br>
  <a href="{{ lien }}" target="_top" style="display:inline-block; margin-top:10px; padding:7px 14px; border-radius:16px; background:#3498db; color:#fff; text-decoration:none; font-weight:bold">Voir le voyage</a>
</div>
{%- endmacro %}


{% macro popup_mymaps(nom, description) -%}
<div style="font-family:sans-serif; max-height:240px; overflow:auto">
  <b style="font-size:14px">{{ nom }}</b>
  {%- if description %}<div style="margin-top:6px; font-size:12px; color:#444">{{ description|liens_et_lignes }}</div>{% endif %}
</div>
{%- endmacro %}


{# Visible seulement quand la carte est ouverte seule (voir script_page). #}
{% macro bouton_accueil() -%}
<a id="retour-accueil" href="index.html" style="display:none; position:fixed; bottom:25px; left:15px; z-index:1000; padding:10px 16px; border-radius:10px; background:#333; color:#fff; font:bold 14px sans-serif; text-decoration:none; box-shadow:0 4px 10px rgba(0,0,0,.4)">🏠 Accueil</a>
{%- endmacro %}


{# Exécuté au chargement complet : folium crée la carte plus bas dans la page. #}
{% macro script_page(carte) -%}
window.addEventListener('load', function () {
    if (window.self !== window.top) return;
    {{ carte }}.scrollWheelZoom.enable();
    document.getElementById('retour-accueil').style.display = 'block';
});
{%- endmacro %}


{# Libellé d'un voyage dans la légende (sélecteur de calques). #}
{% macro legende(titre, couleur) -%}
<span style="display:inline-block; width:18px; height:4px; margin:0 6px 3px 0; border-radius:2px; vertical-align:middle; background:{{ couleur }}"></span><span style="text-transform:capitalize">{{ titre }}</span>
{%- endmacro %}