/* ===== LP Parkinson 2026 — Header (Figma) ===== */

#header_adf {
	background-image:
		linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 18%),
		linear-gradient(100deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 78%),
		url("/assets/img/2026/hero-desktop.jpg") !important;
	background-repeat: no-repeat !important;
	/* 2x export of the 1200x571 Figma frame. The desktop header keeps the
	   photo's ratio, so cover shows it at exactly the full screen width. */
	background-position: left top, left center, 38% top !important;
	background-size: 100% 140px, cover, cover !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Desktop: the header follows the photo's 2400x1142 ratio so the photo
   spans the full screen width with no zoom, and the blue banner sits right
   below it. Floored at 480px so the text still fits on small laptops (the
   photo zooms in slightly there). */
@media (min-width: 901px) {
	#header_adf {
		height: max(calc(100vw * 1142 / 2400), 480px) !important;
		min-height: 0 !important;
		width: 100% !important;
		margin: 0 !important;
	}
}

/* From 1080px: wider shot of the same photo (same 2400x1142 ratio) so the
   face doesn't get too big. */
@media (min-width: 1080px) {
	#header_adf {
		background-image:
			linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 18%),
			linear-gradient(100deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 78%),
			url("/assets/img/2026/hero-desktop-xl.jpg") !important;
		/* Keep the top 180px of the blue banner (its text, not its button) in
		   the first screen: the header shrinks below the photo's ratio,
		   cropping the photo mostly at the top, where the hair has more room
		   than the chin. Never below 86% of the ratio height, where the crop
		   would reach the chin, nor below 480px so the text still fits. */
		--hero-ratio-h: calc(100vw * 1142 / 2400);
		height: clamp(
			max(calc(var(--hero-ratio-h) * .86), 480px),
			calc(100vh - 180px),
			var(--hero-ratio-h)
		) !important;
		background-position: left top, left center, 38% 60% !important;
	}
}

#header_adf #nav {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	height: 88px !important;
	z-index: 90 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 0 20px 0 40px !important;
	background-color: transparent !important;
	box-shadow: none !important;
	transition: background-color .25s ease-in-out, box-shadow .25s ease-in-out !important;
}
#header_adf #nav:before,
#header_adf #nav:after {
	content: none !important;
	display: none !important;
}
#header_adf #nav.is-scrolled {
	background-color: rgba(255, 255, 255, .82) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .1) !important;
}

#header_adf #nav .logo {
	position: relative !important;
	float: none !important;
	z-index: 99 !important;
	filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.422)) !important;
	transition: filter .25s ease-in-out !important;
}
/* White logo over the photo; colored logo once the white sticky bar is in place. */
#header_adf #nav .logo__img {
	transition: opacity .25s ease-in-out !important;
}
#header_adf #nav .logo__img--blue {
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	width: 100% !important;
	transform: translateY(-50%) !important;
	opacity: 0 !important;
}
#header_adf #nav.is-scrolled .logo {
	filter: none !important;
}
#header_adf #nav.is-scrolled .logo__img--white {
	opacity: 0 !important;
}
#header_adf #nav.is-scrolled .logo__img--blue {
	opacity: 1 !important;
}

#header_adf .hero-cta {
	display: inline-block !important;
	background-color: #FA4616 !important;
	color: #FFFFFF !important;
	font-family: "Gotham", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	text-transform: uppercase !important;
	text-align: center !important;
	padding: 16px 48px !important;
	border-radius: 90px !important;
	text-decoration: none !important;
	position: static !important;
	z-index: 99 !important;
	transition: transform .15s ease-in-out !important;
}
#header_adf .hero-cta:hover {
	transform: scale(1.05) !important;
}

.hero-2026 {
	flex: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	/* Center the text within the darkened zone to the right of the head
	   (the gradient on #header_adf starts fading in at ~45% width), not
	   flush against the right edge — matches Figma (text block centered
	   at ~71% of the frame, same as the gradient's own midpoint). */
	padding: 120px 6vw 40px 45% !important;
}

.hero-2026__text {
	max-width: 480px !important;
	text-align: center !important;
	color: #FFFFFF !important;
}

.hero-2026__kicker {
	font-family: "Gotham", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 30px !important;
	text-transform: uppercase !important;
	letter-spacing: .5px !important;
	margin: 0 0 10px !important;
	text-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
}

.hero-2026__symptoms {
	font-family: "Gotham", Arial, sans-serif !important;
	font-weight: 400 !important;
	font-size: 36px !important;
	line-height: .97 !important;
	margin: 0 0 18px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}
.hero-2026__symptoms-line {
	display: block !important;
}
.hero-2026__symptoms-line--2 {
	transform: translateX(-.53em) !important;
}
.hero-2026__symptoms-line--3 {
	transform: translateX(.67em) !important;
}

