/**
 * Page Build · « Comment on transforme une vision en produit. » (Figma 2001:696622 et les états
 * 2001:120658 / 120801 / 120938, Moez 2026-10-30). Textes du wireframe de Moez.
 * Desktop (≥ 1024 px) : quatre étapes côte à côte (écart 20, hauteur 500) ; l'étape active est
 * ouverte (576 px à 1440, fond blanc 10 %) et montre son illustration ; les autres, fermées
 * (contour #2e2e2e), gardent numéro, titre et texte, qui s'adaptent à la largeur. Au survol
 * d'une étape, elle s'ouvre et l'autre se ferme (largeur animée par flex-grow, courbe accélérée
 * puis freinée) ; les éléments de l'illustration apparaissent dans un ordre tiré au hasard
 * (steps.js). Mobile et tablette : étapes empilées, sans illustration.
 */

.stravos-process {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 96px;
	margin-block: 0;
	padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--gutter) !important;
}

.stravos-process > *,
.stravos-process .wp-block-group > * {
	margin-block: 0;
}

.stravos-process__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 880px;
	text-align: center;
}

.stravos-process__intro h2 {
	color: var(--wp--preset--color--white);
}

.stravos-process__lead {
	font-size: var(--wp--preset--font-size--text-main);
	line-height: 1.4;
	color: var(--wp--preset--color--white-70);
}

/* ---------- Étapes ---------- */

.stravos-steps {
	display: flex;
	gap: 20px;
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stravos-step {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	overflow: hidden;
	padding: 24px;
	background: rgba(255, 255, 255, 0);
	border: 1px solid #2e2e2e;
	border-radius: var(--wp--custom--radius--medium);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	cursor: pointer;
	--stravos-step-accent: var(--wp--preset--color--digital-orange);
	transition:
		flex-grow 650ms cubic-bezier(0.65, 0, 0.35, 1),
		background-color 450ms ease,
		border-color 450ms ease;
}

.stravos-step.is-step-2 {
	--stravos-step-accent: var(--wp--preset--color--accent-pink);
}

.stravos-step.is-step-3 {
	--stravos-step-accent: #ffad3b;
}

.stravos-step.is-step-4 {
	--stravos-step-accent: var(--wp--preset--color--impact-red);
}

.stravos-step__num {
	box-sizing: border-box;
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--white);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--wp--custom--radius--small);
	box-shadow: 0 7px 20px 0 #000, inset 0 0 3px 3px rgba(255, 255, 255, 0.08);
}

.stravos-step h3 {
	font-size: var(--wp--preset--font-size--heading-5);
	font-weight: 500;
	line-height: 1.1;
	color: var(--wp--preset--color--white);
}

.stravos-step__text {
	font-size: var(--wp--preset--font-size--text-small);
	line-height: 1.4;
	color: var(--wp--preset--color--white-70);
}

.stravos-step__stage {
	display: none;
}

/* ---------- Desktop : accordéon horizontal ---------- */

@media (min-width: 1024px) {
	.stravos-steps {
		height: 500px;
	}

	/* Étape ouverte : 576 px à 1440 (les marges de 2 × 24 px restent hors du partage : 3,54 et non 2,82). */
	.stravos-step.is-active,
	.stravos-steps:not([data-active]) .stravos-step:first-child {
		flex-grow: 3.54;
		background-color: rgba(255, 255, 255, 0.1);
		border-color: var(--stravos-step-accent);
		cursor: default;
	}

	.stravos-step:not(.is-active):hover {
		border-color: var(--stravos-step-accent);
	}

	/* Zone de l'illustration (le reste de la hauteur), maquette du Figma calée à 10 / 47 px. */
	.stravos-step__stage {
		position: relative;
		display: block;
		flex: 1 1 auto;
		min-height: 0;
	}

	.stravos-step .pv {
		position: absolute;
		top: 47px;
		left: 10px;
		width: 640px;
		height: 480px;
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease, visibility 0s linear 200ms;
	}

	.stravos-step.is-active .pv,
	.stravos-steps:not([data-active]) .stravos-step:first-child .pv {
		opacity: 1;
		visibility: visible;
		transition: opacity 300ms ease 150ms;
	}
}

/* ---------- Illustrations (maquettes du Figma) ---------- */

.pv {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow: hidden;
	padding: 28px;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
	background: rgba(255, 255, 255, 0.06);
	border: 0.5px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--wp--custom--radius--medium);
	cursor: default;
}

.pv * {
	box-sizing: border-box;
}

.pv i,
.pv b,
.pv small {
	font-style: normal;
}

.pv-head {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
}

