/* Karviyo — landing v3 (aperçu)
   Feuille indépendante : ni ../styles.css ni ../v2/v2.css ne sont touchées.
   La v3 vend le résultat : des annonces fixes qui deviennent des vidéos.

   Règles visuelles : compétence landing-page-design (Partie B).
   - une seule police d'interface (Manrope) ; Space Grotesk ne sert qu'au mot
     « karviyo » du logo, qui est un dessin de marque ;
   - tailles : échelle Tailwind (B1) ; espacements : table B2 ; rayons : Tailwind (B3) ;
   - fonds plats, couleurs sombres de la table B4 ; seul le titre du héros
     porte un dégradé, sur le texte (B5) ;
   - mouvements : cubic-bezier(0.32, 0.72, 0, 1), jamais la courbe par défaut (B7).

   Écarts assumés :
   - un seul modèle de téléphone, celui de la v2 (composant .phone3d, utilisé
     dans le héros, « Ce que vous recevez » et l'essai) : illustration d'objet
     réel, coins de 60 px et 48 px (formule des rayons imbriqués, 60 − 12),
     dessiné à taille réelle (393 points) puis réduit d'un bloc par transform ;
   - apparitions au défilement : pilotées par la position de défilement
     (animation-timeline: view()) et non par un observateur. Sans prise en
     charge, rien n'est animé et tout est visible. Aucune apparition n'attend
     un script pour devenir lisible ;
   - les animations en boucle (trait « Automatique », téléphone de l'essai)
     ont un état de repos lisible : sans script ou en mouvement réduit, on voit
     les trois logos fixes et la conversation complète. */

/* ---------- Polices ---------- */
@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-Variable.ttf') format('truetype-variations');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Space Grotesk';
	src: url('../fonts/SpaceGrotesk-Variable.ttf') format('truetype-variations');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
	/* fonds sombres autorisés (B4) */
	--bg: #000000;
	--bg-1: #181818;
	--bg-2: #1f1f1f;
	--bg-3: #272727;
	--bg-4: #313131;
	--bg-warm: #131209;

	--text: #ffffff;
	--text-muted: #a3a3a3; /* 8,3:1 sur #000, 7,1:1 sur #181818 */
	--text-dim: #8c8c8c; /* 6,1:1 sur #000, 5,1:1 sur #181818 */
	--gold: #ffd24a; /* jaune Karviyo, 13:1 sur #181818 */
	--gold-line: #3a3413;
	--gold-hover: #ffdd72; /* le jaune clair du logo */
	--gold-press: #e6bc3f;
	--gold-ink: #1a1400; /* 12,9:1 sur #ffd24a */
	--gold-focus: rgba(255, 210, 74, 0.55);

	/* WhatsApp : vert de marque et couleurs de l'application (thème clair) */
	--wa: #25d366;
	--wa-hover: #45dd7e;
	--wa-press: #1fb457;
	--wa-ink: #072e17; /* 7,5:1 sur #25D366 (AA et AAA) */
	--wa-focus: rgba(37, 211, 102, 0.55);
	--wa-chat: #efeae2;
	--wa-out: #d9fdd3;
	--wa-in: #ffffff;
	--wa-text: #111b21;
	--wa-meta: #667781;
	--wa-tick: #53bdeb;
	--wa-bar: #f6f5f3;
	--wa-green-text: #008069;

	--font: 'Manrope', system-ui, sans-serif;
	--font-logo: 'Space Grotesk', 'Manrope', sans-serif;

	/* échelle de tailles (B1) */
	--fs-xs: 12px;   --lh-xs: 16px;
	--fs-sm: 14px;   --lh-sm: 20px;
	--fs-base: 16px; --lh-base: 24px;
	--fs-lg: 18px;   --lh-lg: 28px;
	--fs-xl: 20px;   --lh-xl: 28px;
	--fs-2xl: 24px;  --lh-2xl: 32px;
	--fs-3xl: 30px;  --lh-3xl: 36px;
	--fs-4xl: 36px;  --lh-4xl: 40px;
	--fs-5xl: 48px;
	--fs-6xl: 60px;
	--fs-7xl: 72px;

	/* espacements (B2) */
	--sp-25: 2px;
	--sp-50: 4px;
	--sp-75: 8px;
	--sp-100: 12px;
	--sp-200: 16px;
	--sp-300: 24px;
	--sp-400: 32px;
	--sp-500: 40px;
	--sp-600: 48px;
	--sp-700: 64px;
	--sp-800: 80px;
	--sp-900: 96px;

	/* rayons Tailwind (B3) */
	--r-sm: 2px;
	--r: 4px;
	--r-md: 6px;
	--r-lg: 8px;
	--r-xl: 12px;
	--r-2xl: 16px;
	--r-3xl: 24px;
	--r-full: 9999px;

	--ease: cubic-bezier(0.32, 0.72, 0, 1);
	--wrap: 1152px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
/* clip plutôt que hidden : la page ne devient jamais un conteneur qui défile de côté */
@supports (overflow: clip) {
	html,
	body {
		overflow-x: clip;
	}
}
h1,
h2,
h3,
p {
	margin: 0;
}
h1,
h2,
h3 {
	font-weight: 600;
	text-wrap: balance;
}
p,
li,
dd,
figcaption {
	text-wrap: pretty;
}
img,
video,
svg {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
}
button {
	font: inherit;
	color: inherit;
}
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 4px;
	border-radius: var(--r);
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	left: var(--sp-200);
	top: var(--sp-200);
	z-index: 100;
	padding: var(--sp-75) var(--sp-100);
	border-radius: var(--r-lg);
	background: var(--gold);
	color: #0c1117;
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform 500ms var(--ease);
}
.skip-link:focus {
	transform: translateY(0);
}
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--sp-200);
}
@media (min-width: 640px) {
	.wrap {
		padding: 0 var(--sp-400);
	}
}

/* ---------- Boutons WhatsApp : le vert pour l'essai, l'or pour la pub ---------- */
.btn-wa,
.btn-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-75);
	min-height: 48px; /* cible tactile confortable ; le rembourrage reste celui de B2 */
	padding: var(--sp-75) var(--sp-300) var(--sp-75) var(--sp-200);
	border-radius: var(--r-full);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition:
		background-color 500ms var(--ease),
		transform 500ms var(--ease),
		box-shadow 500ms var(--ease);
}
.btn-wa {
	background: var(--wa);
	color: var(--wa-ink);
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.22);
}
.btn-gold {
	background: var(--gold);
	color: var(--gold-ink);
	box-shadow: 0 8px 24px rgba(255, 210, 74, 0.18);
}
.btn-wa svg,
.btn-gold svg {
	width: 24px;
	height: 24px;
	flex: none;
}
.btn-wa:hover {
	background: var(--wa-hover);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(37, 211, 102, 0.3);
}
.btn-wa:active {
	background: var(--wa-press);
	transform: scale(0.98);
	box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}
.btn-wa:focus-visible {
	outline: 3px solid var(--wa-focus);
	outline-offset: 4px;
	border-radius: var(--r-full);
}
.btn-gold:hover {
	background: var(--gold-hover);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(255, 210, 74, 0.26);
}
.btn-gold:active {
	background: var(--gold-press);
	transform: scale(0.98);
	box-shadow: 0 4px 12px rgba(255, 210, 74, 0.16);
}
.btn-gold:focus-visible {
	outline: 3px solid var(--gold-focus);
	outline-offset: 4px;
	border-radius: var(--r-full);
}
.fineprint {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}

/* ---------- En-tête : îlot flottant ---------- */
.site-header {
	display: flex;
	justify-content: center;
	padding: var(--sp-200) var(--sp-200) 0;
}
.nav-pill {
	display: flex;
	align-items: center;
	gap: var(--sp-300);
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: var(--sp-50) var(--sp-50) var(--sp-50) var(--sp-300);
	border: 1px solid var(--bg-3);
	border-radius: var(--r-full);
	background: rgba(24, 24, 24, 0.72);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}
