/**
 * Styles de l'éditeur front-end.
 *
 * Chrome aligné sur le visualiseur (viewer.css) : mêmes variables, colonne
 * latérale, barre d’outils et cadre de carte — le thème hôte (tokens) reste
 * pour les listes ailleurs.
 */

.dmb-builder-root {
	/* Mêmes teintes que .dmb-shell-viewer (viewer.css). */
	--dmb-color-primary: #f2f2f2;
	--dmb-color-primary-hover: #ffffff;
	--dmb-color-secondary: #c9c9c9;
	--dmb-color-muted: #a7a7a7;
	--dmb-color-bg: #0f0f10;
	--dmb-color-surface: #17181b;
	--dmb-color-surface-alt: #202226;
	--dmb-color-border: #35383f;
	--dmb-color-border-soft: #2a2d33;
	--dmb-color-canvas: #e8e8e8;
	--dmb-color-canvas-border: #b9bcc3;
	--dmb-color-on-primary: #101112;
	--dmb-color-accent: #e5484d;
	--dmb-color-text-muted: #9aa0a6;
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
	background: var(--dmb-color-bg);
	color: var(--dmb-color-primary);
	border: 1px solid var(--dmb-color-border);
	border-radius: var(--dmb-radius-md);
	padding: 0;
	overflow: hidden;
	min-height: 0;
}

/* Badge version (admin) */
.dmb-builder-version-badge {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 999999;
	padding: 6px 8px;
	font: 12px/1.1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	color: rgba(255, 255, 255, 0.82);
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	pointer-events: none;
}

/* Verrouillage édition pendant l'aperçu d'animation.
 * Important : ne jamais appliquer opacity/filter/pointer-events sur un ancêtre
 * de "Donjon vivant", sinon ses boutons restent visuellement voilés. */
.dmb-builder-root.is-preview-locked .dmb-builder-sidebar--meta,
.dmb-builder-root.is-preview-locked .dmb-viewer-toolbar {
	pointer-events: none;
	opacity: 0.45;
	filter: grayscale(0.15);
}
/* La carte reste lisible + scrollable (pas de grisage ni blocage ici). */
.dmb-builder-root.is-preview-locked .dmb-stage-host,
.dmb-builder-root.is-preview-locked .dmb-stage-host * {
	pointer-events: auto;
	opacity: 1;
	filter: none;
}
/* Sidebar droite : griser uniquement les zones hors contrôles "Donjon vivant". */
.dmb-builder-root.is-preview-locked .dmb-builder-sidebar--tiles .dmb-builder-tiles-tabs-head,
.dmb-builder-root.is-preview-locked .dmb-builder-sidebar--tiles .dmb-builder-tiles-tab-panel > :not(.dmb-toolbar-living) {
	pointer-events: none;
	opacity: 0.45;
	filter: grayscale(0.15);
}
.dmb-builder-root.is-preview-locked .dmb-builder-sidebar--tiles .dmb-toolbar-living,
.dmb-builder-root.is-preview-locked .dmb-builder-sidebar--tiles .dmb-toolbar-living * {
	pointer-events: auto;
	opacity: 1;
	filter: none;
}

