/* ==========================================================================
   Antworks — feuille de style unique.
   Ordre : tokens → fontes → base → utilitaires → header → hero → sections
   → composants (dans l'ordre de la page) → tarifs → prose → footer → a11y.
   Mobile-first ; points de rupture : 640px, 900px, 1200px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Couleurs — maquette. Les gris « muted » sont assombris pour tenir
	   le contraste AA (4.5:1) sur fond blanc et surface. */
	--c-bg: #ffffff;
	--c-surface: #f4f6f8;
	--c-ink: #12161b;
	--c-text: #3d4650;
	--c-muted: #5f6b76;
	--c-accent: #2271b1;
	--c-accent-strong: #135e96;
	--c-line: #e1e6ea;
	--c-line-soft: #e7ebee;
	--c-line-header: #e8ecef;
	--c-input: #8a939c; /* bordure de champ : 3.1:1 sur blanc (WCAG 1.4.11) */
	--c-btn-border: #c9d2d9;
	--c-dot: #b6bfc7;
	/* Bande sombre */
	--c-dark-line: #232a31;
	--c-dark-text: #b9c4cc;
	--c-dark-muted: #8a939c;
	--c-dark-link: #7fb2dc;

	/* Typo */
	--f-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
	--f-text: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
	--f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

	/* Rythme */
	--section-gap: clamp(4.5rem, 10vw, 8rem);
	--radius: 12px;
	--radius-sm: 8px;
}

/* --------------------------------------------------------------------------
   2. Fontes — woff2 auto-hébergées, variables, subset latin
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/bricolage-grotesque-var.woff2') format('woff2');
	font-weight: 600 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-var.woff2') format('woff2');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font: 400 1rem/1.65 var(--f-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
	margin: 0;
}
ul,
ol {
	padding: 0;
	list-style: none;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
a {
	color: var(--c-accent);
	text-decoration: none;
}
a:hover {
	color: var(--c-accent-strong);
}
button {
	font: inherit;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. Utilitaires
   -------------------------------------------------------------------------- */
.wrap {
	max-width: 82rem; /* 1312px = 1440 − 2×64 */
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4.45vw, 4rem);
}
.wrap--narrow {
	max-width: 54rem;
}
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	left: 0;
	top: -100%;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--c-ink);
	color: #fff;
	font: 600 0.875rem var(--f-text);
}
.skip-link:focus {
	top: 0;
	color: #fff;
}

/* Boutons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9375rem 1.625rem;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	font: 600 1rem var(--f-text);
	line-height: 1.2;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--primary {
	background: var(--c-accent);
	color: #fff;
}
.btn--primary:hover {
	background: var(--c-accent-strong);
	color: #fff;
}
.btn--ghost {
	border-color: var(--c-btn-border);
	color: var(--c-ink);
	background: transparent;
}
.btn--ghost:hover {
	border-color: var(--c-accent);
	color: var(--c-ink);
}
.btn--sm {
	padding: 0.6875rem 1.25rem;
	border-radius: 6px;
	font-size: 0.90625rem;
}
.btn__arrow {
	color: var(--c-accent);
}
.btn--primary .btn__arrow {
	color: #fff;
}

/* Eyebrow */
.eyebrow {
	font: 500 0.78125rem var(--f-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-line-header);
}
.site-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: 3.75rem;
}
.site-header__logo img {
	height: 1.5rem;
	width: auto;
}
.site-nav {
	display: none;
}
.site-nav__list {
	display: flex;
	align-items: center;
	gap: 2rem;
}
.site-nav__list a {
	font: 500 0.9375rem var(--f-text);
	color: var(--c-text);
}
.site-nav__list a:hover,
.site-nav__list a.is-current {
	color: var(--c-ink);
}
.site-nav__list a.is-current {
	font-weight: 600;
}
.site-nav__extra {
	display: flex;
	align-items: center;
	gap: 1.375rem;
}
.site-nav__tel {
	font: 500 0.8125rem var(--f-mono);
	color: var(--c-ink);
}
.site-header__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.625rem;
	border: 0;
	background: none;
	color: var(--c-ink);
}
@media (min-width: 900px) {
	.site-header__in {
		height: 4.75rem;
	}
	.site-header__logo img {
		height: 1.875rem;
	}
	.site-nav {
		display: flex;
		align-items: center;
		gap: 2rem;
		flex: 1;
		justify-content: space-between;
		margin-left: 2rem;
	}
	.site-header__burger {
		display: none;
	}
}
@media (max-width: 899.98px) {
	.site-nav.is-open {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 3.75rem;
		z-index: 50;
		background: var(--c-bg);
		border-bottom: 1px solid var(--c-line);
		padding: 1rem clamp(1.25rem, 4.45vw, 4rem) 1.5rem;
	}
	.site-header {
		position: relative;
	}
	.site-nav.is-open .site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.site-nav.is-open .site-nav__list a {
		display: block;
		padding: 0.875rem 0;
		border-bottom: 1px solid var(--c-line-soft);
		font-size: 1.0625rem;
	}
	.site-nav.is-open .site-nav__extra {
		flex-direction: column;
		align-items: stretch;
		gap: 0.875rem;
		margin-top: 1.25rem;
	}
	.site-nav.is-open .site-nav__tel {
		text-align: center;
		font-size: 0.9375rem;
	}
}

