/* Karviyo — landing publique
   CSS écrit à la main. Les valeurs de tailles, d'espacements et de rayons
   viennent des tables de la compétence landing-page-design (échelle Tailwind
   en pixels), car ce dossier est indépendant de l'échelle du projet.
   Les couleurs et les polices viennent des jetons de l'application
   (src/lib/styles/tokens/*.css) : l'identité Karviyo prime sur la compétence. */

/* ---------- Polices (identité Karviyo : Space Grotesk + Manrope) ---------- */
@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;
}
@font-face {
	font-family: 'Manrope';
	src: url('/fonts/Manrope-Variable.ttf') format('truetype-variations');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
	/* couleurs — copiées telles quelles depuis src/lib/styles/tokens/colors.css
	   et src/lib/styles/app.css (le jaune Karviyo remplace le bleu de la DS) */
	--kv-black: #080b10;
	--kv-surface: #11161d;
	--kv-elevated: #19212b;
	--kv-inset: #0c1117;
	--kv-border: #28323e;
	--kv-border-strong: #3a4757;
	--kv-white: #f5f7fa;
	--kv-grey: #9ba7b4;
	--kv-grey-dim: #6b7787;
	--kv-gold: #ffd24a;
	--kv-gold-hover: #ffdd72;
	--kv-gold-press: #e6b62f;
	--kv-text-on-accent: #0c1117;
	--kv-focus-ring: rgba(255, 210, 74, 0.5);
	--kv-shadow-accent: 0 8px 28px rgba(255, 210, 74, 0.22);
	--kv-scrim: rgba(8, 11, 16, 0.86);

	/* polices */
	--font-display: 'Space Grotesk', 'Manrope', Helvetica, Arial, sans-serif;
	--font-body: 'Manrope', Helvetica, Arial, sans-serif;

	/* échelle de tailles — table B1 de la compétence, en pixels */
	--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;  --lh-5xl: 1;
	--fs-6xl: 60px;  --lh-6xl: 1;
	--fs-7xl: 72px;  --lh-7xl: 1;

	/* espacements — table B2 de la compétence */
	--sp-0: 0;
	--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 — valeurs par défaut de Tailwind (B3) */
	--r-sm: 2px;
	--r-default: 4px;
	--r-md: 6px;
	--r-lg: 8px;
	--r-xl: 12px;
	--r-2xl: 16px;
	--r-3xl: 24px;
	--r-full: 9999px;

	/* mouvement — courbe imposée par la compétence (B7) */
	--ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
	--dur-reveal: 800ms;
	--dur-fast: 200ms;

	--container-max: 1180px;
	--container-narrow: 720px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
body {
	margin: 0;
	background: var(--kv-black);
	color: var(--kv-white);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	text-wrap: balance;
}
p { text-wrap: pretty; }
:focus-visible {
	outline: 2px solid var(--kv-gold);
	outline-offset: 3px;
	border-radius: var(--r-default);
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
html.nav-open { overflow: hidden; }

/* ---------- Lien d'évitement ---------- */
.skip-link {
	position: absolute;
	top: var(--sp-100);
	left: var(--sp-100);
	transform: translateY(-150%);
	background: var(--kv-gold);
	color: var(--kv-text-on-accent);
	padding: var(--sp-100) var(--sp-200);
	border-radius: var(--r-lg);
	font-weight: 600;
	z-index: 100;
	transition: transform var(--dur-fast) var(--ease-fluid);
}
.skip-link:focus {
	transform: translateY(0);
}

/* ---------- Conteneur ---------- */
.wrap {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--sp-300);
}

/* ---------- Typo utilitaire ---------- */
.eyebrow {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kv-gold);
	font-weight: 600;
}
.lead {
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
	color: var(--kv-grey);
	max-width: var(--container-narrow);
}
.section-title {
	font-size: var(--fs-3xl);
	line-height: var(--lh-3xl);
	max-width: var(--container-narrow);
}
.section-head {
	display: flex;
	flex-direction: column;
	gap: var(--sp-200);
	margin-bottom: var(--sp-600);
}
@media (min-width: 760px) {
	.section-title { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
}

/* ---------- Boutons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-75);
	border-radius: var(--r-full);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-base);
	line-height: 1;
	padding: 14px var(--sp-300);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-fluid),
		background-color var(--dur-fast) var(--ease-fluid),
		border-color var(--dur-fast) var(--ease-fluid),
		box-shadow var(--dur-fast) var(--ease-fluid);
}
.btn-primary {
	background: var(--kv-gold);
	color: var(--kv-text-on-accent);
	box-shadow: var(--kv-shadow-accent);
}
.btn-primary:hover { background: var(--kv-gold-hover); transform: translateY(-1px); }
.btn-primary:active { background: var(--kv-gold-press); transform: translateY(0) scale(0.98); }
.btn-secondary {
	background: transparent;
	color: var(--kv-white);
	border-color: var(--kv-border-strong);
}
.btn-secondary:hover { border-color: var(--kv-gold); color: var(--kv-gold); }
.btn-secondary:active { transform: scale(0.98); }
.btn-sm {
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	padding: var(--sp-75) var(--sp-200);
}
.btn-block { width: 100%; }

/* ---------- Nav flottante ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	justify-content: center;
	padding-top: var(--sp-200);
	pointer-events: none;
}
.nav-pill {
	/* position + z-index : crée un contexte d'empilement propre à la pilule,
	   pour que .nav-pill-bg (z-index négatif) reste derrière son contenu sans
	   que .nav-pill elle-même porte de backdrop-filter. Un backdrop-filter posé
	   ici ferait de la pilule le bloc englobant de .nav-menu (position: fixed),
	   qui se retrouverait alors coincé dans les 56px de la pilule au lieu de
	   couvrir l'écran : c'est ce bloc englobant, et non le seul empilement,
	   qui doit rester hors de la pilule. */
	position: relative;
	z-index: 1;
	pointer-events: auto;
	width: min(100% - var(--sp-400), 920px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-300);
	border-radius: var(--r-full);
	padding: var(--sp-75) var(--sp-75) var(--sp-75) var(--sp-200);
}
.nav-pill-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(17, 22, 29, 0.82);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid var(--kv-border);
	border-radius: var(--r-full);
}
/* position + z-index : .nav-menu (position: fixed, plus loin dans le HTML)
   serait sinon peint par dessus ces éléments non positionnés, même avec un
   z-index plus bas sur .nav-menu — un positionné bat toujours un statique. */
