/* ============================================================
   Tunnel de réservation — sobre
   ============================================================ */

/* === Hero de la page Réservation : split titre/lede + mockup WhatsApp ===
   Fond cuir noir (même rendu que la section "Pourquoi AutoCentro" sur la home). */
.reservation-hero {
	position: relative;
	color: #fff;
	overflow: hidden;
	padding-block: clamp(1.5rem, 3vw, 2.75rem);
	display: flex;
	align-items: center;
	background-color: #0a0a0a;
	background-image:
		radial-gradient(ellipse at 25% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
		radial-gradient(ellipse at 75% 100%, rgba(255, 255, 255, 0.025) 0%, transparent 55%),
		repeating-linear-gradient(45deg,  rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 5px),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.010) 0 1px, transparent 1px 5px);
}
.reservation-hero .container {
	position: relative;
	z-index: 1;
	width: 100%;
}
.reservation-hero__split {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}
@media (max-width: 1024px) {
	.reservation-hero__split { grid-template-columns: 1fr; gap: var(--space-7); }
}
.reservation-hero__content {
	max-width: 620px;
}
.reservation-hero__content .eyebrow { color: var(--c-red); }
.reservation-hero__content .eyebrow::before { background: var(--c-red); }
.reservation-hero__title {
	font-family: var(--ff-display);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	color: #fff;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.05;
	margin-block: var(--space-3) var(--space-4);
}
.reservation-hero__title em {
	font-style: italic;
	font-weight: 400;
	color: inherit;
}
.reservation-hero__lede {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.0625rem;
	max-width: 540px;
	line-height: 1.6;
	margin-bottom: var(--space-5);
}
.reservation-hero__perks {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: var(--space-3) var(--space-6);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
@media (max-width: 540px) {
	.reservation-hero__perks { grid-template-columns: 1fr; }
}
.reservation-hero__perk {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92);
}
.reservation-hero__perk svg {
	color: var(--c-red);
	background: rgba(227, 6, 19, 0.18);
	border-radius: 50%;
	padding: 4px;
	width: 22px; height: 22px;
}

/* Mockup placé dans le hero : borné en hauteur pour rester compact
   et chat scrollable à l'intérieur. */
.reservation-hero .wa-mockup {
	max-width: 340px;
	width: 100%;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	max-height: clamp(380px, 52vh, 460px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.reservation-hero .wa-mockup__chat {
	flex: 1;
	min-height: 0; /* permet au flex child de shrinker */
	overflow-y: auto;
	scrollbar-width: thin;
}
.reservation-hero .wa-mockup__chat::-webkit-scrollbar { width: 6px; }
.reservation-hero .wa-mockup__chat::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 3px;
}

/* === Encadré du tunnel === */
.reservation-section {
	background: var(--c-bg-2);
	margin-top: 0;
	padding-block: clamp(2rem, 4vw, 4rem);
}
.reservation-layout {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--space-7);
	align-items: start;
	max-width: 1320px;
	margin: 0 auto;
}
@media (max-width: 1024px) {
	.reservation-layout { grid-template-columns: 1fr; }
}
.reservation-wrap {
	background: #1A1A1A;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: clamp(1.5rem, 4vw, 3rem);
	box-shadow: var(--shadow-md);
	color: #fff;
}

/* === Override des éléments du tunnel pour fond sombre === */
.reservation-wrap .booking-panel__title {
	color: #fff;
}
.reservation-wrap .booking-panel__subtitle {
	color: rgba(255, 255, 255, 0.7);
}

/* Stepper sur fond sombre — cercles avec lignes entre, labels sous */
.reservation-wrap .booking-steps {
	display: flex;
	background: transparent;
	border: 0;
	padding: 0;
	margin-bottom: var(--space-8);
	overflow: visible;
	flex-wrap: nowrap;
	gap: 0;
	list-style: none;
}
.reservation-wrap .booking-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	padding: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: rgba(255, 255, 255, 0.55);
	position: relative;
	text-align: center;
	border: 0 !important;
}
.reservation-wrap .booking-step::after {
	pointer-events: none;
}
/* Ligne entre les étapes : trait horizontal au niveau du milieu du cercle */
.reservation-wrap .booking-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 21px;
	left: calc(50% + 26px);
	right: calc(-50% + 26px);
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
	z-index: 0;
}
.reservation-wrap .booking-step.is-done:not(:last-child)::after {
	background: var(--c-red);
}
.reservation-wrap .booking-step.is-current::before { display: none; }
.reservation-wrap .booking-step::before { display: none; }

