/*
Theme Name: Carthago Electric
Theme URI: https://carthagoelectric.com
Description: Thème enfant Storefront aux couleurs de Carthago Electric — boutique de matériel électrique. Réalisé par Quality One Dev.
Author: Quality One Dev
Author URI: https://qualityone.dev
Template: storefront
Version: 1.6.1
Text Domain: carthago-electric
*/

/* ============================================================
   Brand tokens
   ============================================================ */
:root {
	--ce-navy: #16255C;
	--ce-navy-dark: #0E1736;
	--ce-navy-700: #1E2F6E;
	--ce-blue: #1763D6;
	--ce-blue-dark: #114FAE;
	--ce-blue-200: #9DBEF2;
	--ce-white: #FFFFFF;
	--ce-bg: #F4F6FB;
	--ce-ink: #141A2C;
	--ce-muted: #64708A;
	--ce-line: #E6E9F2;
	--ce-radius: 12px;
	--ce-radius-lg: 18px;
	--ce-shadow: 0 10px 30px rgba(16, 27, 69, 0.08);
	--ce-shadow-sm: 0 4px 14px rgba(16, 27, 69, 0.07);
	--ce-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ce-font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
body {
	color: var(--ce-ink);
	background: var(--ce-bg);
	font-family: var(--ce-font-text);
	font-size: 16px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.ce-brand__name,
.main-navigation ul li a,
button, .button, input[type="submit"],
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.ce-section__title {
	font-family: var(--ce-font-display) !important;
}

a { color: var(--ce-navy); text-decoration: none; }
a:hover { color: var(--ce-blue-dark); }

.woocommerce-breadcrumb { color: var(--ce-muted); font-size: .9em; }

/* ============================================================
   Top utility bar
   ============================================================ */
.ce-topbar {
	background: var(--ce-navy-dark);
	color: #D7DEF2;
	/* NB: keep this at 1rem — `.col-full`'s max-width + padding are em-based, so a
	   smaller font here would shrink the whole bar out of line with the header.
	   The small type is applied to the inner groups instead. */
}
.ce-topbar__social,
.ce-topbar__group { font-size: .66rem; }
/* Three zones: email (left) · address (centre) · phone + socials (right). */
.ce-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding-top: .5em;
	padding-bottom: .5em;
	flex-wrap: wrap;
}
.ce-topbar__group { display: inline-flex; align-items: center; gap: 1.2em; }
.ce-topbar__center { flex: 1 1 auto; justify-content: center; }
.ce-topbar__group > a {
	color: #EAEFFB;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
}
.ce-topbar__group > a:hover { color: #fff; }
.ce-topbar__group > a svg,
.ce-topbar__addr svg { color: var(--ce-blue-200); flex: 0 0 auto; }
.ce-topbar__addr { display: inline-flex; align-items: center; gap: 7px; color: #CBD6EF; font-weight: 500; }
/* Social icons sit at the right end of the top bar. */
.ce-topbar__social { display: inline-flex; align-items: center; gap: .45em; }
.ce-topbar__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #EAEFFB;
	background: rgba(255,255,255,.08);
	transition: background-color .15s ease, color .15s ease;
}
.ce-topbar__social a:hover { background: var(--ce-blue); color: #fff; }
/* Drop the centre address first, then the phone label, as space tightens. */
@media (max-width: 980px) {
	.ce-topbar__center { display: none; }
}
@media (max-width: 640px) {
	.ce-topbar__inner { justify-content: center; }
	.ce-topbar__group { font-size: .95em; }
	.ce-topbar__right a[href^="tel:"] { display: none; }
}

/* ============================================================
   Header / branding
   ============================================================ */
.site-header {
	position: relative;
	background: var(--ce-white);
	border-bottom: 3px solid var(--ce-blue);
	font-size: 0.8em; /* -20% for the header (menu items restored to rem below) */
	padding-top: .55em;
	padding-bottom: .55em;
	box-shadow: 0 2px 10px rgba(16,27,69,.05);
}
body .site-header,
body .site-header .site-branding { background-color: var(--ce-white) !important; }

/* The homepage uses front-page.php (not Storefront's homepage template), so
   Storefront's `.home.page:not(.page-template-template-homepage) .site-header`
   rule adds a large 4.2em bottom margin — a big empty gap under the nav bar.
   Drop it; the hero row's own top margin provides the breathing room. */
.home.page:not(.page-template-template-homepage) .site-header { margin-bottom: 0; }

.ce-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.ce-brand__mark { flex: 0 0 auto; filter: drop-shadow(0 3px 6px rgba(16,27,69,.18)); }
.ce-brand__text { line-height: 1.05; }
.ce-brand__name {
	display: block;
	font-weight: 800;
	font-size: 1.6em;
	color: var(--ce-navy);
	letter-spacing: -0.02em;
}
.ce-brand__name em { font-style: normal; color: var(--ce-blue-dark); }
.ce-brand__tagline {
	display: block;
	font-size: 0.7em;
	font-style: italic;
	color: var(--ce-muted);
	margin-top: 3px;
	font-family: var(--ce-font-text);
}
body .site-header .ce-brand__name { color: var(--ce-navy) !important; }
body .site-header .ce-brand__name em { color: var(--ce-blue-dark) !important; }
body .site-header .ce-brand__tagline { color: var(--ce-muted) !important; }

/* Search pill in header */
.site-search .widget_product_search form,
.widget_product_search .woocommerce-product-search { position: relative; }
.site-search .widget_product_search input[type="search"],
.widget_product_search input.search-field {
	border-radius: 999px;
	border: 1.5px solid var(--ce-line);
	background: var(--ce-bg);
	padding: .7em 1.1em;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.site-search .widget_product_search input[type="search"]:focus,
.widget_product_search input.search-field:focus {
	border-color: var(--ce-blue);
	box-shadow: 0 0 0 3px rgba(23,99,214,.18);
	outline: none;
}

/* Sticky header (desktop) */
@media (min-width: 768px) {
	#masthead.site-header { position: sticky; top: 0; z-index: 200; transition: box-shadow .2s ease; }
	#masthead.site-header.is-stuck { box-shadow: 0 8px 24px rgba(16,27,69,.14); }
}

/* Prominent, centered product search in the header */
.site-header > .col-full { position: relative; }
/* The header font-size is reduced (-20%), but .col-full's max-width is em-based, so
   pin both header containers to the standard content width so the header aligns with
   the page content below (and everything stays centred). */
.site-header > .col-full,
.storefront-primary-navigation > .col-full { max-width: 1064px; }
@media (min-width: 768px) {
	/* No flex `gap` here: the two hidden skip-links each consume a gap slot and
	   pushed the logo ~2×gap off the left edge. Space items with margins instead
	   so the logo sits flush at the container's content edge (aligned with the
	   "Toutes les catégories" button and the top bar below). */
	.site-header > .col-full {
		display: flex;
		align-items: center;
	}
	.site-header > .col-full > .site-branding {
		order: 1;
		margin: 0 !important;
		float: none !important;
		width: auto !important;
		flex: 0 0 auto;
	}
	.site-header > .col-full > .site-search {
		order: 2;
		/* basis 0 so Storefront's fixed width is ignored and it grows */
		flex: 1 1 auto !important; min-width: 0;
		width: auto !important;
		max-width: none;
		margin: 0 1.6em 0 2.6em !important;
		float: none !important;
		display: flex;
		justify-content: center;
	}
	.site-header > .col-full > .site-search .widget_product_search { width: 100%; max-width: 100%; }
		.site-header > .col-full { flex-wrap: wrap; }
		.site-header > .col-full > .storefront-primary-navigation { order: 4; flex: 0 0 100%; }
		/* The cart renders as a direct child of .site-header (between the search row
		   and the nav). Pin it to the top-right, aligned with the search row. */
		.site-header > .site-header-cart {
			position: absolute;
			top: 14px;
			right: 2.617924em;
			margin: 0 !important;
			z-index: 3;
		}
	/* Panier at the top-right of the white row. */
	.site-header > .col-full > .site-header-cart {
		order: 3;
		flex: 0 0 auto;
		width: auto !important;
		float: none !important;
		margin: 0 0 0 1.6em !important;
	}
}
.site-search { margin-bottom: 0; }
.site-search .widget_product_search,
.site-search .woocommerce-product-search { margin: 0; }
.site-search .woocommerce-product-search {
	display: flex;
	align-items: stretch;
	position: relative;
	background: #fff;
	border: 2px solid var(--ce-navy);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--ce-shadow-sm);
	max-width: none;
	width: 100%;
}
.site-search .woocommerce-product-search::before { content: none !important; }
.site-search:focus-within .woocommerce-product-search {
	border-color: var(--ce-navy);
	box-shadow: 0 0 0 3px rgba(22,37,92,.15);
}
.site-search .woocommerce-product-search .search-field {
	order: 1;
	flex: 1 1 auto;
	border: 0 !important;
	background: transparent !important;
	background-image: none !important;
	padding: .72em 1.2em !important;
	box-shadow: none !important;
	text-indent: 0 !important;
	min-width: 0;
}
.site-search .woocommerce-product-search .search-field:focus { outline: none; box-shadow: none !important; }
.site-search .woocommerce-product-search button,
.site-search .woocommerce-product-search button[type="submit"] {
	order: 2;
	position: static !important;
	float: none !important;
	flex: 0 0 auto !important;   /* don't shrink below the label (was clipping "Recherche") */
	white-space: nowrap;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--ce-navy) !important;
	color: #fff !important;
	font-family: var(--ce-font-display) !important;
	font-weight: 700 !important;
	font-size: .92em !important;
	padding: 0 1.6em !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	text-indent: 0 !important;
	overflow: visible !important;
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	clip: auto !important;
	clip-path: none !important;
	align-items: center;
	gap: 8px;
	transform: none !important;
}
.site-search .woocommerce-product-search button[type="submit"]::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.site-search .woocommerce-product-search button[type="submit"]:hover { background: var(--ce-navy-700) !important; }

/* ============================================================
   Header actions — Compte + Panier (icon over label)
   ============================================================ */
.site-header-cart { position: relative; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.site-header-cart li { list-style: none; margin: 0; padding: 0; }
.site-header-cart > li:first-child { display: flex; }

.ce-headaction {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--ce-navy);
	text-decoration: none;
	line-height: 1;
	min-width: 54px;
	transition: color .15s ease;
}
.ce-headaction:hover { color: var(--ce-blue-dark); }
/* Storefront hides .cart-contents on mobile (it expects its handheld footer bar
   to carry the cart — which we removed). Force it visible at all widths; the
   higher-specificity selector beats Storefront's `.site-header-cart .cart-contents`. */
.site-header-cart .cart-contents.ce-headaction { display: inline-flex !important; }
.site-header-cart .cart-contents { width: auto; height: auto; background: none; border-radius: 0; }
/* Storefront adds a cart glyph of its own; keep only our SVG and label inline. */
.site-header-cart .cart-contents::before,
.site-header-cart .cart-contents::after { content: none !important; display: none !important; }
.site-header-cart .cart-contents.ce-cart { flex-direction: row; gap: .45em; min-width: 0; }
.ce-headaction__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ce-headaction__icon svg { display: block; }
.ce-headaction__label {
	font-family: var(--ce-font-display);
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ce-muted);
	transition: color .15s ease;
}
.ce-headaction:hover .ce-headaction__label { color: var(--ce-navy); }

/* Cart count badge on the basket icon */
.ce-headaction .ce-cart__count {
	position: absolute;
	top: -9px;
	right: -11px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--ce-blue);
	color: #fff;
	font-family: var(--ce-font-display);
	font-weight: 800;
	font-size: .7rem;
	line-height: 19px;
	text-align: center;
	border: 2px solid var(--ce-white);
}
.ce-headaction .ce-cart__count[hidden] { display: none; }

