/**
 * Pagnifik Créa — Header CSS v7 (Ultra-Premium & Clean Mobile)
 * Correction de l'affichage des SVG inline pour le panier.
 * Amélioration du dimensionnement et alignement pour Desktop & Mobile.
 *
 * @package Pagnifikcrea
 */

/* =============================================================================
   1. RESET & CACHE DES PARASITES
   ============================================================================= */
.page-header,
#page-header-wrap,
.page-header-wrap,
.page-header-title,
.page-subheader,
#page-subheader,
.page-header-inner,
#page-header-inner,
.ocean-page-header,
.site-header-title-area,
#top-bar,
#top-bar-wrap,
.top-bar {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* =============================================================================
   2. DESKTOP : TRANSITIONS & FOND DU HEADER
   ============================================================================= */
@media (min-width: 961px) {
    /* Page d'accueil : Fixé & Transparent */
    body.home #site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 9999 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: background 350ms ease, border 350ms ease, box-shadow 350ms ease !important;
    }

    body.home #site-header-inner,
    body.home .site-header-inner {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* Page d'accueil au scroll : Fond noir translucide pleine largeur */
    body.home #site-header.pkc-scrolled {
        background: rgba(18, 15, 13, 0.94) !important;
        background-color: rgba(18, 15, 13, 0.94) !important;
        backdrop-filter: blur(24px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40) !important;
    }

    /* Autres pages : Toujours sombre */
    body:not(.home) #site-header {
        background: #1C1917 !important;
        background-color: #1C1917 !important;
        position: sticky !important;
        top: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 9999 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    }
}

/* Alignement interne global */
#site-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 96px !important;
    padding: 0 clamp(20px, 5vw, 64px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* =============================================================================
   3. LOGO
   ============================================================================= */
#site-logo,
#site-logo-inner {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    max-width: 320px !important;
}

#site-logo img,
.custom-logo-link img {
    max-height: 56px !important;
    width: auto !important;
    filter: brightness(0) invert(1) !important; /* Force le blanc */
    transition: filter 300ms ease !important;
}

/* =============================================================================
   4. DESKTOP : NAVIGATION & LIENS DU MENU
   ============================================================================= */
#site-navigation-wrap {
    float: none !important;
    display: flex !important;
    align-items: center !important;
}

#site-navigation ul.main-menu {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
}

/* Taille de police augmentée pour le menu Desktop */
#site-navigation ul.main-menu > li > a,
#site-navigation ul.main-menu > li > a .text-wrap {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.25rem !important; /* Augmenté à 20px */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.90) !important;
    padding: 12px 24px !important;
    border-radius: 30px !important;
    transition: all 250ms ease !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#site-navigation ul.main-menu > li > a:hover,
#site-navigation ul.main-menu > li > a:hover .text-wrap,
#site-navigation ul.main-menu > li.current-menu-item > a,
#site-navigation ul.main-menu > li.current-menu-item > a .text-wrap {
    color: #D97706 !important;
    background: rgba(217, 119, 6, 0.12) !important;
}

/* =============================================================================
   5. DESKTOP : BOUTONS D'ICONES (Panier & Recherche)
   ============================================================================= */

/* Supprime les icônes de police par défaut d'OceanWP */
#site-navigation ul.main-menu li.woo-menu-icon a i,
#site-navigation ul.main-menu li.search-toggle-li a i {
    display: none !important;
}

/* Boutons ronds */
#site-navigation ul.main-menu li.woo-menu-icon a,
#site-navigation ul.main-menu li.search-toggle-li a {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: transparent !important; /* Cache le texte résiduel */
    position: relative !important;
    cursor: pointer !important;
}

/* Icône de recherche SVG Base64 */
#site-navigation ul.main-menu li.search-toggle-li a::before {
    content: '' !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjIxIiB5MT0iMjEiIHgyPSIxNi42NSIgeTI9IjE2LjY1Ii8+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCIvPjwvc3ZnPg==") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform 250ms ease !important;
}

/* Style de l'icône SVG du panier injectée via PHP */
.pkc-cart-svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #ffffff !important;
    fill: none !important;
    transition: transform 250ms ease !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
}

/* Reset sur l'ancienne méthode */
#site-navigation ul.main-menu li.woo-menu-icon a.wcmenucart::before {
    display: none !important;
}

#site-navigation ul.main-menu li.woo-menu-icon a:hover .pkc-cart-svg,
#site-navigation ul.main-menu li.search-toggle-li a:hover::before {
    transform: translate(-50%, -50%) scale(1.08) !important;
}

#site-navigation ul.main-menu li.woo-menu-icon a:hover,
#site-navigation ul.main-menu li.search-toggle-li a:hover {
    background: rgba(217, 119, 6, 0.15) !important;
    border-color: rgba(217, 119, 6, 0.40) !important;
}

