/**
 * Landing convoi — histoire au défilement (téléphone au centre, fond sombre).
 *
 * Par défaut (sans JS ou animations réduites) : une suite d'étapes lisible, le
 * téléphone montrant la carte. Avec `.is-enhanced` (posé par convoy-story.js) :
 * la scène est épinglée et `data-step` (0 à 5) choisit le texte, l'écran et la bulle.
 */

.fl-cv-story {
	--fl-cv-story-ink: var(--fl-color-ink, #020326);
	/* Même fond que le footer (--fl-footer-bg). */
	--fl-cv-story-bg: #05061a;
	/* Fond de la section qui suit (les avantages, en blanc). */
	--fl-cv-story-page-bg: #ffffff;
	--fl-cv-story-fade-h: clamp(280px, 55vh, 560px);
	--fl-cv-story-accent: var(--fl-color-accent, #29eb94);
	--fl-cv-story-muted: rgba(255, 255, 255, 0.62);
	--fl-cv-story-device-h: min(68vh, 620px);
	--fl-cv-story-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	color: #fff;
	background: var(--fl-cv-story-bg);
	isolation: isolate;
}

.fl-cv-story .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Fondu vers la suite de la page ---------- */

/* Du fond sombre au gris clair de la page, sur une courbe douce (OKLab, sans paliers). */
.fl-cv-story__fade {
	position: relative;
	z-index: 0;
	height: var(--fl-cv-story-fade-h);
	background: linear-gradient(
		0deg,
		var(--fl-cv-story-page-bg) 0%,
		color-mix(in oklab, var(--fl-cv-story-page-bg) 92%, var(--fl-cv-story-bg)) 14%,
		color-mix(in oklab, var(--fl-cv-story-page-bg) 72%, var(--fl-cv-story-bg)) 32%,
		color-mix(in oklab, var(--fl-cv-story-page-bg) 44%, var(--fl-cv-story-bg)) 52%,
		color-mix(in oklab, var(--fl-cv-story-page-bg) 18%, var(--fl-cv-story-bg)) 74%,
		color-mix(in oklab, var(--fl-cv-story-page-bg) 5%, var(--fl-cv-story-bg)) 90%,
		var(--fl-cv-story-bg) 100%
	);
}

/* ---------- Routes du hero prolongées ---------- */

/* Elles reprennent au bas du hero, puis s'éclairent vers le téléphone. */
.fl-cv-story__roads {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}

/*
 * Points du convoi prolongés du hero jusqu'au téléphone (convoy-story.js) :
 * ils remplacent ceux du hero, qui s'arrêtaient à son bas.
 */
.fl-convoy-landing.has-story-convoys .fl-convoy-landing__hero-loc--c1,
.fl-convoy-landing.has-story-convoys .fl-convoy-landing__hero-loc--c2,
.fl-convoy-landing.has-story-convoys .fl-convoy-landing__hero-loc--c3,
.fl-convoy-landing.has-story-convoys .fl-convoy-landing__hero-loc-pulse--c1,
.fl-convoy-landing.has-story-convoys .fl-convoy-landing__hero-loc-pulse--c2,
.fl-convoy-landing.has-story-convoys .fl-convoy-landing__hero-loc-pulse--c3 {
	visibility: hidden;
}

.fl-cv-story__convoys {
	position: absolute;
	z-index: 1;
	left: 0;
	width: 100%;
	overflow: visible;
	pointer-events: none;
}

.fl-cv-story__loc {
	offset-rotate: 0deg;
	stroke: #ffffff;
	stroke-width: 1.5;
}

.fl-cv-story__loc--lead {
	fill: #007aff;
	filter: drop-shadow(0 0 6px rgba(0, 122, 255, 0.7));
}

.fl-cv-story__loc--f1 { fill: rgba(0, 122, 255, 0.9); }
.fl-cv-story__loc--f2 { fill: rgba(0, 122, 255, 0.78); }
.fl-cv-story__loc--f3 { fill: rgba(0, 122, 255, 0.66); }
.fl-cv-story__loc--f4 { fill: rgba(0, 122, 255, 0.54); }
.fl-cv-story__loc--f5 { fill: rgba(0, 122, 255, 0.42); }

.fl-cv-story__loc--pulse {
	fill: none;
	stroke: rgba(0, 122, 255, 0.6);
	transform-box: fill-box;
	transform-origin: center;
}

.fl-cv-story__road-bed {
	fill: none;
	stroke-width: 22;
	stroke-linecap: round;
}

.fl-cv-story__road-line {
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 2 10;
}

/*
 * Défilement des pointillés, lancé par convoy-story.js sur les routes du hero
 * et sur leur prolongement : deux motifs (24 unités) par cycle, départ propre
 * à chaque route pour rester en phase au raccord.
 */
@keyframes fl-cv-story-road-flow {
	from {
		stroke-dashoffset: var(--fl-cv-road-from, 0);
	}

	to {
		stroke-dashoffset: var(--fl-cv-road-to, -24);
	}
}

/* Empilement : fondu, puis routes, puis scène. */
.fl-cv-story__stage {
	z-index: 2;
}

/* ---------- Scène ---------- */

.fl-cv-story__stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: var(--fl-space-4xl, 48px);
	align-items: center;
	/*
	 * Pleine largeur (le motif de routes du fond la couvre), contenu limité à
	 * 1180 px par les marges. Pas d'overflow sur la section : dans Safari, il
	 * fait trembler la scène épinglée pendant le défilement.
	 */
	overflow: hidden;
	padding: 96px max(var(--fl-space-2xl, 24px), calc((100% - 1180px) / 2 + var(--fl-space-2xl, 24px)));
}

.fl-cv-story__glow {
	position: absolute;
	z-index: -1;
	inset: 0 max(0px, calc((100% - 1180px) / 2));
	pointer-events: none;
	background:
		radial-gradient(42% 46% at 50% 52%, rgba(41, 235, 148, 0.16), transparent 70%),
		radial-gradient(60% 60% at 50% 120%, rgba(41, 235, 148, 0.08), transparent 70%);
	/* Pas de bord net au bas de la scène, au-dessus du fondu. */
	-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
	transition: background 0.8s var(--fl-cv-story-ease);
}

/*
 * Motif de routes du hero, plus discret : sur toute la largeur de l'écran,
 * derrière la scène, il apparaît sous les routes qui viennent du hero.
 */
.fl-cv-story__backdrop {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, transparent 100%);
}

