/* Karviyo Social : composants des deux pages françaises de l'offre
   - /fr/ (index.html) : les garages qui doivent comprendre POURQUOI publier ;
   - /fr/videos/ (videos/index.html) : ceux qui le savent déjà et veulent la vidéo sans la corvée.
   Chargé après v3.css et offres.css. Reprend la maquette validée « Karviyo Social »
   avec les jetons de v3.css (couleurs, espacements, rayons, courbe de mouvement).

   Règle de la page : rien n'attend le défilement pour devenir visible. Pas
   d'apparition au défilement ici (ni observateur, ni animation-timeline) : tout
   est lisible au chargement. Les seuls mouvements sont doux et en boucle
   (téléphones qui flottent, icônes, page voiture qui défile, points sur les
   liens de la vitrine) et s'arrêtent en mouvement réduit. */

/* alias courts sur les jetons de v3.css */
:root {
	--surface: var(--bg-1);
	--surface-2: var(--bg-2);
	--line: var(--bg-4);
	--muted: var(--text-muted);
	--on-gold: var(--gold-ink);
}

/* ---------- Petits éléments communs ---------- */
.kicker--dot,
.eyebrow--dot {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--sp-75);
}
.kicker--dot::before,
.eyebrow--dot::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: var(--r-full);
	margin-top: var(--sp-50); /* à hauteur de la première ligne */
	background: var(--gold);
	flex: none;
}
/* une phrase par ligne ; chaque phrase garde l'équilibre de ses propres lignes */
.ln {
	display: block;
}
.is-center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.reassure {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-75) var(--sp-200);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.reassure li {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-50);
}
.reassure svg {
	width: 16px;
	height: 16px;
	color: var(--gold);
	flex: none;
}
.tick-list {
	display: grid;
	gap: var(--sp-75);
	margin: var(--sp-300) 0 0;
	padding: 0;
	list-style: none;
}
.tick-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-75);
}
.tick-list svg {
	width: 20px;
	height: 20px;
	margin-top: var(--sp-25);
	color: var(--gold);
	flex: none;
}
.tick-list b {
	font-weight: 600;
}

/* ---------- Héros : texte à gauche, téléphone à droite ---------- */
/* colonne du téléphone un peu plus étroite que celle de v3.css : le titre garde ses lignes */
@media (min-width: 1024px) {
	.hero--social .hero-grid {
		grid-template-columns: minmax(0, 1fr) 400px;
	}
}
.hero-phone {
	position: relative;
	display: flex;
	justify-content: center;
	padding-bottom: var(--sp-300);
}
.hero-phone .phone3d {
	--s: 0.62;
}
@media (min-width: 640px) {
	.hero-phone .phone3d {
		--s: 0.74;
	}
}
.hero-points {
	margin-top: var(--sp-300);
}

/* l'encart « Publié sur Facebook et Instagram » posé sur le téléphone */
.toast-wrap {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 30;
}
@media (min-width: 1024px) {
	.toast-wrap {
		left: auto;
		right: calc(-1 * var(--sp-75));
		bottom: 16%;
		transform: none;
	}
}
.toast {
	display: flex;
	align-items: center;
	gap: var(--sp-100);
	width: max-content;
	max-width: calc(100vw - 32px);
	padding: var(--sp-100) var(--sp-200);
	border: 1px solid var(--line);
	border-radius: var(--r-2xl);
	background: rgba(24, 24, 24, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
}
.toast .check {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--r-full);
	background: var(--gold);
	color: var(--on-gold);
	flex: none;
}
.toast .check svg {
	width: 16px;
	height: 16px;
}
.toast small {
	display: block;
	color: var(--muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 500;
}

/* ---------- Bande sous le héros ---------- */
.strip {
	padding: var(--sp-300) 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.strip-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-100) var(--sp-400);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	text-align: center;
}
.strip-row b {
	color: var(--text);
	font-weight: 600;
}

