/* =========================================================
   Aliya — Theme cinématographique v2
   Le vrai goût, naturellement !
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
	/* Brand palette (PDF identité visuelle) */
	--aliya-red: #D51317;
	--aliya-red-deep: #9A1915;
	--aliya-red-soft: #B11418;
	--aliya-cream: #FDE2CF;
	--aliya-cream-deep: #F4D2B5;
	--aliya-ink: #1A0606;
	--aliya-white: #FFFFFF;

	/* Type */
	--font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-display: 'Fraunces', 'Playfair Display', 'Times New Roman', Georgia, serif;

	/* Type scale — bolder, bigger, more cinematic */
	--fs-xs: clamp(0.75rem, 0.6vw + 0.6rem, 0.95rem);
	--fs-sm: clamp(0.95rem, 0.6vw + 0.7rem, 1.1rem);
	--fs-base: clamp(1.05rem, 0.5vw + 0.9rem, 1.25rem);
	--fs-lg: clamp(1.5rem, 1.6vw + 0.5rem, 2.25rem);
	--fs-xl: clamp(2.5rem, 5.5vw + 0.5rem, 6rem);
	--fs-display: clamp(4rem, 11vw + 0.5rem, 12rem);
	--fs-mega: clamp(6rem, 18vw + 0.5rem, 22rem);

	/* Layout */
	--container-w: 1440px;
	--container-narrow: 1080px;
	--gutter: clamp(1.25rem, 3vw, 3rem);

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis { height: auto; }
html.lenis, html.lenis body { overflow: clip; }
html.lenis.lenis-stopped body { overflow: clip; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: 300;
	line-height: 1.6;
	color: var(--aliya-ink);
	background: var(--aliya-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--aliya-red); color: var(--aliya-cream); }

/* Skip link */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--aliya-red);
	color: var(--aliya-white);
	padding: 0.75rem 1.25rem;
	z-index: 9999;
	border-radius: 0 0 6px 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0; }

/* Layout helpers */
.container {
	width: 100%;
	max-width: var(--container-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* ===========================================================
   TICKER (sticky top bar)
   =========================================================== */
.ticker {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	background: var(--aliya-red);
	color: var(--aliya-cream);
	overflow: hidden;
	padding: 0.55rem 0;
	font-size: var(--fs-xs);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(253, 226, 207, 0.12);
}
.ticker__track {
	display: inline-flex;
	white-space: nowrap;
	gap: 1.5rem;
	padding-inline-start: 1.5rem;
	animation: tickerScroll 38s linear infinite;
	will-change: transform;
}
.ticker__item { display: inline-block; }
.ticker__dot { display: inline-block; opacity: 0.6; font-size: 0.65em; transform: translateY(-2px); }
@keyframes tickerScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ===========================================================
   01 — HERO (cinematic, scroll-scrubbed)
   =========================================================== */
.section { position: relative; }

.section--hero {
	height: 100svh;
	min-height: 640px;
	overflow: hidden;
	background: var(--aliya-red-deep);
	color: var(--aliya-cream);
	display: grid;
	place-items: center;
}
.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	will-change: transform;
}
.hero__backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 28% 22%, rgba(213, 19, 23, 0.85) 0%, transparent 55%),
		radial-gradient(circle at 78% 78%, rgba(154, 25, 21, 0.95) 0%, transparent 60%),
		linear-gradient(155deg, var(--aliya-red-deep) 0%, #4A0808 100%);
	transform: scale(1.05);
}
.hero__overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, transparent 0%, rgba(26, 6, 6, 0.65) 85%),
		linear-gradient(180deg, rgba(26, 6, 6, 0.15) 0%, rgba(26, 6, 6, 0.55) 100%);
	mix-blend-mode: multiply;
}
.hero__noise {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.06;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	mix-blend-mode: overlay;
}

