/* =============================================================
   Icarus Pictures — Custom Elementor widgets styles
   ============================================================= */

/* -------------------------------------------------------------
   0. Full-bleed sizing
   The child theme's page.php / front-page.php render the post content
   without a constraining `<main>` wrapper, so our widgets can simply take
   100% of the available width. Elementor's section/column wrappers around
   our widgets are reset (see main.css :has rules) to remove their default
   padding so widgets really fill the viewport.
   ------------------------------------------------------------- */
.icarus-hero-w,
.icarus-cc,
.icarus-ts {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

/* -------------------------------------------------------------
   1. Category Carousel widget
   ------------------------------------------------------------- */
.icarus-cc {
	padding: var(--space-2xl) 0;
	color: var(--color-text);
	/* width / margins already set by the breakout rule above. */
}
.icarus-cc__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: center;
}
.icarus-cc__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	/* Default vertical alignment is "center" via .icarus-cc__inner's
	   align-items: center. The valign modifier classes below override it. */
}

/* Vertical alignment of the text block within the grid row.
   Only meaningful on desktop where text and carousel share a row. */
@media (min-width: 1100px) {
	.icarus-cc--valign-top    .icarus-cc__text { align-self: start; }
	.icarus-cc--valign-center .icarus-cc__text { align-self: center; }
	.icarus-cc--valign-bottom .icarus-cc__text { align-self: end; }
}
.icarus-cc__title {
	font-size: clamp(2rem, 4vw, 3.2rem);
	letter-spacing: 0.02em;
	margin: 0;
	color: var(--cc-title-color, var(--color-text));
}

/* Gradient-filled word/group within the carousel title. */
.icarus-cc__title-accent {
	background-image: linear-gradient(
		var(--cc-grad-angle, 45deg),
		var(--cc-grad-c1, #AA42D6),
		var(--cc-grad-c2, #E13293)
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font: inherit;
	letter-spacing: inherit;
}
.icarus-cc__desc {
	color: var(--cc-desc-color, var(--color-muted));
	font-size: 1.05rem;
	margin: 0;
}

.icarus-cc__carousel {
	position: relative;
	overflow: hidden;
}
.icarus-cc__carousel .swiper {
	width: 100%;
	overflow: hidden;
	padding-bottom: 2px;
}

/* Slide.
   The slide height is driven by the Elementor "Format des images" control via
   the --cc-ratio CSS custom property (height-as-percentage-of-width). Default
   100% = perfect square. Children are position:absolute and fill the box.
   The image always covers 100% of the slide thanks to object-fit:cover. */
.icarus-cc__slide {
	position: relative;
	width: 100%;
	/* aspect-ratio is the modern replacement for the padding-top hack and
	   keeps the card height identical regardless of the parent layout (flex
	   in carousel mode, grid in accordion mode). The :n number is fed by
	   the section's inline style — see render() in the widget PHP. */
	aspect-ratio: 100 / var(--cc-ratio-n, 55);
	overflow: hidden;
	background: var(--color-bg-soft);
	border-radius: var(--radius-md);
}
.icarus-cc__slide-link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
}
/* The image always covers 100% of the slide. !important defends against
   Elementor/Hello Elementor global img rules that sometimes set
   width:auto / max-width / object-fit:contain. */
.icarus-cc__img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	transition: transform 700ms var(--ease-out),
				filter   300ms var(--ease-out);
}

/* Overlay with title + description.
   At rest, a tall but soft gradient covers the bottom half of the slide so the
   white title is always readable. On hover, the overlay grows even taller and
   the description slides in below the title — the gradient rises with it. */
.icarus-cc__overlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	/* min-height = how high the gradient reaches at rest. */
	min-height: 55%;
	padding: var(--space-sm) var(--space-md) var(--space-md);
	color: var(--color-text);
	background: linear-gradient(to top,
		rgba(0,0,0,0.88) 0%,
		rgba(0,0,0,0.60) 30%,
		rgba(0,0,0,0.25) 65%,
		rgba(0,0,0,0)    100%);
	z-index: 2;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	/* Push title + description to the bottom; when the description expands,
	   the title is naturally lifted upward. */
	justify-content: flex-end;
	gap: var(--space-xs);
	transition: min-height 500ms var(--ease-out);
}
.icarus-cc__slide-title {
	/* Shrink-to-content width (instead of stretching) so the underline below
	   matches the title's width rather than the whole card. */
	align-self: flex-start;
	position: relative;
	margin: 0;
	/* Room for the animated underline drawn by ::after. */
	padding-bottom: 8px;
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--cc-slide-title-color, var(--color-text));
}

/* Underline that "draws" from left to right on hover. Collapsed to scaleX(0)
   at rest, expands to scaleX(1) when the card is hovered. The pink accent is
   the brand colour. */
.icarus-cc__slide-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--color-accent, #E13293);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 450ms var(--ease-out);
}

/* Hover state — desktop / mouse pointer */
@media (hover: hover) {
	.icarus-cc__slide:hover .icarus-cc__img {
		transform: scale(1.05);
		filter: brightness(0.9);
	}
	.icarus-cc__slide:hover .icarus-cc__slide-title::after {
		transform: scaleX(1);
	}
}

