/**
 * AFRI-EXPRESS Core — styles front-end.
 * Reprend la charte du thème (bleu marine #022D71 / orange #FD7107, Inter, arrondis).
 */

.mgp-suivi,
.mgp-estimateur {
	--mgp-primary: #022D71;
	--mgp-accent: #FD7107;
	--mgp-muted: #5A6B8C;
	--mgp-dark: #0A1B3D;
	--mgp-soft: #EEF2FB;
	font-family: 'Inter', sans-serif;
}

/* ============ SUIVI : formulaire ============ */
.mgp-suivi-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	background: var(--mgp-primary);
	padding: 28px;
	border-radius: 24px 24px 0 0;
}
.mgp-suivi-form input {
	flex: 1;
	min-width: 220px;
	height: 56px;
	border: 0;
	border-radius: 12px;
	padding: 0 16px;
	font-size: 17px;
	font-family: inherit;
	background: #fff;
	color: var(--mgp-dark);
}
.mgp-suivi-form input:focus {
	outline: 2px solid var(--mgp-accent);
	outline-offset: 2px;
}
.mgp-suivi-form button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: 12px;
	background: var(--mgp-accent);
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	font-family: inherit;
	cursor: pointer;
	transition: background .2s;
}
.mgp-suivi-form button:hover { background: #D55E00; }
.mgp-suivi-form button svg { width: 20px; height: 20px; }

/* Indice sous le champ de recherche */
.mgp-suivi-hint {
	flex-basis: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 0;
	color: rgba(255,255,255,.75);
	font-size: 13.5px;
}
.mgp-suivi-hint svg { width: 16px; height: 16px; flex-shrink: 0; }
.mgp-suivi-hint strong { color: #fff; font-weight: 600; }

/* ============ SUIVI : messages ============ */
.mgp-suivi-erreur {
	background: #fff;
	border-radius: 0 0 24px 24px;
	padding: 28px;
	box-shadow: 0 10px 20px rgba(15,46,26,.08);
	border-left: 4px solid var(--mgp-accent);
}
.mgp-suivi-erreur strong { color: var(--mgp-accent); display: block; margin-bottom: 6px; }
.mgp-suivi-erreur p { margin: 0; color: var(--mgp-muted); }

/* ============ SUIVI : résultat ============ */
.mgp-suivi-resultat {
	background: #fff;
	border-radius: 0 0 24px 24px;
	padding: 32px;
	box-shadow: 0 10px 20px rgba(15,46,26,.08);
}
.mgp-suivi-entete {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(20,100,49,.12);
}
.mgp-entete-haut {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.mgp-eyebrow {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--mgp-muted);
}
.mgp-suivi-entete h3 {
	color: var(--mgp-primary);
	font-size: 26px;
	font-weight: 800;
	margin: 0;
	letter-spacing: .5px;
}
/* Badge de statut courant */
.mgp-statut-badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: 9999px;
	background: var(--mgp-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.mgp-statut-badge.is-livre { background: var(--mgp-primary); }

/* Métadonnées de l'envoi */
.mgp-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 16px;
}
.mgp-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--mgp-muted);
	font-size: 15px;
}
.mgp-meta-item svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Prochaine étape */
.mgp-next {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 18px 0 0;
	padding: 11px 18px;
	border-radius: 12px;
	background: rgba(214,31,43,.07);
	color: var(--mgp-accent);
	font-size: 15px;
}
.mgp-next strong { font-weight: 700; }
.mgp-next svg { width: 18px; height: 18px; flex-shrink: 0; }
.mgp-next.is-done {
	background: rgba(22,100,49,.08);
	color: var(--mgp-primary);
	font-weight: 600;
}

/* ============ SUIVI : timeline ============ */
.mgp-timeline { position: relative; }
.mgp-timeline-rail,
.mgp-timeline-progress {
	position: absolute;
	left: 23px;
	width: 4px;
	border-radius: 999px;
	z-index: 0;
}
.mgp-timeline-rail {
	top: 0;
	bottom: 0;
	background: var(--mgp-soft);
}
.mgp-timeline-progress {
	top: 0;
	background: var(--mgp-accent);
	transition: height 1s ease-out;
}

