/* illustre-theme - main.css
   Reproduction fidele du design Framer agenceillustre.fr
*/

/* ===== SELF-HOSTED FONTS (10/05/2026 — gain LCP ~200ms vs Fontshare/Google CDN) ===== */
/* Cabinet Grotesk (display) - Fontshare licence libre */
@font-face { font-family: 'Cabinet Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/cabinet-grotesk/cabinet-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Cabinet Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cabinet-grotesk/cabinet-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Cabinet Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/cabinet-grotesk/cabinet-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Cabinet Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/cabinet-grotesk/cabinet-grotesk-800.woff2') format('woff2'); }
@font-face { font-family: 'Cabinet Grotesk'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/cabinet-grotesk/cabinet-grotesk-900.woff2') format('woff2'); }
/* Inter (body) - SIL OFL */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter/inter-700.woff2') format('woff2'); }
/* Fragment Mono (mono) - SIL OFL */
@font-face { font-family: 'Fragment Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/fragment-mono/fragment-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Fragment Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/fragment-mono/fragment-mono-400-italic.woff2') format('woff2'); }

:root {
	--ill-bg: #1a5848;
	--ill-bg-2: #1a5848;
	--ill-bg-3: #20654f;
	--ill-accent: #52c7a3;
	--ill-accent-soft: rgba(82, 199, 163, 0.15);
	--ill-accent-softer: rgba(82, 199, 163, 0.08);
	--ill-warm: #f5c518;
	--ill-text: #ffffff;
	--ill-text-muted: rgba(255, 255, 255, 0.82);
	--ill-text-faint: rgba(255, 255, 255, 0.6);
	--ill-border: rgba(255, 255, 255, 0.14);
	--ill-radius: 14px;
	--ill-radius-sm: 8px;
	--ill-radius-pill: 999px;
	--ill-container: 1200px;
	--ill-gutter: clamp(1rem, 3vw, 2rem);
	--ill-section-y: clamp(2.5rem, 5vw, 4.5rem);

	--ill-font-display: 'Cabinet Grotesk', system-ui, -apple-system, sans-serif;
	--ill-font-body: 'Cabinet Grotesk', system-ui, -apple-system, sans-serif;
	--ill-font-mono: 'Fragment Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* Fond solide (anciennement gradient diagonal + background-attachment: fixed).
	   Le combo gradient + fixed interagissait mal avec Lenis (smooth scroll) et les sections qui
	   posaient chacune leur propre gradient var(--ill-bg-x), creant des bandes visibles aux jonctions.
	   Solid color partout = aucune coupure possible, ni desktop ni mobile, ni avec smooth scroll. */
	background: #1a5848;
	min-height: 100%;
}
body {
	margin: 0;
	font-family: var(--ill-font-body);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	line-height: 1.6;
	color: var(--ill-text);
	background: transparent;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ill-accent); text-decoration: none; transition: color 160ms ease; }
a:hover, a:focus { color: var(--ill-text); }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ill-font-display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.005em;
	margin: 0 0 0.6em;
	color: var(--ill-text);
}

h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem); font-weight: 800; letter-spacing: 0.02em; }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem); }

p { margin: 0 0 1em; color: var(--ill-text-muted); }
ul, ol { padding-left: 1.25em; margin: 0 0 1em; color: var(--ill-text-muted); }

::selection { background: var(--ill-accent); color: var(--ill-bg); }

.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); height: 1px; width: 1px; overflow: hidden; white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ill-accent); color: var(--ill-bg); padding: .75rem 1rem; }

/* Fond animé : aurora — orbes turquoise floues qui dérivent lentement, pure CSS.
   z-index: -1 + fond global porté par <html> → reste visible derrière tout
   le contenu sans bouffer le position:fixed des autres éléments. */
.site-aurora {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	opacity: .65;
}
.site-aurora__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	will-change: transform;
	mix-blend-mode: screen;
}
.site-aurora__orb--1 {
	width: 620px; height: 620px;
	top: -180px; left: -160px;
	background: radial-gradient(circle, rgba(82,199,163,0.55), transparent 65%);
	animation: aurora-float-1 32s ease-in-out infinite;
}
.site-aurora__orb--2 {
	width: 520px; height: 520px;
	top: 28%; right: -160px;
	background: radial-gradient(circle, rgba(120,210,180,0.45), transparent 65%);
	animation: aurora-float-2 38s ease-in-out infinite;
}
.site-aurora__orb--3 {
	width: 720px; height: 720px;
	bottom: -260px; left: 18%;
	background: radial-gradient(circle, rgba(36,140,110,0.6), transparent 65%);
	animation: aurora-float-3 44s ease-in-out infinite;
}
.site-aurora__orb--4 {
	width: 420px; height: 420px;
	top: 55%; left: 48%;
	background: radial-gradient(circle, rgba(82,199,163,0.4), transparent 65%);
	animation: aurora-float-4 36s ease-in-out infinite;
}
@keyframes aurora-float-1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(180px, 90px) scale(1.15); }
}
@keyframes aurora-float-2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-220px, 160px) scale(1.2); }
}
@keyframes aurora-float-3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(200px, -210px) scale(1.1); }
}
@keyframes aurora-float-4 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-140px, -110px) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
	.site-aurora__orb { animation: none; }
}
.skip-link:focus { left: 1rem; top: 1rem; }

.container { width: 100%; max-width: var(--ill-container); margin-inline: auto; padding-inline: var(--ill-gutter); }

/* ===== HEADER PILL FLOTTANT ===== */
.site-header {
	position: fixed; top: 0; left: 0; right: 0;
	z-index: 100;
	padding: 1rem var(--ill-gutter);
	pointer-events: none;
	transition: top 200ms ease;
}
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}
.site-header__wrap {
	max-width: 1100px; margin: 0 auto;
	pointer-events: auto;
}
.site-header__pill {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
	padding: .5rem .5rem .5rem 1.5rem;
	border-radius: var(--ill-radius-pill);
	background: rgba(26, 88, 72, 0.55);
	-webkit-backdrop-filter: saturate(160%) blur(18px);
	backdrop-filter: saturate(160%) blur(18px);
	-webkit-backdrop-filter: saturate(160%) blur(18px);
	border: 1px solid rgba(82, 199, 163, 0.18);
	box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.site-header.is-scrolled .site-header__pill { background: rgba(26, 88, 72, 0.78); }
.site-header__brand { display: inline-flex; align-items: center; }
.site-header__logo { width: auto; height: 32px; }

.site-header__actions { display: flex; align-items: center; gap: .5rem; }
.site-header__nav { display: flex; align-items: center; gap: .25rem; }
.site-header__menu { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: .125rem; }
.site-header__menu li a { color: var(--ill-text); font-size: .875rem; font-weight: 500; padding: .4rem .65rem; border-radius: var(--ill-radius-pill); transition: background 150ms; }
.site-header__menu li a:hover { background: rgba(255,255,255,0.08); }

/* === Dropdown Expertises === */
.site-header__menu .menu-item-has-children { position: relative; }

.site-header__menu .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	margin-left: 5px;
	vertical-align: middle;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	transition: transform 200ms ease;
}
.site-header__menu .menu-item-has-children:hover > a::after,
.site-header__menu .menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}

.site-header__menu .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translate(-50%, 6px);
	background: rgba(18, 66, 55, 0.97);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 6px;
	min-width: 240px;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
	z-index: 200;
	box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.site-header__menu .menu-item-has-children:hover > .sub-menu,
.site-header__menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 0s;
}

.site-header__menu .sub-menu li { list-style: none; margin: 0; }
.site-header__menu .sub-menu a {
	display: block;
	padding: 10px 14px;
	color: var(--ill-text);
	border-radius: var(--ill-radius-sm);
	white-space: nowrap;
	font-size: .85rem;
	font-weight: 500;
	background: transparent;
	transition: background 150ms ease, color 150ms ease;
}
.site-header__menu .sub-menu a:hover,
.site-header__menu .sub-menu a:focus {
	background: var(--ill-accent-softer);
	color: var(--ill-accent);
}
.header-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .65em 1.1em;
	font-family: var(--ill-font-display); font-weight: 600;
	font-size: .9rem; letter-spacing: .005em;
	border-radius: var(--ill-radius-pill);
	border: 1px solid transparent;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
	white-space: nowrap;
}
.header-btn--ghost { color: var(--ill-text); background: transparent; border-color: transparent; }
.header-btn--ghost:hover { background: rgba(255,255,255,0.08); color: var(--ill-text); }
.header-btn--mint { background: var(--ill-accent); color: var(--ill-bg); border-color: var(--ill-accent); }
.header-btn--mint:hover { background: #6cdab9; color: var(--ill-bg); }
.header-btn .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ill-bg); display: inline-block; }

.site-nav__toggle { display: none; background: transparent; border: 0; padding: .5rem; flex-direction: column; gap: 4px; align-items: center; }
.site-nav__toggle span:not(.screen-reader-text) { width: 22px; height: 2px; background: var(--ill-text); border-radius: 2px; transition: transform 200ms; }

.site-nav-mobile { display: none; }

@media (max-width: 880px) {
	.site-header__pill { padding: .5rem 1rem; }
	.site-header__actions { display: none; }
	.site-header__nav { display: none; }
	.site-nav__toggle { display: inline-flex; }
	.site-nav-mobile {
		display: flex; flex-direction: column;
		margin-top: .5rem;
		padding: 1rem;
		gap: .25rem;
		background: rgba(26, 88, 72, 0.92);
		border: 1px solid var(--ill-border);
		border-radius: var(--ill-radius);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		max-height: 0; overflow: hidden;
		opacity: 0; pointer-events: none;
		transition: max-height 240ms ease, opacity 200ms ease;
	}
	.site-nav-mobile.is-open { max-height: 60vh; opacity: 1; pointer-events: auto; padding: 1rem; }
	.site-nav-mobile a { color: var(--ill-text); padding: .85rem 1rem; border-radius: var(--ill-radius-pill); font-weight: 500; }
	.site-nav-mobile a:hover { background: rgba(255,255,255,0.06); }
	.site-nav-mobile a.header-btn--mint { background: var(--ill-accent); color: var(--ill-bg); justify-content: center; margin-top: .5rem; }

	/* Sous-menu mobile - affiché indenté directement (pas de hover) */
	.site-header__menu .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 0 0 0 12px;
		min-width: 0;
		transition: none;
		display: none; /* caché sur mobile car le menu desktop est masqué */
	}
	/* Sous-menu mobile via site-nav-mobile */
	.site-nav-mobile__list .menu-item-has-children > a::after { display: none; }
	.site-nav-mobile__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 0 0 0 12px;
		min-width: 0;
		transition: none;
		transform: none;
	}
	.site-nav-mobile__list .sub-menu a {
		font-size: .85rem;
		padding: .6rem 1rem;
		color: var(--ill-text-muted);
	}
	.site-nav-mobile__list .sub-menu a:hover { color: var(--ill-text); background: rgba(255,255,255,0.06); }
}

/* ===== HERO ===== */
.hero {
	position: relative;
	padding-block: clamp(5rem, 9vw, 7rem) 0;
	background: var(--ill-bg);
	overflow: hidden;
	isolation: isolate;
}

.hero__bg {
	position: absolute; inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* === Mosaïque vidéos Vimeo défilantes (V1.9 — 08/05) === */
.hero__mosaic {
	position: absolute;
	inset: -8%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .65rem;
	height: 116%;
	width: 110%;
}
.hero__mosaic-col {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.hero__mosaic-col--2 { transform: translateY(-6%); }
.hero__mosaic-col--3 { transform: translateY(3%); }
.hero__mosaic-col--4 { transform: translateY(-3%); }

.hero__mosaic-track {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	will-change: transform;
}
/* Cols paires défilent vers le haut, impaires vers le bas */
.hero__mosaic-col[data-direction="up"] .hero__mosaic-track {
	animation: mosaicUp 60s linear infinite;
}
.hero__mosaic-col[data-direction="down"] .hero__mosaic-track {
	animation: mosaicDown 70s linear infinite;
}
.hero__mosaic-col--2 .hero__mosaic-track { animation-duration: 64s; }
.hero__mosaic-col--3 .hero__mosaic-track { animation-duration: 78s; }
.hero__mosaic-col--4 .hero__mosaic-track { animation-duration: 56s; }

@keyframes mosaicUp {
	0% { transform: translateY(0); }
	100% { transform: translateY(-50%); }
}
@keyframes mosaicDown {
	0% { transform: translateY(-50%); }
	100% { transform: translateY(0); }
}

.hero__mosaic-cell {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: 10px;
	background: var(--ill-bg-3);
	flex-shrink: 0;
}
.hero__mosaic-cell iframe {
	position: absolute;
	top: 50%; left: 50%;
	width: 177.78vh;
	height: 56.25vw;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
	filter: grayscale(15%) brightness(0.6);
}
/* Pause animation au hover du hero (laisse les vidéos visibles) */
.hero--home:hover .hero__mosaic-track { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
	.hero__mosaic-track { animation: none !important; }
}

/* Veil overlay V2 : moins opaque, on doit voir les vidéos défiler */
.hero__bg-veil {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse 60% 70% at 50% 55%, rgba(26, 88, 72, 0.20) 0%, rgba(26, 88, 72, 0.45) 55%, rgba(26, 88, 72, 0.78) 100%),
		linear-gradient(180deg, var(--ill-bg) 0%, rgba(26, 88, 72, 0.85) 5%, rgba(26, 88, 72, 0.35) 14%, rgba(26, 88, 72, 0.10) 22%, rgba(26, 88, 72, 0.55) 72%, var(--ill-bg) 100%);
	z-index: 1;
}
/* Lisibilité H1 : drop-shadow subtil (vs text-shadow qui créait un fantôme noir) */
.hero--mosaic .hero__inner {
	filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.55));
}
.hero--mosaic .hero__cta { position: relative; z-index: 3; }
/* Filtres iframes : assombrissement modéré pour garder du contraste sans tuer la vidéo */
.hero__mosaic-cell iframe {
	filter: brightness(0.82) saturate(0.92) !important;
}

.hero__inner {
	position: relative; z-index: 2;
	max-width: 920px; margin-inline: auto;
	padding: clamp(1rem, 3vw, 2rem) var(--ill-gutter) clamp(3rem, 6vw, 5rem);
	text-align: center;
}
.hero--home .hero__inner { max-width: 1200px; }

.hero__eyebrow {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .5rem 1rem;
	font-size: .85rem; font-weight: 500;
	color: var(--ill-text); background: rgba(82, 199, 163, 0.12);
	border: 1px solid rgba(82, 199, 163, 0.35);
	border-radius: var(--ill-radius-pill);
	margin-bottom: 2rem;
}
.hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ill-accent); box-shadow: 0 0 0 4px rgba(82,199,163,0.2); display: inline-block; }

.hero__title {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem);
	line-height: 1.05;
	letter-spacing: 0.03em;
	color: var(--ill-text);
	margin: 0 0 1.5rem;
}
.hero__lead {
	font-size: clamp(1rem, .8vw + .9rem, 1.2rem);
	color: var(--ill-text-muted);
	max-width: 640px;
	margin: 0 auto 2.5rem;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ===== CTA PILLS (boutons hero / cta final) ===== */
.cta-pill {
	display: inline-flex; align-items: center; gap: .65rem;
	padding: .9em 1.6em;
	font-family: var(--ill-font-display);
	font-weight: 600; font-size: .95rem; letter-spacing: .005em;
	border-radius: var(--ill-radius-pill);
	border: 1px solid transparent;
	transition: transform 160ms ease, background 160ms ease, color 160ms ease;
	cursor: pointer;
}
.cta-pill:hover { transform: translateY(-1px); }
.cta-pill--white { background: var(--ill-text); color: var(--ill-bg); }
.cta-pill--white:hover { background: #f0f0f0; color: var(--ill-bg); }
.cta-pill--mint { background: var(--ill-accent); color: var(--ill-bg); }
.cta-pill--mint:hover { background: #6cdab9; color: var(--ill-bg); }
.cta-pill--ghost { background: transparent; color: var(--ill-text); border-color: rgba(255,255,255,0.18); }
.cta-pill--ghost:hover { background: rgba(255,255,255,0.06); color: var(--ill-text); }
.cta-pill--lg { padding: 1em 1.85em; font-size: 1rem; }
.cta-pill .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cta-pill .dot--mint { background: var(--ill-accent); box-shadow: 0 0 0 3px rgba(82,199,163,0.18); }
.cta-pill .dot--white { background: #ffffff; box-shadow: 0 0 0 3px rgba(255,255,255,0.18); }

/* ===== MARQUEE LOGOS CLIENTS ===== */
.hero__clients {
	position: relative; z-index: 2;
	padding: 4rem 0 5rem;
	background: linear-gradient(180deg, transparent 0%, rgba(26, 88, 72, 0.85) 30%, rgba(26, 88, 72, 0.85) 70%, transparent 100%);
}
.marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee__track {
	display: flex; align-items: center; gap: 3rem;
	animation: marquee-scroll 50s linear infinite;
	width: max-content;
}
.marquee__item {
	height: 38px; width: auto;
	opacity: .6; filter: brightness(0) invert(1);
	transition: opacity 200ms;
	flex-shrink: 0;
}
.marquee__item:hover { opacity: 1; }
@keyframes marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
}

/* ===== SECTIONS GENERIQUES ===== */
.section-title { text-align: center; max-width: 760px; margin: 0 auto .75em; }
.section-lead { text-align: center; max-width: 640px; margin: 0 auto 3rem; color: var(--ill-text-muted); font-size: 1.05rem; }

/* ===== PROOF (chiffres) ===== */
.proof { padding-block: var(--ill-section-y); }
.proof__stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.proof__stats li {
	background: var(--ill-bg-3);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2rem 1.5rem;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: transform 450ms cubic-bezier(.19, 1, .22, 1),
	            border-color 300ms ease,
	            background 300ms ease,
	            box-shadow 350ms ease;
	cursor: pointer;
}
/* Voile turquoise qui apparait au hover (ne casse pas la lisibilite, donne un effet "alive") */
.proof__stats li::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(82, 199, 163, 0.18), transparent 70%);
	opacity: 0;
	transition: opacity 350ms ease;
	pointer-events: none;
}
.proof__stats li:hover {
	transform: translateY(-8px) scale(1.025);
	border-color: var(--ill-accent);
	background: #20654f;
	box-shadow: 0 22px 60px -28px rgba(82, 199, 163, 0.6),
	            0 4px 16px -8px rgba(0,0,0,0.4);
}
.proof__stats li:hover::before { opacity: 1; }
.proof__num {
	display: block;
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(2rem, 3vw + 1rem, 3rem);
	color: var(--ill-accent);
	margin-bottom: .5rem;
	letter-spacing: 0.02em;
	position: relative;
	transition: transform 450ms cubic-bezier(.19, 1, .22, 1),
	            color 300ms ease,
	            text-shadow 350ms ease;
}
.proof__stats li:hover .proof__num {
	transform: scale(1.08);
	color: #6cdab9;
	text-shadow: 0 0 32px rgba(82, 199, 163, 0.5);
}
.proof__label {
	color: var(--ill-text-muted);
	font-size: .95rem;
	position: relative;
	transition: color 300ms ease;
}
.proof__stats li:hover .proof__label { color: var(--ill-text); }

/* Variante claire : fond uni (transparent, pas de bordures de section) + encadrés foncés avec léger contour turquoise */
.proof--light { background: transparent; border-block: 0; }
.proof--light .proof__stats li { background: var(--ill-bg-3); border-color: rgba(82, 199, 163, 0.45); }

/* ===== CASES (etudes de cas) ===== */
.cases { padding-block: var(--ill-section-y); }
.cases__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.cases__grid--archive { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.case-card { background: var(--ill-bg-2); border: 1px solid var(--ill-border); border-radius: var(--ill-radius); overflow: hidden; transition: border-color 200ms, transform 200ms; }
.case-card:hover { border-color: var(--ill-accent); transform: translateY(-4px); }
.case-card__link { display: block; color: var(--ill-text); }
.case-card__link:hover { color: var(--ill-text); }
.case-card__media { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.case-card__body { padding: 1.5rem; }
.case-card__title { font-size: 1.25rem; margin-bottom: .25rem; }
.case-card__role { color: var(--ill-text-muted); font-size: .9rem; margin-bottom: 1rem; }
.case-card__cta { color: var(--ill-accent); font-weight: 600; font-size: .9rem; }
.cases__more { text-align: center; margin-top: 3rem; }

/* ===== CASE SINGLE ===== */
.case-single__header { padding-block: clamp(8rem, 12vw, 10rem) 2rem; text-align: center; }
.case-single__eyebrow { font-family: var(--ill-font-mono); font-size: .85rem; color: var(--ill-text-muted); margin-bottom: 1.5rem; }
.case-single__eyebrow a { color: var(--ill-text-muted); }
.case-single__eyebrow a:hover { color: var(--ill-accent); }
.case-single__role { color: var(--ill-text-muted); }
.case-single__media { margin-block: 2rem; border-radius: var(--ill-radius); overflow: hidden; }
.case-single__media img { width: 100%; }
.case-single__kpis { padding-block: 3rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.kpi { background: var(--ill-bg-2); border: 1px solid var(--ill-border); border-radius: var(--ill-radius); padding: 1.5rem; text-align: center; }
.kpi__num { display: block; font-family: var(--ill-font-display); font-weight: 800; font-size: 2rem; color: var(--ill-accent); }
.kpi__label { color: var(--ill-text-muted); font-size: .9rem; }
/* V0 max-width supprimé — laissé full width pour grid layout V8 (section-split) */
.case-single__body p, .case-single__body li { color: var(--ill-text-muted); }
.case-single__testimonial { padding-block: 3rem; border-block: 1px solid var(--ill-border); }
.testimonial { max-width: 760px; margin: 0 auto; text-align: center; }
.testimonial p { font-size: 1.25rem; color: var(--ill-text); font-style: italic; margin-bottom: 1rem; }
.testimonial cite { font-style: normal; color: var(--ill-text-muted); }

/* ===== TESTIMONIALS MARQUEE (home, juste avant cta-final) ===== */
.testimonials {
	padding-block: clamp(4rem, 7vw, 6rem);
	background: transparent;
	overflow: hidden;
}
.testimonials__head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.testimonials__head .hero__eyebrow { justify-content: center; margin-bottom: 1rem; }
.testimonials__row {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.testimonials__row + .testimonials__row { margin-top: 1.25rem; }
.testimonials__track {
	display: flex;
	gap: 1.25rem;
	width: max-content;
	will-change: transform;
}
.testimonials__row--ltr .testimonials__track { animation: tm-marquee 70s linear infinite both; }
.testimonials__row--rtl .testimonials__track { animation: tm-marquee 80s linear infinite reverse both; }
/* Le défilement ne s'arrête plus au survol (retour Tim 2026-05) */
.testimonials__row:hover .testimonials__track { animation-play-state: running; }
@keyframes tm-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-33.3333%); }
}
@media (prefers-reduced-motion: reduce) {
	.testimonials__track { animation: none !important; }
}

.testimonial-card {
	position: relative;
	flex: 0 0 380px;
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2rem 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.testimonial-card__quote {
	position: absolute;
	top: .25rem; left: 1.25rem;
	font-family: var(--ill-font-display);
	font-size: 4rem;
	line-height: 1;
	color: var(--ill-accent);
	opacity: .65;
}
.testimonial-card__text {
	color: var(--ill-text);
	font-size: .98rem;
	line-height: 1.55;
	margin: 1.25rem 0 0;
	font-weight: 400;
}
.testimonial-card__stars {
	display: flex; gap: .15rem;
	color: #f5b400;
	font-size: 1rem;
	letter-spacing: .05em;
}
.testimonial-card__author {
	display: flex; align-items: center; gap: .85rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(82, 199, 163, 0.15);
	margin-top: auto;
}
.testimonial-card__avatar {
	flex: 0 0 44px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--ill-bg);
	color: var(--ill-accent);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: .95rem;
	border: 2px solid var(--ill-accent);
}
.testimonial-card__id { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.testimonial-card__name { margin: 0; font-family: var(--ill-font-display); font-weight: 700; font-size: 1rem; color: var(--ill-text); }
.testimonial-card__role { margin: 0; font-size: .82rem; color: var(--ill-accent); font-weight: 500; }

@media (max-width: 640px) {
	.testimonial-card { flex-basis: 300px; padding: 1.5rem 1.25rem 1.25rem; }
	.testimonial-card__text { font-size: .92rem; }
}

/* ===== CTA FINAL ===== */
.cta-final { padding-block: var(--ill-section-y); text-align: center; }
.cta-final__title { font-size: clamp(2rem, 3vw + 1rem, 3rem); font-weight: 900; letter-spacing: 0.02em; }
.cta-final__lead { color: var(--ill-text-muted); margin-bottom: 2rem; max-width: 540px; margin-inline: auto; }

/* ===== ARCHIVE HEADER ===== */
.archive-header { padding-block: clamp(8rem, 12vw, 10rem) 2rem; text-align: center; }
.archive-header__title { margin-bottom: 1rem; font-weight: 900; letter-spacing: 0.02em; }
.archive-header__lead { color: var(--ill-text-muted); max-width: 640px; margin: 0 auto; }

/* ===== PAGE GENERIQUE ===== */
.page__header { padding-block: clamp(8rem, 12vw, 10rem) 2rem; text-align: center; }
.page__title { font-weight: 900; letter-spacing: 0.02em; }
.page__lead { color: var(--ill-text-muted); max-width: 640px; margin: 1rem auto 0; }
.page__content { max-width: 760px; padding-block: 2rem var(--ill-section-y); }
.page__content p, .page__content li { color: var(--ill-text-muted); }
.page__content h2, .page__content h3 { margin-top: 2em; }

/* ===== 404 ===== */
.error-404 { padding-block: clamp(10rem, 14vw, 12rem); text-align: center; }
.error-404__code { font-family: var(--ill-font-display); font-weight: 900; font-size: clamp(5rem, 12vw, 9rem); color: var(--ill-accent); margin: 0; line-height: 1; letter-spacing: 0.02em; }
.error-404__title { margin-top: 1rem; font-weight: 900; }
.error-404__lead { color: var(--ill-text-muted); margin-bottom: 2rem; }

/* ===== FOOTER ===== */
.site-footer { background: var(--ill-bg-2); border-top: 1px solid var(--ill-border); padding-block: 3rem 1.5rem; margin-top: auto; }
.site-footer__inner { display: grid; gap: 2rem; grid-template-columns: 1.5fr 3fr 1fr; align-items: start; }
.site-footer__tagline { color: var(--ill-text-muted); font-size: .9rem; max-width: 320px; margin-top: 1rem; }
.site-footer__nav--cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.site-footer__col-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ill-text-muted); margin: 0 0 .75rem; }
.site-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.site-footer__list a { color: var(--ill-text-muted); font-size: .9rem; }
.site-footer__list a:hover { color: var(--ill-text); }
.site-footer__social { display: flex; gap: 1rem; }
.site-footer__social a { display: inline-flex; padding: .5rem; border-radius: 50%; background: var(--ill-bg-3); }
.site-footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ill-border); color: var(--ill-text-faint); font-size: .8rem; text-align: center; }
.site-footer__legal p { margin: 0; color: var(--ill-text-faint); }

@media (max-width: 720px) {
	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer__nav--cols { grid-template-columns: repeat(2, 1fr); }
	.hero__mosaic { grid-template-columns: repeat(3, 1fr); }
	.hero__mosaic-col--4 { display: none; }
}

/* ===== PAGE CONTACT ===== */
.contact-hero {
	padding-block: clamp(8rem, 12vw, 11rem) 2rem;
	text-align: center;
	background: radial-gradient(ellipse 60% 70% at 50% 0%, var(--ill-accent-soft), transparent 70%), var(--ill-bg);
}
.contact-hero__inner { max-width: 720px; margin-inline: auto; }
.contact-hero__title { font-weight: 900; font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); letter-spacing: 0.02em; margin: 1.5rem 0 1rem; }
.contact-hero__lead { color: var(--ill-text-muted); font-size: 1.1rem; }

.contact-grid { padding-block: 3rem var(--ill-section-y); }
.contact-grid__inner {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 3rem;
	align-items: start;
}
@media (max-width: 880px) {
	.contact-grid__inner { grid-template-columns: 1fr; gap: 2rem; }
}

.contact-info { display: flex; flex-direction: column; gap: 1.75rem; }
.contact-info__block {
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 1.5rem;
}
.contact-info__block--cta { background: linear-gradient(135deg, var(--ill-accent-soft) 0%, var(--ill-bg-2) 100%); border-color: rgba(82, 199, 163, 0.3); }
.contact-info__title { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ill-accent); margin: 0 0 .75rem; }
.contact-info__link { color: var(--ill-text); font-size: 1.1rem; font-weight: 500; word-break: break-all; }
.contact-info__link:hover { color: var(--ill-accent); }
.contact-info__text { color: var(--ill-text-muted); font-size: .95rem; margin: 0; line-height: 1.6; }
.contact-info__social { display: flex; flex-direction: column; gap: .5rem; }
.contact-info__social a { display: inline-flex; align-items: center; gap: .5rem; color: var(--ill-text); font-size: .95rem; }
.contact-info__social a:hover { color: var(--ill-accent); }
.contact-info__social img { filter: brightness(0) invert(1); opacity: .8; }

.contact-booking {
	background: transparent;
	border: 0;
	padding: 0;
	position: relative;
}
.contact-booking .iclosed-widget,
.contact-booking iframe { width: 100% !important; min-width: 100% !important; border: 0; display: block; background: transparent; }

.contact-form {
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2.5rem;
	display: flex; flex-direction: column; gap: 1.25rem;
}
@media (max-width: 580px) { .contact-form { padding: 1.5rem; } }
.contact-form__title { font-size: 1.5rem; margin: 0 0 .5rem; font-weight: 700; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 580px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form__field { display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; }
.contact-form__field span { color: var(--ill-text-muted); }
.contact-form__field em { color: var(--ill-text-faint); font-style: normal; font-size: .8rem; }
.contact-form__field input, .contact-form__field textarea {
	background: var(--ill-bg-3);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius-sm);
	color: var(--ill-text);
	font-family: var(--ill-font-body);
	font-size: 1rem;
	padding: .85rem 1rem;
	transition: border-color 160ms, background 160ms;
	width: 100%;
}
.contact-form__field input:focus, .contact-form__field textarea:focus {
	outline: none;
	border-color: var(--ill-accent);
	background: rgba(82,199,163,0.05);
}
.contact-form__field textarea { resize: vertical; min-height: 140px; font-family: inherit; }
.contact-form__honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form__consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .85rem; color: var(--ill-text-muted); cursor: pointer; }
.contact-form__consent input { margin-top: .25rem; accent-color: var(--ill-accent); }
.contact-form__consent a { color: var(--ill-accent); text-decoration: underline; }

.contact-form__submit { align-self: flex-start; margin-top: .5rem; }
.contact-form__submit:disabled { opacity: .6; pointer-events: none; }

.contact-form__feedback { font-size: .9rem; padding: .75rem 1rem; border-radius: var(--ill-radius-sm); display: none; }
.contact-form__feedback.is-success { display: block; background: rgba(82,199,163,0.15); color: var(--ill-accent); border: 1px solid var(--ill-accent); }
.contact-form__feedback.is-error { display: block; background: rgba(245, 197, 24, 0.12); color: var(--ill-warm); border: 1px solid rgba(245, 197, 24, 0.5); }

/* ===== UTILS ===== */
.has-vert-fonce-background-color { background-color: var(--ill-bg-2) !important; }
.has-mint-color { color: var(--ill-accent) !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===== PAGE SERVICE (page-service.php) ===== */
.hero--service {
	padding-top: clamp(7rem, 12vh, 9rem);
	padding-bottom: 4rem;
	text-align: center;
}
.hero--service .hero__eyebrow {
	display: inline-block;
	margin-bottom: 2rem;
	font-size: .9rem;
	padding: .6rem 1.2rem;
}
.hero--service .hero__title {
	font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
	max-width: 18ch;
	margin-inline: auto;
	margin-bottom: 1.5rem;
}
.hero--service .hero__lead {
	max-width: 60ch;
	margin-inline: auto;
	font-size: 1.125rem;
	margin-bottom: 2rem;
}
.hero--service .hero__cta {
	display: flex;
	gap: .75rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* PROOF MINI (statistics under hero) */
.proof--mini {
	padding-block: 2rem;
	border-bottom: 1px solid var(--ill-border);
}
.proof--mini .proof__stats {
	display: flex;
	justify-content: center;
	gap: clamp(2rem, 5vw, 6rem);
	flex-wrap: wrap;
	padding: 0;
	list-style: none;
	margin: 0;
}
.proof--mini .proof__stats li {
	background: transparent;
	border: none;
	padding: 0;
	text-align: center;
}
.proof--mini .proof__stats strong {
	color: var(--ill-accent);
	font-weight: 700;
}

/* PAGE SERVICE BODY */
.page-service__body {
	padding-block: 3rem;
	max-width: 80ch;
	margin-inline: auto;
}
.page-service__body h2 {
	margin-top: 3rem;
	font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem);
}
.page-service__body h3 {
	margin-top: 2rem;
	color: var(--ill-accent);
	font-size: clamp(1.1rem, 1vw + 0.75rem, 1.5rem);
}
.page-service__body p,
.page-service__body ul,
.page-service__body ol {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ill-text-muted);
}
.page-service__body ul li,
.page-service__body ol li {
	margin-bottom: .5rem;
}
.page-service__body a {
	color: var(--ill-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.page-service__body a:hover {
	color: var(--ill-text);
}
.page-service__body blockquote {
	border-left: 3px solid var(--ill-accent);
	padding-left: 1.5rem;
	margin: 2rem 0;
	color: var(--ill-text-muted);
	font-style: italic;
}

/* Tables (pricing tables) */
.page-service__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
	font-size: .95rem;
}
.page-service__body table thead {
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
}
.page-service__body table th {
	padding: 1rem;
	text-align: left;
	font-weight: 700;
	color: var(--ill-text);
	border-right: 1px solid var(--ill-border);
}
.page-service__body table th:last-child {
	border-right: none;
}
.page-service__body table td {
	padding: 1rem;
	border-right: 1px solid var(--ill-border);
	border-bottom: 1px solid var(--ill-border);
	color: var(--ill-text-muted);
}
.page-service__body table td:last-child {
	border-right: none;
}
.page-service__body table tbody tr:last-child td {
	border-bottom: none;
}

/* FAQ as <details>/<summary> accordion */
.page-service__body details {
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: .75rem;
	background: rgba(255,255,255,0.02);
}
.page-service__body details[open] {
	background: rgba(82, 199, 163, 0.05);
	border-color: rgba(82, 199, 163, 0.3);
}
.page-service__body summary {
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	cursor: pointer;
	color: var(--ill-text);
	list-style: none;
	position: relative;
	padding-right: 2rem;
	-webkit-user-select: none;
	user-select: none;
}
.page-service__body summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 0;
	font-size: 1.5rem;
	color: var(--ill-accent);
	transition: transform 200ms;
	font-weight: 700;
}
.page-service__body details[open] summary::after {
	transform: rotate(45deg);
}
.page-service__body summary:hover {
	color: var(--ill-accent);
}

