/* ─────────────────────────────────────────
   Next Digital : Single service page
   Inside .nd-site-wrap (dark bezel viewport).
───────────────────────────────────────── */

.nd-site-wrap main.nd-svcs-main {
	max-width: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   1. HERO
══════════════════════════════════════════════════════════════ */

.nd-svcs-hero {
	position: relative;
	min-height: 82dvh;
	display: flex;
	align-items: center;
	padding: 96px 48px 100px;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 60% at 80% 30%, oklch(20% 0.16 195 / 0.55) 0%, transparent 60%),
		radial-gradient(ellipse 70% 50% at 10% 80%, oklch(18% 0.18 210 / 0.4) 0%, transparent 60%),
		linear-gradient(180deg, oklch(9% 0.04 220) 0%, oklch(7% 0.035 220) 100%);
}

.nd-svcs-hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}
.nd-svcs-hero-bloom {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	mix-blend-mode: screen;
	will-change: transform;
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nd-svcs-hero-bloom-1 {
	top: -10%; right: -8%;
	width: 600px; height: 600px;
	background: radial-gradient(circle, oklch(62% 0.26 200 / 0.78) 0%, transparent 65%);
	animation: nd-svcs-bloom-1 24s ease-in-out infinite alternate;
}
.nd-svcs-hero-bloom-2 {
	bottom: -15%; left: -10%;
	width: 680px; height: 680px;
	background: radial-gradient(circle, oklch(58% 0.22 190 / 0.6) 0%, transparent 65%);
	animation: nd-svcs-bloom-2 30s ease-in-out infinite alternate;
}
@keyframes nd-svcs-bloom-1 { 0%{transform:translate3d(0,0,0);} 100%{transform:translate3d(-10%,8%,0);} }
@keyframes nd-svcs-bloom-2 { 0%{transform:translate3d(0,0,0);} 100%{transform:translate3d(12%,-10%,0);} }

.nd-svcs-hero-svg {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	display: block;
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}
.nd-svcs-hero-curve {
	stroke-dasharray: 2400;
	stroke-dashoffset: 2400;
	animation: nd-svcs-curve-flow 20s ease-in-out infinite alternate;
	will-change: stroke-dashoffset;
}
.nd-svcs-hero-curve-1 { animation-delay: 0s;    animation-duration: 18s; }
.nd-svcs-hero-curve-2 { animation-delay: -4s;   animation-duration: 22s; }
.nd-svcs-hero-curve-3 { animation-delay: -8s;   animation-duration: 20s; }
.nd-svcs-hero-curve-4 { animation-delay: -12s;  animation-duration: 24s; }
@keyframes nd-svcs-curve-flow { 0%{stroke-dashoffset:2400;} 100%{stroke-dashoffset:-2400;} }

.nd-svcs-hero-logo {
	position: absolute;
	right: -2%;
	top: 50%;
	/* Reduit : il ne porte plus le fond a lui seul, il l'accompagne. */
	width: 34%;
	max-width: 460px;
	pointer-events: none;
	color: oklch(96% 0.04 200);
	transform: translateY(-50%);
	transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}
.nd-svcs-hero-logo svg {
	width: 100%; height: auto; display: block;
	filter:
		drop-shadow(0 0 4px oklch(95% 0.06 195 / 0.7))
		drop-shadow(0 0 18px oklch(80% 0.18 195 / 0.4))
		drop-shadow(0 0 36px oklch(65% 0.22 200 / 0.18));
	opacity: 0.6;
}
.nd-svcs-hero-logo #logo-outline { stroke: currentColor; stroke-width: 1.5; fill: none; }

.nd-svcs-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
}

/* Le fil d'Ariane est un composant partage : ses styles vivent dans main.css
   sous .nd-breadcrumb, il sert aussi aux deux pages meres. */

/* Un seul grand titre, qui porte la page a lui seul depuis que l'accroche a
   fusionne dedans. Memes reglages que le titre des pages secteur : c'est la
   typographie principale des titres du site, elle ne doit pas varier d'un
   modele a l'autre. */
