/* =========================================================================
   Mairie de Saint-Nicolas-la-Chapelle — En-tête, menu latéral & barre mobile
   Accessible RGAA : focus visibles, contrastes, prefers-reduced-motion.
   ========================================================================= */

:root {
	--mn-navy: #1B3A4B;
	--mn-navy-d: #142C39;
	--mn-green: #1D6A45;
	--mn-amber: #D9A04E;
	--mn-amber-l: #E7B66B;
	--mn-cream: #F7F4EE;
	--mn-ink: #2C333A;
	--mn-sub: #5A6168;
	--mn-line: #E6E0D5;
	--mn-white: #ffffff;
	--mn-header-h: 84px;
	--mn-bottom-h: 64px;
	--mn-shadow: 0 6px 24px rgba(20, 44, 57, .10);
	--mn-radius: 14px;
}

/* Réserve la place de la barre de défilement pour éviter tout décalage
   de mise en page lors du verrouillage du défilement (ouverture du menu). */
html { scrollbar-gutter: stable; }

/* ---- Réinitialisations utiles ---- */
#mairie-header *,
.mn-drawer *,
.mn-bottomnav *,
.mn-search * {
	box-sizing: border-box;
}

/* =========================================================================
   1. Liens d'évitement (skip links)
   ========================================================================= */
.mn-skip {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 2000;
	transform: translateY(-150%);
	background: var(--mn-navy);
	color: #fff;
	padding: 10px 16px;
	border-radius: 8px;
	font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-decoration: none;
	box-shadow: var(--mn-shadow);
	transition: transform .15s ease;
}
.mn-skip:focus {
	transform: translateY(0);
	outline: 3px solid var(--mn-amber-l);
	outline-offset: 2px;
}

/* =========================================================================
   2. En-tête
   ========================================================================= */
.mn-header {
	background: var(--mn-white);
	border-bottom: 1px solid var(--mn-line);
	box-shadow: var(--mn-shadow);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.mn-header__inner {
	max-width: 1240px;
	margin: 0 auto;
	min-height: var(--mn-header-h);
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

/* ---- Marque (logo) ---- */
.mn-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--mn-navy);
	min-width: 0;
}
.mn-brand__logo {
	flex: 0 0 auto;
	display: block;
	width: auto;
	height: 56px;
	max-width: 100%;
}
.mn-brand__sub {
	font-size: 13px;
	font-weight: 600;
	color: var(--mn-sub);
	padding-left: 14px;
	border-left: 2px solid var(--mn-line);
	max-width: 180px;
	line-height: 1.25;
}

/* ---- Actions ---- */
.mn-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}
.mn-act {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mn-act svg { width: 18px; height: 18px; flex: 0 0 auto; }
.mn-act--phone {
	background: var(--mn-navy);
	color: #fff;
}
.mn-act--phone:hover,
.mn-act--phone:focus-visible { background: var(--mn-navy-d); }
.mn-act--mail {
	background: var(--mn-cream);
	color: var(--mn-navy);
	border-color: var(--mn-line);
}
.mn-act--mail:hover,
.mn-act--mail:focus-visible {
	background: #fff;
	border-color: var(--mn-amber);
}

/* ---- Bouton menu (burger) ---- */
.mn-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 11px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--mn-amber);
	color: var(--mn-navy-d);
	font: 800 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(217, 160, 78, .35);
	transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.mn-burger:hover,
.mn-burger:focus-visible {
	background: var(--mn-amber-l);
	box-shadow: 0 4px 12px rgba(217, 160, 78, .45);
}
.mn-burger:active { transform: translateY(1px); }
.mn-burger__icon {
	width: 20px;
	height: 20px;
	display: block;
	flex: 0 0 auto;
}

/* ---- Focus visibles (RGAA) ---- */
.mn-brand:focus-visible,
.mn-act:focus-visible,
.mn-burger:focus-visible,
.mn-bn:focus-visible,
.mn-link:focus-visible,
.mn-sub-toggle:focus-visible,
.mn-drawer__close:focus-visible,
.mn-drawer__foot a:focus-visible,
.mn-search__submit:focus-visible,
.mn-search__close:focus-visible,
.mn-search input:focus-visible {
	outline: 3px solid var(--mn-green);
	outline-offset: 2px;
	border-radius: 8px;
}