/* ===== PAGE TARIFS (page-tarifs.php) ===== */
.page-tarifs {
	padding-block: var(--ill-section-y);
}
.page-tarifs__content {
	max-width: 80ch;
	margin-inline: auto;
}
.page-tarifs__content h2 {
	margin-top: 3rem;
	margin-bottom: 1rem;
	text-align: center;
}
.page-tarifs__content h3 {
	margin-top: 1.5rem;
	color: var(--ill-accent);
}
.page-tarifs__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
	font-size: .95rem;
}
.page-tarifs__content table thead {
	background: var(--ill-bg-2);
}
.page-tarifs__content table th,
.page-tarifs__content table td {
	padding: 1rem;
	text-align: left;
	border: 1px solid var(--ill-border);
}
.page-tarifs__content table th {
	font-weight: 700;
	color: var(--ill-text);
}
.page-tarifs__content table td {
	color: var(--ill-text-muted);
}

/* ===== PAGE METHODE (page-methode.php) ===== */
.page-methode__body {
	padding-block: 3rem;
	max-width: 80ch;
	margin-inline: auto;
	counter-reset: phase;
}
.page-methode__body > h2 {
	margin-top: 3rem;
	counter-increment: phase;
	position: relative;
	padding-top: 1rem;
}
.page-methode__body > h2::before {
	content: counter(phase, decimal-leading-zero);
	display: block;
	font-family: var(--ill-font-mono);
	font-size: 1rem;
	color: var(--ill-accent);
	margin-bottom: 0.5rem;
	letter-spacing: .1em;
	font-weight: 700;
}
.page-methode__body h3 {
	margin-top: 2rem;
	color: var(--ill-accent);
}
.page-methode__body p {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* ===== PAGE A PROPOS (page-a-propos.php) ===== */
.page-about__body {
	padding-block: 3rem;
	max-width: 80ch;
	margin-inline: auto;
}
.page-about__body h2 {
	margin-top: 2.5rem;
	font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem);
}
.page-about__body h3 {
	margin-top: 2rem;
	color: var(--ill-accent);
	font-size: 1.5rem;
}
.page-about__body p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ill-text-muted);
}

/* Founders section (from page-a-propos) */
.founders {
	padding-block: var(--ill-section-y);
	border-top: 1px solid var(--ill-border);
}
.founders__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}
.founder-card {
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2rem;
}
.founder-card h3 {
	font-size: 1.5rem;
	margin-bottom: 0.25rem;
	color: var(--ill-text);
}
.founder-card__role {
	font-family: var(--ill-font-mono);
	color: var(--ill-accent);
	font-size: .875rem;
	margin-bottom: 1rem;
	font-weight: 500;
}
.founder-card p {
	color: var(--ill-text-muted);
	font-size: 0.95rem;
	margin-bottom: 1rem;
}
.founder-card__contact {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ill-border);
	font-size: .875rem;
}
.founder-card__contact a {
	color: var(--ill-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ===== PAGE REALISATIONS (page-realisations.php) ===== */
.page-realisations {
	padding-block: 3rem;
	max-width: 80ch;
	margin-inline: auto;
}
.page-realisations h2 {
	margin-top: 2rem;
	font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem);
}
.page-realisations p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ill-text-muted);
}

.cases--realisations {
	padding-block: var(--ill-section-y);
}
.cases__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}

.case-card {
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 200ms, transform 200ms;
}
.case-card:hover {
	border-color: var(--ill-accent);
	transform: translateY(-4px);
}
.case-card__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--ill-bg-3);
}
.case-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.case-card__content {
	padding: 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.case-card__title {
	font-size: 1.15rem;
	margin-bottom: 0.75rem;
	color: var(--ill-text);
}
.case-card__title a {
	color: inherit;
}
.case-card__title a:hover {
	color: var(--ill-accent);
}
.case-card__excerpt {
	font-size: .9rem;
	color: var(--ill-text-muted);
	margin-bottom: 1rem;
	flex: 1;
}
.case-card__link {
	display: inline-block;
	color: var(--ill-accent);
	font-weight: 600;
	font-size: .85rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top: auto;
}

/* ===== CTA FINAL (generic across pages) ===== */
.cta-final {
	padding-block: var(--ill-section-y);
	text-align: center;
}
.cta-final .section-title {
	margin-bottom: 1rem;
}
.cta-final__text {
	color: var(--ill-text-muted);
	font-size: 1.05rem;
	margin-bottom: 2rem;
	max-width: 540px;
	margin-inline: auto;
}

/* Hero service variations */
.hero--methode,
.hero--a-propos,
.hero--tarifs,
.hero--realisations {
	padding-top: clamp(7rem, 12vh, 9rem);
	padding-bottom: 3rem;
	text-align: center;
}
.hero--methode .hero__title,
.hero--a-propos .hero__title,
.hero--tarifs .hero__title,
.hero--realisations .hero__title {
	font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
	margin-bottom: 1.5rem;
}
.hero--methode .hero__lead,
.hero--a-propos .hero__lead,
.hero--tarifs .hero__lead,
.hero--realisations .hero__lead {
	max-width: 60ch;
	margin-inline: auto;
	font-size: 1.125rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.page-service__body,
	.page-tarifs__content,
	.page-methode__body,
	.page-about__body,
	.page-realisations {
		padding-block: 2rem;
	}
	.proof--mini .proof__stats {
		gap: 1.5rem;
		flex-direction: column;
	}
	.founders__grid {
		grid-template-columns: 1fr;
	}
	.hero--service .hero__cta,
	.hero--methode .hero__cta {
		flex-direction: column;
		align-items: center;
	}
}

/* ============================================================
   ===== ILLUSTRE V2 — Templates pages refactor 03/05/2026 ===
   ============================================================ */

/* ===== PAGE HERO (services / methode / a-propos / tarifs / realisations) ===== */
.page-hero {
	position: relative;
	padding-block: clamp(7rem, 14vw, 11rem) clamp(3rem, 5vw, 5rem);
	background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(82, 199, 163, 0.08) 0%, transparent 60%), var(--ill-bg);
	text-align: center;
	overflow: hidden;
}
.page-hero__inner { max-width: 1080px; }
.page-hero__title {
	font-family: var(--ill-font-display);
	font-weight: 900;
	/* font-size réduit + max-width plus large → 2 lignes naturelles sans coupure (V1.13) */
	font-size: clamp(2rem, 2.8vw + 1rem, 3.75rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
	margin: 1.5rem auto 1.25rem;
	max-width: 28ch;
}
/* Titres très longs : largeur élargie (32ch) pour tenir en 2 lignes confortables */
.page-hero__title--long { max-width: 32ch; font-size: clamp(1.85rem, 2.4vw + 1rem, 3.25rem); }
.page-hero__lead {
	font-size: clamp(1.0625rem, .4vw + 1rem, 1.25rem);
	color: var(--ill-text-muted);
	max-width: 60ch;
	margin: 0 auto 2.25rem;
	line-height: 1.55;
}
.page-hero__cta {
	display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}
@media (max-width: 640px) {
	.page-hero__cta { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
	.page-hero__cta .cta-pill { justify-content: center; }
}

/* ===== PROOF INLINE (variant compact) ===== */
.proof--inline { padding-block: clamp(3.75rem, 6vw, 6rem); }
.proof--inline .proof__stats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.proof--inline .proof__stats li { background: rgba(255,255,255,0.025); padding: 1.5rem 1.25rem; }
.proof--inline .proof__num { font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem); }

/* ===== PAGE BODY (container narrow + typography) ===== */
.container--narrow { max-width: 760px; }
.page-body { padding-block: clamp(3rem, 5vw, 5rem); background: var(--ill-bg); }
.page-body > .container { color: var(--ill-text-muted); }
.page-body h2 {
	font-family: var(--ill-font-display); font-weight: 800;
	font-size: clamp(1.75rem, 1.5vw + 1rem, 2.5rem);
	color: var(--ill-text);
	margin-top: 3.5rem;
	margin-bottom: 1.25rem;
	line-height: 1.15;
	letter-spacing: -0.005em;
}
.page-body h2:first-child { margin-top: 0; }
.page-body h3 {
	font-family: var(--ill-font-display); font-weight: 700;
	font-size: clamp(1.25rem, .8vw + 1rem, 1.625rem);
	color: var(--ill-text);
	margin-top: 2.25rem; margin-bottom: .75rem;
	line-height: 1.25;
}
.page-body p { font-size: 1.0625rem; line-height: 1.7; margin-bottom: 1.25rem; color: var(--ill-text-muted); }
.page-body ul, .page-body ol { margin: 0 0 1.5rem; padding-left: 1.25rem; color: var(--ill-text-muted); }
.page-body ul li, .page-body ol li { margin-bottom: .5rem; line-height: 1.6; }
.page-body ul { list-style: none; padding-left: 0; }
.page-body ul li { position: relative; padding-left: 1.5rem; }
.page-body ul li::before {
	content: ''; position: absolute; left: 0; top: .7em;
	width: 6px; height: 6px; background: var(--ill-accent); border-radius: 50%;
}
.page-body a { color: var(--ill-accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.page-body a:hover { color: var(--ill-text); }
.page-body strong { color: var(--ill-text); font-weight: 600; }
.page-body em { color: var(--ill-text); font-style: italic; }
.page-body hr {
	border: 0;
	height: 1px;
	background: var(--ill-border);
	margin: 4rem auto;
	max-width: 240px;
}
.page-body blockquote {
	border-left: 3px solid var(--ill-accent);
	padding: .5rem 0 .5rem 1.5rem;
	margin: 2rem 0;
	color: var(--ill-text);
	font-style: italic;
	font-size: 1.125rem;
}

/* CTA isolé (paragraphe contenant uniquement un <a>) */
.page-body .cta-line {
	text-align: center;
	margin-block: 2.5rem;
	padding: 0;
}
.page-body .cta-line .cta-pill {
	text-decoration: none;
}

/* ===== PRICING CARDS INLINE (transformation auto markdown body) ===== */
.pricing-cards-inline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin: 2.5rem 0 3rem;
	padding: 0;
	list-style: none;
}
.pricing-card-inline {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 1.75rem 1.5rem;
	display: flex; flex-direction: column;
	transition: border-color 200ms ease, transform 200ms ease;
}
.pricing-card-inline:hover { border-color: rgba(82, 199, 163, 0.5); transform: translateY(-3px); }
.pricing-card-inline--featured {
	background: linear-gradient(180deg, rgba(82,199,163,0.10), rgba(82,199,163,0.03));
	border-color: var(--ill-accent);
}
.pricing-card-inline__tag {
	font-family: var(--ill-font-mono);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ill-accent);
	margin-bottom: .75rem;
}
.pricing-card-inline__name {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--ill-text);
	margin: 0 0 .35rem;
}
.pricing-card-inline__price {
	font-family: var(--ill-font-display);
	font-size: 2rem;
	font-weight: 800;
	color: var(--ill-text);
	margin: 0 0 1rem;
}
.pricing-card-inline__features {
	list-style: none;
	padding: 0;
	margin: 0;
	color: var(--ill-text-muted);
	font-size: .94rem;
	flex: 1;
}
.pricing-card-inline__features li {
	padding: .35rem 0 .35rem 1.4rem;
	position: relative;
	line-height: 1.5;
}
.pricing-card-inline__features li::before {
	content: '\2713';
	position: absolute; left: 0; top: .4rem;
	color: var(--ill-accent);
	font-weight: 700;
	font-size: .9rem;
}

/* ===== CTA FINAL (bandeau bas page) ===== */
.cta-final {
	padding-block: clamp(4.5rem, 8vw, 6.5rem);
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(82,199,163,0.10) 0%, transparent 60%),
		var(--ill-bg-2);
	text-align: center;
	position: relative;
}
.cta-final::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(82,199,163,0.35) 50%, transparent 100%);
}
.cta-final__inner { max-width: 720px; margin-inline: auto; }
.cta-final__title {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(1.875rem, 2.5vw + 1rem, 3rem);
	margin: 0 0 1rem;
}
.cta-final__lead {
	color: var(--ill-text-muted);
	font-size: 1.0625rem;
	margin: 0 0 2rem;
	max-width: 56ch;
	margin-inline: auto;
}

/* ===== PAGE SERVICE — body adjustments ===== */
.page-service .page-body { background: var(--ill-bg); }

/* ===== PAGE TARIFS — Studio cards + Production block ===== */
.pricing-studio { padding-block: clamp(4rem, 7vw, 6rem); }
.pricing-studio__head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.pricing-studio__head .hero__eyebrow { margin-bottom: 1.25rem; }
.pricing-studio__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr 1fr;
	gap: 1.5rem;
	max-width: 1180px;
	margin-inline: auto;
	align-items: stretch;
}
@media (max-width: 980px) {
	.pricing-studio__grid { grid-template-columns: 1fr; max-width: 520px; }
}

/* Pricing card V2 (10/05) - typo identitaire, hiérarchie expressive prix > nom > acte */
.pricing-card {
	position: relative;
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
	border-radius: 18px;
	padding: 2.5rem 2rem 2rem;
	display: flex; flex-direction: column;
	transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
	overflow: hidden;
}
.pricing-card::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(82,199,163,0.06) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 240ms ease;
}
.pricing-card:hover { transform: translateY(-6px); border-color: rgba(82,199,163,0.35); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.pricing-card:hover::before { opacity: 1; }

.pricing-card--featured {
	background: linear-gradient(180deg, rgba(82,199,163,0.10) 0%, var(--ill-bg-2) 60%);
	border-color: rgba(82,199,163,0.45);
	box-shadow: 0 0 0 1px rgba(82,199,163,0.25), 0 24px 60px rgba(0,0,0,0.4);
}
.pricing-card--featured::before { opacity: 1; }
.pricing-card--featured:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--ill-accent), 0 30px 70px rgba(0,0,0,0.45); }

/* Acte (eyebrow) en monospace, discret */
.pricing-card__tag {
	font-family: var(--ill-font-mono);
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--ill-text-faint);
	margin: 0 0 1.5rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.pricing-card__tag::before {
	content: '';
	width: 18px; height: 1px;
	background: var(--ill-text-faint);
	display: inline-block;
}
.pricing-card--featured .pricing-card__tag { color: var(--ill-accent); }
.pricing-card--featured .pricing-card__tag::before { background: var(--ill-accent); width: 24px; }

/* Nom du forfait : display weight 700, lettre-spacing négatif premium */
.pricing-card__name {
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem);
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--ill-text);
	margin: 0 0 .25rem;
}

/* Prix XL : the wow factor */
.pricing-card__price {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(3.25rem, 4vw + 1.5rem, 4.75rem);
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--ill-text);
	margin: .75rem 0 .25rem;
	display: flex;
	align-items: baseline;
	gap: .35rem;
}
.pricing-card__price span {
	font-size: .9rem;
	font-weight: 500;
	color: var(--ill-text-faint);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-family: var(--ill-font-body);
}
.pricing-card--featured .pricing-card__price { color: var(--ill-accent); }

/* Description courte, italique pour casser la verticalité */
.pricing-card__desc {
	color: var(--ill-text-muted);
	font-size: .95rem;
	font-style: italic;
	margin: .25rem 0 1.75rem;
	line-height: 1.5;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	padding-bottom: 1.5rem;
}

/* Features avec check mint, sans border-bottom (cleaner) */
.pricing-card__features {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}
.pricing-card__features li {
	padding: 0 0 0 1.75rem;
	position: relative;
	color: var(--ill-text);
	font-size: .94rem;
	line-height: 1.45;
}
.pricing-card__features li::before {
	content: '';
	position: absolute;
	left: 0; top: .35rem;
	width: 18px; height: 18px;
	background: var(--ill-accent-soft);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--ill-accent);
}
.pricing-card__features li::after {
	content: '';
	position: absolute;
	left: 5px; top: .58rem;
	width: 8px; height: 4px;
	border-left: 1.5px solid var(--ill-accent);
	border-bottom: 1.5px solid var(--ill-accent);
	transform: rotate(-45deg);
}
.pricing-card--featured .pricing-card__features li { color: var(--ill-text); font-weight: 500; }

.pricing-card .cta-pill { align-self: stretch; justify-content: center; margin-top: auto; }

.pricing-studio__note {
	text-align: center;
	margin: 3rem auto 0;
	font-size: .95rem;
	color: var(--ill-text-muted);
	line-height: 1.7;
	max-width: 720px;
}
.pricing-studio__note strong { color: var(--ill-text); }

/* Bouton "Voir le comparatif detaille" sous les 3 cards offre */
.pricing-studio__compare-cta {
	display: flex;
	justify-content: center;
	margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* ===== Page "Pourquoi le podcast" : sommaire/plan + grid arguments ===== */
.why-anchors {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}
.why-anchors__heading {
	font-family: var(--ill-font-display);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .8rem;
	color: var(--ill-accent);
	margin: 0 auto 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: max-content;
	text-align: center;
}
.why-anchors__heading::before {
	content: '';
	display: inline-block;
	width: .55rem; height: .55rem;
	border-radius: 999px;
	background: var(--ill-accent);
}
.why-anchors__grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	counter-reset: why;
	max-width: 880px;
	margin-inline: auto;
}
.why-anchors__link {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "num label cta" "num count cta";
	align-items: center;
	column-gap: 1.5rem;
	row-gap: .2rem;
	padding: 1.35rem 1.6rem;
	border: 1px solid rgba(82, 199, 163, 0.35);
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(82, 199, 163, 0.08) 0%, rgba(82, 199, 163, 0.02) 100%);
	text-decoration: none;
	color: var(--ill-text);
	transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.why-anchors__link:hover {
	border-color: var(--ill-accent);
	background: linear-gradient(180deg, rgba(82, 199, 163, 0.18) 0%, rgba(82, 199, 163, 0.05) 100%);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -16px rgba(82, 199, 163, 0.5);
}
.why-anchors__num {
	grid-area: num;
	font-family: var(--ill-font-display);
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1;
	color: var(--ill-accent);
	letter-spacing: .02em;
}
.why-anchors__label {
	grid-area: label;
	font-family: var(--ill-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ill-text);
}
.why-anchors__count {
	grid-area: count;
	font-size: .75rem;
	color: var(--ill-text-muted);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.why-anchors__cta {
	grid-area: cta;
	color: var(--ill-accent);
	font-weight: 600;
	font-size: .9rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	white-space: nowrap;
	border-top: 0;
	padding-top: 0;
	transition: gap .25s ease;
}
.why-anchors__link:hover .why-anchors__cta { gap: .7rem; }
@media (max-width: 640px) {
	.why-anchors__link {
		grid-template-columns: auto 1fr;
		grid-template-areas: "num label" "num count" ". cta";
		row-gap: .35rem;
	}
}

/* Grid d'arguments : 2 colonnes pour des cards plus larges (plus de place pour le texte) */
.use-cases-grid--why {
	grid-template-columns: repeat(2, 1fr);
	max-width: 1100px;
	margin-inline: auto;
}
.use-cases-grid--four {
	grid-template-columns: repeat(2, 1fr);
	max-width: 1100px;
	margin-inline: auto;
}
@media (max-width: 700px) {
	.use-cases-grid--why,
	.use-cases-grid--four { grid-template-columns: 1fr; }
}
/* Reset des marges decoratives sur les sections empilees de la page why */
.page-svc--why .pricing-production--use-cases { padding-block: clamp(3rem, 5vw, 4.5rem); }
.page-svc--why .pricing-production--use-cases + .pricing-production--use-cases {
	border-top: 0;
}
/* Page 22 raisons : titres de section centres (eyebrow + h2 + lead) */
.page-svc--why .pricing-production--use-cases .section-split__eyebrow,
.page-svc--why .pricing-production--use-cases .section-features__title,
.page-svc--why .pricing-production--use-cases .section-features__lead {
	text-align: center;
}
.page-svc--why .pricing-production--use-cases .section-split__eyebrow {
	justify-content: center;
	display: inline-flex;
	width: 100%;
}
.page-svc--why .pricing-production--use-cases .section-features__lead {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* Page 22 raisons : aucune cloison turquoise entre les sections, flux continu */
.page-svc--why > section + section,
.page-svc--why .section-split,
.page-svc--why .section-features,
.page-svc--why .pricing-production,
.page-svc--why .section-faq,
.page-svc--why .section-cta-band { border-top: 0 !important; border-bottom: 0 !important; }
.page-svc--why .page-hero::before,
.page-svc--why .page-hero::after { content: none; }
.page-svc--why .page-hero { background: var(--ill-bg); }
/* Le H1 de la page why est plus long ; on laisse plus de largeur pour que la
   ligne 2 ("propre podcast video en 2026") tienne sur une seule ligne. */
.page-svc--why .page-hero--centered .page-hero__inner { max-width: 1080px; }
.page-svc--why .page-hero--centered .page-hero__title { max-width: 32ch; }
.page-svc--why .pricing-production--use-cases .section-features__title { margin-top: .5rem; }
.page-svc--why .pricing-production--use-cases .section-features__lead {
	max-width: 720px;
	margin-bottom: 2.5rem;
	color: var(--ill-text-muted);
}
/* Etoiles de force : visuel discret */
.page-svc--why .use-case-card__match {
	color: var(--ill-accent);
	font-size: .8rem;
	letter-spacing: .15em;
	border: 0;
	padding: 0;
}

.pricing-production {
	padding-block: clamp(4rem, 7vw, 6rem);
}
.pricing-production .hero__eyebrow { margin-bottom: 1rem; }
.pricing-production__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 3rem;
	margin-top: 2.5rem;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2.5rem;
}
.pricing-production__col h3 {
	font-family: var(--ill-font-display);
	font-size: 1.375rem;
	margin: 0 0 1rem;
	color: var(--ill-text);
}
.pricing-production__col p { color: var(--ill-text-muted); margin-bottom: 1rem; }
.pricing-production__col ul { list-style: none; padding: 0; margin: 0; }
.pricing-production__col ul li {
	padding: .55rem 0 .55rem 1.5rem;
	position: relative;
	color: var(--ill-text-muted);
	border-bottom: 1px solid var(--ill-border);
}
.pricing-production__col ul li:last-child { border-bottom: 0; }
.pricing-production__col ul li::before {
	content: '\2713';
	position: absolute; left: 0; top: .65rem;
	color: var(--ill-accent);
	font-weight: 700;
}
.pricing-production__col--cta {
	display: flex; flex-direction: column;
	justify-content: center; align-items: flex-start;
	gap: 1.5rem;
	border-left: 1px solid var(--ill-border);
	padding-left: 2.5rem;
}
.pricing-production__hint {
	color: var(--ill-text-muted);
	font-size: .95rem;
	margin: 0;
}
@media (max-width: 768px) {
	.pricing-production__inner { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.5rem; }
	.pricing-production__col--cta { border-left: 0; border-top: 1px solid var(--ill-border); padding-left: 0; padding-top: 2rem; align-items: center; text-align: center; }
}

/* ===== USE CASES GRID (section "Quel niveau pour votre équipe") ===== */
.pricing-production--use-cases { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.pricing-production--use-cases .section-split__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.pricing-production--use-cases .section-features__title { margin: 0 0 2.5rem; }
.use-cases-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	align-items: stretch;
}
.use-case-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem 1.75rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	position: relative;
	transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.use-case-card:hover { transform: translateY(-4px); border-color: var(--ill-accent); }
.use-case-card--featured {
	background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
	border-color: var(--ill-accent);
	box-shadow: 0 8px 28px -16px var(--ill-accent);
}
.use-case-card__num {
	font-family: var(--ill-font-display);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--ill-accent);
	opacity: .8;
}
.use-case-card__match {
	display: inline-block;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ill-text-muted);
	border: 1px solid var(--ill-border);
	border-radius: 999px;
	padding: .25rem .65rem;
	width: fit-content;
}
.use-case-card--featured .use-case-card__match {
	color: var(--ill-accent);
	border-color: var(--ill-accent);
}
.use-case-card__title {
	font-family: var(--ill-font-display);
	font-size: 1.25rem;
	line-height: 1.25;
	margin: .25rem 0 .5rem;
	color: var(--ill-text);
}
.use-case-card__body {
	color: var(--ill-text-muted);
	font-size: .95rem;
	line-height: 1.55;
	margin: 0 0 1rem;
	flex-grow: 1;
}
.use-case-card__rec {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ill-border);
	text-decoration: none;
	color: inherit;
	transition: color .2s ease;
}
.use-case-card__rec:hover { color: var(--ill-accent); }
.use-case-card__rec-label {
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ill-text-muted);
}
.use-case-card__rec-name {
	font-family: var(--ill-font-display);
	font-size: 1.05rem;
	color: var(--ill-text);
	margin-top: .15rem;
}
.use-case-card__rec-price {
	color: var(--ill-accent);
	font-weight: 600;
	font-size: .95rem;
}
@media (max-width: 1024px) {
	.use-cases-grid { grid-template-columns: repeat(2, 1fr); }
	.use-case-card:last-child { grid-column: 1 / -1; max-width: 540px; margin-inline: auto; width: 100%; }
}
@media (max-width: 640px) {
	.use-cases-grid { grid-template-columns: 1fr; gap: 1.25rem; }
	.use-case-card:last-child { max-width: none; }
	.use-case-card { padding: 1.5rem 1.25rem; }
}

/* ===== PAGE METHODE - counter étapes ===== */
.page-body--methode { counter-reset: phase; }
.page-body--methode h2 {
	counter-increment: phase;
	padding-top: 2.5rem;
	position: relative;
}
.page-body--methode h2::before {
	content: counter(phase, decimal-leading-zero);
	display: block;
	font-family: var(--ill-font-mono);
	font-size: .85rem;
	color: var(--ill-accent);
	letter-spacing: .15em;
	margin-bottom: .5rem;
}

/* ===== PAGE A-PROPOS — founders ===== */
.founders {
	padding-block: clamp(4rem, 7vw, 6rem);
	border-top: 1px solid var(--ill-border);
	background: var(--ill-bg-2);
}
.founders__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 2rem;
	margin-top: 2.5rem;
	max-width: 1000px;
	margin-inline: auto;
}
.founder-card {
	background: var(--ill-bg-3);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2.5rem 2rem;
	transition: border-color 200ms;
}
.founder-card:hover { border-color: rgba(82,199,163,0.4); }
.founder-card__name {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: 1.75rem;
	margin: 0 0 .35rem;
	color: var(--ill-text);
}
.founder-card__role {
	font-family: var(--ill-font-mono);
	font-size: .85rem;
	color: var(--ill-accent);
	margin: 0 0 1.25rem;
	letter-spacing: .03em;
}
.founder-card__bio {
	color: var(--ill-text-muted);
	font-size: .98rem;
	line-height: 1.6;
	margin: 0 0 1.5rem;
}
.founder-card__contact {
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ill-border);
	font-size: .9rem;
}
.founder-card__contact a { color: var(--ill-accent); }

/* ===== HOME - dual model (Studio / Production) ===== */
.dual-model { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: var(--ill-bg); }
.dual-model__head { text-align: center; max-width: 820px; margin: 0 auto 3.5rem; }
.dual-model__head .hero__eyebrow { margin-bottom: 1.25rem; }
.dual-model__sep { color: var(--ill-accent); margin: 0 .35em; }
.section-title--left { text-align: left; margin-left: 0; }

.dual-model__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 1.5rem;
}
.dual-card {
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2.5rem 2rem;
	display: flex; flex-direction: column;
	transition: border-color 200ms ease, transform 200ms ease;
}
.dual-card:hover { transform: translateY(-4px); border-color: rgba(82,199,163,0.4); }
.dual-card--featured {
	background: linear-gradient(180deg, rgba(82,199,163,0.12), rgba(82,199,163,0.03));
	border-color: var(--ill-accent);
}
.dual-card__tag {
	font-family: var(--ill-font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ill-accent);
	margin-bottom: 1rem;
}
.dual-card__title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: 1.875rem;
	color: var(--ill-accent);
	margin: 0 0 .5rem;
}
.dual-card__price {
	font-family: var(--ill-font-display);
	font-weight: 500;
	font-size: 1.15rem;
	color: var(--ill-text);
	margin: 0 0 1.25rem;
	letter-spacing: -.005em;
	text-transform: none;
}
.dual-card__features li strong { color: var(--ill-accent); font-weight: 700; }
.dual-card--featured { background: linear-gradient(180deg, rgba(82,199,163,0.18), rgba(82,199,163,0.05)); }
.dual-card__desc {
	color: var(--ill-text-muted);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 1.5rem;
}
.dual-card__features {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	flex: 1;
}
.dual-card__features li {
	padding: .55rem 0 .55rem 1.6rem;
	position: relative;
	color: var(--ill-text-muted);
	font-size: .95rem;
	line-height: 1.5;
	border-bottom: 1px solid var(--ill-border);
}
.dual-card__features li:last-child { border-bottom: 0; }
.dual-card__features li::before {
	content: '\2713';
	position: absolute; left: 0; top: .65rem;
	color: var(--ill-accent);
	font-weight: 700;
}
.dual-card__cta { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ===== HOME - differentiator (cyclorama + IA) ===== */
.differentiator {
	padding-block: clamp(5rem, 8vw, 7rem);
	background: var(--ill-bg);
}
.differentiator__inner {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
	max-width: 1180px;
	margin-inline: auto;
}
.differentiator__copy .hero__eyebrow { margin-bottom: 1.25rem; }
.differentiator__title {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(2rem, 3vw + 1rem, 3rem);
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0 0 1.5rem;
	max-width: 18ch;
}
.differentiator__copy p {
	color: var(--ill-text-muted);
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 0 0 1rem;
}
.differentiator__cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.differentiator__visual { display: flex; justify-content: center; align-items: center; }
.differentiator__panel {
	width: 100%;
	max-width: 420px;
	background: linear-gradient(155deg, rgba(82,199,163,0.16) 0%, rgba(82,199,163,0.04) 55%, rgba(255,255,255,0.02) 100%);
	border: 1px solid rgba(82,199,163,0.35);
	border-radius: 24px;
	padding: 2.5rem 2rem 2rem;
	text-align: center;
	display: flex; flex-direction: column; align-items: center;
	box-shadow: 0 30px 80px -40px rgba(82,199,163,0.45);
}
.differentiator__panel-label {
	font-family: var(--ill-font-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ill-accent);
	margin-bottom: 1.25rem;
}
.differentiator__panel-big {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(4rem, 7vw, 6rem);
	color: var(--ill-text);
	letter-spacing: .02em;
	line-height: 1;
}
.differentiator__panel-small {
	font-family: var(--ill-font-mono);
	font-size: .9rem;
	color: var(--ill-text-muted);
	margin-top: .75rem;
	max-width: 22ch;
}
.differentiator__panel-list {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid rgba(82,199,163,0.18);
	width: 100%;
	display: flex; flex-direction: column; gap: .65rem;
}
.differentiator__panel-list li {
	display: flex; justify-content: space-between; gap: 1rem;
	font-family: var(--ill-font-mono);
	font-size: .85rem;
	color: var(--ill-text-muted);
}
.differentiator__panel-list li > span:first-child { color: var(--ill-text); }
@media (max-width: 860px) {
	.differentiator__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.differentiator__title { max-width: none; }
	.differentiator__panel { max-width: 360px; margin-inline: auto; }
}

/* ===== CASES - amélioration ===== */
.cases__head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.cases__head .hero__eyebrow { margin-bottom: 1.25rem; }
.cases--alt { }
.case-card__media--placeholder {
	background: linear-gradient(135deg, var(--ill-bg-3), var(--ill-bg-2));
	width: 100%;
	aspect-ratio: 16/10;
}

/* ===== Footer CTA box ===== */
.cta-final__text { color: var(--ill-text-muted); font-size: 1.0625rem; margin: 0 0 1.5rem; }

/* ===== Responsive overrides v2 ===== */
@media (max-width: 768px) {
	.page-hero { padding-top: 6rem; padding-bottom: 2rem; }
	.dual-model__grid, .pricing-studio__grid { grid-template-columns: 1fr; }
	.pricing-card--featured { transform: none; }
	.pricing-card--featured:hover { transform: translateY(-4px); }
	.page-body h2 { margin-top: 2.5rem; }
}

/* ============================================================
   ===== ILLUSTRE V3 — Content blocks split layout 03/05 =====
   ============================================================ */

/* ===== CONTENT BLOCKS (split par H2) ===== */
.content-block {
	padding-block: clamp(4rem, 7vw, 6rem);
	border-bottom: 1px solid var(--ill-border);
	position: relative;
}
.content-block--intro {
	padding-block: 2.5rem 3rem;
	border-bottom: 1px solid var(--ill-border);
	background: var(--ill-bg);
}
.content-block--alt { background: var(--ill-bg-2); }
.content-block--accent {
	background: linear-gradient(180deg, var(--ill-bg-3) 0%, var(--ill-bg-2) 100%);
	position: relative;
}
.content-block--accent::before {
	content: '';
	position: absolute;
	top: 0; left: 50%; transform: translateX(-50%);
	width: 80px; height: 3px;
	background: var(--ill-accent);
	border-radius: 999px;
}

.content-block__inner {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: var(--ill-gutter);
}
.content-block__inner--full {
	max-width: 760px;
	text-align: center;
}
.content-block__inner--full p {
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--ill-text-muted);
	margin: 0 auto 1rem;
	max-width: 64ch;
}
.content-block__inner--full p:first-child {
	color: var(--ill-text);
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
}