.pv-title {
	font-size: 16px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

.pv-progress {
	display: flex;
	gap: 12px;
	align-items: center;
	color: rgba(255, 255, 255, 0.7);
}

.pv-progress b {
	font-weight: 400;
	color: #fff;
}

.pv-bar {
	position: relative;
	width: 77px;
	height: 4px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 100px;
}

.pv-bar > span {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--wp--preset--color--impact-red);
	border-radius: 100px;
}

.pv-divider {
	display: block;
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
}

.pv-cols {
	display: flex;
	flex: 1;
	gap: 16px;
	min-height: 0;
}

.pv-col {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.pv-label {
	font-size: 14px;
}

.pv-check {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 5px 0;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.35);
}

.pv-check i {
	display: grid;
	flex: none;
	place-items: center;
	width: 14px;
	height: 14px;
	font-size: 9px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;
}

.pv-check.is-done {
	color: #fff;
}

.pv-check.is-done i {
	background: var(--wp--preset--color--impact-red);
	border-color: var(--wp--preset--color--impact-red);
}

.pv-note {
	padding: 12px;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.06);
	border: 0.5px solid rgba(255, 255, 255, 0.05);
	border-radius: 4px;
}

.pv-badge {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	padding: 3px 8px;
	font-size: 10px;
	font-weight: 500;
	border-radius: 4px;
}

.pv-badge i {
	width: 5px;
	height: 5px;
	background: currentColor;
	border-radius: 50%;
}

.pv-badge.is-red {
	color: #ff4343;
	background: rgba(255, 67, 67, 0.1);
}

.pv-badge.is-yellow {
	color: #ffc747;
	background: rgba(255, 199, 71, 0.1);
}

.pv-badge.is-green {
	color: #4cd964;
	background: rgba(76, 217, 100, 0.1);
}

/* Étape 2 : design system. */
.pv-swatches {
	display: flex;
	gap: 8px;
}

.pv-swatch {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	font-size: 8px;
	color: rgba(255, 255, 255, 0.35);
}

.pv-swatch i {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.pv-type {
	display: flex;
	gap: 8px;
	align-items: center;
}

.pv-type small {
	width: 32px;
	font-size: 9px;
	text-align: right;
	color: rgba(255, 255, 255, 0.3);
}

.pv-type i {
	width: 1px;
	height: 16px;
	background: rgba(255, 255, 255, 0.1);
}

.pv-type b {
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}

.pv-spacing {
	display: flex;
	gap: 6px;
	align-items: flex-start;
}

.pv-spacing > span {
	display: flex;
	flex-direction: column;
	gap: 3px;
	align-items: center;
	font-size: 7px;
	color: rgba(255, 255, 255, 0.25);
}

.pv-spacing i {
	height: 8px;
	background: rgba(255, 67, 67, 0.3);
	border-radius: 2px;
}

.pv-comp {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 0.5px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
}

.pv-comp b {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

.pv-comp small {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.35);
}

.pv-skel {
	display: flex;
	gap: 4px;
}

.pv-skel i {
	width: 40px;
	height: 6px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 3px;
}

.pv-skel i + i {
	width: 24px;
}

.pv-comp.is-accent .pv-skel i:first-child {
	background: rgba(255, 67, 67, 0.4);
}

/* Étape 3 : sprint. */
.pv-kanban {
	display: flex;
	gap: 10px;
	height: 171px;
}

.pv-kcol {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pv-khead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
}

.pv-khead i {
	padding: 1px 5px;
	font-size: 9px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.08);
	border-radius: 8px;
}

.pv-task {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 7px 8px;
	background: rgba(255, 255, 255, 0.04);
	border: 0.5px solid rgba(255, 255, 255, 0.06);
	border-radius: 5px;
}

.pv-task b {
	font-size: 10px;
	font-weight: 500;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.85);
}

.pv-tag {
	padding: 1px 4px;
	font-size: 8px;
	border-radius: 2px;
}

.pv-tag.is-blue {
	color: rgba(88, 166, 255, 0.9);
	background: rgba(88, 166, 255, 0.12);
}

.pv-tag.is-red {
	color: rgba(255, 67, 67, 0.9);
	background: rgba(255, 67, 67, 0.12);
}

.pv-tag.is-purple {
	color: rgba(153, 102, 229, 0.9);
	background: rgba(153, 102, 229, 0.12);
}

.pv-tag.is-green {
	color: rgba(76, 217, 100, 0.9);
	background: rgba(76, 217, 100, 0.12);
}

.pv-tag.is-yellow {
	color: rgba(255, 199, 71, 0.9);
	background: rgba(255, 199, 71, 0.12);
}

