/* ============================================================
   HEADER MOBILE FIXE
   Garde le logo et le menu hamburger visibles pendant le scroll.
   Desktop inchangé.
   ============================================================ */
@media (max-width: 980px) {
    #main-header {
        position: fixed !important;
        top: 0 !important;
        right: 0;
        left: 0;
        width: 100%;
        z-index: 99999;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Divi réserve déjà 80px pour le header mobile sur ces pages. */
    .et_fixed_nav.et_show_nav #page-container {
        padding-top: 80px;
    }

    /* Le menu déroulant reste rattaché au header fixe. */
    #et_mobile_nav_menu,
    .mobile_nav {
        position: relative;
    }
}

@media print {
    #main-header {
        position: relative !important;
    }
}

/* ============================================================
   ICONE HAMBURGER MOBILE SANS POLICE DIVI
   Evite l'affichage d'un caractere "a" si ETmodules ne charge pas.
   ============================================================ */
@media (max-width: 980px) {
    .mobile_menu_bar,
    .mobile_menu_bar_toggle {
        width: 24px;
        height: 20px;
        display: block;
        color: #d53e88;
    }

    .mobile_menu_bar::before {
        content: "" !important;
        font-family: inherit !important;
        display: block;
        width: 24px;
        height: 18px;
        position: absolute;
        top: 0;
        left: 0;
        background:
            linear-gradient(currentColor, currentColor) 0 1px / 24px 2px no-repeat,
            linear-gradient(currentColor, currentColor) 0 8px / 24px 2px no-repeat,
            linear-gradient(currentColor, currentColor) 0 15px / 24px 2px no-repeat;
        cursor: pointer;
        transition: transform .2s ease;
    }

    .mobile_menu_bar::after {
        content: none !important;
        display: none !important;
    }

    /* Transforme le hamburger en croix quand le menu est ouvert. */
    .mobile_nav.opened .mobile_menu_bar::before {
        background:
            linear-gradient(currentColor, currentColor) center / 24px 2px no-repeat,
            linear-gradient(currentColor, currentColor) center / 24px 2px no-repeat;
        transform: rotate(45deg);
    }

    .mobile_nav.opened .mobile_menu_bar::after {
        content: "" !important;
        display: block !important;
        width: 24px;
        height: 2px;
        position: absolute;
        top: 8px;
        left: 0;
        background: currentColor;
        transform: rotate(-45deg);
    }
}

/* ============================================================
   ALIGNEMENT HEADER MOBILE SUR LE MODELE SWISS VAPEUR
   Hauteur, logo et hamburger harmonises.
   ============================================================ */
@media (max-width: 980px) {
    #main-header {
        height: 96px !important;
        min-height: 96px !important;
    }

    #main-header .container.et_menu_container {
        width: 88% !important;
        height: 96px !important;
        min-height: 96px !important;
        max-width: none !important;
    }

    #main-header .logo_container {
        height: 96px !important;
    }

    #logo {
        width: auto !important;
        max-width: 30% !important;
        max-height: 100px !important;
        height: auto !important;
    }

    #et-top-navigation {
        height: 96px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    #et_mobile_nav_menu {
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
    }

    .mobile_nav,
    .mobile_menu_bar,
    .mobile_menu_bar_toggle {
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile_menu_bar,
    .mobile_menu_bar_toggle {
        width: 21px !important;
        height: 18px !important;
    }

    .mobile_menu_bar::before {
        width: 21px !important;
        height: 17px !important;
        background:
            linear-gradient(currentColor, currentColor) 0 1px / 21px 2px no-repeat,
            linear-gradient(currentColor, currentColor) 0 8px / 21px 2px no-repeat,
            linear-gradient(currentColor, currentColor) 0 15px / 21px 2px no-repeat !important;
    }

    .mobile_nav.opened .mobile_menu_bar::before {
        background:
            linear-gradient(currentColor, currentColor) center / 21px 2px no-repeat,
            linear-gradient(currentColor, currentColor) center / 21px 2px no-repeat !important;
    }

    .mobile_nav.opened .mobile_menu_bar::after {
        width: 21px !important;
        height: 2px !important;
        top: 8px !important;
    }

    .et_fixed_nav.et_show_nav #page-container {
        padding-top: 96px !important;
    }
}


