/* ==========================================================================
   DEEZPRO — Page d'accueil (template « DEEZPRO — Accueil »)
   Images : fournies avec le plugin (assets/img), en webp et à la bonne taille.
   ========================================================================== */

.dz-home {
	--dz-navy: #0a2a6b;
	--dz-navy-deep: #071d4d;
	/* Bleu de la maquette du hero, repris sur tous les fonds bleus. */
	--dz-brand-blue: #0c5d99;
	--dz-brand-sky: #74b6d3;
	--dz-blue: #1b5fc1;
	--dz-blue-soft: #eaf1fb;
	/* Orange du logo DEEZPRO (#ffa601) et ses déclinaisons lisibles sur blanc. */
	--dz-accent: #ffa601;
	--dz-accent-hover: #e08f00;
	--dz-accent-strong: #cc8500;
	--dz-accent-ink: #a36a00;
	--dz-red: #c8281c;
	--dz-ink: #132033;
	--dz-muted: #4f5f76;
	--dz-line: #dfe6f1;
	--dz-bg: #ffffff;
	--dz-bg-alt: #f4f7fb;
	--dz-on-dark: #ffffff;
	--dz-on-dark-muted: #c9d6ee;
	--dz-focus: #f5a623;

	--dz-font-display: "Sora", "Poppins", sans-serif;
	--dz-font-body: "Poppins", sans-serif;

	--dz-fs-xs: 0.8125rem;
	--dz-fs-sm: 0.9375rem;
	--dz-fs-md: 1.0625rem;
	--dz-fs-lg: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
	--dz-fs-h3: 1.125rem;
	--dz-fs-h2: clamp(1.75rem, 1.2rem + 2vw, 2.625rem);
	--dz-fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.25rem);

	--dz-space-1: 0.5rem;
	--dz-space-2: 1rem;
	--dz-space-3: 1.5rem;
	--dz-space-4: 2rem;
	--dz-space-5: 3rem;
	--dz-space-6: clamp(4rem, 3rem + 4vw, 6.5rem);

	--dz-radius: 8px;
	--dz-radius-lg: 16px;
	--dz-maxw: 1180px;
	--dz-gutter: 16px;
	--dz-tap: 44px;
	--dz-ease: 160ms ease;

	font-family: var(--dz-font-body);
	font-size: var(--dz-fs-md);
	line-height: 1.6;
	color: var(--dz-ink);
	background: var(--dz-bg);
	overflow-x: clip;
}

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

.dz-home img {
	max-width: 100%;
	height: auto;
	display: block;
}

.dz-home :where(h1, h2, h3, p, ul, ol, figure) {
	margin: 0;
	padding: 0;
}

.dz-home :where(ul, ol) {
	list-style: none;
}

.dz-home :where(h1, h2, h3) {
	font-family: var(--dz-font-display);
	color: inherit;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

.dz-home :where(a, button, input, summary):focus-visible {
	outline: 3px solid var(--dz-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.dz-wrap {
	width: 100%;
	max-width: var(--dz-maxw);
	margin-inline: auto;
	padding-inline: var(--dz-gutter);
}

@media (min-width: 768px) {
	.dz-home {
		--dz-gutter: 32px;
	}
}

/* ---------- Typographie commune ---------- */

.dz-eyebrow {
	font-size: var(--dz-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dz-blue);
	margin-bottom: var(--dz-space-2);
}
.dz-span {
	font-weight: 600;
	color: var(--dz-tone);
}

.dz-eyebrow--light {
	color: var(--dz-accent);
}

.dz-title {
	font-size: var(--dz-fs-h2);
	font-weight: 700;
	color: var(--dz-navy);
	max-width: 22ch;
}

.dz-lead {
	font-size: var(--dz-fs-md);
	color: var(--dz-muted);
	max-width: 60ch;
	margin-top: var(--dz-space-2);
}

.dz-head {
	margin-bottom: var(--dz-space-5);
}

.dz-head--split {
	display: grid;
	gap: var(--dz-space-2);
	align-items: end;
}

@media (min-width: 900px) {
	.dz-head--split {
		grid-template-columns: 1fr 1fr;
		gap: var(--dz-space-5);
	}
}

.dz-center {
	text-align: center;
	margin-inline: auto;
}

.dz-accent-blue {
	color: var(--dz-blue);
}

.dz-accent-red {
	color: var(--dz-red);
}

/* ---------- Boutons & liens ---------- */

.dz-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dz-space-2);
}

.dz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dz-space-1);
	min-height: var(--dz-tap);
	padding: 0.75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--dz-radius);
	font-family: var(--dz-font-body);
	font-size: var(--dz-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	background: var(--dz-blue);
	transition: background-color var(--dz-ease), border-color var(--dz-ease), color var(--dz-ease);
}

.dz-btn--primary {
	background: var(--dz-blue);
	color: var(--dz-on-dark);
}

.dz-btn--primary:hover {
	background: var(--dz-navy);
	color: var(--dz-on-dark);
}

.dz-btn--accent {
	background: var(--dz-accent);
	color: var(--dz-navy-deep);
}

.dz-btn--accent:hover {
	background: var(--dz-accent-hover);
	color: var(--dz-navy-deep);
}

.dz-btn--ghost {
	background: transparent;
	color: var(--dz-on-dark);
	border-color: rgb(255 255 255 / 0.6);
}

.dz-btn--ghost:hover {
	background: rgb(255 255 255 / 0.12);
	color: var(--dz-on-dark);
	border-color: var(--dz-on-dark);
}

.dz-btn--light {
	background: var(--dz-on-dark);
	color: var(--dz-navy);
}

.dz-btn--light:hover {
	background: var(--dz-blue-soft);
	color: var(--dz-navy);
}

.dz-link {
	display: inline-flex;
	align-items: center;
	gap: var(--dz-space-1);
	min-height: var(--dz-tap);
	font-weight: 600;
	color: var(--dz-blue);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--dz-ease);
}

.dz-link:hover {
	color: var(--dz-navy);
	text-decoration-color: currentColor;
}

.dz-checks {
	display: grid;
	gap: 0.75rem;
	margin-block: var(--dz-space-3);
	font-size: var(--dz-fs-sm);
	font-weight: 500;
}

.dz-checks li {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
}

.dz-checks i {
	color: var(--dz-blue);
}

.dz-checks--light {
	color: var(--dz-on-dark);
}

.dz-checks--light i {
	color: var(--dz-accent);
}

/* ---------- Hero ---------- */

