/* ═══════════════════════════════════════════════════════════════════════════
   Next Digital : section « Ce que nous mettons en place », pages secteur

   Une scene unique que le defilement traverse. Les mesures s'y succedent, la
   lueur faiblit puis se renforce entre chacune.

   Deux etats, et c'est important :

   - Sans la classe .is-on, tout est empile et lisible. C'est l'etat par
     defaut du HTML, donc l'etat que voit quelqu'un sans JavaScript, avec une
     erreur de script, ou qui demande moins d'animations. Rien n'est jamais
     invisible par defaut.

   - Avec .is-on, posee par lamp.js, la section devient haute, la scene colle
     en haut et le script pilote l'opacite et la lueur.

   Le defilement du theme se fait dans .nd-site-wrap, un conteneur fixe, pas
   dans la fenetre. La hauteur de la scene se calcule donc a partir du cadre,
   pas de 100vh brut.
   ═══════════════════════════════════════════════════════════════════════════ */

.nd-lamp {
	--nd-lamp-color: oklch(72% 0.18 200);
	--nd-lamp-stage-h: calc(100vh - var(--nd-header-h) - (var(--nd-bezel-gap) * 2));
	--nd-lamp-glow: 1;

	position: relative;
	background: oklch(7% 0.03 220);
	border-top: 1px solid var(--nd-elev-border);
	border-bottom: 1px solid var(--nd-elev-border);
}

.admin-bar .nd-lamp {
	--nd-lamp-stage-h: calc(100vh - 32px - var(--nd-header-h) - (var(--nd-bezel-gap) * 2));
}

/* ── Etat empile, sans script ───────────────────────────────────────────────
   Egalement l'etat de repli en dessous de 900px : une scene bloquee sur un
   telephone est une prison, on prefere la liste. */

.nd-lamp-stage {
	position: relative;
	overflow: hidden;
}

.nd-lamp-inner {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--nd-section-y) clamp(20px, 5vw, 56px);
}

.nd-lamp-head {
	max-width: 640px;
	margin-bottom: clamp(40px, 6vw, 68px);
}

.nd-lamp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-family: var(--nd-font-label);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nd-text-dim);
}

.nd-lamp-eyebrow-mark {
	width: 7px;
	height: 7px;
	background: var(--nd-lamp-color);
	box-shadow: 0 0 12px var(--nd-lamp-color);
	flex: none;
}

.nd-lamp-title {
	margin: 0;
	font-size: clamp(30px, 4.2vw, 50px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: oklch(97% 0.004 215);
}

.nd-lamp-title em {
	font-style: italic;
	color: var(--nd-lamp-color);
}

.nd-lamp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nd-lamp-step {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	padding: clamp(32px, 4vw, 48px) 0;
	border-top: 1px solid var(--nd-elev-border);
}

.nd-lamp-step:first-child {
	border-top: none;
}

/* Le numero est un repere, pas un titre : en gros il mangeait trois lignes de
   hauteur et repoussait tout le texte vers le bas. */
.nd-lamp-index {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0 0 10px;
	font-family: var(--nd-font-label);
	line-height: 1;
}

.nd-lamp-index-num {
	font-size: clamp(17px, 1.7vw, 22px);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--nd-lamp-color);
	text-shadow: 0 0 18px oklch(72% 0.18 200 / 0.5);
}

.nd-lamp-index-total {
	font-size: 12px;
	color: var(--nd-text-dim);
}

.nd-lamp-step-title {
	margin: 0 0 16px;
	font-size: clamp(24px, 2.8vw, 34px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: oklch(96% 0.005 215);
}

.nd-lamp-lead {
	margin: 0 0 24px;
	max-width: 58ch;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.7;
	color: var(--nd-text-mid);
}

.nd-lamp-caps {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 11px;
	max-width: 58ch;
}

.nd-lamp-caps li {
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.55;
	color: oklch(74% 0.03 215);
}

.nd-lamp-caps li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 10px;
	height: 1px;
	background: var(--nd-lamp-color);
	opacity: 0.85;
}

