/* =========================================================
   1. NAVIGATION : CENTRAGE STABLE
========================================================= */

.cdv-global-header {
    min-height: 76px !important;

    align-items: center !important;
    align-content: center !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    overflow: visible !important;
}

.cdv-global-header.is-scrolled {
    min-height: 66px !important;
    height: 66px !important;

    align-items: center !important;
    align-content: center !important;
}

/*
   Chaque zone de la navigation reste centrée,
   y compris lors de sa réapparition au scroll.
*/

.cdv-global-header
> .cdv-global-brand,

.cdv-global-header
> .cdv-global-menu,

.cdv-global-header
> .cdv-global-status,

.cdv-global-header
> .cdv-global-toggle {
    align-self: center !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    top: auto !important;
    bottom: auto !important;
}

/* =========================================================
   IDENTITÉ ET LOGO
========================================================= */

.cdv-global-brand {
    height: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    transform: none !important;
}

.cdv-global-brand-mark {
    align-self: center !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    transform: none !important;
}

.cdv-global-brand-copy {
    height: auto !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.cdv-global-brand-name,
.cdv-global-brand-subtitle {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    transform: none !important;
}

/* =========================================================
   MENU DESKTOP
========================================================= */

.cdv-global-menu {
    position: relative !important;

    width: auto !important;
    height: auto !important;
    min-height: 46px !important;

    display: flex !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 4px !important;

    top: auto !important;
    bottom: auto !important;

    transform: none !important;
}

.cdv-global-link {
    height: 38px !important;
    min-height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    line-height: 1 !important;
}

/* =========================================================
   STATUT SYNCHRONISÉ
========================================================= */

.cdv-global-status {
    min-height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    line-height: 1 !important;

    transform: none !important;
}

/* =========================================================
   2. PODIUM : SUPPRESSION DES LUEURS QUI DÉPASSENT
========================================================= */

/*
   Le conteneur principal dispose de sa propre couche.
   Les effets internes ne peuvent plus se répandre sous
   la section suivante.
*/

.podium-premium,
.ranking-podium,
.ranking-podium-grid,
.cdv-ranking-podium,
.cdv-podium,
[class*="podium"][class*="grid"] {
    position: relative !important;
    isolation: isolate !important;

    padding-bottom: 0 !important;

    filter: none !important;
}

/*
   Les cartes coupent leurs effets décoratifs aux limites
   exactes de leurs coins arrondis.
*/

.podium-premium-card,
.ranking-podium-card,
.cdv-ranking-podium-card,
.cdv-podium-card,
[class*="podium"][class*="card"] {
    position: relative !important;

    overflow: hidden !important;
    isolation: isolate !important;

    contain: paint !important;

    filter: none !important;

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

        inset 0 -1px 0
        rgba(0, 0, 0, .38),

        0 15px 34px
        rgba(0, 0, 0, .22) !important;
}

/*
   Les pseudo-éléments restent présents, mais sont
   contenus à l’intérieur de chaque carte.
*/

.podium-premium-card::before,
.podium-premium-card::after,

.ranking-podium-card::before,
.ranking-podium-card::after,

.cdv-ranking-podium-card::before,
.cdv-ranking-podium-card::after,

.cdv-podium-card::before,
.cdv-podium-card::after,

[class*="podium"][class*="card"]::before,
[class*="podium"][class*="card"]::after {
    max-width: 100% !important;
    max-height: 100% !important;

    pointer-events: none !important;
}

/*
   Suppression des halos extérieurs ajoutés par les
   wrappers ou éléments décoratifs situés sous les cartes.
*/

.podium-premium::after,
.ranking-podium::after,
.ranking-podium-grid::after,
.cdv-ranking-podium::after,
.cdv-podium::after {
    content: none !important;
    display: none !important;
}

/*
   Sécurité supplémentaire pour les éléments explicitement
   utilisés comme halo ou glow.
*/

.podium-glow,
.ranking-podium-glow,
.cdv-podium-glow,
[class*="podium"] [class*="glow"] {
    overflow: hidden !important;

    opacity: .28 !important;
    filter: blur(18px) !important;

    clip-path:
        inset(
            0
            round 22px
        ) !important;
}

/* =========================================================
   3. MENU MOBILE RECONSTRUIT
========================================================= */

@media (max-width: 860px) {

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

        top: 10px !important;
        left: 10px !important;
        right: 10px !important;

        width: auto !important;
        height: 68px !important;
        min-height: 68px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            48px !important;

        align-items: center !important;
        align-content: center !important;

        padding:
            0
            10px
            0
            15px !important;

        border-radius: 18px !important;

        overflow: visible !important;

        transform: none !important;

        z-index: 100000 !important;
    }

    /*
       Quand le menu est ouvert, le header ne peut plus
       être masqué par l’animation de scroll.
    */

    .cdv-global-header.cdv-mobile-menu-open,
    .cdv-global-header.cdv-mobile-menu-open.is-hidden {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .cdv-global-brand {
        grid-column: 1 !important;

        width: 100% !important;
        height: 68px !important;
        min-width: 0 !important;

        align-self: center !important;
    }

    .cdv-global-toggle {
        position: relative !important;

        grid-column: 2 !important;

        width: 46px !important;
        height: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;

        gap: 6px !important;

        align-self: center !important;
        justify-self: end !important;

        margin: 0 !important;
        padding: 0 !important;

        border:
            1px solid
            rgba(143, 128, 255, .34) !important;

        border-radius: 14px !important;

        background:
            linear-gradient(
                145deg,
                rgba(112, 87, 255, .20),
                rgba(64, 144, 255, .10)
            ) !important;

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

            0 9px 22px
            rgba(0, 0, 0, .20) !important;

        color: #ffffff !important;

        cursor: pointer !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

        z-index: 5 !important;

        -webkit-tap-highlight-color:
            transparent !important;

        touch-action: manipulation !important;
    }

    .cdv-global-toggle span {
        width: 19px !important;
        height: 2px !important;

        display: block !important;

        border-radius: 999px !important;

        background: currentColor !important;

        transform-origin: center !important;

        opacity: 1 !important;

        transition:
            transform .28s ease,
            opacity .20s ease !important;
    }

    /*
       Transformation des deux traits en croix.
    */

    .cdv-global-header.cdv-mobile-menu-open
    .cdv-global-toggle span:first-child {
        transform:
            translateY(4px)
            rotate(45deg) !important;
    }

    .cdv-global-header.cdv-mobile-menu-open
    .cdv-global-toggle span:last-child {
        transform:
            translateY(-4px)
            rotate(-45deg) !important;
    }

    /*
       Menu très opaque et lisible.
    */

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

        top:
            var(
                --cdv-mobile-menu-top,
                88px
            ) !important;

        left: 10px !important;
        right: 10px !important;

        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height:
            calc(
                100dvh
                -
                var(
                    --cdv-mobile-menu-top,
                    88px
                )
                -
                12px
            ) !important;

        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 8px !important;

        margin: 0 !important;
        padding: 12px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        border:
            1px solid
            rgba(144, 130, 255, .32) !important;

        border-radius: 18px !important;

        background:
            linear-gradient(
                145deg,
                rgba(7, 9, 29, .995),
                rgba(9, 12, 35, .995)
            ) !important;

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

            0 22px 60px
            rgba(0, 0, 0, .68) !important;

        -webkit-backdrop-filter:
            blur(30px)
            saturate(140%) !important;

        backdrop-filter:
            blur(30px)
            saturate(140%) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform:
            translateY(-10px)
            scale(.985) !important;

        transform-origin:
            top center !important;

        transition:
            opacity .24s ease,
            visibility .24s ease,
            transform .24s ease !important;

        z-index: 99999 !important;
    }

    /*
       Ombre de fond derrière le menu.
    */

    .cdv-global-header.cdv-mobile-menu-open::after {
        content: "" !important;

        position: fixed !important;

        inset: 0 !important;

        width: auto !important;
        height: auto !important;

        border-radius: 0 !important;

        background:
            rgba(1, 2, 12, .48) !important;

        filter: none !important;

        opacity: 1 !important;

        pointer-events: none !important;

        z-index: -1 !important;
    }

    .cdv-global-header.cdv-mobile-menu-open
    .cdv-global-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform:
            translateY(0)
            scale(1) !important;
    }

    .cdv-global-link {
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        padding:
            0
            15px !important;

        border:
            1px solid
            rgba(255, 255, 255, .075) !important;

        border-radius: 13px !important;

        color:
            rgba(
                232,
                231,
                245,
                .72
            ) !important;

        background:
            rgba(
                255,
                255,
                255,
                .035
            ) !important;

        font-size: 9px !important;
        line-height: 1 !important;

        opacity: 1 !important;

        pointer-events: auto !important;

        transform: none !important;
    }

    .cdv-global-link:hover,
    .cdv-global-link:focus-visible {
        border-color:
            rgba(
                125,
                158,
                255,
                .30
            ) !important;

        color: #ffffff !important;

        background:
            rgba(
                115,
                94,
                255,
                .12
            ) !important;
    }

    .cdv-global-link.active {
        border-color:
            rgba(
                137,
                129,
                255,
                .42
            ) !important;

        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                rgba(116, 90, 255, .28),
                rgba(70, 170, 255, .13)
            ) !important;

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

            0 8px 24px
            rgba(56, 66, 195, .13) !important;
    }

    .cdv-global-status {
        display: none !important;
    }
}

/* =========================================================
   PETITS TÉLÉPHONES
========================================================= */

@media (max-width: 520px) {

    .cdv-global-menu {
        grid-template-columns:
            1fr !important;
    }

    .cdv-global-link {
        min-height: 48px !important;
        height: 48px !important;
    }
}

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

@media (prefers-reduced-motion: reduce) {

    .cdv-global-menu,
    .cdv-global-toggle span,
    .cdv-global-header {
        transition-duration:
            .01ms !important;
    }
}