/*
 * @author: Mathieu MARI <contact@mathieumari.com>
 * @date:   2026-08-08
 * @lastModifiedBy: Cursor <cursor@mathieumari.com>
 * @lastModifiedTime: 2026-09-12
 *
 * Page /audit/web : hero + formulaire, progression, scores, métriques, CTA rapport.
 * Fond hero : même stack que la home Palmer (trame architecte + fumée WebGL verte).
 * Accents marque : --c-brand. Scores pauvres : rouge sémantique local (--audit-poor).
 * Hero : section plein écran (min-height 100svh), même rythme que parrainage / landing / devis.
 * Shell (header / footer / nav) → css/custom.css (global).
 * Chargé via theme.addCustomCSS dans pages/audit/web.php.
 */

.page-audit-web {
	--audit-good: #16c47f;
	--audit-average: #ffb02e;
	--audit-poor: #f5003d;
}

/* ============================================================
   Hero + formulaire
   ============================================================ */
.audit-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	min-height: 100svh;
	padding-block:
		max(calc(var(--header-h) + clamp(1.25rem, 3.5vh, 2.75rem)), env(safe-area-inset-top, 0px))
		clamp(3rem, 8vh, 5.5rem);
	overflow-x: clip;
	isolation: isolate;
}

/* Fond cinématique — même stack que .hero__bg (home Palmer : trame + fumée verte) */
.audit-hero__bg {
	--hero-grid-fine: 44px;
	--hero-grid-major: 220px;
	--hero-grid-opacity: 1;
	--hero-grid-line: rgb(154 230 178 / .085);
	--hero-grid-line-strong: rgb(174 240 198 / .16);

	/* Palette vapeur WebGL (lue par hero-smoke.js) — rampe verte Palmer */
	--smoke-low: #091914;
	--smoke-mid: #12643f;
	--smoke-high: #8fd4a3;
	--smoke-alpha: 0.40;

	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at 82% 8%, rgba(23, 182, 47, .20), transparent 55%),
		radial-gradient(90% 70% at 12% 92%, rgba(11, 71, 38, .28), transparent 60%),
		linear-gradient(180deg, #0c0c12 0%, #08080b 60%, #050507 100%);
}

/* Plan d'architecte — trame CSS (pas de photo root-hero) */
.audit-hero__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(var(--hero-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px),
		linear-gradient(var(--hero-grid-line-strong) 1.5px, transparent 1.5px),
		linear-gradient(90deg, var(--hero-grid-line-strong) 1.5px, transparent 1.5px);
	background-size:
		var(--hero-grid-fine) var(--hero-grid-fine),
		var(--hero-grid-fine) var(--hero-grid-fine),
		var(--hero-grid-major) var(--hero-grid-major),
		var(--hero-grid-major) var(--hero-grid-major);
	background-position: center center;
	opacity: var(--hero-grid-opacity);
	-webkit-mask-image: radial-gradient(ellipse 82% 76% at 50% 42%, #000 0%, rgb(0 0 0 / .55) 52%, transparent 88%);
	mask-image: radial-gradient(ellipse 82% 76% at 50% 42%, #000 0%, rgb(0 0 0 / .55) 52%, transparent 88%);
}

.audit-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgb(23 182 47 / .03);
	background-image:
		radial-gradient(ellipse 128% 108% at 50% 38%, transparent 40%, rgb(0 0 0 / .66) 100%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--c-surface) 58%, transparent) 0%,
			transparent 34%,
			color-mix(in srgb, var(--c-bg) 38%, transparent) 58%,
			color-mix(in srgb, var(--c-bg) 88%, black) 100%
		),
		linear-gradient(108deg,
			color-mix(in srgb, var(--c-bg) 94%, var(--c-brand) 6%) 0%,
			color-mix(in srgb, var(--c-bg) 82%, transparent) 30%,
			color-mix(in srgb, var(--c-bg) 44%, transparent) 52%,
			color-mix(in srgb, var(--c-bg) 20%, var(--c-brand) 6%) 74%,
			color-mix(in srgb, var(--c-bg) 48%, var(--c-brand-strong) 10%) 100%
		),
		radial-gradient(ellipse 78% 58% at 6% 90%, rgb(11 71 38 / .34), transparent 64%),
		radial-gradient(ellipse 42% 34% at 70% 20%, rgb(13 138 36 / .20), transparent 70%),
		radial-gradient(ellipse 68% 52% at 84% 10%, rgb(23 182 47 / .26), transparent 66%);
	background-blend-mode: normal, multiply, normal, normal, soft-light, soft-light;
}

