/* ==========================================================================
   DS SKIN v1.0 — Refonte visuelle DS Solutions
   Cible : WordPress + thème Ecomall (Tbay) + Elementor + WooCommerce
   Principe : surcouche 100 % CSS. Aucun template n'est modifié.
   Direction artistique : noir profond, rouge myPOS, cartes vitrées, typo Plus Jakarta Sans / Inter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
	--ds-bg:          #0B0B0D;
	--ds-bg-2:        #0F0F13;
	--ds-surface:     #16161B;
	--ds-surface-2:   #1D1D24;
	--ds-line:        rgba(255, 255, 255, .09);
	--ds-line-2:      rgba(255, 255, 255, .16);

	--ds-text:        #F4F4F6;
	--ds-muted:       #9E9EAB;
	--ds-dim:         #6F6F7C;

	--ds-red:         #E11D2A;
	--ds-red-2:       #FF3B45;
	--ds-red-dark:    #A9121C;
	--ds-red-soft:    rgba(225, 29, 42, .12);
	--ds-red-glow:    rgba(225, 29, 42, .35);

	--ds-green:       #22C55E;

	--ds-radius:      18px;
	--ds-radius-sm:   12px;
	--ds-radius-pill: 999px;

	--ds-shadow:      0 24px 60px -28px rgba(0, 0, 0, .9);
	--ds-shadow-red:  0 18px 40px -18px var(--ds-red-glow);

	--ds-font:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ds-display:     "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

	--ds-ease:        cubic-bezier(.22, .61, .36, 1);
	--ds-container:   1240px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
.ds-skin,
.ds-skin #page,
.ds-skin .site,
.ds-skin #wrapper-container,
.ds-skin #main-container,
.ds-skin .site-content,
.ds-skin #main-content {
	background-color: var(--ds-bg) !important;
	color: var(--ds-text);
}

.ds-skin {
	font-family: var(--ds-font) !important;
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.ds-skin p,
.ds-skin li,
.ds-skin td,
.ds-skin dd,
.ds-skin label,
.ds-skin span:not([class*="icon"]):not([class*="fa"]) {
	color: inherit;
}

.ds-skin h1, .ds-skin h2, .ds-skin h3,
.ds-skin h4, .ds-skin h5, .ds-skin h6,
.ds-skin .elementor-heading-title,
.ds-skin .product_title,
.ds-skin .woocommerce-loop-product__title {
	font-family: var(--ds-display) !important;
	color: var(--ds-text) !important;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.12;
}

.ds-skin h1, .ds-skin .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.ds-skin h2, .ds-skin .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.ds-skin h3, .ds-skin .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.ds-skin a { color: var(--ds-text); text-decoration: none; transition: color .2s var(--ds-ease); }
.ds-skin a:hover { color: var(--ds-red-2); }

.ds-skin ::selection { background: var(--ds-red); color: #fff; }

.ds-skin *:focus-visible {
	outline: 2px solid var(--ds-red-2) !important;
	outline-offset: 3px;
	border-radius: 4px;
}

/* Barre de défilement */
.ds-skin ::-webkit-scrollbar { width: 11px; height: 11px; }
.ds-skin ::-webkit-scrollbar-track { background: var(--ds-bg); }
.ds-skin ::-webkit-scrollbar-thumb { background: #2A2A33; border-radius: 99px; border: 3px solid var(--ds-bg); }
.ds-skin ::-webkit-scrollbar-thumb:hover { background: var(--ds-red-dark); }

/* --------------------------------------------------------------------------
   3. NEUTRALISATION DES FONDS CLAIRS (thème + Elementor)
   Les fonds de couleur hérités deviennent transparents pour laisser passer
   le noir. Les images de fond, elles, sont conservées.
   Astuce : ajouter la classe "ds-keep-bg" à une section Elementor pour
   qu'elle garde son fond d'origine.
   -------------------------------------------------------------------------- */
.ds-skin .elementor-section:not(.ds-keep-bg),
.ds-skin .e-con:not(.ds-keep-bg),
.ds-skin .elementor-column-wrap,
.ds-skin .elementor-widget-wrap,
.ds-skin .elementor-widget-container,
.ds-skin .entry-content,
.ds-skin .page-content,
.ds-skin .container,
.ds-skin .row,
.ds-skin main {
	background-color: transparent !important;
}

.ds-skin .elementor-widget-text-editor,
.ds-skin .elementor-widget-text-editor p,
.ds-skin .elementor-widget-icon-box .elementor-icon-box-description,
.ds-skin .elementor-widget-icon-list .elementor-icon-list-text,
.ds-skin .elementor-widget-testimonial,
.ds-skin .elementor-tab-content,
.ds-skin .elementor-accordion .elementor-tab-content {
	color: var(--ds-muted) !important;
}

.ds-skin .elementor-icon-box-title,
.ds-skin .elementor-image-box-title,
.ds-skin .elementor-accordion-title,
.ds-skin .elementor-tab-title {
	color: var(--ds-text) !important;
	font-family: var(--ds-display) !important;
}

.ds-skin .elementor-widget-icon .elementor-icon,
.ds-skin .elementor-icon-box-icon .elementor-icon {
	color: var(--ds-red-2) !important;
	fill: var(--ds-red-2) !important;
}

.ds-skin .elementor-divider-separator { border-color: var(--ds-line) !important; }

/* Blocs "icon box" transformés en cartes */
.ds-skin .elementor-widget-icon-box .elementor-icon-box-wrapper {
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	padding: 26px 24px;
	height: 100%;
	transition: transform .3s var(--ds-ease), border-color .3s var(--ds-ease), box-shadow .3s var(--ds-ease);
}
.ds-skin .elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
	transform: translateY(-4px);
	border-color: var(--ds-line-2);
	box-shadow: var(--ds-shadow);
}

