/* ==========================================================================
   SMB-Acquisition · feuille de style
   1. Polices          2. Jetons            3. Base            4. Typographie
   5. Boutons          6. En-tête et menu   7. Sections        8. Accroche
   9. Composants       10. Maquettes        11. Pages internes 12. Formulaires
   13. Pied de page    14. Animations       15. Mouvement réduit
   ========================================================================== */

/* 1. Polices hébergées sur le site (aucun appel externe) ---------------- */
@font-face { font-family: "Lora"; src: url("../fonts/lora-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-latin-wght-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* 2. Jetons de la charte ------------------------------------------------- */
:root {
	--nuit: #1B2537;
	--nuit-2: #243049;
	--terra: #B4532A;
	--terra-fonce: #9A4522;
	--terra-clair: #D9895F;
	--sable: #F7F2EA;
	--sable-2: #EFE7DA;
	--sauge: #E7EFEA;
	--sauge-fonce: #3F6152;
	--ardoise: #4A5468;
	--bordure: #E4DCCF;
	--blanc: #FFFFFF;
	--gris-clair: #C9CED8;

	--serif: "Lora", Georgia, "Times New Roman", serif;
	--logo: "Lora", Georgia, "Times New Roman", serif;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--container: 1200px;
	--gutter: 20px;
	--gap: 20px;
	--section: 72px;
	--radius: 12px;
	--header: 72px;

	--ease: cubic-bezier(.2, .7, .1, 1);
	--ease-in-out: cubic-bezier(.7, 0, .2, 1);
	--ombre: 0 1px 2px rgba(27, 37, 55, .04), 0 12px 32px -16px rgba(27, 37, 55, .18);
}
@media (min-width: 768px) { :root { --gutter: 32px; --gap: 32px; --section: 96px; --header: 80px; } }
@media (min-width: 1025px) { :root { --section: 128px; } }

/* 3. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--blanc);
	color: var(--nuit);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
@media (min-width: 768px) { body { font-size: 18px; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--terra-clair); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--terra); color: var(--blanc); }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 8px; background: var(--nuit); color: var(--blanc); text-decoration: none; transition: top .2s; }
.skip:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* 4. Typographie --------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 500; color: var(--nuit); letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(36px, 5.6vw, 68px); line-height: 1.08; }
h2 { font-size: clamp(30px, 3.9vw, 50px); line-height: 1.12; }
h3 { font-size: clamp(21px, 1.8vw, 24px); line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; }
h4 { font-size: 19px; line-height: 1.35; font-weight: 600; }
h1 em, h2 em { font-style: italic; color: var(--terra); }
p { margin: 0; }
p + p { margin-top: 1em; }
.eyebrow {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 18px;
	font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ardoise);
}
.eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--terra); }
@media (min-width: 768px) { .eyebrow { font-size: 13px; } }
.intro { max-width: 640px; margin-top: 22px; font-size: 19px; line-height: 1.55; color: var(--ardoise); }
@media (min-width: 768px) { .intro { font-size: 21px; } }
.small { font-size: 14px; line-height: 1.55; color: var(--ardoise); }
@media (min-width: 768px) { .small { font-size: 15px; } }
.link {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--terra-fonce); font-weight: 600; text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
	transition: background-size .4s var(--ease);
}
.link::after { content: "→"; transition: transform .3s var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link:hover::after { transform: translateX(4px); }
.head { max-width: 760px; }
.head--center { margin: 0 auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }
.head--center .intro { margin-left: auto; margin-right: auto; }

/* 5. Boutons ------------------------------------------------------------- */
.btn {
	--bg: var(--terra); --fg: var(--blanc); --fill: var(--nuit); --fill-fg: var(--blanc);
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 52px; padding: 15px 28px;
	border: 1.5px solid var(--bg); border-radius: 999px;
	background: var(--bg); color: var(--fg);
	font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before {
	content: ""; position: absolute; z-index: -1; inset: 0;
	background: var(--fill);
	border-radius: inherit;
	transform: translateY(101%);
	transition: transform .55s var(--ease);
}
.btn::after { content: "→"; transition: transform .45s var(--ease); }
.btn:hover { color: var(--fill-fg); border-color: var(--fill); }
.btn:hover::before { transform: translateY(0); }
.btn:hover::after { transform: translateX(4px); }
.btn > span { display: inline-block; }
.btn--ghost { --bg: transparent; --fg: var(--nuit); --fill: var(--nuit); border-color: var(--nuit); }
.btn--light { --bg: var(--terra); --fg: var(--blanc); --fill: var(--blanc); --fill-fg: var(--nuit); }
.btn--ghost-light { --bg: transparent; --fg: var(--blanc); --fill: var(--blanc); --fill-fg: var(--nuit); border-color: rgba(255, 255, 255, .5); }
.btn--small { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.btn--small::after { display: none; }
.btn--block { width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 36px; }
@media (max-width: 599px) {
	.btns .btn, .sec__foot .btn, .entry .btn { width: 100%; }
	.btn { padding-inline: 20px; font-size: 15.5px; text-align: center; }
	.pilot__box { padding: 22px 18px; }
}

/* 6. En-tête et menu ----------------------------------------------------- */
.header {
	position: fixed; inset: 0 0 auto; z-index: 100;
	height: var(--header);
	transition: transform .5s var(--ease), background-color .4s, box-shadow .4s;
}
.header.is-scrolled { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--bordure); }
.header.is-hidden { transform: translateY(-100%); }
.header__inner { display: flex; align-items: center; gap: 24px; height: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--nuit); }
.brand__mark { display: block; flex: none; width: 40px; height: 40px; }
.brand__bg { fill: var(--nuit); transition: fill .3s; }
.brand__s { fill: var(--blanc); transition: fill .3s; }
.brand__dot { fill: var(--terra-clair); transition: fill .3s; }
.brand__name { font-family: var(--logo); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.brand__name i { font-weight: 500; color: var(--terra); }
.brand--light { color: var(--blanc); }
.brand--light .brand__bg { fill: var(--blanc); }
.brand--light .brand__s { fill: var(--nuit); }
.brand--light .brand__dot { fill: var(--terra); }
.brand--light .brand__name i { color: var(--terra-clair); }
.nav { display: none; gap: 30px; margin-left: auto; }
.nav a { position: relative; padding: 6px 0; font-size: 15px; font-weight: 500; text-decoration: none; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--terra); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.header__cta { display: none; }
.burger { display: grid; place-content: center; gap: 7px; width: 46px; height: 46px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: var(--nuit); cursor: pointer; position: relative; z-index: 2; }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--blanc); transition: transform .5s var(--ease); }
.burger[aria-expanded="true"] { background: var(--terra); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
@media (min-width: 1025px) {
	.nav { display: flex; }
	.header__cta { display: inline-flex; }
	.burger { display: none; }
}
.menu {
	position: fixed; inset: 0; z-index: 99;
	display: flex; flex-direction: column; justify-content: center; gap: 40px;
	padding: calc(var(--header) + 24px) var(--gutter) 40px;
	background: var(--nuit); color: var(--blanc);
	clip-path: circle(0 at calc(100% - 44px) 36px);
	transition: clip-path .8s var(--ease-in-out), visibility 0s .8s;
	visibility: hidden;
}
.menu[hidden] { display: flex; }
.menu.is-open { clip-path: circle(150% at calc(100% - 44px) 36px); visibility: visible; transition: clip-path .8s var(--ease-in-out); }
.menu__nav { display: grid; gap: 6px; }
.menu__nav a { display: flex; align-items: baseline; gap: 16px; font-family: var(--serif); font-size: clamp(34px, 9vw, 52px); line-height: 1.2; text-decoration: none; opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .6s var(--ease); }
.menu__nav a small { font-family: var(--sans); font-size: 13px; color: var(--terra-clair); }
.menu__nav a[aria-current] { color: var(--terra-clair); font-style: italic; }
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu.is-open .menu__nav a:nth-child(1) { transition-delay: .25s; }
.menu.is-open .menu__nav a:nth-child(2) { transition-delay: .3s; }
.menu.is-open .menu__nav a:nth-child(3) { transition-delay: .35s; }
.menu.is-open .menu__nav a:nth-child(4) { transition-delay: .4s; }
.menu.is-open .menu__nav a:nth-child(5) { transition-delay: .45s; }
.menu__cta { align-self: flex-start; opacity: 0; transition: opacity .5s .5s; }
.menu.is-open .menu__cta { opacity: 1; }
body.menu-open { overflow: hidden; }
body.menu-open .header { background: transparent; box-shadow: none; backdrop-filter: none; }
body.menu-open .header .brand { color: var(--blanc); }
body.menu-open .header .brand__bg { fill: var(--blanc); }
body.menu-open .header .brand__s { fill: var(--nuit); }
body.menu-open .header .brand__name i { color: var(--terra-clair); }

/* 7. Sections ------------------------------------------------------------ */
.sec { position: relative; padding: var(--section) 0; }
.sec--sable { background: var(--sable); }
.sec--nuit { background: var(--nuit); color: var(--blanc); }
.sec--nuit :is(h1, h2, h3, h4) { color: var(--blanc); }
.sec--nuit :is(h1, h2) em { color: var(--terra-clair); }
.sec--nuit .eyebrow { color: var(--gris-clair); }
.sec--nuit .eyebrow::before { background: var(--terra-clair); }
.sec--nuit :is(.intro, .small, p) { color: var(--gris-clair); }
.sec--nuit .link { color: var(--blanc); }
.sec--nuit .btn--ghost { --fg: var(--blanc); --fill: var(--blanc); --fill-fg: var(--nuit); border-color: rgba(255, 255, 255, .5); }
.sec .sec__body { margin-top: 56px; }
@media (min-width: 1025px) { .sec .sec__body { margin-top: 72px; } }
.sec__foot { margin-top: 48px; }
.grid { display: grid; gap: var(--gap); }
@media (min-width: 768px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: 48px; }
@media (min-width: 1025px) {
	.split { grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; }
	.split__head { position: sticky; top: calc(var(--header) + 40px); }
}
.split__head .intro { font-size: 18px; }
@media (min-width: 1025px) { .split__head h2 { font-size: clamp(34px, 3.3vw, 46px); } }
.split__head .link { margin-top: 28px; }

/* 8. Accroche ------------------------------------------------------------ */
.hero { padding: calc(var(--header) + 56px) 0 64px; overflow: hidden; }
@media (min-width: 1025px) { .hero { padding: calc(var(--header) + 88px) 0 96px; } }
.hero__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1025px) { .hero__grid { grid-template-columns: 7fr 5fr; gap: 64px; } }
.hero h1 { max-width: 760px; }
.hero .intro { max-width: 600px; }
.hero__meta { margin-top: 22px; }
.facts {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px var(--gap);
	margin: 72px 0 0; padding: 40px 0 0; border-top: 1px solid var(--bordure); list-style: none;
}
@media (min-width: 1025px) { .facts { grid-template-columns: repeat(4, 1fr); margin-top: 96px; } .facts li + li { padding-left: var(--gap); border-left: 1px solid var(--bordure); } }
.facts strong { display: block; font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; line-height: 1; color: var(--nuit); white-space: nowrap; font-variant-numeric: tabular-nums; }
.facts strong em { font-style: italic; color: var(--terra); }
.facts strong span { font: inherit; }
.facts li > span { display: block; margin-top: 12px; max-width: 240px; font-size: 15px; line-height: 1.5; color: var(--ardoise); }

/* Bandeau défilant */
.marquee { overflow: hidden; padding: 26px 0; border-block: 1px solid var(--bordure); background: var(--blanc); }
.marquee__track { display: flex; width: max-content; animation: defile 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__group span { display: inline-flex; align-items: center; gap: 36px; padding-right: 36px; font-family: var(--serif); font-size: clamp(22px, 2.6vw, 34px); white-space: nowrap; }
.marquee__group span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--terra); }
.marquee__group span:nth-child(even) { font-style: italic; color: var(--ardoise); }
@keyframes defile { to { transform: translateX(-50%); } }