.audit-hero__bg-smoke {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	mix-blend-mode: normal;
	opacity: 0;
	transition: opacity 1.2s var(--ease);
}
.audit-hero__bg-smoke.is-ready { opacity: 1; }

[data-bs-theme="light"] .audit-hero__bg-smoke {
	mix-blend-mode: multiply;
}

@media (prefers-reduced-data: reduce) {
	.audit-hero__bg-smoke { display: none; }
}

.audit-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	max-width: 880px;
}

.audit-hero__eyebrow {
	margin: 0 0 .9rem;
	padding: .3rem .85rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--c-muted);
	background: color-mix(in srgb, var(--c-surface) 60%, transparent);
}

.audit-hero__title {
	margin: 0 0 1rem;
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
	line-height: 1.06;
	letter-spacing: -.02em;
}
.audit-hero__title strong { color: var(--c-brand); font-weight: inherit; }

.audit-hero__lead {
	margin: 0 0 clamp(1.8rem, 4vh, 2.6rem);
	max-width: 62ch;
	font-size: clamp(.98rem, .92rem + .3vw, 1.12rem);
	line-height: 1.6;
	color: var(--c-muted);
}

.audit-form { width: 100%; max-width: 720px; }

.audit-form__row {
	display: flex;
	gap: .6rem;
	align-items: stretch;
}

.audit-form__field {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
}

.audit-form__field-icon {
	position: absolute;
	inset-inline-start: 1.05rem;
	width: 19px;
	height: 19px;
	color: var(--c-muted);
	pointer-events: none;
}

.audit-form__input {
	width: 100%;
	min-height: 56px;
	padding: .9rem 1.1rem .9rem 3rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	background: var(--c-surface);
	color: var(--c-text);
	font: inherit;
	font-size: 1rem;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.audit-form__input::placeholder { color: var(--c-muted); }
.audit-form__input:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--c-brand) 55%, transparent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-brand) 16%, transparent);
}
.audit-form__input.is-invalid { border-color: var(--audit-poor); }

.audit-cta__field .audit-form__input { padding-inline-start: 1.3rem; }

.audit-form__submit {
	flex-shrink: 0;
	min-height: 56px;
	padding-inline: 1.9rem;
}

/* Champ honeypot : retiré du flux sans display:none (certains bots l'ignorent) */
.audit-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.audit-form__spinner {
	display: none;
	width: 17px;
	height: 17px;
	border: 2px solid rgb(255 255 255 / .35);
	border-block-start-color: #fff;
	border-radius: 50%;
	animation: audit-spin .7s linear infinite;
}
.is-loading .audit-form__spinner,
.btn.is-loading .audit-form__spinner { display: inline-block; }
.btn.is-loading { pointer-events: none; opacity: .78; }
.btn.is-loading .audit-form__submit-label,
.btn.is-loading .audit-cta__submit-label { display: none; }

@keyframes audit-spin { to { transform: rotate(360deg); } }

.audit-form__note {
	margin: 1.1rem 0 0;
	font-size: .84rem;
	color: var(--c-muted);
	text-align: center;
}

.audit-results__tabs {
	display: inline-flex;
	margin-block-start: 1.25rem;
}

.audit-seg {
	display: inline-flex;
	padding: .22rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--c-surface) 70%, transparent);
}
.audit-seg__btn {
	padding: .4rem 1rem;
	border: 0;
	border-radius: var(--r-pill);
	background: none;
	color: var(--c-muted);
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.audit-seg__btn.is-active {
	background: var(--c-surface-2);
	color: var(--c-text);
}


.audit-form__error {
	margin: 1rem 0 0;
	padding: .8rem 1rem;
	border: 1px solid color-mix(in srgb, var(--c-brand) 45%, transparent);
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--c-brand) 10%, transparent);
	font-size: .9rem;
	text-align: start;
}


/* ============================================================
   Progression
   ============================================================ */
