/* =====================================================
   MOBILE POPUPS — Optimisation complète mobile
   Tous les modaux, overlays et panneaux de la boutique
   ===================================================== */

/* =====================================================
   VARIABLES PARTAGÉES
   ===================================================== */
:root {
    --popup-radius-top: 24px;      /* Coins arrondis en haut (bottom sheet) */
    --popup-safe-bottom: env(safe-area-inset-bottom, 0px);
    --popup-safe-top: env(safe-area-inset-top, 0px);
    --touch-min: 48px;             /* Taille minimale zone tactile WCAG */
    --popup-backdrop: rgba(0, 0, 0, 0.6);
    --popup-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --popup-z-base: 9999;
}


/* =====================================================
   1. BASE MODALE — FOND + CENTRAGE
      Styles communs à TOUS les modaux
   ===================================================== */

/* Fond semi-transparent */
.modal,
.product-modal,
.delivery-overlay {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Bouton fermer — zone tactile large */
.modal-close,
.delivery-close,
.close-modal {
    min-width: var(--touch-min) !important;
    min-height: var(--touch-min) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Contenu scrollable — inertie tactile */
.modal-content,
.modal-body,
.delivery-panel,
.delivery-panel-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}


/* =====================================================
   2. PETITS MOBILES (≤ 480px)
      Bottom-sheet style pour tous les modaux
   ===================================================== */
@media (max-width: 480px) {

    /* --- 2.1 Fond backdrop --- */
    .modal:not(.mp-page-active),
    .product-modal:not(.mp-page-active) {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    /* --- 2.2 Contenu — bottom sheet pleine largeur --- */
    .modal:not(.mp-page-active) .modal-content,
    .modal-content:not(.mp-page-active .modal-content) {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--popup-radius-top) var(--popup-radius-top) 0 0 !important;
        max-height: 92vh !important;
        margin: 0 !important;
        padding: 1.25rem 1rem !important;
        padding-bottom: calc(1.25rem + var(--popup-safe-bottom)) !important;
        animation: popupSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Indicateur de drag (trait en haut) */
    .modal .modal-content::before,
    .modal-content::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 0 auto 1.25rem;
    }

    /* --- 2.3 En-tête modal --- */
    .modal-header {
        padding: 0 0 1rem !important;
        margin-bottom: 0.75rem !important;
        flex-wrap: nowrap;
    }

    .modal-header h2,
    .modal-header h3 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        padding-right: 2.5rem; /* espace pour le bouton ✕ */
    }

    /* --- 2.4 Bouton fermer --- */
    .modal-close,
    .close-modal {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        width: 36px !important;
        height: 36px !important;
        background: #f3f4f6 !important;
        border-radius: 50% !important;
        font-size: 1rem !important;
    }

    /* --- 2.5 Corps modal --- */
    .modal-body {
        padding: 0 !important;
        max-height: 65vh;
        overflow-y: auto;
    }

    /* --- 2.6 Champs de formulaire — plus grands sur tactile --- */
    .modal .form-group input,
    .modal .form-group textarea,
    .modal .form-group select,
    .modal input[type="text"],
    .modal input[type="email"],
    .modal input[type="password"],
    .modal input[type="tel"],
    .modal input[type="number"],
    .modal select,
    .modal textarea {
        font-size: 16px !important; /* évite le zoom auto iOS */
        min-height: var(--touch-min) !important;
        padding: 0.75rem 0.875rem !important;
        border-radius: 10px !important;
        -webkit-appearance: none;
    }

    /* form-row : 1 colonne sur petits mobiles */
    .modal .form-row,
    .modal-content .form-row {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* --- 2.7 Boutons d'action --- */
    .modal-actions,
    .modal .modal-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding-top: 1rem !important;
        margin-top: 0.5rem !important;
    }

    .modal-actions .btn,
    .modal-actions button {
        width: 100% !important;
        min-height: var(--touch-min) !important;
        font-size: 1rem !important;
        justify-content: center !important;
    }

    /* Ordre : bouton principal en premier */
    .modal-actions .btn-primary,
    .modal-actions button[type="submit"] {
        order: -1;
    }


    /* ===========================
       2.8 MODAL PRODUIT (boutique)
       =========================== */
    .product-modal .modal-content {
        border-radius: var(--popup-radius-top) var(--popup-radius-top) 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .modal-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    /* Image produit compacte */
    .modal-images {
        position: relative !important;
        max-height: 240px !important;
        overflow: hidden;
    }

    .main-image {
        border-radius: 0 !important;
        max-height: 240px !important;
        aspect-ratio: auto !important;
    }

    .main-image img {
        height: 240px !important;
        object-fit: cover !important;
    }

    .thumbnail-images {
        display: none !important; /* masquées sur petits mobiles */
    }

    /* Infos produit */
    .modal-info {
        padding: 1.25rem 1rem !important;
        padding-bottom: calc(1.25rem + var(--popup-safe-bottom)) !important;
    }

    .modal-info h2 {
        font-size: 1.3rem !important;
        margin-bottom: 0.5rem !important;
    }

    .modal-price {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    .modal-description {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
        padding-bottom: 1rem !important;
        /* Résumé tronqué si trop long */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .modal-variants {
        margin-bottom: 1rem !important;
    }

    .variant-select {
        font-size: 16px !important;
        min-height: var(--touch-min) !important;
        -webkit-appearance: none;
    }

    .modal-quantity {
        margin-bottom: 1rem !important;
    }

    #modalAddToCart {
        min-height: var(--touch-min) !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }


    /* ===========================
       2.9 MODAL CONFIRMATION
       =========================== */
    #confirmModal .modal-content {
        text-align: center;
        padding: 2rem 1.25rem calc(2rem + var(--popup-safe-bottom)) !important;
    }

    #confirmModal h3 {
        font-size: 1.15rem !important;
        margin-bottom: 0.75rem !important;
    }

    #confirmModal p {
        font-size: 0.9rem !important;
        color: #6b7280;
        margin-bottom: 1.5rem !important;
    }


    /* ===========================
       2.10 MODAL CHANGEMENT MDP
           & AJOUT D'ADRESSE
       =========================== */
    #changePasswordModal .modal-content,
    #addAddressModal .modal-content {
        max-height: 88vh !important;
    }


    /* ===========================
       2.11 MODAL COMMANDE (admin)
           — grand modal plein écran
       =========================== */
    #orderDetailsModal .modal-content,
    .modal .modal-content.large {
        max-height: 95vh !important;
        border-radius: var(--popup-radius-top) var(--popup-radius-top) 0 0 !important;
        padding: 1rem 0.875rem !important;
    }

    #orderDetailsModal .modal-content::before,
    .modal .modal-content.large::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 0 auto 1rem;
    }


    /* ===========================
       2.12 MODALS ADMIN — produits
            & collections
       =========================== */
    #productModal .modal-content,
    #collectionModal .modal-content {
        max-height: 92vh !important;
    }

    #collectionModal .modal-body,
    #productModal .modal-body {
        max-height: 70vh !important;
        padding: 1rem !important;
    }

    .admin-panel .modal .modal-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .admin-panel .modal .modal-actions .btn {
        width: 100% !important;
        min-height: var(--touch-min) !important;
        justify-content: center !important;
    }

    /* Promo en masse */
    #bulkPromoModal .modal-content {
        max-height: 85vh !important;
    }
}


