/* =========================================================================
   Hero réservation — transferts aéroport AIBD
   Design system Kai : navy #242F3E, vert #84D18C,
   Hedvig Letters Serif (titres), Instrument Sans (texte), boutons pilule.
   Sélecteurs préfixés par "body" pour passer devant les styles Salient.
   ========================================================================= */

.kai-hb {
	--kai-navy: #242F3E;
	--kai-navy-90: rgba(36, 47, 62, .9);
	--kai-green: #84D18C;
	--kai-green-soft: rgba(132, 209, 140, .16);
	--kai-muted: #5B6472;
	--kai-field: #F2F3F5;
	--kai-line: #E3E5E8;
	--kai-white: #fff;
	--kai-error: #B42318;
	--kai-radius: 14px;
	--kai-ease: cubic-bezier(.16, 1, .3, 1);
	--kai-ease-out: cubic-bezier(.22, .61, .36, 1);

	position: relative;
	padding: var(--kai-hb-pad-top, clamp(24px, 5vh, 64px)) 0 clamp(56px, 9vh, 110px);
	font-family: 'Instrument Sans', sans-serif;
	color: var(--kai-navy);
	text-align: left;
}

.kai-hb *,
.kai-hb *::before,
.kai-hb *::after { box-sizing: border-box; }

.kai-hb__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(40px, 6vw, 112px);
	align-items: center;
	max-width: 1320px;
	margin: 0 auto;
}

.kai-hb__content { max-width: 540px; }

.kai-hb__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.kai-hb .material-symbols-outlined {
	font-size: 20px;
	line-height: 1;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---------- Entrée (CSS pur : aucune dépendance au JS) ---------- */

@keyframes kai-hb-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
@keyframes kai-hb-word {
	from { transform: translateY(108%); }
	to   { transform: none; }
}
@keyframes kai-hb-clip {
	from { clip-path: inset(100% 0 0 0 round 18px); }
	to   { clip-path: inset(0 0 0 0 round 18px); }
}
@keyframes kai-hb-zoom {
	from { transform: scale(1.18); }
	to   { transform: scale(1); }
}
@keyframes kai-hb-drift {
	from { transform: scale(1); }
	to   { transform: scale(1.07) translate3d(-1.5%, -1%, 0); }
}
@keyframes kai-hb-spin { to { transform: rotate(360deg); } }
@keyframes kai-hb-shake {
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}
@keyframes kai-hb-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.6); }
	100% { transform: scale(1); }
}

.kai-hb-reveal {
	animation: kai-hb-up .9s var(--kai-ease) backwards;
	animation-delay: calc(var(--d, 0) * 1ms);
}

/* ---------- Texte ---------- */

body .kai-hb .kai-hb__eyebrow {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 7px 14px 7px 10px;
	border-radius: 999px;
	background: var(--kai-green-soft);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .01em;
	color: var(--kai-navy);
}
.kai-hb__eyebrow .material-symbols-outlined { font-size: 18px; }

body .kai-hb h1.kai-hb__title {
	margin: 22px 0 18px !important;
	font-family: "Hedvig Letters Serif", serif !important;
	font-weight: 400 !important;
	font-size: clamp(40px, 4.4vw, 70px) !important;
	line-height: 1.06 !important;
	letter-spacing: -.02em;
	color: var(--kai-navy);
	text-wrap: balance;
}

.kai-hb__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: .1em;
	margin-bottom: -.1em;
}
.kai-hb__word > span {
	display: inline-block;
	animation: kai-hb-word 1s var(--kai-ease) both;
	animation-delay: calc(var(--i) * 70ms + 120ms);
}

body .kai-hb .kai-hb__lead {
	margin: 0 0 30px;
	padding: 0;
	max-width: 470px;
	max-height: 8em;
	overflow: hidden;
	transition: max-height .5s var(--kai-ease), opacity .3s, margin .5s var(--kai-ease);
	font-size: 18px;
	line-height: 1.55;
	color: var(--kai-muted);
}

/* ---------- Maintenant / Plus tard ---------- */

