/* 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.8.21 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-gold: #D4AF37; /* v1.5.7 : accent signature "authentique/garanti" */ --2da-gold-deep:#A8841F; /* v1.5.7 : pour dégradés/hover sur l'or */ --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; } /* ═══════════════════════════════════════════════ 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 ═════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ WEBVIEW FB/IG — v1.0 (complément de la section 17 de functions.php) Toutes les règles sont scopées sous html.da2-fb-inapp : la classe est posée par JS côté client (fiable avec LiteSpeed full-page cache, contrairement à body.da2-fb-inapp posée en PHP). Ces règles sont donc servies à tout le monde mais n'ont AUCUN effet hors webview. ═════════════════════════════════════════════════════════════════════ */ /* ── 1. Anti "font boosting" Android WebView ── Le webview FB sur Android gonfle arbitrairement certains textes (titres produits, prix) : on verrouille la taille déclarée. */ html.da2-fb-inapp { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ── 2. Barre sticky "Ajouter au panier" ── a) La barre d'outils du webview FB (X, flèches, menu) recouvre le bas de l'écran : on ajoute la zone de sécurité sous la barre. b) backdrop-filter très coûteux dans le webview (déjà neutralisé par la section 16 via body.da2-fb-inapp, redoublé ici via la classe html posée en JS, fiable même en cache). */ html.da2-fb-inapp .wl-sticky-add-to-cart, html.da2-fb-inapp .woolentor-sticky-add-to-cart, html.da2-fb-inapp .woolentor_sticky_bar, html.da2-fb-inapp .wpr-product-add-to-cart-sticky { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 -4px 16px rgba(0, 0, 0, .35) !important; } /* ── 3. Fond fixe de la fiche produit ── position:fixed + gradient = repaint à chaque frame de scroll dans le webview. translateZ(0) promeut la couche sur le GPU : le fond est composité une seule fois. Zéro impact visuel. */ html.da2-fb-inapp body.single-product::before { transform: translateZ(0); will-change: transform; } /* ── 4. Effets hover inutiles au tactile ── Le translateY(-2px) au :hover provoque un "saut" du bouton au tap dans le webview (l'état hover colle après le toucher). */ html.da2-fb-inapp .woocommerce a.button:hover, html.da2-fb-inapp .woocommerce button.button:hover, html.da2-fb-inapp .woocommerce input.button:hover, html.da2-fb-inapp .woocommerce #respond input#submit:hover, html.da2-fb-inapp .woocommerce .button.alt:hover { transform: none !important; } /* ── 5. Utilitaires plein écran pour popups / drawers ── À utiliser par les autres plugins 2DA (exit-intent, mini-cart) : hauteur RÉELLE du viewport, jamais masquée par la barre FB. Exemple :

