{% extends "base.html" %}
{% load static i18n %}

{% block title %}{% trans "Jool Monitor | Cartographie drone haute résolution | Jool International" %}{% endblock %}
{% block title_plain %}{% trans "Jool Monitor | Cartographie drone haute résolution | Jool International" %}{% endblock %}

{% block meta_description %}{% trans "JooL Monitor transforme les vols drone en cartographies détaillées, mesures précises et rapports terrain pour analyser vos surfaces, compter les plants et suivre l'évolution de vos parcelles agricoles en Afrique." %}{% endblock %}

{% block og_title %}{% trans "Jool Monitor | Cartographie drone haute résolution pour vos parcelles" %}{% endblock %}
{% block og_description %}{% trans "Comptez, mesurez, cartographiez et contrôlez vos parcelles avec une précision nouvelle grâce à l'imagerie drone analysée par IA." %}{% endblock %}
{% block twitter_title %}{% trans "Jool Monitor | Cartographie drone haute résolution pour vos parcelles" %}{% endblock %}
{% block twitter_description %}{% trans "Comptez, mesurez, cartographiez et contrôlez vos parcelles avec une précision nouvelle grâce à l'imagerie drone analysée par IA." %}{% endblock %}

{% block schema_org %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Jool Monitor",
  "applicationCategory": "AgricultureApplication",
  "operatingSystem": "Web",
  "url": "https://jool-international.com/produits/monitor/",
  "description": "Solution de cartographie drone haute résolution pour l'agriculture africaine : orthomosaïques, comptage intelligent de plants, modèles 3D et suivi visuel continu des exploitations.",
  "offers": {
    "@type": "Offer",
    "priceCurrency": "XOF",
    "availability": "https://schema.org/InStock"
  },
  "provider": {
    "@type": "Organization",
    "name": "Jool International",
    "url": "https://jool-international.com",
    "logo": "https://jool-international.com/static/img/logo.png"
  },
  "featureList": [
    "Cartographie drone haute résolution",
    "Orthomosaïques et modèles numériques de terrain",
    "Comptage automatique de plants",
    "Détection des manquants et zones dégradées",
    "Suivi visuel multi-missions dans le temps",
    "Export SIG et formats métier"
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Accueil",
      "item": "https://jool-international.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Produits",
      "item": "https://jool-international.com/#monitor"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Jool Monitor — Cartographie drone",
      "item": "https://jool-international.com/produits/monitor/"
    }
  ]
}
</script>
{% endblock %}