.content-block__inner--split {
	display: grid;
	grid-template-columns: 0.85fr 1.4fr;
	gap: clamp(2rem, 5vw, 5rem);
}
@media (max-width: 880px) {
	.content-block__inner--split { grid-template-columns: 1fr; gap: 1.5rem; }
}

.content-block__head {
	position: sticky;
	top: 7rem;
	align-self: start;
}
.content-block__num {
	display: inline-block;
	font-family: var(--ill-font-mono);
	font-size: .8rem;
	letter-spacing: .18em;
	color: var(--ill-accent);
	margin-bottom: .9rem;
	padding: .35rem .75rem;
	background: rgba(82, 199, 163, 0.1);
	border: 1px solid rgba(82, 199, 163, 0.3);
	border-radius: var(--ill-radius-pill);
}
.content-block__head h2 {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.005em;
	margin: 0;
	color: var(--ill-text);
}
@media (max-width: 880px) {
	.content-block__head { position: static; }
	.content-block__head h2 { font-size: clamp(1.5rem, 4vw, 1.875rem); }
}

.content-block__body p {
	font-size: 1.0625rem; line-height: 1.7;
	color: var(--ill-text-muted);
	margin: 0 0 1.25rem;
}
.content-block__body p:first-of-type {
	font-size: 1.125rem;
	color: var(--ill-text);
}
.content-block__body h3 {
	font-family: var(--ill-font-display); font-weight: 700;
	font-size: clamp(1.125rem, .5vw + 1rem, 1.375rem);
	color: var(--ill-text);
	margin: 2.5rem 0 .75rem;
	line-height: 1.25;
	letter-spacing: -0.005em;
}
.content-block__body ul, .content-block__body ol {
	list-style: none; padding: 0;
	margin: 1rem 0 1.5rem;
}
.content-block__body ul li, .content-block__body ol li {
	padding: .65rem 0 .65rem 1.6rem;
	position: relative;
	color: var(--ill-text-muted);
	border-bottom: 1px solid var(--ill-border);
	line-height: 1.55;
}
.content-block__body ul li:last-child, .content-block__body ol li:last-child { border-bottom: 0; }
.content-block__body ul li::before {
	content: '';
	position: absolute; left: 0; top: 1.05rem;
	width: 6px; height: 6px;
	background: var(--ill-accent);
	border-radius: 50%;
}
.content-block__body ol { counter-reset: cb-list; }
.content-block__body ol li { counter-increment: cb-list; padding-left: 2.2rem; }
.content-block__body ol li::before {
	content: counter(cb-list, decimal-leading-zero);
	font-family: var(--ill-font-mono);
	font-size: .75rem;
	color: var(--ill-accent);
	background: transparent;
	border-radius: 0;
	width: auto; height: auto;
	top: .85rem;
	letter-spacing: .1em;
}
.content-block__body a {
	color: var(--ill-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}
.content-block__body a:hover { color: var(--ill-text); }
.content-block__body strong { color: var(--ill-text); font-weight: 600; }
.content-block__body blockquote {
	border-left: 3px solid var(--ill-accent);
	padding: .5rem 0 .5rem 1.5rem;
	margin: 2rem 0;
	font-style: italic;
	color: var(--ill-text);
	font-size: 1.125rem;
}
.content-block__body .cta-line {
	margin-block: 2rem;
	text-align: left;
}
.content-block__body .pricing-cards-inline { margin: 2rem 0; }

/* ===== STAT CALLOUT (inline) ===== */
.stat-callout {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	background: linear-gradient(135deg, rgba(82,199,163,0.18), rgba(82,199,163,0.04));
	border: 1px solid rgba(82,199,163,0.4);
	border-radius: var(--ill-radius);
	padding: 1.75rem 2rem;
	margin: 2.25rem 0;
}
.stat-callout__num {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	color: var(--ill-accent);
	line-height: 1;
	flex-shrink: 0;
	letter-spacing: -0.01em;
}
.stat-callout__num span { font-size: .55em; margin-left: .1em; }
.stat-callout__txt {
	margin: 0;
	color: var(--ill-text);
	font-size: 1.0625rem;
	line-height: 1.55;
	font-weight: 500;
}
@media (max-width: 640px) {
	.stat-callout { flex-direction: column; align-items: flex-start; padding: 1.5rem; gap: 1rem; }
}

/* ===== METHODE - Étapes en cards visuelles ===== */
.methode-steps {
	padding-block: clamp(4rem, 7vw, 6rem);
	background: var(--ill-bg);
	border-top: 1px solid var(--ill-border);
}
.methode-steps__head { text-align: center; max-width: 760px; margin: 0 auto 4rem; }
.methode-steps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	max-width: 1200px;
	margin-inline: auto;
}
.step-card {
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2rem 1.75rem;
	position: relative;
	transition: border-color 200ms, transform 200ms;
}
.step-card:hover { transform: translateY(-4px); border-color: rgba(82,199,163,0.4); }
.step-card__num {
	font-family: var(--ill-font-mono);
	font-size: .75rem;
	letter-spacing: .15em;
	color: var(--ill-accent);
	margin-bottom: 1rem;
	display: block;
}
.step-card__title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	color: var(--ill-text);
	margin: 0 0 .75rem;
	line-height: 1.2;
}
.step-card__text { color: var(--ill-text-muted); font-size: .98rem; line-height: 1.55; margin: 0; }
.step-card__icon {
	width: 32px; height: 32px;
	background: var(--ill-accent);
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ill-bg);
	font-weight: 700;
	margin-bottom: 1.25rem;
}

/* ===== A-PROPOS - Founder card avec avatar SVG ===== */
.founder-card { text-align: left; padding: 2rem; }
.founder-card__avatar {
	width: 96px; height: 96px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ill-accent) 0%, #2d8a6f 100%);
	color: var(--ill-bg);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: 2rem;
	letter-spacing: -.02em;
	margin-bottom: 1.5rem;
	box-shadow: 0 8px 24px rgba(82,199,163,0.25);
}

/* ===== A-PROPOS - Valeurs en cards ===== */
.values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
	max-width: 1100px;
	margin: 3rem auto 0;
}
.value-card {
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 1.75rem 1.5rem;
}
.value-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	background: rgba(82, 199, 163, 0.12);
	border: 1px solid rgba(82, 199, 163, 0.3);
	border-radius: var(--ill-radius-sm);
	margin-bottom: 1rem;
	color: var(--ill-accent);
	font-size: 1.25rem;
}
.value-card__title {
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--ill-text);
	margin: 0 0 .5rem;
}
.value-card__text { color: var(--ill-text-muted); font-size: .95rem; line-height: 1.55; margin: 0; }

/* ===== TARIFS - Tableau comparatif ===== */
.compare-table {
	margin: 4rem auto 2rem;
	max-width: 1100px;
}
.compare-table__head {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: 0;
	background: var(--ill-bg-3);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius) var(--ill-radius) 0 0;
	overflow: hidden;
	position: sticky; top: 6rem; z-index: 10;
}
/* Sur la page dediee "Comparatif detaille", le sticky du head ecrasait la 1re ligne
   apres un petit scroll (le head se collait a 6rem du haut et passait par-dessus
   "Tournage multicam 4K"). On retire le sticky : la page est courte, pas besoin. */
.page-svc--compare-only .compare-table__head {
	position: static;
	top: auto;
	z-index: auto;
}
.compare-table__cell {
	padding: 1.25rem 1.25rem;
	border-right: 1px solid var(--ill-border);
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--ill-text);
}
.compare-table__cell--head { font-size: 1.125rem; padding: 1.5rem 1.25rem; }
.compare-table__cell--featured {
	background: linear-gradient(180deg, rgba(82,199,163,0.18), rgba(82,199,163,0.05));
	color: var(--ill-text);
}
.compare-table__cell--label {
	font-family: var(--ill-font-body);
	font-weight: 500;
	color: var(--ill-text-muted);
	font-size: .92rem;
}
.compare-table__cell--price {
	font-family: var(--ill-font-display);
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--ill-text);
}
.compare-table__row {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	border-left: 1px solid var(--ill-border);
	border-right: 1px solid var(--ill-border);
	border-bottom: 1px solid var(--ill-border);
	background: var(--ill-bg);
}
.compare-table__row:nth-child(even) { background: rgba(255,255,255,0.02); }
.compare-table__row:last-child { border-radius: 0 0 var(--ill-radius) var(--ill-radius); }
.compare-table__row .compare-table__cell {
	padding: 1rem 1.25rem;
	font-family: var(--ill-font-body);
	font-weight: 500;
	color: var(--ill-text-muted);
	font-size: .94rem;
}
.compare-table__cell--check { color: var(--ill-accent); font-weight: 800; font-size: 1.25rem; text-align: center; }
.compare-table__cell--dash { color: var(--ill-text-faint); font-size: 1.1rem; text-align: center; }
.compare-table__cell--byus { color: var(--ill-accent); font-weight: 700; text-align: center; }
.compare-table__cell--muted { color: var(--ill-text-faint); text-align: center; }
@media (max-width: 880px) {
	.compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.compare-table__head, .compare-table__row { min-width: 620px; }
}

/* ===== TARIFS - section "ce qui est inclus partout" ===== */
.always-included {
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2.5rem 2rem;
	margin: 3rem auto;
	max-width: 1100px;
	text-align: center;
}
.always-included h3 {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--ill-text);
	margin: 0 0 .5rem;
}
.always-included p { color: var(--ill-text-muted); margin: 0 0 1.5rem; }
.always-included__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 1.5rem;
}
@media (max-width: 720px) { .always-included__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .always-included__grid { grid-template-columns: 1fr; } }
.always-included__item {
	color: var(--ill-text);
	font-family: var(--ill-font-display);
	font-size: .95rem;
	font-weight: 500;
	padding: .85rem 1.1rem;
	background: rgba(82,199,163,0.07);
	border: 1px solid rgba(82,199,163,0.22);
	border-radius: var(--ill-radius-sm);
	display: flex; align-items: center; gap: .65rem;
	text-align: left;
}
.always-included__item::before {
	content: '→';
	color: var(--ill-accent);
	font-weight: 800;
	font-size: 1.1rem;
	line-height: 1;
	flex: 0 0 auto;
}

/* ===== ÉTUDE CAS - améliorations ===== */
.case-card__media {
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
}
.case-card { overflow: hidden; }
.case-card__link { display: flex; flex-direction: column; height: 100%; }
.case-card__body {
	padding: 1.5rem 1.5rem 1.75rem;
	display: flex; flex-direction: column;
	flex: 1;
}
.case-card__cta { margin-top: auto; padding-top: 1rem; }

/* ===== Override : page-body sans split (fallback intro courte) ===== */
.page-body--narrow .container--narrow { max-width: 760px; }

/* ===== FAQ accordions (`<details>` détectés dans content) ===== */
.content-block__body details {
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: .75rem;
	background: rgba(255,255,255,0.02);
}
.content-block__body details[open] {
	background: rgba(82, 199, 163, 0.05);
	border-color: rgba(82, 199, 163, 0.3);
}
.content-block__body summary {
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	cursor: pointer;
	color: var(--ill-text);
	list-style: none;
	position: relative;
	padding-right: 2rem;
}
.content-block__body summary::after {
	content: '+';
	position: absolute; right: 0; top: -.1rem;
	font-size: 1.5rem;
	color: var(--ill-accent);
	transition: transform 200ms;
}
.content-block__body details[open] summary::after { transform: rotate(45deg); }

/* ===== Image features décoratives intersticielles ===== */
.feature-strip {
	padding-block: clamp(4rem, 7vw, 5rem);
	border-block: 1px solid var(--ill-border);
}
.feature-strip__inner {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: var(--ill-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}
.feature-strip__item {
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 1.75rem 1.5rem;
	text-align: center;
}
.feature-strip__big {
	display: block;
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: 2rem;
	color: var(--ill-accent);
	margin-bottom: .5rem;
	letter-spacing: -.01em;
}
.feature-strip__label {
	color: var(--ill-text-muted);
	font-size: .95rem;
	font-weight: 500;
}

/* ============================================================
   ===== ILLUSTRE V4 — Refactor content-block layout vertical =
   ============================================================ */

/* Override les styles V3 split 2-cols qui ratatinent le texte */
.content-block__inner--split {
	display: block; /* fini le grid 2 cols */
	max-width: 760px; /* container narrow lisible */
	margin-inline: auto;
}
.content-block__inner {
	max-width: 800px;
	margin-inline: auto;
}
.content-block__inner--full {
	max-width: 720px;
	text-align: center;
}

/* Header de chaque section : numéro + H2 alignés (gauche) */
.content-block__header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--ill-border);
}
.content-block__header .content-block__num {
	margin-bottom: .85rem;
}
.content-block__header h2 {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.005em;
	margin: 0;
	color: var(--ill-text);
	max-width: 26ch;
}
.content-block__head { display: contents; } /* override V3 sticky */
.content-block__head h2 { display: block; }

/* Body : largeur lisible, paragraphes confortables */
.content-block__body {
	max-width: 65ch;
	color: var(--ill-text-muted);
}
.content-block__body p {
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0 0 1.25rem;
	color: var(--ill-text-muted);
}
.content-block__body p:first-of-type {
	font-size: 1.125rem;
	color: var(--ill-text);
	font-weight: 400;
}
.content-block__body h3 {
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ill-text);
	margin: 2.25rem 0 .75rem;
	line-height: 1.3;
}

/* Tables markdown (les | Pilote | Saison | Saga | rendus) */
.content-block__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	overflow: hidden;
	font-size: .94rem;
}
.content-block__body thead {
	background: var(--ill-bg-3);
}
.content-block__body th {
	padding: .9rem 1rem;
	text-align: left;
	font-family: var(--ill-font-display);
	font-weight: 700;
	color: var(--ill-text);
	border-bottom: 1px solid var(--ill-border);
	font-size: .92rem;
}
.content-block__body td {
	padding: .8rem 1rem;
	border-bottom: 1px solid var(--ill-border);
	color: var(--ill-text-muted);
	vertical-align: top;
}
.content-block__body tr:last-child td { border-bottom: 0; }
.content-block__body tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
.content-block__body table strong { color: var(--ill-text); }

/* Première colonne (label) en gras */
.content-block__body td:first-child {
	font-family: var(--ill-font-display);
	font-weight: 600;
	color: var(--ill-text);
}

/* ===== FAQ ACCORDION (auto via filter) ===== */
.content-block--faq .content-block__body { max-width: 760px; }
.faq-item {
	background: rgba(255,255,255,0.025);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 0;
	margin-bottom: .75rem;
	transition: border-color 200ms;
	overflow: hidden;
}
.faq-item[open] {
	background: rgba(82, 199, 163, 0.05);
	border-color: rgba(82, 199, 163, 0.4);
}
.faq-item summary {
	font-family: var(--ill-font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	cursor: pointer;
	color: var(--ill-text);
	list-style: none;
	position: relative;
	padding: 1.25rem 3rem 1.25rem 1.5rem;
	transition: background 160ms;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: rgba(255,255,255,0.025); }
.faq-item summary::after {
	content: '+';
	position: absolute;
	right: 1.5rem; top: 50%;
	transform: translateY(-50%);
	font-family: var(--ill-font-mono);
	font-size: 1.5rem;
	color: var(--ill-accent);
	transition: transform 200ms;
	font-weight: 300;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item__answer {
	padding: 0 1.5rem 1.5rem;
	color: var(--ill-text-muted);
}
.faq-item__answer p {
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 1rem;
}
.faq-item__answer p:last-child { margin-bottom: 0; }
.faq-item__answer a {
	color: var(--ill-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ===== ÉTUDES CPT — Single redesign ===== */
.case-single {
	background: var(--ill-bg);
}
.case-single__hero {
	padding-block: clamp(8rem, 14vw, 11rem) clamp(3rem, 5vw, 5rem);
	border-bottom: 1px solid var(--ill-border);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.case-single__hero::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 30%, var(--ill-accent) 50%, transparent 70%);
}
.case-single__back {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--ill-font-mono);
	font-size: .85rem;
	letter-spacing: .05em;
	color: var(--ill-text-muted);
	margin-bottom: 2rem;
	padding: .5rem 1rem;
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius-pill);
	transition: border-color 200ms, color 200ms;
}
.case-single__back:hover { border-color: var(--ill-accent); color: var(--ill-accent); }
.case-single__title {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
	margin: .5rem auto 1rem;
	max-width: 22ch;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.case-single__role {
	font-family: var(--ill-font-mono);
	font-size: .95rem;
	color: var(--ill-accent);
	letter-spacing: .03em;
	margin: 0;
}
.case-single__featured {
	max-width: 1080px;
	margin: -2rem auto 0;
	padding-inline: var(--ill-gutter);
	position: relative;
	z-index: 2;
}
.case-single__featured img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: var(--ill-radius);
	border: 1px solid var(--ill-border);
}
.case-single__kpis {
	padding-block: 2.5rem;
	background: var(--ill-bg-2);
	border-block: 1px solid var(--ill-border);
}
/* V4 .case-single__body { background } supprimé 12/05 — géré par règle finale L.3551+ */

/* ===== Page-content-blocks wrapper ===== */
.page-content-blocks { background: var(--ill-bg); }

/* ===== Stat callout - amélioration finale ===== */
.stat-callout { margin: 1.5rem 0; }

/* ===== Typography hardcoded h2 inside split content ===== */
.content-block__inner--split h2 {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem);
}

/* ===== Override sub-heading sizing inside body ===== */
.content-block__body strong { color: var(--ill-text); font-weight: 600; }

/* ===== Mobile FAQ ===== */
@media (max-width: 640px) {
	.faq-item summary { padding: 1rem 2.5rem 1rem 1.25rem; font-size: 1rem; }
	.faq-item summary::after { right: 1rem; font-size: 1.25rem; }
	.faq-item__answer { padding: 0 1.25rem 1.25rem; }
}

/* ===== List visual cleanup ===== */
.content-block__body ul li, .content-block__body ol li {
	border-bottom: 1px solid var(--ill-border);
	padding: .65rem 0 .65rem 1.6rem;
}
.content-block__body ul li:last-child, .content-block__body ol li:last-child { border-bottom: 0; }

/* ===== Hide raw markdown that escaped --- separators ===== */
.content-block__body p:has(:only-child:contains("---")) { display: none; }

/* ============================================================
   V5 .case-single__body h2/h3/p/ul/li/a/blockquote supprimés 12/05
   Le rendu est géré par .section-split__body (L.3166+) qui s'applique
   au bon niveau du DOM (contenu wrappé par filter illustre_split_etude_sections).
   ============================================================ */

/* ===== FIX : forcer centering content-block quoi qu'il arrive ===== */
.content-block { width: 100%; box-sizing: border-box; }
.content-block > .content-block__inner {
	max-width: 800px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1rem, 3vw, 2rem) !important;
	padding-right: clamp(1rem, 3vw, 2rem) !important;
}
.content-block > .content-block__inner--full {
	max-width: 720px !important;
	text-align: center;
}
.content-block__body { max-width: 100%; }
.content-block__header { max-width: 100%; }
.content-block__header h2 { max-width: 100%; }

/* ===== CTA-line vraiment centré ===== */
.content-block__body .cta-line {
	text-align: center;
	margin: 2rem 0;
}
.case-single__body .cta-line {
	text-align: center;
	margin: 2rem 0;
}

/* ============================================================
   ===== ILLUSTRE V6 — Wide layout + animations + ornements ===
   ============================================================ */

/* CONTAINER WIDE par défaut : 1240px (au lieu de 1200) */
:root { --ill-container: 1240px; --ill-container-narrow: 920px; }

/* OVERRIDE V5 : NE PAS forcer narrow centering qui ratatine */
.content-block > .content-block__inner {
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1.5rem, 3vw, 3rem) !important;
	padding-right: clamp(1.5rem, 3vw, 3rem) !important;
}
.content-block > .content-block__inner--full {
	max-width: 920px !important;
	text-align: center;
}

/* ===== LAYOUT SPLIT 2-COLS ASYMÉTRIQUE (V6) ===== */
.content-block__inner--split {
	display: grid !important;
	grid-template-columns: 0.8fr 1.6fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
@media (max-width: 960px) {
	.content-block__inner--split { display: block !important; grid-template-columns: 1fr; }
}

.content-block__inner--vertical {
	display: block;
	max-width: 1100px !important;
	margin-inline: auto;
}
.content-block__inner--vertical .content-block__head {
	margin-bottom: 2.5rem;
	max-width: 800px;
}

/* Head sticky à gauche - asymétrique */
.content-block__head {
	position: sticky;
	top: 7rem;
	align-self: start;
	border-left: 2px solid var(--ill-accent);
	padding-left: 1.5rem;
}
@media (max-width: 960px) {
	.content-block__head { position: static; padding-left: 1.25rem; }
}

.content-block__num {
	display: inline-block;
	font-family: var(--ill-font-mono);
	font-size: .8rem;
	letter-spacing: .18em;
	color: var(--ill-accent);
	margin-bottom: 1rem;
	padding: .35rem .85rem;
	background: rgba(82, 199, 163, 0.1);
	border: 1px solid rgba(82, 199, 163, 0.3);
	border-radius: var(--ill-radius-pill);
}
.content-block__head h2 {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.625rem, 1.5vw + 1rem, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--ill-text);
}

/* Body content : largeur lisible mais utilise toute la place de col 1.6fr */
.content-block__body {
	max-width: 760px;
	font-size: 1.0625rem;
	line-height: 1.7;
}
.content-block__body > p:first-of-type {
	font-size: 1.18rem;
	color: var(--ill-text);
	line-height: 1.55;
}
.content-block__body p { color: var(--ill-text-muted); margin: 0 0 1.25rem; }
.content-block__body h3 {
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: clamp(1.25rem, .5vw + 1rem, 1.5rem);
	color: var(--ill-text);
	margin: 2.5rem 0 .75rem;
	line-height: 1.2;
}

/* Section ornement décoratif top-right en blocks accent */
.content-block--accent {
	background: linear-gradient(180deg, var(--ill-bg-3) 0%, var(--ill-bg-2) 100%);
	position: relative;
	overflow: hidden;
}
.content-block--accent::before {
	content: '';
	position: absolute;
	top: -100px; right: -100px;
	width: 360px; height: 360px;
	background: radial-gradient(circle, rgba(82,199,163,0.12) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.content-block--accent .content-block__inner { position: relative; z-index: 1; }

/* Section ornement gauche (rectangle vertical accent au scroll) */
.content-block--alt {
	background: var(--ill-bg-2);
	position: relative;
}

/* Numéro géant en filigrane sur les sections (effet décoratif) */
.content-block__inner--split .content-block__head::before {
	content: attr(data-num);
	position: absolute;
	top: -1rem; left: -1rem;
	font-family: var(--ill-font-display);
	font-size: 8rem;
	font-weight: 900;
	color: rgba(82, 199, 163, 0.04);
	z-index: 0;
	pointer-events: none;
	line-height: 1;
}

/* ===== ANIMATIONS ===== */
[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 700ms cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms),
		transform 700ms cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
[data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}
/* Variante plus subtile pour les enfants déjà nombreux (logos, items de liste) */
.section-clients__logos > [data-reveal],
.proof__stats > [data-reveal] {
	transform: translateY(14px);
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Hover lift cards (généralisé) */
.case-card,
.pricing-card,
.dual-card,
.step-card,
.founder-card,
.value-card,
.pricing-card-inline {
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 280ms ease, box-shadow 280ms ease;
}
.case-card:hover,
.pricing-card:hover,
.dual-card:hover,
.step-card:hover,
.founder-card:hover,
.value-card:hover,
.pricing-card-inline:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(82,199,163,0.18);
}

/* CTA pill micro-interaction */
.cta-pill { transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.cta-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(82,199,163,0.3); }
.cta-pill--mint:hover { background: #6cdab9; }

/* Hero title - subtle gradient effect */
.page-hero__title,
.hero__title,
.case-single__title {
	background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.85) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Page hero - ornements visuels */
.page-hero {
	overflow: hidden;
	position: relative;
}
.page-hero::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 800px; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(82,199,163,0.5), transparent);
}
/* .page-hero::after retiré — créait un halo radial dont le pic était pile sur la bordure
   inférieure du hero (overflow:hidden + bottom:-200px), donc une délimitation visible
   entre hero et section suivante. */

/* Modifier mosaïque vidéo : calque le rendu du hero home (.hero--mosaic) sur n'importe
   quel .page-hero. Le markup .hero__bg est injecté via template-parts/hero-mosaic-bg.php.
   On force le même padding-block, la même grille 6 colonnes et le même drop-shadow
   pour la lisibilité du titre, et on remonte la taille du H1 à celle du hero home. */
.page-hero--mosaic {
	padding-block: clamp(5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
	overflow: hidden;
	isolation: isolate;
	background: transparent;
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.page-hero--mosaic .hero__bg { z-index: 0; }
.page-hero--mosaic .page-hero__inner,
.page-hero--mosaic .hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin-inline: auto;
	filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.55));
}
.page-hero--mosaic .page-hero__cta,
.page-hero--mosaic .hero__cta { position: relative; z-index: 3; }
.page-hero--mosaic .page-hero__title {
	font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: 0.03em;
	max-width: none;
}
.page-hero--mosaic .page-hero__lead {
	font-size: clamp(1rem, .8vw + .9rem, 1.2rem);
	max-width: 640px;
	margin: 0 auto 2.5rem;
}
.page-hero--mosaic .hero__mosaic { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 720px) {
	.page-hero--mosaic { min-height: auto; }
	.page-hero--mosaic .hero__mosaic { grid-template-columns: repeat(4, 1fr); }
}

/* V7 .case-single__body > .container--narrow grid + ::before eyebrow + h2/p direct
   supprimés 12/05 — .container--narrow n'est jamais utilisé dans case-single__body
   (le contenu est wrappé en .section-split par filter illustre_split_etude_sections). */

/* Page-hero CTA visible toujours bottom mobile */
@media (max-width: 640px) {
	.page-hero__cta { flex-direction: column; }
	.page-hero__cta .cta-pill { justify-content: center; }
}

/* Smooth scroll pour les CTA anchor */
html { scroll-behavior: smooth; }

/* Hero better contrast */
.page-hero__lead { color: var(--ill-text-muted); }

/* ============================================================
   ===== ILLUSTRE V7 — Reset overrides + force wide layout ===
   ============================================================ */

/* Drop V4/V5 narrow overrides en redéfinissant avec spec plus forte */
.content-block .content-block__inner,
.case-single__body .content-block .content-block__inner {
	max-width: 1240px !important;
	margin-inline: auto !important;
	padding-inline: clamp(1.5rem, 3vw, 3rem) !important;
}
.content-block .content-block__inner--full {
	max-width: 920px !important;
	text-align: center;
}

/* Force display grid override */
.content-block .content-block__inner--split {
	display: grid !important;
	grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.6fr) !important;
	gap: clamp(2rem, 4vw, 4.5rem) !important;
	max-width: 1240px !important;
	align-items: start !important;
}
@media (max-width: 960px) {
	.content-block .content-block__inner--split {
		grid-template-columns: 1fr !important;
		display: block !important;
	}
}

.content-block .content-block__inner--vertical {
	display: block !important;
	max-width: 1100px !important;
}

/* Body cell : utilise toute la largeur de col 1.6fr (plus de max-width 760 contraignant) */
.content-block__inner--split .content-block__body {
	max-width: 100% !important;
}
.content-block__inner--split .content-block__body p {
	max-width: 70ch;
}

/* V7 reset case-single__body + display:none direct h2/h3/p/ul/ol supprimés 12/05.
   Le contenu post est intégralement wrappé en .section-split par filter
   illustre_split_etude_sections : zéro descendant direct h2/h3/p/ul/ol à hide. */

/* Page-content-blocks fullwidth (anciennement contraint en container narrow) */
.page-content-blocks {
	background: var(--ill-bg);
}
.page-content-blocks > section.content-block:first-of-type {
	padding-top: clamp(3rem, 5vw, 5rem);
}

/* ============================================================
   ===== ILLUSTRE V8 — Design system propre sections components
   ============================================================ */

/* Wrapper page service v2 - utilise toute la largeur */
.page-svc { background: var(--ill-bg); }

/* ===== SECTION SPLIT (asymétrique sticky) ===== */
.section-split {
	padding-block: clamp(4rem, 7vw, 6rem);
	border-bottom: 1px solid var(--ill-border);
	position: relative;
}
.section-split--alt { }
.section-split--accent {
	position: relative;
	overflow: hidden;
}
.section-split--accent::before {
	content: '';
	position: absolute;
	top: -100px; right: -100px;
	width: 360px; height: 360px;
	background: radial-gradient(circle, rgba(82,199,163,0.12) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.section-split__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 3vw, 3rem);
	display: grid;
	grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.6fr);
	gap: clamp(2rem, 4vw, 5rem);
	align-items: start;
	position: relative;
	z-index: 1;
}
@media (max-width: 960px) {
	.section-split__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
.section-split__head {
	position: sticky;
	top: 7rem;
	align-self: start;
	border-left: 2px solid var(--ill-accent);
	padding-left: 1.5rem;
}
@media (max-width: 960px) { .section-split__head { position: static; padding-left: 1rem; } }
.section-split__num {
	display: inline-block;
	font-family: var(--ill-font-mono);
	font-size: .8rem;
	letter-spacing: .18em;
	color: var(--ill-accent);
	margin-bottom: 1rem;
	padding: .35rem .85rem;
	background: rgba(82, 199, 163, 0.1);
	border: 1px solid rgba(82, 199, 163, 0.3);
	border-radius: var(--ill-radius-pill);
}
.section-split__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--ill-font-mono);
	font-size: .8rem;
	letter-spacing: .12em;
	color: var(--ill-accent);
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.section-split__eyebrow .dot {
	width: 6px; height: 6px;
	background: var(--ill-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(82,199,163,0.15);
}
.section-split__title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.625rem, 1.5vw + 1rem, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--ill-text);
}
.section-split__body {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ill-text-muted);
}
.section-split__body p {
	margin: 0 0 1.25rem;
	max-width: 70ch;
}
.section-split__body p:first-child {
	font-size: 1.18rem;
	color: var(--ill-text);
	line-height: 1.55;
	max-width: 60ch;
}
.section-split__body strong { color: var(--ill-text); font-weight: 600; }
.section-split__body a {
	color: var(--ill-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.section-split__body a:hover { color: var(--ill-text); }

/* ===== SECTION FEATURES (3 cards icone+title+text) ===== */
.section-features {
	padding-block: clamp(4rem, 7vw, 6rem);
	border-bottom: 1px solid var(--ill-border);
}
.section-features--alt { }
.section-features--accent { }
.section-features__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 3vw, 3rem);
}
.section-features__head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.section-features__head .section-split__eyebrow { justify-content: center; margin-bottom: 1rem; }
.section-features__title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
	line-height: 1.15;
	margin: 0 0 1rem;
	color: var(--ill-text);
}
.section-features__lead { color: var(--ill-text-muted); font-size: 1.0625rem; line-height: 1.6; max-width: 60ch; margin-inline: auto; }
.section-features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}
@media (max-width: 900px) {
	.section-features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.section-features__grid { grid-template-columns: 1fr; }
}
.feature-card {
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2rem 1.75rem;
	transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.feature-card:hover {
	transform: translateY(-4px);
	border-color: rgba(82,199,163,0.4);
	box-shadow: 0 14px 32px rgba(0,0,0,0.2);
}
.feature-card__icon {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 48px; height: 48px;
	background: rgba(82,199,163,0.12);
	border: 1px solid rgba(82,199,163,0.3);
	border-radius: var(--ill-radius-sm);
	color: var(--ill-accent);
	font-size: 1.5rem;
	margin-bottom: 1.25rem;
}
.feature-card__title {
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ill-text);
	margin: 0 0 .5rem;
}
.feature-card__text { color: var(--ill-text-muted); font-size: 1rem; line-height: 1.55; margin: 0; }

/* ===== SECTION STEPS (process horizontal) ===== */
.section-steps {
	padding-block: clamp(4rem, 7vw, 6rem);
	border-bottom: 1px solid var(--ill-border);
}
.section-steps--alt { background: var(--ill-bg-2); }
.section-steps__inner { max-width: 1340px; margin-inline: auto; padding-inline: clamp(1.5rem, 3vw, 3rem); }
.section-steps__head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.section-steps__head .section-split__eyebrow { justify-content: center; margin-bottom: 1rem; }
.section-steps__title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
	margin: 0 0 1rem;
}
.section-steps__lead { color: var(--ill-text-muted); font-size: 1.0625rem; line-height: 1.6; max-width: 60ch; margin-inline: auto; }
.section-steps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.25rem;
	counter-reset: step;
}
@media (max-width: 900px) {
	.section-steps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.section-steps__grid { grid-template-columns: 1fr; }
}
.step-card-v2 {
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2rem 1.75rem;
	position: relative;
	transition: transform 280ms ease, border-color 280ms ease;
}
.step-card-v2:hover { transform: translateY(-4px); border-color: rgba(82,199,163,0.4); }
.step-card-v2__num {
	display: block;
	font-family: var(--ill-font-mono);
	font-size: .75rem;
	letter-spacing: .15em;
	color: var(--ill-accent);
	margin-bottom: .75rem;
}
.step-card-v2__icon {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 40px; height: 40px;
	background: var(--ill-accent);
	color: var(--ill-bg);
	border-radius: 50%;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}
.step-card-v2__title {
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ill-text);
	margin: 0 0 .5rem;
	line-height: 1.2;
}
.step-card-v2__text { color: var(--ill-text-muted); font-size: .98rem; line-height: 1.55; margin: 0; }

