/* ============================================================
   PUZZLE · Atelier adaptation of "The Smiling Studio"
   Palette swap + brand overrides. Loaded AFTER styles.css so
   these :root values and rules win. Template DNA is preserved;
   only colour roles, content surfaces and a few new blocks change.
   ============================================================ */

:root {
	/* Canvas + ink */
	--white: #f7f4ee; /* ivoire canvas (was porcelain cream) */
	--black: #1a1a1a; /* encre */

	/* Strike accent · VIVID orange, the brand (was lavender grin).
     Drives CTA fills, the nav dot, the MENU pill, CTA hovers. */
	--accent: #f26b21;

	/* Lifted neutral surfaces, warmed toward sand */
	--bg: #ece6da; /* lifted card / input surface (was fog stone) */
	--bg-darker: #e3daca; /* deeper neutral layer (was warm stone) */

	/* "Monaco atelier" tint set (was mint / lilac / blush / butter / peach) */
	--greenish: #dce6da; /* soft sage */
	--purplish: #e7ede3; /* pale sage */
	--pinkish: #f1dac9; /* light Moneghetti terracotta */
	--yellowish: #eee7d4; /* sand */
	--peachish: #e9dac2; /* warm oak */

	/* Brand extras */
	--sapin: #2f5648; /* Puzzle sapin · the tables */
	--sage-wash: #c7d4c4; /* the big pale-sage wash (menu overlay) */
}

/* ---- Full-bleed wash: the menu overlay becomes pale sage, not orange ---- */
.menu-master {
	background-color: var(--sage-wash);
}

/* Kill the two hardcoded lavender leftovers */
.project-thumbnail {
	border-color: rgba(47, 86, 72, 0);
} /* was #b9a2e500 */
.home-a-service-item:hover {
	background-color: transparent;
}

/* Readable metadata labels (template used 50% ink -> too weak on ivoire) */
.opacity-50 {
	opacity: 1;
	color: #6b675f;
}

