/* Chambre 27 Tirages — module de commande sur la fiche produit. Indépendant du thème. */

.c27-tirages-app {
	--c27-accent: #1f5f8b;
	--c27-ok: #11703a;
	--c27-error: #b32d2e;
	--c27-muted: #3c434a;
	--c27-border: #c3c7cc;
	--c27-bg: #fff;
	/* Texte noir sur fond blanc, quelle que soit la couleur de texte du thème (gris clair chez certains). */
	color: #1d2327;
	background: #fff;
	margin: 1.5em 0;
	font-size: 1rem;
	line-height: 1.5;
}

.c27-tirages-app :where(h2, h3, h4, p, li, label, legend, td, th, strong, small, figcaption, summary) {
	color: inherit;
}

.c27-tirages-app *,
.c27-tirages-app *::before,
.c27-tirages-app *::after {
	box-sizing: border-box;
}

/* Les thèmes forcent souvent display sur .button : l'attribut hidden doit toujours l'emporter. */
.c27-tirages-app [hidden] {
	display: none !important;
}

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

.c27-dropzone {
	border: 2px dashed var(--c27-border);
	border-radius: 8px;
	background: var(--c27-bg);
	padding: 1.5em 1em;
	text-align: center;
	transition: border-color 0.15s, background-color 0.15s;
}

.c27-dropzone.is-over {
	border-color: var(--c27-accent);
	background: #eaf2f8;
}

.c27-dropzone-title {
	font-weight: 600;
	margin: 0 0 0.25em;
}

.c27-dropzone-hint,
.c27-privacy,
.c27-intro {
	color: var(--c27-muted);
	font-size: 0.9em;
}

.c27-pick {
	display: inline-block;
	cursor: pointer;
	margin-top: 0.5em;
	padding: 0.6em 1.4em;
	border-radius: 4px;
	background: var(--c27-accent);
	color: #fff;
	font-weight: 600;
	line-height: 1.4;
}

.c27-pick:hover {
	background: #174a6c;
	color: #fff;
}

.c27-pick:focus-within,
.c27-tirages-app :focus-visible {
	outline: 2px solid var(--c27-accent);
	outline-offset: 2px;
}

#c27-file-input:focus-visible + .c27-pick,
.c27-dropzone:focus-within .c27-pick {
	outline: 2px solid var(--c27-accent);
	outline-offset: 2px;
}

.c27-status {
	margin: 1em 0 0.5em;
}

.c27-summary {
	margin: 0 0 0.25em;
	font-weight: 600;
}

.c27-global-progress,
.c27-file progress {
	width: 100%;
	height: 6px;
	accent-color: var(--c27-accent);
}

.c27-tirages-app ul.c27-files {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5em;
}

.c27-file {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 0.75em;
	align-items: center;
	padding: 0.5em;
	border: 1px solid var(--c27-border);
	border-radius: 6px;
	background: #fff;
}

.c27-thumb {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c27-bg);
	border-radius: 4px;
	overflow: hidden;
}

.c27-thumb canvas,
.c27-thumb img {
	max-width: 100%;
	max-height: 100%;
	display: block;
	object-fit: contain;
}

.c27-thumb-placeholder {
	font-size: 0.7em;
	color: var(--c27-muted);
}

.c27-meta {
	min-width: 0;
	display: grid;
	gap: 0.15em;
}

.c27-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.c27-state {
	font-size: 0.85em;
	color: var(--c27-muted);
}

.c27-file[data-state="validated"] .c27-state {
	color: var(--c27-ok);
}

.c27-file[data-state="rejected"] .c27-state,
.c27-file[data-state="error"] .c27-state,
.c27-error {
	color: var(--c27-error);
}

.c27-ok {
	color: var(--c27-ok);
}

.c27-remove {
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: transparent;
	font-size: 1.4em;
	line-height: 1;
	color: var(--c27-muted);
	cursor: pointer;
	border-radius: 4px;
}

.c27-remove:hover {
	color: var(--c27-error);
	background: var(--c27-bg);
}

.c27-retry {
	justify-self: start;
	font-size: 0.85em;
}

.c27-notice {
	border: 1px solid var(--c27-border);
	border-left: 4px solid var(--c27-accent);
	background: var(--c27-bg);
	padding: 1em;
	border-radius: 4px;
}

