/* =========================================================
   NAVIGATION EN SUPERPOSITION DU VRAI WALLPAPER
========================================================= */

/*
 * Aucun second wallpaper n’est créé.
 * La navigation sort simplement du flux normal afin que
 * le véritable hero commence dès le haut de l’écran.
 */

.cdv-global-header {
    position:
        fixed !important;

    z-index:
        10000 !important;

    top:
        16px !important;

    left:
        0 !important;

    right:
        0 !important;

    margin:
        0 auto !important;

    /*
     * Important :
     * aucun translateX n’est utilisé afin de conserver
     * l’animation is-hidden déjà présente.
     */
    transform:
        translateY(0);

    will-change:
        transform,
        height,
        background;
}


/* état compact pendant le scroll */

.cdv-global-header.is-scrolled {
    top:
        9px !important;
}


/* animation de disparition déjà prévue par la navigation */

.cdv-global-header.is-hidden {
    transform:
        translateY(
            calc(
                -100%
                - 32px
            )
        ) !important;
}


/* =========================================================
   SUPPRESSION DES ÉVENTUELS CONTENEURS EXTÉRIEURS
========================================================= */

.cdv-global-header-wrapper,
.cdv-navigation-wrapper,
.cdv-navigation-background,
.cdv-nav-background,
.cdv-header-background {
    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/*
 * Si un conteneur ne contient que la navigation fixe,
 * il ne doit plus réserver de hauteur dans la page.
 */

body > .cdv-global-header-wrapper:has(
    > .cdv-global-header
) {
    height:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* =========================================================
   LE PREMIER ÉCRAN COMMENCE DÈS LE HAUT
========================================================= */

body {
    margin-top:
        0 !important;

    padding-top:
        0 !important;
}


/*
 * Neutralisation des anciens espacements qui auraient été
 * ajoutés uniquement pour laisser une place au header.
 */

body > main:first-of-type {
    margin-top:
        0;
}


/* =========================================================
   LISIBILITÉ DE LA NAVIGATION
========================================================= */

.cdv-global-header {
    background:
        linear-gradient(
            120deg,
            rgba(5, 8, 25, .80),
            rgba(10, 12, 34, .68) 48%,
            rgba(5, 17, 34, .75)
        ) !important;

    border-color:
        rgba(
            161,
            149,
            255,
            .20
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .07),

        0 18px 55px
        rgba(0, 0, 0, .25) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(138%);

    backdrop-filter:
        blur(24px)
        saturate(138%);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 860px) {
    .cdv-global-header {
        top:
            10px !important;

        left:
            10px !important;

        right:
            10px !important;

        width:
            auto !important;

        margin:
            0 !important;
    }

    .cdv-global-header.is-scrolled {
        top:
            7px !important;
    }
}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .cdv-global-header {
        transition-duration:
            .01ms !important;
    }
}