/* --------------------------------------------------------------------------
   6. Hero + barre de preuve
   -------------------------------------------------------------------------- */
.hero {
	padding-top: clamp(3rem, 8vw, 6rem);
}
.hero__title {
	margin-top: clamp(1.125rem, 2vw, 1.5rem);
	font: 800 clamp(2.5rem, 6.5vw, 4.25rem)/1.03 var(--f-display);
	letter-spacing: -0.025em;
	color: var(--c-ink);
	max-width: 56.25rem;
	text-wrap: pretty;
}
.hero__sub {
	margin-top: clamp(1rem, 2vw, 1.625rem);
	font-size: clamp(1.03125rem, 1.6vw, 1.1875rem);
	line-height: 1.65;
	max-width: 45rem;
	text-wrap: pretty;
}
.hero__sub a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.hero__cta {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
}
@media (min-width: 640px) {
	.hero__cta {
		flex-direction: row;
		align-items: center;
		gap: 0.875rem;
	}
}
.hero--page {
	padding-top: clamp(2.75rem, 6vw, 5.25rem);
}
.hero__title--page {
	font-size: clamp(2.125rem, 4.5vw, 3.5rem);
	line-height: 1.06;
	max-width: 53.75rem;
}

/* Barre de preuve */
.proofbar {
	margin-top: clamp(3rem, 7vw, 5rem);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}
.proofbar__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.proofbar__cell {
	padding: 1rem 1rem 1.125rem 0;
}
.proofbar__cell:nth-child(2n) {
	border-left: 1px solid var(--c-line);
	padding-left: 1.125rem;
}
.proofbar__cell:nth-child(n + 3) {
	border-top: 1px solid var(--c-line);
}
.proofbar__label {
	font: 500 0.59375rem var(--f-mono);
	letter-spacing: 0.1em;
	color: var(--c-muted);
}
.proofbar__value {
	margin-top: 0.375rem;
	font: 500 0.84375rem var(--f-mono);
	color: var(--c-ink);
}
@media (min-width: 900px) {
	.proofbar__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.proofbar__cell,
	.proofbar__cell:nth-child(2n) {
		padding: 1.5rem 2rem 1.75rem;
	}
	.proofbar__cell:first-child {
		padding-left: 0;
	}
	.proofbar__cell:nth-child(n + 2) {
		border-left: 1px solid var(--c-line);
	}
	.proofbar__cell:nth-child(n + 3) {
		border-top: 0;
	}
	.proofbar__label {
		font-size: 0.625rem;
		letter-spacing: 0.12em;
	}
	.proofbar__value {
		margin-top: 0.5625rem;
		font-size: 1.3125rem;
		letter-spacing: -0.01em;
	}
}

/* --------------------------------------------------------------------------
   7. Sections génériques
   -------------------------------------------------------------------------- */
