/* ------------------------------------------------------------ *\
	Biovancia v3 — Innovation page
	ISO Figma node 2800:4027 (Biovancia_Refonte_CLIENT--copie-).
	Self-contained: depends only on tokens.css + base.css (.shell,
	.questions/.faqs) — never on product.css. Mirrors about.css
	conventions (.inno wrapper, --bva-t-* tokens, 835/560 breakpoints).
\* ------------------------------------------------------------ */

.inno {
	font-family: var(--bva-font-sans);
	color: var(--bva-black);
}

/* Innovation runs edge-to-edge: the maquette's 1360
   columns on a 1440 frame read as "full width minus the 40px gutter", not as the
   shared 1440 rail. Structural columns below are therefore expressed in % of that
   width (672/1360 ≈ 49.4%, 448/1360 ≈ 33%…) so the layout is ISO at 1440 and keeps
   filling the screen past it. */
.inno .shell {
	max-width: none;
}
.inno *,
.inno *::before,
.inno *::after { box-sizing: border-box; }

/* ── Shared ──────────────────────────────────────────────── */
.inno > section + section {
	margin-top: 120px;
}
.inno-label {
	margin: 0;
	font: var(--bva-t-label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bva-black);
}
.inno-section-title {
	margin: 0;
	font: 500 24px/1.1 var(--bva-font-sans);
	text-transform: uppercase;
	color: var(--bva-black);
}

/* ── Hero ────────────────────────────────────────────────── */
/* Header is position:fixed (80px); maquette places the head at y≈207. */
.inno-hero {
	padding-top: 207px;
}
.inno-hero__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}
.inno-hero__title {
	max-width: 1078px;
	margin: 0;
	font: var(--bva-t-header-xl);
}
.inno-hero__media {
	height: 777px;
	/* Full width minus the maquette's 16px gutter (node 2800:4035 = 1408 on 1440);
	   capping at 1408px left dead cream margins on wide screens. */
	margin: 120px 16px 0;
	border-radius: 12px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--bva-img-bg);
}

/* ── Promise (5 stacked stat rows) ───────────────────────── */
.inno-promise__rows {
	margin-top: 80px;
	display: flex;
	flex-direction: column;
	gap: 64px;
}
.inno-promise__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.inno-promise__index {
	margin: 0;
	display: flex;
	gap: 16px;
	align-items: center;
	font: var(--bva-t-label);
	text-transform: uppercase;
	white-space: nowrap;
}
.inno-promise__figure {
	/* Shrinkable: `0 0` kept these desktop columns rigid, which is what forced the
	   page to scroll sideways between the 835 breakpoint and the full rail.
	   672/1360 of the maquette row, so the figure keeps starting mid-row. */
	flex: 0 1 49.4%;
	min-width: 0;
}
/* 320/672 of the figure column: ISO at 1440, and the copy widens with the screen
   rather than sitting in a 600px void once the section runs edge-to-edge. */
.inno-promise__value {
	margin: 0;
	max-width: 47.6%;
	font: 300 96px/1.1 var(--bva-font-sans);
}
.inno-promise__desc {
	margin: 0;
	max-width: 47.6%;
	font: var(--bva-t-paragraphe);
}

/* ── Quote banner (founder / expert, full-bleed) ─────────── */
.inno-quote {
	padding-inline: 16px;
}
.inno-quote__box {
	position: relative;
	display: flex;
	overflow: hidden;
	border-radius: 12px;
	padding: 80px 40px;
	background-color: var(--bva-ink);
}
.inno-quote__media {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.inno-quote__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--bva-ink) 16.5%, rgba(21, 22, 26, 0) 76.3%);
}

/* Portrait variant: the shot is mirrored so the subject faces the copy, pinned to
   the right edge at its own width, and its inner edge is dissolved into the flat
   ink panel with a mask. `inset: 0` + cover blew the portrait up until the face
   was cropped, and a scrim gradient over it left a visible vertical seam.
   Both mask and background-position live in the pre-transform space, so `to
   right` / `right` read mirrored on screen (fade + subject on the left of the
   media box → right of the banner). */