/* =========================================================================
   3. En-tête fixe (ordinateur ET mobile)
   ========================================================================= */
.mn-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}
body.mn-has-header { padding-top: var(--mn-header-h); }
html { scroll-padding-top: calc(var(--mn-header-h) + 16px); }

/* Décalage sous la barre d'administration WordPress */
.admin-bar .mn-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .mn-header { top: 46px; }
}
@media (max-width: 600px) {
	/* La barre d'admin n'est plus fixe : l'en-tête revient en haut. */
	.admin-bar .mn-header { top: 0; }
}

/* =========================================================================
   4. Menu latéral droit (drawer)
   ========================================================================= */
/* Conteneur fixe qui clippe le menu hors-écran (évite tout défilement
   horizontal sans toucher au reste de la page). */
.mn-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 1100;
	overflow: hidden;
	pointer-events: none;
}
.mn-offcanvas.is-open { pointer-events: auto; }

.mn-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 44, 57, .48);
	opacity: 0;
	transition: opacity .25s ease;
}
.mn-offcanvas.is-open .mn-overlay { opacity: 1; }

.mn-drawer {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(400px, 92vw);
	background: var(--mn-white);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	will-change: transform;
	transition: transform .32s cubic-bezier(.22, 1, .36, 1);
	box-shadow: -12px 0 36px rgba(20, 44, 57, .18);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mn-offcanvas.is-open .mn-drawer { transform: translateX(0); }

.mn-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	background: var(--mn-navy);
	color: #fff;
	flex: 0 0 auto;
}
.mn-drawer__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.mn-drawer__crest { width: 30px; height: 34px; display: block; }
.mn-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}
.mn-drawer__close:hover,
.mn-drawer__close:focus-visible { background: rgba(255, 255, 255, .28); }
.mn-drawer__close svg { width: 22px; height: 22px; }

.mn-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 0 16px;
}

/* ---- Liste du menu ---- */
.mn-menu { list-style: none; margin: 0; padding: 0; }
.mn-submenu { list-style: none; margin: 0; padding: 0; background: var(--mn-cream); }
.mn-item { border-bottom: 1px solid var(--mn-line); }
.mn-submenu .mn-item:last-child { border-bottom: 0; }

.mn-row {
	display: flex;
	align-items: stretch;
}
.mn-link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding: 15px 20px;
	color: var(--mn-navy);
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
	transition: background-color .12s ease, color .12s ease;
}
.mn-link:hover { background: var(--mn-cream); color: var(--mn-green); }
.mn-item.is-active > .mn-row > .mn-link { color: var(--mn-green); }
.mn-item.is-active > .mn-row > .mn-link::before {
	content: "";
	width: 4px;
	align-self: stretch;
	margin: -15px 14px -15px -20px;
	background: var(--mn-green);
	border-radius: 0 3px 3px 0;
}
.mn-submenu .mn-link {
	font-size: 15px;
	font-weight: 600;
	padding-left: 30px;
	color: var(--mn-ink);
}
.mn-submenu .mn-link:hover { color: var(--mn-green); }

/* ---- Bouton d'ouverture de sous-menu (injecté en JS) ---- */
.mn-sub-toggle {
	flex: 0 0 auto;
	width: 54px;
	border: 0;
	border-left: 1px solid var(--mn-line);
	background: transparent;
	color: var(--mn-navy);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mn-sub-toggle svg {
	width: 18px;
	height: 18px;
	transition: transform .2s ease;
}
.mn-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mn-sub-toggle:hover { background: var(--mn-cream); }

/* ---- Pied du drawer ---- */
.mn-drawer__foot {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	padding: 16px 20px;
	background: var(--mn-cream);
	border-top: 1px solid var(--mn-line);
}
.mn-drawer__foot a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mn-sub);
	text-decoration: none;
}
.mn-drawer__foot a:hover { color: var(--mn-green); text-decoration: underline; }

/* =========================================================================
   5. Barre de navigation mobile (toujours visible)
   ========================================================================= */