.nd-site-wrap .nd-svcs-hero-title {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(40px, 6.8vw, 72px);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.04em;
	margin: 0 0 30px;
	color: oklch(97% 0.004 215);
	/* Mesure elargie en meme temps que la taille : a nombre de caracteres egal,
	   des lignes plus longues font moins de lignes, et c'est la hauteur totale
	   du titre qui limite, pas sa taille de police. 22ch tient le plus long des
	   sept titres, 84 caracteres, en moins de quatre lignes. */
	max-width: 22ch;
}
/* Partage avec le titre des pages secteur : meme mecanique, meme rythme. */
.nd-svcs-hero-title .nd-word,
.nd-chero-title .nd-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.nd-svcs-hero-title .nd-word > span,
.nd-chero-title .nd-word > span {
	display: inline-block;
	transform: translateY(110%); opacity: 0;
	animation: nd-svcs-word-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes nd-svcs-word-up { to { transform: translateY(0); opacity: 1; } }

/* L'accroche complete le titre, elle ne le concurrence pas. En gros, en bleu
   et en italique, elle pesait autant que le H1 et alourdissait tout le hero. */
.nd-svcs-hero-tagline {
	display: block;
	margin: 14px 0 0;
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(17px, 1.7vw, 23px);
	font-weight: 400;
	font-style: normal;
	letter-spacing: -0.005em;
	line-height: 1.4;
	color: oklch(88% 0.012 215);
	max-width: 44ch;
	opacity: 0;
	animation: nd-svcs-fade-up 0.9s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.nd-svcs-hero-tagline em { font-style: normal; }

.nd-svcs-hero-sub {
	font-size: 18px;
	line-height: 1.6;
	color: oklch(78% 0.04 215);
	max-width: 600px;
	margin: 0 0 36px;
	opacity: 0;
	animation: nd-svcs-fade-up 0.9s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes nd-svcs-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.nd-svcs-hero-actions {
	display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
	opacity: 0;
	animation: nd-svcs-fade-up 0.9s 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.nd-svcs-hero-cta { display: inline-flex; align-items: center; gap: 10px; }
.nd-svcs-hero-scroll {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--nd-font-label);
	font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
	color: oklch(75% 0.04 215); text-decoration: none;
	transition: color 0.2s;
}
.nd-svcs-hero-scroll:hover { color: var(--nd-accent); }
.nd-svcs-hero-scroll svg {
	width: 12px; height: 16px;
	animation: nd-svcs-bounce 2.4s ease-in-out infinite;
}
@keyframes nd-svcs-bounce {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50%      { transform: translateY(4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.nd-svcs-hero-curve, .nd-svcs-hero-bloom { animation: none; }
	.nd-svcs-hero-curve { stroke-dashoffset: 0; }
	.nd-svcs-hero-title .nd-word > span,
	.nd-chero-title .nd-word > span,
	.nd-svcs-hero-tagline,
	.nd-svcs-hero-sub,
	.nd-svcs-hero-actions { animation: none; opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   2. POURQUOI C'EST IMPORTANT : image + glass + SVG behind
══════════════════════════════════════════════════════════════ */

.nd-svcs-why {
	position: relative;
	background: oklch(5% 0.03 222);
	border-top: 1px solid oklch(100% 0 0 / 0.05);
	padding: var(--nd-section-y) 48px;
	z-index: 1;
	overflow: hidden;
}
.nd-svcs-why-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.85;
}
.nd-svcs-why-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nd-svcs-why-curve {
	stroke-dasharray: 2400;
	stroke-dashoffset: 2400;
	animation: nd-svcs-curve-flow 26s ease-in-out infinite alternate;
}
.nd-svcs-why-curve-1 { animation-delay: 0s;   animation-duration: 22s; }
.nd-svcs-why-curve-2 { animation-delay: -7s;  animation-duration: 28s; }
.nd-svcs-why-curve-3 { animation-delay: -14s; animation-duration: 24s; }

.nd-svcs-why-grid {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 48px;
	align-items: stretch;
}

.nd-svcs-why-media {
	position: relative;
	margin: 0;
	border-radius: 22px;
	overflow: hidden;
	min-height: 460px;
}
.nd-svcs-why-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	position: absolute; inset: 0;
}
.nd-svcs-why-media-ph {
	width: 100%; height: 100%;
	min-height: 460px;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(circle at 30% 30%, oklch(20% 0.10 200 / 0.6) 0%, transparent 60%),
		oklch(10% 0.04 220);
	font-family: var(--nd-font-label);
	font-size: 96px;
	font-weight: 200;
	color: oklch(60% 0.20 200 / 0.5);
	letter-spacing: 4px;
}
.nd-svcs-why-media-veil {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse 60% 50% at 80% 100%, oklch(60% 0.24 200 / 0.30) 0%, transparent 65%),
		linear-gradient(180deg, transparent 0%, transparent 65%, oklch(5% 0.03 222 / 0.5) 100%);
	pointer-events: none;
}
.nd-svcs-why-corner {
	position: absolute; width: 32px; height: 32px; pointer-events: none;
}
.nd-svcs-why-corner-tl {
	top: 16px; left: 16px;
	border-top: 1.5px solid var(--nd-accent);
	border-left: 1.5px solid var(--nd-accent);
	border-radius: 4px 0 0 0;
}
.nd-svcs-why-corner-br {
	bottom: 16px; right: 16px;
	border-bottom: 1.5px solid var(--nd-accent);
	border-right: 1.5px solid var(--nd-accent);
	border-radius: 0 0 4px 0;
}

.nd-svcs-why-card {
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 460px;
}
.nd-svcs-why-content > * { margin: 0 0 18px; }
.nd-svcs-why-content > *:last-child { margin-bottom: 0; }
.nd-svcs-why-eyebrow {
	font-family: var(--nd-font-label) !important;
	font-size: 11px !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	color: var(--nd-accent) !important;
	margin: 0 0 4px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
}
.nd-svcs-why-content h2,
.nd-svcs-why-h2 {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: oklch(96% 0.005 215);
	margin: 0 0 12px;
}
.nd-svcs-why-content h2 em,
.nd-svcs-why-h2 em {
	font-style: italic;
	font-weight: 300;
	color: var(--nd-accent);
}
.nd-svcs-why-content p,
.nd-svcs-why-card > p {
	font-size: 15.5px;
	line-height: 1.7;
	color: oklch(80% 0.025 215);
	margin: 0;
}
.nd-svcs-why-content p strong,
.nd-svcs-why-card > p strong { color: oklch(95% 0.005 215); font-weight: 500; }

.nd-svcs-why-foot {
	margin: auto 0 0;
	padding-top: 22px;
	border-top: 1px solid oklch(100% 0 0 / 0.07);
	display: flex;
}
.nd-svcs-why-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* ══════════════════════════════════════════════════════════════
   3. PILLARS : sticky nav + scroll-active cards with beam
══════════════════════════════════════════════════════════════ */

.nd-svcs-pillars {
	position: relative;
	background: oklch(6% 0.025 222);
	border-top: 1px solid oklch(100% 0 0 / 0.04);
	padding: var(--nd-section-y) 48px;
	z-index: 1;
}
.nd-svcs-pillars-header {
	max-width: 1280px;
	margin: 0 auto 56px;
}
.nd-svcs-pillars-eyebrow {
	font-family: var(--nd-font-label);
	font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
	color: var(--nd-accent);
	margin: 0 0 16px;
}
.nd-svcs-pillars-h2 {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: oklch(96% 0.005 215);
	margin: 0;
	max-width: 760px;
}
.nd-svcs-pillars-h2 em { font-style: italic; font-weight: 300; color: var(--nd-accent); }

.nd-svcs-pillars-grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(280px, 360px) 1fr;
	gap: 64px;
	align-items: start;
}

/* Sticky nav (left): bigger titles, more presence */
.nd-svcs-pillars-nav {
	position: sticky;
	top: 100px;
	align-self: start;
}
.nd-svcs-pillars-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.nd-site-wrap .nd-svcs-pillars-nav-link,
.nd-svcs-pillars-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 4px;
	font-family: 'DM Sans', sans-serif;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--nd-text-dim);
	text-decoration: none;
	transition: color 0.25s, padding-left 0.3s, font-weight 0.25s;
}
.nd-svcs-pillars-nav-link:hover {
	color: oklch(85% 0.02 215);
	padding-left: 8px;
}
.nd-svcs-pillars-nav-link.is-active {
	color: oklch(96% 0.005 215);
	font-weight: 500;
	padding-left: 14px;
}
.nd-svcs-pillars-nav-arrow {
	display: inline-block;
	color: var(--nd-accent);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.25s, transform 0.3s;
	font-size: 20px;
}
.nd-svcs-pillars-nav-link.is-active .nd-svcs-pillars-nav-arrow {
	opacity: 1;
	transform: translateX(0);
}

/* Right column: stacked cards, active gets the beam */
.nd-svcs-pillars-cards {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nd-svcs-pillar-card {
	position: relative;
	background: var(--nd-elev-1);
	border: 1px solid var(--nd-elev-border);
	border-radius: 20px;
	padding: 28px 32px 30px;
	scroll-margin-top: 120px;
	transition: background 0.4s, border-color 0.4s, transform 0.4s, box-shadow 0.4s;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 1px 0 oklch(100% 0 0 / 0.05) inset;
}
.nd-svcs-pillar-card.is-active {
	background: var(--nd-elev-2);
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 oklch(100% 0 0 / 0.10) inset,
		0 0 0 1px oklch(60% 0.24 200 / 0.30),
		0 30px 60px -20px oklch(0% 0 0 / 0.5);
}

/* Rotating beam border: only on the active card */
.nd-svcs-pillar-card::before {
	content: '';
	position: absolute; inset: 0;
	border-radius: inherit; padding: 1.5px;
	background: conic-gradient(
		from var(--nd-beam-a),
		transparent 0%, transparent 62%,
		oklch(85% 0.14 192 / 0.5) 76%,
		oklch(97% 0.03 200 / 1)   82%,
		oklch(85% 0.14 192 / 0.5) 88%,
		transparent 100%
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	animation: nd-beam-spin 4.5s linear infinite;
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.45s ease-out;
}
.nd-svcs-pillar-card.is-active::before { opacity: 1; }

.nd-svcs-pillar-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 50% at 0% 0%, oklch(60% 0.24 200 / 0) 0%, transparent 60%);
	transition: background 0.4s;
	pointer-events: none;
	z-index: 0;
}
.nd-svcs-pillar-card.is-active::after {
	background: radial-gradient(ellipse 70% 50% at 0% 0%, oklch(60% 0.24 200 / 0.12) 0%, transparent 60%);
}

.nd-svcs-pillar-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 12px;
	position: relative;
	z-index: 1;
}
.nd-svcs-pillar-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
}
.nd-svcs-pillar-n {
	font-family: var(--nd-font-label);
	font-size: 11px;
	letter-spacing: 1.4px;
	color: var(--nd-accent);
}
.nd-svcs-pillar-h {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(26px, 2.6vw, 32px);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: oklch(96% 0.005 215);
	margin: 0;
}
.nd-svcs-pillar-icon {
	flex-shrink: 0;
	width: 42px; height: 42px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 11px;
	background: oklch(60% 0.24 200 / 0.10);
	border: 1px solid oklch(60% 0.24 200 / 0.2);
	color: var(--nd-accent);
	transition: background 0.35s, border-color 0.35s, transform 0.35s;
}
.nd-svcs-pillar-icon svg { width: 22px; height: 22px; }
.nd-svcs-pillar-icon img {
	width: 26px; height: 26px;
	object-fit: contain;
	display: block;
}
.nd-svcs-pillar-card.is-active .nd-svcs-pillar-icon {
	background: oklch(60% 0.24 200 / 0.18);
	border-color: oklch(60% 0.24 200 / 0.45);
	transform: rotate(-4deg);
}

