/* @doxallia/design — Vitrine legacy classes
 * Promoted from inline marketing-site styles.
 * Used by existing route templates (contact, blog, events, legal, status, pricing…).
 * Do not add new classes here — use marketing-*.css with .mk-* prefix for new pages.
 */

/* ── Page layout — backward-compat wrapper for non-rawBody routes ─── */

/* Used by buildLayout() backward-compat path (contact, blog, events, legal…).
 * Max-width container that mirrors the old inline style="max-width:860px;…". */
.vitrine-page-content {
	max-width: 860px;
	margin: 0 auto;
	padding: var(--s-8) var(--s-6);
}

@media (max-width: 640px) {
	.vitrine-page-content {
		padding: var(--s-6) var(--s-4);
	}
}

/* ── Empty state (events, ressources, blog when zero items) ────────────
   Full-width inside .grid-3-col via grid-column: 1 / -1. Soft card with
   title + description + CTA pair. Pairs with JS-free section — so it
   doubles as a recovery signal ("here's what to do next"). */
.vitrine-empty-state {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	text-align: center;
	padding: 3rem 1.5rem;
	background: rgba(20, 28, 82, 0.02);
	border: 1px dashed rgba(20, 28, 82, 0.12);
	border-radius: 12px;
	max-width: 600px;
	margin: 1.5rem auto;
}

.vitrine-empty-state__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-brand, #141c52);
}

.vitrine-empty-state__desc {
	margin: 0;
	color: var(--color-text-muted, #475569);
	line-height: 1.6;
}

.vitrine-empty-state__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.5rem;
}

/* ── Press contact card (emphasis padding on /presse) ─────────────────── */
.vitrine-presse-card {
	padding: 1.5rem 2rem;
}
.vitrine-presse-card .card__title {
	font-size: 1.25rem;
	margin-block: 0.25rem 0.75rem;
}

/* ── Tables in marketing content (MD-rendered + route-rendered) ────────
   Markdown tables arrive as bare <table><thead><tr><th>...<tbody><tr><td>.
   Scope the DS2 treatment to .mk-section and .vitrine-page-content so we
   catch both SSR marketing sections and MD content, without affecting
   other composition-specific tables (wiki, comex-dashboard, etc.). */
.mk-section table,
.vitrine-page-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	background: #ffffff;
	border: 1px solid rgba(20, 28, 82, 0.08);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 28, 82, 0.03);
	margin: 1.5rem 0;
}

.mk-section th,
.vitrine-page-content th {
	background: rgba(20, 28, 82, 0.04);
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 600;
	color: var(--color-brand);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 1px solid rgba(20, 28, 82, 0.08);
}

.mk-section td,
.vitrine-page-content td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgba(20, 28, 82, 0.04);
	color: var(--color-text);
	vertical-align: top;
}

.mk-section tr:last-child td,
.vitrine-page-content tr:last-child td {
	border-bottom: 0;
}

.mk-section tbody tr:hover td,
.vitrine-page-content tbody tr:hover td {
	background: rgba(20, 28, 82, 0.015);
}

@media (max-width: 640px) {
	.mk-section table,
	.vitrine-page-content table {
		font-size: 0.875rem;
	}
	.mk-section :is(th, td),
	.vitrine-page-content :is(th, td) {
		padding: 0.5rem 0.625rem;
	}
}

/* ── Component library ───────────────────────────────────────────── */

/* Badge: solution tags, certification labels */
.vitrine-badge {
	display: inline-block;
	background: var(--color-surface-muted);
	color: var(--color-text);
	padding: 0.25rem 0.75rem;
	border-radius: 4px;
	font-size: 0.85em;
	margin-bottom: 0.5rem;
}

/* Status page service rows */
.vitrine-status-row {
	display: flex;
	align-items: center;
	padding: 1rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-surface-muted);
}

/* Status labels — WCAG AA on light surface (#f1f5f9): green 5.1:1, amber 4.6:1, red 5.1:1 */
.vitrine-status-ok {
	color: #15803d;
}
.vitrine-status-warn {
	color: #b45309;
}
.vitrine-status-down {
	color: #b91c1c;
}
.vitrine-status-row .vitrine-status-ok,
.vitrine-status-row .vitrine-status-warn,
.vitrine-status-row .vitrine-status-down {
	font-size: 0.85em;
}

/* Pricing — highlighted tier card */
.vitrine-tier-featured {
	background: var(--color-surface-muted);
	border: 2px solid var(--color-brand-border);
}

