/* ============================================================
 * DESIGN A · Cafemalin Header 2026
 * Playfair Display serif · brown-900 #2b1810 · gold-700 #8a6c2d · cream #faf6f1
 * ============================================================ */
.cm-h2026 {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff;
	font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
	color: #2b1810;
	border-bottom: 1px solid rgba(74,44,26,.06);
	box-sizing: border-box;
	/* v1.0.14 fix flickering : promotion GPU layer permanente (elimine tearing scroll thread + main thread) */
	transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.cm-h2026 *,
.cm-h2026 *::before,
.cm-h2026 *::after { box-sizing: border-box; }

/* v1.0.30 fix ZipChat overlay caché par header stacking context isolé (transform:translateZ(0)
 * crée un stacking root que même z-index max ne peut traverser). Le JS ajoute body.cm-zipchat-open
 * quand overlay ZipChat détecté visible → abaisse le z-index du header pour laisser passer
 * l'overlay IA par-dessus. On garde transform:translateZ(0) pour préserver fix flickering v1.0.14.
 *
 * v1.0.45 : le drawer mobile (.cm-h2026-mobile-panel) est un enfant du header, donc il subissait
 * lui aussi le z-index: 1 → il passait sous les sections de la page et le user ne voyait plus que
 * quelques fragments (bouton de fermeture). Le cas drawer ouvert avait donc été isolé à 998.
 *
 * v1.0.50 : les deux cas sont unifiés à 998. Le z-index: 1 du cas « drawer fermé » enterrait le
 * header sticky sous le contenu de la page dès que celui-ci défilait dessous (badges hub z-index: 2,
 * sections Elementor), et rendait la recovery v1.0.47 inatteignable au pointeur. 998 reste sous
 * l'overlay ZipChat (z-index: 999 dans son shadow root) donc le comportement voulu en v1.0.30
 * — l'overlay IA couvre le header — est strictement préservé. */
body.cm-zipchat-open .cm-h2026 { z-index: 998 !important; }

/* v1.0.14 fix flickering : will-change conditionnel pendant scroll actif uniquement (via JS .is-scrolling) */
.cm-h2026.is-scrolling .cm-h2026-topbar,
.cm-h2026.is-scrolling .cm-h2026-main-inner,
.cm-h2026.is-scrolling .cm-h2026-logo-img {
	will-change: max-height, opacity, height;
}

/* v1.0.14 fix flickering : respect prefers-reduced-motion (a11y + safety zero-flicker) */
@media (prefers-reduced-motion: reduce) {
	.cm-h2026 .cm-h2026-topbar,
	.cm-h2026 .cm-h2026-main,
	.cm-h2026 .cm-h2026-main-inner,
	.cm-h2026 .cm-h2026-logo-img { transition: none !important; }
}

/* ---------- TOPBAR ---------- */
.cm-h2026-topbar {
	background: #795549;
	color: #f5eee2;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 12px;
	letter-spacing: .03em;
	padding: 8px 0;
	overflow: hidden;
	max-height: 44px;
	opacity: 1;
	/* v1.0.14 fix flickering : durees harmonisees a .25s + retire padding (masque par overflow:hidden + coute layout inutile) */
	transition: max-height .25s ease, opacity .25s ease;
}
.cm-h2026.is-scrolled .cm-h2026-topbar {
	max-height: 0;
	opacity: 0;
	padding: 0;
	border-bottom: 0;
}
.cm-h2026-topbar-inner {
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.cm-h2026-topbar-item {
	color: #f5eee2;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color .15s ease;
}
.cm-h2026-topbar-tel:hover { color: #c8a95b; }
/* v1.0.59 — icone du topbar. Le span conserve `aria-hidden` : `cafemalin-linguise-mobile-fix.php`
   masque le texte du HTML sous 768 px (`font-size: 0`) et ne laisse vivre que `> [aria-hidden]`.
   Le SVG est dimensionne en px, donc insensible a ce `font-size: 0` comme au `13px` qui lui repond. */
.cm-h2026-topbar-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
	/* v1.0.61 — plus aucun `order` : l'icone reprend sa place en tete sur desktop (ordre du DOM), et
	   sous 767 px elle se retrouve entre les deux moities du libelle sans intervention, puisque
	   `cafemalin-linguise-mobile-fix.php` v2.6.4 scinde ce libelle en `::before` et `::after` et que
	   l'icone est le premier enfant du DOM apres le `::before`. Deux placements differents obtenus
	   par le seul ordre naturel des boites. */
}
.cm-h2026-topbar-ico svg {
	display: block;
	width: 14px;
	height: 14px;
}
/* Meme breakpoint que la regle de `cafemalin-linguise-mobile-fix.php` qui reecrit le texte :
   la barre y est plus dense, l'icone est legerement agrandie pour rester lisible. */
@media (max-width: 767px) {
	.cm-h2026-topbar-ico svg { width: 15px; height: 15px; }
	/* v1.0.61 — l'icone remplace le point median entre les deux moities du libelle. Le libelle est
	   alors rendu en quatre boites flex : `::before`, l'icone, le noeud de texte du HTML reduit a
	   une largeur nulle par le `font-size: 0` du plugin Linguise, puis `::after`. Le `gap` du
	   conteneur s'appliquerait donc trois fois et poserait 12 px a droite de l'icone contre 6 a
	   gauche : il est neutralise, et l'ecart est porte par les marges de l'icone elle-meme, qui sont
	   symetriques par construction. */
	.cm-h2026-topbar-item:not(.cm-h2026-topbar-tel) { gap: 0; }
	.cm-h2026-topbar-ico { margin: 0 6px; }
}

/* ---------- MAIN HEADER ---------- */
.cm-h2026-main {
	background: #fff;
	transition: box-shadow .25s ease;
}
.cm-h2026.is-scrolled .cm-h2026-main {
	box-shadow: 0 2px 12px rgba(74,44,26,.08);
}
.cm-h2026-main-inner {
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 32px;
	height: 84px;
	display: flex;
	align-items: center;
	gap: 32px;
	position: relative;
	transition: height .25s ease;
}
.cm-h2026.is-scrolled .cm-h2026-main-inner {
	height: 64px;
}

/* Burger mobile (caché desktop) */
.cm-h2026-burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
	flex-direction: column;
	gap: 4px;
	width: 40px;
	height: 40px;
	justify-content: center;
	align-items: center;
}
.cm-h2026-burger-line {
	display: block;
	width: 22px;
	height: 1.5px;
	background: #2b1810;
	transition: transform .25s ease, opacity .25s ease;
	transform-origin: center;
}
.cm-h2026-burger.is-active .cm-h2026-burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cm-h2026-burger.is-active .cm-h2026-burger-line:nth-child(2) { opacity: 0; }
.cm-h2026-burger.is-active .cm-h2026-burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* v1.0.39 : loupe mobile placée à gauche à côté du burger (cachée en desktop, où la loupe */
/* du bloc .cm-h2026-actions prend le relais). Les deux boutons portent .cm-h2026-search-btn */
/* pour rester détectés par ZipChat et par initSearch() quel que soit le breakpoint. */
/* v1.0.40 : spécificité (0,2,0) obligatoire — `.cm-h2026-action { display: inline-flex }` est */
/* déclaré plus bas dans la feuille avec la même spécificité (0,1,0) et écrasait ce display:none, */
/* d'où deux loupes visibles en desktop. */
.cm-h2026-action.cm-h2026-search-btn--mobile { display: none; }

/* Logo */
.cm-h2026-logo {
	text-decoration: none;
	color: #2b1810;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	flex-shrink: 0;
}
.cm-h2026-logo-img {
	display: block;
	height: 48px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	transition: height .25s ease;
}
.cm-h2026.is-scrolled .cm-h2026-logo-img {
	height: 36px;
}
.cm-h2026-logo-img--mobile {
	/* v1.0.36 (2026-08-30 23h25) : height 40 → 48px (+20 %, matching desktop et taille ancien menu XStore) */
	/* + max-width 150 → 160px (fit budget viewport 375px avec burger 36 + actions 3×44 + padding 24). */
	/* Contrainte user stricte : hauteur `.cm-h2026-main-inner` mobile préservée à 64px (48 + 8×2 = 64). */
	height: 48px;
	max-width: 160px;
}
/* Fallback texte (legacy) */
.cm-h2026-logo-text {
	font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
	font-weight: 500;
	font-size: 28px;
	letter-spacing: -.02em;
	color: #2b1810;
}
.cm-h2026-logo-text em {
	font-style: italic;
	color: #8a6c2d;
	font-weight: 400;
}

/* Nav */
.cm-h2026-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}
.cm-h2026-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}
.cm-h2026-nav-item {
	position: static;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cm-h2026-nav-link {
	font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: -.005em;
	color: #2b1810;
	padding: 12px 16px;
	text-decoration: none;
	display: inline-block;
	line-height: 1;
	position: relative;
	cursor: pointer;
	transition: color .2s ease;
	background: transparent;
	border: 0;
}
/* v1.0.46 : pont de survol invisible entre le lien et le mega.
   Le lien fait 40px dans un header de 84px (32px pour l'item pro) : il reste
   jusqu'a 26px de vide sous lui avant que le mega ne commence (top: 100% du
   header inner). Sans ce pont, traverser ce vide perd le :hover du <li>. */
.cm-h2026-nav-link::before {
	content: '';
	position: absolute;
	top: 100%;
	left: -2px;
	right: -2px;
	height: 28px;
	background: transparent;
}
.cm-h2026.is-scrolled .cm-h2026-nav-link::before { height: 18px; }
.cm-h2026-nav-link::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 1px;
	background: #8a6c2d;
	transition: width .3s ease;
}
.cm-h2026-nav-item:hover > .cm-h2026-nav-link,
.cm-h2026-nav-item.is-open > .cm-h2026-nav-link,
.cm-h2026-nav-link:focus {
	color: #8a6c2d;
	font-style: italic;
}
.cm-h2026-nav-item:hover > .cm-h2026-nav-link::after,
.cm-h2026-nav-item.is-open > .cm-h2026-nav-link::after,
.cm-h2026-nav-link:focus::after {
	width: 24px;
}