{% block extra_css %}
<style>
  /* ── Hero ──────────────────────────────────────── */
  .product-hero-dark { background: var(--dark-bg); padding: 80px 64px 64px; }
  .product-hero-dark-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1200px; margin: 0 auto; }
  .product-hero-dark h1 { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 4vw, 3.6rem); letter-spacing: -0.03em; color: var(--white); line-height: 1.05; margin-bottom: 20px; }
  .product-hero-dark h1 em { font-style: normal; color: var(--accent); }
  .product-hero-dark p { font-size: 17px; color: rgba(255,255,255,.65); line-height: 1.75; font-weight: 300; max-width: 480px; margin-bottom: 32px; }
  .btn-back-product { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 32px; transition: color .15s; }
  .btn-back-product:hover { color: var(--accent); }

  /* ── Stats strip ───────────────────────────────── */
  .drone-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .drone-stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 24px; text-align: center; }
  .drone-stat-val { font-family: var(--display); font-weight: 900; font-size: 2.2rem; color: var(--accent); letter-spacing: -.04em; }
  .drone-stat-label { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 4px; }

  /* ── Features ──────────────────────────────────── */
  .product-features { padding: 88px 64px; background: var(--white); }
  .product-features-inner { max-width: 1200px; margin: 0 auto; }
  .section-header { text-align: center; margin-bottom: 56px; }
  .section-header h2 { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem,3vw,2.4rem); letter-spacing:-.03em; color: var(--black); margin-bottom: 12px; }
  .section-header h2 em { font-style: normal; color: var(--teal); }
  .section-header p { font-size: 16px; color: #666; font-weight: 300; max-width: 540px; margin: 0 auto; }
  .product-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(25,112,97,.12); color: var(--teal); padding: 5px 14px; border-radius: 100px; margin-bottom: 20px; }
  .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .feature-card { background: var(--gray-2); border-radius: 18px; padding: 28px; transition: transform .2s, box-shadow .2s; }
  .feature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(25,112,97,.1); }
  .feature-card-icon { width: 48px; height: 48px; background: rgba(25,112,97,.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
  .feature-card-icon .material-icons-round { color: var(--teal); font-size: 24px; }
  .feature-card h3 { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--black); margin-bottom: 10px; }
  .feature-card p { font-size: 14px; color: #666; line-height: 1.65; font-weight: 300; }

  /* ── How it works ──────────────────────────────── */
  .product-how { padding: 88px 64px; background: var(--dark-bg); }
  .product-how-inner { max-width: 860px; margin: 0 auto; }
  .product-how .section-header h2 { color: var(--white); }
  .product-how .section-header p { color: rgba(255,255,255,.55); }
  .steps { display: flex; flex-direction: column; }
  .step { display: grid; grid-template-columns: 56px 1fr; gap: 28px; align-items: flex-start; padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .step:last-child { border-bottom: none; }
  .step-num { font-family: var(--display); font-weight: 900; font-size: 1.8rem; color: var(--accent); line-height: 1; padding-top: 3px; }
  .step-body h4 { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--white); margin-bottom: 8px; }
  .step-body p { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.7; font-weight: 300; }

  /* ── Pricing ───────────────────────────────────── */
  .product-pricing { padding: 96px 64px; background: var(--gray-2); }
  .product-pricing-inner { max-width: 1200px; margin: 0 auto; }
  .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
  .pricing-card {
    background: var(--white); border-radius: 24px; padding: 36px 28px;
    border: 1.5px solid var(--gray); display: flex; flex-direction: column;
    transition: border-color .2s, transform .2s, box-shadow .2s;
  }
  .pricing-card:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(25,112,97,.12); }
  .pricing-card.enterprise { background: var(--dark-bg); border-color: var(--teal); box-shadow: 0 8px 32px rgba(25,112,97,.18); }
  .pricing-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--teal-pale); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
  .pricing-card.enterprise .pricing-icon { background: rgba(255,255,255,.1); }
  .pricing-icon .material-icons-round { color: var(--teal); font-size: 24px; }
  .pricing-card.enterprise .pricing-icon .material-icons-round { color: var(--accent); }
  .pricing-name { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--black); margin-bottom: 8px; line-height: 1.25; }
  .pricing-card.enterprise .pricing-name { color: var(--white); }
  .pricing-desc { font-size: 13px; color: #888; font-weight: 300; line-height: 1.55; margin-bottom: 28px; flex: 1; }
  .pricing-card.enterprise .pricing-desc { color: rgba(255,255,255,.5); }
  .pricing-divider { height: 1px; background: var(--gray); margin-bottom: 24px; }
  .pricing-card.enterprise .pricing-divider { background: rgba(255,255,255,.1); }
  .pricing-price-xof { font-family: var(--display); font-weight: 900; font-size: 1.4rem; color: var(--teal); letter-spacing: -.03em; line-height: 1; }
  .pricing-card.enterprise .pricing-price-xof { color: var(--accent); }
  .pricing-price-usd { font-size: 13px; color: #aaa; font-weight: 300; margin-top: 4px; margin-bottom: 4px; }
  .pricing-unit { font-size: 12px; color: #bbb; font-weight: 400; }
  .pricing-card.enterprise .pricing-unit { color: rgba(255,255,255,.35); }
  .pricing-custom-label { font-family: var(--display); font-weight: 900; font-size: 1.4rem; color: var(--teal); letter-spacing: -.03em; }
  .pricing-cta {
    margin-top: 28px; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 13px 0; border-radius: 100px;
    font-family: var(--display); font-weight: 700; font-size: 14px;
    background: var(--teal-pale); color: var(--teal); transition: background .15s, color .15s;
  }
  .pricing-cta:hover { background: var(--teal); color: var(--white); }
  .pricing-card.enterprise .pricing-cta { background: var(--teal); color: var(--white); }
  .pricing-card.enterprise .pricing-cta:hover { filter: brightness(1.1); }

  /* ── CTA ───────────────────────────────────────── */
  .product-cta { padding: 88px 64px; text-align: center; background: var(--teal-pale); }
  .product-cta h2 { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--black); letter-spacing: -0.03em; margin-bottom: 16px; }
  .product-cta p { font-size: 16px; color: #666; margin-bottom: 36px; font-weight: 300; max-width: 560px; margin-left: auto; margin-right: auto; }
  .btn-cta-lg { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 16px; padding: 16px 36px; border-radius: 100px; background: var(--teal); color: var(--white); transition: filter .15s, transform .12s; }
  .btn-cta-lg:hover { filter: brightness(1.1); transform: translateY(-2px); }
  .btn-outline-product { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-weight: 600; font-size: 15px; padding: 14px 30px; border-radius: 100px; border: 1.5px solid var(--teal); color: var(--teal); transition: all .15s; margin-left: 14px; }
  .btn-outline-product:hover { background: var(--teal); color: var(--white); }

  @media (max-width: 1024px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 768px) {
    .product-hero-dark { padding: 48px 24px 40px; }
    .product-hero-dark-inner { grid-template-columns: 1fr; }
    .product-features, .product-how, .product-pricing, .product-cta { padding: 56px 24px; }
    .features-grid, .pricing-grid, .drone-stat-row { grid-template-columns: 1fr; }
    .btn-outline-product { margin-left: 0; margin-top: 12px; }
  }
</style>
{% endblock %}

{% block content %}

<!-- ── Back ── -->
<div style="background:var(--dark-bg);padding:24px 64px 0;">
  <a href="{% url 'core:home' %}#monitor" class="btn-back-product">
    <span class="material-icons-round" style="font-size:16px;">arrow_back</span> {% trans "Retour à l'accueil" %}
  </a>
</div>

<!-- ══ HERO ══ -->
<section class="product-hero-dark" style="padding-top:0;">
  <div class="product-hero-dark-inner">
    <div class="reveal visible">
      <span class="section-tag tag-white" style="margin-bottom:20px;display:inline-flex;">
        <span class="material-icons-round" style="font-size:13px;">flight</span>
        {% trans "JOOL MONITOR · DRONE & HAUTE RÉSOLUTION" %}
      </span>
      <h1>{% blocktrans %}Voyez votre terrain<br>en haute résolution.{% endblocktrans %}</h1>
      <p>{% trans "JooL Monitor transforme les vols drone en cartographies détaillées, mesures précises et rapports terrain pour analyser vos surfaces, compter les plants et suivre l'évolution de vos parcelles dans le temps." %}</p>
      <div class="btn-row" style="margin-top:32px;">
        <a href="https://jool-monitor.com/" class="btn-cta-lg" target="_blank">
          <span class="material-icons-round">east</span> {% trans "Découvrir JooL Monitor" %}
        </a>
      </div>
    </div>
    <div class="drone-svg-wrap reveal" style="padding:0;background:none;aspect-ratio:unset;">
      <a href="https://www.youtube.com/watch?v=S9sE7H_01mI" target="_blank" rel="noopener"
         style="position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;box-shadow:0 20px 56px rgba(0,0,0,.35);text-decoration:none;">
        <img src="https://img.youtube.com/vi/S9sE7H_01mI/maxresdefault.jpg"
             alt="{% trans 'JooL Monitor, Démonstration cartographie drone' %}"
             style="width:100%;height:100%;object-fit:cover;display:block;">
        <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);transition:background .2s;">
          <div style="width:80px;height:80px;background:rgba(255,255,255,.95);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(0,0,0,.35);">
            <span class="material-icons-round" style="font-size:42px;color:#e55c3a;margin-left:5px;">play_arrow</span>
          </div>
        </div>
      </a>
    </div>
  </div>
</section>

<!-- ── Stats ── -->
<section style="background:var(--dark-bg);padding:0 64px 64px;">
  <div class="drone-stat-row" style="max-width:860px;margin:0 auto;">
    <div class="drone-stat reveal"><div class="drone-stat-val">2 cm</div><div class="drone-stat-label">{% trans "Résolution GSD" %}</div></div>
    <div class="drone-stat reveal"><div class="drone-stat-val">98%</div><div class="drone-stat-label">{% trans "Précision comptage" %}</div></div>
    <div class="drone-stat reveal"><div class="drone-stat-val">500 ha</div><div class="drone-stat-label">{% trans "Par mission de vol" %}</div></div>
  </div>
</section>

<!-- ══ FEATURES ══ -->
<section class="product-features">
  <div class="product-features-inner">
    <div class="section-header reveal">
      <span class="product-eyebrow" style="margin-bottom:16px;">{% trans "Ce que JooL Monitor active sur le terrain" %}</span>
      <h2>{% blocktrans %}Une lecture terrain précise,<br>mesurable et exploitable.{% endblocktrans %}</h2>
    </div>
    <div class="features-grid">
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">grain</span></div>
        <h3>{% trans "Comptage intelligent" %}</h3>
        <p>{% blocktrans %}<strong>Détectez</strong>, <strong>comptez</strong> et <strong>localisez</strong> automatiquement les plants afin de <strong>visualiser</strong> les manquants, les densités et les écarts parcelle par parcelle.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">map</span></div>
        <h3>{% trans "Orthomosaïque haute définition" %}</h3>
        <p>{% blocktrans %}<strong>Obtenez</strong> des cartes aériennes ultra-détaillées, nettes, mesurables et directement exploitables par vos équipes terrain.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">view_in_ar</span></div>
        <h3>{% trans "Modèles 3D terrain" %}</h3>
        <p>{% blocktrans %}<strong>Reconstituez</strong> le relief, les volumes et la structure végétale pour <strong>analyser</strong> plus finement vos blocs agricoles.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">task_alt</span></div>
        <h3>{% trans "Audit visuel & conformité" %}</h3>
        <p>{% blocktrans %}<strong>Comparez</strong> le terrain réel aux données déclarées, <strong>identifiez</strong> les écarts et <strong>documentez</strong> les zones sensibles avec preuve visuelle.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">history</span></div>
        <h3>{% trans "Suivi dans le temps" %}</h3>
        <p>{% blocktrans %}<strong>Comparez</strong> plusieurs missions drone afin de <strong>mesurer</strong> l'évolution des cultures, <strong>détecter</strong> les pertes et <strong>suivre</strong> les changements dans le temps.{% endblocktrans %}</p>
      </div>
      <div class="feature-card reveal">
        <div class="feature-card-icon"><span class="material-icons-round">download</span></div>
        <h3>{% trans "Exports prêts à l'usage" %}</h3>
        <p>{% blocktrans %}<strong>Téléchargez</strong> vos livrables dans des formats compatibles avec vos outils SIG, reporting et workflows opérationnels.{% endblocktrans %}</p>
      </div>
    </div>
  </div>
</section>

<!-- ══ HOW IT WORKS ══ -->
<section class="product-how">
  <div class="product-how-inner">
    <div class="section-header reveal">
      <span class="product-eyebrow" style="margin-bottom:16px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);">{% trans "Comment ça fonctionne" %}</span>
      <h2>{% blocktrans %}Comment JooL Monitor <span style="color:var(--accent);">fonctionne</span>{% endblocktrans %}</h2>
      <p>{% trans "Du vol drone au livrable terrain." %}</p>
    </div>
    <div class="steps">
      <div class="step reveal">
        <div class="step-num">01</div>
        <div class="step-body">
          <h4>{% trans "Préparation de mission" %}</h4>
          <p>{% trans "Chaque vol est préparé selon vos parcelles, vos objectifs opérationnels et les contraintes terrain." %}</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">02</div>
        <div class="step-body">
          <h4>{% trans "Acquisition haute précision" %}</h4>
          <p>{% trans "Le drone capture une couverture complète de la zone afin de garantir une lecture fiable, homogène et détaillée du terrain." %}</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">03</div>
        <div class="step-body">
          <h4>{% trans "Traitement intelligent des données" %}</h4>
          <p>{% trans "Les images sont assemblées, modélisées et transformées en livrables cartographiques directement exploitables." %}</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">04</div>
        <div class="step-body">
          <h4>{% trans "Analyse & livraison rapide" %}</h4>
          <p>{% trans "Vous recevez cartes, indicateurs et rapports prêts à être utilisés par vos équipes techniques et opérationnelles." %}</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══ PRICING ══ -->
<section class="product-pricing">
  <div class="product-pricing-inner">
    <div class="section-header reveal">
      <span class="product-eyebrow" style="margin-bottom:16px;">{% trans "Tarification" %}</span>
      <h2>{% blocktrans %}Une tarification adaptée aux<br>opérations terrain.{% endblocktrans %}</h2>
    </div>
    <div class="pricing-grid">

      <!-- Plan 1 -->
      <div class="pricing-card reveal">
        <div class="pricing-icon"><span class="material-icons-round">flight</span></div>
        <div class="pricing-name">{% trans "Cartographie drone ponctuelle" %}</div>
        <div class="pricing-desc">{% trans "Vols drone et production de livrables cartographiques pour plantations, audits et missions terrain." %}</div>
        <div class="pricing-divider"></div>
        <div class="pricing-price-xof">{% trans "À partir de 10 000 FCFA" %}</div>
        <div class="pricing-price-usd">≈ $17</div>
        <div class="pricing-unit">{% trans "par hectare" %}</div>
        <a href="https://jool-monitor.com/" target="_blank" class="pricing-cta">
          <span class="material-icons-round" style="font-size:16px;">east</span> {% trans "Découvrir JooL Monitor" %}
        </a>
      </div>

      <!-- Plan 2 -->
      <div class="pricing-card reveal">
        <div class="pricing-icon"><span class="material-icons-round">grain</span></div>
        <div class="pricing-name">{% trans "Comptage & analyse parcellaire" %}</div>
        <div class="pricing-desc">{% trans "Comptage intelligent, analyse de densité et détection des écarts sur parcelles agricoles." %}</div>
        <div class="pricing-divider"></div>
        <div class="pricing-custom-label" style="font-size:1.1rem;color:var(--teal);">{% trans "Sur devis" %}</div>
        <div class="pricing-unit" style="margin-top:6px;">{% trans "Selon surface & complexité" %}</div>
        <a href="{% url 'core:home' %}#contact" class="pricing-cta">
          <span class="material-icons-round" style="font-size:16px;">east</span> {% trans "Nous contacter" %}
        </a>
      </div>

      <!-- Plan 3 -->
      <div class="pricing-card reveal">
        <div class="pricing-icon"><span class="material-icons-round">business</span></div>
        <div class="pricing-name">{% trans "Missions multi-sites & industrielles" %}</div>
        <div class="pricing-desc">{% trans "Déploiements drone pour agro-industriels, institutions, infrastructures et grands portefeuilles agricoles." %}</div>
        <div class="pricing-divider"></div>
        <div class="pricing-custom-label" style="font-size:1.1rem;color:var(--teal);">{% trans "Sur mesure" %}</div>
        <div class="pricing-unit" style="margin-top:6px;">{% trans "Tarification personnalisée" %}</div>
        <a href="{% url 'core:home' %}#contact" class="pricing-cta">
          <span class="material-icons-round" style="font-size:16px;">east</span> {% trans "Nous contacter" %}
        </a>
      </div>

      <!-- Plan 4 — Enterprise -->
      <div class="pricing-card enterprise reveal">
        <div class="pricing-icon"><span class="material-icons-round">layers</span></div>
        <div class="pricing-name">{% trans "Export SIG & livrables avancés" %}</div>
        <div class="pricing-desc">{% trans "Orthomosaïques HD, modèles 3D, couches SIG et livrables compatibles métiers pour vos workflows." %}</div>
        <div class="pricing-divider"></div>
        <div class="pricing-custom-label">{% trans "Options disponibles" %}</div>
        <div class="pricing-unit" style="margin-top:6px;">{% trans "Selon besoins projet" %}</div>
        <a href="{% url 'core:home' %}#contact" class="pricing-cta">
          <span class="material-icons-round" style="font-size:16px;">east</span> {% trans "Parler à notre équipe" %}
        </a>
      </div>

    </div>
  </div>
</section>

<!-- ══ CTA ══ -->
<section class="product-cta">
  <span class="product-eyebrow" style="margin-bottom:20px;">{% trans "Prêt à commencer ?" %}</span>
  <h2>{% blocktrans %}Passez de l'observation à la mesure.{% endblocktrans %}</h2>
  <p>{% trans "Transformez vos parcelles en données exploitables grâce à la cartographie drone haute résolution, aux mesures précises et aux rapports terrain de JooL Monitor." %}</p>
  <div class="btn-row" style="justify-content:center;">
    <a href="https://jool-monitor.com/" target="_blank" class="btn-cta-lg">
      <span class="material-icons-round">flight</span> {% trans "Découvrir JooL Monitor" %}
    </a>
    <a href="{% url 'core:home' %}#contact" class="btn-outline-product">
      {% trans "Parler à notre équipe" %}
    </a>
  </div>
</section>

{% endblock %}
