/**
 * L'en-tête du site.
 *
 * La feuille ne decide d'aucune couleur : la teinte, son opacite et le voile
 * arrivent en regles en ligne, calcules par PHP. Ce qui est ici est de la
 * structure — un media qui couvre sans deformer, une barre qui retrecit, une
 * encre qui reste lisible sur ce qu'on a pose dessous.
 */

/*
 * Le media sort du flux et couvre la barre.
 *
 * `object-fit: cover` recadre au lieu d'etirer : une image large sur un
 * en-tete de soixante-douze pixels perdrait ses bords, ce qui est le bon
 * compromis — deformer un visage ne l'est pas.
 */
.eta-header-fond,
.eta-header-voile {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.eta-header-fond {
	object-fit: cover;
	border: 0;
}

/*
 * Le contenu passe devant le media.
 *
 * `.wia-nav` n'a pas de contexte d'empilement a lui : sans cette position, le
 * logo et le menu se retrouvent sous l'image, visibles seulement la ou elle
 * est claire — et invisibles ailleurs, ce qui se lit comme un bogue de
 * chargement.
 */
body.eta-header-media .wia-header {
	position: relative;
	overflow: hidden;
}

body.eta-header-media .wia-header .wia-wrap,
body.eta-header-media .wia-header .wia-nav {
	position: relative;
	z-index: 1;
}

/*
 * L'en-tete collant reste collant : `position: relative` ci-dessus ne vaut
 * que pour l'en-tete statique, et la regle du theme — `sticky` — porte le
 * meme poids. On la reecrit donc pour le cas ou elle doit gagner.
 */
body.eta-header-media:not(.et-astra-header-static) .wia-header {
	position: sticky;
	top: 0;
}

/* ───────── L'encre posee sur le media ───────── */

/*
 * Deux classes de racine : la regle passe devant celles de l'onglet Menu,
 * qui peignent depuis `body.et-astra`. Le tiroir mobile est ecarte — il
 * s'ouvre sur le fond de la page, pas sur l'en-tete, et son encre est celle
 * du corps.
 */
body.eta-header-clair .wia-header,
body.eta-header-clair .wia-header a:not(.wia-nav-menu *),
body.eta-header-clair .wia-header button:not(.wia-nav-menu *) {
	color: #fff;
	border-color: rgba(255, 255, 255, .32);
}

body.eta-header-sombre .wia-header,
body.eta-header-sombre .wia-header a:not(.wia-nav-menu *),
body.eta-header-sombre .wia-header button:not(.wia-nav-menu *) {
	color: #12212a;
}

/*
 * Le tiroir garde l'encre du corps, quoi qu'il arrive : il s'ouvre sur le
 * fond de la page. Trois classes le mettent a l'abri des deux regles
 * ci-dessus, quel que soit l'ordre de chargement des feuilles.
 */
body.eta-header-clair .wia-header .wia-nav-menu,
body.eta-header-clair .wia-header .wia-nav-menu a,
body.eta-header-clair .wia-header .wia-nav-menu button,
body.eta-header-sombre .wia-header .wia-nav-menu,
body.eta-header-sombre .wia-header .wia-nav-menu a,
body.eta-header-sombre .wia-header .wia-nav-menu button {
	color: var(--wia-txt, #1d2327);
	border-color: var(--wia-line, rgba(0, 0, 0, .12));
}

/* ───────── La forme ───────── */

body.eta-header-pleine .wia-header .wia-wrap {
	max-width: none;
}

body.eta-header-ombre .wia-header {
	box-shadow: 0 2px 18px rgba(0, 0, 0, .12);
}

body.eta-header-sans-filet .wia-header {
	border-bottom-color: transparent;
}

/* ───────── Le retrecissement ───────── */

/*
 * La hauteur est une variable, et c'est ce qui rend l'animation possible :
 * la barre, son contenu et l'ancrage du tiroir la lisent tous. Animer la
 * variable les deplace ensemble — animer la seule hauteur de la barre aurait
 * laisse le tiroir s'ouvrir a l'ancienne place.
 */
body.eta-header-retrecit .wia-header {
	transition: min-height .22s ease, background-color .22s ease, box-shadow .22s ease;
}

body.eta-header-retrecit .wia-header .wia-nav {
	transition: min-height .22s ease;
}

@media (prefers-reduced-motion: reduce) {

	body.eta-header-retrecit .wia-header,
	body.eta-header-retrecit .wia-header .wia-nav {
		transition: none;
	}
}