/*
 * ============================================================
 *  PROSTACHOCK — Menu Mobile Ergonomique
 *  Fichier : prostachock_mobile_menu.css
 *
 *  À placer dans : /themes/[ton-theme]/css/
 *  Et charger APRÈS megamenu.css dans le head (ou via theme.css)
 *
 *  ⚠️  Ne touche à RIEN en desktop (tout est dans @media max-width:767px)
 *  ✅  Compatible ETS Megamenu — zero conflit
 * ============================================================
 */

@media (max-width: 767px) {

    /* ══════════════════════════════════════════════════
       1. CACHER le burger bouton original en haut à gauche
          et le remplacer par notre bottom nav
    ══════════════════════════════════════════════════ */

    /* On cache le toggle hamburger original */
    .ybc-menu-toggle {
        display: none !important;
    }

    /* On cache le menu drawer original */
    .ets_mm_megamenu .mm_menus_ul {
        display: none !important;
        visibility: hidden !important;
    }

    /* Quand le sheet est ouvert, on ré-affiche la ul via notre classe JS */
    .ets_mm_megamenu .mm_menus_ul.psm-sheet-open {
        display: block !important;
        visibility: visible !important;
    }

    /* ══════════════════════════════════════════════════
       2. BOTTOM NAV — barre fixe en bas
    ══════════════════════════════════════════════════ */

    #psm-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: #ffffff;
        border-top: 1px solid #E5E7EB;
        display: flex;
        align-items: stretch;
        z-index: 99999;
        /* safe area iOS */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    }

    .psm-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px 4px;
        position: relative;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s;
        border-radius: 12px;
        margin: 4px 2px;
    }

    .psm-nav-item:active {
        background: #F3F4F6;
    }

    .psm-nav-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .psm-nav-icon svg {
        width: 22px;
        height: 22px;
    }

    .psm-nav-label {
        font-size: 10px;
        font-weight: 600;
        color: #9CA3AF;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        line-height: 1;
        white-space: nowrap;
    }

    .psm-nav-item.psm-active .psm-nav-label {
        color: #D62828;
    }

    .psm-nav-item.psm-active::before {
        content: '';
        position: absolute;
        top: -4px; left: 50%;
        transform: translateX(-50%);
        width: 28px; height: 3px;
        background: #D62828;
        border-radius: 0 0 4px 4px;
    }

    /* Badge panier */
    .psm-cart-badge {
        position: absolute;
        top: 2px;
        right: calc(50% - 18px);
        width: 16px;
        height: 16px;
        background: #D62828;
        color: white;
        border-radius: 50%;
        font-size: 9px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    /* Décaler le contenu de la page pour ne pas être caché par la bottom nav */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ══════════════════════════════════════════════════
       3. OVERLAY
    ══════════════════════════════════════════════════ */

    #psm-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 100000;
        -webkit-tap-highlight-color: transparent;
    }

    #psm-overlay.psm-open {
        display: block;
        animation: psmFadeIn 0.25s ease;
    }

    @keyframes psmFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* ══════════════════════════════════════════════════
       4. BOTTOM SHEET — le menu catégories
    ══════════════════════════════════════════════════ */

    #psm-sheet {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #ffffff;
        border-radius: 24px 24px 0 0;
        z-index: 100001;
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
        /* safe area iOS */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #psm-sheet.psm-open {
        transform: translateY(0);
    }

    /* Poignée */
    .psm-handle {
        width: 36px; height: 4px;
        background: #D1D5DB;
        border-radius: 2px;
        margin: 10px auto 0;
        flex-shrink: 0;
    }

    /* Header du sheet */
    .psm-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px 8px;
        flex-shrink: 0;
    }

    .psm-sheet-title {
        font-size: 18px;
        font-weight: 700;
        color: #111827;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .psm-sheet-close {
        width: 32px; height: 32px;
        border-radius: 50%;
        border: none;
        background: #F3F4F6;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 15px;
        color: #6B7280;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s;
    }

    .psm-sheet-close:active { background: #E5E7EB; }

    /* ══════════════════════════════════════════════════
       5. MENU ITEMS dans le sheet — redesign complet
    ══════════════════════════════════════════════════ */

    /* Corps scrollable du sheet */
    .psm-sheet-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        padding: 4px 14px 20px;
        scrollbar-width: none;
    }

    .psm-sheet-body::-webkit-scrollbar { display: none; }

    /* On override les styles ETS Megamenu pour les li dans notre sheet */
    #psm-sheet .mm_menus_ul {
        display: block !important;
        visibility: visible !important;
        background: transparent !important;
        float: none !important;
        width: 100% !important;
        position: static !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* Cacher le bouton "close_menu" natif d'ETS (on a notre propre header) */
    #psm-sheet .mm_menus_ul .close_menu {
        display: none !important;
    }

    /* Chaque item de menu principal */
    #psm-sheet .mm_menus_ul .mm_menus_li {
        float: none !important;
        width: 100% !important;
        border: none !important;
        margin-bottom: 6px !important;
        overflow: visible !important;
        border-top: none !important;
    }

    /* Lien principal de chaque item */
    #psm-sheet .mm_menus_ul .mm_menus_li > a.ets_mm_url {
        display: flex !important;
        align-items: center !important;
        padding: 14px 16px !important;
        background: #F8FAFB !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #111827 !important;
        text-decoration: none !important;
        border: 1.5px solid transparent !important;
        transition: all 0.15s !important;
        min-height: 52px !important; /* tap target 44px+ */
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        width: 100% !important;
        z-index: auto !important;
    }

    #psm-sheet .mm_menus_ul .mm_menus_li > a.ets_mm_url:active {
        background: #EEF1F5 !important;
    }

    /* Item avec sous-menu ouvert */
    #psm-sheet .mm_menus_ul .mm_menus_li.psm-expanded > a.ets_mm_url {
        border-color: #D62828 !important;
        background: #FFF0F0 !important;
        border-radius: 14px 14px 0 0 !important;
    }

    /* Icône FA dans le lien */
    #psm-sheet .mm_menus_ul .mm_menus_li > a .mm_menu_content_title i.fa {
        font-size: 18px !important;
        margin-right: 10px !important;
        color: #D62828 !important;
        width: 22px !important;
        text-align: center !important;
    }

    /* Flèche accordéon (la span .arrow d'ETS) */
    #psm-sheet .mm_menus_ul .arrow {
        position: relative !important;
        right: auto !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        background: #E5E7EB !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        transition: transform 0.25s, background 0.15s !important;
        cursor: pointer !important;
    }

    #psm-sheet .mm_menus_ul .arrow::before {
        border: none !important;
        border-right: 2px solid #6B7280 !important;
        border-bottom: 2px solid #6B7280 !important;
        content: "" !important;
        display: block !important;
        height: 8px !important;
        width: 8px !important;
        transform: rotate(45deg) translate(-2px, -2px) !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        transition: transform 0.25s !important;
    }

    #psm-sheet .mm_menus_ul .arrow::after {
        display: none !important;
    }

    #psm-sheet .mm_menus_ul .arrow.opened {
        background: #D62828 !important;
        transform: rotate(90deg) !important;
    }

    #psm-sheet .mm_menus_ul .arrow.opened::before {
        border-color: #ffffff !important;
    }

    /* ── Sous-menu (mm_columns_ul) ── */
    #psm-sheet .mm_menus_ul .mm_columns_ul {
        display: none !important;
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: #ffffff !important;
        border: 1.5px solid #E5E7EB !important;
        border-top: none !important;
        border-radius: 0 0 14px 14px !important;
        padding: 4px 0 6px !important;
        margin-bottom: 4px !important;
        box-shadow: none !important;
        transform: none !important;
    }

    #psm-sheet .mm_menus_ul .mm_columns_ul.active {
        display: block !important;
        float: none !important;
        clear: both !important;
    }

    /* Chaque colonne dans le sous-menu */
    #psm-sheet .mm_columns_li {
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Chaque bloc dans la colonne */
    #psm-sheet .mm_blocks_li {
        padding: 0 !important;
    }

    /* Les liens de sous-catégorie (générés par ETS dans les blocs) */
    #psm-sheet .ets_mm_categories li a,
    #psm-sheet .mm_blocks_ul a,
    #psm-sheet .ets_mm_block_content a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #374151 !important;
        border-bottom: 1px solid #F3F4F6 !important;
        text-decoration: none !important;
        min-height: 44px !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        background: transparent !important;
        transition: background 0.12s !important;
    }

    #psm-sheet .ets_mm_categories li a:active,
    #psm-sheet .mm_blocks_ul a:active {
        background: #F9FAFB !important;
    }

    #psm-sheet .ets_mm_categories li:last-child a,
    #psm-sheet .mm_blocks_ul li:last-child a {
        border-bottom: none !important;
    }

    /* Puce rouge devant chaque sous-catégorie */
    #psm-sheet .ets_mm_categories li a::before,
    #psm-sheet .mm_blocks_ul li a::before {
        content: '' !important;
        width: 6px !important;
        height: 6px !important;
        background: #D62828 !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    /* Cacher les éléments non pertinents en mobile */
    #psm-sheet .mm_block_type_product,
    #psm-sheet .ets_mm_block.hidden-block-in-mobile,
    #psm-sheet .ets_mm_block_content.hide-mobile {
        display: none !important;
    }

    /* ══════════════════════════════════════════════════
       6. SEARCH SHEET — plein écran
    ══════════════════════════════════════════════════ */

    #psm-search-sheet {
        position: fixed;
        inset: 0;
        background: #ffffff;
        z-index: 100002;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        display: flex;
        flex-direction: column;
    }

    #psm-search-sheet.psm-open {
        transform: translateY(0);
    }

    .psm-search-bar-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 54px 14px 14px;
        border-bottom: 1px solid #E5E7EB;
        flex-shrink: 0;
    }

    .psm-search-inner {
        flex: 1;
        background: #F3F4F6;
        border-radius: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
    }

    .psm-search-inner input {
        flex: 1;
        border: none;
        background: none;
        font-size: 16px; /* 16px pour éviter le zoom iOS */
        color: #111827;
        outline: none;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .psm-search-inner input::placeholder { color: #9CA3AF; }

    .psm-search-cancel {
        background: none;
        border: none;
        font-size: 14px;
        font-weight: 600;
        color: #D62828;
        cursor: pointer;
        padding: 4px 0;
        white-space: nowrap;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        -webkit-tap-highlight-color: transparent;
    }

    /* ══════════════════════════════════════════════════
       7. AJUSTEMENTS GÉNÉRAUX page mobile
    ══════════════════════════════════════════════════ */

    /* S'assurer que le menu ETS original ne prend pas de place visuelle */
    .ets_mm_megamenu {
        min-height: 0 !important;
    }

    .ets_mm_megamenu .ets_mm_megamenu_content {
        padding: 0 !important;
    }

    .ets_mm_megamenu_content .container {
        padding: 0 !important;
        background: transparent !important;
    }

    .ets_mm_megamenu_content_content {
        min-height: 0 !important;
    }

}
/* fin @media max-width: 767px */