.reservation-wrap .booking-step__num {
	width: 42px; height: 42px;
	border-radius: 50%;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--ff-body);
	font-size: 0.9375rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	z-index: 1;
	transition: all var(--t-base);
}
.reservation-wrap .booking-step.is-current .booking-step__num {
	background: var(--c-red);
	border-color: var(--c-red);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.18);
}
.reservation-wrap .booking-step.is-done .booking-step__num {
	background: var(--c-red);
	border-color: var(--c-red);
	color: #fff;
}

.reservation-wrap .booking-step__label {
	font-family: var(--ff-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	transition: color var(--t-fast);
}
.reservation-wrap .booking-step.is-current .booking-step__label {
	color: var(--c-red);
	font-weight: 600;
}
.reservation-wrap .booking-step.is-done .booking-step__label {
	color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 480px) {
	.reservation-wrap .booking-step__label { font-size: 0.6875rem; }
}
.reservation-wrap .booking-step {
	color: rgba(255, 255, 255, 0.5);
}
.reservation-wrap .booking-step__num {
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	border-color: rgba(255, 255, 255, 0.15);
}
.reservation-wrap .booking-step.is-current {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}
.reservation-wrap .booking-step.is-current .booking-step__num {
	background: var(--c-red);
	color: #fff;
	border-color: var(--c-red);
}
.reservation-wrap .booking-step.is-done .booking-step__num {
	background: var(--c-ok);
	color: #fff;
	border-color: var(--c-ok);
}

/* Labels et champs sur fond sombre */
.reservation-wrap .field__label {
	color: rgba(255, 255, 255, 0.85);
}
.reservation-wrap .field input[type="text"],
.reservation-wrap .field input[type="email"],
.reservation-wrap .field input[type="tel"],
.reservation-wrap .field input[type="number"],
.reservation-wrap .field input[type="date"],
.reservation-wrap .field input[type="time"],
.reservation-wrap .field input[type="datetime-local"],
.reservation-wrap .field textarea,
.reservation-wrap .field select {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
	color: #fff;
}
/* Icône calendrier date picker en blanc */
.reservation-wrap .field input[type="date"]::-webkit-calendar-picker-indicator,
.reservation-wrap .field input[type="time"]::-webkit-calendar-picker-indicator,
.reservation-wrap .field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	filter: invert(0.85);
	cursor: pointer;
}
.reservation-wrap .field input::placeholder,
.reservation-wrap .field textarea::placeholder {
	color: rgba(255, 255, 255, 0.4);
}
.reservation-wrap .field input:hover,
.reservation-wrap .field textarea:hover,
.reservation-wrap .field select:hover {
	border-color: rgba(255, 255, 255, 0.25);
}
.reservation-wrap .field input:focus,
.reservation-wrap .field textarea:focus,
.reservation-wrap .field select:focus {
	border-color: var(--c-red);
	box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.18);
}
.reservation-wrap .field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Sans cette règle, la liste déroulante affiche du texte blanc sur fond blanc système. */
.reservation-wrap .field select option {
	background-color: #1A1A1A;
	color: #fff;
}

/* Encadré search-recap sur fond sombre */
.reservation-wrap .search-recap {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}
.reservation-wrap .search-recap__icon {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
}
.reservation-wrap .search-recap__label {
	color: rgba(255, 255, 255, 0.55);
}
.reservation-wrap .search-recap__value {
	color: #fff;
}
.reservation-wrap .search-recap__col {
	border-right-color: rgba(255, 255, 255, 0.1);
}
.reservation-wrap .search-recap__edit {
	color: rgba(255, 255, 255, 0.7);
	border-color: rgba(255, 255, 255, 0.2);
}
.reservation-wrap .search-recap__edit:hover {
	color: #fff;
	border-color: #fff;
}

