/* START MENU DESKTOP */

div.my_header_nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9990;
    width: 100%;
    height: 115px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 50px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 33px #00000029;
    transition: transform 0.5s ; /* Transition douce */
}

.scrollUpDesktop {
    transform: translateY(-100%); /* Cache la navbar */
}

.header_nav_desktop {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
}

/* START NAV RIGHT */

div.header_nav_right {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.header_nav_logo {
    width: 20%;
    height: auto;
}

div.header_nav_logo .site_logo a {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

div.header_nav_menu {
    width: 80%;
    height: auto;
}

nav.main_navigation ul.menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 0 40px;
}

nav.main_navigation ul.menu li {
    padding: 0 10px;
}

nav.main_navigation ul.menu li a {
    color: #000;
    transition: .3s ease-in;
    position: relative; /* Positionnement relatif pour la barre */
}

nav.main_navigation ul.menu li a:hover {
    color: #e60c80;
}

nav.main_navigation ul.menu li a::before {
    content: ''; /* Ajoute un pseudo-élément avant le lien */
    position: absolute;
    bottom: -46px;
    left: 0;
    width: 0%;  /* Initialement la barre est invisible */
    height: 10px; /* Hauteur de la barre */
    background-color: #e60c80; /* Couleur de la barre */
    transition: width 0.3s ease-in; /* Transition pour l'effet */
}

nav.main_navigation ul.menu li a:hover::before {
    width: 100%; /* La barre prend toute la largeur au survol */
}


/* END NAV RIGHT */


/************************************** */


/* START NAV LEFT */

div.header_nav_left {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.header_nav_search_bar {
    width: 70%;
}

div.header_nav_search_bar .search_bar div {
    max-width: none !important;
    width: 100%;
}

div.header_nav_search_bar .search_bar input[type=search] {
    border: 1px solid #DFDFDF !important;
    color: #686868 !important;
    background: #fff !important;
    border-radius: 5px !important;
}

div.header_nav_search_bar .search_bar #searchsubmit {
    min-width: 60px !important;
    width: 60px !important;
    height: 96% !important;
    border-radius: 0 5px 5px 0 !important;
    background-color: #fff;
    border: 0px;
    margin: 1px 1px 0 0 !important;
}

div.header_nav_search_bar .search_bar input[type=submit] {
    color: #200E32;
    font-size: 20px !important;
}

div.header_nav_account_cart {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.header_nav_account_cart .user_account {
    width: 30px;
    margin: 0 10px;
}

div.header_nav_account_cart .user_account a {
    width: 100%;
    display: flex;
}

div.header_nav_account_cart .shopping_cart {
    width: 30px;
    margin: 0 10px;
}

div.header_nav_account_cart .shopping_cart a {
    width: 100%;
    display: flex;
}

div.header_nav_account_cart .shopping_cart a span.cart-count{
    color: #e60c80;
}

.user_account .dropdown {
    position: relative;
    /*display: inline-block;*/
}

.user_account .dropdown img {
    cursor: pointer;
    width: 40px; /* Ajustez la taille de l'image selon vos besoins */
    height: auto;
}

.user_account .dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    z-index: 1;
    min-width: 150px; /* Ajustez la largeur du menu déroulant selon vos besoins */
    top: 100%; /* Positionner le menu juste en dessous de l'image */
    left: 0;
}

.user_account .dropdown:hover .dropdown-menu {
    display: block;
}

.user_account .dropdown-menu a {
    color: #000;
    text-decoration: none;
    display: block;
    padding: 8px 0;
    transition: 0.3s ease;
}

.user_account .dropdown-menu a:hover {
    color: #e60c80;
}

/* END NAV LEFT */

/* END MENU DESKTOP */


/************************************** */


/* START BURGER MENU MOBILE */

div.header_nav_mobile {
    display: none;
}

div.header_nav_menu_mobile {
    display: none;
}

.menu_mobile {
    width: 100%;
    height: auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    padding: 0;
}

.line {
    fill: none;
    stroke: #e60c80;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}
.line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}
.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

/* END BURGER MENU MOBILE */


/************************************** */


@media only screen and (max-width: 1440px) {
      
}

@media only screen and (max-width: 1200px) {

}

@media only screen and (max-width: 992px) {
    div.header_nav_desktop {
        display: none;
    }

    div.my_header_nav_mobile {
        transition: transform 0.5s ; /* Transition douce */
    }

    .scrollUpMobile {
        transform: translateY(-100%); /* Cache la navbar */
    }

    div.header_nav_menu_mobile {
        display: block;
    }

    div.header_nav_mobile {
        /*display: block;*/
        display: flex;
        align-items: center;
        width: 100%;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 9999;
        background-color: rgba(255, 255, 255, 0.8);
    }

    div.header_nav_menu_mobile {
        transform: translateX(100%); /* Menu hors de l'écran à droite */
        transition: transform 0.3s ease-in-out; /* Animation en douceur */
        position: fixed;
        top: 0;
        right: 0;
        width: 100%; /* Largeur du menu */
        height: 100%;
        background-color: #fff; /* Couleur de fond du menu */
        z-index: 9998;
        /*box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);  Optionnel : ombre portée */
        overflow: scroll;
    }
    
    div.header_nav_menu_mobile.open {
        transform: translateX(0); /* Menu visible à l'intérieur de l'écran */
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 80px 0 0 0;
    }

    div.header_nav_logo_mobile {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }

    div.site_logo_mobile {
        width: 150px;
    }

    div.site_logo_mobile a {
        display: flex;
        width: 150px;
    }

    div.header_nav_account_cart_mobile {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    div.user_account_mobile {
        width: 30px;
        height: 30px;
        margin: 0 10px;
    }

    div.shopping_cart_mobile {
        width: 30px;
        height: 30px;
        margin: 0 10px;
    }

    div.shopping_cart_mobile a.cart-link {
        display: flex;
    }

    div.header_nav_account_cart_mobile .shopping_cart_mobile a span.cart-count {
        color: #e60c80;
    }

    div.header_nav_search_bar_mobile {
        width: 100%;
        height: 10%;
        display: flex;
        align-items: center;
        padding: 0 20px;
    }

    div.search_bar_mobile {
        width: 100%;
    }

    div.search_bar_mobile div {
        max-width: 100% !important;
        display: block;
        margin: auto;
    }

    div.header_nav_search_bar_mobile .search_bar_mobile input[type=search] {
        border: 1px solid #DFDFDF !important;
        color: #686868 !important;
        background: #fff !important;
        border-radius: 5px !important;
    }
    
    div.header_nav_search_bar_mobile .search_bar_mobile #searchsubmit {
        min-width: 60px !important;
        width: 60px !important;
        height: 96% !important;
        border-radius: 0 5px 5px 0 !important;
        background-color: #fff;
        border: 0px;
        margin: 1px 1px 0 0 !important;
    }
    
    div.header_nav_search_bar_mobile .search_bar_mobile input[type=submit] {
        color: #200E32;
        font-size: 20px !important;
    }

    div.header_nav_menu_mobile_position {
        width: 100%;
        height: 80%;
    }

    nav.main_navigation_mobile {
        width: 100%;
        height: 100%;
    }

    div.header_nav_menu_mobile ul.menu {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        margin: 0;
    }

    div.header_nav_menu_mobile ul li {
        width: 50%;
        height: auto;
        border-bottom: 1px solid #d0cfcf;
    }

    div.header_nav_menu_mobile ul li a {
        display: flex;
        width: 50%;
        height: auto;
        margin: 10px 0 10px 5px;
        color: #000;
    }
}

@media only screen and (max-width: 767px) {
    div.header_nav_menu_mobile ul li {
        width: 60%;
    }

    button.menu_mobile svg {
        width: 60px;
        height: 60px;
    }
}

@media only screen and (max-width: 468px) {
    div.header_nav_menu_mobile ul li {
        width: 70%;
    }
}