.nd-svcs-pillar-lead {
	font-size: 17px;
	line-height: 1.6;
	color: oklch(86% 0.025 215);
	margin: 0 0 22px;
	max-width: 620px;
	position: relative;
	z-index: 1;
}

.nd-svcs-pillar-caps {
	margin: 0 0 20px;
	position: relative;
	z-index: 1;
}
.nd-svcs-pillar-caps-label {
	font-family: var(--nd-font-label);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--nd-accent);
	margin: 0 0 12px;
}
.nd-svcs-pillar-caps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.nd-svcs-pillar-caps-list li {
	position: relative;
	padding-left: 20px;
	font-size: 15.5px;
	line-height: 1.6;
	color: oklch(82% 0.03 215);
}
.nd-svcs-pillar-caps-list li::before {
	content: '';
	position: absolute;
	left: 0; top: 10px;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--nd-accent);
	opacity: 0.8;
}

.nd-svcs-pillar-conclusion {
	font-size: 15px;
	line-height: 1.6;
	color: oklch(80% 0.05 200);
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--nd-elev-border);
	font-style: italic;
	position: relative;
	z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   4. CONTENT : Gutenberg post_content
══════════════════════════════════════════════════════════════ */

.nd-svcs-content-section {
	position: relative;
	background: oklch(5% 0.03 222);
	border-top: 1px solid oklch(100% 0 0 / 0.04);
	padding: var(--nd-section-y) 48px;
	z-index: 1;
}
.nd-svcs-content-inner { max-width: 880px; margin: 0 auto; }
.nd-svcs-content {
	font-size: 16px;
	line-height: 1.75;
	color: oklch(80% 0.025 215);
}
.nd-svcs-content > * { margin: 0 0 22px; }
.nd-svcs-content h2 {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: oklch(96% 0.005 215);
	margin: 48px 0 18px;
}
.nd-svcs-content h3 {
	font-family: 'DM Sans', sans-serif;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: oklch(96% 0.005 215);
	margin: 32px 0 14px;
}
.nd-svcs-content ul,
.nd-svcs-content ol { padding-left: 22px; margin: 0 0 22px; }
.nd-svcs-content li { margin-bottom: 8px; }
.nd-svcs-content blockquote {
	border-left: 2px solid var(--nd-accent);
	padding: 4px 0 4px 22px;
	margin: 32px 0;
	font-size: 18px;
	font-style: italic;
	color: oklch(90% 0.01 215);
}
.nd-svcs-content img,
.nd-svcs-content .wp-block-image {
	border-radius: 14px;
	overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   5-8. FINALE : shared animated background under the last 4 sections
   (audience + zones + bigcta + others). Drifting curves, faint rays,
   pulsing nodes + a mouse-follow glow (set by JS).
══════════════════════════════════════════════════════════════ */

.nd-svcs-finale { position: relative; }
.nd-svcs-finale > section { position: relative; z-index: 1; }
/* All 4 sections share the same canvas : transparent backgrounds + no
   borders, so the SVG lines and the mouse glow traverse continuously
   from "Pour qui" all the way down through "Nos autres services". */
.nd-svcs-finale .nd-svcs-audience-section,
.nd-svcs-finale .nd-svcs-zones-section,
.nd-svcs-finale .nd-svcs-bigcta-section,
.nd-svcs-finale .nd-svcs-others-section {
	background: transparent !important;
	border-top: 0 !important;
}
/* Single shared base behind the SVG. A subtle inset vignette adds depth
   without breaking the continuity. */
.nd-svcs-finale::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 30% at 50% 12%,  oklch(60% 0.24 200 / 0.06) 0%, transparent 60%),
		radial-gradient(ellipse 80% 30% at 50% 62%,  oklch(60% 0.24 200 / 0.07) 0%, transparent 60%),
		linear-gradient(180deg, var(--nd-elev-0) 0%, oklch(5% 0.03 224) 100%);
	z-index: 0;
}

.nd-svcs-finale-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.nd-svcs-finale-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.85;
}

/* Drifting curves : translate slowly on X to feel alive without distracting */
.nd-svcs-finale-curve {
	will-change: transform;
	transform-origin: 50% 50%;
}
.nd-svcs-finale-curve-1 { animation: nd-finale-drift-a 32s ease-in-out infinite alternate; }
.nd-svcs-finale-curve-2 { animation: nd-finale-drift-b 38s ease-in-out infinite alternate; }
.nd-svcs-finale-curve-3 { animation: nd-finale-drift-a 44s ease-in-out infinite alternate; }
.nd-svcs-finale-curve-4 { animation: nd-finale-drift-b 36s ease-in-out infinite alternate; }
.nd-svcs-finale-curve-5 { animation: nd-finale-drift-a 40s ease-in-out infinite alternate; }
.nd-svcs-finale-curve-6 { animation: nd-finale-drift-b 34s ease-in-out infinite alternate; }
.nd-svcs-finale-curve-7 { animation: nd-finale-drift-a 42s ease-in-out infinite alternate; }

/* Diagonal dashed lines : slowly slide their dash pattern */
.nd-svcs-finale-diag { will-change: stroke-dashoffset; }
.nd-svcs-finale-diag-1 { animation: nd-finale-dash-flow 18s linear infinite; }
.nd-svcs-finale-diag-2 { animation: nd-finale-dash-flow-r 22s linear infinite; }
@keyframes nd-finale-dash-flow   { to { stroke-dashoffset: -200; } }
@keyframes nd-finale-dash-flow-r { to { stroke-dashoffset:  200; } }

/* Animated dash-flow traces : data sliding along curved paths */
.nd-svcs-finale-trace { will-change: stroke-dashoffset; }
.nd-svcs-finale-trace-1 { animation: nd-finale-dash-flow   14s linear infinite; }
.nd-svcs-finale-trace-2 { animation: nd-finale-dash-flow-r 17s linear infinite; }
.nd-svcs-finale-trace-3 { animation: nd-finale-dash-flow   16s linear infinite; }

/* Small wave segments : gently bob in place */
.nd-svcs-finale-wave { will-change: transform; }
.nd-svcs-finale-wave-1 { animation: nd-finale-bob-a 9s  ease-in-out infinite alternate; }
.nd-svcs-finale-wave-2 { animation: nd-finale-bob-b 11s ease-in-out infinite alternate; }
.nd-svcs-finale-wave-3 { animation: nd-finale-bob-a 8s  ease-in-out infinite alternate; }
@keyframes nd-finale-bob-a {
	0%   { transform: translate3d(0, -6px, 0); opacity: 0.5; }
	100% { transform: translate3d(20px, 6px, 0); opacity: 1; }
}
@keyframes nd-finale-bob-b {
	0%   { transform: translate3d(0, 6px, 0); opacity: 0.5; }
	100% { transform: translate3d(-20px, -6px, 0); opacity: 1; }
}
@keyframes nd-finale-drift-a {
	0%   { transform: translate3d(-2%, 0, 0); }
	100% { transform: translate3d( 2%, 0, 0); }
}
@keyframes nd-finale-drift-b {
	0%   { transform: translate3d( 2%, 0, 0); }
	100% { transform: translate3d(-2%, 0, 0); }
}