.logo {
	display: block;
	border-radius: var(--r);
	transition: opacity 500ms var(--ease);
}
.logo:hover {
	opacity: 0.8;
}
.logo svg {
	width: 104px;
	height: auto;
}
.logo text {
	font-family: var(--font-logo);
}
.lang-switch {
	display: flex;
	align-items: center;
	gap: var(--sp-50);
}
.lang-switch a,
.lang-switch span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 32px;
	padding: var(--sp-50) var(--sp-75);
	border-radius: var(--r-full);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
	text-decoration: none;
}
.lang-switch a {
	color: var(--text-muted);
	transition:
		background-color 500ms var(--ease),
		color 500ms var(--ease);
}
.lang-switch a:hover {
	background: var(--bg-3);
	color: var(--text);
}
.lang-switch a:active {
	transform: scale(0.98);
}
.lang-switch [aria-current] {
	background: var(--bg-4);
	color: var(--text);
}
@media (min-width: 640px) {
	.site-header {
		padding-top: var(--sp-300);
	}
	.nav-pill {
		padding: var(--sp-75) var(--sp-75) var(--sp-75) var(--sp-300);
	}
}

/* ---------- Titres de section ---------- */
.section {
	padding: var(--sp-800) 0;
}
.section-head {
	max-width: 680px;
	margin-bottom: var(--sp-500);
}
.kicker {
	margin-bottom: var(--sp-100);
	color: var(--gold);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
}
.section-title {
	font-size: var(--fs-3xl);
	line-height: var(--lh-3xl);
	letter-spacing: -0.02em;
}
.section-lead {
	margin-top: var(--sp-200);
	color: var(--text-muted);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}
@media (min-width: 1024px) {
	.section {
		padding: var(--sp-900) 0;
	}
	.section-title {
		font-size: var(--fs-4xl);
		line-height: var(--lh-4xl);
	}
	.section-lead {
		font-size: var(--fs-lg);
		line-height: var(--lh-lg);
	}
}

/* =====================================================================
   1. HÉROS : le résultat
   ===================================================================== */
.hero {
	padding: var(--sp-400) 0 var(--sp-800);
}
.hero-grid {
	display: grid;
	gap: var(--sp-600);
	align-items: center;
}
.eyebrow {
	margin-bottom: var(--sp-100);
	color: var(--gold);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
}
.hero-title {
	max-width: 680px;
	font-size: var(--fs-3xl);
	line-height: var(--lh-3xl);
	letter-spacing: -0.02em;
	/* le seul dégradé de la page, sur le texte (B5) */
	background: linear-gradient(90deg, #ffffff 0%, #9b9b9b 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom: var(--sp-50);
}
.hero-title .br-lg {
	display: none;
}
.hero-sub {
	max-width: 680px;
	margin-top: var(--sp-200);
	color: var(--text-muted);
}
.hero-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-100);
	margin-top: var(--sp-300);
}
@media (min-width: 640px) {
	.hero {
		padding-top: var(--sp-500);
	}
	.hero-title {
		font-size: var(--fs-5xl);
		line-height: 1;
	}
	.hero-sub {
		font-size: var(--fs-lg);
		line-height: var(--lh-lg);
	}
	.hero-cta {
		flex-direction: row;
		align-items: center;
		gap: var(--sp-200);
	}
}
@media (min-width: 1024px) {
	.hero {
		padding: var(--sp-700) 0 var(--sp-900);
	}
	.hero-grid {
		grid-template-columns: minmax(0, 1fr) 440px;
		gap: var(--sp-700);
	}
	.hero-title {
		font-size: var(--fs-6xl);
		line-height: 1;
	}
	.hero-title .br-lg {
		display: inline;
	}
	.hero-cta {
		margin-top: var(--sp-400);
	}
}

/* ---------- Avant / après : 5 photos → 1 vidéo ----------
   À gauche, les 5 vraies photos de l'annonce, en colonne ; un trait discret ;
   à droite, le téléphone 3D où tourne la vraie vidéo. Une seule grille pour
   la scène et sa légende, pour que « 5 photos » et « 1 vidéo » tombent sous
   leurs images. Seul mouvement : un fondu à l'arrivée. */
.hv {
	--tw: 76px; /* largeur des vignettes */
	--s: 0.47; /* réduction du téléphone (lue par .phone3d) */
	--pw: calc(417px * var(--s));
	display: grid;
	grid-template-columns: var(--tw) minmax(24px, 1fr) var(--pw);
	align-items: center;
	row-gap: var(--sp-300);
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
}
.hv-photos {
	display: grid;
	gap: var(--sp-75);
	margin: 0;
	padding: 0;
	list-style: none;
}
.hv-photos img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--bg-4);
	border-radius: var(--r-lg);
	background: var(--bg-2);
}
/* entre les photos et le téléphone : les 3 chevrons du logo Karviyo,
   qui s'allument l'un après l'autre (photos → vidéo). Au repos : allumés. */
.hv-chev {
	display: flex;
	justify-content: center;
}
.hv-chev svg {
	width: 36px;
	height: auto;
	overflow: visible;
}
@media (min-width: 640px) {
	.hv-chev svg {
		width: 44px;
	}
}
@keyframes hv-chev {
	0%,
	55%,
	100% {
		opacity: 0.2;
	}
	20% {
		opacity: 1;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.hv-chev path {
		animation: hv-chev 1.8s var(--ease) infinite;
	}
	.hv-chev path:nth-child(2) {
		animation-delay: 250ms;
	}
	.hv-chev path:nth-child(3) {
		animation-delay: 500ms;
	}
}
.hv-cap {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: var(--tw) minmax(24px, 1fr) var(--pw);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	text-align: center;
}
.hv-cap span {
	white-space: nowrap;
}
.hv-cap .c1 {
	grid-column: 1;
}
.hv-cap .c3 {
	grid-column: 3;
}
@media (min-width: 640px) {
	.hv {
		--tw: 96px;
		--s: 0.6;
	}
}

/* fondu à l'arrivée : les vignettes, le fil, puis le téléphone.
   Sans mouvement réduit seulement ; l'état de repos est l'état final. */
@keyframes hv-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.hv-photos li,
	.hv-chev,
	.hv .phone3d,
	.hv-cap {
		animation: hv-in 900ms var(--ease) both;
	}
	.hv-photos li:nth-child(2) { animation-delay: 60ms; }
	.hv-photos li:nth-child(3) { animation-delay: 120ms; }
	.hv-photos li:nth-child(4) { animation-delay: 180ms; }
	.hv-photos li:nth-child(5) { animation-delay: 240ms; }
	.hv-chev { animation-delay: 320ms; }
	.hv .phone3d { animation-delay: 400ms; }
	.hv-cap { animation-delay: 560ms; }
}

/* =====================================================================
   2. POURQUOI LA VIDÉO : slogan (B11) puis chiffres sourcés
   ===================================================================== */