/* Cards véhicules dispos sur fond sombre */
.reservation-wrap .available-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
	color: #fff;
}
.reservation-wrap .available-card:hover {
	border-color: rgba(255, 255, 255, 0.3);
}
.reservation-wrap .available-card__title {
	color: #fff;
}
.reservation-wrap .available-card__price strong {
	color: #fff;
}
.reservation-wrap .available-card__price small,
.reservation-wrap .available-card__price-detail {
	color: rgba(255, 255, 255, 0.6);
}
.reservation-wrap .available-card__specs {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Vehicle preview panel */
.reservation-wrap .vehicle-preview {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
}
.reservation-wrap .vehicle-preview__title { color: #fff; }
.reservation-wrap .vehicle-preview__price { color: rgba(255, 255, 255, 0.7); }
.reservation-wrap .vehicle-preview__spec {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.85);
}
.reservation-wrap .vehicle-preview__sub { color: rgba(255, 255, 255, 0.6); }

/* Récap étape 3 */
.reservation-wrap .recap-vehicle,
.reservation-wrap .recap-summary {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
}
.reservation-wrap .recap-summary h3 { color: rgba(255, 255, 255, 0.6); }
.reservation-wrap .recap-line + .recap-line { border-top-color: rgba(255, 255, 255, 0.1); }
.reservation-wrap .recap-line__label { color: rgba(255, 255, 255, 0.65); }
.reservation-wrap .recap-line__value { color: #fff; }
.reservation-wrap .recap-total {
	border-top-color: rgba(255, 255, 255, 0.4);
}
.reservation-wrap .recap-total__label { color: #fff; }

/* Extras */
.reservation-wrap .extra {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
}
.reservation-wrap .extra:hover { border-color: rgba(255, 255, 255, 0.3); }
.reservation-wrap .extra__title { color: #fff; }
.reservation-wrap .extra__desc { color: rgba(255, 255, 255, 0.6); }

/* Booking actions et boutons */
.reservation-wrap .booking-actions {
	border-top-color: rgba(255, 255, 255, 0.1);
}
.reservation-wrap .btn--ghost {
	color: rgba(255, 255, 255, 0.85);
}
.reservation-wrap .btn--ghost:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

/* Choice (checkbox CGV) */
.reservation-wrap .choice {
	color: rgba(255, 255, 255, 0.85);
}
.reservation-wrap .choice a { color: var(--c-red); }

/* === Mockup WhatsApp === */
.wa-mockup {
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
	background: #ECE5DD;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	max-height: 720px;
	background-image:
		radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px),
		radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px);
	background-size: 20px 20px, 30px 30px;
	background-position: 0 0, 10px 10px;
}
@media (max-width: 1024px) {
	.wa-mockup { position: static; max-height: none; }
}

/* Header style WhatsApp */
.wa-mockup__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: #1F2C33;
	color: #fff;
}
.wa-mockup__back {
	display: inline-flex;
	color: rgba(255,255,255,0.7);
	background: none;
	border: 0;
	padding: 0;
	cursor: default;
}
.wa-mockup__avatar {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: #000;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.wa-mockup__avatar img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.wa-mockup__title { flex: 1; min-width: 0; }
.wa-mockup__name {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--ff-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: #fff;
}
.wa-mockup__sub {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.6);
	margin-top: 2px;
}
.wa-mockup__icons {
	display: flex;
	align-items: center;
	gap: 16px;
	color: rgba(255,255,255,0.85);
}

/* Zone messages */
.wa-mockup__chat {
	flex: 1;
	overflow-y: auto;
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wa-msg {
	max-width: 85%;
	padding: 7px 10px 5px 10px;
	border-radius: 8px;
	font-size: 0.875rem;
	line-height: 1.4;
	color: #111;
	position: relative;
	box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
	font-family: 'Segoe UI', system-ui, sans-serif;
}
.wa-msg p { margin: 0; }
.wa-msg--received {
	background: #fff;
	align-self: flex-start;
	border-top-left-radius: 0;
}
.wa-msg--sent {
	background: #DCF8C6;
	align-self: flex-end;
	border-top-right-radius: 0;
}
.wa-msg__time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.6875rem;
	color: rgba(0,0,0,0.45);
	margin-left: 8px;
	float: right;
	margin-top: 4px;
}

/* Faux input */
.wa-mockup__input {
	padding: 8px 12px 12px;
	background: transparent;
}
.wa-mockup__input-field {
	background: #fff;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 0.875rem;
	color: #999;
	font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Badge "Réponse moyenne 5 minutes" flottant */
.wa-mockup__badge {
	position: absolute;
	left: 50%;
	bottom: 60px;
	transform: translateX(-50%);
	background: #fff;
	padding: 12px 22px;
	border-radius: 14px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.12);
	text-align: center;
	min-width: 180px;
}
.wa-mockup__badge-label {
	display: block;
	font-size: 0.75rem;
	color: var(--c-mute);
	font-weight: 500;
	margin-bottom: 2px;
}
.wa-mockup__badge-value {
	display: block;
	font-family: var(--ff-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: #25D366;
	letter-spacing: -0.01em;
}

/* CTA WhatsApp sous le mockup */
.wa-mockup__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #25D366;
	color: #fff;
	padding: 14px 20px;
	font-family: var(--ff-body);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	transition: background var(--t-fast);
}
.wa-mockup__cta:hover {
	background: #1DAA53;
	color: #fff;
}

/* Trust strip en bas du tunnel */
.reservation-trust {
	max-width: 1040px;
	margin: var(--space-8) auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
@media (max-width: 760px) {
	.reservation-trust { grid-template-columns: 1fr; }
}
.reservation-trust__item {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-4);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 12px;
}
.reservation-trust__icon {
	width: 42px; height: 42px;
	background: rgba(227, 6, 19, 0.1);
	color: var(--c-red);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.reservation-trust__item strong {
	display: block;
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--c-ink);
	margin-bottom: 2px;
	letter-spacing: -0.005em;
}
.reservation-trust__item span {
	display: block;
	font-size: 0.8125rem;
	color: var(--c-mute);
	line-height: 1.45;
}

.booking { max-width: 980px; margin-inline: auto; }

/* Stepper */
.booking-steps {
	display: flex;
	gap: 0;
	margin-bottom: var(--space-10);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	overflow-x: auto;
}
.booking-step {
	flex: 1;
	min-width: 160px;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-3);
	color: var(--c-mute);
	font-size: 0.875rem;
	font-weight: 500;
	transition: all var(--t-base);
	border-right: 1px solid var(--c-line);
}
.booking-step:last-child { border-right: 0; }
.booking-step__num {
	font-size: 0.75rem;
	color: var(--c-mute);
	font-weight: 500;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
}
.booking-step__num::after { content: ""; }
.booking-step__label {
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.booking-step.is-current {
	color: var(--c-ink);
	background: var(--c-bg);
	position: relative;
}
.booking-step.is-current::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: var(--c-red);
}
.booking-step.is-current .booking-step__num { color: var(--c-red); }
.booking-step.is-done {
	color: var(--c-ink-3);
}
.booking-step.is-done .booking-step__num { color: var(--c-ok); }