/* Faint horizontal rays: slowly fade in/out like sweeping scanlines */
.nd-svcs-finale-ray { opacity: 0; }
.nd-svcs-finale-ray-1 { animation: nd-finale-ray 12s ease-in-out infinite;          animation-delay: 0s; }
.nd-svcs-finale-ray-2 { animation: nd-finale-ray 14s ease-in-out infinite;          animation-delay: 3s; }
.nd-svcs-finale-ray-3 { animation: nd-finale-ray 16s ease-in-out infinite;          animation-delay: 6s; }
.nd-svcs-finale-ray-4 { animation: nd-finale-ray 13s ease-in-out infinite;          animation-delay: 9s; }
@keyframes nd-finale-ray {
	0%, 100% { opacity: 0; }
	45%, 55% { opacity: 0.55; }
}

/* Glowing nodes: soft pulse */
.nd-svcs-finale-node {
	transform-origin: center;
	transform-box: fill-box;
}
.nd-svcs-finale-node-1 { animation: nd-finale-pulse 6s   ease-in-out infinite; }
.nd-svcs-finale-node-2 { animation: nd-finale-pulse 7.5s ease-in-out infinite; animation-delay: 1.2s; }
.nd-svcs-finale-node-3 { animation: nd-finale-pulse 5.5s ease-in-out infinite; animation-delay: 2.5s; }
.nd-svcs-finale-node-4 { animation: nd-finale-pulse 8s   ease-in-out infinite; animation-delay: 0.6s; }
.nd-svcs-finale-node-5 { animation: nd-finale-pulse 6.8s ease-in-out infinite; animation-delay: 3.4s; }
@keyframes nd-finale-pulse {
	0%, 100% { transform: scale(0.85); opacity: 0.55; }
	50%      { transform: scale(1.15); opacity: 1; }
}

/* Mouse-follow glow: soft cyan blob, positioned by JS via transform */
.nd-svcs-finale-glow {
	position: absolute;
	left: 0; top: 0;
	width: 520px; height: 520px;
	margin: -260px;
	border-radius: 50%;
	background:
		radial-gradient(circle, oklch(62% 0.24 200 / 0.28) 0%, oklch(62% 0.24 200 / 0.08) 35%, transparent 65%);
	filter: blur(40px);
	mix-blend-mode: screen;
	transform: translate3d(50%, 50%, 0);
	opacity: 0;
	transition: opacity 0.6s ease;
	will-change: transform, opacity;
	pointer-events: none;
}
.nd-svcs-finale.is-hover .nd-svcs-finale-glow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.nd-svcs-finale-curve,
	.nd-svcs-finale-ray,
	.nd-svcs-finale-node,
	.nd-svcs-finale-diag,
	.nd-svcs-finale-trace,
	.nd-svcs-finale-wave { animation: none; }
	.nd-svcs-finale-ray { opacity: 0.3; }
	.nd-svcs-finale-glow { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   5. AUDIENCE : "Pour qui ?"
══════════════════════════════════════════════════════════════ */

.nd-svcs-audience-section {
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, oklch(60% 0.24 200 / 0.08) 0%, transparent 65%),
		var(--nd-elev-0);
	padding: 120px 48px;
	border-top: 1px solid var(--nd-elev-border);
	position: relative;
}
.nd-svcs-audience-inner { max-width: 1280px; margin: 0 auto; }

.nd-svcs-audience-header {
	text-align: center;
	margin-bottom: 64px;
	max-width: 760px;
	margin-left: auto; margin-right: auto;
}
.nd-svcs-audience-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--nd-font-label);
	font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
	color: var(--nd-accent);
	margin: 0 0 24px;
}
.nd-svcs-audience-eyebrow-icon { display: inline-flex; }
.nd-svcs-audience-h2 {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(34px, 4.2vw, 56px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: oklch(96% 0.005 215);
	margin: 0 0 18px;
}
.nd-svcs-audience-h2 em { font-style: italic; font-weight: 300; color: var(--nd-accent); }
.nd-svcs-audience-sub,
.nd-svcs-audience-header .nd-svcs-audience-sub {
	display: block;
	font-size: 16px;
	line-height: 1.6;
	color: oklch(75% 0.03 215);
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 28px;
	margin-top: 0;
	text-align: center !important;
	text-wrap: balance;
}

.nd-svcs-audience-layout {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 32px;
	align-items: stretch;
}

/* Image side */
.nd-svcs-audience-visual {
	position: relative;
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	min-height: 460px;
	background: var(--nd-elev-1);
	border: 1px solid var(--nd-elev-border-strong);
	box-shadow:
		inset 0 1px 0 oklch(100% 0 0 / 0.08),
		0 30px 80px -20px oklch(0% 0 0 / 0.5);
}
.nd-svcs-audience-visual img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	position: absolute; inset: 0;
}
.nd-svcs-audience-visual-veil {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 50% 100%, oklch(60% 0.24 200 / 0.40) 0%, transparent 65%),
		linear-gradient(180deg, oklch(7% 0.035 222 / 0.4) 0%, oklch(7% 0.035 222 / 0.7) 100%);
	pointer-events: none;
}
/* Orbit: full ring + 3 icons that travel slowly along the ring path.
   The ring stays still ; the icons wrapper spins, carrying the icons
   along the ring's circumference. An inner counter-rotates so each
   icon stays upright as it orbits. */
.nd-svcs-orbit {
	--orbit-size: 220px;
	--orbit-radius: 88px;
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: var(--orbit-size); height: var(--orbit-size);
	/* Le disque entier n'intercepte rien, seules les icones sont cliquables. */
	pointer-events: none;
}
.nd-svcs-orbit-ring {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	filter: drop-shadow(0 0 10px oklch(60% 0.24 200 / 0.45));
}

.nd-svcs-orbit-icons {
	position: absolute;
	inset: 0;
	animation: nd-orbit-spin 26s linear infinite;
	will-change: transform;
	transform-origin: 50% 50%;
}

/* La rotation s'arrete des qu'on approche : viser une cible mouvante est
   penible, et l'arret signale que c'est cliquable autant que le curseur. */
.nd-svcs-orbit:hover .nd-svcs-orbit-icons,
.nd-svcs-orbit:focus-within .nd-svcs-orbit-icons,
.nd-svcs-orbit:hover .nd-svcs-orbit-icon-inner,
.nd-svcs-orbit:focus-within .nd-svcs-orbit-icon-inner {
	animation-play-state: paused;
}
@keyframes nd-orbit-spin { to { transform: rotate(360deg); } }
@keyframes nd-orbit-spin-r { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
	.nd-svcs-orbit-icons,
	.nd-svcs-orbit-icon-inner { animation: none; }
}

.nd-svcs-orbit-icon {
	position: absolute;
	top: 50%; left: 50%;
	width: 52px; height: 52px;
	margin: -26px;
	display: block;
	transform-origin: 50% 50%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}
