/* Karviyo : styles des deux pages d'offres (Karviyo Leads, à l'accueil, et Karviyo Social).
   Chargé après v3.css par /{fr,en,nl}/index.html et /{fr,en,nl}/social.html. */
html { scroll-padding-top: 56px; }

/* ---------- En-tête collé en haut : il se cache en glissant vers le haut quand on descend,
   et revient dès qu'on remonte (offres.js pose .is-hidden) ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 80;
	pointer-events: none; /* la bande transparente autour de la pastille ne bloque pas les clics */
	transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1);
	will-change: transform;
}
.nav-pill { pointer-events: auto; }
.site-header.is-hidden { transform: translateY(-130%); }
.site-header:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.site-header { transition: none; }
	.site-header.is-hidden { transform: none; }
}

/* ---------- Menu à deux entrées, dans la pastille du haut : la page courante en pastille or pleine ---------- */
.nav-menu {
	display: flex;
	align-items: center;
	gap: var(--sp-50);
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-menu a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: var(--sp-50) var(--sp-200);
	border: 1px solid transparent;
	border-radius: var(--r-full);
	color: var(--text);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 500ms var(--ease), color 500ms var(--ease), border-color 500ms var(--ease), transform 500ms var(--ease);
}
.nav-menu a:hover { background: var(--bg-3); }
.nav-menu a:active { transform: scale(0.98); }
.nav-menu a[aria-current] {
	border-color: var(--gold);
	background: var(--gold);
	color: var(--gold-ink);
	font-weight: 700;
}
.nav-menu a[aria-current]:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.nav-menu a:focus-visible,
.lang-switch a:focus-visible { outline-offset: 2px; }
/* petits écrans : noms courts si la place manque (« Leads », « Social ») */
.nm-pre { display: none; }
@media (min-width: 480px) {
	.nm-pre { display: inline; white-space: pre; }
	.nav-menu a:not([aria-current]) .nm-pre { display: none; }
}
@media (min-width: 640px) {
	.nav-menu a:not([aria-current]) .nm-pre { display: inline; }
}
@media (max-width: 519px) {
	.nav-pill { gap: var(--sp-75); padding-left: var(--sp-200); }
	.logo svg { width: 84px; }
	.nav-menu a { padding-inline: var(--sp-100); }
	.lang-switch { gap: 0; }
	.lang-switch a,
	.lang-switch span { min-width: 32px; padding-inline: var(--sp-50); }
}
@media (min-width: 520px) {
	.nav-menu { margin-left: var(--sp-75); }
}

/* ---------- Héros : titres un peu plus petits au bureau (ils tiennent dans la colonne de gauche) ---------- */
@media (min-width: 1024px) {
	.hero-title { font-size: var(--fs-5xl); }
}
.hero-title--free .br-lg { display: none; } /* titre long : la balance des lignes suffit */
.hero-cta { flex-wrap: wrap; }
.hero-alt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--sp-100);
	margin-top: var(--sp-200);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.hero-alt a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-50);
	min-height: 44px;
	color: var(--text);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--bg-4);
	text-underline-offset: 4px;
	transition: color 500ms var(--ease), text-decoration-color 500ms var(--ease);
}
.hero-alt a svg { width: 16px; height: 16px; flex: none; }
.hero-alt a:hover { color: var(--gold); text-decoration-color: var(--gold); }
/* lien mis en avant (page Social vers Leads) : or, un peu plus grand, avec sa flèche */
.hero-alt--up {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-25);
	margin-top: var(--sp-300);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}
.hero-alt--up a {
	gap: var(--sp-75);
	color: var(--gold);
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
	font-weight: 700;
	text-decoration: none;
}
.hero-alt--up a svg { width: 20px; height: 20px; transition: transform 500ms var(--ease); }
.hero-alt--up a:hover { color: var(--gold-hover); }
.hero-alt--up a:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
	.hero-alt--up a:hover svg { transform: none; }
}

/* ---------- Bouton discret renvoyant vers l'autre offre ---------- */
.fm-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-75);
	min-height: 44px;
	padding: var(--sp-75) var(--sp-200);
	border: 1px solid var(--bg-4);
	border-radius: var(--r-full);
	color: var(--text);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: border-color 500ms var(--ease), background-color 500ms var(--ease), color 500ms var(--ease), transform 500ms var(--ease);
}
.fm-link svg { width: 16px; height: 16px; flex: none; }
.fm-link:hover { border-color: var(--gold); color: var(--gold); }
.fm-link:active { transform: scale(0.98); }