/* --------------------------------------------------------------------------
   4. EN-TÊTE
   -------------------------------------------------------------------------- */
.ds-skin .tbay-header,
.ds-skin #tbay-header,
.ds-skin .site-header,
.ds-skin .header-wrapper,
.ds-skin .tbay-header-wrapper,
.ds-skin .header-main,
.ds-skin .header-content,
.ds-skin .tbay-mainmenu,
.ds-skin .header-sticky,
.ds-skin .tbay-header-sticky {
	background-color: rgba(11, 11, 13, .82) !important;
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--ds-line);
	box-shadow: none !important;
}

.ds-skin.ds-scrolled .tbay-header,
.ds-skin.ds-scrolled #tbay-header,
.ds-skin.ds-scrolled .site-header,
.ds-skin.ds-scrolled .header-wrapper {
	background-color: rgba(11, 11, 13, .96) !important;
	box-shadow: 0 12px 32px -20px #000 !important;
}

/* Barre supérieure (topbar) : accent rouge */
.ds-skin .tbay-topbar,
.ds-skin .topbar,
.ds-skin .header-top {
	background: linear-gradient(90deg, var(--ds-red-dark), var(--ds-red)) !important;
	color: #fff !important;
	border: 0 !important;
}
.ds-skin .tbay-topbar a,
.ds-skin .topbar a,
.ds-skin .header-top a { color: #fff !important; }

/* Logo : le fichier actuel est un JPG à fond blanc — on l'habille en pastille. */
.ds-skin .logo img,
.ds-skin .site-logo img,
.ds-skin .tbay-logo img,
.ds-skin .navbar-brand img {
	background: #fff;
	padding: 7px 12px;
	border-radius: 12px;
	max-height: 62px;
	width: auto;
	box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .9);
}
/* Si vous remplacez le logo par un PNG/WebP à fond transparent,
   décommentez le bloc suivant pour retirer la pastille blanche :
.ds-skin .logo img, .ds-skin .site-logo img, .ds-skin .tbay-logo img {
	background: none; padding: 0; box-shadow: none;
}
*/

/* Menu principal */
.ds-skin .tbay-mainmenu .navbar-nav > li > a,
.ds-skin .main-menu > li > a,
.ds-skin .primary-menu > li > a,
.ds-skin .nav > li > a,
.ds-skin .menu > li > a {
	color: var(--ds-text) !important;
	font-family: var(--ds-font) !important;
	font-weight: 500 !important;
	font-size: .95rem !important;
	letter-spacing: .01em;
	text-transform: none !important;
	position: relative;
	padding: 10px 16px !important;
}