.tagline {
	padding: var(--sp-900) 0;
	background: var(--bg-warm);
}
.tagline-text {
	max-width: 680px;
	font-size: var(--fs-4xl);
	line-height: var(--lh-4xl);
	font-weight: 600;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.tagline-text .w {
	color: rgba(255, 255, 255, 0.3);
	transition: color 700ms var(--ease);
}
.tagline-text .w.on {
	color: var(--text);
}
.tagline-text .w.gold.on {
	color: var(--gold);
}
@media (min-width: 1024px) {
	.tagline-text {
		font-size: var(--fs-6xl);
		line-height: 1;
	}
}

/* deux grands chiffres sourcés, séparés par un filet fin : empilés sur
   téléphone, côte à côte à partir de 768 px (une colonne par chiffre, quel
   que soit leur nombre). État de repos : la valeur
   finale, écrite dans le HTML ; v3.js la fait compter depuis 0 à l'arrivée
   à l'écran. Le filet est un trait posé entre deux colonnes, pas une bordure. */
.why .section-head {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.figures {
	display: grid;
	gap: var(--sp-600);
	margin: 0;
	padding: 0;
	list-style: none;
}
.figure {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-100);
	text-align: center;
}
.figure + .figure::before {
	content: '';
	position: absolute;
	top: calc(var(--sp-600) / -2);
	left: 0;
	right: 0;
	height: 1px;
	background: var(--bg-3);
}
.figure-num {
	margin-bottom: var(--sp-100);
	color: var(--gold);
	font-size: var(--fs-7xl);
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.03em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.figure h3 {
	font-size: var(--fs-xl);
	line-height: var(--lh-xl);
	font-weight: 700;
	text-wrap: balance;
}
.figure-line {
	max-width: 320px;
	color: var(--text-muted);
	text-wrap: pretty;
}
.src {
	margin-top: auto;
	padding-top: var(--sp-75);
	color: var(--text-dim);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
}
.src a {
	color: var(--text-muted);
	text-decoration: underline;
	text-decoration-color: var(--bg-4);
	text-underline-offset: 3px;
	transition:
		color 500ms var(--ease),
		text-decoration-color 500ms var(--ease);
}
.src a:hover {
	color: var(--text);
	text-decoration-color: var(--text-muted);
}

@media (min-width: 768px) {
	.figures {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 0;
		max-width: 760px;
		margin: 0 auto;
	}
	.figure {
		padding: 0 var(--sp-200);
	}
	.figure + .figure::before {
		top: 0;
		bottom: 0;
		right: auto;
		width: 1px;
		height: auto;
	}
	.figure-num {
		font-size: var(--fs-5xl);
	}
}
@media (min-width: 1024px) {
	.figure {
		padding: 0 var(--sp-300);
	}
	.figure-num {
		font-size: var(--fs-7xl);
	}
}

/* =====================================================================
   3. CE QUE VOUS RECEVEZ : trois téléphones 3D de même taille
   Mobile : carrousel horizontal à défilement accroché, qui déborde jusqu'aux
   bords de l'écran (la page, elle, ne défile jamais de côté).
   ===================================================================== */
.get {
	--s: 0.5;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(417px * var(--s) + var(--sp-400));
	gap: var(--sp-200);
	margin: 0 calc(-1 * var(--sp-200));
	padding: var(--sp-200) var(--sp-200) var(--sp-300);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--sp-200);
	scrollbar-width: none;
}
.get::-webkit-scrollbar {
	display: none;
}
.get > li {
	scroll-snap-align: start;
}
.get-item {
	display: grid;
	justify-items: center;
	gap: var(--sp-300);
	margin: 0;
	text-align: center;
}
.get-cap h3 {
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
}
.get-cap p {
	margin-top: var(--sp-50);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
@media (min-width: 640px) {
	.get {
		--s: 0.56;
	}
}
@media (min-width: 768px) {
	.get {
		--s: 0.5;
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-300);
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}
@media (min-width: 1024px) {
	.get {
		--s: 0.62;
	}
}

/* =====================================================================
   4. AUTOMATIQUE : AutoScout24 → Karviyo → WhatsApp → les réseaux
   Un point jaune parcourt le trait en boucle (8 s) ; chaque logo s'illumine
   quand le point arrive dessus. Après WhatsApp, le trait se divise en
   4 branches (Facebook, Instagram, TikTok, YouTube Shorts) et le point en 4.
   Au repos (sans script, hors écran, mouvement réduit) : tout est fixe.
   Géométrie en pixels, pour que les branches (SVG) et les points
   (offset-path) partagent les mêmes coordonnées :
   - moins de 1024 px : colonne ; tuiles de 104, écart de 48 ; les 4 réseaux
     en rangée sous WhatsApp ;
   - à partir de 1024 px : rangée de 960 px ; colonnes de 216 px puis la
     colonne des réseaux ; chaque étape dans une « scène » de 212 px de haut.
   ===================================================================== */
.flow-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-75);
	margin-bottom: var(--sp-500);
	padding: var(--sp-50) var(--sp-100);
	border: 1px solid var(--gold-line);
	border-radius: var(--r-full);
	background: var(--bg-warm);
	color: var(--gold);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
}
.flow-tag::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: var(--r-full);
	background: var(--gold);
}
.flow-track {
	--tile: 104px;
	--gap: var(--sp-600);
	position: relative;
}
.flow-steps {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.flow-step {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-300);
}
.flow-label {
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
	font-weight: 600;
}
.flow-logo,
.flow-mini {
	--halo: rgba(255, 210, 74, 0.32);
	position: relative;
	z-index: 1;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bg-3);
	background: var(--bg-1);
}
.flow-logo {
	width: var(--tile);
	height: var(--tile);
	border-radius: var(--r-3xl);
}
.flow-logo.is-wa {
	--halo: rgba(37, 211, 102, 0.32);
	color: var(--wa);
}
.flow-logo > svg {
	width: 56px;
	height: 56px;
}
/* AutoScout24 : une marque sobre, le mot dans une pastille jaune (pas le logo officiel) */
.as24 {
	padding: var(--sp-50) var(--sp-75);
	border-radius: var(--r-full);
	background: #f5f200;
	color: #1f1f1f;
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
/* la petite carte « nouvelle annonce » qui sort de la tuile AutoScout24 */
.flow-card {
	position: absolute;
	right: -40px;
	top: -20px;
	display: flex;
	align-items: center;
	gap: var(--sp-75);
	padding: var(--sp-50) var(--sp-75) var(--sp-50) var(--sp-50);
	border: 1px solid var(--bg-4);
	border-radius: var(--r-lg);
	background: var(--bg-3);
	color: var(--gold);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	opacity: 0;
}
.flow-card img {
	width: 32px;
	height: 24px;
	max-width: none;
	object-fit: cover;
	border-radius: var(--r); /* 8 − 4 */
}

/* le trait principal : du centre d'AutoScout24 au centre de WhatsApp, sous les tuiles */
.flow-rail {
	position: absolute;
	z-index: 0;
	left: calc(var(--tile) / 2 - 1px);
	top: calc(var(--tile) / 2);
	width: 2px;
	height: calc(2 * (var(--tile) + var(--gap)));
	border-radius: var(--r-full);
	background: var(--bg-4);
}
.flow-dot,
.flow-fdot {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: var(--r-full);
	background: var(--gold);
	box-shadow:
		0 0 0 4px rgba(255, 210, 74, 0.18),
		0 0 16px 4px rgba(255, 210, 74, 0.55);
	opacity: 0;
}
.flow-dot {
	left: 50%;
	top: 0;
	margin: -6px 0 0 -6px;
}

/* quatrième temps : les réseaux */
.flow-step.is-fan {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-200);
	padding-top: var(--sp-600);
}
.flow-fan {
	display: flex;
	gap: var(--sp-100);
}
.flow-mini {
	width: 56px;
	height: 56px;
	border-radius: var(--r-xl);
}
.flow-mini svg {
	width: 32px;
	height: 32px;
}
/* les 4 branches : un SVG par mise en page, sous les tuiles */
.flow-branches {
	position: absolute;
	z-index: 0;
	left: 0;
	top: calc(-1 * (var(--sp-600) + var(--tile) / 2)); /* centre de WhatsApp */
	width: 260px;
	height: 176px;
	pointer-events: none;
}
.flow-branches svg {
	position: absolute;
	left: 0;
	top: 0;
	overflow: visible;
}
.flow-branches path {
	fill: none;
	stroke: var(--bg-4);
	stroke-width: 2;
	stroke-linecap: round;
}
.flow-branches .fb-d {
	display: none;
}
.flow-fdot {
	left: 0;
	top: 0;
	display: none;
}