.mgp-step {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 24px;
	opacity: .4;
}
.mgp-step + .mgp-step { margin-top: 32px; }
.mgp-step.is-done { opacity: 1; }

.mgp-step-icon {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mgp-soft);
	color: var(--mgp-muted);
	border: 4px solid #fff;
}
.mgp-step.is-done .mgp-step-icon {
	background: var(--mgp-accent);
	color: #fff;
}
.mgp-step.is-current .mgp-step-icon {
	box-shadow: 0 0 0 4px rgba(214,31,43,.2);
}
.mgp-step-icon svg { width: 20px; height: 20px; }

.mgp-step-body { padding-top: 6px; }
.mgp-step-body h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--mgp-primary);
}
.mgp-step.is-current .mgp-step-body h4 { color: var(--mgp-accent); }
.mgp-step-date {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--mgp-muted);
}
.mgp-step-note {
	margin: 2px 0 0;
	font-size: 14px;
	font-style: italic;
	color: var(--mgp-muted);
}

/* ============ GRILLE TARIFAIRE ============ */
.mgp-grille {
	--mgp-primary: #022D71;
	--mgp-accent: #FD7107;
	--mgp-muted: #5A6B8C;
	--mgp-dark: #0A1B3D;
	--mgp-soft: #EEF2FB;
	font-family: 'Inter', sans-serif;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 28px;
}
.mgp-grille-carte {
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(15,46,26,.10);
	display: flex;
	flex-direction: column;
}
.mgp-grille-bar { height: 8px; }
.mgp-grille-carte.is-primary .mgp-grille-bar { background: var(--mgp-primary); }
.mgp-grille-carte.is-accent .mgp-grille-bar { background: var(--mgp-accent); }
.mgp-grille-body { padding: 32px 32px 30px; display: flex; flex-direction: column; height: 100%; }

.mgp-grille-body h3 {
	margin: 0 0 8px;
	font-size: 23px;
	font-weight: 800;
	color: var(--mgp-primary);
	line-height: 1.2;
}
.mgp-grille-delai {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 22px;
	color: var(--mgp-accent);
	font-weight: 600;
	font-size: 15px;
}
.mgp-grille-delai svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Prix d'appel très lisible */
.mgp-grille-apd {
	margin: 0 0 22px;
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--mgp-soft);
}
.mgp-grille-apd > span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--mgp-muted);
	margin-bottom: 2px;
}
.mgp-grille-apd strong {
	font-size: 32px;
	font-weight: 800;
	color: var(--mgp-primary);
	line-height: 1.1;
}
.mgp-grille-apd strong span { font-size: 17px; font-weight: 700; }

.mgp-grille-rows { list-style: none; margin: 0 0 22px; padding: 0; }
.mgp-grille-rows li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(20,100,49,.11);
	font-size: 15.5px;
}
.mgp-grille-rows li:last-child { border-bottom: 0; }
.mgp-grille-rows li span { color: var(--mgp-muted); font-weight: 500; }
.mgp-grille-rows li strong { color: var(--mgp-primary); font-weight: 700; font-size: 17px; white-space: nowrap; }
.mgp-grille-rows .mgp-devis { color: var(--mgp-accent); font-size: 15.5px; }

.mgp-grille-note {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: auto 0 0;
	padding: 15px 17px;
	border-radius: 13px;
	background: rgba(237,243,238,.65);
	color: var(--mgp-dark);
	font-size: 14px;
	line-height: 1.55;
}
.mgp-grille-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--mgp-primary); }
.mgp-grille-carte.is-accent .mgp-grille-note svg { color: var(--mgp-accent); }

/* ============ ESTIMATEUR ============ */
.mgp-estimateur {
	background: #fff;
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(15,46,26,.25);
}
.mgp-estimateur-media { position: relative; height: 210px; }
.mgp-estimateur-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgp-estimateur-media h3 {
	position: absolute;
	left: 24px;
	bottom: 20px;
	margin: 0;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
}
.mgp-estimateur-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(22,100,49,.85), transparent);
}
.mgp-estimateur-media h3 { z-index: 1; }