/* Pricing — "Recommandé" badge inside featured tier */
.vitrine-tier-badge {
	text-align: center;
	background: var(--color-brand);
	color: var(--color-on-brand);
	padding: 0.5rem;
	margin: -1.5rem -1.5rem 1rem;
	border-radius: 4px 4px 0 0;
	font-weight: bold;
}

/* Text utilities */
.vitrine-text-muted {
	color: var(--color-text-muted);
}
/* SAFETY: vitrine-text-brand requires --color-surface bg in dark = 4.86:1 ✓
   Do NOT use inside vitrine-status-row (--color-surface-muted dark = 4.05:1) ✗ */
.vitrine-text-brand {
	color: var(--color-brand);
}

/* CTA buttons */
.vitrine-cta-btn {
	display: inline-block;
	background: var(--color-brand);
	color: var(--color-on-brand);
	padding: 0.75rem 1.5rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
	border: none;
	cursor: pointer;
	font-size: 1em;
}

.vitrine-cta-secondary-btn {
	display: inline-block;
	background: var(--color-surface-muted);
	color: var(--color-text);
	padding: 0.75rem 2rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
}

/* Specificity override — .portail-content a (0,1,1) otherwise wins over
   .vitrine-cta-btn (0,1,0) and paints navy text on the navy button.
   The buildLayout wrapper <article class="portail-content …"> applies to every
   vitrine page, so this pair is mandatory for the CTA to stay readable. */
.portail-content .vitrine-cta-btn {
	color: var(--color-on-brand);
	text-decoration: none;
}
.portail-content .vitrine-cta-secondary-btn {
	color: var(--color-text);
	text-decoration: none;
}

/* Info callout */
.vitrine-callout-info {
	background: var(--color-surface-muted);
	border-left: 4px solid var(--color-brand-border);
	border-radius: 4px;
	padding: 1.5rem;
}
.vitrine-callout-info h3 {
	margin-top: 0;
}

/* Responsive grids — WCAG 1.4.10 reflow: collapse to 1 col at ≤640px */
.vitrine-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 2rem 0;
}
.vitrine-grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2rem;
	margin: 2rem 0;
}

@media (max-width: 640px) {
	.vitrine-grid-2,
	.vitrine-grid-3 {
		grid-template-columns: 1fr;
	}
}

/* ── Dark mode overrides ─────────────────────────────────────────────
   Only genuine light→dark flips.
   Tokens (--color-surface, --color-border…) already flip via tokens.css. */
@media (prefers-color-scheme: dark) {
	.vitrine-text-brand {
		color: var(--color-brand-text);
	}
	/* Status labels remapped for dark surface (#293548 --color-surface-muted):
     green-700 (#15803d) = 2.91:1 → green-400 (#4ade80) = 7.3:1 ✓
     amber-700 (#b45309) → amber-300 (#fbbf24) = 7.6:1 ✓
     red-700 (#b91c1c) → red-400 (#f87171) = 4.65:1 ✓ */
	.vitrine-status-ok {
		color: #4ade80;
	}
	.vitrine-status-warn {
		color: #fbbf24;
	}
	.vitrine-status-down {
		color: #f87171;
	}
}

/* ── Skip link — WCAG 2.4.1 bypass blocks ────────────────────────────
   Visible on keyboard focus only; hidden otherwise via clip/overflow. */
.vitrine-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	padding: 0.5rem 1rem;
	background: var(--color-brand, #141c52);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 4px 0;
	/* Hidden until focused */
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.vitrine-skip-link:focus {
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
	white-space: normal;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ── Breadcrumb — WCAG 2.4.8 location in set ─────────────────────────
   Rendered above article content on deep pages (blog/:slug, /evenements/:slug). */
.vitrine-breadcrumb {
	margin-bottom: 1.5rem;
}
.vitrine-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}
.vitrine-breadcrumb li + li::before {
	content: "/";
	margin: 0 0.5rem;
	color: var(--color-text-muted);
}
.vitrine-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
}
.vitrine-breadcrumb a:hover {
	color: var(--color-brand);
	text-decoration: underline;
}
.vitrine-breadcrumb [aria-current="page"] {
	color: var(--color-text);
	font-weight: 500;
}

/* ── Form required note ───────────────────────────────────────────────
   Appears above required-field groups, matching the muted text tone. */