/* 9. Composants ---------------------------------------------------------- */

/* Parcours en 4 temps */
.path { position: relative; display: grid; gap: 40px; margin-inline: 0; margin-bottom: 0; padding: 0; list-style: none; counter-reset: etape; }
@media (min-width: 768px) { .path { grid-template-columns: repeat(2, 1fr); gap: 48px var(--gap); } }
@media (min-width: 1025px) { .path { grid-template-columns: repeat(4, 1fr); } }
.path__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--bordure); border-radius: 50%; background: var(--blanc); transition: background-color .4s, border-color .4s, transform .5s var(--ease); }
.path__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--nuit); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.path li:hover .path__icon { background: var(--terra); border-color: var(--terra); }
.path li:hover .path__icon svg { stroke: var(--blanc); }
.path__num { display: block; margin-top: 22px; font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--terra); }
.path h3 { margin-top: 6px; }
.path p { margin-top: 10px; font-size: 16px; color: var(--ardoise); }
@media (min-width: 1025px) {
	.path::before { content: ""; position: absolute; left: 28px; right: 12%; top: 28px; height: 1px; background: var(--bordure); }
	.path::after { content: ""; position: absolute; left: 28px; right: 12%; top: 28px; height: 1px; background: var(--terra); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease) .3s; }
	.path.is-in::after { transform: scaleX(1); }
}
.conclusion { max-width: 720px; margin-top: 64px; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 28px); font-style: italic; line-height: 1.45; }

/* Cartes */
.card {
	position: relative; padding: 28px; border: 1px solid var(--bordure); border-radius: var(--radius); background: var(--blanc);
	transition: border-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease);
}
@media (min-width: 768px) { .card { padding: 34px; } }
.card:hover { border-color: var(--terra); transform: translateY(-4px); box-shadow: var(--ombre); }
.card h3 + p { margin-top: 12px; font-size: 16px; color: var(--ardoise); }
.card__num { display: block; margin-bottom: 26px; font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--terra); }

