/* Theme Name: Divi Child — Sebusensei Theme URI: https://sebusensei.com/ Description: Thème enfant de Divi pour sebusensei.com. Sert de point d'ancrage au code qui doit vivre dans le : balises Open Graph de la page de vente, noindex et exclusion du sitemap de la page de livraison des vidéos. Contient aussi l'habillage WooCommerce. Résiste aux mises à jour de Divi. Author: Sébastien (セブ先生) Template: Divi Version: 1.2.0 Text Domain: divi-child-sebusensei */ /* ============================================================== HABILLAGE WOOCOMMERCE -------------------------------------------------------------- Par défaut, Divi peint les boutons et les prix WooCommerce avec sa couleur d'accentuation (#2EA3F2, un bleu clair), en contour 2 px et arrondi 3 px. Ça ne correspond ni à la charte du PDF ni à la page de vente. On ne touche PAS à la couleur d'accentuation de Divi : elle sert aussi aux liens et aux boutons du reste du site. On surcharge uniquement WooCommerce. Les !important sont nécessaires : Divi génère sa propre feuille de style, chargée après celle du thème enfant et de spécificité équivalente. Sans eux, c'est Divi qui gagne. ============================================================== */ :root { /* ---- Les 3 lignes à modifier si tu veux une autre couleur ---- */ --sbs-btn-bg: #E5B94E; /* fond du bouton — doré de la charte */ --sbs-btn-hover: #D9A932; /* le même, un cran plus foncé */ --sbs-btn-text: #23405F; /* texte du bouton — bleu marine */ --sbs-navy: #2A4C77; } /* ---------- Boutons d'achat ---------- Fiche produit, boutique, panier, et surtout le bouton qui valide la commande — c'est celui-là qui encaisse. */ .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce button.single_add_to_cart_button, .woocommerce a.add_to_cart_button, .woocommerce a.checkout-button, .woocommerce #place_order, .woocommerce-page #place_order { background-color: var(--sbs-btn-bg) !important; border: 0 !important; color: var(--sbs-btn-text) !important; border-radius: 8px !important; padding: 16px 32px !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.5 !important; transition: background-color .18s ease !important; } .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.single_add_to_cart_button:hover, .woocommerce a.add_to_cart_button:hover, .woocommerce a.checkout-button:hover, .woocommerce #place_order:hover, .woocommerce-page #place_order:hover { background-color: var(--sbs-btn-hover) !important; color: var(--sbs-btn-text) !important; } /* Divi ajoute une flèche « → » en pseudo-élément au survol de ses boutons, ce qui décale le texte. On la retire sur WooCommerce. */ .woocommerce button.button.alt::after, .woocommerce a.button.alt::after, .woocommerce button.single_add_to_cart_button::after, .woocommerce a.add_to_cart_button::after, .woocommerce a.checkout-button::after, .woocommerce #place_order::after { display: none !important; } /* ---------- Le prix ---------- Bleu marine plutôt que le bleu clair de Divi, et un cran plus gros. Surtout pas de doré ici : #E5B94E sur blanc tombe à 1,9:1 de contraste, illisible pour l'information la plus importante de la page. Le doré reste réservé aux fonds de bouton. */ .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price { color: var(--sbs-navy) !important; font-weight: 700 !important; } .woocommerce div.product p.price { font-size: 26px !important; } /* ---------- Le champ quantité ---------- Carré et gris à côté d'un bouton arrondi, ça jurait. */ .woocommerce .quantity input.qty { border-radius: 8px !important; border: 1px solid #DDD5C4 !important; background: #FFFFFF !important; } /* ---------- Respiration ---------- */ .woocommerce div.product form.cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Sur téléphone, le bouton prend toute la largeur : plus facile à viser au pouce, et c'est là que viendra l'essentiel du trafic. */ @media (max-width: 767px) { .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 100%; width: 100% !important; text-align: center; } }