/* Panneaux d'étape */
.booking-panel {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.booking-panel[hidden] { display: none; }
.booking-panel__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin-bottom: var(--space-3);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--c-ink);
}
.booking-panel__subtitle {
	color: var(--c-mute);
	margin-bottom: var(--space-7);
	font-size: 1.0625rem;
	max-width: 600px;
}

.booking-pickup-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	max-width: 720px;
	margin: 0 auto;
}
@media (max-width: 720px) { .booking-pickup-grid { grid-template-columns: 1fr; } }

/* Champ date + heure inline (étape 1) */
.field--datetime .field__inline {
	display: flex;
	gap: var(--space-2);
}
.field--datetime input[type="date"] {
	flex: 1;
	min-width: 0;
}
.field--datetime select {
	flex: 0 0 auto;
	width: 110px;
	background-position: right 0.625rem center;
	padding-right: 2rem;
}

/* Centrage des actions de l'étape 1 */
.booking-panel[data-step="1"] .booking-actions {
	justify-content: center;
}
.booking-panel[data-step="1"] .booking-actions .btn:last-child {
	margin-left: 0;
}

/* === Encadré récap recherche === */
.search-recap {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: 14px;
	margin-bottom: var(--space-7);
	flex-wrap: wrap;
}
.search-recap__col {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 1;
	min-width: 180px;
	padding-right: var(--space-4);
	border-right: 1px solid var(--c-line);
}
.search-recap__col:last-of-type { border-right: 0; }
.search-recap__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: #fff;
	border-radius: 10px;
	color: var(--c-red);
	flex-shrink: 0;
	border: 1px solid var(--c-line);
}
.search-recap__label {
	display: block;
	font-family: var(--ff-body);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-mute);
	font-weight: 600;
	margin-bottom: 2px;
}
.search-recap__value {
	display: block;
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--c-ink);
	letter-spacing: -0.005em;
}
.search-recap__edit {
	font-family: var(--ff-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--c-mute);
	background: transparent;
	border: 1px solid var(--c-line-2);
	border-radius: 8px;
	cursor: pointer;
	padding: 0.625rem 1.125rem;
	transition: all var(--t-fast);
	white-space: nowrap;
}
.search-recap__edit:hover {
	color: var(--c-ink);
	border-color: var(--c-ink);
}
@media (max-width: 760px) {
	.search-recap__col { border-right: 0; padding-right: 0; }
	.search-recap__edit { width: 100%; text-align: center; }
}