/* Liste à coches */
.checks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 32px; }
.checks li::before {
	content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4532A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sec--nuit .checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9895F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.sec--nuit .checks li { color: var(--blanc); }
.checks strong { display: block; font-weight: 600; }
.checks span { display: block; margin-top: 4px; font-size: 16px; color: var(--ardoise); }

/* Frise verticale (méthode) */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--bordure); }
.timeline::after { background: var(--terra); transform: scaleY(var(--p, 0)); transform-origin: top; }
.timeline > li { position: relative; padding: 0 0 48px 48px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before { content: ""; position: absolute; z-index: 1; left: 0; top: 6px; width: 15px; height: 15px; border: 2px solid var(--bordure); border-radius: 50%; background: var(--blanc); transition: border-color .4s, background-color .4s, transform .4s var(--ease); }
.timeline > li.is-active::before { border-color: var(--terra); background: var(--terra); transform: scale(1.15); box-shadow: 0 0 0 6px rgba(180, 83, 42, .14); }
.sec--sable .timeline > li::before { background: var(--sable); }
.when { display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-fonce); }
.timeline h3 { margin-top: 8px; }
.timeline p { margin-top: 10px; font-size: 16px; color: var(--ardoise); }
.timeline dl { display: grid; gap: 12px; margin: 16px 0 0; font-size: 16px; }
.timeline dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nuit); }
.timeline dd { margin: 2px 0 0; color: var(--ardoise); }

/* Qui suis-je */
.about { display: grid; gap: 40px; align-items: center; }
@media (min-width: 768px) { .about { grid-template-columns: 260px minmax(0, 1fr); gap: 72px; } }
@media (min-width: 1025px) { .about { grid-template-columns: 360px minmax(0, 720px); gap: 112px; justify-content: center; } }
.monogram { position: relative; display: grid; place-items: center; width: min(100%, 360px); aspect-ratio: 1; }
.monogram__ring { position: absolute; inset: 0; border: 1px solid var(--bordure); border-radius: 50%; }
.monogram__ring--2 { inset: 9%; border-style: dashed; }
.monogram__core { display: grid; place-items: center; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--sable); font-family: var(--serif); font-size: clamp(64px, 9vw, 112px); font-style: italic; color: var(--terra); }
.sec--sable .monogram__core { background: var(--blanc); }
@media (max-width: 767px) { .monogram { width: 200px; } }
.about__text p:not([class]) { color: var(--ardoise); }
.about__text h2 + p { margin-top: 28px; }
.about__text .link { margin-top: 28px; }

/* Comparatif */
.compare { position: relative; }
.compare__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.compare__row > :first-child { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-clair); }
.compare__row > :nth-child(2) { color: rgba(201, 206, 216, .7); text-decoration: line-through; text-decoration-color: rgba(201, 206, 216, .35); }
.compare__row > :nth-child(3) { position: relative; padding-left: 30px; color: var(--blanc); font-weight: 500; }
.compare__row > :nth-child(3)::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9895F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain; }
.compare__row--head { padding-top: 0; }
.compare__row--head > * { font-family: var(--serif); font-size: 20px !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; }
.compare__row--head > :first-child { display: none; }
.compare__row--head > :nth-child(2) { color: var(--gris-clair) !important; }
.compare__row--head > :nth-child(3) { padding-left: 0; color: var(--terra-clair); }
.compare__row--head > :nth-child(3)::before { display: none; }
@media (min-width: 1025px) {
	.compare__row { grid-template-columns: 220px 1fr 1fr; gap: 48px; padding: 28px 0; font-size: 18px; }
	.compare__row > :first-child { grid-column: auto; padding-top: 4px; }
	.compare__row--head > :first-child { display: block; }
	.compare::before { content: ""; position: absolute; top: -20px; bottom: -8px; right: -28px; width: calc((100% - 316px) / 2 + 56px); border: 1px solid rgba(217, 137, 95, .35); border-radius: 16px; background: linear-gradient(170deg, rgba(217, 137, 95, .16), rgba(217, 137, 95, .02) 70%); }
}

/* Offres */
.entry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: 28px; border: 1px solid var(--bordure); border-radius: var(--radius); background: var(--blanc); }
@media (min-width: 768px) { .entry { padding: 36px 40px; } }
.entry__text { flex: 1 1 420px; }
.entry__text h3 { margin-top: 8px; }
.entry__text p { margin-top: 8px; max-width: 640px; font-size: 16px; color: var(--ardoise); }
.offers { margin-top: 28px; align-items: stretch; }
.offer { display: flex; flex-direction: column; }
.offer .link { margin-top: auto; padding-top: 20px; align-self: flex-start; }
.offer--reco { border: 1.5px solid var(--terra); }
.tag { position: absolute; top: 0; left: 28px; transform: translateY(-50%); padding: 5px 12px; border-radius: 999px; background: var(--terra); color: var(--blanc); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }
@media (min-width: 768px) { .tag { left: 34px; } }
.price { color: var(--nuit) !important; margin: 18px 0 0; padding-bottom: 20px; border-bottom: 1px solid var(--bordure); line-height: 1.2; }
.price small { display: block; margin-bottom: 4px; font-size: 14px; color: var(--ardoise); }
.price strong { font-family: var(--serif); font-size: 36px; font-weight: 500; letter-spacing: -0.01em; }
.price span { margin-left: 6px; font-size: 15px; color: var(--ardoise); }
.sec--nuit .price { color: var(--blanc) !important; }
.sec--nuit .price :is(small, span) { color: var(--gris-clair); }
.offer p:not([class]) { margin-top: 20px; font-size: 16px; color: var(--ardoise); }
.offers + .small { margin-top: 32px; }
.offers + .small a { color: var(--terra-fonce); }

