/* SEREPP — Desktop header + méga-menu "Nos Systèmes" (2 volets)
 * Affiché uniquement au-dessus du breakpoint (≥ 981px).
 * Réutilise les tokens de mobile-menu.css ; l'accent du menu est le rouge SEREPP.
 * Aucune dépendance JS pour le style ; le JS ne fait qu'ouvrir/fermer (.is-open).
 */

:root {
	--serepp-orange: #F47427;        /* orange charte — laissé intact (ne pas repurposer) */
	--serepp-menu-accent: #D5001B;   /* accent du MENU (ex-orange) → rouge SEREPP */
	--serepp-dm-bar-h: 76px;
	--serepp-dm-maxw: 1240px;
	--serepp-dm-z: 8000;        /* sous la top-bar mobile (9000) : jamais les deux en même temps */
	--serepp-dm-z-mega: 8050;
	--serepp-dm-anim: 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Visibilité : desktop only ─────────────────────────────────────── */
.serepp-dm { display: none; }

@media (min-width: 981px) {

	.serepp-dm { display: block; }

	/* Masquer le header Divi natif quand notre header desktop prend le relais */
	body.has-serepp-mm #et-top-navigation,
	body.has-serepp-mm #main-header .et_menu_container,
	body.has-serepp-mm #top-menu-nav,
	body.has-serepp-mm header#main-header { display: none !important; }

	/* Compense la hauteur du header fixe (le header Divi étant masqué) */
	body.has-serepp-mm { padding-top: var(--serepp-dm-bar-h); }
}

/* ─── Header bar ────────────────────────────────────────────────────── */
.serepp-dm {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--serepp-dm-bar-h);
	background: #fff;
	border-bottom: 3px solid var(--serepp-menu-accent);
	z-index: var(--serepp-dm-z);
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
	box-shadow: 0 2px 16px rgba(0, 20, 35, 0.04);
}
.serepp-dm__inner {
	max-width: var(--serepp-dm-maxw);
	height: 100%;
	margin: 0 auto;
	padding: 0 28px;
	display: flex;
	align-items: center;
	gap: 28px;
}

/* Logo */
.serepp-dm__logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--serepp-marine);
}
.serepp-dm__logo img,
.serepp-dm__logo .custom-logo {
	max-height: 42px;
	width: auto;
	display: block;
}
.serepp-dm__logo-text {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	font-size: 26px;
	letter-spacing: 2px;
	color: var(--serepp-marine);
}

/* ─── Nav ───────────────────────────────────────────────────────────── */
.serepp-dm-navwrap {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}
.serepp-dm-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.serepp-dm-nav__item {
	position: static;        /* le méga-menu est ancré au header, pas à l'item */
}
.serepp-dm-nav__item.has-dropdown {
	position: relative;      /* le dropdown simple s'ancre sous son propre item */
}
.serepp-dm-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1;
	color: var(--serepp-marine);
	text-decoration: none;
	cursor: pointer;
	border-radius: 6px;
	white-space: nowrap;
	transition: color var(--serepp-dm-anim), background-color var(--serepp-dm-anim);
}
.serepp-dm-nav__link:hover,
.serepp-dm-nav__link:focus-visible {
	color: var(--serepp-menu-accent);
	outline: none;
}
.serepp-dm-nav__link:focus-visible {
	box-shadow: inset 0 -2px 0 var(--serepp-menu-accent);
}
.serepp-dm-nav__caret {
	font-size: 10px;
	line-height: 1;
	opacity: 0.7;
	transition: transform var(--serepp-dm-anim);
}
.serepp-dm-nav__item.is-open > .serepp-dm-nav__link { color: var(--serepp-menu-accent); }
.serepp-dm-nav__item.is-open > .serepp-dm-nav__link .serepp-dm-nav__caret { transform: rotate(180deg); }