.vitrine-form-required-note {
	font-size: 0.8125rem;
	color: var(--color-text-muted, #6b7280);
	margin: 0 0 0.5rem;
}

/* ── Contact form (simple inline form on /contact) ──────────────────────
   Paired with <label>text <input></label> pattern. Labels stack above
   inputs via flex-column on the <label> itself — no need for separate
   .label + .input markup. 2-col grid collapses to 1-col below 640px.
   Textareas and full-width rows span both columns via :has() selector. */
.vitrine-contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-4, 1rem);
	max-width: 640px;
	margin: 0 auto;
}
.vitrine-contact-form > label {
	display: flex;
	flex-direction: column;
	gap: var(--s-1, 0.25rem);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
}
.vitrine-contact-form > label > :is(input, select, textarea) {
	padding: 0.625rem 0.75rem;
	border: 1px solid rgba(20, 28, 82, 0.2);
	border-radius: 6px;
	background: #ffffff;
	font-size: 1rem;
	color: var(--color-text);
	min-height: 44px;
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
	transition:
		border-color 150ms ease,
		box-shadow 150ms ease;
}
.vitrine-contact-form > label > textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.5;
}
.vitrine-contact-form > label:has(textarea),
.vitrine-contact-form > button,
.vitrine-contact-form > p,
.vitrine-contact-form > script {
	grid-column: 1 / -1;
}
.vitrine-contact-form > label > :focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
	border-color: var(--color-brand);
}
.vitrine-contact-form > label > :is(input, select, textarea):hover:not(:focus) {
	border-color: rgba(20, 28, 82, 0.35);
}
.vitrine-contact-form > .btn {
	justify-self: start;
	min-width: 140px;
}
.vitrine-form-legal {
	font-size: 0.8125rem;
	color: var(--color-text-muted, #6b7280);
	line-height: 1.5;
	margin: var(--s-2, 0.5rem) 0 0;
}
@media (max-width: 640px) {
	.vitrine-contact-form {
		grid-template-columns: 1fr;
	}
	.vitrine-contact-form > .btn {
		justify-self: stretch;
	}
}

/* ── Contact address block (/contact "Nos coordonnées") ──────────────── */
.vitrine-contact-address {
	font-style: normal;
	background: #ffffff;
	border: 1px solid rgba(20, 28, 82, 0.08);
	border-radius: 8px;
	padding: var(--s-4, 1rem) var(--s-5, 1.25rem);
	display: inline-block;
	line-height: 1.6;
	color: var(--color-text);
	box-shadow: 0 1px 2px rgba(20, 28, 82, 0.04);
}

/* ── Resource index — cards grid + intro/outro blocks ───────────────── */
.vitrine-resource-intro {
	font-size: 1.05em;
	line-height: 1.7;
	margin-bottom: 2rem;
}

.vitrine-resource-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin: 1.5rem 0;
}

.vitrine-resource-card {
	display: block;
	padding: 1.5rem;
	background: var(--color-surface-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: border-color 0.15s;
}
.vitrine-resource-card:hover,
.vitrine-resource-card:focus-visible {
	border-color: var(--color-brand);
}
.vitrine-resource-card__category {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 0.5rem;
}
.vitrine-resource-card__title {
	font-weight: 600;
	font-size: var(--text-base);
	color: var(--color-text);
	margin: 0 0 0.5rem;
}
.vitrine-resource-card__desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.5;
}
.vitrine-resource-card__updated {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin: 0.75rem 0 0;
}

.vitrine-resource-cta {
	background: var(--color-surface-muted);
	padding: 2rem;
	border-radius: var(--radius-lg);
	margin: 2rem 0;
	text-align: center;
}
.vitrine-resource-cta__lead {
	font-size: 1.05em;
	margin-bottom: 1rem;
}
.vitrine-resource-cta .vitrine-cta-btn {
	margin-right: 1rem;
}

/* ── Resource detail — breadcrumb meta + prose content ──────────────── */
.vitrine-resource-meta {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: 1.5rem;
}
.vitrine-resource-meta a {
	color: var(--color-text-muted);
	text-decoration: none;
}
.vitrine-resource-back {
	margin-top: 2.5rem;
	text-align: center;
}
.vitrine-resource-back a {
	color: var(--color-brand);
	text-decoration: none;
	font-weight: 600;
}

