Documentation - Modals.

const marssel = new Marssel();
// Le ModalManager est automatiquement initialisé

<!-- Overlay -->
<div id="modal-overlay" class="d-[none] pos-[fixed] top-[0] left-[0] w-[100%] h-[100%] bg-[000000] opacity-[0.65] z-[1001]"></div>

<!-- Modal -->
<div id="modal-default" class="modal-default---[d-[none]+pos-[fixed]+top-[50%]+left-[50%]+transform-[translate(-50%,-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+w-[90%]+max-w-[500px]+shadow-[0_4px_12px_rgba(0,0,0,0.3)]]">

    <!-- Header -->
    <div class="modal-header---[d-[flex]+justify-[space-between]+items-[center]+p-[16px]+border-b-[1px_solid_eeeeee]]">
        <h4 class="m-[0] fw-[600]">Titre de la modale</h4>
        <button class="close-btn close-btn---[bg-[transparent]+border-[none]+cursor-[pointer]+font-size-[24px]]"
            onclick="closeModal('modal-default')">×</button>
    </div>

    <!-- Body -->
    <div class="modal-body modal-body---[p-[16px]]">
        <p>Contenu de la modale</p>
    </div>

    <!-- Footer -->
    <div class="modal-footer---[p-[16px]+border-t-[1px_solid_eeeeee]+d-[flex]+justify-[flex-end]]">
        <button class="bg-[eaeaea] c-[333] p-[8px_16px] rounded-[4px] border-[1px_solid_ccc] mr-[8px]"
            onclick="closeModal('modal-default')">
            Annuler
        </button>
        <button class="bg-[4b7bec] c-[fff] p-[8px_16px] rounded-[4px] border-[none]">Confirmer</button>
    </div>

</div>

<button class="btn-modal" onclick="openModal('modal-centered')">Modale Centrée</button>

<div id="modal-centered" class="modal-centered---[d-[none]+pos-[fixed]+top-[50%]+left-[50%]+transform-[translate(-50%,-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+w-[90%]+max-w-[500px]+shadow-[0_4px_12px_rgba(0,0,0,0.3)]]">
    <div class="modal-header">
        <h4 class="m-[0] fw-[600]">Modale Centrée</h4>
        <button class="close-btn" onclick="closeModal('modal-centered')">×</button>
    </div>
    <div class="modal-body---[p-[16px]]">
        <p>Cette modale est explicitement centrée verticalement et horizontalement.</p>
    </div>
    <div class="modal-footer">
        <button class="bg-[eaeaea] c-[333] p-[8px_16px] rounded-[4px] border-[1px_solid_ccc] mr-[8px]" onclick="closeModal('modal-centered')">Annuler</button>
        <button class="bg [4b7bec] c-[fff] p-[8px_16px] rounded-[4px] border-[none]">Confirmer</button>
    </div>
</div>

<button onclick="openModal('modal-top')">Modale En Haut</button>

<div id="modal-top" class="modal-top---[d-[none]+pos-[fixed]+top-[20px]+left-[50%]+transform-[translateX(-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+w-[90%]+max-w-[500px]+shadow-[0_4px_12px_rgba(0,0,0,0.3)]]">
  <!-- Contenu -->
</div>

<button onclick="openModal('modal-bottom')">Modale En Bas</button>

<div id="modal-bottom" class="modal-bottom---[d-[none]+pos-[fixed]+bottom-[20px]+left-[50%]+transform-[translateX(-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+w-[90%]+max-w-[500px]+shadow-[0_4px_12px_rgba(0,0,0,0.3)]]">
  <!-- Contenu -->
</div>

<button onclick="openModal('modal-bottom')">Modale En Haut</button>

<div id="modal-fullscreen" class="modal-fullscreen---[d-[none]+pos-[fixed]+top-[0]+left-[0]+w-[100%]+h-[100%]+bg-[ffffff]+z-[1001]+overflow-[auto]]">
  <!-- Contenu -->
</div>

// Ouvrir une modale
marssel.modalManager.openModal('modal-id');

// Fermer une modale
marssel.modalManager.closeModal('modal-id');

// Fermer toutes les modales
marssel.modalManager.closeAllModals();

// Vérifier si une modale est ouverte
if (marssel.modalManager.isOpen('modal-id')) {
  // ...
}

// Au clic sur l'overlay
document.getElementById('modal-overlay').addEventListener('click', () => {
    marssel.modalManager.closeAllModals();
});

// Fermeture au clavier (ESC)
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        marssel.modalManager.closeAllModals();
    }
});

<div id="modal-responsive" class="modal---[d-[none]+pos-[fixed]+top-[50%]+left-[50%]+transform-[translate(-50%,-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+w-[95%]+max-w-[400px]] md--modal---[max-w-[600px]] lg--modal---[max-w-[800px]]">
    <!-- Contenu -->
</div>

<div id="modal-animated" class="modal---[d-[none]+pos-[fixed]+top-[50%]+left-[50%]+transform-[translate(-50%,-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+opacity-[0]+transition-[all_0.3s_ease]]">
  <!-- Contenu -->
</div>

// Ajouter la classe d'animation à l'ouverture
marssel.modalManager.onOpen('modal-animated', (modal) => {
  setTimeout(() => {
    modal.style.opacity = '1';
  }, 10);
});