.nav-logo, .nav-toggle { position: relative; z-index: 1; }
.nav-logo { display: flex; align-items: center; }
.nav-logo svg { height: 24px; width: auto; display: block; }
.nav-links {
	display: none;
	align-items: center;
	gap: var(--sp-400);
}
.nav-links a {
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--kv-grey);
	transition: color var(--dur-fast) var(--ease-fluid);
	position: relative;
}
.nav-links a:hover { color: var(--kv-white); }
.nav-links a[aria-current='page'] { color: var(--kv-gold); }
.nav-cta { display: none; }

.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-full);
	background: var(--kv-elevated);
	border: 1px solid var(--kv-border);
	cursor: pointer;
	flex: none;
	transition: background-color var(--dur-fast) var(--ease-fluid);
}
.nav-toggle:hover { background: var(--kv-surface); }
.nav-toggle .bar {
	position: absolute;
	width: 16px;
	height: 2px;
	background: var(--kv-white);
	border-radius: var(--r-full);
	transition: transform 400ms var(--ease-fluid), opacity 400ms var(--ease-fluid), top 400ms var(--ease-fluid);
}
.nav-toggle .bar1 { top: 15px; }
.nav-toggle .bar2 { top: 19px; }
.nav-toggle .bar3 { top: 23px; }
.nav-toggle-input:checked ~ .nav-toggle .bar1 { top: 19px; transform: rotate(45deg); }
.nav-toggle-input:checked ~ .nav-toggle .bar2 { opacity: 0; }
.nav-toggle-input:checked ~ .nav-toggle .bar3 { top: 19px; transform: rotate(-45deg); }