.c27-notice-error {
	border-left: 4px solid #b32d2e;
}

.c27-notice-title {
	font-weight: 600;
	margin: 0 0 0.25em;
}

.c27-flash {
	margin: 0.5em 0;
	padding: 0.5em 0.75em;
	border-radius: 4px;
	background: #fcf0f1;
}

@media (max-width: 480px) {
	.c27-file {
		grid-template-columns: 48px 1fr auto;
	}

	.c27-thumb {
		width: 48px;
		height: 48px;
	}
}

/* ── Lot 7 : configuration, tirages, récapitulatif ────────────────────── */

.c27-config {
	margin-top: 1.5em;
	display: grid;
	gap: 1em;
}

.c27-config.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.c27-global,
.c27-recap {
	border: 1px solid var(--c27-border);
	border-radius: 8px;
	padding: 1em;
	background: #fff;
}

.c27-config h3 {
	margin: 0 0 0.5em;
	font-size: 1.1em;
}

.c27-help,
.c27-colors {
	color: var(--c27-muted);
	font-size: 0.85em;
	margin: 0.25em 0 0.75em;
}

.c27-selectors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.75em;
}

.c27-field {
	display: grid;
	gap: 0.2em;
	font-size: 0.9em;
}

.c27-field select,
.c27-field input,
.c27-qty {
	width: 100%;
	min-height: 40px;
	padding: 0.3em 0.5em;
	border: 1px solid var(--c27-border);
	border-radius: 4px;
	background: #fff;
	font: inherit;
}

.c27-qty {
	width: 5em;
}

.c27-options,
.c27-fit {
	border: 0;
	margin: 0;
	padding: 0;
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1em;
	font-size: 0.9em;
}

.c27-options legend,
.c27-fit legend {
	width: 100%;
	font-weight: 600;
	margin-bottom: 0.2em;
}

.c27-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: end;
	margin-top: 0.75em;
}

.c27-check {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 32px;
	cursor: pointer;
}

.c27-check input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.c27-unit {
	font-weight: 600;
	margin: 0.75em 0 0.5em;
}

.c27-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: flex-end;
}

.c27-lines-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5em;
}

.c27-tirages-app ul.c27-line-list,
.c27-tirages-app ul.c27-groups {
	list-style: none;
	margin: 0;
	padding: 0;
}

.c27-line-list {
	display: grid;
	gap: 0.5em;
}

.c27-line {
	display: grid;
	grid-template-columns: auto 72px 1fr auto;
	gap: 0.75em;
	align-items: start;
	padding: 0.6em;
	border: 1px solid var(--c27-border);
	border-radius: 6px;
	background: #fff;
}

.c27-line.is-blocking {
	border-color: #e5a33d;
	box-shadow: inset 4px 0 0 #e5a33d;
}

.c27-line-thumb {
	width: 72px;
	height: 72px;
	background: var(--c27-bg);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.c27-line-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.c27-line-main {
	min-width: 0;
}

.c27-line-main p {
	margin: 0 0 0.2em;
}

.c27-line-name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.c27-line-config {
	font-size: 0.9em;
}

.c27-line-side {
	display: grid;
	justify-items: end;
	gap: 0.3em;
}

.c27-line-price {
	font-weight: 600;
	margin: 0;
}

.c27-line-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1em;
	align-items: center;
	margin-top: 0.4em;
	font-size: 0.9em;
}

.c27-tirages-app .button-link {
	background: none;
	border: 0;
	padding: 0.3em 0;
	color: var(--c27-accent);
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

.c27-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	margin: 0.3em 0;
}

.c27-badge {
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	font-size: 0.8em;
	background: #edfaef;
	color: var(--c27-ok);
}

.c27-badge-ratio-acceptable,
.c27-badge-ratio-non_conforme,
.c27-badge-res-limite {
	background: #fcf3e3;
	color: #8a5a00;
}

.c27-badge-res-insuffisante,
.c27-badge-price-none {
	background: #fcf0f1;
	color: var(--c27-error);
}

.c27-badge-ratio-border {
	background: #eef2f6;
	color: #2f4b66;
}

.c27-confirm-line {
	font-size: 0.9em;
	color: #8a5a00;
}