/* Offre de lancement */
.pilot { display: grid; gap: 40px; align-items: center; padding: 32px 24px; border-radius: 20px; background: var(--nuit); color: var(--blanc); overflow: hidden; position: relative; }
@media (min-width: 768px) { .pilot { padding: 56px; } }
@media (min-width: 1025px) { .pilot { grid-template-columns: 1.25fr 1fr; gap: 72px; padding: 72px; } }
.pilot::before { content: ""; position: absolute; width: 520px; aspect-ratio: 1; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(217, 137, 95, .28), transparent); pointer-events: none; }
.pilot h2 { color: var(--blanc); }
.pilot h2 em { color: var(--terra-clair); }
.pilot p { color: var(--gris-clair); }
.pilot .eyebrow { color: var(--gris-clair); }
.pilot .eyebrow::before { background: var(--terra-clair); }
.pilot__text p:not([class]) { margin-top: 20px; max-width: 560px; }
.pilot__text .small { margin-top: 16px; }
.pilot__box { position: relative; padding: 28px; border-radius: var(--radius); background: var(--blanc); color: var(--nuit); }
.pilot__box p { color: var(--nuit); }
@media (min-width: 768px) { .pilot__box { padding: 36px; } }
.pilot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--bordure); }
.pilot__row:first-child { padding-top: 0; }
.pilot__row > span:last-child { white-space: nowrap; }
.pilot__row s { margin-right: 10px; font-size: 15px; color: var(--ardoise); }
.pilot__row strong { font-family: var(--serif); font-size: 30px; font-weight: 500; }
.pilot__box .small { margin-top: 18px; color: var(--ardoise); }
.pilot__box .btn { margin-top: 26px; }
.seats { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: 14px; color: var(--gris-clair); }
.seats i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--terra-clair); }
.seats i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--terra-clair); opacity: .35; transform: scale(2.2); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--bordure); }
.faq details:first-child { border-top: 1px solid var(--bordure); }
.faq summary { position: relative; display: block; padding: 26px 56px 26px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.35; transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--terra-fonce); }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 1.5px; background: var(--terra); transition: transform .5s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq__answer { overflow: hidden; }
.faq__answer p { max-width: 680px; padding-bottom: 28px; color: var(--ardoise); }

/* Appel final */
.final { position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; width: 900px; aspect-ratio: 1; left: 50%; top: 100%; transform: translate(-50%, -45%); border-radius: 50%; background: radial-gradient(closest-side, rgba(217, 137, 95, .2), transparent); pointer-events: none; }
.final__grid { position: relative; display: grid; gap: 48px; align-items: center; }
@media (min-width: 1025px) { .final__grid { grid-template-columns: 7fr 5fr; gap: 96px; } }
.final h2 { font-size: clamp(36px, 5vw, 64px); }
.final__box { padding: 32px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(255, 255, 255, .04); }
.final__box .when { color: var(--gris-clair); }
.final__box .checks { margin-top: 22px; }
.final .btns + .small { margin-top: 18px; }
.final .small a { color: var(--blanc); }
.final--center .final__grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.final--center .intro { margin-left: auto; margin-right: auto; }
.final--center .btns { justify-content: center; }

/* 10. Maquettes ---------------------------------------------------------- */
.mock { position: relative; display: grid; place-items: center; padding: 32px 0; }
.mock::before { content: ""; position: absolute; width: min(460px, 100%); aspect-ratio: 1; border-radius: 50%; background: var(--sable); }
.mock > :not(.mock__orbit) { position: relative; }
.sec--nuit .mock::before { background: radial-gradient(closest-side, rgba(217, 137, 95, .22), rgba(217, 137, 95, .04)); }
.mock__orbit { position: absolute; width: min(540px, 116%); aspect-ratio: 1; border: 1px dashed var(--bordure); border-radius: 50%; }
.mock__orbit::before { content: ""; position: absolute; top: 14%; left: 8%; width: 12px; height: 12px; border-radius: 50%; background: var(--terra); }
.sec--nuit .mock__orbit { border-color: rgba(255, 255, 255, .12); }

/* Fiche Google */
.gcard { position: relative; width: min(360px, 100%); padding: 24px; border: 1px solid var(--bordure); border-radius: 16px; background: var(--blanc); box-shadow: 0 30px 60px -30px rgba(27, 37, 55, .35); font-size: 14px; }
.gcard__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--bordure); border-radius: 999px; color: var(--ardoise); font-size: 13px; }
.gcard__bar svg { width: 15px; height: 15px; fill: none; stroke: var(--ardoise); stroke-width: 2; }
.gcard__bar b { font-weight: 400; color: var(--nuit); border-right: 1.5px solid var(--terra); padding-right: 2px; }
.gcard__name { margin-top: 20px; font-family: var(--serif); font-size: 21px; font-weight: 600; }
.gcard__meta { color: var(--ardoise); font-size: 13px; }
.gcard__info { display: grid; gap: 10px; margin: 18px 0 20px; padding: 16px 0 0; border-top: 1px solid var(--bordure); list-style: none; }
.gcard__info li { position: relative; padding-left: 26px; font-size: 13.5px; }
.gcard__info li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F6152' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain; }
.gcard__info strong { color: var(--sauge-fonce); font-weight: 600; }
.gcard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gcard__actions span { padding: 10px; border: 1px solid var(--nuit); border-radius: 999px; text-align: center; font-size: 13px; font-weight: 600; }
.gcard__actions span + span { border-color: var(--terra); background: var(--terra); color: var(--blanc); }
.gcard__notif { position: absolute; right: -18px; top: -30px; display: grid; gap: 2px; padding: 12px 16px 12px 42px; border-radius: 12px; background: var(--nuit); color: var(--gris-clair); font-size: 12px; box-shadow: 0 20px 40px -16px rgba(27, 37, 55, .6); }
.gcard__notif strong { color: var(--blanc); font-size: 13px; }
.gcard__notif::before { content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--terra-clair); box-shadow: 0 0 0 4px rgba(217, 137, 95, .25); }
@media (max-width: 599px) { .gcard__notif { right: 6px; } }

/* Conversation */
.chat { position: relative; width: min(390px, 100%); border-radius: 18px; overflow: hidden; background: var(--blanc); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); color: var(--nuit); font-size: 14px; }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--bordure); font-weight: 600; }
.chat__head::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #3F9F6B; box-shadow: 0 0 0 4px rgba(63, 159, 107, .18); }
.chat__head small { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--sable); font-size: 11px; color: var(--ardoise); }
.chat__body { display: grid; align-content: start; gap: 10px; min-height: 330px; padding: 18px; background: var(--sable); }
.chat__msg { max-width: 86%; padding: 11px 14px; border: 1px solid var(--bordure); border-radius: 14px 14px 14px 4px; background: var(--blanc); line-height: 1.5; color: var(--nuit) !important; }
.chat__msg--user { justify-self: end; border: 0; border-radius: 14px 14px 4px 14px; background: var(--nuit); color: var(--blanc) !important; }
.chat__slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat__slots span { padding: 4px 10px; border: 1px solid var(--terra); border-radius: 999px; color: var(--terra-fonce); font-size: 12px; font-weight: 600; }
.chat__typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ardoise); animation: tape 1.2s infinite; }
.chat__typing i:nth-child(2) { animation-delay: .15s; }
.chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tape { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.chat__input { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-top: 1px solid var(--bordure); color: var(--ardoise); font-size: 13px; }
.chat__input::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--terra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / 16px; }
.chat__suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 18px; background: var(--sable); }
.chat__suggest button { padding: 7px 12px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--blanc); font-size: 12.5px; cursor: pointer; transition: border-color .3s, color .3s; }
.chat__suggest button:hover { border-color: var(--terra); color: var(--terra-fonce); }

