/*
 * Welia · Sections
 * Design dense et visuel : hero split, gallery, scope, services grid, method tabs, CTA banner.
 */

/* ─────────────────────────────  Navigation header — style owner.com (logo gauche · mega menu)  ───────────────────────────── */

.site-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in oklab, var(--bg) 82%, transparent);
	backdrop-filter: var(--nav-blur);
	-webkit-backdrop-filter: var(--nav-blur);
	border-bottom: 1px solid var(--border-subtle);
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-nav.is-scrolled { background: var(--bg); border-bottom-color: var(--border-default); }

.site-nav__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-6);
	min-height: var(--header-h);
}

/* ── Brand (gauche) ── */
.site-nav__brand {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	color: var(--text-1);
	text-decoration: none;
	line-height: 1;
}
.site-nav__brand--logo .custom-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.site-nav__brand--logo .custom-logo { display: block; height: 40px; width: auto; max-width: 220px; object-fit: contain; }
.site-nav__brand--text { font-family: var(--font-serif); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }

/* ── Menu (centre) ── */
.site-nav__nav { justify-self: center; }
.site-nav__menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav__item { display: flex; }
.site-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-1);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.site-nav__link:hover,
.site-nav__item.is-open > .site-nav__link { color: var(--text-2); background: var(--surface); }
.site-nav__item.current-menu-item > .site-nav__link,
.site-nav__link.is-current { color: var(--accent-1); }
.site-nav__chev { width: 15px; height: 15px; color: var(--text-3); transition: transform var(--dur) var(--ease); }
.site-nav__item.has-mega:hover .site-nav__link > .site-nav__chev,
.site-nav__item.has-mega.is-open .site-nav__link > .site-nav__chev { transform: rotate(180deg); }

/* ── Mega panel ── */
/* Wrapper absolu : contexte de positionnement = .site-nav (backdrop-filter crée le containing block),
   d'où left/right:0 pleine largeur et top:100% juste sous le header. */
.site-nav__mega {
	position: absolute;
	left: 0; right: 0; top: 100%;
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.mega {
	pointer-events: auto;
	position: relative;
	margin-top: 12px;
	width: min(1120px, calc(100vw - 40px));
	background: var(--bg);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	padding: 38px 40px;
	display: grid;
	grid-template-columns: 1fr 372px;
	gap: 44px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease);
}
/* Pont de survol invisible entre le trigger et le panel. */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.site-nav__item.has-mega:hover .mega,
.site-nav__item.has-mega:focus-within .mega,
.site-nav__item.has-mega.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }

/* Zone liens */
.mega__links { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 44px; }
.mega__col-title { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-3); margin-bottom: 14px; padding-left: 2px; }
.mega-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 10px;
	margin: 0 -10px;
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease);
}
.mega-item:hover { background: var(--surface); }
.mega-item__ic { flex-shrink: 0; width: 22px; height: 22px; color: var(--text-2); transition: color var(--dur-fast) var(--ease); }
.mega-item__ic svg { display: block; width: 22px; height: 22px; }
.mega-item:hover .mega-item__ic { color: var(--accent-1); }
.mega-item__label { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--text-1); line-height: 1.25; white-space: nowrap; }
.mega-item__tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border-subtle); padding: 2px 7px; border-radius: var(--radius-pill); }

/* Variante liste (L'agence / Ressources) : liste étroite + rail large 2 cartes */
.mega--list { grid-template-columns: 230px 1fr; }
.mega--list .mega__links { grid-template-columns: 1fr; gap: 0; align-content: start; }
.mega--list .mega-item { padding: 7px 12px; margin: 0 -12px; }

/* Rail de cartes promo */
.mega__rail { display: grid; grid-template-columns: 1fr; gap: 14px; border-left: 1px solid var(--border-subtle); padding-left: 40px; }
.mega--list .mega__rail { grid-template-columns: 1fr 1fr; gap: 16px; }
.mega-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 150px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: #fff;
	background: #0b1220;
	text-decoration: none;
	transition: transform var(--dur) var(--ease);
}
.mega-card:hover { transform: translateY(-2px); }
.mega--list .mega-card { min-height: 300px; }
.mega-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9, 14, 24, 0.9) 6%, rgba(9, 14, 24, 0.1) 62%, rgba(9, 14, 24, 0.3)); }
.mega-card__body { position: relative; padding: 18px; }
.mega-card__eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 9px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.18); margin-bottom: 10px; }
.mega-card__title { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 17px; line-height: 1.24; }
.mega-card--plain .mega-card__title { font-size: 19px; }
.mega-card--blue { background: linear-gradient(150deg, #0066FF, #0A3FB0); }
.mega-card--green { background: linear-gradient(150deg, #22B356, #0F7A37); }
.mega-card--dark { background: linear-gradient(150deg, #1B252F, #0B1220); }

/* ── Actions (droite) ── */
.site-nav__actions { justify-self: end; display: inline-flex; align-items: center; gap: 22px; }
.site-nav__phone { font-size: 15px; font-weight: 600; color: var(--text-1); white-space: nowrap; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.site-nav__phone:hover { color: var(--accent-1); }
.site-nav__phone--whatsapp { display: inline-flex; align-items: center; gap: 8px; }
.site-nav__phone--whatsapp svg { width: 18px; height: 18px; flex: 0 0 auto; color: #25D366; }
.site-nav__cta-btn { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; padding: 13px 26px; min-height: 48px; }

/* Hamburger */
.site-nav__toggle {
	display: none;
	width: 44px; height: 44px;
	flex: 0 0 44px;
	border-radius: 50%;
	border: 1.5px solid var(--border-strong);
	background: var(--surface);
	padding: 0;
	position: relative;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.site-nav__toggle:hover { border-color: var(--text-3); background: var(--surface-2); }
.site-nav__toggle span { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: var(--text-1); border-radius: var(--radius-xs); transform-origin: center; transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease); }
.site-nav__toggle span:nth-child(1) { transform: translate(-50%, -6px); }
.site-nav__toggle span:nth-child(2) { transform: translate(-50%, 0); }
.site-nav__toggle span:nth-child(3) { transform: translate(-50%, 6px); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

/* ── Drawer mobile (sibling du header) ── */
.site-nav__mobile { display: none; }
.site-nav__mobile:not([hidden]),
.site-nav__mobile.is-open {
	display: block;
	position: fixed;
	top: var(--header-h);
	left: 0; right: 0; bottom: 0;
	background: var(--bg);
	padding: var(--space-4) 0 var(--space-8);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	z-index: 99;
}
.site-nav__m-link,
.site-nav__acc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 600;
	color: var(--text-1);
	padding: 18px 2px;
	border: 0;
	border-bottom: 1px solid var(--border-subtle);
	background: transparent;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.site-nav__acc-head .site-nav__chev { width: 20px; height: 20px; color: var(--text-3); }
.site-nav__acc.is-open .site-nav__acc-head .site-nav__chev { transform: rotate(180deg); }
.site-nav__acc-body { display: none; padding: 6px 2px 18px; }
.site-nav__acc.is-open .site-nav__acc-body { display: block; }
.site-nav__acc-group { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-meta); color: var(--text-3); margin: 16px 0 6px; }
.site-nav__acc-body a { display: block; font-size: 17px; color: var(--text-2); padding: 9px 0; text-decoration: none; }
.site-nav__mobile-foot { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.site-nav__mobile-foot .btn { width: 100%; display: flex; align-items: center; justify-content: center; }
.site-nav__phone--mobile { font-size: 17px; }
/* Le contact WhatsApp reste visible dans le drawer mobile (le fixe est masqué). */
.site-nav__mobile-foot .site-nav__phone--mobile { display: inline-flex; }
.site-nav__phone--mobile svg { width: 20px; height: 20px; }

/* ── Responsive : bascule hamburger sous 980px ── */
@media (max-width: 980px) {
	/* Nav centrale + actions desktop masquées → grille 2 colonnes : logo | hamburger. */
	.site-nav__inner { grid-template-columns: 1fr auto; }
	.site-nav__nav,
	.site-nav__phone,
	.site-nav__cta-btn { display: none; }
	/* Gouttière resserrée pour coller le hamburger au bord droit. */
	.site-nav .container--wide { padding-inline: var(--space-4); }
	.site-nav__actions { gap: 0; }
	.site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
	.site-nav__brand--logo .custom-logo { height: 32px; max-width: 170px; }
}

/* ─────────────────────────────  HERO · full-bleed immersif avec image  ───────────────────────────── */

.hero--immersive {
	position: relative;
	min-height: clamp(640px, 92vh, 920px);
	padding: 0;
	overflow: hidden;
	color: var(--text-inverse);
	display: flex;
	flex-direction: column;
}

/* Media background */
.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__img--fallback {
	background: linear-gradient(135deg, var(--text-1) 0%, var(--accent-1) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--surface);
}
.hero__img--fallback > svg { width: 60%; max-width: 700px; opacity: 0.25; }
.hero__img-fallback-decor {
	position: absolute;
	top: -10%;
	right: -10%;
	width: 60%;
	opacity: 0.15;
	color: var(--surface);
}
.hero__img-fallback-decor svg { width: 100%; height: auto; }
.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Container */
.hero__container {
	position: relative;
	z-index: 2;
	padding-top: clamp(40px, 8vw, 96px);
	padding-bottom: clamp(40px, 6vw, 64px);
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 6vw, 72px);
	flex: 1;
	justify-content: space-between;
}

/* Badge top */
.hero__top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hero__h1 {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	line-height: 1.3;
}
.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 10px 16px 10px 14px;
	background: rgba(20, 18, 16, 0.55);
	color: var(--text-inverse);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.hero__badge-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px; height: 16px;
	border-radius: var(--radius-xs);
	background: rgba(255, 255, 255, 0.15);
	color: var(--text-inverse);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
}

/* Titre principal — gros, blanc, serif éditorial */
.hero__title--xl {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(48px, 7.5vw, 104px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--text-inverse);
	max-width: 22ch;
	margin: 0;
}
.hero__title--xl em {
	font-family: var(--font-display-italic);
	color: var(--accent-2);
	font-style: italic;
	font-weight: 400;
}

/* Bas du hero : features + CTA */
.hero__bottom {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-8);
	align-items: end;
}
@media (max-width: 900px) {
	.hero__bottom { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* Features list verticale */
.hero__features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 460px;
}
.hero__feature {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--space-4);
	align-items: start;
}
.hero__feature-icon {
	width: 56px; height: 56px;
	border-radius: var(--radius-lg);
	background: rgba(20, 18, 16, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--text-inverse);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.hero__feature-icon svg { width: 22px; height: 22px; }
.hero__feature-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-inverse);
	font-weight: 700;
	margin-bottom: 8px;
}
.hero__feature-desc {
	margin: 0;
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.55;
	font-family: var(--font-sans);
}

/* CTA droite : lede + boutons */
.hero__cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	max-width: 480px;
	margin-left: auto;
}
@media (max-width: 900px) {
	.hero__cta { margin-left: 0; }
}
.hero__lede {
	font-family: var(--font-sans);
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.55;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	letter-spacing: 0;
	max-width: 38ch;
}
.hero__actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.hero__actions .btn { padding: 18px 22px; font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; min-height: 52px; }

/* ─────────────────────────────  WELCOME · Intro 2-col + gallery  ───────────────────────────── */

.welcome-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-9);
	align-items: center;
}
@media (max-width: 980px) { .welcome-grid { grid-template-columns: 1fr; gap: var(--space-7); } }

.welcome__content { display: flex; flex-direction: column; gap: var(--space-5); }
.welcome__title { max-width: 16ch; }
.welcome__lede { max-width: 52ch; }

.welcome__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin-top: var(--space-4);
}
.welcome__stat {
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.welcome__stat strong {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--accent-1);
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
}
.welcome__stat span { font-size: var(--text-sm); color: var(--text-2); line-height: var(--lh-snug); }
.welcome__stat--cta {
	background: var(--accent-1);
	color: var(--surface);
	text-decoration: none;
	transition: transform 0.2s ease, background 0.2s ease;
}
.welcome__stat--cta strong { color: var(--surface); }
.welcome__stat--cta span { color: rgba(255, 255, 255, 0.7); }
.welcome__stat--cta:hover { transform: translateY(-2px); background: var(--accent-2); }

/* Gallery asymétrique */
.welcome__gallery {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 220px 180px;
	gap: var(--space-4);
}
.welcome__gallery-item {
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
	background: var(--accent-1);
	color: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
}
.welcome__gallery-item:nth-child(1) {
	grid-column: 1; grid-row: 1 / span 2;
	background: var(--surface-2);
	color: var(--accent-1);
}
.welcome__gallery-item:nth-child(2) { grid-column: 2; grid-row: 1; background: var(--accent-1); color: var(--surface); }
.welcome__gallery-item:nth-child(3) { grid-column: 2; grid-row: 2; background: var(--surface); border: 1px solid var(--border-default); color: var(--accent-2); }
.welcome__gallery-item svg { width: 70%; height: 70%; }
.welcome__gallery-item.is-image { padding: 0; background: var(--surface-2); border: 0; }
.welcome__gallery-item.is-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 600px) {
	.welcome__gallery {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 160px 140px;
	}
	.welcome__stats { grid-template-columns: 1fr; }
}