/* Brand mark in the navbar */
.brand-navbar {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.brand-navbar-logo {
	width: 30px;
	height: 30px;
}
.brand-wordmark {
	font-family: var(--font--serif);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 26px;
	line-height: 1;
	color: var(--black);
}

/* ---- Hero media: the scroll zoom stays clipped inside its frame ---- */
.hero-home-a .block-relative {
	overflow: hidden;
}
.home-a-video {
	object-fit: cover;
}

.hero-lede {
	max-width: 720px;
}

/* ---- Section: NOS FORMULES (new, built in the template's language) ---- */
.section.formules {
	padding-top: 40px;
}
.formules-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}
.formules-head .text-h4 {
	max-width: 560px;
}
.formules-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.formule-card {
	background-color: var(--bg);
	border-radius: var(--radius--small);
	padding: 40px 36px;
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	row-gap: 0;
	position: relative;
	cursor: pointer;
	box-shadow: 0 2px 30px rgba(47, 86, 72, 0.06);
	transition: box-shadow 0.2s ease;
}
.formule-card:hover {
	box-shadow: 0 12px 36px rgba(47, 86, 72, 0.14);
}
.formule-card.tint-sage {
	background-color: var(--greenish);
}
.formule-card.tint-oak {
	background-color: var(--peachish);
}
.formule-card.tint-terra {
	background-color: var(--pinkish);
}
.formule-card.tint-sand {
	background-color: var(--yellowish);
}
.formule-card.tint-mist {
	background-color: var(--purplish);
}
.formule-card.tint-sapin {
	background-color: var(--sapin);
	color: var(--white);
}
.formule-card.tint-sapin .formule-cta {
	color: var(--white);
	border-color: rgba(247, 244, 238, 0.4);
}
.formule-name {
	font-family: var(--font--serif);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing--2);
	font-size: 40px;
	line-height: 0.95;
	margin-bottom: 8px;
}
.formule-tagline {
	font-size: var(--text--body-2);
	margin-bottom: 28px;
	opacity: 0.8;
}
.formule-from {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.formule-from .rate-amount {
	font-size: 34px;
}
.formule-rates {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 8px;
}
.formule-rate {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.rate-amount {
	font-family: var(--font--serif);
	text-transform: uppercase;
	font-size: 28px;
	line-height: 1;
	color: var(--accent);
	white-space: nowrap;
}
.rate-label {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.75;
}
.formule-card.tint-sapin .rate-amount {
	color: #f7a06a;
}
.formule-unit {
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}
.services-included {
	margin: 32px 0 0;
	font-size: var(--text--body-2);
	opacity: 0.7;
}
.formule-cta {
	align-self: end;
	margin-top: 28px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: var(--text--button);
	text-decoration: none;
	color: var(--black);
	border-top: 1px solid rgba(26, 26, 26, 0.18);
	padding-top: 16px;
}
.formule-cta::after {
	content: "\2192";
	transition: transform 0.2s ease;
}
.formule-cta:hover::after {
	transform: translateX(4px);
}

/* ---- Text marquee (replaces the client-logo marquee) ---- */
.marquee-word {
	font-family: var(--font--serif);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing--2);
	font-size: 40px;
	line-height: 1;
	white-space: nowrap;
	color: var(--black);
}
.marquee-word .dot {
	color: var(--accent);
	margin: 0 6px;
}

/* ---- Google rating line in hero lede (plain, not a pill) ---- */
.rating-line {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
}
.rating-line .stars {
	color: var(--accent);
	letter-spacing: 2px;
	font-size: 16px;
}

/* ---- 60fps hints ---- */
.marquee-text-wrap,
.marquee-images-master,
.marquee-single-footer,
.home-a-video {
	will-change: transform;
}
.home-a-video {
	backface-visibility: hidden;
}

/* ---- Testimonial: a short accent rule anchors the quote, in the template's
   own editorial language (echoes the .formule-cta divider) ---- */
.testimonial-home-a-description::before {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background-color: var(--accent);
	margin-bottom: 30px;
}

/* ---- Contact block: emphasise the two real addresses ---- */
.contact-block .body-1 a {
	color: var(--black);
}

/* ============================================================
   Accessibility · honour reduced motion. The template's entrance
   animations start elements at opacity:0 / translateY via inline
   styles + a GSAP/Webflow runtime. Under reduced motion we reveal
   everything statically and neutralise transforms.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	[style*="opacity:0"],
	[style*="opacity: 0"] {
		opacity: 1 !important;
	}
	[style*="translate3d"],
	[style*="translate"] {
		transform: none !important;
	}
	.hide {
		overflow: visible !important;
	}
	.marquee-text-wrap,
	.marquee-images-master,
	.marquee-single-footer,
	.footer-marquee,
	.single-text-marquee {
		animation: none !important;
	}
}

/* ---- Responsive tuning for the new blocks ---- */
@media (max-width: 991px) {
	.formules-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.marquee-word {
		font-size: 30px;
	}
}
@media (max-width: 767px) {
	.formules-grid {
		grid-template-columns: 1fr;
	}
	.formule-card {
		padding: 32px 28px;
	}
	.formule-name {
		font-size: 34px;
	}
}

/* ---- Services: the hover photo keeps its proportions ---- */
.home-a-service-image {
	object-fit: cover;
	width: 360px;
	height: 450px;
}

/* ---- Marquees on the compositor (Webflow drove them from JS) ---- */
@keyframes puzzle-marquee-3 {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-33.3333%, 0, 0);
	}
}
@keyframes puzzle-marquee-4 {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-25%, 0, 0);
	}
}
.marquee-images-master {
	grid-column-gap: 0;
	animation: puzzle-marquee-3 48s linear infinite;
}
.single-marquee-images {
	padding-right: 24px;
}
.marquee-text-wrap {
	grid-column-gap: 0;
	animation: puzzle-marquee-4 18s linear infinite;
}
.single-text-marquee {
	padding-right: 128px;
}
.footer-marquee {
	grid-column-gap: 0;
	animation: puzzle-marquee-3 16s linear infinite;
}
.marquee-single-footer {
	padding-right: 10px;
}
.is-paused {
	animation-play-state: paused;
}

/* ---- Footer: navigation and contact as two labelled groups ---- */
.footer-menu {
	grid-row-gap: 40px;
}
.footer-group {
	grid-row-gap: 8px;
}
.footer-group .label {
	margin-bottom: 8px;
}
.footer-link.is-contact {
	font-size: var(--text--body-1);
}

/* ---- Headline lines are never clipped: the reveal is a fade-up, not a mask ---- */
.hide {
	overflow: visible;
}

/* ---- Semantic headings keep the div-based look ---- */
h1.home-a-hero-wrap,
h2.headline-home-a-work {
	margin-top: 0;
}

/* ---- Hero eyebrow: the first words of the title name the business ---- */
.hero-eyebrow {
	display: block;
	margin-bottom: 4px;
	opacity: 0.7;
}