.fl-cv-story__backdrop path {
	fill: none;
	stroke-linecap: round;
}

.fl-cv-story__backdrop-bed {
	stroke: rgba(255, 255, 255, 0.03);
	stroke-width: 26;
}

.fl-cv-story__backdrop-bed--minor {
	stroke: rgba(255, 255, 255, 0.022);
	stroke-width: 18;
}

.fl-cv-story__backdrop-line {
	stroke: rgba(41, 235, 148, 0.18);
	stroke-width: 1.5;
	stroke-dasharray: 2 10;
}

.fl-cv-story__backdrop-stop {
	fill: var(--fl-cv-story-bg);
	stroke: rgba(41, 235, 148, 0.3);
	stroke-width: 1.5;
}

/* ---------- Textes ---------- */

.fl-cv-story__copies {
	display: grid;
	gap: var(--fl-space-3xl, 32px);
}

.fl-cv-story__eyebrow {
	margin: 0 0 var(--fl-space-md, 12px);
	color: var(--fl-cv-story-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fl-cv-story__title {
	margin: 0 0 var(--fl-space-lg, 16px);
	color: #fff;
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.fl-cv-story__text {
	max-width: 380px;
	margin: 0;
	color: var(--fl-cv-story-muted);
	font-size: 17px;
	line-height: 1.55;
}

/* ---------- Téléphone ---------- */

.fl-cv-story__device-wrap {
	position: relative;
	grid-column: 2;
	grid-row: 1;
}

.fl-cv-story__copies {
	grid-column: 1;
	grid-row: 1;
}

.fl-cv-story__device {
	/* Cadre Apple affiché tel quel : ni transformation, ni ombre ajoutée. */
	position: relative;
	width: calc(var(--fl-cv-story-device-h) * 675 / 1380);
	height: var(--fl-cv-story-device-h);
}

.fl-cv-story__bezel {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	pointer-events: none;
}

/* Zone d'écran du cadre (1206 × 2622 px dans l'image Apple de 1350 × 2760). */
.fl-cv-story__screens {
	position: absolute;
	top: 2.5%;
	left: 5.333%;
	width: 89.333%;
	height: 95%;
	overflow: hidden;
	border-radius: 15.8% / 7.3%;
	background: #f4f5f8;
}

.fl-cv-story__statusbar {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 5.8%;
	padding: 0 9% 0 11%;
	font-size: calc(var(--fl-cv-story-device-h) * 0.019); /* 17 pt sur 874 pt, comme sur un iPhone. */
	font-weight: 600;
	color: var(--fl-cv-story-ink);
	transition: color 0.4s ease;
}

.fl-cv-story__statusbar svg {
	width: 15%;
	height: auto;
	fill: currentColor;
}

.fl-cv-story__screen {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 56px 18px 18px;
	color: var(--fl-cv-story-ink);
	background: #f4f5f8;
	opacity: 0;
	transform: translateX(100%);
	transition:
		transform 0.7s var(--fl-cv-story-ease),
		opacity 0.5s ease;
}

.fl-cv-story__app-title {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 700;
}

/*
 * Billet : reprend le passe Apple Wallet de Forlaps (fond #020326, texte blanc,
 * libellés verts, QR code sur fond blanc), avec les encoches d'un billet.
 */
.fl-cv-story__screen--ticket {
	padding-top: calc(var(--fl-cv-story-device-h) * 0.1);
	font-size: calc(var(--fl-cv-story-device-h) * 0.022);
}

.fl-cv-story__screen--ticket .fl-cv-story__app-title {
	margin-bottom: 0.7em;
	font-size: 1.6em;
}

.fl-cv-story__pass {
	--fl-cv-pass-bg: #020326;
	--fl-cv-pass-notch: 0.9em;
	position: relative;
	display: grid;
	gap: 0.75em;
	padding: 0.9em 1.1em 1em;
	border-radius: 1em;
	color: #ffffff;
	background: var(--fl-cv-pass-bg);
	box-shadow: 0 0.6em 1.6em rgba(2, 3, 38, 0.22);
}

.fl-cv-story__pass-head,
.fl-cv-story__pass-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.8em;
}

.fl-cv-story__pass-head {
	align-items: center;
}

.fl-cv-story__pass-logo {
	display: block;
	width: auto;
	height: 1.15em;
}

.fl-cv-story__pass-field {
	display: grid;
	gap: 0.15em;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.fl-cv-story__pass-field--end {
	text-align: right;
}

.fl-cv-story__pass-field small {
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #29eb94;
}

.fl-cv-story__pass-strip {
	margin: 0 -1.1em;
	padding: 0.9em 1.1em;
	background:
		radial-gradient(120% 140% at 85% 0%, rgba(41, 235, 148, 0.28), transparent 60%),
		linear-gradient(135deg, #0d1240, #1c2160);
}

.fl-cv-story__pass-strip strong {
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.1;
	white-space: normal;
}

.fl-cv-story__pass-code {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.5em;
	margin-top: 0.2em;
	padding-top: 0.9em;
	border-top: 1px dashed rgba(255, 255, 255, 0.22);
}

/* Encoches du billet, au niveau des pointillés (couleur du fond de l'écran). */
.fl-cv-story__pass-code::before,
.fl-cv-story__pass-code::after {
	content: '';
	position: absolute;
	top: calc(var(--fl-cv-pass-notch) / -2);
	width: var(--fl-cv-pass-notch);
	height: var(--fl-cv-pass-notch);
	border-radius: 50%;
	background: #f4f5f8;
}

.fl-cv-story__pass-code::before {
	left: calc(-1.1em - var(--fl-cv-pass-notch) / 2);
}

.fl-cv-story__pass-code::after {
	right: calc(-1.1em - var(--fl-cv-pass-notch) / 2);
}

.fl-cv-story__pass-code svg {
	display: block;
	width: 44%;
	height: auto;
	border-radius: 0.5em;
}

.fl-cv-story__pass-code small {
	font-size: 0.75em;
	color: rgba(255, 255, 255, 0.6);
}

.fl-cv-story__wallet-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	align-self: center;
	margin-top: 1.1em;
	padding: 0 1.1em;
	height: 2.6em;
	border-radius: 999px;
	font-size: 1em;
	font-weight: 600;
	color: #ffffff;
	background: #000000;
}

.fl-cv-story__wallet-btn svg {
	width: 1.1em;
	height: 1.1em;
}

/* Carte — fond Mapbox (style streets du site), trajet et véhicules par-dessus. */
.fl-cv-story__screen--map {
	padding: 0;
	background: #eef0e6;
}

.fl-cv-story__map-image,
.fl-cv-story__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fl-cv-story__map-image {
	object-fit: cover;
}

/* Mention Mapbox juste au-dessus de la fiche du convoi. */
.fl-cv-story__map-credit {
	position: absolute;
	right: 4px;
	bottom: calc(100% + 4px);
	font-size: 6px;
	font-weight: 400;
	color: rgba(5, 6, 26, 0.55);
}

/* Arrêt proposé sur le tracé : épingle bleu nuit et étiquette. */
.fl-cv-story__map-stop {
	opacity: 0;
	transform: translateY(-8px) scale(0.6);
	transform-box: fill-box;
	transform-origin: 12% 100%;
	transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fl-cv-story__map-stop-pin {
	fill: #020326;
	stroke: #ffffff;
	stroke-width: 1.6;
}

.fl-cv-story__map-stop-icon {
	color: var(--fl-cv-story-accent);
}

.fl-cv-story__map-stop-label {
	fill: #ffffff;
	stroke: rgba(5, 6, 26, 0.12);
	stroke-width: 0.8;
}

.fl-cv-story__map-stop text {
	fill: #05061a;
	font-size: 8.4px;
	font-weight: 700;
}

/*
 * Encart d'une demande dans le convoi, sur le gabarit de l'app (bandeau plein
 * dans la couleur du signalement, icône, titre, distance et filet du temps restant).
 */
.fl-cv-story__alert {
	position: absolute;
	z-index: 2;
	top: calc(var(--fl-cv-story-device-h) * 0.068);
	right: 0.7em;
	left: 0.7em;
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.7em 0.8em 0.85em;
	overflow: hidden;
	border-radius: 0.9em;
	background: #020326;
	color: #ffffff;
	font-size: calc(var(--fl-cv-story-device-h) * 0.02);
	box-shadow: 0 4px 14px rgba(5, 6, 26, 0.25);
	opacity: 0;
	transform: translateY(-0.8em) scale(0.96);
	transition: opacity 0.3s ease, transform 0.35s ease;
}

.fl-cv-story__alert-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 0.6em;
	background: rgba(255, 255, 255, 0.16);
	color: var(--fl-cv-story-accent);
}

.fl-cv-story__alert-icon svg {
	width: 1.25em;
	height: 1.25em;
}

.fl-cv-story__alert-text {
	display: grid;
	flex: 1;
	min-width: 0;
	line-height: 1.25;
}

.fl-cv-story__alert-text strong {
	font-size: 1.05em;
}

.fl-cv-story__alert-text span {
	overflow: hidden;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.82em;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fl-cv-story__alert-distance {
	flex: none;
	font-size: 1.2em;
	font-weight: 800;
}

.fl-cv-story__alert-timer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.25);
}

.fl-cv-story__alert-timer span {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.9);
	transform-origin: left center;
}

/* Pendant la route (étape 3) : l'arrêt apparaît, puis l'encart l'annonce. */
.fl-cv-story.is-enhanced[data-step="3"] .fl-cv-story__map-stop {
	opacity: 1;
	transform: none;
	transition-delay: 0.5s;
}

.fl-cv-story.is-enhanced[data-step="3"] .fl-cv-story__alert {
	opacity: 1;
	transform: none;
	transition-delay: 0.9s;
}

.fl-cv-story.is-enhanced[data-step="3"] .fl-cv-story__alert-timer span {
	animation: fl-cv-story-alert-timer 8s linear 0.9s forwards;
}

@keyframes fl-cv-story-alert-timer {
	to {
		transform: scaleX(0.15);
	}
}

.fl-cv-story__map-route-bed {
	fill: none;
	stroke: #ffffff;
	stroke-width: 7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fl-cv-story__map-route {
	fill: none;
	stroke: #05061a;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fl-cv-story__map-flag {
	fill: #ffffff;
	stroke: #05061a;
	stroke-width: 2.5;
}

.fl-cv-story__map-flag--end {
	fill: #05061a;
	stroke: #ffffff;
}

/* Véhicules : points de localisation bleus, comme dans le hero. */
.fl-cv-story__car-dot {
	fill: #007aff;
	stroke: #ffffff;
	stroke-width: 2;
}

.fl-cv-story__car-halo {
	fill: rgba(0, 122, 255, 0.2);
}

.fl-cv-story__car--lead .fl-cv-story__car-dot {
	stroke-width: 2.5;
}

.fl-cv-story__car--lead .fl-cv-story__car-halo {
	fill: rgba(0, 122, 255, 0.28);
}

.fl-cv-story__sheet {
	position: absolute;
	right: 0.75em;
	bottom: 0.75em;
	left: 0.75em;
	display: grid;
	gap: 0.5em;
	padding: 0.75em 1.1em 1.1em;
	border-radius: 1.6em;
	background: #fff;
	/* Proportionnel au téléphone, comme les autres écrans. */
	font-size: calc(var(--fl-cv-story-device-h) * 0.02);
	box-shadow: 0 -4px 24px rgba(5, 6, 26, 0.14);
}

.fl-cv-story__sheet-handle {
	justify-self: center;
	width: 2.8em;
	height: 0.32em;
	border-radius: 999px;
	background: #dcdde5;
}

.fl-cv-story__sheet strong {
	font-size: 1.2em;
}

.fl-cv-story__sheet-meta {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: #6b6e84;
}

.fl-cv-story__sheet .fl-cv-story__avatars span {
	width: 3.6em;
	height: 3.6em;
	margin-right: -0.8em;
	border-width: 0.25em;
	font-size: 0.78em;
}

.fl-cv-story__avatars {
	display: flex;
	margin-top: 2px;
}

.fl-cv-story__avatars span,
.fl-cv-story__joined-avatar {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-right: -6px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #e8e9f2;
	color: var(--fl-cv-story-ink);
	font-size: 9px;
	font-weight: 700;
}

.fl-cv-story__live {
	position: relative;
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fl-cv-story-accent);
	box-shadow: 0 0 0 0 rgba(41, 235, 148, 0.6);
	animation: fl-cv-story-live 1.8s ease-out infinite;
}

@keyframes fl-cv-story-live {
	to {
		box-shadow: 0 0 0 8px rgba(41, 235, 148, 0);
	}
}

/*
 * Session libre : salle d'attente de l'app (fond #f7f7f7, cartes blanches
 * bordées #eee, code en pointillés, bouton bleu nuit). Tailles en em,
 * proportionnelles au téléphone.
 */
.fl-cv-story__screen--code > * {
	flex: none;
}

.fl-cv-story__screen--code {
	gap: 0.6em;
	padding: calc(var(--fl-cv-story-device-h) * 0.08) 1.1em 1.3em;
	background: #f7f7f7;
	font-size: calc(var(--fl-cv-story-device-h) * 0.021);
}

.fl-cv-story__lobby-nav {
	position: relative;
	margin: 0 0 0.1em;
	font-size: 1.15em;
	font-weight: 700;
	text-align: center;
}

.fl-cv-story__lobby-nav svg {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1.2em;
	height: 1.2em;
	transform: translateY(-50%);
}

.fl-cv-story__lobby-card {
	display: grid;
	padding: 0.85em 0.95em;
	border: 1px solid #eeeeee;
	border-radius: 1.1em;
	background: #ffffff;
}

.fl-cv-story__lobby-hero {
	gap: 0.2em;
}

.fl-cv-story__lobby-state {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 0.4em;
	margin-bottom: 0.3em;
	padding: 0.25em 0.65em;
	border-radius: 999px;
	background: rgba(245, 180, 0, 0.14);
	color: #a6740b;
	font-size: 0.8em;
	font-weight: 700;
}

.fl-cv-story__lobby-state::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #f5b400;
}

