:root {
--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
--wd-text-font-weight: 400;
--wd-text-color: rgb(163,163,163);
--wd-text-font-size: 18px;
--wd-title-font: "Inter", Arial, Helvetica, sans-serif;
--wd-title-font-weight: 700;
--wd-title-color: rgb(250,250,250);
--wd-entities-title-font: "Inter", Arial, Helvetica, sans-serif;
--wd-entities-title-font-weight: 600;
--wd-entities-title-color: #333333;
--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
--wd-alternative-font: "Inter", Arial, Helvetica, sans-serif;
--wd-widget-title-font: "Inter", Arial, Helvetica, sans-serif;
--wd-widget-title-font-weight: 600;
--wd-widget-title-transform: uppercase;
--wd-widget-title-color: #333;
--wd-widget-title-font-size: 16px;
--wd-header-el-font: "Inter", Arial, Helvetica, sans-serif;
--wd-header-el-font-weight: 700;
--wd-header-el-transform: uppercase;
--wd-header-el-font-size: 13px;
--wd-otl-style: none;
--wd-primary-color: rgba(21,72,215,0.48);
--wd-alternative-color: rgb(245,194,74);
--btn-default-font-family: "Inter", Arial, Helvetica, sans-serif;
--btn-default-font-weight: 700;
--btn-default-transform: none;
--btn-default-bgcolor: rgb(21,72,215);
--btn-default-bgcolor-hover: rgb(14,50,160);
--btn-default-color: rgb(255,255,255);
--btn-default-color-hover: rgb(255,255,255);
--btn-accented-font-family: "Inter", Arial, Helvetica, sans-serif;
--btn-accented-font-weight: 700;
--btn-accented-transform: none;
--btn-accented-bgcolor: rgb(21,72,215);
--btn-accented-bgcolor-hover: rgb(14,50,160);
--btn-accented-color: rgb(255,255,255);
--btn-accented-color-hover: rgb(255,255,255);
--btn-font-family: "Inter", Arial, Helvetica, sans-serif;
--btn-font-weight: 700;
--btn-transform: none;
--btn-color: rgb(255,255,255);
--btn-font-size: 14px;
--btn-bgcolor: rgb(21,72,215);
--btn-padding: 14px 28px 14px 28px;
--btn-bgcolor-hover: rgb(14,50,160);
--wd-form-brd-width: 0px;
--notices-success-bg: rgb(26,26,31);
--notices-success-color: rgb(34,197,94);
--notices-warning-bg: rgb(26,26,31);
--notices-warning-color: rgb(239,68,68);
--wd-link-color: #333333;
--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
background-color: #111111;
background-image: none;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.wd-promo-popup-wrap {
--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
object-fit: cover;
object-position: center center;
}
.wd-footer {
background-color: #1A1F2E7A;
background-image: url(https://zyntrol.com/wp-content/uploads/2026/06/zyntrol-footer-bg-dark.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
background-color: rgba(0,0,0,0);
background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
background-color: rgba(255,255,255,0);
background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
background-color: rgba(0,0,0,0);
background-image: none;
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
--wd-form-color: rgb(250,250,250);
--wd-form-placeholder-color: rgb(168,168,179);
--wd-form-brd-color: rgba(255,255,255,0.08);
--wd-form-brd-color-focus: rgb(88,101,242);
}
.wd .product-label.new {
background-color: rgb(79,141,255);
}
.wd .product-label.out-of-stock {
background-color: rgb(61,61,61);
color: rgb(255,255,255);
}
.mfp-wrap.wd-popup-quick-view-wrap {
--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1280px;
--wd-form-brd-radius: 5px;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 12px;
}
@media (min-width: 1280px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}
/* ============================================================
ZYNTROL DESIGN SYSTEM — Global override Woodmart + Elementor
============================================================ */
/* 1. Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700;800&display=swap');
/* 2. Tokens */
:root {
--zyn-primary: #1548D7;
--zyn-primary-hover: #0E32A0;
--zyn-primary-light: #3D6FE8;
--zyn-primary-glow: rgba(21, 72, 215, .22);
--zyn-premium: #F5C24A;
--zyn-bg: #0a0a0f;
--zyn-card: #1c1c22;
--zyn-card-hover: #1d1d28;
--zyn-text: #FAFAFA;
--zyn-muted: #9CA3AF;
--zyn-border: rgba(255,255,255,.06);
--zyn-border-strong: rgba(255,255,255,.12);
--zyn-success: #22C55E;
--zyn-danger: #EF4444;
--zyn-radius-sm: 10px;
--zyn-radius: 14px;
--zyn-radius-lg: 16px;
--zyn-radius-xl: 24px;
--zyn-radius-pill: 999px;
--zyn-shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -12px rgba(0,0,0,.7);
--zyn-shadow-glow: 0 6px 20px -6px var(--zyn-primary-glow);
--zyn-shadow-glow-strong: 0 0 24px -4px rgba(21, 72, 215,.55), 0 0 70px -10px var(--zyn-primary-glow);
--zyn-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--zyn-font-title: "Inter", sans-serif;
}
/* 3. Base body */
body {
background: var(--zyn-bg) !important;
color: var(--zyn-text);
font-family: var(--zyn-font-body);
font-size: 16px;
line-height: 1.5;
}
/* 4. Titres */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.woodmart-title-container .title {
font-family: var(--zyn-font-title) !important;
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.1;
color: var(--zyn-text);
}
h1, .elementor-heading-title.elementor-size-xxl { font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 800; }
h2, .elementor-heading-title.elementor-size-xl { font-size: 2rem; }
h3, .elementor-heading-title.elementor-size-large { font-size: 1.25rem; }
/* 5. Liens */
a { color: #3D87E8; transition: color .2s ease; }
a:hover { color: #3D6FE8; }
/* Couleur de tous les prix WooCommerce */
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
.woocommerce .price,
.woocommerce-page .price,
.wd-price,
.product-price,
.amount {
color: #3D87E8 !important; /* jaune premium #F5C24A */
}
/* Prix barré (ancien prix) : plus discret */
.woocommerce-Price-amount del,
.price del .woocommerce-Price-amount,
.price del .amount,
.product-price del {
color: var(--zyn-muted) !important;
opacity: 0.7;
}
/* 6. BOUTONS — Ciblage précis (opt-in) */
.elementor-widget-button .elementor-button,
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce #respond input#submit,
input[type="submit"]:not(.search-submit):not(.wd-search-button),
.zyn-btn {
background: linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary-light)) !important;
color: #FFFFFF !important;
border: 0 !important;
border-radius: var(--zyn-radius-sm) !important;
font-family: var(--zyn-font-body) !important;
font-weight: 700 !important;
letter-spacing: .02em;
box-shadow: var(--zyn-shadow-glow) !important;
transition: all .25s ease !important;
text-transform: uppercase !important;
cursor: pointer;
}
.elementor-widget-button .elementor-button:hover,
.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover,
.woocommerce #respond input#submit:hover,
input[type="submit"]:not(.search-submit):not(.wd-search-button):hover,
.zyn-btn:hover {
background: linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary)) !important;
box-shadow: var(--zyn-shadow-glow) !important;
transform: none;
}
/* B. Exclusions explicites */
.whb-header .wd-button,
.whb-header .button,
.wd-dropdown .button,
.widget_shopping_cart .button,
.wd-search-form button,
.wd-nav button,
.quantity .button,
.wd-products-tabs .button {
background: initial !important;
box-shadow: none !important;
text-transform: none !important;
transform: none !important;
}
/* 7. CARTES & BLOCS */
.elementor-widget-container,
.wd-card, .woodmart-card,
.product-grid-item,
.card {
border-radius: var(--zyn-radius);
}
.zyn-card,
.elementor-widget.zyn-card > .elementor-widget-container {
background: var(--zyn-card) !important;
border: 1px solid var(--zyn-border) !important;
border-radius: var(--zyn-radius) !important;
box-shadow: var(--zyn-shadow-card);
padding: 24px;
transition: border-color .25s ease, background .25s ease;
}
.zyn-card:hover {
background: var(--zyn-card-hover) !important;
border-color: var(--zyn-border-strong) !important;
}
/* 8. FORMULAIRES */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
input[type="url"], textarea, select,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
background: rgba(255,255,255,.04) !important;
border: 1px solid var(--zyn-border) !important;
border-radius: var(--zyn-radius-sm) !important;
color: var(--zyn-text) !important;
padding: 12px 14px !important;
font-family: var(--zyn-font-body) !important;
font-size: 14px !important;
transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus {
outline: none !important;
border-color: var(--zyn-primary) !important;
box-shadow: 0 0 0 3px rgba(21, 72, 215,.18) !important;
}
::placeholder { color: var(--zyn-muted) !important; opacity: 1; }
label, .elementor-field-label {
color: var(--zyn-text) !important;
font-weight: 600 !important;
font-size: 13px !important;
margin-bottom: 6px !important;
}
/* ============================================================
FIX FLUENT FORMS BUTTONS
============================================================ */
.fluentform .ff-btn.ff-btn-submit,
.fluentform button.ff-btn-submit,
.fluentform input[type="submit"].ff-btn-submit {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 14px 32px !important;
min-height: 48px !important;
width: auto !important;
background: linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary-light)) !important;
color: #FFFFFF !important;
border: 0 !important;
border-radius: var(--zyn-radius-sm) !important;
font-family: var(--zyn-font-title) !important;
font-weight: 700 !important;
font-size: 14px !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
box-shadow: var(--zyn-shadow-glow) !important;
transition: all .25s ease !important;
cursor: pointer !important;
}
.fluentform .ff-btn.ff-btn-submit:hover {
background: linear-gradient(135deg, var(--zyn-primary-hover), var(--zyn-primary)) !important;
box-shadow: var(--zyn-shadow-glow-strong) !important;
transform: none;
}
/* 8.5 FIX QUANTITÉ — ÉPURÉ & MINI */
.quantity {
display: inline-flex !important;
align-items: center !important;
height: 28px !important; /* Hauteur réduite */
background: rgba(255, 255, 255, 0.03) !important; /* Fond ultra discret */
border-radius: var(--zyn-radius-sm) !important;
padding: 0 4px !important;
}
.quantity input[type=button],
.quantity .plus,
.quantity .minus {
width: 26px !important; /* Plus petit */
height: 26px !important; /* Plus petit */
padding: 0 !important;
line-height: 26px !important;
font-size: 14px !important;
background: transparent !important; /* Pas de fond moche */
border: none !important; /* Pas de bordure interne */
color: var(--zyn-muted) !important;
box-shadow: none !important;
transform: none !important;
transition: color .2s ease !important;
cursor: pointer;
}
.quantity input[type=number] {
height: 26px !important;
width: 32px !important; /* Moins large */
border: none !important; /* Nettoyage des bordures */
background: transparent !important; /* Pas de fond */
color: var(--zyn-text) !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
font-size: 13px !important;
}
.quantity input[type=button]:hover,
.quantity .plus:hover,
.quantity .minus:hover {
background: transparent !important;
color: var(--zyn-primary-light) !important; /* Lueur au survol sans fond */
}
/* 9. Badges & pills (BASE — version unique) */
.zyn-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
border-radius: var(--zyn-radius-pill);
font-family: var(--zyn-font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1;
border: 1px solid var(--zyn-border-strong);
background: rgba(21, 72, 215,.10);
color: var(--zyn-primary);
}
.zyn-badge-gold {
background: rgba(245, 194, 74, .10);
border: 1px solid rgba(245, 194, 74, .45);
color: var(--zyn-premium);
box-shadow: 0 0 24px -8px rgba(245, 194, 74, .35);
padding: 12px 26px;
font-size: 10px;
}
.zyn-badge-outline {
background: rgba(21, 72, 215, .06);
border: 1px solid rgba(21, 72, 215, .45);
color: var(--zyn-primary-light);
box-shadow: 0 0 24px -8px rgba(21, 72, 215, 0.35);
padding: 12px 26px;
font-size: 10px;
}
/*
.zyn-badge-outline {
background: rgba(21, 72, 215, .06);
border: 1px solid rgba(21, 72, 215, .45);
color: var(--zyn-primary-light);
box-shadow: 0 0 24px -8px rgba(21, 72, 215, 0.35);
}
/* 10. Texte gradient */
.zyn-gradient-text {
background: linear-gradient(135deg, var(--zyn-primary) 0%, var(--zyn-primary-light) 60%, #B9D4FF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.zyn-gradient-premium {
background: linear-gradient(135deg, var(--zyn-premium), #FFE08A);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* 11. Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--zyn-bg); }
::-webkit-scrollbar-thumb { background: var(--zyn-border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--zyn-primary); }
.widget_shopping_cart .cart_list li > a.product-image,
.widget_shopping_cart .mini_cart_item > a:first-child {
display: none !important;
}
/* ============================================================
12. FOND NOIR + LUEUR
============================================================ */
body:not(.wp-admin):not(.wp-customizer-unloading):not([class*="woomail"]) {
background: var(--zyn-bg) !important;
color: var(--zyn-text);
font-family: var(--zyn-font-body);
font-size: 16px;
line-height: 1.5;
}
html:not(.wp-toolbar) body:not(.wp-admin):not([class*="woomail"]) {
background-color: #000000 !important;
}
#wrapper, .website-wrapper, .main-page-wrapper,
#main, .site-content, .main-content, .container-wrapper {
background-color: transparent !important;
}
body { position: relative; max-width: 100vw; overflow-x: clip; }
body::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 900px;
pointer-events: none; z-index: 0;
background: radial-gradient(
ellipse 50% 100% at 5% 0%,
rgba(21, 72, 215, 0.22) 0%,
rgba(21, 72, 215, 0.10) 35%,
transparent 75%
);
}
#wrapper { position: relative; z-index: 1; }
@media (max-width: 1024px) {
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }
.whb-clone, .whb-clone.whb-sticked {
top: 0 !important; margin-top: 0 !important; padding-top: 0 !important;
}
.whb-sticky-row { margin-top: 0 !important; padding-top: 0 !important; }
.whb-clone .whb-top-bar { display: none !important; }
}
/* APRÈS */
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout #payment .payment_box *,
.woocommerce-checkout .wc_payment_method label,
.woocommerce-checkout [class*="wc-stripe"] *,
.woocommerce-checkout [class*="StripeElement"] {
color: #fff !important;
}
/* ============================================================
13. SIDE CART — Boutons
============================================================ */
.widget_shopping_cart .buttons .button.wc-forward:not(.checkout),
.wd-cart-drop .buttons .button:not(.checkout),
.wd-side-hidden .buttons .button:not(.checkout) {
display: inline-flex !important;
align-items: center; justify-content: center;
width: 100%;
padding: 12px 20px !important;
margin-bottom: 10px !important;
background: transparent !important;
color: var(--zyn-text) !important;
border: 1px solid var(--zyn-border-strong) !important;
border-radius: var(--zyn-radius-sm) !important;
font-family: var(--zyn-font-body) !important;
font-weight: 600 !important; font-size: 14px !important;
text-transform: uppercase !important; letter-spacing: .04em;
box-shadow: none !important;
transition: all .25s ease !important;
cursor: pointer;
}
.widget_shopping_cart .buttons .button.wc-forward:not(.checkout):hover,
.wd-cart-drop .buttons .button:not(.checkout):hover,
.wd-side-hidden .buttons .button:not(.checkout):hover {
background: var(--zyn-card-hover) !important;
border-color: var(--zyn-primary) !important;
color: var(--zyn-primary) !important;
}
.widget_shopping_cart .buttons .button.checkout,
.wd-cart-drop .buttons .button.checkout,
.wd-side-hidden .buttons .button.checkout {
display: inline-flex !important;
align-items: center; justify-content: center;
width: 100%;
padding: 13px 20px !important;
background: linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary-light)) !important;
color: #FFFFFF !important;
border: 0 !important;
border-radius: var(--zyn-radius-sm) !important;
font-family: var(--zyn-font-body) !important;
font-weight: 700 !important; font-size: 14px !important;
text-transform: uppercase !important; letter-spacing: .04em;
box-shadow: var(--zyn-shadow-glow) !important;
transition: all .25s ease !important;
cursor: pointer;
}
.widget_shopping_cart .buttons .button.checkout:hover,
.wd-cart-drop .buttons .button.checkout:hover,
.wd-side-hidden .buttons .button.checkout:hover {
background: linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary)) !important;
box-shadow: var(--zyn-shadow-glow) !important;
transform: none;
}
/* ============================================================
14. PILLS, INFO CARDS, RATING, BOUTONS HERO, HALOS
============================================================ */
.zyn-btn-pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 26px;
border-radius: var(--zyn-radius-pill);
background: linear-gradient(180deg, #1a1f3a, #11142a);
border: 1px solid rgba(21, 72, 215, .35);
color: var(--zyn-text) !important;
font-family: var(--zyn-font-body);
font-size: 13px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
text-decoration: none !important;
box-shadow: var(--zyn-shadow-glow);
transition: all .25s ease;
}
.zyn-btn-pill:hover {
transform: none;
border-color: var(--zyn-primary);
box-shadow: var(--zyn-shadow-glow-strong);
color: #fff !important;
}
.zyn-btn-pill svg { color: var(--zyn-primary-light); }
.zyn-info-card {
display: inline-flex; align-items: center; gap: 14px;
padding: 14px 22px 14px 16px;
background: rgba(20, 22, 40, .85);
backdrop-filter: blur(12px);
border: 1px solid var(--zyn-border-strong);
border-radius: var(--zyn-radius-lg);
box-shadow: var(--zyn-shadow-card);
}
.zyn-info-card__icon {
display: grid; place-items: center;
width: 40px; height: 40px;
border-radius: 12px;
background: rgba(21, 72, 215, .15);
color: var(--zyn-primary-light);
}
.zyn-info-card__title {
font-family: var(--zyn-font-title);
font-weight: 700; font-size: 15px;
color: var(--zyn-text); line-height: 1.2;
}
.zyn-info-card__sub { font-size: 12px; color: var(--zyn-muted); margin-top: 2px; }
.zyn-rating-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: rgba(20, 22, 40, .85);
backdrop-filter: blur(12px);
border: 1px solid rgba(245, 194, 74, .35);
border-radius: var(--zyn-radius-pill);
color: var(--zyn-text);
font-size: 14px; font-weight: 600;
box-shadow: 0 4px 20px -6px rgba(0,0,0,.5);
}
.zyn-rating-pill svg { color: var(--zyn-premium); }
.zyn-rating-pill strong { font-weight: 700; }
.zyn-rating-pill__sub { color: var(--zyn-muted); font-weight: 500; }
/* BOUTONS HERO */
.zyn-btn-hero,
.zyn-btn-hero .elementor-button-wrapper {
background: transparent !important;
border: 0 !important; box-shadow: none !important;
padding: 0 !important; border-radius: 0 !important;
display: inline-block !important; width: auto !important;
}
.zyn-btn-hero .elementor-button,
.zyn-btn-hero a.elementor-button {
all: unset; box-sizing: border-box !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 10px !important;
padding: 14px 28px !important;
font-size: 16px !important; font-weight: 700 !important;
letter-spacing: .01em !important;
font-family: var(--zyn-font-title) !important;
text-transform: none !important; text-decoration: none !important;
text-align: center !important; line-height: 1 !important;
white-space: nowrap !important; cursor: pointer !important;
color: #fff !important;
background: linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary-light)) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: var(--zyn-radius-xl, 10px) !important;
box-shadow: 0 6px 20px -6px rgba(21, 72, 215,.55), inset 0 1px 0 rgba(255,255,255,.18) !important;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.zyn-btn-hero .elementor-button:hover {
background: linear-gradient(135deg, #5C97FF 0%, #4578E8 100%) !important;
transform: none !important;
box-shadow: 0 6px 20px -6px rgba(21, 72, 215,.55), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.zyn-btn-hero .elementor-button .elementor-button-icon,
.zyn-btn-hero .elementor-button .elementor-button-icon svg {
width: 18px !important; height: 18px !important; fill: currentColor !important;
}
.zyn-btn-hero.zyn-btn-hero--ghost .elementor-button {
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.15) !important;
color: #fff !important; box-shadow: none !important;
}
.zyn-btn-hero.zyn-btn-hero--ghost .elementor-button:hover {
background: rgba(21, 72, 215,.12) !important;
border-color: rgba(21, 72, 215,.55) !important;
transform: none !important;
}
/* Variante OR (premium) — bouton hero jaune */
.zyn-btn-hero.zyn-btn-hero--gold .elementor-button {
background: linear-gradient(135deg, var(--zyn-premium) 0%, #FFE08A 100%) !important;
color: #1a1207 !important;
border: 1px solid rgba(255,255,255,.18) !important;
box-shadow:
0 6px 20px -6px rgba(245,194,74,.55),
inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.zyn-btn-hero.zyn-btn-hero--gold .elementor-button:hover {
background: linear-gradient(135deg, #FFD160 0%, #E8A92E 100%) !important;
transform: none !important;
box-shadow:
box-shadow: 0 6px 15px -4px rgba(245,194,74,.55), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.zyn-btn-hero.zyn-btn-hero--gold .elementor-button .elementor-button-icon svg {
fill: #1a1207 !important;
}
.zyn-btn-hero.zyn-btn-hero--jaune .elementor-button {
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.15) !important;
color: #fff !important; box-shadow: none !important;
}
.zyn-btn-hero.zyn-btn-hero--jaune .elementor-button:hover {
background: rgba(245,194,74,0.12) !important;
border-color: rgba(245,194,74,0.55) !important;
transform: non !important;
}
/* Variante Bleu — bouton hero bleu */
.zyn-btn-hero.zyn-btn-hero--bleu .elementor-button {
background: rgba(21, 72, 215,.12) !important;
border: 1px solid #1548D7 !important;
color: #fff !important; box-shadow: none !important;
}
.zyn-btn-hero.zyn-btn-hero--bleu .elementor-button:hover {
background: rgba(21, 72, 215,.12) !important;
border-color: rgba(21, 72, 215,.55) !important;
transform: non !important;
}
/* Variante Blanc — bouton hero blanc */
.zyn-btn-hero.zyn-btn-hero--white .elementor-button,
.zyn-btn-hero.zyn-btn-hero--blanc .elementor-button {
background: #FFFFFF !important;
color: #050505 !important;
border: 1px solid rgba(255,255,255,.35) !important;
box-shadow:
0 6px 20px -6px rgba(255,255,255,.35),
inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.zyn-btn-hero.zyn-btn-hero--white .elementor-button:hover,
.zyn-btn-hero.zyn-btn-hero--blanc .elementor-button:hover {
background: #F2F2F2 !important;
color: #050505 !important;
border-color: rgba(255,255,255,.55) !important;
transform: none !important;
box-shadow:
0 6px 20px -6px rgba(255,255,255,.45),
inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.zyn-btn-hero.zyn-btn-hero--white .elementor-button .elementor-button-icon svg,
.zyn-btn-hero.zyn-btn-hero--blanc .elementor-button .elementor-button-icon svg {
fill: #050505 !important;
color: #050505 !important;
}
@media (max-width: 768px) {
.zyn-btn-hero { width: 100% !important; display: block !important; }
.zyn-btn-hero .elementor-button {
padding: 12px 20px !important; font-size: 15px !important; width: 100% !important;
}
}
/* ============================================================
HALOS — BLEU (.zyn-icon-circle)
Woodmart Info Box + Elementor Icon + Elementor Image
============================================================ */
/* --- Woodmart Info Box --- */
.zyn-icon-circle .wd-info-box-icon-wrapper,
.zyn-icon-circle .info-box-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 55px !important;
height: 55px !important;
border-radius: 20px !important;
background: rgba(21, 72, 215,.12) !important;
background-color: rgba(21, 72, 215,.12) !important;
background-image: none !important;
border: 1px solid rgba(21, 72, 215,.35) !important;
box-shadow: none !important;
padding: 6px !important;
box-sizing: border-box !important;
transition: all .25s ease !important;
margin-bottom: 12px;
overflow: hidden !important;
}
.zyn-icon-circle .info-box-icon .info-svg-wrapper,
.zyn-icon-circle .info-box-icon img,
.zyn-icon-circle .info-box-icon svg {
width: 100% !important;
height: 100% !important;
max-width: 30px !important;
max-height: 30px !important;
display: block !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.zyn-icon-circle .info-box-icon svg path,
.zyn-icon-circle .info-box-icon svg * { stroke: #1548D7 !important; }
/* --- Elementor Icon widget --- */
.zyn-icon-circle.elementor-widget-icon .elementor-icon,
.zyn-icon-circle .elementor-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
border-radius: 20px !important;
background: rgba(21, 72, 215,.12) !important;
border: 1px solid rgba(21, 72, 215,.35) !important;
padding: 14px !important;
box-sizing: border-box !important;
transition: all .25s ease !important;
}
.zyn-icon-circle .elementor-icon svg,
.zyn-icon-circle .elementor-icon i {
width: 100% !important;
height: 100% !important;
font-size: 28px !important;
color: #1548D7 !important;
fill: #1548D7 !important;
}
.zyn-icon-circle .elementor-icon svg path,
.zyn-icon-circle .elementor-icon svg * { fill: #1548D7 !important; }
/* --- Elementor Image widget --- */
.zyn-icon-circle.elementor-widget-image .elementor-image,
.zyn-icon-circle .elementor-widget-image .elementor-image,
.zyn-icon-circle figure,
.zyn-icon-circle a {
display: inline-block !important;
line-height: 0 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.zyn-icon-circle.elementor-widget-image .elementor-image img,
.zyn-icon-circle.elementor-widget-image img,
.zyn-icon-circle .elementor-widget-image img,
.zyn-icon-circle img {
display: block !important;
width: 64px !important;
height: 64px !important;
max-width: 64px !important;
max-height: 64px !important;
padding: 14px !important;
background: rgba(21, 72, 215,.12) !important;
border: 1px solid rgba(21, 72, 215,.35) !important;
border-radius: 20px !important;
object-fit: contain !important;
box-sizing: border-box !important;
transition: all .25s ease !important;
}
/* ============================================================
HALOS — GOLD (.zyn-icon-gold)
Aligné sur .zyn-icon-circle (mêmes tailles)
============================================================ */
/* --- Woodmart Info Box --- */
.zyn-icon-gold .wd-info-box-icon-wrapper,
.zyn-icon-gold .info-box-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 55px !important;
height: 55px !important;
border-radius: 20px !important;
background: rgba(245,194,74,.14) !important;
background-color: rgba(245,194,74,.14) !important;
background-image: none !important;
border: 1px solid rgba(245,194,74,.45) !important;
box-shadow: none !important;
padding: 6px !important;
box-sizing: border-box !important;
transition: all .25s ease !important;
margin-bottom: 12px;
overflow: hidden !important;
}
.zyn-icon-gold .info-box-icon .info-svg-wrapper,
.zyn-icon-gold .info-box-icon img,
.zyn-icon-gold .info-box-icon svg {
width: 100% !important;
height: 100% !important;
max-width: 30px !important;
max-height: 30px !important;
display: block !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.zyn-icon-gold .info-box-icon svg path,
.zyn-icon-gold .info-box-icon svg * {
stroke: #F5C24A !important;
fill: #F5C24A !important;
}
/* --- Elementor Icon widget --- */
.zyn-icon-gold.elementor-widget-icon .elementor-icon,
.zyn-icon-gold .elementor-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
border-radius: 20px !important;
background: rgba(245,194,74,.14) !important;
border: 1px solid rgba(245,194,74,.45) !important;
padding: 14px !important;
box-sizing: border-box !important;
transition: all .25s ease !important;
}
.zyn-icon-gold .elementor-icon svg,
.zyn-icon-gold .elementor-icon i {
width: 100% !important;
height: 100% !important;
font-size: 28px !important;
color: #F5C24A !important;
fill: #F5C24A !important;
}
.zyn-icon-gold .elementor-icon svg path,
.zyn-icon-gold .elementor-icon svg * { fill: #F5C24A !important; }
/* --- Elementor Image widget --- */
.zyn-icon-gold.elementor-widget-image .elementor-image,
.zyn-icon-gold .elementor-widget-image .elementor-image,
.zyn-icon-gold figure,
.zyn-icon-gold a {
display: inline-block !important;
line-height: 0 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.zyn-icon-gold.elementor-widget-image .elementor-image img,
.zyn-icon-gold.elementor-widget-image img,
.zyn-icon-gold .elementor-widget-image img,
.zyn-icon-gold img {
display: block !important;
width: 64px !important;
height: 64px !important;
max-width: 64px !important;
max-height: 64px !important;
padding: 14px !important;
background: rgba(245,194,74,.14) !important;
border: 1px solid rgba(245,194,74,.45) !important;
border-radius: 20px !important;
object-fit: contain !important;
box-sizing: border-box !important;
transition: all .25s ease !important;
}
/* ==========================================================================
ZYNTROL — CART (PANIER) — VERSION FINALE PURGÉE
========================================================================== */
/* --------------------------------------------------------------------------
1. TYPO, LISIBILITÉ & RESPONSIVE
-------------------------------------------------------------------------- */
.woocommerce-cart,
.woocommerce-checkout {
font-size: 14px !important;
}
.woocommerce-cart .cart-table-section table th,
.woocommerce-checkout form.checkout label,
.woocommerce-checkout #order_review table th {
font-size: 14px !important;
font-weight: 600;
}
.woocommerce-cart .cart-totals-section,
.woocommerce-checkout #order_review {
font-size: 13px !important;
}
/* --------------------------------------------------------------------------
2. NETTOYAGE DES ÉLÉMENTS SUPERFLUS
-------------------------------------------------------------------------- */
.cart_totals table.shop_table tr.cart-subtotal { display: none !important; }
.woocommerce-cart-form .woocommerce-shipping-calculator,
.cart_totals .woocommerce-shipping-calculator { display: none !important; }
.woocommerce-cart-form table.cart thead { display: none !important; }
/* --------------------------------------------------------------------------
3. STRUCTURE ET NETTOYAGE DES BORDURES INTERNES
-------------------------------------------------------------------------- */
.woocommerce-cart-form table.shop_table {
width: 100% !important;
border-collapse: collapse !important;
}
@media (min-width: 769px) {
.woocommerce-cart-form table.shop_table td {
border-bottom: none !important;
border-top: none !important;
vertical-align: middle !important;
padding: 20px 12px !important;
}
}
/* Belle ligne de séparation sous chaque produit — garde tel quel */
.woocommerce-cart-form table.shop_table tr.cart_item {
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* --------------------------------------------------------------------------
4. ALIGNEMENTS DES COLONNES HORS TITRE
========================================================================== */
/* --------------------------------------------------------------------------
4. ALIGNEMENTS DES COLONNES — DESKTOP UNIQUEMENT
-------------------------------------------------------------------------- */
@media (min-width: 769px) {
.woocommerce-cart-form table.shop_table td.product-remove {
text-align: center !important;
width: 40px;
}
.woocommerce-cart-form table.shop_table td.product-thumbnail {
text-align: center !important;
width: 80px;
}
.woocommerce-cart-form table.shop_table td.product-price,
.woocommerce-cart-form table.shop_table td.product-subtotal {
text-align: right !important;
white-space: nowrap !important;
}
.woocommerce-cart-form table.shop_table td.product-quantity {
text-align: center !important;
}
}
/* Cache le sélecteur de quantité quand WooCommerce le marque caché — global OK */
.cart_item .quantity.hidden {
display: none !important;
}
/* --------------------------------------------------------------------------
5. INTERACTION DU MULTI-SÉLECTEUR DE QUANTITÉ (PANIER MINI)
-------------------------------------------------------------------------- */
.woocommerce-cart-form .quantity {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 28px !important;
background: rgba(255, 255, 255, 0.03) !important;
border-radius: var(--zyn-radius-sm) !important;
padding: 0 4px !important;
}
.woocommerce-cart-form .quantity .qty {
width: 32px !important;
height: 26px !important;
text-align: center !important;
padding: 0 !important;
font-size: 13px !important;
background: transparent !important;
border: none !important;
}
.woocommerce-cart-form .quantity .minus,
.woocommerce-cart-form .quantity .plus {
width: 26px !important;
height: 26px !important;
padding: 0 !important;
line-height: 26px !important;
background: transparent !important;
border: none !important;
color: var(--zyn-muted) !important;
}
/* --------------------------------------------------------------------------
6. CELLULE PRODUIT — DESKTOP UNIQUEMENT
-------------------------------------------------------------------------- */
@media (min-width: 769px) {
.woocommerce-cart-form table.shop_table td.product-name {
text-align: left;
vertical-align: middle;
}
.woocommerce-cart-form table.shop_table td.product-name > .variation {
display: block;
width: 100%;
margin-top: 12px;
padding-left: 0;
list-style: none;
}
.product-name .variation li {
margin: 4px 0;
line-height: 1.5;
}
}
/* Titre ZRC — global, inoffensif */
.zrc-cart-item-name__title {
font-weight: 700;
}
/* --------------------------------------------------------------------------
7. IMAGES DES PRODUITS (THUMBNAIL)
-------------------------------------------------------------------------- */
.woocommerce-cart-form td.product-thumbnail img {
max-width: 65px !important;
height: auto !important;
object-fit: contain !important;
display: inline-block !important;
}
/* Supprime la colonne vide au-dessus du header mobile */
.whb-column.whb-empty-column {
display: none !important;
}
/* Sécurité : supprime aussi les rows mobiles entièrement vides */
.whb-row .whb-col-mobile.whb-empty-column {
display: none !important;
}
.whb-main-header .whb-row:has(> .whb-col-mobile.whb-empty-column:only-child) {
display: none !important;
}
@media (max-width: 1024px) {
.whb-main-header .whb-row:empty,
.whb-main-header .whb-row:not(:has(.whb-column:not(.whb-empty-column))) {
display: none !important;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
}
/* Ne pas casser la preview email Kadence (fond blanc) */
.kadence_woomail_designer,
.kadence_woomail_designer *,
#customize-preview iframe,
body.wp-customizer-unloading,
body[class*="woomail"],
body[class*="woomail"] * {
color: revert !important;
background-color: revert !important;
}
/* ===== Fix WordPress Customizer / Kadence Email Designer admin ===== */
body.wp-customizer,
body.wp-customizer #customize-controls,
body.wp-customizer #customize-theme-controls,
body.wp-customizer .customize-pane-child,
body.wp-customizer .customize-control,
body.wp-customizer .customize-control label,
body.wp-customizer .customize-control-title,
body.wp-customizer .customize-control-description,
body.wp-customizer .accordion-section-title,
body.wp-customizer .description,
body.wp-customizer span,
body.wp-customizer p,
body.wp-customizer li {
color: #1d2327 !important;
}
body.wp-customizer input,
body.wp-customizer select,
body.wp-customizer textarea {
color: #1d2327 !important;
background: #ffffff !important;
border-color: #8c8f94 !important;
}
body.wp-customizer .button,
body.wp-customizer .button-secondary {
color: #1d2327 !important;
}
/* ============================================================
ZYNTROL — STRUCTURE VERTICALE ET ÉTENDUE
============================================================ */
/* 1. On force la ligne d'expédition à redevenir un bloc pleine largeur */
tr.woocommerce-shipping-totals.shipping {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
margin-bottom: 15px !important;
}
/* 2. Le titre "Expédition" devient un bloc complet au-dessus */
tr.woocommerce-shipping-totals.shipping th {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 10px 0 !important;
border-bottom: 1px solid #333 !important; /* Ligne de séparation haute */
}
/* 3. La cellule (td) prend toute la largeur sous le titre */
tr.woocommerce-shipping-totals.shipping td {
display: block !important;
width: 100% !important;
padding: 15px 0 !important; /* Espace autour de la carte */
border-bottom: 1px solid #333 !important; /* Ligne de séparation basse */
}
/* 4. On force la carte à s'étendre au maximum */
.zsm-card {
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 5. Petit espace entre l'adresse et la fin du bloc */
.woocommerce-shipping-destination {
display: block !important;
margin-top: 15px !important;
line-height: 1.4 !important;
}
/* ============================================================
ZYNTROL — FLUENT FORMS THEME (responsive)
============================================================ */
/* Conteneur global */
.fluentform:not(.fluentform_wrapper_7) .ff-el-group,
.fluentform:not(.fluentform_wrapper_7) .ff-el-input--content {
font-family: var(--zyn-font-body) !important;
color: var(--zyn-text);
}
.fluentform:not(.fluentform_wrapper_7) {
background: transparent !important;
color: var(--zyn-text) !important;
}
/* ---------- 1. LABELS ---------- */
.fluentform:not(.fluentform_wrapper_7) .ff-el-input--label label,
.fluentform:not(.fluentform_wrapper_7) label.ff-el-form-check-label,
.fluentform:not(.fluentform_wrapper_7) .ff_step_title,
.fluentform:not(.fluentform_wrapper_7) legend {
color: var(--zyn-text) !important;
font-family: var(--zyn-font-body) !important;
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: .01em;
margin-bottom: 6px !important;
}
.fluentform:not(.fluentform_wrapper_7) .ff-el-is-required.asterisk-right label:after,
.fluentform:not(.fluentform_wrapper_7) .ff-el-is-required label:after {
color: var(--zyn-danger) !important;
}
/* ---------- 2. CHAMPS (inputs, textarea, select) ---------- */
.fluentform:not(.fluentform_wrapper_7) input[type="text"],
.fluentform:not(.fluentform_wrapper_7) input[type="email"],
.fluentform:not(.fluentform_wrapper_7) input[type="tel"],
.fluentform:not(.fluentform_wrapper_7) input[type="url"],
.fluentform:not(.fluentform_wrapper_7) input[type="number"],
.fluentform:not(.fluentform_wrapper_7) input[type="password"],
.fluentform:not(.fluentform_wrapper_7) input[type="search"],
.fluentform:not(.fluentform_wrapper_7) input[type="date"],
.fluentform:not(.fluentform_wrapper_7) input[type="time"],
.fluentform:not(.fluentform_wrapper_7) input[type="datetime-local"],
.fluentform:not(.fluentform_wrapper_7) textarea,
.fluentform:not(.fluentform_wrapper_7) select,
.fluentform:not(.fluentform_wrapper_7) .ff-el-form-control,
.fluentform:not(.fluentform_wrapper_7) .ff_repeater_table input,
.fluentform:not(.fluentform_wrapper_7) .ff-el-rating input {
background: #202026 !important;
border: 1px solid var(--zyn-border) !important;
border-radius: var(--zyn-radius-sm) !important;
color: var(--zyn-text) !important;
padding: 12px 14px !important;
font-family: var(--zyn-font-body) !important;
font-size: 14px !important;
line-height: 1.4 !important;
width: 100% !important;
box-shadow: none !important;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.fluentform:not(.fluentform_wrapper_7) textarea {
min-height: 120px;
resize: vertical;
}
/* Focus */
.fluentform:not(.fluentform_wrapper_7) input:focus,
.fluentform:not(.fluentform_wrapper_7) textarea:focus,
.fluentform:not(.fluentform_wrapper_7) select:focus,
.fluentform:not(.fluentform_wrapper_7) .ff-el-form-control:focus {
outline: none !important;
border-color: var(--zyn-primary) !important;
background: rgba(255,255,255,.06) !important;
box-shadow: 0 0 0 3px rgba(21, 72, 215,.18) !important;
}
/* Placeholders */
.fluentform:not(.fluentform_wrapper_7) ::placeholder { color: var(--zyn-muted) !important; opacity: 1; }
.fluentform:not(.fluentform_wrapper_7) ::-webkit-input-placeholder { color: var(--zyn-muted) !important; }
/* Select natif : flèche custom */
.fluentform:not(.fluentform_wrapper_7) select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
padding-right: 38px !important;
}
/* Select2 (souvent utilisé par Fluent Forms) */
.fluentform:not(.fluentform_wrapper_7) .ff_has_search_select + .select2 .select2-selection,
.fluentform:not(.fluentform_wrapper_7) .select2-container .select2-selection--single,
.fluentform:not(.fluentform_wrapper_7) .select2-container .select2-selection--multiple {
background: rgba(255,255,255,.04) !important;
border: 1px solid var(--zyn-border) !important;
border-radius: var(--zyn-radius-sm) !important;
color: var(--zyn-text) !important;
min-height: 44px !important;
padding: 4px 8px !important;
}
.fluentform:not(.fluentform_wrapper_7) .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--zyn-text) !important;
line-height: 36px !important;
padding-left: 6px !important;
}
.fluentform:not(.fluentform_wrapper_7) .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100% !important;
}
.select2-dropdown {
background: var(--zyn-card) !important;
border: 1px solid var(--zyn-border-strong) !important;
border-radius: var(--zyn-radius-sm) !important;
color: var(--zyn-text) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--zyn-primary) !important;
color: #fff !important;
}
.select2-search--dropdown .select2-search__field {
background: rgba(255,255,255,.04) !important;
border: 1px solid var(--zyn-border) !important;
color: var(--zyn-text) !important;
border-radius: var(--zyn-radius-sm) !important;
}
/* ---------- 3. CHECKBOX / RADIO ---------- */
.fluentform:not(.fluentform_wrapper_7) .ff-el-form-check input[type="checkbox"],
.fluentform:not(.fluentform_wrapper_7) .ff-el-form-check input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 18px !important;
height: 18px !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid var(--zyn-border-strong) !important;
border-radius: 4px;
cursor: pointer;
position: relative;
margin-right: 8px !important;
vertical-align: middle;
transition: border-color .2s ease, background .2s ease;
}
.fluentform:not(.fluentform_wrapper_7) .ff-el-form-check input[type="radio"] { border-radius: 50%; }
.fluentform:not(.fluentform_wrapper_7) .ff-el-form-check input[type="checkbox"]:checked,
.fluentform:not(.fluentform_wrapper_7) .ff-el-form-check input[type="radio"]:checked {
background: var(--zyn-primary) !important;
border-color: var(--zyn-primary) !important;
}
.fluentform:not(.fluentform_wrapper_7) .ff-el-form-check input[type="checkbox"]:checked::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
.fluentform:not(.fluentform_wrapper_7) .ff-el-form-check input[type="radio"]:checked::after {
content: "";
position: absolute;
inset: 4px;
background: #fff;
border-radius: 50%;
}
.fluentform:not(.fluentform_wrapper_7) .ff-el-form-check-label {
color: var(--zyn-text) !important;
font-weight: 500 !important;
font-size: 14px !important;
cursor: pointer;
}
/* ---------- 4. BOUTONS SUBMIT & STEP ---------- */
.fluentform:not(.fluentform_wrapper_7) .ff-btn,
.fluentform:not(.fluentform_wrapper_7) button[type="submit"],
.fluentform:not(.fluentform_wrapper_7) .ff-btn-submit,
.fluentform:not(.fluentform_wrapper_7) .ff-btn-next,
.fluentform:not(.fluentform_wrapper_7) .ff-btn-prev {
background: linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary-light)) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--zyn-radius-sm) !important;
font-family: var(--zyn-font-body) !important;
font-weight: 700 !important;
letter-spacing: .04em;
text-transform: uppercase !important;
padding: 13px 24px !important;
font-size: 14px !important;
box-shadow: var(--zyn-shadow-glow) !important;
cursor: pointer;
transition: all .25s ease !important;
}
.fluentform:not(.fluentform_wrapper_7) .ff-btn:hover,
.fluentform:not(.fluentform_wrapper_7) button[type="submit"]:hover,
.fluentform:not(.fluentform_wrapper_7) .ff-btn-submit:hover,
.fluentform:not(.fluentform_wrapper_7) .ff-btn-next:hover,
.fluentform:not(.fluentform_wrapper_7) .ff-btn-prev:hover {
background: linear-gradient(135deg, var(--zyn-primary-hover), var(--zyn-primary)) !important;
box-shadow: var(--zyn-shadow-glow-strong) !important;
transform: none;
}
/* Bouton "précédent" plus discret */
.fluentform:not(.fluentform_wrapper_7) .ff-btn-prev {
background: transparent !important;
border: 1px solid var(--zyn-border-strong) !important;
color: var(--zyn-text) !important;
box-shadow: none !important;
}
.fluentform:not(.fluentform_wrapper_7) .ff-btn-prev:hover {
background: var(--zyn-card-hover) !important;
border-color: var(--zyn-primary) !important;
color: var(--zyn-primary) !important;
transform: none;
}
/* ---------- 5. STEP FORM (barre de progression) ---------- */
.fluentform:not(.fluentform_wrapper_7) .ff-step-header {
background: transparent !important;
border-bottom: 1px solid var(--zyn-border) !important;
margin-bottom: 24px;
}
.fluentform:not(.fluentform_wrapper_7) .ff-step-header .ff-step-titles li {
color: var(--zyn-muted) !important;
font-family: var(--zyn-font-body) !important;
font-weight: 600 !important;
}
.fluentform:not(.fluentform_wrapper_7) .ff-step-header .ff-step-titles li.ff_active,
.fluentform:not(.fluentform_wrapper_7) .ff-step-header .ff-step-titles li.ff_completed {
color: var(--zyn-primary) !important;
}
.fluentform:not(.fluentform_wrapper_7) .ff-el-progress {
background: rgba(255,255,255,.06) !important;
border-radius: var(--zyn-radius-pill) !important;
overflow: hidden;
}
.fluentform:not(.fluentform_wrapper_7) .ff-el-progress-bar {
background: linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary-light)) !important;
box-shadow: var(--zyn-shadow-glow);
}
/* ---------- 6. MESSAGES (succès / erreur) ---------- */
.fluentform:not(.fluentform_wrapper_7) .error,
.fluentform:not(.fluentform_wrapper_7) .ff-el-is-error .text-danger,
.fluentform:not(.fluentform_wrapper_7) .error.text-danger {
color: var(--zyn-danger) !important;
font-size: 13px !important;
margin-top: 6px !important;
}
.fluentform:not(.fluentform_wrapper_7) .ff-el-is-error input,
.fluentform:not(.fluentform_wrapper_7) .ff-el-is-error textarea,
.fluentform:not(.fluentform_wrapper_7) .ff-el-is-error select {
border-color: var(--zyn-danger) !important;
box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}
.ff-message-success,
.fluentform .ff-message-success {
background: rgba(34,197,94,.10) !important;
border: 1px solid rgba(34,197,94,.45) !important;
color: var(--zyn-success) !important;
border-radius: var(--zyn-radius-sm) !important;
padding: 14px 16px !important;
font-family: var(--zyn-font-body) !important;
}
.ff-errors-in-stack,
.fluentform .ff-errors-in-stack {
background: rgba(239,68,68,.08) !important;
border: 1px solid rgba(239,68,68,.4) !important;
color: var(--zyn-danger) !important;
border-radius: var(--zyn-radius-sm) !important;
padding: 12px 14px !important;
}
/* ---------- 7. UPLOAD / FILE ---------- */
.fluentform:not(.fluentform_wrapper_7) .ff-el-file-upload .ff_upload_btn,
.fluentform:not(.fluentform_wrapper_7) .ff_upload_btn {
background: rgba(21, 72, 215,.10) !important;
border: 1px dashed rgba(21, 72, 215,.45) !important;
color: var(--zyn-primary-light) !important;
border-radius: var(--zyn-radius-sm) !important;
padding: 18px !important;
text-align: center !important;
transition: all .25s ease;
}
.fluentform:not(.fluentform_wrapper_7) .ff_upload_btn:hover {
background: rgba(21, 72, 215,.18) !important;
border-color: var(--zyn-primary) !important;
color: #fff !important;
}
/* ---------- 8. CARTE/SECTION (optionnel : wrapper du formulaire) ---------- */
.fluentform.ff-default:not(.fluentform_wrapper_7) {
background: var(--zyn-card) !important;
border: 1px solid var(--zyn-border) !important;
border-radius: var(--zyn-radius-lg) !important;
box-shadow: var(--zyn-shadow-card);
padding: 32px !important;
}
/* Section titre & description Fluent Forms */
.fluentform:not(.fluentform_wrapper_7) .ff-el-section-break h3,
.fluentform:not(.fluentform_wrapper_7) .ff-el-section-break .ff-section_break_desk {
color: var(--zyn-text) !important;
font-family: var(--zyn-font-title) !important;
}
.fluentform:not(.fluentform_wrapper_7) .ff-el-section-break .ff-section_break_desk {
color: var(--zyn-muted) !important;
font-family: var(--zyn-font-body) !important;
font-size: 14px;
}
/* ---------- 9. RESPONSIVE (mobile / tablette) ---------- */
@media (max-width: 768px) {
.fluentform.ff-default:not(.fluentform_wrapper_7) {
padding: 20px !important;
border-radius: var(--zyn-radius) !important;
}
.fluentform:not(.fluentform_wrapper_7) input[type="text"],
.fluentform:not(.fluentform_wrapper_7) input[type="email"],
.fluentform:not(.fluentform_wrapper_7) input[type="tel"],
.fluentform:not(.fluentform_wrapper_7) input[type="number"],
.fluentform:not(.fluentform_wrapper_7) input[type="password"],
.fluentform:not(.fluentform_wrapper_7) textarea,
.fluentform:not(.fluentform_wrapper_7) select,
.fluentform:not(.fluentform_wrapper_7) .ff-el-form-control {
font-size: 16px !important; /* évite le zoom auto iOS */
padding: 12px 14px !important;
}
.fluentform:not(.fluentform_wrapper_7) .ff-btn,
.fluentform:not(.fluentform_wrapper_7) button[type="submit"],
.fluentform:not(.fluentform_wrapper_7) .ff-btn-submit {
width: 100% !important;
padding: 14px 20px !important;
font-size: 14px !important;
}
/* Grille Fluent Forms → 1 colonne sur mobile */
.fluentform:not(.fluentform_wrapper_7) .ff-t-cell,
.fluentform:not(.fluentform_wrapper_7) .ff-el-group .ff-t-container > .ff-t-cell {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.fluentform:not(.fluentform_wrapper_7) .ff-t-container {
flex-wrap: wrap !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.fluentform:not(.fluentform_wrapper_7) .ff-step-header .ff-step-titles li {
font-size: 12px !important;
}
}
@media (max-width: 480px) {
.fluentform.ff-default:not(.fluentform_wrapper_7) { padding: 16px !important; }
.fluentform:not(.fluentform_wrapper_7) .ff-el-input--label label { font-size: 12px !important; }
}
/* ============================================
FIX AUTOFILL — Global (Fluent Forms + WooCommerce Checkout + tout le site)
============================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color: var(--zyn-text, #ffffff) !important;
-webkit-box-shadow: 0 0 0 1000px var(--zyn-card, #111111) inset !important;
box-shadow: 0 0 0 1000px var(--zyn-card, #111111) inset !important;
border: 1px solid var(--zyn-border, #333333) !important;
caret-color: var(--zyn-text, #ffffff) !important;
transition: background-color 9999s ease-in-out 0s !important;
-webkit-transition: background-color 9999s ease-in-out 0s !important;
}
/* Firefox */
input:autofill,
textarea:autofill,
select:autofill {
background: var(--zyn-card, #111111) !important;
color: var(--zyn-text, #ffffff) !important;
box-shadow: 0 0 0 1000px var(--zyn-card, #111111) inset !important;
}
/* Ciblage explicite WooCommerce Checkout (au cas où un thème surcharge) */
.woocommerce-checkout input:-webkit-autofill,
.woocommerce form .form-row input:-webkit-autofill,
form.checkout input:-webkit-autofill,
form.woocommerce-checkout input:-webkit-autofill {
-webkit-text-fill-color: var(--zyn-text, #ffffff) !important;
-webkit-box-shadow: 0 0 0 1000px var(--zyn-card, #111111) inset !important;
box-shadow: 0 0 0 1000px var(--zyn-card, #111111) inset !important;
caret-color: var(--zyn-text, #ffffff) !important;
}
/* ============================================================
ZYNTROL — AJUSTEMENTS PREFOOTER WOODMART
============================================================ */
.wd-prefooter {
background-color: #07080A !important;
padding-top: 60px !important; /* Augmente cette valeur pour agrandir l'espace en haut */
padding-bottom: 40px !important; /* Optionnel : ajuste le bas si besoin */
}
/* ============================================================
BADGES "MON COMPTE" — n° commande & date
============================================================ */
.woocommerce-account mark.order-number,
.woocommerce-account mark.order-date,
mark.order-number,
mark.order-date {
display: inline-block !important;
padding: 4px 12px !important;
margin: 0 2px !important;
background: rgba(21, 72, 215, 0.10) !important;
border: 1px solid rgba(21, 72, 215, 0.35) !important;
border-radius: var(--zyn-radius-pill, 999px) !important;
color: var(--zyn-primary-light, #3D6FE8) !important;
font-family: var(--zyn-font-body, "Inter", sans-serif) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
line-height: 1.4 !important;
text-decoration: none !important;
box-shadow: 0 0 12px -4px rgba(21, 72, 215, 0.25);
transition: all .2s ease;
}
/* Variante légère pour la date (un peu plus neutre) */
mark.order-date {
background: rgba(255, 255, 255, 0.04) !important;
border-color: var(--zyn-border-strong, rgba(255,255,255,.12)) !important;
color: var(--zyn-text, #FAFAFA) !important;
box-shadow: none;
}
/* ============================================================
STATUTS PERSONNALISÉS — Version Transparente (Style Zyntrol)
============================================================ */
/* Règle globale pour tous les statuts (forme pilule + transparence) */
.order-status, mark.order-status {
display: inline-block !important;
padding: 4px 14px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bordure fine */
backdrop-filter: blur(4px) !important; /* Effet flou léger */
}
/* 1. Pièces commandées (Violet) */
.order-status.pieces-commandees, mark.order-status.status-pieces-commandees {
background-color: rgba(167, 139, 250, 0.15) !important;
color: #c4b5fd !important;
border-color: rgba(167, 139, 250, 0.3) !important;
}
/* 2. En réparation (Bleu) */
.order-status.en-reparation, mark.order-status.status-en-reparation {
background-color: rgba(30, 64, 175, 0.25) !important;
color: #60A5FA !important;
border: 1px solid rgba(30, 64, 175, 0.5) !important;
}
/* 3. Réparé / Prêt (Vert) */
.order-status.repare-expedie, mark.order-status.status-repare-expedie {
background-color: rgba(34, 197, 94, 0.15) !important;
color: #4ade80 !important;
border-color: rgba(34, 197, 94, 0.3) !important;
}
/* 4. Reçu à l'atelier */
.order-status.recu-a-l-atelier, mark.order-status.status-recu-a-l-atelier {
background-color: rgba(30, 64, 175, 0.25) !important;
color: #60A5FA !important;
border: 1px solid rgba(30, 64, 175, 0.5) !important;
}
/* 5. En diagnostic */
.order-status.en-diagnostic, mark.order-status.status-en-diagnostic {
background-color: rgba(156, 163, 175, 0.15) !important;
color: #D1D5DB !important;
border: 1px solid rgba(156, 163, 175, 0.3) !important;
}
/* 6. En attente de validation */
.order-status.en-attente-de-validation, mark.order-status.status-en-attente-de-validation {
background-color: rgba(245, 158, 11, 0.15) !important;
color: #FBBF24 !important;
border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
/* 7. En attente de réception */
.order-status.en-attente-de-reception, mark.order-status.status-en-attente-de-reception {
background-color: rgba(245, 158, 11, 0.15) !important;
color: #FBBF24 !important; /* Un orange/jaune lumineux */
border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
/* ============================================================
ZYNTROL — SÉCURITÉ DESTRUCTRICE DE LA BOÎTE VERTE FLUENT FORMS
============================================================ */
/* On cible la boîte parente générée par Fluent Forms pour l'effacer visuellement */
.fluentform .ff-message-success {
background: transparent !important; /* Supprime le fond vert clair */
border: none !important; /* Supprime la bordure verte d'origine */
padding: 0 !important; /* Supprime les marges internes qui décalent tout */
box-shadow: none !important; /* Supprime l'ombre par défaut */
margin: 0 auto !important;
}
/* On s'assure que TON bouton respecte bien son dégradé bleu Zyntrol */
#fluentform_8_success .wrapper-content-banner .btn {
background: linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary-light)) !important;
}
/* ============================================================
ZYNTROL SUCCESS ICON — Vert Uni & Grande Coche Blanche
(Espace en dessous réduit)
============================================================ */
.zbc-success-icon {
display: flex;
justify-content: center;
align-items: center;
width: 72px;
height: 72px;
background-color: #22C55E;
border: none;
border-radius: 50%;
color: #FFFFFF;
font-size: 30px;
/* MODIFICATION ICI : je passe de 20px à 8px (tu peux ajuster ce chiffre) */
margin: 0 auto 8px auto;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
/* Assure que l'icône à l'intérieur est bien centrée */
.zbc-success-icon i {
font-size: inherit;
line-height: 1;
}
/* ============================================================
ZYNTROL — GUARD : ne JAMAIS toucher l'admin WordPress
(Widgets, Kadence, réglages plugins, éditeur de blocs)
============================================================ */
body.wp-admin,
body.wp-admin .wrap,
.block-editor-page,
.block-editor-page .editor-styles-wrapper,
.interface-interface-skeleton__content {
background: #f0f0f1 !important;
color: #1d2327 !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
/* Champs de formulaire admin → look natif WP */
body.wp-admin input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.wp-admin textarea,
body.wp-admin select,
.block-editor-page input:not([type="checkbox"]):not([type="radio"]),
.block-editor-page textarea,
.block-editor-page select {
background: #fff !important;
color: #2c3338 !important;
border: 1px solid #8c8f94 !important;
border-radius: 4px !important;
font-family: inherit !important;
font-size: 14px !important;
padding: 6px 8px !important;
box-shadow: none !important;
}
/* Libellés, titres, liens admin → couleurs natives */
body.wp-admin label,
body.wp-admin .form-field label,
body.wp-admin h1, body.wp-admin h2, body.wp-admin h3,
body.wp-admin h4, body.wp-admin h5, body.wp-admin h6,
body.wp-admin p, body.wp-admin span, body.wp-admin th, body.wp-admin td,
.block-editor-page label,
.block-editor-page h1, .block-editor-page h2, .block-editor-page h3,
.block-editor-page h4, .block-editor-page h5, .block-editor-page h6 {
color: #1d2327 !important;
font-family: inherit !important;
font-weight: inherit !important;
letter-spacing: normal !important;
}
body.wp-admin a,
.block-editor-page a {
color: #2271b1 !important;
}
body.wp-admin ::placeholder,
.block-editor-page ::placeholder {
color: #646970 !important;
opacity: 1 !important;
}
/* Boutons admin → on ne touche pas */
body.wp-admin .button,
body.wp-admin .button-primary,
body.wp-admin input[type="submit"],
body.wp-admin input[type="button"] {
background: initial !important;
background-color: #f6f7f7 !important;
color: #2271b1 !important;
border: 1px solid #2271b1 !important;
border-radius: 3px !important;
text-transform: none !important;
letter-spacing: normal !important;
box-shadow: none !important;
font-family: inherit !important;
font-weight: 400 !important;
}
body.wp-admin .button-primary,
body.wp-admin input[type="submit"].button-primary {
background-color: #2271b1 !important;
color: #fff !important;
}
/* Scrollbar custom → uniquement front */
body.wp-admin ::-webkit-scrollbar-thumb,
.block-editor-page ::-webkit-scrollbar-thumb {
background: #c3c4c7 !important;
}
body.wp-admin ::-webkit-scrollbar-track,
.block-editor-page ::-webkit-scrollbar-track {
background: #f0f0f1 !important;
}
/* ============================================================
BLOC RECHERCHE PRODUITS — Zyntrol
============================================================ */
/* Wrapper */
body:not(.wp-admin) .wp-block-search__inside-wrapper {
display: flex !important;
flex-direction: row !important; /* loupe à droite */
align-items: stretch !important;
max-width: 320px !important;
height: 42px !important;
padding: 0 !important;
border: 1px solid var(--zyn-border-strong) !important;
border-radius: var(--zyn-radius-sm) !important;
overflow: hidden !important;
background: var(--zyn-card) !important;
}
/* Champ texte */
body:not(.wp-admin) .wp-block-search__input {
flex: 1 !important;
height: 100% !important;
line-height: normal !important;
padding: 0 12px !important;
font-family: var(--zyn-font-body) !important;
font-size: 14px !important;
color: var(--zyn-text) !important;
border: none !important;
border-radius: 0 !important;
background: var(--zyn-card) !important;
box-shadow: none !important;
outline: none !important;
}
body:not(.wp-admin) .wp-block-search__input::placeholder {
color: var(--zyn-muted) !important;
}
/* Bouton loupe — état par défaut */
body:not(.wp-admin) .wp-block-search__button {
font-size: 0 !important;
color: transparent !important;
width: 44px !important;
height: 100% !important;
align-self: stretch !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-radius: 0 var(--zyn-radius-sm) var(--zyn-radius-sm) 0 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary-light)) !important;
background-repeat: no-repeat, no-repeat !important;
background-position: center, center !important;
background-size: 18px 18px, 100% 100% !important;
box-shadow: none !important;
transition: background .25s ease !important;
transform: none !important;
position: static !important;
top: auto !important;
}
/* Bouton loupe — hover / focus / active */
body:not(.wp-admin) .wp-block-search__button:hover,
body:not(.wp-admin) .wp-block-search__button:focus,
body:not(.wp-admin) .wp-block-search__button:active {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(135deg, var(--zyn-primary-hover), var(--zyn-primary)) !important;
background-repeat: no-repeat, no-repeat !important;
background-position: center, center !important;
background-size: 18px 18px, 100% 100% !important;
color: transparent !important;
box-shadow: none !important;
transform: none !important;
translate: none !important;
top: auto !important;
position: static !important;
}
/* Mobile */
@media (max-width: 767px) {
body:not(.wp-admin) .wp-block-search__inside-wrapper {
height: 38px !important;
}
body:not(.wp-admin) .wp-block-search__input {
font-size: 13px !important;
}
body:not(.wp-admin) .wp-block-search__button {
width: 40px !important;
background-size: 16px 16px, 100% 100% !important;
}
}
/* Cache tout le conteneur du popup sur la page merci */
.page-id-33375 .wd-popup,
.page-id-33375 .wd-close-popup {
display: none !important;
visibility: hidden !important;
}
/* ============================================================
ZYNTROL — Page de remerciement WooCommerce v2
Plus vivant, optimisé mobile
============================================================ */
/* 0. Conteneur global ----------------------------------------- */
body.woocommerce-order-received .woocommerce-order {
max-width: 880px;
margin: clamp(20px, 5vw, 64px) auto;
padding: 0 clamp(14px, 4vw, 24px);
color: var(--zyn-text);
font-family: var(--zyn-font-body);
display: flex;
flex-direction: column;
gap: clamp(20px, 4vw, 36px);
animation: zyn-ty-fade .5s ease-out both;
}
@keyframes zyn-ty-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Halo ambiant derrière toute la page */
body.woocommerce-order-received .woocommerce-order::before {
content: "";
position: fixed;
inset: -10% auto auto 50%;
transform: translateX(-50%);
width: min(900px, 110vw);
height: 480px;
background:
radial-gradient(closest-side, var(--zyn-primary-glow), transparent 70%);
filter: blur(40px);
opacity: .6;
pointer-events: none;
z-index: 0;
}
body.woocommerce-order-received .woocommerce-order > * { position: relative; z-index: 1; }
/* 1. Bandeau de confirmation ---------------------------------- */
body.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received {
position: relative;
margin: 0;
padding: clamp(22px, 4vw, 32px) clamp(20px, 4vw, 28px) clamp(22px, 4vw, 32px) clamp(76px, 14vw, 92px);
background:
radial-gradient(120% 140% at 0% 0%, rgba(34,197,94,.08), transparent 55%),
linear-gradient(180deg, var(--zyn-card), var(--zyn-card-hover));
border: 1px solid var(--zyn-border-strong);
border-radius: var(--zyn-radius-xl);
box-shadow: var(--zyn-shadow-card), var(--zyn-shadow-glow);
color: var(--zyn-text);
font-size: clamp(1rem, 2.2vw, 1.1rem);
font-weight: 500;
line-height: 1.55;
overflow: hidden;
}
/* Trait gradient en haut */
body.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--zyn-success), var(--zyn-primary), transparent);
opacity: .8;
}
/* Badge check animé */
body.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received::before {
content: "";
position: absolute;
left: clamp(18px, 4vw, 24px);
top: 50%;
transform: translateY(-50%);
width: clamp(42px, 9vw, 48px);
height: clamp(42px, 9vw, 48px);
border-radius: 50%;
background:
url("data:image/svg+xml;utf8,") center / 56% 56% no-repeat,
linear-gradient(135deg, var(--zyn-success), #16a34a);
box-shadow:
0 0 0 6px rgba(34, 197, 94, .14),
0 8px 24px -8px rgba(34, 197, 94, .55);
animation: zyn-ty-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes zyn-ty-pop {
0% { transform: translateY(-50%) scale(.2); opacity: 0; }
60% { transform: translateY(-50%) scale(1.08); opacity: 1; }
100% { transform: translateY(-50%) scale(1); }
}
/* ============================================================
ZYNTROL — Récap commande + adresses (vertical, sans accents)
============================================================ */
/* 2. Récap commande : liste verticale (1 carte par ligne) ----- */
body.woocommerce-order-received .woocommerce-order-overview.order_details {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr !important; /* empilé partout */
gap: 10px;
border: 0;
}
body.woocommerce-order-received .woocommerce-order-overview.order_details li {
position: relative;
margin: 0;
padding: 16px 20px;
min-width: 0;
background: linear-gradient(180deg, var(--zyn-card), var(--zyn-card-hover));
border: 1px solid var(--zyn-border);
border-radius: var(--zyn-radius-lg);
box-shadow: var(--zyn-shadow-card);
/* Label à gauche, valeur à droite */
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: space-between;
gap: 16px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--zyn-muted);
border-right: 0;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* ❌ Plus d'accent bleu en haut des cartes du récap */
body.woocommerce-order-received .woocommerce-order-overview.order_details li::before {
content: none !important;
display: none !important;
}
body.woocommerce-order-received .woocommerce-order-overview.order_details li:hover {
transform: translateY(-2px);
border-color: var(--zyn-border-strong);
box-shadow: var(--zyn-shadow-card), var(--zyn-shadow-glow);
}
/* Valeur (strong) — à droite, lisible */
body.woocommerce-order-received .woocommerce-order-overview.order_details li strong {
order: 2;
font-size: 1rem;
font-weight: 700;
letter-spacing: -.01em;
text-transform: none;
color: var(--zyn-text);
text-align: right;
min-width: 0;
max-width: 70%;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.3;
}
/* E-mail : on coupe proprement */
body.woocommerce-order-received .woocommerce-order-overview__email strong,
body.woocommerce-order-received .woocommerce-order-overview__email a {
font-size: .9rem;
font-weight: 600;
word-break: break-all;
}
/* Total mis en avant */
body.woocommerce-order-received .woocommerce-order-overview__total strong,
body.woocommerce-order-received .woocommerce-order-overview__total .woocommerce-Price-amount,
body.woocommerce-order-received .woocommerce-order-overview__total bdi {
background: linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary-light));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 1.15rem;
}
/* Mobile : on garde empilé, on resserre */
@media (max-width: 560px) {
body.woocommerce-order-received .woocommerce-order-overview.order_details {
grid-template-columns: 1fr !important;
gap: 8px;
}
body.woocommerce-order-received .woocommerce-order-overview.order_details li {
padding: 14px 16px;
font-size: .68rem;
}
body.woocommerce-order-received .woocommerce-order-overview.order_details li strong {
font-size: .92rem;
max-width: 60%;
}
}
/* 3. Titres de sections --------------------------------------- */
body.woocommerce-order-received h2,
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title {
position: relative;
font-family: var(--zyn-font-title) !important;
font-size: clamp(1.25rem, 3.5vw, 1.5rem);
font-weight: 700;
letter-spacing: -.02em;
color: var(--zyn-text);
margin: 0 0 18px;
padding: 0 0 12px;
border-bottom: 1px solid var(--zyn-border);
}
body.woocommerce-order-received h2::after,
body.woocommerce-order-received .woocommerce-order-details__title::after,
body.woocommerce-order-received .woocommerce-column__title::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 56px;
height: 2px;
background: linear-gradient(90deg, var(--zyn-primary), var(--zyn-primary-light));
border-radius: 2px;
}
/* 4. Détails commande + tableau articles ---------------------- */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details {
padding: clamp(18px, 4vw, 28px);
background: linear-gradient(180deg, var(--zyn-card), var(--zyn-card-hover));
border: 1px solid var(--zyn-border);
border-radius: var(--zyn-radius-xl);
box-shadow: var(--zyn-shadow-card);
}
body.woocommerce-order-received .woocommerce-table--order-details {
width: 100%;
border-collapse: collapse;
background: transparent;
color: var(--zyn-text);
font-size: .95rem;
}
body.woocommerce-order-received .woocommerce-table--order-details th,
body.woocommerce-order-received .woocommerce-table--order-details td {
padding: 14px 12px;
text-align: left;
border: 0;
border-bottom: 1px solid var(--zyn-border);
background: transparent;
color: var(--zyn-text);
vertical-align: top;
}
body.woocommerce-order-received .woocommerce-table--order-details thead th {
font-size: .7rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--zyn-muted);
border-bottom: 1px solid var(--zyn-border-strong);
}
body.woocommerce-order-received .woocommerce-table--order-details tbody tr {
transition: background .2s ease;
}
body.woocommerce-order-received .woocommerce-table--order-details tbody tr:hover {
background: rgba(21, 72, 215, .04);
}
body.woocommerce-order-received .woocommerce-table--order-details tbody tr:last-child td {
border-bottom: 1px solid var(--zyn-border-strong);
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot td {
font-weight: 600;
color: var(--zyn-text);
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
border-bottom: 0;
padding-top: 18px;
font-size: 1.2rem;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td .woocommerce-Price-amount,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td bdi {
background: linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary-light));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 800;
font-size: 1.35rem;
}
body.woocommerce-order-received .woocommerce-table--order-details a {
color: var(--zyn-text);
font-weight: 500;
text-decoration: none;
transition: color .2s ease;
}
body.woocommerce-order-received .woocommerce-table--order-details a:hover {
color: var(--zyn-primary);
}
body.woocommerce-order-received .product-quantity {
color: var(--zyn-muted);
font-weight: 500;
}
body.woocommerce-order-received .woocommerce-order-details__order-again .button {
margin-top: 18px;
}
/* 5. Adresses client : 2 colonnes ----------------------------- */
body.woocommerce-order-received .woocommerce-customer-details {
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
body.woocommerce-order-received .woocommerce-customer-details .col2-set,
body.woocommerce-order-received .woocommerce-customer-details .u-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 14px;
width: 100%;
margin: 0;
}
body.woocommerce-order-received .woocommerce-customer-details .col-1,
body.woocommerce-order-received .woocommerce-customer-details .col-2,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
width: 100% !important;
max-width: none !important;
float: none !important;
margin: 0 !important;
padding: clamp(20px, 4vw, 28px);
background: linear-gradient(180deg, var(--zyn-card), var(--zyn-card-hover));
border: 1px solid var(--zyn-border);
border-radius: var(--zyn-radius-xl);
box-shadow: var(--zyn-shadow-card);
position: relative;
overflow: hidden;
}
/* ❌ Plus d'accent bleu en haut des cartes d'adresses */
body.woocommerce-order-received .woocommerce-customer-details .col-1::before,
body.woocommerce-order-received .woocommerce-customer-details .col-2::before,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column::before {
content: none !important;
display: none !important;
}
body.woocommerce-order-received .woocommerce-customer-details address {
padding: 0;
border: 0;
background: transparent;
color: var(--zyn-text);
font-style: normal;
line-height: 1.7;
font-size: .95rem;
}
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--phone,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--email {
margin: 10px 0 0;
color: var(--zyn-muted);
font-size: .9rem;
}
/* 6. Mobile : tableau articles empilé -------------------------- */
@media (max-width: 640px) {
body.woocommerce-order-received .woocommerce-order { gap: 18px; }
body.woocommerce-order-received .woocommerce-table--order-details thead { display: none; }
body.woocommerce-order-received .woocommerce-table--order-details,
body.woocommerce-order-received .woocommerce-table--order-details tbody,
body.woocommerce-order-received .woocommerce-table--order-details tfoot,
body.woocommerce-order-received .woocommerce-table--order-details tr {
display: block;
width: 100%;
}
body.woocommerce-order-received .woocommerce-table--order-details tbody tr {
padding: 14px;
margin-bottom: 10px;
background: rgba(255,255,255,.02);
border: 1px solid var(--zyn-border);
border-radius: var(--zyn-radius);
}
body.woocommerce-order-received .woocommerce-table--order-details tbody td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 4px 0;
border: 0;
text-align: right;
}
body.woocommerce-order-received .woocommerce-table--order-details tbody td.product-name {
font-weight: 600;
color: var(--zyn-text);
text-align: left;
padding-bottom: 8px;
border-bottom: 1px dashed var(--zyn-border);
margin-bottom: 6px;
display: block;
}
body.woocommerce-order-received .woocommerce-table--order-details tbody td.product-total {
color: var(--zyn-primary);
font-weight: 700;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 4px;
border-bottom: 1px solid var(--zyn-border);
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child {
border-bottom: 0;
padding-top: 14px;
margin-top: 4px;
border-top: 1px solid var(--zyn-border-strong);
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot td {
padding: 0;
border: 0;
display: inline;
}
body.woocommerce-order-received .woocommerce-customer-details .col2-set,
body.woocommerce-order-received .woocommerce-customer-details .u-columns {
grid-template-columns: 1fr;
}
}
/* 7. Très petit mobile (≤ 360px) ------------------------------ */
@media (max-width: 360px) {
body.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received {
padding-left: 70px;
font-size: .98rem;
}
}
/* 8. Respect des prefs d'animation ---------------------------- */
@media (prefers-reduced-motion: reduce) {
body.woocommerce-order-received .woocommerce-order,
body.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received::before {
animation: none;
}
}
/* ============================================================
Recherche Woodmart (drawer mobile + header) — Zyntrol
Markup réel : .wd-search-form > form.searchform
input.s + button.searchsubmit
============================================================ */
.wd-search-form .searchform {
position: relative !important;
display: flex !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
height: 42px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(--zyn-border-strong) !important;
border-radius: var(--zyn-radius-sm) !important;
background: var(--zyn-card) !important;
overflow: hidden !important;
box-shadow: none !important;
}
/* Champ texte */
.wd-search-form .searchform input.s {
flex: 1 1 auto !important;
min-width: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 12px !important;
background: var(--zyn-card) !important;
color: var(--zyn-text) !important;
font-family: var(--zyn-font-body) !important;
font-size: 14px !important;
line-height: normal !important;
border: none !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
}
.wd-search-form .searchform input.s::placeholder {
color: var(--zyn-muted) !important;
opacity: 1 !important;
}
.wd-search-form .searchform input.s:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: var(--zyn-card) !important;
}
/* Bouton loupe */
.wd-search-form .searchform button.searchsubmit {
flex: 0 0 44px !important;
width: 44px !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
cursor: pointer !important;
font-size: 0 !important;
color: transparent !important;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(135deg, var(--zyn-primary), var(--zyn-primary-light)) !important;
background-repeat: no-repeat, no-repeat !important;
background-position: center, center !important;
background-size: 18px 18px, 100% 100% !important;
box-shadow: none !important;
transform: none !important;
}
.wd-search-form .searchform button.searchsubmit:hover {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(135deg, var(--zyn-primary-hover), var(--zyn-primary)) !important;
}
.wd-search-form .searchform button.searchsubmit span { display: none !important; }
/* Bouton "clear" (croix) bien positionné */
.wd-search-form .searchform .wd-clear-search {
right: 50px !important;
}
/* Drawer mobile : un peu d'air autour */
.wd-side-hidden .wd-search-form,
.mobile-nav .wd-search-form {
margin: 12px !important;
}
/* ============================================================
ZYNTROL — PATCH FINAL panier coupon + mobile propre
Remplace l'ancien bloc "FIX FINAL — Ligne coupon (cart-discount)"
============================================================ */
/* 1) Supprime les labels dupliqués injectés par le mode responsive Woo */
.woocommerce-cart .cart_totals table.shop_table_responsive tr td::before,
.woocommerce-cart .cart_totals table.shop_table tr td::before,
.woocommerce .cart_totals table.shop_table_responsive tr td::before,
.woocommerce .cart_totals table.shop_table tr td::before {
content: none !important;
display: none !important;
}
/* 2) Ligne coupon : structure propre */
.woocommerce-cart .cart_totals tr.cart-discount th,
.woocommerce .cart_totals tr.cart-discount th {
width: auto !important;
white-space: nowrap !important;
text-align: left !important;
padding: 14px 12px 14px 0 !important;
color: var(--zyn-text) !important;
font-weight: 600 !important;
vertical-align: middle !important;
}
.woocommerce-cart .cart_totals tr.cart-discount td,
.woocommerce .cart_totals tr.cart-discount td {
width: 1% !important;
white-space: nowrap !important;
text-align: right !important;
vertical-align: middle !important;
padding: 14px 0 14px 8px !important;
}
/* 3) Montant -20€ : reste inline */
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-Price-amount,
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-Price-amount bdi,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-Price-amount,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-Price-amount bdi {
display: inline !important;
white-space: nowrap !important;
color: var(--zyn-success) !important;
font-weight: 700 !important;
margin: 0 !important;
}
/* 4) Bouton croix desktop/mobile : rond propre, bien centré */
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-remove-coupon,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-remove-coupon {
display: inline-grid !important;
place-items: center !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
margin-left: 10px !important;
padding: 0 !important;
vertical-align: middle !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
text-decoration: none !important;
text-indent: 0 !important;
overflow: hidden !important;
border: 1px solid var(--zyn-border-strong) !important;
border-radius: 50% !important;
background: color-mix(in srgb, var(--zyn-primary) 10%, transparent) !important;
box-shadow: none !important;
position: static !important;
top: auto !important;
right: auto !important;
transform: none !important;
max-width: none !important;
}
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-remove-coupon::before,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-remove-coupon::before {
content: "×" !important;
display: block !important;
font-size: 15px !important;
line-height: 1 !important;
font-weight: 700 !important;
color: var(--zyn-primary) !important;
transform: translateY(-1px);
}
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-remove-coupon::after,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-remove-coupon::after {
content: none !important;
display: none !important;
}
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-remove-coupon:hover,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-remove-coupon:hover {
background: var(--zyn-primary) !important;
border-color: var(--zyn-primary) !important;
box-shadow: var(--zyn-shadow-glow) !important;
}
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-remove-coupon:hover::before,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-remove-coupon:hover::before {
color: #fff !important;
}
/* 5) Mobile : tout reste proprement sur UNE ligne */
@media (max-width: 768px) {
.woocommerce-cart .cart_totals tr.cart-discount,
.woocommerce .cart_totals tr.cart-discount {
display: table-row !important;
}
.woocommerce-cart .cart_totals tr.cart-discount th,
.woocommerce-cart .cart_totals tr.cart-discount td,
.woocommerce .cart_totals tr.cart-discount th,
.woocommerce .cart_totals tr.cart-discount td {
display: table-cell !important;
float: none !important;
vertical-align: middle !important;
}
.woocommerce-cart .cart_totals tr.cart-discount th,
.woocommerce .cart_totals tr.cart-discount th {
white-space: nowrap !important;
padding: 12px 10px 12px 0 !important;
font-size: 14px !important;
}
.woocommerce-cart .cart_totals tr.cart-discount td,
.woocommerce .cart_totals tr.cart-discount td {
white-space: nowrap !important;
text-align: right !important;
padding: 12px 0 12px 6px !important;
font-size: 14px !important;
}
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-Price-amount,
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-Price-amount bdi,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-Price-amount,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-Price-amount bdi {
font-size: 14px !important;
}
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-remove-coupon,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-remove-coupon {
display: inline-grid !important;
margin: 0 0 0 8px !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
}
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-remove-coupon::before,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-remove-coupon::before {
font-size: 14px !important;
}
}
/* 6) Sécurité : rien ne déborde du bloc */
.cart_totals {
overflow: hidden !important;
}
.cart_totals table.shop_table,
.cart_totals table.shop_table_responsive {
table-layout: auto !important;
max-width: 100% !important;
}
/* ============================================================
FIX FINAL — Croix coupon + responsive ultra-étroit
============================================================ */
/* --- 1. La cellule du montant : on en fait un flex pour aligner
proprement "-20,00 €" et la croix sur la même ligne ------- */
.cart_totals tr.cart-discount td {
text-align: right !important;
white-space: nowrap !important;
padding: 14px 16px 14px 8px !important;
}
.cart_totals tr.cart-discount td .woocommerce-Price-amount,
.cart_totals tr.cart-discount td bdi {
display: inline !important;
white-space: nowrap !important;
vertical-align: middle;
}
/* --- 2. La croix : vrai bouton rond, croix parfaitement centrée -- */
.cart_totals tr.cart-discount td a.woocommerce-remove-coupon {
/* reset complet de tout ce que le thème pourrait injecter */
position: static !important;
top: auto !important; right: auto !important; left: auto !important;
transform: none !important;
float: none !important;
margin: 0 0 0 10px !important;
padding: 0 !important;
/* forme */
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
min-width: 22px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--zyn-primary, #5865F2) 35%, transparent);
background: color-mix(in srgb, var(--zyn-primary, #5865F2) 12%, transparent);
/* on cache le texte "Enlever" */
font-size: 0 !important;
line-height: 1 !important;
color: transparent !important;
text-decoration: none !important;
vertical-align: middle;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
/* la croix dessinée nous-mêmes, parfaitement centrée */
.cart_totals tr.cart-discount td a.woocommerce-remove-coupon::before {
content: "×";
font-size: 16px;
line-height: 1;
font-weight: 600;
color: #fff;
display: block;
transform: translateY(-1px); /* compense l'optique du "×" */
}
.cart_totals tr.cart-discount td a.woocommerce-remove-coupon::after { content: none !important; }
.cart_totals tr.cart-discount td a.woocommerce-remove-coupon:hover {
background: var(--zyn-primary, #5865F2);
border-color: var(--zyn-primary, #5865F2);
transform: scale(1.08);
}
/* --- 3. Responsive : sous 360px on rétrécit légèrement
pour que le montant + la croix ne sortent jamais du cadre ---- */
@media (max-width: 480px) {
.cart_totals tr.cart-discount th,
.cart_totals tr.cart-discount td {
font-size: 13px !important;
padding: 12px 10px !important;
}
.cart_totals tr.cart-discount td { padding-left: 6px !important; }
.cart_totals tr.cart-discount td .woocommerce-Price-amount { font-size: 13px !important; }
}
@media (max-width: 360px) {
.cart_totals { padding: 14px !important; }
.cart_totals tr.cart-discount th { font-size: 12px !important; }
.cart_totals tr.cart-discount td,
.cart_totals tr.cart-discount td .woocommerce-Price-amount { font-size: 12px !important; }
.cart_totals tr.cart-discount td a.woocommerce-remove-coupon {
width: 20px; height: 20px; min-width: 20px; margin-left: 6px !important;
}
.cart_totals tr.cart-discount td a.woocommerce-remove-coupon::before { font-size: 14px; }
}
/* --- 4. Sécurité globale : la table ne déborde plus jamais -------- */
.cart_totals,
.cart_totals .shop_table-responsive,
.cart_totals .cart_totals-inner { overflow: visible !important; }
.cart_totals table.shop_table { width: 100% !important; max-width: 100% !important; }
/* ============================================================
FIX ultra-étroit (< 380px) — autorise le label coupon à wrap
pour que -20,00€ + la croix restent visibles
============================================================ */
@media (max-width: 380px) {
/* On laisse le label passer sur 2 lignes si besoin */
.woocommerce-cart .cart_totals tr.cart-discount th,
.woocommerce .cart_totals tr.cart-discount th,
.cart_totals tr.cart-discount th {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
padding-right: 8px !important;
font-size: 12px !important;
line-height: 1.3 !important;
vertical-align: middle !important;
}
/* La cellule prix garde sa largeur minimale et reste alignée à droite */
.woocommerce-cart .cart_totals tr.cart-discount td,
.woocommerce .cart_totals tr.cart-discount td,
.cart_totals tr.cart-discount td {
width: 1% !important;
white-space: nowrap !important;
padding: 12px 0 12px 6px !important;
font-size: 12px !important;
}
/* Sécurité : rien n'est coupé par un overflow:hidden ailleurs */
.cart_totals,
.cart_totals .shop_table-responsive,
.cart_totals .cart_totals-inner,
.cart_totals table.shop_table,
.cart_totals table.shop_table_responsive {
overflow: visible !important;
}
}
/* ============================================================
ZYNTROL — FIX desktop barre de recherche (loupe + bleu)
À coller à la fin du CSS, après le bloc "Recherche Woodmart"
============================================================ */
.wd-search-form,
.wd-header-search-form,
.whb-col .wd-search-form {
/* on s'assure que le conteneur a bien une hauteur fixe et clippe */
overflow: hidden !important;
}
.wd-search-form .searchform,
.wd-header-search-form .searchform,
.whb-col .wd-search-form .searchform {
height: 44px !important;
border-radius: var(--zyn-radius-sm) !important;
overflow: hidden !important; /* clippe les coins arrondis du bouton */
align-items: stretch !important;
}
/* Champ : prend toute la hauteur du wrapper */
.wd-search-form .searchform input.s,
.wd-header-search-form .searchform input.s,
.whb-col .wd-search-form .searchform input.s {
height: 100% !important;
line-height: 44px !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* Bouton loupe : flush à droite, pleine hauteur, pas d'arrondi, pas de marge */
.wd-search-form .searchform button.searchsubmit,
.wd-header-search-form .searchform button.searchsubmit,
.whb-col .wd-search-form .searchform button.searchsubmit,
.wd-search-form .searchform button[type="submit"],
.wd-header-search-form .searchform button[type="submit"] {
position: static !important;
top: auto !important;
right: auto !important;
flex: 0 0 44px !important;
width: 44px !important;
height: 100% !important; /* remplit toute la hauteur du bar */
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important; /* supprime les coins arrondis du bleu */
box-shadow: none !important;
transform: none !important;
align-self: stretch !important;
}
/* Icône loupe parfaitement centrée (au cas où un ::before WD se rajoute) */
.wd-search-form .searchform button.searchsubmit::before,
.wd-header-search-form .searchform button.searchsubmit::before,
.whb-col .wd-search-form .searchform button.searchsubmit::before {
content: none !important; /* on garde l'icône en background-image */
}
/* ============================================================
HALOS — GOLD : support Elementor Image Box / Icon Box
(mêmes tailles que zyn-icon-circle)
============================================================ */
/* Structure de la box : icône au-dessus, texte aligné à gauche */
.elementor-widget-image-box.zyn-icon-gold .elementor-image-box-wrapper,
.elementor-widget-icon-box.zyn-icon-gold .elementor-icon-box-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: 16px !important;
}
/* Neutralise float + wrappers intermédiaires de l'Image Box */
.elementor-widget-image-box.zyn-icon-gold .elementor-image-box-img,
.elementor-widget-image-box.zyn-icon-gold .elementor-image-box-img a,
.elementor-widget-image-box.zyn-icon-gold figure {
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
line-height: 0 !important;
}
/* Image Box : carré or 64x64 (= circle) */
.elementor-widget-image-box.zyn-icon-gold .elementor-image-box-img img {
display: inline-flex !important;
width: 64px !important;
height: 64px !important;
max-width: 64px !important;
max-height: 64px !important;
padding: 14px !important;
object-fit: contain !important;
background: rgba(245,194,74,.14) !important;
border: 1px solid rgba(245,194,74,.45) !important;
border-radius: 20px !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
/* Icon Box : même rendu */
.elementor-widget-icon-box.zyn-icon-gold .elementor-icon-box-icon {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
.elementor-widget-icon-box.zyn-icon-gold .elementor-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
padding: 14px !important;
background: rgba(245,194,74,.14) !important;
border: 1px solid rgba(245,194,74,.45) !important;
border-radius: 20px !important;
box-sizing: border-box !important;
}
.elementor-widget-icon-box.zyn-icon-gold .elementor-icon svg,
.elementor-widget-icon-box.zyn-icon-gold .elementor-icon i {
width: 100% !important;
height: 100% !important;
font-size: 28px !important;
color: #F5C24A !important;
fill: #F5C24A !important;
}
/* Bloc texte : pleine largeur, pas de marge gauche */
.elementor-widget-image-box.zyn-icon-gold .elementor-image-box-content,
.elementor-widget-icon-box.zyn-icon-gold .elementor-icon-box-content {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* ============================================================
MENU CATÉGORIES — Style Zyntrol (Aligné avec Contact Card)
============================================================ */
/* Conteneur principal */
.wpb_category_n_menu_accordion {
background-color: #1c1c22 !important;
border: 1px solid var(--zyn-border-strong, rgba(255,255,255,.12));
border-radius: var(--zyn-radius, 14px);
overflow: hidden;
}
.wpb_category_n_menu_accordion_list,
.wpb_category_n_menu_accordion_list ul.children {
list-style: none;
margin: 0;
padding: 0;
background: transparent;
}
/* Séparateurs */
.wpb_category_n_menu_accordion_list > li.cat-item {
border-bottom: 1px solid var(--zyn-border-strong, rgba(255,255,255,.12));
}
.wpb_category_n_menu_accordion_list > li.cat-item:last-child {
border-bottom: none;
}
/* Liens niveau 1 */
.wpb_category_n_menu_accordion_list > .cat-item > a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
color: #1c1c22;
font-family: var(--zyn-font-body, "Inter", sans-serif);
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
border-left: 3px solid transparent;
transition: all .2s ease;
}
/* Survol */
.wpb_category_n_menu_accordion_list > .cat-item > a:hover {
background: #1548D7;
color: var(--zyn-primary, #1548D7);
border-left-color: var(--zyn-primary, #1548D7);
}
/* Item actif */
.wpb_category_n_menu_accordion_list > .cat-item.current-cat > a {
background: #1c1c22;
color: var(--zyn-primary, #1548D7);
font-weight: 600;
border-left-color: var(--zyn-primary, #1548D7);
}
/* Indicateur */
.wpb-submenu-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--zyn-muted, #9CA3AF);
transition: all .2s ease;
}
/* Sous-menu (fond cohérent avec ta card) */
.wpb_category_n_menu_accordion_list ul.children {
background: rgba(0,0,0,.2);
border-top: 1px solid var(--zyn-border-strong, rgba(255,255,255,.12));
}
.wpb_category_n_menu_accordion_list ul.children .cat-item > a {
display: block;
padding: 10px 18px 10px 38px;
font-size: 13px;
color: var(--zyn-muted, #9CA3AF);
text-decoration: none;
border-left: 3px solid transparent;
transition: all .2s ease;
}
.wpb_category_n_menu_accordion_list ul.children .cat-item > a::before {
content: "—";
display: inline-block;
width: 12px;
margin-left: -16px;
margin-right: 4px;
color: var(--zyn-muted, #9CA3AF);
}
.wpb_category_n_menu_accordion_list ul.children .cat-item > a:hover {
color: var(--zyn-text, #FAFAFA);
background: rgba(255,255,255,.05);
border-left-color: var(--zyn-primary, #1548D7);
}
/* Style des cartes et icônes */
.payment-container {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.payment-container img {
width: 42px;
height: 26px;
object-fit: contain;
background: #ffffff;
padding: 2px;
border-radius: 2px;
}
@media (max-width: 768px) {
.payment-container { justify-content: center; }
}
/* Style du copyright */
.zyntrol-footer-text { font-size: 13px; color: #fff; font-family: sans-serif; line-height: 1.5; }
.zyntrol-footer-text .slogan { font-style: italic; display: inline-block; margin-left: 5px; }
/* On force le texte en noir pour toute la zone des cookies */
.cookies-per-purpose,
.cookies-per-purpose h4,
.cookies-per-purpose h5,
.cookies-per-purpose div {
color: #000000 !important;
}
/* On s'assure que le fond reste bien clair pour que le texte noir soit lisible */
.cookies-per-purpose {
background-color: #ffffff !important;
padding: 20px; /* Ajoute un peu d'espace pour la lisibilité */
}
.zyn-cookie-link{
color: var(--zyn-muted);
font-size: 13px;
text-decoration: none;
transition: color .2s ease;
}
.zyn-cookie-link:hover{
color: var(--zyn-primary);
}
/* Liens menus footer en blanc + état actif/survol en Electric Blue */
#menu-services-footer.menu a,
#menu-infos-legales.menu a {
color: #ffffff !important;
transition: color 0.2s ease;
}
#menu-services-footer.menu a:hover,
#menu-services-footer.menu a:focus,
#menu-services-footer.menu .current-menu-item > a,
#menu-services-footer.menu .current-menu-ancestor > a,
#menu-services-footer.menu .current_page_item > a,
#menu-infos-legales.menu a:hover,
#menu-infos-legales.menu a:focus,
#menu-infos-legales.menu .current-menu-item > a,
#menu-infos-legales.menu .current-menu-ancestor > a,
#menu-infos-legales.menu .current_page_item > a {
color: #3D6FE8 !important;
}
/* Correction ciblée : champ "Votre note" dans le formulaire d'avis WooCommerce */
#commentform .comment-form-rating {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 18px !important;
}
#commentform .comment-form-rating label {
margin: 0 !important;
line-height: 1 !important;
}
#commentform .comment-form-rating p.stars {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
#commentform .comment-form-rating p.stars span {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
line-height: 1 !important;
}
/* Cache seulement le texte accessible, pas l'étoile */
#commentform .comment-form-rating p.stars a {
position: relative !important;
display: inline-block !important;
width: 20px !important;
height: 20px !important;
line-height: 20px !important;
font-size: 0 !important;
text-indent: 0 !important;
overflow: visible !important;
color: transparent !important;
text-decoration: none !important;
}
/* Affiche l'étoile */
#commentform .comment-form-rating p.stars a::before {
content: "\e021" !important;
font-family: "WooCommerce" !important;
font-size: 20px !important;
line-height: 20px !important;
color: #f5c400 !important;
text-indent: 0 !important;
}
/* Survol : étoiles pleines */
#commentform .comment-form-rating p.stars:hover a::before {
content: "\e020" !important;
}
/* Après l'étoile survolée : étoiles vides */
#commentform .comment-form-rating p.stars a:hover ~ a::before {
content: "\e021" !important;
}
/* Note sélectionnée */
#commentform .comment-form-rating p.stars.selected a.active::before,
#commentform .comment-form-rating p.stars.selected a:not(.active)::before {
content: "\e020" !important;
}
/* Après la sélection : étoiles vides */
#commentform .comment-form-rating p.stars.selected a.active ~ a::before {
content: "\e021" !important;
}
.woocommerce div.product .product_title {
font-size: 32px !important;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
font-size: 24px !important;
}
/* Masquer le bloc coupon uniquement sur la page Panier */
.woocommerce-cart .wd-cart-action-row .coupon.wd-coupon-form {
display: none !important;
}
/* Bouton flottant "Gérer le consentement" — par défaut sous les overlays hauts */
.cmplz-manage-consent.cmplz-show {
z-index: 100 !important;
}
/* Quand le side-cart Woodmart est ouvert → passe carrément derrière */
body.cart-widget-opened .cmplz-manage-consent.cmplz-show,
body.wd-cart-opened .cmplz-manage-consent.cmplz-show {
z-index: 1 !important;
/* option : le masquer complètement pendant l'ouverture */
/* visibility: hidden; */
}
/* Idem quand la modale de consentement elle-même est ouverte, pour éviter le doublon */
body.cmplz-open .cmplz-manage-consent.cmplz-show {
z-index: 1 !important;
}
.grecaptcha-badge {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.zyntrol-footer-bottom {
display: flex;
justify-content: flex-end;
align-items: flex-end;
gap: 24px;
flex-wrap: wrap;
padding-top: 20px;
padding-right: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.recaptcha-line {
display: block;
margin-top: 6px;
font-size: 10px;
opacity: 0.35;
font-weight: 400;
text-align: right;
}
.recaptcha-line a {
color: inherit;
text-decoration: none;
font-size: inherit;
}
.recaptcha-line a:hover {
opacity: 1;
text-decoration: underline;
}
/* Mobile : centré proprement sur les petits écrans */
@media (max-width: 768px) {
.zyntrol-footer-bottom {
flex-direction: column;
align-items: center;
text-align: center;
padding-right: 0;
padding-bottom: 100px;
}
.recaptcha-line {
font-size: 9px;
text-align: center;
}
}
/* ============================================================
FIX DÉFINITIF — Coupon panier + checkout
Montant + symbole € verts, croix verte simple, sans cercle
============================================================ */
/* Montant coupon + symbole € en vert — panier */
.woocommerce-cart .cart_totals tr.cart-discount td,
.woocommerce-cart .cart_totals tr.cart-discount td .amount,
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-Price-amount,
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-Price-amount bdi,
.woocommerce-cart .cart_totals tr.cart-discount td .woocommerce-Price-currencySymbol,
.woocommerce .cart_totals tr.cart-discount td,
.woocommerce .cart_totals tr.cart-discount td .amount,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-Price-amount,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-Price-amount bdi,
.woocommerce .cart_totals tr.cart-discount td .woocommerce-Price-currencySymbol {
color: var(--zyn-success, #22C55E) !important;
font-weight: 700 !important;
}
/* Montant coupon + symbole € en vert — checkout */
.woocommerce-checkout-review-order-table tr.cart-discount td,
.woocommerce-checkout-review-order-table tr.cart-discount td .amount,
.woocommerce-checkout-review-order-table tr.cart-discount td .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table tr.cart-discount td .woocommerce-Price-amount bdi,
.woocommerce-checkout-review-order-table tr.cart-discount td .woocommerce-Price-currencySymbol {
color: var(--zyn-success, #22C55E) !important;
font-weight: 700 !important;
}
/* Label coupon au checkout aussi en vert si tu veux tout homogène */
.woocommerce-checkout-review-order-table tr.cart-discount th {
color: var(--zyn-success, #22C55E) !important;
font-weight: 700 !important;
}
/* Lien supprimer coupon — panier + checkout */
.woocommerce-cart .cart_totals tr.cart-discount td a.woocommerce-remove-coupon,
.woocommerce .cart_totals tr.cart-discount td a.woocommerce-remove-coupon,
.woocommerce-cart .cart_totals tr.cart-discount td a[href*="remove_coupon"],
.woocommerce .cart_totals tr.cart-discount td a[href*="remove_coupon"],
.woocommerce-checkout-review-order-table tr.cart-discount td a.woocommerce-remove-coupon,
.woocommerce-checkout-review-order-table tr.cart-discount td a[href*="remove_coupon"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 0 0 5px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: transparent !important;
font-size: 0 !important;
line-height: 1 !important;
text-decoration: none !important;
text-indent: 0 !important;
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
transform: none !important;
float: none !important;
overflow: visible !important;
}
/* Croix verte simple — panier + checkout */
.woocommerce-cart .cart_totals tr.cart-discount td a.woocommerce-remove-coupon::before,
.woocommerce .cart_totals tr.cart-discount td a.woocommerce-remove-coupon::before,
.woocommerce-cart .cart_totals tr.cart-discount td a[href*="remove_coupon"]::before,
.woocommerce .cart_totals tr.cart-discount td a[href*="remove_coupon"]::before,
.woocommerce-checkout-review-order-table tr.cart-discount td a.woocommerce-remove-coupon::before,
.woocommerce-checkout-review-order-table tr.cart-discount td a[href*="remove_coupon"]::before {
content: "×" !important;
display: inline-block !important;
color: var(--zyn-success, #22C55E) !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 1 !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
position: static !important;
}
/* Supprime les éventuels ::after du thème */
.woocommerce-cart .cart_totals tr.cart-discount td a.woocommerce-remove-coupon::after,
.woocommerce .cart_totals tr.cart-discount td a.woocommerce-remove-coupon::after,
.woocommerce-cart .cart_totals tr.cart-discount td a[href*="remove_coupon"]::after,
.woocommerce .cart_totals tr.cart-discount td a[href*="remove_coupon"]::after,
.woocommerce-checkout-review-order-table tr.cart-discount td a.woocommerce-remove-coupon::after,
.woocommerce-checkout-review-order-table tr.cart-discount td a[href*="remove_coupon"]::after {
content: none !important;
display: none !important;
}
/* Hover */
.woocommerce-cart .cart_totals tr.cart-discount td a.woocommerce-remove-coupon:hover::before,
.woocommerce .cart_totals tr.cart-discount td a.woocommerce-remove-coupon:hover::before,
.woocommerce-cart .cart_totals tr.cart-discount td a[href*="remove_coupon"]:hover::before,
.woocommerce .cart_totals tr.cart-discount td a[href*="remove_coupon"]:hover::before,
.woocommerce-checkout-review-order-table tr.cart-discount td a.woocommerce-remove-coupon:hover::before,
.woocommerce-checkout-review-order-table tr.cart-discount td a[href*="remove_coupon"]:hover::before {
color: #16A34A !important;
}
/* Empêche le retour à la ligne entre montant et croix */
.woocommerce-cart .cart_totals tr.cart-discount td,
.woocommerce .cart_totals tr.cart-discount td,
.woocommerce-checkout-review-order-table tr.cart-discount td {
white-space: nowrap !important;
}
#order_review .wd-checkout-coupon {
margin: 12px 0 16px;
}
#order_review .wd-checkout-coupon .woocommerce-form-coupon {
display: block !important; /* évite qu'il reste caché derrière le toggle */
}
#order_review .wd-checkout-coupon .form-row-first,
#order_review .wd-checkout-coupon .form-row-last {
width: 100%;
float: none;
margin: 6px 0;
}
/* === Code promo checkout : masquer en haut, garder juste input + bouton à droite === */
/* 1) Masquer complètement le bloc coupon en haut du checkout */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout > .wd-checkout-coupon,
.woocommerce-checkout form.checkout > .checkout_coupon,
.woocommerce-checkout > .wd-checkout-coupon {
display: none !important;
}
/* 2) Afficher le formulaire coupon DANS la colonne de droite (#order_review) */
/* Woodmart / WooCommerce le rend aussi à l'intérieur du résumé — on le force visible */
#order_review .checkout_coupon,
#order_review .woocommerce-form-coupon,
.woocommerce-checkout-review-order .checkout_coupon,
.woocommerce-checkout-review-order .woocommerce-form-coupon {
display: block !important;
margin: 0 0 16px;
padding: 12px;
background: rgba(255,255,255,.03);
border: 1px solid var(--zyn-border);
border-radius: var(--zyn-radius-sm);
}
/* 3) Masquer le message "Avez-vous un code promo ? Cliquez ici..." à l'intérieur du résumé */
#order_review .woocommerce-form-coupon-toggle,
.woocommerce-checkout-review-order .woocommerce-form-coupon-toggle {
display: none !important;
}
/* 4) Layout input + bouton côte à côte, pleine largeur */
#order_review .checkout_coupon .form-row,
.woocommerce-checkout-review-order .checkout_coupon .form-row {
width: 100% !important;
float: none !important;
margin: 0 0 8px !important;
padding: 0 !important;
}
#order_review .checkout_coupon input#coupon_code,
.woocommerce-checkout-review-order .checkout_coupon input#coupon_code {
width: 100% !important;
height: 42px;
border-radius: var(--zyn-radius-sm);
}
#order_review .checkout_coupon button[name="apply_coupon"],
.woocommerce-checkout-review-order .checkout_coupon button[name="apply_coupon"] {
width: 100%;
height: 42px;
border-radius: var(--zyn-radius-sm);
}
#order_review .checkout_coupon .clear,
.woocommerce-checkout-review-order .checkout_coupon .clear { display: none; }
/* Code promo checkout : largeur 100% desktop + mobile */
.zyn-coupon-in-review .form-row,
.zyn-coupon-in-review .form-row-first,
.zyn-coupon-in-review .form-row-last {
width: 100% !important;
float: none !important;
max-width: 100% !important;
margin: 6px 0 !important;
padding: 0 !important;
}
.zyn-coupon-in-review input#coupon_code,
.zyn-coupon-in-review button[name="apply_coupon"] {
width: 100% !important;
max-width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
.zyn-coupon-in-review .clear { display: none !important; }
.zyn-coupon-in-review {
margin-top: 12px !important;
margin-bottom: 16px !important;
padding: 0 !important;
background: transparent !important;
width: 100%;
}
.zyn-coupon-in-review .form-row,
.zyn-coupon-in-review input[name="coupon_code"],
.zyn-coupon-in-review button,
.zyn-coupon-in-review .button {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 0 10px !important;
}
/* Fix tri boutique — texte rogné dans le select "orderby" */
.woocommerce .woocommerce-ordering select.orderby,
.wd-shop-tools select.orderby,
select.orderby {
height: auto !important;
min-height: 44px;
line-height: 1.4 !important;
padding: 10px 36px 10px 14px !important; /* espace à droite pour la flèche */
font-size: 14px;
box-sizing: border-box;
vertical-align: middle;
}
/* Options du menu déroulant (là où le navigateur le permet) */
select.orderby option {
line-height: 1.4;
padding: 6px 8px;
}
/* Fix select rognés au checkout (pays, état, etc.) */
.woocommerce form .form-row select,
.woocommerce-checkout select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__rendered {
height: auto !important;
min-height: 44px !important;
line-height: 1.4 !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Recentrer la flèche Select2 sur la nouvelle hauteur */
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100% !important;
top: 0 !important;
}
/* Par défaut : texte en blanc */
.wd-accordion .wd-accordion-title span {
color: #FFFFFF !important;
transition: color 0.2s ease !important;
}
/* Au survol ou quand l'accordéon est actif/ouvert (ici il reste blanc ou tu peux changer si tu veux une autre couleur) */
.wd-accordion .wd-accordion-title:hover span,
.wd-accordion .wd-accordion-item.wd-active .wd-accordion-title span,
.wd-accordion .wd-accordion-title.wd-active span {
color: #FFFFFF !important;
}
/* ============================================================
ZYNTROL — Tableaux de prix (Desktop & Mobile)
============================================================ */
.zyn-html-table {
display: flex;
flex-direction: column;
gap: 8px;
}
.zyn-table-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--zyn-border);
border-radius: var(--zyn-radius-sm);
transition: background .2s ease;
}
.zyn-table-row:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--zyn-border-strong);
}
.zyn-table-row span {
color: var(--zyn-text);
font-size: 14px;
}
.zyn-table-row strong {
color: var(--zyn-primary-light);
font-size: 15px;
font-weight: 700;
white-space: nowrap;
}
/* --- ADAPTATION MOBILE --- */
@media (max-width: 480px) {
.zyn-table-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 12px 14px;
}
.zyn-table-row span {
font-size: 13.5px;
line-height: 1.3;
}
.zyn-table-row strong {
font-size: 14.5px;
align-self: flex-end; /* Aligne le prix proprement à droite sur mobile */
}
}
/* Fond blanc uniquement sur les pages contenant le configurateur */
body:has(.zcm-app) {
background: #fff !important;
color: #111 !important;
}
/* Supprime les bandes noires haut/bas venant du conteneur Woodmart */
body:has(.zcm-app) .wd-page-content,
body:has(.zcm-app) #main-content,
body:has(.zcm-app) .site-content,
body:has(.zcm-app) .wd-content-area,
body:has(.zcm-app) article.entry-content {
background: #fff !important;
}
/* Enlève l'espace vertical du conteneur autour du configurateur */
body:has(.zcm-app) #main-content.container {
padding-top: 0 !important;
padding-bottom: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Titres et textes lisibles sur fond blanc dans cette page */
body:has(.zcm-app) .zcm-app,
body:has(.zcm-app) .zcm-app h2,
body:has(.zcm-app) .zcm-app h3,
body:has(.zcm-app) .zcm-app p {
color: #111 !important;
}
/* 2. Supprime l'espace vide ou la marge parasite tout en bas de la page */
#main-content {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* --- CORRECTION FORMULAIRE BREVO ZYNTROL --- */
/* 1. Conteneur principal (on le centre et on limite sa largeur) */
.sib_signup_box_inside_1 {
max-width: 450px;
margin: 0 auto; /* Centre le formulaire sur la page */
padding: 20px;
background-color: transparent; /* S'adapte au fond de ta section Elementor */
}
/* 2. Le label "Adresse email*" (Le texte au-dessus du champ) */
.sib_signup_box_inside_1 label {
display: block;
margin-bottom: 10px;
color: #ffffff; /* Reste en blanc */
font-size: 16px;
font-weight: 600;
}
/* 3. LE CHAMP DE SAISIE (La zone où l'on écrit) */
.sib_signup_box_inside_1 input[type="email"] {
width: 100%;
padding: 15px;
/* FOND LEGEREMENT GRIS - Pour qu'on voit le champ sur ton fond noir */
background-color: #2a2a2a;
/* BORDURE PLUS CLAIRE - Pour bien délimiter le champ */
border: 1px solid #555555;
color: #ffffff; /* Texte tapé en blanc */
border-radius: 8px; /* Bords arrondis modernes */
font-size: 15px;
box-sizing: border-box;
transition: all 0.3s ease; /* Petite animation douce au clic */
}
/* Effet quand on clique dans le champ (focus) */
.sib_signup_box_inside_1 input[type="email"]:focus {
outline: none;
border-color: #007bff; /* La bordure devient bleue au clic (change le code couleur si tu préfères) */
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}
/* --- CENTRER ET HABILLER LE FORMULAIRE BREVO --- */
/* 1. Conteneur principal : on centre tout le bloc et on limite sa largeur */
.sib_signup_box_inside_1 {
max-width: 450px;
margin: 0 auto !important; /* Force le centrage de la boîte */
padding: 20px;
text-align: left; /* Garde le texte aligné à gauche à l'intérieur du bloc */
}
/* 2. Le label "Adresse email*" */
.sib_signup_box_inside_1 label {
display: block;
margin-bottom: 8px;
color: #ffffff;
font-size: 15px;
font-weight: 500;
}
/* 3. Le champ de saisie de l'e-mail */
.sib_signup_box_inside_1 input[type="email"] {
width: 100%;
padding: 12px 15px;
background-color: #2a2a2a; /* Fond gris sombre visible */
border: 1px solid #555555; /* Bordure claire */
color: #ffffff;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
margin-bottom: 15px; /* Espace entre le champ et le bouton */
}
/* 4. Le bouton de validation */
.sib_signup_box_inside_1 .sib-default-btn,
.sib_signup_box_inside_1 button[type="submit"] {
width: 100%; /* Le bouton prend toute la largeur du bloc */
padding: 12px 20px;
background-color: #ffffff; /* Bouton blanc pour contraster avec le fond sombre (ou mets #000 si tu préfères) */
color: #000000;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Effet au survol du bouton */
.sib_signup_box_inside_1 .sib-default-btn:hover,
.sib_signup_box_inside_1 button[type="submit"]:hover {
background-color: #e0e0e0;
}
/* Page ID 123 — fond orange pâle */
.page-id-37077 input[type="text"],
.page-id-37077 input[type="email"],
.page-id-37077 textarea,
.page-id-37077 select,
.page-id-37077 .elementor-field-group input,
.page-id-37077 .elementor-field-group textarea,
.page-id-37077 .elementor-field-group select {
background: #ffffff !important;
color: #1a1a1a !important; /* texte noir/gris foncé */
}
/* Déplace le bouton de révision des cookies vers le haut */
.cky-btn-revisit-wrapper.cky-revisit-bottom-right {
bottom: 100px !important;
z-index: 998 !important; /* Force un niveau inférieur pour qu'il ne gêne pas le panier */
}
/* S'assure que le tiroir du panier (side cart) passe toujours au premier plan */
.woodmart-side-cart, .cart-widget-side, .whb-shopping-cart {
z-index: 9999 !important;
}
/* Ajoute une marge interne uniquement sur la page favoris ET uniquement sur mobile */
@media (max-width: 768px) {
body.wishlist .woocommerce,
body.page-template-wishlist .woocommerce,
.whb-wishlist-page .woocommerce {
padding: 15px !important; /* Ajuste la valeur (ex: 15px ou 20px) pour le mobile */
}
}
/* Aligne les boutons d'action de commande sur mobile */
@media (max-width: 768px) {
/* Cible le conteneur du tableau ou les boutons directement */
.woocommerce-orders-table td .woocommerce-button,
.order-actions-button {
display: inline-block !important;
margin-right: 8px !important; /* Petit espace entre les deux boutons */
margin-bottom: 8px !important; /* Évite qu'ils ne se collent s'ils passent à la ligne */
}
}