/*
 * RH Sticky Header
 * Classe "header" à ajouter sur le conteneur Elementor via Avancé > Classes CSS
 *
 * Personnalisation : ajustez --header-bg avec votre couleur de fond
 */

:root {
    --header-bg: #3a1a0a;         /* Couleur du header quand sticky — à adapter */
    --header-logo-brightness: 5;  /* Luminosité du logo sur fond transparent (homepage) */
}

/* Positionnement fixe */
.header {
    position: fixed !important;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transition:
        background 0.35s ease,
        box-shadow 0.35s ease,
        top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}



/* Sticky : fond coloré + ombre */
.header.is-sticky {
    background: #00000099 !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.25) !important;
    padding: 5px;
}

/* white hero sticky header*/
.header.is-sticky svg {
    fill: #fff !important;
}
.header.is-sticky span.e-n-menu-title-text, .header.is-sticky a.glink {
    color: #fff !important;
}
.header.is-sticky .elementor-button {
    color: #fff !important;
    border-color: #fff !important;
}
.header.is-sticky .logo img {
    filter: brightness(5) !important;
}
/* fin white hero */

/* Réduction de hauteur quand sticky */
.header .e-con-inner,
.header .elementor-container {
    transition: padding 0.35s ease;
}
.header.is-sticky,
.header.is-sticky > .e-con-inner {
    min-height: 0 !important;
}
.header.is-sticky .e-con-inner,
.header.is-sticky .elementor-container {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Transitions sur les éléments modifiés par JS */
.header .elementor-widget-wrap,
.header .elementor-widget {
    transition: padding 0.35s ease;
}
.header .elementor-nav-menu--main .elementor-item {
    transition: padding 0.35s ease;
}
.header .elementor-nav-menu a {
    transition: padding 0.35s ease, line-height 0.35s ease;
}
.header .elementor-button {
    transition: padding 0.35s ease !important;
}

/* Nav menu : liens moins hauts */
.header.is-sticky .elementor-nav-menu--main .elementor-item,
.header.is-sticky .elementor-nav-menu a,
.header.is-sticky .elementor-nav-menu a:focus,
.header.is-sticky .elementor-nav-menu a:hover {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1.3 !important;
}

/* Bouton : moins de padding vertical */
.header.is-sticky .elementor-button {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Logo : transition toujours active, taille réduite quand sticky */
.header .elementor-widget-image img,
.header .elementor-widget-site-logo img {
    transition: max-height 0.35s ease, width 0.35s ease;
}
.header.is-sticky .elementor-widget-image img,
.header.is-sticky .elementor-widget-site-logo img {
    max-height: 32px !important;
    width: auto !important;
}

/* Masqué au scroll bas — utilise top négatif au lieu de transform
   pour ne pas créer de containing block (casse les popups fixed internes) */
.header.is-hidden {
    top: -200px !important;
}

/* Popup cart WC : compenser la barre admin en mode connecté */
.admin-bar .elementor-menu-cart__container.elementor-lightbox {
    top: 32px !important;
}

/* Quand une popup Elementor est ouverte, passer le header derrière
   et retirer le padding-top de compensation du header fixe */
body.dialog-lightbox-body .header {
    z-index: 0 !important;
}
body.dialog-lightbox-body {
    padding-top: 0 !important;
}

/* Compensation barre admin WordPress — gérée dynamiquement en JS */