/* UN Megamenu — taxonomy-driven Elementor widget.
 *
 * Layout is driven entirely by CSS container queries on the menu's OWN width
 * (via the `.un-megamenu-shell` wrapper), never the viewport — and independently
 * of the widget's display_mode. Wherever The7 puts the menu it adapts:
 *   • wide container  (full-width "Shop" panel)        → everything expanded, multi-column
 *   • narrow container (off-canvas drawer: phone/tablet) → stacked tap-accordion
 * No hover anywhere — opening is click/tap only (see un-megamenu.js). */

.un-megamenu-shell {
	container-type: inline-size;
	container-name: un-mm;
	width: 100%;
}

.un-megamenu {
	--un-mm-panel-width: 280px;
	--un-mm-panel-radius: 6px;
	--un-mm-z-panel: 1000;
	/* Default = accordion (narrow-first). Flipped to 0 in the wide container query.
	   un-megamenu.js reads this to decide whether a phase click toggles or navigates. */
	--un-mm-accordion: 1;
	position: relative;
	width: 100%;
}

.un-megamenu ul,
.un-megamenu ol,
.un-megamenu li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.un-megamenu li::before,
.un-megamenu li::marker {
	content: none !important;
	display: none !important;
}

/* ----------------------------------------------------------------- */
/* Default layout = stacked tap-accordion (mode-agnostic).            */
/* Applies to every .un-megamenu until a wide container overrides it. */
/* ----------------------------------------------------------------- */

.un-megamenu__list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.un-megamenu__top {
	position: relative;
	border-bottom: 1px solid var(--un-divider, #916F735C);
}

.un-megamenu__top > a,
.un-megamenu__top > button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	gap: 6px;
	padding: 12px 8px;
	color: inherit;
	text-decoration: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	transition: color 120ms ease, background-color 120ms ease;
}

/* Group separator between the categories and the merged site-nav group.
   Hidden in the wide expanded layout (see the min-width container query). */
