<div
  x-init="
    $nextTick(() => { open = true; document.body.classList.add('overflow-hidden'); window.addEventListener('keydown', e => {
        if (e.key === 'Escape') open = false;
    });})
  "
  x-effect="if (!open) document.body.classList.remove('overflow-hidden')"
  x-show="open"
  x-transition:enter="transition ease-out duration-300 transform"
  x-transition:enter-start="translate-y-full opacity-0"
  x-transition:enter-end="translate-y-0 opacity-100"
  x-transition:leave="transition ease-in duration-200 transform"
  x-transition:leave-start="translate-y-0 opacity-100"
  x-transition:leave-end="translate-y-full opacity-0"
  class="fixed inset-0 top-16 z-40 flex items-end justify-center rounded-t-2xl bg-zinc-100 dark:bg-gray-800"
  x-cloak
  data-settings-target="modal">
  <!-- Bouton de fermeture en haut à droite, visuel et large -->
  <button
    type="button"
    data-action="click->settings#close"
    class="absolute top-3 right-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/70 text-lg text-gray-700 hover:bg-white hover:text-black"
    aria-label="Close">
    <div class="icon-x"></div>
  </button>
  <div class="h-[90vh] w-full max-w-6xl rounded-t-xl bg-transparent">
    <turbo-frame id="settings_content" refresh="morph" data-turbo-action="advance">
      <div class="relative flex h-full gap-2 overflow-y-auto">
        <!-- Sidebar -->
        <aside class="w-1/4 space-y-1 rounded-xl bg-white p-4 text-sm dark:bg-gray-700">
          <div class="mb-4">
            <div class="mb-2 text-xs font-semibold text-gray-500 uppercase">Paramètres</div>
            <input
              type="text"
              placeholder="Rechercher"
              class="w-full rounded border px-3 py-2 text-sm">
          </div>
          <twig:SerenityAdmin:Menu:SidebarSettings />
        </aside>
        <!-- Contenu principal -->
        <section class="w-3/4 space-y-6 overflow-auto bg-transparent p-6 pb-20">
          {% block settings_content %}
          {% endblock %}
        </section>
      </div>
    </turbo-frame>
  </div>
</div>