/* Minimal cart: the basket icon links straight to the cart page. Storefront's
   hover mini-cart dropdown is suppressed — it assumes a wide header column and
   (loading after this sheet) overlapped itself in the compact-icon context.
   The <li> stays in the DOM so WooCommerce AJAX fragments keep working. */
.site-header-cart .widget_shopping_cart { display: none !important; }

/* Primary navigation (light-grey bar below the white header, like the reference) */
.storefront-primary-navigation { background: transparent; position: relative; border-top: 1px solid var(--ce-line); }
/* Compact nav row: shorter menu items; the stretched "Toutes les catégories"
   button and the cart follow the reduced row height. */
@media (min-width: 768px) {
	/* Centre the row (no stretch) and give the categories button its own compact
	   height, so the row height is driven by the small items, not the button. */
	.storefront-primary-navigation > .col-full { padding-top: .55em; padding-bottom: 0; align-items: center; }
	.storefront-primary-navigation .main-navigation ul.menu > li > a { padding-top: .45em; padding-bottom: .45em; font-size: 0.6rem; }
	/* "Toutes les catégories" shows as a plain hamburger (☰) on desktop. */
	.ce-allcats__btn span, .ce-allcats__chev { display: none; }
	.ce-allcats__btn svg { width: 26px; height: 26px; }
	.site-header-cart .ce-headaction { gap: 1px; }
	.site-header-cart .ce-headaction__icon svg { width: 21px; height: 21px; }
	.site-header-cart .ce-headaction__label { font-size: .62rem; }
}

/* Desktop (≥768px): horizontal nav row — [Toutes les catégories] | menu | cart.
   Scoped so Storefront's native handheld (hamburger) menu is left intact below. */
@media (min-width: 768px) {
	.storefront-primary-navigation > .col-full {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}
	/* margin-left spaces the "Accueil" menu away from the blue categories button. */
	.storefront-primary-navigation .main-navigation { order: 2; flex: 1 1 auto; float: none; margin-left: 1.6em; }
	.storefront-primary-navigation .main-navigation > div.primary-navigation > ul,
	.storefront-primary-navigation .main-navigation ul.menu,
	.storefront-primary-navigation .main-navigation ul.nav-menu { display: flex; align-items: center; }
	/* The wp_page_menu handheld fallback (all pages) never belongs on desktop. */
	.storefront-primary-navigation .main-navigation > div.menu,
	.storefront-primary-navigation .menu-toggle { display: none; }
	.storefront-primary-navigation .site-header-cart { order: 3; margin-left: auto; float: none; display: flex; align-items: center; }
}

/* Mobile (<768px): stacked, clean header + a real collapsible hamburger menu.
   The desktop flex layout above is scoped to ≥768px, so here we rebuild a
   dependable handheld menu on top of Storefront's navigation.min.js (which
   toggles `.toggled` on #site-navigation when the button is tapped). */