.nd-lamp-conclusion {
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid var(--nd-elev-border);
	max-width: 58ch;
	font-size: 15px;
	font-style: italic;
	line-height: 1.6;
	color: oklch(80% 0.06 200);
}

.nd-lamp-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nd-lamp-color);
}

.nd-lamp-svg {
	width: 100%;
	max-width: 320px;
	height: auto;
	filter: drop-shadow(0 0 18px oklch(72% 0.18 200 / 0.35));
}

/* ── La lampe ──────────────────────────────────────────────────────────────
   Un filament vertical au tiers gauche, et deux cones coniques qui s'ouvrent
   vers la droite. Masquee tant que la scene n'est pas active : sur la version
   empilee, elle n'aurait aucun sens. */

.nd-lamp-light {
	display: none;
}

/* ── Etat actif ────────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
	.nd-lamp.is-on {
		/* Une hauteur d'ecran par mesure, plus une pour l'ouverture au titre,
		   plus un peu de marge en sortie. */
		height: calc(var(--nd-lamp-stage-h) * (var(--nd-lamp-steps) + 1.4));
	}

	.nd-lamp.is-on .nd-lamp-stage {
		position: sticky;
		top: 0;
		height: var(--nd-lamp-stage-h);
		display: flex;
		align-items: stretch;
	}

	.nd-lamp.is-on .nd-lamp-inner {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-top: clamp(26px, 5vh, 56px);
		padding-bottom: clamp(60px, 9vh, 96px);
	}

	/* Ouverture : le titre occupe seul le cadre, centre, et s'efface avant que
	   la lampe entre. Les deux ne sont jamais visibles ensemble, le titre peut
	   donc etre pose en absolu sans risquer de recouvrir le texte anime. */
	.nd-lamp.is-on .nd-lamp-head {
		position: absolute;
		inset: 0;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		max-width: none;
		padding: 0 clamp(24px, 6vw, 80px);
		text-align: center;
		pointer-events: none;
		opacity: var(--nd-lamp-intro, 1);
		transform: translateY(var(--nd-lamp-intro-y, 0px)) scale(var(--nd-lamp-intro-s, 1));
		will-change: opacity, transform;
	}

	/* 30ch : de quoi tenir sur deux lignes pour les intitules du catalogue,
	   sans descendre a trois. */
	.nd-lamp.is-on .nd-lamp-title {
		font-size: clamp(34px, 5vw, 68px);
		line-height: 1.06;
		max-width: 30ch;
		text-wrap: balance;
	}

	.nd-lamp.is-on .nd-lamp-steps {
		position: relative;
		flex: 1;
		min-height: 0;
	}

	/* Les mesures se superposent : une seule est visible a la fois, le script
	   fait passer l'opacite de l'une a l'autre. */
	.nd-lamp.is-on .nd-lamp-step {
		position: absolute;
		inset: 0;
		display: grid;
		align-content: center;
		padding: 0;
		border: none;
		opacity: 0;
		pointer-events: none;
		will-change: opacity, transform;
	}

	.nd-lamp.is-on .nd-lamp-step.is-current {
		pointer-events: auto;
	}

	.nd-lamp.is-on .nd-lamp-light {
		display: flex;
		justify-content: center;
		position: absolute;
		inset: 0;
		overflow: hidden;
		opacity: var(--nd-lamp-glow);
		pointer-events: none;
	}

	/* Le faisceau est cale sur la meme boite que le texte. Sinon le filament
	   se positionne sur la largeur de l'ecran et le texte sur un conteneur
	   centre : l'ecart entre les deux grandit avec la fenetre. */
	.nd-lamp-light-box {
		position: relative;
		width: 100%;
		max-width: 1180px;
		padding: 0 clamp(20px, 5vw, 56px);
	}

	/* Les deux cones forment le faisceau : l'un vers le haut, l'autre vers le
	   bas, tous deux ancres sur le filament. */
	.nd-lamp-cone {
		position: absolute;
		left: 7%;
		width: 60vw;
		max-width: 900px;
		height: 46vh;
		background: conic-gradient(
			from 320deg at left center,
			oklch(72% 0.18 200 / 0.30),
			transparent 22%
		);
		filter: blur(18px);
	}

	.nd-lamp-cone-up {
		bottom: 50%;
		background: conic-gradient(
			from 200deg at left center,
			transparent 78%,
			oklch(72% 0.18 200 / 0.30)
		);
	}

	.nd-lamp-cone-down {
		top: 50%;
	}

	.nd-lamp-halo {
		position: absolute;
		left: 7%;
		top: 50%;
		width: 34vw;
		max-width: 460px;
		height: 60vh;
		transform: translate(-40%, -50%);
		background: radial-gradient(ellipse at center, oklch(72% 0.18 200 / 0.20), transparent 68%);
		filter: blur(40px);
	}

	.nd-lamp-filament {
		position: absolute;
		left: 7%;
		top: 50%;
		width: 2px;
		height: 42vh;
		transform: translateY(-50%);
		background: linear-gradient(
			to bottom,
			transparent,
			oklch(88% 0.14 200) 18%,
			oklch(95% 0.10 200) 50%,
			oklch(88% 0.14 200) 82%,
			transparent
		);
	}

	/* La lueur respire. Un filament parfaitement stable se lit comme une image
	   figee : ce battement lent suffit a le rendre vivant sans distraire de la
	   lecture. */
	.nd-lamp-filament-glow {
		position: absolute;
		left: 7%;
		top: 50%;
		width: 120px;
		height: 34vh;
		transform: translate(-50%, -50%);
		background: oklch(72% 0.18 200 / 0.55);
		filter: blur(46px);
		border-radius: 50%;
		animation: nd-lamp-pulse 4.2s ease-in-out infinite;
	}

	.nd-lamp-filament {
		animation: nd-lamp-pulse-line 4.2s ease-in-out infinite;
	}

	@keyframes nd-lamp-pulse {
		0%, 100% { opacity: 0.7;  transform: translate(-50%, -50%) scale(0.94); }
		50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
	}

	@keyframes nd-lamp-pulse-line {
		0%, 100% { opacity: 0.75; }
		50%      { opacity: 1; }
	}

	@media (prefers-reduced-motion: reduce) {
		.nd-lamp-filament-glow,
		.nd-lamp-filament { animation: none; }
	}

	/* Le contenu vit a droite du filament. */
	/* Le texte demarre juste a droite du filament : il etait beaucoup trop
	   loin de la lueur. */
	.nd-lamp.is-on .nd-lamp-step {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
		gap: clamp(28px, 4vw, 64px);
		padding-left: 12%;
	}

	.nd-lamp.is-on .nd-lamp-svg {
		max-width: 260px;
	}

	/* Reperes de progression, colles en bas de la scene. */
	.nd-lamp.is-on .nd-lamp-ticks {
		position: absolute;
		left: clamp(20px, 5vw, 56px);
		bottom: clamp(28px, 5vh, 56px);
		display: flex;
		gap: 8px;
		/* Absents pendant l'ouverture : il n'y a encore rien a reperer. */
		opacity: var(--nd-lamp-reveal, 1);
	}
}

