/*
 * Visualiseur de couleurs — adaptations tablette et mobile.
 * Règle d'or : jamais de défilement horizontal global ; seules les rangées de pastilles défilent.
 */

/* Tablette */
@media (max-width: 1100px) {
	.ywc-visualizer[data-ywc-visualizer] {
		--ywc-panel-w: 320px;
	}
}

/* Tablette portrait et mobile : interface verticale */
@media (max-width: 860px) {
	.ywc-visualizer[data-ywc-visualizer] {
		font-size: 14px;
		border-radius: var(--ywc-radius);
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-workspace {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-stage {
		height: auto;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-canvas-wrap {
		padding: 60px 10px 12px;
		min-height: 220px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-toast {
		bottom: 84px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-toolbar {
		top: 8px;
		left: 8px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-panel {
		overflow: visible;
		border-left: 0;
		border-top: 1px solid var(--ywc-border);
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-panel-step {
		padding: 18px 16px 0;
		gap: 16px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-panel-footer {
		margin: 0 -16px;
		padding: 10px 16px;
	}

	/* Étape 3 : image, couleur sélectionnée + Appliquer, pastilles défilantes, puis recherche. */
	.ywc-visualizer[data-ywc-visualizer] [data-panel="3"] .ywc-visualizer-panel-title {
		display: none;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-chips,
	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-families {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 0 -16px;
		padding: 2px 16px;
		scroll-padding: 0 16px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-chips::-webkit-scrollbar,
	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-families::-webkit-scrollbar,
	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-swatches::-webkit-scrollbar {
		display: none;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-swatches {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 76px;
		grid-template-rows: repeat(2, 76px);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		margin: 0 -16px;
		padding: 2px 16px 8px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-swatch-item {
		scroll-snap-align: start;
	}

	.ywc-visualizer[data-ywc-visualizer] [data-panel="3"] .ywc-visualizer-color-sheet {
		order: -1;
	}

	.ywc-visualizer[data-ywc-visualizer] [data-panel="3"] > .ywc-visualizer-label,
	.ywc-visualizer[data-ywc-visualizer] [data-panel="3"] > .ywc-visualizer-chips {
		order: -3;
	}

	.ywc-visualizer[data-ywc-visualizer] [data-panel="3"] > .ywc-visualizer-label {
		margin-bottom: -10px;
	}

	.ywc-visualizer[data-ywc-visualizer] [data-panel="3"] .ywc-visualizer-color-sheet {
		order: -2;
		grid-template-columns: 52px minmax(0, 1fr) auto;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-sheet-swatch {
		width: 52px;
		height: 52px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-color-sheet button.ywc-visualizer-btn {
		grid-column: auto;
		width: auto;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-sheet-desc {
		display: none;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-choose {
		padding: 20px 16px 24px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-upload-actions,
	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-upload-actions .ywc-visualizer-btn {
		width: 100%;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-upload-actions .ywc-visualizer-btn {
		flex: 1 1 0;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-gallery {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
		gap: 12px;
	}
}

/* Petits écrans : la timeline ne garde que le libellé de l'étape courante */
@media (max-width: 640px) {
	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-header {
		padding: 6px 8px 6px 14px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-header-actions .ywc-visualizer-btn span {
		display: none;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-header-actions button.ywc-visualizer-btn {
		padding: 10px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-stepper {
		padding: 6px 12px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-step:not(.is-current) .ywc-visualizer-step-label {
		display: none;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-step:not(:last-child)::after {
		margin: 0 4px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-step.is-current {
		flex: 2 1 auto;
	}

	.ywc-visualizer[data-ywc-visualizer] button.ywc-visualizer-step-btn {
		gap: 6px;
		padding: 4px 2px;
		font-size: 13px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-step-label {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-tool-grid {
		gap: 4px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-panel-footer .ywc-visualizer-btn {
		padding: 10px 14px;
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-color-sheet {
		grid-template-columns: 52px minmax(0, 1fr);
	}

	.ywc-visualizer[data-ywc-visualizer] [data-panel="3"] .ywc-visualizer-color-sheet {
		grid-template-columns: 52px minmax(0, 1fr);
	}

	.ywc-visualizer[data-ywc-visualizer] .ywc-visualizer-color-sheet button.ywc-visualizer-btn {
		grid-column: 1 / -1;
		width: 100%;
	}
}