/* ============================================================
   BOUTON ACHETER MOBILE
   Affichage indépendant du widget Smeetz.
   Le widget transparent est superposé au bouton rose.
   ============================================================ */

.vp-mobile-buy-wrap {
    display: none;
}

@media (max-width: 980px) {
    .vp-mobile-buy-wrap {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: 48px !important;
        transform: translateY(-50%) !important;
        width: 118px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 100002 !important;
        overflow: hidden !important;
        border-radius: 24px !important;
        background: #ed168c !important;
    }

    /* Bouton rose toujours visible, indépendamment de Smeetz. */
    .vp-mobile-buy-label {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 118px !important;
        height: 44px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 24px !important;
        background: #ed168c !important;
        color: #fff !important;
        font-family: 'Rem', sans-serif !important;
        font-size: 0.9375rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        z-index: 4 !important;
        pointer-events: none !important;
    }

    /*
     * Zone Smeetz superposée au bouton.
     * Elle reste réellement dans le viewport et avec une taille réelle,
     * pour que Smeetz puisse initialiser son bouton.
     */
    .vp-mobile-buy-smeetz {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 118px !important;
        height: 44px !important;
        min-width: 118px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2 !important;
        opacity: 0.001 !important;
        overflow: hidden !important;
        border-radius: 24px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .vp-mobile-buy-smeetz *,
    .vp-mobile-buy-smeetz button,
    .vp-mobile-buy-smeetz a,
    .vp-mobile-buy-smeetz [role="button"] {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 118px !important;
        min-width: 118px !important;
        max-width: 118px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 24px !important;
        background: transparent !important;
        background-color: transparent !important;
        color: transparent !important;
        box-shadow: none !important;
        opacity: 0.001 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 479px) {
    .vp-mobile-buy-wrap {
        right: 42px !important;
        width: 100px !important;
        height: 40px !important;
        border-radius: 22px !important;
    }

    .vp-mobile-buy-label,
    .vp-mobile-buy-smeetz,
    .vp-mobile-buy-smeetz *,
    .vp-mobile-buy-smeetz button,
    .vp-mobile-buy-smeetz a,
    .vp-mobile-buy-smeetz [role="button"] {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    .vp-mobile-buy-label {
        border-radius: 22px !important;
        font-size: 0.8125rem !important;
        padding: 0 12px !important;
    }
}


/* Masquage définitif de l'habillage natif Smeetz dans le header mobile */
@media (max-width: 980px) {
    .vp-mobile-buy-wrap {
        overflow: hidden !important;
        border-radius: 24px !important;
        background: #ed168c !important;
    }

    .vp-mobile-buy-smeetz,
    .vp-mobile-buy-smeetz *,
    .vp-mobile-buy-smeetz button,
    .vp-mobile-buy-smeetz a,
    .vp-mobile-buy-smeetz [role="button"] {
        background: transparent !important;
        background-color: transparent !important;
        color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        opacity: 0.001 !important;
    }

    .vp-mobile-buy-label {
        z-index: 999 !important;
    }
}

@media (max-width: 479px) {
    .vp-mobile-buy-wrap,
    .vp-mobile-buy-smeetz,
    .vp-mobile-buy-smeetz *,
    .vp-mobile-buy-smeetz button,
    .vp-mobile-buy-smeetz a,
    .vp-mobile-buy-smeetz [role="button"] {
        border-radius: 22px !important;
    }
}


/* ============================================================
   BOUTON ACHETER - MENU DESKTOP
   Ajouté après CONTACT, avec le même déclencheur Smeetz.
   Typographie en rem.
   ============================================================ */
@media (min-width: 981px) {
    #top-menu .vp-desktop-buy-menu {
        position: relative !important;
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 0 0 18px !important;
        padding: 0 !important;
    }

    .vp-desktop-buy-wrap {
        position: relative !important;
        display: block !important;
        width: 112px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        background: #ed168c !important;
        cursor: pointer !important;
    }

    .vp-desktop-buy-label {
        position: absolute !important;
        inset: 0 !important;
        z-index: 999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 112px !important;
        height: 40px !important;
        padding: 0 14px !important;
        border-radius: 22px !important;
        background: #ed168c !important;
        color: #fff !important;
        font-family: 'Rem', sans-serif !important;
        font-size: 0.875rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        pointer-events: none !important;
    }

    .vp-desktop-buy-smeetz {
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        display: block !important;
        width: 112px !important;
        min-width: 112px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        opacity: 0.001 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .vp-desktop-buy-smeetz *,
    .vp-desktop-buy-smeetz button,
    .vp-desktop-buy-smeetz a,
    .vp-desktop-buy-smeetz [role="button"] {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 22px !important;
        background: transparent !important;
        background-color: transparent !important;
        color: transparent !important;
        box-shadow: none !important;
        opacity: 0.001 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
}

/* Le bouton desktop ne doit jamais apparaître dans le menu mobile. */
@media (max-width: 980px) {
    .vp-desktop-buy-menu {
        display: none !important;
    }
}


/* Typographie des boutons ACHETER : police REM du site */
.vp-mobile-buy-label,
.vp-desktop-buy-label {
    font-family: 'Rem', sans-serif !important;
    font-weight: 900 !important;
}


/* ============================================================
   MENU MOBILE - OUVERTURE TYPE SWISS VAPEUR
   Grand panneau blanc sous le header, liens sur une colonne.
   ============================================================ */
@media (max-width: 980px) {

    /* Le conteneur du menu mobile prend toute la largeur disponible. */
    #et-top-navigation,
    #et_mobile_nav_menu,
    .mobile_nav {
        position: static !important;
    }

    /* Le bouton hamburger reste positionné à droite du header. */
    .mobile_menu_bar,
    .mobile_menu_bar_toggle {
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        z-index: 100005 !important;
    }

    /*
     * Le menu déroulant s'affiche sous le header,
     * avec des marges latérales proches de Swiss Vapeur.
     */
    .et_mobile_menu {
        position: absolute !important;
        top: 96px !important;
        left: 6% !important;
        right: 6% !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 20px 30px !important;
        background: #ffffff !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 100001 !important;
        overflow: visible !important;
    }

    /* Chaque entrée occupe toute la largeur du panneau. */
    .et_mobile_menu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        border: 0 !important;
    }

    /* Liens façon Swiss Vapeur : grands, lisibles et séparés. */
    .et_mobile_menu li a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 20px 0 !important;
        border-bottom: 1px solid #eeeeee !important;
        background: transparent !important;
        color: #000000 !important;
        font-family: 'Rem', sans-serif !important;
        font-size: 1.15rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .et_mobile_menu li:last-child a {
        border-bottom: 0 !important;
    }

    .et_mobile_menu li a:hover,
    .et_mobile_menu li.current-menu-item > a,
    .et_mobile_menu li.current_page_item > a {
        background: transparent !important;
        color: #000000 !important;
        opacity: 1 !important;
    }

    /* Neutralise les anciennes largeurs/positions Divi qui réduisaient le menu. */
    #mobile_menu,
    #mobile_menu.et_mobile_menu {
        min-width: 0 !important;
        max-height: calc(100vh - 96px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Le bouton ACHETER desktop ne doit pas être repris dans le menu mobile. */
    .et_mobile_menu .vp-desktop-buy-menu {
        display: none !important;
    }
}

@media (max-width: 479px) {
    .et_mobile_menu {
        left: 5% !important;
        right: 5% !important;
        padding: 16px 24px !important;
    }

    .et_mobile_menu li a {
        padding: 18px 0 !important;
        font-size: 1.05rem !important;
    }
}


/* ============================================================
   CORRECTION LARGEUR / POSITION DU MENU MOBILE
   Le panneau est ancré au header complet, pas à la colonne hamburger.
   ============================================================ */
@media (max-width: 980px) {

    #main-header,
    #main-header .container {
        overflow: visible !important;
    }

    #main-header .container {
        position: relative !important;
    }

    #et-top-navigation,
    #et_mobile_nav_menu,
    .mobile_nav {
        position: static !important;
        width: auto !important;
    }

    /*
     * Divi place normalement .et_mobile_menu dans la petite zone
     * de navigation à droite. On le repositionne par rapport à la
     * largeur de l'écran afin d'obtenir le panneau Swiss Vapeur.
     */
    #mobile_menu.et_mobile_menu,
    .et_mobile_menu {
        position: fixed !important;
        top: 96px !important;
        left: 50% !important;
        right: auto !important;
        width: min(88vw, 700px) !important;
        max-width: 88vw !important;
        height: auto !important;
        max-height: calc(100vh - 96px) !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding: 20px 30px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 100003 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #mobile_menu.et_mobile_menu li,
    .et_mobile_menu li {
        position: relative !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mobile_menu.et_mobile_menu li a,
    .et_mobile_menu li a {
        position: relative !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: normal !important;
    }
}

@media (max-width: 479px) {
    #mobile_menu.et_mobile_menu,
    .et_mobile_menu {
        width: 90vw !important;
        max-width: 90vw !important;
        padding: 16px 24px !important;
    }

    #mobile_menu.et_mobile_menu li a,
    .et_mobile_menu li a {
        padding: 18px 0 !important;
    }
}


/* ============================================================
   ACHETER DESKTOP HORS DU <ul> DU MENU
   Évite que Divi le clone dans le menu hamburger mobile.
   ============================================================ */
.vp-desktop-buy-standalone {
    display: none;
}

@media (min-width: 981px) {
    .vp-desktop-buy-menu {
        display: none !important;
    }

    .vp-desktop-buy-standalone {
        position: relative !important;
        display: inline-block !important;
        vertical-align: top !important;
        width: 112px !important;
        height: 40px !important;
        margin: -10px 0 0 18px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        background: #ed168c !important;
        z-index: 1000 !important;
        cursor: pointer !important;
    }

    .vp-desktop-buy-standalone .vp-desktop-buy-label {
        position: absolute !important;
        inset: 0 !important;
        z-index: 999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 112px !important;
        height: 40px !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
        border-radius: 22px !important;
        background: #ed168c !important;
        color: #fff !important;
        font-family: 'Rem', sans-serif !important;
        font-size: 0.875rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        pointer-events: none !important;
    }

    .vp-desktop-buy-standalone .vp-desktop-buy-smeetz,
    .vp-desktop-buy-standalone .vp-desktop-buy-smeetz *,
    .vp-desktop-buy-standalone .vp-desktop-buy-smeetz button,
    .vp-desktop-buy-standalone .vp-desktop-buy-smeetz a,
    .vp-desktop-buy-standalone .vp-desktop-buy-smeetz [role="button"] {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 22px !important;
        background: transparent !important;
        background-color: transparent !important;
        color: transparent !important;
        box-shadow: none !important;
        opacity: 0.001 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 980px) {
    .vp-desktop-buy-standalone,
    .vp-desktop-buy-menu,
    .et_mobile_menu .vp-desktop-buy-standalone,
    .et_mobile_menu .vp-desktop-buy-menu {
        display: none !important;
    }
}


/* ============================================================
   MENU MOBILE - CENTRÉ ET PRESQUE PLEINE LARGEUR
   Style inspiré de Swiss Vapeur, texte rose Valley Pass.
   ============================================================ */
@media (max-width: 980px) {
    #mobile_menu.et_mobile_menu,
    .et_mobile_menu {
        left: 50% !important;
        right: auto !important;
        width: 92vw !important;
        max-width: 92vw !important;
        transform: translateX(-50%) !important;
        padding: 18px 28px !important;
        background: #ffffff !important;
    }

    #mobile_menu.et_mobile_menu li a,
    .et_mobile_menu li a {
        color: #e91f8c !important;
        font-family: 'Rem', sans-serif !important;
        font-weight: 900 !important;
        text-align: left !important;
        padding: 20px 0 !important;
        border-bottom: 1px solid #eeeeee !important;
    }

    #mobile_menu.et_mobile_menu li.current-menu-item > a,
    #mobile_menu.et_mobile_menu li.current_page_item > a,
    .et_mobile_menu li.current-menu-item > a,
    .et_mobile_menu li.current_page_item > a,
    #mobile_menu.et_mobile_menu li a:hover,
    .et_mobile_menu li a:hover {
        color: #e91f8c !important;
        background: transparent !important;
        opacity: 1 !important;
    }

    #mobile_menu.et_mobile_menu li:last-child a,
    .et_mobile_menu li:last-child a {
        border-bottom: 0 !important;
    }
}

@media (max-width: 479px) {
    #mobile_menu.et_mobile_menu,
    .et_mobile_menu {
        width: 94vw !important;
        max-width: 94vw !important;
        padding: 16px 22px !important;
    }
}


/* ============================================================
   MENU MOBILE - CENTRAGE RÉEL PAR RAPPORT À L'ÉCRAN
   ============================================================ */
@media (max-width: 980px) {
    #mobile_menu.et_mobile_menu,
    .et_mobile_menu {
        position: fixed !important;
        left: 4vw !important;
        right: 4vw !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 479px) {
    #mobile_menu.et_mobile_menu,
    .et_mobile_menu {
        left: 3vw !important;
        right: 3vw !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
}


/* ============================================================
   MENU MOBILE - PANNEAU ATTACHÉ AU VIEWPORT
   Le JS déplace .et_mobile_menu directement dans <body>.
   Il ne peut donc plus être rogné par le header Divi.
   ============================================================ */
@media (max-width: 980px) {
    body > #mobile_menu.et_mobile_menu,
    body > .et_mobile_menu {
        position: fixed !important;
        top: 96px !important;
        left: 4vw !important;
        right: 4vw !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100vh - 110px) !important;
        margin: 0 !important;
        padding: 18px 28px !important;
        transform: none !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 100003 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body > .et_mobile_menu li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body > .et_mobile_menu li a {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 0 !important;
        color: #e91f8c !important;
        font-family: 'Rem', sans-serif !important;
        font-weight: 900 !important;
        text-align: left !important;
        white-space: normal !important;
        border-bottom: 1px solid #eee !important;
        background: transparent !important;
    }

    body > .et_mobile_menu li:last-child a {
        border-bottom: 0 !important;
    }
}

@media (max-width: 479px) {
    body > #mobile_menu.et_mobile_menu,
    body > .et_mobile_menu {
        left: 3vw !important;
        right: 3vw !important;
        padding: 16px 22px !important;
    }
}


/* ============================================================
   MENU MOBILE - SLIDE VERTICAL
   Ouverture vers le bas, fermeture vers le haut.
   ============================================================ */
@media (max-width: 980px) {
    body > #mobile_menu.et_mobile_menu,
    body > .et_mobile_menu {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-28px) !important;
        transform-origin: top center !important;

        transition:
            opacity 220ms ease,
            transform 220ms ease,
            visibility 0s linear 220ms !important;

        -webkit-transition:
            opacity 220ms ease,
            -webkit-transform 220ms ease,
            visibility 0s linear 220ms !important;

        will-change: opacity, transform;
    }

    body > #mobile_menu.et_mobile_menu.vp-menu-visible,
    body > .et_mobile_menu.vp-menu-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;

        transition:
            opacity 220ms ease,
            transform 220ms ease,
            visibility 0s linear 0s !important;

        -webkit-transition:
            opacity 220ms ease,
            -webkit-transform 220ms ease,
            visibility 0s linear 0s !important;
    }
}


/* ============================================================
   LOGO VPASS MINI 2027 - TAILLES HEADER
   Desktop plus petit / mobile plus grand
   ============================================================ */

/* Desktop */
@media (min-width: 981px) {
    #main-header #logo {
        width: 210px !important;
        max-width: 210px !important;
        height: auto !important;
        max-height: 68px !important;
        object-fit: contain !important;
    }
}

/* Mobile / tablette */
@media (max-width: 980px) {
    #main-header #logo {
        width: 230px !important;
        max-width: 42vw !important;
        height: auto !important;
        max-height: 82px !important;
        object-fit: contain !important;
    }
}

/* Petits mobiles */
@media (max-width: 600px) {
    #main-header #logo {
        width: 190px !important;
        max-width: 44vw !important;
        height: auto !important;
        max-height: 76px !important;
    }
}


/* ============================================================
   LOGO VPASS MINI 2027 - AJUSTEMENT V2
   Légèrement réduit sur desktop et mobile
   ============================================================ */

@media (min-width: 981px) {
    #main-header #logo {
        width: 190px !important;
        max-width: 190px !important;
        max-height: 62px !important;
    }
}

@media (max-width: 980px) {
    #main-header #logo {
        width: 210px !important;
        max-width: 39vw !important;
        max-height: 76px !important;
    }
}