/* ─────────────────────────────  PHILOSOPHY · full-width + gallery 3  ───────────────────────────── */

.philosophy {
	background: var(--surface);
	border-top: 1px solid var(--border-subtle);
}
.philosophy__head {
	max-width: 760px;
	margin: var(--space-7) auto var(--space-8);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}
.philosophy__head .eyebrow { justify-content: center; }
.philosophy__title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: var(--text-4xl);
	line-height: 1.05;
	letter-spacing: var(--ls-tight);
	color: var(--text-1);
}
.philosophy__title em { font-family: var(--font-display-italic); font-style: italic; color: var(--accent-1); font-weight: 400; }

.gallery {
	display: grid;
	grid-template-columns: 1fr 1.2fr 1fr;
	gap: var(--space-5);
	align-items: end;
}
@media (max-width: 900px) {
	.gallery { grid-template-columns: 1fr 1fr; }
	.gallery > :nth-child(3) { grid-column: span 2; }
}
@media (max-width: 540px) { .gallery { grid-template-columns: 1fr; } }

.gallery__item {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bg);
	border: 1px solid var(--border-subtle);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-1);
}
.gallery__item:nth-child(2) {
	aspect-ratio: 4 / 6;
	background: var(--accent-1);
	color: var(--surface);
	border-color: var(--accent-1);
}
.gallery__item:nth-child(3) {
	aspect-ratio: 5 / 4;
	background: var(--surface-2);
	color: var(--accent-2);
}
.gallery__item svg { width: 75%; height: 75%; }
.gallery__item.is-image { padding: 0; background: var(--surface-2); border: 0; }
.gallery__item.is-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__item.is-image .gallery__caption { color: var(--text-inverse); text-shadow: 0 1px 2px rgba(0,0,0,0.4); opacity: 1; }
.gallery__caption {
	position: absolute;
	left: var(--space-4); bottom: var(--space-4);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: currentColor;
	opacity: 0.7;
	z-index: 2;
}
.gallery__item.is-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(20,18,16,0.45));
	pointer-events: none;
}

/* ─────────────────────────────  SCOPE · 2-col + checklist riche  ───────────────────────────── */

.scope-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--space-9);
	align-items: start;
}
@media (max-width: 900px) { .scope-grid { grid-template-columns: 1fr; gap: var(--space-7); } }

.scope__head { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: calc(var(--header-h) + var(--space-5)); }
@media (max-width: 900px) { .scope__head { position: static; } }

.checklist--rich {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.checklist--rich li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-5);
	padding: var(--space-5) 0;
	border-top: 1px solid var(--border-subtle);
	align-items: start;
}
.checklist--rich__icon {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--accent-1-soft);
	color: var(--accent-1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.checklist--rich__icon svg { width: 20px; height: 20px; }
.checklist--rich h3 {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 500;
	margin-bottom: var(--space-2);
	color: var(--text-1);
}
.checklist--rich p { font-size: var(--text-sm); color: var(--text-2); line-height: var(--lh-relaxed); }

/* ─────────────────────────────  TRUST · 4 trust signals sur fond surface  ───────────────────────────── */

.trust {
	background: var(--surface);
	border-top: 1px solid var(--border-subtle);
	border-bottom: 1px solid var(--border-subtle);
	padding-block: var(--space-8);
}
.trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-7);
}
@media (max-width: 900px) {
	.trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 480px) { .trust__grid { grid-template-columns: 1fr; } }

.trust__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-right: var(--space-4);
	border-right: 1px solid var(--border-subtle);
}
.trust__item:last-child { border-right: 0; }
@media (max-width: 900px) {
	.trust__item:nth-child(2n) { border-right: 0; }
}
.trust__icon {
	width: 32px; height: 32px;
	color: var(--accent-1);
}
.trust__value {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--text-1);
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
	white-space: nowrap;
}
.trust__label { font-size: var(--text-base); color: var(--text-2); line-height: var(--lh-relaxed); }

/* ─────────────────────────────  SERVICES · grid 4 colonnes riches  ───────────────────────────── */

.services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
	margin-top: var(--space-7);
}
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.service-card:hover {
	transform: translateY(-4px);
	border-color: var(--accent-1);
	box-shadow: var(--shadow-md);
}
.service-card__visual {
	aspect-ratio: 4 / 3;
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-1);
	border-bottom: 1px solid var(--border-subtle);
	position: relative;
	overflow: hidden;
}
.service-card__visual svg { width: 70%; height: 70%; }
.service-card__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, rgba(91,54,80,0.04), transparent 60%);
	pointer-events: none;
}
.service-card--has-image .service-card__visual { background: var(--surface-2); }
.service-card--has-image .service-card__visual img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform var(--dur-slow) var(--ease);
}
.service-card--has-image:hover .service-card__visual img { transform: scale(1.04); }
.service-card--has-image .service-card__visual::after { display: none; }
.service-card__body {
	padding: var(--space-5) var(--space-5) var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1;
}
.service-card__name {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--text-1);
	line-height: 1.2;
}
.service-card__desc { font-size: var(--text-base); color: var(--text-2); line-height: var(--lh-relaxed); flex: 1; }
.service-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--accent-1);
	font-size: var(--text-md);
	font-weight: 500;
	margin-top: var(--space-2);
}
.service-card__link::after {
	content: "→";
	transition: transform var(--dur) var(--ease);
}
.service-card:hover .service-card__link::after { transform: translateX(4px); }

/* ─────────────────────────────  METHOD TABS · 5 piliers visuels  ───────────────────────────── */

.method-tabs {
	margin-top: var(--space-7);
}
.method-tabs__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-2);
	padding: var(--space-2);
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	list-style: none;
	margin: 0 0 var(--space-6);
}
@media (max-width: 900px) {
	.method-tabs__list {
		grid-template-columns: repeat(5, max-content);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		border-radius: var(--radius-pill);
	}
	.method-tabs__list > * { scroll-snap-align: start; }
}
.method-tab {
	display: flex;
	width: 100%;
	align-items: center;
	gap: var(--space-2);
	padding: 14px 22px;
	border-radius: var(--radius-pill);
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--text-2);
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	white-space: nowrap;
	font-family: var(--font-sans);
	justify-content: center;
	min-height: 48px;
}
.method-tab__num {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-3);
	letter-spacing: 0.05em;
}
.method-tab[aria-selected="true"] {
	background: var(--text-1);
	color: var(--text-inverse);
}
.method-tab[aria-selected="true"] .method-tab__num { color: var(--surface); opacity: 0.7; }

