/**
 * La pastille de langue, côté site.
 *
 * Tout est réglé en couleur héritée (currentColor) et en em : posée dans un
 * en-tête Elementor, la pastille prend la couleur et la taille du texte qui
 * l'entoure sans qu'on ait à la repeindre à chaque site.
 *
 * @package RM_Translate
 */

.rm-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.15em;
	line-height: 1;
	white-space: nowrap;
	font-size: inherit;
	vertical-align: middle;
}

.rm-lang__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.65em;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	opacity: 0.55;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.rm-lang__item:hover,
.rm-lang__item:focus-visible {
	opacity: 1;
	text-decoration: none;
}

.rm-lang__item.is-current {
	opacity: 1;
	font-weight: 600;
	cursor: default;
}

.rm-lang__sep {
	opacity: 0.4;
	padding: 0 0.1em;
}

.rm-lang__code {
	font-size: 0.85em;
	letter-spacing: 0.04em;
}

/* Pastille encadrée : le cadre suit la couleur du texte, le fond de la langue
   active est un voile de cette même couleur — lisible sur fond clair comme sur
   fond sombre, sans réglage. */
.rm-lang--pill {
	border: 1px solid;
	border-color: rgba(128, 128, 128, 0.45);
	border-radius: 999px;
	padding: 0.15em;
}

.rm-lang--pill .rm-lang__item.is-current {
	background-color: rgba(128, 128, 128, 0.22);
	background-color: color-mix( in srgb, currentColor 16%, transparent );
}

.rm-lang--minimal .rm-lang__item {
	padding: 0.2em 0.15em;
}

.rm-lang--flags .rm-lang__item {
	font-size: 1.05em;
	padding: 0.25em 0.4em;
}

/* Pastille flottante, quand l'en-tête est déjà plein. */
.rm-lang-float {
	position: fixed;
	z-index: 9990;
}

.rm-lang-float--bottom-right {
	right: 18px;
	bottom: 18px;
}

.rm-lang-float--bottom-left {
	left: 18px;
	bottom: 18px;
}

.rm-lang-float--top-right {
	right: 18px;
	top: 18px;
}

.rm-lang-float--top-left {
	left: 18px;
	top: 18px;
}

.rm-lang-float .rm-lang {
	padding: 0.25em;
	border-radius: 999px;
	background-color: #111;
	color: #fff;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.28 );
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rm-lang-float .rm-lang--pill {
	border-color: rgba( 255, 255, 255, 0.28 );
}

.rm-lang-float .rm-lang__item.is-current {
	background-color: rgba( 255, 255, 255, 0.18 );
}

@media print {

	.rm-lang-float {
		display: none;
	}
}
