body {
    scrollbar-color: var(--MAIN-COLOR-LIGHT) white;
    scrollbar-width: thin;
}


#timer {
    color: var(--MAIN-COLOR);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
#timer-circle {
    width: 25px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--MAIN-COLOR) 0%, #fff 0);
    border: 2px solid var(--MAIN-COLOR);
    display: none;
}
.cart-counter-wrapper{
    display:flex;
    gap:10px;
    align-items:center;
}

.cartTimer-warning {
    color: var(--MAIN-COLOR);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.sidenav {
    width: 700px;
    position: fixed;
    z-index: 200;
    top: 57px;
    right: -3000px;
    background-color: var(--color-white);
    padding: 20px;
    transition: right 0.5s ease;
    border-radius: 20px 0px 0px 20px;
    background: var(--color-white);
}

.wrap-SideModal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
    height: calc(100vh - 150px);
    position: relative;
}

.sidenav.active {
    right: 0;
}

.sidenav .close {
    font-size: 36px;
}

.sidenav .entete-panier {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;
}

.bloc-top-cart-slide {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.sidenav .entete-panier span.my-cart {
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.sidenav .wrap-bloc-rate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
    position: relative;
    overflow-y: auto;
    padding-bottom: 20px;
    height: calc(100vh - 171px);
    justify-content: space-between;
}

.sidenav .bloc-rate-cart {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
}

.bloc-rate-cart.GiftCard, .bloc-rate-cart.GiftVoucher {
    height: 100px;
}

.bloc-rate-cart.GiftCard .wrap-cart-rate-title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
}

.GiftCard .cart-line-title span {
    font-size: 18px;
}

.wrap-cart-infos-option {
    display: flex;
    align-self: stretch;
}

.date-offer-cart .daysSelected {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wrap-cart-rate-title span.type-gift {
    font-size: 18px;
    font-weight: 600;
}

.wrap-cart-rate-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    align-items: center;
    gap: 10px;
}

.wrap-cart-rate-title h3, .wrap-cart-rate-title h3 span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* Limite à 1 ligne */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black);
}