@media (max-width: 600px) {
    #main-header #logo {
        width: 175px !important;
        max-width: 41vw !important;
        max-height: 70px !important;
    }
}


/* ============================================================
   LOGO VPASS MINI 2027 - AJUSTEMENT V3
   Encore légèrement réduit
   ============================================================ */

@media (min-width: 981px) {
    #main-header #logo {
        width: 175px !important;
        max-width: 175px !important;
        max-height: 58px !important;
    }
}

@media (max-width: 980px) {
    #main-header #logo {
        width: 195px !important;
        max-width: 37vw !important;
        max-height: 71px !important;
    }
}

@media (max-width: 600px) {
    #main-header #logo {
        width: 165px !important;
        max-width: 39vw !important;
        max-height: 66px !important;
    }
}


/* ============================================================
   LOGOS VPASS MINI / MAXI - FONDU EN BOUCLE CORRIGÉ
   MINI reste le vrai #logo attendu par Divi.
   ============================================================ */

#main-header .logo_container {
    overflow: visible !important;
}

#main-header .vp-logo-crossfade {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    display: block !important;
    transform: translateY(-50%) !important;
    overflow: visible !important;
}

#main-header .vp-logo-crossfade #logo,
#main-header .vp-logo-crossfade .vp-logo-maxi {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: left center !important;
}