.dz-hero {
	position: relative;
	overflow: hidden;
	color: var(--dz-on-dark);
	/* Dégradés CSS seulement : l'ancienne photo de fond (100 Ko) était
	   presque entièrement masquée et retardait l'affichage du hero. */
	background:
		radial-gradient(60rem 40rem at 0% 100%, rgb(255 255 255 / 0.06), transparent 70%),
		linear-gradient(100deg, #0a5590 0%, var(--dz-brand-blue) 60%, #10649f 100%);
}

.dz-hero__inner {
	display: grid;
	gap: var(--dz-space-4);
	align-items: end;
	padding-top: var(--dz-space-5);
}

.dz-hero__copy {
	position: relative;
	z-index: 1;
	padding-bottom: var(--dz-space-2);
}

.dz-hero__title {
	font-size: var(--dz-fs-h1);
	font-weight: 700;
}

.dz-br {
	display: none;
}

.dz-nowrap {
	white-space: nowrap;
}

.dz-hero__title em {
	font-style: normal;
	color: var(--dz-accent);
}

.dz-hero__lead {
	font-size: var(--dz-fs-lg);
	color: var(--dz-on-dark-muted);
	max-width: 48ch;
	margin-block: var(--dz-space-3) var(--dz-space-4);
}

.dz-hero__assurances {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dz-space-1) var(--dz-space-3);
	margin-top: var(--dz-space-4);
	font-size: var(--dz-fs-sm);
	font-weight: 500;
	color: var(--dz-on-dark-muted);
}

.dz-hero__assurances i {
	color: var(--dz-accent);
	margin-right: 0.35rem;
}

/* Visuel : grand disque bleu clair, photo ronde et arc orange à droite. */
.dz-hero__media {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1;
	margin-bottom: var(--dz-space-5);
}

.dz-hero__disc {
	position: absolute;
	top: -18%;
	left: 30%;
	width: 120%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--dz-brand-sky);
}

.dz-hero__photo {
	position: absolute;
	inset: 8%;
	overflow: hidden;
	border-radius: 50%;
	background: var(--dz-brand-blue);
	box-shadow: 0 30px 60px -30px rgb(4 30 60 / 0.6);
}

/* Photo carrée recadrée sur l'apprenant : elle remplit tout le cercle. */
.dz-hero__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 30%;
}

.dz-hero__arc {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform: rotate(-70deg);
}

.dz-hero__arc circle {
	fill: none;
	stroke: var(--dz-accent);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-dasharray: 35 100;
}

/* ---------- Hero : écriture ---------- */
/* Structure posée par home.js : un fantôme invisible réserve la place, le
   texte animé s'écrit par-dessus. Sans JavaScript, rien de tout cela. */

.dz-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dz-typewrite {
	position: relative;
	display: inline-block;
}

.dz-typewrite__ghost {
	visibility: hidden;
}

.dz-typewrite__live {
	position: absolute;
	inset: 0;
}

.dz-typewrite.is-rotating .dz-typewrite__live {
	white-space: nowrap;
}

/* Curseur : une barre orange qui clignote derrière la dernière lettre. */
.dz-typewrite.is-typing .dz-typewrite__live::after {
	content: "";
	display: inline-block;
	width: 0.09em;
	height: 0.95em;
	margin-left: 0.08em;
	/* Marge négative : le curseur ne prend pas de place et ne fait jamais
	   passer la dernière lettre à la ligne. */
	margin-right: -0.17em;
	vertical-align: -0.1em;
	background: var(--dz-accent);
	animation: dz-blink 1s steps(1) infinite;
}

@keyframes dz-blink {
	50% {
		opacity: 0;
	}
}

/* ---------- Hero : animation d'arrivée ---------- */
/* Animations CSS pures, sans attendre JavaScript : le hero est visible dès le
   chargement. Le texte monte ligne par ligne, puis le disque s'étend, la photo
   apparaît et l'arc orange se trace. Ensuite, le visuel flotte doucement. */