body .kai-hb fieldset.kai-hb__when {
	position: relative;
	z-index: 20; /* calendrier au-dessus du trajet */
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.kai-hb__seg {
	position: relative;
	display: inline-grid;
	grid-template-columns: auto auto;
	padding: 4px;
	border-radius: 999px;
	background: var(--kai-field);
	isolation: isolate;
}

.kai-hb__seg-opt { position: relative; margin: 0; cursor: pointer; }
body .kai-hb .kai-hb__seg-opt input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
.kai-hb__seg-opt .material-symbols-outlined { color: inherit; }
.kai-hb__seg-opt > span {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	color: var(--kai-navy);
	white-space: nowrap;
	transition: color .35s var(--kai-ease-out);
	pointer-events: none;
}
.kai-hb__seg-opt input:checked + span { color: var(--kai-white); }
body .kai-hb .kai-hb__seg-opt > span span { color: inherit !important; }
.kai-hb__seg-opt input:focus-visible + span { outline: 2px solid var(--kai-green); outline-offset: 2px; }

.kai-hb__seg-thumb {
	position: absolute;
	z-index: 0;
	top: 4px; bottom: 4px; left: 4px;
	width: var(--thumb-w, calc(50% - 4px));
	border-radius: 999px;
	background: var(--kai-navy);
	box-shadow: 0 6px 16px rgba(36, 47, 62, .22);
	transform: translateX(var(--thumb-x, 0));
	pointer-events: none;
	transition: transform .5s var(--kai-ease), width .5s var(--kai-ease);
}

/* ---------- Calendrier « Plus tard » ----------
   Popover sous le sélecteur (desktop), panneau bas d'écran (mobile). */

.kai-hb,
.kai-hb__picker,
.kai-hb__backdrop {
	--kai-navy: #242F3E;
	--kai-green: #84D18C;
	--kai-green-soft: rgba(132, 209, 140, .16);
	--kai-muted: #5B6472;
	--kai-field: #F2F3F5;
	--kai-line: #E3E5E8;
	--kai-white: #fff;
	--kai-ease: cubic-bezier(.16, 1, .3, 1);
	--kai-ease-out: cubic-bezier(.22, .61, .36, 1);
}

.kai-hb__picker {
	position: absolute;
	z-index: 40;
	top: calc(100% + 10px);
	left: 0;
	width: 100%;
	max-width: 460px;
	padding: 18px 18px 16px;
	border: 1px solid var(--kai-line);
	border-radius: 22px;
	background: var(--kai-white);
	box-shadow: 0 30px 70px rgba(36, 47, 62, .20), 0 6px 16px rgba(36, 47, 62, .06);
	font-family: 'Instrument Sans', sans-serif;
	color: var(--kai-navy);
	text-align: left;
	opacity: 0;
	transform: translateY(calc(var(--shift, 0px) - 8px)) scale(.97);
	transform-origin: top left;
	transition: opacity .2s var(--kai-ease-out), transform .4s var(--kai-ease);
}
.kai-hb__picker[hidden] { display: none; }
.kai-hb__picker.is-open { opacity: 1; transform: translateY(var(--shift, 0px)); }
.kai-hb__picker *,
.kai-hb__picker *::before,
.kai-hb__picker *::after { box-sizing: border-box; }
.kai-hb__picker .material-symbols-outlined { font-size: 20px; line-height: 1; }

.kai-hb__picker-head,
.kai-hb__cal-nav,
.kai-hb__picker-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
body .kai-hb__picker .kai-hb__picker-title { margin: 0; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--kai-navy); }
body .kai-hb__picker .kai-hb__cal-month { margin: 0; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--kai-navy); }
.kai-hb__cal-nav { margin: 12px 0 8px; }

/* Boutons de base du calendrier (on neutralise les styles Salient) */
body .kai-hb__picker button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	color: var(--kai-navy);
	font-family: inherit;
	line-height: 1.1;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background .2s var(--kai-ease-out), color .2s var(--kai-ease-out), border-color .2s, transform .25s var(--kai-ease);
}
body .kai-hb__picker button:focus-visible { outline: 2px solid var(--kai-green); outline-offset: 2px; }
body .kai-hb__picker button:disabled { cursor: default; opacity: .32; }

body .kai-hb__picker button.kai-hb__icon-btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
}
body .kai-hb__picker button.kai-hb__icon-btn:not(:disabled):hover { background: var(--kai-field); }