/* =====================================================
   3. TABLETTES (481px – 768px)
      Modale centrée + padding adapté
   ===================================================== */
@media (min-width: 481px) and (max-width: 768px) {

    .modal:not(.mp-page-active),
    .product-modal:not(.mp-page-active) {
        padding: 1rem !important;
        align-items: center !important;
    }

    .modal:not(.mp-page-active) .modal-content,
    .modal-content:not(.mp-page-active .modal-content) {
        width: 95% !important;
        max-width: 540px !important;
        max-height: 90vh !important;
        border-radius: 18px !important;
        padding: 1.75rem 1.5rem !important;
        padding-bottom: calc(1.75rem + var(--popup-safe-bottom)) !important;
        animation: popupFadeScale 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .modal:not(.mp-page-active) .modal-content.large {
        max-width: 98% !important;
        max-height: 92vh !important;
    }

    /* Grid produit — colonne sur tablette */
    .modal-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 1.5rem !important;
    }

    .modal-images {
        max-height: 280px !important;
    }

    .main-image {
        max-height: 280px !important;
    }

    /* Champs : empêche zoom iOS */
    .modal input,
    .modal select,
    .modal textarea {
        font-size: 16px !important;
    }

    /* Boutons côte à côte sur tablette */
    .modal-actions {
        flex-direction: row !important;
    }
}


