{{--
    L'image en place à côté de son champ de remplacement.

    Le fond en damier n'est pas décoratif : c'est ce qui rend la transparence
    visible. Un cachet posé sur un carré blanc opaque se voit ici, avant d'être
    découvert sur un contrat déjà envoyé.
--}}
<div class="space-y-2">
    <div
        class="inline-flex items-center justify-center rounded-lg border border-gray-200 p-2 dark:border-gray-700"
        style="background-image:
                linear-gradient(45deg, rgba(148,163,184,.35) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(148,163,184,.35) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, rgba(148,163,184,.35) 75%),
                linear-gradient(-45deg, transparent 75%, rgba(148,163,184,.35) 75%);
               background-size: 12px 12px;
               background-position: 0 0, 0 6px, 6px -6px, -6px 0;"
    >
        <img
            src="{{ $url }}"
            alt="Cachet en place"
            style="max-height: 110px; max-width: 100%;"
            loading="lazy"
        >
    </div>

    <p class="text-xs text-gray-500 dark:text-gray-400">
        @if ($personnalisee)
            Cachet téléversé. Il remplace celui livré avec l'application.
        @else
            Cachet livré avec l'application. Téléversez un PNG à fond transparent pour le remplacer.
        @endif
    </p>

    <p class="text-xs text-gray-500 dark:text-gray-400">
        Les documents déjà produits portent leur propre copie du cachet : remplacer celui-ci ne les
        réécrit pas, et un contrat signé garde le cachet qui était en vigueur ce jour-là.
    </p>
</div>