/* header contact */
    .header_contact{
        display: flex;
        justify-content: flex-end;
        padding: .5rem 2rem;
        border-bottom: var(--border);
    }

    .header_container_contact{
        display: flex;
        gap: 1rem;
    }

    .header_content_contact{
        display: flex;
        align-items: center;
    }

    .header_content_contact i{
        margin-right: .3rem;
        color: var(--orange);
    }

    .header_icon_social i{
        margin-left: .5rem;
        font-size: 20px;
        color: #00000040;
        border: 1px solid #00000040;
        border-radius: 50%;
        padding: .3rem;
    }

    .header_icon_social i:hover{
        background: var(--orange);
        color: white;
        border: none;
    }
/* header contact */

/* logo search icon */
    .header_search_global{
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .8rem 2rem;
        border-bottom: var(--border);
    }

    .header_box_logo{
        display: flex;
        align-items: center;
    }

    .box_logo_edna{
        width: 3rem;
        height: 3rem;                
    }

    .header_box_logo img{
        object-fit: cover;
        border-radius: 50%;
    }

    .header_box_logo .name_shop{
        color: var(--blue);
        font-size: 25px;
        font-weight: bolder;
        margin-left: .3rem;
    }

    .header_search form{
        position: relative;
        width: 50rem;
        display: flex;
        align-items: center;
    }

    #close_search{
        display: none;
    }

    .header_search form input{
        width: 100%;
        padding: .6rem;
        border: var(--border);
        border-radius: .5rem;
        font-size: 16px;
    }

    .header_search form button{
        position: absolute;
        right: 0;
        padding: .6rem;
        border: none;
        background: none;
        font-size: 20px;
        display: flex;
        align-items: center;
        color: black;
    }

    .header_search form button i{
        background: white;
    }

    .header_search form button i:hover{
        cursor: pointer;
        color: var(--orange);
        scale: 1;
    }

    .box_icon{
        display: flex;
        gap: .5rem;
    }

    .box_icon i{
        padding: .4rem;
    }

    .box_icon .other_icon, .box_icon i{
        position: relative;
    }

    .other_icon:hover, .box_icon a:hover{
        transform: translateY(-2px);
    }

    .count{
        position: absolute;
        width: 20px; height: 20px;
        top: -3px; right: -3px;
        background: var(--orange);
        color: white;
        padding: .2rem;
        border-radius: 50%;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box_icon i{
        font-size: 25px;
        cursor: pointer;
        color: black;
    }

    .box_icon form button{
        background: none;
        border: none;
    }

    .box_icon .bx-search, .bx-menu, .store_alt, .box_icon p{
        display: none;
    }

    /* profile user */
        .profile_users{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .profile_users:hover{
            transform: translatey(-2px);
        }

        .profile_users img{
            width: 28px;
            height: 28px;
            object-fit: cover;
            border-radius: 50%;
            box-shadow: var(--box-shadow);
        }
    /* profile user */

    /* box profile menu */
        .box_menu_profile{
            position: fixed;
            right: 0; top: 0;
            width: 240px;
            height: 100vh;
            padding: 1rem;
            box-shadow: var(--box-shadow);
            border: 1px solid #ccc;
            border-top-right-radius: 0px;
            backdrop-filter: blur(30px);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            z-index: 10000;
        }

        .box_menu_profile.active{
            top: 0;
            clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
        }

        #close_profile_menu{
            position: absolute;
            top: .5rem; right: .5rem;
            font-size: 25px;
            cursor: pointer;
            color: var(--orange);
        }

        #close_profile_menu:hover{
            color: black;
            font-size: 32px;
        }

        .box_profile_img{
            width: 80px;
            height: 80px;
            margin: 0 auto;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 43px;
            text-transform: uppercase;
            font-weight: bolder;
            color: white;
        }

        .box_profile_img img{
            object-fit: cover;
            border-radius: 50%;
        }

        .name_user{
            text-align: center;
            padding: .3rem 0;
            font-size: 17px;
            font-weight: bolder;
        }

        /* menu profile */
            ul.menu_profile{ 
                list-style: none;
            }

            ul.menu_profile li{
                padding: .5rem 0;
            }

            ul.menu_profile li:hover{
                scale: 1.05;
            }

            ul.menu_profile button{
                background: none;
                border: none;
                cursor: pointer;
            }

            ul.menu_profile li a, ul.menu_profile button{
                font-size: 18px;
                color: black;
            }

            ul.menu_profile li button{
                color: var(--orange);
                font-weight: 600;
            }

            ul.menu_profile li a i, ul.menu_profile button i{
                font-size: 20px;
                margin-right: .5rem;
                transform: translatey(2px);
                color: var(--orange);
            }
        /* menu profile */
    /* box profile menu */