#main-header .vp-logo-crossfade #logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1;
    animation: vpMiniFade 12s ease-in-out infinite !important;
}

#main-header .vp-logo-crossfade .vp-logo-maxi {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0;
    animation: vpMaxiFade 12s ease-in-out infinite !important;
}

/* 3 s MINI, fondu 1 s, 3 s MAXI, fondu 1 s */
@keyframes vpMiniFade {
    0%, 37.5%   { opacity: 1; }
    50%, 87.5%  { opacity: 0; }
    100%        { opacity: 1; }
}

@keyframes vpMaxiFade {
    0%, 37.5%   { opacity: 0; }
    50%, 87.5%  { opacity: 1; }
    100%        { opacity: 0; }
}

/* Tailles validées précédemment */
@media (min-width: 981px) {
    #main-header .vp-logo-crossfade {
        width: 175px !important;
        height: 58px !important;
    }
}

@media (max-width: 980px) {
    #main-header .vp-logo-crossfade {
        width: min(195px, 37vw) !important;
        height: 71px !important;
    }
}

@media (max-width: 600px) {
    #main-header .vp-logo-crossfade {
        width: min(165px, 39vw) !important;
        height: 66px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #main-header .vp-logo-crossfade #logo {
        animation: none !important;
        opacity: 1 !important;
    }

    #main-header .vp-logo-crossfade .vp-logo-maxi {
        animation: none !important;
        opacity: 0 !important;
    }
}