.hero-2026__tagline {
	font-family: "Gotham", Arial, sans-serif !important;
	font-weight: 400 !important;
	font-size: 22px !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	text-shadow: 0 1px 10px rgba(0,0,0,.5) !important;
}
.hero-2026__tagline b {
	color: #FA4616 !important;
	font-weight: 700 !important;
}

/* Large screens: the header grows with the viewport width, so the text
   block scales with it (same sizes as above at 1280px, capped at 1.6x). */
@media (min-width: 1280px) {
	.hero-2026__text {
		max-width: min(37.5vw, 768px) !important;
	}
	.hero-2026__kicker {
		font-size: min(2.34vw, 48px) !important;
	}
	.hero-2026__symptoms {
		font-size: min(2.81vw, 58px) !important;
	}
	.hero-2026__tagline {
		font-size: min(1.72vw, 35px) !important;
	}
}

/* ---------- Bloc témoignage et chiffres clé ---------- */
#chiffres .row.max-width {
	padding-top: 40px !important;
}
@media (min-width: 641px) {
	#chiffres .row.max-width {
		display: flex !important;
		align-items: center !important;
	}
}
#chiffres .text-quote {
	padding-top: 24px !important;
}
#chiffres .text-quote img.q-o {
	top: 0 !important;
	left: -10px !important;
}
#chiffres .text-quote .quote-body {
	position: relative !important;
}
#chiffres .text-quote .quote-body img.q-c {
	position: absolute !important;
	bottom: 0 !important;
	right: -30px !important;
}
#chiffres .text-quote p {
	margin: 0 0 16px 0 !important;
}
#chiffres .text-quote p.quote-highlight {
	font-size: 20px !important;
	font-style: italic !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #E85118 !important;
}
#chiffres .right {
	padding-top: 0 !important;
}
/* Below 641px the quote and the key figures stack (row isn't flex, see
   above), so they need their own gap or they read as one block. */
@media (max-width: 640px) {
	#chiffres .right {
		padding-top: 48px !important;
	}
}

/* ---------- ADN / transition illustration ---------- */
/* Full-bleed, right-aligned, same disposition as reference: helix band
   across the top with the dot-figure trailing down the right edge.
   Desktop: legs get cut under the blue don-2026 band (negative margin
   pulls the section's own bottom up so don-2026 covers them). */
.adn-transition {
	width: 100% !important;
	margin: 0 !important;
}
.adn-transition img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}
.adn-transition--mobile {
	display: none !important;
}
@media (max-width: 640px) {
	.adn-transition--desktop {
		display: none !important;
	}
	.adn-transition--mobile {
		display: block !important;
	}
}
.adn-transition--desktop,
.adn-transition--mobile {
	position: relative !important;
	z-index: 1 !important;
	overflow: hidden !important;
	margin-bottom: -33.8% !important;
}

/* ---------- Don section (amount selector) ---------- */
.don-2026 {
	position: relative !important;
	z-index: 2 !important;
	background-color: #142879 !important;
	padding: 56px 16px 60px !important;
	text-align: center !important;
}
.don-2026__title {
	color: #FFFFFF !important;
	font-family: "Gotham", Arial, sans-serif !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	font-size: clamp(20px, 2.6vw, 29px) !important;
	line-height: 1.35 !important;
	max-width: 830px !important;
	margin: 0 auto 18px !important;
}
.don-2026__title b {
	font-weight: 700 !important;
}
.don-2026__subtitle {
	color: #24BCEF !important;
	font-family: "Gotham", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(16px, 1.8vw, 22px) !important;
	line-height: 1.4 !important;
	max-width: 830px !important;
	margin: 0 auto 18px !important;
}
.don-2026__desc {
	color: #FFFFFF !important;
	font-family: "Gotham", Arial, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	max-width: 500px !important;
	margin: 0 auto 32px !important;
}