/* Touch devices have no hover: keep the gradient generous so the title
   stays perfectly readable on any photo. */
@media (hover: none) {
	.icarus-cc__overlay {
		min-height: 70%;
	}
}

/* Navigation buttons — inside the .swiper, pointer-events: none on the
   overlay means they don't block clicks on the slide links beneath. */
.icarus-cc__carousel {
	position: relative;
	overflow: hidden;
}
.icarus-cc__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(12, 12, 14, 0.6);
	color: var(--color-text);
	border-radius: 50%;
	transition: background var(--dur-fast) var(--ease-out),
				transform   var(--dur-fast) var(--ease-out);
	backdrop-filter: blur(4px);
}
.icarus-cc__nav:hover {
	background: var(--color-accent);
	color: var(--color-bg);
	transform: translateY(-50%) scale(1.05);
}
.icarus-cc__nav--prev { left: 8px; }
.icarus-cc__nav--next { right: 8px; }
.icarus-cc__nav.swiper-button-disabled { opacity: 0; pointer-events: none; }

/* Two-column layout on large screens — applies to both carousel & accordion
   modes because the accordion's preview area sits in the same 2/3 column. */
@media (min-width: 1100px) {
	.icarus-cc .icarus-cc__inner {
		grid-template-columns: 1fr 2fr;
		gap: var(--space-2xl);
	}
	.icarus-cc--reverse .icarus-cc__inner {
		grid-template-columns: 2fr 1fr;
	}
	.icarus-cc--reverse .icarus-cc__text     { order: 2; }
	.icarus-cc--reverse .icarus-cc__carousel { order: 1; }
}

/* -------------------------------------------------------------
   Accordion layout
   The inner section keeps the carousel's 1/3 text + 2/3 preview layout.
   In accordion mode, the 2/3 column hosts BOTH the static 3-photo preview
   (no Swiper) AND the unfoldable .icarus-cc__grid that reveals items 4+.
   The accordion grid stays inside the 2/3 column — never full-width.
   ------------------------------------------------------------- */

/* The accordion wrapper replaces the Swiper wrapper. Plain block layout —
   no flex/grid + no gap — so the preview stays exactly where it is and
   only the .icarus-cc__grid-wrap below expands when the toggle is clicked. */
.icarus-cc__carousel--accordion {
	overflow: visible;
	display: block;
}

/* Preview row — the first N items (N = the "Nombre de colonnes" control,
   exposed as --cc-cols). The column count is identical on every device, so
   the user gets exactly N squares side by side on mobile, tablet and desktop.
   The PHP only renders N items here, so there's nothing left to hide. */
.icarus-cc__carousel-preview {
	width: 100%;
	padding-bottom: 2px; /* match .swiper { padding-bottom: 2px } */
	display: grid;
	grid-template-columns: repeat(var(--cc-cols, 3), 1fr);
	gap: 12px;
}
@media (min-width: 640px) {
	.icarus-cc__carousel-preview { gap: 18px; }
}
@media (min-width: 1100px) {
	.icarus-cc__carousel-preview { gap: 22px; }
}

/* Toggle button — uses CSS variables fed inline by the PHP render().
   align-self: flex-start so it aligns naturally with the text on its side. */
.icarus-cc__toggle {
	align-self: flex-start;
	display: inline-block;
	margin-top: var(--space-md);
	padding: 0.85rem 1.6rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out),
				color      var(--dur-fast) var(--ease-out),
				transform  var(--dur-fast) var(--ease-out),
				border     var(--dur-fast) var(--ease-out);
}
.icarus-cc__toggle--filled {
	background: var(--cc-btn-bg, var(--color-accent));
	color:      var(--cc-btn-color, var(--color-bg));
	border: 1px solid var(--cc-btn-bg, var(--color-accent));
}
.icarus-cc__toggle--outlined {
	background: transparent;
	color:      var(--cc-btn-bg, var(--color-accent));
	border: 1px solid var(--cc-btn-bg, var(--color-accent));
}
.icarus-cc__toggle:hover,
.icarus-cc__toggle:focus-visible {
	transform: translateY(-1px);
}
.icarus-cc__toggle--filled:hover {
	filter: brightness(0.92);
}
.icarus-cc__toggle--outlined:hover {
	background: var(--cc-btn-bg, var(--color-accent));
	color:      var(--cc-btn-color, var(--color-bg));
}

/* Toggle placement.
   Two identical toggles are rendered: one in the text column (desktop) and
   one under the photos (mobile/tablet). Only one shows at a given breakpoint.
   Below 1100px the in-text button is hidden so the button sits UNDER the
   photos; from 1100px the under-photos button is hidden so it sits in the
   text column next to the description. */
.icarus-cc__toggle--in-text { display: none; }
.icarus-cc__toggle--under   { display: inline-block; }
@media (min-width: 1100px) {
	.icarus-cc__toggle--in-text { display: inline-block; }
	.icarus-cc__toggle--under   { display: none; }
}

