/* =========================================================
   HD — Assistant IA (bulle native)
   Couleurs du logo : orange #ED6C3D, vert #0D714C, bleu #2A6DB4 ; marine #0B1F3A.
   Règle : aucun transform sur .hda (il enfermerait le voile et la fenêtre fixes).
   ========================================================= */
html.hd-assistant-on #hdwd-chat-wrap { display: none !important; }

.hda {
	--hda-navy: #0B1F3A;
	--hda-navy-2: #132B4D;
	--hda-orange: #ED6C3D;
	--hda-orange-dark: #C9552A;
	--hda-green: #0D714C;
	--hda-blue: #2A6DB4;
	--hda-bg: #F5F7FA;
	--hda-line: #E3E7EE;
	--hda-text: #1B2433;
	--hda-text-2: #5B6678;
	--hda-ease: cubic-bezier(.16, 1, .3, 1);
	font-family: var(--hd-font, "Plus Jakarta Sans", system-ui, sans-serif);
	color: var(--hda-text);
	-webkit-font-smoothing: antialiased;
}
.hda *, .hda *::before, .hda *::after { box-sizing: border-box; }
.hda button { font: inherit; }
.hda-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Bulle ---------- */
.hda-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999997;
	width: 62px;
	height: 62px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #1D3A63 0%, var(--hda-navy) 62%);
	box-shadow: 0 12px 28px rgba(11, 31, 58, .35), 0 3px 8px rgba(11, 31, 58, .2);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: translate .5s var(--hda-ease), transform .35s var(--hda-ease), box-shadow .35s var(--hda-ease), opacity .3s ease;
}
.hda.is-lifted .hda-fab { translate: 0 calc(-1 * var(--hda-lift, 0px)); }
.hda-fab .hda-fab__ring { /* anneau vectoriel aux trois couleurs du logo */
	position: absolute;
	inset: -5px;
	width: 72px;
	height: 72px;
	pointer-events: none;
	overflow: visible;
	animation: hdaSpin 9s linear infinite;
	will-change: transform;
	backface-visibility: hidden;
}
.hda-fab__ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.hda-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 34px rgba(11, 31, 58, .4), 0 4px 10px rgba(11, 31, 58, .22); }
.hda-fab:focus-visible { outline: 3px solid var(--hda-orange); outline-offset: 5px; }
.hda-fab svg { width: 30px; height: 30px; display: block; }
.hda-fab__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--hda-green);
	border: 2px solid #fff;
}
.hda.is-open .hda-fab { opacity: 0; pointer-events: none; transform: scale(.85); }
html.hd-menu-open .hda-fab { opacity: 0; pointer-events: none; }
.hda-fab__dot { animation: hdaDot 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hda-fab__dot:nth-of-type(2) { animation-delay: .18s; }
.hda-fab__dot:nth-of-type(3) { animation-delay: .36s; }

/* ---------- Voile ---------- */
.hda-overlay {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: rgba(11, 31, 58, .28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .3s ease;
}
.hda.is-open .hda-overlay { opacity: 1; }

/* ---------- Fenêtre ---------- */
.hda-panel {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999999;
	width: 410px;
	height: min(680px, calc(100vh - 48px));
	height: min(680px, calc(100dvh - 48px));
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(11, 31, 58, .32), 0 0 0 1px rgba(11, 31, 58, .06);
	opacity: 0;
	transform: translateY(20px) scale(.97);
	transform-origin: bottom right;
	transition: opacity .3s ease, transform .45s var(--hda-ease);
}
.hda.is-open .hda-panel { opacity: 1; transform: none; }
.hda-panel[hidden], .hda-overlay[hidden] { display: none; }

/* En-tête */
.hda-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 16px 18px 18px;
	background: linear-gradient(135deg, var(--hda-navy) 0%, var(--hda-navy-2) 100%);
	color: #fff;
}
.hda-head::after { /* bande aux trois couleurs */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--hda-orange) 0 33.3%, var(--hda-green) 33.3% 66.6%, var(--hda-blue) 66.6% 100%);
}
.hda-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hda-avatar {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	display: grid;
	place-items: center;
}
.hda-avatar img { width: 32px; height: 32px; object-fit: contain; display: block; }
.hda-avatar b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.hda-avatar::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #1FB877;
	border: 2px solid var(--hda-navy);
}
.hda-title { margin: 0; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.2; color: #fff; }
.hda-status { margin: 3px 0 0; padding: 0; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .72); }
.hda-tools { display: flex; gap: 6px; flex: 0 0 auto; }
.hda-icon-btn {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background-color .25s ease, transform .25s ease;
}
.hda-icon-btn:hover { background: rgba(255, 255, 255, .2); }
.hda-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hda-close:hover { background: var(--hda-orange); transform: rotate(90deg); }
.hda-icon-btn svg { width: 18px; height: 18px; display: block; }