.amount-selector {
	display: flex !important;
	align-items: stretch !important;
	justify-content: center !important;
	max-width: 620px !important;
	margin: 0 auto 24px !important;
	background: #C9D4EC !important;
	border-radius: 999px !important;
}
.amount-selector__group {
	position: relative !important;
	display: flex !important;
	flex: 1 1 0 !important;
	border-radius: 999px !important;
	overflow: hidden !important;
}
.amount-selector__highlight {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 33.3334% !important;
	height: 100% !important;
	background: #24BCEF !important;
	border-radius: 999px !important;
	transition: transform .25s ease-in-out !important;
	z-index: 0 !important;
}
@media (min-width: 641px) {
	.amount-selector__highlight--last {
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}
	.amount-selector__group--last {
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}
}
.amount-selector__item {
	position: relative !important;
	z-index: 1 !important;
	flex: 1 1 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	align-content: center !important;
	justify-content: center !important;
	gap: 1px !important;
	padding: 14px 12px !important;
	font-family: "Montserrat", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 30.5px !important;
	color: #203B7C !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	transition: color .15s ease-in-out !important;
}
.amount-selector__item.is-active {
	color: #FFFFFF !important;
}
.amount-selector__unit {
	font-size: 17.79px !important;
}
.amount-selector__other {
	position: relative !important;
	z-index: 2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	margin-left: -28px !important;
	padding: 14px 24px !important;
	background: #FFFFFF !important;
	color: #203B7C !important;
	font-family: "Montserrat", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	border-radius: 999px !important;
	white-space: nowrap !important;
	cursor: text !important;
}
.amount-selector__other input {
	width: 140px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	font-size: 17.56px !important;
	color: inherit !important;
	text-align: center !important;
	-moz-appearance: textfield !important;
}
.amount-selector__other input:focus {
	box-shadow: none !important;
}
.amount-selector__other input::placeholder {
	color: #203B7C !important;
	opacity: 1 !important;
	font-weight: 700 !important;
}
.amount-selector__other input::-webkit-outer-spin-button,
.amount-selector__other input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.don-2026__note {
	color: #FFFFFF !important;
	font-family: "Gotham", Arial, sans-serif !important;
	font-size: 16px !important;
	margin: 0 0 24px !important;
}
.don-2026__note b { font-weight: 700 !important; }

.don-2026__cta {
	display: inline-block !important;
	background-color: #FA4616 !important;
	color: #FFFFFF !important;
	font-family: "Gotham", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	padding: 15px 54px !important;
	border-radius: 83px !important;
	text-decoration: none !important;
	transition: transform .15s ease-in-out !important;
}
.don-2026__cta:hover { transform: scale(1.05) !important; }

@media (max-width: 640px) {
	.amount-selector { flex-wrap: wrap !important; border-radius: 24px !important; }
	.amount-selector__group { flex: 1 1 100% !important; }
	.amount-selector__other { margin: 10px 0 0 !important; flex: 1 0 100% !important; }
}

/* ---------- Mobile header (Figma "Header LP mobile") ----------
   Also used on tablet widths (<= 900px): the text stays anchored at the
   bottom of the portrait photo instead of overlapping the face. */
@media (max-width: 900px) {
	/* Figma crop: photo height = 144.07% of the header, bottom-anchored, face
	   (31.8% across the 850x900 source) centered. Never narrower than the
	   viewport, and the x-offset stays clamped so no edge gap shows. */
	#header_adf {
		/* Full screen height, floored so the text never runs into the face. */
		--hero-h: max(560px, 100vh);
		--photo-h: max(calc(var(--hero-h) * 1.4407), calc(100vw * 1.0588));
		--photo-w: calc(var(--photo-h) * 0.9444);
		background-image:
			linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.65) 100%),
			linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 20%),
			url("/assets/img/2026/hero-mobile.jpg") !important;
		background-repeat: no-repeat !important;
		background-position:
			center top,
			center top,
			clamp(calc(100vw - var(--photo-w)), calc(50vw - var(--photo-w) * 0.318), 0px) 100% !important;
		background-size: 100% 100%, 100% 120px, auto var(--photo-h) !important;
		height: var(--hero-h) !important;
	}
	/* svh excludes the mobile browser's URL bar, so the hero ends exactly at
	   the bottom of the visible screen on arrival. */
	@supports (height: 100svh) {
		#header_adf {
			--hero-h: max(560px, 100svh);
		}
	}

	#header_adf #nav {
		height: 64px !important;
		padding: 0 16px !important;
	}
	#header_adf .hero-cta {
		font-size: 12px !important;
		padding: 11px 20px !important;
	}

	.hero-2026 {
		flex-direction: column !important;
		justify-content: flex-end !important;
		align-items: center !important;
		padding: 24px 24px 40px !important;
	}

	.hero-2026__text {
		max-width: 340px !important;
	}

	.hero-2026__kicker {
		display: inline-block !important;
		background-color: rgba(0,0,0,.2) !important;
		box-shadow: inset 2px 1px 6px 0px rgba(0,0,0,.3) !important;
		border-radius: 6px !important;
		padding: 10px 24px !important;
		font-size: 21px !important;
		margin: 0 0 22px !important;
	}
	.hero-2026__symptoms { font-size: 27px !important; margin-bottom: 14px !important; }
	.hero-2026__tagline { font-size: 22px !important; }
}