@media (max-width: 767px) {
	/* Header: logo (left) + cart (right) on one row, search full-width below.
	   Uses wrap + flex order so it works regardless of DOM order, and prevents
	   Storefront's default float from collapsing the header. */
	.site-header > .col-full {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: .7em .9em;
	}
	.site-header .site-branding { order: 1; float: none; margin: 0; flex: 1 1 auto; }
	.site-header > .col-full > .site-header-cart { order: 3; float: none; margin: 0; flex: 0 0 auto; align-self: center; position: relative; }
	.site-header .site-search { order: 4; display: block; width: 100%; flex: 1 1 100%; margin: 0 0 .8em; }
	.site-header .site-search .woocommerce-product-search { max-width: 100%; }
	/* Keep the cart compact so the logo + cart fit on one row. */
	.ce-headaction { min-width: 0; gap: 2px; }
	.ce-headaction__label { font-size: .62rem; }
	.site-header .ce-brand__name { font-size: 1.35em; }

	/* We now surface the cart in the header, so drop Storefront's duplicate
	   handheld footer bar (it repeated cart + search and crowded the bottom
	   alongside the floating call / WhatsApp buttons). */
	.storefront-handheld-footer-bar { display: none !important; }
	/* Fallback position if the cart has not yet moved into the flex row. */
	.site-header > .site-header-cart { position: absolute; top: 21px; right: 10px; margin: 0 !important; z-index: 3; }
	.site-header > .site-header-cart .ce-headaction__label { font-size: .6rem; }
	/* ...and reclaim the space it reserved at the bottom of the page. */
	body.woocommerce-active { padding-bottom: 0 !important; }

	/* Nav bar: single-column navy drawer (toggle bar + collapsed menu). The
	   desktop white bar would leave the drawer's white menu text invisible, so
	   on mobile the whole primary-navigation goes navy for a cohesive drawer. */
	.storefront-primary-navigation,
	.storefront-primary-navigation > .col-full,
	.storefront-primary-navigation .main-navigation,
	.storefront-primary-navigation .main-navigation .primary-navigation,
	.storefront-primary-navigation .main-navigation .primary-navigation > ul,
	.storefront-primary-navigation .main-navigation .primary-navigation li,
	.storefront-primary-navigation .site-header-cart {
		background-color: var(--ce-navy) !important;
	}
	.storefront-primary-navigation { border-top: 0; }
	.storefront-primary-navigation > .col-full { display: block; padding-top: 0; padding-bottom: 0; }
	.storefront-primary-navigation .main-navigation { float: none; }

	/* Hamburger toggle = full-width navy bar with white icon + label. */
	.storefront-primary-navigation .menu-toggle {
		display: block;
		position: relative;
		float: none;          /* Storefront floats it right… */
		width: 100%;
		max-width: none;      /* …and caps it at 120px — undo both for a full bar. */
		margin: 0;
		padding: 1em 1.2em 1em 3.1em;
		border: 0;
		border-radius: 0;
		background: var(--ce-navy);
		color: #fff;
		font-family: var(--ce-font-display);
		font-weight: 700;
		font-size: 1em;
		text-align: left;
		cursor: pointer;
	}
	.storefront-primary-navigation .menu-toggle:hover,
	.storefront-primary-navigation .menu-toggle:focus { background: var(--ce-navy); color: #fff; }
	.storefront-primary-navigation .menu-toggle span { color: #fff; }
	.storefront-primary-navigation .menu-toggle::before,
	.storefront-primary-navigation .menu-toggle::after,
	.storefront-primary-navigation .menu-toggle span::before { background-color: #fff; }

	/* Collapse the menus; the real menu opens on toggle, drop the page-list fallback. */
	.storefront-primary-navigation .main-navigation div.menu { display: none !important; }
	.storefront-primary-navigation .main-navigation .primary-navigation { display: none; }
	.storefront-primary-navigation .main-navigation.toggled .primary-navigation { display: block; }
	.storefront-primary-navigation .main-navigation .primary-navigation ul { display: block; margin: 0; }
	.storefront-primary-navigation .main-navigation .primary-navigation li { display: block; border-top: 1px solid rgba(255,255,255,.1); }
	.storefront-primary-navigation .main-navigation .primary-navigation li a {
		display: block;
		padding: .9em 1.3em;
		color: #fff;
		font-weight: 600;
	}
	.storefront-primary-navigation .main-navigation .primary-navigation li a:hover,
	.storefront-primary-navigation .main-navigation .primary-navigation li.current-menu-item > a { color: var(--ce-blue); }
	/* Sub-menu (category) links in the mobile drawer: keep them light on navy
	   (the desktop white-dropdown rule would otherwise render them dark). */
	.storefront-primary-navigation .main-navigation .primary-navigation ul.sub-menu a,
	.storefront-primary-navigation .main-navigation .primary-navigation ul.children a { color: #fff; }
	.storefront-primary-navigation .main-navigation .primary-navigation ul.sub-menu a:hover,
	.storefront-primary-navigation .main-navigation .primary-navigation ul.children a:hover { color: var(--ce-blue-200); }

	/* Cart = a clean full-width navy bar under the toggle (same look as it).
	   Base styles render it navy-on-navy at .62rem (invisible); override to a
	   left-aligned white icon + label row. */
	.storefront-primary-navigation .site-header-cart {
		float: none;
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: 1px solid rgba(255, 255, 255, .12);
	}
	.storefront-primary-navigation .site-header-cart > li { display: block; margin: 0; padding: 0; width: 100%; }
	.storefront-primary-navigation .site-header-cart .cart-contents.ce-headaction {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: .7em;
		width: 100%;
		box-sizing: border-box;
		min-width: 0;
		padding: 1em 1.2em;
		color: #fff;
	}
	.storefront-primary-navigation .site-header-cart .ce-headaction__icon svg { width: 23px; height: 23px; }
	.storefront-primary-navigation .site-header-cart .ce-headaction__label {
		font-family: var(--ce-font-display);
		font-weight: 700;
		font-size: 1em;
		text-transform: none;
		letter-spacing: 0;
		color: #fff;
	}
	.storefront-primary-navigation .site-header-cart .ce-headaction:hover,
	.storefront-primary-navigation .site-header-cart .ce-headaction:hover .ce-headaction__label { color: var(--ce-blue-200); }
}

/* "Toutes les catégories" mega-menu */
.ce-allcats { order: 1; position: relative; display: flex; align-items: stretch; flex: 0 0 auto; }
@media (max-width: 767px) { .ce-allcats { display: none; } }
.ce-allcats__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: transparent;
	color: var(--ce-navy);
	border: 0;
	cursor: pointer;
	font-family: var(--ce-font-display);
	font-weight: 700;
	font-size: .96em;
	padding: .4em .55em;
	margin: 0;
	border-radius: 8px;
}
.ce-allcats__btn:hover { background: rgba(22, 37, 92, .07); color: var(--ce-navy); }
.ce-allcats__chev { transition: transform .15s ease; }
.ce-allcats:hover .ce-allcats__chev,
.ce-allcats.is-open .ce-allcats__chev { transform: rotate(180deg); }
.ce-allcats__panel {
	position: absolute;
	top: 100%; left: 0;
	width: 320px;
	background: #fff;
	box-shadow: var(--ce-shadow);
	border-radius: 0 0 12px 12px;
	padding: 8px 0;
	display: none;
	z-index: 300;
}
.ce-allcats:hover .ce-allcats__panel,
.ce-allcats.is-open .ce-allcats__panel { display: block; }
.ce-allcats__list { list-style: none; margin: 0; padding: 0; }
.ce-allcats__item { position: relative; }
.ce-allcats__link {
	display: flex; align-items: center; gap: 11px;
	padding: .62em 1.15em;
	color: var(--ce-ink);
	font-size: .93em;
	font-weight: 500;
}
.ce-allcats__link:hover { background: var(--ce-bg); color: var(--ce-navy); }
.ce-allcats__ic { display: flex; color: var(--ce-navy); }
.ce-allcats__ic svg { width: 20px; height: 20px; }
.ce-allcats__arrow { margin-left: auto; color: var(--ce-muted); }
.ce-allcats__flyout {
	position: absolute;
	top: -8px; left: 100%;
	width: 440px; max-width: 46vw;
	background: #fff;
	box-shadow: var(--ce-shadow);
	border-radius: 0 12px 12px 12px;
	padding: 1.2em 1.4em;
	display: none;
	z-index: 310;
}
.ce-allcats__item:hover .ce-allcats__flyout { display: block; }
.ce-allcats__flyout h4 { margin: 0 0 .7em; font-size: 1.02em; color: var(--ce-navy); }
.ce-allcats__flyout ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.4em; }
.ce-allcats__flyout li a { display: block; padding: .32em 0; color: var(--ce-ink); font-size: .9em; }
.ce-allcats__flyout li a:hover { color: var(--ce-blue-dark); }

/* ============================================================
   Homepage hero row: department menu + banner
   ============================================================ */
.ce-hero-row {
	display: grid;
	grid-template-columns: 274px 1fr;
	gap: 20px;
	margin-top: 1.8em;
	align-items: stretch;
}
@media (max-width: 900px) {
	.ce-hero-row { grid-template-columns: 1fr; }
	.ce-dept { display: none; }
}
.ce-hero-row .ce-hero { margin-top: 0; }

.ce-dept {
	background: #fff;
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius);
	box-shadow: var(--ce-shadow-sm);
	display: flex;
	flex-direction: column;
	position: relative;
}
.ce-dept__head {
	background: var(--ce-navy);
	color: #fff;
	font-family: var(--ce-font-display);
	font-weight: 700;
	padding: .92em 1.1em;
	display: flex; align-items: center; gap: 10px;
	border-radius: var(--ce-radius) var(--ce-radius) 0 0;
	font-size: .98em;
}
.ce-dept__head svg { color: var(--ce-blue-200); }
.ce-dept__list { list-style: none; margin: 0; padding: 6px 0; flex: 1; }
.ce-dept__item { position: relative; }
.ce-dept__link {
	display: flex; align-items: center; gap: 12px;
	padding: .6em 1.1em;
	color: var(--ce-ink);
	font-size: .9em;
}
.ce-dept__link:hover { background: var(--ce-bg); color: var(--ce-navy); }
.ce-dept__ic { display: flex; color: var(--ce-navy); }
.ce-dept__ic svg { width: 20px; height: 20px; }
.ce-dept__name { flex: 1; line-height: 1.2; }
.ce-dept__arrow { color: var(--ce-muted); transition: transform .15s ease; }
.ce-dept__item:hover .ce-dept__arrow { color: var(--ce-navy); }
.ce-dept__flyout {
	position: absolute;
	top: -1px; left: 100%;
	width: 440px; max-width: 58vw;
	background: #fff;
	border: 1px solid var(--ce-line);
	box-shadow: var(--ce-shadow);
	border-radius: 0 12px 12px 12px;
	padding: 1.3em 1.5em;
	display: none;
	z-index: 60;
}
.ce-dept__item:hover .ce-dept__flyout { display: block; }
.ce-dept__flyout h4 { margin: 0 0 .7em; font-size: 1.05em; }
.ce-dept__flyout h4 a { color: var(--ce-navy); }
.ce-dept__flyout ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5em; }
.ce-dept__flyout li a { display: block; padding: .34em 0; color: var(--ce-ink); font-size: .9em; }
.ce-dept__flyout li a:hover { color: var(--ce-blue-dark); }
@media (max-width: 900px) {
	/* Hide the department sidebar on mobile (declared after the base rule so it
	   wins the cascade); the category grid + handheld menu cover navigation. */
	.ce-dept { display: none !important; }
	.ce-dept__flyout { position: static; width: auto; max-width: none; box-shadow: none; border: 0; border-top: 1px dashed var(--ce-line); border-radius: 0; padding: .4em 1.1em 1em 2.6em; }
	.ce-dept__item.is-open .ce-dept__flyout { display: block; }
}