@media (min-width: 1024px) {
	.section-head.is-center {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.flow {
		text-align: center;
	}
	.flow-track {
		--tile: 128px;
		width: 960px;
		max-width: 100%;
		margin: 0 auto;
	}
	.flow-steps {
		grid-template-columns: 216px 216px 216px minmax(0, 1fr);
		gap: 0;
	}
	.flow-step {
		flex-direction: column;
		gap: var(--sp-200);
	}
	.flow-logo {
		margin: 42px 0; /* scène de 212 px : (212 − 128) / 2 */
	}
	.as24 {
		padding: var(--sp-50) var(--sp-100);
		font-size: var(--fs-sm);
		line-height: var(--lh-sm);
	}
	.flow-logo > svg {
		width: 64px;
		height: 64px;
	}
	.flow-rail {
		left: 108px;
		top: 105px;
		width: 432px;
		height: 2px;
	}
	.flow-dot {
		left: 0;
		top: 50%;
	}
	.flow-step.is-fan {
		align-items: center;
		padding-top: 0;
	}
	.flow-fan {
		flex-direction: column;
		height: 212px;
	}
	.flow-mini {
		width: 44px;
		height: 44px;
	}
	.flow-mini svg {
		width: 26px;
		height: 26px;
	}
	.flow-branches {
		left: -108px; /* centre de WhatsApp : la moitié de sa colonne */
		top: 0;
		width: 286px;
		height: 212px;
	}
	.flow-branches .fb-m {
		display: none;
	}
	.flow-branches .fb-d {
		display: block;
	}
}

/* les chemins des points : les mêmes que les branches dessinées */
.flow-fdot {
	offset-rotate: 0deg;
	offset-anchor: center;
}
.flow-fdot:nth-of-type(1) { offset-path: path('M52 0V70C52 116 28 100 28 140V176'); }
.flow-fdot:nth-of-type(2) { offset-path: path('M52 0V70C52 116 96 100 96 140V176'); }
.flow-fdot:nth-of-type(3) { offset-path: path('M52 0V70C52 116 164 100 164 140V176'); }
.flow-fdot:nth-of-type(4) { offset-path: path('M52 0V70C52 116 232 100 232 140V176'); }
@media (min-width: 1024px) {
	.flow-fdot:nth-of-type(1) { offset-path: path('M0 106H150C206 106 200 22 250 22H264'); }
	.flow-fdot:nth-of-type(2) { offset-path: path('M0 106H150C206 106 200 78 250 78H264'); }
	.flow-fdot:nth-of-type(3) { offset-path: path('M0 106H150C206 106 200 134 250 134H264'); }
	.flow-fdot:nth-of-type(4) { offset-path: path('M0 106H150C206 106 200 190 250 190H264'); }
}

/* le cycle (8 s) : AutoScout24 (0 %), Karviyo (30 %), WhatsApp (62 %),
   puis les 4 points partent vers les réseaux (68 → 90 %) */
@keyframes flow-dot-y {
	0%, 8% { top: 0; opacity: 1; }
	30%, 40% { top: 50%; opacity: 1; }
	62% { top: 100%; opacity: 1; }
	68%, 100% { top: 100%; opacity: 0; }
}
@keyframes flow-dot-x {
	0%, 8% { left: 0; opacity: 1; }
	30%, 40% { left: 50%; opacity: 1; }
	62% { left: 100%; opacity: 1; }
	68%, 100% { left: 100%; opacity: 0; }
}
@keyframes flow-fdot {
	0%, 64% { offset-distance: 0%; opacity: 0; }
	68% { offset-distance: 0%; opacity: 1; }
	90% { offset-distance: 100%; opacity: 1; }
	96%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes flow-glow-1 {
	0%, 12%, 100% { transform: none; border-color: var(--bg-3); box-shadow: none; }
	4% { transform: scale(1.06); border-color: var(--bg-4); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04), 0 0 40px var(--halo); }
}
@keyframes flow-glow-2 {
	0%, 28%, 42%, 100% { transform: none; border-color: var(--bg-3); box-shadow: none; }
	33% { transform: scale(1.06); border-color: var(--bg-4); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04), 0 0 40px var(--halo); }
}
@keyframes flow-glow-3 {
	0%, 60%, 74%, 100% { transform: none; border-color: var(--bg-3); box-shadow: none; }
	65% { transform: scale(1.06); border-color: var(--bg-4); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04), 0 0 40px var(--halo); }
}
@keyframes flow-glow-4 {
	0%, 87%, 100% { transform: none; border-color: var(--bg-3); box-shadow: none; }
	93% { transform: scale(1.1); border-color: var(--bg-4); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04), 0 0 28px var(--halo); }
}
@keyframes flow-card {
	0% { opacity: 0; transform: translateY(8px) scale(0.92); }
	5%, 22% { opacity: 1; transform: none; }
	30%, 100% { opacity: 0; transform: translateY(-8px); }
}
/* départ et arrivée en douceur, pour qu'on voie le point parcourir le trait */
.flow.is-running .flow-dot {
	animation: flow-dot-y 8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.flow.is-running .flow-step:nth-child(1) .flow-logo {
	animation: flow-glow-1 8s var(--ease) infinite;
}
.flow.is-running .flow-step:nth-child(2) .flow-logo {
	animation: flow-glow-2 8s var(--ease) infinite;
}
.flow.is-running .flow-step:nth-child(3) .flow-logo {
	animation: flow-glow-3 8s var(--ease) infinite;
}
.flow.is-running .flow-mini {
	animation: flow-glow-4 8s var(--ease) infinite;
}
.flow.is-running .flow-card {
	animation: flow-card 8s var(--ease) infinite;
}
/* les 4 points ne partent que si le navigateur sait suivre un chemin */
@supports (offset-path: path('M0 0H1')) {
	.flow-fdot {
		display: block;
	}
	.flow.is-running .flow-fdot {
		animation: flow-fdot 8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}
}
@media (min-width: 1024px) {
	.flow.is-running .flow-dot {
		animation-name: flow-dot-x;
	}
}
.flow.is-paused * {
	animation-play-state: paused !important;
}

/* =====================================================================
   5. TARIFS : les formules (liste .plans), le bouton et les mentions.
   Téléphone : formules, bouton, mentions. À partir de 1024 px : bouton et
   mentions à gauche, formules à droite.
   ===================================================================== */
.pricing-grid {
	display: block;
}
.pricing-head {
	margin-bottom: 0;
}
.pricing-head .section-title {
	text-wrap: balance;
}
.pricing-head .section-lead {
	text-wrap: pretty;
}

.pricing-more {
	display: grid;
	grid-template-areas: 'plans' 'cta' 'foot';
	gap: var(--sp-300);
}
.plans {
	grid-area: plans;
	display: grid;
	gap: var(--sp-100);
	margin: 0;
	padding: 0;
	list-style: none;
}
.plan {
	display: flex;
	align-items: center;
	gap: var(--sp-200);
	padding: var(--sp-200);
	border: 1px solid var(--bg-4);
	border-radius: var(--r-2xl);
	background: var(--bg-1);
}
.plan-name {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: var(--sp-25);
}
.plan-name h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-75);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 700;
}
.plan-name p {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.plan-price {
	display: grid;
	gap: var(--sp-25);
	text-align: right;
	flex: none;
}
.plan-amount {
	font-size: var(--fs-2xl);
	line-height: var(--lh-2xl);
	font-weight: 700;
	white-space: nowrap;
}
.plan-amount small {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
}
.plan-unit {
	min-height: var(--lh-xs);
	color: var(--text-dim);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-variant-numeric: tabular-nums;
}
.plan.is-free {
	border-color: rgba(37, 211, 102, 0.35);
}
.plan.is-free .plan-amount {
	color: var(--wa);
}
.plan.is-best {
	border-color: var(--gold);
	background: var(--bg-warm);
}
.plan-budget {
	color: var(--gold);
	font-weight: 600;
}
.plan-tag {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 var(--sp-75);
	border-radius: var(--r-md);
	background: var(--gold);
	color: #000000;
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 700;
}
.pick-cta {
	grid-area: cta;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-100);
	margin-top: var(--sp-400);
}
.pick-cta-note {
	color: var(--text-dim);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	text-align: center;
}
.pricing-foot {
	grid-area: foot;
	display: grid;
	gap: var(--sp-200);
}
.extras {
	display: grid;
	gap: var(--sp-75);
	margin: 0;
	padding: 0;
	list-style: none;
}
.extra {
	display: flex;
	align-items: center;
	gap: var(--sp-100);
	min-height: 48px;
	padding: var(--sp-100) var(--sp-200);
	border: 1px solid var(--bg-3);
	border-radius: var(--r-xl);
	background: var(--bg-1);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	text-decoration: none;
	transition: border-color 500ms var(--ease), background-color 500ms var(--ease);
}
.extra strong {
	color: var(--text);
	font-weight: 600;
}
.extra svg {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--gold);
}
a.extra:hover {
	border-color: var(--bg-4);
	background: var(--bg-2);
}
a.extra:active {
	transform: translateY(1px);
}
a.extra:focus-visible {
	outline: 3px solid var(--gold-line);
	outline-offset: 2px;
}
a.extra .extra-link {
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.pricing-note {
	color: var(--text-dim);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	text-wrap: pretty;
}
@media (min-width: 640px) {
	.extras {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.pricing-more {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'cta plans'
			'foot plans';
		column-gap: var(--sp-700);
		row-gap: var(--sp-300);
		align-items: start;
	}
	.extras {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =====================================================================
   6. QUESTIONS
   ===================================================================== */
.faq-grid {
	display: grid;
	gap: var(--sp-500);
}
.faq {
	display: grid;
	gap: var(--sp-75);
}
.faq details {
	border: 1px solid var(--bg-3);
	border-radius: var(--r-xl);
	background: var(--bg-1);
	transition: border-color 500ms var(--ease);
}
.faq details:hover,
.faq details[open] {
	border-color: var(--bg-4);
}
.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-200);
	padding: var(--sp-200) var(--sp-300);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	border-radius: var(--r-xl);
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary svg {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--text-muted);
	transition: transform 500ms var(--ease);
}
.faq details[open] summary svg {
	transform: rotate(45deg);
}
.faq .answer {
	padding: 0 var(--sp-300) var(--sp-300);
	color: var(--text-muted);
}
.faq .answer a {
	color: var(--text);
	text-underline-offset: 4px;
}
@media (min-width: 1024px) {
	.faq-grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--sp-700);
		align-items: start;
	}
}