.method-panel {
	display: none;
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	overflow: hidden;
	min-height: 360px;
}
.method-panel.is-active { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; }
@media (max-width: 900px) {
	.method-panel { padding: var(--space-6); }
	.method-panel.is-active { grid-template-columns: 1fr; }
}
.method-panel__bg {
	position: absolute;
	right: -8%;
	top: 50%;
	transform: translateY(-50%);
	width: 55%;
	color: var(--accent-1);
	opacity: 0.08;
	pointer-events: none;
}
.method-panel__bg svg { width: 100%; height: auto; }
.method-panel__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.method-panel__num {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--accent-1);
}
.method-panel__title {
	font-family: var(--font-serif);
	font-size: var(--text-3xl);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: var(--ls-tight);
	color: var(--text-1);
}
.method-panel__lede { color: var(--text-2); line-height: var(--lh-relaxed); max-width: 46ch; font-size: var(--text-md); }
.method-panel__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	border-top: 1px solid var(--border-subtle);
	padding-top: var(--space-5);
	margin-top: var(--space-3);
}
.method-panel__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--text-base);
	color: var(--text-2);
	line-height: var(--lh-relaxed);
}
.method-panel__list li::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--accent-1);
	margin-top: 9px;
	flex: 0 0 auto;
}
.method-panel__visual {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	background: var(--bg);
	border: 1px solid var(--border-subtle);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-1);
}
.method-panel__visual svg { width: 80%; height: 80%; }

/* ─────────────────────────────  Spécialités · grid + marquee  ───────────────────────────── */

.specialties__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-4);
	margin-top: var(--space-7);
}
.specialty-card {
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	text-decoration: none;
	color: inherit;
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.specialty-card:hover { transform: translateY(-3px); border-color: var(--accent-1); }
.specialty-card__icon {
	width: 36px; height: 36px;
	border-radius: var(--radius-lg);
	background: var(--accent-1-soft);
	color: var(--accent-1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.specialty-card__icon svg { width: 18px; height: 18px; }
.specialty-card__name {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 500;
	color: var(--text-1);
}
.specialty-card__desc { font-size: var(--text-base); color: var(--text-2); line-height: var(--lh-relaxed); }

/* ─────────────────────────────  Differentiation table  ───────────────────────────── */

.compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	margin-top: var(--space-7);
}
@media (max-width: 800px) { .compare { grid-template-columns: 1fr; } }

.compare__col {
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--border-subtle);
}
.compare__col--featured {
	background: var(--text-1);
	color: var(--surface);
	border-color: var(--text-1);
}
.compare__col--featured h3, .compare__col--featured .compare__title { color: var(--surface); }
.compare__col--featured .compare__row { border-top-color: rgba(255,255,255,0.08); }
.compare__title {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: var(--space-5);
}
.compare__col--featured .compare__title { color: rgba(255,255,255,0.7); }
.compare__row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4) 0;
	border-top: 1px solid var(--border-subtle);
	font-size: var(--text-base);
	line-height: var(--lh-relaxed);
}
.compare__row:first-of-type { border-top: 0; }
.compare__row svg { width: 16px; height: 16px; margin-top: 3px; flex: 0 0 auto; color: var(--accent-1); }
.compare__col--featured .compare__row svg { color: var(--accent-2); }

/* ─────────────────────────────  Pricing  ───────────────────────────── */

.pricing {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	margin-top: var(--space-7);
}
.pricing--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
	.pricing--three { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 900px) {
	.pricing { grid-template-columns: 1fr; }
}


.plan {
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	padding: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	position: relative;
}
.plan--featured { background: var(--text-1); color: var(--surface); border-color: var(--text-1); }
.plan--featured .plan__name,
.plan--featured .plan__price,
.plan--featured .plan__price small,
.plan--featured .plan__features li { color: var(--surface); }
.plan--featured .plan__features li::before { background-color: var(--accent-2); }
.plan--featured .plan__divider { border-top-color: rgba(255,255,255,0.12); }
.plan__badge { position: absolute; top: -12px; left: var(--space-7); }
.plan__name { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 500; }
.plan__tag { font-size: var(--text-md); color: var(--text-3); margin-top: var(--space-2); }
.plan--featured .plan__tag { color: rgba(255,255,255,0.6); }
.plan__price {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	font-family: var(--font-serif);
	font-size: clamp(40px, 5vw, 56px);
	font-weight: 500;
	color: var(--text-1);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	white-space: nowrap;
}
.plan__price small {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 400;
	color: var(--text-2);
	letter-spacing: 0;
}
.plan__setup {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--text-3);
}
.plan__divider { border: 0; border-top: 1px solid var(--border-subtle); margin: 0; }
.plan__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.plan__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--text-base);
	line-height: var(--lh-relaxed);
	color: var(--text-2);
}
.plan__features li::before {
	content: "";
	flex: 0 0 auto;
	width: 6px; height: 6px;
	border-radius: 50%;
	background-color: var(--accent-1);
	margin-top: 9px;
}
.plan .btn { width: 100%; margin-top: auto; }

/* — Encart e-shop inclus (pack featured) — sobre, sans bordure, sans icône — */
.plan__callout {
	display: block;
	padding: var(--space-4) var(--space-5);
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-md);
}
.plan__callout-title {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--surface);
	line-height: 1.2;
	margin: 0;
}
.plan__callout-lede {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.7);
	line-height: var(--lh-relaxed);
	margin: var(--space-1) 0 0;
}
/* Variante hors pack featured (au cas où l'encart serait réutilisé) */
.plan:not(.plan--featured) .plan__callout { background: var(--surface); }
.plan:not(.plan--featured) .plan__callout-title { color: var(--text-1); }
.plan:not(.plan--featured) .plan__callout-lede { color: var(--text-2); }

/* ─────────────────────────────  Témoignages  ───────────────────────────── */

.testimonials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-7);
}
@media (max-width: 540px) { .testimonials__grid { grid-template-columns: 1fr; } }

.testimonial-card {
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	padding: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	position: relative;
	overflow: hidden;
}
.testimonial-card__mark {
	position: absolute;
	top: var(--space-4); right: var(--space-5);
	font-family: var(--font-serif);
	font-size: 96px;
	line-height: 0.7;
	color: var(--accent-1);
	opacity: 0.12;
	font-style: italic;
	pointer-events: none;
}
.testimonial-card__text {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-style: italic;
	line-height: 1.5;
	color: var(--text-1);
}
.testimonial-card__author {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-subtle);
}
.testimonial-card__portrait {
	width: 56px; height: 56px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--accent-1-soft);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
}
.testimonial-card__portrait svg { width: 100%; height: 100%; }
.testimonial-card__portrait img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card__name {
	font-weight: 500;
	color: var(--text-1);
	font-size: var(--text-base);
}
.testimonial-card__role {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--text-3);
	margin-top: 4px;
}

/* ─────────────────────────────  FAQ  ───────────────────────────── */

.faq__layout {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: var(--space-9);
	margin-top: var(--space-7);
	align-items: start;
}
@media (max-width: 900px) { .faq__layout { grid-template-columns: 1fr; gap: var(--space-6); } }
.faq__intro { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
@media (max-width: 900px) { .faq__intro { position: static; } }
.faq__intro p { color: var(--text-2); line-height: var(--lh-relaxed); margin-top: var(--space-4); }
.faq__decor {
	margin-top: var(--space-5);
	aspect-ratio: 1;
	max-width: 240px;
	color: var(--accent-1);
	opacity: 0.18;
}
@media (max-width: 900px) { .faq__decor { display: none; } }
.faq__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.faq__filter {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--text-2);
	border: 1px solid var(--border-subtle);
	cursor: pointer;
}
.faq__filter[aria-pressed="true"] {
	background: var(--text-1);
	color: var(--text-inverse);
	border-color: var(--text-1);
}

/* ─────────────────────────────  Journal preview  ───────────────────────────── */

.journal__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
	margin-top: var(--space-7);
}
@media (max-width: 800px) { .journal__grid { grid-template-columns: 1fr; gap: var(--space-5); } }

.post-card { display: flex; flex-direction: column; gap: var(--space-4); }
.post-card__media {
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface-2);
	position: relative;
}
.post-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(43,42,40,0.12));
	pointer-events: none;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__title {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--text-1);
	line-height: 1.2;
	transition: color var(--dur-fast) var(--ease);
}
.post-card a:hover .post-card__title { color: var(--accent-1); }
.post-card__excerpt { color: var(--text-2); font-size: var(--text-base); line-height: var(--lh-relaxed); }
.post-card a { color: inherit; text-decoration: none; display: contents; }

/* ─────────────────────────────  CTA BANNER · full-bleed immersif  ───────────────────────────── */

.cta-banner {
	position: relative;
	background: var(--accent-1);
	color: var(--text-inverse);
	padding-block: clamp(80px, 9vw, 120px);
	overflow: hidden;
	border-radius: var(--radius-xl);
	margin: var(--section-py) var(--container-pad);
	max-width: calc(100% - 2 * var(--container-pad));
}
.cta-banner__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.cta-banner__bg-decor {
	position: absolute;
	width: 480px;
	height: 480px;
	color: var(--surface);
	opacity: 0.08;
}
.cta-banner__bg-decor:nth-child(1) { top: -10%; right: -8%; }
.cta-banner__bg-decor:nth-child(2) { bottom: -15%; left: -10%; transform: rotate(45deg); opacity: 0.06; }
.cta-banner__bg-decor svg { width: 100%; height: 100%; }

/* CTA banner avec image background uploadée */
.cta-banner__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.cta-banner__img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.cta-banner__media-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(91, 54, 80, 0.85), rgba(43, 42, 40, 0.78));
}

.cta-banner__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-inline: var(--container-pad);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-8);
	align-items: center;
}
@media (max-width: 900px) { .cta-banner__inner { grid-template-columns: 1fr; gap: var(--space-7); } }