.inno-quote--reveal-right .inno-quote__media {
	left: auto;
	right: 0;
	/* Narrow strip on purpose: the box is panoramic (~2.6:1) while the master is a
	   2:3 portrait, so `cover` scales on WIDTH — a wider strip means a harder zoom
	   and more height thrown away. At 46% the subject reads head-to-shoulders.
	   Vertical anchor at 30% instead of center keeps the crown of the head in
	   frame at any viewport: the crop offset 0.3 × (rendered − box) always stays
	   above the head, which sits ~29% down the master. */
	width: 46%;
	background-position: right 30%;
	transform: scaleX(-1);
	-webkit-mask-image: linear-gradient(to right, #000 45%, transparent 100%);
	mask-image: linear-gradient(to right, #000 45%, transparent 100%);
}
.inno-quote--reveal-right .inno-quote__scrim {
	display: none;
}
.inno-quote__inner {
	position: relative;
	z-index: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 80px;
	max-width: 933px;
	padding-left: 16px;
	border-left: 1px solid rgba(253, 242, 236, 0.3);
	color: var(--bva-vitamine-100);
}
.inno-quote__text {
	margin: 0;
	max-width: 765px;
}
.inno-quote__text p {
	margin: 0 0 1.3em;
	font: var(--bva-t-header-l);
}
.inno-quote__text p:last-child { margin-bottom: 0; }
.inno-quote__author {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	max-width: 581px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(253, 242, 236, 0.3);
}
.inno-quote__brand {
	font: var(--bva-t-label);
	text-transform: uppercase;
}
.inno-quote__sign {
	font: 300 40px/1.1 'Zeyada', cursive;
	white-space: nowrap;
}

/* ── Fundamentals (4 cards) ──────────────────────────────── */
.inno-fundamentals__grid {
	margin-top: 80px;
	display: flex;
	align-items: stretch;
	gap: 16px;
}
.inno-fundamentals__card {
	flex: 1 1 0;
	min-width: 0;
	min-height: 547px;
	display: flex;
	padding: 8px;
	border-radius: 8px;
	background: var(--bva-badge-bg);
}
.inno-fundamentals__card-inner {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 16px;
}
.inno-fundamentals__card-title {
	margin: 0;
	max-width: 290px;
	font: var(--bva-t-header-l);
	color: var(--bva-black);
}
.inno-fundamentals__points {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.inno-fundamentals__point {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 8px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font: var(--bva-t-paragraphe);
	color: var(--bva-black);
}
.inno-fundamentals__point-num { flex: 0 0 auto; }

/* ── Families (7 needs + sticky image) ───────────────────── */
.inno-families__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	padding-left: 40px;
}
.inno-families__txt {
	/* Shrinkable (was `0 0 584px`): the rigid pair 584 + 718 + gaps forced a
	   1382px minimum page width, so the page scrolled sideways from 836 to 1382.
	   Grows past 584 so the column fills the space left by the half-width media
	   instead of opening a dead gap in the middle on wide screens. */
	flex: 1 1 584px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 56px;
}
.inno-families__head {
	display: flex;
	flex-direction: column;
	gap: 37px;
}
.inno-families__title-block {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.inno-families__intro p {
	margin: 0;
	font: var(--bva-t-paragraphe);
}
.inno-families__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 56px;
}
.inno-families__item {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	padding-top: 16px;
	border-top: 1px solid var(--bva-line);
}
.inno-families__item-num {
	flex: 0 0 auto;
	font: var(--bva-t-label);
	text-transform: uppercase;
}
.inno-families__item-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.inno-families__item-name {
	margin: 0;
	font: var(--bva-t-header-s);
	text-transform: uppercase;
}
.inno-families__item-desc {
	margin: 0;
	font: var(--bva-t-paragraphe);
	color: rgba(0, 0, 0, 0.6);
}
.inno-families__media {
	/* Half the width (718/1440 in the maquette) so it stays flush with the right
	   screen edge whatever the viewport; `space-between` on the inner pins it. */
	flex: 0 1 50%;
	min-width: 0;
	align-self: flex-start;
	position: sticky;
	top: 120px;
	/* 900px is the mock height, but a pinned block taller than the viewport keeps
	   its bottom under the fold for the whole pin (900 + 120 needs 1020px of
	   viewport — no current laptop has it). Cap it to the room: the background is
	   `cover`, so it recrops instead of being clipped. */
	height: min(900px, calc(100vh - 120px - 40px));
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--bva-img-bg);
}

/* ── Innovation (charte qualité, 3 rows) ─────────────────── */
.inno-innovation__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}
.inno-innovation__title-block {
	flex: 0 1 33%; /* 448/1360 */
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.inno-innovation__heading {
	margin: 0;
	font: var(--bva-t-header-l);
}
.inno-innovation__intro {
	flex: 0 1 49.4%; /* 672/1360 */
	min-width: 0;
}
.inno-innovation__intro p {
	margin: 0 0 16px;
	font: var(--bva-t-header-s);
}
.inno-innovation__intro p:last-child { margin-bottom: 0; }
.inno-innovation__list {
	margin-top: 92px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.inno-innovation__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	padding: 40px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.inno-innovation__name {
	margin: 0;
	max-width: 560px;
	font: 500 24px/1.1 var(--bva-font-sans);
	text-transform: uppercase;
}
.inno-innovation__desc {
	flex: 0 1 49.4%; /* 672/1360 */
	min-width: 0;
}
.inno-innovation__desc p {
	margin: 0;
	max-width: 48.7%; /* 327/672 — see .inno-promise__desc */
	font: var(--bva-t-paragraphe);
	color: rgba(21, 20, 18, 0.6);
}

/* ── Q&A (image + interview quote) ───────────────────────── */
.inno-qa__inner {
	/* Media bleeds to the left screen edge (maquette node 2800:4224 sits at x=0),
	   copy keeps the 40px gutter on the right. */
	padding-inline: 0 40px;
	display: flex;
	align-items: center;
	gap: 96px;
}
.inno-qa__media {
	flex: 0 1 50%; /* 718/1440 */
	min-width: 0;
	align-self: stretch;
	min-height: 900px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--bva-img-bg);
}
.inno-qa__text {
	/* Shrinkable: 496 + 718 + 96 gap was rigid and overflowed below 1390px.
	   36.5% ≈ 496/1360, and it grows to take whatever the half-width media leaves
	   so the section reaches the right gutter. */
	flex: 1 1 36.5%;
	min-width: 0;
	min-height: 900px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 80px;
}
.inno-qa__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.inno-qa__question {
	margin: 0;
	font: var(--bva-t-header-l);
}
.inno-qa__quote {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.inno-qa__mark {
	font: 300 64px/0.6 var(--bva-font-sans);
	color: var(--bva-black);
}
.inno-qa__answer p {
	margin: 0 0 12px;
	font: var(--bva-t-paragraphe);
	color: rgba(21, 20, 18, 0.6);
}
.inno-qa__answer p:last-child { margin-bottom: 0; }
.inno-qa__author {
	display: flex;
	align-items: center;
	gap: 16px;
}
.inno-qa__brand {
	font: var(--bva-t-label);
	text-transform: uppercase;
	color: var(--bva-black);
}
.inno-qa__sign {
	font: 300 40px/1.1 'Zeyada', cursive;
	color: var(--bva-black);
}

/* ── Purpose (raison d'être, 2-col) ──────────────────────── */
.inno-purpose__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 496px;
}
.inno-purpose__title {
	margin: 0;
	font: var(--bva-t-header-l);
}
.inno-purpose__cols {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--bva-line);
	display: flex;
	justify-content: space-between;
	gap: 102px;
}
.inno-purpose__col {
	flex: 0 1 43%; /* 586/1360 */
	min-width: 0;
}
.inno-purpose__col p {
	margin: 0 0 12px;
	font: var(--bva-t-paragraphe);
	color: rgba(21, 20, 18, 0.6);
}
.inno-purpose__col p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════ *\
	MOBILE / TABLET — single-column stack (best-effort: no mobile
	maquette supplied for this page). Follows about.css structure
	at 835px, phone type scale at 560px.
