/* Page « Réviser le code » (funnel #33) — design system --ap-*, mobile d'abord. */

.ap-revcode-hero-in { max-width: 780px; }
.ap-revcode-hero h1 { color: var(--ap-marine); margin: var(--ap-s-2) 0 var(--ap-s-3); }
.ap-revcode-lead { font-size: var(--ap-fs-lead); color: var(--ap-ink); margin-bottom: var(--ap-s-3); }
.ap-revcode-redline {
	font-size: var(--ap-fs-small);
	color: var(--ap-muted);
	background: var(--ap-cream);
	border-left: 3px solid var(--ap-corail);
	padding: var(--ap-s-2) var(--ap-s-3);
	border-radius: var(--ap-r-field);
	margin-bottom: var(--ap-s-4);
}

/* ── Parcours 5 étapes ── */
.ap-revcode-steps h2 { color: var(--ap-marine); margin-bottom: var(--ap-s-6); text-align: center; }
.ap-revcode-list { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: var(--ap-s-4); }
.ap-revcode-step {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: var(--ap-s-3);
	align-items: start;
	background: var(--ap-white);
	border: 1px solid rgba(20, 59, 92, 0.10);
	border-radius: var(--ap-r-card);
	padding: var(--ap-s-4);
	box-shadow: var(--ap-shadow-float);
}
.ap-revcode-num {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--ap-marine); color: #fff;
	font-family: var(--ap-serif); font-size: 22px; font-weight: 700;
}
.ap-revcode-step h3 { color: var(--ap-marine); margin: 0 0 var(--ap-s-1); font-size: var(--ap-fs-h3); }
.ap-revcode-step p { margin: 0 0 var(--ap-s-2); color: var(--ap-ink); }
.ap-revcode-step a:not(.ap-btn) { color: var(--ap-corail-text); font-weight: 600; text-decoration: none; }
.ap-revcode-step a:not(.ap-btn):hover { text-decoration: underline; }
.ap-revcode-third { display: block; margin-top: 4px; font-size: 12px; color: var(--ap-muted); }
.ap-revcode-step-cta { background: var(--ap-cream); border-color: rgba(240, 99, 60, 0.35); }
.ap-revcode-step-cta .ap-btn { margin-top: var(--ap-s-2); }

/* ── Capture lead ── */
.ap-revcode-capture-in { max-width: 620px; }
.ap-revcode-capture h2 { color: var(--ap-marine); }
.ap-funnel-form { margin-top: var(--ap-s-4); display: grid; gap: var(--ap-s-3); }
.ap-field { display: grid; gap: 6px; }
.ap-field label { font-weight: 600; color: var(--ap-marine); font-size: var(--ap-fs-small); }
.ap-field input[type="text"] {
	width: 100%; padding: 12px 14px;
	border: 1px solid rgba(20, 59, 92, 0.25);
	border-radius: var(--ap-r-field);
	font: inherit; color: var(--ap-ink); background: #fff;
}
.ap-field input[type="text"]:focus { outline: 2px solid var(--ap-focus); outline-offset: 1px; border-color: var(--ap-marine); }
.ap-field small { color: var(--ap-muted); font-size: 12px; }
.ap-field-consent label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--ap-ink); font-size: var(--ap-fs-small); }
.ap-field-consent input { margin-top: 3px; }
.ap-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ap-funnel-form .ap-btn { justify-self: start; }
.ap-funnel-msg { margin: var(--ap-s-1) 0 0; font-weight: 600; color: var(--ap-marine); min-height: 1.2em; }
.ap-funnel-legal { font-size: 12px; color: var(--ap-muted); margin: 0; }

@media (min-width: 640px) {
	.ap-revcode-step { grid-template-columns: 56px 1fr; }
	.ap-revcode-num { width: 56px; height: 56px; font-size: 26px; }
}