.nav-menu {
	/* z-index inférieur à .nav-pill (1) : la pilule (logo + bouton en croix)
	   doit rester visible et cliquable au-dessus du voile plein écran, pour
	   qu'on puisse refermer le menu avec le même bouton. */
	position: fixed;
	inset: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-500);
	background: var(--kv-scrim);
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-reveal) var(--ease-fluid), visibility 0s linear var(--dur-reveal);
}
.nav-toggle-input:checked ~ .nav-menu {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--dur-reveal) var(--ease-fluid), visibility 0s;
}
.nav-menu-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-300);
}
.nav-menu-links a {
	font-family: var(--font-display);
	font-size: var(--fs-4xl);
	color: var(--kv-white);
	text-decoration: none;
	opacity: 0;
	transform: translateY(48px);
	transition: transform 600ms var(--ease-fluid), opacity 600ms var(--ease-fluid), color var(--dur-fast) var(--ease-fluid);
}
.nav-menu-links a:hover { color: var(--kv-gold); }
.nav-toggle-input:checked ~ .nav-menu .nav-menu-links a {
	opacity: 1;
	transform: translateY(0);
}
.nav-menu-links a:nth-child(1) { transition-delay: 100ms; }
.nav-menu-links a:nth-child(2) { transition-delay: 150ms; }
.nav-menu-links a:nth-child(3) { transition-delay: 200ms; }
.nav-menu .btn { opacity: 0; transform: translateY(48px); transition: transform 600ms var(--ease-fluid), opacity 600ms var(--ease-fluid); transition-delay: 250ms; }
.nav-toggle-input:checked ~ .nav-menu .btn { opacity: 1; transform: translateY(0); }

@media (min-width: 900px) {
	.nav-links { display: flex; }
	.nav-cta { display: inline-flex; }
	.nav-toggle { display: none; }
	.nav-menu { display: none; }
}

/* ---------- Hero ---------- */
.hero {
	padding-top: var(--sp-700);
	padding-bottom: var(--sp-800);
	overflow: hidden;
}
.hero-copy {
	max-width: var(--container-narrow);
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-300);
	margin-bottom: var(--sp-700);
}
.hero-title {
	font-size: var(--fs-4xl);
	line-height: 1.1;
	max-width: 680px;
	background: linear-gradient(90deg, var(--kv-white), var(--kv-grey));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hero-sub {
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
	color: var(--kv-grey);
	max-width: 680px;
}
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: var(--sp-100); margin-top: var(--sp-100); }
.hero-fineprint { font-size: var(--fs-sm); color: var(--kv-grey-dim); }

.showcase-head {
	/* Un titre au dessus du avant / après : sans lui, le collage et le
	   téléphone arrivent sans être annoncés. */
	text-align: center;
	max-width: 680px;
	margin: 0 auto var(--sp-500);
	display: flex;
	flex-direction: column;
	gap: var(--sp-100);
}
.showcase-sub {
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--kv-grey);
}
.showcase-title {
	font-size: var(--fs-2xl);
	line-height: var(--lh-2xl);
	color: var(--kv-white);
}
@media (min-width: 900px) {
	.showcase-title { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
}
.hero-showcase {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-400);
	align-items: center;
	position: relative;
}
.collage, .phone-stage {
	/* Une seule colonne centrée : l'étiquette, les réseaux et le téléphone
	   partagent le même axe, quelle que soit la largeur de l'écran. */
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	max-width: 400px;
	margin-inline: auto;
	padding: var(--sp-500) 0;
}

