/* ==========================================================================
   Header — Figma node 1:9292
   ========================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: var(--header-h);
	background: var(--c-header-bg);
	backdrop-filter: blur(6px);
	transition: box-shadow .3s, background-color .3s;
}
/* Retour client : le header garde sa taille au défilement ; seule une ombre apparaît pour le détacher du contenu. */
.site-header.is-scrolled { box-shadow: var(--shadow); }
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }

.site-header__inner {
	display: flex;
	align-items: center;
	height: 100%;
	/* Retour client : contenu du header limité à 1920px et centré, comme les conteneurs (le fond reste pleine largeur) */
	max-width: var(--container);
	margin-inline: auto;
	/* Retour client : même marge que les conteneurs des deux côtés */
	padding-inline: var(--gutter);
}

/* Logo */
.site-logo { display: block; flex: none; color: var(--c-logo); }
.site-logo svg, .site-logo img { width: clamp(150px, 16.5vw, 317px); height: auto; transition: transform .3s var(--ease); }
/* Retour client du 28/10/2026 : même zoom au survol que le logo arx iT du pied de page (×1,1, 0,3 s) */
.site-logo:hover :is(svg, img),
.site-logo:focus-visible :is(svg, img) { transform: scale(1.1); }
.site-logo__text { font-family: var(--font); fill: currentColor; }

/* Navigation : démarre à 525px sur 1920 */
.site-nav { margin-left: clamp(24px, 10.4vw, 200px); }
.site-nav__list { display: flex; gap: clamp(24px, 3vw, 58px); margin: 0; padding: 0; list-style: none; }
.site-nav a {
	position: relative;
	display: block;
	padding-block: .35em;
	font-size: var(--fs-22);
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--c-text);
}
/* Petit trait vert sous l'élément actif / survolé */
.site-nav a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 5px;
	height: 3px;
	background: var(--c-green);
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity .2s, width .25s var(--ease);
}
.site-nav a:hover { color: var(--c-green); }
.site-nav a:hover::after,
.site-nav .current-menu-item > a::after,
.site-nav .current-menu-ancestor > a::after,
.site-nav .current_page_parent > a::after { opacity: 1; width: 22px; }
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a { color: var(--c-green); }

/* Toggle clair / sombre */
.theme-toggle {
	position: relative;
	margin-left: auto;
	width: 37px;
	height: 19px;
	border: 1px solid var(--c-text);
	border-radius: 999px;
	background: var(--c-bg);
	flex: none;
}
.theme-toggle::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 3px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--c-text-strong);
	transition: transform .25s var(--ease), background-color .25s;
}
[data-theme="dark"] .theme-toggle::after { transform: translateX(16px); background: var(--c-green); }

/* Coin langue (FR / EN / DE, traductions GTranslate)
   Retour client : même taille et même survol que le coin de www.arxit.com
   (relevé dans sa feuille de style : carré vert de 250px tourné à 45° qui dépasse de l'écran) :
   - fermé : triangle de 74px de côté, seule la langue active est affichée ;
   - survol : le triangle passe à 114px en 0,32 s et les trois codes apparaissent (0,46 s),
     empilés dans l'ordre FR, EN, DE, la langue active restant à sa place dans la liste ;
   - codes en 14px blanc, colonne de 32px à 10px du bord droit, 3px du haut ; gras au survol. */

/* Repli sans le plugin : coin statique */
.lang-corner {
	position: absolute;
	top: 0;
	right: 0; /* retour client : toujours dans l'angle de l'écran, même au-delà de 1920px */
	width: 74px;
	aspect-ratio: 1;
	padding: 3px 10px 0 0;
	background: var(--c-green);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-align: right;
	text-transform: uppercase;
}

.lang-switcher {
	--corner: 74px;
	--corner-open: 114px;

	position: absolute;
	top: 0;
	right: 0; /* retour client : toujours dans l'angle de l'écran, même au-delà de 1920px */
	z-index: 10;
	width: var(--corner);
	height: var(--corner);
	/* Seul le triangle réagit à la souris : la boîte carrée recouvrirait le bouton du mode sombre */
	pointer-events: none;
}
/* Le triangle vert, dessiné à part pour que les codes ne soient pas rognés pendant l'animation */
.lang-switcher::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: var(--corner);
	height: var(--corner);
	background: var(--c-green);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	pointer-events: auto;
	transition: width .32s, height .32s;
}
.lang-switcher:focus-within,
.lang-switcher.is-open { width: var(--corner-open); height: var(--corner-open); }
.lang-switcher:focus-within::before,
.lang-switcher.is-open::before { width: var(--corner-open); height: var(--corner-open); }
/* Survol réservé au desktop : sous 768px on ouvre au clic, sinon un simple
   passage de souris déclenche le panneau et on sélectionne une langue par erreur. */