@keyframes dz-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dz-disc-in {
	from {
		opacity: 0;
		transform: scale(0.6);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dz-photo-in {
	from {
		opacity: 0;
		transform: scale(0.82);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dz-arc-draw {
	from {
		stroke-dasharray: 0 100;
	}
	to {
		stroke-dasharray: 35 100;
	}
}

@keyframes dz-arc-sway {
	0%,
	100% {
		transform: rotate(-70deg);
	}
	50% {
		transform: rotate(-58deg);
	}
}

@keyframes dz-photo-zoom {
	from {
		transform: scale(1.12) translateY(4%);
	}
	to {
		transform: none;
	}
}

.dz-hero__copy > * {
	animation: dz-rise 800ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.dz-hero__copy > :nth-child(2) {
	animation-delay: 120ms;
}

.dz-hero__copy > :nth-child(3) {
	animation-delay: 260ms;
}

.dz-hero__copy > :nth-child(4) {
	animation-delay: 400ms;
}

.dz-hero__copy > :nth-child(5) {
	animation-delay: 540ms;
}

.dz-hero__disc {
	transform-origin: 30% 70%;
	animation: dz-disc-in 1200ms cubic-bezier(0.22, 0.61, 0.36, 1) 150ms both;
}

.dz-hero__photo {
	animation:
		dz-photo-in 900ms cubic-bezier(0.34, 1.3, 0.64, 1) 350ms both,
		dz-float 7s ease-in-out 2.2s infinite;
}

.dz-hero__photo img {
	transform-origin: 50% 30%;
	animation: dz-photo-zoom 1600ms cubic-bezier(0.22, 0.61, 0.36, 1) 350ms both;
}

.dz-hero__arc {
	animation: dz-arc-sway 9s ease-in-out 2.4s infinite;
}

.dz-hero__arc circle {
	animation: dz-arc-draw 1100ms cubic-bezier(0.65, 0, 0.35, 1) 900ms both;
}

@media (min-width: 900px) {
	.dz-br {
		display: inline;
	}

	.dz-hero__title {
		font-size: min(var(--dz-fs-h1), 4.2vw);
	}

	/* minmax(0, …) : le grand visuel déborde de sa colonne au lieu de
	   rétrécir celle du titre. */
	.dz-hero__inner {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
		padding-top: var(--dz-space-6);
	}

	.dz-hero__copy {
		padding-bottom: var(--dz-space-6);
	}

	.dz-hero__inner {
		align-items: center;
	}

	/* Grand visuel : il dépasse de sa colonne et mord sur la marge droite de
	   la page (jusqu'à 80 px) pour gagner en taille sans serrer le titre. */
	.dz-hero__media {
		width: clamp(340px, 46vw - 120px, 600px);
		max-width: none;
		justify-self: end;
		margin-block: var(--dz-space-4);
		margin-right: calc(-1 * clamp(0px, (100vw - var(--dz-maxw)) / 2 + var(--dz-gutter), 80px));
	}

	.dz-hero__disc {
		top: -55%;
		left: 32%;
		width: 150%;
	}
}

/* ---------- Domaines (bandeau défilant) ---------- */

.dz-domains {
	--dz-marquee-duration: 70s;
	--dz-marquee-gap: 0.75rem;

	/* Bleus relevés sur la maquette du bandeau. */
	--dz-domains-bg: #004e85;
	--dz-domains-chip: #005a9a;
	--dz-domains-line: #3f7baf;

	background: var(--dz-domains-bg);
	border-top: 1px solid rgb(255 255 255 / 0.08);
}

.dz-domains__viewport {
	overflow: hidden;
	padding-block: var(--dz-space-2);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.dz-domains__track {
	display: flex;
	width: max-content;
	animation: dz-marquee var(--dz-marquee-duration) linear infinite;
}

.dz-domains__viewport:hover .dz-domains__track,
.dz-domains__viewport:focus-within .dz-domains__track {
	animation-play-state: paused;
}

.dz-domains__list {
	display: flex;
	flex-shrink: 0;
	gap: var(--dz-marquee-gap);
	padding-right: var(--dz-marquee-gap);
}

.dz-domains__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--dz-tap);
	padding-inline: 1.1rem;
	border: 1px solid var(--dz-domains-line);
	border-radius: var(--dz-radius);
	background: var(--dz-domains-chip);
	white-space: nowrap;
	font-size: var(--dz-fs-sm);
	font-weight: 600;
	color: var(--dz-on-dark);
	text-decoration: none;
	transition: background-color var(--dz-ease), border-color var(--dz-ease), transform var(--dz-ease);
}

.dz-domains__icon {
	flex-shrink: 0;
	width: 1.05rem;
	height: 1.05rem;
	fill: none;
	stroke: var(--dz-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dz-domains__list a:hover,
.dz-domains__list a:focus-visible {
	background: #0866aa;
	border-color: var(--dz-accent);
	color: var(--dz-on-dark);
	transform: translateY(-2px);
}

@keyframes dz-marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dz-domains__viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.dz-domains__track {
		width: auto;
		justify-content: center;
		animation: none;
	}

	.dz-domains__list {
		flex-shrink: 1;
		flex-wrap: wrap;
		justify-content: center;
		padding-inline: var(--dz-gutter);
	}

	.dz-domains__list[aria-hidden="true"] {
		display: none;
	}
}

/* ---------- Orientation (Deezpro AI) ---------- */

.dz-orient {
	position: relative;
	padding-block: var(--dz-space-6);
	background:
		radial-gradient(60rem 30rem at 85% 20%, rgba(27, 95, 193, 0.09), transparent 70%),
		var(--dz-bg-alt);
	overflow: hidden;
}

.dz-orient__inner {
	display: grid;
	gap: var(--dz-space-5);
	align-items: center;
}

.dz-orient .dz-eyebrow i {
	margin-right: 0.35rem;
}

.dz-orient .dz-title em {
	font-style: normal;
	color: var(--dz-accent-strong);
}

/* Étapes : frise verticale numérotée. */
.dz-orient__steps {
	display: grid;
	gap: var(--dz-space-3);
	margin-top: var(--dz-space-4);
	counter-reset: dz-orient-step;
}

.dz-orient__steps li {
	counter-increment: dz-orient-step;
	position: relative;
	padding-left: 3.5rem;
}

.dz-orient__steps li::before {
	content: counter(dz-orient-step);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--dz-bg);
	border: 2px solid var(--dz-blue);
	font-family: var(--dz-font-display);
	font-weight: 700;
	font-size: var(--dz-fs-sm);
	color: var(--dz-blue);
}

.dz-orient__steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(1.125rem - 1px);
	top: 2.5rem;
	bottom: calc(-1 * var(--dz-space-3) + 0.25rem);
	border-left: 2px dashed var(--dz-line);
}

.dz-orient__steps li:last-child::before {
	background: var(--dz-accent);
	border-color: var(--dz-accent);
	color: var(--dz-navy-deep);
}

.dz-orient__steps h3 {
	font-size: var(--dz-fs-h3);
	color: var(--dz-navy);
	padding-top: 0.3rem;
}

.dz-orient__steps p {
	margin-top: 0.25rem;
	font-size: var(--dz-fs-sm);
	color: var(--dz-muted);
}

.dz-orient__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dz-space-2) var(--dz-space-4);
	margin-top: var(--dz-space-4);
}

.dz-orient__proof {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: var(--dz-fs-sm);
	color: var(--dz-muted);
}

.dz-orient__proof strong {
	font-family: var(--dz-font-display);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--dz-accent-strong);
}

/* Carte de diagnostic (illustration). */
.dz-orient__demo {
	position: relative;
	width: 100%;
	max-width: 30rem;
	margin-inline: auto;
}

.dz-orient__demo::before {
	content: "";
	position: absolute;
	inset: 12% -0.5rem -0.75rem 12%;
	border-radius: var(--dz-radius-lg);
	background: var(--dz-brand-blue);
	transform: rotate(3deg);
}

.dz-orient__card {
	position: relative;
	padding: var(--dz-space-3);
	border-radius: var(--dz-radius-lg);
	background: var(--dz-bg);
	box-shadow: 0 24px 48px -24px rgba(7, 29, 77, 0.35);
}

.dz-orient__card-label {
	display: block;
	font-size: var(--dz-fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dz-muted);
}

.dz-orient__card-head {
	display: grid;
	grid-template-columns: 1fr;
	align-items: end;
	gap: 0 var(--dz-space-2);
	padding-bottom: var(--dz-space-2);
	border-bottom: 1px solid var(--dz-line);
}

.dz-orient__card-head .dz-orient__card-label {
	grid-column: 1 / -1;
}

.dz-orient__card-head strong {
	font-family: var(--dz-font-display);
	font-size: 1.375rem;
	color: var(--dz-navy);
}

.dz-orient__skills-title {
	margin: var(--dz-space-3) 0 0;
	font-size: var(--dz-fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dz-muted);
}

.dz-orient__skills {
	display: grid;
	gap: 0.25rem;
	padding-block: var(--dz-space-1) var(--dz-space-2);
}

/* Marge négative : le fond de la ligne mise en avant déborde sans décaler le texte. */
.dz-orient__skills li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.4rem;
	margin-inline: -0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--dz-radius);
	font-size: var(--dz-fs-sm);
}

.dz-orient__skills li.is-focus {
	background: var(--dz-blue-soft);
}

.dz-orient__skills li.is-focus .dz-orient__bar {
	background: var(--dz-bg);
}

.dz-orient__skill-name {
	font-weight: 600;
	color: var(--dz-ink);
}

.dz-orient__skill-share {
	font-size: var(--dz-fs-xs);
	font-weight: 600;
	color: var(--dz-navy);
}

.dz-orient__bar {
	grid-column: 1 / -1;
	height: 8px;
	border-radius: 99px;
	background: var(--dz-blue-soft);
	overflow: hidden;
}

.dz-orient__bar > span {
	display: block;
	width: var(--dz-level);
	height: 100%;
	border-radius: inherit;
	background: var(--dz-blue);
}