.nd-svcs-orbit-icon:focus-visible {
	outline: 2px solid var(--nd-accent);
	outline-offset: 4px;
	border-radius: 16px;
}
.nd-svcs-orbit-icon-inner {
	display: flex;
	align-items: center; justify-content: center;
	width: 100%; height: 100%;
	color: oklch(96% 0.05 195);
	background: oklch(100% 0 0 / 0.12);
	backdrop-filter: blur(14px) saturate(1.3);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	border: 1px solid oklch(100% 0 0 / 0.28);
	border-radius: 14px;
	box-shadow:
		inset 0 1px 0 oklch(100% 0 0 / 0.20),
		0 8px 24px -8px oklch(0% 0 0 / 0.5);
	will-change: transform;
	transition: background 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.nd-svcs-orbit-icon:hover .nd-svcs-orbit-icon-inner {
	background: oklch(100% 0 0 / 0.22);
	border-color: oklch(100% 0 0 / 0.45);
}
.nd-svcs-orbit-icon.is-active .nd-svcs-orbit-icon-inner {
	background: oklch(60% 0.24 200 / 0.32);
	border-color: oklch(72% 0.18 200 / 0.85);
	box-shadow:
		inset 0 1px 0 oklch(100% 0 0 / 0.25),
		0 0 22px -2px oklch(60% 0.24 200 / 0.55);
}
.nd-svcs-orbit-icon-inner img,
.nd-svcs-orbit-icon-inner svg {
	max-width: 60%; max-height: 60%;
	object-fit: contain;
	display: block;
}
/* Each icon = rotate to its angle, translate up to ring. Inner counter-rotates
   over the full 26s loop so the icon glyph stays visually upright while
   orbiting, different keyframes per icon to bake in the static angle offset. */
.nd-svcs-orbit-icon-1 { transform: rotate(0deg)   translateY(calc(var(--orbit-radius) * -1)); }
.nd-svcs-orbit-icon-2 { transform: rotate(120deg) translateY(calc(var(--orbit-radius) * -1)); }
.nd-svcs-orbit-icon-3 { transform: rotate(240deg) translateY(calc(var(--orbit-radius) * -1)); }

.nd-svcs-orbit-icon-1 .nd-svcs-orbit-icon-inner { animation: nd-orbit-cspin-0   26s linear infinite; }
.nd-svcs-orbit-icon-2 .nd-svcs-orbit-icon-inner { animation: nd-orbit-cspin-120 26s linear infinite; }
.nd-svcs-orbit-icon-3 .nd-svcs-orbit-icon-inner { animation: nd-orbit-cspin-240 26s linear infinite; }
@keyframes nd-orbit-cspin-0   { from { transform: rotate(0deg);    } to { transform: rotate(-360deg); } }
@keyframes nd-orbit-cspin-120 { from { transform: rotate(-120deg); } to { transform: rotate(-480deg); } }
@keyframes nd-orbit-cspin-240 { from { transform: rotate(-240deg); } to { transform: rotate(-600deg); } }

/* Tabs card */
.nd-svcs-audience-tabs {
	padding: 32px 36px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.nd-svcs-audience-tabs-bar {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--nd-elev-border);
}
.nd-svcs-audience-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: oklch(100% 0 0 / 0.04);
	color: oklch(75% 0.03 215);
	border: 1px solid oklch(100% 0 0 / 0.06);
	border-radius: 100px;
	padding: 9px 18px 9px 14px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13.5px;
	font-weight: 400;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.nd-svcs-audience-tab:hover {
	background: oklch(100% 0 0 / 0.07);
	color: oklch(90% 0.01 215);
	transform: translateY(-1px);
}
.nd-svcs-audience-tab.is-active {
	background: var(--nd-elev-3);
	color: oklch(96% 0.005 215);
	border-color: oklch(60% 0.24 200 / 0.35);
	font-weight: 500;
	box-shadow:
		0 0 0 1px oklch(60% 0.24 200 / 0.1),
		0 4px 14px -4px oklch(60% 0.24 200 / 0.25);
}
.nd-svcs-audience-tab-icon {
	display: inline-flex;
	width: 22px; height: 22px;
	align-items: center; justify-content: center;
	border-radius: 6px;
	background: oklch(60% 0.24 200 / 0.12);
	color: var(--nd-accent);
	overflow: hidden;
}
.nd-svcs-audience-tab-icon img {
	width: 14px; height: 14px;
	object-fit: contain;
	display: block;
}

.nd-svcs-audience-panel { display: flex; flex-direction: column; gap: 18px; }
.nd-svcs-audience-panel[hidden] { display: none; }

.nd-svcs-audience-lead {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(20px, 1.9vw, 24px);
	font-weight: 500;
	line-height: 1.35;
	color: oklch(96% 0.005 215);
	margin: 0;
	letter-spacing: -0.01em;
}

.nd-svcs-audience-caps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.nd-svcs-audience-caps li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: baseline;
	font-size: 15.5px;
	line-height: 1.6;
	color: oklch(83% 0.025 215);
}
.nd-svcs-audience-caps-arrow {
	color: var(--nd-accent);
	font-weight: 500;
}

.nd-svcs-audience-footer {
	margin: 6px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--nd-elev-border);
	font-size: 15px;
	line-height: 1.6;
	color: oklch(75% 0.05 200);
	font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   6. ZONES : Vaud / Suisse romande
══════════════════════════════════════════════════════════════ */

.nd-svcs-zones-section {
	background: oklch(5% 0.03 222);
	padding: var(--nd-section-y) 48px;
	border-top: 1px solid oklch(100% 0 0 / 0.05);
	position: relative;
}
.nd-svcs-zones-inner {
	max-width: 1280px; margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 56px;
	align-items: center;
}
.nd-svcs-zones-eyebrow {
	font-family: var(--nd-font-label);
	font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
	color: var(--nd-accent);
	margin: 0 0 16px;
}
.nd-svcs-zones-h2 {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: oklch(96% 0.005 215);
	margin: 0 0 18px;
}
.nd-svcs-zones-h2 em { font-style: italic; font-weight: 300; color: var(--nd-accent); }
.nd-svcs-zones-lead {
	font-size: 15px; line-height: 1.7;
	color: oklch(75% 0.03 215); margin: 0;
}
.nd-svcs-zones-lead strong { color: oklch(94% 0.005 215); font-weight: 500; }

