/* ============================================================
   Novadev — Inoxsa Products : shortcode [inoxsa_mega_menu]
   Contenu du méga menu : onglets marques + grille produits.
   Le conteneur (div blanche sous la nav) est géré par le thème ;
   ce fichier ne style que l'intérieur.
   ============================================================ */
.ndv-mega{
	--ndv-accent: var(--e-global-color-uicore_primary, #003C71);
	--ink:#101828;
	--ink-mid:#475467;
	--ink-light:#98a2b3;
	--cloud:#f9fafb;
	--line:#eaecf0;
	font-family:'Manrope',sans-serif;
	display:flex;
	min-height:280px;
}

/* ---------- Colonne de gauche : onglets marques ---------- */
.ndv-mega-tabs{
	width:230px;
	flex-shrink:0;
	border-right:1px solid var(--line);
	display:flex;
	flex-direction:column;
	padding:2rem 0;
	gap:.4rem;
}
.ndv-mega-tab-wrap{
	display:flex;
	align-items:center;
	gap:.9rem;
	margin-right:1.5rem;
	padding:.95rem 1rem;
	border-radius:10px;
	cursor:pointer;
	transition:background .15s;
	outline:none;
}
.ndv-mega-tab-wrap:hover,
.ndv-mega-tab-wrap:focus-visible{
	background:var(--cloud);
}
.ndv-mega-tab-wrap.is-active{
	background:color-mix(in srgb, var(--ndv-accent) 8%, #fff);
}

.ndv-mega-tab-link{
	display:flex;
	align-items:center;
	justify-content:center;
	width:24px;
	flex-shrink:0;
	margin-left:auto;
	color:var(--ink-light);
	transition:color .15s;
}
.ndv-mega-tab-wrap:hover .ndv-mega-tab-link,
.ndv-mega-tab-wrap.is-active .ndv-mega-tab-link{
	color:var(--ndv-accent);
}
.ndv-mega-tab-link svg{
	width:14px;
	height:14px;
}

.ndv-mega-tab-icon{
	width:40px;
	height:40px;
	border-radius:10px;
	background:var(--cloud);
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	transition:background .15s;
}
.ndv-mega-tab-icon svg{
	width:19px;
	height:19px;
	color:var(--ink-light);
	transition:color .15s;
}
/* Force la couleur même si le SVG collé définit ses propres
   fill/stroke (icônes "outline" ou "pleines"). On force les deux
   en currentColor plutôt que d'en désactiver un, pour couvrir
   les deux styles d'icônes sans rendre l'icône invisible. */
.ndv-mega-tab-icon svg,
.ndv-mega-tab-icon svg *{
	fill:currentColor !important;
	stroke:currentColor !important;
}
.ndv-mega-tab-wrap.is-active .ndv-mega-tab-icon{
	/* background:var(--ndv-accent); */
}
.ndv-mega-tab-wrap.is-active .ndv-mega-tab-icon svg{
	color:var(--ndv-accent);
}

.ndv-mega-tab-text{
	display:flex;
	flex-direction:column;
	gap:.05rem;
}
.ndv-mega-tab-name{
	font-size:.92rem;
	font-weight:700;
	color:var(--ink-mid);
	letter-spacing:-.02em;
	transition:color .15s;
}
.ndv-mega-tab-wrap.is-active .ndv-mega-tab-name{
	color:var(--ndv-accent);
}
.ndv-mega-tab-desc{
	font-size:.71rem;
	color:var(--ink-light);
	font-weight:400;
}

/* ---------- Colonne de droite : panneaux produits ---------- */
.ndv-mega-panels{
	flex:1;
	padding:2rem 0 2rem 2.5rem;
}
.ndv-mega-panel{
	display:none;
}
.ndv-mega-panel.is-active{
	display:block;
}

.ndv-mega-head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	margin-bottom:1.25rem;
	padding-bottom:.75rem;
	border-bottom:1px solid var(--line);
	gap:1rem;
}
.ndv-mega-head-label{
	font-size:.86rem;
	text-transform:uppercase;
	letter-spacing:.12em;
	font-weight:700;
	color:var(--ink-light);
}
.ndv-mega-head-meta{
	display:flex;
	align-items:baseline;
	gap:1.25rem;
}
.ndv-mega-head-count{
	font-size:.86rem;
	color:var(--ink-light);
	font-weight:500;
}
.ndv-mega-head-link{
	display:inline-flex;
	align-items:center;
	gap:.35rem;
	font-size:.86rem;
	font-weight:700;
	color:var(--ndv-accent);
	text-decoration:none;
	transition:gap .2s;
}
.ndv-mega-head-link:hover{
	gap:.55rem;
}
.ndv-mega-head-link svg{
	width:11px;
	height:11px;
}

/* Grille de cards produits */
.ndv-mega-grid{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:.7rem;
}
.ndv-mega-card{
	display:flex;
	flex-direction:column;
	gap:.2rem;
	background:#fff;
	border:1px solid var(--line);
	border-radius:6px;
	padding:1rem 1.05rem 1.05rem;
	text-decoration:none;
	cursor:pointer;
	transition:border-color .2s;
}
.ndv-mega-card:hover{
	border-color:#c9c9c9;
}
.ndv-mega-card-name{
	font-size:.86rem;
	font-weight:700;
	color:var(--ink);
	letter-spacing:-.02em;
	transition:color .2s;
}
.ndv-mega-card:hover .ndv-mega-card-name{
	color:var(--ndv-accent);
}
.ndv-mega-card-desc{
	font-size:.8rem;
	color:var(--ink-light);
	line-height:1.5;
}
.ndv-mega-card-cta{
	display:flex;
	align-items:center;
	gap:.25rem;
	font-size:.76rem;
	font-weight:700;
	color:var(--ndv-accent);
	margin-top:.4rem;
}
.ndv-mega-card-cta svg{
	width:10px;
	height:10px;
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
	.ndv-mega-grid{
		grid-template-columns:repeat(3,1fr);
	}
}
@media(max-width:860px){
	.ndv-mega{
		flex-direction:column;
	}
	.ndv-mega-head{
		flex-wrap:wrap;
		gap:.5rem;
	}
	.ndv-mega-tabs{
		width:100%;
		flex-direction:row;
		flex-wrap:wrap;
		border-right:none;
		border-bottom:1px solid var(--line);
		padding:1rem;
		gap:.5rem;
	}
	.ndv-mega-tab-wrap{
		margin-right:0;
	}
	.ndv-mega-panels{
		padding:1.5rem 1rem;
	}
	.ndv-mega-grid{
		grid-template-columns:repeat(2,1fr);
	}
}
@media(max-width:480px){
	.ndv-mega-grid{
		grid-template-columns:1fr;
	}
}