.nd-lamp-ticks {
	display: none;
}

.nd-lamp-tick {
	width: 26px;
	height: 2px;
	background: oklch(100% 0 0 / 0.18);
	transition: background 0.35s ease, box-shadow 0.35s ease;
}

.nd-lamp-tick.is-current {
	background: var(--nd-lamp-color);
	box-shadow: 0 0 12px var(--nd-lamp-color);
}

/* ── Trace dessine a l'apparition ─────────────────────────────────────────── */

.nd-lamp.is-on .nd-lamp-draw {
	stroke-dasharray: var(--nd-draw-len, 900);
	stroke-dashoffset: var(--nd-draw-off, 0);
}

/* ── Moins d'animations : on garde la liste empilee ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.nd-lamp-tick {
		transition: none;
	}
}

@media (max-width: 899px) {
	.nd-lamp-step {
		grid-template-columns: minmax(0, 1fr);
	}

	.nd-lamp-visual {
		justify-content: flex-start;
	}

	.nd-lamp-svg {
		max-width: 200px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero des pages secteur

   Image mise en avant en fond, texte centre. Le trace du logo reste au hero
   des services : le repeter sur chaque page finissait par le banaliser.
   L'image zoome lentement au defilement, pilote par lamp.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.nd-chero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(460px, 78vh, 760px);
	padding: clamp(72px, 12vh, 140px) clamp(20px, 5vw, 56px);
	overflow: hidden;
	text-align: center;
}

.nd-chero-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.nd-chero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Legerement surdimensionnee : le zoom ne doit jamais decouvrir un bord. */
	transform: scale(var(--nd-chero-scale, 1.06));
	transform-origin: center;
	will-change: transform;
}

