/* ===================================================================
   Mode transparent de l'en-tête — page d'accueil, bureau uniquement.

   Feuille séparée, chargée UNIQUEMENT quand l'option est active et que
   l'on est sur la page d'accueil. Une boutique qui ne s'en sert pas ne
   la reçoit jamais : son rendu ne bouge pas d'un pixel.

   Les transitions sont déclarées dans le bloc @media ci-dessous et
   conditionnées à `.header-fade-ready`, que le JavaScript ajoute une
   fois le premier état peint — rien ne s'anime au chargement.
   =================================================================== */

@media (min-width: 1200px) {

    /* L'en-tête est fixé dans LES DEUX états : il ne change jamais de
       position, donc pas de saut ni de décalage du contenu. Seule son
       apparence évolue. */
    body#index .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100;
    }

    body#index.header-fade-ready .header {
        transition: background-color 0.45s ease, box-shadow 0.45s ease;
    }

    /* Blanc alpha plutôt que `transparent` : le fondu vers le blanc reste
       propre, sans l'interpolation grisâtre que produit `transparent`. */
    body#index .header--transparent {
        background-color: rgba(255, 255, 255, 0) !important;
    }

    body#index .header-bottom {
        --header-top-border-bottom: none !important;
        --header-bottom-border-bottom: none !important;
        border-bottom: none !important;
    }

    body#index .header,
    body#index #header {
        border-bottom: none !important;
    }

    /* Le voile sombre est toujours présent ; c'est son OPACITÉ qui varie
       (1 transparent, 0 solide) plutôt qu'un display:none, pour qu'il se
       dissolve au lieu de disparaître d'un coup. */
    body#index .header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.25) 50%,
            rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
        z-index: 0;
        opacity: 0;
    }

    body#index.header-fade-ready .header::after {
        transition: opacity 0.45s ease;
    }

    body#index .header--transparent::after {
        opacity: 1;
    }

    /* Le contenu reste au-dessus du voile dans les deux états, pour qu'il
       ne se décale pas pendant le fondu. */
    body#index .header > * {
        position: relative;
        z-index: 1;
    }

    /* Les sous-sections restent transparentes dans les deux états : seul le
       fond de l'en-tête peint, donc un seul fondu propre derrière tout. */
    body#index .header-top,
    body#index .header-bottom,
    body#index .a4w-megamenu {
        background: transparent !important;
    }

    /* ---- Fondus du texte, des icônes et du logo ---- */
    body#index.header-fade-ready .header-top,
    body#index.header-fade-ready .header-top a,
    body#index.header-fade-ready .header-bottom,
    body#index.header-fade-ready .header-block__title,
    body#index.header-fade-ready .header-block__badge,
    body#index.header-fade-ready .a4w-megamenu > .nav > .nav-item > .nav-link,
    body#index.header-fade-ready .header-bottom > .container-md a,
    body#index.header-fade-ready .material-icons,
    body#index.header-fade-ready .header-block__icon.material-icons,
    body#index.header-fade-ready .header-block__action-btn {
        transition: color 0.45s ease;
    }

    body#index.header-fade-ready img.header-block__icon,
    body#index.header-fade-ready .header .logo img {
        transition: filter 0.45s ease, opacity 0.45s ease;
    }

    body#index.header-fade-ready .a4w-megamenu .nav-item:not(:last-child) > .nav-link::after {
        transition: background-color 0.45s ease;
    }

    body#index.header-fade-ready .nav-item.btn-style {
        transition: background-color 0.45s ease, border-color 0.45s ease;
    }

    /* ---- État transparent ---- */

    body#index .header--transparent,
    body#index .header--transparent .header-top,
    body#index .header--transparent .header-top a,
    body#index .header--transparent .header-bottom,
    body#index .header--transparent .header-block__title {
        color: #ffffff !important;
    }

    /* Pastille du panier : pastille blanche et chiffre à l'encre de l'en-tête solide, le même
       couple que l'en-tête opaque, lisible quel que soit le fond de pastille du thème. En
       blanc, le chiffre disparaissait dans la pastille claire de Hummingbird. */
    body#index .header--transparent .header-block__badge {
        background-color: #ffffff !important;
        color: var(--header-top-color, #343a40) !important;
    }

    /* Entrées de menu de niveau 0 seulement. */
    body#index .header--transparent .a4w-megamenu > .nav > .nav-item > .nav-link {
        color: #ffffff !important;
    }

    /* Autres liens de l'en-tête (connexion…), mais pas ceux des panneaux, ni les résultats de
       la barre de recherche compacte d'a4w_searchbar, posés sur fond blanc. */
    body#index .header--transparent .header-bottom > .container-md a:not(.dropdown-item):not(.btn):not(.dropdown-menu2 a):not(.menu-container a):not(.a4w-sb a) {
        color: #ffffff !important;
    }

    body#index .header--transparent .material-icons,
    body#index .header--transparent .header-block__icon.material-icons {
        color: #ffffff !important;
    }

    /* Boutons d'icônes des modules dessinés en currentColor (loupe SVG d'a4w_searchbar quand
       le thème n'a pas de search.svg, etc.). */
    body#index .header--transparent .header-block__action-btn {
        color: #ffffff !important;
    }

    /* Icônes SVG (panier, compte, recherche). */
    body#index .header--transparent img.header-block__icon {
        filter: brightness(0) invert(1);
    }

    /* Séparateurs entre entrées de menu. */
    body#index .header--transparent .a4w-megamenu .nav-item:not(:last-child) > .nav-link::after {
        background: #ffffff;
    }

    /* Les panneaux déroulants gardent leur habillage : c'est le fond de
       l'en-tête qui devient transparent, pas le menu ouvert. */
    body#index .header--transparent .dropdown-menu2,
    body#index .header--transparent .menu-container {
        background: var(--a4wmm-panel-bg, #ffffff);
    }

    body#index .header--transparent .dropdown-menu2 a,
    body#index .header--transparent .menu-container a {
        color: var(--a4wmm-panel-link, #333333) !important;
    }

    body#index .header--transparent .dropdown-menu2 a:hover,
    body#index .header--transparent .menu-container a:hover {
        color: var(--a4wmm-panel-link-hover, #000000) !important;
    }

    /* Logo : inversion par filtre CSS tant qu'aucun logo dédié n'est
       envoyé. Dès qu'il y en a un, le JavaScript pose
       `.header--has-custom-logo` et le filtre ne s'applique plus. */
    body#index .header--transparent:not(.header--has-custom-logo) .logo img {
        filter: brightness(0) invert(1);
    }

    /* Le logo échangé doit tenir dans le même gabarit que l'original,
       sinon l'en-tête change de hauteur au moment du basculement. */
    body#index .header--has-custom-logo .navbar-brand .logo,
    body#index .header--has-custom-logo .logo.img-fluid {
        max-height: var(--a4wmm-logo-max-height, 100px);
        width: auto;
        object-fit: contain;
    }

    /* Logo plus haut : la ligne de l'en-tête l'est aussi. On aligne le menu
       en bas pour qu'il ne chevauche pas le logo, qui reste centré. */
    body#index .header--has-custom-logo .header-bottom__row .main-menu {
        align-self: flex-end;
    }

    body#index .header--transparent .nav-item.btn-style {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.4);
    }

    body#index .header--transparent .nav-item.btn-style .nav-link {
        color: #ffffff !important;
    }

    /* ---- État solide, après défilement ---- */

    body#index .header--solid {
        background-color: var(--a4wmm-header-bg, #ffffff) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Le voile s'efface par l'opacité, réglée plus haut : pas de bascule
       de display, donc il se dissout. */

    body#index .header--solid img.header-block__icon {
        filter: none;
    }
}