.collage {
	position: relative;
	height: 300px;
	margin-inline: auto;
	width: 100%;
	max-width: 400px;
}
.collage-label, .phone-label {
	/* Les deux étiquettes sur la même ligne : chaque colonne réserve la même
	   bande en haut, et l'étiquette s'y pose, jamais par rapport au contenu. */
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: var(--kv-elevated);
	border: 1px solid var(--kv-border);
	color: var(--kv-grey);
	font-size: var(--fs-xs);
	padding: var(--sp-50) var(--sp-100);
	border-radius: var(--r-full);
	white-space: nowrap;
	z-index: 5;
}
.collage-photo {
	position: absolute;
	width: 150px;
	height: 112px;
	background: var(--kv-white);
	padding: var(--sp-50);
	border-radius: var(--r-lg);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
	transition: transform var(--dur-fast) var(--ease-fluid);
}
.collage-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-sm);
}
.collage-photo:hover { transform: translateY(-6px) scale(1.03) !important; z-index: 10; }
.collage-photo:nth-of-type(1) { top: 30px; left: 8px; transform: rotate(-9deg); z-index: 1; }
.collage-photo:nth-of-type(2) { top: 10px; left: 100px; transform: rotate(4deg); z-index: 2; }
.collage-photo:nth-of-type(3) { top: 60px; left: 190px; transform: rotate(-4deg); z-index: 3; }
.collage-photo:nth-of-type(4) { top: 130px; left: 40px; transform: rotate(6deg); z-index: 2; }
.collage-photo:nth-of-type(5) { top: 150px; left: 150px; transform: rotate(-7deg); z-index: 1; }

.hero-bridge {
	/* Une flèche ne disait rien. Un passage par Karviyo, lui, se lit : deux
	   traits, le chevron de la marque, et ce qu'il se passe entre les deux.
	   Visible aussi sur téléphone, entre les photos et la vidéo : c'est là que
	   le lien entre les deux a le plus besoin d'être montré. */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-100);
	color: var(--kv-gold);
	align-self: stretch;
	justify-content: center;
	padding-block: var(--sp-200);
	/* Assez large pour que la légende tienne sous la pastille sans déborder
	   sur le collage. */
	min-width: 128px;
}
.hero-bridge-line {
	width: 1px;
	flex: 1;
	min-height: 22px;
	background: linear-gradient(180deg, transparent, var(--kv-border-strong), transparent);
}
.hero-bridge-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r-full);
	border: 1.5px solid var(--kv-gold);
	background: var(--kv-black);
	box-shadow: 0 0 0 8px rgba(255, 210, 74, 0.06);
}
.hero-bridge-badge svg { width: 24px; height: 24px; }
/*
 * Les deux chevrons de Karviyo s'allument l'un après l'autre, vers la vidéo :
 * le sens de lecture se voit sans qu'un mot ne l'explique. Sur téléphone, le
 * badge est au dessus de la vidéo, donc les chevrons pointent vers le bas.
 */
.bridge-chev {
	opacity: 0.28;
	animation: chev-pulse 1.8s var(--ease-fluid) infinite;
}
.bridge-chev-2 { animation-delay: 0.28s; }
@keyframes chev-pulse {
	0%, 55%, 100% { opacity: 0.28; }
	22% { opacity: 1; }
}
.hero-bridge-badge {
	animation: badge-glow 1.8s var(--ease-fluid) infinite;
}
@keyframes badge-glow {
	0%, 60%, 100% { box-shadow: 0 0 0 8px rgba(255, 210, 74, 0.05); }
	30% { box-shadow: 0 0 0 10px rgba(255, 210, 74, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
	.bridge-chev, .hero-bridge-badge { animation: none; }
	.bridge-chev { opacity: 1; }
}
@media (max-width: 899px) {
	/* Le badge passe au dessus de la vidéo : les chevrons pointent vers elle. */
	.hero-bridge-badge svg { transform: rotate(90deg); }
}
.hero-bridge-caption {
	/* Deux mots longs : on les laisse passer à la ligne plutôt que déborder
	   sur le collage, et la colonne reste étroite. */
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--kv-grey-dim);
	text-align: center;
	max-width: 112px;
}

.phone-stage {
	/* Une seule colonne centrée : l'étiquette, les réseaux et le téléphone
	   partagent le même axe, quelle que soit la largeur de l'écran. */
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 400px;
	margin-inline: auto;
	padding: var(--sp-500) 0;
}
.col-label {
	/* Deux mots, à la même hauteur au dessus de chaque colonne : le avant et
	   l'après se nomment sans phrase. */
	display: block;
	width: 100%;
	text-align: center;
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kv-grey-dim);
	margin-bottom: var(--sp-200);
}
.social-row {
	/* Les quatre réseaux en rangée juste au dessus du téléphone : on lit
	   « voici où cette vidéo part » avant même de voir la vidéo. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-300);
	margin-bottom: var(--sp-200);
}
.social-chip {
	/* Sans cercle ni fond : le pictogramme seul, posé dans le noir, discret. */
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 210, 74, 0.5);
	transition: color var(--dur-fast) var(--ease-fluid);
}
.social-chip:hover { color: var(--kv-gold); }
.social-chip svg { width: 28px; height: 28px; }