/* Bandeau explicite "aperçu en cours" */
.dmb-preview-lock-banner {
	position: fixed;
	right: 10px;
	bottom: 44px;
	z-index: 999999;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	max-width: min(520px, calc(100vw - 20px));
	background: rgba(0, 0, 0, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.dmb-preview-lock-banner[hidden] {
	display: none;
}
.dmb-preview-lock-banner__text {
	font-size: 12px;
	line-height: 1.25;
	opacity: 0.92;
}
.dmb-preview-lock-banner__btn {
	white-space: nowrap;
}
/* Grille 3 colonnes = même logique que .dmb-viewer-layout (viewer plein écran). */
.dmb-builder-workspace {
	display: grid;
	grid-template-areas: "bmeta bcanvas btiles";
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 320px);
	grid-template-rows: minmax(0, 1fr);
	gap: 0;
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	align-items: stretch;
}
.dmb-builder-sidebar--meta {
	grid-area: bmeta;
	overflow: visible;
	position: relative;
	z-index: 12;
	container-type: inline-size;
}
.dmb-builder-sidebar--tiles {
	grid-area: btiles;
}
/* Colonnes latérales = même esprit que .dmb-viewer-sidebar. */
.dmb-builder-sidebar {
	height: 100%;
	min-height: 0;
	padding: 12px;
	box-sizing: border-box;
	background: #101113;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
}
.dmb-builder-sidebar--meta {
	border-right: 1px solid var(--dmb-color-border-soft);
	/* Important pour la bulle avatar flottante en mode public/embed :
	 * elle doit pouvoir déborder vers la grille sans être recadrée. */
	overflow: visible;
}
.dmb-builder-sidebar--tiles {
	border-left: 1px solid var(--dmb-color-border-soft);
}
.dmb-builder-sidebar--tiles .dmb-builder-tiles-tabs-root {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.dmb-builder-tiles-tab-panel {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-top: 8px;
}
.dmb-builder-tiles-tab-panel[hidden] {
	display: none !important;
}
.dmb-builder-sidebar--tiles .dmb-builder-tiles-tab-panel .dmb-palette {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.dmb-builder-sidebar--tiles .dmb-builder-tiles-tab-panel .dmb-palette-grid {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--dmb-color-border) transparent;
}
.dmb-builder-tiles-tabs-head {
	display: flex;
	gap: 0;
	padding: 8px 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.dmb-builder-tiles-tab {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 10px;
	font-size: 13px;
	line-height: 1.1;
	border-radius: 10px 10px 0 0;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-bottom: 0;
	color: var(--dmb-color-text, #fff);
	cursor: pointer;
}
.dmb-builder-tiles-tab + .dmb-builder-tiles-tab {
	margin-left: 6px;
}
.dmb-builder-tiles-tab[aria-selected="true"] {
	background: rgba(23, 24, 27, 0.98);
	border-color: rgba(255, 210, 120, 0.38);
	box-shadow: none;
	position: relative;
	top: 1px;
}
.dmb-builder-tiles-tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: rgba(23, 24, 27, 0.98);
}
.dmb-builder-tiles-tab-panel {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}
/* Page /donjon/edit/ : plein écran (même principe que le viewer en blank). */
.dmb-shell-editor .dmb-builder-root {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
}
/* Shortcode builder (hors shell blank) : hauteur bornée pour activer
 * un vrai overflow interne de la carte (scroll vertical/horizontal). */
.dmb-builder-root.dmb-builder-root--embed {
	width: 100%;
	min-height: 320px;
	height: calc(100dvh - var(--dmb-admin-offset, 0px));
}
/* Fullscreen editor: force root corners flat, no bleed. */
.dmb-builder-container.dmb-builder-root {
	border-radius: 0 !important;
}
.dmb-shell-editor .dmb-builder-workspace {
	flex: 1 1 auto;
	min-height: 0;
}
.dmb-shell-editor .dmb-main {
	min-height: 0;
	height: auto;
	display: flex;
	flex-direction: column;
}
/* Méta (colonne gauche) : scroll si besoin, sans cap artificiel type « pavé ». */
.dmb-shell-editor .dmb-builder-sidebar--meta {
	overflow: visible;
	scrollbar-width: thin;
	scrollbar-color: var(--dmb-color-border) transparent;
}
.dmb-builder-meta-panel {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: visible;
}
.dmb-builder-meta-panel .dmb-meta-row--title .dmb-builder-title-input {
	font-size: clamp(13px, 0.85vw, 16px);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.2;
}
.dmb-builder-meta-panel .dmb-meta-row--title .dmb-meta-label {
	min-width: 0;
}

/* Palette : contenu de la colonne droite (cf. .dmb-palette-item). */
.dmb-palette {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	max-height: none;
	overflow: hidden;
	min-height: 0;
	min-width: 0;
}
.dmb-builder-root .dmb-palette h3 {
	position: relative;
	margin: 0 0 12px;
	padding-left: 12px;
	font-family: var(--dmb-font-heading);
	font-size: var(--dmb-font-size-sm);
	color: #f8f8f8;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-weight: 700;
}
.dmb-builder-root .dmb-palette h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 70%;
	transform: translateY(-50%);
	border-radius: 99px;
	background: linear-gradient(180deg, #e5484d, #f59e0b);
	box-shadow: 0 0 8px rgba(229, 72, 77, 0.28);
}
.dmb-palette-help {
	margin: -4px 0 10px;
	font-size: 12px;
	line-height: 1.35;
	color: #b4bac5;
}
.dmb-palette-controls {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0 0 10px;
}
.dmb-palette-categories-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 12px;
	align-items: center;
}
.dmb-palette-categories-inline .dmb-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}
.dmb-palette-categories-inline .dmb-check__label {
	font-weight: 600;
	white-space: nowrap;
	font-size: 11px;
}
.dmb-palette-categories-inline .dmb-palette-category {
	accent-color: var(--dmb-color-accent);
}
.dmb-palette-mobile-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--dmb-color-secondary);
}
.dmb-palette-mobile-filter input[type="checkbox"] {
	accent-color: var(--dmb-color-accent);
}
.dmb-palette-type {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--dmb-color-border);
	border-radius: var(--dmb-radius-sm);
	background: #101113;
	color: var(--dmb-color-primary);
	font: 400 var(--dmb-font-size-sm) / 1.3 var(--dmb-font-body);
}
.dmb-palette-type:focus {
	outline: 2px solid var(--dmb-color-accent);
	outline-offset: 1px;
	border-color: var(--dmb-color-accent);
}
.dmb-palette-grid {
	display: grid;
	gap: 8px;
	align-content: start;
}
.dmb-palette-section {
	grid-column: 1 / -1;
	margin: 8px 0 2px;
	padding-top: 6px;
	border-top: 1px solid var(--dmb-color-border-soft);
	font: 700 11px/1.2 var(--dmb-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dmb-color-muted);
}
.dmb-palette-section-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.dmb-palette-section-grid.is-jeton {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dmb-palette-empty {
	grid-column: 1 / -1;
	margin: 10px 0;
	color: var(--dmb-color-muted);
	font: 500 12px/1.3 var(--dmb-font-body);
}
/* Cartes de la palette : volontairement minimales — juste la miniature.
 * Le titre (attribut title) fournit le libellé au survol, la largeur est
 * portée par la grille parente (.dmb-palette-grid). Pas de padding ni de
 * bordure pour laisser la tuile se présenter « à nu », comme elle
 * apparaîtra dans le donjon. */
.dmb-palette-item {
	box-sizing: border-box;
	appearance: none;
	width: 100%;
	background: #ffffff;
	border: 1px solid #2f333a;
	border-radius: 8px;
	padding: 10px 8px 8px;
	text-align: center;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	-webkit-transition: transform var(--dmb-transition);
	transition: transform var(--dmb-transition);
}
.dmb-palette-item:focus-visible {
	outline: 2px solid rgba(229, 72, 77, 0.92);
	outline-offset: 2px;
	border-color: #e5484d;
}
.dmb-palette-item:hover {
	transform: translateY(-1px);
	border-color: #e5484d;
	box-shadow: 0 0 0 1px rgba(229, 72, 77, .35);
}
.dmb-palette-item,
.dmb-palette-item * {
	color: #111111;
}
.dmb-palette-item img {
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: 0 auto;
	image-rendering: pixelated;
	pointer-events: none;
}
.dmb-palette-thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Les demi-tuiles (90x180 / 180x90) sont rendues dans le même cadre carré
 * que les tuiles complètes, centrées. Cela homogénéise la lecture visuelle
 * quelle que soit l'orientation. */
.dmb-palette-thumb.is-demi img {
	width: 86%;
	height: 86%;
	object-fit: contain;
}
/* Aperçu "vivant" des jetons mobiles dans la palette. */
.dmb-palette-thumb.is-mobile-preview img {
	will-change: transform;
	transform-origin: center bottom;
}
.dmb-palette-thumb.is-mobile-preview.gait-walk img {
	animation: dmb-palette-mobile-walk 1.05s ease-in-out infinite;
}
.dmb-palette-thumb.is-mobile-preview.gait-slide img {
	animation: dmb-palette-mobile-slide 1.35s ease-in-out infinite;
}
@keyframes dmb-palette-mobile-walk {
	0%, 100% { transform: translateY(0) rotate(0deg) scaleX(1) scaleY(1); }
	25% { transform: translateY(-2px) rotate(-1.8deg) scaleX(1.02) scaleY(0.98); }
	50% { transform: translateY(-3px) rotate(0deg) scaleX(1) scaleY(0.96); }
	75% { transform: translateY(-2px) rotate(1.8deg) scaleX(0.98) scaleY(1); }
}
@keyframes dmb-palette-mobile-slide {
	0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
	50% { transform: translateY(-1px) scaleX(1.06) scaleY(0.94); }
}

.dmb-main {
	grid-area: bcanvas;
	/* Comme .dmb-viewer-main : barre d’outils + carte. */
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	min-height: 0;
	align-self: stretch;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
/* Même hauteur relative que l’intégration shortcode du viewer. */
.dmb-main .dmb-viewer-mapcell {
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
}
.dmb-main .dmb-viewer-mapcell > .dmb-viewer-root {
	flex: 1 1 auto;
	min-height: 0;
}
/* Méta : même carte que `.dmb-viewer-header` (viewer.css) + champs éditables. */
.dmb-builder-meta-panel .dmb-meta-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	width: 100%;
}
.dmb-builder-meta-panel .dmb-meta-row--title {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}
.dmb-builder-inline {
	position: relative;
	display: block;
	border: 1px dashed transparent;
	border-radius: var(--dmb-radius-sm);
	padding: 6px;
	cursor: text;
	transition: border-color 120ms ease, background-color 120ms ease;
}
.dmb-builder-inline:hover,
.dmb-builder-inline:focus-visible {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.03);
	outline: none;
}
.dmb-builder-inline.is-editing {
	border-color: rgba(229, 72, 77, 0.45);
	background: rgba(229, 72, 77, 0.08);
}
.dmb-builder-inline-affordance {
	position: absolute;
	top: 6px;
	right: 8px;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 0 5px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #c9ced9;
	background: rgba(18, 22, 34, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	opacity: .92;
	white-space: nowrap;
	transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
	pointer-events: auto;
	cursor: pointer;
}
.dmb-builder-inline-affordance::after {
	content: "";
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .06em;
	transition: max-width 140ms ease, opacity 120ms ease, margin-left 140ms ease;
}
.dmb-builder-inline:hover .dmb-builder-inline-affordance,
.dmb-builder-inline:focus-visible .dmb-builder-inline-affordance,
.dmb-builder-inline.is-editing .dmb-builder-inline-affordance {
	background: rgba(56, 16, 18, 0.95);
	border-color: rgba(229, 72, 77, 0.75);
	color: #ffffff;
}
.dmb-builder-inline-affordance:focus-visible {
	outline: 2px solid rgba(229, 72, 77, 0.9);
	outline-offset: 1px;
}
.dmb-builder-inline.is-editing .dmb-builder-inline-affordance {
	background: rgba(229, 72, 77, 0.26);
	border-color: rgba(229, 72, 77, 0.75);
}
.dmb-builder-inline.is-editing .dmb-builder-inline-affordance {
	display: none;
}
.dmb-builder-inline:hover .dmb-builder-inline-affordance::after,
.dmb-builder-inline:focus-visible .dmb-builder-inline-affordance::after,
.dmb-builder-inline.is-editing .dmb-builder-inline-affordance::after {
	content: attr(data-edit-label);
	max-width: 72px;
	opacity: 1;
	margin-left: 4px;
}
.dmb-builder-inline-value {
	margin: 0;
}
.dmb-builder-inline--title {
	padding: 6px 8px;
}
.dmb-builder-inline--title .dmb-builder-inline-title {
	margin-right: 68px;
}
.dmb-builder-meta-panel .dmb-builder-inline--title .dmb-builder-inline-title {
	/* Le titre inline du builder est un <h1> et hérite du style viewer.
	 * On garde l'harmonie visuelle, mais en version compacte côté builder. */
	font-size: clamp(14px, 1.05vw, 18px);
	letter-spacing: 0.01em;
	line-height: 1.15;
	padding-left: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dmb-builder-meta-panel .dmb-builder-inline--title .dmb-builder-inline-title::before {
	width: 4px;
	height: 62%;
	box-shadow: 0 0 8px rgba(229, 72, 77, 0.22);
}
.dmb-builder-inline--author .dmb-viewer-author {
	margin: 0;
}
.dmb-builder-inline.is-empty .dmb-builder-inline-value {
	color: var(--dmb-color-muted, #9aa0a6);
	font-style: normal;
}
.dmb-builder-inline .dmb-meta-input {
	width: 100%;
}
.dmb-builder-inline-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 8px;
}
.dmb-builder-inline-actions[hidden] {
	display: none;
}
.dmb-builder-inline--description {
	padding-top: 26px;
}
.dmb-builder-inline--description .dmb-meta-textarea {
	min-height: 7.2em;
}
.dmb-builder-inline--description.is-empty .dmb-dm-speech__text {
	color: var(--dmb-color-muted, #9aa0a6);
	font-style: italic;
}
.dmb-builder-meta-panel .dmb-meta-row--block {
	flex-direction: column;
	align-items: stretch;
}
.dmb-builder-meta-panel .dmb-meta-row--dm {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 0;
	margin: 0;
	border-radius: 0;
	background: transparent;
	border: 0;
}
.dmb-builder-primary-actions {
	grid-template-columns: 1fr 1fr;
}
.dmb-builder-details {
	gap: 12px;
	overflow: visible;
}
.dmb-builder-edit-controls {
	display: grid;
	gap: 10px;
	padding-top: 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dmb-builder-public-link {
	display: grid;
	gap: 6px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dmb-builder-public-link-label {
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #cbd5e1;
}
.dmb-builder-public-link-anchor {
	font-size: 12px;
	word-break: break-all;
	color: #93c5fd;
	text-decoration: underline;
}
.dmb-builder-details-toggle {
	min-height: 36px;
}
.dmb-builder-share-hint {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--dmb-color-muted, #9aa0a6);
}
.dmb-builder-share {
	margin-top: 2px;
}
.dmb-builder-dm-preview {
	display: block;
}
.dmb-builder-dm-preview .dmb-dm-hero__stage {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	position: relative;
}
.dmb-builder-dm-preview .dmb-dm-avatar-block,
.dmb-builder-dm-preview .dmb-builder-avatar-preview {
	align-self: start;
}
.dmb-builder-dm-preview .dmb-dm-speech {
	width: 100%;
	position: relative;
	z-index: 25;
}
.dmb-builder-dm-preview .dmb-dm-speech__teaser {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-right: 12px;
}
.dmb-builder-dm-preview .dmb-dm-speech__dots {
	display: none;
}
.dmb-builder-dm-preview .dmb-dm-speech__teaser::before {
	content: "✎";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: rgba(18, 22, 34, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #f6f7fb;
	font-size: 12px;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}
.dmb-builder-dm-preview .dmb-dm-speech__teaser::after {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 14px;
	height: 24px;
	color: #16151b;
	font-size: 28px;
	font-weight: 900;
	font-family: var(--dmb-font-heading);
	font-style: italic;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.35);
	line-height: 1;
	animation: dmb-builder-exclaim-bob 1.15s ease-in-out infinite;
}
.dmb-builder-dm-preview .dmb-dm-speech__teaser:hover::before,
.dmb-builder-dm-preview .dmb-dm-speech__teaser:focus-visible::before {
	border-color: rgba(229, 72, 77, 0.72);
	background: rgba(56, 16, 18, 0.95);
}
.dmb-builder-dm-preview .dmb-dm-speech__teaser:hover::after,
.dmb-builder-dm-preview .dmb-dm-speech__teaser:focus-visible::after {
	animation-duration: 0.7s;
}
@keyframes dmb-builder-exclaim-bob {
	0%, 100% {
		transform: translateY(0) scale(1);
		opacity: .95;
	}
	50% {
		transform: translateY(-2px) scale(1.08);
		opacity: 1;
	}
}
.dmb-builder-dm-preview .dmb-dm-speech__text {
	max-height: min(20vh, 130px);
}
.dmb-builder-dm-preview .dmb-dm-speech {
	margin-top: 0;
}
/* Builder: bulle hors flux pour garder une hauteur de sidebar stable.
 * L'ouverture/fermeture ne doit pas repousser les blocs suivants (partage). */
.dmb-builder-dm-preview.dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar {
	position: absolute !important;
	top: 4px;
	left: calc(60cqi + 10px);
	width: min(18rem, calc(100vw - 420px));
	max-width: 24rem;
	z-index: 30;
	right: auto;
	margin: 0;
	pointer-events: auto;
}
.dmb-builder-dm-preview.dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar .dmb-dm-speech__bubble {
	width: 100%;
}
.dmb-builder-dm-preview.dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar.dmb-dm-speech--collapsed {
	width: auto;
}
.dmb-builder-speech-body {
	position: relative;
	padding: 6px;
}
.dmb-builder-dm-preview .dmb-dm-speech__panel {
	padding-top: 6px;
	padding-right: 6px;
}
.dmb-builder-dm-preview .dmb-dm-speech__close {
	top: 8px;
	right: 28px;
}
.dmb-builder-speech-edit {
	position: relative;
	margin-top: 4px;
	margin-right: 4px;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(15, 18, 28, 0.78);
	color: #f5f6fb;
	cursor: pointer;
	line-height: 1;
}
.dmb-builder-speech-edit:hover {
	border-color: rgba(229, 72, 77, 0.65);
}
.dmb-builder-speech-editor {
	margin-top: 6px;
	padding: 0 4px 4px;
	display: grid;
	gap: 8px;
}
.dmb-builder-speech-editor[hidden] {
	display: none;
}
.dmb-dm-speech__text[hidden] {
	display: none !important;
}
.dmb-builder-speech-editor .dmb-meta-textarea {
	min-height: 6.2em;
	background: transparent;
	border-color: rgba(18, 25, 38, 0.22);
	color: inherit;
}
.dmb-builder-speech-editor-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}
.dmb-dm-speech__text.is-empty {
	color: var(--dmb-color-muted, #9aa0a6);
	font-style: italic;
	cursor: pointer;
}
.dmb-dm-avatar-label-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dmb-dm-avatar-hint {
	margin: 0;
	font-size: 11px;
	line-height: 1.35;
	color: #a0a0a0;
}
.dmb-dm-avatar-selector {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dmb-builder-avatar-preview {
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.dmb-builder-avatar-preview:hover .dmb-dm-avatar-wrap {
	border-color: rgba(224, 177, 90, 0.65);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
	transform: translateY(-1px);
}
.dmb-builder-avatar-preview:focus-visible {
	outline: 2px solid rgba(224, 177, 90, 0.95);
	outline-offset: 2px;
}
.dmb-builder-avatar-preview .dmb-dm-avatar-wrap {
	width: 100%;
	max-width: none;
}
.dmb-builder-dm-preview .dmb-dm-avatar {
	width: 60cqi;
	max-width: 100%;
}
.dmb-dm-avatar-open {
	width: 100%;
	justify-content: center;
}
.dmb-dm-avatar-fallback {
	padding: 0 8px;
	font-size: 11px;
	line-height: 1.25;
	text-align: center;
	color: #d6d8de;
}
.dmb-meta-label {
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #c9c9c9;
	flex: 0 0 auto;
	min-width: 56px;
}
.dmb-meta-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid var(--dmb-color-border);
	border-radius: var(--dmb-radius-sm, 4px);
	background: #101113;
	font: inherit;
	color: #f0f0f0;
}
.dmb-meta-input:focus {
	outline: 2px solid var(--dmb-color-accent, #7a5cff);
	outline-offset: 1px;
	border-color: var(--dmb-color-accent, #7a5cff);
}
.dmb-meta-textarea {
	resize: vertical;
	min-height: 6.5em;
	line-height: 1.4;
}
/* Barre : en tête de colonne — au-dessus de la scène (évite toute superposition
 * d’un thème / calque sur les boutons). */
.dmb-main .dmb-viewer-toolbar {
	position: relative;
	z-index: 3;
}
/* Barre : styles de structure = viewer.css (`.dmb-viewer-toolbar` + `__inner`). */
.dmb-main .dmb-viewer-toolbar .dmb-spacer {
	flex: 1 1 auto;
}
.dmb-builder-sidebar--meta .dmb-minimap-slot {
	padding-top: 8px;
}
.dmb-main .dmb-builder-selection-actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px;
	border-radius: 10px;
	background: transparent;
	border: 1px solid transparent;
	transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
	flex-wrap: nowrap;
	position: relative;
	overflow: visible;
}
.dmb-main .dmb-builder-selection-actions.is-active {
	background: linear-gradient(180deg, rgba(245, 186, 73, 0.42), rgba(189, 128, 25, 0.34));
	border-color: rgba(255, 210, 120, 0.65);
	box-shadow: 0 0 0 1px rgba(255, 214, 130, 0.32), 0 8px 20px rgba(55, 36, 6, 0.42);
}
.dmb-main .dmb-viewer-toolbar__inner .button {
	padding: 5px 9px;
}
.dmb-main .dmb-builder-selection-actions .button {
	padding: 4px 7px;
	font-size: 12px;
	line-height: 1.15;
}

/* Toolbar contextuelle : actions inline (pas de menu déroulant). */
.dmb-main .dmb-builder-selection-actions .button.is-icon-only {
	min-width: 28px;
	padding: 4px 6px;
	text-align: center;
	font-weight: 700;
}
.dmb-builder-share-actions {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-left: 2px;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.dmb-publish-toggle-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
.dmb-publish-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #e5e7eb;
	white-space: nowrap;
}
.dmb-publish-status {
	font-size: 11px;
	color: #cbd5e1;
}
.dmb-publish-toggle-input {
	accent-color: #22c55e;
}
.dmb-main .dmb-viewer-toolbar__inner .button:disabled,
.dmb-main .dmb-viewer-toolbar__inner .button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}
.dmb-main .dmb-viewer-toolbar__inner .dmb-btn-view {
	padding: 6px 10px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.dmb-main .dmb-viewer-toolbar__inner .dmb-btn-view::before {
	content: '↗';
	font-size: 1em;
	line-height: 1;
}
.dmb-main .dmb-viewer-toolbar__inner .dmb-btn-resend-links {
	border-color: rgba(14, 165, 233, 0.4);
	color: #d9f2ff;
}
.dmb-main .dmb-viewer-toolbar__inner .dmb-btn-resend-links:hover {
	background: rgba(14, 165, 233, 0.14);
	border-color: rgba(14, 165, 233, 0.68);
	color: #ffffff;
}
.dmb-main .dmb-viewer-toolbar__inner .dmb-btn-unpublish {
	border-color: rgba(229, 72, 77, 0.45);
	color: #ffd5d6;
}
.dmb-main .dmb-viewer-toolbar__inner .dmb-btn-unpublish:hover {
	background: rgba(229, 72, 77, 0.16);
	border-color: rgba(229, 72, 77, 0.7);
	color: #fff;
}

/* Même scroll / bordure / fond clair que le viewer (`.dmb-viewer-root` dans viewer.css). */
.dmb-main .dmb-stage-host.dmb-viewer-root {
	position: relative;
	max-height: none;
}
.dmb-btn-recenter-overlay {
	position: absolute;
	top: 15px;
	right: 30px;
	z-index: 12;
	min-width: 0;
	height: 22px;
	padding: 0 8px !important;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	letter-spacing: 0;
	text-indent: 0;
	white-space: nowrap;
	font-family: inherit;
}
/* Pendant le pan : curseur « grabbing » forcé sur le conteneur ET ses
 * enfants (le canvas Konva inclus), sans quoi Chrome conserve parfois le
 * curseur par défaut lorsque le pointeur passe sur le canvas enfant. */
.dmb-stage-host.is-panning,
.dmb-stage-host.is-panning * {
	cursor: grabbing !important;
}
/* Scrollbars : héritées de `.dmb-viewer-root` (viewer.css). */

.dmb-stage {
	display: inline-block;
}

.dmb-dialog[hidden] { display: none; }
.dmb-dialog {
	position: fixed;
	inset: 0;
	background: rgba(17, 17, 17, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.dmb-dm-avatar-modal[hidden] {
	display: none;
}
.dmb-dm-avatar-modal {
	position: fixed;
	inset: 0;
	background: rgba(6, 7, 11, 0.74);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 16px;
}
.dmb-dm-avatar-modal__inner {
	width: min(980px, 100%);
	max-height: min(90vh, 980px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border-radius: 16px;
	background: linear-gradient(160deg, #141824 0%, #0d1018 100%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
}
.dmb-dm-avatar-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.dmb-dm-avatar-modal__title {
	margin: 0;
	font-family: var(--dmb-font-heading);
	font-size: clamp(1.05rem, 1.4vw, 1.35rem);
	color: #f8f1e3;
	letter-spacing: .03em;
}
.dmb-dm-avatar-modal__close {
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: #f5f6fb;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.dmb-dm-avatar-modal__hint,
.dmb-dm-avatar-modal__empty {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #c0c5d2;
}
.dmb-dm-avatar-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	overflow-y: auto;
	padding: 4px;
	align-content: start;
}
.dmb-dm-avatar-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 8px 10px;
	min-height: 0;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
	transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.dmb-dm-avatar-card:hover {
	transform: translateY(-2px);
	border-color: rgba(224, 177, 90, 0.6);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.dmb-dm-avatar-card:focus-visible {
	outline: 2px solid rgba(224, 177, 90, 0.95);
	outline-offset: 2px;
}
.dmb-dm-avatar-card.is-selected {
	border-color: #e0b15a;
	background: linear-gradient(180deg, rgba(224, 177, 90, 0.18), rgba(255, 255, 255, 0.04));
	box-shadow: 0 0 0 2px rgba(224, 177, 90, 0.35), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.dmb-dm-avatar-card__check {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #1f1706;
	background: rgba(224, 177, 90, 0.9);
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 140ms ease, transform 140ms ease;
}
.dmb-dm-avatar-card.is-selected .dmb-dm-avatar-card__check {
	opacity: 1;
	transform: scale(1);
}
.dmb-dm-avatar-card__media {
	width: 100%;
	aspect-ratio: 2 / 3;
	min-height: 180px;
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(21, 24, 36, 0.88), rgba(8, 10, 16, 0.94));
	border: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	contain: paint;
}
.dmb-dm-avatar-card__media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 7px 14px rgba(0, 0, 0, 0.4));
}
.dmb-dm-avatar-card__label {
	font-size: 13px;
	line-height: 1.25;
	font-weight: 700;
	color: #f2ecdf;
	text-align: center;
	text-wrap: balance;
}
.dmb-dm-avatar-modal__foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	position: sticky;
	bottom: 0;
	padding-top: 8px;
	background: linear-gradient(180deg, rgba(13, 16, 24, 0), rgba(13, 16, 24, 0.96) 42%);
}
body.dmb-modal-open {
	overflow: hidden;
}
.dmb-dialog-inner {
	background: var(--dmb-color-bg);
	border: 1px solid var(--dmb-color-border);
	border-radius: var(--dmb-radius-lg);
	width: min(480px, 92vw);
	padding: 24px;
	box-shadow: var(--dmb-shadow-lg);
}
.dmb-dialog-title {
	margin: 0 0 12px;
	font-family: var(--dmb-font-heading);
	color: var(--dmb-color-primary);
	font-size: var(--dmb-font-size-xl);
}
.dmb-form { display: flex; flex-direction: column; gap: 10px; }
.dmb-form p { margin: 0; color: var(--dmb-color-secondary); font-size: var(--dmb-font-size-md); }
.dmb-form .dmb-dialog-link {
	color: var(--dmb-color-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.dmb-form .dmb-dialog-link:hover,
.dmb-form .dmb-dialog-link:focus-visible {
	color: var(--dmb-color-accent, #e5484d);
}
.dmb-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--dmb-font-size-xs);
	color: var(--dmb-color-secondary);
	letter-spacing: var(--dmb-letter-caps);
	text-transform: uppercase;
}
/* Dialogue d'édition de note (réutilise .dmb-dialog). Étiquette colorée
 * orange en cohérence avec la pastille du badge sur le canvas. */
.dmb-note-dialog .dmb-dialog-title {
	display: flex;
	align-items: center;
	gap: 8px;
}
.dmb-note-dialog .dmb-dialog-title::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #f59e0b;
	color: #fff;
	font-weight: 700;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1;
}
.dmb-note-textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--dmb-color-border);
	border-radius: var(--dmb-radius-sm, 4px);
	background: var(--dmb-color-bg, #fff);
	font: inherit;
	color: inherit;
	resize: vertical;
	min-height: 4.5em;
	line-height: 1.4;
}
.dmb-note-textarea:focus {
	outline: 2px solid var(--dmb-color-accent, #7a5cff);
	outline-offset: 1px;
	border-color: var(--dmb-color-accent, #7a5cff);
}
.dmb-note-hint {
	font-size: var(--dmb-font-size-sm, 0.9em);
	color: var(--dmb-color-secondary);
}
.dmb-note-footer {
	display: flex;
	justify-content: flex-end;
}
.dmb-note-counter {
	font-size: 0.75em;
	color: var(--dmb-color-text-muted, #777);
	font-variant-numeric: tabular-nums;
}
/* Le bouton « Supprimer la note » reste secondaire pour éviter la
 * confusion avec la suppression de la tuile elle-même. */
.dmb-btn-note-delete {
	color: #b91c1c;
	border-color: #f3d2d2 !important;
	margin-right: auto;
}

.dmb-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}
/*
 * Inputs / textarea du dialogue : apparence cohérente avec les autres
 * éléments formulaire de la palette (même bordure, même radius). Le
 * textarea description autorise le resize vertical uniquement — le
 * horizontal casserait la mise en page du dialogue.
 */
.dmb-form input[type="text"],
.dmb-form input[type="email"],
.dmb-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--dmb-color-border);
	border-radius: var(--dmb-radius-sm);
	background: var(--dmb-color-bg);
	color: var(--dmb-color-primary);
	font: 400 var(--dmb-font-size-md) / 1.4 var(--dmb-font-body);
}
.dmb-form input[type="text"]:focus,
.dmb-form input[type="email"]:focus,
.dmb-form textarea:focus {
	outline: 2px solid var(--dmb-color-accent, #e5484d);
	outline-offset: 1px;
	border-color: var(--dmb-color-accent, #e5484d);
}
.dmb-meta-input.is-invalid,
.dmb-form .is-invalid {
	border-color: #e5484d !important;
	box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.4);
}
.dmb-form textarea {
	resize: vertical;
	min-height: 96px;
}

/* Notifications non bloquantes (règle anti-superposition, etc.).
 * fixed : reste visible même si la page défile ou si le builder a overflow:hidden. */
.dmb-notify {
	position: fixed;
	top: max(16px, env(safe-area-inset-top, 0px));
	right: 24px;
	transform: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
	z-index: 100002;
	max-width: min(92vw, 28rem);
	box-sizing: border-box;
}
.dmb-notify-item {
	background: var(--dmb-color-primary);
	color: var(--dmb-color-on-primary);
	padding: 8px 14px;
	border-radius: var(--dmb-radius-md);
	font-size: var(--dmb-font-size-sm);
	box-shadow: var(--dmb-shadow-md);
	opacity: 0;
	-webkit-transform: translateY(-8px);
	transform: translateY(-8px);
	-webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
	transition: opacity .2s ease, transform .2s ease;
}
.dmb-notify-item.is-in {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/* ==================================================================== *
 * Mode « Zones de mouvement »
 *
 * Active par la bascule du bouton `.dmb-btn-zones`. Quand le conteneur
 * racine porte `.is-zone-mode`, on signale visuellement l'état :
 *   - la palette est grisée et non cliquable (les uploads de tuiles
 *     n'ont pas de sens quand on dessine des zones) ;
 *   - un liseré coloré entoure le stage pour indiquer un mode spécial ;
 *   - le bouton lui-même adopte un style "actif".
 *
 * Le curseur crosshair est géré côté JS sur stage.container() pour
 * rester en phase avec l'état runtime de Konva.
 * ==================================================================== */

.dmb-btn-zones.is-active {
	background: #e5484d;
	border-color: #bf3e42;
	color: #ffffff;
}
.dmb-btn-zones.is-active:hover {
	background: #bf3e42;
	color: #ffffff;
}

.dmb-btn-zones-view.is-active {
	background: #0ea5e9;
	border-color: #0284c7;
	color: #ffffff;
}
.dmb-btn-zones-view.is-active:hover {
	background: #0284c7;
	color: #ffffff;
}

.dmb-builder-root.is-zone-mode .dmb-palette {
	opacity: 0.45;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
.dmb-builder-root.is-zone-mode .dmb-stage {
	outline: 2px dashed #e5484d;
	outline-offset: 2px;
}

/* Palette « Type de case » (v1.7.0, étendue v1.8.2).
 *
 * Groupe compact dans la toolbar, visible uniquement en mode zone
 * (display togglé côté JS via refreshZoneToolbar). Les boutons sont
 * visuellement liés (pas de marge entre eux) pour former un sélecteur
 * radio-like. Le bouton actif adopte le même violet que le bouton de
 * bascule du mode zone, pour que l'œil rattache tout de suite l'UI à
 * la zone peinte sur le canvas.
 *
 * Depuis l'extension du modèle de rampes (diagonales, cardinales,
 * demi-rampes), la palette contient ≥10 presets : on autorise le wrap
 * sur deux lignes et on resserre le padding pour que l'étiquette
 * (flèche Unicode de 1–2 caractères) reste centrée. Le bouton
 * « Plat » garde un label texte, on force donc un padding horizontal
 * un peu plus généreux pour ce cas. */
.dmb-zone-palette {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0;
	align-items: center;
	margin-right: 4px;
}
.dmb-zone-level-hint {
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 6px;
	padding: 4px 8px;
	font-size: var(--dmb-font-size-sm, 0.85rem);
	line-height: 1.35;
	color: var(--dmb-color-muted, #64748b);
	border-bottom: 1px solid var(--dmb-color-border);
}
.dmb-viewer-toolbar__inner .dmb-btn-zone-kind {
	border-radius: 0;
	margin: 0;
	padding: 0 8px;
	min-width: 28px;
	font-size: 14px;
	line-height: 1.8;
}
.dmb-viewer-toolbar__inner .dmb-btn-zone-kind-flat {
	padding: 0 10px;
}
.dmb-viewer-toolbar__inner .dmb-btn-zone-kind:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.dmb-viewer-toolbar__inner .dmb-btn-zone-kind:last-child  { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.dmb-viewer-toolbar__inner .dmb-btn-zone-kind + .dmb-btn-zone-kind { margin-left: -1px; }
.dmb-viewer-toolbar__inner .dmb-btn-zone-kind.is-active {
	background: #e5484d;
	border-color: #bf3e42;
	color: #ffffff;
	z-index: 1;
}
.dmb-viewer-toolbar__inner .dmb-btn-zone-kind.is-active:hover {
	background: #bf3e42;
	color: #ffffff;
}

/* Aide première visite + grille vide */
.dmb-hint-strip {
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 4px;
	padding: 10px 12px;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(251, 191, 36, 0.08));
	border: 1px solid var(--dmb-color-border);
	border-radius: var(--dmb-radius-md);
}
.dmb-viewer-toolbar__inner .dmb-toolbar-living,
.dmb-builder-tiles-tab-panel .dmb-toolbar-living {
	flex: 0 1 auto;
	max-width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.dmb-viewer-toolbar__inner .dmb-toolbar-living__strip,
.dmb-builder-tiles-tab-panel .dmb-toolbar-living__strip {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px 6px;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--dmb-color-border) transparent;
	padding: 2px 4px 2px 0;
}

/* Onglet Animer : bloc "Donjon vivant" empilé (2 boutons pleine largeur + aide). */
.dmb-builder-tiles-tab-panel .dmb-toolbar-living--stacked .dmb-toolbar-living__strip {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	overflow-x: visible;
	padding: 0;
}
.dmb-builder-tiles-tab-panel .dmb-living-tools--stack {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}
.dmb-builder-tiles-tab-panel .dmb-living-tools--stack .button {
	width: 100%;
	justify-content: center;
	min-height: 32px;
	padding: 6px 10px;
	font-size: 12px;
}
.dmb-builder-tiles-tab-panel .dmb-iconbtn {
	position: relative;
	padding-left: 34px;
}
.dmb-builder-tiles-tab-panel .dmb-iconbtn::before {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	font: 16px/1 dashicons;
	text-align: center;
	color: rgba(255, 255, 255, 0.86);
}
/* Chemins */
.dmb-builder-tiles-tab-panel .dmb-living-btn-paths.is-on::before {
	content: "\f177"; /* visibility */
}
.dmb-builder-tiles-tab-panel .dmb-living-btn-paths.is-off::before {
	content: "\f530"; /* hidden */
}
/* Animation */
.dmb-builder-tiles-tab-panel .dmb-living-btn-animate.is-off::before {
	content: "\f522"; /* controls-play */
}
.dmb-builder-tiles-tab-panel .dmb-living-btn-animate.is-on::before {
	content: "\f158"; /* no (stop-like) */
}
.dmb-builder-tiles-tab-panel .dmb-living-tools--stack .button:hover,
.dmb-builder-tiles-tab-panel .dmb-living-tools--stack .button:active {
	/* Les boutons globaux font un scale(1.02) au hover (tokens.css).
	 * Dans un conteneur étroit/overflow, ça fait rogner le border.
	 * Ici on privilégie la stabilité (full-width). */
	transform: none;
}
.dmb-builder-tiles-tab-panel .dmb-toolbar-living--stacked .dmb-living-btn-help {
	align-self: flex-end;
	min-height: 0;
	padding: 0;
	font-size: 11px;
	background: transparent;
	border-color: transparent;
	color: var(--dmb-color-muted);
	text-decoration: underline;
}
.dmb-builder-tiles-tab-panel .dmb-toolbar-living--stacked .dmb-living-btn-help:hover {
	color: #e5e7eb;
}
.dmb-viewer-toolbar__inner .dmb-toolbar-living.is-empty,
.dmb-builder-tiles-tab-panel .dmb-toolbar-living.is-empty {
	opacity: 0.92;
}
.dmb-viewer-toolbar__inner .dmb-toolbar-living__count,
.dmb-builder-tiles-tab-panel .dmb-toolbar-living__count {
	margin: 0;
	padding: 0 4px 0 0;
	flex: 0 0 auto;
	font-size: 11px;
	line-height: 1.2;
	color: #cbd5e1;
	font-weight: 600;
	white-space: nowrap;
	cursor: default;
}
.dmb-viewer-toolbar__inner .dmb-living-cta,
.dmb-viewer-toolbar__inner .dmb-living-btn-help,
.dmb-builder-tiles-tab-panel .dmb-living-cta,
.dmb-builder-tiles-tab-panel .dmb-living-btn-help {
	margin-top: 0;
}
.dmb-living-cta {
	width: auto;
	min-width: 0;
	min-height: 26px;
	font-size: 11px;
	padding: 3px 6px;
}
.dmb-living-btn-help {
	min-height: 26px;
	font-size: 11px;
	padding: 3px 6px;
}
.dmb-living-tools {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px 6px;
	margin-top: 0;
	margin-left: 0;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
}
.dmb-living-tools .button,
.dmb-living-tools .dmb-living-btn-viewer-anim {
	flex: 0 0 auto;
	min-width: 0;
	min-height: 26px;
	padding: 3px 6px;
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
}
.dmb-living-btn-viewer-anim[hidden] {
	display: none !important;
}
.dmb-living-help-dialog .dmb-dialog-inner {
	max-width: min(32rem, 100vw - 2rem);
}
.dmb-living-help-dialog .dmb-dialog-body {
	max-height: min(70vh, 32rem);
	overflow: auto;
}
.dmb-living-help-lead {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 700;
}
.dmb-living-help-body,
.dmb-living-help-onboard {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.4;
}
.dmb-living-help-dialog .dmb-mobile-onboarding-steps {
	margin: 0 0 0 1rem;
	padding: 0;
}
.dmb-builder-mobile-token-hint {
	margin: 0;
	flex: 1 1 220px;
	max-width: min(100%, 28rem);
	font-size: 12px;
	line-height: 1.35;
	color: var(--dmb-color-text-muted, #64748b);
	align-self: center;
}
.dmb-builder-mobile-token-hint[hidden] {
	display: none !important;
}
.dmb-hint-strip-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.dmb-hint-strip-text {
	margin: 0;
	font-size: var(--dmb-font-size-sm, 0.95rem);
	line-height: 1.45;
	color: var(--dmb-color-primary);
	max-width: 52rem;
}
.dmb-hint-strip-close {
	flex: 0 0 auto;
}

.dmb-empty-canvas-hint {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 1;
	padding: 16px;
	text-align: center;
}
.dmb-empty-canvas-hint[hidden] {
	display: none;
}
.dmb-empty-canvas-text {
	margin: 0;
	font-size: var(--dmb-font-size-md, 1rem);
	color: var(--dmb-color-text-muted, #666);
	max-width: 20rem;
	line-height: 1.4;
}

/* Animation succès après sauvegarde */
.dmb-btn-save.is-success {
	animation: dmb-pulse-success 0.55s ease;
}
@keyframes dmb-pulse-success {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
	100% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.dmb-palette-thumb.is-mobile-preview.gait-walk img,
	.dmb-palette-thumb.is-mobile-preview.gait-slide img,
	.dmb-builder-dm-preview .dmb-dm-speech__teaser::after,
	.dmb-btn-save.is-success {
		animation: none !important;
	}
	.dmb-palette-item,
	.dmb-notify-item,
	.dmb-builder-inline,
	.dmb-builder-inline-affordance,
	.dmb-dm-avatar-card {
		transition: none !important;
	}
}

.dmb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Référence viewer : < ~1100px l’UI lecteur empile la colonne — même logique. */
@media (max-width: 1100px) {
	.dmb-builder-workspace {
		grid-template-areas: "bmeta" "bcanvas";
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(200px, 1fr);
	}
	.dmb-builder-sidebar--meta {
		border-right: 0;
		border-bottom: 1px solid var(--dmb-color-border-soft);
		max-height: min(40vh, 360px);
	}
	.dmb-builder-workspace.is-details-open .dmb-builder-sidebar--meta {
		max-height: min(72vh, 640px);
	}
	.dmb-builder-sidebar--meta:not(.is-details-open) .dmb-builder-primary-actions {
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}
	.dmb-builder-sidebar--meta:not(.is-details-open) .dmb-builder-primary-actions .dmb-btn {
		min-height: 32px;
		padding: 6px 8px;
		font-size: 13px;
		line-height: 1.1;
	}
	.dmb-builder-sidebar--meta:not(.is-details-open) .dmb-builder-share-hint {
		display: none;
	}
	.dmb-builder-share-actions {
		flex-wrap: wrap;
		border-left: 0;
		padding-left: 0;
	}
	.dmb-publish-toggle {
		font-size: 11px;
	}
	.dmb-builder-inline {
		padding: 5px;
	}
	.dmb-builder-inline-affordance {
		opacity: .9;
	}
	.dmb-builder-sidebar--tiles {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: min(64vh, 560px);
		border-left: 0;
		border-top: 1px solid var(--dmb-color-border-soft);
		border-top-left-radius: 14px;
		border-top-right-radius: 14px;
		box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.45);
		overflow: hidden;
		transform: translateY(calc(100% - 56px));
		transition: transform 180ms ease;
		z-index: 30;
	}
	.dmb-builder-workspace.is-tiles-open .dmb-builder-sidebar--tiles {
		transform: translateY(0);
	}
	.dmb-builder-tiles-toggle {
		display: inline-flex;
		position: fixed;
		right: 12px;
		bottom: 68px;
		z-index: 32;
		min-height: 32px;
		padding: 6px 10px;
		font-size: 13px;
		line-height: 1.1;
		border-radius: 999px;
	}
	.dmb-builder-tiles-toggle[hidden] {
		display: none !important;
	}
	.dmb-builder-tiles-backdrop {
		position: fixed;
		inset: 0;
		border: 0;
		background: rgba(0, 0, 0, 0.34);
		z-index: 24;
	}
	.dmb-builder-tiles-backdrop[hidden] {
		display: none !important;
	}
	.dmb-builder-sidebar--tiles .dmb-builder-tiles-tab-panel .dmb-palette {
		padding-top: 10px;
	}
	/* Builder mobile: la bulle description doit rester lisible et éditable
	 * dans la colonne meta. On la remet dans le flux pour éviter les
	 * débordements hors écran. */
	.dmb-builder-dm-preview .dmb-dm-hero__stage {
		grid-template-columns: 1fr;
	}
	.dmb-builder-dm-preview.dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar {
		position: static !important;
		left: auto;
		top: auto;
		right: auto;
		width: 100%;
		max-width: 100%;
		margin-top: 8px;
		transform: none;
	}
	.dmb-builder-dm-preview .dmb-dm-speech--from-avatar .dmb-dm-speech__bubble::before {
		display: none;
	}
	.dmb-builder-dm-preview .dmb-dm-speech__close {
		right: 8px;
	}
	.dmb-palette-section-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}
	.dmb-palette-section-grid.is-jeton {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.dmb-palette-item {
		padding: 6px;
		border-radius: 6px;
	}
	.dmb-palette-thumb.is-demi img {
		width: 80%;
		height: 80%;
	}
}
@media (max-width: 520px) {
	.dmb-builder-workspace {
		grid-template-rows: auto minmax(160px, 1fr);
	}
	.dmb-builder-sidebar--meta {
		max-height: 38vh;
	}
	.dmb-builder-sidebar--tiles {
		height: 62vh;
		transform: translateY(calc(100% - 54px));
	}
	.dmb-palette-section-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 5px;
	}
	.dmb-palette-section-grid.is-jeton {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.dmb-palette-item {
		padding: 4px;
		border-radius: 5px;
	}
	.dmb-builder-dm-preview .dmb-dm-hero__stage {
		grid-template-columns: 1fr;
	}
	.dmb-builder-dm-preview.dmb-dm-hero--speech-float .dmb-dm-speech--from-avatar {
		position: absolute !important;
		top: 6px;
		left: calc(100% + 8px);
		width: min(16rem, 90vw);
		max-width: 90vw;
	}
	.dmb-builder-avatar-preview .dmb-dm-avatar-wrap {
		width: 100%;
		max-width: none;
	}
	.dmb-builder-dm-preview .dmb-dm-avatar {
		width: min(60cqi, 42vw);
	}
	.dmb-builder-dm-preview .dmb-dm-speech__text {
		max-height: min(17vh, 110px);
	}
}
@media (max-width: 860px) {
	.dmb-dm-avatar-modal {
		align-items: flex-end;
		padding: 0;
	}
	.dmb-dm-avatar-modal__inner {
		width: 100%;
		max-height: min(90dvh, 92vh);
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		padding: 12px;
	}
	.dmb-dm-avatar-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding-bottom: 10px;
	}
	.dmb-dm-avatar-card {
		padding: 7px 7px 9px;
	}
	.dmb-dm-avatar-card__media {
		min-height: 124px;
	}
	.dmb-dm-avatar-modal__foot {
		padding-bottom: calc(8px + env(safe-area-inset-bottom));
	}
	.dmb-dm-avatar-modal__foot .button {
		min-height: 40px;
	}
}
@media (min-width: 861px) and (max-width: 1160px) {
	.dmb-dm-avatar-modal__inner {
		width: min(920px, 100%);
	}
	.dmb-dm-avatar-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.dmb-dm-avatar-card__media {
		min-height: 210px;
	}
}
@media (min-width: 1161px) {
	.dmb-dm-avatar-modal__inner {
		width: min(1120px, 96vw);
	}
	.dmb-dm-avatar-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.dmb-dm-avatar-card__media {
		min-height: 240px;
	}
}
@media (max-width: 540px) {
	.dmb-dm-avatar-modal__title {
		font-size: 1rem;
	}
	.dmb-dm-avatar-modal__hint {
		font-size: 12px;
	}
	.dmb-dm-avatar-card__media {
		min-height: 110px;
	}
	.dmb-dm-avatar-card__label {
		font-size: 12px;
	}
}