/* Promo spotlight tiles */
.ce-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 1.6em 0 0; }
@media (max-width: 760px) { .ce-promos { grid-template-columns: 1fr; } }
.ce-promo {
	display: flex; align-items: center; gap: 16px;
	padding: 20px;
	border-radius: var(--ce-radius);
	background: linear-gradient(135deg, var(--ce-navy) 0%, var(--ce-navy-dark) 100%);
	color: #fff;
	box-shadow: var(--ce-shadow-sm);
	position: relative; overflow: hidden;
	transition: transform .14s ease, box-shadow .14s ease;
}
.ce-promo::after {
	content: ""; position: absolute; right: -40px; bottom: -40px;
	width: 140px; height: 140px; border-radius: 50%;
	background: radial-gradient(circle, rgba(23,99,214,.16), transparent 70%);
}
.ce-promo:hover { transform: translateY(-3px); box-shadow: var(--ce-shadow); color: #fff; }
.ce-promo__ic {
	width: 58px; height: 58px; flex: 0 0 auto;
	display: grid; place-items: center;
	background: rgba(157,190,242,.16);
	color: var(--ce-blue-200);
	border-radius: 14px;
}
.ce-promo__ic svg { width: 30px; height: 30px; }
.ce-promo__body { position: relative; z-index: 1; }
.ce-promo__body b { font-family: var(--ce-font-display); font-weight: 800; font-size: 1.12em; display: block; }
.ce-promo__body > span { display: block; color: #C8D2EC; font-size: .85em; margin-top: 3px; }
.ce-promo__cta { color: var(--ce-blue-200); font-weight: 700; font-size: .85em; margin-top: .55em; }
.main-navigation ul li a {
	color: var(--ce-ink);
	font-weight: 600;
	font-size: .98em;
	letter-spacing: .01em;
	position: relative;
}
/* Brand accent (blue) on hover + current item. Storefront's customizer injects an
   inline block forcing `.main-navigation ul li:hover > a` and
   `.site-header ul.menu li.current-menu-item > a` to grey (#747474); these
   selectors match/exceed its specificity and this sheet loads afterwards, so
   the blue wins (previously "Accueil" and hovers rendered grey). */
.site-header .main-navigation ul li a:hover,
.site-header .main-navigation ul li:hover > a,
.site-header .main-navigation ul li.current-menu-item > a,
.site-header .main-navigation ul li.current_page_item > a,
.site-header ul.menu li.current-menu-item > a { color: var(--ce-blue); }
.main-navigation ul li.current-menu-item > a::after {
	content: ""; position: absolute; left: 1em; right: 1em; bottom: .4em;
	height: 2px; background: var(--ce-blue); border-radius: 2px;
}
/* Reference design: active top-level item rendered as a filled blue pill. */
.site-header .storefront-primary-navigation .main-navigation ul.menu > li.current-menu-item > a,
.site-header .storefront-primary-navigation .main-navigation ul.menu > li.current_page_item > a {
	background: var(--ce-blue);
	color: #fff !important;
	border-radius: 999px;
	padding: .5em 1.3em;
}
.storefront-primary-navigation .main-navigation ul.menu > li.current-menu-item > a::after,
.storefront-primary-navigation .main-navigation ul.menu > li.current_page_item > a::after { content: none !important; }
/* Dropdown caret inline, right after Produits / Catégories. */
.storefront-primary-navigation .main-navigation ul.menu > li.menu-item-has-children > a { display: inline-flex; align-items: center; }
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
	background-color: #fff;
	border: 1px solid var(--ce-line);
	box-shadow: var(--ce-shadow);
	border-radius: 0 0 10px 10px;
}
.main-navigation ul.menu ul.sub-menu a,
.main-navigation ul.nav-menu ul.children a { color: var(--ce-ink); }

/* ============================================================
   Buttons
   ============================================================ */
button, .button, input[type="submit"], .added_to_cart,
a.button, .woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button {
	background-color: var(--ce-navy);
	color: var(--ce-white);
	border-radius: 10px;
	font-weight: 700;
	letter-spacing: .01em;
	padding: .7em 1.4em;
	transition: background-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
button:hover, .button:hover, input[type="submit"]:hover, .added_to_cart:hover,
a.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--ce-navy-700);
	color: var(--ce-white);
	transform: translateY(-1px);
	box-shadow: var(--ce-shadow-sm);
}
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt,
.button.ce-btn-blue {
	background-color: var(--ce-blue);
	color: #fff;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover, .button.ce-btn-blue:hover {
	background-color: var(--ce-blue-dark);
	color: #fff;
}