.cta-banner h2 {
	color: var(--text-inverse);
	font-family: var(--font-serif);
	font-size: var(--text-4xl);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: var(--ls-tight);
	margin-bottom: var(--space-4);
}
.cta-banner p { color: rgba(255,255,255,0.78); line-height: var(--lh-relaxed); max-width: 46ch; }
.cta-banner .btn--primary {
	background: var(--text-inverse);
	color: var(--accent-1);
	border-color: var(--text-inverse);
}
.cta-banner .btn--primary:hover {
	background: var(--bg);
	border-color: var(--bg);
	color: var(--accent-1-hover);
}
.cta-banner .btn--secondary {
	background: transparent;
	color: var(--text-inverse);
	border-color: rgba(255,255,255,0.3);
}
.cta-banner .btn--secondary:hover {
	background: rgba(255,255,255,0.1);
	color: var(--text-inverse);
	border-color: rgba(255,255,255,0.5);
}
.cta-banner__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cta-banner__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--text-base);
	color: rgba(255,255,255,0.88);
	line-height: var(--lh-relaxed);
}
.cta-banner__list li::before {
	content: "";
	width: 18px; height: 18px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>") center/12px no-repeat;
	flex: 0 0 auto;
	margin-top: 2px;
}

/* ─────────────────────────────  Footer  ───────────────────────────── */

.site-footer {
	border-top: 1px solid var(--border-subtle);
	padding-block: var(--space-8) var(--space-7);
	background: var(--bg);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--space-6);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { color: var(--text-2); margin-top: var(--space-3); max-width: 34ch; font-size: var(--text-sm); line-height: var(--lh-relaxed); }
.footer-col h4 {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: var(--space-4);
	font-weight: 500;
}
.footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.footer-col li { line-height: 1.4; }
.footer-col a,
.footer-col .footer-menu a {
	color: var(--text-2);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.footer-col a:hover,
.footer-col .footer-menu a:hover { color: var(--text-1); }
.footer-col span { font-size: var(--text-base); line-height: 1.4; color: var(--text-2); }
.footer-col span.text-subtle { color: var(--text-3); }
.footer-bottom {
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-subtle);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: var(--ls-wide);
	color: var(--text-3);
}
.footer-legal ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-legal li::marker { content: none; }
.footer-legal li:not(:last-child)::after {
	content: '·';
	margin-left: var(--space-3);
	color: var(--text-3);
}
.footer-legal a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.footer-legal a:hover { color: var(--text-1); }

/* ─────────────────────────────  Contact layout  ───────────────────────────── */

.contact-layout {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--space-8);
	margin-top: var(--space-7);
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-aside {
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.contact-aside h3 { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 500; }
.contact-aside dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-5); font-size: var(--text-base); }
.contact-aside dt { color: var(--text-3); font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--ls-wide); text-transform: uppercase; padding-top: 4px; }
.contact-aside dd { margin: 0; color: var(--text-1); }

/* ─────────────────────────────  Legal layout  ───────────────────────────── */

.legal-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--space-9);
	margin-top: var(--space-7);
	align-items: start;
}
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } }
.legal-toc {
	position: sticky;
	top: calc(var(--header-h) + var(--space-5));
	font-size: var(--text-sm);
}
.legal-toc h4 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-3); margin-bottom: var(--space-3); font-weight: 500; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: legal; }
.legal-toc li { counter-increment: legal; }
.legal-toc a { color: var(--text-2); }
.legal-toc a::before { content: counter(legal, decimal-leading-zero) " · "; color: var(--text-3); font-family: var(--font-mono); }

/* ─────────────────────────────  Page header générique  ───────────────────────────── */

.page-header { padding-block: clamp(80px, 10vw, 140px) var(--space-7); }
.page-header h1 { font-size: var(--text-5xl); line-height: 1.02; max-width: 18ch; }

/* ─────────────────────────────  SPECIALTY PAGE (template-specialty)  ───────────────────────────── */

/* Chips frameworks (cadres réglementaires : FSP, Tarif 590, RME, etc.) */
.frameworks {
	list-style: none;
	padding: 0;
	margin: var(--space-4) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.framework {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	background: var(--surface);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-2);
	font-weight: 500;
}

/* Liste "Mon approche" (3 piliers numérotés) */
.approach-list {
	list-style: none;
	counter-reset: approach;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.approach-list li {
	counter-increment: approach;
	padding: var(--space-6) 0;
	border-top: 1px solid var(--border-subtle);
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--space-5);
	align-items: start;
}
.approach-list li::before {
	content: counter( approach, decimal-leading-zero ) " /";
	font-family: var(--font-mono);
	font-size: var(--text-md);
	letter-spacing: -0.02em;
	color: var(--accent-1);
	font-weight: 400;
	line-height: 1.2;
}
.approach-list h3 {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--text-1);
	margin: 0 0 var(--space-3);
	line-height: 1.2;
}
.approach-list p {
	font-size: var(--text-base);
	color: var(--text-2);
	line-height: var(--lh-relaxed);
	margin: 0;
}
@media (max-width: 600px) {
	.approach-list li { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* CTA spécifique en bas de page spécialité */
.specialty-cta {
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	text-align: center;
	align-items: center;
}
.specialty-cta h2 { max-width: 24ch; }
.specialty-cta .lede { max-width: 52ch; }
.specialty-cta .cluster { justify-content: center; }
@media (max-width: 600px) {
	.specialty-cta { padding: var(--space-6); }
}

/* ─────────────────────────────  FOUNDER SIGNATURE  ───────────────────────────── */

.founder-signature {
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-subtle);
	color: var(--text-1);
	font-size: var(--text-md);
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.founder-signature strong { font-weight: 600; }
.founder-signature span:nth-of-type(1) { color: var(--text-2); }
.founder-signature span:nth-of-type(2) { color: var(--text-3); font-size: var(--text-sm); }

/* ─────────────────────────────  PRICING TABLE comparatif  ───────────────────────────── */

.pricing-table-wrap { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pricing-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
}
.pricing-table thead tr { background: var(--surface-2); }
.pricing-table th {
	text-align: center;
	padding: var(--space-4);
	font-family: var(--font-serif);
	font-size: var(--text-md);
	font-weight: 500;
}
.pricing-table th:first-child {
	text-align: left;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--text-3);
}
.pricing-table th.is-featured,
.pricing-table td.is-featured { background: var(--accent-1-soft); }
.pricing-table tbody tr { border-top: 1px solid var(--border-subtle); }
.pricing-table td {
	padding: var(--space-4);
	text-align: center;
	font-size: var(--text-sm);
	color: var(--text-1);
}
.pricing-table td:first-child {
	text-align: left;
	color: var(--text-2);
}

/* ─────────────────────────────  Lede modifiers  ───────────────────────────── */

.lede--narrow { max-width: 360px; }

/* ─────────────────────────────  Specialties grid modifier  ───────────────────────────── */

.specialties__grid--spaced { margin-top: var(--space-6); }

/* ─────────────────────────────  Gallery caption variant  ───────────────────────────── */

.gallery__caption--light { color: var(--surface); }

/* ─────────────────────────────  MANIFESTO · grid 6 raisons  ───────────────────────────── */

.manifesto-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	margin-top: var(--space-7);
}
@media (max-width: 980px) { .manifesto-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .manifesto-grid { grid-template-columns: 1fr; } }

.manifesto-item {
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.manifesto-item:hover { border-color: var(--accent-1); transform: translateY(-2px); }
.manifesto-item--star {
	background: var(--text-1);
	color: var(--surface);
	border-color: var(--text-1);
}
.manifesto-item--star .manifesto-item__title { color: var(--surface); }
.manifesto-item--star .manifesto-item__num { color: var(--accent-2); }
.manifesto-item--star .manifesto-item__desc { color: rgba(255,255,255,0.82); }

.manifesto-item__num {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-1);
	font-weight: 500;
}
.manifesto-item__star { color: var(--accent-2); font-size: 18px; }

.manifesto-item__title {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--text-1);
	line-height: 1.2;
	margin: 0;
}
.manifesto-item__desc {
	font-size: var(--text-base);
	color: var(--text-2);
	line-height: var(--lh-relaxed);
	margin: 0;
}

/* ─────────────────────────────  FOUNDER HERO · profile asymétrique  ───────────────────────────── */

.founder-hero {
	background: var(--surface);
	border-bottom: 1px solid var(--border-subtle);
	padding-block: clamp(80px, 9vw, 120px) clamp(56px, 7vw, 96px);
	position: relative;
}
.founder-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(40px, 6vw, 88px);
	align-items: center;
}
@media (max-width: 900px) {
	.founder-hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}

.founder-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.founder-hero__name {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(48px, 6.5vw, 88px);
	line-height: 1.02;
	letter-spacing: var(--ls-tight);
	color: var(--text-1);
	margin: 0;
	max-width: 14ch;
}
.founder-hero__role {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--text-2);
	margin: 0;
}

.founder-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
	margin: 0;
}
.founder-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 8px 14px 8px 12px;
	background: var(--bg);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-2);
	font-weight: 500;
}
.founder-hero__badge-dot {
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--accent-1);
}

.founder-hero__bio {
	font-family: var(--font-serif);
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.55;
	color: var(--text-1);
	max-width: 50ch;
	margin: 0;
}

.founder-hero__actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-3);
}

/* Visuel : photo ou SVG décoratif */
.founder-hero__visual {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 480px;
	margin-left: auto;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--surface-2);
}
@media (max-width: 900px) {
	.founder-hero__visual { margin: 0 auto; max-width: 360px; }
}
.founder-hero__visual.is-image img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.founder-hero__visual-decor {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-1);
	opacity: 0.12;
}
.founder-hero__visual-decor svg { width: 100%; height: 100%; }
.founder-hero__visual-portrait {
	position: absolute;
	inset: 12%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-1);
}
.founder-hero__visual-portrait svg { width: 100%; height: 100%; }

/* ─────────────────────────────  SPECIALTY LIST · liste éditoriale  ───────────────────────────── */