.phone {
	/* Sur téléphone, la vidéo prend la largeur du collage : elle est le produit,
	   elle ne doit jamais paraître plus petite que les photos de départ. */
	position: relative;
	width: min(340px, 100%);
	aspect-ratio: 220 / 452;
	height: auto;
	background: var(--kv-black);
	border: 1px solid var(--kv-border-strong);
	border-radius: 42px;
	padding: 12px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}
.phone-screen {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	overflow: hidden;
	background: var(--kv-surface);
}
.phone-screen video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.phone-notch {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 18px;
	background: var(--kv-black);
	border-radius: var(--r-full);
	z-index: 3;
}
.sound-toggle {
	position: absolute;
	right: var(--sp-100);
	bottom: var(--sp-100);
	z-index: 4;
	width: 40px;
	height: 40px;
	border-radius: var(--r-full);
	background: rgba(8, 11, 16, 0.72);
	border: 1px solid var(--kv-border-strong);
	color: var(--kv-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color var(--dur-fast) var(--ease-fluid), border-color var(--dur-fast) var(--ease-fluid);
}
/*
 * Le son est coupé par défaut (sinon aucun navigateur ne lancerait la vidéo).
 * Un halo doré s'échappe donc du bouton toutes les trois secondes et demie :
 * assez discret pour ne pas parasiter la vidéo, assez visible pour qu'on
 * comprenne qu'il y a quelque chose à activer. Dès que le son est allumé, le
 * halo s'arrête : il a fait son travail.
 */
.sound-toggle::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: var(--r-full);
	border: 1px solid var(--kv-gold);
	opacity: 0;
	pointer-events: none;
	animation: sound-ring 3.5s var(--ease-fluid) infinite;
}
@keyframes sound-ring {
	0% { transform: scale(1); opacity: 0; }
	12% { transform: scale(1.08); opacity: 0.55; }
	55% { transform: scale(1.7); opacity: 0.12; }
	70%, 100% { transform: scale(1.85); opacity: 0; }
}
.sound-toggle.is-on::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.sound-toggle::after { animation: none; }
}
.sound-toggle:hover { border-color: var(--kv-gold); }
.sound-toggle:active { transform: scale(0.94); }
.sound-toggle svg { width: 18px; height: 18px; }
.sound-toggle .icon-on { display: none; }
.sound-toggle.is-on .icon-off { display: none; }
.sound-toggle.is-on .icon-on { display: block; }

