/* ==========================================================================
   Header : logo goutte à gauche, navigation alignée sur la 3e colonne.

   .header garde sa hauteur dans la page (mise en page de la maquette inchangée) ;
   .header__barre est fixe par-dessus. Au scroll (header.js) :
     - .header--compact : barre resserrée, logo réduit (dès qu'on a dépassé le header) ;
     - .header--cache   : barre masquée pendant la descente, réaffichée à la remontée.
   ========================================================================== */

.header {
	position: relative;
	z-index: var(--z-header);
	height: var(--header-h);
}

.header__barre {
	position: fixed;
	inset: 0 0 auto;
	padding-top: var(--header-pad-top);
	padding-bottom: var(--header-pad-bas);
	background: var(--c-white);
	transition:
		transform var(--t-header),
		padding var(--t-header),
		box-shadow var(--t-header);
}

.header__logo {
	display: block;
	width: var(--logo-w);
	margin-left: var(--header-inset);
	transition: width var(--t-header);
}

.header__logo-img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--logo-ratio);
}

/* Survol : la goutte s'efface, la rosace apparaît à sa place (centrée, 122 px à 1920). */
.header__logo--survol {
	position: relative;
}

.header__logo-img,
.header__logo-survol {
	transition: opacity var(--t-hover);
}

.header__logo-survol {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% * var(--logo-survol-echelle));
	max-width: none;
	height: auto;
	opacity: 0;
	pointer-events: none;
	translate: -50% -50%;
}

.header__logo--survol:hover,
.header__logo--survol:focus-visible {
	& .header__logo-img {
		opacity: 0;
	}

	& .header__logo-survol {
		opacity: 1;
	}
}

.header__logo-texte {
	font-weight: var(--fw-bold);
	font-size: var(--fs-nav);
	white-space: nowrap;
}

/* La nav commence au début de la 3e colonne de la grille. */
.header__nav {
	position: absolute;
	top: var(--nav-haut);
	left: calc((100% - var(--container)) / 2 + 2 * ((var(--container) - (var(--columns) - 1) * var(--gutter)) / var(--columns) + var(--gutter)));
	transition: top var(--t-header), transform var(--t-header);
}

.header__menu {
	display: flex;
	gap: var(--nav-gap);
}

.header__lien {
	display: block;
	font-weight: var(--fw-medium);
	font-size: var(--fs-nav);
	line-height: var(--lh-nav);
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--t-hover);

	&:hover,
	&[aria-current] {
		color: var(--c-blue);
	}
}

/* Burger : uniquement en mobile (voir plus bas). */
.header__burger {
	display: none;
}

/* ---------- États au scroll ---------- */
.header--compact {
	& .header__barre {
		padding-block: var(--header-compact-pad);
		box-shadow: var(--ombre-header);
	}

	& .header__logo {
		width: var(--logo-w-compact);
	}

	& .header__nav {
		top: 50%;
		transform: translateY(-50%);
	}
}

.header--cache .header__barre {
	transform: translateY(-100%);
	box-shadow: none;
}

/* Tablette : la nav se cale à droite (les colonnes deviennent trop étroites). */
@media (max-width: 1023.98px) {
	.header__nav {
		left: auto;
		right: var(--page-margin);
	}

	.header__menu {
		gap: var(--space-l);
	}
}

/* Mobile : burger (avec JS) ; sans JS, la nav reste visible et passe à la ligne. */
@media (max-width: 767.98px) {
	.header__barre {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-inline: var(--page-margin);
	}

	.header__logo {
		margin-left: 0;
	}

	.header__nav,
	.header--compact .header__nav {
		position: static;
		transform: none;
	}

	.header__menu {
		flex-wrap: wrap;
		justify-content: flex-end;
		column-gap: var(--space-m);
	}

	.header__lien {
		font-size: var(--fs-cta);
		line-height: var(--lh-nav);
	}

	.js .header__nav {
		display: none;
	}

	.js .header__burger {
		display: grid;
	}
}