.audit-progress {
	width: 100%;
	max-width: 720px;
	margin-block-start: 2.2rem;
}

.audit-progress__bar {
	height: 4px;
	border-radius: var(--r-pill);
	background: var(--c-surface-2);
	overflow: hidden;
}
.audit-progress__bar-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: var(--r-pill);
	background: linear-gradient(90deg, var(--c-brand), var(--c-brand-soft));
	transition: width .6s var(--ease);
}

.audit-progress__steps {
	display: grid;
	gap: .55rem;
	margin-block-start: 1.4rem;
	text-align: start;
}

.audit-progress__step {
	position: relative;
	padding-inline-start: 1.85rem;
	font-size: .92rem;
	color: var(--c-muted);
	opacity: .45;
	transition: opacity .3s var(--ease), color .3s var(--ease);
}
.audit-progress__step::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .35em;
	width: 9px;
	height: 9px;
	border: 2px solid currentColor;
	border-radius: 50%;
}
.audit-progress__step.is-current {
	opacity: 1;
	color: var(--c-text);
}
.audit-progress__step.is-current::before {
	border-color: var(--c-brand);
	animation: audit-pulse 1.4s var(--ease) infinite;
}
.audit-progress__step.is-done { opacity: .85; color: var(--c-muted); }
.audit-progress__step.is-done::before {
	border-color: var(--audit-good);
	background: var(--audit-good);
}

@keyframes audit-pulse {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-brand) 45%, transparent); }
	50% { box-shadow: 0 0 0 6px transparent; }
}


/* ============================================================
   Résultats
   ============================================================ */
.audit-results {
	padding-block: clamp(2.5rem, 7vh, 4.5rem);
	scroll-margin-block-start: calc(var(--header-h) + 1rem);
}
.audit-results:focus { outline: none; }

.audit-results__head { margin-block-end: 2.2rem; text-align: center; }

.audit-results__title {
	margin: 0 0 .5rem;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
	letter-spacing: -.015em;
}

.audit-results__url {
	margin: 0;
	font-size: .92rem;
	color: var(--c-muted);
	word-break: break-all;
}

.audit-results__category {
	display: inline-block;
	margin: .75rem 0 0;
	padding: .28rem .7rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--c-brand);
	background: color-mix(in srgb, var(--c-brand) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--c-brand) 28%, transparent);
}

/* Score global /10 */
.audit-final {
	display: flex;
	align-items: center;
	gap: clamp(1.2rem, 3vw, 2rem);
	padding: clamp(1.4rem, 3vw, 2rem);
	margin-block-end: clamp(1.8rem, 4vh, 2.6rem);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	background: var(--c-surface);
}

.audit-final__score {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: .15rem;
	line-height: 1;
}
.audit-final__num {
	font-family: var(--font-display);
	font-size: clamp(3rem, 2.2rem + 3vw, 4.2rem);
	font-weight: 700;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}
.audit-final__unit {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--c-muted);
}
.audit-final__score.is-good .audit-final__num { color: var(--audit-good); }
.audit-final__score.is-average .audit-final__num { color: var(--audit-average); }
.audit-final__score.is-poor .audit-final__num { color: var(--audit-poor); }

.audit-final__copy { min-width: 0; flex: 1 1 auto; }
.audit-final__label {
	margin: 0 0 .45rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.audit-final__summary {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--c-text);
}

.audit-scores {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
}

.audit-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
	padding: 1.5rem 1rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	background: var(--c-surface);
}

.audit-score__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 108px;
	height: 108px;
}
.audit-score__ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
.audit-score__track {
	fill: none;
	stroke: var(--c-surface-2);
	stroke-width: 9;
}
.audit-score__value {
	fill: none;
	stroke: var(--audit-average);
	stroke-width: 9;
	stroke-linecap: round;
	/* 2πr avec r=52 : l'offset part du cercle complet et se réduit vers le score */
	stroke-dasharray: 326.7;
	stroke-dashoffset: 326.7;
	transition: stroke-dashoffset 1s var(--ease), stroke .4s var(--ease);
}
.audit-score.is-good .audit-score__value { stroke: var(--audit-good); }
.audit-score.is-average .audit-score__value { stroke: var(--audit-average); }
.audit-score.is-poor .audit-score__value { stroke: var(--audit-poor); }

