/*
 * Langues traduites automatiquement (es, de, ru) : les libellés du menu sont plus longs que
 * le français ; la barre de navigation les passe sur deux lignes au lieu de déborder sur le logo.
 * GTranslate met la langue choisie dans l'attribut lang de la page.
 */
@media (min-width: 1025px) {
	html[lang="es"] .elementor-element .hfe-nav-menu__layout-horizontal,
	html[lang="de"] .elementor-element .hfe-nav-menu__layout-horizontal,
	html[lang="ru"] .elementor-element .hfe-nav-menu__layout-horizontal {
		min-width: 0;
	}

	html[lang="es"] .optr-nav,
	html[lang="de"] .optr-nav,
	html[lang="ru"] .optr-nav {
		flex: 0 1 auto;
		min-width: 0;
	}

	html[lang="es"] .optr-nav .hfe-nav-menu,
	html[lang="de"] .optr-nav .hfe-nav-menu,
	html[lang="ru"] .optr-nav .hfe-nav-menu {
		flex-wrap: nowrap;
		align-items: center;
	}

	html[lang="es"] .optr-nav .hfe-nav-menu .menu-item > a.hfe-menu-item,
	html[lang="de"] .optr-nav .hfe-nav-menu .menu-item > a.hfe-menu-item,
	html[lang="ru"] .optr-nav .hfe-nav-menu .menu-item > a.hfe-menu-item {
		max-width: 8.5em;
		padding-right: 8px;
		padding-left: 8px;
		font-size: 14px;
		line-height: 1.2;
		text-align: center;
		white-space: normal;
		overflow-wrap: anywhere;
		hyphens: auto;
	}
}

/* Les deux colonnes de l'en-tête peuvent rétrécir au lieu de pousser le menu sur le logo. */
html[lang="es"] .elementor-element-33fdbff,
html[lang="de"] .elementor-element-33fdbff,
html[lang="ru"] .elementor-element-33fdbff {
	flex: 1 1 0;
	min-width: 0;
}

/* Écrans d'ordinateur étroits : libellés un peu plus petits pour éviter les mots coupés. */
@media (min-width: 1025px) and (max-width: 1199px) {
	html[lang="es"] .optr-nav .hfe-nav-menu .menu-item > a.hfe-menu-item,
	html[lang="de"] .optr-nav .hfe-nav-menu .menu-item > a.hfe-menu-item,
	html[lang="ru"] .optr-nav .hfe-nav-menu .menu-item > a.hfe-menu-item {
		max-width: 10em;
		padding-right: 5px;
		padding-left: 5px;
		font-size: 12.5px;
	}
}

/*
 * Menu mobile : liste déroulante des langues (voir optr-translate.js). Masquée au-dessus de 767px
 * par la règle « .optr-nav .optr-mobile-only » du CSS additionnel du site.
 */
.optr-lang-dd {
	list-style: none;
}

.optr-lang-dd .optr-lang-dd__toggle,
.optr-lang-dd .optr-lang-dd__toggle:hover,
.optr-lang-dd .optr-lang-dd__toggle:focus {
	display: flex;
	align-items: center;
	gap: 0.3em;
	width: 100%;
	min-height: 51px;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.optr-lang-dd__toggle:focus-visible {
	outline: 2px solid var(--e-global-color-secondary);
	outline-offset: -2px;
}

.optr-lang-dd__toggle img {
	margin-right: 0.3em;
}

.optr-lang-dd__arrow {
	width: 0.5em;
	height: 0.5em;
	margin-left: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-20%) rotate(45deg);
	transition: transform 0.25s ease;
}

.optr-lang-dd.is-open .optr-lang-dd__arrow {
	transform: translateY(20%) rotate(-135deg);
}

.optr-lang-dd__list {
	margin: 0;
	padding: 0 0 0 16px;
	list-style: none;
}

.optr-lang-dd__list[hidden] {
	display: none;
}

.optr-lang-dd__list li[aria-current="true"] > a {
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.optr-lang-dd__arrow {
		transition: none;
	}
}