/* MADJX Builder — éditeur client. Mobile d'abord. */

/* ---------- Bouton et résumé sur la page produit ---------- */
.madjx-cta {
	width: 100%;
	margin: 0 0 1em;
}

.madjx-cta__open.button {
	width: 100%;
	margin: 0;
}

.madjx-cta__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	padding: 8px;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	background: #fafafa;
	font-size: 0.9em;
	line-height: 1.4;
}

.madjx-cta__summary[hidden] { display: none; }

.madjx-cta__thumb {
	width: 72px;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
	background: #fff;
	flex: 0 0 auto;
}

.madjx-cta__thumb[hidden] { display: none; }

/* ---------- Fenêtre ---------- */
html.madjx-no-scroll,
html.madjx-no-scroll body {
	overflow: hidden;
}

.madjx-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: stretch;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	-webkit-tap-highlight-color: transparent;
}

.madjx-modal[hidden] { display: none; }

.madjx-modal__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 720px;
	height: 100%;
	background: #fff;
	color: #111;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
	.madjx-modal { align-items: center; padding: 24px; }
	.madjx-modal__panel { height: auto; max-height: calc(100vh - 48px); border-radius: 10px; }
}

.madjx-modal__header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	padding: 10px 12px;
	background: #fff;
	color: #111;
	border-bottom: 1px solid #e3e5e8;
}

.madjx-modal__title {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	color: #111;
	font-size: 1.05em;
	text-transform: none;
	letter-spacing: 0;
}

.madjx-modal__zone {
	order: 3;
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.85em;
	opacity: 0.9;
}

.madjx-icon-btn {
	flex: 0 0 auto;
	margin: 0 0 0 auto !important;
	padding: 0;
	width: 40px;
	min-height: 40px;
	border: 0;
	background: transparent;
	color: #111;
	font-size: 20px;
	line-height: 40px;
	cursor: pointer;
}

.madjx-chip {
	margin: 0;
	padding: 4px 10px;
	min-height: 0;
	border: 1px solid #c9ccd1;
	border-radius: 999px;
	background: transparent;
	color: #111;
	font-size: 0.85em;
	line-height: 1.4;
	text-transform: none;
	cursor: pointer;
}

.madjx-chip.is-active { background: #27a4ff; border-color: #27a4ff; color: #fff; }

/* ---------- Zone de travail ---------- */
.madjx-stage {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 260px;
	background: #f3f3f3;
}

.madjx-stage .canvas-container { margin: 0 auto; }

.madjx-stage__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	color: #555;
}

.madjx-stage__loading[hidden] { display: none; }

.madjx-status {
	min-height: 0;
	padding: 0 12px;
	font-size: 0.9em;
}

