/* ==========================================================================
   UN Panes — grid of content panes (widget: UN Pane Grid)

   One layer, no strata. Everything here is opinionated: position, padding,
   type scale, tag placement and gradient stops have no per-pane control.
   The only inline values a pane emits are its image framing and, when the
   overlay theme is "custom", its scrim and ink colours.

   Colour model — three scrim steps and one ink, all resolved from the theme:
     --un-pane-scrim-rgb   the ramp's base triplet, flipped by the light theme
     --un-pane-scrim-soft/-mid/-strong   the only three alphas in this file
     --un-pane-ink         text colour over the scrim
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */
.un-pane-grid {
	display: grid;
	/* Fallback only — the widget emits a scoped <style> with the real per-band
	   column count and every pane's already-clamped span. `grid-column: span N`
	   does not clamp itself, so that has to be baked in per band. */
	grid-template-columns: repeat(6, minmax(0, 1fr));
	/* Fluid row floor: caps at 200px on wide screens, scales down on narrow
	   viewports so tiles stop being blocky. */
	grid-auto-rows: minmax(var(--un-row-min, clamp(140px, 22vw, 200px)), auto);
	grid-auto-flow: dense; /* fill holes left by panes clamped to fewer columns */
	gap: var(--un-gap, 15px);
	width: 100%;
	box-sizing: border-box;
}

.un-pane-grid-item {
	min-width: 0; /* prevent grid blowout when content is wider than the cell */
}

/* --------------------------------------------------------------------------
   Editor-only affordances.

   These live in the FRONT stylesheet on purpose: they render inside Elementor's
   preview iframe, which loads the widget's get_style_depends() — not
   un-pane-editor.css, which is enqueued in the outer panel.
   -------------------------------------------------------------------------- */
.un-pane-grid-empty {
	grid-column: 1 / -1;
	padding: 40px;
	text-align: center;
	background: var(--un-bg-soft);
	border: 2px dashed var(--un-border-strong);
	color: var(--un-text-2);
	font-size: var(--un-fs-s);
}

.un-pane-editor-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 100%;
	background: var(--un-bg-soft);
	border: 2px dashed var(--un-border-strong);
	color: var(--un-text-2);
	font-family: var(--un-font-body);
}

.un-pane-editor-label { font-weight: 600; font-size: var(--un-fs-m); }
.un-pane-editor-span  { font-size: var(--un-fs-xs); }

/* --------------------------------------------------------------------------
   Pane shell + theme tokens
   -------------------------------------------------------------------------- */
.un-pane-inner {
	position: relative;
	width: 100%;
	/* Fill the grid cell and grow with content. No fixed px height — that was
	   the source of blocky, over-tall tiles. */
	min-height: 100%;
	overflow: hidden;
	display: block;
	/* A pane is a grid cell, not the page. Anything big enough to overflow it —
	   the hero type, the hero padding, the sale percentage — sizes in `cqw`
	   (1% of THIS pane's width), never `vw`, so the same hero reads correctly in
	   a 2-column cell and full-width with no breakpoint. Values clamped between
	   two theme tokens keep `vw`: they cannot overflow anything. */
	container-type: inline-size;

	/* ---- Fonts ---- */
	--un-pane-font-display: var(--un-font-display);
	--un-pane-font-body:    var(--un-font-body);

	/* ---- Type scale, anchored to the theme tokens ---- */
	--un-pane-title-size:     clamp(var(--un-h6), 1.3vw, var(--un-h5));
	--un-pane-title-weight:   700;
	--un-pane-title-tracking: -.01em;
	--un-pane-title-line:     1.18;

	--un-pane-desc-size:    clamp(var(--un-fs-s), 1vw, var(--un-fs-l));
	--un-pane-desc-line:    1.5;
	--un-pane-desc-max:     38ch;
	--un-pane-desc-opacity: .82;

	--un-pane-pill-size:     var(--un-fs-xs);
	--un-pane-pill-tracking: .24em;

	--un-pane-price-size:   clamp(var(--un-fs-m), 1.2vw, var(--un-fs-xl));

	--un-pane-text-shadow: 0 1px 14px var(--un-pane-scrim-mid);
}

/* Scrim ramp + ink. Declared on BOTH the slide and the slideshow wrapper: the
   dots and arrows are siblings of the slides, not descendants, so tokens set on
   .un-pane-inner alone never reach them — custom properties inherit downwards,
   never sideways. Dark is the default; the light theme flips the triplet. */