/* ============================================================
   FONDU LOGOS - CONSERVATION DES PROPORTIONS
   Même hauteur pour MINI et MAXI, largeur automatique.
   ============================================================ */

#main-header .vp-logo-crossfade #logo,
#main-header .vp-logo-crossfade .vp-logo-maxi {
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* Le MINI définit la hauteur du bloc. */
#main-header .vp-logo-crossfade #logo {
    height: 100% !important;
}

/* Le MAXI garde exactement la même hauteur, sans être étiré en largeur. */
#main-header .vp-logo-crossfade .vp-logo-maxi {
    height: 100% !important;
    width: auto !important;
    right: auto !important;
}


/* ============================================================
   LOGOS VPASS - AJUSTEMENT FINAL
   4 s MINI + 1 s fondu + 4 s MAXI + 1 s fondu.
   Logos légèrement réduits sur mobile.
   ============================================================ */

@keyframes vpMiniFade {
    0%, 40%  { opacity: 1; }
    50%, 90% { opacity: 0; }
    100%     { opacity: 1; }
}

@keyframes vpMaxiFade {
    0%, 40%  { opacity: 0; }
    50%, 90% { opacity: 1; }
    100%     { opacity: 0; }
}

/* Mobile / tablette : réduction des deux logos, proportions conservées */
@media (max-width: 980px) {
    #main-header .vp-logo-crossfade {
        width: 175px !important;
        height: 64px !important;
        max-width: 34vw !important;
    }
}

