.em-top-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    width: 100%;
    background: var(--em-top-bar-bg, #100421);
    color: var(--em-top-bar-text, #fff4d6);
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
}

:root {
    --em-sticky-top-bar-offset: 112px;
    /* Décalage d'arrivée sur une ancre (FALLBACK no-JS uniquement). Le vrai
       réglage est `stickyScrollGap` dans assets/js/theme.js : la navigation par
       ancre est gérée en JS (preventDefault + scrollTo), donc scroll-padding/
       scroll-margin ci-dessous ne s'appliquent QUE si le JS est désactivé. */
    --em-section-scroll-offset: calc(var(--em-sticky-top-bar-offset) + 24px);
}

html {
    scroll-padding-top: var(--em-section-scroll-offset);
}

#hero,
#slider,
#stream,
#social,
#video,
#release,
#cta,
#footer,
.em-landing-section,
.emv4-section {
    scroll-margin-top: var(--em-section-scroll-offset);
}

body.admin-bar .em-top-bar {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .em-top-bar {
        top: 46px;
    }
}

.em-top-bar.has-bg-image {
    background-size: cover;
    background-position: center;
}

.em-top-bar__inner {
    width: min(1100px, 92vw);
    margin: 0 auto;
    padding: 10px 0 14px;
}

.em-top-bar__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 14px;
}

.em-top-bar__row + .em-top-bar__row {
    margin-top: 10px;
}

.em-top-bar__logo-slot {
    justify-self: start;
}

.em-top-bar__slot--left {
    justify-self: start;
}

.em-top-bar__slot--center {
    justify-self: center;
}

.em-top-bar__slot--right {
    justify-self: end;
}

.em-top-bar__link {
    color: var(--em-top-bar-text, #fff4d6);
    text-decoration: none;
    transition: color 0.18s ease;
}

.em-top-bar__link:hover,
.em-top-bar__link:focus-visible,
.em-top-bar__platform-link:hover,
.em-top-bar__platform-link:focus-visible {
    color: #45a6ff;
}

.em-top-bar__row--primary .em-top-bar__slot--left .em-top-bar__link,
.em-top-bar__row--secondary .em-top-bar__slot--left .em-top-bar__link,
.em-top-bar__row--secondary .em-top-bar__slot--center .em-top-bar__link {
    font-family: "Archivo Black", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.16px;
    text-transform: none;
    text-shadow: none;
}

.em-top-bar__row--primary .em-top-bar__slot--right .em-top-bar__link {
    color: #f4d03c;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.em-top-bar__platform-icons {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.em-top-bar__platform-link {
    color: var(--em-top-bar-text, #fff3cf);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 26px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.em-top-bar__logo-image {
    display: block;
    max-width: 140px;
    height: auto;
}

@media (max-width: 760px) {
    .em-top-bar__row {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 8px;
    }

    .em-top-bar__logo-slot,
    .em-top-bar__slot--center,
    .em-top-bar__slot--right {
        justify-self: start;
    }
}