/* ─── Actions (recherche + contact) ─────────────────────────────────── */
.serepp-dm__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
}
.serepp-dm-search-toggle {
	width: 42px; height: 42px;
	border: 1px solid var(--serepp-border);
	background: #fff;
	color: var(--serepp-marine);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: border-color var(--serepp-dm-anim), color var(--serepp-dm-anim);
}
.serepp-dm-search-toggle:hover,
.serepp-dm-search-toggle:focus-visible {
	border-color: var(--serepp-menu-accent);
	color: var(--serepp-menu-accent);
	outline: none;
}
.serepp-dm-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	background: var(--serepp-marine);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: 0;
	border-radius: 4px;
	white-space: nowrap;
	transition: background-color var(--serepp-dm-anim);
}
.serepp-dm-cta:hover,
.serepp-dm-cta:focus-visible {
	background: var(--serepp-marine-deep);
	outline: none;
}
.serepp-dm-cta__arrow { line-height: 1; }

/* ─── Barre de recherche déployable ─────────────────────────────────── */
.serepp-dm-searchbar {
	position: absolute;
	top: 100%; left: 0; right: 0;
	background: #fff;
	border-bottom: 1px solid var(--serepp-border);
	box-shadow: 0 12px 24px rgba(0, 20, 35, 0.06);
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--serepp-dm-anim);
}
.serepp-dm-searchbar.is-open { max-height: 88px; }
.serepp-dm-searchbar__inner {
	max-width: var(--serepp-dm-maxw);
	margin: 0 auto;
	padding: 18px 28px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.serepp-dm-searchbar__icon { flex: 0 0 20px; color: var(--serepp-marine); }
.serepp-dm-searchbar input {
	flex: 1 1 auto;
	border: 0;
	font-family: inherit;
	font-size: 17px;
	color: var(--serepp-text);
	background: transparent;
	outline: none;
}
.serepp-dm-searchbar input::placeholder { color: #9CA3AF; }

/* ─── Méga-menu (2 volets) ──────────────────────────────────────────── */
.serepp-dm-mega {
	position: absolute;
	top: 100%; left: 0; right: 0;
	background: #fff;
	border-bottom: 1px solid var(--serepp-border);
	box-shadow: 0 24px 40px rgba(0, 20, 35, 0.10);
	z-index: var(--serepp-dm-z-mega);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--serepp-dm-anim), transform var(--serepp-dm-anim), visibility var(--serepp-dm-anim);
	pointer-events: none;
}
.serepp-dm-nav__item.is-open > .serepp-dm-mega,
.serepp-dm-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
.serepp-dm-mega__inner {
	max-width: var(--serepp-dm-maxw);
	margin: 0 auto;
	padding: 28px;
	display: grid;
	grid-template-columns: 260px 1fr 300px;
	gap: 28px;
	align-items: start;
}

/* Volet gauche : catégories */
.serepp-dm-cats {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--serepp-bg-soft);
	border-radius: 10px;
	padding: 12px;
}
.serepp-dm-cat {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px 10px;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: var(--serepp-marine);
	text-decoration: none;
	transition: background-color var(--serepp-dm-anim);
}
.serepp-dm-cat:hover { background: rgba(0, 60, 105, 0.06); }
.serepp-dm-cat.is-active { background: #fff; box-shadow: 0 2px 10px rgba(0, 20, 35, 0.08); }
.serepp-dm-cat__thumb {
	flex: 0 0 48px;
	width: 48px; height: 48px;
	border-radius: 6px;
	background: #d9dde1;
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.serepp-dm-cat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.serepp-dm-cat__label {
	flex: 1 1 auto;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.3px;
}
.serepp-dm-cat__chevron { flex: 0 0 auto; color: var(--serepp-text-light); font-size: 18px; line-height: 1; }
.serepp-dm-cat.is-active .serepp-dm-cat__chevron { color: var(--serepp-menu-accent); }

/* Volet centre : gammes */
.serepp-dm-panels { min-width: 0; }
.serepp-dm-panel { display: none; }
.serepp-dm-panel.is-active { display: block; }
.serepp-dm-panel__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--serepp-text-light);
	text-transform: uppercase;
	margin: 4px 0 16px 4px;
}
.serepp-dm-gammes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 20px;
}
.serepp-dm-gamme {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--serepp-marine);
	transition: background-color var(--serepp-dm-anim);
}
.serepp-dm-gamme:hover,
.serepp-dm-gamme:focus-visible {
	background: rgba(213, 0, 27, 0.08);
	outline: none;
}
.serepp-dm-gamme__thumb {
	flex: 0 0 48px;
	width: 48px; height: 48px;
	border-radius: 6px;
	background: #e6e6e6;
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.serepp-dm-gamme__thumb img { width: 100%; height: 100%; object-fit: cover; }
.serepp-dm-gamme__label {
	flex: 1 1 auto;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.1;
	letter-spacing: 0.2px;
}
.serepp-dm-gamme__chevron { flex: 0 0 auto; color: var(--serepp-text-light); font-size: 16px; line-height: 1; }
.serepp-dm-gamme:hover .serepp-dm-gamme__label,
.serepp-dm-gamme:focus-visible .serepp-dm-gamme__label { color: var(--serepp-menu-accent); }
.serepp-dm-gamme:hover .serepp-dm-gamme__chevron { color: var(--serepp-menu-accent); }

/* Volet droit : encart promo */
.serepp-dm-promo {
	background: var(--serepp-marine);
	color: #fff;
	border-radius: 10px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.serepp-dm-promo__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #cfd4d8;
	border-radius: 6px;
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	color: #7b8893;
	font-size: 12px;
}
.serepp-dm-promo__media img { width: 100%; height: 100%; object-fit: cover; }
.serepp-dm-promo__title {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.15;
}
.serepp-dm-promo__text { font-size: 13px; color: rgba(255,255,255,0.8); margin: -4px 0 2px; }
.serepp-dm-promo__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 11px 18px;
	background: var(--serepp-menu-accent);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border-radius: 4px;
	transition: filter var(--serepp-dm-anim);
}
.serepp-dm-promo__btn:hover,
.serepp-dm-promo__btn:focus-visible { filter: brightness(1.06); outline: none; }

