/* Le fond réel de #dsn-area / #dsn-tabs est blanc : thème clair, pas d'overlay sombre */
.dsn-side-list {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 4px !important;
	padding: 2px !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	counter-reset: dsn-side-counter;
	padding-right: 70px !important;
}

.dsn-side-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px !important;
	padding: 5px 4px !important;
	margin: 0 !important;
	border-radius: 10px !important;
	border: 1.5px solid #e2e2e2 !important;
	background: #f7f7f7 !important;
	color: #333 !important;
	position: relative;
	text-align: center;
	white-space: normal !important;
	font-size: 11px !important;
	font-weight: 600;
	line-height: 1.3 !important;
	transition: border-color .15s, background .15s, color .15s;
}

/* Badge numéro — généré en CSS, ne crée pas d'élément DOM cliquable séparé */
.dsn-side-item::before {
	counter-increment: dsn-side-counter;
	content: counter(dsn-side-counter);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #e2e2e2;
	color: #555;
	font-size: 10px;
	font-weight: 800;
}

.dsn-side-item:hover { border-color: #999 !important; background: #efefef !important; }

/* Classe gérée par notre JS, indépendante du .active du module qui est retiré globalement */
.dsn-side-item.dsn-side-selected { border-color: #1a1a1a !important; background: #1a1a1a !important; color: #fff !important; }
.dsn-side-item.dsn-side-selected::before { background: rgba(255,255,255,.2); color: #fff; }

/* Check vert en badge coin quand la face a du contenu */
.dsn-side-item.dsn-side-has-content::after {
	content: '\f00c';
	font-family: 'FontAwesome';
	position: absolute;
	top: -6px;
	right: -6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #5cb85c;
	color: #fff;
	font-size: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

@media (max-width: 767px) {
	.dsn-side-list { grid-template-columns: repeat(3, 1fr) !important; padding: 10px !important; padding-right: 10px !important; }
}

/* Toujours visible (pas seulement au hover du canvas) */
#dsn-area .dsn-area-banner { display: block; }

/* Desktop : déplacé dans #dsn-tabs par JS */
@media (min-width: 1025px) {
	#dsn-area .dsn-area-banner { display: none !important; }
	#dsn-tabs > .dsn-area-banner { display: block !important; position: static !important; height: auto !important; padding: 0 0 16px !important; background: none; }
}

/* Mobile/tablette : sous le canvas (pas en overlay), fond blanc cohérent avec #dsn-area */
@media (max-width: 1024px) {
	#dsn-area .dsn-area-banner { position: static !important; height: auto !important; }
}
.dsn-footer-multi-sides {
	margin-top: 40px !important;
}

/* iOS Safari zoome la page au focus si le font-size du champ est < 16px */
#dsn-text-input {
	font-size: 16px !important;
}