/*
 * En-tête — issue 04. Référence : planche 3 (Socle), décisions du 25/09.
 *
 * Un seul balisage pour tous les écrans (inc/entete.php) ; le mobile est une
 * affaire de media query, jamais de classe. Sous 991 : bouton menu, logo,
 * recherche, projet ; les deux navigations passent dans un panneau qui
 * s'ouvre sous la barre (is-open, posé par js/entete.js).
 *
 * Valeurs de la planche hors de l'échelle, ramenées au pas le plus proche :
 * écart entre liens publics 20 → 24, marge basse de leur ligne 10 → 8,
 * marge latérale du bouton projet 20 → 24. Les hauteurs de 44 px viennent de
 * min-height, pas du padding.
 */

/* --- Lien d'évitement (issue 06) ------------------------------------------ */
/* Premier élément focusable de la page. Hors écran au repos, jamais en
   display: none, qui le retirerait du parcours clavier. */
.pel-skip-link {
	position: absolute;
	top: var(--pel-space-2xs);
	left: var(--pel-space-2xs);
	z-index: 100;
	display: inline-flex;
	align-items: center;
	min-height: var(--pel-cible);
	padding-inline: var(--pel-space-m);
	border-radius: var(--pel-radius-m);
	background: var(--pel-encre);
	color: var(--pel-ivoire);
	font-size: var(--pel-fs-nav);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
}

.pel-skip-link:focus {
	transform: none;
}

/* --- Bandeau ------------------------------------------------------------ */
.pel-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--pel-blanc);
	border-bottom: var(--pel-filet) solid var(--pel-lin);
}

/* Collé en haut de page après défilement : l'ombre dit qu'il flotte. */
.pel-header.is-stuck {
	box-shadow: var(--pel-shadow-m);
}

.pel-header__barre {
	display: flex;
	align-items: center;
	gap: var(--pel-space-l);
	min-height: var(--pel-entete-h);
}

.pel-header__menu {
	display: none;
}

/* --- Navigation --------------------------------------------------------- */
.pel-nav {
	display: flex;
	align-items: center;
	gap: var(--pel-space-3xs);
	flex-grow: 1;
}

.pel-nav__item {
	display: inline-flex;
	align-items: center;
	min-height: var(--pel-cible);
	padding-inline: var(--pel-space-xs);
	border-bottom: var(--pel-trait) solid transparent;
	color: var(--pel-encre);
	font-size: var(--pel-fs-nav);
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

.pel-nav__item:hover {
	color: var(--pel-terre-foncee);
}

/* La rubrique ouverte : un trait ET une graisse, jamais la couleur seule. */
.pel-nav__item.is-current {
	border-bottom-color: var(--pel-terre-cuite);
	font-weight: 600;
}

/* Seconde ligne : les publics et le showroom. */
.pel-nav--secondary {
	gap: var(--pel-space-m);
	padding-bottom: var(--pel-space-2xs);
}

.pel-nav__item--secondaire {
	position: relative;
	min-height: auto;
	padding-inline: 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
}

/* La ligne garde l'allure de la planche, mais la cible fait 44 px de haut :
   la zone cliquable déborde de part et d'autre du texte. */
.pel-nav__item--secondaire::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block: calc((var(--pel-cible) - 1lh) / -2);
}

/* --- Actions ------------------------------------------------------------ */
.pel-header__actions {
	display: flex;
	align-items: center;
	gap: var(--pel-space-xs);
	flex-shrink: 0;
}

.pel-header__recherche {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pel-cible);
	height: var(--pel-cible);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-pill);
	color: var(--pel-encre);
}

.pel-header__icone {
	width: var(--pel-icone);
	height: var(--pel-icone);
}

/* Menu fermé : trois barres. Ouvert : une croix. L'état vient d'aria-expanded,
   la seule source : l'icône ne peut pas contredire ce qu'entend un lecteur d'écran. */
.pel-header__icone-fermer,
.pel-header__menu[aria-expanded="true"] .pel-header__icone-ouvrir {
	display: none;
}

.pel-header__menu[aria-expanded="true"] .pel-header__icone-fermer {
	display: block;
}

/* Pictogramme du bouton projet sur mobile : une liste sur une planchette. */
:root {
	--pel-picto-projet: url("data:image/svg+xml,%3Csvg xmlns='http://www%2Ew3%2Eorg/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4M12 16h4M8 11h0M8 16h0'/%3E%3C/svg%3E");
}