/* ============================================================
   Prices / badges / cards (catalogue loop)
   ============================================================ */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ce-navy);
	font-weight: 800;
	font-family: var(--ce-font-display);
}
.woocommerce span.onsale {
	background: var(--ce-blue);
	color: var(--ce-navy);
	font-weight: 800;
	border-radius: 999px;
	min-height: auto;
	min-width: auto;
	padding: .35em .8em;
	line-height: 1;
}
.woocommerce .stock.in-stock { color: #17893A; font-weight: 700; }
.woocommerce .stock.out-of-stock { color: #C0392B; font-weight: 700; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius);
	padding: 14px;
	box-shadow: var(--ce-shadow-sm);
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--ce-shadow);
	border-color: #D7DCEC;
}
.woocommerce ul.products li.product a img {
	border-radius: 8px;
	background: var(--ce-bg);
	margin-bottom: 1em;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: .98em;
	font-weight: 600;
	color: var(--ce-ink);
	padding-bottom: .4em;
	min-height: 2.5em;            /* reserve ~2 lines so prices/buttons align */
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.25;
}
.woocommerce ul.products li.product .price { margin-bottom: .6em; }
/* Pin the add-to-cart button to the bottom of every card */
.woocommerce ul.products li.product .button { margin-top: auto; width: 100%; text-align: center; }

/* Mobile: show products two-per-row (Storefront collapses to one). */
@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin: 0;
	}
	/* Storefront's clearfix pseudo-elements would otherwise occupy grid cells
	   and shunt the first product into the second column. */
	.woocommerce ul.products::before,
	.woocommerce ul.products::after,
	.woocommerce-page ul.products::before,
	.woocommerce-page ul.products::after { content: none !important; display: none !important; }
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
		padding: 10px;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .9em; min-height: 2.4em; }
	.woocommerce ul.products li.product .price { font-size: .95em; }
	.woocommerce ul.products li.product .button { padding: .6em .5em; font-size: .9em; }
}

/* ============================================================
   Homepage sections
   ============================================================ */
.ce-section { margin: 2em 0; }
.ce-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 1em;
	flex-wrap: wrap;
}
.ce-section__titles { display: flex; flex-direction: column; gap: 4px; }
.ce-section__title {
	font-size: 1.8em;
	font-weight: 800;
	color: var(--ce-navy);
	margin: 0;
	position: relative;
	padding-left: 18px;
	letter-spacing: -0.01em;
	line-height: 1.1;
}
.ce-section__title::before {
	content: "";
	position: absolute;
	left: 0; top: 2px; bottom: 2px;
	width: 6px;
	background: var(--ce-blue);
	border-radius: 3px;
}
.ce-section__sub { color: var(--ce-muted); font-size: .95em; margin: 0; padding-left: 18px; }
.ce-section__link {
	font-weight: 700;
	white-space: nowrap;
	font-family: var(--ce-font-display);
	color: var(--ce-navy);
}
.ce-section__link:hover { color: var(--ce-blue-dark); }

