/* ==========================================================================
   RMV Contact Bar — widget "Besoin d'aide ?"
   Bouton flottant en bas à droite (capsule + disque). Au clic, un panneau
   de 3 boutons (WhatsApp / Messenger / Appeler) apparaît au-dessus.

   Tous les sélecteurs sont préfixés par .rmv-help et remettent à zéro les
   propriétés courantes, pour résister aux styles globaux du thème / d'Elementor
   (button, a, svg) sans recourir à !important.
   ========================================================================== */

.rmv-help {
	/* Couleurs : modifiables ici. */
	--rmv-disc:       #22B3A0; /* disque du bouton flottant */
	--rmv-disc-hover: #1C9787;
	--rmv-whatsapp:   #25B95A;
	--rmv-messenger:  #0A7CFF;
	--rmv-call:       #2B2B2B;
	--rmv-text:       #1B1B1B;
	--rmv-white:      #fff;
	--rmv-shadow:     0 6px 24px rgba(0, 0, 0, .18);

	--rmv-edge: 20px;          /* marge par rapport aux bords de l'écran */
	--rmv-disc-size: 60px;

	position: fixed;
	right: var(--rmv-edge);
	bottom: calc(var(--rmv-edge) + env(safe-area-inset-bottom, 0px));
	/* --rmv-vv-offset est calculé par contact-bar.js (barres du navigateur mobile). */
	transform: translate3d(0, calc(var(--rmv-vv-offset, 0px) * -1), 0);
	/* Sous les popups Elementor / bannières cookies (souvent 9999+), au-dessus du contenu. */
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.2;
	box-sizing: border-box;
	transition: opacity .2s, visibility .2s;
	/* Le conteneur couvre la zone du panneau même fermé : il ne doit jamais intercepter les clics
	   destinés à la page en dessous. Seuls le bouton et le panneau ouvert sont cliquables. */
	pointer-events: none;
}
.rmv-help .rmv-help__toggle {
	pointer-events: auto;
}
.rmv-help *,
.rmv-help *::before,
.rmv-help *::after {
	box-sizing: border-box;
}

/* ===== Panneau des 3 boutons ===== */
.rmv-help .rmv-help__panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 240px;
	max-width: calc(100vw - 2 * var(--rmv-edge));
	margin: 0;
	padding: 12px;
	background: var(--rmv-white);
	border-radius: 12px;
	box-shadow: var(--rmv-shadow);
	transform-origin: bottom right;

	/* Fermé par défaut : invisible, hors tabulation, ignoré par les lecteurs d'écran. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(.96);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.rmv-help.is-open .rmv-help__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}

.rmv-help .rmv-help__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 6px;
	color: var(--rmv-white);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	transition: filter .15s, transform .15s;
	-webkit-tap-highlight-color: transparent;
}
.rmv-help .rmv-help__cta:hover,
.rmv-help .rmv-help__cta:focus,
.rmv-help .rmv-help__cta:visited {
	color: var(--rmv-white);
	text-decoration: none;
}
.rmv-help .rmv-help__cta svg {
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	max-width: none;
	fill: currentColor;
}
.rmv-help .rmv-help__cta--whatsapp  { background: var(--rmv-whatsapp); }
.rmv-help .rmv-help__cta--messenger { background: var(--rmv-messenger); }
.rmv-help .rmv-help__cta--tel       { background: var(--rmv-call); }

@media (hover: hover) {
	.rmv-help .rmv-help__cta:hover {
		filter: brightness(1.08);
		transform: translateY(-1px);
	}
}
.rmv-help .rmv-help__cta:active {
	filter: brightness(.92);
	transform: none;
}

/* ===== Bouton flottant : capsule + disque =====
   Sélecteurs volontairement renforcés (classes doublées) : le kit Elementor du site applique
   à TOUS les boutons, au survol / focus, une bordure de 3px et un fond de couleur globale
   (".elementor-kit-7 button:hover", reset.css du thème). On neutralise tout ça ici sans !important. */
.rmv-help.rmv-help .rmv-help__toggle.rmv-help__toggle,
.rmv-help.rmv-help .rmv-help__toggle.rmv-help__toggle:hover,
.rmv-help.rmv-help .rmv-help__toggle.rmv-help__toggle:focus,
.rmv-help.rmv-help .rmv-help__toggle.rmv-help__toggle:focus-visible,
.rmv-help.rmv-help .rmv-help__toggle.rmv-help__toggle:active {
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	color: var(--rmv-text);
	font: inherit;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.rmv-help .rmv-help__bubble {
	display: block;
	padding: 10px 16px;
	background: var(--rmv-white);
	border-radius: 999px;
	box-shadow: var(--rmv-shadow);
	color: var(--rmv-text);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	transition: opacity .2s, transform .2s, color .2s;
}

.rmv-help .rmv-help__disc {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--rmv-disc-size);
	height: var(--rmv-disc-size);
	border-radius: 50%;
	background: var(--rmv-disc);
	color: var(--rmv-white);
	box-shadow: var(--rmv-shadow);
	transition: background-color .2s, transform .2s;
}
.rmv-help .rmv-help__disc svg {
	position: absolute;
	display: block;
	max-width: none;
	fill: currentColor;
	transition: opacity .2s, transform .2s;
}
.rmv-help .rmv-help__icon-open  { width: 30px; height: 30px; }
.rmv-help .rmv-help__icon-close { width: 24px; height: 24px; opacity: 0; transform: rotate(-90deg); }

/* Survol discret : le disque grossit légèrement et fonce, le texte de la capsule prend sa couleur. */
@media (hover: hover) {
	.rmv-help .rmv-help__toggle:hover .rmv-help__disc {
		background: var(--rmv-disc-hover);
		transform: scale(1.08);
	}
	.rmv-help .rmv-help__toggle:hover .rmv-help__bubble {
		color: var(--rmv-disc-hover);
	}
}
/* Navigation clavier uniquement : anneau autour du disque (pas affiché au clic souris / tactile). */
.rmv-help .rmv-help__toggle:focus-visible .rmv-help__disc {
	box-shadow: var(--rmv-shadow), 0 0 0 3px var(--rmv-white), 0 0 0 5px var(--rmv-disc-hover);
}

/* Ouvert : le disque affiche une croix, la capsule s'efface. */
.rmv-help.is-open .rmv-help__icon-open  { opacity: 0; transform: rotate(90deg); }
.rmv-help.is-open .rmv-help__icon-close { opacity: 1; transform: none; }
.rmv-help.is-open .rmv-help__bubble {
	opacity: 0;
	transform: translateX(8px);
	pointer-events: none;
}

/* Clavier virtuel ouvert (champ de saisie actif) : on libère l'écran. */
.rmv-help.is-hidden-by-keyboard {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
	.rmv-help {
		--rmv-edge: 14px;
		--rmv-disc-size: 56px;
	}
	.rmv-help .rmv-help__bubble {
		padding: 8px 14px;
		font-size: 14px;
	}
	.rmv-help .rmv-help__cta {
		min-height: 50px;
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rmv-help,
	.rmv-help *,
	.rmv-help .rmv-help__panel,
	.rmv-help.is-open .rmv-help__panel {
		transition-duration: 0s;
		transition-delay: 0s;
	}
}

@media print {
	.rmv-help {
		display: none;
	}
}