/* Atelier Selab — Customiseur : styles isoles sous .asc-wrap, direction "Galerie Cornely". */

@font-face {
	font-family: 'Parisine';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/Parisine-Regular.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Parisine';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/Parisine-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Parisienne';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/E21i_d3kivvAkxhLEVZpcyp6DuKuavM.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'ASC Bebas Neue';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/BebasNeue-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'ASC Oswald';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/Oswald-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'ASC Playfair Display';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/PlayfairDisplay-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'ASC Pacifico';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/Pacifico-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'ASC Great Vibes';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/GreatVibes-Regular.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'ASC Pinyon Script';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/PinyonScript-Regular.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'ASC Tangerine';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/Tangerine-Bold.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'ASC UnifrakturCook';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/UnifrakturCook-Bold.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'ASC Sancreek';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/Sancreek-Regular.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'ASC Anton';
	src: url('https://atelierselab.fr/wp-content/uploads/fonts/Anton-Regular.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}

.asc-wrap {
	--asc-bg: #FFFFFF;
	--asc-surface: #F4F1EA;
	--asc-surface-hover: #ECE4D2;
	--asc-ink: #221F1A;
	--asc-accent: #96702A;
	--asc-muted: #6B665A;
	--asc-radius-sm: 2px;
	--asc-radius-md: 4px;
	--asc-sp-sm: 12px;
	--asc-sp-md: 24px;
	--asc-sp-lg: 64px;
	--asc-font-heading: 'Parisine', sans-serif;
	--asc-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	background: var(--asc-bg);
	color: var(--asc-ink);
	font-family: var(--asc-font-body);
	padding: var(--asc-sp-lg) var(--asc-sp-md) 96px;
	box-sizing: border-box;
}
.asc-wrap *, .asc-wrap *::before, .asc-wrap *::after { box-sizing: inherit; }
.asc-wrap [hidden] { display: none !important; }

.asc-intro {
	max-width: 720px;
	margin: 0 auto var(--asc-sp-lg);
	text-align: center;
}
.asc-eyebrow {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--asc-muted);
	margin: 0 0 var(--asc-sp-sm);
}
.asc-title {
	font-family: var(--asc-font-heading);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.1;
	margin: 0 0 var(--asc-sp-sm);
}
.asc-subtitle {
	color: var(--asc-muted);
	line-height: 1.5;
	margin: 0 auto;
	max-width: 60ch;
}

.asc-app {
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: var(--asc-sp-lg);
	align-items: start;
}
@media (max-width: 900px) {
	.asc-app { grid-template-columns: 1fr; gap: var(--asc-sp-md); }
	.asc-wrap { padding: var(--asc-sp-md) var(--asc-sp-sm) 64px; }
}

.asc-panel-label {
	font-family: var(--asc-font-heading);
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 var(--asc-sp-sm);
	letter-spacing: 0.01em;
}

/* Product picker grid (initial state) */
.asc-picker-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid rgba(138,133,120,0.35);
	border-left: 1px solid rgba(138,133,120,0.35);
}
.asc-tile {
	position: relative;
	background: var(--asc-surface);
	border-right: 1px solid rgba(138,133,120,0.35);
	border-bottom: 1px solid rgba(138,133,120,0.35);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
	padding: 10px;
	text-align: center;
	color: var(--asc-ink);
	font-size: 12px;
	background-color: var(--asc-surface);
	transition: background-color .15s;
}
.asc-tile:hover, .asc-tile:focus-visible { background-color: var(--asc-surface-hover); }
.asc-tile.is-selected { background-color: var(--asc-surface-hover); }
.asc-tile.is-selected .asc-tile-label { color: var(--asc-accent); }
.asc-tile img {
	max-width: 100%;
	max-height: 68%;
	object-fit: contain;
	flex: 1;
	pointer-events: none;
}
.asc-tile-label {
	flex-shrink: 0;
	line-height: 1.2;
}
.asc-tile.asc-tile-upload {
	border: 1px dashed rgba(199,160,82,0.6);
	background-color: transparent;
}
.asc-tile.asc-tile-upload span.asc-plus {
	font-family: var(--asc-font-heading);
	font-size: 26px;
	color: var(--asc-accent);
	line-height: 1;
}