/* ---------- SPARK research cards ---------- */
#fixed .box.spark p, #fixed .box.spark li {
	font-family: "Gotham", Arial, sans-serif !important;
	color: #001432 !important;
}
#fixed .box.spark .row.title {
	text-align: center !important;
}
#fixed .box.spark .row.title p {
	color: #009CB6 !important;
	font-size: 22px !important;
	text-transform: uppercase !important;
	font-weight: bold !important;
	padding-bottom: 10px !important;
}
#fixed .box.spark p + p {
	margin-top: 14px !important;
}
#fixed .box.spark ul.spark-list {
	margin: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
}
#fixed .box.spark ul.spark-list li {
	margin-bottom: 14px !important;
	line-height: 1.5 !important;
	position: relative !important;
	padding-left: 20px !important;
}
#fixed .box.spark ul.spark-list li::before {
	content: '' !important;
	position: absolute !important;
	left: 2px !important;
	top: 7px !important;
	width: 9px !important;
	height: 9px !important;
	border-radius: 50% !important;
	background: #009CB6 !important;
}
.dot-divider {
	width: 183px !important;
	max-width: 100% !important;
	height: 1px !important;
	border: none !important;
	margin: 0 auto 16px !important;
	position: relative !important;
	overflow: visible !important;
}
.dot-divider::before,
.dot-divider::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	transform: translateY(-50%) !important;
}
.dot-divider::before { left: -3px !important; }
.dot-divider::after { right: -3px !important; }
.dot-divider--teal {
	background: #009CB6 !important;
}
.dot-divider--teal::before,
.dot-divider--teal::after {
	background: #009CB6 !important;
}

#fixed .box.spark p.spark-lead {
	color: #009CB6 !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}
#fixed .box.spark .emph {
	font-weight: 500 !important;
}

.spark-perspectives {
	background-color: #FFFFFF !important;
	/* Figma: rounded on 3 corners (rx 60 / ry 39), square bottom-right */
	border-radius: 60px 60px 0 60px / 39px 39px 0 39px !important;
	max-width: 100% !important;
	margin: 24px auto 0 !important;
	padding: 40px 50px !important;
	text-align: left !important;
}
.spark-perspectives__title {
	color: #E85118 !important;
	font-family: "Gotham", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 25px !important;
	text-transform: uppercase !important;
	text-align: center !important;
	margin: 0 0 16px !important;
}
.spark-perspectives__divider {
	width: 100% !important;
	max-width: 446px !important;
	height: 1px !important;
	background: #E85118 !important;
	border: none !important;
	margin: 0 auto 24px !important;
	position: relative !important;
}
.spark-perspectives__divider::before,
.spark-perspectives__divider::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	width: 6px !important;
	height: 6px !important;
	background: #E85118 !important;
	border-radius: 50% !important;
	transform: translateY(-50%) !important;
}
.spark-perspectives__divider::before { left: -3px !important; }
.spark-perspectives__divider::after { right: -3px !important; }
.spark-perspectives p.body {
	color: #000000 !important;
	font-family: "Gotham", Arial, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	text-align: left !important;
}
@media (max-width: 640px) {
	.spark-perspectives { padding: 30px 24px !important; }
}

/* ---------- Pictos (4 axes) — mobile carousel card ---------- */
.pictos-mobile {
	display: none !important;
}
@media (max-width: 640px) {
	.pictos-desktop {
		display: none !important;
	}
	.pictos-mobile {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		background-color: #142879 !important;
		border-radius: 24px !important;
		padding: 32px 28px !important;
		margin: 0 16px !important;
	}
}
.pictos-mobile__intro {
	text-align: left !important;
}
.pictos-mobile__intro p {
	color: #FFFFFF !important;
	font-family: "Gotham", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 28px !important;
	line-height: 1.25 !important;
	margin: 0 !important;
}
.pictos-mobile__divider {
	width: 60px !important;
	height: 2px !important;
	margin: 20px 0 28px !important;
	background-color: #FA4616 !important;
}
.pictos-mobile__slide {
	text-align: center !important;
	min-width: 0 !important;
}
.pictos-mobile__icon {
	width: 72px !important;
	height: auto !important;
	margin: 0 auto 16px !important;
}
.pictos-mobile__title {
	color: #FFFFFF !important;
	font-family: "Gotham", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	margin: 0 0 10px !important;
}
.pictos-mobile__desc {
	color: rgba(255, 255, 255, .85) !important;
	font-family: "Gotham", Arial, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	margin: 0 0 20px !important;
}
.pictos-mobile__dots {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
}
.pictos-mobile__dot {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 10px !important;
	height: 10px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, .3) !important;
	cursor: pointer !important;
	transition: background-color .2s ease-in-out, transform .2s ease-in-out !important;
}
.pictos-mobile__dot.is-active {
	background-color: #FA4616 !important;
	transform: scale(1.3) !important;
}