.c27-groups li {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.3em 0;
	border-bottom: 1px dashed var(--c27-border);
}

.c27-total {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	margin: 0.75em 0;
	font-size: 1.1em;
}

.c27-final {
	align-items: flex-start;
	margin: 0.5em 0;
}

.c27-cart {
	width: 100%;
	min-height: 48px;
	font-size: 1.05em;
}

/* ── Éditeur de cadrage ───────────────────────────────────────────────── */

.c27-editor {
	width: min(980px, 96vw);
	max-height: 94vh;
	border: 0;
	border-radius: 8px;
	padding: 1em;
	overflow: auto;
}

.c27-editor::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.c27-editor h3 {
	margin: 0 0 0.75em;
}

.c27-editor-body {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr);
	gap: 1em;
}

.c27-stage {
	position: relative;
	width: 100%;
	max-height: 70vh;
	margin: 0 auto;
	overflow: hidden;
	background: #222;
	touch-action: none;
	user-select: none;
}

.c27-stage img {
	display: block;
	pointer-events: none;
}

.c27-stage.is-border {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	outline: 1px solid var(--c27-border);
}

.c27-frame {
	position: absolute;
	border: 2px solid #fff;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
	cursor: move;
	touch-action: none;
}

.c27-frame:focus-visible {
	outline: 3px solid #ffd54a;
	outline-offset: 0;
}

.c27-editor-side {
	display: grid;
	gap: 0.75em;
	align-content: start;
}

.c27-editor-side .c27-selectors {
	grid-template-columns: 1fr;
}

.c27-editor-tools {
	display: grid;
	gap: 0.5em;
}

.c27-editor .c27-actions {
	margin-top: 1em;
}

@media (max-width: 720px) {
	.c27-editor-body {
		grid-template-columns: 1fr;
	}

	.c27-line {
		grid-template-columns: auto 56px 1fr;
	}

	.c27-line-thumb {
		width: 56px;
		height: 56px;
	}

	.c27-line-side {
		grid-column: 2 / -1;
		justify-items: start;
		grid-auto-flow: column;
		align-items: center;
	}
}

/* Module en pleine largeur sous la fiche produit. */
.c27-tirages-wide {
	clear: both;
	width: 100%;
	max-width: 1100px;
	margin: 2em auto;
	padding: 0 1em;
}

.c27-app-title {
	margin: 0 0 0.5em;
}

.c27-cta .button {
	min-height: 48px;
	padding: 0.75em 1.5em;
}

@media (min-width: 900px) {
	.c27-tirages-wide .c27-config {
		grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
		align-items: start;
	}

	.c27-tirages-wide .c27-global,
	.c27-tirages-wide .c27-lines {
		grid-column: 1;
	}

	.c27-tirages-wide .c27-recap {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: 1em;
	}
}

.c27-flash.c27-notice {
	background: #eef5fb;
	border-left: 4px solid var(--c27-accent);
}

.c27-tirages-app ul.c27-discounts {
	list-style: none;
	margin: 0.5em 0;
	padding: 0;
}

.c27-discounts li {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	font-size: 0.9em;
}

.c27-discount {
	color: var(--c27-ok);
}

.c27-discount-next {
	color: var(--c27-muted, #646970);
	font-style: italic;
}

/* ── Commande en deux étapes : photos, puis tirages ──────────────────── */

.c27-tirages-app ol.c27-steps {
	list-style: none;
	display: flex;
	gap: 0.5em;
	margin: 0 0 1em;
	padding: 0;
}

.c27-steps li {
	flex: 1;
	padding: 0.5em 0.75em;
	border-bottom: 3px solid var(--c27-border);
	color: var(--c27-muted);
	font-weight: 600;
}

.c27-steps li.is-done {
	border-bottom-color: var(--c27-ok);
}

.c27-steps li.is-current {
	border-bottom-color: var(--c27-accent);
	color: inherit;
}

.c27-step:focus {
	outline: none;
}

.c27-step-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em 1em;
	margin: 1em 0;
}

.c27-step-next {
	padding-top: 1em;
	border-top: 1px solid var(--c27-border);
}

.c27-next-hint {
	margin: 0;
	color: var(--c27-muted);
	font-size: 0.9em;
}

