{*
 * MÉRIDIAN — Réassurance
 * Desktop : grille (icône en pastille + texte).
 * Mobile  : slider automatique (un élément à la fois) via meridian.js.
 * Données : $reassurances[] { image, title, sub_title, url }
 *}
{if count($reassurances) > 0}
<section class="mrd-trust" style="border-block:1px solid var(--line)">
  <div class="mrd-container" style="padding-block:8px">

    {* --- Desktop : grille --- *}
    <div class="trust-grid">
      {foreach from=$reassurances item=reassurance}
        <div class="trust-item reveal">
          <span class="trust-ico">
            {if !empty($reassurance.image)}<img src="{$reassurance.image}" alt="" loading="lazy" width="24" height="24">{/if}
          </span>
          <div>
            <div class="title">{if !empty($reassurance.url)}<a href="{$reassurance.url}">{$reassurance.title}</a>{else}{$reassurance.title}{/if}</div>
            {if !empty($reassurance.sub_title)}<div class="sub">{$reassurance.sub_title}</div>{/if}
          </div>
        </div>
      {/foreach}
    </div>

    {* --- Mobile : slider --- *}
    <div class="trust-slider" style="padding-block:30px">
      <div class="trust-slider-track">
        {foreach from=$reassurances item=reassurance}
          <div class="trust-item">
            <span class="trust-ico">
              {if !empty($reassurance.image)}<img src="{$reassurance.image}" alt="" loading="lazy" width="24" height="24">{/if}
            </span>
            <div>
              <div class="title">{$reassurance.title}</div>
              {if !empty($reassurance.sub_title)}<div class="sub">{$reassurance.sub_title}</div>{/if}
            </div>
          </div>
        {/foreach}
      </div>
      <div class="trust-dots"></div>
    </div>

  </div>
</section>
{/if}