.specialty-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.specialty-list__item {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: clamp(24px, 4vw, 64px);
	padding: clamp(40px, 5vw, 64px) 0;
	border-top: 1px solid var(--border-subtle);
	align-items: start;
}
@media (max-width: 700px) {
	.specialty-list__item { grid-template-columns: 1fr; gap: var(--space-4); }
}

.specialty-list__num {
	font-family: var(--font-mono);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--accent-1);
	text-decoration: none;
	line-height: 1;
	padding-top: 8px;
	display: inline-block;
	transition: color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
a.specialty-list__num:hover {
	color: var(--accent-1-hover);
	transform: translateX(4px);
}

.specialty-list__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 64ch;
}
.specialty-list__title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(28px, 2.6vw, 40px);
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
	color: var(--text-1);
	margin: 0;
}
.specialty-list__short {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--text-md);
	line-height: 1.4;
	color: var(--text-2);
	margin: 0;
}
.specialty-list__long {
	font-size: var(--text-base);
	line-height: var(--lh-relaxed);
	color: var(--text-2);
	margin: 0;
}
.specialty-list__long p { margin: 0; }
.specialty-list__long p + p { margin-top: var(--space-3); }
.specialty-list__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-2);
	padding: 12px 18px;
	background: transparent;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-pill);
	color: var(--text-1);
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	align-self: flex-start;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.specialty-list__link:hover {
	background: var(--text-1);
	border-color: var(--text-1);
	color: var(--text-inverse);
}
.specialty-list__link span { transition: transform var(--dur) var(--ease); display: inline-block; }
.specialty-list__link:hover span { transform: translateX(3px); }

/* ─────────────────────────────  PAGE HERO · pages internes  ───────────────────────────── */

.page-hero {
	position: relative;
	overflow: hidden;
	color: var(--text-inverse);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.page-hero--compact { min-height: clamp(420px, 60vh, 600px); }
.page-hero--full    { min-height: clamp(640px, 92vh, 920px); }

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.page-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.page-hero__img--fallback {
	background: linear-gradient(135deg, var(--text-1) 0%, var(--accent-1) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--surface);
}
.page-hero__img--fallback > svg { width: 50%; max-width: 600px; opacity: 0.2; }
.page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.page-hero__container {
	position: relative;
	z-index: 2;
	padding-top: clamp(60px, 9vw, 100px);
	padding-bottom: clamp(48px, 6vw, 80px);
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.5vw, 24px);
}

.page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 8px 14px 8px 12px;
	background: rgba(20, 18, 16, 0.55);
	color: var(--text-inverse);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	margin: 0;
	align-self: flex-start;
}
.page-hero__eyebrow-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px; height: 16px;
	border-radius: var(--radius-xs);
	background: rgba(255, 255, 255, 0.15);
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}

.page-hero__title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(40px, 5.6vw, 84px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--text-inverse);
	max-width: 22ch;
	margin: 0;
}
.page-hero__title em {
	font-family: var(--font-display-italic);
	font-style: italic;
	font-weight: 400;
	color: var(--accent-2);
}

.page-hero__lede {
	font-family: var(--font-serif);
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
	max-width: 56ch;
	margin: 0;
	font-weight: 400;
}

.page-hero__actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-3);
}
.page-hero__actions .btn {
	padding: 16px 24px;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	min-height: 50px;
}

@media (max-width: 640px) {
	.page-hero--compact { min-height: clamp(380px, 50vh, 480px); }
	.page-hero__title { font-size: clamp(36px, 9vw, 56px); max-width: 100%; }
	.page-hero__lede { font-size: 17px; }
}

/* ─────────────────────────────  JOURNAL · liste éditoriale  ───────────────────────────── */

.journal__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-7);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--border-subtle);
}
.journal__filter {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: var(--ls-wide);
	color: var(--text-2);
	background: transparent;
	border: 1px solid var(--border-subtle);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.journal__filter:hover {
	color: var(--text-1);
	border-color: var(--text-1);
}
.journal__filter.is-active {
	color: var(--text-inverse);
	background: var(--accent-1);
	border-color: var(--accent-1);
}
.journal__filter-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

/* Featured article éditorial 2-col */
.journal-featured {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(var(--space-6), 4vw, var(--space-8));
	align-items: center;
	margin-bottom: var(--space-9);
	padding-bottom: var(--space-9);
	border-bottom: 1px solid var(--border-subtle);
}
.journal-featured__media {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--surface-2);
	position: relative;
}
.journal-featured__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}
.journal-featured__media:hover .journal-featured__img {
	transform: scale(1.03);
}
.journal-featured__img--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6);
}
.journal-featured__img--fallback svg {
	width: 60%;
	height: auto;
	opacity: 0.5;
}
.journal-featured__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.journal-featured__title {
	font-family: var(--font-serif);
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 500;
	line-height: 1.15;
	color: var(--text-1);
	margin: 0;
}
.journal-featured__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--accent-1), var(--accent-1));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.journal-featured__title a:hover {
	color: var(--accent-1);
	background-size: 100% 1px;
}
.journal-featured__excerpt {
	color: var(--text-2);
	font-size: var(--text-lg);
	line-height: var(--lh-relaxed);
	margin: 0;
}

@media (max-width: 900px) {
	.journal-featured {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
	.journal-featured__media { aspect-ratio: 16 / 10; }
}

/* Override grille journal en 3-col éditorial */
.journal__grid--3 {
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(var(--space-5), 3vw, var(--space-7));
}
@media (max-width: 1024px) {
	.journal__grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.journal__grid--3 { grid-template-columns: 1fr; }
}

.journal__pagination {
	justify-content: center;
	margin-top: var(--space-9);
	gap: var(--space-3);
}
.journal__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: var(--radius-md);
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--text-2);
	border: 1px solid var(--border-subtle);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.journal__pagination .page-numbers:hover {
	color: var(--text-1);
	border-color: var(--text-1);
}
.journal__pagination .page-numbers.current {
	color: var(--text-inverse);
	background: var(--accent-1);
	border-color: var(--accent-1);
}

/* ─────────────────────────────  SINGLE POST · article  ───────────────────────────── */

.single-post__hero {
	padding-block: clamp(var(--space-8), 9vw, var(--space-10)) var(--space-7);
}
.single-post__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: var(--ls-wide);
	color: var(--text-2);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.single-post__back:hover { color: var(--accent-1); }

.single-post__title {
	font-family: var(--font-serif);
	font-size: clamp(36px, 5.2vw, 64px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--text-1);
	max-width: 22ch;
	margin: 0;
}
.single-post__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.single-post__cover {
	margin: 0 0 var(--space-8);
}
.single-post__cover-img {
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--radius-xl);
	display: block;
}

/* Layout 2-col : TOC sticky + main */
.post-layout {
	display: block;
	max-width: 960px;
	margin: 0 auto;
}
.post-layout--with-toc {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(var(--space-7), 6vw, var(--space-10));
	max-width: 1360px;
	align-items: start;
}
.post-layout--with-toc .prose {
	max-width: 76ch;
}
.post-layout__main { min-width: 0; }

.post-toc {
	position: sticky;
	top: 100px;
	align-self: start;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	padding-right: var(--space-3);
}
.post-toc__inner {
	padding-left: var(--space-5);
	border-left: 1px solid var(--border-subtle);
}
.post-toc__label {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--text-2);
	margin: 0 0 var(--space-4);
}
.post-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	counter-reset: toc;
}
.post-toc__list li { counter-increment: toc; }
.post-toc__list a {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	color: var(--text-2);
	text-decoration: none;
	padding-left: 28px;
	position: relative;
	transition: color var(--dur-fast) var(--ease);
}
.post-toc__list a::before {
	content: counter(toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-2);
	opacity: 0.6;
}
.post-toc__list a:hover,
.post-toc__list a.is-active {
	color: var(--accent-1);
}
.post-toc__list a.is-active::before { opacity: 1; color: var(--accent-1); }

@media (max-width: 900px) {
	.post-layout--with-toc {
		grid-template-columns: 1fr;
	}
	.post-toc {
		position: relative;
		top: 0;
		max-height: none;
		margin-bottom: var(--space-6);
		overflow: visible;
	}
	.post-toc__inner {
		padding: var(--space-5);
		border-left: none;
		background: var(--surface);
		border-radius: var(--radius-lg);
		border: 1px solid var(--border-subtle);
	}
}

.single-post__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-8);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-subtle);
}
.single-post__tags a {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--text-2);
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	padding: 6px 12px;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.single-post__tags a:hover { color: var(--accent-1); border-color: var(--accent-1); }

/* Nav prev/next */
.single-post__nav-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}
.single-post__nav-card {
	display: block;
	padding: var(--space-6);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface);
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.single-post__nav-card:hover {
	border-color: var(--accent-1);
	transform: translateY(-2px);
}
.single-post__nav-card .h-card {
	margin-top: var(--space-3);
	color: var(--text-1);
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	line-height: 1.3;
}
.single-post__nav-card--right { text-align: right; }

@media (max-width: 700px) {
	.single-post__nav-grid {
		grid-template-columns: 1fr;
	}
	.single-post__nav-card--right { text-align: left; }
}

/* Related posts spacing */
.single-post__related .section-head--row {
	margin-bottom: var(--space-7);
}

/* ─────────────────────────────  SHOPIFY UPSELL · cross-sell e-shop (supplément amber)  ───────────────────────────── */

.section--shopify-upsell {
	background: var(--bg);
}

