/*
 * KH Assistant — styles du widget visiteur (module F).
 * Tout est préfixé .kha- et limité au widget : aucun élément du thème n'est stylé.
 * Couleurs et polices reprises du thème « kevin-helou » avec valeurs de repli.
 */

.kha-root {
	--kha-green: var(--green, #2D6A4F);
	--kha-green-dark: #24573f;
	--kha-black: var(--black, #080808);
	--kha-white: var(--white, #f8f7f4);
	--kha-cream: var(--cream, #f2efe9);
	--kha-gray: var(--gray, #7a7a7a);
	--kha-line: var(--gray-light, #d6d3cd);
	--kha-ink: #1c1c1a;
	--kha-muted: #5c5a55;
	--kha-field: #8c887f;
	--kha-error: #a3271f;
	--kha-error-bg: #fbeceb;
	--kha-paper: #ffffff;
	--kha-font-d: var(--font-d, 'Playfair Display', Georgia, serif);
	--kha-font-b: var(--font-b, 'DM Sans', system-ui, sans-serif);
	--kha-ease: cubic-bezier(.16, 1, .3, 1);
	--kha-shadow: 0 24px 60px rgba(8, 8, 8, .18), 0 2px 10px rgba(8, 8, 8, .06);
}

/* ---------- Remise à zéro locale (le thème remet margin/padding à 0 globalement) ---------- */

.kha-root,
.kha-root *,
.kha-root *::before,
.kha-root *::after {
	box-sizing: border-box;
}

.kha-root [hidden] {
	display: none !important;
}

/* :where() garde la spécificité d'une seule classe : les règles .kha-… qui suivent l'emportent. */
.kha-panel :where(h2, h3, h4, p, ul, li, form, fieldset, legend) {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.kha-panel :where(ul) {
	list-style: none;
}

.kha-root :where(button, input, select, textarea) {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.kha-root :where(a) {
	color: inherit;
}

.kha-panel :where(img) {
	display: block;
	max-width: 100%;
}

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

.kha-ico {
	display: inline-flex;
	flex: none;
	width: 20px;
	height: 20px;
}

.kha-ico svg {
	display: block;
	width: 100%;
	height: 100%;
}

.kha-root :focus-visible {
	outline: 2px solid var(--kha-green);
	outline-offset: 2px;
}

.kha-root :focus:not(:focus-visible),
.kha-head__title:focus,
.kha-view__title:focus,
.kha-fb__thanks:focus {
	outline: none;
}

/* ---------- Lanceur ---------- */

.kha-launcher {
	position: fixed;
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 24px 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--kha-green);
	color: #fff;
	font: 500 .75rem/1 var(--kha-font-b);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(45, 106, 79, .32), 0 2px 6px rgba(8, 8, 8, .12);
	transition: transform .35s var(--kha-ease), background-color .25s ease, box-shadow .35s var(--kha-ease);
	animation: kha-fade .5s .3s both;
	-webkit-tap-highlight-color: transparent;
}

.kha-launcher:hover {
	background: var(--kha-green-dark);
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(45, 106, 79, .38), 0 2px 6px rgba(8, 8, 8, .12);
}

.kha-launcher:focus-visible {
	outline: 3px solid var(--kha-black);
	outline-offset: 3px;
}

.kha-launcher .kha-ico {
	width: 22px;
	height: 22px;
}

.kha-root.kha-is-open .kha-launcher {
	display: none;
}

/* Halo blanc qui pulse lentement autour du lanceur (liseré discret pour les fonds clairs). */
.kha-launcher::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	animation: kha-halo 3.6s cubic-bezier(.25, .6, .35, 1) 1.5s infinite;
}

.kha-launcher__ico {
	position: relative;
	display: inline-flex;
}

/* Point « en ligne » : l'assistant répond en direct. */
.kha-live {
	position: relative;
	display: inline-block;
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #4ade80;
}

.kha-live::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: kha-ping 2.4s ease-out infinite;
}

.kha-launcher .kha-live {
	position: absolute;
	top: -3px;
	right: -4px;
	box-shadow: 0 0 0 2px var(--kha-green);
}

.kha-launcher:hover .kha-live {
	box-shadow: 0 0 0 2px var(--kha-green-dark);
}

/* ---------- Bulle d'accroche ---------- */

.kha-teaser {
	position: fixed;
	right: 24px;
	bottom: calc(24px + 54px + 16px + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	display: flex;
	align-items: flex-start;
	gap: 2px;
	width: 290px;
	max-width: calc(100vw - 32px);
	padding: 14px 8px 15px 18px;
	border-radius: 16px;
	background: var(--kha-paper);
	color: var(--kha-ink);
	box-shadow: var(--kha-shadow);
	font: 400 .92rem/1.45 var(--kha-font-b);
	animation: kha-rise .6s var(--kha-ease) both;
}

.kha-teaser::after {
	content: '';
	position: absolute;
	right: 38px;
	bottom: -6px;
	width: 14px;
	height: 14px;
	border-radius: 0 0 3px 0;
	background: var(--kha-paper);
	transform: rotate(45deg);
}

.kha-teaser__open {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.kha-teaser__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--kha-green);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.kha-teaser__title .kha-live {
	width: 8px;
	height: 8px;
	background: #22a35a;
}

.kha-teaser__text {
	color: var(--kha-ink);
}

.kha-teaser__open:hover .kha-teaser__text {
	text-decoration: underline;
	text-decoration-color: var(--kha-line);
	text-underline-offset: 3px;
}

.kha-teaser__close {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: -6px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--kha-muted);
	cursor: pointer;
}

.kha-teaser__close:hover {
	background: var(--kha-cream);
	color: var(--kha-ink);
}

.kha-teaser__close .kha-ico {
	width: 16px;
	height: 16px;
}

.kha-root.kha-is-open .kha-teaser {
	display: none;
}

/* ---------- Fond et panneau ---------- */

.kha-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99990;
	background: rgba(8, 8, 8, .16);
	animation: kha-fade .25s ease both;
}

.kha-panel {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 680px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow: hidden;
	border-radius: 14px;
	background: var(--kha-white);
	color: var(--kha-ink);
	box-shadow: var(--kha-shadow);
	font: 400 15px/1.5 var(--kha-font-b);
	text-align: left;
	-webkit-font-smoothing: antialiased;
	animation: kha-in .35s var(--kha-ease) both;
}

/* ---------- En-tête ---------- */

.kha-head {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	padding: 14px 10px 14px 18px;
	background: var(--kha-black);
	color: var(--kha-white);
}

.kha-head__mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--kha-green);
	color: #fff;
}

.kha-head__mark svg {
	display: block;
	width: 20px;
	height: 20px;
}

.kha-head__title {
	flex: 1;
	min-width: 0;
	font: 400 1.14rem/1.2 var(--kha-font-d);
	letter-spacing: .01em;
	color: var(--kha-white);
}

.kha-head__sub {
	display: block;
	margin-top: 4px;
	font: 400 .66rem/1.3 var(--kha-font-b);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #c9c5bc;
}

.kha-close {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--kha-white);
	cursor: pointer;
	transition: background-color .2s ease;
}

.kha-close:hover {
	background: rgba(248, 247, 244, .12);
}

.kha-head :focus-visible {
	outline-color: var(--kha-white);
}

/* ---------- Canaux ---------- */

.kha-channels {
	flex: none;
	padding: 10px 12px;
	background: var(--kha-cream);
	border-bottom: 1px solid var(--kha-line);
}

.kha-chrow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.kha-ch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	min-height: 44px;
	padding: 6px 8px;
	border: 1px solid var(--kha-line);
	border-radius: 10px;
	background: var(--kha-paper);
	color: var(--kha-ink);
	font-size: .8rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.kha-ch span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kha-ch .kha-ico {
	width: 18px;
	height: 18px;
	color: var(--kha-green);
}

.kha-ch:hover {
	border-color: var(--kha-green);
	color: var(--kha-green);
}

.kha-channels__note {
	margin-top: 8px;
	font-size: .75rem;
	line-height: 1.4;
	text-align: center;
	color: var(--kha-muted);
}

/* ---------- Corps ---------- */

.kha-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	padding: 18px 16px 22px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--kha-line) transparent;
}