.dz-orient__reco {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border-radius: var(--dz-radius);
	background: var(--dz-blue-soft);
}

.dz-orient__reco i {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--dz-blue);
	color: var(--dz-on-dark);
}

.dz-orient__reco strong {
	display: block;
	font-size: var(--dz-fs-sm);
	line-height: 1.35;
	color: var(--dz-navy);
}

.dz-orient__demo figcaption {
	position: absolute;
	top: calc(-1 * 0.75rem);
	right: var(--dz-space-3);
	padding: 0.2rem 0.75rem;
	border-radius: 99px;
	background: var(--dz-accent);
	font-size: var(--dz-fs-xs);
	font-weight: 600;
	color: var(--dz-navy-deep);
}

@media (min-width: 480px) {
	.dz-orient__card-head {
		grid-template-columns: 1fr auto;
	}

	.dz-orient__demo::before {
		inset: 12% -6% -6% 12%;
	}
}

@media (min-width: 900px) {
	.dz-orient__inner {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--dz-space-6);
	}
}

/* ---------- Services ---------- */

.dz-services {
	padding-block: var(--dz-space-6);
}

.dz-services__head {
	max-width: 60rem;
	margin-inline: auto;
	margin-bottom: var(--dz-space-5);
	text-align: center;
}

/* Mots clés des titres en orange, comme dans les autres sections. */
.dz-services__head .dz-title em,
.dz-partners__head .dz-title em {
	font-style: normal;
	color: var(--dz-accent-strong);
}

.dz-b2b .dz-title em,
.dz-trainer .dz-title em {
	font-style: normal;
	color: var(--dz-accent);
}

.dz-services__head .dz-title {
	max-width: none;
	font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.375rem);
	color: var(--dz-svc-ink);
}

.dz-services__sub {
	margin-top: var(--dz-space-2);
	font-size: var(--dz-fs-lg);
	color: var(--dz-svc-muted);
}

.dz-services__sub strong {
	font-weight: 700;
	color: var(--dz-svc-ink);
}

/* Révélation ligne par ligne : chaque ligne glisse hors de son masque. */
.dz-reveal > span {
	display: block;
	overflow: hidden;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.dz-reveal > span > span {
	display: inline-block;
}

.dz-services__list {
	display: grid;
	gap: var(--dz-space-5);
	padding-bottom: var(--dz-space-2);
}

/* Couleurs de la maquette des trois offres. */
.dz-services {
	--dz-svc-ink: #16233a;
	--dz-svc-text: #5b6472;
	--dz-svc-muted: #6b7280;
}

.dz-service--elearning {
	--dz-tone: #185fa5;
}

.dz-service--mentorat {
	--dz-tone: #ba7517;
}

.dz-service--certification {
	--dz-tone: #534ab7;
}

/* Carte au style du diagnostic : carte blanche posée sur un panneau incliné. */
.dz-service {
	--dz-tone-soft: color-mix(in srgb, var(--dz-tone) 10%, #ffffff);
	position: relative;
	width: 100%;
	max-width: 26rem;
	margin-inline: auto;
}

/* Panneaux orientés vers l'extérieur : à gauche pour la 1re carte, à droite
   pour la 3e, vers le bas pour celle du milieu. Ils ne se chevauchent pas
   dans les gouttières entre cartes. */
.dz-service {
	--dz-panel-inset: 14% 14% -0.75rem -0.5rem;
	--dz-panel-rot: -3deg;
}

.dz-service:nth-child(2) {
	--dz-panel-inset: 14% 5% -1rem 5%;
	--dz-panel-rot: 1.5deg;
}

.dz-service:nth-child(3) {
	--dz-panel-inset: 14% -0.5rem -0.75rem 14%;
	--dz-panel-rot: 3deg;
}

.dz-service::before {
	content: "";
	position: absolute;
	inset: var(--dz-panel-inset);
	border-radius: var(--dz-radius-lg);
	background: var(--dz-tone);
	transform: rotate(var(--dz-panel-rot));
}

.dz-service__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--dz-space-3);
	border-radius: var(--dz-radius-lg);
	background: var(--dz-bg);
	box-shadow: 0 24px 48px -24px rgba(7, 29, 77, 0.35);
	transition: translate var(--dz-ease), box-shadow var(--dz-ease);
}

/* translate et non transform : l'animation d'entrée garde la main sur transform. */
.dz-service:hover .dz-service__card {
	translate: 0 -4px;
	box-shadow: 0 30px 56px -24px rgba(7, 29, 77, 0.45);
}

.dz-service__badge {
	position: absolute;
	top: -0.75rem;
	right: var(--dz-space-3);
	padding: 0.2rem 0.75rem;
	border-radius: 99px;
	background: var(--dz-tone);
	font-size: var(--dz-fs-xs);
	font-weight: 600;
	color: var(--dz-on-dark);
}

.dz-service__head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-bottom: var(--dz-space-2);
	border-bottom: 1px solid var(--dz-line);
}

.dz-service__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 12px;
	background: var(--dz-tone);
	font-size: 1.125rem;
	color: var(--dz-on-dark);
}

.dz-service__title {
	font-size: 1.375rem;
	color: var(--dz-svc-ink);
}

.dz-service__text {
	margin-top: var(--dz-space-2);
	font-size: var(--dz-fs-sm);
	line-height: 1.7;
	color: var(--dz-svc-text);
}

/* margin-bottom : espace minimal avant le lien, que margin-top: auto aligne
   en bas des trois cartes. */
.dz-service__check {
	display: flex;
	gap: 0.6rem;
	margin: var(--dz-space-2) 0 var(--dz-space-3);
	font-size: var(--dz-fs-sm);
	font-weight: 600;
	line-height: 1.55;
	color: var(--dz-tone);
}

.dz-service__check i {
	margin-top: 0.3em;
	font-size: 0.875em;
}

/* Lien d'action au style du bloc « formation » du diagnostic. */
.dz-service__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding: 0.875rem 1rem;
	border-radius: var(--dz-radius);
	background: var(--dz-tone-soft);
	font-family: var(--dz-font-display);
	font-weight: 600;
	font-size: var(--dz-fs-md);
	color: var(--dz-tone);
	text-decoration: none;
	transition: background-color var(--dz-ease);
}

.dz-service__link i {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--dz-tone);
	font-size: 0.875rem;
	color: var(--dz-on-dark);
	transition: transform var(--dz-ease);
}

.dz-service__link:hover i,
.dz-service__link:focus-visible i {
	transform: translateX(4px);
}

.dz-service__link:hover span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (min-width: 1000px) {
	.dz-services__list {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--dz-space-4);
	}

	.dz-service {
		max-width: none;
	}
}

/* Animation : chaque carte monte, son panneau pivote, le badge apparaît,
   puis la ligne ✓ et le lien arrivent. */
.dz-reveal-ready .dz-services__list[data-dz-reveal] .dz-service {
	--dz-in: calc(var(--i, 0) * 180ms);
}