.shopify-upsell {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(var(--space-7), 6vw, var(--space-9));
	align-items: center;
}
@media (max-width: 900px) {
	.shopify-upsell { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* — Colonne contenu — */

.shopify-upsell__eyebrow {
	color: var(--text-2);
}
.shopify-upsell__eyebrow .eyebrow-dot {
	background: var(--accent-1);
}

.shopify-upsell__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.shopify-upsell__feature {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--text-base);
	color: var(--text-2);
	line-height: var(--lh-relaxed);
}
.shopify-upsell__check {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-sm);
	background: var(--accent-2);
	color: var(--text-inverse);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.shopify-upsell__check svg {
	width: 14px;
	height: 14px;
}

.shopify-upsell__cta-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.shopify-upsell__cta-row .btn__icon {
	width: 18px;
	height: 18px;
}

.shopify-upsell__price-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: 10px 18px 10px 20px;
	min-height: 48px;
	background: var(--accent-2-soft);
	border: 1px solid rgba(245, 158, 11, 0.28);
	border-radius: var(--radius-pill);
	color: var(--text-1);
	text-decoration: none;
	font-family: var(--font-sans);
	line-height: 1.1;
	transition:
		background var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}
.shopify-upsell__price-pill:hover,
.shopify-upsell__price-pill:focus-visible {
	background: var(--accent-2);
	border-color: var(--accent-2);
	color: var(--text-inverse);
	transform: translateY(-1px);
}
.shopify-upsell__price-prefix {
	font-size: var(--text-xs);
	font-family: var(--font-mono);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--text-3);
	transition: color var(--dur-fast) var(--ease);
}
.shopify-upsell__price-pill:hover .shopify-upsell__price-prefix,
.shopify-upsell__price-pill:focus-visible .shopify-upsell__price-prefix {
	color: rgba(255, 255, 255, 0.85);
}
.shopify-upsell__price-amount {
	font-family: var(--font-serif);
	font-size: var(--text-md);
	font-weight: 500;
	letter-spacing: var(--ls-tight);
}
.shopify-upsell__price-arrow {
	width: 16px;
	height: 16px;
	transition: transform var(--dur) var(--ease);
}
.shopify-upsell__price-pill:hover .shopify-upsell__price-arrow,
.shopify-upsell__price-pill:focus-visible .shopify-upsell__price-arrow {
	transform: translateX(4px);
}

.shopify-upsell__note {
	font-size: var(--text-xs);
	color: var(--text-3);
	margin: 0;
}

/* — Colonne mockup dashboard — */

.shopify-upsell__scene {
	position: relative;
	background: var(--accent-2-soft);
	border: 1px solid rgba(245, 158, 11, 0.18);
	border-radius: var(--radius-lg);
	padding: clamp(var(--space-5), 3vw, var(--space-7));
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	overflow: hidden;
}
.shopify-upsell__scene::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 55%),
		radial-gradient(circle at bottom left, rgba(0, 102, 255, 0.05), transparent 60%);
	pointer-events: none;
}
.shopify-upsell__scene > * {
	position: relative;
}

.shopify-upsell__mock {
	background: var(--bg);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	box-shadow: var(--shadow-xs);
}

.shopify-upsell__mock--hero {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.shopify-upsell__mock-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}
.shopify-upsell__mock-label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--text-3);
}
.shopify-upsell__mock-icon {
	width: 18px;
	height: 18px;
	color: var(--accent-2);
}
.shopify-upsell__mock-value {
	font-family: var(--font-serif);
	font-size: var(--text-3xl);
	font-weight: 500;
	color: var(--text-1);
	line-height: 1;
	letter-spacing: var(--ls-tight);
}
.shopify-upsell__mock-trend {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--success);
}
.shopify-upsell__mock-trend-icon {
	width: 14px;
	height: 14px;
}

.shopify-upsell__mock-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}
.shopify-upsell__mock--stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.shopify-upsell__mock-stat {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--text-1);
	line-height: 1.1;
}
.shopify-upsell__mock-stat small {
	font-size: var(--text-sm);
	color: var(--text-3);
	font-weight: 400;
	margin-left: 2px;
}

.shopify-upsell__mock--brand {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.shopify-upsell__mock-brand-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	background: var(--accent-2);
	color: var(--text-inverse);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.shopify-upsell__mock-brand-icon svg {
	width: 20px;
	height: 20px;
}
.shopify-upsell__mock-brand-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.shopify-upsell__mock-brand-name {
	font-family: var(--font-serif);
	font-size: var(--text-md);
	font-weight: 500;
	color: var(--text-1);
	line-height: 1.1;
}
.shopify-upsell__mock-brand-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	color: var(--success);
	font-weight: 500;
}
.shopify-upsell__mock-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--success);
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

/* ─────────────────────────────  COOKS SECTION · épaulée par des cuisiniers  ───────────────────────────── */

.cooks-section {
	background: var(--surface);
	border-bottom: 1px solid var(--border-subtle);
	padding-block: clamp(64px, 7vw, 104px);
	position: relative;
}
/* Galerie des cuisiniers nommés (sous le split principal) */
.cooks-section__team {
	margin-top: clamp(48px, 6vw, 88px);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	align-items: center;
}
.cooks-section__team-label {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--text-2);
	margin: 0;
}
.cooks-section__team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 280px));
	gap: var(--space-7);
	justify-content: center;
	width: 100%;
}
@media (max-width: 600px) {
	.cooks-section__team-grid { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; }
}

.cook-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	text-align: center;
}
.cook-card__portrait {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--surface-2);
	border: 1px solid var(--border-subtle);
}
.cook-card__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cook-card__caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cook-card__name {
	font-family: var(--font-serif);
	font-size: var(--text-md);
	font-weight: 500;
	color: var(--text-1);
}
.cook-card__role {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--text-2);
}

/* ═══════════════════════════════  Pages services — hero clair (style owner.com) + feature showcase  ═══════════════════════════════ */

/* ── Hero clair, split copy + visuel ── */
.svc-hero {
	position: relative;
	padding-block: clamp(48px, 7vw, 108px);
	overflow: hidden;
}
/* Atmosphère discrète : halo accent derrière le visuel (pas de fond plat). */
.svc-hero::before {
	content: "";
	position: absolute;
	top: -18%;
	right: -10%;
	width: 640px;
	height: 640px;
	background: radial-gradient(circle at center, var(--accent-1-soft), transparent 68%);
	pointer-events: none;
	z-index: 0;
}
.svc-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(40px, 5vw, 76px);
}
.svc-hero__col { min-width: 0; max-width: 620px; }
.svc-hero__title {
	margin-top: var(--space-4);
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(40px, 4.6vw, 68px);
	line-height: 1.03;
	letter-spacing: -0.025em;
	color: var(--text-1);
}
.svc-hero__lede {
	margin-top: var(--space-5);
	max-width: 32em;
	font-size: var(--text-lg);
	line-height: var(--lh-normal);
	color: var(--text-2);
}
.svc-hero .cluster { margin-top: var(--space-6); }

/* Visuel : image encadrée (façon owner) avec liseré accent subtil + légende. */
.svc-hero__visual { position: relative; min-width: 0; }
.svc-hero__frame {
	position: relative;
	margin: 0;
	padding: 10px;
	border-radius: calc(var(--radius-xl) + 8px);
	background: linear-gradient(150deg, var(--accent-1-soft), var(--accent-2-soft));
}
.svc-hero__frame-inner {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	background: var(--surface);
	aspect-ratio: 4 / 5;
}
.svc-hero__frame-inner > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.svc-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 18, 32, 0.82) 2%, rgba(11, 18, 32, 0.12) 46%, transparent 68%);
}
.svc-hero__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(18px, 2.2vw, 26px);
	color: #fff;
}
.svc-hero__caption-title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: var(--text-md);
	line-height: 1.28;
}
.svc-hero__caption-meta {
	margin-top: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.72);
}
.svc-hero__play {
	position: absolute;
	right: clamp(18px, 2.2vw, 26px);
	bottom: clamp(18px, 2.2vw, 26px);
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--text-1);
	box-shadow: var(--shadow-md);
	transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.svc-hero__play:hover { transform: scale(1.06); background: #fff; }
.svc-hero__play svg { width: 18px; height: 18px; margin-left: 2px; }

/* Visuel custom (mock bespoke) : simple conteneur centré. */
.svc-hero__visual--custom { display: flex; justify-content: center; }

@media (max-width: 900px) {
	.svc-hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
	.svc-hero__col { max-width: none; }
	.svc-hero__frame-inner { aspect-ratio: 16 / 10; }
	.svc-hero::before { width: 400px; height: 400px; top: -12%; }
}
@media (max-width: 560px) {
	.svc-hero .cluster { flex-direction: column; align-items: stretch; }
	.svc-hero .cluster > .btn { width: 100%; }
}

/* ── Feature showcase (split alterné copy / mock) ── */
.feature-showcase__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(40px, 5vw, 84px);
}
.feature-showcase__content { min-width: 0; }
.feature-showcase--reverse .feature-showcase__content { order: 2; }
.feature-showcase__visual { display: flex; justify-content: center; min-width: 0; }
.feature-showcase__content .checklist { margin-top: var(--space-2); }

@media (max-width: 860px) {
	.feature-showcase__grid { grid-template-columns: 1fr; gap: var(--space-6); }
	.feature-showcase--reverse .feature-showcase__content { order: 0; }
}

/* ── Mocks décoratifs (widgets & navigateur) ── */
.mock {
	width: min(430px, 100%);
	background: var(--bg);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: clamp(18px, 2vw, 24px);
}
.mock__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--text-3);
}
.mock__status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--text-2);
}
.mock__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--success);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 22%, transparent);
}

/* Menu du jour */
.mock--daily .mock__plate {
	margin-top: var(--space-4);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}
.mock__dish { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-md); color: var(--text-1); }
.mock__dish-sub { margin-top: 2px; font-size: 13px; color: var(--text-3); }
.mock__price {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: 20px;
	font-weight: 500;
	color: var(--accent-1);
}
.mock__badge {
	display: inline-block;
	margin-top: var(--space-4);
	padding: 5px 11px;
	border-radius: var(--radius-pill);
	background: var(--accent-2-soft);
	color: color-mix(in oklab, var(--accent-2) 82%, var(--text-1));
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Horaires */
.mock--hours .mock__rows { margin-top: var(--space-4); display: grid; gap: 2px; }
.mock__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 0;
	border-top: 1px solid var(--border-subtle);
	font-size: 14px;
	color: var(--text-2);
}
.mock__row:first-child { border-top: 0; }
.mock__row--now { color: var(--text-1); font-weight: 600; }
.mock__row span:last-child { font-family: var(--font-mono); font-size: 13px; }