.pv-terminal {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	font-size: 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 0.5px solid rgba(255, 255, 255, 0.04);
	border-radius: 6px;
}

.pv-term-head {
	display: flex;
	gap: 5px;
	align-items: center;
	margin-bottom: 8px;
	font-size: 9px;
	color: rgba(255, 255, 255, 0.3);
}

.pv-term-head i {
	width: 6px;
	height: 6px;
	background: #ff5f57;
	border-radius: 50%;
}

.pv-term-head i:nth-child(2) {
	background: #febc2e;
}

.pv-term-head i:nth-child(3) {
	margin-right: 6px;
	background: #28c840;
}

.pv-term-line {
	color: rgba(255, 255, 255, 0.5);
}

.pv-term-ok {
	color: rgba(76, 217, 100, 0.7);
}

/* Étape 4 : suivi. */
.pv-timeline {
	display: flex;
	flex-direction: column;
	padding-top: 8px;
}

.pv-mile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 0 18px 26px;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.55);
}

.pv-mile::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 0;
	left: 7.5px;
	width: 1px;
	background: rgba(255, 255, 255, 0.15);
}

.pv-mile:last-child::before {
	display: none;
}

.pv-dot {
	position: absolute;
	top: 2px;
	left: 4px;
	width: 8px;
	height: 8px;
	background: #4cd964;
	border-radius: 50%;
}

.pv-mile b {
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
}

.pv-mile > span::before {
	content: "✓ ";
	color: #4cd964;
}

.pv-mile.is-now b {
	color: #ff4343;
}

.pv-mile.is-now .pv-dot {
	background: #ff4343;
	box-shadow: 0 0 0 4px rgba(255, 67, 67, 0.2);
}

.pv-mile.is-now > span {
	color: rgba(255, 255, 255, 0.8);
}

.pv-mile.is-now > span::before,
.pv-mile.is-next > span::before {
	content: "• ";
	color: #ff4343;
}

.pv-mile.is-next,
.pv-mile.is-next b {
	color: rgba(255, 255, 255, 0.3);
}

.pv-mile.is-next .pv-dot {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.pv-mile.is-next > span::before {
	color: rgba(255, 255, 255, 0.3);
}

.pv-chart {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 12px 8px;
	background: rgba(255, 255, 255, 0.03);
	border: 0.5px solid rgba(255, 255, 255, 0.05);
	border-radius: 6px;
}

.pv-chart-head {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
}

.pv-chart-head b {
	font-size: 11px;
	font-weight: 600;
	color: rgba(76, 217, 100, 0.9);
}

.pv-big {
	font-size: 24px;
	font-weight: 600;
}

.pv-big small {
	font-size: 10px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.3);
}

.pv-bars {
	display: flex;
	gap: 3px;
	align-items: flex-end;
}

.pv-bars i {
	flex: 1;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 2px;
}

.pv-bars i.is-red {
	background: rgba(255, 67, 67, 0.6);
}

.pv-sla {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 7px 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 0.5px solid rgba(255, 255, 255, 0.05);
	border-radius: 4px;
}

.pv-sla > span {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 1px;
}

.pv-sla small {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
}

.pv-sla b {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}

.pv-sla > i {
	padding: 2px 6px;
	font-size: 9px;
	font-weight: 500;
	color: rgba(76, 217, 100, 0.9);
	background: rgba(76, 217, 100, 0.1);
	border-radius: 3px;
}

/* ---------- Apparition des éléments (steps.js) ---------- */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.stravos-steps.is-ready .st-el {
		opacity: 0;
		transform: translateY(10px) scale(0.96);
		transition: opacity 260ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.stravos-steps.is-ready .st-el.is-in {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stravos-step,
	.stravos-step .pv {
		transition: none !important;
	}
}

/* ---------- Mobile et tablette : étapes empilées ---------- */

@media (max-width: 1023.98px) {
	.stravos-process {
		gap: 48px;
	}

	.stravos-steps {
		flex-direction: column;
		gap: 12px;
	}

	/* Étapes ouvertes d'emblée (Moez) : fond blanc 10 %, contour de couleur, illustration
	   ramenée à la largeur de la carte (échelle --pv-scale posée par steps.js). */
	.stravos-step {
		flex: none;
		gap: 16px;
		background-color: rgba(255, 255, 255, 0.1);
		border-color: var(--stravos-step-accent);
		cursor: default;
	}

	.stravos-step__stage {
		position: relative;
		display: block;
		overflow: hidden;
		aspect-ratio: 640 / 480;
		margin-top: 8px;
		border-radius: var(--wp--custom--radius--medium);
	}

	.stravos-step .pv {
		position: absolute;
		top: 0;
		left: 0;
		width: 640px;
		height: 480px;
		transform: scale(var(--pv-scale, 0.48));
		transform-origin: 0 0;
	}
}

/* ==========================================================================
   Page Boost (Moez, 2026-11-01) : mêmes étapes, illustrations SVG propres à Boost
   (inc/process-boost.php). Conteneur `.pb` (527 × 272) à la place de `.pv` ; ses animations
   démarrent quand steps.js lui ajoute `is-in` (ouverture de l'étape, ou arrivée à l'écran en
   mobile). Sans animation, l'état affiché est l'état final.
   ========================================================================== */

.pb {
	box-sizing: border-box;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	border: 0.5px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--wp--custom--radius--medium);
}

