/* Theme Name: 2DA Informatique Child Theme URI: https://2dainformatique.com Description: Child theme pour 2DA Informatique — Royal Elementor Kit parent Author: 2DA Informatique Author URI: https://2dainformatique.com Template: royal-elementor-kit Version: 1.3.6 Text Domain: 2da-informatique */ /* ═══════════════════════════════════════════════ VARIABLES GLOBALES 2DA INFORMATIQUE ════════════════════════════════════════════════ */ :root { --2da-red: #E63329; --2da-blue: #1B4FBF; --2da-white: #FFFFFF; --2da-light: #F4F6FB; --2da-dark: #0b0f2a; /* v1.3.4 : harmonisé palette navy unifiée (ex #0F1B3C) */ --2da-gray: #6B7A99; --2da-radius: 12px; --2da-shadow: 0 4px 24px rgba(27,79,191,.10); } /* ═══════════════════════════════════════════════ GLOBAL — FOND BLANC + TYPOGRAPHIE ════════════════════════════════════════════════ */ body { background-color: var(--2da-white) !important; /* color retiré — Royal Elementor gère la couleur du texte */ } a { color: var(--2da-blue); } a:hover { color: var(--2da-red); } /* ═══════════════════════════════════════════════ WOOCOMMERCE — BOUTONS PRINCIPAUX ════════════════════════════════════════════════ */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button.alt, .woocommerce a.button.alt { background-color: var(--2da-blue) !important; color: #fff !important; border-radius: 50px !important; font-weight: 700 !important; border: none !important; transition: background .25s, transform .2s !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce .button.alt:hover { background-color: var(--2da-red) !important; transform: translateY(-2px); } /* ═══════════════════════════════════════════════ WOOCOMMERCE — FICHE PRODUIT PREMIUM Titre · Prix · Quantité · Bouton "Ajouter au panier" Fond navy ancré (palette unifiée #1a2f7a → #0b0f2a) ════════════════════════════════════════════════ */ /* ----- 0. FOND NAVY GARANTI (anti texte blanc sur blanc) ----- La fiche produit force le texte en blanc partout. On ancre donc un fond sombre sur TOUTE la page produit pour qu'aucun conteneur Royal Elementor "transparent" ne retombe sur le body blanc global. Couche fixe en pseudo-élément : couvre tout le viewport, ne casse pas les z-index Elementor, indépendant des MAJ du thème parent. */ body.single-product { background-color: #0b0f2a !important; background-image: none !important; } body.single-product::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(135deg, #1a2f7a 0%, #0b0f2a 70%); pointer-events: none; } /* Wrappers de contenu : transparents pour laisser voir le fond ancré */ body.single-product #content, body.single-product .site-content, body.single-product .elementor, body.single-product .elementor-section-wrap, body.single-product div.product, body.single-product .woocommerce-notices-wrapper { background-color: transparent !important; background-image: none !important; } /* Variables locales (scope fiche produit) */ .woocommerce div.product, .single-product .product { --2da-surface: rgba(255, 255, 255, 0.04); --2da-surface-hover: rgba(255, 255, 255, 0.08); --2da-border: rgba(255, 255, 255, 0.12); --2da-text: #FFFFFF; --2da-text-soft: rgba(255, 255, 255, 0.65); --2da-text-mute: rgba(255, 255, 255, 0.40); --2da-accent: #E63329; --2da-accent-soft: rgba(230, 51, 41, 0.12); --2da-cta: #1B4FBF; --2da-cta-hover: #2563E6; } /* ----- 1. TITRE PRODUIT ----- */ .woocommerce div.product .product_title, .single-product .product_title { font-family: 'Syne', 'Inter', sans-serif !important; font-weight: 700 !important; font-style: normal !important; font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.25rem) !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; color: var(--2da-text) !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 0 16px 0 !important; margin: 0 0 20px 0 !important; position: relative; } .woocommerce div.product .product_title::after, .single-product .product_title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 48px; height: 3px; background: var(--2da-accent); border-radius: 2px; } /* ----- 2. PRIX ----- */ .woocommerce div.product p.price, .woocommerce div.product .price, .single-product .price { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 24px 0 !important; display: flex !important; align-items: baseline; flex-wrap: wrap; gap: 14px; font-family: 'Syne', 'Inter', sans-serif !important; box-shadow: none !important; } /* Nouveau prix actif — effet SHINE (balayage lumineux premium) Sélecteurs élargis pour couvrir tous les wrappers Royal Elementor / Woo */ .woocommerce div.product p.price ins, .woocommerce div.product .price ins, .woocommerce div.product p.price > .woocommerce-Price-amount, .woocommerce div.product .price > .woocommerce-Price-amount, .elementor-widget-woocommerce-product-price .price ins, .elementor-widget-woocommerce-product-price .price > .woocommerce-Price-amount, .elementor-widget-woocommerce-product-price .price > bdi, .single-product .product .price ins, .single-product .product .price > .woocommerce-Price-amount, .single-product .price ins .woocommerce-Price-amount, body.single-product .price ins, body.single-product .price > .woocommerce-Price-amount { background: transparent !important; text-decoration: none !important; color: var(--2da-text, #FFFFFF) !important; font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1 !important; order: 2; display: inline-block !important; position: relative; overflow: hidden; isolation: isolate; } /* Le reflet lumineux qui glisse à travers le prix */ .woocommerce div.product p.price ins::after, .woocommerce div.product .price ins::after, .woocommerce div.product p.price > .woocommerce-Price-amount::after, .woocommerce div.product .price > .woocommerce-Price-amount::after, .elementor-widget-woocommerce-product-price .price ins::after, .elementor-widget-woocommerce-product-price .price > .woocommerce-Price-amount::after, body.single-product .price ins::after, body.single-product .price > .woocommerce-Price-amount::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 220, 215, 0.35) 52%, transparent 70% ); transform: translateX(-110%); animation: da2-price-shine 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; pointer-events: none; mix-blend-mode: screen; z-index: 1; } /* Animation : balayage lumineux de gauche à droite */ @keyframes da2-price-shine { 0% { transform: translateX(-110%); } 100% { transform: translateX(220%); } } /* Pause au survol (lecture confortable) */ .woocommerce div.product p.price:hover ins::after, .woocommerce div.product .price:hover ins::after, .woocommerce div.product p.price:hover > .woocommerce-Price-amount::after, .woocommerce div.product .price:hover > .woocommerce-Price-amount::after, .elementor-widget-woocommerce-product-price .price:hover ins::after, .elementor-widget-woocommerce-product-price .price:hover > .woocommerce-Price-amount::after { animation-play-state: paused !important; } /* Respecter les préférences d'accessibilité */ @media (prefers-reduced-motion: reduce) { .woocommerce div.product p.price ins::after, .woocommerce div.product .price ins::after, .woocommerce div.product p.price > .woocommerce-Price-amount::after, .woocommerce div.product .price > .woocommerce-Price-amount::after, .elementor-widget-woocommerce-product-price .price ins::after, .elementor-widget-woocommerce-product-price .price > .woocommerce-Price-amount::after, body.single-product .price ins::after, body.single-product .price > .woocommerce-Price-amount::after { animation: none !important; display: none !important; } } /* Ancien prix barré discret */ .woocommerce div.product p.price del, .woocommerce div.product .price del { color: var(--2da-text-mute) !important; font-size: 1.05rem !important; font-weight: 500 !important; text-decoration: line-through !important; text-decoration-thickness: 1.5px !important; text-decoration-color: var(--2da-text-mute) !important; opacity: 1 !important; order: 1; margin: 0 !important; } /* Symbole CFA */ .woocommerce div.product .woocommerce-Price-currencySymbol { font-size: 0.65em; font-weight: 600; margin-left: 4px; color: var(--2da-text-soft); vertical-align: 0.2em; } /* ----- 2bis. PRIX PRODUITS SIMILAIRES / UPSELL / CROSS-SELL ----- La règle du prix principal (clamp 28→40px + shine) déborde sur les cartes "produits similaires" car .related est imbriqué dans div.product. On rétablit une taille compacte (12px) UNIQUEMENT sur ces blocs secondaires — le prix principal reste premium. */ body.single-product .related .price, body.single-product .related .price ins, body.single-product .related .price del, body.single-product .related .price > .woocommerce-Price-amount, body.single-product .related .price .woocommerce-Price-amount, body.single-product .up-sells .price, body.single-product .up-sells .price ins, body.single-product .up-sells .price del, body.single-product .up-sells .price > .woocommerce-Price-amount, body.single-product .up-sells .price .woocommerce-Price-amount, body.single-product .cross-sells .price, body.single-product .cross-sells .price ins, body.single-product .cross-sells .price del, body.single-product .cross-sells .price > .woocommerce-Price-amount, body.single-product .cross-sells .price .woocommerce-Price-amount, body.single-product .elementor-widget-wpr-products .price, body.single-product .elementor-widget-wpr-products .price ins, body.single-product .elementor-widget-wpr-products .price del, body.single-product .elementor-widget-wpr-products .price > .woocommerce-Price-amount, body.single-product .elementor-widget-wpr-products .price .woocommerce-Price-amount, body.single-product ul.products li.product .price, body.single-product ul.products li.product .price ins, body.single-product ul.products li.product .price del, body.single-product ul.products li.product .price > .woocommerce-Price-amount, body.single-product ul.products li.product .price .woocommerce-Price-amount { font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; overflow: visible !important; } /* Ancien prix barré : encore plus discret dans ces cartes */ body.single-product .related .price del, body.single-product .up-sells .price del, body.single-product .cross-sells .price del, body.single-product .elementor-widget-wpr-products .price del, body.single-product ul.products li.product .price del { font-size: 11px !important; font-weight: 500 !important; } /* Symbole CFA proportionné dans ces cartes */ body.single-product .related .woocommerce-Price-currencySymbol, body.single-product .up-sells .woocommerce-Price-currencySymbol, body.single-product .cross-sells .woocommerce-Price-currencySymbol, body.single-product .elementor-widget-wpr-products .woocommerce-Price-currencySymbol, body.single-product ul.products li.product .woocommerce-Price-currencySymbol { font-size: 0.8em !important; vertical-align: baseline !important; } /* Pas d'effet shine sur ces petits prix (réservé au prix principal) */ body.single-product .related .price ins::after, body.single-product .related .price > .woocommerce-Price-amount::after, body.single-product .up-sells .price ins::after, body.single-product .up-sells .price > .woocommerce-Price-amount::after, body.single-product .cross-sells .price ins::after, body.single-product .cross-sells .price > .woocommerce-Price-amount::after, body.single-product .elementor-widget-wpr-products .price ins::after, body.single-product .elementor-widget-wpr-products .price > .woocommerce-Price-amount::after, body.single-product ul.products li.product .price ins::after, body.single-product ul.products li.product .price > .woocommerce-Price-amount::after { display: none !important; animation: none !important; } /* ----- 3. FORM CART (quantité + bouton) ----- */ .woocommerce div.product form.cart, .single-product form.cart { display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 0 0 28px 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } /* Stepper quantité */ .woocommerce div.product form.cart .quantity, .single-product form.cart .quantity { display: inline-flex !important; align-items: stretch; background: var(--2da-surface) !important; border: 1px solid var(--2da-border); border-radius: 14px; overflow: hidden; height: 56px; margin: 0 !important; padding: 0 !important; transition: border-color .2s, background .2s; } .woocommerce div.product form.cart .quantity:hover { border-color: rgba(255, 255, 255, 0.22); background: var(--2da-surface-hover) !important; } /* Boutons - / + */ .woocommerce .quantity .minus, .woocommerce .quantity .plus, .woocommerce div.product form.cart .quantity button { width: 44px !important; height: 100% !important; background: transparent !important; color: var(--2da-text) !important; border: none !important; border-radius: 0 !important; font-size: 1.25rem !important; font-weight: 600 !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; transition: background .15s, color .15s; box-shadow: none !important; transform: none !important; } .woocommerce .quantity .minus:hover, .woocommerce .quantity .plus:hover { background: var(--2da-accent-soft) !important; color: var(--2da-accent) !important; transform: none !important; } /* Champ input quantité */ .woocommerce div.product form.cart .quantity .qty, .woocommerce .quantity input.qty, .single-product .quantity input.qty { width: 56px !important; height: 100% !important; background: transparent !important; border: none !important; border-left: 1px solid var(--2da-border) !important; border-right: 1px solid var(--2da-border) !important; border-radius: 0 !important; color: var(--2da-text) !important; font-family: 'Inter', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; text-align: center !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; -moz-appearance: textfield; } .woocommerce .quantity input.qty::-webkit-outer-spin-button, .woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .woocommerce .quantity input.qty:focus { outline: none !important; background: rgba(255, 255, 255, 0.05) !important; } /* Bouton "Ajouter au panier" */ .woocommerce div.product form.cart .single_add_to_cart_button, .single-product form.cart .single_add_to_cart_button { flex: 1 1 auto; min-width: 200px; height: 56px; padding: 0 28px !important; background: var(--2da-cta) !important; background-image: linear-gradient(135deg, #1B4FBF 0%, #2563E6 100%) !important; color: #FFFFFF !important; border: none !important; border-radius: 14px !important; font-family: 'Syne', 'Inter', sans-serif !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.01em !important; text-transform: none !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 16px rgba(27, 79, 191, 0.35), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important; transition: transform .2s ease, box-shadow .25s ease, background .3s ease !important; position: relative; overflow: hidden; } /* Icône panier (SVG inline) */ .woocommerce div.product form.cart .single_add_to_cart_button::before { content: ""; width: 18px; height: 18px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; flex-shrink: 0; transition: transform .25s ease; } .woocommerce div.product form.cart .single_add_to_cart_button:hover { background-image: linear-gradient(135deg, #2563E6 0%, #1B4FBF 100%) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27, 79, 191, 0.5), 0 1px 0 rgba(255, 255, 255, 0.15) inset !important; } .woocommerce div.product form.cart .single_add_to_cart_button:hover::before { transform: translateX(-2px) scale(1.08); } .woocommerce div.product form.cart .single_add_to_cart_button:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(27, 79, 191, 0.4), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important; } .woocommerce div.product form.cart .single_add_to_cart_button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; } .woocommerce div.product form.cart .single_add_to_cart_button.loading { opacity: 0.85; cursor: wait; } .woocommerce div.product form.cart .single_add_to_cart_button.added::after { content: "✓"; margin-left: 8px; font-weight: 800; } /* Neutraliser styles Royal Elementor sur titre/prix */ .elementor-widget-woocommerce-product-title .product_title, .elementor-widget-woocommerce-product-price .price { background: transparent !important; padding: 0 !important; } /* Responsive mobile */ @media (max-width: 600px) { .woocommerce div.product form.cart { gap: 10px; } .woocommerce div.product form.cart .quantity { height: 52px; } .woocommerce div.product form.cart .single_add_to_cart_button { height: 52px; min-width: 0; font-size: 0.95rem !important; padding: 0 20px !important; } .woocommerce div.product .product_title::after { width: 40px; height: 2px; } } /* ═══════════════════════════════════════════════ WOOCOMMERCE — BADGES PROMO ════════════════════════════════════════════════ */ .woocommerce span.onsale { background-color: var(--2da-red) !important; color: #ffffff !important; border-radius: 50px !important; font-weight: 700 !important; font-size: .72rem !important; padding: 4px 10px !important; min-height: unset !important; min-width: unset !important; width: auto !important; height: auto !important; line-height: 1.4 !important; } /* ═══════════════════════════════════════════════ CAROUSEL CATÉGORIES — PILLS ════════════════════════════════════════════════ */ .da2-carousel-wrap { background: var(--2da-dark); padding: 18px 0; position: relative; overflow: hidden; } .da2-carousel-inner { display: flex; align-items: center; gap: 12px; padding: 4px 20px; overflow-x: auto; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .da2-carousel-inner::-webkit-scrollbar { display: none; } .da2-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); color: #ffffff !important; border: 1.5px solid rgba(255,255,255,.18); padding: 8px 18px; border-radius: 50px; font-size: .85rem; font-weight: 600; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: background .22s, border-color .22s, transform .18s; } .da2-pill:hover, .da2-pill.active { background: var(--2da-blue) !important; border-color: var(--2da-blue) !important; color: #ffffff !important; transform: translateY(-2px); } .da2-pill span.da2-emoji { font-size: 1rem; } .da2-arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(15,27,60,.7); color: #fff; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; } .da2-arrow-btn:hover { background: var(--2da-blue); border-color: var(--2da-blue); } .da2-arrow-btn.da2-left { left: 6px; } .da2-arrow-btn.da2-right { right: 6px; } /* ═══════════════════════════════════════════════ CHECKOUT — DARK CARD STYLE ════════════════════════════════════════════════ */ .page-template-elementor_canvas .woocommerce-checkout, body.woocommerce-checkout .woocommerce { max-width: 960px; margin: 0 auto; padding: 20px; } /* Sections de checkout */ .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-additional-fields { background: #141C35 !important; border-radius: var(--2da-radius) !important; padding: 28px 24px !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 8px 32px rgba(0,0,0,.28) !important; margin-bottom: 24px !important; } /* Titres checkout */ .woocommerce-checkout h3 { color: #ffffff !important; font-weight: 700 !important; border-bottom: 2px solid var(--2da-blue) !important; padding-bottom: 10px !important; margin-bottom: 20px !important; } /* Labels */ .woocommerce-checkout label { color: #A8B4D0 !important; font-size: .85rem !important; font-weight: 600 !important; letter-spacing: .03em !important; } /* Champs de saisie */ .woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout input[type="number"], .woocommerce-checkout input[type="password"], .woocommerce-checkout select, .woocommerce-checkout textarea { background: #1E2A4A !important; border: 1.5px solid rgba(255,255,255,.12) !important; color: #ffffff !important; border-radius: 8px !important; padding: 12px 14px !important; transition: border-color .2s !important; } .woocommerce-checkout input:focus, .woocommerce-checkout select:focus, .woocommerce-checkout textarea:focus { border-color: var(--2da-blue) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(27,79,191,.18) !important; } /* Texte récapitulatif commande */ .woocommerce-checkout #order_review .shop_table { color: #C8D0E8 !important; } .woocommerce-checkout #order_review .shop_table th, .woocommerce-checkout #order_review tfoot th { color: #ffffff !important; border-color: rgba(255,255,255,.1) !important; } .woocommerce-checkout #order_review .shop_table td, .woocommerce-checkout #order_review tfoot td { color: #C8D0E8 !important; border-color: rgba(255,255,255,.1) !important; } /* Total final */ .woocommerce-checkout #order_review tfoot .order-total .woocommerce-Price-amount { color: var(--2da-red) !important; font-size: 1.3rem !important; font-weight: 800 !important; } /* Bouton passer commande */ #place_order { background: var(--2da-red) !important; color: #fff !important; border: none !important; border-radius: 50px !important; padding: 15px 36px !important; font-size: 1rem !important; font-weight: 800 !important; letter-spacing: .04em !important; width: 100% !important; transition: background .25s, transform .2s !important; } #place_order:hover { background: var(--2da-blue) !important; transform: translateY(-2px) !important; } /* Méthodes de paiement */ .woocommerce-checkout .payment_methods { background: #1A2440 !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,.1) !important; padding: 16px !important; margin-bottom: 16px !important; } .woocommerce-checkout .payment_methods label { color: #ffffff !important; } .woocommerce-checkout .payment_box { background: rgba(255,255,255,.04) !important; border-radius: 8px !important; color: #A8B4D0 !important; } /* Mobile checkout */ @media (max-width: 640px) { .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout #order_review { padding: 18px 14px !important; } #place_order { font-size: .9rem !important; } } /* ═══════════════════════════════════════════════ PANIER — AJUSTEMENTS ════════════════════════════════════════════════ */ .woocommerce-cart .cart_item td { vertical-align: middle; } .woocommerce-cart .cart-collaterals { background: var(--2da-light); border-radius: var(--2da-radius); padding: 24px; } /* ═══════════════════════════════════════════════ FICHES PRODUIT — GALERIE ════════════════════════════════════════════════ */ .woocommerce div.product .woocommerce-product-gallery__image { border-radius: var(--2da-radius); overflow: hidden; } /* ═══════════════════════════════════════════════ NOTIFICATIONS WC ════════════════════════════════════════════════ */ .woocommerce-message { border-top-color: var(--2da-blue) !important; } .woocommerce-error { border-top-color: var(--2da-red) !important; } /* ═══════════════════════════════════════════════ ÉLÉMENTS ELEMENTOR — OVERRIDES ════════════════════════════════════════════════ */ /* Force fond blanc sur sections Elementor */ .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1200px; } /* Correction inline styles Elementor pour couleurs pills */ .da2-pill[style] { color: #ffffff !important; } /* ═══════════════════════════════════════════════ OVERRIDE CIBLÉ — ROYAL ELEMENTOR ADDONS (WPR) Page produit 2DA Informatique Cible les widgets wpr-product-* + containers par leurs IDs Elementor uniques ════════════════════════════════════════════════ */ /* ----- 1. CASSER LES FONDS ROUGES DES CONTAINERS PARENTS ----- */ /* Mobile : container titre #45c6cab (#EC0000), container prix #fdfd340 */ /* Desktop : container titre #cc9bc5b (#FA0000), container prix #649afc4 (red) */ body.single-product .elementor-element.elementor-element-45c6cab, body.single-product .elementor-element.elementor-element-cc9bc5b, body.single-product .elementor-element.elementor-element-fdfd340, body.single-product .elementor-element.elementor-element-649afc4, body.single-product .elementor-element.elementor-element-45c6cab:not(.elementor-motion-effects-element-type-background), body.single-product .elementor-element.elementor-element-cc9bc5b:not(.elementor-motion-effects-element-type-background), body.single-product .elementor-element.elementor-element-fdfd340:not(.elementor-motion-effects-element-type-background), body.single-product .elementor-element.elementor-element-649afc4:not(.elementor-motion-effects-element-type-background) { background-color: transparent !important; background-image: none !important; background: transparent !important; border-radius: 0 !important; border: none !important; } /* ----- 2. TITRE WPR : style propre, casse police "Paprika" desktop ----- */ body.single-product .elementor-widget-wpr-product-title, body.single-product .elementor-widget-wpr-product-title .elementor-widget-container { background: transparent !important; border: none !important; border-radius: 0 !important; } body.single-product .elementor-widget-wpr-product-title .wpr-product-title, body.single-product .elementor-widget.elementor-element-a9e95c6 .wpr-product-title, body.single-product .elementor-widget.elementor-element-db7bce7 .wpr-product-title { font-family: 'Syne', 'Inter', sans-serif !important; font-style: normal !important; font-weight: 700 !important; font-size: clamp(1.25rem, 2.4vw + 0.5rem, 2rem) !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; color: #FFFFFF !important; text-shadow: none !important; -webkit-text-stroke-color: transparent !important; -webkit-text-stroke-width: 0 !important; stroke: transparent !important; background: transparent !important; margin: 0 0 20px 0 !important; padding: 0 0 14px 0 !important; position: relative; } body.single-product .elementor-widget-wpr-product-title .wpr-product-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 48px; height: 3px; background: #E63329; border-radius: 2px; } /* ----- 3. PRIX WPR : style + effet SHINE sur le prix actif ----- */ body.single-product .elementor-widget-wpr-product-price, body.single-product .elementor-widget-wpr-product-price .elementor-widget-container, body.single-product .elementor-widget.elementor-element-2cdd8b2, body.single-product .elementor-widget.elementor-element-ee759d0 { background: transparent !important; border-radius: 0 !important; } body.single-product .elementor-widget-wpr-product-price .wpr-product-price, body.single-product .elementor-widget.elementor-element-2cdd8b2 .wpr-product-price, body.single-product .elementor-widget.elementor-element-e432aa8 .wpr-product-price, body.single-product .elementor-widget.elementor-element-ee759d0 .wpr-product-price { color: #FFFFFF !important; font-family: 'Syne', 'Inter', sans-serif !important; font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2rem) !important; font-weight: 800 !important; background: transparent !important; display: flex !important; align-items: baseline !important; flex-wrap: wrap; gap: 14px; margin: 0 0 24px 0 !important; } /* Prix actif (en promo) — couleur blanche + position relative pour le shine */ body.single-product .elementor-widget-wpr-product-price .wpr-product-price ins, body.single-product .elementor-widget-wpr-product-price .wpr-product-price > .woocommerce-Price-amount { color: #FFFFFF !important; background: transparent !important; text-decoration: none !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1 !important; position: relative !important; display: inline-block !important; overflow: hidden !important; isolation: isolate !important; order: 2; } body.single-product .elementor-widget-wpr-product-price .wpr-product-price ins .woocommerce-Price-amount { color: #FFFFFF !important; background: transparent !important; text-decoration: none !important; } /* Ancien prix barré (discret) */ body.single-product .elementor-widget-wpr-product-price .wpr-product-price del, body.single-product .elementor-widget-wpr-product-price .wpr-product-price del .woocommerce-Price-amount { color: rgba(255, 255, 255, 0.4) !important; background: transparent !important; font-size: 0.7em !important; font-weight: 500 !important; text-decoration: line-through !important; text-decoration-thickness: 1.5px !important; order: 1; margin: 0 !important; } /* EFFET SHINE — reflet lumineux qui glisse */ body.single-product .elementor-widget-wpr-product-price .wpr-product-price ins::after, body.single-product .elementor-widget-wpr-product-price .wpr-product-price > .woocommerce-Price-amount:not(del .woocommerce-Price-amount)::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 110deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 220, 215, 0.35) 52%, transparent 70% ) !important; transform: translateX(-110%); animation: da2-price-shine 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; pointer-events: none !important; mix-blend-mode: screen !important; z-index: 1 !important; } /* Pause au survol */ body.single-product .elementor-widget-wpr-product-price .wpr-product-price:hover ins::after, body.single-product .elementor-widget-wpr-product-price .wpr-product-price:hover > .woocommerce-Price-amount::after { animation-play-state: paused !important; } /* ----- 4. LAYOUT CART : forcer row pour aligner stepper + bouton ----- */ body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-product-add-to-cart .cart, body.single-product .elementor-widget.elementor-element-3992c43 .wpr-product-add-to-cart .cart, body.single-product .elementor-widget.elementor-element-bc28c9e .wpr-product-add-to-cart .cart { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 12px !important; text-align: left !important; margin: 0 !important; } /* Wrapper qty+icones : row, transparent, juste un séparateur du bouton */ body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-simple-qty-wrap, body.single-product .elementor-widget.elementor-element-3992c43 .wpr-simple-qty-wrap, body.single-product .elementor-widget.elementor-element-bc28c9e .wpr-simple-qty-wrap { display: inline-flex !important; flex-direction: row !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ----- 5. STEPPER : input à gauche [1], +/- à droite empilés ----- */ /* C'est le layout natif WPR de l'éditeur Elementor — on l'embrasse au lieu de lutter */ /* Le wrapper externe = boîte unifiée [1][+/-] */ body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-quantity-wrapper, body.single-product .elementor-widget.elementor-element-3992c43 .wpr-quantity-wrapper, body.single-product .elementor-widget.elementor-element-bc28c9e .wpr-quantity-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: stretch !important; background: rgba(255, 255, 255, 0.04) !important; background-color: rgba(255, 255, 255, 0.04) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 12px !important; overflow: hidden !important; height: 48px !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; } /* Le bloc .quantity (qui contient l'input) à gauche */ body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-quantity-wrapper > .quantity { display: inline-flex !important; align-items: stretch !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; overflow: visible !important; box-shadow: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } /* L'input "1" lui-même */ body.single-product .elementor-widget-wpr-product-add-to-cart .quantity .qty, body.single-product .elementor-widget.elementor-element-3992c43 .quantity .qty, body.single-product .elementor-widget.elementor-element-bc28c9e .quantity .qty { background: transparent !important; background-color: transparent !important; color: #FFFFFF !important; border: none !important; border-color: transparent !important; border-right: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 0 !important; width: 48px !important; height: 100% !important; font-family: 'Inter', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; text-align: center !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; -moz-appearance: textfield; } body.single-product .elementor-widget-wpr-product-add-to-cart .quantity .qty::-webkit-outer-spin-button, body.single-product .elementor-widget-wpr-product-add-to-cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.single-product .elementor-widget-wpr-product-add-to-cart .quantity .qty:focus { outline: none !important; background: rgba(255, 255, 255, 0.05) !important; } /* Le sous-wrapper qui empile + et - en colonne — on le garde en column car layout natif */ body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-add-to-cart-icons-wrap { display: inline-flex !important; flex-direction: column !important; align-items: stretch !important; height: 100% !important; width: 32px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } /* Les icônes + et - : transparentes, blanches, hover rouge */ body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-add-to-cart-icons-wrap i, body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-quantity-wrapper i, body.single-product .elementor-widget.elementor-element-3992c43 .wpr-quantity-wrapper i, body.single-product .elementor-widget.elementor-element-bc28c9e .wpr-quantity-wrapper i { background: transparent !important; background-color: transparent !important; color: #FFFFFF !important; border: none !important; border-color: transparent !important; border-radius: 0 !important; width: 100% !important; flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; font-size: 11px !important; cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background .15s, color .15s !important; margin: 0 !important; padding: 0 !important; } body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-add-to-cart-icons-wrap i:hover { background-color: rgba(230, 51, 41, 0.18) !important; color: #E63329 !important; } /* Séparateur fin entre + et - */ body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-add-to-cart-icons-wrap i.fa-plus, body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-add-to-cart-icons-wrap i.fas.fa-plus { border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; } /* Reset propre : ne plus utiliser display:contents (ça cassait l'alignement) */ /* Couvrir aussi la classe .quantity tout court (au cas où) */ body.single-product .elementor-widget-wpr-product-add-to-cart .quantity, body.single-product .wpr-product-add-to-cart .wpr-simple-qty-wrap .quantity, body.single-product form.cart .quantity { background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; overflow: visible !important; box-shadow: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: stretch !important; } /* ----- 6. BOUTON "AJOUTER AU PANIER" : s'étire pour remplir la ligne ----- */ body.single-product .elementor-widget-wpr-product-add-to-cart .single_add_to_cart_button, body.single-product .elementor-widget.elementor-element-3992c43 .single_add_to_cart_button, body.single-product .elementor-widget.elementor-element-bc28c9e .single_add_to_cart_button { background-color: #1B4FBF !important; background-image: linear-gradient(135deg, #1B4FBF 0%, #2563E6 100%) !important; color: #FFFFFF !important; border: none !important; border-color: transparent !important; border-radius: 14px !important; padding: 0 28px !important; width: auto !important; flex: 1 1 auto !important; min-width: 160px !important; height: 48px !important; font-family: 'Syne', 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.01em !important; cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; box-shadow: 0 4px 16px rgba(27, 79, 191, 0.35), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important; transition: transform .2s ease, box-shadow .25s ease, background .3s ease !important; margin: 0 !important; } /* Icône panier SVG inline */ body.single-product .elementor-widget-wpr-product-add-to-cart .single_add_to_cart_button::before { content: ""; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; flex-shrink: 0; transition: transform .25s ease; } body.single-product .elementor-widget-wpr-product-add-to-cart .single_add_to_cart_button:hover { background-image: linear-gradient(135deg, #2563E6 0%, #1B4FBF 100%) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27, 79, 191, 0.5), 0 1px 0 rgba(255, 255, 255, 0.15) inset !important; } body.single-product .elementor-widget-wpr-product-add-to-cart .single_add_to_cart_button:hover::before { transform: translateX(-2px) scale(1.08); } /* Force la couleur des icônes Font Awesome */ body.single-product .elementor-widget-wpr-product-add-to-cart .fa, body.single-product .elementor-widget-wpr-product-add-to-cart .fas { color: inherit !important; } /* ═══════════════════════════════════════════════ PRODUITS VARIABLES — Select Couleur/Taille + Effacer Override des dropdowns natifs WooCommerce sur fond sombre ════════════════════════════════════════════════ */ /* Tableau .variations : labels + selects */ body.single-product table.variations, body.single-product .variations_form table.variations { background: transparent !important; border: none !important; border-collapse: collapse !important; margin: 0 0 12px 0 !important; width: 100% !important; } body.single-product table.variations tbody, body.single-product table.variations tr, body.single-product table.variations td, body.single-product table.variations th { background: transparent !important; background-color: transparent !important; border: none !important; padding: 6px 0 !important; vertical-align: middle !important; } /* Label "Couleur :" / "Taille :" — blanc, lisible */ body.single-product table.variations label, body.single-product table.variations th label, body.single-product table.variations .label label { color: #FFFFFF !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; margin: 0 12px 0 0 !important; padding: 0 !important; background: transparent !important; text-transform: none !important; } /* Cellule "value" qui contient le select */ body.single-product table.variations td.value, body.single-product table.variations .value { background: transparent !important; padding: 0 !important; position: relative !important; } /* Le SELECT lui-même : style sombre élégant */ body.single-product table.variations select, body.single-product .variations_form select, body.single-product .reset_variations_wrap + select, body.single-product select[name^="attribute_"] { background: rgba(255, 255, 255, 0.04) !important; background-color: rgba(255, 255, 255, 0.04) !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px 14px !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 12px !important; height: 44px !important; min-height: 44px !important; padding: 0 36px 0 14px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; box-shadow: none !important; width: auto !important; min-width: 160px !important; max-width: 100% !important; margin: 0 !important; transition: border-color .2s, background .2s !important; } body.single-product table.variations select:hover, body.single-product .variations_form select:hover { border-color: rgba(255, 255, 255, 0.32) !important; background-color: rgba(255, 255, 255, 0.06) !important; } body.single-product table.variations select:focus { outline: none !important; border-color: #2563E6 !important; box-shadow: 0 0 0 3px rgba(37, 99, 230, 0.2) !important; } /* Options du dropdown : forcer fond sombre lisible (limité par OS) */ body.single-product table.variations select option, body.single-product .variations_form select option { background: #1A2440 !important; color: #FFFFFF !important; padding: 8px !important; } /* Bouton "Effacer" (reset_variations) : link discret blanc */ body.single-product .reset_variations, body.single-product a.reset_variations { background: transparent !important; background-color: transparent !important; color: rgba(255, 255, 255, 0.55) !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: underline !important; text-decoration-color: rgba(255, 255, 255, 0.25) !important; text-underline-offset: 3px !important; padding: 6px 10px !important; margin: 8px 0 0 0 !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; display: inline-block !important; transition: color .15s !important; } body.single-product .reset_variations:hover { color: #E63329 !important; text-decoration-color: #E63329 !important; background: transparent !important; } /* Bloc d'infos variation (prix variation, dispo, description) */ body.single-product .single_variation_wrap, body.single-product .woocommerce-variation { background: transparent !important; margin: 8px 0 12px 0 !important; padding: 0 !important; } body.single-product .woocommerce-variation-description, body.single-product .woocommerce-variation-availability, body.single-product .woocommerce-variation-price { color: rgba(255, 255, 255, 0.85) !important; background: transparent !important; margin: 4px 0 !important; } /* Si la variation montre un prix : style cohérent avec le prix principal */ body.single-product .woocommerce-variation-price .price, body.single-product .woocommerce-variation-price .amount { color: #FFFFFF !important; background: transparent !important; font-weight: 700 !important; } /* Bouton "Choisir les options" sur les pages liste/promo (couleur cohérente) */ body .add_to_cart_button.product_type_variable, body a.product_type_variable { background-image: linear-gradient(135deg, #1B4FBF 0%, #2563E6 100%) !important; } /* ----- 7. SPACING COMPACT : réduire les gros gaps Elementor ----- */ /* Réduit le margin-bottom de chaque widget Elementor du bloc fiche produit */ body.single-product .elementor-widget-wpr-product-breadcrumbs-pro:not(:last-child), body.single-product .elementor-widget-wpr-product-title:not(:last-child), body.single-product .elementor-widget-wpr-product-price:not(:last-child), body.single-product .elementor-widget-wpr-product-stock:not(:last-child), body.single-product .elementor-widget-wpr-product-add-to-cart:not(:last-child) { --kit-widget-spacing: 4px !important; margin-block-end: 4px !important; } /* Containers parents : padding interne minimal */ body.single-product .elementor-element.elementor-element-b81d39b, body.single-product .elementor-element.elementor-element-bc35f61, body.single-product .elementor-element.elementor-element-2dba5e9 { --padding-top: 8px !important; --padding-bottom: 8px !important; } /* Sous-containers internes : aussi réduits */ body.single-product .elementor-element.elementor-element-fdfd340, body.single-product .elementor-element.elementor-element-cfdf449, body.single-product .elementor-element.elementor-element-4e74707, body.single-product .elementor-element.elementor-element-2cb3931 { --padding-top: 4px !important; --padding-bottom: 4px !important; margin-block-end: 4px !important; } /* "3 en stock" : discret comme "In Stock" sur l'image 3 */ body.single-product .elementor-widget-wpr-product-stock .wpr-product-stock, body.single-product .elementor-widget-wpr-product-stock .in-stock { color: rgba(0, 255, 12, 0.85) !important; font-size: 13px !important; font-weight: 500 !important; opacity: 0.85; } /* Mobile : encore un peu plus serré + bouton sur ligne propre */ @media (max-width: 600px) { body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-product-add-to-cart .cart { gap: 10px !important; } body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-quantity-wrapper { height: 44px !important; } body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-quantity-wrapper i { width: 32px !important; } body.single-product .elementor-widget-wpr-product-add-to-cart .quantity .qty { width: 40px !important; font-size: 15px !important; } body.single-product .elementor-widget-wpr-product-add-to-cart .single_add_to_cart_button { height: 44px !important; font-size: 14px !important; padding: 0 16px !important; min-width: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════ FIX VARIANTES : Layout produits variables (taille / couleur) -------------------------------------------------------------- Problème corrigé : - La règle .cart en row+nowrap (ligne 832) était pensée pour les produits SIMPLES (stepper + bouton sur une ligne). Pour les produits VARIABLES, elle écrasait et côte à côte, faisant déborder le bouton "Ajouter au panier" (cut-off "Ajouter au pa..."), et ruinait l'expérience mobile. - Solution : quand form a la classe .variations_form, on force le conteneur en COLONNE et on stack proprement chaque bloc. -------------------------------------------------------------- Ajouté le 2026-05-06 — DA2 Child Theme ═════════════════════════════════════════════════════════════════════ */ /* ── 1) Form variable = COLONNE (override la règle row+nowrap WPR) ── */ body.single-product form.variations_form.cart, body.single-product .elementor-widget-wpr-product-add-to-cart form.variations_form.cart, body.single-product .wpr-product-add-to-cart form.variations_form.cart { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* ── 2) Table .variations : pleine largeur, label + select en row ── */ body.single-product form.variations_form.cart > table.variations { display: block !important; width: 100% !important; margin: 0 !important; border-collapse: collapse !important; } body.single-product form.variations_form.cart > table.variations tbody { display: block !important; width: 100% !important; } body.single-product form.variations_form.cart > table.variations tr { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 14px !important; width: 100% !important; padding: 0 !important; } body.single-product form.variations_form.cart > table.variations th.label, body.single-product form.variations_form.cart > table.variations .label { flex: 0 0 auto !important; display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; width: auto !important; } body.single-product form.variations_form.cart > table.variations td.value, body.single-product form.variations_form.cart > table.variations .value { flex: 1 1 200px !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px 12px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; width: auto !important; } body.single-product form.variations_form.cart > table.variations td.value select, body.single-product form.variations_form.cart > table.variations .value select { flex: 1 1 180px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } /* "Effacer" reset : aligné dans la même row, marge nulle */ body.single-product form.variations_form.cart .reset_variations, body.single-product form.variations_form.cart a.reset_variations { margin: 0 !important; padding: 4px 6px !important; flex: 0 0 auto !important; } /* ── 3) Single variation wrap : pleine largeur, contenu en colonne ── */ body.single-product form.variations_form.cart .single_variation_wrap { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } /* ── 4) Bloc info variation (prix variant + dispo) : barre claire ── */ body.single-product form.variations_form.cart .single_variation_wrap .single_variation, body.single-product form.variations_form.cart .woocommerce-variation.single_variation { width: 100% !important; display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px 16px !important; margin: 0 !important; padding: 12px 14px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; box-sizing: border-box !important; } /* Prix variation : style cohérent mais SANS l'animation shine (évite le doublon) */ body.single-product form.variations_form.cart .woocommerce-variation-price { margin: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; } body.single-product form.variations_form.cart .woocommerce-variation-price .price { display: inline-flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 8px !important; font-size: 1rem !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } body.single-product form.variations_form.cart .woocommerce-variation-price .price ins, body.single-product form.variations_form.cart .woocommerce-variation-price .price > .woocommerce-Price-amount { font-size: 1.3rem !important; font-weight: 800 !important; color: #FFFFFF !important; background: transparent !important; text-decoration: none !important; overflow: visible !important; isolation: auto !important; } /* Désactive l'animation shine sur le prix variation pour ne pas concurrencer le prix principal */ body.single-product form.variations_form.cart .woocommerce-variation-price .price ins::after, body.single-product form.variations_form.cart .woocommerce-variation-price .price > .woocommerce-Price-amount::after { display: none !important; animation: none !important; content: none !important; } body.single-product form.variations_form.cart .woocommerce-variation-price .price del, body.single-product form.variations_form.cart .woocommerce-variation-price .price del .woocommerce-Price-amount { font-size: 0.85rem !important; color: rgba(255, 255, 255, 0.5) !important; font-weight: 500 !important; } /* Disponibilité : compact à droite, vert discret */ body.single-product form.variations_form.cart .woocommerce-variation-availability, body.single-product form.variations_form.cart .single_variation .woocommerce-variation-availability, body.single-product form.variations_form.cart .single_variation p.stock { margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; color: rgba(126, 220, 153, 0.95) !important; font-size: 0.85rem !important; font-weight: 600 !important; background: transparent !important; } /* Description variation : sobre */ body.single-product form.variations_form.cart .woocommerce-variation-description { flex: 1 1 100% !important; color: rgba(255, 255, 255, 0.78) !important; font-size: 0.9rem !important; margin: 4px 0 0 0 !important; background: transparent !important; } /* ── 5) Cart row (qty + bouton) : flex row plein largeur, bouton flexible ── */ body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart, body.single-product form.variations_form.cart .variations_button { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* Stepper qty : largeur fixe, ne grossit pas */ body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity, body.single-product form.variations_form.cart .variations_button .quantity, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .wpr-simple-qty-wrap, body.single-product form.variations_form.cart .variations_button .wpr-simple-qty-wrap { flex: 0 0 auto !important; margin: 0 !important; min-width: 0 !important; } /* Bouton "Ajouter au panier" : prend l'espace restant, NE SE FAIT JAMAIS COUPER */ body.single-product form.variations_form.cart .single_add_to_cart_button, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button, body.single-product form.variations_form.cart .variations_button .single_add_to_cart_button { flex: 1 1 auto !important; min-width: 0 !important; /* CRITIQUE : permet au flex item de se réduire */ max-width: 100% !important; width: auto !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* État désactivé du bouton (avant sélection variation) — visuel cohérent */ body.single-product form.variations_form.cart .single_add_to_cart_button.disabled, body.single-product form.variations_form.cart .single_add_to_cart_button.wc-variation-selection-needed, body.single-product form.variations_form.cart .single_add_to_cart_button[disabled] { opacity: 0.55 !important; cursor: not-allowed !important; filter: grayscale(0.3); } body.single-product form.variations_form.cart .single_add_to_cart_button.disabled:hover, body.single-product form.variations_form.cart .single_add_to_cart_button[disabled]:hover { transform: none !important; } /* ── 6) Anti-débordement de la carte fiche-produit (PC + mobile) ── */ body.single-product .elementor-widget-wpr-product-add-to-cart, body.single-product .elementor-widget-wpr-product-add-to-cart .elementor-widget-container, body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-product-add-to-cart, body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-add-to-cart-content { max-width: 100% !important; min-width: 0 !important; overflow-x: clip !important; /* clip > hidden : pas de stacking context inutile */ } /* Le prix principal (range "3200 – 7000 CFA") : wrap propre, pas de débordement */ body.single-product .elementor-widget-wpr-product-price .wpr-product-price, body.single-product .woocommerce div.product .price { flex-wrap: wrap !important; overflow: visible !important; word-break: normal !important; } /* ── 7) MOBILE — sous 600px : tout s'empile verticalement ── */ @media (max-width: 600px) { /* Sélecteur variation : label au-dessus du dropdown sur mobile */ body.single-product form.variations_form.cart > table.variations tr { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; } body.single-product form.variations_form.cart > table.variations th.label, body.single-product form.variations_form.cart > table.variations .label, body.single-product form.variations_form.cart > table.variations td.value, body.single-product form.variations_form.cart > table.variations .value { width: 100% !important; flex: 1 1 100% !important; } body.single-product form.variations_form.cart > table.variations td.value select { width: 100% !important; flex: 1 1 100% !important; min-width: 0 !important; } /* "Effacer" en bas, plus discret sur mobile */ body.single-product form.variations_form.cart .reset_variations { align-self: flex-start !important; margin-top: 4px !important; } /* Bloc prix variation : padding réduit */ body.single-product form.variations_form.cart .single_variation_wrap .single_variation { padding: 10px 12px !important; gap: 4px 10px !important; } body.single-product form.variations_form.cart .woocommerce-variation-price .price ins, body.single-product form.variations_form.cart .woocommerce-variation-price .price > .woocommerce-Price-amount { font-size: 1.1rem !important; } body.single-product form.variations_form.cart .woocommerce-variation-price .price del, body.single-product form.variations_form.cart .woocommerce-variation-price .price del .woocommerce-Price-amount { font-size: 0.78rem !important; } /* Cart row mobile : reste en flex row mais le bouton se réduit */ body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart, body.single-product form.variations_form.cart .variations_button { gap: 10px !important; } body.single-product form.variations_form.cart .single_add_to_cart_button { font-size: 13px !important; padding: 0 16px !important; gap: 8px !important; letter-spacing: 0 !important; } /* Icône panier réduite pour gagner de la place */ body.single-product form.variations_form.cart .single_add_to_cart_button::before { width: 14px !important; height: 14px !important; } } /* ── 8) MOBILE TRÈS PETIT — sous 380px (vieux iPhone SE, petits androids) ── */ @media (max-width: 380px) { body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart, body.single-product form.variations_form.cart .variations_button { gap: 8px !important; } body.single-product form.variations_form.cart .single_add_to_cart_button { padding: 0 12px !important; font-size: 12.5px !important; } /* Stepper plus compact */ body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .qty, body.single-product form.variations_form.cart .variations_button .quantity .qty { width: 40px !important; } } /* ════════════════════════════════════════════════════════════════════ FIN FIX VARIANTES ═════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ PREMIUM VARIANTS UI — Carte dark-glass cohérente -------------------------------------------------------------- Issue: bouton bleu se confondait avec le fond marine, éléments dispersés sans hiérarchie visuelle, sensation pas premium. -------------------------------------------------------------- Solution: - Wrapper form en carte glass (subtle gradient + border + shadow) - Toutes les surfaces (dropdown, stepper) en dark-glass cohérent - Bandeau prix variant : accent bleu marque sur la gauche - Stock pill avec dot pulsant (premium feel) - CTA bouton : gradient électrique + halo + inner light highlight - "Effacer" : link minimaliste, plus de barre blanche -------------------------------------------------------------- Ajouté le 2026-05-06 v2 — DA2 Child Theme ═════════════════════════════════════════════════════════════════════ */ /* ── 1) WRAPPER CARTE PREMIUM ─────────────────────────────────────── */ body.single-product form.variations_form.cart { background: linear-gradient(165deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.020) 45%, rgba(11, 20, 38, 0.32) 100% ), rgba(11, 20, 38, 0.45) !important; -webkit-backdrop-filter: blur(10px) saturate(115%) !important; backdrop-filter: blur(10px) saturate(115%) !important; border: 1px solid rgba(255, 255, 255, 0.085) !important; border-radius: 18px !important; padding: 22px !important; position: relative !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.06) inset !important; isolation: isolate; overflow: visible !important; } /* Trait rouge fin en haut (accent marque, signature 2DA) */ body.single-product form.variations_form.cart::before { content: ''; position: absolute; top: -1px; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(230, 51, 41, 0.55) 50%, transparent 100% ); pointer-events: none; z-index: 1; } /* ── 2) FORCE TRANSPARENCE sur table.variations (tue les fonds blancs hérités) ── */ body.single-product form.variations_form.cart table.variations, body.single-product form.variations_form.cart table.variations tbody, body.single-product form.variations_form.cart table.variations tr, body.single-product form.variations_form.cart table.variations th, body.single-product form.variations_form.cart table.variations td, body.single-product form.variations_form.cart table.variations .label, body.single-product form.variations_form.cart table.variations .value { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: none !important; } /* ── 3) LABEL "Choix taille" — typographie premium ─────────────────── */ body.single-product form.variations_form.cart table.variations label, body.single-product form.variations_form.cart table.variations th label, body.single-product form.variations_form.cart table.variations .label label { color: rgba(255, 255, 255, 0.92) !important; font-family: 'Syne', 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; margin: 0 !important; padding: 0 !important; background: transparent !important; opacity: 0.85; } /* ── 4) DROPDOWN — dark glass cohérent (override les selectors plus haut) ── */ body.single-product form.variations_form.cart select, body.single-product form.variations_form.cart table.variations select, body.single-product form.variations_form.cart .variations_form select, body.single-product form.variations_form.cart select[name^="attribute_"] { background: linear-gradient(180deg, rgba(11, 20, 38, 0.62) 0%, rgba(11, 20, 38, 0.42) 100% ), url("data:image/svg+xml;utf8,") !important; background-color: rgba(11, 20, 38, 0.55) !important; background-repeat: no-repeat, no-repeat !important; background-position: 0 0, right 14px center !important; background-size: 100% 100%, 13px 13px !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 12px !important; height: 48px !important; min-height: 48px !important; padding: 0 40px 0 16px !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 500 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 12px rgba(0, 0, 0, 0.18) !important; transition: border-color .25s, box-shadow .25s, background-color .25s !important; } body.single-product form.variations_form.cart select:hover { border-color: rgba(255, 255, 255, 0.18) !important; background-color: rgba(11, 20, 38, 0.7) !important; } body.single-product form.variations_form.cart select:focus { outline: none !important; border-color: #2563E6 !important; box-shadow: 0 0 0 3px rgba(37, 99, 230, 0.18), 0 4px 12px rgba(0, 0, 0, 0.2) !important; } /* Options dropdown */ body.single-product form.variations_form.cart select option { background: #0F1A30 !important; color: #FFFFFF !important; padding: 10px !important; font-weight: 500 !important; } /* ── 5) "EFFACER" link minimaliste (plus de barre pleine largeur) ──── */ body.single-product form.variations_form.cart .reset_variations, body.single-product form.variations_form.cart a.reset_variations { background: transparent !important; background-color: transparent !important; background-image: none !important; color: rgba(255, 255, 255, 0.45) !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; text-decoration: underline !important; text-decoration-color: rgba(255, 255, 255, 0.2) !important; text-underline-offset: 3px !important; padding: 4px 6px !important; margin: 0 !important; border: none !important; border-radius: 4px !important; box-shadow: none !important; width: auto !important; flex: 0 0 auto !important; align-self: flex-start !important; display: inline-block !important; transition: color .15s, text-decoration-color .15s !important; } body.single-product form.variations_form.cart .reset_variations:hover { color: #E63329 !important; text-decoration-color: #E63329 !important; background: transparent !important; } /* ── 6) BANDEAU PRIX VARIANT — info card avec accent bleu marque ──── */ body.single-product form.variations_form.cart .single_variation_wrap .single_variation, body.single-product form.variations_form.cart .woocommerce-variation, body.single-product form.variations_form.cart .woocommerce-variation.single_variation, body.single-product form.variations_form.cart div.single_variation { background: linear-gradient(135deg, rgba(37, 99, 230, 0.12) 0%, rgba(37, 99, 230, 0.03) 60%, rgba(11, 20, 38, 0.15) 100% ) !important; background-color: rgba(37, 99, 230, 0.04) !important; border: 1px solid rgba(37, 99, 230, 0.22) !important; border-left: 3px solid #2563E6 !important; border-radius: 12px !important; padding: 14px 16px !important; margin: 0 !important; box-shadow: 0 4px 16px rgba(37, 99, 230, 0.06), 0 1px 0 rgba(255, 255, 255, 0.05) inset !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 16px !important; } /* Prix variant : prominent, typographie Syne */ body.single-product form.variations_form.cart .woocommerce-variation-price { margin: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; background: transparent !important; } body.single-product form.variations_form.cart .woocommerce-variation-price .price { background: transparent !important; margin: 0 !important; padding: 0 !important; } body.single-product form.variations_form.cart .woocommerce-variation-price .price ins, body.single-product form.variations_form.cart .woocommerce-variation-price .price ins .woocommerce-Price-amount, body.single-product form.variations_form.cart .woocommerce-variation-price .price > .woocommerce-Price-amount, body.single-product form.variations_form.cart .woocommerce-variation-price .price > bdi { font-family: 'Syne', 'Inter', sans-serif !important; font-size: 1.5rem !important; font-weight: 800 !important; color: #FFFFFF !important; background: transparent !important; text-decoration: none !important; letter-spacing: -0.01em !important; line-height: 1.1 !important; } /* Prix barré : subtle */ body.single-product form.variations_form.cart .woocommerce-variation-price .price del, body.single-product form.variations_form.cart .woocommerce-variation-price .price del .woocommerce-Price-amount, body.single-product form.variations_form.cart .woocommerce-variation-price .price del bdi { color: rgba(255, 255, 255, 0.4) !important; font-size: 0.92rem !important; font-weight: 500 !important; text-decoration: line-through !important; text-decoration-color: rgba(255, 255, 255, 0.4) !important; margin-right: 6px !important; } /* Symbole CFA refined */ body.single-product form.variations_form.cart .woocommerce-variation-price .woocommerce-Price-currencySymbol { font-size: 0.6em !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.7) !important; margin-left: 4px !important; vertical-align: 0.25em !important; } /* Stock pill premium avec dot pulsant */ body.single-product form.variations_form.cart .woocommerce-variation-availability, body.single-product form.variations_form.cart .single_variation .woocommerce-variation-availability, body.single-product form.variations_form.cart .single_variation p.stock, body.single-product form.variations_form.cart .woocommerce-variation-availability p { color: #6BD98C !important; background: rgba(107, 217, 140, 0.10) !important; border: 1px solid rgba(107, 217, 140, 0.25) !important; border-radius: 999px !important; padding: 5px 12px 5px 10px !important; font-family: 'Inter', sans-serif !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; flex: 0 0 auto !important; line-height: 1 !important; } body.single-product form.variations_form.cart .woocommerce-variation-availability::before, body.single-product form.variations_form.cart .single_variation p.stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6BD98C; box-shadow: 0 0 6px rgba(107, 217, 140, 0.6); animation: da2-stock-pulse 2.2s ease-in-out infinite; flex-shrink: 0; } @keyframes da2-stock-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } @media (prefers-reduced-motion: reduce) { body.single-product form.variations_form.cart .woocommerce-variation-availability::before, body.single-product form.variations_form.cart .single_variation p.stock::before { animation: none !important; } } /* Description variation : sobre */ body.single-product form.variations_form.cart .woocommerce-variation-description { flex: 1 1 100% !important; color: rgba(255, 255, 255, 0.78) !important; font-size: 0.88rem !important; margin: 4px 0 0 0 !important; background: transparent !important; } /* ── 7) STEPPER QUANTITÉ — dark glass cohérent (override le blanc) ── */ body.single-product form.variations_form.cart .quantity, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity, body.single-product form.variations_form.cart .variations_button .quantity { background: linear-gradient(180deg, rgba(11, 20, 38, 0.62) 0%, rgba(11, 20, 38, 0.42) 100% ) !important; background-color: rgba(11, 20, 38, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 12px !important; overflow: hidden !important; height: 48px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 12px rgba(0, 0, 0, 0.18) !important; display: inline-flex !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; } body.single-product form.variations_form.cart .quantity input.qty, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity input.qty { background: transparent !important; background-color: transparent !important; color: #FFFFFF !important; border: none !important; border-right: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 0 !important; width: 48px !important; height: 100% !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; text-align: center !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; -moz-appearance: textfield; } body.single-product form.variations_form.cart .quantity input.qty:focus { outline: none !important; background: rgba(37, 99, 230, 0.08) !important; } body.single-product form.variations_form.cart .quantity .minus, body.single-product form.variations_form.cart .quantity .plus { background: transparent !important; background-color: transparent !important; color: rgba(255, 255, 255, 0.85) !important; border: none !important; border-radius: 0 !important; width: 36px !important; height: 100% !important; font-size: 1.05rem !important; font-weight: 600 !important; cursor: pointer !important; transition: background .15s, color .15s !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } body.single-product form.variations_form.cart .quantity .minus:hover, body.single-product form.variations_form.cart .quantity .plus:hover { background: rgba(37, 99, 230, 0.20) !important; color: #FFFFFF !important; transform: none !important; } /* ── 8) BOUTON CTA — IDENTIQUE au produit simple (cohérence brand) ── Stratégie : copie exacte du style simple-product (#1B4FBF -> #2563E6) + icône panier ::before. Spécificité élevée pour battre les overrides Royal Elementor / inline-styles qui rendaient le bouton violet. */ body.single-product form.variations_form.cart .single_add_to_cart_button, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button, body.single-product form.variations_form.cart .variations_button .single_add_to_cart_button, body.single-product .elementor-widget-wpr-product-add-to-cart form.variations_form.cart .single_add_to_cart_button, body.single-product .wpr-product-add-to-cart form.variations_form.cart .single_add_to_cart_button { background-color: #1B4FBF !important; background-image: linear-gradient(135deg, #1B4FBF 0%, #2563E6 100%) !important; background: linear-gradient(135deg, #1B4FBF 0%, #2563E6 100%) !important; color: #FFFFFF !important; border: none !important; border-color: transparent !important; border-radius: 14px !important; height: 48px !important; padding: 0 28px !important; font-family: 'Syne', 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.01em !important; text-transform: none !important; text-shadow: none !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; box-shadow: 0 4px 16px rgba(27, 79, 191, 0.35), 0 1px 0 rgba(255, 255, 255, 0.10) inset !important; transition: transform .2s ease, box-shadow .25s ease, background .3s ease !important; margin: 0 !important; } /* Icône panier SVG inline (identique au bouton simple-product) */ body.single-product form.variations_form.cart .single_add_to_cart_button::before, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button::before, body.single-product form.variations_form.cart .variations_button .single_add_to_cart_button::before { content: "" !important; width: 16px !important; height: 16px !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-size: contain !important; flex-shrink: 0 !important; transition: transform .25s ease !important; display: inline-block !important; } /* Hover : gradient inversé + lift (identique simple) */ body.single-product form.variations_form.cart .single_add_to_cart_button:hover { background-image: linear-gradient(135deg, #2563E6 0%, #1B4FBF 100%) !important; background: linear-gradient(135deg, #2563E6 0%, #1B4FBF 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(27, 79, 191, 0.5), 0 1px 0 rgba(255, 255, 255, 0.15) inset !important; } body.single-product form.variations_form.cart .single_add_to_cart_button:hover::before { transform: translateX(-2px) scale(1.08) !important; } body.single-product form.variations_form.cart .single_add_to_cart_button:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(27, 79, 191, 0.4), 0 1px 0 rgba(255, 255, 255, 0.10) inset !important; } body.single-product form.variations_form.cart .single_add_to_cart_button:focus-visible { outline: 2px solid #FFFFFF !important; outline-offset: 3px !important; } /* État disabled (avant sélection variant) */ body.single-product form.variations_form.cart .single_add_to_cart_button.disabled, body.single-product form.variations_form.cart .single_add_to_cart_button.wc-variation-selection-needed, body.single-product form.variations_form.cart .single_add_to_cart_button[disabled] { opacity: 0.55 !important; cursor: not-allowed !important; filter: saturate(0.7) !important; } body.single-product form.variations_form.cart .single_add_to_cart_button.disabled:hover, body.single-product form.variations_form.cart .single_add_to_cart_button[disabled]:hover { transform: none !important; background-image: linear-gradient(135deg, #1B4FBF 0%, #2563E6 100%) !important; background: linear-gradient(135deg, #1B4FBF 0%, #2563E6 100%) !important; } /* ── 9) MOBILE — adjustments pour la carte premium ──────────────────── */ @media (max-width: 600px) { body.single-product form.variations_form.cart { padding: 18px !important; border-radius: 16px !important; } body.single-product form.variations_form.cart::before { left: 18px; right: 18px; } body.single-product form.variations_form.cart .single_variation_wrap .single_variation, body.single-product form.variations_form.cart .woocommerce-variation { padding: 12px 14px !important; gap: 6px 12px !important; } body.single-product form.variations_form.cart .woocommerce-variation-price .price ins, body.single-product form.variations_form.cart .woocommerce-variation-price .price > .woocommerce-Price-amount { font-size: 1.3rem !important; } body.single-product form.variations_form.cart .single_add_to_cart_button { font-size: 13px !important; padding: 0 18px !important; letter-spacing: 0.02em !important; } body.single-product form.variations_form.cart .quantity .minus, body.single-product form.variations_form.cart .quantity .plus { width: 32px !important; } body.single-product form.variations_form.cart .quantity input.qty { width: 42px !important; } } /* ════════════════════════════════════════════════════════════════════ FIN PREMIUM VARIANTS UI ═════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ ENFORCE LAYOUT v3 — Bat la spécificité Royal Elementor (row-layout) -------------------------------------------------------------- Pourquoi ce bloc : - La règle ligne 832-840 cible `.elementor-element-3992c43 .cart` avec `flex-direction: row !important` (spécificité 0,5,1 si l'ID-elementor match). Ma règle `form.variations_form.cart` ne fait que 0,4,2 → elle perdait la cascade pour les produits VARIABLES, d'où la fiche coupée en 2 colonnes (table à gauche, single_variation à droite), d'où le bouton "Ajouter au pan..." tronqué. - Solution : sélecteurs ULTRA-spécifiques avec :not(#never) pour forcer 1,4,2+ et battre n'importe quelle règle existante. - Bonus : double-dot dans la pill stock corrigé (un seul ::before). ═════════════════════════════════════════════════════════════════════ */ /* ── 1) FORCE COLUMN sur le form variant — gagne contre Royal Elementor ── */ body.single-product .elementor-widget-wpr-product-add-to-cart form.variations_form.cart, body.single-product .elementor-widget.elementor-element-3992c43 form.variations_form.cart, body.single-product .elementor-widget.elementor-element-bc28c9e form.variations_form.cart, body.single-product form.variations_form.cart:not(#never-matches) { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; grid-template-columns: 1fr !important; /* annule un éventuel grid parent */ grid-auto-flow: row !important; width: 100% !important; max-width: 100% !important; align-items: stretch !important; gap: 14px !important; } /* ── 2) Tous les enfants directs du form en pleine largeur ── */ body.single-product form.variations_form.cart:not(#never) > table.variations, body.single-product form.variations_form.cart:not(#never) > .single_variation_wrap { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; grid-column: 1 / -1 !important; /* si parent a un grid */ min-width: 0 !important; } /* ── 3) Le single_variation_wrap stack lui aussi en colonne ── */ body.single-product form.variations_form.cart:not(#never) .single_variation_wrap { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 12px !important; } /* ── 4) La row qty+bouton : pleine largeur, row direction, no wrap ── */ body.single-product form.variations_form.cart:not(#never) .woocommerce-variation-add-to-cart, body.single-product form.variations_form.cart:not(#never) .variations_button { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; flex: 1 1 100% !important; gap: 12px !important; } /* ── 5) BOUTON : plus de truncate ellipsis. Min-width pour garantir que "Ajouter au panier" tient toujours en entier ── */ body.single-product form.variations_form.cart:not(#never) .single_add_to_cart_button { flex: 1 1 auto !important; min-width: 140px !important; /* garantit la place du texte */ width: auto !important; white-space: nowrap !important; overflow: visible !important; /* plus de coupe */ text-overflow: clip !important; /* plus d'ellipsis */ } /* ── 6) FIX DOUBLE-DOT pill stock — un seul ::before, sur le wrapper externe ── */ /* Wrapper externe = pill complète avec dot pulsant */ body.single-product form.variations_form.cart .woocommerce-variation-availability { position: relative; } /* Élément interne

: juste du texte, pas de pill, pas de dot */ body.single-product form.variations_form.cart .woocommerce-variation-availability p, body.single-product form.variations_form.cart .woocommerce-variation-availability p.stock, body.single-product form.variations_form.cart .woocommerce-variation-availability .stock { background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; color: inherit !important; font-size: inherit !important; font-weight: inherit !important; text-transform: inherit !important; letter-spacing: inherit !important; display: inline !important; line-height: inherit !important; } /* Pas de ::before sur le

interne */ body.single-product form.variations_form.cart .woocommerce-variation-availability p::before, body.single-product form.variations_form.cart .woocommerce-variation-availability p.stock::before, body.single-product form.variations_form.cart .woocommerce-variation-availability .stock::before { content: none !important; display: none !important; background: none !important; width: 0 !important; height: 0 !important; } /* ── 7) MOBILE — confirme que tout reste cohérent ── */ @media (max-width: 600px) { body.single-product form.variations_form.cart:not(#never) .single_add_to_cart_button { min-width: 0 !important; /* sur mobile, le bouton peut se réduire */ font-size: 13px !important; padding: 0 16px !important; } } /* ════════════════════════════════════════════════════════════════════ FIN ENFORCE LAYOUT v3 ═════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ FIX BOUTON "AJOUTER AU PANIER" — Anti-débordement v2 -------------------------------------------------------------- v1 : insuffisant — bouton dépassait toujours sa colonne. v2 : approche radicale — bouton à largeur AUTO (pas d'étirement), flex-wrap activé en secours, et confinement à TOUS les niveaux de la chaîne Elementor (column → widget → container → form). PURE ADDITIF — aucune règle existante touchée. Ajouté le 2026-05-12 — DA2 Child Theme ═════════════════════════════════════════════════════════════════════ */ /* ── 1) Confiner TOUTE la chaîne Elementor du widget add-to-cart ── */ body.single-product .elementor-widget-wpr-product-add-to-cart, body.single-product .elementor-widget-wpr-product-add-to-cart .elementor-widget-container, body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-product-add-to-cart { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; overflow: hidden !important; } /* ── 2) Le formulaire .cart : wrap autorisé en secours ── */ body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-product-add-to-cart .cart, body.single-product .elementor-widget.elementor-element-3992c43 .wpr-product-add-to-cart .cart, body.single-product .elementor-widget.elementor-element-bc28c9e .wpr-product-add-to-cart .cart { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; flex-wrap: wrap !important; /* secours : bouton passe sous si pas d'espace */ overflow: hidden !important; } /* ── 3) BOUTON : largeur AUTO (plus d'étirement infini) ── */ body.single-product .elementor-widget-wpr-product-add-to-cart .single_add_to_cart_button, body.single-product .elementor-widget.elementor-element-3992c43 .single_add_to_cart_button, body.single-product .elementor-widget.elementor-element-bc28c9e .single_add_to_cart_button { flex: 0 1 auto !important; /* ne grandit pas, peut rétrécir */ width: auto !important; min-width: 0 !important; max-width: 100% !important; padding: 0 22px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } /* ── 4) Stepper qty : taille fixe, jamais rétréci ── */ body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-simple-qty-wrap, body.single-product .elementor-widget.elementor-element-3992c43 .wpr-simple-qty-wrap, body.single-product .elementor-widget.elementor-element-bc28c9e .wpr-simple-qty-wrap { flex: 0 0 auto !important; } /* ── 5) Tablette : padding réduit ── */ @media (max-width: 900px) and (min-width: 601px) { body.single-product .elementor-widget-wpr-product-add-to-cart .single_add_to_cart_button { padding: 0 16px !important; font-size: 14px !important; } } /* ── 6) Si wrap déclenché (très étroit), bouton pleine largeur ── */ @media (max-width: 480px) { body.single-product .elementor-widget-wpr-product-add-to-cart .wpr-product-add-to-cart .cart { gap: 8px !important; } body.single-product .elementor-widget-wpr-product-add-to-cart .single_add_to_cart_button { flex: 1 1 100% !important; width: 100% !important; } } /* ════════════════════════════════════════════════════════════════════ FIN FIX BOUTON AJOUTER AU PANIER v2 ═════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ FIX TAILLE DU TITRE PRODUIT (page single-product) -------------------------------------------------------------- Demande DRO : titre trop grand sur mobile, le réduire. v1.2.8 : clamp(1.25rem, 2.4vw + 0.5rem, 2rem) = 20-32px v1.2.9 : clamp(1rem, 1.6vw + 0.3rem, 1.5rem) = 16-24px Le souligné rouge (::after) reste inchangé. PURE ADDITIF — ne casse aucune règle existante. Ajouté le 2026-05-13 — DA2 Child Theme ═════════════════════════════════════════════════════════════════════ */ /* ── Desktop & tablette : taille modérée ── */ body.single-product .elementor-widget-wpr-product-title .wpr-product-title, body.single-product .elementor-widget.elementor-element-a9e95c6 .wpr-product-title, body.single-product .elementor-widget.elementor-element-db7bce7 .wpr-product-title, body.single-product .product_title, body.single-product .elementor-widget-woocommerce-product-title .product_title { font-size: clamp(1rem, 1.6vw + 0.3rem, 1.5rem) !important; line-height: 1.3 !important; letter-spacing: -0.005em !important; margin: 0 0 14px 0 !important; padding: 0 0 10px 0 !important; } /* ── Mobile (≤768px) : encore plus compact ── */ @media (max-width: 768px) { body.single-product .elementor-widget-wpr-product-title .wpr-product-title, body.single-product .elementor-widget.elementor-element-a9e95c6 .wpr-product-title, body.single-product .elementor-widget.elementor-element-db7bce7 .wpr-product-title, body.single-product .product_title, body.single-product .elementor-widget-woocommerce-product-title .product_title { font-size: 16px !important; line-height: 1.3 !important; margin: 0 0 12px 0 !important; padding: 0 0 8px 0 !important; } /* Souligné rouge : un peu plus petit pour rester proportionnel */ body.single-product .elementor-widget-wpr-product-title .wpr-product-title::after { width: 36px !important; height: 2px !important; } } /* ── Très petit mobile (≤380px) : encore réduit ── */ @media (max-width: 380px) { body.single-product .elementor-widget-wpr-product-title .wpr-product-title, body.single-product .elementor-widget.elementor-element-a9e95c6 .wpr-product-title, body.single-product .elementor-widget.elementor-element-db7bce7 .wpr-product-title, body.single-product .product_title { font-size: 15px !important; } } /* ════════════════════════════════════════════════════════════════════ FIN FIX TAILLE TITRE PRODUIT ═════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ v1.3.5 — GARDE-FOU : TITRE FILTRE "Categories" ROGNÉ (pages archive) -------------------------------------------------------------------- Symptôme : sur catégorie/tag/boutique, la colonne Elementor du widget WPR Product Filters Pro (#7541690 desktop / #9409a60 mobile) démarre au bord gauche du viewport SANS padding → le titre blanc "Categories" est coupé ("egories" visible). Correctif réel = ajouter du padding à la colonne dans l'éditeur Elementor. Ici : garde-fou défensif non destructif (padding gauche sur le conteneur interne du widget uniquement, scopé aux 2 IDs + aux body classes archive). N'affecte pas la grille produits. ═════════════════════════════════════════════════════════════════════ */ body.tax-product_cat .elementor-element-7541690 > .elementor-widget-container, body.tax-product_cat .elementor-element-9409a60 > .elementor-widget-container, body.tax-product_tag .elementor-element-7541690 > .elementor-widget-container, body.tax-product_tag .elementor-element-9409a60 > .elementor-widget-container, body.post-type-archive-product .elementor-element-7541690 > .elementor-widget-container, body.post-type-archive-product .elementor-element-9409a60 > .elementor-widget-container { padding-left: 24px !important; padding-right: 16px !important; box-sizing: border-box !important; } /* Sécurité : le titre et la liste ne débordent jamais à gauche */ body.tax-product_cat .elementor-element-7541690 .wpr-product-filter-title, body.tax-product_cat .elementor-element-9409a60 .wpr-product-filter-title, body.tax-product_tag .elementor-element-7541690 .wpr-product-filter-title, body.tax-product_tag .elementor-element-9409a60 .wpr-product-filter-title, body.post-type-archive-product .elementor-element-7541690 .wpr-product-filter-title, body.post-type-archive-product .elementor-element-9409a60 .wpr-product-filter-title, body.tax-product_cat .elementor-element-7541690 .wpr-product-filter-tax-wrap, body.tax-product_cat .elementor-element-9409a60 .wpr-product-filter-tax-wrap, body.tax-product_tag .elementor-element-7541690 .wpr-product-filter-tax-wrap, body.tax-product_tag .elementor-element-9409a60 .wpr-product-filter-tax-wrap, body.post-type-archive-product .elementor-element-7541690 .wpr-product-filter-tax-wrap, body.post-type-archive-product .elementor-element-9409a60 .wpr-product-filter-tax-wrap { margin-left: 0 !important; text-indent: 0 !important; overflow-wrap: break-word !important; } /* ════════════════════════════════════════════════════════════════════ FIN GARDE-FOU TITRE FILTRE v1.3.5 ═════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ v1.3.6 — FIX : TITRE PRODUIT BLANC SUR BLANC (grille catégorie) -------------------------------------------------------------------- Cause : le widget WPR Woo Grid #506a540 a sa couleur de titre réglée sur #FFFFFF dans l'éditeur Elementor → invisible sur les cartes blanches des pages archive (catégorie/tag/boutique). Les 3 autres grilles du site utilisent #222/#333. Correctif réel = changer la couleur du titre dans Elementor (widget #506a540 → Style → Titre → Couleur). Ici : override défensif aligné sur les autres grilles, scopé au widget + body classes archive. ═════════════════════════════════════════════════════════════════════ */ body.tax-product_cat .elementor-element-506a540 .wpr-grid-item-title .inner-block a, body.tax-product_tag .elementor-element-506a540 .wpr-grid-item-title .inner-block a, body.post-type-archive-product .elementor-element-506a540 .wpr-grid-item-title .inner-block a, body.tax-product_cat .elementor-element-506a540 .wpr-grid-item-title a, body.tax-product_tag .elementor-element-506a540 .wpr-grid-item-title a, body.post-type-archive-product .elementor-element-506a540 .wpr-grid-item-title a { color: #222222 !important; } /* Survol : bleu de marque 2DA (affordance lien + cohérence charte) */ body.tax-product_cat .elementor-element-506a540 .wpr-grid-item-title .inner-block a:hover, body.tax-product_tag .elementor-element-506a540 .wpr-grid-item-title .inner-block a:hover, body.post-type-archive-product .elementor-element-506a540 .wpr-grid-item-title .inner-block a:hover { color: #024D99 !important; } /* ════════════════════════════════════════════════════════════════════ FIN FIX TITRE PRODUIT BLANC v1.3.6 ═════════════════════════════════════════════════════════════════════ */