/* Petits mobiles */
@media (max-width: 600px) {
    #main-header .vp-logo-crossfade {
        width: 150px !important;
        height: 60px !important;
        max-width: 36vw !important;
    }
}


/* ============================================================
   LOGOS VPASS - AJUSTEMENT V3
   5 s MINI + 1 s fondu + 5 s MAXI + 1 s fondu.
   Encore plus petits sur mobile.
   ============================================================ */

@keyframes vpMiniFade {
    0%, 41.6667%      { opacity: 1; }
    50%, 91.6667%     { opacity: 0; }
    100%              { opacity: 1; }
}

@keyframes vpMaxiFade {
    0%, 41.6667%      { opacity: 0; }
    50%, 91.6667%     { opacity: 1; }
    100%              { opacity: 0; }
}

@media (max-width: 980px) {
    #main-header .vp-logo-crossfade {
        width: 160px !important;
        height: 58px !important;
        max-width: 31vw !important;
    }
}

@media (max-width: 600px) {
    #main-header .vp-logo-crossfade {
        width: 138px !important;
        height: 54px !important;
        max-width: 33vw !important;
    }
}


/* ============================================================
   LOGOS VPASS - REDUCTION AU SCROLL SUR DESKTOP
   Taille normale en haut de page, plus petite quand le header
   devient fixe après défilement.
   ============================================================ */