.hero__content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 var(--gutter);
	width: 100%;
	max-width: 1400px;
	will-change: transform;
}
.hero__badge {
	margin: 0 auto 2.5rem;
	width: min(85vw, 820px);
}
.hero__badge img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 30px 80px rgba(0,0,0,0.5));
}
.hero__tagline {
	margin: 0 auto;
	font-size: clamp(1.1rem, 1.8vw + 0.5rem, 2rem);
	font-weight: 200;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	max-width: 900px;
}
.hero__tagline-inner { display: inline-block; }

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 3rem;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	color: var(--aliya-cream);
	z-index: 3;
}
.hero__scroll-label {
	font-size: 0.7rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-weight: 300;
}
.hero__scroll-line {
	width: 1px;
	height: 56px;
	background: linear-gradient(180deg, transparent, var(--aliya-cream) 50%, transparent);
	animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
	0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
	50%      { opacity: 1; transform: scaleY(1.2); }
}

/* Giant background watermark text in hero */
.hero__watermark {
	position: absolute;
	bottom: -0.18em;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-size: clamp(9rem, 30vw, 34rem);
	font-weight: 300;
	letter-spacing: -0.05em;
	color: var(--aliya-cream);
	opacity: 0.09;
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
	line-height: 0.82;
	font-style: italic;
	font-variation-settings: 'opsz' 144, 'SOFT' 80;
}

/* ===========================================================
   02 — INTRO (massive kinetic typography)
   =========================================================== */
.section--intro {
	padding: clamp(10rem, 22vh, 18rem) 0 clamp(8rem, 16vh, 14rem);
	background: var(--aliya-cream);
	color: var(--aliya-red-deep);
	overflow: hidden;
}
.intro__eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.4em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0 0 3rem;
	opacity: 0.55;
}
.intro__statement {
	font-size: var(--fs-xl);
	font-weight: 300;
	line-height: 0.98;
	letter-spacing: -0.035em;
	margin: 0;
}
.intro__statement .line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.06em;
}
.intro__statement .line--accent {
	color: var(--aliya-red);
	font-weight: 500;
	font-style: italic;
}

/* ===========================================================
   MARQUEE — giant kinetic text band (between intro and histoire)
   =========================================================== */
.marquee {
	background: var(--aliya-red);
	color: var(--aliya-cream);
	overflow: hidden;
	padding: clamp(2rem, 4vw, 4rem) 0;
	border-block: 1px solid rgba(253, 226, 207, 0.1);
	position: relative;
}
.marquee__track {
	display: inline-flex;
	gap: 3rem;
	white-space: nowrap;
	font-size: clamp(3rem, 11vw, 12rem);
	font-weight: 300;
	font-style: italic;
	letter-spacing: -0.03em;
	line-height: 1;
	animation: marqueeScroll 28s linear infinite;
	will-change: transform;
}
.marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 3rem;
}
.marquee__dot {
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: var(--aliya-cream);
	flex-shrink: 0;
}
@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Reverse marquee variant */
.marquee--reverse .marquee__track { animation-direction: reverse; }

/* ===========================================================
   03 — NOTRE HISTOIRE (sticky pinned visual)
   =========================================================== */
.section--histoire {
	padding: clamp(8rem, 16vh, 12rem) 0;
	background: var(--aliya-white);
	color: var(--aliya-ink);
	overflow: hidden;
}
.histoire__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(3rem, 6vw, 6rem);
	align-items: start;
}
@media (min-width: 1000px) {
	.histoire__grid {
		grid-template-columns: 0.85fr 1fr;
	}
}
.histoire__media {
	position: relative;
	will-change: transform;
}
@media (min-width: 1000px) {
	.histoire__media {
		position: sticky;
		top: 8rem;
	}
}
.histoire__visual {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: var(--aliya-red);
}
.histoire__visual-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 20%, rgba(253, 226, 207, 0.25) 0%, transparent 55%),
		linear-gradient(160deg, var(--aliya-red) 0%, var(--aliya-red-deep) 100%);
	z-index: 0;
}
.histoire__badge {
	position: relative;
	z-index: 1;
	width: 70%;
	max-width: 360px;
	filter: drop-shadow(0 24px 48px rgba(0,0,0,0.4));
	transition: transform 0.6s var(--ease-out);
}
.histoire__visual:hover .histoire__badge {
	transform: scale(1.05) rotate(-1.5deg);
}