/* =====================================================
   4. PANNEAU DE LIVRAISON (delivery overlay)
      Optimisé séparément car structure différente
   ===================================================== */
@media (max-width: 480px) {

    .delivery-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .delivery-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--popup-radius-top) var(--popup-radius-top) 0 0 !important;
        max-height: 93vh !important;
        animation: popupSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding-bottom: var(--popup-safe-bottom) !important;
    }

    /* Indicateur drag */
    .delivery-panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 0.875rem auto 0;
    }

    .delivery-panel-header {
        padding: 0.75rem 1rem 1rem !important;
    }

    .delivery-panel-header h3 {
        font-size: 1.1rem !important;
    }

    .delivery-panel-body {
        padding: 0 1rem 1rem !important;
        max-height: calc(93vh - 70px);
        overflow-y: auto;
    }

    /* Étapes */
    .delivery-steps {
        gap: 0 !important;
        margin-bottom: 1.25rem !important;
        justify-content: center;
    }

    .delivery-step-indicator {
        font-size: 0.75rem !important;
        gap: 0.25rem !important;
    }

    .delivery-step-indicator .step-num {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.8rem !important;
    }

    .step-connector {
        width: 20px !important;
        min-width: 20px !important;
    }

    /* Options de livraison */
    .delivery-option {
        padding: 0.875rem !important;
        gap: 0.75rem !important;
        align-items: flex-start !important;
        min-height: var(--touch-min) !important;
    }

    .delivery-option-content h4 {
        font-size: 0.9rem !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }

    .delivery-option-content p {
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
    }

    .delivery-option-price {
        font-size: 0.9rem !important;
        white-space: nowrap;
    }

    .delivery-badge {
        font-size: 0.68rem !important;
        padding: 0.2rem 0.5rem !important;
    }

    /* Champs adresse livraison */
    .delivery-address-section input,
    #glsAddressName,
    #glsAddressStreet,
    #glsAddressZip,
    #glsAddressCity,
    #deliveryAddressName,
    #deliveryAddressInput,
    #deliveryAddressZip,
    #deliveryAddressCity {
        font-size: 16px !important; /* évite zoom iOS */
        min-height: 44px !important;
        padding: 0.65rem 0.875rem !important;
    }

    /* Calendrier */
    .calendar-header {
        padding: 0.5rem 0 !important;
    }

    .calendar-nav-btn {
        min-width: var(--touch-min) !important;
        min-height: var(--touch-min) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .calendar-weekday {
        font-size: 0.72rem !important;
    }

    .calendar-day {
        min-height: 38px !important;
        font-size: 0.85rem !important;
    }

    /* Boutons validation */
    .delivery-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem 0 0 !important;
    }

    .delivery-actions .btn {
        width: 100% !important;
        min-height: var(--touch-min) !important;
        font-size: 1rem !important;
        justify-content: center !important;
    }

    /* Bouton principal en premier */
    #deliveryConfirm {
        order: -1;
    }

    /* Résumé livraison */
    .delivery-summary {
        font-size: 0.9rem !important;
    }

    .summary-row {
        padding: 0.5rem 0 !important;
    }

    .summary-row.total {
        font-size: 1rem !important;
    }

    /* GLS sub-options */
    .gls-suboption {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {

    .delivery-overlay {
        align-items: center !important;
        padding: 1rem !important;
    }

    .delivery-panel {
        width: 96% !important;
        border-radius: 18px !important;
        max-height: 90vh !important;
    }

    .delivery-panel-body {
        max-height: calc(90vh - 80px);
        overflow-y: auto;
    }

    .delivery-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .delivery-actions .btn {
        width: 100% !important;
        min-height: var(--touch-min) !important;
        justify-content: center !important;
    }

    #deliveryConfirm {
        order: -1;
    }
}


/* =====================================================
   5. NOTIFICATIONS / TOASTS
      Repositionnement bas d'écran sur mobile
   ===================================================== */
