/**
 * En-tête.
 *
 * Deux variantes : posé sur fond crème, ou en surimpression sur la photo
 * d'ouverture de l'accueil. La seconde sort du flux — c'est au bandeau
 * d'ouverture de réserver la hauteur, ce qu'il fait déjà.
 */

.pd-entete--surimpression {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 20;
}

.pd-entete--surimpression,
.pd-entete--surimpression a,
.pd-entete--surimpression .wp-block-navigation {
	color: var( --wp--preset--color--blanc );
}

/* -------------------------------------------------------------------
 * Logo
 *
 * Une image du thème plutôt que le bloc « Logo du site » (voir patterns/logo.php).
 * La taille se règle ici, pas dans le bloc : une largeur en ligne ne se laisserait
 * pas réduire sur mobile.
 * ------------------------------------------------------------------- */

.pd-entete .pd-logo {
	margin: 0;
}

.pd-entete .pd-logo img {
	width: 92px;
}

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

/* La maquette sépare les entrées par une barre verticale. */
.pd-nav .wp-block-navigation__container > .wp-block-navigation-item:not( :last-child )::after {
	content: "|";
	margin-inline-start: 0.85em;
	opacity: 0.55;
	pointer-events: none;
}

.pd-nav .wp-block-navigation__container {
	gap: 0.85em;
}

/*
 * Le bouton burger, plus longtemps.
 *
 * Le bloc Navigation bascule en menu déroulant à 600 px, ce qui est bien trop
 * bas ici : entre le logo, quatre entrées dont une très longue, le panier, le
 * bouton et le compte, l'en-tête se disloque bien avant. On repousse la
 * bascule au-delà de l'iPad en paysage.
 */
@media ( max-width: 1080px ) {
	.pd-nav .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}

	.pd-nav .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none;
	}

	.pd-nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

/* -------------------------------------------------------------------
 * En-tête mobile
 *
 * Sur un écran étroit, le burger passe à droite — c'est là que va le pouce — et
 * l'accès au compte se replie dans le menu, où il ne dispute plus la place au
 * logo et au bouton d'abonnement.
 *
 * `display: contents` dissout les deux groupes intermédiaires : leurs enfants
 * deviennent les éléments de la barre, et on peut alors les ordonner librement
 * sans dupliquer le balisage.
 * ------------------------------------------------------------------- */

@media ( max-width: 781px ) {
	.pd-entete > .wp-block-group > .wp-block-group {
		display: contents;
	}

	.pd-entete .pd-logo {
		order: 1;
	}

	.pd-entete .wc-block-mini-cart {
		order: 2;
		/* Absorbe l'espace libre : le logo reste seul à gauche. */
		margin-inline-start: auto;
	}

	.pd-entete .wp-block-buttons {
		order: 3;
	}

	.pd-entete .pd-nav {
		order: 4;
	}

	/* Le compte vit désormais dans le menu déroulant. */
	.pd-entete .wp-block-woocommerce-customer-account {
		display: none;
	}
}

/* Au-delà, l'icône suffit : l'entrée de menu ferait doublon. */
@media ( min-width: 782px ) {
	.pd-nav .pd-nav-compte {
		display: none;
	}
	.pd-nav .wp-block-navigation-item:has(+.pd-nav-compte):after {
		content: none!important;
	}
}

/* Aux tailles les plus étroites, on resserre pour tout faire tenir. */
@media ( max-width: 600px ) {
	.pd-entete .pd-logo img {
		width: 64px;
	}

	.pd-entete .wp-block-button.is-style-contour > .wp-block-button__link {
		padding: 0.5rem 0.9rem;
		font-size: 0.9rem;
		/* Sur 390 px, « S abonner » passait sur deux lignes. */
		white-space: nowrap;
	}

	/*
	 * Le gap doit être porté par la barre elle-même : les deux groupes
	 * intermédiaires sont en `display: contents`, ils ne mettent plus rien en
	 * page.
	 */
	.pd-entete > .wp-block-group {
		gap: 0.5rem;
	}
}

/*
 * Le menu déroulant reprend le fond crème, jamais la transparence — et les
 * asperges du pied de page, qui lui donnent le même relief qu'ailleurs sur le
 * site plutôt qu'un aplat nu.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--creme ) !important;
	background-image: var( --pd-deco-asperges );
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: auto min( 55vh, 420px );
	color: var( --wp--preset--color--texte ) !important;
	padding-top: clamp( 4rem, 10vw, 6rem );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	/* Le décor passe derrière les entrées, jamais devant. */
	position: relative;
	z-index: 1;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-size: var( --wp--preset--font-size--large );
}

/*
 * Les barres verticales séparent des entrées sur une ligne ; empilées dans le
 * menu déroulant elles n'ont plus de sens. Le sélecteur reprend la structure
 * complète de la règle qui les pose, sans quoi il perdrait en spécificité.
 */
.pd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not( :last-child )::after {
	content: none;
}

/* -------------------------------------------------------------------
 * Panier
 * ------------------------------------------------------------------- */

/*
 * Le mini-panier de WooCommerce arrive avec ses propres couleurs ; on le
 * ramène à la couleur courante pour qu'il suive la variante d'en-tête.
 */
.pd-entete .wc-block-mini-cart__button {
	padding: 0.5rem;
	border-radius: 999px;
	color: inherit;
	transition: background-color 0.18s ease;
}

.pd-entete .wc-block-mini-cart__button:hover,
.pd-entete .wc-block-mini-cart__button:focus-visible {
	background-color: rgba( 21, 83, 50, 0.1 );
}

.pd-entete--surimpression .wc-block-mini-cart__button:hover,
.pd-entete--surimpression .wc-block-mini-cart__button:focus-visible {
	background-color: rgba( 255, 255, 255, 0.18 );
}

.pd-entete .wc-block-mini-cart__badge {
	background: var( --wp--preset--color--jaune );
	color: var( --wp--preset--color--texte );
	font-weight: 700;
}