/* Canvas view */
.asc-canvas-shell {
	position: relative;
	background: var(--asc-surface);
	border: 1px solid rgba(138,133,120,0.4);
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	touch-action: none;
}
#asc-canvas { display: block; }

.asc-zoom-controls {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 4px;
	background: rgba(255,255,255,0.92);
	border: 1px solid rgba(138,133,120,0.4);
	border-radius: 999px;
	padding: 4px;
	box-shadow: 0 2px 8px rgba(34,31,26,0.08);
}
.asc-zoom-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--asc-ink);
	font-family: var(--asc-font-body);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s;
}
.asc-zoom-btn:hover, .asc-zoom-btn:focus-visible { background-color: var(--asc-surface-hover); }
.asc-zoom-level {
	font-size: 11px;
	color: var(--asc-muted);
	min-width: 34px;
	text-align: center;
	user-select: none;
}

.asc-canvas-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--asc-sp-sm);
	flex-wrap: wrap;
	margin-top: var(--asc-sp-sm);
}
.asc-hint {
	color: var(--asc-muted);
	font-size: 12px;
	margin: 6px 0 0;
}
.asc-switch-label { margin-top: var(--asc-sp-md); }
.asc-switch-strip {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	border-top: 1px solid rgba(138,133,120,0.35);
	padding-top: var(--asc-sp-sm);
}
.asc-switch-strip .asc-tile {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	aspect-ratio: auto;
	padding: 4px;
}
.asc-switch-strip .asc-tile-label { display: none; }
.asc-switch-strip .asc-tile-upload span.asc-plus { font-size: 18px; }

/* Right panel */
.asc-panel-section {
	padding-bottom: var(--asc-sp-md);
	margin-bottom: var(--asc-sp-md);
	border-bottom: 1px solid rgba(138,133,120,0.35);
}
.asc-panel-section:last-child { border-bottom: none; }

.asc-text-controls {
	display: flex;
	gap: var(--asc-sp-sm);
	margin-bottom: var(--asc-sp-sm);
}
.asc-select {
	flex: 1;
	background: transparent;
	color: var(--asc-ink);
	border: 1px solid var(--asc-muted);
	border-radius: var(--asc-radius-sm);
	padding: 8px 10px;
	font-family: var(--asc-font-body);
	font-size: 14px;
}
.asc-range { flex: 1; accent-color: var(--asc-accent); }
.asc-text-input {
	width: 100%;
	background: transparent;
	color: var(--asc-ink);
	border: none;
	border-bottom: 1px solid var(--asc-muted);
	padding: 8px 2px;
	font-family: var(--asc-font-body);
	font-size: 15px;
	margin-bottom: var(--asc-sp-sm);
}
.asc-text-input:focus { outline: none; border-bottom-color: var(--asc-accent); }

