/* MG Calculateur — mobile-first, sans dépendance au thème. */

.mg-calc {
	--mg-primary: #2e7d32;
	--mg-primary-dark: #1b5e20;
	--mg-danger: #c62828;
	--mg-border: #d7d7d7;
	--mg-bg: #ffffff;
	--mg-radius: 10px;
	max-width: 560px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
	color: #212121;
}

.mg-panel {
	background: var(--mg-bg);
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-radius);
	padding: 20px 16px;
}

.mg-title {
	font-size: 1.3em;
	margin: 0 0 16px;
}
.mg-title:focus { outline: none; }

/* ------------------------- Barre de progression ---------------------- */

.mg-progress {
	display: flex;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	gap: 4px;
}
.mg-progress__step {
	flex: 1;
	text-align: center;
	position: relative;
	font-size: 12px;
	color: #757575;
}
.mg-progress__dot {
	display: block;
	width: 28px;
	height: 28px;
	line-height: 28px;
	border-radius: 50%;
	background: #eeeeee;
	border: 2px solid var(--mg-border);
	margin: 0 auto 4px;
	font-weight: 700;
}
.mg-progress__step.is-current .mg-progress__dot {
	background: var(--mg-primary);
	border-color: var(--mg-primary);
	color: #fff;
}
.mg-progress__step.is-done .mg-progress__dot {
	background: #c8e6c9;
	border-color: var(--mg-primary);
	color: var(--mg-primary-dark);
}
.mg-progress__step.is-current { color: var(--mg-primary-dark); font-weight: 700; }

/* ------------------------------ Cartes ------------------------------- */

.mg-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.mg-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
	padding: 16px;
	background: #fafafa;
	border: 2px solid var(--mg-border);
	border-radius: var(--mg-radius);
	cursor: pointer;
	font: inherit;
	transition: border-color .15s, background .15s;
}
.mg-card:hover, .mg-card:focus-visible {
	border-color: var(--mg-primary);
	background: #f1f8f1;
}
.mg-card:focus-visible { outline: 3px solid #a5d6a7; outline-offset: 1px; }
.mg-card.is-selected { border-color: var(--mg-primary); background: #e8f5e9; }
.mg-card strong { font-size: 1.05em; }
.mg-card span { color: #616161; font-size: .9em; }

/* ------------------------------ Champs ------------------------------- */

.mg-form { display: flex; flex-direction: column; gap: 14px; }
.mg-field { display: flex; flex-direction: column; gap: 4px; }
.mg-field label { font-weight: 600; font-size: .95em; }
.mg-input {
	font: inherit;
	padding: 12px;
	border: 1px solid var(--mg-border);
	border-radius: 8px;
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px; /* cible tactile */
}
.mg-input:focus-visible {
	outline: 3px solid #a5d6a7;
	border-color: var(--mg-primary);
}
.mg-input[aria-invalid="true"] { border-color: var(--mg-danger); }
.mg-hint { margin: 0; font-size: .85em; color: #757575; }
.mg-error { margin: 0; font-size: .9em; color: var(--mg-danger); font-weight: 600; }
.mg-error[hidden] { display: none; }

.mg-field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}
.mg-field--check input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--mg-primary);
}
.mg-field--check label { font-weight: 400; font-size: .9em; }

/* Honeypot : hors écran (pas display:none, certains bots le détectent). */
.mg-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------ Boutons ------------------------------ */

.mg-actions {
	display: flex;
	gap: 10px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.mg-btn {
	font: inherit;
	font-weight: 700;
	padding: 13px 20px;
	min-height: 48px;
	border: none;
	border-radius: 8px;
	background: var(--mg-primary);
	color: #fff;
	cursor: pointer;
	flex: 1;
	transition: background .15s;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mg-btn:hover, .mg-btn:focus-visible { background: var(--mg-primary-dark); }
.mg-btn:focus-visible { outline: 3px solid #a5d6a7; outline-offset: 2px; }
.mg-btn:disabled { opacity: .6; cursor: wait; }
.mg-btn--ghost {
	background: transparent;
	color: var(--mg-primary-dark);
	border: 2px solid var(--mg-border);
	flex: 0 0 auto;
}
.mg-btn--ghost:hover, .mg-btn--ghost:focus-visible { background: #f1f8f1; }
.mg-btn--wide { width: 100%; }
.mg-btn--whatsapp { background: #25D366; margin-top: 8px; }
.mg-btn--whatsapp:hover, .mg-btn--whatsapp:focus-visible { background: #1da851; }

/* ------------------------------ Aperçu ------------------------------- */

.mg-preview {
	background: #f1f8f1;
	border-radius: var(--mg-radius);
	padding: 20px 16px;
	text-align: center;
	margin-bottom: 12px;
}
.mg-preview__intro { margin: 0 0 6px; }
.mg-preview__range {
	font-size: 1.5em;
	margin: 0 0 8px;
	color: var(--mg-primary-dark);
}
.mg-preview__oor {
	font-weight: 700;
	color: #ef6c00;
	margin: 0 0 8px;
}
.mg-loading { margin: 0; color: #757575; }

/* --------------------------- Écran final ----------------------------- */

.mg-done { text-align: center; }
.mg-done__ref {
	font-weight: 700;
	color: var(--mg-primary-dark);
	margin: 0 0 8px;
}

/* ------------------------------ ≥ 480px ------------------------------ */

@media (min-width: 480px) {
	.mg-panel { padding: 28px 24px; }
	.mg-cards { grid-template-columns: 1fr 1fr; }
	.mg-btn--wide { width: auto; flex: 1; }
}