/* ===== SECTION COMPARE 2-COLS ===== */
.section-compare2 {
	padding-block: clamp(4rem, 7vw, 6rem);
	border-bottom: 1px solid var(--ill-border);
	background: var(--ill-bg);
}
.section-compare2--alt { background: var(--ill-bg-2); }
.section-compare2__inner { max-width: 1240px; margin-inline: auto; padding-inline: clamp(1.5rem, 3vw, 3rem); }
.section-compare2__head { text-align: center; max-width: 820px; margin: 0 auto 3rem; }
.section-compare2__head .section-split__eyebrow { justify-content: center; margin-bottom: 1rem; }
.section-compare2__title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
	margin: 0 0 1rem;
	line-height: 1.15;
}
.section-compare2__lead { color: var(--ill-text-muted); font-size: 1.0625rem; line-height: 1.6; max-width: 60ch; margin-inline: auto; }
.compare2-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	max-width: 1100px;
	margin-inline: auto;
}
@media (max-width: 768px) { .compare2-grid { grid-template-columns: 1fr; } }
.compare2-col {
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	padding: 2rem 1.75rem;
}
.compare2-col--alt { background: rgba(255,100,100,0.04); border-color: rgba(255,100,100,0.2); }
.compare2-col--featured { background: linear-gradient(180deg, rgba(82,199,163,0.13), rgba(82,199,163,0.04)); border-color: var(--ill-accent); }
.compare2-col__label {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: 1.25rem;
	margin: 0 0 1.5rem;
	color: var(--ill-text);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--ill-border);
}
.compare2-col--alt .compare2-col__label { color: rgba(255,150,150,0.9); }
.compare2-col--featured .compare2-col__label { color: var(--ill-accent); }
.compare2-col ul { list-style: none; padding: 0; margin: 0; }
.compare2-col li {
	padding: .8rem 0 .8rem 1.8rem;
	position: relative;
	color: var(--ill-text-muted);
	border-bottom: 1px solid var(--ill-border);
	line-height: 1.5;
}
.compare2-col li:last-child { border-bottom: 0; }
.compare2-col--alt li::before {
	content: '\00d7';
	position: absolute; left: 0; top: .65rem;
	color: rgba(255,100,100,0.7);
	font-weight: 700;
	font-size: 1.1rem;
}
.compare2-col--featured li::before {
	content: '\2713';
	position: absolute; left: 0; top: .85rem;
	color: var(--ill-accent);
	font-weight: 700;
}

/* ===== SECTION FAQ ===== */
.section-faq {
	padding-block: clamp(4rem, 7vw, 6rem);
	border-bottom: 1px solid var(--ill-border);
}
.section-faq--alt { background: var(--ill-bg-2); }
.section-faq__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 3vw, 3rem);
	display: grid;
	grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.6fr);
	gap: clamp(2rem, 4vw, 5rem);
	align-items: start;
}
@media (max-width: 880px) {
	.section-faq__inner { grid-template-columns: 1fr; }
}
.section-faq__head {
	position: sticky;
	top: 7rem;
	align-self: start;
	border-left: 2px solid var(--ill-accent);
	padding-left: 1.5rem;
}
@media (max-width: 880px) { .section-faq__head { position: static; padding-left: 1rem; } }
.section-faq__title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem);
	margin: 0 0 1rem;
	color: var(--ill-text);
	line-height: 1.15;
}
.section-faq__lead { color: var(--ill-text-muted); font-size: 1rem; }

/* ===== SECTION CTA BAND ===== */
.section-cta-band {
	padding-block: clamp(5rem, 8vw, 7rem);
	border-top: 1px solid var(--ill-border);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.section-cta-band::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 80%; height: 200%;
	background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(82, 199, 163, 0.08) 0%, transparent 70%);
	pointer-events: none;
}
.section-cta-band__inner {
	max-width: 920px;
	margin-inline: auto;
	padding-inline: var(--ill-gutter);
	position: relative;
	z-index: 1;
}
.section-cta-band__inner .section-split__eyebrow { justify-content: center; margin-bottom: 1rem; }
.section-cta-band__title {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
	margin: 0 0 1rem;
	color: var(--ill-text);
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.section-cta-band__lead { color: var(--ill-text-muted); font-size: 1.0625rem; line-height: 1.55; margin: 0 0 2rem; max-width: 56ch; margin-inline: auto; }
.section-cta-band__cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ===== SECTION CLIENTS / PILLS ===== */
.section-clients { padding-block: clamp(4rem, 7vw, 6rem); border-bottom: 1px solid var(--ill-border); }
.section-clients--alt { background: var(--ill-bg-2); }
.section-clients__inner { max-width: 1140px; margin-inline: auto; padding-inline: clamp(1.5rem, 3vw, 3rem); }
.section-clients__head { text-align: center; margin-bottom: 2.5rem; }
.section-clients__head .section-split__eyebrow { justify-content: center; margin-bottom: 1rem; }
.section-clients__title { font-family: var(--ill-font-display); font-weight: 800; font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem); margin: 0 0 1rem; }
.section-clients__lead { color: var(--ill-text-muted); }
.section-clients__list {
	list-style: none;
	padding: 0; margin: 0;
	display: flex; flex-wrap: wrap;
	justify-content: center; gap: .75rem;
}
.client-pill {
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius-pill);
	padding: .75rem 1.25rem;
	font-family: var(--ill-font-display);
	font-weight: 600;
	font-size: .95rem;
	color: var(--ill-text);
	transition: border-color 200ms, transform 200ms;
}
.client-pill:hover { border-color: var(--ill-accent); transform: translateY(-2px); }

/* ===== SECTION BIG NUM ===== */
.section-bignum { padding-block: clamp(4rem, 7vw, 6rem); border-bottom: 1px solid var(--ill-border); }
.section-bignum--alt { background: var(--ill-bg-2); }
.section-bignum--accent { background: linear-gradient(135deg, var(--ill-bg-3), var(--ill-bg-2)); }
.section-bignum__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 3vw, 3rem);
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
@media (max-width: 880px) { .section-bignum__inner { grid-template-columns: 1fr; } }
.section-bignum__visual {
	display: flex;
	align-items: center; justify-content: center;
	min-height: 280px;
	background: linear-gradient(135deg, rgba(82,199,163,0.08), rgba(82,199,163,0.02));
	border: 1px solid rgba(82,199,163,0.2);
	border-radius: var(--ill-radius);
	padding: 3rem 2rem;
}
.section-bignum__big {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(4rem, 8vw, 6rem);
	color: var(--ill-accent);
	line-height: 1;
	letter-spacing: -0.02em;
}
.section-bignum__unit { font-size: .55em; color: var(--ill-text-muted); margin-left: .15em; }
.section-bignum__title { font-family: var(--ill-font-display); font-weight: 800; font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem); margin: 1rem 0 1rem; line-height: 1.15; }
.section-bignum__body { color: var(--ill-text-muted); font-size: 1.0625rem; line-height: 1.7; }

/* Variant intro (premier section sans H2) — override forcé du grid parent (specificity guard) */
.case-single__body .section-split__inner--intro,
.section-split__inner--intro {
	max-width: 920px !important;
	margin-inline: auto !important;
	padding-inline: clamp(1.5rem, 3vw, 3rem) !important;
	display: block !important;
	grid-template-columns: 1fr !important;
}
.section-split__inner--intro .section-split__body {
	font-size: 1.18rem;
	line-height: 1.65;
	color: var(--ill-text);
	max-width: 100% !important;
}
.section-split__inner--intro .section-split__body p {
	max-width: 100% !important;
}
.section-split__inner--full {
	max-width: 920px !important;
	margin-inline: auto !important;
	display: block !important;
	grid-template-columns: 1fr !important;
	text-align: center;
}

/* Études CPT — reset full width du body wrapper (override toute restriction antérieure) */
.case-single__body {
	background: transparent !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
}
.case-single__body section.section-split:first-of-type { padding-top: clamp(3rem, 5vw, 5rem); }

/* ===== NOS PODCASTS (V1.8 — 08/05) ===== */
.podcast-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.75rem;
}
@media (min-width: 1100px) {
	.podcast-grid { grid-template-columns: repeat(2, 1fr); }
}
.podcast-card {
	display: flex;
	flex-direction: column;
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	overflow: hidden;
	transition: border-color 200ms, transform 200ms;
}
.podcast-card:hover { border-color: var(--ill-accent); transform: translateY(-3px); }
.podcast-card__media {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--ill-bg-3);
}
.podcast-card__media iframe,
.podcast-card__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
	object-fit: cover;
}
.podcast-card__media-placeholder {
	display: flex; align-items: center; justify-content: center;
	height: 100%;
	background: linear-gradient(135deg, var(--ill-bg-2), var(--ill-bg-3));
}
.podcast-card__media-placeholder span {
	font-family: var(--ill-font-display);
	font-size: 4.5rem;
	font-weight: 800;
	color: var(--ill-accent);
	opacity: .6;
	letter-spacing: -0.02em;
}
.podcast-card__badge {
	position: absolute;
	top: 12px; left: 12px;
	padding: .25rem .6rem;
	border-radius: var(--ill-radius-pill);
	background: var(--ill-warm);
	color: var(--ill-bg);
	font-family: var(--ill-font-mono);
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.podcast-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .55rem; }
.podcast-card__title { font-size: 1.4rem; margin: 0; line-height: 1.15; }
.podcast-card__host { font-family: var(--ill-font-mono); font-size: .8rem; color: var(--ill-accent); margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.podcast-card__desc { font-size: .92rem; color: var(--ill-text-muted); margin: .25rem 0 .5rem; }
.podcast-card__platforms {
	list-style: none; padding: 0; margin: .5rem 0 0;
	display: flex; flex-wrap: wrap; gap: .5rem;
}
.podcast-card__platforms a {
	display: inline-flex; align-items: center;
	padding: .35rem .75rem;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius-pill);
	color: var(--ill-text);
	font-size: .78rem;
	font-weight: 500;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.podcast-card__platforms a:hover {
	background: var(--ill-accent-softer);
	border-color: var(--ill-accent);
	color: var(--ill-accent);
}
.podcast-card--soon { opacity: .92; }
.podcast-card--soon:hover { opacity: 1; }

/* ===== SINGLE ÉTUDE DE CAS — player principal + extraits (V1.8 — 08/05) ===== */
.case-single__player {
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}
.case-single__player-frame {
	position: relative;
	aspect-ratio: 16/9;
	background: #000;
	border-radius: var(--ill-radius);
	overflow: hidden;
	box-shadow: 0 32px 80px rgba(0,0,0,0.45);
	border: 1px solid var(--ill-border);
}
.case-single__player-frame iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
}

/* Section extraits */
.case-single__extraits {
	padding: var(--ill-section-y) 0;
	background: var(--ill-bg-3);
}
/* Grille extraits : reels TOUS verticaux 9/16 uniformes, centrés (fix bug tile horizontale) */
.extraits__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
	gap: 1.25rem;
	justify-content: center;
	align-items: start;
}
.extraits__item,
.extraits__item--vertical,
.extraits__grid .extraits__item:first-child {
	position: relative;
	aspect-ratio: 9/16;
	max-height: 560px;
	background: #000;
	border-radius: var(--ill-radius);
	overflow: hidden;
	border: 1px solid var(--ill-border);
	grid-row: auto;
}
.extraits__item iframe,
.extraits__item .vimeo-facade,
.extraits__item .vimeo-facade__poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
	object-fit: cover;
}

/* ============================================================
   PAGE /realisations/ V7 — Réécriture totale isolée (08/05)
   Markup .realisations-page + .rcard (zéro dépendance .case-card globale)
   ============================================================ */

/* Container : largeur cohérente avec les autres pages, pas full-bleed */
.realisations-page__container {
	width: 100%;
	max-width: min(1500px, calc(100vw - 3rem));
	margin-inline: auto;
	padding-inline: 0;
}
@media (max-width: 720px) {
	.realisations-page__container { max-width: calc(100vw - 2rem); }
}

/* Grille : 1 col mobile, 2 cols dès 900px */
.realisations-page__grid-section {
	padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem);
}
.realisations-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 900px) {
	.realisations-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
}
@media (min-width: 1400px) {
	.realisations-grid { gap: 2.5rem; }
}

/* === RCARD — card étude de cas (isolée de .case-card global) === */
.rcard {
	display: flex;
	flex-direction: column;
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
	border-radius: 20px;
	overflow: hidden;
	color: var(--ill-text);
	text-decoration: none;
	transition: border-color 220ms ease, transform 280ms ease, box-shadow 280ms ease;
	height: 100%;
}
.rcard:hover {
	border-color: var(--ill-accent);
	transform: translateY(-4px);
	box-shadow: 0 28px 56px rgba(0, 0, 0, 0.4);
	color: var(--ill-text);
}

/* Media wrap : aspect 16/10 (équilibre cinematic + hauteur raisonnable) */
.rcard__media {
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: #000;
	flex-shrink: 0;
}
.rcard__video-slot {
	position: absolute; inset: 0;
	background: #000;
}
.rcard__video-slot iframe {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}
/* Vidéo HORIZONTALE (16/9) dans container 16/10 : léger scale pour cover */
.rcard--ratio-horizontal .rcard__video-slot iframe {
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%) scale(1.12);
	transform-origin: center;
}
/* Vidéo VERTICALE (9/16) dans container 16/10 : scale large pour combler */
.rcard--ratio-vertical .rcard__video-slot iframe {
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%) scale(2.6);
}

/* Placeholder propre pour cards sans vidéo */
.rcard__placeholder {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(ellipse 60% 80% at 30% 30%, rgba(82, 199, 163, 0.10) 0%, transparent 60%),
		radial-gradient(ellipse 70% 60% at 80% 80%, rgba(82, 199, 163, 0.06) 0%, transparent 70%),
		linear-gradient(135deg, var(--ill-bg-2) 0%, var(--ill-bg-3) 100%);
}
.rcard__placeholder-letter {
	font-family: var(--ill-font-display);
	font-size: clamp(6rem, 14vw, 12rem);
	font-weight: 800;
	color: var(--ill-accent);
	opacity: .14;
	letter-spacing: -.06em;
	line-height: .85;
	-webkit-user-select: none;
	user-select: none;
}

.rcard__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(14,30,24,0.55) 0%, rgba(14,30,24,0.10) 35%, transparent 65%);
	pointer-events: none;
}

/* Body sous la vidéo : padding généreux, hauteur uniforme */
.rcard__body {
	padding: clamp(1.5rem, 2vw, 2rem) clamp(1.5rem, 2vw, 2rem) clamp(1.5rem, 2vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1;
}
.rcard__title {
	font-family: var(--ill-font-display);
	font-size: clamp(1.25rem, 1vw + .8rem, 1.6rem);
	font-weight: 800;
	color: var(--ill-text);
	margin: 0 0 .15rem;
	line-height: 1.18;
	letter-spacing: -0.005em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rcard__role {
	font-family: var(--ill-font-mono);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ill-accent);
	margin: 0 0 .35rem;
}
.rcard__cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: auto;
	padding-top: .85rem;
	font-family: var(--ill-font-display);
	font-size: .92rem;
	font-weight: 600;
	color: var(--ill-text-muted);
	transition: color 200ms ease, gap 200ms ease;
}
.rcard:hover .rcard__cta { color: var(--ill-accent); gap: .55rem; }

/* === Stats === */
.realisations-page__stats {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem);
}
.realisations-stats {
	max-width: 1080px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
@media (max-width: 700px) {
	.realisations-stats { grid-template-columns: 1fr; }
}
.realisations-stats__item {
	background: rgba(82, 199, 163, 0.05);
	border: 1px solid rgba(82, 199, 163, 0.14);
	border-radius: 16px;
	padding: 1.85rem 1.5rem;
	text-align: center;
}
.realisations-stats__num {
	font-family: var(--ill-font-display);
	font-size: clamp(1.85rem, 2vw + .5rem, 2.5rem);
	font-weight: 900;
	color: var(--ill-accent);
	margin: 0 0 .35rem;
	letter-spacing: -.01em;
	line-height: 1;
}
.realisations-stats__label {
	font-size: .92rem;
	color: var(--ill-text-muted);
	margin: 0;
	line-height: 1.45;
}

/* === CTA final === */
.realisations-page__cta {
	padding: clamp(3rem, 5vw, 5rem) 0 clamp(4rem, 7vw, 7rem);
}
.realisations-cta {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
	padding: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 4vw, 4rem);
	background: linear-gradient(135deg, rgba(82, 199, 163, 0.08) 0%, rgba(82, 199, 163, 0.02) 100%);
	border: 1px solid rgba(82, 199, 163, 0.15);
	border-radius: 24px;
}
.realisations-cta__title {
	font-family: var(--ill-font-display);
	font-size: clamp(1.85rem, 2.5vw + .5rem, 2.75rem);
	font-weight: 800;
	letter-spacing: -.015em;
	margin: 0 0 .85rem;
	line-height: 1.1;
}
.realisations-cta__lead {
	font-size: 1.05rem;
	color: var(--ill-text-muted);
	margin: 0 0 1.85rem;
	line-height: 1.5;
}
.realisations-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .9rem 1.85rem;
	background: var(--ill-accent);
	color: var(--ill-bg);
	border-radius: var(--ill-radius-pill);
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: background 180ms ease, transform 180ms ease;
}
.realisations-cta__btn:hover {
	background: #6cdab9;
	color: var(--ill-bg);
	transform: translateY(-1px);
}
.realisations-cta__btn .dot--white {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--ill-bg);
	display: inline-block;
}

/* ===== ÉTUDES DE CAS — autoplay Vimeo + cards XL (V1.9 — 08/05) ===== */
/* Grille élargie : 2 cards par rangée desktop (cinematic), respiration max sur la vidéo */
.cases__grid--wide {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 700px) {
	.cases__grid--wide { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (min-width: 1280px) {
	.cases__grid--wide { gap: 2.25rem; }
}

.case-card {
	position: relative;
	background: var(--ill-bg-2);
	border: 1px solid var(--ill-border);
	border-radius: var(--ill-radius);
	overflow: hidden;
	transition: border-color 220ms ease, transform 280ms ease, box-shadow 280ms ease;
}
.case-card:hover {
	border-color: var(--ill-accent);
	transform: translateY(-3px);
	box-shadow: 0 24px 48px rgba(0,0,0,0.35);
}
.case-card__link { display: block; color: var(--ill-text); }
.case-card__link:hover { color: var(--ill-text); }

/* Media wrap = ratio 16/9, vidéo plein cadre */
.case-card__media-wrap {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ill-bg-2), var(--ill-bg-3));
}
.case-card__media-wrap .case-card__poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	filter: saturate(0.92);
	transition: transform 800ms ease;
}
.case-card:hover .case-card__poster { transform: scale(1.04); }

/* Slot vidéo Vimeo — visible dès chargement (autoplay), scale cover adaptatif selon ratio source */
.case-card__video-slot {
	position: absolute; inset: 0;
	background: #000;
	overflow: hidden;
}
.case-card__video-slot iframe {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center;
	border: 0;
	pointer-events: none;
}
/* Cas vidéo HORIZONTALE 16/9 dans container 16/10 → léger scale up pour cover natural */
.case-card--ratio-horizontal .case-card__video-slot iframe {
	width: 105%;
	height: 105%;
}
/* Cas vidéo VERTICALE 9/16 dans container horizontal → scale up massif pour combler */
.case-card--ratio-vertical .case-card__video-slot iframe {
	width: 100%;
	height: 100%;
	/* La vidéo verticale a un ratio ~0.56, le container ~1.6. Pour que la vidéo verticale comble en largeur, on scale ~2.85x. Le contenu central est conservé, on crop massivement haut/bas. */
	transform: translate(-50%, -50%) scale(2.85);
}
/* Placeholder letter pour cards sans aucune vidéo ni image */
.case-card__placeholder-letter {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--ill-font-display);
	font-size: clamp(5rem, 10vw, 9rem);
	font-weight: 800;
	color: var(--ill-accent);
	opacity: .25;
	letter-spacing: -.04em;
}
.case-card.case-card--has-video .case-card__video-slot { opacity: 1; }
.case-card.case-card--has-video.is-playing .case-card__video-slot iframe {
	filter: saturate(1.05) brightness(0.92);
}

/* Overlay dégradé bas pour la lisibilité du caption */
.case-card__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(14,30,24,0.92) 0%, rgba(14,30,24,0.65) 30%, rgba(14,30,24,0.15) 65%, transparent 100%);
	pointer-events: none;
	z-index: 2;
}

/* Caption en bas de la card */
.case-card__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.6rem 1.75rem 1.5rem;
	z-index: 3;
}
.case-card__title {
	font-family: var(--ill-font-display);
	font-size: clamp(1.2rem, 1.4vw + .5rem, 1.55rem);
	font-weight: 800;
	line-height: 1.18;
	margin: 0 0 .3rem;
	color: #fff;
	letter-spacing: -0.005em;
}
.case-card__role {
	font-family: var(--ill-font-mono);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ill-accent);
	margin: 0 0 .85rem;
	opacity: 0.92;
}
.case-card__cta {
	display: inline-flex;
	align-items: center;
	color: #fff;
	font-weight: 600;
	font-size: .82rem;
	font-family: var(--ill-font-display);
	letter-spacing: .01em;
	padding: .4rem .85rem;
	border-radius: var(--ill-radius-pill);
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.case-card:hover .case-card__cta { background: var(--ill-accent); color: var(--ill-bg); border-color: var(--ill-accent); }

@media (max-width: 640px) {
	.case-card__caption { padding: 1.1rem 1.2rem 1.15rem; }
	.case-card__title { font-size: 1.15rem; }
}

/* Card sans vidéo : on garde le poster, caption restera lisible via overlay dégradé */
.case-card--no-video .case-card__overlay {
	background: linear-gradient(to top, rgba(14,30,24,0.95) 0%, rgba(14,30,24,0.4) 50%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
	.case-card__poster { transform: none !important; }
	.case-card { transition: border-color 220ms ease; }
}

/* ===== MEGA MENU EXPERTISES (V1.8 — 08/05) ===== */
.site-header__menu .site-header__item { position: relative; list-style: none; margin: 0; }
.site-header__menu .site-header__link {
	display: inline-flex; align-items: center;
	color: var(--ill-text);
	font-size: .875rem; font-weight: 500;
	padding: .4rem .65rem;
	border-radius: var(--ill-radius-pill);
	transition: background 150ms ease, color 150ms ease;
}
.site-header__menu .site-header__link:hover,
.site-header__menu .site-header__link:focus { background: rgba(255,255,255,0.08); color: var(--ill-text); }

/* Caret pour le trigger mega */
.site-header__item--mega > .site-header__link::after {
	content: '';
	display: inline-block;
	margin-left: 6px;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	transition: transform 200ms ease;
}
.site-header__item--mega:hover > .site-header__link::after,
.site-header__item--mega:focus-within > .site-header__link::after { transform: rotate(180deg); }

/* === MEGA MENU V3 — Featured cards + sidebar épurée (V1.10 — 08/05) === */
/* Position fixed par rapport au viewport : le menu ne deborde jamais sur le cote, peu importe la position du trigger dans le nav */
.mega-menu {
	position: fixed;
	top: calc(1rem + 56px + 4px);
	left: 50%;
	transform: translate(-50%, -10px);
	width: min(1080px, calc(100vw - 2 * var(--ill-gutter)));
	background: linear-gradient(180deg, rgba(11, 24, 19, 0.985) 0%, rgba(13, 30, 24, 0.985) 100%);
	-webkit-backdrop-filter: saturate(180%) blur(28px);
	backdrop-filter: saturate(180%) blur(28px);
	-webkit-backdrop-filter: saturate(180%) blur(28px);
	border: 1px solid rgba(82, 199, 163, 0.18);
	border-radius: 20px;
	padding: 1.5rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 240ms cubic-bezier(.32,.72,.34,1), transform 280ms cubic-bezier(.32,.72,.34,1), visibility 0s linear 380ms;
	z-index: 200;
	box-shadow:
		0 40px 100px rgba(0,0,0,0.6),
		0 8px 24px rgba(82, 199, 163, 0.06);
}

/* Ouverture pilotee par classe is-open (gere par JS avec hover-intent) ou focus-within (clavier) */
.site-header__item--mega:focus-within .mega-menu,
.site-header__item--mega.is-open .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	pointer-events: auto;
	transition: opacity 240ms cubic-bezier(.32,.72,.34,1), transform 280ms cubic-bezier(.32,.72,.34,1), visibility 0s linear 0s;
}

/* Pont invisible elargi pour eviter fermeture quand on traverse l'espace entre le trigger et le mega-menu (qui est position: fixed) */
.site-header__item--mega::before {
	content: '';
	position: absolute;
	top: 100%;
	left: -40px;
	right: -40px;
	height: 60px;
	pointer-events: auto;
}

/* === MEGA MENU V9 (08/05) — Fix halo flou héritage V3 (backdrop-filter + halo vert) === */
.mega-menu {
	padding: 2.5rem 2.5rem 1.75rem;
	background: #102a23;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
@media (min-width: 1101px) {
	.mega-menu { width: min(1040px, calc(100vw - 2 * var(--ill-gutter))); }
}
.mega-menu::before { display: none; }

.mega-menu__layout {
	display: grid;
	grid-template-columns: minmax(360px, 1.15fr) minmax(240px, 0.85fr);
	gap: 2.5rem;
	align-items: stretch;
}
.mega-menu__nav { order: 2; }
.mega-menu__feature { order: 1; }

.mega-menu__nav {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2.5rem;
	padding-block: .25rem;
}
.mega-menu__group { display: flex; flex-direction: column; gap: .5rem; }
.mega-menu__group-title {
	font-family: var(--ill-font-body);
	font-size: .78rem;
	font-weight: 700;
	color: var(--ill-accent);
	margin: 0 0 .5rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.mega-menu__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.mega-menu__links li { list-style: none; margin: 0; }
.site-header__menu .mega-menu__links a,
.mega-menu__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 1rem !important;
	margin-inline: -1rem;
	border-radius: 10px !important;
	color: var(--ill-text);
	text-decoration: none;
	font-family: var(--ill-font-display);
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	letter-spacing: -.01em;
	line-height: 1.3;
	transition: background 160ms ease, color 160ms ease;
}
.mega-menu__arrow {
	font-family: var(--ill-font-body);
	font-size: 1rem;
	color: var(--ill-text-faint);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 180ms ease, transform 180ms ease, color 180ms ease;
}
.mega-menu__links a:hover,
.mega-menu__links a:focus {
	background: rgba(255, 255, 255, 0.04);
	color: var(--ill-accent);
}
.mega-menu__links a:hover .mega-menu__arrow,
.mega-menu__links a:focus .mega-menu__arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--ill-accent);
}

/* === Page Agence : pas de cloisons entre sections, et padding-block reduit
   pour resserrer le flux vertical. === */
.page-svc--agence > section + section,
.page-svc--agence .pricing-studio,
.page-svc--agence .pricing-production,
.page-svc--agence .proof,
.page-svc--agence .section-features,
.page-svc--agence .section-compare2,
.page-svc--agence .section-faq,
.page-svc--agence .section-cta-band {
	border-top: 0 !important;
}
.page-svc--agence > section:not(.vsl-scroll-section):not(.page-hero) {
	padding-block: clamp(2rem, 4vw, 3.5rem) !important;
}
/* Fond plat partout sur la page agence + comparatif : on supprime la radial
   gradient du hero (qui creait une bande visible juste sous le titre) et le
   halo ::after du hero qui debordait sur la section suivante. */
.page-svc--agence .page-hero { background: var(--ill-bg); }
.page-svc--agence .page-hero::before,
.page-svc--agence .page-hero::after { content: none; }

/* === Page Production (saison) : pas de "coupure" turquoise sous le hero.
   Le hero et la section proof forment un seul bloc visuel continu. === */
.page-svc--production > .page-hero + .proof--inline { border-top: 0 !important; }

/* === Mega menu triggers convertis en <button> : retire les styles natifs du bouton
   pour qu'ils ressemblent EXACTEMENT aux anciens <a>. On herite chaque propriete
   font individuellement (PAS de "font: inherit" shorthand qui ecraserait le
   font-weight: 500 herite de .site-header__link). === */
.site-header__menu .site-header__link--trigger {
	background: transparent;
	border: 0;
	cursor: pointer;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: .875rem;
	font-weight: 500;
	font-style: inherit;
	line-height: 1;
	letter-spacing: inherit;
	color: var(--ill-text);
	text-align: left;
	text-transform: none;
}
.site-header__menu .site-header__link--trigger:focus { outline: 0; }
.site-header__menu .site-header__link--trigger:focus-visible {
	outline: 2px solid var(--ill-accent);
	outline-offset: 2px;
}

/* === Page Equipe (a-propos) version "photos only" : la 1re section remplace le hero,
   donc on lui donne le padding-top du hero pour ne pas etre cache derriere le header flottant. === */
.page-svc--photos-only .founders--first {
	padding-top: clamp(7rem, 12vw, 10rem);
}
.page-svc--photos-only .founders--first + .team {
	padding-top: 0;
}

/* === Mega menu "Nos offres" : grille 2x2 de 4 blocs feature identiques === */
@media (min-width: 1101px) {
	.mega-menu--offers { width: min(1180px, calc(100vw - 2 * var(--ill-gutter))) !important; }
}
.mega-menu--offers .mega-menu__offers-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}
.site-header__menu li a.mega-menu__feature--quad,
.mega-menu__feature--quad {
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important;
	gap: 1.25rem !important;
	padding: 1.4rem !important;
	min-height: 0;
}
.mega-menu__feature--quad .mega-menu__feature-title {
	font-size: 1.3rem !important;
	line-height: 1.15 !important;
}
.mega-menu__feature--quad .mega-menu__feature-image {
	border-radius: 10px;
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-height: 160px;
}
@media (max-width: 1080px) {
	.mega-menu--offers .mega-menu__offers-grid { grid-template-columns: 1fr; grid-template-rows: none; }
	.mega-menu__feature--quad { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; }
}
@media (max-width: 700px) {
	.mega-menu__feature--quad { grid-template-columns: 1fr !important; }
	.mega-menu__feature--quad .mega-menu__feature-image { max-height: 130px; }
}

.site-header__menu li a.mega-menu__feature,
.mega-menu__feature {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
	gap: 1.75rem;
	align-items: stretch;
	padding: 1.75rem !important;
	border-radius: 12px !important;
	background: #122a23 !important;
	border: 1px solid rgba(82, 199, 163, 0.22);
	color: var(--ill-text);
	text-decoration: none;
	box-shadow: none;
	transition: border-color 200ms ease, background 200ms ease;
	font-size: 1rem;
	font-weight: 500;
	margin: 0;
}
.site-header__menu li a.mega-menu__feature:hover,
.mega-menu__feature:hover {
	border-color: rgba(82, 199, 163, 0.5) !important;
	background: #14302a !important;
}
.mega-menu__feature-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.mega-menu__feature-image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 200px;
	max-height: 280px;
	object-fit: cover;
	object-position: 40% center;
	border-radius: 10px;
	align-self: stretch;
}
@media (max-width: 900px) {
	.site-header__menu li a.mega-menu__feature,
	.mega-menu__feature {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.mega-menu__feature-image {
		min-height: 140px;
		max-height: 180px;
	}
}

.mega-menu__feature-eyebrow {
	font-family: var(--ill-font-body);
	font-size: .75rem;
	font-weight: 700;
	color: var(--ill-accent);
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.mega-menu__feature-title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.35rem, 0.9vw + .9rem, 1.85rem);
	line-height: 1.1;
	letter-spacing: -.015em;
	color: var(--ill-text);
	margin: 0 0 .9rem;
}
.mega-menu__feature-desc {
	font-family: var(--ill-font-body);
	font-size: .98rem;
	color: var(--ill-text-muted);
	line-height: 1.55;
	margin: 0;
}
.mega-menu__feature-cta {
	margin-top: auto;
	padding-top: 1.5rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--ill-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ill-accent);
}
.mega-menu__feature-cta span { transition: transform 200ms ease; display: inline-block; }
.mega-menu__feature:hover .mega-menu__feature-cta span { transform: translateX(4px); }

/* Footer */
.mega-menu__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mega-menu__pitch {
	font-family: var(--ill-font-body);
	font-size: .92rem;
	color: var(--ill-text-muted);
	line-height: 1.45;
}
.mega-menu__cta-pill {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .7rem 1.25rem;
	background: var(--ill-accent);
	color: var(--ill-bg);
	border-radius: var(--ill-radius-pill);
	font-family: var(--ill-font-display);
	font-weight: 600;
	font-size: .92rem;
	transition: background 180ms ease, transform 180ms ease;
	white-space: nowrap;
	text-decoration: none;
}
.mega-menu__cta-pill:hover { background: #6cdab9; color: var(--ill-bg); transform: translateY(-1px); }
.mega-menu__cta-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ill-bg); display: inline-block; }