.fl-cv-story__lobby-title {
	margin-bottom: 0.3em;
	font-size: 1.15em;
}

.fl-cv-story__lobby-label {
	color: #747688;
	font-size: 0.85em;
	font-weight: 600;
}

.fl-cv-story__lobby-countdown {
	font-size: 1.9em;
	font-weight: 800;
	line-height: 1.1;
}

.fl-cv-story__lobby-ready {
	display: flex;
	justify-content: space-between;
	margin-top: 0.45em;
	color: #747688;
	font-size: 0.85em;
	font-weight: 600;
}

.fl-cv-story__lobby-ready strong {
	color: var(--fl-cv-story-ink);
}

.fl-cv-story__lobby-progress {
	height: 0.5em;
	margin-top: 0.35em;
	overflow: hidden;
	border-radius: 999px;
	background: #ececf1;
}

.fl-cv-story__lobby-progress span {
	display: block;
	width: 66.7%;
	height: 100%;
	border-radius: inherit;
	background: var(--fl-cv-story-accent);
	transition: width 0.6s ease;
}

.fl-cv-story__lobby-code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6em 0.95em;
	border: 1px dashed #b9bac6;
	border-radius: 1.1em;
	background: #ffffff;
}

.fl-cv-story__lobby-code small {
	display: block;
	color: #747688;
	font-size: 0.8em;
	font-weight: 600;
}