.mgp-estimateur-form {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mgp-estimateur-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.mgp-estimateur-form label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--mgp-dark);
}
.mgp-estimateur-form select,
.mgp-estimateur-form input {
	margin-top: 6px;
	width: 100%;
	height: 48px;
	border-radius: 12px;
	background: rgba(237,243,238,.5);
	border: 1px solid transparent;
	padding: 0 12px;
	font-family: inherit;
	font-size: 15px;
	color: var(--mgp-dark);
}
.mgp-estimateur-form select:focus,
.mgp-estimateur-form input:focus {
	outline: none;
	border-color: var(--mgp-primary);
	background: #fff;
}
.mgp-estimateur-form button {
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: 12px;
	background: var(--mgp-primary);
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	font-family: inherit;
	cursor: pointer;
	transition: background .2s;
}
.mgp-estimateur-form button:hover { background: #0E2250; }
.mgp-estimateur-form button[disabled] { opacity: .7; cursor: wait; }

.mgp-estimateur-resultat {
	border-radius: 12px;
	padding: 16px;
	background: var(--mgp-soft);
	text-align: center;
}
.mgp-estimateur-resultat .mgp-prix {
	display: block;
	font-size: 24px;
	font-weight: 800;
	color: var(--mgp-primary);
}
.mgp-estimateur-resultat .mgp-detail {
	display: block;
	font-size: 13px;
	color: var(--mgp-muted);
	margin-top: 4px;
}
.mgp-estimateur-resultat.is-error {
	background: rgba(214,31,43,.08);
	color: var(--mgp-accent);
	font-weight: 600;
}

@media (max-width: 640px) {
	.mgp-estimateur-row { grid-template-columns: 1fr; }
	.mgp-suivi-form { border-radius: 16px 16px 0 0; }
}

/* =========================================================================
   ANIMATIONS (lot intermédiaire) — CSS pur, transform/opacity, 60 FPS.
   ========================================================================= */

/* --- Apparition du résultat estimateur ---
   Transform seul (jamais d'opacity qui masquerait le prix si l'animation
   ne se déclenche pas) : visible par défaut, animé en surcouche. */
@keyframes mgpPop {
	from { transform: translateY(10px) scale(.98); }
	to   { transform: none; }
}
.mgp-estimateur-resultat:not([hidden]) { animation: mgpPop .4s ease both; }

/* --- Suivi : étapes qui glissent en séquence (transform seul = jamais
   masquées ; la mise en avant « franchie » reste gérée par l'opacité de base). */
@keyframes mgpStepIn {
	from { transform: translateX(-16px); }
	to   { transform: none; }
}
.mgp-suivi-resultat .mgp-step { animation: mgpStepIn .5s ease both; }
.mgp-suivi-resultat .mgp-step:nth-child(1) { animation-delay: .15s; }
.mgp-suivi-resultat .mgp-step:nth-child(2) { animation-delay: .30s; }
.mgp-suivi-resultat .mgp-step:nth-child(3) { animation-delay: .45s; }
.mgp-suivi-resultat .mgp-step:nth-child(4) { animation-delay: .60s; }
.mgp-suivi-resultat .mgp-step:nth-child(5) { animation-delay: .75s; }

/* Icône franchie : petit « pop » à l'arrivée */
@keyframes mgpIconPop {
	0%   { transform: scale(.4); }
	60%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}
.mgp-suivi-resultat .mgp-step.is-done .mgp-step-icon { animation: mgpIconPop .45s ease both; }

/* Étape courante : halo qui pulse pour attirer l'œil */
@keyframes mgpPulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(214,31,43,.20); }
	50%      { box-shadow: 0 0 0 9px rgba(214,31,43,.06); }
}
.mgp-suivi-resultat .mgp-step.is-current .mgp-step-icon {
	animation: mgpIconPop .45s ease both, mgpPulse 1.8s ease-in-out .5s infinite;
}

@media (prefers-reduced-motion: reduce) {
	.mgp-estimateur-resultat:not([hidden]),
	.mgp-suivi-resultat .mgp-step,
	.mgp-suivi-resultat .mgp-step .mgp-step-icon {
		animation: none !important;
	}
}