/* Tableau de bord */
.dash { width: 100%; max-width: 460px; margin-top: 40px; padding: 24px; border: 1px solid var(--bordure); border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre); }
.dash__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 600; }
.dash__head small { font-size: 11px; font-weight: 500; color: var(--ardoise); }
.dash__chart { display: flex; align-items: flex-end; gap: 12px; height: 150px; margin-top: 20px; border-bottom: 1px solid var(--bordure); background: repeating-linear-gradient(to top, transparent 0 49px, var(--sable) 49px 50px); }
.dash__chart span { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(to top, var(--nuit) 0 45%, var(--ardoise) 45% 75%, var(--terra) 75% 100%); transform-origin: bottom; }
.dash__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--ardoise); }
.dash__legend li { display: flex; align-items: center; gap: 6px; }
.dash__legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--nuit); }
.dash__legend li:nth-child(2)::before { background: var(--ardoise); }
.dash__legend li:nth-child(3)::before { background: var(--terra); }

/* Email de résumé (page Assistant IA) */
.mail { width: min(440px, 100%); border: 1px solid var(--bordure); border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre); font-size: 14px; overflow: hidden; }
.mail__head { padding: 18px 22px; border-bottom: 1px solid var(--bordure); background: var(--sable); }
.mail__head strong { display: block; font-size: 15px; }
.mail__head span { color: var(--ardoise); font-size: 13px; }
.mail dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; margin: 0; padding: 22px; }
.mail dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); padding-top: 2px; }
.mail dd { margin: 0; }

/* 11. Pages internes ----------------------------------------------------- */
.page-hero { position: relative; padding: calc(var(--header) + 64px) 0 72px; background: var(--sable); overflow: hidden; }
@media (min-width: 1025px) { .page-hero { padding: calc(var(--header) + 96px) 0 104px; } }
.page-hero::after { content: ""; position: absolute; width: 640px; aspect-ratio: 1; right: -220px; top: -180px; border: 1px solid var(--bordure); border-radius: 50%; pointer-events: none; }
.page-hero h1 { max-width: 880px; }
.page-hero > .container { position: relative; z-index: 1; }
.toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--blanc); font-size: 15px; font-weight: 500; text-decoration: none; transition: border-color .3s, background-color .3s, color .3s; }
.toc a small { font-family: var(--serif); font-style: italic; color: var(--terra); }
.toc a:hover { border-color: var(--nuit); background: var(--nuit); color: var(--blanc); }
.toc a:hover small { color: var(--terra-clair); }

/* Détail d'une offre */
.detail { display: grid; gap: 48px; }
@media (min-width: 1025px) { .detail { grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; } .detail__head { position: sticky; top: calc(var(--header) + 40px); } }
.detail__num { display: block; font-family: var(--serif); font-size: clamp(64px, 8vw, 104px); font-style: italic; line-height: 1; color: var(--terra); }
.detail__head h2 { margin-top: 12px; }
.detail__head .price { border-bottom: 0; padding-bottom: 0; }
.detail__head .intro { font-size: 18px; }
.detail__head .btns { margin-top: 32px; }
.pill { display: inline-block; margin-top: 14px; padding: 5px 12px; border: 1px solid var(--terra-fonce); border-radius: 999px; color: var(--terra-fonce); font-size: 13px; font-weight: 600; }
.sec--nuit .pill { border-color: var(--terra-clair); color: var(--terra-clair); }
.included { margin: 0; padding: 0; list-style: none; counter-reset: inc; }
.included li { position: relative; padding: 28px 0 28px 64px; border-top: 1px solid var(--bordure); counter-increment: inc; }
.included li:last-child { border-bottom: 1px solid var(--bordure); }
.included li::before { content: counter(inc, decimal-leading-zero); position: absolute; left: 0; top: 30px; font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--terra); }
.included h3 { font-size: 21px; }
.included p { margin-top: 8px; font-size: 16px; color: var(--ardoise); }
.included .note { margin-top: 10px; padding: 12px 16px; border-left: 2px solid var(--terra); background: var(--sable); font-size: 15px; font-style: italic; }
.sec--sable .included .note { background: var(--blanc); }
.sec--nuit .included li { border-color: rgba(255, 255, 255, .12); }
.sec--nuit .included p { color: var(--gris-clair); }
.aside { margin-top: 32px; padding: 26px 28px; border-radius: var(--radius); background: var(--sable); }
.aside h3 { font-size: 13px; font-family: var(--sans); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-fonce); }
.aside .checks { margin-top: 14px; font-size: 16px; }

/* Étapes numérotées horizontales */
.steps { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; counter-reset: st; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { position: relative; padding-top: 28px; border-top: 1px solid var(--bordure); counter-increment: st; }
.steps li::before { content: counter(st, decimal-leading-zero); display: block; margin-bottom: 18px; font-family: var(--serif); font-size: 44px; font-style: italic; line-height: 1; color: var(--terra); }
.steps h3 { font-size: 21px; }
.steps p { margin-top: 8px; font-size: 16px; color: var(--ardoise); }

/* Merci, 404 */
.center-page { min-height: 86vh; display: grid; place-items: center; padding: calc(var(--header) + 48px) 0 80px; background: var(--sable); text-align: center; }
.center-page .intro { margin-left: auto; margin-right: auto; }
.center-page .btns { justify-content: center; }
.tick { width: 96px; height: 96px; margin: 0 auto 32px; }
.tick circle { fill: none; stroke: var(--sauge-fonce); stroke-width: 1.5; stroke-dasharray: 302; stroke-dashoffset: 302; animation: trace 1.2s var(--ease) .4s forwards; }
.tick path { fill: none; stroke: var(--sauge-fonce); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: trace .7s var(--ease) 1.3s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.links-list { display: grid; gap: 10px; max-width: 520px; margin: 48px auto 0; padding: 0; list-style: none; text-align: left; }
.links-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border: 1px solid var(--bordure); border-radius: var(--radius); background: var(--blanc); text-decoration: none; font-weight: 500; transition: border-color .3s, transform .4s var(--ease); }
.links-list a::after { content: "→"; color: var(--terra); transition: transform .4s var(--ease); }
.links-list a:hover { border-color: var(--terra); }
.links-list a:hover::after { transform: translateX(4px); }
.big-404 { font-family: var(--serif); font-size: clamp(120px, 24vw, 260px); font-style: italic; line-height: .9; color: var(--terra); }

/* Ressources */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 0; padding: 0; list-style: none; }
.chips span { display: inline-block; padding: 8px 16px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--blanc); font-size: 14px; color: var(--ardoise); }
.empty { display: grid; gap: 24px; justify-items: start; max-width: 720px; padding: 40px; border: 1px dashed var(--bordure); border-radius: 16px; }
.empty p { font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.45; }

/* Pages légales */
.prose { max-width: 760px; }
.prose h2 { margin: 56px 0 16px; font-size: clamp(24px, 2.4vw, 30px); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ardoise); }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 6px; }
.prose strong { color: var(--nuit); }
.prose a:not(.btn) { color: var(--terra-fonce); }
.prose .table { margin: 20px 0; overflow-x: auto; }
.prose table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: top; }
.prose th { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nuit); }