/* === Cards véhicules dispos — style fiche === */
.available-grid {
	display: grid;
	/* auto-FILL (pas auto-fit) : si peu de véhicules disponibles, les cartes
	   gardent leur taille au lieu de s'étirer « en grand » sur toute la largeur. */
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-5);
}
.available-card {
	border: 1px solid var(--c-line);
	border-radius: 18px;
	overflow: hidden;
	cursor: pointer;
	transition: all var(--t-base);
	background: #fff;
	text-align: left;
	font-family: inherit;
	color: inherit;
	width: 100%;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.available-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-line-2);
}
.available-card.is-selected {
	border-color: var(--c-red);
	box-shadow: 0 0 0 2px var(--c-red), 0 12px 32px rgba(227, 6, 19, 0.15);
}

.available-card__media {
	position: relative;
	aspect-ratio: 16/10;
	background: var(--c-bg-2);
	overflow: hidden;
	margin: 10px 10px 0;
	border-radius: 10px;
}
.available-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow);
}
.available-card:hover .available-card__media img { transform: scale(1.04); }
.available-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--c-mute-2);
	background: var(--c-bg-3);
}
.available-card__category {
	position: absolute;
	top: 12px; left: 12px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--c-ink);
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
}

.available-card__body {
	padding: var(--space-4) var(--space-5) var(--space-5);
	flex: 1;
	display: flex;
	flex-direction: column;
}
.available-card__title {
	font-family: var(--ff-display);
	font-weight: 500;
	margin: 0 0 var(--space-3);
	font-size: 1.25rem;
	color: var(--c-ink);
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.available-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--c-line);
}
.available-card__spec {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--c-red-soft);
	border: 1px solid rgba(227, 6, 19, 0.18);
	color: var(--c-red);
	font-size: 0.75rem;
	font-weight: 600;
}
.available-card__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-top: auto;
}
.available-card__price strong {
	font-family: var(--ff-body);
	font-size: 1.5rem;
	color: var(--c-ink);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.available-card__price small {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--c-mute);
}
.available-card__price-detail {
	font-size: 0.75rem;
	color: var(--c-mute-2);
	margin-top: 6px;
	font-style: italic;
}

/* Aperçu véhicule sélectionné (étape 2) — apparaît au clic d'une card */
.vehicle-preview {
	margin-top: var(--space-7);
	padding: var(--space-6);
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: 14px;
	border-left: 4px solid var(--c-red);
	animation: vehicle-preview-in 0.4s var(--ease-out);
}
@keyframes vehicle-preview-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
.vehicle-preview__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
	flex-wrap: wrap;
}
.vehicle-preview__title {
	font-family: var(--ff-display);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0;
}
.vehicle-preview__price {
	font-size: 0.9375rem;
	color: var(--c-mute);
}
.vehicle-preview__price strong {
	font-family: var(--ff-display);
	font-size: 1.625rem;
	color: var(--c-red);
	font-weight: 500;
	margin-right: 4px;
}
.vehicle-preview__body {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--space-5);
	align-items: center;
}
@media (max-width: 600px) { .vehicle-preview__body { grid-template-columns: 1fr; } }
.vehicle-preview__media {
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: 8px;
	background: var(--c-bg-3);
}
.vehicle-preview__media img {
	width: 100%; height: 100%; object-fit: cover;
}
.vehicle-preview__placeholder { width: 100%; height: 100%; }
.vehicle-preview__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--space-4);
}
.vehicle-preview__spec {
	display: inline-block;
	padding: 4px 12px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--c-ink-2);
}
.vehicle-preview__sub {
	font-family: var(--ff-display);
	font-style: italic;
	color: var(--c-ink-3);
	font-size: 1.0625rem;
}

/* Étape 3 — récap */
.recap {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--space-8);
}
@media (max-width: 900px) { .recap { grid-template-columns: 1fr; } }

.recap-vehicle {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #fff;
}
.recap-vehicle__media { aspect-ratio: 16/10; }
.recap-vehicle__media img { width: 100%; height: 100%; object-fit: cover; }
.recap-vehicle__body { padding: var(--space-6); }

