/**
 * En-tête collant.
 *
 * Le balisage vient de parts/header.html et n'utilise que des blocs du cœur
 * (Groupe, Logo, Titre, Navigation, Boutons). Ce fichier habille ce balisage
 * pour retrouver le traitement de la maquette.
 */

/* --------------------------------------------------------------------------
   1. Barre
   -------------------------------------------------------------------------- */

.ipd-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	border-bottom: 1px solid var(--wp--custom--bordure--bleue);
}

/*
 * Le flou d'arrière-plan doit vivre sur un calque interne. Posé sur
 * l'en-tête lui-même, il en fait un bloc conteneur pour les éléments en
 * `position: fixed` : le menu superposé se retrouvait enfermé dans le
 * bandeau, haut de soixante-dix pixels, au lieu de couvrir l'écran.
 */
@supports (backdrop-filter: blur(12px)) {
	.ipd-entete {
		background: transparent;
	}

	.ipd-entete::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgba(255, 255, 255, 0.92);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		pointer-events: none;
	}
}

.ipd-entete__barre {
	gap: 28px;
}

/* --------------------------------------------------------------------------
   2. Identité
   -------------------------------------------------------------------------- */

.ipd-entete__marque {
	flex-shrink: 0;
	gap: 12px;
}

.ipd-entete__marque .wp-block-site-logo img {
	/* Le calage de 5 px doit rester à l'intérieur du carré de 42 px. */
	box-sizing: border-box;
	width: 42px;
	height: 42px;
	border-radius: var(--wp--custom--rayon--md);
	background: var(--wp--preset--color--contrast);
	padding: 5px;
	object-fit: contain;
}

.ipd-entete__titres {
	gap: 0;
	line-height: 1.1;
}

.ipd-entete__baseline {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	font-weight: 500;
	margin: 0;
}

/* --------------------------------------------------------------------------
   3. Navigation principale
   -------------------------------------------------------------------------- */

.ipd-entete .wp-block-navigation {
	margin-left: auto;
}

/*
 * La maquette dessine la pastille autour du libellé ET du chevron, séparés de
 * 7 px. WordPress place le chevron en frère du lien : c'est donc l'élément de
 * liste qui porte la pastille, et le lien ne garde que son texte. Sans cela le
 * chevron tombe hors de la pastille et décale chaque entrée de 16 px.
 */
.ipd-entete .wp-block-navigation__container > .wp-block-navigation-item {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 11px;
	border-radius: var(--wp--custom--rayon--pilule);
	transition: background-color 0.18s ease, color 0.18s ease;
}

.ipd-entete .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0;
	border-radius: 0;
	color: var(--wp--preset--color--texte-bleute);
	white-space: nowrap;
	transition: color 0.18s ease;
}

.ipd-entete .wp-block-navigation__container > .wp-block-navigation-item:hover,
.ipd-entete .wp-block-navigation__container > .wp-block-navigation-item:focus-within,
.ipd-entete .wp-block-navigation__container > .current-menu-item,
.ipd-entete .wp-block-navigation__container > .current-menu-ancestor {
	background: var(--wp--preset--color--azur);
}

.ipd-entete .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.ipd-entete .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.ipd-entete .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.ipd-entete .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-dark);
}

/* --------------------------------------------------------------------------
   4. Sous-menus
   -------------------------------------------------------------------------- */

.ipd-entete .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 268px;
	padding: 8px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--bleue);
	border-radius: var(--wp--custom--rayon--lg);
	box-shadow: var(--wp--preset--shadow--menu);
	gap: 2px;
}

.ipd-entete .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 12px;
	border-radius: var(--wp--custom--rayon--sm);
	white-space: normal;
}

/* Chevron : 9 px dans la maquette ; le calcul en em de WordPress donne 8. */
.ipd-entete .wp-block-navigation__submenu-icon {
	opacity: 0.6;
	padding: 0;
}

.ipd-entete .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
	width: 9px;
	height: 9px;
	margin: 0;
}

.ipd-entete .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon svg {
	width: 9px;
	height: 9px;
}

/* --------------------------------------------------------------------------
   5. Bouton d'appel
   -------------------------------------------------------------------------- */