@media (min-width: 900px) {
	/* Le hero respire moins haut sur un portable : le avant / après doit
	   apparaître sans avoir à défiler, c'est lui qui vend la page. */
	.hero { padding-top: var(--sp-500); padding-bottom: var(--sp-700); }
	.hero-copy { margin-bottom: var(--sp-500); }
	/* 760 px et non 680 : à 48 px, les deux lignes voulues tiennent, sinon la
	   coupure du navigateur laisse « image » seul sur une quatrième ligne. */
	.hero-title { font-size: var(--fs-5xl); max-width: 760px; }
	.hero-showcase {
		grid-template-columns: 1fr auto 1fr;
		gap: var(--sp-400);
		/* Haut aligné : c'est ce qui met les deux étiquettes sur la même ligne,
		   quelle que soit la hauteur du collage et du téléphone. */
		align-items: start;
	}
	.phone { width: 300px; height: 616px; aspect-ratio: auto; }
	.hero-bridge { padding-block: var(--sp-500); }
	.hero-bridge-line { min-height: 40px; }
	/* Collage et téléphone plus grands sur bureau : c'est le cœur de la
	   démonstration, il doit se lire d'un coup d'œil. */
	.collage { height: 750px; max-width: 500px; }
	.collage-photo { width: 180px; height: 135px; }
	/* Un tas de tirages, pas cinq images posées au hasard : chaque photo en
	   recouvre une autre, à l'horizontale comme à la verticale. */
	.collage-photo:nth-of-type(1) { top: 296px; left: 4px; }
	.collage-photo:nth-of-type(2) { top: 268px; left: 146px; }
	.collage-photo:nth-of-type(3) { top: 316px; left: 286px; }
	.collage-photo:nth-of-type(4) { top: 392px; left: 66px; }
	.collage-photo:nth-of-type(5) { top: 418px; left: 214px; }
}

/*
 * Le trait qui ferme le hero : dans la largeur du contenu et fondu aux deux
 * bouts, plutôt qu'une bordure de section d'un bord à l'autre de l'écran.
 */
.hero-rule {
	height: 1px;
	border: 0;
	margin: 0 0 var(--sp-700);
	background: linear-gradient(90deg, transparent, var(--kv-border-strong) 18%, var(--kv-border-strong) 82%, transparent);
}

