/* ======================================================================
   You Energie — Widget WhatsApp (bulle + panneau de discussion)
   La bulle reste un lien <a> vers wa.me ; le JS intercepte le clic pour
   ouvrir le panneau. Sans JS, le lien direct fonctionne quand même.
   ====================================================================== */

.yel-wa-widget {
	position: fixed;
	right: clamp(16px, 3vw, 28px);
	bottom: clamp(16px, 3vw, 28px);
	z-index: 9998;
	font-family: inherit;
	color: #0A1F12;
}

/* ----------------------------------------------------------------------
   Bulle flottante
   ---------------------------------------------------------------------- */
.yel-wa-bubble {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 10px 18px;
	border-radius: 999px;
	background: #25D366;
	color: #FFFFFF !important;
	text-decoration: none;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.15;
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
	animation: yelWaIn .45s cubic-bezier(.2,.9,.3,1.2) .8s both;
	position: relative;
}

.yel-wa-bubble:hover,
.yel-wa-bubble:focus-visible {
	background: #1FB959;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45), 0 3px 8px rgba(0, 0, 0, 0.14);
	outline: none;
	text-decoration: none;
}

.yel-wa-bubble:focus-visible {
	box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #0F7A3A, 0 12px 28px rgba(37, 211, 102, 0.45);
}

.yel-wa-bubble__label {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	white-space: nowrap;
}

.yel-wa-bubble__label-top {
	font-size: 11px;
	font-weight: 500;
	opacity: .9;
	letter-spacing: .01em;
}

.yel-wa-bubble__label-bottom {
	font-size: 15px;
	font-weight: 700;
}

.yel-wa-bubble__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}

.yel-wa-bubble__icon svg {
	width: 22px;
	height: 22px;
	display: block;
	fill: #FFFFFF;
}

/* Petit pulse pour attirer l'œil — désactivé si le panneau est ouvert ou
   si l'utilisateur préfère moins d'animations. */
.yel-wa-bubble::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
	animation: yelWaPing 2.4s ease-out 2s infinite;
	pointer-events: none;
}

.yel-wa-widget.is-open .yel-wa-bubble {
	/* On annule l'animation d'apparition (yelWaIn) sinon son fill-mode "both"
	   réinjecte opacity:1 et fait réapparaître la bulle sous le panneau. */
	animation: none !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(.7) translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.yel-wa-widget.is-open .yel-wa-bubble::before {
	animation: none;
}

/* ----------------------------------------------------------------------
   Panneau de discussion
   ---------------------------------------------------------------------- */
.yel-wa-panel {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(360px, calc(100vw - 32px));
	max-height: min(560px, calc(100vh - 80px));
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(9, 61, 29, 0.22), 0 6px 18px rgba(0, 0, 0, 0.10);
	opacity: 0;
	transform: translateY(16px) scale(.96);
	transform-origin: bottom right;
	transition: opacity .22s ease, transform .22s ease;
	pointer-events: none;
}

.yel-wa-widget.is-open .yel-wa-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.yel-wa-panel[hidden] {
	display: none !important;
}

/* Header */
.yel-wa-panel__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 14px 16px 16px;
	background: linear-gradient(135deg, #0F7A3A 0%, #1FB959 100%);
	color: #FFFFFF;
}

.yel-wa-panel__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #FFFFFF;
	color: #0F7A3A;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .02em;
	flex-shrink: 0;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.yel-wa-panel__head-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.yel-wa-panel__head-text strong {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.yel-wa-panel__status {
	font-size: 12px;
	opacity: .92;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}

.yel-wa-panel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #B6FFD2;
	box-shadow: 0 0 0 2px rgba(182, 255, 210, 0.35);
	animation: yelWaDot 2s ease-in-out infinite;
}

.yel-wa-panel__close {
	border: 0;
	background: rgba(255, 255, 255, 0.15);
	color: #FFFFFF;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease;
	padding: 0;
	flex-shrink: 0;
}
.yel-wa-panel__close:hover,
.yel-wa-panel__close:focus-visible {
	background: rgba(255, 255, 255, 0.28);
	outline: none;
}
.yel-wa-panel__close svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Body */
.yel-wa-panel__body {
	flex: 1;
	overflow-y: auto;
	padding: 18px 14px;
	background:
		linear-gradient(rgba(245, 251, 247, 0.85), rgba(245, 251, 247, 0.85)),
		repeating-linear-gradient(45deg, rgba(15, 122, 58, 0.04) 0 2px, transparent 2px 18px);
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 160px;
}

.yel-wa-panel__bubble {
	max-width: 86%;
	padding: 10px 12px 8px;
	background: #FFFFFF;
	border-radius: 4px 14px 14px 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	font-size: 14px;
	line-height: 1.45;
	color: #0A1F12;
	position: relative;
	animation: yelWaBubbleIn .35s ease-out both;
}

.yel-wa-panel__bubble p {
	margin: 0 0 6px;
}
.yel-wa-panel__bubble p:last-of-type {
	margin-bottom: 4px;
}

.yel-wa-panel__time {
	display: block;
	font-size: 10px;
	color: #5C6B61;
	text-align: right;
	margin-top: 2px;
}

/* "En train d'écrire" — indicateur de présence avant l'arrivée du message */
.yel-wa-panel__typing {
	display: inline-flex;
	gap: 4px;
	padding: 10px 14px;
	background: #FFFFFF;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	width: max-content;
}
.yel-wa-panel__typing span {
	width: 6px;
	height: 6px;
	background: #1FB959;
	border-radius: 50%;
	animation: yelWaTyping 1.3s ease-in-out infinite;
}
.yel-wa-panel__typing span:nth-child(2) { animation-delay: .15s; }
.yel-wa-panel__typing span:nth-child(3) { animation-delay: .3s; }

/* Form */
.yel-wa-panel__form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 10px 8px;
	background: #FFFFFF;
	border-top: 1px solid #E5EDE7;
}