.c27-next-hint[data-state="ready"] {
	color: var(--c27-ok);
	font-weight: 600;
}

.c27-next {
	min-height: 44px;
	margin-left: auto;
}

.c27-next:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.c27-step-prints .c27-config {
	margin-top: 0;
}

/* ── Même réglage pour tout le lot, ou réglage photo par photo ────────── */

.c27-mode {
	border: 0;
	margin: 0 0 1em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.5em;
}

.c27-mode legend {
	font-weight: 600;
	margin-bottom: 0.4em;
}

.c27-mode-choice {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	padding: 0.7em 0.8em;
	border: 2px solid var(--c27-border);
	border-radius: 8px;
	cursor: pointer;
}

.c27-mode-choice.is-checked {
	border-color: var(--c27-accent);
	background: #f3f8fc;
}

.c27-mode-choice input {
	margin-top: 0.25em;
}

.c27-mode-choice span {
	display: grid;
	gap: 0.15em;
}

.c27-mode-choice small {
	color: var(--c27-muted);
}

.c27-selectors.is-compact {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0.4em;
	margin: 0.3em 0;
}

.c27-selectors.is-compact .c27-field select {
	min-height: 34px;
}

.c27-line.is-loose {
	border-style: dashed;
	border-color: var(--c27-accent);
}

/* ── Isolation du thème ─────────────────────────────────────────────────────
 * Certains thèmes imposent, en !important, leurs couleurs, polices et tailles aux
 * paragraphes, libellés, liens, boutons et champs des pages WooCommerce (sur le site
 * du studio : thème sombre, texte crème, boutons dorés, libellés de 10 px). Sous
 * l'identifiant du module et en !important, les règles ci-dessous l'emportent : le
 * module reste en texte foncé sur fond blanc. Les couleurs d'état (prêt, erreur…)
 * sont reprises plus bas avec la même priorité.
 */
#c27-tirages-app {
	background: #fff !important;
	color: #1d2327 !important;
	padding: 1.25em;
	border: 1px solid var(--c27-border);
}

#c27-tirages-app :where(p, span, li, td, th, label, legend, strong, b, em, small, dt, dd, div, figcaption, summary, h2, h3, h4) {
	color: inherit !important;
}

#c27-tirages-app :where(h2, h3, h4) {
	letter-spacing: normal !important;
	font-weight: 600 !important;
}

#c27-tirages-app :where(label, legend) {
	font-family: inherit !important;
	font-size: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

#c27-tirages-app :where(a:not(.button)) {
	color: var(--c27-accent) !important;
	text-decoration: underline;
}

#c27-tirages-app :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea) {
	background: #fff !important;
	color: #1d2327 !important;
	border: 1px solid #8c8f94 !important;
	border-radius: 4px !important;
	padding: 0.3em 0.5em !important;
	font-family: inherit !important;
	font-size: 1em !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

#c27-tirages-app .c27-qty {
	width: 5.5em !important;
	text-align: center;
}

#c27-tirages-app :where(.button, button, input[type="submit"], input[type="button"]) {
	font-size: 0.95em !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

#c27-tirages-app :where(.button, button, input[type="submit"], input[type="button"]):not(.button-link, .c27-remove, .alt, .c27-pick) {
	background: #fff !important;
	color: #1d2327 !important;
	border: 1px solid #1d2327 !important;
}

#c27-tirages-app :where(.button, button):not(.button-link, .c27-remove, .alt, .c27-pick):hover {
	background: #f0f0f1 !important;
	color: #1d2327 !important;
}

#c27-tirages-app :where(.button.alt, .c27-pick) {
	background: #1d2327 !important;
	color: #fff !important;
	border: 1px solid #1d2327 !important;
}

#c27-tirages-app :where(.button.alt, .c27-pick):hover {
	background: #3c434a !important;
	color: #fff !important;
}

#c27-tirages-app :where(.button, button):disabled {
	opacity: 0.45 !important;
	cursor: not-allowed;
}

#c27-tirages-app :where(.c27-pick) * {
	color: #fff !important;
}

/* Couleurs propres au module, avec la priorité de l'isolation. */
#c27-tirages-app .c27-dropzone {
	background: var(--c27-bg) !important;
}