.fl-cv-story__lobby-code strong {
	font-size: 1.3em;
	letter-spacing: 0.2em;
}

.fl-cv-story__lobby-share {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.85em;
	font-weight: 700;
}

.fl-cv-story__lobby-share svg {
	width: 1.15em;
	height: 1.15em;
}

.fl-cv-story__lobby-members {
	padding-top: 0.6em;
	padding-bottom: 0.3em;
}

.fl-cv-story__lobby-members-head {
	display: flex;
	justify-content: space-between;
	margin: 0 0 0.2em;
	font-size: 0.95em;
}

.fl-cv-story__lobby-members-head span {
	font-weight: 700;
}

.fl-cv-story__lobby-member {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.4em 0;
}

.fl-cv-story__lobby-member + .fl-cv-story__lobby-member {
	border-top: 1px solid #ececf1;
}

.fl-cv-story__lobby-member .fl-cv-story__joined-avatar {
	width: 2.3em;
	height: 2.3em;
	margin: 0;
	border: 0;
	font-size: 0.75em;
}

.fl-cv-story__lobby-member-text {
	display: grid;
	flex: 1;
	min-width: 0;
	font-size: 0.9em;
	white-space: nowrap;
}

.fl-cv-story__lobby-member-text em {
	color: #747688;
	font-style: normal;
	font-weight: 500;
}