.un-pane-inner,
.un-pane-slides {
	--un-pane-scrim-rgb:    0, 0, 0;
	--un-pane-ink:          var(--un-white);
	--un-pane-scrim-soft:   rgba(var(--un-pane-scrim-rgb), .18);
	--un-pane-scrim-mid:    rgba(var(--un-pane-scrim-rgb), .40);
	--un-pane-scrim-strong: rgba(var(--un-pane-scrim-rgb), .65);
}

.un-pane-inner[data-overlay-theme="light"],
.un-pane-slides[data-overlay-theme="light"] {
	--un-pane-scrim-rgb: 255, 255, 255;
	--un-pane-ink: var(--un-black);
}

/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */
.un-pane-media-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.un-pane-media-wrap .un-pane-img,
.un-pane-media-wrap .un-pane-video {
	/* +1px each side avoids a hairline gap at certain widths from subpixel
	   rounding of width:100%. The wrap clips it, so it is never visible.
	   !important fights Elementor and The7's img { height: auto }. */
	width: calc(100% + 2px) !important;
	height: calc(100% + 2px) !important;
	margin: -1px;
	object-fit: var(--un-pane-img-fit, cover) !important;
	object-position: var(--un-pane-img-pos, center center);
	display: block;
}

/* The anchor must fill the media slot so the whole picture is clickable. */
.un-pane-media-wrap .un-pane-img-link {
	display: block;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   Étiquette — frosted glass pill, always top-left
   -------------------------------------------------------------------------- */
.un-pane-type-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	padding: .8em 1.6em;
	background: var(--un-pane-scrim-mid);
	-webkit-backdrop-filter: blur(14px) saturate(.9);
	backdrop-filter: blur(14px) saturate(.9);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--un-radius);
	color: var(--un-pane-ink);
	font-family: var(--un-pane-font-body);
	font-size: var(--un-pane-pill-size);
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--un-pane-pill-tracking);
	text-shadow: 0 1px 6px var(--un-pane-scrim-mid);
	pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.un-pane-type-tag { background: var(--un-pane-scrim-strong); }
}

/* --------------------------------------------------------------------------
   Bottom overlay — text at the BOTTOM of the box.

   The generous top padding IS the fade zone: the gradient stays dense over the
   lower band where text lives, then clears quickly so the image reads above it.
   The box auto-sizes from its content, so an image-only pane renders no overlay
   at all and the picture is fully preserved.
   -------------------------------------------------------------------------- */
.un-pane-overlay--bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: clamp(40px, 5vh, 70px) clamp(14px, 1.8vw, 24px) clamp(14px, 1.6vw, 22px);
	color: var(--un-pane-ink);
}

.un-pane-overlay--bottom[data-overlay="gradient-bottom"] {
	background: linear-gradient(to top,
		var(--un-pane-scrim-strong) 0%,
		var(--un-pane-scrim-mid) 55%,
		var(--un-pane-scrim-soft) 85%,
		rgba(var(--un-pane-scrim-rgb), 0) 100%);
}

.un-pane-inner[data-overlay-theme="custom"] .un-pane-overlay--bottom[data-overlay="gradient-bottom"] {
	background: linear-gradient(to top, var(--un-pane-scrim, rgba(0, 0, 0, .6)) 0%, transparent 92%);
}

/* ---- Title ---- */
.un-pane-title {
	margin: 0;
	font-family: var(--un-pane-font-display);
	font-size: var(--un-pane-title-size);
	font-weight: var(--un-pane-title-weight);
	letter-spacing: var(--un-pane-title-tracking);
	line-height: var(--un-pane-title-line);
	color: var(--un-pane-ink);
	text-shadow: var(--un-pane-text-shadow);
}

.un-pane-title a { color: inherit; text-decoration: none; }
.un-pane-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
}

/* ---- Description ---- */
.un-pane-desc {
	margin: 0;
	font-family: var(--un-pane-font-body);
	font-size: var(--un-pane-desc-size);
	font-weight: 400;
	line-height: var(--un-pane-desc-line);
	max-width: var(--un-pane-desc-max);
	opacity: var(--un-pane-desc-opacity);
	color: var(--un-pane-ink);
	text-shadow: var(--un-pane-text-shadow);
}

/* ---- Collection line (Look panes) ---- */
.un-pane-meta-line {
	margin: 0;
	font-family: var(--un-pane-font-body);
	font-size: var(--un-fs-xs);
	opacity: .85;
}
.un-pane-meta-line a { color: inherit; text-decoration: underline; }

