/* navbar */
    nav{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 24px 32px;
        position: absolute;
        left: 0; top: 100%;
        width: 100%;
    }

    .box_img_nav{
        width: auto;
        height: 35px;
        img{
            width: 100%; height: 100%;
            object-fit: contain;
        }
    }

    nav > .nav_ul{
        list-style: none;
        display: flex;
        gap: 32px;
    }

    nav > .nav_ul .nav_li{
        display: flex;
        align-items: center;
    }

    nav > .nav_ul .nav_li a{
        color: var(--white);
        padding-bottom: 3px;
        position: relative;
        text-decoration: none;
    }

    nav > .nav_ul .nav_li a.active::before, nav > .nav_ul .nav_li a:hover::before{
        content: '';
        width: 50%; height: 2px;
        background-color: var(--yellow);
        position: absolute;
        left: 0; bottom: 0;
        border-radius: 8px;
        animation: menu_animate .3s ease-in-out;
    }

    @keyframes menu_animate {
        0%{
            width: 0%;
        }
        100%{
            width: 50%;
        }
    }

    .box_icon_nav{
        display: flex;
        gap: 16px;
        svg{
            width: 24px; height: 24px;
            fill: var(--yellow);
        }
    }

    .icon_nav{
        position: relative;
        cursor: pointer;
        background: none;
        border: none;
    }

    .icon_nav:hover{
        transform: translateY(-3px);
    }
    
    /* profile utilisateur */
        .box_profile_icon_utilisateur{
            width: 24px; height: 24px;
            background: var(--yellow);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            span{
                font-size: 12px;
                font-weight: bolder;
                color: var(--red);
            }
            img{
                width: 24px; height: 24px;
                object-fit: cover;
                border-radius: 50%;
            }
        }
    /* profile utilisateur */
    
    /* menu utilisateur */
        .menu_utilisateur{
            position: fixed;
            top: 0; right: 0;
            width: 250px; height: 100dvh;
            background: var(--red);
            border-left: 2px solid var(--yellow);
            border-right: 2px solid var(--yellow);
            padding: 24px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 10000000;
            clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
        }
        
        .menu_utilisateur.active{
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        }
        
        .box_profile_img_utilisateur{
            width: 120px; height: 120px;
            background: var(--white);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            span{
                font-size: 50px;
                font-weight: bolder;
                color: var(--red);
            }
            img{
                width: 120px; height: 120px;
                object-fit: cover;
                border-radius: 50%;
            }
        }
        
        .nom_prenom{
            text-align: center;
            margin-top: 8px;
            span{
                color: var(--white);
                font-weight: 700;
                text-transform: capitalize;
            }
            span:last-child{
                text-transform: uppercase;
            }
        }
        
        /* menu connection */
            .menu_connection{
                list-style: none;
                display: flex;
                flex-direction: column;
                gap: 16px;
                margin-top: 8px;
            }
            
            .onglet_mc{
                background: none;
                border: none;
                text-decoration: none;
                display: flex;
                align-items: center;
                gap: 5px;
                span{
                    color: var(--white);
                }
            }
            
            .onglet_mc:hover{
                cursor: pointer;
                span{
                    color: var(--yellow);
                }
            }
        /* menu connection */
    /* menu utilisateur */

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

    /* btn menu tel */
        .btn_menu, .box_nav_logo{
            display: none;
        }
    /* btn menu tel */
/* navbar */

/* navbar sans hero */
    .navbar{
        background-color: var(--light-yellow);

        .box_img_nav:first-child{
            display: none;
        }

        .nav_ul .nav_li a{
            color: var(--red);
        }

        .nav_ul .nav_li a.active::before, .nav_ul .nav_li a:hover::before{
            background-color: var(--red);
        }

        .box_icon_nav svg{
            fill: var(--red);
        }

        .count_cart{
            background-color: var(--yellow);
            color: var(--red);
        }
    }
/* navbar sans hero */

/* nav scrolled */
    nav.scrolled{
        position: fixed;
        top: 0; left: 0;
        z-index: 10000000;
        background-color: var(--white);
        box-shadow: 0 2px 5px var(--light-black);
    }

    nav.scrolled > .nav_ul .nav_li a{
        color: var(--black);
    }

    nav.scrolled .box_icon_nav svg{
        fill: var(--black);
    }
/* nav scrolled */

/* box search */
    .container_search{
        width: 100%; height: 18dvh;
        background-color: var(--red);
        position: fixed;
        top: 0; left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    }

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

    .content_search{
        width: 400px;
    }
/* box search */

/* responsive */
    /* nav */
        @media screen and (max-width: 900px) {
            .btn_menu{
                display: block;
            }

            nav, .navbar{
                justify-content: space-between;
                padding: 24px 48px;
            }

            nav .nav_ul, .navbar .nav_ul{
                position: fixed;
                top: 0; left: 0;
                width: 250px; height: 100dvh;
                background-color: var(--red);
                border-right: 2px solid var(--white);
                flex-direction: column;
                gap: 16px;
                padding: 16px 32px;
                clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
                z-index: 10000000;
            }

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

            .box_nav_logo{
                display: flex;
                width: 100%; height: 80px;
                padding: 8px;
                img{
                    width: 100%; height: 100%;
                    object-fit: contain;
                }
            }

            nav .nav_ul .nav_li:first-child, .navbar .nav_ul .nav_li:first-child{
                display: flex;
                justify-content: center;
                background-color: var(--white);
                border-radius: 16px;
                img{
                    width: 100%; height: 100%;
                    object-fit: contain;
                }
            }

            nav .nav_ul .nav_li a, .navbar .nav_ul .nav_li a, nav.scrolled .nav_ul .nav_li a{
                color: var(--white);
            }

            nav > .nav_ul .nav_li a.active::before, nav > .nav_ul .nav_li a:hover::before, 
            .navbar > .nav_ul .nav_li a.active::before, .navbar > .nav_ul .nav_li a:hover::before{
                background-color: var(--yellow);
            }
        }

        @media screen and (max-width: 500px) {
            nav, .navbar{
                padding: 16px 32px;
            }
        }
    /* nav */
/* responsive */