/* Semaine : 7 colonnes, rien n'est coupé */
.kai-hb__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
body .kai-hb__picker button.kai-hb__day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 58px;
	border-radius: 14px;
}
body .kai-hb__picker button.kai-hb__day:not(:disabled):hover { background: var(--kai-field); }
body .kai-hb__picker button.kai-hb__day[aria-pressed="true"] { background: var(--kai-navy); color: var(--kai-white); }
.kai-hb__day-wd { font-size: 12px; font-weight: 500; text-transform: capitalize; opacity: .7; }
.kai-hb__day-num { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kai-hb__day.is-today::after {
	content: "";
	position: absolute;
	bottom: 6px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--kai-green);
}

/* Moments de la journée */
.kai-hb__periods {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	margin: 14px 0 10px;
	padding: 4px;
	border-radius: 999px;
	background: var(--kai-field);
}
body .kai-hb__picker button.kai-hb__period {
	height: 36px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}
body .kai-hb__picker button.kai-hb__period:not(:disabled):hover { background: rgba(255, 255, 255, .7); }
body .kai-hb__picker button.kai-hb__period[aria-pressed="true"] {
	background: var(--kai-white);
	box-shadow: 0 2px 8px rgba(36, 47, 62, .10);
}

/* Horaires */
.kai-hb__slots {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
	animation: kai-hb-up .3s var(--kai-ease) backwards;
}
body .kai-hb__picker button.kai-hb__slot {
	height: 40px;
	border: 1px solid var(--kai-line);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
body .kai-hb__picker button.kai-hb__slot:not(:disabled):hover { border-color: var(--kai-navy); transform: translateY(-1px); }
body .kai-hb__picker button.kai-hb__slot[aria-pressed="true"] { background: var(--kai-navy); border-color: var(--kai-navy); color: var(--kai-white); }
body .kai-hb__picker button.kai-hb__slot:disabled { opacity: 1; color: #B8BEC6; border-color: transparent; background: var(--kai-field); }

/* Pied : résumé + valider */
.kai-hb__picker-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kai-line); }
body .kai-hb__picker .kai-hb__picker-sum { margin: 0; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--kai-navy); }
body .kai-hb__picker .kai-hb__hint { margin: 2px 0 0; padding: 0; font-size: 12px; line-height: 1.3; color: var(--kai-muted); }
body .kai-hb__picker button.kai-hb__picker-ok {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--kai-navy);
	color: var(--kai-white);
	font-size: 15px;
	font-weight: 600;
}
body .kai-hb__picker button.kai-hb__picker-ok:hover { background: #1A2330; transform: translateY(-1px); }

.kai-hb__backdrop { display: none; }

/* Mobile : panneau qui monte du bas */
@media (max-width: 600px) {
	.kai-hb__picker {
		position: fixed;
		z-index: 100001;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		max-width: none;
		max-height: 88vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 26px 16px calc(16px + env(safe-area-inset-bottom));
		border-radius: 24px 24px 0 0;
		border-width: 1px 0 0;
		opacity: 1;
		transform: translateY(100%);
		transition: transform .45s var(--kai-ease);
	}
	.kai-hb__picker.is-open { transform: none; }
	.kai-hb__picker::before {
		content: "";
		position: absolute;
		top: 9px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 4px;
		background: var(--kai-line);
	}
	.kai-hb__slots { grid-template-columns: repeat(4, 1fr); }
	body .kai-hb__picker button.kai-hb__slot { height: 44px; }

	.kai-hb__backdrop {
		display: block;
		position: fixed;
		z-index: 100000;
		inset: 0;
		background: rgba(36, 47, 62, .42);
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s var(--kai-ease-out);
	}
	.kai-hb__backdrop.is-visible { opacity: 1; pointer-events: auto; }
}

/* ---------- Trajet ---------- */

.kai-hb__route {
	position: relative;
	z-index: 10; /* liste de suggestions au-dessus du CTA */
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-right: 58px;
}

.kai-hb__track {
	position: absolute;
	z-index: 5;
	left: 22px;
	top: calc(var(--kai-field-h, 68px) / 2);
	bottom: calc(var(--kai-field-h, 68px) / 2);
	width: 10px;
	pointer-events: none;
}
.kai-hb__dot,
.kai-hb__square {
	position: absolute;
	left: 0;
	width: 10px;
	height: 10px;
	background: var(--kai-navy);
	transition: background .3s var(--kai-ease-out);
}
.kai-hb__dot    { top: -5px; border-radius: 50%; }
.kai-hb__square { bottom: -5px; border-radius: 2px; }
.kai-hb__line {
	position: absolute;
	left: 4.25px;
	top: 9px;
	bottom: 9px;
	width: 1.5px;
	background: var(--kai-navy);
	opacity: .35;
}
.kai-hb.is-listing .kai-hb__track { z-index: 2; }

/* Le point du champ adresse devient vert quand une adresse est choisie */
.kai-hb.has-place [data-way="0"] .kai-hb__dot,
.kai-hb.has-place [data-way="1"] .kai-hb__square {
	background: var(--kai-green);
	animation: kai-hb-pop .45s var(--kai-ease);
}

.kai-hb__field {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--kai-field-h, 68px);
	padding: 10px 16px 10px 50px;
	border-radius: var(--kai-radius);
	background: var(--kai-field);
	transition: background .25s var(--kai-ease-out), box-shadow .3s var(--kai-ease-out);
	will-change: transform;
}
.kai-hb__field--place   { order: 1; z-index: 3; padding-right: 92px; }
.kai-hb__field--airport { order: 2; background: #EDF7EE; }
[data-way="1"] > .kai-hb__field--place   { order: 2; }
[data-way="1"] > .kai-hb__field--airport { order: 1; }

.kai-hb__field--place:focus-within {
	background: var(--kai-white);
	box-shadow: 0 0 0 2px var(--kai-navy), 0 14px 34px rgba(36, 47, 62, .10);
}
.kai-hb__field.is-invalid {
	box-shadow: 0 0 0 2px var(--kai-error);
	animation: kai-hb-shake .4s var(--kai-ease-out);
}

body .kai-hb .kai-hb__label {
	display: block;
	margin: 0 0 3px;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kai-muted);
}