.vitrine-prose h2 {
	font-size: var(--text-xl);
	margin: 2rem 0 0.75rem;
}
.vitrine-prose h3 {
	font-size: var(--text-lg);
	margin: 1.5rem 0 0.5rem;
}
.vitrine-prose p {
	line-height: 1.8;
	color: var(--color-text-subtle);
	margin: 0 0 1rem;
}
.vitrine-prose ul,
.vitrine-prose ol {
	padding-left: 1.5rem;
	line-height: 1.8;
	color: var(--color-text-subtle);
}
.vitrine-prose li {
	margin-bottom: 0.4rem;
}
.vitrine-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: var(--text-sm);
}
.vitrine-prose th {
	background: var(--color-surface-muted);
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 2px solid var(--color-border);
}
.vitrine-prose td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-border);
}
.vitrine-prose strong {
	color: var(--color-text);
}
.vitrine-prose a {
	color: var(--color-brand);
}

/* ── Status page — card-based service rows ────────────────────────────
   Replaces legacy .vitrine-status-row flex layout with .card styling.
   Used by /statut route (events.ts migration SP4). */
.vitrine-status-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-4);
}
.vitrine-status-badge-group {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

/* ── Back link utility — consistent spacing for back-to-list links ──────
   Used by detail pages (events/:slug, ressources/:slug) after prose content. */
.vitrine-back-link {
	margin-top: var(--s-8);
}

/* ── Home §6 Process — steps paired with schéma Y ────────────────────────
   Inside .grid-split-2-3, .mk-feature-grid--steps would otherwise keep
   its 4-column layout and cram the cards into an unreadable 2fr column.
   Override to 1-column vertical stack so each step card stays readable. */
.grid-split-2-3 > .mk-feature-grid--steps {
	grid-template-columns: 1fr;
}

/* Schéma Y (Fournisseur → PA → PPF → DGFIP) — cap SVG max-width so the
   flow diagram stays proportional next to the vertical steps list. */
.vitrine-schema-y {
	max-width: 260px;
	width: 100%;
	height: auto;
	display: block;
	margin-inline: auto;
}
/* Each node is keyboard-focusable and shows a native tooltip via <title>.
   On hover/focus the rect brightens slightly so users see it's interactive. */
.vitrine-schema-y__node {
	cursor: help;
	transition: opacity 160ms ease;
}
.vitrine-schema-y__node:hover,
.vitrine-schema-y__node:focus-visible {
	opacity: 0.85;
	outline: none;
}
.vitrine-schema-y__node:focus-visible rect {
	stroke: var(--color-brand);
	stroke-width: 3;
}

/* ── Home §2b — Proof numbers layout (card--metric tiles) ───────────────
   The grid wrapper. Individual tiles use .card card--elevated card--metric
   (defined in extensions/3-primitives.css) so text/size/color tokens stay
   canonical DS2+. auto-fit so tiles reflow on narrow viewports. */
.vitrine-proof-numbers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--s-6);
}

/* ── Home §2c — Bento asymétrique ──────────────────────
   Hero tile (lead product) occupe 2 col × 2 rows, les 4 autres tiles en
   1 col × 1 row chacun. Dégrade à 2 col puis 1 col. */
.vitrine-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(12rem, auto);
	gap: var(--s-4);
}
.vitrine-bento__item--hero {
	grid-column: span 2;
	grid-row: span 2;
}
@media (max-width: 1023px) {
	.vitrine-bento {
		grid-template-columns: repeat(2, 1fr);
	}
	.vitrine-bento__item--hero {
		grid-column: span 2;
		grid-row: auto;
	}
}
@media (max-width: 640px) {
	.vitrine-bento {
		grid-template-columns: 1fr;
	}
	.vitrine-bento__item--hero {
		grid-column: auto;
	}
}

/* ── Honeypot field — visually hidden bot trap ──────────────────────────
   Stays in the accessibility tree via aria-hidden=true on the input itself
   but off-screen so no sighted user sees it. Bots that fill every form
   field trip it; humans don't. Pairs with checkAntiBot() in lib/anti-bot.ts. */
.vitrine-honeypot {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ── Form hint (phone autocomplete format help text) ─────────────────────
   Replaces the inline style="font-size:.8125rem;margin:..." repeated on
   demo + diagnostic phone hints. */
.vitrine-form-hint {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	margin: 0.25rem 0 0;
}

/* ── Solutions page lead paragraph ───────────────────────────────────────
   Replaces the inline style="font-size:1.1em;line-height:1.6;" on the
   solution long description block. */
.vitrine-solutions-lead {
	font-size: 1.1em;
	line-height: 1.6;
}

/* ── Demo multi-section form (fieldset-based contact/context/slots/etc.) ─
   Shares styled fieldset treatment with the diagnostic wizard but uses
   column-stacked labels + grid rows for input pairs (Prénom/Nom, Email/Tel).
   Checkboxes in "Créneaux préférés" and "Solutions d'intérêt" get a card
   treatment so each option feels clickable. */
.vitrine-demo-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-5, 1.25rem);
	max-width: 760px;
	margin: 0 auto;
}