.audit-score__num {
	position: absolute;
	font-size: 1.85rem;
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.audit-score.is-good .audit-score__num { color: var(--audit-good); }
.audit-score.is-average .audit-score__num { color: var(--audit-average); }
.audit-score.is-poor .audit-score__num { color: var(--audit-poor); }

.audit-score__label {
	margin: 0;
	font-size: .88rem;
	font-weight: 600;
	color: var(--c-muted);
	text-align: center;
}

/* ============================================================
   Blocs de détail
   ============================================================ */
.audit-block { margin-block-start: clamp(2.2rem, 5vh, 3.2rem); }

.audit-block__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem .7rem;
	margin: 0 0 .4rem;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
	letter-spacing: -.01em;
}
.audit-block__tag {
	display: inline-flex;
	align-items: center;
	padding: .18rem .6rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	font-family: var(--font-sans, inherit);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-muted);
	background: color-mix(in srgb, var(--c-surface) 70%, transparent);
}
.audit-block__lead { margin: 0 0 1.2rem; font-size: .9rem; color: var(--c-muted); }

.audit-block--tech { margin-block-start: 0; }

.audit-criteria {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .85rem;
}

.audit-criterion {
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--c-border);
	border-inline-start: 3px solid var(--c-border);
	border-radius: var(--r-md);
	background: var(--c-surface);
}
.audit-criterion.is-good { border-inline-start-color: var(--audit-good); }
.audit-criterion.is-average { border-inline-start-color: var(--audit-average); }
.audit-criterion.is-poor { border-inline-start-color: var(--audit-poor); }

.audit-criterion__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: .55rem;
}
.audit-criterion__label {
	margin: 0;
	font-size: 1rem;
	font-weight: 650;
}
.audit-criterion__score {
	flex: 0 0 auto;
	font-size: 1.15rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.audit-criterion.is-good .audit-criterion__score { color: var(--audit-good); }
.audit-criterion.is-average .audit-criterion__score { color: var(--audit-average); }
.audit-criterion.is-poor .audit-criterion__score { color: var(--audit-poor); }

.audit-criterion__raison,
.audit-criterion__suggestion {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--c-muted);
}
.audit-criterion__suggestion {
	margin-block-start: .35rem;
	color: var(--c-text);
}
.audit-criterion__suggestion::before {
	content: "Piste : ";
	font-weight: 650;
	color: var(--c-muted);
}

.audit-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: .9rem;
	margin-block-start: 1.2rem;
}

.audit-metric {
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--c-border);
	border-inline-start: 3px solid var(--c-border);
	border-radius: var(--r-md);
	background: var(--c-surface);
}
.audit-metric.is-good { border-inline-start-color: var(--audit-good); }
.audit-metric.is-average { border-inline-start-color: var(--audit-average); }
.audit-metric.is-poor { border-inline-start-color: var(--audit-poor); }

.audit-metric__label {
	margin: 0 0 .35rem;
	font-size: .8rem;
	font-weight: 600;
	color: var(--c-muted);
}
.audit-metric__value {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.audit-metric.is-good .audit-metric__value { color: var(--audit-good); }
.audit-metric.is-average .audit-metric__value { color: var(--audit-average); }
.audit-metric.is-poor .audit-metric__value { color: var(--audit-poor); }

.audit-opps { display: grid; gap: .7rem; }

.audit-opp {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem 1rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	background: var(--c-surface);
}
.audit-opp__title {
	flex: 1;
	min-width: 200px;
	margin: 0;
	font-size: .98rem;
	font-weight: 600;
}
.audit-opp__gain {
	flex-shrink: 0;
	padding: .25rem .6rem;
	border-radius: var(--r-pill);
	font-size: .78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--c-bg);
	background: var(--audit-average);
}
.audit-opp.is-high .audit-opp__gain { background: var(--audit-poor); color: #fff; }
.audit-opp.is-low .audit-opp__gain { background: var(--c-surface-2); color: var(--c-text); }
.audit-opp__desc {
	flex-basis: 100%;
	margin: 0;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--c-muted);
}

