Glassmorphism Lightbox avec tons sépia pour l’immobilier

<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4 font-sans">

  <!-- Sample Component Trigger (Optional, for demonstration) -->
  <!-- In a real application, you'd likely trigger this with JS by adding/removing 'hidden' class -->
  <!-- For this pure HTML/CSS example, the lightbox is always visible but centered -->

  <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <!-- Overlay -->
    <div class="absolute inset-0 bg-stone-950/40 dark:bg-black/60 backdrop-blur-sm"></div>

    <!-- Lightbox Container -->
    <div class="relative w-full max-w-4xl max-h-[90vh] rounded-xl overflow-hidden shadow-2xl
                bg-stone-100/30 dark:bg-stone-800/20
                backdrop-filter backdrop-blur-lg backdrop-saturate-150
                border border-stone-200/50 dark:border-stone-700/50
                flex flex-col md:flex-row">

      <!-- Left: Image Display Area -->
      <div class="relative flex-shrink-0 w-full md:w-3/5 overflow-hidden group">
        <img src="https://picsum.photos/id/1018/800/600" alt="Property Main Image" class="w-full h-full object-cover object-center transition-transform duration-300 group-hover:scale-105">
        <!-- Navigation Arrows (can be implemented with JS for full functionality) -->
        <button aria-label="Previous image" class="absolute top-1/2 left-4 -translate-y-1/2 p-2 bg-white/20 dark:bg-black/20 rounded-full text-white hover:bg-white/40 dark:hover:bg-black/40 transition-colors focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
        </button>
        <button aria-label="Next image" class="absolute top-1/2 right-4 -translate-y-1/2 p-2 bg-white/20 dark:bg-black/20 rounded-full text-white hover:bg-white/40 dark:hover:bg-black/40 transition-colors focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </button>
      </div>

      <!-- Right: Details and Thumbnails -->
      <div class="flex-1 p-6 flex flex-col justify-between text-stone-800 dark:text-stone-200 overflow-y-auto custom-scrollbar">
        <!-- Close Button -->
        <button aria-label="Close Lightbox" class="absolute top-3 right-3 p-1 rounded-full text-stone-600 dark:text-stone-300 bg-white/40 dark:bg-black/40 hover:bg-white/60 dark:hover:bg-black/60 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>

        <div class="flex-grow">
          <h3 class="text-2xl md:text-3xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Luxury Villa with Ocean View</h3>
          <p class="text-sm md:text-base text-stone-700 dark:text-stone-300 mb-4">123 Oceanfront Drive, Malibu, CA</p>

          <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm text-stone-700 dark:text-stone-300 mb-4">
            <div>
              <p><strong class="text-stone-900 dark:text-stone-100">Price:</strong> $5,200,000</p>
              <p><strong class="text-stone-900 dark:text-stone-100">Beds:</strong> 4</p>
            </div>
            <div>
              <p><strong class="text-stone-900 dark:text-stone-100">Baths:</strong> 4.5</p>
              <p><strong class="text-stone-900 dark:text-stone-100">Area:</strong> 4,500 sq ft</p>
            </div>
          </div>

          <p class="text-stone-700 dark:text-stone-300 text-sm md:text-base leading-relaxed mb-6">
            Exquisite modern villa located in a prime Malibu location, boasting panoramic ocean views and unparalleled luxury. Features an open-concept design, gourmet kitchen, and expansive outdoor living spaces.
          </p>

          <!-- Thumbnails -->
          <div class="grid grid-cols-3 md:grid-cols-4 gap-3 mb-6">
            <img src="https://picsum.photos/id/1018/150/100" alt="Thumbnail 1" class="w-full h-16 md:h-20 object-cover rounded-md cursor-pointer border-2 border-stone-600 dark:border-stone-400 opacity-80 hover:opacity-100 transition-opacity duration-200">
            <img src="https://picsum.photos/id/292/150/100" alt="Thumbnail 2" class="w-full h-16 md:h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-stone-600 dark:hover:border-stone-400 opacity-80 hover:opacity-100 transition-all duration-200">
            <img src="https://picsum.photos/id/433/150/100" alt="Thumbnail 3" class="w-full h-16 md:h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-stone-600 dark:hover:border-stone-400 opacity-80 hover:opacity-100 transition-all duration-200">
            <img src="https://picsum.photos/id/1025/150/100" alt="Thumbnail 4" class="hidden md:block w-full h-16 md:h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-stone-600 dark:hover:border-stone-400 opacity-80 hover:opacity-100 transition-all duration-200">
            <img src="https://picsum.photos/id/95/150/100" alt="Thumbnail 5" class="hidden md:block w-full h-16 md:h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-stone-600 dark:hover:border-stone-400 opacity-80 hover:opacity-100 transition-all duration-200">
          </div>
        </div>

        <!-- Agent Contact Info -->
        <div class="flex items-center pt-4 border-t border-stone-200 dark:border-stone-700 mt-auto">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Agent Emily Johnson" class="w-12 h-12 rounded-full mr-4 border-2 border-stone-400 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-900 dark:text-stone-100">Emily Johnson</p>
            <p class="text-sm text-stone-700 dark:text-stone-400">Senior Real Estate Agent</p>
          </div>
          <a href="#" class="ml-auto bg-stone-700 hover:bg-stone-800 text-stone-50 py-2 px-4 rounded-full text-sm transition-colors duration-200 dark:bg-stone-500 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
            Contact Agent
          </a>
        </div>

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

  <!-- Custom Scrollbar Styles for glass effect where content overflows -->
  <style>
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1); /* Light, transparent track */
      border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(120, 100, 80, 0.5); /* Sepia-toned, semi-transparent thumb */
      border-radius: 10px;
      border: 2px solid rgba(255, 255, 255, 0.1);
    }
    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1); /* Dark, transparent track */
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(150, 130, 110, 0.5); /* Dark sepia-toned, semi-transparent thumb */
      border: 2px solid rgba(0, 0, 0, 0.1);
    }
  </style>

</div>