.dz-reveal-ready .dz-services__list[data-dz-reveal] .dz-service__card {
	opacity: 0;
}

.dz-reveal-ready .dz-services__list.is-revealed .dz-service__card {
	animation: dz-card-in 900ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--dz-in) forwards;
}

.dz-reveal-ready .dz-services__list[data-dz-reveal] .dz-service::before {
	opacity: 0;
	transform: rotate(0deg) translateY(24px);
	transition: opacity 700ms ease calc(var(--dz-in) + 250ms), transform 1100ms cubic-bezier(0.34, 1.4, 0.64, 1) calc(var(--dz-in) + 250ms);
}

.dz-reveal-ready .dz-services__list.is-revealed .dz-service::before {
	opacity: 1;
	transform: rotate(var(--dz-panel-rot));
}

.dz-reveal-ready .dz-services__list[data-dz-reveal] .dz-service__badge {
	opacity: 0;
}

.dz-reveal-ready .dz-services__list.is-revealed .dz-service__badge {
	animation: dz-pop 600ms cubic-bezier(0.34, 1.4, 0.64, 1) calc(var(--dz-in) + 450ms) forwards;
}

.dz-reveal-ready .dz-services__list[data-dz-reveal] .dz-service__icon {
	transform: scale(0.5) rotate(-12deg);
	transition: transform 600ms cubic-bezier(0.34, 1.6, 0.64, 1) calc(var(--dz-in) + 400ms);
}

.dz-reveal-ready .dz-services__list.is-revealed .dz-service__icon {
	transform: none;
}

.dz-reveal-ready .dz-services__list[data-dz-reveal] .dz-service__check {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 600ms ease calc(var(--dz-in) + 1000ms), transform 600ms ease calc(var(--dz-in) + 1000ms);
}

.dz-reveal-ready .dz-services__list.is-revealed .dz-service__check {
	opacity: 1;
	transform: none;
}

.dz-reveal-ready .dz-services__list[data-dz-reveal] .dz-service__link {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms ease calc(var(--dz-in) + 1200ms), transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--dz-in) + 1200ms), background-color var(--dz-ease);
}

.dz-reveal-ready .dz-services__list.is-revealed .dz-service__link {
	opacity: 1;
	transform: none;
}

/* ---------- Partenaires ---------- */

.dz-partners {
	padding-block: var(--dz-space-6);
	background: var(--dz-bg);
}

.dz-partners__head {
	margin-bottom: var(--dz-space-5);
	text-align: center;
}

.dz-partners__head .dz-title {
	max-width: none;
	font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.375rem);
}

/* Bandeau défilant en boucle, sur le modèle de celui des domaines. */
.dz-partners {
	--dz-partners-duration: 45s;
	--dz-partners-gap: var(--dz-space-2);
}

.dz-partners__viewport {
	overflow: hidden;
	padding-block: var(--dz-space-1) var(--dz-space-2);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.dz-partners__track {
	display: flex;
	width: max-content;
	animation: dz-marquee var(--dz-partners-duration) linear infinite;
}

.dz-partners__viewport:hover .dz-partners__track {
	animation-play-state: paused;
}

.dz-partners__list {
	display: flex;
	flex-shrink: 0;
	gap: var(--dz-partners-gap);
	padding-right: var(--dz-partners-gap);
}

.dz-partner {
	display: grid;
	place-items: center;
	height: 6.5rem;
	padding-inline: var(--dz-space-4);
	border: 1px solid var(--dz-line);
	border-radius: var(--dz-radius-lg);
	background: var(--dz-bg);
	transition: translate var(--dz-ease), box-shadow var(--dz-ease), border-color var(--dz-ease);
}

.dz-partner img {
	width: auto;
	max-width: none;
	height: calc(var(--dz-logo-h, 48) * 0.85px);
	transition: scale 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dz-partner:hover {
	translate: 0 -4px;
	border-color: transparent;
	box-shadow: 0 18px 40px -22px rgb(12 93 153 / 0.45);
}

.dz-partner:hover img {
	scale: 1.06;
}

@media (min-width: 768px) {
	.dz-partners {
		--dz-partners-gap: var(--dz-space-3);
	}

	.dz-partner {
		height: 8rem;
	}

	.dz-partner img {
		height: calc(var(--dz-logo-h, 48) * 1px);
	}
}

/* Entrée : le bandeau glisse depuis la droite en fondu. */
.dz-reveal-ready .dz-partners__viewport[data-dz-reveal] {
	opacity: 0;
	transform: translateX(48px);
	transition: opacity 900ms ease, transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dz-reveal-ready .dz-partners__viewport.is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.dz-partners__viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.dz-partners__track {
		width: auto;
		justify-content: center;
		animation: none;
	}

	.dz-partners__list {
		flex-shrink: 1;
		flex-wrap: wrap;
		justify-content: center;
		padding-inline: var(--dz-gutter);
	}

	.dz-partners__list[aria-hidden="true"] {
		display: none;
	}
}

/* ---------- Chiffres ---------- */

.dz-figures {
	background: var(--dz-brand-blue);
	color: var(--dz-on-dark);
}

.dz-figures .dz-figures__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--dz-space-4) var(--dz-space-2);
	margin: 0;
	padding: var(--dz-space-5) 0;
	text-align: center;
}

.dz-figures .dz-figures__list div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 0.35rem;
}

.dz-figures .dz-figures__list dd {
	margin: 0;
	padding: 0;
	font-family: var(--dz-font-display);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--dz-accent);
}

.dz-figures .dz-figures__list dt {
	font-size: var(--dz-fs-sm);
	font-weight: 500;
	color: var(--dz-on-dark);
}

@media (min-width: 768px) {
	.dz-figures .dz-figures__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Pourquoi nous choisir ---------- */

.dz-why {
	padding-block: var(--dz-space-6);
	background: var(--dz-bg-alt);
}

.dz-why__inner {
	display: grid;
	gap: var(--dz-space-5);
}

.dz-why .dz-title {
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
}

.dz-why .dz-lead {
	font-size: var(--dz-fs-sm);
}

.dz-why .dz-title em {
	font-style: normal;
	color: var(--dz-accent-strong);
}

.dz-why__reasons h3 {
	font-size: var(--dz-fs-h3);
	color: var(--dz-navy);
}

.dz-why__reasons h3 {
	align-self: center;
}

.dz-why__reasons p {
	grid-column: 2;
	font-size: var(--dz-fs-sm);
	line-height: 1.55;
	color: var(--dz-muted);
}

.dz-why__reasons {
	display: grid;
	margin-top: var(--dz-space-4);
	padding-top: var(--dz-space-4);
	border-top: 1px solid var(--dz-line);
	grid-template-columns: minmax(0, 1fr);
	gap: var(--dz-space-3) var(--dz-space-4);
}

.dz-why__reasons li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0.25rem 0.875rem;
}