/* Raccourcis aux trois couleurs */
.hda-actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	padding: 12px 14px;
	background: #fff;
	border-bottom: 1px solid var(--hda-line);
}
.hda-act {
	--c: var(--hda-orange);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 9px 4px 8px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--c) 9%, #fff);
	border: 1px solid color-mix(in srgb, var(--c) 22%, #fff);
	color: var(--c);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	transition: background-color .25s ease, color .25s ease, transform .25s var(--hda-ease);
}
.hda-act svg { width: 18px; height: 18px; display: block; }
.hda-act:hover { background: var(--c); color: #fff; transform: translateY(-2px); }
.hda-act:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.hda-act--orange { --c: var(--hda-orange-dark); }
.hda-act--green { --c: var(--hda-green); }
.hda-act--blue { --c: var(--hda-blue); }

/* Conversation */
.hda-log {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 16px 8px;
	background: var(--hda-bg);
	scroll-behavior: smooth;
}
.hda-msg { display: flex; gap: 8px; margin: 0 0 12px; align-items: flex-end; }
.hda-msg--user { justify-content: flex-end; }
.hda-msg__av {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hda-navy);
	display: grid;
	place-items: center;
}
.hda-msg__av img { width: 18px; height: 18px; object-fit: contain; display: block; }
.hda-msg__av b { color: #fff; font-size: 10px; font-weight: 800; }
.hda-bubble {
	max-width: 84%;
	padding: 11px 14px;
	border-radius: 18px 18px 18px 6px;
	background: #fff;
	border: 1px solid var(--hda-line);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--hda-text);
	overflow-wrap: anywhere;
	animation: hdaIn .35s var(--hda-ease) both;
}
.hda-msg--user .hda-bubble {
	border-radius: 18px 18px 6px 18px;
	background: var(--hda-navy);
	border-color: var(--hda-navy);
	color: #fff;
}
.hda-bubble p { margin: 0 0 8px; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.hda-bubble p:last-child { margin-bottom: 0; }
.hda-bubble ul { margin: 4px 0 8px; padding: 0 0 0 18px; }
.hda-bubble li { margin: 0 0 3px; padding: 0; }
.hda-bubble strong { font-weight: 700; color: inherit; }
.hda-bubble a { color: var(--hda-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hda-bubble a.hda-pill {
	--c: var(--hda-blue);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 6px 4px 2px 0;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--c);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: filter .2s ease, transform .2s var(--hda-ease);
}
.hda-bubble a.hda-pill::after { content: "→"; font-weight: 700; }
.hda-bubble a.hda-pill:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hda-pill--orange { --c: var(--hda-orange) !important; }
.hda-pill--green { --c: var(--hda-green) !important; }
.hda-pill--blue { --c: var(--hda-blue) !important; }
.hda-bubble--error { border-color: color-mix(in srgb, var(--hda-orange) 35%, #fff); }

/* Indicateur d'écriture : trois points aux couleurs du logo */
.hda-typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.hda-typing i { width: 8px; height: 8px; border-radius: 50%; display: block; animation: hdaDot 1.2s ease-in-out infinite; }
.hda-typing i:nth-child(1) { background: var(--hda-orange); }
.hda-typing i:nth-child(2) { background: var(--hda-green); animation-delay: .15s; }
.hda-typing i:nth-child(3) { background: var(--hda-blue); animation-delay: .3s; }

/* Suggestions */
.hda-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px 34px; }
.hda-chip {
	--c: var(--hda-orange);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border: 1px solid var(--hda-line);
	border-radius: 999px;
	background: #fff;
	color: var(--hda-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, transform .2s var(--hda-ease);
	animation: hdaIn .4s var(--hda-ease) both;
}
.hda-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.hda-chip:nth-child(3n+2) { --c: var(--hda-green); }
.hda-chip:nth-child(3n+3) { --c: var(--hda-blue); }
.hda-chip:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); transform: translateY(-1px); }
.hda-chip:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* Saisie */
.hda-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
	padding: 10px 12px 8px;
	background: #fff;
	border-top: 1px solid var(--hda-line);
}
.hda-input {
	flex: 1 1 auto;
	min-height: 44px;
	max-height: 120px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--hda-line);
	border-radius: 14px;
	background: var(--hda-bg);
	color: var(--hda-text);
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	resize: none;
	outline: none;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.hda-input::placeholder { color: #8A93A3; }
.hda-input:focus { border-color: var(--hda-blue); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hda-blue) 15%, transparent); }
.hda-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.hda-send {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--hda-orange);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s var(--hda-ease), opacity .2s ease;
}
.hda-send:hover { background: var(--hda-orange-dark); transform: scale(1.05); }
.hda-send:disabled { opacity: .45; cursor: default; transform: none; }
.hda-send:focus-visible { outline: 2px solid var(--hda-navy); outline-offset: 2px; }
.hda-send svg { width: 20px; height: 20px; display: block; }
.hda-note {
	margin: 0;
	padding: 0 14px 10px;
	background: #fff;
	font-size: 11px;
	line-height: 1.4;
	color: #8A93A3;
	text-align: center;
}
.hda-note a { color: inherit; text-decoration: underline; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.hda-fab { right: 16px; bottom: 16px; width: 58px; height: 58px; }
	.hda-panel {
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		height: calc(100vh - 40px);
		height: calc(100dvh - 40px);
		border-radius: 22px 22px 0 0;
		transform: translateY(30px);
		transform-origin: bottom center;
	}
	.hda-head { padding-top: 14px; }
	.hda-act { font-size: 11.5px; }
	.hda-input { font-size: 16px; } /* évite le zoom automatique sur iPhone */
	.hda-form { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}

@keyframes hdaSpin { to { transform: rotate(360deg); } }
@keyframes hdaDot { 0%, 80%, 100% { transform: translateY(0); opacity: .55; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes hdaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.hda-fab::before, .hda-fab__dot, .hda-typing i { animation: none; }
	.hda-bubble, .hda-chip { animation: none; }
	.hda-panel, .hda-overlay, .hda-fab { transition: none; }
}