.mn-bottomnav {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: #fff;
	border-top: 1px solid var(--mn-line);
	box-shadow: 0 -4px 18px rgba(20, 44, 57, .10);
	padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: end;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mn-bn {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 2px;
	color: var(--mn-navy);
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	min-height: 52px;
	justify-content: flex-end;
}
.mn-bn svg { width: 24px; height: 24px; }
.mn-bn[aria-current="page"] { color: var(--mn-green); }
.mn-bn--menu { color: var(--mn-navy-d); }
.mn-bn--menu__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-top: -26px;
	border-radius: 50%;
	background: var(--mn-amber);
	color: var(--mn-navy-d);
	box-shadow: 0 6px 16px rgba(217, 160, 78, .5);
	border: 3px solid #fff;
}
.mn-bn--menu__btn svg { width: 28px; height: 28px; }

@media (max-width: 1024px) {
	.mn-bottomnav { display: grid; }
	body.mn-has-header { padding-bottom: calc(var(--mn-bottom-h) + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   6. En-tête responsive (tablette / mobile)
   ========================================================================= */
@media (max-width: 1024px) {
	:root { --mn-header-h: 66px; }
	.mn-header__inner { min-height: 66px; padding: 8px 16px; }
	.mn-brand__logo { height: 44px; }
	.mn-brand__sub { display: none; }
	.mn-act__txt { display: none; }
	.mn-act { padding: 10px; }
	.mn-burger__label { display: none; }
	.mn-burger { padding: 11px 13px; }
}
@media (max-width: 560px) {
	.mn-brand__logo { height: 38px; }
	/* La navigation principale passe par la barre du bas : on allège l'en-tête. */
	.mn-header__actions .mn-burger { display: none; }
}

/* =========================================================================
   7. Recherche (boîte de dialogue)
   ========================================================================= */
.mn-search {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	background: rgba(20, 44, 57, .55);
	padding: 14vh 20px 20px;
}
.mn-search__panel {
	position: relative;
	width: min(640px, 100%);
	background: #fff;
	border-radius: var(--mn-radius);
	box-shadow: var(--mn-shadow);
	padding: 26px 22px 24px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mn-search__label {
	display: block;
	font-size: 18px;
	font-weight: 800;
	color: var(--mn-navy);
	margin-bottom: 12px;
}
.mn-search__row { display: flex; gap: 8px; }
.mn-search input[type="search"] {
	flex: 1 1 auto;
	font-size: 16px;
	padding: 13px 14px;
	border: 2px solid var(--mn-line);
	border-radius: 10px;
	color: var(--mn-ink);
}
.mn-search input[type="search"]:focus { border-color: var(--mn-green); outline: none; }
.mn-search__submit {
	border: 0;
	background: var(--mn-green);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 0 20px;
	border-radius: 10px;
	cursor: pointer;
}
.mn-search__submit:hover { background: #17593a; }
.mn-search__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--mn-cream);
	color: var(--mn-navy);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mn-search__close:hover { background: var(--mn-line); }
.mn-search__close svg { width: 20px; height: 20px; }

/* =========================================================================
   8. État ouvert + verrouillage du défilement
   ========================================================================= */
body.mn-lock { overflow: hidden; }

/* Garde-fou anti-débordement : certains titres Elementor utilisent des
   traits d'union insécables (U+2011) qui forment un « mot » trop large
   pour les petits écrans et créent un défilement horizontal. On autorise
   la coupure de secours uniquement en dessous de la largeur tablette. */
@media (max-width: 782px) {
	.elementor-heading-title { overflow-wrap: anywhere; }
}

[hidden] { display: none !important; }

/* =========================================================================
   9. Préférence « animations réduites »
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.mn-skip,
	.mn-drawer,
	.mn-overlay,
	.mn-act,
	.mn-burger,
	.mn-sub-toggle svg {
		transition: none !important;
	}
}

/* =========================================================================
   10. Surcharge du reset bouton de Hello Elementor (couleur #c36)
   Le thème impose « button { border/color:#c36 } » et
   « button:hover/:focus { background:#c36 } » : on réaffirme nos styles
   avec une spécificité supérieure (préfixes ID / classe).
   ========================================================================= */
#mairie-header .mn-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--mn-amber);
	color: var(--mn-navy-d);
	border: 0;
	border-radius: 999px;
}
#mairie-header .mn-burger:hover,
#mairie-header .mn-burger:focus {
	background: var(--mn-amber-l);
	color: var(--mn-navy-d);
}

#nav-drawer .mn-drawer__close {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border: 0;
	border-radius: 50%;
}
#nav-drawer .mn-drawer__close:hover,
#nav-drawer .mn-drawer__close:focus {
	background: rgba(255, 255, 255, .3);
	color: #fff;
}

