/* EF Contact Us — widget de contact flottant */

.efcu-widget {
	position: fixed;
	bottom: 16px;
	z-index: 99990;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.efcu--bottom-right { right: 16px; }
.efcu--bottom-left  { left: 16px; }

/* ── Bouton déclencheur ─────────────────────────────────────────────── */
.efcu-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border: none;
	border-radius: 999px;
	background: var(--efcu-bg, #24303f);
	color: var(--efcu-text, #fff);
	font-size: 15px; /* desktop : taille fixe — non affectée par le réglage mobile */
	font-weight: var(--efcu-weight, 600);
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	transition: transform .15s ease, box-shadow .15s ease;
	line-height: 1;
}
.efcu-trigger:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.efcu-trigger__icon { display: inline-flex; font-size: 1.5em; }

/* Desktop : bouton « icône seule » → cercle, pas de texte.
   Taille pilotée par l'admin (--efcu-desk-size) ; padding en em pour que tout
   le cercle grandisse proportionnellement. N'affecte QUE le desktop. */
.efcu--icon-only .efcu-trigger { padding: 0.95em; border-radius: 50%; font-size: var(--efcu-desk-size, 17px); }
.efcu--icon-only .efcu-trigger__text { display: none; }

/* Animation : l'icône du bouton défile parmi les canaux (comme l'original) */
.efcu-cycle { position: relative; display: inline-flex; width: 1em; height: 1em; }
.efcu-cycle__item {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(.55);
	transition: opacity .35s ease, transform .35s ease;
}
.efcu-cycle__item.is-active { opacity: 1; transform: scale(1); }
.efcu-trigger__icon--close { display: none; }
.efcu-trigger__text { white-space: nowrap; }

/* État ouvert : on bascule l'icône du bouton */
.efcu-widget.efcu-open .efcu-trigger__icon--open { display: none; }
.efcu-widget.efcu-open .efcu-trigger__icon--close { display: inline-flex; }
.efcu-widget.efcu-open .efcu-trigger__text { display: none; }
.efcu-widget.efcu-open .efcu-trigger { padding: 14px; }

/* ── Popup ──────────────────────────────────────────────────────────── */
.efcu-popup {
	position: absolute;
	bottom: calc(100% + 14px);
	width: 320px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.98);
	transform-origin: bottom right;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.efcu--bottom-right .efcu-popup { right: 0; transform-origin: bottom right; }
.efcu--bottom-left  .efcu-popup { left: 0; transform-origin: bottom left; }

.efcu-widget.efcu-open .efcu-popup {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.efcu-popup__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	background: var(--efcu-bg, #24303f);
	color: var(--efcu-text, #fff);
}
.efcu-popup__title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.efcu-popup__close {
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: .85;
	padding: 0;
}
.efcu-popup__close:hover { opacity: 1; }

/* ── Liste des canaux ───────────────────────────────────────────────── */
.efcu-channels { list-style: none; margin: 0; padding: 8px; }
.efcu-channels--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
}
.efcu-channel { margin: 0; }
.efcu-channel a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 10px;
	text-decoration: none;
	color: #1e293b;
	transition: background .12s ease;
}
.efcu-channel a:hover { background: #f8fafc; }

/* Séparateur pointillé entre canaux (comme la maquette) */
.efcu-channels:not(.efcu-channels--inline) .efcu-channel:not(:last-child) a {
	border-bottom: 1px dashed #e5e7eb;
}

/* Icône : glyphe coloré, sans pastille de fond */
.efcu-channel__icon {
	flex: 0 0 auto;
	width: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}
.efcu-channel__text { display: flex; flex-direction: column; line-height: 1.35; }
.efcu-channel__name { font-weight: var(--efcu-weight, 600); font-size: 15px; color: #1f2937; }
.efcu-channel__desc { font-size: 13px; color: #94a3b8; }

/* Variante inline (shortcode) : pastilles */
.efcu-channels--inline .efcu-channel a {
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	padding: 8px 16px 8px 10px;
}

/* ───────────────────────────────────────────────────────────────────── */
/* MOBILE : pleine largeur — barre en bas + feuille (bottom sheet)        */
/* ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

	.efcu-hide-mobile { display: none !important; }

	/* Le widget occupe toute la largeur, collé en bas, sur fond blanc avec
	   une marge (espace vide) autour de la barre. */
	.efcu-widget,
	.efcu--bottom-right,
	.efcu--bottom-left {
		left: 0;
		right: 0;
		bottom: -15px;
		background: #fff;
		padding: var(--efcu-bar-gap, 10px);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
	}

	/* Déclencheur = barre pleine largeur, hauteur + arrondi configurables.
	   La taille du texte mobile vient du réglage (--efcu-font). */
	.efcu-trigger {
		width: 100%;
		height: var(--efcu-bar-h, 45px);
		justify-content: center;
		border-radius: var(--efcu-bar-radius, 5px);
		padding: 0 16px;
		font-size: var(--efcu-font, 14px);
		box-shadow: none;
	}

	/* Sur mobile, le mode « icône seule » repasse en barre pleine + texte.
	   On réinitialise explicitement la taille (sinon --efcu-desk-size du desktop
	   fuirait ici à cause de la spécificité). */
	.efcu--icon-only .efcu-trigger {
		padding: 0 16px;
		border-radius: var(--efcu-bar-radius, 5px);
		font-size: var(--efcu-font, 14px);
	}
	.efcu--icon-only .efcu-trigger__text { display: inline; }
	.efcu-widget.efcu-open .efcu-trigger {
		display: none; /* la croix ronde de la feuille prend le relais */
	}

	/* Popup = feuille pleine largeur ancrée en bas */
	.efcu-popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		border-radius: 18px 18px 0 0;
		overflow: visible; /* laisse dépasser la croix ronde */
		transform-origin: bottom center;
		transform: translateY(100%);
		box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
	}
	.efcu-widget.efcu-open .efcu-popup {
		transform: translateY(0);
	}

	/* En-tête arrondi + place pour la croix qui chevauche */
	.efcu-popup__header {
		position: relative;
		justify-content: center;
		text-align: center;
		padding: 30px 18px 16px;
		border-radius: 18px 18px 0 0;
	}
	.efcu-popup__title { font-size: 16px; }

	/* Croix ronde centrée qui chevauche le haut de l'en-tête */
	.efcu-popup__close {
		position: absolute;
		top: -26px;
		left: 50%;
		transform: translateX(-50%);
		width: 52px;
		height: 52px;
		border-radius: 50%;
		background: var(--efcu-bg, #24303f);
		color: var(--efcu-text, #fff);
		font-size: 22px;
		opacity: 1;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
	}

	/* Liste scrollable si beaucoup de canaux */
	.efcu-channels:not(.efcu-channels--inline) {
		max-height: 56vh;
		overflow-y: auto;
		padding: 4px 12px 12px;
	}
	.efcu-channel a { padding: 14px 8px; }
}