/* =====================================================================
   7. ESSAYEZ MAINTENANT : le téléphone joue les 3 gestes en boucle
   ===================================================================== */
.try {
	padding: var(--sp-800) 0 var(--sp-900);
	background: var(--bg-warm);
}
.try-grid {
	display: grid;
	grid-template-areas: 'head' 'phone' 'steps' 'cta';
	align-items: center;
}
.try-head { grid-area: head; margin-bottom: var(--sp-500); }
.try-grid .phone3d { grid-area: phone; }
.try-steps { grid-area: steps; }
.try-cta { grid-area: cta; }
.try-head .section-title {
	max-width: 680px;
}
.try-steps {
	display: grid;
	gap: var(--sp-75);
	margin: var(--sp-500) 0 var(--sp-300);
	padding: 0;
	list-style: none;
}
.try-step {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: var(--sp-100);
	align-items: center;
	width: 100%;
	padding: var(--sp-100) var(--sp-200) var(--sp-100) var(--sp-100);
	border: 1px solid var(--bg-3);
	border-radius: var(--r-2xl);
	background: var(--bg-1);
	color: var(--text-muted);
	text-align: left;
	cursor: pointer;
	transition:
		border-color 600ms var(--ease),
		background-color 600ms var(--ease),
		color 600ms var(--ease),
		transform 600ms var(--ease);
}
.try-step:hover {
	border-color: var(--bg-4);
	color: var(--text);
}
.try-step:active {
	transform: scale(0.98);
}
.try-step b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--r-full);
	background: var(--bg-3);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 700;
	transition:
		background-color 600ms var(--ease),
		color 600ms var(--ease);
}
.try-step strong {
	display: block;
	color: var(--text);
	font-weight: 600;
}
.try-step span {
	display: block;
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
/* au repos (sans script) : les trois étapes sont allumées */
.try-step,
.try[data-step] .try-step.is-on {
	border-color: var(--gold-line);
	background: var(--bg-warm);
}
.try-step b,
.try[data-step] .try-step.is-on b {
	background: var(--gold);
	color: #1a1500;
}
/* avec le script : seule l'étape jouée s'allume */
.try[data-step] .try-step:not(.is-on) {
	border-color: var(--bg-3);
	background: var(--bg-1);
}
.try[data-step] .try-step:not(.is-on) b {
	background: var(--bg-3);
	color: var(--text-muted);
}
.try-step .try-bar {
	grid-column: 2;
	height: 2px;
	margin-top: var(--sp-50);
	border-radius: var(--r-full);
	background: var(--bg-3);
	overflow: hidden;
	display: none;
}
.try[data-step] .try-step.is-on .try-bar {
	display: block;
}
.try-bar i {
	display: block;
	height: 100%;
	background: var(--gold);
	transform-origin: left;
	animation: try-bar var(--dur, 3s) linear both;
}
@keyframes try-bar {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
.try-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-100);
}
@media (min-width: 640px) {
	.try-cta {
		flex-direction: row;
		align-items: center;
		gap: var(--sp-200);
	}
}
/* sur petit écran, le détail de chaque étape s'efface : le titre suffit
   et le téléphone reste visible avec la légende qui s'allume */
@media (max-width: 639px) {
	.try-desc {
		display: none !important;
	}
	.try-step .try-bar {
		display: none !important;
	}
}
@media (min-width: 1024px) {
	.try {
		padding: var(--sp-900) 0;
	}
	.try-grid {
		grid-template-columns: 360px minmax(0, 1fr);
		grid-template-areas: 'phone head' 'phone steps' 'phone cta';
		grid-template-rows: auto auto 1fr;
		column-gap: var(--sp-800);
		align-items: start;
	}
	.try-grid .phone3d {
		align-self: center;
	}
	.try-head {
		align-self: end;
		margin-bottom: 0;
		padding-top: var(--sp-600);
	}
	.try-steps {
		margin-top: var(--sp-400);
	}
}

/* ---------- Téléphone 3D : un seul modèle, celui de la v2 ----------
   Un composant, trois usages (héros, « Ce que vous recevez », essai).
   Dessiné à taille réelle (417 × 866, écran de 393 points) puis réduit d'un
   bloc par transform : la taille se règle avec --s sur un parent.
     <div class="phone3d [phone3d--mirror|phone3d--front] [phone3d--float]">
       <div class="phone3d-float"><div class="phone3d-body">
         <span class="phone3d-key k1"></span> … k4
         <div class="phone3d-screen">
           <span class="phone3d-island"></span> … contenu …
           <span class="phone3d-home"></span>
         </div>
       </div></div>
     </div>
   Inclinaison : par défaut celle de la v2 (tourné vers la gauche, tranche
   à gauche) ; --mirror le tourne vers la droite ; --front presque de face.
   --dir porte le côté de la tranche et des ombres (−1 à gauche, 1 à droite). */