.dz-why__reasons li > i {
	grid-row: span 2;
}

.dz-why__reasons i {
	display: grid;
	place-items: center;
	width: var(--dz-tap);
	height: var(--dz-tap);
	border-radius: var(--dz-radius);
	background: var(--dz-blue-soft);
	font-size: 1.15rem;
	color: var(--dz-blue);
}

.dz-why__media {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--dz-space-4) var(--dz-space-2);
	border-radius: var(--dz-radius-lg);
	background:
		linear-gradient(rgb(12 93 153 / 0.35), rgb(12 93 153 / 0.35)),
		url("img/fond-equipe.webp") center / cover no-repeat;
	overflow: hidden;
}

.dz-why__media {
	max-height: 26rem;
}

.dz-why__media img {
	max-height: 22rem;
}

@media (min-width: 1000px) {
	.dz-why__media {
		max-height: none;
	}
}

.dz-why__media img {
	max-height: 560px;
	width: auto;
}

@media (min-width: 640px) {
	.dz-why__reasons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.dz-why__inner {
		grid-template-columns: 1.3fr 0.7fr;
		gap: var(--dz-space-6);
	}
}

/* ---------- Entreprises ---------- */

.dz-b2b {
	padding-block: var(--dz-space-6);
	background: var(--dz-brand-blue);
	color: var(--dz-on-dark);
}

.dz-b2b__inner {
	display: grid;
	gap: var(--dz-space-3);
	align-items: center;
}

.dz-b2b .dz-title {
	color: var(--dz-on-dark);
}

.dz-b2b .dz-lead {
	color: var(--dz-on-dark-muted);
}

.dz-b2b .dz-checks {
	margin: 0;
}

@media (min-width: 900px) {
	.dz-b2b__inner {
		grid-template-columns: 1.2fr 1fr;
		column-gap: var(--dz-space-6);
	}

	.dz-b2b .dz-actions {
		grid-column: 1 / -1;
	}
}

/* ---------- Devenir formateur ---------- */

.dz-trainer {
	padding-block: var(--dz-space-6);
}

.dz-trainer__panel {
	display: grid;
	align-items: end;
	border-radius: var(--dz-radius-lg);
	color: var(--dz-on-dark);
	background:
		linear-gradient(100deg, rgb(12 93 153 / 0.96), rgb(12 93 153 / 0.8)),
		url("img/fond-equipe.webp") center / cover no-repeat;
	overflow: hidden;
}

.dz-trainer__copy {
	padding: var(--dz-space-5) var(--dz-space-3) var(--dz-space-3);
}

.dz-trainer .dz-title {
	color: var(--dz-on-dark);
}

.dz-trainer__copy p {
	color: var(--dz-on-dark-muted);
	max-width: 52ch;
	margin-block: var(--dz-space-2) var(--dz-space-4);
}

.dz-trainer .dz-trainer__img {
	justify-self: center;
	align-self: end;
	max-width: 300px;
}

@media (min-width: 900px) {
	.dz-trainer__panel {
		grid-template-columns: 1.15fr 0.85fr;
	}

	.dz-trainer__copy {
		padding: var(--dz-space-5);
		align-self: center;
	}

	.dz-trainer .dz-trainer__img {
		justify-self: end;
		max-width: 100%;
	}
}

/* ---------- Inscription ---------- */

.dz-signup {
	padding-block: var(--dz-space-6);
	background: var(--dz-brand-blue);
	color: var(--dz-on-dark);
}

.dz-signup__inner {
	display: grid;
	justify-items: center;
	gap: var(--dz-space-3);
	text-align: center;
}

/* Visiteur connecté (« Reprenez là où vous vous êtes arrêté ») : section
   blanche et panneau bleu arrondi, comme « Devenez formateur », pour se
   détacher de la bande bleue « Entreprises ». */
.dz-signup--panel {
	background: var(--dz-bg);
}

/* Après le panneau formateur, pas de double espace blanc. */
.dz-trainer + .dz-signup--panel {
	padding-top: 0;
}

.dz-signup--panel .dz-signup__inner {
	width: calc(100% - 2 * var(--dz-gutter));
	max-width: calc(var(--dz-maxw) - 2 * var(--dz-gutter));
	padding: var(--dz-space-5) var(--dz-space-3);
	border-radius: var(--dz-radius-lg);
	background:
		linear-gradient(100deg, rgb(12 93 153 / 0.96), rgb(12 93 153 / 0.8)),
		url("img/fond-equipe.webp") center / cover no-repeat;
}

.dz-signup .dz-title {
	max-width: 24ch;
	color: var(--dz-on-dark);
}

.dz-signup .dz-title em {
	font-style: normal;
	color: var(--dz-accent);
}

.dz-signup .dz-actions {
	justify-content: center;
}

.dz-signup__note {
	font-size: var(--dz-fs-sm);
	color: var(--dz-on-dark-muted);
}

/* Titre tapé ligne après ligne, avec un curseur sur la ligne en cours. */
.dz-type > span {
	display: block;
}

/* ---------- Petits écrans (sections du bas de page) ---------- */

@media (max-width: 767px) {
	/* Services : en-tête plus compact. */
	.dz-services__head {
		margin-bottom: var(--dz-space-4);
	}

	.dz-service__title {
		font-size: 1.25rem;
	}

	/* Pourquoi : le visuel ne prend pas tout l'écran. */
	.dz-why__media {
		max-height: 20rem;
		padding-block: var(--dz-space-3);
	}

	.dz-why__media img {
		max-height: 17rem;
	}

	/* Formateur : texte et image plus compacts. */
	.dz-trainer {
		padding-block: var(--dz-space-5);
	}

	.dz-trainer__copy {
		padding: var(--dz-space-4) var(--dz-space-3) var(--dz-space-2);
	}

	.dz-trainer .dz-trainer__img {
		max-width: 240px;
	}

	.dz-b2b .dz-checks {
		gap: 0.875rem;
	}
}

@media (max-width: 559px) {
	/* Boutons pleine largeur : même taille, faciles à toucher. */
	.dz-b2b .dz-actions,
	.dz-b2b .dz-btn,
	.dz-trainer .dz-actions,
	.dz-trainer .dz-btn,
	.dz-signup .dz-actions,
	.dz-signup .dz-btn {
		width: 100%;
	}

	.dz-signup .dz-actions {
		flex-direction: column;
	}

	.dz-figures .dz-figures__list {
		padding-block: var(--dz-space-4);
	}

	.dz-figures .dz-figures__list dt {
		font-size: var(--dz-fs-xs);
	}
}

/* ---------- Apparition à l'entrée dans la section ---------- */
/* Les styles ci-dessous ne s'appliquent qu'avec JavaScript actif : sans lui,
   la classe dz-reveal-ready n'est jamais posée et le texte reste visible. */