.histoire__eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.4em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--aliya-red);
	margin: 0 0 1.75rem;
}
.histoire__paragraph {
	font-size: clamp(1.05rem, 0.7vw + 0.85rem, 1.35rem);
	line-height: 1.55;
	font-weight: 300;
	margin: 0 0 1.75rem;
	color: #2A1212;
}
.histoire__quote {
	margin: clamp(2.5rem, 5vw, 4rem) 0;
	padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--aliya-red);
	font-family: var(--font-display);
	font-size: clamp(1.85rem, 2.8vw + 0.5rem, 3.5rem);
	font-weight: 400;
	line-height: 1.05;
	font-style: italic;
	letter-spacing: -0.025em;
	font-variation-settings: 'opsz' 144;
}
.histoire__quote > span { display: block; }
.histoire__quote-accent {
	color: var(--aliya-red);
	font-weight: 500;
}

/* ===========================================================
   PRODUCTION FRANÇAISE — trust signal, tricolore accent
   =========================================================== */
.section--france {
	position: relative;
	padding: clamp(8rem, 16vh, 14rem) 0 clamp(8rem, 16vh, 14rem);
	background: #FFFFFF;
	color: var(--aliya-ink);
	overflow: hidden;
	isolation: isolate;
}

/* Tricolore stripe — top edge, full bleed */
.france__tricolore {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	display: flex;
	z-index: 5;
	box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.france__bar { flex: 1; height: 100%; display: block; }
.france__bar--blue  { background: #002654; }
.france__bar--white { background: #FFFFFF; }
.france__bar--red   { background: #CE1126; }

/* Massive "France" word in the background */
.france__bg-word {
	position: absolute;
	bottom: -4%;
	left: -3%;
	font-family: var(--font-display);
	font-size: clamp(8rem, 30vw, 32rem);
	font-weight: 300;
	font-style: italic;
	letter-spacing: -0.045em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--aliya-red);
	text-stroke: 1.5px var(--aliya-red);
	opacity: 0.18;
	line-height: 0.85;
	pointer-events: none;
	z-index: 0;
	white-space: nowrap;
	will-change: transform;
	font-variation-settings: 'opsz' 144;
}

.france__inner { position: relative; z-index: 2; }

/* Eyebrow with inline French flag */
.france__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--aliya-red);
	margin: 0 0 2.5rem;
	padding: 0.5rem 1rem 0.5rem 0.6rem;
	border: 1px solid rgba(213, 19, 23, 0.25);
	border-radius: 999px;
	background: rgba(213, 19, 23, 0.04);
}
.france__flag {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.france__flag svg { display: block; }

/* Title — massive editorial type */
.france__title {
	font-size: var(--fs-xl);
	font-weight: 300;
	line-height: 0.96;
	letter-spacing: -0.035em;
	margin: 0 0 2rem;
	color: var(--aliya-ink);
}
.france__title .line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
}
.france__title .line--accent {
	color: var(--aliya-red);
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-variation-settings: 'opsz' 144;
}

/* Subtitle */
.france__sub {
	font-size: clamp(1.1rem, 0.8vw + 0.85rem, 1.4rem);
	line-height: 1.5;
	font-weight: 300;
	max-width: 640px;
	margin: 0 0 clamp(4rem, 8vh, 6rem);
	color: #2A1212;
}

/* Pillars grid */
.france__pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 4vw, 4rem);
	border-top: 1px solid rgba(154, 25, 21, 0.18);
	padding-top: clamp(3rem, 6vh, 4.5rem);
}
@media (min-width: 760px) {
	.france__pillars { grid-template-columns: repeat(3, 1fr); }
}