/* 12. Formulaires -------------------------------------------------------- */
.form-wrap { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1025px) { .form-wrap { grid-template-columns: 6fr 5fr; gap: 80px; } }
.form { padding: 28px; border: 1px solid var(--bordure); border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre); }
@media (min-width: 768px) { .form { padding: 40px; } }
.form h2 { font-size: clamp(26px, 2.6vw, 32px); }
.form__grid { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 600px) { .form__grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field { position: relative; display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field label small { font-weight: 400; color: var(--ardoise); }
.field input, .field textarea {
	width: 100%; min-height: 50px; padding: 13px 16px;
	border: 1px solid var(--bordure); border-radius: 10px; background: var(--blanc);
	font: inherit; font-size: 16px; color: var(--nuit);
	transition: border-color .3s, box-shadow .3s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8A93A5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 4px rgba(180, 83, 42, .12); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #B42A2A; }
.field__error { font-size: 13px; color: #B42A2A; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ardoise); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--terra); }
.check a { color: var(--terra-fonce); }
.hp { position: absolute; left: -9999px; }
.form .btn { margin-top: 26px; }
.form__note { margin-top: 16px; }
.form__or { display: flex; align-items: center; gap: 16px; margin: 26px 0; font-size: 14px; color: var(--ardoise); }
.form__or::before, .form__or::after { content: ""; flex: 1; height: 1px; background: var(--bordure); }
.notice { padding: 18px 22px; border-radius: var(--radius); background: var(--sauge); color: var(--sauge-fonce); font-weight: 500; }
.notice[hidden] { display: none; }
.notice--erreur { background: #F6E3E0; color: #8E2A1E; }
.notice a { color: inherit; }
.form .notice { margin-bottom: 24px; }
.contact-list { display: grid; gap: 0; margin: 32px 0 0; padding: 0; list-style: none; }
.contact-list li { padding: 20px 0; border-bottom: 1px solid var(--bordure); }
.contact-list li:first-child { border-top: 1px solid var(--bordure); }
.contact-list small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); }
.contact-list a, .contact-list span { display: inline-block; margin-top: 4px; font-family: var(--serif); font-size: 21px; text-decoration: none; }
.contact-list a:hover { color: var(--terra-fonce); }

/* 13. Pied de page ------------------------------------------------------- */
.footer { position: relative; padding: 80px 0 32px; background: var(--nuit); color: var(--gris-clair); overflow: hidden; }
.footer__top { display: grid; gap: 40px; }
@media (min-width: 768px) { .footer__top { grid-template-columns: 2fr 1fr 1fr; gap: 64px; } }
.footer__brand p { max-width: 360px; margin-top: 18px; font-size: 15px; }
.footer__col { display: grid; align-content: start; gap: 10px; }
.footer__col h2 { margin-bottom: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blanc); }
.footer a { font-size: 15px; text-decoration: none; transition: color .3s; }
.footer__col a { justify-self: start; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .4s var(--ease), color .3s; }
.footer__col a:hover { color: var(--blanc); background-size: 100% 1px; }
.footer__big { margin-top: 72px; font-family: var(--serif); font-size: clamp(44px, 12.2vw, 172px); font-style: italic; line-height: .9; letter-spacing: -0.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .16); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__bottom a:hover { color: var(--blanc); }

/* 14. Animations --------------------------------------------------------- */

/* Apparitions au défilement */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms)); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translateX(-20px); }
.js [data-reveal="scale"] { transform: scale(.97); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Titres : mots qui montent depuis un masque */
.js [data-split]:not(.is-split) { visibility: hidden; }
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 45ms + var(--d, 0ms)); }
.js [data-split].is-in .w > span { transform: none; }
/* Mots-clés en italique : soulignement qui se dessine */
.js [data-split] em { background: linear-gradient(currentColor, currentColor) no-repeat 0 94% / 0 2px; transition: background-size 1s var(--ease) 1s; }
.js [data-split].is-in em { background-size: 100% 2px; }

/* Barres du tableau de bord */
.js .dash__chart span { transform: scaleY(0); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 110ms + 200ms); }
.js .dash.is-in .dash__chart span { transform: none; }

/* Conversation animée */
.js .chat__msg[data-step] { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.js .chat__msg[data-step].is-shown { opacity: 1; transform: none; }
.js .chat__msg[data-step]:not(.is-shown) { display: none; }
.chat__typing[hidden] { display: none; }

/* Comparatif : lignes qui glissent */
.js .compare__row { opacity: 0; transform: translateX(-24px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.js .compare.is-in .compare__row { opacity: 1; transform: none; }
.js .compare::before { opacity: 0; transition: opacity 1.2s var(--ease) .6s; }
.js .compare.is-in::before { opacity: 1; }

/* 15. Mouvement réduit --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; animation-delay: 0s !important; }
	.marquee__track { animation: none; }
}

/* ==========================================================================
   16. Blocs de conversion (problème, leviers, exemple d'audit)
   ========================================================================== */

/* Fuite à chaque étape du parcours */
.path .leak { margin-top: 16px; padding: 12px 14px; border-left: 2px solid var(--terra); border-radius: 0 8px 8px 0; background: var(--blanc); font-size: 14.5px; color: var(--nuit); }
.path .leak strong { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-fonce); }

/* Trois leviers */
.lever { display: flex; flex-direction: column; }
.lever h3 { font-size: clamp(24px, 2.2vw, 30px); }
.lever .link { margin-top: auto; padding-top: 24px; align-self: flex-start; }
.lever__foot { margin-top: 40px; font-family: var(--serif); font-size: clamp(19px, 1.8vw, 22px); font-style: italic; color: var(--ardoise); }

/* Offres : objectif de chaque offre, question de rentabilité */
.offer__goal { margin-top: 4px !important; font-size: 15px !important; font-weight: 500; color: var(--terra-fonce) !important; }
.roi { margin-top: 40px; max-width: 760px; font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.4; }
.roi em { color: var(--terra-fonce); }
.roi + .small { margin-top: 14px; }
.roi label { display: block; }
.roi__field { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-family: var(--sans, inherit); font-size: 16px; color: var(--ardoise); }
.roi__field input { width: 180px; padding: 12px 16px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--blanc); color: var(--nuit); font: inherit; font-size: 18px; }
.roi__field input:focus { outline: 2px solid var(--terra); outline-offset: 2px; }
.roi__result { margin-top: 14px; font-family: var(--sans, inherit); font-size: 16px; line-height: 1.6; color: var(--ardoise); }
.roi__result strong { color: var(--nuit); }
div.roi + .small { margin-top: 14px; }

/* Extrait de rapport d'audit (illustration) */
.report { width: min(440px, 100%); border: 1px solid var(--bordure); border-radius: 16px; background: var(--blanc); box-shadow: 0 30px 60px -30px rgba(27, 37, 55, .35); font-size: 14px; overflow: hidden; }
.report__head { padding: 18px 22px; border-bottom: 1px solid var(--bordure); }
.report__head strong { display: block; font-size: 15px; }
.report__head span { font-size: 12px; color: var(--ardoise); }
.report__rows { margin: 0; padding: 8px 22px; list-style: none; }
.report__rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--sable-2); }
.report__rows li:last-child { border-bottom: 0; }
.report__rows b { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.report__rows .is-ok { background: var(--sauge); color: var(--sauge-fonce); }
.report__rows .is-mid { background: #FBEEDD; color: #8A5A12; }
.report__rows .is-bad { background: #F6E3E0; color: #8E2A1E; }
.report__prio { padding: 18px 22px 22px; background: var(--nuit); color: var(--blanc); }
.report__prio small { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-clair); }
.report__prio ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }

/* ==========================================================================
   17. Garantie, pack complet, guide gratuit
   ========================================================================== */

.guarantee { position: relative; margin-top: 18px !important; padding: 12px 14px 12px 44px; border-radius: 10px; background: var(--sauge); color: var(--sauge-fonce) !important; font-size: 14.5px !important; line-height: 1.5; }
.guarantee::before { content: ""; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F6152' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain; }
.guarantee strong { color: var(--sauge-fonce); }
.detail__head .guarantee { max-width: 520px; }

.bundle { display: grid; gap: 10px 32px; align-items: center; margin-top: 28px; padding: 24px 28px; border-radius: var(--radius); background: var(--nuit); color: var(--blanc); text-decoration: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
@media (min-width: 900px) { .bundle { grid-template-columns: auto 1fr auto; } }
.bundle:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -24px rgba(27, 37, 55, .6); }
.bundle__label { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--terra); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bundle__text { color: var(--gris-clair); font-size: 16px; }
.bundle__text strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--blanc); }
.bundle__price { white-space: nowrap; }
.bundle__price s { color: var(--gris-clair); font-size: 15px; }
.bundle__price strong { margin-left: 6px; font-family: var(--serif); font-size: 30px; font-weight: 500; }
.bundle__price small { display: block; text-align: right; color: var(--gris-clair); font-size: 13px; }
.price__old { margin-right: 8px; font-size: 18px; color: var(--ardoise); }

