/* ------------------------------------------------------------------------- * Boutons WooCommerce — habillage menthe identique aux boutons jsp-pro. * * Chargé (après WooCommerce ET après les styles Divi) sur les pages produit, * panier, commander, compte et les pages jsp : sans lui, les boutons WC * (Ajouter au panier, Valider la commande, Voir le panier, code promo…) * héritent des styles globaux Divi (fond transparent, texte rouge) et leur * survol/focus ne suit pas la couleur du bouton. * * Menthe : 500 #15c39a (base), 600 #13ae8a (hover/focus/active), * 400 #3ee8a0 (anneau focus clavier). Dark : 700 #119e7d / 600. * On repasse en !important car le Customizer Divi neutralise déjà ces * boutons en !important ; cette feuille étant chargée en dernier dans le * , elle gagne à importance égale. * ------------------------------------------------------------------------- */ .woocommerce :is(a.button, button.button, input.button, a.wc-forward):not(.invoice):not(.view), .woocommerce-page :is(a.button, button.button, input.button, a.wc-forward):not(.invoice):not(.view) { background-color: #15c39a !important; /* menthe-500 */ border-color: #15c39a !important; color: #ffffff !important; } .woocommerce :is(a.button, button.button, input.button, a.wc-forward):not(.invoice):not(.view):is(:hover, :focus, :active), .woocommerce-page :is(a.button, button.button, input.button, a.wc-forward):not(.invoice):not(.view):is(:hover, :focus, :active) { background-color: #13ae8a !important; /* menthe-600 */ border-color: #13ae8a !important; color: #ffffff !important; } /* Anneau visible au clavier uniquement (comme les boutons jsp-pro). */ .woocommerce :is(a.button, button.button, input.button, a.wc-forward):not(.invoice):not(.view):focus-visible, .woocommerce-page :is(a.button, button.button, input.button, a.wc-forward):not(.invoice):not(.view):focus-visible { outline: 3px solid #3ee8a0 !important; /* menthe-400 */ outline-offset: 2px; } /* ------------------------------------------------------------------------- * Liens des notices d'erreur WooCommerce (tunnel de commande) — blancs, * lisibles sur le fond rouge des .woocommerce-error. Le Customizer Divi * colore ces en !important : on repasse en !important (même logique * que les boutons ci-dessus). * ------------------------------------------------------------------------- */ .woocommerce-checkout .woocommerce-error a, .woocommerce-NoticeGroup-checkout .woocommerce-error a, .et_pb_wc_checkout_billing .woocommerce-error a, .et_pb_wc_checkout_shipping .woocommerce-error a, .et_pb_wc_checkout_information .woocommerce-error a, .et_pb_wc_checkout_order_details .woocommerce-error a, .et_pb_wc_checkout_payment_info .woocommerce-error a { color: #ffffff !important; } .woocommerce-checkout .woocommerce-error a:is(:hover, :focus), .woocommerce-NoticeGroup-checkout .woocommerce-error a:is(:hover, :focus), .et_pb_wc_checkout_billing .woocommerce-error a:is(:hover, :focus), .et_pb_wc_checkout_shipping .woocommerce-error a:is(:hover, :focus), .et_pb_wc_checkout_information .woocommerce-error a:is(:hover, :focus), .et_pb_wc_checkout_order_details .woocommerce-error a:is(:hover, :focus), .et_pb_wc_checkout_payment_info .woocommerce-error a:is(:hover, :focus) { color: #ffffff !important; } /* ------------------------------------------------------------------------- * Tunnel de commande : retrait du bandeau « Avez-vous un code promo ? » * (.woocommerce-form-coupon-toggle). Les codes promo se saisissent sur la * page panier ; sur la page commander on ne laisse que le paiement. * * Sur la page de commande Divi, ce bandeau est rendu dans le module * et_pb_wc_cart_notice (constaté en prod : form-coupon + form-login sous * et_pb_wc_cart_notice_0, en tête du checkout classique). * ------------------------------------------------------------------------- */ .woocommerce-checkout .woocommerce-form-coupon-toggle, .et_pb_wc_cart_notice .woocommerce-form-coupon-toggle, .et_pb_wc_checkout .woocommerce-form-coupon-toggle, .et_pb_wc_checkout_information .woocommerce-form-coupon-toggle { display: none !important; } /* ------------------------------------------------------------------------- * Page « Commande reçue » : message de remerciement * (« Merci. Votre commande a été reçue. »), en couleur principale. * La variable --jsp-accent est injectée sur les pages WooCommerce par * AssetManager (accent_hex = « Couleur Principale » du Customizer Divi). * ------------------------------------------------------------------------- */ .woocommerce-notice.woocommerce-thankyou-order-received { margin-bottom: 15px; color: var(--jsp-accent); font-size: 20px; } /* ------------------------------------------------------------------------- * Variantes thème sombre (attribut posé par jsp-pro) — 700 en base, * 600 au survol, comme le bouton contact du site. * ------------------------------------------------------------------------- */ html[data-jsp-global-theme="dark"] .woocommerce :is(a.button, button.button, input.button, a.wc-forward):not(.invoice):not(.view), html[data-jsp-global-theme="dark"] .woocommerce-page :is(a.button, button.button, input.button, a.wc-forward):not(.invoice):not(.view) { background-color: #119e7d !important; /* menthe-700 */ border-color: #119e7d !important; } html[data-jsp-global-theme="dark"] .woocommerce :is(a.button, button.button, input.button, a.wc-forward):not(.invoice):not(.view):is(:hover, :focus, :active), html[data-jsp-global-theme="dark"] .woocommerce-page :is(a.button, button.button, input.button, a.wc-forward):not(.invoice):not(.view):is(:hover, :focus, :active) { background-color: #13ae8a !important; /* menthe-600 */ border-color: #13ae8a !important; }