.nd-svcs-zones-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.nd-svcs-zones-list li {
	font-family: var(--nd-font-label);
	font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
	color: oklch(78% 0.05 200);
	padding: 9px 15px;
	border: 1px solid oklch(100% 0 0 / 0.08);
	border-radius: 100px;
	background: oklch(10% 0.04 215 / 0.5);
	transition: border-color 0.35s, color 0.35s, background 0.35s, transform 0.35s, box-shadow 0.35s;
}
.nd-svcs-zones-list li:hover,
.nd-svcs-zones-list li.is-lit,
.nd-svcs-zones-list li.nd-svcs-zones-pill-cta {
	border-color: oklch(60% 0.24 200 / 0.5);
	color: oklch(94% 0.04 200);
	background: oklch(60% 0.24 200 / 0.12);
	transform: translateY(-1px);
	box-shadow:
		0 0 0 1px oklch(60% 0.24 200 / 0.15),
		0 0 22px -2px oklch(60% 0.24 200 / 0.45);
}
.nd-svcs-zones-list li.nd-svcs-zones-pill-cta {
	text-transform: none;
	letter-spacing: 0.5px;
	font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   7. BIG CTA : qui claque
══════════════════════════════════════════════════════════════ */

.nd-svcs-bigcta-section {
	padding: 120px 48px;
	background:
		radial-gradient(ellipse 90% 60% at 50% 0%, oklch(18% 0.18 195 / 0.4) 0%, transparent 60%),
		linear-gradient(180deg, oklch(7% 0.035 220) 0%, oklch(5% 0.03 222) 100%);
	border-top: 1px solid oklch(100% 0 0 / 0.06);
	position: relative;
	overflow: hidden;
}

.nd-svcs-bigcta {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 64px 64px;
	border-radius: 28px;
	background:
		radial-gradient(ellipse 60% 100% at 50% 0%, oklch(20% 0.18 195 / 0.35) 0%, transparent 70%),
		linear-gradient(180deg, oklch(11% 0.05 215) 0%, oklch(8% 0.04 220) 100%);
	border: 1px solid oklch(60% 0.24 200 / 0.18);
	box-shadow:
		inset 0 1px 0 oklch(100% 0 0 / 0.07),
		0 0 100px -20px oklch(60% 0.24 200 / 0.4),
		0 30px 80px -20px oklch(0% 0 0 / 0.6);
	overflow: hidden;
	isolation: isolate;
}

.nd-svcs-bigcta-bg {
	position: absolute; inset: 0;
	pointer-events: none; z-index: 0;
	overflow: hidden;
}
.nd-svcs-bigcta-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	mix-blend-mode: screen;
}
.nd-svcs-bigcta-orb-1 {
	top: -40%; left: -10%;
	width: 460px; height: 460px;
	background: radial-gradient(circle, oklch(62% 0.26 200 / 0.85) 0%, transparent 65%);
	animation: nd-svcs-bloom-1 18s ease-in-out infinite alternate;
}
.nd-svcs-bigcta-orb-2 {
	bottom: -40%; right: -10%;
	width: 520px; height: 520px;
	background: radial-gradient(circle, oklch(58% 0.22 190 / 0.7) 0%, transparent 65%);
	animation: nd-svcs-bloom-2 22s ease-in-out infinite alternate;
}
.nd-svcs-bigcta-grid {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	opacity: 0.5;
	mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 0%, transparent 75%);
}

.nd-svcs-bigcta > * { position: relative; z-index: 1; }

/* Split layout : title block on the left, action panel on the right.
   At ≤900px the panel drops below. No more centered narrow column. */
.nd-svcs-bigcta-split {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 64px;
	align-items: center;
	margin-bottom: 56px;
}
.nd-svcs-bigcta-lead { text-align: left; }
.nd-svcs-bigcta-panel {
	position: relative;
	padding: 36px 32px;
	border-radius: 20px;
	background:
		linear-gradient(180deg, oklch(100% 0 0 / 0.04) 0%, oklch(100% 0 0 / 0.015) 100%);
	border: 1px solid oklch(100% 0 0 / 0.10);
	box-shadow:
		inset 0 1px 0 oklch(100% 0 0 / 0.08),
		0 12px 40px -16px oklch(0% 0 0 / 0.5);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.nd-svcs-bigcta-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--nd-font-label);
	font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
	color: var(--nd-accent);
	margin: 0 0 20px;
}
.nd-svcs-bigcta-eyebrow-line {
	display: inline-block;
	width: 36px; height: 1px;
	background: linear-gradient(90deg, var(--nd-accent), transparent);
}

.nd-svcs-bigcta-title {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(42px, 6.4vw, 84px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: oklch(96% 0.005 215);
	margin: 0 0 22px;
	text-align: left;
}
.nd-svcs-bigcta-title em {
	font-style: italic;
	font-weight: 300;
	background: linear-gradient(120deg, oklch(72% 0.18 200) 0%, oklch(82% 0.16 195) 50%, oklch(72% 0.18 200) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: nd-bigcta-shimmer 6s linear infinite;
}
@keyframes nd-bigcta-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.nd-svcs-bigcta-sub {
	font-size: 17px;
	line-height: 1.6;
	color: oklch(80% 0.025 215);
	max-width: 540px;
	margin: 0;
}
.nd-svcs-bigcta-sub strong { color: oklch(95% 0.005 215); font-weight: 500; }

/* Panel internals : button + "or" divider + direct contact */
.nd-svcs-bigcta-or {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	font-family: var(--nd-font-label);
	font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
	color: oklch(60% 0.04 215);
}
.nd-svcs-bigcta-or span {
	height: 1px;
	background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.14), transparent);
}
.nd-svcs-bigcta-or em {
	font-style: normal;
	display: block;
}

/* Big CTA button: reuses .nd-btn-primary (beam border) but full-width XL. */
.nd-svcs-bigcta-btn {
	width: 100%;
	justify-content: center;
	font-size: 16px;
	padding: 20px 32px;
	font-weight: 500;
	letter-spacing: -0.005em;
	gap: 12px;
	box-shadow:
		0 0 60px -10px oklch(60% 0.24 200 / 0.45),
		0 10px 40px -10px oklch(0% 0 0 / 0.4);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.2s, background 0.2s, color 0.2s;
}
.nd-svcs-bigcta-btn:hover {
	transform: translateY(-2px) scale(1.015);
	box-shadow:
		0 0 70px -10px oklch(60% 0.24 200 / 0.6),
		0 14px 50px -10px oklch(0% 0 0 / 0.5);
}
.nd-svcs-bigcta-btn-arrow {
	display: inline-block;
	font-size: 18px;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nd-svcs-bigcta-btn:hover .nd-svcs-bigcta-btn-arrow {
	transform: translateX(4px);
}

.nd-svcs-bigcta-direct {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.nd-site-wrap a.nd-svcs-bigcta-direct-link,
.nd-svcs-bigcta-direct-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--nd-font-label);
	font-size: 13.5px;
	letter-spacing: 0.4px;
	color: oklch(88% 0.015 215);
	text-decoration: none;
	transition: color 0.2s, transform 0.2s;
}
.nd-svcs-bigcta-direct-icon {
	display: inline-flex;
	width: 26px; height: 26px;
	align-items: center; justify-content: center;
	border-radius: 8px;
	background: oklch(60% 0.24 200 / 0.12);
	color: var(--nd-accent);
	flex-shrink: 0;
}
.nd-svcs-bigcta-direct-link:hover {
	color: var(--nd-accent);
	transform: translateX(2px);
}

/* Trust stats line: full-width row, vertical dividers between items */
.nd-svcs-bigcta-trust {
	list-style: none;
	margin: 0;
	padding: 36px 0 0;
	border-top: 1px solid oklch(100% 0 0 / 0.08);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.nd-svcs-bigcta-trust li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 32px;
	border-left: 1px solid oklch(100% 0 0 / 0.08);
}
.nd-svcs-bigcta-trust li:first-child { border-left: 0; }
.nd-svcs-bigcta-trust-n {
	font-family: 'DM Sans', sans-serif;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.015em;
	color: oklch(96% 0.005 215);
	line-height: 1;
}
.nd-svcs-bigcta-trust-l {
	font-family: var(--nd-font-label);
	font-size: 10.5px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: oklch(65% 0.04 215);
}

@media (prefers-reduced-motion: reduce) {
	.nd-svcs-bigcta-orb,
	.nd-svcs-bigcta-title em { animation: none; }
	.nd-svcs-bigcta-title em { color: var(--nd-accent); background: none; -webkit-text-fill-color: initial; }
}