body .kai-hb input.kai-hb__input {
	width: 100%;
	height: 26px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	line-height: 26px;
	color: var(--kai-navy);
	text-overflow: ellipsis;
	outline: none;
}
body .kai-hb input.kai-hb__input::placeholder { color: #8A929E; opacity: 1; }

.kai-hb__airport {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 600;
	line-height: 26px;
}
.kai-hb__iata {
	padding: 2px 7px;
	border-radius: 6px;
	background: var(--kai-navy);
	color: var(--kai-white);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	text-decoration: none;
	border-bottom: 0;
}

body .kai-hb button.kai-hb__locate {
	position: absolute;
	top: 50%;
	right: 10px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--kai-navy);
	cursor: pointer;
	box-shadow: none;
	transition: background .2s var(--kai-ease-out), transform .3s var(--kai-ease);
}
body .kai-hb button.kai-hb__locate:hover { background: rgba(36, 47, 62, .07); transform: rotate(-12deg); }
body .kai-hb button.kai-hb__locate:focus-visible { outline: 2px solid var(--kai-green); }
.kai-hb__locate.is-busy .material-symbols-outlined { animation: kai-hb-spin 1s linear infinite; }

.kai-hb__spinner {
	position: absolute;
	top: 50%;
	right: 60px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 2px solid rgba(36, 47, 62, .15);
	border-top-color: var(--kai-navy);
	border-radius: 50%;
	opacity: 0;
	transition: opacity .2s;
	animation: kai-hb-spin .8s linear infinite;
}
.kai-hb__field.is-loading .kai-hb__spinner { opacity: 1; }

body .kai-hb button.kai-hb__swap {
	position: absolute;
	top: 50%;
	right: 0;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: -23px 0 0;
	padding: 0;
	border: 1px solid var(--kai-line);
	border-radius: 50%;
	background: var(--kai-white);
	color: var(--kai-navy);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(36, 47, 62, .10);
	transition: background .25s var(--kai-ease-out), color .25s var(--kai-ease-out), box-shadow .3s, transform .3s var(--kai-ease);
}
body .kai-hb button.kai-hb__swap:hover {
	background: var(--kai-navy);
	color: var(--kai-white);
	box-shadow: 0 10px 24px rgba(36, 47, 62, .25);
	transform: scale(1.06);
}
body .kai-hb button.kai-hb__swap:active { transform: scale(.94); }
body .kai-hb button.kai-hb__swap:focus-visible { outline: 2px solid var(--kai-green); outline-offset: 2px; }
.kai-hb__swap .material-symbols-outlined {
	font-size: 22px;
	transition: transform .55s var(--kai-ease);
	transform: rotate(var(--rot, 0deg));
}

/* ---------- Suggestions ---------- */

