{#
  Capture avec zones superposées (dessinées par la page, pas gravées dans l'image).
  zoneActive : zone de l'emplacement → seule cette zone est affichée, sinon toutes les zones avec légende.
#}
{% macro capture(ecran, zoneActive = null) %}
    {% set zones = zoneActive ? [zoneActive] : ecran.zones %}
    <figure class="capture">
        <a class="capture-cadre" href="{{ path('app_image', {id: ecran.id}) }}" target="_blank" rel="noopener" title="Agrandir">
            <img src="{{ path('app_image', {id: ecran.id}) }}" alt="{{ ecran.titre }}" loading="lazy"
                 width="{{ ecran.largeur }}" height="{{ ecran.hauteur }}">
            {% for z in zones %}
                <span class="zone-rect {{ zoneActive ? 'zone-active' }}"
                      style="left:{{ z.x }}%;top:{{ z.y }}%;width:{{ z.largeur }}%;height:{{ z.hauteur }}%">
                    <span class="zone-num">{{ z.numero }}</span>
                </span>
            {% endfor %}
        </a>
        <figcaption>
            {{ ecran.titre }}{% if ecran.versionLogiciel %} · version {{ ecran.versionLogiciel }}{% endif %}
            {% if zones is not empty %}
                <ol class="legende-zones">
                    {% for z in zones %}<li><span class="zone-num">{{ z.numero }}</span> {{ z.libelle }}</li>{% endfor %}
                </ol>
            {% endif %}
        </figcaption>
    </figure>
{% endmacro %}