/**
 * Le sélecteur de langue livré avec Lyvira Rental.
 *
 * Volontairement neutre : il emprunte la couleur du texte autour de lui
 * (`currentColor`) pour se fondre dans l'en-tête de n'importe quel thème, et
 * n'impose ni fond ni police. Un thème qui veut le sien n'a qu'à redéfinir ces
 * règles : sa feuille est chargée après celle-ci.
 */
.rl-langues { position: relative; display: inline-flex; }

.rl-langues__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 32px;
	min-width: 32px;
	padding: 6px 10px;
	border: 1px solid currentColor;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .9em;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	cursor: pointer;
	opacity: .85;
}
.rl-langues__bouton:hover,
.rl-langues__bouton:focus-visible { opacity: 1; }

.rl-langues__fleche {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.rl-langues[data-ouvert] .rl-langues__fleche { transform: translateY(2px) rotate(225deg); }

.rl-langues__liste {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1000;
	display: none;
	min-width: 170px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(17, 26, 48, .12);
	border-radius: 12px;
	box-shadow: 0 18px 38px rgba(17, 26, 48, .16);
}
.rl-langues[data-ouvert] .rl-langues__liste { display: block; }

.rl-langues__liste a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	color: #1a2440;
	font-size: 15px;
	text-decoration: none;
}
.rl-langues__liste a:hover,
.rl-langues__liste a:focus-visible { background: rgba(17, 26, 48, .06); }
.rl-langues__liste .est-courante a { font-weight: 700; background: rgba(17, 26, 48, .06); }

@media (max-width: 680px) {
	/* Sur téléphone la barre est déjà pleine : le cadre et la flèche
	   disparaissent, il ne reste que le code de langue — mais la cible garde
	   ses trente-deux pixels, pour rester atteignable au doigt. La liste
	   s'ouvre vers la droite, pour ne pas sortir de l'écran. */
	.rl-langues__bouton { padding: 4px 2px; border-color: transparent; font-size: .8em; gap: 0; }
	.rl-langues__fleche { display: none; }
	/* Dépliée sur un écran de 320 px, une liste de cent soixante-dix pixels
	   ancrée près du bord droit sort de l'écran. On l'accroche donc à l'écran
	   lui-même, d'un bord à l'autre, au lieu de l'accrocher au bouton. */
	.rl-langues__liste {
		position: fixed;
		top: auto;
		left: 8px;
		right: 8px;
		width: auto;
		min-width: 0;
		margin-top: 8px;
	}
	#masthead .elementor-top-column:last-child > .elementor-widget-wrap,
	.elementor-location-header .elementor-top-column:last-child > .elementor-widget-wrap { gap: 6px; }
}

/* Le sélecteur partage la colonne de droite de l'en-tête Elementor avec le
   bouton de compte. Sans ces lignes, Elementor les empile : la barre passe sur
   deux lignes et gagne trente pixels. */
#masthead .elementor-top-column:last-child > .elementor-widget-wrap,
.elementor-location-header .elementor-top-column:last-child > .elementor-widget-wrap {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}
#masthead .elementor-widget-wrap > .elementor-widget-shortcode,
#masthead .elementor-widget-wrap > .elementor-widget-button,
.elementor-location-header .elementor-widget-wrap > .elementor-widget-shortcode,
.elementor-location-header .elementor-widget-wrap > .elementor-widget-button {
	flex: 0 0 auto;
	width: auto;
	margin-bottom: 0;
}
/* La liste dépliée doit sortir de la bande, qu'Elementor coupe par défaut. */
#masthead .elementor-top-column:last-child,
#masthead .elementor-top-column:last-child > .elementor-widget-wrap,
#masthead .elementor-widget-shortcode,
#masthead .elementor-widget-shortcode > .elementor-widget-container,
.elementor-location-header .elementor-top-column:last-child,
.elementor-location-header .elementor-top-column:last-child > .elementor-widget-wrap,
.elementor-location-header .elementor-widget-shortcode,
.elementor-location-header .elementor-widget-shortcode > .elementor-widget-container { overflow: visible !important; }