body .kai-hb ul.kai-hb__list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	left: 0;
	right: -58px;
	max-height: var(--list-max, min(380px, 60vh));
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	border: 1px solid var(--kai-line);
	border-radius: 18px;
	background: var(--kai-white);
	box-shadow: 0 28px 60px rgba(36, 47, 62, .18), 0 4px 12px rgba(36, 47, 62, .06);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(.985);
	transform-origin: top center;
	transition: opacity .18s var(--kai-ease-out), transform .28s var(--kai-ease), visibility 0s linear .28s;
}
body .kai-hb ul.kai-hb__list.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .18s var(--kai-ease-out), transform .28s var(--kai-ease), visibility 0s;
}

body .kai-hb .kai-hb__list li { margin: 0; padding: 0; list-style: none; }
body .kai-hb .kai-hb__list li::before { display: none; }

body .kai-hb .kai-hb__list-head {
	padding: 10px 12px 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kai-muted);
}

body .kai-hb .kai-hb__opt {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 8px 10px;
	border-radius: 12px;
	cursor: pointer;
	transition: background .15s var(--kai-ease-out);
	animation: kai-hb-up .35s var(--kai-ease) both;
	animation-delay: calc(var(--n, 0) * 25ms);
}
body .kai-hb .kai-hb__opt:hover,
body .kai-hb .kai-hb__opt[aria-selected="true"] { background: var(--kai-field); }

.kai-hb__opt-icon {
	flex: 0 0 38px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--kai-field);
	transition: background .15s;
}
.kai-hb__opt:hover .kai-hb__opt-icon,
.kai-hb__opt[aria-selected="true"] .kai-hb__opt-icon { background: var(--kai-white); }
.kai-hb__opt--geo .kai-hb__opt-icon { background: var(--kai-green-soft); }

.kai-hb__opt-text { min-width: 0; display: flex; flex-direction: column; }
.kai-hb__opt-main {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--kai-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kai-hb__opt-main mark { background: none; color: inherit; font-weight: 700; padding: 0; }
.kai-hb__opt-sub {
	font-size: 13px;
	line-height: 1.35;
	color: var(--kai-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body .kai-hb .kai-hb__list-empty { padding: 14px 12px 6px; }
.kai-hb__list-empty strong { display: block; font-size: 15px; font-weight: 600; }
.kai-hb__list-empty span { font-size: 13px; color: var(--kai-muted); }

/* Barre de défilement fine et discrète (liste + calendrier mobile) */
body .kai-hb ul.kai-hb__list,
.kai-hb__picker {
	scrollbar-width: thin;
	scrollbar-color: rgba(36, 47, 62, .22) transparent;
}
body .kai-hb ul.kai-hb__list::-webkit-scrollbar,
.kai-hb__picker::-webkit-scrollbar { width: 10px; }
body .kai-hb ul.kai-hb__list::-webkit-scrollbar-track,
.kai-hb__picker::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
body .kai-hb ul.kai-hb__list::-webkit-scrollbar-thumb,
.kai-hb__picker::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: 10px;
	background: rgba(36, 47, 62, .22) padding-box;
}
body .kai-hb ul.kai-hb__list::-webkit-scrollbar-thumb:hover,
.kai-hb__picker::-webkit-scrollbar-thumb:hover { background-color: rgba(36, 47, 62, .4); }
body .kai-hb ul.kai-hb__list::-webkit-scrollbar-button,
.kai-hb__picker::-webkit-scrollbar-button { display: none; height: 0; }

/* ---------- Erreur & CTA ---------- */

body .kai-hb .kai-hb__error {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--kai-error);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .25s, transform .3s var(--kai-ease);
}
body .kai-hb .kai-hb__error.is-visible { opacity: 1; transform: none; margin-top: 10px; }

.kai-hb__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-top: 22px;
}