/* ---------- Le problème : trois cartes ---------- */
.problem {
	background: var(--surface);
}
.pains {
	display: grid;
	gap: var(--sp-200);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 860px) {
	.pains {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.pain {
	display: flex;
	flex-direction: column;
	gap: var(--sp-75);
	padding: var(--sp-300);
	border: 1px solid var(--line);
	border-radius: var(--r-2xl);
	background: var(--bg);
}
.pain h3 {
	font-size: var(--fs-xl);
	line-height: var(--lh-xl);
}
.pain p {
	color: var(--muted);
}

/* ---------- Ce que ça change : trois résultats, icônes animées ---------- */
.results {
	display: grid;
	gap: var(--sp-200);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 860px) {
	.results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.result {
	display: flex;
	flex-direction: column;
	gap: var(--sp-200);
	padding: var(--sp-400);
	border-radius: var(--r-3xl);
	background: var(--surface);
	transition:
		transform 700ms var(--ease),
		background-color 700ms var(--ease);
}
.result:hover {
	transform: translateY(-4px);
	background: var(--surface-2);
}
.result-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--r-xl);
	background: var(--surface-2);
	color: var(--gold);
	transition: background-color 700ms var(--ease);
}
.result:hover .result-icon {
	background: var(--line);
}
.result-icon svg {
	width: 28px;
	height: 28px;
}
.result h3 {
	font-size: var(--fs-xl);
	line-height: var(--lh-xl);
}
.result p {
	color: var(--muted);
}
.ico-ring {
	position: absolute;
	inset: 0;
	border: 1px solid var(--gold);
	border-radius: var(--r-xl);
	opacity: 0;
}
.ico-check {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.ico-ring {
		animation: ico-ring 3.2s var(--ease) infinite;
	}
	.result:nth-child(2) .ico-ring {
		animation-delay: 1s;
	}
	.result:nth-child(3) .ico-ring {
		animation-delay: 2s;
	}
	.ico-heart {
		transform-box: fill-box;
		transform-origin: center;
		animation: ico-heart 2.6s var(--ease) infinite;
	}
	.ico-check {
		animation: ico-draw 3s var(--ease) infinite;
	}
	.ico-hand {
		transform-origin: 16px 16px;
		animation: ico-spin 4s linear infinite;
	}
}
@keyframes ico-ring {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}
	70%,
	100% {
		transform: scale(1.45);
		opacity: 0;
	}
}
@keyframes ico-heart {
	0% {
		transform: translateY(4px) scale(0.4);
		opacity: 0;
	}
	25% {
		transform: translateY(0) scale(1.1);
		opacity: 1;
	}
	40% {
		transform: scale(1);
	}
	75% {
		transform: translateY(-2px) scale(1);
		opacity: 1;
	}
	100% {
		transform: translateY(-5px) scale(0.9);
		opacity: 0;
	}
}
@keyframes ico-draw {
	0%,
	10% {
		stroke-dashoffset: 1;
	}
	45%,
	85% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 1;
	}
}
@keyframes ico-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Comment ça marche : étapes ---------- */
.steps {
	display: grid;
	gap: var(--sp-200);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 720px) {
	.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1040px) {
	.steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.steps--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 720px) and (max-width: 1039px) {
	.steps--3 > li:last-child {
		grid-column: 1 / -1;
	}
}
.step {
	display: flex;
	flex-direction: column;
	gap: var(--sp-100);
	padding: var(--sp-300);
	border: 1px solid var(--line);
	border-radius: var(--r-3xl);
}
.step-num {
	color: var(--gold);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.step h3 {
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
}
.step p {
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.step-tag {
	align-self: flex-start;
	margin-top: auto;
	padding: var(--sp-50) var(--sp-75);
	border-radius: var(--r-full);
	background: var(--surface-2);
	color: var(--muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 600;
}
.step-tag.you {
	background: var(--gold);
	color: var(--on-gold);
}

/* ---------- Vitrine : un lien, partagé partout ---------- */
.wall {
	background: var(--bg-warm);
}
.wall-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.wall-top .section-head {
	margin-bottom: var(--sp-300);
}
.url-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-75);
	max-width: 100%;
	padding: var(--sp-75) var(--sp-200);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	background: var(--surface-2);
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	overflow-wrap: anywhere;
}
.url-chip svg {
	width: 16px;
	height: 16px;
	flex: none;
}
.url-chip b {
	color: var(--text);
	font-weight: 600;
}
.wall-stages {
	margin-top: var(--sp-600);
}
.share-stage {
	position: relative;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 560 / 640;
	margin: 0 auto;
}
.stage-desktop {
	display: none;
}
@media (min-width: 1000px) {
	.stage-mobile {
		display: none;
	}
	.stage-desktop {
		display: block;
		max-width: 1120px;
		aspect-ratio: 1000 / 620;
		margin-bottom: var(--sp-700);
	}
}
.share-curves {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
.share-curves path {
	fill: none;
	stroke: rgba(255, 210, 74, 0.45);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 2 7;
}
.share-curves circle {
	fill: var(--gold);
}
.phone-slot {
	position: absolute;
}
.phone-slot .phone3d {
	margin: 0;
}
.stage-mobile .phone-slot {
	left: 25%;
	top: 4%;
	width: 50%;
}
.stage-desktop .phone-slot {
	left: 70%;
	top: 15%;
	width: 17%;
}
.nets {
	margin: 0;
	padding: 0;
	list-style: none;
}
.net {
	position: absolute;
	z-index: 2; /* au-dessus du téléphone voisin */
	left: var(--x);
	top: var(--y);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-75);
	width: 120px;
	text-align: center;
	transform: translate(-50%, -50%);
}
.net-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--r-full);
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.8);
}
.net-icon svg {
	width: 28px;
	height: 28px;
}
.net-icon.ig {
	border-radius: var(--r-2xl);
	background: radial-gradient(
		circle at 30% 107%,
		#fdf497 0%,
		#fdf497 5%,
		#fd5949 45%,
		#d6249f 60%,
		#285aeb 90%
	);
}
.net-icon.fb,
.net-icon.gg {
	background: #ffffff;
}
.net-icon.fb svg {
	width: 56px;
	height: 56px;
}
.net-icon.wa {
	background: var(--wa);
}
.net-icon.ml {
	border: 1px solid var(--line);
	background: #2b2b2b;
	color: #ffffff;
}
.net-label {
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
}
@media (max-width: 560px) {
	.net {
		width: 88px;
		gap: var(--sp-50);
	}
	.net-icon {
		width: 40px;
		height: 40px;
	}
	.net-icon.ig {
		border-radius: var(--r-xl);
	}
	.net-icon svg {
		width: 22px;
		height: 22px;
	}
	.net-icon.fb svg {
		width: 40px;
		height: 40px;
	}
	.net-label {
		font-size: var(--fs-xs);
		line-height: var(--lh-xs);
	}
}
.wall-args {
	display: grid;
	gap: var(--sp-100);
	margin: var(--sp-600) 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.wall-args {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1000px) {
	.wall-args {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-top: 0;
	}
}
.arg {
	display: flex;
	flex-direction: column;
	gap: var(--sp-50);
	padding: var(--sp-200);
	border-radius: var(--r-2xl);
	background: var(--surface);
}
.arg h3 {
	color: var(--gold);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}
.arg p {
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}

/* le navigateur qui montre la vitrine sur ordinateur */
.browser {
	--vw-surface: #11161d;
	--vw-raised: #19212b;
	--vw-inset: #0c1117;
	--vw-line: #28323e;
	--vw-line-strong: #3a4757;
	--vw-muted: #9ba7b4;
	--vw-dim: #6b7787;
	position: absolute;
	left: 0;
	top: 4%;
	width: 76%;
	height: 84%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #4a5666;
	border-radius: var(--r-xl);
	background: var(--vw-inset);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
	transform: perspective(2400px) rotateY(4deg) rotateX(2deg);
}
.vw-tabs {
	display: flex;
	align-items: flex-end;
	gap: var(--sp-100);
	height: 36px;
	padding: var(--sp-75) var(--sp-100) 0;
	background: #0a0e13;
	flex: none;
}
.vw-dots {
	display: flex;
	align-self: center;
	gap: var(--sp-75);
}
.vw-dots i {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: var(--r-full);
}
.vw-dots i:nth-child(1) {
	background: #ff5f57;
}
.vw-dots i:nth-child(2) {
	background: #febc2e;
}
.vw-dots i:nth-child(3) {
	background: #28c840;
}
.vw-tab {
	display: flex;
	align-items: center;
	gap: var(--sp-75);
	height: 28px;
	max-width: 260px;
	padding: 0 var(--sp-100);
	overflow: hidden;
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	background: var(--vw-surface);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	white-space: nowrap;
}
.vw-tab i {
	width: 12px;
	height: 12px;
	border-radius: var(--r);
	background: var(--gold);
	flex: none;
}
.vw-chrome {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 var(--sp-200);
	border-bottom: 1px solid var(--vw-line);
	background: var(--vw-surface);
	flex: none;
}
.vw-url {
	display: flex;
	align-items: center;
	gap: var(--sp-75);
	flex: 1;
	max-width: 520px;
	height: 30px;
	padding: 0 var(--sp-100);
	overflow: hidden;
	border: 1px solid var(--vw-line);
	border-radius: var(--r-lg);
	background: var(--vw-inset);
	color: var(--vw-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	white-space: nowrap;
}
.vw-url b {
	color: var(--text);
	font-weight: 500;
}
.vw-url svg {
	width: 12px;
	height: 12px;
	flex: none;
}
.vw-body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-100);
	min-height: 0;
	padding: var(--sp-200) var(--sp-300);
	overflow: hidden;
}
.vw-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-200);
}
.vw-head {
	display: flex;
	align-items: center;
	gap: var(--sp-100);
}
.vw-avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 2px solid var(--gold);
	border-radius: var(--r-full);
	background: var(--vw-raised);
	color: var(--gold);
	font-size: var(--fs-xl);
	font-weight: 700;
}
.vw-name {
	font-size: var(--fs-xl);
	line-height: var(--lh-xl);
	font-weight: 700;
}
.vw-sub {
	color: var(--vw-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.vw-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-75);
	padding: var(--sp-75) var(--sp-200);
	border-radius: var(--r-full);
	background: var(--gold);
	color: var(--on-gold);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
}
.vw-btn svg {
	width: 18px;
	height: 18px;
}
.vw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-75);
}
.vw-chip {
	padding: var(--sp-50) var(--sp-200);
	border: 1px solid var(--vw-line);
	border-radius: var(--r-full);
	background: transparent;
	color: var(--vw-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
	cursor: pointer;
	transition:
		border-color 400ms var(--ease),
		color 400ms var(--ease),
		background-color 400ms var(--ease);
}
.vw-chip:hover {
	border-color: var(--vw-line-strong);
	color: var(--text);
}
.vw-chip:active {
	transform: scale(0.98);
}
.vw-chip[aria-pressed='true'] {
	border-color: var(--gold);
	background: var(--vw-raised);
	color: var(--text);
}
/* les vignettes : une photo d'annonce au format 4:3 (celui des photos), la vidéo du X2 recadrée */
.vw-tiles {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sp-75);
	margin: 0;
	padding: 0;
	list-style: none;
}
.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--vw-line);
	border-radius: var(--r-lg);
	background: #151c25;
}
.tile[hidden] {
	display: none;
}
.tile-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #0f141b;
}
.tile-media img,
.tile-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tile-media video {
	object-position: center 55%;
}
.tile-progress {
	position: absolute;
	left: var(--sp-75);
	right: var(--sp-75);
	bottom: var(--sp-75);
	z-index: 1;
	height: 3px;
	overflow: hidden;
	border-radius: var(--r-full);
	background: rgba(255, 255, 255, 0.18);
}
.tile-progress span {
	display: block;
	height: 100%;
	background: var(--gold);
}
.tile-play {
	/* au centre de l'image : une photo fixe ne dit pas « vidéo » toute seule */
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--r-full);
	background: rgba(8, 11, 16, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	transition: transform 700ms var(--ease);
}
.tile-play svg {
	width: 16px;
	height: 16px;
}
.tile:hover .tile-play {
	transform: scale(1.08);
}
/* la vignette qui joue déjà n'a pas besoin du bouton ; sur une vendue, « Vendue » prend le centre */
.tile-media:has(video) .tile-play,
.tile.sold .tile-play {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.tile-play {
		transition: none;
	}
	.tile:hover .tile-play {
		transform: none;
	}
}
.tile-time {
	position: absolute;
	right: var(--sp-75);
	top: var(--sp-75);
	padding: var(--sp-25) var(--sp-50);
	border-radius: var(--r);
	background: rgba(8, 11, 16, 0.8);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.tile-info {
	display: flex;
	flex-direction: column;
	padding: var(--sp-75);
	border-top: 1px solid var(--vw-line);
	background: var(--vw-inset);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
}
.tile-info b,
.tile-info span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.tile-info span {
	color: var(--vw-muted);
}
.tile-info em {
	color: var(--gold);
	font-style: normal;
	font-weight: 700;
}
/* navigateur plus petit (1000 à 1199 px) : l'année et le kilométrage s'effacent pour garder les deux rangées entières */
@media (max-width: 1199px) {
	.tile-info span {
		display: none;
	}
}
.tile.sold .tile-media img {
	filter: grayscale(1) brightness(0.5);
}
.tile.sold .tile-play,
.tile.sold .tile-time {
	opacity: 0.5;
}
.tile.sold .tile-info b {
	color: var(--vw-muted);
}
.tile.sold .tile-info em {
	color: var(--vw-dim);
	text-decoration: line-through;
}
.sold-mark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sold-mark strong {
	padding: var(--sp-50) var(--sp-200);
	border: 1px solid rgba(245, 247, 250, 0.7);
	border-radius: var(--r-full);
	background: rgba(8, 11, 16, 0.55);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.tile.prep .tile-media {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-75);
	background: #121922;
}
.prep-ring {
	width: 28px;
	height: 28px;
	border: 2px solid rgba(255, 210, 74, 0.25);
	border-top-color: var(--gold);
	border-radius: var(--r-full);
}
.prep-label {
	padding: 0 var(--sp-75);
	color: var(--vw-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
	.prep-ring {
		animation: ico-spin 1.1s linear infinite;
	}
}

/* ---------- La page de chaque voiture, dans un téléphone, qui défile toute seule ---------- */
.car-grid {
	display: grid;
	gap: var(--sp-600);
	align-items: center;
}
@media (min-width: 1000px) {
	.car-grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--sp-700);
	}
}
.car-points {
	display: grid;
	gap: var(--sp-100);
	margin: 0;
	padding: 0;
	list-style: none;
}
.car-points li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-100);
	padding: var(--sp-200);
	border-radius: var(--r-2xl);
	background: var(--surface);
}
.car-points svg {
	width: 16px;
	height: 16px;
	margin-top: var(--sp-50);
	color: var(--gold);
	flex: none;
}
.car-points b {
	font-weight: 600;
}
.car-points span {
	display: block;
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.car-stage {
	display: flex;
	justify-content: center;
}
.car-phone {
	--s: 0.62;
}
@media (min-width: 1000px) {
	.car-phone {
		--s: 0.74;
	}
}
/* tout ce qui suit est dessiné à l'échelle 1, dans l'écran de 393 × 842 points */
.phone-url {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 100px;
	padding: 60px 24px 0;
	background: #000;
	color: var(--muted);
	font-size: 14px;
	line-height: 20px;
}
.phone-url::before {
	content: '';
	position: absolute;
	left: 24px;
	right: 24px;
	top: 52px;
	z-index: -1;
	height: 36px;
	border-radius: 12px;
	background: #1c1c1e;
}
.car-viewport {
	position: absolute;
	left: 0;
	right: 0;
	top: 100px;
	bottom: 0;
	overflow: hidden;
	background: #000;
}
.car-viewport::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 48px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
	pointer-events: none;
}
/* Le défilement de la page voiture est joué par v3/carscroll.js (coups de pouce, arrêts sur chaque bloc,
   pause au survol) : il écrit `transform` sur .cp-scroll d'après les vraies positions des blocs. */