.section {
	padding-top: var(--section-gap);
}
.section--flush {
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
}
.section__kicker {
	font: 500 0.65625rem var(--f-mono);
	letter-spacing: 0.14em;
	color: var(--c-muted);
}
.section__kicker--dark {
	color: var(--c-dark-muted);
}
.section__title {
	margin-top: clamp(0.75rem, 1.5vw, 1rem);
	font: 700 clamp(1.875rem, 3.2vw, 2.5rem)/1.1 var(--f-display);
	letter-spacing: -0.02em;
	color: var(--c-ink);
	text-wrap: pretty;
}
.section__title--dark {
	color: #fff;
	max-width: 35rem;
	text-wrap: balance;
}
.section__intro {
	margin-top: 1rem;
	font-size: 0.96875rem;
	line-height: 1.6;
	max-width: 45rem;
}
.section--band {
	margin-top: var(--section-gap);
	padding: clamp(3.5rem, 8vw, 6.25rem) 0 clamp(3.75rem, 8vw, 6.5rem);
	background: var(--c-surface);
	border-top: 1px solid var(--c-line-soft);
	border-bottom: 1px solid var(--c-line-soft);
}
.section--band + .section {
	/* la bande porte déjà son propre espacement */
}
.section--dark {
	margin-top: var(--section-gap);
	padding: clamp(3.5rem, 8vw, 6.25rem) 0 clamp(3.75rem, 8vw, 6.5rem);
	background: var(--c-ink);
}

/* --------------------------------------------------------------------------
   8. Douleurs
   -------------------------------------------------------------------------- */
