/*
 * Outils d’en-tête : sélecteur de langue WPML + bouton et modale du plugin h2a-accessibility-tools.
 * Maquette Figma « A 1.2 » (bureau et mobile, en haut de page et après scroll).
 * Chargé après le CSS du plugin (inc/header-tools.php) ; ne remplace aucune règle du thème.
 *
 * Couleurs : presets du thème uniquement, pour suivre le remappage du mode contraste élevé.
 */

/* ------------------------------------------------------------------ *
 * Variables
 * ------------------------------------------------------------------ */

:root {
	--h2a-tools-adminbar: 0px;
	--h2a-tools-header-h: 136px; /* en-tête en haut de page (bureau) */
	--h2a-tools-h: 40px;
	--h2a-tools-tab-w: 48px; /* part visible de l’onglet collé au bord de l’écran */
	--h2a-tools-blob-w: 67px; /* onglet + goutte qui déborde du bord */
	--h2a-tools-gap: 8px;
	--h2a-tools-panel-w: 380px;
	--h2a-lang-w: 40px; /* largeur d’un code de langue (pastille du toggle) */
	--h2a-lang-h: 30px;

	/* Couleurs : en-tête sombre (texte prune) sur page claire, par défaut. */
	--h2a-tools-border: var(--wp--preset--color--secondary);
	--h2a-tools-ink: var(--wp--preset--color--secondary);
	--h2a-tools-active-bg: var(--wp--preset--color--secondary);
	--h2a-tools-active-fg: var(--wp--preset--color--white);
	--h2a-tools-tab-bg: var(--wp--preset--color--primary);
	--h2a-tools-tab-fg: var(--wp--preset--color--white);
}

