/* ################## */
/* ##              ## */
/* ###   Panier   ### */
/* ##              ## */
/* ################## */

.cart-section {
    max-width: 100%;
    background: #fff;
    border-radius: 1.2vi;
    padding: 2.5vi 2vi 2vi 2vi;
    font-family: 'Poppins', Arial, sans-serif;
}

.cart-section h1 {
    text-align: center;
    font-size: 2vi;
    font-weight: 700;
    color: #455B94;
    margin-bottom: 4vi;
    letter-spacing: 0.05vi;
    text-transform: uppercase;
    text-shadow: 0 1px 6px #0001;
}

.cart-container {
    display: flex;
    flex-direction: row;
    gap: 2vi;
    align-items: flex-start;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 1.5vi;
    max-height: 38vi;
    overflow-y: auto;
    margin-bottom: 1vi;
    flex: 2 1 0;
    min-width: 0;
}

.cart-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2vi;
    border-bottom: 1px solid #ececec;
    padding-bottom: 1vi;
    position: relative;
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item img {
    width: 5vi;
    height: 5vi;
    object-fit: contain;
    border-radius: 0.5vi;
    background: #f8f8f8;
    box-shadow: 0 1px 6px #0001;
}

.cart-item-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5vi;
}

.cart-item-title {
    font-size: 1.1vi;
    font-weight: 600;
    color: #222;
    margin-bottom: 0.2vi;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0.7vi;
    font-size: 1vi;
    color: #455B94;
}

.cart-item-qty input[type="number"] {
    width: 6.5vi;
    height: 2vi;
    padding: 0.2vi 0.4vi;
    border: 1px solid #ccc;
    border-radius: 0.3vi;
    font-size: 1vi;
    text-align: center;
}

.cart-item-remove {
    background: none;
    border: none;
    color: #e53935;
    font-size: 1.3vi;
    cursor: pointer;
    margin-left: 0.5vi;
    margin-top: 0.2vi;
    transition: color 0.2s;
}

.cart-item-remove:hover {
    color: #b71c1c;
}

.cart-summary {
    flex: 1 1 320px;
    min-width: 320px;
    max-width: 400px;
    margin-left: 2vi;
    border-radius: 1vi;
    box-shadow: 0 2px 16px #0001;
    border: 1px solid #f0f0f0;
    padding: 2vi 2vi 2vi 2vi;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.7vi;
    position: sticky;
    top: 3vi;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1vi;
    color: #222;
    margin-bottom: 0.2vi;
}

.cart-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.3vi;
    font-weight: 700;
    margin: 1vi 0 1vi 0;
    color: #222;
}

.cart-btn-cart {
    width: 100%;
    padding: 0.9vi 0;
    margin-bottom: 3vi;
    border: none;
    border-radius: 0.4vi;
    background: #455B94;
    color: #fff;
    font-size: 1.1vi;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.04vi;
    text-align: center;
    display: block;
    text-decoration: none;
}

.cart-btn-cart:hover {
    background: #394b79;
    color: #fff;
}

.cart-btn-primary-cart {
    background: #394b79;
    color: #fff;
}

.cart-btn-primary-cart:hover {
    background: #f8f8ff;
    color: #455B94;
    border: 1px solid #b7c3e0;
}
.cart-section span{ 
    font-size: 1.2vi;
}

.refresh{
    background:none;
    border:none;
    color:#455B94;
    font-size:1.5vi;
}
.refresh:hover {
    background-color: #bababa4a;
    border-radius: 20%;
}

/* ####################### */
/* ##                   ## */
/* ###   Panier Vide   ### */
/* ##                   ## */
/* ####################### */

.cart-empty {
    max-width: 700px;
    margin: 3vi auto;
    background: #fff;
    border-radius: 1.2vi;
    box-shadow: 0 2px 24px #0001;
    padding: 2.5vi 2vi 2vi 2vi;
    text-align: center;
}

.cart-empty h1 {
    font-size: 1.7vi;
    color: #455B94;
    margin-bottom: 1vi;
}

.cart-empty p {
    font-size: 1.1vi;
    color: #555;
    margin-bottom: 1.5vi;
}

.cart-empty .btn {
    background: #f8f8ff;
    color: #455B94;
    border: 1px solid #b7c3e0;
    border-radius: 0.4vi;
    padding: 0.8vi 2.2vi;
    font-size: 1vi;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-align: center;
    text-decoration: none;
}

.cart-empty .btn:hover {
    background: #455B94;
    color: #fff;
    border-color: #455B94;
}

/* Responsive */

@media (max-width: 800px) {
    .cart-section h1 {
        font-size: 3vi;
    }
    .cart-empty p {
        font-size: 2.1vi;
        margin-bottom: 4vi;
    }
    .cart-empty .btn {
        padding: 1.2vi 3.2vi;
        font-size: 2.5vi;
    }
    .cart-summary {
        flex: 1 1 20px;
        min-width: 20px;
    }
    .cart-summary-total {
        font-size: 2vi;
    }
    .cart-item-title {
        font-size: 3vi;
    }
    .cart-item img {
        width: 10vi;
        height: 10vi;
    }
    .cart-item-remove {
        font-size: 4vi;
    }
    .cart-section span{ 
        font-size: 2.5vi;
    }
    .cart-item-qty input[type="number"] {
        width: 6vi;
        padding: 1.5vi 0vi;
        font-size: 2.2vi;
    }
    .flash-message {
        font-size: 2vi;
        padding: 1.2vi 1.5vi;
    }
    .refresh{
        font-size:4vi;
    }
    .cart-btn-cart {
        padding: 1.2vi 0;
        font-size: 2.5vi;
    }

}

.flash-container {
    margin: 1vi auto;
    max-width: 80vi;
    padding: 0 1vi;
}

.flash-message {
    background-color: #fffbcc;
    border-left: 5px solid #ffc107;
    padding: 0.75vi 1vi;
    margin-bottom: 0.5vi;
    font-weight: bold;
    color: #5c4600;
    border-radius: 4px;
}