.phone3d {
	--ry: -16deg;
	--rx: 5deg;
	--rz: 1.5deg;
	--dir: -1;
	position: relative;
	flex: none;
	width: calc(417px * var(--s, 0.5));
	height: calc(866px * var(--s, 0.5));
	margin: 0 auto;
}
.phone3d--mirror {
	--ry: 16deg;
	--rz: -1.5deg;
	--dir: 1;
}
.phone3d--front {
	--ry: -7deg;
	--rx: 4deg;
	--rz: 0.5deg;
	--dir: -0.6;
}
/* ombre portée au sol : une tache plate, floutée (pas de dégradé) */
.phone3d::before {
	content: '';
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: -4%;
	height: 10%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	filter: blur(28px);
}
.phone3d-float {
	position: absolute;
	inset: 0;
	perspective: 1800px; /* ici et pas sur .phone3d : une enveloppe animée aplatirait la 3D */
}
.phone3d--float .phone3d-float {
	animation: phone3d-float 7s var(--ease) infinite alternate;
}
@keyframes phone3d-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}
.phone3d-body {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 417px;
	height: 866px;
	margin: -433px 0 0 -208.5px;
	padding: 12px;
	border-radius: 60px;
	background: #1c1c1e;
	transform: scale(var(--s, 0.5)) rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--rz));
	transform-style: preserve-3d;
	/* liseré métal, épaisseur de la tranche, puis ombres portées */
	box-shadow:
		inset 0 0 0 2px #4a4a4e,
		inset 0 0 0 4px #121214,
		inset 0 0 0 5px #2c2c2e,
		calc(var(--dir) * 1px) 1px 0 0 #3a3a3c,
		calc(var(--dir) * 2px) 2px 0 0 #333335,
		calc(var(--dir) * 3px) 3px 0 0 #2c2c2e,
		calc(var(--dir) * 4px) 4px 0 0 #262628,
		calc(var(--dir) * 5px) 5px 0 0 #202022,
		calc(var(--dir) * 6px) 6px 0 0 #1a1a1c,
		calc(var(--dir) * 7px) 7px 0 0 #151517,
		calc(var(--dir) * 30px) 40px 60px rgba(0, 0, 0, 0.55),
		calc(var(--dir) * 60px) 90px 120px rgba(0, 0, 0, 0.5);
}
/* boutons sur la tranche */
.phone3d-key {
	position: absolute;
	width: 4px;
	border-radius: var(--r-sm);
	background: #2c2c2e;
	box-shadow: -1px 0 0 #48484a;
}
.phone3d-key.k1 { left: calc(-4px + var(--dir) * 1px); top: 150px; height: 32px; }
.phone3d-key.k2 { left: calc(-4px + var(--dir) * 1px); top: 210px; height: 62px; }
.phone3d-key.k3 { left: calc(-4px + var(--dir) * 1px); top: 288px; height: 62px; }
.phone3d-key.k4 { right: calc(-4px - var(--dir) * 1px); top: 240px; height: 96px; box-shadow: 1px 0 0 #48484a; }
.phone3d-screen {
	position: relative;
	width: 393px;
	height: 842px;
	overflow: hidden;
	border-radius: 48px;
	background: #000;
	color: #fff;
	font-family: var(--font);
	isolation: isolate;
}
/* reflet : une bande claire plate, inclinée et floutée, par-dessus l'écran */
.phone3d-screen::after {
	content: '';
	position: absolute;
	top: -30%;
	left: 52%;
	width: 60%;
	height: 160%;
	background: rgba(255, 255, 255, 0.16);
	transform: rotate(24deg);
	filter: blur(28px);
	pointer-events: none;
	z-index: 20;
	mix-blend-mode: soft-light;
}
.phone3d-island {
	position: absolute;
	top: 11px;
	left: 50%;
	width: 124px;
	height: 36px;
	margin-left: -62px;
	border-radius: var(--r-full);
	background: #000;
	z-index: 19;
}
.phone3d-home {
	position: absolute;
	left: 50%;
	bottom: 8px;
	width: 134px;
	height: 5px;
	margin-left: -67px;
	border-radius: var(--r-full);
	background: rgba(255, 255, 255, 0.72);
	z-index: 19;
}
.phone3d-home.is-dark {
	background: #111;
}
/* une vidéo ou une capture qui remplit l'écran */
.phone3d-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}
/* page web sous une barre d'état : la capture commence sous l'heure */
.phone3d-bar {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 54px;
	padding: 12px 32px 0 48px;
	background: #000;
	color: #fff;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 600;
}
.phone3d-bar svg {
	width: 64px;
	height: 12px;
}
.phone3d-bar + .phone3d-media {
	top: 54px;
	height: calc(100% - 54px);
	object-position: top;
}

/* le téléphone de l'essai : écran clair (WhatsApp), barre d'accueil sombre */
.try .phone3d {
	--s: 0.56;
}
@media (min-width: 640px) {
	.try .phone3d {
		--s: 0.74;
	}
}
@media (min-width: 1024px) {
	.try .phone3d {
		--s: 0.8;
	}
}
.try .phone3d-screen {
	background: #ffffff;
	color: var(--wa-text);
}

/* barre d'état des écrans de l'essai */
.status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 54px;
	padding: 12px 32px 0 48px;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 600;
	letter-spacing: -0.01em;
}
.status-icons {
	display: flex;
	align-items: center;
	gap: var(--sp-50);
}
.status-icons svg {
	height: 12px;
	width: auto;
}

/* les écrans du téléphone : des calques superposés */
.scr {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	transition:
		opacity 600ms var(--ease),
		transform 700ms var(--ease);
}

/* écran 1 : l'annonce AutoScout24 (stylisée, sans logo) */
.scr-listing {
	background: #ffffff;
	z-index: 1;
}
.ls-url {
	display: flex;
	align-items: center;
	gap: var(--sp-75);
	margin: 0 var(--sp-200);
	padding: var(--sp-75) var(--sp-200);
	border-radius: var(--r-xl);
	background: #f0f0f0;
	color: #3c3c3c;
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.ls-url svg {
	width: 16px;
	height: 16px;
	flex: none;
}
.ls-url span {
	flex: 1;
	text-align: center;
}
.ls-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 var(--sp-200);
	color: #1b1b1b;
}
.ls-bar svg {
	width: 24px;
	height: 24px;
}
.ls-share {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-full);
	background: #f0f0f0;
}
.ls-photo {
	position: relative;
	height: 262px;
}
.ls-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ls-count {
	position: absolute;
	right: var(--sp-200);
	bottom: var(--sp-200);
	padding: var(--sp-25) var(--sp-75);
	border-radius: var(--r-full);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 600;
}
.ls-body {
	padding: var(--sp-300) var(--sp-300) 0;
}
.ls-title {
	font-size: var(--fs-2xl);
	line-height: var(--lh-2xl);
	font-weight: 700;
}
.ls-price {
	margin-top: var(--sp-75);
	font-size: var(--fs-3xl);
	line-height: var(--lh-3xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.ls-specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-75);
	margin: var(--sp-200) 0 0;
	padding: 0;
	list-style: none;
}
.ls-specs li {
	padding: var(--sp-50) var(--sp-100);
	border-radius: var(--r-full);
	background: #f0f0f0;
	color: #3c3c3c;
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
}
.ls-lines {
	display: grid;
	gap: var(--sp-100);
	margin-top: var(--sp-300);
}
.ls-lines i {
	display: block;
	height: 12px;
	border-radius: var(--r-full);
	background: #ececec;
}
.ls-lines i:nth-child(2) { width: 84%; }
.ls-lines i:nth-child(3) { width: 62%; }