/* logo search icon */

/* navbar */
    nav{
        position: relative;
        z-index: 10000;
        display: flex;
        justify-content: center;
    }

    .nav_logo_name{
        display: none;
    }

    /* niveau1 */
        .niveau1 li{
            display: inline-block;
            padding: .8rem;
            position: relative;
        }
    
        .niveau1 li:hover{
            cursor: pointer;
            border-bottom: 2px solid var(--orange);
            transition: none;
        }
    
        .niveau1 li, .niveau1 li a{
            font-weight: bolder;
            color: rgba(0,0,0,.8);
            text-transform: uppercase;
            font-size: 18px;
        }
    
        .niveau1 li i{
            color: var(--orange);
            transform: translatey(1px);
        }
    
        .niveau1 li .bx-home{
            transform: translatey(0px);
        }
    /* niveau1 */
    
    /* niveau2 */
        .niveau2{
            position: absolute;
            top: 100%; left: 0;
            width: max-content;
            background: var(--white);
            display: flex;
            flex-direction: column;
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        }
        
        .niveau2 li{
            padding: 5px 12px;
        }
        
        .niveau2 li a{
            text-transform: capitalize;
            font-size: 16px;
        }
        
        .niveau2 li:hover{
            border: none;
            background: var(--orange);
        }
        
        .niveau2 li:hover a{
            color: var(--white);
        }
        
        .niveau1 li:hover .niveau2{
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    /* niveau2 */
/* navbar */

/* connection / inscription */
    .container_form{
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100vh;
        backdrop-filter: blur(20px);
        background-size: cover;
        padding: .5rem;
        z-index: 10000000;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    .container_form.active{
        top: 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    #close_connection{
        display: block;
        position: absolute;
        top: .9rem; right: 1.3rem;
        font-size: 1.8rem;
        cursor: pointer;
        color: var(--orange);
    }

    #close_connection:hover{
        color: black;
        font-size: 2rem;
    }

    .content_form{
        position: relative;
        top: 50%; left: 50%;
        transform: translate(-50%,-50%);
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .container_form .buttons{
        display: flex;
        gap: 1rem;
        margin-bottom: .7rem;
    }

    .container_form .buttons .btn_form{
        width: 100px;
        padding: .5rem;
        color: white;
        background: var(--orange);
        text-align: center;
        border-radius: .5rem;
        cursor: pointer;
    }

    .container_form .buttons .btn_form.active{
        background: none;
        backdrop-filter: blur(10px);
        border: 2px solid var(--orange);
        color: var(--orange);
    }

    .container_form form{
        width: 20rem;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        background: white;
        border: 1px solid #ffffff80;
        border-radius: 1rem;
        gap: .5rem;
        box-shadow: 0px 0px 3px #ccc;
    }

    .container_form form.active{
        display: flex;
    }

    .container_form .entete_form{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .container_form .box_logo{
        width: 100px;
        height: 100px;
    }

    .container_form .box_logo img{
        object-fit: cover;
        padding: .2rem;
        background: white;
        border-radius: 50%;
    }

    .container_form .entete_form h2{
        color: var(--blue);
        font-size: 22px;
    }

    .container_form .champ_connect{
        width: 100%;
        padding: .5rem;
        background: none;
        border: none;
        outline: none;
        border-bottom: 1px solid var(--blue);
        border-radius: .5rem;
        font-size: 14px;
    }

    .container_form .champ_connect:focus{
        border: 1px solid var(--blue);
    }

    .error_msg{
        text-align: center;
        color: red;
    }

    .container_form .champ_connect.input-error{
        border: 1px solid red;
    }

    .flex_remember_Fpassword{
        width: 100%;
        padding: .5rem 0;
        display: flex;
        justify-content: space-between;
    }

    .flex_remember{
        display: flex;
        gap: .3rem;
    }

    .flex_remember_Fpassword label{
        font-size: 14px;
        cursor: pointer;
    }

    .flex_remember_Fpassword a{
        font-size: 14px;
        margin-left: auto;
        color: var(--orange);
    }

    .flex_remember_Fpassword a:hover{
        text-decoration: underline;
    }
/* connection / inscription */


/* header contact */
    @media screen and (max-width: 570px){
        .header_contact{
            justify-content: center;
        }

        .header_icon_social i{
            font-size: 17px;
        }
    }
/* header contact */

/* logo search icon */
    @media screen and (max-width: 1300px){
        .header_search form{
            width: 45rem;
        }
    }
    
    @media screen and (max-width: 1220px){
        .header_search form{
            width: 40rem;
        }
    }
    
    @media screen and (max-width: 1130px){
        .header_search form{
            width: 35rem;
        }
    }

    @media screen and (max-width: 1080px){
        .header_search form{
            width: 30rem;
        }
    }

    @media screen and (max-width: 990px){
        .header_search form{
            width: 25rem;
        }
    }
    
    @media screen and (max-width: 910px){
        .header_search form{
            width: 22rem;
        }
    }

    @media screen and (max-width: 850px){
        .header_search{
            position: fixed;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(20px);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            padding: 1rem;
        }

        .header_search.active{
            top: 0;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }

        #close_search{
            display: block;
            position: absolute;
            top: .9rem; right: .9rem;
            font-size: 28px;
            cursor: pointer;
            color: var(--orange);
        }

        #close_search:hover{
            font-size: 32px;
            color: black;
        }

        .header_search form input{
            border-color: var(--blue);
            font-size: 15px;
        }

        .box_icon .bx-search{
            display: block;
        }
    }

    @media screen and (max-width: 550px){
        .header_search form{
            width: 100%;
        }
    }

    /* for menu bottom */
        @media screen and (max-width: 570px){
            .box_icon{
                position: fixed;
                width: 100%;
                left: 0; bottom: 0;
                background: white;
                z-index: 100000;
                border-top: var(--border);
                padding: .5rem;
                justify-content: space-around;
                overflow-x: auto;
                column-gap: 1rem;
                flex-wrap: nowrap;
            }
            
            .box_icon::-webkit-scrollbar{
                width: 0;
                height: 0;
            }
            
            .box_icon::-webkit-scrollbar-track{
                background-color: transparent;
            }
            
            .box_icon::-webkit-scrollbar-thumb{
                background-color: transparent;
            }

            .header_search_global{
                justify-content: center;
            }
            
            .store_alt{
                display: block;
            }
            
            .box_icon p{
                display: block;
                margin-top: -.4rem;
                font-size: 12px;
                color: black;
                text-wrap: nowrap;
            }
            
            .other_icon, .box_icon a{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            
            .profile_users img{
                width: 30px;
                height: 30px;
            }
            
            .profile_users p{
                margin-top: 2px;
            }
        }
    /* for menu bottom */
/* logo search icon */

/* navbar */
    @media screen and (max-width: 1100px){
        .bx-menu{
            display: block;
        }

        nav{
            position: fixed;
            left: 0; top: 0;
            flex-direction: column;
            justify-content: flex-start;
            width: 12rem;
            height: 100%;
            backdrop-filter: blur(20px);
            border-right: var(--border);
            clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
        }

        .navbar.active{
            top: 0;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }

        .nav_logo_name{
            display: block;
        }

        .nav_logo{
            background: white;
            width: 7rem;
            height: 7rem;
            padding: .2rem;
            border-radius: 50%;
            margin: .5rem auto 0 auto;
        }

        .nav_logo img{
            object-fit: cover;
            border-radius: 50%;
        }

        .nav_name{
            text-align: center;
            font-weight: bolder;
            font-size: 20px;
            color: black;
            margin-top: .3rem;
        }

        /* niveau1 */
            .niveau1 li{
                display: block;
                padding: .6rem .8rem;
            }
    
            .niveau1 li:hover{
                border-bottom: none;
            }
    
            .niveau1 li:hover i, .niveau1 li:hover a{
                scale: 1.05;
            }
        /* niveau1 */
        
        /* niveau2 */
            .niveau2{
                background: none;
                margin-top: 5px;
            }
            
            .niveau1 li:hover .niveau2{
                position: relative;
                width: 100%;
            }
        /* niveau2 */
    }
/* navbar */

/* connection / inscription */
    @media screen and (max-width: 350px) {
        .container_form form{
            width: 17rem;
        }

        .flex_remember_Fpassword label, .flex_remember_Fpassword a{
            font-size: 12px;
        }
    }
/* connection / inscription */