body .kai-hb button.kai-hb__submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 58px;
	margin: 0;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: var(--kai-green);
	color: var(--kai-navy);
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 14px 30px rgba(132, 209, 140, .38);
	transition: transform .35s var(--kai-ease), box-shadow .35s var(--kai-ease), background .25s;
}
body .kai-hb button.kai-hb__submit:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px rgba(132, 209, 140, .48);
}
body .kai-hb button.kai-hb__submit:active { transform: translateY(0) scale(.98); }
body .kai-hb button.kai-hb__submit:focus-visible { outline: 2px solid var(--kai-navy); outline-offset: 3px; }
/* Aucune adresse choisie dans la liste : bouton inactif */
body .kai-hb button.kai-hb__submit:disabled { background: #D9DEDB; color: #7C8782; box-shadow: none; cursor: not-allowed; transform: none; }
body .kai-hb button.kai-hb__submit:disabled .kai-hb__submit-icon { transform: none; }
.kai-hb__submit-icon { transition: transform .35s var(--kai-ease); }
.kai-hb__submit:hover .kai-hb__submit-icon { transform: translateX(4px); }

/* Prêt à réserver : léger halo */
.kai-hb.is-complete .kai-hb__submit { box-shadow: 0 0 0 6px rgba(132, 209, 140, .25), 0 18px 36px rgba(132, 209, 140, .45); }

.kai-hb__submit-spinner {
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(36, 47, 62, .2);
	border-top-color: var(--kai-navy);
	border-radius: 50%;
	opacity: 0;
	animation: kai-hb-spin .8s linear infinite;
}
.kai-hb__submit.is-loading { pointer-events: none; }
.kai-hb__submit.is-loading .kai-hb__submit-label,
.kai-hb__submit.is-loading .kai-hb__submit-icon { opacity: 0; }
.kai-hb__submit.is-loading .kai-hb__submit-spinner { opacity: 1; }

body .kai-hb .kai-hb__note { margin: 0; padding: 0; font-size: 14px; color: var(--kai-muted); }

/* ---------- Images ---------- */

.kai-hb__media {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	align-items: start;
}
.kai-hb__col { display: grid; gap: 14px; }
.kai-hb__col--offset { margin-top: -36px; }

body .kai-hb figure.kai-hb__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 18px;
	background: #E9ECEF;
	animation: kai-hb-clip 1.2s var(--kai-ease) both;
	animation-delay: calc(var(--d, 0) * 1ms);
}
.kai-hb__tile--short { aspect-ratio: 4 / 3.3; }
.kai-hb__tile--tall  { aspect-ratio: 4 / 4.6; }
body .kai-hb .kai-hb__tile img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover;
	animation:
		kai-hb-zoom 1.8s var(--kai-ease) both,
		kai-hb-drift 24s ease-in-out infinite alternate;
	animation-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms + 1800ms);
}

/* ---------- Tenir dans l'écran (desktop) ----------
   La hero = hauteur de l'écran moins le header, quelle que soit la taille.
   Les tailles suivent la hauteur (vh) pour que tout reste visible. */

