/**
 * Le sélecteur de langue.
 *
 * ⚠️ Le site tourne sur une palette Kadence inversée — `--global-palette9` est
 * sombre, `--global-palette3` est clair — et la rangée haute de l'en-tête est
 * transparente. Tout ce qui recouvre la page doit donc porter **son propre**
 * fond *et* **sa propre** couleur de texte. On emploie le couple canonique de
 * Kadence, 9 pour la surface et 3 pour le texte : il survit à un changement de
 * palette, ce qu'une couleur écrite en dur ne ferait pas.
 */

/* Le sélecteur est **hors du flux**, et c'est tout l'intérêt.
   ------------------------------------------------------------------------- */

/* Kadence n'a qu'une façon de poser quelque chose ici : la rangée haute de
   l'en-tête. Or une rangée occupe de la hauteur — 38 px — et l'en-tête étant
   noir, ça se lit comme un bandeau plein qui repousse le logo et le menu vers
   le bas pour un seul drapeau.

   La rangée n'a **aucune hauteur propre** : ni remplissage, ni hauteur
   minimale, ni fond (le noir vient de `.site-header`). Ses 38 px n'étaient que
   ceux de son contenu. Sortir ce contenu du flux la fait donc retomber à zéro
   d'elle-même — on ne masque rien, on ne force aucune hauteur, et le jour où
   Kadence changera ce balisage, le pire qui puisse arriver est que la rangée
   reprenne sa place.

   ⚠️ **Une seule classe du thème est touchée, et il le faut.** Un élément
   absolu se cale sur son premier ancêtre positionné : sans cette ligne ce
   serait `.site-header`, qui va d'un bord à l'autre de la fenêtre, et le
   sélecteur partirait se coller à l'extrême droite de l'écran au lieu de
   s'aligner sur le contenu. On positionne donc le conteneur de la rangée, et
   lui seul. */
.site-top-header-wrap .site-container {
	position: relative;
}

/* ⚠️ `right: 0` collerait le sélecteur au bord de la **boîte de remplissage**
   du conteneur, soit 24 px plus à droite que le menu : deux éléments presque
   alignés se voient plus qu'un franc décalage. On reprend donc le remplissage
   du conteneur par la variable même dont Kadence le tire, et le sélecteur tombe
   exactement sur le bord droit du menu, à tous les points de rupture. */
.bb-langues {
	position: absolute;
	top: .55em;
	right: var(--global-content-edge-padding, 1.5rem);
	z-index: 20;
	display: inline-block;
	line-height: 1;
}

.bb-langues__details {
	position: relative;
}

/* Le bouton fermé
   ------------------------------------------------------------------------- */

.bb-langues__bouton {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .25em .5em;
	cursor: pointer;
	list-style: none; /* Firefox */
	user-select: none;
	border-radius: 3px;
}

/* Chrome et Safari dessinent le triangle par un pseudo-élément propriétaire
   que `list-style: none` n'atteint pas. On a notre propre chevron. */
.bb-langues__bouton::-webkit-details-marker {
	display: none;
}

.bb-langues__bouton:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bb-langues__chevron {
	width: 0;
	height: 0;
	border-left: .3em solid transparent;
	border-right: .3em solid transparent;
	border-top: .35em solid currentColor;
	transition: transform .15s ease;
}

.bb-langues__details[open] .bb-langues__chevron {
	transform: rotate(180deg);
}

/* Le panneau ouvert
   ------------------------------------------------------------------------- */

/* Aucune rangée de l'en-tête ne pose `overflow`, donc un panneau en position
   absolue déborde bien sur la rangée principale — c'est ce qu'on veut. */
.bb-langues__boite {
	position: absolute;
	top: calc(100% + .35em);
	right: 0;
	z-index: 100;
	min-width: 9em;
	padding: .35em 0;
	background: var(--global-palette9, #222);
	color: var(--global-palette3, #edf2f7);
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

/* ⚠️ Sélecteur volontairement lourd (0‑3‑1). `all.min.css` souligne tout lien
   contenu dans `.inner-link-style-normal` avec une spécificité de 0‑2‑1 : les
   sept langues ressortaient soulignées. Le réglage du thème
   (`header_html_link_style` = `plain`) corrige la cause ; cette règle fait que
   le composant tient debout partout où on le dépose, thème mal réglé compris. */
.bb-langues__boite a.bb-langues__lien {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .4em .8em;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.bb-langues__boite a.bb-langues__lien:hover,
.bb-langues__boite a.bb-langues__lien:focus-visible {
	background: rgba(255, 255, 255, .12);
	text-decoration: none;
}

.bb-langues__boite a.bb-langues__lien--actuel {
	font-weight: 600;
}

.bb-langues__code {
	text-transform: uppercase;
	font-size: .85em;
	letter-spacing: .04em;
}

.bb-langues__nom {
	font-size: .9em;
}

/* Nos drapeaux sont des SVG dessinés dans une boîte de 24 × 16 (voir le filtre
   `pll_language_flag_url` dans `i18n.php`). On fige tout de même la taille : le
   panneau ne doit pas sauter pendant leur chargement, et le repli — le PNG de
   16 × 11 de Polylang — doit occuper exactement la même case. */
.bb-langues__drapeau {
	display: block;
	width: 24px;
	height: 16px;
	flex: none;
	border-radius: 2px;
}

/* Lu, jamais vu
   ------------------------------------------------------------------------- */

.bb-langues__caché {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}