@media (max-width: 1100px) {
	.mega-menu { width: min(820px, calc(100vw - 2 * var(--ill-gutter))); padding: 2rem; }
	.mega-menu__layout { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.mega-menu__feature { padding: 1.75rem 1.5rem; }
	.mega-menu__links a { font-size: 1.05rem; padding: .75rem .9rem; margin-inline: -.9rem; }
}
@media (max-width: 880px) {
	.mega-menu__layout { grid-template-columns: 1fr; }
}

/* Mobile — méga menu désactivé, accordion natif via <details> dans .site-nav-mobile */
@media (max-width: 880px) {
	.site-header__nav { display: none !important; }
	.mega-menu { display: none !important; }
	.site-nav-mobile { padding: 0 !important; }
	.site-nav-mobile.is-open { padding: 1rem !important; }
	.site-nav-mobile__group { border-bottom: 1px solid var(--ill-border); padding-bottom: .25rem; margin-bottom: .25rem; }
	.site-nav-mobile__summary {
		display: flex; justify-content: space-between; align-items: center;
		padding: .85rem 1rem;
		font-weight: 600;
		color: var(--ill-text);
		cursor: pointer;
		list-style: none;
		border-radius: var(--ill-radius-pill);
		transition: background 150ms ease;
	}
	.site-nav-mobile__summary::-webkit-details-marker { display: none; }
	.site-nav-mobile__summary::after {
		content: '+';
		font-size: 1.2rem;
		font-weight: 400;
		color: var(--ill-accent);
		transition: transform 220ms ease;
	}
	.site-nav-mobile__group[open] .site-nav-mobile__summary { background: rgba(255,255,255,0.04); }
	.site-nav-mobile__group[open] .site-nav-mobile__summary::after { content: '–'; }
	.site-nav-mobile__sub { padding: .25rem 0 .5rem .5rem; display: flex; flex-direction: column; gap: 0; }
	.site-nav-mobile__sub-title {
		font-family: var(--ill-font-mono);
		font-size: .68rem;
		text-transform: uppercase;
		letter-spacing: .08em;
		color: var(--ill-accent);
		margin: .85rem 0 .3rem .8rem;
	}
	.site-nav-mobile__sub a {
		display: block;
		padding: .55rem 1rem;
		font-size: .9rem;
		color: var(--ill-text-muted);
		border-radius: var(--ill-radius-sm);
	}
	.site-nav-mobile__sub a:hover { background: rgba(255,255,255,0.04); color: var(--ill-text); }
}


/* ============================================
   v0.9.x - Photos equipe / fondateurs / cyclorama
   ============================================ */

/* Founder cards : remplace l'avatar initiales par photo ronde */
.founder-card__photo {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 0 1.5rem 0;
	border: 2px solid rgba(82, 199, 163, 0.35);
	box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

/* Bandeau duo fondateurs en bas de la section founders */
.founders__duo {
	margin: 3rem auto 0;
	max-width: 980px;
	padding: 0;
}
.founders__duo-photo {
	display: block;
	width: 100%;
	max-height: 540px;
	object-fit: cover;
	border-radius: 16px;
}
.founders__duo-caption {
	text-align: center;
	margin-top: 1rem;
	font-size: .95rem;
	color: var(--ill-text-muted);
}

/* Section equipe au complet */
.team {
	padding: 5rem 0 4rem;
}
.team__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
}
.team-card {
	padding: 1.25rem;
	background: #122a23;
	border-radius: 14px;
	border: 1px solid rgba(82, 199, 163, 0.18);
	transition: border-color 200ms ease, transform 200ms ease;
}
.team-card:hover {
	border-color: rgba(82, 199, 163, 0.45);
	transform: translateY(-2px);
}
.team-card__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 22%;
	border-radius: 10px;
	margin: 0 0 1rem 0;
}
.team-card__name {
	font-family: var(--ill-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	color: var(--ill-text);
	letter-spacing: -.01em;
}
.team-card__role {
	margin: .35rem 0 0;
	font-size: .9rem;
	color: var(--ill-text-muted);
	letter-spacing: .01em;
}
.team-card--group .team-card__photo { aspect-ratio: 16 / 11; }

/* Page Equipe : hero plus compact (titre proche de la nav) */
.page-svc--apropos .page-hero {
	padding-block: clamp(5rem, 7vw, 7rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Page Equipe : badge "5 étoiles sur Google" sous le titre */
.trust-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .75rem;
	margin: 2.5rem auto 1.5rem;
}
.google-rating {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	margin: 0;
	padding: .55rem 1.1rem;
	border-radius: 999px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	text-decoration: none;
	color: var(--ill-text);
	font-size: .95rem;
	transition: background 200ms ease, border-color 200ms ease;
}
.google-rating:hover {
	background: rgba(255,255,255,0.07);
	border-color: rgba(82, 199, 163, 0.35);
}
.google-rating__stars {
	display: inline-flex;
	gap: .12rem;
	color: #FBBC04;
	font-size: 1.05rem;
	letter-spacing: .04em;
	line-height: 1;
}
.google-rating__label {
	color: var(--ill-text);
	font-weight: 500;
	letter-spacing: .005em;
}
.google-rating__logo {
	width: 18px;
	height: 18px;
	display: inline-block;
	flex-shrink: 0;
}

/* Badge satisfaction client */
.satisfaction-rating {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem 1.1rem;
	border-radius: 999px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	font-size: .95rem;
	color: var(--ill-text);
}
.satisfaction-rating__meter {
	width: 30px;
	height: 18px;
	display: inline-block;
	flex-shrink: 0;
}
.satisfaction-rating__label {
	color: var(--ill-text);
	font-weight: 500;
	letter-spacing: .005em;
}
.satisfaction-rating__pct {
	color: #FBBC04;
	font-weight: 700;
}

/* Page Equipe : layout split "Qui sommes-nous ?" (gauche) + photos (droite) */
.team-split { padding: 3rem 0 5rem; }
.team-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}
.team-split__intro {
	position: sticky;
	top: clamp(8rem, 18vh, 12rem);
}
.team-split__heading {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(1.65rem, 1.6vw + 1rem, 2.25rem);
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--ill-text);
	margin: 0 0 1.25rem;
}
.team-split__intro p {
	color: var(--ill-text-muted);
	font-size: 1.02rem;
	line-height: 1.65;
	margin: 0 0 1rem;
}
.team-split__intro p:last-child { margin-bottom: 0; }
.hl {
	background: linear-gradient(180deg, transparent 62%, rgba(82,199,163,0.4) 62%);
	color: var(--ill-text);
	padding: 0 .12em;
	border-radius: 2px;
}
.team-split__photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.25rem 1.75rem;
}
.team-split__photos .team-card {
	padding: 0;
	background: transparent;
	border: 0;
	text-align: center;
}
.team-split__photos .team-card:hover {
	border-color: transparent;
	transform: none;
}
.team-split__photos .team-card__photo-wrap {
	display: block;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 1rem;
	border: 2px solid rgba(82, 199, 163, 0.25);
	box-shadow: 0 6px 24px rgba(0,0,0,0.28);
	position: relative;
}
.team-split__photos .team-card__photo {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	max-width: none;
	object-fit: cover;
	object-position: center 25%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: block;
}
/* Zoom + recadrage par personne */
.team-card--louis .team-card__photo   { transform: scale(1.35); transform-origin: 50% 35%; object-position: 50% 28%; }
.team-card--tim .team-card__photo     { transform: scale(1.15); transform-origin: 50% 32%; }
.team-card--camille .team-card__photo { transform: scale(1.32) translateX(3%); transform-origin: 50% 32%; }
.team-card--illina .team-card__photo  { transform: scale(1.25) translateX(6%); transform-origin: 50% 38%; object-position: 50% 32%; }
.team-card--sofiane .team-card__photo { transform: scale(1.22); transform-origin: 50% 32%; }
.team-split__photos .team-card__name {
	font-size: 1.1rem;
	text-align: center;
}
.team-split__photos .team-card__role {
	font-size: .9rem;
	text-align: center;
}
@media (max-width: 960px) {
	.team-split__grid { grid-template-columns: 1fr; }
	.team-split__intro { position: static; }
}
@media (max-width: 560px) {
	.team-split__photos { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Bandeau cyclorama (page a propos) */
.banner-cyclorama {
	margin: 4rem 0 0;
	padding: 0;
}
.banner-cyclorama .container { padding-inline: 1.5rem; }
.banner-cyclorama__img {
	display: block;
	width: 100%;
	max-height: 600px;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
.banner-cyclorama__caption {
	text-align: center;
	margin-top: 1.25rem;
	font-size: .95rem;
	color: var(--ill-text-muted);
}

/* Studio showcase (pages studio podcast / fond vert) */
.studio-showcase {
	margin: 1rem 0 4rem;
	padding: 0;
}
.studio-showcase .container { padding-inline: 1.5rem; }
.studio-showcase__img {
	display: block;
	width: 100%;
	max-height: 620px;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
.studio-showcase__caption {
	text-align: center;
	margin-top: 1.25rem;
	font-size: .95rem;
	color: var(--ill-text-muted);
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Differenciant home : photo cyclorama remplace le panel ASCII */
.differentiator__photo {
	display: block;
	width: 100%;
	height: auto;
	max-height: 460px;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

@media (max-width: 720px) {
	.founder-card__photo { width: 96px; height: 96px; }
	.team { padding: 3rem 0 2.5rem; }
	.banner-cyclorama__img,
	.studio-showcase__img,
	.differentiator__photo,
	.founders__duo-photo { max-height: 420px; border-radius: 12px; }
}

/* ============================================
   v0.9.x - Guests grid (pages Expertises)
   ============================================ */
.guests-grid { padding: 5rem 0; }
.guests-grid--alt { }
.guests-grid--accent { }
.guests-grid__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.25rem;
	margin-top: 2.5rem;
}
.guests-grid__card {
	display: block;
	padding: 1rem;
	background: #122a23;
	border-radius: 12px;
	border: 1px solid rgba(82, 199, 163, 0.15);
	text-decoration: none;
	color: var(--ill-text);
	transition: border-color 200ms ease, transform 200ms ease;
}
.guests-grid__card:hover {
	border-color: rgba(82, 199, 163, 0.45);
	transform: translateY(-3px);
}
.guests-grid__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 10px;
	margin: 0 0 .9rem 0;
}
.guests-grid__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 5;
	background: rgba(82, 199, 163, 0.18);
	color: var(--ill-accent);
	font-family: var(--ill-font-display);
	font-size: 3.2rem;
	font-weight: 800;
	border-radius: 10px;
	margin-bottom: .9rem;
}
.guests-grid__name {
	font-family: var(--ill-font-display);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 .15rem;
	letter-spacing: -.01em;
	color: var(--ill-text);
}
.guests-grid__role {
	font-size: .82rem;
	color: var(--ill-text-muted);
	margin: 0;
	line-height: 1.4;
}

/* Aside portrait coach on-set (pages studio + production) */
.coach-aside {
	padding: 4rem 0;
}
.coach-aside .container {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: center;
}
.coach-aside__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
.coach-aside__copy h2 {
	font-family: var(--ill-font-display);
	font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
	line-height: 1.1;
	margin: .75rem 0 1.25rem;
	color: var(--ill-text);
	letter-spacing: -.02em;
}
.coach-aside__copy p {
	color: var(--ill-text-muted);
	line-height: 1.7;
	margin: 0 0 1rem;
}
.coach-aside__copy strong { color: var(--ill-text); }
@media (max-width: 820px) {
	.coach-aside .container {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.coach-aside__photo {
		max-width: 280px;
		margin: 0 auto;
	}
}

/* Variante coach-aside : image à droite (texte à gauche) - pour alterner visuellement */
.coach-aside--reverse .container {
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
}
@media (max-width: 820px) {
	.coach-aside--reverse .container { grid-template-columns: 1fr; }
}

/* ============================================================
   ===== VIMEO FACADE (lazy load click-to-play, 12/05) =========
   ============================================================ */
.vimeo-facade {
	position: relative;
	aspect-ratio: var(--vimeo-ratio, 16/9);
	overflow: hidden;
	background: var(--ill-bg-3);
	cursor: pointer;
	border-radius: var(--ill-radius);
	border: 1px solid var(--ill-border);
	display: block;
	width: 100%;
	transition: border-color 200ms ease, transform 200ms ease;
}
.vimeo-facade:hover,
.vimeo-facade:focus-visible {
	border-color: var(--ill-accent);
	outline: 0;
}
.vimeo-facade:focus-visible {
	box-shadow: 0 0 0 3px rgba(82, 199, 163, 0.45);
}
.vimeo-facade__poster {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(.4,0,.2,1), opacity 200ms ease;
	background: linear-gradient(135deg, var(--ill-bg-2) 0%, var(--ill-bg-3) 100%);
}
.vimeo-facade:hover .vimeo-facade__poster {
	transform: scale(1.04);
}
.vimeo-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: rgba(82, 199, 163, 0.94);
	color: var(--ill-bg);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 220ms cubic-bezier(.4,0,.2,1), background 220ms ease, box-shadow 220ms ease;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42), 0 0 0 8px rgba(82, 199, 163, 0.15);
	pointer-events: none; /* click event bubble vers la facade parent */
}
.vimeo-facade__play svg {
	margin-left: 4px; /* compensation visuelle triangle ▶ */
}
.vimeo-facade:hover .vimeo-facade__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--ill-accent);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 12px rgba(82, 199, 163, 0.25);
}
.vimeo-facade.is-active .vimeo-facade__poster,
.vimeo-facade.is-active .vimeo-facade__play {
	opacity: 0;
	pointer-events: none;
}
.vimeo-facade__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--ill-bg);
}
/* Modifier : player principal (au-dessus du fold) - bordure plus visible */
.vimeo-facade--player {
	border-radius: var(--ill-radius-lg, var(--ill-radius));
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
/* Modifier : extrait vertical (9/16) - bordure plus discrète */
.vimeo-facade--vertical .vimeo-facade__play {
	width: 64px;
	height: 64px;
}
.vimeo-facade--vertical .vimeo-facade__play svg {
	width: 24px;
	height: 24px;
}
@media (max-width: 640px) {
	.vimeo-facade__play {
		width: 64px;
		height: 64px;
	}
	.vimeo-facade__play svg {
		width: 24px;
		height: 24px;
	}
}

/* ============================================================
   BLOG — listing, single article, TOC sticky, post cards
   (13/05/2026 — v1.0 templates blog complets)
   ============================================================ */

/* ------ Breadcrumb ------ */
.ill-breadcrumb {
	margin-bottom: 1.25rem;
	font-size: .875rem;
	color: var(--ill-text-faint);
}
.ill-breadcrumb__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .5rem;
	align-items: center;
}
.ill-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--ill-text-faint);
}
.ill-breadcrumb__item:not(:last-child)::after {
	content: '/';
	color: var(--ill-text-faint);
	opacity: .5;
}
.ill-breadcrumb__item a {
	color: var(--ill-text-muted);
	transition: color 160ms ease;
}
.ill-breadcrumb__item a:hover { color: var(--ill-accent); }
.ill-breadcrumb__item [aria-current='page'] { color: var(--ill-text); }

/* ------ Blog listing (/blog/, archives, catégories) ------ */
.blog-hero {
	padding-block: clamp(7rem, 12vw, 10rem) clamp(2rem, 4vw, 3rem);
	background: linear-gradient(180deg, rgba(82, 199, 163, 0.06) 0%, rgba(26, 88, 72, 0) 100%);
	border-bottom: 1px solid var(--ill-border);
}
.blog-hero__inner { max-width: 880px; margin-inline: auto; text-align: center; }
.blog-hero .ill-breadcrumb__list { justify-content: center; }
.blog-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .9rem;
	border-radius: var(--ill-radius-pill);
	background: var(--ill-accent-softer);
	border: 1px solid var(--ill-accent-soft);
	color: var(--ill-accent);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	margin-bottom: 1.25rem;
}
.blog-hero__title {
	font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 1rem;
}
.blog-hero__lead {
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
	color: var(--ill-text-muted);
	max-width: 680px;
	margin: 0 auto;
	line-height: 1.6;
}

.blog-tabs {
	position: sticky;
	top: 76px;
	z-index: 50;
	background: rgba(26, 88, 72, 0.92);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--ill-border);
	padding-block: .75rem;
}
body.admin-bar .blog-tabs { top: 108px; }
.blog-tabs__scroller {
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: .25rem;
}
.blog-tabs__scroller::-webkit-scrollbar { display: none; }
.blog-tabs__item {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem 1rem;
	border-radius: var(--ill-radius-pill);
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--ill-border);
	color: var(--ill-text-muted);
	font-size: .875rem;
	font-weight: 500;
	transition: all 160ms ease;
	white-space: nowrap;
}
.blog-tabs__item:hover {
	color: var(--ill-text);
	background: rgba(82, 199, 163, 0.08);
	border-color: var(--ill-accent-soft);
}
.blog-tabs__item.is-active {
	background: var(--ill-accent);
	border-color: var(--ill-accent);
	color: var(--ill-bg);
	font-weight: 600;
}
.blog-tabs__count {
	display: inline-block;
	min-width: 1.5em;
	padding: .1em .4em;
	border-radius: var(--ill-radius-pill);
	background: rgba(255,255,255,0.08);
	font-size: .75rem;
	font-weight: 500;
	color: var(--ill-text-faint);
}
.blog-tabs__item.is-active .blog-tabs__count {
	background: rgba(26, 88, 72, 0.2);
	color: var(--ill-bg);
}

.blog-list {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 7vw, 6rem);
}
.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(1.25rem, 2vw, 2rem);
}

.blog-pagination {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	display: flex;
	justify-content: center;
}
.blog-pagination .page-numbers {
	display: flex;
	gap: .35rem;
	list-style: none;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
	justify-content: center;
}
.blog-pagination .page-numbers li a,
.blog-pagination .page-numbers li span {
	display: inline-flex;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: .75rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--ill-radius-sm);
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--ill-border);
	color: var(--ill-text-muted);
	font-weight: 500;
	font-size: .9375rem;
	transition: all 160ms ease;
}
.blog-pagination .page-numbers li a:hover {
	color: var(--ill-text);
	background: rgba(82, 199, 163, 0.1);
	border-color: var(--ill-accent-soft);
}
.blog-pagination .page-numbers li .current {
	background: var(--ill-accent);
	border-color: var(--ill-accent);
	color: var(--ill-bg);
	font-weight: 700;
}

/* ===== Pagination archives (etudes de cas) : the_posts_pagination produit un markup different (pas de ul/li) ===== */
.archive-pagination {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 4.5rem);
	display: flex;
	justify-content: center;
}
.archive-pagination .nav-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	align-items: center;
}
.archive-pagination .page-numbers {
	display: inline-flex;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 1rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--ill-radius-sm);
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--ill-border);
	color: var(--ill-text-muted);
	font-family: var(--ill-font-display);
	font-weight: 500;
	font-size: .95rem;
	text-decoration: none;
	letter-spacing: .005em;
	transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 250ms cubic-bezier(.19, 1, .22, 1), box-shadow 250ms ease;
}
.archive-pagination a.page-numbers:hover {
	color: var(--ill-text);
	background: rgba(82, 199, 163, 0.12);
	border-color: var(--ill-accent);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -16px rgba(82, 199, 163, 0.55);
}
.archive-pagination .page-numbers.current {
	background: var(--ill-accent);
	border-color: var(--ill-accent);
	color: #124237;
	font-weight: 800;
}
.archive-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	min-width: 1.5rem;
	padding-inline: .35rem;
}
.archive-pagination .page-numbers.prev,
.archive-pagination .page-numbers.next {
	padding-inline: 1.25rem;
	gap: .45rem;
	font-weight: 600;
	color: var(--ill-text);
}
.archive-pagination .page-numbers.prev::before { content: '←'; display: inline-block; transition: transform 250ms cubic-bezier(.19, 1, .22, 1); }
.archive-pagination .page-numbers.next::after  { content: '→'; display: inline-block; transition: transform 250ms cubic-bezier(.19, 1, .22, 1); }
.archive-pagination a.page-numbers.prev:hover::before { transform: translateX(-3px); }
.archive-pagination a.page-numbers.next:hover::after  { transform: translateX(3px); }
/* Masque le titre de section accessible que WP injecte */
.archive-pagination .screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); height: 1px; width: 1px; overflow: hidden; }

.blog-empty {
	max-width: 520px;
	margin: 4rem auto;
	text-align: center;
	padding: 2.5rem 2rem;
	border-radius: var(--ill-radius);
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--ill-border);
}
.blog-empty__title {
	font-family: var(--ill-font-display);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--ill-text);
	margin-bottom: .5rem;
}
.blog-empty__lead { color: var(--ill-text-muted); margin-bottom: 1.5rem; }

/* ------ Post card (réutilisée homepage + listing + related) ------ */
.post-card {
	position: relative;
	border-radius: var(--ill-radius);
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--ill-border);
	overflow: hidden;
	transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
	display: flex;
	flex-direction: column;
}
.post-card:hover {
	transform: translateY(-4px);
	border-color: var(--ill-accent-soft);
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.post-card__link {
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.post-card__link:hover { color: inherit; }
.post-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ill-bg-3);
}
.post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 480ms ease;
}
.post-card:hover .post-card__img { transform: scale(1.04); }
.post-card__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--ill-bg-2) 0%, var(--ill-bg-3) 100%);
}
.post-card__placeholder-letter {
	font-family: var(--ill-font-display);
	font-size: clamp(3rem, 6vw, 5rem);
	font-weight: 900;
	color: var(--ill-accent);
	opacity: .35;
	line-height: 1;
}
.post-card__body {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.5rem;
	flex: 1;
}
.post-card__head {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	justify-content: space-between;
	align-items: center;
}
.post-card__cat {
	display: inline-block;
	padding: .2rem .65rem;
	border-radius: var(--ill-radius-pill);
	background: var(--ill-accent-softer);
	border: 1px solid var(--ill-accent-soft);
	color: var(--ill-accent);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.post-card__meta {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	font-size: .8125rem;
	color: var(--ill-text-faint);
}
.post-card__title {
	font-family: var(--ill-font-display);
	font-size: clamp(1.15rem, 0.9rem + 0.4vw, 1.35rem);
	font-weight: 800;
	line-height: 1.25;
	color: var(--ill-text);
	margin: 0;
	letter-spacing: -.005em;
}
.post-card__excerpt {
	color: var(--ill-text-muted);
	font-size: .9375rem;
	line-height: 1.55;
	margin: 0;
	flex: 1;
}
.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--ill-accent);
	margin-top: .25rem;
}
.post-card:hover .post-card__more { color: var(--ill-text); }

/* ------ Section "Le blog" sur la home ------ */
.home-blog {
	padding-block: var(--ill-section-y);
	background: linear-gradient(180deg, rgba(26, 88, 72, 1) 0%, rgba(18, 66, 55, 0.3) 100%);
}
.home-blog__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.home-blog__head-text { flex: 1 1 480px; }
.home-blog__head-cta { flex-shrink: 0; }
.home-blog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.25rem, 2vw, 2rem);
}
@media (max-width: 768px) {
	.home-blog__head { align-items: flex-start; }
}

/* ============================================================
   SINGLE ARTICLE — hero + layout 2 colonnes + TOC sticky
   ============================================================ */
.article-single { padding-bottom: 0; }

.article-hero {
	padding-block: clamp(7rem, 12vw, 10rem) clamp(2rem, 4vw, 3rem);
	background: linear-gradient(180deg, rgba(82, 199, 163, 0.06) 0%, rgba(26, 88, 72, 0) 100%);
	border-bottom: 1px solid var(--ill-border);
}
.article-hero__inner {
	max-width: 880px;
	margin-inline: auto;
}
.article-hero__cat {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .9rem;
	border-radius: var(--ill-radius-pill);
	background: var(--ill-accent-softer);
	border: 1px solid var(--ill-accent-soft);
	color: var(--ill-accent);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
	transition: all 160ms ease;
}
.article-hero__cat:hover {
	background: var(--ill-accent-soft);
	color: var(--ill-text);
}
.article-hero__title {
	font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0 0 1.25rem;
}
.article-hero__lead {
	font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.3rem);
	color: var(--ill-text-muted);
	line-height: 1.55;
	margin-bottom: 1.75rem;
}
.article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: center;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ill-border);
}
.article-meta__author {
	display: inline-flex;
	gap: .75rem;
	align-items: center;
}
.article-meta__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--ill-accent-soft);
}
.article-meta__author-text {
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: 1.25;
}
.article-meta__author-label {
	font-size: .75rem;
	color: var(--ill-text-faint);
}
.article-meta__author-name {
	font-weight: 600;
	color: var(--ill-text);
	font-size: .9375rem;
}
.article-meta__dates {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	font-size: .875rem;
	color: var(--ill-text-muted);
}
.article-meta__date,
.article-meta__reading {
	display: inline-flex;
	gap: .4rem;
	align-items: center;
}
.article-meta__date-label {
	color: var(--ill-text-faint);
	margin-right: .15rem;
}
.article-meta__icon { color: var(--ill-accent); flex-shrink: 0; }

.article-hero__media {
	margin: 2.5rem 0 0;
	border-radius: var(--ill-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.article-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------ Layout 2 colonnes article + sidebar sticky ------ */
.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 4vw, 4rem);
	padding-block: clamp(3rem, 5vw, 5rem);
	align-items: start;
}
.article-main {
	min-width: 0;
}
.article-prose {
	max-width: 760px;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ill-text);
}
.article-prose > * { color: var(--ill-text); }
.article-prose > p,
.article-prose > ul,
.article-prose > ol,
.article-prose > blockquote {
	color: var(--ill-text);
	max-width: 720px;
}
.article-prose p { margin: 0 0 1.25em; line-height: 1.75; }
.article-prose h2 {
	font-size: clamp(1.5rem, 1.1rem + 1vw, 1.85rem);
	font-weight: 800;
	letter-spacing: -.005em;
	margin: 2.25em 0 .75em;
	scroll-margin-top: 100px;
	position: relative;
	padding-left: 1.5rem;
}
.article-prose h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: .35em;
	width: 6px;
	height: 1em;
	border-radius: 3px;
	background: var(--ill-accent);
}
.article-prose h3 {
	font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.35rem);
	font-weight: 700;
	margin: 1.75em 0 .5em;
	scroll-margin-top: 100px;
	color: var(--ill-text);
}
.article-prose h4 {
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 1.5em 0 .35em;
	color: var(--ill-text);
}
.article-prose ul,
.article-prose ol {
	padding-left: 1.5em;
	margin: 0 0 1.5em;
}
.article-prose li { margin-bottom: .5em; line-height: 1.65; }
.article-prose li::marker { color: var(--ill-accent); }
.article-prose a {
	color: var(--ill-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 160ms ease;
}
.article-prose a:hover { color: var(--ill-text); }
.article-prose strong { color: var(--ill-text); font-weight: 700; }
.article-prose blockquote {
	margin: 2em 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--ill-accent);
	background: rgba(82, 199, 163, 0.05);
	border-radius: 0 var(--ill-radius-sm) var(--ill-radius-sm) 0;
	font-style: italic;
	color: var(--ill-text);
}
.article-prose blockquote p:last-child { margin-bottom: 0; }
.article-prose img,
.article-prose figure {
	margin: 2em 0;
	border-radius: var(--ill-radius);
	overflow: hidden;
}
.article-prose figcaption {
	font-size: .875rem;
	color: var(--ill-text-faint);
	text-align: center;
	margin-top: .5em;
}
.article-prose code {
	font-family: var(--ill-font-mono);
	font-size: .9em;
	padding: .15em .4em;
	border-radius: 4px;
	background: rgba(82, 199, 163, 0.08);
	color: var(--ill-accent);
}
.article-prose pre {
	font-family: var(--ill-font-mono);
	background: var(--ill-bg-3);
	padding: 1.25rem;
	border-radius: var(--ill-radius-sm);
	overflow-x: auto;
	border: 1px solid var(--ill-border);
	font-size: .875rem;
	line-height: 1.6;
}
.article-prose pre code { background: none; padding: 0; color: var(--ill-text); }
.article-prose hr {
	border: 0;
	height: 1px;
	background: var(--ill-border);
	margin: 2.5em 0;
}
.article-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: .9375rem;
}
.article-prose th,
.article-prose td {
	padding: .75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--ill-border);
}
.article-prose th {
	font-weight: 700;
	color: var(--ill-text);
	background: rgba(255,255,255,0.03);
}

/* ------ CTA in-article (bande verte) ------ */
.article-cta {
	margin: 2.5em 0;
	padding: 2rem;
	border-radius: var(--ill-radius);
	background: linear-gradient(135deg, rgba(82, 199, 163, 0.12) 0%, rgba(82, 199, 163, 0.04) 100%);
	border: 1px solid var(--ill-accent-soft);
	text-align: center;
}
/* Le bouton .cta-pill rendu DANS .article-prose hérite par défaut de color:var(--ill-accent)
   + underline → texte mint sur fond mint = invisible. On force les couleurs des pills. */
.article-prose a.cta-pill,
.article-main a.cta-pill,
.article-sidebar a.cta-pill {
	text-decoration: none;
	color: var(--ill-bg);
}
.article-prose a.cta-pill--ghost,
.article-main a.cta-pill--ghost,
.article-sidebar a.cta-pill--ghost { color: var(--ill-text); }
.article-prose a.cta-pill:hover,
.article-main a.cta-pill:hover,
.article-sidebar a.cta-pill:hover { text-decoration: none; }
.article-prose a.cta-pill--mint:hover,
.article-main a.cta-pill--mint:hover,
.article-sidebar a.cta-pill--mint:hover { color: var(--ill-bg); }
.article-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--ill-accent);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	margin-bottom: .75rem;
	text-transform: uppercase;
}
.article-cta__title {
	font-family: var(--ill-font-display);
	font-size: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
	font-weight: 800;
	color: var(--ill-text);
	margin: 0 0 .5rem;
}
.article-cta__lead {
	color: var(--ill-text-muted);
	margin-bottom: 1.25rem;
	font-size: .9375rem;
	line-height: 1.55;
	max-width: 540px;
	margin-inline: auto;
}

/* ------ Footer article : tags + author card ------ */
.article-footer {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--ill-border);
	max-width: 760px;
}
.article-footer__tags {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	margin-bottom: 2rem;
	font-size: .9375rem;
	color: var(--ill-text-muted);
	flex-wrap: wrap;
}
.article-footer__tag {
	padding: .35rem .85rem;
	border-radius: var(--ill-radius-pill);
	background: var(--ill-accent-softer);
	border: 1px solid var(--ill-accent-soft);
	color: var(--ill-accent);
	font-size: .8125rem;
	font-weight: 600;
}
.article-footer__tag:hover {
	background: var(--ill-accent);
	color: var(--ill-bg);
}

.article-author-card {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 1.25rem;
	padding: 1.75rem;
	border-radius: var(--ill-radius);
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--ill-border);
}
.article-author-card__avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--ill-accent-soft);
}
.article-author-card__label {
	display: inline-block;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ill-accent);
	margin-bottom: .25rem;
}
.article-author-card__name {
	font-family: var(--ill-font-display);
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--ill-text);
	margin: 0 0 .5rem;
}
.article-author-card__bio {
	color: var(--ill-text-muted);
	font-size: .9375rem;
	line-height: 1.55;
	margin: 0;
}

/* ------ Sidebar sticky : TOC + CTA + Share ------ */
.article-sidebar {
	position: relative;
}
.article-sidebar__sticky {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-height: calc(100vh - 120px);
	overflow: hidden;
}

.toc {
	padding: 1.5rem;
	border-radius: var(--ill-radius);
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--ill-border);
	/* Seule la TOC scrolle quand le contenu dépasse — CTA+Share toujours visibles en bas */
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.toc__list {
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--ill-border) transparent;
	padding-right: .25rem;
}
.toc__list::-webkit-scrollbar { width: 4px; }
.toc__list::-webkit-scrollbar-thumb { background: var(--ill-border); border-radius: 2px; }
.toc__list::-webkit-scrollbar-thumb:hover { background: var(--ill-accent-soft); }
.sidebar-cta,
.sidebar-share { flex: 0 0 auto; }
.toc__label {
	font-family: var(--ill-font-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ill-accent);
	margin: 0 0 1rem;
}
.toc__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	counter-reset: toc;
	flex: 1 1 auto;
	min-height: 0;
}
.toc__item--h3 { padding-left: 1.5rem; }
.toc__link {
	display: flex;
	gap: .65rem;
	padding: .5rem .65rem;
	border-radius: var(--ill-radius-sm);
	color: var(--ill-text-muted);
	font-size: .875rem;
	line-height: 1.4;
	transition: all 160ms ease;
	border-left: 2px solid transparent;
}
.toc__link:hover {
	background: rgba(82, 199, 163, 0.06);
	color: var(--ill-text);
}
.toc__link.is-active {
	color: var(--ill-accent);
	background: rgba(82, 199, 163, 0.08);
	border-left-color: var(--ill-accent);
	font-weight: 600;
}
.toc__num {
	font-family: var(--ill-font-mono);
	font-size: .75rem;
	color: var(--ill-text-faint);
	flex-shrink: 0;
}
.toc__link.is-active .toc__num { color: var(--ill-accent); }
.toc__text { flex: 1; }
.toc__item--h3 .toc__num { display: none; }

.sidebar-cta {
	padding: 1.5rem;
	border-radius: var(--ill-radius);
	background: linear-gradient(135deg, rgba(82, 199, 163, 0.14) 0%, rgba(82, 199, 163, 0.04) 100%);
	border: 1px solid var(--ill-accent-soft);
}
.sidebar-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--ill-accent);
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: .5rem;
}
.sidebar-cta__title {
	font-family: var(--ill-font-display);
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--ill-text);
	margin: 0 0 .5rem;
	line-height: 1.25;
}
.sidebar-cta__desc {
	font-size: .8125rem;
	color: var(--ill-text-muted);
	margin: 0 0 1rem;
	line-height: 1.5;
}

.sidebar-share { padding-top: 0; }
.sidebar-share__label {
	font-family: var(--ill-font-display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ill-text-faint);
	margin: 0 0 .75rem;
}
.sidebar-share__list {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.sidebar-share__link {
	display: inline-flex;
	gap: .65rem;
	align-items: center;
	padding: .55rem .8rem;
	border-radius: var(--ill-radius-sm);
	border: 1px solid var(--ill-border);
	background: rgba(255,255,255,0.02);
	color: var(--ill-text-muted);
	font-size: .8125rem;
	font-weight: 500;
	transition: all 160ms ease;
	text-align: left;
	width: 100%;
}
button.sidebar-share__link { font-family: inherit; }
.sidebar-share__link:hover {
	color: var(--ill-text);
	border-color: var(--ill-accent-soft);
	background: rgba(82, 199, 163, 0.06);
}
.sidebar-share__link.is-copied {
	color: var(--ill-accent);
	border-color: var(--ill-accent);
}

/* ------ Related articles ------ */
.article-related {
	padding-block: clamp(3rem, 5vw, 5rem);
	border-top: 1px solid var(--ill-border);
}
.article-related__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.article-related__head .hero__eyebrow { margin-bottom: 1rem; }
.article-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.25rem, 2vw, 2rem);
}

.cta-final--article {
	background: var(--ill-bg-2);
}