/* Réservation */
.mock--resa .mock__title { margin-top: 2px; font-family: var(--font-serif); font-weight: 600; font-size: var(--text-lg); color: var(--text-1); }
.mock__chips { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: 8px; }
.mock__chip {
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-default);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-2);
	background: var(--bg);
}
.mock__chip--active { border-color: var(--accent-1); background: var(--accent-1-soft); color: var(--accent-1); }
.mock__field {
	margin-top: var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	background: var(--surface);
	font-size: 14px;
	color: var(--text-2);
}
.mock__field strong { color: var(--text-1); font-weight: 600; }
.mock__submit {
	margin-top: var(--space-4);
	width: 100%;
	padding: 13px;
	border-radius: var(--radius-md);
	background: var(--accent-1);
	color: #fff;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
}

/* Navigateur (hero page Création de site) */
.browser {
	width: min(440px, 100%);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bg);
	border: 1px solid var(--border-subtle);
	box-shadow: var(--shadow-lg);
}
.browser__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	background: var(--surface);
	border-bottom: 1px solid var(--border-subtle);
}
.browser__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.browser__url {
	margin-left: 8px;
	flex: 1;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	background: var(--bg);
	border: 1px solid var(--border-subtle);
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-3);
	text-align: center;
}
.browser__view { padding: 0; }
.browser__banner {
	position: relative;
	padding: clamp(26px, 4vw, 40px) clamp(20px, 3vw, 28px);
	background: linear-gradient(150deg, #14202e, #0b1220);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
.browser__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); }
.browser__h1 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(20px, 3vw, 28px); line-height: 1.1; letter-spacing: -0.02em; }
.browser__cta { margin-top: 4px; padding: 8px 16px; border-radius: var(--radius-pill); background: #fff; color: var(--text-1); font-size: 13px; font-weight: 600; }
.browser__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; }
.browser__card { border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); border: 1px solid var(--border-subtle); }
.browser__card-img { height: 46px; background: linear-gradient(135deg, var(--accent-1-soft), var(--accent-2-soft)); }
.browser__card-line { height: 7px; margin: 8px; border-radius: var(--radius-sm); background: var(--border-default); }
.browser__card-line--short { width: 60%; }

/* Puce d'icône pour les cartes bénéfices (grille 3 colonnes). */
.feature-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-md);
	background: var(--accent-1-soft);
	color: var(--accent-1);
}
.feature-ic svg { width: 23px; height: 23px; }

/* ═══════════════════════════════  Configurateur de commande — page Impression & flyers  ═══════════════════════════════ */

.impr {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	margin-top: var(--space-7);
}
.impr__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-7); }
.impr__side {
	min-width: 0;
	position: sticky;
	top: calc(var(--header-h) + 16px);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.impr__step-label {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-2);
	margin-bottom: var(--space-3);
}

/* Sélecteur de produit */
.impr__products { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.impr__product {
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 15px 16px;
	border-radius: var(--radius-lg);
	border: 1.5px solid var(--border-subtle);
	background: var(--bg);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.impr__product:hover { border-color: var(--border-default); }
.impr__product.is-selected { border-color: var(--accent-1); box-shadow: 0 0 0 1px var(--accent-1); }
.impr__product-name { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-md); color: var(--text-1); }
.impr__product-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.impr__product-from { margin-top: 6px; font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-1); }

/* Quantité (segmented) */
.impr__qtys { display: grid; gap: 8px; }
.impr__qty {
	padding: 12px 10px;
	border-radius: var(--radius-md);
	border: 1.5px solid var(--border-subtle);
	background: var(--bg);
	cursor: pointer;
	text-align: center;
	transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.impr__qty:hover { border-color: var(--border-default); }
.impr__qty[aria-pressed="true"] { border-color: var(--accent-1); background: var(--accent-1-soft); }
.impr__qty-q { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 17px; color: var(--text-1); }
.impr__qty-p { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }

/* Options (chips, choix unique) */
.impr__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.impr__opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 15px;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--border-subtle);
	background: var(--bg);
	cursor: pointer;
	font-size: 14px;
	color: var(--text-2);
	transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.impr__opt:hover { border-color: var(--border-default); }
.impr__opt[aria-pressed="true"] { border-color: var(--accent-1); background: var(--accent-1-soft); color: var(--accent-1); font-weight: 600; }
.impr__opt small { color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }
.impr__opt[aria-pressed="true"] small { color: var(--accent-1); }

/* Design (2 cartes radio) */
.impr__design { display: grid; gap: 10px; }
.impr__design-opt {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 3px 12px;
	padding: 14px 16px;
	border-radius: var(--radius-lg);
	border: 1.5px solid var(--border-subtle);
	background: var(--bg);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.impr__design-opt.is-selected { border-color: var(--accent-1); box-shadow: 0 0 0 1px var(--accent-1); }
.impr__design-opt input { position: absolute; opacity: 0; pointer-events: none; }
.impr__design-t { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 15px; color: var(--text-1); }
.impr__design-d { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--text-3); }
.impr__design-amt { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; font-family: var(--font-mono); font-size: 15px; color: var(--text-2); white-space: nowrap; }
.impr__design-opt.is-selected .impr__design-amt { color: var(--accent-1); }

/* Addition (récapitulatif) */
.impr__receipt { padding: var(--space-5); }
.impr__rows { margin-top: var(--space-4); display: grid; gap: 10px; }
.impr__row { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; color: var(--text-2); }
.impr__row > span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-1); }
.impr__total {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1.5px dashed var(--border-default);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	color: var(--text-1);
}
.impr__total > span:last-child { font-size: var(--text-xl); color: var(--accent-1); }
.impr__vat { margin-top: 8px; font-size: 12px; color: var(--text-3); text-align: right; }

/* Formulaire FluentForm + fallback */
.impr__form-fallback { padding: var(--space-5); text-align: center; }
.impr__form-fallback p { color: var(--text-2); margin-bottom: var(--space-4); }
.impr__form .fluentform { margin: 0; }

@media (max-width: 900px) {
	.impr { grid-template-columns: 1fr; }
	.impr__side { position: static; }
	.impr__products { grid-template-columns: 1fr; }
}

/* ── Mock « supports imprimés » (visuel hero) ── */
.print-mock { position: relative; width: min(400px, 100%); aspect-ratio: 5 / 5; }
.print-mock__flyer {
	position: absolute;
	top: 4%;
	right: 0;
	width: 68%;
	aspect-ratio: 3 / 4;
	background: var(--bg);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	transform: rotate(2.5deg);
}
.print-mock__flyer-head {
	padding: 16px 16px 14px;
	background: linear-gradient(150deg, #14202e, #0b1220);
	color: #fff;
}
.print-mock__eyebrow { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); }
.print-mock__title { display: block; margin-top: 5px; font-family: var(--font-serif); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.print-mock__menu { padding: 14px 16px; display: grid; gap: 12px; }
.print-mock__dish { display: flex; align-items: center; gap: 10px; }
.print-mock__dish span { flex: 1; height: 8px; border-radius: var(--radius-sm); background: var(--border-default); }
.print-mock__dish b { font-family: var(--font-mono); font-size: 12px; color: var(--accent-1); }
.print-mock__card {
	position: absolute;
	left: 0;
	bottom: 6%;
	width: 52%;
	aspect-ratio: 85 / 55;
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	transform: rotate(-6deg);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	justify-content: center;
}
.print-mock__card-logo {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--accent-1);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 15px;
}
.print-mock__card-line { height: 6px; border-radius: var(--radius-xs); background: var(--border-default); }
.print-mock__card-line.short { width: 55%; }

/* ═══════════════════════════════  CTA WhatsApp (page Analyse de carte)  ═══════════════════════════════ */

/* Bouton vert WhatsApp (exception canal, calqué sur .btn--primary). */
.btn--whatsapp { background: var(--whatsapp); color: #fff; border-color: var(--whatsapp); }
.btn--whatsapp:hover { background: var(--whatsapp-hover); border-color: var(--whatsapp-hover); color: #fff; }
.btn--whatsapp svg { width: 20px; height: 20px; }

/* Carte pièce maîtresse : split copie + mock conversation. */
.wa-cta {
	background: linear-gradient(160deg, color-mix(in oklab, var(--whatsapp) 9%, var(--bg)), var(--bg));
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	padding: clamp(28px, 4vw, 52px);
}
.wa-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
}
.wa-cta__col { min-width: 0; }
.wa-cta__steps { display: grid; gap: 16px; margin-top: var(--space-5); }
.wa-cta__step { display: flex; gap: 14px; align-items: flex-start; }
.wa-cta__step-n {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--whatsapp);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--font-mono);
	font-size: 14px;
}
.wa-cta__step p { font-size: 15px; color: var(--text-2); line-height: 1.5; }
.wa-cta__step strong { color: var(--text-1); font-weight: 600; }
.wa-cta__actions { margin-top: var(--space-6); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wa-cta__phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-mono);
	font-size: 15px;
	color: var(--text-2);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.wa-cta__phone svg { width: 16px; height: 16px; }
.wa-cta__phone:hover { color: var(--whatsapp-hover); }
.wa-cta__note { margin-top: var(--space-4); font-size: 13px; color: var(--text-3); max-width: 52ch; line-height: 1.55; }
.wa-cta__visual { min-width: 0; display: flex; justify-content: center; }

@media (max-width: 860px) {
	.wa-cta__grid { grid-template-columns: 1fr; }
	.wa-cta__actions { flex-direction: column; align-items: stretch; }
	.wa-cta__actions .btn { width: 100%; }
	.wa-cta__phone { justify-content: center; }
}

