Navigation inspirée du papier/de l’imprimé pour les plateformes de divertissement

<nav class="bg-lime-50 dark:bg-gray-800 p-4 border-b-4 border-lime-700 dark:border-lime-300 font-serif overflow-hidden relative">
  <div class="max-w-7xl mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-lime-700 dark:text-lime-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M3 5h18M5 9h14v10a2 2 0 01-2 2H7a2 2 0 01-2-2V9zm0 0V5a2 2 0 012-2h10a2 2 0 012 2v4M7 9h10l-1 12H8l-1-12z" />
      </svg>
      <a href="#" class="text-lime-800 dark:text-lime-100 text-2xl font-bold tracking-tight">Page Turner</a>
    </div>

    <!-- Desktop Navigation -->
    <ul class="hidden md:flex space-x-8">
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">Home</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">Browse</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">My Shelf</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">About</a></li>
    </ul>

    <!-- Mobile Menu Button -->
    <button aria-label="Toggle Mobile Menu" class="md:hidden text-lime-700 dark:text-lime-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-lime-500 rounded" onclick="document.getElementById('mobile-menu').classList.toggle('hidden');">
      <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>

  <!-- Mobile Navigation (hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden mt-4 border-t border-lime-700 dark:border-lime-400 pt-4">
    <ul class="flex flex-col space-y-4">
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">Home</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">Browse</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">My Shelf</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">About</a></li>
    </ul>
  </div>

  <!-- Subtle paper texture element -->
  <div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzgiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgNzggMTAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOS4xNDc0NSAzLjM3MjM2QzcuOTUyNzcgMi41Njg2MSA3LjUwNjExIDIuMDcwOTggNi42NDQyNyAxLjU5NTQzQzQuMjI5ODYgMC4yNjUwMzggMS40ODk0OSAtMC42NTk1MjkgMS42MDQyMiAxLjUxOTU0QzEuNzUzNjUgNjk0LjI2IDAuNzU2Mjg4IDkyNC43MTggMC43NTYyODggOTI2LjgyMUMwLjc1NjI4OCA5NjguNzY5IDQwLjg0OTUgOTk5LjE3NSA3OC4yMzE5IDk5OS4xNzVDNzguMjMxOSA5OTkuMTc1IDc2LjAxNzUgMTAwMSA3NS4wNjc2IDEwMDJDNzEuNzk5MSAxMDIxLjM5IDY5LjE0MTIgMTAwMCA2OS4wNzQ4IDEwMDAuMDZDNDkuNTM2OCA5OTkuODYxIDI2LjAwNjkgOTUwLjk0MiAxNi4xNDggOTI2LjgyQzExLjU0OTUgODk5LjQ2NCAxMC42NjcxIDguOTA3NDggOS4xNDc0NSAzLjM3MjM2WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eXM9IjAuMDUiLz4KPC9zdmc+'); background-repeat: repeat;"></div>
</nav>