/* ------ Responsive : sidebar collapses below 1024px ------ */
@media (max-width: 1023px) {
	.article-layout {
		grid-template-columns: 1fr;
	}
	.article-sidebar__sticky {
		position: static;
		max-height: none;
		overflow: visible;
	}
	.toc {
		order: -1;
	}
}
@media (max-width: 640px) {
	.article-hero__inner { padding-inline: 0; }
	.article-meta { gap: 1rem; }
	.article-meta__dates { gap: .75rem 1rem; font-size: .8125rem; }
	.article-author-card {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.article-author-card__avatar { margin-inline: auto; }
	.home-blog__head-cta { display: none; }
}

/* === 2026-05-16 - Offres V2 (Agence/Studio refonte) === */
/* Layout en grille : nom sur ligne 1, prix sur ligne 2 aligne a gauche, fleche sur la droite verticalement centree */
.mega-menu__links li a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: .75rem;
	row-gap: .25rem;
}
.mega-menu__price {
	grid-column: 1 / 2;
	justify-self: start;
	margin-left: 0;
	padding: .15rem .55rem;
	font-size: .72rem;
	font-weight: 600;
	color: var(--mint, #7be7c2);
	background: rgba(123, 231, 194, .12);
	border-radius: 999px;
	letter-spacing: .01em;
	white-space: nowrap;
}
.mega-menu__arrow {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
}
.mega-menu__links li a:hover .mega-menu__price { background: rgba(123, 231, 194, .22); }
@media (max-width: 900px) { .mega-menu__price { font-size: .7rem; padding: .1rem .45rem; } }

.pricing-studio__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-left: auto; margin-right: auto; }
@media (max-width: 800px) { .pricing-studio__grid--two { grid-template-columns: 1fr; } }

.pricing-studio--alt { background: rgba(123, 231, 194, .04); padding-top: 6rem; padding-bottom: 6rem; }
.pricing-studio--alt .pricing-card { background: #fff; }

.page-svc--agence .pricing-studio__grid,
.page-svc--studio .pricing-studio__grid--two { gap: 1.5rem; }

/* === offer-bridge bottom-funnel (landing SEO → offres) === */
.offer-bridge { padding: 5rem 0; background: rgba(123, 231, 194, .04); text-align: center; }
.offer-bridge .section-features__title { margin-top: .8rem; }
.offer-bridge .section-features__lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.offer-bridge__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.offer-bridge__pill { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 1.1rem 1.5rem; background: #fff; border: 1px solid rgba(26, 88, 72, .08); border-radius: 1rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; min-width: 200px; }
.offer-bridge__pill:hover { transform: translateY(-3px); border-color: rgba(123, 231, 194, .6); box-shadow: 0 8px 24px -12px rgba(26, 88, 72, .15); }
.offer-bridge__pill strong { font-size: 1rem; color: var(--ink, #0e1e18); display: block; }
.offer-bridge__pill span { font-size: .9rem; color: var(--mint-dark, #1a8467); font-weight: 600; margin-top: .3rem; }
.offer-bridge__pill--featured { border-color: rgba(123, 231, 194, .6); background: linear-gradient(180deg, rgba(123, 231, 194, .08), #fff); }
.offer-bridge__cta-row { margin-top: 3rem; }
@media (max-width: 720px) {
  .offer-bridge__pills { flex-direction: column; align-items: stretch; }
  .offer-bridge__pill { width: 100%; }
}

/* === 2026-05-16 L2 - Fix pricing prix énormes + mega menu raccourci === */
.pricing-card__price {
  font-size: clamp(2rem, 1.5vw + 1.4rem, 3.25rem) !important;
  white-space: nowrap;
  flex-wrap: wrap;
  align-items: baseline;
  line-height: 1.05;
  margin: .75rem 0 .35rem;
}
.pricing-card__price span {
  font-size: .78rem !important;
  white-space: normal;
  display: inline;
  flex-basis: 100%;
  margin-top: .25rem;
}
@media (max-width: 900px) {
  .pricing-card__price {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  }
}

/* Mega menu links : padding propre sur l'item (le layout grid est defini plus haut) */
.mega-menu__links li a {
  line-height: 1.35;
  padding: .55rem 0;
}

/* === 2026-05-16 L2 - Fix bouton CTA cta-pill texte caché === */
.cta-pill {
  color: var(--ill-bg, #0e1e18) !important;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.cta-pill--mint,
.cta-pill--mint:hover,
.cta-pill--mint:focus,
.cta-pill--mint:visited {
  color: var(--ill-bg, #0e1e18) !important;
}
.cta-pill--ghost,
.cta-pill--ghost:hover,
.cta-pill--ghost:focus,
.cta-pill--ghost:visited {
  color: var(--ill-text, #f5f5f5) !important;
}
.cta-pill > .dot {
  flex-shrink: 0;
}
/* Pour les CTA dans cta-final spécifiquement (screen Louis bouton caché) */
.cta-final .cta-pill {
  color: var(--ill-bg, #0e1e18) !important;
}

/* === 2026-05-16 L2 - Carrousel cyclorama section home === */
.cyclo-carousel {
  position: relative;
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  background: rgba(26, 88, 72, .04);
}
.cyclo-carousel__track {
  display: flex;
  transition: transform .6s cubic-bezier(.2, .9, .2, 1);
  width: 200%;
}
.cyclo-carousel__slide {
  flex: 0 0 12.5%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.cyclo-carousel__slide .cyclo-carousel__img,
.cyclo-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cyclo-carousel__dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 2;
}
.cyclo-carousel__dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.cyclo-carousel__dot:hover { background: rgba(255, 255, 255, .8); }
.cyclo-carousel__dot.is-active {
  background: var(--ill-accent, #7be7c2);
  transform: scale(1.3);
}
@media (max-width: 800px) {
  .cyclo-carousel__slide { aspect-ratio: 4 / 3; }
}

/* === 2026-05-16 L2 - Section avis : pas de pause au hover + meilleur avatar === */
.testimonials__row:hover .testimonials__track {
  animation-play-state: running !important;
}
.testimonial-card__avatar {
  background: linear-gradient(135deg, var(--ill-accent, #7be7c2) 0%, #4ec9a0 100%);
  color: var(--ill-bg, #0e1e18);
  font-weight: 700;
  font-size: .95rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px -2px rgba(123, 231, 194, .4);
  flex: 0 0 2.5rem;
}
/* Variante photo : on garde le rond, la photo remplit, fine bordure turquoise */
.testimonial-card__avatar--photo {
  background: var(--ill-bg);
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--ill-accent);
  box-shadow: 0 2px 8px -2px rgba(82, 199, 163, .35);
}
.testimonial-card__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
/* Étoiles plus visibles */
.testimonial-card__stars {
  color: #f5b800;
  letter-spacing: .1em;
  font-size: 1rem;
}

/* === 2026-05-16 L2 - VSL placeholder + animated shape backgrounds (podx-inspiré) === */
.vsl-section {
  padding: 5rem 0 4rem;
  position: relative;
}
.vsl-section__inner { text-align: center; }
.vsl-section__title {
  font-family: var(--ill-font-display, 'Migra', serif);
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  font-weight: 800;
  margin: .8rem 0 .5rem;
  letter-spacing: -.02em;
}
.vsl-section__lead {
  font-size: 1.05rem;
  color: var(--ill-text-faint, #5a6a64);
  margin: 0 auto 2.5rem;
  max-width: 580px;
}
.vsl-section__video {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(123, 231, 194, .08), rgba(26, 88, 72, .08));
  box-shadow: 0 24px 60px -20px rgba(26, 88, 72, .25);
}
.vsl-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--ill-text, #f5f5f5);
  background: linear-gradient(135deg, rgba(26, 88, 72, .92), rgba(26, 88, 72, .78));
}
.vsl-placeholder__icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--ill-accent, #7be7c2);
  color: var(--ill-bg, #0e1e18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .5rem;
  box-shadow: 0 12px 32px -12px rgba(123, 231, 194, .6);
  transition: transform .25s ease;
}
.vsl-placeholder:hover .vsl-placeholder__icon {
  transform: scale(1.08);
}
.vsl-placeholder__title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.vsl-placeholder__hint {
  font-size: .9rem;
  color: rgba(245, 245, 245, .65);
  max-width: 320px;
  text-align: center;
}

/* === Forme animée fond derrière sections clés (variation visuelle podx-style) === */
.differentiator,
.pricing-studio,
.section-features {
  position: relative;
  overflow: hidden;
}
.differentiator::before,
.pricing-studio::before {
  content: '';
  position: absolute;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(123, 231, 194, .12), transparent 70%);
  top: -8rem;
  right: -10rem;
  pointer-events: none;
  animation: blob-float 18s ease-in-out infinite alternate;
}
.pricing-studio::after {
  content: '';
  position: absolute;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(26, 88, 72, .05), transparent 70%);
  bottom: -8rem;
  left: -8rem;
  pointer-events: none;
  animation: blob-float 22s ease-in-out infinite alternate-reverse;
}
@keyframes blob-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2rem, 1.5rem) scale(1.05); }
  100% { transform: translate(-1.5rem, -1rem) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .differentiator::before, .pricing-studio::before, .pricing-studio::after { animation: none; }
}

/* Container relative + z-index pour contenu au-dessus du blob */
.differentiator > .container,
.pricing-studio > .container { position: relative; z-index: 1; }

/* ==========================================================================
   L3 — 2026-05-16 — Refonte cyclo-stage smooth + benefit layouts + UI polish
   ========================================================================== */

/* === Cyclo-stage : refonte smooth grand format avec ken-burns + fade === */
.cyclo-stage {
	position: relative;
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
}
.cyclo-stage__frame {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 1.5rem;
	overflow: hidden;
	background: #102a23;
	box-shadow: 0 30px 80px -30px rgba(0,0,0,.5), 0 0 0 1px rgba(123,231,194,.08);
}
.cyclo-stage__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1100ms cubic-bezier(.4, 0, .2, 1);
	will-change: opacity;
}
.cyclo-stage__slide.is-active {
	opacity: 1;
	z-index: 2;
}
.cyclo-stage__img,
.cyclo-stage__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	display: block;
	transform: none;
	transition: none;
}
.cyclo-stage__slide.is-active .cyclo-stage__img,
.cyclo-stage__slide.is-active img {
	transform: none;
}
.cyclo-stage__gradient {
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(to top, rgba(10,22,18,.85) 0%, rgba(10,22,18,.3) 60%, transparent 100%);
	z-index: 3;
	pointer-events: none;
}
.cyclo-stage__caption {
	position: absolute;
	left: 1.5rem;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 4;
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(.5rem);
	transition: opacity 600ms ease, transform 600ms ease;
	transition-delay: 300ms;
}
.cyclo-stage__slide.is-active .cyclo-stage__caption {
	opacity: 1;
	transform: translateY(0);
}
.cyclo-stage__controls {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
}
.cyclo-stage__counter {
	font-family: var(--ill-font-body);
	font-size: .85rem;
	font-weight: 600;
	color: var(--ill-text-muted, rgba(245,245,245,.65));
	letter-spacing: .08em;
	display: flex;
	gap: .35rem;
	align-items: baseline;
	flex-shrink: 0;
	min-width: 3rem;
}
.cyclo-stage__counter-sep { opacity: .4; }
.cyclo-stage__counter [data-current] {
	color: var(--ill-accent, #7be7c2);
	font-size: 1.1rem;
	font-weight: 700;
}
.cyclo-stage__progress {
	flex: 1;
	height: 2px;
	background: rgba(245,245,245,.1);
	border-radius: 999px;
	overflow: hidden;
}
.cyclo-stage__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ill-accent, #7be7c2);
	border-radius: 999px;
	transition: width 80ms linear;
}
.cyclo-stage__dots {
	display: flex;
	gap: .4rem;
	flex-shrink: 0;
}
.cyclo-stage__dot {
	width: .5rem;
	height: .5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(245,245,245,.25);
	cursor: pointer;
	transition: background 250ms ease, transform 250ms ease;
}
.cyclo-stage__dot:hover { background: rgba(245,245,245,.5); }
.cyclo-stage__dot.is-active {
	background: var(--ill-accent, #7be7c2);
	transform: scale(1.3);
}

@media (max-width: 900px) {
	.cyclo-stage__frame { aspect-ratio: 4 / 3; }
	.cyclo-stage__caption { font-size: .85rem; left: 1rem; bottom: 1rem; right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.cyclo-stage__slide { transition: none; }
	.cyclo-stage__img, .cyclo-stage__slide img { transition: none; transform: none; }
	.cyclo-stage__slide.is-active .cyclo-stage__img,
	.cyclo-stage__slide.is-active img { transform: none; }
}

/* === Pages benefit / hub / catalogue === */
/* Padding-top genereux pour matcher la respiration du hero home (le header pill flottant fait ~80px, on laisse au moins 80px de plus avant le titre) */
.page-hero {
	padding: clamp(8rem, 12vw, 11rem) 0 clamp(3rem, 5vw, 4.5rem);
	position: relative;
}
.page-hero__inner { text-align: center; max-width: 60rem; margin-inline: auto; }
.page-hero__title {
	font-family: var(--ill-font-display);
	font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
	line-height: 1.05;
	margin: 1rem 0 1.5rem;
	letter-spacing: -.02em;
}
.page-hero__lead {
	font-size: clamp(1.05rem, .6vw + .9rem, 1.3rem);
	line-height: 1.55;
	color: var(--ill-text-muted, rgba(245,245,245,.7));
	max-width: 45rem;
	margin: 0 auto 2.5rem;
}
.page-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	justify-content: center;
}

.page-hero--benefit { padding: clamp(8rem, 12vw, 11rem) 0 3rem; }
.page-hero--catalogue { padding: clamp(8rem, 12vw, 11rem) 0 3rem; }

/* Hub /pourquoi-faire-du-podcast/ */
.benefits-intro {
	padding: 2rem 0 4rem;
}
.benefits-intro__inner {
	max-width: 48rem;
	margin: 0 auto;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--ill-text);
}
.benefits-intro__inner p { margin: 0 0 1.25rem; }
.benefits-intro__inner h2 {
	font-family: var(--ill-font-display);
	font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
	margin: 2.5rem 0 1rem;
	line-height: 1.2;
}

.benefits-grid {
	padding: 5rem 0 6rem;
	background: linear-gradient(to bottom, transparent, rgba(123,231,194,.03) 40%, transparent);
}
.benefits-grid__head {
	text-align: center;
	max-width: 50rem;
	margin: 0 auto 3.5rem;
}
.benefits-grid__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1.5rem;
}
.benefit-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 2rem 1.75rem 2.5rem;
	border-radius: 1.25rem;
	background: rgba(18, 42, 35, .55);
	border: 1px solid rgba(123, 231, 194, .12);
	color: var(--ill-text);
	text-decoration: none;
	transition: border-color 300ms ease, transform 300ms ease, background 300ms ease;
	overflow: hidden;
}
.benefit-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 90% 0%, rgba(123,231,194,.1), transparent 60%);
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
}
.benefit-card:hover {
	border-color: rgba(123, 231, 194, .35);
	transform: translateY(-3px);
	background: rgba(20, 48, 40, .7);
}
.benefit-card:hover::before { opacity: 1; }
.benefit-card__num {
	font-family: var(--ill-font-display);
	font-size: 2.5rem;
	color: var(--ill-accent, #7be7c2);
	opacity: .35;
	line-height: 1;
}
.benefit-card__family {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--ill-text-muted, rgba(245,245,245,.5));
}
.benefit-card__eyebrow {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ill-accent, #7be7c2);
}
.benefit-card__title {
	font-family: var(--ill-font-display);
	font-size: 1.4rem;
	line-height: 1.2;
	margin: 0;
	color: #fff;
}
.benefit-card__desc {
	font-size: .95rem;
	line-height: 1.55;
	color: var(--ill-text-muted, rgba(245,245,245,.7));
	margin: 0;
	flex: 1;
}
.benefit-card__cta {
	font-size: .9rem;
	font-weight: 600;
	color: var(--ill-accent, #7be7c2);
	display: inline-flex;
	gap: .35rem;
	align-items: center;
	margin-top: .75rem;
}
.benefit-card__cta span {
	transition: transform 200ms ease;
	display: inline-block;
}
.benefit-card:hover .benefit-card__cta span { transform: translateX(4px); }

/* Page benefit (5 sous-pages) */
.benefit-callout {
	padding: 0 0 3rem;
}
.benefit-callout__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 3rem;
	align-items: center;
	padding: 2.5rem;
	border-radius: 1.5rem;
	background: linear-gradient(135deg, rgba(123,231,194,.08) 0%, rgba(18,42,35,.4) 100%);
	border: 1px solid rgba(123,231,194,.15);
	max-width: 72rem;
	margin: 0 auto;
}
.benefit-callout__stat {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.benefit-callout__num {
	font-family: var(--ill-font-display);
	font-size: clamp(2.5rem, 3vw + 1.5rem, 4rem);
	color: var(--ill-accent, #7be7c2);
	line-height: 1;
	font-weight: 700;
}
.benefit-callout__label {
	font-size: .95rem;
	color: var(--ill-text-muted, rgba(245,245,245,.7));
	line-height: 1.45;
}
.benefit-callout__copy p {
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--ill-text);
	margin: 0;
}
@media (max-width: 700px) {
	.benefit-callout__inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem; }
}

.benefit-body {
	padding: 4rem 0;
}
.benefit-body__inner {
	display: grid;
	grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
	gap: 4rem;
	max-width: 78rem;
}
.benefit-body__content {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--ill-text);
}
.benefit-body__content p {
	margin: 0 0 1.4rem;
	max-width: 38rem;
}
.benefit-body__content h2 {
	font-family: var(--ill-font-display);
	font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
	line-height: 1.2;
	margin: 3rem 0 1.25rem;
	position: relative;
	padding-left: 1rem;
}
.benefit-body__content h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: .35em;
	width: .25rem;
	height: 1.2em;
	background: var(--ill-accent, #7be7c2);
	border-radius: 999px;
}
.benefit-body__content h3 {
	font-family: var(--ill-font-display);
	font-size: 1.3rem;
	line-height: 1.3;
	margin: 2.25rem 0 .85rem;
}
.benefit-body__content ul {
	margin: 0 0 1.5rem;
	padding-left: 1.4rem;
}
.benefit-body__content li {
	margin-bottom: .5rem;
	line-height: 1.6;
}
.benefit-body__content strong { color: #fff; }
.benefit-body__content a {
	color: var(--ill-accent, #7be7c2);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.benefit-body__aside {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	position: sticky;
	top: 6rem;
	align-self: start;
}
.benefit-aside-card {
	padding: 1.75rem;
	border-radius: 1.25rem;
	background: #122a23;
	border: 1px solid rgba(123,231,194,.18);
	display: flex;
	flex-direction: column;
	gap: .85rem;
}
.benefit-aside-card--alt {
	background: rgba(18,42,35,.4);
}
.benefit-aside-card__eyebrow {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ill-accent, #7be7c2);
}
.benefit-aside-card__title {
	font-family: var(--ill-font-display);
	font-size: 1.2rem;
	line-height: 1.3;
	margin: 0;
	color: #fff;
}
.benefit-aside-card__desc {
	font-size: .9rem;
	line-height: 1.55;
	color: var(--ill-text-muted, rgba(245,245,245,.7));
	margin: 0;
}
.benefit-aside-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.benefit-aside-list li {
	font-size: .9rem;
	line-height: 1.45;
	color: var(--ill-text);
	display: flex;
	flex-direction: column;
	padding-block: .4rem;
	border-top: 1px solid rgba(123,231,194,.1);
}
.benefit-aside-list li:first-child { border-top: 0; padding-top: 0; }
.benefit-aside-list strong {
	color: var(--ill-accent, #7be7c2);
	font-weight: 700;
	font-size: 1rem;
}
.benefit-aside-card__link {
	color: var(--ill-accent, #7be7c2);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	gap: .35rem;
	align-items: center;
}
.benefit-aside-card__link span {
	transition: transform 200ms ease;
	display: inline-block;
}
.benefit-aside-card__link:hover span { transform: translateX(4px); }

@media (max-width: 900px) {
	.benefit-body__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.benefit-body__aside { position: static; }
}

.benefit-siblings {
	padding: 4rem 0 5rem;
	background: rgba(123,231,194,.03);
}
.benefit-siblings__head {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto 2.5rem;
}
.benefit-siblings__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: .8rem;
	max-width: 60rem;
	margin: 0 auto;
}
.benefit-sibling-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: rgba(18,42,35,.5);
	border: 1px solid rgba(123,231,194,.12);
	border-radius: .85rem;
	color: var(--ill-text);
	text-decoration: none;
	font-weight: 500;
	transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.benefit-sibling-card:hover {
	border-color: rgba(123,231,194,.35);
	background: rgba(20,48,40,.7);
	transform: translateY(-2px);
}
.benefit-sibling-card__arrow {
	color: var(--ill-accent, #7be7c2);
	transition: transform 200ms ease;
	display: inline-block;
}
.benefit-sibling-card:hover .benefit-sibling-card__arrow { transform: translateX(4px); }

/* Catalogue */
.catalogue-tags {
	padding: 1.5rem 0 3rem;
}
.catalogue-tags__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .65rem 1.25rem;
}
.catalogue-tags__label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ill-accent, #7be7c2);
}
.catalogue-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}
.catalogue-tag {
	display: inline-flex;
	padding: .35rem .8rem;
	border-radius: 999px;
	background: rgba(123,231,194,.08);
	border: 1px solid rgba(123,231,194,.18);
	font-size: .82rem;
	font-weight: 500;
	color: var(--ill-text);
}

.catalogue-body {
	padding: 3rem 0 5rem;
}
.catalogue-body__inner {
	display: grid;
	grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
	gap: 4rem;
	max-width: 78rem;
}
.catalogue-body__content {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--ill-text);
}
.catalogue-body__content p { margin: 0 0 1.4rem; max-width: 38rem; }
.catalogue-body__content h2 {
	font-family: var(--ill-font-display);
	font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
	line-height: 1.2;
	margin: 3rem 0 1.25rem;
	position: relative;
	padding-left: 1rem;
}
.catalogue-body__content h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: .35em;
	width: .25rem;
	height: 1.2em;
	background: var(--ill-accent, #7be7c2);
	border-radius: 999px;
}
.catalogue-body__content ul {
	margin: 0 0 1.5rem;
	padding-left: 1.4rem;
}
.catalogue-body__content li { margin-bottom: .5rem; line-height: 1.6; }
.catalogue-body__content strong { color: #fff; }
.catalogue-body__aside {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	position: sticky;
	top: 6rem;
	align-self: start;
}
@media (max-width: 900px) {
	.catalogue-body__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.catalogue-body__aside { position: static; }
}

/* === Mega menu : nettoyage anciennes vars + ajustement padding feature === */
.mega-menu--narrow .mega-menu__layout { grid-template-columns: 1fr; }

/* Override styles spacing pour mega menu plus aéré quand 2 cols + feature */
.mega-menu__nav--cols {
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

/* Page sections containers wider */
.page-pourquoi .container,
.page-benefit .container,
.page-catalogue .container { max-width: 78rem; }


/* ==========================================================================
   L3 (suite) - 2026-05-16 - Refonte offer-bridge en cards riches avec bullets
   Remplace les pills plates par des cards lisibles + différenciantes
   ========================================================================== */

.offer-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: 1.25rem;
	margin-top: 2.5rem;
	max-width: 72rem;
	margin-inline: auto;
	text-align: left;
}

.offer-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.75rem 1.5rem 1.5rem;
	border-radius: 1.25rem;
	background: rgba(18, 42, 35, .55);
	border: 1px solid rgba(123, 231, 194, .14);
	color: var(--ill-text, #f5f5f5);
	text-decoration: none;
	transition: transform 280ms cubic-bezier(.2, .8, .2, 1), border-color 280ms ease, background 280ms ease, box-shadow 280ms ease;
	overflow: hidden;
	min-height: 100%;
}
.offer-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 0%, rgba(123, 231, 194, .12), transparent 65%);
	opacity: 0;
	transition: opacity 280ms ease;
	pointer-events: none;
}
.offer-card:hover {
	transform: translateY(-4px);
	border-color: rgba(123, 231, 194, .38);
	background: rgba(20, 48, 40, .75);
	box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .55);
}
.offer-card:hover::before { opacity: 1; }

.offer-card--featured {
	background: linear-gradient(160deg, rgba(123, 231, 194, .14) 0%, rgba(18, 42, 35, .65) 100%);
	border-color: rgba(123, 231, 194, .42);
	box-shadow: 0 12px 35px -22px rgba(123, 231, 194, .35);
}
.offer-card--featured::after {
	content: 'Le plus choisi';
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ill-bg, #0e1e18);
	background: var(--ill-accent, #7be7c2);
	padding: .3rem .6rem;
	border-radius: 999px;
	z-index: 2;
}

.offer-card__head {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.offer-card__name {
	font-family: var(--ill-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	display: block;
}
.offer-card__price {
	font-size: .9rem;
	font-weight: 600;
	color: var(--ill-accent, #7be7c2);
	letter-spacing: .01em;
}

.offer-card__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	flex: 1;
}
.offer-card__list li {
	position: relative;
	padding-left: 1.35rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--ill-text-muted, rgba(245, 245, 245, .8));
}
.offer-card__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--ill-accent, #7be7c2);
	opacity: .65;
}

.offer-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--ill-accent, #7be7c2);
	padding-top: .5rem;
	border-top: 1px solid rgba(123, 231, 194, .12);
}
.offer-card__cta span {
	transition: transform 200ms ease;
	display: inline-block;
}
.offer-card:hover .offer-card__cta span { transform: translateX(4px); }

@media (max-width: 700px) {
	.offer-cards-grid { gap: 1rem; }
	.offer-card { padding: 1.5rem 1.25rem 1.25rem; }
}

/* offer-bridge fond plus sombre cohérent avec les cards */
.offer-bridge { background: transparent !important; padding: 5rem 0 !important; }
.offer-bridge .section-features__title { color: #fff; }


/* ==========================================================================
   L3 (suite) - 2026-05-16 - Refonte offer-bridge en cards riches avec bullets
   Remplace les pills plates par des cards lisibles + différenciantes
   ========================================================================== */

.offer-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: 1.25rem;
	margin-top: 2.5rem;
	max-width: 72rem;
	margin-inline: auto;
	text-align: left;
}

.offer-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.75rem 1.5rem 1.5rem;
	border-radius: 1.25rem;
	background: rgba(18, 42, 35, .55);
	border: 1px solid rgba(123, 231, 194, .14);
	color: var(--ill-text, #f5f5f5);
	text-decoration: none;
	transition: transform 280ms cubic-bezier(.2, .8, .2, 1), border-color 280ms ease, background 280ms ease, box-shadow 280ms ease;
	overflow: hidden;
	min-height: 100%;
}
.offer-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 0%, rgba(123, 231, 194, .12), transparent 65%);
	opacity: 0;
	transition: opacity 280ms ease;
	pointer-events: none;
}
.offer-card:hover {
	transform: translateY(-4px);
	border-color: rgba(123, 231, 194, .38);
	background: rgba(20, 48, 40, .75);
	box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .55);
}
.offer-card:hover::before { opacity: 1; }

.offer-card--featured {
	background: linear-gradient(160deg, rgba(123, 231, 194, .14) 0%, rgba(18, 42, 35, .65) 100%);
	border-color: rgba(123, 231, 194, .42);
	box-shadow: 0 12px 35px -22px rgba(123, 231, 194, .35);
}
.offer-card--featured::after {
	content: 'Le plus choisi';
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ill-bg, #0e1e18);
	background: var(--ill-accent, #7be7c2);
	padding: .3rem .6rem;
	border-radius: 999px;
	z-index: 2;
}

.offer-card__head {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.offer-card__name {
	font-family: var(--ill-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	display: block;
}
.offer-card__price {
	font-size: .9rem;
	font-weight: 600;
	color: var(--ill-accent, #7be7c2);
	letter-spacing: .01em;
}

.offer-card__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	flex: 1;
}
.offer-card__list li {
	position: relative;
	padding-left: 1.35rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--ill-text-muted, rgba(245, 245, 245, .8));
}
.offer-card__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--ill-accent, #7be7c2);
	opacity: .65;
}

.offer-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--ill-accent, #7be7c2);
	padding-top: .5rem;
	border-top: 1px solid rgba(123, 231, 194, .12);
}
.offer-card__cta span {
	transition: transform 200ms ease;
	display: inline-block;
}
.offer-card:hover .offer-card__cta span { transform: translateX(4px); }

@media (max-width: 700px) {
	.offer-cards-grid { gap: 1rem; }
	.offer-card { padding: 1.5rem 1.25rem 1.25rem; }
}

/* offer-bridge fond plus sombre cohérent avec les cards */
.offer-bridge { background: transparent !important; padding: 5rem 0 !important; }
.offer-bridge .section-features__title { color: #fff; }


/* ==========================================================================
   L3 (suite) - 2026-05-16 - Refonte offer-bridge en cards riches avec bullets
   Remplace les pills plates par des cards lisibles + différenciantes
   ========================================================================== */

.offer-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: 1.25rem;
	margin-top: 2.5rem;
	max-width: 72rem;
	margin-inline: auto;
	text-align: left;
}

.offer-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.75rem 1.5rem 1.5rem;
	border-radius: 1.25rem;
	background: rgba(18, 42, 35, .55);
	border: 1px solid rgba(123, 231, 194, .14);
	color: var(--ill-text, #f5f5f5);
	text-decoration: none;
	transition: transform 280ms cubic-bezier(.2, .8, .2, 1), border-color 280ms ease, background 280ms ease, box-shadow 280ms ease;
	overflow: hidden;
	min-height: 100%;
}
.offer-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 0%, rgba(123, 231, 194, .12), transparent 65%);
	opacity: 0;
	transition: opacity 280ms ease;
	pointer-events: none;
}
.offer-card:hover {
	transform: translateY(-4px);
	border-color: rgba(123, 231, 194, .38);
	background: rgba(20, 48, 40, .75);
	box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .55);
}
.offer-card:hover::before { opacity: 1; }

.offer-card--featured {
	background: linear-gradient(160deg, rgba(123, 231, 194, .14) 0%, rgba(18, 42, 35, .65) 100%);
	border-color: rgba(123, 231, 194, .42);
	box-shadow: 0 12px 35px -22px rgba(123, 231, 194, .35);
}
.offer-card--featured::after {
	content: 'Le plus choisi';
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ill-bg, #0e1e18);
	background: var(--ill-accent, #7be7c2);
	padding: .3rem .6rem;
	border-radius: 999px;
	z-index: 2;
}

.offer-card__head {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.offer-card__name {
	font-family: var(--ill-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	display: block;
}
.offer-card__price {
	font-size: .9rem;
	font-weight: 600;
	color: var(--ill-accent, #7be7c2);
	letter-spacing: .01em;
}

.offer-card__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	flex: 1;
}
.offer-card__list li {
	position: relative;
	padding-left: 1.35rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--ill-text-muted, rgba(245, 245, 245, .8));
}
.offer-card__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--ill-accent, #7be7c2);
	opacity: .65;
}

.offer-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--ill-accent, #7be7c2);
	padding-top: .5rem;
	border-top: 1px solid rgba(123, 231, 194, .12);
}
.offer-card__cta span {
	transition: transform 200ms ease;
	display: inline-block;
}
.offer-card:hover .offer-card__cta span { transform: translateX(4px); }

@media (max-width: 700px) {
	.offer-cards-grid { gap: 1rem; }
	.offer-card { padding: 1.5rem 1.25rem 1.25rem; }
}

/* offer-bridge fond plus sombre cohérent avec les cards */
.offer-bridge { background: transparent !important; padding: 5rem 0 !important; }
.offer-bridge .section-features__title { color: #fff; }


/* ==========================================================================
   L3 (suite) - Fix pricing-card responsive cohérent (16/05 - dernière passe)
   - "à partir de 3 500€" coupé → préfixe petit au-dessus du prix
   - font-size prix réduit pour responsive + cohérence 3 cards
   ========================================================================== */

/* Override final taille prix + layout flex column pour accommoder prefix */
.pricing-card__price {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(2.25rem, 1.5vw + 1.7rem, 3.5rem) !important;
	letter-spacing: -.03em;
	line-height: 1.05;
	color: var(--ill-text);
	margin: .75rem 0 .5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .15rem;
}

.pricing-card__price-prefix {
	display: inline-block;
	font-family: var(--ill-font-display);
	font-size: .95rem !important;
	font-weight: 500;
	color: var(--ill-text-muted, rgba(245,245,245,.75));
	letter-spacing: -.005em;
	text-transform: none;
	line-height: 1.3;
	margin-bottom: -.1rem;
	font-style: normal;
}

.pricing-card__price-unit {
	display: inline-block;
	font-family: var(--ill-font-body);
	font-size: .82rem !important;
	font-weight: 500;
	color: var(--ill-text-faint, rgba(245,245,245,.55));
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.3;
	margin-top: .2rem;
}

/* Cards layout uniforme 3 colonnes desktop, flex height equal */
.pricing-studio__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	align-items: stretch;
}
@media (max-width: 1024px) {
	.pricing-studio__grid { grid-template-columns: 1fr; gap: 1.25rem; }
}
.pricing-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.pricing-card__features {
	flex: 1;
}

/* Responsive : prix encore plus compact sur petit écran */
@media (max-width: 700px) {
	.pricing-card__price {
		font-size: clamp(1.9rem, 5vw + .5rem, 2.5rem) !important;
	}
	.pricing-card__price-prefix { font-size: .75rem !important; }
	.pricing-card__price-unit { font-size: .72rem !important; }
}

/* L3 - 2026-05-16 - VSL embed Vimeo (remplace placeholder) */
.vsl-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 1.25rem;
	overflow: hidden;
	background: #102a23;
	box-shadow: 0 25px 60px -25px rgba(0,0,0,.6), 0 0 0 1px rgba(123,231,194,.08);
}
.vsl-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ==========================================================================
   L3 (dernière passe 16/05 soir) :
   - Use-case-cards refonte 3 cols (remplace pricing-production layout cassé)
   - VSL agrandie (max-width 1100px au lieu de 880px)
   ========================================================================== */