.kha-view {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kha-view__head {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	margin: -8px 0 2px;
}

.kha-view__title {
	font: 400 1.22rem/1.25 var(--kha-font-d);
	color: var(--kha-black);
}

.kha-back {
	display: grid;
	flex: none;
	margin-left: -10px;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--kha-ink);
	cursor: pointer;
	transition: background-color .2s ease;
}

.kha-back:hover {
	background: var(--kha-cream);
}

.kha-lead {
	font-size: .95rem;
	line-height: 1.55;
	color: var(--kha-ink);
}

.kha-intro {
	font-size: .9rem;
	color: var(--kha-ink);
}

.kha-hint,
.kha-info,
.kha-note {
	font-size: .74rem;
	line-height: 1.45;
	color: var(--kha-muted);
}

/* Mention « Conception : … » en bas de l'accueil. */
.kha-credits {
	margin: 18px 0 0;
	font-size: .7rem;
	line-height: 1.45;
	text-align: center;
	color: var(--kha-muted);
}

.kha-credits .kha-link {
	color: inherit;
}

.kha-link {
	color: var(--kha-green);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

.kha-link:hover {
	color: var(--kha-green-dark);
}

.kha-center {
	align-items: stretch;
	padding-top: 12px;
	text-align: center;
}

.kha-loading {
	align-items: center;
	justify-content: center;
	min-height: 220px;
	color: var(--kha-muted);
	font-size: .9rem;
}

.kha-spinner {
	width: 28px;
	height: 28px;
	border: 2px solid var(--kha-line);
	border-top-color: var(--kha-green);
	border-radius: 50%;
	animation: kha-spin .8s linear infinite;
}

/* ---------- Conversation ---------- */

.kha-log {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kha-msg {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	max-width: 100%;
	animation: kha-rise .3s var(--kha-ease) both;
}

.kha-msg--user {
	align-items: flex-end;
}

.kha-bubble {
	max-width: 90%;
	padding: 11px 14px;
	border-radius: 14px;
	font-size: .92rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.kha-msg--bot .kha-bubble {
	border: 1px solid var(--kha-line);
	border-top-left-radius: 4px;
	background: var(--kha-paper);
	color: var(--kha-ink);
}

.kha-msg--user .kha-bubble {
	border-top-right-radius: 4px;
	background: var(--kha-green);
	color: #fff;
}

.kha-msg--user .kha-link {
	color: #fff;
}

.kha-p {
	white-space: pre-line;
}

.kha-p + .kha-p {
	margin-top: 8px;
}

.kha-quick {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.kha-qbtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 46px;
	padding: 10px 16px;
	border: 1px solid var(--kha-line);
	border-radius: 10px;
	background: var(--kha-paper);
	color: var(--kha-ink);
	font-size: .9rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, transform .2s var(--kha-ease);
}

.kha-qbtn::after {
	content: '';
	flex: none;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
}

.kha-qbtn:hover {
	border-color: var(--kha-green);
	color: var(--kha-green);
	transform: translateX(2px);
}

.kha-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

.kha-actions__ch {
	width: 100%;
}

.kha-chip {
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--kha-green);
	border-radius: 999px;
	background: var(--kha-paper);
	color: var(--kha-green);
	font-size: .85rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.kha-chip:hover {
	background: var(--kha-green);
	color: #fff;
}

/* Suggestions de recherche : puces sous la bulle, désactivées après le choix. */
.kha-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

/* Titre du groupe quand aucune question ne l'introduit (affiner une liste, élargir une liste vide). */
.kha-choices__label {
	flex-basis: 100%;
	margin: 0;
	color: var(--kha-muted);
	font-size: .8125rem;
	line-height: 1.4;
}

/* aria-disabled (et non disabled) : le focus reste sur la puce touchée. */
.kha-choice:disabled,
.kha-choice[aria-disabled="true"] {
	cursor: default;
	opacity: .5;
}

.kha-choice:disabled:hover,
.kha-choice[aria-disabled="true"]:hover {
	background: var(--kha-paper);
	color: var(--kha-green);
}

.kha-choice--picked,
.kha-choice--picked:disabled,
.kha-choice--picked:disabled:hover,
.kha-choice--picked[aria-disabled="true"],
.kha-choice--picked[aria-disabled="true"]:hover {
	background: var(--kha-green);
	color: #fff;
	opacity: 1;
}

.kha-fb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	font-size: .76rem;
	color: var(--kha-muted);
}

.kha-fb__q {
	margin-right: 2px;
}

.kha-fb__btn {
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--kha-ink);
	font-size: .8rem;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.kha-fb__btn:hover {
	border-color: var(--kha-line);
	color: var(--kha-green);
}

.kha-fb__thanks {
	font-size: .76rem;
	color: var(--kha-green);
}

.kha-typing .kha-bubble {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--kha-muted);
	font-size: .85rem;
}

.kha-dots {
	display: inline-flex;
	gap: 4px;
}

.kha-dots i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kha-gray);
	animation: kha-dot 1.2s ease-in-out infinite;
}