/* Voile : sans lui, aucun texte ne tient sur une photo quelconque. Deux
   couches, un degrade vertical pour ancrer le bas et un radial pour proteger
   le centre, la ou vit le texte. */
.nd-chero-veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 60% at 50% 50%, oklch(5% 0.025 224 / 0.82) 0%, transparent 78%),
		linear-gradient(to bottom, oklch(5% 0.025 224 / 0.72) 0%, oklch(5% 0.025 224 / 0.55) 45%, oklch(5% 0.025 224 / 0.92) 100%);
}

.nd-chero-glow {
	position: absolute;
	left: 50%;
	top: 42%;
	width: 70vw;
	max-width: 900px;
	height: 46vh;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, oklch(60% 0.24 200 / 0.20), transparent 68%);
	filter: blur(40px);
}

/* Sans image deposee, le fond reste travaille plutot que vide. */
.nd-chero:not(.has-image) .nd-chero-bg {
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, oklch(22% 0.16 210 / 0.75) 0%, transparent 62%),
		oklch(6% 0.03 220);
}

.nd-chero:not(.has-image) .nd-chero-veil {
	background: radial-gradient(circle, oklch(100% 0 0 / 0.055) 1px, transparent 1px);
	background-size: 34px 34px;
	opacity: 0.9;
}

/* 860px bridaient le titre a cinq lignes : la colonne s'aligne sur la
   largeur de contenu du site, et le titre y tient en quatre. */
.nd-chero-inner {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nd-site-wrap .nd-chero-title {
	margin: 0 0 26px;
	/* Le titre porte la page a lui seul : il n'a plus d'accroche sous lui, il
	   peut donc prendre la place. */
	font-size: clamp(40px, 6.8vw, 72px);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.04em;
	/* 24ch : c'est la mesure, pas la taille de police, qui decide du nombre de
	   lignes. Le plus long des trois titres fait 92 caracteres, soit moins de
	   quatre lignes ici. Le titre est centre, il peut se permettre d'etre
	   large. */
	max-width: 24ch;
	letter-spacing: -0.03em;
	color: oklch(98% 0.003 215);
	text-wrap: balance;
}

/* Meme parti que sur les pages service : l'accroche complete le titre sans le
   concurrencer. */
.nd-chero-tagline {
	display: block;
	margin: 14px 0 0;
	font-size: clamp(17px, 1.7vw, 23px);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.005em;
	color: oklch(88% 0.012 215);
}

.nd-chero-tagline em {
	font-style: normal;
}

.nd-chero-sub {
	max-width: 62ch;
	margin: 0 0 34px;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.7;
	color: oklch(84% 0.02 215);
}

.nd-chero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 28px;
}

.nd-chero-scroll {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--nd-font-label);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: oklch(80% 0.02 215);
	text-decoration: none;
	transition: color 0.24s ease;
}

.nd-chero-scroll span {
	transition: transform 0.24s ease;
}

.nd-chero-scroll:hover,
.nd-chero-scroll:focus-visible {
	color: oklch(95% 0.005 215);
}

