/*
Theme Name: Yor Child
Theme URI: https://preview.wolfthemes.store/yor/landing/
Description: Thème enfant Yor — correctifs et CSS personnalisé ismaelmaurey.com (Dopamine 360)
Author: WolfThemes / Dopamine 360
Author URI: https://dopamine360.fr
Template: yor
Version: 1.1.2
*/

/* ==========================================================================
   CSS personnalisé — anciennement dans Personnaliser > CSS additionnel (post 7049).
   Un seul fichier, versionné, mis en cache navigateur, survit aux MAJ du thème.
   ========================================================================== */

/* === Masquage WooCommerce === */

.woocommerce-ordering,
.woocommerce-result-count {
    display: none !important;
}

.intro-motion-gallery-title-image {
    display: none !important;
}


/* === MENU DESKTOP : background beige lisible === */

html body.menu-style-absolute #nav-bar.nav-bar,
html body #nav-bar.nav-bar {
    background-color: rgba(236, 219, 203, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06) !important;
}

html body #nav-bar .logo-text,
html body #nav-bar .nav-menu-desktop > li > a,
html body #nav-bar .nav-menu-desktop > li > a .menu-item-text-container {
    color: #222222 !important;
}

html body #nav-bar .cta-container .wolf-core-icon-color-default,
html body #nav-bar .cta-container .wolf-core-icon {
    color: #222222 !important;
}


/* === MOBILE : logo et burger TOUJOURS visibles en noir === */

@media screen and (max-width: 1024px) {

    html body.menu-style-absolute #mobile-bar.nav-bar,
    html body #mobile-bar.nav-bar {
        background-color: rgba(236, 219, 203, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08) !important;
    }

    html body #mobile-bar .logo-text,
    html body.home #mobile-bar .logo-text,
    html body #mobile-bar .logo-link,
    html body #mobile-bar a.logo-link {
        color: #222222 !important;
    }

    html body #mobile-bar .hamburger-btn__hamburger .hamburger-btn__span,
    html body.home #mobile-bar .hamburger-btn__hamburger .hamburger-btn__span {
        background-color: #222222 !important;
    }

    html body #mobile-bar .cta-container .wolf-core-icon-color-default,
    html body #mobile-bar .cta-container .wolf-core-icon,
    html body #mobile-bar .cta-container .wolf-core-social-icon i {
        color: #222222 !important;
    }
}


/* === Journal (blog) : masquer le bloc décoratif "Recent Works / Studio" ===
   Ce bloc vient d'un réglage par défaut du thème (work_display=hover_grid)
   qui s'affiche sur toutes les listes, y compris le blog. Sa vidéo de fond
   est en plus cassée (bug du thème). Le mu-plugin/functions.php retire le bloc du journal ; cette règle est un filet CSS. */
body.is-blog-index .frame {
    display: none !important;
}

/* === HOME : pas de header/menu (la liste de liens de la page sert de menu) === */
html body.home #nav-bar,
html body.home #mobile-bar {
    display: none !important;
}


/* === Journal : sidebar en face des articles + fixe au scroll (desktop) === */
@media screen and (min-width: 1025px) {
    body.is-blog-index .content-wrapper {
        display: flex !important;
        align-items: flex-start !important;
    }
    body.is-blog-index #primary {
        float: none !important;
    }
    body.is-blog-index #secondary {
        float: none !important;
        margin-left: auto !important;
        align-self: stretch !important;
    }
    /* overflow:hidden sur .site-container casserait position:sticky ; clip garde le rognage sans créer de conteneur de scroll */
    body.is-blog-index .site-container {
        overflow: clip !important;
    }
    body.is-blog-index #secondary .sidebar-inner {
        position: sticky !important;
        top: 120px !important; /* sous la barre de menu (98px) */
    }
}



/* === Journal : toujours afficher les articles ===
   Le thème ne révèle les .entry que si la section est visible à 75 % (IntersectionObserver),
   impossible dès que la liste dépasse la hauteur d'écran. On neutralise l'animation d'entrée ici. */
body.is-blog-index #blog-index .entry {
    opacity: 1 !important;
    transform: none !important;
}


/* === HOME : pas de saut au chargement ===
   Avant l'exécution du JS d'intro, la grille est rendue dans le contenu (plus bas), puis déplacée en haut du body.
   On masque le site tant que body.has-intro n'est pas posé. Filet de sécurité : réaffichage forcé après 5 s. */