.asc-text-preview-row {
	display: flex;
	align-items: center;
	gap: var(--asc-sp-sm);
}
.asc-text-preview {
	flex: 1;
	border: 1px dashed var(--asc-muted);
	border-radius: var(--asc-radius-sm);
	padding: 14px 12px;
	min-height: 20px;
	color: var(--asc-ink);
	cursor: grab;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.asc-text-preview:active { cursor: grabbing; }

/* Flash tattoo gallery */
.asc-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.asc-tattoo-thumb {
	background: var(--asc-surface);
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(138,133,120,0.35);
	border-radius: var(--asc-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	cursor: grab;
	transition: box-shadow .15s;
}
.asc-tattoo-thumb:hover, .asc-tattoo-thumb:focus-visible {
	box-shadow: 0 0 0 1px var(--asc-accent) inset;
}
.asc-tattoo-thumb:active { cursor: grabbing; }
.asc-tattoo-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	pointer-events: none;
}

/* Couleur du fil (recolore tattoos + texte) */
.asc-color-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.asc-swatch {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(107,102,90,0.4);
	cursor: pointer;
	padding: 0;
	position: relative;
	flex-shrink: 0;
}
.asc-swatch.is-active {
	box-shadow: 0 0 0 2px var(--asc-bg), 0 0 0 3px var(--asc-accent);
}
.asc-swatch-custom {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(107,102,90,0.4);
	padding: 0;
	cursor: pointer;
	background: conic-gradient(from 180deg, #e11 0deg, #ee1 60deg, #1e1 120deg, #1ee 180deg, #11e 240deg, #e1e 300deg, #e11 360deg);
	flex-shrink: 0;
	appearance: none;
	-webkit-appearance: none;
}
.asc-swatch-custom::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.asc-swatch-custom::-webkit-color-swatch { border: none; border-radius: 50%; }

/* Filtres & recherche (produits + flash tattoos) */
.asc-filter-bar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: var(--asc-sp-sm);
}
.asc-search-input {
	width: 100%;
	background: transparent;
	color: var(--asc-ink);
	border: 1px solid var(--asc-muted);
	border-radius: var(--asc-radius-sm);
	padding: 10px 12px;
	font-family: var(--asc-font-body);
	font-size: 14px;
}
.asc-search-input:focus { outline: none; border-color: var(--asc-accent); }
.asc-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.asc-pill {
	font-family: var(--asc-font-body);
	font-size: 12px;
	color: var(--asc-muted);
	background: transparent;
	border: 1px solid rgba(138,133,120,0.5);
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
	transition: all .15s;
}
.asc-pill:hover, .asc-pill:focus-visible { border-color: var(--asc-accent); color: var(--asc-ink); }
.asc-pill.is-active { background: var(--asc-accent); border-color: var(--asc-accent); color: #fff; }
.asc-empty-hint {
	color: var(--asc-muted);
	font-size: 13px;
	text-align: center;
	padding: 24px 0;
	grid-column: 1 / -1;
}

/* Buttons */
.asc-btn {
	font-family: var(--asc-font-body);
	font-size: 14px;
	color: var(--asc-ink);
	background: transparent;
	border: 1px solid var(--asc-accent);
	border-radius: var(--asc-radius-sm);
	padding: 13px 20px;
	cursor: pointer;
	text-transform: none;
	transition: box-shadow .15s;
}
.asc-btn:hover, .asc-btn:focus-visible { box-shadow: 0 0 0 1px var(--asc-accent); }
.asc-btn:disabled { border-color: var(--asc-muted); color: var(--asc-muted); cursor: not-allowed; box-shadow: none; }
.asc-btn-primary { width: 100%; }
.asc-btn-small { padding: 9px 14px; font-size: 13px; }
.asc-btn-ghost { border-color: var(--asc-muted); }
.asc-btn-ghost:hover { box-shadow: 0 0 0 1px var(--asc-muted); }

/* Send form */
.asc-send-form { margin-top: var(--asc-sp-md); display: flex; flex-direction: column; gap: var(--asc-sp-sm); }
.asc-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.asc-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--asc-muted); }
.asc-field input, .asc-field textarea {
	background: transparent;
	color: var(--asc-ink);
	border: none;
	border-bottom: 1px solid var(--asc-muted);
	padding: 8px 2px;
	font-family: var(--asc-font-body);
	font-size: 15px;
	resize: vertical;
}
.asc-field input:focus, .asc-field textarea:focus { outline: none; border-bottom-color: var(--asc-accent); }
.asc-status { min-height: 18px; font-size: 13px; color: var(--asc-muted); margin: 0; }
.asc-status.is-success { color: var(--asc-accent); }
.asc-status.is-error { color: var(--asc-ink); }

.asc-size-row {
	display: flex;
	gap: 6px;
	margin: 8px 0;
}
.asc-size-chip {
	flex: 1;
	border: 1px solid rgba(138,133,120,0.4);
	background: transparent;
	border-radius: 999px;
	padding: 6px 8px;
	font-family: var(--asc-font-body);
	font-size: 12px;
	color: var(--asc-ink);
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.asc-size-chip.is-active {
	background: var(--asc-ink);
	color: #fff;
	border-color: var(--asc-ink);
}
.asc-price-estimate {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--asc-ink);
}
.asc-price-estimate .asc-price-value {
	color: #8a6d2f;
}
.asc-price-total {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--asc-ink);
	text-align: center;
}
.asc-price-total .asc-price-value {
	color: #8a6d2f;
}