/* ---------- Problème / solution ---------- */
.problem {
	padding-block: var(--sp-800);
}
.problem-grid {
	display: grid;
	gap: var(--sp-500);
}
.problem-card {
	background: var(--kv-surface);
	border: 1px solid var(--kv-border);
	border-radius: var(--r-2xl);
	padding: var(--sp-400);
	display: flex;
	flex-direction: column;
	gap: var(--sp-200);
}
.problem-card h3 { font-size: var(--fs-xl); }
.problem-card p { color: var(--kv-grey); }
.problem-card.is-solution { border-color: var(--kv-gold); background: linear-gradient(180deg, rgba(255, 210, 74, 0.08), transparent); }
@media (min-width: 760px) {
	.problem-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Révélation du slogan ---------- */
.tagline {
	padding-block: var(--sp-900);
	text-align: center;
}
.tagline-text {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	line-height: 1.3;
	max-width: 780px;
	margin-inline: auto;
}
.tagline-text .word {
	color: rgba(245, 247, 250, 0.28);
	transition: color var(--dur-reveal) var(--ease-fluid);
}
.tagline-text .word.is-active { color: var(--kv-white); }
.tagline-text .word.is-gold.is-active { color: var(--kv-gold); }
@media (min-width: 760px) {
	.tagline-text { font-size: var(--fs-5xl); }
}

/* ---------- Bénéfices ---------- */
.benefits { padding-block: var(--sp-800); }
.benefits-grid {
	display: grid;
	gap: var(--sp-300);
	grid-template-columns: 1fr;
}
.benefit-card {
	background: var(--kv-surface);
	border: 1px solid var(--kv-border);
	border-radius: var(--r-2xl);
	padding: var(--sp-400);
	display: flex;
	flex-direction: column;
	gap: var(--sp-200);
	transition: border-color var(--dur-fast) var(--ease-fluid), transform var(--dur-fast) var(--ease-fluid);
}
.benefit-card:hover { border-color: var(--kv-gold); transform: translateY(-4px); }
.benefit-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--r-lg);
	background: var(--kv-elevated);
	border: 1px solid var(--kv-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kv-gold);
}
.benefit-icon svg { width: 20px; height: 20px; }
.benefit-card h3 { font-size: var(--fs-lg); }
.benefit-card p { color: var(--kv-grey); font-size: var(--fs-sm); }
@media (min-width: 640px) {
	.benefits-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.benefits-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Comment ça marche ---------- */
.steps { padding-block: var(--sp-800); border-top: 1px solid var(--kv-border); }
.steps-grid {
	display: grid;
	gap: var(--sp-400);
	grid-template-columns: 1fr;
	counter-reset: step;
}
.step-card {
	/* Le numéro dans le flux, et non posé en absolu : en absolu il recouvrait
	   le titre dès que celui ci passait sur deux lignes. */
	display: flex;
	flex-direction: column;
	gap: var(--sp-100);
	background: var(--kv-surface);
	border: 1px solid var(--kv-border);
	border-radius: var(--r-2xl);
	padding: var(--sp-400);
}
.step-number {
	width: 36px;
	height: 36px;
	margin-bottom: var(--sp-100);
	border-radius: var(--r-full);
	background: var(--kv-gold);
	color: var(--kv-text-on-accent);
	font-family: var(--font-display);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}
.step-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-100); }
.step-card p { color: var(--kv-grey); font-size: var(--fs-sm); }
@media (min-width: 900px) {
	.steps-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Tarifs ---------- */
.pricing { padding-block: var(--sp-800); border-top: 1px solid var(--kv-border); }
.pricing-trial {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-300);
	background: var(--kv-surface);
	border: 1px solid var(--kv-gold);
	border-radius: var(--r-2xl);
	padding: var(--sp-400);
	margin-bottom: var(--sp-500);
}
.pricing-trial h3 { font-size: var(--fs-xl); }
.pricing-trial p { color: var(--kv-grey); font-size: var(--fs-sm); margin-top: var(--sp-50); }
.pricing-grid {
	display: grid;
	gap: var(--sp-300);
	grid-template-columns: 1fr;
}
.price-card {
	background: var(--kv-surface);
	border: 1px solid var(--kv-border);
	border-radius: var(--r-2xl);
	padding: var(--sp-400);
	display: flex;
	flex-direction: column;
	gap: var(--sp-300);
	position: relative;
}
.price-card.is-recommended {
	border-color: var(--kv-gold);
	background: linear-gradient(180deg, rgba(255, 210, 74, 0.1), var(--kv-surface) 60%);
	transform: translateY(-8px);
	box-shadow: var(--kv-shadow-accent);
}
.price-badge {
	position: absolute;
	top: -14px;
	left: var(--sp-400);
	background: var(--kv-gold);
	color: var(--kv-text-on-accent);
	font-size: var(--fs-xs);
	font-weight: 700;
	padding: var(--sp-50) var(--sp-100);
	border-radius: var(--r-full);
}
.price-card h3 { font-size: var(--fs-lg); }
.price-amount { font-family: var(--font-display); font-size: var(--fs-3xl); font-variant-numeric: tabular-nums; }
.price-amount span { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--kv-grey); font-weight: 500; }
.price-card ul { display: flex; flex-direction: column; gap: var(--sp-100); font-size: var(--fs-sm); color: var(--kv-grey); }
.price-card li { display: flex; gap: var(--sp-75); align-items: flex-start; }
.price-card li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--kv-gold); }
.pricing-note { text-align: center; color: var(--kv-grey-dim); font-size: var(--fs-sm); margin-top: var(--sp-400); }
@media (min-width: 700px) {
	.pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
	.pricing-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- FAQ ---------- */
.faq { padding-block: var(--sp-800); border-top: 1px solid var(--kv-border); }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-200); max-width: var(--container-narrow); }
.faq-item {
	background: var(--kv-surface);
	border: 1px solid var(--kv-border);
	border-radius: var(--r-xl);
	overflow: hidden;
}
.faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-200);
	padding: var(--sp-300);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-base);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--kv-gold);
	transition: transform var(--dur-fast) var(--ease-fluid);
}
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item summary:hover { color: var(--kv-gold); }
.faq-answer { padding: 0 var(--sp-300) var(--sp-300); color: var(--kv-grey); font-size: var(--fs-sm); }

