/**
 * Calculateur de peinture — habillage.
 * Même système graphique que les calculateurs carrelage et terrasse (§99) :
 * jetons de la charte moijefais avec repli sur les couleurs officielles.
 * Mobile-first : gros boutons, étapes verticales.
 */

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

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

/* ===== Panneau ===== */
.mjf-pc-panel {
	background: var(--pc-paper);
	border: 1px solid var(--pc-line);
	border-radius: 16px;
	padding: 22px 20px 24px;
}
.mjf-pc-panel h3 { margin: 0 0 4px; font-size: 1.3rem; }
.mjf-pc-panel h4 { margin: 20px 0 8px; font-size: 1.02rem; }
.mjf-pc-hint { margin: 0 0 14px; font-size: .9rem; color: var(--pc-muted); }
.mjf-pc-note { margin: 10px 0 0; font-size: .82rem; color: var(--pc-muted); }
.mjf-pc-advice {
	margin: 12px 0 8px;
	padding: 10px 14px;
	background: var(--pc-sage-soft);
	border-radius: 10px;
	font-size: .92rem;
}

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

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

/* Cases à cocher pleines phrases */
.mjf-pc-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 14px 0 0;
	font-size: .94rem;
	cursor: pointer;
}
.mjf-pc-check input { width: 19px; height: 19px; margin-top: 1px; accent-color: var(--pc-sage); }

/* ===== Cartes de choix (étape 1) ===== */
.mjf-pc-poses { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.mjf-pc-pose { position: relative; }
.mjf-pc-pose input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mjf-pc-pose span {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	border: 1.5px solid var(--pc-line);
	border-radius: 12px;
	padding: 14px 10px;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
	height: 100%;
	box-sizing: border-box;
}
.mjf-pc-pose input:checked + span { border-color: var(--pc-sage); background: var(--pc-sage-soft); }
.mjf-pc-pose input:focus-visible + span { outline: 2px solid var(--pc-sage); }
.mjf-pc-pose svg {
	width: 84px;
	height: 48px;
	border-radius: 4px;
	background: var(--pc-cream);
}
.mjf-pc-pose svg rect { fill: #BFE8D4; stroke: var(--pc-sage-deep); stroke-width: 1; }
.mjf-pc-sub { font-weight: 400; font-style: normal; font-size: .78rem; color: var(--pc-muted); }

/* ===== Sous-blocs (murs, ouvertures) ===== */
.mjf-pc-block { margin-top: 18px; }
.mjf-pc-block.is-soft { background: var(--pc-cream); border-radius: 12px; padding: 14px 16px; }
.mjf-pc-block.is-soft h4 { margin-top: 0; }
.mjf-pc-subblocks { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mjf-pc-subblock {
	background: var(--pc-cream);
	border-radius: 12px;
	padding: 12px 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
}
.mjf-pc-subblock .mjf-pc-field { flex: 1 1 120px; }
.mjf-pc-remove {
	flex: 0 0 auto;
	font: 600 .82rem inherit;
	color: var(--pc-terra);
	background: none;
	border: 1.5px solid var(--pc-terra-soft);
	border-radius: 999px;
	padding: .5em 1em;
	cursor: pointer;
}
.mjf-pc-add {
	font: 600 .9rem inherit;
	color: var(--pc-sage-deep);
	background: var(--pc-sage-soft);
	border: none;
	border-radius: 999px;
	padding: .6em 1.2em;
	cursor: pointer;
	margin-top: 10px;
}
.mjf-pc-details { margin-top: 12px; }
.mjf-pc-details summary {
	cursor: pointer;
	font-size: .88rem;
	font-weight: 600;
	color: var(--pc-sage-deep);
}

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

/* ===== Erreurs ===== */
.mjf-pc-error {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-left: 4px solid var(--pc-terra);
	background: var(--pc-terra-soft);
	border-radius: 0 10px 10px 0;
	font-size: .92rem;
}

/* ===== Résultat ===== */
.mjf-pc-hero {
	background: var(--pc-sage-soft);
	border-radius: 14px;
	padding: 20px 22px;
	margin: 12px 0 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mjf-pc-hero p { margin: 0; font-size: .95rem; }
.mjf-pc-hero b {
	font-size: 1.9rem;
	line-height: 1.15;
	color: var(--pc-sage-deep);
	font-variant-numeric: tabular-nums;
}
.mjf-pc-hero span { font-size: 1rem; font-weight: 600; }
.mjf-pc-conf {
	align-self: flex-start;
	margin-top: 8px;
	font-style: normal;
	font-size: .78rem;
	font-weight: 700;
	padding: .35em .9em;
	border-radius: 999px;
	background: var(--pc-paper);
}
.mjf-pc-conf.is-elevee { color: var(--pc-sage-deep); }
.mjf-pc-conf.is-moyenne { color: #A8632B; }
.mjf-pc-conf.is-indicative { color: var(--pc-terra); }

.mjf-pc-job {
	margin-top: 16px;
	border: 1px solid var(--pc-line);
	border-radius: 12px;
	padding: 4px 16px 14px;
}
.mjf-pc-job h4 { margin: 12px 0 4px; }
.mjf-pc-numbers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px;
	margin: 10px 0 4px;
}
.mjf-pc-num {
	background: var(--pc-cream);
	border-radius: 12px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mjf-pc-num b { font-size: 1.25rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mjf-pc-num span { font-size: .76rem; color: var(--pc-muted); }
.mjf-pc-num.is-hero { background: var(--pc-sage-soft); }
.mjf-pc-num.is-hero b { color: var(--pc-sage-deep); }

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

.mjf-pc-detaillist { margin: 8px 0 0; padding-left: 1.3em; font-size: .92rem; }
.mjf-pc-detaillist li { margin: .3em 0; }

.mjf-pc-checklist { margin: 8px 0 0; padding: 0; list-style: none; }
.mjf-pc-checklist li {
	position: relative;
	padding: .4em 0 .4em 1.8em;
	border-bottom: 1px solid var(--pc-line);
	font-size: .94rem;
}
.mjf-pc-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--pc-sage-deep);
	font-weight: 700;
}

/* ===== Impression (§61) ===== */
@media print {
	body.mjf-pc-print > *:not(:has(#mjf-paint-calc)) { display: none !important; }
	body.mjf-pc-print .site-header, body.mjf-pc-print .site-footer { display: none !important; }
	.mjf-pc-print .mjf-pc-steps, .mjf-pc-print .mjf-pc-actions { display: none !important; }
	.mjf-pc-print .mjf-pc-panel { border: none; padding: 0; }
}

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

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

/* Schéma « la pièce vue du dessus » de l'étape 2 */
.mjf-pc-sketch { margin: 4px 0 6px; }
.mjf-pc-sketch svg {
	display: block;
	width: min(300px, 100%);
	height: auto;
	background: var(--pc-cream);
	border-radius: 10px;
}