/* Hero */
.ce-hero {
	position: relative;
	border-radius: var(--ce-radius-lg);
	overflow: hidden;
	box-shadow: var(--ce-shadow);
	background: var(--ce-navy);
	margin-top: 1.8em;
	display: flex;
	flex-direction: column;
}
.ce-hero img { display: block; width: 100%; height: auto; }
.ce-hero__band {
	flex: 1 1 auto;
	background: linear-gradient(135deg, var(--ce-navy) 0%, var(--ce-navy-dark) 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2em;
	flex-wrap: wrap;
	padding: 1.1em clamp(16px, 3vw, 34px);
}
.ce-hero__pitch strong {
	display: block;
	color: #fff;
	font-family: var(--ce-font-display);
	font-weight: 800;
	font-size: 1.22em;
	line-height: 1.2;
}
.ce-hero__pitch span { color: #C2CCE8; font-size: .9em; }
.ce-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ce-blue);
	color: #fff;
	font-family: var(--ce-font-display);
	font-weight: 800;
	padding: .8em 1.6em;
	border-radius: 10px;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(14,23,54,.25);
	transition: transform .12s ease, background-color .12s ease;
}
.ce-hero__cta::after { content: "→"; }
.ce-hero__cta:hover { background: var(--ce-blue-dark); color: #fff; transform: translateY(-2px); }

/* ============================================================
   Hero (reference design): text + USPs + CTA | image
   ============================================================ */
.ce-hero2 {
	margin-top: .6em;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius-lg);
	background: linear-gradient(180deg, #EAF1FB 0%, #F7FAFF 55%, var(--ce-bg) 100%);
	box-shadow: var(--ce-shadow-sm);
}
.ce-hero2::before {
	content: ""; position: absolute; left: -90px; top: -70px;
	width: 320px; height: 320px; border-radius: 50%;
	background: radial-gradient(circle, rgba(23,99,214,.10), transparent 70%);
	pointer-events: none;
}
.ce-hero2::after {
	content: ""; position: absolute; left: 44%; bottom: -120px;
	width: 380px; height: 240px; border-radius: 50%;
	background: radial-gradient(circle, rgba(23,99,214,.08), transparent 70%);
	pointer-events: none;
}
.ce-hero2__panel {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: 1em;
}
.ce-hero2__text { padding: clamp(18px, 2.6vw, 38px); }
.ce-hero2__title {
	font-family: var(--ce-font-display);
	font-weight: 800;
	font-size: clamp(1.7rem, 2.7vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ce-navy);
	margin: 0 0 .75em;
}
.ce-hero2__usps { display: flex; gap: 1.3em; flex-wrap: wrap; margin-bottom: 1.1em; }
.ce-hero2__usp {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 9px; min-width: 92px;
	font-family: var(--ce-font-display); font-weight: 700; font-size: .86rem;
	color: var(--ce-navy); line-height: 1.2;
}
.ce-hero2__ic {
	width: 46px; height: 46px; display: grid; place-items: center;
	border-radius: 13px; background: #fff; color: var(--ce-blue);
	box-shadow: var(--ce-shadow-sm);
}
.ce-hero2__ic svg { width: 26px; height: 26px; }
.ce-hero2__cta {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--ce-blue); color: #fff;
	font-family: var(--ce-font-display); font-weight: 700; font-size: 1.02rem;
	padding: .92em 1.9em; border-radius: 10px; text-decoration: none;
	box-shadow: 0 10px 24px rgba(23,99,214,.28);
	transition: background-color .15s ease, transform .12s ease;
}
.ce-hero2__cta:hover { background: var(--ce-blue-dark); color: #fff; transform: translateY(-2px); }
.ce-hero2__media { align-self: stretch; min-height: 250px; }
.ce-hero2__media img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; display: block; }
.ce-hero2__dots {
	position: relative; z-index: 1;
	display: flex; justify-content: center; gap: 8px; padding: 2px 0 12px;
}
.ce-hero2__dots span { width: 9px; height: 9px; border-radius: 50%; background: #C3D0E8; transition: width .2s ease; }
.ce-hero2__dots span.is-active { background: var(--ce-blue); width: 26px; border-radius: 999px; }

/* ============================================================
   Hero v3 — full-bleed image + dark overlay, text on the left
   ============================================================ */
.ce-hero3 {
	position: relative;
	margin-top: .6em;
	display: flex;
	align-items: center;
	min-height: clamp(300px, 40vh, 440px);
	border-radius: var(--ce-radius-lg);
	overflow: hidden;
	box-shadow: var(--ce-shadow);
}
.ce-hero3__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ce-hero3::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(14,23,54,.94) 0%, rgba(14,23,54,.8) 34%, rgba(14,23,54,.4) 62%, rgba(14,23,54,.12) 100%);
}
.ce-hero3__inner { position: relative; z-index: 2; width: 100%; padding: clamp(28px, 5vw, 60px); }
.ce-hero3__text { max-width: 580px; }
.ce-hero3__title {
	font-family: var(--ce-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 .5em;
}
.ce-hero3__sub { color: #D3DCF2; font-size: clamp(.95rem, 1.3vw, 1.08rem); margin: 0 0 1.5em; }
.ce-hero3__cta {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--ce-blue); color: #fff;
	font-family: var(--ce-font-display); font-weight: 700; font-size: 0.92rem;
	padding: .22em 1.5em; border-radius: 10px; text-decoration: none;
	box-shadow: 0 12px 26px rgba(23,99,214,.4);
	transition: background-color .15s ease, transform .12s ease;
}
.ce-hero3__cta:hover { background: var(--ce-blue-dark); color: #fff; transform: translateY(-2px); }
.ce-hero3__cta span { font-size: 1.1em; }
@media (max-width: 760px) {
	.ce-hero3 { min-height: 300px; }
	.ce-hero3::after { background: linear-gradient(90deg, rgba(14,23,54,.93) 0%, rgba(14,23,54,.72) 55%, rgba(14,23,54,.5) 100%); }
	.ce-hero3__title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
	.ce-hero3__text { max-width: 100%; }
}
@media (max-width: 860px) {
	.ce-hero2__panel { grid-template-columns: 1fr; }
	.ce-hero2__media { order: -1; min-height: 210px; }
	.ce-hero2__media img { min-height: 210px; }
	.ce-hero2__title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
	.ce-hero2__usps { justify-content: space-between; gap: .6em; }
	.ce-hero2__usp { min-width: 0; flex: 1; font-size: .74rem; }
}

/* Value strip (USPs) */
.ce-usps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 1.6em 0 0;
}
.ce-usp {
	display: flex; align-items: center; gap: 12px;
	background: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius);
	padding: 16px 18px;
	box-shadow: var(--ce-shadow-sm);
	min-width: 0;   /* let grid tracks shrink instead of overflowing + clipping text */
}
.ce-usp > div { min-width: 0; }
.ce-usp b, .ce-usp span { overflow-wrap: anywhere; }
.ce-usp__ic {
	width: 42px; height: 42px; flex: 0 0 auto;
	display: grid; place-items: center;
	background: rgba(23,99,214,.15);
	color: var(--ce-blue-dark);
	border-radius: 10px;
}
.ce-usp__ic svg { width: 22px; height: 22px; }
.ce-usp b { display: block; color: var(--ce-navy); font-size: .98em; font-family: var(--ce-font-display); font-weight: 700; }
.ce-usp span { font-size: .82em; color: var(--ce-muted); }
@media (max-width: 760px) { .ce-usps { grid-template-columns: repeat(2, 1fr); } }
/* One clean full-width card per row on phones — avoids the cramped 2-up clip. */
@media (max-width: 480px) { .ce-usps { grid-template-columns: 1fr; } }

/* Category quick-access grid — photo cards */
.ce-cats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}
@media (max-width: 900px) { .ce-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ce-cats { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.ce-cat {
	display: flex;
	flex-direction: column;
	background: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--ce-navy);
	box-shadow: var(--ce-shadow-sm);
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ce-cat:hover {
	transform: translateY(-4px);
	border-color: #D7DCEC;
	box-shadow: var(--ce-shadow);
	color: var(--ce-navy);
}

/* Image area: real WooCommerce category photo, or a branded fallback tile. */
.ce-cat__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--ce-bg);
	overflow: hidden;
}
.ce-cat__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.ce-cat:hover .ce-cat__img { transform: scale(1.06); }
.ce-cat__fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--ce-navy) 0%, var(--ce-navy-dark) 100%);
}
.ce-cat__fallback::after {
	content: ""; position: absolute; right: -28px; bottom: -28px;
	width: 120px; height: 120px; border-radius: 50%;
	background: radial-gradient(circle, rgba(157,190,242,.20), transparent 70%);
}
.ce-cat__fallback svg {
	width: 44%; height: 44%;
	color: #fff;
	opacity: .95;
	position: relative;
	transition: transform .2s ease;
}
.ce-cat:hover .ce-cat__fallback svg { transform: scale(1.06); }
.ce-cat__num {
	position: absolute;
	top: 10px; left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px; height: 26px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(14, 23, 54, .78);
	color: #fff;
	font-family: var(--ce-font-display);
	font-weight: 700;
	font-size: .76rem;
	letter-spacing: .02em;
}
.ce-cat__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
	padding: 14px 14px 16px;
}
.ce-cat__name {
	font-family: var(--ce-font-display);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.25;
	letter-spacing: .01em;
	color: var(--ce-navy);
}
.ce-cat__arrow {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ce-blue);
	color: #fff;
	margin-top: auto;
	transition: background-color .15s ease, transform .15s ease;
}
.ce-cat:hover .ce-cat__arrow { background: var(--ce-blue-dark); transform: translateX(2px); }
.ce-cat__count {
	font-size: .78rem;
	color: var(--ce-muted);
	background: var(--ce-bg);
	border-radius: 999px;
	padding: 2px 10px;
}

