/**
 * Calculateur de carrelage — habillage.
 * Reprend les jetons de la charte moijefais quand le thème les fournit,
 * avec repli sur les couleurs officielles (§26 : un vrai outil du site).
 * Mobile-first (§27) : gros boutons, étapes verticales, plan zoomable.
 */

.mjf-tile-calc {
	--tc-sage: var(--sage, #2FBD8B);
	--tc-sage-deep: var(--sage-deep, #1E9C71);
	--tc-sage-soft: var(--sage-soft, #DFF5EB);
	--tc-terra: var(--terra, #E8685D);
	--tc-terra-soft: var(--terra-soft, #FBE3DF);
	--tc-paper: #FFFFFF;
	--tc-cream: var(--bg, #F6F2EA);
	--tc-ink: var(--ink, #23211C);
	--tc-muted: var(--muted, #6E6A61);
	--tc-line: var(--line, #E7E1D4);
	color: var(--tc-ink);
	max-width: 720px;
	margin: 0 auto;
}

/* ===== Fil d'étapes ===== */
.mjf-tc-steps {
	display: flex;
	gap: 6px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}
.mjf-tc-steps li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--tc-muted);
	background: var(--tc-paper);
	border: 1.5px solid var(--tc-line);
	border-radius: 999px;
	padding: .35em .85em .35em .4em;
}
.mjf-tc-steps li b {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--tc-line);
	color: var(--tc-ink);
	font-size: .74rem;
}
.mjf-tc-steps li.is-active { border-color: var(--tc-sage); color: var(--tc-ink); }
.mjf-tc-steps li.is-active b { background: var(--tc-sage); color: #fff; }
.mjf-tc-steps li.is-done b { background: var(--tc-sage-soft); color: var(--tc-sage-deep); }

/* ===== Panneaux ===== */
.mjf-tc-panel {
	background: var(--tc-paper);
	border: 1px solid var(--tc-line);
	border-radius: 16px;
	padding: 22px 20px 24px;
}
.mjf-tc-panel[hidden] { display: none; }
.mjf-tc-panel h3 {
	margin: 0 0 4px;
	font-size: 1.3rem;
}
.mjf-tc-hint { margin: 0 0 18px; font-size: .9rem; color: var(--tc-muted); }

/* ===== Champs ===== */
.mjf-tc-fields { display: flex; flex-wrap: wrap; gap: 14px; }
.mjf-tc-field { flex: 1 1 180px; display: flex; flex-direction: column; gap: 5px; }
.mjf-tc-field label { font-size: .84rem; font-weight: 600; }
.mjf-tc-field input, .mjf-tc-field select {
	font: inherit;
	font-size: 1.05rem;
	padding: .6em .8em;
	border: 1.5px solid var(--tc-line);
	border-radius: 10px;
	background: var(--tc-paper);
	color: var(--tc-ink);
	width: 100%;
	box-sizing: border-box;
}
.mjf-tc-field input:focus, .mjf-tc-field select:focus,
.mjf-tc-chip input:focus-visible + span {
	outline: 2px solid var(--tc-sage);
	outline-offset: 1px;
}
.mjf-tc-field .mjf-tc-unit { font-size: .78rem; color: var(--tc-muted); }

/* ===== Puces de choix (formats, joints, poses, modes) ===== */
.mjf-tc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.mjf-tc-chip { position: relative; }
.mjf-tc-chip input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}
.mjf-tc-chip span {
	display: inline-block;
	padding: .55em 1em;
	border: 1.5px solid var(--tc-line);
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 600;
	background: var(--tc-paper);
	cursor: pointer;
	user-select: none;
}
.mjf-tc-chip input:checked + span {
	background: var(--tc-sage);
	border-color: var(--tc-sage);
	color: #fff;
}

/* Cartes de pose avec aperçu dessiné en CSS */
.mjf-tc-poses { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 6px; }
.mjf-tc-pose { position: relative; }
.mjf-tc-pose input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mjf-tc-pose span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--tc-line);
	border-radius: 12px;
	padding: 12px 8px;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
}
.mjf-tc-pose input:checked + span { border-color: var(--tc-sage); background: var(--tc-sage-soft); }
.mjf-tc-pose input:focus-visible + span { outline: 2px solid var(--tc-sage); }
.mjf-tc-pose svg {
	width: 84px;
	height: 48px;
	border-radius: 4px;
	background: var(--tc-cream);
}
.mjf-tc-pose svg rect {
	fill: #BFE8D4;
	stroke: var(--tc-sage-deep);
	stroke-width: 1;
}

/* ===== Boutons ===== */
.mjf-tc-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.mjf-tc-btn {
	font: 600 1rem inherit;
	padding: .8em 1.6em;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	background: var(--tc-sage);
	color: #fff;
	transition: background .15s;
}
.mjf-tc-btn:hover { background: var(--tc-sage-deep); }
.mjf-tc-btn:focus-visible { outline: 2px solid var(--tc-ink); outline-offset: 2px; }
.mjf-tc-btn.is-ghost {
	background: none;
	color: var(--tc-muted);
	border: 1.5px solid var(--tc-line);
}
.mjf-tc-btn.is-ghost:hover { color: var(--tc-ink); }

/* ===== Code de simulation ===== */
.mjf-tc-codeload, .mjf-tc-codebox {
	background: var(--tc-cream);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0 0 16px;
}
.mjf-tc-codebox { margin: 16px 0 0; }
.mjf-tc-codeload label, .mjf-tc-codebox label { font-size: .84rem; font-weight: 600; display: block; margin-bottom: 6px; }
.mjf-tc-codeload-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mjf-tc-codeload-row input {
	flex: 1 1 220px;
	font: 500 .85rem Consolas, "SF Mono", Menlo, monospace;
	padding: .6em .8em;
	border: 1.5px solid var(--tc-line);
	border-radius: 10px;
	background: var(--tc-paper);
	color: var(--tc-ink);
	min-width: 0;
}
.mjf-tc-codeload-row .mjf-tc-btn { flex: 0 0 auto; }

.mjf-tc-error {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-left: 4px solid var(--tc-terra);
	background: var(--tc-terra-soft);
	border-radius: 0 10px 10px 0;
	font-size: .92rem;
}
.mjf-tc-error:empty { display: none; }

/* ===== Résultats (§15) ===== */
.mjf-tc-numbers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px;
	margin: 14px 0 4px;
}
.mjf-tc-num {
	background: var(--tc-cream);
	border-radius: 12px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mjf-tc-num b {
	font-size: 1.5rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.mjf-tc-num span { font-size: .78rem; color: var(--tc-muted); }
.mjf-tc-num.is-hero { background: var(--tc-sage-soft); }
.mjf-tc-num.is-hero b { color: var(--tc-sage-deep); }

.mjf-tc-compare {
	margin: 14px 0 0;
	padding: 12px 16px;
	background: var(--tc-sage-soft);
	border-radius: 12px;
	font-size: .95rem;
}
.mjf-tc-compare b { color: var(--tc-sage-deep); }

/* ===== Plan SVG (§21) ===== */
.mjf-tc-plan { margin-top: 20px; }
.mjf-tc-planwrap { overflow: auto; border: 1px solid var(--tc-line); border-radius: 12px; background: var(--tc-paper); }
.mjf-tc-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
/* Fond de pièce = mortier des joints, assez foncé pour que la grille ressorte */
.mjf-tc-svg-room { fill: #B9AF9D; }
/* Chaque carreau garde un contour d'épaisseur constante à l'écran : la
   grille reste lisible même pour une grande pièce en petits carreaux. */
.mjf-tc-svg-full rect, .mjf-tc-svg-cut rect {
	stroke: #8F8674;
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}
.mjf-tc-svg-full rect { fill: #BFE8D4; }
.mjf-tc-svg-cut rect { fill: #F6C8BF; }
.mjf-tc-svg-cut { cursor: pointer; }
/* Découpe en L : une seule pièce — pas de trait interne, contour unique */
.mjf-tc-svg-cut.is-l rect { stroke: none; }
.mjf-tc-svg-cutline { stroke: #8F8674; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mjf-tc-svg-cut.is-l:focus-visible .mjf-tc-svg-cutline { stroke: var(--tc-ink); stroke-width: 2.5; }
.mjf-tc-svg-cut:focus-visible rect { stroke: var(--tc-ink); stroke-width: 2.5; }
.mjf-tc-svg-cut.is-selected rect { fill: var(--tc-terra); }
/* Les murs : contour extérieur de la pièce en trait bien épais */
.mjf-tc-svg-wall {
	stroke: #55503F;
	stroke-width: 6;
	stroke-linecap: square;
	vector-effect: non-scaling-stroke;
}
.mjf-tc-svg-door { fill: var(--tc-terra); opacity: .9; }
.mjf-tc-svg-shape { fill: var(--tc-sage-soft); stroke: var(--tc-sage-deep); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ===== Vue 3D isométrique (pixel art, ombrages) ===== */
.mjf-tc-viewtoggle { display: flex; gap: 6px; margin: 14px 0 8px; }
.mjf-tc-viewtoggle button {
	font: 600 .88rem inherit;
	padding: .5em 1.2em;
	border-radius: 999px;
	border: 1.5px solid var(--tc-line);
	background: var(--tc-paper);
	color: var(--tc-muted);
	cursor: pointer;
}
.mjf-tc-viewtoggle button.is-active { background: var(--tc-sage); border-color: var(--tc-sage); color: #fff; }
.mjf-tc-iso polygon { stroke: rgba(255, 255, 255, .35); stroke-width: .8; vector-effect: non-scaling-stroke; }
/* la chape (socle de mortier) */
.mjf-tc-iso .iso-top-slab { fill: #B9AF9D; }
.mjf-tc-iso .mjf-tc-iso-skirt { fill: #736B5B; stroke: none; }
.mjf-tc-iso .iso-right-slab { fill: #948B79; }
.mjf-tc-iso .iso-front-slab { fill: #857C6B; }
/* carreaux entiers, damier discret une case sur deux */
.mjf-tc-iso-full .iso-top { fill: #BFE8D4; }
.mjf-tc-iso-full .iso-right { fill: #8FCBAF; }
.mjf-tc-iso-full .iso-front { fill: #7CBB9E; }
.mjf-tc-iso-full .iso-top.is-alt { fill: #CFEFDF; }
.mjf-tc-iso-full .iso-right.is-alt { fill: #9CD5BA; }
.mjf-tc-iso-full .iso-front.is-alt { fill: #89C5A9; }
/* carreaux découpés */
.mjf-tc-iso-cut { cursor: pointer; }
.mjf-tc-iso-cut .iso-top { fill: #F6C8BF; }
.mjf-tc-iso-cut .iso-right { fill: #DB9E93; }
.mjf-tc-iso-cut .iso-front { fill: #CB8C81; }
.mjf-tc-iso-cut .iso-top.is-alt { fill: #FAD6CE; }
.mjf-tc-iso-cut .iso-right.is-alt { fill: #E3ACA2; }
.mjf-tc-iso-cut .iso-front.is-alt { fill: #D39A8F; }
.mjf-tc-iso-cut.is-selected .iso-top, .mjf-tc-iso-cut.is-selected .iso-top.is-alt { fill: var(--tc-terra); }
.mjf-tc-iso-cut:focus-visible .iso-top { stroke: var(--tc-ink); stroke-width: 2; }
.mjf-tc-iso-door { fill: var(--tc-terra); opacity: .95; }
.mjf-tc-legend {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin: 10px 0 0;
	font-size: .82rem;
	color: var(--tc-muted);
}
.mjf-tc-legend i {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	vertical-align: -2px;
	margin-right: 5px;
}
.mjf-tc-legend .l-full i { background: #BFE8D4; border: 1px solid var(--tc-sage); }
.mjf-tc-legend .l-cut i { background: #F6C8BF; border: 1px solid var(--tc-terra); }
.mjf-tc-legend .l-door i { background: var(--tc-terra); border: 1px solid var(--tc-terra); }

/* ===== Composer la pièce (formes en L, portes) ===== */
.mjf-tc-subblocks { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mjf-tc-subblock {
	background: var(--tc-cream);
	border-radius: 12px;
	padding: 12px 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
}
.mjf-tc-subblock .mjf-tc-field { flex: 1 1 120px; }
.mjf-tc-subblock .mjf-tc-remove {
	flex: 0 0 auto;
	font: 600 .82rem inherit;
	color: var(--tc-terra);
	background: none;
	border: 1.5px solid var(--tc-terra-soft);
	border-radius: 999px;
	padding: .5em 1em;
	cursor: pointer;
}
.mjf-tc-add {
	font: 600 .9rem inherit;
	color: var(--tc-sage-deep);
	background: var(--tc-sage-soft);
	border: none;
	border-radius: 999px;
	padding: .6em 1.2em;
	cursor: pointer;
	margin-top: 10px;
}
.mjf-tc-preview {
	margin-top: 14px;
	border: 1px solid var(--tc-line);
	border-radius: 12px;
	background: var(--tc-paper);
	padding: 8px;
}
.mjf-tc-preview[hidden] { display: none; }
.mjf-tc-preview .mjf-tc-svg { max-height: 240px; }

/* ===== Éditeur de pièce au doigt ===== */
.mjf-tc-editor { margin-top: 14px; }
.mjf-tc-ed-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mjf-tc-ed-tool {
	font: 600 .9rem inherit;
	padding: .55em 1.1em;
	border-radius: 999px;
	border: 1.5px solid var(--tc-line);
	background: var(--tc-paper);
	color: var(--tc-ink);
	cursor: pointer;
}
.mjf-tc-ed-tool.is-active { background: var(--tc-sage); border-color: var(--tc-sage); color: #fff; }
.mjf-tc-ed-tool.is-danger { color: var(--tc-terra); }
.mjf-tc-ed-area { margin-left: auto; font-weight: 700; font-size: .95rem; color: var(--tc-sage-deep); }
.mjf-tc-ed-hint { margin: 8px 0; font-size: .85rem; color: var(--tc-muted); }
.mjf-tc-ed-canvas {
	border: 1.5px solid var(--tc-line);
	border-radius: 12px;
	background: var(--tc-paper);
	overflow: hidden;
}
.mjf-tc-ed-svg {
	display: block;
	width: 100%;
	height: min(58vh, 460px);
	touch-action: none; /* le doigt dessine, il ne fait pas défiler */
	cursor: crosshair;
}
.mjf-tc-ed-grid line { stroke: #EFEAE0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mjf-tc-ed-grid line.is-major { stroke: #DCD5C6; }
.mjf-tc-ed-fill { fill: var(--tc-sage-soft); fill-opacity: .8; stroke: none; }
.mjf-tc-ed-wall {
	stroke: var(--tc-sage-deep);
	stroke-width: 5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	cursor: pointer;
}
.mjf-tc-ed-wall.is-selected { stroke: var(--tc-ink); stroke-width: 6; }
.mjf-tc-ed-pen {
	stroke: var(--tc-sage);
	stroke-width: 3;
	stroke-dasharray: 10 8;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}
.mjf-tc-ed-pt { fill: var(--tc-sage-deep); pointer-events: none; }
.mjf-tc-ed-pt.is-first { fill: var(--tc-terra); }
.mjf-tc-ed-pt.is-close { fill: var(--tc-terra); stroke: var(--tc-terra-soft); stroke-width: 10; }
.mjf-tc-ed-dim {
	font: 700 130px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
	fill: var(--tc-ink);
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
	paint-order: stroke;
	stroke: #FFFFFF;
	stroke-width: 40px;
}
.mjf-tc-ed-note { font-size: .8rem; color: var(--tc-muted); align-self: center; }
.mjf-tc-ed-door { fill: var(--tc-terra); cursor: move; }
.mjf-tc-ed-door.is-selected { stroke: var(--tc-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mjf-tc-ed-door.is-ghost { opacity: .45; pointer-events: none; }
.mjf-tc-ed-panel {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	flex-wrap: wrap;
	background: var(--tc-cream);
	border-radius: 12px;
	padding: 12px 14px;
	margin-top: 10px;
}
.mjf-tc-ed-panel .mjf-tc-field { flex: 0 1 160px; }
.mjf-tc-ed-panel[hidden] { display: none; }
.mjf-tc-cutinfo {
	min-height: 1.4em;
	margin: 8px 0 0;
	font-size: .95rem;
	font-weight: 600;
}
.mjf-tc-cutinfo:empty::before { content: "Touchez un carreau rosé pour voir sa découpe."; font-weight: 400; color: var(--tc-muted); font-size: .85rem; }

/* ===== Liste des découpes (§22) ===== */
.mjf-tc-cuts { margin-top: 18px; }
.mjf-tc-cuts table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.mjf-tc-cuts th, .mjf-tc-cuts td { text-align: left; padding: .5em .6em; border-bottom: 1px solid var(--tc-line); }
.mjf-tc-cuts td:first-child { font-weight: 700; white-space: nowrap; }

/* ===== Liste d'achat (§15-20) ===== */
.mjf-tc-shoplist { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mjf-tc-shoplist li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
	background: var(--tc-cream);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: .96rem;
}
.mjf-tc-shoplist li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mjf-tc-shoplist li.is-total { background: var(--tc-sage-soft); font-weight: 700; }
.mjf-tc-note { margin: 12px 0 0; font-size: .8rem; color: var(--tc-muted); }

/* ===== Impression (§32) ===== */
@media print {
	body.mjf-tc-print > *:not(:has(#mjf-tile-calc)) { display: none !important; }
	body.mjf-tc-print .site-header, body.mjf-tc-print .site-footer { display: none !important; }
	.mjf-tc-print .mjf-tc-steps, .mjf-tc-print .mjf-tc-actions, .mjf-tc-print .mjf-tc-cutinfo { display: none !important; }
	.mjf-tc-print .mjf-tc-panel { display: block !important; border: none; padding: 0 0 18px; }
	.mjf-tc-print .mjf-tc-panel[data-step="1"], .mjf-tc-print .mjf-tc-panel[data-step="2"], .mjf-tc-print .mjf-tc-panel[data-step="3"] { display: none !important; }
}

@media (max-width: 640px) {
	.mjf-tc-panel { padding: 16px 14px 18px; }
	.mjf-tc-steps li { font-size: 0; gap: 0; padding: .3em; }
	.mjf-tc-steps li b { font-size: .74rem; }
	.mjf-tc-btn { flex: 1 1 auto; text-align: center; }
	.mjf-tc-numbers { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.mjf-tc-btn { transition: none; }
}