.car-page {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
}
.car-video {
	width: 100%;
	height: 470px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--surface);
}
.car-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.car-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.car-garage {
	color: var(--muted);
	font-size: 12px;
	line-height: 16px;
}
.car-name {
	font-size: 30px;
	line-height: 36px;
	font-weight: 700;
}
.car-price {
	color: var(--gold);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.car-chips {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
.car-chips span,
.cp-tags span {
	padding: 4px 12px;
	border: 1px solid var(--line);
	border-radius: 9999px;
	background: var(--surface-2);
	font-size: 14px;
	line-height: 20px;
}
.car-btn {
	display: block;
	padding: 12px;
	border-radius: 9999px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
}
.car-btn.gold {
	background: var(--gold);
	color: var(--on-gold);
}
.car-btn.green {
	background: var(--wa);
	color: var(--wa-ink);
}
.car-btn.ghost {
	border: 1px solid var(--line);
	color: var(--text);
}
.car-more {
	margin-top: 8px;
	color: var(--muted);
	font-size: 12px;
	line-height: 16px;
	text-decoration: underline;
}
.cp-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 16px 24px;
}
.cp-block h4 {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
}
.cp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.cp-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}
.cp-specs div {
	padding: 8px 12px;
	border-radius: 12px;
	background: var(--surface);
}
.cp-specs dt {
	color: var(--muted);
	font-size: 12px;
	line-height: 16px;
}
.cp-specs dd {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}
.cp-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cp-field {
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	color: var(--muted);
	font-size: 12px;
	line-height: 16px;
}
.cp-field.tall {
	min-height: 64px;
	color: var(--text);
}
.cp-others {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.cp-others div {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	background: var(--surface);
	font-size: 12px;
	line-height: 16px;
}
.cp-others img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.cp-others b {
	padding: 8px 8px 0;
	font-weight: 700;
}
.cp-others em {
	padding: 0 8px 8px;
	color: var(--gold);
	font-style: normal;
	font-weight: 700;
}
.cp-foot {
	padding: 0 24px 48px;
	color: var(--muted);
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}

/* ---------- Tarifs : gratuit pendant le lancement, puis trois formules ---------- */
.launch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-100) var(--sp-300);
	padding: var(--sp-300);
	border: 1px solid var(--gold);
	border-radius: var(--r-3xl);
	background: var(--surface);
}
.launch strong {
	color: var(--gold);
	font-size: var(--fs-xl);
	line-height: var(--lh-xl);
}
.launch p {
	color: var(--muted);
}
.tiers {
	display: grid;
	gap: var(--sp-200);
	margin: var(--sp-300) 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 860px) {
	.tiers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.tier {
	display: flex;
	flex-direction: column;
	gap: var(--sp-200);
	padding: var(--sp-400);
	border: 1px solid transparent;
	border-radius: var(--r-3xl);
	background: var(--surface);
}
.tier.pick {
	border-color: var(--line);
	background: var(--surface-2);
}
.tier-name {
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
}
.tier-size {
	font-size: var(--fs-2xl);
	line-height: var(--lh-2xl);
	font-weight: 700;
}
.tier-price {
	font-size: var(--fs-4xl);
	line-height: var(--lh-4xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.tier-price small {
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 500;
}
.tier ul {
	display: grid;
	gap: var(--sp-75);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.tier li {
	display: flex;
	gap: var(--sp-75);
}
.tier li svg {
	width: 16px;
	height: 16px;
	margin-top: var(--sp-25);
	color: var(--gold);
	flex: none;
}
.badge {
	align-self: flex-start;
	padding: var(--sp-50) var(--sp-75);
	border-radius: var(--r-full);
	background: var(--gold);
	color: var(--on-gold);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 600;
}

/* ---------- Appel final ---------- */
.final {
	padding: var(--sp-900) 0;
	text-align: center;
}
.final h2 {
	max-width: 680px;
	margin: 0 auto;
	font-size: var(--fs-4xl);
	line-height: var(--lh-4xl);
	letter-spacing: -0.02em;
}
.final p.final-lead {
	max-width: 560px;
	margin: var(--sp-300) auto 0;
	color: var(--muted);
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
}
.final .hero-cta {
	align-items: center;
	justify-content: center;
}
.final .reassure {
	justify-content: center;
	margin-top: var(--sp-200);
}
@media (min-width: 768px) {
	.final h2 {
		font-size: var(--fs-5xl);
		line-height: 1;
	}
}

/* ---------- Page « vidéos » : avant / après ---------- */
.ba-grid {
	display: grid;
	gap: var(--sp-600);
	align-items: center;
}
@media (min-width: 1000px) {
	.ba-grid {
		grid-template-columns: minmax(0, 1fr) 440px;
		gap: var(--sp-700);
	}
}
.ba-grid .section-head {
	margin-bottom: 0;
}

/* ---------- Page « vidéos » : avant / avec Karviyo ---------- */
.compare {
	display: grid;
	gap: var(--sp-200);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 860px) {
	.compare {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.side {
	display: flex;
	flex-direction: column;
	gap: var(--sp-200);
	padding: var(--sp-400);
	border: 1px solid var(--line);
	border-radius: var(--r-3xl);
	background: var(--bg);
}
.side--with {
	border-color: var(--gold);
	background: var(--surface);
}
.side h3 {
	font-size: var(--fs-xl);
	line-height: var(--lh-xl);
}
.side--with h3 {
	color: var(--gold);
}
.side ul {
	display: grid;
	gap: var(--sp-100);
	margin: 0;
	padding: 0;
	list-style: none;
}
.side li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-100);
}
.side li svg {
	width: 20px;
	height: 20px;
	margin-top: var(--sp-25);
	flex: none;
}
.side--before li svg {
	color: var(--text-dim);
}
.side--with li svg {
	color: var(--gold);
}
.side-total {
	margin-top: auto;
	padding-top: var(--sp-200);
	border-top: 1px solid var(--line);
	color: var(--muted);
}
.side-total b {
	color: var(--text);
	font-weight: 600;
}

/* ---------- Page « vidéos » : arguments de production ---------- */
.feats {
	display: grid;
	gap: var(--sp-200);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.feats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1040px) {
	.feats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.feat {
	display: flex;
	flex-direction: column;
	gap: var(--sp-200);
	padding: var(--sp-300);
	border-radius: var(--r-3xl);
	background: var(--surface);
}
.problem .feat {
	border: 1px solid var(--line);
	background: var(--bg);
}
.feat .result-icon svg {
	width: 24px;
	height: 24px;
}
.feat h3 {
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
}
.feat p {
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}

/* ---------- Page « vidéos » : le contrôle reste au garage ---------- */
.control {
	background: var(--surface);
}
.control-grid {
	display: grid;
	gap: var(--sp-500);
	align-items: start;
}
@media (min-width: 900px) {
	.control-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sp-800);
	}
}
.control-grid .section-head {
	margin-bottom: 0;
}

/* ---------- Page « vidéos » : vitrine et page voiture, en plus court ---------- */
.duo {
	display: grid;
	gap: var(--sp-700);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) {
	.duo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-600);
	}
}
.duo-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-400);
	text-align: center;
}
.duo-item .section-head {
	margin-bottom: 0;
}
.duo-item .section-title {
	font-size: var(--fs-2xl);
	line-height: var(--lh-2xl);
}
.duo .phone3d {
	--s: 0.56;
}
@media (min-width: 1024px) {
	.duo .phone3d {
		--s: 0.62;
	}
}