.pb-svg {
	display: block;
	width: 527px;
	height: 272px;
	overflow: visible;
}

@media (min-width: 1024px) {
	.stravos-step .pb {
		position: absolute;
		top: 16px;
		left: 0;
		width: 527px;
		height: 272px;
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease, visibility 0s linear 200ms;
	}

	.stravos-step.is-active .pb,
	.stravos-steps:not([data-active]) .stravos-step:first-child .pb {
		opacity: 1;
		visibility: visible;
		transition: opacity 300ms ease 150ms;
	}
}

@media (max-width: 1023.98px) {
	.stravos-step.is-boost .stravos-step__stage {
		aspect-ratio: 527 / 272;
	}

	.stravos-step .pb {
		position: absolute;
		top: 0;
		left: 0;
		width: 527px;
		height: 272px;
		transform: scale(calc(var(--pv-scale, 0.6) * 640 / 527));
		transform-origin: 0 0;
	}
}

/* Le conteneur ne glisse pas à l'apparition : seules ses animations internes jouent. */
.stravos-steps.is-ready .pb.st-el {
	transform: none;
}

@media (max-width: 1023.98px) {
	.stravos-steps.is-ready .pb.st-el {
		transform: scale(calc(var(--pv-scale, 0.6) * 640 / 527));
	}
}

/* ---------- Éléments communs ---------- */