.guide-band { padding-top: 0; }
.guide-band__inner { display: grid; gap: 40px; align-items: center; padding: 32px 24px; border: 1px solid var(--bordure); border-radius: 20px; background: var(--sable); }
@media (min-width: 768px) { .guide-band__inner { grid-template-columns: 240px 1fr; gap: 56px; padding: 48px 56px; } }
.guide-band__cover { display: grid; align-content: end; gap: 4px; width: 200px; aspect-ratio: 3 / 4; padding: 22px; border-radius: 6px 14px 14px 6px; background: linear-gradient(160deg, var(--nuit-2), var(--nuit)); color: var(--blanc); box-shadow: 8px 10px 0 -2px var(--sable-2), 0 30px 50px -24px rgba(27, 37, 55, .6); transform: rotate(-3deg); }
@media (min-width: 768px) { .guide-band__cover { width: 100%; } }
.guide-band__cover small { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-clair); }
.guide-band__cover strong { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; }
.guide-band__cover span { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.3; }
.guide-band h2 { font-size: clamp(26px, 2.8vw, 36px); }
.guide-band .intro { font-size: 18px; }

.resource { display: flex; flex-direction: column; text-decoration: none; }
.resource .card__num { font-family: var(--sans); font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.resource .link { margin-top: auto; padding-top: 22px; align-self: flex-start; }
.empty { align-content: center; }

.guide__list { display: grid; gap: 12px; padding: 0 !important; list-style: none; counter-reset: g; }
.guide__list li { counter-increment: g; margin: 0 !important; padding: 20px 22px; border: 1px solid var(--bordure); border-radius: var(--radius); }
.guide__list .check { font-size: 16px; color: var(--ardoise); }
.guide__list .check strong { display: block; margin-bottom: 4px; font-size: 17px; color: var(--nuit); }
.guide__list .check strong::before { content: counter(g, decimal-leading-zero) "  "; font-family: var(--serif); font-style: italic; color: var(--terra); }
.guide__list li:has(input:checked) { border-color: var(--sauge-fonce); background: var(--sauge); }
.steps--order { margin-top: 56px; }

/* ==========================================================================
   18. Relief et profondeur (boutons avec tranche, cartes inclinables)
   ========================================================================== */

/* Boutons : une tranche sous le bouton, qui s'enfonce au clic */
.btn { --tranche: var(--terra-fonce); box-shadow: 0 4px 0 var(--tranche), 0 10px 20px -10px rgba(27, 37, 55, .45); transition: color .45s var(--ease), border-color .45s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover { --tranche: #0F1623; transform: translateY(-1px); box-shadow: 0 5px 0 var(--tranche), 0 16px 26px -12px rgba(27, 37, 55, .5); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tranche), 0 4px 10px -6px rgba(27, 37, 55, .4); }
.btn--ghost, .btn--ghost-light { --tranche: rgba(27, 37, 55, .18); box-shadow: 0 4px 0 var(--tranche); }
.btn--ghost-light, .sec--nuit .btn--ghost { --tranche: rgba(255, 255, 255, .14); }
.btn--light:hover { --tranche: var(--gris-clair); }
.btn--small { box-shadow: 0 3px 0 var(--tranche); }
.btn:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }

/* Chiffres en relief */
.steps li::before, .detail__num { text-shadow: 1px 1px 0 var(--sable-2), 2px 2px 0 var(--bordure), 3px 3px 0 rgba(180, 83, 42, .18); }
.sec--sable .steps li::before { text-shadow: 1px 1px 0 var(--blanc), 2px 2px 0 var(--bordure), 3px 3px 0 rgba(180, 83, 42, .18); }
.sec--nuit .detail__num { text-shadow: 1px 1px 0 var(--nuit-2), 2px 2px 0 #2E3B57, 3px 3px 0 rgba(0, 0, 0, .35); }

/* Icônes des profils (« Pour qui ? ») */
.card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 24px; border-radius: 14px; background: var(--sable); color: var(--terra); box-shadow: inset 0 -3px 0 var(--sable-2); transition: background-color .4s, color .4s, transform .5s var(--ease); }
.card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sec--sable .card__icon { background: var(--sable); }
.card:hover .card__icon { background: var(--terra); color: var(--blanc); box-shadow: inset 0 -3px 0 var(--terra-fonce); }

/* Accroches : trame de points et halo, pour donner de la profondeur */
.hero, .page-hero { isolation: isolate; }
.hero::before, .page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(27, 37, 55, .09) 1.2px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 30%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 70% at 85% 30%, #000 10%, transparent 70%); }
.hero { position: relative; }
.hero::after { content: ""; position: absolute; z-index: -1; width: 720px; aspect-ratio: 1; right: -200px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(217, 137, 95, .16), transparent); pointer-events: none; }
.page-hero > .container { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.btn:hover, .btn:active { transform: none; }
}

/* ==========================================================================
   19. Site calme : contenu visible tout de suite, pas d'animation répétée
   ========================================================================== */
.js [data-reveal], .js [data-reveal].is-in { opacity: 1; transform: none; transition: none; }
.js [data-split]:not(.is-split) { visibility: visible; }
.js [data-split] em, .js [data-split].is-in em { background: none; transition: none; }
.js .compare__row, .js .compare::before { opacity: 1; transform: none; transition: none; }
.js .dash__chart span { transform: none; transition: none; }
.path::after { transform: none !important; transition: none !important; }

/* Boutons : couleur qui fonce au survol, tranche qui s'enfonce au clic (plus de remplissage animé) */
.btn::before { display: none; }
.btn:hover { background: var(--terra-fonce); border-color: var(--terra-fonce); color: var(--blanc); transform: none; }
.btn--ghost:hover { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.btn--light:hover { background: var(--blanc); border-color: var(--blanc); color: var(--nuit); }
.btn--ghost-light:hover, .sec--nuit .btn--ghost:hover { background: var(--blanc); border-color: var(--blanc); color: var(--nuit); }
.btn, .btn::after { transition: background-color .25s, border-color .25s, color .25s, transform .15s, box-shadow .15s; }

/* Cartes : survol discret, sans déplacement */
.card:hover { transform: none; }

/* ==========================================================================
   20. Style moderne : titres sans empattements, pastilles, grille « logiciel »
   (pour revenir au style classique, supprimer cette section)
   ========================================================================== */
:root { --serif: var(--sans); --radius: 16px; }

/* Titres nets et serrés */
h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.035em; }
h1 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.04; }
h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; }
h3 { font-weight: 600; letter-spacing: -0.02em; }
@media (min-width: 1025px) { .split__head h2 { font-size: clamp(30px, 3vw, 42px); } }
h1 em, h2 em, .js [data-split] em { font-style: normal; color: var(--terra); }
.sec--nuit :is(h1, h2) em, .pilot h2 em, .final h2 em { color: var(--terra-clair); }