.kha-dots i:nth-child(2) {
	animation-delay: .15s;
}

.kha-dots i:nth-child(3) {
	animation-delay: .3s;
}

/* ---------- Champ de question ---------- */

.kha-foot {
	flex: none;
	padding: 12px 14px 12px;
	border-top: 1px solid var(--kha-line);
	background: var(--kha-paper);
}

.kha-composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.kha-composer__input {
	flex: 1;
	min-width: 0;
	height: 46px;
	min-height: 46px;
	max-height: 120px;
	padding: 12px 14px;
	border: 1px solid var(--kha-field);
	border-radius: 12px;
	background: var(--kha-white);
	font-size: 16px;
	line-height: 1.35;
	resize: none;
	transition: border-color .2s ease;
}

.kha-composer__input::placeholder,
.kha-input::placeholder {
	color: var(--kha-muted);
	opacity: 1;
}

.kha-composer__input:focus {
	border-color: var(--kha-green);
}

.kha-composer__send {
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--kha-green);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
}

.kha-composer__send:hover {
	background: var(--kha-green-dark);
}

.kha-composer__send:disabled {
	opacity: .55;
	cursor: progress;
}

.kha-foot .kha-err {
	margin-top: 6px;
}

.kha-foot .kha-note {
	margin-top: 8px;
	font-size: .7rem;
}