.ipd-entete__appel {
	flex-shrink: 0;
}

/*
 * La maquette place la flèche dans un span à 15 px, le libellé restant à
 * 14 px : c'est ce qui donne au bouton ses 152 × 42 px. Purement décorative,
 * elle passe ici par un pseudo-élément plutôt que par le texte du bloc.
 */
.ipd-entete__appel:not(.ipd-entete__appel-mobile) .wp-block-button__link::before {
	content: "↗";
	font-size: 15px;
	line-height: normal;
}

.ipd-entete__appel .wp-block-button__link {
	padding: 11px 18px;
	border-radius: var(--wp--custom--rayon--pilule);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Variante ronde, visible seulement en version réduite. */
.ipd-entete .ipd-entete__appel-mobile {
	display: none;
}

/*
 * Le bouton rond affiche une icône, mais son libellé reste le numéro : le
 * texte est réduit à zéro plutôt que masqué, afin de rester annoncé par les
 * lecteurs d'écran. Un aria-label serait retiré par l'éditeur de blocs.
 */
/*
 * Le libellé du bouton reste le numéro, pour les lecteurs d'écran. Réduit à
 * zéro il garde pourtant une chasse résiduelle — quatorze caractères, quelques
 * pixels — et un centrage flex répartissait l'icône ET ce reliquat, ce qui
 * décalait l'icône de trois pixels et demi vers la gauche. Elle est donc
 * placée au centre géométrique, indépendamment du texte.
 */
.ipd-entete__appel-mobile .wp-block-button__link {
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: var(--wp--custom--rayon--pilule);
	background: var(--wp--preset--color--primary);
	display: block;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	word-spacing: 0;
}

/*
 * Le glyphe ☎ dépend de la police d'émojis du système : son centrage varie
 * d'un appareil à l'autre et il se décale visiblement sur téléphone. On
 * dessine donc l'icône du thème, dont la position ne dépend de rien.
 */
.ipd-entete__appel-mobile .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 19px;
	height: 19px;
	background: currentColor;
	-webkit-mask: var(--ipd-icone-telephone) center / contain no-repeat;
	mask: var(--ipd-icone-telephone) center / contain no-repeat;
}

.ipd-entete__appel-mobile .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-dark);
}

/* --------------------------------------------------------------------------
   6. Menu superposé (mobile)
   -------------------------------------------------------------------------- */

/*
 * Apparence seulement : la visibilité du bouton reste pilotée par le bloc
 * Navigation (et par la bascule de la section 7). Déclarer « display » ici
 * l'afficherait aussi en grand écran.
 */
.ipd-entete .wp-block-navigation__responsive-container-open,
.ipd-entete .wp-block-navigation__responsive-container-close {
	width: 42px;
	height: 42px;
	border-radius: var(--wp--custom--rayon--md);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	align-items: center;
	justify-content: center;
}

/*
 * Menu replié : la maquette ouvre un panneau sous le bandeau, limité à 70 %
 * de la hauteur d'écran et défilable — pas une surface plein écran. Le bloc
 * Navigation, lui, pose `position: fixed` : on le ramène sous l'en-tête.
 */
.ipd-entete .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	bottom: auto;
	width: auto;
	max-height: 70vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px 24px 20px;
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--custom--bordure--bleue);
	box-shadow: var(--wp--preset--shadow--menu);
	z-index: 60;
}

/*
 * Le menu de bureau est aligné à droite ; déplié, la liste doit repartir du
 * bord gauche et occuper toute la largeur.
 */
.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: stretch;
	justify-content: flex-start;
	text-align: left;
	gap: 0;
}

/* Les sous-menus ne flottent plus : ils s'inscrivent dans la liste. */
.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/*
 * Dans le panneau, une liste simple vaut mieux qu'une grille flexible : la
 * justification à droite du menu de bureau y repoussait chaque entrée et ses
 * sous-entrées contre le bord.
 */
.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: block;
	width: 100%;
}

.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: block;
	width: 100%;
	background: transparent;
}

.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	text-align: left;
}