.fl-cv-story__lobby-status {
	display: grid;
	font-size: 0.85em;
	font-weight: 600;
}

.fl-cv-story__lobby-status > span {
	grid-area: 1 / 1;
	transition: opacity 0.3s ease;
}

.fl-cv-story__lobby-ok {
	color: #1f9d55;
}

.fl-cv-story__lobby-wait {
	color: #747688;
}

.fl-cv-story__lobby-member.is-joining .fl-cv-story__lobby-ok,
.fl-cv-story__lobby-after {
	opacity: 0;
}

/* Icône d'état : coche verte (prêt) ou horloge grise (en attente). */
.fl-cv-story__lobby-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	border: 2px solid #1f9d55;
	border-radius: 50%;
	background: no-repeat center / 70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.4 8.3 13.6 15 7' stroke='%231f9d55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition: border-color 0.3s ease, background-image 0.3s ease;
}

.fl-cv-story__lobby-member.is-joining .fl-cv-story__lobby-icon {
	border-color: #9a9cab;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 5v5l3 2' stroke='%239a9cab' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fl-cv-story__lobby-ready strong {
	display: grid;
}

.fl-cv-story__lobby-ready strong > span {
	grid-area: 1 / 1;
	transition: opacity 0.3s ease;
}

.fl-cv-story__lobby-ready > span {
	transition: opacity 0.3s ease;
}