/* Wrapper that handles the slide-down animation.
   We use the modern `grid-template-rows: 0fr → 1fr` trick so the height
   animates fluidly to the EXACT content height — no JS, no max-height hack
   with arbitrary values. Supported by all evergreen browsers since 2023. */
.icarus-cc__grid-wrap {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	opacity: 0;
	margin-top: 0;
	transition: grid-template-rows 500ms var(--ease-out),
				opacity            300ms var(--ease-out),
				margin-top         400ms var(--ease-out);
}
/* Override default [hidden] so the transition can fire from a collapsed state. */
.icarus-cc__grid-wrap[hidden] { display: grid; }
.icarus-cc__grid-wrap.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: var(--space-md);
}

/* Inner grid — the unfolded items, same column count as the preview
   (--cc-cols) on every device. Must have min-height: 0 so the parent's
   0fr can truly squash it. */
.icarus-cc__grid {
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(var(--cc-cols, 3), 1fr);
	gap: 12px;
}
@media (min-width: 640px) {
	.icarus-cc__grid { gap: 18px; }
}
@media (min-width: 1100px) {
	.icarus-cc__grid { gap: 22px; }
}

/* -------------------------------------------------------------
   2. Triptych Scroll widget
   ------------------------------------------------------------- */
.icarus-ts {
	--ts-gap: 18px;
	width: 100%;
	height: var(--ts-height, 85vh);
	max-height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--ts-gap);
	overflow: hidden;
	position: relative;
	padding: var(--space-md);
}

/* Fade-out top/bottom edges for an elegant look */
.icarus-ts::before,
.icarus-ts::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 80px;
	z-index: 2;
	pointer-events: none;
}
.icarus-ts::before {
	top: 0;
	background: linear-gradient(180deg, var(--color-overlay) 0%, transparent 100%);
}
.icarus-ts::after {
	bottom: 0;
	background: linear-gradient(0deg, var(--color-overlay) 0%, transparent 100%);
}

.icarus-ts__col {
	position: relative;
	overflow: hidden;
	height: 100%;
}
.icarus-ts__track {
	display: flex;
	flex-direction: column;
	gap: var(--ts-gap);
	will-change: transform;
	animation-duration: var(--ts-speed, 40s);
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.icarus-ts__col--up    .icarus-ts__track { animation-name: icarus-ts-scroll-up; }
.icarus-ts__col--down  .icarus-ts__track { animation-name: icarus-ts-scroll-down; }

.icarus-ts__item {
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-soft);
}
/* Keep each image's natural aspect ratio. A landscape shot fills the column
   width and stays short; a portrait shot fills the width and stays tall.
   No object-fit, no forced aspect-ratio — the column adapts. */
.icarus-ts__item img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	object-fit: initial;
}

/* Pause on hover (opt-in) */
.icarus-ts--pausable:hover .icarus-ts__track { animation-play-state: paused; }

/* Pause when out of viewport for performance — toggled via JS */
.icarus-ts:not(.icarus-ts--in-view) .icarus-ts__track {
	animation-play-state: paused;
}

/* Keyframes — the track is twice as tall as the visible area because images
   are duplicated in markup; translating by -50% loops seamlessly. */
@keyframes icarus-ts-scroll-up {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}
@keyframes icarus-ts-scroll-down {
	from { transform: translateY(-50%); }
	to   { transform: translateY(0); }
}

/* All 3 columns always visible regardless of viewport size. */
.icarus-ts { grid-template-columns: 1fr 1fr 1fr; }

/* Reduce motion: stop the scroll for a11y. */
@media (prefers-reduced-motion: reduce) {
	.icarus-ts__track { animation: none !important; }
}

/* -------------------------------------------------------------
   3. Hero widget — full-bleed image + overlay + headline block
   ------------------------------------------------------------- */
.icarus-hero-w {
	height: var(--hero-h, 100vh);
	max-height: 100vh;
	overflow: hidden;
	color: var(--color-text);
	/* The hero image is set inline via background-image:url() so it can never
	   be hijacked by stray global "img" rules. */
	background-size: cover;
	background-position: var(--hero-bg-pos, center center);
	background-repeat: no-repeat;
	background-color: var(--color-bg);
	/* .icarus-main:has(.icarus-hero-w) removes the parent's top padding,
	   so the hero naturally starts at y=0 behind the transparent header. */
}
.icarus-hero-w__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--hero-overlay, #0c0c0e);
	opacity: var(--hero-overlay-alpha, 0.45);
	pointer-events: none;
}
/* Optional bottom gradient for legibility */
.icarus-hero-w--gradient::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 55%;
	z-index: 3;
	background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
	pointer-events: none;
}