.use-cases-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 3rem;
	max-width: 78rem;
	margin-inline: auto;
}
@media (max-width: 1024px) {
	.use-cases-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Page 22 raisons : grilles d'arguments en 2 colonnes (cards plus larges).
   Doit etre apres .use-cases-grid (ligne 7571) pour gagner sur l'order CSS. */
.use-cases-grid.use-cases-grid--why,
.use-cases-grid.use-cases-grid--four {
	grid-template-columns: repeat(2, 1fr);
	max-width: 1100px;
	margin-inline: auto;
}
@media (max-width: 700px) {
	.use-cases-grid.use-cases-grid--why,
	.use-cases-grid.use-cases-grid--four { grid-template-columns: 1fr; }
}

.use-case-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: 2.25rem 1.75rem 1.75rem;
	border-radius: 1.5rem;
	background: rgba(18, 42, 35, .55);
	border: 1px solid rgba(123, 231, 194, .14);
	transition: transform 280ms cubic-bezier(.2, .8, .2, 1), border-color 280ms ease, background 280ms ease;
	overflow: hidden;
	height: 100%;
}
.use-case-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 88% 0%, rgba(123, 231, 194, .12), transparent 65%);
	opacity: 0;
	transition: opacity 280ms ease;
	pointer-events: none;
}
.use-case-card:hover {
	transform: translateY(-4px);
	border-color: rgba(123, 231, 194, .35);
	background: rgba(20, 48, 40, .7);
}
.use-case-card:hover::before { opacity: 1; }

.use-case-card--featured {
	background: linear-gradient(160deg, rgba(123, 231, 194, .12) 0%, rgba(18, 42, 35, .65) 100%);
	border-color: rgba(123, 231, 194, .4);
	box-shadow: 0 14px 38px -22px rgba(123, 231, 194, .35);
}

.use-case-card__num {
	font-family: var(--ill-font-display);
	font-size: 2.25rem;
	color: var(--ill-accent, #7be7c2);
	opacity: .35;
	line-height: 1;
	font-weight: 700;
}
.use-case-card__match {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ill-accent, #7be7c2);
}
.use-case-card--featured .use-case-card__match { color: #fff; background: var(--ill-accent, #7be7c2); padding: .3rem .65rem; border-radius: 999px; color: var(--ill-bg, #0e1e18); align-self: flex-start; }

.use-case-card__title {
	font-family: var(--ill-font-display);
	font-size: 1.3rem;
	line-height: 1.25;
	margin: 0;
	color: #fff;
}
.use-case-card__body {
	font-size: .95rem;
	line-height: 1.6;
	color: var(--ill-text-muted, rgba(245,245,245,.7));
	margin: 0;
	flex: 1;
}

.use-case-card__rec {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: 1rem 1.15rem;
	margin-top: .5rem;
	border-radius: .9rem;
	background: rgba(10, 22, 18, .5);
	border: 1px solid rgba(123, 231, 194, .15);
	text-decoration: none;
	transition: border-color 200ms ease, background 200ms ease;
}
.use-case-card__rec:hover {
	border-color: rgba(123, 231, 194, .45);
	background: rgba(10, 22, 18, .75);
}
.use-case-card__rec-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ill-accent, #7be7c2);
}
.use-case-card__rec-name {
	font-family: var(--ill-font-display);
	font-size: 1.05rem;
	color: #fff;
	font-weight: 700;
}
.use-case-card__rec-price {
	font-size: .85rem;
	color: var(--ill-text-muted, rgba(245,245,245,.65));
	letter-spacing: .01em;
}

/* === VSL agrandie === */
.vsl-section__video {
	max-width: 1100px !important;
	margin: 0 auto !important;
}
.vsl-section__inner {
	max-width: 78rem;
	margin-inline: auto;
}
.vsl-embed {
	max-width: 1100px;
	margin-inline: auto;
}

/* === Optimisation visuelle pendant chargement vidéo Vimeo : ressenti instantané === */
.case-card__video-slot,
.hero__mosaic-cell[data-vimeo-mosaic] {
	background-size: cover;
	background-position: center;
	background-color: #122a23;
}
.case-card__video-slot::after,
.hero__mosaic-cell[data-vimeo-mosaic]::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(123, 231, 194, .05), transparent 60%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 300ms ease;
}
.case-card__video-slot iframe,
.hero__mosaic-cell iframe {
	opacity: 0;
	transition: opacity 600ms ease;
}
.case-card.is-playing .case-card__video-slot iframe,
.hero__mosaic-cell.is-loaded iframe {
	opacity: 1;
}



/* ==========================================================================
   L3 - 2026-05-16 - Page /methode/ : 5 layouts radicalement différents
   Retour Baptiste : "il faut vraiment varier - texte / image+texte / slider / etc"
   Architecture : .step-editorial (ed. centré) / .step-split-image (2 cols image)
                   / .step-timeline (3 sub-cards horizontal) / .step-compare
                   (3 cols comparatif) / .step-immersive (bg image full + CTA)
   ========================================================================== */

/* ============ ÉTAPE 1 : LAYOUT EDITORIAL ============
   Deux variantes : centré (par défaut) ou 2-col avec chiffre choc à gauche
   (modifier .step-editorial--with-stat).
*/
.step-editorial {
	padding: clamp(5rem, 8vw, 7rem) 0;
	background: var(--ill-bg);
	position: relative;
}
.step-editorial .container { max-width: 1180px; }
.step-editorial__inner {
	max-width: 880px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	text-align: center;
}
.step-editorial--with-stat .step-editorial__inner {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: stretch;
	text-align: left;
	padding-inline: 0;
}
.step-editorial__content {
	min-width: 0;
}
.step-editorial--with-stat .step-editorial__content { text-align: left; }
.step-editorial--with-stat .step-editorial__title {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}
.step-editorial--with-stat .step-editorial__lead {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
	padding: .25rem 0 .25rem 1.25rem;
	max-width: none;
	border-left: 3px solid var(--ill-accent, #7be7c2);
}
.step-editorial--with-stat .step-editorial__lead::before,
.step-editorial--with-stat .step-editorial__lead::after { display: none; }
.step-editorial--with-stat .step-editorial__body {
	column-count: 1;
	column-rule: none;
	text-align: left;
	max-width: none;
	margin: 0 0 2.25rem;
}
.step-editorial--with-stat .step-editorial__outcome {
	max-width: none;
	margin: 0;
}

/* Bloc visuel : chiffre choc, étiré à la hauteur du contenu droit */
.step-editorial__visual {
	position: relative;
	padding: clamp(3rem, 5vw, 4.5rem) 1.75rem;
	border-radius: 1.5rem;
	background: linear-gradient(160deg, rgba(82,199,163,.16) 0%, rgba(82,199,163,.04) 60%, rgba(255,255,255,0) 100%);
	border: 1px solid rgba(82,199,163,.28);
	text-align: center;
	overflow: hidden;
	min-height: 380px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: stretch;
	box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.step-editorial__visual-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	z-index: 2;
	width: 100%;
	flex: 1 1 auto;
}
.step-editorial__visual::before {
	content: '';
	position: absolute;
	inset: -25% -15% auto auto;
	width: 80%;
	height: 80%;
	background: radial-gradient(circle, rgba(82,199,163,.35), transparent 65%);
	filter: blur(70px);
	z-index: 0;
}
.step-editorial__stat-corner {
	position: absolute;
	width: 28px;
	height: 28px;
	border-color: rgba(82,199,163,.55);
	border-style: solid;
	border-width: 0;
	z-index: 1;
}
.step-editorial__stat-corner--tl {
	top: 14px; left: 14px;
	border-top-width: 2px;
	border-left-width: 2px;
	border-top-left-radius: 6px;
}
.step-editorial__stat-corner--br {
	bottom: 14px; right: 14px;
	border-bottom-width: 2px;
	border-right-width: 2px;
	border-bottom-right-radius: 6px;
}
.step-editorial__stat {
	position: relative;
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(4rem, 7.5vw, 7rem);
	line-height: .95;
	letter-spacing: -.04em;
	color: #ffffff;
	text-shadow: 0 0 50px rgba(82,199,163,.55), 0 2px 30px rgba(0,0,0,.35);
	z-index: 2;
	display: block;
	margin: 0;
}
.step-editorial__stat-frame {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.step-editorial__stat-ring { display: none; }
.step-editorial__stat-icon {
	position: relative;
	width: clamp(38px, 4.5vw, 52px);
	height: auto;
	color: var(--ill-accent, #7be7c2);
	opacity: .9;
	z-index: 2;
	margin: 0;
	display: block;
}
.step-editorial__stat-label {
	position: relative;
	display: block;
	font-size: clamp(.9rem, .3vw + .85rem, 1.05rem);
	line-height: 1.4;
	color: var(--ill-text-muted, rgba(245,245,245,.85));
	max-width: 320px;
	margin: 0 auto;
	z-index: 1;
}

/* Eyebrow pill (consistent avec les autres sections du site) */
.step-editorial__head {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .35rem .95rem .35rem .8rem;
	border-radius: 999px;
	background: rgba(82,199,163,.1);
	border: 1px solid rgba(82,199,163,.25);
	margin-bottom: 1.5rem;
}
.step-editorial__head::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ill-accent, #7be7c2);
	flex-shrink: 0;
}
.step-editorial__num { display: none; }
.step-editorial__line { display: none; }
.step-editorial__label {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--ill-accent, #7be7c2);
}
.step-editorial__title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.65rem, 1.6vw + 1rem, 2.4rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0 auto 1.5rem;
	max-width: 720px;
	color: #fff;
}
/* Lead : pull-quote (utilisé en mode centré uniquement) */
.step-editorial__lead {
	position: relative;
	font-family: var(--ill-font-display);
	font-size: clamp(1.1rem, .5vw + 1rem, 1.3rem);
	font-weight: 500;
	line-height: 1.5;
	color: var(--ill-text);
	margin: 0 auto 2rem;
	max-width: 620px;
	padding: 2.25rem 1rem 0;
}
.step-editorial__lead::before {
	content: '\201C';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -10%);
	font-family: var(--ill-font-display);
	font-size: 3rem;
	font-weight: 900;
	line-height: 1;
	color: var(--ill-accent, #7be7c2);
	background: var(--ill-bg);
	padding: 0 .65rem;
}
.step-editorial__lead::after {
	content: '';
	position: absolute;
	top: 1.05rem;
	left: 10%;
	right: 10%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(82,199,163,.4), transparent);
	z-index: -1;
}
/* Body : 2 colonnes en mode centré, 1 colonne en mode 2-col */
.step-editorial__body {
	column-count: 2;
	column-gap: 2.75rem;
	column-rule: 1px solid rgba(82,199,163,.12);
	text-align: left;
	max-width: 780px;
	margin: 0 auto 2.5rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ill-text-muted, rgba(245,245,245,.82));
}
.step-editorial__body p {
	margin: 0 0 1.15rem;
	break-inside: avoid;
}
.step-editorial__body p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
	.step-editorial__body {
		column-count: 1;
		column-rule: none;
	}
}
/* Outcome : carte plus marquée avec icône étoile + gradient subtil */
.step-editorial__outcome {
	position: relative;
	display: block;
	padding: 1.5rem 1.75rem 1.5rem 4.25rem;
	border-radius: 1.1rem;
	background: linear-gradient(135deg, rgba(82,199,163,.14), rgba(82,199,163,.04));
	border: 1px solid rgba(82,199,163,.32);
	text-align: left;
	max-width: 620px;
	margin: 0 auto;
	box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.step-editorial__outcome::before {
	content: '';
	position: absolute;
	top: 1.55rem;
	left: 1.25rem;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(82,199,163,.45) 0%, rgba(82,199,163,.15) 70%);
	box-shadow: 0 0 0 1px rgba(82,199,163,.4) inset, 0 0 14px rgba(82,199,163,.25);
}
.step-editorial__outcome::after {
	content: '';
	position: absolute;
	top: 2.05rem;
	left: 1.8rem;
	width: 1rem;
	height: 1rem;
	background: var(--ill-accent, #7be7c2);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.step-editorial__outcome-label {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ill-accent, #7be7c2);
	margin-bottom: .45rem;
}
.step-editorial__outcome-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: #fff;
}
/* Responsive : stack visual au-dessus du contenu sur tablette/mobile */
@media (max-width: 960px) {
	.step-editorial--with-stat .step-editorial__inner {
		grid-template-columns: 1fr;
		gap: 2.25rem;
		padding-inline: 1.5rem;
	}
	.step-editorial__visual { min-height: auto; padding: 2.25rem 1.5rem; }
	.step-editorial__stat { font-size: clamp(3.25rem, 14vw, 5.5rem); }
}
@media (max-width: 560px) {
	.step-editorial__outcome {
		padding: 1.35rem 1.25rem 1.35rem 1.25rem;
		text-align: center;
	}
	.step-editorial__outcome::before,
	.step-editorial__outcome::after {
		position: static;
		display: inline-block;
		margin: 0 auto .85rem;
	}
	.step-editorial__outcome::before { display: block; }
	.step-editorial__outcome::after {
		position: absolute;
		top: 1.85rem;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* ============ ÉTAPE 2 : LAYOUT 2 COLONNES IMAGE + TEXTE ============ */
.step-split-image {
	padding: clamp(5rem, 8vw, 7rem) 0;
	background: linear-gradient(180deg, var(--ill-bg) 0%, var(--ill-bg-2, #102a23) 100%);
}
.step-split-image__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.step-split-image--right .step-split-image__visual { order: 2; }
.step-split-image--right .step-split-image__copy { order: 1; }
.step-split-image--left .step-split-image__visual { order: 1; }
.step-split-image--left .step-split-image__copy { order: 2; }

.step-split-image__tag {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ill-accent, #7be7c2);
	margin-bottom: 1rem;
}
.step-split-image__num {
	display: inline-block;
	padding: .25rem .65rem;
	background: rgba(123,231,194,.12);
	border: 1px solid rgba(123,231,194,.3);
	border-radius: 999px;
	font-family: var(--ill-font-mono);
	font-size: .75rem;
	letter-spacing: .12em;
}
.step-split-image__title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 2vw + .8rem, 2.5rem);
	line-height: 1.15;
	letter-spacing: -.015em;
	color: #fff;
	margin: 0 0 1.25rem;
}
.step-split-image__lead {
	font-size: 1.1rem;
	line-height: 1.55;
	color: var(--ill-text-muted, rgba(245,245,245,.75));
	margin: 0 0 1.25rem;
}
.step-split-image__copy > p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ill-text-muted, rgba(245,245,245,.7));
	margin: 0 0 1.5rem;
}
.step-split-image__feats {
	list-style: none;
	padding: 0;
	margin: 1.75rem 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem 1.25rem;
}
.step-split-image__feats li {
	font-size: .9rem;
	line-height: 1.45;
	color: var(--ill-text-muted, rgba(245,245,245,.7));
	padding-left: 1.2rem;
	position: relative;
}
.step-split-image__feats li::before {
	content: '';
	position: absolute;
	left: 0; top: .55em;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--ill-accent, #7be7c2);
	opacity: .8;
}
.step-split-image__feats strong { color: #fff; font-weight: 700; }

.step-split-image__visual {
	position: relative;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 30px 70px -30px rgba(0,0,0,.55);
}
.step-split-image__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 28%;
}
.step-split-image__badge {
	position: absolute;
	bottom: 1.25rem;
	left: 1.25rem;
	right: 1.25rem;
	padding: .65rem 1rem;
	background: rgba(10,22,18,.85);
	backdrop-filter: blur(8px);
	border-radius: 999px;
	border: 1px solid rgba(123,231,194,.3);
	font-size: .8rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
}
@media (max-width: 900px) {
	.step-split-image__inner { grid-template-columns: 1fr; }
	.step-split-image__feats { grid-template-columns: 1fr; }
}

/* ============ ÉTAPE 3 : TIMELINE HORIZONTALE 3 SUB-CARDS ============ */
.step-timeline {
	padding: clamp(5rem, 8vw, 7rem) 0;
	background: var(--ill-bg);
}
.step-timeline__head {
	max-width: 760px;
	margin: 0 auto 3.5rem;
	text-align: center;
}
.step-timeline__tag,
.step-compare__tag,
.step-immersive__tag {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ill-accent, #7be7c2);
	margin-bottom: 1rem;
}
.step-timeline__num,
.step-compare__num,
.step-immersive__num {
	display: inline-block;
	padding: .25rem .65rem;
	background: rgba(123,231,194,.12);
	border: 1px solid rgba(123,231,194,.3);
	border-radius: 999px;
	font-family: var(--ill-font-mono);
	font-size: .75rem;
}
.step-timeline__title,
.step-compare__title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 2vw + .8rem, 2.75rem);
	line-height: 1.15;
	letter-spacing: -.015em;
	color: #fff;
	margin: 0 0 1.25rem;
}
.step-timeline__lead,
.step-compare__lead {
	font-size: 1.1rem;
	line-height: 1.55;
	color: var(--ill-text-muted, rgba(245,245,245,.75));
	margin: 0;
}
.step-timeline__track {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	gap: 0;
	max-width: 1100px;
	margin: 0 auto;
	align-items: stretch;
}
.step-timeline__step {
	padding: 2rem 1.75rem;
	background: rgba(18,42,35,.55);
	border: 1px solid rgba(123,231,194,.14);
	border-radius: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .65rem;
	transition: transform 280ms ease, border-color 280ms ease;
}
.step-timeline__step:hover {
	transform: translateY(-4px);
	border-color: rgba(123,231,194,.35);
}
.step-timeline__step--featured {
	background: linear-gradient(160deg, rgba(123,231,194,.12) 0%, rgba(18,42,35,.65) 100%);
	border-color: rgba(123,231,194,.4);
}
.step-timeline__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--ill-accent, #7be7c2);
	color: var(--ill-bg, #0e1e18);
	font-family: var(--ill-font-display);
	font-size: 1.1rem;
	font-weight: 800;
	margin-bottom: .35rem;
}
.step-timeline__step-title {
	font-family: var(--ill-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.3;
}
.step-timeline__step-text {
	font-size: .92rem;
	line-height: 1.55;
	color: var(--ill-text-muted, rgba(245,245,245,.7));
	margin: 0;
}
.step-timeline__connector {
	width: 3rem;
	height: 2px;
	background: linear-gradient(90deg, rgba(123,231,194,.5), rgba(123,231,194,.2));
	align-self: center;
	position: relative;
	margin: 0 .35rem;
}
.step-timeline__connector::after {
	content: '→';
	position: absolute;
	right: -.5rem;
	top: -.7rem;
	color: var(--ill-accent, #7be7c2);
	font-size: 1rem;
}
@media (max-width: 900px) {
	.step-timeline__track { grid-template-columns: 1fr; gap: 1rem; }
	.step-timeline__connector { width: 2px; height: 2rem; background: linear-gradient(180deg, rgba(123,231,194,.5), rgba(123,231,194,.2)); margin: 0 auto; }
	.step-timeline__connector::after { right: -.6rem; top: auto; bottom: -.5rem; content: '↓'; }
}

/* ============ ÉTAPE 4 : TABLEAU COMPARATIF 3 NIVEAUX ============ */
.step-compare {
	padding: clamp(5rem, 8vw, 7rem) 0;
	background: linear-gradient(180deg, var(--ill-bg-2, #102a23) 0%, var(--ill-bg) 100%);
}
.step-compare__head {
	max-width: 760px;
	margin: 0 auto 3.5rem;
	text-align: center;
}
.step-compare__title-sub {
	display: block;
	font-size: .6em;
	font-weight: 500;
	color: var(--ill-accent, #7be7c2);
	letter-spacing: .04em;
	margin-top: .5rem;
}
.step-compare__table {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	max-width: 1100px;
	margin: 0 auto;
	align-items: stretch;
}
.step-compare__col {
	padding: 2rem 1.75rem 2.25rem;
	background: rgba(18,42,35,.55);
	border: 1px solid rgba(123,231,194,.14);
	border-radius: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .85rem;
	position: relative;
	transition: transform 280ms ease, border-color 280ms ease;
}
.step-compare__col:hover {
	transform: translateY(-4px);
	border-color: rgba(123,231,194,.35);
}
.step-compare__col--featured {
	background: linear-gradient(160deg, rgba(123,231,194,.14) 0%, rgba(18,42,35,.65) 100%);
	border-color: rgba(123,231,194,.42);
	box-shadow: 0 14px 38px -22px rgba(123,231,194,.35);
}
.step-compare__col-tag {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ill-accent, #7be7c2);
}
.step-compare__col-title {
	font-family: var(--ill-font-display);
	font-size: 1.4rem;
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
	margin: 0;
}
.step-compare__col-price {
	font-size: .95rem;
	font-weight: 600;
	color: var(--ill-text-muted, rgba(245,245,245,.7));
	margin: 0;
}
.step-compare__col-list {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
}
.step-compare__col-list li {
	font-size: .9rem;
	line-height: 1.5;
	color: var(--ill-text-muted, rgba(245,245,245,.7));
	padding-left: 1.35rem;
	position: relative;
}
.step-compare__col-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ill-accent, #7be7c2);
	font-weight: 700;
}
@media (max-width: 900px) {
	.step-compare__table { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============ ÉTAPE 5 : IMAGE FOND IMMERSIVE + CTA OVERLAY ============ */
.step-immersive {
	position: relative;
	padding: clamp(6rem, 10vw, 9rem) 0;
	overflow: hidden;
	isolation: isolate;
}
.step-immersive__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.step-immersive__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	filter: saturate(.85);
}
.step-immersive__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,22,18,.95) 0%, rgba(10,22,18,.7) 50%, rgba(10,22,18,.95) 100%);
}
.step-immersive__inner {
	position: relative;
	z-index: 2;
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}
.step-immersive__title {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 2.5vw + 1rem, 3.5rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 1.25rem;
}
.step-immersive__lead {
	font-size: 1.15rem;
	line-height: 1.55;
	color: rgba(245,245,245,.85);
	margin: 0 0 2rem;
}
.step-immersive__pills {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	justify-content: center;
	margin-bottom: 2.5rem;
}
.step-immersive__pill {
	display: inline-flex;
	padding: .55rem 1.1rem;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 500;
	color: #fff;
	backdrop-filter: blur(8px);
}
.step-immersive__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	justify-content: center;
}

/* ============================================================
   Retours Tim 25/05 — Lot I (cadrage photos) + Lot K (calendrier contact)
   ============================================================ */
/* Portraits : tête jamais coupée (ancrage haut) */
.founder-card__photo,
.team-card__photo,
.guests-grid__photo,
.coach-aside__photo,
.case-single__featured img { object-fit: cover; object-position: center top; }

/* Calendrier iClosed : pleine largeur, infos en bandeau au-dessus (plus étriqué) */
.contact-grid__inner { grid-template-columns: 1fr !important; gap: 2.25rem; }
.contact-info { flex-direction: row !important; flex-wrap: wrap; gap: 1.25rem 2.5rem; }
.contact-info__block { flex: 1 1 220px; }
.contact-booking { width: 100%; }
.contact-booking .iclosed-widget { min-height: 860px; width: 100% !important; }
@media (max-width: 720px) { .contact-info { flex-direction: column !important; } }

/* === Retours 25/05 — bande CTA revenue en SOMBRE (le fond vert clair était raté/kitsch) === */
.site-footer { background: #103029 !important; }
.site-footer__social a { background: rgba(255,255,255,.10) !important; }

/* =========================================================
   DA FINITIONS 25/05 (retours Tim)
   - correctif structure Hn home : le badge KW est le H1 (style inchangé)
   - fil conducteur process (steps) + cartes plus généreuses
   ========================================================= */

/* Home : badge KW devenu <h1> — neutraliser la marge UA du h1 (disposition identique) */
h1.hero__eyebrow { margin-top: 0; line-height: 1.2; }

/* --- Steps : cartes plus généreuses (style Framer/biux) --- */
.section-steps__grid { position: relative; }
.step-card-v2 {
	padding: 2.4rem 1.9rem 2.1rem;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
}
.step-card-v2:hover {
	transform: translateY(-6px);
	border-color: rgba(82,199,163,0.5);
	box-shadow: 0 18px 40px -24px rgba(0,0,0,0.6);
}
/* node numéroté = ancre du fil conducteur (présent sur toutes les étapes) */
.step-card-v2__num {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 2.9rem; height: 2.9rem;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	border: 1.5px solid var(--ill-accent);
	background: rgba(82,199,163,0.10);
	color: var(--ill-accent);
	font-size: .9rem; letter-spacing: 0;
	position: relative; z-index: 3;
}
/* l'emoji devient un petit accent inline (fin du double cercle avec le node) */
.step-card-v2__icon {
	width: auto; height: auto;
	background: none; color: var(--ill-accent);
	border-radius: 0; font-size: 1.15rem;
	margin: 0 0 .4rem;
}

@media (min-width: 1100px) {
	/* étapes alignées comme un parcours (colonnes fixes selon le nb d'étapes) */
	.section-steps--c2 .section-steps__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
	.section-steps--c3 .section-steps__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
	.section-steps--c4 .section-steps__grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
	.section-steps--c5 .section-steps__grid { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
	/* le fil : pointillés accent dans le gap, au centre du node numéroté */
	.section-steps__grid .step-card-v2:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 3.85rem;
		right: -1.75rem;
		width: 1.75rem; height: 2px;
		background: repeating-linear-gradient(90deg, var(--ill-accent) 0 7px, transparent 7px 13px);
		opacity: .55;
		z-index: 2;
	}
	/* couper le fil en fin de rangée pour ne pas pointer dans le vide */
	.section-steps--c2 .step-card-v2:nth-child(2n)::after,
	.section-steps--c3 .step-card-v2:nth-child(3n)::after,
	.section-steps--c4 .step-card-v2:nth-child(4n)::after,
	.section-steps--c5 .step-card-v2:nth-child(5n)::after { display: none; }
}

/* =========================================================
   MUR HERO 25/05 (retours Tim) — reels officiels illustre!
   posters curés (cover) + variation d'orientation + vidéo Vimeo background (prod)
   ========================================================= */
.hero__mosaic-cell { background-size: cover; background-position: center; }
.hero__mosaic-cell--v { aspect-ratio: 9 / 16; }   /* reels verticaux (tuiles hautes) */
.hero__mosaic-cell--h { aspect-ratio: 16 / 9; }   /* clips larges (tuiles courtes) */
/* couche vidéo : couvre la cellule (spécificité > règle iframe plein-écran existante) */
.hero__mosaic-cell .hero__mosaic-video {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	min-width: 100%; min-height: 100%;
	transform: none;
	border: 0;
	pointer-events: none;
	object-fit: cover;
	filter: brightness(0.72) saturate(0.95) !important;
}
@media (max-width: 1023px) {
	.hero__mosaic-cell .hero__mosaic-video { display: none; } /* perf mobile : posters seuls */
}

/* Mur hero dense + net (25/05) : 6 colonnes, tuiles plus petites, moins de zoom */
.hero__mosaic { grid-template-columns: repeat(6, 1fr); inset: -4%; width: 106%; height: 108%; gap: .45rem; }
.hero__mosaic-col--5 { transform: translateY(4%); }
.hero__mosaic-col--6 { transform: translateY(-5%); }
.hero__mosaic-col--5 .hero__mosaic-track { animation-duration: 70s; }
.hero__mosaic-col--6 .hero__mosaic-track { animation-duration: 60s; }
@media (max-width: 1380px) {
	.hero__mosaic { grid-template-columns: repeat(5, 1fr); }
	.hero__mosaic-col--6 { display: none; }
}
@media (max-width: 1140px) {
	.hero__mosaic { grid-template-columns: repeat(4, 1fr); }
	.hero__mosaic-col--5 { display: none; }
}
@media (max-width: 820px) {
	.hero__mosaic { grid-template-columns: repeat(3, 1fr); }
	.hero__mosaic-col--4 { display: none; }
}
@media (max-width: 560px) {
	.hero__mosaic { grid-template-columns: repeat(2, 1fr); }
	.hero__mosaic-col--3 { display: none; }
}

/* Fix cartes offres 2 colonnes (centrées, non recroquevillées) + prix texte ("Sur devis") qui débordait */
.pricing-studio__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
/* Layout prix : colonne stricte, prefix au-dessus, prix au milieu, unite en-dessous. Force pour eviter le debordement (cas Niveau 3) */
.pricing-card__price {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	flex-wrap: nowrap !important;
	gap: .15rem;
	font-size: clamp(2rem, 2vw + 1rem, 3.25rem) !important;
	line-height: 1.05;
	overflow-wrap: anywhere;
	white-space: normal !important;
}
.pricing-card__price-prefix {
	display: block !important;
	flex-basis: auto !important;
	font-size: .78rem !important;
	font-weight: 600;
	font-style: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ill-text-faint);
	margin-bottom: .1rem;
}
.pricing-card__price-unit {
	display: block !important;
	flex-basis: auto !important;
	margin-top: .25rem;
	font-size: .82rem !important;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ill-text-faint);
	font-family: var(--ill-font-body);
	white-space: normal;
}
@media (max-width: 980px) { .pricing-studio__grid--two { grid-template-columns: 1fr; max-width: 460px; } }