.france__pillar {
	position: relative;
	padding-top: 0.5rem;
}
.france__pillar-num {
	display: inline-block;
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1rem, 0.6vw + 0.8rem, 1.25rem);
	font-weight: 500;
	color: var(--aliya-red);
	opacity: 0.65;
	margin-bottom: 1rem;
	letter-spacing: -0.01em;
}
.france__pillar-title {
	font-size: clamp(1.5rem, 1.4vw + 0.5rem, 2rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	margin: 0 0 0.85rem;
	color: var(--aliya-red-deep);
	line-height: 1;
}
.france__pillar-text {
	font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.08rem);
	font-weight: 300;
	line-height: 1.55;
	color: #3A1A1A;
	margin: 0;
	max-width: 32ch;
}

/* Section number tint for france */
.section-num--france { color: var(--aliya-red); opacity: 0.5; }

/* ===========================================================
   04 — LANCEMENT (full-bleed red, massive type)
   =========================================================== */
.section--lancement {
	min-height: 100svh;
	background: var(--aliya-red);
	color: var(--aliya-cream);
	display: grid;
	place-items: center;
	overflow: hidden;
	position: relative;
	padding: clamp(6rem, 14vh, 10rem) 0;
}
.lancement__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(253, 226, 207, 0.15) 0%, transparent 55%),
		radial-gradient(circle at 80% 70%, rgba(154, 25, 21, 0.55) 0%, transparent 55%);
	pointer-events: none;
}
.lancement__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	width: 100%;
}
.lancement__eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.5em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0 0 3.5rem;
	opacity: 0.85;
}
.lancement__title {
	font-size: var(--fs-display);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.04em;
	margin: 0 0 3.5rem;
}
.lancement__title .line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.06em;
}
.lancement__title .line--script {
	font-family: var(--font-display);
	font-weight: 500;
	font-style: italic;
	opacity: 0.98;
	font-variation-settings: 'opsz' 144;
}
.lancement__sub {
	font-size: clamp(1.1rem, 1.1vw + 0.6rem, 1.5rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	margin: 0 auto;
	max-width: 620px;
}
.lancement__pulse {
	position: absolute;
	bottom: 4rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.5rem;
}
.lancement__pulse span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aliya-cream);
	opacity: 0.6;
	animation: pulseDots 1.6s ease-in-out infinite;
}
.lancement__pulse span:nth-child(2) { animation-delay: 0.2s; }
.lancement__pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulseDots {
	0%, 100% { opacity: 0.3; transform: scale(0.8); }
	50%      { opacity: 1; transform: scale(1.1); }
}

/* ===========================================================
   05 — CONTACT
   =========================================================== */
.section--contact {
	padding: clamp(8rem, 16vh, 12rem) 0 3rem;
	background: var(--aliya-cream);
	color: var(--aliya-red-deep);
	text-align: center;
	overflow: hidden;
	position: relative;
}
.contact__eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.4em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0 0 2rem;
	opacity: 0.65;
}
.contact__title {
	font-size: clamp(2.75rem, 5.5vw + 0.5rem, 6rem);
	font-weight: 300;
	line-height: 0.98;
	letter-spacing: -0.035em;
	margin: 0 0 3.5rem;
}
.contact__title .line--accent {
	color: var(--aliya-red);
	font-weight: 500;
	font-style: italic;
}
.contact__mail {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: clamp(1.75rem, 4vw + 0.5rem, 4rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--aliya-red);
	border-bottom: 2px solid currentColor;
	padding: 0.4rem 0.2rem;
	transition: gap 0.4s var(--ease-out), color 0.3s var(--ease-out);
}
.contact__mail:hover {
	gap: 1.5rem;
	color: var(--aliya-red-deep);
}
.contact__mail-arrow {
	display: inline-block;
	transition: transform 0.4s var(--ease-out);
}
.contact__mail:hover .contact__mail-arrow {
	transform: translateX(8px);
}
.contact__note {
	margin: 2.5rem auto 0;
	max-width: 560px;
	font-size: var(--fs-sm);
	font-weight: 300;
	opacity: 0.7;
	line-height: 1.55;
}

