/* WEB PREMIERE - Assistant de conversation (webp-leads)
   Charte 2026 : nuit #050a17 pour l'en-tête et le lanceur, crème #f8f8f0 pour la conversation, encre noire,
   bleu #1c77b5 réservé aux actions, azur #47a4e3 sur fond sombre, une seule touche de violet #9282ff
   (la pastille du lanceur et le fil de progression). Pas de dégradé, rayons de 2 px (angles quasi droits, comme le site).
   Toujours au premier plan : au-dessus de la colonne fixe de droite, du bouton LinkedIn et de tout le site. */
.wl-bulle,
.wl-fond {
	--wl-nuit: #050a17;
	--wl-creme: #f8f8f0;
	--wl-encre: #000;
	--wl-gris: #5c6470;
	--wl-filet: #dfe2e6;
	--wl-action: #1c77b5;
	--wl-action-fonce: #145a8a;
	--wl-azur: #47a4e3;
	--wl-violet: #9282ff;
	--wl-entree: cubic-bezier(.22, 1, .36, 1);
}
.wl-bulle {
	position: fixed;
	right: 20px;
	right: calc(20px + env(safe-area-inset-right));
	bottom: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom)); /* au-dessus de la barre du bas de Safari sur iPhone */
	z-index: 2147483647;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: 'Open sans', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--wl-encre);
	text-align: left;
}
.wl-bulle *,
.wl-bulle *::before,
.wl-bulle *::after {
	box-sizing: border-box;
}
.wl-bulle [hidden],
.wl-fond[hidden] {
	display: none !important;
}
.wl-bulle button {
	font-family: inherit;
}
.wl-bulle :focus-visible {
	outline: 2px solid var(--wl-azur);
	outline-offset: 2px;
}

/* Voile derrière le panneau (téléphone) */
.wl-fond {
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	background: rgba(5, 10, 23, .45);
	display: none;
}
@media (max-width: 575px) {
	.wl-fond:not([hidden]) {
		display: block;
	}
	html.wl-bulle-ouverte,
	html.wl-bulle-ouverte body {
		overflow: hidden;
	}
}

/* Lanceur */
.wl-lanceur {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 8px 18px 8px 8px;
	border: 0;
	border-radius: 2px;
	background: var(--wl-nuit);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 12px 32px -12px rgba(5, 10, 23, .55);
	transition: transform .35s var(--wl-entree);
}
.wl-lanceur:hover {
	transform: translateY(-2px);
}
.wl-lanceur-logo {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 2px;
	background: var(--wl-action);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.wl-lanceur-logo svg {
	width: 24px;
	height: auto;
}
.wl-pastille {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--wl-violet);
	border: 2px solid var(--wl-nuit);
}
.wl-ouverte .wl-pastille {
	display: none;
}
@media (max-width: 767px) {
	.wl-lanceur {
		padding: 8px;
	}
	.wl-lanceur-texte {
		display: none;
	}
}
.wl-ouverte .wl-lanceur-texte {
	display: none;
}
.wl-ouverte .wl-lanceur {
	padding: 8px;
}
@media (max-width: 575px) {
	.wl-ouverte .wl-lanceur {
		display: none;
	}
}

/* Panneau */
.wl-panneau {
	width: 390px;
	max-width: calc(100vw - 40px);
	height: 620px;
	max-height: calc(100vh - 100px);
	margin-bottom: 12px;
	background: var(--wl-creme);
	border-radius: 2px;
	box-shadow: 0 30px 80px -20px rgba(5, 10, 23, .55);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
	animation: wl-ouvre .45s var(--wl-entree);
}
@keyframes wl-ouvre {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to { opacity: 1; transform: none; }
}
@media (max-width: 575px) {
	.wl-bulle.wl-ouverte {
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}
	.wl-ouverte .wl-panneau {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		margin: 0;
		border-radius: 0;
	}
}

