/*
 * Menu mobile Mairesia, sur le modèle de PLG Toiture (2026-09-28).
 * Balisage : inc/menu-mobile.php. Script : assets/menu-mobile-5.js.
 */
.mp-bandeau, .mp-mobcall, .mp-burger, .mp-mob { display: none; }

@media (max-width: 900px) {
	/* En-tête collé en haut, blanc et fin, logo dans ses couleurs, sur toutes les pages */
	header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
	html body .site-header { position: relative !important; background: #FFFFFF !important; border-bottom: 1px solid #EFE8DF !important; padding: 8px 16px !important; box-shadow: none !important; }
	html body .site-header .wp-block-site-logo img, html body .site-header .custom-logo { filter: none !important; height: 44px !important; width: auto !important; max-width: none !important; }
	body .site-header .wp-block-navigation, body .site-header .wp-block-buttons { display: none !important; }
	body .site-header .wp-block-group { gap: 8px !important; align-items: center !important; }
	body .site-header .mp-langues { gap: 4px; margin-right: 2px; }
	body .site-header .mp-drapeau { width: 22px; height: 22px; }
	/* les bannières photo n'ont plus à laisser de place à un en-tête flottant */
	.entry-content > .wp-block-cover.alignfull:first-child { padding-top: 4rem !important; }

	.mp-mobcall { order: 8; display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #F3E2D6; color: #A85A45 !important; }
	.mp-mobcall svg { width: 18px; height: 18px; }
	.mp-mobcall:focus-visible { outline: 2px solid #C1705A; outline-offset: 2px; }

	.mp-burger { order: 9; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #2C2A26; cursor: pointer; }
	.mp-burger span { display: block; width: 16px; height: 1.8px; border-radius: 2px; background: #FAF8F4; transition: transform .25s ease, opacity .25s ease; }
	.mp-mob-ouvert .mp-burger span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
	.mp-mob-ouvert .mp-burger span:nth-child(2) { opacity: 0; }
	.mp-mob-ouvert .mp-burger span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }
	.mp-burger:focus-visible { outline: 2px solid #C1705A; outline-offset: 2px; }

	/* Bandeau clair : nom et ville, téléphone, adresse (les trois restent visibles) */
	.mp-bandeau { display: block; background: #F3E2D6; color: #2C2A26; }
	.mp-bandeau-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 7px 16px; font-family: 'Jost', sans-serif; font-size: 12.5px; line-height: 1.35; }
	.mp-bandeau-nom { font-weight: 600; letter-spacing: .02em; }
	.mp-bandeau-tel { justify-self: end; color: #A85A45 !important; font-weight: 600; text-decoration: none; white-space: nowrap; }
	.mp-bandeau-adr { grid-column: 1 / -1; font-size: 12px; color: #5F5B52; }

	/* Panneau sombre sous l'en-tête : il ne pousse pas la page */
	.mp-mob { position: fixed; left: 0; right: 0; top: var(--mp-mob-haut, 66px); z-index: 99; overflow-y: auto; overscroll-behavior: contain; background: #221F1B; border-top: 1px solid rgba(250, 248, 244, .08); }
	.mp-mob-ouvert .mp-mob { display: block; }

	.mp-mob-liste, .mp-mob-sous { list-style: none; margin: 0; padding: 0; }
	.mp-mob-liste > li { border-bottom: 1px solid rgba(250, 248, 244, .1); }
	.mp-mob-liste > li > a, .mp-mob-deplier {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		width: 100%; min-height: 54px; padding: 0 20px;
		background: transparent; border: 0; cursor: pointer; text-align: left; text-decoration: none;
		font-family: 'Jost', sans-serif; font-weight: 500; font-size: 15px;
		letter-spacing: .08em; text-transform: uppercase; color: #FAF8F4 !important;
	}
	.mp-mob-liste > li > a.actif { background: rgba(250, 248, 244, .08); }
	.mp-mob-liste > li > a:focus-visible, .mp-mob-deplier:focus-visible { outline: 3px solid #C1705A; outline-offset: -3px; }

	.mp-mob-plus { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(250, 248, 244, .16); transition: transform .2s ease, background-color .2s ease; }
	.mp-mob-plus::before, .mp-mob-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #FAF8F4; }
	.mp-mob-plus::after { transform: rotate(90deg); }
	.mp-mob-deplier[aria-expanded="true"] .mp-mob-plus { transform: rotate(45deg); background: #C1705A; }

	.mp-mob-sous { display: none; padding: 0 0 10px; background: rgba(0, 0, 0, .18); }
	.mp-mob-groupe.deplie > .mp-mob-sous { display: block; }
	.mp-mob-sous a {
		display: flex; align-items: center; min-height: 46px; padding: 0 20px 0 34px;
		font-family: 'Jost', sans-serif; font-weight: 400; font-size: 16.5px;
		color: #F3E2D6 !important; text-decoration: none;
	}
	.mp-mob-sous a.actif { color: #FFFFFF !important; background: rgba(250, 248, 244, .08); }

	.mp-mob-actions { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 24px; }
	.mp-mob-actions a {
		display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 999px;
		font-family: 'Jost', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: .03em; text-decoration: none;
	}
	.mp-mob-tel { background: #C1705A; color: #FAF8F4 !important; }
	.mp-mob-cadeau { background: #FAF8F4; color: #221F1B !important; }
}