/** * Header Astra : sticky + transparent au scroll (DESKTOP) * * Principe : * - Le JS ajoute une classe sur : * - ld-sticky-header--active => sticky activé sur desktop * - ld-sticky-header--scrolled => l'utilisateur a scrollé (on rend le header transparent) * * - On applique le "fixe en haut" (sticky) sur le conteneur du header. * - On évite de casser le mobile via une media query. */ /* ========================= 1) Variables facilement ajustables ========================= */ :root { /* Opacité du fond du header quand ON A SCROLLÉ : - 0.00 = totalement transparent - 0.10 = très transparent - 0.25 = transparent mais lisible */ --ld-header-bg-scrolled: rgba(255, 255, 255, 0.1); /* Ombre légère pour garder la lisibilité sur fonds complexes */ --ld-header-shadow-scrolled: 0 8px 24px rgba(0, 0, 0, 0.08); /* Durée de transition (effet doux) */ --ld-header-transition: 220ms; /* Hauteur calculée en JS (sert à pousser le contenu pour éviter qu'il passe sous le header) */ --ld-sticky-header-height: 0px; } /* ========================= 2) Desktop uniquement (Astra : breakpoint ~921px) ========================= */ @media (min-width: 922px) { /* Quand sticky est activé, on ajoute un padding-top au body pour éviter que le contenu remonte sous le header fixé. */ body.ld-sticky-header--active { padding-top: var(--ld-sticky-header-height); } /* Le header principal d’Astra est souvent

. On fixe ce bloc en haut. */ body.ld-sticky-header--active header.site-header { position: fixed; top: 0; left: 0; right: 0; /* Au-dessus du contenu */ z-index: 9999; /* Transition douce lors du passage "scrolled" */ transition: background-color var(--ld-header-transition) ease, box-shadow var(--ld-header-transition) ease, backdrop-filter var(--ld-header-transition) ease; } /* Si tu es connecté à WordPress, la barre admin (en haut) existe. On décale le header pour ne pas le superposer. */ body.admin-bar.ld-sticky-header--active header.site-header { top: 32px; /* hauteur habituelle de la barre admin sur desktop */ } /* États au scroll : -> tu as demandé "transparent au scroll". On rend le fond transparent (ou quasi) + blur optionnel + ombre légère. */ body.ld-sticky-header--active.ld-sticky-header--scrolled header.site-header { background-color: var(--ld-header-bg-scrolled); box-shadow: var(--ld-header-shadow-scrolled); /* Effet vitre dépoli (optionnel). Si tu n’aimes pas, tu peux supprimer ces 2 lignes. */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* IMPORTANT : Astra peut appliquer le fond sur des sous-conteneurs (barres internes). On force la transparence aussi sur ces barres quand on scrolle, sinon tu peux avoir un header transparent mais une barre interne opaque. */ body.ld-sticky-header--active.ld-sticky-header--scrolled header.site-header .main-header-bar, body.ld-sticky-header--active.ld-sticky-header--scrolled header.site-header .ast-primary-header-bar, body.ld-sticky-header--active.ld-sticky-header--scrolled header.site-header .ast-builder-grid-row { background-color: transparent !important; } }