/* SEREPP — Mobile Menu styles
 * Compiled CSS, ~280 lines.
 * Variables CSS exposées en tête pour personnalisation rapide.
 * Mobile-first : tout l'UI s'active sous --serepp-mm-breakpoint.
 */

:root {
	--serepp-marine: #003C69;
	--serepp-marine-deep: #002A4A;
	--serepp-red: #D5001B;
	--serepp-text: #1D1D1B;
	--serepp-text-light: #6B6B6B;
	--serepp-border: #E5E5E5;
	--serepp-bg-soft: #F4F4F4;
	--serepp-mm-breakpoint: 980px;
	--serepp-mm-bar-height: 56px;
	--serepp-mm-anim: 280ms cubic-bezier(0.22, 1, 0.36, 1);
	--serepp-mm-z-bar: 9000;
	--serepp-mm-z-backdrop: 9100;
	--serepp-mm-z-drawer: 9200;
}

/* ─── Hide on desktop ───────────────────────────────────────────────── */
.serepp-mm-bar,
.serepp-mm-drawer,
.serepp-mm-backdrop {
	display: none;
}

@media (max-width: 980px) {
	.serepp-mm-bar { display: flex; }
	.serepp-mm-drawer { display: flex; }
	/* Cacher le menu Divi natif sous le breakpoint */
	body.has-serepp-mm #et-top-navigation,
	body.has-serepp-mm .et_mobile_menu,
	body.has-serepp-mm #main-header .mobile_menu_bar { display: none !important; }
}

/* ─── Body lock when drawer open ────────────────────────────────────── */
body.serepp-mm-noscroll {
	overflow: hidden;
	touch-action: none;
}

/* ─── Top bar ──────────────────────────────────────────────────────── */
.serepp-mm-bar {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--serepp-mm-bar-height);
	background: var(--serepp-marine);
	color: #fff;
	z-index: var(--serepp-mm-z-bar);
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}
.serepp-mm-bar__logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
	max-width: 140px;
}
.serepp-mm-bar__logo img,
.serepp-mm-bar__logo .custom-logo {
	max-height: 36px;
	width: auto;
}
.serepp-mm-bar__logo-text {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 2px;
}

/* Burger */
.serepp-mm-burger {
	width: 40px; height: 40px;
	background: transparent; border: 0; padding: 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 5px;
	cursor: pointer;
}
.serepp-mm-burger span {
	display: block;
	width: 22px; height: 2px;
	background: #fff;
	border-radius: 1px;
	transition: transform var(--serepp-mm-anim), opacity var(--serepp-mm-anim);
}
.serepp-mm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.serepp-mm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.serepp-mm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Search toggle in bar */
.serepp-mm-search-toggle {
	width: 40px; height: 40px; border: 0;
	background: rgba(255,255,255,0.08);
	color: #fff; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}

/* ─── Backdrop ─────────────────────────────────────────────────────── */
.serepp-mm-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 20, 35, 0.5);
	z-index: var(--serepp-mm-z-backdrop);
	opacity: 0;
	transition: opacity var(--serepp-mm-anim);
}
.serepp-mm-drawer.is-open ~ .serepp-mm-backdrop,
.serepp-mm-backdrop:not([hidden]) {
	opacity: 1;
}

/* ─── Drawer ───────────────────────────────────────────────────────── */
.serepp-mm-drawer {
	position: fixed;
	top: 0; left: 0;
	/* Sur mobile (< 600px) : pleine largeur, le drawer s'adapte au tel
	   Au-dessus (tablette / desktop affichant le drawer) : 420px max,
	   limité à 90% de la viewport pour laisser voir le backdrop derrière. */
	width: 100%;
	height: 100vh; height: 100dvh;
	background: #fff;
	z-index: var(--serepp-mm-z-drawer);
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform var(--serepp-mm-anim);
	font-family: 'DM Sans', system-ui, sans-serif;
	color: var(--serepp-text);
	overflow: hidden;
}
@media (min-width: 600px) {
	.serepp-mm-drawer {
		width: min(420px, 90%);
	}
}
.serepp-mm-drawer.is-open {
	transform: translateX(0);
}

