/* ==========================================
   WP24 — PREMIUM FLOATING HEADER
   VERSION 7.0 — REUSABLE CLASSES
   ========================================== */

:root {
    /* Position */
    --wp24-header-top: 30px;
    --wp24-header-fixed-top: 12px;
    --wp24-header-y: 30px;
    --wp24-header-z: 9999;

    /* Couleurs */
    --wp24-header-bg: #041D2C;
    --wp24-header-glass: rgba(4, 29, 44, .84);

    /* Animation */
    --wp24-header-ease: cubic-bezier(.22, 1, .36, 1);
    --wp24-header-duration: 750ms;
}


/* ==========================================
   1. CONTENEUR PRINCIPAL
   ========================================== */

.wp24-header-wrap {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

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

    z-index: var(--wp24-header-z) !important;

    transform: translate3d(
        0,
        var(--wp24-header-y),
        0
    ) !important;

    will-change: transform;

    transition: none !important;
}


/* ==========================================
   2. HEADER VISUEL
   ========================================== */

.wp24-header {
    position: relative !important;

    width: 100%;

    margin: 0 auto !important;

    background-color: var(--wp24-header-bg);

    border: 1px solid transparent;

    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);

    box-shadow: 0 0 0 rgba(4, 29, 44, 0);

    transition:
        background-color
        var(--wp24-header-duration)
        var(--wp24-header-ease),

        border-color
        var(--wp24-header-duration)
        var(--wp24-header-ease),

        box-shadow
        var(--wp24-header-duration)
        var(--wp24-header-ease),

        backdrop-filter
        var(--wp24-header-duration)
        var(--wp24-header-ease),

        -webkit-backdrop-filter
        var(--wp24-header-duration)
        var(--wp24-header-ease);
}


/* ==========================================
   3. GLASSMORPHISM AU SCROLL
   ========================================== */

.wp24-header-wrap.wp24-is-fixed .wp24-header {
    background-color: var(--wp24-header-glass);

    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);

    border-color: rgba(255, 255, 255, .16);

    box-shadow:
        0 12px 45px rgba(4, 29, 44, .18),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}


/* ==========================================
   4. TABLETTE
   ========================================== */

@media (max-width: 1024px) {
    :root {
        --wp24-header-top: 24px;
        --wp24-header-fixed-top: 10px;
    }
}


/* ==========================================
   5. MOBILE
   ========================================== */

@media (max-width: 767px) {
    :root {
        --wp24-header-top: 16px;
        --wp24-header-fixed-top: 8px;
    }
}


/* ==========================================
   6. ACCESSIBILITÉ
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    .wp24-header {
        transition: none !important;
    }
}