@media (min-width: 981px) {
    #main-header .vp-logo-crossfade {
        transition: width 220ms ease, height 220ms ease, transform 220ms ease !important;
    }

    #main-header.et-fixed-header .vp-logo-crossfade {
        width: 145px !important;
        height: 48px !important;
    }
}


/* LOGOS VPASS - encore plus petits au scroll desktop */
@media (min-width: 981px) {
    #main-header.et-fixed-header .vp-logo-crossfade {
        width: 120px !important;
        height: 40px !important;
    }
}


/* ============================================================
   SLIDERS - CORRECTION DES FLÈCHES
   Remplace les glyphes/chiffres provenant des anciennes polices
   d'icônes par de vraies flèches CSS.
   ============================================================ */

/* Slick */
.slick-prev::before,
.slick-next::before {
    content: "" !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    border-top: 3px solid currentColor !important;
    border-right: 3px solid currentColor !important;
    opacity: 1 !important;
    font-family: inherit !important;
}

.slick-prev::before {
    transform: rotate(-135deg) !important;
}

.slick-next::before {
    transform: rotate(45deg) !important;
}

/* Swiper */
.swiper-button-prev::after,
.swiper-button-next::after {
    content: "" !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    border-top: 3px solid currentColor !important;
    border-right: 3px solid currentColor !important;
    font-family: inherit !important;
}

.swiper-button-prev::after {
    transform: rotate(-135deg) !important;
}

.swiper-button-next::after {
    transform: rotate(45deg) !important;
}

/* Ancien slider Divi / ET */
.et-pb-arrow-prev::before,
.et-pb-arrow-next::before {
    content: "" !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    border-top: 3px solid currentColor !important;
    border-right: 3px solid currentColor !important;
    font-family: inherit !important;
}

.et-pb-arrow-prev::before {
    transform: rotate(-135deg) !important;
}

.et-pb-arrow-next::before {
    transform: rotate(45deg) !important;
}