/**
 * The language button in the header bar (inc/i18n.php tgt_lang_chip, approved 2026-09-28). A globe and the
 * page's language in a quiet pill beside the WhatsApp button: in view on every page, while scrolling too,
 * because the bar stays on screen. Its list names each language in itself; the offer to switch appears
 * under the button, pointing at it, so the visitor also learns where the languages live.
 */

.tgt-h-lang { position: relative; flex: none; }
.tgt-h-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 12px 0 11px;
	border: 1px solid rgba(248, 245, 238, .24);
	border-radius: 999px;
	background: rgba(248, 245, 238, .04);
	color: #f8f5ee;
	font-family: 'Trebuchet MS', Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.tgt-h-lang__btn:hover,
.tgt-h-lang__btn[aria-expanded="true"] { border-color: #c8a44a; background: rgba(200, 164, 74, .12); color: #fff; }
.tgt-h-lang__globe { flex: none; color: #e0c475; }
.tgt-h-lang__chev { flex: none; opacity: .7; transition: transform .2s ease; }
.tgt-h-lang__btn[aria-expanded="true"] .tgt-h-lang__chev { transform: rotate(180deg); }

.tgt-h-lang__list {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 20;
	min-width: 200px;
	margin: 0;
	padding: 6px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(14, 22, 32, .28);
	list-style: none;
	animation: tgt-lang-drop .2s ease both;
}
.tgt-h-lang__list[hidden],
.tgt-h-lang__hint[hidden] { display: none; }
.tgt-h-lang__list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 10px;
	color: #1b1b1b;
	font-family: 'Trebuchet MS', Tahoma, sans-serif;
	font-size: 15px;
	text-decoration: none;
}
.tgt-h-lang__list a:hover,
.tgt-h-lang__list a:focus-visible { background: #faf3df; }
.tgt-h-lang__code {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 26px;
	border-radius: 7px;
	background: #f3ece0;
	color: #6b6558;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
}
.tgt-h-lang__name { flex: 1; }
.tgt-h-lang__list a[aria-current] { font-weight: 700; }
.tgt-h-lang__list a[aria-current] .tgt-h-lang__code { background: #c8a44a; color: #0e1620; }
.tgt-h-lang__list a[aria-current]::after { content: ""; width: 10px; height: 6px; margin-right: 4px; border-bottom: 2px solid #a8862e; border-left: 2px solid #a8862e; transform: translateY(-2px) rotate(-45deg); }

/* The offer, pointing up at the button. */
.tgt-h-lang__hint {
	position: absolute;
	top: calc(100% + 14px);
	right: -8px;
	z-index: 19;
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	justify-content: start;
	gap: 12px 14px;
	width: 290px;
	padding: 16px 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(14, 22, 32, .3);
	color: #1b1b1b;
	font-family: 'Trebuchet MS', Tahoma, sans-serif;
	animation: tgt-lang-drop .35s cubic-bezier(.2, .7, .2, 1) both;
}
.tgt-h-lang__hint::before { content: ""; position: absolute; top: -7px; right: 30px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
.tgt-h-lang__hint p { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.45; }
.tgt-h-lang__go {
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	border-radius: 999px;
	background: linear-gradient(135deg, #e0c475 0%, #c8a44a 60%);
	color: #0e1620;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.tgt-h-lang__go:hover { color: #0e1620; filter: brightness(1.05); }
.tgt-h-lang__no { padding: 8px 4px; border: 0; background: none; color: #6b6558; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@keyframes tgt-lang-drop { from { opacity: 0; transform: translateY(-6px); } }

/* Phones and tablets: the button sits between the logo and the WhatsApp button. */
@media (max-width: 1199px) {
	.tgt-h-lang { margin-left: auto; }
	.tgt-h-lang + .tgt-h-cta { margin-left: 0; }
	.tgt-h-lang__btn { gap: 5px; height: 38px; padding: 0 9px; font-size: 12px; }
	.tgt-h-lang__hint { right: -60px; width: min(300px, calc(100vw - 24px)); }
	.tgt-h-lang__hint::before { right: 82px; }
}
/* Phones: a round globe with the language as a small tag, so the bar keeps its menu button. Up to 429px
   (2026-09-28): at 390 to 428px, the widths of most phones, the full pill pushed the menu button 7 to 22px
   off the screen and the whole page scrolled sideways. */
@media (max-width: 429px) {
	.tgt-h-lang__btn { position: relative; justify-content: center; width: 40px; height: 40px; padding: 0; gap: 0; }
	.tgt-h-lang__chev { display: none; }
	.tgt-h-lang__globe { width: 19px; height: 19px; }
	.tgt-h-lang__cur { position: absolute; right: -6px; bottom: -4px; padding: 2px 4px; border-radius: 6px; background: #c8a44a; color: #0e1620; font-size: 9px; letter-spacing: .06em; line-height: 1.2; }
	.tgt-h-lang__hint { right: -70px; }
	.tgt-h-lang__hint::before { right: 83px; }
}
@media (prefers-reduced-motion: reduce) {
	.tgt-h-lang__list, .tgt-h-lang__hint { animation: none; }
}

/* Room for the button in the bar (2026-09-28). With it, the desktop bar ran wider than the screen below
   1440px (English by 64px at 1200px, French by 104px at 1200px and 32px at 1280px, its menu words being
   longer) and the page scrolled sideways; on 360px phones the menu button went off the edge. Tighter gaps
   and link padding keep every item in view; the look is unchanged from 1440px up. */
@media (min-width: 1200px) and (max-width: 1439px) {
	.tgt-h-bar { gap: 14px; }
	.tgt-h-link { padding: 0 7px; }
	.tgt-h-link::after { right: 7px; left: 7px; }
	.tgt-h-toggle { margin-right: 4px; }
	.tgt-h-cta { padding: 12px 16px; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
	.tgt-h-link { padding: 0 6px; font-size: 14px; }
	.tgt-h-link::after { right: 6px; left: 6px; }
}
@media (max-width: 379px) {
	.tgt-h-bar { gap: 8px; }
	.tgt-h-logo__name { gap: 8px; font-size: 17px; }
	.tgt-h-logo__sub { font-size: 7.5px; letter-spacing: .22em; }
}