.ds-skin .main-menu > li > a::after,
.ds-skin .nav > li > a::after,
.ds-skin .menu > li > a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 2px;
	height: 2px;
	background: var(--ds-red);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s var(--ds-ease);
}
.ds-skin .main-menu > li:hover > a::after,
.ds-skin .main-menu > li.current-menu-item > a::after,
.ds-skin .nav > li:hover > a::after,
.ds-skin .menu > li:hover > a::after,
.ds-skin .menu > li.current-menu-item > a::after { transform: scaleX(1); }

.ds-skin .main-menu > li:hover > a,
.ds-skin .menu > li:hover > a,
.ds-skin .nav > li:hover > a { color: #fff !important; }

/* Sous-menus */
.ds-skin .sub-menu,
.ds-skin .dropdown-menu,
.ds-skin .tbay-mainmenu .dropdown-menu {
	background: var(--ds-surface) !important;
	border: 1px solid var(--ds-line) !important;
	border-radius: var(--ds-radius-sm) !important;
	box-shadow: var(--ds-shadow) !important;
	padding: 8px !important;
}
.ds-skin .sub-menu a,
.ds-skin .dropdown-menu a {
	color: var(--ds-muted) !important;
	border-radius: 8px;
	padding: 9px 12px !important;
}
.ds-skin .sub-menu a:hover,
.ds-skin .dropdown-menu a:hover {
	background: var(--ds-red-soft) !important;
	color: #fff !important;
}

/* Icônes panier / compte / recherche */
.ds-skin .tbay-topcart .cart-icon,
.ds-skin .cart-dropdown,
.ds-skin .header-icons a,
.ds-skin .tbay-search-form,
.ds-skin .tbay-icon-account { color: var(--ds-text) !important; }

.ds-skin .tbay-topcart .mini-cart,
.ds-skin .widget_shopping_cart_content,
.ds-skin .cart-popup {
	background: var(--ds-surface) !important;
	border: 1px solid var(--ds-line) !important;
	color: var(--ds-text) !important;
	border-radius: var(--ds-radius-sm) !important;
}

.ds-skin .cart-count,
.ds-skin .mini-cart-counter,
.ds-skin .count,
.ds-skin .tbay-topcart .count {
	background: var(--ds-red) !important;
	color: #fff !important;
	border: 0 !important;
}

/* Menu mobile hors-écran */
.ds-skin .tbay-offcanvas,
.ds-skin .offcanvas,
.ds-skin .mobile-menu,
.ds-skin .tbay-mobile-menu {
	background: var(--ds-bg-2) !important;
	color: var(--ds-text) !important;
	border-right: 1px solid var(--ds-line);
}
.ds-skin .tbay-offcanvas a,
.ds-skin .mobile-menu a { color: var(--ds-text) !important; }

/* Fil d'Ariane */
.ds-skin .breadcrumb,
.ds-skin .woocommerce-breadcrumb,
.ds-skin .tbay-breadcrumb,
.ds-skin .page-title-wrapper {
	background: linear-gradient(180deg, #101014, var(--ds-bg)) !important;
	color: var(--ds-muted) !important;
	border-bottom: 1px solid var(--ds-line);
}
.ds-skin .woocommerce-breadcrumb a { color: var(--ds-muted) !important; }
.ds-skin .woocommerce-breadcrumb a:hover { color: var(--ds-red-2) !important; }

/* --------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */
.ds-skin .elementor-button,
.ds-skin .button,
.ds-skin .btn,
.ds-skin button:not(.ds-plain):not(.navbar-toggle):not(.close):not([class*="arrow"]):not([class*="slick"]):not([class*="swiper"]):not([class*="owl"]):not([class*="toggle"]),
.ds-skin input[type="submit"],
.ds-skin .wp-element-button,
.ds-skin .woocommerce a.button,
.ds-skin .woocommerce button.button,
.ds-skin .woocommerce input.button,
.ds-skin .woocommerce #respond input#submit,
.ds-skin .woocommerce a.button.alt,
.ds-skin .woocommerce button.button.alt {
	font-family: var(--ds-font) !important;
	font-weight: 600 !important;
	font-size: .95rem !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	color: #fff !important;
	background: linear-gradient(135deg, var(--ds-red), var(--ds-red-dark)) !important;
	border: 1px solid rgba(255, 255, 255, .10) !important;
	border-radius: var(--ds-radius-pill) !important;
	padding: 13px 26px !important;
	line-height: 1.2 !important;
	box-shadow: var(--ds-shadow-red) !important;
	transition: transform .22s var(--ds-ease), box-shadow .22s var(--ds-ease), filter .22s var(--ds-ease) !important;
	cursor: pointer;
}

.ds-skin .elementor-button:hover,
.ds-skin .button:hover,
.ds-skin .btn:hover,
.ds-skin button:not(.ds-plain):not(.navbar-toggle):not(.close):not([class*="arrow"]):not([class*="slick"]):not([class*="swiper"]):not([class*="owl"]):not([class*="toggle"]):hover,
.ds-skin input[type="submit"]:hover,
.ds-skin .woocommerce a.button:hover,
.ds-skin .woocommerce button.button:hover,
.ds-skin .woocommerce input.button:hover,
.ds-skin .woocommerce a.button.alt:hover,
.ds-skin .woocommerce button.button.alt:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 22px 46px -18px var(--ds-red-glow) !important;
	color: #fff !important;
}

.ds-skin .elementor-button:active,
.ds-skin .button:active { transform: translateY(0); }

/* Variante secondaire : ajouter la classe "ds-btn-ghost" dans Elementor */
.ds-skin .ds-btn-ghost .elementor-button,
.ds-skin .ds-btn-ghost.button,
.ds-skin a.ds-btn-ghost {
	background: rgba(255, 255, 255, .04) !important;
	border: 1px solid var(--ds-line-2) !important;
	box-shadow: none !important;
	color: var(--ds-text) !important;
}
.ds-skin .ds-btn-ghost .elementor-button:hover,
.ds-skin a.ds-btn-ghost:hover {
	background: rgba(255, 255, 255, .09) !important;
	border-color: var(--ds-red) !important;
}

/* Boutons neutres du thème à ne pas colorer en rouge */
.ds-skin .navbar-toggle,
.ds-skin .close,
.ds-skin .quantity input,
.ds-skin .plus,
.ds-skin .minus {
	background: var(--ds-surface-2) !important;
	color: var(--ds-text) !important;
	border: 1px solid var(--ds-line) !important;
	box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   6. WOOCOMMERCE — GRILLE BOUTIQUE
   -------------------------------------------------------------------------- */
.ds-skin.woocommerce ul.products,
.ds-skin .woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 26px;
	margin: 0 !important;
	padding: 0 !important;
}

.ds-skin .woocommerce ul.products::before,
.ds-skin .woocommerce ul.products::after { display: none !important; }

.ds-skin .woocommerce ul.products li.product,
.ds-skin ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 16px !important;
	background: var(--ds-surface) !important;
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	overflow: hidden;
	position: relative;
	transition: transform .32s var(--ds-ease), border-color .32s var(--ds-ease), box-shadow .32s var(--ds-ease);
}

