/* ============================================================================
   roannay.be — En-tête mobile
   Lot 1 : suppression de la loupe, bande « Réserver + langues » sous
   l'en-tête, nettoyage des doublons dans le panneau burger.

   Le seuil mobile du thème est à 1440px (Theme Options → Header → Header
   Mobile). Il est repris tel quel ci-dessous. Si tu le modifies dans
   l'administration, modifie-le aux deux endroits de ce fichier — ils sont
   signalés par « SEUIL MOBILE ».
   ========================================================================= */

:root {
	--pc-or: #C7B474;
	--pc-or-hover: #cbbc9d;
	--pc-noir: #232323;
}

/* SEUIL MOBILE */
@media only screen and (max-width: 1440px) {

	/* -----------------------------------------------------------------------
	   1. La loupe disparaît
	   Sa place à droite de l'en-tête est reprise par rien : le logo reste
	   centré, le burger à gauche. Le sélecteur de langue passe dans la bande,
	   comme demandé, et non à la place de la loupe — sinon il se retrouve
	   à 20px du bord et devient difficile à viser au pouce.
	   -------------------------------------------------------------------- */

	.wgl-theme-header .wgl-mobile-header .header_search {
		display: none !important; /* le thème le pose en inline-block via un style calculé */
	}

	/* -----------------------------------------------------------------------
	   2. La bande Réserver + langues
	   -------------------------------------------------------------------- */

	.pc-mobile-bar {
		display: flex;
		align-items: stretch;
		background-color: var(--pc-noir);
		border-top: 1px solid rgba(255, 255, 255, .12);
	}

	.pc-mobile-bar_item {
		position: relative;
	}

	.pc-mobile-bar_reserver {
		flex: 1 1 auto;
		min-width: 0; /* sans cela le bouton refuse de rétrécir sous 360px */
	}

	.pc-mobile-bar_lang {
		flex: 0 0 auto;
		border-left: 1px solid rgba(35, 35, 35, .25);
	}

	.pc-mobile-bar button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		height: 52px;
		margin: 0;
		padding: 0 18px;
		border: 0;
		border-radius: 0;
		background-color: var(--pc-or);
		color: var(--pc-noir);
		font-family: Raleway, sans-serif;
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 1px;
		line-height: 1;
		cursor: pointer;
		transition: background-color .25s ease;
	}

	.pc-mobile-bar button:hover,
	.pc-mobile-bar .is-open > button {
		background-color: var(--pc-or-hover);
	}

	/* Le chevron : tourné vers le bas, retourné à l'ouverture. */
	.pc-mobile-bar button::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform .25s ease;
	}

	.pc-mobile-bar .is-open > button::after {
		transform: translateY(1px) rotate(-135deg);
	}

	.pc-lang-toggle img {
		width: 16px;
		height: 11px;
		display: block;
	}

	.pc-lang-code {
		font-weight: 700;
	}

	/* --- Les deux déroulants --- */

	.pc-reserver-menu,
	.pc-lang-menu {
		display: none;
		position: absolute;
		z-index: 60;
		top: 100%;
		margin: 0;
		padding: 6px 0;
		list-style: none;
		background-color: var(--pc-noir);
		border-top: 2px solid var(--pc-or);
		box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
	}

	.pc-reserver-menu {
		left: 0;
		right: 0;
	}

	/* Ancré à droite : à 375px, un déroulant de langues aligné à gauche de son
	   bouton sortirait de l'écran. */
	.pc-lang-menu {
		right: 0;
		min-width: 190px;
	}

	.pc-mobile-bar .is-open .pc-reserver-menu,
	.pc-mobile-bar .is-open .pc-lang-menu {
		display: block;
	}

	.pc-reserver-menu li,
	.pc-lang-menu li {
		margin: 0;
		padding: 0;
		line-height: normal;
	}

	.pc-reserver-menu li::before,
	.pc-lang-menu li::before {
		display: none; /* le thème pose une puce sur tous les li (« ul li:before ») */
	}

	.pc-reserver-menu a,
	.pc-lang-menu a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 13px 20px;
		color: #fff;
		font-family: Raleway, sans-serif;
		font-size: 14px;
		letter-spacing: .3px;
		text-decoration: none;
		transition: color .2s ease, background-color .2s ease;
	}

	.pc-reserver-menu a:hover,
	.pc-lang-menu a:hover {
		color: var(--pc-or);
		background-color: rgba(255, 255, 255, .04);
	}

	.pc-lang-menu img {
		width: 16px;
		height: 11px;
		flex: 0 0 auto;
	}

	/* -----------------------------------------------------------------------
	   3. Nettoyage du panneau burger quand la bande est en place
	   Gardé sous la classe body.pc-mobile-bar-on : tant que l'entrée
	   « Réserver » n'existe pas, le JS n'ajoute pas cette classe et le panneau
	   reste exactement comme aujourd'hui.
	   -------------------------------------------------------------------- */

	/* « Réserver » est maintenant dans la bande : inutile de le répéter. */
	.pc-mobile-bar-on .mobile_nav_wrapper .primary-nav > ul > li.bt-reserver {
		display: none !important;
	}

	/* Les trois anciens boutons dorés (« Réservation hôtel », « Réservation
	   Restaurant gastronomique », « Réservation Lounge Brasserie ») font
	   doublon avec le déroulant de la bande.
	   À TERME : les supprimer dans Apparence → Menus plutôt que les masquer.
	   Retirer ce bloc pour les revoir. */
	.pc-mobile-bar-on .mobile_nav_wrapper .primary-nav > ul > li.bt-menu-mobile {
		display: none !important;
	}

	/* Les drapeaux à plat en bas du panneau font eux aussi doublon.
	   Le personnalisateur les affiche avec !important, d'où le !important ici. */
	.pc-mobile-bar-on .mobile_nav_wrapper li.lang-item {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
   4. La bande n'existe qu'en mobile
   Si tu construis la bande dans Theme Options → Header Mobile plutôt qu'avec
   menu-mobile.js, supprime le JS : cette règle continue de garantir qu'elle
   ne déborde pas en desktop.
   SEUIL MOBILE
   ------------------------------------------------------------------------ */

@media only screen and (min-width: 1441px) {
	.pc-mobile-bar {
		display: none !important;
	}
}