Composant d’infobulle - Art déco Niveaux de gris

<div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden p-4 font-serif">

  <!-- Background geometric patterns (simplified for Art Deco feel) -->
  <div class="absolute inset-0 pointer-events-none opacity-5 dark:opacity-10">
    <div class="absolute top-1/4 left-1/4 w-48 h-48 border border-gray-400 dark:border-gray-700 transform rotate-45"></div>
    <div class="absolute bottom-1/4 right-1/4 w-64 h-64 border-2 border-gray-300 dark:border-gray-800 transform -rotate-30"></div>
    <div class="absolute top-1/3 right-1/4 w-32 h-32 border-dashed border-gray-400 dark:border-gray-700 transform rotate-60"></div>
  </div>

  <!-- Tooltip Trigger Wrapper -->
  <div class="group relative inline-block z-10">
    <button class="relative px-6 py-3 bg-gradient-to-br from-gray-800 to-gray-600 dark:from-gray-200 dark:to-gray-400 text-gray-100 dark:text-gray-900 font-bold text-lg tracking-wider rounded-md 
                   shadow-lg transition-all duration-300 ease-in-out 
                   hover:from-gray-700 hover:to-gray-500 hover:dark:from-gray-300 hover:dark:to-gray-500 
                   active:scale-95 overflow-hidden border border-gray-500 dark:border-gray-500 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
      <span class="relative z-10">Explore Art Deco</span>
      <!-- Subtle geometric overlay on button -->
      <div class="absolute inset-0 bg-gradient-to-br from-transparent via-gray-700/10 to-gray-500/10 dark:via-gray-300/10 dark:to-gray-100/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-72 md:w-96 p-6 
                bg-white dark:bg-gray-800 border-2 border-gray-700 dark:border-gray-400 
                shadow-2xl rounded-lg opacity-0 pointer-events-none 
                group-hover:opacity-100 group-hover:pointer-events-auto 
                transform scale-90 group-hover:scale-100 transition-all duration-300 ease-in-out 
                origin-bottom-left z-20
                before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:w-0 before:h-0 before:border-l-[12px] before:border-l-transparent before:border-r-[12px] before:border-r-transparent before:border-t-[12px] before:border-t-gray-700 dark:before:border-t-gray-400 
                after:absolute after:left-1/2 after:top-full after:-translate-x-1/2 after:mt-[2px] after:w-0 after:h-0 after:border-l-[10px] after:border-l-transparent after:border-r-[10px] after:border-r-transparent after:border-t-[10px] after:border-t-white dark:after:border-t-gray-800">

      <!-- Header Section -->
      <div class="flex items-center justify-between pb-4 mb-4 border-b border-gray-300 dark:border-gray-600 relative">
        <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-gray-100 tracking-wide leading-tight">
          <span class="relative inline-block z-10">The Art Deco Era</span>
          <!-- Title Underline/Accent -->
          <span class="absolute bottom-0 left-0 w-full h-1 bg-gray-500 dark:bg-gray-400 transform -skew-x-12 z-0"></span>
        </h3>
        <div class="flex space-x-2">
          <button aria-label="Favorites" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
          </button>
          <button aria-label="Share" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.316l4.94 2.47a3 3 0 10.61-.307L12.067 12h-1.65a3 3 0 10-2.31 3h3.893l1.09-1.091a3 3 0 10.61.307z"></path></svg>
          </button>
        </div>
      </div>

      <!-- Main Content -->
      <div class="text-gray-700 dark:text-gray-300 text-sm md:text-base leading-relaxed mb-4">
        <p class="mb-3">Art Deco, short for Arts Décoratifs, is a distinctive style from the 1920s and 1930s, characterized by rich colors, bold geometric shapes, and lavish ornamentation.</p>
        <p class="mb-3">It emerged in France before WWI and became prominent in the 'Roaring Twenties,' influencing architecture, fashion, and visual arts globally.</p>
        <p>This era epitomized glamour, luxury, and technological progress.</p>
      </div>

      <!-- Key Features/Details (Geometric Blocks) -->
      <div class="grid grid-cols-2 gap-2 mb-4 border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-sm border border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block font-semibold text-gray-800 dark:text-gray-200 uppercase text-xs md:text-sm mb-1">Era</span>
          <span class="block text-gray-600 dark:text-gray-400 text-xs md:text-sm">1920s-1930s</span>
          <div class="absolute -top-2 -right-2 w-8 h-8 bg-gray-300 dark:bg-gray-600 transform rotate-45"></div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-sm border border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block font-semibold text-gray-800 dark:text-gray-200 uppercase text-xs md:text-sm mb-1">Origin</span>
          <span class="block text-gray-600 dark:text-gray-400 text-xs md:text-sm">France</span>
          <div class="absolute -bottom-2 -left-2 w-8 h-8 bg-gray-300 dark:bg-gray-600 transform rotate-45"></div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-sm border border-gray-300 dark:border-gray-600 relative overflow-hidden col-span-2">
          <span class="block font-semibold text-gray-800 dark:text-gray-200 uppercase text-xs md:text-sm mb-1">Key Elements</span>
          <span class="block text-gray-600 dark:text-gray-400 text-xs md:text-sm">Geometric shapes, streamlined forms, luxurious materials.</span>
          <div class="absolute -top-2 left-1/2 -translate-x-1/2 w-8 h-8 bg-gray-300 dark:bg-gray-600 transform -rotate-45"></div>
        </div>
      </div>

      <!-- Related Links/Authors (List) -->
      <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <h4 class="text-md md:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Further Reading</h4>
        <ul class="space-y-2">
          <li class="flex items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 group">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-3 border border-gray-400 dark:border-gray-600">
            <a href="#" class="underline-offset-2 hover:underline decoration-1 decoration-gray-500 dark:decoration-gray-400 text-sm md:text-base">The Legacy of Art Deco Architecture</a>
          </li>
          <li class="flex items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 group">
            <img src="https://randomuser.me/api/portraits/men/8.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-3 border border-gray-400 dark:border-gray-600">
            <a href="#" class="underline-offset-2 hover:underline decoration-1 decoration-gray-500 dark:decoration-gray-400 text-sm md:text-base">From Paris to New York: Art Deco's Journey</a>
          </li>
          <li class="flex items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 group">
            <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-3 border border-gray-400 dark:border-gray-600">
            <a href="#" class="underline-offset-2 hover:underline decoration-1 decoration-gray-500 dark:decoration-gray-400 text-sm md:text-base">Identifying Art Deco: A Style Guide</a>
          </li>
        </ul>
      </div>

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