.ds-skin .woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	border-color: rgba(225, 29, 42, .45);
	box-shadow: var(--ds-shadow);
}

.ds-skin .woocommerce ul.products li.product img,
.ds-skin .woocommerce ul.products li.product .product-thumb img {
	border-radius: var(--ds-radius-sm);
	background: radial-gradient(120% 100% at 50% 0%, #24242C 0%, #16161B 70%);
	transition: transform .5s var(--ds-ease);
}
.ds-skin .woocommerce ul.products li.product:hover img { transform: scale(1.04); }

.ds-skin .woocommerce ul.products li.product .woocommerce-loop-product__title,
.ds-skin .woocommerce ul.products li.product h2,
.ds-skin .woocommerce ul.products li.product h3 {
	font-size: 1.08rem !important;
	margin: 14px 0 6px !important;
	padding: 0 !important;
	color: var(--ds-text) !important;
}

.ds-skin .woocommerce ul.products li.product .price,
.ds-skin .woocommerce div.product p.price,
.ds-skin .woocommerce div.product span.price {
	color: #fff !important;
	font-family: var(--ds-display) !important;
	font-weight: 800 !important;
	font-size: 1.35rem !important;
}
.ds-skin .woocommerce ul.products li.product .price del,
.ds-skin .woocommerce div.product p.price del {
	color: var(--ds-dim) !important;
	font-size: .85rem !important;
	font-weight: 500 !important;
	opacity: 1;
}
.ds-skin .woocommerce ul.products li.product .price ins,
.ds-skin .woocommerce div.product p.price ins {
	background: none !important;
	color: var(--ds-red-2) !important;
	text-decoration: none !important;
}

/* Badge promo */
.ds-skin .woocommerce span.onsale,
.ds-skin .onsale,
.ds-skin .product-label .onsale {
	background: linear-gradient(135deg, var(--ds-red), var(--ds-red-dark)) !important;
	color: #fff !important;
	font-family: var(--ds-font) !important;
	font-weight: 700 !important;
	font-size: .78rem !important;
	border-radius: var(--ds-radius-pill) !important;
	padding: 6px 13px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1.3 !important;
	top: 14px !important;
	left: 14px !important;
	right: auto !important;
	margin: 0 !important;
	box-shadow: var(--ds-shadow-red);
}

/* Étoiles */
.ds-skin .star-rating span::before,
.ds-skin .star-rating::before,
.ds-skin .stars a { color: #FFB300 !important; }

/* Catégories / méta */
.ds-skin .product-categories,
.ds-skin .posted_in,
.ds-skin .product_meta,
.ds-skin .woocommerce-result-count,
.ds-skin .rating-count { color: var(--ds-dim) !important; font-size: .82rem !important; }

/* Tri + pagination */
.ds-skin .woocommerce .woocommerce-ordering select,
.ds-skin select,
.ds-skin .orderby {
	background: var(--ds-surface-2) !important;
	color: var(--ds-text) !important;
	border: 1px solid var(--ds-line) !important;
	border-radius: var(--ds-radius-sm) !important;
	padding: 10px 14px !important;
}
.ds-skin .woocommerce nav.woocommerce-pagination ul { border: 0 !important; gap: 8px; display: flex; }
.ds-skin .woocommerce nav.woocommerce-pagination ul li { border: 0 !important; }
.ds-skin .woocommerce nav.woocommerce-pagination ul li a,
.ds-skin .woocommerce nav.woocommerce-pagination ul li span {
	background: var(--ds-surface) !important;
	border: 1px solid var(--ds-line) !important;
	border-radius: 10px !important;
	color: var(--ds-text) !important;
	padding: 9px 15px !important;
}
.ds-skin .woocommerce nav.woocommerce-pagination ul li span.current,
.ds-skin .woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--ds-red) !important;
	border-color: var(--ds-red) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   7. WOOCOMMERCE — FICHE PRODUIT
   -------------------------------------------------------------------------- */
.ds-skin .woocommerce div.product .woocommerce-product-gallery,
.ds-skin .woocommerce div.product div.images {
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	padding: 18px;
}
.ds-skin .woocommerce div.product div.images img { border-radius: var(--ds-radius-sm); }

.ds-skin .woocommerce div.product .product_title {
	font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
	margin-bottom: 10px !important;
}

.ds-skin .woocommerce div.product .woocommerce-product-details__short-description,
.ds-skin .woocommerce div.product .summary p { color: var(--ds-muted) !important; }
.ds-skin .woocommerce div.product .summary strong,
.ds-skin .woocommerce div.product .summary b { color: var(--ds-text) !important; }

.ds-skin .woocommerce div.product form.cart {
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	padding: 20px;
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}
.ds-skin .woocommerce div.product form.cart .quantity input.qty {
	background: var(--ds-surface-2) !important;
	color: var(--ds-text) !important;
	border: 1px solid var(--ds-line) !important;
	border-radius: var(--ds-radius-sm) !important;
	height: 48px;
	width: 84px;
	text-align: center;
}

.ds-skin .woocommerce div.product .stock,
.ds-skin .stock.in-stock { color: var(--ds-green) !important; font-weight: 600; }
.ds-skin .stock.out-of-stock { color: var(--ds-red-2) !important; }

/* Onglets */
.ds-skin .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 22px !important; border-bottom: 1px solid var(--ds-line) !important; display: flex; flex-wrap: wrap; gap: 6px; }
.ds-skin .woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none !important; }
.ds-skin .woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 10px 10px 0 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ds-skin .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.ds-skin .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.ds-skin .woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--ds-muted) !important;
	font-weight: 600 !important;
	padding: 14px 20px !important;
	display: block;
	border-bottom: 2px solid transparent;
}
.ds-skin .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.ds-skin .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: #fff !important;
	border-bottom-color: var(--ds-red) !important;
}
.ds-skin .woocommerce-Tabs-panel { color: var(--ds-muted) !important; }
.ds-skin .woocommerce-Tabs-panel h2,
.ds-skin .woocommerce-Tabs-panel h3 { color: var(--ds-text) !important; }