.recap-summary {
	background: var(--c-bg-2);
	border: 0;
	border-radius: var(--radius-md);
	padding: var(--space-6);
}
.recap-summary h3 {
	margin-bottom: var(--space-5);
	font-size: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--c-mute);
}
.recap-line {
	display: flex;
	justify-content: space-between;
	padding: var(--space-3) 0;
	font-size: 0.9375rem;
}
.recap-line + .recap-line { border-top: 1px solid var(--c-line); }
.recap-line__label { color: var(--c-ink-3); }
.recap-line__value { font-weight: 500; color: var(--c-ink); }
.recap-total {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--c-ink);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.recap-total__label {
	font-weight: 600;
	font-size: 1rem;
}
.recap-total__value {
	font-weight: 700;
	font-size: 2.125rem;
	color: var(--c-red);
	letter-spacing: -0.03em;
}

/* Options (extras) */
.extras { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.extra {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-4);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--t-fast);
	background: transparent;
}
.extra:hover { border-color: var(--c-ink); }
.extra:has(input:checked) {
	border-color: var(--c-ink);
	background: var(--c-bg-2);
}
.extra__main { display: flex; align-items: flex-start; gap: var(--space-3); }
.extra__title { font-weight: 500; margin-bottom: 2px; color: var(--c-ink); font-size: 0.9375rem; }
.extra__desc { font-size: 0.8125rem; color: var(--c-mute); line-height: 1.45; }
.extra__price {
	font-weight: 600;
	color: var(--c-ink);
	white-space: nowrap;
	font-size: 0.9375rem;
}
/* Bandeau "véhicule pré-sélectionné" (étape 1, arrivée depuis la flotte/fiche) */
/* Le tunnel est sur fond sombre (.reservation-wrap #1A1A1A) → texte clair. */
.booking-vehicle-banner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-5);
	border: 1px solid rgba(227, 6, 19, 0.35);
	border-left: 4px solid var(--c-primary, #E30613);
	border-radius: var(--radius-md);
	background: rgba(227, 6, 19, 0.14);
}
.booking-vehicle-banner__icon {
	flex-shrink: 0;
	display: inline-flex;
	color: #ff5a66;
}
.booking-vehicle-banner__text {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.4;
}
.booking-vehicle-banner__text strong { color: #fff; }

/* Liste des avantages INCLUS (étape 3) — style coches, comme la fiche véhicule */
.fiche-guarantees {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}
.fiche-guarantee {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}
.fiche-guarantee__check {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(26, 138, 60, 0.12);
	color: #1a8a3c;
}
.fiche-guarantee__body { display: flex; flex-direction: column; }
.fiche-guarantee__title { font-weight: 500; color: #fff; font-size: 0.9375rem; }
.fiche-guarantee__note { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.65); margin-top: 2px; }

/* Équipements du véhicule (étape 3) — puces réutilisées de la fiche, adaptées au fond sombre */
.fiche-equipements { margin-top: var(--space-6); }
.reservation-wrap .vehicle-equipement {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.9);
}
.reservation-wrap .vehicle-equipement:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.25);
}

/* Confirmation */
.success-card { text-align: center; padding: var(--space-12) var(--space-5); max-width: 640px; margin-inline: auto; }
.success-card__icon {
	width: 56px; height: 56px;
	margin: 0 auto var(--space-5);
	background: var(--c-ink);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.success-card__icon svg { width: 24px; height: 24px; }
.success-card h2 { margin-bottom: var(--space-4); }

/* Navigation steps */
.booking-actions {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--c-line);
	flex-wrap: wrap;
}
.booking-actions .btn:last-child { margin-left: auto; }

/* Étape 5 : groupe de 2 boutons submit (email + WhatsApp) */
.booking-submit-choice {
	margin-top: var(--space-6);
	margin-bottom: 0;
	font-size: 0.875rem;
	color: var(--c-mute);
	text-align: center;
}
.booking-actions--submit {
	border-top: 0;
	padding-top: var(--space-3);
	margin-top: var(--space-3);
	align-items: center;
}
.booking-submit-group {
	display: flex;
	gap: var(--space-3);
	margin-left: auto;
	flex-wrap: wrap;
}
.booking-submit-group .btn {
	margin-left: 0 !important;
}
@media (max-width: 540px) {
	.booking-submit-group { flex-direction: column; width: 100%; }
	.booking-submit-group .btn { width: 100%; }
}
/* Mode dark — ajuster la couleur de la consigne */
.reservation-wrap .booking-submit-choice { color: rgba(255, 255, 255, 0.65); }

