.menutitrepanel {
	margin-bottom:20px; font-size:2rem;
}

.menucategories {
	display:grid; 
	grid-template-columns: 50% 25% 25%;
}

.menucat2 {
	align-content:center;
	height:100%;
	width:100%;
	text-align:center;
}

.menuroot {
	display: flex;
	justify-content: space-evenly;
	align-content: stretch;
	align-items: center;
	font-size:.8rem;
	height:40px;
	text-align:center;
}

.menucontent {
	transition: height .3s linear;
}

.menupanel {
	display:grid;
	grid-template-columns:50% 50%
}

.menuproductgrid {
	grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
	grid-gap:20px;
	margin-top:20px;
	margin-bottom:20px;
}

.menuproductrange {
	grid-template-rows: 30px 120px;
	justify-items: center;
	cursor: pointer;
	font-size: .8rem;
}

.menuimagecat2 {
	padding-top:5px;
	height:100%;
	width:100%; 
	background-color:#fff; 
	align-items:center; 
	justify-items: center;
}

.menupanelwrapper {
	width:100%;
	display:none;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	margin-bottom: 20px;
	border-left: 1px solid #a2411a;
	border-right: 1px solid #a2411a;
	border-top: 1px solid #a2411a;
	border-bottom: 1px solid #a2411a;
	margin-top: 10px;
	position: absolute;
	z-index:1;
}

.menuitem1 {
	display: flex;
	font-weight:normal;
	flex-grow:1;
	height:40px;
	justify-content: center;
	align-items: center;
	cursor:pointer;
	transition: margin-bottom .3s linear, background .3s linear, font-weight .3s linear;
}

.menuitem1:hover {
	background: linear-gradient(90deg, #933318, #ff9923);
	transition: margin-bottom .2s linear, background .3s linear, font-weight .3s linear;
}

.menuitem1active {
	background: linear-gradient(90deg, #933318, #ff9923);
	font-weight:bold;
	margin-bottom: -20px;
}

/* "You are here": the top-level category (cat1) of the page currently open — set by JS from a
   per-page marker inside <main> (see index.php / the categorie & produit views), so it survives
   turbonav swaps. Persistent (unlike the hover/open .menuitem1active), it keeps a category or
   product page's tab visibly active. Same brand gradient as the active/hover state so it reads
   as "selected"; a bottom accent bar keeps it distinguishable even under the hover gradient. */
.menuitem-current {
	background: linear-gradient(90deg, #933318, #ff9923);
	font-weight: bold;
	box-shadow: inset 0 -3px 0 rgba(255,255,255,.85);
}


.menuitemnone {
	cursor: default;
	background-color:#261e19;
	height:40px;
}

/* Mobile-nav controls live in the header markup at all widths; hide them on
   desktop. css.mobile.php (loaded after) reveals them below 960px. */
#navtoggle, #nav-backdrop {
	display: none;
}

/* ── "Nos produits" cascade flyout (vertical 3-level hover menu; js/megaflyout.js drives
   open/close + the intent-triangle). Complements the megamenu; desktop-hover only. ── */
#nosproduits { position: relative; }
#prodflyout { position: absolute; top: 100%; left: 0; z-index: 1200; display: none; }
#nosproduits.flyout-open #prodflyout { display: block; }
/* While the flyout is open, lift its container above the sibling top-nav items: those carry
   z-index:1 (css.php) and would otherwise paint over the flyout's cascading columns 2/3, which
   extend rightward beneath them. #nosproduits is position:relative, so this just needs a z-index. */
body.prodflyout-open #nosproduits { z-index: 10; }
/* the trigger's chevron (direct-child img) points right; spin it 90° clockwise to point down
   while the flyout is open — animated. (Flyout-row chevrons are nested deeper, so > img is safe.) */
#nosproduits > img { transition: transform .2s ease; }
#nosproduits.flyout-open > img { transform: rotate(90deg); }

.flyout-col {
	list-style: none; margin: 0; padding: 0;   /* flush rows → hover/active highlight reaches the panel edges */
	background: #fff; box-shadow: var(--shadow-panel);
	min-width: 232px;
	/* NO overflow here: overflow-y:auto would force overflow-x to auto too (CSS spec), which would
	   CLIP each column's cascading child submenu inside it (+ a stray scrollbar). Lists are short
	   (≤14), so submenus just float free like a native multi-level menu. */
}
/* level 1 sits under the trigger (normal flow); levels 2 & 3 fly out to the right of their row */
.flyout-col--2, .flyout-col--3 { position: absolute; top: 0; left: 100%; display: none; }
/* …unless there's no room on the right — JS flips them to the left of their row (edge-aware), so a
   deep drill never spills past the viewport and grows the page (the horizontal-scrollbar bug). */
.flyout-col.flip-left { left: auto; right: 100%; }
.flyout-li { position: relative; padding: 0; margin: 0; }   /* reset the global `li{padding:0 0 0 .25em}` so rows sit flush */
.flyout-li.is-active > .flyout-col { display: block; }

.flyout-row {
	display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--space-2);
	padding: 6px var(--space-2); color: #1d2939; text-align: left;
	font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
/* No link underline in any state — the white→gradient highlight is the hint. #id beats the
   global a:hover{underline} (which otherwise wins over a plain .class on hover). */
#prodflyout a, #prodflyout a:hover { text-decoration: none; }
/* Always back thumbnails with white: most product/category images are NOT transparent, so a
   consistent white tile makes them read the same on a plain row AND on the gradient-active row. */
.flyout-row__img { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; padding: 3px; box-sizing: border-box; }
.flyout-row__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.flyout-row__name { overflow: hidden; text-overflow: ellipsis; }
.flyout-row__chev { display: flex; color: #98a2b3; }
.flyout-row__chev .icon { width: 14px; height: 14px; }
.flyout-row:hover { background: #f1f3f5; }                 /* plain hover feedback */
.flyout-li.is-active > .flyout-row { background: var(--brand-gradient); color: #fff; }  /* the open path */
.flyout-li.is-active > .flyout-row .flyout-row__chev { color: #fff; }

/* Desktop hover only — touch keeps the existing drawer; "Nos produits" tap → /produits/.
   Also hidden below the width where a 3-column cascade can't fit (≈ left offset + 3×232px),
   so a narrow window never gets the cascade (and never its horizontal scrollbar). */
@media (hover: none), (max-width: 860px) { #prodflyout { display: none !important; } }