/* Produits similaires / titres de section Woo */
.ds-skin .related > h2,
.ds-skin .upsells > h2,
.ds-skin .cross-sells > h2,
.ds-skin section.related h2 { margin-bottom: 24px !important; }

/* --------------------------------------------------------------------------
   8. WOOCOMMERCE — PANIER, COMMANDE, COMPTE
   -------------------------------------------------------------------------- */
.ds-skin .woocommerce table.shop_table,
.ds-skin table.cart,
.ds-skin .woocommerce-checkout-review-order-table,
.ds-skin .woocommerce table.my_account_orders {
	background: var(--ds-surface) !important;
	border: 1px solid var(--ds-line) !important;
	border-radius: var(--ds-radius) !important;
	border-collapse: separate !important;
	overflow: hidden;
	color: var(--ds-text) !important;
}
.ds-skin .woocommerce table.shop_table th {
	background: var(--ds-surface-2) !important;
	color: var(--ds-text) !important;
	font-family: var(--ds-display) !important;
	border-bottom: 1px solid var(--ds-line) !important;
}
.ds-skin .woocommerce table.shop_table td {
	border-top: 1px solid var(--ds-line) !important;
	color: var(--ds-muted) !important;
}
.ds-skin .woocommerce table.shop_table td a,
.ds-skin .woocommerce table.shop_table .amount { color: var(--ds-text) !important; }