.audit-fails {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin-block-start: 1.2rem;
}
.audit-fail-group {
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	background: var(--c-surface);
}
.audit-fail-group__title {
	margin: 0 0 .7rem;
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--c-muted);
}
.audit-fail-group__list { display: grid; gap: .45rem; }
.audit-fail-group__item {
	position: relative;
	padding-inline-start: 1.15rem;
	font-size: .89rem;
	line-height: 1.5;
}
.audit-fail-group__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-brand);
}


/* ============================================================
   Soft-gate — leurre flouté + overlay email (hauteur = zone floue, pas 100vh)
   ============================================================ */
.audit-gate {
	position: relative;
	margin-block-start: clamp(1.8rem, 4vh, 2.6rem);
	margin-block-end: 0;
}

.audit-results {
	padding-block-end: clamp(1.5rem, 4vh, 2.5rem);
}

.audit-gate__preview > .audit-block:first-child,
.audit-gate__decoy > .audit-block:first-child {
	margin-block-start: 0;
}

.audit-gate__decoy-p {
	margin: 0 0 1rem;
	max-width: 72ch;
	font-size: .92rem;
	line-height: 1.65;
	color: var(--c-muted);
}

.audit-gate__success {
	margin: 0 0 1.2rem;
	padding: .85rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--audit-good) 45%, var(--c-border));
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--audit-good) 12%, var(--c-surface));
	font-size: .92rem;
	color: var(--audit-good);
}

.audit-gate__veil {
	display: none;
	pointer-events: none;
}

.audit-gate__overlay {
	display: none;
}

.audit-gate__decoy {
	display: none;
}

/* --- État verrouillé : hauteur FIXE = 1 viewport (pas de min-height qui laisse
   le leurre étirer le bloc → trou noir). Leurres en absolute pour remplir. --- */
.audit-gate.is-locked {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100vh - var(--header-h, 4.5rem));
	height: calc(100dvh - var(--header-h, 4.5rem));
	max-height: calc(100vh - var(--header-h, 4.5rem));
	max-height: calc(100dvh - var(--header-h, 4.5rem));
	scroll-margin-top: var(--header-h, 4.5rem);
	overflow: hidden;
	border-radius: clamp(var(--r-md), 2vw, 20px);
}

.audit-gate.is-locked .audit-gate__decoy {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	filter: blur(6px);
	transform: scale(1.02);
	user-select: none;
	pointer-events: none;
	/* Légère diminution vers le bas, sans trou noir opaque */
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 55%,
		rgba(0, 0, 0, .65) 82%,
		rgba(0, 0, 0, .35) 100%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 55%,
		rgba(0, 0, 0, .65) 82%,
		rgba(0, 0, 0, .35) 100%
	);
}

.audit-gate.is-locked .audit-gate__preview {
	display: none !important;
}

.audit-gate.is-locked .audit-gate__veil {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Voile léger partout — plus de bande noire pleine en bas */
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--c-bg) 12%, transparent) 0%,
		color-mix(in srgb, var(--c-bg) 28%, transparent) 45%,
		color-mix(in srgb, var(--c-bg) 48%, transparent) 100%
	);
}

.audit-gate.is-locked .audit-gate__overlay {
	display: block;
	position: relative;
	z-index: 2;
	width: min(640px, calc(100% - 1.5rem));
	margin: 0;
	flex-shrink: 0;
}

.audit-gate.is-unlocked {
	display: block;
	height: auto;
	max-height: none;
}

.audit-gate.is-unlocked .audit-gate__decoy,
.audit-gate.is-unlocked .audit-gate__overlay,
.audit-gate.is-unlocked .audit-gate__veil {
	display: none;
}

.audit-gate.is-unlocked .audit-gate__preview {
	display: block;
	position: static;
	filter: none;
	transform: none;
	user-select: auto;
	pointer-events: auto;
}

/* Carte email (réutilise le vocabulaire .audit-cta__*) */
.audit-cta__inner {
	display: grid;
	gap: 1.15rem;
	padding: clamp(1.35rem, 3.5vw, 1.85rem);
	border: 1px solid var(--c-border);
	border-radius: clamp(var(--r-md), 2vw, 20px);
	background:
		radial-gradient(ellipse 80% 120% at 100% 0%, rgb(23 182 47 / .16), transparent 60%),
		color-mix(in srgb, var(--c-panel-bg, var(--c-surface)) 92%, transparent);
	backdrop-filter: blur(18px) saturate(140%);
	box-shadow:
		0 22px 48px rgba(0, 0, 0, .18),
		0 0 0 1px color-mix(in srgb, var(--c-border) 50%, transparent) inset;
}