/* Item pro (bouton uppercase) */
.cm-h2026-nav-item.is-pro > .cm-h2026-nav-link {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	background: transparent;
	border: 1px solid #2b1810;
	color: #2b1810;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 10px 16px;
	margin-left: 12px;
	font-style: normal !important;
	transition: background .15s, color .15s;
}
.cm-h2026-nav-item.is-pro > .cm-h2026-nav-link::after { display: none; }
.cm-h2026-nav-item.is-pro:hover > .cm-h2026-nav-link,
.cm-h2026-nav-item.is-pro.is-open > .cm-h2026-nav-link {
	background: #2b1810;
	color: #fff;
	font-style: normal !important;
}

/* Actions droite */
.cm-h2026-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.cm-h2026-action {
	color: #2b1810;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: color .15s;
	width: 40px;
	height: 40px;
}
.cm-h2026-action:hover { color: #8a6c2d; }
.cm-h2026-cart-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	background: #8a6c2d;
	color: #fff;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 10px;
	font-weight: 600;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.cm-h2026-cart-badge[hidden] { display: none !important; }

/* ---------- MEGA PANELS (v1.0.9 · alignement demo v5.1) ---------- */
.cm-h2026-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border-top: 1px solid rgba(74,44,26,.06);
	/* v1.0.55 : coins bas arrondis uniquement. Le haut est solidaire du header et porte la
	   barre doree ::before pleine largeur — l'arrondir la clipperait. */
	border-radius: 0 0 16px 16px;
	box-shadow: 0 12px 40px rgba(74,44,26,.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	/* v1.0.46 : delai de fermeture .12s (tolerance aux micro-sorties diagonales).
	   L'ouverture reste instantanee grace au transition-delay: 0s de la regle :hover. */
	transition: opacity .2s ease .12s, transform .2s ease .12s, visibility 0s linear .32s;
	z-index: 999;
	max-height: calc(100vh - 84px - 32px);
	overflow-y: auto;
}
.cm-h2026-mega::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent 0%, #c8a95b 20%, #c8a95b 80%, transparent 100%);
	pointer-events: none;
}
.cm-h2026-nav-item:hover > .cm-h2026-mega,
.cm-h2026-nav-item:focus-within > .cm-h2026-mega,
.cm-h2026-nav-item.is-open > .cm-h2026-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}
.cm-h2026-mega-inner {
	max-width: 1500px;
	margin: 0 auto;
	padding: 28px 32px 24px;
}