.ds-skin .cart_totals,
.ds-skin .woocommerce-checkout #order_review,
.ds-skin .woocommerce .cart-collaterals .cart_totals {
	background: var(--ds-surface) !important;
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	padding: 22px;
}

.ds-skin .woocommerce-info,
.ds-skin .woocommerce-message,
.ds-skin .woocommerce-error,
.ds-skin .woocommerce-notice {
	background: var(--ds-surface-2) !important;
	color: var(--ds-text) !important;
	border-top: 0 !important;
	border-left: 3px solid var(--ds-red) !important;
	border-radius: var(--ds-radius-sm) !important;
}
.ds-skin .woocommerce-message { border-left-color: var(--ds-green) !important; }
.ds-skin .woocommerce-info::before,
.ds-skin .woocommerce-message::before,
.ds-skin .woocommerce-error::before { color: var(--ds-red-2) !important; }

/* Champs de formulaire (checkout, contact, recherche, commentaires) */
.ds-skin input[type="text"],
.ds-skin input[type="email"],
.ds-skin input[type="tel"],
.ds-skin input[type="url"],
.ds-skin input[type="number"],
.ds-skin input[type="password"],
.ds-skin input[type="search"],
.ds-skin input[type="date"],
.ds-skin textarea,
.ds-skin .select2-container--default .select2-selection--single,
.ds-skin .woocommerce form .form-row input.input-text,
.ds-skin .woocommerce form .form-row textarea {
	background: var(--ds-surface-2) !important;
	color: var(--ds-text) !important;
	border: 1px solid var(--ds-line) !important;
	border-radius: var(--ds-radius-sm) !important;
	padding: 13px 16px !important;
	box-shadow: none !important;
	transition: border-color .2s var(--ds-ease), box-shadow .2s var(--ds-ease);
}
.ds-skin input:focus,
.ds-skin textarea:focus,
.ds-skin select:focus {
	border-color: var(--ds-red) !important;
	box-shadow: 0 0 0 3px var(--ds-red-soft) !important;
}
.ds-skin ::placeholder { color: var(--ds-dim) !important; opacity: 1; }
.ds-skin .woocommerce form .form-row label,
.ds-skin label { color: var(--ds-muted) !important; font-weight: 500; }

.ds-skin .select2-dropdown,
.ds-skin .select2-container--default .select2-results__option {
	background: var(--ds-surface) !important;
	color: var(--ds-text) !important;
	border-color: var(--ds-line) !important;
}
.ds-skin .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--ds-red) !important;
}

