:root
{
    --vert-bleu: #2e9db0;
    --violet: #745489;
}

html
{
    scroll-behavior: smooth;
    /* width: 100%;
    height: 100%; */
    margin: 0;
}

body 
{
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100svh;
    width: 100%;
    position: relative;
    font-family: Nunito;
}

i {
    font-style: normal;
}

.shopping {
    position: absolute;
    right: 10px;
    margin-top: -5px;
    width: 250px;
    /* height: 250px; */
    background-color: white;
    z-index: 3;
    display: none;
    flex-direction: column;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
    max-height: calc(100svh - 60px);
}

.shopping::after {
    bottom: 100%;
	left: 88%;
    /* transform: translateX(-50%); */
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: white;
	border-width: 8px;
	margin-left: -8px;
}

.shopping h1 {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 10px;
    color: black;
}

.total p {
    text-align: right;
    padding-right: 20px;
    margin: 0;
    height: 35px;
    color: grey;
}

.total::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 90%;
    height: 1px;
    background-color: rgb(179, 179, 179);
}

.vide {
    text-align: center;
    color: rgb(124, 124, 124);
}

.items {
    overflow-y: auto;
    margin-top: 5px;
}

.items p {
    margin: 0;
    color: black;
}

.item {
    margin: 5px 0;
    position: relative;
    padding: 0 10px;
    /* height: 45px;
    overflow: hidden; */
}

.item .detail p{
    color: rgb(84, 84, 84);
}

.item .detail {
    margin-bottom: 5px;
    padding-left: 20px;
}

.item:not(:last-child):after {
    content: '';
    position: absolute;
    width: 30%;
    height: 2px;
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(197, 197, 197);
    border-radius: 5px;
}

.prix {
    color: #2e9db0;
}

.item .prix {
    display: flex;
    justify-content: space-between;
    color: #2e9db0;
}

.checkout {
    position: relative;
    background-color: #745489;
    border-radius: 5px;
    padding: 5px;
    color: white;
    text-decoration: none;
    text-align: center;
    margin: 10px 25%;
}

.checkout:hover {
    background-color: #6a4380;
}

nav {
    width: 100%;
    height: 60px;
    background: linear-gradient(28deg, rgba(116,84,137,1) 26%, rgba(46,157,176,1) 78%);
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}

nav img {
    margin: 1rem;
}

nav ul
{
    display: inline-flex;
    gap: 15px;
    list-style: none;
    margin-right: 15px;
    color: white;
    font-size: 1.3em;
    align-items: center;
}

nav ul li {
    padding: 5px;
    border-radius: 5px;
    position: relative;
}

nav ul .onglets {
    text-decoration: none;
    color: white;
    border-radius: 5px;
}

nav ul .onglets:hover {
    background-color: rgba(116,84,137,1);
}

.nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cart {
    position: relative;
    cursor: pointer;
    color: white;
    font-size: 1.3em;
    margin-right: 30px;
}

.cart .nb-items {
    position: absolute;
    bottom: -2px;
    right: -7px;
    background-color: var(--violet);
    font-size: small;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
}

#menu, #close {
    display: none;
}

@media only screen and (max-width: 1100px){
    .nav
    {
        /* overflow: hidden; */
    }

    .nav ul
    {
        position: relative;
        flex-direction: column;
        /* width: 100%;
        height: 100svh; */
        /* justify-content: center; */
        display: none;
        align-items: center;
        /* visibility: hidden; */
        top: -40px;
        margin: 0;
        /* align-items: start; */
        z-index: 3;
        position: absolute;
        top: 45px;
        right: 11px;
        background: rgba(255, 255, 255, 0.308);
        backdrop-filter: blur( 5px );
        -webkit-backdrop-filter: blur( 5px );
        padding: 10px;
        border-radius: 10px;
    }

    .nav ul a li {
        background: -webkit-linear-gradient(-70deg, rgba(116, 84, 137, 1) 26%, rgba(46, 157, 176, 1) 78%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    #menu, #close
    {
        display: block;
        z-index: 1;
    }

    #close
    {
        opacity: 0;
    }

    .shopping {
        right: 25px;
    }

    .cart {
        margin-right: 20px;
    }
}

@font-face {
    font-family: Nunito;
    src: url(../Nunito-Regular.ttf);
    font-display: swap;
}

@font-face {
    font-family: Nunito;
    src: url(../Nunito-Light.ttf);
    font-weight: lighter;
    font-display: swap;
}

@font-face {
    font-family: Nunito;
    src: url(../Nunito-Bold.ttf);
    font-weight: bold;
    font-display: swap;
}