.madjx-status:not(:empty) { padding: 8px 12px; }
.madjx-status--erreur { background: #fdecec; color: #8a1f1f; }
.madjx-status--attention { background: #fff6e0; color: #6b4a00; }
.madjx-status--bon { background: #eaf7ee; color: #1d5e32; }

/* ---------- Outils ---------- */
.madjx-tools { padding: 12px; }

.madjx-tools__row,
.madjx-props__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin-bottom: 10px;
}

.madjx-tools__row { align-items: stretch; }
.madjx-tools__row > * { flex: 1 1 140px; }

.madjx-props[hidden],
.madjx-props__row[hidden] { display: none; }

.madjx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 10px 14px;
	min-height: 44px;
	border: 1px solid #111;
	border-radius: 6px;
	background: #fff;
	color: #111;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	user-select: none;
}

.madjx-btn:focus-visible,
.madjx-chip:focus-visible,
.madjx-icon-btn:focus-visible { outline: 3px solid #27a4ff; outline-offset: 2px; }

.madjx-btn--primary { background: #111; color: #fff; }
.madjx-btn--danger { border-color: #b32d2e; color: #b32d2e; }
.madjx-btn--ghost { border-color: transparent; background: transparent; color: #555; }
.madjx-btn--small { flex: 0 0 auto; min-height: 40px; padding: 8px 10px; font-size: 0.85em; }
.madjx-btn--wide { flex: 1 1 auto; }
.madjx-btn[aria-pressed="true"] { background: #111; color: #fff; }

.madjx-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 0.8em;
	font-weight: 600;
	color: #444;
}

.madjx-field--grow { flex: 1 1 160px; }

.madjx-field input[type="text"],
.madjx-field select {
	margin: 0;
	min-height: 40px;
	font-size: 16px; /* évite le zoom automatique d'iOS */
}

.madjx-field input[type="color"] {
	width: 52px;
	height: 40px;
	margin: 0;
	padding: 2px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
}

.madjx-field input[type="range"] {
	width: 100%;
	margin: 8px 0;
	accent-color: #27a4ff;
}

.madjx-metrics {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 0.9em;
}

.madjx-badge {
	display: block;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 0.9em;
}

.madjx-badge--bon { background: #eaf7ee; color: #1d5e32; }
.madjx-badge--attention { background: #fff6e0; color: #6b4a00; }
.madjx-badge--faible { background: #fdecec; color: #8a1f1f; }

/* ---------- Pied ---------- */
.madjx-modal__footer {
	position: sticky;
	bottom: 0;
	display: flex;
	gap: 8px;
	margin-top: auto;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	border-top: 1px solid #e5e5e5;
	background: #fff;
}

/* 0.2.2 — les blocs de la fenêtre ne doivent jamais rétrécir (sinon le canvas déborde sur les boutons). */
.madjx-modal__panel > * {
	flex-shrink: 0;
}

.madjx-stage {
	overflow: hidden;
}

.madjx-stage canvas {
	max-width: none !important;
}

/* 0.2.3 — bouton Aperçu */
.madjx-tools__row > [data-madjx-preview] { flex: 1 1 100px; }
.madjx-stage.is-preview::after {
	content: "Aperçu";
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 12px;
	pointer-events: none;
}

/* 0.2.4 — indicateurs sur la photo : taille imprimée et qualité */
.madjx-hud {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	max-width: calc(100% - 20px);
	pointer-events: none;
}

.madjx-hud[hidden] { display: none; }

.madjx-hud__size,
.madjx-hud__quality {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
}

.madjx-hud__size { background: #111; color: #fff; font-size: 17px; }
.madjx-hud__quality--bon { background: #1e8e3e; color: #fff; }
.madjx-hud__quality--attention { background: #f2b200; color: #1a1a1a; }
.madjx-hud__quality--faible { background: #d93025; color: #fff; }

.madjx-hud__quality.is-flash { animation: madjx-flash 0.6s ease-out 2; }

@keyframes madjx-flash {
	0% { transform: scale(1); }
	40% { transform: scale(1.12); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.madjx-hud__quality.is-flash { animation: none; }
}

@media (max-width: 480px) {
	.madjx-hud { top: 6px; right: 6px; }
	.madjx-hud__size { font-size: 15px; }
	.madjx-hud__quality { font-size: 13px; padding: 5px 10px; }
}

/* 0.3.1 — deux colonnes sur ordinateur : réglages à gauche, casquette en grand à droite */
.madjx-body {
	display: flex;
	flex-direction: column;
}

.madjx-side {
	display: flex;
	flex-direction: column;
}

@media (min-width: 900px) {
	.madjx-modal { align-items: center; padding: 20px; }

	.madjx-modal__panel {
		max-width: 1180px;
		height: calc(100vh - 40px);
		max-height: 900px;
		overflow: hidden;
	}

	.madjx-modal__panel > .madjx-body {
		flex: 1 1 auto;
		flex-shrink: 1;
		min-height: 0;
		display: grid;
		grid-template-columns: 360px minmax(0, 1fr);
	}

	.madjx-body > .madjx-stage {
		grid-column: 2;
		grid-row: 1;
		height: 100%;
		min-height: 0;
		align-items: center;
	}

	.madjx-body > .madjx-side {
		grid-column: 1;
		grid-row: 1;
		min-height: 0;
		overflow-y: auto;
		border-right: 1px solid #e5e5e5;
	}

	.madjx-side .madjx-tools__row > * { flex-basis: 100%; }
	.madjx-side .madjx-props__row > .madjx-field--grow { flex-basis: 100%; }
	.madjx-side .madjx-props__row > .madjx-btn--small { flex: 1 1 0; }
	.madjx-side .madjx-modal__footer { position: sticky; bottom: 0; }
}

/* 0.4.0 — choix de police en vignettes (chaque nom écrit dans sa police) */
.madjx-field--fonts { flex: 1 1 100%; }

.madjx-fonts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 6px;
	max-height: 196px;
	overflow-y: auto;
	padding: 2px;
}

.madjx-font {
	margin: 0;
	padding: 8px 6px;
	min-height: 44px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	color: #111;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.madjx-font:hover { border-color: #27a4ff; }
.madjx-font.is-active { border: 2px solid #27a4ff; background: #eef7ff; }
.madjx-font:focus-visible { outline: 3px solid #27a4ff; outline-offset: 1px; }

.madjx-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* 0.5.0 — grille couleurs × quantités */
.madjx-grille-active form.variations_form table.variations,
.madjx-grille-active form.variations_form .reset_variations,
.madjx-grille-active form.variations_form .woocommerce-variation-price,
.madjx-grille-active form.cart .quantity {
	display: none !important;
}

.madjx-grille {
	width: 100%;
	margin: 0 0 1em;
	padding: 12px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fff;
}

.madjx-grille__titre {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin-bottom: 8px;
}

.madjx-grille__titre span { color: #666; font-size: 0.85em; }

.madjx-grille__lignes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 8px;
}

.madjx-grille__ligne {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 8px;
	border: 1px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 400;
}

.madjx-grille__ligne.is-courante { border-color: #27a4ff; box-shadow: 0 0 0 1px #27a4ff; }
.madjx-grille__ligne img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.madjx-grille__nom { flex: 1 1 auto; min-width: 0; font-size: 0.95em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.madjx-grille__stock { display: block; font-style: normal; font-size: 0.75em; color: #1e7e34; }
.madjx-grille__stock.is-bas { color: #b45309; }

.madjx-grille__ligne input[type="number"] {
	width: 64px;
	min-width: 64px;
	height: 40px;
	margin: 0;
	padding: 4px;
	text-align: center;
	font-size: 16px;
}

.madjx-grille__resume {
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	background: #f6f6f6;
	font-size: 0.95em;
}

.madjx-grille__resume.is-attention { background: #fff6e0; color: #6b4a00; }
.madjx-grille__resume.is-erreur { background: #fdecec; color: #8a1f1f; font-weight: 600; }
.madjx-grille__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.madjx-grille__somme { margin-left: auto; font-size: 1.15em; font-weight: 700; }
.madjx-grille__prochain { margin-top: 4px; color: #1d5e32; font-size: 0.9em; }

.madjx-grille__echelons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.madjx-echelon {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 60px;
	min-width: 0;
	padding: 6px 2px;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	text-align: center;
	line-height: 1.25;
}

.madjx-echelon.is-active { border: 2px solid #27a4ff; background: #eef7ff; }
.madjx-echelon__qte { font-size: 0.8em; color: #555; }
.madjx-echelon__prix { font-weight: 700; font-size: 0.95em; white-space: nowrap; }
.madjx-echelons__note { flex: 1 1 100%; color: #777; font-size: 0.8em; text-align: center; }

/* ---------- Mode leatherette : choix de l'écusson ---------- */
.madjx-ecusson{margin:0 0 16px;padding:12px;border:1px solid #e3e5e8;border-radius:10px;background:#fafafa}
.madjx-ecusson.is-erreur{border-color:#c0392b;box-shadow:0 0 0 2px rgba(192,57,43,.2)}
.madjx-ecusson__section{margin-bottom:12px}
.madjx-ecusson__titre{font-weight:700;font-size:.9em;margin-bottom:6px}
.madjx-ecusson__formes{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:3px}
.madjx-forme{display:flex;align-items:center;justify-content:center;height:58px;padding:3px;border:2px solid #d7dade;border-radius:8px;background:#fff;color:#4b5563;cursor:pointer;line-height:0}
.madjx-forme svg{width:100%;height:100%}
.madjx-forme img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.madjx-forme:hover{border-color:#9aa3ad}
.madjx-forme.is-on{border-color:#111;color:#111;box-shadow:0 0 0 1px #111}
.madjx-ecusson__tailles{display:flex;flex-wrap:wrap;gap:8px}
.madjx-ecusson__cuirs{display:flex;flex-wrap:wrap;gap:4px;max-height:300px;overflow:auto;padding:3px}
.madjx-cuir{position:relative;width:48px;height:48px;padding:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #c9ccd1;background-size:cover;background-position:center;cursor:pointer}
.madjx-cuir:hover{transform:scale(1.08)}
.madjx-cuir.is-on{box-shadow:0 0 0 2px #111}
.madjx-cuir__gravure{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #c9ccd1}
.madjx-ecusson__recap{font-size:.9em;font-weight:600}
.madjx-ecusson__note{font-size:.85em;color:#b45309;margin-top:4px}

.madjx-taille{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;padding:8px 16px;min-width:110px;border:2px solid #d7dade;border-radius:8px;background:#fff;color:#111;font-size:.95em;line-height:1.25;text-transform:none;cursor:pointer}
.madjx-taille span{font-size:.85em;color:#6b7280}
.madjx-taille:hover{border-color:#9aa3ad}
.madjx-taille.is-on{border-color:#111;box-shadow:0 0 0 1px #111}

.madjx-ecusson-size{align-items:center;gap:8px;margin-bottom:10px}
.madjx-ecusson-size__label{font-weight:700;font-size:.9em;width:100%}

.madjx-zoom{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(17,17,17,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.madjx-zoom button{display:flex!important;align-items:center;justify-content:center;width:34px!important;height:34px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;color:#fff!important;line-height:1!important;text-transform:none!important;cursor:pointer}
.madjx-zoom button:hover,.madjx-zoom button:active{background:rgba(255,255,255,.2)!important}
.madjx-zoom button svg{display:block;pointer-events:none}
.madjx-zoom__val{min-width:42px;text-align:center;font-size:.78em;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}

/* 0.8.0 — pastilles de couleur */
.madjx-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.madjx-pastille {
	position: relative; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0;
	border: 2px solid #fff; border-radius: 50%; cursor: pointer;
	box-shadow: 0 0 0 1px #cfcfcf; background-color: #ccc; line-height: 1;
	-webkit-appearance: none; appearance: none;
}
.madjx-pastille:hover { box-shadow: 0 0 0 2px #888; }
.madjx-pastille.is-sel { box-shadow: 0 0 0 3px #111; }
.madjx-pastille[data-n]::after {
	content: attr(data-n); position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 9px; background: #111; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.madjx-pastille-nom { margin: 0 0 8px; min-height: 1.3em; font-size: 0.85em; color: #666; }
.madjx-grille__lignes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }
.madjx-couleur { margin: 0; padding: 8px 10px; border: 1px solid #e2e2e2; border-radius: 8px; }
.madjx-couleur[hidden] { display: none; }
.madjx-couleur__tete { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.madjx-couleur__tete strong { flex: 1 1 auto; font-size: 0.95em; }
.madjx-couleur__pt { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 1px #cfcfcf; background-color: #ccc; }
.madjx-couleur__x { width: 30px; height: 30px; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: #777; font-size: 22px; line-height: 1; cursor: pointer; }
.madjx-couleur__corps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.madjx-couleur__corps .madjx-grille__ligne:only-child { grid-column: 1 / -1; }
.madjx-couleur__corps .madjx-grille__nom { white-space: normal; overflow: visible; text-overflow: clip; }
.madjx-couleur__corps .madjx-grille__ligne input[type="number"] { width: 64px; min-width: 64px; margin-left: auto; }
.madjx-couleur__corps .madjx-grille__ligne { padding: 4px 6px; }

/* 0.8.5 — annuler la conception depuis le résumé */
.madjx-cta__summary { position: relative; }
.madjx-cta__x {
	position: absolute !important; top: 6px; right: 6px; width: 30px !important; height: 30px !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(0,0,0,.06) !important;
	color: #444 !important; font-size: 20px !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; text-transform: none !important;
}
.madjx-cta__x:hover { background: rgba(0,0,0,.14) !important; }
.madjx-cta__text { padding-right: 30px; }

/* 0.8.7 — taille de l'écusson en images */
.madjx-ecusson__tailles { display: flex; flex-wrap: wrap; gap: 8px; }
.madjx-taille--img { flex: 0 1 150px; min-width: 0 !important; max-width: 150px; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: none !important; line-height: 0; overflow: hidden; box-shadow: 0 0 0 1px #d7dade; }
.madjx-taille--img img { display: block; width: 100%; height: auto; max-width: none; }
.madjx-taille--img:hover { box-shadow: 0 0 0 2px #9aa3ad; }
.madjx-taille--img.is-on { box-shadow: 0 0 0 3px #111 !important; }

/* 0.8.9 — cuirs : tuiles serrées et plus grandes (le thème ajoute des marges aux boutons : on les annule) */
.madjx-ecusson__cuirs { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px !important; max-height: 340px; padding: 4px 6px 4px 4px; }
.madjx-ecusson__cuirs .madjx-cuir {
	width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
	border: 2px solid #fff !important; border-radius: 10px !important; box-shadow: 0 0 0 1px #c9ccd1 !important; line-height: 1 !important;
}
.madjx-ecusson__cuirs .madjx-cuir:hover { transform: none; box-shadow: 0 0 0 2px #888 !important; }
.madjx-ecusson__cuirs .madjx-cuir.is-on { box-shadow: 0 0 0 3px #111 !important; }
.madjx-ecusson__cuirs .madjx-cuir__gravure { top: 3px !important; right: 3px !important; bottom: auto !important; left: auto !important; width: 12px !important; height: 12px !important; }

/* 0.8.19 — la photo de la casquette de la couleur choisie, dans le bloc des quantités */
.madjx-couleur__tete { gap: 12px; margin-bottom: 8px; }
.madjx-couleur__photo { width: 84px; height: 84px; flex: 0 0 auto; object-fit: contain; border-radius: 8px; background: #f6f6f6; }
.madjx-couleur__tete strong { font-size: 1.05em; line-height: 1.25; }

/* 0.9.0 — galerie en grille fixe (sans slider) */
.madjx-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; margin: 0 0 16px; }
.madjx-galerie__item {
	display: block !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; width: 100%;
	border: 1px solid #e5e5e5 !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important;
	line-height: 0 !important; overflow: hidden; cursor: zoom-in; text-transform: none !important; letter-spacing: 0 !important;
}
.madjx-galerie__item:hover { border-color: #999 !important; }
.madjx-galerie__item.is-principale { grid-column: 1 / -1; }
.madjx-galerie__img { display: block; width: 100%; height: auto; object-fit: contain; aspect-ratio: 1 / 1; background: #fff; }
.madjx-galerie__item.is-principale .madjx-galerie__img { aspect-ratio: auto; }
.madjx-galerie__vide { grid-column: 1 / -1; }
@media (max-width: 549px) { .madjx-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } }
.madjx-lb { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.88); }
.madjx-lb[hidden] { display: none; }
.madjx-lb__img { max-width: 94vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; background: #fff; border-radius: 6px; }
.madjx-lb button {
	position: absolute; margin: 0 !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; border-radius: 50% !important;
	background: rgba(255,255,255,.18) !important; color: #fff !important; box-shadow: none !important; line-height: 1 !important; cursor: pointer; text-transform: none !important;
}
.madjx-lb__x { top: 14px; right: 14px; width: 44px; height: 44px; font-size: 28px; }
.madjx-lb__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 34px; }
.madjx-lb__prev { left: 10px; }
.madjx-lb__next { right: 10px; }
html.madjx-lb-ouvert, html.madjx-lb-ouvert body { overflow: hidden; }

/* 0.9.1 — WooCommerce ne bloque plus le formulaire (voile « chargement ») pendant qu'il cherche la variation */
.madjx-builder-actif form.variations_form .blockUI,
.madjx-builder-actif form.variations_form .blockOverlay { display: none !important; }

/* 0.9.2 — formes d'écusson : plus grosses et collées, comme les couleurs de leatherette */
.madjx-ecusson__formes { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important; gap: 4px !important; }
.madjx-ecusson__formes .madjx-forme { height: 70px !important; margin: 0 !important; min-height: 0 !important; padding: 4px !important; }

/* 0.9.2 — échelons de prix : plus visuels, pour inciter à commander plus */
.madjx-echelons__titre { flex: 1 1 100%; margin: 4px 0 2px; font-weight: 700; font-size: 0.95em; color: #9a4f12; }
.madjx-echelons__rail { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.madjx-echelon { position: relative; padding: 9px 2px 8px; border: 1px solid #f0d6b8; background: #fffaf3; border-radius: 10px; }
.madjx-echelon__qte { font-size: 0.78em; color: #8a6a4a; }
.madjx-echelon__prix { font-size: 1.08em; color: #1a1a1a; }
.madjx-echelon__eco { margin-top: 3px; padding: 1px 7px; border-radius: 999px; background: #dff5e5; color: #17692f; font-size: 0.72em; font-weight: 700; line-height: 1.5; }
.madjx-echelon.is-active { border: 1px solid #c8702a; background: #c8702a; box-shadow: 0 3px 10px rgba(200,112,42,.35); transform: translateY(-2px); }
.madjx-echelon.is-active .madjx-echelon__qte { color: #ffe9d2; }
.madjx-echelon.is-active .madjx-echelon__prix { color: #fff; }
.madjx-echelon.is-active .madjx-echelon__eco { background: #fff; }
.madjx-echelon.is-best:not(.is-active) { border-color: #7cc592; background: #f2fbf5; }
.madjx-echelon.is-best::before {
	content: "Meilleur prix"; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 999px;
	background: #17692f; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; white-space: nowrap;
}
.madjx-grille__resume { background: #fff4e6; border: 1px solid #f3dcc0; }
.madjx-grille__resume.is-attention { background: #fff0c9; border-color: #efd48a; }
.madjx-grille__somme { color: #b45c14; font-size: 1.3em; }
.madjx-grille__prochain { margin-top: 6px; color: #17692f; font-weight: 600; font-size: 0.92em; }
.madjx-prochain__barre { margin-top: 5px; height: 6px; border-radius: 3px; background: #e6d9c8; overflow: hidden; }
.madjx-prochain__barre i { display: block; height: 100%; background: #2f9e55; border-radius: 3px; transition: width .25s ease; }

/* 0.9.4 — économie en dollars par casquette */
.madjx-echelon__eco { padding: 2px 6px; font-size: 0.7em; line-height: 1.25; text-align: center; white-space: normal; }

/* 0.9.5 — pastille d'économie compacte, sur une seule ligne */
.madjx-echelon__eco { padding: 1px 8px; font-size: 0.78em; line-height: 1.5; white-space: nowrap; }
.madjx-echelons__titre small { font-weight: 400; font-size: 0.8em; color: #8a6a4a; }

/* 0.9.6 — style noir et blanc, avec le vert de la boutique (#15912f) */
.madjx-grille__resume { background: #222; color: #fff; border: 0; border-radius: 10px; padding: 12px 16px; }
.madjx-grille__resume.is-attention { background: #222; color: #fff; box-shadow: inset 4px 0 0 #f5a623; }
.madjx-grille__resume.is-erreur { background: #7a1f1f; color: #fff; }
.madjx-grille__somme { color: #fff; font-size: 1.3em; }
.madjx-grille__prochain { color: #8fe3a1; }
.madjx-prochain__barre { background: #4a4a4a; }
.madjx-prochain__barre i { background: #15912f; }
.madjx-echelons__titre { color: #111; font-size: 1.1em; }
.madjx-echelons__titre small { color: #777; }
.madjx-echelon { background: #fff; border: 1px solid #e0e0e0; border-radius: 14px; }
.madjx-echelon__qte { color: #555; }
.madjx-echelon__prix { color: #111; }
.madjx-echelon__eco { background: #15912f; color: #fff; }
.madjx-echelon.is-active { background: #111; border-color: #111; box-shadow: none; transform: none; }
.madjx-echelon.is-active .madjx-echelon__qte { color: #ddd; }
.madjx-echelon.is-active .madjx-echelon__prix { color: #fff; }
.madjx-echelon.is-active .madjx-echelon__eco { background: #15912f; color: #fff; }
.madjx-echelon.is-best:not(.is-active) { background: #fff; border-color: #e0e0e0; }
.madjx-echelon.is-best::before { background: #15912f; color: #fff; }

/* 0.9.7 — version plus légère : cartes blanches, économies en texte vert, seul « Meilleur prix » est plein */
.madjx-grille__resume { background: #f5f5f5; color: #444; border: 0; }
.madjx-grille__resume.is-attention { background: #f5f5f5; color: #444; box-shadow: inset 4px 0 0 #f5a623; }
.madjx-grille__resume.is-erreur { background: #fdecec; color: #8a1f1f; }
.madjx-grille__somme { color: #111; }
.madjx-grille__prochain { color: #15912f; }
.madjx-prochain__barre { background: #dedede; }
.madjx-echelon__eco, .madjx-echelon.is-active .madjx-echelon__eco { background: none; color: #15912f; padding: 0; font-size: 0.82em; font-weight: 700; }
.madjx-echelon.is-active { background: #fff; border: 2px solid #111; }
.madjx-echelon.is-active .madjx-echelon__qte { color: #555; }
.madjx-echelon.is-active .madjx-echelon__prix { color: #111; }

/* 0.9.9 — taille de l'écusson : image sans texte, nom et description en vrai texte dessous */
.madjx-taille--img { display: flex !important; flex-direction: column; align-items: stretch; flex: 0 1 170px; max-width: 170px; line-height: 1.25 !important; overflow: hidden; background: #fff !important; text-align: center; }
.madjx-taille--img img { background: #fff; }
.madjx-taille__txt { display: block; padding: 4px 8px 10px; }
.madjx-taille__txt strong { display: block; font-size: 1.05em; color: #111; }
.madjx-taille__txt em { display: block; font-style: normal; font-size: 0.85em; color: #6b7280; }

/* 1.0.0 — tailles : petites images, description au survol (et sur la taille choisie) */
.madjx-taille--img { position: relative; flex: 0 0 112px !important; max-width: 112px !important; display: block !important; line-height: 0 !important; }
.madjx-taille--img img { width: 100%; height: auto; }
.madjx-taille__txt { display: none !important; }
.madjx-taille__tip {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 4px; background: rgba(17,17,17,.88); color: #fff;
	font-size: 11.5px; font-weight: 500; line-height: 1.25; text-align: center; opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.madjx-taille--img:hover .madjx-taille__tip, .madjx-taille--img:focus-visible .madjx-taille__tip, .madjx-taille--img.is-on .madjx-taille__tip { opacity: 1; }

/* 1.0.0 — formes : centrées dans leur tuile (boîte bien dimensionnée, image centrée) */
.madjx-ecusson__formes .madjx-forme { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; }
.madjx-ecusson__formes .madjx-forme img { box-sizing: border-box; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; margin: 0 auto !important; object-fit: contain; }

/* 1.0.2 — l'étiquette de taille s'affiche SOUS l'image (place réservée, pas de saut) au survol ou quand elle est choisie */
.madjx-taille--img { display: flex !important; flex-direction: column; }
.madjx-taille__tip {
	position: static !important; display: block; box-sizing: border-box; width: 100%; min-height: 3em; padding: 4px 6px 7px !important;
	background: transparent !important; color: #111 !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.25 !important;
	text-align: center; opacity: 0; transition: opacity .15s ease;
}

/* 1.0.4 – prix par couleur */
.madjx-echelons__couleur{margin-top:8px;padding:8px 10px;background:#f5f5f5;border-radius:8px;font-size:13px;line-height:1.4;color:#444}
.madjx-echelons__couleur strong{color:#111}

/* 1.0.5 – grille de prix par groupe de couleurs */
.madjx-echtable__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.madjx-echtable{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;margin:0;border:0}
.madjx-echtable th,.madjx-echtable td{padding:8px 6px;text-align:center;border:0;border-bottom:1px solid #e6e6e6;white-space:nowrap;background:#fff}
.madjx-echtable thead th,.madjx-echtable tr:first-child th{font-weight:600;color:#666;font-size:13px}
.madjx-echtable .madjx-echtable__vide{text-align:left;font-weight:400;font-size:12px;color:#888}
.madjx-echtable .madjx-echtable__nom{text-align:left;white-space:normal;min-width:110px}
.madjx-echtable .madjx-echtable__nom strong{display:block;color:#111;font-size:14px}
.madjx-echtable .madjx-echtable__nom small{display:block;color:#777;font-size:11px;line-height:1.3;font-weight:400}
.madjx-echtable td{font-weight:700;color:#111;font-size:15px}
.madjx-echtable tr.is-courant td,.madjx-echtable tr.is-courant th{background:#f1f8f2}
.madjx-echtable th.is-active{color:#fff;background:#111;border-radius:6px 6px 0 0}
.madjx-echtable td.is-active{box-shadow:inset 2px 0 #111,inset -2px 0 #111}
.madjx-echtable tr:last-child td.is-active{box-shadow:inset 2px 0 #111,inset -2px 0 #111,inset 0 -2px #111}

/* 1.0.6 – prix sur la carte de couleur */
.madjx-couleur__tete{flex-wrap:wrap}
.madjx-couleur__tete strong{display:block}
.madjx-couleur__prix{display:block;flex-basis:100%;order:5;margin-top:2px;font-weight:700;font-size:15px;color:#111}
.madjx-couleur__prix:empty{display:none}

/* 1.0.8 – clic sur une couleur : la carte vient à l'écran */
.madjx-couleur{scroll-margin-top:90px}
.madjx-couleur.is-flash{animation:madjx-flash 1.2s ease-out}
@keyframes madjx-flash{0%{box-shadow:0 0 0 3px #15912F}100%{box-shadow:0 0 0 0 rgba(21,145,47,0)}}
@media (prefers-reduced-motion:reduce){.madjx-couleur.is-flash{animation:none}}

/* 1.0.9 – écusson sur mesure : avertissement */
.madjx-ecusson__note.is-sur-mesure{margin-top:10px;padding:12px 14px;background:#eef7f0;border:1px solid #bfe0c6;border-radius:10px;font-size:14px;line-height:1.45;color:#1d3a24}
.madjx-ecusson__note.is-sur-mesure strong{display:block;margin-bottom:4px;color:#111}
.madjx-ecusson__note.is-sur-mesure p{margin:0 0 8px}
.madjx-ecusson__ack{display:flex;gap:8px;align-items:flex-start;cursor:pointer;font-weight:600;color:#111}
.madjx-ecusson__ack input{margin-top:3px;width:18px;height:18px;flex:none}
.madjx-ecusson__note.is-erreur{border-color:#c0272d;box-shadow:0 0 0 2px rgba(192,39,45,.25)}

/* 1.1.0 – écusson personnalisé : on téléverse, pas d'éditeur */
html.madjx-sur-mesure .madjx-cta{display:none !important}
.madjx-ecusson__upload{display:inline-block;margin:2px 0 8px;cursor:pointer}
.madjx-ecusson__upload input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.madjx-ecusson__btn{display:inline-block;background:#15912F;color:#fff;border-radius:8px;padding:10px 16px;font-weight:700;margin:0}
.madjx-ecusson__stat{font-size:14px;margin:0 0 10px;color:#15912F;font-weight:600}
.madjx-ecusson__stat.is-erreur{color:#c0272d}

/* 1.1.3 – commandes visibles de l'écusson */
.madjx-ecpanel{margin:0 0 10px;padding:12px;border:1px solid #e3e3e3;border-radius:12px;background:#fafafa}
.madjx-ecpanel__titre{font-weight:700;font-size:14px;margin-bottom:8px;color:#111}
.madjx-ecpanel__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.madjx-ecpanel__row .madjx-field--grow{flex:1 1 140px;min-width:0}
.madjx-ecpanel__row .madjx-field output{margin-left:6px;font-weight:700;color:#15912F}
.madjx-ecpanel__row input[type=range]{width:100%;height:32px;accent-color:#15912F}
.madjx-btn--round{width:40px;height:40px;border-radius:50%;padding:0;font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex:none}
.madjx-ecpanel__pad{display:inline-flex;gap:4px;margin-left:auto}
.madjx-ecpanel__aide{margin:2px 0 0;font-size:12px;color:#777}
.madjx-props__row--btns{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:600px){.madjx-ecpanel__pad{margin-left:0}.madjx-ecpanel .madjx-btn--small,.madjx-props__row--btns .madjx-btn--small{min-height:40px}}

/* 1.1.4 – liste des éléments (calques) */
.madjx-layers{margin:0 0 10px;padding:10px 12px;border:1px solid #e3e3e3;border-radius:12px;background:#fff}
.madjx-layers__titre{font-weight:700;font-size:14px;margin-bottom:6px;color:#111}
.madjx-layers__titre span{color:#777;font-weight:400}
.madjx-layers__list{list-style:none;margin:0;padding:0}
.madjx-layers__vide{margin:0;font-size:13px;color:#777}
.madjx-layer{display:flex;align-items:center;gap:4px;padding:4px;border-radius:8px;border:1px solid transparent}
.madjx-layer.is-on{background:#f1f8f2;border-color:#bfe0c6}
.madjx-layer__pick{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;padding:2px;text-align:left;cursor:pointer;font:inherit;color:#111}
.madjx-layer__thumb{flex:none;width:36px;height:36px;border-radius:6px;border:1px solid #ddd;background:#e9e9e9 center/contain no-repeat;display:flex;align-items:center;justify-content:center;font-weight:700;color:#555}
.madjx-layer__nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.madjx-layer__btn{flex:none;width:34px;height:34px;border-radius:8px;border:1px solid #ddd;background:#fff;cursor:pointer;font-size:13px;line-height:1;padding:0}
.madjx-layer__btn:disabled{opacity:.35;cursor:default}
.madjx-layer__del{border-color:#e6b8ba;color:#c0272d}
.madjx-layer__del:hover{background:#fdeeee}
@media (max-width:600px){.madjx-layer__btn{width:40px;height:40px}}

/* 1.1.5 – étirement des logos */
.madjx-field output{margin-left:6px;font-weight:700;color:#15912F}

/* 1.3.16 — bulle d'erreur en haut à droite (au-dessus de la fenêtre du designer) */
.madjx-toast{position:fixed;top:16px;right:16px;z-index:2147483000;max-width:min(400px,calc(100vw - 32px));display:none;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:10px;background:#b32d2e;color:#fff;font-size:15px;line-height:1.35;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.madjx-toast.is-visible{display:flex}
.madjx-toast--attention{background:#2f3b45}
.madjx-toast__msg{flex:1}
.madjx-toast__x{flex:0 0 auto;border:0;background:none;color:#fff;font-size:22px;line-height:1;padding:0 2px;cursor:pointer}
@media(max-width:600px){.madjx-toast{top:10px;left:10px;right:10px;max-width:none}}

/* 1.4.17 — « Ta commande » (casquettes leatherette) */
.madjx-cmd{margin:14px 0 12px;color:#3a4143}
.madjx-cmd *{box-sizing:border-box}
.madjx-cmd .madjx-cmd__box{border:2px solid #16191a;border-radius:14px;padding:16px;background:#fff}
.madjx-cmd .madjx-cmd__titre{margin:0 0 8px;font-size:1.25em;line-height:1.15;font-weight:700;color:#3a4143}
.madjx-cmd .madjx-cmd__table{width:100%;border-collapse:collapse;font-size:14px;margin:0;font-variant-numeric:tabular-nums}
.madjx-cmd .madjx-cmd__table td{padding:5px 0;border:0;border-bottom:1px solid #d9dddc;vertical-align:top;color:#3a4143}
.madjx-cmd .madjx-cmd__table td:last-child{text-align:right;white-space:nowrap;padding-left:10px}
.madjx-cmd .madjx-cmd__detail{display:block;font-size:13px;color:#5d6567;margin-top:1px}
.madjx-cmd .madjx-cmd__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:#16191a;color:#fff;border-radius:10px;padding:12px 14px;margin:12px 0 0}
.madjx-cmd .madjx-cmd__total span{font-size:15px;color:#fff}
.madjx-cmd .madjx-cmd__total b{font-size:26px;line-height:1.1;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.madjx-cmd .madjx-cmd__aide,.madjx-cmd .madjx-cmd__vide{font-size:13px;color:#5d6567;margin:6px 0 0}
.madjx-cmd .madjx-cmd__manque{margin:12px 0 0;border:1px solid #b32d2e;border-radius:10px;padding:12px 14px;background:#eef0ef;font-size:15px;color:#3a4143}
.madjx-cmd .madjx-cmd__manque-titre{margin:0 0 4px;font-weight:500}
.madjx-cmd .madjx-cmd__liste{margin:0;padding:0 0 0 20px;list-style:disc}
.madjx-cmd .madjx-cmd__liste li{margin:2px 0}
.madjx-cmd .madjx-cmd__manque.is-ok{background:none;border:0;padding:0}
.madjx-cmd .madjx-cmd__manque.is-ok .madjx-cmd__manque-titre{margin:0;color:#0e7a5f}
.madjx-cmd .madjx-cmd__inc{background:#e4f1ec;border:2px solid #0e7a5f;border-radius:10px;color:#3a4143;padding:10px 12px;margin:12px 0 0;font-size:15px;line-height:1.35}
.madjx-cmd .madjx-cmd__inc b{color:#0e7a5f;font-weight:700}

/* 1.4.19 — l'aperçu de la personnalisation est dans « Ta commande » */
.madjx-cmd .madjx-cmd__conception .madjx-cta__summary{margin:0 0 10px;background:#fafafa;border:1px solid #d9dddc;border-radius:10px;color:#3a4143}
.madjx-cmd .madjx-cmd__conception .madjx-cta__text{font-size:14px;line-height:1.4}