/* L'entrée courante se signale par sa couleur, sans pavé de fond. */
.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
}

/* Le bouton de fermeture se cale en haut à droite du panneau. */
.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 12px;
	right: 24px;
}

.ipd-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 12px 4px;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	border-radius: 0;
	border-bottom: 1px solid #f1f5f9;
	width: 100%;
}

.ipd-entete .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 9px 4px 9px 18px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   7. Bascule desktop / mobile
   -------------------------------------------------------------------------- */

/*
 * La maquette bascule en version réduite à 1120 px, alors que le bloc
 * Navigation bascule à 600 px par défaut. On déplace donc le seuil des deux
 * côtés : on force l'affichage du menu horizontal jusqu'à 1120 px, puis on
 * rend la main au menu superposé en dessous.
 */
@media (min-width: 1121px) {
	.ipd-entete .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

@media (max-width: 1120px) {
	/*
	 * Le bloc Navigation est positionné pour ses menus déroulants de bureau,
	 * masqués ici : il servirait sinon de repère au panneau déplié, large de
	 * quarante-deux pixels.
	 */
	.ipd-entete .wp-block-navigation {
		position: static;
	}

	.ipd-entete .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.ipd-entete .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.ipd-entete .ipd-entete__appel:not(.ipd-entete__appel-mobile) {
		display: none;
	}

	/*
	 * La maquette place le bouton d'appel avant le bouton de menu, tous deux
	 * collés au bord droit. L'ordre du balisage sert le menu de bureau : on le
	 * réagence ici plutôt que de le changer à la source.
	 */
	.ipd-entete .ipd-entete__appel-mobile {
		display: flex;
		order: 1;
		margin-left: auto;
	}

	/* Le menu suit le bouton d'appel : la marge automatique du bureau
	   creuserait un vide entre les deux. */
	.ipd-entete .wp-block-navigation {
		order: 2;
		margin-left: 0;
	}

	/* La règle du bloc porte le même poids : on passe par deux classes. */
	.ipd-entete .ipd-entete__barre {
		gap: 8px;
	}
}

/*
 * Silhouette du combiné, reprise de assets/icons/telephone.svg. Elle sert de
 * masque : la couleur vient du bouton, la forme ne dépend d'aucune police.
 */
:root {
	--ipd-icone-telephone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' fill-rule='evenodd' d='M6.6 5.1h10.8c1.2 0 2.2.9 2.2 2v2.3c0 .6-.5 1-1.2 1h-1.6c-.7 0-1.2-.4-1.2-1V8.3H8.4v1.1c0 .6-.5 1-1.2 1H5.6c-.7 0-1.2-.4-1.2-1V7.1c0-1.1 1-2 2.2-2ZM7 11.3h10c1.3 0 2.4 1 2.4 2.3V19H4.6v-5.4c0-1.3 1.1-2.3 2.4-2.3ZM12 13.1a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4ZM12 14.6a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z'/></svg>");
}

/* La croix du menu déplié : le bloc Navigation la rend en « block ». */
.ipd-entete .wp-block-navigation__responsive-container-close {
	display: flex;
}

/*
 * Tenue de la marque sur petit écran.
 *
 * La barre ne s'enroule pas : logo, nom, numéro et bouton de menu se
 * partagent une seule ligne. Décompte à 400 px de large — 48 px de marges,
 * 42 px de logo, 120 px pour la pilule du téléphone, 40 px pour le menu et
 * les gouttières — il reste 124 px pour la marque, quand « IMMOBILIER PLAINE
 * DIJONNAISE » en réclame environ 234. La place suffit à partir de 560 px.
 *
 * En dessous, la baseline s'efface : le logo et le nom suffisent à
 * identifier le site, et la marque complète figure dans le pied de page.
 */

/* Sans cela, un enfant de boîte flexible refuse de se réduire sous la
   largeur de son contenu et pousse la barre hors de l'écran. */
.ipd-entete__titres {
	min-width: 0;
}

.ipd-entete__titres > * {
	min-width: 0;
	overflow-wrap: break-word;
}

@media (max-width: 559px) {
	.ipd-entete__baseline {
		display: none;
	}
}