/* Espace compte client */
.ds-skin .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	overflow: hidden;
}
.ds-skin .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 18px;
	color: var(--ds-muted) !important;
	border-bottom: 1px solid var(--ds-line);
}
.ds-skin .woocommerce-MyAccount-navigation li.is-active a,
.ds-skin .woocommerce-MyAccount-navigation li a:hover {
	background: var(--ds-red-soft) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   9. WIDGETS, ARTICLES, PIED DE PAGE
   -------------------------------------------------------------------------- */
.ds-skin .widget,
.ds-skin .sidebar .widget,
.ds-skin .card,
.ds-skin .post,
.ds-skin article.post {
	background: var(--ds-surface) !important;
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	color: var(--ds-text);
}
.ds-skin .widget-title,
.ds-skin .widgettitle { color: var(--ds-text) !important; font-family: var(--ds-display) !important; }

.ds-skin .tbay-footer,
.ds-skin #tbay-footer,
.ds-skin .site-footer,
.ds-skin footer,
.ds-skin .footer-wrapper,
.ds-skin .footer-copyright,
.ds-skin .copyright {
	background: linear-gradient(180deg, var(--ds-bg), #07070A) !important;
	color: var(--ds-muted) !important;
	border-top: 1px solid var(--ds-line);
}
.ds-skin footer a,
.ds-skin .tbay-footer a { color: var(--ds-muted) !important; }
.ds-skin footer a:hover,
.ds-skin .tbay-footer a:hover { color: var(--ds-red-2) !important; }
.ds-skin footer h1, .ds-skin footer h2, .ds-skin footer h3,
.ds-skin footer h4, .ds-skin footer h5, .ds-skin footer h6 {
	color: var(--ds-text) !important;
	font-size: .82rem !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
}
.ds-skin footer .widget { background: transparent !important; border: 0 !important; }
.ds-skin footer img[src*="Logo-DS-Solutions"] {
	background: #fff;
	padding: 8px 12px;
	border-radius: 12px;
	max-width: 190px;
}

/* Réseaux sociaux */
.ds-skin .social-link a,
.ds-skin .tbay-socials a,
.ds-skin .social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ds-surface-2) !important;
	border: 1px solid var(--ds-line);
	color: var(--ds-text) !important;
	transition: all .25s var(--ds-ease);
}
.ds-skin .social-link a:hover,
.ds-skin .tbay-socials a:hover {
	background: var(--ds-red) !important;
	border-color: var(--ds-red) !important;
	color: #fff !important;
	transform: translateY(-2px);
}

/* Bouton retour en haut */
.ds-skin #back-to-top,
.ds-skin .back-to-top,
.ds-skin .tbay-backtotop {
	background: var(--ds-red) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: var(--ds-shadow-red) !important;
}

/* --------------------------------------------------------------------------
   10. CLASSES UTILITAIRES POUR ELEMENTOR
   (à saisir dans Avancé > Classes CSS d'un widget ou d'une section)
   -------------------------------------------------------------------------- */
.ds-skin .ds-eyebrow,
.ds-skin .ds-eyebrow .elementor-heading-title {
	display: inline-block;
	font-family: var(--ds-font) !important;
	font-size: .74rem !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--ds-red-2) !important;
	background: var(--ds-red-soft);
	border: 1px solid rgba(225, 29, 42, .28);
	border-radius: var(--ds-radius-pill);
	padding: 7px 15px !important;
}

.ds-skin .ds-card {
	background: var(--ds-surface) !important;
	border: 1px solid var(--ds-line) !important;
	border-radius: var(--ds-radius) !important;
	padding: 28px !important;
	box-shadow: var(--ds-shadow);
}

.ds-skin .ds-glass {
	background: rgba(255, 255, 255, .04) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--ds-line-2) !important;
	border-radius: var(--ds-radius) !important;
}

.ds-skin .ds-grad .elementor-heading-title,
.ds-skin .ds-grad {
	background: linear-gradient(100deg, #FFFFFF 20%, var(--ds-red-2) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ds-skin .ds-glow {
	position: relative;
}
.ds-skin .ds-glow::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 340px;
	background: radial-gradient(50% 50% at 50% 50%, var(--ds-red-glow) 0%, transparent 70%);
	filter: blur(50px);
	pointer-events: none;
	z-index: 0;
}
.ds-skin .ds-glow > * { position: relative; z-index: 1; }

/* Apparition au défilement (ajouter la classe ds-reveal) */
.ds-skin .ds-reveal { opacity: 0; transform: translateY(22px); }
.ds-skin .ds-reveal.ds-in {
	opacity: 1;
	transform: none;
	transition: opacity .7s var(--ds-ease), transform .7s var(--ds-ease);
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.ds-skin .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
}