/* ---------- Mouvement réduit : rien ne bouge, la page voiture se fait défiler à la main ---------- */
@media (prefers-reduced-motion: reduce) {
	.car-viewport {
		overflow-y: auto;
	}
	.result:hover {
		transform: none;
	}
	.share-curves circle {
		display: none;
	}
}

.final-fine {
	margin-top: var(--sp-200);
}

/* ---------- Comment ça marche : six vrais écrans, un téléphone par étape ----------
   Mobile : une rangée qui se fait défiler, chaque étape s'accroche (scroll-snap) et
   la suivante dépasse un peu pour dire qu'il y en a d'autres. Dès 900 px : deux rangs
   de trois, tout visible sans rien faire défiler. */
.shots-hint {
	margin: calc(var(--sp-100) * -1) 0 var(--sp-200);
	color: var(--text-dim);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.shots {
	display: flex;
	gap: var(--sp-200);
	margin: 0 calc(var(--sp-200) * -1);
	padding: 0 var(--sp-200) var(--sp-200);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--sp-200);
	scrollbar-width: thin;
	scrollbar-color: var(--bg-4) transparent;
}
.shots:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}
.shot {
	--s: 0.6;
	flex: 0 0 min(82vw, 320px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-100);
	padding: var(--sp-300);
	border: 1px solid var(--line);
	border-radius: var(--r-3xl);
	background: var(--surface);
	scroll-snap-align: start;
}
.shot .phone3d {
	align-self: center;
}
/* le numéro : la séquence se lit d'un coup d'œil, sur mobile comme sur grand écran */
.shot-num {
	position: relative; /* ancre le texte masqué « Étape » : sinon il sort de la rangée et élargit la page */
	display: grid;
	place-items: center;
	width: var(--sp-400);
	height: var(--sp-400);
	border-radius: var(--r-full);
	background: var(--gold);
	color: var(--on-gold);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.shot h3 {
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
	text-wrap: balance;
}
.shot p {
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	text-wrap: pretty;
}
.shot .step-tag {
	margin-top: auto;
}
/* un téléphone de face : six téléphones penchés ne se liraient pas */
.phone3d--flat {
	--ry: 0deg;
	--rx: 0deg;
	--rz: 0deg;
	--dir: 0;
}
@media (min-width: 640px) {
	.shots {
		margin: 0 calc(var(--sp-400) * -1);
		padding: 0 var(--sp-400) var(--sp-200);
		scroll-padding: 0 var(--sp-400);
	}
	.shot {
		flex-basis: 320px;
	}
}
@media (min-width: 900px) {
	.shots-hint {
		display: none;
	}
	.shots {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-300);
		margin: 0;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
	}
	.shot {
		--s: 0.52;
		flex-basis: auto;
		padding: var(--sp-200) var(--sp-300) var(--sp-300);
	}
}
@media (prefers-reduced-motion: reduce) {
	.shots {
		scroll-behavior: auto;
	}
}