/* Plus d'italique classique dans les textes et les chiffres */
.conclusion, .lever__foot, .card__num, .path__num, .detail__num, .steps li::before, .toc a small, .footer__big, .big-404,
.guide-band__cover span, .monogram__core, .menu__nav a[aria-current], .included li::before, .guide__list .check strong::before,
.facts strong em, .roi em { font-style: normal; }
.conclusion, .lever__foot { font-weight: 500; letter-spacing: -0.015em; }
.lever__foot { font-size: clamp(17px, 1.6vw, 20px); color: var(--ardoise); }
.roi { font-weight: 600; letter-spacing: -0.02em; }
.card__num, .path__num, .toc a small { font-size: 13px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.detail__num, .steps li::before { font-weight: 300; letter-spacing: -0.05em; text-shadow: none !important; font-variant-numeric: tabular-nums; }
.steps li::before { font-size: 40px; }
.sec--sable .steps li::before { text-shadow: none; }
.pilot__row strong, .price strong, .bundle__price strong { font-weight: 650; letter-spacing: -0.03em; }
.footer__big { font-weight: 750; letter-spacing: -0.06em; }
.monogram__core { font-weight: 650; letter-spacing: -0.04em; }
.menu__nav a { font-weight: 600; letter-spacing: -0.03em; }
.faq summary { font-weight: 600; letter-spacing: -0.015em; }
.guide-band__cover strong { font-weight: 700; letter-spacing: -0.04em; }

/* Étiquettes en pastilles */
.eyebrow { display: inline-flex; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--blanc); font-size: 11.5px; letter-spacing: .12em; }
@media (min-width: 768px) { .eyebrow { font-size: 12px; } }
.eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 3px rgba(180, 83, 42, .15); }
.sec--nuit .eyebrow, .pilot .eyebrow { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); }
.sec--nuit .eyebrow::before, .pilot .eyebrow::before { background: var(--terra-clair); box-shadow: 0 0 0 3px rgba(217, 137, 95, .2); }
.head--center .eyebrow { margin-left: auto; margin-right: auto; }
p.eyebrow { width: fit-content; }

/* Cartes plus nettes */
.card { box-shadow: 0 1px 2px rgba(27, 37, 55, .05); }
.card:hover { box-shadow: 0 1px 2px rgba(27, 37, 55, .05), 0 18px 40px -24px rgba(27, 37, 55, .28); }

/* Accroches : grille fine façon logiciel, à la place des points */
.hero::before, .page-hero::before {
	background-image: linear-gradient(rgba(27, 37, 55, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 37, 55, .055) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000 15%, transparent 72%);
	mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000 15%, transparent 72%);
}
.page-hero::after { display: none; }

/* Boutons : tranche plus fine */
.btn { box-shadow: 0 3px 0 var(--tranche), 0 8px 18px -10px rgba(27, 37, 55, .4); font-weight: 600; letter-spacing: -0.01em; }
.btn:hover { box-shadow: 0 3px 0 var(--tranche), 0 10px 22px -10px rgba(27, 37, 55, .45); }
.btn--ghost, .btn--ghost-light { box-shadow: 0 3px 0 var(--tranche); }

/* Parcours « Le problème » : chaque ligne (icône, numéro, titre, texte, « Ce qui fait fuir ») alignée d'une colonne à l'autre */
@media (min-width: 768px) {
	.path li { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
	.path li > .path__icon { justify-self: start; }
	.path .leak { align-self: stretch; }
}

/* 21. Corrections de l'audit du 15/10/2026 ---------------------------------- */
/* Comparatif : colonne « annuaires et agences » lisible, sans texte barré */
.compare__row > :nth-child(2) { color: rgba(201, 206, 216, .85); text-decoration: none; }
/* « Qui suis-je » : monogramme plus discret, il ne doit pas ressembler à une photo manquante */
.monogram { width: min(100%, 240px); justify-self: center; }
.monogram__core { font-size: clamp(48px, 6vw, 76px); }
@media (max-width: 767px) { .monogram { width: 150px; } }
@media (min-width: 768px) { .footer__top { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 48px; } }
/* Mini-étude de terrain (accueil, section « Le problème ») */
.terrain { margin-top: 64px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--bordure); border-radius: 20px; background: var(--blanc); }
.terrain__title { max-width: 640px; font-weight: 600; color: var(--nuit); }
.terrain__grid { display: grid; gap: 24px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .terrain__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.terrain__grid li { display: grid; gap: 8px; align-content: start; }
.terrain__grid strong { font-size: clamp(44px, 5vw, 60px); font-weight: 650; line-height: 1; letter-spacing: -0.04em; color: var(--terra); text-shadow: 1px 1px 0 var(--blanc), 2px 2px 0 var(--bordure), 3px 3px 0 rgba(180, 83, 42, .18); }
.terrain__grid strong small { margin-left: 2px; font-size: .4em; letter-spacing: 0; color: var(--gris, #6B7280); text-shadow: none; }
.terrain__note { margin-top: 24px; max-width: 760px; }