/* ============================================================
   Pre-footer CTA band
   ============================================================ */
.ce-cta {
	background: linear-gradient(120deg, var(--ce-navy) 0%, var(--ce-navy-dark) 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.ce-cta::before {
	content: ""; position: absolute; right: -60px; top: -60px;
	width: 260px; height: 260px; border-radius: 50%;
	background: radial-gradient(circle, rgba(23,99,214,.18), transparent 70%);
}
.ce-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 1.1em;
	padding-top: 2.4em; padding-bottom: 2.4em;
	position: relative;
}
.ce-cta__text h2 { color: #fff; margin: 0 0 .25em; font-size: 1.6em; font-weight: 800; }
.ce-cta__text p { margin: 0; color: #C8D2EC; }
.ce-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ce-cta__btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: .85em 1.5em; border-radius: 10px;
	font-family: var(--ce-font-display); font-weight: 700; text-decoration: none;
	transition: transform .12s ease, filter .12s ease;
}
.ce-cta__btn:hover { transform: translateY(-2px); }
.ce-cta__btn--blue { background: var(--ce-blue); color: #fff; }
.ce-cta__btn--blue:hover { background: var(--ce-blue-dark); color: #fff; }
.ce-cta__btn--wa { background: #25D366; color: #fff; }
.ce-cta__btn--wa:hover { filter: brightness(1.05); color:#fff; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	background: var(--ce-navy-dark);
	color: #AEB8D6;
	padding-top: 3em;
	padding-bottom: 0;
}
.ce-footer {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 2.4em;
	padding-bottom: 2.4em;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 760px) { .ce-footer { grid-template-columns: 1fr; gap: 1.8em; } }
.ce-brand--footer .ce-brand__name { color: #fff; font-size: 1.4em; }
.ce-brand--footer .ce-brand__name em { color: var(--ce-blue-200); }
.ce-brand--footer .ce-brand__tagline { color: #9AA6C8; }
.ce-footer__contact { list-style: none; margin: 1.2em 0 0; padding: 0; }
.ce-footer__contact li { margin-bottom: .55em; font-size: .92em; color: #BAC4E0; }
.site-footer .ce-footer__contact a,
.site-footer .ce-footer__links a,
.site-footer .ce-colophon a {
	color: #fff !important;
	text-decoration: none !important;
}
.site-footer .ce-footer__contact a:hover,
.site-footer .ce-footer__links a:hover,
.site-footer .ce-colophon a:hover,
.site-footer .ce-footer__contact a:focus,
.site-footer .ce-footer__links a:focus,
.site-footer .ce-colophon a:focus,
.site-footer .ce-footer__contact a:visited,
.site-footer .ce-footer__links a:visited,
.site-footer .ce-colophon a:visited { color: #fff !important; }
.site-footer .ce-footer__title {
	color: #fff !important; font-size: 1.05em; font-weight: 700; margin: 0 0 1em;
	position: relative; padding-bottom: .5em;
}
.ce-footer__title::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px;
	background: var(--ce-blue); border-radius: 2px;
}
.ce-footer__links { list-style: none; margin: 0; padding: 0; }
.ce-footer__links li { margin-bottom: .55em; font-size: .92em; color: #AEB8D6; }
.ce-footer__links a:hover { padding-left: 3px; transition: padding .12s ease, color .12s ease; }

.ce-colophon {
	text-align: center;
	padding: 1.3em 0;
	color: #8D98BC;
	font-size: .85em;
}
.ce-colophon a:hover { text-decoration: underline !important; }

/* ============================================================
   Sidebar widgets (shop / product)
   ============================================================ */
.widget { margin-bottom: 2.2em; }
.widget-area .widget .widget-title,
.widget .widgettitle {
	font-family: var(--ce-font-display) !important;
	color: var(--ce-navy);
	font-weight: 700;
	font-size: 1.15em;
	border-bottom: 2px solid var(--ce-line);
	padding-bottom: .5em;
	margin-bottom: .6em;
}
.widget_product_categories ul { list-style: none; margin: 0; padding: 0; }
.widget_product_categories ul.product-categories > li { border-bottom: 1px solid var(--ce-line); }
.widget_product_categories li { padding: 0; }
.widget_product_categories li a {
	display: inline-block;
	padding: .55em 0;
	color: var(--ce-ink);
	font-weight: 500;
}
.widget_product_categories li a:hover { color: var(--ce-blue-dark); }
.widget_product_categories li .count { color: var(--ce-muted); font-size: .82em; font-weight: 600; }
/* Collapse subcategories; reveal only the branch being viewed. */
.widget_product_categories li .children {
	display: none;
	margin: 0 0 .4em .4em;
	border-left: 2px solid var(--ce-line);
	padding-left: .9em;
}
.widget_product_categories li.current-cat > .children,
.widget_product_categories li.current-cat-parent > .children,
.widget_product_categories li.current-cat-ancestor > .children { display: block; }
.widget_product_categories li.current-cat > a { color: var(--ce-blue-dark); font-weight: 700; }

/* Category list widget (shop, category archives, single product): a compact card
   with clear nesting and counts. */
.widget-area .widget_product_categories {
	background: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius);
	box-shadow: var(--ce-shadow-sm);
	padding: 1.1em;
}
.widget-area .widget_product_categories .widget-title {
	position: relative;
	font-size: 1.05rem;
	border-bottom: 1px solid var(--ce-line);
	padding-bottom: .7em;
	margin-bottom: .45em;
}
.widget-area .widget_product_categories .widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 2.2em;
	height: 3px;
	border-radius: 2px;
	background: var(--ce-blue);
}
.widget-area .widget_product_categories ul.product-categories {
	margin: 0 !important;
	padding: 0 !important;
}
.widget-area .widget_product_categories li::before,
.widget-area .widget_product_categories li::after,
.widget-area .widget_product_categories li > a::before,
.widget-area .widget_product_categories li > a::after {
	content: none !important;
	display: none !important;
}
.widget-area .widget_product_categories ul.product-categories > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: .2em .45em;
	margin: 0 !important;
	padding: .2em 0 !important;
}
.widget-area .widget_product_categories ul.product-categories > li:last-child { border-bottom: 0; }
.widget-area .widget_product_categories ul.product-categories > li > a {
	min-width: 0;
	margin: 0;
	padding: .25em .35em;
	border-radius: 6px;
	color: var(--ce-navy) !important;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
	overflow-wrap: anywhere;
}
.widget-area .widget_product_categories ul.product-categories > li > a:hover {
	color: var(--ce-blue-dark) !important;
	background: var(--ce-bg);
}
.widget-area .widget_product_categories li .count {
	display: inline-block;
	margin-left: 0;
	padding: .12em .5em;
	border-radius: 999px;
	background: var(--ce-bg);
	font-size: .72rem;
}
.widget-area .widget_product_categories li.current-cat > a,
.widget-area .widget_product_categories li.current-cat-parent > a {
	color: var(--ce-navy);
	font-weight: 700;
	background: rgba(23,99,214,.15);
}
.widget-area .widget_product_categories ul.children {
	grid-column: 1 / -1;
	margin: .15em 0 .2em .35em !important;
	padding: 0 0 0 .65em !important;
	border-left: 2px solid var(--ce-blue);
}
.widget-area .widget_product_categories ul.children > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: .35em;
	margin: 0 !important;
	padding: .1em 0 !important;
	border: 0;
}
.widget-area .widget_product_categories ul.children > li > a {
	min-width: 0;
	margin: 0;
	padding: .2em .35em;
	color: var(--ce-navy) !important;
	line-height: 1.3;
	text-decoration: none !important;
	overflow-wrap: anywhere;
}

/* ============================================================
   Single product polish
   ============================================================ */
.single-product div.product .entry-summary { color: var(--ce-ink); }
.single-product div.product .product_title {
	color: var(--ce-navy);
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.single-product .woocommerce-product-gallery {
	background: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius);
	padding: 12px;
	box-shadow: var(--ce-shadow-sm);
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--ce-navy) !important;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none !important; display: none !important; }
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: .65em;
	width: 100%;
	box-sizing: border-box;
	padding: .75em 1em !important;
	border-radius: 8px !important;
	color: var(--ce-navy) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
	background: var(--ce-blue) !important;
	color: #fff !important;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a::after {
	background: transparent !important;
	color: #fff !important;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover {
	background: var(--ce-navy) !important;
	color: var(--ce-white) !important;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover a,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover a::after {
	background: transparent !important;
	color: var(--ce-white) !important;
}
body.single-product.woocommerce div.product .woocommerce-tabs .panel {
	background: var(--ce-white) !important;
	border: 1px solid var(--ce-line) !important;
	border-radius: var(--ce-radius) !important;
	box-shadow: var(--ce-shadow-sm) !important;
	padding: 1.25em !important;
}
.woocommerce #reviews #comments ol.commentlist, .related.products { clear: both; }
.related.products > h2 { color: var(--ce-navy); font-weight: 800; }

/* ============================================================
   Scrolling announcement band (marquee)
   ============================================================ */
.ce-marquee {
	background: var(--ce-blue);
	color: #fff;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, .14);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.ce-marquee__track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	will-change: transform;
	animation: ce-marquee 34s linear infinite;
}
.ce-marquee:hover .ce-marquee__track { animation-play-state: paused; }
.ce-marquee__group { display: flex; align-items: center; flex: 0 0 auto; }
.ce-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 24px;
	font-family: var(--ce-font-display);
	font-weight: 600;
	font-size: .64rem;
	letter-spacing: .01em;
}
.ce-marquee__item svg { width: 16px;
	 height: 16px; flex: 0 0 auto; color: #fff;
	 opacity: .9; }
.ce-marquee__sep { opacity: .4; }
@keyframes ce-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ce-marquee__track {
		animation: none;
		width: 100%;
		white-space: normal;
		flex-wrap: wrap;
		justify-content: center;
	}
	.ce-marquee__group:nth-child(2) { display: none; }
}

/* Mobile navigation: a compact rounded menu button with a matching drawer. */
.ce-topbar { display: none !important; }
@media (max-width: 767px) {
	.storefront-primary-navigation {
		padding: .35rem 0 .7rem;
		border: 0;
		background: transparent !important;
	}
	.storefront-primary-navigation > .col-full {
		padding: .2rem 1rem .35rem;
		background: transparent !important;
	}
	.storefront-primary-navigation .main-navigation {
		border: 1px solid rgba(22, 37, 92, .15);
		border-radius: 14px;
		background: var(--ce-navy) !important;
		box-shadow: 0 6px 18px rgba(16, 27, 69, .12);
		overflow: hidden;
	}
	.storefront-primary-navigation .menu-toggle {
		min-height: 50px;
		padding: .8rem 1rem .8rem 3rem;
		border: 0;
		border-radius: 13px;
		background: linear-gradient(110deg, var(--ce-navy), var(--ce-navy-700));
		box-shadow: none;
		font-size: .96rem;
		letter-spacing: .01em;
	}
	.storefront-primary-navigation .menu-toggle:focus { outline: none; }
	.storefront-primary-navigation .menu-toggle:focus-visible {
		outline: 3px solid var(--ce-blue-200);
		outline-offset: -4px;
	}
	.storefront-primary-navigation .main-navigation.toggled .menu-toggle {
		border-radius: 13px 13px 0 0;
	}
	.storefront-primary-navigation .main-navigation .primary-navigation,
	.storefront-primary-navigation .main-navigation .primary-navigation > ul,
	.storefront-primary-navigation .main-navigation .primary-navigation li {
		background-color: var(--ce-navy-dark) !important;
	}
	.storefront-primary-navigation .main-navigation .primary-navigation li a {
		min-height: 48px;
		padding: .8rem 1rem;
		transition: background-color .15s ease, color .15s ease;
	}
	.storefront-primary-navigation .main-navigation .primary-navigation li a:hover,
	.storefront-primary-navigation .main-navigation .primary-navigation li a:focus-visible {
		background: rgba(23, 99, 214, .2);
		color: #fff;
	}
	.storefront-primary-navigation .main-navigation .primary-navigation li.current-menu-item > a,
	.storefront-primary-navigation .main-navigation .primary-navigation li.current_page_item > a {
		background: rgba(23, 99, 214, .24);
		color: #fff;
	}
	/* Override the desktop active-menu pill so Accueil uses the same row size
	   and left edge as the other links in the mobile drawer. */
	.site-header .storefront-primary-navigation .main-navigation .primary-navigation ul.menu > li.current-menu-item > a,
	.site-header .storefront-primary-navigation .main-navigation .primary-navigation ul.menu > li.current_page_item > a {
		box-sizing: border-box;
		display: block;
		width: 100%;
		min-height: 48px;
		margin: 0;
		padding: .8rem 1rem !important;
		border-radius: 0 !important;
		background: rgba(23, 99, 214, .24) !important;
		color: #fff !important;
	}
	.storefront-primary-navigation .main-navigation .primary-navigation ul.sub-menu,
	.storefront-primary-navigation .main-navigation .primary-navigation ul.children {
		padding-left: .8rem;
		border-left: 2px solid rgba(157, 190, 242, .45);
		background: rgba(14, 23, 54, .55) !important;
	}
}

/* Social links sit directly below the contact email in the footer. */
.ce-footer__social {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-top: .95rem;
}
.site-footer .ce-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid transparent;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
	color: #fff !important;
	transition: transform .15s ease, filter .15s ease;
}
.site-footer .ce-footer__social .ce-social-link--facebook { background: #1877F2; border-color: #1877F2; }
.site-footer .ce-footer__social .ce-social-link--instagram { background: linear-gradient(135deg, #F58529, #DD2A7B 52%, #8134AF); border-color: #DD2A7B; }
.site-footer .ce-footer__social .ce-social-link--whatsapp { background: #20C66B; border-color: #20C66B; }
.site-footer .ce-footer__social a:hover,
.site-footer .ce-footer__social a:focus-visible {
	transform: translateY(-2px);
	filter: brightness(.9);
	outline: 2px solid rgba(255, 255, 255, .85);
	outline-offset: 2px;
}
.ce-footer__social svg { display: block; width: 21px; height: 21px; color: #fff; }