Responsive Map Viewer Card with Copy & Navigation Controls

<div class="flex flex-col rounded-lg border border-neutral-200 bg-white">
      <!-- En-tête -->
      <div class="flex gap-2 border-neutral-200 border-b pt-2 pr-3 pb-2 pl-3 items-center justify-between">
        <div class="min-w-0">
          <div id="map-title" class="truncate text-sm font-medium text-neutral-900 tracking-tight">Plan cadastral rayon de 50m</div>
          <div class="text-[12px] text-neutral-500"><span id="map-index">1/17</span></div>
        </div>
        <div class="flex items-center gap-1">
          <button id="map-copy" type="button" class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50" title="Copier la référence">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="8" height="4" x="8" y="2" rx="1" class=""></rect><path d="M16 4v12a2 2 0 0 1-2 2H6" class=""></path><rect width="8" height="12" x="2" y="6" rx="2" class=""></rect></svg>
            Copier
          </button>
          <div class="hidden text-[12px] text-[#10B981]" id="map-copied">Copié</div>
          <div class="h-5 w-px bg-neutral-200 mx-1"></div>
          <button id="map-prev" type="button" class="inline-flex items-center justify-center rounded-md border px-2 py-1.5 text-xs border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50" title="Précédent">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6" class=""></polyline></svg>
          </button>
          <button id="map-next" type="button" class="inline-flex items-center justify-center rounded-md border px-2 py-1.5 text-xs border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50" title="Suivant">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6" class=""></polyline></svg>
          </button>
        </div>
      </div>
      <!-- Zone image -->
      <div id="map-viewer" tabindex="0" role="region" aria-label="Visualisateur de cartes" class="relative flex items-center justify-center bg-neutral-50">
        <img id="map-image" src="https://cdn.cmsfly.com/6842ec14af46480011651e99/images/Plancadastralrayonde50m-F7L2P.jpg" alt="Carte: Plan cadastral rayon de 50m" class="w-full h-[280px] sm:h-[360px] lg:h-[420px] object-contain select-none" draggable="false">
        <!-- Boutons flottants (mobile) -->
        <div class="absolute inset-x-0 bottom-2 flex items-center justify-center gap-2 sm:hidden">
          <button id="map-prev-sm" type="button" class="inline-flex items-center justify-center rounded-full bg-white/90 border border-neutral-200 shadow-sm p-2 text-neutral-700">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6" class=""></polyline></svg>
          </button>
          <button id="map-next-sm" type="button" class="inline-flex items-center justify-center rounded-full bg-white/90 border border-neutral-200 shadow-sm p-2 text-neutral-700">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6" class=""></polyline></svg>
          </button>
        </div>
      </div>
    </div>