/*
 * MediQual — En-tête dynamique V7
 *
 * Animation continue liée au défilement :
 * - aucune classe déclenchée brutalement ;
 * - aucun délai ;
 * - aucune temporisation ;
 * - transformation progressive pixel par pixel.
 */

:root {
    --mq-header-expanded-height: 126px;
    --mq-header-compact-height: 80px;

    --mq-logo-layout-width: 365px;
    --mq-logo-natural-width: 335px;
    --mq-logo-compact-scale: 0.68;

    --mq-menu-expanded-size: 17px;
    --mq-menu-compact-scale: 0.8824;

    --mq-header-horizontal-padding: 28px;
    --mq-header-scroll-range: 150;

    /* Valeurs pilotées en temps réel par JavaScript */
    --mq-live-header-height: 126px;
    --mq-live-logo-scale: 1;
    --mq-live-menu-scale: 1;
    --mq-live-cta-scale: 1;
    --mq-live-shadow-alpha: 0;
}

/* ==========================================================
   EN-TÊTE
   ========================================================== */

.site-header {
    position: sticky !important;
    top: 0;
    z-index: 1000;

    height: var(--mq-live-header-height) !important;

    background: rgba(255, 255, 255, 0.99);
    border-bottom: 1px solid rgba(205, 222, 231, 0.96);
    box-shadow:
        0 10px 30px
        rgba(11, 53, 88, var(--mq-live-shadow-alpha));

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transform: translateZ(0);
    will-change: height, box-shadow;

    /*
     * Pas de transition CSS :
     * la progression est déjà calculée image par image selon le scroll.
     */
    transition: none !important;
}

.site-header .header__inner {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding-left: var(--mq-header-horizontal-padding) !important;
    padding-right: var(--mq-header-horizontal-padding) !important;

    gap: 24px !important;
    align-items: center !important;

    transition: none !important;
}

/* ==========================================================
   LOGO
   ========================================================== */

.site-header .site-logo {
    flex: 0 0 var(--mq-logo-layout-width) !important;
    width: var(--mq-logo-layout-width) !important;
    min-width: var(--mq-logo-layout-width) !important;
    max-width: var(--mq-logo-layout-width) !important;

    margin-right: auto !important;

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

    overflow: visible !important;
}

.site-header .site-logo > a,
.site-header .site-logo .custom-logo-link {
    display: flex !important;

    width: var(--mq-logo-natural-width) !important;
    height: auto !important;

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

    overflow: visible !important;
}

.site-header .site-logo img,
.site-header .site-logo .custom-logo {
    display: block !important;

    width: var(--mq-logo-natural-width) !important;
    min-width: var(--mq-logo-natural-width) !important;
    max-width: none !important;

    height: auto !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: left center !important;

    transform:
        translate3d(0, 0, 0)
        scale(var(--mq-live-logo-scale));

    transform-origin: left center;

    will-change: transform;
    backface-visibility: hidden;

    transition: none !important;
}

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

.site-header .site-nav {
    margin-left: auto !important;
    margin-right: 0 !important;

    flex-shrink: 0;

    transform:
        translate3d(0, 0, 0)
        scale(var(--mq-live-menu-scale));

    transform-origin: right center;

    will-change: transform;
    backface-visibility: hidden;

    transition: none !important;
}

.site-header .site-nav .menu,
.site-header .site-nav .nav-list {
    justify-content: flex-end !important;
}

.site-header .site-nav a {
    font-size: var(--mq-menu-expanded-size) !important;
    font-weight: 700 !important;
}

/* Bouton devis */

.site-header .header-cta {
    flex-shrink: 0 !important;
    margin-left: 10px !important;

    transform:
        translate3d(0, 0, 0)
        scale(var(--mq-live-cta-scale));

    transform-origin: right center;

    will-change: transform;
    backface-visibility: hidden;

    transition: none !important;
}

/* ==========================================================
   BARRE D’ADMINISTRATION WORDPRESS
   ========================================================== */

.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 1120px) and (min-width: 861px) {
    :root {
        --mq-logo-layout-width: 285px;
        --mq-logo-natural-width: 265px;
        --mq-logo-compact-scale: 0.73;

        --mq-header-horizontal-padding: 20px;

        --mq-menu-expanded-size: 15px;
        --mq-menu-compact-scale: 0.9333;

        --mq-header-scroll-range: 130;
    }

    .site-header .header__inner {
        gap: 16px !important;
    }
}

/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media (max-width: 860px) {
    :root {
        --mq-header-expanded-height: 92px;
        --mq-header-compact-height: 70px;

        --mq-logo-layout-width: 220px;
        --mq-logo-natural-width: 205px;
        --mq-logo-compact-scale: 0.76;

        --mq-header-horizontal-padding: 16px;
        --mq-header-scroll-range: 90;
    }

    .site-header .header__inner {
        gap: 12px !important;
    }

    .site-header .site-nav,
    .site-header .header-cta {
        transform: none !important;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .site-header {
        height: var(--mq-header-compact-height) !important;
    }

    .site-header .site-logo img,
    .site-header .site-logo .custom-logo {
        transform:
            translate3d(0, 0, 0)
            scale(var(--mq-logo-compact-scale));
    }
}