/* écran 2 : la feuille de partage */
.scr-share {
	z-index: 2;
	justify-content: flex-end;
	background: rgba(0, 0, 0, 0.32);
	opacity: 0;
}
.sheet {
	padding: var(--sp-200) var(--sp-200) var(--sp-600);
	border-radius: 24px 24px 0 0;
	background: #f2f2f7;
	transform: translateY(100%);
	transition: transform 700ms var(--ease);
}
.sheet-link {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--sp-100);
	align-items: center;
	padding-bottom: var(--sp-200);
	border-bottom: 1px solid #dcdce0;
}
.sheet-link img {
	width: 48px;
	height: 48px;
	border-radius: var(--r-lg);
	object-fit: cover;
}
.sheet-link b {
	display: block;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 600;
}
.sheet-link span {
	display: block;
	color: #6e6e73;
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.sheet-apps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-100);
	margin: var(--sp-300) 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	color: #3c3c43;
}
.sheet-apps i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--sp-75);
	border-radius: var(--r-2xl);
	background: #d1d1d6;
	color: #fff;
}
.sheet-apps i svg {
	width: 36px;
	height: 36px;
}
.sheet-apps .is-wa i {
	background: var(--wa);
}
.sheet-apps .is-msg i {
	background: #34c759;
}
.sheet-apps .is-mail i {
	background: #1e8cf5;
}
.sheet-rows {
	display: grid;
	gap: 1px;
	margin-top: var(--sp-300);
	border-radius: var(--r-xl);
	overflow: hidden;
}
.sheet-rows i {
	display: block;
	height: 48px;
	background: #ffffff;
}

/* écran 3 : WhatsApp, « Envoyer à… » */
.scr-pick {
	z-index: 3;
	background: #ffffff;
	transform: translateX(100%);
}
.pk-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 var(--sp-200);
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
	font-weight: 600;
}
.pk-head span {
	color: var(--wa-green-text);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 500;
}
.pk-search {
	margin: 0 var(--sp-200);
	height: 40px;
	border-radius: var(--r-xl);
	background: #f0f2f5;
}
.pk-label {
	padding: var(--sp-300) var(--sp-200) var(--sp-75);
	color: var(--wa-meta);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
}
.pk-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.pk-row {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 24px;
	gap: var(--sp-100);
	align-items: center;
	padding: var(--sp-75) var(--sp-200);
}
.pk-row .pk-av {
	width: 48px;
	height: 48px;
	border-radius: var(--r-full);
	background: #dfe5e7;
	object-fit: cover;
}
.pk-row b {
	display: flex;
	align-items: center;
	gap: var(--sp-50);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 600;
}
.pk-row b svg {
	width: 16px;
	height: 16px;
	color: var(--wa);
}
.pk-row small {
	display: block;
	color: var(--wa-meta);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.pk-row i {
	display: block;
	height: 12px;
	border-radius: var(--r-full);
	background: #eceff1;
}
.pk-row i + i {
	width: 50%;
	margin-top: var(--sp-75);
	background: #f3f5f6;
}
.pk-check {
	width: 24px;
	height: 24px;
	border: 2px solid #c5cbce;
	border-radius: var(--r-full);
	transition:
		background-color 400ms var(--ease),
		border-color 400ms var(--ease);
}
.pk-karviyo.is-picked {
	background: #f0faf4;
}
.pk-karviyo.is-picked .pk-check {
	border-color: var(--wa);
	background: var(--wa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.pk-send {
	position: absolute;
	right: var(--sp-300);
	bottom: var(--sp-600);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--r-full);
	background: var(--wa);
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transform: scale(0);
	transition: transform 500ms var(--ease);
}
.pk-send svg {
	width: 24px;
	height: 24px;
}
.pk-karviyo.is-picked ~ .pk-send,
.scr-pick.has-pick .pk-send {
	transform: none;
}

/* écran 4 : la conversation avec Karviyo */
.scr-chat {
	z-index: 4;
	background: var(--wa-chat);
}
.scr-chat .status,
.scr-chat .wa-head {
	background: var(--wa-bar);
}
.wa-head {
	display: flex;
	align-items: center;
	gap: var(--sp-75);
	height: 56px;
	padding: 0 var(--sp-200) 0 var(--sp-75);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
	position: relative;
	z-index: 1;
}
.wa-back {
	width: 24px;
	height: 24px;
	color: #007aff;
}
.wa-avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--r-full);
	background: #080b10;
	object-fit: cover;
}
.wa-who {
	flex: 1;
	min-width: 0;
}
.wa-name {
	display: flex;
	align-items: center;
	gap: var(--sp-50);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 600;
}
.wa-name svg {
	width: 16px;
	height: 16px;
	color: var(--wa);
}
.wa-sub {
	color: var(--wa-meta);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
}
.wa-chat {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--sp-50);
	min-height: 0;
	padding: var(--sp-100) var(--sp-200) var(--sp-200);
	overflow: hidden;
}
.wa-day {
	align-self: center;
	margin: var(--sp-75) 0;
	padding: var(--sp-50) var(--sp-100);
	border-radius: var(--r-lg);
	background: #ffffff;
	color: #54656f;
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 500;
	box-shadow: 0 1px 1px rgba(11, 20, 26, 0.12);
}
.bubble {
	position: relative;
	max-width: 82%;
	padding: var(--sp-50) var(--sp-75) var(--sp-50) var(--sp-100);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 1px rgba(11, 20, 26, 0.13);
}
.bubble p {
	display: inline;
}
.bubble-out {
	align-self: flex-end;
	background: var(--wa-out);
	border-top-right-radius: 0;
}
.bubble-in {
	align-self: flex-start;
	background: var(--wa-in);
	border-top-left-radius: 0;
}
.bubble-out::before,
.bubble-in::before {
	content: '';
	position: absolute;
	top: 0;
	width: 8px;
	height: 12px;
}
.bubble-out::before {
	right: -8px;
	background: var(--wa-out);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.bubble-in::before {
	left: -8px;
	background: var(--wa-in);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.meta {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-25);
	float: right;
	margin: var(--sp-75) 0 0 var(--sp-75);
	color: var(--wa-meta);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
}
.meta svg {
	width: 16px;
	height: 12px;
	color: var(--wa-tick);
}
/* bulle sortante : l'annonce partagée, avec son aperçu */
.bubble-link {
	width: 272px;
	padding: var(--sp-50);
}
.link-card {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: var(--sp-75);
	align-items: center;
	padding: var(--sp-50);
	border-radius: var(--r);
	background: #c8ecc1;
}
.link-card img {
	width: 64px;
	height: 64px;
	border-radius: var(--r);
	object-fit: cover;
}
.link-card b {
	display: block;
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
}
.link-card span {
	display: block;
	color: var(--wa-meta);
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
}
.bubble-link p {
	display: block;
	padding: var(--sp-50) var(--sp-50) 0;
	color: #027eb5;
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bubble-in + .bubble-media {
	margin-top: var(--sp-25);
}
.bubble-media {
	align-self: flex-start;
	padding: var(--sp-50);
	border-radius: var(--r-lg);
	background: var(--wa-in);
	box-shadow: 0 1px 1px rgba(11, 20, 26, 0.13);
}
.media-frame {
	position: relative;
	width: 200px;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--r); /* 8 − 4 */
	background: #0c1117 url('../media/bmw-x2-poster.jpg') center / cover no-repeat;
}
.media-frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.media-info {
	position: absolute;
	left: var(--sp-75);
	right: var(--sp-75);
	bottom: var(--sp-50);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #ffffff;
	font-size: var(--fs-xs);
	line-height: var(--lh-xs);
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.media-info span {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-50);
}
.media-info svg {
	width: 16px;
	height: 16px;
}
.wa-compose {
	display: flex;
	align-items: center;
	gap: var(--sp-100);
	padding: var(--sp-75) var(--sp-200) var(--sp-400);
	background: var(--wa-bar);
	color: #007aff;
}
.wa-compose svg {
	width: 24px;
	height: 24px;
	flex: none;
}
.wa-field {
	flex: 1;
	height: 32px;
	border: 1px solid #e2e2e2;
	border-radius: var(--r-full);
	background: #ffffff;
}
.chat-step {
	transition:
		opacity 600ms var(--ease),
		transform 600ms var(--ease);
}

/* le doigt : un rond qui se pose sur la cible, puis s'enfonce */
.tap {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 18;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border: 3px solid rgba(255, 255, 255, 0.95);
	border-radius: var(--r-full);
	background: rgba(17, 27, 33, 0.28);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: translate(var(--tx, 196px), var(--ty, 600px)) scale(1.4);
	transition:
		transform 600ms var(--ease),
		opacity 400ms var(--ease);
	pointer-events: none;
}
.tap.is-down {
	opacity: 1;
	transform: translate(var(--tx, 196px), var(--ty, 600px)) scale(0.8);
}

/* ---- états pilotés par v3.js (data-state sur .try) ----
   Sans data-state (pas de script, mouvement réduit) : conversation complète. */
.try[data-state] .scr-chat {
	opacity: 0;
}
.try[data-state='listing'] .scr-listing,
.try[data-state='share'] .scr-listing {
	opacity: 1;
}
.try[data-state='share'] .scr-share {
	opacity: 1;
}
.try[data-state='share'] .sheet {
	transform: none;
}
.try[data-state='pick'] .scr-pick {
	transform: none;
}
.try[data-state='sent'] .scr-chat,
.try[data-state='video'] .scr-chat {
	opacity: 1;
}
.try[data-state='sent'] .chat-in {
	opacity: 0;
	transform: translateY(16px) scale(0.98);
}
/* cibles du doigt : calculées par v3.js depuis la position des éléments visés */

/* =====================================================================
   Pied de page
   ===================================================================== */
.site-footer {
	padding: var(--sp-600) 0 var(--sp-500);
	background: var(--bg-1);
}
.footer-grid {
	display: grid;
	gap: var(--sp-300);
}
.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-75) var(--sp-300);
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-links a {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	text-decoration: none;
	transition: color 500ms var(--ease);
}
.footer-links a:hover {
	color: var(--text);
}
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-200);
	color: var(--text-dim);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
