/*
 * En-tête du site — le menu replié, sur mobile et tablette.
 *
 * L'habillage du panneau plein écran vient du CSS du Customizer (grands liens
 * crème alignés à droite, icônes des réseaux en bas) ; il ne s'applique qu'une
 * fois la classe hfe-dropdown posée sur le menu, ce que fait désormais
 * js/vodun-frontend.js. Cette feuille corrige ce que le Customizer laisse de
 * travers : la hauteur sur mobile, le défilement, les réseaux restés masqués.
 *
 * Elle est chargée avec l'en-tête sur toutes les pages, mais avant le CSS du
 * Customizer : l'identifiant #masthead lui donne le poids nécessaire.
 *
 * Elle porte aussi le bouton « Réservation ». Son dessin — pastille verte,
 * flèche, icône seule sous le bureau — ne tenait qu'au CSS du Customizer, qui
 * vit en base : il ne suit pas un déploiement du thème, et presque toutes ses
 * règles passent par un sélecteur enfant, celui-là même qu'un enregistrement
 * filtré a déjà cassé une fois (« > » devenu « > »). Les règles sont
 * recopiées ici à l'identique, !important compris, sous #masthead : elles
 * l'emportent sur celles du Customizer, qui peut les garder, les perdre ou en
 * dire d'autres sans que le bouton change.
 */

/* -------------------------------------------------------------------------
   Le bouton « Réservation »
   ---------------------------------------------------------------------- */

#masthead .menu-reservation li {
	display: flex;
	height: 45px;
}

#masthead .menu-reservation ul.hfe-nav-menu > li {
	padding: 0 20px;
	border: 3px solid transparent;
	border-radius: 8px;
	background: #22A892 !important;
}

#masthead .menu-reservation ul.hfe-nav-menu > li:hover {
	border: 3px solid #000000;
}

#masthead .menu-reservation ul.hfe-nav-menu > li a {
	padding-top: 2px !important;
	padding-right: 30px !important;
	background: url(/wp-content/uploads/2024/10/fleche-noir.png) no-repeat center right;
	color: #000000 !important;
}

#masthead .menu-reservation ul.hfe-nav-menu > li a::after {
	display: none !important;
}

/* L'entrée que le Customizer masquait déjà dans ce menu. */
#masthead .menu-reservation li.reservation {
	display: none !important;
}

/* Sous le bureau, le bouton se réduit à son icône. */
@media (max-width: 1024px) {
	#masthead .menu-reservation ul.hfe-nav-menu > li {
		width: 58px;
		height: 54px;
		padding: 0;
	}

	#masthead .menu-reservation ul.hfe-nav-menu > li a {
		display: block;
		width: 100%;
		height: 100%;
		padding: 0 !important;
		background: url(/wp-content/uploads/2024/11/icon-reservation.svg) no-repeat center;
		text-indent: -9999px;
	}
}

@media (max-width: 1025px) {
	#masthead .menu-reservation {
		order: 3;
	}
}

/* -------------------------------------------------------------------------
   Le menu replié
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Le noir de la charte plutôt que le noir pur, et la hauteur de l'écran
	   réellement visible : 100vh compte, sur mobile, la barre d'adresse
	   escamotable, et le bas du panneau passait dessous. Un panneau plus long
	   que l'écran — sous-menus ouverts, téléphone à l'horizontale — défile. */
	#masthead nav.hfe-dropdown {
		height: 100vh !important;
		height: 100dvh !important;
		background-color: #1D1E22 !important;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Les entrées portaient le noir pur du panneau d'origine : sur le noir de
	   la charte, elles dessinaient des bandes. Elles prennent le fond du
	   panneau. */
	#masthead nav.hfe-dropdown .menu-item,
	#masthead nav.hfe-dropdown .sub-menu,
	#masthead nav.hfe-dropdown a.hfe-menu-item,
	#masthead nav.hfe-dropdown a.hfe-sub-menu-item {
		background-color: transparent !important;
	}

	/* Les réseaux sociaux, prévus en bas du panneau et habillés pour lui par
	   le Customizer, y restaient masqués par sa règle générale. */
	#masthead nav.hfe-dropdown #menu-social {
		display: block;
	}

	/* Panneau ouvert, la page ne défile plus dessous. */
	html.vodun-menu-open,
	html.vodun-menu-open body {
		overflow: hidden;
	}
}