/**
 * ENOLANE Chat, habillage.
 *
 * Le widget reprend les variables du site quand elles existent, avec une valeur
 * de repli identique en dur pour rester juste si la feuille Oxygen n'est pas
 * chargée (page d'erreur, aperçu, e-mail).
 */

.enochat {
	--ec-violet: var(--purple-500, #7C37BF);
	--ec-violet-fonce: var(--purple-600, #6A2BA6);
	--ec-nuit: var(--purple-800, #3C1463);
	--ec-sable: var(--sand-100, #F8F3EA);
	--ec-sable-clair: var(--sand-50, #FDFBF7);
	--ec-bordure: var(--sand-200, #EDE3D2);
	--ec-encre: var(--ink, #14212E);
	--ec-gris: var(--color-text-secondary, #4a5768);
	--ec-blanc: #fff;
	--ec-r-sm: var(--radius-sm, 6px);
	--ec-r-md: var(--radius-md, 10px);
	--ec-r-lg: var(--radius-lg, 16px);
	--ec-r-full: var(--radius-full, 999px);
	--ec-ombre: var(--shadow-lg, 0 8px 24px rgba(20, 33, 46, .1));
	--ec-titre: var(--font-heading, "Rubik", system-ui, sans-serif);
	--ec-corps: var(--font-body, "Karla", system-ui, sans-serif);
	--ec-tri: var(--tri, linear-gradient(90deg, #bd1e1e 0 33.4%, #f6ae2d 33.4% 66.7%, #15bcc2 66.7% 100%));

	position: fixed;
	bottom: 20px;
	z-index: 99990;
	font-family: var(--ec-corps);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ec-encre);
}

.enochat--right { right: 20px; }
.enochat--left { left: 20px; }

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

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

/*
 * Le lanceur ne reprend pas le violet des boutons d'action du site : ceux-ci
 * mènent à la page contact, et deux pastilles violettes identiques à l'écran
 * font hésiter. Il porte le violet nuit de l'en-tête du chat, avec un anneau
 * clair pour se détacher du fond sable.
 */
.ec-launcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px 11px 14px;
	border: 2px solid rgba(255, 255, 255, .9);
	border-radius: var(--ec-r-full);
	background: var(--ec-nuit);
	color: #fff;
	font-family: var(--ec-corps);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(35, 16, 55, .28);
	transition: transform .18s ease, background .18s ease, opacity .22s ease;
}

.ec-launcher:hover { background: var(--ec-violet); transform: translateY(-1px); }
.ec-launcher:focus-visible { outline: 3px solid var(--ec-violet); outline-offset: 3px; }

.ec-launcher__icon {
	width: 21px;
	height: 21px;
	flex: 0 0 auto;
	display: block;
}

/* Pastille de disponibilité, posée sur le bord du bouton. */
.ec-launcher__dot {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sites-500, #15BCC2);
	border: 2px solid #fff;
}

/* Effacement pendant la lecture, retour dès qu'on remonte. */
.enochat--away .ec-launcher {
	opacity: 0;
	transform: translateY(16px) scale(.94);
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Panneau                                                             */
/* ------------------------------------------------------------------ */

.ec-panel {
	display: none;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - 120px);
	background: var(--ec-blanc);
	border: 1px solid var(--ec-bordure);
	border-radius: var(--ec-r-lg);
	box-shadow: var(--ec-ombre);
	overflow: hidden;
}

.enochat[data-state="open"] .ec-panel { display: flex; }
.enochat[data-state="open"] .ec-launcher { display: none; }

.ec-panel__stripe { height: 4px; background: var(--ec-tri); flex: 0 0 auto; }

.ec-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 14px 12px;
	background: var(--ec-nuit);
	color: #fff;
	flex: 0 0 auto;
}

.ec-head__id { flex: 1 1 auto; min-width: 0; }

.ec-head__name {
	margin: 0;
	font-family: var(--ec-titre);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.ec-head__sub {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var(--purple-200, #C9ADE7);
}

.ec-head__phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: var(--ec-r-full);
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ec-head__phone:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.ec-head__close {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	padding: 2px 4px;
	cursor: pointer;
	opacity: .8;
}

.ec-head__close:hover { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Fil                                                                 */
/* ------------------------------------------------------------------ */

.ec-log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px 14px;
	background: var(--ec-sable-clair);
	display: flex;
	flex-direction: column;
	gap: 10px;
	overscroll-behavior: contain;
}

.ec-msg {
	max-width: 86%;
	padding: 10px 13px;
	border-radius: var(--ec-r-md);
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	min-width: 0;
}

.ec-msg--bot {
	align-self: flex-start;
	background: var(--ec-blanc);
	border: 1px solid var(--ec-bordure);
	border-bottom-left-radius: var(--ec-r-sm);
}

.ec-msg--me {
	align-self: flex-end;
	background: var(--ec-sable);
	border: 1px solid var(--ec-bordure);
	border-bottom-right-radius: var(--ec-r-sm);
}

.ec-msg--sys {
	align-self: center;
	max-width: 100%;
	background: var(--color-warning-bg, #FBEFD6);
	border: 1px solid var(--sea-100, #F9DFA9);
	color: var(--color-warning-text, #7a500e);
	font-size: 13.5px;
	text-align: center;
}

.ec-msg a { color: var(--ec-violet); text-decoration: underline; }

.ec-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.ec-typing span {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--ec-gris);
	animation: ec-blink 1.2s infinite ease-in-out;
}
.ec-typing span:nth-child(2) { animation-delay: .18s; }
.ec-typing span:nth-child(3) { animation-delay: .36s; }

@keyframes ec-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

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

.ec-sugg { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }

.ec-sugg button {
	border: 1px solid var(--ec-bordure);
	background: var(--ec-blanc);
	color: var(--ec-encre);
	border-radius: var(--ec-r-full);
	padding: 7px 12px;
	font-family: var(--ec-corps);
	font-size: 13px;
	cursor: pointer;
	text-align: left;
}

.ec-sugg button:hover { border-color: var(--ec-violet); color: var(--ec-violet); }

/* ------------------------------------------------------------------ */
/* Formulaire de rappel                                                */
/* ------------------------------------------------------------------ */

.ec-lead {
	align-self: stretch;
	background: var(--ec-blanc);
	border: 1px solid var(--ec-bordure);
	border-left: 3px solid var(--ec-violet);
	border-radius: var(--ec-r-md);
	padding: 14px;
}

.ec-lead h3 {
	margin: 0 0 4px;
	font-family: var(--ec-titre);
	font-size: 15px;
	font-weight: 600;
}

.ec-lead p { margin: 0 0 10px; font-size: 13px; color: var(--ec-gris); }

.ec-lead label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }

.ec-lead input[type="text"],
.ec-lead select {
	width: 100%;
	padding: 9px 10px;
	margin-bottom: 9px;
	border: 1px solid var(--ec-bordure);
	border-radius: var(--ec-r-sm);
	font-family: var(--ec-corps);
	font-size: 16px; /* Voir la note sur .ec-input : en dessous, iOS zoome. */
	background: var(--ec-blanc);
	color: var(--ec-encre);
}

.ec-lead input:focus,
.ec-lead select:focus { outline: 2px solid var(--ec-violet); outline-offset: 1px; }

.ec-lead__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 12px;
	font-weight: 400;
	color: var(--ec-gris);
	margin-bottom: 10px;
}

.ec-lead__consent input { margin-top: 2px; flex: 0 0 auto; }

.ec-btn {
	width: 100%;
	padding: 11px 14px;
	border: 0;
	border-radius: var(--ec-r-sm);
	background: var(--ec-violet);
	color: #fff;
	font-family: var(--ec-corps);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.ec-btn:hover { background: var(--ec-violet-fonce); }
.ec-btn[disabled] { opacity: .55; cursor: default; }

.ec-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Saisie                                                              */
/* ------------------------------------------------------------------ */

.ec-foot {
	flex: 0 0 auto;
	border-top: 1px solid var(--ec-bordure);
	background: var(--ec-blanc);
	padding: 10px 12px 8px;
}

.ec-form { display: flex; gap: 8px; align-items: flex-end; }

/*
 * 16 px, et pas moins.
 *
 * En dessous de cette taille, iOS zoome automatiquement sur le champ au moment
 * de la mise au point. Le zoom élargit la zone visible au-delà de l'écran :
 * l'en-tête sort par le haut, le bouton d'envoi par la droite, et le panneau
 * paraît cassé alors qu'il ne l'est pas. C'est la cause la plus fréquente des
 * fenêtres de discussion mal affichées sur iPhone.
 */
.ec-input {
	flex: 1 1 auto;
	resize: none;
	max-height: 110px;
	padding: 9px 11px;
	border: 1px solid var(--ec-bordure);
	border-radius: var(--ec-r-md);
	font-family: var(--ec-corps);
	font-size: 16px;
	line-height: 1.45;
	color: var(--ec-encre);
	background: var(--ec-blanc);
}

.ec-input:focus { outline: 2px solid var(--ec-violet); outline-offset: 1px; }

.ec-send {
	flex: 0 0 auto;
	width: 40px; height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--ec-violet);
	color: #fff;
	font-size: 17px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ec-send:hover { background: var(--ec-violet-fonce); }
.ec-send[disabled] { opacity: .45; cursor: default; }

.ec-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-top: 6px;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--ec-gris);
}

.ec-meta__note { flex: 1 1 auto; min-width: 0; }

.ec-meta a { color: var(--ec-gris); text-decoration: underline; }
.ec-count { font-variant-numeric: tabular-nums; }
.ec-count--warn { color: var(--seo-500, #BD1E1E); font-weight: 600; }

.ec-cf { padding: 0 12px 10px; }

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
	/*
	 * Pas de barre pleine largeur : elle recouvre le contenu et se confond avec
	 * les boutons de la page. Pastille compacte, alignée du côté choisi.
	 */
	.enochat { bottom: 16px; }
	.enochat--right { right: 16px; left: auto; }
	.enochat--left { left: 16px; right: auto; }

	/*
	 * Sur mobile, l'icône seule. Un prénom ne dit pas qu'il y a une discussion
	 * derrière, la bulle si : c'est le seul repère que tout le monde lit sans
	 * apprentissage.
	 */
	.ec-launcher {
		width: 58px;
		height: 58px;
		padding: 0;
		justify-content: center;
		gap: 0;
	}

	.ec-launcher__lg { display: none; }
	.ec-launcher__icon { width: 26px; height: 26px; }
	.ec-launcher__dot { top: 2px; right: 2px; }

	/*
	 * Plein écran, mais sur la hauteur réellement visible. Avec 100vh, la barre
	 * d'adresse et le clavier ne sont pas comptés : le bas du panneau passe sous
	 * le clavier. L'unité dvh suit la fenêtre visible, et le script affine
	 * encore la valeur quand le clavier s'ouvre.
	 */
	.ec-panel {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		width: 100%;
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		border: 0;
	}

	.enochat[data-state="open"] { inset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.enochat * { animation: none !important; transition: none !important; }
}