/* Menu principal (ROADMAP 2.10, menu v3) : méga-menus, icônes, encarts guides, bouton de devis, accordéon mobile. Voir inc/menu-principal.php. */
:root {
	--flux-noir: #201f1b;
	--flux-vert: #a6d800;
	--flux-vert-fonce: #5f7d00;
	--flux-gris: #f4f4f1;
	--flux-trait: #e2e2dc;
	--flux-texte: #2b2b28;
	--flux-doux: #6b6b64;
}

@keyframes flux-menu-ouvre {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
 * Couleurs de l'en-tête écrites ici, pas seulement dans les réglages Divi : Divi les sert dans un CSS « critique » propre
 * à chaque page, vide sur certaines pages (« Ma demande de devis » s'affichait avec un en-tête blanc et un menu illisible).
 */
#main-header {
	background-color: var(--flux-noir);
}
#main-header,
#et-top-navigation {
	font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
}
#top-menu > li > a {
	color: #fff;
}
#main-header .mobile_menu_bar::before {
	color: var(--flux-vert);
}
#top-menu li.current-menu-ancestor > a,
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a {
	color: var(--flux-vert);
}

/* ---------- Ordinateur (> 980 px) ---------- */
@media (min-width: 981px) {
	#main-header #top-menu > li.flux-mega {
		position: static;
	}
	#top-menu li.flux-mega > ul.sub-menu {
		display: grid !important;
		/* Colonnes de liens + encart de 300 px à droite (nombre de colonnes : flux-mega--1 à --3) */
		grid-template-columns: repeat(var(--flux-cols, 3), minmax(0, 1fr)) 300px;
		gap: 8px 36px;
		align-content: start;
		box-sizing: border-box;
		font-family: "Open Sans", Arial, sans-serif;
		letter-spacing: normal;
		position: absolute !important;
		top: 100%;
		/* Pleine largeur de la fenêtre, quel que soit le conteneur centré de Divi */
		left: calc(50% - 50vw) !important;
		width: 100vw !important;
		margin: 0;
		/* Colonnes centrées sur 1180 px au plus */
		--flux-pad: max(32px, calc((100vw - 1180px) / 2 + 32px));
		padding: 28px var(--flux-pad) 0;
		background: #fff;
		border-top: 3px solid var(--flux-vert);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		z-index: 99999;
	}
	#top-menu li.flux-mega--1 > ul.sub-menu { --flux-cols: 1; }
	#top-menu li.flux-mega--2 > ul.sub-menu { --flux-cols: 2; }
	#top-menu li.flux-mega--3 > ul.sub-menu { --flux-cols: 3; }

	/*
	 * Un seul mécanisme : l'état « ouvert » vient de la classe .flux-ouvert (js/menu-principal.js) ou du focus clavier.
	 * Les règles de Divi liées à :hover, .et-hover, .et-show-dropdown et à l'animation « expand » (Grow) sont neutralisées
	 * pour ces entrées : sans cela Divi ouvrait le panneau avant notre délai, le fermait et le rouvrait en rejouant son animation.
	 */
	html.flux-js #top-menu > li.menu-item-has-children:not(.flux-ouvert):not(:focus-within) > ul.sub-menu {
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
		animation: none !important;
	}
	html:not(.flux-js) #top-menu li.flux-mega:hover > ul.sub-menu,
	#top-menu > li.menu-item-has-children.flux-ouvert > ul.sub-menu,
	#top-menu > li.menu-item-has-children:focus-within > ul.sub-menu {
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}
	/* Une seule animation, jouée une fois par ouverture : fondu de 150 ms et translation de 4 px */
	#top-menu > li.menu-item-has-children > ul.sub-menu {
		transition: none !important;
		animation: none !important;
	}
	#top-menu > li.menu-item-has-children.flux-ouvert > ul.sub-menu {
		animation: flux-menu-ouvre 0.15s ease-out 1 both !important;
	}
	/* Sous-listes des colonnes : aucune animation de Divi au survol */
	#top-menu li ul.sub-menu ul.sub-menu {
		animation: none !important;
		transition: none !important;
	}
	#top-menu li.flux-ferme > ul.sub-menu {
		display: none !important;
	}

	/* Colonnes */
	#top-menu li.flux-mega > ul.sub-menu > li {
		float: none !important;
		width: auto !important;
		min-width: 0;
		clear: none !important;
		padding: 0 0 18px !important;
	}
	#top-menu li.flux-mega > ul.sub-menu > li:not(.flux-mega-tout) > a,
	#top-menu li.flux-mega > ul.sub-menu > li > .flux-mega-titre__txt {
		display: block;
		width: 100% !important;
		margin: 0 0 12px;
		padding: 0 !important;
		border: 0;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.4;
		letter-spacing: 0;
		text-transform: none;
		color: var(--flux-noir);
	}
	#top-menu li.flux-mega ul.sub-menu * {
		font-family: inherit;
		letter-spacing: inherit;
	}
	#top-menu li.flux-mega > ul.sub-menu > li > ul.sub-menu {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		padding: 0;
		margin: 0;
		background: none;
		position: static !important;
	}
	#top-menu li.flux-mega > ul.sub-menu > li > ul.sub-menu > li {
		width: 100%;
		padding: 0 !important;
	}
	#top-menu li.flux-mega ul.sub-menu li > a {
		white-space: normal;
		width: 100% !important;
	}
	#top-menu li.flux-mega > ul.sub-menu > li:not(.flux-mega-encart) > ul.sub-menu > li > a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 7px 0 !important;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1.4;
		color: var(--flux-texte);
		opacity: 1 !important;
		border: 0;
		background: none !important;
		text-transform: none;
	}
	#top-menu li.flux-mega > ul.sub-menu > li:not(.flux-mega-encart) > ul.sub-menu > li > a:hover,
	#top-menu li.flux-mega > ul.sub-menu > li:not(.flux-mega-encart) > ul.sub-menu > li > a:focus-visible {
		color: var(--flux-vert-fonce);
		background: none !important;
	}
	/* Icône au trait (sprite de inc/menu-principal.php), libellé, nombre de produits à droite */
	#top-menu li.flux-mega .flux-ico {
		flex: 0 0 24px;
		width: 24px;
		height: 24px;
		color: var(--flux-vert-fonce);
	}
	#top-menu li.flux-mega .flux-menu-lib {
		min-width: 0;
	}
	#top-menu li.flux-mega .flux-menu-n {
		margin-left: auto;
		font-size: 12px;
		font-weight: 400;
		color: var(--flux-doux);
	}

	#top-menu li.flux-mega .flux-mega-tout__txt {
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		color: var(--flux-texte);
	}

	/* Encart « Guides pour bien choisir » : sous-titre, 2 articles séparés par un filet, bouton de devis */
	#top-menu li.flux-mega > ul.sub-menu > li.flux-mega-encart {
		align-self: start;
		margin: 0 0 18px;
		padding: 20px !important;
		border: 1px solid var(--flux-trait);
		border-radius: 10px;
		background: var(--flux-gris);
	}
	#top-menu li.flux-mega .flux-mega-encart__t {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 6px;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.4;
		color: var(--flux-noir);
	}
	#top-menu li.flux-mega .flux-mega-encart__t .flux-ico {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
	}
	#top-menu li.flux-mega .flux-mega-encart__sous {
		display: block;
		margin: 0 0 10px;
		font-size: 13px;
		line-height: 1.5;
		color: var(--flux-doux);
	}
	#top-menu li.flux-mega li.flux-mega-art > a {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 0 !important;
		border-top: 1px solid var(--flux-trait);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.4;
		color: var(--flux-noir);
	}
	#top-menu li.flux-mega li.flux-mega-art > a:hover,
	#top-menu li.flux-mega li.flux-mega-art > a:focus-visible {
		color: var(--flux-vert-fonce);
	}
	#top-menu li.flux-mega li.flux-mega-encart-btn > a {
		display: inline-block;
		width: auto !important;
		margin-top: 12px;
		padding: 10px 14px !important;
		border-radius: 6px;
		background: var(--flux-noir);
		color: #fff !important;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.3;
	}
	#top-menu li.flux-mega li.flux-mega-encart-btn > a:hover,
	#top-menu li.flux-mega li.flux-mega-encart-btn > a:focus-visible {
		background: #000;
	}

	/* Pied du panneau */
	#top-menu li.flux-mega > ul.sub-menu > li.flux-mega-tout {
		grid-column: 1 / -1;
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		margin: 0 calc(-1 * var(--flux-pad));
		padding: 12px var(--flux-pad) !important;
		border-top: 1px solid var(--flux-trait);
		font-size: 14px;
		line-height: 1.4;
		color: var(--flux-texte);
	}
	#top-menu li.flux-mega > ul.sub-menu > li.flux-mega-tout > a.flux-mega-tout__lien {
		width: auto !important;
		flex: none;
		margin-left: auto;
		line-height: 1.4;
		padding: 0 !important;
		text-transform: none;
		color: var(--flux-vert-fonce);
		font-size: 14px;
		font-weight: 700;
		opacity: 1 !important;
		white-space: nowrap;
	}
	#top-menu li.flux-mega .flux-mega-tout__lien:hover {
		text-decoration: underline;
	}

	/* Bouton « Demander un devis » : 10 px avant « Mon devis » */
	#top-menu li.flux-menu-devis {
		padding-right: 10px;
	}
	#top-menu li.flux-menu-devis > a {
		padding: 10px 16px !important;
		margin-left: 8px;
		border-radius: 4px;
		background: var(--flux-vert);
		color: var(--flux-noir) !important;
		font-weight: 700;
		opacity: 1 !important;
	}
	#top-menu li.flux-menu-devis > a:hover,
	#top-menu li.flux-menu-devis > a:focus-visible {
		background: #b9ee00;
	}
	/* « Mon devis (n) » : contour blanc, comme sur la maquette, pour ne pas concurrencer le bouton vert */
	#top-menu li.flux-mon-devis > a {
		background: transparent !important;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 4px;
		padding: 8px 10px !important;
		font-size: 13px;
	}
	#top-menu li.flux-mon-devis > a:hover {
		border-color: var(--flux-vert);
		color: var(--flux-vert) !important;
	}
	#top-menu li.flux-mon-devis .flux-mega-count,
	#top-menu li.flux-mon-devis .flux-mon-devis__count {
		background: var(--flux-vert);
		color: var(--flux-noir);
	}
}