body.admin-bar {
	--h2a-tools-adminbar: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * En-tête rétracté (classe is-scrolled du thème) : valeur de repli, 40 px de logo + 2 × 8 px.
 * La hauteur réelle est mesurée par assets/js/header-tools.js et remplace ces valeurs.
 */
body:has(.site-header.is-scrolled) {
	--h2a-tools-header-h: 56px;
}

/* Texte clair (héros sombre) : pilule blanche, onglet rouge. */
body:has(.site-header[data-header-tone="light"]) {
	--h2a-tools-border: var(--wp--preset--color--white);
	--h2a-tools-ink: var(--wp--preset--color--white);
	--h2a-tools-active-bg: var(--wp--preset--color--white);
	--h2a-tools-active-fg: var(--wp--preset--color--black);
}

/* Barre rouge (après scroll) ou menu ouvert : onglet prune, pilule noire. */
body:has(.site-header.is-scrolled),
body:has(.site-header.is-menu-open) {
	--h2a-tools-border: var(--wp--preset--color--black);
	--h2a-tools-ink: var(--wp--preset--color--black);
	--h2a-tools-active-bg: var(--wp--preset--color--secondary);
	--h2a-tools-active-fg: var(--wp--preset--color--white);
	--h2a-tools-tab-bg: var(--wp--preset--color--secondary);
	--h2a-tools-tab-fg: var(--wp--preset--color--white);
}

@media (max-width: 959.98px) {
	:root {
		--h2a-tools-header-h: 104px;
		--h2a-tools-h: 44px;
		--h2a-tools-tab-w: 44px;
		--h2a-tools-blob-w: 44px;
		--h2a-lang-w: 38px;
	}

	body:has(.site-header.is-scrolled) {
		--h2a-tools-header-h: 80px;
	}

	body:has(.site-header.is-scrolled),
	body:has(.site-header.is-menu-open) {
		--h2a-tools-border: var(--wp--preset--color--secondary);
	}
}

/* ------------------------------------------------------------------ *
 * Sélecteur de langue WPML (dans l’en-tête)
 * ------------------------------------------------------------------ */

.h2a-lang {
	position: absolute;
	top: 50%;
	right: calc(var(--h2a-tools-tab-w) + var(--h2a-tools-gap));
	transform: translateY(-50%);
	z-index: 3;
}

.h2a-lang__list {
	align-items: center;
	position: relative;
	z-index: 1;
	border: 1px solid var(--h2a-tools-border);
	border-radius: 9999px;
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 4px;
}

.h2a-lang__item {
	margin: 0;
	padding: 0;
}

.h2a-lang__link {
	align-items: center;
	border-radius: 9999px;
	color: var(--h2a-tools-ink);
	display: flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: var(--wp--custom--weight--regular, 400);
	justify-content: center;
	line-height: 1;
	height: var(--h2a-lang-h);
	padding: 0;
	text-decoration: none;
	text-transform: lowercase;
	transition: color 0.3s ease 0.1s;
	width: var(--h2a-lang-w);
}

/* La pastille est dessinée par .h2a-lang__goo ; ici, seulement la couleur du texte. */
.h2a-lang__link.is-current {
	color: var(--h2a-tools-active-fg);
}

/*
 * Toggle goo : --side vaut 0 (langue par défaut à gauche) ou 1 (à droite). Pendant le changement
 * (.is-switching, posé par header-tools.js), la pastille rejoint l’autre côté avant la navigation.
 */
.h2a-lang {
	--h2a-lang-side: 0;
}

.h2a-lang:has(.h2a-lang__item:last-child .is-current) {
	--h2a-lang-side: 1;
}

.h2a-lang.is-switching {
	--h2a-lang-side: 1;
}

.h2a-lang.is-switching:has(.h2a-lang__item:last-child .is-current) {
	--h2a-lang-side: 0;
}

.h2a-lang.is-switching .h2a-lang__link.is-current {
	color: var(--h2a-tools-ink);
}

.h2a-lang.is-switching a.h2a-lang__link {
	color: var(--h2a-tools-active-fg);
}

.h2a-lang__filter {
	position: absolute;
}

.h2a-lang__goo {
	filter: url(#h2a-lang-goo);
	height: var(--h2a-lang-h);
	left: calc(1px + var(--h2a-lang-pad, 4px));
	pointer-events: none;
	position: absolute;
	top: calc(1px + var(--h2a-lang-pad, 4px));
	width: calc(var(--h2a-lang-w) * 2);
}

.h2a-lang__ball,
.h2a-lang__bridge {
	background-color: var(--h2a-tools-active-bg);
	position: absolute;
	transition: transform 0.45s ease, background-color 0.2s ease;
}

.h2a-lang__ball {
	border-radius: 9999px;
	height: 100%;
	top: 0;
	transform-origin: center;
	width: var(--h2a-lang-w);
}

.h2a-lang__ball.is-left {
	left: 0;
	transform: scale(calc(1 - var(--h2a-lang-side)));
}

.h2a-lang__ball.is-right {
	left: var(--h2a-lang-w);
	transform: scale(var(--h2a-lang-side));
}

/* Pont central : glisse d’un côté à l’autre, un peu plus lentement, ce qui étire la goutte. */
.h2a-lang__bridge {
	border-radius: 9999px;
	height: 50%;
	left: 0;
	top: 25%;
	transform: translateX(calc(var(--h2a-lang-side) * var(--h2a-lang-w)));
	transition: transform 0.6s ease, background-color 0.2s ease;
	width: var(--h2a-lang-w);
}

a.h2a-lang__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.h2a-lang__link:focus-visible {
	box-shadow: 0 0 0 2px var(--wp--preset--color--white);
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

@media (max-width: 959.98px) {
	/* [langue] [goutte] [burger] : le burger du thème occupe 64 px à droite. */
	.h2a-lang {
		right: calc(24px + 64px - 4px + var(--h2a-tools-tab-w) + var(--h2a-tools-gap));
	}

	.h2a-lang {
		--h2a-lang-pad: 3px;
	}

	.h2a-lang__list {
		padding: 3px;
	}

	.h2a-lang__link {
		font-size: 0.875rem;
	}
}

/* ------------------------------------------------------------------ *
 * Bouton « Accessibilité » : onglet collé au bord de l’écran, aligné sur l’en-tête
 * ------------------------------------------------------------------ */

html body .h2a-accessibility-wrapper.h2a-accessibility-wrapper--fixed {
	align-items: flex-start;
	flex-direction: row;
	right: calc(var(--h2a-tools-tab-w) - var(--h2a-tools-blob-w));
	top: calc(var(--h2a-tools-adminbar) + (var(--h2a-tools-header-h) - var(--h2a-tools-h)) / 2);
}

@media (max-width: 959.98px) {
	html body .h2a-accessibility-wrapper.h2a-accessibility-wrapper--fixed {
		right: calc(24px + 64px - 4px);
	}
}

html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button {
	background: transparent;
	border: 0;
	border-radius: 9999px 0 0 9999px;
	color: var(--h2a-tools-tab-fg);
	cursor: pointer;
	font-size: 0;
	height: var(--h2a-tools-h);
	min-height: 0;
	padding: 0;
	position: relative;
	width: var(--h2a-tools-blob-w);
}

/* Forme : cercle + goutte qui coule vers le bord (tracé de la maquette). */
html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67 40'%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3Ccircle cx='47' cy='20' r='20'/%3E%3Cpath transform='translate(26.514 1.889)' d='M.486.111C3.153.944 9.286 2.111 12.486.111c3.2-2 2.334 23.5 1.5 36.5-3.5-1.167-11.1-2.8-13.5 0-2.4 2.8 4.667-9.833 8.5-16.5L.486.111Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67 40'%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3Ccircle cx='47' cy='20' r='20'/%3E%3Cpath transform='translate(26.514 1.889)' d='M.486.111C3.153.944 9.286 2.111 12.486.111c3.2-2 2.334 23.5 1.5 36.5-3.5-1.167-11.1-2.8-13.5 0-2.4 2.8 4.667-9.833 8.5-16.5L.486.111Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
	background: var(--h2a-tools-tab-bg);
	content: "";
	inset: 0;
	position: absolute;
	transition: background-color 0.2s ease;
}

/* Pictogramme d’accessibilité (Figma 1514:5740), conservé aussi quand la modale est ouverte (devient une croix quand la modale est ouverte). */
html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button::after {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129.5 166.18'%3E%3Cpath d='M126.99 48.14C122.67 42.1 114.27 40.7 108.23 45.01L70.29 72.1C66.97 74.47 62.52 74.47 59.2 72.1L21.26 45.01C15.22 40.7 6.82 42.1 2.5 48.14C-1.82 54.19-0.41 62.58 5.63 66.9L38.52 90.38C42.44 93.18 43.28 98.67 40.37 102.51L8.47 144.62C3.99 150.54 5.15 158.97 11.07 163.46C13.5 165.3 16.35 166.19 19.18 166.19C23.25 166.19 27.26 164.35 29.91 160.86L57.15 124.9C60.97 119.86 68.54 119.86 72.36 124.9L99.6 160.86C102.25 164.35 106.26 166.19 110.33 166.19C113.16 166.19 116.01 165.3 118.44 163.46C124.36 158.97 125.52 150.54 121.04 144.62L89.14 102.51C86.23 98.67 87.07 93.18 90.99 90.38L123.87 66.9C129.91 62.58 131.31 54.19 127 48.14Z'/%3E%3Cpath d='M40.9 23.85C40.9 10.68 51.58 0 64.75 0C77.92 0 88.6 10.68 88.6 23.85C88.6 30.44 85.93 36.41 81.6 40.73H81.62L64.76 57.59L47.9 40.73H47.92C43.59 36.41 40.92 30.44 40.92 23.85Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129.5 166.18'%3E%3Cpath d='M126.99 48.14C122.67 42.1 114.27 40.7 108.23 45.01L70.29 72.1C66.97 74.47 62.52 74.47 59.2 72.1L21.26 45.01C15.22 40.7 6.82 42.1 2.5 48.14C-1.82 54.19-0.41 62.58 5.63 66.9L38.52 90.38C42.44 93.18 43.28 98.67 40.37 102.51L8.47 144.62C3.99 150.54 5.15 158.97 11.07 163.46C13.5 165.3 16.35 166.19 19.18 166.19C23.25 166.19 27.26 164.35 29.91 160.86L57.15 124.9C60.97 119.86 68.54 119.86 72.36 124.9L99.6 160.86C102.25 164.35 106.26 166.19 110.33 166.19C113.16 166.19 116.01 165.3 118.44 163.46C124.36 158.97 125.52 150.54 121.04 144.62L89.14 102.51C86.23 98.67 87.07 93.18 90.99 90.38L123.87 66.9C129.91 62.58 131.31 54.19 127 48.14Z'/%3E%3Cpath d='M40.9 23.85C40.9 10.68 51.58 0 64.75 0C77.92 0 88.6 10.68 88.6 23.85C88.6 30.44 85.93 36.41 81.6 40.73H81.62L64.76 57.59L47.9 40.73H47.92C43.59 36.41 40.92 30.44 40.92 23.85Z'/%3E%3C/svg%3E") no-repeat center / contain;
	background: currentColor;
	content: "";
	height: 24px;
	left: calc((var(--h2a-tools-h) - 24px) / 2);
	position: absolute;
	top: calc((var(--h2a-tools-h) - 24px) / 2);
	width: 24px;
}

/* Le libellé reste dans l’arbre d’accessibilité (nom du bouton). */
html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button-label {
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button:focus-visible {
	box-shadow: 0 0 0 2px var(--wp--preset--color--white);
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

@media (max-width: 959.98px) {
	/* Mobile : cercle simple, sans goutte vers le bord (le burger occupe ce coin). */
	html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button {
		border-radius: 50%;
	}

	html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button::before {
		-webkit-mask: none;
		border-radius: 50%;
		mask: none;
	}
}

/* Windows contraste élevé : le dessin (masque) n’est pas rendu, on garde le libellé. */
@media (forced-colors: active) {
	.h2a-lang__goo {
		display: none;
	}

	.h2a-lang__link.is-current {
		border: 2px solid ButtonText;
		color: ButtonText;
		text-decoration: underline;
	}

	html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button {
		border: 2px solid ButtonText;
		border-radius: 9999px;
		color: ButtonText;
		font-size: 0.875rem;
		padding: 0 12px;
		width: auto;
	}

	html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button::before,
	html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button::after {
		display: none;
	}

	html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button-label {
		clip: auto;
		clip-path: none;
		height: auto;
		margin: 0;
		position: static;
		width: auto;
	}
}

/* ------------------------------------------------------------------ *
 * Modale d’accessibilité (même contenu que le plugin : 2 réglages)
 * ------------------------------------------------------------------ */

html body .h2a-accessibility-wrapper.h2a-accessibility-wrapper--fixed .h2a-accessibility-panel {
	background: var(--wp--preset--color--white);
	border-radius: 32px 6px 32px 32px; /* coin pointu sous l’onglet : la modale « coule » du bouton */
	bottom: auto;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--body);
	left: auto;
	margin: 0;
	max-width: none;
	min-width: 0;
	padding: 28px;
	right: 24px;
	top: calc(var(--h2a-tools-adminbar) + (var(--h2a-tools-header-h) + var(--h2a-tools-h)) / 2 + 16px);
	width: min(var(--h2a-tools-panel-w), calc(100vw - 48px));
}

html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-panel.is-open {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-title {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium, 1.625rem);
	font-weight: var(--wp--custom--weight--semibold, 600);
	line-height: 1.2;
	margin: 0;
	padding: 0 48px 18px 0;
}

html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-close {
	background: transparent;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 50%;
	color: var(--wp--preset--color--secondary);
	font-size: 1.5rem;
	height: 40px;
	right: -6px;
	top: -6px;
	transform: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	width: 40px;
}

html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-close:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}

html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-close:focus-visible {
	box-shadow: 0 0 0 2px var(--wp--preset--color--white);
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-option {
	gap: 16px;
	margin-top: 18px;
}

html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-label {
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--base, 1.125rem);
	font-weight: var(--wp--custom--weight--regular, 400);
	line-height: 1.3;
}

/* Interrupteur : piste 48 × 28, bouton rond de 20. */
html body .h2a-accessibility-wrapper--fixed .h2a-switch {
	height: 28px;
	width: 48px;
}

html body .h2a-accessibility-wrapper--fixed .h2a-switch-track {
	background: #777;
	border-radius: 9999px;
}

html body .h2a-accessibility-wrapper--fixed .h2a-switch-thumb {
	box-shadow: none;
	height: 20px;
	width: 20px;
}

html body .h2a-accessibility-wrapper--fixed .h2a-switch[aria-checked="true"] .h2a-switch-track {
	background: var(--wp--preset--color--primary);
}

html body .h2a-accessibility-wrapper--fixed .h2a-switch[aria-checked="true"] .h2a-switch-thumb {
	box-shadow: none;
	transform: translateX(20px);
}

html body .h2a-accessibility-wrapper--fixed .h2a-switch:focus-visible {
	box-shadow: 0 0 0 2px var(--wp--preset--color--white);
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* Mobile : feuille qui monte du bas de l’écran. */
@media (max-width: 959.98px) {
	html body .h2a-accessibility-wrapper.h2a-accessibility-wrapper--fixed .h2a-accessibility-panel {
		border-radius: 28px 28px 0 0;
		bottom: 0;
		left: 0;
		margin-inline: auto;
		max-width: 560px;
		padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px));
		right: 0;
		top: auto;
		transform: translateY(100%);
		transform-origin: bottom center;
		width: auto;
	}

	html body .h2a-accessibility-wrapper.h2a-accessibility-wrapper--fixed .h2a-accessibility-panel.is-open {
		transform: translateY(0);
	}

	html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-panel::before {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 2px;
		content: "";
		height: 4px;
		left: 50%;
		margin-left: -20px;
		position: absolute;
		top: 10px;
		width: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.h2a-lang__link,
	.h2a-lang__ball,
	.h2a-lang__bridge,
	html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-button::before,
	html body .h2a-accessibility-wrapper--fixed .h2a-accessibility-close {
		transition: none;
	}
}

@media print {
	.h2a-lang,
	.h2a-accessibility-wrapper--fixed {
		display: none;
	}
}