.pb-person__body {
	fill: rgba(255, 255, 255, 0.3);
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.pb-1 .is-chosen .pb-person__body { fill: url(#pb1-grad); }
.pb-2 .is-chosen .pb-person__body { fill: url(#pb2-grad); }
.pb-3 .is-chosen .pb-person__body { fill: url(#pb3-grad); }
.pb-4 .is-chosen .pb-person__body { fill: url(#pb4-grad); }

/* ---------- 1. Votre besoin : directives, les plus importantes entourées ---------- */

.pb-note {
	transform-box: fill-box;
	transform-origin: center;
}

.pb-note rect:first-child {
	fill: rgba(255, 255, 255, 0.04);
	stroke: rgba(255, 255, 255, 0.12);
}

.pb-note__dot {
	fill: rgba(255, 255, 255, 0.25);
}

.pb-note__line {
	fill: rgba(255, 255, 255, 0.35);
}

.pb-note__line.is-soft {
	fill: rgba(255, 255, 255, 0.16);
}

.pb-note.is-key .pb-note__line {
	fill: rgba(255, 255, 255, 0.9);
}

.pb-note.is-key .pb-note__line.is-soft {
	fill: rgba(255, 255, 255, 0.5);
}

.pb-note.is-key .pb-note__dot {
	fill: url(#pb1-grad);
}

.pb-scribble {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 100;
}

/* ---------- 2. La sélection : un profil se détache ---------- */

.pb-2 .is-crowd {
	opacity: 0.35;
}

.pb-2 .is-chosen .pb-person__body {
	transform: translateY(-6px) scale(1.5);
}

.pb-halo {
	fill: rgba(255, 67, 67, 0.08);
}

/* ---------- 3. Le démarrage : l'engrenage Stravos se greffe ---------- */

.pb-gear__rot path,
.pb-gear__rot circle {
	fill: rgba(255, 255, 255, 0.04);
	stroke: rgba(255, 255, 255, 0.28);
	stroke-width: 1.5;
}

.pb-gear__rot circle {
	fill: #151515;
}

.pb-gear.is-ours .pb-gear__rot path {
	fill: rgba(255, 67, 67, 0.1);
	stroke-width: 2;
}

.pb-gear.is-ours .pb-gear__rot circle {
	stroke-width: 1.5;
}

.pb-gear,
.pb-gear__rot {
	transform-box: fill-box;
	transform-origin: center;
}

/* ---------- 4. Votre projet accélère : barres et pyramide ---------- */

.pb-bar {
	fill: rgba(255, 255, 255, 0.07);
	stroke: rgba(255, 255, 255, 0.16);
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.pb-bar.is-boosted {
	fill: rgba(255, 110, 70, 0.16);
	stroke: rgba(255, 110, 70, 0.5);
}

/* ---------- Animations ---------- */

@media (prefers-reduced-motion: no-preference) {
	.pb.is-in .pb-fade {
		animation: pb-fade 400ms ease-out both;
	}

	/* 1 : directives qui apparaissent, puis deux ellipses se tracent autour des clés ; elles s'éclairent. */
	.pb.is-in .pb-note {
		animation: pb-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms) both;
	}

	.pb.is-in .pb-scribble {
		animation: pb-draw 650ms cubic-bezier(0.65, 0, 0.35, 1) 850ms both;
	}

	.pb.is-in .pb-scribble.is-second {
		animation-delay: 1450ms;
	}

	.pb.is-in .pb-note.is-key .pb-note__line,
	.pb.is-in .pb-note.is-key .pb-note__dot {
		animation: pb-key-1 300ms ease-out 1350ms both;
	}

	.pb.is-in .pb-note.is-key:last-of-type .pb-note__line,
	.pb.is-in .pb-note.is-key:last-of-type .pb-note__dot {
		animation-delay: 1950ms;
	}

	/* 2 : les profils apparaissent ; l'un se détache, grandit et prend nos couleurs. */
	.pb-2.is-in .is-crowd .pb-person__body {
		animation: pb-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms) both;
	}

	.pb-2.is-in .is-crowd {
		animation: pb-dim 500ms ease-out 1150ms both;
	}

	.pb-2.is-in .is-chosen .pb-person__body {
		animation:
			pb-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both,
			pb-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) 1150ms both,
			pb-color-2 1160ms linear both;
	}

	.pb-2.is-in .pb-halo {
		animation: pb-fade 600ms ease-out 1350ms both;
	}

	.pb-2.is-in .pb-badge {
		animation: pb-fade 300ms ease-out 1700ms both;
	}

	/* 3 : engrenages du client, l'engrenage Stravos arrive et s'emboîte, tout tourne. */
	.pb-3.is-in .pb-gear {
		animation: pb-pop 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.pb-3.is-in .pb-gear.is-b {
		animation-delay: 120ms;
	}

	.pb-3.is-in .pb-gear.is-c {
		animation-delay: 240ms;
	}

	.pb-3.is-in .pb-gear.is-ours {
		animation: pb-slide-in 850ms cubic-bezier(0.34, 1.3, 0.64, 1) 550ms both;
	}

	.pb-3.is-in .pb-gear__rot {
		animation: pb-spin 6s linear 1450ms infinite;
	}

	.pb-3.is-in .is-b .pb-gear__rot {
		animation-duration: 4.5s;
		animation-direction: reverse;
	}

	.pb-3.is-in .is-c .pb-gear__rot {
		animation-duration: 5s;
		animation-direction: reverse;
	}

	.pb-3.is-in .is-ours .pb-gear__rot {
		animation-duration: 5.5s;
	}

	/* 4 : les barres montent, l'équipe grandit, Stravos vient la renforcer. */
	.pb-4.is-in .pb-bar {
		animation: pb-grow 600ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms) both;
	}

	.pb-4.is-in .pb-person .pb-person__body {
		animation: pb-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms) both;
	}

	.pb-4.is-in .pb-person.is-top .pb-person__body {
		animation: pb-drop 650ms cubic-bezier(0.34, 1.4, 0.64, 1) 1700ms both;
	}
}

@keyframes pb-fade {
	from {
		opacity: 0;
	}
}

@keyframes pb-pop {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
}

@keyframes pb-draw {
	from {
		stroke-dashoffset: 100;
	}
}

@keyframes pb-key-1 {
	from {
		fill: rgba(255, 255, 255, 0.35);
	}
}

@keyframes pb-dim {
	from {
		opacity: 1;
	}
}

@keyframes pb-rise {
	from {
		transform: none;
	}
}

@keyframes pb-color-2 {
	0%,
	99% {
		fill: rgba(255, 255, 255, 0.3);
	}
}

@keyframes pb-slide-in {
	from {
		opacity: 0;
		transform: translateX(150px) rotate(-90deg);
	}
}

@keyframes pb-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes pb-grow {
	from {
		transform: scaleY(0);
	}
}

@keyframes pb-drop {
	from {
		opacity: 0;
		transform: translateY(-40px);
	}
}