/* Mock conversation WhatsApp (décoratif). Couleurs propres au chat, hors palette de marque. */
.chat-mock {
	width: min(380px, 100%);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border-subtle);
	box-shadow: var(--shadow-lg);
}
.chat-mock__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #128C7E; color: #fff; }
.chat-mock__avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 16px; }
.chat-mock__name { display: block; font-weight: 600; font-size: 14px; }
.chat-mock__status { display: block; font-size: 11px; opacity: 0.82; }
.chat-mock__body { background: #ECE5DD; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-mock__bubble { max-width: 82%; padding: 9px 12px; border-radius: var(--radius-lg); font-size: 13.5px; line-height: 1.42; color: #1B252F; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); }
.chat-mock__bubble--in { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.chat-mock__bubble--out { align-self: flex-end; background: #DCF8C6; border-top-right-radius: 3px; }
.chat-mock__photo { width: 160px; height: 104px; border-radius: var(--radius-md); background: linear-gradient(135deg, #c9bfae, #e7dfd0); margin-bottom: 6px; }
.chat-mock__cap { font-size: 12px; color: #5a5147; }

/* ═══════════════════════════════  Tarifs & packages (hub)  ═══════════════════════════════ */
/* Composants propres au template-pricing-full.php. Bâtis sur les tokens et les
   primitives existantes (.plan, .card, .tabs, .badge, .pricing-table). */

/* ── Traitement anti-slop PARTAGÉ par tous les nouveaux templates (.site-main--wide) ──
   Tracking, rythme vertical et libellés. Scopé à .site-main--wide (présent sur les 7
   nouveaux templates, pricing inclus) pour ne pas toucher le reste du site. */

/* Titres : tracking neutre (le .h-section global est en -0.015em, trop serré). */
.site-main--wide .h-section { letter-spacing: var(--ls-normal); }
/* Titre héros service : -0.025em global, trop serré → neutre. */
.site-main--wide .svc-hero__title { letter-spacing: var(--ls-normal); }

/* Rythme vertical aéré. Le thème colle les sections adjacentes via
   `.section + .section { padding-top: 0 }` (base.css) : sur les pages qui alternent
   les bandes claires/colorées, ça écrase l'air en haut de chaque bande. On restaure
   un padding symétrique généreux. */
.site-main--wide .section { padding-block: clamp(80px, 8vw, 128px); }
.site-main--wide .section-head { margin-bottom: var(--space-8); }

/* Largeur alignée sur la navbar (1440px) : gérée par le modifieur partagé
   .site-main--wide (voir base.css), appliqué aussi au <main> de cette page. */

/* Cartes toujours BLANCHES avec un bord net : le gris-sur-gris (carte .card grise
   sur une bande .section--surface grise) devient invisible. Blanc + bord fonctionne
   sur les bandes claires ET grises. Partagé par tous les nouveaux templates.
   Le featured reste sombre, le pack garde l'ambre. */
.site-main--wide .card,
.pricing-hub .plan:not(.plan--featured) {
	background: var(--bg);
	border: 1px solid var(--border-default);
}
.pricing-hub .pack { border-color: var(--accent-2); }
.pricing-hub .plan--muted { background: var(--surface); border-color: var(--border-subtle); }
.pricing-hub .pricing-table td,
.pricing-hub .pricing-table th { background: var(--bg); }
.pricing-hub .pricing-table thead tr { background: var(--surface); }
.pricing-hub .pricing-table th.is-featured,
.pricing-hub .pricing-table td.is-featured { background: var(--accent-1-soft); }

/* Libellés en capitales mono espacées (.badge, .text-meta) = signature « template » :
   on repasse en casse normale et police sans. Partagé par tous les nouveaux templates. */
.site-main--wide .badge,
.site-main--wide .text-meta {
	font-family: var(--font-sans);
	text-transform: none;
	letter-spacing: var(--ls-normal);
}
.site-main--wide .text-meta { font-size: var(--text-sm); line-height: var(--lh-relaxed); }
.site-main--wide .badge { font-size: var(--text-sm); font-weight: 500; }

/* — Toggle resto / pizzeria — réutilise le composant .tabs/.tab (components.css) — */
/* Pas de margin-top : le .section-head (margin-bottom space-8) gère déjà le gap. */
.pricing-switch { margin-top: 0; }
.pricing-switch > .tabs { margin-bottom: var(--space-6); }
.pricing-pane[hidden] { display: none; }

/* — Bloc « Dû aujourd'hui / Total » (remplace .plan__price) — */
.plan__due {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.plan__due-label {
	font-size: var(--text-sm);
	color: var(--text-3);
}
.plan__due-amount {
	font-family: var(--font-serif);
	font-size: clamp(34px, 4.4vw, 48px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--ls-normal);
	color: var(--text-1);
}
.plan__total {
	margin-top: var(--space-2);
	padding-top: var(--space-3);
	border-top: 1px dashed var(--border-default);
	font-size: var(--text-sm);
	color: var(--text-3);
}
.plan__total strong { color: var(--text-1); font-weight: 600; }
.plan--featured .plan__due-label { color: rgba(255, 255, 255, 0.6); }
.plan--featured .plan__due-amount { color: var(--surface); }
.plan--featured .plan__total { color: rgba(255, 255, 255, 0.7); border-top-color: rgba(255, 255, 255, 0.18); }
.plan--featured .plan__total strong { color: var(--surface); }

/* En-tête de liste (« Tout l'Essentiel, et : ») — sans puce — */
.plan__features-head { padding: 0; }
.plan__features-head::before { display: none; }
.plan__features-head strong { font-family: var(--font-serif); font-weight: 500; color: var(--text-1); }
.plan--featured .plan__features-head strong { color: var(--surface); }

/* — Panneau pizzeria : carte boutique + aside « comment ça marche » — */
.pricing--split {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: var(--space-5);
	margin-top: 0;
}
@media (max-width: 900px) { .pricing--split { grid-template-columns: 1fr; } }
.plan--muted { background: var(--surface-2); justify-content: flex-start; }
.plan__name--sm { font-size: var(--text-lg); }
.plan__setup--note { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); color: var(--text-3); margin-top: auto; }

/* — Rangée d'add-ons (badges avec prix) — */
.addons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}
.addons .badge strong { color: var(--text-1); font-weight: 700; }
.addons__fine { margin-top: var(--space-5); color: var(--text-3); max-width: 720px; }

/* — Badge « Gratuit » (vert) — */
.badge--free {
	color: var(--success);
	background: rgba(16, 185, 129, 0.12);
	border-color: transparent;
	align-self: flex-start;
}

/* — Trio de services (carte : analyse, conception, impression) — */
.svc-trio { margin-top: 0; }
.svc {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: flex-start;
	padding: var(--space-7);
}
.svc .h-card { margin: 0; }
.svc__text { font-size: var(--text-sm); color: var(--text-2); line-height: var(--lh-relaxed); }
.svc__text--fine { font-size: var(--text-xs); color: var(--text-3); }
.svc__price {
	font-family: var(--font-serif);
	font-size: var(--text-2xl);
	font-weight: 500;
	color: var(--text-1);
	letter-spacing: var(--ls-normal);
	margin-top: var(--space-2);
}
.svc__price small { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.svc__mini { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.svc__mini td { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-2); }
.svc__mini td:last-child { text-align: right; font-family: var(--font-serif); font-weight: 500; color: var(--text-1); }
.svc__mini tr:last-child td { border-bottom: 0; }
.svc__cta { width: 100%; margin-top: auto; }

/* — Bloc Business (diagnostic) & Package : carte deux colonnes — */
.business-card,
.pack {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: var(--space-7);
	align-items: center;
	padding: var(--space-8);
}
.pack { border: 1px solid var(--accent-2); }
@media (max-width: 820px) {
	.business-card,
	.pack { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); }
}
.business-card__body .h-section,
.pack__body .h-section { margin: var(--space-3) 0; }
.business-card__body .addons { margin-top: var(--space-5); }
.pack__list { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pack__list li { position: relative; padding-left: var(--space-5); font-size: var(--text-base); color: var(--text-2); }
.pack__list li::before { content: "+"; position: absolute; left: 0; color: var(--accent-2); font-weight: 700; }

/* Encart prix (business + package) — */
.business-card__price,
.pack__price {
	background: var(--surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.pack__price { background: var(--accent-2-soft); border-color: transparent; }
.packprice__lbl {
	font-size: var(--text-sm);
	color: var(--text-3);
}
.packprice__was { color: var(--text-3); text-decoration: line-through; font-size: var(--text-md); }
.packprice__now {
	font-family: var(--font-serif);
	font-size: clamp(36px, 4.4vw, 48px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: var(--ls-normal);
	color: var(--text-1);
}
.business-card__price .btn,
.pack__price .btn { width: 100%; margin-top: var(--space-3); }
.business-card__price .text-meta { color: var(--text-3); }

/* — Encart Zen (fond sombre) — */
.zenbox {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--space-8);
	align-items: center;
	background: var(--text-1);
	color: var(--surface);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
}
@media (max-width: 820px) { .zenbox { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); } }
.zenbox .h-section { color: var(--surface); margin: var(--space-3) 0; }
.zenbox__lede { color: rgba(255, 255, 255, 0.7); font-size: var(--text-base); line-height: var(--lh-relaxed); margin-bottom: var(--space-5); }
.zenbox__panel {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}
.zenbox__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: var(--space-3) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.zenbox__row:last-of-type { border-bottom: 0; }
.zenbox__row span { color: rgba(255, 255, 255, 0.7); font-size: var(--text-sm); }
.zenbox__row b { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-lg); color: var(--accent-2); }
.zenbox__row b small { font-size: var(--text-xs); font-weight: 400; color: rgba(255, 255, 255, 0.55); }
.zenbox__note { color: rgba(255, 255, 255, 0.5); font-size: var(--text-xs); margin-top: var(--space-4); }