/* ==========================================================================
   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: .2;
}
.site-header.is-scrolled-down:hover {
    opacity: 1;
}

/* Calendrier ouvert (voir assets/js/calendar.js, .has-calendar-open posée/
   retirée sur le header) : il est ancré sous le header (voir calendar.js,
   alignTop) — si le header s'efface pendant que le calendrier reste ouvert
   (scroll vers le bas sans fermer le popover), le calendrier se retrouve
   collé en haut de l'écran, détaché visuellement de son déclencheur. On
   force donc le header à rester visible tant que le calendrier est ouvert. */
.site-header.is-scrolled-down.has-calendar-open {
    opacity: 1;
}

/* 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 ouverte — toujours en burger sur cette variante (site3),
   quelle que soit la largeur d'écran, donc plus de media query ici (voir
   critical.css : le passage en ligne horizontale desktop a été retiré). */
.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;
}



.site-header.is-open,
.site-header.is-open .site-header__logo {
    z-index: 110;
}