.wl-tete {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 14px 14px 16px;
	background: var(--wl-nuit);
	color: #fff;
}
.wl-avatar {
	width: 32px;
	height: 32px;
	border-radius: 2px;
	background: var(--wl-nuit);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.wl-avatar svg {
	width: 21px;
	height: auto;
}
.wl-avatar-tete {
	width: 40px;
	height: 40px;
	background: var(--wl-action);
}
.wl-avatar-tete svg {
	width: 26px;
}
.wl-tete-texte {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
.wl-tete-texte strong {
	font-family: Raleway, 'Open sans', sans-serif;
	font-size: 16px;
	letter-spacing: .01em;
}
.wl-statut {
	font-size: 12px;
	color: #b8c2cf;
}
.wl-statut::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wl-azur);
	margin-right: 6px;
	vertical-align: 1px;
}
.wl-fermer {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .3s;
}
.wl-fermer:hover {
	background: rgba(255, 255, 255, .1);
}
.wl-fermer svg {
	width: 18px;
	height: 18px;
}

/* Progression */
.wl-prog {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: var(--wl-nuit);
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.wl-prog-texte {
	font-size: 12px;
	color: #b8c2cf;
	white-space: nowrap;
}
.wl-prog-barre {
	flex: 1;
	height: 3px;
	background: rgba(255, 255, 255, .14);
	border-radius: 2px;
	overflow: hidden;
}
.wl-prog-barre span {
	display: block;
	height: 100%;
	background: var(--wl-violet);
	transform-origin: left;
	transform: scaleX(0);
	transition: transform .5s var(--wl-entree);
}

/* Conversation */
.wl-journal {
	position: relative; /* repère des offsetTop pour caler le fil sur la question en cours */
	flex: 1;
	overflow-y: auto;
	padding: 18px 16px 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-behavior: smooth;
}
.wl-l {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}
.wl-l-visiteur {
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.wl-entre {
	animation: wl-entre .4s var(--wl-entree);
}
@keyframes wl-entre {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
.wl-b {
	max-width: 82%;
	padding: 10px 13px;
	border-radius: 2px;
	font-size: 14px;
}
.wl-b-agent {
	background: #fff;
	border: 1px solid var(--wl-filet);
	border-bottom-left-radius: 0;
}
.wl-b-visiteur {
	background: var(--wl-nuit);
	color: #fff;
	border-bottom-right-radius: 0;
	max-width: 80%;
}
.wl-aide {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--wl-gris);
}
.wl-modifier {
	border: 0;
	background: none;
	color: var(--wl-gris);
	font-size: 12px;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	padding: 2px 4px;
	min-height: 24px;
}
.wl-modifier:hover {
	color: var(--wl-action);
}

/* Indicateur de frappe */
.wl-points {
	display: inline-flex;
	gap: 4px;
	padding: 13px 14px;
}
.wl-points span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wl-gris);
	animation: wl-point 1s infinite ease-in-out;
}
.wl-points span:nth-child(2) { animation-delay: .15s; }
.wl-points span:nth-child(3) { animation-delay: .3s; }
@keyframes wl-point {
	0%, 80%, 100% { opacity: .3; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

/* Réponses : dans le fil, alignées sous les bulles de l'assistant */
.wl-zone {
	margin: 2px 0 6px 40px;
}
.wl-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wl-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--wl-filet);
	border-radius: 2px;
	background: #fff;
	color: var(--wl-encre);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: border-color .3s, color .3s;
}
.wl-option svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--wl-gris);
	transition: transform .3s var(--wl-entree), color .3s;
}
.wl-option:hover,
.wl-option:focus-visible {
	border-color: var(--wl-action);
	color: var(--wl-action);
}
.wl-option:hover svg,
.wl-option:focus-visible svg {
	color: var(--wl-action);
	transform: translateX(3px);
}
.wl-option-choisie {
	border-color: var(--wl-action);
	box-shadow: inset 3px 0 0 var(--wl-action);
}

