/* Header transparent, uniquement sur la home (classe Home-Show sur le body).
   Desktop : à partir de 1281px. Mobile / tablette : bloc en bas de fichier. */
@media screen and (min-width: 1281px) {
    /* ===== HEADER TRANSPARENT (nouveau header) ===== */
    .Home-Show .ui-jules-header { display: none; }

    /* ----- Fond : transparent + dégradé sur la ligne logo / icônes ----- */
    .Home-Show .ocs-header header .nav-header > .nav-down {
        background: linear-gradient(to top, #0000 0%, #00000047 50%, #0000008a 100%);
    }

    .Home-Show .ocs-header header,
    .Home-Show .ocs-header,
    .Home-Show .ocs-header header .nav-header,
    .Home-Show .ocs-header header .nav-header .navbar-header,
    .Home-Show .ocs-header header .dropdown-menu,
    .Home-Show .ocs-header header .navbar.bg-inverse,
    .Home-Show .ocs-header header .main-menu {
        background-color: transparent !important;
    }

    /* Le header doit rester au-dessus du hero (hero : z-index 1) */
    .Home-Show .ocs-header header {
        position: relative;
        z-index: 6;
    }

    /* Le hero passe sous le header */
    .Home-Show:has(.ocs-header) .ui-jules-hp.hp-top { margin-top:calc(-1.1 * var(--ocs-header-height, 140px)); }

    /* ----- Logo (SVG inline) ----- */
    .Home-Show .ocs-header header .logobox .navbar-brand svg .st0 { fill: #fff; }

    /* ----- Liens texte (Jules Pro, Seconde main, Magasins, FR) ----- */
    .Home-Show .ocs-header header .navbar-header .header-link,
    .Home-Show .ocs-header header .navbar-header .header-link a,
    .Home-Show .ocs-header header .navbar-header .item-header-link-store a,
    .Home-Show .ocs-header header .navbar-header .minicart .linkwithquantity-number {
        color: #fff !important;
    }

    .Home-Show .ocs-header header .navbar-header .minicart .linkwithquantity-number { background-color: var(--ocs-font-brand) !important; }

    /* Chevron de la langue (icône en image) */
    .Home-Show .ocs-header header .navbar-header .header-link-locale .ocs-icon { filter: brightness(0) invert(1); }

    /* ----- Icônes SVG (retour, recherche mobile, compte, favoris, panier, burger) ----- */
    .Home-Show .ocs-header header .navbar-header .bloc-header-link svg path {
        fill: #fff !important;
        fill-opacity: 1 !important;
    }

    /* ----- Bouton PANIER (outline) ----- */
    .Home-Show .ocs-header header .navbar-header .ocs-core-new-button.outline {
        background-color: transparent !important;
        border-color: #fff !important;
        color: #fff !important;
    }

    .Home-Show .ocs-header header .navbar-header .ocs-core-new-button.outline:hover,
    .Home-Show .ocs-header header .navbar-header .ocs-core-new-button.outline:focus {
        background-color: #fff !important;
        color: #000 !important;
    }

    .Home-Show .ocs-header header .navbar-header .ocs-core-new-button.outline:hover svg path,
    .Home-Show .ocs-header header .navbar-header .ocs-core-new-button.outline:focus svg path {
        fill: #000 !important;
    }

    /* ----- Recherche desktop (.ocs-site-search) -----
       Scopée à .search-desktop : la recherche mobile reste sur fond blanc. */
    .Home-Show .ocs-header header .search-desktop .ocs-site-search .ocs-search-label {
        background-color: rgba(255, 255, 255, .1);
        border-color: #fff;
    }

    .Home-Show .ocs-header header .search-desktop .ocs-site-search .ocs-search-label:focus-within {
        border-color: #fff;
        box-shadow: 0 0 0 1px #fff;
    }

    .Home-Show .ocs-header header .search-desktop .ocs-site-search .ocs-search-icon,
    .Home-Show .ocs-header header .search-desktop .ocs-site-search .ocs-search-field.form-control,
    .Home-Show .ocs-header header .search-desktop .ocs-site-search .ocs-search-field.form-control:focus,
    .Home-Show .ocs-header header .search-desktop .ocs-site-search .ocs-reset-button {
        color: #fff !important;
    }

    .Home-Show .ocs-header header .search-desktop .ocs-site-search .ocs-search-field.form-control {
        background: transparent !important;
    }

    .Home-Show .ocs-header header .search-desktop .ocs-site-search .ocs-search-field.form-control::placeholder {
        color: rgba(255, 255, 255, .8);
    }

    /* ----- Divers ----- */
    .Home-Show .ocs-header header .search-mobile.show { z-index: 1; }

    .Home-Show .ocs-header header .navbar.bg-inverse { border-bottom: none !important; }

    .Home-Show .ocs-header header .navbar-header.higher .logobox,
    .Home-Show .ocs-header header .search-desktop,
    .Home-Show .ocs-header header .navbar-header .bloc-header-link { z-index: 5; }

    .Home-Show .ocs-header header div.mega-menu,
    .Home-Show .ocs-header header div.mega-menu div.container-fluid ul.dropdown-menu { border-top: none !important; }

    /* ----- Menu : liens blancs, noirs au survol / menu ouvert ----- */
    .Home-Show .ocs-header header .navbar.bg-inverse .navbar-nav .nav-item .nav-link {
        padding: 0.6rem 1.5rem !important;
        margin-top: 0 !important;
        color: #fff;
    }

    .Home-Show .ocs-header header .navbar.bg-inverse .navbar-nav .nav-item.dropdown.show .nav-link,
    .Home-Show .ocs-header header .navbar.bg-inverse .navbar-nav .nav-item .nav-link:hover,
    .Home-Show .ocs-header header .navbar.bg-inverse .navbar-nav .nav-item .nav-link:active,
    .Home-Show .ocs-header header .navbar.bg-inverse .navbar-nav .nav-item .nav-link:focus { color: #000; }

    /* ----- Couleurs spécifiques d'entrées du menu ----- */
    /* Soldes */
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="sousCatoutlet"] { color: #fff !important; }

    .Home-Show .ocs-header header .navbar-nav .nav-item.dropdown.show .nav-link[data-beaver-id="sousCatoutlet"],
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="sousCatoutlet"]:hover,
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="sousCatoutlet"]:active,
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="sousCatoutlet"]:focus { color: #be3f3e !important; }

    /* Parfait */
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="Menulink-le-parfait-by-jules"] { color: #fff !important; }

    .Home-Show .ocs-header header .navbar-nav .nav-item.dropdown.show .nav-link[data-beaver-id="Menulink-le-parfait-by-jules"],
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="Menulink-le-parfait-by-jules"]:hover,
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="Menulink-le-parfait-by-jules"]:active,
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="Menulink-le-parfait-by-jules"]:focus { color: #016450 !important; }

    /* JJ */
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="Menujours-jules"] { color: #fff !important; }

    .Home-Show .ocs-header header .navbar-nav .nav-item.dropdown.show .nav-link[data-beaver-id="Menujours-jules"],
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="Menujours-jules"]:hover,
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="Menujours-jules"]:active,
    .Home-Show .ocs-header header .navbar-nav .nav-item .nav-link[data-beaver-id="Menujours-jules"]:focus { color: #CA0000 !important; }

    /* ==========================================================================
       HEADER BLANC AU SCROLL
       La classe .header-solid est ajoutée sur <header> par SmallMenuHomepage.js
       dès un petit scroll. On retrouve alors le header normal : fond blanc, logo vert,
       textes et icônes noirs, recherche et menu standard.
       ========================================================================== */
    .Home-Show .ocs-header header.header-solid,
    .Home-Show .ocs-header header.header-solid .nav-header,
    .Home-Show .ocs-header header.header-solid .navbar-header,
    .Home-Show .ocs-header header.header-solid .navbar.bg-inverse {
        background-color: #fff !important;
    }

    .Home-Show .ocs-header header.header-solid .nav-header > .nav-down {
        background: none;
        border-bottom: 0;
    }

    .Home-Show .ocs-header header.header-solid .logobox .navbar-brand svg .st0 { fill: #006451; }

    .Home-Show .ocs-header header.header-solid .navbar-header .header-link,
    .Home-Show .ocs-header header.header-solid .navbar-header .header-link a,
    .Home-Show .ocs-header header.header-solid .navbar-header .item-header-link-store a { color: #000 !important; }

    .Home-Show .ocs-header header.header-solid .navbar-header .header-link-locale .ocs-icon { filter: none; }

    .Home-Show .ocs-header header.header-solid .navbar-header .bloc-header-link svg path {
        fill: #000 !important;
        fill-opacity: .88 !important;
    }

    .Home-Show .ocs-header header.header-solid .navbar-header .ocs-core-new-button.outline {
        border-color: #000 !important;
        color: #000 !important;
    }

    .Home-Show .ocs-header header.header-solid .navbar-header .ocs-core-new-button.outline:hover,
    .Home-Show .ocs-header header.header-solid .navbar-header .ocs-core-new-button.outline:focus {
        background-color: #000 !important;
        color: #fff !important;
    }

    .Home-Show .ocs-header header.header-solid .navbar-header .ocs-core-new-button.outline:hover svg path,
    .Home-Show .ocs-header header.header-solid .navbar-header .ocs-core-new-button.outline:focus svg path { fill: #fff !important; }

    .Home-Show .ocs-header header.header-solid .search-desktop .ocs-site-search .ocs-search-label {
        background-color: #fff;
        border-color: #a6a6a6;
    }

    .Home-Show .ocs-header header.header-solid .search-desktop .ocs-site-search .ocs-search-label:focus-within {
        border-color: var(--ocs-font-brand);
        box-shadow: 0 0 0 1px var(--ocs-font-brand);
    }

    .Home-Show .ocs-header header.header-solid .search-desktop .ocs-site-search .ocs-search-icon,
    .Home-Show .ocs-header header.header-solid .search-desktop .ocs-site-search .ocs-search-field.form-control,
    .Home-Show .ocs-header header.header-solid .search-desktop .ocs-site-search .ocs-search-field.form-control:focus,
    .Home-Show .ocs-header header.header-solid .search-desktop .ocs-site-search .ocs-reset-button { color: var(--ocs-color-text-disabled)!important; }

    .Home-Show .ocs-header header.header-solid .search-desktop .ocs-site-search .ocs-search-field.form-control::placeholder { color: #8a8a8a; }

    .Home-Show .ocs-header header.header-solid .navbar.bg-inverse .navbar-nav .nav-item .nav-link { color: #000; }

    .Home-Show .ocs-header header.header-solid .navbar-nav .nav-item .nav-link[data-beaver-id="sousCatoutlet"] { color: #be3f3e !important; }
    .Home-Show .ocs-header header.header-solid .navbar-nav .nav-item .nav-link[data-beaver-id="Menulink-le-parfait-by-jules"] { color: #016450 !important; }
    .Home-Show .ocs-header header.header-solid .navbar-nav .nav-item .nav-link[data-beaver-id="Menujours-jules"] { color: #CA0000 !important; }
}

/* ==========================================================================
   HEADER TRANSPARENT MOBILE / TABLETTE (jusqu'à 1280px)
   Barre logo / icônes transparente en haut de page, blanche au scroll
   (.header-solid, ajoutée par Component-Header-Transparent-Small.js).
   Logo et icônes blancs (verts / noirs au scroll). Le menu burger (.dropdown-menu,
   .main-menu) et la recherche mobile restent sur fond blanc.
   ========================================================================== */
@media screen and (max-width: 1280px) {
    .Home-Show .ocs-header,
    .Home-Show .ocs-header header,
    .Home-Show .ocs-header header .nav-header,
    .Home-Show .ocs-header header .nav-header .navbar-header {
        background-color: transparent !important;
    }

    /* Le header doit rester au-dessus du hero (hero : z-index 1) */
    .Home-Show .ocs-header header {
        position: relative;
        z-index: 6;
    }

    /* Petit dégradé sombre derrière le logo et les icônes (même dégradé qu'en desktop), pour garder
       le blanc lisible sur le hero. Pseudo-élément sur <header> avec z-index -1 : il passe derrière
       le contenu (le header crée son propre contexte d'empilement) et ne dépend pas de la structure
       interne du header. */
    .Home-Show .ocs-header header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background: linear-gradient(to top, #0000 0%, #00000047 50%, #0000008a 100%);
        pointer-events: none;
        z-index: -1;
    }

    /* Le hero passe sous le header : hauteur mesurée par le JS (--ocs-header-height) */
    .Home-Show:has(.ocs-header) .ui-jules-hp.hp-top { margin-top: calc(-1 * var(--ocs-header-height, 60px)); }

    /* Logo et icônes blancs (logo, recherche, compte, favoris, panier, burger) */
    .Home-Show .ocs-header header .logobox .navbar-brand svg .st0 { fill: #fff; }

    .Home-Show .ocs-header header .navbar-header .bloc-header-link svg path {
        fill: #fff !important;
        fill-opacity: 1 !important;
    }

    .Home-Show .ocs-header header .navbar-header .minicart .linkwithquantity-number {
        color: #fff !important;
        background-color: var(--ocs-font-brand) !important;
    }

    /* Header blanc au scroll : plus de dégradé, logo vert, icônes noires */
    .Home-Show .ocs-header header.header-solid::before { display: none; }

    .Home-Show .ocs-header header.header-solid,
    .Home-Show .ocs-header header.header-solid .nav-header,
    .Home-Show .ocs-header header.header-solid .navbar-header {
        background-color: #fff !important;
    }

    .Home-Show .ocs-header header.header-solid .logobox .navbar-brand svg .st0 { fill: #006451; }

    .Home-Show .ocs-header header.header-solid .navbar-header .bloc-header-link svg path {
        fill: #000 !important;
        fill-opacity: .88 !important;
    }

}

/* Liens texte du header (Jules Pro, Seconde main, Magasins) : sans soulignement,
   uniquement sur le header non minifié (pas au scroll : ni .header-solid, ni .sticky) */
.ocs-header header .navbar-header .bloc-header-link .header-link-right .item-header-link-store,
.ocs-header header .navbar-header .bloc-header-link .header-link-right .item-header-link-store a,
.ocs-header header .navbar-header .bloc-header-link .header-link-right .item-header-link-store a:hover,
.ocs-header header .navbar-header .bloc-header-link .header-link-right .item-header-link-store a:focus {
    text-decoration: none;
}