/* Barre : entrées centrées verticalement, alignées avec le logo (Divi les colle en bas par un padding-top / padding-bottom calculé) */
@media (min-width: 981px) {
	#main-header,
	#main-header .container.et_menu_container {
		height: 80px;
	}
	#main-header #et-top-navigation {
		display: flex;
		align-items: center;
		height: 100%;
		padding-top: 0 !important;
	}
	#main-header #et-top-navigation #top-menu-nav,
	#main-header #et-top-navigation #top-menu {
		display: flex;
		align-items: center;
	}
	#main-header #top-menu > li {
		display: flex;
		align-items: center;
		height: 80px;
	}
	/* Premier niveau : pas de gris ni d'opacité au survol ; entrée ouverte en vert avec un trait de 3 px au bas de la barre */
	#main-header #top-menu > li > a,
	#main-header #top-menu > li > a:hover {
		opacity: 1 !important;
	}
	#main-header #top-menu > li > a {
		position: relative;
	}
	#main-header #top-menu > li > a::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -33px;
		height: 3px;
		background: var(--flux-vert);
		opacity: 0;
		pointer-events: none;
	}
	#main-header #top-menu > li.flux-ouvert > a,
	#main-header #top-menu > li > a:hover,
	#main-header #top-menu > li.menu-item-has-children:focus-within > a {
		color: var(--flux-vert) !important;
	}
	#main-header #top-menu > li.flux-ouvert > a::before,
	#main-header #top-menu > li.menu-item-has-children:focus-within > a::before {
		opacity: 1;
	}
	#main-header #top-menu > li.flux-menu-devis > a::before,
	#main-header #top-menu > li.flux-mon-devis > a::before {
		display: none;
	}
	/* Entrée active (catégorie ou page courante) : couleur verte, sans trait */
	#main-header #top-menu > li.current-menu-item > a,
	#main-header #top-menu > li.current-menu-ancestor > a {
		color: var(--flux-vert);
	}
	#main-header #top-menu > li.flux-menu-devis > a:hover,
	#main-header #top-menu > li.flux-menu-devis > a {
		color: var(--flux-noir) !important;
	}
	#main-header #top-menu > li.flux-mon-devis > a:hover {
		color: var(--flux-vert) !important;
	}

	/* Description sous un libellé (Par profession) */
	#top-menu li.flux-mega .flux-menu-desc {
		display: block;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.4;
		color: var(--flux-doux);
	}
	#main-header #top-menu > li > a {
		padding-bottom: 0 !important;
	}
	#main-header #top-menu > li.flux-menu-devis > a {
		padding: 10px 16px !important;
	}
	#main-header #top-menu > li.flux-mon-devis > a {
		padding: 8px 10px !important;
	}
	#main-header #et-top-navigation #et_top_search,
	#main-header #et-top-navigation .et-cart-info {
		margin-top: 0;
	}
}

