/**
 * En-tete — handoff, ecran 1, sous-section « En-tete ».
 * Hauteur ~67 px = 18 px de padding haut + 31 px de bloc marque + 18 px de padding bas.
 */

.odg-entete {
	display: flex;
	align-items: center;
	/* Le bouton panier est sorti du <nav> au lot 7 : l'en-tete a trois enfants.
	   La nav est poussee a droite par sa propre marge (voir plus bas) et le gap
	   de 28 px, jusque-la porte par la nav, separe desormais menu et panier. */
	gap: var(--odg-espace-28);
	padding: var(--odg-espace-18) var(--odg-espace-40);
	border-bottom: 1px solid var(--odg-trait);
	background-color: var(--odg-papier);
}

/* --- Marque --- */
.odg-entete__marque {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--odg-encre);
}

.odg-entete__marque:hover,
.odg-entete__marque:focus-visible {
	color: var(--odg-encre);
}

/*
 * Marque. Elle remplace la pastille verte de 30 px du lot 1, qui tenait la place
 * en attendant le visuel definitif : meme hauteur, donc aucun effet sur la
 * hauteur de l'en-tete, ni en desktop (ou ce sont les 33 px du bouton panier qui
 * la fixent) ni en mobile (ou ce sont les 45 px du meme bouton).
 *
 * `width: auto` : le fichier est en 143x260, on ne le contraint que par la
 * hauteur pour ne pas le deformer. `flex: 0 0 auto` l'empeche d'etre comprime
 * quand le nom manque de place sur ecran etroit.
 */
.odg-entete__marque-image {
	flex: 0 0 auto;
	width: auto;
	height: 30px;
}

/*
 * Zone de frappe de la marque. Le bloc mesure 31 px de haut (le nom et la
 * baseline), en dessous des 44 px tenus par les entrees de menu et le bouton
 * panier. On l'etend par un pseudo-element absolu plutot que par un `min-height`
 * : la contrainte est que l'en-tete ne regrossisse pas, or un `min-height: 44px`
 * ferait de la marque l'element le plus haut de la ligne et pousserait l'en-tete
 * de 70 a 81 px en desktop. L'extension est purement verticale — 31 + 2 x 7 =
 * 45 px —, elle ne deborde donc pas sur la navigation, separee de 28 px.
 */
.odg-entete__marque {
	position: relative;
}

.odg-entete__marque::after {
	content: "";
	position: absolute;
	inset: -7px 0;
}

.odg-entete__identite {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.odg-entete__nom {
	font-family: var(--odg-police-titre);
	font-size: 18px;
	font-weight: 600;
}

.odg-entete__baseline {
	font-family: var(--odg-police-ui);
	font-size: var(--odg-texte-10);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--odg-gris-texte);
}

/* --- Navigation --- */
.odg-entete__nav {
	display: flex;
	align-items: center;
	gap: var(--odg-espace-28);
	/* Remplace le `justify-content: space-between` de l'en-tete : marque a
	   gauche, navigation et panier colles a droite, comme au lot 1. */
	margin-left: auto;
}

.odg-entete__menu {
	display: flex;
	align-items: center;
	gap: var(--odg-espace-28);
	margin: 0;
	padding: 0;
	list-style: none;
}

.odg-entete__menu li {
	margin: 0;
}

.odg-entete__menu a {
	font-size: var(--odg-texte-14);
	font-weight: 500;
	/* Sans cela, la boite de ligne heritee du corps (1.6) rend le lien plus haut
	   que le bloc de marque et gonfle l'en-tete. */
	line-height: 1;
	color: var(--odg-encre);
	transition: color 200ms ease;
}

.odg-entete__menu a:hover,
.odg-entete__menu a:focus-visible,
.odg-entete__menu .current-menu-item > a,
.odg-entete__menu .current_page_item > a {
	color: var(--odg-terracotta);
}

/* Les sous-menus ne sont pas au programme du lot 1 : « Ressources » remplace
   l'ancien deroulant « Infos ». On aplatit ce qui pourrait remonter du menu WP. */
.odg-entete__menu .sub-menu {
	display: none;
}

/* --- Bouton panier --- */
.odg-entete__panier {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--odg-encre);
	border-radius: var(--odg-rayon-999);
	font-size: var(--odg-texte-13);
	font-weight: 500;
	/* Boite de ligne collee au texte : le padding de 9 px est spec, la hauteur du
	   bouton vaut donc 13 + 18 + 2 = 33 px. Avec le 1.6 herite du corps, elle
	   montait a 40,8 px et c'est le bouton, pas la marque, qui fixait la hauteur
	   de l'en-tete. */
	line-height: 1;
	color: var(--odg-encre);
	white-space: nowrap;
	transition: background-color 250ms ease, color 250ms ease, transform 250ms ease;
}

.odg-entete__panier:hover,
.odg-entete__panier:focus-visible {
	background-color: var(--odg-encre);
	color: var(--odg-papier);
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
 * En-tete compact — handoff, « Ecran 4 — Mobile ».
 *
 * Le handoff ne chiffre pas cet en-tete : il demande « en-tete compact ». Le
 * bloc marque et la navigation ne tiennent pas cote a cote a 375 px (la seule
 * navigation vaut deja ~250 px a 14 px, avant le bouton panier). Il faut donc
 * deux lignes. Aucun menu deroulant : le theme n'en a pas et le handoff n'en
 * demande pas — les quatre entrees restent visibles, ce qui vaut mieux qu'un
 * hamburger qui les cacherait.
 *
 * Resserrage du lot 7. L'en-tete mesurait 153 px en 375x812, soit 19 % de
 * l'ecran, parce que le menu et le bouton panier partageaient la seconde ligne :
 * les quatre entrees plus le panier depassaient les 343 px utiles et le menu
 * repassait a la ligne, ajoutant une troisieme rangee de 44 px. Le panier remonte
 * donc sur la ligne de la marque — ou il ne coute rien, la marque n'occupant que
 * la moitie de la largeur — et le menu recupere une ligne entiere pour lui seul.
 * Les gouttieres verticales passent de 12 a 8 px.
 *
 * Les cibles de frappe restent a 44 px, comme les cartes de format.
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	.odg-entete {
		flex-wrap: wrap;
		gap: var(--odg-espace-8) var(--odg-espace-12);
		padding: var(--odg-espace-8) var(--odg-espace-16);
	}

	/* Premiere ligne : la marque prend la place restante, le panier suit. */
	.odg-entete__marque {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Seconde ligne, pleine largeur. `order` la place sous le panier, qui la
	   precede pourtant dans le flux. */
	.odg-entete__nav {
		order: 3;
		flex: 1 1 100%;
		margin-left: 0;
	}

	.odg-entete__menu {
		flex: 1 1 auto;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0 var(--odg-espace-12);
	}

	/* 14 px de texte + 2 x 15 px = 44 px de hauteur de frappe. */
	.odg-entete__menu a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 15px 0;
	}

	/* 13 px + 2 x 15 px + 2 x 1 px de bordure = 45 px. C'est ce bouton qui fixe
	   la hauteur de la premiere ligne : 8 + 45 + 8 + 44 + 8 = 113 px d'en-tete,
	   contre 153 px avant le lot 7. */
	.odg-entete__panier {
		flex: 0 0 auto;
		order: 2;
		min-height: 44px;
		padding: 15px var(--odg-espace-16);
	}
}