.dz-reveal-ready [data-dz-reveal] :where(dt, dd) {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dz-reveal-ready [data-dz-reveal].is-revealed :where(dt, dd) {
	opacity: 1;
	transform: none;
}

.dz-reveal-ready [data-dz-reveal] dt {
	transition-delay: 260ms;
}

.dz-reveal-ready .dz-reveal > span > span {
	display: inline-block;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 1000ms ease, transform 1000ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dz-reveal-ready .dz-reveal.is-revealed > span > span {
	opacity: 1;
	transform: none;
}

.dz-reveal-ready .dz-reveal > span:nth-child(2) > span {
	transition-delay: 260ms;
}

/* Effet machine à écrire : la ligne se dévoile caractère par caractère. */
@keyframes dz-type {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 -0.45em 0 0);
	}
}

@keyframes dz-caret {
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* Sous 640 px les lignes reviennent à la ligne : simple fondu au lieu de la frappe. */
.dz-reveal-ready .dz-type {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dz-reveal-ready .dz-type.is-revealed {
	opacity: 1;
	transform: none;
}

@media (min-width: 640px) {
	.dz-reveal-ready .dz-type {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.dz-reveal-ready .dz-type > span {
		clip-path: inset(0 100% 0 0);
	}

	.dz-reveal-ready .dz-type.is-revealed > span {
		animation: dz-type calc(var(--dz-chars, 24) * 45ms) steps(var(--dz-chars, 24)) forwards;
	}

	.dz-reveal-ready .dz-type.is-revealed > span:nth-child(2) {
		animation-delay: calc(var(--dz-type-first, 20) * 45ms + 200ms);
	}

	.dz-reveal-ready .dz-type.is-revealed > span:last-child::after {
		content: "";
		display: inline-block;
		width: 0.08em;
		height: 0.9em;
		margin-left: 0.1em;
		vertical-align: -0.08em;
		background: var(--dz-accent);
		animation: dz-caret 900ms steps(1) 5 forwards;
	}
}

/* ---------- Orientation : animations ---------- */
/* Chorégraphie de la carte : elle monte, le panneau bleu pivote, le badge
   apparaît, les compétences arrivent une à une avec leur barre et leur
   pourcentage qui compte, puis la ligne « focus » s'allume et la formation
   s'affiche. Les délais des barres sont repris dans orientation.php. */

@keyframes dz-card-in {
	from {
		opacity: 0;
		transform: translateY(48px) rotate(-2deg) scale(0.96);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dz-float {
	0%,
	100% {
		transform: none;
	}
	50% {
		transform: translateY(-8px);
	}
}

@keyframes dz-pop {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}
	70% {
		opacity: 1;
		transform: scale(1.08);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes dz-pulse {
	from {
		box-shadow: 0 0 0 0 rgba(27, 95, 193, 0.45);
	}
	to {
		box-shadow: 0 0 0 14px rgba(27, 95, 193, 0);
	}
}

@keyframes dz-shine {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(250%);
	}
}

.dz-reveal-ready .dz-orient__demo[data-dz-reveal] .dz-orient__card {
	opacity: 0;
}

.dz-reveal-ready .dz-orient__demo.is-revealed .dz-orient__card {
	animation:
		dz-card-in 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
		dz-float 7s ease-in-out 3.4s infinite;
}

.dz-reveal-ready .dz-orient__demo[data-dz-reveal]::before {
	opacity: 0;
	transform: rotate(-4deg) translateY(24px);
	transition: opacity 700ms ease 250ms, transform 1100ms cubic-bezier(0.34, 1.4, 0.64, 1) 250ms;
}

.dz-reveal-ready .dz-orient__demo.is-revealed::before {
	opacity: 1;
	transform: rotate(3deg);
}

.dz-reveal-ready .dz-orient__demo[data-dz-reveal] figcaption {
	opacity: 0;
}

.dz-reveal-ready .dz-orient__demo.is-revealed figcaption {
	animation: dz-pop 600ms cubic-bezier(0.34, 1.4, 0.64, 1) 450ms forwards;
}

/* Lignes de compétences : entrée en cascade, puis barre et pourcentage. */
.dz-reveal-ready .dz-orient__demo[data-dz-reveal] .dz-orient__skills li {
	--dz-in: calc(600ms + var(--i, 0) * 120ms);
	opacity: 0;
	transform: translateX(-16px);
	transition:
		opacity 600ms ease var(--dz-in),
		transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--dz-in),
		background-color 600ms ease 2300ms;
}

.dz-reveal-ready .dz-orient__demo.is-revealed .dz-orient__skills li {
	opacity: 1;
	transform: none;
}

.dz-reveal-ready .dz-orient__demo[data-dz-reveal] .dz-orient__skills li.is-focus {
	background-color: transparent;
}

.dz-reveal-ready .dz-orient__demo.is-revealed .dz-orient__skills li.is-focus {
	background-color: var(--dz-blue-soft);
}

.dz-reveal-ready .dz-orient__demo[data-dz-reveal] .dz-orient__bar > span {
	position: relative;
	overflow: hidden;
	width: 0;
	transition: width 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) calc(750ms + var(--i, 0) * 120ms);
}

.dz-reveal-ready .dz-orient__demo.is-revealed .dz-orient__bar > span {
	width: var(--dz-level);
}

/* Reflet qui balaie la barre une fois remplie. */
.dz-reveal-ready .dz-orient__demo[data-dz-reveal] .dz-orient__bar > span::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 40%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: translateX(-100%);
}

.dz-reveal-ready .dz-orient__demo.is-revealed .dz-orient__bar > span::after {
	animation: dz-shine 900ms ease-in-out calc(1850ms + var(--i, 0) * 120ms);
}

/* Formation : arrive en dernier, l'icône émet deux ondes. */
.dz-reveal-ready .dz-orient__demo[data-dz-reveal] .dz-orient__reco {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms ease 2600ms, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 2600ms;
}

.dz-reveal-ready .dz-orient__demo.is-revealed .dz-orient__reco {
	opacity: 1;
	transform: none;
}

.dz-reveal-ready .dz-orient__demo.is-revealed .dz-orient__reco i {
	animation: dz-pulse 1200ms ease-out 3000ms 2;
}

/* Étapes : chaque étape glisse, sa pastille rebondit et le pointillé se trace. */
.dz-reveal-ready .dz-orient__steps[data-dz-reveal] li {
	--dz-in: calc(var(--i, 0) * 220ms);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms ease var(--dz-in), transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--dz-in);
}

.dz-reveal-ready .dz-orient__steps[data-dz-reveal] li::before {
	transform: scale(0.4);
	transition: transform 600ms cubic-bezier(0.34, 1.6, 0.64, 1) calc(var(--dz-in) + 150ms);
}

.dz-reveal-ready .dz-orient__steps[data-dz-reveal] li:not(:last-child)::after {
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 500ms ease calc(var(--dz-in) + 400ms);
}

.dz-reveal-ready .dz-orient__steps.is-revealed li,
.dz-reveal-ready .dz-orient__steps.is-revealed li::before,
.dz-reveal-ready .dz-orient__steps.is-revealed li:not(:last-child)::after {
	opacity: 1;
	transform: none;
}

/* ---------- Retour en haut ---------- */

.dz-totop {
	position: fixed;
	right: max(var(--dz-gutter), env(safe-area-inset-right));
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	z-index: 50;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: #237ac3;
	box-shadow: 0 10px 24px -8px rgb(4 30 60 / 0.5);
	color: var(--dz-on-dark);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(0.8);
	transition: opacity 300ms ease, transform 400ms cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0s linear 400ms, background-color var(--dz-ease);
}

.dz-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.dz-totop:hover,
.dz-totop:focus-visible {
	background: var(--dz-brand-blue);
}

.dz-totop svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--dz-ease);
}

