{{-- Aperçu du rendu réel d'un e-mail avant envoi (v1.2 §7) : vue bureau (600 px) et mobile
     (375 px) côte à côte, dans des iframes isolées — exactement le HTML qui partira. --}}
<div class="space-y-3">
    <p class="text-sm text-gray-500 dark:text-gray-400">
        Premier destinataire : <span class="font-medium">{{ $destinataire }}</span>
    </p>
    <div class="flex flex-col gap-4 lg:flex-row">
        <div class="min-w-0 flex-1">
            <p class="mb-1 text-xs font-semibold uppercase text-gray-400">Bureau</p>
            <iframe
                srcdoc="{{ $html }}"
                class="h-[540px] w-full rounded-lg border border-gray-200 bg-white dark:border-white/10"
                sandbox=""
            ></iframe>
        </div>
        <div class="shrink-0">
            <p class="mb-1 text-xs font-semibold uppercase text-gray-400">Mobile (375 px)</p>
            <iframe
                srcdoc="{{ $html }}"
                class="h-[540px] w-[375px] max-w-full rounded-lg border border-gray-200 bg-white dark:border-white/10"
                sandbox=""
            ></iframe>
        </div>
    </div>
</div>