*/ .da2-fullheight { height: 100vh; /* fallback */ height: calc(var(--da2-vh, 1vh) * 100); /* hauteur réelle (JS) */ } @supports (height: 100dvh) { .da2-fullheight { height: 100dvh; } /* natif si supporté */ } .da2-safe-bottom { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; } /* ════════════════ FIN WEBVIEW FB/IG v1.0 ════════════════ */ /* ════════════════════════════════════════════════════════════════════ v1.5.0 — CSS DÉPLACÉS DEPUIS functions.php (optimisation en-tête) -------------------------------------------------------------------- Ces règles étaient injectées inline dans sur TOUTES les pages (≈11 KB de HTML en plus à chaque chargement). Dans style.css, elles sont mises en cache par le navigateur et LiteSpeed → HTML plus léger, premier rendu (et en-tête) plus rapide. Aucun changement visuel. ═════════════════════════════════════════════════════════════════════ */ /* ── DA2-PILL (carousel catégories — règle globale, ex-section 2) ── */ .da2-pill, .da2-pill *, [class*="elementor"] .da2-pill { color: #ffffff !important; } /* ── BADGE RECONDITIONNÉ (ex #da2-reconditionne-css) ── */ .woocommerce ul.products li.product, .woocommerce ul.products li.product .woocommerce-loop-product__link { position: relative !important; } .da2-badge-reconditionne { display: inline-flex; align-items: center; gap: 4px; position: absolute; top: 8px; left: 8px; z-index: 20; background: #1B8C4E; color: #ffffff !important; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 50px; box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; line-height: 1.4; text-decoration: none !important; } .da2-badge-single { top: 12px; left: 12px; font-size: .8rem; padding: 5px 13px; } /* ── BADGE PROMO + MASQUAGE BADGES "SALE!" NATIFS (ex #da2-sale-translate-css) ── */ /* ── Masquer tous les badges SALE natifs ShopLentor ── */ .wl-product-badge, .wl-onsale, .wl-sale-badge, .woostify-badge-on-sale, .sl-product-sale, .product-badge.sale, span.badge-sale, .elementor-woo-product-badge { display: none !important; } /* ── Notre badge Promo généré par JS ── */ .da2-promo-badge { display: inline-flex; align-items: center; background: #E63329; color: #ffffff !important; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 50px; pointer-events: none; line-height: 1.4; box-shadow: 0 2px 8px rgba(0,0,0,.2); text-decoration: none !important; vertical-align: middle; } /* ── BADGE STOCK CRITIQUE + BARRE STICKY (ex #da2-stock-flash-css) ── */ @keyframes da2StockFlash { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 2px 12px rgba(230,51,41,.45); } 50% { opacity: .8; transform: scale(1.03); box-shadow: 0 4px 20px rgba(230,51,41,.7); } } /* ════════════════════════════════════════════════════════════ 1) BADGE INLINE — fiche produit + catalogue (forme commune) ═════════════════════════════════════════════════════════════ */ .da2-stock-flash { display: inline-flex; align-items: center; gap: 5px; background: #E63329; color: #fff !important; font-size: .82rem; font-weight: 800; letter-spacing: .04em; padding: 5px 14px; border-radius: 50px; animation: da2StockFlash 1s ease-in-out infinite; pointer-events: none; line-height: 1.5; white-space: nowrap; flex-shrink: 0; } .da2-stock-flash-wrap { margin: 12px 0; } /* ── Catalogue : carte produit en contexte positionné ── */ .woocommerce ul.products li.product { position: relative; } /* ── Catalogue : posé sur la vignette produit (en HAUT pour ne pas chevaucher le titre quand la carte mobile s'allonge) ── */ .woocommerce ul.products li.product .da2-stock-flash { position: absolute; top: 8px; left: 8px; bottom: auto; z-index: 15; font-size: .7rem; padding: 3px 9px; margin-top: 0; } /* ── Mobile : badge catalogue beaucoup plus petit ── */ @media (max-width: 768px) { .woocommerce ul.products li.product .da2-stock-flash { font-size: .45rem !important; padding: 2px 6px !important; gap: 2px !important; top: 6px !important; left: 6px !important; max-width: 90px !important; line-height: 1.3 !important; letter-spacing: .01em !important; } .woocommerce ul.products li.product .da2-stock-flash > span { font-size: .55rem !important; } } /* ════════════════════════════════════════════════════════════ 2) BARRE STICKY (ShopLentor / Royal Elementor / Woolentor) Fond bleu nuit + glassmorphism + bordure rouge fine ═════════════════════════════════════════════════════════════ */ .wl-sticky-add-to-cart, .woolentor-sticky-add-to-cart, .woolentor_sticky_bar, .wpr-product-add-to-cart-sticky, [class*="sticky-add"], [class*="sticky"][class*="cart"] { background: linear-gradient(135deg, rgba(11,20,38,.96) 0%, rgba(27,79,191,.92) 100%) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; border-top: 2px solid rgba(230,51,41,.85) !important; box-shadow: 0 -6px 28px rgba(0,0,0,.4) !important; padding: 10px 18px !important; display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: nowrap !important; overflow: hidden !important; /* coupe ce qui déborde — pas de badge fantôme à gauche */ min-height: 68px !important; } /* Image produit dans la barre sticky : petite carte arrondie */ .wl-sticky-add-to-cart img, .woolentor-sticky-add-to-cart img, .woolentor_sticky_bar img, [class*="sticky"][class*="cart"] img { border-radius: 10px !important; border: 2px solid rgba(255,255,255,.18) !important; box-shadow: 0 2px 8px rgba(0,0,0,.25) !important; flex-shrink: 0 !important; width: 52px !important; height: 52px !important; object-fit: cover !important; } /* Bloc texte central : titre + prix (zone qui se rétracte) */ .wl-sticky-add-to-cart .product-title, .wl-sticky-add-to-cart .title, .woolentor-sticky-add-to-cart .title, .woolentor_sticky_bar .title, [class*="sticky"][class*="cart"] .title, [class*="sticky"][class*="cart"] h2, [class*="sticky"][class*="cart"] h3 { color: #fff !important; font-size: .9rem !important; font-weight: 700 !important; flex: 1 1 auto !important; min-width: 0 !important; line-height: 1.3 !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; margin: 0 !important; } /* Prix */ .wl-sticky-add-to-cart .price, .woolentor-sticky-add-to-cart .price, .woolentor_sticky_bar .price, [class*="sticky"][class*="cart"] .price { color: #fff !important; font-size: 1rem !important; font-weight: 800 !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* Texte stock natif WC (« 2 en stock ») */ .wl-sticky-add-to-cart .stock, [class*="sticky"][class*="cart"] .stock { color: #7edc99 !important; font-size: .78rem !important; font-weight: 600 !important; white-space: nowrap !important; } /* ── Badge stock injecté dans la barre sticky : compact, ordonné après l'image ── */ .wl-sticky-add-to-cart .da2-stock-flash, .woolentor-sticky-add-to-cart .da2-stock-flash, .woolentor_sticky_bar .da2-stock-flash, .wpr-product-add-to-cart-sticky .da2-stock-flash, [class*="sticky"][class*="cart"] .da2-stock-flash, [class*="sticky"] .da2-stock-flash { position: static !important; font-size: .58rem !important; padding: 2px 8px !important; gap: 3px !important; flex-shrink: 0 !important; order: 1 !important; /* juste après l'image (order:0 implicite) */ animation: da2StockFlash 1s ease-in-out infinite !important; white-space: nowrap !important; max-width: 130px !important; line-height: 1.4 !important; letter-spacing: .02em !important; } /* Bouton « Ajouter au panier » dans la sticky */ .wl-sticky-add-to-cart .button, .wl-sticky-add-to-cart button, .woolentor-sticky-add-to-cart .button, .woolentor_sticky_bar .button, [class*="sticky"][class*="cart"] .button, [class*="sticky"][class*="cart"] button { background: #E63329 !important; color: #fff !important; border-radius: 50px !important; font-weight: 700 !important; padding: 11px 22px !important; border: none !important; white-space: nowrap !important; flex-shrink: 0 !important; font-size: .9rem !important; letter-spacing: .02em !important; transition: background .18s ease, transform .15s ease !important; } .wl-sticky-add-to-cart .button:hover, .wl-sticky-add-to-cart button:hover, [class*="sticky"][class*="cart"] .button:hover, [class*="sticky"][class*="cart"] button:hover { background: #c92a21 !important; transform: translateY(-1px) !important; } /* ── Tablette ── */ @media (max-width: 992px) { .wl-sticky-add-to-cart, .woolentor-sticky-add-to-cart, .woolentor_sticky_bar, [class*="sticky"][class*="cart"] { padding: 8px 14px !important; gap: 10px !important; min-height: 62px !important; } } /* ── Mobile ≤ 768 px : ne garder que l'essentiel, masquer le titre ── */ @media (max-width: 768px) { .wl-sticky-add-to-cart, .woolentor-sticky-add-to-cart, .woolentor_sticky_bar, [class*="sticky"][class*="cart"] { padding: 7px 10px !important; gap: 8px !important; min-height: 58px !important; } .wl-sticky-add-to-cart img, .woolentor_sticky_bar img, [class*="sticky"][class*="cart"] img { width: 42px !important; height: 42px !important; border-radius: 8px !important; } /* Sur mobile, on masque le titre long pour éviter le clip — image + badge + prix + CTA suffit */ .wl-sticky-add-to-cart .product-title, .wl-sticky-add-to-cart .title, .woolentor-sticky-add-to-cart .title, .woolentor_sticky_bar .title, [class*="sticky"][class*="cart"] h2, [class*="sticky"][class*="cart"] h3 { display: none !important; } .wl-sticky-add-to-cart .price, .woolentor_sticky_bar .price, [class*="sticky"][class*="cart"] .price { font-size: .9rem !important; flex: 1 1 auto !important; text-align: left !important; } .wl-sticky-add-to-cart .da2-stock-flash, .woolentor_sticky_bar .da2-stock-flash, [class*="sticky"] .da2-stock-flash { font-size: .54rem !important; padding: 2px 7px !important; gap: 2px !important; max-width: 105px !important; } .wl-sticky-add-to-cart .button, .woolentor_sticky_bar .button, [class*="sticky"][class*="cart"] .button, [class*="sticky"][class*="cart"] button { padding: 9px 14px !important; font-size: .8rem !important; } } /* ── Très petit écran ≤ 420 px : compresser encore ── */ @media (max-width: 420px) { .wl-sticky-add-to-cart, .woolentor_sticky_bar, [class*="sticky"][class*="cart"] { padding: 6px 8px !important; gap: 6px !important; } .wl-sticky-add-to-cart .da2-stock-flash, [class*="sticky"] .da2-stock-flash { font-size: .5rem !important; padding: 2px 6px !important; gap: 2px !important; max-width: 88px !important; } .wl-sticky-add-to-cart .button, [class*="sticky"][class*="cart"] .button, [class*="sticky"][class*="cart"] button { padding: 8px 11px !important; font-size: .74rem !important; } } /* ════════════════ FIN CSS DÉPLACÉS v1.5.0 ════════════════ */ /* ════════════════════════════════════════════════════════════════════ v1.5.1 — FOOTER 2DA + REDESIGN GRILLE ARCHIVE / RECHERCHE ═════════════════════════════════════════════════════════════════════ */ /* ── 1. Masquer le crédit du thème parent ("2DA Informatique Child Thème par 2DA Informatique") ── */ .site-footer .site-info, #colophon .site-info, footer .site-info, .footer-credits, .footer-copyright { display: none !important; } /* ── 2. Footer de marque 2DA ── */ .da2-footer { background: linear-gradient(135deg, #1a2f7a 0%, #0b0f2a 70%); color: #c8d8f0; margin-top: 48px; border-top: 3px solid var(--2da-red); font-size: .92rem; } .da2-footer-inner { max-width: 1160px; margin: 0 auto; padding: 44px 24px 28px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; } .da2-footer-logo { font-size: 1.45rem; font-weight: 900; letter-spacing: .02em; color: #fff; margin-bottom: 12px; } .da2-footer-logo span { color: var(--2da-red); } .da2-footer-brand p { color: #8ab4d8; line-height: 1.8; margin: 0; } .da2-footer-col h4 { color: #fff; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid rgba(230,51,41,.55); display: inline-block; } .da2-footer-col ul { list-style: none; margin: 0; padding: 0; } .da2-footer-col ul li { margin-bottom: 10px; color: #8ab4d8; } .da2-footer-col ul li a { color: #c8d8f0 !important; text-decoration: none !important; transition: color .18s; } .da2-footer-col ul li a:hover { color: #fff !important; } .da2-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); text-align: center; padding: 16px 20px; font-size: .8rem; color: #7a8ab8; letter-spacing: .03em; } @media (max-width: 768px) { .da2-footer-inner { grid-template-columns: 1fr; gap: 26px; padding: 34px 20px 22px; } } /* ── 3. GRILLE PRODUITS — archives, catégories, tags, recherche ── Scopé aux pages d'archive natives WooCommerce uniquement : n'affecte PAS les grilles Elementor/WPR de l'accueil. ── */ body.post-type-archive-product .woocommerce ul.products li.product, body.tax-product_cat .woocommerce ul.products li.product, body.tax-product_tag .woocommerce ul.products li.product, body.search-results .woocommerce ul.products li.product, body.post-type-archive-product ul.products li.product, body.tax-product_cat ul.products li.product, body.tax-product_tag ul.products li.product, body.search-results ul.products li.product { background: #fff !important; border: 1.5px solid #E8ECF5 !important; border-radius: 16px !important; padding: 14px 14px 18px !important; box-sizing: border-box !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; box-shadow: 0 2px 10px rgba(15,27,60,.05) !important; } body.post-type-archive-product ul.products li.product:hover, body.tax-product_cat ul.products li.product:hover, body.tax-product_tag ul.products li.product:hover, body.search-results ul.products li.product:hover { transform: translateY(-5px) !important; border-color: var(--2da-blue) !important; box-shadow: 0 12px 32px rgba(27,79,191,.16) !important; } /* Image produit */ body.post-type-archive-product ul.products li.product img, body.tax-product_cat ul.products li.product img, body.tax-product_tag ul.products li.product img, body.search-results ul.products li.product img { border-radius: 12px !important; aspect-ratio: 1 / 1; object-fit: contain !important; background: #F7F9FF; width: 100% !important; margin-bottom: 12px !important; } /* Titre produit */ body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title, body.tax-product_cat ul.products li.product .woocommerce-loop-product__title, body.tax-product_tag ul.products li.product .woocommerce-loop-product__title, body.search-results ul.products li.product .woocommerce-loop-product__title, body.post-type-archive-product ul.products li.product h2, body.tax-product_cat ul.products li.product h2, body.tax-product_tag ul.products li.product h2, body.search-results ul.products li.product h2 { color: #0F1B3C !important; font-size: .95rem !important; font-weight: 700 !important; line-height: 1.45 !important; padding: 0 !important; margin: 0 0 8px !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; min-height: 2.9em; } body.post-type-archive-product ul.products li.product a:hover .woocommerce-loop-product__title, body.tax-product_cat ul.products li.product a:hover .woocommerce-loop-product__title, body.search-results ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--2da-blue) !important; } /* Prix : ancien barré gris + nouveau rouge bien visible */ body.post-type-archive-product ul.products li.product .price, body.tax-product_cat ul.products li.product .price, body.tax-product_tag ul.products li.product .price, body.search-results ul.products li.product .price { margin: 0 0 12px !important; display: flex !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap !important; } body.post-type-archive-product ul.products li.product .price del, body.tax-product_cat ul.products li.product .price del, body.tax-product_tag ul.products li.product .price del, body.search-results ul.products li.product .price del { color: #9AA6C4 !important; font-size: .8rem !important; font-weight: 500 !important; opacity: 1 !important; } body.post-type-archive-product ul.products li.product .price ins, body.tax-product_cat ul.products li.product .price ins, body.tax-product_tag ul.products li.product .price ins, body.search-results ul.products li.product .price ins, body.post-type-archive-product ul.products li.product .price > .amount, body.tax-product_cat ul.products li.product .price > .amount, body.tax-product_tag ul.products li.product .price > .amount, body.search-results ul.products li.product .price > .amount { color: var(--2da-red) !important; font-size: 1.08rem !important; font-weight: 800 !important; text-decoration: none !important; background: transparent !important; } /* Bouton pleine largeur, collé en bas de carte */ body.post-type-archive-product ul.products li.product .button, body.tax-product_cat ul.products li.product .button, body.tax-product_tag ul.products li.product .button, body.search-results ul.products li.product .button { margin-top: auto !important; width: 100% !important; text-align: center !important; padding: 12px 16px !important; font-size: .88rem !important; } /* ── 4. Titre + compteur de résultats ── */ body.search-results.woocommerce h1.page-title, body.post-type-archive-product h1.woocommerce-products-header__title, body.tax-product_cat h1.woocommerce-products-header__title, body.tax-product_tag h1.woocommerce-products-header__title { font-size: 1.6rem !important; font-weight: 800 !important; color: #0F1B3C !important; position: relative; padding-bottom: 12px !important; margin-bottom: 18px !important; } body.search-results.woocommerce h1.page-title::after, body.post-type-archive-product h1.woocommerce-products-header__title::after, body.tax-product_cat h1.woocommerce-products-header__title::after, body.tax-product_tag h1.woocommerce-products-header__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--2da-red), var(--2da-blue)); } body.search-results .woocommerce-result-count, body.post-type-archive-product .woocommerce-result-count, body.tax-product_cat .woocommerce-result-count, body.tax-product_tag .woocommerce-result-count { color: var(--2da-gray) !important; font-size: .88rem !important; } /* Select "Trier par" */ body.search-results .woocommerce-ordering select, body.post-type-archive-product .woocommerce-ordering select, body.tax-product_cat .woocommerce-ordering select, body.tax-product_tag .woocommerce-ordering select { border: 1.5px solid #ccd5ea !important; border-radius: 50px !important; padding: 9px 38px 9px 16px !important; font-size: .88rem !important; color: #0F1B3C !important; background-color: #fff !important; cursor: pointer; } /* ── 5. Pagination : pastilles arrondies ── */ .woocommerce nav.woocommerce-pagination { margin: 34px 0 10px !important; } .woocommerce nav.woocommerce-pagination ul { border: none !important; display: inline-flex !important; gap: 8px !important; } .woocommerce nav.woocommerce-pagination ul li { border: none !important; overflow: visible !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; border-radius: 50px !important; border: 1.5px solid #E8ECF5 !important; background: #fff !important; color: #0F1B3C !important; font-weight: 700 !important; font-size: .9rem !important; transition: all .18s ease !important; } .woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--2da-blue) !important; color: var(--2da-blue) !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(27,79,191,.18) !important; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--2da-blue) !important; border-color: var(--2da-blue) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(27,79,191,.3) !important; } /* ════════════════ FIN v1.5.1 FOOTER + GRILLE ════════════════ */ /* ════════════════════════════════════════════════════════════════════ v1.5.2 — MASQUER LE LOGO DU HEADER NATIF (recherche / archives) -------------------------------------------------------------------- Sur les templates natifs WooCommerce (résultats de recherche, catégories, tags), le thème parent affiche sa bannière logo par défaut au-dessus du contenu. On la retire — le fil d'Ariane et le titre suffisent, la page démarre directement sur les produits. ═════════════════════════════════════════════════════════════════════ */ body.search-results .site-header .site-branding, body.search-results .site-branding, body.search-results .custom-logo-link, body.search-results img.custom-logo, body.tax-product_cat .site-header .site-branding, body.tax-product_cat .site-branding, body.tax-product_cat .custom-logo-link, body.tax-product_cat img.custom-logo, body.tax-product_tag .site-header .site-branding, body.tax-product_tag .site-branding, body.tax-product_tag .custom-logo-link, body.tax-product_tag img.custom-logo { display: none !important; } /* ════════════════ FIN v1.5.2 ════════════════ */ /* ════════════════════════════════════════════════════════════════════ v1.5.3 — HARMONIE TYPOGRAPHIQUE FICHE PRODUIT -------------------------------------------------------------------- Objectif : réduire les tailles excessives (titre, prix, titres de sections Elementor) et créer une échelle typographique cohérente. Placé en FIN de fichier : surcharge les règles précédentes à spécificité égale, sans les casser (aucune suppression). Échelle : titre 1.7rem > prix 1.55rem > sections 1.15rem > corps .95rem ═════════════════════════════════════════════════════════════════════ */ /* ── 1. Titre produit : plus compact ── */ .woocommerce div.product .product_title, .single-product .product_title { font-size: clamp(1.3rem, 1.4vw + 0.7rem, 1.7rem) !important; line-height: 1.3 !important; padding-bottom: 12px !important; margin-bottom: 14px !important; } /* ── 2. Prix principal (résumé) : lisible sans dominer ── */ .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, body.single-product .price ins, body.single-product .price > .woocommerce-Price-amount { font-size: clamp(1.25rem, 1.3vw + 0.7rem, 1.55rem) !important; } .woocommerce div.product p.price del, .woocommerce div.product .price del { font-size: .92rem !important; } /* Fourchette de prix (produit variable "3200 – 7000") : sur UNE ligne */ .woocommerce div.product p.price, .woocommerce div.product .price, .single-product .price { gap: 8px !important; margin-bottom: 16px !important; row-gap: 4px !important; } /* ── 3. Titres de sections Elementor (colonne latérale, related…) "VOUS AIMEREZ PEUT-ÊTRE AUSSI", "BEST-SELLERS", etc. ── */ body.single-product .elementor-widget-heading .elementor-heading-title { font-size: clamp(1rem, 0.6vw + 0.85rem, 1.2rem) !important; font-weight: 800 !important; letter-spacing: .08em !important; line-height: 1.35 !important; overflow-wrap: break-word; } /* Titres natifs Woo de mêmes sections (related/upsells) */ body.single-product .related > h2, body.single-product .upsells > h2, body.single-product section.related h2:first-child, body.single-product section.up-sells h2:first-child { font-size: 1.2rem !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase; } /* ── 4. Zone variations (Choix de taille) ── */ body.single-product table.variations th, body.single-product table.variations .label, body.single-product form.variations_form .variations label { font-size: .78rem !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--2da-text-soft, rgba(255,255,255,.65)) !important; } body.single-product .variations select { font-size: .95rem !important; padding: 10px 40px 10px 14px !important; border-radius: 10px !important; border: 1.5px solid var(--2da-border, rgba(255,255,255,.12)) !important; background-color: var(--2da-surface, rgba(255,255,255,.04)) !important; color: var(--2da-text, #fff) !important; cursor: pointer; } body.single-product .reset_variations { font-size: .8rem !important; color: var(--2da-text-mute, rgba(255,255,255,.4)) !important; text-decoration: underline !important; } /* Prix affiché dans l'encart variation : même échelle que le prix principal */ body.single-product .woocommerce-variation-price .price ins, body.single-product .woocommerce-variation-price .price > .woocommerce-Price-amount, body.single-product .woocommerce-variation-price .price bdi { font-size: clamp(1.2rem, 1.1vw + 0.7rem, 1.45rem) !important; } body.single-product .woocommerce-variation-price .price del { font-size: .88rem !important; } /* ── 5. Quantité + bouton panier : alignés, même hauteur ── */ body.single-product form.cart { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 12px !important; } body.single-product form.cart .quantity .qty { height: 50px !important; font-size: 1rem !important; border-radius: 10px !important; } body.single-product form.cart .single_add_to_cart_button { height: 50px !important; font-size: .95rem !important; padding: 0 26px !important; letter-spacing: .02em !important; } /* Le formulaire variable garde sa structure verticale interne */ body.single-product form.variations_form.cart { flex-direction: column !important; align-items: stretch !important; } body.single-product form.variations_form .woocommerce-variation-add-to-cart { display: flex !important; gap: 12px !important; align-items: stretch !important; } /* ── 6. Onglets Description / Infos / Avis : pastilles homogènes ── */ body.single-product .woocommerce-tabs ul.tabs li a, body.single-product .wc-tabs li a { font-size: .88rem !important; font-weight: 700 !important; padding: 10px 18px !important; letter-spacing: .02em !important; } /* ── 7. Fil d'Ariane + mention stock : discrets ── */ body.single-product .woocommerce-breadcrumb, body.single-product .rank-math-breadcrumb, body.single-product nav.woocommerce-breadcrumb { font-size: .78rem !important; opacity: .75; } body.single-product .stock { font-size: .85rem !important; font-weight: 600 !important; } /* ── 8. Corps de texte (description) : confort de lecture ── */ body.single-product .woocommerce-Tabs-panel, body.single-product .woocommerce-product-details__short-description { font-size: .95rem !important; line-height: 1.75 !important; } /* ════════════════ FIN v1.5.3 HARMONIE FICHE PRODUIT ════════════════ */ /* ════════════════════════════════════════════════════════════════════ v1.5.4 — CORRECTIFS FICHE PRODUIT (suite retour visuel) ═════════════════════════════════════════════════════════════════════ */ /* ── 1. FIX fourchette de prix "– 3200 / 7000" ── Le conteneur .price est en flex et une règle antérieure donnait order:2 aux montants ; le tiret (nœud texte, order 0) passait donc DEVANT les prix → "– 3200 7000" sur 2 lignes. On remet les montants directs à order:0 : le DOM naturel "3200 – 7000" est restauré. (Les prix promo del/ins gardent leur ordre : le montant y est imbriqué dans , pas en enfant direct.) ── */ .woocommerce div.product p.price > .woocommerce-Price-amount, .woocommerce div.product .price > .woocommerce-Price-amount, .elementor-widget-woocommerce-product-price .price > .woocommerce-Price-amount, body.single-product .price > .woocommerce-Price-amount { order: 0 !important; } /* La fourchette tient sur une ligne */ .woocommerce div.product p.price, .woocommerce div.product .price { white-space: nowrap; } .woocommerce div.product .price del, .woocommerce div.product .price ins { white-space: nowrap; } /* ── 2. Titres de sections latérales : sélecteurs élargis ── ("VOUS AIMEREZ PEUT-ÊTRE AUSSI", "BEST-SELLERS" — widgets titre Elementor OU Royal Addons OU titres HTML directs) ── */ body.single-product .elementor-heading-title, body.single-product h2.elementor-heading-title, body.single-product h3.elementor-heading-title, body.single-product .wpr-heading, body.single-product .wpr-heading-inner, body.single-product .wpr-heading .wpr-heading-text, body.single-product .wpr-dual-heading, body.single-product .wpr-dual-title, body.single-product .elementor-widget-container > h2, body.single-product .elementor-widget-container > h3 { font-size: clamp(1rem, 0.6vw + 0.85rem, 1.2rem) !important; font-weight: 800 !important; letter-spacing: .08em !important; line-height: 1.35 !important; white-space: normal !important; overflow-wrap: break-word !important; } /* … sans toucher le H1 titre produit (échelle 1.7rem conservée) */ body.single-product h1.product_title.elementor-heading-title, body.single-product .product_title { font-size: clamp(1.3rem, 1.4vw + 0.7rem, 1.7rem) !important; letter-spacing: -0.01em !important; white-space: normal !important; } /* ════════════════ FIN v1.5.4 ════════════════ */ /* Accueil : section hero retirée à la demande du propriétaire (02/08/2026) */ body.home .da2-hero { display: none !important; } /* ════════════ Archives catégories produits : alignement charte 2DA (02/08/2026) ════════════ */ /* Reprend la palette de l'accueil rapide : navy #0b1036, bleu #233b91, rouge #d8243c */ .tax-product_cat { --da2-navy: #0b1036; --da2-blue: #233b91; --da2-blue2: #3158b5; --da2-red: #d8243c; --da2-ink: #101426; --da2-muted: #626a7a; } /* Titres produits */ .tax-product_cat .wpr-grid-item-title, .tax-product_cat .wpr-grid-item-title a { color: var(--da2-ink) !important; } .tax-product_cat .wpr-grid-item-title a:hover { color: var(--da2-blue) !important; } /* Prix : rouge pur #ff0000 -> rouge de marque */ .tax-product_cat .wpr-grid-item-price ins, .tax-product_cat .wpr-grid-item-price ins .amount, .tax-product_cat .wpr-grid-item-price .amount, .tax-product_cat .wpr-grid-item-price .woocommerce-Price-currencySymbol { color: var(--da2-red) !important; } .tax-product_cat .wpr-grid-item-price del, .tax-product_cat .wpr-grid-item-price del .amount, .tax-product_cat .wpr-grid-item-price del .woocommerce-Price-currencySymbol { color: var(--da2-muted) !important; font-weight: 400 !important; } /* Bouton ajouter au panier : #130835 -> bleu de marque */ .tax-product_cat .wpr-grid-item-add-to-cart a, .tax-product_cat .wpr-grid-item-add-to-cart .button { background-color: var(--da2-blue) !important; color: #fff !important; border-color: var(--da2-blue) !important; border-radius: 10px !important; } .tax-product_cat .wpr-grid-item-add-to-cart a:hover, .tax-product_cat .wpr-grid-item-add-to-cart .button:hover { background-color: var(--da2-blue2) !important; border-color: var(--da2-blue2) !important; } /* Catégories sous le titre : lavande #cdceeb -> gris neutre */ .tax-product_cat .wpr-grid-product-categories a, .tax-product_cat .wpr-grid-product-categories .tax-sep { color: var(--da2-muted) !important; } .tax-product_cat .wpr-grid-product-categories a:hover { color: var(--da2-blue) !important; } /* Pagination et « charger plus » : violet Royal Addons #605be5 -> bleu de marque */ .tax-product_cat .wpr-load-more-btn, .tax-product_cat .wpr-grid-pagination a, .tax-product_cat .wpr-grid-pagination .page-numbers { background-color: var(--da2-blue) !important; border-color: var(--da2-blue) !important; color: #fff !important; } .tax-product_cat .wpr-load-more-btn:hover, .tax-product_cat .wpr-grid-pagination .page-numbers.current { background-color: var(--da2-red) !important; border-color: var(--da2-red) !important; color: #fff !important; } .tax-product_cat .wpr-pagination-finish { color: var(--da2-muted) !important; border-color: var(--da2-muted) !important; } .tax-product_cat .wpr-double-bounce1, .tax-product_cat .wpr-double-bounce2 { background-color: var(--da2-blue) !important; } /* Badge promo */ .tax-product_cat .onsale, .tax-product_cat .wpr-sale-badge { background-color: var(--da2-red) !important; color: #fff !important; } /* ════════════ FIN archives catégories ════════════ */ /* ════════════ Page panier : lisibilité et conversion (02/08/2026) ════════════ */ .woocommerce-cart .woocommerce-cart-form td.actions { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 16px !important; } .woocommerce-cart .woocommerce-cart-form td.actions .coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; float: none !important; margin: 0 !important; } .woocommerce-cart .woocommerce-cart-form td.actions .coupon label { order: -1; margin: 0; color: #626a7a; font-size: 14px; font-weight: 600; white-space: nowrap; } /* Le champ faisait 80px : le texte du placeholder etait coupe */ .woocommerce-cart #coupon_code { flex: 1 1 240px; width: auto !important; min-width: 220px; max-width: 320px; height: 48px; padding: 0 14px !important; font-size: 15px; line-height: 48px; color: #101426; background: #fff; border: 1px solid #d7dcea; border-radius: 10px; box-shadow: none; } .woocommerce-cart #coupon_code::placeholder { color: #8a92a6; } .woocommerce-cart #coupon_code:focus { outline: none; border-color: #1b4fbf; box-shadow: 0 0 0 3px rgba(27, 79, 191, .15); } .woocommerce-cart td.actions .coupon .button { height: 48px; padding: 0 22px !important; border-radius: 10px !important; white-space: nowrap; } /* « Mettre a jour » passe en secondaire pour ne plus concurrencer le CTA */ .woocommerce-cart td.actions button[name="update_cart"] { height: 48px; padding: 0 20px !important; background: transparent !important; color: #1b4fbf !important; border: 1px solid #1b4fbf !important; border-radius: 10px !important; box-shadow: none !important; font-weight: 600; } .woocommerce-cart td.actions button[name="update_cart"]:hover:not(:disabled) { background: rgba(27, 79, 191, .08) !important; } .woocommerce-cart td.actions button[name="update_cart"]:disabled { opacity: .45; } /* Bloc total : CTA plus present */ .woocommerce-cart .cart_totals { max-width: 520px; margin-left: auto; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; min-height: 56px; line-height: 1.2; padding: 17px 20px !important; font-size: 17px; font-weight: 700; border-radius: 12px !important; box-shadow: 0 10px 24px rgba(27, 79, 191, .28); transition: transform .18s ease, box-shadow .18s ease; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { transform: translateY(-2px); } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active { transform: scale(.99); } /* ── Mobile ── */ @media (max-width: 767px) { .woocommerce-cart .woocommerce-cart-form td.actions { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 12px !important; } .woocommerce-cart .woocommerce-cart-form td.actions .coupon { width: 100%; } .woocommerce-cart #coupon_code { flex: 1 1 100%; min-width: 0; max-width: none; width: 100% !important; } .woocommerce-cart td.actions .coupon .button, .woocommerce-cart td.actions button[name="update_cart"] { width: 100%; min-height: 50px; } .woocommerce-cart .cart_totals { max-width: none; width: 100% !important; float: none !important; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { min-height: 58px; font-size: 17px; } .woocommerce-cart .shop_table.cart td.product-name { font-size: 15px; line-height: 1.35; } .woocommerce-cart .shop_table.cart td::before { font-weight: 600; color: #626a7a; } .woocommerce-cart .shop_table.cart td.product-remove a.remove { width: 34px; height: 34px; line-height: 32px; font-size: 20px; } } /* ════════════ FIN page panier ════════════ */ /* ════════════ Archives : grille mobile sur fond sombre (#170545) ════════════ */ /* Le conteneur mobile (.elementor-hidden-desktop) a un fond violet fonce : les couleurs de texte du bloc desktop y deviennent illisibles. */ @media (max-width: 767px) { .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-title, .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-title a { color: #ffffff !important; } .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-title a:hover { color: #cbd0e3 !important; } .tax-product_cat .elementor-hidden-desktop .wpr-grid-product-categories a, .tax-product_cat .elementor-hidden-desktop .wpr-grid-product-categories .tax-sep { color: #b9c0d4 !important; } /* Rouge de marque insuffisant sur fond sombre : teinte eclaircie */ .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-price ins, .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-price ins .amount, .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-price .amount, .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-price .woocommerce-Price-currencySymbol { color: #ff6b78 !important; } .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-price del, .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-price del .amount, .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-price del .woocommerce-Price-currencySymbol { color: #9aa3ba !important; } /* CTA : le bleu #233b91 se noie dans le fond, on passe au rouge comme sur l'accueil */ .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-add-to-cart a, .tax-product_cat .elementor-hidden-desktop .wpr-grid-item-add-to-cart .button { background-color: #d8243c !important; border-color: #d8243c !important; color: #ffffff !important; } .tax-product_cat .elementor-hidden-desktop .wpr-woo-rating { color: #f5a623 !important; } } /* ════════════ FIN grille mobile ════════════ */ /* ════════════ Boutique et archives produits sur mobile (02/08/2026) ════════════ */ @media (max-width: 767px) { /* Logo : 230x60 sur un ecran de 390px, soit 59% de la largeur */ .custom-logo { max-width: 150px !important; max-height: 44px !important; width: auto !important; height: auto !important; object-fit: contain; } .custom-logo-link { display: inline-flex !important; align-items: center; } /* Titre produit : le line-clamp demande 3 lignes (66px) mais la hauteur etait bridee a 52px, la troisieme ligne etait coupee. */ .woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title { min-height: 66px !important; max-height: 66px !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; } } /* ════════════ FIN boutique mobile ════════════ */ /* ════════════ Panier : compactage mobile + finition premium (02/08/2026) ════════════ */ .woocommerce-cart .shop_table.cart, .woocommerce-cart .cart_totals { background: #fff; border: 1px solid #eef1f8; border-radius: 14px; box-shadow: 0 6px 18px rgba(15, 20, 40, .05); } .woocommerce-cart .shop_table.cart { overflow: hidden; border-collapse: separate; } .woocommerce-cart .cart_totals .order-total .amount { color: #d8243c !important; } .woocommerce-cart #coupon_code::placeholder { color: transparent; } .woocommerce-cart #coupon_code:-webkit-autofill { box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #101426 !important; } @media (min-width: 768px) { .woocommerce-cart .cart_totals { padding: 22px 24px; } .woocommerce-cart .cart_totals h2 { font-size: 26px; margin-bottom: 14px; } } @media (max-width: 767px) { /* Ligne produit : 286px -> compactee */ .woocommerce-cart .shop_table.cart td { padding: 9px 14px !important; font-size: 14px !important; border-color: #f0f3fa !important; } .woocommerce-cart .shop_table.cart td.product-name { font-size: 15px !important; font-weight: 700; } .woocommerce-cart .shop_table.cart td.product-remove { padding: 6px 12px !important; text-align: right; } .woocommerce-cart .shop_table.cart td.product-thumbnail:empty { display: none !important; } /* Sous-total de ligne redondant avec le bloc Total panier */ .woocommerce-cart .shop_table.cart td.product-subtotal { display: none !important; } /* Zone coupon : 235px -> compactee */ .woocommerce-cart td.actions { padding: 12px 14px !important; gap: 10px !important; } .woocommerce-cart td.actions .coupon { gap: 8px !important; } .woocommerce-cart td.actions .coupon label { font-size: 12px !important; text-transform: uppercase; letter-spacing: .04em; color: #626a7a !important; } .woocommerce-cart #coupon_code { height: 44px !important; line-height: 44px !important; flex: 1 1 100% !important; } .woocommerce-cart td.actions .coupon .button { width: 100% !important; min-width: 100% !important; height: 44px !important; padding: 0 !important; } /* Bouton inactif tant que la quantite ne change pas : on le masque */ .woocommerce-cart td.actions button[name="update_cart"]:disabled { display: none !important; } .woocommerce-cart td.actions button[name="update_cart"] { height: 42px !important; font-size: 14px !important; } /* Bloc total : 447px -> compacte */ .woocommerce-cart .cart-collaterals { margin-top: 14px !important; padding: 0 !important; } .woocommerce-cart .cart_totals { padding: 16px !important; } .woocommerce-cart .cart_totals h2 { font-size: 19px !important; margin: 0 0 12px !important; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { padding: 8px 0 !important; font-size: 14px !important; border: 0 !important; } .woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { padding-top: 12px !important; font-size: 16px !important; border-top: 1px solid #eef1f8 !important; } .woocommerce-cart .wc-proceed-to-checkout { padding: 12px 0 0 !important; margin: 0 !important; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { min-height: 52px !important; font-size: 16px !important; padding: 15px 18px !important; } } /* ════════════ FIN panier compact ════════════ */ /* ════════════ Echelle de progression panier / commande (02/08/2026) ════════════ */ .da2-steps { display: flex; list-style: none; width: 100%; margin: 0 0 24px; padding: 0; } .da2-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; line-height: 1.3; color: #8a92a6; } .da2-step::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: #e6eaf4; z-index: 0; } .da2-step:first-child::before { display: none; } .da2-step.is-done::before, .da2-step.is-current::before { background: #233b91; } .da2-step__num { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #e6eaf4; border-radius: 50%; background: #eef1f8; color: #8a92a6; font-size: 14px; font-weight: 700; } .da2-step.is-done .da2-step__num { background: #233b91; border-color: #233b91; color: #fff; } .da2-step.is-current .da2-step__num { background: #d8243c; border-color: #d8243c; color: #fff; box-shadow: 0 0 0 4px rgba(216, 36, 60, .15); } .da2-step.is-done, .da2-step.is-current { color: #101426; } .da2-step.is-current .da2-step__label { font-weight: 700; } @media (max-width: 767px) { .da2-steps { margin-bottom: 16px; } .da2-step { font-size: 11px; gap: 6px; } .da2-step__num { width: 28px; height: 28px; font-size: 13px; } .da2-step::before { top: 14px; } } /* ════════════ FIN echelle de progression ════════════ */ /* ════════════ Panier mobile : compactage apres ajout du stepper ════════════ */ @media (max-width: 767px) { .woocommerce-cart .da2-steps { margin-bottom: 6px !important; } .woocommerce-cart .da2-step { gap: 4px !important; font-size: 10.5px !important; } .woocommerce-cart .da2-step__num { width: 26px !important; height: 26px !important; font-size: 12px !important; } .woocommerce-cart .da2-step::before { top: 13px !important; } .woocommerce-cart .cart-collaterals { margin-top: 10px !important; } .woocommerce-cart .cart_totals { padding: 14px !important; } } /* ════════════ FIN ════════════ */ /* ═══════ DEBUT BLOC 2DA FIX PRIX (2026-08-03) ═══════ */ /* Produits variables : la fourchette passait sur 2 lignes. Conteneur 336px, contenu 311px + 3 gouttieres de 14px = 353px. On resserre les gouttieres et on interdit le retour a la ligne. Cible limitee a .product-type-variable : les prix soldes (del/ins avec order:2) ne sont pas touches. */ div.product.product-type-variable .elementor-widget-wpr-product-price .wpr-product-price { flex-wrap: nowrap !important; gap: 6px !important; align-items: baseline; } div.product.product-type-variable .elementor-widget-wpr-product-price .wpr-product-price > .woocommerce-Price-amount { white-space: nowrap; } div.product.product-type-variable .elementor-widget-wpr-product-price .wpr-product-price > * { order: 0 !important; } @media (max-width: 480px) { div.product.product-type-variable .elementor-widget-wpr-product-price .wpr-product-price { font-size: 26px !important; } } /* ═══════ FIN BLOC 2DA FIX PRIX ═══════ */ /* ════════════ DEBUT BLOC 2DA CHECKOUT LISIBILITE ════════════ */ /** * Page de commande : palette de texte du tunnel de commande. * * HISTORIQUE * 2026-08-05 (v1.8.x) : le gabarit de la page de commande utilisait un fond * ardoise sombre. Le texte restait noir, donc illisible. Correction de * l'epoque : texte BLANC sur surfaces sombres. * 2026-08-08 (v1.8.20) : le tunnel est desormais sur fond CLAIR (cartes * blanches sur gris tres pale). Le texte blanc heritie de la v1.8.x * rendait invisibles "Produit", "Sous-total", les lignes de livraison et * les libelles de paiement (blanc sur blanc). * Correction : la palette est retournee. Texte fonce sur fond clair. * * Toute la logique passe par les variables ci-dessous : pour revenir a un * fond sombre, il suffit de leur redonner les valeurs claires d'origine * (indiquees en commentaire), sans toucher au reste du bloc. * * Retirer le bloc entre marqueurs pour desinstaller. */ body.woocommerce-checkout:not(.woocommerce-order-received) { /* Fond CLAIR (v1.8.20). Anciennes valeurs fond sombre en commentaire. */ --2da-co-text: #0F1B3C; /* etait #FFFFFF */ --2da-co-soft: #6B7689; /* etait rgba(255,255,255,.72) */ --2da-co-border: rgba(15,27,60,.14); /* etait rgba(255,255,255,.18) */ --2da-co-surf: rgba(15,27,60,.03); /* etait rgba(255,255,255,.06) */ --2da-co-ink: #101426; /* inchange */ --2da-co-link: #1B4FBF; /* nouveau : liens lisibles */ } body.woocommerce-checkout:not(.woocommerce-order-received), body.woocommerce-checkout:not(.woocommerce-order-received) h1, body.woocommerce-checkout:not(.woocommerce-order-received) h2, body.woocommerce-checkout:not(.woocommerce-order-received) h3, body.woocommerce-checkout:not(.woocommerce-order-received) p, body.woocommerce-checkout:not(.woocommerce-order-received) label, body.woocommerce-checkout:not(.woocommerce-order-received) legend, body.woocommerce-checkout:not(.woocommerce-order-received) th, body.woocommerce-checkout:not(.woocommerce-order-received) td, body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-billing-fields, body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-shipping-fields, body.woocommerce-checkout:not(.woocommerce-order-received) #order_review_heading { color: var(--2da-co-text) !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-input-wrapper .description, body.woocommerce-checkout:not(.woocommerce-order-received) .optional, body.woocommerce-checkout:not(.woocommerce-order-received) small { color: var(--2da-co-soft) !important; } body.woocommerce-checkout:not(.woocommerce-order-received) input[type="text"], body.woocommerce-checkout:not(.woocommerce-order-received) input[type="email"], body.woocommerce-checkout:not(.woocommerce-order-received) input[type="tel"], body.woocommerce-checkout:not(.woocommerce-order-received) input[type="number"], body.woocommerce-checkout:not(.woocommerce-order-received) input[type="password"], body.woocommerce-checkout:not(.woocommerce-order-received) textarea, body.woocommerce-checkout:not(.woocommerce-order-received) select, body.woocommerce-checkout:not(.woocommerce-order-received) .select2-selection, body.woocommerce-checkout:not(.woocommerce-order-received) .select2-selection__rendered { background: #FFFFFF !important; color: var(--2da-co-ink) !important; border: 1px solid var(--2da-co-border) !important; border-radius: 10px !important; font-size: 16px !important; } body.woocommerce-checkout:not(.woocommerce-order-received) input::placeholder, body.woocommerce-checkout:not(.woocommerce-order-received) textarea::placeholder { color: #8a95a8 !important; } body.woocommerce-checkout:not(.woocommerce-order-received) input:focus, body.woocommerce-checkout:not(.woocommerce-order-received) textarea:focus, body.woocommerce-checkout:not(.woocommerce-order-received) select:focus { outline: none !important; border-color: #1B4FBF !important; box-shadow: 0 0 0 3px rgba(27,79,191,.22) !important; } body.woocommerce-checkout:not(.woocommerce-order-received) #order_review, body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-checkout-review-order-table { background: var(--2da-co-surf) !important; border: 1px solid var(--2da-co-border) !important; border-radius: 14px !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-checkout-review-order-table th, body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-checkout-review-order-table td { background: transparent !important; border-color: var(--2da-co-border) !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-Price-amount { color: var(--2da-co-text) !important; } body.woocommerce-checkout:not(.woocommerce-order-received) #payment, body.woocommerce-checkout:not(.woocommerce-order-received) #payment ul.payment_methods { background: transparent !important; border-color: var(--2da-co-border) !important; } body.woocommerce-checkout:not(.woocommerce-order-received) #payment div.payment_box { background: rgba(255,255,255,.94) !important; color: var(--2da-co-ink) !important; border-radius: 10px !important; } body.woocommerce-checkout:not(.woocommerce-order-received) #payment div.payment_box::before { border-bottom-color: rgba(255,255,255,.94) !important; } body.woocommerce-checkout:not(.woocommerce-order-received) #payment label { color: var(--2da-co-text) !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-info, body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-message, body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-error { background: rgba(255,255,255,.94) !important; color: var(--2da-co-ink) !important; border-radius: 10px !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-info a, body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-message a { color: #1B4FBF !important; font-weight: 600 !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-terms-and-conditions-wrapper, body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-privacy-policy-text, body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-form__label-for-checkbox span { color: var(--2da-co-soft) !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-terms-and-conditions-wrapper a { color: var(--2da-co-link) !important; text-decoration: underline !important; } body.woocommerce-checkout:not(.woocommerce-order-received) #place_order { background: #E63329 !important; color: #FFFFFF !important; border: 0 !important; border-radius: 12px !important; font-weight: 700 !important; min-height: 54px !important; font-size: 17px !important; } body.woocommerce-checkout:not(.woocommerce-order-received) #place_order:hover { background: #c8271e !important; } /* ════════════ FIN BLOC 2DA CHECKOUT LISIBILITE ════════════ */ /* ════════════ ACCUEIL : HERO ET BANDEAU PROMO MASQUÉS (v1.6.6) ════════════ */ .home .tda-home-block-hidden { display: none !important; } /* Évite un espace résiduel ajouté par certains conteneurs Elementor. */ .home .tda-home-block-hidden + .tda-home-block-hidden { margin-top: 0 !important; } /* ════════════ FIN ACCUEIL v1.6.6 ════════════ */ /* ════════════ ARCHIVES PRODUITS : MASQUER L’IDENTITÉ NATIVE DU THÈME (v1.6.9) ════════════ * Supprime uniquement le bloc natif qui affiche : * « 2DAINFORMATIQUE » + la description du site. * Le fil d’Ariane et le contenu WooCommerce restent visibles. */ body.post-type-archive-product .site-header .site-branding, body.tax-product_cat .site-header .site-branding, body.tax-product_tag .site-header .site-branding { display: none !important; } /* Sécurité pour les variantes de structure du thème Royal Elementor Kit. */ body.post-type-archive-product .site-header .site-title, body.post-type-archive-product .site-header .site-description, body.tax-product_cat .site-header .site-title, body.tax-product_cat .site-header .site-description, body.tax-product_tag .site-header .site-title, body.tax-product_tag .site-header .site-description { display: none !important; } /* ════════════ FIN ARCHIVES PRODUITS v1.6.9 ════════════ */ /* ═══════════════════════════════════════════════════════════════ v1.7.3 — Aperçu Elementor des produits : suppression toolbar brute Le correctif principal est show_admin_bar(false) dans woocommerce/single-product.php. Ces règles sont un garde-fou si un plugin réinjecte malgré tout la barre dans l’iframe de prévisualisation. ═══════════════════════════════════════════════════════════════ */ body.elementor-editor-active #wpadminbar, body.elementor-editor-preview #wpadminbar { display: none !important; } html:has(body.elementor-editor-active), html:has(body.elementor-editor-preview) { margin-top: 0 !important; } body.elementor-editor-active, body.elementor-editor-preview { padding-top: 0 !important; } /* ═══════════════════════════════════════════════ FICHE PRODUIT v1.1 — lisibilite sur fond bleu nuit Fond de page rgb(11,15,42) : le texte noir etait a 1.1:1. La barre d'onglets n'est VOLONTAIREMENT pas touchee : ses
  • ont un fond clair (#fff / #e9e6ed), deja a 7.94 et 6.43. ═══════════════════════════════════════════════ */ body.single-product #site-header{display:none!important} body.single-product .woocommerce-product-details__short-description, body.single-product .woocommerce-product-details__short-description *{color:#e8ecf5!important} body.single-product .woocommerce-product-details__short-description strong, body.single-product .woocommerce-product-details__short-description b{color:#ffffff!important} body.single-product .product_meta, body.single-product .product_meta *{color:#b9c2d6!important} body.single-product .product_meta a{color:#7fb3ff!important} body.single-product .woocommerce-breadcrumb, body.single-product .woocommerce-breadcrumb *{color:#9aa7c2!important} body.single-product .woocommerce-breadcrumb a{color:#7fb3ff!important} body.single-product .woocommerce-Tabs-panel, body.single-product .woocommerce-Tabs-panel *{color:#e8ecf5!important} body.single-product .woocommerce-Tabs-panel h1, body.single-product .woocommerce-Tabs-panel h2, body.single-product .woocommerce-Tabs-panel h3, body.single-product .woocommerce-Tabs-panel h4, body.single-product .woocommerce-Tabs-panel strong, body.single-product .woocommerce-Tabs-panel b{color:#ffffff!important} body.single-product .woocommerce-Tabs-panel a{color:#7fb3ff!important} body.single-product .shop_attributes th, body.single-product .shop_attributes td{color:#e8ecf5!important;border-color:rgba(255,255,255,.12)!important} body.single-product .related > h2, body.single-product .upsells > h2, body.single-product section > h2{color:#ffffff!important} body.single-product .related .woocommerce-loop-product__title, body.single-product .upsells .woocommerce-loop-product__title, body.single-product .related .woocommerce-loop-product__title a, body.single-product .upsells .woocommerce-loop-product__title a{color:#e8ecf5!important} body.single-product .related .price, body.single-product .upsells .price, body.single-product .related .price *, body.single-product .upsells .price *{color:#ffd8d5!important}