/* Le module remplace le bloc de personnalisation natif par son propre editeur canvas */
.js-product-customization {
	display: none !important;
}

/* Bouton declencheur + resume, affiches directement dans la page produit */
.pc-trigger-block {
	margin: 20px 0;
}

/* Appel a l'action principal de la fiche produit : il occupe la place du
   bouton d'achat, masque tant que la personnalisation n'est pas faite. Il
   doit donc en avoir le poids visuel, pas celui d'un lien secondaire. */
.pc-btn-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 1 auto;
	min-height: 48px;
	padding: 12px 22px;
	border: 0;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: var(--pc-accent, #e6007e);
	box-shadow: 0 4px 14px rgba(230, 0, 126, .35);
	transition: background-color .15s, box-shadow .15s, transform .1s;
}

.pc-btn-open:hover,
.pc-btn-open:focus {
	color: #fff;
	background: #c40069;
	box-shadow: 0 6px 18px rgba(230, 0, 126, .45);
}

.pc-btn-open:active {
	transform: translateY(1px);
}

.pc-btn-open .material-icons {
	font-size: 22px;
}

/* Une fois le design valide, la vedette revient a "Ajouter au panier" :
   le bouton de personnalisation repasse en second plan. */
.pc-btn-open.pc-btn-done {
	flex: 0 1 auto;
	min-height: 42px;
	padding: 8px 16px;
	font-size: 14px;
	color: var(--pc-accent, #e6007e);
	background: #fff;
	border: 2px solid var(--pc-accent, #e6007e);
	box-shadow: none;
}

.pc-btn-open.pc-btn-done:hover,
.pc-btn-open.pc-btn-done:focus {
	color: #fff;
	background: var(--pc-accent, #e6007e);
}

@media (max-width: 575px) {
	.pc-btn-open {
		width: 100%;
		flex-basis: 100%;
	}
}

.pc-trigger-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	padding: 10px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	background: #fafafa;
}

.pc-trigger-summary img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #ddd;
	background: #fff;
}

/* Miniatures recto/verso sous l'image produit une fois la perso validee.
   Inseree dans le conteneur de galerie du theme, qui peut etre en flex :
   width/flex-basis a 100% pour occuper toute la largeur sous l'image. */
.pc-face-switch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	width: 100%;
	flex-basis: 100%;
}

.pc-face-switch-item {
	padding: 0;
	border: 2px solid #ddd;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	line-height: 0;
}

.pc-face-switch-item.pc-active {
	border-color: var(--pc-accent, #e6007e);
}

.pc-face-switch-item img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.pc-trigger-summary-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.pc-summary-done-label {
	font-weight: 600;
	color: #27ae60;
}

.pc-price {
	font-weight: 700;
	font-size: 15px;
}

.pc-status {
	font-size: 13px;
}

.pc-status.pc-status-error {
	color: #c0392b;
}

.pc-status.pc-status-success {
	color: #27ae60;
}

/* ------------------------------------------------------------------ */
/* Ecran plein ecran (equivalent Cdesigner)                           */
/* ------------------------------------------------------------------ */

:root {
	--pc-accent: #e6007e;
}

.pc-fullscreen-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: #fff;
	z-index: 100000;
	flex-direction: column;
}

.pc-fullscreen-overlay.pc-open {
	display: flex;
}

.pc-fs-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	border-bottom: 1px solid #eee;
	flex: 0 0 auto;
}

.pc-fs-logo {
	font-weight: 700;
	font-size: 16px;
	color: #333;
}

.pc-fs-close {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	cursor: pointer;
	color: #444;
	font-size: 14px;
}

.pc-fs-close-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid #ccc;
	font-style: normal;
	font-size: 18px;
	line-height: 1;
}

.pc-fs-close:hover .pc-fs-close-x {
	background: #f2f2f2;
}

.pc-fs-body {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
	overflow: hidden;
}

/* Retour au mockup depuis la page d'outils : mobile uniquement, sur grand
   ecran le panneau est une colonne permanente a cote du produit. */
.pc-panel-back {
	display: none;
}

/* Mode photo : un seul onglet, la barre ne sert a rien sur grand ecran. */
.pc-photo-mode .pc-fs-sidebar {
	display: none;
}

.pc-fs-sidebar {
	flex: 0 0 90px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-right: 1px solid #eee;
	padding-top: 10px;
}