@keyframes dop-home-reveal { to { visibility: visible; } }
html body.home:has(.intro-motion-gallery-grid-container):not(.has-intro) .site-container {
    visibility: hidden;
    animation: dop-home-reveal 0s linear 5s forwards;
}

/* === HOME mobile : lisibilité du texte d intro (texte seul, sans panneau) ===
   Le texte beige passe sur les interstices beiges de la grille : halo sombre multicouche
   + léger contour pour détacher les lettres, sans rien poser sur les oeuvres. */
@media screen and (max-width: 1024px) {
    html body.home .intro-motion-gallery-grid-container .enter-container h1,
    html body.home .intro-motion-gallery-grid-container .intro-motion-gallery-subtitle-container {
        color: #f4ebe1 !important;
        text-shadow:
            0 0 2px rgba(0, 0, 0, 0.95),
            0 0 6px rgba(0, 0, 0, 0.85),
            0 1px 14px rgba(0, 0, 0, 0.8),
            0 2px 28px rgba(0, 0, 0, 0.6) !important;
        -webkit-text-stroke: 0.35px rgba(0, 0, 0, 0.45);
        paint-order: stroke fill;
    }
    html body.home .intro-motion-gallery-grid-container .enter-btn {
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 8px rgba(0, 0, 0, 0.75));
    }
}


/* === HOME : bouton « Entrez » un peu plus grand === */
html body.home .intro-motion-gallery-grid-container .enter-btn {
    font-size: 13px !important;
    letter-spacing: 0.12em;
    transform: scale(1.1);
    transform-origin: center center;
}



/* === HOME : largeur de viewport verrouillée (pas de dérive horizontale) ===
   Pendant l intro le thème passe .site-container en overflow:unset ; le panneau panier hors-écran
   déborde à droite et la page peut se déplacer latéralement au doigt. clip = rognage sans conteneur
   de scroll (ne casse ni sticky ni fixed, contrairement à hidden sur html+body). */
html:has(body.home),
html body.home {
    overflow-x: clip !important;
}
html body.home .intro-motion-gallery-grid-container {
    overflow: hidden !important;
    touch-action: pan-y !important;
}

.menu-layout-grid #nav-bar, .menu-layout-top-justify #nav-bar {
    height: 80px;
    line-height: 80px;
}

/* === Header : icônes compte / panier / recherche centrées verticalement, badge collé au sac === */
#nav-bar .cta-container,
#mobile-bar .cta-container {
    align-items: center;
}
#nav-bar .cta-item,
#mobile-bar .cta-item {
    display: flex;
    align-items: center;
    height: 100%;
    line-height: normal;
}
#nav-bar .cta-item .account-item-icon,
#nav-bar .cta-item .cart-item-icon,
#nav-bar .cta-item .search-item-icon,
#mobile-bar .cta-item .account-item-icon,
#mobile-bar .cta-item .cart-item-icon,
#mobile-bar .cta-item .search-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: normal;
}
#nav-bar .cta-item .svg,
#mobile-bar .cta-item .svg {
    display: block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
#nav-bar .cart-item-icon .cart-icon-product-count,
#mobile-bar .cart-item-icon .cart-icon-product-count {
    top: 50%;
    margin-top: -18px;
    right: 2px;
}

/* === Mobile/tablette : marge sous le header fixe ===
   Le thème décale le contenu avec margin-top: var(--mobile-var-height), mais la variable n'est jamais
   définie (vaut vide -> 0) : la barre fixe recouvrait le début du contenu. On fixe la variable à la
   hauteur réelle de #mobile-bar. La home (header masqué) reste à 0. */
@media screen and (max-width: 1024px) {
    :root {
        --mobile-var-height: 63px;
    }
    /* padding (pas margin) : la barre fixe reste dans la boîte du conteneur overflow:hidden, sinon iOS Safari la rogne */
    html body.breakpoint:not(.home) .site-container {
        margin-top: 0 !important;
        padding-top: var(--mobile-var-height) !important;
    }
    html body.home .site-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* === Mobile : pas de loupe de recherche dans le header === */
@media screen and (max-width: 1024px) {
    #mobile-bar .cta-item.search-container {
        display: none !important;
    }
}

/* === Mobile : grille boutique centrée (le thème applique une marge négative de gouttière prévue pour le desktop) === */
@media screen and (max-width: 1024px) {
    #shop-index.products {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #shop-index.products .type-product {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
    }
}