/* ─── Dropdown simple (parent à 1 niveau, sans petits-enfants) ──────── */
.serepp-dm-dropdown {
	position: absolute;
	top: 100%;
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--serepp-border);
	border-top: 0;
	box-shadow: 0 24px 40px rgba(0, 20, 35, 0.10);
	border-radius: 0 0 8px 8px;
	padding: 8px;
	z-index: var(--serepp-dm-z-mega);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--serepp-dm-anim), transform var(--serepp-dm-anim), visibility var(--serepp-dm-anim);
	pointer-events: none;
}
.serepp-dm-nav__item.is-open > .serepp-dm-dropdown {
	opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.serepp-dm-dropdown a {
	display: block;
	padding: 10px 14px;
	border-radius: 6px;
	color: var(--serepp-marine);
	text-decoration: none;
	font-size: 15px;
	transition: background-color var(--serepp-dm-anim), color var(--serepp-dm-anim);
}
.serepp-dm-dropdown a:hover,
.serepp-dm-dropdown a:focus-visible {
	background: rgba(213, 0, 27, 0.08);
	color: var(--serepp-menu-accent);
	outline: none;
}

/* ─── Backdrop léger sous le méga-menu (clic dehors = ferme) ────────── */
.serepp-dm-backdrop {
	position: fixed;
	inset: var(--serepp-dm-bar-h) 0 0 0;
	background: rgba(0, 20, 35, 0.18);
	z-index: calc(var(--serepp-dm-z) - 1);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--serepp-dm-anim), visibility var(--serepp-dm-anim);
}
.serepp-dm-backdrop.is-open { opacity: 1; visibility: visible; }

/* ─── Reduce motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.serepp-dm-mega,
	.serepp-dm-dropdown,
	.serepp-dm-searchbar,
	.serepp-dm-backdrop,
	.serepp-dm-nav__caret { transition: none !important; }
}