/* * VivaWeb — E-commerce : page panier. * * Chargée sur la seule page panier, après la feuille WooCommerce du thème. * Chaque bloc dépend d'une classe posée sur le par le module PHP. * * Trois régimes de largeur, ceux de Kadence — s'en écarter laisserait des * plages habillées pour une disposition qu'elles n'ont pas : * * ≥ 1025 px tableau à gauche (70 %), totaux à droite (30 %) ; * 720–1024 une seule colonne, le tableau reste un tableau ; * ≤ 719 px le thème passe le tableau en blocs et préfixe chaque cellule de * son `data-title` (« Produit : », « Prix : »…). C'est cette * disposition-là que le module remplace par une vraie fiche. */ body.vw-cart { --vw-co-navy: #0b2340; --vw-co-navy-hover: #123057; --vw-co-ink: #17233a; --vw-co-muted: #55617a; --vw-co-soft: #7c8698; --vw-co-line: #e2e5ea; --vw-co-line-soft: #f1f2f4; --vw-co-field: #d4d9e1; --vw-co-bg: #f8fafc; --vw-co-green: #14a44d; --vw-co-radius: 16px; --vw-co-radius-sm: 10px; --vw-co-thumb: 72px; } /* ------------------------------------------------------------------------- * 1. Les deux cartes * ---------------------------------------------------------------------- */ body.vw-cart--style .woocommerce form.woocommerce-cart-form { background: #fff; border: 1px solid var(--vw-co-line); border-radius: var(--vw-co-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12); padding: 8px 24px 24px; box-sizing: border-box; margin-bottom: 28px; } body.vw-cart--totals .woocommerce .cart-collaterals .cart_totals { background: #fff; border: 1px solid var(--vw-co-line); border-radius: var(--vw-co-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12); padding: 4px 20px 20px; box-sizing: border-box; } body.vw-cart--totals .woocommerce .cart-collaterals .cart_totals h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--vw-co-navy); margin: 16px 0 4px; } /* ------------------------------------------------------------------------- * 2. Tableau des articles * ---------------------------------------------------------------------- */ body.vw-cart--style .woocommerce table.shop_table.cart { background: none; border: 0; border-collapse: collapse; border-radius: 0; margin: 0; font-size: 100%; width: 100%; } body.vw-cart--style .woocommerce table.shop_table.cart thead th { border: 0; border-bottom: 1px solid var(--vw-co-line); padding: 16px 12px 12px 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vw-co-soft); } body.vw-cart--style .woocommerce table.shop_table.cart td { border: 0; border-bottom: 1px solid var(--vw-co-line-soft); padding: 18px 12px 18px 0; vertical-align: middle; line-height: 1.45; background: none; } body.vw-cart--style .woocommerce table.shop_table.cart td.product-name { font-weight: 600; color: var(--vw-co-ink); } body.vw-cart--style .woocommerce table.shop_table.cart td.product-name a { color: var(--vw-co-ink); text-decoration: none; } body.vw-cart--style .woocommerce table.shop_table.cart td.product-name a:hover { color: var(--vw-co-navy); text-decoration: underline; } body.vw-cart--style .woocommerce table.shop_table.cart td.product-price, body.vw-cart--style .woocommerce table.shop_table.cart td.product-subtotal { white-space: nowrap; font-variant-numeric: tabular-nums; } body.vw-cart--style .woocommerce table.shop_table.cart td.product-price { color: var(--vw-co-muted); } body.vw-cart--style .woocommerce table.shop_table.cart td.product-subtotal { font-weight: 700; color: var(--vw-co-ink); } body.vw-cart--style .woocommerce table.shop_table.cart td.actions { border-bottom: 0; padding-top: 20px; } /* Vignette */ body.vw-cart--thumbs .woocommerce table.shop_table.cart td.product-thumbnail { width: calc( var(--vw-co-thumb) + 12px ); padding-right: 0; } body.vw-cart--thumbs .woocommerce table.shop_table.cart td.product-thumbnail img { width: var(--vw-co-thumb); height: var(--vw-co-thumb); max-width: none; object-fit: cover; display: block; border: 1px solid var(--vw-co-line); border-radius: 10px; background: var(--vw-co-bg); box-shadow: none; margin: 0; } /* Suppression : discrète, pas un gros × rouge */ body.vw-cart--remove .woocommerce table.shop_table.cart td.product-remove { width: 28px; padding-right: 0; } body.vw-cart--remove .woocommerce table.shop_table.cart a.remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: none; color: var(--vw-co-soft); font-size: 20px; line-height: 1; text-decoration: none; transition: background-color .12s ease, color .12s ease; } body.vw-cart--remove .woocommerce table.shop_table.cart a.remove:hover { background: #fdecea; color: #b42318; } /* Variations : une ligne grise, points médians en séparateur */ body.vw-cart--variations .woocommerce table.shop_table.cart dl.variation { display: block; margin: 4px 0 0; padding: 0; font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--vw-co-soft); } body.vw-cart--variations .woocommerce table.shop_table.cart dl.variation dt, body.vw-cart--variations .woocommerce table.shop_table.cart dl.variation dd { display: inline; margin: 0; padding: 0; font-weight: 400; float: none; clear: none; } body.vw-cart--variations .woocommerce table.shop_table.cart dl.variation dt { display: none; } body.vw-cart--variations .woocommerce table.shop_table.cart dl.variation dd + dd::before, body.vw-cart--variations .woocommerce table.shop_table.cart dl.variation dd + dt + dd::before { content: " · "; } body.vw-cart--variations .woocommerce table.shop_table.cart dl.variation p { display: inline; margin: 0; } /* ------------------------------------------------------------------------- * 3. Quantité : pas à pas * ---------------------------------------------------------------------- */ body.vw-cart--stepper .woocommerce table.shop_table.cart div.quantity.vw-cart__qty { display: inline-flex; align-items: center; width: auto; border: 1px solid var(--vw-co-field); border-radius: var(--vw-co-radius-sm); overflow: hidden; background: #fff; } body.vw-cart--stepper .woocommerce table.shop_table.cart div.quantity.vw-cart__qty .qty { width: 44px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--vw-co-ink); background: none; -moz-appearance: textfield; } body.vw-cart--stepper .woocommerce table.shop_table.cart div.quantity.vw-cart__qty .qty::-webkit-outer-spin-button, body.vw-cart--stepper .woocommerce table.shop_table.cart div.quantity.vw-cart__qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.vw-cart--stepper .vw-cart__step { width: 36px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 0; color: var(--vw-co-muted); font-size: 17px; line-height: 1; cursor: pointer; } body.vw-cart--stepper .vw-cart__step:hover:not( [disabled] ) { background: var(--vw-co-bg); color: var(--vw-co-navy); } body.vw-cart--stepper .vw-cart__step[disabled] { opacity: .35; cursor: default; } /* Mise à jour automatique : le bouton devient inutile. */ body.vw-cart--auto.vw-cart--js .woocommerce table.shop_table.cart td.actions button[name="update_cart"] { display: none; } body.vw-cart .vw-cart__busy { opacity: .55; pointer-events: none; transition: opacity .12s ease; } /* ------------------------------------------------------------------------- * 4. Code promo * ---------------------------------------------------------------------- */ body.vw-cart--coupon .woocommerce table.shop_table.cart td.actions .coupon { float: none; width: 100%; margin: 0 0 12px; } body.vw-cart--coupon .vw-cart__coupon-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 10px; min-height: 0; color: var(--vw-co-muted); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } body.vw-cart--coupon .vw-cart__coupon-toggle:hover { background: none; color: var(--vw-co-navy); } body.vw-cart--coupon .vw-cart__coupon-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; } body.vw-cart--coupon .vw-cart__coupon-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); } body.vw-cart--coupon .woocommerce table.shop_table.cart td.actions .coupon .input-text { height: 44px; border: 1px solid var(--vw-co-field); border-radius: var(--vw-co-radius-sm); box-shadow: none; font-size: 15px; } /* ------------------------------------------------------------------------- * 5. Livraison offerte * ---------------------------------------------------------------------- */ body.vw-cart .vw-cart-free { margin: 16px 0 20px; padding: 14px 16px; border: 1px solid #e6ede8; border-radius: 12px; background: #f7f9f8; } body.vw-cart .vw-cart-free__text { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: #3b4658; } body.vw-cart .vw-cart-free__track { height: 6px; border-radius: 999px; background: #e3eae5; overflow: hidden; } body.vw-cart .vw-cart-free__bar { display: block; height: 100%; border-radius: 999px; background: var(--vw-co-green); transition: width .3s ease; } body.vw-cart .vw-cart-free--done .vw-cart-free__text { color: var(--vw-co-green); } /* ------------------------------------------------------------------------- * 6. Totaux et appel à l'action * ---------------------------------------------------------------------- */ body.vw-cart--totals .woocommerce .cart_totals table.shop_table { border: 0; border-collapse: collapse; margin: 0; font-size: 100%; } body.vw-cart--totals .woocommerce .cart_totals table.shop_table th, body.vw-cart--totals .woocommerce .cart_totals table.shop_table td { border: 0; border-bottom: 1px solid var(--vw-co-line-soft); border-top: 0; padding: 14px 0; vertical-align: top; line-height: 1.45; background: none; width: auto; } body.vw-cart--totals .woocommerce .cart_totals table.shop_table th { font-size: 15px; font-weight: 600; color: var(--vw-co-muted); } body.vw-cart--totals .woocommerce .cart_totals table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; } body.vw-cart--totals .woocommerce .cart_totals table.shop_table tr.order-total th, body.vw-cart--totals .woocommerce .cart_totals table.shop_table tr.order-total td { border-bottom: 0; padding-top: 18px; vertical-align: middle; } body.vw-cart--totals .woocommerce .cart_totals table.shop_table tr.order-total th { font-size: 17px; font-weight: 700; color: var(--vw-co-ink); } body.vw-cart--totals .woocommerce .cart_totals tr.order-total .woocommerce-Price-amount { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--vw-co-navy); } body.vw-cart--totals .woocommerce .cart_totals tr.order-total small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--vw-co-soft); } body.vw-cart--totals .woocommerce .cart_totals tr.order-total small .woocommerce-Price-amount { display: inline; font-size: inherit; font-weight: inherit; letter-spacing: normal; color: inherit; } body.vw-cart--totals .woocommerce .cart_totals ul#shipping_method { margin: 0; padding: 0; list-style: none; } body.vw-cart--totals .woocommerce .cart_totals ul#shipping_method li { margin: 0 0 4px; padding: 0; list-style: none; } body.vw-cart--totals .woocommerce .cart_totals .woocommerce-shipping-destination { font-size: 13px; color: var(--vw-co-soft); } body.vw-cart--totals .woocommerce .cart_totals .shipping-calculator-button { font-size: 13px; color: var(--vw-co-muted); text-decoration: underline; text-underline-offset: 3px; } body.vw-cart--style .woocommerce .wc-proceed-to-checkout { padding: 18px 0 0; } body.vw-cart--style .woocommerce .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; box-sizing: border-box; height: auto; min-height: 56px; margin: 0; padding: 15px 18px; border-radius: var(--vw-co-radius-sm); background: var(--vw-co-navy); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-align: center; box-shadow: none; } body.vw-cart--style .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--vw-co-navy-hover); color: #fff; } body.vw-cart .vw-cart__continue { display: block; margin: 12px 0 0; font-size: 14px; font-weight: 500; color: var(--vw-co-muted); text-align: center; text-decoration: underline; text-underline-offset: 3px; } body.vw-cart .vw-cart__continue:hover { color: var(--vw-co-navy); } body.vw-cart .vw-cart__trust { list-style: none; margin: 16px 0 0; padding: 14px 16px; border: 1px solid #e6ede8; border-radius: 12px; background: #f7f9f8; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; line-height: 1.45; color: #3b4658; } body.vw-cart .vw-cart__trust li { list-style: none; position: relative; margin: 0; padding-left: 24px; } body.vw-cart .vw-cart__trust li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 999px; background: var(--vw-co-green); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; } /* ------------------------------------------------------------------------- * 7. Grand écran : totaux collants * ---------------------------------------------------------------------- */ @media screen and (min-width: 1025px) { body.vw-cart--sticky .woocommerce .kadence-woo-cart-form-wrap .cart-collaterals { position: sticky; top: 24px; } } /* ------------------------------------------------------------------------- * 8. Téléphone : une fiche par article * ---------------------------------------------------------------------- */ @media screen and (max-width: 719px) { /* * Le thème empile les cellules et préfixe chacune de son `data-title`, avec * un `text-align: right !important` qu'il faut bien contrer par un * `!important` — c'est le seul de cette feuille. */ body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart tr.cart_item { display: grid; grid-template-columns: var(--vw-co-thumb) 1fr auto; grid-template-areas: "thumb name remove" "thumb price price" "thumb qty subtotal"; column-gap: 14px; row-gap: 6px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--vw-co-line-soft); background: none !important; } body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart tr.cart_item td { display: block; border: 0; padding: 0; text-align: left !important; background: none; } body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart tr.cart_item td::before { display: none; } body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart td.product-thumbnail { grid-area: thumb; align-self: start; width: var(--vw-co-thumb); } body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart td.product-thumbnail img { margin: 0; width: var(--vw-co-thumb); height: var(--vw-co-thumb); } body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart td.product-name { grid-area: name; align-self: start; font-weight: 600; line-height: 1.35; } body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart td.product-price { grid-area: price; font-size: 13px; color: var(--vw-co-soft); } body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart td.product-quantity { grid-area: qty; } body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart td.product-subtotal { grid-area: subtotal; text-align: right !important; font-weight: 700; white-space: nowrap; } body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart td.product-remove { grid-area: remove; align-self: start; text-align: right !important; padding: 0; } body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart td.product-remove .remove { transform: none; } /* La ligne d'actions n'est pas un article : elle reprend le flux normal. */ body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart td.actions { display: block; text-align: left !important; padding: 20px 0 0; } body.vw-cart--style .woocommerce form.woocommerce-cart-form { padding: 8px 18px 18px; } body.vw-cart--totals .woocommerce .cart-collaterals .cart_totals { padding: 4px 18px 18px; } body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart tbody tr:nth-child(2n) td { background: none; } } /* ------------------------------------------------------------------------- * 9. Retouches de recette * ---------------------------------------------------------------------- */ /* * WooCommerce impose `color: red !important` sur `a.remove`. Lui rendre un ton * discret demande donc un `!important` en face — c'est le seul de cette * feuille avec celui du tableau éclaté. */ body.vw-cart--remove .woocommerce table.shop_table.cart a.remove { color: var(--vw-co-soft) !important; } body.vw-cart--remove .woocommerce table.shop_table.cart a.remove:hover { color: #b42318 !important; } /* Un en-tête de colonne ne se coupe pas en deux. */ body.vw-cart--style .woocommerce table.shop_table.cart thead th { white-space: nowrap; } /* * « Vider le panier » supprime tout : cette action n'a pas à porter le même * poids visuel que « Commander ». Bouton de contour, et rouge au survol * seulement. */ body.vw-cart--style .woocommerce table.shop_table.cart td.actions a.button { background: #fff; border: 1px solid var(--vw-co-field); color: var(--vw-co-muted); box-shadow: none; font-weight: 500; } body.vw-cart--style .woocommerce table.shop_table.cart td.actions a.button:hover { border-color: #e4b4ae; background: #fdecea; color: #b42318; } /* Choix de livraison : de l'air entre le bouton radio et son libellé. */ body.vw-cart--totals .woocommerce .cart_totals ul#shipping_method li { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; } body.vw-cart--totals .woocommerce .cart_totals ul#shipping_method li input { flex: 0 0 auto; margin: 0; } /* Les intitulés des totaux tiennent sur une ligne, la colonne est étroite. */ body.vw-cart--totals .woocommerce .cart_totals table.shop_table th { white-space: nowrap; padding-right: 12px; } @media screen and (max-width: 719px) { /* 17 px sur une colonne de 200 px découpait les noms en quatre lignes. */ body.vw-cart--mobile .woocommerce table.shop_table_responsive.cart td.product-name { font-size: 15px; } } @media screen and (min-width: 1025px) { /* * Écart entre les deux colonnes. * * Kadence le réservait par un `padding-right` sur le formulaire. Ce * formulaire étant devenu une carte, ce padding est passé à l'intérieur du * cadre : les deux cartes se touchaient, bord à bord. L'écart est donc * repris en marge, et la largeur réduite d'autant pour que la colonne des * totaux reste exactement à 30 %. */ body.vw-cart--style .woocommerce .kadence-woo-cart-form-wrap > form.woocommerce-cart-form { width: calc( 70% - 28px ); margin-right: 28px; } }