/* Footer */
.footer {
	margin-top: clamp(6rem, 14vh, 9rem);
	padding-top: 2rem;
	border-top: 1px solid rgba(154, 25, 21, 0.15);
}
.footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aliya-red-deep);
	opacity: 0.7;
}
.footer__logo img {
	height: 32px;
	width: auto;
	opacity: 0.85;
}
.footer__tagline { font-style: italic; text-transform: none; letter-spacing: 0.04em; }

/* ===========================================================
   Animation prep — initial hidden states
   IMPORTANT: hide ONLY the inner spans, NOT the wrappers.
   ===========================================================
*/

/* reveal-up: hide self, animate self */
[data-anim="reveal-up"] {
	opacity: 0;
	transform: translateY(40px);
	will-change: transform, opacity;
}

/* line-reveal: hide ONLY the inner span (the actual word).
   The .word wrapper is the overflow:hidden window, and stays visible. */
[data-anim="line-reveal"] .word {
	display: inline-block;
	overflow: hidden;
	padding-bottom: 0.05em;
	vertical-align: bottom;
}
[data-anim="line-reveal"] .word > .word__inner {
	display: inline-block;
	opacity: 0;
	transform: translateY(110%);
	will-change: transform, opacity;
}

/* hero specials: opacity hidden until JS reveals */
[data-anim="hero-badge"] {
	opacity: 0;
	will-change: transform, opacity;
}
[data-anim="hero-tagline"] {
	opacity: 0;
}
[data-anim="hero-tagline"] .word > .word__inner {
	display: inline-block;
	opacity: 0;
	transform: translateY(110%);
	will-change: transform, opacity;
}
[data-anim="hero-scroll"] {
	opacity: 0;
}

/* ===========================================================
   Responsive tweaks
   =========================================================== */
@media (max-width: 720px) {
	.section--hero { min-height: 580px; }
	.hero__scroll { bottom: 2rem; }
	.hero__scroll-line { height: 36px; }
	.lancement__pulse { bottom: 2.5rem; }
	.histoire__media { position: relative !important; top: auto !important; }
}

/* ===========================================================
   v1.1 — EXPERIMENTAL TYPOGRAPHY + DECORATIVE LAYER
   Cinematic parallax cutouts, editorial typographic system,
   section serial numbers, mega watermarks, mixed weights.
   =========================================================== */

/* ---------- Section serial numbers (editorial mark) ---------- */
.section-num {
	position: absolute;
	top: clamp(1rem, 2.5vh, 2rem);
	left: clamp(1rem, 3vw, 3rem);
	font-size: clamp(0.7rem, 0.5vw + 0.55rem, 0.85rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	opacity: 0.45;
	z-index: 5;
	pointer-events: none;
	will-change: transform;
}
.section-num--hero { color: var(--aliya-cream); }
.section-num--manifeste { color: var(--aliya-red); opacity: 0.55; }
.section-num--intro { color: var(--aliya-red); opacity: 0.45; }
.section-num--histoire { color: var(--aliya-red); opacity: 0.5; }
.section-num--lancement { color: var(--aliya-cream); opacity: 0.55; }
.section-num--contact { color: var(--aliya-red); opacity: 0.5; }

/* ---------- Hero glow orbs (parallax light) ---------- */
.hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
	will-change: transform;
	z-index: 0;
	mix-blend-mode: screen;
}
.hero__glow--1 {
	top: -10%;
	left: -10%;
	width: 60vw;
	height: 60vw;
	background: radial-gradient(circle, rgba(213, 19, 23, 0.55) 0%, transparent 70%);
	opacity: 0.7;
}
.hero__glow--2 {
	bottom: -15%;
	right: -15%;
	width: 70vw;
	height: 70vw;
	background: radial-gradient(circle, rgba(253, 226, 207, 0.18) 0%, transparent 70%);
	opacity: 0.85;
}

