@import url("variables.css");

/*
 * En-tête : position sticky.
 *
 * WordPress enveloppe chaque template part dans un élément
 * `<header class="wp-block-template-part">` qui n'a pas de hauteur
 * propre (il colle à son contenu). Rendre CE bandeau lui-même sticky
 * (plutôt qu'un groupe imbriqué à l'intérieur) est nécessaire pour que
 * le collage reste actif tout au long du défilement de la page : le
 * bloc de positionnement "sticky" natif de l'éditeur ne peut cibler
 * qu'un bloc interne, dont le parent immédiat (ce wrapper) est trop
 * court pour que l'effet fonctionne sur toute la page.
 */
.wp-block-template-part:has(header.menu) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.menu{
	max-height: 104px;
}
.menu > div{
	position: relative;
	padding-left: 170px;
	justify-content: flex-end;
}
.menu .custom-logo{
	position: absolute;
	top: 30%;
	left: 0;
}
.menu a:not(.wp-element-button){
	font-family: var(--wp--preset--font-family--sofia-rough);
	font-size: var(--wp--preset--font-size--medium);
}
.menu ul li.wp-block-navigation-link{
	padding-top: 4px;
}
.menu a.wp-element-button{
	padding: 16px 24px 12px 24px;
}

/*
 * Bouton "Contactez-nous" dupliqué à l'intérieur du bloc Navigation :
 * il ne sert que dans le panneau plein écran mobile, donc masqué sur
 * desktop où le bouton d'origine (hors navigation) reste visible.
 */
.menu .site-header-cta--mobile {
	display: none;
}

/*
 * Logo mobile : le logo compact "logo-footer.svg" remplace le logo
 * principal sur petits écrans ; sur desktop il reste masqué.
 */
.menu .site-header-logo-mobile{
	display: none;
	margin: 0;
	width: 90px;
}
.menu .site-header-logo-mobile img{
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Menu mobile (< 1000px) : le bloc Navigation natif de WordPress bascule
 * déjà en menu "burger + panneau plein écran" en dessous de 600px. On
 * décale ce point de bascule à 1000px pour coller à la maquette, et on
 * habille le bouton et le panneau avec les visuels du thème.
 */
@media (max-width: 999px) {
	.menu .site-header-logo-desktop {
		display: none;
	}
	.menu .site-header-logo-mobile {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100002;
	}
	.site-header-row:has(.wp-block-navigation__responsive-container-open),
	.site-header-row:has(.wp-block-navigation__responsive-container-close){
		width: 100%;
	}
	.menu nav:has(.wp-block-navigation__responsive-container-open),
	.menu nav:has(.wp-block-navigation__responsive-container-close){
		width: 100%;
		justify-content: flex-end;
	}
	.wp-block-navigation__responsive-container-open::before{
		content: "MENU";
		line-height: 26px;
		font-family: var(--wp--preset--font-family--sofia-rough);
		font-size: var(--wp--preset--font-size--medium);
		position: relative;
		z-index: 100002;
	}
	.menu > div {
		padding-left: 0;
		justify-content: space-between;
		align-items: center;
	}
	.menu .site-header-cta:not(.site-header-cta--mobile) {
		display: none;
	}
	.menu .site-header-cta--mobile {
		display: flex;
		margin-top: var(--wp--preset--spacing--xl);
	}
}

/* Entre 600px et 999px, WordPress considère par défaut que le menu
   tient sur une ligne : on annule ce comportement pour conserver le
   panneau replié jusqu'à notre propre seuil de 1000px. */
@media (min-width: 600px) and (max-width: 999px) {
	.menu .wp-block-navigation__responsive-container-open:not(.always-shown),
	.menu .wp-block-navigation__responsive-container-close:not(.always-shown) {
		display: flex;
	}
	.menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
		width: auto;
	}
}

/* Bouton d'ouverture/fermeture : icônes du thème à la place des icônes
   par défaut du bloc Navigation. */
.menu .wp-block-navigation__responsive-container-open,
.menu .wp-block-navigation__responsive-container-close {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.menu .wp-block-navigation__responsive-container-open svg,
.menu .wp-block-navigation__responsive-container-close svg {
	display: none;
}
.menu .wp-block-navigation__responsive-container-open {
	width: 100px;
	height: 20px;
	background-image: url("../images/icon-menu.svg");
	background-position: center right;
	background-repeat: no-repeat;
}
.menu .wp-block-navigation__responsive-container-close {
	width: 100px;
	height: 26px;
	background-image: url("../images/icon-close.svg");
	background-position: center right;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	z-index: 100003;
	align-self: flex-end;
}

/* Panneau ouvert : plein écran, fond "papier" de la charte, liens
   centrés occupant toute la fenêtre. */
.menu .wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box;
	width: 100%;
	height: 100dvh;
	background-color: var(--wp--preset--color--blanc);
	background-image: url("../images/Paper-Background.png");
	background-size: contain;
}
.menu .wp-block-navigation__responsive-container.is-menu-open::before{
	content: "";
	display: block;
	background-color: var(--wp--preset--color--blanc);
	width: 100%;
	height: 60px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100001;
}
/* La pile de conteneurs internes du panneau (fermeture > dialogue >
   contenu) n'a pas de hauteur propre par défaut : on la fait grandir
   pour pouvoir centrer les liens verticalement. */
.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	justify-content: center;
}