/* ---------- Dernier appel ---------- */
.final-cta {
	padding-block: var(--sp-800);
	text-align: center;
	border-top: 1px solid var(--kv-border);
}
.final-cta .section-title { margin-inline: auto; }
.final-cta-actions { display: flex; flex-direction: column; align-items: center; gap: var(--sp-100); margin-top: var(--sp-400); }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--kv-border); padding-block: var(--sp-500); }
.footer-grid {
	display: flex;
	flex-direction: column;
	gap: var(--sp-300);
	align-items: center;
	text-align: center;
}
.footer-logo svg { height: 22px; width: auto; }
.footer-links { display: flex; gap: var(--sp-300); flex-wrap: wrap; justify-content: center; }
.footer-links a { font-size: var(--fs-sm); color: var(--kv-grey); text-decoration: none; }
.footer-links a:hover { color: var(--kv-gold); }
.footer-meta { font-size: var(--fs-xs); color: var(--kv-grey-dim); }
@media (min-width: 760px) {
	.footer-grid { flex-direction: row; justify-content: space-between; text-align: left; }
}

/*
 * Les trois étapes apparaissent dans l'ordre, jamais ensemble : la carte 2
 * suit la 1 de 120 ms, la 3 suit la 2 d'autant, et le numéro arrive juste
 * après sa carte avec un petit rebond. L'ordre de lecture se voit avant même
 * d'avoir lu les titres.
 */
.has-js .steps-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
.has-js .steps-grid .reveal:nth-child(3) { transition-delay: 0.24s; }
.has-js .step-card .step-number {
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.35s var(--ease-fluid),
		transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.has-js .step-card.is-visible .step-number {
	opacity: 1;
	transform: scale(1);
	transition-delay: 0.22s;
}
.has-js .steps-grid .reveal:nth-child(2).is-visible .step-number { transition-delay: 0.34s; }
.has-js .steps-grid .reveal:nth-child(3).is-visible .step-number { transition-delay: 0.46s; }

/* ---------- Apparitions au défilement (progressive enhancement) ---------- */
.has-js .reveal {
	opacity: 0;
	transform: translateY(64px);
	filter: blur(6px);
	transition: opacity var(--dur-reveal) var(--ease-fluid),
		transform var(--dur-reveal) var(--ease-fluid),
		filter var(--dur-reveal) var(--ease-fluid);
}
.has-js .reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
	.has-js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
	.has-js .step-card .step-number { opacity: 1; transform: none; transition: none; }
	.tagline-text .word { transition: none; }
}

/* ---------- Pages légales ---------- */
.legal-main { padding-block: var(--sp-700); }
.legal-notice {
	background: rgba(255, 210, 74, 0.12);
	border: 1px solid var(--kv-gold);
	color: var(--kv-gold);
	border-radius: var(--r-lg);
	padding: var(--sp-200) var(--sp-300);
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-500);
}
.legal-body { max-width: var(--container-narrow); display: flex; flex-direction: column; gap: var(--sp-400); }
.legal-body h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-100); }
.legal-body h2 { font-size: var(--fs-xl); }
.legal-body p, .legal-body li { color: var(--kv-grey); }
.legal-body ul { display: flex; flex-direction: column; gap: var(--sp-100); padding-left: var(--sp-300); list-style: disc; }
.legal-body .fill { color: var(--kv-gold); font-weight: 600; }
.legal-back { margin-top: var(--sp-500); display: inline-block; }

/* ---------- 404 ---------- */
.error-main {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--sp-300);
	padding-block: var(--sp-800);
}
.error-code {
	font-family: var(--font-display);
	font-size: var(--fs-7xl);
	color: var(--kv-gold);
}