/* ---------- Hero edge ribbons (vertical typographic tags) ---------- */
.hero__edge {
	position: absolute;
	top: 50%;
	z-index: 4;
	color: var(--aliya-cream);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	opacity: 0.5;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	pointer-events: none;
	white-space: nowrap;
	will-change: transform;
}
.hero__edge--left {
	left: clamp(1.25rem, 3vw, 3rem);
	transform: translateY(-50%) rotate(-90deg);
	transform-origin: 0 50%;
}
.hero__edge--right {
	right: clamp(1.25rem, 3vw, 3rem);
	transform: translateY(-50%) rotate(90deg);
	transform-origin: 100% 50%;
}
.hero__edge-dot { font-size: 0.45em; opacity: 0.7; }

/* ---------- Hero tagline ornaments (quote marks) ---------- */
.hero__tag-orn {
	display: inline-block;
	font-size: 1.4em;
	line-height: 1;
	color: var(--aliya-red);
	font-style: italic;
	opacity: 0.85;
	margin: 0 0.4em;
}
.hero__tag-orn--l { transform: translateY(0.1em) rotate(-6deg); }
.hero__tag-orn--r { transform: translateY(0.1em) rotate(6deg); }

/* ---------- Decorative cutouts (sausage parallax) ---------- */
.deco {
	position: absolute;
	pointer-events: none;
	user-select: none;
	will-change: transform, opacity;
}
.deco--sausage,
.deco--merguez {
	filter:
		drop-shadow(0 30px 60px rgba(26, 6, 6, 0.45))
		drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}
.deco--hero {
	z-index: 2;
	transform-origin: 50% 50%;
	filter:
		drop-shadow(0 40px 70px rgba(0, 0, 0, 0.65))
		drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}
.deco--hero-r {
	width: clamp(420px, 50vw, 880px);
	bottom: -12%;
	right: -12%;
	opacity: 0.95;
}
.deco--hero-l {
	width: clamp(280px, 32vw, 540px);
	top: 8%;
	left: -10%;
	opacity: 0.85;
	transform: rotate(8deg);
	z-index: 1;
}
.deco--histoire {
	width: clamp(260px, 28vw, 460px);
	top: 6%;
	right: -8%;
	z-index: 4;
	opacity: 0.94;
	transform-origin: 50% 50%;
}
.deco--lancement {
	width: clamp(380px, 44vw, 780px);
	bottom: -12%;
	left: -8%;
	z-index: 1;
	opacity: 0.85;
	transform-origin: 50% 50%;
	filter:
		drop-shadow(0 45px 90px rgba(26, 6, 6, 0.6))
		drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
}
.deco--manifeste {
	width: clamp(280px, 30vw, 520px);
	top: 10%;
	right: -6%;
	z-index: 4;
	opacity: 0.92;
	transform: rotate(-12deg);
	transform-origin: 50% 50%;
	filter:
		drop-shadow(0 35px 60px rgba(26, 6, 6, 0.35))
		drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25));
}

/* ===========================================================
   MANIFESTE — experimental editorial pull-quote section
   =========================================================== */