/* ---------- Comment ça marche : la démonstration animée (v3/flow.js) ----------
   Un grand téléphone qui joue le parcours en boucle, la liste des six étapes à côté
   (en dessous sur mobile). Les écrans sont de vraies captures ; seuls la frappe, le
   toucher et les compteurs sont dessinés ici, en cqw : 1cqw = 1 % de la largeur de
   l'écran, donc tout suit la taille du téléphone. */
.demo-grid {
	display: grid;
	gap: var(--sp-400);
	align-items: center;
}
.demo-stage {
	display: grid;
	justify-items: center;
	gap: var(--sp-200);
}
.demo-phone {
	--s: 0.72;
}
.demo-screen {
	position: absolute;
	inset: 0;
	container-type: inline-size;
	background: #000;
}
.demo-scene {
	position: absolute;
	inset: 0;
}
.demo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	user-select: none;
	-webkit-user-drag: none;
}
/* le champ de recherche : liseré doré dès qu'on y tape, texte et curseur par dessus la capture vide */
.demo-focus {
	position: absolute;
	box-sizing: border-box;
	border: 0.4cqw solid var(--gold);
	border-radius: 3.6cqw;
	box-shadow: 0 0 0 0.8cqw rgba(255, 210, 74, 0.22);
	opacity: 0;
}
.demo-typed {
	position: absolute;
	display: flex;
	align-items: center;
	color: #fff;
	font: 400 4.1cqw/1 var(--font);
	white-space: pre;
}
.demo-typed i {
	display: block;
	width: 0.4cqw;
	height: 4.8cqw;
	margin-left: 0.3cqw;
	background: #fff;
}
/* le toucher : un rond qui s'enfonce */
.demo-touch {
	position: absolute;
	width: 11.5cqw;
	height: 11.5cqw;
	border: 0.5cqw solid rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
	box-shadow: 0 0.6cqw 2.4cqw rgba(0, 0, 0, 0.35);
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.5);
	pointer-events: none;
}
/* les compteurs : posés sur la ligne de la capture, aligné à droite comme dans l'application */
.demo-num {
	position: absolute;
	right: 7.95%;
	display: flex;
	align-items: center;
	color: #fff;
	font:
		700 5.13cqw/1 'Space Grotesk',
		var(--font);
	font-variant-numeric: tabular-nums;
}
.demo-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-75);
	min-height: 44px;
	padding: var(--sp-75) var(--sp-200);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	background: var(--surface);
	color: var(--text);
	font: 600 var(--fs-sm) / var(--lh-sm) var(--font);
	cursor: pointer;
	transition:
		background-color 0.3s var(--ease),
		border-color 0.3s var(--ease);
}
.demo-toggle:hover {
	background: var(--bg-3);
	border-color: var(--bg-4);
}
.demo-toggle:focus-visible,
.demo-step:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}
.demo-toggle svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.demo-toggle[data-state='playing'] .demo-ico-play,
.demo-toggle[data-state='paused'] .demo-ico-pause {
	display: none;
}
/* la liste des étapes : sur mobile, six pastilles numérotées et la légende de l'étape en cours */
.demo-steps {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--sp-75);
	margin: 0;
	padding: 0;
	list-style: none;
}
.demo-step {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-2xl);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	transition:
		background-color 0.4s var(--ease),
		border-color 0.4s var(--ease);
}
.demo-step-num {
	display: grid;
	place-items: center;
	width: var(--sp-400);
	height: var(--sp-400);
	border-radius: var(--r-full);
	background: var(--bg-3);
	color: var(--text-muted);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition:
		background-color 0.4s var(--ease),
		color 0.4s var(--ease);
}
.demo-step[aria-current='step'] {
	border-color: var(--gold);
	background: var(--bg-3);
}
.demo-step[aria-current='step'] .demo-step-num {
	background: var(--gold);
	color: var(--on-gold);
}
.demo-step-body {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.demo-step-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--sp-25);
	background: var(--bg-4);
	opacity: 0;
}
.demo-step[aria-current='step'] .demo-step-bar {
	opacity: 1;
}
.demo-step-bar i {
	display: block;
	height: 100%;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
}
.demo-caption {
	display: grid;
	gap: var(--sp-50);
	margin: var(--sp-200) 0 0;
	min-height: var(--sp-400);
	text-align: center;
}
.demo-caption strong {
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
	font-weight: 700;
}
.demo-caption span {
	display: none; /* sur mobile, la bulle sous le téléphone dit déjà ce qui se passe */
}
@media (min-width: 640px) {
	.demo-phone {
		--s: 0.8;
	}
}
@media (min-width: 900px) {
	.demo-grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--sp-700);
	}
	.demo-phone {
		--s: 0.88;
	}
	.demo-steps {
		grid-template-columns: 1fr;
		gap: var(--sp-100);
	}
	.demo-step {
		display: grid;
		grid-template-columns: var(--sp-400) minmax(0, 1fr);
		align-items: start;
		justify-items: stretch;
		gap: var(--sp-200);
		padding: var(--sp-200) var(--sp-300);
		border-radius: var(--r-3xl);
	}
	.demo-step:hover {
		border-color: var(--bg-4);
	}
	.demo-step[aria-current='step']:hover {
		border-color: var(--gold);
	}
	.demo-step-body {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		display: grid;
		justify-items: start;
		gap: var(--sp-50);
	}
	.demo-step-title {
		font-size: var(--fs-lg);
		line-height: var(--lh-lg);
		font-weight: 700;
	}
	.demo-step-text {
		color: var(--muted);
		font-size: var(--fs-sm);
		line-height: var(--lh-sm);
		text-wrap: pretty;
	}
	.demo-step .step-tag {
		margin-top: var(--sp-75);
	}
	.demo-caption {
		display: none;
	}
}
/* à la souris, le téléphone flotte doucement ; jamais en mouvement réduit, jamais au toucher */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.demo-phone .phone3d-float {
		animation: phone3d-float 7s var(--ease) infinite alternate;
	}
}
/* la bulle : une phrase courte par écran, synchronisée avec lui (v3/flow.js) */
.demo-bubble {
	display: grid;
	place-items: center;
	width: min(100%, 360px);
	min-height: 76px; /* deux lignes réservées : rien ne saute quand le texte change */
	margin: 0;
}
.demo-bubble span {
	padding: var(--sp-100) var(--sp-200);
	border: 1px solid var(--bg-4);
	border-radius: var(--r-2xl);
	background: var(--bg-3);
	color: var(--text);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 600;
	text-align: center;
	text-wrap: balance;
}
.demo-scene {
	will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
	.demo-step,
	.demo-step-num,
	.demo-toggle {
		transition: none;
	}
}