/* Écran étroit pour un menu à 5 entrées + devis : resserrer */
@media (min-width: 981px) and (max-width: 1250px) {
	#top-menu li a {
		font-size: 13px;
	}
	#top-menu > li {
		padding-right: 12px;
	}
	#main-header #top-menu > li.flux-menu-devis > a {
		margin-left: 0;
		padding: 9px 12px !important;
	}
}

/* ---------- Mobile et tablette (<= 980 px, menu mobile de Divi) ---------- */
@media (max-width: 980px) {
	/* Sélecteur renforcé : les réglages Divi (#main-header .et_mobile_menu, fond sombre) se chargent après ce fichier. */
	#main-header ul.et_mobile_menu {
		background: #fff;
		border-top: 3px solid var(--flux-vert);
		padding: 0;
	}
	#main-header .et_mobile_menu > li {
		border-top: 1px solid var(--flux-trait);
		border-bottom: 0;
		background: #fff;
	}
	#main-header .et_mobile_menu > li > a {
		padding: 16px;
		font-size: 16px;
		font-weight: 600;
		color: var(--flux-texte);
	}
	#main-header .et_mobile_menu > li.flux-menu-devis {
		border-top: 0;
	}
	/* Encarts guides et nombres de produits masqués (le plus sobre) */
	#main-header .et_mobile_menu .flux-mega-encart,
	#main-header .et_mobile_menu .flux-menu-n,
	#main-header .et_mobile_menu .flux-mega-tout .flux-mega-tout__txt {
		display: none !important;
	}
	#main-header .et_mobile_menu li.flux-menu-devis > a {
		margin: 14px;
		padding: 13px !important;
		border-radius: 5px;
		background: var(--flux-vert);
		color: var(--flux-noir) !important;
		font-weight: 700;
		text-align: center;
	}
	#main-header .et_mobile_menu li.flux-menu-devis {
		border-bottom: 0;
	}

	/* Accordéon construit par js/menu-principal.js */
	#main-header .et_mobile_menu li.flux-acc > a.flux-acc__label {
		display: none;
	}
	#main-header .et_mobile_menu .flux-acc__btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 16px;
		border: 0;
		background: none;
		font: 600 16px "Open Sans", sans-serif;
		text-align: left;
		color: var(--flux-texte);
		cursor: pointer;
	}
	#main-header .et_mobile_menu .flux-acc__btn:focus-visible {
		outline: 2px solid var(--flux-vert-fonce);
		outline-offset: -2px;
	}
	#main-header .et_mobile_menu .flux-acc__signe {
		color: var(--flux-vert-fonce);
		font-size: 22px;
		line-height: 1;
		transition: transform 0.2s;
	}
	#main-header .et_mobile_menu li.flux-acc.flux-acc--ouvert > .flux-acc__btn .flux-acc__signe {
		transform: rotate(45deg);
	}
	#main-header .et_mobile_menu li.flux-acc > ul.sub-menu {
		display: none !important;
		padding: 0 16px 12px;
		background: var(--flux-gris);
	}
	#main-header .et_mobile_menu li.flux-acc.flux-acc--ouvert > ul.sub-menu {
		display: block !important;
	}
	#main-header .et_mobile_menu li.flux-acc ul.sub-menu li {
		padding: 0;
		border: 0;
	}
	#main-header .et_mobile_menu li.flux-acc ul.sub-menu li > a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 0 !important;
		border-bottom: 1px solid var(--flux-trait);
		font-size: 15px;
		color: var(--flux-texte);
	}
	#main-header .et_mobile_menu li.flux-acc .flux-mega-titre__txt {
		display: block;
		margin: 14px 0 4px;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;
		color: var(--flux-noir);
	}
	#main-header .et_mobile_menu li.flux-acc .flux-ico {
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
		color: var(--flux-vert-fonce);
	}
	#main-header .et_mobile_menu li.flux-acc li.flux-mega-tout {
		order: -1;
	}
	#main-header .et_mobile_menu li.flux-acc li.flux-mega-tout > a.flux-mega-tout__lien {
		border: 0;
		color: var(--flux-vert-fonce);
		font-weight: 700;
	}

	#main-header .et_mobile_menu li.flux-acc .flux-menu-desc {
		display: block;
		margin-top: 2px;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.4;
		color: var(--flux-doux);
	}
}

/* Logo de l'en-tête : 48 px sur ordinateur, 40 px sur mobile (retours du 12/10/2026) */
#main-header #logo,
#main-header .logo_container #logo {
	height: 48px;
	max-height: 48px;
	width: auto;
}
@media (max-width: 860px) {
	#main-header #logo,
	#main-header .logo_container #logo {
		height: 40px;
		max-height: 40px;
	}
}