/* ---------- Aperçu d'un résultat de recherche : dessiné en HTML, fond clair, police système (cet encart seulement) ---------- */
.gs,
.gp {
	--g-ink: #202124;
	--g-sub: #4d5156;
	--g-link: #1a0dab;
	--g-line: #dfe1e5;
	font-family: Arial, 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
}
.gs {
	margin: var(--sp-50) 0;
	padding: var(--sp-200);
	border-radius: var(--r-2xl);
	background: #ffffff;
	color: var(--g-ink);
}
.gs p { text-wrap: pretty; }
.gs-bar {
	display: flex;
	align-items: center;
	gap: var(--sp-100);
	min-height: 44px;
	padding: 0 var(--sp-200);
	border: 1px solid var(--g-line);
	border-radius: var(--r-full);
	box-shadow: 0 1px 3px rgba(32, 33, 36, 0.12);
	font-size: 14px;
	line-height: 20px;
}
.gs-bar svg { width: 18px; height: 18px; flex: none; color: #9aa0a6; }
.gs-bar span { min-width: 0; overflow-wrap: anywhere; }
.gs-res {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 72px;
	column-gap: var(--sp-100);
	margin-top: var(--sp-200);
}
.gs-src {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var(--sp-75);
	color: var(--g-sub);
	font-size: 12px;
	line-height: 16px;
}
.gs-src img {
	width: 18px;
	height: 18px;
	flex: none;
	padding: 2px;
	border-radius: var(--r-full);
	background: #202124;
}
.gs-src b { color: var(--g-ink); font-weight: 700; }
.gs-title {
	grid-column: 1;
	margin-top: var(--sp-75);
	color: var(--g-link);
	font-size: 18px;
	line-height: 24px;
}
.gs-desc {
	grid-column: 1;
	margin-top: var(--sp-50);
	color: var(--g-sub);
	font-size: 14px;
	line-height: 20px;
}
.gs-thumb {
	grid-column: 2;
	grid-row: 2 / span 2;
	align-self: start;
	width: 72px;
	height: 72px;
	margin-top: var(--sp-75);
	border-radius: var(--r-lg);
	object-fit: cover;
}

/* ---------- Héros Leads : l'annonce Google au-dessus d'un téléphone 3D, une flèche discrète les relie ---------- */
.hl {
	--s: 0.5; /* réduction du téléphone (lue par .phone3d) */
	display: grid;
	grid-template-columns: minmax(0, 1fr) calc(417px * var(--s));
	grid-template-areas: 'card card' 'arrow phone';
	column-gap: var(--sp-200);
	row-gap: var(--sp-100);
	align-items: start;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
}
.hl .gs { grid-area: card; margin: 0; }
.hl-arrow {
	grid-area: arrow;
	justify-self: end;
	width: min(100%, 120px);
	height: auto;
	margin-top: var(--sp-25);
	color: var(--gold);
	opacity: 0.7;
}
.hl .phone3d { grid-area: phone; margin: 0; }
@media (min-width: 640px) {
	.hl { --s: 0.56; }
}
@keyframes hl-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.hl .gs,
	.hl-arrow,
	.hl .phone3d {
		animation: hl-in 900ms var(--ease) both;
	}
	.hl-arrow { animation-delay: 300ms; }
	.hl .phone3d { animation-delay: 450ms; }
}

/* ---------- Un seul chiffre, centré ---------- */
@media (min-width: 768px) {
	.figures--one { grid-auto-flow: row; max-width: 420px; }
}