@media (max-width: 767px) {
	.ds-skin { font-size: 15.5px; }
	.ds-skin .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.ds-skin .woocommerce ul.products li.product { padding: 12px !important; }
	.ds-skin .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .95rem !important; }
	.ds-skin .elementor-button,
	.ds-skin .button { padding: 12px 20px !important; font-size: .9rem !important; }
	.ds-skin .logo img,
	.ds-skin .site-logo img { max-height: 46px; padding: 5px 9px; }
	.ds-skin .woocommerce div.product form.cart { padding: 16px; }
}

@media (max-width: 420px) {
	.ds-skin .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   12. ACCESSIBILITÉ
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ds-skin *,
	.ds-skin *::before,
	.ds-skin *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.ds-skin .ds-reveal { opacity: 1; transform: none; }
}

/* L'administration et l'éditeur Elementor ne doivent pas être impactés */
.elementor-editor-active .ds-reveal { opacity: 1 !important; transform: none !important; }

/* --------------------------------------------------------------------------
   13. CORRECTIF EN-TÊTE — thème Ecomall (v1.0.1)
   Les zones d'en-tête du thème restaient blanches : on cible ici toute
   structure dont l'identifiant ou la classe contient "header".
   -------------------------------------------------------------------------- */
.ds-skin header,
.ds-skin [id*="header"],
.ds-skin [class*="header"]:not([class*="heading"]) {
	background-color: var(--ds-bg) !important;
	border-color: var(--ds-line) !important;
	box-shadow: none !important;
}

/* Les conteneurs internes redeviennent transparents pour éviter les bandes */
.ds-skin [class*="header"] .container,
.ds-skin [class*="header"] .container-fluid,
.ds-skin [class*="header"] .row,
.ds-skin [class*="header"] > div,
.ds-skin [id*="header"] .container,
.ds-skin [id*="header"] .row {
	background-color: transparent !important;
}

/* Textes, liens et icônes de l'en-tête */
.ds-skin [class*="header"] a,
.ds-skin [id*="header"] a,
.ds-skin [class*="header"] span,
.ds-skin [class*="header"] i,
.ds-skin [class*="header"] .amount,
.ds-skin [class*="header"] .cart-total,
.ds-skin [class*="header"] .woocommerce-Price-amount {
	color: var(--ds-text) !important;
}
.ds-skin [class*="header"] a:hover { color: var(--ds-red-2) !important; }

/* La barre supérieure garde son dégradé rouge */
.ds-skin .tbay-topbar,
.ds-skin .topbar,
.ds-skin .header-top,
.ds-skin [class*="header-top"] {
	background: linear-gradient(90deg, var(--ds-red-dark), var(--ds-red)) !important;
}
.ds-skin .tbay-topbar a,
.ds-skin .topbar a,
.ds-skin [class*="header-top"] a { color: #fff !important; }

/* En-tête fixé au défilement : fond translucide */
.ds-skin.ds-scrolled header,
.ds-skin.ds-scrolled [id*="header"],
.ds-skin.ds-scrolled [class*="header"]:not([class*="heading"]) {
	background-color: rgba(11, 11, 13, .94) !important;
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
}

/* Le compteur du panier reste rouge */
.ds-skin [class*="header"] .count,
.ds-skin [class*="header"] .cart-count,
.ds-skin [class*="header"] .mini-cart-counter {
	background: var(--ds-red) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   14. CORRECTIF ZONE DE CONTENU (v1.0.2)
   Bande blanche entre l'en-tête et le contenu : conteneurs de page et
   conteneurs Elementor forcés sur le fond sombre.
   -------------------------------------------------------------------------- */
.ds-skin #main-content,
.ds-skin #content,
.ds-skin .site-content,
.ds-skin .page-content,
.ds-skin .entry-content,
.ds-skin .content-page,
.ds-skin .tbay-content,
.ds-skin .elementor,
.ds-skin .elementor-section:not(.ds-keep-bg),
.ds-skin .e-con:not(.ds-keep-bg),
.ds-skin .e-con-inner {
	background-color: var(--ds-bg) !important;
}

/* Le bloc HTML de la page d'accueil ne doit pas hériter de marges */
.ds-skin .elementor-widget-html,
.ds-skin .elementor-widget-html .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}