/* Content block */
.icarus-hero-w__content {
	position: absolute;
	inset: 0;
	z-index: 4;
	padding: calc(var(--header-height) + var(--space-lg)) var(--container-pad) var(--space-2xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 56ch;
}
.icarus-hero-w__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 7vw, 5.5rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hero-title-color, var(--color-text));
}
/* Gradient-filled word/group within the hero title. */
.icarus-hero-w__title-accent {
	background-image: linear-gradient(
		var(--hero-grad-angle, 45deg),
		var(--hero-grad-c1, #AA42D6),
		var(--hero-grad-c2, #E13293)
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}
.icarus-hero-w__subtitle {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	color: var(--hero-subtitle-color, var(--color-accent));
	line-height: 1.2;
}
.icarus-hero-w__text {
	margin: var(--space-xs) 0 0;
	max-width: 48ch;
	color: var(--hero-text-color, rgba(244, 241, 236, 0.88));
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	line-height: 1.55;
}
.icarus-hero-w__cta {
	align-self: flex-start;
	margin-top: var(--space-md);
}

/* Text positions — driven by the modifier class. */
.icarus-hero-w--top-left    .icarus-hero-w__content { align-items: flex-start; justify-content: flex-start; text-align: left; }
.icarus-hero-w--top-center  .icarus-hero-w__content { align-items: center;     justify-content: flex-start; text-align: center; margin-left: auto; margin-right: auto; }
.icarus-hero-w--top-right   .icarus-hero-w__content { align-items: flex-end;   justify-content: flex-start; text-align: right; margin-left: auto; }
.icarus-hero-w--center-left   .icarus-hero-w__content { align-items: flex-start; justify-content: center; text-align: left; }
.icarus-hero-w--center-center .icarus-hero-w__content { align-items: center;     justify-content: center; text-align: center; margin-left: auto; margin-right: auto; }
.icarus-hero-w--center-right  .icarus-hero-w__content { align-items: flex-end;   justify-content: center; text-align: right; margin-left: auto; }
.icarus-hero-w--bottom-left   .icarus-hero-w__content { align-items: flex-start; justify-content: flex-end; text-align: left; }
.icarus-hero-w--bottom-center .icarus-hero-w__content { align-items: center;     justify-content: flex-end; text-align: center; margin-left: auto; margin-right: auto; }
.icarus-hero-w--bottom-right  .icarus-hero-w__content { align-items: flex-end;   justify-content: flex-end; text-align: right; margin-left: auto; }

/* On centered text positions, allow the block to be wider/centered. */
.icarus-hero-w--top-center .icarus-hero-w__cta,
.icarus-hero-w--center-center .icarus-hero-w__cta,
.icarus-hero-w--bottom-center .icarus-hero-w__cta { align-self: center; }
.icarus-hero-w--top-right .icarus-hero-w__cta,
.icarus-hero-w--center-right .icarus-hero-w__cta,
.icarus-hero-w--bottom-right .icarus-hero-w__cta { align-self: flex-end; }

/* On mobile, keep the headline readable */
@media (max-width: 600px) {
	.icarus-hero-w__title { letter-spacing: 0.04em; }
	.icarus-hero-w__content { max-width: 100%; }
}

/* -------------------------------------------------------------
   3.5. Gradient Heading widget — title with a gradient-fill word
   ------------------------------------------------------------- */
.icarus-grad {
	/* Defaults — Playfair Display, bold italic, centered, white.
	   Every property is overridable by Elementor's per-widget typography
	   group control (which outputs higher-specificity inline CSS). */
	font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
	font-weight: 700;
	font-style: italic;
	font-size: 32px; /* fallback for p / div tags */
	line-height: 1.15;
	text-align: center;
	color: #ffffff;
	margin: 0;
}

/* Per-HTML-tag default sizes, decreasing from h1.
   Specificity (h*.class = 0,0,1,1) beats the global `body h*` rule from
   main.css (0,0,0,2) and the parent theme's reset. Elementor's per-widget
   typography control still wins because it outputs a longer selector chain. */
h1.icarus-grad { font-size: 48px; }
h2.icarus-grad { font-size: 40px; }
h3.icarus-grad { font-size: 32px; }
h4.icarus-grad { font-size: 26px; }
h5.icarus-grad { font-size: 22px; }
h6.icarus-grad { font-size: 18px; }

/* Gradient applied to the text itself via background-clip:text. */
.icarus-grad__accent {
	background-image: linear-gradient(
		var(--grad-angle, 45deg),
		var(--grad-c1, #AA42D6),
		var(--grad-c2, #E13293)
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* Inherit every typography property so the accent word looks identical
	   to the main text — only its fill becomes a gradient. */
	font: inherit;
	letter-spacing: inherit;
}

/* -------------------------------------------------------------
   3.5. Lightbox (shared) — opened by .icarus-lb-trigger elements
   ------------------------------------------------------------- */
.icarus-lb {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(8, 8, 10, 0.96);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 300ms var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}
.icarus-lb.is-open { opacity: 1; }
.icarus-lb[hidden] { display: none; }

.icarus-lb__figure {
	margin: 0;
	padding: 0;
	max-width: min(92vw, 1600px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.icarus-lb__img {
	display: block;
	max-width: 100%;
	max-height: 82vh;
	height: auto;
	width: auto;
	object-fit: contain;
	border-radius: 4px;
	/* Anti-download hardening — visually invisible but blocks selection
	   and drag-to-save. The JS also cancels contextmenu / dragstart. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	pointer-events: auto;
}
.icarus-lb__caption {
	color: var(--color-muted);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 0.95rem;
	max-width: 60ch;
	text-align: center;
}

.icarus-lb__close,
.icarus-lb__nav {
	position: absolute;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.18);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.icarus-lb__close:hover,
.icarus-lb__nav:hover {
	background: rgba(0, 0, 0, 0.75);
	transform: scale(1.05);
}
.icarus-lb__close { top: 20px; right: 20px; }
.icarus-lb__prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.icarus-lb__next  { right: 20px; top: 50%; transform: translateY(-50%); }
.icarus-lb__prev:hover { transform: translateY(-50%) scale(1.05); }
.icarus-lb__next:hover { transform: translateY(-50%) scale(1.05); }

body.icarus-lb-open { overflow: hidden; }

@media (max-width: 600px) {
	.icarus-lb__close { top: 12px; right: 12px; }
	.icarus-lb__prev  { left: 8px;  }
	.icarus-lb__next  { right: 8px; }
}

/* -------------------------------------------------------------
   3.55. Photo Gallery widget — grid or masonry
   ------------------------------------------------------------- */
.icarus-gal {
	width: 100%;
}

/* Grid mode — uniform cells, aspect-ratio controlled. */
.icarus-gal--grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gal-gap, 12px);
}
@media (min-width: 640px) {
	.icarus-gal--grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.icarus-gal--grid {
		grid-template-columns: repeat(var(--gal-cols, 3), 1fr);
	}
}
.icarus-gal--grid .icarus-gal__item {
	display: block;
	aspect-ratio: var(--gal-ratio, 1) / 1;
	overflow: hidden;
	border-radius: var(--gal-radius, 6px);
	background: var(--color-bg-soft);
	cursor: zoom-in;
}
.icarus-gal--grid .icarus-gal__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms var(--ease-out), filter 300ms var(--ease-out);
}
@media (hover: hover) {
	.icarus-gal--grid .icarus-gal__item:hover img {
		transform: scale(1.04);
		filter: brightness(0.92);
	}
}

/* Masonry mode — CSS columns, variable heights. */
.icarus-gal--masonry {
	column-count: 1;
	column-gap: var(--gal-gap, 12px);
}
@media (min-width: 640px) {
	.icarus-gal--masonry { column-count: 2; }
}
@media (min-width: 1024px) {
	.icarus-gal--masonry { column-count: var(--gal-cols, 3); }
}
.icarus-gal--masonry .icarus-gal__item {
	display: block;
	margin: 0 0 var(--gal-gap, 12px);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	overflow: hidden;
	border-radius: var(--gal-radius, 6px);
	background: var(--color-bg-soft);
	cursor: zoom-in;
}
.icarus-gal--masonry .icarus-gal__item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 600ms var(--ease-out), filter 300ms var(--ease-out);
}
@media (hover: hover) {
	.icarus-gal--masonry .icarus-gal__item:hover img {
		transform: scale(1.03);
		filter: brightness(0.92);
	}
}

/* Caption when lightbox is OFF (figure fallback). */
.icarus-gal__item figcaption {
	padding: 6px 4px 0;
	color: var(--color-muted);
	font-size: 0.85rem;
	font-style: italic;
}

/* -------------------------------------------------------------
   3.56. Image + Text widget
   ------------------------------------------------------------- */
.icarus-it {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: center;
	width: 100%;
}
@media (min-width: 768px) {
	.icarus-it { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
	.icarus-it--right .icarus-it__image { order: 2; }
	.icarus-it--right .icarus-it__body  { order: 1; }
}

.icarus-it--valign-top    .icarus-it__body { align-self: start; }
.icarus-it--valign-center .icarus-it__body { align-self: center; }
.icarus-it--valign-bottom .icarus-it__body { align-self: end; }

.icarus-it__image {
	display: block;
	width: 100%;
	aspect-ratio: var(--it-ratio, 1.33) / 1;
	overflow: hidden;
	border-radius: var(--it-radius, 6px);
	background: var(--color-bg-soft);
	cursor: zoom-in;
}
.icarus-it__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms var(--ease-out), filter 300ms var(--ease-out);
}
@media (hover: hover) {
	.icarus-it__image:hover img {
		transform: scale(1.04);
		filter: brightness(0.92);
	}
}

.icarus-it__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
.icarus-it__title {
	margin: 0;
	line-height: 1.15;
}
/* Gradient-filled word/group within the Image+Text title (3-part structure). */
.icarus-it__title-accent {
	background-image: linear-gradient(
		var(--it-grad-angle, 45deg),
		var(--it-grad-c1, #AA42D6),
		var(--it-grad-c2, #E13293)
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font: inherit;
	letter-spacing: inherit;
}
.icarus-it__text {
	font-size: 1rem;
	line-height: 1.6;
}
.icarus-it__text p { margin: 0 0 0.8em; }
.icarus-it__text p:last-child { margin-bottom: 0; }
.icarus-it__cta {
	align-self: flex-start;
	margin-top: var(--space-sm);
}

/* -------------------------------------------------------------
   3.57. FAQ widget — exclusive accordion + animated slide-down
   ------------------------------------------------------------- */
.icarus-faq {
	width: 100%;
	border-top: 1px solid var(--faq-sep, rgba(244, 241, 236, 0.12));
}

.icarus-faq__item {
	border-bottom: 1px solid var(--faq-sep, rgba(244, 241, 236, 0.12));
}

/* Question — full-width clickable bar with icon on the right.
   Hover uses a subtle transparent-white background (no aggressive color
   change); the active state matches the rest of the text by default — the
   visual cue for "open" comes from the rotated icon and the unfolded panel.
   Mouse click does NOT keep a background: we only react to :hover (pointer)
   and :focus-visible (keyboard) so the bar returns to neutral after click. */
.icarus-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: var(--faq-item-padding, 18px) 0;
	margin: 0;
	background-color: transparent;
	border: 0;
	color: var(--faq-q-color, #f4f1ec);
	text-align: left;
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out);
	font: inherit;
}
.icarus-faq__q:hover {
	background-color: var(--faq-q-hover-bg, rgba(255, 255, 255, 0.05));
}
/* Suppress the sticky pink/blue focus background that browsers and parent
   themes can apply after a click. Keep a discreet outline for keyboard a11y. */
.icarus-faq__q:focus           { outline: none; background-color: transparent; }
.icarus-faq__q:focus-visible   { outline: 2px solid currentColor; outline-offset: 2px; background-color: transparent; }
.icarus-faq__q:active          { background-color: transparent; }

.icarus-faq__item.is-open .icarus-faq__q {
	color: var(--faq-q-active, var(--faq-q-color, #f4f1ec));
}
.icarus-faq__q-text {
	flex: 1 1 auto;
	/* !important here defends against any higher-specificity rule from
	   Elementor / Hello Elementor that might keep min-width: auto and
	   prevent the text from wrapping. With min-width:0 + overflow-wrap,
	   long question titles wrap onto multiple lines instead of pushing
	   the icon out of the row. */
	min-width: 0 !important;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
	white-space: normal;
	line-height: 1.3;
}

/* Icon — visually rendered via CSS pseudo-elements so we don't ship SVG
   per item. Style changes (+ / chevron / arrow) come from the modifier
   class on the parent .icarus-faq. */
.icarus-faq__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--faq-icon-color, #E13293);
	transition: transform 300ms var(--ease-out), color 250ms var(--ease-out);
}

/* "+" icon: two crossing bars, vertical one rotates away on open. */
.icarus-faq--plus .icarus-faq__icon::before,
.icarus-faq--plus .icarus-faq__icon::after {
	content: "";
	position: absolute;
	display: block;
	background: currentColor;
	border-radius: 1px;
}
.icarus-faq--plus .icarus-faq__icon {
	position: relative;
}
.icarus-faq--plus .icarus-faq__icon::before { width: 16px; height: 2px; }
.icarus-faq--plus .icarus-faq__icon::after  { width: 2px;  height: 16px; transition: transform 300ms var(--ease-out); }
.icarus-faq--plus .icarus-faq__item.is-open .icarus-faq__icon::after {
	transform: rotate(90deg);
}

/* Chevron and arrow versions reuse the same SVG concept via background. */
.icarus-faq--chevron .icarus-faq__icon::before {
	content: "";
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 300ms var(--ease-out);
}
.icarus-faq--chevron .icarus-faq__item.is-open .icarus-faq__icon::before {
	transform: rotate(225deg) translate(-2px, -2px);
}

.icarus-faq--arrow .icarus-faq__icon::before {
	content: "→";
	font-size: 18px;
	line-height: 1;
	transition: transform 300ms var(--ease-out);
}
.icarus-faq--arrow .icarus-faq__item.is-open .icarus-faq__icon::before {
	transform: rotate(90deg);
}

/* Answer — collapsed by default, animates open with two parallel tricks:
   - grid-template-rows: 0fr → 1fr (smooth height tied to actual content)
   - max-height: 0 → large value (safety net for browsers where `0fr` falls
     back to `auto` in auto-sized containers — observed in Elementor cells)
   Both run on the same easing/duration so they stay visually in sync. */
.icarus-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	max-height: 0;
	overflow: hidden;
	transition: grid-template-rows 380ms var(--ease-out),
				max-height 380ms var(--ease-out);
}
.icarus-faq__item.is-open .icarus-faq__a {
	grid-template-rows: 1fr;
	max-height: 1500px;
}
.icarus-faq__a-content {
	min-height: 0;
	overflow: hidden;
	color: var(--faq-a-color, rgba(244, 241, 236, 0.78));
	padding: 0 0 var(--faq-item-padding, 18px);
	line-height: 1.6;
}
.icarus-faq__a-content p { margin: 0 0 0.8em; }
.icarus-faq__a-content p:last-child { margin-bottom: 0; }
.icarus-faq__a-content a { color: var(--faq-q-active, var(--color-accent)); text-decoration: underline; }

/* -------------------------------------------------------------
   3.58. CTA widget — image-backed call-to-action section
   ------------------------------------------------------------- */
.icarus-cta {
	position: relative;
	overflow: hidden;
	min-height: var(--cta-min-h, 320px);
	background-color: var(--cta-bg-color, #15151a);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--cta-radius, 16px);
	isolation: isolate;
	display: flex;
}

.icarus-cta__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--cta-overlay, #0c0c0e);
	opacity: var(--cta-overlay-alpha, 0.55);
	pointer-events: none;
	z-index: 0;
}

.icarus-cta__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
	align-items: var(--cta-flex-align, center);
	text-align: var(--cta-align, center);
	color: #ffffff;
}

.icarus-cta__eyebrow {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-accent, #E13293);
}

.icarus-cta__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.5vw, 2.8rem);
	font-weight: 500;
	line-height: 1.15;
	color: #ffffff;
	max-width: 30ch;
}

.icarus-cta__desc {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	max-width: 56ch;
}

/* Button — driven by --cta-btn-* custom properties from PHP. */
.icarus-cta__btn {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--cta-btn-radius, 4px);
	border: 1px solid var(--cta-btn-bg, var(--color-accent));
	margin-top: 6px;
	cursor: pointer;
	transition: background 250ms var(--ease-out),
				color      250ms var(--ease-out),
				transform  250ms var(--ease-out),
				box-shadow 250ms var(--ease-out);
	text-decoration: none;
}
.icarus-cta__btn--small  { padding: 0.65rem 1.4rem; font-size: 0.78rem; }
.icarus-cta__btn--medium { padding: 0.9rem  1.9rem; font-size: 0.88rem; }
.icarus-cta__btn--large  { padding: 1.1rem  2.4rem; font-size: 0.98rem; }

.icarus-cta__btn--filled {
	background: var(--cta-btn-bg, var(--color-accent));
	color:      var(--cta-btn-color, #ffffff);
}
.icarus-cta__btn--filled:hover {
	filter: brightness(0.92);
}

.icarus-cta__btn--outlined {
	background: transparent;
	color:      var(--cta-btn-bg, var(--color-accent));
}
.icarus-cta__btn--outlined:hover {
	background: var(--cta-btn-bg, var(--color-accent));
	color:      var(--cta-btn-color, #ffffff);
}

.icarus-cta__btn--lift:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------
   3.6. Icon Boxes widget — configurable grid of icon plaques
   ------------------------------------------------------------- */
.icarus-ib {
	background: var(--ib-bg, rgba(21, 21, 26, 0.55));
	border: var(--ib-border-width, 1px) solid var(--ib-border-color, rgba(244, 241, 236, 0.1));
	border-radius: var(--ib-radius, 16px);
}

/* Responsive grid: 1 col mobile, 2 col tablet, N col desktop. */
.icarus-ib__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 640px) {
	.icarus-ib__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.icarus-ib__grid {
		grid-template-columns: repeat(var(--ib-cols, 3), 1fr);
	}
}

.icarus-ib__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}

/* The "plaque" containing the icon. Hover zoom applies to this whole
   element so the icon AND its colored background scale together. */
.icarus-ib__icon {
	width: var(--ib-icon-box-size, 72px);
	height: var(--ib-icon-box-size, 72px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ib-icon-bg, rgba(120, 50, 130, 0.55));
	border: var(--ib-icon-border-width, 1px) solid var(--ib-icon-border-color, rgba(244, 241, 236, 0.18));
	border-radius: var(--ib-icon-box-radius, 12px);
	color: var(--ib-icon-color, #f4f1ec);
	font-size: var(--ib-icon-size, 28px);
	transition: transform 400ms var(--ease-out);
	will-change: transform;
}
.icarus-ib__icon svg,
.icarus-ib__icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	color: inherit;
	fill: currentColor;
}

/* Hover: zoom the plaque (icon + bg) — value supplied by the widget. */
@media (hover: hover) {
	.icarus-ib__item:hover .icarus-ib__icon {
		transform: scale(var(--ib-zoom, 1.08));
	}
}

.icarus-ib__title {
	margin: 0;
	color: var(--ib-title-color, #f4f1ec);
	line-height: 1.2;
}
.icarus-ib__desc {
	margin: 0;
	color: var(--ib-desc-color, rgba(244, 241, 236, 0.7));
	max-width: 38ch;
	line-height: 1.55;
}

/* Mobile / single-column layout: each box becomes a self-contained card.
   - The outer container loses its background / border / padding.
   - Each item reuses the SAME background / border / radius as the desktop
     container (via the --ib-* variables).
   - Layout: icon on the LEFT (spans both rows), title above description on
     the right. Icon is shrunk a bit to suit the compact mobile card.
   Triggers at the 1-column breakpoint (≤640 px). */
@media (max-width: 639px) {
	.icarus-ib {
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
	}
	.icarus-ib__grid {
		gap: 14px;
	}
	.icarus-ib__item {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"icon title"
			"icon desc";
		column-gap: 18px;
		row-gap: 2px;
		align-items: center;
		text-align: left;
		padding: 16px 18px;
		background: var(--ib-bg, rgba(21, 21, 26, 0.55));
		border: var(--ib-border-width, 1px) solid var(--ib-border-color, rgba(244, 241, 236, 0.1));
		border-radius: var(--ib-radius, 12px);
	}
	.icarus-ib__icon {
		grid-area: icon;
		/* Shrink the icon plaque a bit for compact mobile cards. The CSS
		   variables override the inline ones set on the parent .icarus-ib. */
		--ib-icon-box-size: 52px;
		--ib-icon-size: 22px;
	}
	.icarus-ib__title {
		grid-area: title;
		margin: 0;
		align-self: end;       /* sit close to the desc below */
		text-align: left;
		max-width: none;
	}
	.icarus-ib__desc {
		grid-area: desc;
		margin: 0;
		align-self: start;     /* sit close to the title above */
		text-align: left;
		max-width: none;
	}
}

/* -------------------------------------------------------------
   4. Banner widget — full-width image strip with title + subtitle
   ------------------------------------------------------------- */
.icarus-banner-w {
	position: relative;
	width: 100%;
	/* Default height per breakpoint — overridden by Elementor's per-widget
	   responsive control (selectors output direct height on this element). */
	height: 30vh;
	overflow: hidden;
	color: var(--color-text);
	isolation: isolate;
}
@media (max-width: 1024px) {
	.icarus-banner-w { height: 25vh; }
}
@media (max-width: 767px) {
	.icarus-banner-w { height: 110px; }
}

/* Background image layer — isolated so we can apply filter:blur without
   blurring the title and subtitle. Scaled slightly so blurred edges don't
   show through.
   IMPORTANT: filter and transform create new stacking contexts that defeat
   `background-attachment: fixed` (the parallax effect). The CSS variable
   --banner-filter is "none" when no blur is set, and the transform is
   removed by the .icarus-banner-w--parallax modifier (see below). */
.icarus-banner-w__bg {
	position: absolute;
	inset: 0;
	background-image: var(--banner-image, none);
	background-size: cover;
	/* Position = base keyword (in %) + per-breakpoint pixel offsets.
	   --banner-pos-x/y come from the inline style (chosen keyword).
	   --banner-x-offset / --banner-y-offset come from Elementor's responsive
	   selectors and override automatically at each breakpoint. */
	background-position:
		calc(var(--banner-pos-x, 50%) + var(--banner-x-offset, 0px))
		calc(var(--banner-pos-y, 50%) + var(--banner-y-offset, 0px));
	background-repeat: no-repeat;
	background-color: var(--color-bg);
	filter: var(--banner-filter, none);
	transform: scale(1.04);
	z-index: 0;
}

/* Parallax mode — the background-image is translated vertically by JS
   (assets/js/banner-parallax.js) at a fraction of the scroll speed.
   The JS overrides the transform inline, applying scale(1.3) so the bg
   overflows the section by ~15% on each side, giving room for the
   translation without ever revealing empty area at the edges. */
.icarus-banner-w--parallax .icarus-banner-w__bg {
	will-change: transform;
}

/* Tint overlay sits on top of the image, below the text. */
.icarus-banner-w__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--banner-overlay, #0c0c0e);
	opacity: var(--banner-overlay-alpha, 0.4);
	z-index: 1;
	pointer-events: none;
}

/* Content layer.
   Top padding accounts for the fixed transparent header AND adds extra
   breathing room so the title never gets crowded by the menu. */
.icarus-banner-w__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding:
		calc(var(--header-height) + var(--space-lg))
		var(--container-pad)
		var(--space-lg);
	max-width: var(--container-max);
	margin: 0 auto;
}
.icarus-banner-w__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	/* On mobile starts at 1.4rem (~22px) to fit comfortably in shorter banners. */
	font-size: clamp(1.4rem, 4vw, 3.6rem);
	line-height: 1.1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text);
	/* Wrap on word boundaries only — no hyphenation (which was cutting words
	   like "ÉVÉNE-MENTS" / "PROFESSION-NELS" awkwardly mid-word). */
	max-width: 100%;
	overflow-wrap: break-word;
	white-space: normal;
}
.icarus-banner-w__subtitle {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(0.95rem, 1.8vw, 1.4rem);
	color: var(--color-text);
	max-width: min(56ch, 100%);
	overflow-wrap: break-word;
}

/* Text positions — drive align/justify on the flex content container. */
.icarus-banner-w--top-left      .icarus-banner-w__content { align-items: flex-start; justify-content: flex-start; text-align: left;   }
.icarus-banner-w--top-center    .icarus-banner-w__content { align-items: center;     justify-content: flex-start; text-align: center; }
.icarus-banner-w--top-right     .icarus-banner-w__content { align-items: flex-end;   justify-content: flex-start; text-align: right;  }
.icarus-banner-w--center-left   .icarus-banner-w__content { align-items: flex-start; justify-content: center;     text-align: left;   }
.icarus-banner-w--center-center .icarus-banner-w__content { align-items: center;     justify-content: center;     text-align: center; }
.icarus-banner-w--center-right  .icarus-banner-w__content { align-items: flex-end;   justify-content: center;     text-align: right;  }
.icarus-banner-w--bottom-left   .icarus-banner-w__content { align-items: flex-start; justify-content: flex-end;   text-align: left;   }
.icarus-banner-w--bottom-center .icarus-banner-w__content { align-items: center;     justify-content: flex-end;   text-align: center; }
.icarus-banner-w--bottom-right  .icarus-banner-w__content { align-items: flex-end;   justify-content: flex-end;   text-align: right;  }