.wrap-cart-rate-title .price {
    color: var(--MAIN-COLOR);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* Titre promo ou OS */
.bloc-title-Promo-OS {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bloc-title-Promo-OS .div-promo-title span {
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.bloc-title-Promo-OS .div-special-offer-title span, .bloc-title-Promo-OS .div-private-sale-title span {
    color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.paiement-conditions, .cancel-conditions {
    display: flex;
    gap: 6px;
    align-items: center;
    row-gap: normal;
}

.paiement-conditions i, .cancel-conditions i {
    display: flex;
}

.bloc-infos-item-cart-slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
}

.img-item-cart {
    width: 154px;
    align-self: stretch;
    object-fit: cover;
    border-radius: 10px 0px 0px 10px;
}

.cadeau .img-item-cart {
    height: 80px;
}

#insurance-block, #coupon-block {
    padding: 10px;
    align-self: stretch;
    border-radius: 10px;
    border: 1px solid var(--HEB-LIGHT, #E1EAF8);
}

.item-cart-slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    padding: 16px;
}

.item-cart-slide strong {
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.item-cart-slide span {
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.item-cart-slide .cartouche-promo span {
    color: var(--color-white);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

.item-cart-slide span i, .item-rate-infos span:first-child i {
    font-size: 14px;
}

.item-cart-bottom {
    display: flex;
    /*justify-content: flex-end;*/
    align-items: flex-end;
    align-self: stretch;
}

.div-cgu {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.div-cgu a {
    color: var(--MAIN-COLOR);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

.item-cart-bottom .price {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 32px;
}

.item-cart-bottom .prices-promo {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
}

.cart-rate-item-price {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cart-rate-item-price .base-price {
    color: var(--MAIN-COLOR);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
}

.cart-rate-item-price .price-before-promo {
    color: var(--Colors-BE-PROMOTION, #CC1541);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    white-space: nowrap;
}

.cart-rate-item-price .price-before-promo span.strocked-price {
    text-decoration: line-through;
    color: var(--Colors-BE-PROMOTION, #CC1541);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
}

.cart-rate-item-price .price-with-promo {
    color: var(--MAIN-COLOR);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.item-cart-bottom .prices-promo .price-strocked {
    color: var(--BASIC-GRIS-2, #A8A8A8);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    text-decoration-line: line-through;
}

.item-cart-bottom .price-offer-cart {
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.div-promo span, .div-special-offer span {
    font-size: 12px;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.date-offer-cart, .cart-number-night, .number-travellers {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wrap-bloc-title-rate-cart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    align-self: stretch;
}

.bloc-title-rate-cart {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: flex-start;
    width: 100%;
}

.wrap-bloc-title-rate-cart .div-promo {
    display: flex;
    padding: 2px 5px;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: #CC1541;
}

.wrap-bloc-title-rate-cart .div-special-offer {
    display: flex;
    padding: 2px 5px;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: #0E9F9F;
}

.wrap-bloc-title-rate-cart .div-promo span, .wrap-bloc-title-rate-cart .div-special-offer span {
    color: #FFF;
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.wrap-rate-supp-cart {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
}

.add-offer-cart {
    display: flex;
    padding: 5px 10px;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border-width: 0.25px;
    border-style: solid;
    border-color: var(--MAIN-COLOR);
    background: var(--color-white);
    text-decoration: none;
}

.add-offer-cart:hover {
    border-color: var(--color-white);
    background: var(--MAIN-COLOR);
}

.add-offer-cart:hover span, .add-offer-cart:hover i {
    color: var(--color-white);
}

.add-offer-cart span {
    color: var(--MAIN-COLOR);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
}

.bloc-end-cart-slide {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
    width: 100%;
    background: #fff;
}

.bloc-end-cart-slide div {
    display: flex;
    align-items: center;
    gap: 20px;
}

.bloc-end-cart-slide .btn-cart-finish {
    display: flex;
    padding: 10px 15px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: var(--MAIN-COLOR);
}

.bloc-end-cart-slide .btn-cart-finish a {
    color: var(--color-white);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
}

.total-price-cart {
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.total-price-cart-number {
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.cart-infos-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

.warning-10mn-left {
    color: var(--MAIN-COLOR-LIGHT-2, #E68AA0);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.warning-delete-cart span {
    color: var(--MAIN-COLOR-LIGHT-2, #E68AA0);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.bloc-add-more-cart {
    display: flex;
    align-items: center;
    gap: 20px;
}

#closeCart i {
    font-size: 25px;
    font-weight: 200;
    text-decoration: none;
   color: var(--Colors-BE-NOIR, #000);
}

a#closeCart {
    text-decoration: none;
}

/* MEDIA QUERIES */
@media (max-width: 768px) {

    body {
        scrollbar-color: #CFECEC white;
        scrollbar-size: auto;
    }

    .cartTimer-warning {
        text-align: left;
    }

    #closeCart i {
        font-size: 20px;
    }

    .bloc-infos-item-cart-slide .item-cart-slide span {
        font-size: 14px;
    }

    .item-cart-slide span i, .item-rate-infos span:first-child i {
        font-size: 14px;
    }

    .sidenav {
        padding: 10px;
    }

    .wrap-SideModal {
        gap: 10px;
        width: 100%;
        height: calc(100vh - 160px);
        position: relative;
    }

    .bloc-title-rate-cart {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
        width: auto;
    }

    .wrap-rate-supp-cart {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
    }

    .wrap-rate-supp-cart span.base-price {
        color: var(--MAIN-COLOR);
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .sidenav {
        width: 100%;
        border-radius: 20px 20px 0 0;
        gap: 20px;
        right: 0;
        top: -100%;
    }

    .sidenav.active {
        top: 90px;
    }

    .sidenav .entete-panier {
        width: 100%;
    }

    .bloc-title-rate-cart h3 {
       color: var(--Colors-BE-NOIR, #000);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .bloc-title-rate-cart img {
        width: 15px;
        height: 15px;
        object-fit: cover;
    }

    .date-offer-cart {
        align-items: center;
        text-transform: lowercase;
        font-size: 14px;
        gap: 10px;
    }

    a#closeBtn {
        display: flex;
    }

    a#closeBtn img {
        object-fit: cover;
        width: 20px;
    }

    .sidenav .entete-panier span {
       color: var(--Colors-BE-NOIR, #000);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .wrap-cart-rate-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .wrap-cart-rate-title h3 {
       color: var(--Colors-BE-NOIR, #000);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .wrap-cart-rate-title .price {
        color: var(--MAIN-COLOR);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .item-cart-slide span {
       color: var(--Colors-BE-NOIR, #000);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
    }

    .div-cgu a {
        font-size: 12px;
    }

    .item-cart-slide strong {
       color: var(--Colors-BE-NOIR, #000);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .cart-rate-item-price .price-before-promo {
        color: var(--BASIC-GRIS-2, #A8A8A8);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
    }

    .cart-rate-item-price .price-before-promo span.strocked-price {
        text-decoration: line-through;
    }

    .cart-rate-item-price .price-with-promo {
        color: var(--MAIN-COLOR);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .item-cart-slide {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
        padding: 12px;
    }

    /*.bloc-title-Promo-OS {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }*/

    .bloc-title-Promo-OS .div-special-offer-title span {
       color: var(--Colors-BE-NOIR, #000);
        font-family: Inter;
        font-size: 12px !important;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-cart-bottom .prices-promo .price-strocked, .item-cart-bottom .price-offer-cart {
        font-size: 14px;
    }

    .total-price-cart {
        font-size: 14px;
        font-weight: 200;
    }

    .total-price-cart-number {
        margin-left: 10px;
       color: var(--Colors-BE-NOIR, #000);
        font-family: Inter;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .bloc-end-cart-slide .btn-cart-finish a {
        font-size: 14px;
    }

    .add-offer-cart span, .bloc-title-Promo-OS .div-promo-title span {
        font-size: 14px;
    }

    .div-cgu {
        gap: 10px;
    }

    .sidenav .bloc-rate-cart {
        max-width: 100%;
    }

    .bloc-end-cart-slide {
        width: 100%;
    }

    .sidenav .entete-panier span.my-cart {
        font-size: 18px;
    }

    #timer {
        font-size: 18px;
    }

    #timer-circle {
        width: 20px;
    }

    .bloc-end-cart-slide div {
        gap: 0;
    }

}