/* Le dernier invité rejoint quand l'écran est affiché. */
.fl-cv-story.is-enhanced[data-step="4"] .fl-cv-story__lobby-member.is-joining .fl-cv-story__lobby-ok,
.fl-cv-story.is-enhanced[data-step="4"] .fl-cv-story__lobby-after {
	opacity: 1;
	transition-delay: 1.1s;
}

.fl-cv-story.is-enhanced[data-step="4"] .fl-cv-story__lobby-wait,
.fl-cv-story.is-enhanced[data-step="4"] .fl-cv-story__lobby-before {
	opacity: 0;
	transition-delay: 1.1s;
}

.fl-cv-story.is-enhanced[data-step="4"] .fl-cv-story__lobby-member.is-joining .fl-cv-story__lobby-icon {
	border-color: #1f9d55;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.4 8.3 13.6 15 7' stroke='%231f9d55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition-delay: 1.1s;
}

.fl-cv-story.is-enhanced[data-step="4"] .fl-cv-story__lobby-progress span {
	width: 100%;
	transition-delay: 1.1s;
}

.fl-cv-story__lobby-start {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	height: 3.2em;
	margin-top: auto;
	border-radius: 0.9em;
	background: #020326;
	color: #ffffff;
	font-size: 0.95em;
	font-weight: 700;
}

.fl-cv-story__lobby-start svg {
	width: 1.05em;
	height: 1.05em;
	fill: var(--fl-cv-story-accent);
}

/*
 * Fin de convoi : badge vert, trajet parcouru sur la carte (il se trace à
 * l'arrivée sur l'écran), bilan chiffré, équipage et partage.
 */
.fl-cv-story__screen--recap {
	gap: 0.55em;
	padding: calc(var(--fl-cv-story-device-h) * 0.09) 1.15em 1.3em;
	background: #f7f7f7;
	font-size: calc(var(--fl-cv-story-device-h) * 0.021);
}

.fl-cv-story__screen--recap > * {
	flex: none;
}

.fl-cv-story__recap-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.4em;
	margin: 0;
	padding: 0.3em 0.75em 0.3em 0.45em;
	border-radius: 999px;
	background: rgba(41, 235, 148, 0.18);
	color: #1f9d55;
	font-size: 0.85em;
	font-weight: 700;
}

.fl-cv-story__recap-badge svg {
	width: 1.3em;
	height: 1.3em;
	padding: 0.15em;
	border-radius: 50%;
	background: var(--fl-cv-story-accent);
	color: var(--fl-cv-story-ink);
}

.fl-cv-story__recap-title {
	margin: 0.2em 0 0;
	font-size: 1.6em;
	font-weight: 800;
	line-height: 1.15;
}

.fl-cv-story__recap-sub {
	margin: 0;
	color: #747688;
	font-size: 0.9em;
	font-weight: 500;
}

.fl-cv-story__screen--recap > .fl-cv-story__recap-body {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: 1.4fr 1fr;
	gap: 0.6em;
	min-height: 0;
	margin-top: 0.35em;
}

.fl-cv-story__recap-map {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	border: 1px solid #eeeeee;
	border-radius: 1.1em;
	background: #eef0e6;
}