/* La ligne WPBakery qui contient la hero ne doit pas ajouter d'espace */
.wpb_row:has(.kai-hb),
.wpb_row:has(.kai-hb) > .row_col_wrap_12,
.wpb_row:has(.kai-hb) .vc_column-inner,
.wpb_row:has(.kai-hb) .wpb_wrapper { padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
.wpb_row:has(.kai-hb) { position: relative; z-index: 30 !important; }

@media (min-width: 1025px) {
	.kai-hb {
		--kai-field-h: clamp(56px, 7.4vh, 68px);
		display: flex;
		height: calc(100vh - var(--kai-header-h, 66px));
		height: calc(100svh - var(--kai-header-h, 66px));
		min-height: 540px;
		max-height: 1100px;
		padding: clamp(16px, 3.5vh, 48px) 0;
	}
	.kai-hb__inner { width: 100%; height: 100%; align-items: stretch; }
	.kai-hb__content { display: flex; flex-direction: column; justify-content: center; min-height: 0; }

	body .kai-hb h1.kai-hb__title {
		font-size: clamp(34px, min(4.4vw, 7.4vh), 70px) !important;
		margin: clamp(10px, 2.2vh, 22px) 0 clamp(10px, 1.8vh, 18px) !important;
	}
	body .kai-hb .kai-hb__lead {
		font-size: clamp(15px, 2.1vh, 18px);
		margin-bottom: clamp(14px, 3.2vh, 30px);
	}
	.kai-hb__seg-opt > span { min-height: clamp(40px, 5.4vh, 44px); }
	body .kai-hb fieldset.kai-hb__when { margin-bottom: clamp(10px, 1.6vh, 14px); }
	.kai-hb__actions { margin-top: clamp(14px, 2.6vh, 22px); }
	body .kai-hb button.kai-hb__submit { height: clamp(48px, 6.6vh, 58px); }

	/* Images : remplissent la hauteur disponible */
	.kai-hb__media { height: 90%; min-height: 0; align-items: stretch; margin: auto ; }
	.kai-hb__col { height: 100%; min-height: 0; grid-template-rows: 1fr 1.35fr; padding-top: 6%; }
	.kai-hb__col--offset { margin-top: 0; padding-top: 0; padding-bottom: 6%; grid-template-rows: 1.35fr 1fr; }
	.kai-hb__tile--short,
	.kai-hb__tile--tall { aspect-ratio: auto; min-height: 0; }
}

/* Header transparent (page d'accueil) : il passe par-dessus la hero, on réserve sa place */
@media (min-width: 1025px) {
	body:has(#header-outer[data-transparent-header="true"]) .kai-hb {
		height: 100vh;
		height: 100svh;
		min-height: calc(540px + var(--kai-header-h, 66px));
		padding-top: calc(var(--kai-header-h, 66px) + clamp(16px, 3.5vh, 48px));
		margin-bottom:  var(--kai-header-h, 66px);
	}
}
@media (max-width: 1024px) {
	body:has(#header-outer[data-transparent-header="true"]) .kai-hb {
		padding-top: calc(var(--kai-header-h, 50px) + 14px);
	}
}

/* Écrans peu hauts : on retire le superflu */
@media (min-width: 1025px) and (max-height: 720px) {
	body .kai-hb .kai-hb__lead { max-height: 0; opacity: 0; margin-bottom: 0; }
	.kai-hb__note { display: none; }
}
/* ---------- Carte « Téléchargez l'app » ---------- */

body .kai-hb a.kai-hb__app {
	position: absolute;
	z-index: 2;
	left: -36px;
	right: 36px;
	bottom: 28px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 14px 14px 22px;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 20px;
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	        backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: 0 24px 50px rgba(36, 47, 62, .18);
	color: var(--kai-navy);
	text-decoration: none;
	animation: kai-hb-up 1s var(--kai-ease) backwards;
	animation-delay: calc(var(--d, 0) * 1ms);
	transition: transform .4s var(--kai-ease), box-shadow .4s var(--kai-ease);
}
body .kai-hb a.kai-hb__app:hover {
	transform: translateY(-4px);
	box-shadow: 0 30px 60px rgba(36, 47, 62, .24);
}
body .kai-hb a.kai-hb__app:focus-visible { outline: 2px solid var(--kai-green); outline-offset: 3px; }

.kai-hb__app-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.kai-hb__app-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.kai-hb__app-sub { margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--kai-muted); }

.kai-hb__app-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--kai-navy);
	color: var(--kai-white);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	transition: background .25s;
}
.kai-hb__app:hover .kai-hb__app-btn { background: #1A2330; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.kai-hb__inner { grid-template-columns: 1fr; }
	.kai-hb__content { max-width: 620px; }
	.kai-hb__media { max-width: 620px; }
	.kai-hb__col--offset { margin-top: 36px; }
	body .kai-hb a.kai-hb__app { left: 16px; right: 16px; }
}

@media (max-width: 600px) {
	.kai-hb { padding-top: 14px; --kai-field-h: 62px; }
	body .kai-hb h1.kai-hb__title { font-size: clamp(30px, 8.6vw, 40px) !important; margin: 14px 0 10px !important; }
	body .kai-hb .kai-hb__lead { font-size: 16px; margin-bottom: 24px; }
	.kai-hb__seg { display: grid; grid-template-columns: 1fr 1fr; }
	.kai-hb__route { padding-right: 54px; }
	.kai-hb__airport { font-size: 16px; white-space: nowrap; }
	.kai-hb__iata { display: none; }
	body .kai-hb button.kai-hb__submit { width: 100%; }
	.kai-hb__note { width: 100%; text-align: center; }
	.kai-hb__media { gap: 10px; }
	.kai-hb__col { display: contents; }
	.kai-hb__col--offset { margin-top: 0; }
	body .kai-hb figure.kai-hb__tile { aspect-ratio: 1; border-radius: 14px; }
	body .kai-hb a.kai-hb__app { position: relative; grid-column: 1 / -1; left: 0; right: 0; bottom: 0; margin-top: 2px; }
	.kai-hb__app-sub { display: none; }
}

/* Petits téléphones : le formulaire d'abord */
@media (max-width: 600px) and (max-height: 760px) {
	body .kai-hb .kai-hb__lead { display: none; }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
	.kai-hb *,
	.kai-hb *::before,
	.kai-hb *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}