/* Lien vers l'éditeur (Meta vérifie le rapport entre Karviyo et ALIXA BV). */
.footer-owner {
	max-width: 60ch;
}
.footer-owner a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
@media (min-width: 1024px) {
	.footer-grid {
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: var(--sp-500);
	}
	.footer-links {
		justify-content: flex-end;
	}
	.footer-bottom {
		grid-column: 1 / -1;
	}
}

/* =====================================================================
   Apparitions au défilement (B7), pilotées par la position de défilement.
   Navigateurs sans animation-timeline : aucun effet, tout est visible.
   ===================================================================== */
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(64px);
		filter: blur(12px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.rv {
			animation: rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 80%;
		}
		/* « Ce que vous recevez » : flou puis net. Sur mobile, le carrousel
		   entier (ses téléphones n'ont pas de défilement vertical propre) ;
		   à partir de 768 px, un téléphone après l'autre. */
		.get {
			animation: rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 80%;
		}
		@media (min-width: 768px) {
			.get {
				animation: none;
			}
			.get > li {
				animation: rise linear both;
				animation-timeline: view();
				animation-range: entry 0% entry 70%;
			}
			.get > li:nth-child(2) {
				animation-range: entry 10% entry 80%;
			}
			.get > li:nth-child(3) {
				animation-range: entry 20% entry 90%;
			}
		}
	}
}

/* ---------- Mouvement réduit : tout à l'état final, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation: none !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
	.tagline-text .w {
		color: var(--text);
	}
	.tagline-text .w.gold {
		color: var(--gold);
	}
}

/* =====================================================================
   4 bis. VOS RÉSULTATS : l'écran « Mes résultats » de l'app dans un téléphone
   ===================================================================== */
/* Écran « Mes résultats » de l'app, dessiné à l'échelle 1 dans le téléphone (393 × 842) */
.res-grid { display: grid; gap: var(--sp-600); align-items: center; }
@media (min-width: 900px) { .res-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-800); } }
.res .phone3d { --s: 0.62; }
@media (min-width: 640px) { .res .phone3d { --s: 0.74; } }
@media (min-width: 1024px) { .res .phone3d { --s: 0.8; } }
.res-phone { display: grid; justify-items: center; gap: var(--sp-300); }
.res-note { color: var(--text-dim); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.res-points { display: grid; gap: var(--sp-400); list-style: none; margin: 0; padding: 0; }
.res-points li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-200); align-items: start; }
.res-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-xl); background: var(--bg-warm); border: 1px solid var(--gold-line); color: var(--gold); }
.res-ico svg { width: 24px; height: 24px; }
.res-points h3 { font-size: var(--fs-lg); line-height: var(--lh-lg); }
.res-points p { margin-top: var(--sp-50); color: var(--text-muted); font-size: var(--fs-base); line-height: var(--lh-base); text-wrap: pretty; }

.app { position: absolute; inset: 0; display: flex; flex-direction: column; background: #080b10; color: #fff; font-family: var(--font); }
.app-bar { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 12px 32px 0 48px; font-size: 16px; font-weight: 600; flex: none; }
.app-bar svg { width: 64px; height: 12px; }
.app-head { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px; border-bottom: 1px solid #1c232d; font-weight: 700; font-size: 17px; flex: none; }
.app-head svg { width: 20px; height: 20px; }
.app-body { flex: 1; overflow: hidden; padding: 20px 20px 0; display: flex; flex-direction: column; gap: 14px; }
.app-title { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.app-chips { display: flex; gap: 8px; }
.app-chip { padding: 6px 12px; border-radius: 10px; border: 1px solid #28323e; background: #19212b; font-size: 14px; font-weight: 600; }
.app-chip.on { background: var(--gold); border-color: var(--gold); color: #1a1400; }
.app-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.app-kpi { padding: 12px; border-radius: 14px; border: 1px solid #28323e; background: #11161d; }
.app-kpi span { display: block; color: #c4cbd4; font-size: 13px; font-weight: 600; }
.app-kpi b { display: block; margin-top: 4px; font-size: 26px; line-height: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.app-kpi i { display: block; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 700; color: #34d399; }
.app-kpi.gold b { color: var(--gold); }
.app-card { padding: 14px 14px 12px; border-radius: 14px; border: 1px solid #28323e; background: #11161d; }
.app-card h4 { font-size: 15px; line-height: 20px; font-weight: 700; margin-bottom: 8px; }
.app-chart { display: block; width: 100%; height: auto; }
.app-src { display: grid; gap: 10px; }
.app-src div { display: grid; grid-template-columns: var(--src-col, 116px) minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 14px; }
.app-src em { display: block; height: 8px; border-radius: 99px; background: #1c232d; overflow: hidden; }
.app-src em s { display: block; height: 100%; border-radius: 99px; background: var(--c); width: var(--w); transform-origin: left; }
:lang(nl) .app-src { --src-col: 156px; } /* « Instagram-advertentie » tient sur une ligne */
.app-src span { white-space: nowrap; }
.app-src b { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.app-nav { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); height: 84px; padding: 10px 0 24px; border-top: 1px solid #1c232d; background: #0b0f15; font-size: 12px; font-weight: 600; color: #8a94a3; text-align: center; }
.app-nav span { display: grid; justify-items: center; gap: 4px; }
.app-nav svg { width: 22px; height: 22px; }
.app-nav .on { color: var(--gold); }

/* Animation à l'arrivée à l'écran (la page est complète sans elle) */
.res.is-live .app-line { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: res-draw 1.6s var(--ease) forwards 200ms; }
.res.is-live .app-area { opacity: 0; animation: res-fade .8s ease forwards 1.2s; }
.res.is-live .app-src s { transform: scaleX(0); animation: res-grow 1s var(--ease) forwards; }
.res.is-live .app-src div:nth-child(2) s { animation-delay: 120ms; }
.res.is-live .app-src div:nth-child(3) s { animation-delay: 240ms; }
.res.is-live .app-src div:nth-child(4) s { animation-delay: 360ms; }
@keyframes res-draw { to { stroke-dashoffset: 0; } }
@keyframes res-fade { to { opacity: 1; } }
@keyframes res-grow { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .res.is-live .app-line, .res.is-live .app-area, .res.is-live .app-src s { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; transform: none; } }