.fl-cv-story__recap-trace {
	fill: none;
	stroke: #05061a;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Le trajet se dessine du départ à l'arrivée quand l'écran s'affiche. */
.fl-cv-story.is-enhanced .fl-cv-story__recap-trace {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.6s ease-in-out 0.35s;
}

.fl-cv-story.is-enhanced[data-step="5"] .fl-cv-story__recap-trace {
	stroke-dashoffset: 0;
}

.fl-cv-story__recap-stats {
	display: grid;
	grid-template-rows: repeat(4, 1fr);
	gap: 0.45em;
	margin: 0;
}

.fl-cv-story__recap-stats > div {
	display: grid;
	align-content: center;
	padding: 0.4em 0.65em;
	border: 1px solid #eeeeee;
	border-radius: 0.9em;
	background: #ffffff;
}

.fl-cv-story__recap-stats dt {
	color: #747688;
	font-size: 0.78em;
	font-weight: 600;
}

.fl-cv-story__recap-stats dd {
	margin: 0;
	font-size: 1.45em;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

.fl-cv-story__recap-stats small {
	font-size: 0.55em;
	font-weight: 700;
}

.fl-cv-story__recap-crew {
	display: flex;
	align-items: center;
	gap: 0.6em;
	color: #747688;
	font-size: 0.85em;
	font-weight: 500;
}

.fl-cv-story__recap-crew .fl-cv-story__avatars {
	flex: none;
	margin: 0;
	font-size: 1em;
}

.fl-cv-story__recap-crew .fl-cv-story__avatars span {
	width: 2.9em;
	height: 2.9em;
	margin-right: -0.7em;
	border-width: 0.18em;
	font-size: 0.75em;
}

.fl-cv-story__recap-crew > span:last-child {
	margin-left: 0.4em;
}

.fl-cv-story__recap-share {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	height: 3.2em;
	border-radius: 0.9em;
	background: #020326;
	color: #ffffff;
	font-size: 0.95em;
	font-weight: 700;
}

.fl-cv-story__recap-share svg {
	width: 1.15em;
	height: 1.15em;
	color: var(--fl-cv-story-accent);
}

/* ---------- Bulles ---------- */

.fl-cv-story__callout {
	position: absolute;
	z-index: 4;
	display: none;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: 260px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	background: rgba(20, 23, 60, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
	font-size: 13px;
}

.fl-cv-story__callout strong {
	display: block;
	color: #fff;
	font-size: 14px;
}

.fl-cv-story__callout small {
	display: block;
	color: var(--fl-cv-story-muted);
	font-size: 12px;
}

.fl-cv-story__callout-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.fl-cv-story__callout-icon--ok {
	background: var(--fl-cv-story-accent);
	color: var(--fl-cv-story-ink);
}

.fl-cv-story__callout-icon svg {
	width: 16px;
}

.fl-cv-story__callout-code {
	padding: 6px 10px;
	white-space: nowrap;
	border-radius: 10px;
	background: var(--fl-cv-story-accent);
	color: var(--fl-cv-story-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 700;
}

.fl-cv-story__callout--joined { top: 18%; left: calc(100% + 28px); }
.fl-cv-story__callout--count { top: 30%; left: calc(100% + 28px); }
.fl-cv-story__callout--feed { bottom: 24%; left: calc(100% + 28px); }
.fl-cv-story__callout--code { top: 40%; left: calc(100% + 28px); }

/* ---------- Progression et lien « Passer » ---------- */

.fl-cv-story__progress,
.fl-cv-story__skip {
	display: none;
}

/* ================================================================
   Repli : sans script ou animations réduites — l'écran carte.
   ================================================================ */

.fl-cv-story:not(.is-enhanced) [data-screen="map"] {
	opacity: 1;
	transform: none;
}

/* ================================================================
   Version animée (épinglée)
   ================================================================ */

/* Le fondu loge dans le padding bas : la scène se décroche avant lui. */
.fl-cv-story.is-enhanced {
	box-sizing: border-box;
	height: calc(var(--fl-cv-story-fade-h) + var(--fl-cv-story-steps) * 90vh + 100vh);
	/* svh : hauteur stable sur mobile, que la barre d'adresse soit dépliée ou non. */
	height: calc(var(--fl-cv-story-fade-h) + var(--fl-cv-story-steps) * 90svh + 100svh);
	padding-bottom: var(--fl-cv-story-fade-h);
}

.fl-cv-story.is-enhanced .fl-cv-story__fade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
}

.fl-cv-story.is-enhanced .fl-cv-story__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	padding-top: 72px;
	padding-bottom: 32px;
}

.fl-cv-story.is-enhanced .fl-cv-story__copies {
	position: relative;
	display: block;
	min-height: 260px;
}

.fl-cv-story.is-enhanced .fl-cv-story__copy {
	position: absolute;
	inset: 0 0 auto;
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.45s ease,
		transform 0.6s var(--fl-cv-story-ease);
	pointer-events: none;
}

.fl-cv-story.is-enhanced[data-step="0"] [data-story-step="0"],
.fl-cv-story.is-enhanced[data-step="1"] [data-story-step="1"],
.fl-cv-story.is-enhanced[data-step="2"] [data-story-step="2"],
.fl-cv-story.is-enhanced[data-step="3"] [data-story-step="3"],
.fl-cv-story.is-enhanced[data-step="4"] [data-story-step="4"],
.fl-cv-story.is-enhanced[data-step="5"] [data-story-step="5"] {
	opacity: 1;
	transform: none;
	transition-delay: 0.12s;
	pointer-events: auto;
}

/* Écrans : actif au centre, déjà vus partis à gauche. */
.fl-cv-story.is-enhanced[data-step="0"] [data-screen="ticket"],
.fl-cv-story.is-enhanced[data-step="1"] [data-screen="ticket"],
.fl-cv-story.is-enhanced[data-step="2"] [data-screen="map"],
.fl-cv-story.is-enhanced[data-step="3"] [data-screen="map"],
.fl-cv-story.is-enhanced[data-step="4"] [data-screen="code"],
.fl-cv-story.is-enhanced[data-step="5"] [data-screen="recap"] {
	opacity: 1;
	transform: none;
}

.fl-cv-story.is-enhanced[data-step="2"] [data-screen="ticket"],
.fl-cv-story.is-enhanced[data-step="3"] [data-screen="ticket"],
.fl-cv-story.is-enhanced[data-step="4"] [data-screen="ticket"],
.fl-cv-story.is-enhanced[data-step="4"] [data-screen="map"],
.fl-cv-story.is-enhanced[data-step="5"] [data-screen="ticket"],
.fl-cv-story.is-enhanced[data-step="5"] [data-screen="map"],
.fl-cv-story.is-enhanced[data-step="5"] [data-screen="code"] {
	transform: translateX(-35%);
}

/* Bulles : une par étape, qui sort du téléphone. */
.fl-cv-story.is-enhanced .fl-cv-story__callout {
	display: flex;
	opacity: 0;
	transform: translateY(14px) scale(0.92);
	transition:
		opacity 0.4s ease,
		transform 0.6s var(--fl-cv-story-ease);
}

.fl-cv-story.is-enhanced[data-step="1"] [data-callout="1"],
.fl-cv-story.is-enhanced[data-step="2"] [data-callout="2"],
.fl-cv-story.is-enhanced[data-step="3"] [data-callout="3"],
.fl-cv-story.is-enhanced[data-step="4"] [data-callout="4"] {
	opacity: 1;
	transform: none;
	transition-delay: 0.35s;
}

/* Ambiance : vert sur la route, lueur chaude à l'arrivée. */
.fl-cv-story.is-enhanced[data-step="5"] .fl-cv-story__glow {
	background:
		radial-gradient(42% 46% at 50% 52%, rgba(255, 176, 92, 0.18), transparent 70%),
		radial-gradient(60% 60% at 50% 120%, rgba(255, 120, 80, 0.1), transparent 70%);
}

.fl-cv-story.is-enhanced .fl-cv-story__progress {
	position: absolute;
	top: 50%;
	right: max(var(--fl-space-2xl, 24px), calc((100% - 1180px) / 2 + var(--fl-space-2xl, 24px)));
	display: grid;
	gap: 10px;
	transform: translateY(-50%);
}

.fl-cv-story__progress-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	cursor: pointer;
	transition: height 0.3s ease, background 0.3s ease;
}

.fl-cv-story__progress-dot.is-active {
	height: 24px;
	background: var(--fl-cv-story-accent);
}

.fl-cv-story.is-enhanced .fl-cv-story__skip {
	position: absolute;
	right: max(var(--fl-space-2xl, 24px), calc((100% - 1180px) / 2 + var(--fl-space-2xl, 24px)));
	bottom: 24px;
	display: inline-block;
	color: var(--fl-cv-story-muted);
	font-size: 13px;
	text-decoration: none;
}

.fl-cv-story.is-enhanced .fl-cv-story__skip:hover,
.fl-cv-story.is-enhanced .fl-cv-story__skip:focus-visible {
	color: #fff;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
	.fl-cv-story {
		/* Le téléphone prend toute la place laissée par le texte (texte resserré). */
		--fl-cv-story-device-h: clamp(400px, 100svh - 310px, 560px);
	}

	/* Allègement mobile : pas de pointillés animés sur un grand calque masqué. */
	.fl-cv-story__road-line {
		animation: none;
	}

	.fl-cv-story__stage {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fl-space-2xl, 24px);
		padding: 64px var(--fl-space-lg, 16px);
	}

	.fl-cv-story__copies,
	.fl-cv-story__device-wrap {
		grid-column: 1;
	}

	.fl-cv-story__device-wrap {
		grid-row: 2;
		justify-self: center;
	}

	.fl-cv-story__title {
		font-size: clamp(22px, 6vw, 28px);
	}

	.fl-cv-story__text {
		font-size: 14px;
		line-height: 1.45;
	}

	/* Sous la barre de navigation (fixe, ~73 px) : le texte ne doit pas passer dessous. */
	.fl-cv-story.is-enhanced .fl-cv-story__stage {
		align-content: start;
		gap: 12px;
		padding-top: 108px;
		padding-bottom: 0;
	}

	.fl-cv-story.is-enhanced .fl-cv-story__copies {
		/* Surtitre, titre sur deux lignes et texte : rien ne déborde sur le téléphone. */
		min-height: 168px;
		text-align: center;
	}

	.fl-cv-story.is-enhanced .fl-cv-story__text {
		margin: 0 auto;
	}

	/* Pas de place à côté du téléphone, et Apple interdit de les poser dessus : le texte suffit. */
	.fl-cv-story__callout,
	.fl-cv-story.is-enhanced .fl-cv-story__callout {
		display: none;
	}

	.fl-cv-story.is-enhanced .fl-cv-story__progress {
		display: none;
	}
}

/* ---------- Animations réduites : pas d'épinglage ni de mouvement ---------- */

@media (prefers-reduced-motion: reduce) {
	.fl-cv-story__live,
	.fl-cv-story__road-line {
		animation: none;
	}
}

/* Sans animation (défilement simple), l'arrêt et l'encart restent affichés. */
.fl-cv-story:not(.is-enhanced) .fl-cv-story__map-stop,
.fl-cv-story:not(.is-enhanced) .fl-cv-story__alert {
	opacity: 1;
	transform: none;
}