.serepp-mm-drawer__bar {
	flex: 0 0 auto;
	position: relative; /* nécessaire pour le centrage absolu du logo */
	height: var(--serepp-mm-bar-height);
	background: var(--serepp-marine);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	gap: 12px;
}
.serepp-mm-drawer__bar .serepp-mm-back,
.serepp-mm-drawer__bar .serepp-mm-close {
	background: transparent; border: 0; color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 4px;
}
.serepp-mm-drawer__bar .serepp-mm-back span,
.serepp-mm-drawer__bar .serepp-mm-close span {
	font-size: 24px; line-height: 1;
}
/* Titre h2 — masqué en permanence (le back button suffit).
   Reset des marges/couleur Divi au cas où il serait ré-activé un jour. */
.serepp-mm-drawer__title {
	margin: 0 !important;
	padding: 0 !important;
	color: #fff !important;
	font-family: 'Barlow Condensed', system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	line-height: 1 !important;
	letter-spacing: 0.5px !important;
	text-align: center;
}
/* Logo : centrage absolu pour rester au milieu de la bar
   indépendamment de la largeur du bouton back/close (l'un peut être plus
   large que l'autre, le logo reste optiquement centré). */
.serepp-mm-drawer__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #fff; text-decoration: none;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700; font-size: 18px; letter-spacing: 2px;
	pointer-events: auto;
	z-index: 1;
}
.serepp-mm-drawer__logo img,
.serepp-mm-drawer__logo .custom-logo {
	max-height: 32px; width: auto; vertical-align: middle;
}
/* Back/close gardent leur priorité au-dessus du logo absolument positionné */
.serepp-mm-drawer__bar .serepp-mm-back,
.serepp-mm-drawer__bar .serepp-mm-close {
	position: relative;
	z-index: 2;
}

/* ─── Search (flex layout — robuste, pas de position absolue) ─────── */
.serepp-mm-search {
	flex: 0 0 auto;
	background: var(--serepp-marine);
	padding: 12px 16px 16px;
}

/* Cas idéal : wrapper __inner présent (template à jour) */
.serepp-mm-search__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border-radius: 24px;
	padding: 0 16px;
	height: 44px;
	box-sizing: border-box;
}
.serepp-mm-search__inner .serepp-mm-search__icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: var(--serepp-marine);
	pointer-events: none;
	display: block;
}
.serepp-mm-search__inner input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	height: 100%;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--serepp-text);
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	outline: none;
}
.serepp-mm-search__inner input::placeholder {
	color: #9CA3AF;
}
.serepp-mm-search__inner:focus-within {
	outline: 2px solid var(--serepp-red);
	outline-offset: 2px;
}

/* FALLBACK : si le wrapper __inner est absent (template pas à jour),
   on applique le styling pill directement sur l'input et on garde
   l'icône via flex sur le formulaire. Aucune position absolue. */
.serepp-mm-search:not(:has(.serepp-mm-search__inner)) {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px 16px;
}
.serepp-mm-search:not(:has(.serepp-mm-search__inner)) > .serepp-mm-search__icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: var(--serepp-marine);
	pointer-events: none;
	background: #fff;
	border-radius: 0 0 0 24px;
	padding: 13px 0 13px 16px;
	margin-right: -10px;
	box-sizing: content-box;
}
.serepp-mm-search:not(:has(.serepp-mm-search__inner)) > input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: #fff;
	border-radius: 0 24px 24px 0;
	padding: 12px 16px;
	height: 44px;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
	color: var(--serepp-text);
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}
.serepp-mm-search:not(:has(.serepp-mm-search__inner)) > input::placeholder {
	color: #9CA3AF;
}
.serepp-mm-search:not(:has(.serepp-mm-search__inner)) > input:focus {
	outline: 2px solid var(--serepp-red);
	outline-offset: 2px;
}

