/* =========================================================================
   Sélecteur de langue (FR / DE / EN) + bandeau de suggestion.
   Autonome : chargé aussi sur les pages sans main.css (calculateur,
   présentation), d'où les couleurs écrites en clair.
   ========================================================================= */

.ljm-lang { --lang-accent: #F4791F; --lang-ease: cubic-bezier(.22, .8, .26, .99); font-family: inherit; }
.ljm-lang a { text-decoration: none; }

/* ---------- Menu déroulant (en-tête) ---------- */
.ljm-lang.is-dropdown { position: relative; }
.ljm-lang-toggle {
	display: inline-flex; align-items: center; gap: 7px;
	height: 40px; padding: 0 12px;
	font: inherit; font-size: 13px; font-weight: 650; letter-spacing: .04em;
	color: rgba(245, 245, 247, .85);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 6px;
	cursor: pointer;
	transition: color .25s, border-color .25s, background .25s;
}
.ljm-lang-toggle:hover,
.ljm-lang-toggle[aria-expanded="true"] { color: #fff; border-color: var(--lang-accent); background: rgba(244, 121, 31, .12); }
.ljm-lang-toggle:focus-visible { outline: 2px solid var(--lang-accent); outline-offset: 2px; }
.ljm-lang-globe { width: 16px; height: 16px; color: var(--lang-accent); flex: none; }
.ljm-lang-caret {
	width: 6px; height: 6px; margin-left: 1px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .25s var(--lang-ease);
}
.ljm-lang-toggle[aria-expanded="true"] .ljm-lang-caret { transform: rotate(-135deg) translateY(-1px); }

.ljm-lang-panel {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 1100;
	min-width: 184px; margin: 0; padding: 6px; list-style: none;
	background: rgba(16, 16, 18, .94);
	-webkit-backdrop-filter: blur(24px) saturate(1.6);
	backdrop-filter: blur(24px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .25s var(--lang-ease), transform .3s var(--lang-ease), visibility .25s;
}
.ljm-lang.is-open .ljm-lang-panel { opacity: 1; visibility: visible; transform: none; }
.ljm-lang-panel li { margin: 0; list-style: none; }
.ljm-lang-item { color: rgba(245, 245, 247, .78); transition: color .2s, background .2s, border-color .2s; }
.ljm-lang-panel .ljm-lang-item {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 10px 12px; border-radius: 6px;
	font-size: 14px; font-weight: 550;
}
.ljm-lang-panel .ljm-lang-item:hover,
.ljm-lang-panel .ljm-lang-item:focus-visible { color: #fff; background: rgba(255, 255, 255, .07); outline: none; }
.ljm-lang-abbr { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: rgba(245, 245, 247, .4); }
.ljm-lang-panel .ljm-lang-item.is-current { color: #fff; }
.ljm-lang-panel .ljm-lang-item.is-current .ljm-lang-abbr { color: var(--lang-accent); }
.ljm-lang-panel .ljm-lang-item.is-current .ljm-lang-name::before {
	content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 9px;
	border-radius: 50%; background: var(--lang-accent); vertical-align: 2px;
}

/* ---------- Rangée du menu mobile ---------- */
.ljm-lang.is-row { display: flex; flex-direction: row; gap: 8px; margin-top: 26px; overflow: visible; }
.ljm-lang.is-row .ljm-lang-item {
	flex: 1 1 0; max-width: 92px;
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px; border-radius: 6px;
	font-size: 14px; font-weight: 700; letter-spacing: .08em;
	border: 1px solid rgba(255, 255, 255, .16);
}
.ljm-lang.is-row .ljm-lang-item:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.ljm-lang.is-row .ljm-lang-item.is-current { color: #fff; background: var(--lang-accent); border-color: var(--lang-accent); }

/* ---------- Liens du pied de page ---------- */
.ljm-lang.is-inline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.ljm-lang.is-inline .ljm-lang-item { color: rgba(245, 245, 247, .6); }
.ljm-lang.is-inline .ljm-lang-item + .ljm-lang-item::before { content: '·'; margin: 0 8px; color: rgba(245, 245, 247, .3); }
.ljm-lang.is-inline .ljm-lang-item:hover { color: var(--lang-accent); }
.ljm-lang.is-inline .ljm-lang-item.is-current { color: #F5F5F7; }

/* ---------- Pastilles (pages autonomes) ---------- */
.ljm-lang.is-pills {
	display: inline-flex; padding: 3px; gap: 2px;
	background: rgba(12, 12, 14, .62);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
}
.ljm-lang.is-pills .ljm-lang-item {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 32px; padding: 0 10px; border-radius: 999px;
	font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.ljm-lang.is-pills .ljm-lang-item:hover { color: #fff; }
.ljm-lang.is-pills .ljm-lang-item.is-current { color: #fff; background: var(--lang-accent); }

/* ---------- Placements ---------- */
/* Configurateur : à droite du bouton « Retour au site ». */
.ljm-cfg-top {
	position: absolute; z-index: 8;
	top: clamp(16px, 2vw, 28px); left: clamp(20px, 4vw, 56px);
	display: flex; align-items: center; gap: 10px;
}
.ljm-cfg-top .ljcfg-back { position: static; }
.ljm-lang.is-cfg .ljm-lang-item { height: 38px; min-width: 40px; }
/* Présentation : centré au-dessus du logo. */
.ljm-lang.is-pres { display: flex; width: max-content; margin: 0 auto 26px; }
/* Calculateur : pastilles discrètes dans la barre haute. */
.ljm-lang.is-calc .ljm-lang-item { height: 30px; min-width: 34px; padding: 0 8px; }

@media (max-width: 1240px) {
	/* En-tête : place libérée pour le menu, le bouton configurateur
	   passe en icône seule (texte toujours lu par les lecteurs d'écran). */
	.ljm-header-config.has-lang { padding: 10px 13px; }
	.ljm-header-config.has-lang .ljm-header-config-txt {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	}
}
@media (max-width: 640px) {
	.ljm-header .ljm-lang.is-dropdown { display: none; }
	.ljm-lang.is-calc { display: none; }
}

/* ---------- Bandeau de suggestion de langue ---------- */
.ljm-lang-suggest {
	position: fixed; z-index: 980; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
	width: min(560px, calc(100% - 32px));
	display: flex; align-items: center; gap: 14px;
	padding: 12px 12px 12px 18px;
	color: rgba(245, 245, 247, .85); font-size: 14px; line-height: 1.4;
	background: rgba(16, 16, 18, .94);
	-webkit-backdrop-filter: blur(24px) saturate(1.6);
	backdrop-filter: blur(24px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
	transform: translate(-50%, 24px); opacity: 0;
	transition: opacity .45s cubic-bezier(.22, .8, .26, .99), transform .55s cubic-bezier(.22, .8, .26, .99);
}
.ljm-lang-suggest.is-in { transform: translate(-50%, 0); opacity: 1; }
.ljm-lang-suggest-globe { width: 18px; height: 18px; color: #F4791F; flex: none; }
.ljm-lang-suggest-text { flex: 1 1 auto; }
.ljm-lang-suggest-go {
	flex: none; display: inline-flex; align-items: center;
	height: 36px; padding: 0 14px; border-radius: 6px;
	background: #F4791F; color: #fff; font-size: 13px; font-weight: 650;
	text-decoration: none; white-space: nowrap;
	transition: background .25s;
}
.ljm-lang-suggest-go:hover { background: #D96410; }
.ljm-lang-suggest-close {
	flex: none; width: 34px; height: 34px; border: 0; border-radius: 6px;
	background: transparent; color: rgba(245, 245, 247, .55);
	font-size: 20px; line-height: 1; cursor: pointer;
	transition: color .2s, background .2s;
}
.ljm-lang-suggest-close:hover { color: #fff; background: rgba(255, 255, 255, .07); }
@media (max-width: 520px) {
	.ljm-lang-suggest { flex-wrap: wrap; gap: 10px 12px; }
	.ljm-lang-suggest-text { flex-basis: calc(100% - 80px); }
	.ljm-lang-suggest-go { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.ljm-lang-panel, .ljm-lang-suggest, .ljm-lang-caret { transition: none; }
}
@media (max-width: 900px) {
	.ljm-cfg-top { left: 14px; top: 14px; gap: 8px; }
	.ljm-lang.is-cfg .ljm-lang-item { height: 34px; min-width: 34px; padding: 0 8px; }
}