/* ============================================================
   Header — bandeau foncé et fin, puis barre de marque claire et haute,
   sticky, avec coulée de miel en bord bas et panneau off-canvas mobile.
   Équivalent codé du module GP Premium « Menu Plus » (ADR-001).
   ============================================================ */

/* --- Bandeau d'information -------------------------------------
 *
 * Photo de la récolte (mains d'élèves sur un cadre de miel) sous un aplat brun
 * très dense : à cette hauteur la photo ne se « lit » pas, elle donne une
 * matière. C'est le footer qui porte l'image explicite.
 *
 * WebP sans repli : tous les navigateurs le gèrent depuis 2020 (Safari 14).
 * Les JPEG d'origine restent dans assets/img/ comme sources — c'est le principe
 * du script scripts/optimiser_images.py.
 * ---------------------------------------------------------------- */

/* --- Deux zones franchement distinctes ------------------------------
 *
 * Bandeau foncé et fin, barre de marque claire et haute. La texture continue
 * entre les deux a été abandonnée : elle ne servait qu'à masquer une jointure
 * entre deux bandes de MÊME valeur. Deux valeurs opposées se lisent comme deux
 * zones voulues — il n'y a plus de raccord à cacher.
 *
 * Conséquence directe : le logo redevient BRUN sur fond clair. En doré sur la
 * barre sombre, il disparaissait — c'est ce que la capture montrait.
 * -------------------------------------------------------------------- */

.bepc-topbar {
	position: relative;
	background-color: var(--bepc-chrome-dark);
	background-image:
		linear-gradient(rgba(35, 21, 11, 0.90), rgba(35, 21, 11, 0.90)),
		url("../img/recolte-miel.webp");
	background-size: auto, cover;
	background-position: center, center 40%;
	color: #F4E9D8;
	font-size: 0.92rem;
	letter-spacing: 0.01em;
}

.bepc-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bepc-s-6);
	min-height: var(--bepc-topbar-h);
	padding-block: var(--bepc-s-2);
}

.bepc-topbar__item {
	margin: 0;
	max-width: none;
}

.bepc-topbar__item:first-child {
	display: inline-flex;
	align-items: center;
	gap: var(--bepc-s-3);
	color: var(--bepc-miel-clair);
	font-weight: 500;
}

.bepc-topbar__icon {
	flex-shrink: 0;
	color: var(--bepc-miel);
}

.bepc-topbar__item + .bepc-topbar__item {
	color: #E0D0B6;
}

/* --- Barre de marque ------------------------------------------- */

.bepc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bepc-creme);
	transition: box-shadow var(--bepc-d-base) ease;
}

/* Coulée de miel en bord bas, à la place du filet de 1 px.
 *
 * C'est ce qui empêche le header de faire « bandeau d'administration » : un
 * trait droit dit le gabarit, une coulée dit le produit. Elle déborde sur le
 * contenu (bottom négatif) — d'où l'`overflow: visible` implicite et le
 * z-index du header, qui la font passer par-dessus la section suivante. */
.bepc-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -19px;
	height: 20px;
	background-image: url("../svg/coulee-miel.svg");
	background-repeat: repeat-x;
	background-size: 240px 20px;
	pointer-events: none;
}

/* Ombre portée seulement une fois la page défilée — posée par header.js. */
.bepc-header.is-scrolled {
	box-shadow: var(--bepc-shadow-card);
}

.bepc-header__inner {
	min-height: var(--bepc-header-h);
	display: flex;
	align-items: center;
	gap: var(--bepc-s-6);
}

.bepc-header__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

/* Variante DÉTOURÉE, aux couleurs d'origine : la barre est claire. La variante
   dorée reste pour le pied de page, qui est sombre.

   Le SVG est carré et la marque n'occupe qu'environ 80 % du carré. On le monte
   en taille et on ne rattrape le débord qu'EN HAUT : la marge basse reste
   positive, pour laisser de l'air entre le logo et la coulée de miel. */
/* Sélecteur à DEUX classes, volontairement : WooCommerce livre
   `.woocommerce img, .woocommerce-page img { height: auto }` (spécificité
   0,1,1), qui battait une classe seule. Le logo disparaissait donc de la
   boutique — et de nulle part ailleurs. Le SVG porte désormais aussi ses
   width/height, sans quoi `height: auto` le réduit à néant faute de taille
   intrinsèque. Les deux corrections sont nécessaires. */