#nav-drawer .mn-sub-toggle {
	background: transparent;
	color: var(--mn-navy);
	border: 0;
	border-left: 1px solid var(--mn-line);
	border-radius: 0;
}
#nav-drawer .mn-sub-toggle:hover,
#nav-drawer .mn-sub-toggle:focus {
	background: var(--mn-cream);
	color: var(--mn-navy);
}

.mn-bottomnav .mn-bn,
.mn-bottomnav .mn-bn:hover,
.mn-bottomnav .mn-bn:focus {
	border: 0;
	background: transparent;
}
.mn-bottomnav .mn-bn {
	color: var(--mn-navy);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 3px;
	min-width: 0;
	width: 100%;
	padding: 6px 1px;
	font-size: 11px;
	line-height: 1.2;
}
.mn-bottomnav .mn-bn > span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mn-bottomnav .mn-bn:hover,
.mn-bottomnav .mn-bn:focus { color: var(--mn-green); }
.mn-bottomnav .mn-bn--menu,
.mn-bottomnav .mn-bn--menu:hover,
.mn-bottomnav .mn-bn--menu:focus { color: var(--mn-navy-d); }

#mn-search .mn-search__submit {
	background: var(--mn-green);
	color: #fff;
	border: 0;
	border-radius: 10px;
}
#mn-search .mn-search__submit:hover,
#mn-search .mn-search__submit:focus { background: #17593a; color: #fff; }
#mn-search .mn-search__close {
	background: var(--mn-cream);
	color: var(--mn-navy);
	border: 0;
	border-radius: 50%;
}
#mn-search .mn-search__close:hover,
#mn-search .mn-search__close:focus { background: var(--mn-line); color: var(--mn-navy); }

/* Focus visibles (réaffirmés au-dessus du reset) */
#mairie-header .mn-burger:focus-visible,
.mn-bottomnav .mn-bn:focus-visible,
#mn-search .mn-search__submit:focus-visible,
#mn-search .mn-search__close:focus-visible,
#nav-drawer .mn-sub-toggle:focus-visible {
	outline: 3px solid var(--mn-green);
	outline-offset: 2px;
}
#nav-drawer .mn-drawer__close:focus-visible {
	outline: 3px solid var(--mn-amber-l);
	outline-offset: 2px;
}

/* Liens : neutralise « a{color:#c36} » / « a:hover{color:#336} » du reset */
#mairie-header .mn-act--phone,
#mairie-header .mn-act--phone:hover,
#mairie-header .mn-act--phone:focus { color: #fff; }
#mairie-header .mn-act--mail,
#mairie-header .mn-act--mail:hover,
#mairie-header .mn-act--mail:focus { color: var(--mn-navy); }
#mairie-header .mn-brand,
#mairie-header .mn-brand:hover { color: var(--mn-navy); }
#nav-drawer .mn-link { color: var(--mn-navy); }
#nav-drawer .mn-submenu .mn-link { color: var(--mn-ink); }
#nav-drawer .mn-link:hover,
#nav-drawer .mn-item.is-active > .mn-row > .mn-link { color: var(--mn-green); }
#nav-drawer .mn-drawer__foot a { color: var(--mn-sub); }
#nav-drawer .mn-drawer__foot a:hover { color: var(--mn-green); }
.mn-bottomnav a.mn-bn { color: var(--mn-navy); }
.mn-bottomnav a.mn-bn:hover,
.mn-bottomnav a.mn-bn[aria-current="page"] { color: var(--mn-green); }
.mn-skip,
.mn-skip:hover,
.mn-skip:focus { color: #fff; }