.section--manifeste {
	position: relative;
	padding: clamp(8rem, 18vh, 14rem) 0 clamp(6rem, 14vh, 12rem);
	background: var(--aliya-cream);
	color: var(--aliya-ink);
	overflow: hidden;
	text-align: left;
}
.manifeste__bg-word {
	position: absolute;
	top: 50%;
	left: -3%;
	transform: translateY(-50%);
	font-family: var(--font-display);
	font-size: clamp(8rem, 30vw, 34rem);
	font-weight: 300;
	font-style: italic;
	letter-spacing: -0.05em;
	color: var(--aliya-red);
	opacity: 0.08;
	line-height: 0.85;
	pointer-events: none;
	z-index: 0;
	white-space: nowrap;
	will-change: transform;
	font-variation-settings: 'opsz' 144;
}
.manifeste__eyebrow {
	position: relative;
	z-index: 1;
	font-size: var(--fs-xs);
	letter-spacing: 0.4em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--aliya-red);
	margin: 0 0 3rem;
	opacity: 0.75;
}
.manifeste__quote {
	position: relative;
	z-index: 1;
	margin: 0 0 3rem;
	font-family: var(--font-display);
	font-size: clamp(3rem, 9vw + 0.5rem, 10rem);
	font-weight: 400;
	line-height: 0.92;
	letter-spacing: -0.035em;
	color: var(--aliya-red-deep);
	font-variation-settings: 'opsz' 144;
}
.manifeste__line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.06em;
}
.manifeste__line--1 {
	font-style: normal;
	font-weight: 300;
}
.manifeste__line--2 {
	padding-left: clamp(1rem, 5vw, 4rem);
	color: var(--aliya-red);
	font-weight: 500;
	font-style: italic;
}
.manifeste__line--3 {
	padding-left: clamp(2rem, 10vw, 8rem);
	font-style: italic;
	font-weight: 200;
}
.manifeste__sub {
	position: relative;
	z-index: 1;
	font-size: clamp(1.05rem, 0.8vw + 0.7rem, 1.4rem);
	font-weight: 300;
	line-height: 1.55;
	color: var(--aliya-ink);
	max-width: 540px;
	margin: 0;
	opacity: 0.85;
}
.manifeste__sub-accent {
	color: var(--aliya-red);
	font-weight: 500;
	font-style: italic;
}

/* ===========================================================
   INTRO — experimental mixed typography
   =========================================================== */
.intro__big-orn {
	position: absolute;
	top: 6%;
	left: -1%;
	font-family: var(--font-display);
	font-size: clamp(10rem, 28vw, 32rem);
	line-height: 1;
	color: var(--aliya-red);
	opacity: 0.1;
	font-style: italic;
	font-weight: 400;
	pointer-events: none;
	z-index: 0;
	will-change: transform;
	font-variation-settings: 'opsz' 144;
}
.intro__statement .line--regular { font-weight: 200; font-style: normal; }
.intro__statement .line--bold {
	font-weight: 600;
	letter-spacing: -0.045em;
}
.intro__statement .line--italic {
	font-family: var(--font-display);
	font-weight: 400;
	font-style: italic;
	padding-left: clamp(1rem, 4vw, 3rem);
	font-variation-settings: 'opsz' 144;
}
.intro__statement .line em {
	font-style: italic;
	font-weight: 400;
	color: var(--aliya-red);
}
.section--intro { position: relative; }

/* ===========================================================
   HISTOIRE — experimental editorial layout
   =========================================================== */
.section--histoire { position: relative; }
.histoire__bg-word {
	position: absolute;
	top: 6%;
	right: -4%;
	font-family: var(--font-display);
	font-size: clamp(8rem, 32vw, 34rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.045em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--aliya-red);
	text-stroke: 1.5px var(--aliya-red);
	opacity: 0.32;
	line-height: 0.85;
	pointer-events: none;
	z-index: 0;
	white-space: nowrap;
	will-change: transform;
	font-variation-settings: 'opsz' 144;
}
.histoire__chapitre {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	z-index: 2;
	color: var(--aliya-cream);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	opacity: 0.85;
}
.histoire__chapitre em {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 1.5em;
	margin-left: 0.4em;
	letter-spacing: 0;
	font-variation-settings: 'opsz' 144;
}
.histoire__dropcap {
	float: left;
	font-family: var(--font-display);
	font-size: 4.6em;
	line-height: 0.82;
	margin: 0.05em 0.15em -0.1em 0;
	font-weight: 400;
	font-style: italic;
	color: var(--aliya-red);
	font-variation-settings: 'opsz' 144;
}
.histoire__paragraph--lead {
	font-size: clamp(1.15rem, 0.8vw + 0.9rem, 1.5rem);
	line-height: 1.55;
}
.histoire__paragraph strong { font-weight: 600; color: var(--aliya-red-deep); }
.histoire__paragraph em { font-style: italic; }
.histoire__quote-orn {
	display: block;
	font-family: var(--font-display);
	font-size: 5em;
	line-height: 0.5;
	color: var(--aliya-red);
	opacity: 0.75;
	font-style: italic;
	font-weight: 500;
	margin-bottom: 0.3em;
	margin-left: -0.05em;
	font-variation-settings: 'opsz' 144;
}
/* (block layout handled above via direct-child selector to avoid colliding with splitText .word spans) */