.un-megamenu__group-sep {
	height: 0;
	margin: 6px 0;
	border-top: 1px solid var( --un-divider, #916F735C );
}

/* Drill-down back header — rendered in every panel, shown only in the narrow
   drill-down layout (see the max-width container query). */
.un-megamenu__back {
	display: none;
}

.un-megamenu__chevron {
	display: inline-block;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-left: 14px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	margin-top: -3px;
	color: var( --un-rose-link, #916F738F );
	transition: transform 160ms ease;
}

.un-megamenu__top.is-open > a .un-megamenu__chevron,
.un-megamenu__top.is-open > button .un-megamenu__chevron {
	transform: rotate( -135deg );
	margin-top: 3px;
}

/* Accordion panel: collapses smoothly via grid-template-rows 0fr → 1fr.
   The inner sublist carries the padding so a closed panel is truly 0-height.
   `visibility: hidden` while closed is a belt-and-suspenders guard: on engines
   where the 0fr track resolves to a few residual pixels, it keeps the first
   sub-item from peeking out below the closed row. */
.un-megamenu__panel {
	position: static;
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	min-width: 0;
	visibility: hidden;
	transition: grid-template-rows 200ms ease, visibility 0s linear 200ms;
}

.un-megamenu__top.is-open > .un-megamenu__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 200ms ease, visibility 0s;
}

.un-megamenu__panel > .un-megamenu__sublist {
	min-height: 0;
	overflow: hidden;
}

/* `.un-megamenu .` prefix lifts specificity above the list reset
   (`.un-megamenu ul { padding: 0 }`), which would otherwise flatten the
   left indent and pull sub-items out of line with the top-level labels. */
.un-megamenu .un-megamenu__sublist {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 2px 0 12px 16px;
}

.un-megamenu__sublist a {
	display: block;
	padding: 6px 0;
	color: inherit;
	text-decoration: none;
	transition: color 120ms ease;
}

.un-megamenu__sublist a:hover {
	text-decoration: underline;
}

/* Current page: the menu link matching the URL we're on (set by un-megamenu.js,
   any level, both layouts) reads in brand rose. The doubled list class lifts
   specificity above the panel-link colour Elementor control. */
.un-megamenu .un-megamenu__list a.is-current {
	color: var( --un-rose, #916F73 );
}

.un-megamenu__view-all {
	margin-top: 8px;
	padding-top: 8px;
}

/* "Tout voir" reads like a normal sub-item (weight inherited from the sublist),
   with a right-pointing chevron matching the drillable rows. Flex row so the
   chevron right-aligns even in the in-place accordion layout. */
.un-megamenu__view-all a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

/* The view-all chevron never toggles a panel, so it always points right (›)
   regardless of layout — the base chevron otherwise points down (⌄). */
.un-megamenu__view-all .un-megamenu__chevron {
	transform: rotate( -45deg );
	margin-top: 0;
}

/* ----------------------------------------------------------------- */
/* Wide container → "tout déplié": all sub-cats visible, multi-column. */
/* Mode-agnostic, so the desktop look is correct no matter which       */
/* instance The7 shows. Layout is native CSS multi-column balancing:    */
/* `column-width` sets a target so the column COUNT adapts to the panel  */
/* width (more/narrower when wide, fewer when tight), `column-count`     */
/* caps it so very wide panels don't go sparse, and `break-inside:avoid` */
/* keeps each section whole — the browser balances heights, stacking     */
/* short sections (Finition, Soin…) together to minimise whitespace.     */
/* No forced breaks: the column box can never exceed the panel width.    */
/* ----------------------------------------------------------------- */

@container un-mm (min-width: 641px) {
	.un-megamenu {
		--un-mm-accordion: 0;
	}

	.un-megamenu__list {
		display: block;
		column-width: var( --un-mm-col-min, 220px );
		column-count: var( --un-mm-expanded-cols, 6 );
		column-gap: 40px;
	}

	.un-megamenu__top {
		display: block;
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		margin-bottom: 28px;
		border-bottom: 0;
	}

	.un-megamenu__top > a,
	.un-megamenu__top > button {
		display: block;
		width: auto;
		padding: 0 0 8px 0;
		font-weight: 600;
		border-bottom: 1px solid var(--un-divider, #916F735C);
		white-space: normal;
	}

	.un-megamenu__chevron {
		display: none;
	}

	/* The merged-group separator only makes sense in the stacked layouts. */
	.un-megamenu__group-sep {
		display: none;
	}

	/* Panel is always-open inline content here.
	   `visibility: inherit` (not `visible`) is deliberate: if a parent hides the
	   menu (e.g. a collapsed The7 sub-nav) we must not override that and leave
	   invisible-but-clickable ghost links. */
	.un-megamenu__panel {
		display: block;
		grid-template-rows: none;
		overflow: visible;
		opacity: 1;
		visibility: inherit;
		transition: none;
	}

	.un-megamenu .un-megamenu__sublist {
		padding: 16px;
		gap: 4px;
	}

	.un-megamenu__sublist a {
		padding: 4px 0;
		font-weight: 400;
	}

	/* Nested sub-group inside a column (e.g. Couleurs → Gels → Color Gel): the
	   intermediate category reads as a sub-heading and its items sit indented
	   beneath it. Without this the sub-heading looks like a plain leaf link and
	   the groups run together (no air between Gels and Vernis semi-permanent). */
	.un-megamenu__sublist .has-panel > a {
		font-weight: 600;
		padding: 4px 0;
	}

	/* Drop the column sub-list's 16px box padding inherited by the nested list;
	   keep a small left indent for the hierarchy. */
	.un-megamenu__sublist .has-panel > .un-megamenu__panel > .un-megamenu__sublist {
		padding: 2px 0 2px 14px;
	}

	/* Air between consecutive sub-groups (Gels / Vernis semi-permanent). */
	.un-megamenu__sublist .has-panel + .has-panel {
		margin-top: 12px;
	}

	.un-megamenu__view-all {
		margin-top: 8px;
		padding-top: 8px;
	}
}

/* ----------------------------------------------------------------- */
/* Narrow container + drill-down: each panel is a full-screen sub-page. */
/* Tapping a category replaces the level-0 list with its sub-cats (a    */
/* back header returns). Opt-in via `.un-megamenu--drilldown` so default */
/* instances keep the in-place accordion. Never applies in the wide     */
/* container (scoped to max-width 640px, mirror of the 641px boundary).  */
/* ----------------------------------------------------------------- */

@container un-mm (max-width: 640px) {
	.un-megamenu--drilldown {
		/* un-megamenu.js reads this to switch from toggle to drill navigation. */
		--un-mm-drilldown: 1;
	}

	/* Level-0 chevron is a "go deeper" affordance → points right (›). */
	.un-megamenu--drilldown .un-megamenu__chevron,
	.un-megamenu--drilldown .un-megamenu__top.is-open > a .un-megamenu__chevron {
		transform: rotate( -45deg );
		margin-top: 0;
	}

	/* Panels are hidden sub-pages; the accordion grid collapse is reset. Visibility
	   is `inherit`, NOT `visible` (mirrors the wide-panel rule): a drilled panel is
	   display:block, and `visibility: visible` would override an ancestor that hides
	   the whole menu (The7 collapses the closed desktop Shop mega with
	   visibility:hidden) — leaving invisible-but-clickable ghost links. Inheriting
	   keeps display:none/block as the only per-panel gate while still honouring an
	   ancestor that hides the entire menu. */
	.un-megamenu--drilldown .un-megamenu__panel {
		display: none;
		position: static;
		grid-template-rows: none;
		overflow: visible;
		visibility: inherit;
		transition: none;
	}

	/* No top padding: the 4px of air below a back header comes from the back
	   header's own margin. Any top padding here would compound once per nested
	   level, so a deeper back header would sit lower than a shallower one. */
	.un-megamenu--drilldown .un-megamenu__sublist {
		padding: 0 8px 14px;
	}

	/* The accordion collapse clips the sublist (overflow:hidden, un-megamenu.css
	   §panel), but in drill-down the panel is display:none/block — no collapse to
	   clip — and that overflow would otherwise clip a nested row's absolutely
	   positioned chevron / back arrow at the box edge. */
	.un-megamenu--drilldown .un-megamenu__panel > .un-megamenu__sublist {
		overflow: visible;
	}

	/* Rows sit flush (no grid gap): spacing comes only from the fixed row box
	   below, so every level has the same pitch on every engine. */
	.un-megamenu--drilldown .un-megamenu__sublist {
		gap: 0;
	}

	/* Flatten the nested indentation. The drawer is an Elementor popup, whose
	   `.elementor-popup-modal ul:not(.vertical-sub-nav)` (specificity 0,2,1) adds
	   margin-left to EVERY list — which, with the nested panels, cascades further
	   right at each level. Drill-down shows one level at a time, so reset all
	   structural horizontal spacing (the .un-megamenu doubled-class prefix gives
	   0,3,0 to outweigh the popup rule) and put one uniform inset on the rows. */
	.un-megamenu.un-megamenu--drilldown .un-megamenu__list,
	.un-megamenu.un-megamenu--drilldown .un-megamenu__sublist,
	.un-megamenu.un-megamenu--drilldown .un-megamenu__panel,
	.un-megamenu.un-megamenu--drilldown .un-megamenu__top,
	.un-megamenu.un-megamenu--drilldown .un-megamenu__sublist > li {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	/* One deterministic row box for EVERY drill-down row (top links, sub-links,
	   "Voir tout", back header). Height comes from min-height alone — vertical
	   padding is 0 and line-height fixed — so it can't drift with platform font
	   metrics (Android vs iOS) or theme/popup paddings. Chevrons are absolutely
	   positioned (see below) and never take part in the line box; padding-right
	   reserves their lane.
	   Geometry: column edge x=0 → top-level labels and the back arrow; one 16px
	   step → back-header title and its items (the title lines up with its items);
	   right edge = separators = chevron tips. */
	.un-megamenu.un-megamenu--drilldown .un-megamenu__list a,
	.un-megamenu.un-megamenu--drilldown .un-megamenu__back {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		min-height: 46px;
		box-sizing: border-box;
		margin: 0;
		padding: 0 24px 0 16px;
		line-height: 1.3;
	}

	/* Top-level rows: flush at the column edge (aligned with the "Menu" header
	   above the widget). !important is required: an Elementor per-item padding
	   control ({{WRAPPER}} .un-megamenu__top > a) is generated at equal
	   specificity but LATER source order and would otherwise keep its desktop
	   inset in the drawer. */
	.un-megamenu.un-megamenu--drilldown .un-megamenu__list .un-megamenu__top > a {
		padding: 0 24px 0 0 !important;
	}

	/* Chevron out of flow, vertically centred, tip on the shared right edge
	   (an 8px square rotated 45° pokes ~1.7px past its box, hence right: 2px). */
	.un-megamenu.un-megamenu--drilldown .un-megamenu__chevron,
	.un-megamenu.un-megamenu--drilldown .un-megamenu__top.is-open > a .un-megamenu__chevron {
		position: absolute;
		top: 50%;
		right: 2px;
		margin: 0;
		transform: translateY( -50% ) rotate( -45deg );
	}

	/* "Voir tout": highlighted in brand rose + italic, a direct way into the
	   section (tapping its name drills instead of navigating). No separator,
	   no extra offset — same row box as its siblings. */
	.un-megamenu.un-megamenu--drilldown .un-megamenu__view-all {
		margin: 0;
		padding: 0;
	}

	.un-megamenu.un-megamenu--drilldown .un-megamenu__list .un-megamenu__view-all > a {
		color: var( --un-rose, #916F73 );
		font-style: italic;
	}

	/* Uniform row separators for EVERY drill-down level — top-level items AND the
	   sub-lists inside Shop &co. Drawn as an inset ::after (a plain border-bottom
	   can't set its own left start) tinted with the rose divider token, ending on
	   the shared right edge (= chevron tips). Suppressed on the open row (its trigger is swapped for the panel's back
	   header, so its own separator would strand a line under the whole sub-page)
	   and on the "view all" CTA. */
	.un-megamenu--drilldown .un-megamenu__top,
	.un-megamenu--drilldown .un-megamenu__sublist > li {
		position: relative;
		border-bottom: 0;
	}

	.un-megamenu--drilldown .un-megamenu__top:not( .is-open )::after,
	.un-megamenu--drilldown .un-megamenu__sublist > li:not( .is-open ):not( .un-megamenu__view-all )::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		border-bottom: 1px solid var( --un-divider, #916F735C );
	}

	/* Sub-item separators start at the indented text edge (matching the 16px child
	   inset above) so each rule lines up under its own label, not the drawer edge. */
	.un-megamenu--drilldown .un-megamenu__sublist > li:not( .is-open ):not( .un-megamenu__view-all )::after {
		left: 16px;
	}

	/* Drilled state, ANY depth: within a list that holds an open drillable child,
	   hide the non-open siblings (and any group separator) so only the active
	   branch remains. Each ancestor list keeps its own open child visible while
	   hiding the rest, so this one rule covers nav → categories → sub-categories. */
	.un-megamenu--drilldown ul:has( > .has-panel.is-open ) > li:not( .is-open ) {
		display: none;
	}

	/* The open item's own trigger link is replaced by the panel's back header. */
	.un-megamenu--drilldown .has-panel.is-open > a {
		display: none;
	}

	/* Reveal the active panel (any level) with the slide-in. */
	.un-megamenu--drilldown .has-panel.is-open > .un-megamenu__panel {
		display: block;
		animation: un-mm-drill-in 240ms ease;
	}

	/* Drilled deeper: hide an ancestor panel's own back header so only the
	   deepest open level shows its "‹ back" row (no stacked back headers). */
	.un-megamenu--drilldown .un-megamenu__panel:has( .has-panel.is-open ) > .un-megamenu__back {
		display: none;
	}

	/* Going back up: the view that re-appears replays the slide in reverse
	   (mirror of un-mm-drill-in), set transiently by un-megamenu.js — both the
	   sibling list AND the back header of the level we land on, so the whole
	   panel returns as one unit like it arrived. */
	.un-megamenu--drilldown ul.is-returning,
	.un-megamenu--drilldown .un-megamenu__back.is-returning {
		animation: un-mm-drill-back 240ms ease;
	}

	/* Back header: same row box as the list rows (see above) so the parent label
	   keeps its vertical position when it turns into this header on drill. The
	   arrow sits INSIDE the column at x=0 (no gutter hack: a negative offset got
	   clipped or hung outside the drawer), the title one step in, aligned with
	   its items. No separator, just a bit of air before the item list. */
	.un-megamenu.un-megamenu--drilldown .un-megamenu__back {
		width: 100%;
		margin: 0 0 4px;
		background: transparent;
		border: 0;
		color: inherit;
		font: inherit;
		font-weight: 600;
		line-height: 1.3; /* after `font` shorthand, which resets it */
		text-align: left;
		cursor: pointer;
	}

	.un-megamenu--drilldown .un-megamenu__back-icon {
		position: absolute;
		left: 2px;
		top: 50%;
		width: 8px;
		height: 8px;
		border-left: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY( -50% ) rotate( 45deg );
		color: var( --un-rose-link, #916F738F );
	}
}

@keyframes un-mm-drill-in {
	from { transform: translateX( 16px ); opacity: 0; }
	to   { transform: translateX( 0 ); opacity: 1; }
}

@keyframes un-mm-drill-back {
	from { transform: translateX( -16px ); opacity: 0; }
	to   { transform: translateX( 0 ); opacity: 1; }
}

/* Editor preview: force panels hidden so they never ghost over the editor canvas. */
.un-megamenu.un-mm-editor-mode .un-megamenu__panel {
	display: none !important;
}

/* -----------------------------------------------------------------------------
 * The7 Elementor mega-menu host — diagonal-path hover bridge.
 *
 * The "Shop" trigger is a The7 Elementor mega menu (.the7-e-mega-menu) that hosts
 * this widget as its panel content. The7 keeps the panel open while the pointer is
 * inside the trigger <li> subtree (the panel is a DOM child of the <li>), and
 * closes it the instant the pointer leaves — no delay. The trigger <li> is only as
 * wide as the word "Shop" (~60px), but the menu bar has ~23px of bottom padding
 * BELOW the link text before the full-width panel begins. That padding band is
 * the dead zone: moving diagonally toward a column, the pointer crosses it while
 * drifting left/right out of the narrow <li> column — landing over a sibling item
 * (Home / A propos) or bare bar — so pointer-leave fires and the menu closes
 * before the cursor reaches the panel. The classic mega-menu "diagonal problem",
 * and no close-delay fixes it (pausing in the band just defers the same close).
 *
 * Fix (pure CSS, no JS, no fighting The7): a transparent hover bridge that fills
 * that dead band, full bar width, as the panel's own ::before — so it counts as
 * the trigger subtree and the pointer never "leaves". `bottom: 100%` anchors it
 * right above the panel (robust to sticky-header shrink); 22px clears the band
 * while staying just below the link text (links bottom out 1px above it), so it
 * steals no clicks. It only hit-tests when the panel is open (closed = the sub-nav
 * is visibility:hidden, pseudo included). Declared full width, but the centered
 * logo and right-hand icons stack above it and stay clickable — the bridge only
 * "wins" across the left nav corridor, which is exactly the diagonal's path.
 * Scoped with :has(.un-megamenu) so no other The7 mega menu is touched. The
 * sub-nav is overflow:visible already, so the upward pseudo isn't clipped. */
.the7-e-mega-menu:has(.un-megamenu) > .the7-e-sub-nav.the7-e-mega-menu-sub-nav::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 22px;
}