/* ---------- Cartes ---------- */

.kha-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kha-cards--inline {
	gap: 10px;
	width: 100%;
}

.kha-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--kha-line);
	border-radius: 12px;
	background: var(--kha-paper);
}

.kha-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--kha-cream);
}

.kha-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kha-card__flag {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--kha-black);
	color: var(--kha-white);
	font-size: .64rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.kha-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 14px 14px 16px;
}

.kha-card__kicker {
	font-size: .64rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kha-green);
}

.kha-card__title {
	font: 400 1.08rem/1.3 var(--kha-font-d);
	color: var(--kha-black);
}

.kha-card__slogan {
	font-size: .85rem;
	font-style: italic;
	color: var(--kha-muted);
}

.kha-card__meta {
	font-size: .8rem;
	color: var(--kha-muted);
}

.kha-card__price {
	margin-top: 2px;
	font-size: .95rem;
	font-weight: 600;
	color: var(--kha-ink);
	font-variant-numeric: tabular-nums;
}

.kha-typo {
	display: flex;
	flex-direction: column;
	margin-top: 6px;
	font-size: .8rem;
}

.kha-typo li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px dashed var(--kha-line);
}

.kha-typo li:last-child {
	border-bottom: 0;
}

.kha-typo__d {
	flex: none;
	color: var(--kha-muted);
}

.kha-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.kha-card__actions .kha-btn {
	flex: 1 1 auto;
}

.kha-card--compact {
	flex-direction: row;
}

.kha-card--compact .kha-card__media {
	flex: 0 0 92px;
	aspect-ratio: auto;
}

.kha-card--compact .kha-card__body {
	padding: 10px 12px 12px;
}

.kha-card--compact .kha-card__title {
	font-size: .95rem;
}

.kha-card--compact .kha-card__flag {
	top: 6px;
	left: 6px;
	padding: 3px 7px;
	font-size: .58rem;
}

.kha-card--compact .kha-card__actions {
	margin-top: 6px;
}

/* ---------- Boutons ---------- */

.kha-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: .74rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .12em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.kha-btn--primary {
	background: var(--kha-green);
	color: #fff;
}

.kha-btn--primary:hover {
	background: var(--kha-green-dark);
	color: #fff;
}

.kha-btn--ghost {
	border-color: var(--kha-black);
	background: transparent;
	color: var(--kha-black);
}

.kha-btn--ghost:hover {
	background: var(--kha-black);
	color: var(--kha-white);
}

.kha-btn--sm {
	min-height: 44px;
	padding: 8px 12px;
	font-size: .68rem;
	letter-spacing: .1em;
}

.kha-btn[disabled] {
	opacity: .6;
	cursor: progress;
}

/* ---------- Formulaires ---------- */