/* ===========================================================
   LANCEMENT — mega watermark + mixed type
   =========================================================== */
.lancement__watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: var(--font-display);
	font-size: clamp(10rem, 36vw, 42rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.05em;
	color: transparent;
	-webkit-text-stroke: 1.8px var(--aliya-cream);
	text-stroke: 1.8px var(--aliya-cream);
	opacity: 0.18;
	line-height: 0.78;
	pointer-events: none;
	z-index: 0;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	will-change: transform;
	font-variation-settings: 'opsz' 144;
}
.lancement__title .line--bold {
	font-weight: 500;
	letter-spacing: -0.045em;
}
.lancement__title .line--regular { font-weight: 200; font-style: normal; }
.lancement__eyebrow-mono {
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
	letter-spacing: 0.05em;
	opacity: 0.65;
}
.lancement__sub em {
	font-style: italic;
	font-weight: 300;
}

/* ===========================================================
   CONTACT — typographic flourish
   =========================================================== */
.section--contact { position: relative; }
.contact__big-at {
	position: absolute;
	top: 4%;
	right: 2%;
	font-family: var(--font-display);
	font-size: clamp(8rem, 26vw, 30rem);
	line-height: 1;
	color: var(--aliya-red);
	opacity: 0.1;
	font-style: italic;
	font-weight: 400;
	pointer-events: none;
	z-index: 0;
	will-change: transform;
	font-variation-settings: 'opsz' 144;
}
.contact__title .line--italic {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-variation-settings: 'opsz' 144;
}
.contact__footer-mark {
	display: block;
	text-align: center;
	font-family: var(--font-display);
	font-size: clamp(5rem, 22vw, 24rem);
	font-weight: 400;
	font-style: italic;
	color: var(--aliya-red);
	opacity: 0.13;
	line-height: 0.8;
	margin-top: 2rem;
	letter-spacing: -0.04em;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	will-change: transform;
	font-variation-settings: 'opsz' 144, 'SOFT' 80;
}

/* ===========================================================
   Mobile typographic adjustments
   =========================================================== */
@media (max-width: 720px) {
	.hero__edge { font-size: 0.55rem; gap: 0.75rem; opacity: 0.4; }
	.deco--hero-r { width: 78vw; bottom: -4%; right: -22%; }
	.deco--hero-l { width: 55vw; top: 6%; left: -18%; }
	.deco--histoire { width: 55vw; top: 4%; right: -22%; }
	.deco--lancement { width: 80vw; bottom: -4%; left: -22%; }
	.deco--manifeste { width: 50vw; top: 5%; right: -18%; }
	.manifeste__quote { font-size: clamp(2.5rem, 14vw, 5rem); }
	.manifeste__line--2 { padding-left: 0.8rem; }
	.manifeste__line--3 { padding-left: 1.6rem; }
	.histoire__bg-word,
	.lancement__watermark,
	.manifeste__bg-word,
	.intro__big-orn,
	.contact__big-at,
	.contact__footer-mark {
		font-size: clamp(5rem, 32vw, 14rem);
	}
	.section-num { left: 1rem; top: 0.75rem; letter-spacing: 0.22em; }
	.histoire__dropcap { font-size: 3em; }
}

/* ===========================================================
   Reduced motion
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.ticker__track,
	.marquee__track { animation: none; transform: none; }
	.hero__video { display: none; }
	.section--hero { background: var(--aliya-red); }

	[data-anim] { opacity: 1 !important; transform: none !important; }
	[data-anim="line-reveal"] .word > .word__inner,
	[data-anim="hero-tagline"] .word > .word__inner {
		opacity: 1 !important;
		transform: none !important;
	}
}