/* ─── Levels (stacked navigation) ──────────────────────────────────── */
.serepp-mm-levels {
	flex: 1 1 auto;
	overflow: hidden;
	position: relative;
}
.serepp-mm-level {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	transform: translate3d(100%, 0, 0);  /* translate3d → GPU compositing */
	transition: transform var(--serepp-mm-anim);
	will-change: transform;
	pointer-events: none;
	/* contain : isole le rendu pour éviter les reflows sur le reste */
	contain: layout paint;
}
.serepp-mm-level.is-active {
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
}
.serepp-mm-level--root {
	transform: translate3d(-100%, 0, 0);
}
.serepp-mm-level--root.is-active {
	transform: translate3d(0, 0, 0);
}
/* aria-hidden + inert sont les garde-fou A11y, sans CSS qui casserait l'anim */
.serepp-mm-level[aria-hidden="true"] {
	visibility: visible; /* keep visible during anim */
}

/* ─── Item rows ────────────────────────────────────────────────────── */
.serepp-mm-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.serepp-mm-link {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	background: #fff;
	border: 0;
	border-bottom: 1px solid var(--serepp-border);
	color: var(--serepp-marine);
	text-decoration: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 120ms;
}
.serepp-mm-link:hover,
.serepp-mm-link:focus-visible {
	background: var(--serepp-bg-soft);
	outline: none;
}
.serepp-mm-link:focus-visible {
	box-shadow: inset 3px 0 0 var(--serepp-red);
}

.serepp-mm-link--all {
	background: rgba(213, 0, 27, 0.06);
	color: var(--serepp-red);
	font-weight: 700;
	letter-spacing: 0.4px;
	justify-content: space-between;
	font-size: 14px;
	text-transform: uppercase;
}

.serepp-mm-thumb {
	flex: 0 0 40px;
	width: 40px; height: 40px;
	background: var(--serepp-bg-soft);
	border-radius: 4px;
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.serepp-mm-thumb__img {
	width: 100%; height: 100%; object-fit: cover;
}
.serepp-mm-thumb__placeholder {
	width: 16px; height: 16px;
	background: linear-gradient(135deg, #d0d0d0, #b0b0b0);
	border-radius: 2px;
}

.serepp-mm-label {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.serepp-mm-label__title {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: 0.3px;
	color: var(--serepp-marine);
}
.serepp-mm-link--all .serepp-mm-label__title { color: inherit; font-size: 14px; }
.serepp-mm-label__desc {
	font-size: 12px;
	color: var(--serepp-text-light);
	line-height: 1.3;
}

.serepp-mm-badge {
	flex: 0 0 auto;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 4px 8px;
	border-radius: 2px;
	text-transform: uppercase;
}

.serepp-mm-chevron {
	flex: 0 0 auto;
	font-size: 24px;
	color: var(--serepp-marine);
	font-weight: 400;
	line-height: 1;
}

/* ─── Sub-level rows : indented + lighter ──────────────────────────── */
.serepp-mm-level--sub .serepp-mm-list .serepp-mm-link {
	background: #fafafa;
	padding-left: 36px;
}
.serepp-mm-level--sub .serepp-mm-list .serepp-mm-label__title {
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
}

/* ─── Promo banner ─────────────────────────────────────────────────── */
.serepp-mm-promo {
	background: var(--serepp-marine);
	color: #fff;
	padding: 20px;
	display: flex; flex-direction: column; gap: 8px;
}
.serepp-mm-promo__eyebrow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.8px;
	color: var(--serepp-red);
}
.serepp-mm-promo__link {
	color: #fff;
	text-decoration: none;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

/* ─── Contact footer ───────────────────────────────────────────────── */
.serepp-mm-contact {
	background: var(--serepp-bg-soft);
	padding: 20px;
	display: flex; flex-direction: column; gap: 4px;
	align-items: center;
	text-align: center;
}
.serepp-mm-contact__phone {
	font-family: 'DM Sans', system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--serepp-marine);
	text-decoration: none;
}
.serepp-mm-contact__phone::before { content: "📞  "; }
.serepp-mm-contact__email {
	font-size: 13px;
	color: var(--serepp-text);
	text-decoration: none;
}

/* ─── Reduce motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.serepp-mm-drawer,
	.serepp-mm-level,
	.serepp-mm-backdrop,
	.serepp-mm-burger span {
		transition: none !important;
	}
}

/* ─── Visually hidden ──────────────────────────────────────────────── */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap;
	border: 0;
}