.yel-wa-panel__form textarea {
	flex: 1;
	min-height: 40px;
	max-height: 120px;
	resize: none;
	border: 1px solid #D8E5DC;
	border-radius: 20px;
	padding: 9px 14px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: #0A1F12;
	background: #F5FBF7;
	transition: border-color .15s ease, background .15s ease;
	overflow-y: auto;
}
.yel-wa-panel__form textarea:focus {
	outline: none;
	border-color: #1FB959;
	background: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(31, 185, 89, 0.18);
}
.yel-wa-panel__form textarea::placeholder {
	color: #8A9990;
}

.yel-wa-panel__send {
	border: 0;
	background: #25D366;
	color: #FFFFFF;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .15s ease, transform .15s ease;
	padding: 0;
}
.yel-wa-panel__send:hover:not(:disabled),
.yel-wa-panel__send:focus-visible:not(:disabled) {
	background: #1FB959;
	transform: scale(1.05);
	outline: none;
}
.yel-wa-panel__send:disabled {
	background: #C0D1C6;
	cursor: not-allowed;
}
.yel-wa-panel__send svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Footer signature */
.yel-wa-panel__footer {
	text-align: center;
	padding: 6px 10px 10px;
	background: #FFFFFF;
	font-size: 11px;
	color: #8A9990;
}

/* ----------------------------------------------------------------------
   Animations
   ---------------------------------------------------------------------- */
@keyframes yelWaIn {
	from { opacity: 0; transform: translateY(20px) scale(.85); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yelWaPing {
	0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
	70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes yelWaDot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .55; transform: scale(.85); }
}

@keyframes yelWaBubbleIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes yelWaTyping {
	0%, 60%, 100% { transform: translateY(0); opacity: .4; }
	30%           { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.yel-wa-bubble,
	.yel-wa-bubble::before,
	.yel-wa-panel,
	.yel-wa-panel__bubble,
	.yel-wa-panel__dot,
	.yel-wa-panel__typing span {
		animation: none !important;
	}
	.yel-wa-bubble:hover,
	.yel-wa-bubble:focus-visible {
		transform: none;
	}
	.yel-wa-panel {
		transition: opacity .15s ease;
	}
}

/* ----------------------------------------------------------------------
   Mobile — la bulle devient ronde, le panneau prend ~tout l'écran
   ---------------------------------------------------------------------- */
@media (max-width: 640px) {
	.yel-wa-bubble {
		padding: 0;
		width: 56px;
		height: 56px;
		justify-content: center;
		gap: 0;
	}
	.yel-wa-bubble__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.yel-wa-bubble__icon {
		width: 32px;
		height: 32px;
	}
	.yel-wa-bubble__icon svg {
		width: 26px;
		height: 26px;
	}
	.yel-wa-panel {
		position: fixed;
		inset: 12px 12px 12px 12px;
		width: auto;
		max-height: none;
		border-radius: 18px;
	}
}

/* Pas de widget à l'impression. */
@media print {
	.yel-wa-widget { display: none !important; }
}