/* Badge nombre panier - Style luxe moderne */
#site-navigation ul.main-menu li.woo-menu-icon .wcmenucart-details.count,
#site-navigation ul.main-menu li.woo-menu-icon .wcmenucart-count span.count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: #D97706 !important;
    color: #FFFFFF !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #120F0D !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;
    z-index: 10 !important;
}

/* Cache text résiduel count */
.wcmenucart-count {
    color: transparent !important;
}

/* =============================================================================
   6. RESPONSIVE / MOBILE (Disposition corrigée & alignement à droite)
   ============================================================================= */
@media (max-width: 960px) {
    /* Pour que position: sticky fonctionne, aucun parent ne doit être overflow: hidden */
    body, #outer-wrap, #wrap {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    /* Fond sombre solide obligatoire sur mobile, rendu sticky */
    body.home #site-header,
    body.home #site-header.transparent-header,
    body #site-header,
    body #site-header.transparent-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
        background: #1C1917 !important;
        background-color: #1C1917 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        height: 80px !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #site-header-inner,
    .site-header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 80px !important;
        padding: 0 20px !important;
        background: transparent !important;
        background-color: transparent !important;
        max-width: 100% !important;
    }

    #site-logo img,
    .custom-logo {
        max-height: 40px !important;
    }

    #site-navigation-wrap {
        display: none !important;
    }

    /* Force l'affichage et aligne la zone des boutons tout à fait à DROITE */
    .oceanwp-mobile-menu-icon,
    body #site-header .oceanwp-mobile-menu-icon,
    #site-header-inner .oceanwp-mobile-menu-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 16px !important; /* Plus d'espace pour détacher le panier du logo */
        float: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        flex-grow: 1 !important; /* Pousse les icônes vers la droite */
    }

    /* 6.1 BOUTON PANIER MOBILE (Stylisé) */
    .oceanwp-mobile-menu-icon a.wcmenucart {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: transparent !important;
        position: relative !important;
    }

    /* Cache l'icône de police et texte du panier mobile */
    .oceanwp-mobile-menu-icon a.wcmenucart i,
    .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-text {
        display: none !important;
    }

    /* Enlève le before du SVG cart */
    .oceanwp-mobile-menu-icon a.wcmenucart::before {
        display: none !important;
    }

    /* Style de l'icône SVG du panier injectée via PHP */
    .oceanwp-mobile-menu-icon a.wcmenucart .pkc-cart-svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #ffffff !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
    }

    /* Badge nombre panier mobile */
    .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-details.count,
    .oceanwp-mobile-menu-icon a.wcmenucart .wcmenucart-count span.count {
        position: absolute !important;
        top: -3px !important;
        right: -3px !important;
        background: #D97706 !important;
        color: #FFFFFF !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1.5px solid #1C1917 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        z-index: 10 !important;
    }

    /* 6.2 HAMBURGER MOBILE (Aucun texte, aligné bord droit) */
    .oceanwp-mobile-menu-icon a.mobile-menu {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: transparent !important;
        cursor: pointer !important;
        position: relative !important;
        text-decoration: none !important;
    }

    /* Cache FontAwesome et les textes "Menu" / "Fermer" restants de manière agressive */
    body #site-header .oceanwp-mobile-menu-icon a.mobile-menu i,
    body #site-header .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-text,
    body #site-header .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-close-text,
    #site-header .oceanwp-mobile-menu-icon a.mobile-menu i,
    #site-header .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-text,
    #site-header .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-close-text,
    .oceanwp-mobile-menu-icon a.mobile-menu i,
    .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-text,
    .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-close-text,
    a.mobile-menu span.oceanwp-text,
    a.mobile-menu span.oceanwp-close-text {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        font-size: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        line-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        position: absolute !important;
    }

    /* Injecte l'icône Hamburger SVG Base64 */
    .oceanwp-mobile-menu-icon a.mobile-menu::before {
        content: '' !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PGxpbmUgeDE9IjMiIHkxPSIxMiIgeDI9IjIxIiB5Mj0iMTIiLz48bGluZSB4MT0iMyIgeTE9IjYiIHgyPSIyMSIgeTI9IjYiLz48bGluZSB4MT0iMyIgeTE9IjE4IiB4Mj0iMjEiIHkyPSIxOCIvPjwvc3ZnPg==") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    /* Quand le menu mobile est ouvert (optionnel, si la classe toggle existe) */
    .oceanwp-mobile-menu-icon a.mobile-menu.opened::before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjE4IiB5MT0iNiIgeDI9IjYiIHkyPSIxOCIvPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjE4IiB5Mj0iMTgiLz48L3N2Zz4=") !important;
    }
}