@media (hover: hover) and (min-width: 769px) {
	.lang-switcher:hover { width: var(--corner-open); height: var(--corner-open); }
	.lang-switcher:hover::before { width: var(--corner-open); height: var(--corner-open); }
}

/* Bouton d'ouverture (clavier, et doigt en mobile) : il couvre le coin fermé, puis passe sous les codes une fois ouvert */
.lang-switcher__current {
	position: absolute;
	inset: 0;
	z-index: 2;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	pointer-events: auto;
}
.lang-switcher.is-open .lang-switcher__current,
.lang-switcher:focus-within .lang-switcher__current { z-index: 0; }

.lang-switcher__menu {
	position: absolute;
	top: 3px;
	right: 10px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	pointer-events: auto;
}
.lang-switcher__menu a {
	display: none;
	width: 32px;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity .46s;
}
/* Fermé : seule la langue active ; ouvert : toutes, dans l'ordre de la liste */
.lang-switcher__menu a.gt-current-lang,
.lang-switcher:focus-within .lang-switcher__menu a,
.lang-switcher.is-open .lang-switcher__menu a { display: block; opacity: 1; }
@media (hover: hover) and (min-width: 769px) {
	.lang-switcher:hover .lang-switcher__menu a { display: block; opacity: 1; }
}
.lang-switcher__menu a:hover,
.lang-switcher__menu a:focus-visible { color: #fff; font-weight: 700; }
.lang-switcher :focus-visible { outline-color: #fff; outline-offset: -3px; }

/* Langues du menu burger : masquées tant que le coin vert est affiché */
.site-nav__langs { display: none; }

/* Burger : dès 1024px (retour client du 20/10/2026), modèle = menu mobile de www.arxit.com :
   panneau plein écran qui glisse depuis la droite (0,25 s), liens 22px espacés de 36px,
   « FR EN DE » en ligne dessous (langue active en gras), coin vert masqué. */
.nav-toggle { display: none; }

@media (max-width: 1024px) {
	.nav-toggle {
		position: relative;
		z-index: 2; /* au-dessus du panneau : il devient la croix de fermeture */
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-left: 16px;
		flex: none;
	}
	.nav-toggle span,
	.nav-toggle span::before,
	.nav-toggle span::after {
		display: block;
		width: 24px;
		height: 2px;
		background: var(--c-text-strong);
		transition: transform .25s var(--ease), background-color .2s;
	}
	.nav-toggle span { position: relative; }
	.nav-toggle span::before,
	.nav-toggle span::after { content: ""; position: absolute; left: 0; }
	.nav-toggle span::before { top: -7px; }
	.nav-toggle span::after { top: 7px; }
	.nav-open .nav-toggle span { background: transparent; }
	.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
	.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

	/* Le logo reste visible au-dessus du panneau ouvert */
	.site-logo { position: relative; z-index: 2; }

	/* Les langues passent dans le menu : plus de coin vert */
	.lang-switcher,
	.lang-corner { display: none; }

	/* Panneau plein écran, en position absolue dans le header (fixe) : voir le « piège du header »
	   dans CLAUDE.md (le backdrop-filter en fait le bloc conteneur), la barre d'admin est déjà décalée. */
	.site-nav {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
		height: 100vh;
		height: 100dvh;
		margin: 0;
		padding: var(--header-h) var(--gutter) 40px;
		overflow-y: auto;
		background: var(--c-bg);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .25s ease, visibility 0s .25s;
	}
	.nav-open .site-nav { transform: none; visibility: visible; transition: transform .25s ease; }
	.nav-open { overflow: hidden; } /* la page ne défile pas sous le menu */

	.site-nav__list { flex-direction: column; gap: 0; }
	/* 36px entre deux liens (18px de chaque côté : les marges des éléments flex ne fusionnent pas) */
	.site-nav a { margin-block: 18px; padding-block: 0; font-size: 22px; line-height: 1.5; letter-spacing: .04em; }
	.site-nav__list > :first-child > a { margin-top: 16px; }
	.site-nav__langs { margin-top: 26px; }
	.site-nav a::after { left: 0; transform: none; }

	.site-nav__langs { display: flex; gap: 16px; }
	.site-nav__langs a {
		margin: 0;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: uppercase;
		color: var(--c-text);
	}
	.site-nav__langs a::after { display: none; }
	.site-nav__langs a.gt-current-lang { font-weight: 700; color: var(--c-heading); }
}