/* ---- Price ---- */
.un-pane-price {
	margin: 0;
	font-family: var(--un-pane-font-display);
	font-size: var(--un-pane-price-size);
	font-weight: 700;
	color: var(--un-pane-ink);
	text-shadow: var(--un-pane-text-shadow);
}

/* A product price sits on the title's baseline, pushed right. */
.un-pane-title-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
}
.un-pane-title-row .un-pane-title { flex: 1 1 auto; min-width: 0; }
.un-pane-price--inline { flex: 0 0 auto; white-space: nowrap; }
.un-pane-price--inline del { opacity: .55; font-weight: 400; margin-right: .35em; }
.un-pane-price--inline ins { text-decoration: none; }

/* --------------------------------------------------------------------------
   Look pane — content left, author card bottom-right
   -------------------------------------------------------------------------- */
.un-pane-look-layout {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}

.un-pane-look-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Author card — floating, white. The avatar side is rounded (see layouts
   below) so the card hugs the round medal/avatar instead of boxing it. */
.un-pane-author-card {
	flex-shrink: 0;
	display: flex;
	overflow: hidden;
	background: var(--un-white);
	color: var(--un-black);
	box-shadow: var(--un-shadow-2);
}

.un-pane-author-card-img {
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.un-pane-author-card-meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

.un-pane-author-card-name {
	font-family: var(--un-pane-font-body);
	font-size: var(--un-fs-xs);
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
}

/* Horizontal — image left, meta right */
.un-pane-author-card--horizontal { flex-direction: row; align-items: stretch; border-radius: 999px 0 0 999px; }
.un-pane-author-card--horizontal .un-pane-author-card-img { width: 56px; height: 56px; }
.un-pane-author-card--horizontal .un-pane-author-card-meta { padding: 6px 10px; }

/* Vertical — image top, meta bottom */
.un-pane-author-card--vertical { flex-direction: column; width: 90px; border-radius: 999px 999px 0 0; }
.un-pane-author-card--vertical .un-pane-author-card-img { width: 100%; aspect-ratio: 1 / 1; height: auto; }
.un-pane-author-card--vertical .un-pane-author-card-meta { padding: 6px 8px; align-items: center; text-align: center; }
.un-pane-author-card--vertical .un-pane-author-rank { align-self: center; }

/* Rank pill — dark on the light card, compact. */
.un-pane-author-rank {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 4px;
	padding: 0 5px;
	background: var(--un-rose-bg);
	border: 1px solid var(--un-rose-divider);
	border-radius: 10px;
	color: var(--un-black);
	font-family: var(--un-pane-font-body);
	/* 8px rounded glyph advances to whole pixels (uneven gaps in "JUNIOR"):
	   10px + no tracking + unhinted rendering keeps the letters evenly spaced. */
	font-size: .625rem;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0;
	text-rendering: geometricPrecision;
	white-space: nowrap;
}

/* The medal caps the pill instead of floating inside it: drop the left padding
   so its circle is tangent to the left edge. :has() guards it — a pill with no
   tier art keeps its normal padding. */
.un-pane-author-rank:has(.un-rank-icon) { padding-left: 0; }
.un-pane-author-rank .un-rank-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

/* --------------------------------------------------------------------------
   Sale cascade — top-right
   -------------------------------------------------------------------------- */
.un-pane-sale-stack {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	text-align: right;
	color: var(--un-pane-ink);
	pointer-events: none;
	text-shadow: var(--un-pane-text-shadow);
}

.un-pane-sale-pct {
	font-family: var(--un-pane-font-display);
	font-weight: 900;
	font-size: clamp(1.6rem, 11cqw, 3.6rem);
	line-height: 1;
	letter-spacing: -.02em;
}

.un-pane-sale-prices {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: var(--un-pane-font-body);
	line-height: 1.2;
}

.un-pane-sale-regular {
	font-size: var(--un-fs-s);
	opacity: .55;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
.un-pane-sale-regular bdi { color: inherit; }

.un-pane-sale-final {
	font-size: var(--un-fs-l);
	font-weight: 700;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   About hero — full-bleed editorial block over an image or video

   The title stacks its lines with flex, so the lines must stay DIRECT children
   of .un-pane-title. Never wrap them in an anchor.
   -------------------------------------------------------------------------- */
.un-pane-overlay--hero {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: clamp(18px, 7cqw, 64px);
	color: var(--un-pane-ink);
	font-family: var(--un-pane-font-body);
	background: linear-gradient(to top, var(--un-pane-scrim-mid) 0%, rgba(var(--un-pane-scrim-rgb), 0) 75%);
	--un-hero-shadow: 0 1px 28px var(--un-pane-scrim-mid);
}

.un-pane-inner[data-overlay-theme="custom"] .un-pane-overlay--hero {
	background: linear-gradient(to top, var(--un-pane-scrim, rgba(0, 0, 0, .45)) 0%, transparent 80%);
}

.un-pane-overlay--hero[data-valign="top"]    { justify-content: flex-start; }
.un-pane-overlay--hero[data-valign="center"] { justify-content: center; }
.un-pane-overlay--hero[data-valign="bottom"] { justify-content: flex-end; }

.un-pane-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(14px, 2.2vh, 26px);
	max-width: 640px;
	width: 100%;
	text-align: left;
}

/* ---- Sur-titre: tracked uppercase text followed by a thin rule ---- */
.un-pane-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: clamp(12px, 1.4vw, 22px);
	font-family: var(--un-pane-font-display);
	font-weight: 500;
	font-size: clamp(var(--un-fs-xs), 4cqw, var(--un-fs-l));
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .22em;
	opacity: .9;
	text-shadow: var(--un-hero-shadow);
}

.un-eyebrow-text { display: inline-block; }

.un-eyebrow-rule {
	display: inline-block;
	width: clamp(32px, 12cqw, 110px);
	height: 1px;
	background: currentColor;
	opacity: .85;
	transform-origin: left center;
}

/* ---- Title ---- */
.un-pane-overlay--hero .un-pane-title {
	display: flex;
	flex-direction: column;
	gap: .04em;
	font-family: var(--un-pane-font-display);
	font-size: clamp(1.6rem, 14cqw, 5rem);
	font-weight: 800;
	line-height: .94;
	letter-spacing: -.02em;
	text-transform: uppercase;
	text-shadow: var(--un-hero-shadow);
}

/* Hierarchy by size + weight: the sur-titre reads lighter and smaller, the
   manchette carries the weight. */
.un-pane-overlay--hero .un-hero-line--kicker {
	font-weight: 400;
	font-size: .9em;
	letter-spacing: -.01em;
	opacity: .94;
}

.un-pane-overlay--hero .un-hero-line--main {
	font-weight: 800;
	font-size: 1.2em;
}

/* `*mot*` accent — italic in the title's own family, nudged on hover. */
.un-pane-overlay--hero .un-pane-title em {
	font-style: italic;
	font-weight: inherit;
	font-family: inherit;
	text-transform: inherit;
	display: inline-block;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.un-pane-overlay--hero:hover .un-pane-title em { transform: translateX(.18em); }

/* ---- Description ---- */
.un-pane-overlay--hero .un-pane-desc {
	font-family: var(--un-pane-font-display);
	font-size: clamp(var(--un-fs-s), 3.5cqw, var(--un-fs-l));
	line-height: 1.45;
	max-width: 24ch;
	opacity: .94;
	text-shadow: var(--un-hero-shadow);
}

/* ---- CTA — the charte's ghost button, size M ---- */
.un-pane-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 18px;
	background: transparent;
	border: 1px solid var(--un-pane-ink);
	border-radius: var(--un-radius);
	color: var(--un-pane-ink);
	font-family: var(--un-font-body);
	font-size: var(--un-fs-l);
	font-weight: 400;
	line-height: var(--un-lh-btn);
	text-decoration: none;
	text-shadow: var(--un-hero-shadow);
	transition: background-color .3s ease, color .3s ease;
}

.un-pane-cta:hover,
.un-pane-cta:focus-visible {
	background: var(--un-pane-ink);
	color: var(--un-black);
	text-shadow: none;
}

.un-pane-inner[data-overlay-theme="light"] .un-pane-cta:hover,
.un-pane-inner[data-overlay-theme="light"] .un-pane-cta:focus-visible {
	color: var(--un-white);
}

/* --------------------------------------------------------------------------
   Template Elementor — the escape hatch.

   The template owns the whole cell: no scrim, no étiquette, no overlay. All we
   provide is the box and the scaling. The inner block is composed at its
   reference width and zoomed to the cell by assets/js/un-pane-template.js;
   until that runs, `width: 100%` keeps it sane rather than collapsed.
   -------------------------------------------------------------------------- */
.un-pane-template {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	/* Fit the width, centre what's left vertically. A template composed for a
	   different shape leaves transparent space rather than stretching. */
	justify-content: center;
	overflow: hidden;
}

.un-pane-template__inner {
	width: 100%;
}

/* Editor-only, when a template can't render. */
.un-pane-template-notice {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	background: var(--un-bg-soft);
	border: 2px dashed var(--un-border-strong);
	color: var(--un-text-2);
	font-family: var(--un-font-body);
	font-size: var(--un-fs-s);
}

/* --------------------------------------------------------------------------
   Slideshow — several items cycling inside one cell.

   The wrapper owns the box; the slides stack on top of each other and only the
   active one is opaque. The active state is a CLASS, never `display`, so a
   slide can never end up hidden by a stylesheet rule that disagrees with the
   script — which is exactly how the Looks slideshow breaks when its active
   slide is not the first child.
   -------------------------------------------------------------------------- */
.un-pane-slides {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
}

.un-pane-slides > .un-pane-inner {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s cubic-bezier(.22, 1, .36, 1);
}

.un-pane-slides > .un-pane-inner.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

/* ---- Transition: glissement ---- */
.un-pane-slides[data-transition="slide"] > .un-pane-inner {
	transform: translateX(6%);
	transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}
.un-pane-slides[data-transition="slide"][data-direction="back"] > .un-pane-inner {
	transform: translateX(-6%);
}
.un-pane-slides[data-transition="slide"] > .un-pane-inner.is-active {
	transform: none;
}

/* ---- Transition: zoom lent (Ken Burns) ----
   The active slide keeps drifting for the whole time it is shown, so an image
   pane never looks frozen. The media moves, the text does not. */
.un-pane-slides[data-transition="zoom"] > .un-pane-inner .un-pane-media-wrap {
	transform: scale(1);
	transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.un-pane-slides[data-transition="zoom"] > .un-pane-inner.is-active .un-pane-media-wrap {
	animation: un-pane-kenburns 12s ease-out forwards;
}

@keyframes un-pane-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* ---- Chrome: same glass language as the étiquette, not the Looks chrome ---- */
.un-pane-slides__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 36px;
	height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--un-pane-scrim-mid);
	-webkit-backdrop-filter: blur(14px) saturate(.9);
	backdrop-filter: blur(14px) saturate(.9);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--un-radius);
	color: var(--un-pane-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s ease, background-color .25s ease;
}

