/* Méga-menu (megamenu.php) — 02/11/2026 : colonnes de rayons, carte « À la une », marques phares, « Voir tout » */
.dp-mm { --dp-mm-marine: #0B1D51; --dp-mm-texte: #3D4B6B; --dp-mm-lien: #0369A1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 26px 8px 0; font-family: "Rubik", sans-serif; animation: dp-mm-entree .18s ease-out; }
@keyframes dp-mm-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dp-mm-haut { display: flex; gap: 32px; align-items: stretch; }
.dp-mm-cols { flex: 1; display: grid; grid-template-columns: repeat(var(--dp-mm-cols), minmax(0, 1fr)); gap: 8px 28px; }
.dp-mm-col { min-width: 0; }
.dp-mm-titre { display: block; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid #E6EEF5; color: var(--dp-mm-marine) !important; font: 600 15px/1.3 "Rubik", sans-serif; letter-spacing: .01em; text-decoration: none; }
a.dp-mm-titre:hover { color: var(--dp-mm-lien) !important; border-bottom-color: #00AEEF; }
.dp-mm-col ul { margin: 0; padding: 0; list-style: none; }
.dp-mm-col li { margin: 0; }
.dp-mm-col li > a:not(.dp-mm-mini) {
	display: inline-block; padding: 5px 0; color: var(--dp-mm-texte) !important; font: 400 14.5px/1.35 "Rubik", sans-serif; text-decoration: none;
	transition: color .15s, transform .15s;
}
.dp-mm-col li > a:not(.dp-mm-mini):hover, .dp-mm-col li > a:not(.dp-mm-mini):focus-visible { color: var(--dp-mm-lien) !important; transform: translateX(3px); }

/* « Les plus demandés » (familles avec peu de rayons) */
.dp-mm-mini { display: flex; align-items: center; gap: 12px; padding: 7px; margin: 0 0 6px; border-radius: 10px; color: var(--dp-mm-marine) !important; text-decoration: none; transition: background .15s; }
.dp-mm-mini:hover { background: #F3F8FB; }
.dp-mm-mini img { flex: 0 0 56px; width: 56px !important; height: 56px !important; object-fit: contain; border-radius: 8px; background: #FFFFFF; border: 1px solid #E6EEF5; }
.dp-mm-mini > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dp-mm-mini-nom { font: 400 13.5px/1.3 "Rubik", sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dp-mm-mini-prix, .dp-mm-mini-prix .amount { font: 600 13.5px/1.2 "Rubik", sans-serif !important; color: var(--dp-mm-marine) !important; }
.dp-mm-mini-prix small, .dp-mm-une-prix small { display: none; }

/* Carte « À la une » */
.dp-mm-une {
	position: relative; flex: 0 0 270px; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; overflow: hidden;
	background: linear-gradient(150deg, #0B1D51 0%, #0E3A7A 55%, #0369A1 100%); color: #FFFFFF !important; text-decoration: none;
	box-shadow: 0 10px 28px rgba(11, 29, 81, .18); transition: transform .2s, box-shadow .2s;
}
.dp-mm-une:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(11, 29, 81, .26); }
.dp-mm-une-etiquette { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font: 600 11.5px/1 "Rubik", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.dp-mm-une-photo { display: flex; align-items: center; justify-content: center; height: 150px; margin: 4px 0 6px; border-radius: 12px; background: #FFFFFF; }
.dp-mm-une-photo img { max-width: 86% !important; max-height: 132px !important; width: auto !important; height: auto !important; object-fit: contain; transition: transform .25s; }
.dp-mm-une:hover .dp-mm-une-photo img { transform: scale(1.04); }
.dp-mm-une-marque { color: #7FD6F7; font: 600 11.5px/1.2 "Rubik", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.dp-mm-une-nom { font: 500 15px/1.3 "Rubik", sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dp-mm-une-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.dp-mm-une-prix, .dp-mm-une-prix .amount, .dp-mm-une-prix bdi { color: #FFFFFF !important; font: 700 17px/1.2 "Rubik", sans-serif !important; }
.dp-mm-une-bouton { padding: 8px 14px; border-radius: 999px; background: #FFFFFF; color: #0B1D51; font: 600 13px/1 "Rubik", sans-serif; transition: background .15s, color .15s; }
.dp-mm-une:hover .dp-mm-une-bouton { background: #00AEEF; color: #FFFFFF; }

/* Bas : marques phares + voir tout */
.dp-mm-bas { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 14px 0 18px; border-top: 1px solid #E6EEF5; }
.dp-mm-bas-titre { flex: 0 0 auto; color: #6D758C; font: 500 12.5px/1 "Rubik", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.dp-mm-marques { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; flex: 1; }
.dp-mm-marques a { display: flex; align-items: center; height: 34px; text-decoration: none; }
.dp-mm-marques img { display: block; width: auto !important; height: 22px !important; max-width: 96px !important; filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s; }
.dp-mm-marques a[href*="/lego/"] img, .dp-mm-marques a[href*="/jbl/"] img, .dp-mm-marques a[href*="/hp/"] img { height: 30px !important; }
/* le widget « Code court » d'Elementor se rétrécissait à son contenu : le panneau prend toute la largeur */
.e-n-menu-content .elementor-widget-shortcode:has(.dp-mm) { width: 100%; flex: 1 1 100%; max-width: 100%; }
/* le prix des produits contient « En stock » (extension de stock) : inutile ici */
.dp-mm .stock { display: none !important; }
.dp-mm-marques a:hover img { filter: none; opacity: 1; }
.dp-mm-marques .dp-marque-texte { font: 600 15px/1 "Rubik", sans-serif; color: #8A93A6; }
.dp-mm-marques a:hover .dp-marque-texte { color: #0B1D51; }
.dp-mm-tout { flex: 0 0 auto; margin-left: auto; color: var(--dp-mm-lien) !important; font: 600 14px/1 "Rubik", sans-serif; text-decoration: none; }
.dp-mm-tout span { display: inline-block; transition: transform .15s; }
.dp-mm-tout:hover span { transform: translateX(4px); }

/* Voile derrière le panneau ouvert (megamenu.js) : sous l'en-tête collant (z-index 9000), au-dessus de la page */
.dp-mm-voile {
	position: fixed; inset: 0; z-index: 8990; background: rgba(11, 29, 81, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
}
body.dp-mm-ouvert .dp-mm-voile { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
@media (max-width: 767px) { .dp-mm-voile { display: none; } }
/* ombre sous le panneau ouvert : il se détache du voile */
@media (min-width: 768px) { .e-n-menu-content > *:has(.dp-mm) { box-shadow: 0 22px 40px -12px rgba(11, 29, 81, .35); border-radius: 0 0 18px 18px; } }

/* Tablette : la carte passe sous les colonnes */
@media (max-width: 1200px) {
	.dp-mm-haut { flex-direction: column; }
	.dp-mm-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* carte en bandeau : photo à gauche, marque et nom au milieu, prix et bouton à droite (la photo débordait de son
	   carré sur iPad, 02/11/2026) */
	.dp-mm-une {
		flex-basis: auto; display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: 4px 22px;
		grid-template-areas: "photo etiquette bas" "photo marque bas" "photo nom bas"; padding: 14px 20px 14px 14px;
	}
	.dp-mm-une-photo { grid-area: photo; width: 132px; height: 108px; margin: 0; }
	.dp-mm-une-photo img { max-width: 88% !important; max-height: 92px !important; }
	.dp-mm-une-etiquette { grid-area: etiquette; justify-self: start; }
	.dp-mm-bas { flex-wrap: wrap; row-gap: 10px; }
	.dp-mm-bas-titre { flex-basis: 100%; }
	.dp-mm-une-marque { grid-area: marque; }
	.dp-mm-une-nom { grid-area: nom; }
	.dp-mm-une-bas { grid-area: bas; flex-direction: column; align-items: flex-end; gap: 10px; margin: 0; padding: 0; }
}
/* Téléphone (menu en accordéon) : seulement les listes de rayons */
@media (max-width: 767px) {
	.dp-mm { padding: 6px 0 0; animation: none; }
	.dp-mm-cols { grid-template-columns: 1fr; gap: 18px; }
	.dp-mm-titre { margin-bottom: 6px; padding-bottom: 6px; }
	.dp-mm-col ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
	.dp-mm-col li > a:not(.dp-mm-mini) { padding: 7px 0; font-size: 14px; }
	.dp-mm-une, .dp-mm-bas .dp-mm-bas-titre, .dp-mm-marques, .dp-mm-col-produits { display: none; }
	.dp-mm-bas { margin-top: 6px; padding: 10px 0; border-top: 0; }
	.dp-mm-tout { margin-left: 0; }
}