.pc-fs-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 4px;
	background: none;
	border: none;
	border-left: 3px solid transparent;
	cursor: pointer;
	color: #666;
	font-size: 12px;
	font-weight: 600;
}

.pc-fs-tab .material-icons {
	font-size: 22px;
}

.pc-fs-tab.pc-active {
	color: var(--pc-accent);
	border-left-color: var(--pc-accent);
}

.pc-fs-panel {
	flex: 0 0 300px;
	max-width: 300px;
	padding: 20px;
	overflow-y: auto;
	border-right: 1px solid #eee;
}

.pc-panel-title {
	margin: 0 0 15px;
	font-size: 16px;
	font-weight: 700;
}

.pc-browse-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #222;
	color: #fff;
	padding: 10px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 15px;
}

.pc-browse-btn:hover {
	background: #000;
}

.pc-clipart-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.pc-clipart-cat-btn {
	padding: 6px 12px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: #fff;
	font-size: 12px;
	cursor: pointer;
	color: #444;
}

.pc-clipart-cat-btn.pc-active {
	border-color: var(--pc-accent);
	color: var(--pc-accent);
	font-weight: 600;
}

.pc-clipart-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.pc-clipart-item {
	border: 1px solid #eee;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 1;
	background: repeating-conic-gradient(#f5f5f5 0% 25%, #fff 0% 50%) 50% / 12px 12px;
}

.pc-clipart-item:hover {
	border-color: var(--pc-accent);
}

.pc-clipart-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pc-font-dropdown {
	margin-bottom: 12px;
}

.pc-typography-label {
	display: block;
	font-size: 12px;
	color: #888;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.pc-text-input {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 12px;
	resize: vertical;
	font-family: inherit;
}

/* Palette de couleurs du texte : toujours visible dans l'onglet Texte. Un
   <input type="color"> seul etait inutilisable au doigt, et il etait de plus
   enferme dans la barre d'outils qui n'apparait qu'a la selection. */
.pc-text-color-block {
	margin-top: 16px;
}

.pc-color-label {
	margin-bottom: 6px;
}

.pc-text-colors {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.pc-text-color {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 2px solid #ddd;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: inset 0 0 0 2px #fff;
}

.pc-text-color.pc-active {
	border-color: var(--pc-accent, #e6007e);
}

.pc-custom-color {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #666;
	cursor: pointer;
	margin: 0;
}

.pc-custom-color input[type="color"] {
	width: 34px;
	height: 30px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: none;
	cursor: pointer;
}

/* Contour du texte : la premiere pastille l'enleve, d'ou la barre oblique
   plutot qu'une couleur, et le reglage d'epaisseur n'a de sens qu'une fois
   un contour choisi. */
.pc-outline-label {
	margin-bottom: 6px;
}

.pc-text-color.pc-outline-none {
	background: #fff;
	box-shadow: none;
	position: relative;
	overflow: hidden;
}

.pc-text-color.pc-outline-none::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -20%;
	width: 140%;
	height: 2px;
	background: #e74c3c;
	transform: rotate(-45deg);
}

.pc-outline-width {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	font-size: 13px;
	color: #666;
}

.pc-outline-width label {
	margin: 0;
	font-weight: normal;
	white-space: nowrap;
}

.pc-outline-width input[type="range"] {
	flex: 1;
	min-width: 90px;
	max-width: 180px;
	accent-color: var(--pc-accent, #e6007e);
}

.pc-text-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
	padding: 10px;
	background: #f8f8f8;
	border-radius: 4px;
}

.pc-tool-btn {
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 4px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pc-tool-btn .material-icons {
	font-size: 18px;
}

.pc-tool-danger {
	margin-left: auto;
	color: #c0392b;
}

/* Fond blanc et non gris : le mockup ne remplira jamais la colonne sur les
   deux axes, son ratio n'etant pas celui de l'ecran. Ce qui reste autour se
   confond ainsi avec le produit au lieu de l'encadrer d'une bande grise.
   Marges reduites au strict necessaire, chaque pixel rendu profite au mockup. */
.pc-fs-canvas-area {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	background: #fff;
	overflow: auto;
}

.pc-canvas-wrap {
	position: relative;
	display: inline-block;
	border: 1px solid #ddd;
	background: repeating-conic-gradient(#f0f0f0 0% 25%, #fff 0% 50%) 50% / 20px 20px;
	line-height: 0;
}

/* Voile d'attente pose sur le canevas : sans lui, l'import d'une grosse
   photo donne l'impression que rien ne se passe (lecture du fichier +
   decodage peuvent durer plusieurs secondes sur mobile). */
.pc-canvas-loader {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 10px;
	background: rgba(255, 255, 255, 0.85);
	line-height: 1.3;
	text-align: center;
}

.pc-canvas-loader-text {
	font-size: 14px;
	font-weight: 600;
	color: #444;
}

.pc-spinner {
	width: 38px;
	height: 38px;
	border: 3px solid rgba(0, 0, 0, 0.12);
	border-top-color: var(--pc-accent, #e6007e);
	border-radius: 50%;
	animation: pc-spin 0.8s linear infinite;
}

/* @keyframes pc-spin est defini plus bas, avec le spinner du bouton Valider. */

@media (prefers-reduced-motion: reduce) {
	.pc-spinner {
		animation-duration: 2.4s;
	}
}

/* La taille d'affichage reelle du canvas est fixee en JS (Fabric.js
   setDimensions cssOnly) pour toujours garder le bon ratio. */

.pc-btn-reset {
	color: #888;
}

/* Curseur de taille : sous le mockup plutot que dans un panneau, pour rester
   sous le pouce sur mobile sans recouvrir le produit. */
.pc-scale-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 420px;
	padding: 8px 14px;
	border: 1px solid #eee;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pc-scale-icon {
	display: flex;
	color: #aaa;
}

.pc-scale-icon-small .material-icons {
	font-size: 16px;
}

.pc-scale-icon-large .material-icons {
	font-size: 24px;
}

.pc-scale-value {
	flex: 0 0 auto;
	min-width: 58px;
	font-size: 13px;
	font-weight: 600;
	color: #444;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.pc-scale-bar input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 26px;
	margin: 0;
	padding: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.pc-scale-bar input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: #e3e3e3;
}

.pc-scale-bar input[type="range"]::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: #e3e3e3;
}

/* Pastille large : c'est une cible tactile, 22 px est le minimum confortable. */
.pc-scale-bar input[type="range"]::-webkit-slider-thumb {
	width: 22px;
	height: 22px;
	margin-top: -9px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--pc-accent, #e6007e);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	-webkit-appearance: none;
	appearance: none;
}

.pc-scale-bar input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--pc-accent, #e6007e);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.pc-fs-footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	padding: 14px 24px;
	border-top: 1px solid #eee;
}

.pc-fs-footer .pc-status {
	margin-right: auto;
}

/* Sous 900 px l'editeur s'empile. L'ORDRE EST CAPITAL : dans l'ordre naturel
   du HTML le panneau d'outils vient avant le canevas, donc la banque d'images
   repoussait le mockup hors de l'ecran et il fallait scroller pour voir ce
   qu'on personnalisait. On force donc le canevas en premier, les outils en
   tiroir en dessous. */
@media (max-width: 900px) {
	.pc-fs-body {
		flex-direction: column;
		overflow: hidden;
	}

	.pc-fs-canvas-area {
		order: 0;
		flex: 1 1 auto;
		min-height: 0;
	}

	/* z-index au-dessus de la page d'outils : la barre reste accessible quand
	   la page est ouverte, on passe donc de Photos a Texte sans revenir en
	   arriere (c'est ainsi que fonctionne l'editeur de reference). */
	.pc-fs-sidebar,
	.pc-photo-mode .pc-fs-sidebar {
		position: relative;
		z-index: 30;
		display: flex;
		order: 1;
		flex: 0 0 auto;
		flex-direction: row;
		padding-top: 0;
		background: #fff;
		border-right: none;
		border-top: 1px solid #eee;
	}

	.pc-fs-tab {
		flex: 1;
		padding: 10px 4px;
		border-left: none;
		border-top: 3px solid transparent;
	}

	.pc-fs-tab.pc-active {
		border-left-color: transparent;
		border-top-color: var(--pc-accent);
	}

	/* Le panneau n'est plus un tiroir qui rogne le mockup : c'est une page a
	   part entiere, rangee hors ecran a droite, qui glisse par-dessus
	   l'editeur quand on demande les outils. Tant qu'elle est fermee, le
	   produit occupe toute la hauteur disponible. */
	.pc-fs-panel {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 20;
		max-width: none;
		/* Le dernier bloc d'outils doit rester atteignable : la barre
		   d'onglets passe par-dessus le bas de la page. */
		padding: 14px 14px 96px;
		background: #fff;
		border-right: none;
		/* Arrive par la gauche, comme l'editeur de reference. */
		transform: translateX(-100%);
		transition: transform 0.28s ease;
	}

	.pc-panel-open .pc-fs-panel {
		transform: none;
	}

	/* Bandeau de retour pleine largeur : les marges negatives annulent le
	   padding du panneau pour qu'il touche les bords. */
	.pc-panel-back {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: -14px -14px 14px;
		padding: 13px 14px;
		border: none;
		background: var(--pc-accent, #e6007e);
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		text-align: left;
		cursor: pointer;
	}

	/* La page occupe tout l'ecran : la banque retrouve une vraie grille. */
	.pc-clipart-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Telephone en paysage : pas assez de hauteur pour empiler, on revient a une
   disposition en colonnes mais resserree. */
@media (max-width: 900px) and (max-height: 520px) {
	.pc-fs-body {
		flex-direction: row;
	}

	.pc-fs-canvas-area {
		order: 3;
	}

	.pc-fs-sidebar {
		order: 1;
		flex: 0 0 64px;
		flex-direction: column;
		border-top: none;
		border-right: 1px solid #eee;
	}

	.pc-fs-tab {
		border-top: none;
		border-left: 3px solid transparent;
	}

	.pc-fs-tab.pc-active {
		border-top-color: transparent;
		border-left-color: var(--pc-accent);
	}

	/* Le panneau reste une page glissante, mais la barre d'onglets revient a
	   gauche : en paysage la hauteur est la ressource rare. */
	.pc-fs-panel {
		left: 64px;
	}

	.pc-clipart-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Barre de progression de la validation (preparation + upload) */
.pc-progress-wrap {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	order: -1;
}

.pc-progress-track {
	flex: 1;
	height: 10px;
	background: #eee;
	border-radius: 999px;
	overflow: hidden;
}

.pc-progress-bar {
	height: 100%;
	width: 0;
	background: var(--pc-accent, #e6007e);
	border-radius: 999px;
	transition: width 0.25s ease;
}

.pc-progress-text {
	font-size: 13px;
	font-weight: 600;
	color: #444;
	white-space: nowrap;
	min-width: 42px;
	text-align: right;
}

/* Spinner du bouton "Valider" pendant l'export/enregistrement */
#pc-validate.pc-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
	opacity: 0.9;
}

#pc-validate.pc-loading > span {
	visibility: hidden;
}

#pc-validate.pc-loading::after {
	content: '';
	position: absolute;
	top: calc(50% - 9px);
	left: calc(50% - 9px);
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pc-spin 0.7s linear infinite;
}

@keyframes pc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Ergonomie tactile / mobile de l'editeur plein ecran */
@media (max-width: 768px) {
	.pc-fs-header {
		padding: 10px 14px;
	}

	.pc-fs-canvas-area {
		padding: 8px;
		gap: 8px;
	}

	.pc-fs-footer {
		flex-wrap: wrap;
		gap: 10px;
		padding: 12px 14px;
	}

	.pc-fs-footer .pc-price {
		width: 100%;
		text-align: center;
		margin-right: 0;
	}

	.pc-fs-footer .pc-status {
		width: 100%;
		text-align: center;
		margin-right: 0;
		order: 3;
	}

	#pc-validate {
		flex: 1;
	}

	/* Cibles tactiles plus grandes */
	.pc-tool-btn {
		width: 40px;
		height: 40px;
	}

	.pc-face-tab {
		padding: 8px 14px;
	}
}

/* Onglets de faces (recto / verso...) au-dessus du canevas */
.pc-face-tabs {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.pc-face-tab {
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
	padding: 8px 18px;
	border-radius: 999px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.pc-face-tab:hover {
	border-color: var(--pc-accent, #e6007e);
}

.pc-face-tab.pc-active {
	background: var(--pc-accent, #e6007e);
	border-color: var(--pc-accent, #e6007e);
	color: #fff;
}

/* Pastilles de coloris du produit */
.pc-color-swatches {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.pc-color-swatch {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 2px solid #ddd;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: inset 0 0 0 2px #fff;
	transition: border-color 0.15s ease;
}

.pc-color-swatch:hover {
	border-color: #999;
}

.pc-color-swatch.pc-active {
	border-color: var(--pc-accent, #e6007e);
}