/* Mega-header (eyebrow + title 40px) supprimé cote PHP - safety CSS pour anciens caches */
.mega-header,
.mega-eyebrow,
.mega-title,
.mega-desc { display: none !important; }

.mega-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr 1fr;
	gap: 32px;
	border-top: 0;
	padding-top: 0;
}
.mega-grid-brands { grid-template-columns: 1fr 1fr 1.4fr 1fr; }
.mega-col { min-width: 0; }
.mega-col-title {
	font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #8a5a2f;
	margin: 0 0 14px;
	padding-bottom: 11px;
	border-bottom: 1px solid rgba(200,169,91,.35);
}
.mega-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.mega-col ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.5;
}
.mega-col a {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #4a2c1a;
	text-decoration: none;
	line-height: 1.5;
	letter-spacing: -.003em;
	transition: color .15s;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
}
.mega-col a:hover,
.mega-col a:focus {
	color: #c8a95b;
	font-style: normal;
}
.mega-count {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 12.5px;
	color: #8a5a2f;
	font-weight: 600;
	font-style: normal;
	background: rgba(200,169,91,.18);
	border: 1px solid rgba(200,169,91,.4);
	padding: 2px 9px;
	border-radius: 999px;
	line-height: 1.2;
}
.mega-viewall {
	margin-top: 18px;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8a5a2f;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1px solid #c8a95b;
	padding-bottom: 2px;
	transition: gap .15s, color .15s;
}
.mega-viewall:hover { gap: 10px; color: #4a2c1a; }

/* Col intensite (grains) - style beans SVG demo v5.1 */
.mega-col-intensity .mega-intensity {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 20px;
}
.int-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid rgba(74,44,26,.06);
	text-decoration: none;
	transition: padding .15s;
}
.int-row:hover { padding-left: 4px; }
.int-row:last-child { border-bottom: 0; }
.int-label {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 14.5px;
	color: #3d2817;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 500;
}
.int-beans {
	display: inline-flex;
	gap: 2px;
	align-items: center;
}
.int-beans .bean {
	width: 9px;
	height: 12px;
	border-radius: 50% 50% 45% 45%;
	display: inline-block;
}
.int-beans .bean--doux    { background: #b8d0a8; }
.int-beans .bean--equil   { background: #c8a95b; }
.int-beans .bean--corse   { background: #7c5230; }
.int-beans .bean--intense { background: #3d2817; }
.int-label em {
	font-style: normal;
	color: #8a5a2f;
	font-size: 12px;
	margin-left: 5px;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: .04em;
	background: rgba(200,169,91,.18);
	padding: 2px 7px;
	border-radius: 999px;
}
.int-cta {
	color: #8a5a2f;
	font-size: 15px;
	text-decoration: none;
	transition: transform .15s;
}
.int-cta:hover { transform: translateX(3px); }
.mega-selections-title {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8a5a2f;
	margin: 16px 0 10px;
	padding-top: 12px;
	border-top: 1px dashed rgba(200,169,91,.35);
}

/* Col featured cards - alignement exact demo v5.1 (fond cream + border gold + object-fit contain) */
.mega-col-featured .mega-featured {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.feat-card {
	padding: 8px;
	border: 1px solid rgba(200,169,91,.35);
	background: #faf6f1;
	border-radius: 8px;
	text-decoration: none;
	display: flex;
	gap: 12px;
	align-items: center;
	transition: all .2s;
}
.feat-card:hover {
	background: #fff;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(74,44,26,.06);
	border-color: #c8a95b;
}
.feat-card-img {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	position: relative;
	margin: 0;
}
.feat-card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.feat-card-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.feat-card-name {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #4a2c1a;
	line-height: 1.3;
	margin: 0 0 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.feat-card-price {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-weight: 700;
	color: #8a5a2f;
	font-size: 13px;
	margin: 0;
}
.feat-card-intensity {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 10px;
	color: #4a2c1a;
	background: linear-gradient(90deg,#fff7e4 0%,#faedc0 100%);
	border: 1px solid rgba(200,169,91,.35);
	padding: 2px 7px;
	border-radius: 999px;
	align-self: flex-start;
	margin-top: 4px;
	font-weight: 700;
	letter-spacing: .01em;
}

/* Article vignette (demo v5.1 : eyebrow + img + title + CTA, pas de date) */
.mega-article-vignette {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mega-art-eyebrow {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 10.5px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: #8a5a2f;
	font-weight: 700;
}
.mega-art-link {
	text-decoration: none;
	color: #3d2817;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: opacity .2s;
}
.mega-art-link:hover { opacity: .85; }
.mega-art-img {
	aspect-ratio: 16/10;
	background: linear-gradient(180deg, #faf6f1 0%, #f0e8d6 100%);
	border-radius: 8px;
	overflow: hidden;
}
.mega-art-img img { width: 100%; height: 100%; object-fit: cover; }
.mega-art-title {
	font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #3d2817;
	margin: 0;
}
.mega-art-cta {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 11px;
	color: #8a5a2f;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 700;
	border-bottom: 1px solid #c8a95b;
	padding-bottom: 2px;
	align-self: flex-start;
}

/* Trust panel (marques + pro) - cream gradient + checkmarks demo v5.1 */
.mega-col-trust {
	background: linear-gradient(180deg, #faf6f1 0%, #f5eee2 100%);
	padding: 20px;
	border: 1px solid rgba(200,169,91,.28);
	border-radius: 12px;
}
.mega-col-trust .mega-col-title {
	border-bottom-color: rgba(200,169,91,.4);
	margin-bottom: 12px;
	padding-bottom: 9px;
}
.mega-trust-lead {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 14.5px;
	line-height: 1.55;
	color: #4a2c1a;
	margin: 0 0 14px;
}
.mega-trust-list {
	list-style: none !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.mega-trust-list li {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 12.5px;
	color: #4a2c1a;
	padding-left: 22px;
	position: relative;
	line-height: 1.45;
	display: block;
}
.mega-trust-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #c8a95b;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.mega-col-trust .mega-viewall {
	margin-top: 0;
	color: #4a2c1a;
	border-bottom-color: #8a5a2f;
}
.mega-col-trust .mega-viewall:hover { color: #8a5a2f; }

/* Contact express (pro) - brown site color #795549 (au lieu de #2b1810 quasi-noir) */
.mega-col-contact {
	background: linear-gradient(180deg, #795549 0%, #5c3720 100%);
	color: #f5eee2;
	padding: 22px;
	border-radius: 12px;
}
.mega-col-contact .mega-col-title {
	color: #f5eee2;
	border-bottom-color: rgba(245,238,226,.25);
}
.mega-contact-lead {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 14.5px;
	line-height: 1.55;
	color: #f5eee2;
	margin: 0 0 16px;
}
.mega-contact-tel, .mega-contact-mail {
	display: block;
	font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
	font-size: 20px;
	color: #f5eee2;
	text-decoration: none;
	margin-bottom: 9px;
	line-height: 1.3;
	transition: color .15s;
	font-weight: 600;
}
.mega-contact-tel:hover, .mega-contact-mail:hover { color: #c8a95b; }
.mega-contact-mail { font-size: 15px; font-weight: 500; }
.mega-contact-meta {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 12px;
	color: rgba(245,238,226,.75);
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-top: 15px;
	padding-top: 13px;
	border-top: 1px solid rgba(245,238,226,.15);
}

/* ---------- MEGA PRO v1.0.17 · UX 2026 OVERRIDES (scoped [data-mega-panel="pro"]) ---------- */

/* Fix (A) contraste critique liens Contact express B2B — spécificité (0,3,0) = 30 override (0,1,1) = 11
 * du sélecteur générique `.mega-col a`. Ancien : brown-800 (#4a2c1a) sur fond marron dégradé = invisible.
 * Nouveau : blanc pur sur fond marron = WCAG AAA (>=7:1). Bulle relief clic-friendly UX 2026. */
.cm-h2026-mega[data-mega-panel="pro"] .mega-col-contact .mega-contact-tel,
.cm-h2026-mega[data-mega-panel="pro"] .mega-col-contact .mega-contact-mail {
	color: #fff;
	background: rgba(255,255,255,.08);
	padding: 10px 14px;
	border-radius: 8px;
	transition: background .2s, color .2s, transform .2s;
	border: 1px solid rgba(255,255,255,.12);
}
.cm-h2026-mega[data-mega-panel="pro"] .mega-col-contact .mega-contact-tel:hover,
.cm-h2026-mega[data-mega-panel="pro"] .mega-col-contact .mega-contact-mail:hover {
	color: #c8a95b;
	background: rgba(255,255,255,.14);
	border-color: rgba(200,169,91,.35);
	transform: translateY(-1px);
}

/* Fix (B) v1.0.18 : spacing puces trust list — appliqué GLOBALEMENT sur les 2 mega trust cols (Pro L1281
 * « Pourquoi Cafemalin B2B » + Marques L1230 « Distribution officielle »). Scope retiré vs v1.0.17 car
 * grep confirme `.mega-trust-list` utilisée UNIQUEMENT dans ces 2 endroits (zero risque cross-impact).
 * IMPORTANT (v1.0.18 fix audit CDP) : sélecteur `.mega-col ul.mega-trust-list li` avec spécificité
 * (0,2,3) = 23 pour override la baseline `.mega-col ul li { padding: 0; margin: 0 }` L2428 de spéc
 * (0,1,3) = 13 qui écrasait sinon `padding-left` + `margin-bottom` + `line-height` (le seul champ qui
 * passait avec l'ancienne spéc 11 était `font-size` mais mal appliqué visuellement). Spacing 22 → 30 px
 * (12 px entre puce et texte), puce 16 → 18 px brown-500 (#8a5a2f) sur blanc = WCAG AAA. */
.mega-col ul.mega-trust-list li {
	padding-left: 32px;
	font-size: 14.5px;
	line-height: 1.55;
	margin-bottom: 12px;
}
.mega-col ul.mega-trust-list li::before {
	width: 20px;
	height: 20px;
	top: 2px;
	background: #8a5a2f;
	color: #fff;
	font-size: 12px;
	line-height: 20px;
}

/* Fix (C) uniformisation cards UX 2026 cols 1+2 — dégradé cream cohérent cols 3+4. Scope strict via
 * data-mega-panel="pro" pour NE PAS affecter les 7 autres mega-menus (grains/capsules/machines/boissons/
 * thes/accessoires/marques) qui ont un layout différent (mega-col simple sans card cream). */
.cm-h2026-mega[data-mega-panel="pro"] .mega-col:not(.mega-col-contact):not(.mega-col-trust) {
	background: linear-gradient(180deg, #faf6f1 0%, #f5eee2 100%);
	border: 1px solid rgba(200,169,91,.22);
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(74,44,26,.04);
	transition: box-shadow .25s, transform .25s;
}

/* Hover subtile toutes cols mega Pro — feedback interactif UX 2026 */
.cm-h2026-mega[data-mega-panel="pro"] .mega-col {
	transition: box-shadow .25s, transform .25s;
}
.cm-h2026-mega[data-mega-panel="pro"] .mega-col:hover {
	box-shadow: 0 4px 12px rgba(74,44,26,.08);
	transform: translateY(-1px);
}
.cm-h2026-mega[data-mega-panel="pro"] .mega-col-contact:hover {
	box-shadow: 0 6px 16px rgba(74,44,26,.14);
}

/* ---------- SEARCH OVERLAY ---------- */
.cm-h2026-search-overlay {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid rgba(74,44,26,.06);
	box-shadow: 0 20px 40px rgba(0,0,0,.06);
	padding: 32px;
	transform: translateY(-8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, transform .2s, visibility 0s linear .2s;
	z-index: 998;
}
.cm-h2026-search-overlay.is-open {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
.cm-h2026-search-form {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
}
.cm-h2026-search-input {
	flex: 1;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(74,44,26,.2);
	padding: 12px 40px 12px 40px;
	font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
	font-size: 20px;
	color: #2b1810;
	outline: none;
	transition: border-color .2s;
}
.cm-h2026-search-input:focus { border-bottom-color: #8a6c2d; }
.cm-h2026-search-input::placeholder { color: #a09a94; font-style: italic; }
.cm-h2026-search-submit {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: #8a6c2d;
	cursor: pointer;
	padding: 8px;
	display: inline-flex;
}
.cm-h2026-search-close {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: #2b1810;
	font-size: 28px;
	cursor: pointer;
	padding: 4px 8px;
	line-height: 1;
}
.cm-h2026-search-close:hover { color: #8a6c2d; }

/* ---------- BACKDROP ---------- */
.cm-h2026-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	width: 100dvw;
	height: 100vh;
	height: 100dvh;
	background: rgba(43,24,16,.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility 0s linear .3s;
	z-index: 9997;
}
.cm-h2026-backdrop.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* ---------- MOBILE PANEL (off-canvas drill-down) ---------- */
.cm-h2026-mobile-panel {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	height: 100dvh;
	width: 100%;
	max-width: 420px;
	background: #fff;
	transform: translateX(-100%);
	transition: transform .3s ease;
	z-index: 9998;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.cm-h2026-mobile-panel.is-open {
	transform: translateX(0);
}
.cm-h2026-mobile-header {
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid rgba(74,44,26,.06);
	flex-shrink: 0;
	position: relative;
}
.cm-h2026-mobile-logo { text-decoration: none; }
.cm-h2026-mobile-logo .cm-h2026-logo-text { font-size: 24px; }
.cm-h2026-mobile-close {
	background: none;
	border: 0;
	color: #2b1810;
	font-size: 32px;
	cursor: pointer;
	padding: 4px 8px;
	line-height: 1;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}
.cm-h2026-mobile-close:hover { color: #8a6c2d; }

.cm-h2026-mobile-nav {
	flex: 1;
	overflow: hidden;
	position: relative;
}
.cm-h2026-mobile-level {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	background: #fff;
	transform: translateX(100%);
	transition: transform .3s ease;
}
.cm-h2026-mobile-level[data-level="L1"] {
	transform: translateX(0);
}
.cm-h2026-mobile-level[data-level="L1"].is-hidden {
	transform: translateX(-100%);
}
.cm-h2026-mobile-level[data-level="L2"].is-active {
	transform: translateX(0);
}
.cm-h2026-mobile-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cm-h2026-mobile-list li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cm-h2026-mobile-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 20px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(74,44,26,.06);
	color: #2b1810;
	font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
	text-align: left;
	gap: 14px;
	transition: background .15s;
}
.cm-h2026-mobile-item:hover,
.cm-h2026-mobile-item:active {
	background: #faf6f1;
}
/* v1.0.9 : icones SVG dans drill-down L1 (feedback user demo v5.1 avait ces icones) */
.cm-h2026-mobile-item .cat-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: linear-gradient(180deg, #faf6f1 0%, #f0e8d6 100%);
	border: 1px solid rgba(200,169,91,.28);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #8a5a2f;
	flex-shrink: 0;
}
.cm-h2026-mobile-item .cat-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}
.cm-h2026-mobile-item.is-pro .cat-icon {
	background: linear-gradient(180deg, #795549 0%, #5c3720 100%);
	border-color: rgba(200,169,91,.5);
	color: #f5eee2;
}
.cm-h2026-mobile-item.is-pro {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #3d2817;
	border-top: 1px solid rgba(74,44,26,.08);
	margin-top: 8px;
}
.cm-h2026-mobile-item-label { flex: 1; min-width: 0; }
.cm-h2026-mobile-item-count {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 11.5px;
	color: #8a5a2f;
	background: rgba(200,169,91,.18);
	border: 1px solid rgba(200,169,91,.35);
	padding: 2px 8px;
	border-radius: 999px;
	margin-right: 10px;
	font-weight: 600;
}
/* v1.0.13 : sections mobile drill-down (Café en Grains 4 sections) */
.cm-h2026-mobile-section-title {
	padding: 14px 24px 8px;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #8a5a2f;
	background: #faf6f1;
	border-top: 1px solid rgba(200,169,91,.22);
	border-bottom: 1px solid rgba(200,169,91,.14);
	margin: 0;
}
.cm-h2026-mobile-level[data-level="L2"] .cm-h2026-mobile-list + .cm-h2026-mobile-section-title {
	margin-top: 0;
}
.cm-h2026-mobile-int-row .cm-h2026-mobile-item-label {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.cm-h2026-mobile-int-beans {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
.cm-h2026-mobile-int-beans .bean {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #d6c9b2;
	border: 1px solid rgba(74,44,26,.08);
}
.cm-h2026-mobile-int-beans .bean--doux    { background: #cfd9b5; border-color: rgba(97,138,58,.35); }
.cm-h2026-mobile-int-beans .bean--equil   { background: #d9b47a; border-color: rgba(158,101,29,.35); }
.cm-h2026-mobile-int-beans .bean--corse   { background: #a3653a; border-color: rgba(112,54,20,.4); }
.cm-h2026-mobile-int-beans .bean--intense { background: #4a2c1a; border-color: rgba(30,15,6,.5); }
.cm-h2026-mobile-int-name {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	color: #2b1810;
}
.cm-h2026-mobile-int-range {
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 11px;
	color: #8a5a2f;
	background: #faf6f1;
	border: 1px solid rgba(200,169,91,.30);
	padding: 1px 8px;
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: .01em;
}
.cm-h2026-mobile-item-arrow {
	color: #8a6c2d;
	font-size: 24px;
	line-height: 1;
}
.cm-h2026-mobile-back {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	color: #8a6c2d;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 16px 24px;
	cursor: pointer;
	border-bottom: 1px solid rgba(74,44,26,.06);
	width: 100%;
	text-align: left;
	font-weight: 500;
}
.cm-h2026-mobile-back:hover { color: #2b1810; }
.cm-h2026-mobile-title {
	padding: 20px 24px 12px;
	font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #4a2c1a;
	margin: 0;
}
.cm-h2026-mobile-cta {
	display: block;
	margin: 24px;
	padding: 14px 20px;
	background: #2b1810;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 500;
	transition: background .15s;
}
.cm-h2026-mobile-cta:hover { background: #4a2c1a; color: #fff; }
.cm-h2026-mobile-shortcuts {
	display: flex;
	gap: 12px;
	padding: 20px 24px;
	background: #faf6f1;
	border-top: 1px solid rgba(74,44,26,.06);
}
.cm-h2026-mobile-shortcut {
	flex: 1;
	padding: 12px;
	background: #fff;
	border: 1px solid rgba(74,44,26,.12);
	text-decoration: none;
	text-align: center;
	color: #2b1810;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	transition: background .15s, color .15s;
}
.cm-h2026-mobile-shortcut:hover { background: #2b1810; color: #fff; }

/* v1.0.20 : search bar mobile sous logo (feedback user 30/08 10h15) */
.cm-h2026-mobile-search {
	padding: 12px 16px 14px;
	background: #faf6f1;
	border-bottom: 1px solid rgba(74,44,26,.06);
	flex-shrink: 0;
}
.cm-h2026-mobile-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid rgba(74,44,26,.12);
	border-radius: 10px;
	padding: 10px 14px;
	transition: border-color .15s, box-shadow .15s;
}
.cm-h2026-mobile-search-form:focus-within {
	border-color: #8a5a2f;
	box-shadow: 0 0 0 3px rgba(138,90,47,.15);
}
.cm-h2026-mobile-search-icon {
	color: #8a5a2f;
	flex-shrink: 0;
}
.cm-h2026-mobile-search-input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 14px;
	color: #2b1810;
	padding: 0;
}
.cm-h2026-mobile-search-input::placeholder {
	color: #8a7a68;
	opacity: 1;
}

/* v1.0.20 : actions footer mobile (panier + login) — flex-shrink 0 collé en bas du panel */
.cm-h2026-mobile-actions {
	display: flex;
	gap: 10px;
	padding: 14px 16px 18px;
	background: #fff;
	border-top: 1px solid rgba(74,44,26,.08);
	flex-shrink: 0;
	box-shadow: 0 -2px 8px rgba(74,44,26,.04);
}
.cm-h2026-mobile-action {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 14px;
	background: #faf6f1;
	border: 1px solid rgba(200,169,91,.28);
	border-radius: 10px;
	text-decoration: none;
	color: #2b1810;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	transition: background .15s, border-color .15s, transform .15s, color .15s;
	position: relative;
	min-height: 46px;
}
.cm-h2026-mobile-action:hover,
.cm-h2026-mobile-action:active,
.cm-h2026-mobile-action:focus-visible {
	background: #f0e8d6;
	border-color: rgba(200,169,91,.5);
	color: #4a2c1a;
	transform: translateY(-1px);
	outline: none;
}
.cm-h2026-mobile-action svg {
	flex-shrink: 0;
	color: #8a5a2f;
}
.cm-h2026-mobile-action-label {
	white-space: nowrap;
}
.cm-h2026-mobile-action-badge {
	position: absolute;
	top: 6px;
	right: 8px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: #8a5a2f;
	color: #fff;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 2px solid #fff;
	box-sizing: content-box;
	font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
}
.cm-h2026-mobile-action-badge[hidden] { display: none !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1300px) {
	.cm-h2026-nav { display: none; }
	.cm-h2026-burger { display: inline-flex; }
	.cm-h2026-main-inner { padding: 0 20px; height: 72px; gap: 16px; }
	.cm-h2026-logo-text { font-size: 24px; }
	.cm-h2026-topbar-inner { padding: 0 20px; font-size: 11px; }
	.cm-h2026-topbar-item { font-size: 11px; }
}

@media (max-width: 767px) {
	.cm-h2026-topbar-tel { display: none; }
	.cm-h2026-topbar-inner { justify-content: center; }
	/* v1.0.36 : padding 0 16 → 0 12 (–4px chaque côté = +8px espace pour logo + actions). */
	/* Height 64px preserved strict (contrainte user « le header doit pas etre plus haut »). */
	.cm-h2026-main-inner { height: 64px; padding: 0 12px; min-width: 0; position: relative; }
	/* v1.0.49 (2026-08-31 05h45) : compaction du header sticky au scroll sur mobile. */
	/* Variante « Compact equilibre » validee par le user sur docs/demo-header-sticky-mobile-v1049.html. */
	/* 64 → 52px, soit -12px de hauteur recuperee des que le mini-header brun disparait. */
	/* Le logo passe deja a 36px via la regle globale `.cm-h2026.is-scrolled .cm-h2026-logo-img`, */
	/* donc (52 - 36) / 2 = 8px de respiration au-dessus et en dessous : le logo reste centre */
	/* verticalement sans intervention (le conteneur est en flex align-items: center et le logo */
	/* en position absolute top: 50% depuis la v1.0.37). */
	/* L'animation est deja assuree par la `transition: height .25s ease` posee sur */
	/* `.cm-h2026-main-inner` et sur `.cm-h2026-logo-img` : les deux hauteurs s'interpolent ensemble. */
	/* Specificite (0,2,0) identique a la regle globale mais declaree plus bas dans la feuille, */
	/* donc elle gagne sans `!important` (regle §7.1 specificite CSS). */
	.cm-h2026.is-scrolled .cm-h2026-main-inner { height: 52px; }
	/* v1.0.37 (2026-08-30 23h55) : centrage strict logo au centre viewport via position absolute. */
	/* Sort du flow flex pour ignorer l'asymétrie burger (36px) vs actions (132px). */
	/* Contrainte user « sans retrice ou deplacer les item » : logo garde ses dimensions (48px height, */
	/* 160px max-width), burger et actions inchangés. */
	.cm-h2026-logo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		flex: 0 0 auto;
		z-index: 1;
		padding: 0;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.cm-h2026-logo-img { max-width: 160px; }
	.cm-h2026-logo-text { font-size: 22px; }
	/* v1.0.37 : burger + actions z-index: 2 pour rester cliquables si logo dépasse (viewports 375-390px). */
	.cm-h2026-burger { position: relative; z-index: 2; }
	.cm-h2026-actions { position: relative; z-index: 2; margin-left: auto; gap: 0; }
	/* v1.0.39 : la loupe rejoint le burger à gauche. Le bloc actions droite ne contient plus que */
	/* compte + panier, ce qui libère la largeur nécessaire pour revenir à des boutons 44x44 confortables. */
	/* Le gap 2px ne s'applique qu'entre burger et loupe (logo absolute hors flow, nav masquée, */
	/* actions poussé à droite par margin-left: auto). */
	.cm-h2026-main-inner { gap: 2px; }
	/* v1.0.40 : spécificité (0,2,0) alignée sur la règle de base pour rester déterministe. */
	.cm-h2026-action.cm-h2026-search-btn--desktop { display: none; }
	.cm-h2026-action.cm-h2026-search-btn--mobile { display: inline-flex; position: relative; z-index: 2; }
	.cm-h2026-search-overlay { padding: 20px; }
	.cm-h2026-search-input { font-size: 16px; }
	/* v1.0.39 : retour à 44x44 padding 11px (annule le resserrement v1.0.38 devenu inutile). */
	.cm-h2026-action { width: 44px; height: 44px; padding: 11px; }
	/* v1.0.36 : SVG icônes 20 → 22px (signal visuel plus fort, WCAG 2.1 SC 1.4.11 Non-text Contrast). */
	.cm-h2026-action svg { width: 22px; height: 22px; }
	/* NOTE v1.0.24 : le fix CSS drapeau Linguise mobile v1.0.23 (repositionne top-right + size 24x24) */
	/* a ete deplace vers le mu-plugin dedie `cafemalin-linguise-mobile-fix.php` v1.0.0 pour appliquer */
	/* le fix site-wide (l'ancien header XStore rendu en production a le meme bug). Ce plugin */
	/* `cafemalin-menu-2026.php` n'etant actif qu'en isolation mode `?cm_menu_2026=1`, la CSS Linguise */
	/* ne peut pas y rester (sinon on continue de voir le bug sur cafemalin.com/ en production). */
}

/* v1.0.26 (2026-08-30 19h58) — Fix overflow horizontal small viewports (280-360px) */
/* Feedback user : "le nvx menu... tu peu glisser vers la gauche ensuite ya un espace blanc a droite" */
/* Root cause : .cm-h2026-main-inner = padding 32px + burger 40px + logo max 180px + actions 3x36 = 360px min */
/* Fix : compression paddings/sizes + max-width logo pour tenir dans 280px viewport (iPhone 4/5, Galaxy Fold plie) */
@media (max-width: 360px) {
	.cm-h2026-main-inner { padding: 0 8px; }
	.cm-h2026-burger { width: 36px; height: 36px; padding: 6px; }
	.cm-h2026-logo-img { max-width: 110px; height: 40px; }
	.cm-h2026.is-scrolled .cm-h2026-logo-img { height: 32px; }
	/* v1.0.49 : compaction alignee sur le logo plus petit de ce breakpoint. */
	/* Le logo scrolled fait 32px ici (contre 36px au-dessus de 360px), donc 48px de hauteur */
	/* conserve exactement les memes 8px de respiration haut et bas que la variante 52 / 36. */
	.cm-h2026.is-scrolled .cm-h2026-main-inner { height: 48px; }
	/* v1.0.39 : retour à 32x32 padding 6px (annule le resserrement v1.0.38 devenu inutile). */
	.cm-h2026-action { width: 32px; height: 32px; padding: 6px; }
	.cm-h2026-action svg { width: 18px; height: 18px; }
	.cm-h2026-cart-badge { top: 2px; right: 2px; font-size: 9px; min-width: 14px; height: 14px; line-height: 14px; }
	.cm-h2026-topbar-inner { padding: 0 8px; font-size: 10px; }
	.cm-h2026-topbar-item { font-size: 10px; }
}

/* Body scroll lock when mobile panel or search open */
body.cm-h2026-locked { overflow: hidden; }

/* ============================================================
 * MINI-CART NATIF XSTORE (v1.0.42)
 * Le bloc .et_b_header-cart du theme est deplace en JS a la racine du <body>
 * (classe .cm-h2026-native-cart) pour echapper au kill-switch qui masque
 * .header-main-wrapper / .mobile-header-wrapper. Zero restyle : le panneau
 * .et-mini-content conserve 100 % du CSS XStore d'origine.
 * ============================================================ */
body.cm-menu-2026-active .cm-h2026-native-cart {
	display: block !important;
	visibility: visible !important;
	pointer-events: auto !important;
}
/* Declencheur + compteur natifs masques : nos icones panier 2026 les remplacent. */
body.cm-menu-2026-active .cm-h2026-native-cart > a.et-toggle,
body.cm-menu-2026-active .cm-h2026-native-cart > .et-cart-quantity {
	display: none !important;
}
/* v1.0.44 : reprise des regles Additional CSS du user devenues inoperantes.
 * Elles etaient scopees sur un ancetre (.header-wrapper / .mobile-header-wrapper)
 * que le bloc panier a quitte en etant deplace dans <body>. On les re-scope sur
 * .cm-h2026-native-cart pour retrouver un rendu identique a l'ancien header. */
body.cm-menu-2026-active .cm-h2026-native-cart .et-mini-content .et-quantity {
	background-color: #e1e1e1;
	color: #fff !important;
}
/* Le padding lateral 10px n'existait que sur le panneau du header mobile XStore
 * (visible sous 992px). On reproduit ce seuil pour ne pas l'appliquer en desktop. */
@media (max-width: 991px) {
	body.cm-menu-2026-active .cm-h2026-native-cart.et_element-top-level .et-mini-content {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}
/* Accessibility focus */
.cm-h2026-nav-link:focus-visible,
.cm-h2026-action:focus-visible,
.cm-h2026-burger:focus-visible,
.cm-h2026-mobile-item:focus-visible,
.cm-h2026-mobile-close:focus-visible,
.cm-h2026-mobile-back:focus-visible,
.mega-col a:focus-visible,
.mega-viewall:focus-visible,
.feat-card:focus-visible,
.mega-art-link:focus-visible {
	outline: 2px solid #8a6c2d;
	outline-offset: 2px;
}