/** * TPT Boutique — panier & tunnel de commande. * Tokens repris du design system The Post Trace v1.0. * * Tout est préfixé par .tpt-shop (classe ajoutée sur uniquement sur * le panier et le checkout) : aucune autre page du site n'est affectée. */ .tpt-shop { --tpt-dark: #1e1b27; --tpt-bg: #f0ede8; --tpt-bg-warm: #e8e4df; --tpt-card: #ffffff; --tpt-green: #768471; --tpt-green-700: #4e6a52; --tpt-green-200: #c4d0c0; --tpt-green-100: #dfe7dc; --tpt-green-50: #eef2ec; --tpt-text: #1e1b27; --tpt-sub: #6b6560; --tpt-muted: #9990a5; --tpt-hint: #b5b0a8; --tpt-border: #e0dbd4; --tpt-serif: 'Playfair Display', Georgia, serif; --tpt-sans: 'DM Sans', Arial, sans-serif; --tpt-radius: 14px; --tpt-radius-lg: 16px; --tpt-shadow: 0 2px 20px rgba(42, 37, 32, 0.07); } /* ------------------------------------------------------------------ * Base * --------------------------------------------------------------- */ /* Ne cibler que la zone de contenu : Astra utilise aussi .ast-container * À L'INTÉRIEUR de l'en-tête, et le peindre en beige créait la boîte * claire derrière le menu (« menu cassé ») sur le panier et le checkout. */ .tpt-shop .site-content { background: var(--tpt-bg); } /* Astra pose overflow-x:hidden sur . Or dès qu'un seul axe n'est pas * « visible », l'autre passe à « auto » : le body devient une zone de * défilement, et TOUT position:sticky à l'intérieur cesse de fonctionner * (c'est ce qui rendait la colonne de droite non collante malgré son CSS). * « clip » coupe le débordement horizontal exactement pareil, mais sans * créer de zone de défilement : le collant refonctionne. Limité aux pages * panier et commande, le reste du site garde le réglage d'Astra. */ body.tpt-shop { overflow-x: clip; } .tpt-shop .woocommerce, .tpt-shop .woocommerce-cart-form, .tpt-shop form.checkout { font-family: var(--tpt-sans); color: var(--tpt-text); } .tpt-shop .entry-title, .tpt-shop .woocommerce h1, .tpt-shop .woocommerce h2, .tpt-shop .woocommerce h3 { font-family: var(--tpt-serif); font-weight: 700; letter-spacing: -0.01em; color: var(--tpt-text); } .tpt-shop .woocommerce h3#order_review_heading, .tpt-shop .woocommerce-billing-fields > h3, .tpt-shop .woocommerce-shipping-fields > h3, .tpt-shop .woocommerce-additional-fields > h3 { font-size: 19px; margin-bottom: 14px; } .tpt-eyebrow { display: block; background: none !important; border: none !important; padding: 0 !important; margin-left: 0; width: auto; border-radius: 0 !important; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--tpt-muted); margin-bottom: 8px; } /* ------------------------------------------------------------------ * Fil d'étapes * --------------------------------------------------------------- */ .tpt-steps { display: flex; align-items: center; justify-content: center; gap: 14px; list-style: none; margin: 0 0 26px; padding: 0; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; } .tpt-steps__item { display: flex; align-items: center; gap: 8px; color: var(--tpt-hint); margin: 0; } .tpt-steps__item + .tpt-steps__item::before { content: ''; width: 40px; height: 1px; background: #c8c2b8; margin-right: 14px; } .tpt-steps__dot { width: 20px; height: 20px; border-radius: 100px; border: 1px solid #c8c2b8; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; } .tpt-steps__item.is-current { color: var(--tpt-text); } .tpt-steps__item.is-current .tpt-steps__dot { background: var(--tpt-green); border-color: var(--tpt-green); color: #fff; } .tpt-steps__item.is-done { color: var(--tpt-green); } .tpt-steps__item.is-done .tpt-steps__dot { background: var(--tpt-green-100); border-color: var(--tpt-green-100); color: var(--tpt-green-700); } /* ------------------------------------------------------------------ * Jauge livraison offerte * --------------------------------------------------------------- */ .tpt-freeship { background: var(--tpt-card); border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); padding: 16px 20px; margin-bottom: 18px; display: flex; align-items: center; gap: 20px; } .tpt-freeship__main { flex: 1 1 auto; min-width: 0; } .tpt-shop .tpt-freeship__cta { flex: 0 0 auto; border: 1px solid var(--tpt-green-200); background: var(--tpt-card); color: var(--tpt-green); border-radius: 100px; padding: 11px 18px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; } .tpt-shop .tpt-freeship__cta:hover { background: var(--tpt-green); border-color: var(--tpt-green); color: #fff; } @media (max-width: 600px) { .tpt-freeship { flex-direction: column; align-items: stretch; gap: 12px; } .tpt-shop .tpt-freeship__cta { justify-content: center; } } .tpt-freeship__text { margin: 0 0 10px; font-size: 13px; color: var(--tpt-text); } .tpt-freeship__text strong { font-weight: 600; } .tpt-freeship__track { display: block; height: 5px; border-radius: 100px; background: var(--tpt-bg-warm); overflow: hidden; } .tpt-freeship__fill { display: block; height: 5px; border-radius: 100px; background: var(--tpt-green); transition: width 0.3s ease; } /* ------------------------------------------------------------------ * Tableau du panier * --------------------------------------------------------------- */ .tpt-shop .shop_table.cart { border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); border-collapse: separate; border-spacing: 0; background: var(--tpt-card); overflow: hidden; } .tpt-shop .shop_table.cart thead th { background: transparent; border-bottom: 1px solid var(--tpt-border); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--tpt-muted); padding: 16px 18px; } .tpt-shop .shop_table.cart td { padding: 20px 18px; border-top: 1px solid var(--tpt-border); vertical-align: top; } .tpt-shop .cart_item .product-thumbnail img { width: 96px; height: auto; border-radius: 8px; border: 1px solid var(--tpt-border); } .tpt-shop .cart_item .product-name > a { font-family: var(--tpt-serif); font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--tpt-text); text-decoration: none; } .tpt-shop .cart_item .product-name > a:hover { color: var(--tpt-green-700); } /* Options du configurateur (WAPF) : une ligne par option, libellé à gauche, * valeur en pastille à droite. Les !important écrasent les règles d'Astra * sur les

/: du panier. */ .tpt-shop .cart_item .variation, .tpt-shop .woocommerce-checkout-review-order-table .variation { display: grid !important; /* La cellule « produit » du tableau ne fait qu'environ 290 px : sans * plafond, les longs libellés WAPF mangent toute la place et les * pastilles se replient sur trois lignes. */ grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 6px 12px; align-items: baseline; margin: 10px 0 0 !important; padding: 0; float: none !important; } .tpt-shop .cart_item .variation dt, .tpt-shop .woocommerce-checkout-review-order-table .variation dt { grid-column: 1; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; font-size: 11.5px; font-weight: 400; color: var(--tpt-muted); line-height: 1.5; } .tpt-shop .cart_item .variation dd, .tpt-shop .woocommerce-checkout-review-order-table .variation dd { grid-column: 2; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; } .tpt-shop .cart_item .variation dd > p, .tpt-shop .woocommerce-checkout-review-order-table .variation dd > p { display: inline-block; margin: 0 !important; padding: 4px 11px; border-radius: 100px; background: var(--tpt-green-50); border: 1px solid var(--tpt-green-100); color: #2c3a2e; font-size: 11.5px; line-height: 1.4; } /* Repli des options au-delà de 5 : le lien est ajouté en JS. */ .tpt-shop .variation.is-collapsed dt:nth-of-type(n + 6), .tpt-shop .variation.is-collapsed dd:nth-of-type(n + 6) { display: none !important; } .tpt-options-toggle { background: none; border: none; padding: 0; margin-top: 8px; font-size: 12px; color: var(--tpt-green); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: var(--tpt-sans); } .tpt-shop .quantity .qty { border: 1px solid var(--tpt-border); border-radius: 100px; height: 38px; text-align: center; background: var(--tpt-card); } .tpt-shop .product-remove a.remove { color: var(--tpt-muted) !important; font-size: 20px; } .tpt-shop .product-remove a.remove:hover { background: transparent !important; color: #b32d2e !important; } .tpt-shop .cart_item .product-subtotal, .tpt-shop .cart_item .product-price { font-family: var(--tpt-serif); font-size: 18px; font-weight: 700; white-space: nowrap; } /* Bouton « Mettre à jour le panier » discret */ .tpt-shop .actions .button[name='update_cart'] { background: transparent; border: 1px solid var(--tpt-border); color: var(--tpt-sub); border-radius: 100px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 18px; } /* ------------------------------------------------------------------ * Layout du panier : tableau à gauche, récapitulatif à droite. * WooCommerce fait flotter .cart-collaterals, ce qui décale le bloc quand * on insère du contenu après le tableau. Le JS enveloppe les deux dans * .tpt-cart-layout ; le CSS ci-dessous gère les deux cas. * --------------------------------------------------------------- */ .tpt-shop .woocommerce-cart-form { float: none !important; width: 100% !important; margin-bottom: 24px; } .tpt-shop .cart-collaterals { float: none !important; width: 100% !important; max-width: 420px; margin-left: auto; padding: 0 !important; } .tpt-shop .cart-collaterals::before, .tpt-shop .cart-collaterals::after { content: none !important; } /* WooCommerce applique « float: right; width: 48% » à .cart_totals : dans une * colonne de 400 px, le bloc tombait à 192 px et la colonne des modes de * livraison à 90 px, d'où le texte qui s'affichait lettre par lettre. */ .tpt-shop .cart_totals, .tpt-shop .cart-collaterals .cart_totals, .tpt-shop .cart-collaterals .cross-sells { float: none !important; width: 100% !important; } .tpt-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; } .tpt-cart-layout .woocommerce-cart-form { margin-bottom: 0; } .tpt-cart-layout .cart-collaterals { max-width: none; margin-left: 0; position: sticky; top: 24px; } @media (max-width: 921px) { .tpt-cart-layout { grid-template-columns: minmax(0, 1fr); } .tpt-cart-layout .cart-collaterals { position: static; } .tpt-shop .cart-collaterals { max-width: none; } } /* Le bouton « Voir les N autres personnalisations » hérite sinon du * text-transform des boutons Astra. */ .tpt-shop .tpt-options-toggle { text-transform: none !important; letter-spacing: 0 !important; background: none !important; border: none !important; min-height: 0 !important; } /* ------------------------------------------------------------------ * Totaux et récapitulatif * --------------------------------------------------------------- */ .tpt-shop .cart_totals, .tpt-shop #order_review { background: var(--tpt-card); border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius-lg); padding: 26px; box-shadow: var(--tpt-shadow); } .tpt-shop .cart_totals h2, .tpt-shop #order_review_heading { font-size: 20px; margin-top: 0; } .tpt-shop .cart_totals table, .tpt-shop .woocommerce-checkout-review-order-table { border: none; width: 100%; } .tpt-shop .cart_totals table th, .tpt-shop .cart_totals table td, .tpt-shop .woocommerce-checkout-review-order-table th, .tpt-shop .woocommerce-checkout-review-order-table td { border: none; border-bottom: 1px solid var(--tpt-border); padding: 13px 0; font-size: 14px; background: transparent; } .tpt-shop .cart_totals table th, .tpt-shop .woocommerce-checkout-review-order-table th { font-weight: 300; color: var(--tpt-sub); text-transform: none; letter-spacing: 0; } /* Récapitulatif du panier en blocs : chaque ligne devient un flex * « libellé à gauche, valeur à droite ». Le tableau HTML d'origine impose * sinon une colonne de libellé qui écrase la colonne de droite. */ .tpt-shop .cart_totals table, .tpt-shop .cart_totals tbody { display: block !important; width: 100% !important; } .tpt-shop .cart_totals tr { display: flex !important; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0 !important; border-bottom: 1px solid var(--tpt-border); } .tpt-shop .cart_totals tr:last-child { border-bottom: none; } .tpt-shop .cart_totals th, .tpt-shop .cart_totals td { display: block !important; padding: 0 !important; border: none !important; width: auto !important; text-align: right; } .tpt-shop .cart_totals th { text-align: left; flex: 0 0 auto; } .tpt-shop .cart_totals .tpt-ship-teaser td { font-weight: 300; color: var(--tpt-sub); } /* Mode « livraison dans le panier » : le libellé passe au-dessus et les * cartes occupent toute la largeur de la colonne. */ .tpt-shop .cart_totals tr.woocommerce-shipping-totals { display: block !important; } .tpt-shop .cart_totals tr.woocommerce-shipping-totals > th { width: 100% !important; text-align: left; margin-bottom: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--tpt-muted); } .tpt-shop .cart_totals tr.woocommerce-shipping-totals > td { width: 100% !important; text-align: left; } .tpt-shop .cart_totals .order-total td, .tpt-shop .woocommerce-checkout-review-order-table .order-total td { border-bottom: none; } .tpt-shop .cart_totals .order-total .woocommerce-Price-amount, .tpt-shop .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount { font-family: var(--tpt-serif); font-size: 28px; font-weight: 700; } /* ------------------------------------------------------------------ * Modes de livraison en cartes * --------------------------------------------------------------- */ .tpt-shop ul#shipping_method.tpt-ship, .tpt-ship { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column; gap: 10px; float: none !important; width: 100%; } .tpt-shop ul#shipping_method.tpt-ship > li, .tpt-ship__item { margin: 0 !important; padding: 0 !important; position: relative; float: none !important; clear: both; text-align: left !important; list-style: none !important; width: 100%; } .tpt-shop ul#shipping_method.tpt-ship > li::before, .tpt-shop ul#shipping_method.tpt-ship > li::marker { content: none; } .tpt-ship__radio { position: absolute; top: 17px; left: 13px; margin: 0; width: 17px; height: 17px; accent-color: var(--tpt-green); z-index: 2; } .tpt-shop label.tpt-ship__card, .tpt-ship__card { /* Grille plutôt que flex : dans la colonne des totaux (environ 215 px de * large) le prix passe sous le libellé au lieu de l'écraser. */ display: grid !important; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 5px; align-items: center; width: 100%; float: none !important; box-sizing: border-box; padding: 13px 13px 13px 36px; border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); background: var(--tpt-card); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; margin: 0; } .tpt-ship__card:hover { border-color: var(--tpt-green-200); } .tpt-ship__radio:checked + .tpt-ship__card { border-color: var(--tpt-green); border-width: 1.5px; background: var(--tpt-green-50); } .tpt-ship__body { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .tpt-ship__label { font-size: 13.5px; font-weight: 600; } .tpt-ship__hint { font-size: 11.5px; font-weight: 300; color: var(--tpt-sub); line-height: 1.5; } .tpt-ship__price { grid-column: 2; grid-row: 2; justify-self: start; align-self: center; font-family: var(--tpt-serif); font-size: 16px; font-weight: 700; white-space: nowrap; } .tpt-ship__price.is-free { font-family: var(--tpt-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tpt-green-700); } /* Petite pastille d'icône par mode */ .tpt-ship__mode { grid-column: 1; grid-row: 1; width: 28px; height: 28px; border-radius: 100px; background: var(--tpt-bg-warm); flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: 15px 15px; } .tpt-ship__mode[data-mode='domicile'] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23768471' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E"); } .tpt-ship__mode[data-mode='relais'] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23768471' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); } .tpt-ship__mode[data-mode='email'] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23768471' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); } .tpt-ship__destination, .tpt-ship__empty, .tpt-ship__details { font-size: 12.5px; font-weight: 300; color: var(--tpt-sub); margin: 12px 0 0; } /* ------------------------------------------------------------------ * Vente additionnelle * --------------------------------------------------------------- */ .tpt-crosssell { margin: 40px 0 8px; } .tpt-crosssell__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .tpt-crosssell__title { font-family: var(--tpt-serif); font-size: 26px; font-weight: 700; margin: 0; } .tpt-crosssell__all { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tpt-green); white-space: nowrap; } .tpt-crosssell__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .tpt-crosssell__item { background: var(--tpt-card); border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); overflow: hidden; display: flex; flex-direction: column; margin: 0; } .tpt-crosssell__media { display: block; line-height: 0; border-bottom: 1px solid var(--tpt-border); background: var(--tpt-bg-warm); } .tpt-crosssell__media img { width: 100%; height: auto; display: block; } .tpt-crosssell__body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 7px; flex-grow: 1; } .tpt-crosssell__tag { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--tpt-green); } .tpt-crosssell__name { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--tpt-text); text-decoration: none; } .tpt-crosssell__name:hover { color: var(--tpt-green-700); } .tpt-crosssell__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tpt-crosssell__price .woocommerce-Price-amount { font-family: var(--tpt-serif); font-size: 18px; font-weight: 700; } .tpt-shop .tpt-crosssell__btn, .tpt-shop .tpt-crosssell__foot .button { border: 1px solid var(--tpt-green-200); background: var(--tpt-card); color: var(--tpt-green); border-radius: 100px; padding: 8px 15px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; min-height: 44px; display: inline-flex; align-items: center; } .tpt-shop .tpt-crosssell__btn:hover, .tpt-shop .tpt-crosssell__foot .button:hover { background: var(--tpt-green); color: #fff; border-color: var(--tpt-green); } /* ------------------------------------------------------------------ * Boutons principaux * --------------------------------------------------------------- */ .tpt-shop .checkout-button, .tpt-shop #place_order, .tpt-shop .wc-proceed-to-checkout .button { background: var(--tpt-green); color: #fff; border: none; border-radius: 12px; padding: 17px 20px; font-family: var(--tpt-sans); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; width: 100%; min-height: 52px; /* WooCommerce flotte ce bouton à droite par défaut (pour le mettre à * côté de la case « conditions générales »). Avec un bouton en pleine * largeur, ce float sort le bouton du flux normal : tout ce qu'on * ajoute après lui dans le même bloc (avis clients) remonte alors par- * dessus, puisqu'un flottant ne réserve pas de place pour la suite. */ float: none !important; } .tpt-shop .checkout-button:hover, .tpt-shop #place_order:hover, .tpt-shop .wc-proceed-to-checkout .button:hover { background: var(--tpt-green-700); color: #fff; } /* ------------------------------------------------------------------ * Checkout : formulaire à gauche, récapitulatif collant à droite * * WooCommerce fait flotter #customer_details et #order_review. Le JS * regroupe le titre et le récapitulatif dans .tpt-co-aside, et la grille * ci-dessous remplace les flottants — sans quoi la colonne de droite * s'arrête à mi-hauteur et laisse un grand vide sur écran large. * --------------------------------------------------------------- */ .tpt-shop form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; } .tpt-shop #customer_details { grid-column: 1; float: none !important; width: auto !important; /* align-self: start est indispensable : sans lui, la colonne est étirée * sur toute la hauteur de la ligne de grille et n'a donc aucune marge de * manœuvre pour coller. Avec, elle garde sa hauteur réelle et se fige * pendant que la colonne de droite (souvent plus longue : paiement, * conditions, avis) finit de défiler. */ align-self: start; position: sticky; top: 24px; } .tpt-shop .tpt-co-aside { grid-column: 2; } .tpt-shop .tpt-co-aside__inner { position: sticky; top: 24px; } .tpt-shop #order_review_heading, .tpt-shop #order_review { float: none !important; width: auto !important; } .tpt-shop #order_review_heading { margin: 0 0 12px; } /* Récapitulatif de commande en blocs : même principe que le panier, pour * que la ligne « Expédition » occupe toute la largeur. Sans ça la cellule * des modes de livraison tombe à 145 px et le texte s'affiche à la * verticale, une lettre par ligne. */ .tpt-shop .woocommerce-checkout-review-order-table, .tpt-shop .woocommerce-checkout-review-order-table thead, .tpt-shop .woocommerce-checkout-review-order-table tbody, .tpt-shop .woocommerce-checkout-review-order-table tfoot { display: block !important; width: 100% !important; } .tpt-shop .woocommerce-checkout-review-order-table tr { display: flex !important; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0 !important; border-bottom: 1px solid var(--tpt-border); } .tpt-shop .woocommerce-checkout-review-order-table tr:last-child { border-bottom: none; } .tpt-shop .woocommerce-checkout-review-order-table th, .tpt-shop .woocommerce-checkout-review-order-table td { display: block !important; padding: 0 !important; border: none !important; width: auto !important; text-align: right; } .tpt-shop .woocommerce-checkout-review-order-table th, .tpt-shop .woocommerce-checkout-review-order-table td.product-name { text-align: left; } .tpt-shop .woocommerce-checkout-review-order-table td.product-name { flex: 1 1 auto; min-width: 0; } .tpt-shop .woocommerce-checkout-review-order-table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--tpt-muted); } .tpt-shop .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { display: block !important; } .tpt-shop .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th { width: 100% !important; margin-bottom: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--tpt-muted); } .tpt-shop .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td { width: 100% !important; text-align: left; } /* Le code promo vient se ranger dans la colonne de droite. */ .tpt-shop .tpt-co-aside .woocommerce-form-coupon-toggle, .tpt-shop #order_review .woocommerce-form-coupon-toggle { margin: 0 0 14px; } @media (max-width: 921px) { .tpt-shop form.checkout { grid-template-columns: minmax(0, 1fr); } .tpt-shop .tpt-co-aside { grid-column: 1; } .tpt-shop .tpt-co-aside__inner { position: static; } /* Une seule colonne : plus rien à figer, sinon le formulaire se bloquerait * au milieu du défilement. */ .tpt-shop #customer_details { position: static; } } /* ------------------------------------------------------------------ * Formulaires du checkout * --------------------------------------------------------------- */ .tpt-shop #customer_details .col-1, .tpt-shop #customer_details .col-2 { background: var(--tpt-card); border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius-lg); padding: 24px; } .tpt-shop .form-row label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tpt-sub); margin-bottom: 6px; } .tpt-shop .form-row input.input-text, .tpt-shop .form-row textarea, .tpt-shop .select2-container .select2-selection--single, .tpt-shop .form-row select { border: 1px solid var(--tpt-border); border-radius: 10px; min-height: 46px; padding: 0 14px; font-size: 14px; background: var(--tpt-card); color: var(--tpt-text); box-shadow: none; } .tpt-shop .form-row textarea { padding: 12px 14px; min-height: 90px; } .tpt-shop .form-row input.input-text:focus, .tpt-shop .form-row textarea:focus, .tpt-shop .form-row select:focus { border-color: var(--tpt-green); outline: 2px solid var(--tpt-green-100); outline-offset: 0; } .tpt-shop .woocommerce-form__label-for-checkbox, .tpt-shop .woocommerce-terms-and-conditions-wrapper label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 300; color: var(--tpt-sub); line-height: 1.55; } /* Les majuscules sont faites pour les intitulés de champs (« ADRESSE * E-MAIL »), pas pour les phrases des cases à cocher. Certaines cases * ajoutées par des extensions (newsletter, options de paiement) n'ont que * la classe « checkbox » et passaient donc à travers la règle ci-dessus : * elles se retrouvaient en capitales, bien plus lourdes que « J'ai lu et * j'accepte les conditions générales » juste au-dessus. On ne touche * qu'à la casse et à l'interlettrage, pour que la taille reste celle des * conditions générales. */ .tpt-shop .form-row label.checkbox, /* Même cas côté Stripe : ici l'intitulé n'a aucune classe et la case n'est * pas à l'intérieur du label, seul le nom de la ligne permet de la viser. */ .tpt-shop .form-row.woocommerce-SavedPaymentMethods-saveNew label { text-transform: none; letter-spacing: 0; } /* Code promo replié */ .tpt-shop .woocommerce-form-coupon-toggle .woocommerce-info { background: var(--tpt-card); border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); color: var(--tpt-text); font-size: 13px; padding: 14px 16px; } .tpt-shop .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; } .tpt-shop .checkout_coupon { border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); background: var(--tpt-card); } /* Paiement */ .tpt-shop #payment { background: transparent; border-radius: 0; } .tpt-shop #payment ul.payment_methods { border: none; padding: 0; margin: 0 0 14px; } .tpt-shop #payment ul.payment_methods li { border: 1px solid var(--tpt-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; background: var(--tpt-card); list-style: none; } .tpt-shop #payment ul.payment_methods li label { font-size: 14px; font-weight: 500; color: var(--tpt-text); } .tpt-shop #payment div.payment_box { background: var(--tpt-green-50); border-radius: 10px; margin-top: 12px; font-size: 13px; color: var(--tpt-text); } .tpt-shop #payment div.payment_box::before { display: none; } /* Réassurance : trois repères en icônes, sous le bouton de paiement. */ .tpt-reassurance { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .tpt-reassurance li { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; } .tpt-reassurance__icon { width: 34px; height: 34px; color: var(--tpt-green); display: flex; align-items: center; justify-content: center; } .tpt-reassurance__icon svg { width: 26px; height: 26px; } .tpt-reassurance__label { font-size: 11.5px; font-weight: 400; color: var(--tpt-sub); line-height: 1.45; } @media (max-width: 480px) { .tpt-reassurance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .tpt-reassurance__label { font-size: 10.5px; } } /* ------------------------------------------------------------------ * Option « prévisualisation » et widget d'avis * --------------------------------------------------------------- */ .tpt-shop .tpt-preview-option { margin: 10px 0 0; } /* display: flex en !important — WooCommerce impose * « .woocommerce form .form-row label.checkbox { display: inline } », plus * spécifique que nos sélecteurs. Le label restait donc une boîte en ligne : * tant que le texte tenait sur une ligne ça passait, mais dès qu'il * revenait à la ligne (mobile), le cadre ne suivait plus le texte et les * deux cases se chevauchaient. */ .tpt-shop .tpt-preview-option label { display: flex !important; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border: 1px dashed var(--tpt-green-200); border-radius: var(--tpt-radius); background: var(--tpt-card); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; color: var(--tpt-text); line-height: 1.5; } .tpt-shop .tpt-preview-option input[type='checkbox'] { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--tpt-green); flex: 0 0 auto; } /* Bloc « Vous pourriez également vouloir » : l'option payante d'abord, * l'option offerte juste en dessous. Les deux cases partagent la même * forme de carte ; seul le fond distingue le payant (vert clair) de * l'offert (bordure pointillée). */ .tpt-shop .tpt-extra-options { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--tpt-border); clear: both; } .tpt-shop .tpt-extra-options__title { font-size: 17px; margin: 0 0 14px; } .tpt-shop .tpt-pdf-option { margin: 0; } /* !important : même raison que pour la case « prévisualisation » ci-dessus * (WooCommerce force display:inline sur label.checkbox). */ .tpt-shop .tpt-pdf-option label { display: flex !important; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid var(--tpt-green-200); border-radius: var(--tpt-radius); background: var(--tpt-green-50); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--tpt-text); line-height: 1.5; } .tpt-shop .tpt-pdf-option label:hover { border-color: var(--tpt-green); } .tpt-shop .tpt-pdf-option input[type='checkbox'] { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--tpt-green); flex: 0 0 auto; } .tpt-shop .tpt-pdf-option__price { white-space: nowrap; font-weight: 700; color: var(--tpt-green-700); } /* Pendant le recalcul du total, on montre que quelque chose se passe. */ .tpt-shop .tpt-pdf-option.is-busy { opacity: 0.55; pointer-events: none; } .tpt-shop .tpt-extra-options .tpt-preview-option { margin-top: 10px; } /* Barre de total fixe : réservée au mobile. Le JS l'ajoute au sur * toutes les tailles d'écran ; sans cette règle elle retombe en bas de page * sur ordinateur, sous le pied de page, en bloc ordinaire. Le passage en * display:flex se fait dans la media query mobile, en bas de ce fichier. */ .tpt-sticky-total { display: none; } .tpt-reviews { clear: both; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--tpt-border); } .tpt-reviews > * { max-width: 100%; } /* ------------------------------------------------------------------ * Checkout : panneau de droite épuré * --------------------------------------------------------------- */ .tpt-shop .tpt-co-aside__inner #order_review { background: var(--tpt-green-50); border: 1px solid var(--tpt-green-100); border-radius: var(--tpt-radius-lg); padding: 22px; box-shadow: none; } .tpt-shop .tpt-co-aside .woocommerce-checkout-review-order-table tr { border-bottom-color: var(--tpt-green-200); } /* Le libellé « Vous avez un code promo ? » n'apporte rien : le champ est * juste en dessous, toujours visible. */ .tpt-shop .woocommerce-form-coupon-toggle { display: none !important; } .tpt-shop form.checkout_coupon { display: flex !important; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0; border: none; background: transparent; border-radius: 0; } .tpt-shop form.checkout_coupon p { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; } .tpt-shop form.checkout_coupon p:first-of-type { flex: 1 1 auto; min-width: 0; } .tpt-shop form.checkout_coupon .input-text { width: 100%; height: 44px; min-height: 44px; border: 1px solid var(--tpt-border); border-radius: 10px; padding: 0 14px; font-size: 13.5px; background: var(--tpt-card); } .tpt-shop form.checkout_coupon .button { flex: 0 0 auto; height: 44px; min-height: 44px; width: auto; border-radius: 10px; background: transparent; border: 1px solid var(--tpt-green-200); color: var(--tpt-green); padding: 0 18px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; } .tpt-shop form.checkout_coupon .button:hover { background: var(--tpt-green); border-color: var(--tpt-green); color: #fff; } /* Le texte d'explication de WooCommerce au-dessus du champ est superflu. */ .tpt-shop form.checkout_coupon > p:not(.form-row) { display: none; } /* Vignette produit + badge quantité. */ .tpt-co-thumb { float: left; position: relative; margin: 0 12px 6px 0; line-height: 0; } .tpt-co-thumb img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--tpt-border); background: var(--tpt-card); } .tpt-co-qty { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 100px; background: var(--tpt-dark); color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; } .tpt-shop .woocommerce-checkout-review-order-table .product-quantity { display: none; } .tpt-shop .woocommerce-checkout-review-order-table td.product-name::after { content: ''; display: block; clear: both; } /* ------------------------------------------------------------------ * Bandeau de confiance * --------------------------------------------------------------- */ .tpt-trust { display: flex; background: var(--tpt-green); border-radius: var(--tpt-radius); padding: 20px 24px; margin: 36px 0 0; } .tpt-trust__item { flex: 1 1 0; text-align: center; padding: 0 12px; border-right: 1px solid rgba(255, 255, 255, 0.15); } .tpt-trust__item:last-child { border-right: none; } .tpt-trust__title { display: block; font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 4px; } .tpt-trust__sub { display: block; font-size: 11.5px; font-weight: 300; color: rgba(255, 255, 255, 0.92); } /* ------------------------------------------------------------------ * Notices * --------------------------------------------------------------- */ .tpt-shop .woocommerce-message, .tpt-shop .woocommerce-info, .tpt-shop .woocommerce-error { border-top: none; border-left: 3px solid var(--tpt-green); background: var(--tpt-card); border-radius: 10px; color: var(--tpt-text); font-size: 13.5px; } .tpt-shop .woocommerce-error { border-left-color: #b32d2e; } /* ------------------------------------------------------------------ * Mobile * --------------------------------------------------------------- */ @media (max-width: 921px) { .tpt-crosssell__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* Deux produits sur mobile : le reste est masqué. */ .tpt-crosssell__item:nth-child(n + 3) { display: none; } .tpt-crosssell__title { font-size: 20px; } .tpt-trust { flex-wrap: wrap; gap: 16px; padding: 18px; } .tpt-trust__item { flex: 1 1 40%; border-right: none; } .tpt-steps { gap: 8px; font-size: 9px; letter-spacing: 0.14em; } .tpt-steps__item + .tpt-steps__item::before { width: 18px; margin-right: 8px; } .tpt-shop .cart_item .product-thumbnail img { width: 68px; } .tpt-ship__card { padding: 14px 14px 14px 42px; } /* Barre de total collée en bas du checkout */ .tpt-shop.woocommerce-checkout .tpt-sticky-total { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--tpt-card); border-top: 1px solid var(--tpt-border); box-shadow: 0 -4px 24px rgba(42, 37, 32, 0.1); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; } .tpt-sticky-total__label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--tpt-muted); display: block; } .tpt-sticky-total__amount { font-family: var(--tpt-serif); font-size: 22px; font-weight: 700; } .tpt-sticky-total__btn { flex-grow: 1; background: var(--tpt-green); color: #fff; border: none; border-radius: 12px; padding: 15px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; min-height: 48px; } .tpt-shop.woocommerce-checkout .site-content { padding-bottom: 92px; } }