\* ════════════════════════════════════════════════════════════ */
@media (max-width: 835px) {

	.inno > section + section { margin-top: 80px; }

	/* Hero — title then full-bleed image */
	.inno-hero { padding-top: 46px; }
	.inno-hero__media {
		margin: 56px 0 0;
		/* Full width: the desktop `calc(100% - 32px)` combined with this margin
		   (which drops the desktop `auto`) left the image flush left with a 32px
		   gap on the right. Square corners here mean full-bleed is the intent. */
		width: 100%;
		height: 400px;
		border-radius: 0;
	}

	/* Promise — each row stacks index over figure */
	.inno-promise__rows { gap: 40px; }
	.inno-promise__row {
		flex-direction: column;
		gap: 16px;
	}
	.inno-promise__figure { flex: 0 0 auto; max-width: none; }
	.inno-promise__value { max-width: none; }
	.inno-promise__desc { max-width: none; }

	/* Quote banner — 13px = the .shell mobile gutter (base.css). These sections
	   sit outside .shell (full-bleed by design on desktop), so on mobile they
	   carry the gutter themselves instead of touching the viewport edges. */
	.inno-quote { padding-inline: 13px; }
	.inno-quote__box { padding: 32px 24px; }
	.inno-quote__scrim { background: linear-gradient(to right, var(--bva-ink) 40%, rgba(21, 22, 26, 0.4) 100%); }
	.inno-quote__text p { font-size: 22px; }

	/* Portrait variant: the copy stacks over the full box on a phone, so the media
	   goes back to covering it (a 58%-wide slice shows almost nothing) and the
	   scrim takes over from the mask. The mirror is kept for consistency. */
	.inno-quote--reveal-right .inno-quote__media {
		left: 0;
		width: auto;
		background-position: center;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.inno-quote--reveal-right .inno-quote__scrim {
		display: block;
		background: linear-gradient(to right, var(--bva-ink) 55%, rgba(21, 22, 26, 0.5) 100%);
	}

	/* Fundamentals — cards stack */
	.inno-fundamentals__grid {
		flex-direction: column;
		margin-top: 40px;
	}
	/* flex-basis applies to the main axis: the desktop row uses `1 1 0` to split
	   the width evenly, but once stacked that zeroes each card's HEIGHT — and the
	   grid has no height to hand back via flex-grow, so the cards collapsed to
	   their padding (16px) and the copy spilled onto the card below. */
	.inno-fundamentals__card { flex: 0 0 auto; min-height: 0; }

	/* Families — image on top, single column. The gutter lives on the wrapper so
	   the media and the copy share it (13px = .shell mobile gutter, base.css);
	   this section never goes through .shell. */
	.inno-families__inner {
		flex-direction: column;
		gap: 40px;
		padding-inline: 13px;
	}
	.inno-families__txt { flex: 0 0 auto; gap: 40px; }
	.inno-families__list { gap: 32px; }
	.inno-families__media {
		order: -1;
		position: static;
		flex: 0 0 auto;
		width: 100%;
		height: 400px;
		border-radius: 12px;
	}

	/* Innovation — title/intro stacked, rows name-above-desc */
	.inno-innovation__top {
		flex-direction: column;
		gap: 24px;
	}
	.inno-innovation__title-block,
	.inno-innovation__intro { flex: 0 0 auto; }
	.inno-innovation__list { margin-top: 40px; }
	.inno-innovation__row {
		flex-direction: column;
		gap: 16px;
		padding: 24px 0;
	}
	.inno-innovation__name { max-width: none; }
	.inno-innovation__desc { flex: 0 0 auto; }
	.inno-innovation__desc p { max-width: none; }

	/* Q&A — image on top */
	.inno-qa__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		/* 13px = the .shell mobile gutter (base.css); this section never goes
		   through .shell, so media + copy take it from the wrapper. */
		padding-inline: 13px;
	}
	.inno-qa__media {
		order: -1;
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
		height: 400px;
		border-radius: 12px;
	}
	.inno-qa__text {
		flex: 0 0 auto;
		min-height: 0;
		gap: 40px;
	}
	.inno-qa__answer p { max-width: none; }

	/* Purpose — single column */
	.inno-purpose__cols {
		flex-direction: column;
		gap: 32px;
	}
	.inno-purpose__col { flex: 0 0 auto; max-width: none; }
}

/* ── Phone type scale (Figma Mobile/* variables), scoped to .inno ── */
@media (max-width: 560px) {
	.inno {
		--bva-t-header-xl: 500 36px/1.1 var(--bva-font-sans);
		--bva-t-header-l: 400 24px/1.12 var(--bva-font-sans);
		--bva-t-header-s: 500 18px/1.2 var(--bva-font-sans);
		--bva-t-paragraphe: 300 15px/1.32 var(--bva-font-sans);
		--bva-t-label: 300 11px/1.1 var(--bva-font-mono);
	}
	.inno-section-title,
	.inno-innovation__name { font-size: 18px; }
	.inno-promise__value { font-size: 64px; }
	.inno-quote__sign,
	.inno-qa__sign { font-size: 32px; }
	.inno-qa__mark { font-size: 48px; }
}