/* ---------- Schéma « Comment ça marche » : quatre étapes en ligne (le composant .flow existant) ---------- */
.flow--leads .flow-rail { height: calc(3 * (var(--tile) + var(--gap))); }
/* Google : le G standard à quatre couleurs, à la taille de la marque Karviyo ; l'acheteur : l'icône Phosphor phone-call */
.flow-logo.is-google > svg { width: 56px; height: 56px; }
.flow-logo.is-call { color: var(--gold); }
@media (min-width: 1024px) {
	.flow--leads .flow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.flow--leads .flow-rail { left: 120px; top: 105px; width: 720px; height: 2px; }
	.flow-logo.is-google > svg { width: 64px; height: 64px; }
}
/* le cycle (8 s) : AutoScout24 (0 %), Karviyo (30 %), Google (58 %), l'acheteur (86 %) */
@keyframes leads-dot-y {
	0%, 6% { top: 0; opacity: 1; }
	26%, 34% { top: 33.333%; opacity: 1; }
	54%, 62% { top: 66.666%; opacity: 1; }
	82%, 90% { top: 100%; opacity: 1; }
	96%, 100% { top: 100%; opacity: 0; }
}
@keyframes leads-dot-x {
	0%, 6% { left: 0; opacity: 1; }
	26%, 34% { left: 33.333%; opacity: 1; }
	54%, 62% { left: 66.666%; opacity: 1; }
	82%, 90% { left: 100%; opacity: 1; }
	96%, 100% { left: 100%; opacity: 0; }
}
@keyframes leads-glow-2 {
	0%, 24%, 40%, 100% { transform: none; border-color: var(--bg-3); box-shadow: none; }
	30% { 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 leads-glow-3 {
	0%, 52%, 68%, 100% { transform: none; border-color: var(--bg-3); box-shadow: none; }
	58% { 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 leads-glow-4 {
	0%, 80%, 96%, 100% { transform: none; border-color: var(--bg-3); box-shadow: none; }
	86% { 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); }
}
.flow.flow--leads.is-running .flow-dot { animation: leads-dot-y 8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.flow.flow--leads.is-running .flow-step:nth-child(2) .flow-logo { animation: leads-glow-2 8s var(--ease) infinite; }
.flow.flow--leads.is-running .flow-step:nth-child(3) .flow-logo { animation: leads-glow-3 8s var(--ease) infinite; }
.flow.flow--leads.is-running .flow-step:nth-child(4) .flow-logo { animation: leads-glow-4 8s var(--ease) infinite; }
@media (min-width: 1024px) {
	.flow.flow--leads.is-running .flow-dot { animation-name: leads-dot-x; }
}

/* ---------- Téléphone « La pub Google » : une page de résultats, dessinée à l'échelle 1 (393 × 842) ---------- */
.gp {
	text-align: left;
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	color: var(--g-ink);
}
.gp-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 54px;
	padding: 12px 32px 0 48px;
	flex: none;
	font-size: 16px;
	font-weight: 600;
}
.gp-bar svg { width: 64px; height: 12px; }
.gp-body { display: flex; flex-direction: column; gap: 20px; padding: 10px 20px 0; }
.gp-search {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 52px;
	padding: 0 18px;
	border: 1px solid var(--g-line);
	border-radius: 9999px;
	box-shadow: 0 1px 4px rgba(32, 33, 36, 0.16);
	font-size: 16px;
}
.gp-search svg { width: 20px; height: 20px; flex: none; color: #9aa0a6; }
.gp-tabs { display: flex; gap: 8px; }
.gp-tabs i { display: block; width: 62px; height: 30px; border-radius: 9999px; background: #f1f3f4; }
.gp-tabs i:first-child { width: 48px; background: #d2e3fc; }
.gp-ad { display: grid; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--g-line); }
.gp-src { display: flex; align-items: center; gap: 10px; color: var(--g-sub); font-size: 14px; line-height: 20px; }
.gp-src img { width: 26px; height: 26px; padding: 3px; border-radius: 9999px; background: #202124; }
.gp-src b { color: var(--g-ink); font-weight: 700; }
.gp-title { color: var(--g-link); font-size: 22px; line-height: 28px; }
.gp-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; align-items: start; }
.gp-desc { color: var(--g-sub); font-size: 16px; line-height: 24px; }
.gp-thumb { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }
.gp-sk { display: grid; gap: 10px; }
.gp-sk i { display: block; height: 12px; border-radius: 6px; background: #eceff1; }
.gp-sk i:nth-child(1) { width: 40%; height: 14px; }
.gp-sk i:nth-child(2) { width: 88%; height: 18px; background: #e3eaf7; }
.gp-sk i:nth-child(3) { width: 74%; }

/* ---------- Tarifs : une seule famille, puis la carte de renvoi ---------- */
.pricing-more--single { margin-top: var(--sp-500); }
.plan-name h3 { row-gap: var(--sp-25); }
.xref {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-200);
	margin-top: var(--sp-500);
	padding: var(--sp-300);
	border: 1px solid var(--bg-4);
	border-radius: var(--r-3xl);
	background: var(--bg-1);
}
.xref-text { display: grid; gap: var(--sp-50); min-width: 0; }
.xref-text h3 { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 700; }
.xref-text p { color: var(--text-muted); }
/* carte mise en avant (page Social vers Leads) : bordure or, fond chaud */
.xref--up {
	border-color: var(--gold);
	background: var(--bg-warm);
}
.xref--up .xref-text h3 { color: var(--text); }
.xref--up .fm-link {
	border-color: var(--gold);
	background: var(--gold);
	color: var(--gold-ink);
	font-weight: 700;
}
.xref--up .fm-link:hover { border-color: var(--gold-hover); background: var(--gold-hover); color: var(--gold-ink); }
@media (min-width: 768px) {
	.xref { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-400); padding: var(--sp-300) var(--sp-400); }
	.xref .fm-link { flex: none; }
}

/* ---------- Bande confiance ---------- */
.trust {
	padding: var(--sp-600) 0;
	border-block: 1px solid var(--bg-3);
	background: var(--bg-1);
}
@media (min-width: 1024px) {
	.trust { padding: var(--sp-700) 0; }
}
.trust-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-400) var(--sp-200);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) {
	.trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-300); }
}
.trust-item {
	display: grid;
	justify-items: start;
	align-content: start;
	gap: var(--sp-75);
}
.trust-ico {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--sp-50);
	border: 1px solid var(--gold-line);
	border-radius: var(--r-xl);
	background: var(--bg-warm);
	color: var(--gold);
}
.trust-ico svg { width: 32px; height: 32px; }
.nb { white-space: nowrap; }
/* mêmes carrés or pour « Vos résultats » */
.res-ico svg { width: 30px; height: 30px; }
.trust-item h3 {
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 700;
}
.trust-item p {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}