.dz-totop:hover svg {
	transform: translateY(-3px);
}

@media (min-width: 768px) {
	.dz-totop {
		right: 1.75rem;
		bottom: 1.75rem;
	}
}

/* ---------- Visite guidée ---------- */
/* Construite par home.js. La zone éclairée est un « trou » dont l'ombre géante
   assombrit tout le reste ; il glisse d'une étape à l'autre. */

.dz-tour {
	position: fixed;
	inset: 0;
	z-index: 100000;
	opacity: 0;
	transition: opacity 300ms ease;
}

.dz-tour.is-open {
	opacity: 1;
}

.dz-tour__hole {
	position: fixed;
	border-radius: var(--dz-radius-lg);
	box-shadow: 0 0 0 200vmax rgb(4 24 48 / 0.68);
	outline: 2px solid var(--dz-accent);
	outline-offset: 2px;
	pointer-events: none;
	transition: top 500ms cubic-bezier(0.22, 0.61, 0.36, 1), left 500ms cubic-bezier(0.22, 0.61, 0.36, 1), width 500ms cubic-bezier(0.22, 0.61, 0.36, 1), height 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dz-tour.is-intro .dz-tour__hole {
	outline-color: transparent;
}

.dz-tour__card {
	position: fixed;
	width: min(22.5rem, calc(100vw - 2rem));
	padding: var(--dz-space-3);
	border-radius: var(--dz-radius-lg);
	background: var(--dz-bg);
	box-shadow: 0 30px 60px -20px rgb(4 24 48 / 0.6);
	color: var(--dz-ink);
	opacity: 0;
	transform: translateY(12px) scale(0.97);
	transition: opacity 280ms ease, transform 380ms cubic-bezier(0.34, 1.3, 0.64, 1);
}

.dz-tour__card.is-shown {
	opacity: 1;
	transform: none;
}

.dz-tour__card:focus {
	outline: none;
}

/* Fenêtre d'accueil : centrée, un peu plus large. */
.dz-tour.is-intro .dz-tour__card {
	top: 50%;
	left: 50%;
	width: min(26rem, calc(100vw - 2rem));
	text-align: center;
	translate: -50% -50%;
}

/* Petits écrans : la carte se pose en bas comme une feuille. */
.dz-tour.is-mobile:not(.is-intro) .dz-tour__card {
	top: auto;
	right: 0.75rem;
	bottom: max(0.75rem, env(safe-area-inset-bottom));
	left: 0.75rem;
	width: auto;
}

.dz-tour__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dz-space-1);
	margin-bottom: 0.75rem;
}

.dz-tour.is-intro .dz-tour__top {
	justify-content: center;
}

.dz-tour__badge {
	padding: 0.15rem 0.65rem;
	border-radius: 99px;
	background: var(--dz-accent);
	font-size: var(--dz-fs-xs);
	font-weight: 600;
	color: var(--dz-navy-deep);
}

.dz-tour__count {
	font-size: var(--dz-fs-xs);
	font-weight: 600;
	color: var(--dz-muted);
}

.dz-tour__title {
	font-family: var(--dz-font-display);
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--dz-navy);
}

.dz-tour__text {
	margin-top: 0.5rem;
	font-size: var(--dz-fs-sm);
	line-height: 1.6;
	color: var(--dz-muted);
}

.dz-tour__dots {
	display: flex;
	gap: 0.35rem;
	margin-top: var(--dz-space-2);
}

.dz-tour.is-intro .dz-tour__dots {
	justify-content: center;
}

.dz-tour__dots span {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 99px;
	background: var(--dz-line);
	transition: width 300ms ease, background-color 300ms ease;
}

.dz-tour__dots span.is-done {
	background: var(--dz-brand-sky);
}

.dz-tour__dots span.is-active {
	width: 1.5rem;
	background: var(--dz-brand-blue);
}

.dz-tour__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dz-space-1);
	margin-top: var(--dz-space-3);
}

.dz-tour__nav {
	display: flex;
	gap: 0.5rem;
	margin-left: auto;
}

.dz-tour.is-intro .dz-tour__actions {
	flex-direction: column-reverse;
}

.dz-tour.is-intro .dz-tour__nav {
	width: 100%;
	margin-left: 0;
}

.dz-tour.is-intro .dz-tour .dz-tour__next {
	flex: 1;
}

.dz-tour button {
	min-height: var(--dz-tap);
	padding: 0 1rem;
	border: 1px solid transparent;
	border-radius: var(--dz-radius);
	font: inherit;
	font-size: var(--dz-fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--dz-ease), color var(--dz-ease), border-color var(--dz-ease);
}

.dz-tour button[hidden] {
	display: none;
}

.dz-tour .dz-tour__skip {
	padding-inline: 0.25rem;
	background: none;
	color: var(--dz-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dz-tour .dz-tour__skip:hover {
	color: var(--dz-ink);
}

.dz-tour .dz-tour__prev {
	background: var(--dz-bg);
	border-color: var(--dz-line);
	color: var(--dz-navy);
}

.dz-tour .dz-tour__prev:hover {
	border-color: var(--dz-brand-blue);
}

.dz-tour__next {
	background: var(--dz-brand-blue);
	color: var(--dz-on-dark);
}

.dz-tour .dz-tour__next:hover {
	background: var(--dz-navy);
}

.dz-tour button:focus-visible {
	outline: 2px solid var(--dz-focus);
	outline-offset: 2px;
}

/* ---------- Performance : boucles en pause hors de l'écran ---------- */
/* home.js pose .is-offscreen sur les sections animées en boucle (bandeaux,
   visuels flottants) quand elles sortent de l'écran : le navigateur ne
   calcule plus d'images pour rien. */

.is-offscreen,
.is-offscreen * {
	animation-play-state: paused !important;
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
	.dz-home *,
	.dz-home *::before,
	.dz-home *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}