/* Responsive : stack the split + adjust trust */
@media (max-width: 900px) {
	.nd-svcs-bigcta-split { grid-template-columns: 1fr; gap: 40px; }
	.nd-svcs-bigcta { padding: 64px 36px 56px; }
}
@media (max-width: 640px) {
	.nd-svcs-bigcta-trust { grid-template-columns: 1fr; gap: 24px; }
	.nd-svcs-bigcta-trust li { border-left: 0; padding: 0; }
}

/* ══════════════════════════════════════════════════════════════
   8. OTHER SERVICES : card-stack lives in card-stack.css
══════════════════════════════════════════════════════════════ */

.nd-svcs-others-section {
	padding: var(--nd-section-y) 48px 32px;
	border-top: 1px solid oklch(100% 0 0 / 0.05);
	background: oklch(6% 0.025 222);
	position: relative;
	z-index: 1;
}
/* Smaller stack on the service single page (vs the larger home version).
   Inactive cards desaturate so the active one pops obviously. */
.nd-svcs-others-section .nd-stack-stage { height: 380px; perspective: 1200px; }
.nd-svcs-others-section .nd-stack-card  { width: 460px; height: 290px; border-radius: 18px; }
.nd-svcs-others-section .nd-stack-card-body { padding: 22px 26px; }
.nd-svcs-others-section .nd-stack-card-body h3 { font-size: 17px; }
.nd-svcs-others-section .nd-stack-card-body p  { font-size: 12.5px; }
.nd-svcs-others-section .nd-stack-card {
	transition:
		transform 0.95s cubic-bezier(0.34, 1.2, 0.64, 1),
		opacity 0.55s,
		filter 0.55s ease;
	filter: grayscale(1) brightness(0.85);
}
.nd-svcs-others-section .nd-stack-card.nd-stack-card-active {
	filter: grayscale(0) brightness(1);
}
.nd-svcs-others-section .nd-stack-card:not(.nd-stack-card-active):hover {
	filter: grayscale(0.6) brightness(1);
}
@media (max-width: 768px) {
	.nd-svcs-others-section .nd-stack-stage { height: 280px; }
	.nd-svcs-others-section .nd-stack-card { width: min(74vw, 320px); height: 210px; border-radius: 14px; }
}
.nd-svcs-others-section .nd-services-slider-header {
	margin: 0 auto 16px;
	padding: 0 16px 16px;
}
.nd-svcs-others-section .nd-s-title {
	font-size: clamp(32px, 4vw, 52px);
	letter-spacing: -1.2px;
	margin: 4px 0 8px;
}
.nd-svcs-others-section .nd-s-sub   {
	margin: 8px auto 0;
	font-size: 14px;
}
.nd-svcs-others-eyebrow {
	font-family: var(--nd-font-label);
	font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
	color: var(--nd-accent);
	margin: 0 0 10px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
	.nd-svcs-why-grid { grid-template-columns: 1fr; gap: 24px; }
	.nd-svcs-why-media,
	.nd-svcs-why-media-ph { min-height: 320px; }
	.nd-svcs-why-card { min-height: auto; }

	.nd-svcs-pillars-grid { grid-template-columns: 1fr; gap: 32px; }
	.nd-svcs-pillars-nav { position: relative; top: auto; }
	.nd-svcs-pillars-nav-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
	.nd-svcs-pillars-nav-link { padding: 7px 12px; border: 1px solid oklch(100% 0 0 / 0.07); border-radius: 100px; font-size: 12.5px; }
	.nd-svcs-pillars-nav-link.is-active { padding-left: 12px; background: oklch(60% 0.24 200 / 0.08); border-color: oklch(60% 0.24 200 / 0.3); }
	.nd-svcs-pillars-nav-arrow { display: none; }

	.nd-svcs-pillar-card { padding: 32px 28px; }
	.nd-svcs-pillar-h { font-size: clamp(22px, 4vw, 30px); }
	.nd-svcs-pillar-icon { width: 48px; height: 48px; }
	.nd-svcs-pillar-caps-list { grid-template-columns: 1fr; gap: 8px; }

	.nd-svcs-audience-layout { grid-template-columns: 1fr; gap: 20px; }
	.nd-svcs-audience-visual { min-height: 320px; }
	.nd-svcs-zones-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
	.nd-svcs-hero { padding: 80px 24px 72px; min-height: 70dvh; }
	.nd-svcs-hero-logo { width: 70%; right: -15%; opacity: 0.32; }
	.nd-svcs-why { padding: 64px 22px; }
	.nd-svcs-why-card { padding: 32px 26px; }
	.nd-svcs-pillars { padding: 64px 22px 80px; }
	.nd-svcs-pillar-card { padding: 28px 24px 30px; }
	.nd-svcs-pillar-top { gap: 16px; }
	.nd-svcs-content-section { padding: 56px 22px; }
	.nd-svcs-audience-section { padding: 72px 22px; }
	.nd-svcs-audience-tabs { padding: 26px 22px; }
	.nd-svcs-audience-tabs-bar { gap: 4px; padding-bottom: 18px; }
	.nd-svcs-audience-tab { padding: 7px 14px 7px 12px; font-size: 12.5px; }
	.nd-svcs-audience-tab-label { font-size: 12.5px; }
	.nd-svcs-zones-section { padding: 56px 22px 72px; }
	.nd-svcs-bigcta-section { padding: 64px 22px; }
	.nd-svcs-bigcta { padding: 56px 26px 48px; }
	.nd-svcs-bigcta-trust { gap: 32px; }
	.nd-svcs-others-section { padding: 64px 20px 40px; }
}

@media (max-width: 540px) {
	.nd-svcs-hero { padding: 64px 18px 56px; }
	.nd-site-wrap .nd-svcs-hero-title { font-size: clamp(36px, 9vw, 56px); }
	.nd-svcs-hero-tagline { font-size: clamp(18px, 5vw, 26px); }
	.nd-svcs-audience-grid { grid-template-columns: 1fr; }
	.nd-svcs-why-card { padding: 28px 22px; }
	.nd-svcs-bigcta { padding: 48px 22px 40px; }
	.nd-svcs-bigcta-trust-n { font-size: 22px; }
	.nd-svcs-bigcta-direct { flex-direction: column; gap: 8px; }
	.nd-svcs-bigcta-direct > span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES COMPLÉMENTAIRES : bande de maillage interne, entre les piliers et le
   contenu libre. Volontairement discrète : elle sert la navigation, elle ne
   dispute pas l'attention aux sections rédigées.
   ═══════════════════════════════════════════════════════════════════════════ */

.nd-svcs-related {
	background: var(--nd-elev-0);
	padding: 0 clamp(20px, 5vw, 80px);
}

.nd-svcs-related-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 14px 28px;
	border-top: 1px solid var(--nd-elev-border);
}

.nd-svcs-related-label {
	margin: 0;
	font-family: var(--nd-font-label);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nd-text-dim);
	white-space: nowrap;
}

.nd-svcs-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 34px;
}

/* Liens nus, sans pilule ni fond : un bandeau de maillage n'est pas une
   barre d'etiquettes, et le fond colore se lisait comme un surlignement. */
.nd-svcs-related-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
	border: 0;
	background: none;
	color: var(--nd-text-mid);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.22s ease, border-color 0.22s ease;
}

.nd-svcs-related-list a span {
	transition: transform 0.22s ease;
}

.nd-svcs-related-list a:hover,
.nd-svcs-related-list a:focus-visible {
	color: var(--nd-text);
	border-bottom-color: var(--nd-accent);
}

.nd-svcs-related-list a:hover span,
.nd-svcs-related-list a:focus-visible span {
	transform: translateX(3px);
}

