{% load static %}
  <!-- ══ JOOL MONITOR ══ -->
  <section class="section s-monitor" id="monitor">
    <div class="section-inner">
      <div class="two-col flip">
        <div class="reveal">
          <span class="section-tag tag-white">
            <span class="material-icons-round" style="font-size:13px;">flight</span>
            Cartographie haute résolution
          </span>
          <h2 class="section-title" style="color:var(--white);">Voyez votre terrain avec <em>une précision</em> nouvelle.

          </h2>
          <p class="section-body-light">JooL Monitor transforme l’imagerie drone en lecture terrain exploitable pour compter, mesurer, cartographier et contrôler vos parcelles avec un niveau de détail prêt à l’action.</p>
          <div class="uc-stack">
            <div class="uc-row uc-row-dark">
              <span class="uc-num uc-num-light">01</span>
              <div class="uc-body">
                <div class="uc-title" style="color:var(--white);">Comptage intelligent</div>
                <div class="uc-desc-light">Une lecture rapide des densités, manquants et répartitions sur chaque parcelle.
                </div>
              </div>
            </div>
            <div class="uc-row uc-row-dark">
              <span class="uc-num uc-num-light">02</span>
              <div class="uc-body">
                <div class="uc-title" style="color:var(--white);">Cartographie avancée</div>
                <div class="uc-desc-light"> Produisez des orthomosaïques, modèles 3D et délimitations précises de vos surfaces.</div>
              </div>
            </div>
            <div class="uc-row uc-row-dark">
              <span class="uc-num uc-num-light">03</span>
              <div class="uc-body">
                <div class="uc-title" style="color:var(--white);">Contrôle visuel  continu</div>
                <div class="uc-desc-light">Comparez les missions dans le temps et suivez les écarts qui comptent vraiment.
                </div>
              </div>
            </div>
          </div>
          <div class="btn-row">
            <a href="https://jool-monitor.com/" class="btn-primary" target="_blank">
              <span class="material-icons-round">east</span>
              Planifier un vol
            </a>
            <a href="{% url 'core:monitor' %}" class="btn-outline-light">En savoir plus</a>
          </div>
        </div>
        <div class="drone-svg-wrap reveal" style="padding:0;">
          <img src="{% static 'img/JooL Monitor.jpg' %}" alt="JooL Monitor — cartographie drone">
          <div class="chip-float" style="top:14px;right:16px;animation-delay:.3s;">
            <span class="material-icons-round">place</span>
            Palmier bloc 4
          </div>
          <div class="chip-float" style="bottom:18px;left:14px;animation-delay:2.2s;">
            <span class="material-icons-round">report_problem</span>
            3 anomalies détectés
          </div>
        </div>
      </div>
    </div>
  </section>