/* ============================================================
   Fiche véhicule (étape 3) — galerie + specs + prix + options
   ============================================================ */
.vehicle-fiche {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-7);
	margin-top: var(--space-5);
	margin-bottom: var(--space-5);
}
@media (max-width: 900px) {
	.vehicle-fiche { grid-template-columns: 1fr; gap: var(--space-5); }
}
.vehicle-fiche__gallery {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.vehicle-fiche__main {
	aspect-ratio: 16/10;
	border-radius: 12px;
	overflow: hidden;
	background: var(--c-bg-3);
}
.vehicle-fiche__main img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.vehicle-fiche__placeholder {
	width: 100%; height: 100%;
	background: var(--c-bg-3);
}
.vehicle-fiche__thumbs {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: thin;
}
.vehicle-fiche__thumb {
	flex: 0 0 88px;
	height: 64px;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	background: var(--c-bg-3);
	transition: border-color var(--t-fast), opacity var(--t-fast);
	padding: 0;
	opacity: 0.65;
}
.vehicle-fiche__thumb:hover { opacity: 0.9; }
.vehicle-fiche__thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.vehicle-fiche__thumb.is-active {
	border-color: var(--c-red);
	opacity: 1;
}

.vehicle-fiche__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.vehicle-fiche__title {
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--c-ink);
	line-height: 1.1;
}
.vehicle-fiche__category {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--c-red);
	font-weight: 600;
}
.vehicle-fiche__category:empty { display: none; }
.vehicle-fiche__specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3) var(--space-5);
	margin: var(--space-2) 0;
	padding: var(--space-4) 0;
	border-block: 1px solid var(--c-line);
	list-style: none;
}
.vehicle-fiche__specs li {
	display: flex;
	flex-direction: column;
	font-size: 0.875rem;
}
.vehicle-fiche__specs li span {
	color: var(--c-mute);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 4px;
	font-weight: 600;
}
.vehicle-fiche__specs li strong {
	color: var(--c-ink);
	font-weight: 500;
	font-size: 0.9375rem;
}
.vehicle-fiche__desc {
	color: var(--c-ink-3);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}
.vehicle-fiche__desc:empty { display: none; }
.vehicle-fiche__price {
	margin-top: auto;
	padding-top: var(--space-4);
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.vehicle-fiche__price .price-amount {
	font-family: var(--ff-body);
	font-size: 2rem;
	font-weight: 700;
	color: var(--c-ink);
	letter-spacing: -0.025em;
}
.vehicle-fiche__price .price-per {
	font-size: 1rem;
	color: var(--c-mute);
}
.vehicle-fiche__price .price-note {
	font-size: 0.75rem;
	color: var(--c-mute-2);
	flex-basis: 100%;
	font-style: italic;
}

.booking-section-title {
	font-family: var(--ff-display);
	font-size: 1.25rem;
	font-weight: 500;
	margin-top: var(--space-7);
	margin-bottom: var(--space-3);
	color: var(--c-ink);
	letter-spacing: -0.005em;
}

/* Overrides fiche véhicule sur fond sombre du tunnel */
.reservation-wrap .vehicle-fiche__main,
.reservation-wrap .vehicle-fiche__thumb,
.reservation-wrap .vehicle-fiche__placeholder { background: rgba(255, 255, 255, 0.05); }
.reservation-wrap .vehicle-fiche__title { color: #fff; }
.reservation-wrap .vehicle-fiche__specs { border-color: rgba(255, 255, 255, 0.12); }
.reservation-wrap .vehicle-fiche__specs li span { color: rgba(255, 255, 255, 0.55); }
.reservation-wrap .vehicle-fiche__specs li strong { color: #fff; }
.reservation-wrap .vehicle-fiche__desc { color: rgba(255, 255, 255, 0.75); }
.reservation-wrap .vehicle-fiche__price .price-amount { color: #fff; }
.reservation-wrap .vehicle-fiche__price .price-per { color: rgba(255, 255, 255, 0.65); }
.reservation-wrap .vehicle-fiche__price .price-note { color: rgba(255, 255, 255, 0.55); }
.reservation-wrap .booking-section-title { color: #fff; }
/* Total recap en rouge sur dark — la couleur est déjà var(--c-red) en base, le rouge ressort sur fond sombre */