.wl-retour {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	min-height: 36px;
	padding: 4px 8px 4px 2px;
	border: 0;
	background: none;
	color: var(--wl-gris);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.wl-retour svg {
	width: 16px;
	height: 16px;
}
.wl-retour:hover {
	color: var(--wl-action);
}

.wl-texte {
	display: flex;
	gap: 8px;
}
.wl-texte input,
.wl-champ input,
.wl-champ textarea {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--wl-filet);
	border-radius: 2px;
	background: #fff;
	font-size: 16px; /* pas de zoom automatique sur iPhone */
	font-family: inherit;
	color: var(--wl-encre);
	transition: border-color .3s;
}
.wl-texte input:focus,
.wl-champ input:focus,
.wl-champ textarea:focus {
	outline: none;
	border-color: var(--wl-action);
	box-shadow: 0 0 0 3px rgba(28, 119, 181, .15);
}
.wl-passer {
	display: block;
	margin-top: 8px;
	min-height: 32px;
	border: 0;
	background: none;
	color: var(--wl-gris);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	padding: 4px 0;
}

.wl-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 0;
	border-radius: 2px;
	background: var(--wl-action);
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .3s;
	white-space: nowrap;
}
.wl-action:hover {
	background: var(--wl-action-fonce);
}
.wl-action:disabled,
.wl-action.wl-envoi {
	opacity: .7;
	cursor: wait;
}
.wl-action-large {
	width: 100%;
	margin-top: 4px;
}

.wl-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wl-grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.wl-champ {
	display: block;
	margin: 0;
}
.wl-champ > span {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--wl-encre);
}
.wl-champ em {
	font-style: normal;
	font-weight: 400;
	color: var(--wl-gris);
}
.wl-champ textarea {
	min-height: 64px;
	resize: vertical;
}
.wl-consentement {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 12px;
	color: var(--wl-gris);
	cursor: pointer;
	margin: 2px 0;
}
.wl-consentement input {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	flex: 0 0 auto;
	accent-color: var(--wl-action);
}
.wl-consentement a {
	color: var(--wl-action);
}
.wl-piege {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.wl-erreur {
	margin: 0;
	color: #b3261e;
	font-size: 13px;
	font-weight: 600;
}
.wl-erreur:empty {
	display: none;
}
.wl-cache {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Confirmation */
.wl-recap-titre {
	margin: 0 0 4px;
	font-family: Raleway, 'Open sans', sans-serif;
	font-weight: 700;
	font-size: 15px;
}
.wl-recap-texte {
	margin: 0 0 10px;
}
.wl-recap-liste {
	margin: 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--wl-filet);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	font-size: 13px;
}
.wl-recap-liste dt {
	color: var(--wl-gris);
	font-weight: 400;
}
.wl-recap-liste dd {
	margin: 0;
	font-weight: 600;
	word-break: break-word;
}
.wl-zone-texte {
	margin: 0 0 8px;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.wl-panneau,
	.wl-entre,
	.wl-points span {
		animation: none;
	}
	.wl-prog-barre span,
	.wl-option svg,
	.wl-lanceur {
		transition: none;
	}
}

/* Bureau ouvert : pastille vert tendre (charte, jamais en texte) et lien d'appel */
.wl-statut-ouvert::before {
	background: #94ff5d;
}
.wl-tel {
	color: var(--wl-action);
	font-weight: 700;
	white-space: nowrap;
}
.wl-tete .wl-tel {
	color: var(--wl-azur);
}

/* Mode intégré (pages Devis et Contact) : la conversation dans la page, pas en bulle */
.wl-bulle.wl-integre {
	position: static;
	z-index: auto;
	align-items: stretch;
	width: 100%;
}
.wl-integre .wl-panneau {
	width: 100%;
	max-width: none;
	height: 640px;
	max-height: 85vh;
	margin: 0;
	box-shadow: 0 0 0 1px var(--wl-filet);
	animation: none;
}
.wl-liens {
	display: grid;
	gap: 10px;
	justify-items: start;
}
.wl-liens .wl-action {
	text-decoration: none;
}