@media (max-width: 768px) {

    .notification {
        left: 1rem !important;
        right: 1rem !important;
        bottom: calc(1rem + var(--popup-safe-bottom)) !important;
        transform: none !important;
        border-radius: 14px !important;
        padding: 0.875rem 1rem !important;
        font-size: 0.9rem !important;
        max-width: calc(100% - 2rem) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    }

    .notification.show {
        bottom: calc(1rem + var(--popup-safe-bottom)) !important;
    }

    .notification i {
        font-size: 1.25rem !important;
    }
}


/* =====================================================
   6. SIDEBAR ADMIN — Overlay
   ===================================================== */
@media (max-width: 768px) {
    .sidebar-overlay {
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }
}


/* =====================================================
   7. SCROLL DANS LES MODAUX — masque la scrollbar
   ===================================================== */
/* Desktop : scrollbar fine et discrète */
.modal-body::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    width: 3px;
}

.modal-body::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

/* Mobile : scrollbar complètement cachée */
@media (max-width: 768px) {
    .delivery-panel-body::-webkit-scrollbar,
    .modal-content::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    .delivery-panel-body,
    .modal-content,
    .modal-body {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
}


/* =====================================================
   8. ACCESSIBILITÉ — focus visible, tap highlight
   ===================================================== */
.modal button,
.modal a,
.modal input,
.modal select,
.modal textarea,
.delivery-panel button,
.delivery-panel input,
.delivery-option {
    -webkit-tap-highlight-color: transparent;
}

/* Focus visible pour navigation clavier */
.modal button:focus-visible,
.delivery-panel button:focus-visible {
    outline: 2px solid #7FB069 !important;
    outline-offset: 2px !important;
}


/* =====================================================
   9. ANIMATIONS
   ===================================================== */

/* Bottom sheet slide up */
@keyframes popupSlideUp {
    from {
        transform: translateY(60px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal centrée fade + scale */
@keyframes popupFadeScale {
    from {
        transform: scale(0.94);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* =====================================================
   10. RÉDUCTION D'ANIMATIONS (accessibilité)
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .modal .modal-content,
    .delivery-panel,
    .notification {
        animation: none !important;
        transition: opacity 0.15s ease !important;
    }
}


/* =====================================================
   11. SAFE AREA — iPhone notch & home bar
   ===================================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {

        /* Bottom sheets */
        .modal .modal-content,
        .delivery-panel {
            padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
        }

        /* Notification toast au-dessus de la home bar */
        .notification.show {
            bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        }

        /* Boutons d'action dans les modaux */
        .modal-actions,
        .delivery-actions {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }
    }
}




/* =====================================================
   12. MODE PAGE MOBILE (mobile-pages.js)
       Transforme les modaux en vraies pages sur mobile.
       Priorité maximale — doit écraser toutes les règles
       des sections 1-11 et des autres fichiers CSS.
   ===================================================== */

/* ── Masquer la page derrière quand un modal est en mode page ── */
body.mp-page-open > *:not(.modal):not(.delivery-overlay):not(.mp-global-overlay) {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ── Header ← Retour : masqué sur desktop ── */
.mp-page-header {
    display: none;
}

/* ── Tout ce qui suit s'applique uniquement sur mobile ── */
@media (max-width: 767px) {

    /* ──────────────────────────────────────────────
       Header ← Retour (injecté par mobile-pages.js)
       ────────────────────────────────────────────── */
    .mp-page-mode .mp-page-header,
    .mp-page-active .mp-page-header,
    .mp-page-active > .modal-content > .mp-page-header {
        display: flex !important;
        align-items: center !important;
        gap: 0.875rem !important;
        padding: calc(0.875rem + env(safe-area-inset-top, 0px)) 1rem 0.875rem !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        background: #fff !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .mp-back-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 50% !important;
        background: #f3f4f6 !important;
        border: none !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #374151 !important;
        font-size: 1rem !important;
        flex-shrink: 0 !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .mp-back-btn:active {
        background: #e5e7eb !important;
    }

    .mp-page-title {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ──────────────────────────────────────────────
       MODAL en mode page — conteneur plein écran
       ────────────────────────────────────────────── */
    /* ── Modal en mode page plein écran ── */
    .modal.mp-page-active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 99999 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 !important;
        background: #fff !important;
        animation: none !important;
        overflow: hidden !important;
    }

    /* Header ← Retour : premier enfant de .modal, hors scroll */
    .modal.mp-page-active > .mp-page-header {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: calc(0.875rem + env(safe-area-inset-top, 0px)) 1rem 0.875rem !important;
        background: #fff !important;
        border-bottom: 1px solid #f0f0f0 !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
    }

    /* Fond sombre masqué */
    .modal.mp-page-active .modal-overlay {
        display: none !important;
    }

    /* modal-content : prend tout l'espace restant et scroll */
    .modal.mp-page-active .modal-content,
    .modal.mp-page-active .modal-content.large {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
        display: block !important;
        animation: none !important;
        position: static !important;
    }

    /* Fond sombre disparaît */
    .modal.mp-page-active .modal-overlay {
        display: none !important;
    }

    /* modal-content : wrapper flex colonne, PAS de scroll ici */


    /* Supprimer l'indicateur drag (::before) */
    .modal.mp-page-active .modal-content::before {
        display: none !important;
    }

    /* Masquer le ✕ natif */
    .modal.mp-page-active .modal-close {
        display: none !important;
    }

    /* Masquer le header original du modal (titre remplacé par mp-page-header) */
    .modal.mp-page-active .modal-header {
        display: none !important;
    }

    /* Masquer le h3 redondant (le titre est dans mp-page-title) */
    .modal.mp-page-active .modal-content > h3:first-of-type {
        display: none !important;
    }

    /* Zone scrollable = tout ce qui suit le header */
    /* Les enfants de modal-content ne scrollent PAS — c'est modal-content qui scrolle */
    .modal.mp-page-active .modal-content > *:not(.modal-close) {
        overflow: visible !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    /* Annuler les max-height des sous-éléments qui bloqueraient le scroll */
    .modal.mp-page-active .modal-body,
    .modal.mp-page-active .modal-header,
    .modal.mp-page-active .modal-content > * {
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    /* ──────────────────────────────────────────────
       DELIVERY OVERLAY en mode page
       ────────────────────────────────────────────── */
    .delivery-overlay.mp-page-active {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: flex-start !important;
        padding: 0 !important;
        background: transparent !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }

    /* Fond sombre disparaît */
    .delivery-overlay.mp-page-active .delivery-backdrop {
        display: none !important;
    }

    /* Panel : flex colonne plein écran, overflow:hidden pour neutraliser
       la scrollbar native définie dans delivery-styles.css */
    .delivery-overlay.mp-page-active .delivery-panel {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        overflow: hidden !important;        /* ← neutralise la scrollbar du panel */
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        animation: mpPageEnter 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
        /* Annuler règles section 2/3 */
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    /* Header original du panel → masqué (remplacé par mp-page-header) */
    .delivery-overlay.mp-page-active .delivery-panel-header {
        display: none !important;
    }

    /* mp-page-header dans le panel delivery */
    .delivery-overlay.mp-page-active .mp-page-header {
        display: flex !important;
        align-items: center !important;
        gap: 0.875rem !important;
        padding: calc(0.875rem + env(safe-area-inset-top, 0px)) 1rem 0.875rem !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        background: #fff !important;
        flex-shrink: 0 !important;
    }

    /* Seul le panel-body scroll — UNE SEULE scrollbar */
    .delivery-overlay.mp-page-active .delivery-panel-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;            /* ← la seule scrollbar */
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
        max-height: none !important;            /* annuler max-height: calc(93vh...) */
        min-height: 0 !important;
    }

    /* Masquer le bouton ✕ de fermeture */
    .delivery-overlay.mp-page-active .delivery-close {
        display: none !important;
    }

    /* ──────────────────────────────────────────────
       Animation d'entrée (slide depuis la droite)
       ────────────────────────────────────────────── */
    @keyframes mpPageEnter {
        from { transform: translateX(28px); opacity: 0; }
        to   { transform: translateX(0);    opacity: 1; }
    }
}

/* ── Accessibilité : désactiver animations ── */
@media (prefers-reduced-motion: reduce) {
    .modal.mp-page-active .modal-content,
    .delivery-overlay.mp-page-active .delivery-panel {
        animation: none !important;
    }
}