.nd-chero-scroll:hover span {
	transform: translateY(3px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Renvoi vers Next Medical

   Il occupe tout l'ecran quand on arrive dessus : la section suivante ne doit
   pas deja depasser, sinon le renvoi passe pour une note de bas de page. La
   carte grandit au defilement jusqu'a sa taille pleine.
   ═══════════════════════════════════════════════════════════════════════════ */

.nd-svcs-referral {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - var(--nd-header-h) - (var(--nd-bezel-gap) * 2));
	padding: clamp(48px, 9vh, 110px) clamp(20px, 5vw, 80px);
}

.admin-bar .nd-svcs-referral {
	min-height: calc(100vh - 32px - var(--nd-header-h) - (var(--nd-bezel-gap) * 2));
}

.nd-svcs-referral-zoom {
	width: 100%;
	display: flex;
	justify-content: center;
	transform: scale(var(--nd-ref-scale, 1));
	transform-origin: center center;
	will-change: transform;
}

.nd-svcs-referral-inner {
	max-width: 860px;
	text-align: center;
}

.nd-svcs-referral-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}

.nd-svcs-referral-btn span {
	transition: transform 0.24s ease;
}

.nd-svcs-referral-btn:hover span {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.nd-chero-img { transform: scale(1.02); }
	.nd-svcs-referral-zoom { transform: none; }
	.nd-chero-scroll,
	.nd-chero-scroll span,
	.nd-svcs-referral-btn span { transition: none; }
}

@media (max-width: 760px) {
	.nd-chero {
		min-height: clamp(400px, 66vh, 560px);
	}
	.nd-svcs-referral {
		min-height: 0;
		padding: clamp(40px, 7vh, 72px) 20px;
	}
	.nd-svcs-referral-zoom {
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Profils, pages secteur

   Le modele des services montre les profils dans une carte de verre, a cote
   d'une image et d'une orbite. Reprendre ce dispositif ici donnait deux
   sections jumelles a deux endroits du site. Ici : un selecteur horizontal
   pleine largeur, un indicateur qui glisse, et le profil actif deploye en
   dessous. Pas d'image, pas d'orbite.
   ═══════════════════════════════════════════════════════════════════════════ */

.nd-caud {
	padding: var(--nd-section-y) clamp(20px, 5vw, 56px);
	border-top: 1px solid var(--nd-elev-border);
}

.nd-caud-inner {
	max-width: 1180px;
	margin: 0 auto;
}

.nd-caud-head {
	max-width: 720px;
	margin-bottom: clamp(36px, 5vw, 60px);
}

.nd-caud-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-family: var(--nd-font-label);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nd-text-dim);
}

.nd-caud-eyebrow-mark {
	width: 7px;
	height: 7px;
	flex: none;
	background: var(--nd-accent);
	box-shadow: 0 0 12px var(--nd-accent);
}

.nd-caud-h2 {
	margin: 0;
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: oklch(97% 0.004 215);
}

/* Le titre est d'un seul tenant. La seconde moitie en italique bleue en
   faisait deux titres colles l'un a l'autre. */
.nd-caud-h2 em {
	font-style: normal;
	color: inherit;
}

.nd-caud-sub {
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--nd-text-mid);
}

/* ── Selecteur ─────────────────────────────────────────────────────────────
   L'indicateur est un bloc unique que le script deplace, plutot qu'une bordure
   par onglet : c'est ce qui permet le glissement d'un profil a l'autre. */

/* Verre sur le selecteur comme sur le panneau : la section vit au-dessus du
   fond anime de fin de page, et sans fond propre les traits du decor passent
   derriere le texte et genent la lecture. */
.nd-caud-switch {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: oklch(100% 0 0 / 0.05);
	backdrop-filter: blur(18px) saturate(135%);
	-webkit-backdrop-filter: blur(18px) saturate(135%);
	border: 1px solid var(--nd-elev-border);
	border-radius: 14px 14px 0 0;
}