/* ---------- « Essayez » Leads : la conversation WhatsApp raconte tout le parcours ----------
   États posés par offres.js (data-state sur .try) : listing, share, pick, sent, offer, yes, done.
   Sans script ou en mouvement réduit (aucun data-state) : la conversation complète, défilée jusqu'en bas. */
.wa-chat--scroll {
	position: relative;
	justify-content: flex-start;
	overflow: hidden;
}
.wa-chat--scroll > :first-child { margin-top: auto; }
html:not(.has-js) .wa-chat--scroll { justify-content: flex-end; }

/* la vidéo reçue : dans la bulle, avec le texte dessous */
.bubble-offer {
	width: 248px;
	max-width: 82%;
	padding: var(--sp-50);
}
.bubble-offer p {
	display: block;
	padding: var(--sp-75) var(--sp-50) 0;
}
.offer-media {
	position: relative;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	border-radius: var(--r);
	background: #0c1117 url('/media/bmw-x2-poster.jpg') center / cover no-repeat;
}
.offer-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.offer-media .media-info { justify-content: flex-start; }

/* le bouton de réponse rapide, sous la bulle */
.quick-reply {
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-75);
	width: 248px;
	max-width: 82%;
	height: 44px;
	border-radius: var(--r-lg);
	background: var(--wa-in);
	color: #027eb5;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 600;
	box-shadow: 0 1px 1px rgba(11, 20, 26, 0.13);
	transition: background-color 300ms var(--ease), transform 300ms var(--ease);
}
.quick-reply svg { width: 20px; height: 20px; flex: none; }
.quick-reply.is-pressed { background: #e3ebef; transform: scale(0.98); }
.bubble-out p { display: block; }
.bubble-out.bubble-link p { display: block; }
.bubble .wa-url { color: #027eb5; }

/* quel élément est là à quel moment (display: le fil grandit, comme dans WhatsApp) */
.try[data-state='listing'] .chat-in,
.try[data-state='share'] .chat-in,
.try[data-state='pick'] .chat-in,
.try[data-state='sent'] .chat-in,
.try[data-state='listing'] .chat-yes,
.try[data-state='share'] .chat-yes,
.try[data-state='pick'] .chat-yes,
.try[data-state='sent'] .chat-yes,
.try[data-state='offer'] .chat-yes,
.try[data-state='listing'] .chat-reply,
.try[data-state='share'] .chat-reply,
.try[data-state='pick'] .chat-reply,
.try[data-state='sent'] .chat-reply,
.try[data-state='offer'] .chat-reply,
.try[data-state='yes'] .chat-reply { display: none; }
/* la conversation est visible dès l'envoi du message, jusqu'à la réponse */
.try[data-state='offer'] .scr-chat,
.try[data-state='yes'] .scr-chat,
.try[data-state='done'] .scr-chat { opacity: 1; }
@keyframes chat-pop {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.try[data-state] .chat-in,
	.try[data-state] .chat-yes,
	.try[data-state] .chat-reply { animation: chat-pop 600ms var(--ease) both; }
}

/* ---------- Social : « Ce que ça change pour votre garage » (3 cartes, mêmes carrés or que la bande Confiance) ---------- */
.why-cards {
	display: grid;
	gap: var(--sp-200);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.why-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-300); }
}
.why-card {
	display: grid;
	justify-items: start;
	align-content: start;
	gap: var(--sp-75);
	padding: var(--sp-300);
	border: 1px solid var(--bg-3);
	border-radius: var(--r-3xl);
	background: var(--bg-1);
}
.why-card .trust-ico { margin-bottom: var(--sp-100); }
.why-card h3 { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 700; }
.why-card p { color: var(--text-muted); font-size: var(--fs-base); line-height: var(--lh-base); }
.why-src {
	margin-top: var(--sp-300);
	color: var(--text-dim);
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
}
.why-src a { color: var(--text-muted); text-underline-offset: 4px; }

/* ---------- « La page de votre garage » : capture d'écran dans un téléphone 3D, un peu plus petit que celui des résultats ---------- */
.garage-wall .phone3d { --s: 0.62; }
@media (min-width: 640px) {
	.garage-wall .phone3d { --s: 0.74; }
}
@media (min-width: 1024px) {
	.garage-wall .phone3d { --s: 0.8; }
}
.garage-shot { object-position: top; }