.bepc-header .bepc-header__logo {
	display: block;
	height: 86px;
	width: auto;
	margin-block: 0;
}

.bepc-header__brand-name {
	font-family: var(--bepc-font-title);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--bepc-logo-brun);
}

/* --- Navigation ------------------------------------------------ */

.bepc-header__nav {
	margin-inline-end: auto;
}

.bepc-menu {
	display: flex;
	align-items: center;
	gap: var(--bepc-s-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bepc-menu a {
	display: inline-block;
	padding-block: var(--bepc-s-2);
	color: var(--bepc-encre);
	font-weight: 550;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--bepc-d-fast) ease, border-color var(--bepc-d-fast) ease;
}

.bepc-menu a:hover,
.bepc-menu .current-menu-item > a {
	color: var(--bepc-caramel);
	border-bottom-color: var(--bepc-miel);
}

/* --- Actions : CTA boutique + panier + burger ------------------- */

.bepc-header__actions {
	display: flex;
	align-items: center;
	gap: var(--bepc-s-3);
	flex-shrink: 0;
}

.bepc-header__shop-cta {
	padding-block: var(--bepc-s-2);
	font-size: 0.95rem;
}

.bepc-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--bepc-radius-pill);
	background: transparent;
	color: var(--bepc-caramel);
	box-shadow: inset 0 0 0 1px var(--bepc-border-strong);
	text-decoration: none;
	transition: background var(--bepc-d-fast) ease, color var(--bepc-d-fast) ease;
}

.bepc-header__cart:hover {
	background: var(--bepc-miel-pale);
	color: var(--bepc-caramel);
}

.bepc-header__cart-count {
	position: absolute;
	top: -2px;
	inset-inline-end: -2px;
	display: inline-grid;
	place-items: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding-inline: 0.3rem;
	border-radius: var(--bepc-radius-pill);
	background: var(--bepc-terre);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bepc-header__cart-count--empty {
	display: none;
}

/* --- Burger et panneau off-canvas ------------------------------ */

.bepc-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: var(--bepc-radius-pill);
	background: var(--bepc-miel-pale);
	cursor: pointer;
}

.bepc-header__burger-bar {
	display: block;
	width: 22px;
	height: 2px;
	margin-inline: auto;
	background: var(--bepc-encre);
	transition: transform var(--bepc-d-base) ease, opacity var(--bepc-d-fast) ease;
}

.bepc-header__burger[aria-expanded="true"] .bepc-header__burger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.bepc-header__burger[aria-expanded="true"] .bepc-header__burger-bar:nth-child(2) {
	opacity: 0;
}

.bepc-header__burger[aria-expanded="true"] .bepc-header__burger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.bepc-header__panel {
	border-top: 1px solid var(--bepc-border);
	background: var(--bepc-creme);
	padding-block: var(--bepc-s-3);
}

.bepc-menu--panel {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.bepc-menu--panel li + li {
	border-top: 1px solid var(--bepc-border);
}

.bepc-menu--panel a {
	display: block;
	padding-block: var(--bepc-s-4);
	border-bottom: 0;
	font-size: 1.05rem;
}

/* --- Bascule mobile --------------------------------------------
 * 960px et non 768px : sur epsltdc, 768 laissait le menu desktop s'écraser
 * en paysage sur iPhone. Leçon reprise telle quelle.
 * ---------------------------------------------------------------- */
@media (max-width: 960px) {
	/* Le calage de la texture suit les hauteurs mobiles, sinon le raccord
	   entre les deux bandes se décale. */
	.bepc-header__inner {
		min-height: var(--bepc-header-h-mob);
		gap: var(--bepc-s-3);
	}

	.bepc-header__brand {
		margin-inline-end: auto;
	}

	.bepc-header .bepc-header__logo {
		height: 64px;
	}

	.bepc-header__nav,
	.bepc-header__shop-cta {
		display: none;
	}

	.bepc-header__burger {
		display: flex;
	}

	.bepc-topbar__item--hide-sm {
		display: none;
	}

	.bepc-topbar__inner {
		justify-content: center;
		text-align: center;
		min-height: var(--bepc-topbar-h-mob);
	}

	.bepc-topbar__item:first-child {
		font-size: 0.98rem;
	}
}

@media (min-width: 961px) {
	.bepc-header__panel {
		display: none;
	}
}