/* ==========================================================================
   HEADER — états interactifs (complète critical.css)
   Adapté d'un pattern maison (scroll direction, burger, double-lien hover) :
   fond transparent au repos en haut de page, fond marine dès que le header
   est visible en scroll, masqué en scrollant vers le bas. Le logo étant clair,
   on garde un fond sombre plutôt qu'un fond blanc au scroll (contrairement au
   pattern d'origine) pour rester lisible sans dupliquer l'asset du logo.
   Classes toggle gérées par assets/js/main.js.
   ========================================================================== */

.site-header,
.site-header__nav,
.site-header__burger-bar,
.site-header__burger-bar::before,
.site-header__burger-bar::after {
    transition:
        background-color 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* États liés au scroll (voir main.js). is-scrolled-up a un léger délai —
   choréographie avec .hero__booking (voir critical.css) : le header a une
   petite avance sur le retour du bouton en sens inverse (scroll vers le
   haut), pour que les deux ne bougent pas pile au même instant. Pas de
   délai sur :hover/.is-open, qui doivent rester instantanés. */
.site-header.is-scrolled-up {
    opacity: 1;
    background-color: var(--color-primary);
    transition-delay: 0.1s;
}

.site-header:hover,
.site-header.is-open {
    opacity: 1;
    background-color: var(--color-primary);
}

.site-header.is-scrolled-down {
    opacity: 0;
}

/* Double lien pour l'effet hover sans décalage de layout (desktop uniquement).
   Centré en inset:0 + flex (comme .site-header__link, voir critical.css) plutôt
   que top/left/transform : les deux liens doivent partager exactement le même
   centrage, sinon le texte "saute" d'un pixel ou deux pendant le fondu croisé. */
/* .site-header__link--hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    font-weight: 500;
    color: var(--color-secondary);
    pointer-events: none;
} */

@media (min-width: 768px) {
    .site-header__link,
    .site-header__link--hover {
        transition: opacity 0.2s ease;
    }

    /* .site-header__item:hover > .site-header__link:not(.site-header__link--hover) {
        opacity: 0;
    }

    .site-header__item:hover > .site-header__link--hover {
        opacity: 1;
    } */
}

/* Animation du burger vers une croix */
.site-header__burger[aria-expanded="true"] .site-header__burger-bar {
    background-color: transparent;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-bar::before {
    top: 0;
    transform: rotate(45deg);
}

.site-header__burger[aria-expanded="true"] .site-header__burger-bar::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Nav plein écran mobile ouverte */
@media (max-width: 767px) {
    .site-header__nav {
        background-color: var(--color-primary);
    }

    .site-header.is-open .site-header__nav {
        transform: scaleY(1);
        pointer-events: auto;
    }

    .site-header.is-open .site-header__link {
        font-size: var(--font-size-h3);
    }

    .site-header__link--hover {
        display: none;
    }
}

body.has-nav-open {
    overflow: hidden;
}