/* Lien de sortie d'un panneau de profil, vers la page du secteur. */

/* Bouton plein, comme partout ailleurs sur le site : c'est une sortie de page,
   pas une note de bas de paragraphe. */
.nd-svcs-audience-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}
.nd-svcs-audience-btn span {
	transition: transform 0.24s ease;
}
.nd-svcs-audience-btn:hover span {
	transform: translateX(4px);
}

.nd-svcs-audience-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--nd-accent);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.22s ease, color 0.22s ease;
}

.nd-svcs-audience-link span {
	transition: transform 0.22s ease;
}

.nd-svcs-audience-link:hover,
.nd-svcs-audience-link:focus-visible {
	color: oklch(75% 0.19 200);
	border-bottom-color: currentColor;
}

.nd-svcs-audience-link:hover span,
.nd-svcs-audience-link:focus-visible span {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.nd-svcs-related-list a,
	.nd-svcs-related-list a span,
	.nd-svcs-audience-link,
	.nd-svcs-audience-link span {
		transition: none;
	}

	.nd-svcs-related-list a:hover span,
	.nd-svcs-audience-link:hover span {
		transform: none;
	}
}

@media (max-width: 720px) {
	.nd-svcs-related-inner {
		flex-direction: column;
		gap: 12px;
	}

	.nd-svcs-related-label {
		white-space: normal;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Renvoi vers le site specialise

   N'apparait que sur la page medicale, qui declare « next_medical » au
   catalogue. Le devis prevoit que Next Digital reste generaliste sur le
   medical et renvoie vers Next Medical, plutot que de lui faire concurrence
   sur les memes requetes.
   ══════════════════════════════════════════════════════════════════════════ */
.nd-svcs-referral {
	position: relative;
	z-index: 2;
	padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 80px);
}
.nd-svcs-referral-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(30px, 4vw, 48px) clamp(26px, 4vw, 52px);
	background:
		linear-gradient(125deg, oklch(60% 0.24 200 / 0.10), transparent 60%),
		oklch(100% 0 0 / 0.04);
	backdrop-filter: blur(16px) saturate(1.2);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	border: 1px solid oklch(100% 0 0 / 0.16);
	border-radius: 18px;
}
.nd-svcs-referral-label {
	margin: 0 0 12px;
	font-family: var(--nd-font-label);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nd-accent);
}
.nd-svcs-referral-title {
	margin: 0 0 16px;
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: oklch(97% 0.004 215);
}
.nd-svcs-referral-text {
	margin: 0 0 26px;
	max-width: 62ch;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.72;
	color: var(--nd-text-mid);
}
@media (prefers-reduced-motion: reduce) {
	.nd-svcs-referral-link span { transition: none; }
	.nd-svcs-referral-link:hover span { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Image mise en avant en fond du hero

   Elle identifie le service d'un coup d'oeil, mais elle passe derriere : les
   courbes, les lueurs et le trace du logo restent lisibles par-dessus, et le
   texte garde son fond sombre a gauche, la ou il vit.
   ══════════════════════════════════════════════════════════════════════════ */

.nd-svcs-hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Reglage unique de la presence de l'image. Ce qui la rendait terne, ce
	   n'etait pas cette valeur seule mais son empilement avec les deux voiles
	   ci-dessous : les trois se multiplient. */
	opacity: var(--nd-hero-media-opacity, 0.78);
	transform: scale(1.03);
}

/* Deux couches. Le degrade horizontal protege la colonne de texte, a gauche,
   et lache prise des qu'on en sort : c'est la que la photo doit se voir. Le
   voile vertical, lui, reste leger, juste de quoi empecher une photo claire de
   faire remonter le fond et d'ecraser le bas de section. */
.nd-svcs-hero-media-veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			100deg,
			oklch(7% 0.035 220 / 0.93) 0%,
			oklch(7% 0.035 220 / 0.78) 30%,
			oklch(7% 0.035 220 / 0.30) 60%,
			oklch(7% 0.035 220 / 0.08) 100%
		),
		linear-gradient(to bottom, oklch(7% 0.035 220 / 0.12), oklch(7% 0.035 220 / 0.48));
}

/* Avec une image, le trace du logo se fait plus discret pour ne pas se
   superposer a un sujet deja charge. */
.nd-svcs-hero.has-image .nd-svcs-hero-logo {
	opacity: 0.4;
}

/* Sur petit ecran le texte occupe toute la largeur : il n'y a plus de zone
   libre ou la photo peut respirer, le voile doit donc couvrir partout. */
@media (max-width: 900px) {
	.nd-svcs-hero-media {
		opacity: 0.55;
	}
	.nd-svcs-hero-media-veil {
		background: linear-gradient(to bottom, oklch(7% 0.035 220 / 0.62), oklch(7% 0.035 220 / 0.86));
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   Trace de la section des enjeux

   Il remplace la photo, qui reprenait l'image mise en avant desormais posee en
   fond du hero. Un trace au trait ne demande aucun visuel au client et ne
   ressemblera jamais a une banque d'images.
   ══════════════════════════════════════════════════════════════════════════ */

.nd-svcs-why-art {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 340px;
	padding: clamp(28px, 5vw, 64px);
	background:
		radial-gradient(ellipse 70% 60% at 50% 45%, oklch(60% 0.24 200 / 0.12), transparent 70%),
		oklch(100% 0 0 / 0.02);
	border: 1px solid var(--nd-elev-border);
	border-radius: 18px;
	color: var(--nd-accent);
}

.nd-svcs-why-art svg {
	width: 100%;
	max-width: 300px;
	height: auto;
	filter: drop-shadow(0 0 22px oklch(60% 0.24 200 / 0.35));
}

/* Etat par defaut : dessines. Le script pose lui-meme l'etat masque, et
   seulement s'il compte animer le trace. Sans script, ou si le trace est deja
   a l'ecran au chargement, rien n'est jamais invisible. */
.nd-svcs-why-art .nd-lamp-draw {
	stroke-dasharray: none;
	stroke-dashoffset: 0;
}


/* Texte des enjeux justifie : les deux paragraphes sont longs et de longueur
   proche, le drapeau a droite y creusait des dentelures. Cesure activee, sinon
   justifier en francais ouvre des rivieres entre les mots. */
.nd-svcs-why-content p {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

@media (max-width: 640px) {
	/* Colonne trop etroite pour justifier sans trous. */
	.nd-svcs-why-content p {
		text-align: left;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   Cartes des piliers : seule l'active est nette

   Cinq cartes entierement lisibles en meme temps, c'est cinq textes qui se
   disputent l'attention. Les inactives reculent, floues et attenuees : on lit
   celle qu'on regarde. Le flou reste faible, il suggere le hors-champ sans
   rendre la page illisible pour qui la parcourt en diagonale.
   ══════════════════════════════════════════════════════════════════════════ */

.nd-svcs-pillars.is-spy .nd-svcs-pillar-card {
	filter: blur(2.5px);
	opacity: 0.34;
	transition: filter 0.55s cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.nd-svcs-pillars.is-spy .nd-svcs-pillar-card.is-active {
	filter: blur(0);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.nd-svcs-pillars.is-spy .nd-svcs-pillar-card { transition: none; }
}

@media (max-width: 900px) {
	/* En colonne unique, le sommaire collant disparait et on lit a la suite :
	   estomper n'aurait plus de sens. */
	.nd-svcs-pillars.is-spy .nd-svcs-pillar-card {
		filter: none;
		opacity: 1;
	}
}