.nd-caud-marker {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: var(--nd-caud-w, 33.33%);
	transform: translateX(var(--nd-caud-x, 0));
	background: var(--nd-accent);
	box-shadow: 0 0 16px var(--nd-accent);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
	            width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nd-caud-tab {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: clamp(18px, 2.4vw, 28px) clamp(12px, 2vw, 24px);
	background: none;
	border: 0;
	border-left: 1px solid var(--nd-elev-border);
	text-align: left;
	cursor: pointer;
	color: var(--nd-text-dim);
	transition: color 0.32s ease, background 0.32s ease;
}

.nd-caud-tab:first-of-type {
	border-left: 0;
}

.nd-caud-tab:hover {
	color: var(--nd-text-mid);
	background: oklch(100% 0 0 / 0.02);
}

.nd-caud-tab.is-active {
	color: oklch(97% 0.004 215);
}

.nd-caud-tab:focus-visible {
	outline: 2px solid var(--nd-accent);
	outline-offset: -3px;
}

.nd-caud-tab-n {
	font-family: var(--nd-font-label);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--nd-accent);
	flex: none;
}

.nd-caud-tab-label {
	font-size: clamp(15px, 1.5vw, 19px);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* ── Panneau actif ────────────────────────────────────────────────────────── */

.nd-caud-panel {
	padding: clamp(30px, 4vw, 52px) clamp(24px, 3.4vw, 48px) clamp(32px, 4vw, 52px);
	background: oklch(100% 0 0 / 0.035);
	backdrop-filter: blur(18px) saturate(135%);
	-webkit-backdrop-filter: blur(18px) saturate(135%);
	border: 1px solid var(--nd-elev-border);
	border-top: 0;
	border-radius: 0 0 14px 14px;
	animation: nd-caud-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes nd-caud-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

.nd-caud-panel-lead {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: clamp(28px, 4vw, 44px);
	max-width: 78ch;
}

.nd-caud-panel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 4px;
	background: oklch(60% 0.24 200 / 0.10);
	border: 1px solid var(--nd-elev-border);
	color: var(--nd-accent);
}

.nd-caud-panel-icon img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.nd-caud-panel-lead p {
	margin: 0;
	font-size: clamp(18px, 1.9vw, 24px);
	line-height: 1.55;
	letter-spacing: -0.012em;
	color: oklch(90% 0.01 215);
}

.nd-caud-caps {
	list-style: none;
	margin: 0 0 clamp(26px, 4vw, 40px);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px clamp(28px, 4vw, 56px);
}

.nd-caud-caps li {
	position: relative;
	padding: 0 0 14px 26px;
	border-bottom: 1px solid var(--nd-elev-border);
	font-size: 15px;
	line-height: 1.55;
	color: oklch(76% 0.025 215);
}

.nd-caud-caps li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 12px;
	height: 1px;
	background: var(--nd-accent);
}

.nd-caud-footer {
	margin: 0;
	max-width: 70ch;
	font-size: 16px;
	font-style: italic;
	line-height: 1.6;
	color: oklch(82% 0.05 200);
}

@media (prefers-reduced-motion: reduce) {
	.nd-caud-marker,
	.nd-caud-tab { transition: none; }
	.nd-caud-panel { animation: none; }
}

@media (max-width: 760px) {
	/* En colonne, un indicateur qui glisse horizontalement n'a plus de sens. */
	.nd-caud-switch {
		grid-auto-flow: row;
	}
	.nd-caud-marker {
		display: none;
	}
	.nd-caud-panel {
		border-radius: 0 0 14px 14px;
	}
	.nd-caud-tab {
		border-left: 0;
		border-top: 1px solid var(--nd-elev-border);
	}
	.nd-caud-tab:first-of-type {
		border-top: 0;
	}
	.nd-caud-tab.is-active {
		background: oklch(60% 0.24 200 / 0.08);
	}
	.nd-caud-caps {
		grid-template-columns: minmax(0, 1fr);
	}
}