.vitrine-demo-form fieldset {
	border: 1px solid rgba(20, 28, 82, 0.08);
	border-radius: 8px;
	padding: var(--s-4, 1rem) var(--s-5, 1.25rem) var(--s-5, 1.25rem);
	margin: 0;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	gap: var(--s-3, 0.75rem);
}

.vitrine-demo-form fieldset > legend {
	font-weight: 600;
	color: var(--color-brand, #141c52);
	padding: 0 0.5rem;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Text inputs inside fieldsets — stack label above input */
.vitrine-demo-form fieldset > label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
}

.vitrine-demo-form
	fieldset
	> label
	> :is(
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		select,
		textarea
	) {
	padding: 0.625rem 0.75rem;
	border: 1px solid rgba(20, 28, 82, 0.2);
	border-radius: 6px;
	background: #ffffff;
	font-size: 1rem;
	min-height: 44px;
	font-family: inherit;
	color: var(--color-text);
	transition: border-color 150ms ease;
}

.vitrine-demo-form fieldset > label > textarea {
	min-height: 100px;
	resize: vertical;
	line-height: 1.5;
}

.vitrine-demo-form fieldset > label > :focus-visible {
	outline: 2px solid var(--color-brand, #141c52);
	outline-offset: 2px;
	border-color: var(--color-brand, #141c52);
}

/* Checkboxes — render as clickable tag-like pills
   Selector matches <label> that directly wraps a checkbox input. */
.vitrine-demo-form fieldset > label:has(> input[type="checkbox"]) {
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	border-radius: 999px;
	border: 1px solid rgba(20, 28, 82, 0.15);
	background: #ffffff;
	cursor: pointer;
	font-weight: 500;
	font-size: 0.875rem;
	transition:
		background 150ms ease,
		border-color 150ms ease;
	min-height: 40px;
	width: auto;
}

.vitrine-demo-form fieldset > label:has(> input[type="checkbox"]):hover {
	background: rgba(20, 28, 82, 0.03);
	border-color: rgba(20, 28, 82, 0.3);
}

.vitrine-demo-form fieldset > label:has(> input[type="checkbox"]:checked) {
	background: rgba(20, 28, 82, 0.06);
	border-color: var(--color-brand, #141c52);
	color: var(--color-brand);
}

.vitrine-demo-form fieldset > label > input[type="checkbox"] {
	accent-color: var(--color-brand, #141c52);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Wrap the checkbox group so they flow horizontally as tags */
.vitrine-demo-form fieldset:has(> label:has(> input[type="checkbox"])) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.vitrine-demo-form fieldset:has(> label:has(> input[type="checkbox"])) > legend,
.vitrine-demo-form fieldset:has(> label:has(> input[type="checkbox"])) > p {
	flex-basis: 100%;
}

/* 2-col grid for Informations de contact (Prénom/Nom, Email/Tel…) */
@media (min-width: 640px) {
	.vitrine-demo-form fieldset:first-of-type {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--s-3, 0.75rem) var(--s-4, 1rem);
	}
	.vitrine-demo-form fieldset:first-of-type > legend,
	.vitrine-demo-form fieldset:first-of-type > p,
	.vitrine-demo-form fieldset:first-of-type > label:has(textarea) {
		grid-column: 1 / -1;
	}
	.vitrine-demo-form fieldset:first-of-type > .vitrine-form-hint {
		grid-column: 1 / -1;
	}
}

/* Submit button alignment */
.vitrine-demo-form > .btn,
.vitrine-demo-form > button[type="submit"] {
	align-self: flex-start;
	min-width: 180px;
}

.vitrine-demo-form > .vitrine-form-legal {
	margin-top: 0;
}

/* ── Diagnostic wizard (5-step form with progressive disclosure) ─────────
   Hidden steps use [hidden] attribute (not inline style="display:none").
   Each .wizard-step contains one <fieldset> (radio group) + action buttons.
   Step 5 is the final lead-capture form with several <label> groups. */
.vitrine-diagnostic-wizard {
	max-width: 680px;
	margin: 0 auto;
	padding: var(--s-5, 1.25rem);
	background: #ffffff;
	border: 1px solid rgba(20, 28, 82, 0.08);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(20, 28, 82, 0.04);
}

.vitrine-diagnostic-wizard .wizard-step {
	display: flex;
	flex-direction: column;
	gap: var(--s-4, 1rem);
}

.vitrine-diagnostic-wizard .wizard-step[hidden] {
	display: none;
}

/* Styled fieldset — no browser-default border/legend-tab */
.vitrine-diagnostic-wizard fieldset {
	border: 1px solid rgba(20, 28, 82, 0.08);
	border-radius: 8px;
	padding: var(--s-4, 1rem) var(--s-5, 1.25rem);
	margin: 0;
	background: #fafbfc;
	display: flex;
	flex-direction: column;
	gap: var(--s-2, 0.5rem);
}

.vitrine-diagnostic-wizard fieldset > legend {
	font-weight: 600;
	color: var(--color-brand, #141c52);
	padding: 0 0.5rem;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Radio options — full-width clickable rows */
.vitrine-diagnostic-wizard fieldset > label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--color-text);
	border: 1px solid transparent;
	transition:
		background 150ms ease,
		border-color 150ms ease;
	min-height: 44px;
}

.vitrine-diagnostic-wizard fieldset > label:hover {
	background: rgba(20, 28, 82, 0.03);
	border-color: rgba(20, 28, 82, 0.08);
}

.vitrine-diagnostic-wizard fieldset > label:has(input:checked) {
	background: rgba(20, 28, 82, 0.06);
	border-color: var(--color-brand, #141c52);
}

.vitrine-diagnostic-wizard fieldset > label > input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--color-brand, #141c52);
	flex-shrink: 0;
}

/* Action row (Précédent / Suivant / Envoyer) */
.vitrine-diagnostic-wizard .wizard-step > button,
.vitrine-diagnostic-wizard .wizard-step > .wizard-step__actions {
	align-self: flex-end;
}

.vitrine-diagnostic-wizard .wizard-step > button {
	margin-left: auto;
}

.vitrine-diagnostic-wizard .wizard-step > button + button {
	margin-left: 0.5rem;
}

/* Text inputs (step 5) — inline labels stacked */
.vitrine-diagnostic-wizard label:has(> input[type="text"]),
.vitrine-diagnostic-wizard label:has(> input[type="email"]),
.vitrine-diagnostic-wizard label:has(> input[type="tel"]) {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-weight: 500;
	font-size: 0.875rem;
}

.vitrine-diagnostic-wizard
	:is(input[type="text"], input[type="email"], input[type="tel"]) {
	padding: 0.625rem 0.75rem;
	border: 1px solid rgba(20, 28, 82, 0.2);
	border-radius: 6px;
	background: #fff;
	font-size: 1rem;
	min-height: 44px;
	font-family: inherit;
	color: var(--color-text);
}

.vitrine-diagnostic-wizard
	:is(
		input[type="text"],
		input[type="email"],
		input[type="tel"]
	):focus-visible {
	outline: 2px solid var(--color-brand, #141c52);
	outline-offset: 2px;
	border-color: var(--color-brand, #141c52);
}

/* Progress indicator — the <p id="wizard-progress"> above the form */
#wizard-progress {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted, #475569);
	margin: 0 0 var(--s-4, 1rem);
}

@media (max-width: 640px) {
	.vitrine-diagnostic-wizard {
		padding: var(--s-4, 1rem);
	}
	.vitrine-diagnostic-wizard .wizard-step > button {
		margin-left: 0;
		align-self: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vitrine-diagnostic-wizard fieldset > label {
		transition: none;
	}
}

/* ── Hero wave PNG fallback ──────────────────────────────────────────────
   Replaces the gradient default of .mk-hero--wave__fallback with a rendered
   snapshot of the canvas. Shown on mobile, prefers-reduced-motion, JS-off,
   and during the <1s before Canvas 2D initialises. PNG captured via
   the consumer's capture-hero-wave.ts (1920×840, pngquant). */
.mk-hero--wave__fallback--png {
	background-image: url("/assets/images/hero-wave-fallback.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ── Smooth scroll global (vitrine-scoped) ────────────────────────────────
   Applied at <html> root so anchor links and anchor-dots smooth-scroll
   regardless of the triggering mechanism. 4-motion.css already forces
   scroll-behavior: auto under prefers-reduced-motion — this rule stays
   behind that override. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ── Theme toggle (nav action slot) ──────────────────────────────────────
   Tiny circular button that flips data-theme=light ↔ dark on <html>.
   Icons swap visibility via :root[data-theme] — no JS needed for the
   display, only for the click handler + localStorage persistence (see
   theme-toggle.js). */
.vitrine-theme-toggle {
	width: 36px;
	height: 36px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(20, 28, 82, 0.15);
	border-radius: 50%;
	background: transparent;
	color: var(--color-text);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition:
		border-color 160ms ease,
		background 160ms ease;
}
.vitrine-theme-toggle:hover {
	border-color: var(--color-brand);
	background: var(--color-surface-muted, rgba(20, 28, 82, 0.04));
}
.vitrine-theme-toggle:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}
.vitrine-theme-toggle__icon {
	display: none;
}
:root[data-theme="light"] .vitrine-theme-toggle__icon--dark,
:root:not([data-theme="dark"]) .vitrine-theme-toggle__icon--dark {
	display: inline;
}
:root[data-theme="dark"] .vitrine-theme-toggle__icon--light {
	display: inline;
}

/* ── Footer newsletter column ────────────────────────────────────────────
   Reuses /contact POST endpoint (same-origin CSRF OK) with hidden message +
   product fields flagging origin as newsletter subscription. Redirects to
   /contact/merci like any other lead. */
.mk-footer__col--newsletter .mk-footer__newsletter-lead {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0 0 var(--s-3);
	line-height: 1.5;
}
.mk-footer__newsletter-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin-bottom: var(--s-3);
}
.mk-footer__newsletter-form input[type="email"] {
	padding: var(--s-2) var(--s-3);
	font-size: var(--text-sm);
	border: 1px solid rgba(20, 28, 82, 0.15);
	border-radius: var(--radius-sm, 4px);
	background: #ffffff;
	color: var(--color-text);
}
.mk-footer__newsletter-form input[type="email"]:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
	border-color: var(--color-brand);
}
.mk-footer__newsletter-form .btn {
	font-size: var(--text-sm);
	padding-block: var(--s-2);
}
.mk-footer__newsletter-note {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.4;
}
.mk-footer__newsletter-note a {
	color: inherit;
	text-decoration: underline;
}

/* ── Hero scroll hint chevron ────────────────────────────────────────────
   Anchor at bottom-center of the hero pointing to #main-content. Pulses
   vertically to invite a first scroll. Invisible on prefers-reduced-motion. */
.vitrine-hero-scroll-hint {
	position: absolute;
	bottom: var(--s-6, 1.5rem);
	left: 50%;
	transform: translateX(-50%);
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(20, 28, 82, 0.25);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(2px);
	transition:
		border-color 200ms ease,
		background 200ms ease;
	z-index: 3;
}
.vitrine-hero-scroll-hint:hover {
	border-color: var(--color-brand);
	background: rgba(255, 255, 255, 0.85);
}
.vitrine-hero-scroll-hint:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
}
.vitrine-hero-scroll-hint__chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--color-brand);
	border-bottom: 2px solid var(--color-brand);
	transform: rotate(45deg) translate(-2px, -2px);
}
@media (prefers-reduced-motion: no-preference) {
	.vitrine-hero-scroll-hint__chevron {
		animation: vitrine-hero-scroll-hint-bounce 1.8s ease-in-out infinite;
	}
	@keyframes vitrine-hero-scroll-hint-bounce {
		0%,
		100% {
			transform: rotate(45deg) translate(-2px, -2px);
		}
		50% {
			transform: rotate(45deg) translate(2px, 2px);
		}
	}
}

/* ── Scroll progress indicator (top-fixed, 2px navy bar) ──────────────────
   Medium/Stripe-style reading-progress cue. Pure CSS via animation-timeline:
   scroll() — Chrome 115+, Firefox degrades to a hidden state (@supports not). */
.vitrine-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--color-brand);
	transform: scaleX(0);
	transform-origin: left center;
	z-index: 1000;
	pointer-events: none;
}
@supports (animation-timeline: scroll()) {
	.vitrine-scroll-progress {
		animation: vitrine-scroll-progress linear;
		animation-timeline: scroll(root);
	}
	@keyframes vitrine-scroll-progress {
		to {
			transform: scaleX(1);
		}
	}
}
@supports not (animation-timeline: scroll()) {
	.vitrine-scroll-progress {
		display: none;
	}
}

/* ── Stagger reveal for card grids ──────────────────────────────────────
   When multiple cards in a row share .reveal-fade-up, shifting each one's
   animation-range creates a cascade as the row enters the viewport. */
@supports (animation-timeline: view()) {
	.grid-3-col > .reveal-fade-up:nth-child(1),
	.grid-4-col > .reveal-fade-up:nth-child(1),
	.vitrine-proof-numbers > .reveal-fade-up:nth-child(1) {
		animation-range: entry 10% cover 25%;
	}
	.grid-3-col > .reveal-fade-up:nth-child(2),
	.grid-4-col > .reveal-fade-up:nth-child(2),
	.vitrine-proof-numbers > .reveal-fade-up:nth-child(2) {
		animation-range: entry 20% cover 35%;
	}
	.grid-3-col > .reveal-fade-up:nth-child(3),
	.grid-4-col > .reveal-fade-up:nth-child(3),
	.vitrine-proof-numbers > .reveal-fade-up:nth-child(3) {
		animation-range: entry 30% cover 45%;
	}
	.grid-4-col > .reveal-fade-up:nth-child(4),
	.vitrine-proof-numbers > .reveal-fade-up:nth-child(4) {
		animation-range: entry 40% cover 55%;
	}
}

/* ── Trust pill shimmer on hover ──────────────────────────────────────────
   Subtle navy→mist→navy sweep on .mk-hero--wave__trust-pill when hovered.
   Bail on reduced-motion (no background-image change). */
.mk-hero--wave__trust-pill {
	background-position: 0 0;
	background-size: 200% 100%;
	transition:
		background-position 600ms ease,
		color 200ms ease;
}
@media (prefers-reduced-motion: no-preference) {
	.mk-hero--wave__trust-pill:hover {
		background-image: linear-gradient(
			90deg,
			transparent 0%,
			rgba(234, 233, 239, 0.35) 50%,
			transparent 100%
		);
		background-position: 100% 0;
	}
}

/* ── Hero parallax — wave backdrop subtly translates on scroll exit ──────
   Deepens the sensation of depth as the user scrolls past §1. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mk-hero--wave__backdrop {
			animation: vitrine-hero-parallax linear;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}
		@keyframes vitrine-hero-parallax {
			to {
				transform: translateY(-12%);
				opacity: 0.75;
			}
		}
	}
}

/* ── Schéma Y arrow draw-in ──────────────────────────────────────────────
   The 3 connector arrows between Fournisseur/PA/PPF/DGFIP animate their
   stroke-dashoffset when §6 enters the viewport. Pure CSS, scoped to the
   .vitrine-schema-y root so the other svgs on the page are not affected. */
.vitrine-schema-y path[stroke] {
	stroke-dasharray: 35;
	stroke-dashoffset: 35;
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.vitrine-schema-y path[stroke] {
			animation: vitrine-schema-y-draw linear forwards;
			animation-timeline: view();
			animation-range: entry 20% cover 55%;
		}
		.vitrine-schema-y path[stroke]:nth-of-type(2) {
			animation-range: entry 30% cover 65%;
		}
		.vitrine-schema-y path[stroke]:nth-of-type(3) {
			animation-range: entry 40% cover 75%;
		}
		@keyframes vitrine-schema-y-draw {
			to {
				stroke-dashoffset: 0;
			}
		}
	}
}
@supports not (animation-timeline: view()) {
	/* Firefox et réduit-motion : afficher les flèches statiquement. */
	.vitrine-schema-y path[stroke] {
		stroke-dashoffset: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vitrine-schema-y path[stroke] {
		stroke-dashoffset: 0;
	}
}

/* ── Anchor dots nav (right edge, desktop only) ─────────────────────────
   Appears empty in SSR, populated by anchor-dots.js on load. Dots track
   scroll position via IntersectionObserver — current section gets
   [data-active="true"]. Hidden on narrow viewports (< 1024px) by JS gate
   + CSS belt-and-braces. */
.vitrine-anchor-dots {
	position: fixed;
	top: 50%;
	right: var(--s-4);
	transform: translateY(-50%);
	z-index: 900;
	pointer-events: auto;
}
.vitrine-anchor-dots__list {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.vitrine-anchor-dots__dot {
	display: block;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid rgba(20, 28, 82, 0.35);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition:
		background 200ms ease,
		border-color 200ms ease,
		transform 200ms ease;
}
.vitrine-anchor-dots__dot:hover {
	border-color: var(--color-brand);
	transform: scale(1.2);
}
.vitrine-anchor-dots__dot[data-active="true"] {
	background: var(--color-brand);
	border-color: var(--color-brand);
}
.vitrine-anchor-dots__dot:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
}
@media (max-width: 1023px) {
	.vitrine-anchor-dots {
		display: none;
	}
}