/* Header Agence 2 colonnes : texte à gauche, VSL (auto-hébergée) à droite */
.page-hero--split .page-hero__inner { max-width: 1200px; text-align: left; }
.page-hero--split .page-hero__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.page-hero--split .page-hero__title, .page-hero--split .page-hero__lead { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
.page-hero--split .page-hero__cta { justify-content: flex-start; }
.page-hero--split .hero__eyebrow { margin-bottom: 1.5rem; }
.hero-vsl { width: 100%; border-radius: 1.25rem; overflow: hidden; background: #0a1612; box-shadow: 0 30px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(123,231,194,.08); }
.hero-vsl__player { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.hero-vsl__label { display: block; padding: .85rem 1rem; font-size: .82rem; color: rgba(255,255,255,.7); text-align: center; }
@media (max-width: 900px) {
	.page-hero--split .page-hero__split { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* === Page hero centre (Agence) : tout centre, eyebrow + titre + lead + CTA + VSL en dessous === */
.page-hero--centered { padding-bottom: clamp(1rem, 2vw, 1.75rem) !important; }
.page-hero--centered .page-hero__inner { max-width: 900px; text-align: center; }
.page-hero--centered .page-hero__title,
.page-hero--centered .page-hero__lead {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.page-hero--centered .page-hero__title { max-width: 22ch; }
.page-hero--centered .page-hero__lead { max-width: 56ch; }
.page-hero--centered .page-hero__cta { justify-content: center; }
.page-hero--centered .hero__eyebrow { margin-bottom: 1.25rem; }

/* === VSL scroll-grow : la video grossit a mesure que l'utilisateur scrolle === */
.vsl-scroll-section {
	/* L'espace reserve pour le scale max est ajoute en padding-bottom STATIQUE :
	   c'est calcule au load via --vsl-extra (JS), jamais mute au scroll. Evite
	   les layout shifts qui desynchronisent Lenis. */
	padding-block: clamp(.5rem, 1vw, 1rem) calc(clamp(2.5rem, 5vw, 4rem) + var(--vsl-extra, 0px));
	position: relative;
}
/* Pas de border-bottom ni de halo : la separation est portee par le border-top
   uniforme de la section suivante (.page-svc--agence > section + section). */
.vsl-scroll-stage {
	width: 100%;
	max-width: 100vw;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: visible;
}
.vsl-scroll-box {
	width: min(62%, 880px);
	aspect-ratio: 16 / 9;
	position: relative;
	border-radius: clamp(.8rem, 1.5vw, 1.4rem);
	overflow: hidden;
	background: #0a1612;
	box-shadow: 0 18px 38px -22px rgba(0,0,0,0.45), 0 0 0 1px rgba(123,231,194,0.1);
	transform: scale(var(--vsl-scale, 1));
	/* Origine en haut : la video grandit UNIQUEMENT vers le bas, jamais vers le
	   haut. Plus de chevauchement avec le titre/lead du hero pendant le scroll. */
	transform-origin: center top;
	transition: transform 60ms linear;
	will-change: transform;
}
@media (max-width: 760px) {
	.vsl-scroll-box { width: 92%; }
}

/* CTA sous la VSL : centre, marge superieure. On le decale vers le bas en suivant
   le scale courant de la box (--vsl-extra-current pilote par le JS), pour qu'il
   reste sous la video meme quand elle est zoomee. transform = pas de layout shift. */
.vsl-scroll-cta {
	display: flex;
	justify-content: center;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	position: relative;
	z-index: 2;
	transform: translateY(var(--vsl-extra-current, 0px));
	will-change: transform;
}
.vsl-scroll-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	background: #000;
}

/* === Scroll shield : couche transparente au-dessus des iframes (Vimeo, iClosed)
   pour rattraper les wheel events que les iframes cross-origin avalent, et garder
   un scroll Lenis parfaitement fluide. Disparait au premier clic pour rendre
   l'iframe interactive. */
.scroll-shield {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: transparent;
	cursor: pointer;
	transition: opacity 220ms ease;
}
.scroll-shield.is-off {
	pointer-events: none;
	opacity: 0;
}
/* iClosed wrapper : le widget injecte un iframe dont on ne contrôle pas le contenu.
   On force position:relative pour positionner le shield au-dessus. */
.contact-booking .iclosed-widget { position: relative; }

/* Grille réalisations teaser : 2+2 au lieu de 3+1 (retour Tim) */
.cases__grid--pair { grid-template-columns: repeat(2, 1fr); max-width: 1040px; margin-inline: auto; }
@media (max-width: 680px) { .cases__grid--pair { grid-template-columns: 1fr; } }

/* === Grille des livrables par episode (page Agence) === */
.deliverables-grid {
	list-style: none;
	padding: 0;
	margin: 2.5rem auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1rem;
	max-width: 1100px;
}
.deliverable {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 1.5rem 1rem 1.25rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(82, 199, 163, 0.22);
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: transform 450ms cubic-bezier(.19, 1, .22, 1),
	            border-color 300ms ease,
	            background 300ms ease,
	            box-shadow 350ms ease;
}
.deliverable::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(82, 199, 163, 0.16), transparent 70%);
	opacity: 0;
	transition: opacity 350ms ease;
	pointer-events: none;
}
.deliverable:hover {
	transform: translateY(-4px);
	border-color: var(--ill-accent);
	background: rgba(82, 199, 163, 0.06);
	box-shadow: 0 18px 38px -22px rgba(82, 199, 163, 0.55);
}
.deliverable:hover::before { opacity: 1; }

.deliverable__count {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(1.8rem, 1.5vw + 1rem, 2.6rem);
	line-height: 1;
	color: var(--ill-accent);
	letter-spacing: -.02em;
	position: relative;
}
.deliverable__icon {
	display: inline-flex;
	width: 28px;
	height: 28px;
	color: var(--ill-accent);
	position: relative;
}
.deliverable__icon svg { width: 100%; height: 100%; }
.deliverable__label {
	font-family: var(--ill-font-display);
	font-weight: 600;
	font-size: .92rem;
	color: var(--ill-text);
	line-height: 1.3;
	position: relative;
	margin-top: .15rem;
}

@media (max-width: 600px) {
	.deliverables-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
	.deliverable { padding: 1.15rem .75rem 1rem; }
	.deliverable__count { font-size: 1.7rem; }
	.deliverable__icon { width: 24px; height: 24px; }
	.deliverable__label { font-size: .82rem; }
}

/* ============================================================
   DELIVERABLES SHOWCASE — section dédiée "Chez nous, 1 podcast = tous ces livrables"
   Section qui isole visuellement les livrables des offres tarifaires.
   ============================================================ */
.deliverables-showcase { padding-block: clamp(4rem, 7vw, 6.5rem); }
.deliverables-showcase__head {
	max-width: 980px;
	margin: 0 auto 3rem;
	text-align: center;
}
.deliverables-showcase__head .section-split__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1.5rem;
}
.deliverables-showcase__title {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(2rem, 3.2vw + 1rem, 3.6rem);
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--ill-text);
	margin: 0 0 1.25rem;
}
.deliverables-showcase__quoted {
	color: var(--ill-text);
	white-space: nowrap;
}
.deliverables-showcase__equals {
	display: inline-block;
	color: var(--ill-accent);
	font-weight: 900;
	margin: 0 .25em;
	transform: translateY(-.04em);
}
.deliverables-showcase__sum {
	background: linear-gradient(180deg, var(--ill-accent) 0%, #7be7c2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-style: italic;
}
.deliverables-showcase__lead {
	color: var(--ill-text-muted);
	font-size: 1.05rem;
	line-height: 1.55;
	max-width: 56ch;
	margin: 0 auto;
}
.deliverables-showcase__example {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	flex-wrap: wrap;
	margin: 2.25rem auto 1.5rem;
	padding: .85rem 1.4rem;
	max-width: max-content;
	border: 1px solid rgba(82, 199, 163, 0.22);
	border-radius: 999px;
	background: rgba(82, 199, 163, 0.06);
}
.deliverables-showcase__example-label {
	color: var(--ill-text-muted);
	font-size: .95rem;
	font-weight: 500;
}
.deliverables-showcase__example-logo {
	height: 28px;
	width: auto;
	display: block;
}
.deliverables-showcase__example-name {
	color: var(--ill-text);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: .01em;
}
.deliverables-showcase__example-colon {
	color: var(--ill-text-muted);
	font-size: 1.05rem;
	margin-left: -.25rem;
}

/* ============================================================
   LEVEL QUIZ — sélecteur interactif "Quel niveau pour votre équipe ?"
   Boutons en haut (tabs-like), fiche de reco en dessous (card filled).
   Differenciation visuelle FORTE : tabs minimal vs card pleine.
   ============================================================ */
.pricing-production--level-quiz { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.pricing-production--level-quiz .section-split__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.pricing-production--level-quiz .section-features__title { margin: 0 0 .75rem; }
.level-quiz__question {
	color: var(--ill-text-muted);
	font-size: 1.05rem;
	margin: 0 0 2.5rem;
}
.level-quiz {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}
.level-quiz__buttons {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
@media (max-width: 920px) {
	.level-quiz { gap: 1.25rem; }
	.level-quiz__buttons { grid-template-columns: 1fr; }
}
.level-quiz__btn {
	all: unset;
	cursor: pointer;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 1.1rem;
	row-gap: .25rem;
	/* padding-right plus genereux pour laisser de la place au chevron */
	padding: 1.25rem 2.85rem 1.4rem 1.4rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(82, 199, 163, 0.22);
	border-radius: 16px;
	transition: color .22s ease, border-color .22s ease, background .22s ease,
	            transform .22s cubic-bezier(.19,1,.22,1), box-shadow .22s ease;
	position: relative;
	overflow: hidden;
}
.level-quiz__btn:focus-visible {
	outline: 2px solid var(--ill-accent);
	outline-offset: 3px;
}
.level-quiz__btn:hover {
	background: rgba(82, 199, 163, 0.06);
	border-color: rgba(82, 199, 163, 0.55);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -28px rgba(82, 199, 163, 0.55);
}
.level-quiz__btn.is-active {
	background: rgba(82, 199, 163, 0.10);
	border-color: var(--ill-accent);
	box-shadow: 0 16px 36px -24px rgba(82, 199, 163, 0.6);
}
.level-quiz__btn.is-active .level-quiz__btn-label {
	color: var(--ill-text);
}
/* Chevron en haut a droite : signale clairement que c'est un bouton actionnable.
   Discret au repos, plus marque au hover et sur l'actif. */
.level-quiz__btn::after {
	content: '→';
	position: absolute;
	top: .9rem; right: 1.05rem;
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--ill-accent);
	opacity: .35;
	transform: translateX(0);
	transition: opacity .22s ease, transform .22s cubic-bezier(.19,1,.22,1);
	pointer-events: none;
}
.level-quiz__btn:hover::after { opacity: 1; transform: translateX(5px); }
.level-quiz__btn.is-active::after {
	opacity: 1;
	animation: levelQuizArrowNudge 1.6s ease-in-out infinite;
}
@keyframes levelQuizArrowNudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(5px); }
}
/* Barre de progression auto-rotation : remplit en 5s sur le bouton actif quand
   l'autoplay est on. Visible UNIQUEMENT pendant l'autoplay (avant le premier
   clic utilisateur). */
.level-quiz__btn::before {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: var(--ill-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
	opacity: 0;
}
.level-quiz[data-autoplay="on"] .level-quiz__btn.is-active::before {
	opacity: 1;
	animation: levelQuizProgress 5s linear forwards;
}
@keyframes levelQuizProgress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
.level-quiz__btn-num {
	grid-row: 1 / span 2;
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: 1.85rem;
	line-height: 1;
	color: var(--ill-accent);
	opacity: .55;
	align-self: center;
	transition: opacity .22s ease;
}
.level-quiz__btn.is-active .level-quiz__btn-num { opacity: 1; }
.level-quiz__btn-label {
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ill-text);
	line-height: 1.25;
}
.level-quiz__btn-sub {
	font-size: .9rem;
	color: var(--ill-text-muted);
	line-height: 1.45;
}

.level-quiz__results {
	position: relative;
}
.level-quiz__result {
	background: linear-gradient(150deg, rgba(82, 199, 163, 0.10) 0%, rgba(18, 66, 55, 0.55) 60%, rgba(13, 47, 38, 0.65) 100%);
	border: 1px solid rgba(82, 199, 163, 0.55);
	border-radius: 20px;
	padding: 2.25rem 2.25rem 2.5rem;
	box-shadow: 0 28px 60px -32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
	gap: .85rem;
	min-height: 100%;
	transition: opacity .28s ease, transform .28s ease;
	position: relative;
	overflow: hidden;
}
.level-quiz__result::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent 0%, var(--ill-accent) 40%, var(--ill-accent) 60%, transparent 100%);
	pointer-events: none;
}
.level-quiz__result[hidden] { display: none; }
.level-quiz__result:not(.is-visible) {
	opacity: 0;
	transform: translateY(8px);
}
.level-quiz__result.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.level-quiz__rec-label {
	display: inline-block;
	width: fit-content;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ill-accent);
	border: 1px solid var(--ill-accent);
	border-radius: 999px;
	padding: .3rem .75rem;
}
.level-quiz__rec-name {
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(1.6rem, 1.5vw + 1rem, 2.3rem);
	line-height: 1.1;
	color: var(--ill-text);
	margin: .25rem 0 0;
}
.level-quiz__rec-price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: .4rem;
}
.level-quiz__rec-price-num {
	font-family: var(--ill-font-display);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--ill-accent);
}
.level-quiz__rec-price-unit {
	color: var(--ill-text-muted);
	font-size: .95rem;
}
.level-quiz__rec-body {
	color: var(--ill-text-muted);
	font-size: .98rem;
	line-height: 1.55;
	margin: .25rem 0 0;
}
.level-quiz__rec-points {
	margin: .25rem 0 .25rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.level-quiz__rec-points li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--ill-text);
	font-size: .95rem;
	line-height: 1.4;
}
.level-quiz__rec-points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .5em;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--ill-accent);
	box-shadow: 0 0 0 4px rgba(82, 199, 163, 0.18);
}
.level-quiz__result .btn {
	margin-top: .75rem;
	align-self: flex-start;
}
@media (max-width: 600px) {
	.level-quiz__btn { padding: 1rem 1.1rem; column-gap: .85rem; }
	.level-quiz__btn-num { font-size: 1.55rem; }
	.level-quiz__btn-label { font-size: .98rem; }
	.level-quiz__btn-sub { font-size: .85rem; }
	.level-quiz__result { padding: 1.5rem 1.4rem 1.65rem; }
}

/* === Grille des livrables — variante IMAGED (cartes larges avec preview image) === */
.deliverables-grid--imaged {
	max-width: 1240px;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: dense;
	gap: 1.25rem;
	margin-top: 3rem;
}
/* Spotlight = format vertical 9:16 (Formats courts) ; il occupe la colonne 3 sur les 2 rangs. */
.deliverables-grid--imaged .deliverable-card--spotlight {
	grid-column: 3;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
}
.deliverable-card--spotlight .deliverable-card__media {
	aspect-ratio: auto;
	flex: 1 1 auto;
	min-height: 0;
}
/* Le body de la spotlight ne doit PAS grandir : c'est la media qui prend tout
   l'espace restant (sinon le body s'etale et laisse une grosse zone vide sous
   la video). */
.deliverable-card--spotlight .deliverable-card__body {
	flex-grow: 0;
	flex-shrink: 0;
}
@media (max-width: 820px) {
	.deliverables-grid--imaged { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
	.deliverables-grid--imaged .deliverable-card--spotlight {
		grid-column: auto;
		grid-row: auto;
	}
	.deliverable-card--spotlight .deliverable-card__media { aspect-ratio: 9 / 16; }
}
@media (max-width: 540px) {
	.deliverables-grid--imaged { grid-template-columns: 1fr; }
}

.deliverable-card {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(82, 199, 163, 0.22);
	overflow: hidden;
	transition: transform 450ms cubic-bezier(.19, 1, .22, 1),
	            border-color 300ms ease,
	            background 300ms ease,
	            box-shadow 350ms ease;
}
.deliverable-card:hover {
	transform: translateY(-4px);
	border-color: var(--ill-accent);
	background: rgba(82, 199, 163, 0.05);
	box-shadow: 0 24px 48px -28px rgba(82, 199, 163, 0.55);
}
.deliverable-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: linear-gradient(160deg, rgba(82, 199, 163, 0.10) 0%, rgba(18, 66, 55, 0.35) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(82, 199, 163, 0.18);
}
/* Le fond derriere video/slides/image reprend exactement la couleur du body
   (var(--ill-bg)) : les bandes letterbox au-dessus/en-dessous des reels et des
   slides s'invisibilisent dans la section. */
.deliverable-card__media.has-image,
.deliverable-card__media.has-video,
.deliverable-card__media.has-slides { background: var(--ill-bg); }
.deliv-carousel,
.deliv-carousel__track,
.deliv-carousel__slide { background: var(--ill-bg); }
.deliv-carousel__slide img { background: var(--ill-bg); }
/* Toutes les cards gardent le meme ratio media (4/3 par defaut) pour s'aligner.
   Les iframes verticales (9:16) seront letterboxees automatiquement par Vimeo. */
.deliverable-card__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
}
.deliverable-card__video-frame {
	width: 100%; height: 100%; display: block; border: 0;
}
.deliv-carousel {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	overflow: hidden;
}
.deliv-carousel__track {
	display: flex;
	width: 100%; height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.deliv-carousel__track::-webkit-scrollbar { display: none; }
.deliv-carousel__slide {
	flex: 0 0 100%;
	width: 100%; height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.deliv-carousel__slide img {
	width: 100%; height: 100%;
	object-fit: contain; display: block;
}
.deliv-carousel__nav {
	position: absolute;
	top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(13, 31, 26, 0.85);
	color: #fff;
	border: 1px solid rgba(82, 199, 163, 0.55);
	border-radius: 999px;
	cursor: pointer;
	z-index: 3;
	opacity: 1; /* Toujours visibles : la nav doit etre immediatement reperable */
	box-shadow: 0 6px 18px -8px rgba(0,0,0,0.55);
	transition: background 220ms ease, transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
	-webkit-appearance: none; appearance: none;
}
.deliv-carousel__nav:hover {
	background: var(--ill-accent);
	color: #0a1612;
	border-color: var(--ill-accent);
	transform: translateY(-50%) scale(1.06);
}
.deliv-carousel__nav--prev { left: .7rem; }
.deliv-carousel__nav--next { right: .7rem; }
.deliv-carousel__nav svg { width: 20px; height: 20px; }
.deliv-carousel__nav[disabled] { opacity: 0.35; pointer-events: none; }

.deliv-carousel__dots {
	position: absolute;
	left: 0; right: 0; bottom: .8rem;
	display: flex; justify-content: center; gap: .5rem;
	z-index: 3;
	padding: .35rem .65rem;
	width: max-content;
	margin-inline: auto;
	background: rgba(13, 31, 26, 0.6);
	border-radius: 999px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.deliv-carousel__dot {
	width: 10px; height: 10px;
	border-radius: 999px;
	border: 0;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	padding: 0;
	transition: background 200ms ease, width 200ms ease;
	-webkit-appearance: none; appearance: none;
}
.deliv-carousel__dot:hover { background: rgba(255, 255, 255, 0.85); }
.deliv-carousel__dot.is-active {
	background: var(--ill-accent);
	width: 26px;
}
.deliverable-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.deliverable-card__placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: rgba(82, 199, 163, 0.12);
	color: var(--ill-accent);
}
.deliverable-card__placeholder svg {
	width: 30px;
	height: 30px;
}
.deliverable-card__count {
	position: absolute;
	top: .85rem;
	right: 1rem;
	font-family: var(--ill-font-display);
	font-weight: 900;
	font-size: clamp(1.6rem, 1vw + 1.2rem, 2.1rem);
	line-height: 1;
	color: var(--ill-accent);
	letter-spacing: -.02em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.deliverable-card__body {
	padding: 1.1rem 1.15rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex-grow: 1;
}
.deliverable-card__label {
	font-family: var(--ill-font-display);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--ill-text);
	line-height: 1.25;
	margin: 0;
}
.deliverable-card__desc {
	font-size: .85rem;
	color: var(--ill-text-muted);
	line-height: 1.45;
	margin: 0;
}
@media (max-width: 600px) {
	.deliverable-card__media { aspect-ratio: 16 / 10; }
	.deliverable-card__body { padding: .9rem 1rem 1.05rem; }
	.deliverable-card__label { font-size: .95rem; }
	.deliverable-card__desc { font-size: .8rem; }
	.deliverable-card__count { top: .6rem; right: .75rem; font-size: 1.5rem; }
}

/* Rangée des logos plateformes au bas de chaque carte livrable */
.deliverable-card__platforms {
	list-style: none;
	padding: 0;
	margin: auto 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	padding-top: .85rem;
	border-top: 1px solid rgba(82, 199, 163, 0.18);
}
.deliverable-card__platforms li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	transition: background .2s ease, transform .2s ease;
}
.deliverable-card__platforms li:hover {
	background: rgba(82, 199, 163, 0.22);
	transform: translateY(-1px);
}
.deliverable-card__platform-logo {
	width: 14px;
	height: 14px;
	/* Les SVG SimpleIcons sont noirs : on les force en blanc via filter pour matcher le fond sombre */
	filter: brightness(0) invert(1);
	opacity: .85;
}
.deliverable-card__platforms li:hover .deliverable-card__platform-logo { opacity: 1; }

/* ============================================================
   TIMELINE VERTICALE (fil conducteur) — style Framer
   Composant canonique pour TOUTES les sections d'étapes/process.
   ============================================================ */
.section-timeline { padding-block: var(--ill-section-y); }
.section-timeline--alt { background: var(--ill-bg-2); }
.section-timeline__inner { max-width: 980px; margin-inline: auto; padding-inline: var(--ill-gutter, 1.5rem); }
.section-timeline__head { text-align: center; max-width: 720px; margin: 0 auto 3.25rem; }
.section-timeline__title { font-family: var(--ill-font-display); font-weight: 800; font-size: clamp(1.9rem, 3vw + 1rem, 3rem); color: var(--ill-text); margin: 1rem 0 .75rem; line-height: 1.1; }
.section-timeline__lead { color: var(--ill-text-muted); font-size: 1.05rem; max-width: 600px; margin-inline: auto; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; position: relative; }
.timeline__item { display: grid; grid-template-columns: 60px 1fr; gap: 1.5rem; align-items: start; position: relative; }
/* Fil conducteur : segment vertical du centre du node jusqu'au node suivant */
.timeline__item::before {
	content: ''; position: absolute; left: 30px; top: 60px; bottom: -1.5rem;
	width: 2px; transform: translateX(-50%);
	background: linear-gradient(180deg, var(--ill-accent) 0%, rgba(82,199,163,0.35) 100%);
}
.timeline__item:last-child::before { display: none; }

.timeline__node {
	width: 60px; height: 60px; border-radius: 18px;
	background: var(--ill-accent); color: var(--ill-bg);
	display: grid; place-items: center;
	font-family: var(--ill-font-display); font-weight: 800; font-size: 1.35rem;
	position: relative; z-index: 1; box-shadow: 0 6px 18px rgba(82,199,163,0.25);
}
.timeline__item--option .timeline__node {
	background: var(--ill-bg); border: 2px dashed var(--ill-accent);
	color: var(--ill-accent); font-size: 1.7rem; font-weight: 400; box-shadow: none;
}

.timeline__card {
	background: var(--ill-bg-3); border: 1px solid var(--ill-border);
	border-radius: 22px; padding: 1.6rem 1.85rem;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.timeline__card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.18); border-color: rgba(82,199,163,0.4); }
.timeline__item--option .timeline__card { background: rgba(255,255,255,0.025); }
.timeline__card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem .75rem; margin-bottom: .65rem; }
.timeline__step-title { font-family: var(--ill-font-display); font-weight: 800; font-size: 1.25rem; color: var(--ill-text); margin: 0; }
.timeline__step-text { color: var(--ill-text-muted); margin: 0; line-height: 1.6; }
.timeline__badge {
	font-family: var(--ill-font-body); font-size: .72rem; font-weight: 700; letter-spacing: .02em;
	padding: .28rem .7rem; border-radius: 999px;
	background: rgba(82,199,163,0.14); color: var(--ill-accent); white-space: nowrap;
}
.timeline__badge--option { background: rgba(255,255,255,0.07); color: var(--ill-text-muted); text-transform: uppercase; }

@media (max-width: 600px) {
	.timeline__item { grid-template-columns: 46px 1fr; gap: 1rem; }
	.timeline__item::before { left: 23px; top: 46px; }
	.timeline__item:has(+ .timeline__item--option)::before,
	.timeline__item--option::before { left: 23px; }
	.timeline__node { width: 46px; height: 46px; border-radius: 14px; font-size: 1.05rem; }
	.timeline__card { padding: 1.25rem 1.35rem; border-radius: 18px; }
}

/* ============================================================
   BOUTONS LOGOS PLATEFORMES (single podcast) — logos SVG de marque
   ============================================================ */
.podcast-platforms-grid { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.platform-logo-btn {
	display: inline-flex; align-items: center; gap: .7rem;
	padding: .85rem 1.4rem; border-radius: 999px;
	background: var(--ill-bg-3); border: 1px solid var(--ill-border);
	color: var(--ill-text); font-family: var(--ill-font-display); font-weight: 700; font-size: 1rem;
	text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.platform-logo-btn:hover { transform: translateY(-2px); border-color: var(--brand-color); box-shadow: 0 8px 22px rgba(0,0,0,0.2); }
.platform-logo-btn__icon { display: inline-flex; width: 26px; height: 26px; color: var(--brand-color); }
.platform-logo-btn__icon svg { width: 100%; height: 100%; display: block; }
.platform-logo-btn__label { line-height: 1; }

/* Divider label "Le détail de chaque étape" — clarifie overview vs détail (methode) */
.section-divider-label { padding: 1.5rem 0 .5rem; }
.section-divider-label .container { display: flex; align-items: center; gap: 1.25rem; max-width: 720px; }
.section-divider-label__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ill-border), transparent); }
.section-divider-label__text { font-family: var(--ill-font-body); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ill-accent); white-space: nowrap; }

/* Vidéo principale intégrée DANS le header étude de cas (vs section dédiée) — retour Tim 25/05 */
.case-single__hero-video {
	margin: clamp(2rem, 4vw, 3.25rem) auto 0;
	max-width: 920px;
	width: 100%;
}
.case-single__hero-video .vimeo-facade { box-shadow: 0 32px 80px rgba(0,0,0,0.45); }
.case-single__hero-video figure { margin: 0; border-radius: var(--ill-radius); overflow: hidden; border: 1px solid var(--ill-border); box-shadow: 0 32px 80px rgba(0,0,0,0.45); }
.case-single__hero-video figure img { display: block; width: 100%; height: auto; }
.case-single__hero--with-video { overflow: visible; }

/* Le point custom qui suivait la souris a ete remplace par des curseurs natifs colorises */
.ill-cursor-dot { display: none !important; }

/* ===== Curseurs natifs colorises en charte (turquoise clair fill + turquoise fonce stroke) ===== */
/* Curseur par defaut : fleche classique en turquoise. Hotspot (3, 2) */
@media (pointer: fine) {
  html, body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2352C7A3' stroke='%23124237' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'><path d='M3 2 L3 18 L7.5 14 L10 20 L13 19 L10.5 13 L16 13 Z'/></svg>") 3 2, auto;
  }
  /* Curseur main "web pointer" iconique, redessine proprement. Hotspot au bout de l'index (9, 1) */
  a, button, [role='button'], [type='button'], [type='submit'], label[for], summary,
  .cta-pill, .header-btn, .site-header__link, .site-header__brand,
  .dual-card, .case-card, .pricing-card, .pricing-card-inline, .kpi,
  .use-case-card, .benefit-card, .founder-card, .guest-card, .step-card-v2,
  .testimonial-card, .team-slide, .proof__stats li,
  .mega-menu__feature, .mega-menu__links a, .mega-menu__cta-pill,
  .vimeo-facade, .cyclo-stage__dot,
  [data-mega], [onclick] {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' viewBox='0 0 24 30' fill='%2352C7A3' stroke='%23124237' stroke-width='1.3' stroke-linejoin='miter' stroke-linecap='butt'><path d='M8 1 L11 1 L11 12 L12 12 L12 11 L14 11 L14 12 L15 12 L15 11 L17 11 L17 13 L18 13 L18 12 L20 12 L20 22 L19 23 L19 28 L6 28 L6 24 L5 24 L5 22 L4 22 L4 20 L3 20 L3 17 L4 17 L4 16 L5 16 L6 17 L7 17 L7 1 Z'/></svg>") 9 1, pointer;
  }
  /* I-beam pour les champs texte (UX standard) */
  input:not([type='button']):not([type='submit']):not([type='checkbox']):not([type='radio']),
  textarea {
    cursor: text;
  }
}

/* ===== Fond gradient global : sections en transparent pour laisser passer le dégradé du body ===== */
/* On garde l'opacité sur les CARTES (case-card, kpi, dual-card, footer, nav mobile, etc.), seulement les sections "pleine largeur" deviennent transparentes. */
.proof,
.proof--inline,
.case-single__testimonial,
.cases--alt,
.content-block--alt,
.dual-model,
.differentiator,
.team,
.home-blog,
.cta-final {
  background: transparent;
}

/* Séparateurs entre sections : trait turquoise très léger qui délimite chaque bloc */
.proof,
.cases,
.dual-model,
.team,
.testimonials,
.home-blog,
.cta-final {
  border-top: 1px solid rgba(82, 199, 163, 0.18);
}

/* ===== HOME - Section L'équipe (marquee défilant des photos d'équipe) ===== */
.team { padding-block: var(--ill-section-y); overflow: hidden; }
.team__head { text-align: center; max-width: 760px; margin: 0 auto 3rem; padding-inline: var(--ill-gutter); }
.team__head .hero__eyebrow { margin-bottom: 1.25rem; }
.team__marquee.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.team__track { gap: 2rem; animation-duration: 50s; }
.team-slide {
  margin: 0;
  flex-shrink: 0;
  border-radius: var(--ill-radius);
  overflow: hidden;
  background: var(--ill-bg-3);
  border: 1px solid rgba(82, 199, 163, 0.2);
  position: relative;
  width: clamp(280px, 36vw, 460px);
  aspect-ratio: 1 / 1;
}
.team-slide__media {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(82,199,163,0.22), rgba(82,199,163,0.05));
  overflow: hidden;
}
.team-slide__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.team-slide__placeholder {
  font-family: var(--ill-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ill-accent);
  padding: 1.5rem;
  text-align: center;
  min-width: 280px;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.team-slide__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: 3rem 1.25rem 1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.65) 100%);
  text-align: center;
}
.team-slide__caption-name {
  font-family: var(--ill-font-mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
}
.team-slide__caption-sub {
  font-family: var(--ill-font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ill-accent);
}

/* ===== Reveal scroll : état initial caché + transition douce vers la position normale ===== */
.ill-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1100ms cubic-bezier(.19, 1, .22, 1), transform 1100ms cubic-bezier(.19, 1, .22, 1);
  will-change: opacity, transform;
}
.ill-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hover premium sur cards : scale subtil + lueur turquoise */
.dual-card, .case-card, .testimonial-card {
  transition: transform 550ms cubic-bezier(.19, 1, .22, 1),
              border-color 350ms ease,
              box-shadow 450ms ease;
}
.dual-card:hover, .case-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 18px 50px -28px rgba(82, 199, 163, 0.45), 0 2px 10px -6px rgba(0,0,0,0.35);
}
/* Team-slide : pas de transform au hover (interfere avec l'animation marquee + recadre la photo). Juste un glow turquoise subtil. */
.team-slide {
  transition: border-color 350ms ease, box-shadow 450ms ease;
}
.team-slide:hover {
  border-color: rgba(82, 199, 163, 0.6);
  box-shadow: 0 16px 40px -22px rgba(82, 199, 163, 0.55);
}

/* Parallax images : transition GPU pour fluidité */
[data-parallax] { will-change: transform; transition: transform 80ms linear; }
@media (prefers-reduced-motion: reduce) {
  .ill-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================================================================
   HOMOGÉNÉISATION GLOBALE — tout le site reprend le style de la home
   ===================================================================== */

/* A. Toutes les sections pleine largeur deviennent transparentes pour laisser passer le gradient body en continu. Les CARTES (case-card, pricing-card, dual-card, kpi, testimonial-card, footer, header pill, mega-menu) gardent leur opacite pour le contraste. */
.hero,
.contact-hero,
.page-body,
.page-svc,
.page-content-blocks,
.content-block,
.content-block--alt,
.methode-steps,
.case-single,
.case-single__hero,
.case-single__testimonial,
.section-split,
.section-split--alt,
.section-features,
.section-features--alt,
.section-features--accent,
.section-steps,
.section-steps--alt,
.section-compare2,
.section-compare2--alt,
.section-faq,
.section-faq--alt,
.section-clients,
.section-clients--alt,
.section-bignum,
.section-bignum--alt,
.section-bignum--accent,
.section-timeline,
.section-timeline--alt,
.section-cta-band,
.pricing-production,
.pricing-studio,
.realisations-page__grid-section,
.realisations-page__stats,
.realisations-page__cta,
.cases,
.cases--alt,
.cases--prominent,
.proof,
.proof--inline,
.proof--light,
.benefits-grid,
.benefits-intro,
.benefit-body,
.benefit-callout,
.benefit-siblings,
.catalogue-body,
.catalogue-tags,
.step-editorial,
.step-immersive,
.step-split-image,
.step-timeline,
.contact-grid,
.founders,
.hero__clients,
.cta-final,
.differentiator,
.team,
.dual-model,
.testimonials,
.home-blog {
  background: transparent !important;
}

/* La grille de methode-steps avait un fond opaque interne, on le neutralise aussi */
.methode-steps__grid { background: transparent !important; }

/* Les variantes --alt qui ajoutaient un fond bg-2 pour alterner ne servent plus a rien : on garde la transparence pour que le gradient soit continu */

/* B. Trait turquoise tres leger en haut de chaque grande section (deja sur home, on etend a tout le site) */
.page-body,
.page-svc,
.page-content-blocks,
.content-block,
.methode-steps,
.case-single__testimonial,
.section-split,
.section-features,
.section-steps,
.section-compare2,
.section-faq,
.section-clients,
.section-bignum,
.section-timeline,
.section-cta-band,
.pricing-production,
.pricing-studio,
.realisations-page__grid-section,
.realisations-page__stats,
.realisations-page__cta,
.cases,
.proof,
.proof--inline,
.benefits-grid,
.catalogue-body,
.step-editorial,
.step-immersive,
.step-split-image,
.step-timeline,
.founders,
.dual-model,
.team,
.testimonials,
.home-blog,
.cta-final {
  border-top: 1px solid rgba(82, 199, 163, 0.18);
}

/* Premiere section apres le header (souvent un hero) : pas de trait pour ne pas couper la page en deux */
.hero,
.contact-hero,
.case-single__hero,
.benefits-intro {
  border-top: 0;
}

/* C. Hover premium (scale 1.012 + lueur turquoise) etendu aux cards des pages internes (sauf team-slide qui est dans un marquee defilant) */
.dual-card,
.case-card,
.testimonial-card,
.pricing-card,
.pricing-card-inline,
.kpi,
.use-case-card,
.step-card-v2,
.benefit-card,
.founder-card,
.guest-card {
  transition: transform 550ms cubic-bezier(.19, 1, .22, 1),
              border-color 350ms ease,
              box-shadow 450ms ease;
}
.dual-card:hover,
.case-card:hover,
.pricing-card:hover,
.pricing-card-inline:hover,
.kpi:hover,
.use-case-card:hover,
.step-card-v2:hover,
.benefit-card:hover,
.founder-card:hover,
.guest-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 18px 50px -28px rgba(82, 199, 163, 0.45), 0 2px 10px -6px rgba(0,0,0,0.35);
}

/* =====================================================================
   FIX BANDES DE FOND — patch global "une bonne fois pour toutes"
   ---------------------------------------------------------------------
   Tous les wrappers de section, peu importe leur classe, sont forces
   en transparent. Le seul fond visible = html (solide #1a5848).
   Les CARTES (case-card, pricing-card, dual-card, kpi, deliverable-card,
   level-quiz__result, testimonial-card, footer, header pill) gardent
   leur fond pour rester contrastees.
   Si un nouveau composant cree des bandes : ajouter sa classe a la
   liste des selecteurs ci-dessous OU prefixer sa classe par "section-",
   "step-", "pricing-", "page-", "case-single", "home-".
   ===================================================================== */
:where(
  body > section,
  body > article,
  body > main,
  main > section,
  main > article,
  article > section,
  [class*="section-"],
  [class*="step-"]:not(.step-card-v2):not(.step-card-v2__icon):not(.step-card-v2__num),
  [class*="pricing-"]:not(.pricing-card):not(.pricing-card-inline):not(.pricing-card__cta):not(.pricing-card__num):not(.pricing-card-inline__price):not([class*="pricing-card_"]),
  [class*="page-"]:not(.page-numbers):not(.page-hero__title):not(.page-hero__lead):not(.page-hero__eyebrow):not(.page-hero__cta),
  [class*="home-"],
  [class*="catalogue-"],
  [class*="content-block"],
  [class*="methode-"],
  [class*="benefits-"]:not(.benefit-card),
  [class*="case-single"]:not(.case-single__featured):not(.case-single__testimonial-card):not(.case-single__title),
  [class*="realisations-page__"],
  .hero,
  .hero__clients,
  .contact-hero,
  .contact-grid,
  .founders,
  .cta-final,
  .differentiator,
  .team,
  .testimonials,
  .dual-model,
  .proof,
  .proof--inline,
  .proof--light,
  .cases,
  .cases--alt,
  .cases--prominent,
  .case-single,
  .vsl-scroll-section
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Les titres heros utilisent un effet "gradient texte" via background-clip: text.
   Mon override les rendait invisibles : on restaure le gradient et le clip. */
.page-hero__title,
.hero__title,
.case-single__title {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.85) 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.85) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Le ::before des CTA bands creait un halo radial visible sur fond solide.
   On le neutralise pour ne plus rien interrompre. */
.section-cta-band::before,
.cta-final::before,
.section-features::before { background: none !important; }

/* Les "traits turquoise" en haut de section etaient subtils mais soulignaient
   quand meme la jonction. Sur fond solide unique, ils ne servent plus a rien. */
.page-body,
.page-svc,
.page-content-blocks,
.content-block,
.methode-steps,
.case-single__testimonial,
.section-split,
.section-features,
.section-steps,
.section-compare2,
.section-faq,
.section-clients,
.section-bignum,
.section-timeline,
.section-cta-band,
.pricing-production,
.pricing-studio,
.realisations-page__grid-section,
.realisations-page__stats,
.realisations-page__cta,
.cases,
.proof,
.proof--inline,
.benefits-grid,
.catalogue-body,
.step-editorial,
.step-immersive,
.step-split-image,
.step-timeline,
.founders,
.dual-model,
.team,
.testimonials,
.home-blog,
.cta-final {
  border-top: 0 !important;
}