/* Secondary features on the shorter automation page. */
.social-extras {
	margin-top: var(--sp-500);
}
@media (min-width: 640px) {
	.social-extras {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- En-tête de /fr/ et /fr/videos/ : le logo et la langue, sur toute la largeur du contenu ----------
   Même largeur maximale et mêmes marges que .wrap, donc alignée sur les sections. Les autres pages gardent la pastille. */
.site-header--bar {
	padding-inline: 0;
}
.site-header--bar .nav-pill--bar {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--sp-200));
	max-width: calc(var(--wrap) - 2 * var(--sp-200));
	justify-content: space-between;
}
@media (min-width: 640px) {
	.site-header--bar .nav-pill--bar {
		width: calc(100% - 2 * var(--sp-400));
		max-width: calc(var(--wrap) - 2 * var(--sp-400));
	}
}

/* Le mini-site avec seulement un titre et une phrase : le texte se place au milieu de la hauteur du téléphone */
@media (min-width: 900px) {
	.car-grid--short > :first-child {
		align-self: center;
	}
}

/* Écran d'ouverture de la démonstration : le logo sur le fond de l'application, puis « Ouvrir Karviyo » */
.demo-open {
	background: #070b11;
}
.demo-open-logo {
	position: absolute;
	left: 17%;
	width: 66%;
	top: 36%;
	height: auto;
}
.demo-open-logo text {
	font-family: var(--font-logo);
}
.demo-open-btn {
	position: absolute;
	left: 50%;
	top: 60%;
	display: grid;
	place-items: center;
	width: 62cqw;
	height: 12.8cqw;
	border-radius: 3.6cqw;
	background: var(--gold);
	color: var(--on-gold);
	font: 700 4.4cqw/1 var(--font);
	transform: translate(-50%, -50%);
}
/* la vraie vidéo du post Facebook : posée sur la maquette, elle apparaît en douceur quand elle démarre */
.demo-fbvideo {
	position: absolute;
	object-fit: cover;
	object-position: 50% 12%;
	background: #000;
	opacity: 0;
	transition: opacity 0.5s var(--ease);
	pointer-events: none;
}
.demo-fbvideo.is-playing {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.demo-fbvideo {
		transition: none;
	}
}