/**
 * Sélecteur de langue Polylang dans le menu (entre le menu et l'icône
 * "Book an Appointment"). Voir inc/language-switcher.php.
 *
 * IMPORTANT : notre <li> vit à l'intérieur de ul.navbar-nav.sf-menu, donc les
 * styles natifs des sous-menus d'Inspiro (.sf-menu ul, .navbar-nav ul —
 * fond noir, bordure dorée, largeur 220px, centrage) s'appliquent aussi à
 * notre <ul> par défaut. On neutralise ça avec le sélecteur composé
 * ".inspiro-lang-switcher .inspiro-lang-switcher__menu" (plus spécifique que
 * ".navbar-nav ul" / ".sf-menu ul") et on redéfinit explicitement chaque
 * propriété concernée.
 */

.inspiro-lang-switcher {
	display: flex;
	align-items: center;
}

.inspiro-lang-switcher__wrap {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	width: auto;
}

.inspiro-lang-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 14px;
	background: none;
	border: solid 1px #F8F7F4;
	border-radius: 3px;
	color: #F8F7F4;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.inspiro-lang-switcher__toggle:hover,
.inspiro-lang-switcher__toggle:focus-visible {
	opacity: 0.85;
}

.inspiro-lang-switcher__toggle i {
	font-size: 10px;
	transition: transform 0.2s ease;
}

.inspiro-lang-switcher__wrap.is-open .inspiro-lang-switcher__toggle i {
	transform: rotate(180deg);
}

/* Sélecteur composé volontairement plus spécifique que .navbar-nav ul / .sf-menu ul */
.inspiro-lang-switcher .inspiro-lang-switcher__menu {
	display: block;
	position: absolute;
	top: calc(100% + 6px);
	left: auto;
	right: 0;
	width: auto;
	min-width: 100%;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 100;
}

.inspiro-lang-switcher .inspiro-lang-switcher__wrap.is-open .inspiro-lang-switcher__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.inspiro-lang-switcher .inspiro-lang-switcher__menu li {
	margin: 0;
	border: none;
}

.inspiro-lang-switcher .inspiro-lang-switcher__menu a {
	display: block;
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--inspiro-dark-color, #101010);
	text-decoration: none;
	white-space: nowrap;
	border: none;
	transition: transform 0.15s ease;
}

.inspiro-lang-switcher .inspiro-lang-switcher__menu a:hover {
	/* Neutralise .navbar-nav ul a:hover (thème parent) qui met le texte en
	   blanc au survol — ici le fond du menu est blanc, donc le texte
	   deviendrait invisible sans cette redéfinition. */
	color: var(--inspiro-dark-color, #101010);
	transform: translateX(4px);
}

/* ---------- Dans .side-nav__wrap (menu mobile), sous 64em ---------- */

.side-nav .inspiro-lang-switcher {
	display: block;
	margin: 0 0 20px;
}

.side-nav .inspiro-lang-switcher__wrap {
	display: inline-flex;
}

.side-nav .inspiro-lang-switcher .inspiro-lang-switcher__menu {
	left: 0;
	right: auto;
}

/* Sous 64em, le thème parent force ".side-nav .navbar-nav ul { display: none }"
   pour les accordéons de sous-menus (voir assets/css/unminified/style.css) —
   plus spécifique que notre ".inspiro-lang-switcher .inspiro-lang-switcher__menu"
   ci-dessus, donc le dropdown restait caché sur mobile. On regagne la priorité
   avec un sélecteur au moins aussi spécifique. */
.side-nav .navbar-nav .inspiro-lang-switcher .inspiro-lang-switcher__menu {
	display: block;
}