.pains {
	display: grid;
	gap: 1rem;
	margin-top: clamp(2rem, 4.5vw, 3rem);
}
.pain-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--radius);
	padding: 1.5rem 1.375rem 1.625rem;
}
.pain-card__text {
	font: 600 1.0625rem/1.45 var(--f-display);
	color: var(--c-ink);
	text-wrap: pretty;
}
@media (min-width: 640px) {
	.pains {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}
}
@media (min-width: 1200px) {
	.pains {
		grid-template-columns: repeat(4, 1fr);
	}
	.pain-card {
		padding: 1.875rem 1.75rem 2rem;
	}
	.pain-card__text {
		font-size: 1.125rem;
	}
}
.punchline {
	margin-top: clamp(2rem, 4vw, 3.25rem);
	font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.25 var(--f-display);
	letter-spacing: -0.015em;
	color: var(--c-ink);
	max-width: 51.25rem;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   9. Services
   -------------------------------------------------------------------------- */
.services {
	display: grid;
	gap: 1rem;
	margin-top: clamp(2rem, 4.5vw, 3rem);
}
.service-card {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 1.375rem 1.25rem;
	background: var(--c-bg);
}
.service-card--lead {
	border-top: 3px solid var(--c-accent);
}
.service-card--alt {
	background: var(--c-surface);
}
.service-card__flag {
	font: 600 0.59375rem var(--f-mono);
	letter-spacing: 0.12em;
	color: var(--c-accent);
	margin-bottom: 0.6875rem;
}
.service-card__title {
	font: 600 1.25rem/1.25 var(--f-display);
	color: var(--c-ink);
}
.service-card__text {
	margin-top: 0.5625rem;
	font-size: 0.875rem;
	line-height: 1.6;
}
@media (min-width: 640px) {
	.services {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}
	.service-card--lead {
		grid-column: span 2;
	}
}
@media (min-width: 900px) {
	.services {
		grid-template-columns: repeat(3, 1fr);
	}
	.service-card {
		padding: 2rem 1.875rem 2.125rem;
	}
	.service-card--lead .service-card__title {
		font-size: 1.5rem;
		line-height: 1.2;
	}
	.service-card--lead .service-card__text {
		font-size: 0.96875rem;
		max-width: 35rem;
	}
	.service-card__flag {
		font-size: 0.625rem;
		margin-bottom: 0.875rem;
	}
	.service-card__text {
		font-size: 0.90625rem;
	}
}

/* --------------------------------------------------------------------------
   10. Marque blanche : les règles
   -------------------------------------------------------------------------- */
.rules {
	display: grid;
	gap: 1.25rem;
}
.rules__list {
	margin-top: 0.25rem;
}
.rules__item {
	padding: 1.125rem 0;
	border-bottom: 1px solid var(--c-line);
}
.rules__item:last-child {
	border-bottom: 0;
}
.rules__text {
	font: 500 0.96875rem/1.5 var(--f-text);
	color: var(--c-ink);
	text-wrap: pretty;
}
.rules__text--strong {
	font: 600 1.0625rem/1.45 var(--f-display);
}
@media (min-width: 900px) {
	.rules {
		grid-template-columns: 23.75rem 1fr;
		gap: 4.5rem;
	}
	.rules__item {
		padding: 1.375rem 0;
	}
	.rules__text {
		font-size: 1.125rem;
		line-height: 1.4;
	}
	.rules__text--strong {
		font-size: 1.25rem;
	}
}

/* --------------------------------------------------------------------------
   11. Méthode
   -------------------------------------------------------------------------- */
.steps {
	margin-top: clamp(1.5rem, 3.5vw, 3rem);
	border-top: 1px solid var(--c-line);
}
.step {
	display: grid;
	grid-template-columns: 1.375rem 1fr;
	column-gap: 1rem;
	padding: 1.125rem 0;
	border-bottom: 1px solid var(--c-line);
}
.step__num {
	grid-row: 1;
	font: 600 0.75rem var(--f-mono);
	color: var(--c-accent);
	padding-top: 0.1875rem;
}
.step__title {
	grid-column: 2;
	font: 600 1rem/1.25 var(--f-display);
	color: var(--c-ink);
}
.step__text {
	grid-column: 2;
	margin-top: 0.375rem;
	font-size: 0.84375rem;
	line-height: 1.55;
}
@media (min-width: 900px) {
	.steps {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
	}
	.step {
		display: block;
		padding: 1.625rem 1.75rem 0.5rem;
		border-bottom: 0;
	}
	.step:first-child {
		padding-left: 0;
	}
	.step + .step {
		border-left: 1px solid var(--c-line);
	}
	.step__num {
		font-size: 0.8125rem;
		padding-top: 0;
	}
	.step__title {
		margin-top: 0.875rem;
		font-size: 1.125rem;
	}
	.step__text {
		margin-top: 0.5625rem;
		font-size: 0.875rem;
	}
}

/* --------------------------------------------------------------------------
   12. Pourquoi ça marche
   -------------------------------------------------------------------------- */
.whygrid {
	margin-top: clamp(1.5rem, 4vw, 2.75rem);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	display: grid;
}
.whygrid__cell {
	padding: 1.5rem 1.375rem 1.625rem;
}
.whygrid__cell + .whygrid__cell {
	border-top: 1px solid var(--c-line);
}
.whygrid__lead {
	font: 600 1.125rem/1.35 var(--f-display);
	letter-spacing: -0.01em;
	color: var(--c-ink);
	text-wrap: pretty;
}
.whygrid__text {
	margin-top: 0.5625rem;
	font-size: 0.90625rem;
	line-height: 1.6;
}
@media (min-width: 900px) {
	.whygrid {
		grid-template-columns: 1fr 1fr;
	}
	.whygrid__cell {
		padding: 2.5rem 2.5rem 2.75rem;
	}
	.whygrid__cell + .whygrid__cell {
		border-top: 0;
	}
	.whygrid__cell:nth-child(2n) {
		border-left: 1px solid var(--c-line);
	}
	.whygrid__cell:nth-child(n + 3) {
		border-top: 1px solid var(--c-line);
	}
	.whygrid__lead {
		font-size: 1.5rem;
		line-height: 1.3;
	}
	.whygrid__text {
		font-size: 0.9375rem;
	}
}

/* --------------------------------------------------------------------------
   13. Outils
   -------------------------------------------------------------------------- */
.toolstrip {
	margin-top: var(--section-gap);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}
.toolstrip__in {
	padding-top: 1.125rem;
	padding-bottom: 1.125rem;
	font: 500 0.75rem/2 var(--f-mono);
	letter-spacing: 0.03em;
	color: var(--c-text);
}
.toolstrip__dot {
	color: var(--c-dot);
}
.toolstrip__last {
	color: var(--c-ink);
	font-weight: 600;
}
@media (min-width: 900px) {
	.toolstrip__in {
		padding-top: 1.375rem;
		padding-bottom: 1.375rem;
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		line-height: 1.6;
	}
}

/* --------------------------------------------------------------------------
   14. Réalisations
   -------------------------------------------------------------------------- */
.works {
	display: grid;
	gap: 1.25rem;
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.works__link {
	display: block;
}
.works__shot {
	display: block;
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.works__shot img {
	width: 100%;
	aspect-ratio: 30 / 17; /* format natif des captures (480×272), uniforme */
	object-fit: cover;
	object-position: top;
	transition: opacity 0.15s ease;
}
.works__link:hover .works__shot img {
	opacity: 0.92;
}
.works__label {
	display: block;
	margin-top: 0.5625rem;
	font: 500 0.6875rem var(--f-mono);
	color: var(--c-muted);
}
.works__link:hover .works__label {
	color: var(--c-accent);
}
.works__item--extra.is-collapsed {
	display: none;
}
.works__more {
	margin-top: 1.75rem;
}
@media (min-width: 640px) {
	.works {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}
}
@media (min-width: 900px) {
	.works {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------------------------------------------------------
   15. Témoignages
   -------------------------------------------------------------------------- */
.quotes {
	margin-top: clamp(2rem, 4.5vw, 3rem);
}
.quote {
	break-inside: avoid;
	margin-bottom: 1.5rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 1.5rem 1.375rem 1.625rem;
	background: var(--c-bg);
}
.quote--agence {
	border-top: 3px solid var(--c-accent);
}
.quote__text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--c-ink);
	text-wrap: pretty;
}
.quote__text p + p {
	margin-top: 0.625rem;
}
.quote__sig {
	margin-top: 1rem;
	font: 500 0.75rem var(--f-mono);
	color: var(--c-muted);
}
.quote__author {
	color: var(--c-ink);
	font-weight: 600;
}
@media (min-width: 640px) {
	.quotes {
		columns: 2;
		column-gap: 1.5rem;
	}
}
@media (min-width: 900px) {
	.quotes {
		columns: 3;
	}
	.quote {
		padding: 1.75rem 1.625rem 1.875rem;
	}
}

/* --------------------------------------------------------------------------
   16. Repères tarifaires (teaser home)
   -------------------------------------------------------------------------- */
.pricing-teaser {
	display: grid;
	gap: 1.5rem;
}
.pricing-teaser__cta {
	margin-top: 1.375rem;
}
.pricing-teaser__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	padding: 1.0625rem 0;
	border-bottom: 1px solid var(--c-line);
}
.pricing-teaser__row:last-child {
	border-bottom: 0;
}
.pricing-teaser__row dt {
	font: 500 0.9375rem var(--f-text);
	color: var(--c-ink);
}
.pricing-teaser__row dd {
	font: 600 0.9375rem var(--f-mono);
	color: var(--c-ink);
	text-align: right;
}
@media (min-width: 900px) {
	.pricing-teaser {
		grid-template-columns: 23.75rem 1fr;
		gap: 4.5rem;
		align-items: start;
	}
	.pricing-teaser__cta {
		margin-top: 1.625rem;
	}
	.pricing-teaser__row {
		padding: 1.375rem 0;
	}
	.pricing-teaser__row dt {
		font-size: 1.125rem;
	}
	.pricing-teaser__row dd {
		font-size: 1.1875rem;
	}
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq {
	margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
	max-width: 53.75rem;
	border-top: 1px solid var(--c-line);
}
.faq__item {
	border-bottom: 1px solid var(--c-line);
}
.faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.0625rem 0;
	font: 600 0.9375rem/1.4 var(--f-text);
	color: var(--c-ink);
	cursor: pointer;
	list-style: none;
}
.faq__q::-webkit-details-marker {
	display: none;
}
.faq__marker {
	flex: none;
	position: relative;
	width: 0.875rem;
	height: 0.875rem;
}
.faq__marker::before,
.faq__marker::after {
	content: '';
	position: absolute;
	inset: 50% auto auto 0;
	width: 100%;
	height: 1.5px;
	background: var(--c-muted);
	transform: translateY(-50%);
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.faq__marker::after {
	transform: translateY(-50%) rotate(90deg);
}
.faq__item[open] .faq__marker::before,
.faq__item[open] .faq__marker::after {
	background: var(--c-accent);
}
.faq__item[open] .faq__marker::after {
	transform: translateY(-50%) rotate(0deg);
}
.faq__a {
	padding: 0 0 1.375rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 45rem;
}
/* Liens dans les blocs de texte : soulignés (pas de distinction par couleur seule). */
.faq__a a,
.section__intro a,
.contact__text a,
.form-msg a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
@media (min-width: 900px) {
	.faq__q {
		padding: 1.375rem 0;
		font-size: 1.0625rem;
	}
	.faq__item[open] .faq__q {
		padding-bottom: 0.875rem;
	}
}

/* --------------------------------------------------------------------------
   18. Contact (bande sombre + carte brief)
   -------------------------------------------------------------------------- */
.contact {
	display: grid;
	gap: 2.25rem;
}
.contact__text {
	margin-top: 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--c-dark-text);
	max-width: 32.5rem;
	text-wrap: pretty;
}
.contact__channels {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin-top: 2.25rem;
}
.contact__channel {
	font: 500 0.9375rem var(--f-mono);
	color: #fff;
}
.contact__channel:hover {
	color: var(--c-dark-link);
}
.contact__channel--link {
	color: var(--c-dark-link);
}
.contact__channel--link:hover {
	color: #fff;
}
@media (min-width: 900px) {
	.contact {
		grid-template-columns: 1fr 26.25rem;
		gap: 4.5rem;
		align-items: start;
	}
}

/* Carte brief */
.brief-card {
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
}
.brief-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--c-line);
}
.brief-card__label {
	font: 600 0.6875rem var(--f-mono);
	letter-spacing: 0.08em;
	color: var(--c-ink);
}
.brief-card__badge {
	font: 600 0.625rem var(--f-mono);
	letter-spacing: 0.08em;
	color: var(--c-accent);
}
.brief-card__body {
	padding: 1rem 1.25rem 1.125rem;
}
.field {
	margin: 0 0 0.75rem;
}
.field label {
	display: block;
	margin-bottom: 0.375rem;
	font: 500 0.65625rem var(--f-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.field input,
.field textarea {
	width: 100%;
	border: 1px solid var(--c-input);
	border-radius: 7px;
	padding: 0.75rem 0.875rem;
	font: 400 1rem/1.5 var(--f-text);
	color: var(--c-ink);
	background: #fff;
}
.field input::placeholder,
.field textarea::placeholder {
	color: var(--c-muted);
	opacity: 1;
}
.field textarea {
	resize: vertical;
	min-height: 6.5rem;
}
.field--err input,
.field--err textarea {
	border-color: #b32d2e;
	border-width: 2px;
}
.field__msg {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #8a1f21;
}
.hp-field {
	position: absolute !important;
	left: -624.9375rem;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.brief-card__submit {
	width: 100%;
	margin-top: 0.25rem;
}
.brief-card__note {
	margin-top: 0.75rem;
	font: 400 0.65625rem/1.6 var(--f-mono);
	color: var(--c-muted);
}
.form-msg {
	margin: 0 0 0.875rem;
	padding: 0.75rem 0.875rem;
	border-radius: 7px;
	font-size: 0.875rem;
	line-height: 1.5;
}
.form-msg--ok {
	margin-bottom: 0;
	background: #edf7ed;
	border: 1px solid #b7dfb9;
	color: #1e4620;
}
.form-msg--err {
	background: #fcf0f1;
	border: 1px solid #ecc8ca;
	color: #8a1f21;
}

/* Page RDV */
.rdv {
	display: grid;
	gap: 2.25rem;
	padding-bottom: 1rem;
}
.rdv__alt {
	margin-top: 1.5rem;
	font: 500 0.875rem var(--f-mono);
	color: var(--c-text);
}
.rdv__alt a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.brief-card--light {
	border: 1px solid var(--c-line);
	max-width: 30rem;
}
.field--radios {
	border: 0;
	padding: 0;
	margin: 0 0 0.75rem;
	min-width: 0;
}
.field--radios legend {
	display: block;
	margin-bottom: 0.375rem;
	padding: 0;
	font: 500 0.65625rem var(--f-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.field--radios label.radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.25rem 1.25rem 0 0;
	font: 500 0.9375rem var(--f-text);
	letter-spacing: 0;
	text-transform: none;
	color: var(--c-ink);
	cursor: pointer;
}
.radio input {
	accent-color: var(--c-accent);
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
}
.field select {
	width: 100%;
	border: 1px solid var(--c-input);
	border-radius: 7px;
	padding: 0.75rem 0.875rem;
	font: 400 1rem/1.5 var(--f-text);
	color: var(--c-ink);
	background: #fff;
}
.field__hint {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}
@media (min-width: 900px) {
	.rdv {
		grid-template-columns: 1fr 30rem;
		gap: 4.5rem;
		align-items: start;
	}
}

/* --------------------------------------------------------------------------
   19. Bande CTA (tarifs)
   -------------------------------------------------------------------------- */
.ctaband {
	display: grid;
	gap: 1.75rem;
}
.ctaband__title {
	font: 700 clamp(1.625rem, 2.5vw, 2rem)/1.2 var(--f-display);
	letter-spacing: -0.015em;
	color: #fff;
}
.ctaband__text {
	margin-top: 0.75rem;
	font-size: 0.96875rem;
	line-height: 1.6;
	color: var(--c-dark-text);
	max-width: 35rem;
}
.ctaband__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.125rem;
}
@media (min-width: 900px) {
	.ctaband {
		grid-template-columns: 1fr auto;
		gap: 3rem;
		align-items: center;
	}
	.ctaband__actions {
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   20. Page tarifs
   -------------------------------------------------------------------------- */
.table-scroll {
	overflow-x: auto;
}
.pricing {
	width: 100%;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.pricing th {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
	padding: 0.875rem 1rem;
	font: 600 0.625rem var(--f-mono);
	letter-spacing: 0.12em;
	color: var(--c-muted);
	text-align: left;
}
.pricing td {
	padding: 1.125rem 1rem;
	border-bottom: 1px solid var(--c-line-soft);
	font: 500 0.9375rem/1.45 var(--f-text);
	color: var(--c-ink);
	vertical-align: baseline;
}
.pricing tr:last-child td {
	border-bottom: 0;
}
.pricing__num {
	text-align: right !important;
	font: 600 0.9375rem var(--f-mono) !important;
	white-space: nowrap;
}
.pricing__sub {
	display: block;
	margin-top: 0.4375rem;
	font: 400 0.71875rem var(--f-mono);
	color: var(--c-muted);
}
/* Sous 640px : lignes empilées (libellé puis prix), aucun défilement horizontal. */
@media (max-width: 639.98px) {
	.pricing tbody,
	.pricing tr,
	.pricing td {
		display: block;
	}
	.pricing thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.pricing tr {
		border-bottom: 1px solid var(--c-line-soft);
	}
	.pricing tr:last-child {
		border-bottom: 0;
	}
	.pricing td {
		border-bottom: 0;
		padding: 1rem 1rem 0.25rem;
	}
	.pricing td.pricing__num {
		padding: 0 1rem 1rem;
		text-align: left !important;
		white-space: normal;
	}
}
@media (min-width: 900px) {
	.pricing th {
		padding: 0.875rem 1.75rem;
		font-size: 0.65625rem;
	}
	.pricing td {
		padding: 1.3125rem 1.75rem;
		font-size: 1.0625rem;
	}
	.pricing__num {
		font-size: 1.125rem !important;
	}
	.pricing__sub {
		font-size: 0.8125rem;
	}
}

/* Note de marge */
.margin-note {
	background: var(--c-surface);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--radius);
	padding: 1.75rem 1.5rem 1.875rem;
	display: grid;
	gap: 1.5rem;
}
.margin-note__lead {
	font: 600 clamp(1.25rem, 2vw, 1.5rem)/1.35 var(--f-display);
	letter-spacing: -0.01em;
	color: var(--c-ink);
	text-wrap: pretty;
}
.margin-note__calc {
	font: 500 0.875rem/2.1 var(--f-mono);
	color: var(--c-text);
}
.margin-note__dim {
	color: var(--c-muted);
}
.margin-note__accent {
	color: var(--c-accent);
}
@media (min-width: 900px) {
	.margin-note {
		grid-template-columns: 1fr 23.75rem;
		gap: 3rem;
		align-items: center;
		padding: 2.125rem 2.25rem 2.375rem;
	}
}

/* Conditions */
.terms {
	border-top: 1px solid var(--c-line);
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.terms__cell {
	padding: 1.125rem 1rem 0 0;
}
.terms__label {
	font: 500 0.625rem var(--f-mono);
	letter-spacing: 0.12em;
	color: var(--c-muted);
}
.terms__value {
	margin-top: 0.5rem;
	font: 500 0.90625rem/1.4 var(--f-text);
	color: var(--c-ink);
}
@media (min-width: 900px) {
	.terms {
		grid-template-columns: repeat(5, 1fr);
	}
	.terms__cell {
		padding: 1.375rem 1.75rem 0;
		border-left: 1px solid var(--c-line);
	}
	.terms__cell:first-child {
		padding-left: 0;
		border-left: 0;
	}
	.terms__value {
		font-size: 0.9375rem;
	}
}

/* --------------------------------------------------------------------------
   21. Prose (mentions légales)
   -------------------------------------------------------------------------- */
.prose {
	padding-bottom: 1rem;
}
.prose h2 {
	margin: 2.5rem 0 0;
	font: 700 1.5rem/1.2 var(--f-display);
	letter-spacing: -0.015em;
	color: var(--c-ink);
}
.prose h3 {
	margin: 1.75rem 0 0;
	font: 600 1.125rem/1.3 var(--f-display);
	color: var(--c-ink);
}
.prose p {
	margin: 0.875rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.7;
}
.prose ul {
	margin: 0.875rem 0 0;
	padding-left: 1.25rem;
	list-style: disc;
}
.prose li {
	margin-top: 0.375rem;
	font-size: 0.9375rem;
	line-height: 1.7;
}
.prose a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */
.site-footer {
	margin-top: var(--section-gap);
	background: var(--c-ink);
	border-top: 1px solid var(--c-dark-line);
}
/* Bande sombre en fin de page : le footer s'y colle. */
main:has(> .section--dark:last-child) + .site-footer {
	margin-top: 0;
}
.site-footer__in {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 1.375rem;
	padding-bottom: 1.5rem;
}
.site-footer__brand {
	font: 400 0.71875rem/1.8 var(--f-mono);
	color: var(--c-dark-muted);
}
.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.625rem;
	font: 400 0.71875rem/1.8 var(--f-mono);
	color: var(--c-dark-text);
}
.site-footer__links a {
	color: var(--c-dark-text);
}
.site-footer__links a:hover {
	color: #fff;
}
.site-footer__links span[aria-hidden] {
	color: var(--c-dark-muted);
}
@media (min-width: 900px) {
	.site-footer__in {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 1.625rem;
		padding-bottom: 1.625rem;
	}
	.site-footer__brand,
	.site-footer__links {
		font-size: 0.75rem;
	}
	.site-footer__links {
		gap: 0.25rem 0.875rem;
	}
}

/* --------------------------------------------------------------------------
   23. Accessibilité & préférences
   -------------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
	border-radius: 2px;
}
.section--dark :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--c-dark-link);
}
/* La carte blanche dans la bande sombre garde l'outline accent (3:1 sur blanc). */
.section--dark .brief-card :focus-visible {
	outline-color: var(--c-accent);
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}