/* « Mon projet », jamais « panier ». */
.pel-header__projet {
	display: inline-flex;
	align-items: center;
	gap: var(--pel-space-2xs);
	min-height: var(--pel-cible);
	padding-inline: var(--pel-space-m);
	border-radius: var(--pel-radius-pill);
	background: var(--pel-terre-cuite);
	color: var(--pel-blanc);
	font-size: var(--pel-fs-nav);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.pel-header__projet:hover {
	background: var(--pel-terre-foncee);
}

/* Le nombre d'articles, 0 compris : la pastille reste lisible même vide. */
.pel-header__pastille {
	padding-inline: var(--pel-space-2xs);
	border-radius: var(--pel-radius-pill);
	background: var(--pel-blanc);
	color: var(--pel-terre-foncee);
	font-size: var(--pel-fs-small);
}

/* --- Mobile et tablette : dès 991 (issue 55) ----------------------------- */
@media (max-width: 991px) {
	/* La marge verticale garde la première ligne à 76 px quand le panneau
	   s'ouvre en dessous : min-height seul la laisserait se tasser. */
	.pel-header__barre {
		flex-wrap: wrap;
		gap: var(--pel-space-xs);
		min-height: 0;
		padding-block: calc((var(--pel-entete-h) - var(--pel-logo-entete)) / 2);
	}

	.pel-header__menu {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--pel-cible);
		height: var(--pel-cible);
		border: var(--pel-filet) solid var(--pel-lin);
		border-radius: var(--pel-radius-m);
		background: var(--pel-blanc);
		color: var(--pel-encre);
		cursor: pointer;
	}

	.pel-header__logo {
		flex-grow: 1;
	}

	.pel-header__recherche {
		border-radius: var(--pel-radius-m);
	}

	/* Le bouton projet devient un carré de 44 px : un pictogramme (une liste
	   sur une planchette, « projet » et pas « panier »), le nombre en
	   pastille dans le coin. Un « 0 » seul ne disait rien (#255) ; le
	   libellé reste lu par les lecteurs d'écran. */
	.pel-header__projet {
		position: relative;
		justify-content: center;
		width: var(--pel-cible);
		padding-inline: 0;
		border-radius: var(--pel-radius-m);
	}

	.pel-header__projet::before {
		content: "";
		width: calc(var(--pel-icone) * 4 / 3);
		height: calc(var(--pel-icone) * 4 / 3);
		background: currentColor;
		-webkit-mask: var(--pel-picto-projet) center / contain no-repeat;
		mask: var(--pel-picto-projet) center / contain no-repeat;
	}

	.pel-header__libelle {
		position: absolute;
		width: var(--pel-filet);
		height: var(--pel-filet);
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pel-header__pastille {
		position: absolute;
		top: calc(var(--pel-space-2xs) * -1);
		right: calc(var(--pel-space-2xs) * -1);
		box-sizing: border-box;
		min-width: calc(var(--pel-space-m) - var(--pel-space-3xs));
		padding-inline: var(--pel-space-3xs);
		border: var(--pel-filet) solid var(--pel-terre-cuite);
		background: var(--pel-blanc);
		color: var(--pel-terre-foncee);
		font-size: var(--pel-fs-small);
		font-weight: 700;
		line-height: calc(var(--pel-space-m) - var(--pel-space-3xs) - 2 * var(--pel-filet));
		text-align: center;
	}

	/* Menu fermé : les deux navigations sont masquées. Ouvert : elles passent
	   en panneau pleine largeur sous la barre, une ligne de 44 px par lien. */
	.pel-nav {
		display: none;
	}

	.pel-header.is-open .pel-nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		flex-basis: 100%;
		order: 10;
	}

	.pel-header.is-open .pel-nav--secondary {
		padding-bottom: var(--pel-space-s);
		border-top: var(--pel-filet) solid var(--pel-lin);
	}

	/* Une ligne de 44 px exactement : la bordure basse du soulignement
	   desktop n'a pas cours dans le panneau. */
	.pel-header.is-open .pel-nav__item,
	.pel-header.is-open .pel-nav__item--secondaire {
		min-height: var(--pel-cible);
		padding-inline: 0;
		border-bottom: 0;
		white-space: normal;
	}

	/* Dans le panneau, le trait passe à gauche : sous un lien pleine largeur,
	   il soulignerait tout l'écran. */
	.pel-header.is-open .pel-nav__item.is-current {
		border-left: var(--pel-trait) solid var(--pel-terre-cuite);
		padding-inline-start: var(--pel-space-xs);
	}
}