.un-pane-slides:hover .un-pane-slides__arrow,
.un-pane-slides__arrow:focus-visible {
	opacity: 1;
}

/* No hover on a touch screen: the arrows would never show up. */
@media (hover: none) {
	.un-pane-slides__arrow { opacity: 1; }
}

.un-pane-slides__arrow--prev { left: 12px; }
.un-pane-slides__arrow--next { right: 12px; }

/* Bottom-right, inside the pane: the overlay text is left-aligned, so the right
   edge is the one corner that stays clear of it. Mirrors the étiquette's 14px
   inset on the opposite corner. */
.un-pane-slides__dots {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 4;
	display: flex;
	gap: 5px;
}

/* Squares, not circles — the brand radius is 0 everywhere else too. */
.un-pane-slides__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: var(--un-radius);
	background: var(--un-pane-ink);
	cursor: pointer;
	transition: background-color .25s ease;
}

/* The state reads on hue alone: plain white, brand rose for the current one.
   No opacity (white at 55% is just grey), no scaling, no shadow. */
.un-pane-slides__dot.is-active {
	background: var(--un-rose);
}

@media (prefers-reduced-motion: reduce) {
	.un-pane-slides > .un-pane-inner {
		transition: none;
		transform: none;
	}
	.un-pane-slides[data-transition="zoom"] > .un-pane-inner.is-active .un-pane-media-wrap {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Reveal — IntersectionObserver driven, see assets/js/un-pane-hero.js.

   Gated on `html.un-reveal-ready`, which the script sets before first paint.
   Without it nothing is hidden, so a failed or blocked script leaves the page
   fully readable.
   -------------------------------------------------------------------------- */

/* ---- Standard panes: tag, sale cascade, overlay children ---- */
html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-type-tag,
html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-sale-stack,
html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-overlay--bottom > * {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
}
html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-type-tag {
	transform: scale(.94);
	transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
	transition-delay: .15s;
}
html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-sale-pct {
	opacity: 0;
	transform: scale(.85);
	transition: opacity .55s ease, transform .65s cubic-bezier(.34, 1.56, .64, 1);
}
html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-sale-regular,
html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-sale-final {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

html.un-reveal-ready .un-pane-inner[data-reveal="yes"].is-revealed .un-pane-type-tag,
html.un-reveal-ready .un-pane-inner[data-reveal="yes"].is-revealed .un-pane-overlay--bottom > * { opacity: 1; transform: none; }
html.un-reveal-ready .un-pane-inner[data-reveal="yes"].is-revealed .un-pane-sale-pct     { opacity: 1; transform: scale(1); transition-delay: .1s; }
html.un-reveal-ready .un-pane-inner[data-reveal="yes"].is-revealed .un-pane-sale-regular { opacity: .55; transform: none; transition-delay: .38s; }
html.un-reveal-ready .un-pane-inner[data-reveal="yes"].is-revealed .un-pane-sale-final   { opacity: 1; transform: none; transition-delay: .46s; }
html.un-reveal-ready .un-pane-inner[data-reveal="yes"].is-revealed .un-pane-overlay--bottom > *:nth-child(1) { transition-delay: .2s; }
html.un-reveal-ready .un-pane-inner[data-reveal="yes"].is-revealed .un-pane-overlay--bottom > *:nth-child(2) { transition-delay: .3s; }
html.un-reveal-ready .un-pane-inner[data-reveal="yes"].is-revealed .un-pane-overlay--bottom > *:nth-child(3) { transition-delay: .4s; }

/* ---- Hero: a sequenced choreography, ~1s total ----
     0.00s  sur-titre text wipes in, left to right
     0.20s  its rule extends out from after the text
     0.30s  the kicker line wipes in
     0.55s  the manchette scales up
     0.70s  description
     0.95s  CTA                                                              */
.un-pane-overlay--hero[data-animate="yes"] .un-eyebrow-text {
	clip-path: inset(0 100% 0 0);
	transition: clip-path .55s cubic-bezier(.22, 1, .36, 1);
}
.un-pane-overlay--hero[data-animate="yes"] .un-eyebrow-rule {
	transform: scaleX(0);
	transition: transform .75s cubic-bezier(.22, 1, .36, 1) .2s;
}
.un-pane-overlay--hero[data-animate="yes"] .un-hero-line--kicker {
	clip-path: inset(0 100% 0 0);
	transition: clip-path .85s cubic-bezier(.22, 1, .36, 1) .3s;
}
.un-pane-overlay--hero[data-animate="yes"] .un-hero-line--main {
	opacity: 0;
	transform: scale(.92);
	transform-origin: left center;
	transition: opacity .5s ease .55s, transform .85s cubic-bezier(.34, 1.36, .64, 1) .55s;
}
.un-pane-overlay--hero[data-animate="yes"] .un-pane-desc,
.un-pane-overlay--hero[data-animate="yes"] .un-pane-cta {
	opacity: 0;
	transform: translateY(.6em);
	transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}

.un-pane-overlay--hero[data-animate="yes"].is-revealed .un-eyebrow-text     { clip-path: inset(0 0 0 0); }
.un-pane-overlay--hero[data-animate="yes"].is-revealed .un-eyebrow-rule     { transform: scaleX(1); }
.un-pane-overlay--hero[data-animate="yes"].is-revealed .un-hero-line--kicker { clip-path: inset(0 0 0 0); }
.un-pane-overlay--hero[data-animate="yes"].is-revealed .un-hero-line--main  { opacity: 1; transform: scale(1); }
.un-pane-overlay--hero[data-animate="yes"].is-revealed .un-pane-desc        { opacity: 1; transform: none; transition-delay: .7s; }
.un-pane-overlay--hero[data-animate="yes"].is-revealed .un-pane-cta         { opacity: 1; transform: none; transition-delay: .95s; }

@media (prefers-reduced-motion: reduce) {
	html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-type-tag,
	html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-sale-stack,
	html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-sale-pct,
	html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-sale-final,
	html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-overlay--bottom > *,
	.un-pane-overlay--hero[data-animate="yes"] .un-eyebrow-text,
	.un-pane-overlay--hero[data-animate="yes"] .un-eyebrow-rule,
	.un-pane-overlay--hero[data-animate="yes"] .un-hero-line--kicker,
	.un-pane-overlay--hero[data-animate="yes"] .un-hero-line--main,
	.un-pane-overlay--hero[data-animate="yes"] .un-pane-desc,
	.un-pane-overlay--hero[data-animate="yes"] .un-pane-cta {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	html.un-reveal-ready .un-pane-inner[data-reveal="yes"] .un-pane-sale-regular {
		opacity: .55 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.un-pane-type-tag { top: 10px; left: 10px; }

	.un-pane-sale-stack { top: 12px; right: 12px; gap: 4px; }
}