.audit-cta__eyebrow {
	margin: 0 0 .45rem;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--c-brand);
}
.audit-cta__title {
	margin: 0 0 .55rem;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.65rem);
	letter-spacing: -.015em;
}
.audit-cta__lead {
	margin: 0;
	max-width: 48ch;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--c-muted);
}

.audit-cta__form {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}
.audit-cta__field { flex: 1; min-width: 180px; }
.audit-cta__submit { min-height: 52px; flex-shrink: 0; }
.audit-cta__local {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem .7rem;
	flex-basis: 100%;
}
.audit-cta__local[hidden] { display: none; }
.audit-cta__local-note {
	margin: 0;
	font-size: .78rem;
	color: var(--c-muted);
}

.audit-cta__feedback {
	flex-basis: 100%;
	margin: 0;
	font-size: .88rem;
	color: var(--c-muted);
}
.audit-cta__feedback.is-error { color: var(--audit-poor); }
.audit-cta__feedback.is-success { color: var(--audit-good); }

@media (min-width: 720px) {
	.audit-cta__inner {
		grid-template-columns: 1.1fr minmax(240px, 1fr);
		align-items: center;
		gap: 1.4rem;
	}
}

@media (max-width: 640px) {
	.audit-form__row { flex-direction: column; }
	.audit-form__submit { width: 100%; }
	.audit-cta__submit { width: 100%; }
	.audit-cta__inner {
		padding: 1.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.audit-score__value,
	.audit-progress__bar-fill { transition: none; }
	.audit-progress__step.is-current::before,
	.audit-form__spinner { animation: none; }
	.audit-gate.is-locked .audit-gate__decoy {
		transform: none;
	}
}


/* ============================================================
   Thème clair — fond hero (trame architecte + scrim central)
   ============================================================ */
[data-bs-theme="light"] .audit-hero__bg {
	/* Poussière light (mode multiply) : craie verte, pas de néon */
	--smoke-low: #eef6ef;
	--smoke-mid: #8fc39c;
	--smoke-high: #3f7d51;
	--smoke-alpha: 0.34;
	--hero-grid-line: rgb(13 138 36 / .13);
	--hero-grid-line-strong: rgb(13 138 36 / .22);
	background:
		radial-gradient(72% 64% at 102% -2%, rgb(23 182 47 / .16), transparent 48%),
		linear-gradient(180deg, #ffffff 0%, #f5fdf7 50%, var(--c-bg) 100%);
}

[data-bs-theme="light"] .audit-hero__bg::before {
	filter: none;
	opacity: 1;
	box-shadow: none;
	-webkit-mask-image:
		radial-gradient(ellipse 96% 104% at 104% -6%, #000 0%, #000 38%, rgb(0 0 0 / .35) 62%, transparent 80%);
	mask-image:
		radial-gradient(ellipse 96% 104% at 104% -6%, #000 0%, #000 38%, rgb(0 0 0 / .35) 62%, transparent 80%);
}

@media (max-width: 720px) {
	[data-bs-theme="light"] .audit-hero__bg::before {
		-webkit-mask-image:
			radial-gradient(ellipse 120% 70% at 108% -8%, #000 0%, #000 36%, rgb(0 0 0 / .32) 60%, transparent 80%);
		mask-image:
			radial-gradient(ellipse 120% 70% at 108% -8%, #000 0%, #000 36%, rgb(0 0 0 / .32) 60%, transparent 80%);
	}
}

/* Scrim central — protège le copy/formulaire centré */
[data-bs-theme="light"] .audit-hero__bg::after {
	background-color: transparent;
	background-image:
		radial-gradient(ellipse 70% 55% at 50% 42%, rgb(255 255 255 / .92) 0%, rgb(255 255 255 / .72) 45%, transparent 78%),
		radial-gradient(34% 40% at 88% 18%, rgb(23 182 47 / .14), transparent 56%),
		linear-gradient(180deg, transparent 56%, var(--c-bg) 100%);
	background-blend-mode: normal;
}