.kha-form,
.kha-form__main,
.kha-libre {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kha-form__intro {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kha-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.kha-label {
	font-size: .82rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--kha-ink);
}

.kha-field--choice .kha-label {
	margin-bottom: 6px;
}

.kha-req {
	color: var(--kha-error);
}

.kha-opt {
	font-weight: 400;
	color: var(--kha-muted);
}

.kha-input {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--kha-field);
	border-radius: 10px;
	background: var(--kha-paper);
	font-size: 16px;
	line-height: 1.35;
	color: var(--kha-ink);
	transition: border-color .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

select.kha-input {
	padding-right: 38px;
	background: var(--kha-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232D6A4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat;
	cursor: pointer;
}

textarea.kha-input {
	min-height: 120px;
	resize: vertical;
}

.kha-input:focus {
	border-color: var(--kha-green);
	box-shadow: 0 0 0 3px rgba(45, 106, 79, .15);
}

.kha-input[aria-invalid="true"] {
	border-color: var(--kha-error);
}

.kha-err {
	font-size: .78rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--kha-error);
}

.kha-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kha-pill {
	position: relative;
	display: inline-flex;
}

.kha-pill__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.kha-pill span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 15px;
	border: 1px solid var(--kha-field);
	border-radius: 999px;
	background: var(--kha-paper);
	font-size: .85rem;
	line-height: 1.25;
	color: var(--kha-ink);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.kha-pill:hover span {
	border-color: var(--kha-green);
}

.kha-pill__input:checked + span {
	border-color: var(--kha-green);
	background: var(--kha-green);
	color: #fff;
}

.kha-pill__input:focus-visible + span {
	outline: 2px solid var(--kha-green);
	outline-offset: 2px;
}

.kha-pill__input[aria-invalid="true"] + span {
	border-color: var(--kha-error);
}

.kha-form__sub {
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid var(--kha-line);
	font: 400 1rem/1.3 var(--kha-font-d);
	color: var(--kha-black);
}

.kha-form__main > .kha-btn--primary,
.kha-libre > .kha-btn--primary {
	width: 100%;
}

.kha-form__status {
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--kha-error-bg);
	font-size: .82rem;
	line-height: 1.4;
	color: var(--kha-error);
}

.kha-form__status:empty {
	padding: 0;
	background: none;
}

.kha-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Succès ---------- */

.kha-success {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kha-success > .kha-ico {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 12px;
	border-radius: 50%;
	background: var(--kha-green);
	color: #fff;
}

.kha-ref {
	align-self: flex-start;
	padding: 7px 12px;
	border-radius: 8px;
	background: var(--kha-cream);
	font-weight: 600;
	letter-spacing: .03em;
	font-variant-numeric: tabular-nums;
}

/* ---------- Mobile : feuille en bas d'écran ---------- */

@media (max-width: 639px) {
	.kha-launcher {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		justify-content: center;
		width: 56px;
		height: 56px;
		min-height: 0;
		padding: 0;
	}

	.kha-launcher__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.kha-launcher .kha-ico {
		width: 26px;
		height: 26px;
	}

	.kha-teaser {
		right: 16px;
		bottom: calc(16px + 56px + 16px + env(safe-area-inset-bottom, 0px));
		width: 270px;
	}

	.kha-teaser::after {
		right: 21px;
	}

	.kha-teaser__close {
		width: 40px;
		height: 40px;
		margin: -10px -2px 0 0;
	}

	.kha-backdrop {
		background: rgba(8, 8, 8, .42);
	}

	.kha-panel {
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: none;
		height: 85vh;
		height: 85dvh;
		max-height: 85vh;
		border-radius: 14px 14px 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		animation-name: kha-up;
	}

	.kha-ch {
		flex-direction: column;
		gap: 3px;
		padding: 6px 4px;
		font-size: .72rem;
	}
}

/* ---------- Animations ---------- */

@keyframes kha-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes kha-in {
	from { opacity: 0; transform: translateY(14px) scale(.98); }
	to { opacity: 1; transform: none; }
}

@keyframes kha-up {
	from { transform: translateY(100%); }
	to { transform: none; }
}

@keyframes kha-rise {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@keyframes kha-dot {
	0%, 80%, 100% { opacity: .3; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

@keyframes kha-spin {
	to { transform: rotate(360deg); }
}

@keyframes kha-halo {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .95), 0 0 0 0 rgba(8, 8, 8, .14); }
	20% { box-shadow: 0 0 4px 5px rgba(255, 255, 255, .8), 0 0 4px 6px rgba(8, 8, 8, .08); }
	70%, 100% { box-shadow: 0 0 12px 18px rgba(255, 255, 255, 0), 0 0 12px 19px rgba(8, 8, 8, 0); }
}

@keyframes kha-ping {
	0% { transform: scale(1); opacity: .75; }
	75%, 100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.kha-root *,
	.kha-root *::before,
	.kha-root *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.kha-bubble,
	.kha-card,
	.kha-qbtn,
	.kha-ch {
		border: 1px solid CanvasText;
	}

	.kha-pill__input:checked + span,
	.kha-choice--picked {
		outline: 2px solid Highlight;
	}
}

@media print {
	.kha-root {
		display: none !important;
	}
}