#c27-tirages-app .c27-dropzone.is-over {
	background: #eaf2f8 !important;
}

#c27-tirages-app .c27-dropzone-hint,
#c27-tirages-app .c27-privacy,
#c27-tirages-app .c27-intro {
	color: var(--c27-muted) !important;
}

#c27-tirages-app .c27-pick {
	background: var(--c27-accent) !important;
	color: #fff !important;
}

#c27-tirages-app .c27-pick:hover {
	background: #174a6c !important;
	color: #fff !important;
}

#c27-tirages-app .c27-file {
	background: #fff !important;
}

#c27-tirages-app .c27-thumb {
	background: var(--c27-bg) !important;
}

#c27-tirages-app .c27-thumb-placeholder {
	color: var(--c27-muted) !important;
}

#c27-tirages-app .c27-state {
	color: var(--c27-muted) !important;
}

#c27-tirages-app .c27-file[data-state="validated"] .c27-state {
	color: var(--c27-ok) !important;
}

#c27-tirages-app .c27-file[data-state="rejected"] .c27-state,
#c27-tirages-app .c27-file[data-state="error"] .c27-state,
#c27-tirages-app .c27-error {
	color: var(--c27-error) !important;
}

#c27-tirages-app .c27-ok {
	color: var(--c27-ok) !important;
}

#c27-tirages-app .c27-remove {
	background: transparent !important;
	color: var(--c27-muted) !important;
}

#c27-tirages-app .c27-remove:hover {
	color: var(--c27-error) !important;
	background: var(--c27-bg) !important;
}

#c27-tirages-app .c27-notice {
	background: var(--c27-bg) !important;
}

#c27-tirages-app .c27-flash {
	background: #fcf0f1 !important;
}

#c27-tirages-app .c27-global,
#c27-tirages-app .c27-recap {
	background: #fff !important;
}

#c27-tirages-app .c27-help,
#c27-tirages-app .c27-colors {
	color: var(--c27-muted) !important;
}

#c27-tirages-app .c27-field select,
#c27-tirages-app .c27-field input,
#c27-tirages-app .c27-qty {
	background: #fff !important;
}

#c27-tirages-app .c27-line {
	background: #fff !important;
}

#c27-tirages-app .c27-line-thumb {
	background: var(--c27-bg) !important;
}

#c27-tirages-app .button-link {
	background: none !important;
	color: var(--c27-accent) !important;
}

#c27-tirages-app .c27-badge {
	background: #edfaef !important;
	color: var(--c27-ok) !important;
}

#c27-tirages-app .c27-badge-ratio-acceptable,
#c27-tirages-app .c27-badge-ratio-non_conforme,
#c27-tirages-app .c27-badge-res-limite {
	background: #fcf3e3 !important;
	color: #8a5a00 !important;
}

#c27-tirages-app .c27-badge-res-insuffisante,
#c27-tirages-app .c27-badge-price-none {
	background: #fcf0f1 !important;
	color: var(--c27-error) !important;
}

#c27-tirages-app .c27-badge-ratio-border {
	background: #eef2f6 !important;
	color: #2f4b66 !important;
}

#c27-tirages-app .c27-confirm-line {
	color: #8a5a00 !important;
}

#c27-tirages-app .c27-stage {
	background: #222 !important;
}

#c27-tirages-app .c27-stage.is-border {
	background: #fff !important;
}

#c27-tirages-app .c27-flash.c27-notice {
	background: #eef5fb !important;
}

#c27-tirages-app .c27-discount {
	color: var(--c27-ok) !important;
}

#c27-tirages-app .c27-discount-next {
	color: var(--c27-muted, #646970) !important;
}

#c27-tirages-app .c27-steps li {
	color: var(--c27-muted) !important;
}

#c27-tirages-app .c27-steps li.is-current {
	color: inherit !important;
}

#c27-tirages-app .c27-next-hint {
	color: var(--c27-muted) !important;
}

#c27-tirages-app .c27-next-hint[data-state="ready"] {
	color: var(--c27-ok) !important;
}

#c27-tirages-app .c27-mode-choice.is-checked {
	background: #f3f8fc !important;
}

#c27-tirages-app .c27-mode-choice small {
	color: var(--c27-muted) !important;
}